/* ============================================================
   只读演示模式的样式（2026-10-25 加）
   ------------------------------------------------------------
   只在 /demo 下加载（由服务端注入），正式页面完全不受影响。
   配色沿用站内变量（--accent #E8547C 等），不另造一套。

   ⚠️ 媒体查询必须写在基础规则**之后**。
      这个项目因为这个踩过三次：同权重下后定义者胜，
      媒体查询写在前面会**静默失效**（不报错，只是没生效）。
   ============================================================ */

body.is-demo {
  /* 顶栏是 position:sticky top:0，横幅插在它上面会被盖住。
     把 sticky 的锚点下移，正好让出横幅高度。
     ⚠️ 不要改成给 body 加 padding-top：sticky 元素不参与父级 padding
        计算，滚动时会在横幅下沿露出缝隙。 */
  --demo-bar-h: 0px;
}

body.is-demo .topbar {
  top: var(--demo-bar-h);
}

/* ---------- 演示横幅 ---------- */
.demo-bar {
  position: relative;
  z-index: 60;
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 9px 20px;
  background: linear-gradient(90deg, #FDF0F4 0%, #FFF7F9 100%);
  border-bottom: 1px solid var(--accent-line);
  font-size: 12.5px;
  color: var(--ink-2);
  line-height: 1.45;
}

.demo-tag {
  flex: none;
  padding: 2px 8px;
  border-radius: 5px;
  background: var(--accent);
  color: #FFF;
  font-size: 11px;
  font-weight: 700;
  letter-spacing: .04em;
}

.demo-txt {
  flex: 1 1 auto;
  min-width: 0;
}

.demo-txt b {
  color: var(--accent-deep);
  font-weight: 600;
}

.demo-cta {
  flex: none;
  padding: 4px 11px;
  border-radius: 6px;
  border: 1px solid var(--accent-line);
  background: #FFF;
  color: var(--accent-deep);
  font-size: 12px;
  font-weight: 600;
  text-decoration: none;
  white-space: nowrap;
  transition: background .15s, border-color .15s;
}

.demo-cta:hover {
  background: var(--accent);
  border-color: var(--accent);
  color: #FFF;
}

/* ---------- 「识别示例报价单」按钮 ---------- */
.demo-ocr-btn {
  flex: none;
  margin-left: 4px;
  padding: 9px 16px;
  border-radius: 8px;
  background: var(--accent);
  color: #FFF;
  font-size: 13px;
  font-weight: 600;
  white-space: nowrap;
  box-shadow: 0 2px 8px rgba(232, 84, 124, .22);
  transition: transform .14s, box-shadow .14s, background .14s;
}

.demo-ocr-btn:hover {
  background: var(--accent-deep);
  transform: translateY(-1px);
  box-shadow: 0 4px 12px rgba(232, 84, 124, .28);
}

.demo-ocr-btn:active {
  transform: translateY(0);
  box-shadow: 0 1px 4px rgba(232, 84, 124, .2);
}

/* ============================================================
   窄屏：横幅改为两行，按钮独占一行
   ------------------------------------------------------------
   ⚠️ 媒体查询在基础规则之后（见文件头注释）。
   ============================================================ */
@media (max-width: 760px) {
  .demo-bar {
    flex-wrap: wrap;
    gap: 6px 8px;
    padding: 8px 14px;
    font-size: 12px;
  }

  .demo-tag {
    order: 1;
  }

  .demo-cta {
    order: 2;
    margin-left: auto;
    padding: 3px 9px;
    font-size: 11.5px;
  }

  /* 两个 CTA（怎么用 / 注册）并排时，auto 外边距只留给第一个，
     第二个用固定间距 —— 否则两个 auto 会把空隙挤到链接中间，看着散。 */
  .demo-cta + .demo-cta {
    margin-left: 6px;
  }

  /* 说明文字独占第二行 —— 窄屏下一行塞不下，硬挤会让字被截断 */
  .demo-txt {
    order: 3;
    flex-basis: 100%;
    font-size: 11.5px;
    color: var(--ink-3);
  }

  .demo-ocr-btn {
    order: 0;
    width: 100%;
    margin: 0;
    padding: 10px 14px;
    font-size: 13px;
  }

  /* ⚠️ 关键分界（2026-10-25 实测）：上传条要 ≤480px 才转竖排，
     在 481~760 这一档它**仍是横排**。此时按钮写 width:100% 会按
     上传条的剩余宽度去撑，把整页顶出 164px 横向滚动（实测 600 宽）。
     横排档位改成「不指定宽度、按内容自适应」，竖排档位才吃满一行。 */
  .upload-bar .demo-ocr-btn {
    width: auto;
    flex: 0 0 auto;
    margin-top: 0;
  }
}

/* 上传条转竖排的档位：按钮独占一行（与 style.css 的 480 断点对齐） */
@media (max-width: 480px) {
  .upload-bar .demo-ocr-btn {
    width: 100%;
    flex: 0 0 auto;
  }
}

@media (max-width: 420px) {
  .demo-bar {
    padding: 7px 12px;
  }

  .demo-cta {
    font-size: 11px;
    padding: 3px 8px;
  }
}