/* =========================================================
   演示站专属样式（独立文件，同步主站时不会被覆盖）
   ========================================================= */

/* ---------- 顶部提示条 ---------- */
.demo-bar {
  position: fixed;
  z-index: 95;
  top: var(--nav-h, 62px);
  left: 0;
  right: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  flex-wrap: wrap;
  padding: 7px 44px 7px 14px;
  background: linear-gradient(180deg, #fff6e4, #fdeed4);
  border-bottom: 1px solid color-mix(in srgb, var(--gold) 35%, transparent);
  box-shadow: 0 6px 16px -12px rgba(120, 90, 50, .5);
  font-size: .78rem;
  letter-spacing: .04em;
  color: #7a5a34;
}

.demo-dot {
  width: 7px;
  height: 7px;
  border-radius: 50%;
  background: #e0a93f;
  flex: 0 0 auto;
  box-shadow: 0 0 0 3px color-mix(in srgb, #e0a93f 22%, transparent);
}

.demo-text b { color: #b4761f; }

.demo-cta {
  font: inherit;
  font-size: .76rem;
  letter-spacing: .04em;
  color: #fff9ef;
  background: #c98a2e;
  border: 0;
  border-radius: 99px;
  padding: 5px 13px;
  cursor: pointer;
  transition: .2s var(--ease);
}
.demo-cta:hover { background: #b4761f; transform: translateY(-1px); }

.demo-close {
  position: absolute;
  right: 8px;
  top: 50%;
  transform: translateY(-50%);
  width: 26px;
  height: 26px;
  border: 0;
  border-radius: 50%;
  background: transparent;
  color: #9a7a4a;
  cursor: pointer;
  font-size: .8rem;
  line-height: 1;
}
.demo-close:hover { background: rgba(200, 150, 80, .16); }

/* 提示条占位：避免挡住首屏内容 */
body.has-demo-bar { padding-top: var(--demo-bar-h, 0px); }

/* ---------- 底部介绍卡片 ---------- */
.demo-block { margin-top: clamp(30px, 6vw, 60px); }

.demo-card {
  max-width: 640px;
  margin: 0 auto;
  padding: clamp(24px, 4vw, 40px);
  background: var(--card);
  border: 1px dashed color-mix(in srgb, var(--gold) 45%, var(--line));
  border-radius: 20px;
  text-align: center;
  box-shadow: var(--shadow-sm);
}

.demo-kicker {
  margin: 0 0 8px;
  font-size: .72rem;
  letter-spacing: .2em;
  text-transform: uppercase;
  color: #b4761f;
}

.demo-title {
  margin: 0 0 12px;
  font-family: var(--font-hand);
  font-weight: 400;
  font-size: clamp(1.4rem, 3vw, 1.9rem);
  color: var(--ink);
}

.demo-desc {
  margin: 0 auto 16px;
  max-width: 26em;
  font-size: .92rem;
  line-height: 1.9;
  color: var(--ink-soft);
}

.demo-list {
  list-style: none;
  margin: 0 auto 20px;
  padding: 0;
  display: grid;
  gap: 7px;
  max-width: 22em;
  text-align: left;
}

.demo-list li {
  position: relative;
  padding-left: 20px;
  font-size: .86rem;
  line-height: 1.7;
  color: var(--ink-soft);
}
.demo-list li::before {
  content: "✓";
  position: absolute;
  left: 0;
  top: 0;
  color: var(--rose);
  font-weight: 700;
}

.demo-btn { font-size: .92rem; padding: 10px 26px; }

.demo-note {
  margin: 14px 0 0;
  font-size: .74rem;
  line-height: 1.7;
  color: var(--ink-faint);
}

/* ---------- 手机端 ---------- */
@media (max-width: 560px) {
  .demo-bar {
    flex-direction: column;
    align-items: center;
    gap: 4px;
    text-align: center;
    font-size: .72rem;
    line-height: 1.55;
    padding: 8px 38px 10px 12px;
  }
  .demo-text {
    display: block;
    white-space: normal;
    word-break: break-word;
    max-width: 100%;
  }
  .demo-dot { display: none; }
  .demo-cta { min-height: 32px; padding: 5px 14px; }
  .demo-close { width: 34px; height: 34px; top: 8px; transform: none; }

  /* 音乐浮标下移到提示条下面，别压住它 */
  .music-nudge {
    top: calc(var(--demo-bar-h, 130px) + 8px);
  }
  .install-guide { z-index: 210; }
}