/* 刚好AI画布 · studio.css —— 独立实体，不引用站点存量样式 */
:root{
  --bg0:#120823; --bg1:#1d0d38; --bg2:#2a1252;
  --bg-home:#0f0a1e;
  --ink:#f3ecff; --ink-2:#c9bce6; --ink-3:#9a8cba;
  --line:rgba(168,132,255,.18); --line-2:rgba(168,132,255,.34);
  --glass:rgba(32,16,58,.78); --glass-2:rgba(24,11,44,.92);
  --acc:#a78bfa; --acc-2:#8b5cf6; --pink:#f472b6; --cyan:#67e8f9; --amber:#fbbf24;
  --r:14px; --shadow:0 18px 48px rgba(6,2,18,.62);
  --font:"PingFang SC","Microsoft YaHei","Segoe UI",system-ui,sans-serif;
}
*{box-sizing:border-box}
html,body{height:100%;margin:0;overflow:hidden;background:var(--bg0);color:var(--ink);font-family:var(--font);-webkit-font-smoothing:antialiased}
button{font:inherit;color:inherit;background:none;border:0;cursor:pointer}
svg{display:block}
::selection{background:rgba(167,139,250,.35)}

/* ---------- 画布 ---------- */
.stage{position:fixed;inset:0;background:var(--bg-home)}
.grid-layer{position:absolute;inset:0;pointer-events:none;opacity:0;transition:opacity .18s;
  background-image:radial-gradient(rgba(196,164,255,.22) 1px, transparent 1px);
  background-size:26px 26px; background-position:0 0}
.stage.show-grid .grid-layer{opacity:.5}
.sw-row{display:flex;align-items:center;gap:8px;margin:8px 14px 2px;padding:7px 10px;border:1px solid var(--line);border-radius:9px;
  font-size:12px;color:var(--ink-2);cursor:pointer;user-select:none;background:rgba(24,11,44,.5)}
