/* 设计 token 统一引入（轻盈莫兰迪紫）——见 /common/tokens.css
 * 本文件仅保留 calendar 特有变量与样式，公共变量(--gray-*/--primary/--radius/--shadow)由 token 提供 */
:root {
  --green-50: #EEF6F1;
  --green-500: #4E8B6E;
}

*,*::before,*::after{margin:0;padding:0;box-sizing:border-box;-webkit-tap-highlight-color:transparent}
html,body{height:100%;-webkit-font-smoothing:antialiased}
body{
  font-family:-apple-system,BlinkMacSystemFont,"PingFang SC","Hiragino Sans GB","Microsoft YaHei",sans-serif;
  background:var(--gray-50);
  color:var(--gray-900);
  font-size:var(--text-md);
  line-height:1.7;
}
#app{max-width:430px;margin:0 auto;min-height:100vh;background:var(--white);overflow-x:hidden;position:relative}
.page{display:none;min-height:100vh}
.page.active{display:flex;flex-direction:column}

/* ===== 内容保护（微信环境） ===== */
/* 全文禁选择 + 禁长按弹菜单；仅订阅弹窗的二维码单独放行 */
html, body{
  -webkit-user-select:none;
  user-select:none;
  -webkit-touch-callout:none;
  -webkit-tap-highlight-color:transparent
}
img{
  -webkit-user-drag:none;
  user-drag:none;
  pointer-events:none
}
/* 订阅弹窗允许长按二维码识别 */
.modal, .modal *{
  -webkit-user-select:auto !important;
  user-select:auto !important;
  -webkit-touch-callout:default !important
}
.qr-img{
  pointer-events:auto
}

