/* ==========================================================================
   第三届高性能计算综合能力竞赛 · 站点样式
   设计基调：深空蓝 + 青蓝渐变 + 玻璃拟态，突出「高性能计算」的科技感
   ========================================================================== */

:root{
  --brand:#2f6bff;
  --brand-2:#00d4ff;
  --brand-3:#7c5cff;
  --accent:#ffb020;
  --ink:#0a1024;
  --paper:#ffffff;
  --bg:#f5f7fd;
  --muted:#6b7793;
  --line:#e3e8f4;
  --ok:#12a150;
  --danger:#e5484d;
  --radius:18px;
  --radius-sm:12px;
  --shadow-sm:0 2px 8px rgba(16,26,64,.06);
  --shadow:0 12px 32px rgba(16,26,64,.10);
  --shadow-lg:0 28px 64px rgba(10,18,48,.18);
  --grad:linear-gradient(120deg,var(--brand) 0%,var(--brand-2) 55%,var(--brand-3) 100%);
  --grad-soft:linear-gradient(120deg,rgba(47,107,255,.12),rgba(0,212,255,.12));
  --ease:cubic-bezier(.22,.61,.36,1);
  --wrap:1200px;
}

*,*::before,*::after{box-sizing:border-box}

html{scroll-behavior:smooth;scroll-padding-top:88px}

body{
  margin:0;
  background:var(--bg);
  color:var(--ink);
  font-family:"PingFang SC","Microsoft YaHei","Hiragino Sans GB","Source Han Sans SC",
              system-ui,-apple-system,"Segoe UI",Roboto,sans-serif;
  font-size:16px;line-height:1.75;
  -webkit-font-smoothing:antialiased;
  overflow-x:hidden;
}

img{max-width:100%;display:block}
a{color:inherit;text-decoration:none}
h1,h2,h3,h4,h5{margin:0 0 .5em;line-height:1.3;font-weight:700;letter-spacing:-.01em}
p{margin:0 0 1em}
code,kbd,pre{font-family:"JetBrains Mono","Cascadia Code",Consolas,"SF Mono",Menlo,monospace}
::selection{background:rgba(47,107,255,.22)}

.wrap{width:min(100% - 48px,var(--wrap));margin-inline:auto}
.hint{color:var(--muted);font-size:.86rem;line-height:1.6}
.hint-list{margin:0 0 18px;padding-left:1.1em;display:grid;gap:6px}
.hint-list li{margin:0}
.lead-in{margin:.8em 0 .4em;font-weight:600}

