/* =========================================================
   考研总站 · 冲刺终端 —— 样式
   主题概念：「T-MINUS 冲刺记分牌」× 复古工程图纸
   · 浅色 = 米纸图纸（延续总站 #F5F0E4 纸面 / #1D2637 墨线 / #C2402F 朱红）
   · 深色 = 夜航晒图蓝图（prefers-color-scheme 自动切换）
   · 动画只用 transform / opacity，全部尊重 prefers-reduced-motion
   · 零外部依赖：系统字体栈，无任何外链资源
   ========================================================= */

/* ---------- 变量：浅色 = 白图纸 ---------- */
:root{
  color-scheme: light dark;
  --paper:#F5F0E4;            /* 纸面 */
  --card:#FBF7ED;             /* 卡面 */
  --ink:#1D2637;              /* 墨（与总站一致） */
  --ink-2:#49566E;            /* 次级墨 */
  --ink-3:#8A93A5;            /* 弱化墨：仅限纯装饰元素（.cross / .sub-sep）；信息性文字一律用 --ink-2（AA 4.5:1） */
  --line:#1D2637;             /* 图线 */
  --line-soft:rgba(29,38,55,.30);
  --grid:rgba(29,38,55,.055);
  --grid-major:rgba(29,38,55,.10);
  --verm:#C2402F;             /* 朱红（与总站一致） */
  --verm-2:#8F2A1E;
  --ok:#2F7D46;               /* 状态点：在线 */
  --bad:#A83A28;              /* 状态点：离线 */
  --mute:#8A93A5;             /* 状态点：未检测 */
  --shadow:rgba(29,38,55,.20);
  --serif:Palatino,"Palatino Linotype","Times New Roman","Source Han Serif SC","Noto Serif SC","Songti SC",SimSun,serif;
  --sans:"Segoe UI","PingFang SC","Hiragino Sans GB","Microsoft YaHei",system-ui,sans-serif;
  --mono:ui-monospace,"SF Mono","Cascadia Mono",Consolas,"Courier New",monospace;
}

/* ---------- 深色 = 夜航蓝图 ---------- */
@media (prefers-color-scheme: dark){
  :root{
    --paper:#0D1822; --card:#122636;
    --ink:#DCE8EE; --ink-2:#9FB2BC; --ink-3:#64798A;
    --line:#C9D9E2; --line-soft:rgba(201,217,226,.32);
    --grid:rgba(150,195,225,.06); --grid-major:rgba(150,195,225,.12);
    --verm:#FF7A5C; --verm-2:#FFA38E;
    --ok:#4FC38A; --bad:#FF7A5C; --mute:#5F7684;
    --shadow:rgba(0,0,0,.55);
  }
}

