/* ╔══════════════════════════════════════════════════════════════════════════╗
   ║  问星 · 主页 App mockup 纯 CSS 复刻  mockups.css                            ║
   ║  ----------------------------------------------------------------------    ║
   ║  这些是「主页专属」的样式：用纯 CSS 1:1 复刻 App 的真实界面（iPhone 节气    ║
   ║  首页 / 主屏 · 锁屏小组件 / Apple Watch 表盘与 App / 通知横幅 / 七十二候     ║
   ║  特写 / 主题色卡 / 四时八节年历）。量大且只服务主页 hero 与各展示版块，故    ║
   ║  从 site.css(干净通用地基) 拆出来单独引入，site.css 保持通用。              ║
   ║                                                                            ║
   ║  规格出处逐项标注在各块（节气首页*.swift / HomeWidgetRenderView.swift /     ║
   ║  wenxing.swift / ContentView.swift / 季节配色.swift）。                     ║
   ║  这些 mockup 内部用 App 真源色 --mz-* / --sw-*（与页面纸墨基色脱钩——        ║
   ║  它们是「产品实拍」，跟随 App 主题深浅，不跟随页面季节）。                   ║
   ╚══════════════════════════════════════════════════════════════════════════╝ */

/* ════════ App 复刻用的真源色（来自 季节配色.swift / 芒种主题，原值） ════════ */
:root {
  /* 芒种主题（App 首页 mockup）— 浅色 */
  --mz-bg: #F5EBD6;
  --mz-ink: #47381F;
  --mz-ink2: #8C7A52;
  --mz-accent: #D19E38;
  /* 季节配色 · 夏（HomeWidget mockup）— 浅色 */
  --sw-top: #FFD666;
  --sw-bottom: #F7944D;
  --sw-ink: #572105;
}
html[data-theme="dark"] :is(.phone, .hw, .pentad-card),
html.sys-dark:not([data-theme="light"]) :is(.phone, .hw, .pentad-card) {
  /* 深色下 mockup 跟随（App / widget 的真实深色档） */
  --mz-bg: #1F170D;
  --mz-ink: #F2E6D1;
  --mz-ink2: #B3996B;
  --mz-accent: #E6B347;
  --sw-top: #804712;
  --sw-bottom: #4D1F0A;
  --sw-ink: #FFE0A1;
}

/* 手机背后一圈当季光晕（App 特效层的远亲，极淡） */
.stage { position: relative; display: flex; justify-content: center; }
.stage::before {
  content: ""; position: absolute;
  width: min(620px, 96vw); aspect-ratio: 1;
  top: 50%; left: 50%; transform: translate(-50%, -50%);
  background: radial-gradient(circle, color-mix(in srgb, var(--cta-a) 16%, transparent) 0%, transparent 65%);
  pointer-events: none;
}

