* {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
}

:root {
    --red-primary: #c41e3a;
    --red-deep: #a83249;
    --red: var(--red-primary);
    --blue-teal: #547584;
    --blue-teal-dark: #466370;
    --blue: var(--border-blue);
    --yellow: #d6c588;
    --orange: #d1774c;
    --border-blue: #73a9cf;
    --border-yellow: #f8e7a0;
    --text-primary: #333333;
    --text-gray: #666666;
    --gray-text: var(--text-gray);
    --bg-white: #ffffff;
}

body {
    font-family: "Microsoft YaHei", "PingFang SC", sans-serif;
    background: var(--bg-white);
    color: var(--text-primary);
    padding: 20px;
    line-height: 1.4;
    overflow-x: auto;
}

.canvas {
    position: relative;
    width: 1780px;
    height: 1200px;
    margin: 0 auto;
}

/* 通用盒子样式 */
.box {
    position: absolute;
    border: 1px solid var(--border-blue);
    padding: 6px 10px !important;
    font-size: 11px;
    line-height: 1.5;
    cursor: pointer;
    transition: box-shadow 0.2s ease, transform 0.2s ease, border-color 0.2s ease, background-color 0.2s ease, border-width 0.2s ease;
    z-index: 1;
    box-sizing: border-box;
    display: flex;
    flex-direction: column;
    align-items: stretch;
    justify-content: center;
}

/* 方框内内容默认撑满宽度，保持原有左对齐 */
.box > * {
    width: 100%;
}

/* 方框悬停效果：仅作用于.box类，不影响线条、箭头、文字标签 */
.box:hover {
    box-shadow: 0 3px 10px rgba(0,0,0,0.15);
    z-index: 10;
    border-width: 2px;
}

/* 不同颜色方框悬停时适配 */
.box.red:hover {
    box-shadow: 0 4px 12px rgba(196, 30, 58, 0.3);
}
.box.blue:hover {
    box-shadow: 0 4px 12px rgba(84, 117, 132, 0.3);
}
.box.orange:hover {
    box-shadow: 0 4px 12px rgba(209, 119, 76, 0.3);
}
.box.yellow:hover {
    box-shadow: 0 4px 12px rgba(214, 197, 136, 0.4);
}
.box.white:hover {
    border-color: #3b82f6;
    background: #f8fafc;
    box-shadow: 0 4px 12px rgba(59, 130, 246, 0.2);
}

/* 透明分组框 - 底色完全透明，默认虚线边框 */
.box.transparent {
    background: transparent !important;
    border: 1px dashed var(--border-blue);
    z-index: 0;
}

/* 透明框悬停效果 - 边框变实线加深，依然保持透明底色 */
.box.transparent:hover {
    border: 2px solid #3b82f6;
    box-shadow: 0 0 0 2px rgba(59, 130, 246, 0.1);
    z-index: 10;
    background: transparent !important;
}

/* 修复execCommand生成的font标签字号映射，确保局部选中修改字号正确 */
.box font[size="1"] { font-size: 12px !important; }
.box font[size="2"] { font-size: 13px !important; }
.box font[size="3"] { font-size: 14px !important; }
.box font[size="4"] { font-size: 16px !important; }
.box font[size="5"] { font-size: 18px !important; }
.box font[size="6"] { font-size: 20px !important; }
.box font[size="7"] { font-size: 24px !important; }

/* 编辑框内列表样式：确保项目符号/编号正常显示 */
[contenteditable="true"] ul,
.box ul,
.outer-frame ul,
.inner-frame ul {
    list-style: disc;
    padding-left: 18px;
    margin: 4px 0;
}
[contenteditable="true"] ol,
.box ol,
.outer-frame ol,
.inner-frame ol {
    list-style: decimal;
    padding-left: 20px;
    margin: 4px 0;
}
[contenteditable="true"] li,
.box li,
.outer-frame li,
.inner-frame li {
    margin-bottom: 2px;
    text-align: left;
}

.box.red {
    background: var(--red-primary);
    color: white;
    border-color: var(--red-primary);
    text-align: center;
    font-weight: bold;
    font-size: 18px;
    padding: 8px 12px;
    justify-content: center;
    align-items: center;
}