.sw-row span{flex:1}
.sw-row input{position:absolute;opacity:0;pointer-events:none}
.sw-row .sw{width:32px;height:18px;border-radius:99px;background:rgba(120,96,168,.35);position:relative;transition:.16s}
.sw-row .sw::after{content:"";position:absolute;top:2px;left:2px;width:14px;height:14px;border-radius:50%;background:#cfc0ee;transition:.16s}
.sw-row input:checked+.sw{background:linear-gradient(90deg,#7c4dd6,#b98cff)}
.sw-row input:checked+.sw::after{left:16px;background:#fff}
.sw-row:focus-within{border-color:var(--line-2)}
.link-layer{position:absolute;inset:0;width:100%;height:100%;pointer-events:none;overflow:visible}
.link-layer .hit{pointer-events:stroke;stroke:transparent;stroke-width:18;fill:none;cursor:pointer}
.link-layer .wire{fill:none;stroke:url(#lg-a);stroke-width:2.4;stroke-linecap:round;filter:url(#glow);transition:stroke-width .12s}
.link-layer .wire.sel{stroke:#fff;stroke-width:3.4}
.link-layer .wire.hot{stroke-width:3.6}
.link-layer .wire.dim{opacity:.28}
.nodes{position:absolute;inset:0}
.ghost{position:absolute;border:1.5px dashed var(--acc);border-radius:12px;background:rgba(167,139,250,.10);pointer-events:none;z-index:40}
.empty-hint{position:absolute;left:50%;top:46%;transform:translate(-50%,-50%);margin:0;text-align:center;
  color:rgba(226,212,255,.55);font-size:15px;line-height:2;pointer-events:none;letter-spacing:.3px}
.empty-hint b{color:#e9dcff;font-weight:600}
.empty-hint span{display:block;font-size:12.5px;color:rgba(200,180,240,.42)}
.empty-hint[hidden]{display:none}

/* ---------- 顶栏 ---------- */
.topbar{position:fixed;left:0;right:0;top:0;height:58px;display:flex;align-items:center;gap:14px;
  padding:0 16px;z-index:60;pointer-events:none}
.topbar>*{pointer-events:auto}
.back-btn{display:inline-flex;align-items:center;gap:7px;height:38px;padding:0 15px 0 11px;border-radius:11px;
  background:rgba(28,14,52,.72);border:1px solid var(--line);backdrop-filter:blur(14px);
  font-size:13.5px;color:#e5d8ff;transition:.16s;box-shadow:0 6px 20px rgba(8,3,20,.45)}
.back-btn:hover{background:rgba(52,28,92,.9);border-color:var(--line-2);transform:translateY(-1px)}
.back-btn svg{width:17px;height:17px;fill:none;stroke:#d9c7ff;stroke-width:2.1;stroke-linecap:round;stroke-linejoin:round}
.brand{display:flex;align-items:center;gap:9px;height:38px;padding:0 16px;border-radius:11px;
  background:rgba(28,14,52,.6);border:1px solid rgba(168,132,255,.14);backdrop-filter:blur(14px)}
.brand-mark{width:16px;height:16px;border-radius:5px;background:conic-gradient(from 210deg,var(--acc),var(--pink),var(--cyan),var(--acc));
  box-shadow:0 0 14px rgba(167,139,250,.7)}
.brand b{font-size:13.5px;font-weight:650;letter-spacing:.4px}
.brand-tag{font-style:normal;font-size:12px;color:var(--ink-3);max-width:210px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;
  padding-left:10px;border-left:1px solid rgba(168,132,255,.2)}
.top-right{margin-left:auto;display:flex;align-items:center;gap:9px}
.save-state,.zoom-badge{height:30px;display:inline-flex;align-items:center;padding:0 11px;border-radius:9px;font-size:11.5px;
  color:var(--ink-3);background:rgba(28,14,52,.55);border:1px solid rgba(168,132,255,.13);backdrop-filter:blur(12px)}
.save-state.busy{color:var(--amber)}
.save-state.ok{color:#86efac}
.zoom-badge{font-variant-numeric:tabular-nums}

/* ---------- 语言切换：与全站 .lang-btn 同一套类名 + 同尺寸（12.5px / 7px 11px / 999px / 44px 触控下限） ---------- */
.lang-switch{display:inline-flex;align-items:center;gap:4px}
.lang-btn{display:inline-flex;align-items:center;justify-content:center;
  font-size:12.5px;padding:7px 11px;border-radius:999px;cursor:pointer;line-height:1;
  background:rgba(28,14,52,.55);color:var(--ink-3);border:1px solid rgba(168,132,255,.13);
  backdrop-filter:blur(12px);transition:all .15s;font-family:inherit}
.lang-btn:hover{border-color:var(--line-2);color:var(--ink)}
.lang-btn.on{background:linear-gradient(120deg,#c4b5fd,#7dd3fc);color:#0f0a1e;border-color:transparent;font-weight:700}
@media (max-width:640px){.lang-btn{min-height:44px;min-width:44px;display:inline-flex;align-items:center;justify-content:center;padding:6px 9px;font-size:12px}}

/* ---------- 两侧伸缩触发按钮（默认唯一可见控件） ---------- */
.rail-btn{position:fixed;z-index:85;top:50%;transform:translateY(-50%);
  display:flex;flex-direction:column;align-items:center;gap:7px;padding:16px 9px;
  border:1px solid rgba(180,146,255,.34);cursor:pointer;
  background:radial-gradient(130% 130% at 30% 15%, rgba(88,48,148,.92), rgba(24,11,46,.96));
  backdrop-filter:blur(16px);
  box-shadow:0 10px 32px rgba(8,3,20,.55), inset 0 1px 0 rgba(255,255,255,.09);
  transition:transform .28s cubic-bezier(.22,.9,.24,1), box-shadow .2s, border-color .2s, border-radius .2s}
.rail-btn svg{width:19px;height:19px;fill:none;stroke:#dcc9ff;stroke-width:1.7;stroke-linecap:round;stroke-linejoin:round}
.rail-btn em{font-style:normal;font-size:10.5px;letter-spacing:2px;color:#c3b0e4;writing-mode:vertical-rl;text-orientation:upright}
.rail-btn .rail-chev{font-style:normal;font-size:13px;line-height:1;color:#9f8bc6;transition:transform .22s}
.r-left{left:0;border-left:0;border-radius:0 15px 15px 0}
.r-right{right:0;border-right:0;border-radius:15px 0 0 15px}
.rail-btn:hover{border-color:rgba(196,166,255,.7);box-shadow:0 12px 38px rgba(120,60,220,.45), inset 0 1px 0 rgba(255,255,255,.14)}
.rail-btn.on{background:radial-gradient(130% 130% at 30% 15%, rgba(146,88,228,.98), rgba(52,22,98,.99));
  border-color:#cdb6ff;box-shadow:0 0 0 4px rgba(167,139,250,.13), 0 12px 40px rgba(120,60,220,.5)}
.rail-btn.on em{color:#f2e9ff}
.rail-btn.on .rail-chev{color:#f2e9ff}
body.dl-open .r-left{transform:translateY(-50%) translateX(var(--w-left));border-radius:0 0 15px 0;border-left:0}
body.dr-open .r-right{transform:translateY(-50%) translateX(calc(-1 * var(--w-right)));border-radius:0 0 0 15px;border-right:0}
body.dr-open .r-right .rail-chev,body.dl-open .r-left .rail-chev{transform:rotate(180deg)}

/* ---------- 两侧滑出面板 ---------- */
:root{--w-left:316px;--w-right:344px}
.drawer{position:fixed;z-index:75;top:58px;bottom:0;display:flex;flex-direction:column;
  background:linear-gradient(180deg, rgba(31,16,60,.975), rgba(20,9,40,.99));
  border:1px solid rgba(168,132,255,.18);border-top:0;border-bottom:0;backdrop-filter:blur(22px);
  visibility:hidden;transition:transform .3s cubic-bezier(.22,.9,.24,1), visibility .3s, box-shadow .3s}
.dr-left{left:0;width:var(--w-left);border-left:0;border-radius:0 18px 18px 0;transform:translateX(-102%);
  box-shadow:0 0 0 rgba(0,0,0,0)}
.dr-right{right:0;width:var(--w-right);border-right:0;border-radius:18px 0 0 18px;transform:translateX(102%);
  box-shadow:0 0 0 rgba(0,0,0,0)}
.drawer.open{transform:none;visibility:visible;box-shadow:24px 0 70px rgba(6,2,16,.6)}
.dr-right.open{box-shadow:-24px 0 70px rgba(6,2,16,.6)}
.drawer-head{display:flex;align-items:baseline;gap:8px;padding:15px 16px 11px 18px;border-bottom:1px solid rgba(168,132,255,.14)}
.drawer-head b{font-size:13.5px;letter-spacing:.4px;color:#f2eaff}
.drawer-head span{font-size:11px;color:var(--ink-3);margin-left:auto;font-variant-numeric:tabular-nums}
.drawer-x{flex:0 0 auto;width:22px;height:22px;margin-left:6px;border:1px solid rgba(180,146,255,.26);border-radius:7px;
  background:transparent;color:#b9a4dc;font-size:11px;line-height:1;cursor:pointer;transition:.16s}
.drawer-x:hover{color:#fff;border-color:rgba(196,166,255,.7);background:rgba(140,84,220,.28)}
.tabbar{display:flex;gap:4px;padding:9px 12px 0;border-bottom:1px solid rgba(168,132,255,.12)}
.tab{flex:1;padding:8px 6px;font-size:12px;font-family:inherit;border:0;border-radius:9px 9px 0 0;cursor:pointer;
  background:transparent;color:#a794c9;border-bottom:2px solid transparent;transition:.16s}
.tab:hover{color:#e6d9ff;background:rgba(140,84,220,.12)}
.tab.on{color:#fff;background:rgba(140,84,220,.2);border-bottom-color:#a78bfa}
.drawer-body{padding:11px;overflow:auto;overscroll-behavior:contain;flex:1}
.drawer-body[hidden]{display:none}
.drawer-body::-webkit-scrollbar{width:7px}
.drawer-body::-webkit-scrollbar-thumb{background:rgba(167,139,250,.28);border-radius:8px}
.drawer-foot{padding:9px 16px 12px;font-size:10.6px;line-height:1.6;color:#8d7bab;border-top:1px solid rgba(168,132,255,.1)}

/* 目录树（磁盘目录感） */
.tree{display:flex;flex-direction:column;gap:2px}
.tree-row{display:flex;align-items:center;gap:8px;padding:8px 9px;border-radius:9px;font-size:12.8px;color:var(--ink-2);cursor:pointer;
  border:1px solid transparent;transition:.13s}
.tree-row:hover{background:rgba(167,139,250,.12);border-color:rgba(167,139,250,.22);color:#f2e9ff}
.tree-row .ic{width:18px;height:18px;flex:0 0 18px;display:grid;place-items:center;border-radius:5px;font-size:11px}
.tree-row .ic.i-img{background:rgba(167,139,250,.2);color:#c9b0ff}
.tree-row .ic.i-vid{background:rgba(244,114,182,.2);color:#f9a8d4}
.tree-row .ic.i-txt{background:rgba(103,232,249,.18);color:#a5f3fc}
.tree-row .ic.i-aud{background:rgba(251,191,36,.18);color:#fcd34d}
.tree-row em{margin-left:auto;font-style:normal;font-size:10.5px;color:var(--ink-3)}
.tree-row.leaf{padding-left:22px}

/* 属性面板控件 */
.field{display:flex;flex-direction:column;gap:6px;padding:8px 6px}
.field label{font-size:11.5px;color:var(--ink-3);letter-spacing:.3px}
.field input[type=text],.field textarea,.field select{
  width:100%;background:rgba(14,6,28,.72);border:1px solid rgba(168,132,255,.22);border-radius:9px;
  color:var(--ink);font-size:12.5px;padding:9px 10px;outline:none;font-family:inherit;transition:.15s}
.field input[type=text]:focus,.field textarea:focus,.field select:focus{border-color:var(--acc);box-shadow:0 0 0 3px rgba(167,139,250,.14)}
.field textarea{resize:vertical;min-height:66px;line-height:1.6}
.kv{display:grid;grid-template-columns:1fr auto;gap:6px 10px;padding:8px 6px;font-size:12px;color:var(--ink-2)}
.kv span:nth-child(even){color:#efe4ff;font-variant-numeric:tabular-nums}
.mini-btn{display:inline-flex;align-items:center;justify-content:center;gap:6px;height:32px;padding:0 12px;border-radius:8px;
  background:rgba(167,139,250,.14);border:1px solid rgba(167,139,250,.26);font-size:12px;color:#e5d8ff;transition:.14s}
.mini-btn:hover{background:rgba(167,139,250,.26);border-color:var(--acc)}
.mini-btn.danger{background:rgba(244,63,94,.14);border-color:rgba(244,63,94,.3);color:#fda4af}
.mini-btn.danger:hover{background:rgba(244,63,94,.26)}
.mini-btn.wide{width:100%}
.btn-row{display:flex;gap:8px;padding:8px 6px;flex-wrap:wrap}
.hint-line{padding:6px;font-size:11.5px;color:var(--ink-3);line-height:1.7}

/* 连线列表 */
.link-row{display:flex;align-items:center;gap:8px;padding:8px 9px;border-radius:9px;font-size:12px;color:var(--ink-2);
  border:1px solid rgba(168,132,255,.12);margin-bottom:6px;background:rgba(20,9,38,.5)}
.link-row b{font-weight:600;color:#efe4ff}
.link-row .arrow{color:var(--acc);font-size:11px}
.link-row button{margin-left:auto;color:#fda4af;font-size:11.5px;padding:2px 6px;border-radius:6px}
.link-row button:hover{background:rgba(244,63,94,.18)}
.empty-note{padding:14px 8px;font-size:12px;color:var(--ink-3);text-align:center;line-height:1.8}

/* ---------- 素材窗口（节点） ---------- */
.node{position:absolute;z-index:10;display:flex;flex-direction:column;border-radius:var(--r);overflow:visible;
  background:linear-gradient(168deg, rgba(46,23,80,.96), rgba(26,12,48,.97));
  border:1px solid rgba(168,132,255,.26);box-shadow:0 16px 40px rgba(6,2,18,.5);
  transform-origin:0 0;will-change:transform;backdrop-filter:blur(6px)}
.node:hover{border-color:rgba(186,152,255,.46)}
.node.sel{border-color:#c9aaff;box-shadow:0 0 0 2px rgba(167,139,250,.28), 0 20px 48px rgba(6,2,18,.6)}
.node.dragging{cursor:grabbing;box-shadow:0 26px 60px rgba(6,2,18,.68)}
.node-head{display:flex;align-items:center;gap:8px;height:38px;padding:0 8px 0 10px;flex:0 0 38px;cursor:grab;
  border-bottom:1px solid rgba(168,132,255,.16);border-radius:var(--r) var(--r) 0 0;
  background:linear-gradient(180deg, rgba(255,255,255,.05), transparent)}
.node-head .type-dot{width:9px;height:9px;border-radius:3px;flex:0 0 9px;box-shadow:0 0 10px currentColor}
.node-head .t-img{background:#a78bfa;color:#a78bfa}
.node-head .t-vid{background:#f472b6;color:#f472b6}
.node-head .t-txt{background:#67e8f9;color:#67e8f9}
.node-head .t-aud{background:#fbbf24;color:#fbbf24}
.node-head .kind{font-size:10px;letter-spacing:.8px;color:var(--ink-3);text-transform:uppercase;flex:0 0 auto}
.node-title{flex:1;min-width:0;font-size:12.6px;font-weight:600;color:#f0e6ff;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;
  border-radius:6px;padding:2px 4px;outline:none}
.node-title:focus{background:rgba(12,5,26,.8);box-shadow:0 0 0 1px var(--acc)}
.node-tools{display:flex;gap:2px;flex:0 0 auto}
.node-tools button{width:24px;height:24px;border-radius:6px;display:grid;place-items:center;color:#bda9df;font-size:12px;transition:.12s}
.node-tools button:hover{background:rgba(167,139,250,.2);color:#fff}
.node-tools button.del:hover{background:rgba(244,63,94,.24);color:#ffd7de}
.node-main{display:flex;flex:1;min-height:0;gap:8px;padding:8px}
.node-media{position:relative;flex:1;min-width:0;min-height:0;border-radius:10px;overflow:hidden;
  background:repeating-conic-gradient(rgba(255,255,255,.035) 0% 25%, transparent 0% 50%) 0 0/18px 18px, rgba(10,4,20,.62);
  border:1px solid rgba(168,132,255,.16);display:flex;align-items:center;justify-content:center}
.node-media .dz{position:absolute;inset:0;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:5px;
  color:var(--ink-3);font-size:11.5px;text-align:center;padding:10px;cursor:pointer;transition:.15s}
.node-media .dz:hover{background:rgba(167,139,250,.09);color:#d9c8ff}
.node-media .dz b{font-size:12px;color:#e2d3ff;font-weight:600}
.node-media .dz svg{width:22px;height:22px;fill:none;stroke:currentColor;stroke-width:1.6}
.node-media img,.node-media video{max-width:100%;max-height:100%;object-fit:contain;display:block;border-radius:8px}
.node-media audio{width:calc(100% - 20px)}
.node-media .aud-wrap{display:flex;flex-direction:column;align-items:center;gap:8px;width:100%;padding:8px}
.node-media .aud-name{font-size:11px;color:var(--ink-3);max-width:100%;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.node-media .text-body{width:100%;height:100%;border:0;outline:none;resize:none;background:transparent;color:#eee6ff;
  font-family:var(--font);font-size:12.6px;line-height:1.75;padding:11px}
.node-media .text-body::placeholder{color:rgba(190,170,225,.4)}
.node-side{flex:0 0 178px;display:flex;flex-direction:column;gap:6px;min-width:0}
.node-side .side-label{font-size:10.5px;color:var(--ink-3);letter-spacing:.5px;display:flex;align-items:center;gap:5px}
.node-side .side-label i{width:5px;height:5px;border-radius:50%;background:var(--acc);font-style:normal}
.node-side textarea,.node-side input,.node-side select{width:100%;background:rgba(9,3,20,.72);border:1px solid rgba(168,132,255,.2);
  border-radius:8px;color:#e8ddff;font-family:inherit;font-size:11.8px;padding:7px 8px;outline:none;transition:.14s;line-height:1.6}
.node-side textarea{flex:1;min-height:44px;resize:none}
.node-side textarea:focus,.node-side input:focus,.node-side select:focus{border-color:rgba(167,139,250,.8);box-shadow:0 0 0 2px rgba(167,139,250,.14)}
.node-side textarea::placeholder,.node-side input::placeholder{color:rgba(180,158,215,.42)}
.node-side .row2{display:flex;gap:6px}
.node-side .row2 select{flex:1}
.node-side .meta{font-size:10px;color:rgba(170,150,205,.6);display:flex;justify-content:space-between}
.node-side .meta b{color:var(--acc);font-weight:500}

/* 端口 */
.port{position:absolute;width:15px;height:15px;border-radius:50%;background:#1a0c30;border:2px solid #b79bff;cursor:crosshair;
  transition:.14s;z-index:5}
.port:hover{transform:scale(1.3);box-shadow:0 0 0 5px rgba(167,139,250,.2)}
.port.out{right:-8px;top:50%;margin-top:-7.5px;background:#a78bfa;border-color:#e4d6ff}
.port.in{left:-8px;top:50%;margin-top:-7.5px}
.port.in.hot{background:#f472b6;border-color:#fff;transform:scale(1.35)}
.node.sel .port{box-shadow:0 0 0 3px rgba(167,139,250,.18)}
.port-badge{position:absolute;left:-9px;bottom:-9px;width:16px;height:16px;border-radius:6px;background:rgba(167,139,250,.22);
  border:1px solid rgba(167,139,250,.4);cursor:nwse-resize;z-index:6}

/* 连线拖拽中的吸附态 */
.linking .node .port.in{opacity:.9;animation:pulse 1.1s infinite}
@keyframes pulse{50%{box-shadow:0 0 0 7px rgba(244,114,182,.16)}}

/* ---------- 右键菜单：多级目录（Explorer 风） ---------- */
.ctx-root{position:fixed;z-index:200;min-width:236px;padding:6px;border-radius:12px;
  background:linear-gradient(180deg, rgba(34,17,62,.985), rgba(22,10,42,.99));
  border:1px solid rgba(176,142,255,.34);box-shadow:0 26px 64px rgba(4,1,12,.72), 0 0 0 1px rgba(255,255,255,.03) inset;
  backdrop-filter:blur(22px);font-size:12.8px;user-select:none}
.ctx-root[hidden]{display:none}
.ctx-panel{min-width:236px}
.ctx-item{position:relative;display:flex;align-items:center;gap:9px;padding:7px 9px;border-radius:8px;color:#ded2f5;cursor:default;white-space:nowrap}
.ctx-item:hover,.ctx-item.hot{background:linear-gradient(90deg, rgba(167,139,250,.26), rgba(167,139,250,.10));color:#fff}
.ctx-item.disabled{opacity:.38;pointer-events:none}
.ctx-item .ico{width:19px;height:19px;flex:0 0 19px;display:grid;place-items:center;border-radius:6px;font-size:11px}
.ico.k-folder{background:rgba(167,139,250,.16);color:#c4a8ff}
.ico.k-img{background:rgba(167,139,250,.2);color:#c9b0ff}
.ico.k-vid{background:rgba(244,114,182,.18);color:#f9a8d4}
.ico.k-txt{background:rgba(103,232,249,.16);color:#a5f3fc}
.ico.k-aud{background:rgba(251,191,36,.16);color:#fcd34d}
.ico.k-act{background:rgba(134,239,172,.14);color:#86efac}
.ico.k-danger{background:rgba(244,63,94,.16);color:#fda4af}
.ctx-item .label{flex:1}
.ctx-item .sub{font-size:10.5px;color:rgba(190,170,225,.55);margin-left:6px}
.ctx-item .chev{color:#b79bff;font-size:9px;opacity:.8}
.ctx-item .key{font-size:10px;color:rgba(190,170,225,.45);border:1px solid rgba(167,139,250,.2);border-radius:4px;padding:0 4px}
.ctx-sep{height:1px;margin:5px 8px;background:rgba(167,139,250,.16)}
.ctx-sub{position:absolute;left:100%;top:-6px;padding:6px;margin-left:2px;min-width:242px;border-radius:12px;
  background:linear-gradient(180deg, rgba(36,19,66,.99), rgba(23,11,44,.995));
  border:1px solid rgba(176,142,255,.34);box-shadow:0 24px 56px rgba(4,1,12,.7);
  opacity:0;visibility:hidden;transform:translateX(-4px);transition:opacity .12s, transform .14s, visibility .14s}
.ctx-item.open>.ctx-sub{opacity:1;visibility:visible;transform:none}
.ctx-item.open{background:linear-gradient(90deg, rgba(167,139,250,.24), rgba(167,139,250,.08));z-index:4}
.ctx-item.open>.ctx-sub{z-index:5}
.ctx-sub.flip-left{left:auto;right:100%;margin-left:0;margin-right:2px;transform:translateX(4px)}
.ctx-sub.flip-up{top:auto;bottom:-6px}
.ctx-root .ctx-path{font-size:10.5px;color:rgba(180,160,215,.5);padding:2px 9px 6px;letter-spacing:.3px}

/* ---------- toast ---------- */
.toast{position:fixed;left:50%;bottom:34px;transform:translateX(-50%) translateY(8px);z-index:300;
  padding:10px 18px;border-radius:11px;background:rgba(30,15,56,.96);border:1px solid rgba(176,142,255,.4);
  color:#f1e7ff;font-size:12.5px;box-shadow:0 16px 40px rgba(4,1,12,.6);opacity:0;transition:.2s;backdrop-filter:blur(14px)}
.toast.show{opacity:1;transform:translateX(-50%) translateY(0)}
.toast[hidden]{display:none}

/* ---------- 小屏 ---------- */
@media (max-width:820px){
  :root{--w-left:min(90vw,300px);--w-right:min(90vw,312px)}
  .rail-btn{padding:13px 8px;gap:6px}
  .rail-btn svg{width:17px;height:17px}
  .rail-btn em{font-size:9.6px;letter-spacing:1.6px}
  .drawer-head b{font-size:12.6px}
  .brand-tag,.save-state{display:none}
  .node-side{flex-basis:150px}
}