/* ==========================================================================
   展示页样式 —— 蘭林閣酒店 深色主题
   --------------------------------------------------------------------------
   配色全部取自品牌 logo（app/static/img/logo.png）：
     实测 logo 像素主色 —— 棕 #956134 / 墨 #000000，整体均色 #3D2815。
   设计基调：以「深棕墨」为底，长时间点亮的展示屏不上白光，保护屏幕与视力；
   「金铜」为主强调色，呼应 logo 的棕金笔画。

   ★ 二维码区域例外：保持纯白底 + 高对比黑码。
     扫码识别率优先于视觉统一 —— 深色底会显著降低摄像头识别成功率
     （尤其背光/远距离/低端机型），这是刻意保留的唯一亮色区块。
   ========================================================================== */

:root {
  /* --- 底色层（自深至浅，构成层次而非大片同色） --- */
  --bg:         #17110B;   /* 页面底：极深棕墨 */
  --bg-2:       #1F1710;   /* 次层：底部渐变终点 */
  --surface:    #241A11;   /* 卡片面 */
  --surface-2:  #2E2115;   /* 卡片面（悬浮/内嵌） */

  /* --- 品牌色（取自 logo 棕 #956134 的两端外推） --- */
  --brand:      #C08A45;   /* 主金铜 —— 强调、数字、边框高光 */
  --brand-dim:  #9A6C34;   /* 次级金铜 —— 描边、分隔 */
  --brand-deep: #7A4E1E;   /* 深金铜 —— 大面积填充 */
  --brand-glow: rgba(192, 138, 69, .22);

  /* --- 文字层（对照深底做过对比度核验） --- */
  --fg:         #F4EADC;   /* 主文字：暖白（13.9:1 on --bg） */
  --fg-strong:  #FFFFFF;   /* 强调文字：纯白 */
  --sub:        #B9A48A;   /* 次要文字（6.0:1 on --bg） */
  --muted:      #8A7A66;   /* 弱化文字（3.4:1，仅用于非关键提示） */

  /* --- 功能色（深底上重新调亮，保证可读） --- */
  --ok:         #6FCE93;
  --warn:       #E8B45C;
  --danger:     #F0846F;

  /* --- 描边与分隔 --- */
  --line:       #3A2A1A;
  --line-soft:  #2B2015;
}

* { box-sizing: border-box; }

html, body {
  margin: 0;
  padding: 0;
  height: 100%;
  background: var(--bg);
  /* 微弱的中心暖光晕，避免大面积纯深色显得死板 */
  background-image:
    radial-gradient(1200px 620px at 50% -8%, rgba(192, 138, 69, .10), transparent 62%),
    linear-gradient(180deg, var(--bg) 0%, var(--bg-2) 100%);
  background-attachment: fixed;
  color: var(--fg);
  font-family: -apple-system, "PingFang SC", "Hiragino Sans GB", "Microsoft YaHei",
               "Segoe UI", "Noto Sans SC", sans-serif;
  -webkit-font-smoothing: antialiased;
  /* 展示屏防误触/防选中 */
  -webkit-tap-highlight-color: transparent;
}

.wrap {
  min-height: 100vh;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  padding: 28px 16px 36px;
  text-align: center;
}

/* --------------------------------------------------------------------------
   品牌区（logo + 店名）
   logo 原图是白底黑棕字，在深色底上必须处理成"亮字"才不刺眼也不突兀。
   方案：用 filter 反相 + 色相回正，把黑字变暖白、棕字保持金铜。
   -------------------------------------------------------------------------- */
.brand {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 10px;
  margin-bottom: 26px;
}
.brand-logo {
  height: 62px;
  width: auto;
  /* 反相：黑字 → 白字；再轻微降饱和+提亮，让棕字落回金铜区间 */
  filter: invert(1) hue-rotate(180deg) saturate(.72) brightness(1.06)
          drop-shadow(0 2px 10px rgba(0, 0, 0, .55));
  opacity: .96;
  user-select: none;
  -webkit-user-drag: none;
}
.brand-line {
  width: 72px;
  height: 1px;
  background: linear-gradient(90deg, transparent, var(--brand-dim), transparent);
}

.title {
  font-size: 38px;
  font-weight: 700;
  letter-spacing: 3px;
  margin: 0 0 26px;
  color: var(--fg-strong);
  text-shadow: 0 2px 18px rgba(0, 0, 0, .5);
}

.stage { display: flex; flex-direction: column; align-items: center; }
.hidden { display: none !important; }

