/* ============================================================
   PunicaJam — 应用样式（Apple 极简 / GuitarPro 式布局）
   ============================================================ */
:root{
  --bg:#f6f4f0; --panel:#fffefb; --panel2:#f0ece5; --text:#2b2a28; --sub:#7c776f;
  --line:#e3ddd3; --accent:#bd5a52; --accent-hover:#a94a43; --green:#7f9c74;
  --tint:rgba(189,90,82,0.07); --header-bg:rgba(246,244,240,0.78);
  --shadow:0 1px 2px rgba(0,0,0,0.04),0 6px 18px rgba(0,0,0,0.05);
}
@media (prefers-color-scheme: dark){
  :root{
    --bg:#17171a; --panel:#1f1f23; --panel2:#131316; --text:#ececef; --sub:#9a979e;
    --line:#33333a; --accent:#d2685f; --accent-hover:#e07f76; --green:#8fb583;
    --tint:rgba(210,104,95,0.13); --header-bg:rgba(23,23,26,0.72);
    --shadow:0 1px 2px rgba(0,0,0,0.35),0 6px 18px rgba(0,0,0,0.4);
  }
}
/* 手动主题：覆盖系统偏好 */
:root[data-theme="dark"]{
  --bg:#17171a; --panel:#1f1f23; --panel2:#131316; --text:#ececef; --sub:#9a979e;
  --line:#33333a; --accent:#d2685f; --accent-hover:#e07f76; --green:#8fb583;
  --tint:rgba(210,104,95,0.13); --header-bg:rgba(23,23,26,0.72);
  --shadow:0 1px 2px rgba(0,0,0,0.35),0 6px 18px rgba(0,0,0,0.4);
}
:root[data-theme="light"]{
  --bg:#f6f4f0; --panel:#fffefb; --panel2:#f0ece5; --text:#2b2a28; --sub:#7c776f;
  --line:#e3ddd3; --accent:#bd5a52; --accent-hover:#a94a43; --green:#7f9c74;
  --tint:rgba(189,90,82,0.07); --header-bg:rgba(246,244,240,0.78);
  --shadow:0 1px 2px rgba(0,0,0,0.04),0 6px 18px rgba(0,0,0,0.05);
}

*{box-sizing:border-box; margin:0; padding:0;}
.hidden{display:none !important;}
html,body{height:100%;}
body{
  background:var(--bg); color:var(--text); overflow:hidden;
  font-family:-apple-system,BlinkMacSystemFont,"SF Pro Text","Segoe UI","PingFang SC","Hiragino Sans GB","Microsoft YaHei",sans-serif;
  -webkit-font-smoothing:antialiased; display:flex; flex-direction:column; min-width:1020px;
}

/* ---------- 顶栏 ---------- */
header{
  flex:none; z-index:50; background:var(--header-bg);
  backdrop-filter:blur(20px) saturate(180%); border-bottom:1px solid var(--line);
}
.head{width:100%; margin:0; padding:10px 22px; display:flex; align-items:center; justify-content:space-between; gap:12px;}
.brand{display:flex; align-items:center; gap:8px; text-decoration:none; color:var(--text);}
.brand .name{font-size:17px; font-weight:600; letter-spacing:-0.3px; white-space:nowrap;}
.brand .tag{font-size:10px; color:var(--sub); font-weight:500; border:1px solid var(--line); border-radius:999px; padding:2px 8px; margin-left:4px;}
.head .right{display:flex; align-items:center; gap:10px;}