/* ============================ 按钮 ============================ */
.btn{
  --btn-bg:transparent;--btn-fg:var(--ink);--btn-bd:transparent;
  display:inline-flex;align-items:center;justify-content:center;gap:.5em;
  padding:.72em 1.5em;border-radius:999px;border:1px solid var(--btn-bd);
  background:var(--btn-bg);color:var(--btn-fg);cursor:pointer;
  font-size:.95rem;font-weight:600;font-family:inherit;line-height:1.2;
  transition:transform .18s var(--ease),box-shadow .18s var(--ease),
             background .18s var(--ease),color .18s var(--ease),border-color .18s var(--ease);
  white-space:nowrap;
}
.btn:hover{transform:translateY(-2px)}
.btn:active{transform:translateY(0)}
.btn-primary{--btn-bg:var(--grad);--btn-fg:#fff;box-shadow:0 10px 24px rgba(47,107,255,.32)}
.btn-primary:hover{box-shadow:0 16px 34px rgba(47,107,255,.42)}
.btn-outline{--btn-bd:var(--line);--btn-fg:var(--ink);--btn-bg:#fff;box-shadow:var(--shadow-sm)}
.btn-outline:hover{--btn-bd:var(--brand);--btn-fg:var(--brand)}
.btn-ghost{--btn-bd:rgba(255,255,255,.28);--btn-fg:#fff;backdrop-filter:blur(8px);
  background:rgba(255,255,255,.06)}
.btn-ghost:hover{background:rgba(255,255,255,.16)}
.btn-danger{--btn-bg:#fff0f0;--btn-fg:var(--danger);--btn-bd:#ffd7d7}
.btn-danger:hover{--btn-bg:var(--danger);--btn-fg:#fff;--btn-bd:var(--danger)}
.btn-sm{padding:.5em 1.05em;font-size:.86rem}
.btn-xs{padding:.32em .8em;font-size:.78rem}
.btn-lg{padding:.9em 1.9em;font-size:1.02rem}
.btn-block{width:100%}
.arrow{transition:transform .2s var(--ease)}
.btn:hover .arrow{transform:translateX(4px)}

.pill{
  display:inline-flex;align-items:center;gap:.35em;padding:.28em .8em;border-radius:999px;
  background:#eef2fd;color:#3a4a75;font-size:.8rem;font-weight:600;white-space:nowrap;
}
.pill-score{background:var(--grad);color:#fff}
.chip{
  display:inline-block;padding:.2em .7em;border-radius:8px;background:#f0f3fb;
  color:#516088;font-size:.76rem;font-weight:600;
}
.chip-hot{background:#fff4e0;color:#a86a00}

/* ============================ 顶部导航 ============================ */
.topbar{
  position:fixed;top:0;right:0;left:0;z-index:60;
  background:rgba(8,13,30,.72);backdrop-filter:blur(18px) saturate(160%);
  border-bottom:1px solid rgba(255,255,255,.08);
  transition:background .3s var(--ease),box-shadow .3s var(--ease);
}
.topbar.solid{background:rgba(8,13,30,.92);box-shadow:0 10px 30px rgba(4,10,30,.35)}
.topbar-in{display:flex;align-items:center;justify-content:space-between;height:74px;gap:24px}

.brand{display:flex;align-items:center;gap:12px;color:#fff}
/* 校徽：官方蓝色标在深色导航条（rgba(8,13,30,.72)）和页脚（#070c1c）上
   对比度极低，直接放会糊成一团。垫一个白色圆底既保住官方配色，又保证可读。 */
.brand-mark{
  flex:none;display:grid;place-items:center;
  width:40px;height:40px;padding:3px;border-radius:50%;
  background:#fff;box-shadow:0 8px 20px rgba(47,107,255,.35);
}
.brand-mark img{width:100%;height:100%;display:block;object-fit:contain}
.brand-lg .brand-mark{width:52px;height:52px;padding:4px}
.brand-text{display:flex;flex-direction:column;line-height:1.15}
.brand-text strong{font-size:1.02rem;letter-spacing:.14em}
.brand-text em{font-style:normal;font-size:.72rem;color:rgba(255,255,255,.62);letter-spacing:.02em}

.nav-links{display:flex;align-items:center;gap:6px}
.nav-links a{
  position:relative;padding:.55em .95em;border-radius:10px;color:rgba(255,255,255,.8);
  font-size:.92rem;font-weight:500;transition:color .2s,background .2s;
  white-space:nowrap;   /* 菜单项永远不折行，宁可整条收起成汉堡菜单 */
}
.nav-links a::after{
  content:"";position:absolute;left:50%;bottom:4px;width:0;height:2px;border-radius:2px;
  background:var(--grad);transform:translateX(-50%);transition:width .25s var(--ease);
}
.nav-links a:hover{color:#fff;background:rgba(255,255,255,.07)}
.nav-links a:hover::after{width:42%}
.nav-links a.on{color:#fff}
.nav-links a.on::after{width:42%}
.nav-cta{
  margin-left:8px;background:var(--grad)!important;color:#fff!important;
  box-shadow:0 8px 20px rgba(47,107,255,.35);
}
.nav-cta::after{display:none}
/* 后台的「退出登录」是 <button>，拿不到 .nav-links a 的内边距与字号，
   这里补齐，否则和站点的「报名与提交」按钮对不上 */
button.nav-cta{
  padding:.55em .95em;border:0;border-radius:10px;font-family:inherit;
  font-size:.92rem;font-weight:500;cursor:pointer;
}

/* 登录态 */
.nav-login{
  margin-left:6px;padding:.5em .9em!important;border-radius:10px;
  border:1px solid rgba(255,255,255,.28);color:#fff!important;font-weight:600;
}
.nav-login:hover{background:rgba(255,255,255,.1)}
.nav-login.is-on{border-color:transparent;color:rgba(255,255,255,.72)!important;
  font-weight:500;padding:.5em .6em!important}
.nav-login.is-on:hover{color:#fff!important}
.nav-user{display:inline-flex;align-items:center;gap:7px;margin-left:8px;
  padding:.4em .8em .4em .4em;border-radius:999px;white-space:nowrap;
  background:rgba(255,255,255,.1);border:1px solid rgba(255,255,255,.16)}
.nav-user-avatar{
  width:24px;height:24px;flex:none;border-radius:50%;display:grid;place-items:center;
  background:var(--grad);color:#fff;font-size:.78rem;font-weight:700;
}
.nav-user-name{font-size:.88rem;color:#fff;max-width:8em;overflow:hidden;
  text-overflow:ellipsis}
/* 姓名做按钮用：清掉浏览器默认按钮样式，外观与原来的胶囊完全一致 */
button.nav-user{cursor:pointer;font-family:inherit;font-size:inherit;color:inherit}
.nav-user-link{padding:.5em 1.05em!important;color:#fff!important;font-weight:600}

/* 用户下拉菜单：贴到导航最右侧，和「报名与提交」拉开距离（margin-left:auto） */
.nav-menu-wrap{position:relative;display:inline-flex;margin-left:auto}
.nav-menu{
  position:absolute;right:0;top:calc(100% + 10px);z-index:70;min-width:176px;
  display:none;padding:8px;border-radius:14px;
  background:rgba(10,16,36,.98);border:1px solid rgba(255,255,255,.14);
  box-shadow:0 18px 40px rgba(4,10,30,.45);backdrop-filter:blur(16px);
}
.nav-menu-wrap.open .nav-menu{display:block}
.nav-menu-item{
  display:block;width:100%;padding:.62em .9em;border:0;border-radius:10px;
  background:transparent;color:rgba(255,255,255,.86);
  font-family:inherit;font-size:.9rem;font-weight:500;text-align:left;
  white-space:nowrap;cursor:pointer;transition:background .2s,color .2s;
}
.nav-menu-item:hover{background:rgba(255,255,255,.1);color:#fff}

/* 后台顶栏的「退出登录」按钮：沿用 .nav-cta 的渐变外观 */
.nav-links form{display:inline-flex;margin:0}

.nav-toggle{
  display:none;width:42px;height:42px;border:1px solid rgba(255,255,255,.2);border-radius:12px;
  background:rgba(255,255,255,.06);cursor:pointer;padding:11px 10px;
}
.nav-toggle span{display:block;height:2px;border-radius:2px;background:#fff;margin:4px 0;
  transition:transform .25s var(--ease),opacity .2s}
.nav-toggle.open span:nth-child(1){transform:translateY(6px) rotate(45deg)}
.nav-toggle.open span:nth-child(2){opacity:0}
.nav-toggle.open span:nth-child(3){transform:translateY(-6px) rotate(-45deg)}

.scroll-progress{height:2px;width:0;background:var(--grad);transition:width .1s linear}

/* ============================ Hero ============================ */
.hero{
  position:relative;overflow:hidden;color:#fff;padding:150px 0 120px;
  background:
    radial-gradient(1100px 620px at 78% -10%,rgba(0,212,255,.28),transparent 62%),
    radial-gradient(900px 560px at 12% 8%,rgba(124,92,255,.32),transparent 60%),
    linear-gradient(160deg,#070c1c 0%,#0b1430 45%,#0a1024 100%);
}
.hero-canvas{
  position:absolute;top:0;right:0;bottom:0;left:0;width:100%;height:100%;
  z-index:1;opacity:.55;
}

/* --- Hero 背景特效层 ------------------------------------------------------
   这一段是为了「所有电脑都能看到动效」而写的，两条硬性约束都不要改：

   1) 只用 top/right/bottom/left 定位，绝不用 inset 简写。
      inset 需要 Chromium 87+，360/QQ/搜狗等双核浏览器、老版 Chrome/Edge、
      IE 内核会整条声明丢弃 → 绝对定位元素失去全部偏移量 → 塌成 0 尺寸 →
      特效整个消失，Hero 只剩下一块暗色背景。

   2) 每个光斑最大 560px，不铺满整个 Hero。
      老核显（Intel GMA / 早期 HD Graphics）单张纹理上限只有 2048px。
      旧实现把极光做成 140% 视口宽的一整张合成层，在 1920/2560 屏上
      宽达 2688~3584px，超过上限后整层被丢弃且不报错 → 同样只剩暗色背景。
      这也解释了为什么「一部分电脑正常、一部分全黑」：同样一台旧机器，
      1366 宽的笔记本正常，接 1920/2560 显示器就黑。
      限制尺寸后，屏幕越大反而越不会触发这个失败。
   ------------------------------------------------------------------------ */
.hero-fx{position:absolute;top:0;right:0;bottom:0;left:0;z-index:0;pointer-events:none}
.orb{
  position:absolute;display:block;border-radius:50%;
  animation:orb-drift 22s ease-in-out infinite alternate;
}
.orb-a{
  top:-16%;left:-10%;width:44vw;height:44vw;max-width:560px;max-height:560px;
  background:radial-gradient(circle,rgba(0,212,255,.46) 0%,rgba(0,212,255,.17) 42%,rgba(0,212,255,0) 70%);
  animation-duration:19s;
}
.orb-b{
  top:-8%;right:-6%;width:40vw;height:40vw;max-width:520px;max-height:520px;
  background:radial-gradient(circle,rgba(124,92,255,.50) 0%,rgba(124,92,255,.19) 44%,rgba(124,92,255,0) 72%);
  animation-duration:26s;animation-delay:-6s;
}
.orb-c{
  bottom:-18%;left:22%;width:38vw;height:38vw;max-width:480px;max-height:480px;
  background:radial-gradient(circle,rgba(47,107,255,.44) 0%,rgba(47,107,255,.15) 46%,rgba(47,107,255,0) 72%);
  animation-duration:31s;animation-delay:-13s;
}
.orb-d{
  top:32%;left:46%;width:26vw;height:26vw;max-width:340px;max-height:340px;
  background:radial-gradient(circle,rgba(0,255,214,.30) 0%,rgba(0,255,214,.10) 45%,rgba(0,255,214,0) 70%);
  animation-duration:23s;animation-delay:-3s;
}
@keyframes orb-drift{
  0%{transform:translate3d(0,0,0) scale(1)}
  50%{transform:translate3d(32px,-24px,0) scale(1.12)}
  100%{transform:translate3d(-26px,18px,0) scale(1.04)}
}

/* canvas（生命游戏）跑不起来时叠加的静态极光。
   用 display 切换而不是 opacity：opacity:0 的元素仍然会被栅格化成整屏图层，
   在旧核显上又要冒一次纹理超限的风险。静态背景永远画得出来。 */
.hero-fx::after{
  content:"";position:absolute;top:0;right:0;bottom:0;left:0;display:none;
  background:
    radial-gradient(38% 38% at 22% 28%,rgba(0,212,255,.40),transparent 70%),
    radial-gradient(34% 34% at 74% 62%,rgba(124,92,255,.42),transparent 70%),
    radial-gradient(32% 32% at 52% 88%,rgba(47,107,255,.34),transparent 70%);
}
.hero.hero-css-fallback .hero-fx::after{display:block}
.hero.hero-css-fallback .hero-canvas{display:none}
.hero.hero-css-fallback .orb{animation-duration:15s}

.hero-glow{
  position:absolute;top:-30%;right:-10%;width:560px;height:560px;border-radius:50%;
  background:radial-gradient(circle,rgba(0,212,255,.28),transparent 65%);
  animation:float 12s ease-in-out infinite;
}
@keyframes float{0%,100%{transform:translate3d(0,0,0)}50%{transform:translate3d(-34px,28px,0)}}

/* 低配设备 / 用户偏好减弱动效：放慢节奏而不是取消动效 */
@media (prefers-reduced-motion:reduce){
  .orb{animation-duration:44s}
  .hero.hero-css-fallback .orb{animation-duration:44s}
  .hero-glow{animation-duration:26s}
}
.hero-in{position:relative;z-index:2;max-width:1000px}
/* 登录失败提示：压在半透明 hero 上要够醒目，宽度别铺满整屏 */
.hero-alert{max-width:520px;margin-bottom:22px}
.hero-tags{display:flex;flex-wrap:wrap;gap:10px;margin-bottom:26px}
.tag{
  padding:.4em 1em;border-radius:999px;font-size:.82rem;font-weight:600;
  background:rgba(255,255,255,.12);border:1px solid rgba(255,255,255,.18);color:#fff;
  backdrop-filter:blur(8px);
}
.tag-ghost{background:transparent;color:rgba(255,255,255,.7)}
.hero-title{
  font-size:clamp(2.2rem,5.4vw,4.1rem);font-weight:800;letter-spacing:-.02em;
  margin-bottom:.35em;line-height:1.12;
}
.hero-title .grad{
  background:linear-gradient(100deg,#fff 8%,#8fd8ff 42%,#b6a6ff 88%);
  -webkit-background-clip:text;background-clip:text;color:transparent;
}
.hero-sub{max-width:760px;font-size:clamp(1rem,1.5vw,1.14rem);color:rgba(255,255,255,.76)}

.countdown{
  display:flex;align-items:center;gap:14px;flex-wrap:wrap;margin:38px 0 34px;
  padding:18px 22px;border-radius:var(--radius);
  background:rgba(255,255,255,.07);border:1px solid rgba(255,255,255,.14);
  backdrop-filter:blur(14px);width:fit-content;
}
.cd-cell{display:flex;flex-direction:column;align-items:center;min-width:70px}
.cd-cell b{
  font-size:1.9rem;font-weight:800;line-height:1;font-variant-numeric:tabular-nums;
  background:linear-gradient(180deg,#fff,#9fd4ff);-webkit-background-clip:text;
  background-clip:text;color:transparent;
}
.cd-cell span{font-size:.76rem;color:rgba(255,255,255,.6);margin-top:6px}
.cd-label{
  border-left:1px solid rgba(255,255,255,.16);padding-left:16px;
  font-size:.86rem;color:rgba(255,255,255,.72);
}
.cd-label em{font-style:normal;color:#8fd8ff;font-weight:700}

.hero-actions{display:flex;flex-wrap:wrap;gap:14px}

.hero-wave{
  position:absolute;left:0;right:0;bottom:-1px;height:110px;z-index:1;
  background:linear-gradient(to bottom,transparent,var(--bg));
}

/* ============================ 赛事要点条 ============================ */
.facts{background:var(--bg);position:relative;z-index:3;margin-top:-56px}
.facts-in{
  display:grid;grid-template-columns:repeat(4,1fr);gap:0;
  background:var(--paper);border-radius:var(--radius);box-shadow:var(--shadow);
  border:1px solid var(--line);overflow:hidden;
}
.fact{padding:24px 26px;border-right:1px solid var(--line)}
.fact:last-child{border-right:0}
.fact-k{display:block;font-size:.78rem;color:var(--muted);letter-spacing:.08em;margin-bottom:6px}
.fact-v{display:block;font-weight:700;font-size:1rem}

/* ============================ 通用分节 ============================ */
.sec{padding:62px 0}
.sec.tint{background:linear-gradient(180deg,#fff 0%,#f2f5fd 100%)}
.sec-head{max-width:760px;margin-bottom:34px}
.sec-kicker{
  display:inline-block;font-size:.76rem;font-weight:800;letter-spacing:.22em;
  color:var(--brand);margin-bottom:12px;
}
.sec-title{font-size:clamp(1.65rem,3vw,2.35rem);margin-bottom:.35em}
.sec-title::after{
  content:"";display:block;width:64px;height:4px;border-radius:4px;
  background:var(--grad);margin-top:16px;
}
.sec-desc{color:var(--muted);font-size:1rem}

/* ============================ 时间轴 ============================ */
.timeline{position:relative;display:grid;gap:22px}
.timeline::before{
  content:"";position:absolute;left:36px;top:16px;bottom:16px;width:2px;
  background:linear-gradient(180deg,var(--brand),var(--brand-2),transparent);
  opacity:.35;
}
.tl-card{
  position:relative;display:flex;gap:26px;padding:26px 30px;border-radius:var(--radius);
  background:var(--paper);border:1px solid var(--line);box-shadow:var(--shadow-sm);
  transition:transform .3s var(--ease),box-shadow .3s var(--ease),border-color .3s;
}
.tl-card:hover{transform:translateX(6px);box-shadow:var(--shadow);border-color:#cfdcff}
.tl-no{
  flex:0 0 74px;height:74px;border-radius:20px;display:grid;place-items:center;
  font-size:1.5rem;font-weight:800;color:#fff;background:var(--grad);
  box-shadow:0 12px 26px rgba(47,107,255,.28);z-index:1;
}
.tl-body{flex:1;min-width:0}
.tl-period{
  display:inline-block;font-size:.82rem;font-weight:700;color:var(--brand);
  background:var(--grad-soft);padding:.25em .8em;border-radius:999px;margin-bottom:10px;
}
.tl-title{font-size:1.22rem;margin-bottom:.6em}
.tl-card p{position:relative;padding-left:20px;margin:0 0 .5em;color:#3c4863}
.tl-card p::before{
  content:"";position:absolute;left:0;top:.72em;width:7px;height:7px;border-radius:50%;
  background:var(--brand);opacity:.42;
}
.tl-card p a{color:var(--brand);border-bottom:1px dashed rgba(47,107,255,.45)}

/* ============================ 奖项 ============================ */
/* 前三等一行、其余奖项换行后一行：两个独立的 grid，换行是硬性的，
   窄屏重排时也不会把两组混到同一行 */
.award-rows{display:grid;gap:22px}
.award-grid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:22px}
.award-card{
  position:relative;padding:30px 26px;border-radius:var(--radius);background:var(--paper);
  border:1px solid var(--line);box-shadow:var(--shadow-sm);overflow:hidden;
  transition:transform .3s var(--ease),box-shadow .3s var(--ease);
}
.award-card::before{
  content:"";position:absolute;top:0;right:0;left:0;height:4px;background:var(--grad);
  opacity:0;transition:opacity .3s;
}
.award-card:hover{transform:translateY(-8px);box-shadow:var(--shadow-lg)}
.award-card:hover::before{opacity:1}
.award-top{background:linear-gradient(160deg,#fffaf0,#fff);border-color:#ffe6b8}
.award-top::before{opacity:1;background:linear-gradient(90deg,var(--accent),#ff7a45)}
/* 一二三等奖与其余奖项的序号按钮同色（统一蓝青紫渐变），
   卡片底色/描边的「一等奖」强调样式保持不变 */
/* 奖项名直接做徽标（不再用 1/2/3 序号 + 下方文字），所以宽度随文字撑开 */
.award-medal{
  display:inline-block;min-width:44px;padding:9px 16px;border-radius:14px;
  font-weight:800;font-size:.98rem;line-height:1.2;color:#fff;background:var(--grad);
  margin-bottom:14px;
}
.award-top .award-medal{box-shadow:0 10px 22px rgba(47,107,255,.28)}
.award-level{font-size:1.15rem;margin-bottom:.3em}
.award-count{font-size:1.6rem;font-weight:800;color:var(--brand);margin-bottom:.4em}
.award-prize{color:#33405e;font-weight:600;margin-bottom:.4em}
.award-note{font-size:.84rem;color:var(--muted);margin:0}

/* ============================ 赛道卡片 ============================ */
/* 两个赛道上下两行排列（不是左右两列）。
   grid-auto-rows:1fr 让两块外框等高，块内两张卡片也用 1fr 等高，
   这样「外部框」的宽高完全对齐，不会出现一块长一块短。 */
.track-grid{display:grid;grid-template-columns:1fr;grid-auto-rows:1fr;gap:24px}
/* 每个赛道一块：块内是「相同的基础题 + 本赛道提高题」，纵向排列 */
.track-block{
  display:flex;flex-direction:column;
  padding:24px;border-radius:var(--radius);border:1px solid var(--line);
  background:linear-gradient(180deg,#f7f9ff 0%,#eef2fd 100%);
}
.track-block-head{display:flex;align-items:baseline;gap:12px;flex-wrap:wrap;margin-bottom:18px}
.track-block-title{
  margin:0;font-size:1.22rem;font-weight:800;color:var(--ink);
  padding-left:14px;position:relative;
}
.track-block-title::before{
  content:"";position:absolute;left:0;top:.15em;bottom:.15em;width:5px;
  border-radius:5px;background:var(--grad);
}
.track-block-sub{font-size:.82rem;color:var(--muted)}
.track-block-body{display:grid;gap:16px;grid-auto-rows:1fr;flex:1}
.track-card{
  position:relative;display:flex;flex-direction:column;padding:30px 28px 26px;
  border-radius:var(--radius);background:var(--paper);border:1px solid var(--line);
  box-shadow:var(--shadow-sm);overflow:hidden;
  transition:transform .3s var(--ease),box-shadow .3s var(--ease),border-color .3s;
}
.track-card::after{
  content:"";position:absolute;top:-1px;right:-1px;bottom:-1px;left:-1px;
  border-radius:var(--radius);padding:1px;
  background:var(--grad);opacity:0;transition:opacity .3s;
  -webkit-mask:linear-gradient(#000 0 0) content-box,linear-gradient(#000 0 0);
  -webkit-mask-composite:xor;mask-composite:exclude;pointer-events:none;
}
.track-card:hover{transform:translateY(-10px);box-shadow:var(--shadow-lg)}
.track-card:hover::after{opacity:1}
.track-top{display:flex;align-items:center;justify-content:space-between;margin-bottom:14px}
.track-no{font-size:2.4rem;font-weight:800;line-height:1;
  background:var(--grad);-webkit-background-clip:text;background-clip:text;color:transparent}
.track-flags{display:flex;align-items:center;gap:6px;flex-wrap:wrap;justify-content:flex-end}
.track-kind{font-size:.78rem;font-weight:700;color:var(--muted);letter-spacing:.04em}
.track-title{font-size:1.24rem;margin-bottom:.6em}
.track-meta{display:flex;flex-wrap:wrap;gap:8px;margin-bottom:14px}
.track-summary{color:var(--muted);font-size:.94rem;flex:1}
.track-tags{display:flex;flex-wrap:wrap;gap:8px;margin-bottom:20px}
.track-open{align-self:flex-start}

/* ============================ 往届风采 ============================ */
.history-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(320px,1fr));gap:24px}
.history-card{
  display:block;padding:32px 30px;border-radius:var(--radius);background:var(--paper);
  border:1px solid var(--line);box-shadow:var(--shadow-sm);
  transition:transform .3s var(--ease),box-shadow .3s var(--ease);
}
.history-card:hover{transform:translateY(-8px);box-shadow:var(--shadow-lg)}
.history-year{
  display:inline-block;font-size:.8rem;font-weight:800;letter-spacing:.1em;color:var(--brand);
  margin-bottom:12px;
}
.history-card h3{font-size:1.16rem}
.history-card p{color:var(--muted);font-size:.94rem}
.history-link{color:var(--brand);font-weight:700;font-size:.9rem}

/* ============================ 竞赛规则 ============================ */
.rules-list{display:grid;gap:14px;margin-bottom:44px}
.rule-item{
  display:flex;gap:20px;padding:22px 26px;border-radius:var(--radius-sm);
  background:var(--paper);border:1px solid var(--line);
}
.rule-no{
  flex:0 0 34px;height:34px;border-radius:10px;display:grid;place-items:center;
  background:var(--grad-soft);color:var(--brand);font-weight:800;font-size:.92rem;
}
.rule-item p{margin:0;color:#3c4863}
.rule-item a{color:var(--brand);border-bottom:1px dashed rgba(47,107,255,.45)}

/* 整个「竞赛规则」板块套深色渐变卡片（沿用原「联系与咨询」条的外观），
   板块内的标题/条目都要翻成浅色才看得清 */
.rules-panel{
  padding:clamp(28px,3.4vw,44px);
  border-radius:var(--radius);color:#fff;
  background:linear-gradient(120deg,#0b1430,#182a63 55%,#0e3a6b);
  box-shadow:var(--shadow);
}
.rules-panel .sec-head{margin-bottom:24px}
.rules-panel .sec-kicker{color:#8fd8ff}
.rules-panel .sec-title{color:#fff}
.rules-panel .sec-desc{color:rgba(255,255,255,.72)}
.rules-panel .rules-list{margin-bottom:0}
.rules-panel .rule-item{
  background:rgba(255,255,255,.07);border-color:rgba(255,255,255,.14);
}
.rules-panel .rule-no{background:rgba(255,255,255,.16);color:#fff}
.rules-panel .rule-item p{color:#fff}
.rules-panel .rule-item a{color:#8fd8ff;border-bottom-color:rgba(143,216,255,.45)}

/* ============================ 页脚 ============================ */
.footer{background:#070c1c;color:rgba(255,255,255,.72);padding:45px 0 45px;margin-top:0}
.footer-grid{display:grid;grid-template-columns:1.6fr 1fr 1fr 1fr;gap:36px}
.footer .brand-lg{margin-bottom:16px}
.footer-slogan{color:rgba(255,255,255,.9);font-weight:600}
.footer-org{font-size:.86rem;color:rgba(255,255,255,.5)}
.footer-col h4{color:#fff;font-size:.95rem;margin-bottom:16px}
.footer-col a,.footer-col span{display:block;font-size:.88rem;margin-bottom:10px;
  color:rgba(255,255,255,.66);transition:color .2s,transform .2s}
.footer-col a:hover{color:#8fd8ff;transform:translateX(3px)}
/* 版权行跟在「口号 + 主办单位」下方（原 footer-bottom 的独立分隔条已去掉） */
.footer-copy{margin:10px 0 0;font-size:.82rem;color:rgba(255,255,255,.42)}

/* QQ 群号：窄屏时整段「QQ群：群号 + 复制按钮」一起换行，不被拆散 */
.footer-col .qq-row{display:flex;flex-wrap:wrap;align-items:center;column-gap:6px;row-gap:2px}
.footer-col .qq-row span{margin-bottom:0}
.footer-col .qq-main{display:inline-flex;align-items:center;gap:7px;white-space:nowrap}
/* 截止时间整体不拆行，宽度不够时整段换行 */
.deadline-val{white-space:nowrap}
.qq-no{font-style:normal;font-weight:700;color:#8fd8ff;letter-spacing:.04em}
.copy-btn{
  flex:none;display:inline-grid;place-items:center;width:22px;height:22px;padding:0;
  border:1px solid rgba(255,255,255,.3);border-radius:6px;background:transparent;
  color:rgba(255,255,255,.66);cursor:pointer;
  transition:border-color .2s,color .2s,background .2s;
}
.copy-btn:hover{border-color:#8fd8ff;color:#8fd8ff;background:rgba(143,216,255,.12)}
.copy-btn.done{border-color:#8fd8ff;color:#8fd8ff;background:rgba(143,216,255,.12)}
.copy-btn svg{width:12px;height:12px;fill:none;stroke:currentColor;stroke-width:1.9;
  stroke-linecap:round;stroke-linejoin:round}

/* 回到顶部：纯色（不用渐变）+ 粗箭头 */
.to-top{
  position:fixed;right:26px;bottom:26px;width:46px;height:46px;border-radius:14px;border:0;
  background:var(--brand);color:#fff;font-size:1.15rem;font-weight:900;line-height:1;
  cursor:pointer;z-index:50;
  box-shadow:0 12px 26px rgba(47,107,255,.4);opacity:0;pointer-events:none;
  transition:opacity .3s,transform .3s var(--ease);
}
.to-top.on{opacity:1;pointer-events:auto}
.to-top:hover{transform:translateY(-4px)}

/* ============================ 弹窗 ============================ */
.modal{
  border:0;padding:0;background:transparent;max-width:min(1080px,94vw);width:100%;
  max-height:92vh;overflow:visible;
}
.modal::backdrop{background:rgba(6,11,26,.62);backdrop-filter:blur(6px)}
.modal[open]{animation:modalIn .32s var(--ease)}
@keyframes modalIn{from{opacity:0;transform:translateY(22px) scale(.98)}to{opacity:1;transform:none}}
.modal-box{
  background:#fff;border-radius:22px;overflow:hidden;display:flex;flex-direction:column;
  max-height:92vh;box-shadow:var(--shadow-lg);
}
.modal-narrow{max-width:820px;margin-inline:auto}
.modal-head{
  display:flex;align-items:flex-start;justify-content:space-between;gap:20px;
  padding:26px 30px 20px;color:#fff;
  background:linear-gradient(120deg,#0a1024,#16255a 60%,#0d3f6e);
}
.modal-kind{display:block;font-size:.78rem;color:#8fd8ff;font-weight:700;letter-spacing:.08em;
  margin-bottom:8px}
.modal-head h3{font-size:1.3rem;margin:0;color:#fff}
.modal-x{
  flex:0 0 36px;height:36px;border-radius:12px;border:1px solid rgba(255,255,255,.2);
  background:rgba(255,255,255,.08);color:#fff;cursor:pointer;font-size:.95rem;
  transition:background .2s,transform .2s;
}
.modal-x:hover{background:rgba(255,255,255,.2);transform:rotate(90deg)}
.modal-tabs{display:flex;gap:6px;padding:0 30px;border-bottom:1px solid var(--line);background:#fff}
.mtab{
  position:relative;padding:14px 18px;border:0;background:transparent;cursor:pointer;
  font-family:inherit;font-size:.94rem;font-weight:600;color:var(--muted);
  transition:color .2s;
}
.mtab:hover{color:var(--ink)}
.mtab.on{color:var(--brand)}
.mtab.on::after{
  content:"";position:absolute;left:14px;right:14px;bottom:-1px;height:2px;border-radius:2px;
  background:var(--grad);
}
.modal-body{padding:26px 30px;overflow-y:auto;flex:1}
.mpane{display:none}
.mpane.on{display:block;animation:fadeUp .3s var(--ease)}
@keyframes fadeUp{from{opacity:0;transform:translateY(10px)}to{opacity:1;transform:none}}
.modal-foot{
  display:flex;align-items:center;justify-content:flex-end;gap:12px;padding:18px 30px;
  border-top:1px solid var(--line);background:#fafbff;
}
.modal-foot-note{margin-right:auto;font-size:.86rem;color:var(--muted)}

/* ============================ 富文本 ============================ */
.prose{color:#33405e;font-size:.96rem}
.prose h4{font-size:1.1rem;color:var(--ink);margin-top:1.6em}
.prose h4:first-child{margin-top:0}
.prose h5{font-size:.98rem;color:var(--ink);margin-top:1.3em}
.prose p{margin:0 0 .9em}
.prose a{color:var(--brand);border-bottom:1px dashed rgba(47,107,255,.45)}
/* 正文里的按钮要压过 .prose a 的链接蓝：.prose a 是 (0,1,1)，比 .btn 的 (0,1,0) 高，
   不覆盖的话渐变按钮上会渲染出蓝字，落在浅蓝底上几乎看不清 */
.prose a.btn{color:var(--btn-fg);border-bottom:0}

/* 赛题文档：后台可编辑的一段说明（文案数据里的 tracks[*].docs）。
   外框沿用原来「附件下载」条目的观感（浅底 + 描边 + 圆角），
   文字沿用 .prose 正文的样式，链接同样是品牌色 + 虚线下划线。 */
.docs-box{
  padding:16px 20px;border-radius:var(--radius-sm);border:1px solid var(--line);
  background:#fbfcff;
}
.docs-text{color:#33405e;font-size:.96rem;line-height:1.75;margin:0}
.docs-text a{color:var(--brand);border-bottom:1px dashed rgba(47,107,255,.45)}
.prose-list{margin:.4em 0 1.1em;padding-left:1.3em}
.prose-list li{margin-bottom:.42em}
/* 平台使用手册：iframe 内嵌渲染 PDF */
.manual-pane{display:flex;flex-direction:column;gap:12px}
.manual-pane .hint{margin:0}
.manual-frame{
  width:100%;height:min(72vh,760px);border:1px solid var(--line);
  border-radius:var(--radius-sm);background:#f6f8fd;
}
/* 未登录时的赛题详情遮罩：只有第一段是真的，下面用渐变淡出并居中放登录按钮。
   负 margin 让它压住上一段一点，看起来像内容被盖住了而不是凭空多出一块。 */
.prose-gate{
  position:relative;margin-top:-46px;padding:110px 0 8px;text-align:center;
  background:linear-gradient(180deg,rgba(255,255,255,0) 0%,#fff 58%);
}
.prose-gate .hint{margin:12px 0 0}
.mpane-sec{padding-bottom:8px}
.mpane-sec + .mpane-sec{border-top:1px dashed var(--line);margin-top:26px;padding-top:8px}
.notes{
  margin:1.2em 0 0;padding:16px 20px;border-radius:var(--radius-sm);
  background:#fff8ec;border:1px solid #ffe2b8;
}
.notes h5{margin:0 0 .6em;color:#a86a00}
.notes ol{margin:0;padding-left:1.3em}
.notes li{margin-bottom:.4em}

.code{
  margin:1em 0;padding:18px 20px;border-radius:var(--radius-sm);overflow-x:auto;
  background:#0b1430;color:#c8e1ff;font-size:.85rem;line-height:1.75;
  border:1px solid rgba(143,216,255,.14);white-space:pre;
}
.prose-table{width:100%;border-collapse:collapse;margin:1em 0;font-size:.9rem;min-width:420px}
.prose-table th,.prose-table td{
  border:1px solid var(--line);padding:10px 14px;text-align:left;
}
.prose-table thead th{background:#f3f6fe;font-weight:700;color:#33405e}
.prose-table tbody tr:hover{background:#fafbff}
.table-scroll{overflow-x:auto;border-radius:var(--radius-sm)}

.apx{
  border:1px solid var(--line);border-radius:var(--radius-sm);margin-bottom:12px;
  background:#fcfdff;overflow:hidden;
}
.apx summary{
  padding:15px 20px;cursor:pointer;font-weight:700;color:var(--ink);font-size:.96rem;
  list-style:none;transition:background .2s;
}
.apx summary::-webkit-details-marker{display:none}
.apx summary::before{content:"▸";color:var(--brand);margin-right:10px;display:inline-block;
  transition:transform .2s}
.apx[open] summary::before{transform:rotate(90deg)}
.apx summary:hover{background:#f3f6fe}
.apx > p,.apx > pre,.apx > ul{margin-left:20px;margin-right:20px}
.apx > p:first-of-type{margin-top:14px}
.apx > *:last-child{margin-bottom:18px}

.attach-list{display:grid;gap:10px;margin-top:12px}
.attach-item{
  display:flex;align-items:center;justify-content:space-between;gap:16px;
  padding:14px 18px;border-radius:var(--radius-sm);border:1px solid var(--line);
  background:#fbfcff;transition:border-color .2s,transform .2s,box-shadow .2s;
}
.attach-item:hover{border-color:#cfdcff;transform:translateY(-2px);box-shadow:var(--shadow-sm)}
.attach-name{font-weight:600;color:var(--ink);font-size:.92rem}
.attach-meta{font-size:.78rem;color:var(--muted)}
.attach-empty{
  padding:18px;border-radius:var(--radius-sm);border:1px dashed var(--line);
  color:var(--muted);font-size:.88rem;text-align:center;background:#fbfcff;
}

.form-download{
  display:flex;align-items:center;gap:14px;flex-wrap:wrap;margin-top:22px;
  padding:18px 20px;border-radius:var(--radius-sm);
  background:var(--grad-soft);border:1px solid #d8e4ff;
}

/* ============================ 成果提交页 ============================ */
.page-head{
  padding:140px 0 66px;color:#fff;position:relative;overflow:hidden;
  background:
    radial-gradient(900px 460px at 82% -20%,rgba(0,212,255,.26),transparent 60%),
    linear-gradient(150deg,#070c1c,#101c44 60%,#0a1024);
}
.page-head h1{font-size:clamp(1.9rem,3.6vw,2.7rem);margin-bottom:.35em}
.page-head p{color:rgba(255,255,255,.74);max-width:760px}
.page-head-meta{display:flex;gap:10px;flex-wrap:wrap;margin-top:18px}
.page-head-admin{padding:130px 0 46px}
.admin-head{display:flex;align-items:flex-end;justify-content:space-between;gap:24px;flex-wrap:wrap}

.submit-grid{display:grid;grid-template-columns:minmax(300px,1fr) minmax(420px,1.35fr);gap:28px;
  align-items:start}
.submit-steps{display:grid;gap:16px}
.sstep{
  display:flex;gap:18px;padding:24px 24px;border-radius:var(--radius);background:var(--paper);
  border:1px solid var(--line);box-shadow:var(--shadow-sm);
  transition:transform .3s var(--ease),box-shadow .3s var(--ease),border-color .3s;
}
.sstep:hover{transform:translateY(-4px);box-shadow:var(--shadow);border-color:#cfdcff}
.sstep-no{
  flex:0 0 44px;height:44px;border-radius:14px;display:grid;place-items:center;
  font-weight:800;color:#fff;background:var(--grad);box-shadow:0 10px 22px rgba(47,107,255,.28);
}
.sstep-body{min-width:0}
.sstep-body h3{font-size:1.02rem;margin-bottom:.5em}
.sstep-path{margin:0;font-size:.9rem;color:#33405e;word-break:break-all}
.sstep-path code{
  display:inline-block;padding:.2em .6em;border-radius:8px;background:#eef2fd;color:#24408f;
  font-size:.86rem;
}
.apx-link{color:var(--brand);font-weight:700;text-decoration:underline;
  text-underline-offset:3px;margin-left:2px}
.apx-link:hover{color:var(--brand-3)}

.submit-tip{
  padding:22px 24px;border-radius:var(--radius);background:#fff8ec;border:1px solid #ffe2b8;
}
.submit-tip h4{font-size:.98rem;color:#a86a00;margin-bottom:.6em}
.submit-tip p{margin:0 0 .5em;font-size:.9rem;color:#5d4a20}

.submit-card{
  padding:28px;border-radius:var(--radius);background:var(--paper);border:1px solid var(--line);
  box-shadow:var(--shadow);
}
.submit-card-head{display:flex;align-items:center;justify-content:space-between;gap:16px;
  margin-bottom:18px;flex-wrap:wrap}
.submit-card-head h3{font-size:1.1rem;margin:0}

/* 四列定宽：标签 132px + 值列平分剩余宽度。
   table-layout:fixed 是关键 —— 默认的自动布局会按内容分配宽度，
   有人填了一长串联系方式时那一格会把姓名/学号/学院挤扁。
   定宽之后值列宽度只由表格宽度决定，长内容在格内换行（见下面的 overflow-wrap）。 */
.rstable{width:100%;border-collapse:collapse;margin-top:14px;table-layout:fixed}
.rstable th,.rstable td{
  border:1px solid var(--line);padding:14px 16px;vertical-align:top;
  text-align:left;font-size:.92rem;
  /* 邮箱、长链接这类没有空格的串也要能断行，否则会顶破单元格 */
  overflow-wrap:anywhere;
}
.rstable th{background:#f5f8ff;font-weight:600;width:132px;color:#33405e}
.rstable em{color:var(--muted);font-style:normal}

/* 结果统计表：可编辑输入 + 统一身份认证提供的只读值 */
.rstable-input{
  width:100%;padding:.5em .7em;border-radius:8px;border:1px solid var(--line);
  background:#fff;font-family:inherit;font-size:.92rem;color:var(--ink);
}
.rstable-input:focus{outline:0;border-color:var(--brand);box-shadow:0 0 0 3px rgba(47,107,255,.12)}
/* 下拉：去掉系统默认外观，自己画一个箭头，与输入框同宽同高 */
select.rstable-input{
  appearance:none;-webkit-appearance:none;cursor:pointer;padding-right:2.4em;
  background-image:linear-gradient(45deg,transparent 50%,#7c8bb0 50%),
                   linear-gradient(135deg,#7c8bb0 50%,transparent 50%);
  background-position:calc(100% - 18px) calc(50% + 1px),calc(100% - 13px) calc(50% + 1px);
  background-size:5px 5px,5px 5px;background-repeat:no-repeat;
}
/* 统一身份认证提供的只读值：就是一行正常文字，不可编辑而已。
   原来那枚锁图标（::before）和外面的蓝底胶囊都去掉了 ——
   与旁边的输入框形成对比，本身就说明了「这里改不了」。
   内边距与 .rstable-input 对齐，两列的基线才不会一高一低。 */
.id-locked{display:block;padding:.5em .7em;font-weight:600;color:var(--ink)!important}

/* 报名 / 提交的操作结果提示条 */
.notice{
  margin-top:22px;padding:16px 22px;border-radius:var(--radius-sm);font-size:.92rem;
  background:#e9f9f0;border:1px solid #bfe9d1;color:#0f7a3d;
}
.notice.warn{background:#fff8ec;border-color:#ffe2b8;color:#a86a00}
/* 放进卡片/表格单元格里时不要再撑一段上边距 */
.notice-inline{margin-top:0}
.pill-ok{background:#e9f9f0;color:#12a150;border-color:#bfe9d1}

/* 登录页分隔小标题 */
.auth-head{
  margin:24px 0 10px;padding-top:18px;border-top:1px solid var(--line);
  font-size:.82rem;font-weight:800;letter-spacing:.12em;color:var(--muted);
}
.auth-head:first-of-type{border-top:0;padding-top:0;margin-top:18px}

.checks{display:flex;flex-wrap:wrap;gap:12px}
.check{
  display:inline-flex;align-items:center;gap:9px;padding:.55em 1.1em;border-radius:999px;
  border:1px solid var(--line);background:#fbfcff;cursor:pointer;font-size:.9rem;
  transition:border-color .2s,background .2s,color .2s,transform .2s;
}
.check:hover{border-color:#b9cbff;transform:translateY(-2px)}
.check input{width:16px;height:16px;accent-color:var(--brand);cursor:pointer;margin:0}
.check:has(input:checked){background:var(--grad-soft);border-color:var(--brand);color:#1b3aa0;
  font-weight:600}
/* 已报名后赛道只是只读展示：沿用 .check 的外观，去掉可点的手势与悬停位移 */
.check.is-locked{cursor:default;background:var(--grad-soft);border-color:#cfdcff;
  color:#1b3aa0;font-weight:600}
.check.is-locked:hover{transform:none;border-color:#cfdcff}
.check-inline{display:inline-flex;align-items:center;gap:8px;font-size:.9rem}

.report-cell{display:grid;gap:12px}
/* 「提交报告」按钮跳到这里；留出吸顶导航的高度，别被盖住 */
#report-upload{scroll-margin-top:100px}
.report-actions{display:flex;gap:10px;flex-wrap:wrap}
.file-list{list-style:none;margin:0;padding:0;display:grid;gap:8px}
.file-list:empty{display:none}
.file-item{
  display:flex;align-items:center;justify-content:space-between;gap:14px;
  padding:10px 14px;border-radius:10px;background:#f5f8ff;border:1px solid var(--line);
  font-size:.86rem;
}
.file-item.bad{background:#fff0f0;border-color:#ffd7d7;color:var(--danger)}
.file-remove{
  border:0;background:transparent;color:var(--muted);cursor:pointer;font-size:.82rem;
  text-decoration:underline;
}
.file-remove:hover{color:var(--danger)}
.submit-foot{
  display:flex;align-items:center;justify-content:space-between;gap:16px;flex-wrap:wrap;
  margin-top:22px;padding-top:20px;border-top:1px dashed var(--line);
}

/* 已提交：只读展示，不再给上传入口 */
/* 文件行右侧的「查看 / 移除」操作 */
.file-ops{display:inline-flex;align-items:center;gap:14px;flex:none}
.file-op{
  border:0;background:transparent;padding:0;color:var(--brand);cursor:pointer;
  font-family:inherit;font-size:.84rem;font-weight:600;text-decoration:underline;
  text-underline-offset:3px;white-space:nowrap;
}
.file-op:hover{color:var(--brand-3)}
.file-op.danger{color:var(--muted)}
.file-op.danger:hover{color:var(--danger)}
.file-tag{
  font-style:normal;margin-left:8px;padding:.1em .5em;border-radius:6px;
  background:#eef2fd;color:#516088;font-size:.74rem;font-weight:600;
}
/* 就绪（本地）文件与已保存草稿的区别：前者底色更浅 */
.file-item[data-local]{background:#fbfcff}
.submit-actions{display:flex;align-items:center;gap:12px;flex-wrap:wrap}

.report-done{display:grid;gap:12px}
.report-done-head{
  margin:0;display:flex;align-items:center;gap:10px;flex-wrap:wrap;
  font-size:.9rem;color:#33405e;
}
.chip-ok{background:#e9f9f0;color:var(--ok);font-weight:700}
/* 页头的「已完成提交」印章 */
.pill-ok-seal{background:var(--grad);color:#fff;font-weight:700;box-shadow:0 6px 16px rgba(47,107,255,.28)}

/* 后台附件列表小窗 */
.pick-list{list-style:none;margin:12px 0 0;padding:0;display:grid;gap:8px}
.pick-item{
  display:flex;align-items:center;justify-content:space-between;gap:14px;
  padding:11px 14px;border-radius:10px;background:#fbfcff;border:1px solid var(--line);
  font-size:.88rem;
}
.pick-item .hint{margin:0;white-space:nowrap}
.pick-right{display:inline-flex;align-items:center;gap:12px}
/* 单个文件下载图标（浅底用的描边按钮） */
.icon-btn{
  flex:none;display:inline-grid;place-items:center;width:30px;height:30px;
  border:1px solid var(--line);border-radius:9px;background:#fff;color:#516088;
  cursor:pointer;transition:border-color .2s,color .2s,background .2s;
}
.icon-btn:hover{border-color:var(--brand);color:var(--brand);background:#f5f8ff}
.icon-btn svg{width:15px;height:15px;fill:none;stroke:currentColor;stroke-width:1.8;
  stroke-linecap:round;stroke-linejoin:round}
.row-actions{display:flex;gap:8px;align-items:center;flex-wrap:wrap}
.row-actions form{display:inline}

/* 轻提示（上传校验 / 打包结果） */
.toast-box{
  position:fixed;right:24px;bottom:88px;z-index:80;display:grid;gap:10px;
  justify-items:end;max-width:min(92vw,440px);
}
.toast{
  padding:12px 18px;border-radius:12px;font-size:.9rem;font-weight:600;line-height:1.6;
  background:#fff0f0;color:var(--danger);border:1px solid #ffd7d7;box-shadow:var(--shadow);
  opacity:0;transform:translateY(10px);
  transition:opacity .25s var(--ease),transform .25s var(--ease);
}
.toast.on{opacity:1;transform:none}
.toast.ok{background:#e9f9f0;color:var(--ok);border-color:#bfe9d1}

/* ============================ 登录 ============================ */
.auth-wrap{
  min-height:100vh;display:grid;place-items:center;padding:130px 24px 80px;
  background:
    radial-gradient(800px 420px at 80% 0%,rgba(0,212,255,.22),transparent 60%),
    linear-gradient(160deg,#070c1c,#0d1738 60%,#0a1024);
}
.auth-card{
  width:min(100%,430px);padding:40px 36px;border-radius:22px;background:#fff;
  box-shadow:var(--shadow-lg);
}
.auth-card h1{font-size:1.5rem;margin-bottom:.3em}
.auth-form{display:grid;gap:16px;margin:22px 0 18px}
.auth-form label{display:grid;gap:8px;font-size:.88rem;font-weight:600;color:#33405e}
.auth-form input{
  padding:.75em 1em;border-radius:12px;border:1px solid var(--line);background:#fbfcff;
  font-family:inherit;font-size:.95rem;transition:border-color .2s,box-shadow .2s;
}
.auth-form input:focus{
  outline:0;border-color:var(--brand);background:#fff;
  box-shadow:0 0 0 4px rgba(47,107,255,.12);
}
.auth-back{display:inline-block;margin-top:8px;font-size:.88rem;color:var(--muted)}
.auth-back:hover{color:var(--brand)}

/* ============================ 后台 ============================ */
.alert{padding:14px 18px;border-radius:12px;margin-bottom:18px;font-size:.9rem;font-weight:600}
.alert-ok{background:#e9f9f0;color:var(--ok);border:1px solid #bfe9d1}
.alert-error{background:#fff0f0;color:var(--danger);border:1px solid #ffd7d7}
.alert-note{background:#f1f5ff;color:#33405e;border:1px solid #d9e2fb;font-weight:500}
/* 后台正文紧跟页头，不再垫一层板块间距 —— 否则第一条提示离页头隔着一大片空白 */
.admin-body{padding-top:26px}


/* 附件管理和提交文档都带 5 列表格，并排会把列挤到换行 —— 改为上下两行 */
.admin-grid{display:grid;grid-template-columns:1fr;gap:22px;margin-bottom:22px}
.admin-panel{
  padding:26px;border-radius:var(--radius);background:#fff;border:1px solid var(--line);
  box-shadow:var(--shadow-sm);margin-bottom:22px;
}
.admin-panel h2{font-size:1.15rem;margin-bottom:8px}
.admin-panel > .hint{margin-bottom:18px}
.admin-form{display:grid;gap:14px;margin-bottom:20px;padding:18px;border-radius:var(--radius-sm);
  background:#f8faff;border:1px dashed var(--line)}
/* grid 子项默认 stretch，会把提交按钮拉成整行宽；按内容宽度显示 */
.admin-form > .btn{justify-self:start}
/* 每个字段独占一行，不再横向并排 */
.form-row{display:grid;grid-template-columns:1fr;gap:14px}
/* :not(.check-inline) —— 否则这条会盖掉 .check-inline 的 inline-flex，
   把复选框和它的文字拉成上下两行并撑满整行，看起来就是"错位" */
.form-row label:not(.check-inline){display:grid;gap:8px;font-size:.86rem;font-weight:600;color:#33405e}
.form-row input[type=text],.form-row select,.form-row input[type=file]{
  padding:.6em .9em;border-radius:10px;border:1px solid var(--line);background:#fff;
  font-family:inherit;font-size:.9rem;width:100%;
}
.form-row select:disabled{background:#f2f5fd;color:var(--muted);cursor:not-allowed}
.form-row label.muted span{color:var(--muted)}
.admin-form .check-inline{
  display:flex;align-items:center;gap:10px;font-size:.9rem;font-weight:600;
  color:#33405e;cursor:pointer;
}
.admin-form .check-inline input[type=checkbox]{
  width:17px;height:17px;flex:none;accent-color:var(--brand);cursor:pointer;
}
/* 标题与右侧工具（搜索框 / 导出按钮）同行，两端对齐 */
.panel-head{display:flex;align-items:center;justify-content:space-between;
  gap:16px;flex-wrap:wrap;margin-bottom:8px}
.panel-head h2{margin:0}
.panel-tools{display:flex;align-items:center;gap:10px;flex-wrap:wrap}
.table-search{display:flex;align-items:center;gap:8px}
.table-search input[type=search]{
  padding:.42em .8em;border-radius:10px;border:1px solid var(--line);background:#fbfcff;
  font-family:inherit;font-size:.84rem;min-width:170px;
}
.table-search input[type=search]:focus{
  outline:0;border-color:var(--brand);background:#fff;
  box-shadow:0 0 0 3px rgba(47,107,255,.12);
}
/* 长表格最多占半屏，超出在框内滚动；行数由服务端分页控制 */
.table-half{max-height:50vh;overflow:auto}
.table-half thead th{position:sticky;top:0;z-index:1}
.pager{display:flex;align-items:center;justify-content:space-between;gap:12px;
  flex-wrap:wrap;margin-top:12px}
.pager .hint{margin:0}
.pager-nav{display:flex;gap:8px}
.btn.is-off{opacity:.45;pointer-events:none}

.admin-table{font-size:.86rem}
.admin-table th{width:auto}

/* ============================ 报名情况概览 ============================ */
/* 三列：提交进度 / 报名学院占比（可切换赛道）/ 提交情况环图（可切换赛道）。
   窄屏按 auto-fit 自动折成 2 列、1 列，不需要额外的断点规则。 */
.overview{display:grid;grid-template-columns:repeat(auto-fit,minmax(272px,1fr));gap:20px}
.ov-col{
  display:flex;flex-direction:column;gap:16px;padding:20px;
  border-radius:var(--radius-sm);background:#fbfcff;border:1px solid var(--line);
}
.ov-col h3{margin:0;font-size:.98rem;color:var(--ink)}
.chart-head{display:flex;align-items:center;justify-content:space-between;gap:12px;flex-wrap:wrap}

/* 赛道切换开关 */
.switch{display:inline-flex;padding:3px;border-radius:999px;background:#eef2fd;
  border:1px solid var(--line)}
.switch-btn{
  border:0;background:transparent;border-radius:999px;padding:.34em .82em;
  font-family:inherit;font-size:.78rem;font-weight:600;color:var(--muted);
  cursor:pointer;white-space:nowrap;transition:background .2s,color .2s;
}
.switch-btn:hover{color:var(--brand)}
.switch-btn.on{background:#fff;color:var(--brand);box-shadow:var(--shadow-sm)}

/* 图表面板：同一列里只显示当前选中赛道的那一块 */
.chart-pane{display:none;flex-direction:column;align-items:center;gap:14px}
.chart-pane.on{display:flex}

/* 横向进度条 */
.bars{display:grid;gap:18px}
.bar-row{display:grid;gap:7px}
.bar-top{display:flex;align-items:baseline;justify-content:space-between;gap:10px;
  font-size:.86rem;color:#33405e}
.bar-top b{font-size:.95rem;color:var(--ink);white-space:nowrap}
.bar{height:10px;border-radius:999px;background:#e9eefa;overflow:hidden}
.bar i{display:block;height:100%;border-radius:999px;background:var(--grad);
  transition:width .5s var(--ease)}
.bar-row .hint{margin:0;font-size:.8rem}

/* 饼图 / 环图：尺寸收敛到接近方形，不铺满整列 */
.org-pie{
  flex:none;width:min(100%,170px);aspect-ratio:1;border-radius:50%;
  box-shadow:var(--shadow-sm),inset 0 0 0 1px rgba(16,26,64,.06);
}
.donut{
  position:relative;flex:none;width:min(100%,170px);aspect-ratio:1;border-radius:50%;
  display:grid;place-items:center;
}
.donut::before{content:"";position:absolute;inset:24%;border-radius:50%;background:#fbfcff}
.donut-in{position:relative;text-align:center;line-height:1.25}
.donut-in b{display:block;font-size:1.32rem;font-weight:800;color:var(--ink)}
.donut-in span{font-size:.74rem;color:var(--muted)}

.org-legend{width:100%;list-style:none;margin:0;padding:0;display:grid;gap:8px}
.org-legend li{display:flex;align-items:center;gap:10px;font-size:.86rem}
.org-legend i{flex:none;width:12px;height:12px;border-radius:4px}
.org-legend .org-name{flex:1;min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;
  color:#33405e}
.org-legend b{font-weight:700;color:var(--ink)}
.org-legend .org-pct{width:3.6em;text-align:right;color:var(--muted);font-size:.84rem}
.org-empty{margin:0;font-size:.86rem;color:var(--muted)}
.admin-actions{display:flex;gap:12px;margin-top:14px}
.json-editor{
  width:100%;min-height:420px;padding:18px;border-radius:var(--radius-sm);
  border:1px solid var(--line);background:#0b1430;color:#c8e1ff;
  font-family:"JetBrains Mono",Consolas,monospace;font-size:.82rem;line-height:1.6;
  resize:vertical;
}
.json-editor:focus{outline:0;border-color:var(--brand)}

/* ============================ 滚动动画 ============================ */
.reveal{opacity:0;transform:translateY(26px);
  transition:opacity .7s var(--ease),transform .7s var(--ease)}
.reveal.in{opacity:1;transform:none}

/* ============================ 响应式 ============================ */
@media (max-width:1080px){
  .footer-grid{grid-template-columns:1fr 1fr}
  .submit-grid{grid-template-columns:1fr}
  .facts-in{grid-template-columns:repeat(2,1fr)}
  .fact:nth-child(2){border-right:0}
  .fact:nth-child(1),.fact:nth-child(2){border-bottom:1px solid var(--line)}
  /* 窄屏放不下 3 列时按需折行，两组之间仍是硬换行 */
  .award-grid{grid-template-columns:repeat(auto-fit,minmax(240px,1fr))}
}

/* 导航有 6 项（含「平台使用」）时，约 1000px 以下横向就排不开了，
   所以在 1024px 就切换成汉堡菜单，而不是等到 860px 让文字挤成两行。
   其余响应式规则仍在 860px 生效。 */
@media (max-width:1024px){
  .nav-toggle{display:block}
  .nav-links{
    position:fixed;top:74px;right:0;left:0;flex-direction:column;align-items:stretch;gap:2px;
    padding:18px 24px 26px;background:rgba(8,13,30,.98);backdrop-filter:blur(20px);
    border-bottom:1px solid rgba(255,255,255,.1);
    transform:translateY(-12px);opacity:0;pointer-events:none;transition:all .25s var(--ease);
  }
  .nav-links.open{transform:none;opacity:1;pointer-events:auto}
  .nav-links a{padding:.9em 1em;font-size:1rem}
  .nav-links a::after{display:none}
  .nav-cta{margin:8px 0 0;text-align:center;justify-content:center;display:flex}
  /* 收起状态下登录态也走整行 */
  .nav-login{margin:8px 0 0;text-align:center}
  .nav-user{margin:10px 0 0;align-self:flex-start}
  .nav-user-name{max-width:none}
  /* 汉堡菜单里下拉改成行内展开，绝对定位会飘到菜单外面 */
  .nav-menu-wrap{margin:10px 0 0;align-self:stretch;flex-direction:column;align-items:flex-start}
  .nav-menu-wrap .nav-user{margin:0}
  .nav-menu{position:static;margin-top:8px;right:auto;top:auto;width:100%}
}

@media (max-width:860px){
  .hero{padding:120px 0 96px}
  .modal{max-width:96vw}
  .modal-head,.modal-body,.modal-foot,.modal-tabs{padding-left:20px;padding-right:20px}
  .timeline::before{display:none}
  /* 手机上保持「序号在左、内容在右」的一行结构：整块竖排会让 01 独占一行，
     所以这里只把序号缩小，不改变方向 */
  .tl-card{gap:16px;padding:20px 18px}
  .tl-no{flex:0 0 46px;height:46px;border-radius:14px;font-size:1.05rem}
  .footer-grid{grid-template-columns:1fr}
  .award-grid{grid-template-columns:1fr}
  .track-block{padding:18px}
}

@media (max-width:560px){
  .wrap{width:min(100% - 32px,var(--wrap))}
  .sec{padding:42px 0}
  .facts-in{grid-template-columns:1fr}
  .fact{border-right:0;border-bottom:1px solid var(--line)}
  .fact:last-child{border-bottom:0}
  .countdown{gap:10px;padding:14px 16px}
  .cd-cell{min-width:56px}
  .cd-cell b{font-size:1.45rem}
  .cd-label{border-left:0;padding-left:0;width:100%}
  /* 窄屏把标签列收窄给值列让位。原来写的 width:auto 配 table-layout:fixed
     会让四列平分宽度 —— 手机上每个值列只剩五十来像素，填什么都要折成好几行 */
  .rstable th{width:76px}
  .rstable th,.rstable td{padding:10px 12px;font-size:.86rem}
  .submit-card{padding:20px}
  .admin-grid{grid-template-columns:1fr}
  .to-top{right:16px;bottom:16px}
}

@media print{
  .topbar,.footer,.to-top,.hero-canvas,.hero-actions{display:none}
}