/* ============================================================
   江苏省科学与艺术创新大赛 · 官网共用样式基线
   UI 基线：全站统一变量，新增页面直接套用，不要各写一套
   ============================================================ */

:root{
  /* 品牌色 */
  --brand:      #1a3a6b;   /* 主色 深蓝 */
  --brand-2:    #2a5490;   /* 主色 亮一档 */
  --brand-soft: #eaf0f8;   /* 主色 浅底 */
  --accent:     #A6192E;   /* 强调 学术红（Logo 白底场景） */
  --accent-soft:#fbeef0;

  /* 中性 */
  --ink:        #1a1a1a;   /* 正文 */
  --ink-2:      #3d4652;   /* 次级正文 */
  --muted:      #6b7684;   /* 辅助文字 */
  --line:       #e3e8ef;   /* 分隔线 */
  --line-2:     #cdd6e2;
  --bg:         #ffffff;
  --bg-soft:    #f6f8fb;

  /* 排版 */
  --font: "Source Han Sans SC","Noto Sans SC","Microsoft YaHei","PingFang SC",-apple-system,"Helvetica Neue",Arial,sans-serif;
  --font-mono: "JetBrains Mono","Consolas","Courier New",monospace;

  /* 栅格与间距 */
  --w: 1180px;
  --gap: 24px;
  --r: 8px;

  /* 阴影 */
  --sh-1: 0 1px 3px rgba(26,42,74,.06);
  --sh-2: 0 6px 22px rgba(26,42,74,.10);

  /* 功能色（自硬编码收敛，等值替换） */
  --accent-2:  #8d1526;   /* 强调红 hover */

  /* 辅助色：一律低饱和、带灰度，不用棕黄 */
  --violet:      #5b4e8a;   /* 灰紫 —— 待处理 / 提示 */
  --violet-soft: #efedf6;
  --violet-line: #d8d2e8;
  --slate:       #5a6472;   /* 石板灰蓝 —— 占位 / 次级信息 */
  --slate-soft:  #eef1f5;
  --slate-line:  #d6dde6;

  --ok:        #1d7a41;   /* 成功文字 */
  --ok-soft:   #eaf5ee;   /* 成功底 */

  /* 微交互：全站统一节奏，只用于 hover / focus，不做滚动或入场动画 */
  --t: 200ms cubic-bezier(.25,.46,.45,.94);
}

*{box-sizing:border-box}
html{-webkit-text-size-adjust:100%}
body{
  margin:0; background:var(--bg); color:var(--ink);
  font:16px/1.85 var(--font);
  -webkit-font-smoothing:antialiased;
}
img{max-width:100%;display:block}
a{color:var(--brand);text-decoration:none}
a:hover{text-decoration:underline}
h1,h2,h3,h4{line-height:1.4;margin:0 0 .6em;font-weight:700}
h1{font-size:30px}
h2{font-size:22px}
h3{font-size:18px}
p{margin:0 0 1em}

.wrap{max-width:var(--w);margin:0 auto;padding:0 24px}

/* ---------- 顶栏（上行 = 品牌 + 报名按钮；下行 = 导航条独占一行） ---------- */
/* 磨玻璃：半透明白 + 背景模糊，滚动时下层内容透出柔和光晕 */
.topbar{
  position:sticky;top:0;z-index:50;
  background:rgba(255,255,255,.72);
  -webkit-backdrop-filter:saturate(1.5) blur(14px);
  backdrop-filter:saturate(1.5) blur(14px);
  border-bottom:1px solid rgba(26,58,107,.14);
  box-shadow:var(--sh-1);
}
.topbar .wrap{display:flex;flex-wrap:wrap;align-items:center;gap:8px 28px;padding-top:10px;padding-bottom:10px}
.brand{display:flex;align-items:center;gap:12px;flex:0 0 auto}
.brand img.logo{height:38px;width:auto}
.brand .brand-en{font-size:10px;letter-spacing:.08em;color:var(--muted);line-height:1.25}
.brand .brand-cn{font-size:15px;font-weight:700;color:var(--ink);line-height:1.2}