/* ════════ iPhone 框 + 节气首页复刻（规格源：节气首页*.swift，芒种 · 今日） ════════ */
.phone {
  width: 330px; height: 716px;
  border-radius: 54px;
  background: #1c1c1e;
  padding: 9px;
  box-shadow: 0 24px 60px rgba(0,0,0,0.22), inset 0 0 0 1.5px rgba(255,255,255,0.12);
  position: relative;
  text-align: left;
  margin: 0 auto;
}
.phone .screen {
  width: 100%; height: 100%;
  border-radius: 46px;
  background: var(--mz-bg);
  overflow: hidden;
  position: relative;
  transition: background-color 0.3s ease;
}
/* 芒种浅色特效层：顶部琥珀光晕（App SpriteKit 层的静态近似） */
.phone .glow {
  position: absolute; left: -20%; top: -28%;
  width: 140%; aspect-ratio: 1;
  background: radial-gradient(circle, rgba(255,204,102,0.40) 0%, rgba(242,179,77,0.18) 45%, transparent 70%);
  pointer-events: none;
}
.phone .island {
  position: absolute; top: 11px; left: 50%; transform: translateX(-50%);
  width: 86px; height: 25px; border-radius: 14px; background: #000; z-index: 5;
}
/* 顶部候提示横幅（tipBanner） */
.mz-tip {
  position: absolute; top: 46px; left: 26px; right: 26px;
  text-align: center; color: var(--mz-ink2);
  font-size: 12px; font-weight: 400;
  padding: 10px 0;
  border-top: 0.5px solid color-mix(in srgb, var(--mz-accent) 20%, transparent);
  border-bottom: 0.5px solid color-mix(in srgb, var(--mz-accent) 20%, transparent);
}
/* hero 竖排四列（阅读序右→左：标注/候名/诗1/诗2） */
.mz-hero {
  position: absolute; top: 47%; left: 50%;
  transform: translate(-50%, -53%);
  display: flex; flex-direction: row; gap: 19px; align-items: flex-start;
}
.vtext { writing-mode: vertical-rl; text-orientation: upright; line-height: 1; }
.mz-hero .poem2 { font-size: 18px; font-weight: 300; color: color-mix(in srgb, var(--mz-ink) 78%, transparent); letter-spacing: 8px; padding-top: 50px; }
.mz-hero .poem1 { font-size: 18px; font-weight: 300; color: color-mix(in srgb, var(--mz-ink) 85%, transparent); letter-spacing: 8px; padding-top: 25px; }
.mz-hero .hou   { font-size: 54px; font-weight: 400; color: var(--mz-ink); letter-spacing: 10px; }
.mz-hero .tag   { font-size: 11px; font-weight: 300; color: color-mix(in srgb, var(--mz-ink2) 65%, transparent); letter-spacing: 6px; padding-top: 5px; }
/* 左下日期块 */
.mz-date {
  position: absolute; left: 24px; bottom: 24px;
  display: flex; flex-direction: column; gap: 3px;
}
.mz-date .d1 { font-size: 27px; font-weight: 300; color: color-mix(in srgb, var(--mz-ink) 95%, transparent); margin-bottom: 2px; }
.mz-date .d2 { font-size: 11px; font-weight: 300; color: color-mix(in srgb, var(--mz-ink2) 85%, transparent); }
.mz-date .d3 { font-size: 9.5px; font-weight: 300; color: color-mix(in srgb, var(--mz-ink2) 65%, transparent); }
.mz-date .gap { height: 4px; }
/* 右下菜单按钮 */
.mz-menu {
  position: absolute; right: 16px; bottom: 18px;
  width: 24px; height: 24px; border-radius: 50%;
  border: 1.3px solid color-mix(in srgb, var(--mz-ink2) 85%, transparent);
  color: color-mix(in srgb, var(--mz-ink2) 85%, transparent);
  display: flex; align-items: center; justify-content: center;
  font-size: 13px; letter-spacing: 1px; line-height: 1; padding-bottom: 5px;
}
.phone-caption { font-size: 13px; color: var(--ink-2); margin-top: 26px; }

/* ════════ 七十二候特写（首页 pentadSection 的放大复刻） ════════ */
.pentad-card {
  width: min(560px, 92vw);
  background: var(--mz-bg);
  border-radius: 28px;
  padding: 44px 40px 40px;
  text-align: center;
  box-shadow: 0 18px 44px rgba(0,0,0,0.10);
  transition: background-color 0.3s ease;
}
.pentad-card .label { font-size: 13px; font-weight: 600; letter-spacing: 5px; color: color-mix(in srgb, var(--mz-ink2) 82%, transparent); }
.pentad-dots { display: flex; align-items: center; padding: 30px 36px 26px; }
.pentad-dots .dot { width: 7px; height: 7px; border-radius: 50%; background: color-mix(in srgb, var(--mz-accent) 30%, transparent); flex: none; }
.pentad-dots .dot.on { width: 10px; height: 10px; background: var(--mz-accent); }
.pentad-dots .line { height: 0.5px; background: color-mix(in srgb, var(--mz-accent) 25%, transparent); flex: 1; margin: 0 6px; }
.pentad-cols { display: flex; gap: 14px; align-items: flex-start; }
.pentad-cols .col { flex: 1; display: flex; flex-direction: column; gap: 9px; }
.pentad-cols .ord { font-size: 12px; font-weight: 600; letter-spacing: 2.5px; color: color-mix(in srgb, var(--mz-ink2) 50%, transparent); }
.pentad-cols .on .ord { color: var(--mz-accent); }
.pentad-cols .name { font-size: 19px; font-weight: 400; color: color-mix(in srgb, var(--mz-ink2) 85%, transparent); }
.pentad-cols .on .name { font-weight: 600; color: var(--mz-ink); }
.pentad-cols .gloss { font-size: 12px; font-weight: 300; line-height: 1.55; color: color-mix(in srgb, var(--mz-ink2) 70%, transparent); }

