/* ===========================================================
   西宁市"三新"领域党建智慧平台 · 小程序设计稿
   核心样式：设计令牌 / 手机框 / 导航 / 子页覆盖层 / 高原纹样
   主题：党旗红 × 青海湖蓝 × 高原金 × 青稞绿 × 丁香紫
   =========================================================== */
:root{
  /* 主色 */
  --djh:#C1272D;      /* 党旗红 */
  --dj2:#9E1B24;      /* 深党旗红 */
  --dj3:#E0514F;      /* 浅党旗红 */
  --dj-soft:#FBEBEC;
  /* 青海湖蓝 */
  --qhh:#2B6B8F;
  --qh2:#4E93B8;
  --qh3:#7FB4CE;
  --qh-soft:#EAF3F8;
  /* 高原金 */
  --gyj:#C9A227;
  --gyj2:#E3C462;
  --gyj-soft:#FBF5E2;
  /* 青稞绿 */
  --qkl:#6E8B5A;
  --qkl-soft:#EFF4EA;
  /* 丁香紫（西宁市花） */
  --dxz:#8B6FA8;
  --dxz-soft:#F2EEF8;
  /* 湟水墨 · 文字层级 */
  --xs:#44515C;
  --xs2:#6E7A85;
  --xs3:#9AA5AE;
  /* 底色 */
  --xz:#F7F5F1;       /* 米白 */
  --xz2:#EFEBE4;
  --bd:#E6E1D9;
  --white:#fff;
  /* 圆角 / 阴影 */
  --r-s:8px; --r-m:14px; --r-l:20px; --r-xl:26px;
  --sh-s:0 2px 8px rgba(68,81,92,.06);
  --sh-m:0 6px 18px rgba(68,81,92,.10);
  --sh-l:0 12px 34px rgba(68,81,92,.16);
  /* 字体 */
  --fs:'Noto Serif SC','Songti SC',serif;
  --fn:'Noto Sans SC','PingFang SC','Microsoft YaHei',sans-serif;
}
*{margin:0;padding:0;box-sizing:border-box;-webkit-tap-highlight-color:transparent}
html,body{height:100%}
body{
  font-family:var(--fn);color:var(--xs);background:var(--xz);
  background-image:radial-gradient(circle at 50% 0%,#3B4751 0%,#242C33 55%,#151A1F 100%);
  display:flex;align-items:center;justify-content:center;overflow-x:hidden;
  -webkit-font-smoothing:antialiased;
}

/* ---------- 展示台 + 左侧说明栏 ---------- */
.stage{display:flex;gap:46px;align-items:center;justify-content:center;padding:40px 24px;width:100%}
.info-panel{width:330px;color:#DCE3E8}
.info-panel .eyebrow{font-size:10px;letter-spacing:4px;color:var(--gyj2);margin-bottom:10px}
.info-panel h1{font-family:var(--fs);font-size:25px;line-height:1.4;color:#fff;font-weight:600}
.info-panel .lead{font-size:12.5px;line-height:1.9;color:#9FB0BB;margin:14px 0 18px}
.info-panel .lead b{color:#E8DFC4}
.mods{display:grid;grid-template-columns:1fr 1fr;gap:7px}
.mod{font-size:11.5px;line-height:1.4;padding:8px 9px;border-radius:10px;background:rgba(255,255,255,.055);border:1px solid rgba(255,255,255,.09);cursor:pointer;color:#C9D6DE;transition:.18s;min-height:48px;display:flex;flex-direction:column;justify-content:center}
.mod:hover{background:rgba(193,39,45,.2);border-color:rgba(193,39,45,.55);color:#fff}
.mod i{display:inline-block;font-style:normal;font-size:9px;color:var(--gyj2);margin-right:4px}
.info-panel .foot{font-size:11px;color:#7C8D99;margin-top:16px;line-height:1.7;border-top:1px solid rgba(255,255,255,.1);padding-top:12px}

/* ---------- 手机框 ---------- */
.phone{
  position:relative;width:430px;height:min(920px,94vh);flex:0 0 auto;
  background:var(--xz);border-radius:46px;overflow:hidden;
  box-shadow:0 40px 90px rgba(0,0,0,.55),0 0 0 11px #1C2228,0 0 0 13px #39424A;
}
.notch{position:absolute;top:0;left:50%;transform:translateX(-50%);width:132px;height:26px;background:#1C2228;border-radius:0 0 18px 18px;z-index:90}
.status-bar{position:absolute;top:0;left:0;right:0;height:44px;display:flex;align-items:center;justify-content:space-between;padding:0 28px;font-size:12px;font-weight:600;color:var(--xs);z-index:85;letter-spacing:.3px}
.status-bar .sb-r{font-size:10px;letter-spacing:1px;color:var(--xs2)}
.app-view{position:absolute;top:44px;left:0;right:0;bottom:0;overflow:hidden}

/* ---------- 页面容器（visibility 显隐，避免 PC 端两页同屏） ---------- */
.page{
  position:absolute;inset:0;overflow-y:auto;overflow-x:hidden;
  padding:0 14px 104px;visibility:hidden;opacity:0;transition:opacity .22s ease;
  -webkit-overflow-scrolling:touch;
}
.page.active{visibility:visible;opacity:1}
.page::-webkit-scrollbar,.sp-content::-webkit-scrollbar{width:0;height:0}

/* ---------- 底部导航 ---------- */
.bottom-nav{
  position:absolute;left:0;right:0;bottom:0;height:70px;z-index:74;
  background:rgba(255,255,255,.97);backdrop-filter:blur(18px);-webkit-backdrop-filter:blur(18px);
  border-top:1px solid var(--bd);display:flex;align-items:flex-start;padding-top:8px;
  box-shadow:0 -4px 16px rgba(68,81,92,.06);
}
.nav-item{flex:1;display:flex;flex-direction:column;align-items:center;gap:3px;font-size:10px;color:var(--xs3);cursor:pointer;position:relative;padding-top:9px;transition:color .18s}
.nav-item svg{width:22px;height:22px;fill:currentColor;opacity:.85}
.nav-item span{letter-spacing:.5px}
.nav-item.active{color:var(--djh);font-weight:600}
.nav-item.active svg{opacity:1}
.nav-item.active::before{content:'';position:absolute;top:0;width:18px;height:3px;border-radius:3px;background:var(--djh)}
.home-bar{position:absolute;bottom:7px;left:50%;transform:translateX(-50%);width:136px;height:5px;border-radius:3px;background:#1C2228;opacity:.25;z-index:70}

/* ---------- 子页覆盖层 ---------- */
.subpage-overlay{
  position:absolute;inset:0;background:var(--xz);z-index:80;
  display:flex;flex-direction:column;
  overflow-y:auto;-webkit-overflow-scrolling:touch;
  visibility:hidden;opacity:0;transition:opacity .24s ease;
}
.subpage-overlay.show{visibility:visible;opacity:1}
.sp-nav{display:flex;align-items:center;gap:10px;padding:11px 14px;background:#fff;border-bottom:1px solid var(--bd);flex:0 0 auto}
.sp-back{width:30px;height:30px;border-radius:50%;border:none;background:var(--xz2);color:var(--xs);font-size:19px;line-height:26px;text-align:center;cursor:pointer;flex:0 0 auto}
.sp-titles{flex:1;min-width:0}
.sp-titles span{display:block;font-size:15px;font-weight:600;color:var(--xs);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.sp-titles em{display:block;font-style:normal;font-size:9px;color:var(--xs3);letter-spacing:3px;margin-top:2px}
.sp-dot{font-size:13px;color:var(--xs3);cursor:pointer;padding:0 4px}
.sp-content{flex:0 0 auto;overflow:visible;padding:0}
.sp-loading{padding:60px 0;text-align:center;font-size:12px;color:var(--xs3);letter-spacing:2px}

/* ---------- 高原纹样底纹（::before 低透明度） ---------- */
.pat{position:relative}
.pat::before{content:'';position:absolute;inset:0;pointer-events:none;opacity:.075;background-repeat:repeat;z-index:0}
.pat>*{position:relative;z-index:1}
/* 高原山脊 */
.pat-plateau::before{background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='130' height='64'%3E%3Cpath d='M0 64L32 22L62 46L92 10L130 64Z' fill='none' stroke='%232B6B8F' stroke-width='1.3'/%3E%3C/svg%3E")}
/* 青海湖波纹 */
.pat-lake::before{background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='96' height='30'%3E%3Cpath d='M0 14Q12 4 24 14T48 14T72 14T96 14M0 25Q12 15 24 25T48 25T72 25T96 25' fill='none' stroke='%234E93B8' stroke-width='1'/%3E%3C/svg%3E")}
/* 丁香花（西宁市花） */
.pat-lilac::before{background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='58' height='58'%3E%3Cpath d='M15 9Q23 3 31 9Q31 19 23 23Q15 19 15 9Z' fill='none' stroke='%238B6FA8' stroke-width='.9'/%3E%3Ccircle cx='43' cy='42' r='3.4' fill='none' stroke='%238B6FA8' stroke-width='.9'/%3E%3C/svg%3E")}
/* 青稞穗 */
.pat-barley::before{background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='42' height='50'%3E%3Cline x1='21' y1='0' x2='21' y2='50' stroke='%236E8B5A' stroke-width='1'/%3E%3Cpath d='M21 13Q13 17 11 25M21 13Q29 17 31 25M21 28Q13 32 11 40M21 28Q29 32 31 40' fill='none' stroke='%236E8B5A' stroke-width='.9'/%3E%3C/svg%3E")}
/* 藏式回纹 */
.pat-knot::before{background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='40' height='40'%3E%3Cpath d='M6 6h28v28H6zM14 14h20v20H14z' fill='none' stroke='%23C9A227' stroke-width='1.1'/%3E%3C/svg%3E")}
/* 唐蕃古道经幡带 */
.pat-scroll::before{background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='64' height='26'%3E%3Cpath d='M0 5h64M0 13h64M0 21h64' stroke='%23C1272D' stroke-width='.9'/%3E%3Cpath d='M12 0v26M34 0v26M56 0v26' stroke='%23C9A227' stroke-width='.7'/%3E%3C/svg%3E")}

/* ---------- 排版 / 通用 ---------- */
.serif{font-family:var(--fs)}
.hint{font-size:11px;color:var(--xs3);line-height:1.7}
.divider{height:1px;background:var(--bd);margin:12px 0}
.nowrap{white-space:nowrap}
.c-red{color:var(--djh)}.c-blue{color:var(--qhh)}.c-gold{color:var(--gyj)}.c-green{color:var(--qkl)}.c-purple{color:var(--dxz)}
.pat>*{--x:0}

/* ---------- 动画 ---------- */
@keyframes fadeUp{from{opacity:0;transform:translateY(10px)}to{opacity:1;transform:none}}
@keyframes pulse{0%,100%{transform:scale(1);opacity:1}50%{transform:scale(1.06);opacity:.85}}
@keyframes typing{0%,60%,100%{transform:translateY(0);opacity:.4}30%{transform:translateY(-5px);opacity:1}}
.fade-up{animation:fadeUp .4s ease both}
.fade-up.d1{animation-delay:.06s}
.fade-up.d2{animation-delay:.12s}
.fade-up.d3{animation-delay:.18s}

/* ---------- 移动端全屏 ---------- */
@media (max-width:1080px){.info-panel{display:none}}
@media (max-width:470px){
  body{background:var(--xz);display:block}
  .stage{padding:0;gap:0}
  .phone{width:100%;height:100vh;border-radius:0;box-shadow:none}
  .notch{display:none}
  .status-bar{display:none}
  .app-view{top:0}
  .home-bar{display:none}
}