:root {
  --wm-ink: #292631;
  --wm-muted: #716c78;
  --wm-faint: #716c78;
  --wm-paper: #f4f6fa;
  --wm-line: rgba(41,38,49,.12);
  --wm-panel: #ffffff;
  --wm-lilac: #c9bedc;
  --wm-rose: #c9bedc;
  --wm-ice: #c8dee7;
  --wm-pick: #c9bedc;
  --wm-radius: 14px;
}

* { box-sizing: border-box; }
body {
  margin: 0;
  min-height: 100vh;
  color: var(--wm-ink);
  background: var(--wm-paper);
  font-family: -apple-system, BlinkMacSystemFont, "PingFang SC", "Helvetica Neue", sans-serif;
}

button, input { font: inherit; }
button:focus-visible, input:focus-visible, a:focus-visible {
  outline: 2px solid var(--wm-ink);
  outline-offset: 2px;
}


.wm-shell { max-width: 1480px; margin: 0 auto; padding: 0 clamp(14px, 3vw, 38px) 50px; }
.wm-intro {
  display: grid;
  grid-template-columns: minmax(0, 1fr) 270px;
  gap: 40px;
  align-items: end;
  padding: 46px 10px 30px;
}
.wm-eyebrow, .panel-kicker {
  color: var(--wm-faint);
  font-family: ui-monospace, "SFMono-Regular", Menlo, monospace;
  font-size: 10px;
  font-weight: 750;
  letter-spacing: .16em;
  text-transform: uppercase;
}
.wm-intro h1 {
  margin: 12px 0 0;
  max-width: 760px;
  font-family: "ZCOOL XiaoWei", "Songti SC", serif;
  font-size: clamp(29px, 4vw, 52px);
  line-height: 1.28;
  font-weight: 500;
  letter-spacing: -.03em;
}
.wm-intro-side { display: grid; grid-template-columns: 62px 1fr; gap: 14px; align-items: center; }
.wm-intro-side p { margin: 0; color: var(--wm-muted); font-size: 12px; line-height: 1.75; }
.palette-orb {
  width: 62px;
  height: 62px;
  position: relative;
  border-radius: 21px;
  background: color-mix(in srgb, var(--wm-pick) 72%, white);
  box-shadow: inset 0 0 0 1px rgba(255,255,255,.74), 0 14px 24px rgba(66,60,79,.12);
  overflow: hidden;
}
.palette-orb::before { content: ""; position: absolute; inset: -20%; background: linear-gradient(135deg, rgba(255,255,255,.9), transparent 45%, rgba(255,255,255,.35)); filter: blur(3px); }
.palette-orb span { position: absolute; width: 18px; height: 18px; right: 8px; bottom: 8px; border: 1px solid rgba(255,255,255,.7); border-radius: 50%; backdrop-filter: blur(6px); }

