/* ==========================================================================
   东河所微应用 · 通用样式（移动端优先）
   配色 / 间距 / 圆角 统一在 :root 里改，一处生效
   ========================================================================== */
:root{
  --bg:#f4f7fb;
  --ink:#0f2035;
  --ink-2:#33465e;
  --muted:#6b7d94;
  --line:#e7edf6;
  --card:#ffffff;
  --brand:#0f3fb0;
  --brand-2:#1b6ef3;
  --brand-3:#17a8d8;
  --radius:16px;
  --shadow:0 6px 20px rgba(15,42,90,.07);
  --shadow-lg:0 14px 34px rgba(15,42,90,.12);
  --safe-t:env(safe-area-inset-top,0px);
  --safe-b:env(safe-area-inset-bottom,0px);
}
*,*::before,*::after{box-sizing:border-box;-webkit-tap-highlight-color:transparent;}
html,body{margin:0;padding:0;}
body{
  background:var(--bg);
  color:var(--ink);
  font-family:-apple-system,BlinkMacSystemFont,"PingFang SC","HarmonyOS Sans SC","Microsoft YaHei","Helvetica Neue",Arial,sans-serif;
  font-size:16px;
  line-height:1.6;
  -webkit-font-smoothing:antialiased;
  overflow-x:hidden;
}
a{color:inherit;text-decoration:none;}
img{max-width:100%;display:block;}

