/* ========== 全息道德经 · 公共样式(全页面共用) ========== */

/* 设计令牌 + 自适应缩放单位 */
:root{
  --bg-deep:   #0B1226;
  --orange:    #F3A16F;
  --gold:      #E8C97E;
  --cream:     #ECE4D3;
  --muted:     #B3A78F;   /* 主界面描述文字 */
  --muted-2:   #A79B85;   /* 说唱页说明小字/章数/箭头 */
  --teal:      #6FE7DC;
  --tab-gray:  #8B8680;
  --card-bg:   rgba(22,35,74,.55);      /* 主界面卡片底(墨蓝玻璃) */
  --card-edge: rgba(232,201,126,.28);
  --glass-bg:  rgba(236,228,211,.06);   /* 暖灰玻璃底(说唱页) */
  --glass-edge:rgba(236,228,211,.14);
  --font-title:'Foseti','FosetiFull','Kaiti SC','KaiTi','STKaiti','DFKai-SB',serif;
  --font-body: 'Youran','YouranFallback','Kaiti SC','KaiTi','STKaiti','DFKai-SB',serif;
  --font-sans: -apple-system,BlinkMacSystemFont,'Segoe UI','PingFang SC','Microsoft YaHei',sans-serif;
  /* 自适应缩放单位:390 基准,430 封顶,360 以下保底 0.923px */
  --u: max(calc(min(100vw, 430px) / 390), 0.923px);
}
@font-face{
  font-family:'Foseti';
  src:url('https://zaz-ddj.oss-cn-shanghai.aliyuncs.com/assets/fonts/foseti.woff2') format('woff2');
  font-display:swap;
}
/* 佛系体缺字兜底:子集没有的字(如鲁棒)跌到全字库版,同字体风格 */
@font-face{
  font-family:'FosetiFull';
  src:url('https://zaz-ddj.oss-cn-shanghai.aliyuncs.com/assets/fonts/foseti-full.woff2') format('woff2');
  font-display:swap;
}
@font-face{
  font-family:'Youran';
  src:url('https://zaz-ddj.oss-cn-shanghai.aliyuncs.com/assets/fonts/youran.woff2') format('woff2');
  font-display:swap;
}
/* 悠然缺字兜底:Wenkai缩小到视觉等大(Youran字面率~0.7,Wenkai默认1.0) */
@font-face{
  font-family:'YouranFallback';
  src:url('https://zaz-ddj.oss-cn-shanghai.aliyuncs.com/assets/fonts/wenkai.woff2') format('woff2');
  font-display:swap;
  size-adjust:70%;
}
/* 霞鹜文楷:副标题/密钥弹窗提示行等,全站注册(子集字符由 update_font_subsets.py 维护) */
@font-face{
  font-family:'Wenkai';
  src:url('https://zaz-ddj.oss-cn-shanghai.aliyuncs.com/assets/fonts/wenkai.woff2') format('woff2');
  font-display:swap;
}

*{margin:0;padding:0;box-sizing:border-box;-webkit-tap-highlight-color:transparent}
html,body{height:100%}
body{
  background:#05070d;
  font-family:var(--font-body);
  color:var(--cream);
  overflow:hidden;
}

/* 手机视窗(桌面居中,移动端全屏) */
.app{
  position:relative;
  max-width:430px;
  height:100vh;
  height:100dvh;
  margin:0 auto;
  background:var(--bg-deep);
  display:flex;
  flex-direction:column;
  overflow:hidden;
}
@media (min-width:500px){
  .app{
    border-left:1px solid rgba(232,201,126,.14);
    border-right:1px solid rgba(232,201,126,.14);
    box-shadow:0 0 80px rgba(0,0,0,.8);
  }
}

/* 背景图:固定不随滚动(页面可用 .bg 覆盖实现降透明度) */
.bg{
  position:absolute;
  inset:0;
  z-index:0;
  background:url('https://zaz-ddj.oss-cn-shanghai.aliyuncs.com/assets/img/cover_dark.webp') center/cover no-repeat,var(--bg-deep);
}

/* 状态栏(沉浸式覆盖,不占布局) */
.statusbar{
  position:absolute;
  top:0;left:0;right:0;
  z-index:10;
  height:calc(44 * var(--u));
  display:flex;
  align-items:center;
  justify-content:space-between;
  padding:0 calc(26 * var(--u)) 0 calc(30 * var(--u));
  font-family:var(--font-sans);
  font-size:max(calc(15 * var(--u)), 12px);
  font-weight:600;
  color:var(--cream);
  letter-spacing:.2px;
  pointer-events:none;
}
.status-icons{display:flex;align-items:center;gap:calc(6 * var(--u))}

/* 内容滚动区 */
.content{
  position:relative;
  z-index:1;
  flex:1;
  overflow-y:auto;
  overscroll-behavior:contain;
  scrollbar-width:none;
}
.content::-webkit-scrollbar{display:none}
.content-inner{
  min-height:100%;
  display:flex;
  flex-direction:column;
}
.spacer{flex:1;min-height:calc(28 * var(--u))}

/* Footer 固定底部(默认灰,无选中态) */
.footer{
  position:relative;
  z-index:2;
  flex:none;
  background:rgba(10,16,32,.72);
  -webkit-backdrop-filter:blur(14px);
  backdrop-filter:blur(14px);
  border-top:1px solid rgba(232,201,126,.18);
  padding:calc(9 * var(--u)) calc(10 * var(--u)) calc(calc(6 * var(--u)) + env(safe-area-inset-bottom,0px));
}
.tabs{
  display:grid;
  grid-template-columns:repeat(4,1fr);
  height:calc(50 * var(--u));
}
.tab{
  display:flex;
  flex-direction:column;
  align-items:center;
  justify-content:center;
  gap:calc(5 * var(--u));
  color:var(--tab-gray);
  cursor:pointer;
  user-select:none;
}
.tab svg{display:block}
.tab-icon *{
  stroke:var(--tab-gray);
  transition:stroke .25s ease;
}
.tab.active{
  color:var(--orange);
}
.tab.active .tab-icon *{
  stroke:var(--orange);
}
.tab.active .tab-label{
  color:var(--orange);
}
.tab-label{
  font-family:var(--font-body);
  font-size:max(calc(14 * var(--u)), 10px);
  color:var(--tab-gray);
  letter-spacing:calc(2 * var(--u));
  padding-left:calc(2 * var(--u));
  line-height:1;
  white-space:nowrap;
}
.tab.is-pressed{opacity:.7}
.home-indicator{
  width:calc(128 * var(--u));height:calc(5 * var(--u));
  border-radius:999px;
  background:rgba(236,228,211,.32);
  margin:calc(5 * var(--u)) auto 0;
}

/* FOUT 门控:字体就绪前隐藏整页内容(fonts-gate JS 加 .fonts-ready 后显示) */
body:not(.fonts-ready) .app{visibility:hidden}
body.fonts-ready .app{animation:fadein .35s ease}
@keyframes fadein{from{opacity:0}to{opacity:1}}

/* Youran 墨迹垂直居中补偿:内层 i.vc + translateY(-0.175em)
   Youran 字体墨迹在 em 框内偏下 17.5%(canvas 实测),所有胶囊/按钮/标签需此补偿 */
.vc{display:inline-block;font-style:normal;transform:translateY(-0.175em)}

/* 密钥弹窗输入占位符:浏览器默认是冷灰#757575,统一为暖褐 */
#keySeg1::placeholder,#keySeg2::placeholder,#keySeg3::placeholder{
  color:rgba(51,41,26,.35);
}