.wm-modebar {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  border: 1px solid var(--wm-line);
  border-radius: var(--wm-radius);
  overflow: hidden;
  background: #fff;
}
.mode-tab {
  min-height: 78px;
  display: grid;
  grid-template-columns: 34px 1fr;
  grid-template-rows: auto auto;
  column-gap: 9px;
  align-content: center;
  text-align: left;
  border: 0;
  border-right: 1px solid var(--wm-line);
  padding: 13px 18px;
  color: var(--wm-muted);
  background: transparent;
  cursor: pointer;
}
.mode-tab:last-child { border-right: 0; }
.mode-tab strong { font-size: 14px; color: var(--wm-ink); }
.mode-tab small { grid-column: 2; margin-top: 3px; font-size: 11px; }
.mode-no { grid-row: 1 / 3; align-self: center; font-family: ui-monospace, monospace; font-size: 11px; color: var(--wm-faint); }
.mode-tab.active { background: var(--wm-ink); color: rgba(255,255,255,.62); }
.mode-tab.active strong, .mode-tab.active .mode-no { color: #fff; }
.mode-tab:disabled { cursor: not-allowed; opacity: .55; }

.wm-uploadbar {
  display: flex;
  align-items: center;
  gap: 18px;
  margin: 14px 0;
  padding: 13px 16px 13px 20px;
  border: 1px dashed rgba(41,38,49,.28);
  border-radius: 15px;
  background: #fff;
  transition: border-color .15s, background .15s;
}
.wm-uploadbar.busy { opacity: .55; pointer-events: none; }
.wm-uploadbar.dragging { border-color: var(--wm-lilac); background: color-mix(in srgb, var(--wm-lilac) 18%, white); }
.wm-uploadbar > div { display: flex; flex: 1; min-width: 0; gap: 11px; align-items: baseline; }
.wm-uploadbar strong { font-size: 13px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.wm-uploadbar span { color: var(--wm-faint); font-size: 11px; }
.wm-upload {
  padding: 9px 17px;
  border-radius: 999px;
  color: #fff;
  background: var(--wm-ink);
  font-size: 12px;
  font-weight: 720;
  cursor: pointer;
  white-space: nowrap;
}
.wm-upload:hover { background: #3a3742; }

.wm-workbench {
  display: grid;
  grid-template-columns: 188px minmax(360px, 1fr) 270px;
  gap: 14px;
  align-items: start;
}
.wm-workbench.repair { grid-template-columns: minmax(360px, 1fr) 270px; }
.wm-templates, .wm-canvas-panel, .wm-controls {
  border: 1px solid var(--wm-line);
  border-radius: var(--wm-radius);
  background: var(--wm-panel);
  box-shadow: 0 18px 60px rgba(49,44,58,.055);
}
.wm-templates, .wm-controls { padding: 18px; }
.panel-kicker { margin-bottom: 14px; }
.template-list { display: grid; gap: 10px; max-height: 650px; overflow-y: auto; padding-right: 3px; scrollbar-width: thin; }
.template-card {
  width: 100%;
  display: grid;
  grid-template-columns: 58px 1fr;
  align-items: center;
  gap: 10px;
  padding: 7px;
  border: 1px solid transparent;
  border-radius: 13px;
  color: var(--wm-ink);
  background: transparent;
  text-align: left;
  cursor: pointer;
}
.template-card:hover { background: var(--wm-ice); }
.template-card.active { background: #fff; border-color: var(--wm-lilac); box-shadow: 0 7px 19px rgba(48,43,58,.07); }
.template-thumb {
  width: 58px;
  aspect-ratio: 1.22;
  display: grid;
  place-items: center;
  overflow: hidden;
  border-radius: 10px;
  color: #fff;
  background: linear-gradient(145deg, #ccd5df, var(--wm-pick));
  font-family: "Songti SC", serif;
  font-size: 10px;
  box-shadow: inset 0 0 0 1px rgba(255,255,255,.55);
}
.template-thumb.glass::after { content: "Lulu"; padding: 5px 8px; border: 1px solid rgba(255,255,255,.55); border-radius: 8px; background: rgba(255,255,255,.2); backdrop-filter: blur(5px); }
.template-thumb.script::after { content: "Lulu 〰"; transform: rotate(-7deg); }
.template-thumb.sticker::after { content: "✦ 原创"; padding: 5px 7px; color: var(--wm-ink); background: #fff; border-radius: 2px 8px 8px 8px; }
.template-thumb.repeat { background: repeating-linear-gradient(-28deg, #d2cbdc 0 10px, #e5e7ec 10px 20px); }
.template-thumb.repeat::after { content: "LULU · LULU"; font-size: 6px; transform: rotate(-28deg); white-space: nowrap; }
.template-copy strong, .template-copy small { display: block; }
.template-copy strong { font-size: 12px; }
.template-copy small { margin-top: 3px; color: var(--wm-faint); font-size: 9px; line-height: 1.4; }
.local-seal { margin: 24px 4px 4px; display: flex; gap: 8px; align-items: center; color: var(--wm-faint); font-family: ui-monospace, monospace; font-size: 8px; line-height: 1.25; letter-spacing: .08em; }
.local-seal i { width: 19px; height: 19px; border: 1px solid var(--wm-faint); border-radius: 50%; box-shadow: inset 0 0 0 3px white; }

.wm-canvas-panel { min-width: 0; overflow: hidden; }
.canvas-ruler {
  display: flex;
  justify-content: space-between;
  gap: 12px;
  padding: 12px 15px;
  color: var(--wm-faint);
  border-bottom: 1px solid var(--wm-line);
  font-family: ui-monospace, monospace;
  font-size: 9px;
  letter-spacing: .08em;
}
.canvas-wrap {
  min-height: 540px;
  position: relative;
  display: flex;
  align-items: center;
  justify-content: center;
  overflow: hidden;
  padding: 28px;
  background:
    linear-gradient(rgba(41,38,49,.035) 1px, transparent 1px),
    linear-gradient(90deg, rgba(41,38,49,.035) 1px, transparent 1px),
    #eef1f7;
  background-size: 24px 24px;
}
.canvas-wrap::before { content: "LOCAL / 01"; position: absolute; top: 10px; left: 12px; color: var(--wm-faint); font: 8px ui-monospace, monospace; letter-spacing: .12em; }
#workCanvas {
  display: block;
  max-width: 100%;
  max-height: 650px;
  width: auto;
  height: auto;
  background: #fff;
  box-shadow: 0 24px 60px rgba(42,39,47,.18);
  touch-action: none;
  user-select: none;
}
#workCanvas[data-mode="add"] { cursor: grab; }
#workCanvas[data-mode="add"]:active { cursor: grabbing; }
#workCanvas[data-mode="repair"] { cursor: crosshair; }
.canvas-empty { position: absolute; inset: 0; display: grid; place-content: center; justify-items: center; gap: 7px; color: var(--wm-faint); pointer-events: none; }
.canvas-empty[hidden] { display: none; }
.canvas-empty strong { color: var(--wm-muted); font-family: "ZCOOL XiaoWei", "Songti SC", serif; font-size: 16px; font-weight: 500; }
.canvas-empty span { font-size: 11px; }
.empty-mark { width: 46px; height: 46px; display: grid; place-items: center; border: 1px solid rgba(41,38,49,.25); border-radius: 50%; font-size: 21px; font-weight: 200; }
.canvas-actions { display: grid; grid-template-columns: 1fr 1.35fr; gap: 9px; padding: 13px 14px 0; background: #fff; }
.canvas-actions button { min-height: 43px; border-radius: 999px; font-weight: 730; font-size: 12px; cursor: pointer; }
.canvas-actions button:disabled { cursor: not-allowed; opacity: .4; }
.action-secondary { border: 1px solid rgba(41,38,49,.2); color: var(--wm-muted); background: #fff; }
.action-primary { border: 1px solid var(--wm-ink); color: #fff; background: var(--wm-ink); }
.canvas-note { min-height: 32px; margin: 0; padding: 8px 17px 14px; color: var(--wm-faint); background: #fff; font-size: 10px; line-height: 1.6; }

.field { display: block; padding: 13px 0; border-bottom: 1px solid var(--wm-line); }
.field > span:first-child, .range-field > span { display: flex; justify-content: space-between; color: var(--wm-muted); font-size: 11px; font-weight: 700; }
.field output { color: var(--wm-faint); font-family: ui-monospace, monospace; font-weight: 500; }
.text-field input { width: 100%; margin-top: 8px; padding: 10px 11px; border: 1px solid rgba(41,38,49,.2); border-radius: 10px; color: var(--wm-ink); background: #fff; }
.color-control { display: flex; align-items: center; gap: 9px; margin-top: 9px; }
.color-control input { width: 38px; height: 30px; padding: 0; border: 0; border-radius: 8px; overflow: hidden; background: none; }
.color-control b { color: var(--wm-faint); font: 10px ui-monospace, monospace; }
.range-field input[type="range"] { width: 100%; margin: 12px 0 0; accent-color: var(--wm-ink); }
.switch-row { display: flex; align-items: center; gap: 10px; padding: 15px 0; cursor: pointer; }
.switch-row > span { flex: 1; }
.switch-row strong, .switch-row small { display: block; }
.switch-row strong { font-size: 11px; }
.switch-row small { color: var(--wm-faint); font-size: 9px; margin-top: 3px; }
.switch-row input { position: absolute; opacity: 0; pointer-events: none; }
.switch-row i { width: 36px; height: 20px; position: relative; border-radius: 999px; background: #d8d7dd; transition: background .15s; }
.switch-row i::after { content: ""; position: absolute; width: 14px; height: 14px; left: 3px; top: 3px; border-radius: 50%; background: #fff; box-shadow: 0 2px 5px rgba(0,0,0,.16); transition: transform .15s; }
.switch-row input:checked + i { background: var(--wm-ink); }
.switch-row input:checked + i::after { transform: translateX(16px); }

.repair-tip, .repair-boundary, .repair-engine-note, .ai-model-card p { color: var(--wm-muted); font-size: 10px; line-height: 1.65; }
.repair-tip { display: flex; gap: 8px; padding: 10px; border-radius: 11px; background: color-mix(in srgb, var(--wm-lilac) 16%, white); }
.repair-dot { width: 8px; height: 8px; flex: 0 0 auto; margin-top: 4px; border-radius: 50%; background: #e07eaa; box-shadow: 0 0 0 4px rgba(224,126,170,.14); }
.repair-tools { display: grid; grid-template-columns: 1fr 1fr; gap: 7px; margin-top: 13px; padding: 4px; border: 1px solid var(--wm-line); border-radius: 12px; background: #f7f6f8; }
.repair-tools button { border: 0; border-radius: 9px; padding: 8px 7px; color: var(--wm-muted); background: transparent; font-size: 10px; font-weight: 700; cursor: pointer; }
.repair-tools button.active { color: #fff; background: var(--wm-ink); box-shadow: 0 2px 8px rgba(41,38,49,.16); }
.repair-actions { display: grid; grid-template-columns: repeat(2, 1fr); gap: 7px; margin-top: 13px; }
.repair-actions button, .repair-run, .repair-cancel, .ai-model-actions button { border-radius: 10px; padding: 9px 8px; font-size: 10px; font-weight: 700; cursor: pointer; }
.repair-actions button { border: 1px solid var(--wm-line); background: #fff; color: var(--wm-muted); }
.repair-actions button:disabled, .repair-run:disabled, .ai-model-actions button:disabled, .repair-tools button:disabled { opacity: .4; cursor: not-allowed; }
.repair-run { width: 100%; margin-top: 8px; border: 1px solid var(--wm-ink); color: #fff; background: var(--wm-ink); }
.repair-cancel { width: 100%; margin-top: 7px; border: 1px solid rgba(224,126,170,.5); color: #a8467a; background: #fff; }
.repair-boundary { margin: 9px 1px 0; }

/* 修补引擎分段：与标注工具同一套冰玻璃托盘，选中态用粉点缀区分「引擎」与「工具」两层 */
.repair-engine { margin-bottom: 13px; }
.repair-engine-label { display: block; margin-bottom: 7px; color: var(--wm-muted); font-size: 11px; font-weight: 700; }
.repair-engine-seg { display: grid; grid-template-columns: 1fr 1fr; gap: 4px; padding: 4px; border: 1px solid var(--wm-line); border-radius: 12px; background: color-mix(in srgb, var(--wm-ice) 26%, white); }
.repair-engine-seg button { border: 0; border-radius: 9px; padding: 9px 7px; color: var(--wm-muted); background: transparent; font-size: 11px; font-weight: 750; cursor: pointer; }
.repair-engine-seg button.active { color: var(--wm-ink); background: #fff; box-shadow: 0 2px 9px rgba(41,38,49,.1), inset 0 -2px 0 #e07eaa; }
.repair-engine-seg button:disabled { cursor: not-allowed; opacity: .45; }
.repair-engine-note { margin: 7px 1px 0; }

.ai-model-card { margin-bottom: 13px; padding: 12px; border: 1px solid rgba(255,255,255,.8); border-radius: 13px; background: linear-gradient(145deg, color-mix(in srgb, var(--wm-ice) 38%, white), color-mix(in srgb, var(--wm-lilac) 22%, white)); box-shadow: inset 0 0 0 1px var(--wm-line); }
.ai-model-card p { margin: 0; }
.ai-model-card .ai-model-warn { margin-top: 7px; color: #a8467a; }
.ai-model-progress[hidden] { display: none; }
.ai-model-progress { display: flex; align-items: center; gap: 9px; margin-top: 10px; }
.ai-model-bar { flex: 1; height: 6px; overflow: hidden; border-radius: 999px; background: rgba(41,38,49,.1); }
.ai-model-bar i { display: block; width: 0; height: 100%; border-radius: inherit; background: linear-gradient(90deg, var(--wm-lilac), #e07eaa); transition: width .2s; }
.ai-model-progress output { min-width: 34px; color: var(--wm-muted); font: 10px ui-monospace, monospace; text-align: right; }
.ai-model-actions { display: flex; flex-wrap: wrap; gap: 7px; margin-top: 10px; }
.ai-model-actions button { flex: 1 1 auto; border: 1px solid var(--wm-line); color: var(--wm-muted); background: #fff; }
.ai-model-actions .ai-model-primary { border-color: var(--wm-ink); color: #fff; background: var(--wm-ink); }
.ai-model-actions button[hidden] { display: none; }

/* ---- 档位闸（2026-09-25）：游客登录引导沿用 favorites.html 的「先登录 + 去登入」视觉语言 ---- */
.wm-guest[hidden], .wm-uploadbar[hidden], .wm-workbench[hidden], .ai-lock-card[hidden], .engine-lock[hidden], .repair-tier[hidden] { display: none !important; }
.wm-guest { margin: 14px 0; padding: 34px 20px 30px; text-align: center; border: 1px solid var(--wm-line); border-radius: var(--wm-radius); background: #fff; }
.wm-guest-t { font-family: "ZCOOL XiaoWei", "Songti SC", serif; font-size: 22px; letter-spacing: 2px; color: var(--wm-ink); }
.wm-guest-s { margin-top: 8px; color: var(--wm-muted); font-size: 12.5px; line-height: 1.8; }
.wm-guest-go { display: inline-block; margin-top: 16px; padding: 10px 26px; border-radius: 999px; color: #fff; background: var(--wm-ink); font-size: 13px; font-weight: 700; text-decoration: none; letter-spacing: 1px; }
.wm-guest-go:hover { background: #000; }
/* 登录态还没回：操作区整体压暗禁用，不闪出可用态 */
body[data-tier="pending"] .wm-workbench { opacity: .55; pointer-events: none; }
/* AI 会员锁标 + 非会员引导卡 */
.engine-lock { display: inline-block; margin-left: 5px; padding: 1px 6px; border-radius: 999px; color: #a8467a; background: rgba(224,126,170,.14); font-size: 9px; font-weight: 800; vertical-align: 1px; }
.engine-lock::before { content: "🔒 "; font-size: 8px; }
.ai-lock-card { margin-bottom: 13px; padding: 12px; border: 1px solid rgba(224,126,170,.34); border-radius: 13px; background: linear-gradient(145deg, color-mix(in srgb, var(--wm-lilac) 20%, white), #fff); }
.ai-lock-card p { margin: 0; color: var(--wm-muted); font-size: 10px; line-height: 1.65; }
.ai-lock-go { display: inline-block; margin-top: 9px; padding: 8px 14px; border-radius: 10px; color: #fff; background: var(--wm-ink); font-size: 10px; font-weight: 700; text-decoration: none; }
.repair-tier { margin: 7px 1px 0; color: #a8467a; font-size: 10px; line-height: 1.65; }

.wm-trust { display: grid; grid-template-columns: 130px 1fr 1fr; gap: 20px; margin: 16px 0 0; padding: 17px 20px; border: 1px solid var(--wm-line); border-radius: 15px; background: #fff; }
.wm-trust strong { font-family: "ZCOOL XiaoWei", "Songti SC", serif; font-weight: 600; }
.wm-trust p { margin: 0; color: var(--wm-muted); font-size: 10px; line-height: 1.7; }
.selftest-report { margin: 16px 0; padding: 12px; border-radius: 12px; color: #285b37; background: #edf7ef; font: 11px/1.65 ui-monospace, monospace; white-space: pre-wrap; }

@media (max-width: 1030px) {
  .wm-workbench { grid-template-columns: 160px minmax(0, 1fr); }
  .wm-workbench.repair { grid-template-columns: minmax(0, 1fr); }
  .wm-controls { grid-column: 1 / -1; }
}

@media (max-width: 720px) {
  .wm-intro { grid-template-columns: 1fr; gap: 18px; padding-top: 30px; }
  .wm-intro h1 { font-size: 31px; }
  .wm-intro-side { max-width: 300px; }
  .wm-modebar { display: flex; overflow-x: auto; scrollbar-width: none; }
  .mode-tab { flex: 1 0 170px; min-width: 0; border-bottom: 0; }
  .wm-uploadbar > div { display: grid; gap: 2px; }
  .wm-uploadbar span { display: none; }
  .wm-workbench { display: flex; flex-direction: column; }
  .wm-templates, .wm-canvas-panel, .wm-controls { width: 100%; }
  .wm-templates { padding-bottom: 12px; }
  .template-list { display: flex; gap: 8px; max-height: none; overflow-x: auto; padding: 0 0 6px; scrollbar-width: none; }
  .template-list::-webkit-scrollbar { display: none; }
  .template-card { min-width: 146px; }
  .local-seal { display: none; }
  .canvas-wrap { min-height: 390px; padding: 24px 14px; }
  #workCanvas { max-height: 520px; }
  .wm-controls { display: block; }
  .wm-controls > .panel-kicker { margin-bottom: 14px; }
  .wm-trust { grid-template-columns: 1fr; gap: 7px; }
  .repair-actions { grid-template-columns: repeat(2, 1fr); }
}

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { scroll-behavior: auto !important; transition: none !important; }
}