/* ============================================================
   未勾勒 — 专业画板 UI (board.css)
   命名空间统一 .wgl- 前缀，避免与站点 style.css 冲突
   ============================================================ */

.wgl-board{
  --wgl-paper:#f6f3ec; --wgl-ink:#1a1a1a; --wgl-gray:#6b675e;
  --wgl-line:#ddd5c3; --wgl-cinnabar:#b3261e; --wgl-gold:#b99c5e;
  --wgl-mist:#5a6b7a; --wgl-card:#fffdf7;
  background:var(--wgl-card); border:1px solid var(--wgl-line);
  border-radius:18px; overflow:hidden;
  box-shadow:0 18px 44px rgba(26,26,26,.07);
  font-family:var(--sans,"Noto Sans SC",sans-serif); color:var(--wgl-ink);
}

/* ---------------- 工具栏 ---------------- */
.wgl-toolbar{
  display:flex; flex-wrap:wrap; gap:10px 18px; align-items:center;
  padding:14px 18px; border-bottom:1px solid var(--wgl-line);
  background:linear-gradient(180deg,#fffdf7,#faf7f0);
}
.wgl-group{display:flex; align-items:center; gap:8px; flex-wrap:wrap}
.wgl-group>.wgl-gl{font-size:11px; letter-spacing:2px; color:var(--wgl-gray); margin-right:2px}
.wgl-sep{width:1px; align-self:stretch; min-height:26px; background:var(--wgl-line); margin:0 2px}

/* 笔刷按钮 */
.wgl-brush{
  border:1px solid var(--wgl-line); background:#fff; color:var(--wgl-ink);
  border-radius:9px; padding:7px 12px; cursor:pointer; font-size:12.5px;
  font-family:inherit; letter-spacing:1px; transition:.18s; line-height:1;
  display:inline-flex; align-items:center; gap:6px;
}
.wgl-brush:hover{border-color:var(--wgl-ink); transform:translateY(-1px)}
.wgl-brush.active{background:var(--wgl-ink); color:#fff; border-color:var(--wgl-ink)}
.wgl-brush .wgl-ico{font-size:14px; line-height:1}

/* 图标小按钮 */
.wgl-btn{
  border:1px solid var(--wgl-line); background:#fff; border-radius:9px;
  padding:7px 11px; cursor:pointer; font-size:12.5px; font-family:inherit;
  color:var(--wgl-ink); transition:.18s; line-height:1; white-space:nowrap;
}
.wgl-btn:hover{border-color:var(--wgl-ink)}
.wgl-btn:disabled{opacity:.35; cursor:not-allowed}
.wgl-btn.active{background:var(--wgl-ink); color:#fff; border-color:var(--wgl-ink)}
.wgl-btn.primary{background:var(--wgl-cinnabar); color:#fff; border-color:var(--wgl-cinnabar)}
.wgl-btn.primary:hover{background:#8f1d17; border-color:#8f1d17}

/* 色板 */
.wgl-swatches{display:flex; gap:6px}
.wgl-sw{
  width:22px; height:22px; border-radius:50%; cursor:pointer; padding:0;
  background:var(--c); border:2px solid transparent;
  box-shadow:inset 0 0 0 1px rgba(0,0,0,.12); transition:.15s;
}
.wgl-sw:hover{transform:scale(1.14)}
.wgl-sw.active{border-color:var(--wgl-ink); transform:scale(1.18)}

.wgl-color{
  width:30px; height:26px; padding:0; border:1px solid var(--wgl-line);
  border-radius:7px; background:#fff; cursor:pointer;
}

/* 滑杆 */
.wgl-range{display:flex; align-items:center; gap:8px; font-size:11px; color:var(--wgl-gray); letter-spacing:1px}
.wgl-range input[type=range]{
  width:86px; accent-color:var(--wgl-cinnabar); cursor:pointer; height:16px;
}
.wgl-range b{font-weight:500; color:var(--wgl-ink); min-width:30px; text-align:right; font-variant-numeric:tabular-nums}

/* 发布区 */
.wgl-publish{display:flex; align-items:center; gap:8px; margin-left:auto; flex-wrap:wrap}
.wgl-input{
  border:1px solid var(--wgl-line); background:#fff; border-radius:9px;
  padding:7px 10px; font-size:12.5px; font-family:inherit; color:var(--wgl-ink);
  width:104px; outline:none; transition:.18s;
}
.wgl-input:focus{border-color:var(--wgl-ink)}
.wgl-input::placeholder{color:#b3ada0}

/* ---------------- 画布区 ---------------- */
.wgl-viewport{
  position:relative; overflow:auto; background:
    repeating-conic-gradient(#efeade 0% 25%, #f4f0e6 0% 50%) 50%/22px 22px;
  padding:0; display:flex; justify-content:center; align-items:flex-start;
}
.wgl-stage{
  position:relative; isolation:isolate; flex:0 0 auto;
  box-shadow:0 2px 18px rgba(26,26,26,.13);
  touch-action:none; cursor:crosshair; line-height:0;
  transition:width .2s ease;
}
.wgl-stage canvas{position:absolute; inset:0; width:100%; height:100%; display:block}
.wgl-stage canvas.wgl-paper{z-index:1}
.wgl-stage canvas.wgl-paint{z-index:2}
.wgl-stage canvas.wgl-preview{z-index:3; pointer-events:none}
body.wgl-cursor-hidden .cursor{opacity:0 !important}

/* ---------------- 状态栏 ---------------- */
.wgl-status{
  display:flex; flex-wrap:wrap; gap:6px 20px; align-items:center;
  padding:9px 18px; border-top:1px solid var(--wgl-line);
  font-size:11.5px; color:var(--wgl-gray); letter-spacing:1px;
  background:#faf7f0;
}
.wgl-status b{font-weight:500; color:var(--wgl-ink); font-variant-numeric:tabular-nums}
.wgl-status .wgl-spacer{margin-left:auto}
.wgl-msg{font-size:11.5px; letter-spacing:1px}
.wgl-msg.ok{color:#2e7d5b}
.wgl-msg.err{color:var(--wgl-cinnabar)}
.wgl-msg.busy{color:var(--wgl-gold)}

/* ---------------- 画廊 ---------------- */
.wgl-gallery{border-top:1px solid var(--wgl-line); padding:14px 18px 16px; background:#fffdf7}
.wgl-gallery-head{
  display:flex; align-items:center; gap:10px; margin-bottom:10px;
  font-size:11.5px; letter-spacing:2px; color:var(--wgl-gray);
}
.wgl-gallery-head b{color:var(--wgl-ink); font-weight:500; letter-spacing:2px}
.wgl-gallery-track{
  display:flex; gap:10px; overflow-x:auto; padding-bottom:6px; min-height:74px;
  scrollbar-width:thin;
}
.wgl-gallery-track::-webkit-scrollbar{height:6px}
.wgl-gallery-track::-webkit-scrollbar-thumb{background:var(--wgl-line); border-radius:99px}
.wgl-thumb{
  flex:0 0 auto; width:112px; border:1px solid var(--wgl-line); border-radius:10px;
  overflow:hidden; background:#f4f0e6; cursor:pointer; transition:.18s;
}
.wgl-thumb:hover{transform:translateY(-3px); box-shadow:0 8px 20px rgba(26,26,26,.12)}
.wgl-thumb img{display:block; width:112px; height:74px; object-fit:cover}
.wgl-thumb figcaption{
  font-size:10.5px; padding:5px 7px; color:var(--wgl-gray);
  white-space:nowrap; overflow:hidden; text-overflow:ellipsis; letter-spacing:.5px;
}
.wgl-empty{
  display:flex; align-items:center; justify-content:center; width:100%;
  min-height:74px; color:#b3ada0; font-size:12px; letter-spacing:2px;
}

/* ---------------- 大图查看 ---------------- */
.wgl-modal{
  position:fixed; inset:0; z-index:200; display:none;
  align-items:center; justify-content:center; padding:4vh 4vw;
  background:rgba(26,26,26,.82); backdrop-filter:blur(6px);
}
.wgl-modal.open{display:flex}
.wgl-modal figure{max-width:min(1000px,92vw); max-height:92vh; text-align:center}
.wgl-modal img{
  max-width:100%; max-height:78vh; border-radius:10px;
  box-shadow:0 30px 70px rgba(0,0,0,.5); background:#fff;
}
.wgl-modal figcaption{color:#f6f3ec; font-size:12.5px; letter-spacing:2px; margin-top:14px}
.wgl-modal .wgl-close{
  position:absolute; top:22px; right:26px; width:40px; height:40px;
  border-radius:50%; border:1px solid rgba(246,243,236,.4); background:transparent;
  color:#f6f3ec; font-size:20px; cursor:pointer; line-height:1;
}
.wgl-modal .wgl-close:hover{background:rgba(246,243,236,.14)}

/* 折叠开关：桌面端无意义，仅移动端出现 */
.wgl-fold-toggle{display:none}

/* ---------------- 响应式 ---------------- */
@media (max-width:760px){
  .wgl-toolbar{padding:11px 12px; gap:8px 12px}
  .wgl-range input[type=range]{width:64px}
  .wgl-publish{margin-left:0; width:100%}
  .wgl-input{width:calc(50% - 4px); flex:1 1 40%}
  .wgl-status{padding:8px 12px; gap:4px 12px}
  .wgl-gallery{padding:12px}
  .wgl-thumb,.wgl-thumb img{width:96px}
  .wgl-thumb img{height:64px}
  /* 折叠：默认收起高级项，只留笔刷与颜色 */
  .wgl-fold-toggle{display:inline-block; margin-left:auto}
  .wgl-board.wgl-folded .wgl-collapsible{display:none}
  .wgl-board.wgl-folded .wgl-publish{display:none}
}