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

:root {
  --knit-top-h: 52px;
  --knit-side-w: 148px;
  --knit-black: #0a0a0a;
  --knit-black-hover: #1a1a1a;
  --knit-red: #c93030;
  --knit-red-soft: #e85c5c;
  --knit-bg: #f5f5f5;
  /* 设计下一行 7 列的总宽；可视区更窄时靠横向滚动看全 7 列，不把列宽无限压扁 */
  --knit-grid-ref-w: 1200px;
}

*,
*::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: #eee;
}

.knit-auth-gate {
  position: fixed;
  inset: 0;
  z-index: 5000;
  background: #000;
  overflow: hidden;
}

.knit-auth-gate[hidden] {
  display: none !important;
}

.knit-auth-gate-bg {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}

.knit-auth-gate-mask {
  position: absolute;
  inset: 0;
  background: rgba(0, 0, 0, 0.34);
}

.knit-auth-gate-content {
  position: absolute;
  left: 50%;
  top: 50%;
  transform: translate(-50%, -50%);
  text-align: center;
  color: #fff;
}

.knit-auth-gate-title {
  margin: 0;
  font-size: clamp(30px, 7vw, 66px);
  letter-spacing: 0.12em;
  font-weight: 800;
  text-shadow: 0 6px 20px rgba(0, 0, 0, 0.45);
}

.knit-auth-gate-sub {
  margin: 0.8rem 0 0;
  font-size: clamp(14px, 2vw, 20px);
  opacity: 0.95;
}

.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: var(--knit-black);
  border-bottom: 1px solid #222;
}

.knit-brand {
  font-size: 1.15rem;
  font-weight: 700;
  letter-spacing: 0.06em;
  color: #fff;
  white-space: nowrap;
}

.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: #e8e8e8;
  background: transparent;
  border: 1px solid #333;
  border-radius: 6px;
  cursor: pointer;
  transition: background 0.15s, border-color 0.15s;
}

.knit-topnav button:hover {
  background: var(--knit-black-hover);
  border-color: #555;
}

.knit-topnav button.is-active {
  background: #1f1f1f;
  border-color: #666;
  color: #fff;
}

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

.knit-search {
  width: 100%;
  padding: 0.4rem 0.75rem;
  font-size: 0.9rem;
  color: #111;
  background: #fff;
  border: 1px solid #444;
  border-radius: 8px;
  outline: none;
}

.knit-search::placeholder {
  color: #888;
}

.knit-search:focus {
  border-color: #888;
}

.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: #fff;
  border: 1px solid #c8cdd6;
  border-radius: 10px;
  box-shadow: 0 10px 28px rgba(15, 23, 42, 0.14);
}

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

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

.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: #0f172a;
  font-size: 0.86rem;
}

.knit-search-hit:hover,
.knit-search-hit:focus-visible {
  background: #f1f5f9;
  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: #64748b;
  line-height: 1.2;
}

.knit-search-thumb {
  width: 40px;
  height: 40px;
  border-radius: 6px;
  object-fit: cover;
  flex-shrink: 0;
  background: #e2e8f0;
}

.knit-search-empty {
  padding: 0.75rem 1rem;
  font-size: 0.85rem;
  color: #64748b;
}

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

.knit-sidebar {
  position: fixed;
  top: var(--knit-top-h);
  left: 0;
  width: var(--knit-side-w);
  bottom: 0;
  z-index: 90;
  flex-shrink: 0;
  display: flex;
  flex-direction: column;
  gap: 0.35rem;
  padding: 1rem 0.65rem;
  background: var(--knit-black);
  border-right: 1px solid #222;
}

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

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

.knit-sidebar button.is-active {
  background: #1f1f1f;
  color: #fff;
}

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

.knit-side-collapse-btn.is-open {
  background: #1f1f1f;
  color: #fff;
}

.knit-side-collapse-btn::after {
  content: "▸";
  position: absolute;
  right: 0.55rem;
  top: 50%;
  transform: translateY(-50%);
  font-size: 0.72rem;
  color: #9ca3af;
  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 #3a3a3a;
  border-radius: 0 8px 8px 0;
  background: rgba(255, 255, 255, 0.03);
}

.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: #cbd5e1;
  padding: 0.42rem 0.62rem 0.42rem 0.52rem;
}

.knit-side-submenu .knit-side-sub-btn::before {
  content: "▹";
  font-size: 0.68rem;
  color: #94a3b8;
}

.knit-side-submenu .knit-side-sub-btn.is-active {
  background: #242424;
  color: #fff;
}

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

.knit-side-messages-badge {
  position: absolute;
  top: 0.28rem;
  right: 0.35rem;
  min-width: 1rem;
  height: 1rem;
  padding: 0 0.25rem;
  line-height: 1rem;
  font-size: 0.62rem;
  font-weight: 700;
  color: #fff;
  background: var(--knit-red);
  border-radius: 999px;
  text-align: center;
}

.knit-main {
  flex: 1;
  margin-left: var(--knit-side-w);
  width: calc(100% - var(--knit-side-w));
  min-width: 0;
  min-height: 0;
  display: flex;
  flex-direction: column;
  padding: 0.5rem 0.35rem 0.65rem;
  background: #fafafa;
  overflow: hidden;
}

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