/* ===== 杂志封面背景 ===== */
.cal-bg{
  position:absolute;top:0;left:0;right:0;height:100%;
  background:
    radial-gradient(ellipse 130% 90% at 15% -5%, #9A8FB8 0%, transparent 55%),
    radial-gradient(ellipse 100% 70% at 95% 100%, #4E4668 0%, transparent 55%),
    radial-gradient(circle 340px at 80% 20%, rgba(176,168,200,.35) 0%, transparent 60%),
    linear-gradient(168deg, #7A6C99 0%, #6B5F8A 48%, #554D70 100%);
  z-index:0;overflow:hidden;
}
.cal-bg-image{
  position:absolute;inset:0;
  background-size:cover;background-position:center;
  opacity:0;transition:opacity .4s ease;z-index:1;
}
.cal-bg-image.loaded{opacity:1}
.cal-bg-image::after{
  content:'';position:absolute;inset:0;opacity:0;transition:opacity .4s ease;
  background:
    linear-gradient(180deg, rgba(30,27,43,.42) 0%, rgba(30,27,43,.1) 40%, rgba(30,27,43,.55) 100%),
    linear-gradient(90deg, rgba(30,27,43,.28) 0%, transparent 60%);
}
.cal-bg-image.loaded::after{opacity:1}

.cover{
  position:relative;height:100vh;height:100dvh;min-height:600px;
  display:flex;flex-direction:column;justify-content:flex-end;
  overflow:hidden;color:#fff;
}
.cover-grain{
  position:absolute;inset:0;z-index:2;opacity:.5;pointer-events:none;
  background-image:url("data:image/svg+xml,%3Csvg viewBox='0 0 200 200' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='2'/%3E%3CfeColorMatrix type='saturate' values='0'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)' opacity='0.05'/%3E%3C/svg%3E");
}
.cover-watermark{
  position:absolute;top:6%;right:-3%;z-index:3;
  font-family:"Georgia","Songti SC","Noto Serif SC",serif;
  font-size:min(52vw,240px);font-weight:500;line-height:.78;
  color:transparent;-webkit-text-stroke:1px rgba(255,255,255,.14);
  letter-spacing:-.04em;user-select:none;pointer-events:none;
}

.topbar{
  position:absolute;top:0;left:0;right:0;z-index:20;
  display:flex;align-items:center;justify-content:space-between;
  padding:calc(14px + var(--safe-top)) 20px 12px;
}
.brand{
  display:flex;align-items:center;gap:7px;
  font-size:11px;font-weight:700;letter-spacing:2.5px;
  color:rgba(255,255,255,.95);text-transform:uppercase;
  text-shadow:0 1px 4px rgba(30,27,43,.4);
}
.brand-dot{width:5px;height:5px;border-radius:50%;background:rgba(255,255,255,.7);box-shadow:0 1px 3px rgba(0,0,0,.2)}
.history-btn{
  display:flex;align-items:center;gap:5px;
  font-size:11px;font-weight:600;color:#fff;font-family:inherit;
  background:rgba(255,255,255,.16);border:0.5px solid rgba(255,255,255,.3);
  backdrop-filter:blur(10px);-webkit-backdrop-filter:blur(10px);
  padding:7px 14px;border-radius:var(--radius-full);cursor:pointer;
  transition:background .15s,transform .12s;
}
.history-btn:active{transform:scale(.95);background:rgba(255,255,255,.26)}

.cover-mascot{
  position:absolute;right:4%;bottom:calc(46px + var(--safe-bottom));z-index:4;
  width:88px;height:88px;pointer-events:none;
  animation:mascotFloat 4s ease-in-out infinite;
  filter:drop-shadow(0 8px 20px rgba(30,27,43,.28));
}
@keyframes mascotFloat{0%,100%{transform:translateY(0) rotate(-1.5deg)}50%{transform:translateY(-8px) rotate(1.5deg)}}
.cover-mascot img{width:100%;height:100%;object-fit:contain}
.mascot-bubble{
  position:absolute;right:calc(4% + 96px);bottom:calc(72px + var(--safe-bottom));z-index:5;
  background:rgba(255,255,255,.96);color:var(--brand-700);
  font-size:11.5px;font-weight:600;line-height:1.4;letter-spacing:.2px;
  padding:8px 12px;border-radius:13px;border-bottom-right-radius:3px;
  box-shadow:0 6px 20px rgba(30,27,43,.18);
  max-width:132px;pointer-events:none;
  opacity:0;transform:scale(.6) translateY(8px);transform-origin:bottom right;
  animation:bubbleIn .5s cubic-bezier(.34,1.56,.64,1) 1s forwards;
}
@keyframes bubbleIn{to{opacity:1;transform:scale(1) translateY(0)}}

.cover-content{
  position:relative;z-index:6;
  padding:0 26px calc(96px + var(--safe-bottom));
  display:flex;flex-direction:column;justify-content:flex-end;
}
.cover-date-row{display:flex;align-items:baseline;gap:9px;margin-bottom:8px;font-size:13px;font-weight:600;letter-spacing:2.5px;opacity:.82}
.cover-date-row .sep{opacity:.5}
.cover-day{
  font-family:"Georgia","Songti SC",serif;
  font-size:76px;font-weight:500;line-height:.95;letter-spacing:-2.5px;margin-bottom:14px;
  text-shadow:0 3px 16px rgba(30,27,43,.22);
}
.cover-day .week{font-size:20px;font-weight:500;opacity:.75;letter-spacing:1px;margin-left:10px;font-family:-apple-system,"PingFang SC",sans-serif}
.cover-lunar{
  display:inline-flex;align-items:center;gap:7px;align-self:flex-start;
  font-size:12px;font-weight:500;opacity:.9;letter-spacing:1px;
  padding:6px 13px;border:0.5px solid rgba(255,255,255,.3);
  border-radius:var(--radius-full);backdrop-filter:blur(8px);-webkit-backdrop-filter:blur(8px);
  margin-bottom:30px;
}
.cover-lunar .yl{opacity:.7}
.cover-divider{width:38px;height:2px;background:linear-gradient(90deg,rgba(255,255,255,.9),rgba(255,255,255,.2));border-radius:2px;margin-bottom:18px}
.cover-kicker{display:flex;align-items:center;gap:8px;font-size:11px;font-weight:700;letter-spacing:3.5px;color:rgba(255,255,255,.78);text-transform:uppercase;margin-bottom:13px}
.cover-kicker::before{content:'';width:14px;height:1px;background:rgba(255,255,255,.6)}
.cover-title{
  font-size:28px;font-weight:700;line-height:1.42;letter-spacing:-.5px;
  margin-bottom:24px;max-width:88%;text-shadow:0 2px 14px rgba(30,27,43,.3);
  min-height:80px;
}

.scroll-hint{
  position:absolute;left:50%;bottom:calc(16px + var(--safe-bottom));
  transform:translateX(-50%);z-index:7;
  display:flex;flex-direction:column;align-items:center;gap:4px;
  color:rgba(255,255,255,.65);font-size:10px;letter-spacing:2.5px;
  cursor:pointer;pointer-events:auto;
}
.scroll-hint .line{width:1px;height:26px;background:linear-gradient(180deg,rgba(255,255,255,.7),transparent);animation:lineDrop 1.8s ease-in-out infinite}
@keyframes lineDrop{0%{transform:scaleY(0);transform-origin:top}45%{transform:scaleY(1);transform-origin:top}55%{transform:scaleY(1);transform-origin:bottom}100%{transform:scaleY(0);transform-origin:bottom}}

/* ===== 封面响应式：按屏宽/屏高自适应 ===== */
/* 小屏（iPhone SE/8 等 ≤360px） */
@media (max-width:360px){
  .cover-day{font-size:60px;letter-spacing:-2px}
  .cover-day .week{font-size:16px;margin-left:7px}
  .cover-title{font-size:23px;margin-bottom:18px;min-height:66px}
  .cover-content{padding:0 20px calc(84px + var(--safe-bottom))}
  .cover-lunar{margin-bottom:20px}
  .cover-divider{margin-bottom:13px}
  .cover-mascot{width:72px;height:72px}
  .mascot-bubble{right:calc(4% + 80px);bottom:calc(66px + var(--safe-bottom));max-width:128px;font-size:11px}
}
/* 中屏（361–413px，主流机型）保持基准 */
/* 大屏（≥414px，Plus/Max/平板） */
@media (min-width:414px){
  .cover-day{font-size:88px}
  .cover-title{font-size:31px;max-width:82%}
  .cover-content{padding:0 34px calc(110px + var(--safe-bottom))}
  .cover-mascot{width:100px;height:100px}
  .mascot-bubble{right:calc(4% + 108px);bottom:calc(74px + var(--safe-bottom))}
  .cover-watermark{font-size:min(52vw,300px)}
}
/* 矮屏（高度 ≤700px，如 SE 二代/横屏）：压缩纵向节奏，避让 CTA 区 */
@media (max-height:700px){
  .cover-lunar{margin-bottom:16px}
  .cover-divider{margin-bottom:12px}
  .cover-title{font-size:24px;margin-bottom:16px;min-height:64px}
  .cover-mascot{width:68px;height:68px;bottom:calc(48px + var(--safe-bottom))}
  .mascot-bubble{right:calc(4% + 76px);bottom:calc(66px + var(--safe-bottom))}
}
/* 矮屏+小屏叠加时再压日期 */
@media (max-height:700px) and (max-width:360px){
  .cover-day{font-size:52px}
}

/* ===== 旧背景/日期区（已被封面取代，保留空壳防报错） ===== */
.cal-bg::before,.cal-bg::after{content:none}
.cal-bg.no-image{}

/* ===== 文章卡片（上提压住封面） ===== */
.article-card{
  position:relative;z-index:10;
  background:var(--white);
  margin:-40px 16px 14px;
  padding:34px 26px 24px;
  border-radius:22px;
  border:0.5px solid var(--gray-100);
  box-shadow:0 12px 40px rgba(42,39,51,.1),0 2px 8px rgba(42,39,51,.05);
}
.article-card::before{
  content:'';position:absolute;top:-5px;left:50%;transform:translateX(-50%);
  width:44px;height:5px;border-radius:99px;background:var(--gray-200);
}
.article-tag{
  display:inline-flex;align-items:center;gap:6px;
  font-size:var(--text-xs);font-weight:700;letter-spacing:1.5px;
  color:var(--primary);background:var(--brand-100);
  padding:5px 12px;border-radius:7px;margin-bottom:18px;
}

.article-title{
  font-size:22px;font-weight:700;line-height:1.42;
  color:var(--gray-900);margin-bottom:18px;letter-spacing:-0.3px;
}

.article-body{
  font-size:15.5px;line-height:1.95;color:var(--gray-700);
  margin-bottom:16px;text-align:justify;
}
.article-source{
  display:flex;align-items:center;gap:7px;
  font-size:var(--text-xs);color:var(--gray-400);margin-bottom:24px;
  padding-top:16px;border-top:0.5px solid var(--gray-100);letter-spacing:.5px;
}

/* 空状态：默认隐藏，.article-card.empty 时显示 */
.empty-state{
  display:none;text-align:center;padding:28px 12px 36px;
}
.article-card.empty .empty-state{display:block}
.article-card.empty .article-content{display:none}
.article-card.empty .poster-area{display:none}
.empty-mascot{
  width:96px;height:96px;margin:0 auto 18px;
  animation:mascotPop 0.5s cubic-bezier(0.22,0.61,0.36,1);
}
.empty-mascot img{width:100%;height:100%;object-fit:contain;pointer-events:auto}
@keyframes mascotPop{
  from{opacity:0;transform:scale(0.7) translateY(12px)}
  to{opacity:1;transform:scale(1) translateY(0)}
}
.empty-title{font-size:var(--text-lg);font-weight:600;color:var(--gray-900);margin-bottom:8px}
.empty-desc{font-size:var(--text-sm);color:var(--gray-500);margin-bottom:22px;line-height:1.6}
.empty-btn{
  display:inline-flex;align-items:center;gap:6px;
  padding:10px 22px;background:var(--primary-light);border:none;border-radius:var(--radius-lg);
  font-size:var(--text-sm);font-weight:600;color:var(--primary);cursor:pointer;
  transition:transform 120ms ease,background 120ms ease;
}
.empty-btn:active{transform:scale(0.96);background:rgba(107,94,138,0.16)}

.poster-area{display:flex;gap:10px}
.poster-btn{
  flex:1.35;display:flex;align-items:center;justify-content:center;gap:6px;
  padding:13px;background:var(--primary-light);
  border:1px solid rgba(107,94,138,0.10);border-radius:var(--radius-md);
  font-size:var(--text-base);font-weight:600;
  color:var(--primary);cursor:pointer;
  transition:transform 120ms ease,background 120ms ease;
  -webkit-tap-highlight-color:transparent;
}
.poster-btn:active{transform:scale(0.97);background:rgba(107,94,138,0.14)}
.sub-btn{
  flex:1;display:flex;align-items:center;justify-content:center;gap:6px;
  padding:13px;background:#fff;border:1px solid var(--primary-light);
  border-radius:var(--radius-md);font-size:var(--text-sm);font-weight:600;
  color:var(--primary);cursor:pointer;
  transition:transform 120ms ease,background 120ms ease;
  -webkit-tap-highlight-color:transparent;
}
.sub-btn:active{transform:scale(0.97);background:var(--primary-light)}

/* ===== 底部健康服务 ===== */
.footer-feed{
  position:relative;z-index:1;
  margin:0 12px 32px;
  padding:22px 18px 18px;
  background:var(--white);
  border-radius:var(--radius-md);
  box-shadow:var(--shadow);
}

/* 区域头部 */
.feed-section-header{
  display:flex;align-items:center;justify-content:space-between;
  margin-bottom:18px;padding-bottom:14px;
  border-bottom:0.5px solid var(--gray-100);
}
.feed-section-title{
  display:flex;align-items:center;gap:7px;
  font-size:var(--text-md);font-weight:700;color:var(--gray-900);
  letter-spacing:0.3px;
}
.feed-section-title::before{
  content:'';display:block;
  width:5px;height:5px;
  border-radius:50%;
  background:var(--gray-200);
}
.feed-section-link{
  font-size:var(--text-sm);color:var(--primary);text-decoration:none;
  display:flex;align-items:center;gap:5px;font-weight:500;
  padding:5px 10px;
  background:rgba(107,94,138,0.06);
  border-radius:var(--radius-sm);
  transition:background 120ms ease;
}
.feed-section-link:active{background:rgba(107,94,138,0.12)}
.feed-section-link svg{display:block;width:11px;height:11px}

/* ===== 花粉预报卡片 ===== */
.feed-pollen{
  display:flex;align-items:center;gap:14px;
  padding:16px;margin-bottom:18px;
  background:linear-gradient(135deg, #F2F7F0 0%, #F8FBF7 100%);
  border:0.5px solid rgba(47,111,71,0.12);
  border-left:3px solid var(--green-400);
  border-radius:var(--radius-md);
  text-decoration:none;color:inherit;
  transition:border-color 150ms ease, background 150ms ease;
  cursor:pointer;
  -webkit-tap-highlight-color:transparent;
  position:relative;overflow:hidden;
}
.feed-pollen::before{
  content:'';position:absolute;
  top:-18px;right:-18px;width:72px;height:72px;
  background:var(--green-50);border-radius:50%;opacity:0.8;
}
.feed-pollen:active{border-color:var(--green-300);background:#EDF4EA}
.feed-pollen-accent{display:none}
.feed-pollen-icon{
  flex:none;width:42px;height:42px;
  border-radius:var(--radius-md);
  display:flex;align-items:center;justify-content:center;
  background:var(--green-100);color:var(--green-600);
  position:relative;z-index:1;
}
.feed-pollen-icon svg{display:block;width:21px;height:21px}
.feed-pollen-body{flex:1;min-width:0;position:relative;z-index:1}
.feed-pollen-label{
  font-size:var(--text-xs);color:var(--green-600);font-weight:600;
  letter-spacing:0.4px;margin-bottom:4px;
}
.feed-pollen-city{
  display:flex;align-items:center;gap:5px;
  font-size:var(--text-base);font-weight:700;color:var(--gray-900);
  margin-bottom:3px;
}
.feed-pollen-city svg{flex:none;color:var(--green-500)}
.feed-pollen-hint{
  font-size:var(--text-xs);color:var(--gray-300);
  letter-spacing:0.3px;
}
.feed-pollen-level{
  flex:none;
  font-size:var(--text-sm);font-weight:700;
  padding:6px 14px;border-radius:var(--radius-full);
  position:relative;z-index:1;
  animation:pollenBreathe 3s ease-in-out infinite;
}
@keyframes pollenBreathe{
  0%,100%{transform:scale(1)}
  50%{transform:scale(1.06)}
}
.feed-pollen-arrow{
  flex:none;color:var(--gray-300);
  display:flex;align-items:center;position:relative;z-index:1;
}

/* ===== 健康提示分组 ===== */
.feed-tips-section{
  margin-bottom:18px;
  background:#FDF8F3;
  border:0.5px solid rgba(184,112,74,0.08);
  border-radius:var(--radius-md);
  padding:16px 16px 8px;
}
.feed-tips-label{
  display:flex;align-items:center;gap:7px;
  font-size:var(--text-sm);font-weight:600;color:#B8704A;
  letter-spacing:0.5px;margin-bottom:10px;padding:0 2px;
}
.feed-tips-label svg{display:block;width:13px;height:13px;opacity:0.65}
.feed-tip-row{
  display:flex;align-items:center;gap:12px;
  padding:12px 2px;
  border-top:0.5px solid rgba(184,112,74,0.07);
  text-decoration:none;color:inherit;
  transition:padding-left 150ms ease, background 120ms ease;
  cursor:pointer;
  -webkit-tap-highlight-color:transparent;
  border-radius:var(--radius-sm);
}
.feed-tip-row:first-child{border-top:none}
.feed-tip-row:active{padding-left:6px;background:rgba(184,112,74,0.04)}
.feed-tip-num{
  flex:none;width:20px;height:20px;
  border-radius:50%;
  background:rgba(184,112,74,0.12);color:#B8704A;
  font-size:var(--text-xs);font-weight:600;
  display:flex;align-items:center;justify-content:center;
  line-height:1;
}
.feed-tip-title{
  flex:1;min-width:0;
  font-size:var(--text-sm);font-weight:500;color:var(--gray-900);
  line-height:1.5;
  display:-webkit-box;-webkit-box-orient:vertical;-webkit-line-clamp:2;overflow:hidden;
}
.feed-tip-arrow{
  flex:none;color:#D4C0B2;
  display:flex;align-items:center;
}

/* ===== 底部链接 ===== */
.feed-footer-link{
  display:flex;width:fit-content;margin:0 auto;align-items:center;gap:6px;
  padding:9px 14px;
  font-size:var(--text-sm);color:var(--gray-400);text-decoration:none;
  background:var(--gray-50);
  border-radius:var(--radius-sm);
  transition:color 120ms ease, background 120ms ease;
  -webkit-tap-highlight-color:transparent;
  white-space:nowrap;
}
.feed-footer-link svg{flex:none;width:13px;height:13px;opacity:0.5}
.feed-footer-link:active{color:var(--primary);background:rgba(107,94,138,0.06)}


/* ===== 滑动切换动画 ===== */
.swipe-enter-left{animation:swipeInLeft 320ms cubic-bezier(0.22,0.61,0.36,1)}
.swipe-enter-right{animation:swipeInRight 320ms cubic-bezier(0.22,0.61,0.36,1)}
.swipe-leave-left{animation:swipeOutLeft 280ms cubic-bezier(0.55,0.06,0.68,0.19)}
.swipe-leave-right{animation:swipeOutRight 280ms cubic-bezier(0.55,0.06,0.68,0.19)}
@keyframes swipeInLeft{
  from{opacity:0;transform:translateX(60px)}
  to{opacity:1;transform:translateX(0)}
}
@keyframes swipeInRight{
  from{opacity:0;transform:translateX(-60px)}
  to{opacity:1;transform:translateX(0)}
}
@keyframes swipeOutLeft{
  to{opacity:0;transform:translateX(-40px)}
}
@keyframes swipeOutRight{
  to{opacity:0;transform:translateX(40px)}
}
.swipe-target{position:relative;z-index:1;overflow:hidden}

/* ===== 往期页 ===== */
.page-history{padding-bottom:40px;background:var(--white)}
.hist-top{
  display:flex;align-items:center;justify-content:space-between;
  padding:16px 16px 8px;
}
.hist-back{background:none;border:none;color:var(--gray-700);cursor:pointer;padding:4px}
.hist-title{font-size:var(--text-lg);font-weight:600;color:var(--gray-900)}

.cal-nav{display:flex;align-items:center;justify-content:space-between;padding:0 24px;margin:10px 0 16px}
.cal-nav-btn{background:none;border:none;font-size:26px;color:var(--primary);cursor:pointer;padding:0 12px;line-height:1}
.cal-nav-title{font-size:var(--text-md);font-weight:600;color:var(--gray-900)}

.cal-grid{display:grid;grid-template-columns:repeat(7,1fr);gap:6px;padding:0 16px;margin-bottom:18px}
.cal-wd{text-align:center;font-size:var(--text-xs);color:var(--gray-500);padding:6px 0;font-weight:600}
.cal-day{
  aspect-ratio:1;display:flex;align-items:center;justify-content:center;
  background:var(--gray-50);border-radius:var(--radius-sm);font-size:var(--text-sm);font-weight:500;
  cursor:pointer;color:var(--gray-700);position:relative
}
.cal-day.today{background:var(--primary);color:var(--white);font-weight:700}
.cal-day.has:after{content:'';position:absolute;bottom:3px;width:4px;height:4px;border-radius:50%;background:var(--primary);opacity:.5}
.cal-day.today.has:after{background:var(--white)}
/* 未来日期（未发布）：不可选，视觉弱化 */
.cal-day.future{background:transparent;color:var(--gray-300);cursor:not-allowed}
.cal-day.future:hover{background:transparent}

.cal-list{display:flex;flex-direction:column;gap:0;padding:0 16px}
.cal-item{display:flex;align-items:center;gap:14px;padding:15px 0;border-bottom:1px solid var(--gray-100);cursor:pointer}
.cal-item:active{background:var(--gray-50)}
.cal-item-date{font-size:var(--text-xs);color:var(--gray-500);white-space:nowrap;min-width:52px}
.cal-item-title{font-size:var(--text-base);color:var(--gray-900);font-weight:500;flex:1}

/* ===== 弹窗 ===== */
.modal{display:none;position:fixed;inset:0;background:rgba(30,27,43,0.4);z-index:100;align-items:center;justify-content:center;padding:16px}
.modal.show{display:flex}
.modal-sheet{
  background:var(--white);border-radius:var(--radius-md);
  padding:24px;
  width:100%;max-width:320px;text-align:center;
  margin:auto;
  animation:up 0.3s cubic-bezier(0.16,1,0.3,1);
  box-shadow:var(--shadow-modal);
}
.modal-handle{width:32px;height:4px;background:var(--gray-200);border-radius:2px;margin:0 auto 16px}
@keyframes up{from{transform:translateY(60px);opacity:0}to{transform:translateY(0);opacity:1}}
.modal-sheet h3{font-size:var(--text-lg);font-weight:600;margin-bottom:6px;color:var(--gray-900)}
.modal-sheet p{font-size:var(--text-sm);color:var(--gray-500);margin-bottom:16px;line-height:1.6}
.qr-placeholder{width:180px;height:180px;background:var(--gray-50);border-radius:var(--radius-sm);margin:0 auto 16px;display:flex;align-items:center;justify-content:center}
.qr-text{font-size:var(--text-xs);color:var(--gray-500);font-weight:500}
.qr-card{background:var(--gray-50);border-radius:var(--radius-lg);padding:22px;display:inline-block;margin:0 auto 12px;border:1px solid var(--gray-100);box-shadow:var(--shadow-overlay)}
.qr-img{width:180px;height:180px;display:block;border-radius:var(--radius-sm);background:#fff;-webkit-user-drag:auto;user-drag:auto;-webkit-touch-callout:default}
.qr-tip{font-size:var(--text-xs);color:var(--gray-500);margin-bottom:20px;letter-spacing:0.3px}
.modal-btn{width:100%;padding:13px;background:var(--primary);color:var(--white);border:none;border-radius:var(--radius-sm);font-size:var(--text-base);font-weight:600;cursor:pointer}
.modal-btn:active{opacity:.85}
.modal-btn-outline{width:100%;padding:12px;background:transparent;color:var(--primary);border:1px solid var(--primary);border-radius:var(--radius-sm);font-size:var(--text-base);font-weight:500;cursor:pointer}
.modal-btn-outline:active{background:var(--primary-50);opacity:.9}
.modal-btn-close{display:inline-flex;align-items:center;justify-content:center;padding:10px 36px;background:var(--gray-100);color:var(--gray-600);border:none;border-radius:var(--radius-lg);font-size:var(--text-sm);font-weight:500;cursor:pointer;transition:background .15s ease}
.modal-btn-close:active{background:var(--gray-200)}

.modal-poster{align-items:center;padding:20px}
.poster-inner{width:100%;max-width:290px;text-align:center}
.poster-img{width:100%;height:auto;border-radius:var(--radius-sm);display:block;-webkit-touch-callout:default;user-select:auto;-webkit-user-drag:auto;background:#fff}
.poster-hint{
  color:var(--white);font-size:var(--text-sm);margin:14px 0 10px;opacity:.85;line-height:1.5;
  display:flex;align-items:center;justify-content:center;gap:6px;
}
.poster-hint-hand{
  display:inline-flex;animation:hintTap 1.6s ease-in-out infinite;
}
@keyframes hintTap{
  0%,100%{transform:translateY(0);opacity:.7}
  50%{transform:translateY(3px);opacity:1}
}
.modal-btn-light{background:rgba(255,255,255,0.1);border:1px solid rgba(255,255,255,0.2);color:var(--white)}
.poster-toast{position:fixed;top:50%;left:50%;transform:translate(-50%,-50%) scale(0.92);background:rgba(30,27,43,0.85);color:#fff;padding:12px 22px;border-radius:var(--radius-lg);font-size:var(--text-base);font-weight:500;opacity:0;pointer-events:none;transition:opacity .2s ease,transform .2s ease;z-index:200}
.poster-toast.show{opacity:1;transform:translate(-50%,-50%) scale(1)}

.share-hint{position:fixed;inset:0;background:rgba(0,0,0,0.72);z-index:150;display:none;opacity:0;transition:opacity .2s ease}
.share-hint.show{display:flex;justify-content:flex-end;opacity:1}
.share-hint-bubble{margin:56px 16px 0 0;text-align:right;color:#fff;max-width:260px}
.share-hint-arrow{display:inline-flex;margin-bottom:10px;animation:hintArrow 1.4s ease-in-out infinite}
.share-hint-arrow svg{transform:rotate(-45deg)}
.share-hint-bubble p{font-size:var(--text-md);line-height:1.7;font-weight:500;margin-bottom:2px}
.share-hint-bubble strong{font-size:var(--text-lg);letter-spacing:1px}
.share-hint-btn{margin-top:18px;padding:9px 26px;background:rgba(255,255,255,0.14);border:1px solid rgba(255,255,255,0.25);color:#fff;border-radius:var(--radius-lg);font-size:var(--text-base);font-weight:500;cursor:pointer}
.share-hint-btn:active{background:rgba(255,255,255,0.22)}
@keyframes hintArrow{0%,100%{transform:translate(0,0);opacity:.8}50%{transform:translate(6px,-6px);opacity:1}}