.box.red-deep {
    background: var(--red-deep);
    color: white;
    border-color: var(--red-deep);
    text-align: center;
    font-weight: bold;
    border-radius: 6px;
    padding: 12px 20px;
    font-size: 15px;
    justify-content: center;
    align-items: center;
}

.box.blue {
    background: var(--blue-teal);
    color: white;
    border-color: var(--blue-teal-dark);
}

.box.yellow {
    background: var(--yellow);
    color: var(--text-primary);
    border-color: #c4b377;
}

.box.orange {
    background: var(--orange);
    color: white;
    border-color: #b8653d;
}

.box.white {
    background: white;
}

.box-header {
    background: var(--blue-teal);
    color: white;
    padding: 3px 6px;
    text-align: center;
    margin: -6px -8px 6px -8px;
    font-weight: bold;
}

.box-sub-item {
    background: var(--blue-teal-dark);
    color: white;
    padding: 4px 6px;
    margin: 3px 0;
    text-align: center;
}

/* 文字标签 */
.label {
    position: absolute;
    font-size: 13px;
    color: var(--text-gray);
    font-weight: bold;
    cursor: pointer;
    transition: color 0.2s ease, transform 0.2s ease, background-color 0.2s ease;
    padding: 2px 4px;
    border-radius: 3px;
    z-index: 1;
}

/* 文字标签悬停效果 */
.label:hover {
    color: var(--red-primary);
    background: rgba(196, 30, 58, 0.08);
}

.label-red:hover {
    color: #fff;
    background: var(--red-primary);
}

.label-blue:hover {
    color: var(--border-blue);
    background: rgba(115, 169, 207, 0.15);
}

.label-red {
    color: var(--red-primary);
    font-weight: bold;
}

.label-blue {
    color: var(--border-blue);
}

.label-small {
    font-size: 11px;
}

/* 连接线 + 粒子流动画 */
@keyframes flow-right {
    0% { background-position: 0 0; }
    100% { background-position: 20px 0; }
}
@keyframes flow-left {
    0% { background-position: 20px 0; }
    100% { background-position: 0 0; }
}
@keyframes flow-down {
    0% { background-position: 0 0; }
    100% { background-position: 0 20px; }
}
@keyframes flow-up {
    0% { background-position: 0 20px; }
    100% { background-position: 0 0; }
}

/* 粒子流关闭状态：隐藏所有粒子层，停止动画（双向箭头的::before是左箭头/上箭头，不隐藏） */
body.particles-disabled .line-h.arrow-right::before,
body.particles-disabled .line-h.arrow-left::before,
body.particles-disabled .line-v.arrow-up::before,
body.particles-disabled .line-v.arrow-down::before,
body.particles-disabled .line-polyline .poly-h::before,
body.particles-disabled .line-polyline .poly-v::before {
    display: none !important;
    animation: none !important;
}

.line-h {
    position: absolute;
    height: var(--line-thickness, 2px);
    background: var(--border-blue);
    overflow: visible;
    z-index: 1;
    --line-thickness: 2px;
    --arrow-size: 8px;
    --arrow-width: 5px;
    --arrow-offset: -4px;
}
.line-h[data-thickness="1"] {
    --arrow-size: 4px;
    --arrow-width: 2.5px;
    --arrow-offset: -2px;
}
.line-h[data-thickness="2"] {
    --arrow-size: 8px;
    --arrow-width: 5px;
    --arrow-offset: -4px;
}
.line-h[data-thickness="3"] {
    --arrow-size: 12px;
    --arrow-width: 7.5px;
    --arrow-offset: -6px;
}
.line-h[data-thickness="4"] {
    --arrow-size: 16px;
    --arrow-width: 10px;
    --arrow-offset: -8px;
}
/* 右箭头粒子流：用独立::before伪元素层，不受内联background影响，箭头用::after互不冲突 */
.line-h.arrow-right::before {
    content: '';
    position: absolute;
    left: 0;
    top: 0;
    width: 100%;
    height: 100%;
    background-image: radial-gradient(circle, rgba(255,255,255,0.9) 1px, transparent 1px);
    background-size: 20px 2px;
    animation: flow-right 1.2s linear infinite;
    pointer-events: none;
    z-index: 1;
}
/* 左箭头粒子流 */
.line-h.arrow-left::before {
    content: '';
    position: absolute;
    left: 0;
    top: 0;
    width: 100%;
    height: 100%;
    background-image: radial-gradient(circle, rgba(255,255,255,0.9) 1px, transparent 1px);
    background-size: 20px 2px;
    animation: flow-left 1.2s linear infinite;
    pointer-events: none;
    z-index: 1;
}