/**
 * 主区为纵向 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: #f5f6f8;
  color: #1f2329;
}

.knit-msg-topbar {
  background: #fff;
  border-bottom: 1px solid #e5e7eb;
  padding: 0.75rem 0.9rem;
  display: flex;
  align-items: center;
  justify-content: space-between;
}

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

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

.knit-msg-mark-btn {
  border: 1px solid #d1d5db;
  background: #fff;
  border-radius: 8px;
  padding: 0.35rem 0.65rem;
  cursor: pointer;
}

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

.knit-msg-tabs {
  display: flex;
  gap: 0.45rem;
  padding: 0.6rem 0.75rem;
  background: #fff;
  border-bottom: 1px solid #e5e7eb;
  overflow-x: auto;
}

.knit-msg-tab {
  border: 1px solid #d1d5db;
  background: #fff;
  border-radius: 999px;
  padding: 0.3rem 0.7rem;
  white-space: nowrap;
  cursor: pointer;
}

.knit-msg-tab.is-active {
  color: #fff;
  background: var(--knit-red);
  border-color: var(--knit-red);
}

.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: #fff;
  border: 1px solid #e5e7eb;
  border-radius: 12px;
  padding: 0.7rem;
}

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

.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-badge {
  font-size: 0.72rem;
  color: #b91c1c;
  background: #fee2e2;
  border-radius: 999px;
  padding: 0.1rem 0.45rem;
  flex: 0 0 auto;
}

.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: #475569;
}

.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;
}

.knit-msg-time {
  font-size: 0.75rem;
  color: #6b7280;
}

.knit-msg-content {
  margin: 0.35rem 0 0.5rem;
  line-height: 1.45;
  color: #374151;
}

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

.knit-msg-tag {
  font-size: 0.72rem;
  color: #4b5563;
  background: #f3f4f6;
  border-radius: 999px;
  padding: 2px 8px;
}

.knit-msg-reply-btn {
  border: 1px solid #d1d5db;
  background: #f9fafb;
  color: #374151;
  cursor: pointer;
  padding: 0.15rem 0.55rem;
  font-size: 0.72rem;
  border-radius: 6px;
  font-family: inherit;
}

.knit-msg-reply-btn:hover {
  background: #eef2f7;
}

.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 {
  border: 1px solid #d1d5db;
  background: #f9fafb;
  color: #374151;
  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-unread-dot {
  width: 10px;
  height: 10px;
  border-radius: 999px;
  background: var(--knit-red);
  margin-top: 6px;
  flex: 0 0 auto;
}

.knit-msg-item.is-read .knit-msg-unread-dot {
  visibility: hidden;
}

.knit-msg-empty {
  margin: 2rem 0;
  text-align: center;
  color: #6b7280;
}

.knit-mine-view {
  flex: 1;
  min-width: 0;
  min-height: 0;
  overflow: auto;
  background: #f6f7f9;
  color: #1f2329;
  padding: 0.9rem;
  display: flex;
  flex-direction: column;
  gap: 0.8rem;
}

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

.knit-mine-profile {
  display: flex;
  align-items: center;
  gap: 0.75rem;
  background: #fff;
  border: 1px solid #e6e8ec;
  border-radius: 12px;
  padding: 0.8rem;
  flex-shrink: 0;
}

.knit-mine-edit-btn {
  margin-left: auto;
  border: 1px solid #d1d5db;
  background: #fff;
  border-radius: 8px;
  padding: 0.35rem 0.7rem;
  cursor: pointer;
  color: #111827;
}

.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;
}

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

.knit-mine-name {
  margin: 0;
  font-size: 1rem;
  color: #111827;
}

.knit-mine-bio {
  margin: 0.25rem 0;
  font-size: 0.82rem;
  color: #6b7280;
}

.knit-mine-id {
  margin: 0;
  font-size: 0.78rem;
  color: #6b7280;
}

.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: #6b7280;
}

.knit-mine-wall-label {
  flex: 0 0 auto;
  color: #6b7280;
}

.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 #d1d5db;
  background: #fff;
  border-radius: 6px;
  padding: 0.15rem 0.45rem;
  font-size: 0.72rem;
  cursor: pointer;
  color: #111827;
}

.knit-mine-wall-copy-btn:hover {
  background: #f3f4f6;
}

.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-fold {
  background: #fff;
  border: 1px solid #e6e8ec;
  border-radius: 12px;
  overflow: hidden;
  display: flex;
  flex-direction: column;
  flex: 1;
  min-height: 0;
}

.knit-mine-fold-head {
  width: 100%;
  border: none;
  background: #fff;
  padding: 0.65rem 0.75rem;
  display: flex;
  align-items: center;
  justify-content: space-between;
  font-size: 0.92rem;
  font-weight: 700;
  color: #111827;
  cursor: pointer;
  flex-shrink: 0;
}

.knit-mine-fold-arrow {
  font-size: 0.75rem;
  color: #6b7280;
}

.knit-mine-stat-card {
  background: #fff;
  border: 1px solid #e6e8ec;
  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: #cfd4dc;
}

.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: #111827;
}

.knit-mine-stat-label {
  margin: 0.2rem 0 0;
  font-size: 0.75rem;
  color: #6b7280;
}

#knitMineStatsWrap:not([hidden]) {
  flex-shrink: 0;
  padding: 0 0.75rem 0.65rem;
}

.knit-mine-fold > .knit-mine-works {
  flex: 1;
  min-height: 0;
  overflow: auto;
  margin-top: 0;
  border-top: 1px solid #e6e8ec;
  border-radius: 0;
  padding: 0.75rem;
  background: #fff;
}

.knit-mine-works {
  background: #fff;
  padding: 0.75rem;
}

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

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

.knit-mine-refresh-btn {
  border: 1px solid #d1d5db;
  background: #fff;
  border-radius: 8px;
  padding: 0.28rem 0.58rem;
  cursor: pointer;
}

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

.knit-mine-work-card {
  border: 1px solid #e5e7eb;
  border-radius: 10px;
  overflow: hidden;
  background: #fff;
}

.knit-mine-work-thumb {
  width: 100%;
  aspect-ratio: 1 / 1;
  object-fit: cover;
  display: block;
  background: #f3f4f6;
}

.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;
}

.knit-mine-work-tag {
  display: inline-flex;
  align-items: center;
  border-radius: 999px;
  padding: 2px 8px;
  font-size: 0.7rem;
  color: #4b5563;
  background: #f3f4f6;
}

.knit-mine-work-time {
  font-size: 0.7rem;
  color: #6b7280;
}

.knit-mine-work-text {
  margin: 0.38rem 0 0;
  font-size: 0.78rem;
  color: #374151;
  line-height: 1.4;
  min-height: 2.2em;
}

.knit-mine-empty {
  margin: 0.8rem 0 0.2rem;
  text-align: center;
  color: #6b7280;
  font-size: 0.82rem;
}

.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;
}

.knit-mine-delete-panel {
  width: min(360px, 100%);
  background: #fff;
  border-radius: 12px;
  border: 1px solid #e5e7eb;
  padding: 0.9rem 0.95rem;
  color: #111827;
}

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

.knit-mine-delete-text {
  margin: 0.45rem 0 0;
  color: #4b5563;
  font-size: 0.86rem;
}

.knit-mine-delete-actions {
  margin-top: 0.85rem;
  display: flex;
  justify-content: flex-end;
  gap: 0.55rem;
}

.knit-mine-delete-btn {
  border: 1px solid #d1d5db;
  background: #fff;
  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: #374151;
}

.knit-mine-edit-input,
.knit-mine-edit-textarea {
  width: 100%;
  border: 1px solid #d1d5db;
  border-radius: 8px;
  padding: 0.42rem 0.55rem;
  font-size: 0.86rem;
  color: #111827;
  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: #6b7280;
  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: #1f2329;
  background: #f6f7f9;
  padding: 0.85rem;
  display: flex;
  flex-direction: column;
  gap: 0.75rem;
}

.knit-admin-head {
  background: #fff;
  border: 1px solid #e6e8ec;
  border-radius: 12px;
  padding: 0.8rem;
}

.knit-admin-head h2 {
  margin: 0;
  font-size: 1rem;
  color: #111827;
}

.knit-admin-head p {
  margin: 0.35rem 0 0;
  font-size: 0.82rem;
  color: #6b7280;
}

.knit-admin-panel {
  background: #fff;
  border: 1px solid #e6e8ec;
  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: #111827;
}

.knit-admin-refresh-btn,
.knit-admin-search-btn,
.knit-admin-search-upgrade {
  border: 1px solid #d1d5db;
  background: #fff;
  border-radius: 8px;
  padding: 0.32rem 0.62rem;
  font-size: 0.82rem;
  cursor: pointer;
  color: #111827;
}

.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: #111827;
}

.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 #d1d5db;
  border-radius: 8px;
  padding: 0.42rem 0.55rem;
  font-size: 0.86rem;
  color: #111827;
  background: #fff;
}

.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 #e5e7eb;
  border-radius: 10px;
  background: #fff;
  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 #e5e7eb;
  object-fit: cover;
  background: #f3f4f6;
}

.knit-admin-review-title {
  margin: 0;
  font-size: 0.86rem;
  font-weight: 700;
  color: #111827;
}

.knit-admin-review-meta {
  margin: 0;
  font-size: 0.78rem;
  color: #4b5563;
  line-height: 1.45;
}

.knit-admin-review-actions {
  display: flex;
  justify-content: flex-end;
}

.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-approve:disabled {
  opacity: 0.6;
  cursor: not-allowed;
}

.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 #e5e7eb;
  border-radius: 10px;
  background: #fff;
  padding: 0.58rem;
  display: flex;
  flex-direction: column;
  gap: 0.45rem;
}

.knit-temp-cover-img {
  width: 100%;
  height: 148px;
  border: 1px solid #e5e7eb;
  border-radius: 8px;
  object-fit: cover;
  background: #f3f4f6;
}

.knit-temp-cover-meta {
  margin: 0;
  font-size: 0.76rem;
  color: #6b7280;
}

.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: #fff1f2;
  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 #e5e7eb;
  border-radius: 10px;
  background: #fff;
  padding: 0.62rem;
}

.knit-data-card-title {
  margin: 0;
  font-size: 0.8rem;
  color: #6b7280;
}

.knit-data-card-value {
  margin: 0.3rem 0 0;
  font-size: 1.32rem;
  font-weight: 800;
  color: #111827;
}

.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 #e5e7eb;
  border-radius: 10px;
  background: #fff;
  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: #4b5563;
}

.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-admin-list {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(220px, 1fr));
  gap: 0.55rem;
}

.knit-admin-user-card {
  border: 1px solid #e5e7eb;
  border-radius: 10px;
  background: #fff;
  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: #111827;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.knit-admin-user-id {
  margin: 0.22rem 0 0;
  font-size: 0.75rem;
  color: #6b7280;
}

.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;
  font-size: 0.82rem;
  color: #6b7280;
}

.knit-admin-search-result {
  min-height: 32px;
}

.knit-admin-search-card {
  border: 1px solid #e5e7eb;
  border-radius: 10px;
  background: #fff;
  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: #4b5563;
}

.knit-follow-view {
  flex: 1;
  min-width: 0;
  min-height: 0;
  overflow: hidden;
  color: #222;
  padding: 0;
  display: flex;
  flex-direction: column;
}

.knit-follow-layout {
  flex: 1;
  min-height: 0;
  display: flex;
  overflow: hidden;
}

.knit-follow-sidebar {
  flex-shrink: 0;
  width: min(200px, 34vw);
  border-right: 1px solid #e8e8e8;
  background: #fff;
  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: #111;
}

.knit-follow-head p {
  margin: 0.2rem 0 0;
  font-size: 0.82rem;
  color: #666;
}

.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-follow-main {
  flex: 1;
  min-width: 0;
  min-height: 0;
  display: flex;
  flex-direction: column;
  background: #fafafa;
}

.knit-follow-works-head {
  flex-shrink: 0;
  padding: 0.65rem 0.55rem 0.45rem;
  border-bottom: 1px solid #e8e8e8;
  background: #fff;
}

.knit-follow-works-head h3 {
  margin: 0;
  font-size: 0.95rem;
  color: #111;
}

.knit-follow-works-sub {
  margin: 0.2rem 0 0;
  font-size: 0.78rem;
  color: #666;
}

.knit-follow-scroll {
  flex: 1;
  min-height: 0;
  overflow-x: hidden;
  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: #fff;
  border: 1px solid #e8e8e8;
  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: #111;
}

.knit-follow-work-main {
  display: flex;
  gap: 0.85rem;
  align-items: flex-start;
}

.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: #eee;
  cursor: pointer;
}

.knit-follow-work-footer {
  display: flex;
  flex-wrap: wrap;
  gap: 0.35rem 0.85rem;
  margin-top: 0.45rem;
  font-size: 0.78rem;
  color: #6b7280;
}

.knit-follow-work-intro {
  flex: 1;
  min-width: 0;
  font-size: 0.86rem;
  line-height: 1.55;
  color: #333;
  white-space: pre-wrap;
  word-break: break-word;
}

@media (max-width: 640px) {
  .knit-follow-work-main {
    flex-direction: column;
  }

  .knit-follow-work-left {
    width: 100%;
  }
}

.knit-favorite-list {
  display: grid;
  gap: 0.75rem;
}

.knit-favorite-folder {
  border: 1px solid #e8e8e8;
  border-radius: 12px;
  background: #fff;
  padding: 0.7rem;
}

.knit-favorite-folder-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 0.5rem;
  margin-bottom: 0.55rem;
}

.knit-favorite-folder-title {
  margin: 0;
  font-size: 0.9rem;
  font-weight: 700;
  color: #222;
}

.knit-favorite-folder-meta {
  margin: 0;
  font-size: 0.75rem;
  color: #777;
}

.knit-favorite-folder-remove {
  border: 1px solid #d1d5db;
  border-radius: 999px;
  background: #fff;
  color: #374151;
  font-size: 0.75rem;
  cursor: pointer;
  padding: 0.2rem 0.62rem;
}

.knit-favorite-folder-remove:hover {
  border-color: #ef4444;
  color: #ef4444;
}

.knit-favorite-items {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(160px, 1fr));
  gap: 0.55rem;
}

.knit-favorite-item {
  border: 1px solid #ececec;
  border-radius: 10px;
  background: #fafafa;
  overflow: hidden;
}

.knit-favorite-thumb {
  width: 100%;
  aspect-ratio: 4 / 3;
  object-fit: cover;
  display: block;
  background: #efefef;
}

.knit-favorite-item-body {
  padding: 0.45rem 0.52rem 0.55rem;
}

.knit-favorite-item-title {
  margin: 0;
  font-size: 0.79rem;
  color: #222;
  line-height: 1.35;
  min-height: 2.14em;
}

.knit-favorite-item-meta {
  margin: 0.28rem 0 0;
  font-size: 0.72rem;
  color: #6b7280;
}

.knit-favorite-item-actions {
  margin-top: 0.45rem;
  display: flex;
  gap: 0.4rem;
}

.knit-favorite-item-btn {
  border: 1px solid #d1d5db;
  border-radius: 999px;
  background: #fff;
  color: #374151;
  font-size: 0.72rem;
  cursor: pointer;
  padding: 0.18rem 0.55rem;
}

.knit-favorite-item-btn:hover {
  border-color: #111;
  color: #111;
}

.knit-follow-card {
  border: 1px solid #e8e8e8;
  border-radius: 10px;
  background: #fff;
  padding: 0.55rem 0.62rem;
  cursor: pointer;
  text-align: left;
  width: 100%;
  font-family: inherit;
}

.knit-follow-card:hover {
  border-color: #cfcfcf;
  background: #fafafa;
}

.knit-follow-card.is-active {
  border-color: #111827;
  background: #f3f4f6;
}

.knit-follow-card:focus-visible {
  outline: 2px solid #6b9fff;
  outline-offset: 2px;
}

.knit-follow-card--all {
  font-weight: 700;
}

.knit-follow-name {
  margin: 0;
  font-size: 0.9rem;
  font-weight: 700;
  color: #222;
}

.knit-follow-id {
  margin: 0.25rem 0 0;
  font-size: 0.75rem;
  color: #777;
}

.knit-user-profile-view {
  flex: 1;
  min-height: 0;
  min-width: 0;
  display: flex;
  flex-direction: column;
  overflow: hidden;
  color: #222;
  background: #fafafa;
}

.knit-user-profile-head {
  flex-shrink: 0;
  display: flex;
  align-items: flex-start;
  gap: 0.65rem;
  padding: 0.5rem 0.45rem 0.55rem;
  border-bottom: 1px solid #e8e8e8;
  background: #fff;
}

.knit-user-profile-back {
  flex-shrink: 0;
  margin-top: 0.15rem;
  padding: 0.35rem 0.65rem;
  font-size: 0.82rem;
  font-weight: 600;
  color: #333;
  background: #f3f4f6;
  border: 1px solid #d1d5db;
  border-radius: 8px;
  cursor: pointer;
  font-family: inherit;
}

.knit-user-profile-back:hover {
  background: #e5e7eb;
}

.knit-user-profile-head-text {
  flex: 1;
  min-width: 0;
}

.knit-user-profile-head-text h2 {
  margin: 0;
  font-size: 1.05rem;
  color: #111;
}

.knit-user-profile-sub {
  margin: 0.2rem 0 0;
  font-size: 0.8rem;
  color: #666;
}

.knit-user-profile-channel-bar {
  flex-shrink: 0;
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0.45rem;
  padding: 0.4rem 0.55rem 0.5rem;
  border-bottom: 1px solid #e8e8e8;
  background: #fff;
}

.knit-user-profile-channel-pill {
  padding: 0.32rem 0.72rem;
  font-size: 0.78rem;
  font-weight: 600;
  font-family: inherit;
  color: #444;
  background: #f3f4f6;
  border: 1px solid #d1d5db;
  border-radius: 999px;
  cursor: pointer;
}

.knit-user-profile-channel-pill:hover {
  background: #e5e7eb;
}

.knit-user-profile-channel-pill.is-active {
  color: #fff;
  background: #111827;
  border-color: #111827;
}

.knit-user-profile-scroll {
  flex: 1;
  min-height: 0;
}

.knit-user-profile-empty {
  grid-column: 1 / -1;
  padding: 2rem 1rem;
  text-align: center;
  font-size: 0.88rem;
  color: #888;
}

/* 首页主网格无数据时占位（原先两张示例图易误以为有作品） */
.knit-grid > .knit-home-empty {
  grid-column: 1 / -1;
  margin: 0;
  padding: 2.25rem 1rem;
  text-align: center;
  font-size: 0.9rem;
  color: #777;
  line-height: 1.55;
}

