html.tool-page,body.tool-page{height:100%;overflow:hidden;}
body.tool-page{display:flex;flex-direction:column;}
.tool-layout{display:flex;flex:1;overflow:hidden;min-height:0;position:relative;}
.tool-sidebar{width:216px;flex-shrink:0;background:var(--surface);border-right:1px solid var(--border);display:flex;flex-direction:column;overflow:hidden;transition:transform var(--ease-3),box-shadow var(--ease-3);z-index:40;}
.sidebar-head{padding:10px 10px 0;flex-shrink:0;}
.sidebar-body{flex:1;overflow-y:auto;padding:0 10px 14px;min-height:0;}
.sidebar-body::-webkit-scrollbar{width:3px;}
.sidebar-body::-webkit-scrollbar-thumb{background:var(--border);border-radius:2px;}
.search-field{position:relative;margin-bottom:8px;}
.search-field i{position:absolute;left:9px;top:50%;transform:translateY(-50%);color:var(--ink-4);font-size:11px;pointer-events:none;}
.search-field input{width:100%;background:var(--surface-3);border:1px solid var(--border-2);color:var(--ink);padding:6px 8px 6px 27px;border-radius:var(--r-sm);font-size:12px;outline:none;transition:border-color var(--ease),background var(--ease);}
.search-field input::placeholder{color:var(--ink-4);}
.search-field input:focus{border-color:var(--green);background:var(--surface);}
.pill-row{display:flex;flex-wrap:wrap;gap:3px;margin-bottom:8px;}
.pill{background:var(--surface-3);color:var(--ink-4);border:1px solid transparent;padding:3px 8px;border-radius:12px;font-size:9.5px;font-weight:700;letter-spacing:.3px;text-transform:uppercase;cursor:pointer;transition:background var(--ease),color var(--ease),border-color var(--ease);white-space:nowrap;}
.pill:hover{background:var(--border);color:var(--ink-2);}
.pill.on{background:var(--green-bg);border-color:var(--green-b);color:var(--green-d);}
.lib-heading{font-size:9.5px;font-weight:700;letter-spacing:.8px;text-transform:uppercase;color:var(--ink-4);padding:8px 2px 5px;border-bottom:1px solid var(--border-2);margin-bottom:5px;margin-top:6px;}
.lib-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:3px;margin-bottom:6px;}
.lib-item{display:flex;flex-direction:column;align-items:center;gap:2px;padding:6px 3px;border-radius:var(--r-sm);cursor:pointer;border:1px solid var(--border-2);background:var(--surface-3);transition:border-color var(--ease),background var(--ease),transform var(--ease);text-align:center;}
.lib-item:hover{border-color:var(--border);background:var(--surface);transform:translateY(-1px);}
.lib-item.on{border-color:var(--green);background:var(--green-bg);}
.lib-icon{font-size:18px;line-height:1.15;display:block;}
.lib-name{font-size:8px;color:var(--ink-4);line-height:1.2;width:100%;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;}
.lib-item.on .lib-name{color:var(--green-d);}
.surf-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:3px;margin-bottom:6px;}
.surf-item{border-radius:var(--r-sm);overflow:hidden;cursor:pointer;border:1px solid var(--border-2);background:var(--surface);transition:border-color var(--ease),transform var(--ease);}
.surf-item:hover{border-color:var(--border);transform:translateY(-1px);}
.surf-item.on{border-color:var(--green);outline:1px solid var(--green);}
.surf-thumb{width:100%;height:16px;display:block;}
.surf-lbl{font-size:7.5px;font-weight:500;padding:2px 3px;color:var(--ink-2);text-align:center;line-height:1.2;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;}
.custom-block{background:var(--surface-3);border:1px solid var(--border);border-radius:var(--r);padding:10px;margin-bottom:10px;}
.custom-block-title{font-size:9.5px;font-weight:700;letter-spacing:.6px;text-transform:uppercase;color:var(--ink-3);margin-bottom:9px;}
.cb-row{display:flex;align-items:center;gap:7px;margin-bottom:5px;}
.cb-lbl{font-size:10px;color:var(--ink-3);min-width:36px;}
.cb-input{flex:1;background:var(--surface);border:1px solid var(--border);color:var(--ink);padding:4px 7px;border-radius:var(--r-xs);font-size:11px;outline:none;transition:border-color var(--ease);}
.cb-input:focus{border-color:var(--green);}
input[type="color"].cb-col{width:32px;height:24px;border:1px solid var(--border);border-radius:var(--r-xs);background:none;cursor:pointer;padding:2px;}
.cb-btn{width:100%;padding:7px;background:var(--green);color:#fff;border:none;border-radius:var(--r-sm);font-size:11px;font-weight:600;transition:background var(--ease),transform var(--ease);display:flex;align-items:center;justify-content:center;gap:5px;}
.cb-btn:hover{background:var(--green-d);transform:translateY(-1px);}
.tool-area{flex:1;display:flex;flex-direction:column;overflow:hidden;min-width:0;}
.tool-bar{background:var(--surface);border-bottom:1px solid var(--border);padding:6px 12px;display:flex;align-items:center;gap:6px;flex-shrink:0;flex-wrap:nowrap;overflow-x:auto;box-shadow:var(--s0);}
.tool-bar::-webkit-scrollbar{display:none;}
.t-grp{display:flex;gap:2px;flex-shrink:0;}
.t-btn{background:var(--surface);border:1px solid var(--border);color:var(--ink-3);padding:5px 10px;border-radius:var(--r-sm);font-size:11px;font-weight:600;transition:background var(--ease),border-color var(--ease),color var(--ease),transform var(--ease);display:flex;align-items:center;gap:5px;white-space:nowrap;flex-shrink:0;}
.t-btn:hover{background:var(--surface-3);color:var(--ink);transform:translateY(-1px);}
.t-btn:active{transform:translateY(0);}
.t-btn.on{border-color:var(--green);background:var(--green-bg);color:var(--green-d);}
.t-btn.danger:hover{background:#fef2f2;border-color:#fca5a5;color:#dc2626;transform:none;}
.t-btn.accent{background:var(--green-bg);border-color:var(--green-b);color:var(--green-d);}
.t-btn.accent:hover{background:var(--green);color:#fff;border-color:var(--green);transform:translateY(-1px);}
.t-sep{width:1px;height:18px;background:var(--border);flex-shrink:0;}
.t-msg{font-size:10.5px;color:var(--ink-4);flex:1;min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;}
.bsz-wrap{display:flex;align-items:center;gap:4px;flex-shrink:0;}
input[type="range"].t-range{width:56px;accent-color:var(--green);cursor:pointer;}
.bsz-val{font-size:11px;color:var(--ink-2);font-weight:600;min-width:12px;}
.zlbl{font-size:11px;color:var(--ink-2);font-weight:600;min-width:40px;text-align:center;flex-shrink:0;}
.prop-bar{background:linear-gradient(135deg,var(--green-bg),#f0fff4);border-bottom:1.5px solid var(--green-b);padding:0 12px;display:flex;align-items:center;gap:8px;flex-shrink:0;overflow:hidden;max-height:0;opacity:0;transition:max-height var(--ease-2),opacity var(--ease-2),padding var(--ease-2);}
.prop-bar.show{max-height:46px;opacity:1;padding:6px 12px;}
.prop-bar-lbl{font-size:11px;color:var(--green-d);font-weight:700;white-space:nowrap;flex-shrink:0;}
.prop-input{background:var(--surface);border:1px solid var(--green-b);color:var(--ink);padding:4px 8px;border-radius:var(--r-xs);font-size:12px;outline:none;width:160px;transition:border-color var(--ease);}
.prop-input:focus{border-color:var(--green);}
input[type="color"].prop-col{width:28px;height:22px;border:1px solid var(--green-b);border-radius:var(--r-xs);background:none;cursor:pointer;padding:1px;}
.prop-btn{background:var(--surface);border:1px solid var(--green-b);color:var(--ink-2);padding:4px 9px;border-radius:var(--r-xs);font-size:10px;font-weight:600;transition:background var(--ease),border-color var(--ease);white-space:nowrap;display:flex;align-items:center;gap:4px;}
.prop-btn:hover{background:var(--surface-3);}
.prop-btn.del{color:var(--rose);border-color:var(--rose-b);}
.prop-btn.del:hover{background:var(--rose-bg);}
.canvas-wrap{flex:1;overflow:auto;padding:20px;min-height:0;background:#18191c;}
.canvas-wrap::-webkit-scrollbar{width:6px;height:6px;}
.canvas-wrap::-webkit-scrollbar-thumb{background:#3a3b3f;border-radius:3px;}
#gc{display:block;flex-shrink:0;border-radius:3px;cursor:crosshair;will-change:transform;box-shadow:0 0 0 1px rgba(255,255,255,.06),0 20px 60px rgba(0,0,0,.6);touch-action:none;}
.tool-foot{background:var(--surface);border-top:1px solid var(--border);padding:4px 14px;display:flex;justify-content:space-between;font-size:10px;color:var(--ink-4);flex-shrink:0;}
.toast{position:fixed;bottom:20px;right:20px;background:var(--ink);color:#fff;padding:10px 16px;border-radius:var(--r);font-size:12px;font-weight:600;z-index:9999;pointer-events:none;max-width:280px;box-shadow:var(--s4);transform:translateY(70px) scale(.94);opacity:0;transition:transform .4s cubic-bezier(.34,1.56,.64,1),opacity .3s ease;}
.toast.show{transform:translateY(0) scale(1);opacity:1;}
.mob-overlay{display:none;position:fixed;inset:0;background:rgba(0,0,0,.35);z-index:39;backdrop-filter:blur(2px);}
.mob-overlay.show{display:block;animation:fadeIn .2s ease;}
.mob-toggle{display:none;position:fixed;bottom:16px;left:50%;transform:translateX(-50%);background:var(--green);color:#fff;border:none;border-radius:20px;padding:10px 22px;font-size:13px;font-weight:700;z-index:38;box-shadow:0 4px 20px rgba(22,163,74,.4);transition:background var(--ease),transform var(--ease),box-shadow var(--ease);align-items:center;gap:7px;white-space:nowrap;}
.mob-toggle:hover{background:var(--green-d);transform:translateX(-50%) translateY(-2px);box-shadow:0 6px 24px rgba(22,163,74,.5);}
.mob-empty{font-size:11px;color:var(--ink-4);text-align:center;padding:16px 4px;}
@keyframes fadeIn{from{opacity:0;}to{opacity:1;}}
@media(max-width:768px){
  .tool-sidebar{position:fixed;bottom:0;left:0;right:0;top:auto;width:100%;height:62%;border-right:none;border-top:1px solid var(--border);border-radius:16px 16px 0 0;box-shadow:var(--s5);transform:translateY(100%);}
  .tool-sidebar.open{transform:translateY(0);}
  .mob-toggle{display:flex;}
  .tool-bar{padding:5px 8px;gap:4px;}
  .t-btn{padding:5px 8px;font-size:10px;gap:4px;}
  .t-msg{display:none;}
  .t-sep{display:none;}
  .zlbl{min-width:32px;font-size:10px;}
  .prop-bar{padding:4px 8px;gap:5px;}
  .prop-bar.show{max-height:80px;padding:6px 8px;}
  .prop-input{width:120px;font-size:11px;}
}
@media(max-width:480px){
  .t-btn{padding:5px 6px;font-size:9.5px;}
  .prop-input{width:100px;}
  .canvas-wrap{padding:12px;}
  .mob-toggle{font-size:12px;padding:9px 18px;}
}