:root {
  --c-left: #5b7bd5;
  --c-main: #3a7bbd;
  --c-right: #3a9a6a;
  --c-brand: #b06ab3;
  --radius: 10px;
}
* { box-sizing: border-box; margin: 0; padding: 0; }
body {
  font-family: system-ui, "Microsoft YaHei", sans-serif;
  background: linear-gradient(150deg, #eef1fb, #f6f0fa 45%, #eef7f2);
  color: #333;
  min-height: 100vh;
}
.app { display: flex; flex-direction: column; height: 100vh; }
.glass {
  background: linear-gradient(160deg, rgba(255,255,255,.85), rgba(255,255,255,.55));
  border: 1.5px solid rgba(180,190,220,.45);
  border-radius: var(--radius);
}
.topbar {
  display: flex; align-items: center; gap: 10px;
  padding: 8px 14px; margin: 8px; border-color: rgba(176,106,179,.35);
}
.brand { font-weight: 700; color: var(--c-brand); font-size: 15px; }
.divider { width: 1px; height: 16px; background: rgba(176,106,179,.3); }
.spacer { flex: 1; }
.text-btn, .ghost-btn, .tool-btn {
  border: 1px solid rgba(176,106,179,.45); border-radius: 6px;
  background: rgba(255,255,255,.55); color: var(--c-brand);
  padding: 4px 12px; font-size: 13px; cursor: pointer;
}
.tool-btn { padding: 6px 0; color: #5b7bd5; border-color: rgba(120,150,220,.4); }
.tool-btn.active { background: rgba(120,150,220,.25); }
.layout { flex: 1; display: flex; gap: 8px; margin: 0 8px; min-height: 0; }
.panel { display: flex; flex-direction: column; min-height: 0; overflow: hidden; }
.left-panel { flex: 0 0 150px; border-color: rgba(120,150,220,.4); }
.right-panel { flex: 0 0 190px; border-color: rgba(90,170,130,.4); }
.canvas-panel { flex: 1; border-color: rgba(90,140,200,.4); }
.panel-title {
  padding: 5px 10px; font-size: 12px; font-weight: 700;
  color: #5b7bd5; border-bottom: 1px solid rgba(120,150,220,.25);
  background: linear-gradient(120deg, rgba(120,150,220,.18), rgba(120,150,220,.06));
}
.canvas-panel .panel-title { color: #3a7bbd; background: linear-gradient(120deg, rgba(90,140,200,.18), rgba(90,140,200,.06)); border-color: rgba(90,140,200,.25); }
.right-panel .panel-title { color: #3a9a6a; background: linear-gradient(120deg, rgba(90,170,130,.18), rgba(90,170,130,.06)); border-color: rgba(90,170,130,.25); }
.panel-block { display: flex; flex-direction: column; }
.panel-block + .panel-block { border-top: 1px solid rgba(120,150,220,.18); }
.tool-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 5px; padding: 8px; }
.palette-wrap { flex: 1; overflow-y: auto; padding: 8px; }
.palette-group { margin-bottom: 8px; }
.palette-group-name { font-size: 10px; color: #888; margin-bottom: 4px; }
.palette-grid { display: grid; grid-template-columns: repeat(5, 1fr); gap: 4px; }
.swatch {
  aspect-ratio: 1; border-radius: 5px; border: 1px solid rgba(0,0,0,.18);
  cursor: pointer; position: relative;
}
.swatch.selected { outline: 2px solid var(--c-brand); outline-offset: 1px; }
.canvas-host {
  flex: 1; display: flex; align-items: center; justify-content: center;
  overflow: hidden; background-image: radial-gradient(rgba(90,140,200,.12) 1px, transparent 1px);
  background-size: 14px 14px; min-height: 0;
}
#canvas { display: block; touch-action: none; }
.canvas-hint { padding: 4px 10px; font-size: 10px; color: #8aa; border-top: 1px solid rgba(90,140,200,.2); }
.prop-row { display: flex; align-items: center; gap: 8px; padding: 6px 10px; font-size: 12px; }
.prop-row label { flex: 0 0 60px; color: #666; }
.prop-row input[type=number] { width: 64px; padding: 3px 6px; border: 1px solid rgba(90,170,130,.4); border-radius: 5px; }
.current-color { display: inline-flex; align-items: center; gap: 6px; }
.current-color i { width: 12px; height: 12px; border-radius: 3px; border: 1px solid rgba(0,0,0,.18); }
.usage-list { list-style: none; padding: 8px 10px; font-size: 12px; max-height: 240px; overflow-y: auto; }
.usage-list li { display: flex; align-items: center; gap: 6px; line-height: 1.9; }
.usage-list .dot { width: 10px; height: 10px; border-radius: 3px; border: 1px solid rgba(0,0,0,.18); }
.usage-list .cnt { margin-left: auto; color: #888; }
.footer { text-align: center; padding: 6px; font-size: 10px; color: #aaa; border-top: 1px dashed rgba(176,106,179,.3); }
.toast {
  position: fixed; bottom: 40px; left: 50%; transform: translateX(-50%);
  padding: 8px 16px; border-radius: 8px; background: rgba(60,60,70,.85); color: #fff; font-size: 13px;
}
dialog {
  border: 1.5px solid rgba(180,190,220,.5);
  border-radius: 14px;
  padding: 20px 24px;
  width: 460px;
  max-width: 90vw;
  background: linear-gradient(160deg, rgba(255,255,255,.92), rgba(255,255,255,.72));
  color: #333;
}
dialog::backdrop {
  background: linear-gradient(160deg, rgba(58,66,100,.38), rgba(110,70,120,.32));
  backdrop-filter: blur(3px);
}
.dialog-body { display: flex; flex-direction: column; gap: 12px; }
.dialog-body h3 { color: var(--c-brand); font-size: 16px; }
dialog input[type="number"], dialog input[type="text"], dialog input[type="file"], dialog select {
  border: 1px solid rgba(180,190,220,.6);
  border-radius: 8px;
  padding: 6px 10px;
  font-size: 13px;
  background: rgba(255,255,255,.85);
  color: #333;
}
dialog input[type="file"] { padding: 5px; }
#import-preview { max-width: 100%; border: 1px solid rgba(180,190,220,.5); border-radius: 8px; margin-top: 4px; }
.works-toolbar { display: flex; gap: 8px; flex-wrap: wrap; }
.works-toolbar button, .dialog-actions button {
  border: 1px solid rgba(176,106,179,.45); border-radius: 6px; background: #fff; color: var(--c-brand);
  padding: 4px 12px; font-size: 12px; cursor: pointer;
}
.work-list { list-style: none; max-height: 260px; overflow-y: auto; }
.work-list li { display: flex; align-items: center; gap: 8px; padding: 6px 4px; border-bottom: 1px solid rgba(0,0,0,.06); font-size: 13px; }
.work-list .thumb { width: 40px; height: 40px; border-radius: 5px; border: 1px solid rgba(0,0,0,.15); background-size: cover; }
.work-list .w-name { flex: 1; }
.work-list button { border: none; background: none; color: #999; cursor: pointer; font-size: 12px; }
.work-list button.w-open { color: var(--c-brand); }
.dialog-actions { display: flex; gap: 8px; justify-content: flex-end; }
#btn-settings { display: none; }

/* 移动端适配：画布占主体，工具/色板移到底部，右栏弹成底部面板 */
@media (max-width: 768px) {
  .app { height: 100dvh; }
  .topbar { margin: 4px; padding: 6px 8px; gap: 6px; overflow-x: auto; }
  .brand { font-size: 14px; }
  .divider { display: none; }
  .text-btn, .ghost-btn { padding: 5px 8px; font-size: 12px; white-space: nowrap; }
  .layout { flex-direction: column; margin: 0 4px; gap: 4px; }
  .canvas-panel { flex: 1; }
  .canvas-panel .panel-title { padding: 6px 10px; }
  .canvas-hint { display: none; }
  /* 左栏：工具横排可滑动 + 色板紧凑 */
  .left-panel { flex: 0 0 auto; display: flex; flex-direction: column; }
  .left-panel .tool-grid { display: flex; overflow-x: auto; gap: 6px; padding: 8px; }
  .left-panel .tool-btn { flex: 0 0 auto; min-width: 64px; padding: 10px 8px; font-size: 13px; }
  .left-panel .palette-wrap { max-height: 120px; overflow-y: auto; padding: 5px 8px; }
  .palette-grid { grid-template-columns: repeat(12, 1fr); gap: 3px; }
  .swatch { border-radius: 4px; }
  /* 右栏：默认隐藏，点「设置」弹成底部面板 */
  .right-panel { display: none; }
  .right-panel.mobile-open {
    display: flex; position: fixed; left: 4px; right: 4px; bottom: 4px; z-index: 10;
    max-height: 46vh; border-radius: 14px;
  }
  .usage-list { max-height: 28vh; }
  #btn-settings { display: inline-block; }
  dialog { width: 92vw; padding: 16px; }
  .work-list { max-height: 40vh; }
  .works-toolbar button, .dialog-actions button { padding: 8px 14px; font-size: 13px; }
}

@media print {
  .topbar, .left-panel, .right-panel, .footer, .canvas-hint { display: none !important; }
  .layout { margin: 0; }
  .canvas-panel { border: none; flex: none; }
  .app { height: auto; }
  #print-root { page-break-after: always; }
  @page { size: A4; margin: 10mm; }
}