/* ==========================================================
   JR杰瑞 · 画室生态签名组件  eco-painting.181000.css
   ------------------------------------------------------------
   挂在 [data-eco="painting"]
   签名组件：**画布舞台** —— 中央画布 + 工具参数面板
   - .canvas-workbench  深色台面 + 内阴影 + 细网格（画布底纹）
   - .panel             画框描边（赭石细线 + 暖调面板）
   生态主色：赭石 #B4532A（暗底提亮 #D98A4E）
   ========================================================== */

/* ---- 生态变量 ---- */
[data-eco="painting"] {
  --eco: #B4532A;
  --eco-soft: rgba(180, 83, 42, .10);
  --eco-line: rgba(180, 83, 42, .26);
  --eco-glow: rgba(180, 83, 42, .22);
}
[data-theme][data-eco="painting"] {
  --eco: #D98A4E;
  --eco-soft: rgba(217, 138, 78, .12);
  --eco-line: rgba(217, 138, 78, .30);
}

/* ---- 签名组件 1：画布舞台 ---- */
[data-eco="painting"] .canvas-workbench {
  position: relative;
  background-color: #0E0C0A;
  /* 画布底纹：细网格 + 中心柔光 */
  background-image:
    radial-gradient(ellipse 70% 60% at 50% 45%, rgba(217,138,78,.07) 0%, transparent 70%),
    linear-gradient(rgba(232,225,213,.035) 1px, transparent 1px),
    linear-gradient(90deg, rgba(232,225,213,.035) 1px, transparent 1px);
  background-size: auto, 22px 22px, 22px 22px;
  /* 内阴影：画面像「沉进」台面 */
  box-shadow:
    inset 0 2px 24px rgba(0,0,0,.55),
    inset 0 0 0 1px rgba(232,225,213,.06);
}

/* 画布上的节点：像贴在图钉板上的画片 */
[data-eco="painting"] .canvas-node {
  border-color: rgba(232,225,213,.10);
  box-shadow: 0 6px 20px rgba(0,0,0,.45);
}
[data-eco="painting"] .canvas-node.selected {
  outline-color: var(--eco);
  box-shadow: 0 0 0 3px var(--eco-glow), 0 12px 40px rgba(0,0,0,.55);
}

/* ---- 签名组件 2：参数面板（画框描边） ---- */
[data-eco="painting"] .panel {
  border: 1px solid rgba(232,225,213,.09);
  border-radius: 16px;
}
[data-eco="painting"] .panel:hover {
  border-color: var(--eco-line);
}

/* 面板内 tab 激活：赭石 */
[data-eco="painting"] .panel-tab.active {
  color: var(--eco);
  border-bottom-color: var(--eco);
}

/* 主操作按钮：赭石实心 */
[data-eco="painting"] .btn--primary,
[data-eco="painting"] .primary {
  background: #B4532A;
  color: #FFFDF8;
  border-color: #B4532A;
}
[data-eco="painting"] .btn--primary:hover,
[data-eco="painting"] .primary:hover {
  background: #C9612F;
  border-color: #C9612F;
}

/* 进度条：赭石 → 藤黄 */
[data-eco="painting"] .node-progress-fill,
[data-eco="painting"] .generation-progress-bar {
  background: linear-gradient(90deg, #B4532A, #D99A2B) !important;
}

/* 悬浮主按钮 FAB */
[data-eco="painting"] .fab-main {
  background: linear-gradient(135deg, #B4532A, #D99A2B) !important;
}

/* 侧栏激活项 */
[data-eco="painting"] .nav-item.active,
[data-eco="painting"] .sidebar a.active {
  color: var(--eco);
  background: var(--eco-soft);
}