/* ============================================================
   运营内部工具 · UI 设计系统 v2（清爽专业商务风）
   规范依据：design/设计系统规范.md（群青蓝 / WCAG AA / tabular-nums）
   原则：设计 token 全量替换，组件类名与 v1 兼容，改动集中可控
   ============================================================ */
:root {
  /* ---- 品牌色（群青蓝） ---- */
  --primary: #2E5AAC;          /* 兼容旧变量名 */
  --primary-dark: #24488E;
  --primary-600: #2E5AAC;
  --primary-700: #24488E;
  --primary-500: #3D6DC0;
  --primary-100: #DCE6F5;
  --primary-50:  #EEF3FB;
  --primary-light: #EEF3FB;    /* 兼容旧变量名 */

  /* ---- 中性色 ---- */
  --text: #16202E;             /* 兼容旧变量名 ink-900 */
  --ink-900: #16202E;
  --ink-600: #55647A;
  --ink-400: #8B98AA;
  --text-light: #55647A;       /* 兼容旧变量名 */
  --line: #DCE2EC;
  --border: #DCE2EC;           /* 兼容旧变量名 */
  --bg: #F3F5F9;
  --card: #FFFFFF;
  --surface-2: #F8FAFD;

  /* ---- 语义色 ---- */
  --success: #067647;
  --success-bg: #E7F6EF;
  --danger: #B42318;
  --danger-bg: #FDECEA;
  --warning: #92400E;
  --warning-bg: #FDF1E3;
  --orange: #92400E;

  /* ---- 形状 / 阴影 / 动效 ---- */
  --radius: 12px;
  --radius-sm: 8px;
  --shadow-sm: 0 1px 2px rgba(22,32,46,.06);
  --shadow-md: 0 8px 24px rgba(22,32,46,.12);
  --t-fast: 150ms ease-out;

  /* ---- 字体 ---- */
  --font: 'PingFang SC', 'Microsoft YaHei', 'Segoe UI', system-ui, sans-serif;
}
* { box-sizing: border-box; margin: 0; padding: 0; }
html, body { height: 100%; }
body {
  font-family: var(--font); background: var(--bg); color: var(--ink-900);
  font-size: 14px; line-height: 1.55; -webkit-font-smoothing: antialiased;
}
.hidden { display: none !important; }
.num { font-variant-numeric: tabular-nums; }

/* 焦点可达性（WCAG AA） */
:focus-visible { outline: 2px solid var(--primary-500); outline-offset: 2px; border-radius: 4px; }

/* ============================================================
   登录页（v2：品牌语左栏 + 表单卡右栏，去重渐变）
   ============================================================ */