/* --------------------------------------------------------------------------
   二维码区 —— 全页唯一的亮色区块（识别率优先，见文件头说明）
   外框用金铜描边 + 暖光晕，把白卡"包"进深色体系里，不显突兀。
   -------------------------------------------------------------------------- */
.qr-box {
  position: relative;
  padding: 18px;
  background: #FFFFFF;                 /* 刻意保留纯白：扫码识别率 */
  border: 2px solid var(--brand-dim);
  border-radius: 20px;
  box-shadow:
    0 0 0 8px rgba(192, 138, 69, .07),
    0 14px 44px rgba(0, 0, 0, .62),
    0 0 68px var(--brand-glow);
}

.qrcode {
  width: 320px;
  height: 320px;
  display: flex;
  align-items: center;
  justify-content: center;
}
.qrcode img, .qrcode canvas { width: 100% !important; height: 100% !important; }

.qr-overlay {
  position: absolute;
  inset: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  /* 保持白底遮罩：遮住的是二维码本身，仍属"扫码区"，不引入深色 */
  background: rgba(255, 255, 255, .95);
  border-radius: 18px;
  font-size: 20px;
  color: #8A5A12;                      /* 深琥珀：白底上可读 */
  font-weight: 600;
  padding: 20px;
  line-height: 1.6;
}

/* 倒计时 */
.countdown {
  font-size: 23px;
  color: var(--sub);
  margin: 28px 0 0;
  font-variant-numeric: tabular-nums;
  letter-spacing: .5px;
}
.countdown span {
  color: var(--brand);
  font-weight: 700;
  font-size: 29px;
  text-shadow: 0 0 22px var(--brand-glow);
}

/* 备用码 */
.backup-code {
  font-size: 21px;
  margin: 12px 0 0;
  letter-spacing: 2px;
  color: var(--sub);
}
.backup-code b {
  font-size: 30px;
  letter-spacing: 7px;
  color: var(--brand);
  font-variant-numeric: tabular-nums;
}

/* 底部信息条 */
.meta {
  margin-top: 24px;
  font-size: 19px;
  color: var(--sub);
  display: flex;
  gap: 22px;
  align-items: center;
  flex-wrap: wrap;
  justify-content: center;
}
.meta .loc { font-weight: 600; color: var(--fg); }
.meta .hint { font-size: 15px; color: var(--muted); }

/* 网络异常提示 */
.net-warn {
  margin-top: 16px;
  font-size: 17px;
  color: var(--warn);
  background: rgba(232, 180, 92, .10);
  border: 1px solid rgba(232, 180, 92, .28);
  border-radius: 10px;
  padding: 9px 16px;
}

/* --------------------------------------------------------------------------
   状态页（待审批 / 未授权）
   -------------------------------------------------------------------------- */
.big-icon {
  font-size: 68px;
  line-height: 1;
  margin-bottom: 14px;
  filter: drop-shadow(0 4px 16px rgba(0, 0, 0, .5));
}
.stage h2 {
  font-size: 29px;
  margin: 0 0 12px;
  font-weight: 700;
  color: var(--fg-strong);
  letter-spacing: 1px;
}
.stage .sub {
  font-size: 17px;
  color: var(--sub);
  margin: 0 0 28px;
  max-width: 560px;
  line-height: 1.75;
}

/* 按钮 —— 金铜实心，深色文字保证白字对比不足时的可读性 */
.btn {
  font-size: 18px;
  padding: 14px 38px;
  border: 1px solid var(--brand);
  border-radius: 11px;
  background: linear-gradient(180deg, var(--brand) 0%, var(--brand-deep) 130%);
  color: #1B1208;
  font-weight: 600;
  cursor: pointer;
  font-family: inherit;
  letter-spacing: 1px;
  box-shadow: 0 6px 22px rgba(0, 0, 0, .42), inset 0 1px 0 rgba(255, 255, 255, .22);
  transition: transform .12s ease, box-shadow .12s ease, filter .12s ease;
  -webkit-tap-highlight-color: transparent;
}
.btn:hover { filter: brightness(1.07); }
.btn:active {
  transform: translateY(1px);
  box-shadow: 0 3px 12px rgba(0, 0, 0, .42), inset 0 1px 0 rgba(255, 255, 255, .16);
}
.btn:focus-visible {
  outline: 2px solid var(--brand);
  outline-offset: 3px;
}

/* --------------------------------------------------------------------------
   手机端（宽度 < 768px）
   -------------------------------------------------------------------------- */