/**
 * 从不展示「笔记壳」整页，仅保留 #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 #d6d6d6;
  border-radius: 0;
  background: #fff;
  color: #222;
  font-size: 1.2rem;
  font-weight: 700;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
}

.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: #fafafa;
  display: flex;
  flex-direction: column;
  gap: 0.85rem;
  position: relative;
}

.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: calc(var(--knit-top-h, 52px) + 0.75rem);
  right: max(0.65rem, env(safe-area-inset-right, 0px));
  z-index: 550;
}

.knit-note-channel-select {
  min-width: 7.5rem;
  height: 2rem;
  padding: 0 1.9rem 0 0.7rem;
  border: 1px solid #d8d8d8;
  border-radius: 8px;
  background: #fff;
  color: #222;
  font-size: 0.88rem;
  font-weight: 600;
}


.knit-creator-left {
  width: min(680px, 100%);
  display: flex;
  flex-direction: column;
  gap: 0.7rem;
  flex: 1;
  min-height: 0;
  overflow: auto;
  padding-right: 0.1rem;
  position: relative;
  /** 高于匿名叠层与提示条未隐藏时的残留命中区，低于底栏与频道条 */
  z-index: 100;
}

/* 发布频道在开发者视图为 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 #d6d6d6;
  background: #fff;
  color: #222;
  cursor: pointer;
}

.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: 0.8rem;
  color: #666;
}

.knit-creator-image-grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 0.55rem;
}

.knit-creator-image-cell {
  position: relative;
  aspect-ratio: 1 / 1;
  border: 1px solid #e2e2e2;
  border-radius: 10px;
  overflow: hidden;
  background: #fff;
}

.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 {
  width: 100%;
  height: 100%;
  object-fit: cover;
  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 #ddd;
  border-radius: 10px;
  padding: 0.65rem 0.7rem;
  font-size: 0.9rem;
  font-family: inherit;
  color: #222;
  resize: vertical;
  background: #fff;
}

.knit-creator-footer {
  display: flex;
  justify-content: flex-end;
  gap: 0.7rem;
  margin-top: 0;
  padding: 0.75rem 0.25rem 0;
  background: #fff;
  border-top: 1px solid #e7e7e7;
  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: #fff3f3;
  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 #d1d5db;
  border-radius: 10px;
  background: rgba(255, 255, 255, 0.97);
  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: #374151;
  line-height: 1.35;
}

.knit-note-upload-progress__track {
  height: 8px;
  border-radius: 999px;
  background: #e5e7eb;
  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: #6b7280;
  text-align: right;
}

.knit-creator-footer-btn {
  min-width: 6.5rem;
  padding: 0.48rem 0.95rem;
  border: 1px solid #d6d6d6;
  border-radius: 9px;
  background: #fff;
  color: #222;
  font-size: 0.9rem;
  font-weight: 600;
  cursor: pointer;
  position: relative;
  z-index: 21;
  pointer-events: auto;
}

.knit-creator-footer-btn--primary {
  background: var(--knit-red);
  border-color: var(--knit-red);
  color: #fff;
}

.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 #c8ced6;
  border-radius: 999px;
  background: #fff;
  color: #444;
  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: #fff7f7;
}

.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 #e3e3e3;
  border-radius: 14px;
  background: #fff;
  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: #222;
}

.knit-dev-block-add-picker-close {
  flex-shrink: 0;
  width: 2rem;
  height: 2rem;
  border: none;
  border-radius: 8px;
  background: #f3f4f6;
  color: #555;
  font-size: 1.25rem;
  line-height: 1;
  cursor: pointer;
  font-family: inherit;
}

.knit-dev-block-add-picker-close:hover {
  background: #e5e7eb;
}

.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 #e0e0e0;
  border-radius: 12px;
  background: #fafafa;
  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: #fff;
  box-shadow: 0 4px 14px rgba(0, 0, 0, 0.06);
}

.knit-dev-block-add-option[hidden] {
  display: none !important;
}

.knit-dev-block-add-option-label {
  font-size: 0.82rem;
  font-weight: 700;
  color: #333;
}

.knit-dev-block-add-preview {
  display: block;
  border: 1px solid #ececec;
  border-radius: 8px;
  background: #fff;
  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: #f3f4f6;
  color: #555;
  font-size: 0.68rem;
  font-weight: 600;
}

.knit-dev-block-add-chip--muted {
  color: #999;
}

.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 #ececec;
  border-radius: 6px;
  background: #f8f9fb;
  color: #888;
  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: #777;
  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: 0.82rem;
  color: #888;
}

.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;
}

#knitDevTextBlock[hidden],
#knitDevFeatureBlock[hidden],
#knitDevPatternMetaBlock[hidden] {
  display: none !important;
}

#knitDevYarnMetaBlock[hidden] {
  display: none !important;
}

.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: #333;
}

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

.knit-dev-block-remove-btn {
  flex-shrink: 0;
  padding: 0.22rem 0.55rem;
  font-size: 0.72rem;
  font-weight: 600;
  color: #666;
  background: #fff;
  border: 1px solid #d8d8d8;
  border-radius: 999px;
  cursor: pointer;
  font-family: inherit;
}

.knit-dev-block-remove-btn:hover {
  color: var(--knit-red);
  border-color: var(--knit-red);
  background: #fff7f7;
}

.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: #eef2ff;
  color: #4f46e5;
  font-size: 0.58rem;
  font-weight: 700;
  line-height: 1.2;
}

.knit-dev-block-add-preview-tag--lower {
  top: auto;
  bottom: 0.35rem;
  background: #f3f4f6;
  color: #666;
}

.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 #d7d7d7;
  border-radius: 8px;
  padding: 0.42rem 0.55rem;
  font-size: 0.82rem;
  color: #222;
  background: #fff;
}

/* 电子色卡：OCR 多列时每列至少 ~200px 才可读；原先固定 200px 侧栏会逼出横向滚条且左侧列像「空列」。与左侧 textarea 分栏，随容器变宽。 */
.knit-dev-colorcard-wrap {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
  gap: 0.75rem;
  align-items: start;
}

