/* drawing-board 在线画板工具页样式（单栏 + 工作台画板，自包含不依赖全站 utility）
   来源: uidemo tool-draw-board v4 定稿（2026-09-10 用户确认，单栏布局同原型），dw- 前缀防全站冲突。 */

/* ---------- 页面骨架(单栏) ---------- */
.dw-page { min-height: 100vh; background: #f6f7f9; padding: 24px 0 48px; font-family: system-ui, -apple-system, "Segoe UI", Roboto, "PingFang SC", "Microsoft YaHei", sans-serif; color: #1f2937; }
.dw-layout { max-width: 1200px; margin: 0 auto; padding: 0 20px; }

.dw-crumb { font-size: 13px; color: #6b7280; margin-bottom: 14px; }
.dw-crumb a { color: #6b7280; text-decoration: none; }
.dw-crumb a:hover { color: #2563eb; }
.dw-crumb-sep { margin: 0 8px; color: #c3c8d0; }

.dw-titlebox { margin-bottom: 18px; }
.dw-titlebox h1 { font-size: 26px; font-weight: 700; color: #1f2937; margin: 0 0 8px; line-height: 1.3; }
.dw-titlebox p { font-size: 14.5px; color: #6b7280; line-height: 1.7; margin: 0; }

/* ---------- 工作台外壳 ---------- */
.dw-studio { background: #fff; border: 1px solid #e5e7eb; border-radius: 14px; overflow: hidden; box-shadow: 0 1px 3px rgba(15,23,42,.05); }
.dw-topbar { display: flex; align-items: center; justify-content: space-between; gap: 10px; padding: 10px 14px; border-bottom: 1px solid #e5e7eb; background: #fafbfc; flex-wrap: wrap; }
.dw-brand { font-size: 15px; font-weight: 700; }
.dw-top-acts { display: flex; align-items: center; gap: 6px; flex-wrap: wrap; }
.dw-tact { border: 1px solid #d1d5db; background: #fff; border-radius: 7px; padding: 7px 12px; font-size: 13px; color: #374151; cursor: pointer; transition: all .15s; }
.dw-tact:hover { border-color: #3b82f6; color: #2563eb; background: #eff6ff; }
.dw-tact:active { transform: scale(.96); }
.dw-tact-warn:hover { border-color: #ef4444; color: #dc2626; background: #fef2f2; }
.dw-tact-primary { border-color: #2563eb; background: #2563eb; color: #fff; }
.dw-tact-primary:hover { background: #1d4ed8; border-color: #1d4ed8; color: #fff; }
.dw-top-sep { width: 1px; height: 18px; background: #e5e7eb; margin: 0 4px; }

.dw-body { display: flex; min-height: 560px; }
.dw-rail { width: 190px; flex: none; border-right: 1px solid #e5e7eb; background: #fafbfc; padding: 14px 12px; display: flex; flex-direction: column; gap: 16px; }
.dw-rail-sec { display: flex; flex-direction: column; gap: 8px; }
.dw-rail-label { font-size: 11px; color: #9ca3af; margin: 0; display: flex; justify-content: space-between; }
.dw-rail-label b { color: #6b7280; font-weight: 600; font-family: ui-monospace, monospace; font-size: 11px; }
.dw-tools { display: grid; grid-template-columns: repeat(3, 1fr); gap: 6px; }
.dw-ic { border: 1px solid #d1d5db; background: #fff; border-radius: 8px; padding: 7px 2px 5px; font-size: 16px; color: #374151; cursor: pointer; display: flex; flex-direction: column; align-items: center; gap: 2px; transition: all .15s; }
.dw-ic span { font-size: 10px; line-height: 1; }
.dw-ic:hover { border-color: #93c5fd; }
.dw-ic.on { border-color: #2563eb; background: #eff6ff; box-shadow: 0 0 0 1px #2563eb; }
.dw-colors { display: grid; grid-template-columns: repeat(6, 1fr); gap: 6px; }
.dw-cchip { width: 22px; height: 22px; border-radius: 6px; border: 1px solid rgba(0,0,0,.08); cursor: pointer; padding: 0; transition: transform .12s; }
.dw-cchip:hover { transform: scale(1.12); }
.dw-cchip.on { box-shadow: 0 0 0 2px #2563eb; }
.dw-custom { display: flex; flex-direction: column; align-items: center; gap: 3px; font-size: 10px; color: #9ca3af; cursor: pointer; }
.dw-custom input { width: 40px; height: 24px; border: none; border-radius: 6px; box-shadow: 0 0 0 1px #d1d5db; padding: 0; background: none; cursor: pointer; }
.dw-custom input::-webkit-color-swatch-wrapper { padding: 0; }
.dw-custom input::-webkit-color-swatch { border: none; border-radius: 6px; }
.dw-presets { display: grid; grid-template-columns: repeat(2, 1fr); gap: 4px; }
.dw-pre { display: flex; align-items: center; justify-content: center; gap: 4px; border: 1px solid #d1d5db; background: #fff; border-radius: 6px; padding: 5px 2px; font-size: 10px; color: #6b7280; cursor: pointer; }
.dw-pre i { display: inline-block; border-radius: 50%; background: currentColor; }
.dw-pre:hover { border-color: #93c5fd; }
.dw-pre.on { border-color: #2563eb; background: #eff6ff; color: #2563eb; }
.dw-slider { width: 100%; accent-color: #2563eb; }
.dw-bgs { display: grid; grid-template-columns: repeat(2, 1fr); gap: 6px; }
.dw-bg { border: 1px solid #d1d5db; background: #fff; border-radius: 7px; padding: 5px 2px 4px; font-size: 10px; color: #6b7280; cursor: pointer; display: flex; flex-direction: column; align-items: center; gap: 3px; }
.dw-bg i { display: block; width: 34px; height: 22px; border-radius: 4px; border: 1px solid #e5e7eb; }
.dw-bg i.bg-plain { background: #fff; }
.dw-bg i.bg-grid { background-color: #fff; background-image: linear-gradient(#eef1f4 1px, transparent 1px), linear-gradient(90deg, #eef1f4 1px, transparent 1px); background-size: 8px 8px; }
.dw-bg i.bg-dots { background-color: #fff; background-image: radial-gradient(#dfe5ea 1.2px, transparent 1.2px); background-size: 7px 7px; }
.dw-bg i.bg-board { background: #2b3a42; }
.dw-bg:hover { border-color: #93c5fd; }
.dw-bg.on { border-color: #2563eb; box-shadow: 0 0 0 1px #2563eb; color: #2563eb; }

.dw-stage { flex: 1; position: relative; overflow: hidden; }
.dw-stage canvas { display: block; width: 100%; height: 100%; position: absolute; inset: 0; touch-action: none; cursor: crosshair; }
.dw-hint { position: absolute; inset: 0; display: flex; align-items: center; justify-content: center; font-size: 14px; color: #d1d5db; pointer-events: none; transition: opacity .3s; z-index: 1; }
.dw-hint.off { opacity: 0; }
/* 橡皮范围预览圈：直径=橡皮实际大小，跟随鼠标 */
.dw-ring { position: absolute; border: 1.5px dashed #6b7280; border-radius: 50%; pointer-events: none; display: none; box-shadow: 0 0 0 1px rgba(255,255,255,.6); }
.dw-ring.on { display: block; }
/* 底纹（画布 CSS 背景，不进导出图） */
.bg-plain { background: #fff; }
.bg-grid { background-color: #fff; background-image: linear-gradient(#eef1f4 1px, transparent 1px), linear-gradient(90deg, #eef1f4 1px, transparent 1px); background-size: 24px 24px; }
.bg-dots { background-color: #fff; background-image: radial-gradient(#dfe5ea 1.2px, transparent 1.2px); background-size: 22px 22px; }
.bg-board { background: #2b3a42; }

.dw-status { display: flex; justify-content: space-between; flex-wrap: wrap; gap: 6px; padding: 8px 14px; border-top: 1px solid #e5e7eb; background: #fafbfc; font-size: 12px; color: #9ca3af; }

/* ---------- 工作台下方内容区块 ---------- */
.dw-block { margin-bottom: 28px; }
.dw-block-head h2 { font-size: 18px; font-weight: 600; color: #1f2937; margin: 0 0 4px; }
.dw-block-head p { font-size: 13px; color: #9ca3af; margin: 0 0 10px; }
.dw-card { background: #fff; border: 1px solid #e5e7eb; border-radius: 10px; padding: 18px; box-shadow: 0 1px 2px rgba(0,0,0,.03); }
.dw-steps { display: grid; grid-template-columns: repeat(3, 1fr); gap: 16px; }
.dw-step b { display: inline-flex; width: 26px; height: 26px; border-radius: 50%; background: #eff6ff; color: #2563eb; font-size: 13px; align-items: center; justify-content: center; margin-bottom: 8px; }
.dw-step h3 { font-size: 14px; font-weight: 600; color: #1f2937; margin: 0 0 4px; }
.dw-step p { font-size: 13px; color: #6b7280; line-height: 1.7; margin: 0; }
.dw-plays { display: grid; grid-template-columns: repeat(4, 1fr); gap: 12px; }
.dw-play { background: #fff; border: 1px solid #e5e7eb; border-radius: 10px; padding: 14px 16px; }
.dw-play-ico { font-size: 24px; display: inline-block; margin-bottom: 6px; }
.dw-play h3 { font-size: 14px; font-weight: 600; color: #1f2937; margin: 0 0 4px; }
.dw-play p { font-size: 13px; color: #6b7280; line-height: 1.7; margin: 0; }
.dw-scenes { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; }
.dw-scenes span { font-size: 13px; color: #374151; background: #f9fafb; border: 1px solid #f3f4f6; border-radius: 8px; padding: 10px 12px; }

/* ---------- 正文文档区 ---------- */
.dw-doc { background: #fff; border: 1px solid #e5e7eb; border-radius: 12px; padding: 20px; }
.dw-doc h3 { font-size: 17px; font-weight: 700; color: #1f2937; margin: 0 0 12px; }
.dw-doc p { font-size: 14px; color: #4b5563; line-height: 1.8; margin: 0 0 10px; }
.dw-doc p b { color: #1f2937; }
.dw-doc ul, .dw-doc ol { margin: 0 0 10px; padding-left: 20px; }
.dw-doc li { font-size: 14px; color: #4b5563; line-height: 1.8; }
.dw-doc h2 { font-size: 19px; font-weight: 700; color: #1f2937; margin: 22px 0 10px; }
.dw-doc table { width: 100%; border-collapse: collapse; font-size: 13.5px; margin: 10px 0 14px; }
.dw-doc th { background: #f9fafb; color: #6b7280; font-weight: 600; padding: 7px 10px; border: 1px solid #eef0f3; text-align: left; }
.dw-doc td { padding: 7px 10px; border: 1px solid #eef0f3; color: #374151; }
.dw-doc code { background: #f3f4f6; border-radius: 4px; padding: 1px 5px; font-size: 13px; }

/* ---------- FAQ ---------- */
.dw-faqbox { background: #fff; border: 1px solid #e5e7eb; border-radius: 12px; padding: 20px; }
.dw-faqbox h3 { font-size: 17px; font-weight: 700; color: #1f2937; margin: 0 0 6px; }
.dw-faq { border-bottom: 1px solid #f3f4f6; padding: 12px 0; }
.dw-faq:last-child { border-bottom: none; }
.dw-faq summary { font-size: 14px; font-weight: 600; cursor: pointer; color: #1f2937; list-style: none; position: relative; padding-left: 22px; }
.dw-faq summary::before { content: "+"; position: absolute; left: 2px; top: 50%; transform: translateY(-50%); color: #9ca3af; font-weight: 400; }
.dw-faq[open] summary::before { content: "−"; }
.dw-faq p { font-size: 13px; color: #6b7280; line-height: 1.8; margin: 8px 0 0 22px; }

/* ---------- 相关工具(底部横排) ---------- */
.dw-related { display: grid; grid-template-columns: repeat(3, 1fr); gap: 12px; }
.dw-rel-card { display: flex; align-items: flex-start; gap: 12px; background: #fff; border: 1px solid #e5e7eb; border-radius: 10px; padding: 14px; text-decoration: none; transition: border-color .15s; }
.dw-rel-card:hover { border-color: #93c5fd; }
.dw-rel-ico { width: 36px; height: 36px; flex: none; border-radius: 9px; background: #eff6ff; display: flex; align-items: center; justify-content: center; font-size: 17px; color: #2563eb; font-weight: 700; }
.dw-rel-ico-color { background: #fef2f2; }
.dw-rel-ico-lp { background: #f5f3ff; color: #7c3aed; }
.dw-rel-ico-all { background: #f0fdf4; color: #059669; }
.dw-rel-txt b { display: block; font-size: 13.5px; color: #1f2937; }
.dw-rel-txt > span { display: block; font-size: 12px; color: #9ca3af; margin-top: 2px; line-height: 1.5; }

/* ---------- toast ---------- */
.dw-toast { position: fixed; left: 50%; bottom: 40px; transform: translateX(-50%) translateY(20px); background: #111827; color: #fff; font-size: 13px; padding: 10px 20px; border-radius: 8px; opacity: 0; pointer-events: none; transition: all .25s; z-index: 999; font-family: system-ui, sans-serif; }
.dw-toast.on { opacity: 1; transform: translateX(-50%) translateY(0); }

/* ---------- 全屏形态 ---------- */
.dw-studio:fullscreen { border-radius: 0; background: #fff; }
.dw-studio:fullscreen .dw-body { min-height: calc(100vh - 110px); }

/* ---------- 响应式 ---------- */
@media (max-width: 996px) {
    .dw-plays { grid-template-columns: repeat(2, 1fr); }
    .dw-related { grid-template-columns: 1fr; }
}
@media (max-width: 760px) {
    .dw-body { flex-direction: column; min-height: 0; }
    .dw-rail { width: auto; flex-direction: row; flex-wrap: wrap; gap: 12px; border-right: none; border-bottom: 1px solid #e5e7eb; }
    .dw-rail-sec { flex: 1; min-width: 150px; }
    .dw-tools { grid-template-columns: repeat(4, 1fr); }
    .dw-stage { flex: none; height: 380px; }   /* flex:none 解除 flex-basis:0% 对 height 的覆盖, 否则 column 下塌 0 */
    .dw-status-right { display: none; }
    .dw-steps { grid-template-columns: 1fr; }
    .dw-plays { grid-template-columns: 1fr; }
    .dw-scenes { grid-template-columns: 1fr; }
}