.line-h.red {
    background: var(--red-primary);
}
/* 红色线条粒子亮度更高 */
.line-h.red.arrow-right::before,
.line-h.red.arrow-left::before {
    background-image: radial-gradient(circle, rgba(255,255,255,1) 1px, transparent 1px);
}

.line-v {
    position: absolute;
    width: var(--line-thickness, 2px);
    background: var(--border-blue);
    overflow: visible;
    z-index: 1;
    --line-thickness: 2px;
    --arrow-size: 8px;
    --arrow-width: 5px;
    --arrow-offset: -4px;
}
.line-v[data-thickness="1"] {
    --arrow-size: 4px;
    --arrow-width: 2.5px;
    --arrow-offset: -2px;
}
.line-v[data-thickness="2"] {
    --arrow-size: 8px;
    --arrow-width: 5px;
    --arrow-offset: -4px;
}
.line-v[data-thickness="3"] {
    --arrow-size: 12px;
    --arrow-width: 7.5px;
    --arrow-offset: -6px;
}
.line-v[data-thickness="4"] {
    --arrow-size: 16px;
    --arrow-width: 10px;
    --arrow-offset: -8px;
}
/* 下箭头粒子流 */
.line-v.arrow-down::before {
    content: '';
    position: absolute;
    left: 0;
    top: 0;
    width: 100%;
    height: 100%;
    background-image: radial-gradient(circle, rgba(255,255,255,0.9) 1px, transparent 1px);
    background-size: 2px 20px;
    animation: flow-down 1.2s linear infinite;
    pointer-events: none;
    z-index: 1;
}
/* 上箭头粒子流 */
.line-v.arrow-up::before {
    content: '';
    position: absolute;
    left: 0;
    top: 0;
    width: 100%;
    height: 100%;
    background-image: radial-gradient(circle, rgba(255,255,255,0.9) 1px, transparent 1px);
    background-size: 2px 20px;
    animation: flow-up 1.2s linear infinite;
    pointer-events: none;
    z-index: 1;
}

.line-v.red {
    background: var(--red-primary);
}
.line-v.red.arrow-down::before,
.line-v.red.arrow-up::before {
    background-image: radial-gradient(circle, rgba(255,255,255,1) 1px, transparent 1px);
}

/* 箭头 */
.arrow-right::after {
    content: '';
    position: absolute;
    right: calc(var(--arrow-size) * -0.9);
    top: var(--arrow-offset);
    border-top: var(--arrow-width) solid transparent;
    border-bottom: var(--arrow-width) solid transparent;
    border-left: var(--arrow-size) solid var(--border-blue);
}

.arrow-right.red::after {
    border-left-color: var(--red-primary);
}

.arrow-left::after {
    content: '';
    position: absolute;
    left: calc(var(--arrow-size) * -0.9);
    top: var(--arrow-offset);
    border-top: var(--arrow-width) solid transparent;
    border-bottom: var(--arrow-width) solid transparent;
    border-right: var(--arrow-size) solid var(--border-blue);
}

.arrow-left.red::after {
    border-right-color: var(--red-primary);
}

.arrow-down::after {
    content: '';
    position: absolute;
    bottom: calc(var(--arrow-size) * -0.9);
    left: var(--arrow-offset);
    border-left: var(--arrow-width) solid transparent;
    border-right: var(--arrow-width) solid transparent;
    border-top: var(--arrow-size) solid var(--border-blue);
}

.arrow-down.red::after {
    border-top-color: var(--red-primary);
}

.arrow-up::after {
    content: '';
    position: absolute;
    top: calc(var(--arrow-size) * -0.9);
    left: var(--arrow-offset);
    border-left: var(--arrow-width) solid transparent;
    border-right: var(--arrow-width) solid transparent;
    border-bottom: var(--arrow-size) solid var(--border-blue);
}