@media (max-width: 720px) {
  .knit-dev-colorcard-wrap {
    grid-template-columns: minmax(0, 1fr);
  }
}

.knit-dev-colorcard-text-preview {
  margin-top: 0.45rem;
  max-height: 165px;
  overflow: auto;
  border: 1px dashed #d8dde5;
  border-radius: 8px;
  background: #fcfcfd;
  padding: 0.38rem 0.45rem;
}

.knit-dev-colorcard-ocr {
  border: 1px solid #e0e0e0;
  border-radius: 8px;
  background: #fff;
  padding: 0.55rem;
  display: flex;
  flex-direction: column;
  gap: 0.45rem;
}

.knit-dev-colorcard-upload {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 100%;
  padding: 0.4rem 0.55rem;
  border: 1px solid #d6d6d6;
  border-radius: 8px;
  background: #fff;
  color: #222;
  cursor: pointer;
  font-size: 0.8rem;
}

.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-colorcard-status {
  margin: 0;
  min-height: 1.2rem;
  font-size: 0.75rem;
  color: #666;
  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 #e5e7eb;
  border-radius: 8px;
  background: #fafafa;
  padding: 0.45rem;
  box-sizing: border-box;
  resize: both;
}

.knit-dev-colorcard-item {
  padding: 0.35rem 0.2rem;
  border-bottom: 1px solid #eceff3;
  font-size: 0.78rem;
  color: #1f2329;
}