.login-wrap {
  min-height: 100vh; display: flex; align-items: center; justify-content: center;
  background: var(--bg); padding: 24px;
}
.login-shell {
  display: flex; width: 860px; max-width: 100%; min-height: 480px;
  background: #fff; border-radius: 16px; box-shadow: var(--shadow-md);
  overflow: hidden;
}
.login-hero {
  flex: 1.1; background: linear-gradient(160deg, #24488E 0%, #2E5AAC 55%, #3D6DC0 100%);
  color: #fff; padding: 48px 44px; display: flex; flex-direction: column; justify-content: center; gap: 18px;
}
.login-hero .logo {
  width: 46px; height: 46px; border-radius: 12px; background: rgba(255,255,255,.16);
  display: flex; align-items: center; justify-content: center;
  font-size: 22px; font-weight: 700; letter-spacing: .5px;
  box-shadow: inset 0 0 0 1px rgba(255,255,255,.28);
}
.login-hero h1 { font-size: 26px; font-weight: 600; letter-spacing: .02em; }
.login-hero p { font-size: 14px; color: rgba(255,255,255,.82); line-height: 1.7; }
.login-hero .dots { display: flex; gap: 6px; }
.login-hero .dots i { width: 6px; height: 6px; border-radius: 50%; background: rgba(255,255,255,.45); }
.login-hero .dots i:first-child { background: #fff; }
.login-card {
  flex: 1; padding: 48px 44px; display: flex; flex-direction: column; justify-content: center;
}
.login-card h2 { font-size: 20px; font-weight: 600; margin-bottom: 4px; }
.login-card .sub { color: var(--ink-600); font-size: 13px; margin-bottom: 28px; }
.field { margin-bottom: 16px; }
.field label { display: block; font-size: 13px; color: var(--ink-600); margin-bottom: 6px; font-weight: 500; }
.field .req { color: var(--danger); margin-left: 2px; }
.field input, .field select, .field textarea {
  width: 100%; padding: 9px 12px; border: 1px solid var(--line); border-radius: var(--radius-sm);
  font-size: 14px; color: var(--ink-900); background: #fff; outline: none;
  transition: border-color var(--t-fast), box-shadow var(--t-fast);
}
.field input:focus, .field select:focus, .field textarea:focus {
  border-color: var(--primary-600); box-shadow: 0 0 0 3px var(--primary-50);
}
.field input[aria-invalid="true"] {
  border-color: var(--danger); box-shadow: 0 0 0 3px var(--danger-bg);
}
.field input:disabled { background: var(--surface-2); color: var(--ink-400); }
.error-msg { color: var(--danger); font-size: 13px; margin-bottom: 12px; }
.field-validation { margin-top: 4px; color: var(--danger); font-size: 12px; }

/* ============================================================
   布局：顶栏 56px + 侧栏 216px + 主内容区
   ============================================================ */
.app { display: flex; flex-direction: column; height: 100vh; }
.topbar {
  height: 56px; background: #fff; border-bottom: 1px solid var(--line);
  display: flex; align-items: center; padding: 0 20px; gap: 16px; flex-shrink: 0;
  z-index: 20;
}
.brand {
  font-weight: 700; font-size: 16px; color: var(--ink-900); white-space: nowrap;
  display: flex; align-items: center; gap: 10px; letter-spacing: .01em;
}
.brand .logo {
  width: 28px; height: 28px; border-radius: 8px; background: var(--primary-600);
  color: #fff; font-size: 13px; font-weight: 700;
  display: flex; align-items: center; justify-content: center;
}
.project-switch { display: flex; align-items: center; gap: 8px; flex: 1; min-width: 0; }
.project-name { font-size: 14px; color: var(--ink-900); font-weight: 600; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.plan-select {
  padding: 6px 10px; border: 1px solid var(--line); border-radius: var(--radius-sm); font-size: 13px;
  background: #fff; max-width: 260px; outline: none; cursor: pointer; color: var(--ink-900);
  transition: border-color var(--t-fast);
}
.plan-select:focus { border-color: var(--primary-600); box-shadow: 0 0 0 3px var(--primary-50); }
.user-info { font-size: 13px; color: var(--ink-600); white-space: nowrap; }

.layout { display: flex; flex: 1; overflow: hidden; }
.sidebar {
  width: 216px; background: #fff; border-right: 1px solid var(--line);
  padding: 14px 10px; flex-shrink: 0; overflow-y: auto;
  display: flex; flex-direction: column; gap: 4px;
}
.sidebar nav { display: flex; flex-direction: column; gap: 2px; }
.main { flex: 1; overflow-y: auto; padding: 20px 24px; }

/* ---- 侧栏：分组 + 计划卡 ---- */
.nav-group-title {
  font-size: 11px; font-weight: 600; color: var(--ink-400); letter-spacing: .08em;
  padding: 14px 12px 6px; text-transform: uppercase;
}
.nav-item {
  display: flex; align-items: center; gap: 10px; padding: 9px 12px; border-radius: 8px;
  cursor: pointer; color: var(--ink-600); font-size: 13px; position: relative;
  transition: background var(--t-fast), color var(--t-fast);
}
.nav-item:hover { background: var(--primary-50); color: var(--ink-900); }
.nav-item.active { background: var(--primary-100); color: var(--primary-700); font-weight: 600; }
.nav-item.active::before {
  content: ''; position: absolute; left: -10px; top: 20%; bottom: 20%; width: 3px;
  border-radius: 2px; background: var(--primary-600);
}
.nav-item .dot {
  width: 7px; height: 7px; border-radius: 2px; background: var(--line); flex-shrink: 0;
  transition: background var(--t-fast);
}
.nav-item:hover .dot { background: var(--primary-100); }
.nav-item.active .dot { background: var(--primary-600); }

/* ---- 当前计划卡（侧栏顶部） ---- */
.nav-plan-card {
  background: var(--surface-2); border: 1px solid var(--line); border-radius: var(--radius);
  padding: 12px; margin-bottom: 8px;
}
.nav-plan-card .pname { font-size: 13px; font-weight: 600; color: var(--ink-900); margin-bottom: 8px; line-height: 1.4; }
.nav-plan-card .pmeta { font-size: 12px; color: var(--ink-600); margin-bottom: 8px; }
.nav-plan-card .pbar { display: flex; align-items: center; gap: 8px; }
.nav-plan-card .pbar .progress-bar { flex: 1; width: auto; }
.nav-plan-card .pbar span { font-size: 12px; font-weight: 600; color: var(--primary-600); }

/* ---- 离开填写页后保留的进行中计划 ---- */
.nav-draft-title { display: flex; align-items: center; justify-content: space-between; }
.nav-draft-title span {
  min-width: 20px; padding: 0 5px; border-radius: 8px; background: var(--warning-bg);
  color: var(--warning); font-size: 11px; line-height: 18px; text-align: center;
}
.nav-draft-list { display: flex; flex-direction: column; gap: 7px; padding: 0 2px 6px; }
.nav-draft-card {
  padding: 9px 10px; border: 1px solid #F2D6B3; border-radius: 8px; background: #FFFBF5;
  cursor: pointer; transition: border-color var(--t-fast), box-shadow var(--t-fast), background var(--t-fast);
}
.nav-draft-card:hover { border-color: #D9A25F; background: #FFF8ED; box-shadow: var(--shadow-sm); }
.nav-draft-head { display: flex; align-items: center; justify-content: space-between; gap: 6px; margin-bottom: 5px; }
.nav-draft-status { display: inline-flex; align-items: center; gap: 5px; color: var(--warning); font-size: 11px; font-weight: 600; }
.nav-draft-status i { width: 7px; height: 7px; border-radius: 50%; background: #D97706; }
.nav-draft-delete {
  padding: 1px 3px; border: 0; background: transparent; color: var(--ink-400);
  font: inherit; font-size: 11px; cursor: pointer;
}
.nav-draft-delete:hover { color: var(--danger); text-decoration: underline; }
.nav-draft-delete:disabled { opacity: .5; cursor: wait; }
.nav-draft-name {
  margin-bottom: 5px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
  color: var(--ink-900); font-size: 12px; font-weight: 600;
}
.nav-draft-step { display: flex; align-items: center; justify-content: space-between; gap: 6px; color: var(--ink-600); font-size: 11px; }
.nav-draft-step span { color: var(--primary-600); font-variant-numeric: tabular-nums; }

/* ---- 步骤导航（计划内） ---- */
.nav-divider { height: 1px; background: var(--line); margin: 8px 6px; }
.step-item {
  display: flex; align-items: center; gap: 10px; padding: 8px 12px; border-radius: 8px;
  cursor: pointer; color: var(--ink-600); font-size: 13px; position: relative;
  transition: background var(--t-fast);
}
.step-item:hover { background: var(--primary-50); }
.step-item.active { background: var(--primary-100); color: var(--primary-700); font-weight: 600; }
.step-item .num {
  width: 22px; height: 22px; border-radius: 50%; background: #fff; border: 1px solid var(--line);
  display: flex; align-items: center; justify-content: center; font-size: 12px; font-weight: 600; flex-shrink: 0;
  color: var(--ink-600);
}
.step-item.active .num { background: var(--primary-600); border-color: var(--primary-600); color: #fff; }
.step-item.done .num { background: var(--success); border-color: var(--success); color: #fff; }
.step-item span.label { font-size: 13px; }

/* ============================================================
   组件：按钮 / 卡片 / 表格 / 标签 / 进度条
   ============================================================ */
.btn {
  border: 1px solid var(--line); background: #fff; color: var(--ink-900);
  padding: 8px 16px; border-radius: var(--radius-sm); cursor: pointer; font-size: 13px; font-weight: 500;
  transition: all var(--t-fast); user-select: none; white-space: nowrap;
}
.btn:hover { border-color: var(--primary-500); color: var(--primary-600); background: var(--primary-50); }
.btn.primary { background: var(--primary-600); border-color: var(--primary-600); color: #fff; }
.btn.primary:hover { background: var(--primary-700); border-color: var(--primary-700); color: #fff; transform: translateY(-1px); box-shadow: var(--shadow-sm); }
.btn.danger { color: var(--danger); }
.btn.danger:hover { border-color: var(--danger); background: var(--danger-bg); color: var(--danger); }
.btn.small { padding: 4px 10px; font-size: 12px; }
.btn.ghost { border-color: transparent; background: transparent; }
.btn.ghost:hover { background: var(--primary-50); color: var(--primary-600); border-color: transparent; }
.btn.block { width: 100%; padding: 11px; font-size: 15px; }
.btn:disabled { opacity: .55; cursor: not-allowed; transform: none !important; }

.card {
  background: var(--card); border-radius: var(--radius); padding: 20px;
  box-shadow: var(--shadow-sm); margin-bottom: 16px; border: 1px solid rgba(220,226,236,.6);
}
.card h3 { font-size: 15px; font-weight: 600; margin-bottom: 14px; color: var(--ink-900); }
.card .desc { color: var(--ink-600); font-size: 12px; margin-bottom: 14px; }

.form-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(240px, 1fr)); gap: 14px; }
.form-grid .full { grid-column: 1 / -1; }
.form-row-btn { margin-top: 16px; display: flex; gap: 10px; }

/* ---- 模型配置 ---- */
.mc-page-head {
  display: flex; align-items: flex-start; justify-content: space-between; gap: 20px;
  margin-bottom: 18px;
}
.mc-page-head h2 { font-size: 21px; font-weight: 600; margin-bottom: 3px; }
.mc-page-head p, .mc-section-head p { color: var(--ink-600); font-size: 13px; }
.mc-tabs {
  display: inline-grid; grid-template-columns: repeat(3, minmax(150px, 1fr));
  border: 1px solid var(--line); border-radius: 8px; background: var(--card); padding: 3px;
  margin-bottom: 14px;
}
.mc-tab {
  min-height: 38px; padding: 7px 14px; border: 0; border-radius: 6px;
  background: transparent; color: var(--ink-600); font: inherit; font-size: 13px; cursor: pointer;
  display: flex; align-items: center; justify-content: center; gap: 7px;
}
.mc-tab:hover { color: var(--primary-600); background: var(--surface-2); }
.mc-tab.active { color: var(--primary-700); background: var(--primary-50); font-weight: 600; }
.mc-tab b {
  min-width: 20px; padding: 0 5px; border-radius: 8px; background: var(--surface-2);
  color: var(--ink-600); font-size: 11px; line-height: 18px;
}
.mc-tab.active b { background: var(--primary-100); color: var(--primary-700); }
.mc-section {
  background: var(--card); border: 1px solid rgba(220,226,236,.8); border-radius: 8px;
  box-shadow: var(--shadow-sm); overflow: hidden;
}
.mc-section-head {
  min-height: 72px; padding: 15px 18px; border-bottom: 1px solid var(--line);
  display: flex; align-items: center; justify-content: space-between; gap: 16px;
}
.mc-section-head h3 { font-size: 15px; font-weight: 600; margin-bottom: 2px; }
.mc-active-summary { color: var(--ink-600); font-size: 12px; white-space: nowrap; }
.mc-provider-list { width: 100%; }
.mc-provider-row {
  display: grid; grid-template-columns: minmax(280px, 1.4fr) minmax(220px, 1fr) auto;
  gap: 18px; align-items: center; min-height: 128px; padding: 16px 18px;
  border-bottom: 1px solid var(--line); position: relative;
}
.mc-provider-row:last-child { border-bottom: 0; }
.mc-provider-row.active::before {
  content: ''; position: absolute; inset: 0 auto 0 0; width: 3px; background: var(--success);
}
.mc-provider-title { display: flex; align-items: center; flex-wrap: wrap; gap: 8px; margin-bottom: 3px; }
.mc-provider-title strong { font-size: 15px; }
.mc-model-name { color: var(--ink-900); font-size: 13px; font-weight: 500; margin-bottom: 5px; }
.mc-endpoint {
  max-width: 560px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
  color: var(--ink-600); font: 12px/1.5 Consolas, monospace;
}
.mc-provider-meta { display: flex; flex-wrap: wrap; gap: 7px 14px; margin-top: 7px; color: var(--ink-400); font-size: 11px; }
.mc-test-state { display: inline-flex; align-items: center; gap: 5px; font-size: 12px; font-weight: 600; }
.mc-test-state::before { content: ''; width: 7px; height: 7px; border-radius: 50%; background: var(--ink-400); }
.mc-test-state.success { color: var(--success); }
.mc-test-state.success::before { background: var(--success); }
.mc-test-state.failed { color: var(--danger); }
.mc-test-state.failed::before { background: var(--danger); }
.mc-test-state.idle { color: var(--ink-600); }
.mc-test-time { margin-left: 7px; color: var(--ink-400); font-size: 11px; }
.mc-provider-test p {
  max-width: 360px; margin-top: 5px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
  color: var(--ink-600); font-size: 12px;
}
.mc-provider-actions { display: flex; flex-wrap: wrap; justify-content: flex-end; gap: 6px; max-width: 250px; }
.mc-empty { min-height: 190px; display: flex; flex-direction: column; align-items: center; justify-content: center; color: var(--ink-600); }
.mc-empty strong { color: var(--ink-900); font-size: 14px; margin-bottom: 4px; }
.mc-empty span { font-size: 12px; }
.mc-billing-note { margin: 10px 2px 0; color: var(--ink-400); font-size: 12px; }
.mc-provider-form textarea { resize: vertical; font-family: Consolas, monospace; font-size: 13px; }
.mc-model-input-row { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 7px; }
.mc-model-input-row .btn { padding-inline: 12px; }
.mc-model-results {
  margin-top: 8px; border: 1px solid var(--line); border-radius: 8px;
  background: var(--surface-2); overflow: hidden;
}
.mc-model-loading, .mc-model-error, .mc-model-none { padding: 13px; color: var(--ink-600); font-size: 12px; }
.mc-model-error { color: var(--danger); background: var(--danger-bg); }
.mc-model-error span { color: var(--ink-600); }
.mc-model-result-head {
  min-height: 44px; padding: 7px 9px; border-bottom: 1px solid var(--line);
  display: flex; align-items: center; justify-content: space-between; gap: 8px;
  color: var(--ink-600); font-size: 12px;
}
.mc-model-result-head input { width: 190px; padding: 6px 8px; font-size: 12px; }
.mc-model-list { max-height: 230px; overflow-y: auto; background: var(--card); }
.mc-model-option {
  display: flex; width: 100%; min-height: 40px; align-items: center; justify-content: space-between; gap: 12px;
  padding: 7px 10px; border: 0; border-bottom: 1px solid var(--line); background: var(--card);
  color: var(--ink-900); font: inherit; text-align: left; cursor: pointer;
}
.mc-model-option:last-child { border-bottom: 0; }
.mc-model-option:hover, .mc-model-option.selected { background: var(--primary-50); color: var(--primary-700); }
.mc-model-option span { min-width: 0; display: flex; flex-direction: column; }
.mc-model-option strong { overflow-wrap: anywhere; font: 600 12px/1.45 Consolas, monospace; letter-spacing: 0; }
.mc-model-option small { color: var(--ink-600); font-size: 11px; }
.mc-model-option em { flex-shrink: 0; color: var(--ink-400); font-size: 11px; font-style: normal; }
.mc-model-result-foot {
  padding: 6px 9px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
  border-top: 1px solid var(--line); color: var(--ink-400); font: 11px/1.4 Consolas, monospace;
}
.mc-clear-key {
  display: flex !important; align-items: center; gap: 7px; width: fit-content; margin-top: 7px !important;
  color: var(--danger) !important; font-size: 12px !important; cursor: pointer;
}
.mc-clear-key input { width: 15px; height: 15px; margin: 0; accent-color: var(--danger); }

@media (max-width: 900px) {
  .mc-provider-row { grid-template-columns: 1fr; gap: 12px; }
  .mc-provider-actions { justify-content: flex-start; max-width: none; }
}
@media (max-width: 620px) {
  .mc-page-head { align-items: stretch; flex-direction: column; }
  .mc-tabs { display: grid; grid-template-columns: 1fr; width: 100%; }
  .mc-section-head { align-items: flex-start; flex-direction: column; }
  .mc-model-result-head { align-items: stretch; flex-direction: column; }
  .mc-model-result-head input { width: 100%; }
}

/* ---- KPI 数字卡片（28px display + tabular-nums） ---- */
.summary-row { display: grid; grid-template-columns: repeat(auto-fill, minmax(150px, 1fr)); gap: 12px; margin-bottom: 16px; }
.result-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(160px, 1fr)); gap: 12px; margin-top: 16px; }
.result-item {
  background: var(--primary-50); border: 1px solid transparent; border-radius: var(--radius);
  padding: 14px 16px; text-align: left;
}
.result-item .label { font-size: 12px; color: var(--ink-600); margin-bottom: 6px; font-weight: 500; }
.result-item .value {
  font-size: 28px; font-weight: 600; color: var(--ink-900); letter-spacing: -.01em;
  font-variant-numeric: tabular-nums; line-height: 1.2;
}
.result-item.blue { background: var(--primary-50); }
.result-item.blue .value { color: var(--primary-700); }
.result-item.green { background: var(--success-bg); }
.result-item.green .value { color: var(--success); }
.result-item.red { background: var(--danger-bg); }
.result-item.red .value { color: var(--danger); }
.result-item.orange { background: var(--warning-bg); }
.result-item.orange .value { color: var(--warning); }

/* ---- 表格（sticky 表头 + tabular-nums） ---- */
table.tbl { width: 100%; border-collapse: collapse; }
.tbl th, .tbl td { padding: 9px 10px; text-align: left; border-bottom: 1px solid var(--line); font-size: 13px; font-variant-numeric: tabular-nums; }
.tbl thead th {
  color: var(--ink-600); font-weight: 600; background: var(--surface-2);
  position: sticky; top: 0; z-index: 2; white-space: nowrap;
}
.tbl tbody tr:hover td { background: var(--primary-50); }
.tbl input, .tbl select {
  padding: 5px 8px; border: 1px solid var(--line); border-radius: 6px; font-size: 13px; outline: none;
  transition: border-color var(--t-fast);
}
.tbl input:focus, .tbl select:focus { border-color: var(--primary-600); box-shadow: 0 0 0 2px var(--primary-50); }

/* ---- 全站数据表格：表头排序、搜索与分类筛选 ---- */
table[data-table-tools="auto"] th.dt-th { vertical-align: top; }
.dt-th-label-row {
  display: flex; min-height: 22px; align-items: center; gap: 5px;
  color: var(--ink-600); font-weight: 600; white-space: nowrap;
}
.dt-sort-btn {
  display: inline-flex; min-height: 22px; align-items: center; gap: 5px; padding: 0;
  border: 0; background: transparent; color: inherit; font: inherit; cursor: pointer;
}
.dt-sort-btn:hover, .dt-sort-btn.active { color: var(--primary-600); }
.dt-sort-icon { color: var(--ink-400); font-size: 11px; line-height: 1; }
.dt-sort-btn.active .dt-sort-icon { color: var(--primary-600); font-weight: 700; }
.dt-filter {
  display: block; width: 100%; min-width: 72px; height: 27px; margin-top: 4px;
  padding: 2px 6px !important; border: 1px solid var(--line) !important; border-radius: 6px !important;
  background: var(--card); color: var(--ink-900); font-size: 12px !important; font-weight: 400;
}
.dt-filter:focus { border-color: var(--primary-600) !important; box-shadow: 0 0 0 2px var(--primary-50) !important; }
select.dt-filter { cursor: pointer; }
.dt-table-count { min-height: 20px; margin-top: 7px; }
.dt-clear {
  margin-left: 6px; padding: 0; border: 0; background: transparent;
  color: var(--primary-600); font: inherit; cursor: pointer;
}
.dt-clear:hover { text-decoration: underline; }

/* ---- 标签（药丸） ---- */
.tag { display: inline-block; padding: 2px 10px; border-radius: 999px; font-size: 12px; font-weight: 500; }
.tag.gray { background: #EEF1F6; color: var(--ink-600); }
.tag.blue { background: var(--primary-100); color: var(--primary-700); }
.tag.green { background: var(--success-bg); color: var(--success); }
.tag.red { background: var(--danger-bg); color: var(--danger); }
.tag.orange { background: var(--warning-bg); color: var(--warning); }

/* ---- 进度条 ---- */
.progress-bar { height: 8px; background: #E5EAF2; border-radius: 4px; overflow: hidden; width: 200px; }
.progress-bar i { display: block; height: 100%; background: var(--primary-600); border-radius: 4px; transition: width .4s ease; }

/* ---- 图表 ---- */
.chart-box { width: 100%; height: 300px; }
.charts-2col { display: grid; grid-template-columns: 1fr 1fr; gap: 16px; }
@media (max-width: 1000px) { .charts-2col { grid-template-columns: 1fr; } }

.empty-tip { text-align: center; color: var(--ink-400); padding: 40px 0; font-size: 13px; }
.readonly-tip {
  background: var(--warning-bg); border: 1px solid #F2D9B8; color: var(--warning);
  padding: 8px 14px; border-radius: var(--radius-sm); font-size: 13px; margin-bottom: 14px;
}

/* ---- 录入即核算：输入区 + 右侧联动面板 ---- */
.entry-layout { display: grid; grid-template-columns: 1fr 320px; gap: 16px; align-items: start; }
@media (max-width: 1200px) { .entry-layout { grid-template-columns: 1fr; } }
.calc-panel {
  background: var(--surface-2); border: 1px solid var(--line); border-radius: var(--radius);
  padding: 16px 18px; position: sticky; top: 16px;
}
.calc-panel .cp-head { display: flex; align-items: center; gap: 8px; margin-bottom: 14px; }
.calc-panel .cp-head .cp-ico {
  width: 26px; height: 26px; border-radius: 7px; background: var(--primary-100); color: var(--primary-700);
  display: flex; align-items: center; justify-content: center; font-size: 13px; font-weight: 700;
}
.calc-panel .cp-head h4 { font-size: 14px; font-weight: 600; color: var(--ink-900); }
.calc-row { display: flex; justify-content: space-between; align-items: baseline; padding: 7px 0; border-bottom: 1px dashed var(--line); }
.calc-row:last-child { border-bottom: none; }
.calc-row .cl { font-size: 12px; color: var(--ink-600); }
.calc-row .cv { font-size: 15px; font-weight: 600; color: var(--ink-900); font-variant-numeric: tabular-nums; }
.calc-row .cv.pos { color: var(--success); }
.calc-row .cv.neg { color: var(--danger); }
.calc-row .cv.big { font-size: 20px; }
.calc-note { font-size: 11px; color: var(--ink-400); margin-top: 12px; line-height: 1.6; }

/* ---- 弹窗 ---- */
.modal-mask {
  position: fixed; inset: 0; background: rgba(22,32,46,.45); z-index: 100;
  display: flex; align-items: center; justify-content: center; padding: 16px;
}
.modal {
  background: #fff; border-radius: var(--radius); width: 560px; max-width: 100%; max-height: 86vh;
  display: flex; flex-direction: column; box-shadow: var(--shadow-md);
}
.modal-head {
  display: flex; justify-content: space-between; align-items: center;
  padding: 14px 20px; border-bottom: 1px solid var(--line); font-weight: 600; font-size: 15px;
}
.modal-body { padding: 20px; overflow-y: auto; }

/* ---- Toast ---- */
.toast {
  position: fixed; top: 20px; left: 50%; transform: translateX(-50%);
  background: var(--ink-900); color: #fff; padding: 10px 22px; border-radius: var(--radius-sm);
  z-index: 200; font-size: 13px; box-shadow: var(--shadow-md);
}
.toast.err { background: var(--danger); }

.file-note { font-size: 12px; color: var(--ink-600); margin-top: 6px; }
.shop-name-warning { color: #b88600; font-weight: 600; }
.task-quota-fields { display: grid; grid-template-columns: minmax(0, 2fr) minmax(100px, 1fr); gap: 12px; margin: 12px 0; }
.task-quota-fields .file-note { grid-column: 1 / -1; }
.task-quota-fields select, .task-quota-fields input { width: 100%; min-width: 0; }
.task-publish-form [data-quota-daily], .task-publish-form [data-quota-calculation] {
  margin: 0; padding: 10px 12px; border: 1px solid #f2cf66; border-radius: var(--radius-sm);
  background: #fff5cc; color: #795400; font-size: 13px; font-weight: 600; line-height: 1.7;
  overflow-wrap: anywhere;
}
.task-publish-form [data-quota-daily]:empty { display: none; }
.quota-panel { min-width: 0; padding: 24px 28px 20px; }
.quota-head, .quota-group-head { display: flex; justify-content: space-between; align-items: center; gap: 20px; }
.quota-eyebrow { color: var(--ink-600); font-size: 11px; font-weight: 600; }
.quota-head h2 { font-size: 20px; line-height: 1.3; }
.quota-month { width: 166px; margin: 0; flex-shrink: 0; }
.quota-month label { font-size: 11px; margin-bottom: 3px; }
.quota-month input { padding: 7px 10px; font-size: 13px; }
.quota-tabs { display: flex; gap: 24px; margin: 20px -28px 0; padding: 0 28px; border-bottom: 1px solid var(--line); overflow-x: auto; }
.quota-tabs button { flex-shrink: 0; padding: 0 2px 12px; border: 0; border-bottom: 2px solid transparent; background: transparent; color: var(--ink-600); font: inherit; font-size: 13px; cursor: pointer; }
.quota-tabs button.active { color: var(--primary-700); border-bottom-color: var(--primary-600); font-weight: 600; }
.quota-view[hidden] { display: none; }
.quota-stats { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); margin-top: 20px; padding: 17px 0; border: 1px solid var(--line); border-radius: 6px; background: var(--surface-2); }
.quota-stat { display: flex; flex-direction: column; min-width: 0; padding: 0 18px; border-right: 1px solid var(--line); color: var(--ink-600); font-size: 12px; }
.quota-stat:last-child { border-right: 0; }
.quota-stat strong { margin: 3px 0; color: var(--ink-900); font-size: 22px; line-height: 1.2; overflow-wrap: anywhere; }
.quota-stat strong small { font-size: 12px; font-weight: 400; }
.quota-stat > small { min-height: 18px; font-size: 11px; }
.quota-group { padding: 22px 0 4px; border-bottom: 1px solid var(--line); }
.quota-group:last-child { border-bottom: 0; }
.quota-group-head { align-items: end; margin-bottom: 14px; }
.quota-group-head h3 { font-size: 15px; line-height: 1.4; }
.quota-group-head p { margin-top: 3px; color: var(--ink-600); font-size: 12px; }
.quota-group-budget { display: flex; align-items: center; gap: 10px; flex-shrink: 0; color: var(--ink-600); font-size: 12px; }
.quota-table { overflow-x: auto; margin-top: 14px; }
.quota-table .tbl { width: 100%; min-width: 580px; border-collapse: collapse; }
.quota-table .tbl th { background: var(--surface-2); color: var(--ink-600); font-size: 11px; font-weight: 600; white-space: nowrap; }
.quota-table .tbl td { height: 54px; vertical-align: middle; }
.quota-table .tbl tr:last-child td { border-bottom: 0; }
.quota-table .tbl th:first-child, .quota-table .tbl td:first-child { width: 32%; padding-left: 12px; }
.quota-table .tbl th:nth-child(2), .quota-table .tbl td:nth-child(2) { width: 30%; }
.quota-view[data-quota-panel="channels"] .quota-table .tbl { min-width: 1000px; }
.quota-view[data-quota-panel="channels"] .quota-table .tbl th:first-child,
.quota-view[data-quota-panel="channels"] .quota-table .tbl td:first-child { width: 18%; }
.quota-view[data-quota-panel="channels"] .quota-table .tbl th:nth-child(2),
.quota-view[data-quota-panel="channels"] .quota-table .tbl td:nth-child(2) { width: auto; }
.quota-name { font-weight: 600; overflow-wrap: anywhere; }
.quota-name small { display: block; margin-top: 2px; color: var(--ink-600); font-size: 11px; font-weight: 400; }
.quota-remaining { color: var(--success); font-weight: 600; }
.quota-edit, .quota-toolbar { display: flex; gap: 6px; align-items: center; }
.quota-toolbar { flex-wrap: wrap; }
.quota-toolbar a { text-decoration: none; }
.quota-edit input { width: 96px; height: 32px; padding: 5px 8px; text-align: right; font-variant-numeric: tabular-nums; }
.quota-edit .btn { height: 32px; }
.quota-edit .btn:disabled { opacity: .45; }
.quota-static { white-space: nowrap; }
.quota-meter { height: 5px; border-radius: 3px; background: #e2e8ef; overflow: hidden; }
.quota-meter > span { display: block; height: 100%; border-radius: inherit; background: var(--primary-600); }
.quota-group > .quota-meter { max-width: 100%; }
.quota-progress { display: flex; align-items: center; gap: 10px; white-space: nowrap; }
.quota-progress > span { min-width: 58px; }
.quota-progress .quota-meter { flex: 1; min-width: 42px; }
.quota-empty { padding: 22px 12px; color: var(--ink-600); font-size: 13px; background: var(--surface-2); }
.quota-rules { margin-top: 18px; color: var(--ink-600); font-size: 12px; }
.quota-rules summary { width: fit-content; cursor: pointer; }
.quota-rules p { margin-top: 8px; line-height: 1.7; }
.artist-task.artist-task-urgent { border-left: 4px solid var(--point-color); background: #fff; }
.task-point-badge { display: inline-block; width: fit-content; padding: 3px 8px; margin-top: 4px; border-radius: 4px; font-size: 12px; color: #475569; background: #f1f5f9; }
.task-point-badge.urgent { border: 1px solid var(--point-color); background: var(--point-color); color: #fff; font-weight: 600; }
@media (max-width: 620px) {
  .task-quota-fields { grid-template-columns: 1fr; }
  .quota-panel { padding: 18px 16px; }
  .quota-tabs { margin-right: -16px; margin-left: -16px; padding: 0 16px; gap: 18px; }
  .quota-head h2 { font-size: 17px; }
  .quota-month { width: 138px; }
  .quota-stats { grid-template-columns: 1fr; padding: 0; }
  .quota-stat { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 2px 8px; align-items: center; padding: 9px 12px; border-right: 0; border-bottom: 1px solid var(--line); font-size: 11px; }
  .quota-stat:last-child { border-bottom: 0; }
  .quota-stat strong { font-size: 17px; }
  .quota-stat strong { grid-column: 2; grid-row: 1 / 3; margin: 0; }
  .quota-stat > small { grid-column: 1; font-size: 10px; }
  .quota-group-head { align-items: start; flex-direction: column; gap: 10px; }
  .quota-table { overflow-x: visible; }
  .quota-table .tbl { min-width: 0; }
  .quota-view[data-quota-panel="channels"] .quota-table .tbl { min-width: 0; }
  .quota-view[data-quota-panel="channels"] .quota-table td:nth-child(5) { grid-column: 1 / -1; display: flex; align-items: center; justify-content: space-between; gap: 12px; }
  .quota-table .tbl thead { display: none; }
  .quota-table .tbl tbody tr { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); padding: 10px 0; border-top: 1px solid var(--line); }
  .quota-table .tbl td { display: block; width: auto !important; height: auto; padding: 5px 8px !important; border: 0; font-size: 12px; }
  .quota-table .tbl td:first-child, .quota-table .tbl td:nth-child(2) { grid-column: 1 / -1; }
  .quota-table .tbl td:first-child { font-size: 13px; }
  .quota-table .tbl td:nth-child(2) { display: flex; align-items: center; justify-content: space-between; gap: 12px; }
  .quota-table .tbl td:nth-child(n+2)::before { display: block; margin-bottom: 3px; color: var(--ink-600); font-size: 10px; font-weight: 400; }
  .quota-table .tbl td:nth-child(2)::before { margin-bottom: 0; }
  .quota-view[data-quota-panel="channels"] .quota-table td:nth-child(2)::before { content: '个人月配额'; }
  .quota-view[data-quota-panel="channels"] .quota-table td:nth-child(3)::before { content: '本月已消耗'; }
  .quota-view[data-quota-panel="channels"] .quota-table td:nth-child(4)::before { content: '本月可使用'; }
  .quota-view[data-quota-panel="channels"] .quota-table td:nth-child(5)::before { content: '每日上限'; }
  .quota-view[data-quota-panel="channels"] .quota-table td:nth-child(6)::before { content: '今日已消耗'; }
  .quota-view[data-quota-panel="channels"] .quota-table td:nth-child(7)::before { content: '今日剩余'; }
  .quota-view .quota-personal .quota-table td:nth-child(2)::before { content: '个人月配额'; }
  .quota-view .quota-personal .quota-table td:nth-child(3)::before { content: '本月已消耗'; }
  .quota-view .quota-personal .quota-table td:nth-child(4)::before { content: '本月可使用'; }
  .quota-view[data-quota-panel="teams"] .quota-table td:nth-child(2)::before { content: '点数目标'; }
  .quota-view[data-quota-panel="teams"] .quota-table td:nth-child(3)::before { content: '已完成'; }
  .quota-view[data-quota-panel="teams"] .quota-table td:nth-child(4)::before { content: '完成率'; }
  .quota-view[data-quota-panel="mine"] .quota-table td:nth-child(2)::before { content: '月目标'; }
  .quota-view[data-quota-panel="mine"] .quota-table td:nth-child(3)::before { content: '已完成'; }
  .quota-view[data-quota-panel="mine"] .quota-table td:nth-child(4)::before { content: '完成率'; }
}
.inline-actions { display: flex; gap: 6px; align-items: center; }
.tbl td.inline-actions { display: table-cell; vertical-align: middle; }
.tbl td.inline-actions > .btn { margin-right: 6px; }
.tbl td.inline-actions > .btn:last-child { margin-right: 0; }

.shop-orphan-warning {
  margin-top: 16px; border: 1px solid #E7B9B4; border-radius: var(--radius-sm);
  background: var(--danger-bg); overflow: hidden;
}
.shop-orphan-warning summary {
  min-height: 44px; padding: 10px 14px; cursor: pointer; color: var(--danger); font-weight: 600;
  display: flex; align-items: center; justify-content: space-between; gap: 12px;
}
.shop-orphan-warning summary::marker { content: ''; }
.shop-orphan-warning summary::before { content: '+'; width: 18px; flex: 0 0 18px; font-size: 18px; line-height: 1; }
.shop-orphan-warning[open] summary::before { content: '-'; }
.shop-orphan-warning summary > span:first-of-type { flex: 1; }
.shop-orphan-warning-body { padding: 0 14px 14px; }
.shop-orphan-warning-body > p { color: var(--danger); font-size: 12px; margin-bottom: 10px; }
.shop-orphan-warning .tbl { background: #fff; }
.shop-orphan-warning .tbl th, .shop-orphan-warning .tbl td { vertical-align: top; }
@media (max-width: 640px) {
  .shop-orphan-warning summary { align-items: flex-start; flex-direction: column; }
}

/* ---- 产品库 ---- */
.product-thumb { width: 48px; height: 48px; object-fit: cover; border-radius: 6px; border: 1px solid var(--line); background: var(--surface-2); }
.product-mini-images { display: flex; gap: 6px; flex-wrap: wrap; }
.product-mini-images > span { position: relative; display: block; width: 48px; height: 48px; }
.product-mini-images .product-thumb { display: block; object-fit: contain; }
.product-mini-images b {
  position: absolute; right: 2px; bottom: 2px; max-width: 44px; padding: 1px 3px;
  overflow: hidden; color: #fff; background: rgba(22, 32, 46, .78); border-radius: 3px;
  font-size: 9px; font-weight: 500; line-height: 1.25; text-overflow: ellipsis; white-space: nowrap;
}
.product-image-fields { min-width: 0; }
.product-image-tabs { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); border-bottom: 1px solid var(--line); }
.product-image-tab {
  min-width: 0; min-height: 42px; padding: 8px 12px; border: 0; border-bottom: 2px solid transparent;
  background: transparent; color: var(--ink-600); font: inherit; font-size: 13px; font-weight: 600; cursor: pointer;
}
.product-image-tab:hover { color: var(--primary-600); background: var(--primary-50); }
.product-image-tab.active { border-bottom-color: var(--primary-600); color: var(--primary-700); background: var(--primary-50); }
.product-image-tab:focus-visible { outline: 2px solid var(--primary-500); outline-offset: -2px; }
.product-image-tab span {
  display: inline-flex; align-items: center; justify-content: center; min-width: 20px; height: 20px; margin-left: 6px;
  padding: 0 5px; border-radius: 10px; background: var(--surface-2); color: var(--ink-600); font-size: 11px;
}
.product-image-tab.active span { background: var(--primary-100); color: var(--primary-700); }
.product-image-panels { min-width: 0; }
.product-image-field { min-width: 0; padding: 14px; border: 1px solid var(--line); border-top: 0; border-radius: 0 0 6px 6px; background: var(--surface-2); }
.product-image-field > label { display: block; margin-bottom: 8px; color: var(--ink-900); font-weight: 600; }
.product-image-field input[type="file"] { width: 100%; min-width: 0; font-size: 12px; }
.product-upload-preview {
  display: flex; align-items: center; justify-content: center; min-height: 188px; margin-top: 10px; padding: 12px;
  border: 1px dashed var(--line); border-radius: 5px; background: #fff;
}
.product-upload-images {
  display: grid; grid-template-columns: repeat(auto-fill, minmax(140px, 180px)); justify-content: start; gap: 12px; width: 100%;
}
.product-upload-image { position: relative; width: 100%; aspect-ratio: 1; overflow: hidden; border: 1px solid var(--line); border-radius: 5px; background: var(--surface-2); }
.product-upload-image img { display: block; width: 100%; height: 100%; object-fit: contain; background: #fff; cursor: zoom-in; }
.product-upload-image img:focus-visible { outline: 2px solid var(--primary-500); outline-offset: -3px; }
.product-upload-image > span {
  position: absolute; left: 4px; bottom: 4px; display: inline-flex; align-items: center; justify-content: center;
  min-width: 20px; height: 20px; padding: 0 4px; border-radius: 3px; color: #fff;
  background: rgba(22,32,46,.72); font-size: 10px;
}
.product-image-remove {
  position: absolute; top: 6px; right: 6px; display: inline-flex; align-items: center; justify-content: center;
  width: 28px; height: 28px; padding: 0; border: 1px solid rgba(255,255,255,.8); border-radius: 50%;
  color: #fff; background: rgba(22,32,46,.78); font-size: 18px; line-height: 1; cursor: pointer;
}
.product-image-remove:hover { background: var(--danger); }
.product-sales-warning { margin-top: 5px; color: var(--warning); font-size: 12px; line-height: 1.45; }
.product-query-filters { grid-template-columns: repeat(5, minmax(0, 1fr)) minmax(88px, auto); align-items: end; }
.image-query-filters { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.image-query-filters .field { min-width: 0; }
.library-favorite { position: absolute; top: 8px; right: 8px; z-index: 2; display: flex; align-items: center; justify-content: center; width: 32px; height: 32px; padding: 0; border: 1px solid rgba(100,116,139,.2); border-radius: 50%; background: rgba(255,255,255,.45); color: rgba(71,85,105,.65); font-size: 24px; line-height: 1; cursor: pointer; box-shadow: 0 1px 3px rgba(0,0,0,.05); transition: background var(--t-fast), color var(--t-fast), border-color var(--t-fast); }
.library-favorite.active { color: rgba(183,121,0,.75); border-color: rgba(233,201,111,.3); background: rgba(255,248,219,.45); }
.library-favorite:hover, .library-favorite:focus-visible { color: var(--ink-600); border-color: var(--line); background: rgba(255,255,255,.9); }
.library-favorite.active:hover, .library-favorite.active:focus-visible { color: #b77900; border-color: #e9c96f; background: rgba(255,248,219,.9); }
.library-favorite:focus-visible { outline: 2px solid var(--primary-500); outline-offset: 2px; }
.library-favorite:disabled { cursor: wait; opacity: .6; }
.product-query-filters .field { min-width: 0; }
.product-card-gallery { display: grid; aspect-ratio: 1; gap: 1px; overflow: hidden; background: var(--line); }
.product-card-gallery[data-count="1"] { grid-template-columns: 1fr; }
.product-card-gallery[data-count="2"] { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.product-card-gallery[data-count="3"] { grid-template: repeat(2, minmax(0, 1fr)) / 2fr 1fr; }
.product-card-gallery[data-count="3"] .thumb-w:first-child { grid-row: 1 / 3; }
.product-card-gallery[data-many="1"] {
  grid-template: none / repeat(3, minmax(0, 1fr)); grid-auto-rows: calc((100% - 2px) / 3); overflow-y: auto;
}
.product-card-gallery[data-many="1"] .thumb-w:first-child { grid-row: auto; }
.product-card-gallery[data-many="1"] .thumb-w { aspect-ratio: 1; }
.product-card-gallery .thumb-w { min-width: 0; min-height: 0; aspect-ratio: auto; }
.product-card-gallery .thumb-w > img { object-fit: contain; background: #fff; }
.product-image-kind {
  position: absolute; left: 5px; top: 5px; max-width: calc(100% - 10px); padding: 2px 5px;
  overflow: hidden; border-radius: 3px; color: #fff; background: rgba(22,32,46,.76);
  font-size: 10px; line-height: 1.3; text-overflow: ellipsis; white-space: nowrap;
}
.product-query-card { cursor: pointer; transition: border-color var(--t-fast), box-shadow var(--t-fast); }
.product-query-card:hover, .product-query-card:focus-visible { border-color: var(--primary-500); box-shadow: var(--shadow-md); outline: none; }
.product-query-card .thumb-w { cursor: pointer; }
.product-query-card .thumb-w::after { content: none; }
.artist-board { width: 100%; min-width: 0; }
.artist-entry-choice { padding: 12px 0; }
.artist-entry-choice label { display: inline-flex; align-items: center; gap: 8px; cursor: pointer; }
.artist-board-head { display: flex; justify-content: space-between; align-items: center; gap: 20px; padding: 4px 0 18px; border-bottom: 1px solid var(--line); }
.artist-board-head h2 { margin: 0; font-size: 22px; color: var(--ink-900); }
.artist-board-hint { margin-top: 6px; color: var(--ink-600); font-size: 12px; }
.artist-private-links { display: flex; flex-wrap: wrap; gap: 8px; padding-top: 16px; }
.task-publish-form { padding: 22px; }
.task-publish-form > .field { margin-bottom: 18px; }
.task-publish-form h3 { margin-bottom: 12px; font-size: 14px; }
.task-media-actions { display: flex; flex-wrap: wrap; gap: 8px; }
.task-local-picker { position: relative; overflow: hidden; }
.task-local-picker input { position: absolute; inset: 0; opacity: 0; width: 100%; cursor: pointer; }
.task-media-count { margin: 14px 0 10px; color: var(--ink-600); font-size: 12px; overflow-wrap: anywhere; }
.task-media-grid { display: grid; grid-template-columns: repeat(auto-fill,minmax(130px,1fr)); gap: 12px; }
.task-media-item { position: relative; min-width: 0; padding: 6px; border: 1px solid var(--line); border-radius: 5px; background: var(--surface-2); }
.task-media-item > button:first-child { width: 100%; display: block; padding: 0; border: 0; background: #fff; cursor: zoom-in; }
.task-media-item img, .task-media-item video { display: block; width: 100%; height: 122px; object-fit: contain; background: #fff; }
.task-media-item figcaption { margin-top: 6px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-size: 12px; }
.task-media-item a { color: var(--primary-700); }
.task-image-number { display: block; margin-top: 6px; font-size: 12px; font-weight: 600; font-variant-numeric: tabular-nums; }
.task-reference-link { color: var(--primary-700); text-decoration: underline; text-underline-offset: 3px; cursor: zoom-in; }
.task-reference-link:focus-visible { outline: 2px solid var(--primary-600); outline-offset: 3px; border-radius: 2px; }
.task-reference-missing, .task-reference-warning { color: var(--danger); }
.task-reference-warning { margin-top: 8px; font-size: 12px; overflow-wrap: anywhere; }
.task-requirement-preview { margin-top: 10px; padding: 10px 12px; border: 1px solid var(--line); border-radius: 4px; background: var(--surface-2); }
.task-requirement-preview .artist-requirement-text { margin-top: 6px; }
.task-reference-preview { position: fixed; z-index: 2900; width: min(280px, calc(100vw - 16px)); max-height: calc(100vh - 16px); overflow: hidden; padding: 10px; border: 1px solid var(--line); border-radius: 6px; background: var(--card); box-shadow: var(--shadow-md); pointer-events: none; white-space: normal; }
.task-reference-preview img { display: block; width: 100%; height: min(240px, calc(100vh - 95px)); object-fit: contain; background: var(--surface-2); }
.task-reference-preview img[hidden] { display: none; }
.task-reference-preview strong, .task-reference-preview span { display: block; margin-top: 6px; font-size: 12px; }
.task-reference-preview span { color: var(--ink-600); }
.task-reference-content { min-width: 0; overflow: auto; }
.task-reference-content img, .task-reference-content video { display: block; width: 100%; height: 220px; object-fit: contain; background: var(--surface-2); }
.task-reference-content p { margin: 8px 0; font-size: 12px; color: var(--ink-600); overflow-wrap: anywhere; }
.task-reference-content table { width: 100%; border-collapse: collapse; font-size: 11px; table-layout: fixed; }
.task-reference-content td { border: 1px solid var(--line); padding: 5px; overflow-wrap: anywhere; vertical-align: top; }
.task-reference-preview .task-reference-content { max-height: min(240px, calc(100vh - 95px)); }
.task-reference-picker { position: fixed; z-index: 2800; display: flex; flex-direction: column; overflow: hidden; border: 1px solid var(--line); border-radius: 6px; background: var(--card); box-shadow: var(--shadow-md); }
.task-reference-picker[hidden] { display: none; }
.task-reference-picker-head { flex-shrink: 0; display: flex; flex-wrap: wrap; justify-content: space-between; gap: 4px 12px; padding: 10px 12px; border-bottom: 1px solid var(--line); font-size: 12px; font-weight: 600; }
.task-reference-picker-head span { color: var(--ink-600); font-weight: 400; font-size: 11px; }
.task-reference-picker-body { display: flex; flex: 1 1 auto; min-height: 0; overflow: hidden; }
.task-reference-options { width: 56%; flex: 1 1 56%; min-width: 0; overflow-y: auto; overscroll-behavior: contain; }
.task-reference-options > button { display: flex; width: 100%; gap: 10px; align-items: center; padding: 8px 10px; border: 0; border-bottom: 1px solid var(--line); background: var(--card); text-align: left; cursor: pointer; color: var(--ink-900); }
.task-reference-options > button[aria-selected=true] { background: var(--primary-50); box-shadow: inset 3px 0 var(--primary-600); }
.task-reference-option-icon { display: flex; flex: 0 0 40px; align-items: center; justify-content: center; height: 40px; border: 1px solid var(--line); border-radius: 4px; font-size: 20px; background: var(--surface-2); }
.task-reference-option-icon img { width: 100%; height: 100%; object-fit: contain; }
.task-reference-options button > span:last-child { min-width: 0; }
.task-reference-options strong, .task-reference-options small { display: block; overflow-wrap: anywhere; font-size: 12px; }
.task-reference-options small { margin-top: 4px; color: var(--ink-600); font-weight: 400; font-size: 11px; }
.task-reference-picker-preview { flex: 0 1 44%; min-width: 0; padding: 10px; overflow: auto; border-left: 1px solid var(--line); }
.task-reference-picker-preview[hidden] { display: none; }
.task-reference-picker-preview img, .task-reference-picker-preview video { height: 180px; }
.task-reference-picker-preview > strong { display: block; margin-top: 8px; font-size: 12px; overflow-wrap: anywhere; }
.task-reference-picker-empty { padding: 14px; color: var(--ink-600); font-size: 12px; }
.task-attachment-viewer { position: fixed; inset: 0; z-index: 3000; display: flex; align-items: center; justify-content: center; padding: 16px; background: rgba(0,0,0,.65); }
.task-attachment-viewer > section { display: flex; flex-direction: column; width: min(820px,100%); max-height: calc(100vh - 32px); padding: 16px; border-radius: 6px; background: var(--card); }
.task-attachment-viewer header { display: flex; align-items: center; justify-content: space-between; gap: 12px; margin-bottom: 12px; }
.task-attachment-viewer strong { font-size: 14px; overflow-wrap: anywhere; }
.task-attachment-viewer .task-reference-content { flex: 1 1 auto; min-height: 0; }
.task-attachment-viewer video { height: min(480px,60vh); }
.task-attachment-viewer footer { margin-top: 12px; }
.task-media-item .task-document-card { display: flex; height: 122px; align-items: center; justify-content: center; flex-direction: column; gap: 10px; background: #fff; text-decoration: none; font-size: 12px; }
.task-document-card > span { font-size: 32px; }
.task-media-item small { display: block; margin-top: 4px; color: var(--ink-600); font-size: 10px; }
.task-media-item > label { display: flex; flex-wrap: wrap; align-items: center; gap: 4px; margin-top: 6px; font-size: 12px; }
.task-media-item [data-task-role] { width: 100%; min-width: 0; }
.task-publish-form > .form-row-btn { position: sticky; bottom: -22px; justify-content: flex-end; margin: 16px -22px -22px; padding: 12px 22px; background: #fff; border-top: 1px solid var(--line); z-index: 1; }
.task-media-remove { position: absolute; top: -6px; right: -6px; width: 25px; height: 25px; border: 1px solid var(--line); border-radius: 50%; background: #fff; color: var(--danger); cursor: pointer; }
.task-library-picker { margin-top: 14px; padding: 12px; border: 1px solid var(--line); border-radius: 5px; }
.task-library-filters { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 10px; margin-bottom: 12px; }
.task-library-filters .field { min-width: 0; margin-bottom: 0; }
.task-library-filters label { margin-bottom: 0; }
.task-library-filters input, .task-library-filters select { margin-top: 6px; }
.task-library-search { display: flex; flex-wrap: wrap; gap: 8px; margin-bottom: 12px; }
.task-library-results { max-height: 300px; overflow-y: auto; }
.task-library-grid { display: grid; grid-template-columns: repeat(auto-fill,minmax(125px,1fr)); gap: 10px; }
.task-library-grid label { min-width: 0; padding: 6px; border: 1px solid var(--line); border-radius: 4px; cursor: pointer; }
.task-library-grid label:has(input:checked) { border-color: var(--primary-600); background: var(--primary-50); }
.task-library-grid img { display: block; width: 100%; height: 100px; object-fit: contain; }
.task-library-grid span { display: block; overflow-wrap: anywhere; font-size: 11px; }
.task-library-grid input { margin-right: 5px; }
.task-product-grid { grid-template-columns: repeat(auto-fill, minmax(150px, 1fr)); gap: 12px; }
.task-product-grid .info { overflow-wrap: anywhere; }
.task-product-grid .info > small, .task-product-name { display: block; margin-top: 4px; }
.task-product-selection { display: block; margin-top: 6px; color: var(--primary-700); font-size: 12px; }
.task-product-detail-head { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; margin-bottom: 12px; }
.task-product-detail-head strong { overflow-wrap: anywhere; }
@media (max-width: 700px) {
  .task-publish-form { padding: 16px; }
  .task-publish-form > .form-row-btn { bottom: -16px; margin: 16px -16px -16px; padding: 12px 16px; }
  .task-media-grid { grid-template-columns: repeat(2,minmax(0,1fr)); }
  .task-media-actions .btn { font-size: 12px; padding: 6px 9px; }
  .task-library-filters { grid-template-columns: 1fr; }
}
.artist-workspace-tabs { display: flex; gap: 20px; border-bottom: 1px solid var(--line); margin-top: 12px; }
.artist-workspace-tabs button { padding: 12px 2px; border: 0; border-bottom: 2px solid transparent; background: transparent; color: var(--ink-600); font: inherit; cursor: pointer; }
.artist-workspace-tabs button.active { color: var(--primary-700); border-bottom-color: var(--primary-600); font-weight: 600; }
.artist-result-toolbar { display: flex; align-items: center; flex-wrap: wrap; gap: 8px 16px; padding: 8px 0; }
.artist-result-toolbar .artist-result-count { padding: 4px 0; margin-right: auto; }
.artist-workflow-filters { display: flex; gap: 4px; flex-wrap: wrap; }
.task-questions .artist-section-head, .task-question header { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; }
.task-questions .artist-section-head > div { display: flex; flex-wrap: wrap; gap: 6px; }
.task-question { border: 1px solid var(--line); border-radius: 8px; padding: 14px; margin-top: 12px; }
.task-questions label { display: grid; gap: 6px; margin-top: 12px; font-size: 13px; }
.task-questions textarea, .task-questions select { width: 100%; min-width: 0; box-sizing: border-box; }
.task-question-compose { padding: 12px; border-radius: 8px; background: var(--primary-100); }
.task-question-context { margin: 12px 0; color: var(--ink-600); font-size: 12px; }
.task-questions blockquote { margin: 8px 0; padding: 8px 12px; border-left: 3px solid var(--primary-100); white-space: pre-wrap; overflow-wrap: anywhere; }
.task-question-message { padding: 10px 12px; margin: 8px 0; background: var(--ink-50, #f7f8fa); border-radius: 6px; }
.task-question-message.is-reply { background: var(--primary-100); }
.task-question-message > div { display: flex; flex-wrap: wrap; gap: 8px; font-size: 12px; }
.task-question-message time, .task-question header small { color: var(--ink-600); }
.task-question-message p { margin: 6px 0 0; white-space: pre-wrap; overflow-wrap: anywhere; }
.task-question-actions { display: flex; justify-content: flex-end; gap: 8px; margin-top: 8px; }
.artist-workflow-filters button { padding: 4px 8px; border: 0; border-radius: 4px; background: transparent; color: var(--ink-600); font: inherit; font-size: 12px; cursor: pointer; }
.artist-workflow-filters button.active { background: var(--primary-100); color: var(--primary-700); }
.artist-task-progress { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; margin-top: 8px; color: var(--ink-600); font-size: 11px; }
.artist-workflow-badge { display: inline-flex; align-items: center; width: fit-content; padding: 2px 7px; border-radius: 4px; color: var(--ink-600); background: #edf0f5; font-size: 11px; }
.artist-workflow-badge.claimed { color: var(--primary-700); background: var(--primary-50); }
.artist-workflow-badge.review { color: var(--warning); background: var(--warning-bg); }
.artist-workflow-badge.rejected { color: var(--danger); background: var(--danger-bg); }
.artist-workflow-badge.exception, .artist-exception-badge { color: var(--danger); background: var(--danger-bg); }
.artist-exception-badges { display: flex; flex-wrap: wrap; gap: 5px; margin-top: 8px; }
.artist-exception-badge { display: inline-flex; padding: 2px 7px; border-radius: 4px; font-size: 11px; }
.artist-exception-mine { color: var(--ink-600); font-size: 11px; align-self: center; }
.artist-exception-record { padding: 12px 0; border-bottom: 1px solid var(--line); overflow-wrap: anywhere; }
.artist-exception-record:last-child { border-bottom: 0; }
.artist-exception-record time { display: block; color: var(--ink-600); font-size: 12px; margin-top: 4px; }
.artist-workflow-badge.done { color: var(--success); background: var(--success-bg); }
.artist-review-feedback { margin-top: 20px; padding: 12px; border-left: 3px solid var(--danger); background: var(--danger-bg); font-size: 12px; overflow-wrap: anywhere; }
.artist-review-feedback p { margin-top: 5px; white-space: pre-wrap; }
.artist-review-feedback span { display: block; margin-top: 8px; color: var(--ink-600); }
.artist-review-feedback.waiting { border-color: var(--warning); background: var(--warning-bg); }
.artist-gallery-label { margin: 12px 0 8px; color: var(--ink-600); font-size: 12px; }
.artist-delivery-thumb { position: relative; }
.artist-delivery-remove { position: absolute; top: -6px; right: -6px; width: 24px; height: 24px; border: 1px solid var(--line); border-radius: 50%; background: #fff; color: var(--danger); cursor: pointer; }
.artist-task-history { margin: 16px 0 24px; font-size: 12px; }
.artist-task-history summary { cursor: pointer; color: var(--ink-600); }
.artist-task-history > div { padding: 12px 0; border-bottom: 1px solid var(--line); }
.artist-task-history > .artist-history-selected { padding: 12px; border-left: 3px solid var(--primary-600); background: var(--primary-50); }
.artist-task-history time { display: block; margin: 4px 0; color: var(--ink-600); }
.artist-task-history p { white-space: pre-wrap; overflow-wrap: anywhere; }
.artist-nas-input { width: 100%; min-width: 0; }
.artist-nas-path { display: flex; align-items: center; gap: 10px; min-width: 0; margin: 8px 0; }
.artist-nas-path code { flex: 1; min-width: 0; overflow-wrap: anywhere; white-space: pre-wrap; font: inherit; font-size: 12px; }
.artist-nas-path button { flex-shrink: 0; }
.artist-status-tabs { display: inline-flex; padding: 3px; background: #e7ecf2; border-radius: 6px; }
.artist-status-tabs button { min-width: 82px; padding: 7px 14px; border: 0; border-radius: 4px; background: transparent; color: var(--ink-600); cursor: pointer; font: inherit; }
.artist-status-tabs button.active { background: #fff; color: var(--primary-700); box-shadow: var(--shadow-sm); font-weight: 600; }
.artist-board-toolbar { display: flex; justify-content: space-between; align-items: center; gap: 16px; padding-top: 18px; }
.artist-board-tabs { display: flex; gap: 2px; flex-shrink: 0; }
.artist-board-tabs button { display: flex; align-items: center; gap: 7px; border: 0; border-bottom: 2px solid transparent; padding: 10px 12px; background: transparent; color: var(--ink-600); cursor: pointer; font: inherit; }
.artist-board-tabs button.active { border-bottom-color: var(--primary-600); color: var(--primary-700); font-weight: 600; }
.artist-board-tabs button span { padding: 0 6px; min-width: 22px; border-radius: 4px; background: #e7ecf2; font-size: 11px; font-variant-numeric: tabular-nums; }
.artist-board-tabs button.active span { background: var(--primary-100); }
.artist-board-controls { display: flex; flex-wrap: wrap; gap: 8px; min-width: 0; }
.artist-board-controls input, .artist-board-controls select { height: 36px; padding: 7px 10px; border: 1px solid var(--line); border-radius: 5px; background: #fff; color: var(--ink-900); font: inherit; font-size: 12px; }
.artist-board-controls input::placeholder { color: var(--ink-600); }
.artist-board-controls input { width: 256px; min-width: 0; }
.artist-board-controls select { width: 180px; flex-shrink: 0; }
.artist-board-controls #artist-kind { width: 140px; }
.artist-result-count { padding: 12px 0; color: var(--ink-600); font-size: 12px; }
.artist-list-head, .artist-task { display: grid; grid-template-columns: 64px minmax(0, 1fr) 105px 138px 62px; align-items: center; gap: 16px; }
.artist-list-head { padding: 9px 16px; background: #eaf0f5; border-bottom: 1px solid var(--line); color: var(--ink-600); font-size: 12px; }
.artist-list-head > span:first-child { grid-column: 1 / 3; }
.artist-task-list { background: #fff; }
.artist-task { min-height: 100px; padding: 16px; border-bottom: 1px solid var(--line); cursor: pointer; transition: background var(--t-fast); }
.artist-task:hover, .artist-task:focus-within { background: var(--surface-2); }
.artist-task-image { display: grid; place-items: center; width: 64px; height: 64px; padding: 0; border: 1px solid var(--line); border-radius: 4px; background: #f4f6f7; color: var(--ink-600); font-size: 10px; overflow: hidden; cursor: zoom-in; }
.artist-task-image img, .artist-detail-preview img { display: block; width: 100%; height: 100%; object-fit: contain; background: #fff; }
.artist-task-open { min-width: 0; padding: 0; border: 0; color: inherit; background: transparent; font: inherit; text-align: left; cursor: pointer; }
.artist-task-title { display: flex; align-items: center; gap: 8px; min-width: 0; }
.artist-task-title strong { min-width: 0; color: var(--ink-900); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.artist-task-title .tag { flex-shrink: 0; font-size: 10px; }
.artist-task-brand { flex-shrink: 0; max-width: 80px; color: var(--ink-600); font-size: 11px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.artist-task-summary { display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; overflow-wrap: anywhere; margin-top: 5px; color: var(--ink-600); font-size: 12px; line-height: 1.6; }
.artist-task-meta { display: contents; }
.artist-board-anonymous .artist-list-head, .artist-board-anonymous .artist-task { grid-template-columns: 64px minmax(0, 1fr) 138px 62px; }
.artist-task-owner { min-width: 0; overflow-wrap: anywhere; font-size: 12px; }
.artist-task-owner small { display: block; margin-top: 3px; color: var(--ink-600); }
.artist-task-date { color: var(--ink-600); font-size: 12px; font-variant-numeric: tabular-nums; }
.artist-task-handle { min-width: 62px; }
.artist-empty { display: flex; flex-direction: column; align-items: center; gap: 14px; padding: 64px 20px; border-top: 1px solid var(--line); color: var(--ink-600); }
.artist-empty strong { font-weight: 500; }
.modal.artist-task-modal { width: 920px; max-width: 100%; border-radius: 8px; }
.artist-task-modal .modal-body { padding: 0; }
.artist-detail-layout { display: grid; grid-template-columns: 210px minmax(0, 1fr); }
.artist-detail-asset { min-width: 0; padding: 22px; background: var(--surface-2); border-right: 1px solid var(--line); }
.artist-detail-preview { display: grid; place-items: center; width: 100%; aspect-ratio: 1; overflow: hidden; border: 1px solid var(--line); border-radius: 5px; background: #fff; color: var(--ink-600); cursor: zoom-in; }
.artist-detail-facts { min-width: 0; margin-top: 14px; }
.artist-detail-facts h3 { margin: 8px 0 18px; font-size: 14px; overflow-wrap: anywhere; }
.artist-detail-facts dl > div { margin: 12px 0; }
.artist-detail-facts dt { color: var(--ink-600); font-size: 11px; }
.artist-detail-facts dd { margin-top: 3px; font-size: 12px; overflow-wrap: anywhere; }
.artist-detail-status { display: inline-flex; align-items: center; gap: 6px; color: var(--warning); font-size: 12px; }
.artist-detail-status::before { content: ''; width: 6px; height: 6px; border-radius: 50%; background: currentColor; }
.artist-detail-status.done { color: var(--success); }
.artist-detail-main { min-width: 0; padding: 0 24px; }
.artist-detail-section { padding: 20px 0; border-bottom: 1px solid var(--line); }
.artist-detail-section:last-child { border-bottom: 0; }
.artist-section-head { display: flex; justify-content: space-between; align-items: center; gap: 12px; min-height: 30px; margin-bottom: 10px; }
.artist-section-head h3 { font-size: 14px; font-weight: 600; }
.artist-section-head > span { color: var(--ink-600); font-size: 12px; }
.artist-requirement-text { white-space: pre-wrap; overflow-wrap: anywhere; line-height: 1.8; font-size: 13px; }
.artist-detail-main textarea { display: block; width: 100%; padding: 9px 11px; border: 1px solid var(--line); border-radius: 6px; background: #fff; color: var(--ink-900); font: inherit; font-size: 13px; resize: vertical; }
.artist-detail-main .artist-nas-input { display: block; padding: 9px 11px; border: 1px solid var(--line); border-radius: 6px; background: #fff; color: var(--ink-900); font: inherit; font-size: 13px; }
.artist-requirement-actions { display: flex; justify-content: flex-end; gap: 8px; margin-top: 8px; }
.artist-image-tabs { display: flex; gap: 4px; border-bottom: 1px solid var(--line); }
.artist-image-tabs button { display: flex; align-items: center; gap: 6px; padding: 8px 12px; border: 0; border-bottom: 2px solid transparent; background: transparent; color: var(--ink-600); font: inherit; font-size: 12px; cursor: pointer; }
.artist-image-tabs button.active { border-bottom-color: var(--primary-600); color: var(--primary-700); font-weight: 600; }
.artist-image-tabs button span { font-size: 11px; color: var(--ink-600); }
.artist-image-panel { min-height: 164px; padding-top: 12px; }
.artist-existing-images, .artist-upload-preview { display: flex; flex-wrap: wrap; gap: 8px; }
.artist-existing-image { flex-shrink: 0; width: 72px; height: 72px; padding: 0; border: 1px solid var(--line); border-radius: 4px; background: #fff; overflow: hidden; cursor: zoom-in; }
.artist-existing-image img { display: block; width: 100%; height: 100%; object-fit: contain; }
.artist-image-empty { display: block; padding: 12px 0; color: var(--ink-600); font-size: 12px; }
.artist-upload-field { margin-top: 14px; }
.artist-upload-field label { display: block; margin-bottom: 6px; color: var(--ink-600); font-size: 12px; }
.artist-upload-field input { display: block; width: 100%; min-width: 0; padding: 6px; font-size: 12px; }
.artist-upload-field input::file-selector-button { margin-right: 10px; padding: 6px 10px; border: 1px solid var(--line); border-radius: 4px; background: var(--surface-2); color: var(--ink-900); cursor: pointer; }
.artist-upload-preview { margin-top: 12px; }
.artist-task-prompt { margin-top: 18px; }
.artist-detail-footer { position: sticky; bottom: 0; display: flex; justify-content: space-between; align-items: center; flex-wrap: wrap; gap: 12px; padding: 12px 22px; border-top: 1px solid var(--line); background: #fff; z-index: 1; }
.artist-detail-footer > div { display: flex; flex-wrap: wrap; gap: 8px; }
.artist-detail-footer .artist-delete { color: var(--danger); }
.artist-detail-footer #artist-complete { min-width: 120px; }
@media (max-width: 1000px) {
  .artist-board-toolbar { flex-wrap: wrap; }
  .artist-board-controls { flex: 1; }
  .artist-board-controls input { flex: 1; }
  .artist-list-head, .artist-task { grid-template-columns: 56px minmax(0, 1fr) 88px 120px 56px; gap: 12px; }
  .artist-board-anonymous .artist-list-head, .artist-board-anonymous .artist-task { grid-template-columns: 56px minmax(0, 1fr) 120px 56px; }
  .artist-task-image { width: 56px; height: 56px; }
  .artist-task-handle { min-width: 56px; }
}
@media (max-width: 700px) {
  .artist-board-head { align-items: start; flex-direction: column; gap: 12px; }
  .artist-board-head h2 { font-size: 20px; }
  .artist-board-toolbar { gap: 12px; padding-top: 12px; }
  .artist-board-tabs { width: 100%; }
  .artist-board-tabs button { padding: 8px 10px; font-size: 12px; }
  .artist-board-controls { width: 100%; flex: 1 0 100%; }
  .artist-board-controls input { width: 100%; flex: 1 0 100%; }
  .artist-board-controls select, .artist-board-controls #artist-kind { width: 0; min-width: 0; flex: 1; }
  .artist-list-head { display: none; }
  .artist-task { grid-template-columns: 52px minmax(0, 1fr) 50px; gap: 8px 10px; padding: 14px 12px; }
  .artist-board-anonymous .artist-task { grid-template-columns: 52px minmax(0, 1fr) 50px; }
  .artist-task-image { grid-row: 1 / 3; width: 52px; height: 52px; }
  .artist-task-title { flex-wrap: wrap; gap: 4px 6px; }
  .artist-task-title strong { display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; flex-basis: 100%; white-space: normal; overflow-wrap: anywhere; }
  .artist-task-summary { -webkit-line-clamp: 2; }
  .artist-task-meta { display: flex; flex-wrap: wrap; align-items: center; gap: 2px 10px; grid-column: 2 / 4; grid-row: 2; }
  .artist-task-owner { color: var(--ink-600); font-size: 11px; }
  .artist-task-owner small { display: inline; margin-left: 6px; }
  .artist-task-date { font-size: 11px; }
  .artist-task-handle { grid-column: 3; grid-row: 1 / 3; min-width: 50px; padding: 6px; }
  .artist-detail-layout { grid-template-columns: 1fr; }
  .artist-detail-asset { display: grid; grid-template-columns: 80px minmax(0, 1fr); gap: 14px; padding: 16px; border-right: 0; border-bottom: 1px solid var(--line); }
  .artist-detail-facts { margin-top: 0; }
  .artist-detail-facts h3 { margin: 6px 0 10px; }
  .artist-detail-facts dl { display: flex; flex-wrap: wrap; gap: 8px 16px; }
  .artist-detail-facts dl > div { margin: 0; }
  .artist-detail-status { margin-top: 10px; }
  .artist-detail-main { padding: 0 16px; }
  .artist-detail-section { padding: 16px 0; }
  .artist-detail-footer { padding: 12px; gap: 8px; }
  .artist-detail-footer .btn { padding: 7px 10px; font-size: 12px; }
  .artist-detail-footer #artist-complete { min-width: 106px; }
}
.artist-layout-switch { display: inline-flex; gap: 2px; padding: 3px; border: 1px solid var(--line); border-radius: 6px; background: var(--surface-2); }
.artist-layout-switch button { padding: 6px 10px; border: 0; border-radius: 4px; background: transparent; color: var(--ink-600); font: inherit; font-size: 12px; cursor: pointer; }
.artist-layout-switch button.active { background: #fff; color: var(--primary-700); box-shadow: var(--shadow-sm); font-weight: 600; }
.artist-board-cards .artist-task-list { display: grid; grid-template-columns: repeat(auto-fill, minmax(min(100%, 260px), 1fr)); gap: 12px; background: transparent; }
.artist-board.artist-board-cards .artist-task { grid-template-columns: minmax(0, 1fr) auto; grid-template-rows: auto 1fr auto; align-items: start; gap: 10px; width: 100%; min-width: 0; padding: 12px; border: 1px solid var(--line); border-radius: 10px; background: #fff; box-shadow: var(--shadow-sm); transition: border-color var(--t-fast), box-shadow var(--t-fast); }
.artist-board.artist-board-cards .artist-task:hover, .artist-board.artist-board-cards .artist-task:focus-within { border-color: var(--primary-500); box-shadow: var(--shadow-md); }
.artist-board-cards .artist-task.artist-task-urgent { border-left: 4px solid var(--point-color); }
.artist-board-cards .artist-task-image { position: relative; grid-column: 1 / -1; grid-row: 1; width: 100%; height: auto; max-height: 200px; aspect-ratio: 4 / 3; border-radius: 6px; font-size: 13px; }
.artist-board-cards .artist-task-image img { position: absolute; inset: 0; width: 100%; height: 100%; min-width: 0; min-height: 0; object-fit: contain; object-position: center; }
.artist-board-cards .artist-task-open { grid-column: 1 / -1; grid-row: 2; width: 100%; }
.artist-board-cards .artist-task-title { flex-wrap: wrap; gap: 4px 8px; }
.artist-board-cards .artist-task-title strong { display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; flex-basis: 100%; overflow-wrap: anywhere; white-space: normal; line-height: 1.5; }
.artist-board-cards .artist-task-summary { -webkit-line-clamp: 2; }
.artist-board-cards .artist-task-progress { gap: 5px 8px; }
.artist-board-cards .artist-task-progress > span:last-child { min-width: 0; overflow-wrap: anywhere; }
.artist-board-cards .artist-task-meta { display: flex; flex-direction: column; gap: 4px; grid-column: 1; grid-row: 3; min-width: 0; align-self: end; }
.artist-board-cards .artist-task-date { font-size: 11px; }
.artist-board-cards .artist-task-handle { grid-column: 2; grid-row: 3; align-self: end; min-width: 56px; }
.product-detail-summary {
  display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 12px; margin-bottom: 12px;
}
.product-detail-summary > div { min-width: 0; padding: 10px 12px; background: var(--surface-2); border-radius: 6px; }
.product-detail-summary span { display: block; margin-bottom: 4px; color: var(--ink-600); font-size: 12px; }
.product-detail-summary strong { display: block; overflow: hidden; color: var(--ink-900); font-size: 14px; text-overflow: ellipsis; white-space: nowrap; }
.product-detail-tags { display: flex; flex-wrap: wrap; gap: 6px; margin-bottom: 18px; }
.product-detail-images { display: flex; flex-direction: column; gap: 22px; }
.product-detail-image-section h4 {
  display: flex; align-items: baseline; gap: 8px; margin: 0 0 10px; padding-bottom: 8px;
  border-bottom: 1px solid var(--line); color: var(--ink-900); font-size: 15px;
}
.product-detail-image-section h4 span { color: var(--ink-400); font-size: 12px; font-weight: 400; }
.product-detail-gallery { display: grid; grid-template-columns: repeat(6, minmax(0, 1fr)); gap: 10px; }
.product-detail-thumb { border: 1px solid var(--line); border-radius: 6px; background: #fff; }
.product-detail-thumb:focus-visible { border-color: var(--primary-500); outline: 2px solid var(--primary-100); outline-offset: 2px; }
.product-detail-thumb > img { object-fit: contain; background: #fff; }
.product-detail-image-index {
  position: absolute; right: 5px; bottom: 5px; display: inline-flex; align-items: center; justify-content: center;
  min-width: 20px; height: 20px; padding: 0 5px; border-radius: 3px; color: #fff;
  background: rgba(22,32,46,.72); font-size: 10px;
}
.product-detail-empty { padding: 22px; color: var(--ink-400); background: var(--surface-2); text-align: center; font-size: 13px; }
@media (max-width: 768px) {
  .product-upload-images { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .product-query-filters { grid-template-columns: 1fr; }
  .image-query-filters { grid-template-columns: 1fr; }
  .product-detail-summary { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .product-detail-gallery { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

/* ---- 归档查询 Tab ---- */
.tab-bar { display: flex; gap: 8px; flex-wrap: wrap; margin-bottom: 14px; }
.tab-btn {
  border: 1px solid var(--line); background: #fff; color: var(--ink-600);
  padding: 7px 14px; border-radius: 999px; cursor: pointer; font-size: 13px; font-weight: 500;
  transition: all var(--t-fast);
}
.tab-btn:hover { border-color: var(--primary-500); color: var(--primary-600); }
.tab-btn.active { background: var(--primary-600); border-color: var(--primary-600); color: #fff; }

/* ---- v6 可输入款号组合框 ---- */
.combo-wrap { position: relative; }
.combo-wrap input { width: 100%; }
.combo-list {
  position: absolute; top: calc(100% + 2px); left: 0; right: 0;
  background: #fff; border: 1px solid var(--line); border-radius: var(--radius-sm);
  box-shadow: var(--shadow-md); z-index: 150; max-height: 260px; overflow-y: auto;
}
.combo-item {
  padding: 8px 12px; font-size: 13px; cursor: pointer; display: flex; align-items: baseline; gap: 4px;
  border-bottom: 1px solid var(--surface-2); flex-wrap: wrap;
}
.combo-item:last-child { border-bottom: none; }
.combo-item:hover, .combo-item.active { background: var(--primary-50); }
.combo-item .combo-sub { color: var(--ink-600); font-size: 12px; }
.combo-product-thumb {
  width: 34px; height: 34px; flex: 0 0 34px; align-self: center; object-fit: contain;
  border: 1px solid var(--line); border-radius: 4px; background: #fff;
}
.combo-item.combo-manual { color: var(--primary-600); background: #FAFBFF; }
.combo-item.combo-manual:hover, .combo-item.combo-manual.active { background: var(--primary-50); }
.combo-empty { padding: 10px 12px; font-size: 13px; color: var(--ink-400); }

.product-category-control { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 6px; align-items: center; }
.product-category-modal-mask { z-index: 180; }
.product-category-modal { width: min(680px, 100%); }
.product-category-add { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 8px; margin-bottom: 14px; }
.product-category-items { display: grid; gap: 8px; }
.product-category-item {
  display: grid; grid-template-columns: minmax(140px, 1fr) auto auto auto; gap: 8px; align-items: center;
  padding: 8px; border: 1px solid var(--line); border-radius: var(--radius-sm); background: var(--surface-2);
}
.product-category-count { color: var(--ink-600); font-size: 12px; white-space: nowrap; }
@media (max-width: 620px) {
  .product-category-item { grid-template-columns: minmax(0, 1fr) auto auto; }
  .product-category-count { grid-column: 1 / -1; grid-row: 2; }
}

/* ---- 昨日业绩录入：按组收纳店铺 ---- */
.shop-picker::after {
  content: '⌄'; position: absolute; top: 50%; right: 12px; pointer-events: none;
  color: var(--ink-400); font-size: 16px; line-height: 1; transform: translateY(-58%);
}
.shop-picker > input { padding-right: 34px; }
.shop-picker-list {
  position: absolute; top: calc(100% + 4px); left: 0; right: 0;
  z-index: 160; max-height: 320px; overflow-y: auto;
  background: #fff; border: 1px solid var(--line); border-radius: var(--radius-sm);
  box-shadow: var(--shadow-md); padding: 4px;
}
.shop-picker-group + .shop-picker-group { border-top: 1px solid var(--line); }
.shop-picker-group summary {
  min-height: 38px; padding: 8px 9px; cursor: pointer; list-style: none;
  display: flex; align-items: center; gap: 8px;
  color: var(--ink-600); font-size: 13px; font-weight: 600;
}
.shop-picker-group summary::-webkit-details-marker { display: none; }
.shop-picker-group summary::before {
  content: '›'; width: 14px; color: var(--ink-400); font-size: 18px; line-height: 1;
  transform: rotate(0deg); transition: transform var(--t-fast);
}
.shop-picker-group[open] summary::before { transform: rotate(90deg); }
.shop-picker-group summary:hover { color: var(--primary-600); background: var(--surface-2); }
.shop-picker-count {
  min-width: 24px; margin-left: auto; padding: 1px 6px; text-align: center;
  color: var(--ink-600); background: var(--surface-2); border-radius: 8px; font-size: 11px;
}
.shop-picker-items { padding: 0 0 4px 22px; }
.shop-picker-item {
  display: block; width: 100%; min-height: 36px; padding: 7px 10px;
  border: 0; border-radius: 6px; background: transparent; color: var(--ink-900);
  font: inherit; font-size: 13px; text-align: left; cursor: pointer;
}
.shop-picker-item:hover, .shop-picker-item.active { background: var(--primary-50); color: var(--primary-700); }
.shop-picker-manual { margin-top: 3px; border-top: 1px solid var(--line); color: var(--primary-600); }
.shop-picker-empty { padding: 10px 12px; color: var(--ink-400); font-size: 13px; }

/* ---- v9 图片资料录入系统 ---- */
.dict-maintain-row { display: flex; flex-wrap: wrap; gap: 8px; }
.img-grid { display: grid; grid-template-columns: repeat(6, 1fr); gap: 12px; margin-top: 8px; }
@media (max-width: 1200px) { .img-grid { grid-template-columns: repeat(4, 1fr); } }
@media (max-width: 768px) { .img-grid { grid-template-columns: repeat(2, 1fr); } }
.img-card { border: 1px solid var(--line); border-radius: var(--radius); overflow: hidden; background: #fff; display: flex; flex-direction: column; box-shadow: var(--shadow-sm); }
.img-card .thumb { width: 100%; aspect-ratio: 1/1; height: auto; object-fit: cover; display: block; background: var(--surface-2); cursor: zoom-in; }
.img-card .thumb.noimg { display: flex; align-items: center; justify-content: center; color: var(--ink-400); font-size: 13px; cursor: default; }
/* v15：1:1 预览控件（悬停提示 / 单击放大 / 双击新窗口） */
.thumb-w { position: relative; aspect-ratio: 1/1; background: var(--surface-2); overflow: hidden; cursor: zoom-in; }
.thumb-w > img { width: 100%; height: 100%; object-fit: cover; display: block; }
.thumb-w.noimg { display: flex; align-items: center; justify-content: center; color: var(--ink-400); font-size: 13px; cursor: default; }
.thumb-w::after { content: "🔍 单击放大 · 双击新窗口"; position: absolute; left: 0; right: 0; bottom: 0; padding: 14px 4px 5px; text-align: center; font-size: 11px; color: #fff; background: linear-gradient(transparent, rgba(22, 32, 46, .82)); opacity: 0; transition: opacity .15s; pointer-events: none; }
.thumb-w:not(.noimg):hover::after { opacity: 1; }
.img-card .info { padding: 10px 12px; }
.img-card .tags { margin-top: 6px; display: flex; flex-wrap: wrap; gap: 4px; }
.img-card .meta { margin-top: 6px; font-size: 12px; color: var(--ink-600); }
.image-card-actions { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 8px; }
.image-card-actions .btn { flex: 1 1 calc(50% - 3px); min-width: 0; }
.image-card-actions .image-same-style-action { flex-basis: 100%; }
.ig-library-modal.same-style-workspace { width: min(1500px, calc(100vw - 32px)); max-width: none; max-height: calc(100vh - 32px); }
.same-style-workspace .ig-library-modal-body { padding: 0; }
.same-style-workspace .ig-standalone-panel { min-height: 100%; padding: 18px; border: 0; }
.ig-fixed-reference-note { min-height: 30px; padding-top: 7px; color: var(--ink-600); font-size: 12px; }
.ig-draft-image.fixed { cursor: default; }
.image-edit-preview {
  display: flex; align-items: center; justify-content: center; min-height: 220px; max-height: 360px;
  padding: 10px; border: 1px solid var(--line); border-radius: 6px; background: var(--surface-2);
}
.image-edit-preview img { display: block; max-width: 100%; max-height: 338px; object-fit: contain; }

/* ---- v10 主管批注 + 录入情况可视化 ---- */
.review-comment {
  border: 1px solid #fde2b3; background: #fffbf2;
  border-left: 4px solid #f59e0b; border-radius: var(--radius-sm);
  padding: 10px 14px; margin-top: 10px;
}
.review-comment .rc-head { font-size: 13px; font-weight: 600; color: #b45309; margin-bottom: 6px; }
.review-comment .rc-body { font-size: 13px; color: var(--ink-700, #333); line-height: 1.6; white-space: pre-wrap; }

/* 录入情况矩阵（用户 × 日期） */
.rec-grid th.rec-day { min-width: 26px; text-align: center; font-size: 11px; padding: 4px 2px; }
.rec-grid td { text-align: center; font-size: 12px; padding: 4px 2px; }
.rec-grid td:first-child, .rec-grid td:nth-child(2) { text-align: left; padding: 8px 10px; }
.rec-grid .rec-ok { color: #16a34a; font-weight: 600; }
.rec-grid .rec-miss { color: #dc2626; font-weight: 600; background: #fef2f2; }
.rec-grid .rec-today { color: #d97706; background: #fffbeb; }
.rec-grid .rec-future { background: var(--surface-2, #f3f4f6); }
.rec-grid .rec-pct { text-align: left; white-space: nowrap; font-size: 12px; font-weight: 600; padding: 8px 10px; }
.rec-grid .rec-pct span { font-size: 11px; font-weight: 400; margin-left: 2px; }
.rec-warn {
  background: #fef2f2; border: 1px solid #fecaca; border-left: 4px solid #dc2626;
  border-radius: var(--radius-sm); padding: 10px 14px; margin: 10px 0;
  display: flex; flex-wrap: wrap; align-items: baseline; gap: 10px;
}
.rec-warn b { color: #b91c1c; font-size: 13px; }
.rec-warn span { color: var(--ink-600, #666); font-size: 12px; }
.rec-ok-banner {
  background: #f0fdf4; border: 1px solid #bbf7d0; border-left: 4px solid #16a34a;
  border-radius: var(--radius-sm); padding: 10px 14px; margin: 10px 0;
  color: #15803d; font-size: 13px; font-weight: 600;
}

/* ============================================================
   响应式：<1000px 侧栏收窄；<760px 侧栏变顶部横条
   ============================================================ */
@media (max-width: 1000px) {
  .sidebar { width: 168px; }
  .main { padding: 16px; }
  .result-item .value { font-size: 24px; }
}
@media (max-width: 760px) {
  .topbar { height: auto; min-height: 56px; flex-wrap: wrap; gap: 6px 8px; padding: 8px 12px; }
  .topbar .brand { flex: 1 1 auto; }
  .topbar .project-switch { order: 3; flex: 1 1 100%; }
  .topbar .plan-select { flex: 1; width: 0; max-width: none; }
  .topbar .user-info { display: none; }
  .layout { flex-direction: column; }
  .sidebar {
    width: 100%; max-height: none; border-right: none; border-bottom: 1px solid var(--line);
    padding: 8px; overflow-x: auto; overflow-y: hidden; scrollbar-width: none;
  }
  .sidebar::-webkit-scrollbar { display: none; }
  .sidebar nav, .sidebar { flex-direction: row; align-items: center; }
  .sidebar nav { flex-wrap: nowrap; }
  .nav-group-title { display: none; }
  .nav-item, .step-item { white-space: nowrap; }
  .nav-plan-card { display: none; }
  .nav-draft-list { flex-direction: row; padding: 0; }
  .nav-draft-card { width: 220px; flex: 0 0 220px; padding: 6px 9px; }
  .nav-draft-head { margin-bottom: 2px; }
  .nav-draft-step { display: none; }
  .login-shell { flex-direction: column; }
  .login-hero { padding: 32px 28px; }
  .login-card { padding: 32px 28px; }
}

/* 动效偏好：尊重系统设置 */
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { transition: none !important; animation: none !important; }
}

/* ============================================================
   v13 素材图片选择大面板（覆盖右侧主区域，不遮挡左侧导航）
   ============================================================ */
.picker-panel {
  position: fixed; top: 56px; bottom: 0; left: 216px; right: 0;
  background: var(--surface, #fff); z-index: 1500;
  display: flex; flex-direction: column;
  box-shadow: -8px 0 24px rgba(15, 23, 42, .08);
  animation: pickerIn .18s ease-out;
}
@keyframes pickerIn { from { transform: translateX(24px); opacity: .4; } to { transform: none; opacity: 1; } }
.picker-panel .pp-head {
  display: flex; justify-content: space-between; align-items: center;
  padding: 12px 20px; border-bottom: 1px solid var(--line); flex-shrink: 0;
}
.picker-panel .pp-body { flex: 1; overflow-y: auto; padding: 16px 20px; }
.picker-panel .pp-foot {
  display: flex; justify-content: space-between; align-items: center;
  padding: 12px 20px; border-top: 1px solid var(--line); flex-shrink: 0;
  background: var(--surface-2, #f8fafc);
}
.picker-panel .pp-list { min-height: 200px; }
.picker-panel .img-card { border: 2px solid transparent; }
.picker-panel .img-card.picked { border-color: var(--primary-600, #2563eb); }
.picker-panel .pp-upload {
  display: flex; gap: 10px; align-items: end; flex-wrap: wrap;
  padding: 12px; border: 1px dashed var(--line); border-radius: var(--radius);
  background: var(--surface-2, #f8fafc); margin-bottom: 14px;
}
@media (max-width: 1200px) { .picker-panel { left: 168px; } }
@media (max-width: 768px) { .picker-panel { left: 0; top: 48px; } }

/* ============================================================
   v25：素材准备 AI 商品主图
   ============================================================ */
.ig-expand-row > td { padding: 0 !important; background: var(--surface-2) !important; }
.ig-row-panel { padding: 12px 14px 14px; border-bottom: 2px solid var(--primary-100); }
.ig-row-head { display: flex; align-items: center; justify-content: space-between; gap: 12px; margin-bottom: 12px; }
.ig-row-head > div { display: flex; align-items: baseline; gap: 10px; }
.ig-row-head strong { font-size: 13px; color: var(--ink-900); }
.ig-row-head span:not(.tag) { color: var(--ink-600); font-size: 12px; }
.ig-row-fields {
  display: grid; grid-template-columns: minmax(280px, 1.5fr) minmax(150px, .8fr) minmax(240px, 1.25fr) minmax(150px, .8fr) 90px 90px auto;
  gap: 12px; align-items: end;
}
.ig-upload-field, .ig-prompt-field, .ig-option-field { min-width: 0; }
.ig-upload-field > label, .ig-prompt-field > label, .ig-option-field > label {
  display: block; margin-bottom: 5px; color: var(--ink-600); font-size: 12px; font-weight: 600;
}
.ig-upload-field > div:last-child { display: flex; gap: 5px; flex-wrap: wrap; }
.ig-upload-preview {
  display: flex; align-items: center; flex-wrap: wrap; gap: 6px; min-height: 58px; margin-bottom: 7px;
  color: var(--ink-400); font-size: 12px;
}
#ig-product-preview { display: block; max-height: 360px; overflow-y: auto; }
.ig-product-builder { width: 100%; color: var(--ink-700); }
.ig-product-section-head { display: flex; align-items: center; justify-content: space-between; gap: 8px; margin-bottom: 5px; }
.ig-product-section-head strong { color: var(--ink-700); font-size: 11px; }
.ig-product-section-head span { color: var(--ink-400); font-size: 10px; }
.ig-product-pool { display: grid; grid-template-columns: repeat(auto-fill, minmax(64px, 1fr)); gap: 5px; }
.ig-product-pool-entry { position: relative; display: block; min-width: 0; }
.ig-product-pool-item {
  position: relative; width: 100%; min-width: 0; height: 74px; padding: 3px; overflow: hidden; border: 1px solid #d9e1ec; border-radius: 6px;
  background: #fff; color: var(--ink-600); cursor: grab; touch-action: none;
}
.ig-product-pool-item:active { cursor: grabbing; }
.ig-product-pool-item.dragging { opacity: .48; }
.ig-product-pool-item img { display: block; width: 100%; height: 48px; border-radius: 4px; object-fit: cover; }
.ig-product-pool-item span { display: block; margin-top: 3px; overflow: hidden; font-size: 10px; text-overflow: ellipsis; white-space: nowrap; }
.ig-product-pool-item b {
  position: absolute; top: 5px; right: 5px; display: none; align-items: center; justify-content: center;
  width: 18px; height: 18px; border-radius: 50%; background: var(--primary-600); color: #fff; font-size: 11px;
}
.ig-product-pool-item:hover { border-color: var(--primary-300); }
.ig-product-pool-item.selected { border-color: var(--primary-500); background: var(--primary-50); box-shadow: 0 0 0 2px rgba(79, 124, 255, .1); }
.ig-product-pool-item.selected b { display: inline-flex; }
.ig-product-pool-remove { position: absolute; top: 2px; left: 2px; width: 18px; height: 18px; padding: 0; border: 1px solid #fff; border-radius: 4px; background: rgba(31, 41, 55, .76); color: #fff; font-size: 14px; line-height: 14px; cursor: pointer; }
.ig-product-pool-remove:hover { background: var(--danger); }
.ig-product-group-actions { display: flex; align-items: center; gap: 5px; min-height: 28px; margin: 6px 0 9px; flex-wrap: wrap; }
.ig-product-group-actions > span { margin-left: auto; color: var(--ink-400); font-size: 10px; }
.ig-product-combinations { display: flex; flex-direction: column; gap: 5px; }
.ig-product-combinations.drag-target { outline: 2px dashed var(--primary-400); outline-offset: 2px; }
.ig-product-combinations-empty, .ig-product-empty { display: block; padding: 7px; border: 1px dashed var(--line); border-radius: 6px; color: var(--ink-400); font-size: 11px; text-align: center; }
.ig-product-new-drop {
  display: flex; align-items: center; justify-content: center; width: 100%; min-height: 36px;
  border: 1px dashed #cbd5e1; border-radius: 6px; background: #f8fafc; color: var(--ink-400); cursor: pointer;
}
.ig-product-new-drop > span { font-size: 19px; line-height: 1; pointer-events: none; }
.ig-product-new-drop:hover, .ig-product-new-drop:focus-visible { border-color: var(--primary-500); background: var(--primary-50); color: var(--primary-700); }
.ig-product-new-drop.drag-target { border-color: var(--primary-500); background: var(--primary-50); color: var(--primary-700); }
.ig-product-group { padding: 6px; border: 1px solid #d9e1ec; border-radius: 6px; background: #fbfcfe; }
.ig-product-group.editing { border-color: var(--primary-400); background: var(--primary-50); }
.ig-product-group.drag-target { border-color: var(--primary-500); background: var(--primary-50); }
.ig-product-group-head { display: flex; align-items: center; gap: 6px; min-height: 24px; }
.ig-product-group-head strong { min-width: 0; overflow: hidden; color: var(--ink-700); font-size: 11px; text-overflow: ellipsis; white-space: nowrap; }
.ig-product-group-head > span { color: var(--ink-400); font-size: 10px; }
.ig-product-group-head > div { display: flex; align-items: center; gap: 3px; margin-left: auto; }
.ig-product-group-delete { width: 24px; height: 24px; padding: 0; border: 0; border-radius: 4px; background: transparent; color: var(--ink-400); font-size: 17px; line-height: 1; cursor: pointer; }
.ig-product-group-delete:hover { background: #fef2f2; color: var(--danger); }
.ig-product-group-images { display: flex; gap: 4px; margin-top: 4px; overflow-x: auto; }
.ig-product-group-image {
  position: relative; display: block; flex: 0 0 42px; width: 42px; height: 42px; padding: 0;
  border: 1px solid var(--line); border-radius: 4px; background: #fff; cursor: grab; touch-action: none;
}
.ig-product-group-image:active { cursor: grabbing; }
.ig-product-group-image img { display: block; width: 100%; height: 100%; border-radius: 3px; object-fit: cover; pointer-events: none; }
.ig-product-group-image b {
  position: absolute; left: 2px; top: 2px; min-width: 15px; height: 15px; padding: 0 2px;
  border-radius: 3px; background: rgba(22, 32, 46, .78); color: #fff; font-size: 10px; line-height: 15px; pointer-events: none;
}
.ig-product-group-image.dragging { opacity: .48; }
.ig-product-group-image.drag-target { border-color: var(--primary-600); box-shadow: 0 0 0 2px var(--primary-300); }
.ig-product-group-image:focus-visible { outline: 2px solid var(--primary-600); outline-offset: 2px; }
.ig-draft-image {
  position: relative; display: inline-flex; align-items: center; gap: 7px; height: 56px; max-width: 180px;
  padding: 3px; border: 1px solid var(--line); border-radius: 6px; background: #fff; cursor: pointer; flex: none;
}
.ig-draft-image img { width: 48px; height: 48px; border-radius: 4px; object-fit: cover; }
.ig-draft-image span { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.ig-draft-image b {
  position: absolute; top: -6px; right: -5px; width: 16px; height: 16px; border-radius: 50%;
  background: #fff; color: var(--danger); font-size: 11px; line-height: 16px;
}
.ig-prompt-preview {
  height: 156px; padding: 9px 10px; overflow-y: auto; border: 1px solid #d9e1ec; border-radius: 8px;
  background: #fbfcfe; color: var(--ink-400); font-size: 12px; line-height: 1.45; box-shadow: inset 0 1px 2px rgba(22, 32, 46, .04);
}
.ig-prompt-group + .ig-prompt-group { margin-top: 8px; padding-top: 8px; border-top: 1px dashed var(--line); }
.ig-prompt-group-head { display: flex; align-items: center; justify-content: space-between; gap: 8px; min-height: 24px; }
.ig-prompt-group strong { min-width: 0; overflow: hidden; color: var(--ink-900); text-overflow: ellipsis; white-space: nowrap; }
.ig-prompt-expand { display: inline-flex; align-items: center; justify-content: center; flex: none; width: 26px; height: 26px; padding: 0; border: 1px solid transparent; border-radius: 5px; background: transparent; color: var(--ink-500); font-size: 17px; line-height: 1; cursor: pointer; }
.ig-prompt-expand:hover { border-color: var(--primary-200); background: var(--primary-50); color: var(--primary-700); }
.ig-prompt-expand:focus-visible { outline: 2px solid var(--primary-500); outline-offset: 1px; }
.ig-prompt-group p { margin: 3px 0 0; color: var(--ink-600); white-space: pre-wrap; overflow-wrap: anywhere; }
.ig-prompt-group p span { margin-right: 6px; color: var(--primary-700); font-weight: 600; }
.ig-prompt-group p.missing { color: var(--danger); }
.ig-prompt-preview > p { margin: 0 0 5px; color: var(--ink-600); white-space: pre-wrap; overflow-wrap: anywhere; }
.ig-prompt-preview > p span { margin-right: 6px; color: var(--primary-700); font-weight: 600; }
.ig-prompt-controls { display: flex; align-items: center; gap: 6px; min-height: 24px; margin: 3px 0 5px; }
.ig-prompt-select { width: 100%; min-width: 0; }
.ig-prompt-preview textarea { display: block; width: 100%; min-height: 92px; padding: 9px 10px; resize: vertical; border: 1px solid #cfd8e5; border-radius: 7px; background: #fff; color: var(--ink-800); font-family: inherit; font-size: 12px; line-height: 1.55; box-sizing: border-box; }
.ig-prompt-preview textarea:focus { outline: none; border-color: var(--primary-500); box-shadow: 0 0 0 3px rgba(79, 124, 255, .12); }
.ig-prompt-preview textarea::placeholder { color: var(--ink-400); }
.ig-option-field select { width: 100%; }
.ig-generate-field { display: flex; flex-direction: column; align-items: stretch; gap: 5px; padding-bottom: 1px; }
.ig-generate-field > span { max-width: 150px; color: var(--ink-400); font-size: 11px; line-height: 1.35; }
.ig-generate-field > span.error { color: var(--danger); }
.ig-generate-field .btn { min-width: 100px; }
.ig-empty { padding: 14px 0 2px; color: var(--ink-400); font-size: 12px; text-align: center; }
.ig-prompt-editor-mask {
  position: fixed; inset: 0; z-index: 2300; display: flex; align-items: center; justify-content: center;
  padding: 24px; background: rgba(22, 32, 46, .5);
}
.ig-prompt-editor-modal {
  display: flex; flex-direction: column; width: min(860px, 94vw); max-height: min(760px, 90vh);
  overflow: hidden; border: 1px solid #d9e1ec; border-radius: 10px; background: #fff; box-shadow: 0 18px 48px rgba(22, 32, 46, .2);
}
.ig-prompt-editor-head { display: flex; align-items: center; justify-content: space-between; gap: 16px; padding: 16px 20px; border-bottom: 1px solid var(--line); }
.ig-prompt-editor-kicker { display: block; margin-bottom: 3px; color: var(--primary-700); font-size: 11px; font-weight: 600; letter-spacing: .02em; }
.ig-prompt-editor-head h3 { margin: 0; overflow: hidden; color: var(--ink-900); font-size: 16px; text-overflow: ellipsis; white-space: nowrap; }
.ig-prompt-editor-body { min-height: 0; padding: 18px 20px 14px; overflow-y: auto; }
.ig-prompt-editor-label { display: block; margin: 0 0 6px; color: var(--ink-700); font-size: 12px; font-weight: 600; }
.ig-prompt-editor-select { width: 100%; margin-bottom: 15px; }
.ig-prompt-editor-textarea { display: block; width: 100%; min-height: min(52vh, 420px); padding: 13px 14px; resize: vertical; border: 1px solid #c7d3e2; border-radius: 8px; background: #fbfcfe; color: var(--ink-900); font-family: inherit; font-size: 14px; line-height: 1.7; box-sizing: border-box; }
.ig-prompt-editor-textarea:focus { outline: none; border-color: var(--primary-500); background: #fff; box-shadow: 0 0 0 3px rgba(79, 124, 255, .13); }
.ig-prompt-editor-textarea::placeholder { color: var(--ink-400); }
.ig-prompt-editor-meta { display: flex; align-items: center; justify-content: space-between; gap: 12px; margin-top: 8px; color: var(--ink-400); font-size: 11px; }
.ig-prompt-editor-foot { display: flex; align-items: center; justify-content: flex-end; gap: 8px; padding: 12px 20px; border-top: 1px solid var(--line); background: var(--surface-2); }
.material-linked-images { display: flex; flex-direction: column; gap: 5px; max-width: 230px; }
.material-image-group > span { display: block; margin-bottom: 3px; color: var(--ink-400); font-size: 10px; }
.material-image-group > div { display: flex; gap: 4px; flex-wrap: wrap; }
.material-image-thumb { position: relative; display: block; width: 44px; height: 44px; }
.material-image-thumb img { width: 44px; height: 44px; object-fit: cover; border: 1px solid var(--line); border-radius: 5px; cursor: zoom-in; }
.material-image-thumb.generated img { border-color: var(--primary-400); }
.material-image-thumb b {
  position: absolute; right: 2px; bottom: 2px; padding: 1px 3px; border-radius: 3px;
  background: rgba(17, 24, 39, .78); color: #fff; font-size: 8px; line-height: 1.2;
}
.material-image-thumb button {
  position: absolute; top: -5px; right: -5px; z-index: 1; width: 16px; height: 16px; padding: 0;
  border: 1px solid #fff; border-radius: 50%; background: var(--danger); color: #fff;
  font: 12px/13px Arial, sans-serif; cursor: pointer;
}
.ig-service-error {
  margin: 10px 12px; padding: 9px 11px; border: 1px solid #fecaca; border-radius: 6px;
  background: #fef2f2; color: #b91c1c; font-size: 12px;
}
.ig-job-list { margin-top: 12px; padding: 0 10px 8px; border: 1px solid var(--line); border-radius: 6px; background: #fff; }
.ig-job {
  display: grid; grid-template-columns: minmax(175px, .7fr) minmax(220px, 1fr) minmax(220px, 1.15fr) auto; align-items: center; gap: 14px;
  min-height: 76px; padding: 10px 0; border-bottom: 1px solid var(--line);
}
.ig-job:last-child { border-bottom: 0; padding-bottom: 0; }
.ig-job-main { min-width: 0; }
.ig-job-main > div:first-child { display: flex; align-items: center; gap: 8px; }
.ig-job-main p { margin-top: 4px; color: var(--ink-600); font-size: 12px; }
.ig-job-main .ig-upstream-task { overflow-wrap: anywhere; color: var(--ink-500); }
.ig-upstream-task code { user-select: all; font-size: 11px; letter-spacing: 0; }
.ig-job-error { margin-top: 5px; color: var(--danger); font-size: 12px; }
.ig-job-error summary { width: max-content; max-width: 100%; cursor: pointer; }
.ig-job-error pre {
  max-width: 100%; max-height: 150px; margin: 6px 0 0; padding: 8px; overflow: auto;
  border: 1px solid #fecaca; border-radius: 5px; background: #fff7f7;
  color: #991b1b; font: 11px/1.5 ui-monospace, SFMono-Regular, Consolas, monospace;
  letter-spacing: 0; overflow-wrap: anywhere; white-space: pre-wrap;
}
.ig-job-sources { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px; min-width: 0; }
.ig-job-source-group { min-width: 0; }
.ig-job-source-group > span { display: block; margin-bottom: 5px; color: var(--ink-500); font-size: 11px; }
.ig-job-source-images { display: flex; gap: 5px; min-width: 0; overflow-x: auto; padding-bottom: 2px; }
.ig-job-source-image {
  flex: 0 0 52px; width: 52px; padding: 0; overflow: hidden; border: 0; background: transparent;
  color: var(--ink-600); font: inherit; text-align: center; cursor: zoom-in;
}
.ig-job-source-image img { display: block; width: 48px; height: 48px; margin: 0 auto; object-fit: cover; border: 1px solid var(--line); border-radius: 5px; }
.ig-job-source-image b { display: block; margin-top: 3px; overflow: hidden; color: inherit; font-size: 10px; font-weight: 500; text-overflow: ellipsis; white-space: nowrap; }
.ig-job-source-image:hover img { border-color: var(--primary-400); }
.ig-job-source-missing { align-self: center; color: var(--danger); font-size: 11px; white-space: nowrap; }
.ig-job-results { display: flex; align-items: center; gap: 7px; flex-wrap: wrap; }
.ig-job-results label { position: relative; display: block; width: 64px; height: 64px; cursor: pointer; }
.ig-job-results input { position: absolute; top: 3px; left: 3px; z-index: 1; }
.ig-job-results img { width: 64px; height: 64px; object-fit: cover; border: 1px solid var(--line); border-radius: 5px; }
.ig-result-groups { display: flex; flex-direction: column; gap: 8px; min-width: 0; padding: 8px 0; }
.ig-result-group { display: grid; grid-template-columns: minmax(120px, .7fr) minmax(140px, 1.3fr); align-items: center; gap: 10px; }
.ig-result-pair { min-width: 0; color: var(--ink-600); font-size: 11px; }
.ig-result-pair > span { display: block; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.ig-result-pair > small { display: flex; align-items: center; gap: 6px; margin-top: 5px; color: var(--ink-400); font-size: 10px; }
.ig-result-pair > small .tag { padding: 1px 5px; font-size: 10px; }
.ig-pair-error { margin-top: 5px; color: var(--danger); }
.ig-pair-error summary { cursor: pointer; }
.ig-pair-error pre {
  max-height: 100px; margin: 5px 0 0; padding: 6px; overflow: auto; border-radius: 4px;
  background: #fff7f7; color: #991b1b; font: 10px/1.45 ui-monospace, SFMono-Regular, Consolas, monospace;
  overflow-wrap: anywhere; white-space: pre-wrap;
}
.ig-result-placeholder { color: var(--ink-400); font-size: 12px; }
.ig-job-actions { display: flex; align-items: center; gap: 6px; flex-wrap: wrap; justify-content: flex-end; }
.same-style-workspace .ig-standalone-panel {
  min-height: 100%; padding: 22px; border: 0; background: #f5f7fb;
}
.same-style-workspace .ig-standalone-layout {
  display: grid; grid-template-columns: minmax(0, 1.25fr) minmax(330px, .75fr);
  gap: 16px; min-width: 0;
}
.same-style-workspace .ig-workspace-card {
  min-width: 0; overflow: hidden; border: 1px solid #dfe5ee; border-radius: 12px;
  background: #fff; box-shadow: 0 5px 18px rgba(31, 47, 70, .06);
}
.same-style-workspace .ig-workspace-card-head {
  display: flex; align-items: flex-start; justify-content: space-between; gap: 14px;
  padding: 16px 18px 13px; border-bottom: 1px solid #edf0f5;
}
.same-style-workspace .ig-workspace-card-head > div { min-width: 0; }
.same-style-workspace .ig-workspace-card-head h4 { margin: 2px 0 4px; color: var(--ink-900); font-size: 15px; }
.same-style-workspace .ig-workspace-card-head p { margin: 0; color: var(--ink-500); font-size: 12px; line-height: 1.45; }
.same-style-workspace .ig-workspace-kicker { color: var(--primary-600); font-size: 10px; font-weight: 700; letter-spacing: .08em; }
.same-style-workspace .ig-workspace-card-head .tag { flex: none; margin-top: 2px; }
.same-style-workspace .ig-reference-card { grid-column: 1; }
.same-style-workspace .ig-settings-card { grid-column: 2; }
.same-style-workspace .ig-product-card, .same-style-workspace .ig-jobs-card { grid-column: 1 / -1; }
.same-style-workspace .ig-reference-workspace { display: grid; grid-template-columns: minmax(170px, .55fr) minmax(0, 1.45fr); gap: 16px; padding: 16px 18px 18px; }
.same-style-workspace .ig-reference-workspace .ig-upload-field,
.same-style-workspace .ig-reference-workspace .ig-prompt-field { min-width: 0; }
.same-style-workspace .ig-reference-workspace .ig-upload-preview { min-height: 150px; margin: 0; padding: 8px; border: 1px dashed #cfd8e5; border-radius: 9px; background: #fafbfd; }
.same-style-workspace .ig-reference-workspace .ig-draft-image { width: 100%; max-width: none; height: 134px; justify-content: flex-start; flex-direction: column; gap: 5px; padding: 7px; }
.same-style-workspace .ig-reference-workspace .ig-draft-image img { width: 100%; height: 96px; }
.same-style-workspace .ig-reference-workspace .ig-draft-image span { max-width: 100%; font-size: 11px; }
.same-style-workspace .ig-reference-workspace .ig-draft-image b { top: 5px; right: 5px; width: 19px; height: 19px; border-radius: 5px; background: var(--primary-600); color: #fff; line-height: 19px; text-align: center; }
.same-style-workspace .ig-reference-workspace .ig-prompt-preview { height: 206px; }
.same-style-workspace .ig-product-card .ig-workspace-card-head { align-items: center; }
.same-style-workspace .ig-product-actions { display: flex; flex: none; gap: 7px; flex-wrap: wrap; justify-content: flex-end; }
.same-style-workspace .ig-product-workspace { min-height: 210px; margin: 0; padding: 16px 18px 18px; display: block; }
.same-style-workspace .ig-product-workspace .ig-product-builder { max-width: none; }
.same-style-workspace #ig-product-preview { max-height: none; }
.same-style-workspace .ig-settings-card { display: flex; flex-direction: column; }
.same-style-workspace .ig-settings-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; padding: 18px; }
.same-style-workspace .ig-settings-grid .ig-model-field { grid-column: 1 / -1; }
.same-style-workspace .ig-settings-grid label { display: block; margin-bottom: 6px; color: var(--ink-600); font-size: 12px; font-weight: 600; }
.same-style-workspace .ig-settings-grid select { width: 100%; min-height: 36px; }
.same-style-workspace .ig-submit-bar { display: flex; align-items: center; justify-content: space-between; gap: 12px; margin-top: auto; padding: 13px 18px; border-top: 1px solid #edf0f5; background: #fbfcfe; }
.same-style-workspace .ig-submit-bar > span { min-width: 0; color: var(--ink-500); font-size: 11px; line-height: 1.4; }
.same-style-workspace .ig-submit-bar > span.error { color: var(--danger); }
.same-style-workspace .ig-submit-bar .btn { flex: none; min-width: 116px; min-height: 38px; }
.same-style-workspace .ig-jobs-card .ig-workspace-card-head { padding-bottom: 12px; }
.same-style-workspace .ig-jobs-card #ig-jobs { padding: 0 18px 18px; }
.same-style-workspace .ig-jobs-card .ig-job-list { margin-top: 14px; }
.ig-library-modal-mask {
  position: fixed; inset: 0; z-index: 2200; display: flex; align-items: center; justify-content: center;
  padding: 24px; background: rgba(22, 32, 46, .48);
}
.ig-library-modal {
  display: flex; flex-direction: column; width: min(1120px, 96vw); max-height: min(820px, 92vh);
  overflow: hidden; border: 1px solid var(--line); border-radius: 8px; background: #fff; box-shadow: var(--shadow-md);
}
.ig-library-modal-head, .ig-library-modal-foot {
  display: flex; align-items: center; justify-content: space-between; gap: 16px; flex: none;
  padding: 14px 18px; border-bottom: 1px solid var(--line);
}
.ig-library-modal-head h3 { margin: 0; color: var(--ink-900); font-size: 16px; }
.ig-library-modal-head span { color: var(--ink-400); font-size: 12px; }
.ig-library-modal-body { min-height: 0; padding: 16px 18px; overflow-y: auto; }
.ig-library-filters {
  display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 0 12px;
  padding-bottom: 4px; border-bottom: 1px solid var(--line);
}
.ig-library-filters .field { min-width: 0; margin-bottom: 12px; }
.ig-library-filters input, .ig-library-filters select { width: 100%; }
.ig-library-filter-actions { display: flex; align-items: end; gap: 8px; padding-bottom: 12px; }
.ig-library-summary { display: flex; align-items: center; gap: 10px; min-height: 36px; padding: 12px 0 8px; color: var(--ink-600); font-size: 12px; }
.ig-library-results { min-height: 260px; }
.ig-library-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(165px, 1fr)); gap: 12px; }
.ig-product-library-grid { grid-template-columns: repeat(auto-fill, minmax(180px, 1fr)); }
.ig-product-library-grid .info > span, .ig-product-library-grid .info > small { display: block; margin-top: 5px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.ig-product-library-grid .info > span { color: var(--ink-600); font-size: 12px; }
.ig-product-library-grid .info > small { color: var(--ink-400); font-size: 11px; }
.ig-product-card-title { display: flex; align-items: center; justify-content: space-between; gap: 6px; min-width: 0; }
.ig-product-card-title strong { overflow: hidden; color: var(--ink-900); text-overflow: ellipsis; white-space: nowrap; }
.ig-product-library-detail { display: flex; flex-direction: column; gap: 22px; }
.ig-product-library-images { display: grid; grid-template-columns: repeat(auto-fill, minmax(130px, 1fr)); gap: 10px; min-width: 0; }
.ig-library-card { overflow: hidden; border: 2px solid transparent; border-radius: 6px; background: var(--surface-2); }
.ig-library-card.picked { border-color: var(--primary-600); }
.ig-library-card.disabled { opacity: .5; }
.ig-library-image { display: block; width: 100%; aspect-ratio: 1; padding: 0; border: 0; background: #eef1f6; cursor: zoom-in; }
.ig-library-image img { display: block; width: 100%; height: 100%; object-fit: contain; background: #fff; }
.ig-library-card-info { padding: 9px; }
.ig-library-card-info strong { display: block; margin-bottom: 6px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-size: 13px; }
.ig-library-card-info .tag { margin: 0 4px 4px 0; }
.ig-library-card-info label { display: flex; align-items: center; gap: 6px; margin-top: 5px; color: var(--primary-700); font-size: 12px; cursor: pointer; }
.ig-library-card.disabled .ig-library-card-info label { color: var(--danger); cursor: not-allowed; }
.ig-library-modal-foot { border-top: 1px solid var(--line); border-bottom: 0; background: var(--surface-2); color: var(--ink-600); font-size: 12px; }
.ig-library-modal-foot > div { display: flex; gap: 8px; }
@media (max-width: 1350px) {
  .ig-row-fields { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .ig-prompt-field { grid-column: 1 / -1; }
}
@media (max-width: 900px) {
  .ig-row-fields { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .ig-prompt-field { grid-column: 1 / -1; }
  .ig-job { grid-template-columns: minmax(130px, .7fr) minmax(200px, 1.3fr); }
  .ig-job-actions { grid-column: 1 / -1; justify-content: flex-start; }
  .ig-result-group { grid-template-columns: 1fr; gap: 5px; }
  .ig-library-filters { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .same-style-workspace .ig-standalone-layout { grid-template-columns: 1fr; }
  .same-style-workspace .ig-reference-card, .same-style-workspace .ig-settings-card,
  .same-style-workspace .ig-product-card, .same-style-workspace .ig-jobs-card { grid-column: 1; }
}
@media (max-width: 620px) {
  .ig-row-fields { grid-template-columns: 1fr; }
  .ig-prompt-field { grid-column: auto; }
  .ig-job { grid-template-columns: 1fr; }
  .ig-job-actions { grid-column: auto; }
  .ig-job-sources { grid-template-columns: 1fr 1fr; }
  .ig-library-modal-mask { padding: 0; }
  .same-style-workspace-mask { right: auto; width: 100vw; height: 100vh; }
  .ig-library-modal { width: 100vw; max-height: 100vh; height: 100vh; border: 0; border-radius: 0; }
  .ig-library-modal.same-style-workspace { width: 100vw; max-height: 100vh; }
  .same-style-workspace .ig-standalone-panel { padding: 14px; }
  .same-style-workspace .ig-standalone-layout { gap: 12px; }
  .same-style-workspace .ig-workspace-card-head { padding: 14px 14px 12px; }
  .same-style-workspace .ig-workspace-card-head p { max-width: 235px; }
  .same-style-workspace .ig-reference-workspace { grid-template-columns: 1fr; gap: 12px; padding: 14px; }
  .same-style-workspace .ig-reference-workspace .ig-upload-preview { min-height: 128px; }
  .same-style-workspace .ig-reference-workspace .ig-draft-image { height: 112px; flex-direction: row; }
  .same-style-workspace .ig-reference-workspace .ig-draft-image img { width: 88px; height: 96px; }
  .same-style-workspace .ig-reference-workspace .ig-prompt-preview { height: 210px; }
  .same-style-workspace .ig-product-card .ig-workspace-card-head { align-items: flex-start; flex-direction: column; }
  .same-style-workspace .ig-product-actions { width: 100%; justify-content: flex-start; }
  .same-style-workspace .ig-product-workspace { min-height: 190px; padding: 14px; }
  .same-style-workspace .ig-settings-grid { grid-template-columns: 1fr; padding: 14px; }
  .same-style-workspace .ig-settings-grid .ig-model-field { grid-column: auto; }
  .same-style-workspace .ig-submit-bar { align-items: stretch; flex-direction: column; padding: 12px 14px 14px; }
  .same-style-workspace .ig-submit-bar .btn { width: 100%; }
  .same-style-workspace .ig-jobs-card #ig-jobs { padding: 0 14px 14px; }
  .ig-library-filters { grid-template-columns: 1fr; }
  .ig-library-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .ig-product-library-images { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .ig-library-modal-foot { align-items: flex-start; flex-direction: column; }
  .ig-library-modal-foot > div { width: 100%; }
  .ig-library-modal-foot .btn { flex: 1; }
  .ig-prompt-editor-mask { align-items: flex-end; padding: 0; }
  .ig-prompt-editor-modal { width: 100vw; max-height: 94vh; border-radius: 10px 10px 0 0; }
  .ig-prompt-editor-body { padding: 16px; }
  .ig-prompt-editor-textarea { min-height: 48vh; }
  .ig-prompt-editor-foot { padding: 12px 16px; }
  .ig-prompt-editor-foot .btn { min-width: 96px; }
}

/* ============================================================
   v15：卡片式大图浮层（约 400×400，下载 / 新窗口 / Esc 关闭）
   ============================================================ */
#lightbox { position: fixed; inset: 0; background: rgba(0, 0, 0, .72); display: flex; align-items: center; justify-content: center; z-index: 3000; padding: 24px; }
#lightbox.hidden { display: none; }
#lightbox .lb-box { position: relative; background: var(--card, #fff); border-radius: var(--radius, 12px); box-shadow: 0 12px 48px rgba(0, 0, 0, .4); width: min(448px, 92vw); overflow: hidden; }
#lightbox .lb-main { min-width: 0; }
#lightbox.has-panel .lb-box { width: min(920px, 96vw); display: flex; }
#lightbox.has-panel .lb-main { flex: 1; }
#lightbox .lb-head { display: flex; align-items: center; gap: 8px; padding: 10px 52px 10px 14px; border-bottom: 1px solid var(--line); min-width: 0; }
#lightbox .lb-no { font-weight: 600; font-size: 14px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
#lightbox .lb-tags { font-size: 12px; color: var(--ink-600); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; min-width: 0; flex: 1; }
#lightbox .lb-x { position: absolute; top: 8px; right: 10px; z-index: 2; width: 32px; height: 32px; border: 1px solid var(--line); border-radius: 50%; background: var(--card, #fff); color: var(--ink-600); cursor: pointer; font-size: 17px; line-height: 1; box-shadow: 0 1px 4px rgba(0, 0, 0, .12); }
#lightbox .lb-x:hover { color: var(--ink-900); background: var(--surface-2); border-color: var(--ink-400); }
#lightbox .lb-img { background: var(--surface-2); display: flex; align-items: center; justify-content: center; cursor: zoom-out; min-height: 80px; }
#lightbox .lb-img img { max-width: 400px; max-height: 400px; width: auto; height: auto; display: block; }
@media (max-width: 768px) { #lightbox .lb-img img { max-width: 84vw; max-height: 70vh; } }
#lightbox .lb-foot { padding: 10px 14px; display: flex; align-items: center; gap: 8px; border-top: 1px solid var(--line); }
#lightbox .lb-foot a { text-decoration: none; display: inline-flex; align-items: center; }
#lightbox .lb-meta { margin-left: auto; font-size: 12px; color: var(--ink-400); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }

/* v22 提示词：lightbox 右侧面板 + 录入表单提示词行 + 卡片角标 */
#lightbox .lb-panel { display: none; flex-direction: column; width: 360px; border-left: 1px solid var(--line); background: var(--surface-2); overflow-y: auto; max-height: 560px; }
#lightbox.has-panel .lb-panel { display: flex; }
#lightbox .lb-panel-head { min-height: 52px; padding: 14px 48px 12px 16px; border-bottom: 1px solid var(--line); font-size: 14px; display: flex; align-items: baseline; gap: 7px; background: var(--card); }
#lightbox .lb-panel-head strong { color: var(--ink-900); }
#lightbox .lb-panel-sub { font-size: 12px; color: var(--ink-400); font-weight: 400; }
#lightbox #lb-prompts { padding: 14px; }
#lightbox .lb-panel .prompt-del { min-width: 44px; font-size: 0; color: var(--danger); }
#lightbox .lb-panel .prompt-del::after { content: '删除'; font-size: 12px; }
.prompt-loading { font-size: 12px; color: var(--ink-400); padding: 4px 0; }
.prompt-view-list { display: flex; flex-direction: column; gap: 10px; }
.prompt-view-item { padding: 12px; border: 1px solid var(--line); border-radius: 6px; background: var(--card); }
.prompt-view-item > div { display: flex; align-items: center; gap: 8px; }
.prompt-view-item > div span { display: inline-flex; align-items: center; justify-content: center; width: 24px; height: 24px; border-radius: 4px; background: var(--primary-50); color: var(--primary-700); font-size: 10px; font-variant-numeric: tabular-nums; }
.prompt-view-item > div strong { min-width: 0; overflow: hidden; color: var(--ink-900); font-size: 12px; text-overflow: ellipsis; white-space: nowrap; }
.prompt-view-item p { margin: 9px 0 0; color: var(--ink-600); font-size: 13px; line-height: 1.65; overflow-wrap: anywhere; white-space: pre-wrap; }
.prompt-row { display: flex; align-items: flex-start; gap: 6px; margin-bottom: 8px; }
.prompt-row .prompt-label { flex: 0 0 88px; width: 88px; min-width: 0; height: 34px; padding: 5px 7px; font-family: inherit; font-size: 12px; font-weight: 600; line-height: 1.2; color: var(--ink-700); background: var(--card); border: 1px solid var(--line); border-radius: 6px; }
.prompt-row .prompt-label:focus { outline: none; border-color: var(--primary, #4f7cff); }
.prompt-row .prompt-label[readonly] { background: var(--surface-2); color: var(--ink-600); }
.prompt-row .prompt-ta { flex: 1; min-height: 42px; resize: vertical; font-size: 13px; font-family: inherit; line-height: 1.5; padding: 6px 8px; border: 1px solid var(--line); border-radius: 8px; background: var(--card); color: var(--ink-900); }
.prompt-row .prompt-ta:focus { outline: none; border-color: var(--primary, #4f7cff); }
.prompt-row .prompt-ta[readonly] { background: var(--surface-2); color: var(--ink-600); }
.prompt-row .btn { flex: none; }
.prompt-row .prompt-expand { width: 34px; min-width: 34px; padding: 0; font-size: 15px; line-height: 1; }
.prompt-zoom-mask { position: fixed; inset: 0; z-index: 230; display: flex; align-items: center; justify-content: center; padding: 18px; background: rgba(15, 23, 42, .45); }
.prompt-zoom-modal { width: min(860px, 100%); max-height: min(760px, calc(100vh - 36px)); display: flex; flex-direction: column; overflow: hidden; border-radius: 10px; background: #fff; box-shadow: var(--shadow-md); }
.prompt-zoom-head { display: flex; align-items: center; justify-content: space-between; gap: 16px; padding: 15px 18px; border-bottom: 1px solid var(--line); }
.prompt-zoom-head span { display: block; margin-bottom: 2px; color: var(--primary-700); font-size: 11px; font-weight: 600; }
.prompt-zoom-head h3 { margin: 0; overflow: hidden; color: var(--ink-900); font-size: 15px; text-overflow: ellipsis; white-space: nowrap; }
.prompt-zoom-body { min-height: 0; padding: 16px 18px 14px; overflow-y: auto; }
.prompt-zoom-textarea { display: block; width: 100%; min-height: min(56vh, 460px); padding: 13px 14px; resize: vertical; border: 1px solid #c7d3e2; border-radius: 8px; background: #fbfcfe; color: var(--ink-900); font-family: inherit; font-size: 14px; line-height: 1.7; box-sizing: border-box; }
.prompt-zoom-textarea:focus { outline: none; border-color: var(--primary-500); background: #fff; box-shadow: 0 0 0 3px rgba(79, 124, 255, .13); }
.prompt-zoom-meta { display: flex; align-items: center; justify-content: space-between; gap: 12px; margin-top: 8px; color: var(--ink-400); font-size: 11px; }
.prompt-zoom-foot { display: flex; align-items: center; justify-content: flex-end; gap: 8px; padding: 12px 18px; border-top: 1px solid var(--line); background: var(--surface-2); }
.image-edit-prompts { margin-top: 18px; padding: 14px; border: 1px solid var(--line); border-radius: 6px; background: var(--surface-2); }
.image-edit-prompts-head { display: flex; align-items: center; justify-content: space-between; gap: 12px; margin-bottom: 12px; }
.image-edit-prompts-head > div { display: flex; align-items: baseline; gap: 8px; }
.image-edit-prompts-head strong { color: var(--ink-900); font-size: 14px; }
.image-edit-prompts-head span { color: var(--ink-400); font-size: 12px; }
.image-edit-prompts .prompt-row:last-child { margin-bottom: 0; }
.prompt-badge { position: absolute; top: 6px; right: 6px; font-size: 11px; line-height: 1; padding: 3px 6px; border-radius: 999px; background: rgba(0, 0, 0, .55); color: #fff; pointer-events: none; }
.thumb-w:has(> .library-favorite) > .prompt-badge { top: 8px; left: 8px; right: auto; }
@media (max-width: 768px) { #lightbox .lb-box, #lightbox.has-panel .lb-box { flex-direction: column; width: min(448px, 92vw); } #lightbox .lb-panel { width: auto; border-left: none; border-top: 1px solid var(--line); max-height: 220px; } .prompt-row { flex-wrap: wrap; } .prompt-row .prompt-label { flex-basis: 100%; width: 100%; } .prompt-row .prompt-ta { flex-basis: calc(100% - 86px); } .prompt-zoom-mask { align-items: flex-end; padding: 0; } .prompt-zoom-modal { width: 100vw; max-height: 94vh; border-radius: 10px 10px 0 0; } .prompt-zoom-textarea { min-height: 52vh; } .prompt-zoom-foot .btn { min-width: 96px; } }

/* ============================================================
   v14 业绩进度龙虎榜（店铺榜 + 运营榜，前3名金银铜高亮）
   ============================================================ */
.lh-podium { display: flex; gap: 12px; margin-bottom: 18px; }
.lh-pod {
  flex: 1; border-radius: 12px; padding: 16px 16px 12px; position: relative;
  border: 1px solid var(--line, #e2e8f0);
  background: linear-gradient(180deg, #ffffff, #f8fafc);
  margin-top: 10px;
}
.lh-pod .lh-medal {
  position: absolute; top: -12px; left: 14px; width: 28px; height: 28px; border-radius: 8px;
  color: #fff; font-weight: 700; font-size: 14px;
  display: flex; align-items: center; justify-content: center;
  box-shadow: 0 2px 6px rgba(0, 0, 0, .18);
}
.lh-pod.p1 .lh-medal { background: linear-gradient(135deg, #f59e0b, #d97706); }
.lh-pod.p2 .lh-medal { background: linear-gradient(135deg, #94a3b8, #64748b); }
.lh-pod.p3 .lh-medal { background: linear-gradient(135deg, #d97706, #92400e); }
.lh-pod .name { margin-top: 6px; font-weight: 700; font-size: 15px; }
.lh-pod .who { color: var(--text-light, #64748b); font-size: 12px; margin-bottom: 8px; }
.lh-pod .pct { font-size: 13px; font-weight: 700; margin-top: 2px; }
.lh-pod .pct.ok { color: var(--success, #16a34a); }
.lh-pod .pct.warn { color: var(--warning, #d97706); }
.lh-pod .pct.bad { color: var(--danger, #dc2626); }

table.lh-rank { width: 100%; border-collapse: collapse; }
table.lh-rank th {
  text-align: left; font-size: 12px; color: var(--text-light, #64748b);
  font-weight: 600; padding: 8px 10px; border-bottom: 1px solid var(--line, #e2e8f0);
  white-space: nowrap;
}
table.lh-rank td { padding: 11px 10px; border-bottom: 1px solid #f1f5f9; font-size: 13px; vertical-align: middle; }
table.lh-rank tbody tr { cursor: pointer; transition: background .15s; }
table.lh-rank tbody tr:hover td { background: #f8fafc; }
table.lh-rank-static tbody tr { cursor: default; }
.lh-rk {
  width: 34px; height: 24px; border-radius: 6px; background: #e2e8f0; color: #475569;
  font-weight: 700; font-size: 12px; display: inline-flex; align-items: center; justify-content: center;
}
table.lh-rank tr.top1 .lh-rk { background: linear-gradient(135deg, #f59e0b, #d97706); color: #fff; }
table.lh-rank tr.top2 .lh-rk { background: linear-gradient(135deg, #94a3b8, #64748b); color: #fff; }
table.lh-rank tr.top3 .lh-rk { background: linear-gradient(135deg, #d97706, #b45309); color: #fff; }
table.lh-rank tr.top1 td { background: #fffbeb; }
table.lh-rank tr.top1:hover td { background: #fef3c7; }
.lh-amt { color: var(--danger, #dc2626); font-weight: 700; white-space: nowrap; }
.lh-amt.big { font-size: 22px; font-weight: 800; }
.lh-amt.big small { font-size: 12px; color: var(--text-light, #64748b); font-weight: 400; }
.lh-bar-cell { width: 30%; min-width: 150px; }
.lh-bar { height: 8px; border-radius: 4px; background: #e2e8f0; overflow: hidden; display: inline-block; width: 55%; vertical-align: middle; }
.lh-bar i { display: block; height: 100%; border-radius: 4px; }
.lh-bar.b-ok i { background: linear-gradient(90deg, #16a34a, #4ade80); }
.lh-bar.b-mid i { background: linear-gradient(90deg, #2563eb, #60a5fa); }
.lh-bar.b-bad i { background: linear-gradient(90deg, #dc2626, #f87171); }
.lh-bar.b-none i { background: #cbd5e1; }
.lh-pctv { font-size: 12px; color: #475569; margin-left: 8px; white-space: nowrap; }
.lh-pctv.ok { color: var(--success, #16a34a); font-weight: 700; }
.lh-pctv.bad { color: var(--danger, #dc2626); font-weight: 700; }
.lh-tag { font-size: 11px; padding: 2px 8px; border-radius: 10px; font-weight: 600; white-space: nowrap; }
.lh-tag.t-ok { background: #dcfce7; color: #166534; }
.lh-tag.t-mid { background: #dbeafe; color: #1e40af; }
.lh-tag.t-bad { background: #fee2e2; color: #991b1b; }
.lh-tag.t-none { background: #f1f5f9; color: #64748b; }
.lh-legend { display: flex; gap: 16px; font-size: 12px; color: var(--text-light, #64748b); margin: 10px 0 4px; }
.lh-legend i { width: 10px; height: 10px; border-radius: 2px; display: inline-block; margin-right: 4px; vertical-align: -1px; }

.lh-unified { margin-top: 16px; }
.lh-unified-head { display: flex; align-items: center; justify-content: space-between; gap: 16px; margin-bottom: 14px; }
.lh-unified-head h3 { margin: 0; white-space: nowrap; }
.lh-toolbar { display: flex; align-items: center; justify-content: flex-end; gap: 8px; flex-wrap: wrap; }
.lh-segment { display: inline-flex; height: 34px; border: 1px solid var(--line); border-radius: 6px; overflow: hidden; background: var(--surface-2); }
.lh-segment button {
  min-width: 42px; height: 32px; padding: 0 11px; border: 0; border-right: 1px solid var(--line);
  background: transparent; color: var(--ink-600); font: inherit; font-size: 12px; cursor: pointer;
}
.lh-segment button:last-child { border-right: 0; }
.lh-segment button:hover { color: var(--primary-600); background: var(--primary-50); }
.lh-segment button.on { color: #fff; background: var(--primary-600); font-weight: 600; }
.lh-date-wrap { position: relative; }
.lh-date-btn {
  height: 34px; min-width: 142px; display: inline-flex; align-items: center; justify-content: space-between; gap: 8px;
  padding: 0 10px; border: 1px solid var(--line); border-radius: 6px; background: var(--card); color: var(--ink-900);
  font: inherit; font-size: 12px; font-variant-numeric: tabular-nums; cursor: pointer;
}
.lh-date-btn:hover { border-color: var(--primary-500); color: var(--primary-600); }
.lh-date-icon { color: var(--ink-400); font-size: 15px; }
.lh-range-meta { display: flex; align-items: center; gap: 8px 16px; flex-wrap: wrap; min-height: 32px; margin-bottom: 6px; color: var(--ink-600); font-size: 12px; }
.lh-range-meta span:first-child { color: var(--ink-900); font-weight: 600; }

.trend-card .lh-unified-head > div:first-child { min-width: 190px; }
.trend-card .lh-unified-head h3 { margin-bottom: 4px; }
.trend-card .lh-unified-head .desc { margin: 0; font-size: 12px; }
.trend-add-btn { min-width: 98px; justify-content: center; color: var(--primary-600); }
.trend-selected { display: flex; align-items: center; gap: 7px; min-height: 36px; margin-bottom: 6px; overflow-x: auto; }
.trend-selected > span { color: var(--ink-400); font-size: 12px; }
.trend-selected button {
  flex: none; padding: 5px 9px; border: 1px solid var(--primary-200); border-radius: 999px;
  background: var(--primary-50); color: var(--primary-700); font: inherit; font-size: 12px; cursor: pointer;
}
.trend-selected button:hover { border-color: var(--danger); color: var(--danger); background: #fff7f7; }
.trend-selected button span { margin-left: 4px; font-size: 14px; }
.trend-chart { width: 100%; height: 360px; }
.trend-channel-pop {
  position: absolute; z-index: 1000; top: calc(100% + 6px); right: 0; width: 340px; padding: 11px;
  border: 1px solid var(--line); border-radius: 8px; background: var(--card); color: var(--ink-900);
  box-shadow: 0 12px 30px rgba(15, 23, 42, .16);
}
.trend-channel-head, .trend-channel-foot { display: flex; align-items: center; justify-content: space-between; gap: 10px; }
.trend-channel-head span { color: var(--ink-400); font-size: 11px; }
.trend-channel-search { width: 100%; height: 32px; margin: 9px 0; font-size: 12px; }
.trend-channel-list { max-height: 260px; overflow-y: auto; border-top: 1px solid var(--line); border-bottom: 1px solid var(--line); }
.trend-channel-list label { display: grid; grid-template-columns: 18px minmax(0, 1fr) auto; align-items: center; gap: 7px; min-height: 36px; padding: 4px 3px; cursor: pointer; }
.trend-channel-list label:hover { background: var(--primary-50); }
.trend-channel-list label span { overflow: hidden; font-size: 12px; text-overflow: ellipsis; white-space: nowrap; }
.trend-channel-list label em { color: var(--ink-400); font-size: 11px; font-style: normal; font-variant-numeric: tabular-nums; }
.trend-channel-foot { padding-top: 10px; }

.lh-calendar {
  position: absolute; z-index: 1000; top: calc(100% + 6px); right: 0; width: 308px; padding: 10px;
  border: 1px solid var(--line); border-radius: 8px; background: var(--card); color: var(--ink-900);
  box-shadow: 0 12px 30px rgba(15, 23, 42, .16);
}
.lh-cal-head { height: 34px; display: grid; grid-template-columns: 34px 1fr 34px; align-items: center; margin-bottom: 6px; }
.lh-cal-head strong { text-align: center; font-size: 13px; }
.lh-cal-head button {
  width: 32px; height: 32px; border: 0; border-radius: 6px; background: transparent; color: var(--ink-600);
  font-size: 20px; line-height: 1; cursor: pointer;
}
.lh-cal-head button:hover { color: var(--primary-600); background: var(--primary-50); }
.lh-cal-weekdays, .lh-cal-week { display: grid; grid-template-columns: repeat(7, 1fr); }
.lh-cal-weekdays span { height: 28px; display: grid; place-items: center; color: var(--ink-400); font-size: 11px; }
.lh-cal-week { border-radius: 6px; transition: background .12s; }
.lh-cal-week button {
  height: 34px; border: 0; border-radius: 6px; background: transparent; color: var(--ink-900);
  font: inherit; font-size: 12px; font-variant-numeric: tabular-nums; cursor: pointer;
}
.lh-cal-week button.muted { color: var(--ink-400); }
.lh-cal-week button.today { box-shadow: inset 0 0 0 1px var(--primary-500); }
.lh-cal-week button:hover, .lh-cal-week button.selected { color: #fff; background: var(--primary-600); }
.lh-cal-week[data-week] { cursor: pointer; }
.lh-cal-week[data-week]:hover, .lh-cal-week[data-week].selected { background: var(--primary-50); box-shadow: inset 3px 0 0 var(--primary-500); }
.lh-cal-week[data-week]:hover button, .lh-cal-week[data-week].selected button { border-radius: 0; color: var(--primary-700); }
.lh-cal-week[data-week]:hover button:first-child, .lh-cal-week[data-week].selected button:first-child { border-radius: 6px 0 0 6px; }
.lh-cal-week[data-week]:hover button:last-child, .lh-cal-week[data-week].selected button:last-child { border-radius: 0 6px 6px 0; }
.lh-cal-months, .lh-cal-years { display: grid; grid-template-columns: repeat(3, 1fr); gap: 6px; }
.lh-cal-months button, .lh-cal-years button {
  height: 42px; border: 1px solid transparent; border-radius: 6px; background: var(--surface-2); color: var(--ink-700);
  font: inherit; font-size: 12px; cursor: pointer;
}
.lh-cal-months button:hover, .lh-cal-years button:hover { border-color: var(--primary-500); color: var(--primary-600); }
.lh-cal-months button.selected, .lh-cal-years button.selected { background: var(--primary-600); color: #fff; font-weight: 600; }
@media (max-width: 760px) {
  .lh-podium { flex-direction: column; }
  .lh-bar { width: 40%; }
  .lh-unified-head { align-items: flex-start; flex-direction: column; }
  .lh-toolbar { justify-content: flex-start; width: 100%; }
  .lh-date-wrap { width: 100%; }
  .lh-date-btn { width: 100%; }
  .lh-calendar { left: 0; right: auto; width: min(308px, calc(100vw - 54px)); }
  .trend-channel-pop { left: 0; right: auto; width: min(340px, calc(100vw - 54px)); }
  .trend-chart { height: 320px; }
}

/* ---------- v18：计划总结上传看板 ---------- */
.sb-head { display: flex; align-items: flex-start; justify-content: space-between; gap: 12px; }
.sb-head h3 { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; }
.sb-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 14px; margin-top: 12px; }
@media (max-width: 1200px) { .sb-grid { grid-template-columns: repeat(3, 1fr); } }
@media (max-width: 900px)  { .sb-grid { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 620px)  { .sb-grid { grid-template-columns: 1fr; } }
.sb-card { background: var(--card); border: 1px solid var(--line); border-radius: 12px; padding: 14px 16px;
  box-shadow: 0 1px 2px rgba(22,32,46,.06); cursor: pointer; transition: 150ms ease-out; position: relative; }
.sb-card:hover { border-color: var(--primary-500); box-shadow: 0 4px 12px rgba(22,32,46,.10); }
.sb-fn { font-weight: 600; font-size: 13px; margin-bottom: 8px; word-break: break-all; padding-right: 24px;
  display: flex; align-items: center; gap: 6px; flex-wrap: wrap; }
.sb-del { position: absolute; top: 10px; right: 10px; color: var(--ink-400); font-size: 13px; cursor: pointer; }
.sb-del:hover { color: var(--danger); }
.sb-meta { color: var(--ink-600); font-size: 12px; line-height: 1.9; }
.sb-meta b { color: var(--ink-900); font-weight: 600; }
.sb-chips { display: flex; gap: 4px; flex-wrap: wrap; margin: 10px 0; }
.sb-chips .c { font-size: 10px; padding: 1px 8px; border-radius: 999px; background: var(--primary-50);
  color: var(--primary-700); border: 1px solid var(--primary-100); }
.sb-chips .c.mt { background: var(--surface-2); color: var(--ink-400); border-color: var(--line); }
.sb-kpis { display: flex; gap: 16px; border-top: 1px dashed var(--line); padding-top: 10px; }
.sb-kpis .k { flex: 1; min-width: 0; }
.sb-kpis .k .v { font-size: 18px; font-weight: 600; font-variant-numeric: tabular-nums; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.sb-kpis .k .v.green { color: var(--success); }
.sb-kpis .k .v.amber { color: var(--warning); }
.sb-kpis .k .v.red { color: var(--danger); }
.sb-kpis .k .l { font-size: 11px; color: var(--ink-400); }
.sb-empty { border: 1px dashed var(--line); border-radius: 12px; padding: 40px; text-align: center;
  color: var(--ink-400); background: var(--surface-2); margin-top: 12px; }
.sb-note { background: var(--primary-50); border: 1px solid var(--primary-100); border-radius: 8px;
  padding: 8px 12px; color: var(--primary-700); font-size: 12px; margin-top: 14px; }
.sb-detail-head { display: flex; align-items: center; gap: 12px; margin-bottom: 14px; flex-wrap: wrap;
  background: var(--card); border: 1px solid var(--line); border-radius: 12px; padding: 14px 18px;
  box-shadow: 0 1px 2px rgba(22,32,46,.06); }
.sb-detail-head .fi { flex: 1; min-width: 240px; }
.sb-detail-head .fm { color: var(--ink-400); font-size: 12px; margin-top: 2px; }
.sb-kstrip { display: grid; grid-template-columns: repeat(5, 1fr); gap: 12px; margin-bottom: 14px; }
@media (max-width: 900px) { .sb-kstrip { grid-template-columns: repeat(2, 1fr); } }
.sb-kstrip .kc { background: var(--card); border: 1px solid var(--line); border-radius: 12px;
  padding: 14px 16px; box-shadow: 0 1px 2px rgba(22,32,46,.06); }
.sb-kstrip .kc .l { font-size: 12px; color: var(--ink-600); margin-bottom: 4px; }
.sb-kstrip .kc .v { font-size: 26px; font-weight: 600; font-variant-numeric: tabular-nums; letter-spacing: -.01em;
  display: flex; align-items: center; gap: 8px; }
.sb-kstrip .kc .v.green { color: var(--success); }
.sb-kstrip .kc .v.amber { color: var(--warning); }
.sb-kstrip .kc .v.red { color: var(--danger); }
.sb-bar { display: inline-block; height: 6px; border-radius: 3px; background: var(--primary-100); overflow: hidden; width: 110px; flex: none; }
.sb-bar i { display: block; height: 100%; border-radius: 3px; background: var(--primary-500); }
.tbl .sb-td0 { font-weight: 600; background: var(--surface-2); white-space: nowrap; }

/* ---------- v18.2：Excel 风格看板表格 ---------- */
.sb-sheet-card { padding: 0; overflow-x: hidden; overflow-y: auto; max-height: 72vh; }
table.tbl.sb-tbl { width: 100%; table-layout: fixed; border-collapse: collapse; }
.tbl.sb-tbl td {
  border: 1px solid #c8d0dc;                          /* Excel 全网格线（加重一档，区分更清晰） */
  padding: 6px 10px; font-size: 13px; line-height: 1.6;
  white-space: pre-wrap; overflow-wrap: anywhere;     /* 长文本/长链接自动换行，绝不撑出横向滚动 */
  vertical-align: top;
}
.tbl.sb-tbl td.sb-num { text-align: right; font-variant-numeric: tabular-nums; } /* 数字右对齐（列宽已按位数预留，无需 nowrap） */
.tbl.sb-tbl td.sb-td0 { font-weight: 600; background: var(--surface-2); white-space: pre-wrap; } /* 首列可换行（覆盖旧 nowrap） */
.tbl.sb-tbl tr:hover td { background: var(--primary-50); }

/* ---------- v24.6：销售看板日历式日期区间选择器 ---------- */
.sd-range-pop {
  position: absolute; top: calc(100% + 6px); left: 0; z-index: 1000;
  background: var(--card); border: 1px solid var(--border); border-radius: 12px;
  box-shadow: 0 10px 30px rgba(15, 23, 42, .16); padding: 12px; width: 300px;
  font-size: 13px; color: var(--ink-900);
}
.sd-cal-quick { display: flex; gap: 6px; margin-bottom: 10px; }
.sd-cal-quick button {
  flex: 1; border: 1px solid var(--border); background: var(--surface-2); color: var(--ink-600);
  border-radius: 6px; padding: 4px 0; font-size: 12px; cursor: pointer;
}
.sd-cal-quick button:hover { border-color: var(--primary-500); color: var(--primary-600); }
.sd-cal-quick button.on { background: var(--primary-50); border-color: var(--primary-500); color: var(--primary-600); font-weight: 600; }
.sd-cal-head { display: flex; align-items: center; justify-content: space-between; font-weight: 600; margin-bottom: 6px; }
.sd-cal-nav {
  border: none; background: transparent; font-size: 18px; line-height: 1; cursor: pointer;
  color: var(--ink-600); padding: 2px 8px; border-radius: 6px;
}
.sd-cal-nav:hover { background: var(--primary-50); color: var(--primary-600); }
.sd-cal-grid { display: grid; grid-template-columns: repeat(7, 1fr); gap: 2px; }
.sd-cal-wk { text-align: center; font-size: 12px; color: var(--ink-400); padding: 4px 0; }
.sd-cal-cell {
  position: relative; text-align: center; padding: 6px 0; border-radius: 6px; cursor: pointer;
  font-variant-numeric: tabular-nums;
}
.sd-cal-cell:hover { background: var(--primary-100); }
.sd-cal-cell.out { visibility: hidden; }
.sd-cal-cell.has-data::after {
  content: ''; position: absolute; bottom: 2px; left: 50%; transform: translateX(-50%);
  width: 4px; height: 4px; border-radius: 50%; background: var(--primary-500);
}
.sd-cal-cell.today { box-shadow: inset 0 0 0 1px var(--primary-500); }
.sd-cal-cell.in-range { background: var(--primary-50); border-radius: 0; }
.sd-cal-cell.edge { background: var(--primary-600); color: #fff; font-weight: 600; border-radius: 6px; }
.sd-cal-cell.edge::after { background: #fff; }
.sd-cal-foot { display: flex; align-items: center; justify-content: space-between; margin-top: 10px; font-size: 12px; color: var(--ink-600); }
.sd-cal-clear { border: none; background: transparent; color: var(--primary-600); cursor: pointer; font-size: 12px; padding: 2px 4px; }
.sd-cal-clear:hover { text-decoration: underline; }
.sd-cal-note { margin-top: 6px; font-size: 11px; color: var(--ink-400); }

/* ---------- v24.7：产品看板表格 表头排序/搜索/枚举筛选（Excel 式，控件内嵌表头） ---------- */
.sd-th-sort .sd-th-label { cursor: pointer; user-select: none; white-space: nowrap; }
.sd-th-sort:hover .sd-th-label { color: var(--primary-600); }
.sd-th-sort.on .sd-th-label { color: var(--primary-600); }
.sd-sort-ic { font-size: 11px; color: var(--ink-400); }
.sd-sort-ic.on { color: var(--primary-600); font-weight: 700; }
th.sd-th-f { vertical-align: top; }
th.sd-th-f .sd-th-label { white-space: nowrap; }
.sd-tbl-f {
  display: block; width: 100%; min-width: 64px; margin-top: 4px;
  border: 1px solid var(--border); border-radius: 6px; padding: 2px 6px;
  font-size: 12px; font-weight: 400; background: var(--card); color: var(--ink-900);
}
.sd-tbl-f:focus { outline: none; border-color: var(--primary-500); box-shadow: 0 0 0 2px var(--primary-50); }
select.sd-tbl-f { cursor: pointer; }
.sd-owner-picker { min-width: 190px; }
.sd-owner-picker .sd-tbl-f { margin-top: 4px; }
.sd-owner-picker .combo-list { min-width: 220px; left: 0; right: auto; }
.sd-tbl-count { margin-top: 8px; }
.sd-tbl-clear { color: var(--primary-600); cursor: pointer; margin-left: 6px; }
.sd-tbl-clear:hover { text-decoration: underline; }

/* 市场排行 */
.mr-head { padding: 16px 18px; }
.mr-title { display: flex; align-items: baseline; gap: 12px; flex-wrap: wrap; margin-bottom: 14px; }
.mr-title h3 { margin: 0; }
.mr-toolbar { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; }
.mr-toolbar label { display: flex; align-items: center; gap: 6px; font-size: 12px; color: var(--ink-600); }
.mr-toolbar select { min-width: 120px; max-width: 240px; }
.mr-period-field { display: flex; align-items: center; gap: 6px; font-size: 12px; color: var(--ink-600); }
.mr-period-wrap { position: relative; }
.mr-period-btn { min-width: 150px; display: inline-flex; align-items: center; justify-content: space-between; gap: 10px; white-space: nowrap; transition-property: color, background-color, border-color; }
.mr-calendar { left: 0; right: auto; }
.mr-calendar .lh-cal-week button:disabled, .mr-calendar .lh-cal-months button:disabled { color: var(--ink-400); cursor: default; opacity: .5; }
.mr-calendar .lh-cal-week button:disabled:hover { background: transparent; }
.mr-calendar .lh-cal-week button.mr-has-data { position: relative; }
.mr-calendar .lh-cal-week button.mr-has-data::after { content: ''; position: absolute; width: 4px; height: 4px; border-radius: 50%; background: var(--primary-500); bottom: 3px; left: calc(50% - 2px); }
.mr-calendar .lh-cal-week button.mr-selected { background: var(--primary-600); color: #fff; }
.mr-calendar .lh-cal-week button.mr-selected::after { background: #fff; }
.report-calendar { width: min(308px, calc(100vw - 32px)); }
.report-cal-ranges { display: grid; gap: 4px; max-height: 120px; overflow-y: auto; margin-top: 8px; padding-top: 8px; border-top: 1px solid var(--line); }
.report-cal-ranges button { padding: 7px 4px; border: 0; border-radius: 4px; background: transparent; color: var(--ink-600); font: inherit; font-size: 12px; cursor: pointer; }
.report-cal-ranges button:hover { background: var(--surface-2); }
.report-cal-ranges button.selected { background: var(--primary-600); color: #fff; }
.mr-toolbar input[type=search] { width: 220px; max-width: 100%; }
.mr-sync-path { padding: 7px 9px; border: 1px solid var(--line); border-radius: 4px; background: var(--surface-2); overflow-wrap: anywhere; font-size: 12px; }
.mr-sync-code { width: 100%; height: 320px; font: 12px/1.5 Consolas, monospace; white-space: pre; resize: vertical; }
.mr-segment { display: inline-flex; flex: none; border: 1px solid var(--line); border-radius: 6px; overflow: hidden; }
.mr-segment button { width: 38px; height: 34px; border: 0; border-right: 1px solid var(--line); background: var(--card); color: var(--ink-600); cursor: pointer; }
.mr-segment button:last-child { border-right: 0; }
.mr-segment button.active { background: var(--primary-600); color: #fff; font-weight: 600; }
.mr-segment [data-mr-platform] { width: 56px; }
.mr-table th:nth-child(n+8), .mr-table td:nth-child(n+8) { width: 110px; text-align: right; white-space: nowrap; }
.cs-page { min-width: 0; }
.cs-head { padding: 18px 20px; }
.cs-heading, .cs-title, .cs-actions, .cs-filters { display: flex; align-items: center; gap: 12px; flex-wrap: wrap; }
.cs-heading { justify-content: space-between; gap: 16px; }
.cs-title h3 { margin: 0; font-size: 16px; }
.cs-platform { padding: 3px 10px; border-radius: 6px; color: var(--primary-700); background: var(--primary-50); font-size: 12px; white-space: nowrap; }
.cs-actions { gap: 8px; }
.cs-actions .btn { height: 36px; padding: 0 14px; white-space: nowrap; flex-shrink: 0; }
.cs-filters { margin-top: 18px; padding-top: 16px; border-top: 1px solid var(--line); gap: 16px; }
.cs-filters label { display: flex; align-items: center; gap: 8px; color: var(--ink-600); font-size: 12px; white-space: nowrap; min-width: 0; }
.cs-filters select, .cs-view-bar input { height: 36px; padding: 0 10px; border: 1px solid var(--line); border-radius: 6px; color: var(--ink-900); background: var(--card); font: inherit; min-width: 0; }
.cs-period-field { display: flex; align-items: center; gap: 8px; color: var(--ink-600); font-size: 12px; min-width: 0; }
.cs-period-field .mr-period-btn { height: 36px; width: 228px; min-width: 0; padding: 0 10px; border-radius: 6px; }
.cs-period-field .mr-period-btn > span:first-child { overflow: hidden; text-overflow: ellipsis; }
.cs-scope-field select { width: 130px; }
.cs-shop-field select { width: 220px; max-width: 100%; }
.cs-segment { display: inline-flex; gap: 4px; padding: 3px; border-radius: 8px; background: var(--surface-2); border: 1px solid var(--line); flex: none; max-width: 100%; }
.cs-segment button { width: auto; min-width: 42px; height: 28px; padding: 0 12px; border: 0; border-radius: 5px; background: transparent; color: var(--ink-600); font: inherit; font-size: 12px; white-space: nowrap; cursor: pointer; }
.cs-segment button.active { background: var(--card); color: var(--primary-700); box-shadow: var(--shadow-sm); font-weight: 600; }
.cs-metrics { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 14px; margin: 16px 0; }
.cs-metrics-three { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.cs-metric { display: flex; flex-direction: column; gap: 8px; padding: 18px 20px; min-width: 0; }
.cs-metric span, .cs-metric small { color: var(--ink-600); font-size: 12px; }
.cs-metric small { color: var(--ink-400); }
.cs-metric strong { font-size: 28px; font-weight: 600; overflow-wrap: anywhere; font-variant-numeric: tabular-nums; }
.cs-metric em { margin-left: 6px; font-size: 12px; font-style: normal; color: var(--ink-600); font-weight: 400; }
.cs-missing-warning { margin: 0 0 12px; color: #a16207; font-size: 13px; line-height: 1.5; overflow-wrap: anywhere; }
.cs-report-card { padding: 0; overflow: hidden; }
.cs-view-bar { display: flex; align-items: center; justify-content: space-between; gap: 16px; flex-wrap: wrap; padding: 14px 20px 0; }
.cs-tabs { display: flex; gap: 22px; flex: none; }
.cs-tabs button { height: 42px; padding: 0 0 10px; border: 0; border-bottom: 2px solid transparent; color: var(--ink-600); background: transparent; font: inherit; font-size: 13px; white-space: nowrap; cursor: pointer; }
.cs-tabs button.active { color: var(--primary-700); border-bottom-color: var(--primary-600); font-weight: 600; }
.cs-view-bar input { width: 220px; max-width: 100%; font-size: 12px; margin-bottom: 8px; }
.cs-count { color: var(--ink-400); font-size: 12px; padding: 8px 20px 12px; }
.cs-table-wrap { width: 100%; overflow-x: auto; border-top: 1px solid var(--line); }
.cs-table { min-width: 620px; }
.cs-table th, .cs-table td { white-space: nowrap; text-align: right; padding: 12px 20px; }
.cs-table th:first-child, .cs-table td:first-child { text-align: left; width: 40%; }
.cs-table .dt-th-label-row { justify-content: flex-end; }
.cs-table th:first-child .dt-th-label-row { justify-content: flex-start; }
.cs-table .dt-filter, .cs-table-wrap > .dt-table-count { display: none; }
.cs-table .cs-summary td { background: var(--surface-2); }
.cs-table .cs-benchmark td { color: var(--ink-600); }
@media (max-width: 760px) {
  .cs-head { padding: 16px; }
  .cs-title .file-note { flex-basis: 100%; }
  .cs-filters { gap: 12px; }
  .cs-period-field { flex: 1 1 100%; }
  .cs-period-field .mr-period-wrap { flex: 1; min-width: 0; }
  .cs-period-field .mr-period-btn { width: 100%; }
  .cs-scope-field { flex: 1 1 100%; }
  .cs-scope-field select { width: auto; flex: 1; }
  .cs-shop-field { flex: 1 1 100%; }
  .cs-shop-field select { width: auto; flex: 1; }
  .cs-metrics { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 8px; }
  .cs-metric { padding: 12px 10px; }
  .cs-metric strong { font-size: 22px; }
  .cs-view-bar { padding: 12px 16px 0; gap: 10px; }
  .cs-view-bar input { flex: 1 1 100%; width: 100%; }
  .cs-count { padding-left: 16px; }
}
@media (max-width: 380px) { .cs-metrics { grid-template-columns: 1fr; } }
.mr-count { margin: 16px 0 8px; color: var(--ink-600); font-size: 12px; }
.mr-table-wrap { width: 100%; overflow-x: auto; border: 1px solid var(--line); border-radius: 6px; background: var(--card); }
.mr-table { width: 100%; min-width: 1040px; }
.mr-table th, .mr-table td { vertical-align: middle; }
.mr-table th:nth-child(1), .mr-table td:nth-child(1) { width: 64px; }
.mr-table th:nth-child(2), .mr-table td:nth-child(2) { width: 94px; }
.mr-table th:nth-child(4), .mr-table td:nth-child(4) { width: 170px; }
.mr-table th:nth-child(5), .mr-table td:nth-child(5) { width: 170px; }
.mr-table th:nth-child(6), .mr-table th:nth-child(7), .mr-table td:nth-child(6), .mr-table td:nth-child(7) { width: 110px; text-align: right; white-space: nowrap; }
.mr-keywords { color: var(--ink-600); overflow-wrap: anywhere; }
.mr-rank { font-weight: 700; font-variant-numeric: tabular-nums; }
.mr-trend { color: var(--ink-600); white-space: nowrap; }
.mr-trend.up { color: var(--danger); }
.mr-trend.down { color: var(--success); }
.mr-product { display: flex; align-items: center; gap: 10px; min-width: 280px; }
.mr-image-button { width: 52px; height: 52px; flex: none; padding: 0; border: 0; border-radius: 4px; background: var(--surface-2); cursor: zoom-in; }
.mr-image-button:focus-visible { outline: 2px solid var(--primary-500); outline-offset: 2px; }
.mr-product img, .mr-no-image { width: 52px; height: 52px; flex: none; border-radius: 4px; object-fit: contain; background: var(--surface-2); }
.mr-no-image { display: grid; place-items: center; color: var(--ink-400); font-size: 11px; }
.mr-product-text { min-width: 0; }
.mr-product-text a, .mr-product-text strong { display: block; line-height: 1.4; font-size: 13px; font-weight: 600; color: var(--ink-900); text-decoration: none; }
.mr-product-text a:hover { color: var(--primary-600); text-decoration: underline; }
.mr-product-text small, .mr-shop-type { display: block; margin-top: 4px; font-size: 11px; font-weight: 400; color: var(--ink-400); overflow-wrap: anywhere; }
@media (max-width: 760px) {
  .mr-head { padding: 14px; }
  .mr-toolbar label { flex: 1 1 145px; }
  .mr-period-field { flex: 1 1 100%; }
  .mr-period-wrap { flex: 1; }
  .mr-period-btn { width: 100%; }
  .mr-calendar { width: min(308px, calc(100vw - 54px)); }
  .mr-toolbar select { flex: 1; min-width: 0; }
  .mr-toolbar input[type=search] { flex: 1 1 100%; width: 100%; }
}

/* ---------- v24.8：宽弹窗 + 弹窗内表格独立滚动区（粘性表头） ---------- */
.modal.modal-wide { width: 1120px; max-width: 95vw; }
.sd-modal-tbl {
  max-height: 52vh; overflow: auto;
  border: 1px solid var(--line); border-radius: 10px;
}
.sd-modal-tbl .tbl { width: 100%; }
.sd-modal-tbl .tbl thead th { box-shadow: 0 1px 0 var(--line); }

/* ---------- v23.1：悬空历史数据右键处置菜单 + 并入店铺选择器 ---------- */
.shop-master-row { cursor: context-menu; }
.orphan-row { cursor: context-menu; }
.orphan-row:hover td { background: #FEF2F2; }
.orphan-ctx {
  position: fixed; z-index: 300; min-width: 180px;
  background: var(--card); border: 1px solid var(--line); border-radius: 10px;
  box-shadow: var(--shadow-md); padding: 6px; font-size: 13px;
}
.orphan-ctx-title {
  max-width: 220px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
  padding: 6px 10px; font-weight: 600; color: var(--ink-600); border-bottom: 1px solid var(--line); margin-bottom: 4px;
}
.orphan-ctx button {
  display: block; width: 100%; text-align: left; border: none; background: transparent;
  padding: 8px 10px; border-radius: 6px; font-size: 13px; color: var(--ink-900); cursor: pointer;
}
.orphan-ctx button:hover { background: var(--primary-50); color: var(--primary-600); }
.orphan-ctx button.danger:hover { background: #FEF2F2; color: var(--danger); }
.orphan-ctx button[data-armed] { background: #FEF2F2; color: var(--danger); font-weight: 600; }
#om-list { max-height: 300px; overflow-y: auto; border: 1px solid var(--line); border-radius: 8px; }
.om-item {
  display: flex; align-items: center; gap: 8px; padding: 8px 12px; cursor: pointer;
  border-bottom: 1px solid var(--line); font-size: 13px;
}
.om-item:last-child { border-bottom: none; }
.om-item:hover { background: var(--primary-50); }
.om-item.on { background: var(--primary-50); box-shadow: inset 2px 0 0 var(--primary-600); }
.om-radio { color: var(--primary-600); width: 16px; text-align: center; }
.om-name { font-weight: 600; flex: 1; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.om-sim { color: var(--ink-400); font-size: 12px; white-space: nowrap; }
button[data-armed].btn.danger, button[data-armed].btn.primary { box-shadow: 0 0 0 2px rgba(220, 38, 38, .25); }
.access-section { padding: 18px 0; border-bottom: 1px solid var(--line); }
.access-head { display: flex; align-items: center; justify-content: space-between; gap: 12px; margin-bottom: 14px; }
.access-head h2 { font-size: 18px; margin: 0; }
.access-head span { color: var(--ink-400); font-size: 12px; }
.access-page { max-width: 1460px; margin: 0 auto; }
.access-page-head { display: flex; align-items: end; justify-content: space-between; gap: 24px; padding: 6px 0 22px; }
.access-page-head h1 { font-size: 24px; line-height: 1.3; font-weight: 700; }
.access-overview { display: flex; align-items: center; gap: 0; background: #fff; border: 1px solid var(--line); border-radius: 6px; }
.access-overview > div { display: flex; align-items: baseline; gap: 7px; padding: 9px 16px; white-space: nowrap; }
.access-overview > div + div { border-left: 1px solid var(--line); }
.access-overview strong { font-size: 18px; line-height: 1.2; font-variant-numeric: tabular-nums; }
.access-overview span { font-size: 12px; color: var(--ink-600); }
.access-tabs { display: flex; gap: 26px; border-bottom: 1px solid var(--line); overflow-x: auto; }
.access-tabs button { border: 0; border-bottom: 2px solid transparent; background: none; padding: 11px 2px 12px; margin-bottom: -1px; color: var(--ink-600); font: inherit; font-weight: 600; cursor: pointer; white-space: nowrap; }
.access-tabs button:hover { color: var(--primary-600); }
.access-tabs button.active { color: var(--primary-700); border-bottom-color: var(--primary-600); }
.access-panel { min-width: 0; padding: 24px 0; }
.access-shop-manager { min-width: 0; }
.shop-create-grid { grid-template-columns: repeat(auto-fit, minmax(170px, 1fr)); margin-top: 16px; }
.access-toolbar, .access-subhead { display: flex; align-items: center; justify-content: space-between; gap: 16px; margin-bottom: 16px; }
.access-toolbar-title { display: flex; align-items: baseline; gap: 10px; }
.access-toolbar h2 { font-size: 17px; line-height: 1.4; }
.access-toolbar-title span, .access-subhead span { color: var(--ink-400); font-size: 12px; }
.access-toolbar-controls, .access-inline, .access-actions { display: flex; align-items: center; gap: 8px; }
.access-toolbar-controls input { width: 300px; }
.access-toolbar input, .access-toolbar select, .access-subhead input, .access-group-editor input, .access-group-editor select, .access-assignment select {
  min-height: 36px; padding: 7px 10px; border: 1px solid var(--line); border-radius: 6px; background: #fff; color: var(--ink-900); font: inherit; outline: none;
}
.access-toolbar input:focus, .access-toolbar select:focus, .access-subhead input:focus, .access-group-editor input:focus, .access-group-editor select:focus, .access-assignment select:focus { border-color: var(--primary-600); box-shadow: 0 0 0 3px var(--primary-50); }
.access-inline input { width: 200px; }
.access-table-wrap { overflow-x: auto; border: 1px solid var(--line); border-radius: 6px; background: #fff; }
.access-table { width: 100%; border-collapse: collapse; font-size: 13px; }
.access-table th { background: var(--surface-2); color: var(--ink-600); font-weight: 600; text-align: left; white-space: nowrap; }
.access-table th, .access-table td { padding: 13px 16px; border-bottom: 1px solid var(--line); vertical-align: middle; }
.access-table tbody tr:last-child td { border-bottom: 0; }
.access-table tbody tr:hover { background: #f8fbff; }
.access-table td { color: var(--ink-600); }
.access-table td strong { color: var(--ink-900); font-weight: 600; }
.access-table td:last-child { min-width: 190px; }
.access-user-cell { display: flex; align-items: center; gap: 10px; min-width: 130px; }
.access-user-cell strong, .access-user-cell small { display: block; line-height: 1.45; }
.access-user-cell small { color: var(--ink-400); font-size: 12px; }
.access-avatar { display: grid; place-items: center; width: 34px; height: 34px; flex: 0 0 34px; background: #e5ece8; border: 1px solid #d5e2d9; border-radius: 6px; color: #276149; font-weight: 700; }
.access-kind { display: block; color: var(--ink-900); margin-bottom: 3px; }
.access-status { display: inline-flex; align-items: center; gap: 5px; font-size: 12px; }
.access-status::before { content: ''; width: 6px; height: 6px; border-radius: 50%; background: currentColor; }
.access-status.on { color: var(--success); }
.access-status.off { color: var(--ink-400); }
.access-scope-list { display: flex; flex-wrap: wrap; gap: 5px; max-width: 450px; }
.access-scope-chip { display: inline-flex; gap: 5px; align-items: center; padding: 3px 7px; border: 1px solid #dce7df; border-radius: 4px; background: #f3f8f4; color: #456253; font-size: 12px; }
.access-scope-chip strong { color: #276149 !important; }
.access-additional-options { display: grid; grid-template-columns: repeat(auto-fit, minmax(150px, 1fr)); gap: 8px; max-height: 180px; overflow: auto; padding: 8px; border: 1px solid var(--line); border-radius: 4px; }
.access-additional-options label { display: flex; align-items: center; gap: 7px; min-width: 0; font-size: 13px; cursor: pointer; }
.access-additional-options label[hidden] { display: none; }
.access-additional-options input { flex: none; width: 16px; height: 16px; accent-color: var(--primary-600); }
.access-additional-options span { overflow-wrap: anywhere; }
.access-row-actions { display: flex; flex-wrap: wrap; gap: 4px; justify-content: flex-end; }
.access-row-actions .btn { white-space: nowrap; }
.access-muted { color: var(--ink-400); }
.access-empty { padding: 36px 12px; text-align: center; color: var(--ink-400); }
.access-notice { padding: 10px 14px; margin-bottom: 16px; background: var(--warning-bg); color: var(--warning); border-left: 3px solid #c98b36; }
.access-group-layout { display: grid; grid-template-columns: 220px minmax(0, 1fr); border: 1px solid var(--line); border-radius: 6px; background: #fff; min-height: 390px; overflow: hidden; }
.access-group-nav { padding: 8px; border-right: 1px solid var(--line); background: var(--surface-2); }
.access-group-nav-head { display: flex; align-items: center; justify-content: space-between; padding: 2px 4px 7px 7px; color: var(--ink-600); font-size: 11px; }
.access-group-nav-head button { width: 26px; height: 26px; border: 0; border-radius: 4px; background: transparent; color: var(--ink-600); font-size: 20px; line-height: 1; cursor: pointer; }
.access-group-nav-head button:hover { background: var(--primary-50); color: var(--primary-700); }
.access-team-folder + .access-team-folder { margin-top: 5px; }
.access-team-folder summary { display: flex; align-items: center; gap: 7px; padding: 9px 7px; color: var(--ink-900); font-size: 13px; font-weight: 600; cursor: pointer; list-style: none; }
.access-team-folder.access-drop-target { outline: 2px solid var(--primary-600); outline-offset: -2px; border-radius: 4px; background: var(--primary-50); }
.access-team-folder summary::-webkit-details-marker { display: none; }
.access-team-folder summary::before { content: '▸'; color: var(--ink-400); font-size: 12px; }
.access-team-folder[open] summary::before { content: '▾'; }
.access-team-folder summary span { min-width: 0; flex: 1; overflow-wrap: anywhere; }
.access-team-groups { padding-left: 15px; }
.access-team-groups > .access-muted { display: block; padding: 7px 11px; font-size: 12px; }
.access-group-nav button[data-access-select-group] { display: flex; align-items: center; justify-content: space-between; gap: 8px; width: 100%; padding: 9px 11px; border: 0; border-radius: 4px; background: transparent; text-align: left; color: var(--ink-600); font: inherit; font-size: 12px; cursor: pointer; }
.access-group-nav button[data-access-select-group]:hover { background: var(--primary-50); }
.access-group-nav button[data-access-select-group].active { background: #e8f0f8; color: var(--primary-700); font-weight: 600; }
.access-group-nav button[data-access-select-group] span { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.access-group-nav button[data-access-select-group][draggable] { cursor: grab; }
.access-group-nav button[data-access-select-group][draggable]:active { cursor: grabbing; }
.access-group-nav small { flex: none; color: var(--ink-400); font-size: 11px; }
.access-group-menu { max-height: min(65vh, 420px); overflow-y: auto; border-radius: 6px; }
.access-group-menu .access-menu-label { padding: 9px 10px 3px; color: var(--ink-400); font-size: 11px; }
.access-group-menu button:disabled { color: var(--ink-400); cursor: default; }
.access-group-menu button:disabled:hover { background: transparent; color: var(--ink-400); }
.access-group-editor { min-width: 0; padding: 22px 26px; container-type: inline-size; }
.access-editor-head { display: flex; align-items: end; justify-content: space-between; gap: 14px; margin-bottom: 26px; }
.access-editor-head label { display: block; margin-bottom: 6px; color: var(--ink-600); font-size: 12px; }
.access-group-name { width: min(280px, 100%); font-weight: 600 !important; }
.access-editor-actions { display: flex; gap: 8px; }
.access-permission-head, .access-permission-row { display: grid; grid-template-columns: minmax(110px, 1fr) 120px 150px minmax(120px, 1fr); align-items: center; gap: 12px; padding: 12px 16px; }
.access-permission-head { background: var(--surface-2); color: var(--ink-600); font-size: 12px; font-weight: 600; }
.access-permission-row { border-bottom: 1px solid var(--line); font-size: 13px; }
.access-permission-row:last-child { border-bottom: 0; }
.access-permissions select { width: 100%; }
.access-permission-row select[hidden] { display: none; }
.access-permission-row > * { min-width: 0; }
.access-task-permission { border-bottom: 1px solid var(--line); }
.access-permissions-intro { margin: 12px 0 16px; }
.access-permissions-intro h3 { margin: 0 0 6px; font-size: 16px; }
.access-permissions-intro p { margin: 0; color: var(--ink-600); font-size: 12px; line-height: 1.7; }
.access-permission-section { margin-bottom: 16px; border: 1px solid var(--line); border-radius: 8px; overflow: hidden; }
.access-permission-section > summary { display: flex; align-items: center; gap: 10px; padding: 15px 16px; background: var(--surface-2); cursor: pointer; list-style: none; }
.access-permission-section > summary::-webkit-details-marker { display: none; }
.access-permission-section > summary::before { content: '▸'; color: var(--ink-400); }
.access-permission-section[open] > summary::before { content: '▾'; }
.access-permission-section > summary > span:first-of-type { flex: 1; min-width: 0; }
.access-permission-section summary strong { font-size: 14px; color: var(--ink-900); }
.access-permission-section summary small { display: block; margin-top: 3px; color: var(--ink-600); font-size: 12px; }
.access-permission-count { flex: none; color: var(--primary-700); font-size: 12px; }
.access-permission-section .access-permission-head { background: #fff; border-top: 1px solid var(--line); border-bottom: 1px solid var(--line); }
.access-module-name { display: flex; align-items: center; gap: 8px; line-height: 1.5; }
.access-module-name::before { content: ''; width: 6px; height: 6px; flex: none; border-radius: 50%; background: var(--ink-400); }
.access-permission-row.is-enabled .access-module-name::before { background: var(--success); }
.access-permission-field { display: block; margin: 0; }
.access-control-label { display: none; margin-bottom: 5px; color: var(--ink-600); font-size: 11px; }
.access-permission-field:has(select[hidden]) { display: none; }
.access-permission-field select:disabled { background: var(--surface-2); color: var(--ink-400); cursor: not-allowed; }
.access-task-settings { padding: 4px 16px 16px; }
.access-task-subhead { display: flex; flex-wrap: wrap; align-items: center; gap: 8px 12px; margin: 16px 0 10px; }
.access-task-subhead h4 { margin: 0; font-size: 13px; font-weight: 600; }
.access-task-subhead > span { color: var(--ink-600); font-size: 11px; }
.access-task-matrix-wrap { border: 1px solid var(--line); border-radius: 6px; overflow: hidden; }
.access-task-matrix { width: 100%; border-collapse: collapse; table-layout: fixed; font-size: 12px; }
.access-task-matrix th, .access-task-matrix td { min-width: 0; padding: 12px 4px; text-align: center; border-bottom: 1px solid var(--line); }
.access-task-matrix thead th { background: var(--surface-2); color: var(--ink-600); font-size: 11px; font-weight: 500; }
.access-task-matrix th:first-child { width: 24%; padding-left: 12px; text-align: left; }
.access-task-matrix tbody th strong { font-weight: 600; }
.access-task-matrix tbody th small { display: block; margin-top: 4px; color: var(--ink-600); font-size: 11px; font-weight: 400; line-height: 1.5; }
.access-task-matrix tbody tr:last-child > * { border-bottom: 0; }
.access-task-choice { display: flex; align-items: center; gap: 8px; min-height: 32px; cursor: pointer; font-size: 13px; }
.access-task-choice input { flex: none; width: 17px; height: 17px; margin: 0; accent-color: var(--primary-600); cursor: pointer; }
.access-task-choice input:disabled { cursor: not-allowed; }
.access-task-choice:has(input:disabled) { color: var(--ink-400); cursor: not-allowed; }
.access-task-matrix .access-task-choice { justify-content: center; }
.access-task-matrix .access-task-choice span { position: absolute; width: 1px; height: 1px; padding: 0; overflow: hidden; clip-path: inset(50%); white-space: nowrap; }
.access-task-matrix td:has(input:checked) { background: var(--primary-50); }
.access-task-management { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 10px; }
.access-task-management > div { min-width: 0; padding: 10px 12px; border: 1px solid var(--line); border-radius: 6px; }
.access-task-management > div:has(input:checked) { background: var(--primary-50); border-color: var(--primary-200, #cfdaef); }
.access-task-management p { margin: 4px 0 0 25px; color: var(--ink-600); font-size: 11px; line-height: 1.6; }
.access-permission-note { margin: 8px 16px 12px; color: var(--ink-600); font-size: 11px; line-height: 1.7; }
.access-task-settings > .access-permission-note { margin: 8px 0 16px; }
.access-task-disabled { margin: 12px 0 0; padding: 9px 12px; background: var(--surface-2); border-radius: 5px; color: var(--ink-600); font-size: 12px; line-height: 1.6; }
.access-task-disabled[hidden] { display: none; }
.access-permission-help { margin-top: 14px; padding-top: 12px; border-top: 1px dashed var(--line); color: var(--ink-600); font-size: 12px; }
.access-permission-help > summary { width: fit-content; cursor: pointer; }
.access-permission-help ul { margin: 10px 0 0; padding-left: 20px; line-height: 1.8; }
.access-performance-teams { display: flex; flex-wrap: wrap; gap: 8px 14px; }
.access-performance-teams[hidden] { display: none; }
.access-performance-teams label { display: flex; align-items: center; gap: 5px; font-size: 12px; }
.access-performance-teams input { width: 16px; height: 16px; accent-color: var(--primary-600); }
.access-channel-band { padding: 0 0 26px; border-bottom: 1px solid var(--line); margin-bottom: 24px; }
.access-subhead h3 { font-size: 15px; }
.access-channel-list { display: flex; flex-wrap: wrap; gap: 8px; }
.access-channel-list > div { display: flex; align-items: center; gap: 12px; padding: 9px 12px; border: 1px solid var(--line); border-radius: 5px; background: #fff; }
.access-channel-list strong { font-weight: 600; }
.access-channel-list span { color: var(--ink-400); font-size: 12px; }
.access-shops-head input { width: 240px; }
.access-shop-list { max-height: 540px; overflow: auto; }
.access-shop-list select { min-width: 180px; padding: 6px 8px; border: 1px solid var(--line); border-radius: 5px; background: #fff; font: inherit; }
.access-form-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 0 12px; }
.access-form-full { grid-column: 1 / -1; }
.access-group-config { margin-bottom: 12px; }
.access-group-policies { display: flex; flex-wrap: wrap; gap: 8px 24px; padding: 8px 0 12px; }
.access-group-policies label { display: inline-flex; align-items: center; gap: 7px; color: var(--ink-900); font-size: 13px; cursor: pointer; }
.access-group-policies input { width: 16px; height: 16px; accent-color: var(--primary-600); }
.access-group-policies input:disabled + span { color: var(--ink-400); }
.access-config-status { color: var(--ink-600); font-size: 12px; padding: 4px 0 14px; }
.access-job-summary { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 10px; }
.access-job-summary span { padding: 3px 7px; border-radius: 4px; background: #f0f5f1; color: #456253; font-size: 12px; }
.access-primary-group { padding: 16px; border: 1px solid var(--primary-200, #cfdaef); border-radius: 8px; background: var(--primary-50, #f6f8fd); }
.access-primary-group > label { color: var(--ink-900); font-size: 14px; font-weight: 600; }
.access-primary-required { margin-left: 6px; color: var(--primary-600); font-size: 11px; font-weight: 400; }
.access-identity-hint { margin: 0 0 10px; color: var(--ink-600); font-size: 12px; line-height: 1.6; }
.access-primary-group > select { width: 100%; background: #fff; }
.access-primary-permissions { margin-top: 10px; }
.access-primary-permissions[hidden] { display: none; }
.access-primary-permissions > summary { color: var(--ink-600); font-size: 12px; cursor: pointer; }
.access-additional-groups { margin: 0 0 16px; border-top: 1px solid var(--line); }
.access-additional-groups > summary { display: flex; align-items: center; gap: 8px; padding: 12px 0; color: var(--ink-600); font-size: 12px; cursor: pointer; list-style: none; }
.access-additional-groups > summary::-webkit-details-marker { display: none; }
.access-additional-groups > summary::before { content: '+'; font-size: 16px; line-height: 1; }
.access-additional-groups[open] > summary::before { content: '−'; }
.access-additional-groups > summary[aria-disabled="true"] { color: var(--ink-400); }
.access-additional-status { margin-left: auto; color: var(--ink-400); font-size: 11px; }
.access-additional-body { padding-bottom: 4px; }
.access-shop-items { margin-top: 16px; border: 1px solid var(--line); border-radius: 6px; background: #fff; overflow: hidden; }
.access-shop-item, .access-shop-choice { display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: 12px 16px; border-bottom: 1px solid var(--line); }
.access-shop-item:last-child, .access-shop-choice:last-child { border-bottom: 0; }
.access-shop-item > div:first-child, .access-shop-choice span { min-width: 0; overflow-wrap: anywhere; }
.access-shop-item small, .access-shop-choice small { display: block; margin-top: 3px; color: var(--ink-400); font-size: 12px; }
.access-shop-item > .btn, .access-shop-item > span { flex: none; white-space: nowrap; }
.access-shop-choice { justify-content: flex-start; cursor: pointer; }
.access-shop-choice input { width: 16px; height: 16px; flex: none; accent-color: var(--primary-600); }
.access-section-title { font-size: 17px; }
.access-assignment-head { display: flex; align-items: center; justify-content: space-between; gap: 8px; padding-top: 12px; margin-top: 2px; border-top: 1px solid var(--line); }
.access-assignment-head h3 { font-size: 14px; }
.access-assignments { display: grid; gap: 8px; margin: 12px 0; }
.access-assignment { display: grid; grid-template-columns: minmax(100px, 1.1fr) minmax(75px, .75fr) minmax(100px, 1.5fr) 36px; gap: 8px; }
.access-assignment select { min-width: 0; width: 100%; }
.access-assignment .access-remove { padding: 0; height: 36px; font-size: 20px; line-height: 1; }
.access-actions { justify-content: flex-end; margin-top: 18px; }
@media (max-width: 800px) {
  .access-page-head { align-items: start; flex-direction: column; }
  .access-overview { width: 100%; }
  .access-overview > div { flex: 1; justify-content: center; padding: 8px; }
  .access-toolbar { align-items: stretch; flex-direction: column; }
  .access-toolbar-controls { flex-wrap: wrap; }
  .access-toolbar-controls input { flex: 1 1 190px; width: auto; }
  .access-table { min-width: 780px; }
  .access-group-layout { grid-template-columns: 175px minmax(0, 1fr); }
  .access-editor-head { align-items: start; flex-direction: column; }
  .access-permission-head, .access-permission-row { grid-template-columns: minmax(90px, 1fr) 105px 122px minmax(115px, 1fr); gap: 6px; }
}
@media (max-width: 620px) {
  .access-page-head h1 { font-size: 21px; }
  .access-tabs { gap: 18px; }
  .access-panel { padding-top: 18px; }
  .access-toolbar-controls .btn { flex: 1 1 100%; }
  .access-users-table, .access-users-table tbody { display: block; min-width: 0; }
  .access-users-table thead { display: none; }
  .access-users-table tbody tr { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); padding: 14px; gap: 12px 8px; border-bottom: 1px solid var(--line); }
  .access-users-table tbody tr:last-child { border-bottom: 0; }
  .access-users-table td { display: block; min-width: 0 !important; padding: 0; border: 0; }
  .access-users-table td:first-child, .access-users-table td:nth-child(4), .access-users-table td:last-child { grid-column: 1 / -1; }
  .access-users-table td:nth-child(3)::before { content: '所属渠道/团队'; display: block; margin-bottom: 3px; color: var(--ink-400); font-size: 11px; }
  .access-users-table td:nth-child(4)::before { content: '身份组与数据范围'; display: block; margin-bottom: 6px; color: var(--ink-400); font-size: 11px; }
  .access-users-table td:last-child { padding-top: 9px; border-top: 1px solid var(--line); }
  .access-users-table .access-row-actions { justify-content: flex-start; }
  .access-users-table .access-user-cell { min-width: 0; }
  .access-shops-table, .access-shops-table tbody { display: block; min-width: 0; }
  .access-shops-table thead { display: none; }
  .access-shops-table tbody tr { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px; padding: 14px; border-bottom: 1px solid var(--line); }
  .access-shops-table tbody tr:last-child { border-bottom: 0; }
  .access-shops-table td { display: block; min-width: 0 !important; padding: 0; border: 0; }
  .access-shops-table td:nth-child(2)::before, .access-shops-table td:nth-child(3)::before { display: block; margin-bottom: 4px; color: var(--ink-400); font-size: 11px; }
  .access-shops-table td:nth-child(2)::before { content: '品牌'; }
  .access-shops-table td:nth-child(3)::before { content: '所属渠道'; }
  .access-shops-table td:nth-child(3) { grid-column: 1 / -1; }
  .access-shops-table select { width: 100%; }
  .access-group-layout { display: block; }
  .access-group-nav { display: block; max-height: 240px; overflow: auto; border-right: 0; border-bottom: 1px solid var(--line); }
  .access-group-editor { padding: 18px 14px; }
  .access-permission-head { display: none; }
  .access-permission-row { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 8px; padding: 12px 4px; }
  .access-permission-row > span { grid-column: 1 / -1; font-weight: 600; }
  .access-permission-row select:last-child { grid-column: 1 / -1; }
  .access-subhead { align-items: stretch; flex-direction: column; }
  .access-inline input, .access-shops-head input { flex: 1; width: auto; min-width: 0; }
  .access-form-grid { grid-template-columns: 1fr; }
  .access-assignment { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr) 36px; }
  .access-assignment .access-scope-value { grid-column: 1 / 3; }
  .access-assignment .access-remove { grid-column: 3; grid-row: 1; }
}
@container (max-width: 650px) {
  .access-permission-head { display: none; }
  .access-permission-row { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px; padding: 14px; }
  .access-permission-row > .access-module-name { grid-column: 1 / -1; font-weight: 600; }
  .access-control-label { display: block; }
  .access-permission-row > .access-permission-field:last-child, .access-performance-teams { grid-column: 1 / -1; }
  .access-task-management { grid-template-columns: 1fr; }
}
@container (max-width: 440px) {
  .access-permission-section > summary { padding: 12px; flex-wrap: wrap; }
  .access-permission-count { font-size: 11px; }
  .access-task-settings { padding: 0 12px 14px; }
  .access-task-matrix, .access-task-matrix tbody { display: block; }
  .access-task-matrix thead { display: none; }
  .access-task-matrix tbody tr { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 0; }
  .access-task-matrix tbody tr + tr { border-top: 1px solid var(--line); }
  .access-task-matrix tbody th:first-child { grid-column: 1 / -1; width: auto; padding: 12px; background: var(--surface-2); }
  .access-task-matrix tbody td { padding: 6px 10px; border: 0; }
  .access-task-matrix .access-task-choice { justify-content: flex-start; gap: 6px; font-size: 11px; }
  .access-task-matrix .access-task-choice span { position: static; width: auto; height: auto; clip-path: none; white-space: normal; }
}
/* Task archive: neutral records and controls within the exception board. */
.task-archive-tabs { margin: 12px 0; }
.task-archive-rule { display: flex; align-items: center; justify-content: space-between; gap: 16px; padding: 16px; margin: 16px 0; border: 1px solid #dce3ed; border-radius: 10px; background: #f7f9fc; }
.task-archive-rule p { margin: 7px 0; }
.task-archive-rule > div { min-width: 0; overflow-wrap: anywhere; }
.task-archive-rule-heading,.task-archive-rule-actions { display: flex; gap: 8px; align-items: center; flex-wrap: wrap; }
.task-archive-rule-heading { justify-content: space-between; margin-top: 20px; }
.task-archive-rule-actions { flex-shrink: 0; }
.task-archive-rule-form { display: grid; gap: 14px; }
.task-archive-rule-form .field { min-width: 0; }
.task-archive-rule-form select { max-width: 100%; }
.task-archive-enable { display: flex; gap: 8px; align-items: center; }
.task-archive-rule small,.task-archive-meta time { color: #65748a; }
.task-archive-board .artist-board-controls { flex-wrap: wrap; }
.task-archive-board .artist-board-controls label { display: flex; align-items: center; gap: 6px; font-size: 12px; }
.task-archive-board .artist-result-toolbar { flex-wrap: wrap; gap: 12px; }
.task-archive-list { display: grid; gap: 10px; }
.task-archive-row { display: grid; grid-template-columns: 20px minmax(0,1fr) auto auto; align-items: center; gap: 14px; padding: 16px; border: 1px solid #e1e6ee; border-radius: 10px; background: #fff; }
.task-archive-open { display: flex; flex-direction: column; gap: 7px; min-width: 0; border: 0; background: none; text-align: left; cursor: pointer; color: inherit; font: inherit; }
.task-archive-open strong,.task-archive-detail h3 { overflow-wrap: anywhere; }
.task-archive-open small { font-weight: normal; color: #65748a; }
.task-archive-meta { display: flex; flex-direction: column; align-items: flex-start; gap: 7px; font-size: 12px; }
.artist-workflow-badge.archived { color: #725c28; background: #fbf4df; }
.task-archive-modal .modal-head { flex-shrink: 0; }
.task-archive-modal .modal-body { display: flex; flex-direction: column; flex: 1; min-height: 0; overflow: hidden; }
.task-archive-detail { display: flex; flex-direction: column; flex: 1; min-width: 0; min-height: 0; }
.task-archive-content { min-height: 0; padding: 24px 28px; overflow-y: auto; overflow-wrap: anywhere; overscroll-behavior: contain; scrollbar-gutter: stable; }
.task-archive-heading { display: flex; justify-content: space-between; align-items: flex-start; gap: 16px; }
.task-archive-heading > div { min-width: 0; }
.task-archive-heading h3 { margin-top: 4px; font-size: 20px; line-height: 1.5; }
.task-archive-badges { display: flex; align-items: center; justify-content: flex-end; flex-wrap: wrap; gap: 8px; flex-shrink: 0; }
.task-archive-badges .task-point-badge { margin-top: 0; }
.task-archive-facts { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 12px 24px; margin: 20px 0; }
.task-archive-facts dt { color: var(--ink-600); font-size: 12px; }
.task-archive-facts dd { margin-top: 3px; font-size: 13px; overflow-wrap: anywhere; font-variant-numeric: tabular-nums; }
.task-archive-reason { padding: 14px 16px; border: 1px solid var(--line); border-radius: var(--radius-sm); background: var(--surface-2); font-size: 13px; overflow-wrap: anywhere; }
.task-archive-reason > p { margin-top: 6px; }
.task-archive-detail .artist-detail-section > h3 { margin-bottom: 12px; font-size: 14px; font-weight: 600; }
.task-archive-detail .artist-requirement-text { overflow-wrap: anywhere; }
.task-archive-detail .task-media-grid { grid-template-columns: repeat(auto-fill, minmax(128px, 1fr)); }
.task-archive-detail .task-media-item { padding: 8px; border-radius: var(--radius-sm); background: #fff; }
.task-archive-detail .task-media-item img { height: auto; aspect-ratio: 1; }
.task-archive-detail .task-media-item a { text-decoration: none; }
.task-archive-detail .task-media-item a:hover { text-decoration: underline; }
.task-archive-detail .field { margin-bottom: 0; }
.task-archive-history { font-size: 13px; }
.task-archive-history summary { cursor: pointer; font-weight: 600; }
.task-archive-event { margin-top: 12px; padding-left: 12px; border-left: 2px solid var(--line); overflow-wrap: anywhere; }
.task-archive-event .artist-requirement-text { margin-top: 4px; color: var(--ink-600); }
.task-archive-footer { position: static; flex-shrink: 0; padding: 14px 28px; }
.task-archive-images { display: grid; grid-template-columns: repeat(auto-fill, minmax(128px, 1fr)); gap: 12px; }
.task-archive-images button { min-width: 0; padding: 8px; border: 1px solid var(--line); border-radius: var(--radius-sm); background: #fff; cursor: zoom-in; }
.task-archive-images img { display: block; width: 100%; aspect-ratio: 1; object-fit: contain; }
@media (max-width: 600px) {
  .task-archive-content { padding: 18px 16px; }
  .task-archive-heading { flex-direction: column; gap: 10px; }
  .task-archive-heading h3 { font-size: 18px; }
  .task-archive-facts { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px; }
  .task-archive-detail .task-media-grid,.task-archive-images { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px; }
  .task-archive-footer { padding: 12px 16px; gap: 8px; }
  .task-archive-footer .btn { padding: 7px 8px; }
  .task-archive-row { grid-template-columns: 20px minmax(0,1fr); padding: 12px; gap: 10px; }
  .task-archive-meta { grid-column: 2; }
  .task-archive-row > button.btn { grid-column: 2; justify-self: start; }
  .task-archive-rule { align-items: flex-start; flex-direction: column; }
  .task-archive-board .artist-board-controls { width: 100%; min-width: 0; }
  .task-archive-board .artist-board-controls > input,.task-archive-board .artist-board-controls > select { max-width: 100%; min-width: 0; }
}