.arrow-up.red::after {
    border-bottom-color: var(--red-primary);
}

/* 双向箭头 */
.line-h.arrow-both-h::before,
.line-h.arrow-both-h::after {
    content: '';
    position: absolute;
    top: var(--arrow-offset);
    border-top: var(--arrow-width) solid transparent;
    border-bottom: var(--arrow-width) solid transparent;
    z-index: 2;
    pointer-events: none;
}
.line-h.arrow-both-h::before {
    left: calc(var(--arrow-size) * -0.9);
    border-right: var(--arrow-size) solid var(--border-blue);
    display: block !important;
    width: 0 !important;
    height: 0 !important;
    background: transparent !important;
    animation: none !important;
}
.line-h.arrow-both-h::after {
    right: calc(var(--arrow-size) * -0.9);
    border-left: var(--arrow-size) solid var(--border-blue);
    display: block !important;
}
.line-h.arrow-both-h.red::before {
    border-right-color: var(--red-primary);
}
.line-h.arrow-both-h.red::after {
    border-left-color: var(--red-primary);
}

/* L形折线容器（水平段+垂直段，左端点为定位原点，右拐向下） */
.line-polyline {
    position: absolute;
    width: 0;
    height: 0;
    z-index: 1;
}
.line-polyline .poly-h {
    position: absolute;
    left: 0;
    top: 0;
    height: var(--line-thickness, 2px);
    width: 100px;
    background: var(--border-blue);
    overflow: visible;
    --line-thickness: 2px;
    --arrow-size: 8px;
    --arrow-width: 5px;
    --arrow-offset: -4px;
}
.line-polyline .poly-v {
    position: absolute;
    left: 100px;
    top: 0;
    width: var(--line-thickness, 2px);
    height: 100px;
    background: var(--border-blue);
    overflow: visible;
    --line-thickness: 2px;
    --arrow-size: 8px;
    --arrow-width: 5px;
    --arrow-offset: -4px;
}
.line-polyline[data-thickness="1"] .poly-h,
.line-polyline[data-thickness="1"] .poly-v {
    --arrow-size: 4px;
    --arrow-width: 2.5px;
    --arrow-offset: -2px;
}
.line-polyline[data-thickness="2"] .poly-h,
.line-polyline[data-thickness="2"] .poly-v {
    --arrow-size: 8px;
    --arrow-width: 5px;
    --arrow-offset: -4px;
}
.line-polyline[data-thickness="3"] .poly-h,
.line-polyline[data-thickness="3"] .poly-v {
    --arrow-size: 12px;
    --arrow-width: 7.5px;
    --arrow-offset: -6px;
}
.line-polyline[data-thickness="4"] .poly-h,
.line-polyline[data-thickness="4"] .poly-v {
    --arrow-size: 16px;
    --arrow-width: 10px;
    --arrow-offset: -8px;
}
/* L形折线粒子流 - 错开箭头伪元素使用：右箭头用before，左箭头用after，下箭头用before，上箭头用after，完全不覆盖箭头 */
.line-polyline .poly-h.arrow-right::before {
    content: '';
    position: absolute;
    left: 0;
    top: 0;
    width: 100%;
    height: 100%;
    background-image: radial-gradient(circle, rgba(255,255,255,0.9) 1px, transparent 1px);
    background-size: 20px 2px;
    animation: flow-right 1.2s linear infinite;
    pointer-events: none;
    z-index: 0;
}
.line-polyline .poly-h.arrow-left::after {
    content: '';
    position: absolute;
    left: 0;
    top: 0;
    width: 100%;
    height: 100%;
    background-image: radial-gradient(circle, rgba(255,255,255,0.9) 1px, transparent 1px);
    background-size: 20px 2px;
    animation: flow-left 1.2s linear infinite;
    pointer-events: none;
    z-index: 0;
}
.line-polyline .poly-v.arrow-down::before {
    content: '';
    position: absolute;
    left: 0;
    top: 0;
    width: 100%;
    height: 100%;
    background-image: radial-gradient(circle, rgba(255,255,255,0.9) 1px, transparent 1px);
    background-size: 2px 20px;
    animation: flow-down 1.2s linear infinite;
    pointer-events: none;
    z-index: 0;
}
.line-polyline .poly-v.arrow-up::after {
    content: '';
    position: absolute;
    left: 0;
    top: 0;
    width: 100%;
    height: 100%;
    background-image: radial-gradient(circle, rgba(255,255,255,0.9) 1px, transparent 1px);
    background-size: 2px 20px;
    animation: flow-up 1.2s linear infinite;
    pointer-events: none;
    z-index: 0;
}