/* 电子色卡：每行独立 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);
}

/* 作品详情（右侧材料页）不展示「已进收藏夹/待保存」高亮框，只保留普通色号行外观 */
#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: #111827 !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: #666;
  white-space: nowrap;
}

.knit-dev-ocr-page-btn {
  border: 1px solid #d7d7d7;
  background: #fff;
  border-radius: 8px;
  padding: 0.22rem 0.55rem;
  font-size: 0.78rem;
  color: #222;
  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 #e8e8ec;
  border-radius: 10px;
  padding: 0.5rem 0.65rem 0.65rem;
  background: #fafbfc;
}

.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: #444;
  margin-bottom: 0.45rem;
}

.knit-dev-ocr-page-remove-btn {
  border: 1px solid #f5c2c7;
  border-radius: 6px;
  background: #fff5f5;
  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: #fff;
}

.knit-dev-table th,
.knit-dev-table td {
  border: 1px solid #ddd;
  padding: 0.3rem 0.35rem;
  font-size: 0.8rem;
  color: #222;
  text-align: center;
}

.knit-dev-cell-input {
  width: 100%;
  box-sizing: border-box;
  border: 1px solid #d7d7d7;
  border-radius: 6px;
  padding: 0.28rem 0.35rem;
  font-size: 0.8rem;
  line-height: 1.7;
  color: #222;
  background: #fff;
  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 {
  flex: 1;
  min-height: 0;
  min-width: 0;
  width: 100%;
  max-width: 100%;
  overflow-x: auto;
  overflow-y: auto;
  overscroll-behavior: contain;
  -webkit-overflow-scrolling: touch;
  outline: none;
  cursor: grab;
}

.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;
}

/* ---------- 网格：7 列瀑布流；行宽不小于设计宽，窄窗时横向滚动 ---------- */
.knit-grid {
  --knit-grid-gap: clamp(6px, 1vw, 12px);
  --knit-grid-masonry-unit: 2px;
  display: grid;
  grid-template-columns: repeat(7, 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-card {
  min-width: 0;
  position: relative;
  z-index: 0;
  overflow: visible;
  transition: opacity 0.22s ease;
  content-visibility: auto;
  contain-intrinsic-size: auto 160px;
}

/* 首页/用户作品网格须参与完整高度计算，否则瀑布流后 scrollport 无可滚动高度、滚轮失效 */
#knitGrid > .knit-card,
#knitUserProfileGrid > .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);
}

.knit-card--open .knit-card-layer {
  /* 不用 scale，避免文字向左/右溢出被相邻列遮挡 */
  transform: none;
  position: relative;
  z-index: 2;
  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;
}

@media (max-width: 768px) {
  .knit-sidebar {
    width: 56px;
    padding: 0.75rem 0.35rem;
  }
  .knit-sidebar button {
    font-size: 0.72rem;
    padding: 0.45rem 0.25rem;
    text-align: center;
  }
  .knit-side-submenu {
    margin-left: 0;
    padding: 0.2rem 0.08rem;
    border-left: none;
    background: transparent;
  }
  .knit-side-submenu .knit-side-sub-btn {
    justify-content: center;
    padding: 0.35rem 0.1rem;
    gap: 0.18rem;
    font-size: 0.68rem;
  }
  .knit-side-submenu .knit-side-sub-btn::before {
    font-size: 0.56rem;
  }
  .knit-side-collapse-btn::after {
    right: 0.2rem;
  }
  .knit-main {
    margin-left: 56px;
    width: calc(100% - 56px);
  }
  .knit-brand {
    font-size: 1rem;
  }
  .knit-topnav {
    display: none;
  }
}

.knit-cell {
  border-radius: 8px;
  overflow: hidden;
  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 {
  padding: 0;
  background: #111;
  height: auto;
}

.knit-cell--img img {
  width: 100%;
  height: auto;
  display: block;
  pointer-events: none;
}

/* ---------- 每个红框下方：花型信息（固定「标题：」+ 值，只读） ---------- */
.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 8px 8px;
  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 .knit-meta-user {
  display: none;
}

#knitGrid .knit-pattern-meta {
  min-height: 0;
  padding: 0;
  gap: 0;
}

#knitGrid .knit-card-layer {
  gap: 0;
}

#knitGrid .knit-card--open .knit-card-layer::after {
  display: none;
}

#knitGrid .knit-card--open .knit-pattern-meta {
  bottom: 0;
}

.knit-card--open .knit-meta-user {
  visibility: hidden;
  pointer-events: none;
}

.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);
}

.knit-meta-nickname {
  font-size: clamp(0.48rem, 0.06rem + 1.35vw, 0.76rem);
  font-weight: 600;
  color: #222;
  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: #222;
  flex-wrap: nowrap;
  align-items: baseline;
  gap: 0.2em;
}

.knit-card--open .knit-meta-line {
  display: flex;
  pointer-events: auto;
  color: #1a1a1a;
  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 #e2e8f0;
  border-radius: 10px;
  background: #f8fafc;
  display: flex;
  flex-direction: column;
  gap: 0.35rem;
}

.knit-dev-hover-picker-label {
  font-weight: 600;
  font-size: 0.92rem;
  color: #334155;
}

.knit-dev-hover-picker-select {
  width: 100%;
  max-width: 100%;
  padding: 0.45rem 0.55rem;
  border: 1px solid #cbd5e1;
  border-radius: 8px;
  font: inherit;
  background: #fff;
  color: #1e293b;
}

.knit-dev-hover-picker-hint {
  margin: 0;
  font-size: 0.78rem;
  color: #64748b;
  line-height: 1.45;
}

/* 笔记页：已设为灵感悬停预览的输入框 */
.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: rgba(255, 255, 255, 0.98);
  border: 1px solid rgba(15, 23, 42, 0.1);
  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: #1e293b;
  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;
  }
}

.knit-meta-label {
  font-weight: 600;
  color: #333;
  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: #444;
  flex: 1 1 0;
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

/* ---------- 双击图片：左半屏大图 + 右半屏详情 ---------- */
.knit-fullpage {
  position: fixed;
  inset: 0;
  z-index: 1000;
  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: #111;
  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-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 #eee;
}

.knit-fp-action-btn {
  box-sizing: border-box;
  margin: 0;
  padding: 0.35rem 0.85rem;
  min-width: 0;
  min-height: 0;
  border: 1px solid #d1d5db;
  border-radius: 999px;
  background: #fff;
  color: #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: #f3f4f6;
  color: #111827;
  border-color: #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 #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: #888;
}

.knit-fp-inline-empty,
.knit-fp-inline-empty-cell {
  margin: 0.35rem 0 0;
  font-size: 0.84rem;
  color: #999;
}

.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: #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 {
  opacity: 0.45;
  cursor: not-allowed;
}

.knit-fp-action-btn:disabled:hover {
  background: #fff;
  color: #374151;
  border-color: #d1d5db;
}

.knit-fp-inline-yarn-board {
  overflow-x: auto;
  overflow-y: visible;
  -webkit-overflow-scrolling: touch;
  margin-top: 0.35rem;
  padding: 0.5rem;
  background: #f3f4f6;
  border: 1px solid #d1d5db;
  border-radius: 12px;
  box-shadow: 0 1px 2px rgba(15, 23, 42, 0.06);
}

.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 #d1d5db;
  border-radius: 999px;
  background: #fff;
  color: #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: #f3f4f6;
  color: #111827;
  border-color: #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;
}

.knit-fullpage-right {
  flex: 1 1 50%;
  min-width: 0;
  height: 100%;
  position: relative;
  background: #fafafa;
  border-left: 1px solid #e8e8e8;
  display: flex;
  flex-direction: column;
  color: #222;
}

.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 #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);
}

