/* 针织网 — 顶栏 + 侧栏；主区横向 7 列行宽不小于设计宽，窄窗横向滚动 + 拖拽平移 */

:root {
  --knit-top-h: 52px;
  --knit-diandian-hang-w: 3.6rem;
  --knit-diandian-hang-h: 6.15rem;
  --knit-diandian-ui-scale: 1;
  --knit-side-w: 148px;
  --knit-side-w-collapsed: 10px;
  --knit-side-w-rail: 1.4rem;
  --knit-side-inset: var(--knit-side-w-collapsed);
  --knit-radius-sm: 8px;
  --knit-radius-md: 12px;
  --knit-radius-lg: 16px;
  --knit-black: #0a0a0a;
  --knit-black-hover: #1a1a1a;
  --knit-red: #c93030;
  --knit-red-soft: #e85c5c;
  /* 浅色：冷灰页面底 + 白面板层级，避免整页死白 */
  --knit-bg: #f4f5f7;
  --knit-main-bg: #f4f5f7;
  --knit-page-text: #15171c;
  --knit-chrome-bg: rgba(255, 255, 255, 0.92);
  --knit-chrome-text: #15171c;
  --knit-chrome-text-muted: #64748b;
  --knit-chrome-border: #e4e6eb;
  --knit-chrome-hover: #eef0f3;
  --knit-chrome-active: #e8eaee;
  --knit-chrome-active-text: #0f1115;
  --knit-chrome-submenu-bg: rgba(15, 23, 42, 0.035);
  --knit-chrome-shadow: rgba(15, 23, 42, 0.1);
  --knit-chrome-radius: 22px;
  --knit-view-bg: #f4f5f7;
  --knit-view-text: #2a2f3a;
  --knit-surface-bg: #ffffff;
  --knit-surface-text: #2a2f3a;
  --knit-surface-border: #e2e5ea;
  --knit-surface-muted: #6b7280;
  --knit-surface-panel-bg: #ffffff;
  --knit-surface-panel-border: #e8eaee;
  --knit-surface-input-bg: #ffffff;
  --knit-surface-hover-bg: #f8f9fb;
  --knit-page-bg: #f4f5f7;
  --knit-page-bg-alt: #eef0f3;
  --knit-panel-bg: #ffffff;
  --knit-panel-bg-alt: #f8f9fb;
  --knit-panel-border: #e5e7eb;
  --knit-panel-shadow: 0 1px 2px rgba(15, 23, 42, 0.04), 0 4px 14px rgba(15, 23, 42, 0.04);
  --knit-paper-bg: #f7f8fa;
  --knit-paper-bg-warm: #faf8f5;
  --knit-paper-line: rgba(15, 23, 42, 0.07);
  --knit-paper-rule: #d8dde6;
  --knit-paper-heading: #2a3140;
  --knit-paper-body: #4a5160;
  --knit-text: var(--knit-page-text);
  --knit-text-heading: #111318;
  --knit-text-body: #3a4050;
  --knit-text-muted: #6b7280;
  --knit-text-subtle: #9aa1ae;
  --knit-hint-size: 0.8125rem;
  --knit-hint-lh: 1.65;
  --knit-hint-ls: 0.01em;
  --knit-hint-weight: 400;
  --knit-empty-size: 0.9375rem;
  --knit-empty-lh: 1.7;
  --knit-empty-ls: 0.02em;
  --knit-empty-weight: 400;
  --knit-control-bg: #ffffff;
  --knit-control-border: #d5d8de;
  --knit-control-text: #15171c;
  --knit-control-hover-bg: #f3f4f6;
  --knit-control-active-bg: #ebecef;
  --knit-control-active-border: #1f2430;
  --knit-input-bg: #ffffff;
  --knit-input-text: #1c1f26;
  --knit-tab-inactive: #8b93a1;
  --knit-divider: #e6e8ec;
  --knit-modal-bg: #ffffff;
  --knit-modal-border: #e5e7eb;
  --knit-modal-shadow: 0 16px 40px rgba(15, 23, 42, 0.16);
  --knit-tag-bg: #eef0f3;
  --knit-tag-text: #4b5563;
  --knit-btn-secondary-bg: #ffffff;
  --knit-btn-secondary-hover: #f3f4f6;
  --knit-pill-active-bg: #1c1f26;
  --knit-pill-active-text: #fff;
  --knit-theme-transition-duration: 0.55s;
  --knit-theme-transition-easing: cubic-bezier(0.22, 1, 0.36, 1);
  /* 私信：与主壳同系 */
  --knit-dm-bg: #ffffff;
  --knit-dm-header-bg: #ffffff;
  --knit-dm-border: #e5e7eb;
  --knit-dm-title: #111318;
  --knit-dm-sub: #6b7280;
  --knit-dm-icon: #6b7280;
  --knit-dm-icon-hover-bg: #f3f4f6;
  --knit-dm-icon-hover: #111318;
  --knit-dm-messages-bg: #f6f7f9;
  --knit-dm-peer-bubble: #eef0f3;
  --knit-dm-peer-text: #15171c;
  --knit-dm-time: #9aa1ae;
  --knit-dm-status: #9aa1ae;
  --knit-dm-status-failed: #dc2626;
  --knit-dm-status-failed-hover: #b91c1c;
  --knit-dm-link: #2563eb;
  --knit-dm-composer-bg: #ffffff;
  --knit-dm-input-bg: #f3f4f6;
  --knit-dm-input-text: #15171c;
  --knit-dm-input-placeholder: #9aa1ae;
  --knit-dm-input-focus-bg: #eef0f3;
  --knit-dm-tool-bg: #f3f4f6;
  --knit-dm-tool-text: #6b7280;
  --knit-dm-tool-hover-bg: #e5e7eb;
  --knit-dm-tool-hover-text: #111318;
  --knit-dm-voice-hold-bg: #e5e7eb;
  --knit-dm-voice-hold-text: #111318;
  --knit-dm-tile-bg: #f3f4f6;
  --knit-dm-tile-text: #3a4050;
  --knit-dm-tile-hover-bg: #e5e7eb;
  --knit-dm-placeholder-bg: #f3f4f6;
  --knit-dm-image-note: #6b7280;
  --knit-dm-toolbar-bg: #ffffff;
  --knit-dm-share-note-border: rgba(15, 23, 42, 0.1);
  --knit-dm-shadow: 0 14px 36px rgba(15, 23, 42, 0.14);
  --knit-dm-dock-shadow: -6px 0 28px rgba(15, 23, 42, 0.1);
  --knit-dm-dock-hover-bg: #f8f9fb;
  --knit-dm-dock-hover-shadow: -8px 0 32px rgba(15, 23, 42, 0.14);
  --knit-dm-contact-hover: rgba(15, 23, 42, 0.05);
  --knit-dm-voice-play-bg: rgba(15, 23, 42, 0.08);
  --knit-grid-ref-w: 1200px;
}

html[data-knit-theme="dark"] {
  --knit-text: var(--knit-page-text);
  /* 冷灰炭黑：bg < panel < elevated */
  --knit-dark-bg: #11131a;
  --knit-dark-chrome: #0c0e13;
  --knit-dark-panel: #1a1d26;
  --knit-dark-elevated: #232732;
  --knit-dark-overlay: #2c313d;
  --knit-bg: var(--knit-dark-bg);
  --knit-main-bg: var(--knit-dark-bg);
  --knit-page-text: #e8eaf0;
  --knit-chrome-bg: rgba(14, 16, 22, 0.94);
  --knit-chrome-text: #eceef4;
  --knit-chrome-text-muted: #9aa3b5;
  --knit-chrome-border: rgba(255, 255, 255, 0.08);
  --knit-chrome-hover: #1a1e28;
  --knit-chrome-active: #262b37;
  --knit-chrome-active-text: #f5f6fa;
  --knit-chrome-submenu-bg: rgba(255, 255, 255, 0.045);
  --knit-chrome-shadow: rgba(0, 0, 0, 0.5);
  --knit-view-bg: var(--knit-dark-bg);
  --knit-view-text: #e4e7ef;
  --knit-surface-bg: var(--knit-dark-panel);
  --knit-surface-text: #e4e7ef;
  --knit-surface-border: rgba(255, 255, 255, 0.1);
  --knit-surface-muted: #9aa3b5;
  --knit-surface-panel-bg: var(--knit-dark-panel);
  --knit-surface-panel-border: rgba(255, 255, 255, 0.09);
  --knit-surface-input-bg: #1c202a;
  --knit-surface-hover-bg: rgba(255, 255, 255, 0.05);
  --knit-page-bg: var(--knit-dark-bg);
  --knit-page-bg-alt: #161922;
  --knit-panel-bg: var(--knit-dark-panel);
  --knit-panel-bg-alt: var(--knit-dark-elevated);
  --knit-panel-border: rgba(255, 255, 255, 0.1);
  --knit-panel-shadow: 0 0 0 1px rgba(255, 255, 255, 0.05), 0 10px 28px rgba(0, 0, 0, 0.38);
  --knit-paper-bg: var(--knit-dark-elevated);
  --knit-paper-bg-warm: #262a34;
  --knit-paper-line: rgba(255, 255, 255, 0.06);
  --knit-paper-rule: rgba(255, 255, 255, 0.12);
  --knit-paper-heading: #e8eaf0;
  --knit-paper-body: #b6bdc9;
  --knit-text-heading: #f2f4f8;
  --knit-text-body: #d0d4de;
  --knit-text-muted: #9aa3b5;
  --knit-text-subtle: #7e8799;
  --knit-control-bg: var(--knit-dark-elevated);
  --knit-control-border: rgba(255, 255, 255, 0.14);
  --knit-control-text: #e6e8ee;
  --knit-control-hover-bg: var(--knit-dark-overlay);
  --knit-control-active-bg: #333948;
  --knit-control-active-border: rgba(255, 255, 255, 0.3);
  --knit-input-bg: #1c202a;
  --knit-input-text: #e6e8ee;
  --knit-tab-inactive: #8b93a7;
  --knit-divider: rgba(255, 255, 255, 0.08);
  --knit-modal-bg: var(--knit-dark-panel);
  --knit-modal-border: rgba(255, 255, 255, 0.11);
  --knit-modal-shadow: 0 18px 48px rgba(0, 0, 0, 0.55), 0 0 0 1px rgba(255, 255, 255, 0.05);
  --knit-tag-bg: rgba(255, 255, 255, 0.07);
  --knit-tag-text: #b6bdc9;
  --knit-btn-secondary-bg: var(--knit-dark-elevated);
  --knit-btn-secondary-hover: var(--knit-dark-overlay);
  --knit-pill-active-bg: rgba(255, 255, 255, 0.16);
  --knit-pill-active-text: #fff;
  --knit-red: #e25555;
  --knit-red-soft: #f07171;
  /* 私信深色：与主壳冷炭对齐，去掉旧版浑浊 #363636 */
  --knit-dm-bg: var(--knit-dark-panel);
  --knit-dm-header-bg: var(--knit-dark-panel);
  --knit-dm-border: rgba(255, 255, 255, 0.1);
  --knit-dm-title: #f2f4f8;
  --knit-dm-sub: #8b93a7;
  --knit-dm-icon: #9aa3b5;
  --knit-dm-icon-hover-bg: var(--knit-dark-overlay);
  --knit-dm-icon-hover: #e8eaf0;
  --knit-dm-messages-bg: var(--knit-dark-bg);
  --knit-dm-peer-bubble: var(--knit-dark-elevated);
  --knit-dm-peer-text: #f0f2f7;
  --knit-dm-time: #7a8296;
  --knit-dm-status: #8b93a7;
  --knit-dm-status-failed: #fca5a5;
  --knit-dm-status-failed-hover: #fecaca;
  --knit-dm-link: #7eb6ff;
  --knit-dm-composer-bg: var(--knit-dark-panel);
  --knit-dm-input-bg: #1c202a;
  --knit-dm-input-text: #f0f2f7;
  --knit-dm-input-placeholder: #7a8296;
  --knit-dm-input-focus-bg: #222732;
  --knit-dm-tool-bg: var(--knit-dark-elevated);
  --knit-dm-tool-text: #9aa3b5;
  --knit-dm-tool-hover-bg: var(--knit-dark-overlay);
  --knit-dm-tool-hover-text: #f0f2f7;
  --knit-dm-voice-hold-bg: var(--knit-dark-overlay);
  --knit-dm-voice-hold-text: #f0f2f7;
  --knit-dm-tile-bg: var(--knit-dark-elevated);
  --knit-dm-tile-text: #e4e7ef;
  --knit-dm-tile-hover-bg: var(--knit-dark-overlay);
  --knit-dm-placeholder-bg: #1c202a;
  --knit-dm-image-note: #b6bdc9;
  --knit-dm-toolbar-bg: var(--knit-dark-chrome);
  --knit-dm-share-note-border: rgba(255, 255, 255, 0.14);
  --knit-dm-shadow: 0 14px 40px rgba(0, 0, 0, 0.45);
  --knit-dm-dock-shadow: -6px 0 28px rgba(0, 0, 0, 0.5);
  --knit-dm-dock-hover-bg: #0a0c10;
  --knit-dm-dock-hover-shadow: -8px 0 32px rgba(0, 0, 0, 0.55);
  --knit-dm-contact-hover: rgba(255, 255, 255, 0.07);
  --knit-dm-voice-play-bg: rgba(255, 255, 255, 0.14);
}

html[data-knit-theme="light"] {
  --knit-text: var(--knit-page-text);
  --knit-bg: #f4f5f7;
  --knit-main-bg: #f4f5f7;
  --knit-page-text: #15171c;
  --knit-chrome-bg: rgba(255, 255, 255, 0.92);
  --knit-chrome-text: #15171c;
  --knit-chrome-text-muted: #64748b;
  --knit-chrome-border: #e4e6eb;
  --knit-chrome-hover: #eef0f3;
  --knit-chrome-active: #e8eaee;
  --knit-chrome-active-text: #0f1115;
  --knit-chrome-submenu-bg: rgba(15, 23, 42, 0.035);
  --knit-chrome-shadow: rgba(15, 23, 42, 0.1);
  --knit-view-bg: #f4f5f7;
  --knit-view-text: #2a2f3a;
  --knit-surface-bg: #ffffff;
  --knit-surface-text: #2a2f3a;
  --knit-surface-border: #e2e5ea;
  --knit-surface-muted: #6b7280;
  --knit-surface-panel-bg: #ffffff;
  --knit-surface-panel-border: #e8eaee;
  --knit-surface-input-bg: #ffffff;
  --knit-surface-hover-bg: #f8f9fb;
  --knit-page-bg: #f4f5f7;
  --knit-page-bg-alt: #eef0f3;
  --knit-panel-bg: #ffffff;
  --knit-panel-bg-alt: #f8f9fb;
  --knit-panel-border: #e5e7eb;
  --knit-panel-shadow: 0 1px 2px rgba(15, 23, 42, 0.04), 0 4px 14px rgba(15, 23, 42, 0.04);
  --knit-paper-bg: #f7f8fa;
  --knit-paper-bg-warm: #faf8f5;
  --knit-paper-line: rgba(15, 23, 42, 0.07);
  --knit-paper-rule: #d8dde6;
  --knit-paper-heading: #2a3140;
  --knit-paper-body: #4a5160;
  --knit-text-heading: #111318;
  --knit-text-body: #3a4050;
  --knit-text-muted: #6b7280;
  --knit-text-subtle: #9aa1ae;
  --knit-control-bg: #ffffff;
  --knit-control-border: #d5d8de;
  --knit-control-text: #15171c;
  --knit-control-hover-bg: #f3f4f6;
  --knit-control-active-bg: #ebecef;
  --knit-control-active-border: #1f2430;
  --knit-input-bg: #ffffff;
  --knit-input-text: #1c1f26;
  --knit-tab-inactive: #8b93a1;
  --knit-divider: #e6e8ec;
  --knit-modal-bg: #ffffff;
  --knit-modal-border: #e5e7eb;
  --knit-modal-shadow: 0 16px 40px rgba(15, 23, 42, 0.16);
  --knit-tag-bg: #eef0f3;
  --knit-tag-text: #4b5563;
  --knit-btn-secondary-bg: #ffffff;
  --knit-btn-secondary-hover: #f3f4f6;
  --knit-pill-active-bg: #1c1f26;
  --knit-pill-active-text: #fff;
  --knit-dm-bg: #ffffff;
  --knit-dm-header-bg: #ffffff;
  --knit-dm-border: #e5e7eb;
  --knit-dm-title: #111318;
  --knit-dm-sub: #6b7280;
  --knit-dm-icon: #6b7280;
  --knit-dm-icon-hover-bg: #f3f4f6;
  --knit-dm-icon-hover: #111318;
  --knit-dm-messages-bg: #f6f7f9;
  --knit-dm-peer-bubble: #eef0f3;
  --knit-dm-peer-text: #15171c;
  --knit-dm-time: #9aa1ae;
  --knit-dm-status: #9aa1ae;
  --knit-dm-status-failed: #dc2626;
  --knit-dm-status-failed-hover: #b91c1c;
  --knit-dm-link: #2563eb;
  --knit-dm-composer-bg: #ffffff;
  --knit-dm-input-bg: #f3f4f6;
  --knit-dm-input-text: #15171c;
  --knit-dm-input-placeholder: #9aa1ae;
  --knit-dm-input-focus-bg: #eef0f3;
  --knit-dm-tool-bg: #f3f4f6;
  --knit-dm-tool-text: #6b7280;
  --knit-dm-tool-hover-bg: #e5e7eb;
  --knit-dm-tool-hover-text: #111318;
  --knit-dm-voice-hold-bg: #e5e7eb;
  --knit-dm-voice-hold-text: #111318;
  --knit-dm-tile-bg: #f3f4f6;
  --knit-dm-tile-text: #3a4050;
  --knit-dm-tile-hover-bg: #e5e7eb;
  --knit-dm-placeholder-bg: #f3f4f6;
  --knit-dm-image-note: #6b7280;
  --knit-dm-toolbar-bg: #ffffff;
  --knit-dm-share-note-border: rgba(15, 23, 42, 0.1);
  --knit-dm-shadow: 0 14px 36px rgba(15, 23, 42, 0.14);
  --knit-dm-dock-shadow: -6px 0 28px rgba(15, 23, 42, 0.1);
  --knit-dm-dock-hover-bg: #f8f9fb;
  --knit-dm-dock-hover-shadow: -8px 0 32px rgba(15, 23, 42, 0.14);
  --knit-dm-contact-hover: rgba(15, 23, 42, 0.05);
  --knit-dm-voice-play-bg: rgba(15, 23, 42, 0.08);
}

*,
*::before,
*::after {
  box-sizing: border-box;
}

html {
  height: 100%;
  overflow: hidden;
}

body.knit-page {
  margin: 0;
  height: 100%;
  overflow: hidden;
  font-family: "Microsoft YaHei", "PingFang SC", "Hiragino Sans GB", sans-serif;
  background: var(--knit-bg);
  color: var(--knit-page-text);
}

/* 仅在用户切换深/浅色时短暂启用，避免首屏加载也做过渡 */
html[data-knit-theme-animate] *,
html[data-knit-theme-animate] *::before,
html[data-knit-theme-animate] *::after {
  transition:
    background-color var(--knit-theme-transition-duration) var(--knit-theme-transition-easing),
    color var(--knit-theme-transition-duration) var(--knit-theme-transition-easing),
    border-color var(--knit-theme-transition-duration) var(--knit-theme-transition-easing),
    box-shadow var(--knit-theme-transition-duration) var(--knit-theme-transition-easing),
    fill var(--knit-theme-transition-duration) var(--knit-theme-transition-easing),
    stroke var(--knit-theme-transition-duration) var(--knit-theme-transition-easing) !important;
}

html[data-knit-theme-animate] img,
html[data-knit-theme-animate] video,
html[data-knit-theme-animate] canvas {
  transition: none !important;
}

.knit-app {
  height: 100%;
  min-width: 0;
  min-height: 0;
  display: flex;
  flex-direction: column;
}

/* ---------- 顶栏（仅灵感 / 材料页） ---------- */
.knit-topbar {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  height: var(--knit-top-h);
  z-index: 100;
  flex-shrink: 0;
  display: flex;
  align-items: center;
  gap: 1rem;
  padding: 0 1rem 0 1.25rem;
  background: transparent;
  border-bottom: 1px solid transparent;
  box-shadow: none;
  transition:
    background 0.18s ease,
    border-color 0.18s ease,
    box-shadow 0.18s ease;
}

/* 悬停顶栏空闲时必须穿透，否则会挡住下方分类条与首页卡片点击 */
html[data-knit-topbar-ui="hover"] .knit-topbar {
  pointer-events: none;
}

html[data-knit-topbar-ui="hover"] .knit-topbar:hover,
html[data-knit-topbar-ui="hover"] .knit-topbar:focus-within,
html[data-knit-topbar-ui="hover"].knit-search-in-use .knit-topbar,
html[data-knit-topbar-ui="hover"] .knit-app.knit-app--search .knit-topbar,
html[data-knit-topbar-ui="hover"] .knit-app:has(.knit-home-grid-top-hover:hover) .knit-topbar,
html[data-knit-topbar-ui="hover"] .knit-app:has(.knit-home-grid-head:not([hidden]):hover) .knit-topbar,
html[data-knit-topbar-ui="hover"] .knit-app:has(.knit-home-grid-head:not([hidden]):focus-within) .knit-topbar {
  pointer-events: auto;
}

.knit-mobile-home-tabs,
.knit-mobile-search-toggle,
.knit-mobile-search-cancel,
.knit-mobile-notes-btn,
.knit-mobile-fav-float-btn {
  display: none;
}

.knit-app.knit-app--follow .knit-topbar {
  display: none;
}

.knit-app.knit-app--user-profile .knit-topbar,
.knit-app.knit-app--user-profile .knit-search-wrap,
.knit-app.knit-app--user-profile .knit-bottom-nav {
  display: none !important;
}

/* 顶栏搜索只属于灵感 / 材料（及首页搜索）。其它主栏、设置、更多等覆盖层一律藏掉。 */
html.knit-hide-topbar .knit-topbar,
html.knit-hide-topbar .knit-search-wrap,
html.knit-hide-topbar .knit-mobile-search-toggle,
html.knit-hide-topbar .knit-mobile-search-cancel,
.knit-app.knit-app--hide-topbar .knit-topbar,
.knit-app.knit-app--hide-topbar .knit-search-wrap,
.knit-app.knit-app--hide-topbar .knit-mobile-search-toggle,
.knit-app.knit-app--hide-topbar .knit-mobile-search-cancel {
  display: none !important;
}

.knit-topbar .knit-brand,
.knit-topbar .knit-search-wrap {
  opacity: 0;
  visibility: hidden;
  pointer-events: none;
  transform: translateY(-6px);
  transition:
    opacity 0.18s ease,
    visibility 0.18s ease,
    transform 0.18s ease;
}

.knit-topbar:hover,
.knit-topbar:focus-within,
html.knit-search-in-use .knit-topbar,
.knit-app:has(.knit-home-grid-top-hover:hover) .knit-topbar,
.knit-app:has(.knit-home-grid-head:not([hidden]):hover) .knit-topbar,
.knit-app:has(.knit-home-grid-head:not([hidden]):focus-within) .knit-topbar {
  background: var(--knit-chrome-bg);
  border-bottom-color: var(--knit-chrome-border);
  box-shadow: 0 4px 18px var(--knit-chrome-shadow);
}

.knit-app.knit-app--search .knit-topbar {
  background: var(--knit-chrome-bg);
  border-bottom-color: var(--knit-chrome-border);
  box-shadow: 0 4px 18px var(--knit-chrome-shadow);
}

.knit-topbar:hover .knit-brand,
.knit-topbar:hover .knit-search-wrap,
.knit-topbar:focus-within .knit-brand,
.knit-topbar:focus-within .knit-search-wrap,
html.knit-search-in-use .knit-topbar .knit-brand,
html.knit-search-in-use .knit-topbar .knit-search-wrap,
.knit-app.knit-app--search .knit-topbar .knit-brand,
.knit-app.knit-app--search .knit-topbar .knit-search-wrap {
  opacity: 1;
  visibility: visible;
  pointer-events: auto;
  transform: translateY(0);
}

.knit-app.knit-app--search #knitSearchPanel {
  display: none !important;
}

/* 资讯 / 材料：搜索统一在顶栏，隐藏页内重复搜索框（逻辑仍用模块 Filter） */
.knit-app.knit-app--topbar-module-search .knit-news-filter__search,
.knit-app.knit-app--topbar-module-search .knit-material-home__search,
html.knit-topbar-module-search .knit-news-filter__search,
html.knit-topbar-module-search .knit-material-home__search {
  display: none !important;
}

.knit-app:has(.knit-home-grid-top-hover:hover) .knit-topbar .knit-brand,
.knit-app:has(.knit-home-grid-top-hover:hover) .knit-topbar .knit-search-wrap,
.knit-app:has(.knit-home-grid-head:not([hidden]):hover) .knit-topbar .knit-brand,
.knit-app:has(.knit-home-grid-head:not([hidden]):hover) .knit-topbar .knit-search-wrap,
.knit-app:has(.knit-home-grid-head:not([hidden]):focus-within) .knit-topbar .knit-brand,
.knit-app:has(.knit-home-grid-head:not([hidden]):focus-within) .knit-topbar .knit-search-wrap {
  opacity: 1;
  visibility: visible;
  pointer-events: auto;
  transform: translateY(0);
}

.knit-brand {
  font-size: 1.15rem;
  font-weight: 700;
  letter-spacing: 0.06em;
  color: var(--knit-chrome-text);
  white-space: nowrap;
}

/* 电脑端：顶栏只盖住右侧主栏，品牌居中在眉头 */
html[data-device="desktop"] {
  --knit-side-inset: var(--knit-side-w-collapsed);
}

html[data-device="desktop"][data-knit-sidebar-ui="fixed"]:not([data-knit-sidebar-collapsed="1"]) {
  --knit-side-inset: var(--knit-side-w);
}

html[data-device="desktop"][data-knit-sidebar-collapsed="1"] {
  --knit-side-inset: var(--knit-side-w-rail);
}

html[data-device="desktop"] .knit-topbar {
  left: var(--knit-side-inset);
  padding-left: 1rem;
  padding-right: 1rem;
  justify-content: flex-end;
  transition: left 0.34s cubic-bezier(0.22, 1, 0.36, 1);
}

html[data-device="desktop"] .knit-topbar .knit-brand {
  position: absolute;
  left: 50%;
  top: 50%;
  margin: 0;
  transform: translate(-50%, calc(-50% - 6px));
}

html[data-device="desktop"] .knit-topbar:hover .knit-brand,
html[data-device="desktop"] .knit-topbar:focus-within .knit-brand,
html[data-device="desktop"].knit-search-in-use .knit-topbar .knit-brand,
html[data-device="desktop"] .knit-app.knit-app--search .knit-topbar .knit-brand,
html[data-device="desktop"] .knit-app:has(.knit-home-grid-top-hover:hover) .knit-topbar .knit-brand,
html[data-device="desktop"] .knit-app:has(.knit-home-grid-head:not([hidden]):hover) .knit-topbar .knit-brand,
html[data-device="desktop"] .knit-app:has(.knit-home-grid-head:not([hidden]):focus-within) .knit-topbar .knit-brand,
html[data-device="desktop"][data-knit-topbar-ui="fixed"] .knit-topbar .knit-brand {
  transform: translate(-50%, -50%);
}

html[data-device="desktop"] .knit-topbar .knit-search-wrap {
  margin-left: auto;
}

.knit-topnav {
  display: flex;
  align-items: center;
  gap: 0.5rem;
}

.knit-app.knit-app--follow .knit-topnav {
  display: none;
}

.knit-topnav button {
  padding: 0.35rem 0.85rem;
  font-size: 0.9rem;
  color: var(--knit-chrome-text);
  background: transparent;
  border: 1px solid var(--knit-chrome-border);
  border-radius: 6px;
  cursor: pointer;
  transition: background 0.15s, border-color 0.15s, color 0.15s;
}

.knit-topnav button:hover {
  background: var(--knit-chrome-hover);
}

.knit-topnav button.is-active {
  background: var(--knit-chrome-active);
  border-color: var(--knit-chrome-border);
  color: var(--knit-chrome-active-text);
}

.knit-search-wrap {
  position: relative;
  flex: 1;
  max-width: 360px;
  margin-left: auto;
  overflow: visible;
}

.knit-search {
  width: 100%;
  padding: 0.4rem 4.05rem 0.4rem 0.75rem;
  font-size: 0.9rem;
  color: var(--knit-input-text);
  background: var(--knit-input-bg);
  border: 1px solid var(--knit-control-border);
  border-radius: var(--knit-radius-sm);
  outline: none;
}

.knit-search-image-btn {
  position: absolute;
  top: 50%;
  right: 6px;
  z-index: 2;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 28px;
  height: 28px;
  margin: 0;
  padding: 0;
  color: var(--knit-text-muted);
  background: transparent;
  border: 0;
  border-radius: 6px;
  cursor: pointer;
  transform: translateY(-50%);
}

.knit-search-color-btn {
  position: absolute;
  top: 50%;
  right: 36px;
  z-index: 2;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 28px;
  height: 28px;
  margin: 0;
  padding: 0;
  color: var(--knit-text-muted);
  background: transparent;
  border: 0;
  border-radius: 6px;
  cursor: pointer;
  transform: translateY(-50%);
}

.knit-search-color-btn-disc {
  display: block;
  width: 18px;
  height: 18px;
  border-radius: 50%;
  background: conic-gradient(#f43f5e, #f59e0b, #84cc16, #14b8a6, #3b82f6, #a855f7, #f43f5e);
  box-shadow: inset 0 0 0 1px rgba(15, 23, 42, 0.22);
}

.knit-search-color-btn:hover,
.knit-search-color-btn:focus-visible,
.knit-search-image-btn:hover,
.knit-search-image-btn:focus-visible {
  color: var(--knit-chrome-text);
  background: var(--knit-chrome-hover);
  outline: none;
}

.knit-search-color-pop {
  position: absolute;
  top: calc(100% + 6px);
  right: 0;
  left: auto;
  z-index: 40;
  width: min(15.25rem, calc(100vw - 1.5rem));
  max-width: calc(100vw - 1.5rem);
  max-height: min(72dvh, calc(100dvh - 4.75rem));
  overflow-x: hidden;
  overflow-y: auto;
  overscroll-behavior: contain;
  padding: 0.6rem 0.65rem 0.7rem;
  box-sizing: border-box;
  background: var(--knit-panel-bg);
  border: 1px solid var(--knit-panel-border);
  border-radius: var(--knit-radius-md);
  box-shadow: var(--knit-modal-shadow);
}

.knit-search-color-pop[hidden] {
  display: none !important;
}

.knit-search-color-ui[hidden] {
  display: none !important;
}

.knit-search-color-wheel {
  display: block;
  width: 100%;
  max-width: 100%;
  height: auto;
  aspect-ratio: 1 / 1;
  max-height: min(13.5rem, 42dvh);
  margin: 0 auto;
  border-radius: 50%;
  cursor: crosshair;
  touch-action: none;
}

.knit-search-color-square {
  display: block;
  width: 100%;
  max-width: 100%;
  height: auto;
  aspect-ratio: 7 / 5;
  max-height: min(10rem, 30dvh);
  margin: 0 auto;
  border-radius: 8px;
  cursor: crosshair;
  touch-action: none;
}

.knit-search-color-slider {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  margin-top: 0.48rem;
  font-size: 0.75rem;
  color: var(--knit-text-muted);
}

.knit-search-color-slider span {
  flex: 0 0 2em;
  line-height: 1;
}

.knit-search-color-slider input[type="range"] {
  flex: 1 1 auto;
  min-width: 0;
  height: 16px;
  margin: 0;
  -webkit-appearance: none;
  appearance: none;
  background: transparent;
}

.knit-search-color-slider input[type="range"]::-webkit-slider-runnable-track {
  height: 10px;
  border-radius: 999px;
  background: var(--knit-slider-track, #cbd5e1);
}

.knit-search-color-slider input[type="range"]::-webkit-slider-thumb {
  -webkit-appearance: none;
  appearance: none;
  width: 16px;
  height: 16px;
  margin-top: -3px;
  border-radius: 50%;
  background: var(--knit-panel-bg);
  border: 2px solid rgba(15, 23, 42, 0.28);
  box-shadow: 0 1px 3px rgba(15, 23, 42, 0.22);
  cursor: pointer;
}

.knit-search-color-slider input[type="range"]::-moz-range-track {
  height: 10px;
  border-radius: 999px;
  background: var(--knit-slider-track, #cbd5e1);
}

.knit-search-color-slider input[type="range"]::-moz-range-thumb {
  width: 16px;
  height: 16px;
  border-radius: 50%;
  background: var(--knit-panel-bg);
  border: 2px solid rgba(15, 23, 42, 0.28);
  box-shadow: 0 1px 3px rgba(15, 23, 42, 0.22);
  cursor: pointer;
}

.knit-search-color-value {
  display: flex;
  align-items: center;
  gap: 0.55rem;
  margin-top: 0.55rem;
  font-size: 0.78rem;
  color: var(--knit-text-muted);
}

.knit-search-color-value input {
  flex: 1 1 auto;
  min-width: 0;
  accent-color: var(--knit-text-heading);
}

.knit-search-color-pop-foot {
  display: flex;
  align-items: center;
  gap: 0.45rem;
  margin-top: 0.55rem;
}

.knit-search-color-preview {
  flex: 0 0 auto;
  width: 22px;
  height: 22px;
  border-radius: 50%;
  border: 1px solid rgba(15, 23, 42, 0.2);
  background: #ff4d4d;
}

.knit-search-color-pop-foot code {
  flex: 1 1 auto;
  min-width: 0;
  font-size: 0.78rem;
  color: var(--knit-text-body);
}

.knit-search-color-go {
  flex: 0 0 auto;
  margin: 0;
  padding: 0.28rem 0.7rem;
  font: inherit;
  font-size: 0.8rem;
  color: #fff;
  background: var(--knit-pill-active-bg);
  border: 0;
  border-radius: 999px;
  cursor: pointer;
}

.knit-search-color-go:hover,
.knit-search-color-go:focus-visible {
  background: var(--knit-black-hover);
  outline: none;
}

.knit-search-color-pop-hint {
  margin: 0.3rem 0 0;
  font-size: 0.68rem;
  line-height: 1.35;
  color: var(--knit-text-subtle);
  text-align: center;
}

@media (max-width: 520px) {
  .knit-search-color-pop {
    width: min(14.5rem, calc(100vw - 1.25rem));
    max-height: min(68dvh, calc(100dvh - 5.25rem));
  }

  .knit-search-color-wheel {
    max-height: min(12.25rem, 38dvh);
  }

  .knit-search-color-square {
    max-height: min(8.75rem, 26dvh);
  }

  .knit-search-color-pop-hint {
    font-size: 0.64rem;
  }
}

.knit-search-color-confirm {
  --knit-scc-accent: #ff4d4d;
  z-index: 1700;
  padding: max(1rem, env(safe-area-inset-top, 0px)) 1rem max(1.25rem, env(safe-area-inset-bottom, 0px));
  background: rgba(15, 23, 42, 0.28);
  -webkit-backdrop-filter: blur(8px);
  backdrop-filter: blur(8px);
  opacity: 0;
  transition: opacity 0.2s ease;
}

.knit-search-color-confirm.is-open {
  opacity: 1;
}

.knit-search-color-confirm__panel {
  width: min(17.5rem, calc(100vw - 2.5rem));
  padding: 1.15rem 1.05rem 1rem;
  border-radius: 20px;
  border: 1px solid rgba(255, 255, 255, 0.55);
  background:
    linear-gradient(165deg, rgba(255, 255, 255, 0.92), rgba(248, 250, 252, 0.96)),
    var(--knit-modal-bg, #fff);
  box-shadow:
    0 0 0 1px rgba(15, 23, 42, 0.04),
    0 18px 48px rgba(15, 23, 42, 0.18),
    0 4px 14px color-mix(in srgb, var(--knit-scc-accent) 28%, transparent);
  text-align: center;
  transform: translateY(10px) scale(0.96);
  opacity: 0;
  transition:
    transform 0.28s cubic-bezier(0.22, 1, 0.36, 1),
    opacity 0.22s ease;
}

.knit-search-color-confirm.is-open .knit-search-color-confirm__panel {
  transform: translateY(0) scale(1);
  opacity: 1;
}

.knit-search-color-confirm__hero {
  position: relative;
  display: grid;
  place-items: center;
  margin: 0.1rem 0 0.85rem;
  min-height: 4.5rem;
}

.knit-search-color-confirm__swatch-row {
  position: relative;
  display: grid;
  place-items: center;
  width: 4.5rem;
  height: 4.5rem;
}

.knit-search-color-confirm__swatch {
  position: relative;
  z-index: 1;
  display: block;
  width: 3.35rem;
  height: 3.35rem;
  border-radius: 50%;
  border: 2px solid rgba(255, 255, 255, 0.9);
  background: var(--knit-scc-accent);
  box-shadow:
    0 8px 22px color-mix(in srgb, var(--knit-scc-accent) 42%, transparent),
    inset 0 0 0 1px rgba(15, 23, 42, 0.08);
}

.knit-search-color-confirm__swatch-ring {
  position: absolute;
  inset: 0;
  border-radius: 50%;
  border: 1.5px solid color-mix(in srgb, var(--knit-scc-accent) 55%, transparent);
  opacity: 0.55;
  animation: knit-scc-ring 1.8s ease-out infinite;
  pointer-events: none;
}

.knit-search-color-confirm[data-search-mode="series"] .knit-search-color-confirm__swatch-row {
  display: none;
}

.knit-search-color-confirm[data-search-mode="single"] .knit-search-color-confirm__series {
  display: none !important;
}

.knit-search-color-confirm[data-search-mode="series"] .knit-search-color-confirm__hex {
  display: none;
}

.knit-search-color-confirm[data-search-mode="single"] .knit-search-color-confirm__series-label {
  display: none !important;
}

.knit-search-color-confirm__series {
  width: 100%;
  margin: 0;
}

.knit-search-color-confirm__strip {
  display: flex;
  height: 3.1rem;
  border-radius: 999px;
  overflow: hidden;
  border: 1px solid rgba(15, 23, 42, 0.08);
  box-shadow:
    inset 0 0 0 1px rgba(255, 255, 255, 0.35),
    0 10px 24px color-mix(in srgb, var(--knit-scc-accent) 22%, transparent);
}

.knit-search-color-confirm__strip span {
  flex: 1 1 0;
  min-width: 0;
  transition: flex-grow 0.2s ease;
}

.knit-search-color-confirm__strip span:nth-child(odd) {
  flex-grow: 1.15;
}

.knit-search-color-confirm__title {
  margin: 0;
  font-size: 1.05rem;
  font-weight: 700;
  letter-spacing: 0.01em;
  color: var(--knit-text-heading, #0f172a);
}

.knit-search-color-confirm__text {
  margin: 0.35rem 0 0;
  font-size: 0.82rem;
  line-height: 1.45;
  color: var(--knit-text-muted, #64748b);
}

.knit-search-color-confirm__hex {
  display: inline-block;
  margin: 0.55rem 0 0;
  padding: 0.22rem 0.6rem;
  border-radius: 999px;
  font-size: 0.78rem;
  font-weight: 650;
  letter-spacing: 0.04em;
  color: var(--knit-text-heading, #0f172a);
  background: rgba(15, 23, 42, 0.05);
  border: 1px solid rgba(15, 23, 42, 0.06);
}

.knit-search-color-confirm__series-label {
  display: inline-block;
  margin: 0.55rem 0 0;
  padding: 0.22rem 0.7rem;
  border-radius: 999px;
  font-size: 0.8rem;
  font-weight: 700;
  letter-spacing: 0.03em;
  color: var(--knit-text-heading, #0f172a);
  background: color-mix(in srgb, var(--knit-scc-accent) 16%, #fff);
  border: 1px solid color-mix(in srgb, var(--knit-scc-accent) 28%, transparent);
}

.knit-search-color-confirm__actions {
  display: grid;
  grid-template-columns: 1fr 1.4fr;
  gap: 0.5rem;
  margin-top: 1rem;
}

.knit-search-color-confirm__cancel,
.knit-search-color-confirm__ok {
  min-height: 2.45rem;
  margin: 0;
  padding: 0.45rem 0.85rem;
  border-radius: 999px;
  font: inherit;
  font-size: 0.88rem;
  font-weight: 650;
  cursor: pointer;
  transition:
    background 0.15s ease,
    color 0.15s ease,
    transform 0.15s ease,
    box-shadow 0.15s ease;
}

.knit-search-color-confirm__cancel {
  color: var(--knit-control-text, #334155);
  background: rgba(15, 23, 42, 0.04);
  border: 1px solid rgba(15, 23, 42, 0.1);
}

.knit-search-color-confirm__cancel:hover,
.knit-search-color-confirm__cancel:focus-visible {
  background: rgba(15, 23, 42, 0.08);
  outline: none;
}

.knit-search-color-confirm__ok {
  color: var(--knit-pill-active-text);
  background: var(--knit-pill-active-bg);
  border: 0;
  box-shadow: 0 8px 18px rgba(15, 23, 42, 0.18);
}

.knit-search-color-confirm__ok:hover,
.knit-search-color-confirm__ok:focus-visible {
  filter: brightness(1.12);
  transform: translateY(-1px);
  box-shadow: 0 10px 22px rgba(15, 23, 42, 0.22);
  outline: none;
}

.knit-search-color-confirm__ok:active,
.knit-search-color-confirm__cancel:active {
  transform: translateY(0);
}

@keyframes knit-scc-ring {
  0% {
    transform: scale(0.92);
    opacity: 0.55;
  }
  70% {
    transform: scale(1.12);
    opacity: 0;
  }
  100% {
    transform: scale(1.12);
    opacity: 0;
  }
}

@media (prefers-reduced-motion: reduce) {
  .knit-search-color-confirm,
  .knit-search-color-confirm__panel,
  .knit-search-color-confirm__cancel,
  .knit-search-color-confirm__ok {
    transition: none;
  }

  .knit-search-color-confirm__swatch-ring {
    animation: none;
    opacity: 0.35;
  }

  .knit-search-color-confirm__panel {
    transform: none;
    opacity: 1;
  }

  .knit-search-color-confirm {
    opacity: 1;
  }
}

html[data-knit-theme="dark"] .knit-search-color-confirm {
  background: rgba(2, 6, 23, 0.55);
}

html[data-knit-theme="dark"] .knit-search-color-confirm__panel {
  border-color: rgba(255, 255, 255, 0.1);
  background:
    linear-gradient(165deg, rgba(36, 42, 54, 0.98), rgba(24, 29, 39, 0.98)),
    var(--knit-modal-bg, #1e2430);
  box-shadow:
    0 0 0 1px rgba(255, 255, 255, 0.04),
    0 18px 48px rgba(0, 0, 0, 0.45),
    0 4px 14px color-mix(in srgb, var(--knit-scc-accent) 22%, transparent);
}

html[data-knit-theme="dark"] .knit-search-color-confirm__title {
  color: #f1f5f9;
}

html[data-knit-theme="dark"] .knit-search-color-confirm__text {
  color: var(--knit-text-subtle);
}

html[data-knit-theme="dark"] .knit-search-color-confirm__hex {
  color: #e2e8f0;
  background: rgba(255, 255, 255, 0.06);
  border-color: rgba(255, 255, 255, 0.08);
}

html[data-knit-theme="dark"] .knit-search-color-confirm__series-label {
  color: #f8fafc;
  background: color-mix(in srgb, var(--knit-scc-accent) 28%, #1e2430);
  border-color: color-mix(in srgb, var(--knit-scc-accent) 40%, transparent);
}

html[data-knit-theme="dark"] .knit-search-color-confirm__cancel {
  color: #e2e8f0;
  background: rgba(255, 255, 255, 0.06);
  border-color: rgba(255, 255, 255, 0.12);
}

html[data-knit-theme="dark"] .knit-search-color-confirm__cancel:hover,
html[data-knit-theme="dark"] .knit-search-color-confirm__cancel:focus-visible {
  background: rgba(255, 255, 255, 0.1);
}

html[data-knit-theme="dark"] .knit-search-color-confirm__ok {
  background: #f8fafc;
  color: var(--knit-text-heading);
  box-shadow: 0 8px 18px rgba(0, 0, 0, 0.28);
}

html[data-knit-theme="dark"] .knit-search-color-confirm__ok:hover,
html[data-knit-theme="dark"] .knit-search-color-confirm__ok:focus-visible {
  background: var(--knit-panel-bg);
}

.knit-search-wrap.is-image-query .knit-search,
.knit-favorite-search-wrap.is-image-query .knit-favorite-search {
  padding-left: 2.55rem;
}

.knit-search-image-chip {
  position: absolute;
  left: 6px;
  top: 50%;
  z-index: 2;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 28px;
  height: 28px;
  margin: 0;
  padding: 0;
  border-radius: 6px;
  overflow: visible;
  transform: translateY(-50%);
}

.knit-search-image-chip[hidden] {
  display: none !important;
}

.knit-search-image-chip img {
  width: 28px;
  height: 28px;
  object-fit: cover;
  border-radius: 6px;
  border: 1px solid rgba(15, 23, 42, 0.16);
  background: var(--knit-control-hover-bg);
  display: block;
}

.knit-search-image-chip-clear {
  position: absolute;
  top: -6px;
  right: -6px;
  width: 16px;
  height: 16px;
  margin: 0;
  padding: 0;
  border: 0;
  border-radius: 50%;
  background: var(--knit-pill-active-bg);
  color: var(--knit-pill-active-text);
  font-size: 11px;
  line-height: 16px;
  cursor: pointer;
}

.knit-imgsearch-query {
  display: block;
  width: 100%;
  margin-top: 0.65rem;
  box-sizing: border-box;
  padding: 0.48rem 0.7rem;
  font-size: 0.9rem;
  font-family: inherit;
  color: var(--knit-input-text);
  background: var(--knit-input-bg);
  border: 1px solid var(--knit-control-border);
  border-radius: var(--knit-radius-sm);
  outline: none;
}

.knit-imgsearch-query:focus {
  border-color: var(--knit-text-muted);
}

.knit-imgsearch-query::placeholder {
  color: var(--knit-text-subtle);
}

.knit-search-query-extra {
  display: block;
  margin-top: 0.2rem;
  font-size: 0.82rem;
  color: var(--knit-text-body);
}

.knit-search-image-btn-icon {
  width: 16px;
  height: 16px;
  display: block;
}

.knit-search::placeholder {
  color: var(--knit-text-subtle);
}

.knit-search:focus {
  border-color: var(--knit-text-muted);
}

.knit-search-panel {
  position: absolute;
  top: calc(100% + 6px);
  right: 0;
  left: 0;
  z-index: 120;
  max-height: min(70vh, 420px);
  overflow: auto;
  padding: 0.35rem 0;
  background: var(--knit-panel-bg);
  border: 1px solid var(--knit-panel-border);
  border-radius: 10px;
  box-shadow: var(--knit-modal-shadow);
}

.knit-search-panel[hidden] {
  display: none !important;
  pointer-events: none !important;
}

.knit-search-sec-title {
  padding: 0.35rem 0.75rem 0.2rem;
  font-size: 0.72rem;
  font-weight: 700;
  letter-spacing: 0.04em;
  color: var(--knit-text-muted);
  text-transform: uppercase;
}

.knit-search-list {
  list-style: none;
  margin: 0;
  padding: 0 0 0.4rem;
}

.knit-search-history-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 0.5rem;
}

.knit-search-history-clear,
.knit-search-history-remove {
  border: 0;
  background: transparent;
  color: var(--knit-text-muted);
  cursor: pointer;
  font-family: inherit;
  padding: 0.1rem 0.35rem;
}

.knit-search-history-clear {
  font-size: 0.72rem;
}

.knit-search-history-remove {
  font-size: 1rem;
  line-height: 1;
  flex-shrink: 0;
}

.knit-search-history-clear:hover,
.knit-search-history-remove:hover {
  color: var(--knit-text-heading);
}

.knit-search-history-row {
  display: flex;
  align-items: center;
  gap: 0.15rem;
}

.knit-search-history-row .knit-search-hit {
  flex: 1;
  min-width: 0;
}

.knit-search-hit {
  display: flex;
  align-items: center;
  gap: 0.55rem;
  width: 100%;
  padding: 0.45rem 0.75rem;
  text-align: left;
  border: 0;
  background: transparent;
  cursor: pointer;
  color: var(--knit-text-heading);
  font-size: 0.86rem;
}

.knit-search-hit:hover,
.knit-search-hit:focus-visible {
  background: var(--knit-control-hover-bg);
  outline: none;
}

.knit-search-hit-main {
  flex: 1;
  min-width: 0;
  display: flex;
  flex-direction: column;
  gap: 0.12rem;
}

.knit-search-hit-title {
  font-weight: 600;
  line-height: 1.25;
}

.knit-search-hit-tags {
  font-size: 0.72rem;
  color: var(--knit-text-muted);
  line-height: 1.2;
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 0.12rem;
}

.knit-search-thumb {
  width: 40px;
  height: 40px;
  border-radius: 6px;
  object-fit: cover;
  flex-shrink: 0;
  background: var(--knit-control-active-bg);
}

.knit-search-empty {
  padding: 0.85rem 1rem;
  font-size: var(--knit-empty-size);
  font-weight: var(--knit-empty-weight);
  line-height: var(--knit-empty-lh);
  letter-spacing: var(--knit-empty-ls);
  color: var(--knit-text-muted);
}

.knit-search-user-row {
  display: flex;
  align-items: center;
  gap: 0.35rem;
  padding-right: 0.45rem;
}

.knit-search-user-row .knit-search-hit {
  flex: 1;
  min-width: 0;
  width: auto;
}

.knit-search-user-actions {
  flex: 0 0 auto;
  display: flex;
  align-items: center;
  gap: 0.25rem;
}

.knit-search-action {
  border: 1px solid var(--knit-control-border);
  background: var(--knit-btn-secondary-bg);
  color: var(--knit-text-body);
  border-radius: 999px;
  padding: 0.22rem 0.55rem;
  font-size: 0.72rem;
  line-height: 1.2;
  cursor: pointer;
  white-space: nowrap;
}

.knit-search-action:hover {
  background: var(--knit-btn-secondary-hover);
  border-color: var(--knit-text-muted);
}

.knit-search-action.is-on {
  background: color-mix(in srgb, var(--knit-red) 12%, var(--knit-panel-bg));
  border-color: color-mix(in srgb, var(--knit-red) 45%, var(--knit-panel-border));
  color: var(--knit-red);
}

html[data-knit-theme="dark"] .knit-search-panel {
  background: var(--knit-panel-bg);
  border-color: var(--knit-panel-border);
  box-shadow: var(--knit-modal-shadow);
}

html[data-knit-theme="dark"] .knit-search-hit {
  color: var(--knit-text-heading);
}

html[data-knit-theme="dark"] .knit-search-hit:hover,
html[data-knit-theme="dark"] .knit-search-hit:focus-visible {
  background: var(--knit-surface-hover-bg);
}

html[data-knit-theme="dark"] .knit-search-hit-tags,
html[data-knit-theme="dark"] .knit-search-empty,
html[data-knit-theme="dark"] .knit-search-sec-title,
html[data-knit-theme="dark"] .knit-search-history-clear,
html[data-knit-theme="dark"] .knit-search-history-remove {
  color: var(--knit-text-muted);
}

html[data-knit-theme="dark"] .knit-search-history-clear:hover,
html[data-knit-theme="dark"] .knit-search-history-remove:hover {
  color: var(--knit-text-heading);
}

html[data-knit-theme="dark"] .knit-search-action {
  background: var(--knit-control-bg);
  border-color: var(--knit-control-border);
  color: var(--knit-control-text);
}

html[data-knit-theme="dark"] .knit-search-action:hover {
  background: var(--knit-control-hover-bg);
}

html[data-knit-theme="dark"] .knit-search-action.is-on {
  background: color-mix(in srgb, var(--knit-red) 18%, var(--knit-panel-bg));
  border-color: color-mix(in srgb, var(--knit-red) 50%, transparent);
  color: var(--knit-red-soft);
}

html[data-knit-theme="dark"] .knit-search-image-btn,
html[data-knit-theme="dark"] .knit-search-color-btn {
  color: var(--knit-chrome-text-muted);
}

html[data-knit-theme="dark"] .knit-search-image-btn:hover,
html[data-knit-theme="dark"] .knit-search-image-btn:focus-visible,
html[data-knit-theme="dark"] .knit-search-color-btn:hover,
html[data-knit-theme="dark"] .knit-search-color-btn:focus-visible {
  color: var(--knit-chrome-text);
  background: var(--knit-chrome-hover);
}

html[data-knit-theme="dark"] .knit-search-color-pop {
  background: var(--knit-panel-bg);
  border-color: var(--knit-panel-border);
  box-shadow: var(--knit-modal-shadow);
}

html[data-knit-theme="dark"] .knit-search-color-pop-foot code,
html[data-knit-theme="dark"] .knit-search-color-value,
html[data-knit-theme="dark"] .knit-search-color-slider {
  color: #c5cad6;
}

html[data-knit-theme="dark"] .knit-search-color-slider input[type="range"]::-webkit-slider-thumb,
html[data-knit-theme="dark"] .knit-search-color-slider input[type="range"]::-moz-range-thumb {
  border-color: rgba(255, 255, 255, 0.55);
  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.4);
}

.knit-search-query-preview {
  display: flex;
  align-items: center;
  gap: 0.55rem;
  padding: 0.45rem 0.75rem 0.25rem;
}

.knit-search-query-preview img {
  width: 40px;
  height: 40px;
  object-fit: cover;
  border-radius: 6px;
  border: 1px solid var(--knit-panel-border);
  background: var(--knit-panel-bg-alt);
}

.knit-search-query-preview-text {
  font-size: 0.78rem;
  color: var(--knit-text-muted);
  line-height: 1.35;
}

.knit-search-swatches {
  display: flex;
  flex-wrap: wrap;
  gap: 0.28rem;
  margin-top: 0.2rem;
}

.knit-search-swatch {
  display: inline-flex;
  align-items: center;
  gap: 0.28rem;
  padding: 0.08rem 0.35rem 0.08rem 0.12rem;
  border-radius: 999px;
  border: 1px solid var(--knit-panel-border);
  background: var(--knit-panel-bg-alt);
  font-size: 0.68rem;
  color: var(--knit-text-body);
}

.knit-search-swatch i {
  width: 12px;
  height: 12px;
  border-radius: 50%;
  border: 1px solid rgba(15, 23, 42, 0.18);
  display: inline-block;
}

.knit-search-hit-tags .knit-search-swatches {
  margin-top: 0.28rem;
}

body.knit-imgsearch-open {
  overflow: hidden;
}

.knit-imgsearch-modal {
  position: fixed;
  inset: 0;
  z-index: 12000;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 1rem;
  background: rgba(0, 0, 0, 0.55);
}

.knit-imgsearch-modal[hidden] {
  display: none !important;
}

.knit-imgsearch-panel {
  width: min(94vw, 640px);
  max-height: min(92vh, 760px);
  display: flex;
  flex-direction: column;
  background: var(--knit-modal-bg);
  border: 1px solid var(--knit-modal-border);
  border-radius: 14px;
  box-shadow: var(--knit-modal-shadow);
  overflow: hidden;
}

.knit-imgsearch-head {
  padding: 0.85rem 1rem 0.65rem;
  border-bottom: 1px solid var(--knit-divider);
}

.knit-imgsearch-title {
  margin: 0;
  font-size: 1.05rem;
  font-weight: 700;
  color: var(--knit-text-heading);
}

.knit-imgsearch-hint {
  margin: 0.35rem 0 0;
  font-size: var(--knit-hint-size);
  font-weight: var(--knit-hint-weight);
  letter-spacing: var(--knit-hint-ls);
  color: var(--knit-text-muted);
  line-height: var(--knit-hint-lh);
}

.knit-search-prefs,
.knit-imgsearch-prefs {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0.4rem;
}

.knit-imgsearch-prefs {
  margin-top: 0.65rem;
}

.knit-search-history-prefs {
  padding: 0.15rem 0.75rem 0.45rem;
}

.knit-search-prefs-label {
  margin-right: 0.15rem;
  font-size: 0.75rem;
  color: var(--knit-text-muted);
}

.knit-search-pref {
  padding: 0.22rem 0.68rem;
  font-size: 0.78rem;
  font-weight: 600;
  font-family: inherit;
  color: var(--knit-text-muted);
  background: var(--knit-control-hover-bg);
  border: 1px solid transparent;
  border-radius: 999px;
  cursor: pointer;
}

.knit-search-pref:hover,
.knit-search-pref:focus-visible {
  color: var(--knit-text-heading);
  background: var(--knit-control-active-bg);
  outline: none;
}

.knit-search-pref.is-on {
  color: #fff;
  background: var(--knit-pill-active-bg);
  border-color: var(--knit-text-heading);
}

.knit-imgsearch-body {
  flex: 1;
  min-height: 0;
  padding: 0.85rem 1rem;
  display: flex;
  align-items: center;
  justify-content: center;
  background: var(--knit-control-bg);
}

.knit-imgsearch-viewport {
  position: relative;
  width: 100%;
  max-width: 100%;
  aspect-ratio: 4 / 3;
  max-height: min(58vh, 480px);
  overflow: hidden;
  background: #111;
  border-radius: 8px;
  touch-action: none;
  user-select: none;
}

.knit-imgsearch-image {
  position: absolute;
  top: 0;
  left: 0;
  width: auto;
  height: auto;
  max-width: none;
  object-fit: fill;
  pointer-events: none;
}

.knit-imgsearch-mask {
  position: absolute;
  inset: 0;
  pointer-events: none;
}

.knit-imgsearch-shade {
  position: absolute;
  background: rgba(0, 0, 0, 0.48);
  pointer-events: auto;
  cursor: crosshair;
}

.knit-imgsearch-box {
  position: absolute;
  box-sizing: border-box;
  border: 2px solid #fff;
  box-shadow: 0 0 0 1px rgba(0, 0, 0, 0.35);
  cursor: move;
  touch-action: none;
}

.knit-imgsearch-handle {
  position: absolute;
  width: 14px;
  height: 14px;
  background: var(--knit-panel-bg);
  border: 2px solid #111;
  border-radius: 2px;
  box-sizing: border-box;
  touch-action: none;
}

.knit-imgsearch-handle--nw {
  top: -8px;
  left: -8px;
  cursor: nwse-resize;
}

.knit-imgsearch-handle--ne {
  top: -8px;
  right: -8px;
  cursor: nesw-resize;
}

.knit-imgsearch-handle--sw {
  bottom: -8px;
  left: -8px;
  cursor: nesw-resize;
}

.knit-imgsearch-handle--se {
  bottom: -8px;
  right: -8px;
  cursor: nwse-resize;
}

.knit-imgsearch-foot {
  display: flex;
  justify-content: flex-end;
  gap: 0.5rem;
  padding: 0.75rem 1rem;
  border-top: 1px solid var(--knit-divider);
  background: var(--knit-panel-bg);
}

.knit-imgsearch-btn {
  padding: 0.45rem 0.9rem;
  font-size: 0.88rem;
  font-weight: 600;
  font-family: inherit;
  color: var(--knit-text-heading);
  background: var(--knit-panel-bg);
  border: 1px solid #d1d5db;
  border-radius: 8px;
  cursor: pointer;
}

.knit-imgsearch-btn--ghost {
  color: var(--knit-text-body);
}

.knit-imgsearch-btn--primary {
  color: #fff;
  background: var(--knit-pill-active-bg);
  border-color: var(--knit-text-heading);
}

.knit-imgsearch-btn:disabled {
  opacity: 0.55;
  cursor: wait;
}

html[data-knit-theme="dark"] .knit-imgsearch-panel,
html[data-knit-theme="dark"] .knit-imgsearch-foot {
  background: var(--knit-modal-bg);
  border-color: var(--knit-modal-border);
}

html[data-knit-theme="dark"] .knit-imgsearch-head {
  border-bottom-color: var(--knit-divider);
}

html[data-knit-theme="dark"] .knit-imgsearch-title {
  color: var(--knit-text-heading);
}

html[data-knit-theme="dark"] .knit-imgsearch-hint {
  color: var(--knit-text-muted);
}

html[data-knit-theme="dark"] .knit-imgsearch-query {
  color: var(--knit-input-text);
  background: var(--knit-input-bg);
  border-color: var(--knit-control-border);
}

html[data-knit-theme="dark"] .knit-imgsearch-query::placeholder {
  color: var(--knit-text-subtle);
}

html[data-knit-theme="dark"] .knit-search-prefs-label {
  color: var(--knit-text-muted);
}

html[data-knit-theme="dark"] .knit-search-pref {
  color: var(--knit-text-body);
  background: var(--knit-control-bg);
}

html[data-knit-theme="dark"] .knit-search-pref:hover,
html[data-knit-theme="dark"] .knit-search-pref:focus-visible {
  color: #f0f2f7;
  background: #353b48;
}

html[data-knit-theme="dark"] .knit-search-pref.is-on {
  color: #fff;
  background: #3b82f6;
  border-color: #3b82f6;
}

html[data-knit-theme="dark"] .knit-imgsearch-body {
  background: #161922;
}

html[data-knit-theme="dark"] .knit-imgsearch-btn {
  color: #e6e8ee;
  background: #2a303c;
  border-color: rgba(255, 255, 255, 0.16);
}

html[data-knit-theme="dark"] .knit-imgsearch-btn--primary {
  color: #fff;
  background: #3b82f6;
  border-color: #3b82f6;
}

html[data-knit-theme="dark"] .knit-search-query-preview-text,
html[data-knit-theme="dark"] .knit-search-swatch {
  color: #c5cad6;
}

html[data-knit-theme="dark"] .knit-search-swatch,
html[data-knit-theme="dark"] .knit-search-query-preview img {
  border-color: rgba(255, 255, 255, 0.12);
  background: rgba(255, 255, 255, 0.04);
}

/* ---------- 侧栏 + 主区 ---------- */
.knit-body {
  display: flex;
  flex: 1;
  margin-top: 0;
  min-width: 0;
  min-height: 0;
  width: 100%;
  height: 100%;
  overflow: hidden;
}

.knit-sidebar {
  position: fixed;
  top: 0;
  left: 0;
  width: var(--knit-side-w-collapsed);
  bottom: 0;
  z-index: 90;
  flex-shrink: 0;
  display: flex;
  flex-direction: column;
  gap: 0;
  padding: 0;
  background: var(--knit-chrome-bg);
  border-right: 1px solid var(--knit-chrome-border);
  overflow: hidden;
  transition:
    width 0.34s cubic-bezier(0.22, 1, 0.36, 1),
    padding 0.34s cubic-bezier(0.22, 1, 0.36, 1),
    gap 0.28s ease,
    box-shadow 0.28s ease,
    background 0.2s ease,
    border-color 0.2s ease;
}

.knit-sidebar-nav {
  display: flex;
  flex-direction: column;
  gap: inherit;
  flex: 1 1 auto;
  min-height: 0;
  min-width: 0;
  overflow-x: hidden;
  overflow-y: auto;
  padding: inherit;
  overscroll-behavior: contain;
  transition:
    opacity 0.26s ease,
    transform 0.34s cubic-bezier(0.22, 1, 0.36, 1),
    visibility 0.26s ease;
}

.knit-sidebar:hover {
  width: var(--knit-side-w);
  gap: 0.35rem;
  padding: 1rem 0.65rem;
  box-shadow: 4px 0 18px var(--knit-chrome-shadow);
}

.knit-sidebar:not(:hover) > .knit-sidebar-nav > button:not([hidden]),
.knit-sidebar:not(:hover) > .knit-sidebar-nav > .knit-side-submenu:not([hidden]) {
  opacity: 0;
  visibility: hidden;
  pointer-events: none;
  height: 0;
  min-height: 0;
  padding: 0;
  margin: 0;
  overflow: hidden;
  border: none;
}

.knit-sidebar-nav > button,
.knit-sidebar-nav > .knit-side-submenu {
  transition: opacity 0.18s ease, visibility 0.18s ease;
}

.knit-sidebar-nav button {
  width: 100%;
  text-align: left;
  padding: 0.55rem 0.75rem;
  font-size: 0.92rem;
  color: var(--knit-chrome-text);
  background: transparent;
  border: none;
  border-radius: 6px;
  cursor: pointer;
  transition: background 0.15s, color 0.15s;
}

.knit-sidebar-nav button:disabled,
.knit-side-submenu .knit-side-sub-btn:disabled {
  opacity: 0.42;
  cursor: not-allowed;
  pointer-events: none;
}

.knit-sidebar-nav button .knit-side-load-indicator {
  display: inline-block;
  width: 0.72rem;
  height: 0.72rem;
  margin-left: 0.4rem;
  border: 2px solid currentColor;
  border-right-color: transparent;
  border-radius: 50%;
  vertical-align: -0.08em;
  animation: knit-side-load-spin 0.65s linear infinite;
}

.knit-sidebar-nav button .knit-side-load-indicator[hidden] {
  display: none;
}

@keyframes knit-side-load-spin {
  to {
    transform: rotate(360deg);
  }
}

.knit-home-feed-more {
  grid-column: 1 / -1;
  margin: 0;
  padding: 1rem 0 1.5rem;
  text-align: center;
  font-size: 0.85rem;
  color: var(--knit-text-subtle);
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 0.45rem;
}

.knit-home-feed-more.is-busy::before {
  content: "";
  width: 0.85rem;
  height: 0.85rem;
  border: 2px solid currentColor;
  border-right-color: transparent;
  border-radius: 50%;
  animation: knit-side-load-spin 0.65s linear infinite;
}

.knit-home-feed-more[hidden] {
  display: none;
}

.knit-page-loading {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 0.5rem;
  margin: 1.4rem 0;
  padding: 0.2rem;
  font-size: 0.88rem;
  color: var(--knit-text-muted, #888);
}

.knit-page-loading-spin {
  width: 0.9rem;
  height: 0.9rem;
  border: 2px solid currentColor;
  border-right-color: transparent;
  border-radius: 50%;
  animation: knit-side-load-spin 0.65s linear infinite;
  flex: 0 0 auto;
}

.knit-sidebar-nav button:hover {
  background: var(--knit-chrome-hover);
}

.knit-sidebar-nav button.is-active {
  background: var(--knit-chrome-active);
  color: var(--knit-chrome-active-text);
}

.knit-side-collapse-btn {
  position: relative;
  padding-right: 1.35rem !important;
}

.knit-side-collapse-btn.is-open {
  background: var(--knit-chrome-active);
  color: var(--knit-chrome-active-text);
}

.knit-side-collapse-btn::after {
  content: "▸";
  position: absolute;
  right: 0.55rem;
  top: 50%;
  transform: translateY(-50%);
  font-size: 0.72rem;
  color: var(--knit-chrome-text-muted);
  transition: transform 0.15s ease;
}

.knit-side-collapse-btn.is-open::after {
  transform: translateY(-50%) rotate(90deg);
}

.knit-side-submenu {
  display: flex;
  flex-direction: column;
  gap: 0.25rem;
  margin: -0.05rem 0 0.25rem 0.2rem;
  padding: 0.32rem 0.28rem 0.32rem 0.78rem;
  border-left: 1px solid var(--knit-chrome-border);
  border-radius: 0 8px 8px 0;
  background: var(--knit-chrome-submenu-bg);
}

.knit-side-submenu[hidden] {
  display: none !important;
}

.knit-side-submenu .knit-side-sub-btn {
  display: flex;
  align-items: center;
  gap: 0.32rem;
  font-size: 0.82rem;
  color: var(--knit-chrome-text);
  padding: 0.42rem 0.62rem 0.42rem 0.52rem;
}

.knit-side-submenu .knit-side-sub-btn::before {
  content: "▹";
  font-size: 0.68rem;
  color: var(--knit-chrome-text-muted);
}

.knit-side-submenu .knit-side-sub-btn.is-active {
  background: var(--knit-chrome-active);
  color: var(--knit-chrome-active-text);
}

.knit-side-messages-btn,
.knit-side-follow-btn {
  position: relative;
  padding-right: 1.35rem;
}

.knit-nav-dot,
.knit-side-messages-badge {
  position: absolute;
  top: 0.32rem;
  right: 0.32rem;
  width: 0.5rem;
  min-width: 0.5rem;
  height: 0.5rem;
  padding: 0;
  border-radius: 999px;
  background: var(--knit-red);
  color: transparent;
  font-size: 0;
  line-height: 0;
  overflow: hidden;
  pointer-events: none;
}

.knit-nav-dot[hidden],
.knit-side-messages-badge[hidden],
.knit-bottom-nav__badge[hidden] {
  display: none !important;
}

.knit-sidebar-spacer {
  flex: 1;
  min-height: 0;
}

.knit-sidebar-rail-toggle {
  display: none;
}

/* 侧边栏：固定显示（默认固定显示） */
html[data-knit-sidebar-ui="fixed"] .knit-sidebar {
  width: var(--knit-side-w);
  gap: 0.35rem;
  padding: 1rem 0.65rem;
  box-shadow: 4px 0 18px var(--knit-chrome-shadow);
}

html[data-knit-sidebar-ui="fixed"] .knit-sidebar:not(:hover) > .knit-sidebar-nav > button:not([hidden]) {
  opacity: 1;
  visibility: visible;
  pointer-events: auto;
  height: auto;
  min-height: unset;
  padding: 0.55rem 0.75rem;
  margin: unset;
  overflow: visible;
  border: none;
}

html[data-knit-sidebar-ui="fixed"] .knit-sidebar:not(:hover) > .knit-sidebar-nav > .knit-side-submenu:not([hidden]) {
  opacity: 1;
  visibility: visible;
  pointer-events: auto;
  height: auto;
  min-height: unset;
  padding: 0.32rem 0.28rem 0.32rem 0.78rem;
  margin: -0.05rem 0 0.25rem 0.2rem;
  overflow: visible;
}

html[data-knit-sidebar-ui="fixed"] .knit-main {
  margin-left: var(--knit-side-w);
  width: calc(100% - var(--knit-side-w));
}

/* 电脑端：折叠钮贴在侧栏右缘中线，展开/收起与主区同步缓动 */
html[data-device="desktop"] .knit-sidebar {
  overflow: visible;
}

html[data-device="desktop"] .knit-sidebar-rail-toggle {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  position: absolute;
  top: 50%;
  left: auto;
  right: 0;
  z-index: 5;
  width: 1.35rem;
  height: 3.1rem;
  margin: 0;
  padding: 0;
  border: 1px solid var(--knit-chrome-border);
  border-radius: 999px;
  background: var(--knit-chrome-bg);
  color: var(--knit-chrome-text-muted, #64748b);
  box-shadow: 0 2px 10px var(--knit-chrome-shadow);
  transform: translate(55%, -50%);
  cursor: pointer;
  pointer-events: auto;
  transition:
    color 0.18s ease,
    background 0.18s ease,
    border-color 0.18s ease,
    transform 0.34s cubic-bezier(0.22, 1, 0.36, 1),
    width 0.28s ease,
    height 0.28s ease,
    box-shadow 0.28s ease;
}

html[data-device="desktop"] .knit-sidebar-rail-toggle:hover,
html[data-device="desktop"] .knit-sidebar-rail-toggle:focus-visible {
  color: var(--knit-chrome-text);
  background: var(--knit-chrome-hover);
  border-color: var(--knit-chrome-text-muted, #94a3b8);
  box-shadow: 0 4px 14px var(--knit-chrome-shadow);
}

html[data-device="desktop"] .knit-sidebar-rail-toggle__glyph {
  display: block;
  width: 0.55rem;
  height: 0.55rem;
  position: relative;
}

html[data-device="desktop"] .knit-sidebar-rail-toggle__glyph::before,
html[data-device="desktop"] .knit-sidebar-rail-toggle__glyph::after {
  content: "";
  position: absolute;
  left: 50%;
  top: 50%;
  width: 0.34rem;
  height: 0.34rem;
  border-left: 2px solid currentColor;
  border-bottom: 2px solid currentColor;
  transform: translate(-35%, -50%) rotate(45deg);
  transition: transform 0.28s cubic-bezier(0.22, 1, 0.36, 1);
}

html[data-device="desktop"] .knit-sidebar-rail-toggle__glyph::after {
  opacity: 0.45;
  transform: translate(-70%, -50%) rotate(45deg);
}

html[data-device="desktop"][data-knit-sidebar-collapsed="1"] .knit-sidebar-rail-toggle {
  right: 50%;
  transform: translate(50%, -50%);
  width: 1.45rem;
  height: 1.45rem;
  border-radius: 999px;
  box-shadow: 0 4px 16px var(--knit-chrome-shadow);
}

html[data-device="desktop"][data-knit-sidebar-collapsed="1"] .knit-sidebar-rail-toggle__glyph::before {
  transform: translate(-65%, -50%) rotate(-135deg);
}

html[data-device="desktop"][data-knit-sidebar-collapsed="1"] .knit-sidebar-rail-toggle__glyph::after {
  opacity: 0.45;
  transform: translate(-30%, -50%) rotate(-135deg);
}

html[data-device="desktop"][data-knit-sidebar-collapsed="1"] .knit-sidebar,
html[data-device="desktop"][data-knit-sidebar-collapsed="1"] .knit-sidebar:hover {
  width: var(--knit-side-w-rail);
  gap: 0;
  padding: 0;
  box-shadow: none;
  overflow: visible;
}

html[data-device="desktop"]:not([data-knit-sidebar-collapsed="1"]) .knit-sidebar-nav {
  opacity: 1;
  visibility: visible;
  transform: none;
}

html[data-device="desktop"][data-knit-sidebar-collapsed="1"] .knit-sidebar-nav {
  opacity: 0;
  visibility: hidden;
  pointer-events: none;
  width: 100%;
  padding: 0;
  overflow: hidden;
  transform: translateX(-12px);
}

html[data-device="desktop"][data-knit-sidebar-collapsed="1"] .knit-main,
html[data-device="desktop"][data-knit-sidebar-ui="fixed"][data-knit-sidebar-collapsed="1"] .knit-main {
  margin-left: var(--knit-side-w-rail);
  width: calc(100% - var(--knit-side-w-rail));
}

/* 灵感 / 材料：顶栏固定显示 */
html[data-knit-topbar-ui="fixed"] .knit-topbar {
  background: var(--knit-chrome-bg);
  border-bottom-color: var(--knit-chrome-border);
  box-shadow: 0 4px 18px var(--knit-chrome-shadow);
}

html[data-knit-topbar-ui="fixed"] .knit-topbar .knit-brand,
html[data-knit-topbar-ui="fixed"] .knit-topbar .knit-search-wrap {
  opacity: 1;
  visibility: visible;
  pointer-events: auto;
  transform: translateY(0);
}

/* 页眉与侧栏均固定显示时，侧栏整体下移避让顶栏 */
html[data-knit-topbar-ui="fixed"][data-knit-sidebar-ui="fixed"] .knit-sidebar {
  top: var(--knit-top-h);
}

/* 页眉 / 侧栏悬停互斥（均为「悬停显示」模式时） */
html[data-knit-topbar-ui="hover"]:not(.knit-search-in-use) .knit-app:has(.knit-sidebar:hover) .knit-topbar,
html[data-knit-topbar-ui="hover"]:not(.knit-search-in-use) .knit-app:has(.knit-sidebar:hover) .knit-home-grid-top-hover,
html[data-knit-topbar-ui="hover"]:not(.knit-search-in-use) .knit-app:has(.knit-sidebar:hover) .knit-home-grid-head:not([hidden]) {
  pointer-events: none;
}

html[data-knit-sidebar-ui="hover"] .knit-app:has(.knit-topbar:hover) .knit-sidebar,
html[data-knit-sidebar-ui="hover"] .knit-app:has(.knit-topbar:focus-within) .knit-sidebar,
html[data-knit-sidebar-ui="hover"] .knit-app:has(.knit-home-grid-top-hover:hover) .knit-sidebar,
html[data-knit-sidebar-ui="hover"] .knit-app:has(.knit-home-grid-head:not([hidden]):hover) .knit-sidebar,
html[data-knit-sidebar-ui="hover"] .knit-app:has(.knit-home-grid-head:not([hidden]):focus-within) .knit-sidebar {
  pointer-events: none;
}

/* 页眉固定显示时，侧栏悬停展开盖在页眉之上 */
html[data-knit-topbar-ui="fixed"] .knit-sidebar:hover {
  z-index: 110;
}

.knit-main {
  position: relative;
  flex: 1 1 0%;
  /* 与搜索下拉一样用明确视口高度，避免父级高度不确定时 max-height:100% 失效、页面无法滚动 */
  height: 100vh;
  height: 100dvh;
  max-height: 100vh;
  max-height: 100dvh;
  margin-left: var(--knit-side-w-collapsed);
  width: calc(100% - var(--knit-side-w-collapsed));
  min-width: 0;
  min-height: 0;
  display: flex;
  flex-direction: column;
  padding: 0.5rem 0.35rem 0.65rem;
  background: var(--knit-main-bg);
  overflow: hidden;
  transition:
    margin-left 0.34s cubic-bezier(0.22, 1, 0.36, 1),
    width 0.34s cubic-bezier(0.22, 1, 0.36, 1);
}

/* 固定页眉盖在主区之上：主区整体下移，悬停模式不改 */
html[data-knit-topbar-ui="fixed"] .knit-app:not(.knit-app--follow) .knit-main {
  margin-top: var(--knit-top-h);
  height: calc(100vh - var(--knit-top-h));
  height: calc(100dvh - var(--knit-top-h));
  max-height: calc(100vh - var(--knit-top-h));
  max-height: calc(100dvh - var(--knit-top-h));
}

/* 顶栏被设置/其它覆盖层藏起时，不要再留固定顶栏占位，避免切「悬停/固定」时整页空跳 */
html.knit-hide-topbar[data-knit-topbar-ui="fixed"] .knit-app:not(.knit-app--follow) .knit-main,
html[data-knit-topbar-ui="fixed"] .knit-app.knit-app--hide-topbar:not(.knit-app--follow) .knit-main {
  margin-top: 0;
  height: 100vh;
  height: 100dvh;
  max-height: 100vh;
  max-height: 100dvh;
}

.knit-main > section[hidden],
.knit-main > [hidden] {
  display: none !important;
  pointer-events: none !important;
}

.knit-main > section:not([hidden]) {
  flex: 1 1 0%;
  min-height: 0;
  max-height: 100%;
}

/* 主视图壳层：统一用 page-bg，卡片/侧栏再用 panel-bg；深浅色只靠 token */
.knit-scrollport,
.knit-search-view,
.knit-follow-view,
.knit-user-profile-view,
.knit-mine-view,
.knit-notes-view,
.knit-creator-view,
.knit-messages-view,
.knit-admin-view,
#knitFollowView,
#knitFavoriteView {
  background-color: var(--knit-page-bg);
  color: var(--knit-view-text);
}

.knit-follow-view .knit-scrollport,
.knit-follow-main {
  background: var(--knit-page-bg);
  border-color: transparent;
}

.knit-biz-leaf--board {
  background: var(--knit-paper-bg);
  border-color: var(--knit-panel-border);
}

.knit-biz-board-stage,
.knit-biz-sheet {
  background: var(--knit-paper-bg);
}

.knit-biz-sheet-title {
  border-bottom-color: var(--knit-paper-rule);
  color: var(--knit-paper-heading);
}

.knit-biz-board-heading {
  color: var(--knit-text-muted);
}

.knit-biz-edit-row {
  background: var(--knit-panel-bg);
}

.knit-biz-edit-title,
.knit-biz-edit-note {
  background: var(--knit-control-bg);
  color: var(--knit-text-heading);
}

html[data-knit-theme="dark"] .knit-biz-curl-fold {
  background:
    linear-gradient(225deg, rgba(30, 32, 40, 0.95) 0 42%, transparent 43%),
    linear-gradient(225deg, #3a3d48 43%, #2a2d36 100%);
}

html[data-knit-theme="dark"] .knit-biz-curl-text {
  color: var(--knit-text-body);
}

html[data-knit-theme="dark"] .knit-grid-page-loading {
  color: rgba(255, 255, 255, 0.45);
}

/**
 * 主区为纵向 flex；#knitNotesView 在 DOM 中早于 #knitDeveloperView。
 * 个别环境下若「壳」层仍参与命中，会表现为仅笔记编辑区点不动、侧栏正常（用户未开大图全屏时也会出现）。
 */
#knitScrollport {
  z-index: 0;
}
#knitDeveloperView:not([hidden]),
#knitCreatorView:not([hidden]) {
  position: relative;
  z-index: 11;
}

.knit-messages-view {
  flex: 1;
  min-width: 0;
  min-height: 0;
  display: flex;
  flex-direction: column;
  overflow: hidden;
  background: var(--knit-page-bg);
  color: var(--knit-text-heading);
}

.knit-msg-topbar {
  background: var(--knit-panel-bg);
  border-bottom: 1px solid var(--knit-divider);
  padding: 0;
  display: flex;
  flex-direction: column;
  align-items: stretch;
  gap: 0;
}

.knit-msg-main-tabs {
  display: flex;
  align-items: stretch;
  width: 100%;
  gap: 0;
  border-bottom: 1px solid var(--knit-divider);
}

.knit-msg-main-tab {
  flex: 1 1 0;
  width: auto;
  min-width: 0;
  margin: 0;
  border: none;
  background: transparent;
  font-size: 1.05rem;
  font-weight: 700;
  padding: 0.75rem 0;
  text-align: center;
  cursor: pointer;
  color: var(--knit-tab-inactive);
  border-bottom: 2px solid transparent;
  line-height: 1.3;
}

.knit-msg-main-tab.is-active {
  color: var(--knit-text-heading);
  border-bottom-color: var(--knit-red);
}

.knit-msg-main-tab:hover {
  color: var(--knit-text-body);
}

.knit-msg-main-tab.is-active:hover {
  color: var(--knit-text-heading);
}

.knit-msg-title {
  margin: 0;
  font-size: 1.05rem;
  font-weight: 700;
}

.knit-msg-footer-actions {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 0.7rem;
  flex-shrink: 0;
  min-height: 2.6rem;
  padding: 0.55rem 0.9rem 0.7rem;
  background: var(--knit-panel-bg);
  border-top: 1px solid var(--knit-divider);
}

.knit-msg-footer-actions.is-friends-tab .knit-msg-mark-btn:not(#knitMsgCreateGroupBtn),
.knit-msg-footer-actions.is-friends-tab .knit-msg-clear-btn {
  display: none;
}

.knit-msg-mark-btn {
  border: 1px solid var(--knit-control-border);
  background: var(--knit-control-bg);
  color: var(--knit-control-text);
  border-radius: 999px;
  padding: 0.36rem 1.05rem;
  cursor: pointer;
  font: inherit;
  font-size: 0.82rem;
  font-weight: 650;
}

.knit-msg-mark-btn:hover,
.knit-msg-mark-btn:focus-visible {
  border-color: var(--knit-control-active-border, #9ca3af);
  background: var(--knit-control-hover-bg, #f3f4f6);
}

.knit-msg-clear-btn {
  color: #b91c1c;
  border-color: #fecaca;
}

.knit-msg-clear-btn:hover,
.knit-msg-clear-btn:focus-visible {
  background: #fef2f2;
  border-color: #fca5a5;
}

.knit-msg-body {
  flex: 1;
  min-height: 0;
  min-width: 0;
  display: flex;
  align-items: stretch;
}

.knit-msg-body > .knit-channel-pager {
  flex: 1 1 auto;
  min-height: 0;
  align-self: stretch;
  background: transparent;
}

.knit-msg-body .knit-channel-pager__pane,
.knit-msg-body .knit-channel-pager__slot {
  height: 100%;
  min-height: 0;
}

.knit-msg-body .knit-channel-pager__slot > .knit-msg-list-wrap {
  height: 100%;
  box-sizing: border-box;
}

.knit-msg-search-wrap {
  display: flex;
  align-items: center;
  gap: 0.2rem;
  padding: 0.55rem 0.55rem 0.45rem 0.75rem;
  background: var(--knit-panel-bg);
  border-bottom: 1px solid var(--knit-divider);
  position: relative;
  z-index: 6;
}

.knit-messages-view.is-search-open .knit-msg-topbar,
.knit-messages-view.is-search-open .knit-msg-search-wrap,
.knit-messages-view.is-search-open .knit-msg-footer-actions {
  display: none;
}

.knit-msg-search-open {
  flex: 1;
  min-width: 0;
  display: flex;
  align-items: center;
  box-sizing: border-box;
  margin: 0;
  border: 1px solid var(--knit-control-border);
  background: var(--knit-control-bg);
  color: var(--knit-text-muted);
  border-radius: 10px;
  padding: 0.48rem 0.75rem;
  font: inherit;
  font-size: 0.86rem;
  text-align: left;
  cursor: pointer;
}

.knit-msg-search-open:hover,
.knit-msg-search-open:focus-visible {
  outline: none;
  border-color: #fca5a5;
  box-shadow: 0 0 0 2px rgba(201, 48, 48, 0.08);
}

.knit-msg-search-page[hidden] {
  display: none !important;
}

.knit-msg-search-page {
  flex: 0 0 auto;
  background: var(--knit-panel-bg);
  border-bottom: 1px solid var(--knit-divider);
}

.knit-msg-search-page-bar {
  display: flex;
  align-items: center;
  gap: 0.45rem;
  padding: 0.55rem 0.7rem 0.5rem 0.55rem;
}

.knit-msg-search-back {
  flex: 0 0 auto;
  margin: 0;
  border: 0;
  background: transparent;
  color: var(--knit-text-heading);
  border-radius: 8px;
  padding: 0.28rem 0.2rem;
  font: inherit;
  font-size: 0.88rem;
  font-weight: 650;
  cursor: pointer;
  white-space: nowrap;
}

.knit-msg-search-back:hover,
.knit-msg-search-back:focus-visible {
  background: var(--knit-control-hover-bg, #f3f4f6);
  outline: none;
}

.knit-msg-cat {
  flex: 0 0 auto;
  position: relative;
  display: flex;
  flex-direction: column;
  align-items: flex-end;
  gap: 0;
  width: auto;
  padding: 0;
  background: transparent;
  border: none;
}

.knit-msg-cat.is-open {
  width: auto;
}

.knit-msg-cat[hidden] {
  display: none;
}

.knit-msg-cat-toggle {
  display: inline-flex;
  flex-direction: row;
  align-items: center;
  justify-content: center;
  gap: 0.22rem;
  box-sizing: border-box;
  min-height: 2.15rem;
  margin: 0;
  border: 1px solid var(--knit-control-border);
  background: var(--knit-control-bg);
  color: var(--knit-text-heading);
  border-radius: 10px;
  padding: 0 0.42rem 0 0.64rem;
  font: inherit;
  font-size: 0.82rem;
  font-weight: 650;
  line-height: 1.2;
  white-space: nowrap;
  cursor: pointer;
}

.knit-msg-cat-toggle:hover,
.knit-msg-cat-toggle:focus-visible {
  outline: none;
  border-color: #fca5a5;
  background: var(--knit-control-hover-bg, #fafafa);
  box-shadow: 0 0 0 2px rgba(201, 48, 48, 0.08);
}

.knit-msg-cat-toggle-text {
  writing-mode: horizontal-tb;
  letter-spacing: 0;
}

.knit-msg-cat.is-open .knit-msg-cat-toggle-text {
  writing-mode: horizontal-tb;
  letter-spacing: 0;
}

.knit-msg-cat-toggle-arrow {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 0.9rem;
  height: 0.9rem;
  color: var(--knit-text-muted);
  transform: none;
  transition: transform 0.16s ease;
}

.knit-msg-cat-toggle-arrow svg {
  display: block;
  width: 100%;
  height: 100%;
}

.knit-msg-cat.is-open .knit-msg-cat-toggle-arrow {
  transform: rotate(180deg);
}

.knit-msg-cat.is-open .knit-msg-cat-toggle {
  flex-direction: row;
  justify-content: center;
  border-color: color-mix(in srgb, var(--knit-red) 42%, var(--knit-control-border));
  background: var(--knit-control-hover-bg, #fafafa);
}

.knit-msg-tabs {
  display: none;
  flex-direction: column;
  gap: 0.1rem;
  padding: 0;
  background: transparent;
  border: none;
  overflow: visible;
}

.knit-msg-tabs[hidden] {
  display: none;
}

.knit-msg-cat.is-open .knit-msg-tabs,
.knit-msg-cat.is-open .knit-msg-tabs[hidden] {
  display: flex;
  position: absolute;
  top: calc(100% + 0.28rem);
  right: 0;
  z-index: 8;
  min-width: 10.6rem;
  padding: 0.32rem;
  background: var(--knit-panel-bg);
  border: 1px solid var(--knit-divider);
  border-radius: 12px;
  box-shadow: 0 10px 28px rgba(15, 23, 42, 0.14);
}

.knit-msg-tab-row {
  display: grid;
  grid-template-columns: minmax(0, 1fr) 1.9rem;
  align-items: center;
  gap: 0.12rem;
}

.knit-msg-tab {
  display: flex;
  align-items: center;
  justify-content: flex-start;
  flex: 1 1 auto;
  min-width: 0;
  gap: 0.28rem;
  border: 0;
  background: transparent;
  color: var(--knit-text-body);
  border-radius: 8px;
  padding: 0.42rem 0.58rem;
  white-space: nowrap;
  cursor: pointer;
  text-align: left;
  font: inherit;
  font-size: 0.82rem;
  font-weight: 600;
}

.knit-msg-tab:hover,
.knit-msg-tab:focus-visible {
  background: var(--knit-control-hover-bg, #f3f4f6);
  color: var(--knit-text-heading);
  outline: none;
}

.knit-msg-tab-mute-spacer {
  width: 1.9rem;
  height: 1.9rem;
}

.knit-msg-tab-mute-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  flex: 0 0 auto;
  box-sizing: border-box;
  width: 1.9rem;
  height: 1.9rem;
  margin: 0;
  border: 0;
  background: transparent;
  color: var(--knit-text-subtle);
  border-radius: 8px;
  padding: 0;
  font: inherit;
  line-height: 0;
  cursor: pointer;
}

.knit-msg-tab-mute-btn__icon {
  display: none;
  width: 0.98rem;
  height: 0.98rem;
}

.knit-msg-tab-mute-btn__icon svg {
  display: block;
  width: 100%;
  height: 100%;
}

.knit-msg-tab-mute-btn__icon--on {
  display: block;
}

.knit-msg-tab-mute-btn.is-muted .knit-msg-tab-mute-btn__icon--on {
  display: none;
}

.knit-msg-tab-mute-btn.is-muted .knit-msg-tab-mute-btn__icon--off {
  display: block;
}

.knit-msg-tab-mute-btn:hover,
.knit-msg-tab-mute-btn:focus-visible {
  background: var(--knit-control-hover-bg, #f3f4f6);
  color: var(--knit-text-heading);
  outline: none;
}

.knit-msg-tab-mute-btn.is-muted {
  color: var(--knit-text-muted);
  background: transparent;
}

.knit-msg-tab-mute-btn.is-muted:hover,
.knit-msg-tab-mute-btn.is-muted:focus-visible {
  color: var(--knit-text-heading);
  background: var(--knit-control-active-bg, #f3f4f6);
}

.knit-msg-tab-mute-btn:disabled {
  opacity: 0.55;
  cursor: default;
}

.knit-msg-tab-mute,
.knit-msg-cat-mute-flag {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  flex: 0 0 auto;
  width: 1.05rem;
  height: 1.05rem;
  padding: 0;
  border: 0;
  border-radius: 999px;
  color: var(--knit-text-muted);
  background: var(--knit-tag-bg, #f3f4f6);
}

.knit-msg-cat-mute-flag[hidden] {
  display: none !important;
}

.knit-msg-cat-mute-flag svg {
  display: block;
  width: 0.72rem;
  height: 0.72rem;
}

.knit-msg-tab.is-muted {
  color: var(--knit-text-muted);
}

.knit-msg-cat-toggle.is-muted {
  gap: 0.18rem;
}

.knit-msg-tab.is-active {
  color: var(--knit-text-heading);
  background: var(--knit-control-active-bg, #f3f4f6);
  font-weight: 700;
  border: 0;
}

.knit-msg-search {
  flex: 1;
  min-width: 0;
  width: auto;
  box-sizing: border-box;
  border: 1px solid var(--knit-control-border);
  background: var(--knit-control-bg);
  color: var(--knit-control-text);
  border-radius: 10px;
  padding: 0.48rem 0.75rem;
  font: inherit;
  font-size: 16px;
}

.knit-msg-search::placeholder {
  color: var(--knit-text-muted);
}

.knit-msg-search:focus {
  outline: none;
  border-color: #fca5a5;
  box-shadow: 0 0 0 2px rgba(201, 48, 48, 0.08);
}

.knit-msg-list-wrap {
  flex: 1;
  min-height: 0;
  overflow: auto;
  padding: 0.75rem;
}

.knit-msg-list {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: 0.55rem;
}

.knit-msg-item {
  display: flex;
  gap: 0.65rem;
  align-items: flex-start;
  background: var(--knit-panel-bg);
  border: 1px solid var(--knit-panel-border);
  box-shadow: var(--knit-panel-shadow);
  border-radius: 12px;
  padding: 0.7rem;
}

.knit-msg-friend-group {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: 0.45rem;
}

.knit-msg-friend-heading {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 0.4rem;
  width: 100%;
  box-sizing: border-box;
  margin: 0;
  padding: 0.28rem 0.4rem;
  border: 0;
  background: transparent;
  border-radius: 8px;
  font: inherit;
  font-size: 0.72rem;
  font-weight: 700;
  letter-spacing: 0.04em;
  color: var(--knit-text-muted);
  cursor: pointer;
  text-align: left;
  line-height: 1.3;
}

.knit-msg-friend-heading:hover,
.knit-msg-friend-heading:focus-visible {
  background: var(--knit-control-hover-bg, #f3f4f6);
  color: var(--knit-text-heading);
  outline: none;
}

.knit-msg-friend-heading__text {
  min-width: 0;
}

.knit-msg-friend-heading__arrow {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  flex: 0 0 auto;
  width: 0.85rem;
  height: 0.85rem;
  color: var(--knit-text-subtle);
  transform: none;
  transition: transform 0.16s ease;
}

.knit-msg-friend-heading__arrow svg {
  display: block;
  width: 100%;
  height: 100%;
}

.knit-msg-friend-group.is-collapsed .knit-msg-friend-heading__arrow {
  transform: rotate(-90deg);
}

.knit-msg-friend-group:first-child .knit-msg-friend-heading {
  margin-top: 0;
}

/* 系统消息：新关注折叠组（默认收起，展开后早关注在下） */
.knit-msg-follow-heading {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 0.65rem;
  width: 100%;
  padding: 0.55rem 0.65rem;
  border-radius: 10px;
}

.knit-msg-follow-heading__body {
  display: flex;
  flex-direction: column;
  gap: 0.12rem;
  min-width: 0;
  flex: 1 1 auto;
  text-align: left;
}

.knit-msg-follow-heading__body .knit-msg-friend-heading__text {
  font-size: 0.88rem;
  font-weight: 650;
  color: var(--knit-text-heading);
  line-height: 1.35;
  word-break: break-word;
}

.knit-msg-follow-heading__sub {
  font-size: 0.72rem;
  font-weight: 500;
  color: var(--knit-text-muted);
  line-height: 1.3;
}

.knit-msg-follow-heading__meta {
  display: inline-flex;
  align-items: center;
  gap: 0.35rem;
  flex: 0 0 auto;
  margin-top: 0.1rem;
}

.knit-msg-follow-heading__time {
  font-size: 0.7rem;
  font-weight: 500;
  color: var(--knit-text-subtle);
  white-space: nowrap;
}

.knit-msg-follow-group.has-unread .knit-msg-follow-heading {
  box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--knit-accent, #c45c6a) 35%, transparent);
}

.knit-msg-follow-group__list {
  margin-top: 0.35rem;
  padding-left: 0.15rem;
}

.knit-msg-item--follow-child {
  margin-left: 0.15rem;
}

.knit-msg-friend-group__list {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: 0.55rem;
}

.knit-msg-friend-group__list[hidden] {
  display: none !important;
}

.knit-msg-friend-empty {
  list-style: none;
  margin: 0;
  padding: 0.35rem 0.5rem 0.5rem;
  font-size: 0.78rem;
  font-weight: 500;
  color: var(--knit-text-muted);
}

.knit-msg-relation {
  display: inline-flex;
  align-items: center;
  flex-shrink: 0;
  margin-left: 0;
  padding: 0.02rem 0.32rem;
  border-radius: 999px;
  font-size: 0.66rem;
  font-weight: 650;
  line-height: 1.35;
  color: var(--knit-text-muted);
  background: rgba(100, 116, 139, 0.12);
  vertical-align: middle;
}

.knit-msg-relation[data-relation="mutual"] {
  color: #0f766e;
  background: rgba(13, 148, 136, 0.12);
}

.knit-msg-relation[data-relation="following"] {
  color: #2563eb;
  background: rgba(37, 99, 235, 0.12);
}

.knit-msg-relation[data-relation="follower"] {
  color: #b45309;
  background: rgba(217, 119, 6, 0.12);
}

.knit-msg-friend {
  cursor: pointer;
  transition: border-color 0.15s, box-shadow 0.15s;
}

.knit-msg-item--clickable {
  cursor: pointer;
  transition: border-color 0.15s, box-shadow 0.15s;
}

.knit-msg-item--clickable:hover,
.knit-msg-item--clickable:focus-visible {
  border-color: #fca5a5;
  box-shadow: 0 0 0 2px rgba(201, 48, 48, 0.08);
  outline: none;
}

.knit-msg-friend:hover,
.knit-msg-friend:focus-visible {
  border-color: #fca5a5;
  box-shadow: 0 0 0 2px rgba(201, 48, 48, 0.08);
  outline: none;
}

.knit-msg-friend-actions {
  position: relative;
  flex-shrink: 0;
  display: flex;
  align-items: center;
}

.knit-msg-avatar {
  width: 40px;
  height: 40px;
  border-radius: 999px;
  background: #cbd5e1;
  flex: 0 0 auto;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 0.95rem;
  font-weight: 700;
  color: var(--knit-text-muted);
}

.knit-msg-friend .knit-msg-avatar {
  cursor: pointer;
  position: relative;
  z-index: 1;
}

.knit-msg-avatar.knit-fp-c-avatar--a {
  background: #5c7a9a;
  color: #fff;
}

.knit-msg-avatar.knit-fp-c-avatar--b {
  background: #6a8f5c;
  color: #fff;
}

.knit-msg-avatar.knit-fp-c-avatar--c {
  background: #9a7a5c;
  color: #fff;
}

.knit-msg-avatar--photo {
  background: #e5e7eb;
  overflow: hidden;
  padding: 0;
}

.knit-msg-avatar-img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
  border-radius: inherit;
}

.knit-msg-main {
  min-width: 0;
  flex: 1;
}

.knit-msg-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 0.6rem;
}

.knit-msg-name {
  margin: 0;
  font-size: 0.92rem;
  font-weight: 700;
  color: var(--knit-text-heading);
  display: inline-flex;
  align-items: center;
  gap: 0.3rem;
  min-width: 0;
  flex: 1;
}

.knit-msg-group-tag {
  margin-left: 0.28rem;
  font-size: 0.68rem;
  font-weight: 650;
  color: var(--knit-text-muted);
  border: 1px solid var(--knit-panel-border);
  border-radius: 4px;
  padding: 0 0.28rem;
  line-height: 1.35;
  vertical-align: middle;
}

.knit-msg-avatar--group {
  background: #5b7c99;
  color: #fff;
}

.knit-msg-avatar.knit-avatar-combo,
.knit-dm-chat__avatar.knit-avatar-combo {
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  gap: 1px;
  padding: 1px;
  overflow: hidden;
  background: #c5d0da;
  color: #fff;
  border-radius: 22%;
  box-sizing: border-box;
  line-height: 1;
}

.knit-avatar-combo__row {
  display: flex;
  justify-content: center;
  align-items: center;
  gap: 1px;
  width: 100%;
  flex: 0 0 auto;
}

.knit-avatar-combo__tile {
  box-sizing: border-box;
  overflow: hidden;
  display: flex;
  align-items: center;
  justify-content: center;
  flex: 0 0 auto;
  background: #94a3b8;
  color: #fff;
  font-weight: 700;
  line-height: 1;
}

.knit-avatar-combo__tile.knit-fp-c-avatar--a {
  background: #5c7a9a;
}

.knit-avatar-combo__tile.knit-fp-c-avatar--b {
  background: #6a8f5c;
}

.knit-avatar-combo__tile.knit-fp-c-avatar--c {
  background: #9a7a5c;
}

.knit-avatar-combo__img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}

.knit-avatar-combo--1 .knit-avatar-combo__tile {
  width: calc(100% - 2px);
  aspect-ratio: 1;
  height: auto;
  font-size: 0.7em;
}

.knit-avatar-combo--2 .knit-avatar-combo__tile,
.knit-avatar-combo--3 .knit-avatar-combo__tile,
.knit-avatar-combo--4 .knit-avatar-combo__tile {
  width: calc((100% - 3px) / 2);
  aspect-ratio: 1;
  height: auto;
  font-size: 0.55em;
}

.knit-avatar-combo--5 .knit-avatar-combo__tile,
.knit-avatar-combo--6 .knit-avatar-combo__tile,
.knit-avatar-combo--7 .knit-avatar-combo__tile,
.knit-avatar-combo--8 .knit-avatar-combo__tile,
.knit-avatar-combo--9 .knit-avatar-combo__tile {
  width: calc((100% - 4px) / 3);
  aspect-ratio: 1;
  height: auto;
  font-size: 0.4em;
}

.knit-msg-avatar.knit-avatar-combo,
.knit-dm-chat__avatar.knit-avatar-combo {
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  gap: 1px;
  padding: 1px;
  overflow: hidden;
  background: #c5d0da;
  color: #fff;
  border-radius: 22%;
  box-sizing: border-box;
  line-height: 1;
}

.knit-avatar-combo__row {
  display: flex;
  justify-content: center;
  align-items: center;
  gap: 1px;
  width: 100%;
  flex: 0 0 auto;
}

.knit-avatar-combo__tile {
  box-sizing: border-box;
  overflow: hidden;
  display: flex;
  align-items: center;
  justify-content: center;
  flex: 0 0 auto;
  background: #94a3b8;
  color: #fff;
  font-weight: 700;
  line-height: 1;
}

.knit-avatar-combo__tile.knit-fp-c-avatar--a {
  background: #5c7a9a;
}

.knit-avatar-combo__tile.knit-fp-c-avatar--b {
  background: #6a8f5c;
}

.knit-avatar-combo__tile.knit-fp-c-avatar--c {
  background: #9a7a5c;
}

.knit-avatar-combo__img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}

.knit-avatar-combo--1 .knit-avatar-combo__tile {
  width: calc(100% - 2px);
  aspect-ratio: 1;
  height: auto;
  font-size: 0.7em;
}

.knit-avatar-combo--2 .knit-avatar-combo__tile,
.knit-avatar-combo--3 .knit-avatar-combo__tile,
.knit-avatar-combo--4 .knit-avatar-combo__tile {
  width: calc((100% - 3px) / 2);
  aspect-ratio: 1;
  height: auto;
  font-size: 0.55em;
}

.knit-avatar-combo--5 .knit-avatar-combo__tile,
.knit-avatar-combo--6 .knit-avatar-combo__tile,
.knit-avatar-combo--7 .knit-avatar-combo__tile,
.knit-avatar-combo--8 .knit-avatar-combo__tile,
.knit-avatar-combo--9 .knit-avatar-combo__tile {
  width: calc((100% - 4px) / 3);
  aspect-ratio: 1;
  height: auto;
  font-size: 0.4em;
}

.knit-group-create-name {
  display: flex;
  flex-direction: column;
  gap: 0.28rem;
  margin: 0.35rem 0 0.2rem;
  font-size: 0.78rem;
  color: var(--knit-text-muted);
}

.knit-group-create-name input {
  border: 1px solid var(--knit-control-border);
  background: var(--knit-control-bg);
  color: var(--knit-text-heading);
  border-radius: 8px;
  padding: 0.42rem 0.65rem;
  font: inherit;
  font-size: 0.88rem;
}

.knit-dm-chat__from-name {
  margin: 0 0 0.14rem;
  font-size: 0.72rem;
  color: var(--knit-text-muted);
  line-height: 1.2;
}

.knit-dm-chat__row--sys {
  justify-content: center;
}

.knit-dm-chat__sys {
  margin: 0.15rem auto;
  max-width: 86%;
  font-size: 0.75rem;
  color: var(--knit-text-muted);
  text-align: center;
  line-height: 1.4;
}

.knit-msg-name-text {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  min-width: 0;
}

.knit-msg-mute-flag,
.knit-msg-pin-flag {
  flex: 0 0 auto;
  font-size: 0.62rem;
  font-weight: 650;
  line-height: 1;
  padding: 0.14rem 0.28rem;
  border-radius: 4px;
  color: var(--knit-text-muted);
  background: var(--knit-control-hover-bg);
  border: 1px solid var(--knit-divider);
}

.knit-msg-pin-flag {
  color: #9a3412;
  background: color-mix(in srgb, var(--knit-red) 8%, var(--knit-panel-bg));
  border-color: #fed7aa;
}

.knit-msg-time {
  font-size: 0.75rem;
  color: var(--knit-text-muted);
  flex: 0 0 auto;
  white-space: nowrap;
}

.knit-msg-content {
  margin: 0.35rem 0 0.5rem;
  line-height: 1.45;
  color: var(--knit-text-body);
}

.knit-msg-preview-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 0.45rem;
  min-width: 0;
  margin-top: 0.2rem;
}

.knit-msg-chat .knit-msg-content,
.knit-msg-friend .knit-msg-content {
  margin: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  color: var(--knit-text-muted);
  font-size: 0.84rem;
  min-width: 0;
  flex: 1;
}

.knit-msg-chat,
.knit-msg-friend {
  position: relative;
  align-items: center;
}

.knit-msg-chat.is-pinned {
  border-color: color-mix(in srgb, var(--knit-red) 35%, var(--knit-panel-border));
  background: color-mix(in srgb, var(--knit-red) 6%, var(--knit-panel-bg));
}

.knit-msg-chat-pin {
  position: absolute;
  right: 0.55rem;
  bottom: 0.45rem;
  border: none;
  background: transparent;
  color: var(--knit-text-muted);
  font: inherit;
  font-size: 0.7rem;
  padding: 0.1rem 0.2rem;
  cursor: pointer;
  opacity: 0;
  transition: opacity 0.15s;
}

.knit-msg-chat:hover .knit-msg-chat-pin,
.knit-msg-chat:focus-within .knit-msg-chat-pin {
  opacity: 1;
}

.knit-msg-chat-pin:hover {
  color: var(--knit-red);
}

.knit-msg-unread-badge {
  min-width: 1.15rem;
  height: 1.15rem;
  padding: 0 0.28rem;
  border-radius: 999px;
  background: var(--knit-red);
  color: #fff;
  font-size: 0.68rem;
  font-weight: 700;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  flex: 0 0 auto;
  line-height: 1;
}

.knit-msg-unread-badge[hidden],
.knit-msg-unread-badge:empty {
  display: none !important;
}

.knit-msg-item.is-muted .knit-msg-unread-badge {
  background: #94a3b8;
}

.knit-msg-footer-actions.is-chats-tab .knit-msg-clear-btn {
  display: none;
}

.knit-msg-meta {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0.45rem;
}

.knit-msg-tag {
  font-size: 0.72rem;
  color: var(--knit-tag-text);
  background: var(--knit-tag-bg);
  border-radius: 999px;
  padding: 2px 8px;
}

.knit-msg-reply-btn {
  border: 1px solid var(--knit-control-border);
  background: var(--knit-control-hover-bg);
  color: var(--knit-text-body);
  cursor: pointer;
  padding: 0.15rem 0.55rem;
  font-size: 0.72rem;
  border-radius: 6px;
  font-family: inherit;
}

.knit-msg-reply-btn:hover {
  background: var(--knit-control-active-bg);
}

.knit-msg-link {
  border: none;
  background: transparent;
  color: var(--knit-red);
  cursor: pointer;
  padding: 0;
  margin-left: auto;
}

.knit-msg-ecc-actions {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0.45rem;
  width: 100%;
  flex-basis: 100%;
  margin-top: 0.15rem;
}

.knit-msg-ecc-actions[hidden] {
  display: none !important;
}

.knit-msg-ecc-approve,
.knit-msg-ecc-reject,
.knit-msg-ecc-cancel {
  border: 1px solid #d1d5db;
  background: #f9fafb;
  color: var(--knit-text-body);
  cursor: pointer;
  padding: 0.2rem 0.65rem;
  font-size: 0.75rem;
  border-radius: 6px;
  font-family: inherit;
}

.knit-msg-ecc-approve {
  border-color: #86efac;
  background: #ecfdf5;
  color: #166534;
}

.knit-msg-ecc-approve:hover {
  background: #d1fae5;
}

.knit-msg-ecc-reject:hover {
  background: #fef2f2;
  border-color: #fecaca;
  color: #991b1b;
}

.knit-msg-ecc-cancel {
  border-color: #fcd34d;
  background: #fffbeb;
  color: #92400e;
}

.knit-msg-ecc-cancel:hover {
  background: #fef3c7;
}

.knit-msg-ecc-cancel[hidden],
.knit-msg-ecc-approve[hidden],
.knit-msg-ecc-reject[hidden] {
  display: none !important;
}

.knit-msg-unread-dot {
  display: none !important;
}

.knit-msg-empty {
  margin: 2.2rem 0;
  padding: 0.4rem 1rem;
  text-align: center;
  font-size: var(--knit-empty-size);
  font-weight: var(--knit-empty-weight);
  letter-spacing: var(--knit-empty-ls);
  line-height: var(--knit-empty-lh);
  color: var(--knit-text-muted);
}

.knit-msg-global-search {
  margin: 0.35rem 0 0.2rem;
  display: flex;
  flex-direction: column;
  gap: 0.5rem;
}

.knit-msg-global-search[hidden],
.knit-msg-global-search-hint[hidden],
.knit-msg-global-search-list[hidden] {
  display: none !important;
}

.knit-msg-global-search-btn {
  width: 100%;
  border: 1px dashed var(--knit-control-border);
  background: var(--knit-control-bg);
  color: var(--knit-control-text);
  border-radius: 10px;
  padding: 0.55rem 0.85rem;
  cursor: pointer;
  font: inherit;
  font-size: 0.84rem;
  font-weight: 650;
}

.knit-msg-global-search-btn:hover,
.knit-msg-global-search-btn:focus-visible {
  border-color: var(--knit-red, #c93030);
  color: var(--knit-red, #c93030);
  background: var(--knit-control-hover-bg, #f3f4f6);
  outline: none;
}

.knit-msg-global-search-btn:disabled {
  opacity: 0.72;
  cursor: wait;
}

.knit-msg-global-search-hint {
  margin: 0;
  text-align: center;
  font-size: 0.8rem;
  color: var(--knit-text-muted);
}

.knit-msg-global-user-actions {
  display: flex;
  flex-shrink: 0;
  align-items: center;
  gap: 0.35rem;
}

.knit-msg-global-user-actions .knit-msg-link {
  margin-left: 0;
  border: 1px solid var(--knit-control-border);
  background: var(--knit-btn-secondary-bg);
  color: var(--knit-text-body);
  border-radius: 999px;
  padding: 0.22rem 0.55rem;
  font-size: 0.72rem;
  line-height: 1.2;
}

.knit-msg-global-user-actions .knit-msg-link.is-on {
  background: color-mix(in srgb, var(--knit-red) 12%, var(--knit-panel-bg));
  border-color: color-mix(in srgb, var(--knit-red) 45%, var(--knit-panel-border));
  color: var(--knit-red);
}

.knit-mine-view {
  flex: 1 1 0%;
  min-width: 0;
  min-height: 0;
  overflow: auto !important;
  scrollbar-gutter: stable;
  background: var(--knit-page-bg);
  color: var(--knit-text-heading);
  padding: 0.9rem;
  display: flex;
  flex-direction: column;
  gap: 0.8rem;
}

.knit-mine-view [hidden] {
  display: none !important;
}

.knit-mine-view:has(.knit-biz-book) {
  overflow: hidden !important;
}

.knit-user-profile-view:has(.knit-biz-book) {
  display: flex;
  flex-direction: column;
}

.knit-biz-book {
  position: relative;
  flex: 1 1 0%;
  min-height: 0;
  display: flex;
  flex-direction: column;
  perspective: 1800px;
  overflow: hidden;
  border-radius: 12px;
}

.knit-biz-leaf--front {
  position: relative;
  z-index: 2;
  flex: 1 1 0%;
  min-height: 0;
  overflow: auto;
  display: flex;
  flex-direction: column;
  gap: 0.8rem;
  transform-origin: left center;
  transition: transform 0.62s cubic-bezier(0.22, 0.8, 0.28, 1);
  background: var(--knit-page-bg);
  backface-visibility: hidden;
}

.knit-biz-book.is-open .knit-biz-leaf--front {
  transform: rotateY(-88deg);
  pointer-events: none;
  box-shadow: 12px 0 28px rgba(0, 0, 0, 0.18);
}

.knit-biz-leaf--board {
  position: absolute;
  inset: 0;
  z-index: 1;
  display: flex;
  flex-direction: column;
  background: var(--knit-paper-bg);
  border: 1px solid var(--knit-panel-border);
  border-radius: var(--knit-radius-md);
  box-shadow: var(--knit-panel-shadow);
  padding: 0.75rem 0.85rem 0.9rem;
}

.knit-biz-leaf--board[hidden] {
  display: none !important;
}

.knit-biz-book.is-open .knit-biz-leaf--board {
  display: flex !important;
}

.knit-biz-board-toolbar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 0.5rem;
  margin-bottom: 0.55rem;
  flex-shrink: 0;
}

.knit-biz-close-btn,
.knit-biz-nav-btn {
  border: 1px solid var(--knit-control-border);
  background: var(--knit-control-bg);
  color: var(--knit-control-text);
  border-radius: 8px;
  padding: 0.32rem 0.7rem;
  cursor: pointer;
  font-size: 0.82rem;
}

.knit-biz-board-heading {
  font-size: 0.88rem;
  font-weight: 800;
  letter-spacing: 0.12em;
  color: var(--knit-text-muted);
}

.knit-biz-board-stage {
  flex: 1 1 0%;
  min-height: 0;
  display: flex;
  align-items: stretch;
  justify-content: stretch;
  background: var(--knit-paper-bg);
  border-radius: 10px;
  overflow: hidden;
}

.knit-biz-sheet {
  width: 100%;
  height: 100%;
  overflow: auto;
  padding: 1.05rem 1.1rem 1.35rem;
  box-sizing: border-box;
  background:
    repeating-linear-gradient(
      to bottom,
      transparent 0,
      transparent 27px,
      var(--knit-paper-line) 28px
    ),
    var(--knit-paper-bg);
}

.knit-biz-sheet-item {
  margin: 0 0 1.05rem;
}

.knit-biz-sheet-item:last-child {
  margin-bottom: 0;
}

.knit-biz-sheet-title {
  margin: 0 0 0.32rem;
  padding: 0 0 0.18rem;
  border-bottom: 1px solid var(--knit-paper-rule);
  font-size: 1.02rem;
  font-weight: 800;
  color: var(--knit-paper-heading);
  line-height: 1.35;
  word-break: break-word;
}

.knit-biz-sheet-note {
  margin: 0;
  font-size: 0.88rem;
  line-height: 1.75;
  color: var(--knit-paper-body);
  white-space: pre-wrap;
  word-break: break-word;
}

.knit-biz-sheet-empty {
  margin: 1.2rem 0 0;
  text-align: center;
  color: var(--knit-text-muted);
  font-size: var(--knit-empty-size);
  font-weight: var(--knit-empty-weight);
  letter-spacing: var(--knit-empty-ls);
  line-height: var(--knit-empty-lh);
}

.knit-biz-board-img {
  max-width: 100%;
  max-height: 100%;
  object-fit: contain;
  display: none;
}

.knit-biz-board-nav {
  display: none;
}

.knit-biz-pager {
  display: none;
}

.knit-biz-curl {
  position: absolute;
  right: 0;
  bottom: 0;
  z-index: 4;
  width: 78px;
  height: 78px;
  margin: 0;
  padding: 0;
  border: 0;
  background: transparent;
  cursor: pointer;
  -webkit-tap-highlight-color: transparent;
}

.knit-biz-curl[hidden] {
  display: none !important;
}

.knit-biz-curl-fold {
  position: absolute;
  right: 0;
  bottom: 0;
  width: 72px;
  height: 72px;
  background:
    linear-gradient(225deg, rgba(255, 255, 255, 0.95) 0 42%, transparent 43%),
    linear-gradient(225deg, #eee7da 43%, #cfc4b2 100%);
  clip-path: polygon(100% 0, 100% 100%, 0 100%);
  box-shadow: -8px -8px 16px rgba(0, 0, 0, 0.12);
  transition: transform 0.18s ease, filter 0.18s ease;
}

.knit-biz-curl:hover .knit-biz-curl-fold,
.knit-biz-curl:focus-visible .knit-biz-curl-fold {
  transform: scale(1.08);
  filter: brightness(1.04);
}

.knit-biz-curl-text {
  position: absolute;
  right: 8px;
  bottom: 10px;
  font-size: 0.62rem;
  font-weight: 700;
  letter-spacing: 0.04em;
  color: #6b5e4e;
  transform: rotate(-12deg);
  pointer-events: none;
}

.knit-biz-edit {
  margin-top: 0.75rem;
  padding-top: 0.65rem;
  border-top: 1px solid var(--knit-panel-border);
}

.knit-biz-edit-list {
  display: flex;
  flex-direction: column;
  gap: 0.55rem;
  margin: 0.45rem 0 0.5rem;
}

.knit-biz-edit-row {
  position: relative;
  display: flex;
  flex-direction: column;
  gap: 0.32rem;
  padding: 0.55rem 0.55rem 0.6rem;
  border-radius: 8px;
  border: 1px solid var(--knit-panel-border);
  background: #faf8f5;
}

.knit-biz-edit-title,
.knit-biz-edit-note {
  width: 100%;
  box-sizing: border-box;
  border: 1px solid var(--knit-control-border);
  border-radius: 7px;
  background: var(--knit-panel-bg);
  color: var(--knit-text-heading);
  font-family: inherit;
  font-size: 0.84rem;
}

.knit-biz-edit-title {
  padding: 0.38rem 0.5rem;
  font-weight: 700;
}

.knit-biz-edit-note {
  min-height: 4.4rem;
  padding: 0.4rem 0.5rem;
  resize: vertical;
  line-height: 1.45;
}

.knit-biz-edit-remove {
  align-self: flex-end;
  width: auto;
  height: auto;
  padding: 0.15rem 0.45rem;
  border: 0;
  border-radius: 999px;
  background: rgba(0, 0, 0, 0.08);
  color: var(--knit-text-muted);
  font-size: 0.75rem;
  line-height: 1.4;
  cursor: pointer;
}

.knit-mine-delete-panel:has(.knit-biz-edit) {
  width: min(480px, 100%);
  max-height: min(88vh, 720px);
  overflow: auto;
}

.knit-mine-profile {
  display: flex;
  align-items: center;
  gap: 0.75rem;
  background: var(--knit-panel-bg);
  border: 1px solid var(--knit-panel-border);
  box-shadow: var(--knit-panel-shadow);
  border-radius: 12px;
  padding: 0.8rem;
  flex-shrink: 0;
}

.knit-mine-edit-btn {
  margin-left: auto;
  border: 1px solid var(--knit-control-border);
  background: var(--knit-control-bg);
  border-radius: 8px;
  padding: 0.35rem 0.7rem;
  cursor: pointer;
  color: var(--knit-control-text);
}

.knit-mine-profile-actions {
  margin-left: auto;
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: flex-end;
  gap: 0.45rem;
}

.knit-mine-profile-actions .knit-mine-edit-btn {
  margin-left: 0;
}

html[data-device="desktop"] #knitMineQrScanBtn {
  display: none !important;
}

.knit-mine-qr-btn,
.knit-mine-enterprise-btn {
  border: 1px solid var(--knit-control-border);
  background: var(--knit-control-bg);
  border-radius: 8px;
  padding: 0.35rem 0.7rem;
  cursor: pointer;
  color: var(--knit-control-text);
  font-family: inherit;
  font-size: 0.82rem;
}

.knit-mine-enterprise-btn:disabled {
  opacity: 0.65;
  cursor: default;
}

.knit-mine-avatar-cluster {
  display: flex;
  align-items: center;
  gap: 0.45rem;
  flex: 0 0 auto;
}

.knit-mine-more-btn {
  display: none;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 0.05rem;
  min-width: 2.4rem;
  min-height: 2.4rem;
  margin: 0;
  padding: 0.2rem 0.35rem;
  border: 1px solid var(--knit-control-border);
  border-radius: 10px;
  background: var(--knit-control-bg);
  color: var(--knit-control-text);
  font-family: inherit;
  font-size: 0.62rem;
  font-weight: 650;
  line-height: 1.1;
  cursor: pointer;
}

.knit-mine-more-btn span:first-child {
  font-size: 1.05rem;
  line-height: 1;
}

.knit-mine-avatar-wrap {
  position: relative;
  flex: 0 0 auto;
  width: 56px;
  height: 56px;
  border-radius: 999px;
  overflow: hidden;
  isolation: isolate;
  background: #e5e7eb;
  clip-path: circle(50%);
}

.knit-mine-avatar-wrap > .knit-mine-avatar,
.knit-mine-avatar-wrap > .knit-mine-avatar--img {
  position: absolute;
  inset: 0;
}

.knit-mine-avatar-wrap > .knit-mine-avatar {
  z-index: 1;
}

.knit-mine-avatar-wrap > .knit-mine-avatar--img:not([hidden]) {
  z-index: 2;
  display: block !important;
}

.knit-mine-avatar-wrap > .knit-mine-avatar:not(.knit-mine-avatar--img):not([hidden]) {
  display: inline-flex !important;
}

.knit-mine-avatar-wrap > .knit-mine-avatar[hidden],
.knit-mine-avatar-wrap > .knit-mine-avatar--img[hidden],
.knit-mine-edit-avatar-wrap > .knit-mine-avatar[hidden],
.knit-mine-edit-avatar-wrap > .knit-mine-avatar--img[hidden] {
  display: none !important;
}

.knit-mine-avatar {
  width: 56px;
  height: 56px;
  border-radius: 999px;
  background: #94a3b8;
  color: #fff;
  font-weight: 700;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  flex: 0 0 auto;
  font-size: 1.15rem;
  line-height: 1;
}

.knit-mine-avatar--img {
  object-fit: cover;
  object-position: center;
  display: block;
  width: 100%;
  height: 100%;
  background: #e5e7eb;
  border-radius: inherit;
}

.knit-mine-avatar-change {
  position: absolute;
  z-index: 3;
  left: 0;
  right: 0;
  bottom: 0;
  border: none;
  border-radius: 0 0 999px 999px;
  background: rgba(17, 24, 39, 0.62);
  color: #fff;
  font-size: 0.62rem;
  line-height: 1.2;
  padding: 0.18rem 0;
  cursor: pointer;
  opacity: 0;
  transition: opacity 0.15s ease;
}

.knit-mine-avatar-wrap:hover .knit-mine-avatar-change,
.knit-mine-avatar-wrap:focus-within .knit-mine-avatar-change {
  opacity: 1;
}

.knit-mine-edit-avatar-row {
  display: flex;
  align-items: center;
  gap: 0.75rem;
  margin-top: 0.65rem;
}

.knit-mine-edit-avatar-wrap {
  position: relative;
  flex: 0 0 auto;
  width: 56px;
  height: 56px;
  border-radius: 999px;
  overflow: hidden;
  isolation: isolate;
  background: #e5e7eb;
  clip-path: circle(50%);
}

.knit-mine-edit-avatar-wrap > .knit-mine-avatar,
.knit-mine-edit-avatar-wrap > .knit-mine-avatar--img {
  position: absolute;
  inset: 0;
}

.knit-mine-edit-avatar-actions {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 0.25rem;
}

.knit-mine-edit-avatar-btn {
  border: 1px solid var(--knit-control-border);
  background: var(--knit-control-bg);
  color: var(--knit-control-text);
  border-radius: 8px;
  padding: 0.28rem 0.55rem;
  font-size: 0.78rem;
  cursor: pointer;
}

.knit-mine-edit-avatar-clear {
  border: none;
  background: transparent;
  color: var(--knit-text-muted);
  font-size: 0.75rem;
  cursor: pointer;
  padding: 0;
  text-decoration: underline;
}

.knit-mine-edit-avatar-hint {
  margin: 0;
  font-size: var(--knit-hint-size);
  font-weight: var(--knit-hint-weight);
  letter-spacing: var(--knit-hint-ls);
  line-height: var(--knit-hint-lh);
  color: var(--knit-text-muted);
}

.knit-mine-profile-main {
  min-width: 0;
}

.knit-mine-name {
  margin: 0;
  font-size: 1rem;
  color: var(--knit-text-heading);
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 0.35rem 0.45rem;
}

.knit-enterprise-badge {
  display: inline-flex;
  align-items: center;
  gap: 0.2rem;
  flex: 0 0 auto;
  padding: 0.08rem 0.42rem 0.08rem 0.28rem;
  border-radius: 999px;
  border: 1px solid #1d4ed8;
  background: #eff6ff;
  color: #1d4ed8;
  font-size: 0.68rem;
  font-weight: 700;
  letter-spacing: 0.02em;
  line-height: 1.2;
}

.knit-enterprise-badge[hidden] {
  display: none !important;
}

.knit-enterprise-badge-icon {
  width: 0.92rem;
  height: 0.92rem;
  flex: 0 0 auto;
}

.knit-mine-enterprise-name {
  margin: 0.22rem 0 0;
  font-size: 0.82rem;
  font-weight: 650;
  color: var(--knit-text-heading);
}

.knit-mine-enterprise-name[hidden] {
  display: none !important;
}

html[data-knit-theme="dark"] .knit-enterprise-badge {
  border-color: #93c5fd;
  background: rgba(37, 99, 235, 0.22);
  color: #bfdbfe;
}

.knit-mine-bio {
  margin: 0.25rem 0;
  font-size: 0.82rem;
  color: var(--knit-text-muted);
}

.knit-mine-id {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 0.2rem 0.35rem;
  margin: 0;
  font-size: 0.78rem;
  color: var(--knit-text-muted);
}

.knit-mine-notes-stat {
  margin: 0.35rem 0 0;
  font-size: 0.82rem;
  font-weight: 650;
  color: var(--knit-text-muted);
  font-variant-numeric: tabular-nums;
  line-height: 1.35;
}

.knit-mine-notes-stat > span {
  font-weight: 780;
  color: var(--knit-text-body);
}

.knit-mine-wall {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 0.35rem 0.5rem;
  margin-top: 0.35rem;
  font-size: 0.78rem;
  color: var(--knit-text-muted);
}

.knit-mine-wall-label {
  flex: 0 0 auto;
  color: var(--knit-text-muted);
}

.knit-mine-wall-url {
  min-width: 0;
  flex: 1 1 12rem;
  color: #2563eb;
  text-decoration: none;
  word-break: break-all;
}

.knit-mine-wall-url:hover {
  text-decoration: underline;
}

.knit-mine-wall-copy-btn {
  flex: 0 0 auto;
  border: 1px solid var(--knit-control-border);
  background: var(--knit-control-bg);
  border-radius: 6px;
  padding: 0.15rem 0.45rem;
  font-size: 0.72rem;
  cursor: pointer;
  color: var(--knit-control-text);
}

.knit-mine-wall-copy-btn:hover {
  background: var(--knit-control-hover-bg);
}

.knit-mine-wall-copy-btn:disabled {
  opacity: 0.45;
  cursor: not-allowed;
}

.knit-mine-wall-copy-btn.is-copied {
  border-color: #86efac;
  color: #15803d;
}

.knit-mine-stats {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 0.55rem;
}

.knit-mine-channel-switch,
.knit-home-channel-switch {
  display: flex;
  align-items: stretch;
  gap: 0.22rem;
  width: 100%;
  padding: 0.18rem;
  border: 1px solid var(--knit-control-border);
  border-radius: 10px;
  background: var(--knit-control-bg);
  box-sizing: border-box;
}

.knit-home-channel-switch {
  display: none !important;
}

.knit-mine-channel-switch {
  flex-shrink: 0;
  margin: 0 0 0.65rem;
}

.knit-mine-channel-tab,
.knit-home-channel-tab {
  flex: 1 1 0;
  min-width: 0;
  min-height: 2.35rem;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 0.35rem;
  margin: 0;
  padding: 0.35rem 0.45rem;
  border: 0;
  border-radius: 8px;
  background: transparent;
  color: var(--knit-text-muted);
  font-family: inherit;
  font-size: 0.88rem;
  font-weight: 650;
  cursor: pointer;
  -webkit-tap-highlight-color: transparent;
}

.knit-mine-channel-tab-num {
  font-variant-numeric: tabular-nums;
  font-size: 0.78rem;
  font-weight: 700;
  color: inherit;
  opacity: 0.82;
}

.knit-mine-channel-tab:hover,
.knit-home-channel-tab:hover {
  color: var(--knit-text-heading);
}

.knit-mine-channel-tab.is-active,
.knit-home-channel-tab.is-active {
  background: var(--knit-panel-bg);
  color: var(--knit-text-heading);
  box-shadow: 0 1px 3px rgba(15, 23, 42, 0.12);
}

html[data-knit-theme="dark"] .knit-mine-channel-tab.is-active,
html[data-knit-theme="dark"] .knit-home-channel-tab.is-active {
  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.35);
}

/* 三端分段按钮：滑动选中条（与手机/平板一致） */
.knit-mine-channel-switch.knit-seg-row,
.knit-page-channel-switch.knit-seg-row,
.knit-mine-option-row.knit-seg-row {
  position: relative;
  isolation: isolate;
  overflow: hidden;
  touch-action: pan-x;
  user-select: none;
  -webkit-user-select: none;
}

.knit-mine-channel-switch.knit-seg-row > .knit-seg-thumb,
.knit-page-channel-switch.knit-seg-row > .knit-seg-thumb,
.knit-mine-option-row.knit-seg-row > .knit-seg-thumb {
  position: absolute;
  z-index: 0;
  left: 0;
  top: 0;
  width: var(--knit-seg-w, 0px);
  height: var(--knit-seg-h, 0px);
  margin: 0;
  pointer-events: none;
  flex: 0 0 auto;
  transform: translate3d(var(--knit-seg-x, 0px), var(--knit-seg-y, 0px), 0);
  transition:
    transform 0.22s cubic-bezier(0.22, 1, 0.36, 1),
    width 0.22s cubic-bezier(0.22, 1, 0.36, 1),
    height 0.22s cubic-bezier(0.22, 1, 0.36, 1),
    opacity 0.16s ease;
  will-change: transform;
}

.knit-mine-channel-switch.knit-seg-row > .knit-seg-thumb,
.knit-page-channel-switch.knit-seg-row > .knit-seg-thumb {
  border-radius: 8px;
  background: var(--knit-panel-bg, #fff);
  box-shadow: 0 1px 3px rgba(15, 23, 42, 0.12);
}

html[data-knit-theme="dark"] .knit-mine-channel-switch.knit-seg-row > .knit-seg-thumb,
html[data-knit-theme="dark"] .knit-page-channel-switch.knit-seg-row > .knit-seg-thumb {
  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.35);
}

.knit-mine-option-row.knit-seg-row > .knit-seg-thumb {
  border-radius: 999px;
  background: var(--knit-chrome-active);
  box-shadow: 0 1px 4px rgba(0, 0, 0, 0.08);
}

.knit-seg-row.is-seg-jump > .knit-seg-thumb,
.knit-mine-channel-switch.is-seg-dragging > .knit-seg-thumb,
.knit-page-channel-switch.is-seg-dragging > .knit-seg-thumb,
.knit-mine-option-row.is-seg-dragging > .knit-seg-thumb {
  transition: none;
}

.knit-mine-channel-switch.is-seg-empty > .knit-seg-thumb,
.knit-page-channel-switch.is-seg-empty > .knit-seg-thumb,
.knit-mine-option-row.is-seg-empty > .knit-seg-thumb {
  opacity: 0;
}

.knit-mine-channel-switch.knit-seg-row > .knit-mine-channel-tab,
.knit-mine-channel-switch.knit-seg-row > .knit-mine-channel-tab.is-active,
.knit-page-channel-switch.knit-seg-row > .knit-mine-channel-tab,
.knit-page-channel-switch.knit-seg-row > .knit-mine-channel-tab.is-active {
  position: relative;
  z-index: 1;
  background: transparent;
  box-shadow: none;
}

.knit-mine-option-row.knit-seg-row {
  gap: 0;
  padding: 0.14rem;
  background: transparent;
  border: 0;
  border-radius: 0;
  box-sizing: border-box;
  touch-action: pan-y;
}

.knit-mine-option-row.knit-seg-row.knit-seg-has-thumb > .knit-mine-option-btn,
.knit-mine-option-row.knit-seg-row.knit-seg-has-thumb > .knit-mine-option-btn:hover,
.knit-mine-option-row.knit-seg-row.knit-seg-has-thumb > .knit-mine-option-btn:focus-visible,
.knit-mine-option-row.knit-seg-row.knit-seg-has-thumb > .knit-mine-option-btn.is-active,
.knit-mine-option-row.knit-seg-row.knit-seg-has-thumb > .knit-mine-option-btn[aria-expanded="true"] {
  position: relative;
  z-index: 1;
  background: transparent;
  border-color: transparent;
}

.knit-mine-option-row.knit-seg-row.knit-seg-has-thumb > .knit-mine-option-btn.is-active,
.knit-mine-option-row.knit-seg-row.knit-seg-has-thumb > .knit-mine-option-btn[aria-expanded="true"] {
  color: var(--knit-chrome-active-text);
  font-size: 0.92rem;
  font-weight: 780;
}

.knit-channel-pager {
  width: 100%;
  max-width: 100%;
  min-width: 0;
  overflow: hidden;
  touch-action: pan-y;
  background: var(--knit-main-bg);
}

.knit-channel-pager__track {
  display: flex;
  align-items: stretch;
  width: 300%;
  transform: translate3d(-33.333%, 0, 0);
  backface-visibility: hidden;
}

.knit-channel-pager.is-dragging .knit-channel-pager__track {
  transition: none;
  will-change: transform;
}

.knit-channel-pager.is-animating .knit-channel-pager__track {
  transition: transform 0.28s cubic-bezier(0.22, 1, 0.36, 1);
  will-change: transform;
}

.knit-channel-pager__pane,
.knit-channel-pager__slot {
  flex: 0 0 33.333%;
  width: 33.333%;
  min-width: 0;
  box-sizing: border-box;
}

.knit-channel-pager__pane {
  pointer-events: none;
  overflow: hidden;
  background: var(--knit-main-bg);
}

.knit-scrollport > .knit-channel-pager .knit-channel-pager__pane {
  padding-top: calc(var(--knit-top-overlay, 0px) + var(--knit-chrome-gap, 0px));
  padding-left: max(var(--knit-page-pad-x, 0px), env(safe-area-inset-left, 0px));
  padding-right: max(var(--knit-page-pad-x, 0px), env(safe-area-inset-right, 0px));
}

.knit-channel-pager__hint {
  display: flex;
  align-items: center;
  justify-content: center;
  min-height: 12rem;
  padding: 1rem;
  color: var(--knit-text-muted);
  font-size: 1.05rem;
  font-weight: 700;
}

.knit-channel-peek-grid {
  display: grid;
  grid-template-columns: repeat(var(--knit-grid-cols, 3), minmax(0, 1fr));
  gap: var(--knit-grid-gap, 10px);
  padding: 0;
  align-content: start;
}

.knit-channel-peek-cell {
  position: relative;
  min-width: 0;
  overflow: hidden;
  border-radius: 8px;
  background: var(--knit-control-bg);
}

.knit-channel-peek-cell img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.knit-mine-works-list.knit-page-channel-enter {
  animation: knit-page-channel-enter 0.22s ease-out;
}

@keyframes knit-page-channel-enter {
  from {
    opacity: 0.52;
    transform: translateX(var(--knit-channel-enter-x, 14px));
  }
  to {
    opacity: 1;
    transform: translateX(0);
  }
}

.knit-mine-fold {
  background: var(--knit-panel-bg);
  border: 1px solid var(--knit-panel-border);
  box-shadow: var(--knit-panel-shadow);
  border-radius: 12px;
  overflow: hidden;
  display: flex;
  flex-direction: column;
  flex: 1 0 auto;
  min-height: auto;
}

.knit-mine-fold-head {
  width: 100%;
  border: none;
  background: var(--knit-panel-bg);
  padding: 0.65rem 0.75rem;
  display: flex;
  align-items: center;
  justify-content: space-between;
  font-size: 0.92rem;
  font-weight: 700;
  color: var(--knit-text-heading);
  cursor: pointer;
  flex-shrink: 0;
}

.knit-mine-fold-arrow {
  font-size: 0.75rem;
  color: var(--knit-text-muted);
}

.knit-mine-history-fold-note {
  margin-left: auto;
  margin-right: 0.45rem;
  font-size: 0.72rem;
  font-weight: 600;
  color: var(--knit-text-muted);
}

.knit-mine-history {
  padding: 0 0.75rem 0.85rem;
  background: var(--knit-panel-bg);
  border-bottom: 1px solid var(--knit-panel-border);
}

.knit-mine-history-toolbar {
  display: flex;
  align-items: center;
  justify-content: flex-end;
  gap: 0.5rem;
  margin-bottom: 0.45rem;
}

.knit-mine-history-toolbar:not(:has(button:not([hidden]))) {
  display: none;
}

.knit-mine-option-row {
  display: flex;
  flex-wrap: nowrap;
  align-items: stretch;
  gap: 0.2rem;
  width: 100%;
  padding: 0.45rem 0.15rem 0.12rem;
  box-sizing: border-box;
  flex-shrink: 0;
}

/* 大图标 / 详细信息都要显示「我的作品 / 我的标记 / 观看记录」 */
#knitMineView .knit-mine-option-row,
#knitMineView .knit-mine-option-row[hidden] {
  display: flex !important;
  visibility: visible;
  opacity: 1;
}

.knit-mine-option-btn {
  appearance: none;
  flex: 1 1 0;
  min-width: 2.4rem;
  height: 2rem;
  margin: 0;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border: 0;
  background: transparent;
  color: var(--knit-chrome-text-muted);
  border-radius: 999px;
  padding: 0 0.35rem;
  font-size: 0.92rem;
  font-weight: 550;
  font-family: inherit;
  line-height: 1.15;
  text-align: center;
  white-space: nowrap;
  cursor: pointer;
  position: relative;
  -webkit-tap-highlight-color: transparent;
  transition: color 0.15s, font-weight 0.15s;
}

.knit-mine-option-btn:hover,
.knit-mine-option-btn:focus-visible {
  background: transparent;
  color: var(--knit-text-body);
}

html[data-knit-theme="dark"] .knit-mine-option-btn:hover,
html[data-knit-theme="dark"] .knit-mine-option-btn:focus-visible {
  background: transparent;
  color: var(--knit-text-body);
}

.knit-mine-option-btn:active {
  transform: none;
}

.knit-mine-option-row.is-seg-dragging > .knit-mine-option-btn:active {
  transform: none;
}

.knit-mine-option-btn.is-active,
.knit-mine-option-btn[aria-expanded="true"] {
  background: var(--knit-chrome-active);
  color: var(--knit-chrome-active-text);
  font-size: 0.92rem;
  font-weight: 780;
}

.knit-mine-option-num {
  display: inline-block;
  min-width: 1.1em;
  margin-left: 0.28rem;
  font-variant-numeric: tabular-nums;
}

.knit-mine-like-stat {
  margin-left: 0.5rem;
  font-size: 0.82rem;
  font-weight: 700;
  color: var(--knit-red);
  font-variant-numeric: tabular-nums;
  white-space: nowrap;
}

.knit-mine-like-count {
  margin-left: auto;
  font-size: 0.72rem;
  font-weight: 700;
  color: var(--knit-red);
  font-variant-numeric: tabular-nums;
  white-space: nowrap;
}

.knit-mine-history-title {
  display: block;
  margin: 0 0 0.12rem;
  font-size: 0.92rem;
  font-weight: 700;
  color: var(--knit-text-heading);
}

.knit-mine-history-hint {
  margin: 0;
  font-size: var(--knit-hint-size);
  font-weight: var(--knit-hint-weight);
  line-height: var(--knit-hint-lh);
  letter-spacing: var(--knit-hint-ls);
  color: var(--knit-text-muted);
}

.knit-mine-history-list {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(148px, 1fr));
  gap: 0.55rem;
}

.knit-mine-history-card {
  position: relative;
  margin: 0;
  border: 1px solid var(--knit-panel-border);
  border-radius: 10px;
  overflow: hidden;
  background: var(--knit-page-bg);
  cursor: pointer;
}

.knit-mine-history-card:hover {
  border-color: var(--knit-control-active-border, #d1d5db);
}

.knit-mine-history-thumb {
  display: block;
  width: 100%;
  aspect-ratio: 3 / 4;
  object-fit: cover;
  background: var(--knit-panel-border);
}

.knit-mine-history-meta {
  padding: 0.4rem 0.45rem 0.5rem;
}

.knit-mine-history-name {
  margin: 0;
  font-size: 0.78rem;
  font-weight: 700;
  color: var(--knit-text-heading);
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.knit-mine-history-time {
  margin: 0.12rem 0 0;
  font-size: 0.7rem;
  color: var(--knit-text-muted);
}

.knit-mine-stat-card {
  background: var(--knit-panel-bg);
  border: 1px solid var(--knit-panel-border);
  border-radius: 10px;
  padding: 0.65rem 0.35rem;
  text-align: center;
  cursor: pointer;
  transition: border-color 0.15s, box-shadow 0.15s;
}

.knit-mine-stat-card:hover {
  border-color: var(--knit-control-active-border);
}

.knit-mine-stat-card.is-active {
  border-color: var(--knit-red);
  box-shadow: 0 0 0 1px rgba(201, 48, 48, 0.25) inset;
}

.knit-mine-stat-num {
  margin: 0;
  font-size: 1.05rem;
  font-weight: 700;
  color: var(--knit-text-heading);
}

.knit-mine-stat-label {
  margin: 0.2rem 0 0;
  font-size: 0.75rem;
  color: var(--knit-text-muted);
}

#knitMineStatsWrap:not([hidden]),
#knitPeerStatsWrap:not([hidden]) {
  flex-shrink: 0;
}

.knit-mine-fold > .knit-mine-works {
  flex: 1 0 auto;
  min-height: auto;
  overflow: visible;
  margin-top: 0;
  border-top: 0;
  border-radius: 0;
  padding: 0.75rem;
  background: var(--knit-panel-bg);
}

.knit-mine-works {
  background: var(--knit-panel-bg);
  padding: 0.75rem;
}

.knit-mine-yarn-insight {
  margin: 0 0 0.85rem;
  padding: 0.75rem 0.8rem 0.85rem;
  border: 1px solid var(--knit-panel-border);
  border-radius: 12px;
  background: var(--knit-panel-bg);
  box-shadow: var(--knit-panel-shadow);
}

.knit-mine-yarn-insight__head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 0.6rem;
  flex-wrap: wrap;
}

.knit-mine-yarn-insight__head h3 {
  margin: 0;
  font-size: 0.95rem;
}

.knit-mine-yarn-insight__viewbar {
  display: flex;
  align-items: center;
  gap: 0.55rem;
  flex-wrap: wrap;
  margin-top: 0.65rem;
}

.knit-mine-yarn-insight__viewlabel {
  font-size: 0.75rem;
  font-weight: 650;
  color: var(--knit-text-muted);
}

.knit-mine-yarn-insight__tabs {
  display: inline-flex;
  gap: 0.28rem;
  flex-wrap: wrap;
}

.knit-mine-yarn-insight__tab {
  border: 1px solid var(--knit-control-border);
  background: var(--knit-control-bg);
  color: var(--knit-control-text);
  border-radius: 999px;
  padding: 0.22rem 0.7rem;
  font: inherit;
  font-size: 0.75rem;
  font-weight: 650;
  cursor: pointer;
}

.knit-mine-yarn-insight__tab.is-active {
  background: var(--knit-chrome-active, #111827);
  border-color: transparent;
  color: var(--knit-chrome-active-text, #fff);
}

.knit-mine-yarn-insight__lead,
.knit-mine-yarn-insight__empty {
  margin: 0.4rem 0 0;
  font-size: 0.78rem;
  color: var(--knit-text-muted);
  line-height: 1.45;
}

.knit-mine-yarn-insight__tips {
  display: flex;
  flex-direction: column;
  gap: 0.4rem;
  margin-top: 0.65rem;
}

.knit-mine-yarn-insight__tip {
  margin: 0;
  padding: 0.5rem 0.65rem;
  border-radius: 10px;
  font-size: 0.8rem;
  line-height: 1.45;
  background: color-mix(in srgb, var(--knit-control-hover-bg, #f3f4f6) 80%, transparent);
}

.knit-mine-yarn-insight__tip.is-warn {
  background: color-mix(in srgb, #f59e0b 16%, var(--knit-panel-bg));
  color: #92400e;
}

.knit-mine-yarn-insight__lists {
  display: grid;
  grid-template-columns: 1fr 1fr 1fr;
  gap: 0.65rem;
  margin-top: 0.7rem;
}

.knit-mine-yarn-insight__col h4 {
  margin: 0 0 0.35rem;
  font-size: 0.75rem;
  color: var(--knit-text-muted);
}

.knit-mine-yarn-insight__item {
  display: flex;
  justify-content: space-between;
  gap: 0.45rem;
  font-size: 0.78rem;
  line-height: 1.4;
  padding: 0.22rem 0;
}

.knit-mine-yarn-insight__item strong {
  font-weight: 650;
}

.knit-mine-yarn-insight__meta {
  flex-shrink: 0;
  color: var(--knit-text-muted);
  white-space: nowrap;
}

@media (max-width: 720px) {
  .knit-mine-yarn-insight__lists {
    grid-template-columns: 1fr;
  }
}

html[data-knit-theme="dark"] .knit-mine-yarn-insight__tip.is-warn {
  background: color-mix(in srgb, #f59e0b 22%, var(--knit-panel-bg));
  color: #fde68a;
}

.knit-heat-channels {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 0.55rem;
  margin-top: 0.7rem;
}

.knit-heat-channel {
  padding: 0.55rem 0.65rem 0.6rem;
  border: 1px solid var(--knit-panel-border);
  border-radius: 10px;
  background: color-mix(in srgb, var(--knit-control-hover-bg, #f3f4f6) 55%, transparent);
}

.knit-heat-channel.is-hot {
  border-color: color-mix(in srgb, var(--knit-red, #c93030) 35%, var(--knit-panel-border));
}

.knit-heat-channel__top {
  display: flex;
  justify-content: space-between;
  gap: 0.4rem;
  align-items: baseline;
}

.knit-heat-channel__top strong {
  font-size: 0.86rem;
}

.knit-heat-channel__top span {
  font-size: 0.72rem;
  color: var(--knit-text-muted);
  white-space: nowrap;
}

.knit-heat-channel__bar {
  margin: 0.4rem 0 0.28rem;
  height: 6px;
  border-radius: 999px;
  background: color-mix(in srgb, var(--knit-panel-border) 80%, transparent);
  overflow: hidden;
}

.knit-heat-channel__bar i {
  display: block;
  height: 100%;
  border-radius: inherit;
  background: var(--knit-red, #c93030);
}

.knit-heat-channel__meta {
  margin: 0;
  font-size: 0.72rem;
  color: var(--knit-text-muted);
  line-height: 1.4;
}

.knit-heat-audiences {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 0.55rem;
  margin-top: 0.75rem;
}

.knit-heat-audience {
  padding: 0.55rem 0.65rem 0.65rem;
  border: 1px solid var(--knit-panel-border);
  border-radius: 10px;
}

.knit-heat-audience h4 {
  margin: 0 0 0.4rem;
  font-size: 0.78rem;
  color: var(--knit-text-muted);
}

.knit-heat-audience__row {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  gap: 0.35rem 0.5rem;
  align-items: center;
  margin-top: 0.35rem;
  font-size: 0.75rem;
}

.knit-heat-audience__row span:last-child {
  color: var(--knit-text-muted);
  white-space: nowrap;
}

.knit-heat-audience__track {
  grid-column: 1 / -1;
  height: 5px;
  border-radius: 999px;
  background: color-mix(in srgb, var(--knit-panel-border) 80%, transparent);
  overflow: hidden;
}

.knit-heat-audience__track i {
  display: block;
  height: 100%;
  border-radius: inherit;
  background: var(--knit-pill-active-bg);
}

.knit-heat-audience__empty {
  margin: 0.2rem 0 0;
  font-size: 0.74rem;
  color: var(--knit-text-muted);
}

@media (max-width: 720px) {
  .knit-heat-channels,
  .knit-heat-audiences {
    grid-template-columns: 1fr;
  }
}

html[data-knit-theme="dark"] .knit-heat-audience__track i {
  background: #e5e7eb;
}

.knit-heat-visual {
  margin-top: 0.75rem;
  display: flex;
  flex-direction: column;
  gap: 0.85rem;
}

.knit-heat-visual[hidden] {
  display: none;
}

.knit-heat-chart {
  padding: 0.7rem 0.75rem 0.8rem;
  border: 1px solid var(--knit-panel-border);
  border-radius: 10px;
  background: color-mix(in srgb, var(--knit-control-hover-bg, #f3f4f6) 40%, transparent);
}

.knit-heat-chart h4 {
  margin: 0 0 0.55rem;
  font-size: 0.78rem;
  color: var(--knit-text-muted);
}

.knit-heat-chart__empty {
  margin: 0;
  font-size: 0.76rem;
  color: var(--knit-text-muted);
}

.knit-heat-pie-wrap {
  display: flex;
  align-items: center;
  gap: 0.9rem;
  flex-wrap: wrap;
}

.knit-heat-pie-wrap svg {
  flex: 0 0 auto;
  display: block;
}

.knit-heat-legend {
  display: flex;
  flex-direction: column;
  gap: 0.32rem;
  min-width: 8.5rem;
  flex: 1 1 10rem;
}

.knit-heat-legend__row {
  display: grid;
  grid-template-columns: 0.65rem minmax(0, 1fr) auto;
  gap: 0.4rem;
  align-items: center;
  font-size: 0.74rem;
}

.knit-heat-legend__swatch {
  width: 0.65rem;
  height: 0.65rem;
  border-radius: 2px;
}

.knit-heat-legend__row span:last-child {
  color: var(--knit-text-muted);
  white-space: nowrap;
}

.knit-heat-pies {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
  gap: 0.65rem;
}

.knit-heat-bar svg {
  display: block;
  width: 100%;
  height: auto;
}

.knit-heat-tree {
  list-style: none;
  margin: 0;
  padding: 0;
}

.knit-heat-tree ul {
  list-style: none;
  margin: 0.1rem 0 0;
  padding: 0 0 0 1.05rem;
}

.knit-heat-tree li {
  position: relative;
  padding: 0.18rem 0 0.18rem 0.85rem;
}

.knit-heat-tree li::before {
  content: "";
  position: absolute;
  left: 0;
  top: 0;
  width: 0.7rem;
  height: 0.82rem;
  border-left: 1px solid var(--knit-panel-border);
  border-bottom: 1px solid var(--knit-panel-border);
}

.knit-heat-tree > li::before {
  display: none;
}

.knit-heat-tree li:last-child::after {
  content: "";
  position: absolute;
  left: 0;
  top: 0.82rem;
  bottom: 0;
  width: 1px;
  background: var(--knit-panel-bg);
}

.knit-heat-tree__node {
  display: inline-flex;
  align-items: baseline;
  gap: 0.45rem;
  max-width: 100%;
  padding: 0.18rem 0.5rem;
  border: 1px solid var(--knit-panel-border);
  border-radius: 8px;
  background: var(--knit-panel-bg);
  font-size: 0.78rem;
  line-height: 1.4;
}

.knit-heat-tree__node strong {
  font-weight: 650;
}

.knit-heat-tree__node span {
  color: var(--knit-text-muted);
  white-space: nowrap;
}

.knit-heat-tree > li > .knit-heat-tree__node {
  border-color: color-mix(in srgb, var(--knit-red, #c93030) 28%, var(--knit-panel-border));
}

.knit-mine-works-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 0.45rem;
}

.knit-mine-works-head h3 {
  margin: 0;
  font-size: 0.95rem;
}

.knit-mine-works-head-actions {
  display: flex;
  align-items: center;
  gap: 0.4rem;
  flex-shrink: 0;
}

.knit-mine-work-nick-tag {
  display: inline-block;
  margin-right: 0.35rem;
  padding: 0.06rem 0.35rem;
  font-size: 0.68rem;
  font-weight: 600;
  color: #0f766e;
  background: #f0fdfa;
  border-radius: 4px;
}

.knit-mine-works-toolbar {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0.45rem;
  margin-bottom: 0.55rem;
}

.knit-mine-works-search {
  flex: 1 1 160px;
  min-width: 0;
  padding: 0.38rem 0.62rem;
  font-size: 0.82rem;
  font-family: inherit;
  border: 1px solid var(--knit-control-border);
  border-radius: 8px;
  background: var(--knit-input-bg);
  color: var(--knit-input-text);
}

.knit-mine-works-search:focus {
  outline: 2px solid rgba(59, 130, 246, 0.35);
  border-color: #60a5fa;
}

.knit-mine-channel-select {
  display: none;
  flex: 0 0 auto;
  max-width: 7.2rem;
  min-height: 1.85rem;
  padding: 0.22rem 0.4rem;
  font: inherit;
  font-size: 0.78rem;
  font-weight: 600;
  color: var(--knit-control-text);
  background: var(--knit-control-bg);
  border: 1px solid var(--knit-control-border);
  border-radius: 7px;
}

.knit-mine-works-search::placeholder {
  color: var(--knit-text-subtle);
}

.knit-mine-works-view-toggle {
  display: inline-flex;
  align-items: stretch;
  border: 1px solid var(--knit-control-border);
  border-radius: 8px;
  overflow: hidden;
  flex-shrink: 0;
}

.knit-mine-view-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 2rem;
  height: 2rem;
  padding: 0;
  font-family: inherit;
  color: var(--knit-text-muted);
  background: var(--knit-control-bg);
  border: 0;
  border-right: 1px solid var(--knit-control-border);
  cursor: pointer;
}

.knit-mine-view-icon {
  width: 1rem;
  height: 1rem;
  display: block;
}

.knit-mine-view-btn:last-child {
  border-right: 0;
}

.knit-mine-view-btn:hover {
  background: var(--knit-control-hover-bg);
}

.knit-mine-view-btn.is-active {
  color: var(--knit-pill-active-text);
  background: var(--knit-pill-active-bg);
}

.knit-mine-view-btn.is-active:hover {
  background: var(--knit-pill-active-bg);
  filter: brightness(1.08);
}

.knit-mine-series-bar {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0.45rem;
  margin: 0.35rem 0 0.65rem;
}

.knit-mine-series-bar[hidden] {
  display: none !important;
}

.knit-mine-series-pill {
  padding: 0.28rem 0.68rem;
  font-size: 0.76rem;
  font-weight: 600;
  font-family: inherit;
  color: var(--knit-text-body);
  background: var(--knit-tag-bg);
  border: 1px solid var(--knit-control-border);
  border-radius: 999px;
  cursor: pointer;
}

.knit-mine-series-pill:hover {
  background: var(--knit-control-hover-bg);
}

.knit-mine-series-pill.is-active {
  color: var(--knit-pill-active-text);
  background: var(--knit-pill-active-bg);
  border-color: var(--knit-pill-active-bg);
}

.knit-mine-series-group {
  grid-column: 1 / -1;
  width: 100%;
  min-width: 0;
  margin-bottom: 0.85rem;
}

.knit-mine-series-group-title {
  margin: 0 0 0.45rem;
  padding: 0.15rem 0.1rem;
  font-size: 0.82rem;
  font-weight: 700;
  color: var(--knit-text-body);
  border-bottom: 1px solid var(--knit-divider);
}

.knit-mine-series-group-list {
  display: flex;
  flex-direction: column;
  gap: 0.55rem;
}

.knit-mine-work-series-tag {
  display: inline-block;
  margin-right: 0.35rem;
  padding: 0.06rem 0.35rem;
  font-size: 0.68rem;
  font-weight: 600;
  color: #1d4ed8;
  background: #eff6ff;
  border-radius: 4px;
}

.knit-mine-work-vis-tag {
  display: inline-block;
  margin-right: 0.35rem;
  padding: 0.06rem 0.35rem;
  font-size: 0.68rem;
  font-weight: 600;
  color: #92400e;
  background: #fffbeb;
  border-radius: 4px;
}

.knit-mine-refresh-btn {
  border: 1px solid var(--knit-control-border);
  background: var(--knit-control-bg);
  color: var(--knit-control-text);
  border-radius: 8px;
  padding: 0.28rem 0.58rem;
  cursor: pointer;
}

.knit-mine-works .knit-channel-pager,
.knit-mine-works .knit-channel-pager__pane,
.knit-mine-works .knit-channel-pager__slot {
  background: transparent;
}

.knit-mine-works .knit-channel-pager__hint {
  min-height: 8rem;
}

.knit-mine-works .knit-channel-peek-grid {
  grid-template-columns: repeat(2, minmax(0, 1fr));
}

.knit-mine-works-list {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 0.6rem;
  min-width: 0;
  contain: layout;
}

.knit-mine-works-list:has(> .knit-mine-series-group) {
  display: flex;
  flex-direction: column;
  gap: 0.85rem;
}

.knit-mine-list-surface {
  width: 100%;
  min-width: 0;
  min-height: 12rem;
  touch-action: pan-y;
}

/* 「我的」：资料与标签固定，仅下方作品列表滚动；滚轮始终显示（内容少也有） */
#knitMineView.knit-mine-view,
#knitMineView.knit-mine-view:has(.knit-biz-book) {
  overflow: hidden !important;
}

#knitMineView .knit-mine-profile,
#knitMineView .knit-mine-option-row {
  flex-shrink: 0;
}

#knitMineView .knit-biz-leaf--front {
  overflow: hidden;
}

#knitMineView .knit-mine-fold {
  flex: 1 1 0%;
  min-height: 0;
  overflow: hidden;
}

#knitMineView .knit-mine-fold > .knit-mine-works {
  flex: 1 1 0%;
  min-height: 0;
  overflow: hidden;
  display: flex;
  flex-direction: column;
}

#knitMineView .knit-mine-channel-switch,
#knitMineView .knit-mine-works-head,
#knitMineView .knit-mine-works-toolbar,
#knitMineView .knit-mine-series-bar {
  flex-shrink: 0;
}

#knitMineView .knit-mine-works > .knit-mine-list-surface,
#knitMineView .knit-mine-works > .knit-channel-pager {
  flex: 1 1 0%;
  min-height: 0;
  align-self: stretch;
}

#knitMineView .knit-mine-works > .knit-channel-pager {
  display: flex;
  flex-direction: column;
}

#knitMineView .knit-mine-works > .knit-channel-pager > .knit-channel-pager__track {
  flex: 1 1 0%;
  min-height: 0;
  height: 100%;
  align-items: stretch;
}

#knitMineView .knit-channel-pager__pane,
#knitMineView .knit-channel-pager__slot {
  height: 100%;
  min-height: 0;
}

#knitMineView #knitMineListSurface {
  height: 100%;
  min-height: 0;
  overflow-x: hidden;
  overflow-y: scroll;
  scrollbar-gutter: stable;
  scrollbar-width: thin;
  scrollbar-color: var(--knit-text-subtle) var(--knit-page-bg-alt);
}

#knitMineView #knitMineListSurface::-webkit-scrollbar {
  width: 8px;
}

#knitMineView #knitMineListSurface::-webkit-scrollbar-track {
  background: var(--knit-page-bg-alt);
  border-radius: 999px;
}

#knitMineView #knitMineListSurface::-webkit-scrollbar-thumb {
  background: var(--knit-text-subtle);
  border-radius: 999px;
  border: 2px solid transparent;
  background-clip: padding-box;
}

#knitMineView #knitMineListSurface::-webkit-scrollbar-thumb:hover {
  background: var(--knit-text-muted);
  border: 2px solid transparent;
  background-clip: padding-box;
}

.knit-mine-fold,
.knit-mine-works {
  touch-action: pan-y;
}

.knit-mine-works-list:empty,
.knit-mine-works-list.is-view-details:empty {
  display: none !important;
}

.knit-mine-works-list.is-view-details {
  display: block;
}

.knit-mine-details-peek {
  min-height: 12rem;
  width: 100%;
  background: var(--knit-page-bg, var(--knit-panel-bg, transparent));
}

.knit-mine-works-details {
  width: 100%;
  border-collapse: collapse;
  font-size: 0.78rem;
}

.knit-mine-works-details thead th {
  position: sticky;
  top: 0;
  z-index: 1;
  padding: 0.42rem 0.45rem;
  text-align: left;
  font-weight: 600;
  color: var(--knit-text-body);
  background: var(--knit-control-hover-bg);
  border-bottom: 1px solid var(--knit-divider);
  white-space: nowrap;
}

.knit-mine-works-details tbody tr {
  cursor: pointer;
}

.knit-mine-works-details tbody tr:hover {
  background: var(--knit-control-hover-bg);
}

.knit-mine-works-details td {
  padding: 0.38rem 0.45rem;
  border-bottom: 1px solid var(--knit-divider);
  vertical-align: middle;
  color: var(--knit-text-body);
}

.knit-mine-works-details .knit-mine-work-thumb {
  width: 44px;
  height: 44px;
  aspect-ratio: auto;
}

.knit-mine-works-details .knit-mine-details-intro {
  max-width: 280px;
  line-height: 1.35;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
}

.knit-mine-work-card[data-knit-channel="material"] .knit-mine-work-text,
.knit-mine-work-card[data-knit-channel="yarn"] .knit-mine-work-text,
.knit-mine-work-details-row[data-knit-channel="material"] .knit-mine-details-intro,
.knit-mine-work-details-row[data-knit-channel="yarn"] .knit-mine-details-intro {
  display: block;
  min-height: 0;
  max-height: 1.4em;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  -webkit-line-clamp: unset;
}

.knit-mine-details-vis-cell {
  white-space: nowrap;
}

.knit-mine-work-more {
  display: none;
  align-items: center;
  justify-content: center;
  width: 2rem;
  height: 2rem;
  margin: 0;
  padding: 0;
  border: none;
  border-radius: 999px;
  background: rgba(0, 0, 0, 0.48);
  color: #fff;
  font-size: 1.05rem;
  line-height: 1;
  cursor: pointer;
  -webkit-tap-highlight-color: transparent;
}

.knit-mine-work-thumb-wrap {
  position: relative;
}

.knit-mine-work-card > .knit-mine-work-more,
.knit-mine-work-thumb-wrap > .knit-mine-work-more {
  position: absolute;
  top: auto;
  right: 0.38rem;
  bottom: 0.38rem;
  z-index: 4;
}

.knit-mine-work-thumb-wrap > .knit-like-btn--card {
  top: 0.38rem;
  right: 0.38rem;
}

.knit-mine-col--more {
  display: none;
  width: 2.4rem;
  padding-left: 0.15rem;
  padding-right: 0.15rem;
  text-align: center;
}

.knit-mine-works-details--readonly .knit-mine-col--more {
  display: none !important;
}

.knit-mine-works-details .knit-mine-work-more {
  width: 1.85rem;
  height: 1.85rem;
  background: var(--knit-control-bg);
  color: var(--knit-control-text);
  border: 1px solid var(--knit-control-border);
}

.knit-mine-vis-select {
  max-width: 9.5rem;
  padding: 0.18rem 0.35rem;
  font: inherit;
  font-size: 0.76rem;
  color: var(--knit-control-text);
  background: var(--knit-control-bg);
  border: 1px solid var(--knit-control-border);
  border-radius: 6px;
  cursor: pointer;
}

.knit-mine-vis-select:hover:not(:disabled) {
  background: var(--knit-control-hover-bg);
}

.knit-mine-vis-select:disabled {
  opacity: 0.55;
  cursor: wait;
}

.knit-mine-vis-friends-modal {
  position: fixed;
  inset: 0;
  z-index: 120;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 1rem;
  background: rgba(0, 0, 0, 0.45);
}

.knit-mine-vis-friends-modal[hidden] {
  display: none !important;
  pointer-events: none !important;
}

.knit-mine-vis-friends-panel {
  width: min(22rem, 100%);
  max-height: min(28rem, 86vh);
  display: flex;
  flex-direction: column;
  gap: 0.55rem;
  padding: 1rem 1.05rem 0.9rem;
  border-radius: 12px;
  border: 1px solid var(--knit-panel-border);
  background: var(--knit-panel-bg);
  box-shadow: var(--knit-panel-shadow);
  color: var(--knit-text-body);
}

.knit-mine-vis-friends-title {
  margin: 0;
  font-size: 1rem;
  font-weight: 650;
}

.knit-mine-vis-friends-hint {
  margin: 0;
  font-size: var(--knit-hint-size);
  font-weight: var(--knit-hint-weight);
  letter-spacing: var(--knit-hint-ls);
  line-height: var(--knit-hint-lh);
  color: var(--knit-text-muted);
  opacity: 1;
}

.knit-mine-vis-friends-list {
  flex: 1 1 auto;
  min-height: 0;
  overflow: auto;
  display: flex;
  flex-direction: column;
  gap: 0.28rem;
  padding: 0.2rem 0;
}

.knit-mine-vis-friends-item {
  display: flex;
  align-items: center;
  gap: 0.45rem;
  padding: 0.28rem 0.2rem;
  border-radius: 6px;
  cursor: pointer;
}

.knit-mine-vis-friends-item:hover {
  background: var(--knit-control-hover-bg);
}

.knit-mine-vis-friends-actions {
  display: flex;
  justify-content: flex-end;
  gap: 0.45rem;
  padding-top: 0.15rem;
}

.knit-mine-vis-friends-cancel,
.knit-mine-vis-friends-ok {
  border: 1px solid var(--knit-control-border);
  background: var(--knit-control-bg);
  color: var(--knit-control-text);
  border-radius: 8px;
  padding: 0.32rem 0.7rem;
  font: inherit;
  font-size: 0.82rem;
  cursor: pointer;
}

.knit-mine-vis-friends-ok {
  background: var(--knit-accent, #2563eb);
  border-color: transparent;
  color: #fff;
}

.knit-mine-series-group-list.is-view-grid-large {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 0.6rem;
}

.knit-mine-work-card {
  position: relative;
  border: 1px solid var(--knit-panel-border);
  box-shadow: var(--knit-panel-shadow);
  border-radius: 10px;
  overflow: hidden;
  overflow: clip;
  background: var(--knit-panel-bg);
  cursor: pointer;
}

.knit-mine-work-thumb {
  width: 100%;
  aspect-ratio: 1 / 1;
  object-fit: cover;
  display: block;
  background: var(--knit-control-hover-bg);
}

.knit-mine-work-main {
  padding: 0.45rem 0.55rem 0.55rem;
}

.knit-mine-work-row {
  display: flex;
  justify-content: space-between;
  gap: 0.4rem;
  align-items: center;
  flex-wrap: wrap;
}

.knit-mine-work-tag {
  display: inline-flex;
  align-items: center;
  border-radius: 999px;
  padding: 2px 8px;
  font-size: 0.7rem;
  color: var(--knit-tag-text);
  background: var(--knit-tag-bg);
}

.knit-mine-work-time {
  font-size: 0.7rem;
  color: var(--knit-text-muted);
}

.knit-mine-work-text {
  margin: 0.38rem 0 0;
  font-size: 0.78rem;
  color: var(--knit-text-body);
  line-height: 1.4;
  min-height: 2.2em;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
}

.knit-mine-empty {
  margin: 1.1rem 0 0.4rem;
  padding: 0.35rem 0.75rem;
  text-align: center;
  color: var(--knit-text-muted);
  font-size: var(--knit-empty-size);
  font-weight: var(--knit-empty-weight);
  letter-spacing: var(--knit-empty-ls);
  line-height: var(--knit-empty-lh);
}

.knit-mine-delete-modal {
  position: fixed;
  inset: 0;
  z-index: 2600;
  background: rgba(0, 0, 0, 0.48);
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 1rem;
}

.knit-mine-delete-modal[hidden] {
  display: none !important;
}

body > .knit-mine-delete-modal {
  z-index: 16100;
}

.knit-mine-delete-panel {
  width: min(360px, 100%);
  background: var(--knit-modal-bg);
  border-radius: 12px;
  border: 1px solid var(--knit-modal-border);
  box-shadow: var(--knit-modal-shadow);
  padding: 0.9rem 0.95rem;
  color: var(--knit-text-heading);
}

.knit-mine-delete-title {
  margin: 0;
  font-size: 1rem;
}

.knit-mine-delete-text {
  margin: 0.45rem 0 0;
  color: var(--knit-text-muted);
  font-size: 0.86rem;
}

.knit-export-modal {
  position: fixed;
  inset: 0;
  z-index: 2700;
  background: rgba(8, 10, 14, 0.62);
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 1.1rem;
}

.knit-export-modal[hidden] {
  display: none !important;
}

.knit-export-panel {
  width: min(420px, 100%);
  max-height: min(88vh, 680px);
  overflow: auto;
  background: linear-gradient(165deg, #ffffff 0%, #f3f5f8 100%);
  border-radius: 20px;
  border: 1px solid rgba(15, 23, 42, 0.08);
  box-shadow: 0 24px 56px rgba(15, 23, 42, 0.16), 0 0 0 1px rgba(255, 255, 255, 0.65) inset;
  padding: 1.15rem 1.15rem 1.05rem;
  color: var(--knit-text-heading);
}

html[data-knit-theme="dark"] .knit-export-panel {
  background: linear-gradient(165deg, #23262d 0%, #17191e 100%);
  border-color: rgba(255, 255, 255, 0.08);
  box-shadow: 0 28px 64px rgba(0, 0, 0, 0.45), 0 0 0 1px rgba(255, 255, 255, 0.03) inset;
  color: #f3f4f6;
}

.knit-export-head {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 0.75rem;
}

.knit-export-head-text {
  min-width: 0;
}

.knit-export-title {
  margin: 0;
  font-size: 1.08rem;
  font-weight: 650;
  letter-spacing: 0.01em;
}

.knit-export-hint {
  margin: 0.35rem 0 0;
  color: var(--knit-text-muted);
  font-size: var(--knit-hint-size);
  font-weight: var(--knit-hint-weight);
  letter-spacing: var(--knit-hint-ls);
  line-height: var(--knit-hint-lh);
}

html[data-knit-theme="dark"] .knit-export-hint {
  color: rgba(243, 244, 246, 0.62);
}

.knit-export-count {
  flex: 0 0 auto;
  min-width: 2.6rem;
  padding: 0.28rem 0.55rem;
  border-radius: 999px;
  background: rgba(47, 111, 237, 0.12);
  color: #2f6fed;
  font-size: 0.78rem;
  font-weight: 650;
  text-align: center;
  line-height: 1.2;
}

html[data-knit-theme="dark"] .knit-export-count {
  background: rgba(91, 140, 255, 0.18);
  color: #9db8ff;
}

.knit-export-body {
  margin-top: 0.85rem;
  display: flex;
  align-items: stretch;
  gap: 0.65rem;
  min-height: 236px;
}

.knit-export-stage {
  flex: 1 1 auto;
  min-width: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  min-height: 236px;
  max-height: 280px;
  padding: 0.85rem 0.35rem 0.55rem;
  overflow: hidden;
  position: relative;
  z-index: 1;
  isolation: isolate;
}

.knit-export-stack {
  --knit-export-card-w: min(200px, 54vw);
  position: relative;
  width: var(--knit-export-card-w);
  height: calc(var(--knit-export-card-w) * 1.18);
  margin: 0 auto;
}

.knit-export-pick {
  position: absolute;
  left: 50%;
  top: 50%;
  width: 100%;
  height: 100%;
  margin: 0;
  padding: 0;
  border: 0;
  border-radius: 16px;
  background: #e7eaef;
  color: inherit;
  cursor: pointer;
  overflow: hidden;
  transform: translate(-50%, -50%) rotate(var(--knit-export-r, 0deg))
    translate(var(--knit-export-x, 0px), var(--knit-export-y, 0px)) scale(var(--knit-export-s, 1));
  box-shadow: 0 16px 30px rgba(15, 23, 42, 0.16), 0 0 0 1px rgba(15, 23, 42, 0.06);
  transition: transform 0.28s cubic-bezier(0.22, 1, 0.36, 1), opacity 0.22s ease, filter 0.22s ease,
    box-shadow 0.22s ease;
  z-index: var(--knit-export-z, 1);
}

html[data-knit-theme="dark"] .knit-export-pick {
  background: #2c313a;
  box-shadow: 0 14px 28px rgba(0, 0, 0, 0.35), 0 0 0 1px rgba(255, 255, 255, 0.08);
}

.knit-export-pick.is-stack-hidden {
  opacity: 0 !important;
  pointer-events: none;
  visibility: hidden;
}

.knit-export-pick.is-broken::before {
  content: "加载失败";
  position: absolute;
  inset: 0;
  display: grid;
  place-items: center;
  font-size: 0.78rem;
  color: var(--knit-text-muted);
  background: inherit;
  z-index: 1;
}

html[data-knit-theme="dark"] .knit-export-pick.is-broken::before {
  color: rgba(243, 244, 246, 0.45);
}

.knit-export-pick img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
  pointer-events: none;
  background: transparent;
}

.knit-export-pick__name {
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0;
  padding: 1.6rem 0.65rem 0.55rem;
  font-size: 0.7rem;
  color: #fff;
  background: linear-gradient(to top, rgba(0, 0, 0, 0.72), transparent);
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  text-align: left;
}

.knit-export-pick__check {
  position: absolute;
  top: 0.55rem;
  right: 0.55rem;
  width: 1.2rem;
  height: 1.2rem;
  border-radius: 999px;
  border: 1.5px solid rgba(255, 255, 255, 0.9);
  background: rgba(0, 0, 0, 0.28);
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.25);
  opacity: 0.55;
  transition: opacity 0.18s ease, background 0.18s ease, border-color 0.18s ease, transform 0.18s ease;
}

.knit-export-pick[data-checked="1"] {
  box-shadow: 0 18px 34px rgba(15, 23, 42, 0.22), 0 0 0 2px rgba(47, 111, 237, 0.9);
}

html[data-knit-theme="dark"] .knit-export-pick[data-checked="1"] {
  box-shadow: 0 18px 34px rgba(0, 0, 0, 0.4), 0 0 0 2px rgba(91, 140, 255, 0.85);
}

.knit-export-pick[data-checked="1"] .knit-export-pick__check {
  opacity: 1;
  background: #5b8cff;
  border-color: #5b8cff;
  transform: scale(1.05);
}

.knit-export-pick[data-checked="1"] .knit-export-pick__check::after {
  content: "";
  position: absolute;
  left: 0.34rem;
  top: 0.14rem;
  width: 0.3rem;
  height: 0.55rem;
  border: solid #fff;
  border-width: 0 2px 2px 0;
  transform: rotate(45deg);
}

.knit-export-pick[data-checked="0"] {
  filter: grayscale(0.35) brightness(0.9);
  opacity: 0.7;
}

.knit-export-pick:hover {
  --knit-export-s: 1.03;
}

.knit-export-pick:focus-visible {
  outline: 2px solid #5b8cff;
  outline-offset: 3px;
}

.knit-export-strip {
  flex: 0 0 auto;
  display: flex;
  flex-direction: column;
  gap: 0.45rem;
  overflow-x: hidden;
  overflow-y: auto;
  width: 56px;
  max-height: 280px;
  padding: 0.15rem 0.1rem;
  margin: 0;
  scrollbar-width: thin;
  position: relative;
  z-index: 2;
  align-self: stretch;
}

.knit-export-strip[hidden] {
  display: none !important;
}

.knit-export-strip-item {
  flex: 0 0 auto;
  width: 48px;
  height: 48px;
  padding: 0;
  border: 0;
  border-radius: 10px;
  overflow: hidden;
  cursor: pointer;
  position: relative;
  background: rgba(15, 23, 42, 0.06);
  box-shadow: 0 0 0 1px rgba(15, 23, 42, 0.08);
  opacity: 0.72;
  transition: opacity 0.18s ease, box-shadow 0.18s ease, transform 0.18s ease;
}

html[data-knit-theme="dark"] .knit-export-strip-item {
  background: rgba(255, 255, 255, 0.06);
  box-shadow: 0 0 0 1px rgba(255, 255, 255, 0.1);
}

.knit-export-strip-item img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
  pointer-events: none;
}

.knit-export-strip-item[data-checked="1"] {
  opacity: 1;
  box-shadow: 0 0 0 2px #5b8cff;
}

.knit-export-strip-item.is-focus {
  opacity: 1;
  transform: translateX(-1px);
  box-shadow: 0 0 0 2px #5b8cff, 0 4px 10px rgba(15, 23, 42, 0.18);
}

.knit-export-toolbar {
  margin-top: 0.75rem;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 0.65rem;
}

.knit-export-link-btn {
  border: 0;
  background: transparent;
  color: var(--knit-text-body);
  font-size: 0.82rem;
  padding: 0.2rem 0.35rem;
  cursor: pointer;
}

.knit-export-link-btn:hover {
  color: var(--knit-text-heading);
}

html[data-knit-theme="dark"] .knit-export-link-btn {
  color: rgba(243, 244, 246, 0.72);
}

html[data-knit-theme="dark"] .knit-export-link-btn:hover {
  color: #fff;
}

.knit-export-drag-btn {
  margin-top: 0.75rem;
  width: 100%;
  border: 1px dashed rgba(47, 111, 237, 0.45);
  background: rgba(47, 111, 237, 0.08);
  color: inherit;
  border-radius: 12px;
  padding: 0.72rem 0.8rem;
  font-size: 0.88rem;
  cursor: grab;
  font-weight: 600;
}

.knit-export-drag-btn.is-loading {
  opacity: 0.72;
  cursor: progress;
  border-style: solid;
  font-weight: 500;
}

.knit-export-drag-btn.is-ready {
  border-color: rgba(47, 111, 237, 0.55);
  background: rgba(47, 111, 237, 0.12);
}

.knit-export-drag-btn:active {
  cursor: grabbing;
}

html[data-knit-theme="dark"] .knit-export-drag-btn {
  border-color: rgba(91, 140, 255, 0.45);
  background: rgba(91, 140, 255, 0.12);
}

html[data-knit-theme="dark"] .knit-export-drag-btn.is-ready {
  border-color: rgba(91, 140, 255, 0.65);
  background: rgba(91, 140, 255, 0.18);
}

.knit-export-actions {
  margin-top: 0.85rem;
  display: flex;
  justify-content: flex-end;
  gap: 0.55rem;
}

.knit-export-btn {
  border: 1px solid rgba(15, 23, 42, 0.12);
  background: var(--knit-panel-bg);
  color: inherit;
  border-radius: 11px;
  padding: 0.55rem 0.95rem;
  font-size: 0.88rem;
  cursor: pointer;
}

.knit-export-btn:hover {
  background: var(--knit-panel-bg-alt);
}

html[data-knit-theme="dark"] .knit-export-btn {
  border-color: rgba(255, 255, 255, 0.14);
  background: rgba(255, 255, 255, 0.06);
  color: inherit;
}

html[data-knit-theme="dark"] .knit-export-btn:hover {
  background: rgba(255, 255, 255, 0.1);
}

.knit-export-btn--primary {
  border-color: transparent;
  background: linear-gradient(135deg, #ff5a5f 0%, #e23d44 100%);
  color: #fff;
  font-weight: 600;
}

.knit-export-btn--primary:hover {
  filter: brightness(1.05);
  background: linear-gradient(135deg, #ff5a5f 0%, #e23d44 100%);
}

.knit-card--file-dragging {
  opacity: 0.72;
}

.knit-mine-work-card[data-knit-mine-export="1"],
.knit-mine-work-details-row[data-knit-mine-export="1"] {
  cursor: grab;
}

.knit-mine-share-modal {
  background: rgba(8, 10, 14, 0.52);
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
  padding: 1.1rem;
}

.knit-mine-qr-panel {
  width: min(420px, 100%);
  max-height: min(90dvh, 760px);
  overflow: auto;
  text-align: left;
  padding: 1.15rem 1.15rem 1.05rem;
  border-radius: 20px;
  background: linear-gradient(165deg, #ffffff 0%, #f3f5f8 100%);
  border: 1px solid rgba(15, 23, 42, 0.08);
  box-shadow: 0 24px 56px rgba(15, 23, 42, 0.16), 0 0 0 1px rgba(255, 255, 255, 0.65) inset;
}

html[data-knit-theme="dark"] .knit-mine-qr-panel {
  background: linear-gradient(165deg, #23262d 0%, #17191e 100%);
  border-color: rgba(255, 255, 255, 0.08);
  box-shadow: 0 28px 64px rgba(0, 0, 0, 0.45), 0 0 0 1px rgba(255, 255, 255, 0.03) inset;
}

.knit-mine-share-head {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 0.75rem;
}

.knit-mine-share-head-text {
  min-width: 0;
}

.knit-mine-share-kicker {
  margin: 0 0 0.2rem;
  color: var(--knit-text-subtle);
  font-size: 0.72rem;
  font-weight: 650;
  letter-spacing: 0.08em;
  text-transform: uppercase;
}

.knit-mine-qr-panel .knit-mine-delete-title {
  font-size: 1.12rem;
  font-weight: 650;
  letter-spacing: 0.01em;
}

.knit-mine-share-name {
  margin: 0.22rem 0 0;
  color: var(--knit-text-muted);
  font-size: 0.84rem;
  line-height: 1.4;
}

.knit-mine-share-name:empty {
  display: none;
}

.knit-mine-share-close {
  flex: 0 0 auto;
  width: 2rem;
  height: 2rem;
  margin: -0.15rem -0.2rem 0 0;
  border: 0;
  border-radius: 999px;
  background: var(--knit-tag-bg);
  color: var(--knit-text-muted);
  font-size: 1.25rem;
  line-height: 1;
  cursor: pointer;
}

.knit-mine-share-close:hover {
  background: var(--knit-control-hover-bg);
  color: var(--knit-text-heading);
}

.knit-mine-share-hero {
  margin-top: 0.95rem;
  text-align: center;
}

.knit-mine-share-qr-plate {
  width: fit-content;
  max-width: 100%;
  margin: 0 auto;
  padding: 0.8rem;
  border-radius: 18px;
  background: var(--knit-panel-bg);
  box-shadow: 0 10px 28px rgba(15, 23, 42, 0.08), 0 0 0 1px rgba(15, 23, 42, 0.05);
}

html[data-knit-theme="dark"] .knit-mine-share-qr-plate {
  box-shadow: 0 12px 32px rgba(0, 0, 0, 0.35), 0 0 0 1px rgba(255, 255, 255, 0.08);
}

.knit-mine-share-meta {
  display: grid;
  gap: 0.5rem;
  margin-top: 0.95rem;
}

.knit-mine-share-field {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 0.35rem 0.55rem;
  margin: 0;
  padding: 0.55rem 0.65rem;
  border: 1px solid var(--knit-panel-border);
  border-radius: 12px;
  background: var(--knit-panel-bg);
}

.knit-mine-share-field-label,
.knit-mine-qr-panel .knit-mine-wall-label {
  flex: 0 0 auto;
  min-width: 3.2rem;
  color: var(--knit-text-subtle);
  font-size: 0.72rem;
  font-weight: 650;
  letter-spacing: 0.04em;
}

.knit-mine-qr-id {
  display: flex;
  align-items: center;
  flex: 1 1 8rem;
  min-width: 0;
  flex-wrap: wrap;
  gap: 0.3rem 0.45rem;
  margin: 0;
  font-size: 0.82rem;
  color: var(--knit-text-heading);
  word-break: break-all;
}

.knit-mine-qr-panel .knit-mine-wall {
  margin-top: 0;
}

.knit-mine-qr-panel .knit-mine-wall-url {
  flex: 1 1 8rem;
  color: var(--knit-text-body);
}

.knit-mine-qr-canvas {
  display: block;
  width: min(200px, 58vw);
  height: auto;
  margin: 0 auto;
  border-radius: 8px;
  background: var(--knit-panel-bg);
}

.knit-mine-share-hint {
  margin: 0.55rem 0 0;
  text-align: center;
}

.knit-mine-login-qr-wrap {
  margin-top: 0.85rem;
  padding: 0.7rem 0.75rem 0.8rem;
  border: 1px dashed var(--knit-panel-border);
  border-radius: 14px;
  background: rgba(15, 23, 42, 0.03);
  text-align: center;
}

html[data-knit-theme="dark"] .knit-mine-login-qr-wrap {
  background: rgba(255, 255, 255, 0.03);
}

.knit-mine-share-login-label {
  margin: 0 0 0.45rem;
  color: var(--knit-text-subtle);
  font-size: 0.72rem;
  font-weight: 650;
  letter-spacing: 0.06em;
}

.knit-mine-login-qr-canvas {
  width: min(132px, 40vw);
}

.knit-mine-login-qr-wrap.is-pending {
  padding-top: 0.55rem;
  padding-bottom: 0.55rem;
}

.knit-mine-login-qr-wrap.is-pending .knit-mine-login-qr-canvas {
  display: none;
}

.knit-mine-qr-panel .knit-mine-qr-actions {
  margin-top: 1rem;
  justify-content: stretch;
}

.knit-mine-share-btn {
  flex: 1 1 8rem;
  min-height: 2.35rem;
  border-radius: 10px;
  font-weight: 600;
}

.knit-mine-delete-btn.knit-mine-share-btn--primary {
  border-color: var(--knit-black);
  background: var(--knit-black);
  color: #fff;
}

.knit-mine-delete-btn.knit-mine-share-btn--primary:hover {
  background: var(--knit-black-hover);
}

html[data-knit-theme="dark"] .knit-mine-delete-btn.knit-mine-share-btn--primary {
  border-color: #f0f2f7;
  background: #f0f2f7;
  color: var(--knit-text-heading);
}

html[data-knit-theme="dark"] .knit-mine-delete-btn.knit-mine-share-btn--primary:hover {
  background: #ffffff;
}

.knit-mine-qr-scan-panel {
  width: min(420px, 100%);
}

.knit-mine-qr-scan-stage {
  position: relative;
  margin-top: 0.7rem;
  border-radius: 12px;
  overflow: hidden;
  background: #111;
  aspect-ratio: 3 / 4;
  max-height: min(58vh, 420px);
}

.knit-mine-qr-scan-video {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
  background: #111;
}

.knit-mine-qr-scan-frame {
  pointer-events: none;
  position: absolute;
  inset: 16%;
  border: 2px solid rgba(255, 255, 255, 0.88);
  border-radius: 12px;
  box-shadow: 0 0 0 999px rgba(0, 0, 0, 0.28);
}

.knit-mine-qr-scan-manual {
  display: flex;
  align-items: center;
  gap: 0.45rem;
  margin-top: 0.7rem;
}

.knit-mine-qr-scan-manual .knit-mine-edit-input {
  flex: 1 1 auto;
  min-width: 0;
}

.knit-mine-qr-actions {
  flex-wrap: wrap;
  justify-content: center;
}

.knit-mine-delete-actions {
  margin-top: 0.85rem;
  display: flex;
  justify-content: flex-end;
  gap: 0.55rem;
}

.knit-mine-delete-btn {
  border: 1px solid var(--knit-control-border);
  background: var(--knit-control-bg);
  color: var(--knit-control-text);
  border-radius: 8px;
  padding: 0.35rem 0.7rem;
  cursor: pointer;
}

.knit-mine-delete-btn--danger {
  border-color: #dc2626;
  background: #dc2626;
  color: #fff;
}

.knit-mine-edit-fields {
  display: grid;
  gap: 0.4rem;
  margin-top: 0.65rem;
}

.knit-mine-edit-label {
  font-size: 0.8rem;
  color: var(--knit-text-body);
}

.knit-mine-edit-input,
.knit-mine-edit-textarea {
  width: 100%;
  border: 1px solid var(--knit-control-border);
  border-radius: 8px;
  padding: 0.42rem 0.55rem;
  font-size: 0.86rem;
  color: var(--knit-input-text);
  background: var(--knit-input-bg);
  font-family: inherit;
}

.knit-mine-edit-textarea {
  min-height: 84px;
  resize: vertical;
}

.knit-mine-edit-footer {
  margin-top: 0.85rem;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 0.55rem;
  flex-wrap: wrap;
}

.knit-mine-edit-actions {
  margin-top: 0;
}

.knit-mine-edit-logout-btn {
  border: none;
  background: transparent;
  padding: 0.35rem 0;
  font-size: 0.82rem;
  color: var(--knit-text-muted);
  cursor: pointer;
  text-decoration: underline;
  font-family: inherit;
}

.knit-mine-edit-logout-btn:hover {
  color: #dc2626;
}

.knit-admin-view {
  flex: 1;
  min-width: 0;
  min-height: 0;
  overflow: auto;
  color: var(--knit-text-heading);
  background: var(--knit-page-bg);
  padding: 0.85rem;
  display: flex;
  flex-direction: column;
  gap: 0.75rem;
}

.knit-admin-head {
  background: var(--knit-panel-bg);
  border: 1px solid var(--knit-panel-border);
  box-shadow: var(--knit-panel-shadow);
  border-radius: 12px;
  padding: 0.8rem;
}

.knit-admin-head h2 {
  margin: 0;
  font-size: 1rem;
  color: var(--knit-text-heading);
}

.knit-admin-head p {
  margin: 0.35rem 0 0;
  font-size: 0.82rem;
  color: var(--knit-text-muted);
}

.knit-admin-panel {
  background: var(--knit-panel-bg);
  border: 1px solid var(--knit-panel-border);
  box-shadow: var(--knit-panel-shadow);
  border-radius: 12px;
  padding: 0.8rem;
  display: flex;
  flex-direction: column;
  gap: 0.6rem;
}

.knit-admin-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 0.6rem;
}

.knit-admin-row h3 {
  margin: 0;
  font-size: 0.92rem;
  color: var(--knit-text-heading);
}

.knit-admin-refresh-btn,
.knit-admin-search-btn,
.knit-admin-search-upgrade {
  border: 1px solid var(--knit-control-border);
  background: var(--knit-control-bg);
  border-radius: 8px;
  padding: 0.32rem 0.62rem;
  font-size: 0.82rem;
  cursor: pointer;
  color: var(--knit-control-text);
}

.knit-admin-search-upgrade:not(:disabled) {
  border-color: #0f766e;
  color: #0f766e;
}

.knit-admin-search-upgrade:disabled {
  opacity: 0.58;
  cursor: not-allowed;
}

.knit-admin-search-wrap {
  display: flex;
  gap: 0.45rem;
  align-items: center;
  flex-wrap: wrap;
}

.knit-admin-auth-switches {
  display: flex;
  flex-direction: column;
  gap: 0.5rem;
}

.knit-admin-auth-switch-row {
  display: flex;
  align-items: center;
  gap: 0.45rem;
  font-size: 0.85rem;
  color: var(--knit-text-heading);
}

.knit-admin-auth-switch-actions {
  display: flex;
  align-items: center;
  gap: 0.6rem;
  flex-wrap: wrap;
}

.knit-admin-search-input {
  flex: 1;
  min-width: 220px;
  border: 1px solid var(--knit-control-border);
  border-radius: 8px;
  padding: 0.42rem 0.55rem;
  font-size: 0.86rem;
  color: var(--knit-input-text);
  background: var(--knit-input-bg);
}

.knit-admin-review-list {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
  gap: 0.65rem;
}

.knit-admin-review-card {
  border: 1px solid var(--knit-panel-border);
  box-shadow: var(--knit-panel-shadow);
  border-radius: 10px;
  background: var(--knit-panel-bg);
  padding: 0.62rem;
  display: flex;
  flex-direction: column;
  gap: 0.45rem;
}

.knit-admin-review-cover {
  width: 100%;
  height: 156px;
  border-radius: 8px;
  border: 1px solid var(--knit-panel-border);
  object-fit: cover;
  background: var(--knit-control-hover-bg);
}

.knit-admin-review-title {
  margin: 0;
  font-size: 0.86rem;
  font-weight: 700;
  color: var(--knit-text-heading);
}

.knit-admin-review-meta {
  margin: 0;
  font-size: 0.78rem;
  color: var(--knit-text-muted);
  line-height: 1.45;
}

.knit-admin-review-actions {
  display: flex;
  justify-content: flex-end;
  gap: 0.4rem;
  flex-wrap: wrap;
}

.knit-admin-review-approve {
  border: 1px solid #166534;
  background: #f0fdf4;
  color: #166534;
  border-radius: 8px;
  padding: 0.32rem 0.72rem;
  font-size: 0.82rem;
  cursor: pointer;
}

.knit-admin-review-reject {
  border: 1px solid #991b1b;
  background: #fef2f2;
  color: #991b1b;
  border-radius: 8px;
  padding: 0.32rem 0.72rem;
  font-size: 0.82rem;
  cursor: pointer;
}

.knit-admin-review-approve:disabled,
.knit-admin-review-reject:disabled {
  opacity: 0.6;
  cursor: not-allowed;
}

.knit-mine-enterprise-panel {
  width: min(420px, 100%);
  display: flex;
  flex-direction: column;
  min-height: 0;
}

.knit-mine-enterprise-head {
  display: grid;
  grid-template-columns: 2rem 1fr 2rem;
  align-items: center;
  gap: 0.55rem;
  flex-shrink: 0;
}

.knit-mine-enterprise-head .knit-mine-delete-title {
  grid-column: 2;
  margin: 0;
  text-align: center;
}

.knit-mine-enterprise-close {
  grid-column: 3;
  justify-self: end;
  flex: 0 0 auto;
  width: 2rem;
  height: 2rem;
  border: 0;
  border-radius: 6px;
  background: transparent;
  color: var(--knit-text-muted);
  font-size: 1.35rem;
  line-height: 1;
  cursor: pointer;
}

.knit-mine-enterprise-close:hover {
  background: var(--knit-control-hover-bg);
  color: var(--knit-text-heading);
}

.knit-mine-enterprise-body {
  min-height: 0;
  overflow: auto;
}

.knit-mine-enterprise-status {
  margin: 0.5rem 0 0;
  padding: 0.42rem 0.55rem;
  border-radius: 8px;
  background: var(--knit-control-hover-bg);
  color: var(--knit-text-body);
  font-size: 0.82rem;
  line-height: 1.45;
}

.knit-mine-enterprise-upload {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 0.45rem;
}

.knit-mine-enterprise-file {
  font-size: 0.78rem;
  color: var(--knit-text-muted);
}

.knit-mine-enterprise-preview {
  width: 100%;
  max-height: 180px;
  object-fit: contain;
  border-radius: 8px;
  border: 1px solid var(--knit-panel-border);
  background: var(--knit-control-hover-bg);
}

.knit-temp-cover-list {
  max-height: min(70vh, 560px);
  overflow-y: auto;
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(240px, 1fr));
  gap: 0.7rem;
  padding-right: 0.2rem;
}

.knit-temp-cover-card {
  border: 1px solid var(--knit-panel-border);
  box-shadow: var(--knit-panel-shadow);
  border-radius: 10px;
  background: var(--knit-panel-bg);
  padding: 0.58rem;
  display: flex;
  flex-direction: column;
  gap: 0.45rem;
}

.knit-temp-cover-img {
  width: 100%;
  height: 148px;
  border: 1px solid var(--knit-panel-border);
  border-radius: 8px;
  object-fit: cover;
  background: var(--knit-control-hover-bg);
}

.knit-temp-cover-meta {
  margin: 0;
  font-size: 0.76rem;
  color: var(--knit-text-muted);
}

.knit-temp-cover-actions {
  display: flex;
  justify-content: flex-end;
  gap: 0.4rem;
}

.knit-temp-cover-current {
  align-self: flex-start;
  font-size: 0.72rem;
  color: #1d4ed8;
  background: #eff6ff;
  border: 1px solid #bfdbfe;
  border-radius: 999px;
  padding: 2px 8px;
}

.knit-temp-cover-remove {
  border: 1px solid #b91c1c;
  background: color-mix(in srgb, var(--knit-red) 8%, var(--knit-panel-bg));
  color: #b91c1c;
  border-radius: 8px;
  padding: 0.3rem 0.64rem;
  font-size: 0.8rem;
  cursor: pointer;
}

.knit-temp-cover-remove:disabled {
  opacity: 0.6;
  cursor: not-allowed;
}

.knit-about-view--readonly {
  padding: 0;
  background: #0b0b0b;
  gap: 0;
}

.knit-about-view--readonly .knit-admin-panel {
  border: none;
  border-radius: 0;
  background: transparent;
  padding: 0;
}

.knit-about-view--readonly .knit-temp-cover-list {
  max-height: none;
  height: 100%;
  overflow-y: auto;
  grid-template-columns: 1fr;
  gap: 0;
  padding: 0;
}

.knit-about-view--readonly .knit-temp-cover-card {
  border: none;
  border-radius: 0;
  padding: 0;
  background: #0b0b0b;
}

.knit-about-view--readonly .knit-temp-cover-img {
  border: none;
  border-radius: 0;
  height: calc(100vh - var(--knit-top-h) - 1rem);
  object-fit: contain;
  background: #0b0b0b;
}

.knit-about-view--readonly .knit-admin-empty {
  color: #9ca3af;
  padding: 1.2rem;
}

.knit-data-cards {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(180px, 1fr));
  gap: 0.65rem;
}

.knit-data-card {
  border: 1px solid var(--knit-panel-border);
  box-shadow: var(--knit-panel-shadow);
  border-radius: 10px;
  background: var(--knit-panel-bg);
  padding: 0.62rem;
}

.knit-data-card-title {
  margin: 0;
  font-size: 0.8rem;
  color: var(--knit-text-muted);
}

.knit-data-card-value {
  margin: 0.3rem 0 0;
  font-size: 1.32rem;
  font-weight: 800;
  color: var(--knit-text-heading);
}

.knit-data-week-tree {
  display: flex;
  flex-direction: column;
  gap: 0.7rem;
  max-height: min(68vh, 620px);
  overflow: auto;
}

.knit-data-day {
  border: 1px solid var(--knit-panel-border);
  box-shadow: var(--knit-panel-shadow);
  border-radius: 10px;
  background: var(--knit-panel-bg);
  padding: 0.56rem;
}

.knit-data-day-head {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 0.4rem;
  font-size: 0.78rem;
  color: var(--knit-text-muted);
}

.knit-data-hours {
  display: grid;
  grid-template-columns: repeat(24, minmax(8px, 1fr));
  gap: 2px;
  align-items: end;
  height: 88px;
}

.knit-data-hour {
  background: linear-gradient(180deg, #93c5fd, #2563eb);
  border-radius: 3px 3px 0 0;
  min-height: 2px;
}

.knit-data-usage-hint {
  margin: 0 0 0.65rem;
  font-size: var(--knit-hint-size);
  font-weight: var(--knit-hint-weight);
  letter-spacing: var(--knit-hint-ls);
  line-height: var(--knit-hint-lh);
  color: var(--knit-text-muted);
}

.knit-data-usage-rank {
  display: flex;
  flex-direction: column;
  gap: 0.45rem;
}

.knit-data-usage-table {
  border: 1px solid var(--knit-panel-border);
  box-shadow: var(--knit-panel-shadow);
  border-radius: 10px;
  background: var(--knit-panel-bg);
  overflow: hidden;
}

.knit-data-usage-head,
.knit-data-usage-row {
  display: grid;
  grid-template-columns: 2.4rem minmax(0, 1fr) 4.2rem 3.5rem 3.5rem;
  gap: 0.55rem;
  align-items: center;
  padding: 0.55rem 0.65rem;
}

.knit-data-usage-head {
  font-size: 0.74rem;
  font-weight: 700;
  color: var(--knit-text-muted);
  background: var(--knit-control-hover-bg);
  border-bottom: 1px solid var(--knit-divider);
}

.knit-data-usage-row + .knit-data-usage-row {
  border-top: 1px solid var(--knit-divider);
}

.knit-data-usage-rank-num {
  font-size: 0.82rem;
  font-weight: 800;
  color: #2563eb;
  text-align: center;
}

.knit-data-usage-main {
  min-width: 0;
}

.knit-data-usage-label {
  margin: 0;
  font-size: 0.86rem;
  font-weight: 700;
  color: var(--knit-text-heading);
}

.knit-data-usage-bar-track {
  margin-top: 0.28rem;
  height: 6px;
  border-radius: 999px;
  background: var(--knit-tag-bg);
  overflow: hidden;
}

.knit-data-usage-bar {
  height: 100%;
  border-radius: 999px;
  background: linear-gradient(90deg, #93c5fd, #2563eb);
}

.knit-data-usage-meta {
  margin: 0.18rem 0 0;
  font-size: 0.72rem;
  color: var(--knit-text-subtle);
}

.knit-data-usage-cat,
.knit-data-usage-count,
.knit-data-usage-share {
  font-size: 0.78rem;
  color: var(--knit-text-body);
  text-align: right;
}

.knit-data-usage-count {
  font-weight: 700;
  color: var(--knit-text-heading);
}

.knit-analytics-range-row {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  flex-wrap: wrap;
}
.knit-analytics-range-label {
  font-size: 0.8rem;
  color: var(--knit-text-subtle);
}
.knit-analytics-range {
  min-height: 2rem;
  padding: 0.2rem 0.5rem;
  border-radius: 6px;
  border: 1px solid var(--knit-panel-border);
  background: var(--knit-panel-bg);
  color: var(--knit-text-body);
}
.knit-analytics-dash {
  display: flex;
  flex-direction: column;
  gap: 1.1rem;
}
.knit-analytics-section {
  border-top: 1px solid var(--knit-panel-border);
  padding-top: 0.75rem;
}
.knit-analytics-section-title {
  margin: 0 0 0.55rem;
  font-size: 0.95rem;
  color: var(--knit-text-heading);
}
.knit-analytics-subhead {
  margin: 0.7rem 0 0.35rem;
  font-size: 0.82rem;
  color: var(--knit-text-body);
}
.knit-analytics-card-sub {
  margin: 0.2rem 0 0;
  font-size: 0.72rem;
  color: var(--knit-text-subtle);
}
.knit-analytics-na {
  color: #a16207;
  font-size: 0.85rem;
  font-weight: 600;
}
.knit-analytics-range-meta {
  margin: 0.4rem 0 0;
  font-size: 0.72rem;
  color: var(--knit-text-subtle);
}
.knit-analytics-funnel {
  display: flex;
  flex-direction: column;
  gap: 0.35rem;
  font-size: 0.82rem;
}
.knit-analytics-funnel-row {
  display: flex;
  justify-content: space-between;
  gap: 0.75rem;
  padding: 0.25rem 0;
  border-bottom: 1px dashed var(--knit-panel-border);
}
.knit-analytics-table {
  display: flex;
  flex-direction: column;
  gap: 0;
  font-size: 0.75rem;
  overflow-x: auto;
}
.knit-analytics-table-head,
.knit-analytics-table-row {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(72px, 1fr));
  gap: 0.35rem;
  padding: 0.35rem 0.2rem;
  border-bottom: 1px solid var(--knit-panel-border);
}
.knit-analytics-table-head {
  font-weight: 700;
  color: var(--knit-text-subtle);
}
.knit-analytics-feedback-list {
  display: flex;
  flex-direction: column;
  gap: 0.55rem;
}
.knit-analytics-feedback-item {
  border: 1px solid var(--knit-panel-border);
  border-radius: 8px;
  padding: 0.55rem 0.65rem;
  background: var(--knit-panel-bg);
  font-size: 0.8rem;
}
.knit-analytics-feedback-item p {
  margin: 0.35rem 0;
  white-space: pre-wrap;
}
.knit-analytics-warn-list {
  margin: 0.4rem 0 0;
  padding-left: 1.1rem;
  font-size: 0.78rem;
  color: var(--knit-text-body);
}
.knit-analytics-test-link-box {
  margin: 0.5rem 0 0.85rem;
  padding: 0.55rem 0.65rem;
  border: 1px dashed var(--knit-panel-border);
  border-radius: 8px;
}
.knit-analytics-test-link-row {
  display: flex;
  flex-wrap: wrap;
  gap: 0.45rem 0.75rem;
  align-items: end;
  font-size: 0.78rem;
}
.knit-analytics-test-link-row label {
  display: flex;
  flex-direction: column;
  gap: 0.2rem;
}
.knit-analytics-test-link-row input,
.knit-analytics-test-link-row select {
  min-height: 1.9rem;
  max-width: 11rem;
}
.knit-analytics-link-out {
  margin: 0.45rem 0 0;
  font-size: 0.75rem;
  word-break: break-all;
  color: var(--knit-text-body);
}
.knit-analytics-test-panel {
  position: fixed;
  right: 0.75rem;
  bottom: 0.75rem;
  z-index: 12000;
  width: min(22rem, calc(100vw - 1.5rem));
  max-height: min(70vh, 34rem);
  overflow: auto;
  background: var(--knit-panel-bg, #fff);
  color: var(--knit-text-body, #222);
  border: 1px solid var(--knit-panel-border, #d0d4dc);
  border-radius: 10px;
  box-shadow: 0 8px 28px rgba(0, 0, 0, 0.14);
  font-size: 0.78rem;
}
.knit-analytics-test-panel__head {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 0.45rem 0.6rem;
  border-bottom: 1px solid var(--knit-panel-border, #d0d4dc);
  font-size: 0.85rem;
}
.knit-analytics-test-panel__body {
  padding: 0.55rem 0.65rem 0.7rem;
  display: flex;
  flex-direction: column;
  gap: 0.4rem;
}
.knit-analytics-test-panel label {
  display: flex;
  flex-direction: column;
  gap: 0.15rem;
}
.knit-analytics-test-actions {
  display: flex;
  gap: 0.4rem;
}
.knit-analytics-test-active {
  display: flex;
  flex-direction: column;
  gap: 0.35rem;
  padding-top: 0.35rem;
  border-top: 1px dashed var(--knit-panel-border, #d0d4dc);
}
.knit-analytics-test-meta {
  margin: 0;
  color: var(--knit-text-subtle, #667);
  font-size: 0.72rem;
}
.knit-analytics-test-exit {
  margin-top: 0.25rem;
  align-self: flex-start;
}
.knit-md-intent {
  margin: 0.75rem 0 0.25rem;
  padding: 0.55rem 0.65rem;
  border: 1px dashed var(--knit-panel-border, #d0d4dc);
  border-radius: 8px;
}
.knit-md-intent__btn {
  font-size: 0.85rem;
  padding: 0.35rem 0.7rem;
  border-radius: 6px;
  border: 1px solid var(--knit-panel-border, #c8ccd4);
  background: var(--knit-panel-bg, #f7f8fa);
  cursor: pointer;
}
.knit-md-intent__hint {
  margin: 0.35rem 0 0;
  font-size: 0.72rem;
  color: var(--knit-text-subtle, #667);
}

.knit-admin-list {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(220px, 1fr));
  gap: 0.55rem;
}

.knit-admin-user-card {
  border: 1px solid var(--knit-panel-border);
  box-shadow: var(--knit-panel-shadow);
  border-radius: 10px;
  background: var(--knit-panel-bg);
  padding: 0.6rem 0.65rem;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 0.5rem;
}

.knit-admin-user-main {
  min-width: 0;
}

.knit-admin-user-name {
  margin: 0;
  font-size: 0.88rem;
  font-weight: 700;
  color: var(--knit-text-heading);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.knit-admin-user-id {
  margin: 0.22rem 0 0;
  font-size: 0.75rem;
  color: var(--knit-text-muted);
}

.knit-admin-user-level {
  font-size: 0.72rem;
  color: #1d4ed8;
  background: #eff6ff;
  border: 1px solid #bfdbfe;
  border-radius: 999px;
  padding: 2px 8px;
  white-space: nowrap;
}

.knit-admin-empty,
.knit-admin-search-hint {
  margin: 0.35rem 0 0;
  font-size: var(--knit-hint-size);
  font-weight: var(--knit-hint-weight);
  line-height: var(--knit-hint-lh);
  letter-spacing: var(--knit-hint-ls);
  color: var(--knit-text-muted);
}

.knit-admin-empty {
  padding: 1.15rem 0.4rem;
  text-align: center;
  font-size: var(--knit-empty-size);
  font-weight: var(--knit-empty-weight);
  letter-spacing: var(--knit-empty-ls);
  line-height: var(--knit-empty-lh);
}

.knit-admin-search-result {
  min-height: 32px;
}

.knit-admin-search-card {
  border: 1px solid var(--knit-panel-border);
  box-shadow: var(--knit-panel-shadow);
  border-radius: 10px;
  background: var(--knit-panel-bg);
  padding: 0.62rem;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 0.55rem;
}

.knit-admin-search-main {
  min-width: 0;
}

.knit-admin-search-level {
  margin: 0.22rem 0 0;
  font-size: 0.75rem;
  color: var(--knit-text-muted);
}

.knit-follow-view {
  flex: 1 1 0%;
  min-width: 0;
  min-height: 0;
  overflow: hidden;
  color: var(--knit-view-text);
  padding: 0;
  display: flex;
  flex-direction: column;
}

.knit-follow-layout {
  flex: 1 1 0%;
  min-height: 0;
  display: flex;
  overflow: hidden;
}

.knit-follow-sidebar {
  flex-shrink: 0;
  width: min(200px, 34vw);
  border-right: 1px solid var(--knit-divider);
  background: var(--knit-panel-bg);
  display: flex;
  flex-direction: column;
  overflow: hidden;
}

.knit-follow-head {
  flex-shrink: 0;
  padding: 0.85rem 0.65rem 0.45rem;
}

.knit-follow-head h2 {
  margin: 0;
  font-size: 1.05rem;
  color: var(--knit-text-heading);
}

.knit-follow-head p {
  margin: 0.2rem 0 0;
  font-size: 0.82rem;
  color: var(--knit-text-muted);
}

.knit-follow-list {
  flex: 1;
  min-height: 0;
  overflow-y: auto;
  display: flex;
  flex-direction: column;
  gap: 0.35rem;
  padding: 0.35rem 0.45rem 0.65rem;
}

.knit-page-channel-switch {
  flex-shrink: 0;
  width: auto;
  margin: 0 0.45rem 0.55rem;
}

#knitFavoriteChannelSwitch {
  display: none !important;
}

.knit-page-channel-switch .knit-mine-channel-tab {
  padding-left: 0.28rem;
  padding-right: 0.28rem;
}

.knit-page-channel-switch .knit-mine-channel-tab-label {
  white-space: nowrap;
}

#knitMineStatsWrap.knit-page-channel-switch,
#knitPeerStatsWrap.knit-page-channel-switch {
  width: 100%;
  margin-left: 0;
  margin-right: 0;
}

#knitFollowView .knit-page-channel-switch {
  margin: 0.4rem 0.55rem 0.45rem;
}

/* 整页滚动：用户条与分类随作品上滑被推走 */
#knitFollowView {
  overflow-x: hidden;
  overflow-y: auto;
  overscroll-behavior-y: contain;
  -webkit-overflow-scrolling: touch;
}

#knitFollowView .knit-follow-layout {
  flex: 0 0 auto;
  min-height: min-content;
  overflow: visible;
  align-items: flex-start;
}

#knitFollowView .knit-follow-sidebar {
  overflow: visible;
  height: auto;
  max-height: none;
  align-self: flex-start;
}

#knitFollowView .knit-follow-list {
  flex: 0 0 auto;
  min-height: auto;
  overflow: visible;
}

#knitFollowView .knit-follow-main {
  overflow: visible;
  flex: 1 1 auto;
  min-height: auto;
  min-width: 0;
}

#knitFollowView .knit-follow-scroll,
#knitFollowView .knit-scrollport.knit-follow-scroll {
  flex: 0 0 auto;
  min-height: auto;
  height: auto;
  overflow: visible !important;
}

.knit-follow-main {
  flex: 1 1 0%;
  min-width: 0;
  min-height: 0;
  display: flex;
  flex-direction: column;
  background: var(--knit-main-bg);
}

.knit-follow-works-head {
  flex-shrink: 0;
  padding: 0.65rem 0.55rem 0.5rem;
  border-bottom: 1px solid var(--knit-divider);
  background: var(--knit-panel-bg);
}

.knit-follow-works-head-row {
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  gap: 0.65rem 0.85rem;
}

.knit-follow-works-head-text {
  min-width: 0;
  flex: 1 1 auto;
}

.knit-follow-works-head h3 {
  margin: 0;
  font-size: 0.95rem;
  color: var(--knit-text-heading);
}

.knit-follow-works-sub {
  margin: 0.2rem 0 0;
  font-size: 0.78rem;
  color: var(--knit-text-muted);
}

.knit-follow-search-wrap {
  position: relative;
  flex: 0 1 16.5rem;
  min-width: 10.5rem;
  max-width: 22rem;
}

.knit-follow-search {
  width: 100%;
  box-sizing: border-box;
  border: 1px solid var(--knit-control-border);
  background: var(--knit-input-bg);
  color: var(--knit-input-text);
  border-radius: 10px;
  padding: 0.42rem 2rem 0.42rem 0.7rem;
  font: inherit;
  font-size: 0.84rem;
}

.knit-follow-search::placeholder {
  color: var(--knit-text-muted);
}

.knit-follow-search:focus {
  outline: none;
  border-color: #0f766e;
  box-shadow: 0 0 0 2px rgba(15, 118, 110, 0.14);
}

.knit-follow-search-clear {
  position: absolute;
  right: 0.28rem;
  top: 50%;
  transform: translateY(-50%);
  width: 1.45rem;
  height: 1.45rem;
  border: none;
  border-radius: 999px;
  background: transparent;
  color: var(--knit-text-muted);
  cursor: pointer;
  font-size: 1.05rem;
  line-height: 1;
}

.knit-follow-search-clear:hover {
  color: var(--knit-text-heading);
  background: var(--knit-chrome-hover, rgba(0, 0, 0, 0.06));
}

.knit-follow-search-clear[hidden] {
  display: none;
}

.knit-follow-scroll {
  flex: 1 1 0%;
  min-height: 0;
  overflow-x: hidden;
  overflow-y: auto !important;
  cursor: default;
}

.knit-follow-works-list {
  display: flex;
  flex-direction: column;
  gap: 0.85rem;
  padding: 0.65rem 0.75rem 1rem;
  box-sizing: border-box;
}

.knit-follow-works-list > .knit-user-profile-empty {
  margin: 1.5rem auto;
  text-align: center;
}

.knit-follow-work {
  background: var(--knit-panel-bg);
  border: 1px solid var(--knit-panel-border);
  box-shadow: var(--knit-panel-shadow);
  border-radius: 12px;
  padding: 0.75rem;
}

.knit-follow-work-author {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  margin-bottom: 0.55rem;
}

.knit-follow-work-avatar {
  width: 2rem;
  height: 2rem;
  font-size: 0.8rem;
}

.knit-follow-work-author-name {
  font-size: 0.92rem;
  font-weight: 700;
  color: var(--knit-text-heading);
}

.knit-follow-work-main {
  display: flex;
  gap: 0.85rem;
  align-items: stretch;
}

.knit-follow-work-left {
  flex-shrink: 0;
  width: min(42%, 280px);
  min-width: 140px;
}

.knit-follow-work-figure {
  margin: 0;
}

.knit-follow-work-img {
  display: block;
  width: 100%;
  aspect-ratio: 4 / 3;
  object-fit: cover;
  border-radius: 8px;
  background: var(--knit-control-hover-bg);
  cursor: pointer;
}

.knit-follow-work-footer {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0.35rem 0.85rem;
  margin-top: 0.45rem;
  font-size: 0.78rem;
  color: var(--knit-text-muted);
}

.knit-follow-work-footer .knit-like-btn--follow {
  margin-left: auto;
}

.knit-follow-work-intro {
  flex: 1;
  min-width: 0;
  min-height: 0;
  font-size: 0.86rem;
  line-height: 1.55;
  color: var(--knit-text-body);
  white-space: pre-wrap;
  overflow-wrap: anywhere;
  word-break: break-word;
  overflow: hidden;
}

@media (max-width: 640px) {
  .knit-follow-work-main {
    flex-direction: column;
    align-items: stretch;
  }

  .knit-follow-work-left {
    width: 100%;
  }

  .knit-follow-work-intro {
    max-height: none;
    overflow: visible;
  }
}

.knit-favorite-list {
  flex: 1;
  min-height: 0;
  overflow-y: auto !important;
  -webkit-overflow-scrolling: touch;
  overscroll-behavior: contain;
  display: grid;
  align-content: start;
  align-items: start;
  grid-auto-rows: min-content;
  gap: 0.75rem;
  padding: 0 0.45rem 0.65rem;
}

.knit-favorite-folder {
  border: 1px solid var(--knit-panel-border);
  box-shadow: var(--knit-panel-shadow);
  border-radius: 12px;
  background: var(--knit-panel-bg);
  padding: 0.7rem;
  min-width: 0;
  max-width: 100%;
  height: auto;
  min-height: 0;
  align-self: start;
  box-sizing: border-box;
  -webkit-touch-callout: none;
  transition: border-color 0.15s ease, box-shadow 0.15s ease, opacity 0.16s ease;
}

.knit-favorite-folder.is-collapsed {
  padding-top: 0.45rem;
  padding-bottom: 0.45rem;
}

.knit-favorite-folder.is-tearing {
  opacity: 0.55;
  touch-action: none;
}

body.knit-favorite-folder-tearing {
  cursor: grabbing;
  user-select: none;
  -webkit-user-select: none;
}

.knit-favorite-folder-tear-ghost {
  position: fixed;
  z-index: 14050;
  left: 0;
  top: 0;
  max-width: min(16rem, 70vw);
  padding: 0.42rem 0.75rem;
  border-radius: 999px;
  background: color-mix(in srgb, var(--knit-chrome-bg, #fff) 92%, transparent);
  box-shadow: 0 10px 28px rgba(15, 23, 42, 0.22);
  color: var(--knit-text-heading);
  font-size: 0.84rem;
  font-weight: 700;
  line-height: 1.2;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  pointer-events: none;
  will-change: transform;
  transform: translate3d(0, 0, 0);
}

.knit-favorite-folder--drop-target {
  border-color: #0f766e;
  box-shadow: 0 0 0 2px rgba(15, 118, 110, 0.22);
}

.knit-favorite-folder--focus {
  border-color: #0f766e;
  box-shadow: 0 0 0 2px rgba(15, 118, 110, 0.28);
  animation: knit-favorite-folder-focus-pulse 1.6s ease;
}

.knit-public-favorite-login {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 0.55rem 1rem;
  margin: 0 0.45rem 0.7rem;
  padding: 0.55rem 0.75rem;
  border: 1px solid var(--knit-panel-border);
  border-radius: 10px;
  background: var(--knit-panel-bg);
  color: var(--knit-text-muted);
  font-size: 0.78rem;
}

.knit-public-favorite-login__link {
  color: var(--knit-text-heading);
  text-decoration: underline;
  text-underline-offset: 2px;
}

body.knit-page--public-favorite .knit-sidebar,
body.knit-page--public-favorite .knit-topbar,
body.knit-page--public-favorite #knitBottomNav,
body.knit-page--public-favorite .knit-search-wrap,
body.knit-page--public-favorite .knit-mobile-home-tabs,
body.knit-page--public-favorite .knit-mobile-notes-btn,
body.knit-page--public-favorite .knit-mobile-search-toggle,
body.knit-page--public-favorite .knit-mobile-fav-float-btn,
body.knit-page--public-favorite #knitMobileMoreSheet {
  display: none !important;
}

body.knit-page--public-favorite .knit-app,
body.knit-page--public-favorite .knit-main,
body.knit-page--public-favorite .knit-body {
  display: flex;
  flex-direction: column;
  min-height: 0;
  height: 100%;
}

body.knit-page--public-favorite .knit-main {
  flex: 1 1 auto;
  margin-left: 0;
  width: 100%;
  padding-inline: 0;
}

body.knit-page--public-favorite #knitFavoriteView {
  display: flex !important;
  flex-direction: column;
  flex: 1 1 auto;
  min-height: 0;
  max-width: none;
  margin: 0;
  padding: 0.35rem 0 0;
}

body.knit-page--public-favorite #knitFavoriteView .knit-favorite-view-head {
  flex: 0 0 auto;
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 0.55rem 0.75rem;
  padding: 0.7rem max(0.9rem, env(safe-area-inset-right, 0px)) 0.35rem
    max(0.9rem, env(safe-area-inset-left, 0px));
}

body.knit-page--public-favorite #knitFavoriteView .knit-favorite-view-head-text {
  flex: 1 1 8rem;
  min-width: 0;
}

body.knit-page--public-favorite #knitFavoriteView .knit-favorite-view-head h2 {
  margin: 0;
  font-size: 1.12rem;
  letter-spacing: -0.02em;
  line-height: 1.25;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

body.knit-page--public-favorite #knitFavoriteView .knit-favorite-view-head p {
  margin: 0.18rem 0 0;
  font-size: 0.76rem;
  color: var(--knit-text-muted);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.knit-favorite-public-brand {
  display: none;
  flex: 0 0 auto;
  color: var(--knit-text-heading);
  text-decoration: none;
  font-size: 0.82rem;
  font-weight: 750;
  letter-spacing: 0.02em;
  white-space: nowrap;
}

body.knit-page--public-favorite .knit-favorite-public-brand {
  display: inline-flex;
}

.knit-favorite-public-brand:hover {
  color: var(--knit-accent, #c93030);
}

.knit-favorite-public-owner {
  display: none;
  position: relative;
  flex: 0 0 auto;
  width: 2.15rem;
  height: 2.15rem;
}

body.knit-page--public-favorite .knit-favorite-public-owner {
  display: block;
}

.knit-favorite-public-avatar {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 2.15rem;
  height: 2.15rem;
  border-radius: 999px;
  background: var(--knit-control-bg, #e5e7eb);
  color: var(--knit-text-heading);
  font-size: 0.82rem;
  font-weight: 750;
  overflow: hidden;
}

.knit-favorite-public-avatar--img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.knit-favorite-public-login-btn {
  display: none;
  flex: 0 0 auto;
  align-items: center;
  justify-content: center;
  min-height: 2rem;
  padding: 0 0.85rem;
  border: 1px solid var(--knit-control-border);
  border-radius: 999px;
  background: var(--knit-text-heading, #111827);
  color: #fff;
  text-decoration: none;
  font-size: 0.78rem;
  font-weight: 650;
  white-space: nowrap;
}

body.knit-page--public-favorite .knit-favorite-public-login-btn {
  display: inline-flex;
}

.knit-favorite-public-login-btn:hover {
  filter: brightness(1.08);
}

body.knit-page--public-favorite #knitFavoriteChannelSwitch {
  display: flex !important;
  flex: 0 0 auto;
  width: auto;
  margin: 0.15rem max(0.9rem, env(safe-area-inset-right, 0px)) 0.35rem
    max(0.9rem, env(safe-area-inset-left, 0px));
}

.knit-favorite-public-head-link {
  color: var(--knit-text-heading);
  text-decoration: none;
  font-weight: 600;
}

.knit-favorite-public-head-link:hover {
  text-decoration: underline;
  text-underline-offset: 2px;
}

body.knit-page--public-favorite #knitPublicFavoriteLoginBanner {
  display: none !important;
}

body.knit-page--public-favorite #knitFavoritePublicBrowse {
  display: flex;
  flex: 1 1 auto;
  flex-direction: column;
  min-height: 0;
}

.knit-favorite-public-toolbar {
  display: flex;
  align-items: center;
  gap: 0.45rem;
  flex: 0 0 auto;
  position: relative;
  z-index: 8;
  padding: 0.35rem max(0.9rem, env(safe-area-inset-right, 0px)) 0.5rem
    max(0.9rem, env(safe-area-inset-left, 0px));
}

.knit-favorite-public-search-wrap {
  flex: 1 1 auto;
  min-width: 0;
}

.knit-favorite-public-cols {
  display: inline-flex;
  align-items: center;
  flex: 0 0 auto;
  gap: 2px;
  padding: 2px;
  border: 1px solid var(--knit-control-border);
  border-radius: 8px;
  background: var(--knit-control-bg);
}

.knit-favorite-public-cols-btn {
  appearance: none;
  min-width: 1.55rem;
  height: 1.4rem;
  margin: 0;
  padding: 0 0.38rem;
  border: none;
  border-radius: 6px;
  background: transparent;
  color: var(--knit-control-text);
  font: inherit;
  font-size: 0.72rem;
  font-weight: 600;
  line-height: 1;
  cursor: pointer;
}

.knit-favorite-public-cols-btn:hover {
  background: var(--knit-control-hover-bg);
}

.knit-favorite-public-cols-btn.is-active {
  background: var(--knit-pill-active-bg);
  color: #fff;
}

html[data-knit-theme="dark"] .knit-favorite-public-cols-btn.is-active {
  background: var(--knit-control-bg);
  color: var(--knit-text-heading);
}

body.knit-page--public-favorite #knitFavoritePublicScrollport {
  flex: 1 1 auto;
  min-height: 0;
  overflow: auto;
  -webkit-overflow-scrolling: touch;
}

body.knit-page--public-favorite #knitFavoritePublicSleeve,
body.knit-page--public-favorite #knitFavoritePublicGrid {
  min-width: 0 !important;
}

body.knit-page--public-favorite #knitFavoriteList,
body.knit-page--public-favorite .knit-favorite-view-toolbar {
  display: none !important;
}

body.knit-favorite-readonly .knit-favorite-view-toolbar-actions,
body.knit-favorite-readonly .knit-favorite-view-toolbar-new,
body.knit-favorite-readonly .knit-favorite-folder-more,
body.knit-favorite-readonly .knit-favorite-batch-bar {
  display: none !important;
}

body.knit-page--public-favorite #knitFpFollowBtn,
body.knit-page--public-favorite #knitFpDmBtn,
body.knit-page--public-favorite #knitFpLikeBtn,
body.knit-page--public-favorite #knitFpFavoriteBtn,
body.knit-page--public-favorite #knitFpShareBtn {
  display: none !important;
}

#knitPublicFavoriteMoreModalLoginBtn.knit-dup-modal__ok {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  text-decoration: none;
  box-sizing: border-box;
}

.knit-favorite-public-browse {
  display: flex;
  flex-direction: column;
  min-height: 0;
}

.knit-favorite-public-browse[hidden] {
  display: none !important;
}

.knit-favorite-public-scroll {
  position: relative;
}

.knit-favorite-public-colors {
  box-sizing: border-box;
  width: min(100%, var(--knit-grid-ref-w, 1200px));
  max-width: 100%;
  margin: 1.25rem auto 2.5rem;
  padding: 0 max(0.75rem, env(safe-area-inset-left, 0px)) 1.5rem
    max(0.75rem, env(safe-area-inset-right, 0px));
}

.knit-favorite-public-colors__head {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 0.55rem 1rem;
  margin: 0 0 0.75rem;
  padding-top: 0.85rem;
  border-top: 1px solid var(--knit-panel-border);
}

.knit-favorite-public-colors__head-text {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  gap: 0.35rem 0.85rem;
  min-width: 0;
}

.knit-favorite-public-colors__title {
  margin: 0;
  font-size: 1rem;
  font-weight: 700;
  color: var(--knit-text-heading);
  letter-spacing: 0.04em;
}

.knit-favorite-public-colors__meta {
  margin: 0;
  font-size: 0.78rem;
  color: var(--knit-text-muted);
}

.knit-favorite-public-colors__actions {
  display: inline-flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0.4rem;
}

.knit-favorite-public-colors__btn {
  border: 1px solid var(--knit-control-border);
  border-radius: 999px;
  background: var(--knit-control-bg);
  color: var(--knit-control-text);
  font-size: 0.78rem;
  cursor: pointer;
  padding: 0.28rem 0.75rem;
}

.knit-favorite-public-colors__btn:hover {
  border-color: #0f766e;
  color: #0f766e;
}

@keyframes knit-favorite-folder-focus-pulse {
  0% {
    box-shadow: 0 0 0 0 rgba(15, 118, 110, 0.35);
  }
  40% {
    box-shadow: 0 0 0 4px rgba(15, 118, 110, 0.18);
  }
  100% {
    box-shadow: 0 0 0 2px rgba(15, 118, 110, 0.12);
  }
}

html[data-knit-theme="dark"] .knit-favorite-folder--drop-target {
  border-color: #2dd4bf;
  box-shadow: 0 0 0 2px rgba(45, 212, 191, 0.28);
}

html[data-knit-theme="dark"] .knit-favorite-folder--focus {
  border-color: #2dd4bf;
  box-shadow: 0 0 0 2px rgba(45, 212, 191, 0.3);
}

.knit-favorite-folder-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 0.5rem;
  margin-bottom: 0.55rem;
}

.knit-favorite-folder-toggle {
  display: flex;
  align-items: center;
  gap: 0.4rem;
  min-width: 0;
  flex: 1 1 auto;
  margin: 0;
  padding: 0.05rem 0.15rem 0.05rem 0;
  border: none;
  background: transparent;
  color: inherit;
  font: inherit;
  text-align: left;
  cursor: pointer;
}

.knit-favorite-folder-toggle:hover,
.knit-favorite-folder-toggle:focus-visible {
  outline: none;
}

.knit-favorite-folder-toggle:hover .knit-favorite-folder-title,
.knit-favorite-folder-toggle:focus-visible .knit-favorite-folder-title {
  color: var(--knit-text-heading);
}

.knit-favorite-folder-chevron {
  flex-shrink: 0;
  width: 1rem;
  font-size: 0.82rem;
  line-height: 1;
  color: var(--knit-text-muted);
  transform: rotate(0deg);
  transition: transform 0.28s cubic-bezier(0.22, 1, 0.36, 1);
}

.knit-favorite-folder.is-collapsed .knit-favorite-folder-chevron {
  transform: rotate(-90deg);
}

.knit-favorite-folder-panel {
  display: block;
  min-width: 0;
}

.knit-favorite-folder.is-collapsed .knit-favorite-folder-panel,
.knit-favorite-folder-panel[hidden] {
  display: none !important;
}

.knit-favorite-folder.is-collapsed .knit-favorite-folder-head {
  margin-bottom: 0;
}

.knit-favorite-folder-body {
  display: flex;
  flex-direction: column;
  gap: 0.55rem;
  min-width: 0;
}

.knit-favorite-folder-body > * {
  flex: 0 0 auto;
}

.knit-favorite-folder-head-text {
  min-width: 0;
  flex: 1 1 auto;
}

.knit-favorite-folder-title {
  margin: 0;
  font-size: 0.9rem;
  font-weight: 700;
  color: var(--knit-text-heading);
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.knit-favorite-folder-meta {
  margin: 0;
  font-size: 0.75rem;
  color: var(--knit-text-muted);
}

.knit-favorite-folder-more {
  position: relative;
  flex: 0 0 auto;
  margin-left: auto;
}

.knit-favorite-folder-more-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 1.7rem;
  height: 1.7rem;
  padding: 0;
  border: none;
  border-radius: 8px;
  background: transparent;
  color: var(--knit-text-subtle);
  cursor: pointer;
  transition: background 0.15s ease, color 0.15s ease;
}

.knit-favorite-folder-more-btn:hover,
.knit-favorite-folder-more-btn:focus-visible {
  background: var(--knit-control-active-bg);
  color: var(--knit-text-heading);
  outline: none;
}

.knit-favorite-folder-more.is-open .knit-favorite-folder-more-btn {
  background: var(--knit-control-active-bg);
  color: var(--knit-text-heading);
}

.knit-favorite-folder-more-btn__dots {
  display: block;
  width: 3.5px;
  height: 3.5px;
  border-radius: 50%;
  background: currentColor;
  box-shadow: -5px 0 0 currentColor, 5px 0 0 currentColor;
}

.knit-favorite-folder-menu {
  position: absolute;
  top: calc(100% + 0.32rem);
  right: 0;
  z-index: 20;
  min-width: 11.25rem;
  padding: 0.38rem;
  border: 1px solid var(--knit-panel-border);
  border-radius: 12px;
  background: var(--knit-modal-bg);
  box-shadow: 0 10px 32px rgba(15, 23, 42, 0.12), 0 0 0 1px rgba(15, 23, 42, 0.04);
  box-sizing: border-box;
}

body > .knit-favorite-folder-menu {
  position: fixed;
  z-index: 16050;
  max-height: min(70vh, calc(100dvh - var(--knit-bottom-nav-h, 0px) - env(safe-area-inset-bottom, 0px) - 16px));
  overflow-x: hidden;
  overflow-y: auto;
  -webkit-overflow-scrolling: touch;
}

.knit-favorite-folder-menu[hidden] {
  display: none !important;
}

.knit-favorite-folder-menu__sep {
  height: 1px;
  margin: 0.32rem 0.42rem;
  background: var(--knit-divider);
}

.knit-favorite-folder-menu__item {
  display: flex;
  align-items: center;
  width: 100%;
  margin: 0;
  padding: 0.5rem 0.7rem;
  border: none;
  border-radius: 8px;
  background: transparent;
  font: inherit;
  font-size: 0.82rem;
  font-weight: 500;
  color: var(--knit-text-body);
  text-align: left;
  cursor: pointer;
  box-sizing: border-box;
  transition: background 0.12s ease, color 0.12s ease;
}

.knit-favorite-folder-menu__item:hover,
.knit-favorite-folder-menu__item:focus-visible {
  background: var(--knit-control-hover-bg);
  color: var(--knit-text-heading);
  outline: none;
}

.knit-favorite-folder-menu__item.is-copied {
  color: #0f766e;
}

.knit-favorite-folder-menu__item--danger {
  color: #dc2626;
}

.knit-favorite-folder-menu__item--danger:hover,
.knit-favorite-folder-menu__item--danger:focus-visible {
  background: rgba(220, 38, 38, 0.08);
  color: #b91c1c;
}

.knit-favorite-folder-copy {
  flex: 0 0 auto;
  border: 1px solid var(--knit-control-border);
  border-radius: 999px;
  background: var(--knit-control-bg);
  color: var(--knit-control-text);
  font-size: 0.75rem;
  cursor: pointer;
  padding: 0.2rem 0.62rem;
}

.knit-favorite-folder-copy:hover,
.knit-favorite-folder-copy:focus-visible {
  border-color: #0f766e;
  color: #0f766e;
  outline: none;
}

.knit-favorite-folder-copy.is-copied {
  border-color: #0f766e;
  color: #0f766e;
}

.knit-favorite-folder-remove {
  border: 1px solid var(--knit-control-border);
  border-radius: 999px;
  background: var(--knit-control-bg);
  color: var(--knit-control-text);
  font-size: 0.75rem;
  cursor: pointer;
  padding: 0.2rem 0.62rem;
}

.knit-favorite-folder-remove:hover {
  border-color: #ef4444;
  color: #ef4444;
}

.knit-favorite-share-enable {
  display: inline-flex;
  align-items: center;
  gap: 0.28rem;
  margin: 0;
  padding: 0.18rem 0.55rem;
  border: 1px solid var(--knit-control-border);
  border-radius: 999px;
  background: var(--knit-control-bg);
  color: var(--knit-control-text);
  font-size: 0.75rem;
  cursor: pointer;
  user-select: none;
  white-space: nowrap;
}

.knit-favorite-share-enable.knit-favorite-folder-menu__item {
  position: relative;
  display: flex;
  justify-content: space-between;
  gap: 0.75rem;
  border: none;
  border-radius: 8px;
  background: transparent;
  padding: 0.5rem 0.7rem;
  font-size: 0.82rem;
  font-weight: 500;
  color: var(--knit-text-body);
}

.knit-favorite-share-enable.is-on {
  border-color: #0f766e;
  color: #0f766e;
}

.knit-favorite-share-enable.knit-favorite-folder-menu__item.is-on {
  border: none;
  color: var(--knit-text-body);
}

.knit-favorite-share-enable.knit-favorite-folder-menu__item .knit-favorite-share-enable__input {
  position: absolute;
  opacity: 0;
  width: 1px;
  height: 1px;
  margin: 0;
  pointer-events: none;
}

.knit-favorite-share-enable__input {
  margin: 0;
  width: 0.85rem;
  height: 0.85rem;
  accent-color: #0f766e;
  cursor: pointer;
}

.knit-favorite-share-enable__text {
  line-height: 1;
}

.knit-favorite-share-enable__switch {
  flex-shrink: 0;
  width: 1.72rem;
  height: 1rem;
  border-radius: 999px;
  background: #d1d5db;
  position: relative;
  transition: background 0.18s ease;
}

.knit-favorite-share-enable__switch::after {
  content: "";
  position: absolute;
  top: 0.1rem;
  left: 0.1rem;
  width: 0.8rem;
  height: 0.8rem;
  border-radius: 50%;
  background: var(--knit-panel-bg);
  box-shadow: 0 1px 2px rgba(15, 23, 42, 0.18);
  transition: transform 0.18s ease;
}

.knit-favorite-share-enable.is-on .knit-favorite-share-enable__switch,
.knit-favorite-share-enable__input:checked + .knit-favorite-share-enable__text + .knit-favorite-share-enable__switch {
  background: #0f766e;
}

.knit-favorite-share-enable.is-on .knit-favorite-share-enable__switch::after,
.knit-favorite-share-enable__input:checked + .knit-favorite-share-enable__text + .knit-favorite-share-enable__switch::after {
  transform: translateX(0.72rem);
}

.knit-favorite-folder-remove.is-share-disabled,
.knit-favorite-folder-menu__item.is-share-disabled {
  opacity: 0.42;
}

.knit-favorite-folder-menu__item.is-share-disabled:hover {
  color: var(--knit-text-muted);
}

html[data-knit-theme="dark"] .knit-favorite-folder-menu {
  box-shadow: var(--knit-modal-shadow);
}

html[data-knit-theme="dark"] .knit-favorite-folder-menu__item--danger {
  color: #f87171;
}

html[data-knit-theme="dark"] .knit-favorite-folder-menu__item--danger:hover,
html[data-knit-theme="dark"] .knit-favorite-folder-menu__item--danger:focus-visible {
  background: rgba(248, 113, 113, 0.12);
  color: #fca5a5;
}

html[data-knit-theme="dark"] .knit-favorite-share-enable__switch {
  background: #4b5563;
}

html[data-knit-theme="dark"] .knit-favorite-share-enable.is-on .knit-favorite-share-enable__switch,
html[data-knit-theme="dark"] .knit-favorite-share-enable__input:checked + .knit-favorite-share-enable__text + .knit-favorite-share-enable__switch {
  background: #14b8a6;
}

html[data-knit-theme="dark"] .knit-favorite-folder-menu__item.is-copied {
  color: #2dd4bf;
}

.knit-favorite-items {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(min(100%, 160px), 1fr));
  align-items: start;
  gap: 0.55rem;
  min-width: 0;
  width: 100%;
}

.knit-favorite-item {
  position: relative;
  border: 1px solid var(--knit-panel-border);
  border-radius: 10px;
  background: var(--knit-panel-bg-alt);
  overflow: hidden;
  overflow: clip;
  min-width: 0;
  max-width: 100%;
}

.knit-favorite-item.is-selected,
.knit-favorite-color-shade.is-selected {
  border-color: #c93030;
  box-shadow: 0 0 0 2px rgba(201, 48, 48, 0.32);
}

.knit-favorite-item.is-selected::after,
.knit-favorite-color-shade.is-selected::after {
  content: "";
  position: absolute;
  top: 0.35rem;
  right: 0.35rem;
  z-index: 3;
  width: 1.05rem;
  height: 1.05rem;
  border-radius: 999px;
  background: #c93030 url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'><path fill='none' stroke='%23fff' stroke-width='2.2' stroke-linecap='round' stroke-linejoin='round' d='M3.5 8.2l3 3 6-6.4'/></svg>") center / 0.72rem no-repeat;
  pointer-events: none;
}

.knit-favorite-marquee {
  position: fixed;
  z-index: 13000;
  pointer-events: none;
  border: 1px solid rgba(201, 48, 48, 0.88);
  background: rgba(201, 48, 48, 0.16);
  border-radius: 3px;
}

.knit-favorite-batch-bar {
  flex-shrink: 0;
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0.4rem;
  margin: 0 0.45rem 0.55rem;
  padding: 0.45rem 0.55rem;
  border: 1px solid var(--knit-panel-border);
  border-radius: 10px;
  background: var(--knit-panel-bg);
}

.knit-favorite-batch-bar[hidden] {
  display: none !important;
}

.knit-favorite-batch-bar__count {
  font-size: 0.82rem;
  font-weight: 700;
  color: var(--knit-text-heading);
  margin-right: 0.15rem;
}

.knit-favorite-batch-bar__move {
  display: inline-flex;
  align-items: center;
  min-width: 0;
}

.knit-favorite-batch-bar__select {
  max-width: 10.5rem;
  border: 1px solid var(--knit-control-border);
  border-radius: 8px;
  padding: 0.32rem 0.45rem;
  font: inherit;
  font-size: 0.8rem;
  background: var(--knit-input-bg);
  color: var(--knit-input-text);
}

body.knit-favorite-selecting {
  user-select: none;
  -webkit-user-select: none;
}

.knit-favorite-thumb {
  width: 100%;
  aspect-ratio: 4 / 3;
  object-fit: cover;
  display: block;
  background: var(--knit-control-hover-bg);
}

.knit-favorite-thumb-btn {
  display: block;
  width: 100%;
  padding: 0;
  margin: 0;
  border: none;
  background: transparent;
  cursor: pointer;
}

.knit-favorite-thumb-btn:hover:not(:disabled) .knit-favorite-thumb {
  opacity: 0.92;
}

.knit-favorite-thumb-btn:disabled {
  cursor: not-allowed;
}

.knit-favorite-item-author {
  display: flex;
  align-items: center;
  gap: 0.42rem;
  min-height: 1.75rem;
}

.knit-favorite-item-avatar {
  width: 1.55rem;
  height: 1.55rem;
  flex-shrink: 0;
  font-size: 0.68rem;
}

.knit-favorite-item-avatar.knit-dm-chat__avatar--photo img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  border-radius: 50%;
}

.knit-favorite-item-author-name {
  font-size: 0.78rem;
  font-weight: 600;
  color: var(--knit-text-heading);
  line-height: 1.3;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.knit-favorite-item-body {
  padding: 0.45rem 0.52rem 0.55rem;
}

.knit-favorite-item-title {
  margin: 0;
  font-size: 0.79rem;
  color: var(--knit-text-heading);
  line-height: 1.35;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.knit-favorite-item-meta {
  margin: 0.28rem 0 0;
  font-size: 0.72rem;
  color: var(--knit-text-muted);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.knit-favorite-item[data-unavailable="1"] .knit-favorite-item-meta,
.knit-fav-float__item[data-unavailable="1"] .knit-fav-float__meta {
  color: #d97706;
  font-weight: 600;
}

html[data-knit-theme="dark"] .knit-favorite-item[data-unavailable="1"] .knit-favorite-item-meta,
html[data-knit-theme="dark"] .knit-fav-float__item[data-unavailable="1"] .knit-fav-float__meta {
  color: #fbbf24;
}

.knit-favorite-item-jump {
  margin-top: 0.35rem;
  border: 1px solid var(--knit-control-border);
  border-radius: 6px;
  background: transparent;
  color: var(--knit-control-text);
  font-size: 0.68rem;
  line-height: 1.2;
  cursor: pointer;
  padding: 0.14rem 0.42rem;
}

.knit-favorite-item-jump:hover {
  background: var(--knit-control-bg);
}

.knit-favorite-item--image .knit-favorite-item-meta {
  color: var(--knit-text-heading);
}

.knit-favorite-item-actions {
  margin-top: 0.45rem;
  display: flex;
  gap: 0.4rem;
}

.knit-favorite-item-btn {
  border: 1px solid var(--knit-control-border);
  border-radius: 999px;
  background: var(--knit-control-bg);
  color: var(--knit-control-text);
  font-size: 0.72rem;
  cursor: pointer;
  padding: 0.18rem 0.55rem;
}

.knit-favorite-item-btn:hover {
  border-color: var(--knit-control-active-border);
  color: var(--knit-text-heading);
}

.knit-favorite-view-head {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 1rem;
  flex-wrap: wrap;
  padding-bottom: 0.35rem;
}

.knit-favorite-view-head-text {
  min-width: 0;
}

.knit-favorite-view-toolbar {
  flex-shrink: 0;
  position: relative;
  z-index: 8;
  display: flex;
  align-items: center;
  gap: 0.5rem;
  flex-wrap: wrap;
  margin: 0 0.45rem 0.7rem;
  padding: 0;
  border: none;
  box-shadow: none;
  background: transparent;
}

.knit-favorite-search-wrap {
  position: relative;
  flex: 1 1 220px;
  min-width: 180px;
}

.knit-favorite-search {
  width: 100%;
  box-sizing: border-box;
  border: 1px solid var(--knit-control-border);
  background: var(--knit-input-bg);
  color: var(--knit-input-text);
  border-radius: 10px;
  padding: 0.46rem 2.35rem 0.46rem 0.75rem;
  font: inherit;
  font-size: 0.86rem;
}

.knit-favorite-search::placeholder {
  color: var(--knit-text-muted);
}

.knit-favorite-search:focus {
  outline: none;
  border-color: #0f766e;
  box-shadow: 0 0 0 2px rgba(15, 118, 110, 0.14);
}

.knit-favorite-search-wrap .knit-search-image-btn {
  color: var(--knit-text-subtle);
}

#knitFavoriteView .knit-favorite-search-wrap .knit-search-image-btn {
  display: none !important;
}

#knitFavoriteView .knit-favorite-search {
  padding-right: 0.75rem;
}

.knit-favorite-search-panel {
  left: 0;
  right: auto;
  width: min(100%, 420px);
  z-index: 30;
}

.knit-favorite-view-toolbar-actions {
  display: flex;
  align-items: center;
  gap: 0.4rem;
  flex: 0 1 auto;
  margin-left: auto;
}

.knit-favorite-view-toolbar-new {
  display: flex;
  align-items: center;
  gap: 0.35rem;
  min-width: 0;
}

.knit-favorite-view-toolbar-label {
  display: none;
}

.knit-favorite-view-toolbar-row {
  display: flex;
  align-items: center;
  gap: 0.45rem;
}

.knit-favorite-view-toolbar-input {
  width: 8.6rem;
  min-width: 0;
  border: 1px solid var(--knit-control-border);
  border-radius: 8px;
  background: var(--knit-input-bg);
  color: var(--knit-input-text);
  font-size: 0.84rem;
  padding: 0.46rem 0.56rem;
  font-family: inherit;
}

.knit-favorite-view-toolbar-input:focus {
  outline: none;
  border-color: #3b82f6;
  box-shadow: 0 0 0 2px rgba(59, 130, 246, 0.2);
}

.knit-favorite-view-toolbar-btn {
  flex-shrink: 0;
  border: 1px solid #2563eb;
  background: #3b82f6;
  color: #fff;
  border-radius: 8px;
  padding: 0.46rem 0.78rem;
  font-size: 0.82rem;
  font-weight: 700;
  cursor: pointer;
  white-space: nowrap;
  font-family: inherit;
}

.knit-favorite-view-toolbar-btn:hover {
  background: #2563eb;
}

.knit-favorite-view-toolbar-btn--quiet {
  border-color: var(--knit-control-border);
  background: var(--knit-control-bg);
  color: var(--knit-text-heading);
  font-weight: 600;
}

.knit-favorite-view-toolbar-btn--quiet:hover {
  background: var(--knit-control-hover-bg);
  color: var(--knit-text-heading);
}

@media (max-width: 720px) {
  .knit-favorite-search-wrap {
    flex: 1 1 100%;
  }

  .knit-favorite-search-panel {
    width: 100%;
  }

  .knit-favorite-public-toolbar {
    padding-inline: 0.65rem;
  }

  .knit-favorite-view-toolbar-actions {
    width: 100%;
    margin-left: 0;
  }

  .knit-favorite-view-toolbar-new {
    flex: 1 1 auto;
  }

  .knit-favorite-view-toolbar-input {
    flex: 1 1 auto;
    width: auto;
  }
}

.knit-favorite-folder-empty {
  margin: 0.35rem 0 0;
  padding: 0.75rem 0.8rem;
  font-size: var(--knit-empty-size);
  font-weight: var(--knit-empty-weight);
  letter-spacing: var(--knit-empty-ls);
  line-height: var(--knit-empty-lh);
  color: var(--knit-text-muted);
  text-align: center;
  border: 1px dashed var(--knit-panel-border);
  border-radius: 8px;
  background: var(--knit-panel-bg-alt);
}

.knit-favorite-color-bookmarks {
  display: flex;
  flex-direction: column;
  gap: 0.55rem;
  margin-top: 0.65rem;
}

.knit-favorite-color-bookmark {
  border: 1px solid var(--knit-panel-border);
  border-radius: 12px;
  background: var(--knit-panel-bg-alt);
  overflow: hidden;
  overflow: clip;
}

.knit-favorite-color-bookmark__head-row {
  display: flex;
  align-items: stretch;
  gap: 0;
  border-left: 4px solid #0f766e;
  background: linear-gradient(90deg, rgba(15, 118, 110, 0.1), transparent 72%);
}

.knit-favorite-color-bookmark__head {
  display: flex;
  align-items: center;
  gap: 0.45rem;
  flex: 1 1 auto;
  min-width: 0;
  width: auto;
  margin: 0;
  padding: 0.55rem 0.55rem 0.55rem 0.7rem;
  border: none;
  border-left: none;
  background: transparent;
  color: var(--knit-text-heading);
  cursor: pointer;
  text-align: left;
  font: inherit;
  transition: background 0.22s ease;
}

.knit-favorite-color-bookmark__rename {
  flex-shrink: 0;
  margin: 0.35rem 0.45rem 0.35rem 0;
  padding: 0.18rem 0.55rem;
  border: 1px solid rgba(15, 118, 110, 0.35);
  border-radius: 999px;
  background: rgba(255, 255, 255, 0.72);
  color: #0f766e;
  font: inherit;
  font-size: 0.68rem;
  font-weight: 650;
  cursor: pointer;
  align-self: center;
}

.knit-favorite-color-bookmark__rename:hover {
  border-color: #0f766e;
  background: var(--knit-panel-bg);
}

.knit-favorite-color-bookmark__head-row:hover {
  background: linear-gradient(90deg, rgba(15, 118, 110, 0.16), rgba(15, 118, 110, 0.03) 80%);
}

.knit-favorite-color-bookmark__chevron {
  flex-shrink: 0;
  width: 1rem;
  font-size: 0.78rem;
  line-height: 1;
  color: #0f766e;
  transform: rotate(0deg);
  transition: transform 0.28s cubic-bezier(0.22, 1, 0.36, 1);
}

.knit-favorite-color-bookmark.is-collapsed .knit-favorite-color-bookmark__chevron {
  transform: rotate(-90deg);
}

.knit-favorite-color-bookmark__title {
  flex: 1 1 auto;
  min-width: 0;
  font-size: 0.86rem;
  font-weight: 700;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.knit-favorite-color-bookmark__meta {
  flex: 0 0 auto;
  min-width: 0;
  font-size: 0.72rem;
  color: var(--knit-text-muted);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.knit-favorite-color-bookmark__panel {
  display: block;
  min-width: 0;
}

.knit-favorite-color-bookmark.is-collapsed .knit-favorite-color-bookmark__panel,
.knit-favorite-color-bookmark__panel[hidden] {
  display: none;
}

.knit-favorite-color-bookmark__body {
  padding: 0.55rem 0.65rem 0.7rem;
  border-top: 1px solid var(--knit-divider, rgba(15, 23, 42, 0.08));
  display: grid;
  grid-template-columns: minmax(140px, 180px) minmax(0, 1fr);
  gap: 0.65rem;
  align-items: start;
}

.knit-fav-float__color-bookmarks {
  margin: 0.35rem 0 0;
  gap: 0.4rem;
}

.knit-fav-float__color-bookmark {
  border-radius: 10px;
}

.knit-fav-float__color-bookmark .knit-favorite-color-bookmark__head-row {
  border-left-width: 3px;
}

.knit-fav-float__color-bookmark .knit-favorite-color-bookmark__head {
  padding: 0.42rem 0.35rem 0.42rem 0.5rem;
}

.knit-fav-float__color-bookmark .knit-favorite-color-bookmark__rename {
  margin: 0.28rem 0.35rem 0.28rem 0;
  padding: 0.12rem 0.42rem;
  font-size: 0.6rem;
}

.knit-fav-float__color-bookmark .knit-favorite-color-bookmark__title {
  font-size: 0.74rem;
}

.knit-fav-float__color-bookmark .knit-favorite-color-bookmark__meta {
  font-size: 0.62rem;
}

.knit-fav-float__color-bookmark-body {
  grid-template-columns: 1fr;
  gap: 0;
  padding: 0.15rem 0.35rem 0.4rem;
}

.knit-fav-float__color-bookmark-body .knit-fav-float__item {
  border-bottom-color: rgba(245, 158, 11, 0.28);
}

.knit-fav-float__color-bookmark-body .knit-fav-float__item:last-child {
  border-bottom: 0;
}

.knit-favorite-color-bookmark__body .knit-favorite-item--color-work {
  margin: 0;
}

.knit-favorite-color-bookmark__shades {
  display: flex;
  flex-direction: column;
  gap: 0.4rem;
  min-width: 0;
}

.knit-favorite-color-shade {
  position: relative;
  display: grid;
  grid-template-columns: 2.2rem minmax(0, 1fr) auto;
  gap: 0.5rem;
  align-items: center;
  padding: 0.35rem 0.4rem;
  border-radius: 8px;
  background: var(--knit-panel-bg);
  border: 1px solid var(--knit-panel-border);
}

.knit-favorite-color-shade__swatch {
  width: 2.2rem;
  height: 2.2rem;
  border-radius: 6px;
  box-sizing: border-box;
  border: 1px solid rgba(15, 23, 42, 0.14);
  background: repeating-conic-gradient(#e5e7eb 0% 25%, #fff 0% 50%) 50% / 8px 8px;
  box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.35);
}

.knit-favorite-color-shade__body {
  min-width: 0;
}

.knit-favorite-color-shade__title {
  margin: 0;
  font-size: 0.78rem;
  font-weight: 650;
  color: var(--knit-text-heading);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.knit-favorite-color-shade__meta {
  margin: 0.1rem 0 0;
  font-size: 0.68rem;
  color: var(--knit-text-muted);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

@media (max-width: 720px) {
  .knit-favorite-color-bookmark__body {
    grid-template-columns: 1fr;
  }
}

html[data-knit-theme="dark"] .knit-favorite-color-bookmark__head-row {
  border-left-color: #2dd4bf;
  background: linear-gradient(90deg, rgba(45, 212, 191, 0.14), transparent 72%);
}

html[data-knit-theme="dark"] .knit-favorite-color-bookmark__head-row:hover {
  background: linear-gradient(90deg, rgba(45, 212, 191, 0.22), rgba(45, 212, 191, 0.04) 80%);
}

html[data-knit-theme="dark"] .knit-favorite-color-bookmark__rename {
  background: rgba(34, 38, 47, 0.9);
  border-color: rgba(45, 212, 191, 0.4);
  color: #5eead4;
}

html[data-knit-theme="dark"] .knit-favorite-color-bookmark__rename:hover {
  background: rgba(42, 47, 58, 0.98);
  border-color: #5eead4;
}

html[data-knit-theme="dark"] .knit-favorite-color-bookmark__chevron {
  color: #5eead4;
}

html[data-knit-theme="dark"] .knit-favorite-color-shade__swatch {
  border-color: rgba(255, 255, 255, 0.16);
  background: repeating-conic-gradient(#2a2f3a 0% 25%, #1a1d24 0% 50%) 50% / 8px 8px;
}

html[data-knit-theme="dark"] .knit-fav-float__color-bookmark-body .knit-fav-float__item {
  border-bottom-color: var(--knit-divider);
}

.knit-favorite-modal__actions {
  gap: 0.5rem;
}

/* ---------- 收藏夹悬浮窗 ---------- */
/* 非模态悬浮窗，不遮挡页面点击（同私信窗） */
#knitFavoriteFloatModal.knit-dup-modal {
  inset: auto;
  top: 0;
  left: 0;
  width: 0;
  height: 0;
  padding: 0;
  display: block;
  background: transparent;
  pointer-events: none;
  overflow: visible;
  /* 高于作品详情全屏层（1000），保证色号可拖入 */
  z-index: 1600;
}

#knitFavoriteFloatModal .knit-fav-float__panel {
  pointer-events: auto;
  backface-visibility: hidden;
  background: var(--knit-paper-bg-warm);
  border: 1px solid #fcd34d;
  box-shadow: 0 18px 48px rgba(146, 64, 14, 0.18);
}

.knit-fav-float__panel {
  display: flex;
  flex-direction: column;
  position: relative;
  width: min(92vw, 20rem);
  height: min(88vh, 34rem);
  min-width: 16.5rem;
  min-height: 18rem;
  max-width: 92vw;
  max-height: 92vh;
  padding: 0;
  overflow: hidden;
  border-radius: 14px;
  background: var(--knit-paper-bg-warm);
  border: 1px solid #fcd34d;
  box-shadow: 0 18px 48px rgba(146, 64, 14, 0.18);
}

#knitFavoriteFloatModal .knit-fav-float__header,
.knit-fav-float__header {
  background: linear-gradient(180deg, #fffbeb 0%, #fef3c7 100%);
  border-bottom-color: #fde68a;
}

.knit-fav-float__icon {
  flex-shrink: 0;
  width: 2rem;
  height: 2rem;
  border-radius: 8px;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 1rem;
  font-weight: 700;
  color: #fff;
  background: linear-gradient(135deg, #fbbf24 0%, #f59e0b 100%);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.35);
}

.knit-fav-float__header .knit-dm-chat__title {
  color: #78350f;
}

.knit-fav-float__header .knit-dm-chat__sub {
  color: #b45309;
}

.knit-fav-float__toolbar {
  padding: 0.65rem 0.75rem 0.45rem;
  border-bottom: 1px solid #fde68a;
  background: var(--knit-paper-bg-warm);
  flex-shrink: 0;
}

.knit-fav-float__toolbar-label {
  display: block;
  margin-bottom: 0.35rem;
  font-size: 0.68rem;
  font-weight: 700;
  color: #92400e;
  letter-spacing: 0.02em;
}

.knit-fav-float__toolbar-row {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1fr) auto;
  gap: 0.35rem;
}

.knit-fav-float__select,
.knit-fav-float__input {
  width: 100%;
  border: 1px solid #fcd34d;
  border-radius: 8px;
  background: var(--knit-panel-bg);
  color: #78350f;
  font-size: 0.74rem;
  padding: 0.42rem 0.5rem;
  font-family: inherit;
}

.knit-fav-float__select:focus,
.knit-fav-float__input:focus {
  outline: 2px solid rgba(245, 158, 11, 0.35);
  outline-offset: 1px;
}

.knit-fav-float__new-btn {
  border: 1px solid #f59e0b;
  background: #fbbf24;
  color: #78350f;
  border-radius: 8px;
  padding: 0 0.65rem;
  font-size: 0.72rem;
  font-weight: 700;
  cursor: pointer;
  white-space: nowrap;
  font-family: inherit;
}

.knit-fav-float__new-btn:hover {
  background: #f59e0b;
  color: #fff;
}

.knit-fav-float__drop {
  margin: 0.65rem 0.75rem 0.35rem;
  padding: 0.85rem 0.75rem;
  border: 1.5px dashed #fbbf24;
  border-radius: 12px;
  background: linear-gradient(180deg, #fffbeb 0%, #fff 100%);
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 0.25rem;
  text-align: center;
  transition: border-color 0.15s ease, background 0.15s ease, transform 0.15s ease;
  flex-shrink: 0;
}

.knit-fav-float__drop-icon {
  font-size: 1.1rem;
  color: #f59e0b;
  line-height: 1;
}

.knit-fav-float__drop-text {
  font-size: 0.72rem;
  font-weight: 600;
  color: #b45309;
}

.knit-fav-float__panel--drop-target .knit-fav-float__drop,
#knitFavoriteFloatModal .knit-dm-chat__panel--drop-target .knit-fav-float__drop {
  border-color: #d97706;
  background: #fef3c7;
  transform: scale(1.01);
  box-shadow: 0 0 0 3px rgba(245, 158, 11, 0.18);
}

.knit-fav-float__hint {
  margin: 0 0.75rem 0.35rem;
  min-height: 1rem;
  font-size: var(--knit-hint-size);
  font-weight: var(--knit-hint-weight);
  letter-spacing: var(--knit-hint-ls);
  color: #b45309;
  line-height: var(--knit-hint-lh);
}

.knit-fav-float__hint:empty {
  display: none;
}

.knit-fav-float__list {
  flex: 1 1 auto;
  min-height: 0;
  overflow: auto;
  padding: 0 0.55rem 0.35rem;
}

.knit-fav-float__empty {
  margin: 0.5rem 0.2rem;
  padding: 0.85rem 0.75rem;
  border-radius: 10px;
  background: color-mix(in srgb, var(--knit-red) 8%, var(--knit-panel-bg));
  color: #b45309;
  font-size: var(--knit-empty-size);
  font-weight: var(--knit-empty-weight);
  letter-spacing: var(--knit-empty-ls);
  line-height: var(--knit-empty-lh);
  text-align: center;
}

.knit-fav-float__item {
  display: grid;
  grid-template-columns: 3rem minmax(0, 1fr) auto;
  gap: 0.55rem;
  align-items: center;
  padding: 0.45rem 0.35rem;
  border-bottom: 1px solid #fde68a;
}

.knit-fav-float__item:last-child {
  border-bottom: 0;
}

.knit-fav-float__thumb {
  width: 3rem;
  height: 3rem;
  border-radius: 8px;
  object-fit: cover;
  background: #fef3c7;
  border: 1px solid #fde68a;
}

.knit-fav-float__thumb--swatch {
  display: block;
  box-sizing: border-box;
  background: repeating-conic-gradient(#e5e7eb 0% 25%, #fff 0% 50%) 50% / 10px 10px;
  border: 1px solid rgba(15, 23, 42, 0.16);
  box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.35);
}

.knit-fav-float__item--color .knit-fav-float__item-title {
  color: #0f766e;
}

.knit-fav-float__item-body {
  min-width: 0;
}

.knit-fav-float__item-title {
  margin: 0;
  font-size: 0.74rem;
  font-weight: 700;
  color: #78350f;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.knit-fav-float__item-meta {
  margin: 0.12rem 0 0;
  font-size: 0.65rem;
  color: #b45309;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.knit-fav-float__item-actions {
  display: flex;
  flex-direction: column;
  gap: 0.2rem;
}

.knit-fav-float__item-btn {
  border: 1px solid #fcd34d;
  background: var(--knit-panel-bg);
  color: #92400e;
  border-radius: 6px;
  font-size: 0.62rem;
  padding: 0.15rem 0.35rem;
  cursor: pointer;
  font-family: inherit;
}

.knit-fav-float__item-btn:hover {
  border-color: #f59e0b;
  color: #78350f;
}

.knit-fav-float__footer {
  padding: 0.55rem 0.75rem 0.7rem;
  border-top: 1px solid #fde68a;
  background: var(--knit-paper-bg-warm);
  flex-shrink: 0;
}

.knit-fav-float__page-btn {
  width: 100%;
  border: 1px solid #fcd34d;
  background: var(--knit-panel-bg);
  color: #92400e;
  border-radius: 999px;
  padding: 0.45rem 0.75rem;
  font-size: 0.72rem;
  font-weight: 700;
  cursor: pointer;
  font-family: inherit;
}

.knit-fav-float__page-btn:hover {
  background: color-mix(in srgb, #fbbf24 18%, var(--knit-panel-bg));
  border-color: #f59e0b;
}

.knit-fav-float__panel .knit-dm-chat__resize--se {
  background: linear-gradient(135deg, transparent 50%, rgba(245, 158, 11, 0.55) 50%);
}

#knitFavoriteFloatModal .knit-dm-chat__panel--positioned {
  position: fixed;
  z-index: 1600;
  margin: 0;
}

#knitFavoriteFloatModal .knit-dm-chat__panel--minimizing {
  overflow: hidden;
}

#knitFavoriteFloatModal .knit-fav-float__panel.knit-dm-chat__panel--flipping {
  border-radius: 26px !important;
  box-shadow: 0 28px 70px rgba(146, 64, 14, 0.28);
  overflow: hidden;
}

#knitFavoriteFloatModal .knit-dm-chat__panel--minimized {
  min-width: 0;
  min-height: 0;
  max-width: none;
  max-height: none;
  border-radius: 10px 0 0 10px;
  box-shadow: -6px 0 28px rgba(146, 64, 14, 0.28);
}

#knitFavoriteFloatModal .knit-dm-chat__panel--minimizing .knit-dm-chat__resize-handles {
  opacity: 0;
  visibility: hidden;
  pointer-events: none;
  transition: none;
}

#knitFavoriteFloatModal .knit-dm-chat__panel--restoring {
  overflow: hidden;
}

/* 深色：收藏浮窗保留琥珀描边，底色跟主壳 panel，避免奶油块刺眼 */
html[data-knit-theme="dark"] #knitFavoriteFloatModal .knit-fav-float__panel,
html[data-knit-theme="dark"] .knit-fav-float__panel {
  background: var(--knit-panel-bg);
  border-color: rgba(251, 191, 36, 0.42);
  box-shadow: var(--knit-modal-shadow);
}

html[data-knit-theme="dark"] #knitFavoriteFloatModal .knit-fav-float__header,
html[data-knit-theme="dark"] .knit-fav-float__header {
  background: color-mix(in srgb, #f59e0b 16%, var(--knit-panel-bg));
  border-bottom-color: rgba(251, 191, 36, 0.28);
}

html[data-knit-theme="dark"] .knit-fav-float__header .knit-dm-chat__title {
  color: #fde68a;
}

html[data-knit-theme="dark"] .knit-fav-float__header .knit-dm-chat__sub,
html[data-knit-theme="dark"] .knit-fav-float__toolbar-label {
  color: #fbbf24;
}

html[data-knit-theme="dark"] .knit-fav-float__toolbar,
html[data-knit-theme="dark"] .knit-fav-float__footer {
  background: var(--knit-panel-bg);
  border-color: rgba(251, 191, 36, 0.28);
}

html[data-knit-theme="dark"] .knit-fav-float__page-btn {
  background: var(--knit-control-bg);
  color: #fde68a;
  border-color: rgba(251, 191, 36, 0.45);
}

html[data-knit-theme="dark"] .knit-fav-float__page-btn:hover {
  background: color-mix(in srgb, #f59e0b 18%, var(--knit-control-bg));
}

html[data-knit-theme="dark"] .knit-dm-minimized-dock__item--favorite {
  background: var(--knit-panel-bg);
  border-color: rgba(251, 191, 36, 0.42);
}

html[data-knit-theme="dark"] .knit-dm-minimized-dock__item--favorite:hover {
  background: color-mix(in srgb, #f59e0b 14%, var(--knit-panel-bg));
}

.knit-dm-chat__panel--minimizing .knit-dm-chat__minimize {
  opacity: 0;
  visibility: hidden;
  pointer-events: none;
  width: 0;
  min-width: 0;
  padding: 0;
  margin: 0;
  overflow: hidden;
  transition: none;
}

.knit-fav-float__toolbar,
.knit-fav-float__drop,
.knit-fav-float__hint,
.knit-fav-float__list,
.knit-fav-float__footer,
.knit-fav-float__resize-handles {
  transition: opacity 0.2s ease;
}

#knitFavoriteFloatModal .knit-dm-chat__panel--drop-target {
  box-shadow: 0 0 0 3px rgba(245, 158, 11, 0.28), 0 18px 48px rgba(146, 64, 14, 0.22);
}

/* ---------- 点点（首页最小化 AI） ---------- */
#knitDiandianModal.knit-dup-modal {
  inset: auto;
  top: 0;
  left: 0;
  width: 0;
  height: 0;
  padding: 0;
  display: block;
  background: transparent;
  pointer-events: none;
  overflow: visible;
  z-index: 1600;
}

#knitDiandianModal .knit-diandian__panel {
  pointer-events: auto;
  display: flex;
  flex-direction: column;
  width: min(92vw, clamp(18rem, 25vw, 34rem));
  height: min(88vh, clamp(24rem, 62vh, 52rem));
  min-width: min(17.5rem, calc(100vw - 1.25rem));
  min-height: min(22.5rem, calc(100vh - 2rem));
  max-width: 94vw;
  max-height: 94vh;
  padding: 0;
  overflow: hidden;
  border-radius: 14px;
  background:
    radial-gradient(circle at 10% -8%, rgba(201, 48, 48, 0.07), transparent 34%),
    #fffdfb;
  border: 1px solid #e7e5e4;
  box-shadow: 0 18px 48px rgba(28, 25, 23, 0.18);
}

#knitDiandianModal .knit-dm-chat__panel--positioned {
  position: fixed;
  z-index: 1600;
  margin: 0;
}

#knitDiandianModal .knit-diandian__header,
.knit-diandian__header {
  background:
    linear-gradient(180deg, #fff 0%, #fafaf9 100%);
  border-bottom-color: #efece9;
  padding: 0.55rem 0.65rem 0.5rem 0.75rem;
}

#knitDiandianModal .knit-diandian__panel .knit-dm-chat__resize--se,
.knit-diandian__resize {
  opacity: 1;
  background: linear-gradient(135deg, transparent 50%, rgba(201, 48, 48, 0.5) 50%);
}

.knit-diandian__avatar {
  position: relative;
  flex-shrink: 0;
  width: calc(2.35rem * var(--knit-diandian-ui-scale, 1));
  height: calc(2.35rem * var(--knit-diandian-ui-scale, 1));
  border-radius: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  background: transparent;
  box-shadow: none;
}

.knit-diandian__cocoon,
.knit-diandian__spider {
  width: 2.25rem;
  height: 2.25rem;
  display: block;
  overflow: visible;
}

.knit-diandian__cocoon--icon {
  width: calc(2.35rem * var(--knit-diandian-ui-scale, 1));
  height: calc(2.35rem * var(--knit-diandian-ui-scale, 1));
}

.knit-diandian__thread {
  fill: none;
  stroke: #c4b08a;
  stroke-width: 1.2;
  stroke-linecap: round;
}

.knit-diandian__knot {
  fill: #e8d4a4;
  stroke: #c9ae78;
  stroke-width: 0.75;
}

.knit-diandian__silk-body {
  fill: #f3dfb0;
  stroke: #d7b56e;
  stroke-width: 0.85;
}

.knit-diandian__silk-inner {
  fill: #e4c48a;
  opacity: 0.72;
}

.knit-diandian__silk--outer,
.knit-diandian__silk--mid,
.knit-diandian__silk--core {
  fill: #f3dfb0;
}

.knit-diandian__wrap {
  stroke: #c9ae78;
  stroke-width: 1.05;
  opacity: 0.78;
}

.knit-diandian__wrap--a,
.knit-diandian__wrap--e {
  opacity: 0.55;
  stroke-width: 0.9;
}

.knit-diandian__sheen {
  fill: rgba(255, 255, 255, 0.42);
  pointer-events: none;
}

.knit-diandian__cocoon--icon {
  animation: knit-diandian-breathe 2.8s ease-in-out infinite;
}

@keyframes knit-diandian-breathe {
  0%,
  100% { transform: scale(1, 1); }
  50% { transform: scale(1.04, 0.96); }
}

@keyframes knit-diandian-sway {
  0%,
  100% { transform: rotate(-3.2deg); }
  45% { transform: rotate(3.6deg); }
  70% { transform: rotate(-1.2deg); }
}

@keyframes knit-diandian-sway-fast {
  0%,
  100% { transform: rotate(-6deg) scale(1.04); }
  50% { transform: rotate(6deg) scale(1.08); }
}

@keyframes knit-diandian-hang-in {
  from {
    opacity: 0;
    transform: translateY(-18px);
  }
  to {
    opacity: 1;
    transform: none;
  }
}

@media (prefers-reduced-motion: reduce) {
  .knit-diandian__cocoon,
  .knit-diandian__spider {
    animation: none;
  }
}

.knit-diandian__header .knit-dm-chat__title {
  color: var(--knit-text-heading);
}

.knit-diandian__header .knit-dm-chat__sub {
  color: var(--knit-text-muted);
}

.knit-diandian__growth {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr) auto;
  align-items: center;
  gap: 0.4rem;
  padding: 0.28rem 0.8rem;
  border-bottom: 1px solid #efece9;
  background: #fafaf9;
  font-size: 0.64rem;
  font-weight: 700;
  color: var(--knit-text-muted);
}

.knit-diandian__bar {
  height: 0.38rem;
  border-radius: 999px;
  background: #e7e5e4;
  overflow: hidden;
}

.knit-diandian__bar i {
  display: block;
  height: 100%;
  background: linear-gradient(90deg, #c93030, #1c1917);
}

.knit-diandian__tabs {
  display: flex;
  gap: 0.15rem;
  padding: 0.2rem 0.45rem 0;
  border-bottom: 1px solid #efece9;
  background: var(--knit-panel-bg);
}

.knit-diandian__tab {
  flex: 1;
  border: 0;
  background: transparent;
  padding: 0.48rem 0.3rem 0.42rem;
  font-size: 0.74rem;
  font-weight: 700;
  color: var(--knit-text-muted);
  cursor: pointer;
  font-family: inherit;
  border-radius: 8px 8px 0 0;
}

.knit-diandian__tab:hover {
  color: var(--knit-text-body);
  background: #fafaf9;
}

.knit-diandian__tab.is-active {
  color: var(--knit-text-heading);
  box-shadow: inset 0 -2px 0 #c93030;
}

.knit-diandian__toolbar {
  padding: 0.5rem 0.7rem 0.4rem;
  border-bottom: 1px solid #efece9;
  background: var(--knit-panel-bg);
  flex-shrink: 0;
}

.knit-diandian__groups {
  display: flex;
  flex-wrap: wrap;
  gap: 0.3rem;
  margin-bottom: 0.4rem;
}

.knit-diandian__chip {
  border: 1px solid #d6d3d1;
  background: var(--knit-panel-bg);
  color: var(--knit-text-body);
  border-radius: 999px;
  padding: 0.18rem 0.55rem;
  font-size: 0.68rem;
  font-weight: 700;
  cursor: pointer;
  font-family: inherit;
}

.knit-diandian__chip.is-active {
  background: #1c1917;
  border-color: #1c1917;
  color: #fff;
}

.knit-diandian__toolbar-row {
  display: flex;
  flex-wrap: wrap;
  align-items: stretch;
  gap: 0.3rem;
}

.knit-diandian__toolbar-row .knit-diandian__input {
  flex: 1 1 6.5rem;
  min-width: 0;
}

.knit-diandian__toolbar-row .knit-diandian__btn {
  flex: 0 0 auto;
}

.knit-diandian__input {
  width: 100%;
  border: 1px solid #d6d3d1;
  border-radius: 8px;
  background: var(--knit-panel-bg);
  color: var(--knit-text-heading);
  font-size: 0.74rem;
  padding: 0.38rem 0.5rem;
  font-family: inherit;
}

.knit-diandian__btn {
  border: 1px solid #d6d3d1;
  background: var(--knit-panel-bg);
  color: var(--knit-text-body);
  border-radius: 8px;
  padding: 0 0.55rem;
  font-size: 0.7rem;
  font-weight: 700;
  cursor: pointer;
  white-space: nowrap;
  font-family: inherit;
}

.knit-diandian__btn--accent {
  background: #c93030;
  border-color: #b42318;
  color: #fff;
}

.knit-diandian__hint {
  margin: 0.4rem 0.7rem 0;
  padding: 0.32rem 0.55rem;
  min-height: 0;
  border-radius: 8px;
  background: color-mix(in srgb, var(--knit-red) 8%, var(--knit-panel-bg));
  font-size: var(--knit-hint-size);
  font-weight: var(--knit-hint-weight);
  color: #7c2d12;
}

.knit-diandian__hint:empty {
  display: none;
  margin: 0;
  padding: 0;
}

.knit-diandian__list {
  flex: 1 1 auto;
  min-height: 0;
  overflow: auto;
  padding: 0.45rem 0.6rem 0.55rem;
  overscroll-behavior: contain;
}

.knit-diandian__grid-bar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 0.4rem;
  margin: 0 0 0.4rem;
  font-size: 0.68rem;
  color: var(--knit-text-muted);
}

.knit-diandian__all {
  display: inline-flex;
  align-items: center;
  gap: 0.28rem;
  font-weight: 700;
  cursor: pointer;
}

.knit-diandian__grid {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 0.35rem;
}

.knit-diandian__list--grid {
  user-select: none;
  -webkit-user-select: none;
}

.knit-diandian__tile {
  position: relative;
  aspect-ratio: 1;
  border-radius: 8px;
  overflow: hidden;
  border: 1px solid #e7e5e4;
  background: var(--knit-panel-bg-alt);
  cursor: pointer;
  user-select: none;
  -webkit-user-select: none;
  transition: opacity 0.16s ease, border-color 0.16s ease, box-shadow 0.16s ease;
}

.knit-diandian__marquee {
  position: fixed;
  z-index: 13000;
  pointer-events: none;
  border: 1px solid rgba(201, 48, 48, 0.88);
  background: rgba(201, 48, 48, 0.16);
  border-radius: 3px;
}

.knit-diandian__tile.is-selected {
  border-color: #c93030;
  box-shadow: 0 0 0 2px rgba(201, 48, 48, 0.35);
}

.knit-diandian__tile img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}

.knit-diandian__tile.is-unavailable img,
.knit-diandian__tile.is-unavailable .knit-diandian__ph {
  filter: grayscale(0.55) brightness(0.82);
}

.knit-diandian__gone {
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0;
  z-index: 2;
  padding: 0.22rem 0.16rem 0.28rem;
  background: linear-gradient(180deg, transparent, rgba(28, 25, 23, 0.82));
  color: #fbbf24;
  font-size: 0.62rem;
  font-weight: 800;
  letter-spacing: 0.04em;
  text-align: center;
  pointer-events: none;
}

.knit-diandian__check {
  position: absolute;
  top: 0.22rem;
  left: 0.22rem;
  z-index: 1;
  width: 1.15rem;
  height: 1.15rem;
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: 4px;
  background: rgba(255, 255, 255, 0.88);
  box-shadow: 0 1px 3px rgba(28, 25, 23, 0.16);
}

.knit-diandian__check input {
  margin: 0;
  width: 0.78rem;
  height: 0.78rem;
}

.knit-diandian__ph {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 100%;
  height: 100%;
  font-size: 0.95rem;
  font-weight: 800;
  color: var(--knit-text-subtle);
}

.knit-diandian__empty {
  margin: 0.55rem 0.2rem;
  padding: 0.85rem 0.75rem;
  border-radius: 10px;
  background: var(--knit-panel-bg-alt);
  color: var(--knit-text-muted);
  font-size: var(--knit-empty-size);
  text-align: center;
}

.knit-diandian__ask {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  gap: 0.4rem;
  padding: 0.5rem 0.7rem 0.7rem;
  border-top: 1px solid #efece9;
  background: var(--knit-panel-bg);
  flex-shrink: 0;
}

.knit-diandian__ask .knit-diandian__input {
  border-radius: 999px;
  padding: 0.46rem 0.75rem;
  background: #fafaf9;
}

.knit-diandian__ask .knit-diandian__btn {
  border-radius: 999px;
  padding: 0 0.9rem;
}

.knit-diandian__guide {
  padding: 0.55rem 0.25rem 0.3rem;
}

.knit-diandian__guide-title {
  margin: 0 0 0.4rem;
  font-size: 0.82rem;
  font-weight: 800;
  color: var(--knit-text-heading);
}

.knit-diandian__steps {
  margin: 0 0 0.7rem;
  padding-left: 1.15rem;
  color: var(--knit-text-body);
  font-size: 0.72rem;
  line-height: 1.65;
}

.knit-diandian__steps code {
  font-size: 0.68rem;
}

.knit-diandian__skill-list {
  display: flex;
  flex-direction: column;
  gap: 0.35rem;
}

.knit-diandian__skill {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  gap: 0.1rem 0.5rem;
  padding: 0.4rem 0.5rem;
  border-radius: 8px;
  background: var(--knit-panel-bg-alt);
  color: var(--knit-text-muted);
}

.knit-diandian__skill.is-on {
  background: var(--knit-panel-bg);
  border: 1px solid #e7e5e4;
  color: var(--knit-text-heading);
}

.knit-diandian__skill strong {
  font-size: 0.74rem;
}

.knit-diandian__skill span {
  font-size: 0.62rem;
  font-weight: 700;
}

.knit-diandian__skill em {
  grid-column: 1 / -1;
  font-style: normal;
  font-size: 0.62rem;
  color: var(--knit-text-muted);
}

.knit-diandian__insights {
  padding: 0.35rem 0.15rem 0.2rem;
}

.knit-diandian__stats {
  display: flex;
  flex-wrap: wrap;
  gap: 0.32rem;
  margin: 0 0 0.5rem;
}

.knit-diandian__stats span {
  font-size: 0.66rem;
  font-weight: 700;
  color: var(--knit-text-body);
  background: var(--knit-panel-bg-alt);
  border-radius: 999px;
  padding: 0.2rem 0.48rem;
}

.knit-diandian__pref {
  margin: 0 0 0.5rem;
  font-size: 0.7rem;
  line-height: 1.5;
  color: var(--knit-text-muted);
}

.knit-diandian__memory {
  display: flex;
  flex-wrap: wrap;
  gap: 0.32rem;
  margin: 0 0 0.55rem;
}

.knit-diandian__memory span {
  font-size: 0.66rem;
  font-weight: 700;
  color: var(--knit-text-body);
  background: var(--knit-panel-bg-alt);
  border-radius: 999px;
  padding: 0.2rem 0.48rem;
}

.knit-diandian__forget {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  margin: 0 0 0.65rem;
  border: 1px solid #e7e5e4;
  border-radius: 999px;
  background: var(--knit-panel-bg);
  color: var(--knit-text-muted);
  font-size: 0.66rem;
  font-weight: 700;
  padding: 0.22rem 0.62rem;
  cursor: pointer;
}

.knit-diandian__forget:hover {
  color: var(--knit-text-heading);
  border-color: #d6d3d1;
}

.knit-diandian__tip-list {
  display: flex;
  flex-direction: column;
  gap: 0.4rem;
}

.knit-diandian__tip {
  padding: 0.5rem 0.55rem;
  border: 1px solid #e7e5e4;
  border-radius: 10px;
  background: var(--knit-panel-bg);
}

.knit-diandian__tip p {
  margin: 0;
  font-size: 0.72rem;
  line-height: 1.55;
  color: var(--knit-text-heading);
}

.knit-diandian__tip .knit-diandian__btn {
  margin-top: 0.42rem;
}

.knit-diandian__item {
  display: grid;
  grid-template-columns: 3rem minmax(0, 1fr) auto;
  gap: 0.5rem;
  align-items: center;
  margin: 0 0 0.4rem;
  padding: 0.4rem;
  border: 1px solid #e7e5e4;
  border-radius: 10px;
  background: var(--knit-panel-bg);
}

.knit-diandian__thumb {
  width: 3rem;
  height: 3rem;
  border-radius: 8px;
  object-fit: cover;
  background: var(--knit-panel-bg-alt);
  border: 1px solid #e7e5e4;
}

.knit-diandian__item-title {
  margin: 0;
  font-size: 0.74rem;
  font-weight: 700;
  color: var(--knit-text-heading);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.knit-diandian__item-meta {
  margin: 0.1rem 0 0;
  font-size: 0.64rem;
  color: var(--knit-text-muted);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.knit-diandian__item-actions {
  display: flex;
  flex-direction: column;
  gap: 0.18rem;
}

.knit-diandian__item-btn,
.knit-diandian__select {
  border: 1px solid #d6d3d1;
  background: var(--knit-panel-bg);
  color: var(--knit-text-body);
  border-radius: 6px;
  font-size: 0.62rem;
  padding: 0.12rem 0.32rem;
  font-family: inherit;
}

.knit-diandian__item-btn {
  cursor: pointer;
}

#knitDiandianModal .knit-dm-chat__panel--drop-target {
  box-shadow: 0 0 0 3px rgba(201, 48, 48, 0.28), 0 18px 48px rgba(28, 25, 23, 0.2);
}

#knitDiandianModal .knit-dm-chat__panel--drop-target .knit-diandian__tile {
  opacity: 0.2;
}

#knitDiandianModal .knit-dm-chat__panel--drop-target .knit-diandian__grid-bar {
  opacity: 0.38;
}

.knit-dm-minimized-dock__item--diandian,
.knit-dm-minimized-dock__item--diandian.knit-dm-chat__panel--minimized,
.knit-dm-minimized-dock__item--diandian:hover,
.knit-dm-minimized-dock__item--diandian.knit-dm-chat__panel--minimized:hover,
.knit-dm-minimized-dock__item--diandian.knit-dm-minimized-dock__item--drop-target,
.knit-diandian--hang {
  top: var(--knit-diandian-hang-top, var(--knit-top-h)) !important;
  right: 14px !important;
  left: auto !important;
  width: var(--knit-diandian-hang-w, 3.6rem) !important;
  height: var(--knit-diandian-hang-h, 6.15rem) !important;
  background: transparent !important;
  border: 0 !important;
  border-radius: 0 !important;
  box-shadow: none !important;
  outline: none !important;
  overflow: visible !important;
  cursor: pointer;
  z-index: 1550 !important;
  animation: knit-diandian-hang-in 0.42s ease both;
}

@media (max-width: 1180px) {
  html[data-device="desktop"] {
    --knit-diandian-hang-w: 3.05rem;
    --knit-diandian-hang-h: 5.2rem;
    --knit-diandian-ui-scale: 0.92;
  }
}

@media (min-width: 1600px) {
  html[data-device="desktop"] {
    --knit-diandian-hang-w: 4.15rem;
    --knit-diandian-hang-h: 7.08rem;
    --knit-diandian-ui-scale: 1.12;
  }
}

@media (min-width: 1920px) {
  html[data-device="desktop"] {
    --knit-diandian-hang-w: 4.7rem;
    --knit-diandian-hang-h: 8.02rem;
    --knit-diandian-ui-scale: 1.22;
  }
}

@media (min-width: 2560px) {
  html[data-device="desktop"] {
    --knit-diandian-hang-w: 5.4rem;
    --knit-diandian-hang-h: 9.22rem;
    --knit-diandian-ui-scale: 1.32;
  }
}

.knit-dm-minimized-dock__item--diandian .knit-diandian__header,
.knit-dm-minimized-dock__item--diandian.knit-dm-chat__panel--minimized .knit-dm-chat__header {
  background: transparent !important;
  border: 0 !important;
  box-shadow: none !important;
  padding: 0 !important;
  gap: 0 !important;
}

.knit-dm-minimized-dock__item--diandian .knit-dm-chat__peer-text,
.knit-dm-minimized-dock__item--diandian .knit-dm-chat__title,
.knit-dm-minimized-dock__item--diandian .knit-dm-chat__sub {
  display: none !important;
}

.knit-dm-minimized-dock__item--diandian .knit-diandian__avatar {
  position: relative;
  width: 100%;
  height: 100%;
}

.knit-dm-minimized-dock__item--diandian .knit-diandian__cocoon--hang {
  width: 100%;
  height: 100%;
  transform-origin: 50% 0;
  animation: knit-diandian-sway 3.6s ease-in-out infinite;
}

.knit-dm-minimized-dock__item--diandian:hover .knit-diandian__cocoon--hang,
.knit-dm-minimized-dock__item--diandian.knit-dm-minimized-dock__item--drop-target .knit-diandian__cocoon--hang,
.knit-dm-minimized-dock__item--diandian .knit-diandian__cocoon--hang.is-ping {
  animation: knit-diandian-sway-fast 0.7s ease-in-out infinite;
}

.knit-dm-minimized-dock__item--diandian .knit-diandian__badge {
  top: calc(var(--knit-diandian-hang-h, 6.15rem) * 0.25);
  right: 0.02rem;
}

.knit-dm-minimized-dock__item--diandian .knit-diandian__bubble {
  right: calc(var(--knit-diandian-hang-w, 3.6rem) + 0.1rem);
  top: calc(var(--knit-diandian-hang-h, 6.15rem) * 0.3);
}

.knit-diandian__badge {
  position: absolute;
  top: -0.28rem;
  right: -0.28rem;
  min-width: 1rem;
  height: 1rem;
  padding: 0 0.22rem;
  border-radius: 999px;
  background: #e11d48;
  color: #fff;
  font-size: 0.58rem;
  font-weight: 800;
  line-height: 1rem;
  text-align: center;
}

.knit-diandian__badge--alert {
  box-shadow: 0 0 0 2px rgba(225, 29, 72, 0.22);
}

.knit-diandian__bubble {
  position: absolute;
  right: 3.7rem;
  top: 0.15rem;
  z-index: 3;
  max-width: 10.2rem;
  margin: 0;
  padding: 0.36rem 0.5rem;
  border-radius: 10px 10px 4px 10px;
  background: #1c1917;
  color: #fff;
  font-size: 0.66rem;
  font-weight: 700;
  line-height: 1.35;
  box-shadow: 0 8px 20px rgba(28, 25, 23, 0.22);
  pointer-events: none;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.knit-diandian__bubble[hidden] {
  display: none !important;
}

.knit-dm-minimized-dock__item--diandian .knit-diandian__cocoon.is-ping,
.knit-dm-minimized-dock__item--diandian .knit-diandian__spider.is-ping {
  animation: knit-diandian-sway-fast 0.9s ease-in-out infinite;
}

.knit-diandian__alerts {
  display: flex;
  flex-direction: column;
  gap: 0.42rem;
  margin: 0 0 0.7rem;
}

.knit-diandian__alert-why {
  display: block;
  margin: 0.12rem 0 0;
  font-size: 0.66rem;
  font-style: normal;
  color: var(--knit-text-muted);
}

.knit-diandian__alert-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 0.32rem;
  margin-top: 0.4rem;
}

.knit-diandian__alert-actions .knit-diandian__btn {
  margin-top: 0;
}

.knit-diandian__alert--dm {
  border-color: rgba(201, 48, 48, 0.28);
}

.knit-diandian__alert--news,
.knit-diandian__alert--hot {
  border-color: rgba(180, 83, 9, 0.22);
}

.knit-dm-minimized-dock__item--diandian .knit-dm-chat__header {
  flex: 1;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  min-height: 0;
}

.knit-dm-minimized-dock__item--diandian.knit-dm-minimized-dock__item--drop-target .knit-diandian__cocoon {
  filter: drop-shadow(0 6px 12px rgba(196, 176, 122, 0.45));
}

html.knit-aiming-diandian .knit-app,
html.knit-aiming-diandian #knitFullpage,
html.knit-aiming-diandian .knit-dm-minimized-dock__item:not(.knit-dm-minimized-dock__item--diandian),
html.knit-aiming-diandian #knitFavoriteFloatModal,
html.knit-aiming-diandian #knitDmModal {
  opacity: 0.28;
  filter: saturate(0.45);
  transition: opacity 0.16s ease, filter 0.16s ease;
}

html.knit-aiming-diandian .knit-dm-minimized-dock__item--diandian,
html.knit-aiming-diandian #knitDiandianModal {
  opacity: 1 !important;
  filter: none !important;
  isolation: isolate;
  z-index: 3200 !important;
}

html.knit-aiming-diandian .knit-dock-drag-ghost,
html.knit-aiming-diandian .knit-card--share-dragging {
  opacity: 1 !important;
  filter: none !important;
  isolation: isolate;
  z-index: 3300;
}

html.knit-aiming-diandian .knit-dm-minimized-dock__item--diandian .knit-diandian__cocoon--hang {
  animation: knit-diandian-sway-fast 0.62s ease-in-out infinite;
}

.knit-dm-minimized-dock__item--favorite {
  background: var(--knit-paper-bg-warm);
  border: 1px solid #fcd34d;
  box-shadow: -6px 0 28px rgba(146, 64, 14, 0.22);
  cursor: pointer;
}

.knit-dm-minimized-dock__item--favorite:hover {
  box-shadow: -8px 0 32px rgba(146, 64, 14, 0.32);
  background: color-mix(in srgb, #fbbf24 14%, var(--knit-paper-bg-warm));
}

.knit-dm-minimized-dock__item--favorite .knit-fav-float__icon {
  transition: transform 0.32s cubic-bezier(0.34, 1.3, 0.64, 1);
}

.knit-dm-minimized-dock__item--favorite:hover .knit-fav-float__icon {
  transform: scale(1.06);
}

.knit-dm-minimized-dock__item--favorite .knit-dm-chat__header {
  flex-direction: column;
  align-items: center;
  gap: 0.45rem;
  padding: 0.55rem 0.35rem 0.65rem;
  border-bottom: none;
  cursor: pointer;
  background: transparent;
}

.knit-dm-minimized-dock__item--favorite .knit-dm-chat__peer {
  flex-direction: column;
  align-items: center;
  gap: 0.35rem;
}

.knit-dm-minimized-dock__item--favorite .knit-dm-chat__peer-text {
  display: block;
}

.knit-dm-minimized-dock__item--favorite .knit-dm-chat__title {
  writing-mode: horizontal-tb;
  text-orientation: mixed;
  font-size: 0.68rem;
  max-width: 2.6rem;
  max-height: none;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  letter-spacing: 0.01em;
  color: #78350f;
}

.knit-dm-minimized-dock__item--favorite .knit-dm-chat__header-actions {
  flex-direction: column;
  gap: 0.2rem;
}

.knit-dm-minimized-dock__item--favorite .knit-dm-chat__close {
  color: #92400e;
}

.knit-dm-minimized-dock__item--favorite .knit-dm-chat__close:hover {
  background: rgba(245, 158, 11, 0.18);
  color: #78350f;
}

.knit-follow-card {
  position: relative;
  border: 1px solid var(--knit-panel-border);
  border-radius: 10px;
  background: var(--knit-panel-bg);
  padding: 0.45rem 0.5rem 0.5rem;
  text-align: left;
  width: 100%;
  font-family: inherit;
  display: flex;
  flex-direction: column;
  flex: 0 0 auto;
  gap: 0.35rem;
  height: auto;
  min-height: 0;
  overflow: visible;
}

.knit-follow-card-dot {
  position: absolute;
  top: 0.28rem;
  right: 0.28rem;
  width: 0.48rem;
  height: 0.48rem;
  border-radius: 999px;
  background: var(--knit-red);
  box-shadow: 0 0 0 1.5px var(--knit-panel-bg);
  pointer-events: none;
  z-index: 2;
}

.knit-follow-card-dot[hidden] {
  display: none !important;
}

.knit-follow-card:hover {
  border-color: var(--knit-control-active-border);
  background: var(--knit-control-hover-bg);
}

.knit-follow-card.is-active {
  border-color: var(--knit-control-active-border);
  background: var(--knit-control-active-bg);
  box-shadow: var(--knit-panel-shadow);
}

.knit-follow-card:focus-within {
  outline: 2px solid #6b9fff;
  outline-offset: 2px;
}

.knit-follow-card--all {
  font-weight: 700;
  cursor: pointer;
  padding: 0.55rem 0.62rem;
  flex: 0 0 auto;
  height: auto !important;
  min-height: 0 !important;
  max-height: none;
}

.knit-follow-card-main {
  border: 0;
  background: transparent;
  padding: 0;
  margin: 0;
  width: 100%;
  text-align: left;
  cursor: pointer;
  font-family: inherit;
  color: inherit;
}

.knit-follow-card-main:focus-visible {
  outline: none;
}

.knit-follow-card[data-user-id] {
  cursor: pointer;
}

.knit-follow-card[data-user-id] .knit-follow-card-main {
  cursor: pointer;
}

.knit-follow-card[data-user-id] .knit-follow-id::after {
  content: " · 双击进主页";
  font-weight: 500;
  opacity: 0.85;
}

.knit-avatar-preview {
  position: fixed;
  inset: 0;
  z-index: 12050;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 1.5rem;
  background: rgba(8, 10, 14, 0);
  opacity: 0;
  visibility: hidden;
  pointer-events: none;
  transition:
    opacity 0.28s ease,
    visibility 0s linear 0.28s,
    background 0.32s ease;
  will-change: opacity, background;
}

.knit-avatar-preview.is-open {
  background: rgba(8, 10, 14, 0.72);
  opacity: 1;
  visibility: visible;
  pointer-events: auto;
  transition:
    opacity 0.28s ease,
    visibility 0s,
    background 0.32s ease;
}

.knit-avatar-preview[hidden] {
  display: none !important;
}

.knit-avatar-preview__close {
  position: absolute;
  top: 0.85rem;
  right: 0.95rem;
  width: 2.4rem;
  height: 2.4rem;
  border: 0;
  border-radius: 999px;
  background: rgba(255, 255, 255, 0.14);
  color: #fff;
  font-size: 1.55rem;
  line-height: 1;
  cursor: pointer;
  opacity: 0;
  transform: translateY(-4px);
  transition: opacity 0.24s ease 0.08s, transform 0.24s ease 0.08s, background 0.15s ease;
}

.knit-avatar-preview.is-open .knit-avatar-preview__close {
  opacity: 1;
  transform: none;
}

.knit-avatar-preview__close:hover {
  background: rgba(255, 255, 255, 0.24);
}

.knit-avatar-preview__stage {
  /* 上传裁剪保存的是方形原图；大图预览也按方形展示，圆裁只用于小头像 UI */
  --knit-avatar-preview-radius: 18px;
  position: relative;
  width: min(86vw, 420px);
  height: min(86vw, 420px);
  max-width: min(86vw, 420px);
  max-height: min(78vh, 420px);
  aspect-ratio: 1 / 1;
  display: flex;
  align-items: center;
  justify-content: center;
  opacity: 0;
  transform: scale(0.92);
  transition:
    opacity 0.34s cubic-bezier(0.22, 1, 0.36, 1),
    transform 0.4s cubic-bezier(0.22, 1, 0.36, 1);
  will-change: opacity, transform;
}

.knit-avatar-preview.is-open .knit-avatar-preview__stage {
  opacity: 1;
  transform: scale(1);
}

.knit-avatar-preview__halo {
  position: absolute;
  inset: -6%;
  border-radius: calc(var(--knit-avatar-preview-radius) + 8px);
  background: radial-gradient(circle at center, rgba(255, 255, 255, 0.12) 0%, rgba(255, 255, 255, 0) 70%);
  opacity: 0;
  transition: opacity 0.4s ease;
  pointer-events: none;
}

.knit-avatar-preview.is-open .knit-avatar-preview__halo {
  opacity: 1;
}

.knit-avatar-preview__img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  border-radius: var(--knit-avatar-preview-radius);
  background: #1a1d22;
  box-shadow: 0 18px 50px rgba(0, 0, 0, 0.38);
  opacity: 0;
  transform: scale(1.02);
  transition: opacity 0.36s ease, transform 0.45s cubic-bezier(0.22, 1, 0.36, 1);
}

.knit-avatar-preview__img--thumb {
  filter: blur(10px);
  transform: scale(1.04);
}

.knit-avatar-preview__img.is-visible {
  opacity: 1;
  transform: scale(1);
}

.knit-avatar-preview__img--thumb.is-visible {
  transform: scale(1.02);
}

.knit-avatar-preview__img[hidden] {
  display: none !important;
}

.knit-avatar-preview__letter {
  position: relative;
  z-index: 1;
  width: 100%;
  height: 100%;
  border-radius: var(--knit-avatar-preview-radius);
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: clamp(3.5rem, 18vw, 7rem);
  font-weight: 700;
  color: #fff;
  background: linear-gradient(145deg, #9aa8b8, #6b7c8f);
  box-shadow: 0 18px 50px rgba(0, 0, 0, 0.38);
  opacity: 0;
  transform: scale(0.96);
  transition: opacity 0.32s ease, transform 0.4s cubic-bezier(0.22, 1, 0.36, 1);
}

.knit-avatar-preview__letter.is-visible {
  opacity: 1;
  transform: scale(1);
}

.knit-avatar-preview__letter[hidden] {
  display: none !important;
}

.knit-avatar-preview__letter.knit-fp-c-avatar--a {
  background: linear-gradient(145deg, #7aa2c4, #3f6f96);
}

.knit-avatar-preview__letter.knit-fp-c-avatar--b {
  background: linear-gradient(145deg, #8fb39a, #4d7a5c);
}

.knit-avatar-preview__letter.knit-fp-c-avatar--c {
  background: linear-gradient(145deg, #c4a27a, #8a623d);
}

@media (prefers-reduced-motion: reduce) {
  .knit-avatar-preview,
  .knit-avatar-preview__close,
  .knit-avatar-preview__stage,
  .knit-avatar-preview__halo,
  .knit-avatar-preview__img,
  .knit-avatar-preview__letter {
    transition-duration: 0.01ms !important;
  }
}

.knit-follow-chip-avatar {
  display: none;
  position: relative;
  width: 2.55rem;
  height: 2.55rem;
  flex: 0 0 auto;
  border-radius: 999px;
  overflow: hidden;
  background: #e5e7eb;
}

.knit-follow-chip-avatar-letter,
.knit-follow-chip-avatar-img {
  position: absolute;
  inset: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 0.92rem;
  font-weight: 700;
  color: var(--knit-text-muted);
}

.knit-follow-chip-avatar-img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.knit-follow-name {
  margin: 0;
  font-size: 0.9rem;
  font-weight: 700;
  color: var(--knit-text-heading);
}

.knit-follow-id {
  margin: 0.25rem 0 0;
  font-size: 0.75rem;
  color: var(--knit-text-muted);
}

.knit-follow-note {
  margin: 0.2rem 0 0;
  font-size: 0.72rem;
  color: var(--knit-text-muted);
  line-height: 1.35;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
  word-break: break-word;
}

/* 好友主页与「我的」同排布：复用 .knit-mine-view / .knit-mine-* */
.knit-user-profile-view.knit-mine-view {
  overflow: auto;
  color: var(--knit-text-heading);
  background: var(--knit-page-bg);
}

.knit-user-profile-nav {
  flex-shrink: 0;
  display: flex;
  align-items: center;
}

.knit-user-profile-back {
  flex-shrink: 0;
  padding: 0.35rem 0.65rem;
  font-size: 0.82rem;
  font-weight: 600;
  color: var(--knit-control-text);
  background: var(--knit-control-hover-bg);
  border: 1px solid var(--knit-control-border);
  border-radius: 8px;
  cursor: pointer;
  font-family: inherit;
}

.knit-user-profile-back:hover {
  background: var(--knit-control-active-bg);
}

.knit-user-profile-last-viewed {
  display: flex;
  align-items: center;
  gap: 0.45rem 0.65rem;
  flex-shrink: 0;
  padding: 0.55rem 0.7rem;
  border-radius: 10px;
  background: color-mix(in srgb, var(--knit-red) 8%, var(--knit-panel-bg));
  border: 1px solid #fdba74;
  color: #9a3412;
}

.knit-user-profile-last-viewed[hidden] {
  display: none !important;
}

.knit-user-profile-last-viewed-text {
  flex: 1 1 auto;
  min-width: 0;
  margin: 0;
  font-size: 0.82rem;
  line-height: 1.4;
  font-weight: 600;
}

.knit-user-profile-last-viewed-jump {
  flex-shrink: 0;
  padding: 0.28rem 0.7rem;
  border: 1px solid #ea580c;
  border-radius: 999px;
  background: #ea580c;
  color: #fff;
  font-size: 0.78rem;
  font-weight: 700;
  cursor: pointer;
  font-family: inherit;
}

.knit-user-profile-last-viewed-jump:hover {
  background: #c2410c;
  border-color: #c2410c;
}

.knit-user-profile-last-viewed-dismiss {
  flex-shrink: 0;
  width: 1.7rem;
  height: 1.7rem;
  padding: 0;
  border: none;
  border-radius: 999px;
  background: transparent;
  color: #9a3412;
  font-size: 1.15rem;
  line-height: 1;
  cursor: pointer;
}

.knit-user-profile-last-viewed-dismiss:hover {
  background: rgba(154, 52, 18, 0.1);
}

.knit-mine-work-card.is-jump-target,
.knit-mine-work-details-row.is-jump-target {
  outline: 2px solid var(--knit-red);
  outline-offset: 2px;
  border-radius: 8px;
  animation: knit-jump-flash 1.6s ease;
}

@keyframes knit-jump-flash {
  0% {
    box-shadow: 0 0 0 0 rgba(220, 38, 38, 0.35);
  }
  100% {
    box-shadow: 0 0 0 12px rgba(220, 38, 38, 0);
  }
}


.knit-home-grid-head {
  position: absolute;
  top: 0.5rem;
  left: 0.35rem;
  right: 0.35rem;
  z-index: 28;
  flex-shrink: 0;
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0.45rem 0.75rem;
  padding: 0.4rem 0.55rem 0.45rem;
  border: 1px solid var(--knit-panel-border);
  border-radius: 10px;
  background: rgba(255, 255, 255, 0.98);
  box-shadow: 0 4px 16px rgba(0, 0, 0, 0.08);
  opacity: 0;
  visibility: hidden;
  pointer-events: none;
  transform: translateY(-8px);
  transition:
    opacity 0.18s ease,
    visibility 0.18s ease,
    transform 0.18s ease;
}

.knit-home-grid-head[hidden] {
  display: none !important;
}

.knit-main:has(.knit-home-grid-top-hover:hover) .knit-home-grid-head:not([hidden]),
.knit-home-grid-head:not([hidden]):hover,
.knit-home-grid-head:not([hidden]):focus-within {
  opacity: 1;
  visibility: visible;
  pointer-events: auto;
  transform: translateY(0);
}

.knit-home-grid-head .knit-home-series-bar {
  flex: 1 1 auto;
  min-width: 0;
  padding: 0;
  border-bottom: 0;
  background: transparent;
}

.knit-home-grid-top-hover {
  position: sticky;
  top: 0;
  z-index: 30;
  display: flex;
  justify-content: flex-end;
  align-items: flex-start;
  width: 100%;
  max-width: 100%;
  min-height: calc(2rem + 0.35rem);
  margin-bottom: calc(-1 * (2rem + 0.35rem));
  padding: 0.35rem 0.55rem 0;
  /* 全宽热区不截获滚轮；只有列数按钮本身可点 */
  pointer-events: none;
}

.knit-home-grid-top-hover > * {
  pointer-events: auto;
}

.knit-home-grid-col-toggle {
  position: relative;
  pointer-events: auto;
}

.knit-home-grid-col-trigger {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 0.08rem;
  min-width: 2.45rem;
  height: 2rem;
  padding: 0 0.55rem;
  font-size: 0.78rem;
  font-weight: 700;
  font-family: inherit;
  color: var(--knit-text-body);
  background: rgba(255, 255, 255, 0.96);
  border: 1px solid #d1d5db;
  border-radius: 999px;
  box-shadow: 0 1px 4px rgba(0, 0, 0, 0.08);
  cursor: default;
  opacity: 0;
  visibility: hidden;
  pointer-events: none;
  transform: scale(0.96);
  transition: opacity 0.16s ease, visibility 0.16s ease, transform 0.16s ease;
}

.knit-home-grid-col-trigger-suffix {
  font-size: 0.72rem;
  font-weight: 600;
  color: var(--knit-text-muted);
}

.knit-home-grid-col-panel {
  position: absolute;
  top: 0;
  right: 0;
  display: flex;
  flex-direction: column;
  align-items: stretch;
  gap: 0.35rem;
  min-width: 2.45rem;
  padding: 0.35rem 0.28rem;
  background: rgba(255, 255, 255, 0.98);
  border: 1px solid #e5e7eb;
  border-radius: 10px;
  box-shadow: 0 4px 16px rgba(0, 0, 0, 0.1);
  opacity: 0;
  visibility: hidden;
  transform: translateY(-6px) scale(0.96);
  pointer-events: none;
  transition:
    opacity 0.18s ease,
    visibility 0.18s ease,
    transform 0.18s ease;
}

.knit-home-grid-col-toggle:hover .knit-home-grid-col-panel,
.knit-home-grid-col-toggle:focus-within .knit-home-grid-col-panel {
  opacity: 1;
  visibility: visible;
  transform: translateY(0) scale(1);
  pointer-events: auto;
}

.knit-home-grid-top-hover:hover .knit-home-grid-col-trigger {
  opacity: 1;
  visibility: visible;
  pointer-events: auto;
  transform: none;
}

.knit-home-grid-col-toggle:hover .knit-home-grid-col-trigger,
.knit-home-grid-col-toggle:focus-within .knit-home-grid-col-trigger {
  opacity: 0;
  visibility: hidden;
  transform: scale(0.92);
}

.knit-home-grid-col-toggle--folded .knit-home-grid-col-panel,
.knit-home-grid-col-toggle--folded:hover .knit-home-grid-col-panel,
.knit-home-grid-col-toggle--folded:focus-within .knit-home-grid-col-panel {
  opacity: 0;
  visibility: hidden;
  transform: translateY(-6px) scale(0.96);
  pointer-events: none;
}

.knit-home-grid-col-toggle-label {
  font-size: 0.72rem;
  font-weight: 600;
  color: var(--knit-text-muted);
  text-align: center;
  white-space: nowrap;
}

.knit-home-grid-col-toggle-btns {
  display: flex;
  flex-direction: column;
  align-items: stretch;
  border: 1px solid var(--knit-control-border);
  border-radius: var(--knit-radius-sm);
  overflow: hidden;
}

.knit-home-grid-col-btn {
  min-width: 0;
  width: 100%;
  height: 2rem;
  padding: 0 0.45rem;
  font-size: 0.78rem;
  font-weight: 700;
  font-family: inherit;
  color: var(--knit-text-body);
  background: var(--knit-control-bg);
  border: 0;
  border-bottom: 1px solid var(--knit-control-border);
  cursor: pointer;
}

.knit-home-grid-col-btn:last-child {
  border-bottom: 0;
}

.knit-home-grid-col-btn:hover {
  background: var(--knit-control-hover-bg);
}

.knit-home-grid-col-btn.is-active {
  color: var(--knit-pill-active-text);
  background: var(--knit-pill-active-bg);
}

.knit-home-grid-col-btn.is-active:hover {
  background: var(--knit-pill-active-bg);
  filter: brightness(1.08);
}

.knit-home-category-bar-row {
  display: block;
  position: relative;
  z-index: 6;
  overflow: visible;
}

.knit-home-category-bar-row:has(.knit-home-category-bar:not(.is-collapsed):not([hidden])) {
  z-index: 120;
}

/* 电脑端隐藏；手机/平板由 knit-compact.css 显示 */
html[data-device="desktop"] .knit-home-category-bar-row > .knit-home-category-bar__layout-btn,
html:not([data-device]) .knit-home-category-bar-row > .knit-home-category-bar__layout-btn {
  display: none !important;
}

.knit-home-category-bar-row[hidden] {
  display: none !important;
}

.knit-home-category-bar {
  flex-shrink: 0;
  display: flex;
  flex-direction: column;
  align-items: stretch;
  gap: 0;
  margin: 0 0.35rem 0.35rem;
  padding: 0;
  border: 1px solid var(--knit-chrome-border);
  border-radius: 10px;
  background: var(--knit-chrome-bg);
  box-shadow: var(--knit-panel-shadow);
  position: relative;
  z-index: 6;
  /* 折叠时只占标题行高度；展开内容用 fixed 浮层，不挤开下方网格 */
  overflow: visible;
  max-height: none;
  opacity: 1;
  transition:
    margin 0.3s cubic-bezier(0.22, 1, 0.36, 1),
    padding 0.24s ease,
    border-width 0.24s ease,
    opacity 0.22s ease,
    transform 0.3s cubic-bezier(0.22, 1, 0.36, 1),
    box-shadow 0.24s ease,
    max-height 0.3s cubic-bezier(0.22, 1, 0.36, 1);
}

.knit-home-category-bar[hidden] {
  display: none !important;
}

/* —— 灵感两层筛选 —— */
.knit-home-category-bar.knit-insp-filter {
  border: none;
  background: transparent;
  box-shadow: none;
  margin: 0 0.35rem 0.45rem;
  padding: 0;
  gap: 0.4rem;
}

.knit-news-card {
  display: flex;
  flex-direction: column;
  gap: 0.28rem;
  padding: 0.55rem 0.15rem 0.2rem;
}
.knit-news-card__type {
  margin: 0;
  font-size: 0.72rem;
  letter-spacing: 0.02em;
  color: var(--knit-text-muted);
}
.knit-news-card__title {
  margin: 0;
  font-size: 0.95rem;
  font-weight: 650;
  line-height: 1.35;
  color: var(--knit-text-heading, inherit);
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
}
.knit-news-card__summary {
  margin: 0;
  font-size: 0.78rem;
  line-height: 1.45;
  color: var(--knit-text-muted);
  display: -webkit-box;
  -webkit-line-clamp: 3;
  -webkit-box-orient: vertical;
  overflow: hidden;
}
.knit-news-card__action,
.knit-news-card__source,
.knit-news-card__place,
.knit-news-card__fields,
.knit-news-card__foot {
  margin: 0;
  font-size: 0.75rem;
  line-height: 1.4;
  color: var(--knit-text-muted);
}
.knit-news-card__action {
  display: flex;
  flex-wrap: wrap;
  gap: 0.35rem;
  align-items: baseline;
}
.knit-news-card__status {
  font-weight: 650;
  color: var(--knit-news-status-open, var(--knit-text-heading, inherit));
}
.knit-news-card__status.is-hot {
  color: var(--knit-news-status-hot, var(--knit-text-heading, inherit));
}
.knit-news-card__status.is-muted {
  color: var(--knit-news-status-muted, var(--knit-text-muted));
}
.knit-news-card__fields,
.knit-news-card__foot {
  color: var(--knit-text-muted);
}
.knit-card--news-info:focus-visible {
  outline: 2px solid var(--knit-text-heading, currentColor);
  outline-offset: 2px;
}
.knit-news-card--skel {
  gap: 0.4rem;
}
.knit-news-card__skel {
  display: block;
  height: 0.7rem;
  border-radius: 4px;
  background: color-mix(in srgb, var(--knit-text-muted) 22%, transparent);
}
.knit-news-card__skel--title { width: 86%; height: 0.95rem; }
.knit-news-card__skel--summary { width: 70%; }
.knit-news-card__skel--type { width: 28%; }
.knit-news-card__skel--meta { width: 52%; }
.knit-fp-news-detail__type {
  margin: 0;
}
.knit-fp-news-detail__type-btn {
  border: 0;
  background: none;
  padding: 0;
  font: inherit;
  font-size: 0.75rem;
  letter-spacing: 0.02em;
  color: var(--knit-text-muted);
  cursor: pointer;
}
.knit-fp-news-detail__title {
  margin: 0.2rem 0 0.4rem;
  font-size: 1.35rem;
  font-weight: 700;
  line-height: 1.35;
  color: var(--knit-text-heading, inherit);
}
.knit-fp-news-detail__byline {
  margin: 0 0 0.55rem;
  font-size: 0.82rem;
  line-height: 1.45;
  color: var(--knit-text-muted);
}
.knit-fp-news-detail__status {
  margin: 0 0 0.75rem;
  font-size: 0.92rem;
  font-weight: 650;
  color: var(--knit-news-status-open, var(--knit-text-heading, inherit));
}
.knit-fp-news-detail__status.is-hot {
  color: var(--knit-red, var(--knit-news-status-hot, inherit));
}
.knit-fp-news-detail__status.is-muted {
  color: var(--knit-news-status-muted, var(--knit-text-muted));
}
.knit-fp-news-group {
  margin: 0 0 0.7rem;
  padding: 0.7rem 0.85rem;
  border-radius: 12px;
  background: color-mix(in srgb, var(--knit-text-heading, #111) 5%, transparent);
}
.knit-fp-news-group__title {
  margin: 0 0 0.35rem;
  font-size: 0.78rem;
  font-weight: 700;
  letter-spacing: 0.04em;
  color: var(--knit-text-muted);
}
.knit-fp-news-row {
  display: grid;
  grid-template-columns: 5.2rem minmax(0, 1fr);
  gap: 0.2rem 0.75rem;
  padding: 0.28rem 0;
  font-size: 0.9rem;
  line-height: 1.45;
}
.knit-fp-news-row.is-long {
  grid-template-columns: 1fr;
}
.knit-fp-news-row__label {
  color: var(--knit-text-muted);
}
.knit-fp-news-row__value {
  color: var(--knit-text-heading, inherit);
  white-space: pre-wrap;
}
.knit-fp-news-detail__fields {
  display: flex;
  flex-wrap: wrap;
  gap: 0.15rem 0.45rem;
  margin-bottom: 0.45rem;
}
.knit-fp-news-tag,
.knit-fp-news-retry {
  border: 0;
  background: none;
  padding: 0;
  font: inherit;
  font-size: 0.82rem;
  color: var(--knit-text-muted);
  cursor: pointer;
}
.knit-fp-news-retry {
  color: var(--knit-text-heading, inherit);
  text-decoration: underline;
}
.knit-fp-news-source {
  margin: 0 0 0.25rem;
  font-size: 0.86rem;
  color: var(--knit-text-muted);
}
.knit-fp-news-link {
  display: inline-flex;
  align-items: center;
  margin: 0.35rem 0.85rem 0 0;
  font-size: 0.88rem;
  color: var(--knit-text-heading, inherit);
}
.knit-fp-news-link::after {
  content: "↗";
  margin-left: 0.25rem;
  font-size: 0.75em;
}
a.knit-fp-signup-btn--external {
  background: transparent;
  color: var(--knit-text-heading, inherit);
  border: 1px solid var(--knit-control-border, rgba(0, 0, 0, 0.16));
  text-decoration: none;
  box-sizing: border-box;
}
html[data-device="phone"] .knit-fp-news-row,
html[data-device="tablet"] .knit-fp-news-row {
  grid-template-columns: 4.6rem minmax(0, 1fr);
}
html[data-device="phone"] .knit-news-card__summary,
html[data-device="tablet"] .knit-news-card__summary {
  -webkit-line-clamp: 2;
}
:root {
  --knit-news-status-hot: var(--knit-text-heading, #111);
  --knit-news-status-open: var(--knit-text-heading, #111);
  --knit-news-status-muted: var(--knit-text-muted, #6b7280);
}

.knit-news-filter {
  display: flex;
  flex-direction: column;
  gap: 0.45rem;
}
.knit-news-filter__kinds,
.knit-news-filter__subtypes,
.knit-news-filter__fields,
.knit-news-filter__adv-chips,
.knit-news-filter__adv-children {
  display: flex;
  flex-wrap: nowrap;
  gap: 0.35rem;
  overflow-x: auto;
  scrollbar-width: none;
  -webkit-overflow-scrolling: touch;
}
.knit-news-filter__kinds::-webkit-scrollbar,
.knit-news-filter__subtypes::-webkit-scrollbar,
.knit-news-filter__fields::-webkit-scrollbar {
  display: none;
}
.knit-news-filter__kind,
.knit-news-filter__sub,
.knit-news-filter__field,
.knit-news-filter__more-btn {
  flex: 0 0 auto;
  margin: 0;
  padding: 0.32rem 0.75rem;
  border: 1px solid var(--knit-chrome-border);
  border-radius: 999px;
  background: var(--knit-chrome-bg);
  color: inherit;
  font: inherit;
  font-size: 0.82rem;
  cursor: pointer;
}
.knit-news-filter__kind.is-active,
.knit-news-filter__sub.is-active,
.knit-news-filter__field.is-active {
  background: var(--knit-chrome-text, #1a1a1a);
  color: var(--knit-chrome-bg, #fff);
  border-color: transparent;
}
.knit-news-filter__tools {
  display: flex;
  align-items: center;
  gap: 0.4rem;
  flex-wrap: wrap;
}
.knit-news-filter__fields-label {
  flex: 0 0 auto;
  font-size: 0.75rem;
  opacity: 0.7;
  align-self: center;
}
.knit-news-filter__search {
  display: flex;
  gap: 0.4rem;
  align-items: center;
}
.knit-news-filter__search-input {
  flex: 1 1 auto;
  min-width: 0;
  height: 2.1rem;
  padding: 0 0.75rem;
  border: 1px solid var(--knit-chrome-border, rgba(0, 0, 0, 0.12));
  border-radius: 999px;
  background: var(--knit-chrome-bg, #fff);
  color: inherit;
  font: inherit;
  font-size: 0.88rem;
}
.knit-news-filter__search-btn,
.knit-home-empty__actions {
  display: flex;
  flex-wrap: wrap;
  gap: 0.45rem;
}
.knit-news-filter__search-btn {
  flex: 0 0 auto;
  height: 2.1rem;
  padding: 0 0.9rem;
  border: 0;
  border-radius: 999px;
  background: var(--knit-chrome-text, #1a1a1a);
  color: var(--knit-chrome-bg, #fff);
  font: inherit;
  font-size: 0.82rem;
  cursor: pointer;
}
.knit-news-filter__summary {
  margin: 0;
  font-size: 0.78rem;
  color: var(--knit-text-muted);
}
.knit-news-filter__dates {
  display: flex;
  flex-wrap: wrap;
  gap: 0.4rem;
  margin-top: 0.45rem;
}
.knit-news-filter__date {
  font: inherit;
  font-size: 0.82rem;
  padding: 0.25rem 0.4rem;
  border: 1px solid var(--knit-chrome-border, rgba(0, 0, 0, 0.12));
  border-radius: 8px;
  background: var(--knit-chrome-bg, #fff);
  color: inherit;
}
html[data-device="phone"] .knit-news-filter__search {
  width: 100%;
}
.knit-news-filter__sort-select {
  font: inherit;
  font-size: 0.82rem;
  padding: 0.28rem 0.4rem;
  border: 1px solid var(--knit-chrome-border);
  border-radius: 8px;
  background: var(--knit-chrome-bg);
  color: inherit;
}
.knit-news-filter__adv-title {
  margin: 0.6rem 0 0.35rem;
  font-size: 0.85rem;
  font-weight: 600;
}
.knit-news-filter__adv-field {
  margin-bottom: 0.45rem;
}
.knit-news-filter__adv-children {
  margin-top: 0.3rem;
  padding-left: 0.4rem;
  flex-wrap: wrap;
}
.knit-home-empty--filter {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 0.5rem;
  padding: 1.2rem 0.4rem;
}
html[data-device="mobile"] .knit-news-filter__fields {
  display: none;
}
html[data-device="desktop"] .knit-news-filter__subtypes {
  flex-wrap: wrap;
  overflow: visible;
}

.knit-insp-filter__quick {
  display: flex;
  flex-wrap: nowrap;
  gap: 0.4rem;
  overflow-x: auto;
  overflow-y: hidden;
  -webkit-overflow-scrolling: touch;
  scrollbar-width: none;
  padding: 0.1rem 0.05rem 0.2rem;
}

.knit-insp-filter__quick::-webkit-scrollbar {
  display: none;
}

.knit-insp-filter__quick-pill {
  flex: 0 0 auto;
  margin: 0;
  padding: 0.38rem 0.85rem;
  border: 1px solid var(--knit-chrome-border);
  border-radius: 999px;
  background: var(--knit-chrome-bg);
  color: var(--knit-chrome-text, inherit);
  font: inherit;
  font-size: 0.82rem;
  line-height: 1.2;
  cursor: pointer;
  white-space: nowrap;
  transition: background 0.15s, border-color 0.15s, color 0.15s;
}

.knit-insp-filter__quick-pill:hover,
.knit-insp-filter__quick-pill:focus-visible {
  background: var(--knit-chrome-hover, rgba(0, 0, 0, 0.04));
}

.knit-insp-filter__quick-pill.is-active {
  border-color: var(--knit-text-heading, #0f172a);
  background: var(--knit-text-heading, #0f172a);
  color: #fff;
}

.knit-insp-filter__quick-pill--more {
  border-style: dashed;
  color: var(--knit-chrome-text-muted, #64748b);
}

.knit-insp-filter__chips {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0.35rem;
  padding: 0 0.1rem 0.15rem;
}

.knit-insp-filter__chips[hidden] {
  display: none !important;
}

.knit-insp-filter__chips-label {
  font-size: 0.72rem;
  color: var(--knit-chrome-text-muted, #64748b);
  margin-right: 0.1rem;
}

.knit-insp-filter__chip {
  display: inline-flex;
  align-items: center;
  gap: 0.25rem;
  margin: 0;
  padding: 0.22rem 0.55rem;
  border: 1px solid var(--knit-chrome-border);
  border-radius: 999px;
  background: var(--knit-panel-bg, #fff);
  color: var(--knit-text-heading, #0f172a);
  font: inherit;
  font-size: 0.75rem;
  cursor: pointer;
}

.knit-insp-filter__chip-x {
  opacity: 0.55;
  font-size: 0.9em;
}

.knit-insp-filter__clear {
  margin: 0;
  padding: 0.22rem 0.5rem;
  border: 0;
  background: transparent;
  color: var(--knit-chrome-text-muted, #64748b);
  font: inherit;
  font-size: 0.75rem;
  cursor: pointer;
  text-decoration: underline;
  text-underline-offset: 2px;
}

.knit-insp-filter__adv-inner {
  display: flex;
  flex-direction: column;
  gap: 0.65rem;
  min-height: 0;
  flex: 1 1 auto;
}

.knit-insp-filter__dims {
  display: flex;
  flex-wrap: nowrap;
  gap: 0.25rem;
  overflow-x: auto;
  scrollbar-width: none;
  padding: 0 0.15rem;
}

.knit-insp-filter__dims::-webkit-scrollbar {
  display: none;
}

.knit-insp-filter__dim-tab {
  flex: 0 0 auto;
  margin: 0;
  padding: 0.4rem 0.75rem;
  border: 0;
  border-bottom: 2px solid transparent;
  border-radius: 0;
  background: transparent;
  color: var(--knit-chrome-text-muted, #64748b);
  font: inherit;
  font-size: 0.86rem;
  cursor: pointer;
}

.knit-insp-filter__dim-tab.is-active {
  color: var(--knit-text-heading, #0f172a);
  border-bottom-color: var(--knit-text-heading, #0f172a);
  font-weight: 600;
}

.knit-insp-filter__panel {
  display: flex;
  flex-direction: column;
  gap: 0.75rem;
  overflow-y: auto;
  padding: 0.15rem 0.35rem 0.5rem;
  min-height: 0;
}

.knit-insp-filter__level {
  display: flex;
  flex-direction: column;
  gap: 0.4rem;
}

.knit-insp-filter__sublabel {
  font-size: 0.72rem;
  color: var(--knit-chrome-text-muted, #64748b);
  letter-spacing: 0.02em;
}

.knit-insp-filter__level-chips {
  display: flex;
  flex-wrap: wrap;
  gap: 0.35rem;
}

.knit-insp-filter__empty {
  margin: 0.5rem 0;
  font-size: 0.85rem;
  color: var(--knit-chrome-text-muted, #64748b);
}

.knit-insp-filter__adv-done {
  margin-left: auto;
  border: 0;
  background: transparent;
  color: var(--knit-text-heading, #0f172a);
  font: inherit;
  font-size: 0.9rem;
  font-weight: 600;
  cursor: pointer;
  padding: 0.25rem 0.4rem;
}

.knit-home-category-bar:not(.is-collapsed) {
  z-index: 120;
}

/* 作品区上滑：分类栏被推走，把空间还给网格 */
.knit-home-category-bar.is-scroll-pushed {
  max-height: 0;
  margin-top: 0;
  margin-bottom: 0;
  padding: 0;
  border-width: 0;
  opacity: 0;
  transform: translateY(-0.65rem);
  box-shadow: none;
  pointer-events: none;
  overflow: hidden;
}

.knit-home-category-bar__backdrop {
  display: none;
  position: fixed;
  inset: 0;
  z-index: 118;
  margin: 0;
  padding: 0;
  border: 0;
  background: rgba(15, 23, 42, 0.38);
  cursor: pointer;
  -webkit-tap-highlight-color: transparent;
}

html.knit-home-cat-float-open .knit-home-category-bar__backdrop:not([hidden]) {
  display: block;
}

html.knit-home-cat-float-open .knit-home-category-bar-row {
  z-index: 120;
}

html.knit-home-cat-float-open .knit-scrollport,
html.knit-home-cat-float-open .knit-home-deck,
html.knit-home-cat-float-open .knit-home-deck__track {
  touch-action: none;
  overscroll-behavior: none;
}

.knit-home-category-bar__toggle {
  display: flex;
  align-items: center;
  gap: 0.45rem;
  width: 100%;
  margin: 0;
  padding: 0.45rem 0.65rem;
  border: 0;
  background: transparent;
  color: var(--knit-chrome-text, #1f2937);
  font: inherit;
  font-size: 0.82rem;
  font-weight: 650;
  text-align: left;
  cursor: pointer;
  -webkit-tap-highlight-color: transparent;
}

.knit-home-category-bar__head {
  display: flex;
  align-items: stretch;
  gap: 0.2rem;
  min-width: 0;
}

.knit-home-category-bar__head .knit-home-category-bar__toggle {
  flex: 1 1 auto;
  min-width: 0;
}

.knit-home-category-bar__toggle:hover,
.knit-home-category-bar__toggle:focus-visible {
  background: var(--knit-chrome-hover, rgba(0, 0, 0, 0.04));
}

.knit-home-category-bar__toggle-title {
  flex: 0 0 auto;
}

.knit-home-category-bar__toggle-summary {
  flex: 1 1 auto;
  min-width: 0;
  font-size: 0.74rem;
  font-weight: 500;
  color: var(--knit-chrome-text-muted, #64748b);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.knit-home-category-bar__chevron {
  flex: 0 0 auto;
  width: 0.45rem;
  height: 0.45rem;
  border-right: 2px solid currentColor;
  border-bottom: 2px solid currentColor;
  transform: rotate(45deg);
  opacity: 0.55;
  transition: transform 0.18s ease;
  margin-top: -0.12rem;
}

.knit-home-category-bar:not(.is-collapsed) .knit-home-category-bar__chevron {
  transform: rotate(-135deg);
  margin-top: 0.12rem;
}

.knit-home-category-bar__screen-head {
  display: none;
}

.knit-home-category-bar__filters {
  display: flex;
  flex-direction: column;
  gap: 0.4rem;
  min-height: 0;
}

.knit-home-category-bar__body {
  display: flex;
  flex-direction: column;
  gap: 0.4rem;
  padding: 0.55rem max(0.75rem, env(safe-area-inset-right, 0px)) 0.65rem
    max(0.75rem, env(safe-area-inset-left, 0px));
  max-height: min(42vh, 18rem);
  overflow-x: hidden;
  overflow-y: auto;
  overscroll-behavior: contain;
  border-top: 1px solid var(--knit-chrome-border, var(--knit-panel-border));
  touch-action: pan-x pan-y;
}

/* 展开：满宽固定浮层（盖过侧栏），实色面板 */
.knit-home-category-bar:not(.is-collapsed) > .knit-home-category-bar__body {
  position: fixed;
  left: 0;
  right: 0;
  width: 100%;
  max-width: 100vw;
  z-index: 121;
  margin: 0;
  border: 0;
  border-top: 1px solid var(--knit-chrome-border);
  border-radius: 0 0 0.85rem 0.85rem;
  background: var(--knit-panel-bg, #fff);
  box-shadow:
    0 16px 36px rgba(15, 23, 42, 0.18),
    0 2px 6px rgba(15, 23, 42, 0.06);
  -webkit-overflow-scrolling: touch;
}

/* 电脑端：从侧栏右缘起铺满主区，避免被侧栏按钮压住 */
html[data-device="desktop"] .knit-home-category-bar:not(.is-collapsed) > .knit-home-category-bar__body {
  left: var(--knit-side-inset, var(--knit-side-w-collapsed));
  width: auto;
  max-width: none;
  border-radius: 0 0 0.75rem 0;
}

html[data-device="desktop"] .knit-home-category-bar__backdrop {
  left: var(--knit-side-inset, var(--knit-side-w-collapsed));
}

.knit-home-category-bar.is-collapsed .knit-home-category-bar__body,
.knit-home-category-bar__body[hidden] {
  display: none !important;
}

.knit-home-cat-clear,
.knit-home-cat-group {
  display: flex;
  flex-wrap: nowrap;
  align-items: center;
  gap: 0.3rem 0.4rem;
  min-width: 0;
}

.knit-home-cat-clear {
  overflow-x: auto;
  overflow-y: hidden;
  -webkit-overflow-scrolling: touch;
  overscroll-behavior-x: contain;
  scrollbar-width: thin;
  touch-action: pan-x;
}

.knit-home-cat-group__label {
  flex: 0 0 auto;
  min-width: 2.4rem;
  font-size: 0.72rem;
  font-weight: 700;
  color: var(--knit-chrome-text-muted, #64748b);
  letter-spacing: 0.02em;
  white-space: nowrap;
}

.knit-home-cat-group__chips {
  display: flex;
  flex-wrap: nowrap;
  align-items: center;
  gap: 0.3rem;
  flex: 1 1 auto;
  min-width: 0;
  overflow-x: auto;
  overflow-y: hidden;
  -webkit-overflow-scrolling: touch;
  overscroll-behavior-x: contain;
  scrollbar-width: thin;
  touch-action: pan-x;
  padding-bottom: 0.1rem;
}

.knit-home-cat-clear::-webkit-scrollbar,
.knit-home-cat-group__chips::-webkit-scrollbar,
.knit-home-cat-group--range::-webkit-scrollbar {
  height: 3px;
}

.knit-home-cat-clear::-webkit-scrollbar-thumb,
.knit-home-cat-group__chips::-webkit-scrollbar-thumb,
.knit-home-cat-group--range::-webkit-scrollbar-thumb {
  background: color-mix(in srgb, var(--knit-chrome-text-muted, #64748b) 45%, transparent);
  border-radius: 999px;
}

.knit-home-cat-group__chips > .knit-home-series-pill,
.knit-home-cat-clear > .knit-home-series-pill {
  flex: 0 0 auto;
  white-space: nowrap;
}

/* 成份等多项：单行横滑，不再竖向折行 */
.knit-home-cat-group--fiber .knit-home-cat-group__chips {
  max-height: none;
  overflow-x: auto;
  overflow-y: hidden;
  padding-right: 0;
}

.knit-content-cat-group--fiber .knit-content-cat-group__chips {
  max-height: 7.5rem;
  overflow-x: hidden;
  overflow-y: auto;
  padding-right: 0.15rem;
}

.knit-home-cat-sublabel {
  flex: 0 0 auto;
  margin: 0 0.1rem 0 0.15rem;
  font-size: 0.66rem;
  font-weight: 650;
  color: var(--knit-text-subtle);
  letter-spacing: 0.02em;
  white-space: nowrap;
  opacity: 0.85;
}

.knit-content-cat-sublabel {
  flex: 0 0 100%;
  margin: 0.15rem 0 0;
  font-size: 0.66rem;
  font-weight: 650;
  color: var(--knit-text-subtle);
  letter-spacing: 0.02em;
}

.knit-home-cat-group--range {
  overflow-x: auto;
  overflow-y: hidden;
  -webkit-overflow-scrolling: touch;
  overscroll-behavior-x: contain;
  scrollbar-width: thin;
  touch-action: pan-x;
}

.knit-home-cat-group--range .knit-count-range,
.knit-home-cat-group--range .knit-count-range__actions {
  flex: 0 0 auto;
  flex-wrap: nowrap;
  white-space: nowrap;
}

.knit-count-range {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0.35rem 0.45rem;
  flex: 1 1 auto;
  min-width: 0;
}

.knit-count-range__unit {
  min-width: 7.5rem;
  max-width: 100%;
  padding: 0.28rem 0.45rem;
  border: 1px solid var(--knit-control-border);
  border-radius: 8px;
  background: var(--knit-input-bg);
  color: var(--knit-input-text);
  font: inherit;
  font-size: 0.78rem;
}

.knit-count-range__num {
  width: 4.6rem;
  padding: 0.28rem 0.4rem;
  border: 1px solid var(--knit-control-border);
  border-radius: 8px;
  background: var(--knit-input-bg);
  color: var(--knit-input-text);
  font: inherit;
  font-size: 0.78rem;
}

.knit-count-range__sep {
  color: var(--knit-text-muted);
  font-size: 0.85rem;
}

.knit-count-range__hint {
  flex: 1 1 8rem;
  min-width: 0;
  font-size: 0.68rem;
  color: var(--knit-text-subtle);
  line-height: 1.35;
}

.knit-count-range__actions {
  display: flex;
  flex-wrap: wrap;
  gap: 0.3rem;
  width: 100%;
  margin-top: 0.1rem;
}

.knit-count-range--compact .knit-count-range__hint {
  flex-basis: 100%;
}

.knit-home-category-bar .knit-home-series-pill {
  padding: 0.24rem 0.62rem;
  font-size: 0.74rem;
}

/* —— 灵感发布：分类与标签 —— */
.knit-publish-tags {
  display: flex;
  flex-direction: column;
  gap: 1rem;
  margin: 0.35rem 0 0.25rem;
}

.knit-publish-tags[hidden] {
  display: none !important;
}

.knit-publish-tags.is-loading {
  opacity: 0.65;
  pointer-events: none;
}

.knit-publish-tags__section {
  display: flex;
  flex-direction: column;
  gap: 0.45rem;
}

.knit-publish-tags__h {
  margin: 0;
  font-size: 0.88rem;
  font-weight: 700;
  color: var(--knit-text-heading, #0f172a);
  display: flex;
  align-items: center;
  gap: 0.4rem;
}

.knit-publish-tags__req {
  font-size: 0.7rem;
  font-weight: 600;
  color: #b45309;
  background: rgba(180, 83, 9, 0.1);
  padding: 0.1rem 0.4rem;
  border-radius: 999px;
}

.knit-publish-tags__row {
  display: flex;
  flex-wrap: wrap;
  gap: 0.35rem;
}

.knit-publish-tags__row--sub {
  flex-direction: column;
  gap: 0.35rem;
  padding: 0.45rem 0.55rem;
  border-radius: 10px;
  background: var(--knit-chrome-hover, rgba(0, 0, 0, 0.03));
}

.knit-publish-tags__sublabel {
  font-size: 0.72rem;
  color: var(--knit-text-muted, #64748b);
}

.knit-publish-tags__pill {
  margin: 0;
  padding: 0.34rem 0.72rem;
  border: 1px solid var(--knit-control-border, #d8dde6);
  border-radius: 999px;
  background: var(--knit-control-bg, #fff);
  color: var(--knit-text-heading, #0f172a);
  font: inherit;
  font-size: 0.8rem;
  font-weight: 600;
  cursor: pointer;
}

.knit-publish-tags__pill.is-active {
  border-color: var(--knit-text-heading, #0f172a);
  background: var(--knit-text-heading, #0f172a);
  color: #fff;
}

.knit-publish-tags__acc {
  border: 1px solid var(--knit-control-border, #e5e7eb);
  border-radius: 10px;
  overflow: hidden;
}

.knit-publish-tags__acc-head {
  width: 100%;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 0.5rem;
  margin: 0;
  padding: 0.55rem 0.75rem;
  border: 0;
  background: transparent;
  font: inherit;
  font-size: 0.82rem;
  font-weight: 600;
  text-align: left;
  cursor: pointer;
  color: var(--knit-text-heading, #0f172a);
}

.knit-publish-tags__acc-meta {
  font-size: 0.72rem;
  font-weight: 500;
  color: var(--knit-text-muted, #64748b);
}

.knit-publish-tags__acc-body {
  display: flex;
  flex-wrap: wrap;
  gap: 0.35rem;
  padding: 0 0.65rem 0.65rem;
}

.knit-publish-tags__search {
  display: block;
}

.knit-publish-tags__search input {
  width: 100%;
  box-sizing: border-box;
  padding: 0.45rem 0.7rem;
  border: 1px solid var(--knit-control-border, #d8dde6);
  border-radius: 8px;
  font: inherit;
  font-size: 0.85rem;
  background: var(--knit-control-bg, #fff);
  color: inherit;
}

.knit-publish-tags__recommend {
  padding: 0.55rem 0.65rem;
  border-radius: 10px;
  background: var(--knit-chrome-hover, rgba(0, 0, 0, 0.03));
}

.knit-publish-tags__recommend.is-loading {
  opacity: 0.7;
}

.knit-publish-tags__rec-title {
  font-size: 0.78rem;
  font-weight: 700;
  margin-bottom: 0.4rem;
  color: var(--knit-text-heading, #0f172a);
}

.knit-publish-tags__rec-chips {
  display: flex;
  flex-wrap: wrap;
  gap: 0.35rem;
}

.knit-publish-tags__chip {
  margin: 0;
  padding: 0.28rem 0.6rem;
  border: 1px dashed var(--knit-control-border, #cbd5e1);
  border-radius: 999px;
  background: transparent;
  font: inherit;
  font-size: 0.78rem;
  cursor: pointer;
  color: var(--knit-text-heading, #0f172a);
}

.knit-publish-tags__rec-empty {
  font-size: 0.78rem;
  color: var(--knit-text-muted, #64748b);
}

.knit-publish-tags__summary-row {
  display: flex;
  flex-wrap: wrap;
  gap: 0.35rem;
}

.knit-publish-tags__summary-chip {
  display: inline-flex;
  align-items: center;
  gap: 0.25rem;
  margin: 0;
  padding: 0.28rem 0.55rem;
  border: 1px solid var(--knit-control-border, #d8dde6);
  border-radius: 999px;
  background: var(--knit-panel-bg, #fff);
  font: inherit;
  font-size: 0.78rem;
  cursor: pointer;
}

.knit-publish-tags__error {
  margin: 0.35rem 0 0;
  padding: 0.45rem 0.6rem;
  border-radius: 8px;
  background: rgba(185, 28, 28, 0.08);
  color: #b91c1c;
  font-size: 0.82rem;
}

.knit-publish-tags__error[hidden] {
  display: none !important;
}

.knit-content-cat-chips {
  display: flex;
  flex-direction: column;
  gap: 0.55rem;
  margin: 0.15rem 0 0.25rem;
}

.knit-content-cat-group {
  display: flex;
  flex-direction: column;
  gap: 0.28rem;
}

.knit-content-cat-group__label {
  font-size: 0.75rem;
  font-weight: 700;
  color: var(--knit-text-muted, #64748b);
}

.knit-content-cat-group__chips {
  display: flex;
  flex-wrap: wrap;
  gap: 0.35rem;
}

.knit-content-cat-chip {
  padding: 0.34rem 0.72rem;
  font-size: 0.8rem;
  font-weight: 600;
  font-family: inherit;
  color: var(--knit-control-text, #333);
  background: var(--knit-control-bg, #f3f4f6);
  border: 1px solid var(--knit-control-border, #d1d5db);
  border-radius: 999px;
  cursor: pointer;
  transition: background 0.15s ease, border-color 0.15s ease, color 0.15s ease;
}

.knit-content-cat-chip:hover {
  background: var(--knit-control-hover-bg, #e5e7eb);
}

.knit-content-cat-chip.is-active {
  color: var(--knit-pill-active-text);
  background: var(--knit-pill-active-bg);
  border-color: var(--knit-pill-active-bg);
}

html[data-knit-theme="dark"] .knit-content-cat-chip.is-active {
  background: var(--knit-pill-active-bg);
  border-color: var(--knit-pill-active-bg);
  color: var(--knit-pill-active-text);
}

.knit-home-series-bar {
  flex-shrink: 0;
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0.45rem;
  padding: 0.4rem 0.55rem 0.45rem;
  border-bottom: 1px solid var(--knit-divider);
  background: var(--knit-panel-bg);
}

.knit-home-series-bar[hidden] {
  display: none !important;
}

.knit-home-series-pill {
  padding: 0.32rem 0.72rem;
  font-size: 0.78rem;
  font-weight: 600;
  font-family: inherit;
  color: var(--knit-text-body);
  background: var(--knit-tag-bg);
  border: 1px solid var(--knit-control-border);
  border-radius: 999px;
  cursor: pointer;
}

.knit-home-series-pill:hover {
  background: var(--knit-control-hover-bg);
}

.knit-home-series-pill.is-active {
  color: var(--knit-pill-active-text);
  background: var(--knit-pill-active-bg);
  border-color: var(--knit-pill-active-bg);
}

.knit-note-publish-meta {
  display: flex;
  flex-wrap: wrap;
  align-items: flex-end;
  gap: 0.85rem 1.2rem;
  margin: 0.65rem 0 0.35rem;
  padding: 0.55rem 0.15rem 0.15rem;
  border-top: 1px solid var(--knit-surface-panel-border);
}

.knit-note-publish-field {
  display: flex;
  flex-direction: column;
  gap: 0.28rem;
  min-width: min(100%, 240px);
  flex: 1 1 200px;
}

.knit-note-publish-label {
  font-size: 0.78rem;
  font-weight: 600;
  color: var(--knit-surface-text);
}

.knit-note-series-input {
  width: 100%;
  box-sizing: border-box;
  padding: 0.42rem 0.55rem;
  font-size: 0.82rem;
  font-family: inherit;
  border: 1px solid var(--knit-surface-border);
  border-radius: 8px;
  background: var(--knit-surface-input-bg);
  color: var(--knit-surface-text);
}

.knit-note-visibility {
  margin: 0;
  padding: 0;
  border: 0;
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0.55rem 0.85rem;
}

.knit-note-visibility .knit-note-publish-label {
  margin-right: 0.15rem;
}

.knit-note-visibility-option {
  display: inline-flex;
  align-items: center;
  gap: 0.28rem;
  font-size: 0.82rem;
  color: var(--knit-surface-text);
  cursor: pointer;
}

.knit-note-visibility-friends {
  margin: 0.45rem 0 0;
  padding: 0.55rem 0.65rem;
  border: 1px solid var(--knit-surface-border, #e5e7eb);
  border-radius: 10px;
  background: var(--knit-surface-bg, #f9fafb);
}

.knit-note-visibility-friends[hidden] {
  display: none !important;
}

.knit-note-visibility-friends__hint {
  margin: 0 0 0.4rem;
  font-size: var(--knit-hint-size);
  font-weight: var(--knit-hint-weight);
  letter-spacing: var(--knit-hint-ls);
  line-height: var(--knit-hint-lh);
  color: var(--knit-text-muted);
}

.knit-note-visibility-friends__list {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(8.5rem, 1fr));
  gap: 0.35rem 0.55rem;
  max-height: 9.5rem;
  overflow: auto;
}

.knit-note-visibility-friends__empty {
  margin: 0;
  font-size: var(--knit-empty-size);
  font-weight: var(--knit-empty-weight);
  letter-spacing: var(--knit-empty-ls);
  line-height: var(--knit-empty-lh);
  color: var(--knit-text-muted);
}

.knit-note-visibility-friend {
  display: inline-flex;
  align-items: center;
  gap: 0.3rem;
  min-width: 0;
  font-size: 0.78rem;
  color: var(--knit-surface-text);
  cursor: pointer;
}

.knit-note-visibility-friend span {
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.knit-user-profile-scroll {
  flex: 1;
  min-height: 0;
}

.knit-user-profile-empty {
  grid-column: 1 / -1;
  padding: 2.75rem 1.15rem;
  text-align: center;
  font-size: var(--knit-empty-size);
  font-weight: var(--knit-empty-weight);
  letter-spacing: var(--knit-empty-ls);
  line-height: var(--knit-empty-lh);
  color: var(--knit-text-muted);
}

/* 首页主网格无数据时占位（原先两张示例图易误以为有作品） */
.knit-grid > .knit-home-empty {
  grid-column: 1 / -1;
  margin: 0;
  padding: 3rem 1.2rem;
  text-align: center;
  font-size: var(--knit-empty-size);
  font-weight: var(--knit-empty-weight);
  letter-spacing: var(--knit-empty-ls);
  color: var(--knit-text-muted);
  line-height: var(--knit-empty-lh);
}

/* 空态必须横向排：瀑布流行高 2px / 频道条被量成 0 宽时，汉字会一字一行竖排 */
.knit-grid:has(> .knit-home-empty),
.knit-grid:has(> .knit-user-profile-empty),
.knit-grid:has(> .knit-list-state) {
  display: block !important;
  height: auto !important;
  min-height: 0 !important;
  min-width: 0 !important;
  width: 100% !important;
}

.knit-home-empty,
.knit-user-profile-empty,
.knit-follow-list > .knit-follow-id,
.knit-follow-works-list > .knit-user-profile-empty,
.knit-channel-pager__slot .knit-home-empty,
.knit-channel-pager__slot .knit-user-profile-empty,
.knit-channel-pager__hint {
  display: block;
  width: 100%;
  max-width: 100%;
  min-width: 0;
  box-sizing: border-box;
  writing-mode: horizontal-tb;
  text-orientation: mixed;
  word-break: keep-all;
  overflow-wrap: break-word;
  white-space: normal;
}

.knit-follow-list > .knit-follow-id {
  margin: 1.25rem 0;
  padding: 1.25rem 0.75rem;
  text-align: center;
}

.knit-grid > .knit-home-empty--error {
  color: #a33;
}

.knit-list-state {
  grid-column: 1 / -1;
  margin: 0;
  padding: 2.75rem 1.15rem;
  text-align: center;
  font-size: var(--knit-empty-size);
  font-weight: var(--knit-empty-weight);
  letter-spacing: var(--knit-empty-ls);
  color: var(--knit-text-muted);
  line-height: var(--knit-empty-lh);
}

.knit-list-state--error {
  color: #a33;
}

.knit-list-state__retry,
.knit-home-empty__retry {
  margin-top: 0.75rem;
  appearance: none;
  border: 1px solid var(--knit-surface-border, #ccc);
  background: var(--knit-surface-bg, #fff);
  color: var(--knit-surface-text, #333);
  border-radius: 6px;
  padding: 0.4rem 0.9rem;
  font-size: 0.85rem;
  cursor: pointer;
}

.knit-offline-banner {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  z-index: 10050;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 0.75rem;
  flex-wrap: wrap;
  padding: 0.55rem 1rem;
  background: #3b3b3b;
  color: #f5f5f5;
  font-size: 0.85rem;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.18);
}

.knit-offline-banner[hidden] {
  display: none !important;
}

.knit-offline-banner__retry {
  appearance: none;
  border: 1px solid rgba(255, 255, 255, 0.45);
  background: transparent;
  color: inherit;
  border-radius: 4px;
  padding: 0.2rem 0.65rem;
  font-size: 0.8rem;
  cursor: pointer;
}

html.knit-is-offline body {
  padding-top: 2.4rem;
}

.knit-confirm-modal {
  position: fixed;
  inset: 0;
  z-index: 10060;
  display: flex;
  align-items: center;
  justify-content: center;
  background: rgba(0, 0, 0, 0.38);
  padding: 1rem;
}

.knit-confirm-modal[hidden] {
  display: none !important;
}

.knit-confirm-modal__panel {
  width: min(420px, 100%);
  background: var(--knit-surface-bg, #fff);
  color: var(--knit-surface-text, #222);
  border: 1px solid var(--knit-surface-border, var(--knit-panel-border));
  border-radius: 10px;
  padding: 1.1rem 1.2rem 1rem;
  box-shadow: 0 10px 30px rgba(0, 0, 0, 0.18);
}

.knit-confirm-modal__title {
  margin: 0 0 0.5rem;
  font-size: 1.05rem;
}

.knit-confirm-modal__text {
  margin: 0 0 1rem;
  font-size: 0.9rem;
  line-height: 1.5;
  color: var(--knit-text-body);
}

.knit-confirm-modal__actions {
  display: flex;
  justify-content: flex-end;
  gap: 0.55rem;
}

.knit-confirm-modal__btn {
  appearance: none;
  border: 1px solid var(--knit-control-border);
  background: var(--knit-btn-secondary-bg);
  color: var(--knit-control-text);
  border-radius: 6px;
  padding: 0.4rem 0.85rem;
  font-size: 0.85rem;
  cursor: pointer;
}

.knit-confirm-modal__btn--ok {
  background: var(--knit-pill-active-bg);
  border-color: var(--knit-pill-active-bg);
  color: var(--knit-pill-active-text);
}

.knit-confirm-modal__btn--danger {
  background: var(--knit-red);
  border-color: var(--knit-red);
  color: #fff;
}

/**
 * 从不展示「笔记壳」整页，仅保留 #knitNotesDevBtn 等供 JS .click()；强制不占位、不参与命中，避免盖住开发者编辑区。
 * （程序化 click 仍可对 display:none 子按钮生效。）
 */
#knitNotesView.knit-notes-view {
  display: none !important;
}

.knit-notes-actions {
  display: flex;
  width: 100%;
  height: 100%;
}

.knit-notes-btn {
  flex: 0 0 50%;
  width: 50%;
  height: 100%;
  border: 1px solid var(--knit-surface-border);
  border-radius: 0;
  background: var(--knit-surface-bg);
  color: var(--knit-surface-text);
  font-size: 1.2rem;
  font-weight: 700;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: background 0.15s, color 0.15s, border-color 0.15s;
}

.knit-notes-btn:hover {
  border-color: var(--knit-red);
  color: var(--knit-red);
}

.knit-creator-view {
  flex: 1;
  min-width: 0;
  min-height: 0;
  overflow: hidden;
  padding: 1rem 1rem 5.2rem;
  background: var(--knit-view-bg);
  color: var(--knit-view-text);
  display: flex;
  flex-direction: column;
  gap: 0.85rem;
  position: relative;
}

.knit-note-page-back {
  position: absolute;
  top: 0.75rem;
  left: 1rem;
  z-index: 520;
  padding: 0.35rem 0.7rem;
  font-size: 0.82rem;
  font-weight: 600;
  color: var(--knit-control-text);
  background: var(--knit-control-hover-bg);
  border: 1px solid var(--knit-control-border);
  border-radius: 8px;
  cursor: pointer;
  font-family: inherit;
}

.knit-note-page-back:hover {
  background: var(--knit-control-active-bg);
}

#knitDeveloperView:not([hidden]) .knit-note-page-back,
#knitCreatorView:not([hidden]) .knit-note-page-back {
  position: fixed;
  top: 0.75rem;
  left: max(0.65rem, env(safe-area-inset-left, 0px));
  z-index: 550;
}

.knit-note-channel-switch {
  position: absolute;
  top: 0.75rem;
  right: 1rem;
  /* 须高于 .knit-action-notice / .knit-creator-footer / 左侧主编辑区，避免频道下拉被挡 */
  z-index: 520;
  display: flex;
  align-items: center;
  gap: 0.45rem;
  pointer-events: auto;
}

/* 开发者视图：主区保持 overflow:hidden 以免破坏 flex/底栏；频道用 fixed 脱离裁剪，下拉不被裁切 */
#knitDeveloperView:not([hidden]) .knit-note-channel-switch {
  position: fixed;
  top: 0.75rem;
  right: max(0.65rem, env(safe-area-inset-right, 0px));
  z-index: 550;
}

/* 普通用户仅灵感：隐藏频道切换，避免露出材料/资讯入口 */
html.knit-note-channel-locked .knit-note-channel-switch {
  display: none !important;
}

/* 非资讯频道时资讯表单不得露出（草稿把 kind 写成 news/notice 时仍会误开区块） */
#knitDeveloperView:not([data-knit-channel="news"]) #knitDevNewsMeta,
#knitDeveloperView:not([data-knit-channel="news"]) #knitNewsClassifyPanel,
#knitDeveloperView:not([data-knit-channel="news"]) #knitNewsArticleSection,
#knitDeveloperView:not([data-knit-channel="news"]) #knitNewsNoticeSection,
#knitDeveloperView:not([data-knit-channel="news"]) #knitNewsCompetitionSection,
#knitDeveloperView:not([data-knit-channel="news"]) #knitNewsEventSection,
#knitDeveloperView:not([data-knit-channel="news"]) #knitDevNewsTitleBlock,
#knitDeveloperView:not([data-knit-channel="news"]) #knitDevNewsCommonBlock,
#knitDeveloperView:not([data-knit-channel="news"]) #knitDevNewsSignupBlock,
#knitDeveloperView:not([data-knit-channel="news"]) #knitDevNewsCoverBlock {
  display: none !important;
}

.knit-note-channel-select {
  min-width: 7.5rem;
  height: 2rem;
  padding: 0 1.9rem 0 0.7rem;
  border: 1px solid var(--knit-surface-border);
  border-radius: 8px;
  background: var(--knit-surface-input-bg);
  color: var(--knit-surface-text);
  font-size: 0.88rem;
  font-weight: 600;
}

.knit-dev-news-meta {
  margin: 0 0 0.7rem;
  padding: 0;
  border: 1px solid var(--knit-panel-border);
  border-radius: 12px;
  background: var(--knit-panel-bg);
  overflow: hidden;
}

.knit-dev-news-meta[hidden] {
  display: none !important;
}

.knit-news-studio {
  display: flex;
  flex-direction: column;
  min-height: min(70vh, 42rem);
  background: var(--knit-main-bg, var(--knit-view-bg));
}

.knit-news-toolbar {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 0.45rem 0.75rem;
  padding: 0.45rem 0.65rem;
  border-bottom: 1px solid var(--knit-divider);
  background: var(--knit-panel-bg);
  position: sticky;
  top: 0;
  z-index: 2;
}

.knit-news-toolbar-group,
.knit-news-toolbar-formats {
  display: inline-flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0.28rem;
}

.knit-news-toolbar-formats {
  padding: 0.2rem;
  border-radius: 8px;
  background: color-mix(in srgb, var(--knit-control-hover-bg, #f3f4f6) 80%, transparent);
}

.knit-news-toolbar-meta {
  margin-left: auto;
}

.knit-news-stats {
  font-size: 0.72rem;
  color: var(--knit-text-muted);
  white-space: nowrap;
}

.knit-news-size-select {
  height: 1.9rem;
  min-width: 4.6rem;
  padding: 0 0.4rem;
  border: 1px solid var(--knit-control-border);
  border-radius: 6px;
  background: var(--knit-control-bg);
  color: var(--knit-control-text);
  font-family: inherit;
  font-size: 0.78rem;
}

.knit-news-toolbar button {
  min-width: 1.9rem;
  height: 1.75rem;
  padding: 0 0.4rem;
  border: 1px solid transparent;
  border-radius: 6px;
  background: transparent;
  color: var(--knit-control-text);
  font-family: inherit;
  font-size: 0.74rem;
  cursor: pointer;
}

.knit-news-toolbar button:hover,
.knit-news-toolbar button:focus-visible {
  background: var(--knit-control-active-bg);
}

.knit-news-toolbar button[data-news-cmd="insertImage"] {
  min-width: 2.6rem;
}

.knit-news-toolbar-sep {
  width: 1px;
  align-self: stretch;
  min-height: 1rem;
  margin: 0.1rem 0.15rem;
  background: var(--knit-divider);
}

.knit-news-studio-main {
  flex: 1 1 auto;
  display: grid;
  grid-template-columns: minmax(11.5rem, 14rem) minmax(0, 1fr) minmax(11rem, 13.5rem);
  min-height: 0;
  overflow: hidden;
}

.knit-news-studio-main--body-focus {
  grid-template-columns: minmax(0, 1fr) minmax(12rem, 14.5rem);
}

.knit-dev-news-public-lock {
  margin: 0;
  padding: 0.55rem 0.75rem;
  border-bottom: 1px solid var(--knit-divider);
  border-radius: 0;
  background: color-mix(in srgb, var(--knit-red) 8%, var(--knit-panel-bg));
  color: #9a3412;
  font-size: 0.74rem;
  line-height: 1.45;
}

html[data-knit-theme="dark"] .knit-dev-news-public-lock {
  background: rgba(154, 52, 18, 0.22);
  color: #fdba74;
}

.knit-dev-news-title-input--block {
  min-height: 2.4rem;
  margin: 0;
  padding: 0.45rem 0.65rem;
  border: 1px solid var(--knit-control-border);
  border-radius: 8px;
  background: var(--knit-input-bg);
  color: var(--knit-input-text);
  font-size: 1.05rem;
  font-weight: 650;
}

.knit-news-img-tools {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0.35rem 0.45rem;
  margin: 0.55rem 0 0;
  padding: 0.45rem 0.55rem;
  border: 1px solid var(--knit-divider);
  border-radius: 8px;
  background: var(--knit-panel-bg);
}

.knit-news-img-tools[hidden] {
  display: none !important;
}

.knit-news-img-tools__label {
  font-size: 0.72rem;
  color: var(--knit-text-muted);
}

.knit-news-img-tools button {
  min-width: 1.9rem;
  height: 1.65rem;
  padding: 0 0.4rem;
  border: 1px solid var(--knit-control-border);
  border-radius: 6px;
  background: var(--knit-control-bg);
  color: var(--knit-control-text);
  font-family: inherit;
  font-size: 0.72rem;
  cursor: pointer;
}

.knit-news-img-width-range {
  width: min(9rem, 40vw);
  accent-color: var(--knit-red, #e25555);
}

.knit-news-img-width-val {
  min-width: 2.4rem;
  font-size: 0.72rem;
  color: var(--knit-text-muted);
}

.knit-news-body img.knit-news-img.is-news-img-selected {
  outline: 2px solid var(--knit-red, #e25555);
  outline-offset: 2px;
}

.knit-news-hr-picker {
  display: flex;
  flex-direction: column;
  gap: 0;
  border: 1px solid var(--knit-control-border);
  border-radius: 8px;
  overflow: hidden;
}

.knit-news-hr-picker__toggle {
  width: 100%;
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 0.12rem;
  padding: 0.55rem 0.65rem;
  border: none;
  background: transparent;
  text-align: left;
  cursor: pointer;
  font: inherit;
  color: inherit;
}

.knit-news-hr-picker__toggle:hover,
.knit-news-hr-picker__toggle:focus-visible {
  background: var(--knit-control-hover-bg, rgba(0, 0, 0, 0.04));
}

.knit-news-hr-picker__toggle-title {
  font-size: 0.78rem;
  font-weight: 650;
  color: var(--knit-text-heading);
}

.knit-news-hr-picker__toggle-desc {
  font-size: 0.68rem;
  color: var(--knit-text-muted);
}

.knit-news-hr-picker__rows {
  display: none;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 0.3rem;
  padding: 0 0.45rem 0.5rem;
  border-top: 1px solid var(--knit-divider, rgba(0, 0, 0, 0.06));
}

.knit-news-hr-picker.is-open .knit-news-hr-picker__rows {
  display: grid;
  padding-top: 0.4rem;
}

.knit-news-hr-opt {
  display: flex;
  align-items: center;
  justify-content: center;
  min-height: 1.85rem;
  padding: 0.25rem 0.35rem;
  border: 1px solid transparent;
  border-radius: 6px;
  background: transparent;
  cursor: pointer;
}

.knit-news-hr-opt:hover,
.knit-news-hr-opt:focus-visible {
  background: var(--knit-control-hover-bg, rgba(0, 0, 0, 0.04));
  border-color: var(--knit-divider);
}

.knit-news-hr-preview {
  display: block;
  width: 100%;
  height: 0;
  border: none;
  border-top: 1px solid var(--knit-text-muted);
}

.knit-news-hr-preview--dashed {
  border-top-style: dashed;
}

.knit-news-hr-preview--dotted {
  border-top-style: dotted;
}

.knit-news-hr-preview--double {
  border-top-style: double;
  border-top-width: 3px;
}

.knit-news-hr-preview--thick {
  border-top-width: 3px;
}

.knit-news-hr-preview--soft {
  border-top-color: transparent;
  height: 2px;
  background: linear-gradient(90deg, transparent, var(--knit-text-muted), transparent);
}

.knit-news-body hr.knit-news-hr,
.knit-fp-news-article hr.knit-news-hr {
  margin: 1.1rem 0;
  border: none;
  border-top: 1px solid var(--knit-divider);
}

.knit-news-body hr.knit-news-hr--dashed,
.knit-fp-news-article hr.knit-news-hr--dashed {
  border-top-style: dashed;
}

.knit-news-body hr.knit-news-hr--dotted,
.knit-fp-news-article hr.knit-news-hr--dotted {
  border-top-style: dotted;
}

.knit-news-body hr.knit-news-hr--double,
.knit-fp-news-article hr.knit-news-hr--double {
  border-top-style: double;
  border-top-width: 4px;
}

.knit-news-body hr.knit-news-hr--thick,
.knit-fp-news-article hr.knit-news-hr--thick {
  border-top-width: 3px;
}

.knit-news-body hr.knit-news-hr--soft,
.knit-fp-news-article hr.knit-news-hr--soft {
  border-top-color: transparent;
  height: 2px;
  background: linear-gradient(90deg, transparent, var(--knit-text-muted), transparent);
}

.knit-news-body .knit-news-callout,
.knit-fp-news-article .knit-news-callout {
  margin: 0.75rem 0;
  padding: 0.65rem 0.8rem;
  border-left: 3px solid var(--knit-red, #e25555);
  border-radius: 8px;
  background: color-mix(in srgb, var(--knit-red, #e25555) 8%, var(--knit-panel-bg));
}

.knit-news-body .knit-news-contest-tpl,
.knit-fp-news-article .knit-news-contest-tpl {
  margin: 0.4rem 0 0.85rem;
}

.knit-news-body .knit-news-link,
.knit-fp-news-article .knit-news-link {
  color: var(--knit-dm-link, #3b82f6);
  text-decoration: underline;
  text-underline-offset: 2px;
}

@media (max-width: 980px) {
  .knit-news-studio-main,
  .knit-news-studio-main--body-focus {
    grid-template-columns: 1fr;
    overflow: auto;
  }
}

.knit-news-side {
  display: flex;
  flex-direction: column;
  min-height: 0;
  background: var(--knit-panel-bg);
}

.knit-news-side--settings {
  border-right: 1px solid var(--knit-divider);
}

.knit-news-side--blocks {
  border-left: 1px solid var(--knit-divider);
}

.knit-news-side-head {
  flex-shrink: 0;
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 0.7rem 0.75rem 0.55rem;
  border-bottom: 1px solid var(--knit-divider);
}

.knit-news-side-head h3 {
  margin: 0;
  font-size: 0.82rem;
  font-weight: 650;
  color: var(--knit-text-heading);
}

.knit-news-side-kind {
  flex-shrink: 0;
  display: flex;
  flex-direction: column;
  gap: 0.28rem;
  padding: 0.65rem 0.75rem 0.55rem;
  border-bottom: 1px solid var(--knit-divider);
}

.knit-news-side-kind__label {
  font-size: 0.72rem;
  font-weight: 600;
  color: var(--knit-text-muted, #888);
}

.knit-news-side-kind__select {
  width: 100%;
  margin: 0;
}

.knit-news-side-body {
  flex: 1 1 auto;
  min-height: 0;
  overflow: auto;
  padding: 0.7rem 0.75rem 0.85rem;
}

.knit-news-side-foot {
  flex-shrink: 0;
  margin: 0;
  padding: 0.55rem 0.75rem 0.75rem;
  border-top: 1px solid var(--knit-divider);
  font-size: 0.68rem;
  line-height: 1.4;
  color: var(--knit-text-subtle);
}

.knit-news-canvas {
  display: flex;
  flex-direction: column;
  min-width: 0;
  min-height: 0;
  overflow: auto;
  padding: 1rem 1.15rem 1.1rem;
  background: var(--knit-main-bg, var(--knit-view-bg));
}

.knit-news-canvas-foot {
  margin-top: 0.85rem;
  padding: 0.55rem 0.7rem;
  border: 1px solid var(--knit-divider);
  border-radius: 8px;
  background: color-mix(in srgb, var(--knit-panel-bg) 70%, transparent);
}

.knit-dev-news-kind-field {
  display: flex;
  flex-direction: column;
  align-items: stretch;
  gap: 0.35rem;
  margin: 0 0 0.75rem;
}

.knit-dev-news-kind-select {
  width: 100%;
  min-width: 0;
  height: 2rem;
  padding: 0 0.55rem;
  border: 1px solid var(--knit-control-border);
  border-radius: 8px;
  background: var(--knit-input-bg);
  color: var(--knit-input-text);
  font-family: inherit;
  font-size: 0.86rem;
}

.knit-dev-news-hint {
  margin: 0.55rem 0 0;
  max-width: none;
  font-size: var(--knit-hint-size);
  font-weight: var(--knit-hint-weight);
  letter-spacing: var(--knit-hint-ls);
  line-height: var(--knit-hint-lh);
  color: var(--knit-text-muted);
}

.knit-dev-news-summary-input,
.knit-dev-news-meta-input {
  display: block;
  width: 100%;
  margin: 0.35rem 0 0.65rem;
  padding: 0.55rem 0.7rem;
  border: 1px solid var(--knit-control-border, #d1d5db);
  border-radius: 8px;
  background: var(--knit-input-bg, #fff);
  color: var(--knit-input-text, #111);
  font-family: inherit;
  font-size: 0.9rem;
  line-height: 1.45;
  resize: vertical;
  box-sizing: border-box;
}

.knit-dev-news-meta-input {
  resize: none;
}

.knit-news-classify {
  display: flex;
  flex-direction: column;
  gap: 1rem;
  margin-top: 0.25rem;
}

.knit-news-classify[hidden] {
  display: none !important;
}

.knit-news-classify__status {
  margin: 0;
  padding: 0.55rem 0.7rem;
  border-radius: 8px;
  background: color-mix(in srgb, var(--knit-control-bg, #f3f4f6) 80%, #fff);
  color: var(--knit-text-body);
  font-size: 0.85rem;
}

.knit-news-classify__status.is-error {
  background: color-mix(in srgb, var(--knit-red, #b91c1c) 10%, var(--knit-panel-bg, #fff));
  color: #9a3412;
}

.knit-news-classify__retry {
  margin-left: 0.5rem;
  padding: 0.2rem 0.55rem;
  border: 1px solid currentColor;
  border-radius: 6px;
  background: transparent;
  color: inherit;
  font: inherit;
  cursor: pointer;
}

.knit-news-classify__step-title {
  margin: 0 0 0.55rem;
  font-size: 0.92rem;
  font-weight: 700;
  color: var(--knit-text-body);
}

.knit-news-kind-cards {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 0.55rem;
}

@media (min-width: 720px) {
  .knit-news-kind-cards {
    grid-template-columns: repeat(4, minmax(0, 1fr));
  }
}

.knit-news-kind-card {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 0.25rem;
  padding: 0.75rem 0.8rem;
  text-align: left;
  border: 1px solid var(--knit-control-border, #d1d5db);
  border-radius: 12px;
  background: var(--knit-control-bg, #f8fafc);
  color: var(--knit-control-text, #222);
  font-family: inherit;
  cursor: pointer;
  transition: border-color 0.15s ease, background 0.15s ease, box-shadow 0.15s ease;
}

.knit-news-kind-card:hover {
  background: var(--knit-control-hover-bg, #eef2f7);
}

.knit-news-kind-card.is-active {
  border-color: var(--knit-pill-active-bg, #1f2937);
  background: color-mix(in srgb, var(--knit-pill-active-bg, #1f2937) 12%, #fff);
  box-shadow: inset 0 0 0 1px var(--knit-pill-active-bg, #1f2937);
}

.knit-news-kind-card__label {
  font-size: 0.95rem;
  font-weight: 700;
}

.knit-news-kind-card__desc {
  font-size: 0.72rem;
  line-height: 1.35;
  color: var(--knit-text-muted);
}

.knit-news-subtype-chips,
.knit-news-field-roots,
.knit-news-field-children__chips,
.knit-news-fields-selected__list {
  display: flex;
  flex-wrap: wrap;
  gap: 0.4rem;
}

.knit-news-subtype-chip,
.knit-news-field-root,
.knit-news-field-chip,
.knit-news-fields-selected__chip,
.knit-news-field-root-pick {
  padding: 0.38rem 0.72rem;
  font-size: 0.8rem;
  font-weight: 600;
  font-family: inherit;
  color: var(--knit-control-text, #333);
  background: var(--knit-control-bg, #f3f4f6);
  border: 1px solid var(--knit-control-border, #d1d5db);
  border-radius: 999px;
  cursor: pointer;
}

.knit-news-subtype-chip:hover,
.knit-news-field-root:hover,
.knit-news-field-chip:hover {
  background: var(--knit-control-hover-bg, #e5e7eb);
}

.knit-news-subtype-chip.is-active,
.knit-news-field-chip.is-active,
.knit-news-field-root.is-selected {
  color: var(--knit-pill-active-text, #fff);
  background: var(--knit-pill-active-bg, #1f2937);
  border-color: var(--knit-pill-active-bg, #1f2937);
}

.knit-news-field-root.is-expanded:not(.is-selected) {
  border-color: var(--knit-pill-active-bg, #1f2937);
}

.knit-news-field-children {
  margin-top: 0.55rem;
  padding: 0.65rem 0.75rem;
  border-radius: 10px;
  border: 1px dashed var(--knit-control-border, #d1d5db);
  background: color-mix(in srgb, var(--knit-panel-bg, #fff) 92%, #e5e7eb);
}

.knit-news-field-children__head {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 0.4rem;
  margin-bottom: 0.45rem;
  font-size: 0.78rem;
  color: var(--knit-text-muted);
}

.knit-news-fields-selected {
  display: flex;
  flex-wrap: wrap;
  align-items: flex-start;
  gap: 0.4rem 0.55rem;
  margin-top: 0.7rem;
}

.knit-news-fields-selected__label {
  font-size: 0.8rem;
  font-weight: 600;
  color: var(--knit-text-muted);
  padding-top: 0.25rem;
}

.knit-news-fields-selected__chip {
  display: inline-flex;
  align-items: center;
  gap: 0.25rem;
}

.knit-news-fields-selected__empty {
  font-size: 0.8rem;
  color: var(--knit-text-muted);
}

.knit-news-comp-sections {
  display: flex;
  flex-direction: column;
  gap: 0.85rem;
  margin-top: 0.35rem;
}

.knit-news-comp-card {
  padding: 0.85rem 0.9rem;
  border: 1px solid var(--knit-control-border, #d1d5db);
  border-radius: 12px;
  background: color-mix(in srgb, var(--knit-panel-bg, #fff) 94%, #e5e7eb);
}

.knit-news-comp-card__title {
  margin: 0 0 0.65rem;
  font-size: 0.92rem;
  font-weight: 700;
  color: var(--knit-text-body);
}

.knit-news-comp-chips {
  display: flex;
  flex-wrap: wrap;
  gap: 0.4rem;
  margin: 0.35rem 0 0.65rem;
}

.knit-news-comp-chip {
  padding: 0.38rem 0.72rem;
  font-size: 0.8rem;
  font-weight: 600;
  font-family: inherit;
  color: var(--knit-control-text, #333);
  background: var(--knit-control-bg, #f3f4f6);
  border: 1px solid var(--knit-control-border, #d1d5db);
  border-radius: 999px;
  cursor: pointer;
}

.knit-news-comp-chip:hover {
  background: var(--knit-control-hover-bg, #e5e7eb);
}

.knit-news-comp-chip.is-active {
  color: var(--knit-pill-active-text, #fff);
  background: var(--knit-pill-active-bg, #1f2937);
  border-color: var(--knit-pill-active-bg, #1f2937);
}

.knit-news-comp-fee-row {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 0.65rem;
}

@media (max-width: 560px) {
  .knit-news-comp-fee-row {
    grid-template-columns: 1fr;
  }
}

.knit-dev-news-public-lock {
  margin: 0 0 0.75rem;
  padding: 0.4rem 0.55rem;
  border-radius: 8px;
  background: color-mix(in srgb, var(--knit-red) 8%, var(--knit-panel-bg));
  color: #9a3412;
  font-size: 0.74rem;
  line-height: 1.45;
}

html[data-knit-theme="dark"] .knit-dev-news-public-lock {
  background: rgba(154, 52, 18, 0.22);
  color: #fdba74;
}

.knit-dev-news-title-field {
  display: flex;
  flex-direction: column;
  gap: 0.3rem;
  margin: 0.65rem 0 0.7rem;
}

.knit-dev-news-title-input {
  width: 100%;
  box-sizing: border-box;
  min-height: 2.6rem;
  margin: 0 0 0.85rem;
  padding: 0.15rem 0;
  border: none;
  border-radius: 0;
  background: transparent;
  color: var(--knit-text-heading);
  font-family: inherit;
  font-size: clamp(1.35rem, 2.2vw, 1.85rem);
  font-weight: 700;
  line-height: 1.25;
  outline: none;
}

.knit-dev-news-title-input::placeholder {
  color: var(--knit-text-subtle);
  font-weight: 650;
}

.knit-dev-news-signup-fields {
  display: flex;
  flex-direction: column;
  align-items: stretch;
  gap: 0.55rem;
  margin: 0 0 0.35rem;
}

.knit-dev-news-signup-toggle {
  display: inline-flex;
  align-items: center;
  gap: 0.4rem;
  font-size: 0.86rem;
  color: var(--knit-text-heading);
  cursor: pointer;
}

.knit-dev-news-deadline-field {
  display: flex;
  flex-direction: column;
  align-items: stretch;
  gap: 0.3rem;
}

.knit-dev-news-deadline-input {
  width: 100%;
  height: 2rem;
  padding: 0 0.45rem;
  border: 1px solid var(--knit-control-border);
  border-radius: 8px;
  background: var(--knit-input-bg);
  color: var(--knit-input-text);
  font-family: inherit;
  font-size: 0.84rem;
}

.knit-dev-news-signup-hint {
  margin: 0;
  font-size: var(--knit-hint-size);
  font-weight: var(--knit-hint-weight);
  letter-spacing: var(--knit-hint-ls);
  line-height: var(--knit-hint-lh);
  color: var(--knit-text-muted);
}

.knit-news-block-list {
  display: flex;
  flex-direction: column;
  gap: 0.4rem;
  padding-top: 0.15rem;
}

.knit-news-block-btn {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 0.12rem;
  width: 100%;
  padding: 0.55rem 0.6rem;
  border: 1px solid var(--knit-control-border);
  border-radius: 8px;
  background: transparent;
  color: inherit;
  text-align: left;
  font-family: inherit;
  cursor: pointer;
}

.knit-news-block-btn:hover,
.knit-news-block-btn:focus-visible {
  background: var(--knit-control-hover-bg, rgba(0, 0, 0, 0.04));
}

.knit-news-block-btn:disabled,
.knit-news-block-btn[aria-disabled="true"] {
  opacity: 0.55;
  cursor: not-allowed;
  background: transparent;
}

.knit-news-block-btn__title {
  font-size: 0.8rem;
  font-weight: 650;
  color: var(--knit-text-heading);
}

.knit-news-block-btn__desc {
  font-size: 0.68rem;
  color: var(--knit-text-muted);
  line-height: 1.35;
}

.knit-news-body {
  flex: 1 1 auto;
  min-height: 16rem;
  padding: 0.75rem 0.85rem 1rem;
  border: 1px solid var(--knit-control-border);
  border-radius: 10px;
  outline: none;
  background: var(--knit-panel-bg);
  font-size: 0.95rem;
  line-height: 1.7;
  color: var(--knit-input-text);
}

.knit-news-body:empty::before {
  content: attr(data-placeholder);
  color: var(--knit-text-subtle);
}

.knit-news-body blockquote {
  margin: 0.45rem 0;
  padding: 0.15rem 0 0.15rem 0.7rem;
  border-left: 3px solid var(--knit-red);
  color: var(--knit-text-muted);
}

.knit-news-body hr {
  margin: 1rem 0;
  border: none;
  border-top: 1px solid var(--knit-divider);
}

.knit-news-body h2 {
  margin: 1rem 0 0.45rem;
  font-size: 1.15rem;
  color: var(--knit-text-heading);
}

.knit-news-body img.knit-news-img,
.knit-news-body img {
  display: block;
  max-width: 100%;
  height: auto;
  margin: 0.7rem 0;
  border-radius: 8px;
}

@media (max-width: 980px) {
  .knit-news-studio-main {
    grid-template-columns: 1fr;
    overflow: auto;
  }

  .knit-news-side--settings,
  .knit-news-side--blocks {
    border: none;
    border-bottom: 1px solid var(--knit-divider);
  }

  .knit-news-side--blocks {
    border-bottom: none;
    border-top: 1px solid var(--knit-divider);
  }

  .knit-news-side-body {
    max-height: none;
  }

  .knit-news-block-list {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .knit-news-toolbar-meta {
    width: 100%;
    margin-left: 0;
  }
}

#knitDeveloperView[data-knit-channel="news"] .knit-note-visibility,
#knitDeveloperView[data-knit-channel="news"] #knitDevHoverPickerBlock,
#knitDeveloperView[data-knit-channel="news"] .knit-note-publish-field,
#knitDeveloperView[data-knit-channel="news"] .knit-creator-compress-hint {
  display: none !important;
}

#knitDeveloperView[data-knit-channel="news"] #knitDevText {
  min-height: 11rem;
}

.knit-fp-news-article {
  white-space: normal;
  font-size: 0.95rem;
  line-height: 1.7;
}

.knit-fp-news-article p {
  margin: 0 0 0.7rem;
}

.knit-fp-news-article blockquote {
  margin: 0.5rem 0 0.8rem;
  padding-left: 0.7rem;
  border-left: 3px solid var(--knit-red);
  color: var(--knit-text-muted);
}

.knit-fp-news-article hr {
  margin: 1rem 0;
  border: none;
  border-top: 1px solid var(--knit-divider);
}

.knit-fp-news-article h2 {
  margin: 1rem 0 0.45rem;
  font-size: 1.12rem;
  color: var(--knit-text-heading);
}

.knit-fp-news-article img.knit-news-img,
.knit-fp-news-article img {
  display: block;
  max-width: 100%;
  height: auto;
  margin: 0.75rem 0 1rem;
  border-radius: 8px;
}

.knit-fp-signup[hidden] {
  display: none !important;
}

.knit-fp-signup-bar {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: flex-start;
  gap: 0.65rem 0.9rem;
  margin-bottom: 0.55rem;
}

.knit-fp-signup-meta {
  margin: 0;
  flex: 1 1 10rem;
  font-size: 0.86rem;
  line-height: 1.45;
  color: var(--knit-text-body);
}

.knit-fp-signup-btn {
  min-width: 6.2rem;
  height: 2.15rem;
  padding: 0 0.9rem;
  border: none;
  border-radius: 999px;
  background: var(--knit-red);
  color: #fff;
  font-family: inherit;
  font-size: 0.88rem;
  font-weight: 650;
  cursor: pointer;
}

.knit-fp-signup-btn:hover,
.knit-fp-signup-btn:focus-visible {
  filter: brightness(1.06);
}

.knit-fp-signup-btn.is-on {
  background: var(--knit-panel-border);
  color: var(--knit-text-heading);
}

.knit-fp-signup-btn:disabled,
.knit-fp-signup-btn[aria-disabled="true"] {
  opacity: 0.55;
  cursor: not-allowed;
}

.knit-fp-signup-author {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0.55rem 0.85rem;
  padding-top: 0.35rem;
  border-top: 1px solid var(--knit-control-border);
}

.knit-fp-signup-author[hidden] {
  display: none !important;
}

.knit-fp-signup-toggle,
.knit-fp-signup-deadline-field {
  display: inline-flex;
  align-items: center;
  gap: 0.35rem;
  font-size: 0.8rem;
  color: var(--knit-text-heading);
}

.knit-fp-signup-deadline-field input {
  height: 1.9rem;
  padding: 0 0.4rem;
  border: 1px solid var(--knit-control-border);
  border-radius: 7px;
  background: var(--knit-input-bg);
  color: var(--knit-input-text);
  font-family: inherit;
  font-size: 0.8rem;
}

.knit-fp-signup-save {
  height: 1.9rem;
  padding: 0 0.7rem;
  border: 1px solid var(--knit-control-border);
  border-radius: 7px;
  background: var(--knit-input-bg);
  color: var(--knit-text-heading);
  font-family: inherit;
  font-size: 0.78rem;
  cursor: pointer;
}

.knit-fp-signup-owner-hint {
  flex: 1 1 100%;
  margin: 0;
  font-size: 0.76rem;
  color: var(--knit-text-muted);
}

.knit-fp-signup-list {
  flex: 1 1 100%;
  list-style: none;
  margin: 0.15rem 0 0;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: 0.55rem;
}

.knit-fp-signup-item {
  display: flex;
  align-items: center;
  gap: 0.5rem;
}

.knit-fp-signup-avatar {
  flex-shrink: 0;
  width: 1.75rem;
  height: 1.75rem;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 0.7rem;
  font-weight: 700;
  color: #fff;
  background: #5c7a9a;
  overflow: hidden;
}

.knit-fp-signup-avatar img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.knit-fp-signup-item-body {
  flex: 1;
  min-width: 0;
}

.knit-fp-signup-item-name {
  display: block;
  font-size: 0.8rem;
  font-weight: 600;
  color: var(--knit-text-heading);
}

.knit-fp-signup-item-time {
  display: block;
  font-size: 0.72rem;
  color: var(--knit-text-muted);
}

.knit-fp-signup-item-actions {
  display: flex;
  gap: 0.3rem;
}

.knit-fp-signup-item-actions button {
  height: 1.7rem;
  padding: 0 0.5rem;
  border: 1px solid var(--knit-control-border);
  border-radius: 6px;
  background: transparent;
  color: var(--knit-text-heading);
  font-family: inherit;
  font-size: 0.72rem;
  cursor: pointer;
}

html[data-knit-theme="dark"] .knit-fp-signup-btn.is-on {
  background: rgba(255, 255, 255, 0.12);
  color: var(--knit-text-heading);
}

.knit-card--news-text .knit-card-news-text {
  position: absolute;
  inset: 0;
  display: flex;
  align-items: flex-end;
  padding: 0.85rem 0.75rem;
  font-size: 0.92rem;
  font-weight: 700;
  line-height: 1.4;
  color: var(--knit-text-body);
  background: linear-gradient(180deg, transparent 35%, rgba(255, 255, 255, 0.92) 78%);
  pointer-events: none;
}

#knitDeveloperView[data-knit-channel="news"] #knitDevHoverPickerBlock {
  display: none !important;
}


.knit-creator-left {
  /* 上传区 / 电子色卡等插件占满主栏全宽，不再卡在约半屏的 680px 列里 */
  width: 100%;
  max-width: none;
  align-self: stretch;
  display: flex;
  flex-direction: column;
  gap: 0.7rem;
  flex: 1;
  min-height: 0;
  overflow: auto;
  padding-right: 0.1rem;
  padding-bottom: 0.35rem;
  position: relative;
  /** 高于匿名叠层与提示条未隐藏时的残留命中区，低于底栏与频道条 */
  z-index: 100;
}

.knit-creator-left .knit-dev-hover-picker,
.knit-creator-left .knit-creator-hover-picker,
.knit-creator-left .knit-note-publish-meta {
  flex: 0 0 auto;
}

/* 发布频道在开发者视图为 fixed；左侧仅需与顶栏留白协调 */
#knitDeveloperView.knit-creator-view > .knit-creator-left {
  padding-top: 0.5rem;
}

.knit-creator-upload-trigger {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: fit-content;
  padding: 0.45rem 0.9rem;
  border-radius: 8px;
  border: 1px solid var(--knit-surface-border);
  background: var(--knit-surface-bg);
  color: var(--knit-surface-text);
  cursor: pointer;
  transition: background 0.15s, color 0.15s, border-color 0.15s;
}

.knit-creator-upload-trigger:hover {
  border-color: var(--knit-red);
  color: var(--knit-red);
}

.knit-creator-upload-input {
  display: none;
}

.knit-creator-upload-hint {
  font-size: var(--knit-hint-size);
  font-weight: var(--knit-hint-weight);
  letter-spacing: var(--knit-hint-ls);
  line-height: var(--knit-hint-lh);
  color: var(--knit-text-muted);
}

.knit-dev-media-upload-zone {
  display: flex;
  flex-direction: column;
  gap: 0.45rem;
}

.knit-dev-media-upload-zone[hidden] {
  display: none !important;
}

.knit-dev-detail-images-device {
  display: flex;
  flex-direction: column;
  gap: 0.35rem;
  margin: 0.35rem 0 0.15rem;
  padding: 0.55rem 0.7rem 0.6rem;
  border: 1px solid var(--knit-surface-border);
  border-radius: 10px;
  background: var(--knit-surface-bg);
}

.knit-dev-detail-images-device[hidden] {
  display: none !important;
}

.knit-dev-detail-images-device__title {
  margin: 0;
  font-size: 0.86rem;
  font-weight: 700;
  color: var(--knit-surface-text);
}

.knit-dev-detail-images-device__row {
  display: flex;
  flex-wrap: wrap;
  gap: 0.55rem 1rem;
}

.knit-dev-detail-images-device__opt {
  display: inline-flex;
  align-items: center;
  gap: 0.35rem;
  font-size: 0.84rem;
  color: var(--knit-surface-text);
  cursor: pointer;
  user-select: none;
}

.knit-dev-detail-images-device__opt input {
  margin: 0;
}

.knit-dev-detail-images-device__hint {
  margin: 0;
  font-size: 0.75rem;
  line-height: 1.35;
  color: var(--knit-text-muted);
}

.knit-note-cover-hint {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 0.35rem;
  padding: 0.65rem 0.75rem 0.7rem;
  border: 1px dashed var(--knit-surface-border);
  border-radius: 10px;
  background: var(--knit-surface-bg);
}

.knit-note-cover-hint[hidden] {
  display: none !important;
}

.knit-note-cover-hint__text {
  margin: 0;
  font-size: 0.88rem;
  font-weight: 700;
  color: var(--knit-surface-text);
}

.knit-note-cover-hint__sub {
  margin: 0;
  font-size: 0.78rem;
  line-height: 1.4;
  color: var(--knit-text-muted);
}

.knit-note-cover-hint__opt {
  display: inline-flex;
  align-items: center;
  gap: 0.35rem;
  font-size: 0.84rem;
  color: var(--knit-surface-text);
  cursor: pointer;
}

.knit-note-cover-hint__preview {
  display: block;
  width: 7.2rem;
  height: 9.6rem;
  object-fit: cover;
  border-radius: 8px;
  border: 1px solid var(--knit-surface-border);
  background: var(--knit-tag-bg);
}

.knit-note-cover-hint__preview[hidden] {
  display: none !important;
}

.knit-text-cover-modal__panel {
  width: min(92vw, 24rem);
}

.knit-text-cover-modal__opt {
  margin-top: 0.7rem;
}

#knitTextCoverModalPreview {
  margin-top: 0.65rem;
}

#knitDeveloperView[data-knit-channel="news"] .knit-note-cover-hint {
  display: none !important;
}

.knit-creator-image-cell {
  position: relative;
  aspect-ratio: 1 / 1;
  border: 1px solid var(--knit-surface-border);
  border-radius: 10px;
  overflow: hidden;
  background: var(--knit-surface-bg);
}

.knit-creator-image-cell.is-duplicate {
  border-color: #d32f2f;
  box-shadow: inset 0 0 0 1px rgba(211, 47, 47, 0.35);
}

.knit-creator-image-cell img,
.knit-creator-image-cell video {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}

.knit-creator-image-cell.is-video::after {
  content: "视频";
  position: absolute;
  left: 6px;
  bottom: 6px;
  padding: 2px 7px;
  border-radius: 999px;
  background: rgba(0, 0, 0, 0.62);
  color: #fff;
  font-size: 11px;
  line-height: 1.2;
  font-weight: 700;
  pointer-events: none;
}

.knit-creator-compress-hint {
  margin: 0.35rem 0 0;
  max-width: 42rem;
  font-size: var(--knit-hint-size);
  font-weight: var(--knit-hint-weight);
  letter-spacing: var(--knit-hint-ls);
  color: var(--knit-text-muted);
  line-height: var(--knit-hint-lh);
}

.knit-like-btn {
  appearance: none;
  -webkit-appearance: none;
  -webkit-user-drag: none;
  user-select: none;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 0.18rem;
  margin: 0;
  padding: 0;
  min-width: 0;
  min-height: 0;
  border: 0;
  border-radius: 0;
  background: transparent;
  color: #fff;
  font: inherit;
  font-size: 0.7rem;
  font-weight: 700;
  line-height: 1;
  cursor: pointer;
  z-index: 3;
  filter: none;
}

.knit-like-btn__icon {
  width: 1.18rem;
  height: 1.18rem;
  display: block;
  background: transparent;
  filter: drop-shadow(0 0 0.7px rgba(0, 0, 0, 0.75));
}

.knit-like-btn__icon svg {
  display: block;
  width: 100%;
  height: 100%;
  overflow: visible;
  fill: none;
  background: transparent;
}

.knit-like-btn__heart,
.knit-like-btn__mark {
  fill: none !important;
  stroke: currentColor;
  stroke-width: 1.55;
  stroke-linejoin: round;
  stroke-linecap: round;
}

.knit-like-btn.is-liked {
  background: transparent;
  color: #ef4444;
}

.knit-like-btn:hover,
.knit-like-btn:focus-visible {
  background: transparent;
}

.knit-like-btn:focus-visible {
  outline: 2px solid currentColor;
  outline-offset: 2px;
  border-radius: 4px;
}

.knit-like-btn.is-busy {
  pointer-events: none;
  opacity: 0.7;
}

.knit-like-btn.is-liked .knit-like-btn__heart,
.knit-like-btn.is-liked .knit-like-btn__mark {
  fill: currentColor !important;
  stroke: currentColor;
  stroke-width: 1.15;
}

.knit-like-btn__count:empty {
  display: none;
}

.knit-like-btn--card {
  position: absolute;
  top: 0.38rem;
  right: 0.38rem;
  z-index: 6;
  pointer-events: auto;
}

.knit-meta-footer .knit-like-btn--card {
  position: static;
  top: auto;
  right: auto;
  margin-left: auto;
  flex-shrink: 0;
}

.knit-like-btn--fp-media,
#knitFpMediaLikeBtn,
#knitFpAuthorLikeBtn {
  display: none !important;
}

#knitFullpage.is-work-turning .knit-like-btn--fp-media,
#knitFullpage[data-knit-yarn-detail="1"] #knitFpAuthorLikeBtn {
  display: none !important;
}

.knit-channel-peek-cell {
  position: relative;
}

.knit-channel-peek-cell .knit-like-btn {
  pointer-events: none;
}

.knit-card[data-knit-like-hold="1"],
.knit-mine-work-card[data-knit-like-hold="1"],
.knit-mine-history-card[data-knit-like-hold="1"] {
  -webkit-user-drag: none;
}

.knit-like-btn--mine {
  position: absolute;
  top: 0.38rem;
  right: 0.38rem;
}

.knit-like-btn--follow {
  background: transparent;
  color: var(--knit-text-heading);
  filter: none;
}

.knit-like-btn--follow.is-liked {
  background: transparent;
  color: var(--knit-red);
}

.knit-card-play-badge {
  position: absolute;
  right: 8px;
  bottom: 8px;
  width: 28px;
  height: 28px;
  border-radius: 999px;
  background: rgba(0, 0, 0, 0.55);
  color: #fff;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 12px;
  line-height: 1;
  pointer-events: none;
  z-index: 2;
}

.knit-card-play-badge::before {
  content: "";
  width: 0;
  height: 0;
  border-style: solid;
  border-width: 5px 0 5px 8px;
  border-color: transparent transparent transparent #fff;
  margin-left: 2px;
}

.knit-fullpage-video {
  max-width: 100%;
  max-height: min(78vh, 100%);
  width: auto;
  height: auto;
  object-fit: contain;
  background: #000;
  border-radius: 0;
  display: block;
}

.knit-fullpage-left-inner.is-video-mode .knit-fullpage-img {
  display: none;
}

.knit-fullpage-left-inner.is-video-mode .knit-fullpage-video {
  display: block;
}

.knit-creator-image-cover {
  position: absolute;
  left: 6px;
  top: 6px;
  padding: 2px 7px;
  border-radius: 999px;
  background: rgba(201, 48, 48, 0.92);
  color: #fff;
  font-size: 11px;
  line-height: 1.2;
  font-weight: 700;
}

.knit-creator-image-dup {
  position: absolute;
  right: 34px;
  top: 6px;
  width: 22px;
  height: 22px;
  border-radius: 999px;
  background: #d32f2f;
  color: #fff;
  font-size: 16px;
  line-height: 22px;
  text-align: center;
  font-weight: 800;
  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.25);
}

.knit-creator-image-remove {
  position: absolute;
  top: 6px;
  right: 6px;
  width: 22px;
  height: 22px;
  border: none;
  border-radius: 999px;
  background: rgba(0, 0, 0, 0.65);
  color: #fff;
  font-size: 14px;
  line-height: 1;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
}

.knit-creator-image-remove:hover {
  background: rgba(0, 0, 0, 0.8);
}

.knit-creator-textarea {
  width: 100%;
  min-height: 140px;
  border: 1px solid var(--knit-surface-border);
  border-radius: 10px;
  padding: 0.65rem 0.7rem;
  font-size: 0.9rem;
  font-family: inherit;
  color: var(--knit-surface-text);
  resize: vertical;
  background: var(--knit-surface-input-bg);
}

.knit-creator-footer {
  display: flex;
  justify-content: flex-end;
  gap: 0.7rem;
  margin-top: 0;
  padding: 0.75rem 0.25rem 0;
  background: var(--knit-surface-panel-bg);
  border-top: 1px solid var(--knit-surface-panel-border);
  position: absolute;
  left: 1rem;
  right: 1rem;
  bottom: 0.65rem;
  z-index: 280;
  pointer-events: auto;
}

.knit-action-notice {
  position: absolute;
  left: 1rem;
  right: 1rem;
  bottom: 3.85rem;
  z-index: 260;
  padding: 0.5rem 0.65rem;
  border: 1px solid #f1b4b4;
  border-radius: 8px;
  background: color-mix(in srgb, var(--knit-red) 9%, var(--knit-panel-bg));
  color: #b42318;
  font-size: 0.82rem;
  line-height: 1.35;
}

#knitDevActionNotice[hidden] {
  display: none !important;
  pointer-events: none !important;
}

.knit-note-upload-progress {
  position: absolute;
  left: 1rem;
  right: 1rem;
  bottom: 5.35rem;
  z-index: 270;
  padding: 0.55rem 0.7rem 0.5rem;
  border: 1px solid var(--knit-surface-border);
  border-radius: 10px;
  background: var(--knit-surface-panel-bg);
  box-shadow: 0 4px 16px rgba(15, 23, 42, 0.08);
}

.knit-note-upload-progress[hidden] {
  display: none !important;
}

.knit-note-upload-progress__label {
  margin: 0 0 0.45rem;
  font-size: 0.82rem;
  color: var(--knit-surface-text);
  line-height: 1.35;
}

.knit-note-upload-progress__track {
  height: 8px;
  border-radius: 999px;
  background: var(--knit-tag-bg);
  overflow: hidden;
}

.knit-note-upload-progress__bar {
  height: 100%;
  width: 0;
  border-radius: inherit;
  background: linear-gradient(90deg, #dc2626, #f87171);
  transition: width 0.18s ease;
}

.knit-note-upload-progress__pct {
  margin: 0.35rem 0 0;
  font-size: 0.78rem;
  color: var(--knit-surface-muted);
  text-align: right;
}

.knit-creator-footer-btn {
  min-width: 6.5rem;
  padding: 0.48rem 0.95rem;
  border: 1px solid var(--knit-surface-border);
  border-radius: 9px;
  background: var(--knit-surface-bg);
  color: var(--knit-surface-text);
  font-size: 0.9rem;
  font-weight: 600;
  cursor: pointer;
  position: relative;
  z-index: 21;
  pointer-events: auto;
  transition: background 0.15s, color 0.15s, border-color 0.15s;
}

.knit-creator-footer-btn--primary {
  background: var(--knit-red);
  border-color: var(--knit-red);
  color: #fff;
}

/* 电脑端笔记：左侧预览栏（竖排机框，可收起） */
.knit-note-device-previews {
  display: none;
}

html[data-device="desktop"] body.knit-page--notes-open {
  --knit-ndp-rail: 11.5rem;
}

html[data-device="desktop"] body.knit-page--notes-open .knit-creator-view:not([hidden]) {
  padding-left: calc(var(--knit-ndp-rail) + 0.85rem);
}

html[data-device="desktop"] body.knit-page--notes-open .knit-creator-view:not([hidden]):has(> .knit-note-device-previews[data-knit-ndp-mode="tablet"]) {
  --knit-ndp-rail: 13.25rem;
}

html[data-device="desktop"] body.knit-page--notes-open .knit-creator-view:not([hidden]):has(> .knit-note-device-previews[data-knit-ndp-mode="desktop"]) {
  --knit-ndp-rail: 15.5rem;
}

html[data-device="desktop"] body.knit-page--notes-open .knit-creator-view:not([hidden]):has(> .knit-note-device-previews[data-knit-ndp-collapsed="1"]) {
  --knit-ndp-rail: 5.25rem;
}

html[data-device="desktop"] body.knit-page--notes-open .knit-creator-view:not([hidden]) .knit-creator-footer,
html[data-device="desktop"] body.knit-page--notes-open .knit-creator-view:not([hidden]) .knit-action-notice,
html[data-device="desktop"] body.knit-page--notes-open .knit-creator-view:not([hidden]) .knit-note-upload-progress {
  left: calc(var(--knit-ndp-rail) + 0.85rem);
}

html[data-device="desktop"] body.knit-page--notes-open #knitCreatorView:not([hidden]) > .knit-note-page-back,
html[data-device="desktop"] body.knit-page--notes-open #knitDeveloperView:not([hidden]) > .knit-note-page-back {
  left: calc(var(--knit-ndp-rail) + 0.85rem) !important;
  top: 0.75rem;
  z-index: 560;
}

html[data-device="desktop"] body.knit-page--notes-open .knit-creator-view:not([hidden]) > .knit-note-device-previews {
  display: block;
  position: absolute;
  left: 0.45rem;
  top: 0.55rem;
  bottom: 4.65rem;
  transform: none;
  z-index: 250;
  width: var(--knit-ndp-rail);
  pointer-events: none;
}

.knit-ndp-shell {
  pointer-events: auto;
  height: 100%;
  min-height: 0;
  display: flex;
  flex-direction: column;
  gap: 0.5rem;
  padding: 0.55rem 0.5rem 0.65rem;
  border-radius: 16px;
  border: 1px solid color-mix(in srgb, var(--knit-panel-border, rgba(0, 0, 0, 0.1)) 85%, transparent);
  background: color-mix(in srgb, var(--knit-panel-bg, #fff) 92%, transparent);
  backdrop-filter: blur(14px) saturate(1.15);
  -webkit-backdrop-filter: blur(14px) saturate(1.15);
  box-shadow:
    0 1px 0 rgba(255, 255, 255, 0.35) inset,
    0 10px 28px rgba(15, 23, 42, 0.1);
}

.knit-ndp-head {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0.35rem 0.4rem;
  min-width: 0;
  flex: 0 0 auto;
}

.knit-ndp-head-title {
  flex: 1 1 auto;
  min-width: 0;
  font-size: 0.72rem;
  font-weight: 750;
  letter-spacing: 0.02em;
  color: var(--knit-text-heading, #111);
}

.knit-ndp-switch {
  position: relative;
  flex: 0 0 auto;
}

.knit-ndp-switch-toggle {
  appearance: none;
  display: inline-flex;
  align-items: center;
  gap: 0.25rem;
  border: 1px solid var(--knit-control-border, rgba(0, 0, 0, 0.08));
  background: color-mix(in srgb, var(--knit-control-hover-bg, #f3f4f6) 70%, transparent);
  color: var(--knit-text-heading, #111);
  font-family: inherit;
  font-size: 0.66rem;
  font-weight: 700;
  padding: 0.22rem 0.55rem;
  border-radius: 999px;
  cursor: pointer;
}

.knit-ndp-switch-toggle::after {
  content: "";
  width: 0;
  height: 0;
  border-left: 0.22rem solid transparent;
  border-right: 0.22rem solid transparent;
  border-top: 0.28rem solid currentColor;
  opacity: 0.7;
}

.knit-note-device-previews[data-knit-ndp-switch-open="1"] .knit-ndp-switch-toggle::after {
  transform: rotate(180deg);
}

.knit-ndp-switch-menu {
  position: absolute;
  top: calc(100% + 0.28rem);
  right: 0;
  z-index: 5;
  display: flex;
  flex-direction: column;
  gap: 0.1rem;
  min-width: 5.5rem;
  padding: 0.28rem;
  border-radius: 10px;
  border: 1px solid var(--knit-control-border, rgba(0, 0, 0, 0.08));
  background: var(--knit-panel-bg, #fff);
  box-shadow: 0 10px 24px rgba(15, 23, 42, 0.14);
}

.knit-ndp-switch-menu[hidden] {
  display: none !important;
}

.knit-ndp-switch-menu button {
  appearance: none;
  border: none;
  background: transparent;
  color: var(--knit-text-muted, #6b7280);
  font-family: inherit;
  font-size: 0.68rem;
  font-weight: 650;
  text-align: left;
  padding: 0.35rem 0.5rem;
  border-radius: 7px;
  cursor: pointer;
}

.knit-ndp-switch-menu button.is-on,
.knit-ndp-switch-menu button:hover,
.knit-ndp-switch-menu button:focus-visible {
  background: var(--knit-control-hover-bg, rgba(0, 0, 0, 0.05));
  color: var(--knit-text-heading, #111);
}

.knit-ndp-collapse {
  appearance: none;
  flex: 0 0 auto;
  border: 1px solid var(--knit-control-border, rgba(0, 0, 0, 0.08));
  background: transparent;
  color: var(--knit-text-muted, #6b7280);
  font-family: inherit;
  font-size: 0.66rem;
  font-weight: 650;
  padding: 0.22rem 0.5rem;
  border-radius: 999px;
  cursor: pointer;
}

.knit-ndp-collapse:hover,
.knit-ndp-collapse:focus-visible {
  color: var(--knit-text-heading, #111);
  background: var(--knit-control-hover-bg, rgba(0, 0, 0, 0.04));
}

.knit-ndp-stage {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 0;
  min-height: 0;
  flex: 1 1 auto;
  overflow: hidden;
  padding: 0.35rem 0.15rem 0.25rem;
}

.knit-note-device-previews[data-knit-ndp-collapsed="1"] .knit-ndp-shell {
  flex-direction: column;
  align-items: stretch;
  gap: 0.35rem;
  padding: 0.45rem 0.35rem;
  border-radius: 14px;
}

.knit-note-device-previews[data-knit-ndp-collapsed="1"] .knit-ndp-head {
  flex-direction: column;
  align-items: stretch;
}

.knit-note-device-previews[data-knit-ndp-collapsed="1"] .knit-ndp-head-title {
  writing-mode: vertical-rl;
  text-orientation: mixed;
  letter-spacing: 0.12em;
  align-self: center;
  margin: 0.15rem 0;
}

.knit-note-device-previews[data-knit-ndp-collapsed="1"] .knit-ndp-stage,
.knit-note-device-previews[data-knit-ndp-collapsed="1"] .knit-ndp-switch {
  display: none;
}

.knit-note-device-previews[data-knit-ndp-collapsed="1"] .knit-ndp-collapse {
  width: 100%;
  padding-left: 0.2rem;
  padding-right: 0.2rem;
}

.knit-note-device {
  position: relative;
  top: auto;
  bottom: auto;
  left: auto;
  right: auto;
  display: none;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 0.35rem;
  min-height: 0;
  width: 100%;
  height: 100%;
  flex: 1 1 auto;
  pointer-events: none;
}

.knit-note-device-previews[data-knit-ndp-mode="phone"] .knit-note-device--phone,
.knit-note-device-previews[data-knit-ndp-mode="tablet"] .knit-note-device--tablet,
.knit-note-device-previews[data-knit-ndp-mode="desktop"] .knit-note-device--desktop {
  display: flex;
}

.knit-note-device--phone,
.knit-note-device--tablet,
.knit-note-device--desktop {
  max-width: none;
}

.knit-note-device[hidden] {
  display: none !important;
}

.knit-note-device__ratio {
  margin: 0;
  flex-shrink: 0;
  font-size: 0.58rem;
  font-weight: 700;
  letter-spacing: 0.04em;
  color: var(--knit-text-muted, #6b7280);
}

.knit-note-device__bezel {
  flex: 0 1 auto;
  min-height: 0;
  width: auto;
  height: auto;
  max-width: 100%;
  max-height: calc(100% - 1.2rem);
  margin: 0 auto;
  padding: 0.3rem;
  border-radius: 1rem;
  background: linear-gradient(160deg, #2a2f3a 0%, #11151c 55%, #0b0d12 100%);
  box-shadow:
    0 0 0 1px rgba(255, 255, 255, 0.06),
    0 8px 18px rgba(15, 23, 42, 0.2),
    inset 0 1px 0 rgba(255, 255, 255, 0.08);
  display: flex;
  flex-direction: column;
  pointer-events: none;
  position: relative;
}

/* 常规显示器比例：手机竖屏约 9:19.5，平板竖屏 3:4，电脑 16:10 */
.knit-note-device--phone .knit-note-device__bezel {
  aspect-ratio: 9 / 19.5;
  width: min(100%, 9.6rem);
  border-radius: 1.05rem;
  padding: 0.34rem 0.28rem 0.38rem;
}

.knit-note-device--tablet .knit-note-device__bezel {
  aspect-ratio: 3 / 4;
  width: min(100%, 11.2rem);
  border-radius: 0.72rem;
  padding: 0.28rem;
}

.knit-note-device--desktop .knit-note-device__bezel {
  aspect-ratio: 16 / 10;
  width: min(100%, 14.6rem);
  border-radius: 0.55rem 0.55rem 0.4rem 0.4rem;
  padding: 0.22rem;
  background: linear-gradient(180deg, #3a3f4b 0%, #1a1e27 100%);
}

.knit-note-device--desktop .knit-note-device__bezel::after {
  content: "";
  display: block;
  height: 0.28rem;
  margin: 0.28rem auto 0.05rem;
  width: 42%;
  border-radius: 999px;
  background: #0f1218;
  box-shadow: 0 0 0 1px rgba(255, 255, 255, 0.04);
}

.knit-note-device__chrome {
  flex-shrink: 0;
  display: flex;
  align-items: center;
  gap: 0.22rem;
  margin: 0 0 0.18rem;
  padding: 0.1rem 0.28rem;
  border-radius: 0.28rem;
  background: rgba(0, 0, 0, 0.28);
  color: #a8b0bf;
  font-size: 0.48rem;
  font-weight: 650;
}

.knit-note-device__chrome i {
  width: 0.34rem;
  height: 0.34rem;
  border-radius: 50%;
  background: #4b5563;
}

.knit-note-device__chrome i:nth-child(1) {
  background: #f87171;
}

.knit-note-device__chrome i:nth-child(2) {
  background: #fbbf24;
}

.knit-note-device__chrome i:nth-child(3) {
  background: #34d399;
}

.knit-note-device__chrome span {
  margin-left: 0.15rem;
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.knit-note-device__notch {
  display: none;
}

.knit-note-device--phone .knit-note-device__notch {
  display: block;
  width: 28%;
  height: 0.22rem;
  margin: 0.05rem auto 0.22rem;
  border-radius: 999px;
  background: #05070b;
  box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.04);
}

.knit-note-device__screen {
  flex: 1 1 auto;
  min-height: 0;
  width: 100%;
  overflow-x: hidden;
  overflow-y: auto;
  border-radius: 0.72rem;
  background: var(--knit-view-bg, #fafafa);
  color: var(--knit-view-text, #111);
  display: flex;
  flex-direction: column;
  position: relative;
  pointer-events: auto;
  overscroll-behavior: contain;
  box-shadow: inset 0 0 0 1px rgba(0, 0, 0, 0.06);
}

.knit-note-device--tablet .knit-note-device__screen {
  border-radius: 0.42rem;
}

.knit-note-device--desktop .knit-note-device__screen {
  border-radius: 0.22rem;
}

.knit-ndp-news {
  flex: 1 1 auto;
  min-height: 0;
  padding: 0.35rem 0.4rem 0.5rem;
  overflow: auto;
}

.knit-note-device--desktop .knit-ndp-news {
  padding: 0.55rem 0.7rem 0.65rem;
}

.knit-ndp-news-head {
  display: flex;
  align-items: center;
  gap: 0.35rem;
  margin-bottom: 0.35rem;
}

.knit-ndp-news-head-text {
  display: flex;
  flex-direction: column;
  min-width: 0;
  gap: 0.05rem;
}

.knit-ndp-news-head-text strong {
  font-size: 0.58rem;
  font-weight: 750;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.knit-ndp-news-head-text em {
  font-style: normal;
  font-size: 0.46rem;
  color: var(--knit-text-muted, #6b7280);
}

.knit-ndp-news-cover {
  margin: 0 0 0.4rem;
  border-radius: 0.4rem;
  overflow: hidden;
  background: #111;
  aspect-ratio: 16 / 9;
}

.knit-ndp-news-cover img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}

.knit-ndp-news-title {
  margin: 0 0 0.35rem;
  font-size: 0.72rem;
  line-height: 1.3;
  font-weight: 800;
  color: var(--knit-text-heading, #111);
}

.knit-note-device--desktop .knit-ndp-news-title {
  font-size: 0.92rem;
}

.knit-ndp-signup {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0.28rem;
  margin: 0 0 0.45rem;
  padding: 0.28rem 0.35rem;
  border-radius: 0.4rem;
  background: color-mix(in srgb, var(--knit-red, #dc2626) 8%, var(--knit-panel-bg, #fff));
  border: 1px solid color-mix(in srgb, var(--knit-red, #dc2626) 22%, transparent);
}

.knit-ndp-signup__badge {
  font-size: 0.46rem;
  font-weight: 800;
  color: var(--knit-red, #dc2626);
}

.knit-ndp-signup__meta {
  flex: 1 1 auto;
  min-width: 0;
  font-size: 0.44rem;
  color: var(--knit-text-muted, #6b7280);
}

.knit-ndp-signup__btn {
  font-size: 0.46rem;
  font-weight: 750;
  padding: 0.12rem 0.35rem;
  border-radius: 999px;
  background: var(--knit-red, #dc2626);
  color: #fff;
}

.knit-ndp-news-article {
  font-size: 0.52rem;
  line-height: 1.55;
}

.knit-note-device--desktop .knit-ndp-news-article {
  font-size: 0.68rem;
}

.knit-ndp-news-article img {
  max-width: 100%;
  height: auto;
  border-radius: 0.35rem;
  margin: 0.35rem 0;
}

.knit-ndp-tabs {
  flex-shrink: 0;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 0.12rem;
  padding: 0.28rem 0.28rem 0.18rem;
  font-size: 0.52rem;
  font-weight: 650;
  color: var(--knit-text-muted, #6b7280);
  background: var(--knit-view-bg, #fafafa);
}

.knit-note-device--tablet .knit-ndp-tabs {
  padding: 0.36rem 0.45rem 0.22rem;
  font-size: 0.58rem;
}

.knit-ndp-tabs span {
  flex: 1 1 0;
  min-width: 0;
  text-align: center;
  white-space: nowrap;
}

.knit-ndp-tabs span.is-on {
  color: var(--knit-view-text, #111);
  font-weight: 800;
}

.knit-ndp-detail {
  flex: 1 1 auto;
  min-height: 0;
  overflow: hidden;
  display: flex;
  flex-direction: column;
}

.knit-ndp-fp {
  flex: 1 1 auto;
  min-height: 0;
  height: 100%;
  display: flex;
  flex-direction: column;
  overflow: hidden;
  background: var(--knit-view-bg, #fafafa);
}

.knit-ndp-fp--no-cover .knit-ndp-side {
  flex: 1 1 auto;
  min-height: 0;
  overflow: visible;
}

.knit-ndp-fp .knit-ndp-media {
  flex: 0 0 42%;
}

.knit-ndp-fp .knit-ndp-side {
  flex: 1 1 auto;
  min-height: 0;
  overflow: auto;
  padding: 0.4rem 0.45rem 0.55rem;
  display: flex;
  flex-direction: column;
  gap: 0.35rem;
}

.knit-ndp-fp-dock {
  display: flex;
  gap: 0.25rem;
  flex-wrap: wrap;
}

.knit-ndp-fp-dock span {
  font-size: 0.48rem;
  font-weight: 700;
  padding: 0.18rem 0.35rem;
  border-radius: 999px;
  border: 1px solid var(--knit-control-border, rgba(0, 0, 0, 0.08));
  color: var(--knit-text-muted, #6b7280);
}

.knit-ndp-fp-block {
  margin: 0;
  padding: 0;
}

.knit-ndp-fp-block-title {
  margin: 0 0 0.2rem;
  font-size: 0.58rem;
  font-weight: 800;
  color: var(--knit-text-heading, #111);
}

.knit-ndp-fp-kind {
  margin: 0 0 0.25rem;
  font-size: 0.48rem;
  color: var(--knit-text-muted, #6b7280);
}

.knit-ndp-fp .knit-ndp-body {
  margin: 0;
  font-size: 0.56rem;
  line-height: 1.45;
  white-space: pre-wrap;
  word-break: break-word;
}

.knit-ndp-fp .knit-ndp-body.is-empty {
  color: var(--knit-text-muted, #6b7280);
}

.knit-ndp-fp .knit-ndp-news-article {
  font-size: 0.54rem;
  line-height: 1.45;
}

.knit-ndp-fp .knit-ndp-news-article img {
  max-width: 100%;
  height: auto;
  border-radius: 0.3rem;
}

.knit-ndp-detail--only,
.knit-ndp-news--detail-only {
  height: 100%;
}

.knit-ndp-media {
  position: relative;
  flex: 0 0 46%;
  min-height: 4.2rem;
  background: #111;
  overflow: hidden;
}

.knit-note-device--tablet .knit-ndp-media {
  flex-basis: 52%;
}

.knit-ndp-media img,
.knit-ndp-media video {
  width: 100%;
  height: 100%;
  object-fit: contain;
  background: #111;
}

.knit-ndp-media-empty {
  width: 100%;
  height: 100%;
  display: flex;
  align-items: center;
  justify-content: center;
  color: #9ca3af;
  font-size: 0.58rem;
  background:
    linear-gradient(180deg, #1f2937 0%, #111 100%);
}

.knit-ndp-play {
  position: absolute;
  left: 50%;
  top: 50%;
  width: 1.15rem;
  height: 1.15rem;
  margin: -0.58rem 0 0 -0.58rem;
  border-radius: 50%;
  background: rgba(255, 255, 255, 0.88);
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.25);
}

.knit-ndp-play::after {
  content: "";
  position: absolute;
  left: 0.42rem;
  top: 0.32rem;
  border-style: solid;
  border-width: 0.26rem 0 0.26rem 0.4rem;
  border-color: transparent transparent transparent #111;
}

.knit-ndp-pager {
  position: absolute;
  right: 0.28rem;
  bottom: 0.28rem;
  padding: 0.04rem 0.28rem;
  border-radius: 999px;
  background: rgba(0, 0, 0, 0.55);
  color: #fff;
  font-size: 0.48rem;
  font-weight: 700;
}

.knit-ndp-side {
  flex: 1 1 auto;
  min-height: 0;
  padding: 0.28rem 0.32rem 0.2rem;
  display: flex;
  flex-direction: column;
  gap: 0.22rem;
  overflow: hidden;
}

.knit-note-device--tablet .knit-ndp-side {
  padding: 0.38rem 0.5rem 0.28rem;
}

.knit-ndp-author {
  display: flex;
  align-items: center;
  gap: 0.28rem;
  flex-shrink: 0;
}

.knit-ndp-avatar {
  width: 0.95rem;
  height: 0.95rem;
  border-radius: 50%;
  flex-shrink: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  overflow: hidden;
  font-size: 0.48rem;
  font-weight: 800;
  color: #fff;
  background: #5c7a9a;
}

.knit-note-device--tablet .knit-ndp-avatar {
  width: 1.15rem;
  height: 1.15rem;
  font-size: 0.56rem;
}

.knit-ndp-avatar img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.knit-ndp-name {
  flex: 1 1 auto;
  min-width: 0;
  font-size: 0.56rem;
  font-weight: 750;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.knit-note-device--tablet .knit-ndp-name {
  font-size: 0.62rem;
}

.knit-ndp-follow {
  flex-shrink: 0;
  padding: 0.08rem 0.28rem;
  border-radius: 999px;
  border: 1px solid var(--knit-surface-border, #e5e7eb);
  font-size: 0.46rem;
  font-weight: 700;
  color: var(--knit-view-text, #111);
}

.knit-ndp-body {
  margin: 0;
  font-size: 0.52rem;
  line-height: 1.45;
  color: var(--knit-view-text, #111);
  display: -webkit-box;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 4;
  overflow: hidden;
  white-space: pre-wrap;
  word-break: break-word;
}

.knit-note-device--tablet .knit-ndp-body {
  font-size: 0.58rem;
  -webkit-line-clamp: 6;
}

.knit-ndp-body.is-empty {
  color: var(--knit-text-muted, #9ca3af);
}

.knit-ndp-tags {
  margin: 0;
  font-size: 0.48rem;
  line-height: 1.35;
  color: #2563eb;
  display: -webkit-box;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 2;
  overflow: hidden;
}

.knit-ndp-dock {
  flex-shrink: 0;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 0.18rem;
  padding: 0.18rem 0.28rem;
  border-top: 1px solid var(--knit-divider, #eee);
  font-size: 0.46rem;
  font-weight: 650;
  color: var(--knit-text-muted, #6b7280);
  background: var(--knit-view-bg, #fafafa);
}

.knit-note-device--tablet .knit-ndp-dock {
  padding: 0.24rem 0.45rem;
  font-size: 0.52rem;
}

.knit-ndp-nav {
  flex-shrink: 0;
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 0.16rem 0.2rem 0.2rem;
  border-top: 1px solid var(--knit-divider, #eee);
  font-size: 0.42rem;
  font-weight: 700;
  color: var(--knit-text-muted, #6b7280);
  background: var(--knit-view-bg, #fafafa);
}

.knit-note-device--tablet .knit-ndp-nav {
  padding: 0.22rem 0.4rem 0.28rem;
  font-size: 0.48rem;
}

.knit-ndp-nav span {
  flex: 1 1 0;
  text-align: center;
}

.knit-ndp-nav span.is-on {
  color: var(--knit-red, #dc2626);
}

html[data-knit-theme="dark"] .knit-ndp-shell {
  background: color-mix(in srgb, var(--knit-panel-bg, #171a21) 90%, transparent);
  border-color: rgba(255, 255, 255, 0.08);
  box-shadow:
    0 1px 0 rgba(255, 255, 255, 0.06) inset,
    0 14px 36px rgba(0, 0, 0, 0.35);
}

html[data-knit-theme="dark"] .knit-ndp-modebar button.is-on {
  background: #2a303b;
  color: #f3f4f6;
}

html[data-knit-theme="dark"] .knit-note-device__bezel {
  background: linear-gradient(160deg, #1c212b 0%, #0a0c10 100%);
  box-shadow:
    0 0 0 1px rgba(255, 255, 255, 0.08),
    0 10px 22px rgba(0, 0, 0, 0.4),
    inset 0 1px 0 rgba(255, 255, 255, 0.05);
}

html[data-knit-theme="dark"] .knit-ndp-tabs span.is-on,
html[data-knit-theme="dark"] .knit-ndp-name,
html[data-knit-theme="dark"] .knit-ndp-follow {
  color: #f3f4f6;
}

html[data-knit-theme="dark"] .knit-ndp-follow {
  border-color: #374151;
}

.knit-dev-block {
  display: flex;
  flex-direction: column;
  gap: 0.4rem;
}

.knit-dev-block-add-zone {
  display: flex;
  justify-content: center;
  padding: 1.1rem 0 0.35rem;
}

.knit-dev-block-add-zone[hidden] {
  display: none !important;
}

.knit-dev-block-add-fab {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 3.35rem;
  height: 3.35rem;
  border: 2px dashed var(--knit-surface-border);
  border-radius: 999px;
  background: var(--knit-surface-bg);
  color: var(--knit-surface-text);
  cursor: pointer;
  font-family: inherit;
  transition: border-color 0.15s ease, color 0.15s ease, background 0.15s ease, transform 0.15s ease;
}

.knit-dev-block-add-fab:hover {
  border-color: var(--knit-red);
  color: var(--knit-red);
  background: var(--knit-surface-hover-bg);
}

.knit-dev-block-add-fab:active {
  transform: scale(0.96);
}

.knit-dev-block-add-fab-icon {
  font-size: 2rem;
  font-weight: 300;
  line-height: 1;
}

.knit-dev-block-add-backdrop {
  position: fixed;
  inset: 0;
  z-index: 560;
  background: rgba(17, 17, 17, 0.35);
}

.knit-dev-block-add-backdrop[hidden] {
  display: none !important;
}

.knit-dev-block-add-picker {
  position: fixed;
  left: 50%;
  bottom: max(5.5rem, calc(env(safe-area-inset-bottom, 0px) + 4.5rem));
  transform: translateX(-50%);
  z-index: 570;
  width: min(680px, calc(100vw - 1.2rem));
  max-height: min(70vh, 520px);
  overflow: auto;
}

.knit-dev-block-add-picker[hidden] {
  display: none !important;
}

.knit-dev-block-add-picker-panel {
  border: 1px solid var(--knit-surface-border);
  border-radius: 14px;
  background: var(--knit-surface-panel-bg);
  box-shadow: 0 12px 36px rgba(0, 0, 0, 0.14);
  padding: 0.85rem 0.85rem 1rem;
}

.knit-dev-block-add-picker-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 0.5rem;
  margin-bottom: 0.75rem;
}

.knit-dev-block-add-picker-title {
  margin: 0;
  font-size: 0.95rem;
  font-weight: 700;
  color: var(--knit-surface-text);
}

.knit-dev-block-add-picker-close {
  flex-shrink: 0;
  width: 2rem;
  height: 2rem;
  border: none;
  border-radius: 8px;
  background: var(--knit-chrome-hover);
  color: var(--knit-surface-text);
  font-size: 1.25rem;
  line-height: 1;
  cursor: pointer;
  font-family: inherit;
}

.knit-dev-block-add-picker-close:hover {
  background: var(--knit-chrome-active);
}

.knit-dev-block-add-picker-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 0.65rem;
}

@media (max-width: 560px) {
  .knit-dev-block-add-picker-grid {
    grid-template-columns: 1fr;
  }
}

.knit-dev-block-add-option {
  display: flex;
  flex-direction: column;
  align-items: stretch;
  gap: 0.45rem;
  padding: 0.55rem;
  border: 1px solid var(--knit-surface-border);
  border-radius: 12px;
  background: var(--knit-chrome-hover);
  cursor: pointer;
  text-align: left;
  font-family: inherit;
  transition: border-color 0.15s ease, box-shadow 0.15s ease, background 0.15s ease;
}

.knit-dev-block-add-option:hover {
  border-color: var(--knit-red);
  background: var(--knit-control-hover-bg);
  box-shadow: var(--knit-panel-shadow);
}

.knit-dev-block-add-option[hidden] {
  display: none !important;
}

.knit-dev-block-add-option-label {
  font-size: 0.82rem;
  font-weight: 700;
  color: var(--knit-text-heading);
}

.knit-dev-block-add-preview {
  display: block;
  border: 1px solid var(--knit-panel-border);
  border-radius: 8px;
  background: var(--knit-panel-bg);
  padding: 0.45rem 0.5rem;
  min-height: 3.4rem;
}

.knit-dev-block-add-preview--text {
  position: relative;
  display: flex;
  flex-direction: column;
  gap: 0.35rem;
}

.knit-dev-block-add-preview-line {
  display: block;
  height: 0.42rem;
  border-radius: 999px;
  background: #d8dce2;
}

.knit-dev-block-add-preview-line--short {
  width: 72%;
}

.knit-dev-block-add-preview-line--muted {
  width: 48%;
  background: #e8ebef;
}

.knit-dev-block-add-preview--feature {
  display: flex;
  flex-wrap: wrap;
  gap: 0.35rem;
  align-content: flex-start;
}

.knit-dev-block-add-chip {
  display: inline-flex;
  align-items: center;
  padding: 0.12rem 0.45rem;
  border-radius: 999px;
  background: var(--knit-control-bg);
  color: var(--knit-text-muted);
  font-size: 0.68rem;
  font-weight: 600;
}

.knit-dev-block-add-chip--muted {
  color: var(--knit-text-subtle);
}

.knit-dev-block-add-preview--pattern {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 0.35rem;
}

.knit-dev-block-add-preview-field {
  display: flex;
  align-items: center;
  justify-content: center;
  min-height: 1.35rem;
  border: 1px solid var(--knit-panel-border);
  border-radius: 6px;
  background: var(--knit-panel-bg-alt);
  color: var(--knit-text-subtle);
  font-size: 0.62rem;
}

.knit-dev-block-add-preview--yarn-table {
  display: flex;
  flex-direction: column;
  gap: 0.28rem;
  padding: 0.35rem;
}

.knit-dev-block-add-preview-table-head,
.knit-dev-block-add-preview-table-row {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 0.25rem;
}

.knit-dev-block-add-preview-table-head span {
  font-size: 0.58rem;
  font-weight: 700;
  color: var(--knit-text-subtle);
  text-align: center;
}

.knit-dev-block-add-preview-table-row span {
  display: block;
  height: 0.55rem;
  border-radius: 4px;
  background: #e3e7ec;
}

.knit-dev-block-add-preview-table-row--muted span {
  background: #eef1f5;
}

.knit-dev-block-add-picker-empty {
  margin: 0.35rem 0 0;
  text-align: center;
  font-size: var(--knit-empty-size);
  font-weight: var(--knit-empty-weight);
  letter-spacing: var(--knit-empty-ls);
  line-height: var(--knit-empty-lh);
  color: var(--knit-text-muted);
}

.knit-dev-block-add-picker-empty[hidden] {
  display: none !important;
}

/* 作者样式 .knit-dev-block{display:flex} 会压过浏览器对 [hidden] 的 display:none，导致切换频道时区块仍显示 */
#knitDeveloperView .knit-dev-block[hidden] {
  display: none !important;
}

#knitDevYarnBlock[hidden] {
  display: none !important;
}

/* 作者样式 .knit-dev-block{display:flex} 会压过仅靠 [hidden] 的隐藏，二次 OCR 后色卡栏在花型下仍可见；与 data-knit-channel 双保险 */
#knitDevColorCardBlock[hidden] {
  display: none !important;
}

#knitDevColorCardBlock {
  width: 100%;
  max-width: none;
  box-sizing: border-box;
}

#knitDevTextBlock[hidden],
#knitDevFeatureBlock[hidden],
#knitDevPatternMetaBlock[hidden] {
  display: none !important;
}

#knitDevYarnMetaBlock[hidden],
#knitDevYarnQualBlock[hidden] {
  display: none !important;
}

.knit-yarn-qual-editor {
  display: flex;
  flex-direction: column;
  gap: 0.85rem;
}

.knit-yarn-qual-group-title {
  margin: 0 0 0.2rem;
  font-size: 0.82rem;
  font-weight: 700;
  color: var(--knit-text-heading);
}

.knit-yarn-qual-group-hint {
  margin: 0 0 0.45rem;
  font-size: 0.74rem;
  color: var(--knit-text-muted);
}

.knit-yarn-qual-chips,
.knit-fp-yarn-qual-chips {
  display: flex;
  flex-wrap: wrap;
  gap: 0.38rem;
}

.knit-yarn-qual-chip,
.knit-fp-yarn-qual-chip {
  border: 1px solid var(--knit-control-border, #d1d5db);
  background: var(--knit-control-bg, #fff);
  color: var(--knit-text-body, #374151);
  border-radius: 999px;
  padding: 0.22rem 0.62rem;
  font: inherit;
  font-size: 0.74rem;
  line-height: 1.3;
  cursor: pointer;
}

.knit-yarn-qual-chip.is-on,
.knit-fp-yarn-qual-chip.is-on {
  background: color-mix(in srgb, var(--knit-red) 12%, var(--knit-panel-bg));
  border-color: color-mix(in srgb, var(--knit-red) 45%, var(--knit-panel-border));
  color: var(--knit-red);
}

.knit-yarn-qual-add {
  display: flex;
  align-items: center;
  gap: 0.4rem;
  margin-top: 0.45rem;
}

.knit-yarn-qual-add .knit-dev-pattern-input {
  flex: 1;
  min-width: 0;
}

.knit-yarn-qual-add-btn {
  flex: 0 0 auto;
  border: 1px solid var(--knit-control-border, #d1d5db);
  background: var(--knit-control-bg, #fff);
  color: var(--knit-text-heading);
  border-radius: 8px;
  padding: 0.28rem 0.65rem;
  font: inherit;
  font-size: 0.76rem;
  font-weight: 650;
  cursor: pointer;
}

.knit-fp-yarn-qual {
  display: flex;
  flex-direction: column;
  gap: 0.7rem;
}

.knit-fp-yarn-qual-label {
  margin: 0 0 0.32rem;
  font-size: 0.78rem;
  font-weight: 650;
  color: var(--knit-text-muted);
}

.knit-fp-yarn-qual-chip {
  cursor: default;
}

.knit-dev-yarn-note-extra {
  grid-template-columns: repeat(4, minmax(0, 1fr));
}

@media (max-width: 900px) {
  .knit-dev-yarn-note-extra {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}

@media (max-width: 640px) {
  .knit-dev-yarn-note-extra {
    grid-template-columns: 1fr;
  }
}

.knit-dev-title {
  margin: 0;
  font-size: 0.88rem;
  color: var(--knit-text-body);
}

.knit-dev-block-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 0.5rem;
}

#knitDevColorCardBlock .knit-dev-block-head {
  flex-wrap: wrap;
  margin-bottom: 0.45rem;
}

.knit-dev-ecc-yarn-kind {
  display: inline-flex;
  flex-shrink: 0;
  border: 1px solid var(--knit-surface-border);
  border-radius: 999px;
  overflow: hidden;
  background: var(--knit-surface-bg);
}

.knit-dev-ecc-yarn-kind-btn {
  appearance: none;
  -webkit-appearance: none;
  margin: 0;
  border: none;
  background: transparent;
  color: var(--knit-surface-muted);
  font: inherit;
  font-size: 0.72rem;
  font-weight: 600;
  padding: 0.22rem 0.72rem;
  cursor: pointer;
  line-height: 1.25;
}

.knit-dev-ecc-yarn-kind-btn + .knit-dev-ecc-yarn-kind-btn {
  border-left: 1px solid var(--knit-surface-border);
}

.knit-dev-ecc-yarn-kind-btn:hover:not(.is-active) {
  background: var(--knit-surface-hover-bg);
  color: var(--knit-surface-text);
}

.knit-dev-ecc-yarn-kind-btn.is-active {
  background: #0f766e;
  color: #fff;
}

.knit-dev-ecc-yarn-kind-btn:focus-visible {
  outline: 2px solid #0f766e;
  outline-offset: 2px;
  z-index: 1;
}

.knit-dev-block-remove-btn {
  flex-shrink: 0;
  padding: 0.22rem 0.55rem;
  font-size: 0.72rem;
  font-weight: 600;
  color: var(--knit-surface-muted);
  background: var(--knit-surface-bg);
  border: 1px solid var(--knit-surface-border);
  border-radius: 999px;
  cursor: pointer;
  font-family: inherit;
  transition: background 0.15s, color 0.15s, border-color 0.15s;
}

.knit-dev-block-remove-btn:hover {
  color: var(--knit-red);
  border-color: var(--knit-red);
  background: var(--knit-surface-hover-bg);
}

.knit-dev-block-remove-btn[hidden] {
  display: none !important;
}

.knit-dev-block-add-preview-tag {
  position: absolute;
  top: 0.35rem;
  left: 0.45rem;
  padding: 0.05rem 0.35rem;
  border-radius: 4px;
  background: color-mix(in srgb, var(--knit-red) 12%, var(--knit-panel-bg));
  color: var(--knit-red);
  font-size: 0.58rem;
  font-weight: 700;
  line-height: 1.2;
}

.knit-dev-block-add-preview-tag--lower {
  top: auto;
  bottom: 0.35rem;
  background: var(--knit-tag-bg);
  color: var(--knit-tag-text);
}

.knit-dev-block-add-preview--text-lower {
  display: flex;
  flex-direction: column;
  justify-content: flex-end;
  gap: 0.35rem;
  padding-top: 0.65rem;
}

.knit-dev-block-add-preview--text-lower .knit-dev-block-add-preview-line:last-child {
  width: 72%;
}

.knit-dev-pattern-extra {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 0.45rem;
}

.knit-dev-pattern-input {
  width: 100%;
  box-sizing: border-box;
  border: 1px solid var(--knit-surface-border);
  border-radius: 8px;
  padding: 0.42rem 0.55rem;
  font-size: 0.82rem;
  color: var(--knit-surface-text);
  background: var(--knit-surface-input-bg);
}

.knit-dev-size-chart-hint {
  margin: 0 0 0.5rem;
  max-width: 42rem;
  font-size: var(--knit-hint-size);
  font-weight: var(--knit-hint-weight);
  letter-spacing: var(--knit-hint-ls);
  line-height: var(--knit-hint-lh);
  color: var(--knit-text-muted);
}

.knit-dev-size-chart-image-slot {
  display: flex;
  flex-direction: column;
  gap: 0.4rem;
  margin: 0 0 0.55rem;
}

.knit-dev-size-chart-preview {
  width: 100%;
  max-height: 9.5rem;
  border: 1px solid var(--knit-surface-border);
  border-radius: 10px;
  background: var(--knit-panel-bg-alt);
  overflow: hidden;
  display: flex;
  align-items: center;
  justify-content: center;
}

.knit-dev-size-chart-preview[hidden] {
  display: none !important;
}

.knit-dev-size-chart-preview-img {
  display: block;
  max-width: 100%;
  max-height: 9.5rem;
  width: auto;
  height: auto;
  object-fit: contain;
  user-select: none;
  -webkit-user-drag: none;
}

.knit-dev-size-chart-upload {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 100%;
  padding: 0.45rem 0.55rem;
  border: 1px dashed var(--knit-control-border);
  border-radius: 8px;
  background: var(--knit-panel-bg-alt);
  color: var(--knit-text-body);
  cursor: pointer;
  font-size: 0.82rem;
  font-weight: 600;
  font-family: inherit;
}

.knit-dev-size-chart-upload:hover {
  background: var(--knit-control-hover-bg);
  border-color: var(--knit-control-border);
}

.knit-dev-size-chart-clear {
  align-self: flex-start;
  border: 1px solid var(--knit-control-border);
  background: transparent;
  color: var(--knit-text-muted);
  border-radius: 6px;
  padding: 0.2rem 0.55rem;
  font-size: 0.75rem;
  cursor: pointer;
  font-family: inherit;
}

.knit-dev-size-chart-clear:hover {
  color: #b91c1c;
  border-color: #fecaca;
  background: #fef2f2;
}

.knit-dev-size-chart-clear[hidden] {
  display: none !important;
}

.knit-dev-size-chart-field {
  display: flex;
  flex-direction: column;
  gap: 0.28rem;
  min-width: 0;
}

.knit-dev-size-chart-label {
  font-size: 0.76rem;
  font-weight: 600;
  color: var(--knit-surface-text);
}

.knit-size-proportion {
  margin-top: 0.7rem;
  border: 1px solid var(--knit-surface-border, #e5e7eb);
  border-radius: 12px;
  background:
    linear-gradient(180deg, #fafafa 0%, #f3f4f6 100%);
  padding: 0.55rem 0.45rem 0.55rem;
}

.knit-size-proportion[hidden] {
  display: none !important;
}

.knit-size-proportion__label {
  margin: 0 0.35rem 0.35rem;
  font-size: 0.74rem;
  font-weight: 700;
  color: var(--knit-text-muted);
  letter-spacing: 0.02em;
}

.knit-size-proportion__stage {
  width: 100%;
  min-height: 12rem;
  display: flex;
  align-items: stretch;
  justify-content: center;
  overflow: hidden;
}

.knit-size-proportion--modal {
  margin: 0 0 0.75rem;
}

.knit-size-proportion--modal .knit-size-proportion__stage {
  min-height: 16rem;
}

.knit-fp-size-chart-zoom-viewport .knit-size-proportion__stage {
  min-height: 16rem;
}

.knit-garment-flat {
  display: grid;
  grid-template-columns: minmax(0, 1.55fr) minmax(6.2rem, 0.5fr);
  grid-template-rows: auto auto;
  gap: 0.55rem 0.75rem;
  width: 100%;
  max-width: 36rem;
  padding: 0.35rem 0.4rem;
  box-sizing: border-box;
}

.knit-garment-flat__stage {
  position: relative;
  grid-column: 1;
  grid-row: 1;
  width: 100%;
  background: var(--knit-panel-bg-alt);
  border: 1px solid #d7dee8;
  border-radius: 14px;
  overflow: hidden;
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.85);
}

.knit-garment-flat__svg {
  display: block;
  width: 100%;
  height: 100%;
  user-select: none;
}

.knit-garment-flat__stroke {
  stroke: #1e293b;
  stroke-width: 1.15;
  stroke-linejoin: round;
  stroke-linecap: round;
}

.knit-garment-flat__neck {
  stroke: #1e293b;
  stroke-width: 0.95;
  stroke-linecap: round;
  stroke-linejoin: round;
}

.knit-garment-flat__neck-hole {
  fill: #f8fafc;
}

.knit-garment-flat__neck-back {
  stroke: #475569;
  stroke-width: 0.8;
  stroke-linecap: round;
  fill: none;
}

.knit-garment-flat__guide {
  stroke: #334155;
  stroke-width: 0.7;
  stroke-linecap: round;
  opacity: 0.95;
}

.knit-garment-flat__fold {
  stroke: #94a3b8;
  stroke-width: 0.45;
  opacity: 0.55;
}

.knit-garment-flat__stitch {
  stroke: #475569;
  stroke-width: 0.55;
  stroke-linecap: round;
  opacity: 0.95;
}

.knit-garment-flat__rib {
  stroke: #64748b;
  stroke-width: 0.28;
  stroke-linecap: butt;
  opacity: 0.78;
}

.knit-garment-flat__seam {
  stroke: #334155;
  stroke-width: 0.7;
  stroke-linecap: round;
  stroke-linejoin: round;
}

.knit-garment-flat__dim line {
  stroke: #64748b;
  stroke-width: 0.45;
  stroke-linecap: round;
}

.knit-garment-flat__dim-chip {
  fill: rgba(255, 255, 255, 0.92);
  stroke: #cbd5e1;
  stroke-width: 0.35;
}

.knit-garment-flat__dim text {
  fill: #475569;
  font-size: 2.55px;
  font-family: "Segoe UI", "PingFang SC", "Microsoft YaHei", sans-serif;
  font-weight: 700;
}

.knit-garment-flat__pattern {
  position: absolute;
  box-sizing: border-box;
  border: 1.5px dashed rgba(51, 65, 85, 0.75);
  border-radius: 4px;
  overflow: hidden;
  background: rgba(248, 250, 252, 0.92);
  box-shadow: 0 2px 8px rgba(15, 23, 42, 0.12);
  display: flex;
  align-items: center;
  justify-content: center;
  pointer-events: none;
}

.knit-garment-flat__pattern-img,
.knit-garment-flat__zoom-img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}

.knit-garment-flat__pattern-img[hidden],
.knit-garment-flat__zoom-img[hidden],
.knit-garment-flat__pattern-fallback[hidden],
.knit-garment-flat__zoom-fallback[hidden] {
  display: none !important;
}

.knit-garment-flat__pattern-fallback,
.knit-garment-flat__zoom-fallback {
  color: var(--knit-text-muted);
  font-size: 0.72rem;
  font-weight: 700;
  user-select: none;
}

.knit-garment-flat__side {
  grid-column: 2;
  grid-row: 1;
  display: flex;
  flex-direction: column;
  align-items: stretch;
  justify-content: center;
  gap: 0.45rem;
  min-width: 0;
}

.knit-garment-flat__zoom {
  width: 100%;
  max-width: 7.4rem;
  margin: 0 auto;
  aspect-ratio: 1;
  border: 1px solid var(--knit-panel-border);
  border-radius: 14px;
  overflow: hidden;
  background:
    linear-gradient(160deg, #f8fafc 0%, #e2e8f0 100%);
  box-shadow: 0 6px 14px rgba(100, 116, 139, 0.12);
  display: flex;
  align-items: center;
  justify-content: center;
}

.knit-garment-flat__zoom-meta {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 0.2rem;
  text-align: center;
}

.knit-garment-flat__zoom-tag {
  font-size: 0.66rem;
  font-weight: 700;
  letter-spacing: 0.04em;
  color: var(--knit-text-muted);
  text-transform: none;
}

.knit-garment-flat__zoom-dims {
  display: flex;
  gap: 0.22rem;
  align-items: center;
  font-size: 0.8rem;
  font-weight: 700;
  color: var(--knit-text-heading);
  font-variant-numeric: tabular-nums;
}

.knit-garment-flat__zoom-ratio {
  margin: 0;
  font-size: 0.66rem;
  line-height: 1.35;
  color: var(--knit-text-muted);
}

.knit-garment-flat__foot {
  grid-column: 1 / -1;
  grid-row: 2;
  margin: 0;
  text-align: center;
  font-size: 0.72rem;
  color: var(--knit-text-muted);
  line-height: 1.35;
}

.knit-garment-flat-controls {
  margin-top: 0.65rem;
  padding: 0.55rem 0.5rem 0.45rem;
  border-top: 1px dashed #d1d5db;
}

.knit-garment-flat-controls__head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 0.5rem;
  margin-bottom: 0.45rem;
  font-size: 0.76rem;
  font-weight: 700;
  color: var(--knit-text-body);
}

.knit-garment-flat-reset {
  border: 1px solid #d1d5db;
  background: var(--knit-panel-bg);
  color: var(--knit-text-muted);
  border-radius: 999px;
  padding: 0.18rem 0.65rem;
  font-size: 0.72rem;
  font-weight: 600;
  cursor: pointer;
  font-family: inherit;
}

.knit-garment-flat-reset:hover {
  background: var(--knit-control-bg);
  color: var(--knit-text-heading);
}

.knit-garment-flat-controls__grid {
  display: grid;
  grid-template-columns: repeat(5, minmax(0, 1fr));
  gap: 0.4rem 0.45rem;
}

.knit-garment-flat-field {
  display: flex;
  flex-direction: column;
  gap: 0.18rem;
  min-width: 0;
  font-size: 0.7rem;
  font-weight: 600;
  color: var(--knit-text-muted);
}

.knit-garment-flat-field input {
  width: 100%;
  box-sizing: border-box;
  border: 1px solid #d1d5db;
  border-radius: 7px;
  padding: 0.28rem 0.35rem;
  font-size: 0.78rem;
  font-family: inherit;
  color: var(--knit-text-heading);
  background: var(--knit-panel-bg);
}

.knit-garment-flat-field input:focus {
  outline: 2px solid #93c5fd;
  outline-offset: 1px;
  border-color: #60a5fa;
}

@media (max-width: 640px) {
  .knit-garment-flat {
    grid-template-columns: 1fr;
  }

  .knit-garment-flat__side {
    flex-direction: row;
    justify-content: flex-start;
  }

  .knit-garment-flat__zoom {
    max-width: 5.2rem;
  }

  .knit-garment-flat-controls__grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}

.knit-dev-block-add-preview--size-chart {
  display: grid;
  grid-template-columns: 1.2fr 1fr 1fr;
  gap: 0.28rem 0.35rem;
  align-content: start;
  align-items: stretch;
}

.knit-dev-block-add-preview-size-thumb {
  min-height: 1.9rem;
  border-radius: 4px;
  border: 1px dashed var(--knit-control-border);
  background:
    linear-gradient(135deg, #e2e8f0 0 45%, transparent 45% 55%, #cbd5e1 55% 100%);
}

/* 电子色卡：手动格子占满笔记主栏宽度，不再与 textarea 左右分栏留白 */
.knit-dev-colorcard-wrap {
  position: relative;
  display: flex;
  flex-direction: column;
  gap: 0.75rem;
  width: 100%;
  max-width: none;
  align-items: stretch;
}

/* 数据仍写入 textarea，界面以格子为主，隐藏原始文本框避免占半屏空白 */
#knitDevColorCardBlock .knit-dev-colorcard-wrap > #knitDevColorCard,
#knitDevColorCardBlock .knit-dev-colorcard-wrap > #knitDevColorCardTextPreview {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
  border: 0;
  opacity: 0;
  pointer-events: none;
}

.knit-dev-colorcard-text-preview {
  margin-top: 0.45rem;
  max-height: 165px;
  overflow: auto;
  border: 1px dashed var(--knit-surface-border);
  border-radius: 8px;
  background: var(--knit-surface-input-bg);
  color: var(--knit-surface-text);
  padding: 0.38rem 0.45rem;
}

.knit-dev-colorcard-ocr {
  border: 1px solid var(--knit-surface-border);
  border-radius: 8px;
  background: var(--knit-surface-panel-bg);
  color: var(--knit-surface-text);
  padding: 0.55rem;
  display: flex;
  flex-direction: column;
  gap: 0.45rem;
  width: 100%;
  max-width: none;
  box-sizing: border-box;
  min-width: 0;
}

.knit-dev-colorcard-upload {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 100%;
  padding: 0.4rem 0.55rem;
  border: 1px solid var(--knit-surface-border);
  border-radius: 8px;
  background: var(--knit-surface-bg);
  color: var(--knit-surface-text);
  cursor: pointer;
  font-size: 0.8rem;
}

/* 灵感频道：上传图片下方的上机文件插件 */
.knit-dev-machine-file-wrap {
  display: flex;
  flex-direction: column;
  gap: 0.4rem;
  margin: 0.15rem 0 0.55rem;
  padding: 0.65rem 0.7rem;
  border: 1px solid var(--knit-surface-border);
  border-radius: 10px;
  background: var(--knit-surface-bg);
}

.knit-dev-machine-file-wrap[hidden] {
  display: none !important;
}

.knit-dev-list-cover-preview {
  display: block;
  width: 5.6rem;
  height: 7.2rem;
  object-fit: cover;
  border-radius: 8px;
  border: 1px solid var(--knit-surface-border, #e5e7eb);
  background: var(--knit-panel-bg-alt);
}

.knit-dev-list-cover-preview[hidden] {
  display: none !important;
}

.knit-dev-machine-file-head {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 0.35rem 0.55rem;
}

.knit-dev-machine-file-head-main {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  gap: 0.35rem 0.55rem;
  min-width: 0;
}

.knit-dev-machine-file-title {
  font-size: 0.86rem;
  font-weight: 700;
  color: var(--knit-surface-text);
}

.knit-dev-machine-file-sub {
  font-size: 0.72rem;
  color: var(--knit-surface-muted);
}

.knit-dev-block-add-preview--machine-file,
.knit-dev-block-add-preview--bmp-bridge {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  justify-content: center;
  gap: 0.28rem;
}

.knit-dev-block-add-preview-bmp-grid {
  display: grid;
  grid-template-columns: repeat(4, 0.42rem);
  gap: 0.12rem;
}

.knit-dev-block-add-preview-bmp-grid > span {
  width: 0.42rem;
  height: 0.42rem;
  border-radius: 1px;
}

.knit-dev-block-add-preview-bmp-grid > span:nth-child(1) { background: #dc2828; }
.knit-dev-block-add-preview-bmp-grid > span:nth-child(2) { background: #285ad2; }
.knit-dev-block-add-preview-bmp-grid > span:nth-child(3) { background: #28b446; }
.knit-dev-block-add-preview-bmp-grid > span:nth-child(4) { background: #f0a028; }

.knit-dev-block-add-preview--color-card {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  justify-content: center;
  gap: 0.28rem;
}

.knit-dev-block-add-preview-color-grid {
  display: grid;
  grid-template-columns: repeat(2, 0.7rem);
  gap: 0.14rem;
}

.knit-dev-block-add-preview-color-grid > span {
  width: 0.7rem;
  height: 0.7rem;
  border-radius: 2px;
}

.knit-dev-block-add-preview-color-grid > span:nth-child(1) { background: #7c3aed; }
.knit-dev-block-add-preview-color-grid > span:nth-child(2) { background: #0ea5e9; }
.knit-dev-block-add-preview-color-grid > span:nth-child(3) { background: #f59e0b; }
.knit-dev-block-add-preview-color-grid > span:nth-child(4) { background: #ef4444; }

.knit-dev-bmp-bridge__toolbar {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0.4rem 0.5rem;
}

.knit-dev-bmp-bridge__field {
  display: inline-flex;
  align-items: center;
  gap: 0.3rem;
  font-size: 0.75rem;
  color: var(--knit-surface-muted);
}

.knit-dev-bmp-bridge__field select {
  min-width: 7.2rem;
  height: 2rem;
  border: 1px solid var(--knit-surface-border);
  border-radius: 8px;
  background: var(--knit-surface-bg);
  color: var(--knit-surface-text);
  font: inherit;
  font-size: 0.78rem;
}

.knit-dev-bmp-bridge__btn {
  height: 2rem;
  padding: 0 0.7rem;
  border: 1px solid var(--knit-surface-border);
  border-radius: 8px;
  background: var(--knit-surface-bg);
  color: var(--knit-surface-text);
  font: inherit;
  font-size: 0.78rem;
  cursor: pointer;
}

.knit-dev-bmp-bridge__btn:hover:not(:disabled) {
  background: var(--knit-control-hover-bg, #f3f4f6);
}

.knit-dev-bmp-bridge__btn--primary {
  border-color: #0f766e;
  background: #0f766e;
  color: #fff;
}

.knit-dev-bmp-bridge__btn:disabled {
  opacity: 0.45;
  cursor: default;
}

.knit-dev-bmp-bridge__preview-row {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 0.55rem;
}

.knit-dev-bmp-bridge__pane-title,
.knit-dev-bmp-bridge__meta,
.knit-dev-bmp-bridge__hover {
  margin: 0;
  font-size: 0.72rem;
  color: var(--knit-surface-muted);
}

.knit-dev-bmp-bridge__pane-title {
  font-weight: 700;
  color: var(--knit-surface-text);
  margin-bottom: 0.25rem;
}

.knit-dev-bmp-bridge__canvas {
  display: block;
  width: 100%;
  max-height: 14rem;
  object-fit: contain;
  image-rendering: pixelated;
  background:
    linear-gradient(45deg, #e5e7eb 25%, transparent 25%) 0 0 / 12px 12px,
    linear-gradient(45deg, transparent 75%, #e5e7eb 75%) 0 0 / 12px 12px,
    #f8fafc;
  border: 1px solid var(--knit-surface-border);
  border-radius: 8px;
  cursor: crosshair;
}

.knit-dev-bmp-bridge__hover {
  min-height: 1.1rem;
  color: #0f766e;
  font-weight: 650;
}

.knit-dev-bmp-bridge__meaning {
  display: flex;
  flex-wrap: wrap;
  gap: 0.4rem;
}

.knit-dev-bmp-bridge__swatch {
  display: flex;
  align-items: flex-start;
  gap: 0.35rem;
  width: calc(50% - 0.2rem);
  min-width: 9.5rem;
  padding: 0.28rem 0.35rem;
  border: 1px solid var(--knit-surface-border);
  border-radius: 8px;
  background: var(--knit-panel-bg, #fff);
}

.knit-dev-bmp-bridge__chip {
  flex: 0 0 1.05rem;
  width: 1.05rem;
  height: 1.05rem;
  border-radius: 4px;
  border: 1px solid rgba(15, 23, 42, 0.12);
}

.knit-dev-bmp-bridge__swatch-text {
  min-width: 0;
  font-size: 0.72rem;
  line-height: 1.35;
  color: var(--knit-surface-text);
}

.knit-dev-bmp-bridge__swatch-text b {
  font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
}

.knit-dev-bmp-bridge__swatch-text i {
  display: block;
  font-style: normal;
  color: var(--knit-surface-muted);
}

.knit-creator-upload-hint.is-error {
  color: #b91c1c;
}

.knit-dev-block-add-preview-file-icon {
  width: 1.35rem;
  height: 1.55rem;
  border: 1.5px solid var(--knit-control-border);
  border-radius: 3px 6px 3px 3px;
  background:
    linear-gradient(135deg, #f8fafc 55%, transparent 55%),
    #e2e8f0;
  position: relative;
}

.knit-dev-block-add-preview-file-icon::after {
  content: "";
  position: absolute;
  right: -1px;
  top: -1px;
  width: 0.55rem;
  height: 0.55rem;
  background: var(--knit-panel-bg-alt);
  border-left: 1.5px solid #94a3b8;
  border-bottom: 1.5px solid #94a3b8;
}

.knit-dev-block-add-preview-file-name {
  font-size: 0.68rem;
  font-weight: 700;
  color: var(--knit-text-muted);
}

.knit-dev-block-add-preview-file-line {
  display: block;
  width: 72%;
  height: 0.35rem;
  border-radius: 999px;
  background: var(--knit-control-active-bg);
}

.knit-dev-block-add-preview--video {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  justify-content: center;
  gap: 0.28rem;
}

.knit-dev-block-add-preview-video-frame {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 2.45rem;
  height: 1.55rem;
  border-radius: 6px;
  background: linear-gradient(160deg, #cbd5e1 0%, #94a3b8 100%);
  box-shadow: inset 0 0 0 1.5px #64748b;
}

.knit-dev-block-add-preview-video-play {
  width: 0;
  height: 0;
  margin-left: 0.12rem;
  border-style: solid;
  border-width: 0.32rem 0 0.32rem 0.5rem;
  border-color: transparent transparent transparent #f8fafc;
}

.knit-dev-machine-file-upload {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 100%;
  padding: 0.45rem 0.55rem;
  border: 1px dashed #93c5fd;
  border-radius: 8px;
  background: #eff6ff;
  color: #1e40af;
  cursor: pointer;
  font-size: 0.82rem;
  font-weight: 600;
  font-family: inherit;
}

.knit-dev-machine-file-upload:hover {
  background: #dbeafe;
}

.knit-dev-machine-file-clear {
  align-self: flex-start;
  border: 1px solid var(--knit-control-border);
  background: transparent;
  color: var(--knit-text-muted);
  border-radius: 6px;
  padding: 0.2rem 0.55rem;
  font-size: 0.75rem;
  cursor: pointer;
  font-family: inherit;
}

.knit-dev-machine-file-clear:hover {
  color: #b91c1c;
  border-color: #fecaca;
  background: #fef2f2;
}

.knit-dev-machine-file-clear[hidden] {
  display: none !important;
}

.knit-dev-colorcard-ocr-inline-btn {
  width: 100%;
  padding: 0.38rem 0.55rem;
  border: 1px solid #2563eb;
  border-radius: 8px;
  background: #eff6ff;
  color: #1e40af;
  cursor: pointer;
  font-size: 0.78rem;
}

.knit-dev-colorcard-ocr-inline-btn:hover {
  background: #dbeafe;
}

.knit-dev-ecc-slot-setup {
  display: flex;
  flex-direction: column;
  gap: 0.55rem;
  width: 100%;
  max-width: none;
}

.knit-dev-ecc-slot-setup[hidden],
.knit-dev-ecc-slot-grid-wrap[hidden] {
  display: none !important;
}

.knit-dev-ecc-slot-grid-wrap {
  display: flex;
  flex-direction: column;
  gap: 0.45rem;
  width: 100%;
  min-width: 0;
}

.knit-dev-ecc-slot-setup .knit-dev-colorcard-grid-size {
  max-width: 16rem;
}

/* 手动格子模式下隐藏分页条，避免下方再占一块空白操作区 */
#knitDevColorCardBlock:has(#knitDevEccSlotGridWrap:not([hidden])) .knit-dev-ocr-pages {
  display: none !important;
}

#knitDevColorCardBlock:has(#knitDevEccSlotGridWrap:not([hidden])) #knitDevColorCardOcrPreview {
  display: none !important;
}

.knit-dev-ecc-slot-toolbar {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0.4rem;
}

.knit-dev-ecc-slot-title {
  font-size: 0.8rem;
  font-weight: 700;
  color: var(--knit-surface-text);
  margin-right: auto;
}

.knit-dev-ecc-slot-page-nav,
.knit-dev-ecc-slot-setup-page-nav {
  display: inline-flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0.35rem;
}

.knit-dev-ecc-slot-setup-page-nav {
  width: 100%;
  max-width: 28rem;
  margin: 0.15rem 0 0.35rem;
}

.knit-dev-ecc-slot-setup-page-nav[hidden] {
  display: none !important;
}

.knit-dev-ecc-slot-page-label {
  font-size: 0.75rem;
  color: var(--knit-surface-muted, #64748b);
  white-space: nowrap;
}

.knit-dev-ecc-slot-toolbar .knit-dev-colorcard-ocr-inline-btn,
.knit-dev-ecc-slot-setup-page-nav .knit-dev-colorcard-ocr-inline-btn {
  width: auto;
  min-width: 0;
  padding: 0.32rem 0.55rem;
}

/* 与材料作品详情页电子色卡格一致：A4（210×297）页框 + 同款页边距/格距 */
.knit-dev-ecc-slot-page-frame {
  --yarn-ecc-frame: clamp(0.75rem, 2.2dvh, 1.2rem);
  --yarn-ecc-gap: clamp(0.4rem, 1.5dvh, 0.85rem);
  width: min(100%, 22rem);
  max-width: 100%;
  aspect-ratio: 210 / 297;
  margin: 0 auto;
  box-sizing: border-box;
  padding: var(--yarn-ecc-frame);
  border: 1px solid #e4e8f0;
  border-radius: 10px;
  background: #fafbfd;
  overflow: hidden;
  display: flex;
  flex-direction: column;
  min-height: 0;
  box-shadow: 0 1px 0 rgba(15, 23, 42, 0.04);
  container-type: inline-size;
  container-name: ecc-note-page;
}

.knit-dev-ecc-slot-board {
  display: grid;
  gap: var(--yarn-ecc-gap, clamp(0.4rem, 1.5dvh, 0.85rem));
  width: 100%;
  height: 100%;
  max-width: none;
  box-sizing: border-box;
  max-height: none;
  overflow: hidden;
  padding: 0;
  border: none;
  border-radius: 0;
  background: transparent;
  grid-template-rows: repeat(var(--ecc-manual-rows, 1), minmax(0, 1fr));
  align-content: stretch;
  justify-content: stretch;
}

.knit-dev-ecc-file-input {
  position: fixed;
  left: 0;
  top: 0;
  width: 1px;
  height: 1px;
  margin: 0;
  padding: 0;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  opacity: 0;
  border: 0;
  display: block !important;
}

.knit-dev-ecc-slot-board--preview .knit-dev-ecc-slot-card {
  pointer-events: auto;
  cursor: pointer;
}

.knit-dev-ecc-slot-board--preview .knit-dev-ecc-slot-add {
  pointer-events: auto;
}

.knit-dev-ecc-slot-card {
  position: relative;
  display: block;
  min-width: 0;
  min-height: 0;
  height: 100%;
  padding: 0;
  border: 1px solid #e4e8f0;
  border-radius: 8px;
  background: rgba(255, 255, 255, 0.55);
  color: var(--knit-surface-text);
  overflow: hidden;
  container-type: inline-size;
}

.knit-dev-ecc-slot-card--busy {
  border-color: #93c5fd;
  box-shadow: 0 0 0 2px rgba(37, 99, 235, 0.12);
}

.knit-dev-ecc-slot-card--preview-empty {
  background: repeating-linear-gradient(
    -45deg,
    rgba(248, 250, 252, 0.9),
    rgba(248, 250, 252, 0.9) 6px,
    rgba(241, 245, 249, 0.95) 6px,
    rgba(241, 245, 249, 0.95) 12px
  );
}

.knit-dev-ecc-slot-batch-hint {
  margin: 0 0 0.45rem;
  max-width: 42rem;
  font-size: var(--knit-hint-size);
  font-weight: var(--knit-hint-weight);
  letter-spacing: var(--knit-hint-ls);
  line-height: var(--knit-hint-lh);
  color: var(--knit-text-muted);
}

.knit-dev-ecc-slot-no {
  position: absolute;
  z-index: 5;
  top: clamp(0.28rem, 1.2cqi, 0.45rem);
  left: clamp(0.28rem, 1.2cqi, 0.45rem);
  font-size: clamp(0.58rem, 3.2cqi, 0.72rem);
  color: var(--knit-text-body);
  background: rgba(255, 255, 255, 0.88);
  border-radius: 4px;
  padding: 0.1rem 0.28rem;
  line-height: 1.2;
  pointer-events: none;
}

.knit-dev-ecc-slot-no__idx {
  display: inline-block;
  margin-right: 0.2rem;
  padding: 0 0.22rem;
  border-radius: 3px;
  background: #0f172a;
  color: #fff;
  font-weight: 700;
  font-variant-numeric: tabular-nums;
}

.knit-ecc-batch-modal__panel {
  width: min(32rem, 94vw);
}

.knit-ecc-batch-check {
  display: flex;
  align-items: center;
  gap: 0.4rem;
  margin: 0.35rem 0 0.65rem;
  font-size: 0.86rem;
  color: var(--knit-text-heading, #0f172a);
  cursor: pointer;
}

.knit-ecc-batch-map-list {
  display: flex;
  flex-direction: column;
  gap: 0.45rem;
  max-height: min(46vh, 22rem);
  overflow: auto;
  margin: 0.2rem 0 0.65rem;
}

.knit-ecc-batch-map-item {
  display: grid;
  grid-template-columns: auto 3.2rem minmax(0, 1fr) auto;
  gap: 0.55rem;
  align-items: center;
  padding: 0.45rem 0.55rem;
  border: 1px solid var(--knit-modal-border, var(--knit-panel-border));
  border-radius: 8px;
  background: var(--knit-control-hover-bg, #f8fafc);
  font-size: 0.82rem;
}

.knit-ecc-batch-map-item__badge {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 1.6rem;
  height: 1.6rem;
  padding: 0 0.3rem;
  border-radius: 999px;
  background: #0f172a;
  color: #fff;
  font-weight: 700;
  font-variant-numeric: tabular-nums;
}

.knit-ecc-batch-map-item__thumb {
  width: 3.2rem;
  height: 3.2rem;
  object-fit: cover;
  border-radius: 6px;
  background: var(--knit-control-active-bg);
}

.knit-ecc-batch-map-item__meta {
  min-width: 0;
  line-height: 1.35;
}

.knit-ecc-batch-map-item__meta strong {
  display: block;
  font-weight: 600;
}

.knit-ecc-batch-map-item__meta span {
  display: block;
  color: var(--knit-text-muted, #64748b);
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.knit-ecc-batch-map-item__ops {
  display: flex;
  flex-direction: column;
  gap: 0.2rem;
}

.knit-ecc-batch-map-item__ops button {
  margin: 0;
  padding: 0.15rem 0.4rem;
  border: 1px solid var(--knit-panel-border);
  border-radius: 5px;
  background: var(--knit-panel-bg);
  font: inherit;
  font-size: 0.72rem;
  cursor: pointer;
}

.knit-ecc-batch-map-item.is-skip {
  opacity: 0.55;
}

.knit-ecc-quick-fill-preview {
  margin: 0.2rem 0 0.55rem;
  padding: 0.5rem 0.6rem;
  border-radius: 8px;
  background: var(--knit-control-hover-bg);
  font-size: 0.8rem;
  line-height: 1.45;
  color: var(--knit-text-body);
  word-break: break-all;
}

.knit-dev-ecc-slot-card > .knit-dev-ecc-slot-split,
.knit-dev-ecc-slot-card > .knit-dev-ecc-slot-add {
  position: absolute;
  inset: clamp(0.28rem, 1.2cqi, 0.45rem);
  width: auto;
  height: auto;
  min-height: 0;
  flex: none;
}

.knit-dev-ecc-slot-split {
  position: absolute;
  inset: clamp(0.28rem, 1.2cqi, 0.45rem);
  width: auto;
  height: auto;
  min-height: 0;
  aspect-ratio: auto;
  border: none;
  border-radius: 6px;
  overflow: hidden;
  background: var(--knit-surface-input-bg);
  cursor: pointer;
}

.knit-dev-ecc-slot-split-img,
.knit-dev-ecc-slot-split-color {
  position: absolute;
  inset: 0;
}

/* 右下三角：插图（对角线：左下 → 右上） */
.knit-dev-ecc-slot-split-img {
  clip-path: polygon(100% 0, 100% 100%, 0 100%);
  z-index: 1;
}

.knit-dev-ecc-slot-split-img img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
  pointer-events: none;
}

/* 左上三角：扫描色值显示框（文案贴底，贴近详情页） */
.knit-dev-ecc-slot-split-color {
  clip-path: polygon(0 0, 100% 0, 0 100%);
  z-index: 2;
  display: flex;
  align-items: flex-end;
  justify-content: flex-start;
  padding: clamp(0.28rem, 1.2cqi, 0.45rem);
  background-color: var(--knit-surface-input-bg);
  background-image: repeating-linear-gradient(
    -45deg,
    var(--knit-surface-input-bg),
    var(--knit-surface-input-bg) 6px,
    var(--knit-surface-hover-bg) 6px,
    var(--knit-surface-hover-bg) 12px
  );
}

.knit-dev-ecc-slot-split-color.is-ready {
  background-image: none;
}

.knit-dev-ecc-slot-split-hex {
  position: relative;
  z-index: 3;
  display: inline-flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 0.08rem;
  font-family: ui-monospace, Consolas, monospace;
  font-size: clamp(0.58rem, calc(1.15rem - 0.04rem * var(--ecc-manual-cells, 4)), 0.85rem);
  font-weight: 700;
  letter-spacing: 0.02em;
  color: #fff;
  background: rgba(0, 0, 0, 0.38);
  border-radius: 4px;
  padding: 0.12rem 0.28rem;
  text-shadow: 0 1px 1px rgba(0, 0, 0, 0.45);
  max-width: 86%;
  text-align: left;
  word-break: break-all;
  line-height: 1.2;
}

.knit-dev-ecc-slot-split-name {
  font-family: inherit;
  font-size: 1em;
  font-weight: 700;
}

.knit-dev-ecc-slot-split-code {
  font-size: 0.88em;
  font-weight: 600;
  opacity: 0.92;
}

.knit-dev-ecc-slot-board[data-ecc-density="sparse"] .knit-dev-ecc-slot-split-hex {
  font-size: clamp(0.72rem, 2.4cqi, 0.95rem);
  padding: 0.18rem 0.35rem;
  max-width: 92%;
}

.knit-dev-ecc-slot-board[data-ecc-density="dense"] .knit-dev-ecc-slot-split-hex {
  font-size: 0.58rem;
  padding: 0.08rem 0.2rem;
  max-width: 72%;
}

.knit-dev-ecc-slot-split-hex.is-pending {
  color: var(--knit-surface-muted);
  text-shadow: none;
  font-weight: 600;
  background: rgba(255, 255, 255, 0.72);
}

/* 对角线分割线：与裁切缝一致（右上↔左下），勿用 to top right 否则会多出另一条交叉线 */
.knit-dev-ecc-slot-split-line {
  position: absolute;
  inset: 0;
  z-index: 4;
  pointer-events: none;
  background: linear-gradient(
    to top left,
    transparent calc(50% - 1px),
    rgba(255, 255, 255, 0.75) calc(50% - 0.5px),
    rgba(0, 0, 0, 0.35) 50%,
    rgba(255, 255, 255, 0.75) calc(50% + 0.5px),
    transparent calc(50% + 1px)
  );
}

.knit-dev-ecc-slot-add {
  appearance: none;
  -webkit-appearance: none;
  position: absolute;
  z-index: 6;
  inset: clamp(0.28rem, 1.2cqi, 0.45rem);
  width: auto;
  height: auto;
  min-height: 0;
  margin: 0;
  padding: 0;
  aspect-ratio: auto;
  border: 1px dashed var(--knit-panel-border);
  border-radius: 6px;
  background: rgba(248, 250, 252, 0.92);
  color: #60a5fa;
  font-size: clamp(1.2rem, 8cqi, 1.8rem);
  line-height: 1;
  cursor: pointer;
  font-family: inherit;
  display: flex;
  align-items: center;
  justify-content: center;
  pointer-events: auto;
}

.knit-dev-ecc-slot-add:hover {
  background: #eff6ff;
  border-color: #93c5fd;
}

.knit-dev-ecc-slot-text {
  position: absolute;
  z-index: 5;
  left: clamp(0.28rem, 1.2cqi, 0.45rem);
  right: clamp(0.28rem, 1.2cqi, 0.45rem);
  bottom: clamp(0.28rem, 1.2cqi, 0.45rem);
  width: auto;
  box-sizing: border-box;
  border: none;
  border-radius: 4px;
  padding: 0.18rem 0.35rem;
  font: inherit;
  font-size: clamp(0.58rem, 3.2cqi, 0.78rem);
  background: rgba(255, 255, 255, 0.9);
  color: var(--knit-text-heading);
  caret-color: var(--knit-text-heading);
  -webkit-text-fill-color: var(--knit-text-heading);
  pointer-events: auto;
  box-shadow: 0 1px 2px rgba(15, 23, 42, 0.08);
}

.knit-dev-ecc-slot-tip {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
  border: 0;
}

.knit-dev-colorcard-grid-hint {
  margin: 0;
  max-width: 42rem;
  font-size: var(--knit-hint-size);
  font-weight: var(--knit-hint-weight);
  letter-spacing: var(--knit-hint-ls);
  color: var(--knit-text-muted);
  line-height: var(--knit-hint-lh);
}

.knit-dev-colorcard-grid-size {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 0.4rem;
}

.knit-dev-colorcard-grid-size label,
.knit-dev-colorcard-grid-field {
  display: flex;
  flex-direction: column;
  gap: 0.22rem;
  font-size: 0.75rem;
  color: var(--knit-surface-text);
  font-weight: 600;
}

.knit-dev-colorcard-grid-num,
.knit-dev-colorcard-grid-select,
.knit-dev-colorcard-grid-codes {
  width: 100%;
  box-sizing: border-box;
  border: 1px solid var(--knit-surface-border);
  border-radius: 7px;
  padding: 0.35rem 0.45rem;
  font: inherit;
  font-weight: 400;
  background: var(--knit-surface-input-bg);
  color: var(--knit-surface-text);
  caret-color: var(--knit-surface-text);
  -webkit-text-fill-color: var(--knit-surface-text);
  color-scheme: light dark;
  pointer-events: auto;
}

.knit-dev-colorcard-grid-num:focus,
.knit-dev-colorcard-grid-select:focus,
.knit-dev-colorcard-grid-codes:focus,
.knit-dev-ecc-slot-text:focus {
  outline: 2px solid rgba(96, 165, 250, 0.55);
  outline-offset: 1px;
  border-color: #60a5fa;
}

.knit-dev-colorcard-grid-num::placeholder,
.knit-dev-colorcard-grid-codes::placeholder,
.knit-dev-ecc-slot-text::placeholder {
  color: var(--knit-surface-muted);
  -webkit-text-fill-color: var(--knit-surface-muted);
  opacity: 0.9;
}

.knit-dev-colorcard-grid-codes {
  resize: vertical;
  min-height: 6.5rem;
  line-height: 1.4;
}

.knit-dev-colorcard-grid-actions {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 0.4rem;
}

.knit-dev-colorcard-grid-apply-btn {
  width: 100%;
  padding: 0.38rem 0.55rem;
  border: 1px solid #0f766e;
  border-radius: 8px;
  background: #0f766e;
  color: #fff;
  cursor: pointer;
  font-size: 0.78rem;
  font-family: inherit;
}

.knit-dev-colorcard-grid-apply-btn:hover {
  background: #0d9488;
}

.knit-dev-colorcard-grid-preview {
  display: grid;
  gap: 0.35rem;
  max-height: 280px;
  overflow: auto;
  padding: 0.35rem;
  border: 1px solid var(--knit-surface-border);
  border-radius: 8px;
  background: var(--knit-panel-bg);
}

.knit-dev-colorcard-grid-preview[hidden] {
  display: none !important;
}

.knit-dev-colorcard-grid-cell {
  display: flex;
  flex-direction: column;
  gap: 0.22rem;
  min-width: 0;
  padding: 0.28rem;
  border: 1px solid #e5e7eb;
  border-radius: 7px;
  background: var(--knit-panel-bg-alt);
}

.knit-dev-colorcard-grid-swatch {
  width: 100%;
  aspect-ratio: 1;
  border-radius: 5px;
  border: 1px solid rgba(0, 0, 0, 0.08);
  background: var(--knit-panel-border);
}

.knit-dev-colorcard-grid-meta {
  font-size: 0.68rem;
  color: var(--knit-text-muted);
  line-height: 1.25;
}

.knit-dev-colorcard-grid-cell-code {
  width: 100%;
  box-sizing: border-box;
  border: 1px solid #d1d5db;
  border-radius: 5px;
  padding: 0.22rem 0.3rem;
  font: inherit;
  font-size: 0.72rem;
  background: var(--knit-panel-bg);
}

.knit-dev-colorcard-status {
  margin: 0;
  min-height: 1.2rem;
  font-size: 0.75rem;
  color: var(--knit-surface-muted);
  line-height: 1.35;
}

.knit-dev-colorcard-preview {
  width: 100%;
  min-width: 320px;
  max-width: none;
  min-height: 240px;
  max-height: 72vh;
  overflow: auto;
  overflow-x: auto;
  scrollbar-gutter: stable;
  border: 1px solid var(--knit-surface-border);
  border-radius: 8px;
  background: var(--knit-chrome-hover);
  padding: 0.45rem;
  box-sizing: border-box;
  resize: both;
}

.knit-dev-colorcard-item {
  padding: 0.35rem 0.2rem;
  border-bottom: 1px solid var(--knit-surface-border);
  font-size: 0.78rem;
  color: var(--knit-surface-text);
}

/* 电子色卡：每行独立 button，去浏览器默认样式 */
button.knit-ecc-swatch-btn {
  appearance: none;
  -webkit-appearance: none;
  margin: 0;
  border: none;
  background: transparent;
  font: inherit;
  line-height: inherit;
  color: inherit;
  text-align: left;
  width: 100%;
  box-sizing: border-box;
  cursor: pointer;
}

button.knit-ecc-swatch-btn:focus-visible {
  outline: 2px solid #3b82f6;
  outline-offset: 2px;
}

button.knit-ecc-swatch-btn:hover {
  background: rgba(15, 23, 42, 0.04);
}

button.knit-ecc-swatch-btn.knit-ecc-swatch-btn--fav-color {
  background: rgba(217, 119, 6, 0.12);
  box-shadow: inset 0 0 0 1px rgba(217, 119, 6, 0.35);
}

button.knit-ecc-swatch-btn.knit-ecc-swatch-btn--fav-pending {
  background: rgba(59, 130, 246, 0.12);
  box-shadow: inset 0 0 0 1px rgba(37, 99, 235, 0.45);
}

button.knit-ecc-swatch-btn[data-knit-ecc-color-drag="1"] {
  cursor: grab;
}

button.knit-ecc-swatch-btn.knit-ecc-swatch-btn--dragging {
  opacity: 0.55;
  cursor: grabbing;
}

button.knit-ecc-swatch-btn img,
button.knit-ecc-swatch-btn .knit-ecc-swatch-img,
button.knit-ecc-swatch-btn .knit-ecc-swatch-media {
  -webkit-user-drag: none;
  user-select: none;
  pointer-events: none;
}

button.knit-ecc-swatch-btn[data-knit-ecc-color-drag="1"] .knit-ecc-swatch-star-zone,
button.knit-ecc-swatch-btn[data-knit-ecc-color-drag="1"] .knit-ecc-swatch-star {
  pointer-events: auto;
}

/* 作品详情（右侧材料页）不展示「已进收藏夹/待保存」高亮框，只保留普通色号行外观 */
#knitFullpage:not(.knit-fp-color-picking)
  .knit-fullpage-right[data-knit-fp-channel="yarn"]
  button.knit-ecc-swatch-btn.knit-ecc-swatch-btn--fav-color,
#knitFullpage:not(.knit-fp-color-picking)
  .knit-fullpage-right[data-knit-fp-channel="yarn"]
  button.knit-ecc-swatch-btn.knit-ecc-swatch-btn--fav-pending {
  background: transparent;
  box-shadow: none;
}

.knit-dev-ocr-line {
  display: flex !important;
  flex-direction: row !important;
  align-items: center;
  justify-content: flex-start;
  gap: 10px;
  white-space: nowrap;
}

.knit-dev-ocr-line.knit-dev-ocr-line--selected {
  background: rgba(59, 130, 246, 0.14) !important;
  box-shadow: inset 0 0 0 1px rgba(59, 130, 246, 0.4);
}

.knit-dev-ocr-text {
  display: inline-block;
  white-space: nowrap;
}

.knit-dev-ocr-line .knit-dev-ocr-text {
  flex: 1 1 auto;
  min-width: 0;
}

/* OCR 结果文案兜底：避免被外层状态样式继承成浅灰而“看不见” */
.knit-dev-colorcard-preview .knit-dev-colorcard-item,
.knit-dev-colorcard-preview .knit-ecc-swatch-btn,
.knit-dev-colorcard-preview .knit-dev-ocr-text,
.knit-fullpage-right[data-knit-fp-channel="yarn"] .knit-fp-yarn-ecc-body .knit-dev-colorcard-item,
.knit-fullpage-right[data-knit-fp-channel="yarn"] .knit-fp-yarn-ecc-body .knit-ecc-swatch-btn,
.knit-fullpage-right[data-knit-fp-channel="yarn"] .knit-fp-yarn-ecc-body .knit-dev-ocr-text,
.knit-fullpage-right[data-knit-fp-channel="yarn"] .knit-fp-yarn-ecc-body .knit-fp-yarn-ecc-line-inner {
  color: var(--knit-text-heading) !important;
  opacity: 1 !important;
}

/* 文案 + 星标同组 flex，避免「内层 flex:1 + 星标 margin-left:auto」把星标甩到行尾 */
.knit-ecc-swatch-label-wrap {
  display: flex;
  align-items: center;
  flex: 1 1 auto;
  min-width: 0;
  gap: 0.35rem;
}

.knit-ecc-swatch-label-wrap .knit-fp-yarn-ecc-line-inner,
.knit-ecc-swatch-label-wrap .knit-dev-ocr-text {
  min-width: 0;
  max-width: calc(100% - 3rem);
}

/* 压过 `.knit-fullpage-right… .knit-fp-yarn-ecc-line-inner { flex:1 }`，否则扁平行里星标仍被甩到行尾 */
.knit-fullpage-right[data-knit-fp-channel="yarn"] .knit-ecc-swatch-label-wrap > .knit-fp-yarn-ecc-line-inner,
.knit-fullpage-right[data-knit-fp-channel="yarn"] .knit-ecc-swatch-label-wrap > .knit-dev-ocr-text {
  flex: 0 1 auto;
}

/* 电子色卡：已关联时在文案右侧显示星标 + 同展示文案下的关联条数（整行仍可点击跳转） */
.knit-ecc-swatch-star-zone {
  flex-shrink: 0;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 0.12rem 0.2rem;
  margin: -0.1rem -0.12rem;
  border-radius: 9px;
  cursor: pointer;
  pointer-events: auto;
}

.knit-ecc-swatch-star {
  flex-shrink: 0;
  display: inline-flex;
  align-items: center;
  gap: 0.12rem;
  padding: 0.08rem 0.3rem 0.1rem;
  border-radius: 7px;
  font-size: 0.68rem;
  line-height: 1;
  font-weight: 600;
  color: #92400e;
  background: linear-gradient(180deg, rgba(254, 252, 232, 0.98), rgba(253, 224, 71, 0.35));
  border: 1px solid rgba(217, 119, 6, 0.38);
  box-shadow: 0 1px 2px rgba(15, 23, 42, 0.06);
  user-select: none;
  cursor: pointer;
  pointer-events: auto;
}

.knit-ecc-swatch-star-glyph {
  font-size: 0.76rem;
  line-height: 1;
  color: #d97706;
}

.knit-ecc-swatch-star-count {
  font-variant-numeric: tabular-nums;
  min-width: 0.85em;
  text-align: center;
}

.knit-dev-ocr-pages {
  display: flex;
  align-items: center;
  justify-content: flex-end;
  gap: 10px;
  margin: 0 0 8px;
}

.knit-dev-ocr-page-label {
  font-size: 0.78rem;
  color: var(--knit-surface-muted);
  white-space: nowrap;
}

.knit-dev-ocr-page-btn {
  border: 1px solid var(--knit-surface-border);
  background: var(--knit-surface-bg);
  border-radius: 8px;
  padding: 0.22rem 0.55rem;
  font-size: 0.78rem;
  color: var(--knit-surface-text);
  cursor: pointer;
}

.knit-dev-ocr-page-btn:disabled {
  opacity: 0.45;
  cursor: not-allowed;
}

.knit-dev-ocr-board {
  display: grid;
  column-gap: 12px;
  row-gap: 10px;
  width: 100%;
  max-width: 100%;
  min-width: 0;
  box-sizing: border-box;
}

.knit-dev-ocr-panel {
  border: none;
  border-radius: 0;
  background: transparent;
  min-height: 0;
  min-width: 0;
}

.knit-dev-ocr-panel-body {
  padding: 0;
  overflow-x: visible;
}

.knit-dev-ocr-pages-row {
  display: flex;
  flex-wrap: wrap;
  align-items: flex-start;
  gap: 1rem 1.25rem;
  min-width: 0;
}

.knit-dev-ocr-page-col {
  flex: 1 1 200px;
  min-width: 0;
  max-width: 100%;
  border: 1px solid var(--knit-surface-border);
  border-radius: 10px;
  padding: 0.5rem 0.65rem 0.65rem;
  background: var(--knit-chrome-hover);
}

.knit-dev-ocr-page-col-title {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 0.5rem;
  font-size: 0.82rem;
  font-weight: 600;
  color: var(--knit-surface-text);
  margin-bottom: 0.45rem;
}

.knit-dev-ocr-page-remove-btn {
  border: 1px solid #f5c2c7;
  border-radius: 6px;
  background: color-mix(in srgb, var(--knit-red) 7%, var(--knit-panel-bg));
  color: #b42318;
  font-size: 0.72rem;
  line-height: 1.2;
  padding: 0.14rem 0.4rem;
  cursor: pointer;
}

.knit-dev-ocr-page-remove-btn:hover {
  background: #ffe8e8;
}

.knit-dev-ocr-page-col-empty {
  font-size: 0.78rem;
  color: #8a94a6;
}

.knit-dev-colorcard-item:last-child {
  border-bottom: none;
}

.knit-dev-colorchip {
  display: inline-block;
  width: 0.78rem;
  height: 0.78rem;
  border: 1px solid #cdd3db;
  vertical-align: -1px;
  margin-right: 0.3rem;
}

.knit-dev-table {
  width: 100%;
  border-collapse: collapse;
  background: var(--knit-panel-bg);
}

.knit-dev-table th,
.knit-dev-table td {
  border: 1px solid var(--knit-panel-border);
  padding: 0.3rem 0.35rem;
  font-size: 0.8rem;
  color: var(--knit-text-heading);
  text-align: center;
}

.knit-dev-cell-input {
  width: 100%;
  box-sizing: border-box;
  border: 1px solid var(--knit-control-border);
  border-radius: 6px;
  padding: 0.28rem 0.35rem;
  font-size: 0.8rem;
  line-height: 1.7;
  color: var(--knit-text-heading);
  background: var(--knit-panel-bg);
  text-align: left;
  white-space: pre-wrap;
  overflow-wrap: anywhere;
  word-break: break-word;
  overflow-y: hidden;
  resize: none;
  min-height: 2.2rem;
}

.knit-dev-yarn-name-cell {
  display: flex;
  align-items: center;
  gap: 0.35rem;
}

.knit-dev-yarn-name-cell .knit-dev-cell-input {
  flex: 1 1 auto;
}

.knit-dev-yarn-color-swatch {
  --knit-dev-yarn-swatch-color: #d1d5db;
  flex: 0 0 auto;
  width: 1.5rem;
  height: 0.82rem;
  border-radius: 0.25rem;
  border: 1px solid rgba(17, 24, 39, 0.22);
  background: var(--knit-dev-yarn-swatch-color);
}

.knit-dev-yarn-color-swatch--empty {
  opacity: 0.9;
}

.knit-dev-table th.knit-dev-yarn-pick-th,
.knit-dev-table td.knit-dev-yarn-pick-cell {
  width: 3.4rem;
  max-width: 4.2rem;
  vertical-align: middle;
  padding: 0.25rem 0.2rem;
}

.knit-dev-yarn-pick-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 100%;
  box-sizing: border-box;
  padding: 0.22rem 0.15rem;
  font-size: 0.72rem;
  font-weight: 600;
  line-height: 1.2;
  color: #1e3a5f;
  background: linear-gradient(180deg, #f0f7ff, #dbeafe);
  border: 1px solid #93c5fd;
  border-radius: 6px;
  cursor: pointer;
  white-space: nowrap;
}

.knit-dev-yarn-pick-btn:hover {
  background: linear-gradient(180deg, #e0efff, #bfdbfe);
}

.knit-dev-yarn-pick-btn:active {
  transform: translateY(1px);
}

/* 横向溢出时 scrollWidth > clientWidth，原生横向滚动条可用；内层宽度由 knit.js 同步像素宽 */
.knit-scrollport {
  position: relative;
  flex: 1 1 0%;
  min-height: 0;
  min-width: 0;
  width: 100%;
  max-width: 100%;
  overflow-x: auto;
  overflow-y: auto !important;
  overscroll-behavior: contain;
  -webkit-overflow-scrolling: touch;
  outline: none;
  cursor: grab;
  scrollbar-width: none;
}

.knit-scrollport::-webkit-scrollbar {
  display: none;
}

.knit-home-back-to-top {
  position: fixed;
  right: max(1rem, env(safe-area-inset-right, 0px));
  bottom: max(1.15rem, calc(var(--knit-bottom-nav-h) + env(safe-area-inset-bottom, 0px) + 0.85rem));
  z-index: 36;
  width: 2.7rem;
  height: 2.7rem;
  padding: 0;
  border: 1px solid var(--knit-panel-border);
  border-radius: 999px;
  font-size: 1.15rem;
  line-height: 1;
  color: var(--knit-text-heading, #111);
  background: rgba(255, 255, 255, 0.94);
  box-shadow: 0 4px 16px rgba(0, 0, 0, 0.16);
  cursor: pointer;
}

.knit-home-back-to-top:hover {
  background: var(--knit-panel-bg);
}

.knit-home-back-to-top[hidden],
body.knit-page--fullpage-open .knit-home-back-to-top {
  display: none !important;
}

.knit-grid-page-loading {
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  z-index: 20;
  height: 2px;
  overflow: hidden;
  pointer-events: none;
  background: color-mix(in srgb, var(--knit-chrome-active, #2563eb) 16%, transparent);
  font-size: 0;
  color: transparent;
  letter-spacing: 0;
  opacity: 1;
  transition: opacity 0.22s ease;
}

.knit-grid-page-loading::after {
  content: "";
  display: block;
  height: 100%;
  width: 42%;
  background: linear-gradient(
    90deg,
    transparent 0%,
    var(--knit-chrome-active, #2563eb) 50%,
    transparent 100%
  );
  animation: knit-load-bar 1.05s ease-in-out infinite;
}

.knit-grid-page-loading[hidden] {
  display: none;
}

.knit-scrollport.is-grid-page-loading .knit-grid-sleeve {
  visibility: visible;
}

.knit-scrollport.is-grid-page-loading .knit-grid {
  pointer-events: none;
}

@keyframes knit-load-bar {
  0% {
    transform: translateX(-120%);
  }
  100% {
    transform: translateX(280%);
  }
}

#knitGrid.knit-grid--content-enter {
  animation: knit-home-grid-enter 0.34s cubic-bezier(0.22, 1, 0.36, 1) both;
}

@keyframes knit-home-grid-enter {
  from {
    opacity: 0.08;
    transform: translate3d(var(--knit-channel-enter-x, 0px), 10px, 0);
  }
  to {
    opacity: 1;
    transform: none;
  }
}

.knit-grid-sleeve {
  display: block;
  box-sizing: border-box;
  /* JS 写 width = max(可视宽, --knit-grid-ref-w)，与 .knit-grid min-width 一致 */
  min-width: var(--knit-grid-ref-w);
}

.knit-scrollport.is-dragging {
  cursor: grabbing;
  user-select: none;
}

.knit-ptr-host {
  --knit-ptr-shift: 0px;
  --knit-ptr-turn: 0deg;
  position: relative;
}

.knit-ptr-host.knit-ptr-pulling > *:not(.knit-ptr),
.knit-ptr-host.knit-ptr-releasing > *:not(.knit-ptr),
.knit-ptr-host.knit-ptr-refreshing > *:not(.knit-ptr) {
  transform: translate3d(0, var(--knit-ptr-shift, 0px), 0);
  will-change: transform;
  backface-visibility: hidden;
}

.knit-ptr-host.knit-ptr-pulling > *:not(.knit-ptr) {
  transition: none;
}

.knit-ptr-host.knit-ptr-releasing > *:not(.knit-ptr),
.knit-ptr-host.knit-ptr-refreshing > *:not(.knit-ptr) {
  transition: transform 0.28s cubic-bezier(0.22, 0.82, 0.18, 1);
}

.knit-ptr {
  position: absolute;
  left: 0;
  right: 0;
  top: 0;
  z-index: 24;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 0.38rem;
  height: 44px;
  pointer-events: none;
  color: var(--knit-text-muted, #6b7280);
  font-size: 0.78rem;
  font-weight: 600;
  letter-spacing: 0.02em;
  background: transparent;
  opacity: 0;
  transform: translate3d(0, calc(var(--knit-ptr-shift, 0px) - 44px), 0);
  will-change: transform, opacity;
  backface-visibility: hidden;
}

.knit-ptr-host.knit-ptr-pulling > .knit-ptr {
  opacity: 1;
  transition: none;
}

.knit-ptr-host.knit-ptr-releasing > .knit-ptr,
.knit-ptr-host.knit-ptr-refreshing > .knit-ptr {
  opacity: 1;
  transition:
    transform 0.28s cubic-bezier(0.22, 0.82, 0.18, 1),
    opacity 0.2s ease;
}

.knit-ptr.is-armed,
.knit-ptr.is-refreshing {
  color: var(--knit-chrome-active-text, #111);
}

.knit-ptr__spinner {
  width: 1.05rem;
  height: 1.05rem;
  flex: 0 0 auto;
  border: 2px solid color-mix(in srgb, currentColor 22%, transparent);
  border-top-color: currentColor;
  border-radius: 50%;
  transform: rotate(var(--knit-ptr-turn, 0deg));
}

.knit-ptr.is-refreshing .knit-ptr__spinner {
  animation: knit-ptr-spin 0.68s linear infinite;
}

@keyframes knit-ptr-spin {
  to {
    transform: rotate(360deg);
  }
}

.knit-ptr__label {
  display: block;
  padding: 0.35rem 0;
}

html[data-knit-theme="dark"] .knit-ptr {
  color: var(--knit-text-muted, #94a3b8);
}

/* ---------- 网格：默认 7 列瀑布流；行宽不小于设计宽，窄窗时横向滚动 ---------- */
.knit-grid {
  --knit-grid-cols: 7;
  /* 固定间距：勿跟 vw 联动，否则拖窗口时 gap 忽大忽小、瀑布流跨度失准 */
  --knit-grid-gap: 10px;
  --knit-grid-masonry-unit: 2px;
  display: grid;
  grid-template-columns: repeat(var(--knit-grid-cols), minmax(0, 1fr));
  grid-auto-rows: var(--knit-grid-masonry-unit);
  gap: var(--knit-grid-gap);
  box-sizing: border-box;
  width: 100%;
  min-width: var(--knit-grid-ref-w);
  margin: 0;
  align-content: start;
  align-items: start;
  overflow: visible;
}

.knit-grid[data-knit-cols="2"] {
  --knit-grid-cols: 2;
}

.knit-grid[data-knit-cols="3"] {
  --knit-grid-cols: 3;
}

.knit-grid[data-knit-cols="4"] {
  --knit-grid-cols: 4;
}

.knit-grid[data-knit-cols="5"] {
  --knit-grid-cols: 5;
}

.knit-grid[data-knit-cols="7"] {
  --knit-grid-cols: 7;
}

/* 固定高度：统一封面比例，按普通网格流排布（必须压过 packed 的 display:block / absolute） */
.knit-grid.knit-grid--fixed-height,
.knit-grid[data-knit-feed-layout="fixed"] {
  display: grid !important;
  grid-auto-rows: auto !important;
  grid-auto-flow: row;
  height: auto !important;
  min-height: 0;
  align-items: start;
  position: static;
}

.knit-grid.knit-grid--fixed-height > .knit-card,
.knit-grid[data-knit-feed-layout="fixed"] > .knit-card {
  position: relative !important;
  left: auto !important;
  top: auto !important;
  width: auto !important;
  height: auto !important;
  grid-column: auto !important;
  grid-row: auto !important;
  inset: auto !important;
}

.knit-grid.knit-grid--fixed-height .knit-cell--img,
.knit-grid[data-knit-feed-layout="fixed"] .knit-cell--img,
.knit-cell--img.knit-cell--fixed-frame {
  aspect-ratio: 3 / 4;
}

.knit-grid.knit-grid--fixed-height .knit-cell--img img,
.knit-grid[data-knit-feed-layout="fixed"] .knit-cell--img img,
.knit-cell--img.knit-cell--fixed-frame img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center;
}

.knit-settings-picks--feed-meta {
  margin-top: 0.15rem;
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 0.35rem;
}

.knit-feed-layout-channel-tabs {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 0.35rem;
  margin: 0.2rem 0 0.75rem;
  padding: 0.28rem;
  border-radius: 12px;
  background: var(--knit-view-bg, rgba(0, 0, 0, 0.04));
  border: 1px solid var(--knit-control-border);
}

.knit-feed-layout-channel-tab {
  margin: 0;
  padding: 0.48rem 0.4rem;
  border: 0;
  border-radius: 9px;
  background: transparent;
  color: var(--knit-text-muted);
  font: inherit;
  font-size: 0.84rem;
  font-weight: 650;
  cursor: pointer;
  transition:
    background 0.16s ease,
    color 0.16s ease,
    box-shadow 0.16s ease;
}

.knit-feed-layout-channel-tab:hover,
.knit-feed-layout-channel-tab:focus-visible {
  color: var(--knit-text-heading);
  outline: none;
}

.knit-feed-layout-channel-tab.is-active {
  background: var(--knit-control-bg, #fff);
  color: var(--knit-text-heading);
  box-shadow: 0 1px 2px rgba(15, 23, 42, 0.08);
}

.knit-feed-layout-studio {
  display: flex;
  flex-direction: column;
  gap: 0.7rem;
  margin: 0.15rem 0 0;
}

.knit-feed-layout-studio[hidden] {
  display: none !important;
}

.knit-feed-layout-modes {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 0.55rem;
}

.knit-feed-layout-mode {
  display: flex;
  flex-direction: column;
  align-items: stretch;
  gap: 0.4rem;
  margin: 0;
  padding: 0.55rem 0.55rem 0.5rem;
  border: 1px solid var(--knit-control-border);
  border-radius: 12px;
  background: var(--knit-control-bg);
  color: var(--knit-text-body);
  font: inherit;
  cursor: pointer;
  text-align: left;
  transition:
    border-color 0.16s ease,
    box-shadow 0.16s ease,
    background 0.16s ease;
}

.knit-feed-layout-mode:hover {
  border-color: var(--knit-control-border-strong, #b8bfc9);
}

.knit-feed-layout-mode.is-active {
  border-color: var(--knit-chrome-active, #2563eb);
  box-shadow: 0 0 0 1px var(--knit-chrome-active, #2563eb);
  background: color-mix(in srgb, var(--knit-chrome-active, #2563eb) 6%, var(--knit-control-bg));
}

.knit-feed-layout-mode .knit-settings-pick-label {
  font-size: 0.82rem;
  font-weight: 650;
  color: var(--knit-text-heading);
  text-align: center;
}

.knit-feed-layout-mode__viz {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 0.18rem;
  height: 2.55rem;
  align-items: end;
  padding: 0.2rem;
  border-radius: 8px;
  background: var(--knit-view-bg, rgba(0, 0, 0, 0.04));
}

.knit-feed-layout-mode__viz i {
  display: block;
  width: 100%;
  border-radius: 3px;
  background: linear-gradient(160deg, rgba(255, 255, 255, 0.35), transparent 45%), #98a4b4;
}

.knit-feed-layout-mode__viz i[data-h="tall"] {
  height: 100%;
}
.knit-feed-layout-mode__viz i[data-h="mid"] {
  height: 72%;
}
.knit-feed-layout-mode__viz i[data-h="short"] {
  height: 48%;
}

.knit-feed-layout-mode__viz--fixed {
  align-items: center;
}

.knit-feed-layout-mode__viz--fixed i {
  height: 72%;
}

.knit-feed-layout-studio__cols {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0.45rem 0.65rem;
}

.knit-feed-layout-studio__cols-label {
  flex: 0 0 auto;
  font-size: 0.78rem;
  font-weight: 650;
  color: var(--knit-text-muted);
}

.knit-settings-picks--cols {
  flex: 1 1 auto;
  display: flex;
  flex-wrap: wrap;
  gap: 0.35rem;
  min-width: 0;
}

.knit-settings-picks--cols .knit-settings-pick {
  min-width: 2.35rem;
  padding: 0.38rem 0.55rem;
  justify-content: center;
}

.knit-feed-layout-preview {
  margin: 0 0 0.75rem;
}

.knit-feed-layout-preview__cap {
  margin: 0 0 0.4rem;
  font-size: 0.72rem;
  letter-spacing: 0.02em;
  color: var(--knit-text-muted);
}

.knit-feed-layout-preview__stage {
  position: relative;
  border: 1px solid var(--knit-control-border);
  border-radius: 12px;
  background:
    radial-gradient(120% 80% at 0% 0%, rgba(201, 48, 48, 0.06), transparent 55%),
    var(--knit-view-bg, var(--knit-bg, #fff));
  padding: 0.55rem 0.5rem 0.6rem;
  overflow: hidden;
  max-height: 13.5rem;
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.45);
}

.knit-feed-layout-preview__grid {
  display: grid;
  grid-template-columns: repeat(var(--knit-preview-cols, 3), minmax(0, 1fr));
  gap: 0.32rem;
  align-items: start;
}

.knit-feed-layout-preview__card {
  min-width: 0;
  display: flex;
  flex-direction: column;
  gap: 0.28rem;
}

.knit-feed-layout-preview__thumb {
  width: 100%;
  border-radius: 7px;
  background:
    linear-gradient(160deg, rgba(255, 255, 255, 0.35), transparent 42%),
    linear-gradient(145deg, #c8d0db, #8b97a8);
  box-shadow: 0 1px 2px rgba(0, 0, 0, 0.08);
  transition: height 0.24s cubic-bezier(0.22, 1, 0.36, 1);
}

.knit-feed-layout-preview__thumb--a {
  background:
    linear-gradient(160deg, rgba(255, 255, 255, 0.28), transparent 45%),
    linear-gradient(150deg, #d9c6b2, #9a7b63);
}
.knit-feed-layout-preview__thumb--b {
  background:
    linear-gradient(160deg, rgba(255, 255, 255, 0.28), transparent 45%),
    linear-gradient(150deg, #b9c9d8, #6f879c);
}
.knit-feed-layout-preview__thumb--c {
  background:
    linear-gradient(160deg, rgba(255, 255, 255, 0.28), transparent 45%),
    linear-gradient(150deg, #cbb8c5, #876a7c);
}
.knit-feed-layout-preview__thumb--d {
  background:
    linear-gradient(160deg, rgba(255, 255, 255, 0.28), transparent 45%),
    linear-gradient(150deg, #c2d2c0, #6f8a6d);
}
.knit-feed-layout-preview__thumb--e {
  background:
    linear-gradient(160deg, rgba(255, 255, 255, 0.28), transparent 45%),
    linear-gradient(150deg, #d6c8a8, #9a8558);
}
.knit-feed-layout-preview__thumb--f {
  background:
    linear-gradient(160deg, rgba(255, 255, 255, 0.28), transparent 45%),
    linear-gradient(150deg, #b7c5d4, #5f758c);
}

/* 瀑布流 / 砖石：列流向排布，间隙上下左右一致 */
.knit-feed-layout-studio[data-knit-feed-layout="waterfall"] .knit-feed-layout-preview__grid,
.knit-feed-layout-preview[data-knit-feed-layout="waterfall"] .knit-feed-layout-preview__grid {
  display: block;
  column-count: var(--knit-preview-cols, 3);
  column-gap: 0.28rem;
  align-items: stretch;
}

.knit-feed-layout-studio[data-knit-feed-layout="waterfall"] .knit-feed-layout-preview__card,
.knit-feed-layout-preview[data-knit-feed-layout="waterfall"] .knit-feed-layout-preview__card {
  display: inline-block;
  width: 100%;
  margin: 0 0 0.28rem;
  break-inside: avoid;
  -webkit-column-break-inside: avoid;
  page-break-inside: avoid;
}

.knit-feed-layout-studio[data-knit-feed-layout="waterfall"] .knit-feed-layout-preview__card[data-h="tall"] .knit-feed-layout-preview__thumb,
.knit-feed-layout-preview[data-knit-feed-layout="waterfall"] .knit-feed-layout-preview__card[data-h="tall"] .knit-feed-layout-preview__thumb {
  height: auto;
  aspect-ratio: 3 / 4.2;
}

.knit-feed-layout-studio[data-knit-feed-layout="waterfall"] .knit-feed-layout-preview__card[data-h="mid"] .knit-feed-layout-preview__thumb,
.knit-feed-layout-preview[data-knit-feed-layout="waterfall"] .knit-feed-layout-preview__card[data-h="mid"] .knit-feed-layout-preview__thumb {
  height: auto;
  aspect-ratio: 1 / 1.05;
}

.knit-feed-layout-studio[data-knit-feed-layout="waterfall"] .knit-feed-layout-preview__card[data-h="short"] .knit-feed-layout-preview__thumb,
.knit-feed-layout-preview[data-knit-feed-layout="waterfall"] .knit-feed-layout-preview__card[data-h="short"] .knit-feed-layout-preview__thumb {
  height: auto;
  aspect-ratio: 4 / 3.1;
}

/* 网格：等大封面，间隙一致；作者信息开启时按内容高度，避免 meta 被拉伸叠在一起 */
.knit-feed-layout-studio[data-knit-feed-layout="fixed"] .knit-feed-layout-preview__grid,
.knit-feed-layout-preview[data-knit-feed-layout="fixed"] .knit-feed-layout-preview__grid {
  display: grid;
  grid-template-columns: repeat(var(--knit-preview-cols, 3), minmax(0, 1fr));
  gap: 0.28rem;
  align-items: start;
}

.knit-feed-layout-studio[data-knit-feed-layout="fixed"] .knit-feed-layout-preview__thumb,
.knit-feed-layout-preview[data-knit-feed-layout="fixed"] .knit-feed-layout-preview__thumb {
  height: auto;
  aspect-ratio: 3 / 4;
}

.knit-feed-layout-preview__meta {
  display: none;
  align-items: flex-start;
  gap: 0.3rem;
  min-width: 0;
  opacity: 0;
  transform: translateY(2px);
  transition: opacity 0.22s ease, transform 0.22s ease;
}

.knit-feed-layout-studio[data-knit-author-meta="1"] .knit-feed-layout-preview__card,
.knit-feed-layout-preview[data-knit-author-meta="1"] .knit-feed-layout-preview__card {
  display: flex;
  flex-direction: column;
  gap: 0;
  border-radius: 8px;
  overflow: hidden;
  background: #e8eaee;
  box-shadow: 0 1px 3px rgba(15, 23, 42, 0.1);
}

.knit-feed-layout-studio[data-knit-author-meta="1"] .knit-feed-layout-preview__head,
.knit-feed-layout-preview[data-knit-author-meta="1"] .knit-feed-layout-preview__head {
  display: flex;
  align-items: center;
  gap: 0.18rem;
  padding: 0.16rem 0.18rem 0.12rem;
  background: #e8eaee;
}

.knit-feed-layout-studio[data-knit-author-meta="0"] .knit-feed-layout-preview__head,
.knit-feed-layout-preview[data-knit-author-meta="0"] .knit-feed-layout-preview__head,
.knit-feed-layout-studio:not([data-knit-author-meta]) .knit-feed-layout-preview__head,
.knit-feed-layout-preview:not([data-knit-author-meta]) .knit-feed-layout-preview__head {
  display: none;
}

.knit-feed-layout-studio[data-knit-author-meta="1"] .knit-feed-layout-preview__thumb,
.knit-feed-layout-preview[data-knit-author-meta="1"] .knit-feed-layout-preview__thumb {
  border-radius: 7px;
}

.knit-feed-layout-studio[data-knit-author-meta="1"] .knit-feed-layout-preview__meta,
.knit-feed-layout-preview[data-knit-author-meta="1"] .knit-feed-layout-preview__meta {
  display: flex;
  align-items: center;
  opacity: 1;
  transform: none;
  margin: 0;
  padding: 0.14rem 0.18rem 0.16rem;
  border: 0;
  border-radius: 0;
  background: #e8eaee;
  box-sizing: border-box;
}

.knit-feed-layout-studio[data-knit-author-meta="1"] .knit-feed-layout-preview__footer,
.knit-feed-layout-preview[data-knit-author-meta="1"] .knit-feed-layout-preview__footer {
  display: flex;
  align-items: center;
  gap: 0.16rem;
  margin: 0;
  padding: 0.12rem 0.18rem 0.14rem;
  background: #e8eaee;
  box-sizing: border-box;
}

.knit-feed-layout-studio[data-knit-author-meta="0"] .knit-feed-layout-preview__footer,
.knit-feed-layout-preview[data-knit-author-meta="0"] .knit-feed-layout-preview__footer,
.knit-feed-layout-studio:not([data-knit-author-meta]) .knit-feed-layout-preview__footer,
.knit-feed-layout-preview:not([data-knit-author-meta]) .knit-feed-layout-preview__footer {
  display: none;
}

.knit-feed-layout-studio[data-knit-show-avatar="0"][data-knit-show-nickname="0"] .knit-feed-layout-preview__head,
.knit-feed-layout-preview[data-knit-show-avatar="0"][data-knit-show-nickname="0"] .knit-feed-layout-preview__head {
  display: none !important;
}

.knit-feed-layout-studio[data-knit-show-avatar="0"] .knit-feed-layout-preview__ava,
.knit-feed-layout-preview[data-knit-show-avatar="0"] .knit-feed-layout-preview__ava {
  display: none;
}

.knit-feed-layout-studio[data-knit-show-nickname="0"] .knit-feed-layout-preview__nick,
.knit-feed-layout-preview[data-knit-show-nickname="0"] .knit-feed-layout-preview__nick {
  display: none;
}

.knit-feed-layout-studio[data-knit-show-time="0"] .knit-feed-layout-preview__time,
.knit-feed-layout-preview[data-knit-show-time="0"] .knit-feed-layout-preview__time {
  display: none;
}

.knit-feed-layout-studio[data-knit-show-views="0"] .knit-feed-layout-preview__views,
.knit-feed-layout-preview[data-knit-show-views="0"] .knit-feed-layout-preview__views {
  display: none;
}

.knit-feed-layout-preview__time,
.knit-feed-layout-preview__views {
  display: block;
  height: 0.28rem;
  border-radius: 0.08rem;
  background: color-mix(in srgb, #9a9a9a 42%, transparent);
  flex: 1 1 auto;
  min-width: 0.6rem;
  max-width: 1.6rem;
}

.knit-feed-layout-preview__mark {
  flex-shrink: 0;
  width: 0.42rem;
  height: 0.42rem;
  margin-left: auto;
  border-radius: 0.08rem;
  background: color-mix(in srgb, #9a9a9a 55%, transparent);
}

.knit-feed-layout-studio[data-knit-author-meta="0"] .knit-feed-layout-preview__meta,
.knit-feed-layout-preview[data-knit-author-meta="0"] .knit-feed-layout-preview__meta {
  display: none;
}

html[data-knit-theme="dark"] .knit-feed-layout-studio[data-knit-author-meta="1"] .knit-feed-layout-preview__card,
html[data-knit-theme="dark"] .knit-feed-layout-preview[data-knit-author-meta="1"] .knit-feed-layout-preview__card,
html[data-knit-theme="dark"] .knit-feed-layout-studio[data-knit-author-meta="1"] .knit-feed-layout-preview__head,
html[data-knit-theme="dark"] .knit-feed-layout-preview[data-knit-author-meta="1"] .knit-feed-layout-preview__head,
html[data-knit-theme="dark"] .knit-feed-layout-studio[data-knit-author-meta="1"] .knit-feed-layout-preview__meta,
html[data-knit-theme="dark"] .knit-feed-layout-preview[data-knit-author-meta="1"] .knit-feed-layout-preview__meta,
html[data-knit-theme="dark"] .knit-feed-layout-studio[data-knit-author-meta="1"] .knit-feed-layout-preview__footer,
html[data-knit-theme="dark"] .knit-feed-layout-preview[data-knit-author-meta="1"] .knit-feed-layout-preview__footer {
  background: #2a2f3a;
}

.knit-feed-layout-preview__ava {
  flex-shrink: 0;
  width: 0.78rem;
  height: 0.78rem;
  border-radius: 50%;
  background: linear-gradient(145deg, #9aa8ba, #6d7c90);
  margin-top: 0.04rem;
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.25);
}

.knit-feed-layout-preview__text {
  min-width: 0;
  display: flex;
  flex-direction: column;
  gap: 0.1rem;
}

.knit-feed-layout-preview__nick,
.knit-feed-layout-preview__brief {
  display: block;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  line-height: 1.2;
}

.knit-feed-layout-preview__nick {
  font-size: 0.6rem;
  font-weight: 600;
  color: var(--knit-text-heading, var(--knit-page-text, #111));
}

.knit-feed-layout-preview__brief {
  font-size: 0.52rem;
  color: var(--knit-text-muted, #888);
}

html[data-knit-theme="dark"] .knit-feed-layout-preview__stage,
html[data-knit-theme="dark"] .knit-feed-layout-mode__viz {
  background:
    radial-gradient(120% 80% at 0% 0%, rgba(201, 48, 48, 0.12), transparent 55%),
    #141414;
  border-color: rgba(255, 255, 255, 0.12);
}

html[data-knit-theme="dark"] .knit-feed-layout-preview__stage {
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.04);
}

html[data-device="desktop"] .knit-settings-pick[data-knit-grid-cols="2"],
html[data-device="desktop"] .knit-settings-pick[data-knit-grid-cols="4"],
html[data-device="desktop"] .knit-settings-hint--tablet-pinch {
  display: none;
}

/* 有卡片展开时：其余卡片降低透明度，布局不变 */
.knit-card {
  min-width: 0;
  position: relative;
  z-index: 0;
  /* 卡片本身不裁切，避免变成内部滚动盒把滚轮吃掉；圆角裁切放在 .knit-cell */
  overflow: visible;
  transition: opacity 0.22s ease;
  content-visibility: auto;
  contain-intrinsic-size: auto 160px;
}

/* 首页/用户作品/公开收藏网格须参与完整高度计算，否则瀑布流后 scrollport 无可滚动高度、滚轮失效 */
#knitGrid > .knit-card,
#knitGridNews > .knit-card,
#knitGridYarn > .knit-card,
#knitUserProfileGrid > .knit-card,
#knitFavoritePublicGrid > .knit-card {
  content-visibility: visible;
  contain-intrinsic-size: initial;
}

.knit-grid--dim-others .knit-card:not(.knit-card--open) {
  opacity: 0.32;
  z-index: 1;
}

.knit-grid--dim-others .knit-card.knit-card--open {
  opacity: 1;
}

/* 图片与花型信息同一叠层：展开时整体缩放、阴影；元信息浮于图内不占流式高度 */
.knit-card-layer {
  --knit-meta-footer-h: clamp(1.1rem, 0.15rem + 3.4vw, 1.75rem);
  display: flex;
  flex-direction: column;
  gap: 0.4rem;
  min-width: 0;
  position: relative;
  transform-origin: center center;
  transition: transform 0.22s ease, box-shadow 0.22s ease;
}

.knit-card--open {
  z-index: 50;
  isolation: isolate;
  content-visibility: visible;
  transform: translateZ(0);
  overflow: visible;
}

.knit-card--open .knit-card-layer {
  /* 不用 scale，避免文字向左/右溢出被相邻列遮挡 */
  transform: none;
  position: relative;
  z-index: 2;
  border-radius: var(--knit-chrome-radius, 22px);
  box-shadow: 0 10px 28px rgba(0, 0, 0, 0.22);
}

/* 展开后 meta 绝对定位，用占位保留昵称行高度，避免下一行网格跳动 */
.knit-card--open .knit-card-layer::after {
  content: "";
  display: block;
  height: var(--knit-meta-footer-h);
  flex: 0 0 auto;
  pointer-events: none;
}

.knit-card--open .knit-cell {
  outline: 2px solid rgba(255, 255, 255, 0.92);
  outline-offset: -2px;
}

.knit-cell {
  border-radius: var(--knit-chrome-radius, 22px);
  /* clip 只裁切、不形成滚动盒；hidden 会把滚轮截在卡片里 */
  overflow: clip;
  background: var(--knit-red);
  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.12);
  min-height: 0;
  cursor: pointer;
  position: relative;
}

.knit-card--open .knit-cell {
  box-shadow: none;
}

.knit-cell--placeholder {
  aspect-ratio: 3 / 4;
  background: linear-gradient(160deg, var(--knit-red-soft), var(--knit-red));
  min-height: 48px;
}

.knit-cell--img {
  position: relative;
  padding: 0;
  background: #111;
  height: auto;
}

.knit-card--loading-img .knit-cell,
.knit-card--skel .knit-cell {
  background: var(--knit-view-bg);
  box-shadow: none;
}

.knit-card--skel {
  pointer-events: none;
}

.knit-card--preplace {
  opacity: 0;
  pointer-events: none;
  transition: none;
}

.knit-card.knit-card--enter {
  transition: none;
  animation: knit-home-card-enter 0.4s cubic-bezier(0.22, 1, 0.36, 1) both;
  animation-delay: calc(var(--knit-card-enter-i, 0) * 28ms);
}

@keyframes knit-home-card-enter {
  from {
    opacity: 0;
    transform: translate3d(0, 12px, 0) scale(0.985);
  }
  to {
    opacity: 1;
    transform: none;
  }
}

.knit-card--loading-img .knit-cell--img,
.knit-card--skel .knit-cell--img {
  aspect-ratio: 3 / 4;
  min-height: 48px;
  height: auto;
  display: block;
  position: relative;
  background: linear-gradient(
    90deg,
    var(--knit-view-bg) 0%,
    rgba(128, 128, 128, 0.16) 46%,
    var(--knit-view-bg) 100%
  );
  background-size: 220% 100%;
  animation: knit-skel-shimmer 1.25s ease-in-out infinite;
}

@keyframes knit-skel-shimmer {
  0% {
    background-position: 100% 0;
  }
  100% {
    background-position: -100% 0;
  }
}

.knit-card--loading-img .knit-cell--img img,
.knit-card--loading-img .knit-cell--img img.knit-cell__img--pending {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center;
  opacity: 0;
}

.knit-card--loading-img .knit-cell--img img.knit-cell__img--ready {
  opacity: 1;
  transition: opacity 0.36s ease;
}

.knit-card--loading-img .knit-pattern-meta,
.knit-card--skel .knit-pattern-meta {
  display: none;
}

html[data-knit-theme="dark"] .knit-card--loading-img .knit-cell--img,
html[data-knit-theme="dark"] .knit-card--skel .knit-cell--img {
  background: linear-gradient(
    90deg,
    var(--knit-view-bg) 0%,
    rgba(255, 255, 255, 0.07) 46%,
    var(--knit-view-bg) 100%
  );
  background-size: 220% 100%;
}

.knit-cell__loading-label {
  font-size: 0.78rem;
  letter-spacing: 0.04em;
  color: var(--knit-text-muted);
  user-select: none;
  pointer-events: none;
}

.knit-cell--img img {
  width: 100%;
  height: auto;
  display: block;
  pointer-events: none;
}

/* 超出 16:9～9:16 的封面：框高被夹住，图居中裁切填满 */
.knit-cell--img.knit-cell--aspect-clamp {
  overflow: clip;
}

.knit-cell--img.knit-cell--aspect-clamp img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center;
}

/* ---------- 每个红框下方：花型信息（固定「标题：」+ 值，只读） ---------- */
.knit-pattern-meta {
  padding: 0 0 0.15rem;
  display: flex;
  flex-direction: column;
  gap: clamp(0.18rem, 0.35vw + 0.1rem, 0.32rem);
  min-width: 0;
  min-height: var(--knit-meta-footer-h);
  position: relative;
  z-index: 1;
}

/* 展开时：信息浮在图片底部，不挤占下一行网格位置 */
.knit-card--open .knit-pattern-meta {
  position: absolute;
  left: 0;
  right: 0;
  top: 0;
  bottom: var(--knit-meta-footer-h);
  min-height: 0;
  padding: clamp(0.32rem, 1.2vw + 0.14rem, 0.58rem)
    clamp(0.42rem, 1.6vw + 0.12rem, 0.72rem)
    clamp(0.26rem, 0.9vw + 0.1rem, 0.46rem);
  gap: clamp(0.14rem, 0.55vw + 0.05rem, 0.26rem);
  display: flex;
  flex-direction: column;
  justify-content: flex-end;
  box-sizing: border-box;
  border-radius: 0 0 var(--knit-chrome-radius, 22px) var(--knit-chrome-radius, 22px);
  background: linear-gradient(
    180deg,
    rgba(255, 255, 255, 0) 0%,
    rgba(255, 255, 255, 0.94) 34%,
    #fff 58%
  );
  box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.65);
  pointer-events: none;
  z-index: 3;
  overflow: visible;
}

.knit-meta-user {
  display: flex;
  align-items: center;
  gap: 0.45rem;
  min-width: 0;
  margin-bottom: 0.15rem;
}

/* 首页（资讯/灵感/材料）：默认不显示发布者；设置开启后显示 */
#knitGrid:not([data-knit-author-meta="1"]) .knit-meta-user,
#knitGridNews:not([data-knit-author-meta="1"]) .knit-meta-user,
#knitGridYarn:not([data-knit-author-meta="1"]) .knit-meta-user {
  display: none !important;
}

#knitGrid:not([data-knit-author-meta="1"]) .knit-pattern-meta,
#knitGridNews:not([data-knit-author-meta="1"]) .knit-pattern-meta,
#knitGridYarn:not([data-knit-author-meta="1"]) .knit-pattern-meta {
  min-height: 0;
  padding: 0;
  gap: 0;
}

#knitGrid:not([data-knit-author-meta="1"]) .knit-card-layer,
#knitGridNews:not([data-knit-author-meta="1"]) .knit-card-layer,
#knitGridYarn:not([data-knit-author-meta="1"]) .knit-card-layer {
  gap: 0;
}

/* 开启作者信息：上头像昵称 → 封面 → 下统计/标记 → 作品简介；整卡阴影 */
#knitGrid[data-knit-author-meta="1"] .knit-card-layer,
#knitGridNews[data-knit-author-meta="1"] .knit-card-layer,
#knitGridYarn[data-knit-author-meta="1"] .knit-card-layer {
  --knit-meta-head-h: clamp(2.25rem, 1.55rem + 2.2vw, 2.7rem);
  --knit-meta-footer-h: clamp(1.55rem, 0.95rem + 2vw, 2rem);
  /* 浅灰底：相对页底 #f4f5f7 可区分 */
  --knit-meta-panel-bg: #e8eaee;
  gap: 0;
  border-radius: var(--knit-chrome-radius, 22px);
  overflow: clip;
  background: var(--knit-meta-panel-bg);
  box-shadow:
    0 2px 10px rgba(15, 23, 42, 0.1),
    0 1px 3px rgba(15, 23, 42, 0.06);
}

/* 首页作品：仅封面时封面自带轻阴影 */
#knitGrid > .knit-card .knit-cell,
#knitGridNews > .knit-card .knit-cell,
#knitGridYarn > .knit-card .knit-cell {
  box-shadow:
    0 2px 8px rgba(0, 0, 0, 0.12),
    0 1px 2px rgba(0, 0, 0, 0.06);
}

#knitGrid[data-knit-author-meta="1"] .knit-cell,
#knitGridNews[data-knit-author-meta="1"] .knit-cell,
#knitGridYarn[data-knit-author-meta="1"] .knit-cell {
  border-radius: var(--knit-chrome-radius, 22px);
  overflow: clip;
  z-index: 1;
  box-shadow: none;
}

#knitGrid[data-knit-author-meta="1"] .knit-cell--img img,
#knitGridNews[data-knit-author-meta="1"] .knit-cell--img img,
#knitGridYarn[data-knit-author-meta="1"] .knit-cell--img img {
  border-radius: inherit;
}

#knitGrid[data-knit-author-meta="1"] .knit-meta-head,
#knitGridNews[data-knit-author-meta="1"] .knit-meta-head,
#knitGridYarn[data-knit-author-meta="1"] .knit-meta-head {
  display: flex;
  align-items: center;
  min-height: var(--knit-meta-head-h);
  margin: 0;
  padding: 0.38rem 0.5rem 0.32rem;
  box-sizing: border-box;
  background: var(--knit-meta-panel-bg);
  pointer-events: none;
}

#knitGrid:not([data-knit-author-meta="1"]) .knit-meta-head,
#knitGridNews:not([data-knit-author-meta="1"]) .knit-meta-head,
#knitGridYarn:not([data-knit-author-meta="1"]) .knit-meta-head {
  display: none !important;
}

.knit-card--loading-img .knit-meta-head,
.knit-card--skel .knit-meta-head {
  display: none !important;
}

#knitGrid[data-knit-author-meta="1"] .knit-pattern-meta,
#knitGridNews[data-knit-author-meta="1"] .knit-pattern-meta,
#knitGridYarn[data-knit-author-meta="1"] .knit-pattern-meta {
  position: relative;
  z-index: 2;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: stretch;
  gap: 0;
  min-height: var(--knit-meta-footer-h);
  margin: 0;
  padding: 0.34rem 0.5rem 0.4rem;
  box-sizing: border-box;
  border: 0;
  border-radius: 0;
  background: var(--knit-meta-panel-bg);
  overflow: hidden;
  pointer-events: none;
  filter: none;
}

/* 无作品简介时不占空高（展开态由 .knit-card--open 规则重新显示） */
#knitGrid[data-knit-author-meta="1"] .knit-pattern-meta:not(:has(.knit-meta-line--brief)),
#knitGridNews[data-knit-author-meta="1"] .knit-pattern-meta:not(:has(.knit-meta-line--brief)),
#knitGridYarn[data-knit-author-meta="1"] .knit-pattern-meta:not(:has(.knit-meta-line--brief)) {
  display: none;
  min-height: 0;
  padding: 0;
}

#knitGrid[data-knit-author-meta="1"] .knit-pattern-meta::before,
#knitGridNews[data-knit-author-meta="1"] .knit-pattern-meta::before,
#knitGridYarn[data-knit-author-meta="1"] .knit-pattern-meta::before,
#knitGrid[data-knit-author-meta="1"] .knit-pattern-meta::after,
#knitGridNews[data-knit-author-meta="1"] .knit-pattern-meta::after,
#knitGridYarn[data-knit-author-meta="1"] .knit-pattern-meta::after {
  content: none;
  display: none;
}

#knitGrid[data-knit-author-meta="1"] .knit-meta-head .knit-meta-user,
#knitGridNews[data-knit-author-meta="1"] .knit-meta-head .knit-meta-user,
#knitGridYarn[data-knit-author-meta="1"] .knit-meta-head .knit-meta-user {
  margin: 0;
  gap: 0.32rem;
  flex: 1 1 auto;
  min-width: 0;
  align-items: center;
}

#knitGrid[data-knit-author-meta="1"] .knit-meta-avatar,
#knitGridNews[data-knit-author-meta="1"] .knit-meta-avatar,
#knitGridYarn[data-knit-author-meta="1"] .knit-meta-avatar {
  width: 2rem;
  height: 2rem;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font-size: 0.8rem;
  font-weight: 700;
  color: #fff;
}

#knitGrid[data-knit-author-meta="1"] .knit-meta-nickname,
#knitGridNews[data-knit-author-meta="1"] .knit-meta-nickname,
#knitGridYarn[data-knit-author-meta="1"] .knit-meta-nickname {
  font-size: clamp(0.78rem, 0.45rem + 1.4vw, 0.92rem);
  font-weight: 700;
  line-height: 1.2;
  color: var(--knit-text-heading);
}

#knitGrid[data-knit-author-meta="1"] .knit-meta-footer,
#knitGridNews[data-knit-author-meta="1"] .knit-meta-footer,
#knitGridYarn[data-knit-author-meta="1"] .knit-meta-footer {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0.28rem 0.55rem;
  min-height: var(--knit-meta-footer-h);
  margin: 0;
  padding: 0.28rem 0.45rem 0.34rem;
  box-sizing: border-box;
  background: var(--knit-meta-panel-bg);
  color: var(--knit-text-muted, #888);
  font-size: clamp(0.62rem, 0.28rem + 1.15vw, 0.78rem);
  line-height: 1.2;
  pointer-events: none;
}

#knitGrid[data-knit-author-meta="1"] .knit-meta-footer .knit-like-btn,
#knitGridNews[data-knit-author-meta="1"] .knit-meta-footer .knit-like-btn,
#knitGridYarn[data-knit-author-meta="1"] .knit-meta-footer .knit-like-btn {
  pointer-events: auto;
}

#knitGrid:not([data-knit-author-meta="1"]) .knit-meta-footer,
#knitGridNews:not([data-knit-author-meta="1"]) .knit-meta-footer,
#knitGridYarn:not([data-knit-author-meta="1"]) .knit-meta-footer {
  display: none !important;
}

.knit-card--loading-img .knit-meta-footer,
.knit-card--skel .knit-meta-footer {
  display: none !important;
}

#knitGrid[data-knit-author-meta="1"] .knit-meta-time,
#knitGridNews[data-knit-author-meta="1"] .knit-meta-time,
#knitGridYarn[data-knit-author-meta="1"] .knit-meta-time,
#knitGrid[data-knit-author-meta="1"] .knit-meta-views,
#knitGridNews[data-knit-author-meta="1"] .knit-meta-views,
#knitGridYarn[data-knit-author-meta="1"] .knit-meta-views {
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

#knitGrid[data-knit-author-meta="1"] .knit-meta-line--brief,
#knitGridNews[data-knit-author-meta="1"] .knit-meta-line--brief,
#knitGridYarn[data-knit-author-meta="1"] .knit-meta-line--brief {
  display: block;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  color: var(--knit-text-muted, #888);
  font-size: clamp(0.46rem, 0.1rem + 1.1vw, 0.66rem);
  line-height: 1.25;
  pointer-events: none;
  padding-left: 0;
  margin: 0;
}

#knitGrid[data-knit-author-meta="1"] .knit-card:not(.knit-card--open),
#knitGridNews[data-knit-author-meta="1"] .knit-card:not(.knit-card--open),
#knitGridYarn[data-knit-author-meta="1"] .knit-card:not(.knit-card--open) {
  z-index: 2;
}

#knitGrid[data-knit-author-meta="1"] .knit-card--open .knit-card-layer,
#knitGridNews[data-knit-author-meta="1"] .knit-card--open .knit-card-layer,
#knitGridYarn[data-knit-author-meta="1"] .knit-card--open .knit-card-layer {
  box-shadow: 0 10px 28px rgba(15, 23, 42, 0.22);
}

#knitGrid[data-knit-author-meta="1"] .knit-card--open .knit-pattern-meta,
#knitGridNews[data-knit-author-meta="1"] .knit-card--open .knit-pattern-meta,
#knitGridYarn[data-knit-author-meta="1"] .knit-card--open .knit-pattern-meta {
  /* 展开时仍用图内浮层看花型信息 */
  display: flex;
  border-radius: 0 0 var(--knit-chrome-radius, 22px) var(--knit-chrome-radius, 22px);
  background: linear-gradient(
    180deg,
    rgba(255, 255, 255, 0) 0%,
    rgba(255, 255, 255, 0.94) 34%,
    #fff 58%
  );
  box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.65);
  filter: none;
  min-height: 0;
  padding: clamp(0.32rem, 1.2vw + 0.14rem, 0.58rem)
    clamp(0.42rem, 1.6vw + 0.12rem, 0.72rem)
    clamp(0.26rem, 0.9vw + 0.1rem, 0.46rem);
  justify-content: flex-end;
}

#knitGrid .knit-card--open .knit-card-layer::after,
#knitGridNews .knit-card--open .knit-card-layer::after,
#knitGridYarn .knit-card--open .knit-card-layer::after {
  display: none;
}

#knitGrid .knit-card--open .knit-pattern-meta,
#knitGridNews .knit-card--open .knit-pattern-meta,
#knitGridYarn .knit-card--open .knit-pattern-meta {
  bottom: 0;
}

.knit-card--open .knit-meta-user {
  visibility: hidden;
  pointer-events: none;
}

#knitGrid[data-knit-author-meta="1"] .knit-card--open .knit-meta-head .knit-meta-user,
#knitGridNews[data-knit-author-meta="1"] .knit-card--open .knit-meta-head .knit-meta-user,
#knitGridYarn[data-knit-author-meta="1"] .knit-card--open .knit-meta-head .knit-meta-user {
  visibility: visible;
}

.knit-card--open .knit-meta-line--brief {
  display: none !important;
}

.knit-meta-avatar {
  flex-shrink: 0;
  width: clamp(1.1rem, 0.15rem + 3.4vw, 1.75rem);
  height: clamp(1.1rem, 0.15rem + 3.4vw, 1.75rem);
  border-radius: 50%;
  background: #7a8aa0;
  border: 1px solid rgba(0, 0, 0, 0.1);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.2);
  overflow: hidden;
}

.knit-meta-avatar__img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.knit-meta-nickname {
  font-size: clamp(0.48rem, 0.06rem + 1.35vw, 0.76rem);
  font-weight: 600;
  color: var(--knit-text-heading);
  line-height: 1.2;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  min-width: 0;
}

.knit-meta-line {
  display: none;
  margin: 0;
  width: 100%;
  min-width: 0;
  overflow: hidden;
  font-size: clamp(0.44rem, 0.04rem + 1.25vw, 0.72rem);
  line-height: 1.3;
  color: var(--knit-text-body);
  flex-wrap: nowrap;
  align-items: baseline;
  gap: 0.2em;
}

.knit-card--open .knit-meta-line {
  display: flex;
  pointer-events: auto;
  color: var(--knit-text-heading);
  overflow: visible;
  text-shadow: 0 1px 2px rgba(255, 255, 255, 0.95);
}

/* 灵感首页：笔记页指定的悬停预览（纯文字，无标签） */
.knit-meta-line--hover-text {
  display: none;
}

.knit-card--open .knit-meta-line--hover-text {
  display: -webkit-box;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 5;
  overflow: hidden;
  white-space: normal;
  word-break: break-word;
}

.knit-card--open .knit-meta-line--hover-text .knit-meta-value {
  white-space: normal;
}

/* 笔记页：灵感首页悬停预览字段选择 */
.knit-dev-hover-picker,
.knit-creator-hover-picker {
  margin: 0.65rem 0 0.35rem;
  padding: 0.75rem 0.85rem;
  border: 1px solid var(--knit-panel-border);
  box-shadow: var(--knit-panel-shadow);
  border-radius: 10px;
  background: var(--knit-panel-bg);
  display: flex;
  flex-direction: column;
  gap: 0.35rem;
}

.knit-dev-hover-picker-label {
  font-weight: 600;
  font-size: 0.92rem;
  color: var(--knit-text-heading);
}

.knit-dev-hover-picker-select {
  width: 100%;
  max-width: 100%;
  padding: 0.45rem 0.55rem;
  border: 1px solid var(--knit-control-border);
  border-radius: 8px;
  font: inherit;
  background: var(--knit-input-bg);
  color: var(--knit-input-text);
}

.knit-dev-hover-picker-hint {
  margin: 0;
  max-width: 42rem;
  font-size: var(--knit-hint-size);
  font-weight: var(--knit-hint-weight);
  letter-spacing: var(--knit-hint-ls);
  color: var(--knit-text-muted);
  line-height: var(--knit-hint-lh);
}

/* 笔记页：已设为灵感悬停预览的输入框 */
.knit-dev-field--hover-source {
  outline: 2px solid #0f766e;
  outline-offset: 1px;
  border-radius: 6px;
}

.knit-dev-block.knit-dev-field--hover-source {
  outline-offset: 2px;
  border-radius: 10px;
}

.knit-dev-field--hover-source:focus {
  outline-color: #0d9488;
}

/* 悬停预览 / 详情页色卡全文：浮层弹窗（替代卡片内嵌展开） */
.knit-text-hover-popover {
  position: fixed;
  z-index: 1105;
  max-width: min(22rem, calc(100vw - 1.25rem));
  pointer-events: none;
  opacity: 0;
  visibility: hidden;
  transform: translate3d(0, 8px, 0) scale(0.96);
  transition:
    opacity 0.26s ease,
    transform 0.34s cubic-bezier(0.22, 1, 0.36, 1),
    visibility 0.34s;
  will-change: opacity, transform;
}

.knit-text-hover-popover[hidden] {
  display: none !important;
}

.knit-text-hover-popover.is-visible {
  opacity: 1;
  visibility: visible;
  transform: translate3d(0, 0, 0) scale(1);
}

.knit-text-hover-popover__panel {
  padding: 0.7rem 0.9rem;
  background: var(--knit-panel-bg);
  border: 1px solid var(--knit-panel-border);
  border-radius: 11px;
  box-shadow:
    0 4px 14px rgba(15, 23, 42, 0.08),
    0 16px 40px rgba(15, 23, 42, 0.14);
  backdrop-filter: blur(10px);
}

.knit-text-hover-popover__body {
  margin: 0;
  font-size: 0.84rem;
  line-height: 1.58;
  color: var(--knit-text-body);
  white-space: pre-wrap;
  word-break: break-word;
}

@media (prefers-reduced-motion: reduce) {
  .knit-text-hover-popover {
    transition: opacity 0.12s ease, visibility 0.12s;
    transform: none;
  }

  .knit-text-hover-popover.is-visible {
    transform: none;
  }

  #knitGrid.knit-grid--content-enter,
  .knit-card.knit-card--enter,
  .knit-card--loading-img .knit-cell--img,
  .knit-card--skel .knit-cell--img,
  .knit-grid-page-loading::after {
    animation: none !important;
  }

  .knit-card--preplace {
    opacity: 1;
  }

  .knit-card--loading-img .knit-cell--img img.knit-cell__img--ready {
    transition: none;
  }
}

.knit-meta-label {
  font-weight: 600;
  color: var(--knit-text-heading);
  flex-shrink: 0;
  white-space: nowrap;
}

.knit-card--open .knit-meta-label,
.knit-card--open .knit-meta-value {
  overflow: visible;
  text-overflow: clip;
}

.knit-meta-value {
  font-weight: 400;
  color: var(--knit-text-body);
  flex: 1 1 0;
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

/* ---------- 双击图片：左半屏大图 + 右半屏详情 ---------- */
.knit-fullpage {
  position: fixed;
  inset: 0;
  z-index: 1550;
  display: flex;
  flex-direction: row;
  width: 100vw;
  height: 100vh;
  height: 100dvh;
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}

.knit-fullpage[hidden] {
  display: none !important;
}

.knit-fullpage-left {
  position: relative;
  flex: 1 1 50%;
  min-width: 0;
  height: 100%;
  background: var(--knit-black);
  overflow: visible;
  touch-action: none;
  user-select: none;
}

/* 仅裁切缩放中的图片，避免父级 overflow 把右侧竖条标签裁掉 */
.knit-fullpage-left-inner {
  position: absolute;
  inset: 0;
  overflow: hidden;
  display: flex;
  align-items: center;
  justify-content: center;
  z-index: 1;
}

#knitFullpageImg {
  width: 100%;
  height: 100%;
  max-width: 100%;
  max-height: 100%;
  object-fit: contain;
  object-position: center center;
  transition: opacity 0.12s ease;
}

#knitFullpageImg.knit-fp-img--loading {
  opacity: 0.45;
}

.knit-fp-nav-btn {
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  z-index: 9;
  width: 2.1rem;
  height: 2.1rem;
  border: none;
  border-radius: 50%;
  background: rgba(255, 255, 255, 0.86);
  color: var(--knit-text-heading);
  font-size: 1.6rem;
  line-height: 1;
  cursor: pointer;
}

.knit-fp-nav-btn--prev {
  left: 0.75rem;
}

.knit-fp-nav-btn--next {
  right: 0.75rem;
}

/* 详情主图底部书页指示：当前张 / 总张数 */
.knit-fp-album-pager {
  position: absolute;
  left: 50%;
  bottom: 0.65rem;
  z-index: 10;
  transform: translateX(-50%);
  display: inline-flex;
  align-items: baseline;
  justify-content: center;
  gap: 0.2rem;
  min-width: 3.4rem;
  padding: 0.22rem 0.7rem 0.28rem;
  border-radius: 999px;
  background: rgba(0, 0, 0, 0.48);
  color: #fff;
  font-size: 0.78rem;
  font-weight: 600;
  letter-spacing: 0.04em;
  line-height: 1.2;
  pointer-events: none;
  user-select: none;
  backdrop-filter: blur(6px);
  -webkit-backdrop-filter: blur(6px);
  box-shadow: 0 2px 10px rgba(0, 0, 0, 0.22);
}

.knit-fp-album-pager[hidden] {
  display: none !important;
}

.knit-fp-album-pager__cur {
  font-variant-numeric: tabular-nums;
  font-size: 0.86rem;
}

.knit-fp-album-pager__sep {
  opacity: 0.72;
  font-weight: 500;
  padding: 0 0.05rem;
}

.knit-fp-album-pager__total {
  font-variant-numeric: tabular-nums;
  opacity: 0.9;
}

#knitFullpageImg.knit-fp-img--swipe-drag,
#knitFullpageImg.knit-fp-img--swipe-anim,
#knitFullpageImg.knit-fp-img--swipe-enter {
  will-change: transform, opacity;
}

.knit-fullpage-left.is-album-swiping {
  pointer-events: none;
}

#knitFullpage.is-work-turning {
  pointer-events: none;
  overflow: hidden;
}

#knitFullpage.is-work-turning .knit-fullpage-left-inner {
  will-change: transform;
}

/* 翻页过程保持图框，避免纱线页藏左栏导致高度跳动 */
#knitFullpage.is-work-turning[data-knit-yarn-detail="1"] .knit-fullpage-left {
  display: block !important;
}

#knitFullpage.knit-fp-work--swipe-drag .knit-fullpage-left-inner,
#knitFullpage.knit-fp-work--swipe-anim .knit-fullpage-left-inner,
#knitFullpage.knit-fp-work--enter .knit-fullpage-left-inner {
  will-change: transform;
}

.knit-fullpage-left.is-album-swiping .knit-fp-album-pager {
  opacity: 0.92;
}

/* 作品详情操作栏：私信 / 收藏 / 分享 / 查看尺寸对照表 */
.knit-fp-action-bar {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0.35rem 0.45rem;
  margin-bottom: 1rem;
  padding-bottom: 0.85rem;
  border-bottom: 1px solid var(--knit-divider, #eee);
  position: relative;
  z-index: 6;
  pointer-events: auto;
}

.knit-fp-action-bar #knitFpSizeChartBtn[hidden],
#knitFpCommentDockBtn[hidden] {
  display: none !important;
}

.knit-fp-comment-dock:not([hidden]) {
  display: flex;
  align-items: center;
  gap: 0.3rem;
  box-sizing: border-box;
  margin: 0;
  padding: 0 0.3rem 0 0.8rem;
  min-width: 7.25rem;
  min-height: 2.05rem;
  justify-content: flex-start;
  text-align: left;
  font-weight: 500;
  color: var(--knit-text-muted, #6b7280);
  background: var(--knit-input-bg, #f3f4f6);
  border: 1px solid transparent;
  border-radius: 999px;
}

.knit-fp-comment-dock-input {
  flex: 1 1 auto;
  min-width: 0;
  width: 100%;
  margin: 0;
  padding: 0.32rem 0;
  border: none;
  outline: none;
  background: transparent;
  color: var(--knit-text-body, #374151);
  font: inherit;
  font-size: 0.84rem;
  font-weight: 500;
  line-height: 1.2;
  -webkit-appearance: none;
  appearance: none;
}

.knit-fp-comment-dock-input::placeholder {
  color: var(--knit-text-muted, #6b7280);
}

.knit-fp-comment-dock-send {
  flex: 0 0 auto;
  margin: 0;
  padding: 0.2rem 0.62rem;
  border: none;
  border-radius: 999px;
  background: var(--knit-red);
  color: #fff;
  font-size: 0.74rem;
  font-weight: 650;
  line-height: 1.2;
  cursor: pointer;
  font-family: inherit;
}

.knit-fp-comment-dock-send[hidden] {
  display: none !important;
}

.knit-fp-action-bar .knit-fp-comment-dock:not([hidden]) {
  min-width: 7.25rem;
}

.knit-fp-action-dock {
  display: contents;
}

.knit-fp-header-share {
  display: none;
}

.knit-fp-action-btn {
  box-sizing: border-box;
  margin: 0;
  padding: 0.35rem 0.85rem;
  min-width: 0;
  min-height: 0;
  border: 1px solid var(--knit-control-border, #d1d5db);
  border-radius: 999px;
  background: var(--knit-control-bg, #fff);
  color: var(--knit-text-body, #374151);
  font-size: 0.82rem;
  font-weight: 600;
  letter-spacing: 0;
  white-space: nowrap;
  cursor: pointer;
  box-shadow: none;
  transition: background 0.15s, color 0.15s, border-color 0.15s;
  font-family: inherit;
  line-height: 1.2;
}

.knit-fp-action-btn:hover,
.knit-fp-action-btn:focus-visible {
  background: var(--knit-control-hover-bg, #f3f4f6);
  color: var(--knit-text-heading, #111827);
  border-color: var(--knit-control-active-border, #9ca3af);
}

.knit-fp-action-btn--active {
  background: var(--knit-red);
  color: #fff;
  border-color: var(--knit-red);
}

.knit-fp-action-btn:focus-visible {
  outline: 2px solid #fff;
  outline-offset: 2px;
}

/* 灵感详情：作品介绍下的信息区块（纱线信息 → 特征 → 织片信息） */
.knit-fp-detail-sections {
  display: flex;
  flex-direction: column;
  gap: 0;
}

.knit-fp-detail-sections[hidden] {
  display: none !important;
}

#knitFullpage[data-knit-yarn-detail="1"] .knit-fp-detail-sections {
  display: none !important;
}

.knit-fp-detail-inline {
  margin-bottom: 1rem;
  padding-bottom: 1rem;
  border-bottom: 1px solid var(--knit-divider, #f0f0f0);
}

.knit-fp-detail-inline:last-child {
  border-bottom: none;
  margin-bottom: 0.5rem;
  padding-bottom: 0;
}

.knit-fp-detail-inline--empty .knit-fp-block-title {
  color: var(--knit-text-muted);
}

.knit-fp-inline-empty,
.knit-fp-inline-empty-cell {
  margin: 0.35rem 0 0;
  font-size: var(--knit-empty-size);
  font-weight: var(--knit-empty-weight);
  letter-spacing: var(--knit-empty-ls);
  line-height: var(--knit-empty-lh);
  color: var(--knit-text-muted);
}

.knit-fp-inline-empty-cell {
  text-align: center;
  padding: 1rem 0.75rem !important;
  border: none !important;
  background: transparent !important;
  color: #9ca3af;
  font-size: 0.82rem;
}

.knit-fp-fabric-inline {
  margin-top: 0.15rem;
}

.knit-fp-fabric-line {
  margin: 0 0 0.4rem;
  font-size: 0.88rem;
  line-height: 1.55;
  color: var(--knit-text-body, #333);
}

.knit-fp-fabric-line:last-child {
  margin-bottom: 0;
}

.knit-fp-fabric-inline .knit-fp-fabric-ecc-link {
  display: block;
  margin-top: 0.35rem;
  font-size: 0.84rem;
}

.knit-fp-action-btn:disabled,
.knit-fp-action-btn[aria-disabled="true"] {
  opacity: 0.45;
  cursor: not-allowed;
}

.knit-fp-action-btn:disabled:hover,
.knit-fp-action-btn[aria-disabled="true"]:hover {
  background: var(--knit-control-bg, #fff);
  color: var(--knit-text-body, #374151);
  border-color: var(--knit-control-border, #d1d5db);
}

#knitFpSizeChartModal.knit-fp-size-chart-float {
  position: fixed;
  inset: auto;
  top: 0;
  left: 0;
  width: 0;
  height: 0;
  padding: 0;
  margin: 0;
  display: block;
  background: transparent;
  pointer-events: none;
  overflow: visible;
  z-index: 1700;
}

#knitFpSizeChartModal.knit-fp-size-chart-float[hidden] {
  display: none !important;
}

.knit-fp-size-chart-panel {
  pointer-events: auto;
  position: relative;
  display: flex;
  flex-direction: column;
  width: min(94vw, 42rem);
  height: min(88vh, 46rem);
  min-width: 20rem;
  min-height: 22rem;
  max-width: 96vw;
  max-height: 94vh;
  box-sizing: border-box;
  padding: 0;
  overflow: hidden;
  background: var(--knit-modal-bg, #fff);
  border: 1px solid var(--knit-modal-border, #e5e7eb);
  border-radius: 12px;
  box-shadow: 0 18px 48px rgba(15, 23, 42, 0.18);
}

.knit-fp-size-chart-panel.knit-dm-chat__panel--positioned {
  margin: 0;
}

.knit-fp-size-chart-panel--dock-left,
.knit-fp-size-chart-panel--dock-right {
  max-width: none;
  max-height: none;
  min-width: 0;
  min-height: 0;
  height: 100vh;
  height: 100dvh;
  border-radius: 0;
  box-shadow: none;
}

.knit-fp-size-chart-panel--dock-left {
  border-right: 1px solid var(--knit-modal-border, #e5e7eb);
  border-left: none;
  border-top: none;
  border-bottom: none;
}

.knit-fp-size-chart-panel--dock-right {
  border-left: 1px solid var(--knit-modal-border, #e5e7eb);
  border-right: none;
  border-top: none;
  border-bottom: none;
}

.knit-fp-size-chart-panel--dock-left .knit-fp-size-chart-head,
.knit-fp-size-chart-panel--dock-right .knit-fp-size-chart-head {
  cursor: grab;
}

.knit-fp-size-chart-panel--dock-left .knit-fp-size-chart-body,
.knit-fp-size-chart-panel--dock-right .knit-fp-size-chart-body {
  flex: 1 1 auto;
  min-height: 0;
  overflow: auto;
  display: flex;
  flex-direction: column;
}

.knit-fp-size-chart-panel--dock-left .knit-fp-size-chart-meta,
.knit-fp-size-chart-panel--dock-right .knit-fp-size-chart-meta {
  flex: 0 0 auto;
}

.knit-fp-size-chart-panel--dock-left .knit-size-proportion--modal,
.knit-fp-size-chart-panel--dock-right .knit-size-proportion--modal {
  margin-bottom: 0;
  flex: 1 1 auto;
  min-height: 0;
  display: flex;
  flex-direction: column;
}

.knit-fp-size-chart-panel--dock-left .knit-size-proportion__label,
.knit-fp-size-chart-panel--dock-right .knit-size-proportion__label,
.knit-fp-size-chart-panel--dock-left .knit-garment-flat-controls,
.knit-fp-size-chart-panel--dock-right .knit-garment-flat-controls {
  flex: 0 0 auto;
}

.knit-fp-size-chart-panel--dock-left .knit-fp-size-chart-resize-handles,
.knit-fp-size-chart-panel--dock-right .knit-fp-size-chart-resize-handles {
  display: none;
}

.knit-fp-size-chart-panel--dock-left .knit-fp-size-chart-zoom-viewport,
.knit-fp-size-chart-panel--dock-right .knit-fp-size-chart-zoom-viewport {
  flex: 1 1 auto;
  height: auto;
  min-height: 12rem;
}

.knit-fp-size-chart-head {
  flex: 0 0 auto;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 0.55rem;
  padding: 0.55rem 0.65rem;
  border-bottom: 1px solid var(--knit-surface-border, #e5e7eb);
  background: linear-gradient(180deg, #fafafa 0%, #f3f4f6 100%);
  cursor: grab;
  user-select: none;
  touch-action: none;
}

.knit-fp-size-chart-head.knit-fp-size-chart-head--dragging {
  cursor: grabbing;
}

.knit-fp-size-chart-panel--dragging {
  box-shadow: 0 22px 56px rgba(15, 23, 42, 0.28);
}

.knit-fp-size-chart-snap-zone {
  position: fixed;
  top: 10px;
  bottom: 10px;
  width: calc(50vw - 16px);
  pointer-events: none;
  border-radius: 14px;
  background: rgba(13, 148, 136, 0.14);
  border: 2px dashed rgba(13, 148, 136, 0.5);
  box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.28);
  opacity: 0;
  visibility: hidden;
  transition: opacity 0.12s ease, visibility 0.12s ease;
  z-index: 0;
}

.knit-fp-size-chart-snap-zone[data-side="left"] {
  left: 8px;
}

.knit-fp-size-chart-snap-zone[data-side="right"] {
  right: 8px;
}

.knit-fp-size-chart-snap-zone.is-active {
  opacity: 1;
  visibility: visible;
}

.knit-fp-size-chart-title {
  margin: 0;
  font-size: 0.95rem;
  font-weight: 700;
  color: var(--knit-text-heading, #111827);
  min-width: 0;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.knit-fp-size-chart-head-actions {
  display: flex;
  align-items: center;
  gap: 0.35rem;
  flex-shrink: 0;
}

.knit-fp-size-chart-layout-bar {
  display: inline-flex;
  align-items: center;
  gap: 0.1rem;
  padding: 0.1rem;
  border: 1px solid var(--knit-control-border, #d1d5db);
  border-radius: 8px;
  background: var(--knit-control-bg, #fff);
}

.knit-fp-size-chart-layout-btn {
  box-sizing: border-box;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 1.7rem;
  height: 1.7rem;
  margin: 0;
  padding: 0;
  border: none;
  border-radius: 6px;
  background: transparent;
  color: var(--knit-text-muted);
  cursor: pointer;
  font-family: inherit;
}

.knit-fp-size-chart-layout-btn:hover,
.knit-fp-size-chart-layout-btn:focus-visible {
  background: var(--knit-control-bg);
  color: var(--knit-text-heading);
}

.knit-fp-size-chart-layout-btn.is-active,
.knit-fp-size-chart-layout-btn[aria-pressed="true"] {
  background: #e5e7eb;
  color: var(--knit-text-heading);
}

.knit-fp-size-chart-layout-icon {
  display: block;
  width: 1rem;
  height: 0.75rem;
}

.knit-fp-size-chart-zoom-bar {
  display: inline-flex;
  align-items: center;
  gap: 0.15rem;
  padding: 0.1rem;
  border: 1px solid var(--knit-control-border, #d1d5db);
  border-radius: 8px;
  background: var(--knit-control-bg, #fff);
}

.knit-fp-size-chart-zoom-btn {
  box-sizing: border-box;
  width: 1.7rem;
  height: 1.7rem;
  margin: 0;
  padding: 0;
  border: none;
  border-radius: 6px;
  background: transparent;
  color: var(--knit-text-body);
  font-size: 1.05rem;
  font-weight: 700;
  line-height: 1;
  cursor: pointer;
  font-family: inherit;
}

.knit-fp-size-chart-zoom-btn:hover,
.knit-fp-size-chart-zoom-btn:focus-visible {
  background: var(--knit-control-bg);
  color: var(--knit-text-heading);
}

.knit-fp-size-chart-zoom-label {
  min-width: 2.6rem;
  text-align: center;
  font-size: 0.72rem;
  font-weight: 700;
  color: var(--knit-text-muted);
  font-variant-numeric: tabular-nums;
}

.knit-fp-size-chart-close {
  border: none;
  background: transparent;
  color: var(--knit-text-muted);
  font-size: 1.35rem;
  line-height: 1;
  cursor: pointer;
  padding: 0.1rem 0.35rem;
  border-radius: 6px;
}

.knit-fp-size-chart-close:hover,
.knit-fp-size-chart-close:focus-visible {
  color: var(--knit-text-heading);
  background: #e5e7eb;
}

.knit-fp-size-chart-body {
  flex: 1 1 auto;
  min-height: 0;
  overflow: auto;
  padding: 0.55rem 0.7rem 0.75rem;
  overscroll-behavior: contain;
}

.knit-fp-size-chart-meta {
  margin: 0 0 0.55rem;
  font-size: 0.84rem;
  color: var(--knit-text-body, #4b5563);
  line-height: 1.4;
}

.knit-fp-size-chart-zoom-viewport {
  width: 100%;
  height: min(42vh, 22rem);
  min-height: 14rem;
  overflow: hidden;
  border-radius: 8px;
  overscroll-behavior: contain;
  touch-action: none;
  cursor: default;
  position: relative;
  background: var(--knit-panel-bg-alt);
}

.knit-fp-size-chart-zoom-viewport--pannable {
  cursor: grab;
}

.knit-fp-size-chart-zoom-viewport--panning {
  cursor: grabbing;
  user-select: none;
}

.knit-fp-size-chart-zoom-viewport--panning * {
  cursor: grabbing !important;
  user-select: none !important;
}

.knit-fp-size-chart-zoom-viewport .knit-size-proportion__stage {
  transform-origin: center center;
  will-change: transform;
  position: relative;
}

.knit-fp-size-chart-zoom-viewport .knit-garment-flat {
  pointer-events: none;
}

.knit-fp-size-chart-panel:hover .knit-fp-size-chart-resize-handles > .knit-dm-chat__resize,
.knit-fp-size-chart-resize-handles > .knit-dm-chat__resize:hover,
.knit-fp-size-chart-resize-handles > .knit-dm-chat__resize:active {
  opacity: 0.55;
}

.knit-fp-size-chart-resize-handles {
  top: 0;
}

.knit-fp-size-chart-stage {
  display: flex;
  align-items: flex-end;
  justify-content: center;
  gap: clamp(1rem, 4vw, 2.4rem);
  min-height: 22rem;
  padding: 1rem 0.75rem 0.5rem;
  border: 1px solid var(--knit-surface-border, #e5e7eb);
  border-radius: 12px;
  background:
    linear-gradient(180deg, #fafafa 0%, #f3f4f6 100%);
  overflow: auto;
}

.knit-fp-size-chart-col {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 0.55rem;
  min-width: 0;
}

.knit-fp-size-chart-figure-wrap {
  display: flex;
  align-items: flex-end;
  justify-content: center;
  flex: 0 0 auto;
}

.knit-fp-size-chart-figure {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: contain;
  object-position: bottom center;
  user-select: none;
  -webkit-user-drag: none;
}

.knit-fp-size-chart-figure--garment {
  object-fit: contain;
  border-radius: 6px;
  box-shadow: 0 2px 10px rgba(15, 23, 42, 0.12);
  background: var(--knit-panel-bg);
  border: 1px solid rgba(15, 23, 42, 0.08);
}

.knit-fp-size-chart-caption {
  font-size: 0.78rem;
  font-weight: 600;
  color: var(--knit-text-muted);
  text-align: center;
  white-space: nowrap;
}

@media (max-width: 520px) {
  .knit-fp-size-chart-stage {
    min-height: 18rem;
    gap: 0.75rem;
    padding: 0.75rem 0.45rem 0.35rem;
  }

  .knit-fp-size-chart-caption {
    white-space: normal;
    max-width: 8.5rem;
  }
}

.knit-fp-inline-yarn-board {
  position: relative;
  overflow-x: auto;
  overflow-y: visible;
  -webkit-overflow-scrolling: touch;
  margin-top: 0.35rem;
  padding: 0.5rem;
  background: var(--knit-page-bg-alt, #f3f4f6);
  border: 1px solid var(--knit-control-border, #d1d5db);
  border-radius: 12px;
  box-shadow: 0 1px 2px rgba(15, 23, 42, 0.06);
}

.knit-fp-yarn-fold-btn {
  display: none;
}

.knit-fp-fabric-inline .knit-fp-feature-keyword {
  display: inline-flex;
  margin: 0 0.35rem 0.35rem 0;
}

#knitFullpage[data-knit-yarn-detail="1"] .knit-fp-detail-inline {
  display: none !important;
}

/* 作品详情工具标签（保留兼容，灵感详情已改为内联区块） */
.knit-fp-img-tabs {
  display: flex;
  flex-direction: row;
  align-items: center;
  gap: 0.35rem;
  width: auto;
  margin: 0;
}

.knit-fp-img-tabs .knit-fp-img-tab {
  width: auto;
}

.knit-fp-img-tab {
  box-sizing: border-box;
  margin: 0;
  padding: 0.35rem 0.85rem;
  min-width: 0;
  min-height: 0;
  border: 1px solid var(--knit-control-border, #d1d5db);
  border-radius: 999px;
  background: var(--knit-control-bg, #fff);
  color: var(--knit-text-body, #374151);
  font-size: 0.82rem;
  font-weight: 600;
  letter-spacing: 0;
  writing-mode: horizontal-tb;
  text-orientation: mixed;
  white-space: nowrap;
  cursor: pointer;
  box-shadow: none;
  transform: none;
  opacity: 1;
  transition: background 0.15s, color 0.15s, border-color 0.15s;
  font-family: inherit;
  line-height: 1.2;
}

.knit-fp-img-tabs:hover .knit-fp-img-tab,
.knit-fp-img-tab:hover,
.knit-fp-img-tab:focus-visible {
  transform: none;
  opacity: 1;
}

.knit-fp-img-tab:hover {
  background: var(--knit-control-hover-bg, #f3f4f6);
  color: var(--knit-text-heading, #111827);
  border-color: var(--knit-control-active-border, #9ca3af);
}

.knit-fp-img-tab[aria-selected="true"] {
  background: var(--knit-red);
  color: #fff;
  border-color: var(--knit-red);
  box-shadow: none;
  transform: none;
  opacity: 1;
}

.knit-fp-img-tab--active {
  background: var(--knit-red);
  color: #fff;
  border-color: var(--knit-red);
}

.knit-fp-img-tab:focus-visible {
  outline: 2px solid #fff;
  outline-offset: 2px;
}

.knit-fullpage-left.is-pan-ready {
  cursor: grab;
}

.knit-fullpage-left.is-dragging {
  cursor: grabbing;
}

.knit-fullpage-img {
  max-width: 100%;
  max-height: 100%;
  width: auto;
  height: auto;
  object-fit: contain;
  display: block;
  transform-origin: center center;
  will-change: transform;
  -webkit-user-drag: element;
}

.knit-fullpage-video[hidden] {
  display: none !important;
}

.knit-fullpage-right {
  flex: 1 1 50%;
  min-width: 0;
  height: 100%;
  position: relative;
  background: var(--knit-panel-bg-alt);
  border-left: 1px solid var(--knit-panel-border);
  display: flex;
  flex-direction: column;
  color: var(--knit-view-text);
}

.knit-fullpage-right.knit-fp-details--emphasize {
  animation: knit-fp-details-emphasize 0.45s ease;
}

@keyframes knit-fp-details-emphasize {
  0% {
    box-shadow: inset 0 0 0 0 transparent;
  }
  40% {
    box-shadow: inset 3px 0 0 0 var(--knit-chrome-active, #c45c26);
  }
  100% {
    box-shadow: inset 0 0 0 0 transparent;
  }
}

.knit-fp-side-scroll {
  flex: 1;
  min-height: 0;
  overflow-y: auto;
  overflow-x: hidden;
  padding: 1rem 1rem 1.25rem;
  -webkit-overflow-scrolling: touch;
}

.knit-fp-author {
  display: flex;
  flex-direction: row;
  align-items: center;
  gap: 0.65rem;
  margin-bottom: 1.1rem;
  padding-bottom: 1rem;
  border-bottom: 1px solid var(--knit-divider, #eee);
}

.knit-fp-author-avatar {
  flex-shrink: 0;
  width: 2.5rem;
  height: 2.5rem;
  border-radius: 50%;
  background: linear-gradient(145deg, #9aa8b8, #6b7c8f);
  border: 1px solid rgba(0, 0, 0, 0.06);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.25);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  overflow: hidden;
  padding: 0;
  margin: 0;
  cursor: pointer;
  font: inherit;
  color: #fff;
  line-height: 1;
}

.knit-fp-author-avatar:focus-visible {
  outline: 2px solid #6b9fff;
  outline-offset: 2px;
}

.knit-fp-author-avatar--photo {
  background: #e5e7eb;
  box-shadow: none;
}

.knit-fp-author-avatar-img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
  border-radius: 50%;
}

.knit-fp-author-name {
  flex: 1;
  min-width: 0;
  font-size: 0.95rem;
  font-weight: 600;
  color: var(--knit-text-heading);
}

.knit-fp-follow {
  flex-shrink: 0;
  padding: 0.35rem 0.85rem;
  font-size: 0.82rem;
  font-weight: 600;
  color: var(--knit-red);
  background: var(--knit-panel-bg, #fff);
  border: 1px solid var(--knit-red);
  border-radius: 999px;
  cursor: pointer;
  transition: background 0.2s ease, color 0.2s ease, border-color 0.2s ease, transform 0.2s ease;
}

.knit-fp-follow:hover {
  background: var(--knit-red);
  color: #fff;
}

.knit-fp-follow--active {
  background: var(--knit-red);
  color: #fff;
}

.knit-fp-follow--pop {
  animation: knit-fp-follow-pop 0.28s ease;
}

@keyframes knit-fp-follow-pop {
  0% {
    transform: scale(1);
  }
  40% {
    transform: scale(1.08);
  }
  100% {
    transform: scale(1);
  }
}

.knit-fp-follow:disabled {
  opacity: 1;
  cursor: pointer;
}

.knit-fp-author-actions {
  display: flex;
  flex-direction: column;
  gap: 0.35rem;
  align-items: flex-end;
  margin-left: auto;
}

#knitFpFollowBtn {
  margin-left: auto;
}

.knit-fp-favorite {
  flex-shrink: 0;
  padding: 0.35rem 0.85rem;
  font-size: 0.82rem;
  font-weight: 600;
  color: #d97706;
  background: var(--knit-panel-bg, #fff);
  border: 1px solid #d97706;
  border-radius: 999px;
  cursor: pointer;
  transition: background 0.15s, color 0.15s;
}

.knit-fp-favorite:hover {
  background: #d97706;
  color: #fff;
}

.knit-fp-favorite--active {
  background: #d97706;
  color: #fff;
}

.knit-fp-favorite:disabled {
  opacity: 0.65;
  cursor: wait;
}

.knit-favorite-modal__panel {
  width: min(92vw, 26rem);
}

.knit-favorite-modal__field {
  display: flex;
  flex-direction: column;
  gap: 0.3rem;
  margin-top: 0.55rem;
}

.knit-favorite-modal__field > label,
.knit-favorite-modal__label {
  font-size: 0.8rem;
  color: var(--knit-text-muted);
}

.knit-favorite-modal__checklist {
  display: flex;
  flex-direction: column;
  gap: 0.28rem;
  max-height: 11.5rem;
  overflow: auto;
  padding: 0.4rem 0.45rem;
  border: 1px solid var(--knit-control-border);
  border-radius: 8px;
  background: var(--knit-input-bg);
}

.knit-favorite-modal__check {
  display: flex;
  align-items: center;
  gap: 0.4rem;
  min-width: 0;
  font-size: 0.84rem;
  color: var(--knit-input-text);
  cursor: pointer;
  padding: 0.12rem 0.1rem;
}

.knit-favorite-modal__check input {
  flex: 0 0 auto;
}

.knit-favorite-modal__check-name {
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.knit-favorite-modal__check-tag {
  flex: 0 0 auto;
  margin-left: auto;
  font-size: 0.68rem;
  color: var(--knit-text-muted);
}

.knit-favorite-modal__checklist-empty {
  margin: 0;
  font-size: 0.8rem;
  color: var(--knit-text-muted);
}

.knit-share-target-bar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 0.6rem;
  margin: 0 0 0.35rem;
}

.knit-share-target-all {
  display: inline-flex;
  align-items: center;
  gap: 0.35rem;
  font-size: 0.8rem;
  color: var(--knit-text-body);
  cursor: pointer;
  user-select: none;
}

.knit-share-target-count {
  font-size: 0.76rem;
  color: var(--knit-text-muted);
}

.knit-share-target-list {
  max-height: 16.5rem;
}

.knit-share-target-list .knit-favorite-modal__check {
  min-height: 2.35rem;
  padding: 0.22rem 0.12rem;
  gap: 0.5rem;
}

.knit-share-target-list .knit-msg-avatar {
  width: 1.85rem;
  height: 1.85rem;
  font-size: 0.72rem;
}

.knit-favorite-modal__select,
.knit-favorite-modal__input {
  width: 100%;
  border: 1px solid var(--knit-control-border);
  border-radius: 8px;
  padding: 0.46rem 0.56rem;
  font-size: 0.84rem;
  box-sizing: border-box;
  background: var(--knit-input-bg);
  color: var(--knit-input-text);
}

.knit-favorite-modal__cancel {
  border: 1px solid var(--knit-control-border);
  border-radius: 999px;
  background: var(--knit-control-bg);
  color: var(--knit-control-text);
  cursor: pointer;
  font-weight: 600;
  padding: 0.36rem 0.8rem;
}

.knit-dm-modal__panel {
  width: min(92vw, 34rem);
}

.knit-dm-modal__input {
  resize: vertical;
  min-height: 4.5rem;
}

.knit-dm-modal__hint {
  margin: 0.45rem 0 0;
  font-size: var(--knit-hint-size);
  font-weight: var(--knit-hint-weight);
  letter-spacing: var(--knit-hint-ls);
  line-height: var(--knit-hint-lh);
  color: var(--knit-text-muted);
}

/* ---------- 私信聊天弹窗 ---------- */
.knit-dm-chat__panel {
  --knit-dm-chat-header-h: 3.25rem;
  display: flex;
  flex-direction: column;
  position: relative;
  width: min(92vw, 22rem);
  height: min(88vh, 36rem);
  min-width: 17.5rem;
  min-height: 20rem;
  max-width: 92vw;
  max-height: 92vh;
  padding: 0;
  overflow: hidden;
  background: var(--knit-dm-bg);
  border: 1px solid var(--knit-dm-border);
}

.knit-dm-chat__header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 0.65rem;
  padding: 0.75rem 0.85rem;
  border-bottom: 1px solid var(--knit-dm-border);
  background: var(--knit-dm-header-bg);
  flex-shrink: 0;
  cursor: grab;
  touch-action: none;
  user-select: none;
  position: relative;
  z-index: 4;
}

.knit-dm-chat__header--dragging {
  cursor: grabbing;
}

/* 拖到右边缘即将最小化时的提示 */
.knit-dm-chat__panel--dock-hint {
  outline: 2px solid rgba(45, 212, 191, 0.55);
  outline-offset: -2px;
  box-shadow:
    0 0 0 1px rgba(45, 212, 191, 0.25),
    0 18px 48px rgba(15, 23, 42, 0.28),
    12px 0 36px rgba(45, 212, 191, 0.22);
}

#knitFavoriteFloatModal .knit-fav-float__panel.knit-dm-chat__panel--dock-hint {
  outline-color: rgba(245, 158, 11, 0.7);
  box-shadow:
    0 0 0 1px rgba(245, 158, 11, 0.35),
    0 18px 48px rgba(146, 64, 14, 0.22),
    12px 0 36px rgba(245, 158, 11, 0.28);
}

.knit-dm-chat__peer {
  display: flex;
  align-items: center;
  gap: 0.55rem;
  min-width: 0;
}

.knit-dm-chat__peer-text {
  min-width: 0;
}

.knit-dm-chat__title {
  margin: 0;
  font-size: 0.95rem;
  font-weight: 700;
  color: var(--knit-dm-title);
  line-height: 1.3;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.knit-dm-chat__sub {
  margin: 0.12rem 0 0;
  font-size: 0.72rem;
  color: var(--knit-dm-sub);
  line-height: 1.3;
}

.knit-dm-chat__avatar {
  flex-shrink: 0;
  width: 2rem;
  height: 2rem;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 0.78rem;
  font-weight: 700;
  color: #fff;
  background: #5c7a9a;
  border: 1px solid rgba(0, 0, 0, 0.06);
}

button.knit-dm-chat__avatar {
  appearance: none;
  -webkit-appearance: none;
  margin: 0;
  padding: 0;
  font-family: inherit;
  line-height: 1;
  cursor: pointer;
}

.knit-dm-chat__avatar--clickable {
  cursor: pointer;
}

#knitDmModal .knit-dm-chat__panel:not(.knit-dm-chat__panel--minimized) > .knit-dm-chat__header .knit-dm-chat__peer-text {
  position: absolute;
  left: 50%;
  top: 50%;
  transform: translate(-50%, -50%);
  max-width: calc(100% - 7.25rem);
  text-align: center;
  pointer-events: none;
}

#knitDmModal .knit-dm-chat__panel:not(.knit-dm-chat__panel--minimized) > .knit-dm-chat__header .knit-dm-chat__title {
  text-align: center;
}

#knitDmModal .knit-dm-chat__panel:not(.knit-dm-chat__panel--minimized) > .knit-dm-chat__header .knit-dm-chat__sub {
  display: none;
}

#knitDmModal .knit-dm-chat__panel:not(.knit-dm-chat__panel--minimized) > .knit-dm-chat__header .knit-dm-chat__avatar,
#knitDmModal .knit-dm-chat__panel:not(.knit-dm-chat__panel--minimized) > .knit-dm-chat__header #knitDmModalAvatar {
  display: none !important;
}

#knitDmModal .knit-dm-chat__panel:not(.knit-dm-chat__panel--minimized) > .knit-dm-chat__header .knit-dm-chat__close--leading {
  flex-shrink: 0;
  margin-right: 0.15rem;
}

.knit-dm-chat__avatar.knit-fp-c-avatar--a {
  background: #5c7a9a;
}

.knit-dm-chat__avatar.knit-fp-c-avatar--b {
  background: #6a8f5c;
}

.knit-dm-chat__avatar.knit-fp-c-avatar--c {
  background: #9a7a5c;
}

.knit-dm-chat__avatar--photo {
  background: #e5e7eb;
  overflow: hidden;
  padding: 0;
}

.knit-dm-chat__avatar-img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
  border-radius: inherit;
}

.knit-dm-chat__body {
  flex: 1 1 auto;
  min-height: 0;
  display: flex;
  flex-direction: column;
  position: relative;
}

.knit-dm-chat__header-actions {
  display: flex;
  align-items: center;
  gap: 0.1rem;
  flex-shrink: 0;
  position: relative;
  z-index: 10;
  pointer-events: auto;
}

.knit-dm-chat__settings-icon {
  width: 1rem;
  height: 1rem;
  display: block;
  pointer-events: none;
}

.knit-dm-settings-menu {
  position: absolute;
  top: calc(100% + 0.25rem);
  right: 0;
  z-index: 20;
  min-width: 9.5rem;
  padding: 0.28rem 0;
  background: var(--knit-panel-bg);
  border: 1px solid #e5e7eb;
  border-radius: 10px;
  box-shadow: 0 8px 24px rgba(15, 23, 42, 0.12);
}

.knit-dm-settings-menu[hidden] {
  display: none !important;
}

/* 浮层挂到 body，须高于私信/收藏悬浮窗（z-index: 1600） */
.knit-dm-settings-menu.knit-dm-settings-menu--floating {
  position: fixed;
  top: auto;
  right: auto;
  z-index: 15000;
  color: var(--knit-text-heading);
  pointer-events: auto;
}

.knit-dm-settings-menu__btn {
  display: block;
  width: 100%;
  padding: 0.45rem 0.75rem;
  border: 0;
  background: transparent;
  text-align: left;
  font-size: 0.82rem;
  font-family: inherit;
  color: var(--knit-text-heading);
  cursor: pointer;
}

.knit-dm-settings-menu__btn:hover {
  background: var(--knit-control-bg);
}

.knit-dm-settings-menu__btn--danger {
  color: #b91c1c;
}

.knit-dm-settings-menu__btn.is-confirm-pending {
  background: #fef3c7;
  color: #92400e;
  font-weight: 600;
}

.knit-dm-settings-menu__btn--danger.is-confirm-pending {
  color: #b45309;
}

.knit-dm-settings-menu__btn:disabled {
  opacity: 0.45;
  cursor: default;
}

.knit-dm-settings-menu__btn:disabled:hover {
  background: transparent;
}

.knit-dm-vis-modal__panel {
  width: min(440px, 100%);
  max-height: min(78vh, 560px);
  display: flex;
  flex-direction: column;
}

.knit-dm-vis-list {
  flex: 1;
  min-height: 0;
  overflow: auto;
  margin: 0.55rem 0 0;
  border: 1px solid #e5e7eb;
  border-radius: 10px;
}

.knit-dm-vis-item {
  display: flex;
  align-items: center;
  gap: 0.55rem;
  padding: 0.45rem 0.55rem;
  border-bottom: 1px solid #f0f0f0;
}

.knit-dm-vis-item:last-child {
  border-bottom: 0;
}

.knit-dm-vis-item__thumb {
  width: 44px;
  height: 44px;
  object-fit: cover;
  border-radius: 6px;
  flex-shrink: 0;
  background: var(--knit-control-bg);
}

.knit-dm-vis-item__main {
  flex: 1;
  min-width: 0;
}

.knit-dm-vis-item__intro {
  margin: 0;
  font-size: 0.78rem;
  color: var(--knit-text-body);
  line-height: 1.35;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
}

.knit-dm-vis-item__meta {
  margin: 0.15rem 0 0;
  font-size: 0.68rem;
  color: var(--knit-text-muted);
}

.knit-dm-vis-item__check {
  flex-shrink: 0;
  display: inline-flex;
  align-items: center;
  gap: 0.25rem;
  font-size: 0.72rem;
  color: var(--knit-text-body);
  cursor: pointer;
  white-space: nowrap;
}

.knit-dm-vis-empty {
  margin: 0.65rem 0 0;
  text-align: center;
  color: var(--knit-text-muted);
  font-size: var(--knit-empty-size);
  font-weight: var(--knit-empty-weight);
  letter-spacing: var(--knit-empty-ls);
  line-height: var(--knit-empty-lh);
}

.knit-mine-delete-panel:has(.knit-mine-blocklist) {
  width: min(420px, 100%);
  max-height: min(88vh, 640px);
  overflow: auto;
}

.knit-mine-blocklist {
  margin-top: 0.75rem;
  padding-top: 0.65rem;
  border-top: 1px solid var(--knit-panel-border);
}

.knit-mine-blocklist-title {
  margin: 0;
  font-size: 0.88rem;
  font-weight: 700;
}

.knit-mine-blocklist-hint {
  margin: 0.28rem 0 0.45rem;
  font-size: var(--knit-hint-size);
  font-weight: var(--knit-hint-weight);
  letter-spacing: var(--knit-hint-ls);
  color: var(--knit-text-muted);
  line-height: var(--knit-hint-lh);
}

.knit-mine-blocklist-list {
  list-style: none;
  margin: 0;
  padding: 0;
  max-height: 160px;
  overflow: auto;
  border: 1px solid #e5e7eb;
  border-radius: 8px;
}

.knit-mine-blocklist-item {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 0.45rem;
  padding: 0.42rem 0.55rem;
  border-bottom: 1px solid #f0f0f0;
}

.knit-mine-blocklist-item:last-child {
  border-bottom: 0;
}

.knit-mine-blocklist-name {
  font-size: 0.82rem;
  color: var(--knit-text-heading);
}

.knit-mine-blocklist-unblock {
  border: 1px solid #d1d5db;
  background: var(--knit-panel-bg);
  border-radius: 6px;
  padding: 0.18rem 0.45rem;
  font-size: 0.72rem;
  font-family: inherit;
  cursor: pointer;
}

.knit-mine-blocklist-unblock:hover {
  background: #f9fafb;
}

.knit-mine-blocklist-empty {
  margin: 0.35rem 0 0;
  font-size: var(--knit-empty-size);
  font-weight: var(--knit-empty-weight);
  letter-spacing: var(--knit-empty-ls);
  line-height: var(--knit-empty-lh);
  color: var(--knit-text-muted);
  text-align: center;
}

.knit-dm-chat__settings,
.knit-dm-chat__layout,
.knit-dm-chat__minimize,
.knit-dm-chat__close {
  flex-shrink: 0;
  width: 1.75rem;
  height: 1.75rem;
  border: none;
  border-radius: 50%;
  background: transparent;
  color: var(--knit-dm-icon);
  font-size: 1.15rem;
  line-height: 1;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: background 0.18s ease, color 0.18s ease, transform 0.22s cubic-bezier(0.34, 1.4, 0.64, 1);
  pointer-events: auto;
  touch-action: manipulation;
  position: relative;
  z-index: 11;
}

.knit-dm-chat__settings:hover,
.knit-dm-chat__settings[aria-expanded="true"],
.knit-dm-chat__settings:focus-visible {
  background: var(--knit-dm-icon-hover-bg);
  color: var(--knit-dm-icon-hover);
}

.knit-dm-chat__settings:disabled {
  opacity: 0.35;
  cursor: not-allowed;
}

.knit-dm-chat__settings:active:not(:disabled) {
  transform: scale(0.92);
}

.knit-dm-chat__layout-icon {
  width: 1rem;
  height: 1rem;
  display: block;
}

.knit-dm-chat__layout-icon--fullscreen {
  display: none;
}

.knit-dm-chat__layout.is-mode-float .knit-dm-chat__layout-icon--float,
.knit-dm-chat__layout.is-mode-default .knit-dm-chat__layout-icon--float {
  display: block;
}

.knit-dm-chat__layout.is-mode-float .knit-dm-chat__layout-icon--fullscreen,
.knit-dm-chat__layout.is-mode-default .knit-dm-chat__layout-icon--fullscreen {
  display: none;
}

.knit-dm-chat__layout.is-mode-fullscreen .knit-dm-chat__layout-icon--float {
  display: none;
}

.knit-dm-chat__layout.is-mode-fullscreen .knit-dm-chat__layout-icon--fullscreen {
  display: block;
}

.knit-dm-chat__layout {
  opacity: 1;
  pointer-events: auto;
  transform: scale(1);
}

.knit-dm-chat__layout:hover,
.knit-dm-chat__layout:focus-visible,
.knit-dm-chat__layout.is-active {
  background: var(--knit-dm-icon-hover-bg);
  color: var(--knit-dm-icon-hover);
}

.knit-dm-chat__layout:active {
  transform: scale(0.92);
}

.knit-dm-chat__layout.is-active {
  color: #fbbf24;
}

.knit-dm-chat__minimize-icon {
  width: 1rem;
  height: 1rem;
  display: block;
  pointer-events: none;
  flex-shrink: 0;
}

.knit-dm-chat__minimize-icon--expand {
  display: none;
}

.knit-dm-chat__minimize:hover,
.knit-dm-chat__close:hover {
  background: var(--knit-dm-icon-hover-bg);
  color: var(--knit-dm-icon-hover);
}

.knit-dm-chat__minimize:active {
  transform: scale(0.92);
}

.knit-dm-chat__panel--minimized .knit-dm-chat__minimize-icon--collapse {
  display: none;
}

.knit-dm-chat__panel--minimized .knit-dm-chat__minimize-icon--expand {
  display: block;
}

.knit-dm-chat__messages {
  flex: 1 1 0;
  min-height: 0;
  max-height: 100%;
  overflow-x: hidden;
  overflow-y: auto;
  -webkit-overflow-scrolling: touch;
  overscroll-behavior: contain;
  padding: 0.75rem 0.65rem;
  background: var(--knit-dm-messages-bg);
}

.knit-dm-chat__messages-inner {
  display: flex;
  flex-direction: column;
  justify-content: flex-start;
  gap: 0.85rem;
  min-height: 100%;
}

.knit-dm-chat__empty {
  margin: auto;
  text-align: center;
  font-size: var(--knit-empty-size);
  font-weight: var(--knit-empty-weight);
  letter-spacing: var(--knit-empty-ls);
  line-height: var(--knit-empty-lh);
  color: var(--knit-text-muted);
  padding: 1.5rem 0.5rem;
}

.knit-dm-chat__row {
  display: flex;
  align-items: flex-start;
  gap: 0.5rem;
  max-width: 100%;
  flex-shrink: 0;
}

.knit-dm-chat__row--peer {
  justify-content: flex-start;
}

.knit-dm-chat__row--self {
  justify-content: flex-end;
}

.knit-dm-chat__row .knit-dm-chat__avatar {
  width: 2.25rem;
  height: 2.25rem;
  font-size: 0.72rem;
  border-radius: 50%;
  margin-top: 2px;
}

.knit-dm-chat__bubble-wrap {
  display: flex;
  flex-direction: column;
  max-width: min(72%, 16rem);
  min-width: 0;
}

.knit-dm-chat__row--self .knit-dm-chat__bubble-wrap {
  align-items: flex-end;
}

.knit-dm-chat__row--peer .knit-dm-chat__bubble-wrap {
  align-items: flex-start;
}

.knit-dm-chat__bubble {
  position: relative;
  padding: 0.52rem 0.68rem;
  border-radius: 6px;
  font-size: 0.86rem;
  line-height: 1.5;
  white-space: pre-wrap;
  word-break: break-word;
}

.knit-dm-chat__row--peer .knit-dm-chat__bubble {
  background: var(--knit-dm-peer-bubble);
  color: var(--knit-dm-peer-text);
  border-top-left-radius: 2px;
}

.knit-dm-chat__row--peer .knit-dm-chat__bubble::before {
  content: "";
  position: absolute;
  left: -5px;
  top: 12px;
  width: 0;
  height: 0;
  border-style: solid;
  border-width: 5px 5px 5px 0;
  border-color: transparent var(--knit-dm-peer-bubble) transparent transparent;
}

.knit-dm-chat__row--self .knit-dm-chat__bubble {
  background: #07c160;
  color: #000;
  border-top-right-radius: 2px;
}

.knit-dm-chat__row--self .knit-dm-chat__bubble::after {
  content: "";
  position: absolute;
  right: -5px;
  top: 12px;
  width: 0;
  height: 0;
  border-style: solid;
  border-width: 5px 0 5px 5px;
  border-color: transparent transparent transparent #07c160;
}

.knit-dm-chat__time {
  margin-top: 0.22rem;
  font-size: 0.68rem;
  color: var(--knit-dm-time);
  line-height: 1.2;
}

.knit-dm-chat__send-status {
  margin-top: 0.2rem;
  border: none;
  background: transparent;
  padding: 0;
  font: inherit;
  font-size: 0.68rem;
  line-height: 1.2;
  color: var(--knit-dm-status);
  text-align: inherit;
}

.knit-dm-chat__row--self .knit-dm-chat__send-status {
  text-align: right;
}

.knit-dm-chat__send-status--pending {
  color: var(--knit-dm-status);
  cursor: default;
}

.knit-dm-chat__send-status--failed {
  color: var(--knit-dm-status-failed);
  cursor: pointer;
}

.knit-dm-chat__send-status--failed:hover {
  color: var(--knit-dm-status-failed-hover);
  text-decoration: underline;
}

.knit-dm-chat__link {
  color: var(--knit-dm-link);
  text-decoration: underline;
  text-underline-offset: 2px;
}

.knit-dm-chat__row--self .knit-dm-chat__link {
  color: #0a4d8c;
}

.knit-dm-chat__bubble--share {
  padding: 0;
  overflow: hidden;
  min-width: min(100%, 11.5rem);
}

.knit-dm-chat__share-card {
  display: flex;
  flex-direction: column;
  gap: 0;
  min-width: 11.5rem;
  max-width: 14rem;
}

.knit-dm-chat__share-cover-btn {
  display: block;
  position: relative;
  width: 100%;
  aspect-ratio: 3 / 4;
  padding: 0;
  margin: 0;
  border: none;
  background: #111;
  cursor: pointer;
  overflow: hidden;
  line-height: 0;
}

.knit-dm-chat__share-cover-btn:disabled {
  cursor: default;
}

.knit-dm-chat__share-cover {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
  background: #1a1a1a;
}

.knit-dm-chat__share-cover-placeholder {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 0.76rem;
  color: #9ca3af;
  background: #222;
  line-height: 1.35;
}

.knit-dm-chat__share-cover[hidden],
.knit-dm-chat__share-cover-placeholder[hidden] {
  display: none !important;
}

.knit-dm-chat__share-cover-btn--ready:hover .knit-dm-chat__share-cover {
  opacity: 0.92;
}

.knit-dm-chat__share-author {
  position: absolute;
  left: 0.42rem;
  bottom: 0.42rem;
  z-index: 2;
  display: inline-flex;
  align-items: center;
  gap: 0.32rem;
  max-width: calc(100% - 0.84rem);
  padding: 0.16rem 0.42rem 0.16rem 0.16rem;
  border-radius: 999px;
  background: rgba(17, 17, 17, 0.62);
  color: #fff;
  pointer-events: none;
}

.knit-dm-chat__share-author[hidden] {
  display: none !important;
}

.knit-dm-chat__share-author-ava,
.knit-dm-chat__share-author .knit-msg-avatar {
  width: 1.35rem;
  height: 1.35rem;
  font-size: 0.62rem;
  flex: 0 0 auto;
}

.knit-dm-chat__share-author-name {
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  font-size: 0.7rem;
  font-weight: 600;
  line-height: 1.2;
}

.knit-dm-chat__share-body {
  display: flex;
  flex-direction: column;
  gap: 0.38rem;
  padding: 0.52rem 0.68rem 0.58rem;
}

.knit-dm-chat__share-title {
  font-size: 0.84rem;
  font-weight: 600;
  line-height: 1.45;
  white-space: pre-wrap;
}

.knit-dm-chat__share-open {
  align-self: flex-start;
  border: none;
  border-radius: 8px;
  padding: 0.32rem 0.62rem;
  font-size: 0.78rem;
  font-weight: 600;
  color: #fff;
  background: #3b82f6;
  cursor: pointer;
}

.knit-dm-chat__share-open:hover {
  background: #2563eb;
}

.knit-dm-chat__share-note {
  font-size: 0.8rem;
  color: inherit;
  opacity: 0.85;
  padding-top: 0.2rem;
  border-top: 1px dashed var(--knit-dm-share-note-border);
}

.knit-dm-chat__row--self .knit-dm-chat__share-note {
  border-top-color: rgba(0, 0, 0, 0.12);
}

.knit-dm-chat__status {
  margin: 0;
  padding: 0.28rem 0.75rem 0;
  font-size: 0.74rem;
  color: #d97706;
  flex-shrink: 0;
}

.knit-dm-chat__status:empty {
  display: none;
}

.knit-dm-chat__composer {
  display: flex;
  flex-direction: column;
  align-items: stretch;
  gap: 0;
  padding: 0;
  border-top: 1px solid var(--knit-dm-border);
  background: var(--knit-dm-composer-bg);
  flex-shrink: 0;
  transition: background 0.18s ease, outline-color 0.18s ease;
}

.knit-dm-chat__composer-row {
  display: flex;
  align-items: flex-end;
  gap: 0.4rem;
  padding: 0.55rem 0.65rem;
}

#knitDmModal .knit-dm-chat__panel--drop-target {
  outline: 2px dashed #07c160;
  outline-offset: -2px;
  box-shadow:
    inset 0 0 0 1px rgba(7, 193, 96, 0.35),
    0 12px 36px rgba(0, 0, 0, 0.35);
}

#knitDmModal .knit-dm-chat__panel--drop-target .knit-dm-chat__messages {
  background: rgba(7, 193, 96, 0.06);
}

#knitGrid.knit-grid--share-ready > .knit-card,
#knitGrid .knit-card[data-knit-share-drag="1"] {
  cursor: grab;
}

#knitGrid.knit-grid--share-ready > .knit-card .knit-cell--img img,
#knitGrid .knit-card[data-knit-share-drag="1"] .knit-cell--img img {
  pointer-events: auto;
  -webkit-user-drag: none;
  user-select: none;
}

#knitGrid.knit-grid--share-ready > .knit-card:active,
#knitGrid .knit-card[data-knit-share-drag="1"]:active,
#knitGrid .knit-card.knit-card--share-dragging {
  cursor: grabbing;
  opacity: 0.72;
}

#knitFavoriteList .knit-favorite-item[data-knit-share-drag="1"],
#knitFavoriteFloatList .knit-fav-float__item[data-knit-share-drag="1"],
#knitFavoriteList .knit-favorite-folder-head[data-knit-share-drag="1"] {
  cursor: grab;
}

#knitFavoriteList .knit-favorite-item[data-knit-share-drag="1"] .knit-favorite-thumb,
#knitFavoriteFloatList .knit-fav-float__item[data-knit-share-drag="1"] .knit-fav-float__thumb {
  pointer-events: auto;
  -webkit-user-drag: none;
  user-select: none;
}

#knitFavoriteList .knit-favorite-item[data-knit-share-drag="1"]:active,
#knitFavoriteList .knit-favorite-item.knit-favorite-item--share-dragging,
#knitFavoriteFloatList .knit-fav-float__item[data-knit-share-drag="1"]:active,
#knitFavoriteFloatList .knit-fav-float__item.knit-fav-float__item--share-dragging,
#knitFavoriteList .knit-favorite-folder-head[data-knit-share-drag="1"]:active,
#knitFavoriteList .knit-favorite-folder-head.knit-favorite-folder-head--share-dragging {
  cursor: grabbing;
  opacity: 0.72;
}

.knit-dm-chat__input {
  flex: 1;
  min-width: 0;
  border: none;
  border-radius: 6px;
  padding: 0.48rem 0.72rem;
  font-size: 16px;
  line-height: 1.45;
  resize: none;
  min-height: 2.2rem;
  max-height: 6rem;
  background: var(--knit-dm-input-bg);
  color: var(--knit-dm-input-text);
  outline: none;
  font-family: inherit;
}

.knit-dm-chat__input::placeholder {
  color: var(--knit-dm-input-placeholder);
}

.knit-dm-chat__input:focus {
  background: var(--knit-dm-input-focus-bg);
  box-shadow: none;
}

.knit-dm-chat__send {
  flex-shrink: 0;
  border: none;
  border-radius: 6px;
  padding: 0.45rem 0.85rem;
  font-size: 0.84rem;
  font-weight: 600;
  color: #000;
  background: #07c160;
  cursor: pointer;
}

.knit-dm-chat__send:hover:not(:disabled) {
  background: #06ad56;
}

.knit-dm-chat__send:disabled {
  opacity: 0.5;
  cursor: not-allowed;
}

.knit-dm-chat__image-btn {
  flex-shrink: 0;
  width: 2.2rem;
  height: 2.2rem;
  border: none;
  border-radius: 6px;
  background: var(--knit-dm-tool-bg);
  color: var(--knit-dm-tool-text);
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: background 0.18s ease, color 0.18s ease;
}

.knit-dm-chat__image-btn:hover:not(:disabled),
.knit-dm-chat__image-btn:focus-visible {
  background: var(--knit-dm-tool-hover-bg);
  color: var(--knit-dm-tool-hover-text);
}

.knit-dm-chat__image-btn:disabled {
  opacity: 0.45;
  cursor: not-allowed;
}

.knit-dm-chat__image-btn-icon {
  width: 1.15rem;
  height: 1.15rem;
  display: block;
}

.knit-dm-chat__tool-btn {
  flex-shrink: 0;
  width: 2.2rem;
  height: 2.2rem;
  border: none;
  border-radius: 6px;
  background: var(--knit-dm-tool-bg);
  color: var(--knit-dm-tool-text);
  cursor: pointer;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 0;
}

.knit-dm-chat__tool-btn svg {
  width: 1.15rem;
  height: 1.15rem;
  display: block;
  transition: transform 0.18s ease;
}

.knit-dm-chat__plus-btn[aria-expanded="true"] svg {
  transform: rotate(45deg);
}

html[data-device="desktop"] .knit-dm-chat__plus-btn {
  display: none !important;
}

html[data-device="desktop"] .knit-dm-chat__tool-tile {
  min-height: 3.35rem;
}

.knit-dm-chat__tool-btn:hover:not(:disabled) {
  background: var(--knit-dm-tool-hover-bg);
  color: var(--knit-dm-tool-hover-text);
}

.knit-dm-chat__tool-btn[aria-expanded="true"],
.knit-dm-chat__tool-btn[aria-pressed="true"],
.knit-dm-chat__tool-btn.is-recording {
  background: #07c160;
  color: #fff;
}

.knit-dm-chat__tool-btn:disabled {
  opacity: 0.45;
  cursor: not-allowed;
}

.knit-dm-chat__voice-hold {
  flex: 1;
  min-height: 2.2rem;
  border: none;
  border-radius: 6px;
  background: var(--knit-dm-voice-hold-bg);
  color: var(--knit-dm-voice-hold-text);
  font: inherit;
  font-weight: 650;
  cursor: pointer;
  user-select: none;
  -webkit-user-select: none;
  touch-action: none;
}

.knit-dm-chat__voice-hold.is-recording {
  background: #c93030;
  color: #fff;
}

.knit-dm-chat__tools {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 0.45rem;
  padding: 0.15rem 0.65rem 0.7rem;
}

.knit-dm-chat__tools[hidden] {
  display: none !important;
}

.knit-dm-chat__tool-tile {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 0.28rem;
  min-height: 4.4rem;
  border: 0;
  border-radius: 12px;
  background: var(--knit-dm-tile-bg);
  color: var(--knit-dm-tile-text);
  font: inherit;
  font-size: 0.72rem;
  cursor: pointer;
}

.knit-dm-chat__tool-tile:hover:not(:disabled) {
  background: var(--knit-dm-tile-hover-bg);
}

.knit-dm-chat__tool-tile:disabled {
  opacity: 0.45;
  cursor: not-allowed;
}

.knit-dm-chat__tool-ico {
  font-size: 1.15rem;
  line-height: 1;
}

.knit-dm-chat__voice-card,
.knit-dm-chat__call-chip {
  display: flex;
  align-items: center;
  gap: 0.45rem;
  min-width: 8.5rem;
}

.knit-dm-chat__voice-play {
  width: 1.8rem;
  height: 1.8rem;
  border: 0;
  border-radius: 999px;
  background: var(--knit-dm-voice-play-bg);
  color: inherit;
  cursor: pointer;
}

.knit-dm-chat__voice-wave {
  flex: 1;
  height: 0.35rem;
  border-radius: 999px;
  background: linear-gradient(90deg, currentColor 0 18%, transparent 18% 22%, currentColor 22% 40%, transparent 40% 44%, currentColor 44% 70%, transparent 70% 74%, currentColor 74% 100%);
  opacity: 0.55;
}

.knit-dm-chat__voice-dur {
  font-size: 0.75rem;
  opacity: 0.8;
}

.knit-dm-chat__contacts-card {
  display: grid;
  gap: 0.35rem;
  min-width: 10rem;
}

.knit-dm-chat__contact-row {
  display: flex;
  align-items: center;
  gap: 0.4rem;
  width: 100%;
  border: 0;
  border-radius: 8px;
  padding: 0.2rem 0.15rem;
  background: transparent;
  color: inherit;
  font: inherit;
  text-align: left;
  cursor: pointer;
}

.knit-dm-chat__contact-row:hover {
  background: var(--knit-dm-contact-hover);
}

.knit-dm-chat__contact-ava,
.knit-dm-pick-ava {
  width: 1.7rem;
  height: 1.7rem;
  border-radius: 999px;
  overflow: hidden;
  flex-shrink: 0;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  background: #4b5563;
  color: #fff;
  font-size: 0.72rem;
  font-weight: 700;
}

.knit-dm-chat__contact-ava img,
.knit-dm-pick-ava img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.knit-dm-pick-item-text {
  min-width: 0;
  display: grid;
  gap: 0.1rem;
}

.knit-dm-pick-modal {
  z-index: 16200;
}

.knit-dm-pick-panel {
  width: min(420px, 100%);
  max-height: min(82vh, 640px);
  display: flex;
  flex-direction: column;
}

.knit-dm-pick-head {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 0.6rem;
}

.knit-dm-pick-hint {
  margin: 0.4rem 0 0.55rem;
  color: var(--knit-text-muted);
  font-size: 0.8rem;
}

.knit-dm-pick-hint:empty {
  display: none;
}

.knit-dm-pick-list {
  overflow: auto;
  display: grid;
  gap: 0.4rem;
  min-height: 8rem;
  max-height: min(48vh, 380px);
}

.knit-dm-pick-item {
  display: flex;
  align-items: center;
  gap: 0.55rem;
  width: 100%;
  border: 1px solid var(--knit-panel-border);
  border-radius: 10px;
  padding: 0.55rem 0.65rem;
  background: var(--knit-panel-bg);
  color: var(--knit-text-heading);
  font: inherit;
  text-align: left;
  cursor: pointer;
}

.knit-dm-pick-item.is-on {
  border-color: var(--knit-black);
  box-shadow: inset 0 0 0 1px var(--knit-black);
}

.knit-dm-pick-item-title {
  font-weight: 650;
}

.knit-dm-pick-item-sub {
  color: var(--knit-text-muted);
  font-size: 0.75rem;
}

.knit-dm-call-overlay {
  position: fixed;
  inset: 0;
  z-index: 17000;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 1rem;
  background: rgba(8, 10, 14, 0.62);
  backdrop-filter: blur(10px);
}

.knit-dm-call-overlay[hidden] {
  display: none !important;
}

.knit-dm-call-card {
  width: min(340px, 100%);
  text-align: center;
  padding: 1.4rem 1.2rem 1.15rem;
  border-radius: 22px;
  background: linear-gradient(165deg, #2a2d34 0%, #16181d 100%);
  color: #f3f4f6;
  box-shadow: 0 24px 56px rgba(0, 0, 0, 0.4);
}

.knit-dm-call-kicker {
  margin: 0;
  color: rgba(243, 244, 246, 0.55);
  font-size: 0.75rem;
  letter-spacing: 0.08em;
}

.knit-dm-call-name {
  margin: 0.45rem 0 0;
  font-size: 1.25rem;
  font-weight: 700;
}

.knit-dm-call-status {
  margin: 0.35rem 0 1.1rem;
  color: rgba(243, 244, 246, 0.7);
  font-size: 0.86rem;
}

.knit-dm-call-actions {
  display: flex;
  justify-content: center;
  gap: 0.7rem;
}

.knit-dm-call-btn {
  min-width: 6.4rem;
  min-height: 2.5rem;
  border: 0;
  border-radius: 999px;
  font: inherit;
  font-weight: 650;
  cursor: pointer;
}

.knit-dm-call-btn--accept {
  background: #07c160;
  color: #fff;
}

.knit-dm-call-btn--hang {
  background: #dc2626;
  color: #fff;
}

.knit-dm-chat__bubble-wrap--image {
  max-width: min(88%, 15rem);
}

.knit-dm-chat__image-card {
  display: flex;
  flex-direction: column;
  gap: 0.35rem;
  max-width: min(240px, 72vw);
}

.knit-dm-chat__image-btn-wrap {
  display: block;
  padding: 0;
  border: none;
  border-radius: 8px;
  overflow: hidden;
  cursor: pointer;
  background: transparent;
  line-height: 0;
}

.knit-dm-chat__image-preview {
  display: block;
  max-width: 100%;
  max-height: 220px;
  width: auto;
  height: auto;
  object-fit: contain;
  background: transparent;
}

.knit-dm-chat__image-placeholder {
  display: flex;
  align-items: center;
  justify-content: center;
  min-width: 120px;
  min-height: 80px;
  padding: 0.75rem;
  font-size: 0.78rem;
  color: #9ca3af;
  background: var(--knit-dm-placeholder-bg);
}

.knit-dm-chat__image-note {
  font-size: 0.78rem;
  line-height: 1.45;
  color: var(--knit-dm-image-note);
  word-break: break-word;
}

.knit-dm-image-preview {
  position: fixed;
  inset: 0;
  z-index: 16000;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 1.5rem;
  background: rgba(0, 0, 0, 0.88);
}

.knit-dm-image-preview[hidden] {
  display: none !important;
}

.knit-dm-image-preview__img {
  max-width: min(96vw, 1200px);
  max-height: 92vh;
  object-fit: contain;
  border-radius: 8px;
  box-shadow: 0 12px 48px rgba(0, 0, 0, 0.45);
}

.knit-dm-image-preview__close {
  position: fixed;
  top: 1rem;
  right: 1rem;
  width: 2.25rem;
  height: 2.25rem;
  border: none;
  border-radius: 50%;
  background: rgba(255, 255, 255, 0.12);
  color: #fff;
  font-size: 1.35rem;
  line-height: 1;
  cursor: pointer;
}

.knit-dm-image-preview__close:hover {
  background: rgba(255, 255, 255, 0.22);
}

.knit-dm-chat__toolbar {
  display: flex;
  justify-content: center;
  padding: 0.35rem 0.65rem 0.55rem;
  background: var(--knit-dm-toolbar-bg);
  flex-shrink: 0;
}

.knit-dm-chat__clear {
  border: none;
  background: transparent;
  color: var(--knit-dm-sub);
  font-size: 0.74rem;
  cursor: pointer;
  padding: 0.2rem 0.35rem;
}

.knit-dm-chat__clear:hover:not(:disabled) {
  color: #f87171;
}

.knit-dm-chat__clear:disabled {
  opacity: 0.4;
  cursor: not-allowed;
}

.knit-dm-chat__resize-handles {
  position: absolute;
  top: var(--knit-dm-chat-header-h);
  right: 0;
  bottom: 0;
  left: 0;
  z-index: 3;
  pointer-events: none;
}

.knit-dm-chat__body > .knit-dm-chat__resize-handles {
  top: 0;
}

.knit-dm-chat__resize-handles > .knit-dm-chat__resize {
  position: absolute;
  pointer-events: auto;
  touch-action: none;
  opacity: 0;
  transition: opacity 0.15s ease;
}

.knit-dm-chat__panel:hover .knit-dm-chat__resize-handles > .knit-dm-chat__resize,
.knit-dm-chat__resize-handles > .knit-dm-chat__resize:hover,
.knit-dm-chat__resize-handles > .knit-dm-chat__resize:active {
  opacity: 0.55;
}

.knit-dm-chat__resize--n {
  top: 0;
  left: 10px;
  right: 10px;
  height: 6px;
  cursor: ns-resize;
}

.knit-dm-chat__resize--s {
  bottom: 0;
  left: 10px;
  right: 10px;
  height: 6px;
  cursor: ns-resize;
}

.knit-dm-chat__resize--e {
  right: 0;
  top: 10px;
  bottom: 10px;
  width: 6px;
  cursor: ew-resize;
}

.knit-dm-chat__resize--w {
  left: 0;
  top: 10px;
  bottom: 10px;
  width: 6px;
  cursor: ew-resize;
}

.knit-dm-chat__resize--ne,
.knit-dm-chat__resize--nw,
.knit-dm-chat__resize--se,
.knit-dm-chat__resize--sw {
  width: 14px;
  height: 14px;
}

.knit-dm-chat__resize--ne {
  top: 0;
  right: 0;
  cursor: nesw-resize;
}

.knit-dm-chat__resize--nw {
  top: 0;
  left: 0;
  cursor: nwse-resize;
}

.knit-dm-chat__resize--se {
  right: 0;
  bottom: 0;
  cursor: nwse-resize;
  opacity: 0.42;
  background:
    linear-gradient(135deg, transparent 0 42%, #6b7280 42% 48%, transparent 48% 58%, #6b7280 58% 64%, transparent 64% 74%, #6b7280 74% 80%, transparent 80% 100%);
}

.knit-dm-chat__resize--sw {
  left: 0;
  bottom: 0;
  cursor: nesw-resize;
}

.knit-dm-chat__panel:hover .knit-dm-chat__resize--se,
.knit-dm-chat__resize--se:hover,
.knit-dm-chat__resize--se:active {
  opacity: 0.82;
}

/* 纱线信息：靠右、仅占右半屏，不遮左侧大图（与全屏左图/右栏分区一致） */
.knit-fp-yarn-backdrop {
  position: fixed;
  left: var(--knit-fp-right-left, 50vw);
  right: 0;
  top: 0;
  bottom: 0;
  z-index: 1012;
  background: rgba(0, 0, 0, 0.2);
}

.knit-fp-yarn-backdrop[hidden] {
  display: none !important;
}

.knit-fp-yarn-layer {
  position: fixed;
  left: calc(var(--knit-fp-right-left, 50vw) + (var(--knit-fp-right-width, 50vw) / 2));
  right: auto;
  top: 50%;
  z-index: 1013;
  width: min(46rem, calc(var(--knit-fp-right-width, 50vw) - 1.5rem));
  max-height: min(85vh, 36rem);
  box-sizing: border-box;
  transform: translate(-50%, -50%);
  filter: drop-shadow(0 16px 40px rgba(0, 0, 0, 0.28));
}

.knit-fp-yarn-layer[hidden] {
  display: none !important;
}

.knit-fp-yarn-inner {
  display: flex;
  flex-direction: column;
  max-height: inherit;
  background: var(--knit-panel-bg, #fff);
  border: 1px solid var(--knit-panel-border);
  border-radius: 14px;
  padding: 0.85rem 1rem 1rem;
  overflow: hidden;
}

.knit-fp-yarn-head {
  display: flex;
  flex-direction: row;
  align-items: center;
  justify-content: space-between;
  gap: 0.5rem;
  margin-bottom: 0.65rem;
  padding-bottom: 0.55rem;
  border-bottom: 1px solid var(--knit-divider, #eee);
  flex-shrink: 0;
}

.knit-fp-yarn-title {
  margin: 0;
  font-size: 0.95rem;
  font-weight: 700;
  color: var(--knit-text-heading);
  letter-spacing: 0.04em;
}

.knit-fp-yarn-close {
  flex-shrink: 0;
  width: 2rem;
  height: 2rem;
  padding: 0;
  border: none;
  border-radius: 8px;
  font-size: 1.35rem;
  line-height: 1;
  color: var(--knit-text-muted, #666);
  background: var(--knit-chrome-hover, #f0f0f0);
  cursor: pointer;
  font-family: inherit;
}

.knit-fp-yarn-close:hover {
  background: var(--knit-chrome-active, #e5e5e5);
  color: var(--knit-text-heading, #222);
}

/* 纱线信息：表头一行 + 数据一行（后端/表格写入 td#…），成份列加宽 */
.knit-fp-yarn-board {
  flex: 1;
  min-height: 0;
  overflow-x: auto;
  overflow-y: auto;
  -webkit-overflow-scrolling: touch;
  padding-bottom: 0.15rem;
}

.knit-fp-yarn-table {
  min-width: 24rem;
  border-collapse: collapse;
  border-spacing: 0;
  table-layout: fixed;
  margin: 0;
  width: 100%;
}

.knit-fp-yarn-table col.knit-fp-yarn-col-w {
  width: 16.66%;
}

.knit-fp-yarn-table col.knit-fp-yarn-col-w--fiber {
  width: 33.32%;
}

.knit-fp-yarn-table th,
.knit-fp-yarn-table td {
  padding: 0.55rem 0.45rem;
  border: none;
  text-align: center;
  vertical-align: middle;
  box-sizing: border-box;
  word-break: break-word;
}

.knit-fp-inline-yarn-board .knit-fp-yarn-table {
  background: var(--knit-panel-bg, #fff);
  border: 1px solid var(--knit-panel-border);
  border-radius: 8px;
  overflow: hidden;
}

.knit-fp-yarn-table thead th {
  font-size: 0.72rem;
  font-weight: 600;
  color: var(--knit-text-muted, #4b5563);
  line-height: 1.3;
  letter-spacing: 0.02em;
  background: var(--knit-page-bg-alt, #f1f5f9);
  border-bottom: 2px solid var(--knit-panel-border, #cbd5e1);
}

.knit-fp-yarn-table tbody td {
  font-size: 0.84rem;
  color: var(--knit-text-heading, #1f2937);
  line-height: 1.4;
  background: var(--knit-panel-bg, #fff);
  border-bottom: 1px solid var(--knit-divider, #e2e8f0);
}

.knit-fp-yarn-table tbody tr:last-child td {
  border-bottom: none;
}

.knit-fp-yarn-table tbody tr:not(.knit-fp-yarn-link-row):hover td {
  background: var(--knit-control-hover-bg, #f8fafc);
}

.knit-fp-yarn-table td:first-child {
  position: relative;
  text-align: left;
  padding-left: 0.55rem;
}

.knit-fp-yarn-name-wrap {
  position: relative;
  display: flex;
  align-items: center;
  justify-content: flex-start;
  gap: 0.4rem;
  width: 100%;
  overflow: visible;
}

.knit-fp-yarn-name-text {
  display: inline-block;
  max-width: 100%;
  min-width: 0;
}

.knit-fp-yarn-ecc-jump {
  --knit-fp-yarn-ecc-jump-color: #9ca3af;
  flex: 0 0 auto;
  width: 1.42rem;
  height: 0.9rem;
  border: 1px solid rgba(15, 23, 42, 0.28);
  border-radius: 4px;
  padding: 0;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  background-color: var(--knit-fp-yarn-ecc-jump-color);
  color: transparent;
  font-size: 0;
  line-height: 0;
  box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.35);
  transition: filter 0.12s ease, box-shadow 0.12s ease, transform 0.12s ease;
}

.knit-fp-yarn-ecc-jump:not(.knit-fp-yarn-ecc-jump--disabled):hover {
  filter: brightness(0.94);
  box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.45), 0 1px 4px rgba(15, 23, 42, 0.18);
  transform: scale(1.05);
}

.knit-fp-yarn-ecc-jump.knit-fp-yarn-ecc-jump--disabled {
  background-color: var(--knit-fp-yarn-ecc-jump-color, #c4c4c4);
  border-color: var(--knit-text-muted);
  border-style: dashed;
  color: transparent;
  opacity: 0.72;
  cursor: not-allowed;
  filter: none;
  box-shadow: none;
}

/* 特征弹窗：与纱线信息层级一致，演示关键词按钮 */
.knit-fp-feature-backdrop {
  position: fixed;
  left: var(--knit-fp-right-left, 50vw);
  right: 0;
  top: 0;
  bottom: 0;
  z-index: 1012;
  background: rgba(0, 0, 0, 0.2);
}

.knit-fp-feature-backdrop[hidden] {
  display: none !important;
}

.knit-fp-feature-layer {
  position: fixed;
  left: calc(var(--knit-fp-right-left, 50vw) + (var(--knit-fp-right-width, 50vw) / 2));
  right: auto;
  top: 50%;
  z-index: 1013;
  width: min(28rem, calc(var(--knit-fp-right-width, 50vw) - 1.5rem));
  max-height: min(85vh, 32rem);
  box-sizing: border-box;
  transform: translate(-50%, -50%);
  filter: drop-shadow(0 16px 40px rgba(0, 0, 0, 0.28));
}

.knit-fp-feature-layer[hidden] {
  display: none !important;
}

.knit-fp-feature-inner {
  display: flex;
  flex-direction: column;
  gap: 0.8rem;
  background: var(--knit-panel-bg, #fff);
  border: 1px solid var(--knit-panel-border);
  border-radius: 14px;
  padding: 0.85rem 1rem 1rem;
}

.knit-fp-feature-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 0.5rem;
  padding-bottom: 0.55rem;
  border-bottom: 1px solid var(--knit-divider);
}

.knit-fp-feature-title {
  margin: 0;
  font-size: 0.95rem;
  font-weight: 700;
  color: var(--knit-text-heading);
  letter-spacing: 0.04em;
}

.knit-fp-feature-close {
  flex-shrink: 0;
  width: 2rem;
  height: 2rem;
  padding: 0;
  border: none;
  border-radius: 8px;
  font-size: 1.35rem;
  line-height: 1;
  color: var(--knit-text-muted);
  background: #f0f0f0;
  cursor: pointer;
  font-family: inherit;
}

.knit-fp-feature-close:hover {
  background: var(--knit-panel-border);
  color: var(--knit-text-heading);
}

.knit-fp-feature-keywords {
  display: flex;
  flex-wrap: wrap;
  gap: 0.55rem;
}

.knit-fp-content-tags {
  display: flex;
  flex-direction: column;
  gap: 0.55rem;
}

.knit-fp-content-tags__group {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0.4rem;
}

.knit-fp-content-tags__dim {
  font-size: 0.75rem;
  color: var(--knit-text-muted, #64748b);
  margin-right: 0.15rem;
}

.knit-fp-content-tags__chip {
  padding: 0.28rem 0.65rem;
  border: 1px solid var(--knit-control-border);
  border-radius: 999px;
  background: var(--knit-control-bg);
  color: var(--knit-text-heading);
  font-size: 0.78rem;
  line-height: 1.2;
}

.knit-fp-feature-keyword {
  padding: 0.42rem 0.85rem;
  border: 1px solid var(--knit-control-border);
  border-radius: 999px;
  background: var(--knit-control-bg);
  color: var(--knit-text-heading);
  font-size: 0.82rem;
  line-height: 1.2;
  font-family: inherit;
  cursor: pointer;
  transition: background 0.15s, border-color 0.15s, color 0.15s;
}

.knit-fp-feature-keyword:hover {
  border-color: var(--knit-red);
  background: color-mix(in srgb, var(--knit-red) 7%, var(--knit-panel-bg));
  color: var(--knit-red);
}

.knit-fp-feature-keyword--active {
  border-color: var(--knit-red);
  background: var(--knit-red);
  color: #fff;
}

.knit-fp-feature-results {
  margin-top: 1rem;
  padding-top: 0.85rem;
  border-top: 1px solid var(--knit-divider);
  max-height: min(42vh, 320px);
  overflow-y: auto;
}

.knit-fp-feature-results-hint {
  margin: 0 0 0.65rem;
  font-size: var(--knit-hint-size);
  font-weight: var(--knit-hint-weight);
  letter-spacing: var(--knit-hint-ls);
  line-height: var(--knit-hint-lh);
  color: var(--knit-text-muted);
}

.knit-fp-feature-results-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(88px, 1fr));
  gap: 0.5rem;
}

.knit-fp-feature-result-hit {
  display: flex;
  flex-direction: column;
  align-items: stretch;
  gap: 0.25rem;
  padding: 0.35rem;
  border: 1px solid var(--knit-panel-border);
  border-radius: 8px;
  background: var(--knit-panel-bg-alt);
  cursor: pointer;
  font-family: inherit;
  text-align: left;
}

.knit-fp-feature-result-hit:hover,
.knit-fp-feature-result-hit:focus-visible {
  border-color: var(--knit-red);
  background: color-mix(in srgb, var(--knit-red) 7%, var(--knit-panel-bg));
}

.knit-fp-feature-result-thumb {
  width: 100%;
  aspect-ratio: 1;
  object-fit: cover;
  border-radius: 4px;
  background: #111;
}

.knit-fp-feature-result-meta {
  font-size: 0.68rem;
  line-height: 1.25;
  color: var(--knit-text-body);
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.knit-fp-block {
  margin-bottom: 1rem;
}

.knit-fp-block-title {
  margin: 0 0 0.45rem;
  font-size: 0.78rem;
  font-weight: 700;
  color: var(--knit-text-muted);
  letter-spacing: 0.04em;
  text-transform: none;
}

.knit-fp-meta-line {
  margin: 0 0 0.45rem;
  display: flex;
  align-items: baseline;
  gap: 0.55rem;
}

.knit-fp-meta-line:last-child {
  margin-bottom: 0;
}

.knit-fp-meta-line .knit-fp-block-title {
  margin: 0;
  min-width: 3.8rem;
}

.knit-fp-meta-line .knit-fp-time {
  margin: 0;
}

.knit-fp-intro {
  margin: 0;
  font-size: 0.88rem;
  line-height: 1.55;
  color: var(--knit-text-body);
}

/* ---------- 纱线作品大图详情 · 图2 线框：左上头像+昵称，下方大块正文（无生硬边框） ---------- */
#knitFullpage[data-knit-yarn-detail="1"] {
  background: var(--knit-main-bg, #fff);
  /* 禁止双指/双击把整页视觉缩放卡住（maximum-scale 时往往缩不回去） */
  touch-action: pan-y;
}

#knitFullpage[data-knit-yarn-detail="1"] .knit-fp-side-scroll,
#knitFullpage[data-knit-yarn-detail="1"] .knit-fp-yarn-detail-photo-cell--ecc {
  touch-action: pan-y;
}

#knitFullpage[data-knit-yarn-detail="1"] .knit-fullpage-left {
  display: none !important;
}

#knitFullpage[data-knit-yarn-detail="1"] .knit-fullpage-right {
  flex: 1 1 100%;
  width: 100%;
  max-width: none;
  border-left: none;
}

/* 评论区整段暂隐藏（含列表与写评论框），便于重新设计 */
#knitFullpage[data-knit-yarn-detail="1"] .knit-fp-comments {
  display: none !important;
}

#knitFullpage[data-knit-yarn-detail="1"] .knit-fullpage-right .knit-fp-side-scroll {
  padding-top: 1rem;
}

#knitFullpage[data-knit-yarn-detail="1"] .knit-fp-action-bar,
#knitFullpage[data-knit-yarn-detail="1"] .knit-fp-action-btn {
  position: relative;
  z-index: 6;
  pointer-events: auto;
}

#knitFpAuthorLikeBtn,
#knitFpAuthorLikeBtn[hidden],
#knitFullpage[data-knit-yarn-detail="1"] #knitFpAuthorLikeBtn {
  display: none !important;
}

#knitFullpage.is-work-turning .knit-fp-action-bar,
#knitFullpage.is-work-turning .knit-fp-action-btn {
  pointer-events: auto;
}

.knit-fullpage-right[data-knit-fp-channel="yarn"] {
  background: var(--knit-view-bg, #fff);
}

.knit-fullpage-right[data-knit-fp-channel="yarn"] .knit-fp-side-scroll {
  display: flex;
  flex-direction: column;
  min-height: 100%;
  padding-top: 1rem;
  padding-right: 1.4rem;
  padding-bottom: 1.5rem;
  padding-left: 1.4rem;
  box-sizing: border-box;
}

/* 图2：仅左上用户条，无顶部分割线 */
.knit-fullpage-right[data-knit-fp-channel="yarn"] .knit-fp-author {
  margin-bottom: 1rem;
  padding-bottom: 0;
  border-bottom: none;
  align-items: center;
}

/* 图2：实心深色圆头像 */
.knit-fullpage-right[data-knit-fp-channel="yarn"] .knit-fp-author-avatar {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 2.75rem;
  height: 2.75rem;
  font-size: 1.05rem;
  font-weight: 700;
  color: #fff;
  letter-spacing: 0;
  background: #0a0a0a;
  border: none;
  box-shadow: none;
}

.knit-fullpage-right[data-knit-fp-channel="yarn"] .knit-fp-author-avatar--photo {
  background: #e5e7eb;
}

.knit-fullpage-right[data-knit-fp-channel="yarn"] .knit-fp-author-name {
  font-size: 1rem;
  font-weight: 600;
  color: var(--knit-text-heading);
}

/* 纱线详情：上传页三项（文本框 → 特征关键词 → 纱线信息）竖排 */
.knit-fullpage-right[data-knit-fp-channel="yarn"] #knitFpIntroBlock {
  display: none !important;
}

.knit-fullpage-right[data-knit-fp-channel="yarn"] #knitFpYarnDetailStack {
  display: flex !important;
  flex-direction: column;
  gap: 1.85rem;
  /* 勿 flex 撑满视口；勿 min-height:0 强收缩，否则全宽时相册格溢出叠在发布时间栏上 */
  flex: 0 1 auto;
  min-height: min-content;
  margin: 0 0 0.35rem;
}

.knit-fullpage-right[data-knit-fp-channel="yarn"] #knitFpYarnDetailStack[hidden] {
  display: none !important;
}

.knit-fp-yarn-sec {
  margin: 0;
}

.knit-fp-yarn-sec-title {
  margin: 0 0 0.5rem;
  font-size: 0.88rem;
  font-weight: 700;
  color: var(--knit-text-heading);
  letter-spacing: 0.02em;
}

/* 纱线详情：不显示「文本框 / 特征关键词 / 纱线信息」小标题，仅展示正文（标题仍供 aria-labelledby） */
.knit-fullpage-right[data-knit-fp-channel="yarn"] .knit-fp-yarn-sec-title {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
  border: 0;
}

.knit-fp-yarn-sec-body {
  margin: 0;
  font-size: 0.94rem;
  line-height: 1.82;
  color: var(--knit-text-body);
  white-space: pre-wrap;
  word-break: break-word;
}

.knit-fp-yarn-sec-body--meta {
  font-size: 0.9rem;
  line-height: 1.75;
  color: var(--knit-text-body);
}

.knit-fullpage-right[data-knit-fp-channel="yarn"] .knit-fp-yarn-sec-body .knit-fp-colon-key {
  font-weight: 700;
  color: var(--knit-text-heading);
}

/* 纱线信息：支数 · 成份 · 厂家 横向排列（窄屏可换行） */
.knit-fullpage-right[data-knit-fp-channel="yarn"] .knit-fp-yarn-meta-row {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  gap: 0.25rem 0.45rem;
  margin: 0;
  white-space: normal;
}

.knit-fullpage-right[data-knit-fp-channel="yarn"] .knit-fp-yarn-meta-chunk {
  flex: 0 1 auto;
}

.knit-fullpage-right[data-knit-fp-channel="yarn"] .knit-fp-yarn-meta-sep {
  color: #c8c8c8;
  font-weight: 400;
  user-select: none;
}

/* 纱线详情：每张作品图 / 每页色卡各占一整页；单格 A4 竖向比例（210:297） */
.knit-fullpage-right[data-knit-fp-channel="yarn"] .knit-fp-yarn-detail-photo-wrap {
  margin: 0.35rem 0 0;
  max-width: 100%;
  min-height: min-content;
}

.knit-fullpage-right[data-knit-fp-channel="yarn"] .knit-fp-yarn-detail-photo-wrap[hidden] {
  display: none !important;
}

.knit-fullpage-right[data-knit-fp-channel="yarn"] .knit-fp-yarn-detail-photo-grid {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: clamp(0.55rem, 1.8dvh, 0.95rem);
  justify-items: stretch;
  align-items: stretch;
}

.knit-fullpage-right[data-knit-fp-channel="yarn"] .knit-fp-yarn-detail-photo-cell {
  margin: 0;
  padding: 0;
  border-radius: 10px;
  overflow: hidden;
  background: #f0f0f0;
  aspect-ratio: 210 / 297;
}

.knit-fullpage-right[data-knit-fp-channel="yarn"] .knit-fp-yarn-detail-photo-cell .knit-fp-yarn-detail-photo,
.knit-fullpage-right[data-knit-fp-channel="yarn"] .knit-fp-yarn-detail-photo-cell .knit-fp-yarn-detail-video {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: contain;
}

.knit-fullpage-right[data-knit-fp-channel="yarn"] .knit-fp-yarn-detail-photo-cell--video {
  background: #111;
}

/* 电子色卡页：与作品图同格（A4 比例）；页边距由 yarn-detail 细则统一控制 */
.knit-fullpage-right[data-knit-fp-channel="yarn"] .knit-fp-yarn-detail-photo-cell--ecc {
  display: flex;
  flex-direction: column;
  align-items: stretch;
  padding: 0;
  box-sizing: border-box;
  background: #fafbfd;
  border: 1px solid #e4e8f0;
}

.knit-fullpage-right[data-knit-fp-channel="yarn"] .knit-fp-yarn-ecc-page {
  flex-shrink: 0;
  font-size: 0.72rem;
  font-weight: 700;
  color: #64708b;
  letter-spacing: 0.04em;
  margin-bottom: 0.32rem;
}

.knit-fullpage-right[data-knit-fp-channel="yarn"] .knit-fp-yarn-ecc-body {
  flex: 1 1 auto;
  min-height: 0;
  overflow: auto;
  -webkit-overflow-scrolling: touch;
  font-size: 0.78rem;
  line-height: 1.5;
  color: #3d4556;
  word-break: break-word;
}

/* 详情内复用笔记侧 OCR 网格类名 */
.knit-fullpage-right[data-knit-fp-channel="yarn"] .knit-fp-yarn-ecc-body .knit-dev-ocr-board {
  font-size: inherit;
}

.knit-fullpage-right[data-knit-fp-channel="yarn"] .knit-fp-yarn-ecc-body .knit-dev-colorcard-item {
  border-bottom-color: #e8ebf0;
  padding: 0.3rem 0.12rem;
}

/* 与笔记页 OCR 预览一致：扁平行按 2/3/4 列排（与 flatten 列优先顺序一致） */
.knit-fullpage-right[data-knit-fp-channel="yarn"] .knit-fp-yarn-ecc-cols2,
.knit-fp-yarn-ecc-cols2--row {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
  column-gap: 0.65rem;
  row-gap: 0.42rem;
  width: 100%;
  box-sizing: border-box;
  align-items: start;
}

.knit-fp-yarn-ecc-cols2--row .knit-fp-yarn-ecc-line {
  margin-bottom: 0;
}

.knit-fullpage-right[data-knit-fp-channel="yarn"] .knit-fp-yarn-ecc-cols3 {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1fr) minmax(0, 1fr);
  column-gap: 0.55rem;
  row-gap: 0;
  width: 100%;
  box-sizing: border-box;
  align-items: start;
}

.knit-fullpage-right[data-knit-fp-channel="yarn"] .knit-fp-yarn-ecc-cols4 {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  column-gap: 0.45rem;
  row-gap: 0;
  width: 100%;
  box-sizing: border-box;
  align-items: start;
}

.knit-fullpage-right[data-knit-fp-channel="yarn"] .knit-fp-yarn-ecc-col {
  display: flex;
  flex-direction: column;
  gap: 0.38rem;
  min-width: 0;
}

.knit-fullpage-right[data-knit-fp-channel="yarn"] .knit-fp-yarn-ecc-line {
  display: flex;
  align-items: center;
  gap: 0.48rem;
  margin-bottom: 0.38rem;
}

.knit-fullpage-right[data-knit-fp-channel="yarn"] .knit-fp-yarn-ecc-cols2 .knit-fp-yarn-ecc-line,
.knit-fullpage-right[data-knit-fp-channel="yarn"] .knit-fp-yarn-ecc-cols3 .knit-fp-yarn-ecc-line,
.knit-fullpage-right[data-knit-fp-channel="yarn"] .knit-fp-yarn-ecc-cols4 .knit-fp-yarn-ecc-line {
  margin-bottom: 0;
}

.knit-fullpage-right[data-knit-fp-channel="yarn"] .knit-fp-yarn-ecc-line:last-child {
  margin-bottom: 0;
}

/* 横向色块 + 右侧文字垂直居中（示意：红框色块、蓝框文案中线对齐） */
.knit-fullpage-right[data-knit-fp-channel="yarn"] .knit-fp-yarn-ecc-chip {
  flex-shrink: 0;
  width: clamp(4.13rem, 16.5vw, 5.48rem);
  height: clamp(2.24rem, 8.4vw, 2.96rem);
  border-radius: 4px;
  box-sizing: border-box;
}

.knit-fullpage-right[data-knit-fp-channel="yarn"] .knit-fp-yarn-ecc-body .knit-dev-colorchip {
  flex-shrink: 0;
  display: block;
  width: clamp(4.13rem, 16.5vw, 5.48rem);
  height: clamp(2.24rem, 8.4vw, 2.96rem);
  margin-right: 0;
  border-radius: 4px;
  box-sizing: border-box;
}

/* OCR 槽位行：仅相册格内收缩，避免与笔记/其他纱线区互相污染 */
#knitFullpage[data-knit-yarn-detail="1"]
  .knit-fullpage-right[data-knit-fp-channel="yarn"]
  .knit-fp-yarn-detail-photo-cell--ecc
  .knit-fp-yarn-ecc-body
  .knit-dev-ocr-line {
  align-items: center;
  gap: 0.3rem;
  white-space: normal;
  min-width: 0;
  flex-wrap: nowrap;
}

#knitFullpage[data-knit-yarn-detail="1"]
  .knit-fullpage-right[data-knit-fp-channel="yarn"]
  .knit-fp-yarn-detail-photo-cell--ecc
  .knit-fp-yarn-ecc-body
  .knit-dev-ocr-text {
  align-self: center;
  line-height: 1.3;
  min-width: 0;
  max-width: 100%;
  overflow: hidden;
  white-space: normal;
  display: -webkit-box;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 2;
}

.knit-fullpage-right[data-knit-fp-channel="yarn"] .knit-fp-yarn-ecc-line-inner {
  flex: 1 1 auto;
  min-width: 0;
}

.knit-fullpage-right[data-knit-fp-channel="yarn"] button.knit-ecc-swatch-btn.knit-fp-yarn-ecc-line:hover {
  background: rgba(15, 23, 42, 0.06);
}

.knit-fullpage-right[data-knit-fp-channel="yarn"] .knit-fp-yarn-ecc-body .knit-fp-colon-key {
  font-weight: 700;
  color: var(--knit-text-heading);
}

/* ---------- 纱线大图详情：每格独占一行，A4 竖页（宽随视口高度封顶，避免桌面拉得过高） ---------- */
#knitFullpage[data-knit-yarn-detail="1"]
  .knit-fullpage-right[data-knit-fp-channel="yarn"]
  #knitFpYarnDetailStack {
  flex: 0 1 auto;
  min-height: min-content;
}

#knitFullpage[data-knit-yarn-detail="1"]
  .knit-fullpage-right[data-knit-fp-channel="yarn"]
  .knit-fp-yarn-detail-photo-wrap {
  flex: 0 1 auto;
  min-height: min-content;
}

#knitFullpage[data-knit-yarn-detail="1"]
  .knit-fullpage-right[data-knit-fp-channel="yarn"]
  .knit-fp-yarn-detail-photo-grid {
  display: flex;
  flex-direction: column;
  align-items: stretch;
  gap: clamp(0.55rem, 1.8dvh, 0.95rem);
}

#knitFullpage[data-knit-yarn-detail="1"]
  .knit-fullpage-right[data-knit-fp-channel="yarn"]
  .knit-fp-yarn-detail-spread {
  display: flex;
  justify-content: center;
  align-items: stretch;
  list-style: none;
  margin: 0;
  padding: 0;
  min-width: 0;
  width: 100%;
}

#knitFullpage[data-knit-yarn-detail="1"]
  .knit-fullpage-right[data-knit-fp-channel="yarn"]
  .knit-fp-yarn-detail-spread--solo {
  display: flex;
}

/* 电脑端一页两张：作品图 + 电子色卡并排 */
#knitFullpage[data-knit-yarn-detail="1"]
  .knit-fullpage-right[data-knit-fp-channel="yarn"]
  .knit-fp-yarn-detail-spread--dual {
  display: flex;
  flex-direction: row;
  flex-wrap: nowrap;
  justify-content: center;
  align-items: stretch;
  gap: clamp(0.55rem, 1.4vw, 1rem);
}

/* 作品图与电子色卡：同尺寸 A4 竖页；单张铺满可用宽 */
#knitFullpage[data-knit-yarn-detail="1"]
  .knit-fullpage-right[data-knit-fp-channel="yarn"]
  .knit-fp-yarn-detail-photo-cell,
#knitFullpage[data-knit-yarn-detail="1"]
  .knit-fullpage-right[data-knit-fp-channel="yarn"]
  .knit-fp-yarn-detail-photo-cell--ecc {
  width: min(100%, calc((100dvh - 2.5rem) * 210 / 297));
  max-width: 100%;
  aspect-ratio: 210 / 297;
  height: auto;
  align-self: start;
  box-sizing: border-box;
}

/* 电脑端双页：两张各占一半，避免被上面单页宽度盖掉 */
#knitFullpage[data-knit-yarn-detail="1"]
  .knit-fullpage-right[data-knit-fp-channel="yarn"]
  .knit-fp-yarn-detail-spread--dual
  .knit-fp-yarn-detail-photo-cell,
#knitFullpage[data-knit-yarn-detail="1"]
  .knit-fullpage-right[data-knit-fp-channel="yarn"]
  .knit-fp-yarn-detail-spread--dual
  .knit-fp-yarn-detail-photo-cell--ecc {
  flex: 1 1 0;
  width: auto;
  min-width: 0;
  max-width: min(
    calc((100% - clamp(0.55rem, 1.4vw, 1rem)) / 2),
    calc((100dvh - 2.5rem) * 210 / 297)
  );
}

#knitFullpage[data-knit-yarn-detail="1"]
  .knit-fullpage-right[data-knit-fp-channel="yarn"]
  .knit-fp-yarn-detail-photo-cell--ecc {
  /* 页眉加高以容纳切换/复制按钮；页脚与侧距仍对称 */
  --yarn-ecc-frame: clamp(0.75rem, 2.2dvh, 1.2rem);
  --yarn-ecc-head: clamp(2.4rem, 7.2dvh, 3.4rem);
  --yarn-ecc-foot: var(--yarn-ecc-frame);
  --yarn-ecc-side: var(--yarn-ecc-frame);
  --yarn-ecc-gap: clamp(0.4rem, 1.5dvh, 0.85rem);
  position: relative;
  padding: 0;
  overflow: hidden;
  min-height: 0;
  display: flex;
  flex-direction: column;
  /* 供 cqi 随格宽缩放色块/间距，避免窄格仍按 min 4rem+ 撑破三列栅格 */
  container-type: inline-size;
  container-name: yarn-ecc-cell;
  /* 两格电子色卡共用：槽位板只有 dev-colorchip，无 layout 页用 yarn-ecc-chip，必须同一套尺寸与字号 */
  --yarn-ecc-chip-w: clamp(0.82rem, 4.8vw, 3rem);
  --yarn-ecc-fs: clamp(0.55rem, 2.2vw, 0.74rem);
}

@supports (width: 1cqi) {
  #knitFullpage[data-knit-yarn-detail="1"]
    .knit-fullpage-right[data-knit-fp-channel="yarn"]
    .knit-fp-yarn-detail-photo-cell--ecc {
    --yarn-ecc-chip-w: clamp(0.8rem, 8.8cqi, 2.85rem);
    --yarn-ecc-fs: clamp(0.52rem, 2.45cqi, 0.74rem);
  }
}

/* 详情相册格：色块类名两套，统一为变量宽 + 可收缩；随疏密档缩放 */
#knitFullpage[data-knit-yarn-detail="1"]
  .knit-fullpage-right[data-knit-fp-channel="yarn"]
  .knit-fp-yarn-detail-photo-cell--ecc
  .knit-fp-yarn-ecc-body
  .knit-dev-colorchip,
#knitFullpage[data-knit-yarn-detail="1"]
  .knit-fullpage-right[data-knit-fp-channel="yarn"]
  .knit-fp-yarn-detail-photo-cell--ecc
  .knit-fp-yarn-ecc-body
  .knit-fp-yarn-ecc-chip {
  flex-shrink: 1;
  min-width: 0;
  max-width: 100%;
  display: block;
  box-sizing: border-box;
  margin-right: 0;
  width: var(--yarn-ecc-chip-w, clamp(0.82rem, 4.8vw, 3rem));
  height: auto;
  aspect-ratio: 548 / 296;
  max-height: var(--yarn-ecc-chip-max-h, 2.6rem);
  border-radius: 4px;
}

/* 内容少：色块放大，名称+色号双行 */
#knitFullpage[data-knit-yarn-detail="1"]
  .knit-fullpage-right[data-knit-fp-channel="yarn"]
  .knit-fp-yarn-ecc-body
  .knit-dev-ocr-board--density-sparse {
  --yarn-ecc-chip-w: clamp(1.35rem, 18cqi, 4.2rem);
  --yarn-ecc-chip-max-h: 3.6rem;
  --yarn-ecc-fs: clamp(0.68rem, 3.1cqi, 0.9rem);
}

#knitFullpage[data-knit-yarn-detail="1"]
  .knit-fullpage-right[data-knit-fp-channel="yarn"]
  .knit-fp-yarn-ecc-body
  .knit-dev-ocr-board--density-normal {
  --yarn-ecc-chip-w: clamp(0.95rem, 11cqi, 3.1rem);
  --yarn-ecc-chip-max-h: 2.7rem;
  --yarn-ecc-fs: clamp(0.58rem, 2.5cqi, 0.78rem);
}

#knitFullpage[data-knit-yarn-detail="1"]
  .knit-fullpage-right[data-knit-fp-channel="yarn"]
  .knit-fp-yarn-ecc-body
  .knit-dev-ocr-board--density-dense {
  --yarn-ecc-chip-w: clamp(0.7rem, 7.5cqi, 2.2rem);
  --yarn-ecc-chip-max-h: 1.85rem;
  --yarn-ecc-fs: clamp(0.5rem, 2.05cqi, 0.68rem);
}

#knitFullpage[data-knit-yarn-detail="1"]
  .knit-fullpage-right[data-knit-fp-channel="yarn"]
  .knit-fp-yarn-ecc-body
  .knit-dev-ocr-hex {
  display: block;
  margin-top: 0.08rem;
  font-family: ui-monospace, Consolas, monospace;
  font-size: 0.88em;
  font-weight: 600;
  color: #64708b;
  letter-spacing: 0.02em;
}

#knitFullpage[data-knit-yarn-detail="1"]
  .knit-fullpage-right[data-knit-fp-channel="yarn"]
  .knit-fp-yarn-ecc-body
  .knit-dev-ocr-board--density-dense
  .knit-dev-ocr-text {
  -webkit-line-clamp: 1;
}

/* 格位网格：色块绝对铺满，疏密档不再改窄条尺寸 */
#knitFullpage[data-knit-yarn-detail="1"]
  .knit-fullpage-right[data-knit-fp-channel="yarn"]
  .knit-fp-yarn-detail-photo-cell--ecc
  .knit-fp-yarn-ecc-body
  .knit-dev-ocr-board--density-sparse.knit-dev-ocr-board--cell-grid
  .knit-dev-colorchip,
#knitFullpage[data-knit-yarn-detail="1"]
  .knit-fullpage-right[data-knit-fp-channel="yarn"]
  .knit-fp-yarn-detail-photo-cell--ecc
  .knit-fp-yarn-ecc-body
  .knit-dev-ocr-board--density-normal.knit-dev-ocr-board--cell-grid
  .knit-dev-colorchip,
#knitFullpage[data-knit-yarn-detail="1"]
  .knit-fullpage-right[data-knit-fp-channel="yarn"]
  .knit-fp-yarn-detail-photo-cell--ecc
  .knit-fp-yarn-ecc-body
  .knit-dev-ocr-board--density-dense.knit-dev-ocr-board--cell-grid
  .knit-dev-colorchip {
  position: absolute !important;
  inset: 0 !important;
  width: 100% !important;
  height: 100% !important;
  max-width: none !important;
  max-height: none !important;
  min-height: 0 !important;
  aspect-ratio: auto !important;
}

#knitFullpage[data-knit-yarn-detail="1"]
  .knit-fullpage-right[data-knit-fp-channel="yarn"]
  .knit-fp-yarn-ecc-body
  .knit-dev-ocr-board--density-sparse
  .knit-ecc-swatch-label-wrap {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 0.06rem;
  min-width: 0;
}

#knitFullpage[data-knit-yarn-detail="1"]
  .knit-fullpage-right[data-knit-fp-channel="yarn"]
  .knit-fp-yarn-ecc-body
  .knit-dev-ocr-board--density-sparse
  .knit-dev-ocr-text {
  -webkit-line-clamp: 2;
  white-space: normal;
}

/* 无 label-wrap 时（未关联），名称与色号仍纵向排列 */
#knitFullpage[data-knit-yarn-detail="1"]
  .knit-fullpage-right[data-knit-fp-channel="yarn"]
  .knit-fp-yarn-ecc-body
  .knit-dev-ocr-board--density-sparse
  .knit-dev-colorcard-item {
  align-items: center;
}

#knitFullpage[data-knit-yarn-detail="1"]
  .knit-fullpage-right[data-knit-fp-channel="yarn"]
  .knit-fp-yarn-ecc-body
  .knit-dev-ocr-board--density-sparse
  .knit-dev-colorcard-item > .knit-dev-ocr-text,
#knitFullpage[data-knit-yarn-detail="1"]
  .knit-fullpage-right[data-knit-fp-channel="yarn"]
  .knit-fp-yarn-ecc-body
  .knit-dev-ocr-board--density-sparse
  .knit-dev-colorcard-item > .knit-dev-ocr-hex {
  display: block;
}

/* 详情相册格内不展示「第N页」标签（多格即多页，由格位表达） */
#knitFullpage[data-knit-yarn-detail="1"]
  .knit-fullpage-right[data-knit-fp-channel="yarn"]
  .knit-fp-yarn-detail-photo-cell--ecc
  > .knit-fp-yarn-ecc-page {
  display: none;
}

#knitFullpage[data-knit-yarn-detail="1"]
  .knit-fullpage-right[data-knit-fp-channel="yarn"]
  .knit-fp-yarn-ecc-body {
  display: flex;
  flex-direction: column;
  align-items: stretch;
  gap: 0;
  /* 0% 基底：占满色卡格剩余高度，子级 space-between 才能顶到底（height:100% 在滚动 flex 子项上易失效） */
  flex: 1 1 0%;
  min-height: 0;
  overflow: hidden;
  -webkit-overflow-scrolling: touch;
  padding: var(--yarn-ecc-head) var(--yarn-ecc-side) var(--yarn-ecc-foot);
  box-sizing: border-box;
  position: relative;
  z-index: 1;
}

/* 单列正文：首行顶、末行底，行间留白均分（space-between）+ 最小 gap */
#knitFullpage[data-knit-yarn-detail="1"]
  .knit-fullpage-right[data-knit-fp-channel="yarn"]
  .knit-fp-yarn-ecc-body:has(> .knit-fp-yarn-ecc-line) {
  justify-content: space-between;
  gap: var(--yarn-ecc-gap);
  overflow: auto;
}

#knitFullpage[data-knit-yarn-detail="1"]
  .knit-fullpage-right[data-knit-fp-channel="yarn"]
  .knit-fp-yarn-detail-photo-cell--ecc
  .knit-fp-yarn-ecc-body {
  font-size: var(--yarn-ecc-fs, clamp(0.55rem, 2.2vw, 0.74rem));
}

/* 单列正文：行距改由 body 的 gap 承担，避免与 margin 叠乘 */
#knitFullpage[data-knit-yarn-detail="1"]
  .knit-fullpage-right[data-knit-fp-channel="yarn"]
  .knit-fp-yarn-ecc-body
  > .knit-fp-yarn-ecc-line {
  margin-bottom: 0;
}

#knitFullpage[data-knit-yarn-detail="1"]
  .knit-fullpage-right[data-knit-fp-channel="yarn"]
  .knit-fp-yarn-ecc-body
  .knit-fp-yarn-ecc-col {
  /* gap 保证最小行距；space-between 分配剩余竖向空间 */
  gap: var(--yarn-ecc-gap);
  align-self: stretch;
  min-height: 0;
  height: auto;
  justify-content: space-between;
}

/* 色卡槽位网格：等距 gap；按行列 1fr 铺满页眉页脚与左右边距内的区域 */
#knitFullpage[data-knit-yarn-detail="1"]
  .knit-fullpage-right[data-knit-fp-channel="yarn"]
  .knit-fp-yarn-ecc-body
  .knit-dev-ocr-board--yarn-fp-fill {
  --knit-fp-ecc-gap: var(--yarn-ecc-gap);
  display: grid;
  flex: 1 1 0%;
  min-height: 0;
  min-width: 0;
  width: 100%;
  height: 100%;
  max-width: 100%;
  max-height: none;
  overflow: hidden;
  column-gap: var(--knit-fp-ecc-gap);
  row-gap: var(--knit-fp-ecc-gap);
  box-sizing: border-box;
  align-content: stretch;
  justify-content: stretch;
}

/* 格位网格（1×2 / 2×2 / 3×5…）：行高列宽均分，禁止隐式行把后两行撑高 */
#knitFullpage[data-knit-yarn-detail="1"]
  .knit-fullpage-right[data-knit-fp-channel="yarn"]
  .knit-fp-yarn-detail-photo-cell--ecc
  .knit-fp-yarn-ecc-body
  .knit-dev-ocr-board--yarn-fp-fill.knit-dev-ocr-board--cell-grid {
  flex: 1 1 0%;
  min-height: 0;
  width: 100%;
  height: auto;
  max-height: none;
  grid-template-rows: repeat(var(--knit-ecc-grid-rows, 1), minmax(0, 1fr)) !important;
  grid-auto-rows: minmax(0, 1fr);
  align-content: stretch;
  justify-content: stretch;
}

#knitFullpage[data-knit-yarn-detail="1"]
  .knit-fullpage-right[data-knit-fp-channel="yarn"]
  .knit-fp-yarn-detail-photo-cell--ecc
  .knit-fp-yarn-ecc-body
  .knit-dev-ocr-board--yarn-fp-fill.knit-dev-ocr-board--cell-grid
  .knit-dev-ocr-panel {
  border: 1px solid #e4e8f0;
  border-radius: 8px;
  background: rgba(255, 255, 255, 0.55);
  overflow: hidden;
  padding: clamp(0.28rem, 1.2cqi, 0.45rem);
  min-height: 0;
  height: 100%;
  align-self: stretch;
}

#knitFullpage[data-knit-yarn-detail="1"]
  .knit-fullpage-right[data-knit-fp-channel="yarn"]
  .knit-fp-yarn-detail-photo-cell--ecc
  .knit-fp-yarn-ecc-body
  .knit-dev-ocr-board--yarn-fp-fill.knit-dev-ocr-board--cell-grid
  .knit-dev-ocr-panel-body {
  display: flex;
  flex-direction: column;
  justify-content: stretch;
  align-items: stretch;
  gap: 0;
  grid-template-rows: none !important;
  overflow: hidden !important;
  flex: 1 1 0%;
  min-height: 0;
  height: 100%;
}

/* 旧三键工具条：已迁到色卡页眉内单键，强制隐藏 */
.knit-fp-yarn-ecc-view-toolbar {
  display: none !important;
}

/* 色卡页眉：左切换+下载，右复制色值 */
.knit-fp-yarn-ecc-chrome {
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  z-index: 6;
  height: var(--yarn-ecc-head, 2.6rem);
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 0.4rem;
  padding: 0.28rem clamp(0.45rem, 2.2cqi, 0.75rem) 0;
  box-sizing: border-box;
  pointer-events: none;
}

.knit-fp-yarn-ecc-chrome-left {
  display: inline-flex;
  align-items: center;
  gap: 0.35rem;
  min-width: 0;
}

.knit-fp-yarn-ecc-view-cycle,
.knit-fp-yarn-ecc-download-btn,
.knit-fp-yarn-ecc-copy-btn,
.knit-fp-yarn-ecc-disc {
  pointer-events: auto;
  appearance: none;
  font: inherit;
  cursor: pointer;
  border-radius: 999px;
  transition:
    background-color 0.25s ease,
    border-color 0.25s ease,
    color 0.25s ease,
    transform 0.22s cubic-bezier(0.22, 1, 0.36, 1),
    box-shadow 0.25s ease;
}

.knit-fp-yarn-ecc-disc {
  display: block;
  width: 1.55rem;
  height: 1.55rem;
  min-width: 1.55rem;
  min-height: 1.55rem;
  max-width: 1.55rem;
  max-height: 1.55rem;
  flex: 0 0 1.55rem;
  padding: 0;
  border: 1px solid rgba(15, 23, 42, 0.18);
  background: var(--knit-panel-bg);
  box-sizing: border-box;
  overflow: hidden;
  image-rendering: auto;
}

html[data-knit-color-disc="square"] .knit-fp-yarn-ecc-disc {
  border-radius: 5px;
}

.knit-fp-yarn-ecc-disc.is-empty {
  background:
    conic-gradient(#e5e7eb, #f3f4f6, #e5e7eb);
  opacity: 0.7;
  cursor: default;
}

.knit-fp-yarn-ecc-disc:not(.is-empty):hover,
.knit-fp-yarn-ecc-disc:not(.is-empty):focus-visible {
  transform: scale(1.12);
  box-shadow: 0 2px 8px rgba(15, 23, 42, 0.18);
  outline: none;
}

#knitEccDiscZoomModal {
  position: fixed;
  inset: 0;
  z-index: 12200;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 1rem;
  box-sizing: border-box;
}

#knitEccDiscZoomModal[hidden] {
  display: none !important;
}

.knit-ecc-disc-zoom__backdrop {
  position: absolute;
  inset: 0;
  border: none;
  padding: 0;
  margin: 0;
  background: rgba(15, 23, 42, 0.5);
  cursor: pointer;
}

.knit-ecc-disc-zoom__dialog {
  position: relative;
  z-index: 1;
  width: min(100%, 22rem);
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 0.7rem;
  padding: 0.85rem 1rem 1rem;
  box-sizing: border-box;
  background: var(--knit-modal-bg, #fff);
  border-radius: 14px;
  border: 1px solid var(--knit-modal-border, var(--knit-panel-border));
  box-shadow: 0 18px 48px rgba(15, 23, 42, 0.22);
}

.knit-ecc-disc-zoom__head {
  width: 100%;
  font-size: 0.92rem;
  font-weight: 700;
  color: var(--knit-text-heading, #0f172a);
  text-align: center;
}

.knit-ecc-disc-zoom__canvas {
  display: block;
  width: min(72vw, 20rem);
  max-width: 100%;
  height: auto;
  max-height: min(72vw, 20rem, 70dvh);
  aspect-ratio: 1;
  min-width: 0;
  min-height: 0;
  border-radius: 50%;
  cursor: pointer;
  touch-action: manipulation;
  overflow: hidden;
  image-rendering: auto;
}

.knit-ecc-disc-zoom__dialog[data-knit-color-disc="square"] .knit-ecc-disc-zoom__canvas {
  border-radius: 12px;
}

.knit-ecc-disc-zoom__chips {
  position: relative;
  display: block;
  width: min(72vw, 20rem);
  max-width: 100%;
  height: 3rem;
  margin: 0;
  padding: 0;
  overflow: hidden;
  touch-action: none;
  user-select: none;
  -webkit-user-select: none;
  cursor: grab;
  scrollbar-width: none;
  -ms-overflow-style: none;
}

.knit-ecc-disc-zoom__chips:active {
  cursor: grabbing;
}

.knit-ecc-disc-zoom__chips::-webkit-scrollbar {
  display: none;
  width: 0;
  height: 0;
}

.knit-ecc-disc-zoom__chips[hidden] {
  display: none !important;
}

.knit-ecc-disc-zoom__chips-track {
  position: absolute;
  left: 0;
  top: 0;
  display: flex;
  flex-wrap: nowrap;
  align-items: center;
  gap: 0.62rem;
  height: 100%;
  padding: 0 0.2rem;
  will-change: transform;
  transition: transform 0.4s cubic-bezier(0.16, 1, 0.3, 1);
}

.knit-ecc-disc-zoom__chips.is-dragging .knit-ecc-disc-zoom__chips-track,
.knit-ecc-disc-zoom__chips.is-dragging .knit-ecc-disc-zoom__chip {
  transition: none;
}

.knit-ecc-disc-zoom__chip {
  flex: 0 0 auto;
  width: 1.5rem;
  height: 1.5rem;
  margin: 0;
  padding: 0;
  border: 0;
  border-radius: 50%;
  box-shadow: none;
  cursor: inherit;
  appearance: none;
  -webkit-appearance: none;
  transform: scale(1);
  transform-origin: center center;
  transition:
    transform 0.4s cubic-bezier(0.16, 1, 0.3, 1),
    opacity 0.32s ease;
}

.knit-ecc-disc-zoom__chip.is-selected {
  border: 0;
  box-shadow: none;
}

.knit-ecc-disc-zoom__chip:focus-visible {
  outline: 2px solid #2563eb;
  outline-offset: 3px;
}

.knit-ecc-disc-zoom__meta {
  margin: 0;
  min-height: 1.2em;
  font-size: 0.82rem;
  color: var(--knit-text-muted, #64748b);
  text-align: center;
}

.knit-ecc-disc-zoom__close {
  margin: 0;
  padding: 0.32rem 1.1rem;
  font: inherit;
  font-size: 0.82rem;
  color: #fff;
  background: var(--knit-pill-active-bg);
  border: 0;
  border-radius: 999px;
  cursor: pointer;
}

.knit-ecc-disc-zoom__close:hover,
.knit-ecc-disc-zoom__close:focus-visible {
  background: #0f172a;
  outline: none;
}

.knit-ecc-swatch-btn.is-disc-hit {
  outline: 2px solid var(--knit-control-active-border);
  outline-offset: 1px;
}

.knit-fp-yarn-ecc-view-cycle {
  border: 1px solid var(--knit-control-active-border);
  background: var(--knit-pill-active-bg);
  color: #fff;
  padding: 0.2rem 0.72rem;
  font-size: clamp(0.68rem, 3.2cqi, 0.78rem);
  line-height: 1.2;
  font-weight: 600;
  box-shadow: 0 3px 10px rgba(17, 24, 39, 0.16);
}

.knit-fp-yarn-ecc-view-cycle:hover {
  background: #1f2937;
}

.knit-fp-yarn-ecc-view-cycle:active {
  transform: scale(0.96);
}

.knit-fp-yarn-ecc-download-btn,
.knit-fp-yarn-ecc-copy-btn {
  width: 1.7rem;
  height: 1.7rem;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 0;
  border: 1.5px solid #3b82f6;
  background: rgba(255, 255, 255, 0.92);
  color: #2563eb;
  border-radius: 7px;
  box-shadow: 0 1px 3px rgba(37, 99, 235, 0.12);
}

.knit-fp-yarn-ecc-download-btn:hover,
.knit-fp-yarn-ecc-copy-btn:hover {
  background: #eff6ff;
  border-color: #2563eb;
}

.knit-fp-yarn-ecc-download-btn:active,
.knit-fp-yarn-ecc-copy-btn:active {
  transform: scale(0.94);
}

.knit-fp-yarn-ecc-download-btn:disabled {
  opacity: 0.55;
  cursor: wait;
}

.knit-fp-yarn-ecc-download-btn.is-done,
.knit-fp-yarn-ecc-copy-btn.is-copied {
  border-color: #059669;
  color: #059669;
  background: #ecfdf5;
}

.knit-fp-yarn-ecc-download-icon,
.knit-fp-yarn-ecc-copy-icon {
  display: block;
}

.knit-ecc-download-modal__panel {
  width: min(22rem, 92vw);
}

.knit-ecc-download-modal__choices {
  display: flex;
  flex-direction: column;
  gap: 0.45rem;
  margin: 0.35rem 0 0.75rem;
}

.knit-ecc-download-choice {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 0.15rem;
  width: 100%;
  margin: 0;
  padding: 0.7rem 0.85rem;
  border: 1px solid var(--knit-modal-border, var(--knit-panel-border));
  border-radius: 10px;
  background: var(--knit-panel-bg, #fff);
  font: inherit;
  text-align: left;
  cursor: pointer;
  transition:
    border-color 0.18s ease,
    background-color 0.18s ease,
    box-shadow 0.18s ease;
}

.knit-ecc-download-choice strong {
  font-size: 0.92rem;
  color: var(--knit-text-heading, #0f172a);
}

.knit-ecc-download-choice span {
  font-size: 0.78rem;
  color: var(--knit-text-muted, #64748b);
}

.knit-ecc-download-choice:hover {
  border-color: #93c5fd;
  background: #f8fbff;
}

.knit-ecc-download-choice.is-active {
  border-color: #2563eb;
  background: #eff6ff;
  box-shadow: 0 0 0 1px rgba(37, 99, 235, 0.18);
}

#knitFullpage[data-knit-yarn-detail="1"]
  .knit-fullpage-right[data-knit-fp-channel="yarn"]
  .knit-fp-yarn-detail-photo-wrap {
  margin-top: 0.55rem;
  padding-top: 0.35rem;
}

#knitFullpage[data-knit-yarn-detail="1"]
  .knit-fullpage-right[data-knit-fp-channel="yarn"]
  .knit-fp-yarn-detail-photo-cell {
  margin-top: 0.15rem;
}

/* 显示框：整格可点；色值色块绝对铺满显示框 */
#knitFullpage[data-knit-yarn-detail="1"]
  .knit-fullpage-right[data-knit-fp-channel="yarn"]
  .knit-fp-yarn-detail-photo-cell--ecc
  .knit-fp-yarn-ecc-body
  .knit-dev-ocr-board--yarn-fp-fill.knit-dev-ocr-board--cell-grid
  .knit-dev-colorcard-item.knit-dev-ocr-line {
  position: relative !important;
  flex: 1 1 0% !important;
  min-height: 0 !important;
  width: 100% !important;
  height: 100% !important;
  max-width: 100% !important;
  box-sizing: border-box;
  display: flex !important;
  flex-direction: column !important;
  align-items: stretch !important;
  justify-content: flex-end !important;
  gap: 0 !important;
  padding: clamp(0.28rem, 1.2cqi, 0.45rem) !important;
  margin: 0 !important;
  border: none !important;
  white-space: normal !important;
  overflow: hidden !important;
}

#knitFullpage[data-knit-yarn-detail="1"]
  .knit-fullpage-right[data-knit-fp-channel="yarn"]
  .knit-fp-yarn-detail-photo-cell--ecc
  .knit-fp-yarn-ecc-body
  .knit-dev-ocr-board--yarn-fp-fill.knit-dev-ocr-board--cell-grid
  .knit-dev-colorchip,
#knitFullpage[data-knit-yarn-detail="1"]
  .knit-fullpage-right[data-knit-fp-channel="yarn"]
  .knit-fp-yarn-detail-photo-cell--ecc
  .knit-fp-yarn-ecc-body
  .knit-dev-ocr-board--yarn-fp-fill.knit-dev-ocr-board--cell-grid
  .knit-ecc-swatch-media {
  position: absolute !important;
  inset: 0 !important;
  z-index: 0 !important;
  flex: none !important;
  width: 100% !important;
  max-width: none !important;
  min-width: 0 !important;
  height: 100% !important;
  min-height: 0 !important;
  max-height: none !important;
  aspect-ratio: auto !important;
  border-radius: 6px !important;
  margin: 0 !important;
  display: block !important;
  overflow: hidden;
}

#knitFullpage[data-knit-yarn-detail="1"]
  .knit-fullpage-right[data-knit-fp-channel="yarn"]
  .knit-fp-yarn-detail-photo-cell--ecc
  .knit-fp-yarn-ecc-body
  .knit-dev-ocr-board--yarn-fp-fill.knit-dev-ocr-board--cell-grid
  .knit-ecc-swatch-color,
#knitFullpage[data-knit-yarn-detail="1"]
  .knit-fullpage-right[data-knit-fp-channel="yarn"]
  .knit-fp-yarn-detail-photo-cell--ecc
  .knit-fp-yarn-ecc-body
  .knit-dev-ocr-board--yarn-fp-fill.knit-dev-ocr-board--cell-grid
  .knit-ecc-swatch-img {
  position: absolute;
  inset: 0;
  will-change: clip-path, opacity;
  transition:
    clip-path 0.48s cubic-bezier(0.22, 1, 0.36, 1),
    opacity 0.36s ease;
}

#knitFullpage[data-knit-yarn-detail="1"]
  .knit-fullpage-right[data-knit-fp-channel="yarn"]
  .knit-fp-yarn-detail-photo-cell--ecc
  .knit-fp-yarn-ecc-body
  .knit-dev-ocr-board--yarn-fp-fill.knit-dev-ocr-board--cell-grid
  .knit-ecc-swatch-color--empty {
  background: repeating-linear-gradient(
    -45deg,
    #f3f4f6,
    #f3f4f6 6px,
    #e5e7eb 6px,
    #e5e7eb 12px
  );
}

#knitFullpage[data-knit-yarn-detail="1"]
  .knit-fullpage-right[data-knit-fp-channel="yarn"]
  .knit-fp-yarn-detail-photo-cell--ecc
  .knit-fp-yarn-ecc-body
  .knit-dev-ocr-board--yarn-fp-fill.knit-dev-ocr-board--cell-grid
  .knit-ecc-swatch-img img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
  pointer-events: none;
  transform: scale(1.02);
  transition: transform 0.48s cubic-bezier(0.22, 1, 0.36, 1);
}

#knitFullpage[data-knit-yarn-detail="1"]
  .knit-fullpage-right[data-knit-fp-channel="yarn"]
  .knit-fp-yarn-detail-photo-cell--ecc
  .knit-fp-yarn-ecc-body
  .knit-dev-ocr-board--yarn-fp-fill.knit-dev-ocr-board--cell-grid
  .knit-ecc-swatch-media.is-view-switching
  .knit-ecc-swatch-img img {
  transform: scale(1.06);
}

#knitFullpage[data-knit-yarn-detail="1"]
  .knit-fullpage-right[data-knit-fp-channel="yarn"]
  .knit-fp-yarn-detail-photo-cell--ecc
  .knit-fp-yarn-ecc-body
  .knit-dev-ocr-board--yarn-fp-fill.knit-dev-ocr-board--cell-grid
  .knit-ecc-swatch-diag {
  position: absolute;
  inset: 0;
  z-index: 3;
  pointer-events: none;
  opacity: 0;
  transition: opacity 0.32s ease;
  /* 与左上色值 / 右下图的裁切缝同向（右上↔左下），避免再画出交叉的另一条斜线 */
  background: linear-gradient(
    to top left,
    transparent calc(50% - 1px),
    rgba(255, 255, 255, 0.75) calc(50% - 0.5px),
    rgba(0, 0, 0, 0.35) 50%,
    rgba(255, 255, 255, 0.75) calc(50% + 0.5px),
    transparent calc(50% + 1px)
  );
}

/* 全色值：色块铺满，图片收拢到对角边 */
#knitFullpage[data-knit-yarn-detail="1"]
  .knit-fullpage-right[data-knit-fp-channel="yarn"]
  .knit-fp-yarn-detail-photo-cell--ecc
  .knit-fp-yarn-ecc-body
  .knit-dev-ocr-board--yarn-fp-fill.knit-dev-ocr-board--cell-grid
  .knit-ecc-swatch-media[data-ecc-view="color"]
  .knit-ecc-swatch-color {
  clip-path: polygon(0 0, 100% 0, 100% 100%, 0 100%);
  opacity: 1;
  z-index: 2;
}

#knitFullpage[data-knit-yarn-detail="1"]
  .knit-fullpage-right[data-knit-fp-channel="yarn"]
  .knit-fp-yarn-detail-photo-cell--ecc
  .knit-fp-yarn-ecc-body
  .knit-dev-ocr-board--yarn-fp-fill.knit-dev-ocr-board--cell-grid
  .knit-ecc-swatch-media[data-ecc-view="color"]
  .knit-ecc-swatch-img {
  clip-path: polygon(100% 100%, 100% 100%, 100% 100%);
  opacity: 0;
  z-index: 1;
}

/* 全图：图片铺满，色块收拢 */
#knitFullpage[data-knit-yarn-detail="1"]
  .knit-fullpage-right[data-knit-fp-channel="yarn"]
  .knit-fp-yarn-detail-photo-cell--ecc
  .knit-fp-yarn-ecc-body
  .knit-dev-ocr-board--yarn-fp-fill.knit-dev-ocr-board--cell-grid
  .knit-ecc-swatch-media[data-ecc-view="image"]
  .knit-ecc-swatch-color {
  clip-path: polygon(0 0, 0 0, 0 0);
  opacity: 0;
  z-index: 2;
}

#knitFullpage[data-knit-yarn-detail="1"]
  .knit-fullpage-right[data-knit-fp-channel="yarn"]
  .knit-fp-yarn-detail-photo-cell--ecc
  .knit-fp-yarn-ecc-body
  .knit-dev-ocr-board--yarn-fp-fill.knit-dev-ocr-board--cell-grid
  .knit-ecc-swatch-media[data-ecc-view="image"]
  .knit-ecc-swatch-img {
  clip-path: polygon(0 0, 100% 0, 100% 100%, 0 100%);
  opacity: 1;
  z-index: 1;
}

/* 各一半：左上色值 / 右下扫描图（对角线展开） */
#knitFullpage[data-knit-yarn-detail="1"]
  .knit-fullpage-right[data-knit-fp-channel="yarn"]
  .knit-fp-yarn-detail-photo-cell--ecc
  .knit-fp-yarn-ecc-body
  .knit-dev-ocr-board--yarn-fp-fill.knit-dev-ocr-board--cell-grid
  .knit-ecc-swatch-media[data-ecc-view="split"]
  .knit-ecc-swatch-color {
  clip-path: polygon(0 0, 100% 0, 0 100%);
  opacity: 1;
  z-index: 2;
}

#knitFullpage[data-knit-yarn-detail="1"]
  .knit-fullpage-right[data-knit-fp-channel="yarn"]
  .knit-fp-yarn-detail-photo-cell--ecc
  .knit-fp-yarn-ecc-body
  .knit-dev-ocr-board--yarn-fp-fill.knit-dev-ocr-board--cell-grid
  .knit-ecc-swatch-media[data-ecc-view="split"]
  .knit-ecc-swatch-img {
  clip-path: polygon(100% 0, 100% 100%, 0 100%);
  opacity: 1;
  z-index: 1;
}

#knitFullpage[data-knit-yarn-detail="1"]
  .knit-fullpage-right[data-knit-fp-channel="yarn"]
  .knit-fp-yarn-detail-photo-cell--ecc
  .knit-fp-yarn-ecc-body
  .knit-dev-ocr-board--yarn-fp-fill.knit-dev-ocr-board--cell-grid
  .knit-ecc-swatch-media[data-ecc-view="split"]
  .knit-ecc-swatch-diag {
  opacity: 1;
}

@media (prefers-reduced-motion: reduce) {
  .knit-fp-yarn-ecc-view-cycle,
  .knit-fp-yarn-ecc-download-btn,
  .knit-fp-yarn-ecc-copy-btn,
  #knitFullpage[data-knit-yarn-detail="1"]
    .knit-fullpage-right[data-knit-fp-channel="yarn"]
    .knit-fp-yarn-detail-photo-cell--ecc
    .knit-fp-yarn-ecc-body
    .knit-dev-ocr-board--yarn-fp-fill.knit-dev-ocr-board--cell-grid
    .knit-ecc-swatch-color,
  #knitFullpage[data-knit-yarn-detail="1"]
    .knit-fullpage-right[data-knit-fp-channel="yarn"]
    .knit-fp-yarn-detail-photo-cell--ecc
    .knit-fp-yarn-ecc-body
    .knit-dev-ocr-board--yarn-fp-fill.knit-dev-ocr-board--cell-grid
    .knit-ecc-swatch-img,
  #knitFullpage[data-knit-yarn-detail="1"]
    .knit-fullpage-right[data-knit-fp-channel="yarn"]
    .knit-fp-yarn-detail-photo-cell--ecc
    .knit-fp-yarn-ecc-body
    .knit-dev-ocr-board--yarn-fp-fill.knit-dev-ocr-board--cell-grid
    .knit-ecc-swatch-img img,
  #knitFullpage[data-knit-yarn-detail="1"]
    .knit-fullpage-right[data-knit-fp-channel="yarn"]
    .knit-fp-yarn-detail-photo-cell--ecc
    .knit-fp-yarn-ecc-body
    .knit-dev-ocr-board--yarn-fp-fill.knit-dev-ocr-board--cell-grid
    .knit-ecc-swatch-diag {
    transition: none !important;
  }
}

#knitFullpage[data-knit-yarn-detail="1"]
  .knit-fullpage-right[data-knit-fp-channel="yarn"]
  .knit-fp-yarn-detail-photo-cell--ecc
  .knit-fp-yarn-ecc-body
  .knit-dev-ocr-board--yarn-fp-fill.knit-dev-ocr-board--cell-grid
  .knit-ecc-swatch-label-wrap,
#knitFullpage[data-knit-yarn-detail="1"]
  .knit-fullpage-right[data-knit-fp-channel="yarn"]
  .knit-fp-yarn-detail-photo-cell--ecc
  .knit-fp-yarn-ecc-body
  .knit-dev-ocr-board--yarn-fp-fill.knit-dev-ocr-board--cell-grid
  .knit-dev-ocr-text,
#knitFullpage[data-knit-yarn-detail="1"]
  .knit-fullpage-right[data-knit-fp-channel="yarn"]
  .knit-fp-yarn-detail-photo-cell--ecc
  .knit-fp-yarn-ecc-body
  .knit-dev-ocr-board--yarn-fp-fill.knit-dev-ocr-board--cell-grid
  .knit-dev-ocr-hex {
  position: relative;
  z-index: 1;
  flex: 0 0 auto !important;
  width: auto;
  max-width: 100% !important;
  -webkit-line-clamp: 2;
  white-space: normal !important;
  align-self: flex-start;
  background: rgba(255, 255, 255, 0.88);
  color: var(--knit-text-heading) !important;
  border-radius: 4px;
  padding: 0.18rem 0.35rem;
  box-sizing: border-box;
}

#knitFullpage[data-knit-yarn-detail="1"]
  .knit-fullpage-right[data-knit-fp-channel="yarn"]
  .knit-fp-yarn-detail-photo-cell--ecc
  .knit-fp-yarn-ecc-body
  .knit-dev-ocr-board--yarn-fp-fill.knit-dev-ocr-board--cell-grid
  .knit-ecc-swatch-label-wrap {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 0.12rem;
  background: rgba(255, 255, 255, 0.88);
  padding: 0.22rem 0.38rem;
}

#knitFullpage[data-knit-yarn-detail="1"]
  .knit-fullpage-right[data-knit-fp-channel="yarn"]
  .knit-fp-yarn-detail-photo-cell--ecc
  .knit-fp-yarn-ecc-body
  .knit-dev-ocr-board--yarn-fp-fill.knit-dev-ocr-board--cell-grid
  .knit-ecc-swatch-label-wrap
  .knit-dev-ocr-text,
#knitFullpage[data-knit-yarn-detail="1"]
  .knit-fullpage-right[data-knit-fp-channel="yarn"]
  .knit-fp-yarn-detail-photo-cell--ecc
  .knit-fp-yarn-ecc-body
  .knit-dev-ocr-board--yarn-fp-fill.knit-dev-ocr-board--cell-grid
  .knit-ecc-swatch-label-wrap
  .knit-dev-ocr-hex {
  background: transparent;
  padding: 0;
}

#knitFullpage[data-knit-yarn-detail="1"]
  .knit-fullpage-right[data-knit-fp-channel="yarn"]
  .knit-fp-yarn-ecc-body
  .knit-dev-ocr-board--yarn-fp-fill
  .knit-dev-ocr-panel {
  display: flex;
  flex-direction: column;
  min-height: 0;
  min-width: 0;
  height: 100%;
  box-sizing: border-box;
}

#knitFullpage[data-knit-yarn-detail="1"]
  .knit-fullpage-right[data-knit-fp-channel="yarn"]
  .knit-fp-yarn-ecc-body
  .knit-dev-ocr-board--yarn-fp-fill
  .knit-dev-ocr-panel-body {
  flex: 1 1 auto;
  min-height: 0;
  min-width: 0;
  overflow-x: hidden;
  overflow-y: hidden;
  /* 与「列内最大行数」对齐：少行列只占前几行，末行空出，避免各列独立 space-between 错位 */
  display: grid;
  grid-template-rows: repeat(var(--knit-ecc-max-lines, 1), minmax(0, 1fr));
  grid-auto-rows: minmax(0, 1fr);
  grid-auto-flow: row;
  align-content: stretch;
  justify-items: stretch;
  row-gap: var(--knit-fp-ecc-gap, var(--yarn-ecc-gap));
  column-gap: 0;
  box-sizing: border-box;
}

#knitFullpage[data-knit-yarn-detail="1"]
  .knit-fullpage-right[data-knit-fp-channel="yarn"]
  .knit-fp-yarn-ecc-body
  .knit-dev-ocr-board--yarn-fp-fill
  .knit-dev-colorcard-item {
  min-height: 0;
  min-width: 0;
  align-self: stretch;
  font-size: inherit;
  padding-top: 0.28rem;
  padding-bottom: 0.28rem;
  border-bottom-width: 1px;
}

#knitFullpage[data-knit-yarn-detail="1"]
  .knit-fullpage-right[data-knit-fp-channel="yarn"]
  .knit-fp-yarn-ecc-body
  .knit-dev-ocr-board--yarn-fp-fill
  button.knit-ecc-swatch-btn.knit-dev-ocr-line {
  min-width: 0;
  max-width: 100%;
}

/* 无 slots 时的扁平行多列：行列 gap 一致 */
#knitFullpage[data-knit-yarn-detail="1"]
  .knit-fullpage-right[data-knit-fp-channel="yarn"]
  .knit-fp-yarn-ecc-body
  .knit-fp-yarn-ecc-cols2,
#knitFullpage[data-knit-yarn-detail="1"]
  .knit-fullpage-right[data-knit-fp-channel="yarn"]
  .knit-fp-yarn-ecc-body
  .knit-fp-yarn-ecc-cols3,
#knitFullpage[data-knit-yarn-detail="1"]
  .knit-fullpage-right[data-knit-fp-channel="yarn"]
  .knit-fp-yarn-ecc-body
  .knit-fp-yarn-ecc-cols4 {
  flex: 1 1 0%;
  min-height: 0;
  min-width: 0;
  width: 100%;
  max-width: 100%;
  align-self: stretch;
  column-gap: var(--yarn-ecc-gap);
  row-gap: var(--yarn-ecc-gap);
  grid-template-rows: minmax(0, 1fr);
  align-content: stretch;
  align-items: stretch;
}

#knitFullpage[data-knit-yarn-detail="1"]
  .knit-fullpage-right[data-knit-fp-channel="yarn"]
  .knit-fp-yarn-detail-photo-cell--ecc
  .knit-fp-yarn-ecc-body
  .knit-fp-yarn-ecc-line {
  min-width: 0;
  max-width: 100%;
  font-size: inherit;
}

#knitFullpage[data-knit-yarn-detail="1"]
  .knit-fullpage-right[data-knit-fp-channel="yarn"]
  .knit-fp-yarn-detail-photo-cell--ecc
  .knit-fp-yarn-ecc-body
  .knit-fp-yarn-ecc-line-inner {
  min-width: 0;
  max-width: 100%;
  overflow: hidden;
  display: -webkit-box;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 2;
  white-space: normal;
}

@container yarn-ecc-cell (max-width: 210px) {
  .knit-fp-yarn-detail-photo-cell--ecc .knit-ecc-swatch-star {
    padding: 0.04rem 0.18rem 0.05rem;
    font-size: 0.75em;
    gap: 0.05rem;
  }

  .knit-fp-yarn-detail-photo-cell--ecc .knit-ecc-swatch-star-glyph {
    font-size: 0.82em;
  }
}

/* 发布时间：紧挨相册/内容栈下方，独占一行、正常文档流 */
.knit-fullpage-right[data-knit-fp-channel="yarn"] #knitFpYarnDetailStack + .knit-fp-publish,
.knit-fullpage-right[data-knit-fp-channel="yarn"] #knitFpYarnDetailStack > .knit-fp-publish {
  margin: 0 0 0.65rem;
  padding: 0.7rem 0 0.2rem;
  border-top: 1px solid #eceef2;
  flex-shrink: 0;
  width: 100%;
  max-width: 100%;
  box-sizing: border-box;
  position: relative;
}

/* 全宽纱线详情：栈内「相册下」再多留一点顶距，与色卡格彻底拉开 */
#knitFullpage[data-knit-yarn-detail="1"]
  .knit-fullpage-right[data-knit-fp-channel="yarn"]
  #knitFpYarnDetailStack
  > .knit-fp-publish {
  margin-top: clamp(0.5rem, 1.6dvh, 0.9rem);
}

/* 时间与评论：压在主文之下，弱化排版（发布时间块在纱线栈外时的兜底，与栈内规则一致） */
.knit-fullpage-right[data-knit-fp-channel="yarn"] .knit-fp-side-scroll > .knit-fp-publish {
  margin-top: 0;
  margin-bottom: 0.65rem;
  padding-top: 0.5rem;
  border-top: 1px solid #f0f0f0;
}

.knit-fullpage-right[data-knit-fp-channel="yarn"] .knit-fp-publish .knit-fp-block-title {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
  border: 0;
}

.knit-fullpage-right[data-knit-fp-channel="yarn"] .knit-fp-publish .knit-fp-time {
  display: block;
  margin: 0;
  font-size: 0.8rem;
  line-height: 1.45;
  color: #7a8494;
}

.knit-fullpage-right[data-knit-fp-channel="yarn"] .knit-fp-comments {
  margin-top: 0.35rem;
}

.knit-fullpage-right[data-knit-fp-channel="yarn"] .knit-fp-comments .knit-fp-block-title {
  font-size: 0.75rem;
  font-weight: 600;
  color: #9aa3b2;
  letter-spacing: 0.06em;
}

.knit-fp-publish .knit-fp-time {
  display: block;
  font-size: 0.86rem;
  color: var(--knit-text-muted);
}

.knit-fp-comment-list {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: 0.85rem;
}

.knit-fp-thread {
  list-style: none;
  margin: 0;
  padding: 0;
  min-width: 0;
}

/* 嵌套回复默认折叠，由按钮展开 */
.knit-fp-reply-toggle {
  display: flex;
  align-items: center;
  gap: 0.35rem;
  margin: 0.1rem 0 0.35rem;
  padding: 0.28rem 0.4rem;
  margin-left: 2.35rem;
  font-size: 0.76rem;
  color: var(--knit-text-muted);
  background: transparent;
  border: none;
  border-radius: 6px;
  cursor: pointer;
  text-align: left;
  font-family: inherit;
}

.knit-fp-reply-nest .knit-fp-reply-toggle {
  margin-left: 0;
}

.knit-fp-reply-toggle:hover {
  background: rgba(0, 0, 0, 0.05);
  color: var(--knit-red);
}

.knit-fp-reply-arrow {
  display: inline-block;
  width: 1em;
  flex-shrink: 0;
  font-size: 0.65rem;
  line-height: 1;
}

.knit-fp-reply-nest {
  list-style: none;
  margin: 0 0 0.35rem;
  padding: 0 0 0 0.85rem;
  border-left: 2px solid var(--knit-panel-border);
}

.knit-fp-reply-nest > .knit-fp-thread {
  margin: 0;
}

.knit-fp-c-reply-to {
  margin: 0 0 0.35rem;
  font-size: 0.72rem;
  line-height: 1.35;
  color: var(--knit-text-muted);
}

.knit-fp-c-reply-at {
  color: var(--knit-red);
  font-weight: 600;
}

.knit-fp-comment {
  display: flex;
  flex-direction: row;
  align-items: flex-start;
  gap: 0.55rem;
  cursor: pointer;
  border-radius: 8px;
  padding: 0.35rem 0.25rem;
  margin: -0.35rem -0.25rem;
  transition: background 0.15s;
}

.knit-fp-comment:hover {
  background: rgba(0, 0, 0, 0.04);
}

.knit-fp-comment:focus-visible {
  outline: 2px solid var(--knit-red);
  outline-offset: 2px;
}

.knit-fp-c-avatar {
  flex-shrink: 0;
  width: 1.85rem;
  height: 1.85rem;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 0.72rem;
  font-weight: 700;
  color: #fff;
  border: 1px solid rgba(0, 0, 0, 0.08);
}

.knit-fp-c-avatar--a {
  background: #5c7a9a;
}

.knit-fp-c-avatar--b {
  background: #6a8f5c;
}

.knit-fp-c-avatar--c {
  background: #9a7a5c;
}

.knit-fp-c-body {
  flex: 1;
  min-width: 0;
}

.knit-fp-c-name {
  display: block;
  font-size: 0.8rem;
  font-weight: 600;
  color: var(--knit-text-heading);
  margin-bottom: 0.2rem;
}

.knit-fp-c-text {
  margin: 0;
  font-size: 0.82rem;
  line-height: 1.45;
  color: var(--knit-text-body);
}

.knit-fp-c-quote {
  margin: 0 0 0.45rem;
  padding: 0.45rem 0.55rem 0.5rem;
  border-left: 3px solid #c93030;
  border-radius: 0 6px 6px 0;
  background: var(--knit-page-bg-alt);
}

.knit-fp-c-quote-label {
  display: block;
  font-size: 0.72rem;
  font-weight: 600;
  color: var(--knit-text-muted);
  margin-bottom: 0.25rem;
}

.knit-fp-c-quote-text {
  margin: 0;
  font-size: 0.78rem;
  line-height: 1.4;
  color: var(--knit-text-body);
}

.knit-fp-c-time {
  display: block;
  margin-top: 0.35rem;
  font-size: 0.72rem;
  color: var(--knit-text-subtle);
}

.knit-fp-c-thread-empty {
  padding: 0.45rem 0;
  font-size: var(--knit-empty-size);
  font-weight: var(--knit-empty-weight);
  letter-spacing: var(--knit-empty-ls);
  line-height: var(--knit-empty-lh);
  color: var(--knit-text-muted);
}

.knit-fp-c-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 0.45rem;
  margin-top: 0.35rem;
}

.knit-fp-c-reply-btn,
.knit-fp-c-quote-btn,
.knit-fp-c-del-btn,
.knit-fp-c-more-btn {
  border: none;
  background: transparent;
  padding: 0;
  font-size: 0.74rem;
  color: var(--knit-text-muted);
  cursor: pointer;
  text-decoration: underline;
  font-family: inherit;
}

.knit-fp-c-reply-btn:hover,
.knit-fp-c-quote-btn:hover,
.knit-fp-c-more-btn:hover {
  color: var(--knit-red);
}

.knit-fp-c-del-btn {
  color: #b91c1c;
}

.knit-fp-c-del-btn:hover {
  color: #991b1b;
}

.knit-fp-compose {
  margin-top: 1rem;
  padding-top: 0.85rem;
  border-top: 1px solid var(--knit-divider, #eee);
  display: flex;
  flex-direction: column;
  gap: 0.5rem;
}

.knit-fp-textarea {
  width: 100%;
  min-height: 3rem;
  padding: 0.5rem 0.6rem;
  font-size: 0.84rem;
  line-height: 1.4;
  color: var(--knit-input-text);
  background: var(--knit-input-bg);
  border: 1px solid var(--knit-control-border);
  border-radius: 8px;
  resize: vertical;
  font-family: inherit;
  box-sizing: border-box;
}

.knit-fp-textarea:focus {
  outline: none;
  border-color: var(--knit-red);
  box-shadow: 0 0 0 2px rgba(201, 48, 48, 0.12);
}

.knit-fp-send {
  align-self: flex-end;
  padding: 0.35rem 1rem;
  font-size: 0.82rem;
  font-weight: 600;
  color: #fff;
  background: var(--knit-red);
  border: none;
  border-radius: 8px;
  cursor: pointer;
}

.knit-fp-send:hover {
  filter: brightness(1.05);
}

/* 灵感评论：发送按钮与输入框同一横排 */
.knit-fullpage-right[data-knit-fp-channel="inspiration"] .knit-fp-compose {
  flex-direction: row;
  align-items: flex-end;
  gap: 0.45rem;
}

.knit-fullpage-right[data-knit-fp-channel="inspiration"] .knit-fp-textarea {
  flex: 1 1 auto;
  min-width: 0;
  min-height: 2.4rem;
  max-height: 6.5rem;
  resize: none;
}

.knit-fullpage-right[data-knit-fp-channel="inspiration"] .knit-fp-send {
  align-self: stretch;
  flex: 0 0 auto;
  min-height: 2.4rem;
}

/* 单击评论：引用回复层（比全屏内容高一级，整体放大 10%） */
.knit-fp-reply-backdrop {
  position: fixed;
  inset: 0;
  z-index: 1010;
  background: rgba(0, 0, 0, 0.22);
}

.knit-fp-reply-backdrop[hidden] {
  display: none !important;
}

.knit-fp-reply-layer {
  position: fixed;
  left: 75%;
  top: 42%;
  z-index: 1011;
  width: min(42vw, 22rem);
  max-width: calc(50vw - 1.5rem);
  box-sizing: border-box;
  transform: translate(-50%, -50%) scale(1.1);
  transform-origin: center center;
  filter: drop-shadow(0 12px 28px rgba(0, 0, 0, 0.2));
}

.knit-fp-reply-layer[hidden] {
  display: none !important;
}

.knit-fp-reply-inner {
  background: var(--knit-panel-bg, #fff);
  border: 1px solid var(--knit-panel-border);
  border-radius: 12px;
  padding: 0.85rem 0.9rem 0.75rem;
}

.knit-fp-reply-kicker {
  margin: 0 0 0.2rem;
  font-size: 0.95rem;
  font-weight: 700;
  color: var(--knit-text-heading);
}

.knit-fp-reply-target {
  margin: 0 0 0.45rem;
  font-size: 0.72rem;
  line-height: 1.35;
  color: var(--knit-text-subtle);
}

.knit-fp-reply-hint {
  margin: 0 0 0.35rem;
  font-size: var(--knit-hint-size);
  font-weight: 600;
  color: var(--knit-text-muted);
  letter-spacing: var(--knit-hint-ls);
  line-height: var(--knit-hint-lh);
}

.knit-fp-reply-thread-box {
  margin: 0 0 0.55rem;
  padding: 0.35rem 0 0;
  border-top: 1px solid var(--knit-divider);
}

.knit-fp-reply-thread-toggle {
  display: flex;
  align-items: center;
  gap: 0.35rem;
  width: 100%;
  margin: 0 0 0.35rem;
  padding: 0.32rem 0.4rem;
  font-size: 0.74rem;
  color: var(--knit-text-muted);
  background: var(--knit-panel-bg-alt);
  border: 1px solid var(--knit-panel-border);
  border-radius: 8px;
  cursor: pointer;
  text-align: left;
  font-family: inherit;
}

.knit-fp-reply-thread-toggle:hover {
  background: var(--knit-control-hover-bg);
  color: var(--knit-red);
}

.knit-fp-reply-thread-arrow {
  flex-shrink: 0;
  font-size: 0.65rem;
  line-height: 1;
  width: 1em;
}

.knit-fp-reply-thread-toggle-text {
  flex: 1;
  min-width: 0;
}

.knit-fp-reply-thread-body {
  max-height: 10.5rem;
  overflow-y: auto;
  padding: 0.2rem 0.15rem 0.1rem;
  border-radius: 6px;
  background: var(--knit-panel-bg-alt);
}

.knit-fp-reply-thread-body:empty {
  display: none;
}

.knit-fp-reply-thread-item {
  padding: 0.35rem 0.45rem;
  margin-bottom: 0.35rem;
  border-radius: 6px;
  background: var(--knit-panel-bg);
  border: 1px solid var(--knit-panel-border);
  font-size: 0.72rem;
  line-height: 1.35;
  color: var(--knit-text-body);
}

.knit-fp-reply-thread-item:last-child {
  margin-bottom: 0;
}

.knit-fp-reply-thread-nick {
  font-weight: 700;
  color: var(--knit-text-heading);
}

.knit-fp-reply-thread-time {
  margin-left: 0.35rem;
  font-weight: 400;
  color: var(--knit-text-subtle);
  font-size: 0.68rem;
}

.knit-fp-reply-thread-msg {
  margin: 0.25rem 0 0;
  white-space: pre-wrap;
  word-break: break-word;
}

.knit-fp-thread-children {
  margin: 0.35rem 0 0;
  padding: 0;
}

.knit-fp-thread-children .knit-fp-nest-toggle {
  margin-left: 0;
}

.knit-fp-reply-snippet {
  margin: 0 0 0.55rem;
  padding: 0.45rem 0.55rem;
  border-left: 3px solid var(--knit-divider);
  border-radius: 0 6px 6px 0;
  background: var(--knit-page-bg-alt);
  font-size: 0.78rem;
  line-height: 1.4;
  color: var(--knit-text-body);
}

.knit-fp-reply-snippet:empty {
  display: none;
}

.knit-fp-reply-actions {
  display: flex;
  justify-content: flex-end;
  gap: 0.5rem;
  margin-top: 0.5rem;
}

.knit-fp-reply-cancel {
  padding: 0.35rem 0.75rem;
  font-size: 0.82rem;
  color: var(--knit-text-muted);
  background: #f0f0f0;
  border: none;
  border-radius: 8px;
  cursor: pointer;
}

.knit-fp-reply-cancel:hover {
  background: var(--knit-panel-border);
}

.knit-fp-reply-send {
  padding: 0.35rem 1rem;
  font-size: 0.82rem;
  font-weight: 600;
  color: #fff;
  background: var(--knit-red);
  border: none;
  border-radius: 8px;
  cursor: pointer;
}

.knit-fp-reply-send:hover {
  filter: brightness(1.05);
}

@media (max-width: 640px) {
  .knit-fp-reply-layer {
    left: 50%;
    width: min(92vw, 22rem);
    max-width: none;
  }
}

.knit-fullpage-close {
  z-index: 1020;
  width: 2.5rem;
  height: 2.5rem;
  padding: 0;
  border: none;
  border-radius: 8px;
  font-size: 1.5rem;
  line-height: 1;
  color: var(--knit-text-body);
  background: rgba(255, 255, 255, 0.95);
  box-shadow: 0 2px 10px rgba(0, 0, 0, 0.15);
  cursor: pointer;
}

.knit-fullpage-close--on-media {
  position: absolute;
  top: 0.75rem;
  left: 0.75rem;
  right: auto;
}

.knit-fullpage-close--in-flow {
  display: none;
  position: static;
  flex-shrink: 0;
  margin: 0;
}

.knit-fp-author .knit-fullpage-close--in-flow {
  width: 2.55rem;
  height: 2.55rem;
  border-radius: 999px;
  font-size: 1.95rem;
  font-weight: 800;
  line-height: 1;
  color: var(--knit-text-heading);
  background: transparent;
  box-shadow: none;
  -webkit-text-stroke: 0.5px currentColor;
}

#knitFullpage[data-knit-yarn-detail="1"] .knit-fullpage-close--on-media {
  display: none;
}

#knitFullpage[data-knit-yarn-detail="1"] .knit-fullpage-close--in-flow {
  display: inline-flex;
  align-items: center;
  justify-content: center;
}

.knit-fullpage-close:hover {
  background: var(--knit-panel-bg);
}

.knit-fp-back-to-top {
  position: fixed;
  right: max(1rem, env(safe-area-inset-right, 0px));
  bottom: max(1.15rem, env(safe-area-inset-bottom, 0px));
  z-index: 1030;
  width: 2.6rem;
  height: 2.6rem;
  padding: 0;
  border: none;
  border-radius: 999px;
  font-size: 1.15rem;
  line-height: 1;
  color: var(--knit-text-heading, #111);
  background: var(--knit-panel-bg, rgba(255, 255, 255, 0.94));
  box-shadow: 0 4px 16px rgba(0, 0, 0, 0.18);
  cursor: pointer;
}

.knit-fp-back-to-top:hover {
  background: var(--knit-control-hover-bg, #fff);
}

.knit-fp-back-to-top[hidden] {
  display: none !important;
}

body.knit-page--fullpage-open,
body.knit-page--settings-open {
  overflow: hidden;
}

body.knit-page--settings-open .knit-scrollport,
body.knit-page--settings-open .knit-main,
body.knit-page--settings-open .knit-app {
  overflow: hidden !important;
}

.knit-settings-modal,
.knit-settings-modal__panel,
.knit-settings-modal__body {
  overscroll-behavior: contain;
}

.knit-dup-modal {
  position: fixed;
  inset: 0;
  z-index: 1600;
  background: rgba(0, 0, 0, 0.5);
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 1rem;
}

.knit-dup-modal[hidden] {
  display: none !important;
}

.knit-dup-modal__panel {
  width: min(92vw, 22rem);
  background: var(--knit-modal-bg);
  border: 1px solid var(--knit-modal-border);
  border-radius: 12px;
  box-shadow: var(--knit-modal-shadow);
  padding: 1rem 1rem 0.9rem;
}

.knit-dup-modal__title {
  margin: 0 0 0.45rem;
  font-size: 1rem;
  font-weight: 700;
  color: var(--knit-text-heading);
}

.knit-dup-modal__text {
  margin: 0;
  font-size: 0.9rem;
  color: var(--knit-text-body);
  line-height: 1.45;
}

.knit-dup-modal__actions {
  margin-top: 0.9rem;
  display: flex;
  justify-content: flex-end;
}

.knit-dup-modal__ok {
  border: none;
  border-radius: 8px;
  padding: 0.4rem 0.95rem;
  font-size: 0.86rem;
  font-weight: 600;
  color: #fff;
  background: #d32f2f;
  cursor: pointer;
}

.knit-settings-modal.knit-dup-modal {
  padding: 0;
  align-items: stretch;
  justify-content: stretch;
  background: var(--knit-page-bg);
}

.knit-settings-modal__panel {
  width: 100%;
  max-width: none;
  height: 100%;
  max-height: none;
  min-height: 100%;
  min-height: 100dvh;
  display: flex;
  flex-direction: column;
  background: var(--knit-page-bg);
  border: none;
  border-radius: 0;
  box-shadow: none;
  padding: 0;
  overflow: hidden;
}

.knit-settings-modal__head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 0.55rem;
  padding: 0.85rem 1rem 0.65rem;
  padding-top: max(0.85rem, env(safe-area-inset-top, 0px));
  border-bottom: 1px solid var(--knit-divider);
  flex-shrink: 0;
}

.knit-settings-modal__back {
  border: none;
  background: transparent;
  color: var(--knit-text-heading);
  font-size: 1.55rem;
  line-height: 1;
  width: 1.8rem;
  padding: 0;
  border-radius: 6px;
  cursor: pointer;
}

.knit-settings-modal__back:hover {
  background: var(--knit-control-hover-bg);
}

.knit-settings-modal__back[hidden] {
  visibility: hidden;
  display: inline-block;
}

.knit-settings-modal__title {
  flex: 1;
  text-align: center;
}

.knit-settings-modal__title {
  margin: 0;
  font-size: 1rem;
  font-weight: 700;
  color: var(--knit-text-heading);
}

.knit-settings-modal__close {
  border: none;
  background: transparent;
  color: var(--knit-text-muted);
  font-size: 1.35rem;
  line-height: 1;
  padding: 0.1rem 0.35rem;
  border-radius: 6px;
  cursor: pointer;
}

.knit-settings-modal__close:hover {
  background: var(--knit-control-hover-bg);
  color: var(--knit-text-heading);
}

.knit-settings-modal__body {
  padding: 0.75rem 0.85rem 1rem;
  padding-bottom: max(1rem, env(safe-area-inset-bottom, 0px));
  display: flex;
  flex-direction: column;
  gap: 0.75rem;
  overflow: auto;
  min-height: 0;
  flex: 1 1 auto;
}

.knit-settings-page {
  display: flex;
  flex-direction: column;
  gap: 0.75rem;
}

.knit-settings-page[hidden] {
  display: none !important;
}

.knit-settings-card {
  display: flex;
  flex-direction: column;
  background: var(--knit-panel-bg);
  border: 1px solid var(--knit-panel-border);
  border-radius: var(--knit-radius-md);
  box-shadow: var(--knit-panel-shadow);
  overflow: hidden;
}

.knit-settings-card > .knit-settings-hint {
  padding: 0.7rem 0.8rem 0.2rem;
}

.knit-settings-diandian-extra {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 0.45rem;
  padding: 0.15rem 0.8rem 0.75rem;
}

.knit-settings-card .knit-settings-group-label {
  margin: 0;
  padding: 0.55rem 0.8rem 0.15rem;
}

.knit-settings-nav {
  display: grid;
  grid-template-columns: 1fr auto auto;
  align-items: center;
  gap: 0.45rem 0.65rem;
  width: 100%;
  padding: 0.72rem 0.8rem;
  border: none;
  border-bottom: 1px solid var(--knit-divider);
  background: transparent;
  color: var(--knit-text-heading);
  text-align: left;
  cursor: pointer;
  font: inherit;
  text-decoration: none;
}

.knit-settings-card > .knit-settings-nav:last-child,
.knit-settings-card > .knit-settings-toggle:last-child,
.knit-settings-card > .knit-settings-option:last-child {
  border-bottom: none;
}

.knit-settings-nav:hover:not(.knit-settings-nav--static),
.knit-settings-nav:active:not(.knit-settings-nav--static) {
  background: var(--knit-control-hover-bg);
}

.knit-settings-nav--static {
  cursor: default;
}

.knit-settings-nav--danger .knit-settings-nav__label {
  color: #e11d48;
}

.knit-settings-nav__label {
  grid-column: 1;
  font-size: 0.92rem;
  font-weight: 600;
}

.knit-settings-nav__meta {
  grid-column: 1;
  font-size: var(--knit-hint-size);
  font-weight: var(--knit-hint-weight);
  letter-spacing: var(--knit-hint-ls);
  color: var(--knit-text-muted);
  line-height: var(--knit-hint-lh);
}

html:not([data-device-login="desktop"]) .knit-settings-group[data-knit-settings-desktop-hw-only] {
  display: none !important;
}

.knit-settings-nav__meta--compact,
.knit-settings-nav__meta--tablet {
  display: none;
}

.knit-settings-nav__value {
  grid-column: 2;
  grid-row: 1 / span 2;
  font-size: 0.8rem;
  color: var(--knit-text-muted);
  text-align: right;
}

.knit-settings-nav__chevron {
  grid-column: 3;
  grid-row: 1 / span 2;
  color: var(--knit-text-muted);
  font-size: 1.15rem;
}

.knit-settings-toggle {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 0.75rem;
  padding: 0.72rem 0.8rem;
  border-bottom: 1px solid var(--knit-divider);
  cursor: pointer;
}

.knit-settings-toggle__text {
  display: flex;
  flex-direction: column;
  gap: 0.15rem;
  min-width: 0;
}

.knit-settings-toggle input {
  position: absolute;
  opacity: 0;
  pointer-events: none;
}

.knit-settings-switch {
  flex-shrink: 0;
  width: 2.35rem;
  height: 1.28rem;
  border-radius: 999px;
  background: #6b7280;
  position: relative;
  transition: background 0.18s ease;
}

.knit-settings-switch::after {
  content: "";
  position: absolute;
  top: 0.12rem;
  left: 0.12rem;
  width: 1.04rem;
  height: 1.04rem;
  border-radius: 50%;
  background: var(--knit-panel-bg);
  transition: transform 0.18s ease;
}

.knit-settings-toggle input:checked + .knit-settings-switch {
  background: #e11d48;
}

.knit-settings-toggle input:checked + .knit-settings-switch::after {
  transform: translateX(1.05rem);
}

.knit-settings-option {
  width: 100%;
  padding: 0.78rem 0.8rem;
  border: none;
  border-bottom: 1px solid var(--knit-divider);
  background: transparent;
  color: var(--knit-text-heading);
  text-align: left;
  cursor: pointer;
  font-size: 0.92rem;
}

.knit-settings-option:hover {
  background: var(--knit-control-hover-bg);
}

.knit-settings-option.is-active {
  font-weight: 700;
  color: #e11d48;
}

.knit-settings-stepper {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 0.75rem;
  padding: 0.72rem 0.8rem;
  border-bottom: 1px solid var(--knit-divider);
}

.knit-settings-stepper__ctrl {
  display: flex;
  align-items: center;
  gap: 0.35rem;
  flex-shrink: 0;
}

.knit-settings-stepper__btn {
  width: 1.85rem;
  height: 1.85rem;
  border: 1px solid var(--knit-control-border);
  border-radius: 8px;
  background: var(--knit-control-bg);
  color: var(--knit-control-text);
  font: inherit;
  font-size: 1.05rem;
  line-height: 1;
  cursor: pointer;
}

.knit-settings-stepper__btn:hover:not(:disabled),
.knit-settings-stepper__btn:focus-visible {
  background: var(--knit-control-hover-bg);
}

.knit-settings-stepper__btn:disabled {
  opacity: 0.4;
  cursor: default;
}

.knit-settings-stepper__value {
  min-width: 1.6rem;
  text-align: center;
  font-size: 0.92rem;
  font-weight: 700;
  color: var(--knit-text-heading);
}

.knit-settings-group .knit-settings-hint {
  margin-top: 0.45rem;
}

.knit-settings-hint,
.knit-settings-empty,
.knit-settings-login-hint,
.knit-settings-form-hint {
  margin: 0;
  font-size: var(--knit-hint-size);
  font-weight: var(--knit-hint-weight);
  letter-spacing: var(--knit-hint-ls);
  color: var(--knit-text-muted);
  line-height: var(--knit-hint-lh);
}

.knit-settings-empty {
  padding: 0.85rem 0.2rem;
  text-align: center;
  font-size: var(--knit-empty-size);
  font-weight: var(--knit-empty-weight);
  letter-spacing: var(--knit-empty-ls);
  line-height: var(--knit-empty-lh);
}

.knit-settings-user-tools {
  position: relative;
}

.knit-settings-search,
.knit-settings-field input {
  width: 100%;
  box-sizing: border-box;
  border: 1px solid var(--knit-control-border);
  border-radius: 8px;
  background: var(--knit-control-bg);
  color: var(--knit-text-heading);
  padding: 0.55rem 0.7rem;
  font: inherit;
}

.knit-settings-suggest,
.knit-settings-user-list {
  list-style: none;
  margin: 0;
  padding: 0;
}

.knit-settings-suggest {
  position: absolute;
  z-index: 2;
  left: 0;
  right: 0;
  top: calc(100% + 0.25rem);
  background: var(--knit-modal-bg);
  border: 1px solid var(--knit-control-border);
  border-radius: 8px;
  max-height: 12rem;
  overflow: auto;
  box-shadow: var(--knit-modal-shadow);
}

.knit-settings-user-item,
.knit-settings-suggest-item {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 0.6rem;
  padding: 0.58rem 0.15rem;
  border-bottom: 1px solid var(--knit-divider);
}

.knit-settings-suggest-item {
  width: 100%;
  border: none;
  border-bottom: 1px solid var(--knit-divider);
  background: transparent;
  color: inherit;
  cursor: pointer;
  text-align: left;
  font: inherit;
}

.knit-settings-suggest-item:hover {
  background: var(--knit-control-hover-bg);
}

.knit-settings-user-name {
  font-size: 0.88rem;
  font-weight: 600;
}

.knit-settings-device-list {
  list-style: none;
  margin: 0 0 0.65rem;
  padding: 0;
}

.knit-settings-device-row {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 0.7rem;
  padding: 0.72rem 0;
  border-bottom: 1px solid var(--knit-divider);
}

.knit-settings-device-row:last-child {
  border-bottom: none;
}

.knit-settings-device-main {
  min-width: 0;
}

.knit-settings-device-title {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 0.35rem;
  font-size: 0.88rem;
  font-weight: 700;
  color: var(--knit-text-heading);
}

.knit-settings-device-kind {
  flex: 0 0 auto;
  font-size: 0.66rem;
  font-weight: 700;
  color: #c93030;
  background: rgba(201, 48, 48, 0.08);
  border-radius: 999px;
  padding: 0.08rem 0.4rem;
}

.knit-settings-device-now {
  font-size: 0.66rem;
  font-weight: 700;
  font-style: normal;
  color: #15803d;
  background: rgba(21, 128, 61, 0.1);
  border-radius: 999px;
  padding: 0.08rem 0.4rem;
}

.knit-settings-device-meta {
  margin: 0.22rem 0 0;
  font-size: 0.74rem;
  color: var(--knit-text-muted);
  line-height: 1.45;
}

.knit-settings-user-remove,
.knit-settings-device-remove {
  border: 1px solid var(--knit-control-border);
  background: transparent;
  color: var(--knit-text-body);
  border-radius: 7px;
  padding: 0.2rem 0.55rem;
  cursor: pointer;
  font-size: 0.78rem;
}

.knit-settings-form {
  display: flex;
  flex-direction: column;
  gap: 0.7rem;
}

.knit-settings-field {
  display: flex;
  flex-direction: column;
  gap: 0.3rem;
  font-size: 0.8rem;
  color: var(--knit-text-muted);
}

.knit-settings-code-row {
  display: flex;
  align-items: stretch;
  gap: 0.45rem;
}

.knit-settings-code-row input {
  flex: 1 1 auto;
  min-width: 0;
}

.knit-settings-code-row .knit-settings-secondary-btn {
  flex: 0 0 auto;
  white-space: nowrap;
  padding: 0.5rem 0.7rem;
}

.knit-settings-form-hint.is-error {
  color: #b42318;
}

.knit-settings-primary-btn,
.knit-settings-secondary-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border: none;
  border-radius: 8px;
  padding: 0.55rem 0.9rem;
  font-size: 0.88rem;
  font-weight: 600;
  cursor: pointer;
  text-decoration: none;
}

.knit-settings-primary-btn {
  color: #fff;
  background: #e11d48;
}

.knit-settings-secondary-btn {
  color: var(--knit-text-heading);
  background: var(--knit-control-bg);
  border: 1px solid var(--knit-control-border);
}

.knit-settings-group-label {
  margin: 0 0 0.45rem;
  font-size: 0.78rem;
  font-weight: 600;
  color: var(--knit-text-muted);
}

.knit-settings-picks {
  display: flex;
  flex-direction: column;
  gap: 0.32rem;
}

.knit-settings-pick {
  display: flex;
  align-items: center;
  gap: 0.45rem;
  width: 100%;
  padding: 0.48rem 0.55rem;
  border: 1px solid var(--knit-control-border);
  border-radius: 8px;
  background: var(--knit-control-bg);
  color: var(--knit-control-text);
  cursor: pointer;
  font-size: 0.86rem;
  text-align: left;
  transition: background 0.15s, border-color 0.15s, color 0.15s;
}

.knit-settings-pick:hover {
  background: var(--knit-control-hover-bg);
}

.knit-settings-pick.is-active {
  border-color: var(--knit-control-active-border);
  background: var(--knit-control-active-bg);
  font-weight: 600;
}

.knit-feed-layout-mode.knit-settings-pick {
  flex-direction: column;
  align-items: stretch;
  gap: 0.4rem;
  width: auto;
  padding: 0.55rem 0.55rem 0.5rem;
  border-radius: 12px;
  text-align: left;
}

.knit-feed-layout-mode.knit-settings-pick.is-active {
  border-color: var(--knit-chrome-active, #2563eb);
  box-shadow: 0 0 0 1px var(--knit-chrome-active, #2563eb);
  background: color-mix(in srgb, var(--knit-chrome-active, #2563eb) 6%, var(--knit-control-bg));
}

.knit-settings-picks--cols {
  flex-direction: row;
  flex-wrap: wrap;
}

.knit-settings-picks--cols .knit-settings-pick {
  width: auto;
  min-width: 2.35rem;
  justify-content: center;
  padding: 0.38rem 0.55rem;
}

.knit-settings-pick-preview {
  width: 1.75rem;
  height: 1.2rem;
  border-radius: 4px;
  border: 1px solid var(--knit-control-border);
  flex-shrink: 0;
}

.knit-settings-pick-preview--dark {
  background: #181818;
}

.knit-settings-pick-preview--light {
  background: var(--knit-panel-bg);
}

.knit-settings-pick-label {
  line-height: 1.2;
}

.knit-settings-picks--color-disc {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 0.5rem;
}

.knit-settings-pick--color-disc {
  flex-direction: column;
  align-items: center;
  justify-content: flex-start;
  text-align: center;
  padding: 0.65rem 0.5rem 0.55rem;
  gap: 0.5rem;
}

.knit-settings-color-disc-preview {
  display: block;
  width: 92px;
  height: 92px;
  border-radius: 10px;
  background: #2b3038;
  flex-shrink: 0;
}

html[data-knit-theme="light"] .knit-settings-color-disc-preview {
  background: #e8edf4;
}

html[data-knit-chat-badge="off"] .knit-side-messages-badge,
html[data-knit-chat-badge="off"] .knit-bottom-nav__badge,
html[data-knit-chat-badge="off"] .knit-msg-unread-badge {
  display: none !important;
}

/* 私信：右侧最小化停靠（最多 3 个） */
.knit-dm-minimized-dock {
  position: fixed;
  top: 0;
  left: 0;
  width: 0;
  height: 0;
  padding: 0;
  display: block;
  background: transparent;
  pointer-events: none;
  overflow: visible;
  /* 高于作品详情全屏层 1550、底栏 1560，避免详情里点私信窗被挡住 */
  z-index: 1600;
}

.knit-dm-minimized-dock[hidden] {
  display: none !important;
}

.knit-dm-minimized-dock__item {
  pointer-events: auto;
  display: flex;
  flex-direction: column;
  padding: 0;
  overflow: hidden;
  border: 1px solid var(--knit-dm-border);
  min-width: 0;
  min-height: 0;
  max-width: none;
  max-height: none;
  border-radius: 10px 0 0 10px;
  box-shadow: var(--knit-dm-dock-shadow);
  cursor: pointer;
  background: var(--knit-dm-bg);
  transition: box-shadow 0.24s ease;
  animation: knit-dm-dock-enter 0.28s cubic-bezier(0.22, 1, 0.36, 1) both;
  backface-visibility: hidden;
}

.knit-dm-minimized-dock__item--instant {
  animation: none;
}

@keyframes knit-dm-dock-enter {
  from {
    opacity: 0;
    transform: translate3d(16px, 0, 0) scale(0.94);
  }

  to {
    opacity: 1;
    transform: translate3d(0, 0, 0) scale(1);
  }
}

.knit-dm-chat__panel--flipping {
  will-change: transform, border-radius;
  contain: layout style paint;
  backface-visibility: hidden;
  transition:
    transform var(--knit-float-morph-ms, 0.46s) cubic-bezier(0.22, 0.82, 0.18, 1) !important,
    border-radius var(--knit-float-morph-ms, 0.46s) cubic-bezier(0.22, 0.82, 0.18, 1),
    box-shadow var(--knit-float-morph-ms, 0.46s) ease;
}

.knit-dm-chat__panel--wechat-morph {
  transition: none !important;
}

.knit-dm-chat__panel--wechat-morph > *:not(.knit-dm-chat__resize-handles):not(.knit-fav-float__resize-handles) {
  visibility: hidden !important;
  opacity: 0 !important;
  pointer-events: none !important;
  transition: none !important;
}

.knit-float-dock-ghost {
  pointer-events: none !important;
  z-index: 1900 !important;
  margin: 0 !important;
  animation: none !important;
}

.knit-dm-chat__panel--reveal-content {
  --knit-float-content-opacity: 1;
}

.knit-dm-chat__panel--reveal-content > *:not(.knit-dm-chat__resize-handles):not(.knit-fav-float__resize-handles) {
  opacity: var(--knit-float-content-opacity, 1);
  pointer-events: none !important;
}

.knit-dm-minimized-dock__item .knit-dm-chat__minimize {
  display: none;
}

.knit-dm-minimized-dock__item:hover {
  box-shadow: -8px 0 32px rgba(0, 0, 0, 0.55);
  background: #0a0a0a;
}

.knit-dm-minimized-dock__item--drop-target,
.knit-dm-minimized-dock__item--favorite.knit-dm-minimized-dock__item--drop-target {
  outline: 2px solid var(--knit-red, #c93030);
  outline-offset: -2px;
  box-shadow: -8px 0 28px rgba(201, 48, 48, 0.35);
}

.knit-dock-drag-ghost {
  position: fixed;
  z-index: 2600;
  left: 0;
  top: 0;
  width: 4.4rem;
  height: 5.6rem;
  border-radius: 10px;
  overflow: hidden;
  pointer-events: none;
  box-shadow: 0 10px 28px rgba(0, 0, 0, 0.38);
  background: #111;
  color: #fff;
  font-size: 0.72rem;
  display: flex;
  align-items: center;
  justify-content: center;
  will-change: transform, opacity;
  transform: translate3d(0, 0, 0);
}

.knit-dock-drag-ghost--fly {
  transition:
    transform 0.22s cubic-bezier(0.22, 1, 0.36, 1),
    opacity 0.22s ease;
}

.knit-dock-drag-ghost img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}

.knit-dm-minimized-dock__item .knit-dm-chat__avatar {
  transition: transform 0.32s cubic-bezier(0.34, 1.3, 0.64, 1);
}

.knit-dm-minimized-dock__item:hover .knit-dm-chat__avatar {
  transform: scale(1.06);
}

.knit-dm-minimized-dock__item .knit-dm-chat__header {
  flex-direction: column;
  align-items: center;
  gap: 0.45rem;
  padding: 0.55rem 0.35rem 0.65rem;
  border-bottom: none;
  cursor: pointer;
}

.knit-dm-minimized-dock__item .knit-dm-chat__peer {
  flex-direction: column;
  align-items: center;
  gap: 0.35rem;
}

.knit-dm-minimized-dock__item .knit-dm-chat__title {
  writing-mode: horizontal-tb;
  text-orientation: mixed;
  font-size: 0.68rem;
  max-width: 2.6rem;
  max-height: none;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  letter-spacing: 0.01em;
}

.knit-dm-minimized-dock__item .knit-dm-chat__header-actions {
  flex-direction: column;
  gap: 0.2rem;
}

/* 私信：非模态悬浮窗，不遮挡页面点击 */
#knitDmModal.knit-dup-modal {
  inset: auto;
  top: 0;
  left: 0;
  width: 0;
  height: 0;
  padding: 0;
  display: block;
  background: transparent;
  pointer-events: none;
  overflow: visible;
  z-index: 1600;
}

#knitDmModal .knit-dm-chat__panel--positioned {
  position: fixed;
  z-index: 1600;
  margin: 0;
  flex-shrink: 0;
}

#knitDmModal .knit-dm-chat__panel--fullscreen {
  position: fixed;
  inset: 0;
  left: 0 !important;
  top: 0 !important;
  width: 100vw !important;
  height: 100vh !important;
  max-width: none !important;
  max-height: none !important;
  min-width: 0 !important;
  min-height: 0 !important;
  margin: 0 !important;
  border-radius: 0 !important;
  box-shadow: none;
  z-index: 1600;
}

#knitDmModal .knit-dm-chat__panel--fullscreen .knit-dm-chat__resize-handles {
  display: none;
}

#knitDmModal.knit-dup-modal[hidden] {
  display: none !important;
  pointer-events: none !important;
}

#knitDmModal.knit-dup-modal:not([hidden]):has(.knit-dm-chat__panel--fullscreen):not(.knit-dup-modal--floating) {
  inset: 0;
  width: 100%;
  height: 100%;
  pointer-events: auto;
}

#knitDmModal .knit-dm-chat__panel {
  width: min(22rem, 92vw);
  height: min(88vh, calc(100vh - 2rem));
  max-width: 92vw;
  max-height: 92vh;
  min-width: 17.5rem;
  min-height: 20rem;
  flex-shrink: 0;
  padding: 0;
  background: var(--knit-dm-bg);
  border-radius: 10px;
  overflow: hidden;
  pointer-events: auto;
  z-index: 1600;
  box-shadow: var(--knit-dm-shadow);
  backface-visibility: hidden;
}

#knitDmModal .knit-dm-chat__panel--minimized,
.knit-dm-minimized-dock__item.knit-dm-chat__panel--minimized {
  min-width: 0;
  min-height: 0;
  max-width: none;
  max-height: none;
  border-radius: 10px 0 0 10px;
  box-shadow: var(--knit-dm-dock-shadow);
  cursor: pointer;
}

#knitDmModal .knit-dm-chat__panel--minimized:hover,
.knit-dm-minimized-dock__item.knit-dm-chat__panel--minimized:hover {
  box-shadow: var(--knit-dm-dock-hover-shadow);
  background: var(--knit-dm-dock-hover-bg);
}

#knitDmModal .knit-dm-chat__panel--minimized .knit-dm-chat__avatar,
.knit-dm-minimized-dock__item.knit-dm-chat__panel--minimized .knit-dm-chat__avatar {
  transition: transform 0.32s cubic-bezier(0.34, 1.3, 0.64, 1);
}

#knitDmModal .knit-dm-chat__panel--minimized:hover .knit-dm-chat__avatar,
.knit-dm-minimized-dock__item.knit-dm-chat__panel--minimized:hover .knit-dm-chat__avatar {
  transform: scale(1.06);
}

#knitDmModal .knit-dm-chat__panel--minimized .knit-dm-chat__header,
.knit-dm-minimized-dock__item.knit-dm-chat__panel--minimized .knit-dm-chat__header {
  flex-direction: column;
  align-items: center;
  gap: 0.45rem;
  padding: 0.55rem 0.35rem 0.65rem;
  border-bottom: none;
  cursor: pointer;
}

#knitDmModal .knit-dm-chat__panel--minimized .knit-dm-chat__peer,
.knit-dm-minimized-dock__item.knit-dm-chat__panel--minimized .knit-dm-chat__peer {
  flex-direction: column;
  align-items: center;
  gap: 0.35rem;
}

#knitDmModal .knit-dm-chat__panel--minimized .knit-dm-chat__sub,
.knit-dm-minimized-dock__item.knit-dm-chat__panel--minimized .knit-dm-chat__sub {
  display: none;
}

#knitDmModal .knit-dm-chat__panel--minimized .knit-dm-chat__title,
.knit-dm-minimized-dock__item.knit-dm-chat__panel--minimized .knit-dm-chat__title {
  writing-mode: horizontal-tb;
  text-orientation: mixed;
  font-size: 0.68rem;
  max-width: 2.6rem;
  max-height: none;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  letter-spacing: 0.01em;
}

#knitDmModal .knit-dm-chat__panel--minimized .knit-dm-chat__header-actions,
.knit-dm-minimized-dock__item.knit-dm-chat__panel--minimized .knit-dm-chat__header-actions {
  flex-direction: column;
  gap: 0.2rem;
}

#knitDmModal .knit-dm-chat__panel--minimizing,
#knitDmModal .knit-dm-chat__panel--restoring {
  overflow: hidden;
}

.knit-dm-chat__messages,
.knit-dm-chat__status,
.knit-dm-chat__composer,
.knit-dm-chat__toolbar {
  transition: opacity 0.2s ease;
}

#knitDmModal .knit-dm-chat__panel--minimized .knit-dm-chat__body {
  flex: 0 0 auto;
  min-height: 0;
  overflow: hidden;
}

#knitDmModal .knit-dm-chat__panel--minimized .knit-dm-chat__messages,
#knitDmModal .knit-dm-chat__panel--minimized .knit-dm-chat__status,
#knitDmModal .knit-dm-chat__panel--minimized .knit-dm-chat__composer,
#knitDmModal .knit-dm-chat__panel--minimized .knit-dm-chat__toolbar {
  opacity: 0;
  pointer-events: none;
  max-height: 0;
  overflow: hidden;
  margin: 0;
  padding-top: 0;
  padding-bottom: 0;
  border-width: 0;
}

#knitDmModal .knit-dm-chat__panel--minimized .knit-dm-chat__resize-handles {
  display: none;
}

/* ---------- 我的作品右键菜单 / 详情作者编辑 / 电子色卡关联 ---------- */
.knit-ctx-menu {
  position: fixed;
  z-index: 12000;
  min-width: 10.5rem;
  padding: 0.28rem;
  margin: 0;
  list-style: none;
  background: var(--knit-modal-bg);
  border: 1px solid var(--knit-modal-border);
  border-radius: 10px;
  box-shadow: var(--knit-modal-shadow);
  box-sizing: border-box;
}

.knit-ctx-menu[hidden] {
  display: none !important;
}

.knit-ctx-menu__btn {
  display: block;
  width: 100%;
  margin: 0;
  padding: 0.48rem 0.72rem;
  border: none;
  border-radius: 8px;
  background: transparent;
  font: inherit;
  font-size: 0.86rem;
  color: var(--knit-text-heading);
  text-align: left;
  cursor: pointer;
}

.knit-ctx-menu__btn:hover {
  background: var(--knit-control-hover-bg);
}

.knit-ctx-menu__btn--danger {
  color: #b91c1c;
}

.knit-admin-mod-ctx {
  min-width: 11.5rem;
}

.knit-admin-mod-ctx__title {
  margin: 0;
  padding: 0.35rem 0.72rem 0.2rem;
  font-size: 0.72rem;
  font-weight: 600;
  letter-spacing: 0.02em;
  color: var(--knit-text-muted, #64748b);
}

.knit-admin-mod-ctx__history {
  margin-top: 0.15rem;
  border-top: 1px solid var(--knit-modal-border, #e2e8f0);
  border-radius: 0 0 8px 8px;
}

.knit-admin-mod-modal__panel {
  width: min(26rem, 92vw);
}

.knit-admin-mod-history-list {
  display: flex;
  flex-direction: column;
  gap: 0.55rem;
  max-height: min(50vh, 22rem);
  overflow: auto;
  margin: 0.35rem 0 0.75rem;
}

.knit-admin-mod-history-item {
  padding: 0.55rem 0.65rem;
  border: 1px solid var(--knit-modal-border, #e2e8f0);
  border-radius: 8px;
  background: var(--knit-control-hover-bg, #f8fafc);
  font-size: 0.82rem;
  line-height: 1.45;
}

.knit-admin-mod-history-item__head {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  gap: 0.35rem 0.65rem;
  margin-bottom: 0.2rem;
  font-weight: 600;
}

.knit-admin-mod-history-item__meta {
  color: var(--knit-text-muted, #64748b);
  font-size: 0.75rem;
}

.knit-admin-mod-history-item__revoke {
  margin-top: 0.35rem;
}

.knit-fp-author-edit-toolbar {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0.45rem 0.65rem;
  margin: 0 0 0.55rem;
  padding: 0.45rem 0.55rem;
  border: 1px solid #dbe2f0;
  border-radius: 10px;
  background: var(--knit-control-hover-bg);
  box-sizing: border-box;
}

.knit-fp-author-edit-toolbar[hidden] {
  display: none !important;
}

.knit-fp-author-edit-toolbar-title {
  font-size: 0.8rem;
  font-weight: 700;
  color: var(--knit-text-body);
  margin-right: auto;
}

.knit-fp-author-edit-toolbar-actions {
  display: flex;
  gap: 0.35rem;
  flex-shrink: 0;
}

.knit-fp-author-edit-save,
.knit-fp-author-edit-exit {
  border-radius: 8px;
  padding: 0.26rem 0.55rem;
  font-size: 0.76rem;
  font-weight: 600;
  cursor: pointer;
  border: 1px solid var(--knit-control-border, var(--knit-panel-border));
  background: var(--knit-control-bg, #fff);
  color: var(--knit-text-body, #334155);
}

.knit-fp-author-edit-save {
  background: #2563eb;
  border-color: #2563eb;
  color: #fff;
}

.knit-fp-author-edit-toolbar-hint {
  flex: 1 0 100%;
  margin: 0;
  font-size: var(--knit-hint-size);
  font-weight: var(--knit-hint-weight);
  letter-spacing: var(--knit-hint-ls);
  line-height: var(--knit-hint-lh);
  color: var(--knit-text-muted);
}

.knit-fp-author-edit-toolbar-hint[hidden] {
  display: none !important;
}

.knit-fp-author-edit-em {
  font-weight: 700;
  color: var(--knit-text-heading);
}

.knit-fullpage-right.knit-fp-inline-editing .knit-fp-inline-editable {
  outline: 1px dashed rgba(37, 99, 235, 0.5);
  outline-offset: 2px;
  border-radius: 6px;
  min-height: 1.35em;
  white-space: pre-wrap;
  word-break: break-word;
  cursor: text;
}

.knit-fullpage-right.knit-fp-inline-editing .knit-fp-yarn-meta-row.knit-fp-inline-editable {
  display: block;
}

.knit-ecc-link-banner {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  z-index: 95;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 0.75rem;
  padding: 0.42rem 1rem 0.48rem 1.25rem;
  background: #1e3a5f;
  border-bottom: 1px solid #0f172a;
  box-sizing: border-box;
}

.knit-ecc-link-banner[hidden] {
  display: none !important;
}

.knit-ecc-link-banner-text {
  font-size: 0.8rem;
  line-height: 1.35;
  color: #e2e8f0;
  flex: 1 1 auto;
  min-width: 0;
}

.knit-ecc-link-banner-cancel {
  flex-shrink: 0;
  padding: 0.28rem 0.65rem;
  border-radius: 6px;
  border: 1px solid rgba(255, 255, 255, 0.35);
  background: transparent;
  color: #fff;
  font-size: 0.78rem;
  cursor: pointer;
}

.knit-ecc-link-banner-cancel:hover {
  background: rgba(255, 255, 255, 0.1);
}

.knit-ecc-link-banner.knit-ecc-link-banner--success {
  background: #14532d;
  border-bottom-color: #052e16;
}

.knit-ecc-link-banner.knit-ecc-link-banner--success .knit-ecc-link-banner-text {
  color: #ecfdf5;
}

/* 色号关联：封面预览（星标 / 多关联时整行） */
#knitEccLinkPreviewModal {
  position: fixed;
  inset: 0;
  z-index: 12100;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 1rem;
  box-sizing: border-box;
}

#knitEccLinkPreviewModal[hidden] {
  display: none !important;
}

.knit-ecc-link-preview-backdrop {
  position: absolute;
  inset: 0;
  border: none;
  padding: 0;
  margin: 0;
  background: rgba(15, 23, 42, 0.45);
  cursor: pointer;
}

.knit-ecc-link-preview-dialog {
  position: relative;
  z-index: 1;
  width: min(100%, 26rem);
  max-height: min(88vh, 32rem);
  overflow: hidden;
  display: flex;
  flex-direction: column;
  background: var(--knit-modal-bg, #fff);
  border-radius: 12px;
  box-shadow: 0 18px 48px rgba(15, 23, 42, 0.22);
  border: 1px solid var(--knit-modal-border, var(--knit-panel-border));
}

.knit-ecc-link-preview-head {
  flex-shrink: 0;
  padding: 0.65rem 1rem;
  border-bottom: 1px solid #eef2f7;
  font-size: 0.9rem;
  font-weight: 700;
  color: var(--knit-text-heading);
}

.knit-ecc-link-preview-grid {
  flex: 1 1 auto;
  min-height: 0;
  overflow: auto;
  padding: 0.75rem;
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(6.5rem, 1fr));
  gap: 0.65rem;
  box-sizing: border-box;
}

.knit-ecc-link-preview-card {
  display: flex;
  flex-direction: column;
  align-items: stretch;
  gap: 0.35rem;
  margin: 0;
  padding: 0.4rem;
  border: 1px solid #e5e9f0;
  border-radius: 10px;
  background: #fafbfc;
  cursor: pointer;
  text-align: left;
  font: inherit;
  color: inherit;
  box-sizing: border-box;
  transition: background 0.12s ease, border-color 0.12s ease;
}

.knit-ecc-link-preview-card:hover:not(:disabled) {
  background: var(--knit-control-hover-bg);
  border-color: var(--knit-panel-border);
}

.knit-ecc-link-preview-card:disabled,
.knit-ecc-link-preview-card--missing {
  opacity: 0.55;
  cursor: not-allowed;
}

.knit-ecc-link-preview-thumb-wrap {
  position: relative;
  width: 100%;
  aspect-ratio: 1;
  border-radius: 8px;
  overflow: hidden;
  background: #e8ecf2;
}

.knit-ecc-link-preview-skel {
  position: absolute;
  inset: 0;
  background: linear-gradient(110deg, #e8ecf2 0%, #f4f6f9 45%, #e8ecf2 90%);
  animation: knit-ecc-preview-pulse 1.1s ease-in-out infinite;
}

@keyframes knit-ecc-preview-pulse {
  0%,
  100% {
    opacity: 1;
  }
  50% {
    opacity: 0.55;
  }
}

.knit-ecc-link-preview-thumb {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}

.knit-ecc-link-preview-meta {
  font-size: 0.72rem;
  line-height: 1.25;
  color: var(--knit-text-muted);
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.knit-ecc-link-preview-foot {
  flex-shrink: 0;
  padding: 0.55rem 1rem;
  border-top: 1px solid #eef2f7;
  display: flex;
  justify-content: flex-end;
}

.knit-ecc-link-preview-close {
  padding: 0.32rem 0.75rem;
  border-radius: 8px;
  border: 1px solid var(--knit-panel-border);
  background: var(--knit-panel-bg);
  font-size: 0.82rem;
  cursor: pointer;
  color: var(--knit-text-body);
}

.knit-ecc-link-preview-close:hover {
  background: var(--knit-panel-bg-alt);
}

.knit-fp-yarn-table tr.knit-fp-yarn-link-row td {
  font-size: 0.78rem;
  vertical-align: middle;
  padding-top: 0.45rem;
  padding-bottom: 0.45rem;
  background: rgba(239, 246, 255, 0.55);
  border-bottom: 1px solid #dbeafe;
}

.knit-fp-yarn-link-kind {
  color: var(--knit-text-muted);
  font-weight: 600;
  white-space: nowrap;
}

.knit-fp-yarn-link-preview {
  color: var(--knit-text-body);
  word-break: break-word;
}

.knit-fp-yarn-link-action {
  text-align: right;
  white-space: nowrap;
}

button.knit-fp-yarn-link-open:not(.knit-fp-yarn-ecc-jump),
button.knit-fp-fabric-ecc-open {
  padding: 0.2rem 0.5rem;
  font-size: 0.72rem;
  border-radius: 5px;
  border: 1px solid #2563eb;
  background: #eff6ff;
  color: #1d4ed8;
  cursor: pointer;
}

button.knit-fp-yarn-link-open:not(.knit-fp-yarn-ecc-jump):hover,
button.knit-fp-fabric-ecc-open:hover {
  background: #dbeafe;
}

.knit-fp-fabric-ecc-link {
  display: inline-flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0.35rem;
}

/* 色彩收藏夹：按作品打开时，聚焦已收藏色号 */
#knitFullpage.knit-fp-color-focus .knit-fullpage-right[data-knit-fp-channel="yarn"] #knitFpIntroBlock,
#knitFullpage.knit-fp-color-focus .knit-fullpage-right[data-knit-fp-channel="yarn"] .knit-fp-publish,
#knitFullpage.knit-fp-color-focus .knit-fullpage-right[data-knit-fp-channel="yarn"] .knit-fp-comments,
#knitFullpage.knit-fp-color-focus .knit-fullpage-right[data-knit-fp-channel="yarn"] #knitFpYarnDetailStack > .knit-fp-yarn-sec {
  display: none !important;
}

#knitFullpage.knit-fp-color-focus .knit-fullpage-right[data-knit-fp-channel="yarn"] #knitFpYarnDetailPhotoWrap {
  display: block !important;
}

#knitFullpage.knit-fp-color-focus
  .knit-fullpage-right[data-knit-fp-channel="yarn"]
  .knit-fp-yarn-detail-spread {
  display: flex;
  justify-content: center;
}

#knitFullpage.knit-fp-color-focus
  .knit-fullpage-right[data-knit-fp-channel="yarn"]
  .knit-fp-yarn-detail-photo-cell:not(.knit-fp-yarn-detail-photo-cell--ecc) {
  display: none !important;
}

#knitFullpage.knit-fp-color-focus .knit-fullpage-right[data-knit-fp-channel="yarn"] #knitFpFollowBtn,
#knitFullpage.knit-fp-color-focus .knit-fullpage-right[data-knit-fp-channel="yarn"] #knitFpLikeBtn,
#knitFullpage.knit-fp-color-focus .knit-fullpage-right[data-knit-fp-channel="yarn"] #knitFpAuthorLikeBtn,
#knitFullpage.knit-fp-color-focus .knit-fullpage-right[data-knit-fp-channel="yarn"] #knitFpFavoriteBtn,
#knitFullpage.knit-fp-color-focus .knit-fullpage-right[data-knit-fp-channel="yarn"] .knit-ecc-swatch-star-zone,
#knitFullpage.knit-fp-color-focus .knit-fullpage-right[data-knit-fp-channel="yarn"] .knit-ecc-swatch-star {
  display: none !important;
}

#knitFullpage.knit-fp-color-focus .knit-fullpage-right[data-knit-fp-channel="yarn"] .knit-ecc-swatch-btn {
  pointer-events: auto;
  cursor: context-menu;
}

/* 收藏色号：隐藏原电子色卡页，改用均匀重排网格 */
#knitFullpage.knit-fp-color-focus
  .knit-fullpage-right[data-knit-fp-channel="yarn"]
  .knit-fp-yarn-detail-photo-cell--ecc,
#knitFullpage.knit-fp-color-focus
  .knit-fullpage-right[data-knit-fp-channel="yarn"]
  .knit-fp-yarn-detail-photo-cell--ecc.is-color-focus-empty,
#knitFullpage.knit-fp-color-focus
  .knit-fullpage-right[data-knit-fp-channel="yarn"]
  .knit-fp-yarn-detail-photo-cell--ecc[hidden] {
  display: none !important;
}

#knitFullpage.knit-fp-color-focus
  .knit-fullpage-right[data-knit-fp-channel="yarn"]
  #knitFpYarnDetailPhotoGrid {
  display: none !important;
}

.knit-fp-color-focus-board {
  --knit-fav-color-cols: 3;
  display: grid;
  grid-template-columns: repeat(var(--knit-fav-color-cols), minmax(0, 1fr));
  gap: 0.55rem;
  width: 100%;
  margin: 0 0 0.35rem;
  padding: 0.15rem 0 0.35rem;
  box-sizing: border-box;
}

.knit-fp-color-focus-board-empty {
  grid-column: 1 / -1;
  margin: 1.2rem 0;
  text-align: center;
  color: var(--knit-text-muted);
  font-size: var(--knit-empty-size);
  font-weight: var(--knit-empty-weight);
  letter-spacing: var(--knit-empty-ls);
  line-height: var(--knit-empty-lh);
}

.knit-fp-color-focus-board .knit-fp-color-focus-swatch,
.knit-fp-color-focus-board .knit-ecc-swatch-btn {
  position: relative !important;
  display: block !important;
  width: 100% !important;
  min-height: 7.5rem;
  aspect-ratio: 3 / 4;
  height: auto !important;
  margin: 0 !important;
  padding: 0 !important;
  grid-row: auto !important;
  grid-column: auto !important;
  border: none !important;
  border-radius: 10px !important;
  overflow: hidden !important;
  background: #e5e7eb !important;
  box-shadow: inset 0 0 0 1px rgba(15, 23, 42, 0.08);
}

/* 重排后脱离色卡格子选择器，需自行铺满色值层 */
.knit-fp-color-focus-board .knit-ecc-swatch-media,
.knit-fp-color-focus-board .knit-dev-colorchip {
  position: absolute !important;
  inset: 0 !important;
  z-index: 0 !important;
  display: block !important;
  width: 100% !important;
  height: 100% !important;
  max-width: none !important;
  min-width: 0 !important;
  min-height: 0 !important;
  margin: 0 !important;
  aspect-ratio: auto !important;
  border: none !important;
  border-radius: inherit !important;
  overflow: hidden !important;
  vertical-align: top;
}

.knit-fp-color-focus-board .knit-ecc-swatch-color,
.knit-fp-color-focus-board .knit-ecc-swatch-img {
  position: absolute;
  inset: 0;
  border-radius: inherit;
}

.knit-fp-color-focus-board .knit-ecc-swatch-img img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
  pointer-events: none;
}

.knit-fp-color-focus-board .knit-ecc-swatch-color--empty {
  background: repeating-linear-gradient(
    -45deg,
    #f3f4f6,
    #f3f4f6 6px,
    #e5e7eb 6px,
    #e5e7eb 12px
  );
}

/* 复用详情页的 clip-path 切换语义 */
.knit-fp-color-focus-board .knit-ecc-swatch-media[data-ecc-view="color"] .knit-ecc-swatch-color {
  clip-path: inset(0 0 0 0);
  opacity: 1;
}
.knit-fp-color-focus-board .knit-ecc-swatch-media[data-ecc-view="color"] .knit-ecc-swatch-img {
  clip-path: inset(0 0 100% 0);
  opacity: 0;
}
.knit-fp-color-focus-board .knit-ecc-swatch-media[data-ecc-view="image"] .knit-ecc-swatch-color {
  clip-path: inset(100% 0 0 0);
  opacity: 0;
}
.knit-fp-color-focus-board .knit-ecc-swatch-media[data-ecc-view="image"] .knit-ecc-swatch-img {
  clip-path: inset(0 0 0 0);
  opacity: 1;
}
.knit-fp-color-focus-board .knit-ecc-swatch-media[data-ecc-view="split"] .knit-ecc-swatch-color {
  clip-path: polygon(0 0, 100% 0, 0 100%);
  opacity: 1;
}
.knit-fp-color-focus-board .knit-ecc-swatch-media[data-ecc-view="split"] .knit-ecc-swatch-img {
  clip-path: polygon(100% 0, 100% 100%, 0 100%);
  opacity: 1;
}

.knit-fp-color-focus-board .knit-dev-ocr-text,
.knit-fp-color-focus-board .knit-ecc-swatch-label-wrap,
.knit-fp-color-focus-board .knit-fp-yarn-ecc-line-inner {
  position: absolute !important;
  left: 0.35rem;
  bottom: 0.35rem;
  z-index: 2;
  max-width: calc(100% - 0.7rem);
  padding: 0.12rem 0.4rem;
  border-radius: 999px;
  background: rgba(255, 255, 255, 0.92);
  color: var(--knit-text-heading);
  font-size: 0.68rem;
  font-weight: 650;
  line-height: 1.2;
  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.12);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.knit-fp-color-focus-board .knit-dev-ocr-hex {
  display: none;
}

/* 收藏色号聚焦顶栏：切换展示 + 下载 + 排列（独立布局，不套色卡绝对页眉） */
.knit-fp-color-focus-chrome {
  display: flex;
  flex-direction: column;
  align-items: stretch;
  gap: 0.3rem;
  margin: 0 0 0.5rem;
  padding: 0.35rem 0.45rem;
  border: 1px solid var(--knit-panel-border, #e5e7eb);
  border-radius: 10px;
  background: var(--knit-panel-bg, #fff);
  box-shadow: none;
  position: relative;
  z-index: 5;
  overflow: visible;
}

.knit-fp-color-focus-toolbar {
  display: flex;
  flex-direction: row;
  align-items: center;
  justify-content: space-between;
  gap: 0.4rem;
  width: 100%;
}

.knit-fp-color-focus-toolbar-main {
  display: inline-flex;
  align-items: center;
  gap: 0.35rem;
  flex: 0 0 auto;
  min-width: 0;
}

.knit-fp-color-focus-chrome .knit-fp-yarn-ecc-view-cycle,
.knit-fp-color-focus-chrome .knit-fp-yarn-ecc-download-btn,
.knit-fp-color-focus-chrome .knit-fp-yarn-ecc-copy-btn {
  pointer-events: auto;
  position: static !important;
}

.knit-fp-color-focus-cols {
  display: flex !important;
  align-items: center;
  justify-content: flex-end;
  gap: 2px;
  width: auto;
  flex: 0 0 auto;
  box-sizing: border-box;
  padding: 2px;
  border-radius: 8px;
  background: var(--knit-control-bg, #f3f4f6);
  border: 1px solid var(--knit-control-border, #e5e7eb);
}

.knit-fp-color-focus-cols-label {
  display: none;
}

.knit-fp-color-focus-cols-btn {
  appearance: none;
  border: none;
  margin: 0;
  flex: 0 0 auto;
  min-width: 1.55rem;
  height: 1.4rem;
  padding: 0 0.38rem;
  border-radius: 6px;
  font: inherit;
  font-size: 0.72rem;
  font-weight: 600;
  line-height: 1;
  color: var(--knit-control-text, #374151);
  background: transparent;
  cursor: pointer;
  white-space: nowrap;
}

.knit-fp-color-focus-cols-btn:hover {
  background: var(--knit-control-hover-bg, rgba(0, 0, 0, 0.06));
}

.knit-fp-color-focus-cols-btn.is-active {
  background: var(--knit-pill-active-bg);
  color: #fff;
}

html[data-knit-theme="dark"] .knit-fp-color-focus-cols-btn.is-active {
  background: var(--knit-control-bg);
  color: var(--knit-text-heading);
}

.knit-fp-color-focus-chrome-hint {
  display: none;
}

/* 聚焦模式：各色卡页眉控件仍可点 */
#knitFullpage.knit-fp-color-focus
  .knit-fullpage-right[data-knit-fp-channel="yarn"]
  .knit-fp-yarn-detail-photo-cell--ecc
  .knit-fp-yarn-ecc-chrome {
  z-index: 8;
}

/* 提示 / 空状态：桌面、手机、平板共用同一套字号与行距 */
.knit-search-empty,
.knit-imgsearch-hint,
.knit-msg-empty,
.knit-biz-sheet-empty,
.knit-mine-edit-avatar-hint,
.knit-mine-history-hint,
.knit-mine-vis-friends-hint,
.knit-mine-empty,
.knit-export-hint,
.knit-data-usage-hint,
.knit-admin-empty,
.knit-admin-search-hint,
.knit-favorite-folder-empty,
.knit-fav-float__hint,
.knit-fav-float__empty,
.knit-note-visibility-friends__hint,
.knit-note-visibility-friends__empty,
.knit-user-profile-empty,
.knit-grid > .knit-home-empty,
.knit-list-state,
.knit-dev-news-hint,
.knit-creator-upload-hint,
.knit-creator-compress-hint,
.knit-dev-block-add-picker-empty,
.knit-dev-size-chart-hint,
.knit-dev-ecc-slot-batch-hint,
.knit-dev-colorcard-grid-hint,
.knit-dev-hover-picker-hint,
.knit-fp-inline-empty,
.knit-fp-inline-empty-cell,
.knit-dm-modal__hint,
.knit-dm-vis-empty,
.knit-mine-blocklist-hint,
.knit-mine-blocklist-empty,
.knit-dm-chat__empty,
.knit-fp-feature-results-hint,
.knit-fp-c-thread-empty,
.knit-fp-reply-hint,
.knit-settings-hint,
.knit-settings-empty,
.knit-settings-login-hint,
.knit-settings-form-hint,
.knit-fp-author-edit-toolbar-hint,
.knit-fp-color-focus-board-empty {
  font-family: inherit;
  text-wrap: pretty;
}

/* ---------- 深色模式：收藏悬浮窗等补充 ---------- */
html[data-knit-theme="dark"] .knit-fav-float__panel {
  background: var(--knit-panel-bg);
  border: 1px solid rgba(245, 158, 11, 0.32);
  box-shadow: var(--knit-panel-shadow);
}

html[data-knit-theme="dark"] .knit-fav-float__header {
  background: var(--knit-panel-bg);
  border-bottom-color: var(--knit-divider);
}

html[data-knit-theme="dark"] .knit-fav-float__header .knit-dm-chat__title {
  color: var(--knit-text-heading);
}

html[data-knit-theme="dark"] .knit-fav-float__header .knit-dm-chat__sub {
  color: var(--knit-text-muted);
}

html[data-knit-theme="dark"] .knit-fav-float__toolbar {
  background: var(--knit-panel-bg);
  border-bottom-color: var(--knit-divider);
}

html[data-knit-theme="dark"] .knit-fav-float__toolbar-label,
html[data-knit-theme="dark"] .knit-fav-float__drop-text,
html[data-knit-theme="dark"] .knit-fav-float__hint,
html[data-knit-theme="dark"] .knit-fav-float__item-meta {
  color: var(--knit-text-muted);
}

html[data-knit-theme="dark"] .knit-fav-float__select,
html[data-knit-theme="dark"] .knit-fav-float__input {
  background: var(--knit-input-bg);
  color: var(--knit-input-text);
  border-color: var(--knit-control-border);
}

html[data-knit-theme="dark"] .knit-fav-float__drop {
  background: var(--knit-panel-bg-alt);
  border-color: rgba(245, 158, 11, 0.35);
}

html[data-knit-theme="dark"] .knit-fav-float__panel--drop-target .knit-fav-float__drop,
html[data-knit-theme="dark"] #knitFavoriteFloatModal .knit-dm-chat__panel--drop-target .knit-fav-float__drop {
  background: rgba(245, 158, 11, 0.12);
  border-color: rgba(245, 158, 11, 0.55);
}

html[data-knit-theme="dark"] .knit-fav-float__empty {
  background: var(--knit-panel-bg-alt);
  color: var(--knit-text-muted);
  border: 1px dashed var(--knit-panel-border);
}

html[data-knit-theme="dark"] .knit-fav-float__item {
  border-bottom-color: var(--knit-divider);
}

html[data-knit-theme="dark"] .knit-fav-float__thumb {
  background: var(--knit-control-hover-bg);
  border-color: var(--knit-panel-border);
}

html[data-knit-theme="dark"] .knit-fav-float__thumb--swatch {
  background: repeating-conic-gradient(#2a2f3a 0% 25%, #1a1d24 0% 50%) 50% / 10px 10px;
  border-color: rgba(255, 255, 255, 0.18);
  box-shadow: inset 0 0 0 1px rgba(0, 0, 0, 0.25);
}

html[data-knit-theme="dark"] .knit-fav-float__item-title {
  color: var(--knit-text-heading);
}

html[data-knit-theme="dark"] .knit-fav-float__item--color .knit-fav-float__item-title {
  color: #5eead4;
}

html[data-knit-theme="dark"] .knit-fav-float__item-btn,
html[data-knit-theme="dark"] .knit-fav-float__page-btn {
  background: var(--knit-control-bg);
  color: var(--knit-control-text);
  border-color: var(--knit-control-border);
}

html[data-knit-theme="dark"] .knit-fav-float__footer {
  background: var(--knit-panel-bg);
  border-top-color: var(--knit-divider);
}

html[data-knit-theme="dark"] .knit-msg-clear-btn {
  background: var(--knit-control-bg);
}

/* ---------- 深色模式：硬编码浅色面补齐 ---------- */
html[data-knit-theme="dark"] .knit-search {
  color: var(--knit-input-text);
  background: var(--knit-input-bg);
  border-color: var(--knit-control-border);
}

html[data-knit-theme="dark"] .knit-search::placeholder {
  color: var(--knit-text-subtle);
}

html[data-knit-theme="dark"] .knit-search:focus {
  border-color: rgba(255, 255, 255, 0.28);
}

html[data-knit-theme="dark"] .knit-home-grid-head {
  background: rgba(26, 29, 36, 0.96);
  border-color: var(--knit-panel-border);
  box-shadow: 0 8px 24px rgba(0, 0, 0, 0.35);
}

html[data-knit-theme="dark"] .knit-home-grid-col-trigger {
  color: var(--knit-text-body);
  background: rgba(34, 38, 47, 0.96);
  border-color: var(--knit-control-border);
  box-shadow: 0 2px 10px rgba(0, 0, 0, 0.28);
}

html[data-knit-theme="dark"] .knit-home-grid-col-trigger-suffix {
  color: var(--knit-text-muted);
}

html[data-knit-theme="dark"] .knit-home-grid-col-panel {
  background: var(--knit-panel-bg);
  border-color: var(--knit-panel-border);
  box-shadow: var(--knit-panel-shadow);
}

html[data-knit-theme="dark"] .knit-card--open .knit-pattern-meta {
  background: linear-gradient(
    180deg,
    rgba(18, 20, 26, 0) 0%,
    rgba(18, 20, 26, 0.88) 34%,
    rgba(18, 20, 26, 0.96) 58%
  );
  box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.06);
}

html[data-knit-theme="dark"] #knitGrid > .knit-card .knit-cell,
html[data-knit-theme="dark"] #knitGridNews > .knit-card .knit-cell,
html[data-knit-theme="dark"] #knitGridYarn > .knit-card .knit-cell {
  box-shadow:
    0 2px 10px rgba(0, 0, 0, 0.4),
    0 1px 3px rgba(0, 0, 0, 0.28);
}

html[data-knit-theme="dark"] #knitGrid[data-knit-author-meta="1"] .knit-card-layer,
html[data-knit-theme="dark"] #knitGridNews[data-knit-author-meta="1"] .knit-card-layer,
html[data-knit-theme="dark"] #knitGridYarn[data-knit-author-meta="1"] .knit-card-layer {
  /* 深灰底：相对页底 #11131a 抬起，仍和面板区分 */
  --knit-meta-panel-bg: #2a2f3a;
  box-shadow:
    0 2px 12px rgba(0, 0, 0, 0.45),
    0 0 0 1px rgba(255, 255, 255, 0.06);
}

html[data-knit-theme="dark"] #knitGrid[data-knit-author-meta="1"] .knit-cell,
html[data-knit-theme="dark"] #knitGridNews[data-knit-author-meta="1"] .knit-cell,
html[data-knit-theme="dark"] #knitGridYarn[data-knit-author-meta="1"] .knit-cell {
  box-shadow: none;
}

html[data-knit-theme="dark"] #knitGrid[data-knit-author-meta="1"] .knit-card--open .knit-card-layer,
html[data-knit-theme="dark"] #knitGridNews[data-knit-author-meta="1"] .knit-card--open .knit-card-layer,
html[data-knit-theme="dark"] #knitGridYarn[data-knit-author-meta="1"] .knit-card--open .knit-card-layer {
  box-shadow: 0 12px 32px rgba(0, 0, 0, 0.55);
}

html[data-knit-theme="dark"] #knitGrid[data-knit-author-meta="1"] .knit-card--open .knit-pattern-meta,
html[data-knit-theme="dark"] #knitGridNews[data-knit-author-meta="1"] .knit-card--open .knit-pattern-meta,
html[data-knit-theme="dark"] #knitGridYarn[data-knit-author-meta="1"] .knit-card--open .knit-pattern-meta {
  background: linear-gradient(
    180deg,
    rgba(18, 20, 26, 0) 0%,
    rgba(18, 20, 26, 0.88) 34%,
    rgba(18, 20, 26, 0.96) 58%
  );
  border: 0;
  box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.06);
}

html[data-knit-theme="dark"] .knit-meta-nickname,
html[data-knit-theme="dark"] .knit-meta-line,
html[data-knit-theme="dark"] .knit-meta-label,
html[data-knit-theme="dark"] .knit-meta-value,
html[data-knit-theme="dark"] .knit-card--open .knit-meta-nickname,
html[data-knit-theme="dark"] .knit-card--open .knit-meta-line,
html[data-knit-theme="dark"] .knit-card--open .knit-meta-label,
html[data-knit-theme="dark"] .knit-card--open .knit-meta-value {
  color: var(--knit-text-heading);
  text-shadow: 0 1px 2px rgba(0, 0, 0, 0.55);
}

html[data-knit-theme="dark"] .knit-card--open .knit-meta-value,
html[data-knit-theme="dark"] .knit-card--open .knit-meta-line--hover-text {
  color: var(--knit-text-body);
}

html[data-knit-theme="dark"] .knit-text-hover-popover__panel {
  background: var(--knit-dark-elevated);
  border-color: var(--knit-panel-border);
  box-shadow: 0 8px 28px rgba(0, 0, 0, 0.45);
}

html[data-knit-theme="dark"] .knit-text-hover-popover__body {
  color: var(--knit-text-body);
}

html[data-knit-theme="dark"] .knit-fullpage-right {
  background: var(--knit-dark-panel);
  border-left-color: var(--knit-panel-border);
  color: var(--knit-view-text);
}

html[data-knit-theme="dark"] .knit-fp-author {
  border-bottom-color: var(--knit-divider);
}

html[data-knit-theme="dark"] .knit-fp-author-name,
html[data-knit-theme="dark"] .knit-fullpage-right[data-knit-fp-channel="yarn"] .knit-fp-author-name {
  color: var(--knit-text-heading);
}

html[data-knit-theme="dark"] .knit-fp-intro,
html[data-knit-theme="dark"] .knit-fp-feature-title {
  color: var(--knit-text-body);
}

html[data-knit-theme="dark"] .knit-fp-c-name,
html[data-knit-theme="dark"] .knit-fp-reply-thread-nick {
  color: var(--knit-text-heading);
}

html[data-knit-theme="dark"] .knit-fp-c-text,
html[data-knit-theme="dark"] .knit-fp-c-quote-text,
html[data-knit-theme="dark"] .knit-fp-reply-thread-item,
html[data-knit-theme="dark"] .knit-fp-reply-thread-msg {
  color: var(--knit-text-body);
}

html[data-knit-theme="dark"] .knit-fp-c-quote {
  background: rgba(255, 255, 255, 0.05);
}

html[data-knit-theme="dark"] .knit-fp-c-quote-label,
html[data-knit-theme="dark"] .knit-fp-c-reply-to,
html[data-knit-theme="dark"] .knit-fp-c-time,
html[data-knit-theme="dark"] .knit-fp-publish .knit-fp-time {
  color: var(--knit-text-muted);
}

html[data-knit-theme="dark"] .knit-fp-textarea {
  color: var(--knit-input-text);
  background: var(--knit-input-bg);
  border-color: var(--knit-control-border);
}

html[data-knit-theme="dark"] .knit-fp-compose,
html[data-knit-theme="dark"] .knit-fp-author {
  border-color: var(--knit-divider);
}

html[data-knit-theme="dark"] .knit-home-back-to-top {
  color: var(--knit-text-heading);
  background: rgba(30, 41, 59, 0.94);
  border-color: var(--knit-panel-border);
  box-shadow: 0 4px 16px rgba(0, 0, 0, 0.4);
}

html[data-knit-theme="dark"] .knit-user-profile-last-viewed {
  background: rgba(154, 52, 18, 0.22);
  border-color: rgba(251, 146, 60, 0.45);
  color: #fdba74;
}

html[data-knit-theme="dark"] .knit-user-profile-last-viewed-dismiss {
  color: #fdba74;
}

html[data-knit-theme="dark"] .knit-fp-action-btn {
  background: var(--knit-control-bg);
  color: var(--knit-control-text);
  border-color: var(--knit-control-border);
}

html[data-knit-theme="dark"] .knit-fp-action-btn:hover,
html[data-knit-theme="dark"] .knit-fp-action-btn:focus-visible {
  background: var(--knit-control-hover-bg);
  color: var(--knit-text-heading);
  border-color: rgba(255, 255, 255, 0.22);
}

html[data-knit-theme="dark"] .knit-fp-action-btn--active {
  background: var(--knit-red);
  color: #fff;
  border-color: var(--knit-red);
}

html[data-knit-theme="dark"] .knit-fp-yarn-inner,
html[data-knit-theme="dark"] .knit-fp-reply-inner {
  background: var(--knit-panel-bg);
  border-color: var(--knit-panel-border);
  color: var(--knit-view-text);
}

html[data-knit-theme="dark"] .knit-fp-yarn-head,
html[data-knit-theme="dark"] .knit-fp-reply-thread-box {
  border-bottom-color: var(--knit-divider);
  border-top-color: var(--knit-divider);
}

html[data-knit-theme="dark"] .knit-fp-yarn-title,
html[data-knit-theme="dark"] .knit-fp-reply-kicker {
  color: var(--knit-text-heading);
}

html[data-knit-theme="dark"] .knit-fp-reply-target,
html[data-knit-theme="dark"] .knit-fp-reply-hint {
  color: var(--knit-text-muted);
}

/* 纱线详情 / 电子色卡：覆盖硬编码浅色底与深色字（含 phone/tablet 后加载样式） */
html[data-knit-theme="dark"] #knitFullpage[data-knit-yarn-detail="1"],
html[data-knit-theme="dark"][data-device="phone"] #knitFullpage[data-knit-yarn-detail="1"],
html[data-knit-theme="dark"][data-device="tablet"] #knitFullpage[data-knit-yarn-detail="1"] {
  background: var(--knit-main-bg, var(--knit-dark-bg));
}

html[data-knit-theme="dark"] .knit-fullpage-right[data-knit-fp-channel="yarn"],
html[data-knit-theme="dark"] #knitFullpage[data-knit-yarn-detail="1"] .knit-fullpage-right,
html[data-knit-theme="dark"][data-device="phone"] #knitFullpage[data-knit-yarn-detail="1"] .knit-fullpage-right,
html[data-knit-theme="dark"][data-device="tablet"] #knitFullpage[data-knit-yarn-detail="1"] .knit-fullpage-right {
  background: var(--knit-view-bg, var(--knit-dark-panel));
  color: var(--knit-view-text);
}

html[data-knit-theme="dark"] .knit-fp-inline-yarn-board {
  background: var(--knit-page-bg-alt);
  border-color: var(--knit-control-border);
}

html[data-knit-theme="dark"] .knit-fp-inline-yarn-board .knit-fp-yarn-table,
html[data-knit-theme="dark"] .knit-fp-yarn-table tbody td {
  background: var(--knit-panel-bg);
  color: var(--knit-text-heading);
  border-color: var(--knit-panel-border);
}

html[data-knit-theme="dark"] .knit-fp-yarn-table thead th {
  background: var(--knit-page-bg-alt);
  color: var(--knit-text-muted);
  border-bottom-color: var(--knit-panel-border);
}

html[data-knit-theme="dark"] .knit-fp-yarn-table tbody tr:not(.knit-fp-yarn-link-row):hover td {
  background: var(--knit-control-hover-bg);
}

html[data-knit-theme="dark"] .knit-fp-follow,
html[data-knit-theme="dark"] .knit-fp-favorite,
html[data-knit-theme="dark"] .knit-fp-img-tab {
  background: var(--knit-panel-bg);
}

html[data-knit-theme="dark"] .knit-fp-fabric-line,
html[data-knit-theme="dark"] .knit-fp-inline-empty-cell {
  color: var(--knit-text-body);
}

html[data-knit-theme="dark"] .knit-fp-comment-dock:not([hidden]) {
  color: var(--knit-text-muted);
  background: var(--knit-input-bg);
  border-color: var(--knit-control-border);
}

html[data-knit-theme="dark"] .knit-fp-comment-dock-input {
  color: var(--knit-text-body);
}

html[data-knit-theme="dark"] .knit-fp-feature-inner,
html[data-knit-theme="dark"] .knit-fp-yarn-close,
html[data-knit-theme="dark"] .knit-fp-feature-close {
  background: var(--knit-panel-bg);
  border-color: var(--knit-panel-border);
  color: var(--knit-view-text);
}

html[data-knit-theme="dark"] .knit-fp-yarn-close,
html[data-knit-theme="dark"] .knit-fp-feature-close {
  background: var(--knit-chrome-hover);
  color: var(--knit-text-muted);
}

html[data-knit-theme="dark"] .knit-fp-yarn-close:hover,
html[data-knit-theme="dark"] .knit-fp-feature-close:hover {
  background: var(--knit-chrome-active);
  color: var(--knit-text-heading);
}

html[data-knit-theme="dark"] .knit-fp-size-chart-layout-bar,
html[data-knit-theme="dark"] .knit-fp-size-chart-zoom-bar {
  background: var(--knit-control-bg);
  border-color: var(--knit-control-border);
}

html[data-knit-theme="dark"] .knit-fp-size-chart-layout-btn,
html[data-knit-theme="dark"] .knit-fp-size-chart-zoom-btn {
  color: var(--knit-text-muted);
}

html[data-knit-theme="dark"] .knit-fp-size-chart-layout-btn:hover,
html[data-knit-theme="dark"] .knit-fp-size-chart-layout-btn:focus-visible,
html[data-knit-theme="dark"] .knit-fp-size-chart-zoom-btn:hover,
html[data-knit-theme="dark"] .knit-fp-size-chart-zoom-btn:focus-visible {
  background: var(--knit-control-hover-bg);
  color: var(--knit-text-heading);
}

html[data-knit-theme="dark"] .knit-fp-size-chart-layout-btn.is-active,
html[data-knit-theme="dark"] .knit-fp-size-chart-layout-btn[aria-pressed="true"] {
  background: var(--knit-control-active-bg);
  color: var(--knit-text-heading);
}

html[data-knit-theme="dark"] .knit-fp-author-edit-exit {
  background: var(--knit-control-bg);
  border-color: var(--knit-control-border);
  color: var(--knit-text-body);
}

html[data-knit-theme="dark"] .knit-ecc-download-choice {
  background: var(--knit-panel-bg);
}

html[data-knit-theme="dark"] .knit-ecc-download-choice:hover {
  background: var(--knit-control-hover-bg);
}

html[data-knit-theme="dark"] .knit-ecc-link-preview-dialog {
  background: var(--knit-modal-bg);
  border-color: var(--knit-modal-border);
}

html[data-knit-theme="dark"] .knit-ecc-link-preview-head {
  color: var(--knit-text-heading);
  border-bottom-color: var(--knit-divider);
}

html[data-knit-theme="dark"] .knit-ecc-disc-zoom__dialog {
  background: var(--knit-modal-bg);
  border-color: var(--knit-modal-border);
}

html[data-knit-theme="dark"] .knit-ecc-disc-zoom__head {
  color: var(--knit-text-heading);
}

html[data-knit-theme="dark"] .knit-ecc-disc-zoom__meta {
  color: var(--knit-text-muted);
}

html[data-knit-theme="dark"] .knit-ecc-disc-zoom__close {
  background: #e5e7eb;
  color: var(--knit-text-heading);
}

html[data-knit-theme="dark"] .knit-ecc-disc-zoom__close:hover,
html[data-knit-theme="dark"] .knit-ecc-disc-zoom__close:focus-visible {
  background: var(--knit-control-bg);
}

html[data-knit-theme="dark"] .knit-fp-img-tab:hover {
  background: var(--knit-control-hover-bg);
  color: var(--knit-text-heading);
  border-color: rgba(255, 255, 255, 0.22);
}

html[data-knit-theme="dark"] .knit-fp-back-to-top {
  color: var(--knit-text-heading);
  background: var(--knit-panel-bg);
  box-shadow: 0 4px 16px rgba(0, 0, 0, 0.4);
}

html[data-knit-theme="dark"] .knit-fp-back-to-top:hover {
  background: var(--knit-control-hover-bg);
}

html[data-knit-theme="dark"] .knit-fullpage-right[data-knit-fp-channel="yarn"] .knit-fp-author-name {
  color: var(--knit-text-heading);
}

html[data-knit-theme="dark"] .knit-fp-yarn-sec-title,
html[data-knit-theme="dark"] .knit-fullpage-right[data-knit-fp-channel="yarn"] .knit-fp-yarn-sec-body,
html[data-knit-theme="dark"] .knit-fp-yarn-sec-body--meta {
  color: var(--knit-text-body);
}

html[data-knit-theme="dark"] .knit-fullpage-right[data-knit-fp-channel="yarn"] .knit-fp-yarn-sec-body .knit-fp-colon-key {
  color: var(--knit-text-heading);
}

html[data-knit-theme="dark"] .knit-fullpage-right[data-knit-fp-channel="yarn"] .knit-fp-yarn-meta-sep {
  color: var(--knit-text-subtle);
}

html[data-knit-theme="dark"] .knit-fullpage-right[data-knit-fp-channel="yarn"] .knit-fp-side-scroll > .knit-fp-publish,
html[data-knit-theme="dark"] .knit-fullpage-right[data-knit-fp-channel="yarn"] #knitFpYarnDetailStack + .knit-fp-publish {
  border-top-color: var(--knit-divider);
}

html[data-knit-theme="dark"] .knit-fullpage-right[data-knit-fp-channel="yarn"] .knit-fp-publish .knit-fp-time {
  color: var(--knit-text-muted);
}

html[data-knit-theme="dark"] .knit-fullpage-right[data-knit-fp-channel="yarn"] .knit-fp-yarn-detail-photo-cell {
  background: var(--knit-dark-elevated);
}

html[data-knit-theme="dark"] .knit-fullpage-right[data-knit-fp-channel="yarn"] .knit-fp-yarn-detail-photo-cell--ecc,
html[data-knit-theme="dark"]
  #knitFullpage[data-knit-yarn-detail="1"]
  .knit-fullpage-right[data-knit-fp-channel="yarn"]
  .knit-fp-yarn-detail-photo-cell--ecc {
  background: var(--knit-dark-elevated);
  border-color: rgba(255, 255, 255, 0.12);
  box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.03);
}

html[data-knit-theme="dark"] .knit-fullpage-right[data-knit-fp-channel="yarn"] .knit-fp-yarn-ecc-page {
  color: var(--knit-text-muted);
}

html[data-knit-theme="dark"] .knit-fullpage-right[data-knit-fp-channel="yarn"] .knit-fp-yarn-ecc-body {
  color: var(--knit-text-body);
}

html[data-knit-theme="dark"] .knit-fullpage-right[data-knit-fp-channel="yarn"] .knit-fp-yarn-ecc-body .knit-dev-colorcard-item {
  border-bottom-color: rgba(255, 255, 255, 0.08);
}

html[data-knit-theme="dark"] .knit-fullpage-right[data-knit-fp-channel="yarn"] .knit-fp-yarn-ecc-body .knit-dev-colorcard-item,
html[data-knit-theme="dark"] .knit-fullpage-right[data-knit-fp-channel="yarn"] .knit-fp-yarn-ecc-body .knit-ecc-swatch-btn,
html[data-knit-theme="dark"] .knit-fullpage-right[data-knit-fp-channel="yarn"] .knit-fp-yarn-ecc-body .knit-dev-ocr-text,
html[data-knit-theme="dark"] .knit-fullpage-right[data-knit-fp-channel="yarn"] .knit-fp-yarn-ecc-body .knit-fp-yarn-ecc-line-inner {
  color: var(--knit-text-heading) !important;
}

html[data-knit-theme="dark"] .knit-fullpage-right[data-knit-fp-channel="yarn"] .knit-fp-yarn-ecc-body .knit-fp-colon-key {
  color: var(--knit-text-heading);
}

html[data-knit-theme="dark"] .knit-fullpage-right[data-knit-fp-channel="yarn"] button.knit-ecc-swatch-btn:hover,
html[data-knit-theme="dark"]
  .knit-fullpage-right[data-knit-fp-channel="yarn"]
  button.knit-ecc-swatch-btn.knit-fp-yarn-ecc-line:hover {
  background: rgba(255, 255, 255, 0.06);
}

html[data-knit-theme="dark"]
  #knitFullpage[data-knit-yarn-detail="1"]
  .knit-fullpage-right[data-knit-fp-channel="yarn"]
  .knit-fp-yarn-ecc-body
  .knit-dev-ocr-hex {
  color: var(--knit-text-muted);
}

html[data-knit-theme="dark"]
  #knitFullpage[data-knit-yarn-detail="1"]
  .knit-fullpage-right[data-knit-fp-channel="yarn"]
  .knit-fp-yarn-detail-photo-cell--ecc
  .knit-fp-yarn-ecc-body
  .knit-dev-ocr-board--yarn-fp-fill.knit-dev-ocr-board--cell-grid
  .knit-dev-ocr-panel {
  border-color: rgba(255, 255, 255, 0.12);
  background: rgba(18, 20, 26, 0.55);
}

html[data-knit-theme="dark"]
  #knitFullpage[data-knit-yarn-detail="1"]
  .knit-fullpage-right[data-knit-fp-channel="yarn"]
  .knit-fp-yarn-detail-photo-cell--ecc
  .knit-fp-yarn-ecc-body
  .knit-dev-ocr-board--yarn-fp-fill.knit-dev-ocr-board--cell-grid
  .knit-ecc-swatch-label-wrap,
html[data-knit-theme="dark"]
  #knitFullpage[data-knit-yarn-detail="1"]
  .knit-fullpage-right[data-knit-fp-channel="yarn"]
  .knit-fp-yarn-detail-photo-cell--ecc
  .knit-fp-yarn-ecc-body
  .knit-dev-ocr-board--yarn-fp-fill.knit-dev-ocr-board--cell-grid
  .knit-dev-ocr-text,
html[data-knit-theme="dark"]
  #knitFullpage[data-knit-yarn-detail="1"]
  .knit-fullpage-right[data-knit-fp-channel="yarn"]
  .knit-fp-yarn-detail-photo-cell--ecc
  .knit-fp-yarn-ecc-body
  .knit-dev-ocr-board--yarn-fp-fill.knit-dev-ocr-board--cell-grid
  .knit-dev-ocr-hex {
  background: rgba(18, 20, 26, 0.82);
  color: var(--knit-text-heading) !important;
}

html[data-knit-theme="dark"] .knit-fp-yarn-ecc-download-btn,
html[data-knit-theme="dark"] .knit-fp-yarn-ecc-copy-btn {
  background: rgba(34, 38, 47, 0.92);
  border-color: #60a5fa;
  color: #93c5fd;
  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.35);
}

html[data-knit-theme="dark"] .knit-fp-yarn-ecc-download-btn:hover,
html[data-knit-theme="dark"] .knit-fp-yarn-ecc-copy-btn:hover {
  background: rgba(42, 47, 58, 0.98);
  border-color: #93c5fd;
}

html[data-knit-theme="dark"] .knit-fp-yarn-ecc-view-cycle {
  border-color: rgba(255, 255, 255, 0.22);
  background: var(--knit-dark-overlay);
  color: #f3f4f6;
  box-shadow: 0 3px 10px rgba(0, 0, 0, 0.35);
}

html[data-knit-theme="dark"] .knit-fp-yarn-ecc-view-cycle:hover {
  background: #323846;
}

html[data-knit-theme="dark"] .knit-fp-color-focus-board .knit-dev-ocr-text,
html[data-knit-theme="dark"] .knit-fp-color-focus-board .knit-ecc-swatch-label-wrap,
html[data-knit-theme="dark"] .knit-fp-color-focus-board .knit-fp-yarn-ecc-line-inner {
  background: rgba(18, 20, 26, 0.88);
  color: var(--knit-text-heading);
  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.4);
}

html[data-knit-theme="dark"] .knit-fp-color-focus-board-empty {
  color: var(--knit-text-muted);
}

html[data-knit-theme="dark"] .knit-dev-table {
  background: var(--knit-panel-bg);
}

html[data-knit-theme="dark"] .knit-dev-table th,
html[data-knit-theme="dark"] .knit-dev-table td {
  border-color: var(--knit-panel-border);
  color: var(--knit-text-body);
}

html[data-knit-theme="dark"] .knit-dev-cell-input {
  background: var(--knit-input-bg);
  color: var(--knit-input-text);
  border-color: var(--knit-control-border);
}

html[data-knit-theme="dark"] .knit-dm-settings-menu {
  background: var(--knit-modal-bg);
  border-color: var(--knit-modal-border);
  box-shadow: var(--knit-modal-shadow);
  color: var(--knit-text-heading);
}

html[data-knit-theme="dark"] .knit-dm-settings-menu.knit-dm-settings-menu--floating {
  color: var(--knit-text-heading);
}

html[data-knit-theme="dark"] .knit-dm-settings-menu__btn {
  color: var(--knit-text-heading);
}

html[data-knit-theme="dark"] .knit-dm-settings-menu__btn:hover {
  background: var(--knit-control-hover-bg);
}

html[data-knit-theme="dark"] .knit-dm-settings-menu__btn--danger {
  color: #f87171;
}

html[data-knit-theme="dark"] .knit-dm-settings-menu__btn.is-confirm-pending {
  background: rgba(245, 158, 11, 0.16);
}

html[data-knit-theme="dark"] .knit-dm-chat__panel:not(.knit-dm-minimized-dock__item--diandian),
html[data-knit-theme="dark"] #knitDmModal .knit-dm-chat__panel:not(.knit-dm-minimized-dock__item--diandian) {
  background: var(--knit-dark-chrome);
  border-color: var(--knit-modal-border);
  box-shadow: var(--knit-modal-shadow);
}

html[data-knit-theme="dark"] .knit-dm-chat__header,
html[data-knit-theme="dark"] .knit-dm-chat__messages {
  background: var(--knit-dark-chrome);
  border-color: var(--knit-modal-border);
}

html[data-knit-theme="dark"] .knit-dm-chat__title {
  color: var(--knit-text-heading);
}

html[data-knit-theme="dark"] .knit-dm-chat__sub,
html[data-knit-theme="dark"] .knit-dm-chat__time {
  color: var(--knit-text-muted);
}

html[data-knit-theme="dark"] .knit-dm-chat__row--peer .knit-dm-chat__bubble {
  background: var(--knit-dark-elevated);
  color: var(--knit-text-heading);
}

html[data-knit-theme="dark"] .knit-dm-chat__row--peer .knit-dm-chat__bubble::before {
  border-color: transparent var(--knit-dark-elevated) transparent transparent;
}

html[data-knit-theme="dark"] .knit-dm-chat__composer {
  background: var(--knit-dark-panel);
  border-top-color: var(--knit-modal-border);
}

html[data-knit-theme="dark"] .knit-dm-chat__toolbar {
  background: var(--knit-dark-chrome);
}

html[data-knit-theme="dark"] .knit-dm-chat__input,
html[data-knit-theme="dark"] .knit-dm-chat__image-btn,
html[data-knit-theme="dark"] .knit-dm-chat__tool-btn {
  background: var(--knit-dark-elevated);
  color: var(--knit-input-text);
}

html[data-knit-theme="dark"] .knit-dm-chat__input::placeholder {
  color: var(--knit-text-subtle);
}

html[data-knit-theme="dark"] .knit-dm-chat__input:focus,
html[data-knit-theme="dark"] .knit-dm-chat__image-btn:hover:not(:disabled),
html[data-knit-theme="dark"] .knit-dm-chat__image-btn:focus-visible {
  background: var(--knit-dark-overlay);
  color: var(--knit-text-heading);
}

html[data-knit-theme="dark"] .knit-dm-chat__settings:hover,
html[data-knit-theme="dark"] .knit-dm-chat__settings[aria-expanded="true"],
html[data-knit-theme="dark"] .knit-dm-chat__settings:focus-visible,
html[data-knit-theme="dark"] .knit-dm-chat__layout:hover,
html[data-knit-theme="dark"] .knit-dm-chat__layout:focus-visible,
html[data-knit-theme="dark"] .knit-dm-chat__layout.is-active,
html[data-knit-theme="dark"] .knit-dm-chat__minimize:hover,
html[data-knit-theme="dark"] .knit-dm-chat__close:hover {
  background: var(--knit-dark-overlay);
  color: var(--knit-text-heading);
}

html[data-knit-theme="dark"] .knit-dm-chat__tool-tile {
  background: var(--knit-dark-elevated);
  color: var(--knit-text-heading);
}

html[data-knit-theme="dark"] .knit-dm-chat__tool-tile:hover:not(:disabled) {
  background: var(--knit-dark-overlay);
}

html[data-knit-theme="dark"] .knit-dm-minimized-dock__item:not(.knit-dm-minimized-dock__item--diandian) {
  background: var(--knit-dark-chrome);
  border-color: var(--knit-modal-border);
}

html[data-knit-theme="dark"] #knitDmModal .knit-dm-chat__panel--minimized:hover,
html[data-knit-theme="dark"] .knit-dm-minimized-dock__item.knit-dm-chat__panel--minimized:not(.knit-dm-minimized-dock__item--diandian):hover {
  background: var(--knit-dark-panel);
}

html[data-knit-theme="dark"] #knitDiandianModal .knit-diandian__panel:not(.knit-dm-minimized-dock__item),
html[data-knit-theme="dark"] .knit-diandian__panel:not(.knit-dm-minimized-dock__item):not(.knit-diandian--hang) {
  background: var(--knit-dark-chrome);
  border-color: var(--knit-modal-border);
  box-shadow: var(--knit-modal-shadow);
}

html[data-knit-theme="dark"] #knitDiandianModal .knit-diandian__header,
html[data-knit-theme="dark"] #knitDiandianModal .knit-dm-chat__header.knit-diandian__header,
html[data-knit-theme="dark"] .knit-diandian__header {
  background: var(--knit-dark-chrome);
  border-bottom-color: var(--knit-modal-border);
}

html[data-knit-theme="dark"] #knitDiandianModal .knit-diandian__header .knit-dm-chat__title,
html[data-knit-theme="dark"] .knit-diandian__header .knit-dm-chat__title {
  color: var(--knit-text-heading);
}

html[data-knit-theme="dark"] #knitDiandianModal .knit-diandian__header .knit-dm-chat__sub,
html[data-knit-theme="dark"] .knit-diandian__header .knit-dm-chat__sub {
  color: var(--knit-text-muted);
}

html[data-knit-theme="dark"] .knit-diandian__growth,
html[data-knit-theme="dark"] .knit-diandian__tabs,
html[data-knit-theme="dark"] .knit-diandian__toolbar,
html[data-knit-theme="dark"] .knit-diandian__ask {
  background: var(--knit-dark-chrome);
  border-color: var(--knit-modal-border);
  color: var(--knit-text-muted);
}

html[data-knit-theme="dark"] .knit-diandian__tab {
  color: var(--knit-text-muted);
}

html[data-knit-theme="dark"] .knit-diandian__tab:hover {
  color: var(--knit-text-heading);
  background: var(--knit-dark-elevated);
}

html[data-knit-theme="dark"] .knit-diandian__tab.is-active {
  color: var(--knit-text-heading);
}

html[data-knit-theme="dark"] .knit-diandian__chip,
html[data-knit-theme="dark"] .knit-diandian__input,
html[data-knit-theme="dark"] .knit-diandian__btn,
html[data-knit-theme="dark"] .knit-diandian__item-btn,
html[data-knit-theme="dark"] .knit-diandian__select,
html[data-knit-theme="dark"] .knit-diandian__forget {
  background: var(--knit-dark-elevated);
  border-color: var(--knit-control-border);
  color: var(--knit-control-text);
}

html[data-knit-theme="dark"] .knit-diandian__chip.is-active {
  background: var(--knit-pill-active-bg);
  border-color: transparent;
  color: var(--knit-pill-active-text);
}

html[data-knit-theme="dark"] .knit-diandian__btn--accent {
  background: var(--knit-red);
  border-color: var(--knit-red);
  color: #fff;
}

html[data-knit-theme="dark"] .knit-diandian__ask .knit-diandian__input {
  background: var(--knit-input-bg);
  color: var(--knit-input-text);
}

html[data-knit-theme="dark"] .knit-diandian__hint {
  background: rgba(201, 48, 48, 0.14);
  color: #fecaca;
}

html[data-knit-theme="dark"] .knit-diandian__bar {
  background: var(--knit-dark-overlay);
}

html[data-knit-theme="dark"] .knit-diandian__grid-bar,
html[data-knit-theme="dark"] .knit-diandian__item-meta,
html[data-knit-theme="dark"] .knit-diandian__alert-why,
html[data-knit-theme="dark"] .knit-diandian__pref,
html[data-knit-theme="dark"] .knit-diandian__skill em {
  color: var(--knit-text-muted);
}

html[data-knit-theme="dark"] .knit-diandian__empty,
html[data-knit-theme="dark"] .knit-diandian__tile,
html[data-knit-theme="dark"] .knit-diandian__skill,
html[data-knit-theme="dark"] .knit-diandian__stats span,
html[data-knit-theme="dark"] .knit-diandian__memory span {
  background: var(--knit-dark-elevated);
  border-color: var(--knit-panel-border);
  color: var(--knit-text-body);
}

html[data-knit-theme="dark"] .knit-diandian__skill.is-on,
html[data-knit-theme="dark"] .knit-diandian__tip,
html[data-knit-theme="dark"] .knit-diandian__item {
  background: var(--knit-dark-panel);
  border-color: var(--knit-panel-border);
  color: var(--knit-text-heading);
}

html[data-knit-theme="dark"] .knit-diandian__guide-title,
html[data-knit-theme="dark"] .knit-diandian__tip p,
html[data-knit-theme="dark"] .knit-diandian__item-title {
  color: var(--knit-text-heading);
}

html[data-knit-theme="dark"] .knit-diandian__steps {
  color: var(--knit-text-body);
}

html[data-knit-theme="dark"] .knit-diandian__forget:hover {
  color: var(--knit-text-heading);
  border-color: var(--knit-control-active-border);
}

html[data-knit-theme="dark"] .knit-diandian__thumb,
html[data-knit-theme="dark"] .knit-diandian__ph {
  background: var(--knit-dark-overlay);
  border-color: var(--knit-panel-border);
  color: var(--knit-text-subtle);
}

html[data-knit-theme="dark"] .knit-ctx-menu {
  background: var(--knit-modal-bg);
  border-color: var(--knit-modal-border);
  box-shadow: var(--knit-modal-shadow);
}

html[data-knit-theme="dark"] .knit-ctx-menu__btn {
  color: var(--knit-text-heading);
}

html[data-knit-theme="dark"] .knit-ctx-menu__btn:hover {
  background: var(--knit-control-hover-bg);
}

html[data-knit-theme="dark"] .knit-dup-modal__panel,
html[data-knit-theme="dark"] .knit-favorite-modal__panel,
html[data-knit-theme="dark"] .knit-mine-delete-panel {
  background: var(--knit-modal-bg);
  border-color: var(--knit-modal-border);
  color: var(--knit-text-heading);
  box-shadow: var(--knit-modal-shadow);
}

html[data-knit-theme="dark"] .knit-dup-modal__title,
html[data-knit-theme="dark"] .knit-mine-delete-title {
  color: var(--knit-text-heading);
}

html[data-knit-theme="dark"] .knit-dup-modal__text,
html[data-knit-theme="dark"] .knit-mine-delete-text {
  color: var(--knit-text-muted);
}

html[data-knit-theme="dark"] .knit-note-cover-hint {
  background: var(--knit-surface-panel-bg, var(--knit-modal-bg));
  border-color: var(--knit-surface-panel-border, var(--knit-modal-border));
}

html[data-knit-theme="dark"] .knit-note-cover-hint__text,
html[data-knit-theme="dark"] .knit-note-cover-hint__opt {
  color: var(--knit-text-heading);
}

html[data-knit-theme="dark"] .knit-note-cover-hint__sub {
  color: var(--knit-text-muted);
}

html[data-knit-theme="dark"] .knit-favorite-modal__input,
html[data-knit-theme="dark"] .knit-favorite-modal__select,
html[data-knit-theme="dark"] .knit-favorite-modal__checklist,
html[data-knit-theme="dark"] .knit-dm-modal__input {
  background: var(--knit-input-bg);
  color: var(--knit-input-text);
  border-color: var(--knit-control-border);
}

html[data-knit-theme="dark"] .knit-favorite-modal__cancel,
html[data-knit-theme="dark"] .knit-mine-delete-btn {
  background: var(--knit-control-bg);
  color: var(--knit-control-text);
  border-color: var(--knit-control-border);
}

html[data-knit-theme="dark"] .knit-ecc-download-choice {
  background: var(--knit-control-bg);
  border-color: var(--knit-control-border);
}

html[data-knit-theme="dark"] .knit-ecc-download-choice strong {
  color: var(--knit-text-heading);
}

html[data-knit-theme="dark"] .knit-ecc-download-choice span {
  color: var(--knit-text-muted);
}

html[data-knit-theme="dark"] .knit-ecc-download-choice:hover {
  border-color: rgba(96, 165, 250, 0.55);
  background: rgba(37, 99, 235, 0.12);
}

html[data-knit-theme="dark"] .knit-ecc-download-choice.is-active {
  border-color: #60a5fa;
  background: rgba(37, 99, 235, 0.18);
  box-shadow: 0 0 0 1px rgba(96, 165, 250, 0.25);
}

html[data-knit-theme="dark"] .knit-dev-ecc-slot-page-frame,
html[data-knit-theme="dark"] .knit-dev-ecc-slot-card {
  background: var(--knit-panel-bg-alt);
  border-color: var(--knit-panel-border);
}

html[data-knit-theme="dark"] .knit-dev-ecc-slot-no {
  color: var(--knit-text-body);
  background: rgba(18, 20, 26, 0.82);
}

html[data-knit-theme="dark"] .knit-dev-ecc-slot-text,
html[data-knit-theme="dark"] .knit-dev-colorcard-grid-num {
  background: var(--knit-input-bg);
  color: var(--knit-input-text);
  border-color: var(--knit-control-border);
}

html[data-knit-theme="dark"] .knit-dev-ecc-slot-tip,
html[data-knit-theme="dark"] .knit-dev-colorcard-grid-hint,
html[data-knit-theme="dark"] .knit-dev-ecc-slot-batch-hint {
  color: var(--knit-text-muted);
}

html[data-knit-theme="dark"] .knit-bottom-nav {
  background: color-mix(in srgb, var(--knit-chrome-bg) 88%, transparent);
  border-top-color: var(--knit-chrome-border);
}

html[data-knit-theme="dark"] .knit-bottom-nav__btn:active {
  background: rgba(255, 255, 255, 0.08);
}

html[data-knit-theme="dark"] .knit-mobile-more {
  background: rgba(14, 16, 20, 0.72);
}

html[data-knit-theme="dark"] .knit-mobile-more-panel {
  background: var(--knit-panel-bg);
  border-color: var(--knit-panel-border);
  color: var(--knit-text-heading);
  box-shadow: var(--knit-panel-shadow);
}

html[data-knit-theme="dark"] .knit-mobile-more-head h2,
html[data-knit-theme="dark"] .knit-mobile-more-grid button {
  color: var(--knit-text-heading);
}

html[data-knit-theme="dark"] .knit-mobile-more-grid button {
  background: var(--knit-control-bg);
  border-color: var(--knit-control-border);
}

html[data-knit-theme="dark"] .knit-mobile-more-logout {
  color: #fb7185;
  background: var(--knit-control-bg);
  border-color: var(--knit-control-border);
}

/* ========== 底栏/更多面板：共享默认（电脑隐藏底栏）==========
 * 手机+平板布局：assets/knit-compact.css
 * 仅手机：assets/knit-phone.css
 * 仅平板：assets/knit-tablet.css
 */
:root {
  --knit-bottom-nav-h: 0px;
}

.knit-bottom-nav,
.knit-mobile-more {
  display: none;
}

.knit-bottom-nav__btn {
  flex: 1 1 0;
  min-width: 0;
  margin: 0 0.22rem;
  border: none;
  border-radius: 999px;
  background: transparent;
  color: var(--knit-chrome-text-muted);
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 0.12rem;
  padding: 0.28rem 0.1rem;
  font-size: 0.62rem;
  font-weight: 600;
  cursor: pointer;
  position: relative;
  -webkit-tap-highlight-color: transparent;
}

.knit-sidebar > button[hidden],
.knit-sidebar-nav > button[hidden],
.knit-bottom-nav__btn[hidden],
.knit-mobile-more-grid button[hidden],
html:not(.knit-can-stock-manage) #knitSideStockManage,
html:not(.knit-can-stock-manage) #knitBottomStockManage,
html:not(.knit-can-stock-manage) #knitMobileMoreStockManage {
  display: none !important;
  visibility: hidden !important;
  pointer-events: none !important;
  height: 0 !important;
  min-height: 0 !important;
  max-height: 0 !important;
  width: 0 !important;
  min-width: 0 !important;
  max-width: 0 !important;
  padding: 0 !important;
  margin: 0 !important;
  overflow: hidden !important;
  opacity: 0 !important;
  flex: 0 0 0 !important;
  border: none !important;
}

.knit-bottom-nav__btn:focus {
  outline: none;
}

.knit-bottom-nav__btn:active {
  background: rgba(0, 0, 0, 0.07);
  color: var(--knit-chrome-text);
}

.knit-bottom-nav__btn.is-active {
  color: var(--knit-chrome-active-text);
  background: var(--knit-chrome-active);
  font-weight: 700;
}

.knit-bottom-nav__btn.is-active:active {
  filter: brightness(0.94);
}

.knit-bottom-nav__icon {
  font-size: 0.95rem;
  line-height: 1;
}

.knit-bottom-nav__label {
  line-height: 1.1;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  max-width: 100%;
}

.knit-bottom-nav__badge {
  position: absolute;
  top: 0.18rem;
  right: calc(50% - 1.05rem);
  width: 0.5rem;
  min-width: 0.5rem;
  height: 0.5rem;
  padding: 0;
  border-radius: 999px;
  background: var(--knit-red);
  color: transparent;
  font-size: 0;
  line-height: 0;
  overflow: hidden;
  pointer-events: none;
}

.knit-mobile-more[hidden] {
  display: none !important;
}

.knit-mobile-more-backdrop {
  position: fixed;
  inset: 0;
  z-index: 230;
  border: none;
  margin: 0;
  padding: 0;
  background: rgba(0, 0, 0, 0.42);
}

.knit-mobile-more-panel {
  position: fixed;
  left: 0;
  right: 0;
  bottom: 0;
  z-index: 231;
  max-height: min(72vh, 520px);
  overflow: auto;
  background: var(--knit-modal-bg);
  color: var(--knit-page-text);
  border-radius: 16px 16px 0 0;
  border: 1px solid var(--knit-modal-border);
  box-shadow: var(--knit-modal-shadow);
  padding: 0.85rem 1rem calc(1rem + var(--knit-bottom-nav-h) + env(safe-area-inset-bottom));
}

.knit-mobile-more-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 0.75rem;
}

.knit-mobile-more-head h2 {
  margin: 0;
  font-size: 1.05rem;
}

.knit-mobile-more-close {
  border: none;
  background: transparent;
  color: var(--knit-text-muted);
  font-size: 1.5rem;
  line-height: 1;
  padding: 0.2rem 0.45rem;
  cursor: pointer;
}

.knit-mobile-more-grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 0.55rem;
}

.knit-mobile-more-grid button {
  border: 1px solid var(--knit-control-border);
  background: var(--knit-control-bg);
  color: var(--knit-control-text);
  border-radius: 10px;
  padding: 0.85rem 0.4rem;
  font-size: 0.88rem;
  font-weight: 600;
  cursor: pointer;
}

.knit-mobile-more-grid button:active {
  background: var(--knit-control-active-bg);
}

.knit-mobile-more-grid button:disabled {
  opacity: 0.42;
  cursor: not-allowed;
  pointer-events: none;
}

.knit-mobile-more-logout {
  display: none;
  width: 100%;
  margin-top: auto;
  border: 1px solid var(--knit-control-border);
  background: var(--knit-control-bg);
  color: #e11d48;
  border-radius: 10px;
  padding: 0.85rem 1rem;
  font-family: inherit;
  font-size: 0.88rem;
  font-weight: 600;
  cursor: pointer;
}

.knit-mobile-more-logout:active {
  background: var(--knit-control-active-bg);
}

.knit-mobile-more-logout[hidden] {
  display: none !important;
}

.knit-note-channel-pick {
  display: none;
}

html[data-device="phone"] .knit-note-channel-pick,
html[data-device="tablet"] .knit-note-channel-pick,
html[data-device="desktop"] .knit-note-channel-pick {
  display: block;
  position: fixed;
  inset: 0;
  /* 高于底栏 1500、作品详情 1550，避免「选择笔记类型」被首页/消息挡住 */
  z-index: 1650;
}

.knit-note-channel-pick[hidden] {
  display: none !important;
}

.knit-note-channel-pick__backdrop {
  position: absolute;
  inset: 0;
  border: none;
  margin: 0;
  padding: 0;
  background: rgba(0, 0, 0, 0.42);
  opacity: 0;
  transition: opacity 0.28s ease;
}

.knit-note-channel-pick.is-open .knit-note-channel-pick__backdrop {
  opacity: 1;
}

.knit-note-channel-pick__panel {
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0;
  z-index: 1;
  background: var(--knit-modal-bg);
  color: var(--knit-page-text);
  border-radius: 16px 16px 0 0;
  border: 1px solid var(--knit-modal-border);
  box-shadow: var(--knit-modal-shadow);
  padding: 0.35rem 1rem calc(1rem + env(safe-area-inset-bottom, 0px));
  transform: translate3d(0, 110%, 0);
  transition: transform 0.32s cubic-bezier(0.22, 1, 0.36, 1);
  touch-action: pan-y;
  will-change: transform;
}

.knit-note-channel-pick.is-open .knit-note-channel-pick__panel {
  transform: translate3d(0, 0, 0);
}

.knit-note-channel-pick.is-dragging .knit-note-channel-pick__panel,
.knit-note-channel-pick.is-dragging .knit-note-channel-pick__backdrop {
  transition: none;
}

.knit-note-channel-pick__head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 0.75rem;
  position: relative;
  padding-top: 0.55rem;
}

.knit-note-channel-pick__handle {
  position: absolute;
  top: 0.12rem;
  left: 50%;
  display: block;
  width: 2.45rem;
  height: 0.28rem;
  margin: 0;
  border-radius: 999px;
  background: var(--knit-text-subtle);
  opacity: 0.72;
  transform: translateX(-50%);
}

.knit-note-channel-pick__head h2 {
  margin: 0;
  font-size: 1.05rem;
}

.knit-note-channel-pick__close {
  border: none;
  background: transparent;
  color: var(--knit-text-muted);
  font-size: 1.5rem;
  line-height: 1;
  padding: 0.2rem 0.45rem;
  cursor: pointer;
}

.knit-note-channel-pick__grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 0.55rem;
}

.knit-note-channel-pick__grid button {
  border: 1px solid var(--knit-control-border);
  background: var(--knit-control-bg);
  color: var(--knit-control-text);
  border-radius: 10px;
  padding: 0.95rem 0.4rem;
  font-size: 0.92rem;
  font-weight: 600;
  cursor: pointer;
}

.knit-note-channel-pick__grid button:active {
  background: var(--knit-control-active-bg);
}

html[data-knit-theme="dark"] .knit-note-channel-pick__panel {
  background: var(--knit-modal-bg);
  border-color: var(--knit-modal-border);
}

html[data-knit-theme="dark"] .knit-note-channel-pick__head h2,
html[data-knit-theme="dark"] .knit-note-channel-pick__grid button {
  color: var(--knit-text-heading);
}

/* 电脑端：居中卡片选类型，再进入笔记编辑 */
html[data-device="desktop"] .knit-note-channel-pick__handle {
  display: none;
}

html[data-device="desktop"] .knit-note-channel-pick__panel {
  left: 50%;
  right: auto;
  bottom: auto;
  top: 50%;
  width: min(28rem, calc(100vw - 2rem));
  border-radius: 16px;
  padding: 1.15rem 1.2rem 1.3rem;
  transform: translate(-50%, -46%) scale(0.96);
  opacity: 0;
  transition:
    transform 0.22s cubic-bezier(0.22, 1, 0.36, 1),
    opacity 0.22s ease;
}

html[data-device="desktop"] .knit-note-channel-pick.is-open .knit-note-channel-pick__panel {
  transform: translate(-50%, -50%) scale(1);
  opacity: 1;
}

html[data-device="desktop"] .knit-note-channel-pick.is-dragging .knit-note-channel-pick__panel {
  transition: none;
}

html[data-device="desktop"] .knit-note-channel-pick__grid {
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 0.7rem;
}

html[data-device="desktop"] .knit-note-channel-pick__grid button {
  min-height: 4.2rem;
  font-size: 0.98rem;
  transition: background 0.15s ease, border-color 0.15s ease;
}

html[data-device="desktop"] .knit-note-channel-pick__grid button:hover,
html[data-device="desktop"] .knit-note-channel-pick__grid button:focus-visible {
  background: var(--knit-control-hover-bg);
  border-color: var(--knit-red, #e25555);
}

.knit-group-info[hidden] {
  display: none !important;
}

.knit-group-info {
  position: fixed;
  inset: 0;
  z-index: 1750;
  background: transparent;
}

.knit-group-info-backdrop {
  position: absolute;
  inset: 0;
  z-index: 0;
  border: none;
  margin: 0;
  padding: 0;
  background: rgba(0, 0, 0, 0.36);
  opacity: 0;
  pointer-events: none;
  transition: opacity 0.28s ease;
}

body.knit-group-info-open .knit-group-info-backdrop {
  opacity: 1;
  pointer-events: auto;
}

.knit-group-info-panel {
  position: absolute;
  top: 0;
  right: 0;
  bottom: 0;
  z-index: 1;
  width: min(26rem, 100%);
  max-width: 100%;
  background: var(--knit-modal-bg, var(--knit-panel-bg));
  color: var(--knit-page-text);
  border-left: 1px solid var(--knit-modal-border, var(--knit-panel-border));
  box-shadow: var(--knit-modal-shadow, var(--knit-panel-shadow));
  display: flex;
  flex-direction: column;
  transform: translate3d(100%, 0, 0);
  transition: transform 0.32s cubic-bezier(0.32, 0.72, 0, 1);
}

body.knit-group-info-open .knit-group-info-panel {
  transform: translate3d(0, 0, 0);
}

.knit-group-info.knit-page--swipe-drag .knit-group-info-panel,
.knit-group-info.knit-page--swipe-drag .knit-group-info-backdrop {
  transition: none;
}

.knit-group-info-head {
  display: flex;
  align-items: center;
  gap: 0.55rem;
  flex-shrink: 0;
  padding: 0.75rem 1rem 0.55rem;
}

.knit-group-info-back {
  width: 2.1rem;
  height: 2.1rem;
  border: none;
  border-radius: 999px;
  background: transparent;
  color: inherit;
  font-size: 1.6rem;
  line-height: 1;
  cursor: pointer;
}

.knit-group-info-head h2 {
  margin: 0;
  font-size: 1.05rem;
}

.knit-group-info-body {
  flex: 1 1 auto;
  min-height: 0;
  overflow: auto;
  padding: 0 1rem 1.2rem;
}

.knit-group-info-hero {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 0.4rem;
  padding: 0.4rem 0 1rem;
  text-align: center;
}

.knit-group-info-avatar {
  width: 4.2rem;
  height: 4.2rem;
  font-size: 1.35rem;
}

.knit-group-info-name {
  margin: 0;
  font-size: 1.15rem;
  font-weight: 700;
}

.knit-group-info-meta {
  margin: 0;
  font-size: 0.82rem;
  color: var(--knit-text-muted);
}

.knit-group-info-section h3 {
  margin: 0 0 0.55rem;
  font-size: 0.78rem;
  letter-spacing: 0.04em;
  color: var(--knit-text-muted);
}

.knit-group-info-members {
  list-style: none;
  margin: 0 0 1rem;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: 0.4rem;
}

.knit-group-info-member {
  display: flex;
  align-items: center;
  gap: 0.65rem;
  width: 100%;
  margin: 0;
  padding: 0.5rem 0.55rem;
  border: 1px solid var(--knit-panel-border);
  border-radius: 12px;
  background: var(--knit-panel-bg);
  color: inherit;
  font: inherit;
  text-align: left;
  cursor: pointer;
}

.knit-group-info-member:disabled {
  cursor: default;
}

.knit-group-info-member-text {
  display: flex;
  flex-direction: column;
  gap: 0.1rem;
  min-width: 0;
}

.knit-group-info-member-name {
  font-weight: 650;
}

.knit-group-info-member-role {
  font-size: 0.75rem;
  color: var(--knit-text-muted);
}

.knit-group-info-actions {
  display: flex;
  flex-direction: column;
  gap: 0.45rem;
}

.knit-group-info-action {
  width: 100%;
  min-height: 2.7rem;
  border: 1px solid var(--knit-control-border);
  border-radius: 12px;
  background: var(--knit-control-bg);
  color: var(--knit-control-text);
  font: inherit;
  font-weight: 600;
  text-align: left;
  padding: 0.7rem 0.9rem;
  cursor: pointer;
}

.knit-group-info-action--danger {
  color: var(--knit-red, #c23b3b);
}

.knit-msg-item.knit-msg-item--swipe-drag {
  transition: none;
}

html[data-knit-theme="dark"] .knit-group-info-panel {
  background: var(--knit-panel-bg);
  border-color: var(--knit-panel-border);
  color: var(--knit-text-heading);
}

.knit-news-org-picker__option {
  display: flex;
  gap: 0.5rem;
  align-items: center;
  margin: 0.35rem 0;
}

.knit-news-card__org,
.knit-fp-news-detail__org {
  border: 0;
  padding: 0;
  background: none;
  color: inherit;
  font: inherit;
  cursor: pointer;
  text-decoration: underline;
  text-underline-offset: 2px;
}

.knit-org-dialog {
  border: 0;
  padding: 0;
  background: transparent;
  width: min(36rem, calc(100% - 2rem));
}

.knit-org-dialog__panel {
  background: var(--knit-panel-bg, #fff);
  color: inherit;
  border-radius: 12px;
  padding: 1.25rem;
}

.knit-org-dialog__actions {
  display: flex;
  flex-wrap: wrap;
  gap: 0.5rem;
  align-items: center;
  margin-top: 0.75rem;
}

.knit-org-profile__logo {
  width: 3rem;
  height: 3rem;
  object-fit: contain;
}

.knit-org-profile__head h3,
.knit-org-profile__card {
  margin-top: 0.75rem;
}

.knit-org-profile__card {
  cursor: pointer;
}

.knit-admin-org-filters {
  display: flex;
  gap: 0.5rem;
  margin: 0.5rem 0;
}

.knit-admin-org-card {
  padding: 0.75rem 0;
  border-bottom: 1px solid var(--knit-panel-border, #e5e7eb);
}

.knit-news-publish-gate {
  margin: 0.75rem 0 1rem;
  padding: 0.9rem 1rem;
  border: 1px solid var(--knit-panel-border, #e5e7eb);
  border-radius: 12px;
}

.knit-news-publish-gate p {
  margin: 0 0 0.75rem;
}

#knitDeveloperView[data-news-publish-blocked="1"] > .knit-creator-left,
#knitDeveloperView[data-news-publish-blocked="1"] > .knit-creator-footer {
  display: none;
}

.knit-admin-search-input,
.knit-admin-news-govern input,
.knit-admin-news-govern select,
.knit-admin-news-row select {
  width: min(100%, 280px);
  margin: 0.25rem 0.4rem 0.25rem 0;
}

.knit-admin-news-govern {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(220px, 320px);
  gap: 0.75rem;
  padding: 0.75rem 0;
  border-bottom: 1px solid var(--knit-panel-border, #e5e7eb);
}

.knit-admin-catalog-list {
  margin: 0.5rem 0 0;
  padding-left: 1.1rem;
}

@media (max-width: 720px) {
  .knit-admin-news-govern {
    grid-template-columns: 1fr;
  }
}

/* ========== 材料第10阶段：Home / Filter / Card ========== */
.knit-material-home {
  display: flex;
  flex-direction: column;
  gap: 0.55rem;
  padding: 0.35rem 0 0.5rem;
}

.knit-material-home__search {
  display: flex;
  gap: 0.4rem;
  align-items: center;
}

.knit-material-home__search-input {
  flex: 1;
  min-width: 0;
  font: inherit;
  padding: 0.45rem 0.65rem;
  border: 1px solid var(--knit-panel-border);
  border-radius: 8px;
  background: var(--knit-panel-bg, #fff);
}

.knit-material-home__types {
  display: flex;
  flex-wrap: wrap;
  gap: 0.35rem;
}

.knit-material-home__type,
.knit-material-home__quick-btn,
.knit-material-home__chip,
.knit-material-home__chip-action {
  font: inherit;
  border: 1px solid var(--knit-panel-border);
  background: var(--knit-panel-bg, #fff);
  border-radius: 999px;
  padding: 0.28rem 0.7rem;
  cursor: pointer;
}

.knit-material-home__type.is-active,
.knit-material-home__quick-btn.is-active {
  border-color: #1f2937;
  background: #1f2937;
  color: #fff;
}

.knit-material-home__quick {
  display: flex;
  flex-wrap: wrap;
  gap: 0.35rem;
  align-items: center;
}

.knit-material-home__quick-btn--more {
  margin-left: auto;
}

.knit-material-home__chips {
  display: flex;
  flex-wrap: wrap;
  gap: 0.35rem;
  align-items: center;
}

.knit-material-home__chip-action {
  border-style: dashed;
}

.knit-material-home__meta {
  display: flex;
  flex-wrap: wrap;
  gap: 0.75rem;
  align-items: center;
  justify-content: space-between;
  font-size: 0.9rem;
  color: var(--knit-text-muted);
}

.knit-material-home__meta select {
  font: inherit;
  padding: 0.25rem 0.4rem;
}

.knit-material-home__advanced {
  border: 1px solid var(--knit-panel-border, #e5e7eb);
  border-radius: 10px;
  padding: 0.75rem 0.9rem;
  background: var(--knit-panel-bg, #fafbfc);
}

.knit-material-home__advanced h2 {
  margin: 0 0 0.6rem;
  font-size: 0.95rem;
}

.knit-material-home__field {
  display: block;
  margin: 0.4rem 0;
  font-size: 0.9rem;
}

.knit-material-home__advanced-actions {
  display: flex;
  gap: 0.5rem;
  margin-top: 0.6rem;
}

.knit-material-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(220px, 1fr));
  gap: 1rem;
  padding: 0.5rem 0 1.5rem;
  align-content: start;
}

@media (min-width: 1100px) {
  .knit-material-grid {
    grid-template-columns: repeat(auto-fill, minmax(240px, 1fr));
  }
}

@media (max-width: 720px) {
  .knit-material-grid {
    grid-template-columns: 1fr;
    gap: 0.85rem;
  }
  .knit-material-home__quick-btn--more {
    margin-left: 0;
  }
}

.knit-material-card {
  display: flex;
  flex-direction: column;
  border: 1px solid var(--knit-panel-border, #e5e7eb);
  border-radius: 12px;
  overflow: hidden;
  background: var(--knit-panel-bg, #fff);
  cursor: pointer;
  text-align: left;
  min-height: 280px;
}

.knit-material-card:focus-visible {
  outline: 2px solid #2563eb;
  outline-offset: 2px;
}

.knit-material-card__cover {
  position: relative;
  aspect-ratio: 4 / 3;
  background: #eef1f5;
  overflow: hidden;
}

.knit-material-card__cover img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}

.knit-material-card__cover.is-empty::after {
  content: "";
  display: block;
  width: 100%;
  height: 100%;
  background: linear-gradient(135deg, #e8ecf2, #f6f7f9);
}

.knit-material-card__type {
  position: absolute;
  left: 0.5rem;
  top: 0.5rem;
  font-size: 0.72rem;
  padding: 0.15rem 0.45rem;
  border-radius: 999px;
  background: rgba(255, 255, 255, 0.92);
  color: #111827;
}

.knit-material-card__body {
  display: flex;
  flex-direction: column;
  gap: 0.28rem;
  padding: 0.7rem 0.75rem 0.85rem;
}

.knit-material-card__title {
  margin: 0;
  font-size: 0.98rem;
  font-weight: 650;
  line-height: 1.3;
  color: #111827;
}

.knit-material-card__brand,
.knit-material-card__composition,
.knit-material-card__specs,
.knit-material-card__commercial,
.knit-material-card__stock,
.knit-material-card__supplier {
  margin: 0;
  font-size: 0.82rem;
  line-height: 1.35;
  color: var(--knit-text-muted);
}

.knit-material-card__composition {
  color: var(--knit-text-body);
}

.knit-material-card__commercial {
  color: #111827;
  font-weight: 560;
}

.knit-material-card__stock[data-stock="in_stock"] {
  color: #047857;
}

.knit-material-card__stock[data-stock="out_of_stock"] {
  color: #b45309;
}

.knit-material-card__variants {
  display: flex;
  flex-wrap: wrap;
  gap: 0.28rem;
  align-items: center;
  margin-top: 0.2rem;
}

.knit-material-card__swatch {
  width: 0.9rem;
  height: 0.9rem;
  border-radius: 999px;
  border: 1px solid rgba(0, 0, 0, 0.12);
  background: var(--knit-panel-border);
  display: inline-block;
  background-size: cover;
  background-position: center;
  font-size: 0.55rem;
  line-height: 0.9rem;
  text-align: center;
  overflow: hidden;
}

.knit-material-card__swatch.is-text {
  width: auto;
  min-width: 1.4rem;
  padding: 0 0.2rem;
  border-radius: 4px;
}

.knit-material-card__more {
  font-size: 0.75rem;
  color: var(--knit-text-muted);
}

.knit-material-card--skeleton {
  background: linear-gradient(90deg, #eef1f5 25%, #f7f8fa 50%, #eef1f5 75%);
  background-size: 200% 100%;
  animation: knit-material-skel 1.2s ease-in-out infinite;
  border: none;
  min-height: 300px;
  pointer-events: none;
}

@keyframes knit-material-skel {
  0% { background-position: 100% 0; }
  100% { background-position: -100% 0; }
}

.knit-material-home__status {
  grid-column: 1 / -1;
  padding: 2rem 1rem;
  text-align: center;
  color: var(--knit-text-muted);
}

.knit-material-home__status--error {
  color: #b91c1c;
}

.knit-material-home__pager {
  grid-column: 1 / -1;
  display: flex;
  flex-wrap: wrap;
  gap: 0.6rem;
  align-items: center;
  justify-content: center;
  padding: 0.75rem 0 1rem;
}

/* ========== 材料 10.5：Popover / Sheet / Drawer ========== */
.knit-material-filter-host {
  position: relative;
  z-index: 80;
}

body.knit-material-filter-open {
  overflow: hidden;
}

.knit-material-layer__backdrop {
  position: fixed;
  inset: 0;
  background: rgba(15, 23, 42, 0.28);
  z-index: 80;
}

.knit-material-layer__panel {
  position: fixed;
  z-index: 81;
  background: var(--knit-panel-bg, #fff);
  color: #111827;
  box-shadow: 0 12px 40px rgba(15, 23, 42, 0.18);
  display: flex;
  flex-direction: column;
  min-width: 0;
}

.knit-material-layer__panel--popover {
  border-radius: 12px;
  border: 1px solid var(--knit-panel-border, #e5e7eb);
  overflow: auto;
}

.knit-material-layer__panel--sheet {
  left: 0;
  right: 0;
  bottom: 0;
  max-height: min(92vh, 920px);
  border-radius: 16px 16px 0 0;
  padding-bottom: env(safe-area-inset-bottom, 0);
}

.knit-material-layer__panel--drawer {
  top: 0;
  right: 0;
  bottom: 0;
  width: min(420px, 92vw);
  border-left: 1px solid var(--knit-panel-border, #e5e7eb);
}

.knit-material-layer__panel--advanced.knit-material-layer__panel--sheet {
  max-height: 96vh;
  height: 96vh;
}

.knit-material-layer__head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 0.5rem;
  padding: 0.75rem 0.9rem;
  border-bottom: 1px solid var(--knit-panel-border, #eef0f3);
  flex: 0 0 auto;
}

.knit-material-layer__title {
  margin: 0;
  font-size: 1rem;
  font-weight: 650;
}

.knit-material-layer__close {
  border: 0;
  background: transparent;
  font-size: 1.35rem;
  line-height: 1;
  cursor: pointer;
  padding: 0.15rem 0.4rem;
}

.knit-material-layer__body {
  padding: 0.75rem 0.9rem;
  overflow: auto;
  flex: 1 1 auto;
}

.knit-material-layer__foot {
  display: flex;
  gap: 0.5rem;
  justify-content: flex-end;
  padding: 0.7rem 0.9rem;
  border-top: 1px solid var(--knit-panel-border, #eef0f3);
  flex: 0 0 auto;
  background: var(--knit-panel-bg, #fff);
}

.knit-material-layer__foot button,
.knit-material-layer__choice,
.knit-material-layer__fiber-row button {
  font: inherit;
  border: 1px solid var(--knit-panel-border);
  background: var(--knit-panel-bg);
  border-radius: 8px;
  padding: 0.4rem 0.7rem;
  cursor: pointer;
}

.knit-material-layer__foot button.is-primary {
  background: #111827;
  border-color: #111827;
  color: #fff;
}

.knit-material-layer__choices {
  display: flex;
  flex-wrap: wrap;
  gap: 0.4rem;
  margin: 0.35rem 0 0.75rem;
}

.knit-material-layer__choice.is-active {
  background: #111827;
  border-color: #111827;
  color: #fff;
}

.knit-material-layer__input,
.knit-material-layer__field input,
.knit-material-layer__field select,
.knit-material-layer__range input {
  font: inherit;
  width: 100%;
  box-sizing: border-box;
  padding: 0.4rem 0.55rem;
  border: 1px solid var(--knit-panel-border);
  border-radius: 8px;
}

.knit-material-layer__field {
  display: block;
  margin: 0.45rem 0;
  font-size: 0.9rem;
}

.knit-material-layer__range {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 0.5rem;
  margin: 0.5rem 0;
}

.knit-material-layer__section-title {
  margin: 0.85rem 0 0.35rem;
  font-size: 0.85rem;
  font-weight: 650;
  color: var(--knit-text-body);
}

.knit-material-layer__hint,
.knit-material-layer__muted {
  margin: 0.35rem 0;
  font-size: 0.82rem;
  color: var(--knit-text-muted);
}

.knit-material-layer__fiber-row {
  display: flex;
  flex-wrap: wrap;
  gap: 0.4rem;
  align-items: center;
  margin: 0.35rem 0;
}

.knit-material-layer__fiber-name {
  min-width: 4rem;
  font-weight: 560;
}

.knit-material-layer__inline {
  display: inline-flex;
  align-items: center;
  gap: 0.25rem;
}

.knit-material-layer__inline input {
  width: 4.5rem;
}

@media (max-width: 720px) {
  .knit-material-layer__panel--popover {
    /* compact 走 sheet，不走 popover；兜底仍全宽底栏 */
    left: 0 !important;
    right: 0 !important;
    bottom: 0 !important;
    top: auto !important;
    width: 100% !important;
    max-height: min(92vh, 920px) !important;
    border-radius: 16px 16px 0 0;
  }

  .knit-material-home__quick {
    gap: 0.3rem;
  }
}

/* —— Material Detail（第 11 阶段） —— */
.knit-material-detail {
  position: fixed;
  inset: 0;
  z-index: 12000;
  display: flex;
  align-items: stretch;
  justify-content: center;
}

.knit-material-detail[hidden] {
  display: none !important;
}

.knit-material-detail__backdrop {
  position: absolute;
  inset: 0;
  background: rgba(15, 23, 42, 0.45);
}

.knit-material-detail__panel {
  position: relative;
  z-index: 1;
  width: min(1120px, 100%);
  max-height: 100%;
  margin: 0 auto;
  background: var(--knit-panel-bg, #fff);
  color: var(--knit-page-text);
  box-shadow: 0 12px 40px rgba(15, 23, 42, 0.18);
  display: flex;
  flex-direction: column;
  overflow: hidden;
}

.knit-material-detail__scroll {
  overflow: auto;
  -webkit-overflow-scrolling: touch;
  padding: 0.85rem 1.1rem 2rem;
  flex: 1;
}

html.knit-md-open {
  overflow: hidden;
}

.knit-md-top {
  display: flex;
  align-items: center;
  margin-bottom: 0.75rem;
}

.knit-md-back {
  font: inherit;
  border: 0;
  background: transparent;
  color: inherit;
  cursor: pointer;
  padding: 0.25rem 0;
}

.knit-md-layout {
  display: grid;
  grid-template-columns: minmax(0, 1.05fr) minmax(0, 1fr);
  gap: 1.25rem;
  align-items: start;
}

.knit-md-layout__main {
  display: flex;
  flex-direction: column;
  gap: 0.65rem;
}

.knit-md-below {
  margin-top: 1.5rem;
  display: flex;
  flex-direction: column;
  gap: 1.1rem;
  max-width: 52rem;
}

.knit-md-identity {
  display: flex;
  flex-wrap: wrap;
  gap: 0.35rem;
  align-items: center;
}

.knit-md-type,
.knit-md-badge {
  font-size: 0.78rem;
  padding: 0.15rem 0.5rem;
  border-radius: 4px;
  background: #eef2f7;
  color: var(--knit-text-body);
}

.knit-md-badge--warn {
  background: #fff7ed;
  color: #9a3412;
}

.knit-md-title {
  margin: 0;
  font-size: clamp(1.35rem, 2.2vw, 1.75rem);
  line-height: 1.25;
  font-weight: 650;
  letter-spacing: -0.02em;
}

.knit-md-brand,
.knit-md-supplier-line,
.knit-md-comp-summary,
.knit-md-spec-summary,
.knit-md-selected {
  margin: 0;
  color: var(--knit-text-muted);
  font-size: 0.95rem;
}

.knit-md-section {
  display: flex;
  flex-direction: column;
  gap: 0.45rem;
}

.knit-md-section__head {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 0.5rem;
}

.knit-md-section__title {
  margin: 0;
  font-size: 0.95rem;
  font-weight: 650;
}

.knit-md-section__meta {
  font-size: 0.8rem;
  color: var(--knit-text-muted);
}

.knit-md-commercial__chips {
  display: flex;
  flex-wrap: wrap;
  gap: 0.4rem;
}

.knit-md-chip {
  font-size: 0.85rem;
  padding: 0.28rem 0.55rem;
  border-radius: 6px;
  background: var(--knit-control-hover-bg);
  color: var(--knit-text-heading);
}

.knit-md-chip--price {
  background: #0f172a;
  color: #fff;
  font-weight: 600;
}

.knit-md-note,
.knit-md-hint,
.knit-md-warn {
  margin: 0;
  font-size: 0.82rem;
  color: var(--knit-text-muted);
}

.knit-md-warn {
  color: #b45309;
}

.knit-md-gallery {
  display: flex;
  flex-direction: column;
  gap: 0.5rem;
}

.knit-md-gallery__main {
  aspect-ratio: 1 / 1;
  background: #eef2f7;
  border-radius: 10px;
  overflow: hidden;
}

.knit-md-gallery__main img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}

.knit-md-gallery__ph {
  aspect-ratio: 1 / 1;
  display: grid;
  place-items: center;
  background: #eef2f7;
  border-radius: 10px;
  color: var(--knit-text-subtle);
}

.knit-md-gallery__thumbs {
  display: flex;
  gap: 0.35rem;
  overflow-x: auto;
}

.knit-md-gallery__thumb {
  flex: 0 0 auto;
  width: 3.2rem;
  height: 3.2rem;
  padding: 0;
  border: 2px solid transparent;
  border-radius: 6px;
  overflow: hidden;
  cursor: pointer;
  background: var(--knit-control-active-bg);
}

.knit-md-gallery__thumb.is-active {
  border-color: var(--knit-control-active-border);
}

.knit-md-gallery__thumb img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}

.knit-md-variant-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(9.5rem, 1fr));
  gap: 0.45rem;
  max-height: 18rem;
  overflow: auto;
  padding: 0.1rem;
}

.knit-md-variant {
  display: flex;
  align-items: center;
  gap: 0.45rem;
  text-align: left;
  font: inherit;
  border: 1px solid var(--knit-panel-border);
  background: var(--knit-panel-bg);
  border-radius: 8px;
  padding: 0.4rem 0.5rem;
  cursor: pointer;
}

.knit-md-variant.is-selected {
  border-color: var(--knit-control-active-border);
  box-shadow: inset 0 0 0 1px #0f172a;
}

.knit-md-variant.is-oos {
  opacity: 0.78;
}

.knit-md-variant--legacy {
  cursor: default;
  opacity: 0.85;
}

.knit-md-variant__swatch {
  width: 1.55rem;
  height: 1.55rem;
  border-radius: 999px;
  border: 1px solid rgba(15, 23, 42, 0.12);
  background: #cbd5e1;
  background-size: cover;
  background-position: center;
  flex: 0 0 auto;
}

.knit-md-variant__text {
  display: flex;
  flex-direction: column;
  min-width: 0;
  gap: 0.05rem;
}

.knit-md-variant__code {
  font-size: 0.78rem;
  font-weight: 650;
  color: var(--knit-text-heading);
}

.knit-md-variant__name {
  font-size: 0.78rem;
  color: var(--knit-text-muted);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.knit-md-variant__sku,
.knit-md-variant__badge {
  font-size: 0.7rem;
  color: var(--knit-text-subtle);
}

.knit-md-variant__badge {
  color: #b45309;
}

.knit-md-variant-search input {
  width: 100%;
  font: inherit;
  padding: 0.4rem 0.6rem;
  border: 1px solid var(--knit-panel-border);
  border-radius: 8px;
  box-sizing: border-box;
}

.knit-md-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 0.5rem;
  align-items: center;
  margin-top: 0.25rem;
}

.knit-md-btn {
  font: inherit;
  border: 1px solid var(--knit-panel-border);
  background: var(--knit-panel-bg);
  border-radius: 8px;
  padding: 0.55rem 1rem;
  cursor: pointer;
}

.knit-md-btn--primary {
  background: var(--knit-pill-active-bg);
  border-color: var(--knit-control-active-border);
  color: var(--knit-pill-active-text);
  font-weight: 600;
}

.knit-md-btn--ghost {
  background: transparent;
}

.knit-md-link {
  font: inherit;
  border: 0;
  background: transparent;
  color: var(--knit-text-body);
  text-decoration: underline;
  cursor: pointer;
  padding: 0;
  align-self: flex-start;
}

.knit-md-comp-list {
  margin: 0;
  padding-left: 1.1rem;
}

.knit-md-spec-group {
  margin-top: 0.35rem;
}

.knit-md-spec-group__title {
  margin: 0 0 0.35rem;
  font-size: 0.85rem;
  color: var(--knit-text-muted);
  font-weight: 600;
}

.knit-md-spec-dl {
  margin: 0;
  display: flex;
  flex-direction: column;
  gap: 0.3rem;
}

.knit-md-spec-row {
  display: grid;
  grid-template-columns: 6.5rem minmax(0, 1fr);
  gap: 0.5rem;
  font-size: 0.9rem;
}

.knit-md-spec-row dt {
  margin: 0;
  color: var(--knit-text-muted);
}

.knit-md-spec-row dd {
  margin: 0;
  color: var(--knit-text-heading);
}

.knit-md-supplier__card {
  display: flex;
  gap: 0.75rem;
  align-items: flex-start;
  width: 100%;
  text-align: left;
  font: inherit;
  border: 1px solid var(--knit-panel-border);
  background: var(--knit-panel-bg-alt);
  border-radius: 10px;
  padding: 0.75rem;
  cursor: pointer;
}

.knit-md-supplier__logo {
  width: 2.75rem;
  height: 2.75rem;
  border-radius: 8px;
  object-fit: cover;
  flex: 0 0 auto;
  background: var(--knit-control-active-bg);
}

.knit-md-supplier__logo--ph {
  display: grid;
  place-items: center;
  font-weight: 700;
  color: var(--knit-text-muted);
}

.knit-md-supplier__meta {
  display: flex;
  flex-direction: column;
  gap: 0.2rem;
  min-width: 0;
}

.knit-md-supplier__name {
  font-weight: 650;
  display: flex;
  align-items: center;
  gap: 0.35rem;
  flex-wrap: wrap;
}

.knit-md-supplier__type,
.knit-md-supplier__scope {
  font-size: 0.82rem;
  color: var(--knit-text-muted);
}

.knit-md-status {
  padding: 2rem 1rem;
  text-align: center;
  display: flex;
  flex-direction: column;
  gap: 0.85rem;
  align-items: center;
}

.knit-md-status__actions {
  display: flex;
  gap: 0.5rem;
}

.knit-md-skel {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 1rem;
}

.knit-md-skel__media,
.knit-md-skel__line,
.knit-md-skel__block {
  background: linear-gradient(90deg, #eef2f7 25%, #f8fafc 37%, #eef2f7 63%);
  background-size: 400% 100%;
  animation: knit-md-shimmer 1.2s ease-in-out infinite;
  border-radius: 8px;
}

.knit-md-skel__media {
  aspect-ratio: 1 / 1;
}

.knit-md-skel__col {
  display: flex;
  flex-direction: column;
  gap: 0.65rem;
}

.knit-md-skel__line {
  height: 0.9rem;
  width: 80%;
}

.knit-md-skel__line--lg {
  height: 1.4rem;
  width: 70%;
}

.knit-md-skel__line--sm {
  width: 45%;
}

.knit-md-skel__block {
  height: 4.5rem;
  width: 100%;
}

@keyframes knit-md-shimmer {
  0% {
    background-position: 100% 0;
  }
  100% {
    background-position: 0 0;
  }
}

.visually-hidden {
  position: absolute !important;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
  border: 0;
}

@media (max-width: 860px) {
  .knit-material-detail__panel {
    width: 100%;
    max-height: 100%;
    border-radius: 0;
  }

  .knit-md-layout,
  .knit-md-skel {
    grid-template-columns: 1fr;
  }

  .knit-material-detail__scroll {
    padding: 0.75rem 0.85rem 2.5rem;
  }

  .knit-md-variant-grid {
    max-height: 14rem;
  }

  .knit-md-actions {
    position: static;
  }
}


.knit-md-supplier-line--link {
  display: inline;
  font: inherit;
  border: 0;
  background: transparent;
  color: var(--knit-text-body);
  text-decoration: underline;
  cursor: pointer;
  padding: 0;
  text-align: left;
}

.knit-md-supplier__card--static {
  cursor: default;
}

/* ���� Supplier Public Profile���� 12 �׶Σ� ���� */
.knit-supplier-profile {
  position: fixed;
  inset: 0;
  z-index: 12100;
  display: flex;
  align-items: stretch;
  justify-content: center;
}

.knit-supplier-profile[hidden] {
  display: none !important;
}

.knit-supplier-profile__backdrop {
  position: absolute;
  inset: 0;
  background: rgba(15, 23, 42, 0.45);
}

.knit-supplier-profile__panel {
  position: relative;
  z-index: 1;
  width: min(1080px, 100%);
  max-height: 100%;
  margin: 0 auto;
  background: var(--knit-panel-bg, #fff);
  color: var(--knit-page-text);
  box-shadow: 0 12px 40px rgba(15, 23, 42, 0.18);
  display: flex;
  flex-direction: column;
  overflow: hidden;
}

.knit-supplier-profile__scroll {
  overflow: auto;
  -webkit-overflow-scrolling: touch;
  padding: 0.85rem 1.1rem 2rem;
  flex: 1;
}

html.knit-sp-open {
  overflow: hidden;
}

.knit-sp-top { margin-bottom: 0.75rem; }

.knit-sp-back {
  font: inherit;
  border: 0;
  background: transparent;
  color: inherit;
  cursor: pointer;
  padding: 0.25rem 0;
}

.knit-sp-header {
  display: flex;
  gap: 1rem;
  align-items: flex-start;
  margin-bottom: 1.25rem;
}

.knit-sp-logo {
  width: 4.5rem;
  height: 4.5rem;
  border-radius: 12px;
  object-fit: cover;
  background: var(--knit-control-active-bg);
  flex: 0 0 auto;
}

.knit-sp-logo--ph {
  display: grid;
  place-items: center;
  font-size: 1.5rem;
  font-weight: 700;
  color: var(--knit-text-muted);
}

.knit-sp-header__main {
  min-width: 0;
  display: flex;
  flex-direction: column;
  gap: 0.35rem;
}

.knit-sp-title {
  margin: 0;
  font-size: clamp(1.35rem, 2.2vw, 1.7rem);
  font-weight: 650;
  letter-spacing: -0.02em;
  display: flex;
  flex-wrap: wrap;
  gap: 0.4rem;
  align-items: center;
}

.knit-sp-badge {
  font-size: 0.75rem;
  font-weight: 600;
  padding: 0.15rem 0.45rem;
  border-radius: 4px;
  background: #eef2f7;
  color: var(--knit-text-body);
}

.knit-sp-type,
.knit-sp-desc,
.knit-sp-stats,
.knit-sp-hint {
  margin: 0;
  color: var(--knit-text-muted);
  font-size: 0.92rem;
}

.knit-sp-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 0.5rem;
  align-items: center;
  margin-top: 0.35rem;
}

.knit-sp-btn {
  font: inherit;
  border: 1px solid var(--knit-panel-border);
  background: var(--knit-panel-bg);
  border-radius: 8px;
  padding: 0.5rem 0.95rem;
  cursor: pointer;
}

.knit-sp-btn--primary {
  background: var(--knit-pill-active-bg);
  border-color: var(--knit-control-active-border);
  color: var(--knit-pill-active-text);
  font-weight: 600;
}

.knit-sp-btn--ghost { background: transparent; }

.knit-sp-toolbar {
  display: flex;
  flex-direction: column;
  gap: 0.55rem;
  margin-bottom: 0.85rem;
}

.knit-sp-tabs {
  display: flex;
  flex-wrap: wrap;
  gap: 0.35rem;
}

.knit-sp-tab {
  font: inherit;
  border: 1px solid var(--knit-panel-border);
  background: var(--knit-panel-bg);
  border-radius: 999px;
  padding: 0.28rem 0.7rem;
  cursor: pointer;
}

.knit-sp-tab.is-active {
  background: var(--knit-pill-active-bg);
  border-color: var(--knit-control-active-border);
  color: #fff;
}

.knit-sp-tools {
  display: flex;
  flex-wrap: wrap;
  gap: 0.45rem;
  align-items: center;
}

.knit-sp-search {
  flex: 1;
  min-width: 10rem;
}

.knit-sp-search input,
.knit-sp-tools select {
  font: inherit;
  padding: 0.4rem 0.6rem;
  border: 1px solid var(--knit-panel-border);
  border-radius: 8px;
  width: 100%;
  box-sizing: border-box;
}

.knit-sp-tools select { width: auto; }

.knit-sp-empty,
.knit-sp-status {
  padding: 1.5rem 0.5rem;
  text-align: center;
  color: var(--knit-text-muted);
}

.knit-sp-status__actions {
  display: flex;
  gap: 0.5rem;
  justify-content: center;
  margin-top: 0.75rem;
}

.knit-sp-skel {
  display: flex;
  flex-direction: column;
  gap: 0.75rem;
}

.knit-sp-skel__logo,
.knit-sp-skel__line,
.knit-sp-skel__grid,
.knit-sp-materials-skel {
  background: linear-gradient(90deg, #eef2f7 25%, #f8fafc 37%, #eef2f7 63%);
  background-size: 400% 100%;
  animation: knit-md-shimmer 1.2s ease-in-out infinite;
  border-radius: 8px;
}

.knit-sp-skel__logo {
  width: 4.5rem;
  height: 4.5rem;
  border-radius: 12px;
}

.knit-sp-skel__line {
  height: 0.9rem;
  width: 60%;
}

.knit-sp-skel__line--lg {
  height: 1.4rem;
  width: 40%;
}

.knit-sp-skel__grid,
.knit-sp-materials-skel {
  height: 12rem;
  width: 100%;
  margin-top: 0.5rem;
}

@media (max-width: 860px) {
  .knit-supplier-profile__panel { width: 100%; }
  .knit-supplier-profile__scroll { padding: 0.75rem 0.85rem 2.5rem; }
  .knit-sp-header { flex-direction: column; }
}

/* ���� Material Authoring���� 13 �׶Σ� ���� */
.knit-ma {
  position: fixed;
  inset: 0;
  z-index: 12200;
  display: flex;
  justify-content: center;
}
.knit-ma[hidden] { display: none !important; }
.knit-ma__backdrop {
  position: absolute;
  inset: 0;
  background: rgba(15, 23, 42, 0.45);
}
.knit-ma__panel {
  position: relative;
  z-index: 1;
  width: min(1200px, 100%);
  max-height: 100%;
  margin: 0 auto;
  background: var(--knit-panel-bg, #fff);
  color: var(--knit-page-text);
  box-shadow: 0 12px 40px rgba(15, 23, 42, 0.18);
  display: flex;
  flex-direction: column;
  overflow: hidden;
}
.knit-ma__scroll {
  overflow: auto;
  -webkit-overflow-scrolling: touch;
  padding: 0.85rem 1rem 2rem;
  flex: 1;
}
html.knit-ma-open { overflow: hidden; }

.knit-md-draft-banner {
  margin: 0 1rem 0.75rem;
  padding: 0.55rem 0.85rem;
  border-radius: 8px;
  background: #fff7ed;
  color: #9a3412;
  border: 1px solid #fdba74;
  font-size: 0.875rem;
  font-weight: 600;
  text-align: center;
}
.knit-md-draft-banner--muted {
  background: var(--knit-panel-bg-alt);
  color: var(--knit-text-muted);
  border-color: var(--knit-panel-border);
  font-weight: 500;
}
.knit-ma-media {
  display: flex;
  flex-wrap: wrap;
  gap: 0.55rem;
  margin: 0.35rem 0 0.75rem;
}
.knit-ma-media__item {
  position: relative;
  width: 5.5rem;
  border: 1px solid var(--knit-panel-border);
  border-radius: 8px;
  overflow: hidden;
  background: var(--knit-panel-bg-alt);
}
.knit-ma-media__item.is-cover {
  outline: 2px solid #0f766e;
  outline-offset: 1px;
}
.knit-ma-media__item img {
  display: block;
  width: 100%;
  height: 4.2rem;
  object-fit: cover;
}
.knit-ma-media__tools {
  display: flex;
  flex-direction: column;
  gap: 0.15rem;
  padding: 0.25rem;
}
.knit-ma-media__tools button {
  border: 0;
  background: transparent;
  color: var(--knit-text-heading);
  font-size: 0.7rem;
  cursor: pointer;
  padding: 0.1rem;
  text-align: left;
}
.knit-ma-media__tools button:hover { text-decoration: underline; }
.knit-ma-media__add {
  width: 5.5rem;
  min-height: 5.5rem;
  border: 1px dashed var(--knit-control-border);
  border-radius: 8px;
  background: var(--knit-panel-bg);
  cursor: pointer;
  color: var(--knit-text-body);
  font-size: 0.8rem;
}
.knit-ma-media__hint {
  font-size: 0.8rem;
  color: var(--knit-text-muted);
  margin: 0 0 0.5rem;
}
.knit-ma-media__url details {
  margin-top: 0.35rem;
  font-size: 0.85rem;
  color: var(--knit-text-muted);
}
.knit-ma-media__url summary {
  cursor: pointer;
  user-select: none;
}
.knit-ma-header {
  display: flex;
  flex-wrap: wrap;
  gap: 0.65rem;
  align-items: center;
  margin-bottom: 0.85rem;
}
.knit-ma-header__main {
  flex: 1;
  display: flex;
  flex-wrap: wrap;
  gap: 0.45rem;
  align-items: center;
  min-width: 0;
}
.knit-ma-header__actions {
  display: flex;
  gap: 0.4rem;
}
.knit-ma-title {
  margin: 0;
  font-size: 1.25rem;
  font-weight: 650;
}
.knit-ma-back {
  font: inherit;
  border: 0;
  background: transparent;
  cursor: pointer;
  padding: 0.2rem 0;
}
.knit-ma-status-pill {
  font-size: 0.75rem;
  padding: 0.15rem 0.45rem;
  border-radius: 4px;
  background: #eef2f7;
}
.knit-ma-save {
  font-size: 0.8rem;
  color: var(--knit-text-muted);
}
.knit-ma-banner {
  margin: 0 0 0.75rem;
  padding: 0.55rem 0.7rem;
  border-radius: 8px;
  background: var(--knit-panel-bg-alt);
  color: var(--knit-text-body);
  font-size: 0.9rem;
}
.knit-ma-banner--err {
  background: #fff1f2;
  color: #9f1239;
}
.knit-ma-layout {
  display: grid;
  grid-template-columns: 11rem minmax(0, 1fr) 15rem;
  gap: 1rem;
  align-items: start;
}
.knit-ma-nav {
  display: flex;
  flex-direction: column;
  gap: 0.25rem;
  position: sticky;
  top: 0;
}
.knit-ma-nav__item {
  font: inherit;
  text-align: left;
  border: 0;
  background: transparent;
  padding: 0.4rem 0.5rem;
  border-radius: 6px;
  cursor: pointer;
  color: var(--knit-text-muted);
}
.knit-ma-nav__item.is-active {
  background: #0f172a;
  color: #fff;
}
.knit-ma-nav__mark {
  display: inline-block;
  width: 1.1rem;
}
.knit-ma-main {
  min-width: 0;
}
.knit-ma-side {
  position: sticky;
  top: 0;
}
.knit-ma-section h2 {
  margin: 0 0 0.75rem;
  font-size: 1.05rem;
}
.knit-ma-field {
  display: flex;
  flex-direction: column;
  gap: 0.3rem;
  margin-bottom: 0.75rem;
}
.knit-ma-label {
  font-size: 0.82rem;
  color: var(--knit-text-muted);
}
.knit-ma-field input,
.knit-ma-field textarea,
.knit-ma-field select,
.knit-ma-block input,
.knit-ma-block select,
.knit-ma-var__body input,
.knit-ma-var__body select {
  font: inherit;
  padding: 0.45rem 0.55rem;
  border: 1px solid var(--knit-panel-border);
  border-radius: 8px;
}
.knit-ma-types {
  display: flex;
  flex-wrap: wrap;
  gap: 0.45rem;
}
.knit-ma-type {
  border: 1px solid var(--knit-panel-border);
  border-radius: 10px;
  padding: 0.65rem 1rem;
  cursor: pointer;
  min-width: 5.5rem;
  text-align: center;
}
.knit-ma-type.is-active {
  border-color: var(--knit-control-active-border);
  background: var(--knit-pill-active-bg);
  color: #fff;
}
.knit-ma-type input { position: absolute; opacity: 0; pointer-events: none; }
.knit-ma-chips, .knit-ma-checks {
  display: flex;
  flex-wrap: wrap;
  gap: 0.4rem;
}
.knit-ma-chip {
  border: 1px solid var(--knit-panel-border);
  border-radius: 999px;
  padding: 0.28rem 0.65rem;
  cursor: pointer;
  font-size: 0.85rem;
}
.knit-ma-chip input { margin-right: 0.25rem; }
.knit-ma-hint {
  margin: 0.35rem 0 0;
  font-size: 0.82rem;
  color: var(--knit-text-muted);
}
.knit-ma-grid2 {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 0.65rem;
}
.knit-ma-btn {
  font: inherit;
  border: 1px solid var(--knit-panel-border);
  background: var(--knit-panel-bg);
  border-radius: 8px;
  padding: 0.45rem 0.85rem;
  cursor: pointer;
}
.knit-ma-btn--primary {
  background: var(--knit-pill-active-bg);
  border-color: var(--knit-control-active-border);
  color: var(--knit-pill-active-text);
  font-weight: 600;
}
.knit-ma-btn:disabled {
  opacity: 0.45;
  cursor: not-allowed;
}
.knit-ma-link {
  font: inherit;
  border: 0;
  background: transparent;
  color: var(--knit-text-body);
  text-decoration: underline;
  cursor: pointer;
  padding: 0;
}
.knit-ma-link--danger { color: #b91c1c; }
.knit-ma-comp-row {
  display: grid;
  grid-template-columns: 1fr 6rem 2rem;
  gap: 0.4rem;
  margin-bottom: 0.4rem;
}
.knit-ma-comp-sum { font-size: 0.9rem; color: var(--knit-text-heading); }
.knit-ma-block {
  border: 1px solid var(--knit-panel-border);
  border-radius: 10px;
  padding: 0.75rem;
  margin-bottom: 0.75rem;
}
.knit-ma-block h3 {
  margin: 0 0 0.5rem;
  font-size: 0.92rem;
}
.knit-ma-var {
  border: 1px solid var(--knit-panel-border);
  border-radius: 8px;
  margin-bottom: 0.45rem;
  overflow: hidden;
}
.knit-ma-var__toggle {
  display: flex;
  align-items: center;
  gap: 0.55rem;
  flex: 1;
  min-width: 0;
  border: 0;
  background: transparent;
  text-align: left;
  cursor: pointer;
  padding: 0.65rem 0.75rem;
  font: inherit;
  color: inherit;
}
.knit-ma-var__sort {
  display: flex;
  flex-direction: column;
  gap: 0.1rem;
  padding-right: 0.5rem;
}
.knit-ma-var__head {
  width: 100%;
  display: flex;
  gap: 0.55rem;
  align-items: center;
  font: inherit;
  border: 0;
  background: var(--knit-panel-bg-alt);
  padding: 0.55rem 0.65rem;
  cursor: pointer;
  text-align: left;
}
.knit-ma-var__swatch {
  width: 1.35rem;
  height: 1.35rem;
  border-radius: 999px;
  border: 1px solid rgba(0,0,0,0.08);
  background: #cbd5e1;
  flex: 0 0 auto;
}
.knit-ma-var__meta { flex: 1; min-width: 0; }
.knit-ma-var__price { font-size: 0.8rem; color: var(--knit-text-muted); }
.knit-ma-var__body { padding: 0.75rem; }
.knit-ma-var__foot {
  display: flex;
  gap: 0.75rem;
  align-items: center;
  margin-top: 0.5rem;
}
.knit-ma-override {
  border: 1px dashed var(--knit-panel-border);
  border-radius: 8px;
  padding: 0.55rem;
  margin: 0.45rem 0;
}
.knit-ma-ready {
  border: 1px solid var(--knit-panel-border);
  border-radius: 10px;
  padding: 0.75rem;
  background: var(--knit-panel-bg-alt);
}
.knit-ma-ready__title {
  margin: 0 0 0.35rem;
  font-size: 0.95rem;
}
.knit-ma-ready__state {
  margin: 0 0 0.55rem;
  font-size: 0.85rem;
  color: var(--knit-text-muted);
}
.knit-ma-ready__list,
.knit-ma-ready__errors ul,
.knit-ma-ready__warns ul,
.knit-ma-err-list,
.knit-ma-warn-list {
  margin: 0;
  padding-left: 0;
  list-style: none;
}
.knit-ma-ready__list button,
.knit-ma-ready__errors button,
.knit-ma-err-list button {
  font: inherit;
  border: 0;
  background: transparent;
  color: inherit;
  cursor: pointer;
  padding: 0.2rem 0;
  text-align: left;
}
.knit-ma-ready__errors { color: #9f1239; margin-top: 0.55rem; }
.knit-ma-ready__warns { color: #b45309; margin-top: 0.55rem; }
.knit-ma-danger { margin-top: 1.25rem; }
.knit-ma-status {
  padding: 2rem 1rem;
  text-align: center;
}
.knit-ma-skel {
  display: grid;
  grid-template-columns: 10rem 1fr 12rem;
  gap: 1rem;
}
.knit-ma-skel__nav,
.knit-ma-skel__main,
.knit-ma-skel__side {
  background: linear-gradient(90deg, #eef2f7 25%, #f8fafc 37%, #eef2f7 63%);
  background-size: 400% 100%;
  animation: knit-md-shimmer 1.2s ease-in-out infinite;
  border-radius: 8px;
  min-height: 12rem;
}
.knit-ma-publish-actions {
  display: flex;
  gap: 0.5rem;
  margin-top: 1rem;
}
.knit-ma-var-actions {
  display: flex;
  gap: 0.45rem;
  margin-bottom: 0.65rem;
}

.knit-relay-btn {
  font: inherit;
  cursor: pointer;
  border: 0;
  background: rgba(20, 24, 32, 0.55);
  color: #fff;
  border-radius: 999px;
  padding: 0.18rem 0.5rem;
  font-size: 0.72rem;
  line-height: 1.2;
  z-index: 6;
  pointer-events: auto;
}
.knit-relay-btn--card {
  position: absolute;
  top: 0.38rem;
  left: 0.38rem;
}
.knit-meta-footer .knit-relay-btn--card {
  position: static;
  margin-right: 0.35rem;
}
.knit-relay-publish-banner {
  display: flex;
  align-items: center;
  gap: 0.6rem;
  margin: 0.4rem 0 0.7rem;
  padding: 0.55rem 0.75rem;
  border-radius: 10px;
  background: var(--knit-paper-2, #eef1f5);
  color: inherit;
}
.knit-relay-publish-banner[hidden] { display: none; }
.knit-relay-publish-banner button {
  margin-left: auto;
  font: inherit;
  cursor: pointer;
}
.knit-relay-network {
  position: fixed;
  inset: 0;
  z-index: 80;
  background: rgba(10, 12, 16, 0.46);
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 1rem;
}
.knit-relay-network[hidden] { display: none; }
.knit-relay-network__panel {
  width: min(480px, 100%);
  max-height: min(90vh, 760px);
  overflow: auto;
  background: var(--knit-panel-bg, #fff);
  color: inherit;
  border-radius: 16px;
  padding: 1rem 1.1rem 1.2rem;
  box-shadow: 0 18px 50px rgba(0, 0, 0, 0.22);
}
.knit-relay-network__head {
  display: flex;
  align-items: center;
  gap: 0.6rem;
}
.knit-relay-network__head h2 {
  margin: 0;
  font-size: 1.05rem;
  flex: 1;
}
.knit-relay-network__close {
  border: 0;
  background: transparent;
  font-size: 1.4rem;
  cursor: pointer;
  line-height: 1;
}
.knit-relay-network__hint,
.knit-relay-muted {
  margin: 0.45rem 0 0.65rem;
  font-size: 0.85rem;
  opacity: 0.72;
}
.knit-relay-star {
  position: relative;
  width: min(100%, 420px);
  margin: 0.2rem auto 0.4rem;
  aspect-ratio: 1;
  max-height: 420px;
}
.knit-relay-star__svg {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  pointer-events: none;
}
.knit-relay-star__web {
  fill: rgba(196, 48, 42, 0.14);
  stroke: rgba(40, 44, 52, 0.78);
  stroke-width: 2.2;
  stroke-linejoin: round;
}
.knit-relay-star__arm {
  stroke: rgba(40, 44, 52, 0.55);
  stroke-width: 3.5;
  stroke-linecap: round;
}
.knit-relay-bubble {
  position: absolute;
  border: 2.5px solid #c4302a;
  border-radius: 50%;
  padding: 0;
  margin: 0;
  overflow: hidden;
  cursor: pointer;
  background: #c4302a;
  color: #fff;
  box-shadow: 0 4px 14px rgba(0, 0, 0, 0.18);
  z-index: 2;
}
.knit-relay-bubble.is-focus {
  border-width: 3px;
  z-index: 3;
  box-shadow: 0 6px 18px rgba(196, 48, 42, 0.35);
}
.knit-relay-bubble.is-parent {
  border-color: #1f2a3a;
}
.knit-relay-bubble.is-mine {
  outline: 2px solid #2a6f4e;
  outline-offset: 2px;
}
.knit-relay-bubble.is-hidden {
  opacity: 0.45;
  cursor: default;
}
.knit-relay-bubble__cover {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
}
.knit-relay-bubble__num {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 100%;
  height: 100%;
  font-size: 1.15rem;
  font-weight: 700;
}
.knit-relay-bubble__tag {
  position: absolute;
  left: 50%;
  bottom: -0.1rem;
  transform: translate(-50%, 100%);
  font-size: 0.68rem;
  white-space: nowrap;
  color: inherit;
  background: var(--knit-panel-bg, #fff);
  border-radius: 999px;
  padding: 0.08rem 0.35rem;
  border: 1px solid rgba(127, 140, 160, 0.35);
  pointer-events: none;
}
.knit-relay-network__actions {
  margin-top: 1.1rem;
  display: flex;
  flex-wrap: wrap;
  gap: 0.55rem;
  align-items: center;
}
.knit-relay-network__primary,
.knit-relay-network__ghost {
  font: inherit;
  cursor: pointer;
  border-radius: 999px;
  padding: 0.5rem 1rem;
}
.knit-relay-network__primary {
  border: 0;
  background: #2a3140;
  color: #fff;
}
.knit-relay-network__ghost {
  border: 1px solid rgba(127, 140, 160, 0.45);
  background: transparent;
  color: inherit;
}
.knit-relay-network__ghost[hidden] { display: none; }

@media (max-width: 960px) {
  .knit-ma-layout {
    grid-template-columns: 1fr;
  }
  .knit-ma-nav {
    flex-direction: row;
    flex-wrap: wrap;
    position: static;
  }
  .knit-ma-side { position: static; order: -1; }
  .knit-ma-grid2 { grid-template-columns: 1fr; }
  .knit-ma-skel { grid-template-columns: 1fr; }
}