/* ════════ 小组件复刻（规格源：HomeWidgetRenderView.swift + 季节配色 夏） ════════ */
/* 主屏小组件：框与字号均为真机点数 1:1（systemSmall 158×158 / systemMedium 338×158,
   390pt 宽机型）；系统 content margins 16pt；行高、间距、透明度逐项取自
   HomeWidgetRenderView.swift（smallBody / mediumBody） */
.hw { border-radius: 36px; text-align: left; box-shadow: 0 14px 36px rgba(0,0,0,0.16); transition: background 0.3s ease; line-height: 1.2; }
.hw-small {
  width: 158px; height: 158px;
  background: linear-gradient(135deg, var(--sw-top) 0%, var(--sw-bottom) 100%);
  color: var(--sw-ink);
  padding: 16px;
  display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 4px; /* VStack spacing 4 */
}
.hw-small .t { font-size: 39px; font-weight: 600; line-height: 49px; } /* AutoSizedTermName base 39 · 行高 ×1.25 */
.hw-small .d { font-size: 15px; opacity: 0.7; }
.hw-small .l { font-size: 15px; opacity: 0.55; }
.hw-medium {
  width: 338px; height: 158px;
  background: linear-gradient(135deg, var(--sw-top) 0%, var(--sw-bottom) 100%);
  color: var(--sw-ink);
  padding: 16px;                          /* 系统默认 content margins ~16pt */
  display: flex; flex-direction: column; gap: 6px;  /* VStack spacing 6 */
}
.hw-medium .r1 { display: flex; align-items: baseline; gap: 8px; }   /* HStack spacing 8 */
.hw-medium .r1 .t { font-size: 28px; font-weight: 600; line-height: 35px; } /* base 28 · ×1.25 */
.hw-medium .r1 .sp { flex: 1; }
.hw-medium .r1 .d { font-size: 12px; opacity: 0.7; }
.hw-medium .r1 .dotsep { font-size: 12px; opacity: 0.5; font-family: -apple-system, "PingFang SC", sans-serif; } /* 「·」源码无 serif design */
.hw-medium .r2 { display: flex; align-items: center; gap: 6px; }     /* 候点与文字统一 spacing 6 */
.hw-medium .r2 .wdot { width: 5px; height: 5px; border-radius: 50%; background: currentColor; opacity: 0.25; flex: none; }
.hw-medium .r2 .wdot.on { opacity: 1; }
.hw-medium .r2 .htxt { font-size: 13px; font-weight: 600; opacity: 0.9; }
.hw-medium .r3 { font-size: 11px; opacity: 0.7; }
.hw-medium .sp { flex: 1; }
.hw-medium .poemblk { display: flex; flex-direction: column; gap: 1px; } /* VStack spacing 1 */
.hw-medium .poem { font-size: 12px; font-weight: 300; font-style: italic; opacity: 0.85; }
.hw-medium .src { font-size: 9px; opacity: 0.55; }
.hw-medium .cd { font-size: 10px; opacity: 0.6; text-align: right; }
/* 锁屏小组件（系统毛玻璃底） */
.lock-wrap {
  width: 320px; padding: 26px 22px;
  border-radius: 28px;
  background:
    radial-gradient(circle at 30% 20%, #2c3a55 0%, transparent 60%),
    radial-gradient(circle at 80% 80%, #1d2c40 0%, transparent 55%),
    #10131c;
  display: flex; flex-direction: column; gap: 12px; align-items: center;
}
.lk {
  width: 172px; border-radius: 14px;
  background: rgba(255,255,255,0.16);
  -webkit-backdrop-filter: blur(10px); backdrop-filter: blur(10px);
  color: #fff; padding: 8px 10px;
  text-align: left;
}
.lk .l1 { display: flex; align-items: baseline; gap: 5px; }
.lk .l1 .t { font-size: 17px; font-weight: 600; }
.lk .l1 .o { font-size: 9px; opacity: 0.66; }
.lk .l2 { font-size: 10.5px; opacity: 0.66; margin-top: 2px; }
.lk .bar { height: 2.5px; border-radius: 2px; background: rgba(255,255,255,0.28); margin-top: 8px; position: relative; overflow: hidden; }
.lk .bar i { position: absolute; left: 0; top: 0; bottom: 0; width: 45%; background: #fff; border-radius: 2px; }
.lk .p1 { font-size: 10.5px; line-height: 1.45; }
.lk .p2 { font-size: 8.5px; opacity: 0.66; text-align: right; margin-top: 5px; }
.lock-cap { font-size: 11px; color: rgba(255,255,255,0.5); letter-spacing: 1px; }

/* ════════ Apple Watch 复刻（规格源：wenxing.swift Rectangular） ════════ */
/* 表体：45mm 真机屏 198×242pt（396×484 像素 @2x）的 1.5 倍（屏 297×363px），
   内容全部 = 源码 pt × 1.5 —— 42pt hero 在表上是占近半屏宽的大字 */
.watch {
  width: 317px; height: 383px;
  border-radius: 92px;
  background: #1c1c1e;
  padding: 10px;
  box-shadow: 0 20px 48px rgba(0,0,0,0.28), inset 0 0 0 1.5px rgba(255,255,255,0.12);
  position: relative;
  margin: 0 auto;
}
.watch::after { /* 表冠 */
  content: ""; position: absolute; right: -8px; top: 96px;
  width: 8px; height: 46px; border-radius: 5px; background: #2c2c2e;
}
/* 模块表盘（Modular）：左上日期 · 右上大号时间 · 中段大格 = 节气Rectangular ·
   底排三小圆（中间 = 节气Circular 满环，真实 complication；两侧为暗淡占位格） */
.watch .face {
  width: 100%; height: 100%; border-radius: 82px;
  background: #000; color: #fff;
  padding: 32px 28px 26px;
  display: flex; flex-direction: column;
  text-align: left;
}
/* Modular 顶部两行：左上日期复杂功能一行 + 大号时间右对齐一行 */
.watch .toprow { display: block; }
.watch .wdate { display: block; white-space: nowrap; font-size: 19.5px; letter-spacing: 1px; color: #7ee787; font-family: -apple-system, sans-serif; font-weight: 500; }
.watch .time { display: block; text-align: right; font-size: 72px; font-weight: 500; color: #7ee787; font-family: -apple-system, sans-serif; letter-spacing: 0.5px; line-height: 1; margin-top: 2px; }
.watch .sp { flex: 1; }
/* 中段大格 = wenxing.swift RectangularContent ×1.5：
   名 23→34.5 semibold / 行距 3→4.5 / 候点 5→7.5(间距 4→6) + 候名 14→21 secondary / 倒计 11.5→17 mono tertiary */
.watch .comp .t { font-size: 34.5px; font-weight: 600; line-height: 1.15; }
.watch .comp .h { display: flex; align-items: center; gap: 6px; margin-top: 4.5px; }
.watch .comp .h .wdot { width: 7.5px; height: 7.5px; border-radius: 50%; background: #fff; opacity: 0.3; flex: none; }
.watch .comp .h .wdot.on { opacity: 1; }
.watch .comp .h .htxt { font-size: 21px; color: rgba(255,255,255,0.66); margin-left: 3px; }
.watch .comp .cd { font-size: 17px; color: rgba(255,255,255,0.45); margin-top: 7px; font-variant-numeric: tabular-nums; }
/* 底排小圆：中间 = 节气Circular（accessoryCircularCapacity 满环 + 圆心节气名 16→24） */
.watch .botrow { display: flex; justify-content: space-between; align-items: center; margin-top: 14px; padding: 0 4px; }
.watch .mini {
  width: 64px; height: 64px; border-radius: 50%;
  background: rgba(255,255,255,0.10);
}
.watch .gauge {
  width: 70px; height: 70px; border-radius: 50%;
  position: relative;
  display: flex; align-items: center; justify-content: center;
}
.watch .gauge::before {
  content: ""; position: absolute; inset: 0; border-radius: 50%;
  background: conic-gradient(#fff 0 45%, rgba(255,255,255,0.28) 45% 100%);
  -webkit-mask: radial-gradient(closest-side, transparent calc(100% - 7px), #000 calc(100% - 6px));
  mask: radial-gradient(closest-side, transparent calc(100% - 7px), #000 calc(100% - 6px));
}
.watch .gauge .gt { font-size: 24px; font-weight: 600; letter-spacing: 1px; }
/* 表盘内 App（问星Watch App/ContentView.swift ×1.5，逐项对应源码）：
   手表恒暗 · 季节深色档全屏渐变（夏 #804712→#4D1F0A，文字 #FFE0A1）
   节气名 42→63 semibold（表上占近半屏宽的 hero）/ 间 12→18
   / 候点 6→9(距 4.8→7，余点 @0.28) / 间 9→13.5 / 候名 18→27 @0.85
   / 间 17→25.5 / 倒计 13→19.5 mono @0.6；右上 = watchOS 系统状态栏时间 */
.watch .wapp {
  width: 100%; height: 100%; border-radius: 82px;
  background: linear-gradient(135deg, #804712 0%, #4D1F0A 100%);
  color: #FFE0A1;
  display: flex; flex-direction: column; align-items: center; justify-content: center;
  text-align: center;
  padding: 0 15px;
  position: relative;
}
.watch .wapp .stime {
  position: absolute; top: 18px; right: 28px;
  font-family: -apple-system, sans-serif;
  font-size: 24px; font-weight: 600; color: #fff;
}
.watch .wapp .t { font-size: 63px; font-weight: 600; line-height: 1.15; }
.watch .wapp .dots { display: flex; gap: 7px; margin-top: 18px; }
.watch .wapp .dots i { width: 9px; height: 9px; border-radius: 50%; background: currentColor; opacity: 0.28; }
.watch .wapp .dots i.on { opacity: 1; }
.watch .wapp .h { font-size: 27px; opacity: 0.85; margin-top: 13.5px; padding: 0 6px; }
.watch .wapp .cd { font-size: 19.5px; opacity: 0.6; margin-top: 25.5px; font-variant-numeric: tabular-nums; }
.wcol { display: flex; flex-direction: column; align-items: center; gap: 20px; }
.wcap { font-size: 13px; color: var(--ink-2); letter-spacing: 1.5px; }

/* ════════ 通知横幅复刻（NotificationScheduler 档A 的真实文案） ════════ */
.notif {
  width: min(380px, 92vw);
  border-radius: 24px;
  background: color-mix(in srgb, var(--bg) 78%, var(--ink) 4%);
  -webkit-backdrop-filter: blur(20px); backdrop-filter: blur(20px);
  box-shadow: 0 14px 40px rgba(0,0,0,0.16);
  border: 1px solid var(--hairline);
  padding: 13px 15px;
  display: flex; gap: 11px; align-items: center;  /* iOS 横幅：图标对整条垂直居中 */
  text-align: left;
  margin: 0 auto;
}
.notif img { width: 38px; height: 38px; border-radius: 9px; }
.notif .body { flex: 1; min-width: 0; }
.notif .t-row { display: flex; justify-content: space-between; align-items: baseline; }
.notif .t { font-size: 14px; font-weight: 600; }
.notif .when { font-size: 11px; color: var(--ink-2); }
.notif .msg { font-size: 13.5px; line-height: 1.4; color: var(--ink); opacity: 0.85; margin-top: 1px; }

/* ════════ 主题色卡 ════════ */
.themes-row { display: flex; gap: 18px; justify-content: center; flex-wrap: wrap; margin-top: 56px; }
.tcard {
  width: 132px; height: 172px; border-radius: 26px;
  display: flex; align-items: flex-end; justify-content: center;
  padding-bottom: 16px;
  color: #fff; font-size: 15px; letter-spacing: 2px;
  box-shadow: 0 10px 28px rgba(0,0,0,0.14);
  position: relative; overflow: hidden;
}
.tcard span { position: relative; z-index: 2; }
.tcard.duanwu { background: #0a1c12; }
.tcard.duanwu i {
  position: absolute; top: -10%; bottom: -10%; width: 2.5px; border-radius: 2px;
  transform: rotate(13deg);
}
.tcard.duanwu i:nth-child(1) { left: 22%; background: #3E8E7E; }
.tcard.duanwu i:nth-child(2) { left: 35%; background: #C94F3D; }
.tcard.duanwu i:nth-child(3) { left: 48%; background: #E8B339; }
.tcard.duanwu i:nth-child(4) { left: 61%; background: #EDE6D6; }
.tcard.duanwu i:nth-child(5) { left: 74%; background: #5A5A66; }

/* ════════ 四时八节（沿用 almanac.js 数据） ════════ */
.almanac-terms {
  display: grid; grid-template-columns: repeat(8, 1fr);
  gap: 4px; max-width: 880px; margin: 56px auto 0;
}
.almanac-term {
  display: flex; flex-direction: column; align-items: center; gap: 3px;
  padding: 10px 2px 8px; text-decoration: none; border-radius: 14px;
  transition: background-color 0.25s;
}
.almanac-term:hover { background: color-mix(in srgb, var(--ink) 5%, transparent); text-decoration: none; }
.almanac-term .t-name { font-size: 17px; letter-spacing: 2px; color: var(--ink); }
.almanac-term .t-date { font-size: 11px; color: var(--ink-2); font-variant-numeric: tabular-nums; white-space: nowrap; }
.almanac-term .t-dot { width: 6px; height: 6px; border-radius: 50%; margin-top: 3px; background: transparent; }
.almanac-term.current .t-name { font-weight: 600; }
.almanac-festivals {
  margin: 30px auto 0; display: flex; justify-content: center; align-items: center;
  flex-wrap: wrap; gap: 8px 26px; font-size: 13px; color: var(--ink-2);
}
.almanac-festival { display: inline-flex; align-items: center; gap: 8px; color: var(--ink-2); text-decoration: none; }
.almanac-festival:hover { color: var(--ink); text-decoration: none; }
.almanac-festival .f-dot { width: 6px; height: 6px; border-radius: 50%; flex: none; }
.almanac-festival .f-name { font-size: 15px; color: var(--ink); }
.almanac-festival .f-date { font-variant-numeric: tabular-nums; }
@media (max-width: 720px) { .almanac-terms { grid-template-columns: repeat(4, 1fr); row-gap: 14px; } }

/* ════════ 下载块图标 ════════ */
.dl-icon { width: 88px; height: 88px; border-radius: 20px; box-shadow: 0 10px 26px rgba(0,0,0,0.16); margin-bottom: 24px; }
.dl-sub { font-size: 14px; color: var(--ink-2); margin-top: 16px; }

/* ════════ 响应式 ════════ */
@media (max-width: 720px) {
  .phone { width: 300px; height: 651px; }
}