.knit-fp-author-name {
  flex: 1;
  min-width: 0;
  font-size: 0.95rem;
  font-weight: 600;
  color: #111;
}

.knit-fp-follow {
  flex-shrink: 0;
  padding: 0.35rem 0.85rem;
  font-size: 0.82rem;
  font-weight: 600;
  color: var(--knit-red);
  background: #fff;
  border: 1px solid var(--knit-red);
  border-radius: 999px;
  cursor: pointer;
  transition: background 0.15s, color 0.15s;
}

.knit-fp-follow:hover {
  background: var(--knit-red);
  color: #fff;
}

.knit-fp-follow--active {
  background: var(--knit-red);
  color: #fff;
}

.knit-fp-follow:disabled {
  opacity: 0.65;
  cursor: wait;
}

.knit-fp-author-actions {
  display: flex;
  flex-direction: column;
  gap: 0.35rem;
  align-items: flex-end;
}

#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: #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 {
  font-size: 0.8rem;
  color: #4b5563;
}

.knit-favorite-modal__select,
.knit-favorite-modal__input {
  width: 100%;
  border: 1px solid #d1d5db;
  border-radius: 8px;
  padding: 0.46rem 0.56rem;
  font-size: 0.84rem;
  box-sizing: border-box;
}

.knit-favorite-modal__cancel {
  border: 1px solid #d1d5db;
  border-radius: 999px;
  background: #fff;
  color: #374151;
  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: 0.78rem;
  color: #6b7280;
}

/* ---------- 私信聊天弹窗 ---------- */
.knit-dm-chat__panel {
  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: #000;
  border: 1px solid #1f1f1f;
}

.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 #1f1f1f;
  background: #000;
  flex-shrink: 0;
  cursor: grab;
  touch-action: none;
  user-select: none;
}

.knit-dm-chat__header--dragging {
  cursor: grabbing;
}

.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: #fff;
  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: #7d7d7d;
  line-height: 1.3;
}

.knit-dm-chat__avatar {
  flex-shrink: 0;
  width: 2rem;
  height: 2rem;
  border-radius: 4px;
  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);
}

.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__header-actions {
  display: flex;
  align-items: center;
  gap: 0.1rem;
  flex-shrink: 0;
}

.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: #9ca3af;
  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);
}

.knit-dm-chat__minimize-icon {
  width: 1rem;
  height: 1rem;
  display: block;
}

.knit-dm-chat__minimize-icon--expand {
  display: none;
}

.knit-dm-chat__minimize:hover,
.knit-dm-chat__close:hover {
  background: #1f1f1f;
  color: #e5e7eb;
}

.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: #000;
}

.knit-dm-chat__messages-inner {
  display: flex;
  flex-direction: column;
  justify-content: flex-end;
  gap: 0.85rem;
  min-height: 100%;
}

.knit-dm-chat__empty {
  margin: auto;
  text-align: center;
  font-size: 0.82rem;
  color: #7d7d7d;
  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: 4px;
  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: #2c2c2c;
  color: #fff;
  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 #2c2c2c 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: #7d7d7d;
  line-height: 1.2;
}

.knit-dm-chat__link {
  color: #6eb5ff;
  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;
  width: 100%;
  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 {
  width: 100%;
  aspect-ratio: 3 / 4;
  object-fit: cover;
  display: block;
  background: #1a1a1a;
}

.knit-dm-chat__share-cover-placeholder {
  width: 100%;
  aspect-ratio: 3 / 4;
  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-btn--ready:hover .knit-dm-chat__share-cover {
  opacity: 0.92;
}

.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 rgba(255, 255, 255, 0.18);
}

.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;
  align-items: flex-end;
  gap: 0.45rem;
  padding: 0.55rem 0.65rem;
  border-top: 1px solid #1f1f1f;
  background: #1a1a1a;
  flex-shrink: 0;
  transition: background 0.18s ease, outline-color 0.18s ease;
}

#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-card[data-knit-share-drag="1"] {
  cursor: grab;
}

#knitGrid .knit-card[data-knit-share-drag="1"] .knit-cell--img img {
  pointer-events: auto;
  -webkit-user-drag: none;
  user-select: none;
}

#knitGrid .knit-card[data-knit-share-drag="1"]:active,
#knitGrid .knit-card.knit-card--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: 0.86rem;
  line-height: 1.45;
  resize: none;
  min-height: 2.2rem;
  max-height: 6rem;
  background: #2c2c2c;
  color: #fff;
  outline: none;
  font-family: inherit;
}

.knit-dm-chat__input::placeholder {
  color: #7d7d7d;
}

.knit-dm-chat__input:focus {
  background: #333;
  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__toolbar {
  display: flex;
  justify-content: center;
  padding: 0.35rem 0.65rem 0.55rem;
  background: #1a1a1a;
  flex-shrink: 0;
}

.knit-dm-chat__clear {
  border: none;
  background: transparent;
  color: #7d7d7d;
  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 {
  position: absolute;
  right: 0;
  bottom: 0;
  z-index: 3;
  width: 1.1rem;
  height: 1.1rem;
  cursor: nwse-resize;
  touch-action: none;
  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:hover,
.knit-dm-chat__resize: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: #fff;
  border: 1px solid #e5e5e5;
  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 #eee;
  flex-shrink: 0;
}

.knit-fp-yarn-title {
  margin: 0;
  font-size: 0.95rem;
  font-weight: 700;
  color: #333;
  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: #666;
  background: #f0f0f0;
  cursor: pointer;
  font-family: inherit;
}

.knit-fp-yarn-close:hover {
  background: #e5e5e5;
  color: #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: #fff;
  border: 1px solid #cbd5e1;
  border-radius: 8px;
  overflow: hidden;
}

.knit-fp-yarn-table thead th {
  font-size: 0.72rem;
  font-weight: 600;
  color: #4b5563;
  line-height: 1.3;
  letter-spacing: 0.02em;
  background: #f1f5f9;
  border-bottom: 2px solid #cbd5e1;
}

.knit-fp-yarn-table tbody td {
  font-size: 0.84rem;
  color: #1f2937;
  line-height: 1.4;
  background: #fff;
  border-bottom: 1px solid #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: #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: rgba(15, 23, 42, 0.18);
  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: #fff;
  border: 1px solid #e5e5e5;
  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 #eee;
}

.knit-fp-feature-title {
  margin: 0;
  font-size: 0.95rem;
  font-weight: 700;
  color: #333;
  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: #666;
  background: #f0f0f0;
  cursor: pointer;
  font-family: inherit;
}

.knit-fp-feature-close:hover {
  background: #e5e5e5;
  color: #222;
}

.knit-fp-feature-keywords {
  display: flex;
  flex-wrap: wrap;
  gap: 0.55rem;
}

.knit-fp-feature-keyword {
  padding: 0.42rem 0.85rem;
  border: 1px solid #d8d8d8;
  border-radius: 999px;
  background: #fff;
  color: #333;
  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: #fff5f5;
  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 #eee;
  max-height: min(42vh, 320px);
  overflow-y: auto;
}

.knit-fp-feature-results-hint {
  margin: 0 0 0.65rem;
  font-size: 0.78rem;
  color: #666;
}

.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 #e8e8e8;
  border-radius: 8px;
  background: #fafafa;
  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: #fff5f5;
}

.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: #444;
  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: #666;
  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: #333;
}

/* ---------- 纱线作品大图详情 · 图2 线框：左上头像+昵称，下方大块正文（无生硬边框） ---------- */
#knitFullpage[data-knit-yarn-detail="1"] {
  background: #fff;
}

#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;
}

/* 避让左上角 fixed 关闭钮（top 0.75rem + 高约 2.5rem），整块右栏内容下移避免与 × 重叠 */
#knitFullpage[data-knit-yarn-detail="1"] .knit-fullpage-right .knit-fp-side-scroll {
  padding-top: calc(3.85rem + env(safe-area-inset-top, 0px));
}