/* ---------------------------------------------------------------- 首页头部 */
.hero{
  position:relative;
  padding:calc(20px + var(--safe-t)) 20px 42px;
  background:linear-gradient(140deg,#0b2b7e 0%,#1652d6 48%,#17a8d8 100%);
  color:#fff;
  border-radius:0 0 26px 26px;
  overflow:hidden;
}
.hero-pattern{
  position:absolute;inset:0;
  background-image:radial-gradient(rgba(255,255,255,.16) 1px,transparent 1px);
  background-size:18px 18px;
  opacity:.55;
  mask-image:linear-gradient(180deg,rgba(0,0,0,.9),transparent 78%);
  -webkit-mask-image:linear-gradient(180deg,rgba(0,0,0,.9),transparent 78%);
}
.hero-top{position:relative;display:flex;align-items:flex-start;justify-content:space-between;gap:12px;}
.brand{display:flex;align-items:center;gap:12px;min-width:0;}
.brand-mark{
  flex:0 0 auto;width:50px;height:50px;border-radius:15px;
  display:grid;place-items:center;
  background:rgba(255,255,255,.16);
  border:1px solid rgba(255,255,255,.34);
  font-size:15px;font-weight:700;letter-spacing:.5px;
  backdrop-filter:blur(6px);
}
.brand-text{min-width:0;}
.brand-text h1{
  margin:0;font-size:23px;font-weight:800;letter-spacing:.6px;
  text-shadow:0 2px 10px rgba(0,20,60,.22);
}
.brand-text p{margin:3px 0 0;font-size:12.5px;opacity:.9;letter-spacing:.3px;}
.hero-badge{
  flex:0 0 auto;
  font-size:11px;padding:4px 10px;border-radius:999px;
  background:rgba(255,255,255,.18);border:1px solid rgba(255,255,255,.35);
  white-space:nowrap;
}
.hero-stats{
  position:relative;display:flex;gap:10px;margin-top:22px;
}
.hstat{
  flex:1;text-align:center;padding:10px 6px;border-radius:14px;
  background:rgba(255,255,255,.13);
  border:1px solid rgba(255,255,255,.22);
}
.hstat b{display:block;font-size:18px;font-weight:800;line-height:1.2;}
.hstat span{font-size:11px;opacity:.85;}
.hero-wave{position:absolute;left:0;right:0;bottom:-1px;height:38px;line-height:0;}
.hero-wave svg{width:100%;height:100%;display:block;}

/* ------------------------------------------------------------------ 首页主体 */
.wrap{padding:0 16px 28px;}
.section-label{
  display:flex;align-items:center;gap:8px;
  margin:20px 4px 12px;font-size:16px;font-weight:700;color:var(--ink);
}
.section-label .bar{width:4px;height:17px;border-radius:3px;background:linear-gradient(180deg,var(--brand-2),var(--brand-3));}
.section-label em{margin-left:auto;font-style:normal;font-size:12px;font-weight:400;color:var(--muted);}

.cards{display:flex;flex-direction:column;gap:12px;}
.mcard{
  position:relative;display:flex;align-items:center;gap:14px;
  padding:15px 14px;
  background:var(--card);border:1px solid var(--line);border-radius:var(--radius);
  box-shadow:var(--shadow);
  transition:transform .16s ease,box-shadow .16s ease;
  opacity:0;transform:translateY(10px);
  animation:fadeUp .45s ease forwards;
}
.mcard:active{transform:scale(.982);box-shadow:var(--shadow-lg);}
.mcard .tile{
  flex:0 0 auto;width:50px;height:50px;border-radius:15px;
  display:grid;place-items:center;
}
.mcard .tile svg{width:26px;height:26px;}
.mcard .body{min-width:0;flex:1;}
.mcard .body h3{margin:0;font-size:16.5px;font-weight:700;letter-spacing:.2px;}
.mcard .body p{
  margin:3px 0 0;font-size:12.5px;color:var(--muted);
  overflow:hidden;text-overflow:ellipsis;white-space:nowrap;
}
.mcard .meta{display:flex;align-items:center;gap:6px;margin-top:7px;}
.chip{
  font-size:10.5px;padding:2px 8px;border-radius:999px;
  border:1px solid currentColor;opacity:.85;
}
.chev{flex:0 0 auto;width:18px;height:18px;color:#c3cddb;}
@keyframes fadeUp{to{opacity:1;transform:none;}}

.notice{
  display:flex;gap:9px;align-items:flex-start;
  margin:18px 2px 0;padding:12px 13px;border-radius:14px;
  background:#fffaf0;border:1px solid #ffe6b8;color:#8a5a00;font-size:12.5px;line-height:1.55;
}
.notice .ni{flex:0 0 auto;width:16px;height:16px;fill:#e0a02a;margin-top:2px;}

.foot{text-align:center;margin:26px 0 6px;color:var(--muted);font-size:12px;}
.foot p{margin:2px 0;}
.foot .dim{opacity:.75;font-size:11px;}
.empty{text-align:center;color:var(--muted);font-size:13px;padding:24px 0;}

/* -------------------------------------------------------------- 子页面结构 */
.sub-head{
  position:sticky;top:0;z-index:20;
  display:flex;align-items:center;gap:10px;
  padding:calc(10px + var(--safe-t)) 14px 10px;
  color:#fff;
  background:linear-gradient(135deg,var(--brand),var(--brand-3));
  box-shadow:0 4px 16px rgba(15,42,90,.14);
}
.sub-head .back{
  flex:0 0 auto;width:34px;height:34px;border-radius:11px;
  display:grid;place-items:center;
  background:rgba(255,255,255,.18);border:1px solid rgba(255,255,255,.3);
}
.sub-head .back svg{width:18px;height:18px;fill:#fff;}
.sub-head .tt{min-width:0;}
.sub-head .tt h1{margin:0;font-size:17px;font-weight:700;letter-spacing:.4px;}
.sub-head .tt p{margin:1px 0 0;font-size:11.5px;opacity:.88;}

.sub-body{padding:16px 16px calc(30px + var(--safe-b));}

.panel{
  background:var(--card);border:1px solid var(--line);border-radius:var(--radius);
  padding:15px 15px;box-shadow:var(--shadow);margin-bottom:14px;
  opacity:0;transform:translateY(10px);
  animation:fadeUp .45s ease forwards;
}
.panel h2{
  margin:0 0 9px;font-size:15.5px;font-weight:700;display:flex;align-items:center;gap:8px;
}
.panel h2::before{
  content:"";width:3px;height:15px;border-radius:2px;
  background:var(--accent,var(--brand-2));
}
.panel .txt{font-size:14px;color:var(--ink-2);line-height:1.75;}
.panel .txt p{margin:0 0 8px;}
.panel .txt p:last-child{margin-bottom:0;}

.grid2{display:grid;grid-template-columns:repeat(2,1fr);gap:10px;}
.grid3{display:grid;grid-template-columns:repeat(3,1fr);gap:10px;}
.stat{
  background:var(--bg);border:1px solid var(--line);border-radius:13px;
  padding:11px 10px;text-align:center;
}
.stat b{display:block;font-size:19px;font-weight:800;color:var(--accent,var(--brand-2));line-height:1.25;word-break:break-all;}
.stat span{font-size:11.5px;color:var(--muted);}

.tbl-wrap{overflow-x:auto;-webkit-overflow-scrolling:touch;border-radius:12px;border:1px solid var(--line);}
table{border-collapse:collapse;width:100%;min-width:100%;font-size:13px;background:#fff;}
th,td{padding:9px 11px;text-align:left;border-bottom:1px solid var(--line);white-space:nowrap;}
th{background:#f6f9fe;color:var(--ink-2);font-weight:600;font-size:12.5px;}
tr:last-child td{border-bottom:none;}
tbody tr:active{background:#f8fbff;}

.list{list-style:none;margin:0;padding:0;}
.list li{
  display:flex;gap:10px;align-items:flex-start;
  padding:9px 0;border-bottom:1px dashed var(--line);font-size:13.8px;color:var(--ink-2);
}
.list li:last-child{border-bottom:none;}
.list li .dot{
  flex:0 0 auto;width:7px;height:7px;border-radius:50%;margin-top:8px;
  background:var(--accent,var(--brand-2));
}
.list li .li-body{min-width:0;flex:1;}
.list li .li-body b{display:block;font-size:14.2px;color:var(--ink);font-weight:600;}
.list li .li-body span{font-size:12.5px;color:var(--muted);}

.timeline{position:relative;margin:2px 0 0;padding-left:20px;}
.timeline::before{
  content:"";position:absolute;left:5px;top:6px;bottom:6px;width:2px;
  background:linear-gradient(180deg,var(--accent,var(--brand-2)),rgba(23,168,216,.25));
  border-radius:2px;
}
.tl-item{position:relative;padding:0 0 16px;}
.tl-item:last-child{padding-bottom:0;}
.tl-item::before{
  content:"";position:absolute;left:-19px;top:6px;width:10px;height:10px;border-radius:50%;
  background:#fff;border:2.5px solid var(--accent,var(--brand-2));box-shadow:0 0 0 3px rgba(27,110,243,.1);
}
.tl-item .yr{font-size:12.5px;font-weight:700;color:var(--accent,var(--brand-2));letter-spacing:.4px;}
.tl-item h4{margin:2px 0 3px;font-size:14.5px;font-weight:700;}
.tl-item p{margin:0;color:var(--ink-2);font-size:13.5px;}

.gallery{display:grid;grid-template-columns:repeat(2,1fr);gap:10px;}
.gitem{border-radius:12px;overflow:hidden;border:1px solid var(--line);background:#f7fafd;}
.gitem .ph{aspect-ratio:4/3;display:grid;place-items:center;color:#a9b7c9;font-size:12px;}
.gitem figcaption{padding:7px 9px;font-size:12px;color:var(--muted);background:#fff;}

.todo{
  display:flex;flex-direction:column;align-items:center;gap:6px;
  padding:26px 16px;text-align:center;
  border:1.5px dashed #cfdcee;border-radius:14px;background:#fbfdff;color:var(--muted);
}
.todo svg{width:30px;height:30px;fill:#b9c8dc;}
.todo b{color:var(--ink-2);font-size:14px;font-weight:600;}
.todo span{font-size:12.5px;}

.crumb{margin:0 2px 12px;font-size:12px;color:var(--muted);}
.crumb a{color:var(--brand-2);}

/* 系统「减弱动态效果」时不做入场动画，避免卡片停留在透明状态 */
@media (prefers-reduced-motion: reduce){
  .mcard,.panel{animation:none !important;opacity:1 !important;transform:none !important;}
}