/* 导航独立成第二行：上边框分隔，通栏贴边，当前页高亮 */
.nav{
  order:3;flex:1 1 100%;display:flex;gap:2px;flex-wrap:wrap;
  margin:4px -24px 0;padding:6px 24px 2px;
  border-top:1px solid var(--line);
}
.nav a{
  display:block;padding:7px 13px;border-radius:6px;font-size:14.5px;color:var(--ink-2);
  white-space:nowrap;
  background:linear-gradient(var(--brand),var(--brand)) no-repeat left calc(100% - 3px) / 0% 2px;
  transition:color var(--t),background-color var(--t),background-size var(--t);
}
.nav a:hover{
  background-color:transparent;color:var(--brand);text-decoration:none;
  background-size:100% 2px;
}
.nav a.on{color:#fff;background:var(--brand)}
.nav a.on:hover{background:var(--brand-2);color:#fff}

.top-cta{flex:0 0 auto;margin-left:auto;display:flex;gap:10px;align-items:center}
.btn{
  display:inline-block;padding:9px 18px;border-radius:6px;font-size:14px;font-weight:600;
  border:1px solid var(--brand);background:var(--brand);color:#fff;white-space:nowrap;
  transition:background var(--t),border-color var(--t),color var(--t),
             transform var(--t),box-shadow var(--t);
}
.btn:hover{background:var(--brand-2);border-color:var(--brand-2);text-decoration:none;color:#fff;
  transform:translateY(-1px);box-shadow:var(--sh-2)}
.btn:active{transform:translateY(0);box-shadow:none;transition-duration:80ms}
.btn.ghost{background:#fff;color:var(--brand)}
.btn.ghost:hover{background:var(--brand-soft);color:var(--brand);box-shadow:none}
.btn.red{background:var(--accent);border-color:var(--accent)}
.btn.red:hover{background:var(--accent-2);border-color:var(--accent-2)}

/* ---------- 页脚 ---------- */
.foot{background:#132c50;color:#c9d4e4;margin-top:64px;padding:44px 0 28px;font-size:14px}
.foot a{color:#c9d4e4}
.foot a:hover{color:#fff}
.foot-cols{display:flex;flex-wrap:wrap;gap:40px}
.foot-col{flex:1 1 220px;min-width:200px}
.foot-col h4{font-size:14px;color:#fff;margin-bottom:12px;letter-spacing:.06em}
.foot-col p,.foot-col li{margin:0 0 8px;line-height:1.9}
.foot-col ul{list-style:none;padding:0;margin:0}
.foot img.logo{height:44px;width:auto;margin-bottom:14px}
.foot-bar{
  margin-top:28px;padding-top:18px;border-top:1px solid rgba(255,255,255,.14);
  font-size:13px;color:#8fa3bd;display:flex;flex-wrap:wrap;gap:8px 24px;
}

/* ---------- 通用块 ---------- */
.sec{padding:56px 0}
.sec.soft{background:var(--bg-soft)}
.sec-h{margin-bottom:28px}
.sec-h .kicker{font-size:13px;letter-spacing:.16em;color:var(--accent);font-weight:700;margin-bottom:8px}
.sec-h h2{font-size:26px;margin:0}
.sec-h p{margin:10px 0 0;color:var(--muted);font-size:15px}

.grid{display:grid;gap:20px}
.g2{grid-template-columns:repeat(2,1fr)}
.g3{grid-template-columns:repeat(3,1fr)}
.g4{grid-template-columns:repeat(4,1fr)}

.card{
  background:#fff;border:1px solid var(--line);border-radius:var(--r);padding:22px;
  box-shadow:var(--sh-1);
}
.card h3{margin-bottom:10px}

/* 可点击卡片（首页赛道 → 指南锚点） */
a.card{display:block;transition:box-shadow .18s,transform .18s,border-color .18s}
a.card:hover{box-shadow:var(--sh-2);transform:translateY(-2px);border-color:var(--brand)}
/* 锚点跳转时给吸顶页头留出高度 */
[id^="track-"],#qaBoard{scroll-margin-top:86px}

.tag{display:inline-block;padding:2px 9px;border-radius:4px;font-size:12px;font-weight:700;line-height:1.7}
.tag.b{background:var(--brand-soft);color:var(--brand)}
.tag.r{background:var(--accent-soft);color:var(--accent)}
.tag.g{background:var(--ok-soft);color:var(--ok)}
.tag.y{background:var(--violet-soft);color:var(--violet)}
.tag.o{background:var(--slate-soft);color:var(--slate)}

.muted{color:var(--muted)}
.small{font-size:13.5px}

/* 表格 */
table.tb{width:100%;border-collapse:collapse;font-size:14.5px}
table.tb th,table.tb td{border:1px solid var(--line);padding:10px 12px;vertical-align:top;text-align:left}
table.tb tbody tr{transition:background var(--t)}
table.tb tbody tr:hover{background:var(--bg-soft)}

/* 键盘焦点：统一且可见 */
a:focus-visible,button:focus-visible,input:focus-visible{outline:2px solid var(--brand-2);outline-offset:2px;border-radius:4px}
table.tb th{background:var(--bg-soft);font-weight:700;white-space:nowrap}
table.tb tbody tr:nth-child(even) td{background:#fbfcfd}

/* 文档体（正文类页面） */
.doc{max-width:900px;margin:0 auto;padding:48px 24px 72px}
.doc .doc-head{border-bottom:2px solid var(--ink);padding-bottom:18px;margin-bottom:8px}
.doc .doc-head img{height:52px;width:auto;margin-bottom:14px}
.doc .doc-head h1{font-size:28px;margin:0 0 6px}
.doc .doc-meta{font-size:13.5px;color:var(--muted);margin-top:10px}
.doc h2{margin-top:44px;padding-bottom:8px;border-bottom:1px solid var(--line);font-size:21px}
.doc h3{margin-top:28px;font-size:17px;color:var(--brand)}
.doc ol,.doc ul{padding-left:1.4em}
.doc li{margin-bottom:8px}
.doc .note{
  background:var(--brand-soft);border-left:4px solid var(--brand);
  padding:14px 18px;border-radius:0 var(--r) var(--r) 0;margin:18px 0;font-size:14.5px;
}
.doc .note.warn{background:var(--violet-soft);border-color:var(--violet-line)}
.doc .note.key{background:var(--accent-soft);border-color:var(--accent)}
.doc .note p:last-child{margin-bottom:0}
.doc .quote{
  background:var(--bg-soft);border:1px dashed var(--line-2);border-radius:var(--r);
  padding:16px 18px;font-size:14.5px;margin:16px 0;
}
.doc .sign{margin-top:52px;text-align:right;font-size:15px;line-height:2.2}
.doc .sign .stamp{color:var(--muted);font-size:13px}

/* Banner */
.banner{
  background:linear-gradient(120deg,#16335f 0%,#1a3a6b 45%,#2a5490 100%);
  color:#fff;padding:76px 0 68px;position:relative;overflow:hidden;
}
.banner::after{
  content:"";position:absolute;right:-120px;top:-120px;width:520px;height:520px;
  border:1px solid rgba(255,255,255,.10);border-radius:50%;
}
.banner .wrap{position:relative;z-index:2}
.banner img.logo{height:60px;width:auto;margin-bottom:24px}
.banner h1{font-size:40px;margin:0 0 14px;letter-spacing:.02em}
.banner .sub{font-size:18px;color:#c5d5ec;margin:0 0 8px}
.banner .meta{font-size:14.5px;color:#a8bdd9;margin:0 0 30px}
.banner .btns{display:flex;gap:12px;flex-wrap:wrap}
.banner .btn{background:var(--accent);border-color:var(--accent);padding:12px 26px;font-size:15px}
.banner .btn:hover{background:var(--accent-2);border-color:var(--accent-2)}
.banner .btn.ghost{background:transparent;color:#fff;border-color:rgba(255,255,255,.6)}
.banner .btn.ghost:hover{background:rgba(255,255,255,.12);border-color:#fff}

/* 内页页头 */
.pagehead{
  background:linear-gradient(120deg,#16335f 0%,#1a3a6b 60%,#2a5490 100%);
  color:#fff;padding:44px 0 40px;
}
.pagehead .kicker{font-size:13px;letter-spacing:.16em;color:#e8b4bc;font-weight:700;margin-bottom:8px}
.pagehead h1{font-size:31px;margin:0 0 8px}
.pagehead p{margin:0;color:#c5d5ec;font-size:15.5px}
.pagehead .crumbs{font-size:13px;color:#9db4d2;margin-bottom:12px}
.pagehead .crumbs a{color:#c5d5ec}

/* 状态条 */
.ticker{background:#fff;border-bottom:1px solid var(--line)}
.ticker .wrap{display:flex;flex-wrap:wrap;gap:0}
.ticker .ti{
  flex:1 1 200px;padding:18px 22px;border-right:1px solid var(--line);
}
.ticker .ti:last-child{border-right:0}
.ticker .ti b{display:block;font-size:24px;color:var(--brand);font-family:var(--font-mono);line-height:1.3}
.ticker .ti span{font-size:13px;color:var(--muted)}

/* 时间轴 */
.tl{list-style:none;padding:0;margin:0;position:relative}
.tl li{position:relative;padding:0 0 26px 34px}
.tl li::before{
  content:"";position:absolute;left:5px;top:6px;width:12px;height:12px;border-radius:50%;
  background:#fff;border:3px solid var(--brand);
}
.tl li:not(:last-child)::after{
  content:"";position:absolute;left:10px;top:22px;bottom:0;width:2px;background:var(--line);
}
.tl li.done::before{background:var(--brand);border-color:var(--brand)}
.tl li.now::before{background:var(--accent);border-color:var(--accent)}
.tl .t{font-size:13px;color:var(--muted);font-family:var(--font-mono)}
.tl .h{font-weight:700;font-size:16px;margin:2px 0 2px}
.tl .d{font-size:14px;color:var(--ink-2)}

/* 赛道卡 */
.track{display:flex;gap:16px;align-items:flex-start}
.track .code{
  flex:0 0 auto;width:52px;height:52px;border-radius:10px;background:var(--brand);color:#fff;
  display:flex;align-items:center;justify-content:center;font-family:var(--font-mono);
  font-size:20px;font-weight:700;
}
.track .code.r3{background:#2a5490}
.track .code.r4{background:#0f5f7a}
.track .code.r5{background:#6a4a8c}
.track h3{margin:2px 0 6px}
.track p{font-size:14px;color:var(--ink-2);margin-bottom:8px}

/* 占位标记（上线前必须替换的内容，用虚线框醒目标出） */
.ph{
  position:relative;border:1px dashed var(--line-2);border-radius:var(--r);
  background:repeating-linear-gradient(45deg,#fcfdfe 0 10px,#f7f9fb 10px 20px);
}
.ph-tag{
  display:block;margin-top:12px;font-size:12px;color:var(--slate);text-align:center;
  letter-spacing:.06em;
}
.ph-inline{
  display:inline-block;padding:0 6px;border:1px dashed var(--slate-line);border-radius:4px;
  font-size:12px;color:var(--slate);background:var(--slate-soft);
}
.placeholder-box{
  border:1px dashed var(--line-2);border-radius:var(--r);padding:34px 24px;text-align:center;
  background:repeating-linear-gradient(45deg,#fcfdfe 0 10px,#f7f9fb 10px 20px);
}
.placeholder-box .big{font-size:17px;font-weight:700;color:var(--ink-2);margin-bottom:6px}
.placeholder-box .sm{font-size:13.5px;color:var(--muted)}

/* 提示条：编辑式竖线，不用「图标 + 彩底圆角框」的套路 */
.notice{
  background:transparent;border:0;border-top:1px solid var(--line);
  border-radius:0;padding:14px 0 0;
  font-size:14.5px;color:var(--ink-2);margin-bottom:24px;
}
.notice .ic{display:none}
.notice b{color:var(--ink)}
.notice a{font-weight:600}
.notice p{margin:0}

/* ===== 证书查询（cq- 前缀，仅证书下载页使用） ===== */
.cq-tabs{display:flex;gap:4px;background:var(--brand-soft);border-radius:var(--r);padding:4px;margin-bottom:22px}
.cq-tab{flex:1;height:46px;border:0;background:transparent;border-radius:6px;
  font-size:15px;font-family:var(--font);color:var(--ink-2);cursor:pointer;letter-spacing:.05em;
  transition:color var(--t),background var(--t),box-shadow var(--t)}
.cq-tab:hover{color:var(--brand)}
.cq-tab.on{background:#fff;color:var(--brand);font-weight:700;box-shadow:0 1px 4px rgba(26,58,107,.12)}
.cq-pane.hide{display:none}
/* 通用隐藏工具类（证书页切换页签等场景依赖） */
.hide{display:none}

.cq-field{margin-bottom:16px}
.cq-field label{display:block;font-size:13.5px;color:var(--muted);margin-bottom:6px}
.cq-in{width:100%;height:46px;border:1px solid var(--line);border-radius:var(--r);
  padding:0 14px;font-size:16px;font-family:var(--font);background:#fcfdfe;color:var(--ink);outline:none;
  transition:border-color var(--t),background var(--t),box-shadow var(--t)}
.cq-in:hover{border-color:var(--line-2)}
.cq-in:focus{border-color:var(--brand-2);background:#fff;box-shadow:0 0 0 3px rgba(42,84,144,.10)}
.cq-wrap{position:relative}
.cq-ac{display:none;position:absolute;left:0;right:0;top:calc(100% + 4px);background:#fff;
  border:1px solid var(--line);border-radius:var(--r);box-shadow:0 6px 18px rgba(26,58,107,.12);
  z-index:20;max-height:240px;overflow:auto}
.cq-ac.on{display:block}
.cq-ac div{padding:10px 14px;font-size:14.5px;color:var(--ink);cursor:pointer;line-height:1.4}
.cq-ac div:hover,.cq-ac div.act{background:var(--brand-soft)}
.cq-hint{font-size:12.5px;color:var(--muted);margin-top:6px;line-height:1.7}

.cq-err{display:none;background:var(--accent-soft);border-left:4px solid var(--accent);
  color:#8a1420;border-radius:0 var(--r) var(--r) 0;padding:12px 16px;
  font-size:14px;line-height:1.8;margin-top:4px}
.cq-load{padding:20px 0;text-align:center;color:var(--muted);font-size:14.5px}

.cq-res{margin-top:24px}
.cq-res-t{font-size:15.5px;font-weight:700;color:var(--brand);margin-bottom:14px}
.cq-cert{background:#fff;border:1px solid var(--line);border-left:4px solid var(--brand);
  border-radius:var(--r);padding:16px 18px;margin-bottom:12px}
.cq-cert.lv1{border-left-color:#A6192E}
.cq-cert.lv2{border-left-color:#9a7b2d}
.cq-cert.lv3{border-left-color:#1a3a6b}
.cq-cert.lv4{border-left-color:#4a7c59}
.cq-badge{display:inline-block;padding:2px 10px;border-radius:4px;font-size:12.5px;font-weight:700;
  color:#fff;background:var(--brand)}
.cq-cert.lv1 .cq-badge{background:#A6192E}
.cq-cert.lv2 .cq-badge{background:#9a7b2d}
.cq-cert.lv3 .cq-badge{background:#1a3a6b}
.cq-cert.lv4 .cq-badge{background:#4a7c59}
.cq-sub{font-size:12.5px;color:var(--muted);margin-left:8px}
.cq-work{font-size:16.5px;font-weight:600;color:var(--ink);margin:9px 0 5px;line-height:1.5}
.cq-meta{font-size:13.5px;color:var(--muted)}
.cq-students{font-size:14.5px;margin-top:9px;line-height:2}
.cq-students a{color:var(--brand);text-decoration:none;border-bottom:1px solid var(--brand-soft);margin-right:2px}
.cq-students a:hover{border-bottom-color:var(--brand)}
.cq-acts{margin-top:13px;display:flex;gap:10px;flex-wrap:wrap}
.cq-lock{font-size:12.5px;color:var(--muted);margin-top:12px;line-height:1.7}

/* 响应式 */
@media (max-width:1000px){
  .g4{grid-template-columns:repeat(2,1fr)}
  .g3{grid-template-columns:repeat(2,1fr)}
}
@media (max-width:760px){
  .topbar .wrap{height:auto;flex-wrap:wrap;padding:12px 24px;gap:12px}
  .nav{order:3;width:100%;overflow-x:auto;flex-wrap:nowrap;padding-bottom:4px}
  .g2,.g3,.g4{grid-template-columns:1fr}
  .banner{padding:48px 0 44px}
  .banner h1{font-size:28px}
  .ticker .ti{border-right:0;border-bottom:1px solid var(--line);flex:1 1 100%}
}

/* 打印 */
@media print{
  .topbar,.banner .btns,.foot{display:none}
  body{font-size:12pt}
  .doc{padding:0;max-width:none}
}

/* ===== 历届回顾（tl- 时间线 / ar- 档案卡，仅 history.html 使用） ===== */
.htl{list-style:none;margin:0;padding:0;border-top:1px solid var(--line)}
.htl-i{
  display:grid;grid-template-columns:104px 1fr;gap:0 28px;
  padding:22px 0;border-bottom:1px solid var(--line);
}
.htl-year{
  font-family:var(--font);font-size:22px;font-weight:700;color:var(--muted);
  letter-spacing:.02em;line-height:1.3;padding-top:1px;
  transition:color var(--t);
}
.hhtl-i-on .htl-year,.htl-i:hover .htl-year{color:var(--brand)}
.htl-name{font-size:16px;font-weight:600;color:var(--ink);line-height:1.5}
.htl-desc{margin-top:7px;font-size:14px;color:var(--ink-2);line-height:1.75;max-width:74ch}
.htl-venue{
  display:inline-block;margin-top:9px;font-size:12.5px;color:var(--slate);
  letter-spacing:.02em;
}
.hhtl-i-on{background:linear-gradient(90deg,var(--brand-soft),transparent 62%)}

.ar-grid{display:grid;grid-template-columns:repeat(2,1fr);gap:20px}
.ar-card{
  background:#fff;border:1px solid var(--line);border-radius:var(--r);padding:24px 24px 20px;
  transition:border-color var(--t),box-shadow var(--t),transform var(--t);
}
.ar-card:hover{border-color:var(--line-2);box-shadow:var(--sh-2);transform:translateY(-2px)}
.ar-card.on{border-color:var(--brand-2)}
.ar-head{display:flex;align-items:baseline;justify-content:space-between;gap:12px}
.ar-no{font-size:17px;font-weight:700;color:var(--ink)}
.ar-year{margin-left:9px;font-size:13px;font-weight:400;color:var(--muted);letter-spacing:.04em}
.ar-badge{font-size:12px;color:var(--slate);letter-spacing:.06em;white-space:nowrap}
.ar-card.on .ar-badge{color:var(--accent);font-weight:600}
.ar-theme{
  margin-top:12px;font-size:15px;color:var(--ink);line-height:1.6;font-weight:500;
}
.ar-tracks{display:flex;flex-wrap:wrap;gap:6px;margin-top:12px}
.ar-tracks span{
  font-size:12.5px;color:var(--brand);background:var(--brand-soft);
  padding:3px 9px;border-radius:4px;line-height:1.6;
}
.ar-tracks span.muted{background:var(--slate-soft);color:var(--slate)}
.ar-period{
  margin-top:14px;font-size:12.5px;color:var(--muted);
  padding-top:12px;border-top:1px solid var(--line);line-height:1.7;
}
.ar-note{margin:10px 0 0;font-size:13.5px;color:var(--ink-2);line-height:1.8}
.ar-src{margin-top:12px;font-size:12.5px}
.ar-src summary{cursor:pointer;color:var(--brand);list-style:none;letter-spacing:.02em}
.ar-src summary::-webkit-details-marker{display:none}
.ar-src summary::after{content:" +";color:var(--muted)}
.ar-src[open] summary::after{content:" −"}
.ar-src ul{margin:10px 0 0;padding:0;list-style:none}
.ar-src a{color:var(--ink-2);transition:color var(--t)}
.ar-src a:hover{color:var(--brand)}
.ar-src li{
  display:flex;justify-content:space-between;gap:14px;
  padding:5px 0;border-bottom:1px dashed var(--line);color:var(--ink-2);
}
.ar-src li:last-child{border-bottom:0}
.src-d{color:var(--slate);white-space:nowrap;font-size:12px}

@media (max-width:860px){
  .htl-i{grid-template-columns:1fr;gap:4px}
  .htl-year{font-size:18px}
  .ar-grid{grid-template-columns:1fr}
}

/* ===== 获奖展示作品墙（wk- 前缀，仅 works.html 使用） ===== */
.wk-filter{display:flex;flex-wrap:wrap;gap:8px;margin-bottom:26px}
.wk-tab{
  display:inline-flex;align-items:center;gap:7px;height:34px;padding:0 14px;
  border:1px solid var(--line);background:#fff;border-radius:17px;
  font-family:var(--font);font-size:13.5px;color:var(--ink-2);cursor:pointer;
  transition:color var(--t),border-color var(--t),background var(--t),transform var(--t);
}
.wk-tab span{display:inline-block;min-width:22px;text-align:center;
  padding:0 6px;height:20px;line-height:20px;border-radius:10px;
  background:var(--slate-soft);font-size:11.5px;color:var(--slate);transition:all var(--t)}
.wk-tab:hover{border-color:var(--line-2);color:var(--brand);transform:translateY(-1px)}
.wk-tab.on{background:var(--brand);border-color:var(--brand);color:#fff}
.wk-tab.on span{background:rgba(255,255,255,.16);color:rgba(255,255,255,.85)}

.wk-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:22px}
.wk-card{
  background:#fff;border:1px solid var(--line);border-radius:var(--r);overflow:hidden;
  transition:border-color var(--t),box-shadow var(--t),transform var(--t);
}
.wk-card:hover{border-color:var(--line-2);box-shadow:var(--sh-2);transform:translateY(-2px)}
.wk-frame{position:relative;background:var(--bg-soft);aspect-ratio:4/3;overflow:hidden}
.wk-media{display:block;width:100%;height:100%;object-fit:cover;background:#0f1620}
video.wk-media{object-fit:contain}
.wk-noimg{display:flex;align-items:center;justify-content:center}
.wk-noimg span{
  font-size:26px;font-weight:700;color:var(--slate);letter-spacing:.08em;opacity:.5;
}
.wk-play{
  position:absolute;left:50%;top:50%;width:44px;height:44px;margin:-22px 0 0 -22px;
  border-radius:50%;background:rgba(255,255,255,.86);pointer-events:none;
  transition:opacity var(--t);
}
.wk-play::before{
  content:"";position:absolute;left:17px;top:13px;
  border-left:13px solid var(--brand);border-top:9px solid transparent;
  border-bottom:9px solid transparent;
}
.wk-card:hover .wk-play{opacity:0}
.wk-body{padding:15px 16px 14px}
.wk-name{
  font-size:15px;line-height:1.5;margin:0 0 7px;color:var(--ink);
  display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden;
}
.wk-meta{font-size:12.5px;color:var(--muted);line-height:1.7;
  white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.wk-foot{
  display:flex;align-items:center;gap:7px;margin-top:11px;padding-top:10px;
  border-top:1px solid var(--line);
}
.wk-track{font-size:12px;color:var(--brand);background:var(--brand-soft);
  padding:2px 8px;border-radius:4px;white-space:nowrap}
.wk-grp{font-size:12px;color:var(--slate);background:var(--slate-soft);
  padding:2px 8px;border-radius:4px;white-space:nowrap}

@media (max-width:960px){
  .wk-grid{grid-template-columns:repeat(2,1fr);gap:16px}
}
@media (max-width:600px){
  .wk-grid{grid-template-columns:1fr}
}

/* ===== 作品墙 · 图片放大预览（lightbox） ===== */
.wk-lb{
  display:none;position:fixed;inset:0;z-index:999;
  background:rgba(10,16,26,.86);
  align-items:center;justify-content:center;padding:36px;cursor:zoom-out;
}
.wk-lb.on{display:flex}
.wk-lb img{
  max-width:min(1100px,92vw);max-height:88vh;
  border-radius:8px;background:#fff;
}
.wk-grid img.wk-media{cursor:zoom-in}

/* ===== 作品墙 · 组内多素材轮播（组图 / 多视频） ===== */
.wk-frame .wk-media{
  position:absolute;inset:0;opacity:0;visibility:hidden;transition:opacity .22s;
}
.wk-frame .wk-media.on{opacity:1;visibility:visible}
.wk-nav{
  position:absolute;top:50%;margin-top:-23px;width:28px;height:46px;
  background:rgba(10,16,26,.5);border:0;color:#fff;font-size:19px;line-height:46px;
  cursor:pointer;opacity:0;transition:opacity var(--t),background var(--t);padding:0;
}
.wk-nav:hover{background:rgba(10,16,26,.78)}
.wk-card:hover .wk-nav{opacity:1}
.wk-nav.prev{left:0;border-radius:0 4px 4px 0}
.wk-nav.next{right:0;border-radius:4px 0 0 4px}
.wk-count{
  position:absolute;right:9px;bottom:9px;padding:2px 8px;border-radius:10px;
  background:rgba(10,16,26,.6);color:#fff;font-size:11.5px;
  font-family:var(--font-mono);letter-spacing:.04em;
}

/* ===== 问答系统：悬浮小窗 ===== */
#qaBtn{
  position:fixed;right:18px;bottom:18px;z-index:98;width:52px;height:52px;
  border:none;border-radius:50%;background:#A6192E;color:#fff;font-size:15px;
  font-weight:700;line-height:1.25;cursor:pointer;box-shadow:0 6px 18px rgba(26,42,74,.25);
}
#qaBtn:hover{filter:brightness(1.08)}
#qaPanel{
  position:fixed;right:18px;bottom:80px;z-index:99;width:min(360px,calc(100vw - 36px));
  max-height:min(520px,72vh);display:flex;flex-direction:column;background:#fff;
  border:1px solid var(--line);border-radius:12px;
  box-shadow:0 12px 36px rgba(16,26,46,.18);overflow:hidden;
}
#qaPanel[hidden]{display:none}
.qa-head{
  display:flex;justify-content:space-between;align-items:center;
  padding:12px 14px;background:#1a3a6b;color:#fff;font-size:14px;
}
.qa-head button{
  border:none;background:transparent;color:#fff;font-size:20px;
  line-height:1;cursor:pointer;padding:0 2px;
}
.qa-search{padding:10px 12px 4px}
#qaSearch{
  width:100%;box-sizing:border-box;padding:9px 11px;border:1px solid var(--line);
  border-radius:8px;font-size:13.5px;outline:none;
}
#qaSearch:focus{border-color:#1a3a6b}
.qa-chips{display:flex;flex-wrap:wrap;gap:6px;padding:8px 12px 4px}
.qa-chips button{
  border:1px solid var(--line);background:#f6f8fb;color:#1a3a6b;
  font-size:12px;padding:3px 10px;border-radius:999px;cursor:pointer;
}
.qa-chips button:hover{background:#eef2f8}
#qaFaqResult{overflow-y:auto;padding:6px 12px 10px;max-height:44vh}
.qa-hit{
  border:1px solid var(--line);border-radius:9px;padding:9px 11px;
  margin-top:8px;cursor:pointer;background:#fff;
}
.qa-hit:hover{border-color:#1a3a6b;background:#fafbfd}
.qa-hit b{display:block;font-size:13.5px;color:#1a3a6b;margin-bottom:2px}
.qa-hit span{
  font-size:12.5px;color:#5b6675;display:-webkit-box;-webkit-line-clamp:2;
  -webkit-box-orient:vertical;overflow:hidden;
}
.qa-empty{font-size:13px;color:#8a94a4;padding:14px 2px}
.qa-foot{
  padding:9px 14px;border-top:1px solid var(--line);background:#f8fafc;font-size:13px;
}
.qa-foot a{color:#A6192E;text-decoration:none;font-weight:600}
.qa-foot a:hover{text-decoration:underline}

/* ===== 问答系统：页面提问区 / 公开问答 ===== */
.qa-form{display:grid;grid-template-columns:1fr 1fr;gap:10px;margin-top:12px}
.qa-form .full{grid-column:1 / -1}
.qa-form input,.qa-form textarea{
  width:100%;box-sizing:border-box;padding:9px 11px;border:1px solid var(--line);
  border-radius:8px;font-size:13.5px;font-family:inherit;outline:none;background:#fff;color:inherit;
}
.qa-form textarea{min-height:84px;resize:vertical}
.qa-form input:focus,.qa-form textarea:focus{border-color:#1a3a6b}
.qa-msg{margin-top:10px;font-size:13px;padding:9px 12px;border-radius:8px;line-height:1.6}
.qa-msg.ok{background:#eaf5ee;color:#1a7f45;border:1px solid #cfe8d8}
.qa-msg.bad{background:#fdeef0;color:#A6192E;border:1px solid #f3d3d8}
#qaList .qa-item{
  border:1px solid var(--line);border-radius:10px;padding:14px 16px;
  margin-top:10px;background:#fff;
}
#qaList .qa-q b{display:block;font-size:14.5px;color:#1c2330;margin-bottom:3px}
#qaList .qa-ans{
  margin-top:10px;padding:10px 12px;background:#f2f6fb;
  border-left:3px solid #1a3a6b;border-radius:6px;
}
#qaList .qa-ans p{margin:5px 0 0;color:#26303f;white-space:pre-wrap}
#qaList .qa-badge{
  display:inline-block;background:#1a3a6b;color:#fff;font-size:11px;
  font-weight:700;padding:1px 8px;border-radius:4px;letter-spacing:.04em;
}
#qaList .qa-meta{display:block;font-size:11.5px;color:#8a94a4;margin-top:4px}
.qa-status{font-size:11.5px;padding:1px 7px;border-radius:4px;font-weight:600}
.qa-status.pending{background:#fff4e2;color:#9a6b0f}
.qa-status.public{background:#e8f2fb;color:#1a5b96}
.qa-status.hidden{background:#eef0f3;color:#78818f}
@media(max-width:640px){
  .qa-form{grid-template-columns:1fr}
  #qaPanel{right:12px;bottom:76px;width:calc(100vw - 24px)}
}
