/* 微沙盘编辑器 · 第一页（全景鸟瞰）
 * ------------------------------------------------------------------
 * 布局：顶栏 / 左侧表单 / 右侧手机预览
 *
 * 【重要】预览里的手机是「真机尺寸」—— 宽 375、高 812 的布局，
 *   再用 transform: scale(k) 放大到能占满的高度。
 *   这样预览里看到的字号/间距/标签大小 = 客户手机上一模一样，
 *   而不是"看起来差不多"。热点标签的样式全部照抄原案例 krpano 的定义：
 *     krpano2.xml →
 *       wbkp_hotspotstyle_group        （左上角分类胶囊）
 *       wbkp_hotspotstyle_label_text   （标注文字胶囊）
 *       wbkp_hotspotstyle_label_line   （标注引线）
 *   三者的共同点：黑色半透明胶囊 + 白字 + 圆角 12 + 底边 1px 主题色。
 * ------------------------------------------------------------------
 */

* { box-sizing: border-box; margin: 0; padding: 0; }

:root {
  --bg: #f2f4f8;
  --card: #fff;
  --ink: #1a1c21;
  --ink-2: #5b6273;
  --ink-3: #939aab;
  --line: #e3e7ee;
  --line-2: #d3d9e4;
  --brand: #3b6ef5;
  --brand-soft: #eaf0ff;
  --radius: 10px;
  --gold: #c39c7c;
  /* 真机尺寸 —— 预览里所有像素都按它算，改这两个值等于换机型 */
  --dw: 375px;
  --dh: 812px;
}

html, body { height: 100%; }
body {
  font: 400 13px/1.6 "PingFang SC", "Microsoft YaHei", system-ui, sans-serif;
  color: var(--ink);
  background: var(--bg);
  display: flex; flex-direction: column;
  overflow: hidden;
}

