/* ============================================================
   layout.css — 移动端布局 / 桌面展台模式 / 纸张后处理
   ============================================================ */

/* ---------- 桌面展台背景（装饰） ---------- */
.desk {
  position: fixed; inset: 0; z-index: 0;
  background:
    radial-gradient(120% 90% at 50% 0%, #FFFCF5 0%, #F0E5D2 55%, #E3D5C0 100%);
  opacity: 0; pointer-events: none;
}
.desk-art {
  position: absolute; inset: 0;
  background-image:
    radial-gradient(closest-side at 18% 78%, rgba(242,166,90,.20), transparent 70%),
    radial-gradient(closest-side at 82% 30%, rgba(111,168,199,.18), transparent 70%),
    radial-gradient(closest-side at 60% 85%, rgba(78,140,107,.12), transparent 70%);
}
.desk-bokeh {
  position: absolute; border-radius: 50%;
  filter: blur(60px); opacity: .55;
}
.desk-bokeh--a { width: 260px; height: 260px; left: 6%;  top: 12%; background: rgba(242,166,90,.55); }
.desk-bokeh--b { width: 200px; height: 200px; right: 10%; top: 60%; background: rgba(111,168,199,.45); }
.desk-bokeh--c { width: 160px; height: 160px; left: 30%; bottom: 8%; background: rgba(232,116,97,.35); }

/* ---------- 舞台 ---------- */
.stage {
  position: relative; z-index: var(--z-app);
  display: block;
  height: 100vh; height: 100dvh;
  width: 100%;
}

.stage-panel { display: none; }

/* ---------- 手机容器 ---------- */
.device {
  position: relative;
  width: 100%; height: 100%;
  display: flex; align-items: stretch; justify-content: center;
  padding: 0;
}
.device-frame {
  position: relative;
  width: 100%; height: 100%;
  overflow: hidden;
  background: var(--paper);
  isolation: isolate;
}
.device-notch { display: none; }
.device-screen {
  position: relative;
  width: 100%; height: 100%;
  overflow: hidden;
  background: var(--paper);
}

/* 纸张颗粒 + 暗角 + 色偏（全局后处理，精致感来源之一） */
.device-screen::after {
  content: "";
  position: absolute; inset: 0; z-index: 40;
  pointer-events: none;
  background-image:
    url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='140' height='140'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.85' numOctaves='3' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='140' height='140' filter='url(%23n)' opacity='.42'/%3E%3C/svg%3E"),
    radial-gradient(120% 100% at 50% 50%, transparent 52%, rgba(58,51,44,.30) 100%);
  background-blend-mode: multiply, normal;
  opacity: .10;
  mix-blend-mode: multiply;
}
/* 轻微色偏：暖青错位 */
.device-screen::before {
  content: "";
  position: absolute; inset: 0; z-index: 41;
  pointer-events: none;
  background:
    linear-gradient(90deg, rgba(111,168,199,.06), transparent 12%, transparent 88%, rgba(242,166,90,.06));
  mix-blend-mode: screen;
  opacity: .9;
}

/* ---------- App 根 ---------- */
.app {
  position: relative;
  width: 100%; height: 100%;
  overflow: hidden;
  background: var(--paper);
  font-size: var(--fs-lg);
}

.screen {
  position: absolute; inset: 0;
  display: flex; flex-direction: column;
  min-height: 0;
  animation: screen-in var(--norm) var(--ease) both;
}
@keyframes screen-in {
  from { opacity: 0; transform: translateY(10px) scale(.99); }
  to   { opacity: 1; transform: none; }
}

/* ============================================================
   通用三段式：顶栏 / 滚动区 / 吸底区
   ============================================================ */
.bar-top {
  flex: 0 0 auto;
  padding: calc(var(--sat) + 8px) 14px 8px;
  background: rgba(251,246,236,.86);
  backdrop-filter: blur(10px) saturate(1.2);
  -webkit-backdrop-filter: blur(10px) saturate(1.2);
  border-bottom: 1.5px solid rgba(58,51,44,.08);
  z-index: var(--z-bar);
}
.scroll-area {
  flex: 1 1 auto;
  min-height: 0;
  overflow-y: auto;
  overscroll-behavior: contain;
  -webkit-overflow-scrolling: touch;
}
.bar-bottom {
  flex: 0 0 auto;
  padding: 10px 14px calc(var(--sab) + 10px);
  background: rgba(251,246,236,.9);
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
  border-top: 1.5px solid rgba(58,51,44,.08);
  z-index: var(--z-bar);
}

/* ============================================================
   桌面展台模式
   ============================================================ */
@media (min-width: 768px), (min-height: 720px) and (min-width: 700px) {
  .desk { opacity: 1; }

  .stage {
    display: grid;
    grid-template-columns: minmax(220px, 1fr) auto minmax(220px, 1fr);
    align-items: center;
    justify-content: center;
    gap: clamp(20px, 4vw, 56px);
    padding: 28px clamp(20px, 4vw, 60px);
  }

  .stage-panel {
    display: flex;
    flex-direction: column;
    gap: 20px;
    max-width: 320px;
    animation: panel-in var(--slow) var(--ease) both;
  }
  .stage-panel--left  { animation-delay: .06s; justify-self: end; }
  .stage-panel--right { animation-delay: .14s; justify-self: start; }
  @keyframes panel-in {
    from { opacity: 0; transform: translateY(14px); }
    to   { opacity: 1; transform: none; }
  }

  /* 手机比例：390 × 844 */
  .device { padding: 0; }
  .device-frame {
    width: 390px;
    height: min(844px, calc(100dvh - 56px));
    min-height: 620px;
    border-radius: 44px;
    border: 10px solid #3A332C;
    box-shadow:
      var(--sh-3),
      0 0 0 2px rgba(255,253,248,.9) inset,
      0 30px 70px rgba(58,51,44,.28);
    animation: device-in var(--slow) var(--ease) both;
  }
  @keyframes device-in {
    from { opacity: 0; transform: translateY(24px) scale(.97); }
    to   { opacity: 1; transform: none; }
  }
  .device-notch {
    display: block;
    position: absolute; z-index: 50;
    top: 9px; left: 50%; transform: translateX(-50%);
    width: 108px; height: 24px;
    background: #3A332C;
    border-radius: var(--r-pill);
    pointer-events: none;
  }
  .device-screen::after { border-radius: 34px; }
  .device-screen::before { border-radius: 34px; }

  /* 左侧品牌 */
  .sp-brand { display: flex; align-items: center; gap: 14px; }
  .sp-mark { width: 52px; height: 52px; flex: 0 0 auto; }
  .sp-mark-svg { width: 100%; height: 100%; }
  .sp-title { font-size: 34px; letter-spacing: .18em; }
  .sp-sub { font-size: var(--fs-sm); color: var(--ink-3); letter-spacing: .3em; margin-top: 2px; }
  .sp-slogan {
    font-size: 26px; font-weight: 800; line-height: 1.5;
    color: var(--ink);
  }
  .sp-desc { font-size: var(--fs-md); color: var(--ink-2); line-height: 1.85; }
  .sp-facts { display: flex; gap: 26px; }
  .sp-facts li { display: flex; flex-direction: column; }
  .sp-facts b { font-family: var(--ff-num); font-size: 30px; color: var(--orange); line-height: 1; }
  .sp-facts span { font-size: var(--fs-xs); color: var(--ink-3); margin-top: 4px; }
  .sp-note { font-size: var(--fs-xs); color: var(--ink-4); line-height: 1.9; }
  .sp-note--sm { text-align: center; }

  /* 右侧要点卡 */
  .sp-h2 {
    font-size: var(--fs-lg);
    padding-bottom: 8px;
    border-bottom: 2px dashed rgba(58,51,44,.18);
    letter-spacing: .06em;
  }
  .sp-tipcard {
    background: var(--card);
    border: var(--stroke-w) solid var(--stroke);
    border-radius: var(--r-md);
    padding: 16px 18px;
    box-shadow: var(--sh-2);
    transform: rotate(-.6deg);
  }
  .sp-tipcard-tag {
    display: inline-block;
    font-size: var(--fs-xs); font-weight: 800;
    color: #fff; background: var(--coral);
    padding: 3px 10px; border-radius: var(--r-pill);
    margin-bottom: 10px;
  }
  .sp-tipcard-text { font-size: var(--fs-md); line-height: 1.8; font-weight: 600; }
  .sp-qr { display: flex; flex-direction: column; align-items: center; gap: 10px; }
  .sp-qr-svg { width: 92px; height: 92px; }
  .sp-qr span { font-size: var(--fs-xs); color: var(--ink-3); }
}

/* 平板横屏/小笔记本：面板更窄 */
@media (min-width: 768px) and (max-width: 1120px) {
  .stage-panel { max-width: 240px; }
  .sp-slogan { font-size: 21px; }
  .sp-desc, .sp-note { font-size: var(--fs-xs); }
}

/* 超宽屏：放大一点 */
@media (min-width: 1600px) {
  .device-frame { width: 414px; height: min(896px, calc(100dvh - 56px)); }
  .stage-panel { max-width: 360px; }
}

/* ============================================================
   全局弹层
   ============================================================ */
.sheet-host {
  position: fixed; inset: 0; z-index: var(--z-sheet);
  display: flex; align-items: flex-end; justify-content: center;
  background: rgba(58,51,44,.42);
  backdrop-filter: blur(3px);
  -webkit-backdrop-filter: blur(3px);
  animation: fade-in var(--norm) var(--ease) both;
  padding: 0;
}
@keyframes fade-in { from { opacity: 0; } to { opacity: 1; } }
.sheet-host[hidden] { display: none; }

.sheet {
  width: 100%; max-width: 430px;
  max-height: 82vh; max-height: 82dvh;
  background: var(--card);
  border-radius: var(--r-lg) var(--r-lg) 0 0;
  border-top: var(--stroke-w) solid var(--stroke);
  box-shadow: var(--sh-3);
  display: flex; flex-direction: column;
  overflow: hidden;
  animation: sheet-up var(--norm) var(--ease) both;
}
@keyframes sheet-up {
  from { transform: translateY(24px); opacity: .6; }
  to   { transform: none; opacity: 1; }
}
@media (min-width: 768px) {
  .sheet-host { align-items: center; }
  .sheet {
    border-radius: var(--r-lg);
    border: var(--stroke-w) solid var(--stroke);
    max-width: 380px;
  }
}