/* 营销活动平台 · 方案原型线框风共享样式 */
* { box-sizing: border-box; margin: 0; padding: 0; }
body {
  font-family: "PingFang SC", "Noto Sans SC", system-ui, sans-serif;
  background: #f2f1ec;
  color: #1a1a1a;
  padding: 28px 20px 60px;
}
.scheme-head { max-width: 1280px; margin: 0 auto 18px; }
.scheme-head .kicker { font-size: 12px; letter-spacing: 2px; color: #8b8674; font-family: ui-monospace, monospace; }
.scheme-head h1 { font-size: 24px; margin: 4px 0 6px; }
.scheme-head p { font-size: 14px; color: #55503f; }
.scheme-head .star { color: #b45309; font-weight: 700; }

.frame {
  background: #fff; border: 2px solid #1a1a1a; border-radius: 12px;
  max-width: 1280px; margin: 0 auto 40px; overflow: hidden;
  box-shadow: 8px 8px 0 rgba(26, 26, 26, .10);
}
.frame + .scheme-head { margin-top: 48px; }

/* 顶部栏 */
.topbar {
  display: flex; align-items: center; gap: 14px;
  padding: 10px 16px; border-bottom: 2px solid #1a1a1a; background: #fafaf7;
}
.logo { font-weight: 800; font-size: 14px; white-space: nowrap; }
.logo small { font-weight: 400; color: #8b8674; margin-left: 6px; }
.spacer { flex: 1; }
.btn {
  border: 1.5px solid #1a1a1a; background: #fff; padding: 6px 12px;
  border-radius: 6px; font-size: 13px; white-space: nowrap;
  text-decoration: none; color: #1a1a1a; display: inline-block;
}
.btn.back { border-color: #1a1a1a; font-weight: 700; }
.btn.ghost { border-color: #c8c4b4; color: #55503f; }
.btn.dark { background: #1a1a1a; color: #fff; }
.btn.deploy { background: #f6821f; border-color: #c2620e; color: #fff; font-weight: 700; }

/* 模式 Tab / 开关 */
.tabs { display: flex; border: 1.5px solid #1a1a1a; border-radius: 8px; overflow: hidden; }
.tabs span { padding: 6px 18px; font-size: 13px; background: #fff; }
.tabs span.on { background: #1a1a1a; color: #fff; font-weight: 700; }
.switch { display: flex; align-items: center; gap: 8px; font-size: 13px; }
.switch .track {
  width: 40px; height: 20px; border: 1.5px solid #1a1a1a; border-radius: 999px;
  position: relative; background: #fff;
}
.switch .track i { position: absolute; top: 1px; left: 2px; width: 14px; height: 14px; border-radius: 50%; background: #1a1a1a; }
.switch.on .track { background: #2563eb; border-color: #1d4ed8; }
.switch.on .track i { left: auto; right: 2px; background: #fff; }

/* 主舞台 */
.stage { display: flex; min-height: 540px; }
.preview {
  flex: 1.25; border-right: 2px dashed #b9b5a7; padding: 22px 20px 26px;
  background: #efeee8; position: relative;
}
.preview .pane-label, .workspace .pane-label {
  font-family: ui-monospace, monospace; font-size: 11px; letter-spacing: 1.5px;
  color: #8b8674; margin-bottom: 12px; text-transform: uppercase;
}
.workspace { flex: 1; padding: 16px; background: #fff; display: flex; flex-direction: column; gap: 12px; position: relative; }

/* 手机预览框 */
.phone {
  width: 290px; margin: 0 auto; background: #fff; border: 2px solid #1a1a1a;
  border-radius: 20px; overflow: hidden;
}
.phone .ph-bar { height: 18px; background: #1a1a1a; }
.page-blk { position: relative; border-bottom: 1px solid #e3e0d4; }
.page-blk.sel { outline: 3px solid #2563eb; outline-offset: -3px; }
.page-blk .blk-tag {
  position: absolute; top: 4px; left: 4px; background: #2563eb; color: #fff;
  font-size: 10px; padding: 1px 6px; border-radius: 3px; z-index: 2;
}
.ph {
  background: repeating-linear-gradient(45deg, #e8e6dd, #e8e6dd 6px, #f4f2eb 6px, #f4f2eb 12px);
  display: flex; align-items: center; justify-content: center;
  color: #8b8674; font-size: 12px; text-align: center;
}
.strip { display: flex; align-items: center; justify-content: center; font-size: 11px; padding: 6px; }
.strip.count { background: #1a1a1a; color: #fff; letter-spacing: 1px; }
.strip.coupon { background: #fde68a; border-top: 1px dashed #b45309; color: #92400e; }
.cards { display: flex; gap: 6px; padding: 8px; }
.cards .ph { flex: 1; height: 74px; flex-direction: column; gap: 3px; font-size: 10px; }
.price { color: #b45309; font-weight: 700; font-size: 11px; }

/* 工作区面板 */
.panel { border: 1.5px solid #1a1a1a; border-radius: 8px; background: #fff; overflow: hidden; }
.panel > h4 {
  font-size: 12px; padding: 7px 10px; border-bottom: 1px solid #d8d4c6;
  background: #fafaf7; display: flex; align-items: center; gap: 8px; font-weight: 700;
}
.panel > h4 .hint { font-weight: 400; color: #8b8674; font-size: 11px; margin-left: auto; }
.panel .body { padding: 10px; }
.panel.dim { opacity: .35; filter: grayscale(1); position: relative; }
.panel.dim::after {
  content: "白板模式下隐藏"; position: absolute; inset: 0; display: flex;
  align-items: center; justify-content: center; font-size: 12px; color: #1a1a1a;
  opacity: 1;
}

/* 组件库 */
.comp-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 8px; }
.comp {
  border: 1.5px solid #c8c4b4; border-radius: 6px; padding: 8px 4px;
  text-align: center; font-size: 11px; background: #fffdf5;
}
.comp i { display: block; font-size: 16px; font-style: normal; margin-bottom: 3px; }
.comp.beta { border-style: dashed; color: #8b8674; }

/* 表单 */
.form-row { display: flex; align-items: center; gap: 8px; font-size: 12px; margin-bottom: 8px; }
.form-row label { width: 64px; color: #55503f; text-align: right; flex: none; }
.input {
  flex: 1; border: 1.5px solid #c8c4b4; border-radius: 5px; padding: 5px 8px;
  font-size: 12px; color: #1a1a1a; background: #fff; min-width: 0;
}
.input.placeholder { color: #a8a392; }
.chips { display: flex; gap: 6px; flex-wrap: wrap; flex: 1; }
.chip { border: 1.5px solid #1a1a1a; border-radius: 999px; padding: 2px 10px; font-size: 11px; background: #fff; }
.chip.on { background: #1a1a1a; color: #fff; }
.chip.add { border-style: dashed; color: #8b8674; }

/* 对话 */
.chat { display: flex; flex-direction: column; gap: 8px; }
.msg { max-width: 88%; border: 1.5px solid #1a1a1a; border-radius: 10px; padding: 8px 10px; font-size: 12px; line-height: 1.6; background: #fff; }
.msg.user { align-self: flex-end; background: #1a1a1a; color: #fff; border-bottom-right-radius: 2px; }
.msg.ai { align-self: flex-start; background: #fffdf5; border-bottom-left-radius: 2px; }
.msg .who { font-size: 10px; opacity: .6; display: block; margin-bottom: 2px; }
.toolcalls { display: flex; flex-direction: column; gap: 4px; margin-top: 6px; }
.toolcall {
  font-family: ui-monospace, monospace; font-size: 11px; border: 1px dashed #2563eb;
  color: #1d4ed8; background: #eff6ff; border-radius: 5px; padding: 3px 8px;
}
.quick { display: flex; gap: 6px; flex-wrap: wrap; }
.quick .chip { border-color: #2563eb; color: #1d4ed8; background: #eff6ff; }
.prompt-box {
  border: 2px solid #1a1a1a; border-radius: 10px; padding: 9px 12px; font-size: 13px;
  color: #a8a392; display: flex; align-items: center; gap: 8px; background: #fff;
}
.prompt-box .send { margin-left: auto; background: #1a1a1a; color: #fff; border-radius: 6px; padding: 3px 12px; font-size: 12px; }

/* 标注 */
.note-tag {
  position: absolute; display: flex; align-items: center; gap: 6px;
  background: #2563eb; color: #fff; font-size: 11px; padding: 3px 9px;
  border-radius: 999px; box-shadow: 2px 2px 0 rgba(26,26,26,.18); z-index: 5; white-space: nowrap;
}
.note-tag .n {
  width: 15px; height: 15px; border-radius: 50%; background: #fff; color: #1d4ed8;
  display: inline-flex; align-items: center; justify-content: center; font-size: 10px; font-weight: 700;
}

/* 底部图例 */
.legend {
  border-top: 2px solid #1a1a1a; background: #fffdf5; padding: 14px 20px;
  display: grid; grid-template-columns: 1fr 1fr; gap: 8px 24px; font-size: 13px;
}
.legend div { display: flex; gap: 8px; align-items: baseline; }
.legend .n {
  flex: none; width: 17px; height: 17px; border-radius: 50%; background: #2563eb; color: #fff;
  display: inline-flex; align-items: center; justify-content: center; font-size: 11px; font-weight: 700;
  transform: translateY(2px);
}

/* 部署成功浮层（静态示意） */
.deploy-pop {
  position: absolute; right: 18px; bottom: 18px; width: 280px;
  border: 2px solid #1a1a1a; border-radius: 10px; background: #fff;
  box-shadow: 6px 6px 0 rgba(26,26,26,.15); z-index: 6; font-size: 12px;
}
.deploy-pop h5 { padding: 8px 12px; border-bottom: 1px solid #d8d4c6; background: #ecfdf5; color: #065f46; font-size: 12px; }
.deploy-pop .body { padding: 10px 12px; display: flex; flex-direction: column; gap: 6px; }
.deploy-pop .url {
  font-family: ui-monospace, monospace; font-size: 11px; border: 1px solid #c8c4b4;
  border-radius: 5px; padding: 4px 8px; background: #fafaf7; color: #1d4ed8;
}
.deploy-pop .row { display: flex; gap: 6px; }
.deploy-pop .row .btn { font-size: 11px; padding: 4px 8px; flex: 1; text-align: center; }

.arrow-divider { text-align: center; font-size: 22px; color: #8b8674; margin: -22px 0 18px; }