/* ---------------- 顶栏 ---------------- */
.topbar {
  height: 52px; flex-shrink: 0;
  display: flex; align-items: center; justify-content: space-between;
  padding: 0 18px;
  background: #fff;
  border-bottom: 1px solid var(--line);
}
.tb-l { display: flex; align-items: center; gap: 10px; }
.tb-dot { width: 7px; height: 7px; border-radius: 50%; background: var(--brand); }
.tb-l b { font-size: 15px; font-weight: 500; }
.tb-sub { font-size: 12px; color: var(--ink-3); }
.tb-r { display: flex; align-items: center; gap: 8px; }
.tb-save { font-size: 12px; color: var(--ink-3); margin-right: 4px; }
.tb-save.dirty { color: #d97706; }

button {
  font: inherit; font-size: 13px;
  padding: 6px 14px; border-radius: 8px;
  border: 1px solid var(--line-2); background: #fff; color: var(--ink);
  cursor: pointer; transition: background .12s, border-color .12s;
}
button:hover { background: #f7f9fc; }
button.primary { background: var(--brand); border-color: var(--brand); color: #fff; }
button.primary:hover { background: #2f5fd8; }
button.sm { padding: 4px 10px; font-size: 12px; }
button.tiny { padding: 2px 9px; font-size: 11.5px; border-radius: 999px; }
button:disabled { opacity: .45; cursor: not-allowed; }
button.danger { color: #d64545; border-color: #f0d5d5; }
button.danger:hover { background: #fdf3f3; }

/* ---------------- 主区 ---------------- */
.work { flex: 1; display: flex; min-height: 0; }

/* ---------------- 左侧表单 ---------------- */
.col-form {
  width: 432px; flex-shrink: 0;
  overflow-y: auto;
  padding: 14px;
  display: flex; flex-direction: column; gap: 12px;
  border-right: 1px solid var(--line);
}
.col-form::-webkit-scrollbar { width: 8px; }
.col-form::-webkit-scrollbar-thumb { background: #d7dbe6; border-radius: 4px; }

.card {
  background: var(--card); border-radius: var(--radius);
  border: 1px solid var(--line);
  padding: 13px 15px;
}
.card > h3 {
  font-size: 13.5px; font-weight: 500;
  display: flex; align-items: center; justify-content: space-between;
  margin-bottom: 4px;
}
.card > .desc { font-size: 11.5px; color: var(--ink-3); margin-bottom: 11px; line-height: 1.65; }
.card .num {
  font-size: 11px; color: var(--ink-3); font-weight: 400;
  background: #f2f4f8; border-radius: 999px; padding: 1px 8px;
}
.card .desc b { font-weight: 400; color: var(--ink-2); }

/* 表单行 */
.f { display: flex; align-items: center; gap: 10px; margin-bottom: 9px; }
.f:last-child { margin-bottom: 0; }
.f > label { width: 62px; flex-shrink: 0; font-size: 12px; color: var(--ink-2); }
input[type=text], input[type=tel], input[type=number], textarea, select {
  flex: 1; min-width: 0;
  font: inherit; font-size: 13px;
  padding: 6px 10px; border-radius: 7px;
  border: 1px solid var(--line-2); background: #fff; color: var(--ink);
  outline: none;
}
input:focus, textarea:focus, select:focus { border-color: var(--brand); box-shadow: 0 0 0 3px var(--brand-soft); }
textarea { resize: vertical; line-height: 1.7; font-family: ui-monospace, Consolas, monospace; font-size: 12px; }
input[type=number] { -moz-appearance: textfield; }
input[type=number]::-webkit-outer-spin-button,
input[type=number]::-webkit-inner-spin-button { -webkit-appearance: none; margin: 0; }

/* 列表项 */
.row { display: flex; align-items: center; gap: 8px; padding: 4px 6px; border-radius: 7px; }
.row:hover { background: #f7f9fc; }
.row .idx {
  width: 18px; flex-shrink: 0; text-align: center;
  font-size: 11px; color: var(--ink-3); font-variant-numeric: tabular-nums;
}
.row .x {
  width: 22px; height: 22px; flex-shrink: 0;
  display: flex; align-items: center; justify-content: center;
  border-radius: 5px; color: var(--ink-3); cursor: pointer; font-size: 13px;
}
.row .x:hover { background: #fdf0f0; color: #d64545; }
.row.sel { background: var(--brand-soft); }
.row .cnt { font-size: 11px; color: var(--ink-3); flex-shrink: 0; }

/* 颜色选择器（分类主题色） */
.swatch {
  width: 26px; height: 26px; flex-shrink: 0;
  border-radius: 7px; border: 1px solid rgba(0, 0, 0, .12);
  padding: 0; overflow: hidden; cursor: pointer; background: #fff;
}
.swatch::-webkit-color-swatch-wrapper { padding: 2px; }
.swatch::-webkit-color-swatch { border: none; border-radius: 5px; }

.hot-list { max-height: 230px; overflow-y: auto; margin: 0 -6px; padding: 0 6px; }
.hot-list::-webkit-scrollbar { width: 6px; }
.hot-list::-webkit-scrollbar-thumb { background: #dfe3ec; border-radius: 3px; }

.tabs { display: flex; flex-wrap: wrap; gap: 5px; margin-bottom: 9px; }
.tab {
  font-size: 11.5px; padding: 3px 9px; border-radius: 999px;
  border: 1px solid var(--line-2); background: #fff; cursor: pointer;
  display: flex; align-items: center; gap: 5px; color: var(--ink-2);
}
.tab:hover { background: #f7f9fc; }
.tab.on { border-color: var(--brand); background: var(--brand-soft); color: var(--brand); }
.tab i { width: 8px; height: 8px; border-radius: 2px; font-style: normal; }

/* 单条添加 + 批量导入（就在分类下面） */
.add-row { display: flex; gap: 6px; margin-bottom: 8px; }
.add-row input { flex: 1; }
.empty { font-size: 12px; color: var(--ink-3); padding: 8px 2px; }
.tips { font-size: 11.5px; color: var(--ink-3); line-height: 1.7; margin-top: 9px; }
.tips b { color: var(--ink-2); font-weight: 400; }

/* 选中标注的属性条 */
.prop {
  background: #f7f9fc; border: 1px solid var(--line);
  border-radius: 8px; padding: 9px 10px; margin-bottom: 9px;
}
.prop .pt { font-size: 11.5px; color: var(--ink-2); margin-bottom: 7px; }
.prop .pt b { color: var(--ink); font-weight: 500; }

/* 全景图卡片的缩略图 */
.pano-thumb {
  width: 100%; height: 92px; border-radius: 8px;
  background: #0b0c0f center/cover no-repeat;
  border: 1px solid var(--line-2);
  cursor: zoom-in; position: relative; overflow: hidden;
}
.pano-thumb .zoom {
  position: absolute; right: 6px; bottom: 6px;
  background: rgba(0, 0, 0, .55); color: #fff;
  font-size: 11px; padding: 2px 8px; border-radius: 999px;
}
.pano-meta { font-size: 11.5px; color: var(--ink-3); margin-top: 7px; line-height: 1.7; }
.pano-meta .ok { color: #1a7f4b; }
.pano-meta .bad { color: #c0392b; }

/* 图标上传 */
.icon-pair { display: flex; gap: 5px; flex-shrink: 0; }
.icon-slot {
  width: 34px; height: 34px; border-radius: 7px;
  border: 1px solid var(--line-2); background: #f7f9fc;
  display: flex; align-items: center; justify-content: center;
  cursor: pointer; overflow: hidden; position: relative;
}
.icon-slot img { width: 24px; height: 24px; object-fit: contain; }
.icon-slot:hover { border-color: var(--brand); }
.icon-slot i {
  position: absolute; bottom: 0; right: 1px; font-style: normal;
  font-size: 8px; color: var(--ink-3); background: rgba(255, 255, 255, .8);
  border-radius: 3px 0 0 0; padding: 0 2px;
}

/* 图标库选择弹窗 */
.icon-grid {
  display: grid; grid-template-columns: repeat(9, 1fr); gap: 6px;
  max-height: 300px; overflow-y: auto; padding: 2px;
}
.icon-cell {
  display: flex; flex-direction: column; align-items: center; gap: 3px;
  padding: 6px 2px 4px; border-radius: 8px; border: 1px solid transparent;
  cursor: pointer; background: #f7f9fc;
}
.icon-cell:hover { border-color: var(--brand); background: var(--brand-soft); }
.icon-cell.on { border-color: var(--brand); background: var(--brand-soft); }
.icon-cell img { width: 26px; height: 26px; object-fit: contain; }
.icon-cell span { font-size: 10px; color: var(--ink-2); white-space: nowrap; }

/* ---------------- 右侧预览 ---------------- */
.col-preview {
  flex: 1; min-width: 0;
  display: flex; flex-direction: column;
  align-items: center; justify-content: center;
  gap: 10px; padding: 12px;
  background: #eef1f6;
  overflow: hidden;
}
/* 手机外壳：固定 375×812 的「真机布局」，整体 scale 放大 */
.phone-wrap { position: relative; }
.phone {
  width: var(--dw); height: var(--dh);
  transform-origin: top left;
  background: #0b0c0f;
  border-radius: 24px;
  overflow: hidden;
  display: flex; flex-direction: column;
  box-shadow: 0 10px 40px rgba(20, 26, 45, .18), 0 0 0 1px rgba(20, 26, 45, .1);
}

/* 全屏放大模式：把表单收起来，手机独占整屏 */
body.zoom-mode .col-form { display: none; }
body.zoom-mode .ph-hint { position: fixed; right: 14px; bottom: 12px; z-index: 50;
  background: rgba(255, 255, 255, .94); border-radius: 999px; padding: 4px 12px;
  box-shadow: 0 4px 16px rgba(20, 26, 45, .16); }

/* ---------- 手机壳内部元素（品牌栏 / 分类胶囊 / 标注 / 底部菜单）的样式 ----------
 * 已全部移到 pano-view.css —— 手机扫码打开的真机页要引同一份，两边才不会漂。
 * 注意：那份 CSS 在本文件之后加载，这里不要再写一遍同名规则，否则会覆盖它。 */


.fov-bar {
  display: flex; align-items: center; gap: 9px;
  font-size: 11.5px; color: var(--ink-2);
  background: #fff; border: 1px solid var(--line);
  border-radius: 999px; padding: 3px 12px;
}
.fov-bar input[type=range] { width: 150px; accent-color: var(--brand); }
.fov-bar b { font-weight: 500; color: var(--ink); width: 34px; text-align: right;
  font-variant-numeric: tabular-nums; }

.ph-hint {
  display: flex; gap: 12px; flex-wrap: wrap; justify-content: center; align-items: center;
  font-size: 11.5px; color: var(--ink-3);
}
.ph-hint span::before { content: "· "; }

/* ---------------- 右键菜单 ---------------- */
.ctx {
  position: fixed; z-index: 999; display: none;
  background: #fff; border: 1px solid var(--line-2);
  border-radius: 8px; padding: 4px;
  box-shadow: 0 6px 24px rgba(20, 26, 45, .16);
  min-width: 150px;
}
.ctx.on { display: block; }
.ctx div {
  padding: 6px 10px; border-radius: 6px; font-size: 12.5px; cursor: pointer;
  display: flex; align-items: center; justify-content: space-between; gap: 14px;
}
.ctx div:hover { background: #f2f5fb; }
.ctx div.danger { color: #d64545; }
.ctx div.danger:hover { background: #fdf3f3; }
.ctx div em { font-style: normal; font-size: 11px; color: var(--ink-3); }

/* ---------------- 弹窗 ---------------- */
.mask {
  position: fixed; inset: 0; z-index: 1000; display: none;
  background: rgba(18, 22, 33, .38);
  align-items: center; justify-content: center;
}
.mask.on { display: flex; }
.dlg {
  width: 540px; max-width: calc(100vw - 40px);
  max-height: calc(100vh - 60px); overflow-y: auto;
  background: #fff; border-radius: 14px;
  padding: 20px 22px;
  box-shadow: 0 20px 60px rgba(20, 26, 45, .25);
}
.dlg h4 { font-size: 15px; font-weight: 500; margin-bottom: 6px; }
.dlg h4 + p, .dlg > p { font-size: 12px; color: var(--ink-3); margin-bottom: 12px; line-height: 1.7; }
.dlg textarea { width: 100%; height: 170px; }
.dlg .acts { display: flex; align-items: center; justify-content: flex-end; gap: 8px; margin-top: 14px; }
.dlg code {
  background: #f2f4f8; padding: 1px 5px; border-radius: 4px;
  font-family: ui-monospace, monospace; font-size: 11.5px;
}
.dlg .sub-h { font-size: 12.5px; color: var(--ink-2); margin: 14px 0 8px; font-weight: 500; }

/* 素材要求弹窗 */
.spec { width: 100%; border-collapse: collapse; font-size: 12.5px; margin-bottom: 4px; }
.spec th { text-align: left; padding: 6px 8px; color: var(--ink-3); font-weight: 400; font-size: 11.5px; border-bottom: 1px solid var(--line); }
.spec td { padding: 8px; border-bottom: 1px solid #f0f3f8; vertical-align: top; }
.spec td b { font-weight: 500; }
.spec .must { font-size: 10.5px; background: #fdeaea; color: #c0392b; padding: 1px 7px; border-radius: 99px; margin-left: 4px; }
.spec .opt { font-size: 10.5px; background: #eef2f8; color: #6b7488; padding: 1px 7px; border-radius: 99px; margin-left: 4px; }
.dlg .note {
  background: #fffbf0; border-left: 3px solid #e0b055;
  padding: 9px 13px; border-radius: 0 8px 8px 0;
  font-size: 12.5px; color: #5f5540; line-height: 1.75; margin-top: 12px;
}
.dlg a.btn {
  display: inline-flex; align-items: center;
  font-size: 13px; padding: 6px 14px; border-radius: 8px;
  border: 1px solid var(--line-2); background: #fff; color: var(--ink);
  text-decoration: none;
}
.dlg a.btn.primary { background: var(--brand); border-color: var(--brand); color: #fff; }
.dlg a.btn.primary:hover { background: #2f5fd8; }

/* 大图预览 */
.bigview { background: #0b0c0f; border-radius: 10px; overflow: hidden; text-align: center; }
.bigview img { display: block; width: 100%; height: auto; }

/* ---------------- 手机预览弹窗 ---------------- */
.ph-qr {
  width: 240px; height: 240px; margin: 14px auto 10px;
  display: flex; align-items: center; justify-content: center;
  background: #fff; border: 1px solid var(--line); border-radius: 10px;
  overflow: hidden;
}
.ph-qr canvas { display: block; width: 224px; height: 224px; }
.ph-url {
  font-size: 11.5px; color: var(--ink-3); line-height: 1.5;
  word-break: break-all; padding: 0 16px;
}
.ph-state { margin: 10px 0 12px; font-size: 12px; color: var(--ink-2); }
.ph-state .ok { color: #1a9e57; font-weight: 500; }