/* ============================================================
   ARIA 灯库生产台 · 统一视觉主题 v1（品红柔和卡片风）
   只覆盖视觉：作为最后加载的样式表，不改动任何 JS 与原有 CSS。
   媒体查询一律使用 @media screen，避免影响打印。
   ============================================================ */

/* ---------- 设计令牌（覆盖原粗野主义米色/硬阴影体系） ---------- */
:root {
  --ink: #211a29;
  --ink-2: #423a4d;
  --muted: #544e5f;
  --note: #6e6878;               /* 次要小字标注 */
  --paper: #e1dee6;              /* 页面底色 */
  --panel: #ffffff;              /* 卡片 */
  --field: #ffffff;              /* 输入底色 */
  --soft: #e9e5ec;
  --line: #e2dce5;               /* 边线 */
  --line-strong: #d8d4de;        /* 深边线 */
  --accent: #cf0070;             /* 品牌品红 */
  --accent2: #cf0070;
  --accent-dark: #a30059;
  --accent-deeper: #8f004e;
  --accent-soft: #fce4f1;
  --accent-softer: #fdf6fa;
  --ok: #14954f;
  --warn: #b26a00;
  --bad: #d33f34;
  --yellow: #cf0070;             /* 原黄高亮语义位 → 统一走品红（个别处单独覆盖） */
  --shadow: 0 1px 2px rgba(33,26,41,.07), 0 6px 18px rgba(33,26,41,.08);
  --shadow-sm: 0 1px 2px rgba(33,26,41,.07), 0 6px 18px rgba(33,26,41,.08);
  --shadow-md: 0 3px 8px rgba(33,26,41,.07), 0 18px 44px rgba(33,26,41,.13);
  --shadow-accent: 0 6px 18px rgba(207,0,112,.30);
  --ring: rgba(207,0,112,.14);
}

body {
  background:
    radial-gradient(1100px 340px at 85% -80px, rgba(207,0,112,.055), transparent 60%),
    var(--paper);
  color: var(--ink);
  -webkit-font-smoothing: antialiased;
}

::selection { background: rgba(207,0,112,.18); }

p { color: var(--muted); }

/* ============================================================
   顶栏：白底毛玻璃 + 品红顶线（index 与 rd-channel 共用组件）
   ============================================================ */
.topbar {
  min-height: 64px;
  height: 64px;
  padding: 6px 20px;
  background: rgba(255,255,255,.92);
  -webkit-backdrop-filter: blur(10px);
  backdrop-filter: blur(10px);
  color: var(--ink);
  border-bottom: 1px solid var(--line);
  box-shadow: var(--shadow-sm);
  position: sticky;
  top: 0;
  z-index: 1000; /* 防弹出层被内容盖住 */
}
.topbar::before {
  content: "";
  position: absolute;
  inset: 0 0 auto 0;
  height: 3px;
  background: linear-gradient(90deg, var(--accent) 0%, var(--accent) 34%, rgba(207,0,112,.12) 100%);
  pointer-events: none;
}
.topbar-logo {
  width: auto;
  height: 50px;
  object-fit: contain;
  display: block;
  flex-shrink: 0;
}
.topbar-brand {
  border: 0;
  padding: 0;
  font-size: 17px !important;
  font-weight: 800;
  letter-spacing: .01em;
  color: var(--ink);
}
.topbar-brand b { font-size: 17px !important; }
.topbar-brand span {
  border: 0;
  background: #ece9f0;
  color: var(--ink-2);
  border-radius: 6px;
  padding: 3px 8px;
  font-size: 11px;
  font-weight: 800;
}

.topbar-nav > .topbar-btn,
.topbar-nav > .topbar-link {
  min-width: 0;
  padding: 9px 13px;
  border: 0;
  border-bottom: 3px solid transparent;
  background: transparent;
  color: var(--muted);
  font-size: 13.5px !important;
  font-weight: 700;
  box-shadow: none;
  text-decoration: none;
  cursor: pointer;
}
.topbar-nav > :hover { color: var(--accent); }
.topbar-nav > .active {
  color: var(--accent);
  border-bottom-color: var(--accent);
}

