/* ===========================
   Global
=========================== */

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

html, body{
    width:100%; height:100%;
    overflow:hidden;
    background:#090909;
    font-family: "PingFang SC", "Microsoft YaHei", sans-serif;
    color:white;
    -webkit-tap-highlight-color: transparent;
}

#viewport{
    width:100vw; height:100vh;
    overflow:hidden;
    cursor:grab;
    position:relative;
    touch-action: none; /* 禁止浏览器手势 */
    -webkit-user-select: none;
    user-select: none;
}

#viewport:active{ cursor:grabbing; }

#canvas{
    position:absolute; left:0; top:0;
    transform-origin:0 0;
}

#svgLayer{
    position:absolute; left:0; top:0;
    overflow:visible; pointer-events:none;
}

#nodeLayer{
    position:absolute; left:0; top:0;
}

/* ===========================
   一级 — 纯文字
=========================== */
.node-level1{
    position:absolute;
    font-size:40px; font-weight:800;
    letter-spacing:3px; white-space:nowrap;
    cursor:pointer; user-select:none;
    transition:.25s; color:#666;
}
.node-level1:hover{ transform:scale(1.05); }
.node-level1.prefer{ color:#22c55e; }
.node-level1.some  { color:#3b82f6; }
.node-level1.normal{ color:#f59e0b; }
.node-level1.reject{ color:#ef4444; }

/* ===========================
   二级 — 圆角矩形
=========================== */
.node-level2{
    position:absolute; min-width:120px;
    padding:10px 18px; border-radius:10px;
    text-align:center; font-size:17px; font-weight:700;
    cursor:pointer; user-select:none; transition:.2s;
    border:2px solid #555; color:#ccc; background:transparent;
}
.node-level2:hover{ transform:translateY(-2px); }
.node-level2.prefer{ background:rgba(34,197,94,.15); border-color:#22c55e; color:#34d399; box-shadow:0 0 12px rgba(34,197,94,.45); }
.node-level2.some  { background:rgba(59,130,246,.15); border-color:#3b82f6; color:#60a5fa; box-shadow:0 0 12px rgba(59,130,246,.45); }
.node-level2.normal{ background:rgba(245,158,11,.15); border-color:#f59e0b; color:#fbbf24; box-shadow:0 0 12px rgba(245,158,11,.45); }
.node-level2.reject{ background:rgba(239,68,68,.15); border-color:#ef4444; color:#f87171; box-shadow:0 0 12px rgba(239,68,68,.45); }

/* ===========================
   三级 — 胶囊
=========================== */
.node-level3{
    position:absolute;
    padding:6px 14px; border-radius:999px;
    border:1px solid #555; background:#111; color:#ddd;
    font-size:14px; white-space:nowrap;
    cursor:pointer; user-select:none; transition:.2s;
}
.node-level3:hover{ border-color:white; color:white; }
.node-level3.prefer{ background:rgba(34,197,94,.2); border-color:#22c55e; color:#34d399; box-shadow:0 0 8px rgba(34,197,94,.3); }
.node-level3.some  { background:rgba(59,130,246,.2); border-color:#3b82f6; color:#60a5fa; box-shadow:0 0 8px rgba(59,130,246,.3); }
.node-level3.normal{ background:rgba(245,158,11,.2); border-color:#f59e0b; color:#fbbf24; box-shadow:0 0 8px rgba(245,158,11,.3); }
.node-level3.reject{ background:rgba(239,68,68,.2); border-color:#ef4444; color:#f87171; box-shadow:0 0 8px rgba(239,68,68,.3); }

/* ===========================
   SVG 连线
=========================== */
#svgLayer path{ fill:none; stroke-linecap:round; }
.line-green { stroke:#22c55e; }
.line-blue  { stroke:#3b82f6; }
.line-orange{ stroke:#f59e0b; }
.line-red   { stroke:#ef4444; }
.line-gray  { stroke:#555; }

/* ===========================
   滚动条
=========================== */
#scrollbar{
    position:fixed; right:4px;
    top:max(8px, calc(env(safe-area-inset-top) + 2px));
    bottom:max(8px, env(safe-area-inset-bottom));
    width:8px; z-index:999;
    pointer-events:none; opacity:0; transition:opacity .3s;
}
#scrollbar.visible{ opacity:1; pointer-events:auto; }
#scrollTrack{
    width:100%; height:100%;
    background:rgba(255,255,255,.04); border-radius:4px;
    position:relative;
}
#scrollThumb{
    position:absolute; left:0; width:100%; min-height:30px;
    background:rgba(255,255,255,.2); border-radius:4px;
    cursor:pointer; transition:background .15s;
}
#scrollThumb:hover{ background:rgba(255,255,255,.35); }
#scrollThumb:active{ background:rgba(255,255,255,.5); }

/* ===========================
   导出提示
=========================== */
#exportToast{
    position:fixed; top:50%; left:50%; transform:translate(-50%,-50%);
    padding:12px 28px; border-radius:10px;
    background:rgba(17,17,17,.94); border:1px solid #333;
    color:#ccc; font-size:15px; z-index:2000;
    pointer-events:none; opacity:0; transition:opacity .3s;
}
#exportToast.show{ opacity:1; }

/* ===========================
   顶部表格栏
=========================== */
#tableBar{
    position:fixed; top:0; left:0; right:0; z-index:1000;
    display:flex; align-items:center; gap:8px;
    padding:6px 12px;
    padding-top:max(6px, env(safe-area-inset-top));
    background:rgba(9,9,9,.88);
    backdrop-filter:blur(8px); border-bottom:1px solid #1a1a1a;
}
#tableBar .tableLabel{ color:#555; font-size:13px; user-select:none; }
#tableBar select{
    padding:4px 8px; border:1px solid #333; border-radius:6px;
    background:#111; color:#ccc; font-size:13px;
    font-family:inherit; outline:none; cursor:pointer;
}
#tableBar select:focus{ border-color:#555; }
#tableBar button{
    padding:4px 12px; border:1px solid #333; border-radius:6px;
    background:#111; color:#999; font-size:13px;
    font-family:inherit; cursor:pointer; transition:all .15s;
}
#tableBar button:hover{ border-color:#555; color:#ccc; }
#tableBar .spacer{ flex:1; }
#tableBar .btn-export{ color:#34d399; border-color:#064e3b; }
#tableBar .btn-export:hover{ border-color:#22c55e; color:#22c55e; }
#viewport{ padding-top:38px; }

/* ===========================
   备注行
=========================== */
.node-note{
    position:absolute;
    width:var(--note-w, 260px);
    padding:4px 8px; border:none; border-radius:4px;
    background:transparent; color:transparent;
    font-size:12px; font-family:inherit; outline:none;
    pointer-events:auto; transition:background .2s;
}
.node-note:hover{ background:rgba(255,255,255,.03); }
.node-note:focus{
    background:#0d0d0d; color:#999;
    width:var(--note-focus-w, 400px);
    max-width:calc(100vw - 40px);
}
.node-note:not(:placeholder-shown){ color:#666; }
.node-note:not(:placeholder-shown):hover{ color:#999; }
.node-note::placeholder{ color:transparent; }
.node-note:hover::placeholder{ color:#333; }
.node-note:focus::placeholder{ color:#444; }

/* 备注保存状态指示器 */
.node-note.saving{
    box-shadow: inset 0 -2px 0 #f59e0b;
}
.node-note.saved{
    box-shadow: inset 0 -2px 0 #22c55e;
}
.node-note.save-err{
    box-shadow: inset 0 -2px 0 #ef4444;
}

/* ==========================================
   移动端适配 (≤ 700px)
========================================== */
@media (max-width: 700px) {
    .node-level1{ font-size:22px; letter-spacing:1px; }
    .node-level2{
        font-size:13px; font-weight:600;
        padding:6px 10px; min-width:64px;
        border-radius:7px; border-width:1.5px;
    }
    .node-level3{
        font-size:11px; padding:5px 10px;
    }
    #tableBar{
        padding:5px 10px; gap:6px;
    }
    #tableBar .tableLabel{ font-size:12px; }
    #tableBar select{ font-size:12px; padding:5px 8px; }
    #tableBar button{ font-size:12px; padding:5px 10px; }
    #viewport{ padding-top:34px; }
    #scrollbar{ right:2px; width:6px;
        top:max(34px, calc(env(safe-area-inset-top) + 4px)); }
    #scrollThumb{ min-height:20px; }
    .node-note{ font-size:11px; }
    .node-note:focus{ max-width:calc(100vw - 32px); }

    /* iOS 禁止长按菜单 */
    .node-level1, .node-level2, .node-level3{
        -webkit-touch-callout: none;
    }
}

/* ==========================================
   平板适配 (701px – 1024px)
========================================== */
@media (min-width: 701px) and (max-width: 1024px) {
    .node-level1{ font-size:28px; letter-spacing:2px; }
    .node-level2{
        font-size:14px; font-weight:700;
        padding:8px 14px; min-width:90px;
        border-radius:8px; border-width:2px;
    }
    .node-level3{
        font-size:12px; padding:5px 12px;
    }
    #tableBar{
        padding:5px 12px; gap:6px;
    }
    #tableBar .tableLabel{ font-size:12px; }
    #tableBar select{ font-size:12px; padding:4px 8px; }
    #tableBar button{ font-size:12px; padding:4px 10px; }
    #viewport{ padding-top:36px; }
    #scrollbar{ right:3px; width:7px;
        top:max(36px, calc(env(safe-area-inset-top) + 4px)); }
    #scrollThumb{ min-height:24px; }
    .node-note{ font-size:11px; }
    .node-note:focus{ max-width:calc(100vw - 50px); }
}

/* ==========================================
   重置视图按钮
========================================== */
#btnReset{
    position:fixed; right:16px; bottom:max(24px, calc(env(safe-area-inset-bottom) + 8px));
    z-index:1100;
    width:44px; height:44px; border-radius:50%;
    border:1px solid #333; background:rgba(9,9,9,.88);
    backdrop-filter:blur(8px);
    color:#999; font-size:20px; line-height:1;
    cursor:pointer; transition:all .25s;
    opacity:0; transform:scale(.8);
    pointer-events:none;
    display:flex; align-items:center; justify-content:center;
    -webkit-tap-highlight-color: transparent;
}
#btnReset.visible{
    opacity:1; transform:scale(1); pointer-events:auto;
}
#btnReset:hover{ border-color:#555; color:#ccc; }
#btnReset:active{ background:rgba(255,255,255,.08); }

/* ==========================================
   导出遮罩
========================================== */
#exportOverlay{
    position:fixed; inset:0; z-index:3000;
    background:rgba(9,9,9,.7); backdrop-filter:blur(4px);
    display:flex; align-items:center; justify-content:center;
    opacity:0; pointer-events:none; transition:opacity .3s;
}
#exportOverlay.show{ opacity:1; pointer-events:auto; }
#exportOverlay .overlay-text{
    padding:16px 32px; border-radius:12px;
    background:rgba(17,17,17,.94); border:1px solid #333;
    color:#ccc; font-size:14px;
    text-align:left; white-space:pre-line;
    max-width:min(480px, 90vw);
    line-height:1.6;
}

/* ==========================================
   新建表格弹窗
========================================== */
.modal-overlay{
    position:fixed; inset:0; z-index:4000;
    background:rgba(0,0,0,.6); backdrop-filter:blur(4px);
    display:flex; align-items:center; justify-content:center;
    opacity:0; pointer-events:none; transition:opacity .25s;
}
.modal-overlay.show{ opacity:1; pointer-events:auto; }
.modal-box{
    background:#151515; border:1px solid #333; border-radius:12px;
    padding:20px 24px; width:min(320px, 90vw);
    display:flex; flex-direction:column; gap:14px;
}
.modal-title{ color:#ccc; font-size:16px; font-weight:600; text-align:center; }
.modal-box input{
    padding:10px 12px; border:1px solid #333; border-radius:8px;
    background:#0d0d0d; color:#ddd; font-size:15px; font-family:inherit;
    outline:none; transition:border-color .15s;
}
.modal-box input:focus{ border-color:#555; }
.modal-btns{ display:flex; gap:10px; justify-content:flex-end; }
.modal-btns button{
    padding:8px 18px; border:1px solid #333; border-radius:8px;
    background:#111; color:#999; font-size:14px; font-family:inherit;
    cursor:pointer; transition:all .15s;
}
.modal-btns button:hover{ border-color:#555; color:#ccc; }
.modal-btns .btn-confirm{ color:#34d399; border-color:#064e3b; }
.modal-btns .btn-confirm:hover{ border-color:#22c55e; color:#22c55e; }