:root {
  /* 主色 */
  --c-primary:        #00A3A3;
  --c-primary-hover:  #008888;
  --c-primary-text:   #ffffff;

  /* 背景层级 */
  --c-bg:             #ffffff;
  --c-bg-secondary:   #f7f7f7;
  --c-canvas-bg:      #e8e4de;

  /* 边框 */
  --c-border:         #e0e0e0;
  --c-border-strong:  #c0c0c0;

  /* 文字 */
  --c-text:           #1a1a1a;
  --c-text-light:     #777777;
  --c-text-muted:     #aaaaaa;

  /* 交互状态 */
  --c-hover:          #f5f5f5;
  --c-active:         #e8f7f7;

  /* 危险色 */
  --c-danger:         #cc0000;
  --c-danger-bg:      #fff0f0;
  --c-danger-border:  #ffcccc;

  /* 棋盘格（透明背景用） */
  --c-checker-a:      rgba(0,0,0,.06);
  --c-checker-b:      transparent;

  /* 选区虚线 */
  --c-selection:      #00A3A3;

  /* 圆角 */
  --radius-sm:  5px;
  --radius-md:  7px;
  --radius-lg:  10px;

  /* 间距 */
  --gap-sm:  6px;
  --gap-md:  10px;
  --gap-lg:  12px;

  /* 字号 */
  --fs-xs:    10px;
  --fs-sm:    11px;
  --fs-base:  12px;
  --fs-md:    13px;

  /* 布局尺寸 */
  --canvas-size:  480px;
  --side-width:   220px;
  --tbtn-h:       30px;

  /* 阴影 */
  --shadow-sm:  0 1px 3px rgba(0,0,0,.08);
  --shadow-md:  0 2px 8px rgba(0,0,0,.12);
}

.theme-dark-mode {
  --c-bg:             #1e1e1e;
  --c-bg-secondary:   #252525;
  --c-canvas-bg:      #1a1a1a;
  --c-border:         #333333;
  --c-border-strong:  #444444;
  --c-text:           #e8e8e8;
  --c-text-light:     #aaaaaa;
  --c-text-muted:     #666666;
  --c-hover:          #2e2e2e;
  --c-active:         #1a3333;
  --c-checker-a:      rgba(255,255,255,.04);
  --c-checker-b:      transparent;
}