/* ---------- 基础 ---------- */
*,*::before,*::after{ box-sizing:border-box; }
html{ font-size:16px; -webkit-text-size-adjust:100%; }   /* 正文基准 16px */
body{
  margin:0; min-height:100vh;
  font-family:var(--sans); font-size:1rem; line-height:1.6;
  color:var(--ink); background:var(--paper);
  overscroll-behavior-y:contain;                 /* 防下拉误触刷新 */
  -webkit-tap-highlight-color:transparent;
}
/* 图纸网格底（固定装饰层，不随滚动） */
body::before{
  content:""; position:fixed; inset:0; z-index:-1; pointer-events:none;
  background:
    repeating-linear-gradient(0deg,  var(--grid-major) 0 1px, transparent 1px 140px),
    repeating-linear-gradient(90deg, var(--grid-major) 0 1px, transparent 1px 140px),
    repeating-linear-gradient(0deg,  var(--grid) 0 1px, transparent 1px 28px),
    repeating-linear-gradient(90deg, var(--grid) 0 1px, transparent 1px 28px);
}
a{ color:inherit; }
a:focus-visible{ outline:3px solid var(--verm); outline-offset:3px; }
::selection{ background:var(--verm); color:#FFF6EC; }
a,button,.toast{ touch-action:manipulation; }    /* 去双击缩放延迟，防误触 */

/* ---------- 固定图框 + 四角十字规线（纯装饰） ---------- */
.sheet-frame{
  position:fixed; z-index:50; pointer-events:none;
  border:1.5px solid var(--line-soft);
  /* 刘海屏：图框让出 safe-area */
  inset:
    calc(8px + env(safe-area-inset-top, 0px))
    calc(8px + env(safe-area-inset-right, 0px))
    calc(8px + env(safe-area-inset-bottom, 0px))
    calc(8px + env(safe-area-inset-left, 0px));
}
.cross{ position:absolute; width:14px; height:14px; opacity:.7; }
.cross::before,.cross::after{ content:""; position:absolute; background:var(--ink-3); }
.cross::before{ left:0; right:0; top:6px; height:1.5px; }
.cross::after{ top:0; bottom:0; left:6px; width:1.5px; }
.cross--tl{ left:-7px; top:-7px; }  .cross--tr{ right:-7px; top:-7px; }
.cross--bl{ left:-7px; bottom:-7px; } .cross--br{ right:-7px; bottom:-7px; }

/* ---------- 版心：safe-area 让出刘海与手势条 ---------- */
.wrap{
  max-width:760px; margin:0 auto;
  padding:
    calc(26px + env(safe-area-inset-top, 0px))
    calc(20px + env(safe-area-inset-right, 0px))
    calc(34px + env(safe-area-inset-bottom, 0px))
    calc(20px + env(safe-area-inset-left, 0px));
}

/* ---------- 头部 ---------- */
.kicker{ margin:0 0 10px; font-family:var(--mono); font-size:.72rem; font-weight:600; letter-spacing:.32em; color:var(--verm); }
.title{
  margin:0; font-family:var(--serif); font-weight:700;
  font-size:clamp(2.2rem, 9vw, 3.2rem); line-height:1.15; letter-spacing:.08em;
}
.title::after{ content:""; display:block; width:56px; height:5px; margin-top:10px; background:var(--verm); }
.sub{ margin:12px 0 0; color:var(--ink-2); font-size:.92rem; letter-spacing:.06em; }
.sub-sep{ color:var(--ink-3); margin:0 8px; }

/* ---------- 倒计时记分牌 ---------- */
.hero{
  position:relative; margin-top:26px; padding:16px 18px 18px;
  background:var(--card); border:2px solid var(--line);
  box-shadow:6px 6px 0 var(--shadow);
}
.hero > *{ position:relative; z-index:1; }
.hero::after{ content:""; position:absolute; inset:5px; border:1px solid var(--line-soft); pointer-events:none; }
.hero-top{ display:flex; justify-content:space-between; align-items:center; gap:10px; flex-wrap:wrap; }
.hero-tag{
  font-family:var(--mono); font-size:.72rem; font-weight:700; letter-spacing:.22em;
  color:var(--paper); background:var(--verm); padding:4px 9px 3px;
}
.hero-tag--end{ background:var(--ink); }
.hero-date{ font-family:var(--mono); font-size:.76rem; color:var(--ink-2); letter-spacing:.12em; }
.hero-label{ margin:14px 0 2px; font-size:.9rem; letter-spacing:.28em; color:var(--ink-2); }
.hero-row{ display:flex; align-items:flex-end; gap:12px; margin-top:6px; }
.digits{ display:flex; gap:8px; }
.tile{
  display:inline-flex; align-items:center; justify-content:center;
  min-width:.74em; height:1.22em; padding:0 .06em;
  font-family:var(--serif); font-weight:700; line-height:1;
  font-size:clamp(4rem, 24vw, 6.5rem);
  color:var(--ink); background:var(--paper);
  border:2px solid var(--line); box-shadow:4px 4px 0 var(--shadow);
}
.tile.pop{ animation:tile-pop .5s cubic-bezier(.2,.85,.3,1.08) both; }
@keyframes tile-pop{
  from{ transform:translateY(.4em); opacity:0; }
  to{ transform:translateY(0); opacity:1; }
}
.hero-unit{
  font-family:var(--serif); font-weight:700; color:var(--verm);
  font-size:clamp(1.4rem, 6vw, 2rem); padding-bottom:.4em; letter-spacing:.1em;
}
.hero-note{
  margin:10px 0 4px; font-family:var(--serif); font-weight:700;
  font-size:clamp(1.5rem, 7.5vw, 2.2rem); color:var(--verm); letter-spacing:.06em;
}

/* 冲刺标尺：填充用 scaleX，转场只动 transform */
.rail-wrap{ margin-top:18px; }
.rail{ height:12px; border:1.5px solid var(--line); background:var(--paper); position:relative; overflow:hidden; }
.rail-fill{
  position:absolute; inset:1.5px; transform-origin:left center; transform:scaleX(0);
  background:var(--verm);
  background-image:repeating-linear-gradient(45deg, rgba(255,255,255,.28) 0 5px, transparent 5px 10px);
  transition:transform 1.1s cubic-bezier(.22,.8,.26,1) .25s;
}
.rail-cap{
  display:flex; justify-content:space-between; margin-top:6px;
  font-family:var(--mono); font-size:.72rem; letter-spacing:.14em; color:var(--ink-2);
}
.rail-pct{ color:var(--verm); font-weight:700; }

/* ---------- 状态点 ---------- */
.dot{ width:10px; height:10px; border-radius:50%; flex:none; display:inline-block; background:var(--mute); }
.dot--unchecked{ background:transparent; border:1.5px dashed var(--mute); }
.dot--online{ background:var(--ok); }
.dot--offline{ background:var(--bad); }

/* ---------- 巡检条 ---------- */
.scan{
  display:flex; align-items:flex-start; gap:9px;
  margin:14px 0 2px; padding:9px 12px;
  border:1px dashed var(--line-soft);
  font-family:var(--mono); font-size:.74rem; letter-spacing:.06em; color:var(--ink-2);
}
.scan .dot{ margin-top:4px; }
.scan-text{ overflow-wrap:anywhere; }

/* ---------- 站点目录 ---------- */
.sec-head{
  display:flex; align-items:baseline; justify-content:space-between; gap:10px; flex-wrap:wrap;
  margin-top:26px; padding-bottom:8px; border-bottom:2px solid var(--line);
}
.sec-title{ margin:0; font-family:var(--serif); font-size:1.22rem; font-weight:700; letter-spacing:.2em; }
.sec-title::before{ content:""; display:inline-block; width:10px; height:10px; margin-right:10px; background:var(--verm); }
.sec-sub{ font-family:var(--mono); font-size:.72rem; letter-spacing:.16em; color:var(--ink-2); }

.cards{ display:grid; grid-template-columns:1fr; gap:16px; margin-top:14px; }
@media (min-width:720px){ .cards{ grid-template-columns:1fr 1fr; } }

.card{
  position:relative; display:block; overflow:hidden;
  padding:14px 16px 12px; text-decoration:none;
  background:var(--card); border:2px solid var(--line);
  box-shadow:5px 5px 0 var(--shadow);
  transition:transform .14s ease;          /* 只动 transform，保 60fps */
  touch-action:manipulation;
}
.card:active{ transform:scale(.977); }     /* 按压反馈 */
@media (hover:hover){ .card:hover{ transform:translateY(-3px); } }
.card > *{ position:relative; z-index:1; }
.wm{
  position:absolute; right:-6px; bottom:-30px; z-index:0;
  pointer-events:none; user-select:none;
  font-family:var(--serif); font-weight:700; font-size:6.5rem; line-height:1;
  color:var(--ink); opacity:.06;
}
.card-top{ display:flex; justify-content:space-between; align-items:center; gap:10px; }
.badge{
  font-size:.68rem; letter-spacing:.2em; padding:3px 8px 2px;
  background:var(--ink); color:var(--paper);
}
.stat{ display:flex; align-items:center; gap:6px; }
.stat-text{ font-family:var(--mono); font-size:.72rem; letter-spacing:.04em; color:var(--ink-2); }
.card-name{
  margin:10px 0 4px; font-family:var(--serif); font-weight:700;
  font-size:1.18rem; letter-spacing:.04em;
}
.card-name em{ font-style:normal; color:var(--verm); }
.card-desc{ margin:0; color:var(--ink-2); font-size:.86rem; line-height:1.65; }
.card-foot{
  display:flex; justify-content:space-between; align-items:center; gap:10px;
  margin-top:12px; padding-top:9px; border-top:1px solid var(--line-soft);
}
.card-host{
  font-family:var(--mono); font-size:.72rem; color:var(--ink-2);
  overflow:hidden; text-overflow:ellipsis; white-space:nowrap;
}
.card-go{
  flex:none; font-family:var(--mono); font-size:.72rem; font-weight:700; letter-spacing:.1em;
  border:1.5px solid var(--ink); padding:5px 10px 4px; color:var(--ink);
}
@media (hover:hover){ .card:hover .card-go{ background:var(--ink); color:var(--paper); } }

/* ---------- 图签栏 + 注脚 ---------- */
.foot{ margin-top:30px; }
.tblock{
  display:grid; grid-template-columns:repeat(4,1fr);
  border:2px solid var(--line); background:var(--card); box-shadow:5px 5px 0 var(--shadow);
}
.tb{ padding:7px 9px 6px; min-width:0; border-right:1px solid var(--line-soft); border-bottom:1px solid var(--line-soft); }
.tb:nth-child(4n){ border-right:none; }
.tb:nth-child(n+5){ border-bottom:none; }
.tb small{ display:block; font-family:var(--mono); font-size:.66rem; letter-spacing:.12em; color:var(--ink-2); }
.tb b{ display:block; font-size:.74rem; font-weight:700; letter-spacing:.03em; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
@media (max-width:560px){
  .tblock{ grid-template-columns:repeat(2,1fr); }
  .tb:nth-child(4n){ border-right:1px solid var(--line-soft); }
  .tb:nth-child(2n){ border-right:none; }
  .tb:nth-child(n+5){ border-bottom:1px solid var(--line-soft); }
  .tb:nth-child(n+7){ border-bottom:none; }
}
.foot-note{ margin:12px 0 0; font-size:.78rem; color:var(--ink-2); letter-spacing:.02em; }
.mail{ color:var(--verm); text-decoration:none; border-bottom:1px solid currentColor; }

/* ---------- 更新 toast ---------- */
.toast{
  position:fixed; left:50%; z-index:80;
  bottom:calc(16px + env(safe-area-inset-bottom, 0px));
  transform:translate(-50%, calc(100% + 28px));
  opacity:0; visibility:hidden;
  display:flex; align-items:center; gap:10px;
  max-width:calc(100vw - 28px);
  min-height:44px;                          /* 可点击关闭，触控目标 ≥44px */
  padding:10px 16px; cursor:pointer;
  background:var(--ink); color:var(--paper);
  border:1.5px solid var(--ink); border-left:6px solid var(--verm);
  box-shadow:4px 4px 0 var(--shadow);
  font-size:.84rem; letter-spacing:.02em;
  transition:transform .38s cubic-bezier(.2,.9,.32,1.15), opacity .3s ease, visibility 0s .4s;
}
.toast.show{
  transform:translate(-50%, 0); opacity:1; visibility:visible;
  transition:transform .38s cubic-bezier(.2,.9,.32,1.15), opacity .3s ease;
}
.toast-mark{ flex:none; width:9px; height:9px; background:var(--verm); }
.toast-msg{ font-weight:600; }
.toast-time{ font-family:var(--mono); font-size:.7rem; opacity:.75; flex:none; }

/* ---------- 进场 stagger（transform + opacity） ---------- */
.reveal{ opacity:0; animation:rise .55s cubic-bezier(.2,.8,.3,1) both; animation-delay:var(--rd, 0s); }
@keyframes rise{
  from{ opacity:0; transform:translateY(16px); }
  to{ opacity:1; transform:translateY(0); }
}

/* ---------- 动效降级：所有动画/过渡尊重系统减弱动态设置 ---------- */
@media (prefers-reduced-motion: reduce){
  *,*::before,*::after{
    animation-duration:.01ms !important;
    animation-delay:0ms !important;
    transition-duration:.01ms !important;
    transition-delay:0ms !important;
  }
}

/* ---------- 桌面微调（本 App 以手机优先，桌面仅放宽留白） ---------- */
@media (min-width:720px){
  .wrap{ padding-top:40px; }
  .hero{ padding:20px 24px 22px; }
}