/* ============================================================
   基础层：设计变量 + 页面骨架 + Hero
   watch.css 里所有 var(--*) 都由这里提供。项目独立于 3026，
   所以不再引用它的 style.css——那里面 2500 行里只有这几十行是本页用得上的。
   ============================================================ */

/* ===== RESET ===== */
*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }

:root {
  --color-ink:       oklch(0.97 0.005 260);
  --color-ink-dim:   oklch(0.65 0.010 260);
  --color-ink-muted: oklch(0.45 0.015 260);
  --color-surface:   oklch(0.06 0.008 270);
  --color-surface2:  oklch(0.10 0.012 270);
  --color-surface3:  oklch(0.14 0.015 270);
  --color-surface4:  oklch(0.18 0.018 270);
  --color-border:    oklch(0.20 0.020 270);
  --color-accent:    #7c6fdc;
  --color-accent-dim: #5b4ea3;
  --color-glow:      oklch(0.70 0.120 280);
  --color-gold:      #c4a35a;
  --color-gold-dim:  #8b7355;

  --font-display: 'Noto Serif SC', 'EB Garamond', Georgia, 'Times New Roman', serif;
  --font-body: 'Noto Sans SC', -apple-system, 'PingFang SC', 'Microsoft YaHei', sans-serif;
  --font-num: 'EB Garamond', Georgia, serif;

  --space-xs: 0.25rem;
  --space-sm: 0.5rem;
  --space-md: 1rem;
  --space-lg: 2rem;
  --space-xl: 4rem;
  --space-2xl: 8rem;

  --max-width: 720px;
  --transition-fast: 250ms ease-out;

  --z-content: 1;
}

html {
  background-color: #070a18;
  color: var(--color-ink);
  overflow-x: hidden;
}