#tool-body .pxa-wrap{display:flex;gap:12px;flex-wrap:wrap;align-items:flex-start;justify-content: center;}
#tool-body .pxa-left{display:flex;flex-direction:column;gap:8px;flex-shrink:0}
#tool-body .pxa-canvas-outer{
  width:480px;height:480px;
  border-radius:10px;border:1px solid var(--c-border,#e0e0e0);
  overflow:hidden;position:relative;cursor:crosshair;
  background-image:
    linear-gradient(45deg,rgba(0,0,0,.06) 25%,transparent 25%),
    linear-gradient(-45deg,rgba(0,0,0,.06) 25%,transparent 25%),
    linear-gradient(45deg,transparent 75%,rgba(0,0,0,.06) 75%),
    linear-gradient(-45deg,transparent 75%,rgba(0,0,0,.06) 75%);
  background-size:16px 16px;
  background-position:0 0,0 8px,8px -8px,-8px 0;
  background-color:var(--c-canvas-bg,#e8e4de);
}
#tool-body .pxa-canvas-wrap{position:absolute;top:0;left:0;transform-origin:0 0}
#tool-body canvas#pxa-c{display:block;image-rendering:pixelated}

/* 工具栏 */
#tool-body .pxa-toolbar{display:flex;gap:6px;align-items:center;flex-wrap:wrap;
  max-width: 795px;
  margin: 0 auto;
}
#tool-body .pxa-tgroup{
  display:flex;gap:3px;
  background:var(--c-bg,#fff);
  border:1px solid var(--c-border,#e0e0e0);
  border-radius:7px;padding:3px;
}
#tool-body .pxa-tbtn{
  padding:5px 10px;font-size:12px;font-weight:500;
  border-radius:5px;border:none;
  background:transparent;color:var(--c-text-light,#777);
  cursor:pointer;white-space:nowrap;transition:background .1s,color .1s
}
#tool-body .pxa-tbtn:hover{background:var(--c-hover,#f5f5f5);color:var(--c-text,#1a1a1a)}
#tool-body .pxa-tbtn.active{background:var(--c-primary,#00A3A3);color:#fff}
#tool-body .pxa-tbtn.danger{color:#c00}
#tool-body .pxa-tbtn.danger:hover{background:#fff0f0}
#tool-body .pxa-sym-dot{
  display:inline-block;width:8px;height:8px;
  border-radius:50%;background:var(--c-border,#ccc);
  margin-right:4px;vertical-align:middle
}
#tool-body .pxa-tbtn.active .pxa-sym-dot{background:#fff}

/* 缩放栏 */
#tool-body .pxa-zoombar{display:flex;align-items:center;gap:6px;justify-content:center}
#tool-body .pxa-zbtn{
  width:26px;height:26px;border-radius:5px;
  border:1px solid var(--c-border,#e0e0e0);
  background:var(--c-bg,#fff);cursor:pointer;font-size:14px;
  display:inline-flex;align-items:center;justify-content:center
}
#tool-body .pxa-zbtn:hover{background:var(--c-hover,#f5f5f5)}
#tool-body .pxa-zval{font-size:12px;color:var(--c-text-light,#888);min-width:44px;text-align:center}
#tool-body .pxa-hint{font-size:11px;color:var(--c-text-light,#aaa);text-align:center}

/* 右侧面板 */
#tool-body .pxa-side{display:flex;flex-direction:column;gap:10px;width:300px;flex-shrink:0}
#tool-body .pxa-card{
  background:var(--c-bg,#fff);
  border-radius:10px;border:1px solid var(--c-border,#e0e0e0);padding:12px
}
#tool-body .pxa-card-title{
  font-size:11px;font-weight:600;
  color:var(--c-text-light,#999);
  text-transform:uppercase;letter-spacing:.05em;margin-bottom:8px
}
#tool-body .pxa-swatches{display:flex;flex-wrap:wrap;gap:5px;margin-bottom:6px}
#tool-body .pxa-sw{
  width:22px;height:22px;border-radius:4px;cursor:pointer;
  border:2px solid transparent;flex-shrink:0;transition:transform .1s
}
#tool-body .pxa-sw:hover{transform:scale(1.15)}
#tool-body .pxa-sw.active{border-color:var(--c-primary,#00A3A3)!important}
#tool-body .pxa-cur-color{display:flex;align-items:center;gap:8px;margin-bottom:10px}
#tool-body .pxa-cur-swatch{
  width:32px;height:32px;border-radius:6px;
  border:1px solid var(--c-border,#ddd);cursor:pointer;flex-shrink:0
}
#tool-body .pxa-hex{font-size:12px;color:var(--c-text-light,#888);font-family:monospace}
#tool-body .pxa-tabs{display:flex;gap:3px;margin-bottom:10px}
#tool-body .pxa-tab{
  font-size:12px;padding:4px 10px;border-radius:5px;
  border:1px solid var(--c-border,#ddd);
  background:transparent;color:var(--c-text-light,#777);cursor:pointer
}
#tool-body .pxa-tab.active{background:var(--c-primary,#00A3A3);color:#fff;border-color:var(--c-primary,#00A3A3)}
#tool-body .pxa-tabpanel{display:none}
#tool-body .pxa-tabpanel.active{display:block}
#tool-body .pxa-preset-grid{display:grid;grid-template-columns:1fr 1fr;gap:6px}
#tool-body .pxa-preset-btn{
  font-size:11px;padding:6px 4px;border-radius:6px;
  border:1px solid var(--c-border,#ddd);background:transparent;
  color:var(--c-text,#555);cursor:pointer;text-align:center
}
#tool-body .pxa-preset-btn:hover{background:var(--c-hover,#f5f5f5)}
#tool-body .pxa-row{display:flex;align-items:center;gap:8px;margin-bottom:6px}
#tool-body .pxa-row label{font-size:12px;color:var(--c-text-light,#666);min-width:40px}
#tool-body .pxa-row input[type=range]{flex:1;accent-color:var(--c-primary,#00A3A3)}
#tool-body .pxa-row span{font-size:12px;font-weight:500;min-width:20px;color:var(--c-text,#1a1a1a)}
#tool-body .pxa-row select{
  font-size:12px;padding:4px 6px;border-radius:5px;
  border:1px solid var(--c-border,#ddd);
  background:var(--c-bg,#fff);cursor:pointer;flex:1;
  color:var(--c-text,#1a1a1a)
}
#tool-body .pxa-prev-row{display:flex;gap:8px;align-items:flex-end}
#tool-body .pxa-prev-item{display:flex;flex-direction:column;align-items:center;gap:4px}
#tool-body .pxa-prev-item span{font-size:10px;color:var(--c-text-light,#aaa)}
#tool-body .pxa-prev-item canvas{image-rendering:pixelated;border-radius:3px;border:1px solid var(--c-border,#eee)}
#tool-body .pxa-hist{display:flex;flex-wrap:wrap;gap:4px}
#tool-body .pxa-hist-sw{
  width:20px;height:20px;border-radius:3px;cursor:pointer;
  border:1px solid rgba(0,0,0,.08)
}
#tool-body .pxa-hist-sw:hover{transform:scale(1.2)}
#tool-body .pxa-action-row{display:flex;gap:6px;flex-wrap:wrap}
#tool-body .pxa-abtn{
  flex:1;font-size:12px;padding:6px 8px;border-radius:6px;
  border:1px solid var(--c-border,#ddd);
  background:var(--c-bg,#fff);cursor:pointer;text-align:center;min-width:60px;
  color:var(--c-text,#555)
}
#tool-body .pxa-abtn:hover{background:var(--c-hover,#f5f5f5)}
#tool-body .pxa-abtn.danger{border-color:#fcc;color:#c00}
#tool-body .pxa-abtn.danger:hover{background:#fff0f0}
#tool-body .pxa-abtn.primary{background:var(--c-primary,#00A3A3);color:#fff;border-color:var(--c-primary,#00A3A3)}
#tool-body .pxa-abtn.primary:hover{opacity:.88}
#tool-body .pxa-import-btn{
  font-size:12px;padding:6px 10px;border-radius:6px;
  border:1px dashed var(--c-border,#ddd);background:transparent;
  cursor:pointer;width:100%;color:var(--c-text-light,#666);text-align:center
}
#tool-body .pxa-import-btn:hover{background:var(--c-hover,#f5f5f5);border-color:#aaa}
#tool-body input[type=file]#pxa-img-input{display:none}
#tool-body input[type=color]#pxa-color-picker{opacity: 0;}

/* 选区浮层 */
#tool-body #pxa-sel-overlay{
  position:absolute;pointer-events:none;
  border:1.5px dashed var(--c-primary,#00A3A3);display:none
}

/* 状态栏 */
#tool-body .pxa-status{font-size:11px;color:var(--c-text-light,#aaa);text-align:right}

/* 移动端：画布区单列 */
@media(max-width:760px){
  #tool-body .pxa-canvas-outer{width:100%;max-width:100vw;height:320px}
  #tool-body .pxa-side{width:100%}
  #tool-body .pxa-wrap{flex-direction:column}
  #tool-body .pxa-left{width: 100%;}
}

/* 夜间模式 */
.theme-dark-mode #tool-body .pxa-canvas-outer{
  border-color:#333;background-color:#1a1a1a;
  background-image:
    linear-gradient(45deg,rgba(255,255,255,.04) 25%,transparent 25%),
    linear-gradient(-45deg,rgba(255,255,255,.04) 25%,transparent 25%),
    linear-gradient(45deg,transparent 75%,rgba(255,255,255,.04) 75%),
    linear-gradient(-45deg,transparent 75%,rgba(255,255,255,.04) 75%)
}
.theme-dark-mode #tool-body .pxa-tgroup,
.theme-dark-mode #tool-body .pxa-card{background:#252525;border-color:#333}
.theme-dark-mode #tool-body .pxa-tbtn:hover{background:#333;color:#fff}
.theme-dark-mode #tool-body .pxa-zbtn{background:#252525;border-color:#333;color:#ccc}
.theme-dark-mode #tool-body .pxa-zbtn:hover{background:#333}
.theme-dark-mode #tool-body .pxa-tab{border-color:#444;}
.theme-dark-mode #tool-body .pxa-preset-btn{border-color:#444;color:#bbb;background:#252525}
.theme-dark-mode #tool-body .pxa-preset-btn:hover{background:#333}
.theme-dark-mode #tool-body .pxa-abtn{border-color:#444;color:#bbb;background:#252525}
.theme-dark-mode #tool-body .pxa-abtn:hover{background:#333}
.theme-dark-mode #tool-body .pxa-import-btn{border-color:#555;color:#888}
.theme-dark-mode #tool-body .pxa-import-btn:hover{background:#333}
.theme-dark-mode #tool-body .pxa-row select{background:#252525;border-color:#444;color:#ccc}
.theme-dark-mode #tool-body .pxa-cur-swatch{border-color:#444}
.theme-dark-mode #tool-body .pxa-sw.active{border-color:#00A3A3!important}