@media (max-width: 767px) {
  .wrap { padding: 22px 14px 30px; justify-content: flex-start; padding-top: 30px; }

  .brand { gap: 8px; margin-bottom: 18px; }
  .brand-logo { height: 44px; }
  .brand-line { width: 56px; }

  .title { font-size: 25px; margin-bottom: 18px; letter-spacing: 1.5px; }

  .qrcode { width: min(80vw, 300px); height: min(80vw, 300px); }
  .qr-box {
    padding: 13px;
    border-radius: 16px;
    box-shadow: 0 0 0 5px rgba(192, 138, 69, .07), 0 8px 26px rgba(0, 0, 0, .58);
  }
  .qr-overlay { font-size: 16px; border-radius: 13px; }

  .countdown { font-size: 16px; margin-top: 18px; }
  .countdown span { font-size: 20px; }
  .backup-code { font-size: 15px; }
  .backup-code b { font-size: 21px; letter-spacing: 4px; }

  .meta { font-size: 15px; margin-top: 16px; gap: 14px; }
  .meta .hint { display: none; }        /* 手机端自动隐藏 F11 提示 */
  .net-warn { font-size: 14px; padding: 8px 12px; }

  .big-icon { font-size: 54px; }
  .stage h2 { font-size: 22px; }
  .stage .sub { font-size: 15px; margin-bottom: 22px; }
  .btn { font-size: 17px; padding: 15px 40px; width: 100%; max-width: 300px; }
}

/* --------------------------------------------------------------------------
   横屏：二维码放大 50%（320 → 480）
   横屏时纵向空间反而更紧张，所以用 60vh 封顶：前台机 / 平板 / 显示器等
   宽高都够的横屏屏会拿到完整的 480px（正好 1.5 倍）；矮屏（如手机横屏）
   自动按视口高度收缩，避免二维码被截断而影响识别。
   放在手机端规则之后，保证横屏优先级更高。
   -------------------------------------------------------------------------- */
@media (orientation: landscape) {
  .qrcode {
    /* 目标 480px（竖屏 320 的 1.5 倍）。
       calc(100vh - 400px) 里的 400px 是页面固定内容（logo/标题/倒计时/内外边距）
       实测占用的高度，扣掉它才能保证二维码不被挤出视口、底部信息不被截断；
       下限 220px 兜住极矮的窗口。1080p 及以上横屏拿到的就是完整的 480px。 */
    width: clamp(220px, calc(100vh - 400px), 480px);
    height: clamp(220px, calc(100vh - 400px), 480px);
  }
}

/* --------------------------------------------------------------------------
   手机 / 矮屏横屏（视口高度 ≤ 560px）
   横屏时纵向只剩 300~400px，而页头（logo + 标题）和底部信息就占掉 300 多，
   二维码再大就会把页面顶出视口、需要滚动。这里压缩页头与各处间距，
   让二维码按「剩余高度」定尺（100vh - 160px 中的 160 是压缩后固定内容实测占用）。
   放在上面横屏规则之后，优先级更高。
   -------------------------------------------------------------------------- */
@media (orientation: landscape) and (max-height: 560px) {
  .wrap { padding: 8px 12px; }

  .brand { gap: 4px; margin-bottom: 6px; }
  .brand-logo { height: 28px; }
  .brand-line { width: 48px; }

  .title { font-size: 18px; letter-spacing: 1px; margin: 0 0 8px; }

  .qrcode {
    width: clamp(120px, calc(100vh - 160px), 480px);
    height: clamp(120px, calc(100vh - 160px), 480px);
  }
  .qr-box { padding: 8px; border-radius: 12px; }
  .qr-overlay { font-size: 14px; border-radius: 10px; padding: 10px; }

  .countdown { font-size: 13px; margin: 8px 0 0; letter-spacing: 0; }
  .countdown span { font-size: 15px; }
  .backup-code { font-size: 12px; margin: 6px 0 0; }
  .backup-code b { font-size: 15px; letter-spacing: 2px; }

  .meta { margin-top: 6px; font-size: 12px; gap: 10px; }
  .meta .hint { display: none; }          /* 手机上本来就用不到 F11 提示 */
  .net-warn { margin-top: 6px; font-size: 12px; padding: 4px 8px; }

  .big-icon { font-size: 34px; margin-bottom: 8px; }
  .stage h2 { font-size: 17px; margin: 0 0 8px; }
  .stage .sub { font-size: 13px; margin-bottom: 12px; }
  .btn { font-size: 14px; padding: 9px 22px; }
}

/* 尊重系统的"减少动效"偏好 */
@media (prefers-reduced-motion: reduce) {
  .btn { transition: none; }
}