.header-home-link {
  width: auto;
  height: auto;
  padding: 7px 13px;
  border: 1px solid var(--line-strong);
  border-radius: 999px;
  background: #fff;
  color: var(--ink-2);
  font-size: 12px !important;
  font-weight: 700;
  text-decoration: none;
}
.header-home-link:hover { background: var(--accent); border-color: var(--accent); color: #fff; }

.topbar-tools > button,
.topbar-tools .download-menu-btn {
  padding: 7px 12px;
  border: 1px solid var(--line-strong);
  border-radius: 9px;
  background: #fff;
  color: var(--ink-2);
  font-size: 12px !important;
  font-weight: 700;
  box-shadow: none;
  transition: all .18s ease;
}
.topbar-tools > button:hover,
.topbar-tools .download-menu-btn:hover { border-color: #b9b2c0; color: var(--ink); background: #f4f2f6; }

.download-menu-panel,
.user-menu-panel {
  background: #fff;
  color: var(--ink);
  border: 1px solid var(--line);
  border-radius: 12px;
  box-shadow: var(--shadow-md);
  z-index: 1100;
}
.download-menu-item,
.user-menu-item {
  color: var(--ink-2) !important;
  border-radius: 8px;
}
.download-menu-item:hover,
.user-menu-item:hover { background: #f4f2f6 !important; color: var(--ink) !important; }
.user-menu-head { border-bottom-color: var(--line); }
.user-menu-role { color: var(--note); }
.user-menu-item.danger-item { color: var(--bad) !important; }
.user-avatar { border: 2px solid rgba(207,0,112,.28); }
.avatar-edit::after { border-color: #fff; }
.workspace-user-summary span { color: var(--ink); }
.workspace-user-summary small { color: var(--note); }

/* ============================================================
   按钮体系（全局）
   ============================================================ */
button {
  border: 1px solid var(--line-strong);
  border-radius: 9px;
  background: #fff;
  color: var(--ink-2);
  box-shadow: none;
  font-weight: 700;
  transition: all .18s ease;
}
button:hover:not(:disabled) { border-color: #b9b2c0; color: var(--ink); background: #f4f2f6; }
button:active { transform: none; box-shadow: none; }
button:disabled { opacity: .45; cursor: not-allowed; }

/* 主按钮：品红渐变 */
button.strong,
button.primary,
.auth-submit {
  border: 0;
  border-radius: 9px;
  background: linear-gradient(135deg, #dd1480, var(--accent));
  color: #fff;
  font-weight: 800;
  box-shadow: var(--shadow-accent);
}
button.strong:hover:not(:disabled),
button.primary:hover:not(:disabled),
.auth-submit:hover:not(:disabled) {
  background: linear-gradient(135deg, #c90d72, #b90064);
  color: #fff;
  transform: translateY(-1px);
}
button.strong:disabled,
button.primary:disabled { background: #c9b7c1; box-shadow: none; transform: none; color: #fff; }

button.danger { color: var(--bad); }
button.danger:hover:not(:disabled) { border-color: var(--bad); color: var(--bad); background: #fdf1f0; }

.mini, .mini-danger { border-radius: 8px; box-shadow: none; }

/* 选择器条动作按钮 */
.selector-save-draft {
  border: 0 !important;
  background: linear-gradient(135deg, #dd1480, var(--accent)) !important;
  color: #fff !important;
  box-shadow: var(--shadow-accent) !important;
  font-weight: 800;
}
.selector-save-draft:hover { background: linear-gradient(135deg, #c90d72, #b90064) !important; transform: translateY(-1px); }
.developer-record-open {
  border: 1px solid var(--line-strong) !important;
  background: #fff !important;
  color: var(--ink-2) !important;
  box-shadow: none !important;
}
.developer-record-open:hover { border-color: var(--accent) !important; color: var(--accent) !important; background: var(--accent-softer) !important; }

.channel-library-open {
  border: 1px solid var(--line-strong) !important;
  background: #fff !important;
  color: var(--ink-2) !important;
  box-shadow: none !important;
}
.channel-library-open:hover { background: #f4f2f6 !important; color: var(--ink) !important; }

.range-btn-active {
  background: #2f2a38 !important;
  border-color: #2f2a38 !important;
  color: #fff !important;
}
.mode-btn-empty {
  background: #fdf1f0 !important;
  border-color: var(--bad) !important;
  color: var(--bad) !important;
}

/* ============================================================
   表单控件
   ============================================================ */
input, select, textarea {
  border: 1px solid var(--line-strong);
  border-radius: 9px;
  background: #fff;
  color: var(--ink);
  transition: border-color .15s ease, box-shadow .15s ease;
}
input:focus, select:focus, textarea:focus {
  outline: none;
  border-color: var(--accent);
  box-shadow: 0 0 0 3px var(--ring);
}
input:disabled, select:disabled, textarea:disabled { background: #f3f1f5; color: var(--note); }

/* 自定义下拉 */
.custom-select-trigger {
  border: 1px solid var(--line-strong);
  border-radius: 9px;
  background: #fff;
  color: var(--ink);
  box-shadow: none;
}
.custom-select-trigger:hover { border-color: rgba(207,0,112,.45); }
.custom-select-dropdown {
  border: 1px solid var(--line);
  border-radius: 10px;
  background: #fff;
  box-shadow: var(--shadow-md);
}
.custom-select-item { border-bottom-color: #f1edf3; }
.custom-select-item:hover { background: #f4f2f6; }
.custom-select-item.active { background: #ece9f0; color: var(--ink); font-weight: 700; }
.custom-select-disabled .custom-select-trigger { background: #f3f1f5; color: var(--note); border-color: var(--line); }
.future-product-btn {
  background: #ece9f0 !important;
  color: var(--ink-2) !important;
  border: 1px solid var(--line-strong) !important;
  box-shadow: none !important;
}
.future-product-btn:hover { background: #e2dde6 !important; }
.product-select-search { border-color: var(--line-strong); background: #fff; }
.product-select-list { border-top-color: #f1edf3; }
.product-select-blank { color: var(--note); }
.product-select-hint { color: var(--warn); }

/* ============================================================
   卡片 / 面板
   ============================================================ */
.panel {
  background: var(--panel);
  border: 1px solid var(--line);
  border-radius: 14px;
  box-shadow: var(--shadow-sm);
}
.bottom-actions-panel { background: transparent; border: 0; box-shadow: none; }

h1 { color: var(--ink); }
h1 span {
  border: 0;
  background: #ece9f0;
  color: var(--ink-2);
  border-radius: 6px;
}
h2 { color: var(--ink); }
.hint { color: var(--muted); }
.panel-title-row { gap: 12px; }

.selector {
  background: var(--panel);
  border: 1px solid var(--line);
  border-radius: 14px;
  box-shadow: var(--shadow-sm);
  position: sticky;
  top: 76px;
  z-index: 900;
}
.selector label { color: var(--ink-2); }
.product-image { border-color: var(--line); border-radius: 10px; overflow: hidden; }
.product-info-stack { min-width: 0; }
.product-meta { color: var(--muted); overflow-wrap: anywhere; }
.custom-select { min-width: 0; }

/* ============================================================
   通道表格
   ============================================================ */
.table-wrap {
  border: 1px solid var(--line);
  border-radius: 10px;
  background: #fff;
}
table { font-size: 13px; }
th {
  background: #f6f3f8;
  color: var(--muted);
  font-weight: 800;
}
th, td { border-bottom: 1px solid #eee9f1; }
td input {
  border-color: var(--line);
  background: #fff;
  border-radius: 6px;
}
td input:focus { border-color: var(--accent); box-shadow: 0 0 0 3px var(--ring); }

tr.drag-over { border-top-color: var(--accent); }
.channel-focus-pulse td { background: var(--accent-soft) !important; }
@keyframes channelPulse {
  0% { outline: 3px solid var(--accent); }
  100% { outline: 0 solid transparent; }
}
.channel-parent { box-shadow: inset 4px 0 0 var(--line); }
.channel-live-dragging td { background: var(--accent-soft) !important; }
.channel-insert-marker { background: var(--accent); }
.channel-insert-marker span { background: var(--accent); }

#channelTable .repeated-channel td:nth-child(6) { background: #f4f2f6; }
#channelTable .repeated-channel td:nth-child(6) input {
  background: #ece9f0 !important;
  color: var(--note) !important;
  border-color: var(--line) !important;
}

.channel-attribute-button {
  background: #fff;
  border: 1px solid var(--line);
  border-radius: 7px;
}
.channel-attribute-button:hover { background: #f4f2f6; }
.channel-attribute-button:disabled { background: #f3f1f5; color: var(--note); border-color: var(--line); }
.channel-preset-card.attribute-selected { outline-color: var(--accent); }

/* DMX 区间条：品红/紫红族配色 */
.channel-range-preview { border-radius: 5px; background: #efeaf2; }
.cdf-range-0 { background: #cf0070; }
.cdf-range-1 { background: #8f004e; }
.cdf-range-2 { background: #e0569b; }
.cdf-range-3 { background: #9c5a8d; }
.cdf-range-4 { background: #6d5a7a; }
.cdf-range-5 { background: #544e5f; }

/* ============================================================
   工具条 / 模式选择
   ============================================================ */
.toolbar-divider { background: var(--line); }
.toolbar label { color: var(--ink-2); }

/* ============================================================
   灯库格式信息 / 状态卡片
   ============================================================ */
.status-legend { color: var(--muted); }
.legend-dot { border-color: var(--line-strong); }

.target-card {
  border: 1px solid var(--line);
  border-radius: 12px;
  background: #fff;
  box-shadow: var(--shadow-sm);
  transition: transform .18s ease, box-shadow .18s ease;
}
.target-card:hover { transform: translateY(-2px); box-shadow: var(--shadow-md); }
.target-card-head { border-bottom-color: #f1edf3; }
.target-card-head span {
  border: 0;
  border-radius: 6px;
  background: #ece9f0;
  color: var(--ink-2);
  font-weight: 800;
}
.target-card ul { color: var(--muted); }
.target-card.ready-ok { background: #f6fcf8; border-left: 4px solid var(--ok); }
.target-card.ready-warn { background: #fffaf0; border-left: 4px solid var(--warn); }
.target-card.ready-bad { background: #fdf4f3; border-left: 4px solid var(--bad); }

.library-status-pill {
  border: 0;
  border-radius: 6px;
  background: #ece9f0;
  color: var(--ink-2);
  font-weight: 800;
}
.library-status-pill.ready-ok { background: #e7f6ee; color: var(--ok); }
.library-status-pill.ready-warn { background: #fdf3e2; color: var(--warn); }
.library-status-pill.ready-bad { background: #fbe9e7; color: var(--bad); }

.issues .issue { border-radius: 8px; background: #faf8fb; }
.issue.error { border-left-color: var(--bad); }
.issue.warning { border-left-color: var(--warn); }
.issue.info { border-left-color: var(--accent); }

/* ============================================================
   GDTF 物理参数 / 主控状态
   ============================================================ */
.fixture-master-status {
  border: 1px solid var(--line);
  border-radius: 14px;
  background: var(--panel);
  box-shadow: var(--shadow-sm);
}
.master-status-section + .master-status-section { border-left-color: var(--line-strong); }
.master-status-item {
  border: 1px solid var(--line);
  border-radius: 8px;
  background: #fdfcfd;
}
.master-status-item.master-ok { border-left-color: var(--ok); }
.master-status-item.master-warn { border-left-color: var(--warn); }
.master-status-item.master-bad { border-left-color: var(--bad); }
.master-status-item span { color: var(--note); }

.model-upload-area h3 { color: var(--ink); }

/* ============================================================
   轮盘
   ============================================================ */
.wheel {
  border: 1px solid var(--line);
  border-radius: 12px;
  background: #fff;
  overflow: hidden;
}
.wheel-head { background: #f6f3f8; color: var(--ink-2); }
.slot {
  border: 1px dashed var(--line-strong);
  border-radius: 10px;
  background: #fdfcfd;
}
.slot-name-input { border-color: var(--line); background: #fff; }
.slot-add-card, .wheel-add-card {
  border: 1px dashed var(--line-strong);
  border-radius: 10px;
  background: #fdfcfd;
  color: var(--note);
}
.slot-add-card:hover, .wheel-add-card:hover { border-color: var(--accent); color: var(--accent); }
.slot-add-card span { border-color: var(--line-strong); background: #fff; border-radius: 8px; }
.slot-add-card:hover span { background: #ece9f0; color: var(--ink); }
.slot-drag-over { border-top-color: var(--accent) !important; box-shadow: 0 -2px 0 var(--accent) inset; }

/* ============================================================
   队列 / 草稿 / 已确认灯库
   ============================================================ */
.queue-item {
  border: 1px solid var(--line);
  border-radius: 10px;
  background: #fff;
}
.queue-item.active { outline: 2px solid var(--accent); outline-offset: -2px; }
.queue-meta { color: var(--note); }
.update-item { border-left-color: var(--warn); background: #fffaf0; }

.status-badge {
  border: 0;
  border-radius: 6px;
  background: #ece9f0;
  color: var(--ink-2);
  font-weight: 800;
}

.draft-card {
  border: 1px solid var(--line);
  border-radius: 12px;
  background: #fff;
  box-shadow: var(--shadow-sm);
  color: var(--ink);
}
.draft-card:hover { border-color: rgba(207,0,112,.4); box-shadow: var(--shadow-md); }
.draft-card.active { outline: 2px solid var(--accent); outline-offset: -2px; }
.draft-open { color: var(--ink); }

.export-panel {
  border: 1px solid var(--line);
  border-radius: 10px;
  background: #fdfcfd;
}
.export-row label { color: var(--ink-2); }
.export-history-row { border: 1px solid var(--line); border-radius: 8px; background: #fff; }
.export-history-row.is-stale { border-left-color: var(--warn); }
.export-history-main span, .export-history-main small { color: var(--note); }

.mongo-status { color: var(--muted); }
.mongo-status.ok { color: var(--ok); }
.mongo-status.bad { color: var(--bad); }

.published-detail-section {
  border: 1px solid var(--line);
  border-radius: 10px;
  background: #fdfcfd;
}
.published-detail-head { background: var(--panel); border-bottom-color: var(--line); }
.published-detail-slot { border-color: var(--line-strong); border-radius: 8px; background: #fff; }
.published-detail-table-wrap { border-color: var(--line); border-radius: 8px; background: #fff; }
.published-detail-warning { color: var(--warn); }
.master-format-item { border-radius: 8px; }
.master-format-item:hover { border-color: var(--accent); }

/* ============================================================
   弹窗 / 浮层
   ============================================================ */
.modal-overlay {
  background: rgba(33,26,41,.55);
  -webkit-backdrop-filter: blur(4px);
  backdrop-filter: blur(4px);
}
.modal-box {
  border: 1px solid var(--line);
  border-radius: 18px;
  background: #fff;
  box-shadow: 0 24px 64px rgba(33,26,41,.28);
}
.modal-field-label { color: var(--ink-2); }
.modal-input { border-radius: 9px; }
.modal-input:focus { border-color: var(--accent); box-shadow: 0 0 0 3px var(--ring); }

.channel-library-bar {
  border: 1px solid var(--line);
  border-radius: 10px;
  background: #faf8fb;
}
.channel-library-bar label { color: var(--ink-2); }
.channel-library-bar span { color: var(--note); }
.channel-library-search { border-color: var(--line-strong) !important; background: #fff !important; }

.ch-stepper {
  border: 1px solid var(--line-strong);
  border-radius: 9px;
  background: #fff;
  box-shadow: none;
  overflow: hidden;
}
.ch-stepper input { background: #fff !important; color: var(--ink); }

.channel-library-collapsible {
  border: 1px solid var(--line);
  border-radius: 10px;
  background: #fff;
  overflow: hidden;
}
.channel-library-collapsible > summary { background: #f6f3f8; color: var(--ink-2); }
.channel-library-collapsible > summary em {
  border: 0;
  border-radius: 6px;
  background: #ece9f0;
  color: var(--ink-2);
}

.channel-preset-card.locked, .channel-preset-card.locked:hover {
  background: #f6e3c5 !important;
  border-color: #c98a3d !important;
  box-shadow: none !important;
}

.return-menu-trigger {
  border: 1px solid var(--line-strong);
  border-radius: 9px;
  background: #fff;
  box-shadow: none;
}
.return-menu-trigger:hover { border-color: rgba(207,0,112,.45); }
.return-menu-panel {
  border: 1px solid var(--line);
  border-radius: 12px;
  background: #fff;
  box-shadow: var(--shadow-md);
}
.return-menu-head { border-bottom-color: var(--line); color: var(--note); }
.return-menu-item {
  border: 1px solid var(--line) !important;
  border-radius: 8px;
  background: #fff !important;
}
.return-menu-item:hover { border-color: rgba(207,0,112,.4) !important; background: var(--accent-softer) !important; }
.return-disabled { background: #f3f1f5 !important; color: var(--note) !important; border-color: var(--line) !important; }

.development-return-scope { border-radius: 10px; }
.development-return-scope span { color: var(--muted); }

.wheel-type-btn { border-radius: 9px; }

.api-conflict-panel { border-radius: 10px; }
.api-association-compare > div { border: 1px solid var(--line); border-radius: 8px; background: #fdfcfd; }
.api-association-compare span, .api-association-compare small { color: var(--note); }

/* 全局提示 */
.toast {
  border-radius: 10px;
  background: var(--ink);
  color: #f4f1f6;
  box-shadow: var(--shadow-md);
}
.center-notice {
  border: 1px solid rgba(207,0,112,.55);
  border-radius: 14px;
  background: rgba(33,26,41,.94);
  box-shadow: var(--shadow-md);
}

/* ============================================================
   登录 / 注册遮罩
   ============================================================ */
.auth-pending body::before {
  background:
    radial-gradient(1100px 340px at 85% -80px, rgba(207,0,112,.07), transparent 60%),
    var(--paper);
  color: var(--accent-dark);
}
.auth-overlay {
  background:
    radial-gradient(1100px 340px at 85% -80px, rgba(207,0,112,.08), transparent 60%),
    var(--paper);
}
.auth-card {
  border: 1px solid var(--line);
  border-radius: 18px;
  background: #fff;
  box-shadow: var(--shadow-md);
}
.auth-brand { border-bottom-color: var(--line); }
.auth-kicker { color: var(--accent); }
.auth-brand h2 { color: var(--ink); }
.auth-brand p, .auth-note { color: var(--note); }
.auth-field { color: var(--ink-2); }
.auth-input {
  border: 1px solid var(--line-strong);
  border-radius: 9px;
  background: #fff;
}
.auth-input:focus { border-color: var(--accent); box-shadow: 0 0 0 3px var(--ring); }
.auth-error { color: var(--bad); }
.auth-switch { color: var(--note); }
.auth-switch button { color: var(--accent); background: transparent; }
.auth-switch button:hover { color: var(--accent-deeper); }
.auth-tabs {
  border: 1px solid var(--line);
  border-radius: 9px;
  overflow: hidden;
}
.auth-tabs button { border: 0; background: #f6f3f8; color: var(--muted); }
.auth-tabs button + button { border-left: 1px solid var(--line); }
.auth-tabs button.active { background: #ece9f0; color: var(--ink); }
#regAvatarPreview { border-color: var(--line-strong); background: #fff; color: var(--note); }
.auth-action-row button:not(.auth-submit) { border-radius: 9px; }

/* ============================================================
   通道详情工作台（全屏覆盖层）
   ============================================================ */
.channel-detail-overlay {
  background:
    radial-gradient(1100px 340px at 85% -80px, rgba(207,0,112,.05), transparent 60%),
    var(--paper);
  color: var(--ink);
}
.cdf-header {
  background: rgba(255,255,255,.92);
  -webkit-backdrop-filter: blur(10px);
  backdrop-filter: blur(10px);
  border-bottom: 1px solid var(--line);
  box-shadow: var(--shadow-sm);
  position: relative;
}
.cdf-header::before {
  content: "";
  position: absolute;
  inset: 0 0 auto 0;
  height: 3px;
  background: linear-gradient(90deg, var(--accent) 0%, var(--accent) 34%, rgba(207,0,112,.12) 100%);
  pointer-events: none;
}
.cdf-header small { color: var(--note); }
.cdf-sidebar { background: #2a2133; }
.cdf-sidebar button { background: rgba(255,255,255,.08); border-radius: 9px; }
.cdf-sidebar button:hover { background: rgba(207,0,112,.35); }
.cdf-sidebar button small { color: #c9c2cf; }
.cdf-card { border: 1px solid var(--line); border-radius: 12px; box-shadow: var(--shadow-sm); }
.cdf-summary span { color: var(--note); }
.cdf-summary b { color: var(--ink); }
.cdf-range-bar { background: #efeaf2; }
.cdf-tabs { border-bottom-color: var(--line); }
.cdf-tabs button { border-color: var(--line); background: #f6f3f8; color: var(--muted); }
.cdf-tabs button.active { background: #fff; color: var(--accent); box-shadow: inset 0 3px var(--accent); }

/* ============================================================
   rd-channel 研发通道数据页
   ============================================================ */
.brand-box { border: 0; padding: 0; }
.brand-box b { color: var(--ink); }
.brand-box span { color: var(--note); }
.top-actions a {
  border: 1px solid var(--line-strong);
  border-radius: 999px;
  background: #fff;
  color: var(--ink-2);
  padding: 7px 13px;
}
.top-actions a:hover { border-color: var(--accent); color: var(--accent); background: var(--accent-softer); }

.workspace { min-height: calc(100vh - 64px); }
.sidebar {
  border-right: 1px solid var(--line);
  background: transparent;
}
.side-head small, .section-heading small { color: var(--note); }
#productCount { color: var(--ink); }
.search-container .clear-btn:hover { color: var(--accent); }

.product-item {
  border: 1px solid var(--line);
  border-radius: 10px;
  background: #fff;
  transition: all .18s ease;
}
.product-item:hover { border-color: #b9b2c0; background: #f4f2f6; }
.product-item.active {
  border-color: var(--line-strong);
  background: #ece9f0;
  box-shadow: inset 3px 0 0 var(--accent);
}
.product-item span { color: var(--note); }

.product-card, .mode-section {
  border: 1px solid var(--line);
  border-radius: 14px;
  background: #fff;
  box-shadow: var(--shadow-sm);
}
.section-heading h1, .section-heading h2 { color: var(--ink); }
.selected-product p { color: var(--muted); }
.empty-state h2 { color: var(--ink); }
.empty-state p { color: var(--muted); }

.mode-tab, .version-tab {
  border: 1px solid var(--line-strong);
  border-radius: 9px;
  background: #fff;
  color: var(--muted);
  box-shadow: none;
}
.mode-tab:hover, .version-tab:hover { border-color: rgba(207,0,112,.45); color: var(--accent); }
.mode-tab.active, .version-tab.active {
  border: 0;
  background: #2f2a38;
  color: #fff;
  box-shadow: none;
}
.version-tabs { border-bottom-color: var(--line); }

.channel-card {
  border: 1px solid var(--line);
  border-radius: 12px;
  background: #fff;
  box-shadow: var(--shadow-sm);
}
.channel-head label, .mode-meta label { color: var(--ink-2); }
.range-header { color: var(--note); }
.range-note, .channel-head .channel-note { color: var(--note); }
.icon-delete { color: var(--bad); }

.picker-overlay {
  background: rgba(33,26,41,.55);
  -webkit-backdrop-filter: blur(4px);
  backdrop-filter: blur(4px);
}
.picker-card {
  border: 1px solid var(--line);
  border-radius: 18px;
  background: #fff;
  box-shadow: 0 24px 64px rgba(33,26,41,.28);
}
.api-product {
  border: 1px solid var(--line);
  border-radius: 10px;
  background: #fff;
}
.api-product:hover { border-color: #b9b2c0; background: #f4f2f6; }
.api-product span { color: var(--note); }

.auth-notice {
  border: 1px solid var(--line);
  border-left: 4px solid var(--accent);
  border-radius: 10px;
  background: #f4f2f6;
  color: var(--ink-2);
  box-shadow: none;
}
.auth-notice a { color: var(--accent-deeper); }

.rd-delete-overlay, .version-import-overlay, .version-rename-overlay {
  background: rgba(33,26,41,.55);
}
.rd-delete-dialog, .version-import-card, .version-rename-card {
  border: 1px solid var(--line);
  border-radius: 18px;
  background: #fff;
  box-shadow: 0 24px 64px rgba(33,26,41,.28);
}
.rd-delete-confirm {
  border: 0 !important;
  background: var(--bad) !important;
  color: #fff !important;
}
.rd-delete-confirm:hover { background: #b93227 !important; color: #fff !important; }
.version-import-card label, .version-rename-card label { color: var(--ink-2); }

/* 通道段落切换 / UE 导出菜单 / 轮盘上传：去黄色高亮 */
.channel-toggle {
  background: #ece9f0;
  color: var(--ink-2);
  border: 1px solid var(--line-strong);
  border-radius: 7px;
  box-shadow: none;
  font-weight: 800;
}
.channel-toggle:hover { background: #e2dde6; }
.unreal-export-menu-panel {
  border: 1px solid var(--line);
  border-radius: 10px;
  background: #fff;
  box-shadow: var(--shadow-md);
}
.unreal-export-menu-panel button { border-radius: 7px; }
.unreal-export-menu-panel button:hover {
  border-color: #b9b2c0;
  background: #f4f2f6;
  color: var(--ink);
}
.wheel-slot-upload { box-shadow: none; border-radius: 7px; background: #fff; }
.wheel-slot-upload:hover { background: #f4f2f6; color: var(--ink); }

/* ============================================================
   界面最小字号 10px
   ============================================================ */
#channelTable .channel-range-preview .cdf-range { font-size: 10px; }

/* ============================================================
   手机端（≤900px）：单列堆叠、顶栏收拢、表格保留横滚
   ============================================================ */
@media screen and (max-width: 900px) {
  .topbar {
    min-height: 56px;
    height: auto;
    padding: 6px 12px;
    gap: 10px;
  }
  .topbar-logo { height: 40px; }
  .topbar-brand { font-size: 15px !important; }
  .topbar-brand b { font-size: 15px !important; }
  .topbar-nav > .topbar-btn,
  .topbar-nav > .topbar-link { padding: 8px 9px; font-size: 12.5px !important; }
  .header-home-link { padding: 6px 10px; font-size: 11px !important; }
  .topbar-tools { gap: 6px; }
  .topbar-tools > button,
  .topbar-tools .download-menu-btn { padding: 6px 9px; }

  .workbench { padding: 12px 12px 48px; }
  .selector {
    position: static;
    grid-template-columns: 88px 1fr;
    padding: 12px;
    gap: 10px;
  }
  .product-image { grid-column: 1; width: 88px; height: 78px; }
  .product-info-stack { grid-column: 2; min-height: 0; min-width: 0; }
  .product-meta { overflow-wrap: anywhere; }
  .custom-select { min-width: 0; }
  .selector-actions {
    grid-column: 1 / -1;
    display: grid;
    grid-template-columns: 1fr 1fr;
    width: 100%;
    min-width: 0;
  }
  .selector-save-draft, .developer-record-open { width: 100%; min-width: 0; }

  .panel { padding: 14px; border-radius: 12px; }
  h1 { font-size: 26px; }
  h2 { font-size: 18px; }
  .hint { font-size: 12.5px; }

  .toolbar { flex-wrap: wrap; gap: 10px; }
  .toolbar-reset { margin-left: 0; }

  /* 大表格保留横向滚动 */
  .table-wrap { max-height: none; overflow-x: auto; }

  .target-readiness { grid-template-columns: 1fr; }
  .phys-grid { grid-template-columns: 1fr !important; }
  .model-files { grid-template-columns: 1fr !important; }

  .bottom-actions { display: grid; grid-template-columns: 1fr 1fr; width: 100%; }
  .bottom-actions button, .bottom-actions .unreal-export-menu { width: 100%; }
  .bottom-actions .strong { grid-column: 1 / -1; }

  .fixture-master-status { grid-template-columns: 1fr; }
  .master-status-section + .master-status-section {
    margin-top: 10px;
    padding-left: 0;
    border-left: 0;
    border-top: 3px solid var(--accent);
  }

  .modal-box { min-width: 0; width: 94%; padding: 20px; }
  .modal-two-col { grid-template-columns: 1fr; }

  .auth-card { padding: 24px 20px; }
  .auth-field-grid { grid-template-columns: 1fr; }

  /* 通道详情工作台：侧栏变横向滚动条 */
  .cdf-body { grid-template-columns: 1fr; }
  .cdf-sidebar { display: flex; gap: 8px; overflow-x: auto; padding: 12px; }
  .cdf-sidebar h3 { display: none; }
  .cdf-sidebar button { width: auto; flex-shrink: 0; }
  .cdf-header { height: auto; min-height: 58px; padding: 8px 14px; flex-wrap: wrap; gap: 8px; }
  .cdf-main { padding: 14px; }

  /* rd-channel 页 */
  .workspace { display: block; }
  .sidebar { border-right: 0; border-bottom: 1px solid var(--line); padding: 12px; }
  .editor { padding: 12px; }
  .section-heading { flex-wrap: wrap; gap: 10px; }
  .status-line { flex-wrap: wrap; }
  .mode-meta { grid-template-columns: 1fr !important; }
  .published-detail-product { grid-template-columns: 1fr; }
  .api-association-compare { grid-template-columns: 1fr; }
  .export-row { grid-template-columns: 1fr; }
}

@media screen and (max-width: 420px) {
  .topbar-brand span { display: none; }
  .workspace-user-summary { display: none; }
}