.line-polyline.red .poly-h,
.line-polyline.red .poly-v {
    background: var(--red-primary);
}
.line-polyline.red .poly-h.arrow-right::before,
.line-polyline.red .poly-h.arrow-left::after,
.line-polyline.red .poly-v.arrow-down::before,
.line-polyline.red .poly-v.arrow-up::after {
    background-image: radial-gradient(circle, rgba(255,255,255,1) 1px, transparent 1px);
}
/* 折线复用现有横线竖线箭头样式 */
.line-polyline .poly-h.arrow-left::before {
    content: '';
    position: absolute;
    left: calc(var(--arrow-size) * -0.9);
    top: var(--arrow-offset);
    border-top: var(--arrow-width) solid transparent;
    border-bottom: var(--arrow-width) solid transparent;
    border-right: var(--arrow-size) solid var(--border-blue);
}
.line-polyline .poly-h.arrow-right::after {
    content: '';
    position: absolute;
    right: calc(var(--arrow-size) * -0.9);
    top: var(--arrow-offset);
    border-top: var(--arrow-width) solid transparent;
    border-bottom: var(--arrow-width) solid transparent;
    border-left: var(--arrow-size) solid var(--border-blue);
}
.line-polyline .poly-v.arrow-up::before {
    content: '';
    position: absolute;
    top: calc(var(--arrow-size) * -0.9);
    left: var(--arrow-offset);
    border-left: var(--arrow-width) solid transparent;
    border-right: var(--arrow-width) solid transparent;
    border-bottom: var(--arrow-size) solid var(--border-blue);
}
.line-polyline .poly-v.arrow-down::after {
    content: '';
    position: absolute;
    bottom: calc(var(--arrow-size) * -0.9);
    left: var(--arrow-offset);
    border-left: var(--arrow-width) solid transparent;
    border-right: var(--arrow-width) solid transparent;
    border-top: var(--arrow-size) solid var(--border-blue);
}
.line-polyline.red .poly-h.arrow-left::before {
    border-right-color: var(--red-primary);
}
.line-polyline.red .poly-h.arrow-right::after {
    border-left-color: var(--red-primary);
}
.line-polyline.red .poly-v.arrow-up::before {
    border-bottom-color: var(--red-primary);
}
.line-polyline.red .poly-v.arrow-down::after {
    border-top-color: var(--red-primary);
}

.line-v.arrow-both-v::before,
.line-v.arrow-both-v::after {
    content: '';
    position: absolute;
    left: var(--arrow-offset);
    border-left: var(--arrow-width) solid transparent;
    border-right: var(--arrow-width) solid transparent;
    z-index: 2;
    pointer-events: none;
}
.line-v.arrow-both-v::before {
    top: calc(var(--arrow-size) * -0.9);
    border-bottom: var(--arrow-size) solid var(--border-blue);
    display: block !important;
    width: 0 !important;
    height: 0 !important;
    background: transparent !important;
    animation: none !important;
}
.line-v.arrow-both-v::after {
    bottom: calc(var(--arrow-size) * -0.9);
    border-top: var(--arrow-size) solid var(--border-blue);
    display: block !important;
}
.line-v.arrow-both-v.red::before {
    border-bottom-color: var(--red-primary);
}
.line-v.arrow-both-v.red::after {
    border-top-color: var(--red-primary);
}

/* 大框 */
.outer-frame {
    position: absolute;
    border: 2px solid var(--border-blue);
}

.inner-frame {
    position: absolute;
    border: 2px solid var(--border-yellow);
}

.vertical-text {
    position: absolute;
    writing-mode: vertical-rl;
    text-orientation: upright;
    font-weight: bold;
    letter-spacing: 3px;
}