:root{
    --bg:#f5f6f8; --panel:#ffffff; --border:#e3e6ea; --text:#1f2329;
    --muted:#6b7280; --accent:#2563eb; --accent-soft:#eef4ff;
    --danger:#dc2626; --ok:#16a34a; --radius:10px;
  }
  *{box-sizing:border-box; margin:0; padding:0;}
  html,body{height:100%;}
  body{font-family:"Segoe UI","Microsoft YaHei",system-ui,sans-serif; background:var(--bg); color:var(--text); display:flex; flex-direction:column; height:100vh; overflow:hidden;}

  header{display:flex; align-items:center; gap:14px; padding:10px 18px; background:var(--panel); border-bottom:1px solid var(--border);}
  header .logo{width:30px;height:30px;border-radius:8px;background:linear-gradient(135deg,#2563eb,#7c3aed);display:flex;align-items:center;justify-content:center;color:#fff;font-weight:700;font-size:14px;}
  header h1{font-size:16px; font-weight:600;}
  header .sub{font-size:12px;color:var(--muted);}
  header .spacer{flex:1;}
  .btn{border:1px solid var(--border); background:#fff; color:var(--text); padding:6px 14px; border-radius:8px; font-size:13px; cursor:pointer; transition:.15s;}
  .btn:hover{border-color:var(--accent); color:var(--accent);}
  .btn.primary{background:var(--accent); border-color:var(--accent); color:#fff;}
  .btn.primary:hover{background:#1d4ed8; color:#fff;}
  .btn:disabled{opacity:.5; cursor:not-allowed;}

  main{flex:1; display:flex; min-height:0;}
  /* 左栏 */
  .side{width:280px; background:var(--panel); border-right:1px solid var(--border); display:flex; flex-direction:column; min-height:0;}
  .side .sec{padding:12px 14px; border-bottom:1px solid var(--border);}
  .sec h3{font-size:12px; color:var(--muted); font-weight:600; letter-spacing:.05em; margin-bottom:8px; text-transform:uppercase;}
  .drop{border:2px dashed #c9d4e3; border-radius:var(--radius); padding:18px 10px; text-align:center; color:var(--muted); font-size:13px; cursor:pointer; transition:.15s;}
  .drop.hover{border-color:var(--accent); background:var(--accent-soft);}
  .drop b{color:var(--accent);}
  .file-meta{font-size:12px; color:var(--muted); margin-top:6px;}
  .opts{display:grid; grid-template-columns:1fr 1fr; gap:8px;}
  .opts label{font-size:12px; color:var(--muted); display:flex; flex-direction:column; gap:3px;}
  .opts input{border:1px solid var(--border); border-radius:6px; padding:4px 6px; font-size:12px; width:100%;}
  .itemlist{flex:1; overflow-y:auto; padding:10px 12px; min-height:0;}
  .card{border:1px solid var(--border); border-radius:8px; margin-bottom:8px; background:#fff; font-size:12px;}
  .card.sel{border-color:var(--accent); box-shadow:0 0 0 2px var(--accent-soft);}
  .card.dim{opacity:.45;}
  .card.dim .head .badge{text-decoration:line-through;}
  .card .head{display:flex; align-items:center; gap:8px; padding:6px 10px; background:#fafbfc; border-bottom:1px solid var(--border); border-radius:8px 8px 0 0; cursor:pointer;}
  .card:not(.open) .head{border-bottom:none; border-radius:8px;}
  .card .tw{color:#94a3b8; font-size:10px; width:10px; flex:none;}
  .card .grid{display:none;}
  .card.open .grid{display:grid; grid-template-columns:repeat(3,1fr); gap:5px 8px; padding:8px 10px;}
  .badge{padding:1px 8px; border-radius:99px; font-size:11px; font-weight:600; background:var(--accent-soft); color:var(--accent);}
  .card .head .sw{width:14px;height:14px;border-radius:4px;border:1px solid var(--border);}
  .card .head .grow{flex:1;}
  .card .del{border:none;background:none;color:var(--muted);cursor:pointer;font-size:14px;line-height:1;padding:2px 4px;}
  .card .del:hover{color:var(--danger);}
  .card .f{display:flex; flex-direction:column;}
  .card .f span{font-size:10px; color:var(--muted);}
  .card .f input{border:1px solid var(--border); border-radius:5px; padding:2px 5px; font-size:12px; width:100%;}
  .addrow{padding:8px 12px; border-top:1px solid var(--border); display:flex; gap:8px;}
  .addrow select{flex:1; border:1px solid var(--border); border-radius:6px; padding:4px; font-size:12px;}

  /* 中央预览 */
  .center{flex:1; display:flex; flex-direction:column; min-width:0;}
  .toolbar{display:flex; align-items:center; gap:14px; padding:8px 16px; background:var(--panel); border-bottom:1px solid var(--border); flex-wrap:wrap;}
  .seg{display:inline-flex; border:1px solid var(--border); border-radius:8px; overflow:hidden;}
  .seg button{border:none; background:#fff; padding:5px 12px; font-size:12px; cursor:pointer; color:var(--muted);}
  .seg button.on{background:var(--accent); color:#fff;}
  .toolbar label{font-size:12px; color:var(--muted); display:flex; align-items:center; gap:6px;}
  .toolbar input[type=range]{width:120px;}
  .stagewrap{flex:1; overflow:auto; display:flex; align-items:flex-start; justify-content:center; padding:20px;}
  .stage{position:relative; box-shadow:0 2px 14px rgba(0,0,0,.12); background:#fff; font-size:0;}
  .stage img{display:block; width:100%; user-select:none; -webkit-user-drag:none;}
  .stage svg{position:absolute; inset:0; width:100%; height:100%;}
  .stage.grid-on::after{content:""; position:absolute; inset:0; pointer-events:none;
    background-image:linear-gradient(rgba(37,99,235,.12) 1px, transparent 1px),linear-gradient(90deg, rgba(37,99,235,.12) 1px, transparent 1px);
    background-size:50px 50px;}
  .stage .empty{position:absolute; inset:0; display:flex; flex-direction:column; align-items:center; justify-content:center; gap:8px; color:#9ca3af; font-size:14px; background:#fafbfc;}
  .stage.blank{min-height:340px; width:100%; border:1px dashed var(--border);}

  /* 右栏：图元列表 + JSON 页签 */
  .jsonpanel{width:360px; background:var(--panel); border-left:1px solid var(--border); display:flex; flex-direction:column; min-height:0;}
  .ptabs{display:flex; border-bottom:1px solid var(--border); flex:none;}
  .ptabs button{flex:1; border:none; background:#fafbfc; padding:9px 0; font-size:13px; cursor:pointer; color:var(--muted); border-bottom:2px solid transparent;}
  .ptabs button.on{background:#fff; color:var(--accent); border-bottom-color:var(--accent); font-weight:600;}
  .pane{flex:1; display:flex; flex-direction:column; min-height:0;}
  .jsonpanel .sec{padding:10px 12px; display:flex; gap:8px; align-items:center; border-bottom:1px solid var(--border);}
  .jsonpanel h3{font-size:12px;color:var(--muted);font-weight:600;flex:1;}
  .jsonpanel textarea{flex:1; border:none; resize:none; padding:12px; font-family:Consolas,monospace; font-size:12px; line-height:1.5; color:#334155; outline:none; min-height:0;}
  .statusbar{padding:5px 16px; background:var(--panel); border-top:1px solid var(--border); font-size:12px; color:var(--muted); display:flex; gap:18px;}
  .toast{position:fixed; bottom:46px; left:50%; transform:translateX(-50%); background:#111827; color:#fff; padding:8px 18px; border-radius:8px; font-size:13px; opacity:0; transition:.25s; pointer-events:none; z-index:99;}
  .modal-mask{position:fixed; inset:0; background:rgba(15,23,42,.45); display:flex; align-items:center; justify-content:center; z-index:200;}
  .modal{background:#fff; border-radius:10px; padding:18px 20px; width:330px; box-shadow:0 10px 40px rgba(0,0,0,.25);}
  .modal h3{margin:0 0 12px; font-size:15px; color:var(--text);}
  .mrow{display:flex; gap:10px; margin-bottom:10px;}
  .mrow label{flex:1; font-size:13px; color:#475569; display:flex; flex-direction:column; gap:4px;}
  .mrow input{border:1px solid var(--border); border-radius:6px; padding:6px 8px; font-size:13px;}
  .presets{display:flex; gap:6px; flex-wrap:wrap; margin-bottom:14px;}
  .presets button{border:1px solid var(--border); background:#fff; color:#475569; font-size:12px; padding:4px 10px; border-radius:999px; cursor:pointer;}
  .presets button:hover{border-color:var(--accent); color:var(--accent);}
  .mbtns{display:flex; gap:8px; justify-content:flex-end;}
  .toast.show{opacity:.92;}
  /* 裁切与缩放 */
  .vsep{width:1px; height:20px; background:var(--border); flex:none;}
  .stage.cropping{cursor:crosshair;}
  .cropLayer{position:absolute; inset:0; z-index:5; cursor:crosshair;}
  .cropRect{position:absolute; border:1.5px dashed #2563eb; box-shadow:0 0 0 9999px rgba(15,23,42,.45); pointer-events:none;}
  .cropRect .tag{position:absolute; left:0; top:-22px; background:#2563eb; color:#fff; font-size:11px; padding:1px 7px; border-radius:4px; white-space:nowrap; font-family:Consolas,monospace;}
  .chip{border:1px solid var(--border); background:#fff; border-radius:99px; padding:3px 10px; font-size:12px; cursor:pointer; color:var(--muted);}
  .chip.on{background:var(--accent); border-color:var(--accent); color:#fff;}
  .numin{width:54px; border:1px solid var(--border); border-radius:6px; padding:3px 5px; font-size:12px;}
  .step{display:inline-flex; align-items:center; gap:3px;}
  .step button{width:22px; height:24px; border:1px solid var(--border); border-radius:6px; background:#fff; cursor:pointer; font-size:14px; line-height:1; padding:0; color:#374151;}
  .step button:hover{background:#f3f4f6;}
  .step input[type=number]{-moz-appearance:textfield;}
  .step input[type=number]::-webkit-outer-spin-button,.step input[type=number]::-webkit-inner-spin-button{-webkit-appearance:none; margin:0;}
  [hidden]{display:none !important;}
  .seg#toolSeg{flex-wrap:wrap; overflow:visible;}
  #toolSeg button{white-space:nowrap;}
  .stage.drawing{cursor:crosshair;}
  .stage.drawing.candrag{cursor:default;} /* 悬停在图元上：显示箭头，提示可直接拖动移动 */
  .seg#toolSeg button.drawing-on{border-color:var(--accent); color:var(--accent); background:var(--accent-soft);}
  .toolorow{display:flex; align-items:center; gap:8px; padding:6px 10px; border-bottom:1px solid var(--border); flex-wrap:wrap; background:var(--panel,#fff);}
  .toolorow .hint{font-size:12px; color:var(--muted);}
  .toolorow label{display:flex; align-items:center; gap:4px; font-size:12px; color:var(--muted);}
  .toolorow input[type=text]{border:1px solid var(--border); border-radius:6px; padding:3px 6px; font-size:12px; width:74px;}