.seg{display:flex; background:rgba(120,120,128,0.12); border-radius:999px; padding:2px;}
.seg button{border:none; background:none; font-family:inherit; font-size:12px; font-weight:500; color:var(--text); padding:5px 11px; border-radius:999px; cursor:pointer; transition:background .15s;}
.seg button.active{background:var(--panel); box-shadow:0 1px 4px rgba(0,0,0,0.12);}
.pill{font-family:inherit; font-size:13px; font-weight:500; color:var(--text); background:var(--panel); border:1px solid var(--line); border-radius:999px; padding:6px 14px; cursor:pointer; transition:border-color .15s;}
.pill:hover{border-color:var(--sub);}
.pill.icononly{padding:5px 8px; display:inline-flex; align-items:center; justify-content:center;}
.pill.icononly svg{width:16px; height:16px; stroke:currentColor; fill:none; stroke-width:1.8; stroke-linecap:round; stroke-linejoin:round;}
.avatar{width:30px; height:30px; border-radius:50%; background:var(--accent); color:#fff; font-size:13px; font-weight:600; display:flex; align-items:center; justify-content:center; cursor:pointer; border:none; padding:0; line-height:1;}
.avatar.emoji{background:var(--tint); color:inherit; font-size:18px; border:1px solid var(--line);}

/* ---------- 主体 ---------- */
.main{flex:1; display:flex; min-height:0; position:relative;}

/* 左侧项目栏 */
/* 左侧项目栏（宽度可拖拽 / 可收起） */
.side{width:var(--side-w, 214px); flex:none; position:relative; border-right:1px solid var(--line);
      background:var(--panel2); display:flex; flex-direction:column; min-width:0;
      transition:width .18s ease;}
.side.resizing{transition:none;}
.side .shead{flex:none; padding:12px 14px 8px; font-size:12px; font-weight:600; color:var(--sub);
             letter-spacing:1px; display:flex; align-items:center; justify-content:space-between; gap:6px;}
.side .sheadbtn{border:none; background:none; color:var(--sub); cursor:pointer; padding:2px; flex:none;
                display:flex; align-items:center; border-radius:5px; opacity:.75;}
.side .sheadbtn:hover{background:rgba(128,128,128,0.14); color:var(--text); opacity:1;}
.side .newbtn{margin:0 14px 10px; font-family:inherit; font-size:13px; font-weight:500; color:var(--accent); background:none; border:1px dashed var(--accent); border-radius:10px; padding:8px 0; cursor:pointer; white-space:nowrap; overflow:hidden;}
.side .newbtn:hover{background:var(--tint);}
.side .list{flex:1; overflow-y:auto; padding:0 8px 12px;}
/* 拖拽把手 */
.sideres{position:absolute; top:0; right:-3px; width:7px; height:100%; cursor:col-resize; z-index:6;}
.sideres::after{content:''; position:absolute; top:0; left:3px; width:1px; height:100%;
                background:var(--accent); opacity:0; transition:opacity .15s;}
.sideres:hover::after,.side.resizing .sideres::after{opacity:.55;}
/* 收起状态 */
body.side-collapsed .side{width:0; border-right:none; overflow:hidden;}
body.side-collapsed .side .shead,body.side-collapsed .side .newbtn,body.side-collapsed .side .list,
body.side-collapsed .side .quota{display:none;}
body.side-collapsed .sideres{display:none;}
.sideexpand{position:absolute; left:6px; top:10px; z-index:20; width:24px; height:24px; border-radius:7px;
            border:1px solid var(--line); background:var(--panel); color:var(--sub); cursor:pointer;
            display:flex; align-items:center; justify-content:center; padding:0;}
.sideexpand:hover{color:var(--accent); border-color:var(--accent);}
.proj{position:relative; background:var(--panel); border:1px solid transparent; border-radius:10px; padding:8px 10px; margin-bottom:6px; cursor:pointer; transition:border-color .15s, background .15s, opacity .15s;}
.proj:hover{border-color:var(--line);}
.proj.active{border-color:var(--accent); background:var(--tint);}
.proj.expired{opacity:.55;}
.proj.expired .pn{text-decoration:line-through;}
.proj .pn{font-size:13px; font-weight:600; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; padding-right:40px;}
.proj .pm{display:flex; align-items:center; gap:6px; font-size:11px; color:var(--sub); margin-top:3px;}
.proj .pm .dur{font-variant-numeric:tabular-nums; color:var(--text); opacity:.75;}
.proj .pm .state{color:var(--accent); font-size:10px;}
/* 分离中的项目卡：显示百分比 + 迷你进度条 */
.proj.pending{border-color:var(--accent);}
.proj.pending .pm{color:var(--accent); font-variant-numeric:tabular-nums;}
.proj.failed{opacity:.72;}
.proj .pm .badge.bad,.proj .pm .badge.spinmini{color:#fff; background:var(--accent); border-color:var(--accent);}
.proj .minibar{display:inline-block; flex:1; height:3px; min-width:36px; background:var(--line); border-radius:2px; overflow:hidden;}
.proj .minibar i{display:block; height:100%; background:var(--accent); transition:width .4s ease;}
/* 卡片操作：复制 / 删除（图标常驻，悬停显示「复制 / 删除」提示） */
.proj .pacts{position:absolute; top:5px; right:5px; display:flex; gap:1px;
             opacity:.5; transition:opacity .15s;}
.proj:hover .pacts{opacity:1;}
.proj .pact{width:20px; height:20px; border:none; border-radius:5px; background:none; color:var(--sub);
            cursor:pointer; padding:0; display:flex; align-items:center; justify-content:center;}
.proj .pact:hover{background:rgba(128,128,128,0.16); color:var(--text);}
.proj .pact.del:hover{background:var(--tint); color:var(--accent);}
.proj .pact svg{width:13px; height:13px; stroke:currentColor; fill:none; stroke-width:1.9;
                stroke-linecap:round; stroke-linejoin:round;}
.quota{padding:10px 14px; font-size:11px; color:var(--sub); border-top:1px solid var(--line); margin-top:8px; line-height:1.5;}
.quota.guest{color:var(--accent);}
.quota .qbal{color:var(--text); font-weight:600; font-variant-numeric:tabular-nums;}
.quota .qbal.low{color:var(--accent);}
.badge{display:inline-block; font-size:10px; border:1px solid var(--line); border-radius:4px; padding:0 4px; color:var(--sub);}

/* 头像弹出卡 */
.umenu{position:fixed; top:56px; right:16px; width:286px; z-index:120; padding:16px 16px 12px;
       background:var(--panel); border:1px solid var(--line); border-radius:14px;
       box-shadow:0 12px 34px rgba(0,0,0,0.16); animation:umIn .14s ease;}
@keyframes umIn{from{opacity:0; transform:translateY(-4px);} to{opacity:1; transform:none;}}
.umhead{display:flex; align-items:center; gap:11px;}
.umavatar{width:42px; height:42px; flex:none; border-radius:50%; background:var(--tint); color:var(--accent);
          font-size:22px; line-height:1; display:flex; align-items:center; justify-content:center;
          border:1px solid var(--line); cursor:pointer; padding:0; transition:border-color .15s, transform .15s;}
.umavatar:hover{border-color:var(--accent); transform:scale(1.04);}
.uminfo{min-width:0; flex:1;}
.unamerow{display:flex; align-items:center; gap:4px; min-width:0;}
.umname{font-size:15px; font-weight:700; letter-spacing:.01em; white-space:nowrap; overflow:hidden; text-overflow:ellipsis;}
.ummeta{font-size:11px; color:var(--sub); margin-top:3px; white-space:nowrap; overflow:hidden; text-overflow:ellipsis;}
.umedit{border:none; background:none; color:var(--sub); cursor:pointer; padding:3px; border-radius:6px;
        flex:none; display:flex; align-items:center; opacity:.6; transition:opacity .15s, background .15s;}
.umedit:hover{opacity:1; background:rgba(128,128,128,0.14); color:var(--text);}
/* 昵称原位编辑 */
.umnick{font-family:inherit; font-weight:700; color:var(--text); background:none; outline:none;
        border:none; border-bottom:1px solid var(--accent); padding:0 1px 1px; min-width:60px;
        max-width:150px; font-size:15px; letter-spacing:.01em;}
.umnick.hidden{display:none;}
.umerr{font-size:10.5px; color:var(--accent); margin-top:3px;}
.umerr.hidden{display:none;}
.umquota{margin-top:14px; padding-top:14px; border-top:1px solid var(--line);}
.umlabel{font-size:10.5px; color:var(--sub); letter-spacing:.02em;}
.umbig{font-size:30px; font-weight:750; font-variant-numeric:tabular-nums; line-height:1.2; margin-top:3px;
       letter-spacing:.01em; display:flex; align-items:baseline; gap:2px;}
.umbig .n{font-size:30px; font-weight:750;}
.umbig .u{font-size:12px; font-weight:500; color:var(--sub); margin:0 2px 0 1px;}
.umbig .u:last-child{margin-right:0;}
.umbig .gap{width:6px;}
.umbig.low .n{color:var(--accent);}

/* 编辑态 */
.umeditbox{border-top:1px solid var(--line); margin-top:14px; padding-top:13px;}
.umavtitle{font-size:11px; color:var(--sub); margin-bottom:8px;}
.umpresets{display:grid; grid-template-columns:repeat(7, 1fr); gap:5px; margin-bottom:11px;}
.upreset{border:1px solid transparent; background:var(--panel2); border-radius:8px; cursor:pointer;
         padding:5px 0; font-size:19px; line-height:1.15; text-align:center;}
.upreset:hover{background:var(--tint);}
.upreset.sel{border-color:var(--accent); background:var(--tint);}
.umnick{width:100%; box-sizing:border-box; font-family:inherit; font-size:13px; color:var(--text);
        background:var(--panel2); border:1px solid var(--line); border-radius:8px; padding:7px 10px; outline:none;}
.umnick:focus{border-color:var(--accent);}
.umeditacts{display:flex; gap:6px; margin-top:10px;}
.umbtn.primary{background:var(--accent); border-color:var(--accent); color:#fff; font-weight:600;}
.umbtn.primary:hover{filter:brightness(1.05);}
.umstats{display:grid; grid-template-columns:1fr 1fr; gap:10px; margin-top:14px;
         padding-top:12px; border-top:1px solid var(--line);}
.umstat .k{font-size:10.5px; color:var(--sub); margin-bottom:2px;}
.umstat .v{font-size:14px; font-weight:700; font-variant-numeric:tabular-nums;}
.umacts{display:flex; gap:6px; margin-top:14px;}
.umbtn{flex:1; font-family:inherit; font-size:12px; font-weight:500; text-align:center; text-decoration:none;
       padding:7px 10px; border-radius:8px; border:1px solid var(--line); background:none;
       color:var(--text); cursor:pointer;}
.umbtn:hover{border-color:var(--sub);}
.umbtn.danger{color:var(--accent); border-color:var(--accent);}
.umbtn.danger:hover{background:var(--tint);}

/* 右侧工作区 */
.work{flex:1; display:flex; flex-direction:column; min-width:0;}

/* 舞台：视频 / 导入框 / 处理中 */
.stage{flex:0 0 38%; min-height:200px; display:flex; align-items:center; justify-content:center; position:relative; padding:14px 20px; background:var(--panel2); border-bottom:1px solid var(--line);}
.stage video{max-width:100%; max-height:100%; border-radius:12px; background:#000; box-shadow:var(--shadow); display:block;}
.drop{
  width:100%; height:100%; border:1.5px dashed var(--line); border-radius:16px; background:var(--panel);
  display:flex; flex-direction:column; align-items:center; justify-content:center; gap:10px; cursor:pointer;
  transition:border-color .18s, background .18s;
}
.drop:hover, .drop.hot{border-color:var(--accent); background:var(--tint);}
.drop .t1{font-size:17px; font-weight:600;}
.drop .t2{font-size:13px; color:var(--sub);}
.vhead{position:absolute; top:18px; left:26px; display:flex; align-items:center; gap:10px; font-size:12px; color:#fff; background:rgba(0,0,0,0.35); padding:4px 10px; border-radius:999px; backdrop-filter:blur(8px);}
.vhead .sw{width:40px; height:24px;}
.vhead .sw .kn::after{width:20px; height:20px;}
.vhead .sw input:checked + .kn::after{transform:translateX(16px);}
.proc{position:absolute; inset:0; display:flex; flex-direction:column; align-items:center; justify-content:center; gap:14px; background:var(--panel2); z-index:5;}
.proc .msg{font-size:14px; color:var(--sub); font-variant-numeric:tabular-nums;}
/* 分离进度条（用户可见，缓解等待焦虑） */
.proc .pbar{width:min(340px, 62%); height:6px; border-radius:999px; background:var(--line); overflow:hidden;}
.proc .pbar i{display:block; height:100%; width:0; border-radius:999px; background:var(--accent); transition:width .45s ease;}
.proc .pmeta{font-size:12px; color:var(--sub); font-variant-numeric:tabular-nums; min-height:15px;}
.proc.compact .pbar{width:110px; height:4px; background:rgba(255,255,255,0.22);}
.proc.compact .pbar i{background:#fff;}
.proc.compact .pmeta{display:none;}
/* 视频已可播放时：进度缩成底部小胶囊，不遮挡画面 */
.proc.compact{
  inset:auto; left:50%; bottom:58px; transform:translateX(-50%);
  flex-direction:row; gap:10px; background:rgba(0,0,0,0.62); backdrop-filter:blur(8px);
  padding:8px 16px; border-radius:999px; width:auto; max-width:80%;
}
.proc.compact .spin{width:15px; height:15px; border-width:2px; border-color:rgba(255,255,255,0.3); border-top-color:#fff;}
.proc.compact .msg{color:#fff; font-size:13px;}
.spin{width:34px; height:34px; border:3px solid var(--line); border-top-color:var(--accent); border-radius:50%; animation:rot .9s linear infinite;}
@keyframes rot{to{transform:rotate(360deg)}}

/* 播放条（紧凑） */
.transport{flex:none; display:flex; align-items:center; gap:12px; padding:5px 20px; border-bottom:1px solid var(--line); background:var(--panel);}
.play{width:26px; height:26px; border-radius:6px; border:none; cursor:pointer; flex:none; background:none; color:var(--text); display:flex; align-items:center; justify-content:center; transition:background .15s, opacity .15s;}
.play:hover{background:rgba(128,128,128,0.14);}
.play:active{background:rgba(128,128,128,0.22);}
.play:disabled{opacity:.3; cursor:default; background:none;}
.play svg{width:12px; height:12px; fill:currentColor;}
.seek{flex:1; -webkit-appearance:none; appearance:none; height:3px; border-radius:2px; background:var(--line); outline:none; cursor:pointer;}
.seek:disabled{cursor:default;}
.seek::-webkit-slider-thumb{-webkit-appearance:none; width:12px; height:12px; border-radius:50%; background:#fff; border:none; box-shadow:0 1px 3px rgba(0,0,0,.35);}
.seek::-moz-range-thumb{width:12px; height:12px; border-radius:50%; background:#fff; border:none; box-shadow:0 1px 3px rgba(0,0,0,.35);}
.time{font-size:11px; color:var(--sub); font-variant-numeric:tabular-nums; white-space:nowrap;}
.vol{display:flex; align-items:center; gap:6px; color:var(--sub);}
/* 音量条：跟随主题色（默认蓝色太跳） */
.vol input{-webkit-appearance:none; appearance:none; width:64px; height:3px; border-radius:2px;
           outline:none; cursor:pointer;
           background:linear-gradient(to right, var(--accent) 0%, var(--accent) var(--vol,80%),
                      var(--line) var(--vol,80%), var(--line) 100%);}
.vol input::-webkit-slider-thumb{-webkit-appearance:none; width:11px; height:11px; border-radius:50%;
           background:var(--panel); border:1px solid var(--sub); box-shadow:0 1px 2px rgba(0,0,0,.18);}
.vol input::-moz-range-thumb{width:11px; height:11px; border-radius:50%; background:var(--panel);
           border:1px solid var(--sub); box-shadow:0 1px 2px rgba(0,0,0,.18);}
.vol input::-moz-range-track{height:3px; border-radius:2px; background:var(--line);}
.vol input::-moz-range-progress{height:3px; border-radius:2px; background:var(--accent);}

/* 可拖动分隔条：视频区 / 音轨区 */
.splitter{flex:none; height:7px; cursor:row-resize; background:var(--panel2); border-bottom:1px solid var(--line); position:relative; user-select:none;}
.splitter::after{content:""; position:absolute; left:50%; top:2px; width:36px; height:3px; margin-left:-18px; border-radius:2px; background:var(--line); transition:background .15s;}
.splitter:hover::after{background:var(--accent);}
body.resizing{cursor:row-resize; user-select:none;}
body.resizing *{user-select:none;}

/* 工具栏 */
.toolbar{flex:none; display:flex; align-items:center; justify-content:space-between; gap:10px; padding:8px 20px; border-bottom:1px solid var(--line); background:var(--panel);}
.toolbar .left, .toolbar .right{display:flex; gap:8px; align-items:center;}
.btn{
  font-family:inherit; font-size:13px; font-weight:500; border-radius:999px; padding:7px 16px;
  cursor:pointer; text-decoration:none; display:inline-flex; align-items:center; gap:6px;
  transition:opacity .15s, transform .12s, border-color .15s;
}
.btn:active{transform:scale(.97);}
.btn.primary{background:var(--accent); color:#fff; border:none;}
.btn.primary:hover{background:var(--accent-hover);}
.btn.ghost{background:none; color:var(--text); border:1px solid var(--line);}
.btn.ghost:hover{border-color:var(--sub);}
.btn:disabled{opacity:.4; cursor:default;}
.rec.on{background:var(--accent); color:#fff; border-color:var(--accent);}
.rec .dot{width:8px; height:8px; border-radius:50%; background:currentColor; opacity:.5;}
.rec.on .dot{animation:blink 1s steps(1) infinite;}
.rec.armed{border-color:#e8a33d; color:#e8a33d;}
.rec.armed .dot{background:#e8a33d; animation:blink 1.4s steps(1) infinite;}
@keyframes blink{50%{opacity:.15}}

/* 音轨区（紧凑平铺条，可横向缩放） */
.tracks{flex:1; min-height:240px; overflow:auto; padding:8px 8px 20px; scrollbar-width:thin; scrollbar-color:var(--line) transparent;}
/* 主题化滚动条（深色模式下不再是刺眼白色） */
.tracks::-webkit-scrollbar,.side .list::-webkit-scrollbar{width:10px; height:10px;}
.tracks::-webkit-scrollbar-track,.side .list::-webkit-scrollbar-track{background:transparent;}
.tracks::-webkit-scrollbar-thumb,.side .list::-webkit-scrollbar-thumb{background:var(--line); border-radius:6px; border:2px solid var(--bg);}
.tracks::-webkit-scrollbar-thumb:hover,.side .list::-webkit-scrollbar-thumb:hover{background:var(--sub);}
.tracks::-webkit-scrollbar-corner{background:transparent;}
.tracksInner{width:100%;}
.trow{
  display:flex; align-items:center; gap:8px; background:var(--panel);
  border:1px solid var(--line); border-radius:6px; padding:0 10px 0 0;
  margin-bottom:3px; min-height:52px;
  transition:transform .14s ease, opacity .2s, border-color .15s;
  will-change:transform;
}
.trow:hover{border-color:var(--sub);}
.trow.dragging{transition:none; position:relative; z-index:3; box-shadow:0 10px 24px rgba(0,0,0,0.18); border-color:var(--accent);}
.trow:hover{position:relative; z-index:5;}
.trow.muted .nameBox .nm{opacity:.55; text-decoration:line-through;}
/* 前端色块把手：通高，整段都是音轨色 + 双竖线 */
.grip{
  align-self:stretch; flex:none; width:20px; border-radius:5px 0 0 5px;
  display:flex; align-items:center; justify-content:center; gap:2px;
  cursor:grab; touch-action:none;
}
.grip:hover{filter:brightness(1.08);}
.grip:active{cursor:grabbing;}
.grip .g{width:1px; height:18px; background:rgba(255,255,255,0.7);}
/* 行首：上喇叭(音量) / 下旋钮(声像)，悬停浮出滑条 */
.gainctl{display:flex; flex-direction:column; align-items:center; gap:2px; flex:none; margin-left:3px;}
.hoverwrap{position:relative; display:flex;}
.mutebtn,.panbtn{border:none; background:none; color:var(--sub); cursor:pointer; width:22px; height:20px; padding:2px; border-radius:5px; display:flex; align-items:center; justify-content:center; transition:color .15s, background .15s;}
.mutebtn:hover,.panbtn:hover{background:rgba(128,128,128,0.14); color:var(--text);}
.mutebtn svg,.panbtn svg{width:15px; height:15px; fill:currentColor;}
.panbtn svg circle,.panbtn svg line{fill:none; stroke:currentColor;}
.mutebtn.is-muted{color:var(--accent); opacity:.85;}
.pop{
  position:absolute; left:100%; margin-left:2px; top:50%; transform:translateY(-50%);
  display:flex; align-items:center; gap:6px; padding:5px 8px;
  background:var(--panel); border:1px solid var(--line); border-radius:7px; box-shadow:var(--shadow);
  opacity:0; pointer-events:none; transition:opacity .12s ease .12s; z-index:20; white-space:nowrap;
}
/* 透明桥接：滑条与按钮之间留出可悬停区域，避免鼠标穿越时浮层消失 */
.pop::before{content:""; position:absolute; left:-12px; top:-4px; bottom:-4px; width:14px;}
.hoverwrap:hover .pop,.pop:hover{opacity:1; pointer-events:auto; transition-delay:0s;}
.pop input{-webkit-appearance:none; appearance:none; width:84px; height:3px; border-radius:2px; background:var(--line); outline:none; cursor:pointer;}
.pop input::-webkit-slider-thumb{-webkit-appearance:none; width:11px; height:11px; border-radius:50%; background:var(--panel); border:1px solid var(--line); box-shadow:0 1px 2px rgba(0,0,0,.25);}
.pop input::-moz-range-thumb{width:11px; height:11px; border-radius:50%; background:var(--panel); border:1px solid var(--line);}
.pop .lab{font-size:10px; color:var(--sub); font-variant-numeric:tabular-nums; min-width:22px; text-align:right;}
/* 名称 + 偏移（上下两块带框） */
.info{flex:none; width:152px; display:flex; flex-direction:column; gap:3px;}
.nameBox,.offBox{border:1px solid var(--line); border-radius:5px; background:var(--bg); display:flex; align-items:center;}
.nameBox{height:23px; padding:0 6px; gap:4px; cursor:text;}
.nameBox:hover{border-color:var(--sub);}
.nameBox .nm{font-size:12.5px; font-weight:600; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; flex:1; min-width:0;}
.nameBox input{flex:1; min-width:0; border:none; background:none; font:inherit; font-size:12.5px; font-weight:600; color:var(--text); outline:none; padding:0;}
.offBox{height:23px; padding:0 2px;}
.offBox button{border:none; background:none; color:var(--sub); cursor:pointer; width:20px; height:19px; border-radius:4px; font-size:12px; line-height:1; padding:0;}
.offBox button:hover{background:rgba(128,128,128,0.16); color:var(--text);}
.offBox .offVal{flex:1; text-align:center; font-size:10.5px; font-weight:500; color:var(--accent); cursor:pointer; font-variant-numeric:tabular-nums;}
.updot{display:inline-block; width:6px; height:6px; border-radius:50%; background:var(--accent); margin-left:4px; animation:pulse 1s ease-in-out infinite;}
@keyframes pulse{0%,100%{opacity:.3; transform:scale(.8)} 50%{opacity:1; transform:scale(1)}}
/* 波形（中性色） */
.trow canvas{flex:1; min-width:120px; height:38px; display:block; border-radius:3px;}
/* 缩放滑条 */
.zoomctl{display:flex; align-items:center; gap:8px; font-size:11px; color:var(--sub);}
.zoomctl input{-webkit-appearance:none; appearance:none; width:96px; height:3px; border-radius:2px; background:var(--line); outline:none; cursor:pointer;}
.zoomctl input::-webkit-slider-thumb{-webkit-appearance:none; width:12px; height:12px; border-radius:50%; background:var(--panel); border:1px solid var(--line); box-shadow:0 1px 2px rgba(0,0,0,.25);}
.zoomctl input::-moz-range-thumb{width:12px; height:12px; border-radius:50%; background:var(--panel); border:1px solid var(--line);}
.zoomctl .zlabel{font-variant-numeric:tabular-nums; min-width:38px; text-align:center;}
.sw{position:relative; width:44px; height:26px; flex:none; cursor:pointer;}
.sw input{display:none;}
.sw .kn{position:absolute; inset:0; border-radius:999px; background:var(--line); transition:background .2s;}
.sw input:checked + .kn{background:var(--green);}
.sw .kn::after{content:""; position:absolute; left:2px; top:2px; width:22px; height:22px; border-radius:50%; background:var(--panel); box-shadow:0 1px 3px rgba(0,0,0,.28); transition:transform .2s;}
.sw input:checked + .kn::after{transform:translateX(18px);}
.iconbtn{border:none; background:none; color:var(--sub); cursor:pointer; padding:5px; border-radius:8px; flex:none; transition:color .15s, background .15s;}
.iconbtn:hover{color:var(--text); background:rgba(128,128,128,0.12);}
.iconbtn.danger:hover{color:var(--accent);}

/* ---------- 登录弹窗 ---------- */
.modal{position:fixed; inset:0; z-index:100; display:none; align-items:center; justify-content:center; padding:20px;}
.modal.open{display:flex;}
.modal .backdrop{position:absolute; inset:0; background:rgba(0,0,0,0.35); backdrop-filter:blur(8px);}
.sheet{position:relative; width:100%; max-width:340px; background:var(--panel); border-radius:18px; box-shadow:var(--shadow); padding:26px 24px; animation:pop .22s cubic-bezier(.2,.9,.3,1.2);}
@keyframes pop{from{transform:scale(.94); opacity:0} to{transform:scale(1); opacity:1}}
.sheet h3{font-size:19px; font-weight:700; text-align:center; margin-bottom:18px;}
.sheet input{width:100%; font-family:inherit; font-size:15px; color:var(--text); background:rgba(120,120,128,0.10); border:1px solid transparent; border-radius:10px; padding:11px 14px; margin-bottom:10px; outline:none; transition:border-color .15s, background .15s;}
.sheet input:focus{border-color:var(--accent); background:var(--panel);}
.sheet .note{font-size:11px; color:var(--sub); text-align:center; margin:2px 0 14px;}
.sheet .row{display:flex; gap:10px; justify-content:center;}
.sheet .row .btn{flex:1; justify-content:center; padding:10px 0;}
.sheet .coderow{display:flex; gap:8px; align-items:flex-start;}
.sheet .coderow input{flex:1; margin-bottom:10px;}
.sheet .coderow .btn{flex:none; white-space:nowrap; padding:11px 12px; font-size:13px; margin-bottom:10px;}
.sheet .coderow .btn:disabled{opacity:.55; cursor:default;}

/* ---- 登录弹窗：模式切换 ---- */
.ltabs { display: flex; gap: 6px; margin: 4px 0 10px; }
.ltab {
  flex: 1; padding: 7px 4px; font-size: 13px; cursor: pointer;
  background: transparent; border: 1px solid var(--line, #333); border-radius: 8px;
  color: var(--fg-dim, #999);
}
.ltab.on { color: #fff; border-color: var(--accent, #e8b23a); background: rgba(232,178,58,.12); }
.legal { margin-top: 10px; font-size: 11px; line-height: 1.7; color: var(--fg-dim, #888); text-align: center; }
.legal a { color: var(--accent, #e8b23a); text-decoration: none; }
.legal a:hover { text-decoration: underline; }

/* ---- 项目名原地编辑 ---- */
.proj .pname-in {
  width: 100%; box-sizing: border-box; font: inherit; color: inherit;
  background: rgba(255,255,255,.9); border: 1px solid var(--accent, #e8b23a);
  border-radius: 5px; padding: 2px 5px; outline: none;
}
.proj .pact.ren svg { width: 14px; height: 14px; fill: none; stroke: currentColor; stroke-width: 1.7; }

/* 项目改名错误提示 */
.proj .perr { color: #c0392b; font-size: 11px; line-height: 1.3; margin-top: 2px; }
.proj .pname-in.bad { border-color: #c0392b; }