.knit-fullpage-right[data-knit-fp-channel="yarn"] {
  background: #fff;
}

.knit-fullpage-right[data-knit-fp-channel="yarn"] .knit-fp-side-scroll {
  display: flex;
  flex-direction: column;
  min-height: 100%;
  /* 顶边与 #knitFullpage[data-knit-yarn-detail="1"] 一致：避让 fixed 关闭钮，勿用简写覆盖 padding-top */
  padding-top: calc(3.85rem + env(safe-area-inset-top, 0px));
  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-name {
  font-size: 1rem;
  font-weight: 600;
  color: #111;
}

/* 纱线详情：上传页三项（文本框 → 特征关键词 → 纱线信息）竖排 */
.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: #111;
  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: #2b303b;
  white-space: pre-wrap;
  word-break: break-word;
}

.knit-fp-yarn-sec-body--meta {
  font-size: 0.9rem;
  line-height: 1.75;
  color: #333;
}

.knit-fullpage-right[data-knit-fp-channel="yarn"] .knit-fp-yarn-sec-body .knit-fp-colon-key {
  font-weight: 700;
  color: #111;
}

/* 纱线信息：支数 · 成份 · 厂家 横向排列（窄屏可换行） */
.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: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  column-gap: 0.65rem;
  row-gap: 0.55rem;
  justify-items: stretch;
  align-items: start;
}

.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 {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: contain;
}

/* 电子色卡页：与作品图同格（A4 比例），内文可滚动 */
.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.42rem 0.48rem 0.5rem;
  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 {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
  column-gap: 0.75rem;
  row-gap: 0;
  width: 100%;
  box-sizing: border-box;
  align-items: start;
}

.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: #111827;
}

/* ---------- 纱线大图详情：每格 = 行宽 50% × 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 {
  align-items: start;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  column-gap: clamp(0.45rem, 1.6dvh, 0.85rem);
  row-gap: clamp(0.45rem, 1.6dvh, 0.85rem);
}

/* 作品图与电子色卡：同宽（各 50% 轨）、同高（宽 × 297/210） */
#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: 100%;
  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-photo-cell--ecc {
  /* 框内页眉/页尾留白 + 正文等距间距（子树继承 --yarn-ecc-gap） */
  --yarn-ecc-head: clamp(0.7rem, 2.1dvh, 1.15rem);
  --yarn-ecc-foot: clamp(0.7rem, 2.1dvh, 1.15rem);
  --yarn-ecc-gap: clamp(0.38rem, 1.4dvh, 0.82rem);
  padding: clamp(0.28rem, 0.85dvh, 0.42rem) clamp(0.32rem, 0.95vw, 0.48rem);
  overflow: hidden;
  min-height: 0;
  /* 供 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: 2.6rem;
  border-radius: 4px;
}

/* 详情相册格内不展示「第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: auto;
  -webkit-overflow-scrolling: touch;
  padding-left: 0;
  padding-right: 0;
  padding-bottom: var(--yarn-ecc-foot);
  box-sizing: border-box;
}

/* 单列正文：首行顶、末行底，行间留白均分（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);
}

#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 {
  padding-top: var(--yarn-ecc-head);
  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；格内可滚动，避免行重叠 */
#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%;
  max-width: 100%;
  max-height: none;
  overflow-x: hidden;
  column-gap: var(--knit-fp-ecc-gap);
  row-gap: var(--knit-fp-ecc-gap);
  box-sizing: border-box;
  align-content: stretch;
}

#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: auto;
  /* 与「列内最大行数」对齐：少行列只占前几行，末行空出，避免各列独立 space-between 错位 */
  display: grid;
  grid-template-rows: repeat(var(--knit-ecc-max-lines, 1), 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: #555;
}

.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: #666;
  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 #ececec;
}

.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: #888;
}

.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: default;
  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: #333;
  margin-bottom: 0.2rem;
}

.knit-fp-c-text {
  margin: 0;
  font-size: 0.82rem;
  line-height: 1.45;
  color: #444;
}

.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: #f3f3f3;
}

.knit-fp-c-quote-label {
  display: block;
  font-size: 0.72rem;
  font-weight: 600;
  color: #777;
  margin-bottom: 0.25rem;
}

.knit-fp-c-quote-text {
  margin: 0;
  font-size: 0.78rem;
  line-height: 1.4;
  color: #666;
}

.knit-fp-c-time {
  display: block;
  margin-top: 0.35rem;
  font-size: 0.72rem;
  color: #999;
}

.knit-fp-c-thread-empty {
  padding: 0.25rem 0;
}

.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 {
  border: none;
  background: transparent;
  padding: 0;
  font-size: 0.74rem;
  color: #6b7280;
  cursor: pointer;
  text-decoration: underline;
  font-family: inherit;
}

.knit-fp-c-reply-btn:hover,
.knit-fp-c-quote-btn:hover {
  color: var(--knit-red);
}

.knit-fp-compose {
  margin-top: 1rem;
  padding-top: 0.85rem;
  border-top: 1px solid #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: #222;
  border: 1px solid #ddd;
  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);
}

