/* 簡易 SVG 編輯器（svg_editor.js）的樣式；全部以 .sve 開頭，不影響嵌入的頁面 */
html.sve-lock, html.sve-lock body { overflow: hidden }
.sve { position: fixed; inset: 0; z-index: 2147483000; display: flex; flex-direction: column; background: #eef1ec; color: #203739;
  font: 13px/1.5 -apple-system, BlinkMacSystemFont, "Noto Sans TC", "PingFang TC", sans-serif }
.sve button { font: inherit; color: inherit; border: 1px solid #d3ddd8; background: #fff; border-radius: 7px; padding: 5px 10px; cursor: pointer }
.sve button:hover { background: #f1f6f3 }
.sve button[aria-pressed=true] { background: #24695b; border-color: #24695b; color: #fff }
.sve .sve-primary { background: #24695b; border-color: #24695b; color: #fff }
.sve-dirty .sve-primary { box-shadow: 0 0 0 3px #f2c48d }
.sve input, .sve textarea { font: inherit; border: 1px solid #d3ddd8; border-radius: 6px; padding: 4px 7px; background: #fff; color: inherit; min-width: 0 }
.sve-bar { flex: none; display: flex; align-items: center; gap: 14px; padding: 8px 14px; background: #fff; border-bottom: 1px solid #d3ddd8; min-width: 0 }
.sve-title { font-size: 14px; max-width: 24ch; flex: none; overflow: hidden; text-overflow: ellipsis; white-space: nowrap }
.sve-group { display: inline-flex; align-items: center; gap: 4px; flex: none }
.sve-group label { display: inline-flex; align-items: center; gap: 3px; white-space: nowrap }
.sve-group output { min-width: 3.4em; text-align: center; font-variant-numeric: tabular-nums }
.sve-right { margin-left: auto }
.sve-status { flex: 1; min-width: 0; color: #718080; font-size: 12px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; text-align: right }
.sve-status.sve-err { color: #c2402f; font-weight: 600 }
.sve-main { flex: 1; min-height: 0; display: grid; grid-template-columns: auto minmax(0, 1fr) 290px }
.sve-area { overflow: auto; display: flex; padding: 24px; background: repeating-conic-gradient(#e4e8e3 0 25%, #eef1ec 0 50%) 0 0 / 20px 20px; user-select: none; touch-action: none }
.sve-area[data-tool=line], .sve-area[data-tool=arrow], .sve-area[data-tool=curve], .sve-area[data-tool=curvearrow],
.sve-area[data-tool=arc], .sve-area[data-tool=arcarrow], .sve-area[data-tool=circle], .sve-area[data-tool=ellipse],
.sve-area[data-tool=rect], .sve-area[data-tool=tri], .sve-area[data-tool=battery], .sve-area[data-tool=symout],
.sve-area[data-tool=symin], .sve-area[data-tool=cube], .sve-area[data-tool=eraser] { cursor: crosshair }
.sve-rot { fill: #fff; stroke: #1e88e5; stroke-width: 1.5; pointer-events: all; cursor: grab }
.sve-rot:hover { fill: #e3f0fc }
.sve-rotln { stroke: #1e88e5; stroke-width: 1 }
.sve-rotc { stroke: #e0389a; stroke-width: 1.5; fill: none }
.sve-guide { stroke: #e0389a; stroke-width: 1; stroke-dasharray: 4 3 }
.sve-guide-pt { fill: #e0389a }
.sve-area[data-tool=text] { cursor: text }
.sve-area.sve-pan, .sve-area.sve-pan * { cursor: grab !important }
.sve-stage { position: relative; margin: auto; flex: none; box-shadow: 0 1px 6px rgba(0,0,0,.18); background: #fff }
.sve-ref { position: absolute; inset: 0; width: 100%; height: 100%; pointer-events: none }
.sve-wrap { position: absolute; inset: 0 }
.sve-wrap > svg { display: block; width: 100% !important; height: 100% !important }
.sve-ov { position: absolute; inset: 0; width: 100%; height: 100%; overflow: visible; pointer-events: none }
.sve-box { fill: none; stroke: #1e88e5; stroke-width: 1; stroke-dasharray: 4 3 }
.sve-solbox { stroke: #d4382c }
.sve-marq { fill: rgba(30,136,229,.08); stroke: #1e88e5; stroke-width: 1 }
.sve-link { stroke: #1e88e5; stroke-width: 1 }
.sve-hd { fill: #fff; stroke: #1e88e5; stroke-width: 1.5; pointer-events: all; cursor: move }
.sve-hd.sve-ctrl { fill: #e3f0fc }
.sve-hd.sve-on { fill: #f59e0b; stroke: #b45309 }
.sve-showsol .sve-wrap .sol [stroke]:not([stroke="none"]):not([stroke="#fff"]):not([stroke="white"]) { stroke: #d4382c }
.sve-showsol .sve-wrap .sol [fill="#000"], .sve-showsol .sve-wrap .sol [fill="black"], .sve-showsol .sve-wrap .sol text { fill: #d4382c }
.sve-panel { overflow: auto; background: #fff; border-left: 1px solid #d3ddd8; padding: 12px 14px 30px }
.sve-panel h3 { margin: 2px 0 6px; font-size: 15px }
.sve-muted { color: #718080; font-size: 12px; margin: 2px 0 8px }
.sve-row { display: grid; grid-template-columns: 4em 1fr; align-items: center; gap: 4px 8px; margin: 7px 0 }
.sve-row > span:first-child { color: #718080; font-size: 12px }
.sve-row.sve-col { grid-template-columns: 1fr }
.sve-sw { grid-column: 2; display: flex; flex-wrap: wrap; gap: 4px }
.sve .sve-sw button { width: 20px; height: 20px; padding: 0; border-radius: 5px; border: 1px solid #c5cfca }
.sve .sve-sw button.sve-none { background: linear-gradient(45deg, #fff 45%, #d4382c 45% 55%, #fff 55%) }
.sve .sve-sw button.sve-txt { width: auto; height: auto; padding: 1px 7px; font-size: 11px }
.sve-panel textarea { width: 100%; box-sizing: border-box; resize: vertical; font: 11px/1.45 ui-monospace, Menlo, monospace }
.sve-src, .sve-help { margin-top: 12px; border-top: 1px solid #e3e9e5; padding-top: 8px }
.sve-src summary, .sve-help summary { cursor: pointer; color: #718080; font-size: 12px }
.sve-src button { margin-top: 6px }
.sve-help ul { margin: 6px 0 0; padding-left: 18px; color: #4c5f5f; font-size: 12px }
.sve-help li { margin: 3px 0 }
.sve-pal { display: flex; flex-wrap: wrap; gap: 4px }
.sve .sve-pal button { position: relative; width: 24px; height: 24px; padding: 0; border-radius: 5px; border: 1px solid #c5cfca }
.sve .sve-pal button span { position: absolute; right: 1px; bottom: -1px; font-size: 9px; line-height: 1; color: #fff; text-shadow: 0 0 2px #000, 0 0 2px #000 }
.sve .sve-pal button.sve-none, .sve-legend i.sve-none { background: linear-gradient(45deg, #fff 45%, #d4382c 45% 55%, #fff 55%) }
.sve-legend { list-style: none; margin: 4px 0 8px; padding: 0; font-size: 12px }
.sve-legend li { display: flex; align-items: flex-start; gap: 6px; margin: 5px 0; line-height: 1.35 }
.sve-legend li > span { display: flex; flex-direction: column }
.sve-legend small { color: #718080; font-size: 11px }
.sve-legend i { margin-top: 1px }
.sve-legendbox { margin-top: 10px; border-top: 1px solid #e3e9e5; padding-top: 8px }
.sve-legendbox summary { cursor: pointer; color: #4c5f5f; font-size: 12px; font-weight: 600 }
.sve-meaning { display: flex; align-items: flex-start; gap: 6px; margin: 2px 0 8px; padding: 6px 8px; background: #f5f8f6; border-radius: 6px; font-size: 12px; line-height: 1.4 }
.sve-meaning i { width: 14px; height: 14px; border-radius: 3px; border: 1px solid #c5cfca; flex: none; margin-top: 1px }
.sve-legend i { width: 16px; height: 16px; border-radius: 4px; border: 1px solid #c5cfca; flex: none }
.sve-legend kbd { min-width: 1.2em; font: 11px ui-monospace, Menlo, monospace; color: #4c5f5f }

/* ---- 左側工具列 ---- */
.sve-rail { display: flex; flex-direction: column; gap: 2px; padding: 8px 6px; background: #fff; border-right: 1px solid #d3ddd8; overflow-y: auto; width: 76px; box-sizing: border-box }
.sve-rail hr { border: 0; border-top: 1px solid #e3e9e5; margin: 5px 4px; width: auto }
.sve .sve-tool { position: relative; display: flex; flex-direction: column; align-items: center; gap: 1px; padding: 6px 2px 4px; border: 1px solid transparent; background: none; border-radius: 8px }
.sve .sve-tool:hover { background: #f1f6f3 }
.sve .sve-tool[aria-pressed=true] { background: #24695b; border-color: #24695b; color: #fff }
.sve-tool .sve-ico { display: block; height: 18px }
.sve-tl { font-size: 11px; line-height: 1.2; white-space: nowrap }
.sve-tool kbd { position: absolute; top: 2px; right: 4px; font: 9px ui-monospace, Menlo, monospace; opacity: .55 }
.sve-tool:focus-visible, .sve button:focus-visible { outline: 2px solid #1e88e5; outline-offset: 1px }
/* ---- 上方列 ---- */
.sve-trace { gap: 10px; padding: 3px 10px; border: 1px solid #e3e9e5; border-radius: 8px; background: #f7faf8 }
.sve-trace b { font-size: 12px; color: #4c5f5f }
.sve-trace input[type=range] { width: 90px; margin-left: 4px }
.sve-state { font-size: 12px; color: #718080; min-width: 5em; text-align: right }
.sve-dirty .sve-state { color: #b45309; font-weight: 600 }
.sve-dirty .sve-primary { box-shadow: 0 0 0 3px #f2c48d }
/* ---- 右側面板 ---- */
.sve-head { display: flex; align-items: baseline; justify-content: space-between; gap: 8px }
.sve .sve-link { border: 0; background: none; padding: 0; color: #1e6fb8; font-size: 12px; cursor: pointer; margin-left: auto }
.sve .sve-link:hover { background: none; text-decoration: underline }
.sve-acts { display: flex; flex-wrap: wrap; gap: 4px; margin: 4px 0 10px }
.sve .sve-acts button { padding: 3px 8px; font-size: 12px }
.sve-box2 { margin: 6px 0; padding: 8px; border: 1px solid #e3e9e5; border-radius: 8px }
.sve-boxhd { display: flex; align-items: center; justify-content: space-between; margin-bottom: 6px; font-size: 12px; color: #718080 }
.sve-seg { display: inline-flex; border: 1px solid #d3ddd8; border-radius: 7px; overflow: hidden }
.sve .sve-seg button { border: 0; border-left: 1px solid #d3ddd8; border-radius: 0; padding: 2px 10px; font-size: 12px }
.sve .sve-seg button:first-child { border-left: 0 }
.sve .sve-seg button[aria-pressed=true] { background: #24695b; color: #fff }
.sve .sve-seg-sm button { padding: 2px 7px }
.sve-meaning { align-items: center }
.sve-step { display: flex; gap: 4px; align-items: center }
.sve-step input { width: 5em }
.sve .sve-step button { width: 28px; padding: 3px 0 }
.sve .sve-tool.sve-toggle[aria-pressed=true] { background: #e3f1ec; border-color: #9cc8b8; color: #1d5a4d }
.sve kbd { border: 0; background: none; box-shadow: none; padding: 0; border-radius: 0 }
/* ---- 畫布大小 ---- */
.sve-canvas { display: flex; align-items: center; gap: 8px; flex-wrap: wrap }
.sve-canvas label { display: flex; align-items: center; gap: 4px; font-size: 12px; color: #718080 }
.sve-canvas input { width: 5em }
.sve-anchor { display: grid; grid-template-columns: repeat(3, 14px); gap: 2px; margin-left: auto }
.sve .sve-anchor button { width: 14px; height: 14px; padding: 0; border: 1px solid #b9c7c1; border-radius: 3px; background: #fff }
.sve .sve-anchor button[aria-pressed=true] { background: #24695b; border-color: #24695b }

.sve-marq.sve-erase { fill: rgba(212,56,44,.1); stroke: #d4382c; stroke-dasharray: 4 3 }
.sve .sve-syms button.sve-txt { min-width: 24px; padding: 1px 5px; font-size: 13px; font-family: "Times New Roman", serif }
.sve-font { display: flex; flex-direction: column; gap: 4px; min-width: 0 }
.sve select { font: inherit; border: 1px solid #d3ddd8; border-radius: 6px; padding: 3px 5px; background: #fff; color: inherit; min-width: 0; width: 100% }