/* 快洁采耳 - Official H5 Design System */
@import url('https://fonts.googleapis.com/css2?family=Noto+Serif+SC:wght@400;600;700&display=swap');

:root {
  --bg-linen: #FAF8F5;
  --bg-[#FAF8F5]: #FAF8F5;
  --color-sage: #3E5446;
  --color-sage-light: #E1E8E3;
  --color-gold: #C49A6C;
  --color-charcoal: #1F2421;
  --color-border: #E8E0D2;
}

body {
  background-color: #ECE8E1;
  color: #1F2421;
  margin: 0;
  font-family: -apple-system, BlinkMacSystemFont, "PingFang SC", "Hiragino Sans GB", "Microsoft YaHei", sans-serif;
  -webkit-tap-highlight-color: transparent;
}

.h5-viewport {
  max-width: 480px;
  margin: 0 auto;
  background-color: #FAF8F5;
  min-height: 100vh;
  min-height: 100dvh;
  box-shadow: 0 0 35px rgba(0,0,0,0.08);
  position: relative;
  display: flex;
  flex-direction: column;
  overflow-x: hidden;
}

.linen-texture {
  background-image: url('data:image/svg+xml;utf8,<svg width="100" height="100" xmlns="http://www.w3.org/2000/svg"><filter id="noise"><feTurbulence type="fractalNoise" baseFrequency="0.04" numOctaves="3" stitchTiles="stitch"/></filter><rect width="100" height="100" filter="url(%23noise)" opacity="0.03"/></svg>');
}

.font-serif {
  font-family: 'Noto Serif SC', 'Songti SC', 'STSong', serif;
}

/* Corner Bracket Card Decorations */
.corner-card {
  position: relative;
  background: #FFFFFF;
  border: 1px solid #E8E0D2;
  border-radius: 4px;
}

.corner-card::before,
.corner-card::after {
  content: "";
  position: absolute;
  width: 6px;
  height: 6px;
  border: 1px solid #C2B09C;
  background: #FAF8F5;
  z-index: 10;
}
.corner-card::before { top: -3px; left: -3px; }
.corner-card::after { top: -3px; right: -3px; }

.corner-card-bottom::before,
.corner-card-bottom::after {
  content: "";
  position: absolute;
  width: 6px;
  height: 6px;
  border: 1px solid #C2B09C;
  background: #FAF8F5;
  z-index: 10;
}
.corner-card-bottom::before { bottom: -3px; left: -3px; }
.corner-card-bottom::after { bottom: -3px; right: -3px; }

.hide-scrollbar::-webkit-scrollbar { display: none; }
.hide-scrollbar { -ms-overflow-style: none; scrollbar-width: none; }

/* Pulse animation for scope viewfinder */
@keyframes scopePulse {
  0% { transform: scale(0.95); opacity: 0.8; }
  50% { transform: scale(1.05); opacity: 0.3; }
  100% { transform: scale(0.95); opacity: 0.8; }
}
.scope-pulse {
  animation: scopePulse 3s infinite ease-in-out;
}

/* Drawer overlay backdrop */
.drawer-backdrop {
  background: rgba(31, 36, 33, 0.5);
  backdrop-filter: blur(4px);
}

/* Spinner */
.spinner {
  border: 2px solid rgba(62, 84, 70, 0.2);
  border-top-color: #3E5446;
  border-radius: 50%;
  width: 18px;
  height: 18px;
  animation: spin 0.8s linear infinite;
  display: inline-block;
}
@keyframes spin { to { transform: rotate(360deg); } }