/* 单击评论：引用回复层（比全屏内容高一级，整体放大 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: #fff;
  border: 1px solid #e5e5e5;
  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: #222;
}

.knit-fp-reply-target {
  margin: 0 0 0.45rem;
  font-size: 0.72rem;
  line-height: 1.35;
  color: #777;
}

.knit-fp-reply-hint {
  margin: 0 0 0.35rem;
  font-size: 0.75rem;
  font-weight: 600;
  color: #888;
  letter-spacing: 0.02em;
}

.knit-fp-reply-thread-box {
  margin: 0 0 0.55rem;
  padding: 0.35rem 0 0;
  border-top: 1px solid #eee;
}

.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: #555;
  background: #f5f5f5;
  border: 1px solid #e8e8e8;
  border-radius: 8px;
  cursor: pointer;
  text-align: left;
  font-family: inherit;
}

.knit-fp-reply-thread-toggle:hover {
  background: #eee;
  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: #fafafa;
}

.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: #fff;
  border: 1px solid #ececec;
  font-size: 0.72rem;
  line-height: 1.35;
  color: #444;
}

.knit-fp-reply-thread-item:last-child {
  margin-bottom: 0;
}

.knit-fp-reply-thread-nick {
  font-weight: 700;
  color: #333;
}

.knit-fp-reply-thread-time {
  margin-left: 0.35rem;
  font-weight: 400;
  color: #999;
  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 #ddd;
  border-radius: 0 6px 6px 0;
  background: #f7f7f7;
  font-size: 0.78rem;
  line-height: 1.4;
  color: #555;
}

.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: #555;
  background: #f0f0f0;
  border: none;
  border-radius: 8px;
  cursor: pointer;
}

.knit-fp-reply-cancel:hover {
  background: #e5e5e5;
}

.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 {
  position: fixed;
  top: 0.75rem;
  left: 0.75rem;
  right: auto;
  z-index: 1020;
  width: 2.5rem;
  height: 2.5rem;
  padding: 0;
  border: none;
  border-radius: 8px;
  font-size: 1.5rem;
  line-height: 1;
  color: #333;
  background: rgba(255, 255, 255, 0.95);
  box-shadow: 0 2px 10px rgba(0, 0, 0, 0.15);
  cursor: pointer;
}

.knit-fullpage-close:hover {
  background: #fff;
}

body.knit-page--fullpage-open {
  overflow: hidden;
}

.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: #fff;
  border-radius: 12px;
  box-shadow: 0 12px 36px rgba(0, 0, 0, 0.25);
  padding: 1rem 1rem 0.9rem;
}

.knit-dup-modal__title {
  margin: 0 0 0.45rem;
  font-size: 1rem;
  font-weight: 700;
  color: #222;
}

.knit-dup-modal__text {
  margin: 0;
  font-size: 0.9rem;
  color: #444;
  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;
}

/* 私信：右侧最小化停靠（最多 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;
  z-index: 1400;
}

.knit-dm-minimized-dock[hidden] {
  display: none !important;
}

.knit-dm-minimized-dock__item {
  pointer-events: auto;
  transition:
    width 0.46s cubic-bezier(0.32, 0.72, 0, 1),
    height 0.46s cubic-bezier(0.32, 0.72, 0, 1),
    left 0.46s cubic-bezier(0.32, 0.72, 0, 1),
    top 0.46s cubic-bezier(0.32, 0.72, 0, 1),
    border-radius 0.38s ease,
    box-shadow 0.38s ease,
    transform 0.46s cubic-bezier(0.34, 1.2, 0.64, 1);
  transform-origin: right center;
}

.knit-dm-minimized-dock__item {
  min-width: 0;
  min-height: 0;
  max-width: none;
  max-height: none;
  border-radius: 10px 0 0 10px;
  box-shadow: -6px 0 28px rgba(0, 0, 0, 0.45);
  cursor: pointer;
  background: #000;
}

.knit-dm-minimized-dock__item:hover {
  box-shadow: -8px 0 32px rgba(0, 0, 0, 0.55);
  background: #0a0a0a;
}

.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: vertical-rl;
  text-orientation: mixed;
  font-size: 0.72rem;
  max-height: 4.5rem;
  white-space: nowrap;
  letter-spacing: 0.04em;
}

.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: 1400;
}

#knitDmModal .knit-dm-chat__panel--positioned {
  position: fixed;
  z-index: 1400;
  margin: 0;
  flex-shrink: 0;
}

#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: #000;
  border-radius: 10px;
  overflow: hidden;
  pointer-events: auto;
  z-index: 1400;
  box-shadow: 0 12px 36px rgba(0, 0, 0, 0.35);
  transition:
    width 0.46s cubic-bezier(0.32, 0.72, 0, 1),
    height 0.46s cubic-bezier(0.32, 0.72, 0, 1),
    left 0.46s cubic-bezier(0.32, 0.72, 0, 1),
    top 0.46s cubic-bezier(0.32, 0.72, 0, 1),
    border-radius 0.38s ease,
    box-shadow 0.38s ease,
    transform 0.46s cubic-bezier(0.34, 1.2, 0.64, 1);
  transform-origin: right center;
}

#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: -6px 0 28px rgba(0, 0, 0, 0.45);
  cursor: pointer;
}

#knitDmModal .knit-dm-chat__panel--minimized:hover,
.knit-dm-minimized-dock__item.knit-dm-chat__panel--minimized:hover {
  box-shadow: -8px 0 32px rgba(0, 0, 0, 0.55);
  background: #0a0a0a;
}

#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: vertical-rl;
  text-orientation: mixed;
  font-size: 0.72rem;
  max-height: 4.5rem;
  white-space: nowrap;
  letter-spacing: 0.04em;
}

#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 .knit-dm-chat__messages,
#knitDmModal .knit-dm-chat__panel--minimized .knit-dm-chat__messages,
#knitDmModal .knit-dm-chat__panel--minimizing .knit-dm-chat__status,
#knitDmModal .knit-dm-chat__panel--minimized .knit-dm-chat__status,
#knitDmModal .knit-dm-chat__panel--minimizing .knit-dm-chat__composer,
#knitDmModal .knit-dm-chat__panel--minimized .knit-dm-chat__composer,
#knitDmModal .knit-dm-chat__panel--minimizing .knit-dm-chat__toolbar,
#knitDmModal .knit-dm-chat__panel--minimized .knit-dm-chat__toolbar {
  opacity: 0;
  transform: translateX(18px) scale(0.97);
  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 {
  display: none;
}

.knit-dm-minimized-dock {
  position: fixed;
  inset: 0;
  width: 0;
  height: 0;
  pointer-events: none;
  overflow: visible;
  z-index: 1400;
}

.knit-dm-minimized-dock[hidden] {
  display: none !important;
}

.knit-dm-minimized-dock__item {
  pointer-events: auto;
  display: flex;
  flex-direction: column;
  padding: 0;
  background: #000;
  border: 1px solid #1f1f1f;
  overflow: hidden;
  transition:
    top 0.4s cubic-bezier(0.32, 0.72, 0, 1),
    left 0.4s cubic-bezier(0.32, 0.72, 0, 1),
    box-shadow 0.28s ease,
    transform 0.4s cubic-bezier(0.34, 1.2, 0.64, 1),
    opacity 0.32s ease;
  animation: knit-dm-dock-enter 0.44s cubic-bezier(0.34, 1.2, 0.64, 1) both;
}

@keyframes knit-dm-dock-enter {
  from {
    opacity: 0;
    transform: translateX(32px) scale(0.92);
  }

  to {
    opacity: 1;
    transform: translateX(0) scale(1);
  }
}

#knitDmModal .knit-dm-chat__panel--minimizing {
  transform-origin: right center;
  border-radius: 10px 0 0 10px;
  opacity: 0.92;
  box-shadow: -6px 0 28px rgba(0, 0, 0, 0.45);
}

.knit-dm-chat__messages,
.knit-dm-chat__status,
.knit-dm-chat__composer,
.knit-dm-chat__toolbar {
  transition:
    opacity 0.32s ease,
    transform 0.38s cubic-bezier(0.32, 0.72, 0, 1),
    max-height 0.42s cubic-bezier(0.32, 0.72, 0, 1),
    padding 0.32s ease,
    margin 0.32s ease,
    border-width 0.32s ease;
  transform-origin: center right;
}

/* ---------- 我的作品右键菜单 / 详情作者编辑 / 电子色卡关联 ---------- */
.knit-ctx-menu {
  position: fixed;
  z-index: 12000;
  min-width: 10.5rem;
  padding: 0.28rem;
  margin: 0;
  list-style: none;
  background: #fff;
  border: 1px solid #e2e8f0;
  border-radius: 10px;
  box-shadow: 0 10px 28px rgba(15, 23, 42, 0.14);
  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: #1e293b;
  text-align: left;
  cursor: pointer;
}

.knit-ctx-menu__btn:hover {
  background: #f1f5f9;
}

.knit-ctx-menu__btn--danger {
  color: #b91c1c;
}

.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: #f1f5f9;
  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: #334155;
  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 #cbd5e1;
  background: #fff;
  color: #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: 0.72rem;
  line-height: 1.45;
  color: #475569;
}

.knit-fp-author-edit-toolbar-hint[hidden] {
  display: none !important;
}

.knit-fp-author-edit-em {
  font-weight: 700;
  color: #0f172a;
}

.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: var(--knit-top-h);
  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: #fff;
  border-radius: 12px;
  box-shadow: 0 18px 48px rgba(15, 23, 42, 0.22);
  border: 1px solid #e2e8f0;
}

.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: #0f172a;
}

.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: #f1f5f9;
  border-color: #cbd5e1;
}

.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: #475569;
  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 #cbd5e1;
  background: #fff;
  font-size: 0.82rem;
  cursor: pointer;
  color: #334155;
}

.knit-ecc-link-preview-close:hover {
  background: #f8fafc;
}

.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: #475569;
  font-weight: 600;
  white-space: nowrap;
}

.knit-fp-yarn-link-preview {
  color: #334155;
  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-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"] #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-ecc-body
  .knit-dev-ocr-board--yarn-fp-fill {
  grid-template-rows: none !important;
  align-content: start;
}

#knitFullpage.knit-fp-color-focus
  .knit-fullpage-right[data-knit-fp-channel="yarn"]
  .knit-fp-yarn-ecc-body
  .knit-dev-ocr-board--yarn-fp-fill
  .knit-dev-ocr-panel {
  height: auto;
}

#knitFullpage.knit-fp-color-focus
  .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 {
  display: grid;
  grid-template-rows: none;
  grid-auto-rows: minmax(0, auto);
  align-content: start;
  overflow-y: visible;
}