:root{
  --bg:#f6f7f9; --panel:#fff; --border:#e3e6ea;
  --text:#1f2328; --accent:#2563eb;
}
*{box-sizing:border-box}
html,body{height:100%;margin:0}
body{
  display:flex;flex-direction:column;overflow:hidden;background:var(--bg);color:var(--text);
  font-family:system-ui,-apple-system,"Segoe UI","PingFang SC","Microsoft YaHei",sans-serif;
}
header{
  flex:0 0 auto;display:flex;align-items:center;gap:10px;
  padding:10px 16px;background:var(--panel);border-bottom:1px solid var(--border);
}
header h1{font-size:15px;font-weight:600;margin:0 8px 0 0}
header .spacer{flex:1}
/* 返回首页按钮：沿用全站 back-home-btn 样式 */
.back-home-btn{
  flex:0 0 auto;display:flex;align-items:center;gap:6px;white-space:nowrap;
  padding:6px 14px;border-radius:20px;font-size:13px;font-weight:500;
  background:linear-gradient(135deg,#667eea 0%,#764ba2 100%);
  color:#fff;text-decoration:none;transition:.15s;
  box-shadow:0 2px 8px rgba(102,126,234,.3);
}
.back-home-btn:hover{transform:translateY(-2px);box-shadow:0 4px 12px rgba(102,126,234,.5)}
button,select{
  font:inherit;font-size:13px;padding:6px 12px;border:1px solid var(--border);
  border-radius:6px;background:#fff;color:var(--text);cursor:pointer;transition:.15s;
}
button:hover{background:#f0f2f5;border-color:#cbd2da}
button:disabled{opacity:.6;cursor:not-allowed}
button.primary{background:var(--accent);border-color:var(--accent);color:#fff}
button.primary:hover{background:#1d4ed8}

/* 视图模式切换：代码 / 分屏 / 预览 */
.mode-switch{display:flex;border:1px solid var(--border);border-radius:6px;overflow:hidden}
.mode-switch button{border:0;border-radius:0;padding:6px 12px;background:#fff}
.mode-switch button+button{border-left:1px solid var(--border)}
.mode-switch button:hover{background:#f0f2f5}
.mode-switch button.active,.mode-switch button.active:hover{background:var(--accent);color:#fff}

main{flex:1;display:flex;min-height:0;--editor-w:42%}
.pane{display:flex;flex-direction:column;min-width:0;min-height:0}
.editor{flex:0 0 var(--editor-w);background:#fff}
.preview{flex:1;background:#fff;position:relative}

/* 分割线：拖动调整代码区与预览区的宽度比例 */
.splitter{
  flex:0 0 6px;background:var(--border);cursor:col-resize;
  transition:background .15s;touch-action:none;user-select:none;
}
.splitter:hover,.splitter.dragging{background:var(--accent)}
body.resizing,body.resizing *{cursor:col-resize !important;user-select:none}

/* 单栏模式：隐藏另一侧，内容保留在 DOM 中，切回分屏不触发重新渲染 */
body[data-mode="code"] .preview,
body[data-mode="code"] .splitter,
body[data-mode="preview"] .editor,
body[data-mode="preview"] .splitter{display:none}
body[data-mode="code"] .editor{flex:1}

#code{
  flex:1;width:100%;border:0;outline:0;resize:none;padding:16px;
  font-family:ui-monospace,SFMono-Regular,Menlo,Consolas,monospace;
  font-size:13.5px;line-height:1.7;tab-size:2;color:#0f172a;background:#fff;
}
/* 预览视口：裁掉溢出的部分，拖动与滚轮事件都挂在这一层 */
#viewport{
  flex:1;position:relative;overflow:hidden;
  cursor:grab;touch-action:none;user-select:none;
}
#viewport.dragging{cursor:grabbing}

/* 画布层：宽度贴合 svg 尺寸，左上角对齐视口原点
   缩放改的是 svg 自身宽高（矢量重绘），这里只承担平移，所以不设 will-change：
   一旦提示浏览器为 transform 建合成层，放大时就会拿缓存位图拉伸，文字发虚 */
#output{
  position:absolute;left:0;top:0;width:max-content;
}
#output svg{display:block}
#error{
  position:absolute;left:12px;right:12px;bottom:12px;padding:10px 12px;
  border-radius:8px;font-size:12.5px;line-height:1.5;white-space:pre-wrap;
  background:#fee2e2;color:#991b1b;border:1px solid #fecaca;
  max-height:45%;overflow:auto;
}
#error[hidden]{display:none}

/* ---------------- 模板选择对话框 ---------------- */
.modal-overlay{
  display:none;position:fixed;inset:0;z-index:1000;
  align-items:center;justify-content:center;
  background:rgba(15,23,42,.6);backdrop-filter:blur(4px);
}
.modal-overlay.active{display:flex}

.modal-content{
  display:flex;flex-direction:column;
  width:90%;max-width:900px;max-height:85vh;
  background:var(--panel);border-radius:16px;overflow:hidden;
  box-shadow:0 20px 60px rgba(0,0,0,.28);
}
.modal-header{
  flex:0 0 auto;display:flex;align-items:center;justify-content:space-between;
  padding:16px 24px;border-bottom:1px solid var(--border);
  background:linear-gradient(135deg,#f8fafc 0%,#eef2ff 100%);
}
.modal-header h3{margin:0;font-size:15px;font-weight:600;color:#1e293b}
.modal-close{
  width:32px;height:32px;padding:0;font-size:14px;line-height:1;
  color:#64748b;background:transparent;border:0;border-radius:8px;
}
.modal-close:hover{background:#eef2ff;color:var(--accent)}
.modal-body{padding:20px 24px;overflow-y:auto}

.template-grid{
  display:grid;gap:16px;
  grid-template-columns:repeat(auto-fill,minmax(220px,1fr));
}
.template-card{
  display:flex;flex-direction:column;
  padding:14px;border:2px solid var(--border);border-radius:12px;
  background:#fff;cursor:pointer;transition:.2s;
}
.template-card:hover{
  border-color:var(--accent);transform:translateY(-4px);
  box-shadow:0 12px 24px rgba(37,99,235,.12);
}

/* 缩略图：固定高度裁切，svg 按 viewBox 等比缩到容器内 */
.template-preview{
  display:flex;align-items:center;justify-content:center;
  height:96px;margin-bottom:10px;padding:4px;overflow:hidden;
  background:#f8fafc;border-radius:8px;
}
.template-preview svg{max-width:100%;max-height:100%}
.template-preview-failed{
  font-size:12px;color:#94a3b8;
}

.template-icon{font-size:20px;line-height:1}
.template-title{margin:6px 0 4px;font-size:13.5px;font-weight:600;color:#1e293b}
.template-desc{margin:0 0 10px;font-size:12px;line-height:1.5;color:#64748b}
.template-tag{
  align-self:flex-start;margin-top:auto;padding:2px 9px;border-radius:20px;
  font-family:ui-monospace,SFMono-Regular,Menlo,Consolas,monospace;
  font-size:11px;color:#475569;background:#f1f5f9;
}