/* ==========================================================================
   博纳AI建站 · 自助建站向导 css/bn-studio.css
   仅服务 jz-* 命名空间，不改动官网既有 tx-* / ct-* 样式
   ========================================================================== */

/* ---------- 布局壳 ---------- */
.jz-wrap { background: #f4f6fa; padding: 24px 0 64px; min-height: 560px; }
.jz-center { max-width: 1360px; margin: 0 auto; padding: 0 24px; }
.jz-topbar { display: flex; align-items: center; justify-content: space-between; flex-wrap: wrap; gap: 10px; margin-bottom: 14px; }
.jz-crumb { font-size: 14px; color: #8a93a6; }
.jz-crumb a { color: #8a93a6; text-decoration: none; }
.jz-crumb a:hover { color: #1a6dff; }
.jz-crumb b { color: #2b3448; font-weight: 600; }
.jz-right { display: flex; align-items: center; gap: 12px; }
.jz-env { font-size: 14px; color: #1f8a4c; background: #e8f8ee; border: 1px solid #c3ecd4; border-radius: 20px; padding: 5px 12px; display: inline-flex; align-items: center; gap: 6px; }
.jz-env.warn { color: #a35b00; background: #fff6e5; border-color: #ffe0a8; }
.jz-env .dot { width: 7px; height: 7px; border-radius: 50%; background: currentColor; display: inline-block; }
.jz-user { font-size: 14px; color: #4a5468; background: #fff; border: 1px solid #e3e8f0; border-radius: 20px; padding: 5px 14px; }

/* ---------- 步骤条 ---------- */
.jz-steps { background: #fff; border: 1px solid #e6eaf2; border-radius: 12px; padding: 18px 12px; margin-bottom: 16px; overflow-x: auto; }
.jz-steps-in { display: flex; align-items: center; justify-content: center; min-width: 620px; }
.jz-step { display: flex; flex-direction: column; align-items: center; gap: 6px; flex: 0 0 auto; }
.jz-step i { width: 30px; height: 30px; border-radius: 50%; background: #eef1f7; color: #97a1b5; font-style: normal; font-size: 14px; font-weight: 600; display: flex; align-items: center; justify-content: center; transition: .2s; }
.jz-step span { font-size: 14px; color: #97a1b5; white-space: nowrap; }
.jz-step.on i { background: #1a6dff; color: #fff; box-shadow: 0 0 0 4px rgba(26,109,255,.14); }
.jz-step.on span { color: #1a6dff; font-weight: 600; }
.jz-step.done i { background: #d8f0e2; color: #1f8a4c; }
.jz-step.done span { color: #1f8a4c; }
.jz-step-line { flex: 1 1 auto; height: 2px; background: #eef1f7; margin: 0 8px 22px; min-width: 24px; }

/* ---------- 面板 ---------- */
.jz-panel { background: #fff; border: 1px solid #e6eaf2; border-radius: 12px; padding: 26px 28px 30px; }
.jz-page { display: none; }
.jz-page.on { display: block; animation: jzFade .22s ease; }
@keyframes jzFade { from { opacity: 0; transform: translateY(6px); } to { opacity: 1; transform: none; } }
.jz-h1 { font-size: 20px; color: #1c2536; margin: 0 0 6px; font-weight: 700; }
.jz-sub { font-size: 14px; color: #8a93a6; margin: 0 0 22px; line-height: 1.7; }

/* ---------- 站点类型卡片 ---------- */
.jz-modes { display: grid; grid-template-columns: 1fr 1fr; gap: 16px; }
.jz-mode { position: relative; border: 1.5px solid #e6eaf2; border-radius: 10px; padding: 20px 20px 18px; cursor: pointer; transition: .18s; background: #fff; }
.jz-mode:hover { border-color: #b9d0ff; box-shadow: 0 6px 18px rgba(26,109,255,.08); }
.jz-mode.on { border-color: #1a6dff; box-shadow: 0 6px 20px rgba(26,109,255,.14); }
.jz-mode.on::after { content: '\2713'; position: absolute; top: 12px; right: 14px; width: 22px; height: 22px; border-radius: 50%; background: #1a6dff; color: #fff; font-size: 14px; display: flex; align-items: center; justify-content: center; }
.jz-mode input { position: absolute; opacity: 0; pointer-events: none; }
.jz-mode h4 { margin: 0 0 8px; font-size: 16px; color: #1c2536; }
.jz-mode p { margin: 0; font-size: 14px; color: #7b8598; line-height: 1.75; }
.jz-mode .tag { display: inline-block; margin-top: 12px; font-size: 14px; color: #1a6dff; background: #eef4ff; border-radius: 4px; padding: 3px 8px; }

/* ---------- 表单 ---------- */
.jz-field { margin-bottom: 18px; }
.jz-field > label { display: block; font-size: 14px; color: #46506a; margin-bottom: 8px; font-weight: 600; }
.jz-input, .jz-textarea { width: 100%; box-sizing: border-box; border: 1px solid #dfe5ef; border-radius: 8px; padding: 11px 13px; font-size: 14px; color: #1c2536; outline: none; transition: .18s; background: #fff; }
.jz-input:focus, .jz-textarea:focus { border-color: #1a6dff; box-shadow: 0 0 0 3px rgba(26,109,255,.12); }
.jz-textarea { min-height: 86px; resize: vertical; font-family: inherit; }
.jz-row { display: flex; gap: 10px; align-items: stretch; }
.jz-row .jz-input { flex: 1 1 auto; }
.jz-hint { font-size: 14px; color: #8a93a6; margin-top: 8px; }
.jz-hint.ok { color: #1f8a4c; }
.jz-hint.err { color: #d64545; }

/* ---------- 按钮 ---------- */
.jz-btn { display: inline-flex; align-items: center; justify-content: center; gap: 6px; border: 1px solid #dfe5ef; background: #fff; color: #46506a; font-size: 14px; border-radius: 8px; padding: 10px 20px; cursor: pointer; transition: .18s; font-family: inherit; line-height: 1; }
.jz-btn:hover { border-color: #b9d0ff; color: #1a6dff; }
.jz-btn-primary { background: #1a6dff; border-color: #1a6dff; color: #fff; }
.jz-btn-primary:hover { background: #0f5ce0; border-color: #0f5ce0; color: #fff; }
.jz-btn-ghost { background: #f6f8fc; }
.jz-btn-xs { padding: 6px 12px; font-size: 14px; border-radius: 6px; }
.jz-btn.danger { color: #d64545; border-color: #f6d5d5; }
.jz-btn.danger:hover { background: #fff2f2; border-color: #d64545; color: #d64545; }
.jz-actions { margin-top: 26px; padding-top: 20px; border-top: 1px solid #f0f3f9; display: flex; gap: 12px; }
.jz-actions-in { margin-top: 20px; display: flex; gap: 12px; }

/* ---------- 免费二级域名 ---------- */
.jz-free { background: #f7faff; border: 1px dashed #b9d0ff; border-radius: 10px; padding: 16px 18px; margin-top: 6px; }
.jz-free-hd { display: flex; align-items: center; justify-content: space-between; gap: 10px; margin-bottom: 10px; }
.jz-free-hd b { font-size: 14px; color: #1c2536; }
.jz-free-hd span { font-size: 14px; color: #8a93a6; }
.jz-free-line { display: flex; align-items: center; flex-wrap: wrap; gap: 6px; font-size: 15px; color: #46506a; }
.jz-free-line em { font-style: normal; font-weight: 600; color: #1a6dff; background: #fff; border: 1px solid #dfe5ef; border-radius: 6px; padding: 6px 10px; }
.jz-free-line .suf { color: #7b8598; }

/* ---------- 域名检测结果 ---------- */
.jz-check { display: flex; gap: 12px; align-items: flex-start; border-radius: 8px; padding: 13px 15px; margin-top: 14px; font-size: 14px; line-height: 1.75; }
.jz-check i { font-style: normal; width: 20px; height: 20px; border-radius: 50%; color: #fff; font-size: 14px; display: flex; align-items: center; justify-content: center; flex: 0 0 auto; margin-top: 2px; background: #1a6dff; }
.jz-check b { display: block; font-size: 14px; margin-bottom: 3px; }
.jz-check p { margin: 0; }
.jz-check.ok { background: #eefaf2; color: #1f6b45; }
.jz-check.ok i { background: #1f8a4c; }
.jz-check.warn { background: #fff8ea; color: #8a5a12; }
.jz-check.warn i { background: #e39b1c; }
.jz-check.err { background: #fdf0f0; color: #9c3030; }
.jz-check.err i { background: #d64545; }

/* ---------- 解析引导 ---------- */
.jz-note { display: flex; gap: 12px; align-items: flex-start; border-radius: 8px; padding: 14px 16px; margin-bottom: 18px; font-size: 14px; line-height: 1.8; }
.jz-note i { font-style: normal; width: 20px; height: 20px; border-radius: 50%; color: #fff; font-size: 14px; display: flex; align-items: center; justify-content: center; flex: 0 0 auto; margin-top: 3px; }
.jz-note b { display: block; font-size: 15px; margin-bottom: 4px; }
.jz-note p { margin: 0; }
.jz-note em { font-style: normal; font-weight: 600; color: #1a6dff; }
.jz-note.ok { background: #eefaf2; color: #1f6b45; } .jz-note.ok i { background: #1f8a4c; }
.jz-note.warn { background: #fff8ea; color: #8a5a12; } .jz-note.warn i { background: #e39b1c; }
.jz-note.err { background: #fdf0f0; color: #9c3030; } .jz-note.err i { background: #d64545; }
.jz-note.info { background: #f2f6ff; color: #2c4a86; } .jz-note.info i { background: #1a6dff; }

.jz-tut { list-style: none; margin: 0 0 6px; padding: 0; counter-reset: t; }
.jz-tut > li { position: relative; padding: 0 0 22px 22px; border-left: 2px solid #eef1f7; margin-left: 8px; }
.jz-tut > li:last-child { border-left-color: transparent; padding-bottom: 4px; }
.jz-tut > li::before { content: ''; position: absolute; left: -7px; top: 5px; width: 12px; height: 12px; border-radius: 50%; background: #fff; border: 2px solid #1a6dff; }
.jz-tut > li > b { display: block; font-size: 15px; color: #1c2536; margin-bottom: 6px; }
.jz-tut p { margin: 0; font-size: 14px; color: #6b7party; color: #6b7688; line-height: 1.85; }
.jz-tut em { font-style: normal; font-weight: 600; color: #1a6dff; }

.jz-table { margin: 12px 0 4px; overflow-x: auto; }
.jz-table table { width: 100%; border-collapse: collapse; font-size: 14px; }
.jz-table th, .jz-table td { border: 1px solid #e6eaf2; padding: 9px 12px; text-align: left; color: #46506a; }
.jz-table th { background: #f7f9fd; font-weight: 600; color: #2b3448; }
.jz-table em { font-style: normal; font-weight: 600; color: #1a6dff; }

.jz-shots { display: grid; grid-template-columns: repeat(3, 1fr); gap: 12px; margin-top: 12px; }
.jz-shots figure { margin: 0; border: 1px solid #e6eaf2; border-radius: 8px; overflow: hidden; background: #f8fafd; }
.jz-shots img { width: 100%; display: block; aspect-ratio: 16 / 10; object-fit: cover; background: #eef1f7; }
.jz-shots figcaption { font-size: 14px; color: #8a93a6; text-align: center; padding: 7px 0; background: #fff; border-top: 1px solid #f0f3f9; }

.jz-preview { background: #f7f9fd; border-radius: 8px; padding: 14px 16px; font-size: 14px; }
.jz-preview span { display: block; color: #8a93a6; margin-bottom: 6px; }
.jz-preview a { color: #1a6dff; font-weight: 600; text-decoration: none; word-break: break-all; }
.jz-preview a:hover { text-decoration: underline; }

/* ---------- 生成进度 ---------- */
.jz-prog { margin-bottom: 22px; }
.jz-prog-hd { display: flex; justify-content: space-between; align-items: baseline; margin-bottom: 10px; }
.jz-prog-hd b { font-size: 14px; color: #1c2536; }
.jz-prog-hd span { font-size: 14px; color: #1a6dff; font-weight: 700; }
.jz-prog-bar { height: 8px; border-radius: 6px; background: #eef1f7; overflow: hidden; }
.jz-prog-bar i { display: block; height: 100%; width: 0; border-radius: 6px; background: linear-gradient(90deg, #1a6dff, #59a0ff); transition: width .5s ease; }
.jz-prog-now { font-size: 14px; color: #8a93a6; margin-top: 10px; }

.jz-stages { list-style: none; margin: 0 0 20px; padding: 0; }
.jz-stages li { position: relative; padding: 0 0 16px 26px; font-size: 14px; color: #97a1b5; }
.jz-stages li::before { content: ''; position: absolute; left: 3px; top: 4px; width: 10px; height: 10px; border-radius: 50%; background: #eef1f7; border: 2px solid #dfe5ef; }
.jz-stages li:not(:last-child)::after { content: ''; position: absolute; left: 8px; top: 18px; bottom: 0; width: 2px; background: #eef1f7; }
.jz-stages li.on { color: #1a6dff; font-weight: 600; }
.jz-stages li.on::before { background: #fff; border-color: #1a6dff; box-shadow: 0 0 0 3px rgba(26,109,255,.14); }
.jz-stages li.done { color: #1f8a4c; }
.jz-stages li.done::before { background: #1f8a4c; border-color: #1f8a4c; }

.jz-tree { border: 1px solid #e6eaf2; border-radius: 8px; overflow: hidden; font-size: 14px; background: #fff; }
.jz-tree-hd { background: #f7f9fd; padding: 10px 14px; color: #46506a; font-weight: 600; border-bottom: 1px solid #e6eaf2; }
.jz-tree-bd { padding: 12px 16px; font-family: Consolas, Monaco, monospace; color: #46506a; }
.jz-tree-bd .root { margin: 0 0 8px; color: #1a6dff; font-weight: 600; }
.jz-tree-bd ul { list-style: none; margin: 0; padding: 0 0 0 14px; }
.jz-tree-bd li { position: relative; padding: 3px 0 3px 14px; }
.jz-tree-bd li::before { content: '\2514'; position: absolute; left: 0; color: #b9c2d4; }

/* ---------- 完成页 ---------- */
.jz-done { text-align: center; padding: 8px 0 4px; }
.jz-done .ico { width: 60px; height: 60px; border-radius: 50%; background: #eefaf2; color: #1f8a4c; font-size: 30px; display: flex; align-items: center; justify-content: center; margin: 0 auto 16px; }
.jz-done h3 { font-size: 20px; color: #1c2536; margin: 0 0 8px; }
.jz-done > p { font-size: 14px; color: #7b8598; margin: 0 0 22px; line-height: 1.8; }
.jz-done-url { display: flex; align-items: center; justify-content: center; gap: 10px; flex-wrap: wrap; background: #f7faff; border: 1px solid #e2ebff; border-radius: 10px; padding: 16px; font-size: 15px; }
.jz-done-url a { color: #1a6dff; font-weight: 600; text-decoration: none; word-break: break-all; }
.jz-done-url a:hover { text-decoration: underline; }
.jz-done-meta { display: grid; grid-template-columns: repeat(4, 1fr); gap: 12px; margin-top: 20px; text-align: left; }
.jz-done-meta > div { background: #f9fbfe; border: 1px solid #eef1f7; border-radius: 8px; padding: 12px 14px; }
.jz-done-meta span { display: block; font-size: 14px; color: #8a93a6; margin-bottom: 5px; }
.jz-done-meta b { font-size: 14px; color: #1c2536; }
.jz-done-meta b.ok { color: #1f8a4c; }

/* ---------- 站点管理 ---------- */
.jz-mgr-hd { display: flex; align-items: center; justify-content: space-between; gap: 12px; margin-bottom: 18px; }
.jz-mgr-hd h3 { margin: 0; font-size: 18px; color: #1c2536; }
.jz-site-list { display: grid; gap: 14px; }
.jz-empty { text-align: center; color: #97a1b5; font-size: 14px; padding: 40px 0; background: #f9fbfe; border: 1px dashed #e0e6f1; border-radius: 10px; }
.jz-site { border: 1px solid #e6eaf2; border-radius: 10px; padding: 16px 18px; background: #fff; transition: .18s; }
.jz-site:hover { border-color: #c8dbff; box-shadow: 0 6px 18px rgba(26,109,255,.07); }
.jz-site-hd { display: flex; align-items: center; justify-content: space-between; gap: 10px; margin-bottom: 10px; }
.jz-site-hd > div { display: flex; align-items: center; gap: 8px; }
.jz-site-hd b { font-size: 15px; color: #1c2536; }
.jz-mode-tag { font-size: 11.5px; color: #1a6dff; background: #eef4ff; border-radius: 4px; padding: 2px 7px; }
.jz-state { font-size: 14px; padding: 3px 10px; border-radius: 20px; }
.jz-state.on { color: #1f8a4c; background: #e8f8ee; }
.jz-state.off { color: #8a93a6; background: #f1f3f7; }
.jz-site-url { display: flex; align-items: center; gap: 10px; margin-bottom: 12px; flex-wrap: wrap; }
.jz-site-url a { color: #1a6dff; font-size: 14px; text-decoration: none; word-break: break-all; }
.jz-site-url a:hover { text-decoration: underline; }
.jz-site-ft { display: flex; gap: 8px; flex-wrap: wrap; padding-top: 12px; border-top: 1px solid #f0f3f9; }

/* ---------- 日志弹层 ---------- */
.jz-modal { position: fixed; inset: 0; background: rgba(18,24,38,.55); display: flex; align-items: center; justify-content: center; z-index: 9999; padding: 20px; }
.jz-modal-box { background: #fff; border-radius: 12px; width: 100%; max-width: 760px; max-height: 84vh; display: flex; flex-direction: column; overflow: hidden; box-shadow: 0 24px 60px rgba(0,0,0,.3); }
.jz-modal-hd { display: flex; align-items: center; justify-content: space-between; padding: 14px 18px; border-bottom: 1px solid #eef1f7; }
.jz-modal-hd b { font-size: 15px; color: #1c2536; }
.jz-modal-hd i { font-style: normal; cursor: pointer; color: #97a1b5; font-size: 20px; line-height: 1; padding: 0 4px; }
.jz-modal-hd i:hover { color: #d64545; }
.jz-modal-box pre { margin: 0; padding: 16px 18px; overflow: auto; font-size: 14px; line-height: 1.85; color: #33405c; background: #f8fafd; font-family: Consolas, Monaco, monospace; white-space: pre-wrap; word-break: break-all; }

/* ---------- 与向导模板类名对齐（兼容别名） ---------- */
.jz-topbar-r { display: flex; align-items: center; gap: 12px; }
.jz-h2 { font-size: 20px; color: #1c2536; margin: 0 0 6px; font-weight: 700; }
.jz-tip { font-size: 14px; color: #8a93a6; margin: 0 0 22px; line-height: 1.7; }
.jz-label { display: block; font-size: 14px; color: #46506a; margin-bottom: 8px; font-weight: 600; }
.jz-label i { font-style: normal; color: #d64545; }
.jz-input-row { display: flex; gap: 10px; align-items: stretch; }
.jz-input-row .jz-input { flex: 1 1 auto; }

.jz-mode-bd { display: block; }
.jz-mode-bd b { display: inline-block; margin: 0 8px 8px 0; font-size: 16px; color: #1c2536; }
.jz-mode-bd em { font-style: normal; font-size: 11.5px; color: #1a6dff; background: #eef4ff; border-radius: 4px; padding: 2px 7px; vertical-align: 3px; }
.jz-mode-bd p { margin: 0 0 10px; font-size: 14px; color: #7b8598; line-height: 1.75; }
.jz-mode-bd ul { margin: 0; padding: 0; list-style: none; }
.jz-mode-bd li { position: relative; padding: 3px 0 3px 16px; font-size: 14px; color: #6b7688; }
.jz-mode-bd li::before { content: ''; position: absolute; left: 3px; top: 10px; width: 5px; height: 5px; border-radius: 50%; background: #b9c2d4; }

.jz-free-pre { font-weight: 600; color: #1a6dff; background: #fff; border: 1px solid #dfe5ef; border-radius: 6px; padding: 6px 10px; }
.jz-free-suf { color: #7b8598; font-weight: 600; }

.jz-ok { width: 60px; height: 60px; border-radius: 50%; background: #eefaf2; color: #1f8a4c; font-size: 30px; display: flex; align-items: center; justify-content: center; }
.jz-done-hd { display: flex; gap: 16px; align-items: center; text-align: left; margin-bottom: 22px; }
.jz-done-hd b { font-size: 18px; color: #1c2536; }
.jz-done-hd .jz-hint { margin: 4px 0 0; }

.jz-prog-num { display: flex; justify-content: space-between; align-items: baseline; margin-top: 10px; }
.jz-prog-num b { font-size: 14px; color: #1a6dff; font-weight: 700; }
.jz-prog-num span { font-size: 14px; color: #8a93a6; }

.jz-sites { display: grid; gap: 14px; }

.jz-modal-bd { background: #fff; border-radius: 12px; width: 100%; max-width: 760px; max-height: 84vh; display: flex; flex-direction: column; overflow: hidden; box-shadow: 0 24px 60px rgba(0,0,0,.3); }
.jz-modal-x { border: none; background: none; cursor: pointer; color: #97a1b5; font-size: 22px; line-height: 1; padding: 0 6px; font-family: inherit; }
.jz-modal-x:hover { color: #d64545; }
.jz-modal-pre { margin: 0; padding: 16px 18px; overflow: auto; font-size: 14px; line-height: 1.85; color: #33405c; background: #f8fafd; font-family: Consolas, Monaco, monospace; white-space: pre-wrap; word-break: break-all; }

/* ---------- 响应式 ---------- */
/* ===== 2026-09-18 补齐：工作台主布局 / 对话 / 上传 / 设置栏 ===== */

/* --- 顶部 hero --- */
.jz-hero { padding: 34px 0 26px; text-align: center; }
.jz-hero-t { font-size: 30px; line-height: 1.35; color: #1c2536; margin: 0 0 12px; font-weight: 700; letter-spacing: -.3px; }
.jz-hero-p { font-size: 15px; color: #6b7688; margin: 0 auto 20px; max-width: 640px; line-height: 1.85; }
.jz-chips { display: flex; flex-wrap: wrap; gap: 10px; justify-content: center; }
.jz-chip { border: 1px solid #dfe6f2; background: #fff; color: #46506a; font-size: 14px; padding: 8px 15px; border-radius: 999px; cursor: pointer; transition: .18s; font-family: inherit; }
.jz-chip:hover { border-color: #1a6dff; color: #1a6dff; background: #f4f8ff; transform: translateY(-1px); }

/* --- 工作台主区：左对话 + 右设置栏 --- */
.jz-main { display: grid; grid-template-columns: 360px minmax(0, 1fr); gap: 20px; align-items: start; padding: 0 0 40px; }
/* --- 2026-09-18 左右互调：设置栏在左，对话在右 --- */
.jz-side { order: 1; }
.jz-chat { order: 2; }
.jz-gen, .jz-done { order: 3; }

/* --- 左侧对话卡 --- */
.jz-chat { background: #fff; border: 1px solid #e6eaf2; border-radius: 12px; box-shadow: 0 6px 22px rgba(28, 37, 54, .05); overflow: hidden; display: flex; flex-direction: column; min-height: 560px; }
.jz-chat-hd { display: flex; align-items: center; gap: 10px; padding: 12px 16px; border-bottom: 1px solid #eef1f7; background: #fbfcfe; }
.jz-chat-av { width: 28px; height: 28px; border-radius: 50%; background: linear-gradient(135deg, #1a6dff, #5b9bff); color: #fff; font-size: 14px; font-weight: 700; display: flex; align-items: center; justify-content: center; flex: 0 0 auto; }
.jz-chat-hd .jz-tabs { border-bottom: 0; padding: 0; margin: 0 0 0 auto; gap: 4px; background: #f2f5fb; border-radius: 8px; padding: 3px; }
.jz-chat-hd .jz-tab { border: 0; background: transparent; padding: 6px 13px; border-radius: 6px; font-size: 14px; color: #6b7688; cursor: pointer; font-family: inherit; }
.jz-chat-hd .jz-tab.on { background: #fff; color: #1a6dff; font-weight: 600; box-shadow: 0 1px 4px rgba(28, 37, 54, .08); }
.jz-pane { display: none; flex: 1; min-height: 0; flex-direction: column; }
.jz-pane.on { display: flex; }
.jz-msgs { flex: 1; overflow-y: auto; padding: 18px 16px; display: flex; flex-direction: column; gap: 14px; background: #fdfefe; }
.jz-quick { display: flex; flex-wrap: wrap; gap: 8px; padding: 0 16px 14px; }
.jz-chat-ft { border-top: 1px solid #eef1f7; padding: 12px 16px; background: #fbfcfe; }

/* --- 文档上传档位 --- */
.jz-doc-list { display: flex; flex-direction: column; gap: 8px; margin: 12px 0; }
.jz-doc-go { display: flex; align-items: center; gap: 12px; flex-wrap: wrap; margin-top: 4px; }
.jz-doc-tip { background: #f7f9fd; border-left: 3px solid #1a6dff; border-radius: 0 8px 8px 0; padding: 12px 15px; margin-top: 16px; font-size: 14px; line-height: 1.85; color: #46506a; }
.jz-doc-tip b { display: block; color: #1c2536; margin-bottom: 4px; font-size: 14px; }
.jz-doc-tip p { margin: 0; }
.jz-parse { margin: 14px 0 0; }

/* --- 代码档位 --- */
.jz-code { font-family: Consolas, "Courier New", monospace; font-size: 14px; line-height: 1.7; tab-size: 2; white-space: pre; overflow: auto; }

/* --- 右侧设置栏 --- */
.jz-side { background: #fff; border: 1px solid #e6eaf2; border-radius: 12px; box-shadow: 0 6px 22px rgba(28, 37, 54, .05); position: sticky; top: 16px; max-height: calc(100vh - 32px); display: flex; flex-direction: column; overflow: hidden; }
.jz-side-hd { display: flex; align-items: center; justify-content: space-between; gap: 10px; padding: 13px 16px; border-bottom: 1px solid #eef1f7; background: #fbfcfe; }
.jz-side-hd b { font-size: 15px; color: #1c2536; }
.jz-side-toggle { border: 1px solid #dfe6f2; background: #fff; color: #6b7688; font-size: 14px; padding: 5px 11px; border-radius: 6px; cursor: pointer; font-family: inherit; }
.jz-side-toggle:hover { border-color: #1a6dff; color: #1a6dff; }
.jz-side-bd { padding: 16px; overflow-y: auto; }
.jz-side.collapsed .jz-side-bd { display: none; }

/* --- 设置项 / 分段选择 / 颜色 --- */
.jz-opt { padding: 0 0 16px; margin-bottom: 16px; border-bottom: 1px solid #f2f5fb; }
.jz-opt:last-child { border-bottom: 0; margin-bottom: 0; padding-bottom: 0; }
.jz-seg { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 8px; }
.jz-seg label { position: relative; cursor: pointer; }
.jz-seg input { position: absolute; opacity: 0; pointer-events: none; }
.jz-seg span { display: inline-block; border: 1px solid #dfe6f2; border-radius: 8px; padding: 8px 13px; font-size: 14px; color: #46506a; background: #fff; transition: .16s; }
.jz-seg input:checked + span { border-color: #1a6dff; color: #1a6dff; background: #f2f7ff; font-weight: 600; }
.jz-seg span em { font-style: normal; font-size: 11px; color: #fff; background: #1a6dff; border-radius: 4px; padding: 1px 5px; margin-left: 5px; }
.jz-seg-wrap span { min-width: 78px; text-align: center; }
.jz-colors { display: flex; flex-wrap: wrap; gap: 10px; margin-top: 9px; }
.jz-colors label { position: relative; cursor: pointer; }
.jz-colors input { position: absolute; opacity: 0; pointer-events: none; }
.jz-colors i { display: block; width: 34px; height: 34px; border-radius: 50%; border: 3px solid #fff; box-shadow: 0 0 0 1px #dfe6f2; transition: .16s; }
.jz-colors input:checked + i { box-shadow: 0 0 0 2px #1a6dff; transform: scale(1.06); }

/* --- 模板选择 / 结构树 --- */
.jz-tpls { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px; margin-top: 10px; }
.jz-tpls .jz-tpl { border: 1px solid #dfe6f2; border-radius: 9px; padding: 11px 13px; cursor: pointer; font-size: 14px; color: #46506a; background: #fff; transition: .16s; }
.jz-tpls .jz-tpl:hover { border-color: #1a6dff; background: #f7faff; }
.jz-tpls .jz-tpl.on { border-color: #1a6dff; background: #f2f7ff; color: #1a6dff; font-weight: 600; }
.jz-tree-edit { list-style: none; margin: 10px 0 0; padding: 0; display: flex; flex-direction: column; gap: 7px; }
.jz-tree-edit li { display: flex; align-items: center; gap: 8px; font-size: 14px; color: #46506a; background: #f7f9fd; border-radius: 7px; padding: 8px 12px; }
.jz-tree-edit li b { font-weight: 600; color: #1c2536; }

/* --- 通用小件 --- */
.jz-btn-sm { padding: 6px 12px; font-size: 14px; border-radius: 7px; }
.jz-up-sm .jz-up-in { padding: 16px 14px; }
.jz-up-sm .jz-up-ico { font-size: 20px; }
.jz-up-sm b { font-size: 14px; }
.jz-send-tip { font-size: 14px; color: #98a1b3; margin: 8px 0 0; }
.jz-send { display: inline-flex; align-items: center; gap: 6px; }
.jz-gen { padding: 34px 0 44px; }

/* --- 我的站点管理 --- */
.jz-manage { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 14px; margin-top: 14px; }
.jz-manage-hd { display: flex; align-items: center; justify-content: space-between; gap: 12px; flex-wrap: wrap; padding: 0 0 12px; border-bottom: 1px solid #eef1f7; }
.jz-manage-hd b { font-size: 16px; color: #1c2536; }

/* 建站方式三档：模板改 / 自定义结构 / 自带代码 */
.jz-way { display: flex; flex-direction: column; gap: 8px; margin-top: 9px; }
.jz-way-i { display: flex; flex-direction: column; gap: 2px; border: 1px solid #dfe6f2; border-radius: 9px; padding: 10px 13px; cursor: pointer; background: #fff; transition: .16s; position: relative; }
.jz-way-i:hover { border-color: #b9d2ff; background: #fafcff; }
.jz-way-i.on { border-color: #1a6dff; background: #f2f7ff; box-shadow: 0 0 0 1px #1a6dff inset; }
.jz-way-i input { position: absolute; opacity: 0; pointer-events: none; }
.jz-way-i b { font-size: 14px; color: #1c2536; font-weight: 600; }
.jz-way-i.on b { color: #1a6dff; }
.jz-way-i span { font-size: 14px; color: #8a93a6; line-height: 1.6; }
.jz-way-bd { margin-top: 10px; padding: 13px 14px; background: #fbfcfe; border-radius: 9px; border-bottom: 0; }

/* 上传区通用 */
.jz-up { border: 1.5px dashed #cfdaf0; border-radius: 10px; background: #fbfcfe; text-align: center; transition: .16s; cursor: pointer; }
.jz-up:hover, .jz-up.on { border-color: #1a6dff; background: #f5f9ff; }
.jz-up-in { padding: 22px 16px; }
.jz-up-ico { display: block; font-size: 24px; color: #1a6dff; margin-bottom: 6px; }
.jz-up b { display: block; font-size: 14px; color: #1c2536; margin-bottom: 4px; }
.jz-up p { margin: 0; font-size: 14px; color: #8a93a6; line-height: 1.7; }

/* 对话输入框 */
.jz-ta { width: 100%; border: 1px solid #dfe6f2; border-radius: 9px; padding: 10px 12px; font-size: 14px; line-height: 1.7; color: #1c2536; resize: vertical; font-family: inherit; box-sizing: border-box; }
.jz-ta:focus { outline: 0; border-color: #1a6dff; box-shadow: 0 0 0 3px rgba(26, 109, 255, .12); }

@media (max-width: 560px) {
  .jz-way-i { padding: 9px 11px; }
  .jz-up-in { padding: 18px 12px; }
}
@media (max-width: 900px) {
  .jz-hero { padding: 26px 0 20px; }
  .jz-hero-t { font-size: 24px; }
  .jz-main { grid-template-columns: 1fr; gap: 16px; }
  .jz-side { position: static; max-height: none; order: 1; }
  .jz-chat { min-height: 460px; order: 2; }
  .jz-side.collapsed .jz-side-bd { display: block; }
  .jz-tpls { grid-template-columns: 1fr; }
  .jz-manage { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (max-width: 560px) {
  .jz-hero-t { font-size: 21px; }
  .jz-hero-p { font-size: 14px; }
  .jz-chips { gap: 7px; }
  .jz-chip { font-size: 14px; padding: 7px 12px; }
  .jz-chat-hd { flex-wrap: wrap; }
  .jz-chat-hd .jz-tabs { margin-left: 0; width: 100%; }
  .jz-chat-hd .jz-tab { flex: 1; }
  .jz-msgs { padding: 14px 12px; }
  .jz-chat-ft { padding: 10px 12px; }
  .jz-side-bd { padding: 13px; }
  .jz-manage { grid-template-columns: 1fr; }
  .jz-doc-go { flex-direction: column; align-items: stretch; }
}

@media (max-width: 900px) {
  .jz-modes { grid-template-columns: 1fr; }
  .jz-input-row { flex-wrap: wrap; }
  .jz-done-hd { flex-direction: column; align-items: flex-start; }
  .jz-done-meta { grid-template-columns: repeat(2, 1fr); }
  .jz-shots { grid-template-columns: repeat(2, 1fr); }
}
@media (max-width: 560px) {
  .jz-panel { padding: 20px 16px 24px; }
  .jz-shots { grid-template-columns: 1fr; }
  .jz-done-meta { grid-template-columns: 1fr; }
  .jz-actions { flex-direction: column; }
  .jz-actions .jz-btn { width: 100%; }
}

/* --- 2026-09-18 输入框可加高加长 --- */
.jz-ta { min-height: 96px; max-height: 320px; resize: vertical; overflow-y: auto; }
.jz-ta-auto { height: auto; field-sizing: content; }
.jz-send-v { display: block; }
.jz-send-bar { display: flex; align-items: center; justify-content: space-between;
  gap: 12px; margin-top: 8px; }
.jz-send-hint { font-size: 14px; color: #98a1b3; }
@media (max-width: 700px) {
  .jz-ta { min-height: 84px; }
  .jz-send-hint { display: none; }
}

/* ==========================================================================
   2026-09-21 浅色页头主题（studio 页专用）
   原 tx-* 页头是为深色 hero 设计的深色透明头；本页为浅色底，
   在不改动官网既有 CSS 的前提下，仅在本页覆盖为「白底 + 深色字」。
   ========================================================================== */
body { padding-top: var(--bn-header-used, 230px); }
/* DISABLED-2026-10-19-统一页头 */ /* .tx-header.tx-float { background: #fff; box-shadow: 0 2px 12px rgba(20,35,70,.08); } */
/* DISABLED-2026-10-19-统一页头 */ /* .tx-header.tx-float .tx-head-logo .img1 { display: none; } */
/* DISABLED-2026-10-19-统一页头 */ /* .tx-header.tx-float .tx-head-logo .img2 { display: block; } */
/* DISABLED-2026-10-19-统一页头 */ /* .tx-header.tx-float .tx-head-top .pos-text { color: #b8860b; } */
/* DISABLED-2026-10-19-统一页头 */ /* .tx-header.tx-float .tx-head-top h4 img, */
/* DISABLED-2026-10-19-统一页头 */ /* .tx-header.tx-float .tx-head-top h3 img { filter: invert(1) brightness(.25); } */
/* DISABLED-2026-10-19-统一页头 */ /* .tx-header.tx-float .tx-head-top i { background: #dfe4ee; } */
/* DISABLED-2026-10-19-统一页头 */ /* .tx-header.tx-float #StranLink { color: #46506a !important; } */
/* DISABLED-2026-10-19-统一页头 */ /* .tx-header.tx-float .tx-head-top .en { filter: invert(1) brightness(.25); } */
/* DISABLED-2026-10-19-统一页头 */ /* .tx-header.tx-float .tx-head-top .search { filter: invert(1) brightness(.25); } */
/* DISABLED-2026-10-19-统一页头 */ /* .tx-header.tx-float .tx-head-nav .menu > li > a { color: #2b3448; } */
/* DISABLED-2026-10-19-统一页头 */ /* .tx-header.tx-float .tx-head-nav .menu > li > a:hover, */
/* DISABLED-2026-10-19-统一页头 */ /* .tx-header.tx-float .tx-head-nav .menu > li.current-menu-item > a { color: #1a6dff; } */
/* DISABLED-2026-10-19-统一页头 */ /* .tx-header.tx-float .tx-head-nav > i { color: #2b3448; } */
/* DISABLED-2026-10-19-统一页头 */ /* /* ============================================================ */
/* DISABLED-2026-10-19-统一页头 */ /*    页头换肤补丁（2026-10-19）：主题原本为黑底头部设计， */
/* DISABLED-2026-10-19-统一页头 */ /*    换白底后 h3 黑底块 / 简繁按钮 / 英文按钮成为视觉噪点。 */
/* DISABLED-2026-10-19-统一页头 */ /*    仅作用在 studio 页的 .tx-header.tx-float 上。 */
/* DISABLED-2026-10-19-统一页头 */ /*    ============================================================ */ */
/* DISABLED-2026-10-19-统一页头 */ /* .tx-header.tx-float .tx-head-top h3 { */
/* DISABLED-2026-10-19-统一页头 */ /*   background: none; */
/* DISABLED-2026-10-19-统一页头 */ /*   padding: 0; */
/* DISABLED-2026-10-19-统一页头 */ /*   height: auto; */
/* DISABLED-2026-10-19-统一页头 */ /*   line-height: 30px; */
/* DISABLED-2026-10-19-统一页头 */ /* } */
/* DISABLED-2026-10-19-统一页头 */ /* .tx-header.tx-float .tx-head-top h3, */
/* DISABLED-2026-10-19-统一页头 */ /* .tx-header.tx-float .tx-head-top h3 span { color: #2b3448; } */
/* DISABLED-2026-10-19-统一页头 */ /* /* 号码图在新底色上反色发灰，改用可读纯文字 */ */
/* DISABLED-2026-10-19-统一页头 */ /* .tx-header.tx-float .tx-head-top h3 span { display: none; } */
/* DISABLED-2026-10-19-统一页头 */ /* .tx-header.tx-float .tx-head-top h3::after { */
/* DISABLED-2026-10-19-统一页头 */ /*   content: "0755-8253-8016"; */
/* DISABLED-2026-10-19-统一页头 */ /*   font-size: 20px; */
/* DISABLED-2026-10-19-统一页头 */ /*   font-weight: 600; */
/* DISABLED-2026-10-19-统一页头 */ /*   letter-spacing: .5px; */
/* DISABLED-2026-10-19-统一页头 */ /*   color: #2b3448; */
/* DISABLED-2026-10-19-统一页头 */ /*   vertical-align: middle; */
/* DISABLED-2026-10-19-统一页头 */ /* } */
/* DISABLED-2026-10-19-统一页头 */ /* /* 简繁切换 / 英文按钮：自助建站页用不到，隐藏以免误点 */ */
/* DISABLED-2026-10-19-统一页头 */ /* .tx-header.tx-float .tx-head-top #StranLink, */
/* DISABLED-2026-10-19-统一页头 */ /* .tx-header.tx-float .tx-head-top .en { display: none; } */
/* DISABLED-2026-10-19-统一页头 */ /* /* 主题 h4 左侧为图标留了 46px 内边距，白底下空出一块 */ */
/* DISABLED-2026-10-19-统一页头 */ /* .tx-header.tx-float .tx-head-top h4 { padding-left: 0; } */