body {
  font-family: var(--font-body);
  font-size: clamp(0.875rem, 0.85rem + 0.2vw, 1rem);
  line-height: 1.75;
  background:
    radial-gradient(ellipse 700px 500px at 10% 15%, rgba(100,60,200,0.12) 0%, transparent 100%),
    radial-gradient(ellipse 550px 650px at 85% 8%, rgba(60,40,160,0.10) 0%, transparent 100%),
    radial-gradient(ellipse 650px 450px at 80% 75%, rgba(30,50,140,0.10) 0%, transparent 100%),
    linear-gradient(170deg, #070a18 0%, #0a0e20 25%, #0c0f20 50%, #090c16 75%, #070910 100%);
  background-color: #070a18;
  background-attachment: fixed;
  color: var(--color-ink);
  -webkit-font-smoothing: antialiased;
  overflow-x: hidden;
}

a { color: var(--color-accent); }

/* ===== 页头 ===== */
.site-head {
  max-width: 900px;
  margin: 0 auto;
  padding: var(--space-md) var(--space-lg);
  display: flex;
  align-items: baseline;
  gap: var(--space-md);
  flex-wrap: wrap;
}

/* 站名 + 别称竖排：备案名「慧望盘面播报」在上，域名读法「（大A930）」在下。
   别名用括号框住，读作"又称"，不跟备案名平起平坐变成第二个站名。 */
.site-brandwrap {
  display: flex;
  flex-direction: column;
  gap: 0.1rem;
}

.site-brand {
  font-family: var(--font-num);
  font-size: 1.3rem;
  font-weight: 600;
  letter-spacing: 0.06em;
  color: var(--color-gold);
}

.site-alias {
  font-family: var(--font-num);
  font-size: 1.3rem;
  font-weight: 600;
  letter-spacing: 0.06em;
  color: var(--color-gold);
}

.site-tagline {
  font-size: 0.78rem;
  color: var(--color-ink-muted);
  letter-spacing: 0.05em;
}

/* ===== PAGE SYSTEM ===== */
#page-container { position: relative; z-index: var(--z-content); }

.page { display: none; animation: pageIn 0.5s ease-out; }
.page.active { display: block; }

@keyframes pageIn {
  from { opacity: 0; transform: translateY(12px); }
  to { opacity: 1; transform: translateY(0); }
}

/* ===== PAGE HERO ===== */
.page-hero {
  position: relative;
  min-height: 30vh;
  display: flex;
  align-items: center;
  justify-content: center;
  overflow: hidden;
}

.hero-nebula {
  position: absolute;
  inset: 0;
  pointer-events: none;
}

.hero-content {
  position: relative;
  z-index: 1;
  text-align: center;
  padding: var(--space-lg) var(--space-lg) var(--space-md);
  max-width: 700px;
}

.hero-tag {
  display: inline-block;
  font-size: 0.75rem;
  letter-spacing: 0.2em;
  color: var(--color-accent);
  margin-bottom: var(--space-md);
  opacity: 0.8;
  border: 1px solid rgba(124, 111, 220, 0.3);
  padding: 0.3rem 1rem;
}

.hero-title {
  font-family: var(--font-display);
  font-size: clamp(1.5rem, 1.1rem + 1.6vw, 2.4rem);
  font-weight: 600;
  line-height: 1.3;
  margin-bottom: var(--space-md);
  text-wrap: balance;
}

/* 首页标题行里的「大A930」用金色点出来，后面「常念叨 常提醒」保持标题色。 */
.hero-title .hero-alias {
  color: var(--color-gold);
}

.hero-desc {
  color: var(--color-ink-dim);
  font-size: clamp(0.9rem, 0.85rem + 0.2vw, 1.05rem);
  line-height: 1.8;
  max-width: 560px;
  margin: 0 auto;
}

/* ===== PAGE CONTENT ===== */
.page-content { padding: 0 var(--space-lg) var(--space-2xl); }

/* ===== 静态内容页（contact.html / privacy.html）=====
   这两个页面不跑引擎，是纯文字页，所以只需要一套排版规则。
   宽度跟 .site-head 对齐（900px 里收 720px 正文），读起来不散。 */
.doc {
  max-width: 720px;
  margin: 0 auto;
  padding: var(--space-md) var(--space-lg) var(--space-xl);
}

.doc h1 {
  font-family: var(--font-display);
  font-size: clamp(1.4rem, 1.1rem + 1.1vw, 1.9rem);
  font-weight: 600;
  line-height: 1.3;
  margin-bottom: var(--space-xs);
}

.doc-meta {
  color: var(--color-ink-muted);
  font-size: 0.78rem;
  letter-spacing: 0.04em;
  margin-bottom: var(--space-lg);
}

.doc h2 {
  font-family: var(--font-display);
  font-size: 1.05rem;
  font-weight: 600;
  color: var(--color-gold);
  margin: var(--space-lg) 0 var(--space-sm);
}

.doc p { color: var(--color-ink-dim); margin-bottom: var(--space-sm); }
.doc ul { padding-left: 1.2rem; margin-bottom: var(--space-sm); }
.doc li { color: var(--color-ink-dim); margin-bottom: var(--space-xs); }
.doc strong { color: var(--color-ink); font-weight: 600; }

/* 邮箱要显眼：这是"联系我们"那页唯一的目的。 */
.doc-mail {
  font-family: var(--font-num);
  font-size: 1.15rem;
  letter-spacing: 0.02em;
}

.doc-back { margin-top: var(--space-lg); }

/* ===== 文章栏目（/articles/）=====
   列表页和文章页都复用 .doc 的排版，这里只补列表样式和正文段落间距——
   .doc p 原本是小间距，长文里段落挨太近会糊成一片。 */
.doc-article p { margin-bottom: var(--space-md); }

.art-list { list-style: none; padding: 0; margin: 0; }
.art-list li { padding: var(--space-md) 0; border-bottom: 1px solid var(--color-border); }
.art-list li:first-child { padding-top: 0; }
.art-list a {
  color: var(--color-ink);
  text-decoration: none;
  font-family: var(--font-display);
  font-size: 1.02rem;
  font-weight: 600;
  line-height: 1.5;
}
.art-list a:hover { color: var(--color-gold); }
.art-date {
  display: block;
  font-size: 0.75rem;
  color: var(--color-ink-muted);
  letter-spacing: 0.04em;
  margin-top: 0.15rem;
}
.art-excerpt { color: var(--color-ink-dim); font-size: 0.88rem; margin-top: 0.35rem; }

/* ===== 页脚 =====
   宽 900 跟 .site-head 对齐；三个页面（首页/联系/隐私）共用同一份 HTML，
   所以样式放基础层而不是某一页的样式表里。
   备案号下来后要挂在这里并链到 beian.miit.gov.cn —— 位置先留好。 */
.site-foot {
  max-width: 900px;
  margin: 0 auto;
  padding: var(--space-lg) var(--space-lg) var(--space-xl);
  border-top: 1px solid var(--color-border);
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  gap: var(--space-xs) var(--space-sm);
  font-size: 0.78rem;
  color: var(--color-ink-muted);
}

.site-foot a { color: var(--color-ink-dim); text-decoration: none; }
.site-foot a:hover { color: var(--color-gold); }
.site-foot .foot-sep { opacity: 0.4; }

/* ===== 留言 / 建议 =====
   按钮在页头右上角（首页 / 联系页的 .site-head 里那个 #fb-open），浮层 DOM 由
   js/feedback.js 生成。样式必须落在文件里，不能写在元素上——线上 CSP 的 style-src
   没有 'unsafe-inline'，写 style="" 会被拦掉。 */
.site-head .fb-open {
  margin-left: auto;              /* 页头是 flex，这一条把它顶到最右边 */
  align-self: center;
  font-family: var(--font-body);
  font-size: 0.82rem;
  color: var(--color-ink-dim);
  background: var(--color-surface3);
  border: 1px solid var(--color-border);
  border-radius: 6px;
  padding: 0.4rem 0.9rem;
  cursor: pointer;
  transition: all var(--transition-fast);
  letter-spacing: 0.02em;
  white-space: nowrap;
}
.site-head .fb-open:hover {
  color: var(--color-ink);
  border-color: var(--color-accent-dim);
  background: var(--color-surface4);
}
.site-head .fb-open:active { transform: translateY(1px) scale(0.98); background: var(--color-surface2); }

.fb-panel {
  position: fixed;
  inset: 0;
  z-index: 100;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: var(--space-md);
  background: rgba(4, 6, 14, 0.72);
  animation: fbFade 0.18s ease-out;
}
/* 浮层用 display:flex 撑满屏幕，所以 [hidden] 必须自己写死——UA 那条 display:none
   会被这里的 display 覆盖掉。 */
.fb-panel[hidden] { display: none; }
@keyframes fbFade { from { opacity: 0; } to { opacity: 1; } }

.fb-card {
  width: 100%;
  max-width: 460px;
  background: var(--color-surface2);
  border: 1px solid var(--color-border);
  border-radius: 12px;
  padding: var(--space-md);
  box-shadow: 0 18px 60px rgba(0, 0, 0, 0.55);
  animation: fbRise 0.2s ease-out;
}
@keyframes fbRise { from { opacity: 0; transform: translateY(10px); } to { opacity: 1; transform: translateY(0); } }

.fb-head { display: flex; align-items: center; justify-content: space-between; margin-bottom: var(--space-sm); }
.fb-title { font-family: var(--font-display); font-size: 1.05rem; font-weight: 600; color: var(--color-gold); }
.fb-x {
  font-size: 1.25rem;
  line-height: 1;
  color: var(--color-ink-muted);
  background: none;
  border: none;
  border-radius: 6px;
  padding: 0.15rem 0.5rem;
  cursor: pointer;
  transition: all var(--transition-fast);
}
.fb-x:hover { color: var(--color-ink); background: var(--color-surface3); }

.fb-hint { font-size: 0.78rem; color: var(--color-ink-muted); line-height: 1.7; margin-bottom: var(--space-sm); }

/* 建议群二维码：图在站点根目录 /qr-group.jpg。白底 + 细边，深浅色主题下都能扫。 */
.fb-qr { display: flex; flex-direction: column; align-items: center; gap: 0.45rem; margin: 0 0 var(--space-sm); }
.fb-qr-img {
  width: 168px;
  height: 168px;
  padding: 6px;
  background: #fff;
  border: 1px solid var(--color-border);
  border-radius: 8px;
}
.fb-qr-cap { font-size: 0.78rem; color: var(--color-ink-dim); margin: 0; }

.fb-text {
  display: block;
  width: 100%;
  min-height: 120px;
  resize: vertical;
  font-family: var(--font-body);
  font-size: 0.9rem;
  line-height: 1.7;
  color: var(--color-ink);
  background: var(--color-surface);
  border: 1px solid var(--color-border);
  border-radius: 8px;
  padding: 0.6rem 0.75rem;
  transition: border-color var(--transition-fast);
}
.fb-text::placeholder { color: var(--color-ink-muted); }
.fb-text:focus { outline: none; border-color: var(--color-accent-dim); }

.fb-foot { display: flex; align-items: center; justify-content: space-between; margin-top: var(--space-sm); }
.fb-count { font-family: var(--font-num); font-size: 0.72rem; color: var(--color-ink-muted); }

.fb-send {
  font-family: var(--font-body);
  font-size: 0.88rem;
  color: var(--color-ink);
  background: rgba(196, 163, 90, 0.16);
  border: 1px solid var(--color-gold-dim);
  border-radius: 6px;
  padding: 0.5rem 1.4rem;
  cursor: pointer;
  transition: all var(--transition-fast);
}
.fb-send:hover { border-color: var(--color-gold); background: rgba(196, 163, 90, 0.26); }
.fb-send:active { transform: translateY(1px) scale(0.98); }
.fb-send[disabled] { opacity: 0.5; cursor: default; }

.fb-msg { margin-top: var(--space-sm); font-size: 0.82rem; color: var(--color-ink-dim); }
.fb-msg[hidden] { display: none; }
.fb-msg.ok { color: #6fd48a; }
.fb-msg.warn { color: #e0c07a; }