﻿/* ============================================================
   埙域·元溯 · UI/UX 优化覆盖层 v1.1（红金科技国风）
   设计指令：现代简约国风 × 轻科幻未来感 × 数字博物馆体验
   约束：不修改任何 JS / 接口 / 数据结构 / 业务逻辑
   v1.1 修复：封面区完全还原不动；导航布局还原（72px 原样），
   仅做玻璃视觉；统一 work/login 等页面导航风格
   背景：保留现有星空特效，仅重设底色
   ============================================================ */

/* ---------- 一、设计令牌（覆盖现有 :root 变量，全站换肤） ---------- */
:root{
  /* 低饱和红金科技国风 */
  --red:#B23A44;          /* 主色 · 深红 */
  --gold:#D8A05E;         /* 主色 · 琥珀暖金 */
  --dark-gold:#C9935D;    /* 辅助 · 暗金 */
  --bg:#0B1020;           /* 背景 · 科技黑 */
  --bg2:#10182D;          /* 背景 · 星空蓝黑 */
  --bg3:#161E33;
  --panel:rgba(255,255,255,.06);   /* 玻璃面 */
  --panel2:rgba(255,255,255,.10);
  --stroke:rgba(255,255,255,.12);  /* 玻璃边框 */
  --stroke-hi:rgba(255,255,255,.24);
  --gold-border:rgba(216,160,94,.28);  /* 金色细边 */
  --text:#F5F1E9;
  --muted:rgba(238,230,216,.78);
  --spatial:#7FB6D8;
  --heritage:#C9935D;

  /* 玻璃卡片规范 */
  --card-radius:20px;
  --card-bg:rgba(255,255,255,.06);
  --card-border:rgba(255,255,255,.12);
  --card-shadow:0 10px 40px rgba(0,0,0,.25);

  /* 按钮规范 */
  --btn-radius:14px;
  --btn-h:48px;
  --btn-primary-bg:linear-gradient(135deg,#8B2635,#C9A227);
}

/* ---------- 二、全站基础 ---------- */
html{scroll-behavior:smooth}
body{background:var(--bg) !important}
::selection{background:rgba(201,162,39,.3);color:#fff}
::-webkit-scrollbar{width:10px;height:10px}
::-webkit-scrollbar-track{background:#0B1020}
::-webkit-scrollbar-thumb{background:rgba(201,162,39,.28);border-radius:99px;border:2px solid #0B1020}
::-webkit-scrollbar-thumb:hover{background:rgba(201,162,39,.45)}

/* ---------- 三、顶部导航：琥珀金玻璃态 + 金色底线 + 胶囊登录钮 ---------- */
/* 主站导航（index/kaoji/vr-theater/red-stories/team/upload/profile/teacher/admin 有 id="nav"，
   work.html 的 header 无 id，一并统一） */
header#nav, header:has(.wrap.nav){
  background:linear-gradient(180deg, rgba(20,16,12,.88) 0%, rgba(20,16,12,.66) 80%, rgba(20,16,12,.5) 100%) !important;
  backdrop-filter:blur(20px) saturate(1.15) !important;
  -webkit-backdrop-filter:blur(20px) saturate(1.15) !important;
  border-bottom:none !important;
  box-shadow:0 10px 34px rgba(0,0,0,.42), inset 0 -1px 0 rgba(216,160,94,.38) !important;
}
/* Logo 与品牌名 */
#nav .brand, header .brand{display:flex;align-items:center;gap:12px}
#nav .brand .logo, header .brand .logo{
  width:40px;height:40px;border-radius:11px;object-fit:cover;
  box-shadow:0 0 0 1px rgba(216,160,94,.5),0 4px 16px rgba(0,0,0,.45),0 0 22px rgba(216,160,94,.2);
}
#nav .brand span, header .brand span{
  font-weight:800;letter-spacing:.16em;color:var(--text);font-size:1.06rem;
  background:linear-gradient(135deg,#F7F3EA 22%,#D8A05E 100%);
  -webkit-background-clip:text;background-clip:text;-webkit-text-fill-color:transparent;
}
/* 品牌副标题（竖线分隔的英文小标签，呼应数字博物馆的科技感） */
#nav .brand::after, header .brand::after{
  content:"XUNYU · METAVERSE";
  font-family:'Cascadia Mono',Consolas,'JetBrains Mono','Courier New',monospace;
  font-size:.56rem;letter-spacing:.22em;font-weight:400;color:rgba(216,160,94,.6);
  padding-left:14px;margin-left:2px;border-left:1px solid rgba(216,160,94,.28);
  white-space:nowrap;
}
/* 导航链接 */
.nav-links{display:flex;align-items:center;gap:28px;font-size:.9rem}
.nav-links a{
  color:rgba(238,230,216,.72);letter-spacing:.08em;position:relative;
  padding:6px 2px;transition:color .3s ease;
}
.nav-links a::after{
  content:"";position:absolute;left:0;right:100%;bottom:-2px;height:2px;border-radius:2px;
  background:linear-gradient(90deg,#D8A05E,rgba(216,160,94,.2));
  transition:right .35s ease;
}
.nav-links a:hover{color:#fff}
.nav-links a:hover::after{right:0}
/* 当前页高亮：金色 + 常显金色底线 */
.nav-links a.active{color:var(--gold);font-weight:600}
.nav-links a.active::after{right:0;box-shadow:0 0 10px rgba(216,160,94,.5)}
/* profile 页：右侧“个人中心”作为当前页标识，与 .active 完全一致（金色 + 金色底线） */
#navLogin.nav-current{color:var(--gold) !important;font-weight:600 !important}
#navLogin.nav-current::after{right:0 !important;box-shadow:0 0 10px rgba(216,160,94,.5)}
@media (max-width:640px){
  #nav .brand::after, header .brand::after{display:none}
}
/* work.html 返回按钮 */
.btn-back{
  border-radius:12px;border:1px solid rgba(201,162,39,.35);background:rgba(255,255,255,.05);
  color:var(--gold);padding:9px 16px;font-size:.85rem;text-decoration:none;
  transition:all .3s ease;
}
.btn-back:hover{background:rgba(201,162,39,.12);transform:translateY(-2px)}

/* login.html 白色 Tailwind 导航 → 统一深色玻璃（仅限登录页 body.bg-light 内） */
body.bg-light nav[class*="bg-white"]{
  background:rgba(20,16,12,.68) !important;
  backdrop-filter:blur(20px) saturate(1.15) !important;
  -webkit-backdrop-filter:blur(20px) saturate(1.15) !important;
  border-bottom:1px solid rgba(216,160,94,.2) !important;
  box-shadow:0 8px 32px rgba(0,0,0,.22);
}
body.bg-light nav[class*="bg-white"] .text-primary{
  color:var(--text) !important;
  background:linear-gradient(135deg,#F7F3EA 22%,#D8A05E 100%);
  -webkit-background-clip:text;background-clip:text;-webkit-text-fill-color:transparent;
}
body.bg-light nav[class*="bg-white"] img{border-radius:10px;box-shadow:0 0 0 1px rgba(216,160,94,.4)}

/* ---------- 四、按钮：红金渐变（不改布局尺寸） ---------- */
.btn{border-radius:14px !important}
.btn-primary{
  background:var(--btn-primary-bg) !important;
  border-color:rgba(201,162,39,.45) !important;
  color:#fff !important;
  box-shadow:0 6px 22px rgba(139,38,53,.35);
}
.btn-primary:hover{
  background:linear-gradient(135deg,#a03042,#d8af2e) !important;
  color:#fff !important;border-color:transparent !important;
  transform:translateY(-2px);
  box-shadow:0 12px 30px rgba(139,38,53,.5);
}
.btn-primary::after{display:none}
.hero-link{color:var(--gold);border-bottom:1px solid rgba(201,162,39,.4);padding-bottom:3px;transition:color .3s ease}
.hero-link:hover{color:#e8c84a}

/* ---------- 五、卡片系统：玻璃拟态（仅视觉） ---------- */
/* 首页沉浸空间列表 */
.floor-row{
  border-radius:20px !important;
  border:1px solid rgba(201,162,39,.22) !important;
  background:linear-gradient(180deg,rgba(255,255,255,.05),rgba(255,255,255,.015)) !important;
  box-shadow:0 10px 40px rgba(0,0,0,.25);
  transition:transform .3s ease,box-shadow .3s ease,border-color .3s ease !important;
}
.floor-row:hover{
  transform:translateY(-3px) !important;
  box-shadow:0 16px 44px rgba(0,0,0,.4);
  border-color:rgba(201,162,39,.5) !important;
  background:linear-gradient(180deg,rgba(201,162,39,.12),rgba(139,38,53,.04)) !important;
}
.floor-row .fr-no{color:var(--gold);font-weight:800}
.floor-row .fr-name{color:var(--text);letter-spacing:.08em}
.floor-row .fr-desc{color:var(--muted)}

/* 关于我们 / 价值卡 / 二维码卡 */
.about-values .value{border-radius:20px;border:1px solid var(--card-border);background:var(--card-bg);box-shadow:var(--card-shadow);padding:26px 24px;transition:transform .3s ease,border-color .3s ease}
.about-values .value:hover{transform:translateY(-3px);border-color:rgba(201,162,39,.4)}
.about-values .value .no{color:var(--gold)}
.qr-grid .qr{border-radius:18px;border:1px solid var(--card-border);background:var(--card-bg);box-shadow:var(--card-shadow);transition:transform .3s ease,border-color .3s ease}
.qr-grid .qr:hover{transform:translateY(-3px);border-color:rgba(201,162,39,.45)}
.qr-grid .qr .lbl{color:var(--gold);letter-spacing:.08em}

/* 联系卡片 */
.contact-card{border-radius:20px;border:1px solid var(--card-border);background:var(--card-bg);box-shadow:var(--card-shadow);padding:30px;transition:transform .3s ease}
.contact-card:hover{transform:translateY(-2px)}
.contact-card h3{color:var(--text);letter-spacing:.1em}
.info-item .ic{color:var(--gold)}
.info-item p{color:var(--muted)}

/* 数据统计：数字突出（36px 赤金，仅视觉） */
.stats-strip{border-top:1px solid rgba(201,162,39,.22);border-bottom:1px solid rgba(201,162,39,.22)}
.stats-strip::before{color:var(--gold) !important;background:var(--bg) !important}
.stats-strip .stat .num{font-size:36px !important;font-weight:800;color:var(--gold) !important;text-shadow:0 0 30px rgba(201,162,39,.25)}
.stats-strip .stat .lbl{color:var(--muted);letter-spacing:.1em}

/* 沉浸空间大卡 */
.immersive.space{border-radius:24px;overflow:hidden;border:1px solid rgba(201,162,39,.25);box-shadow:var(--card-shadow);transition:transform .4s ease,box-shadow .4s ease,border-color .4s ease}
.immersive.space:hover{transform:translateY(-3px);border-color:rgba(201,162,39,.5);box-shadow:0 20px 60px rgba(0,0,0,.45)}
.immersive.space .hud .num{color:var(--gold)}
.immersive.space .info .loc{color:var(--gold);letter-spacing:.16em}
.immersive.space .enter{border-color:rgba(201,162,39,.5);color:var(--gold)}

/* ---------- 六、表单（主站深色表单） ---------- */
.field input,.field textarea{
  width:100%;border-radius:12px;border:1px solid rgba(255,255,255,.14);
  background:rgba(255,255,255,.05);color:var(--text);padding:13px 16px;
  font-size:15px;outline:none;transition:border-color .3s ease,box-shadow .3s ease;
}
.field input::placeholder,.field textarea::placeholder{color:rgba(226,231,242,.4)}
.field input:focus,.field textarea:focus{
  border-color:rgba(201,162,39,.6);background:rgba(255,255,255,.07);
  box-shadow:0 0 0 3px rgba(201,162,39,.12);
}

/* ---------- 七、弹窗：未来玻璃层 ---------- */
#lightbox .box,#imgbox .ib-frame{
  background:rgba(10,15,30,.85) !important;
  backdrop-filter:blur(30px) !important;
  -webkit-backdrop-filter:blur(30px) !important;
  border-radius:24px !important;
  border:1px solid rgba(201,162,39,.35) !important;
  box-shadow:0 30px 90px rgba(0,0,0,.6) !important;
}
.lb-top .lb-tag{color:var(--gold);letter-spacing:.16em}
#lb-close,#ib-close{background:rgba(255,255,255,.08);border:1px solid rgba(255,255,255,.16);color:var(--text);border-radius:10px;transition:all .3s ease}
#lb-close:hover,#ib-close:hover{background:rgba(139,38,53,.5);border-color:rgba(201,162,39,.5)}

/* ---------- 八、考级页 · 等级系统（成长体系） ---------- */
.kj-head .eyebrow{color:var(--gold)}
.kj-head h2{letter-spacing:.14em;color:var(--text)}
.kj-head p{color:var(--muted)}

/* 等级卡：玻璃 + 状态 */
.kj-card{
  position:relative;border-radius:20px !important;
  padding:26px 16px 18px !important;text-align:center;
  border:1px solid rgba(255,255,255,.12) !important;
  background:rgba(255,255,255,.05) !important;
  backdrop-filter:blur(14px);-webkit-backdrop-filter:blur(14px);
  box-shadow:0 10px 40px rgba(0,0,0,.25);
  transition:transform .3s ease,border-color .3s ease,box-shadow .3s ease !important;
  overflow:hidden;
}
.kj-card::before{
  content:"";position:absolute;inset:0 0 auto 0;height:3px;
  background:linear-gradient(90deg,transparent,rgba(201,162,39,.6),transparent);
  opacity:.4;transition:opacity .3s ease;
}
.kj-card:hover{transform:translateY(-3px);box-shadow:0 16px 44px rgba(0,0,0,.4)}
/* 已通关 */
.kj-card.done{border-color:rgba(201,162,39,.5) !important;background:linear-gradient(180deg,rgba(201,162,39,.13),rgba(139,38,53,.07)) !important}
.kj-card.done .kj-num{color:var(--gold)}
.kj-card.done::before{opacity:1}
/* 当前关卡 */
.kj-card.current{border-color:rgba(201,162,39,.75) !important;box-shadow:0 0 0 1px rgba(201,162,39,.3),0 0 34px rgba(201,162,39,.16),0 10px 40px rgba(0,0,0,.3) !important}
.kj-card.current .kj-num{color:var(--gold);text-shadow:0 0 26px rgba(201,162,39,.5)}
.kj-card.current::before{opacity:1}
/* 未解锁 */
.kj-card.locked{opacity:.6;filter:saturate(.55)}
.kj-card.empty{opacity:.5}
.kj-badge{position:absolute;top:12px;right:14px;font-size:.76rem;color:var(--gold);background:rgba(201,162,39,.1);border:1px solid rgba(201,162,39,.3);border-radius:20px;padding:2px 9px;letter-spacing:.06em}
/* 等级数字 48px 突出 */
.kj-num{font-size:48px !important;font-weight:800;color:var(--text) !important;line-height:1}
.kj-card.done .kj-num,.kj-card.current .kj-num{color:var(--gold) !important}
.kj-lv{margin-top:8px;font-size:.76rem;color:var(--gold);letter-spacing:.24em;text-transform:uppercase}
.kj-stat{margin-top:8px;font-size:13px;color:var(--muted);min-height:36px;display:flex;align-items:center;justify-content:center}
.kj-bar{height:5px;border-radius:99px;background:rgba(255,255,255,.08);margin-top:14px;overflow:hidden}
.kj-bar i{display:block;height:100%;background:linear-gradient(90deg,#8B2635,#C9A227);border-radius:99px;transition:width .4s ease;box-shadow:0 0 12px rgba(201,162,39,.4)}

/* 经验面板（课程列表）玻璃化 */
.kj-eps-panel{
  border-radius:20px !important;
  border:1px solid rgba(201,162,39,.25) !important;
  background:rgba(16,24,45,.72) !important;
  backdrop-filter:blur(18px) !important;-webkit-backdrop-filter:blur(18px) !important;
  box-shadow:0 16px 50px rgba(0,0,0,.35);
}
.kj-eps-title h3{color:var(--text);letter-spacing:.12em}
.kj-eps-title h3::before{content:"◈ ";color:var(--gold)}
.kj-eps-title .kj-close{border-radius:12px !important;border:1px solid rgba(255,255,255,.16) !important;background:rgba(255,255,255,.05) !important;color:var(--muted) !important;padding:8px 20px;transition:all .3s ease}
.kj-eps-title .kj-close:hover{color:var(--gold) !important;border-color:rgba(201,162,39,.5)}

/* 课程条目 */
.kj-ep-no{color:var(--gold);font-weight:800}
.kj-ep-tt{color:var(--text);letter-spacing:.05em}
.kj-ep-sub{color:var(--muted)}
.kj-ep-act button,.kj-ep-act a{
  border-radius:12px;border:1px solid rgba(201,162,39,.4);background:rgba(201,162,39,.08);
  color:var(--gold);padding:8px 18px;font-size:.85rem;cursor:pointer;transition:all .3s ease;
}
.kj-ep-act button:hover,.kj-ep-act a:hover{background:rgba(201,162,39,.18);transform:translateY(-2px)}

/* ---------- 九、考级页 · 答题视图（整页化玻璃层） ---------- */
#kj-exam-modal{
  background:rgba(10,15,30,.72) !important;
  backdrop-filter:blur(22px) !important;-webkit-backdrop-filter:blur(22px) !important;
}
.kj-exam-modal-box{
  width:100%;max-width:1000px !important;max-height:92vh;
  border-radius:24px !important;
  border:1px solid rgba(201,162,39,.35) !important;
  background:rgba(16,24,45,.88) !important;
  backdrop-filter:blur(30px) !important;-webkit-backdrop-filter:blur(30px) !important;
  box-shadow:0 30px 90px rgba(0,0,0,.6) !important;
  overflow:hidden;
}
/* 考试头部：状态条 */
.kj-exam-head{
  display:flex;align-items:center;justify-content:space-between;gap:16px;flex-wrap:wrap;
  padding:16px 20px;margin-bottom:18px;
  background:rgba(255,255,255,.05);border:1px solid rgba(255,255,255,.1);
  border-radius:16px;
}
.kj-exam-head .kj-exam-tt{color:var(--gold);letter-spacing:.1em;font-weight:700}
.kj-exam-head .kj-exam-info{color:var(--muted);font-size:.9rem}
.kj-exam-best{color:var(--gold)}
/* 试卷卡片 */
.kj-exam-box{
  border-radius:18px !important;border:1px solid rgba(255,255,255,.1) !important;
  background:rgba(255,255,255,.04) !important;padding:20px 22px !important;
  box-shadow:0 8px 30px rgba(0,0,0,.2);transition:transform .3s ease,border-color .3s ease;
}
.kj-exam-box:hover{border-color:rgba(201,162,39,.35)}
/* 题目卡 */
.kj-q{
  border-radius:16px !important;border:1px solid rgba(255,255,255,.1) !important;
  padding:20px 22px !important;margin-bottom:16px;
  background:rgba(255,255,255,.03) !important;
  transition:border-color .3s ease;
}
.kj-q:hover{border-color:rgba(201,162,39,.3)}
.kj-q-no{color:var(--gold);font-weight:700}
.kj-q-stem{color:var(--text);font-size:16px;line-height:1.8}
/* 选项卡片：60px 高 / 14px 圆角 / hover 上浮 / 正确金边 / 错误低饱和红 */
.kj-opt{
  display:flex;align-items:center;min-height:56px !important;gap:14px;
  padding:12px 18px !important;border-radius:14px !important;
  border:1px solid rgba(255,255,255,.12) !important;
  background:rgba(255,255,255,.05) !important;
  margin-bottom:10px !important;cursor:pointer;
  color:var(--text) !important;font-size:15px !important;
  transition:transform .25s ease,border-color .25s ease,background .25s ease,box-shadow .25s ease !important;
}
.kj-opt:hover{
  transform:translateY(-3px);border-color:rgba(201,162,39,.55) !important;
  background:rgba(201,162,39,.08) !important;box-shadow:0 8px 24px rgba(0,0,0,.25);
}
.kj-opt.right{
  border-color:var(--gold) !important;background:rgba(201,162,39,.12) !important;color:#F5E7B8 !important;
  box-shadow:0 0 0 1px rgba(201,162,39,.35),0 0 20px rgba(201,162,39,.12);
}
.kj-opt-r{
  padding:11px 16px !important;border-radius:12px !important;margin-bottom:8px !important;
  font-size:14px !important;color:var(--text) !important;border:1px solid rgba(255,255,255,.1) !important;
  background:rgba(255,255,255,.04) !important;
}
.kj-opt-r.right{border-color:var(--gold) !important;background:rgba(201,162,39,.12) !important;color:#F5E7B8 !important}
.kj-opt-r.wrong{border-color:rgba(180,70,80,.65) !important;background:rgba(139,38,53,.18) !important;color:#E8B4BA !important}
/* 交卷按钮 */
.kj-exam-btn{
  border-radius:var(--btn-radius) !important;min-height:44px;padding:11px 26px !important;
  border:1px solid rgba(255,255,255,.16) !important;background:rgba(255,255,255,.06) !important;
  color:var(--text) !important;cursor:pointer;font-size:.92rem;
  transition:transform .25s ease,box-shadow .25s ease,border-color .25s ease !important;
}
.kj-exam-btn:hover{transform:translateY(-2px);border-color:rgba(201,162,39,.5) !important}
.kj-exam-btn.primary{
  background:var(--btn-primary-bg) !important;border-color:rgba(201,162,39,.45) !important;
  color:#fff !important;box-shadow:0 6px 22px rgba(139,38,53,.35);
}
.kj-exam-btn.primary:hover{box-shadow:0 10px 28px rgba(139,38,53,.5)}
/* 考试历史 */
.kj-exam-hist{border-radius:16px;border:1px solid rgba(255,255,255,.1);overflow:hidden}
.kj-exam-row{border-bottom:1px solid rgba(255,255,255,.07)}
.kj-exam-row:last-child{border-bottom:none}
.kj-exam-row .kj-ex-score{color:var(--gold);font-weight:700}

/* 实拍考核 */
.kj-prac-box{border-radius:18px;border:1px solid rgba(255,255,255,.1);background:rgba(255,255,255,.04);padding:18px 20px}
.kj-prac-tt{color:var(--text);letter-spacing:.06em}
.kj-prac-badge{border-radius:20px;padding:3px 12px;font-size:.78rem;letter-spacing:.06em}
.kj-prac-badge.pending{background:rgba(201,162,39,.12);color:var(--gold);border:1px solid rgba(201,162,39,.4)}
.kj-prac-badge.approved{background:rgba(120,190,140,.12);color:#8FCFA0;border:1px solid rgba(120,190,140,.4)}
.kj-prac-badge.rejected{background:rgba(180,70,80,.14);color:#E8A0A8;border:1px solid rgba(180,70,80,.4)}

/* ---------- 十、视频播放器玻璃化 ---------- */
.kj-player{background:rgba(10,15,30,.78) !important;backdrop-filter:blur(18px) !important;-webkit-backdrop-filter:blur(18px) !important}
.kj-player-box{
  border-radius:24px !important;
  border:1px solid rgba(201,162,39,.3) !important;
  background:rgba(14,19,36,.92) !important;
  box-shadow:0 30px 90px rgba(0,0,0,.65) !important;
}
.kj-player-top{border-bottom:1px solid rgba(201,162,39,.2)}
.kj-pt span{color:var(--gold);letter-spacing:.08em}
.kj-ctrl{background:rgba(11,16,32,.6)}
.kj-play{color:var(--gold)}
.kj-prog{background:rgba(255,255,255,.1);border-radius:99px}
.kj-prog i{background:linear-gradient(90deg,#8B2635,#C9A227)}

/* ---------- 十一、页脚（首页，固定底部）：琥珀金玻璃 + 顶部金色收边 ---------- */
footer#exit{
  border-top:1px solid rgba(216,160,94,.3);
  background:linear-gradient(180deg, rgba(20,16,12,.5) 0%, rgba(12,9,6,.92) 100%);
  backdrop-filter:blur(18px);
  -webkit-backdrop-filter:blur(18px);
  box-shadow:inset 0 1px 0 rgba(216,160,94,.2);
  position:relative;
}
/* 底部一条细细的金色渐变光带，呼应顶部导航的金色底线 */
footer#exit::before{
  content:"";position:absolute;left:0;right:0;top:0;height:1.5px;
  background:linear-gradient(90deg,transparent 0%,rgba(216,160,94,0) 12%,rgba(216,160,94,.78) 38%,#FFD696 50%,rgba(216,160,94,.78) 62%,rgba(216,160,94,0) 88%,transparent 100%);
  filter:drop-shadow(0 0 6px rgba(216,160,94,.45));
}
footer#exit .brand span{color:var(--text)}
footer#exit .brand .logo{
  width:22px;height:22px;border-radius:6px;
  box-shadow:0 0 0 1px rgba(216,160,94,.4);
}
footer#exit .foot-tagline{
  color:rgba(238,230,216,.5);font-size:.78rem;letter-spacing:.1em;
}
footer#exit .copyright{
  color:rgba(238,230,216,.4);font-size:.72rem;letter-spacing:.1em;
}

/* work.html 页脚（无 id 无 class 的裸 <footer>）统一风格；login.html 的 Tailwind 页脚不受影响 */
body footer:not(#exit):not([class]){
  border-top:1px solid rgba(216,160,94,.3);
  background:linear-gradient(180deg, rgba(20,16,12,.5) 0%, rgba(12,9,6,.92) 100%);
}
body footer:not(#exit):not([class]) .copyright{color:rgba(238,230,216,.45);letter-spacing:.12em}

/* ---------- 十一.5、页脚显隐：仅首页与个人中心保留，其余内容页不显示 ---------- */
/* VR剧场/红色故事/团队活动/考级/用户上传 等页面 body 带 no-exit，直接隐藏页脚 */
body.no-exit footer#exit{display:none !important}

/* 首页页脚：固定在屏幕底部（与个人中心一致的常驻底栏） */
body.page-home footer#exit{
  position:fixed !important;
  left:0;right:0;bottom:0;
  z-index:100;
  height:48px;
  background:linear-gradient(180deg, rgba(20,16,12,.9) 0%, rgba(20,16,12,.96) 100%) !important;
  backdrop-filter:blur(16px) saturate(1.15) !important;
  -webkit-backdrop-filter:blur(16px) saturate(1.15) !important;
  border-top:1px solid rgba(216,160,94,.26);
  box-shadow:0 -8px 30px rgba(0,0,0,.35), inset 0 1px 0 rgba(216,160,94,.18);
  display:flex;
  align-items:center;
}
body.page-home footer#exit::before{
  content:"";position:absolute;left:0;right:0;top:0;height:1.5px;
  background:linear-gradient(90deg,transparent 0%,rgba(216,160,94,0) 12%,rgba(216,160,94,.78) 38%,#FFD696 50%,rgba(216,160,94,.78) 62%,rgba(216,160,94,0) 88%,transparent 100%);
  filter:drop-shadow(0 0 6px rgba(216,160,94,.45));
}
body.page-home footer#exit .wrap{
  display:flex !important;
  align-items:center !important;
  justify-content:space-between !important;
  width:100%;
  padding:0 28px !important;
}
body.page-home footer#exit .foot-row{
  display:flex !important;
  align-items:center !important;
  justify-content:space-between !important;
  width:100%;
}
body.page-home footer#exit .foot-brand{
  display:flex !important;
  align-items:center !important;
  gap:12px !important;
}
body.page-home footer#exit .foot-brand .brand img{
  width:22px;height:22px;border-radius:6px;object-fit:cover;
  box-shadow:0 0 0 1px rgba(216,160,94,.4);
}
body.page-home footer#exit .foot-brand .brand{
  display:flex !important;align-items:center !important;gap:7px !important;
  color:#E8C48F;font-weight:700;text-decoration:none;font-size:.85rem;white-space:nowrap;
}
body.page-home footer#exit .foot-tagline{
  margin:0 !important;font-size:.74rem;color:rgba(238,230,216,.5);letter-spacing:.08em;white-space:nowrap;
}
/* 给首页底部预留空间，避免内容被固定页脚遮挡 */
body.page-home .hero, body.page-home #contact{padding-bottom:90px !important}

/* ---------- 十二、浮动按钮（仅视觉） ---------- */
#back-to-top{background:rgba(20,16,12,.7);border:1px solid rgba(216,160,94,.38);color:var(--gold);backdrop-filter:blur(12px);transition:all .3s ease}
#back-to-top:hover{background:rgba(178,58,68,.55);border-color:rgba(216,160,94,.62);transform:translateY(-3px)}
#map-fab{background:rgba(20,16,12,.7);border:1px solid rgba(216,160,94,.38);color:var(--gold);backdrop-filter:blur(12px)}

/* ---------- 十三、隐藏顶部标题区（rg-hero），让 hero 视觉直接展示 ---------- */
/* 用户要求：首页插画背景上方叠加的标题区块碍眼，隐藏（HTML/JS 不动，随时可恢复） */
.rg-hero{display:none !important}
.u-hr{display:none !important}

/* ---------- 十四、响应式（只做栅格降列，不动导航逻辑） ---------- */
@media (max-width:1024px){
  .kj-map{grid-template-columns:repeat(3,1fr)}
}
@media (max-width:900px){
  .kj-map{grid-template-columns:repeat(2,1fr)}
  .stats-strip .stat .num{font-size:30px}
  #kj-exam-modal{padding:20px}
  .kj-exam-modal-box{max-height:94vh}
  .kj-eps-panel{padding:20px 18px !important}
}
@media (max-width:600px){
  .kj-map{grid-template-columns:repeat(2,1fr);gap:10px}
  .kj-card{padding:20px 10px 14px !important}
  .kj-num{font-size:36px !important}
  .kj-eps-panel{padding:16px 12px !important}
}

/* ---------- 十五、个人中心页（profile.html）—— 整卡式布局 v4 ---------- */
/* 整页一张大卡片，顶部档案区 + 下方左右分栏（导航+内容），参考首页卡片风格 */

/* 锁定个人中心页为一屏（仅限本页，不影响其他页面） */
body.page-profile{overflow:hidden !important}
body.page-profile .rg-hero{display:none !important}
body.page-profile .u-hr{display:none !important}

body.page-profile #profile{
  position:fixed !important;
  top:72px;left:0;right:0;bottom:44px;
  min-height:0 !important;
  display:flex !important;
  flex-direction:column !important;
  overflow:hidden !important;
}

/* 页脚固定在底部（仅个人中心页；首页在下方单独规则固定） */
body.page-profile footer#exit{
  position:fixed !important;
  left:0;right:0;bottom:0;
  z-index:100;
  height:44px;
  background:linear-gradient(180deg, rgba(20,16,12,.9) 0%, rgba(20,16,12,.96) 100%) !important;
  backdrop-filter:blur(16px) saturate(1.15) !important;
  -webkit-backdrop-filter:blur(16px) saturate(1.15) !important;
  border-top:1px solid rgba(216,160,94,.26);
  box-shadow:0 -8px 30px rgba(0,0,0,.35), inset 0 1px 0 rgba(216,160,94,.18);
  display:flex;
  align-items:center;
}
/* 顶部金色光带，与整页滚动页脚一致 */
body.page-profile footer#exit::before{
  content:"";position:absolute;left:0;right:0;top:0;height:1.5px;
  background:linear-gradient(90deg,transparent 0%,rgba(216,160,94,0) 12%,rgba(216,160,94,.78) 38%,#FFD696 50%,rgba(216,160,94,.78) 62%,rgba(216,160,94,0) 88%,transparent 100%);
  filter:drop-shadow(0 0 6px rgba(216,160,94,.45));
}
body.page-profile footer#exit .wrap{
  display:flex !important;
  align-items:center !important;
  justify-content:space-between !important;
  width:100%;
  padding:0 28px !important;
}
body.page-profile footer#exit .foot-brand{
  display:flex !important;
  align-items:center !important;
  gap:14px !important;
}
body.page-profile footer#exit .foot-brand .brand img{width:22px;height:22px;border-radius:6px;object-fit:cover;box-shadow:0 0 0 1px rgba(216,160,94,.4)}
body.page-profile footer#exit .foot-brand .brand{
  display:flex !important;
  align-items:center !important;
  gap:7px !important;
  color:#E8C48F;
  font-weight:700;
  text-decoration:none;
  font-size:.85rem;
  letter-spacing:.04em;
  white-space:nowrap;
}
body.page-profile footer#exit .foot-brand .foot-tagline{
  margin:0;
  font-size:.72rem;
  color:rgba(238,230,216,.5);
  letter-spacing:.08em;
  white-space:nowrap;
}
body.page-profile footer#exit .copyright{
  font-size:.68rem;
  color:rgba(238,230,216,.34);
  letter-spacing:.04em !important;
  white-space:nowrap;
  margin:0 !important;
  padding:0 !important;
  border:none !important;
  line-height:1 !important;
  display:flex !important;
  align-items:center !important;
}

.pc-wrap{
  width:100% !important;
  max-width:none !important;
  min-width:0;
  flex:1;
  margin:0 auto;
  padding:0 16px !important;
  display:flex;
  align-items:stretch;
  justify-content:center;
  overflow:hidden;
  height:100%;
}


/* ===== 整张大卡片（与首页 .floor-row 完全同款背景/边框/阴影） ===== */
.pc-card{
  display:flex !important;
  flex-direction:column !important;
  border-radius:20px !important;
  border:1px solid rgba(201,162,39,.22) !important;
  background:linear-gradient(180deg,rgba(255,255,255,.05),rgba(255,255,255,.015)) !important;
  backdrop-filter:none !important;-webkit-backdrop-filter:none !important;
  box-shadow:0 10px 40px rgba(0,0,0,.25) !important;
  overflow:hidden;
  padding:20px 28px !important;
  position:relative;
  width:100%;
  height:100%;
  min-height:0;
}

.pc-banner{display:none !important}

/* ===== 顶部区 ===== */
.pc-head{
  display:flex !important;align-items:center;gap:22px;
  padding:0 !important;text-align:left;position:relative;
  flex:0 0 auto;
}
.pc-avatar{
  position:relative !important;left:auto !important;top:auto !important;transform:none !important;
  flex:0 0 auto;width:84px !important;height:84px !important;
  border-radius:16px !important;border:2px solid rgba(201,162,39,.6) !important;
  box-shadow:0 0 0 4px rgba(201,162,39,.12),0 8px 24px rgba(0,0,0,.45) !important;
  overflow:hidden;
  background:linear-gradient(140deg,#2a2118,#171412);
}
.pc-avatar-ph{font-size:2.1rem !important}
.pc-avatar:hover{transform:scale(1.04) !important;box-shadow:0 0 0 4px rgba(201,162,39,.22),0 0 36px rgba(201,162,39,.25),0 12px 28px rgba(0,0,0,.5) !important}
.pc-avatar-cam{border-radius:0 0 16px 16px !important}

.pc-info{flex:1;min-width:0;text-align:left}
.pc-name-row{justify-content:flex-start;align-items:center;gap:10px;margin-top:0;flex-wrap:wrap}
.pc-name-row h3{
  font-size:1.45rem !important;font-weight:800;margin:0 !important;line-height:1.2;
  background:linear-gradient(120deg,#fff 0%,#e8c88f 100%);
  -webkit-background-clip:text;background-clip:text;-webkit-text-fill-color:transparent;
  letter-spacing:.03em;
}
.pc-badge{
  border-radius:999px !important;
  background:linear-gradient(140deg,#F2D08A,#C9A227) !important;
  box-shadow:0 4px 14px rgba(201,162,39,.35) !important;
  padding:3px 11px !important;font-size:.7rem !important;line-height:1.4;
}
.pc-role{background:linear-gradient(140deg,#B23A44,#8B2635) !important;color:#fff !important}
.pc-meta{font-size:.78rem !important;letter-spacing:.05em !important;margin-top:5px;color:rgba(255,255,255,.5)}
.pc-bio{max-width:none;margin:6px 0 0 !important;text-align:left;font-size:.86rem !important;color:rgba(255,255,255,.66);line-height:1.55}
.pc-bio.empty{color:rgba(255,255,255,.32);font-style:italic}

/* 统计数字 */
.pc-stats{
  display:flex !important;flex-direction:row !important;
  align-items:center;gap:0;
  flex:0 0 auto;
  border-top:1px solid rgba(201,162,39,.3) !important;
  margin:12px 0 0 !important;padding:10px 0 0 !important;
  border-bottom:1px solid rgba(201,162,39,.3) !important;
}
.pc-stats>div{flex:1;padding:0 20px !important;text-align:center}
.pc-stats>div:first-child{padding-left:20px !important;text-align:center}
.pc-stats>div+div::before{
  content:'';position:absolute;left:0;top:15%;bottom:15%;width:1px;
  background:linear-gradient(180deg,transparent,rgba(201,162,39,.45),transparent);
}
.pc-stats b{display:block !important;font-size:1.4rem !important;font-weight:800 !important;color:#f2d08a !important;text-shadow:0 0 18px rgba(201,162,39,.35) !important}
.pc-stats span{display:block !important;margin-top:3px;font-size:.72rem !important;letter-spacing:.14em;color:rgba(255,255,255,.72) !important}

/* 编辑按钮 */
.pc-banner-btn{
  position:absolute !important;top:28px !important;right:36px !important;left:auto !important;
  border-radius:10px !important;padding:8px 20px !important;
  border:1px solid rgba(201,162,39,.45) !important;
  background:linear-gradient(140deg,rgba(139,38,53,.65),rgba(201,162,39,.55)) !important;
  color:#fff !important;font-size:.76rem !important;font-weight:600;letter-spacing:.06em;
  box-shadow:0 4px 16px rgba(139,38,53,.25);
  transition:transform .2s ease,box-shadow .2s ease !important;cursor:pointer;z-index:2;
}
.pc-banner-btn:hover{transform:translateY(-1px);box-shadow:0 8px 22px rgba(139,38,53,.4) !important}

/* ===== pc-body：左右分栏 ===== */
.pc-body{
  display:flex;gap:0;
  flex:1;
  align-items:stretch !important;
  margin-top:14px;
  border-top:1px solid rgba(201,162,39,.3);
  padding-top:14px;
  min-height:0;
  overflow:hidden;
}

/* ===== 左栏：功能导航（融入卡片，无边框）===== */
.pc-funcs{
  flex:0 0 280px;
  margin-top:0 !important;
  border:none !important;border-radius:0 !important;
  background:transparent !important;
  backdrop-filter:none !important;
  overflow:auto;
  padding:0 !important;
  height:100%;min-height:0;
}
.pc-func{
  display:flex;flex-direction:row !important;
  color:rgba(255,255,255,.85);
  align-items:center;gap:12px;
  width:100%;
  padding:14px 16px !important;
  border:none !important;border-radius:10px !important;
  background:transparent !important;
  text-align:left;
  box-shadow:none !important;
  backdrop-filter:none !important;
  transition:background .18s ease,color .18s ease !important;
  position:relative;
  margin-bottom:4px;
}
.pc-func+.pc-func{border-top:none !important}
.pc-func:hover{
  transform:translateX(4px) !important;
  background:linear-gradient(90deg,rgba(201,162,39,.12),rgba(201,162,39,.04)) !important;
  border-color:transparent !important;
  box-shadow:none !important;
}
.pc-func-active{
  background:linear-gradient(90deg,rgba(201,162,39,.18),rgba(201,162,39,.06)) !important;
  color:#e8c88f;
  border-left:3px solid rgba(201,162,39,.5);
}
.pc-func-active::before{
  content:'';position:absolute;left:0;top:10px;bottom:10px;
  width:3px;border-radius:0 3px 3px 0;
  background:linear-gradient(180deg,#C9A227,#B23A44);
}
.pc-func-ic{
  flex:0 0 36px;width:36px !important;height:36px !important;
  border-radius:10px !important;
  background:rgba(201,162,39,.06) !important;
  border:1px solid rgba(201,162,39,.22);
  display:flex;align-items:center;justify-content:center;
  transition:all .18s ease;
}
.pc-func:hover .pc-func-ic{
  background:rgba(201,162,39,.15) !important;
  border-color:rgba(201,162,39,.45);
}
.pc-func-ic svg{width:17px !important;height:17px !important}
.pc-func-tx{flex:1;min-width:0}
.pc-func-tx b{font-size:.88rem !important;letter-spacing:.03em;color:rgba(255,255,255,.9);display:block}
.pc-func-tx span{font-size:.68rem !important;margin-top:2px !important;color:rgba(255,255,255,.4);display:block}
.pc-func>em{
  display:block !important;flex:0 0 auto;
  color:rgba(201,162,39,.35);font-size:.9rem;font-style:normal !important;
  transition:transform .18s ease,color .18s ease;
}
.pc-func:hover>em{transform:translateX(3px);color:rgba(201,162,39,.7)}
.pc-func.danger .pc-func-ic{background:rgba(180,70,80,.12) !important;border-color:rgba(180,70,80,.25) !important}
.pc-func.danger:hover{background:rgba(180,70,80,.06) !important}
.pc-func.danger:hover .pc-func-tx b{color:#ffb0b0}

/* ===== 右栏：资料详情 ===== */
.pc-editor{
  flex:1;min-width:0;
  margin-top:0 !important;
  border:none !important;
  border-radius:0 !important;
  background:transparent !important;
  backdrop-filter:none !important;
  box-shadow:none !important;
  padding:6px 0 0 40px !important;
  height:100%;min-height:0;overflow:auto;
  display:flex !important;flex-direction:column !important;
}
.pc-editor:not([hidden]){display:flex !important;flex-direction:column !important}

.pc-editor h4{
  color:#e8c88f !important;font-size:1.02rem !important;font-weight:700;
  letter-spacing:.1em;margin:0 0 16px !important;
  padding-bottom:12px;border-bottom:1px solid rgba(201,162,39,.25);
}
.pc-editor h4::after{display:none}

.pc-editor .pc-field{
  display:block !important;
  margin-bottom:14px !important;padding:0;
  border-bottom:none !important;
}
.pc-editor .pc-field.has-textarea{
  margin-bottom:16px !important;
  flex:1;min-height:0;display:flex !important;flex-direction:column !important;
}
.pc-editor .pc-field label{
  display:block !important;
  color:rgba(255,255,255,.62) !important;
  font-size:.76rem !important;letter-spacing:.14em;font-weight:500;
  margin:0 0 7px !important;text-transform:none !important;
  padding:0 !important;
}
.pc-editor .pc-field input,
.pc-editor .pc-field textarea{
  width:100%;
  display:block;
  border:1px solid rgba(255,255,255,.14) !important;
  background:rgba(10,10,12,.55) !important;
  color:#fff !important;font-size:.93rem !important;font-weight:400;
  padding:11px 14px !important;border-radius:10px !important;
  box-shadow:none !important;outline:none !important;
  line-height:1.6;transition:border-color .2s ease,box-shadow .2s ease,background .2s ease;
}
.pc-editor .pc-field textarea{
  min-height:0;
  flex:1;
  resize:none;
}
.pc-editor .pc-field input:focus,
.pc-editor .pc-field textarea:focus{
  border-color:rgba(201,162,39,.55) !important;
  background:rgba(14,14,18,.72) !important;
  box-shadow:0 0 0 3px rgba(201,162,39,.12) !important;
}

/* 按钮区：贴在右栏底部 */
.pc-editor-actions{
  display:flex !important;gap:12px;flex-wrap:wrap;
  margin-top:auto !important;
  padding-top:14px;border-top:1px solid rgba(201,162,39,.3);
  flex:0 0 auto;
}

/* 退出登录面板：确认文字+按钮整体垂直居中 */
.pc-editor#pcLogoutBox{justify-content:center !important}
.pc-editor#pcLogoutBox .pc-editor-actions{
  margin-top:0 !important;
  padding-top:28px;
  justify-content:center;
}
.pc-editor .pc-btn-primary{
  border-radius:10px !important;padding:10px 24px !important;
  background:linear-gradient(140deg,#B23A44,#C9A227) !important;
  border:1px solid rgba(201,162,39,.35) !important;
  color:#fff !important;font-weight:600;cursor:pointer;
  box-shadow:0 4px 16px rgba(139,38,53,.25);
  transition:transform .18s ease,box-shadow .18s ease !important;
  font-family:inherit;letter-spacing:.04em;font-size:.88rem;
}
.pc-editor .pc-btn-primary:hover{transform:translateY(-2px);box-shadow:0 8px 24px rgba(139,38,53,.4) !important}
.pc-editor .pc-btn-ghost{
  border-radius:10px !important;padding:10px 24px !important;
  border:1px solid rgba(255,255,255,.12) !important;
  background:rgba(255,255,255,.03) !important;
  color:rgba(255,255,255,.7) !important;cursor:pointer;
  transition:all .18s ease !important;
  font-family:inherit;letter-spacing:.04em;font-size:.88rem;
}
.pc-editor .pc-btn-ghost:hover{
  border-color:rgba(201,162,39,.4);color:#e8c88f;background:rgba(201,162,39,.05) !important;
}

.pc-hint{text-align:center;color:var(--muted);padding:4px 0}

/* 响应式 */
@media (max-width:900px){
  .pc-wrap{padding:16px !important;min-height:auto}
  .pc-card{padding:24px 20px !important}
  .pc-head{flex-direction:column !important;text-align:center;gap:14px}
  .pc-info{text-align:center}
  .pc-name-row{justify-content:center}
  .pc-bio{text-align:center}
  .pc-banner-btn{position:relative !important;top:auto !important;right:auto !important;margin-top:14px}
  .pc-body{flex-direction:column;gap:20px}
  .pc-funcs{flex:none}
  .pc-editor{padding:20px 0 0 0 !important}
  .pc-stats{flex-wrap:wrap;gap:12px;padding-top:16px !important}
  .pc-stats>div{flex:1 1 auto;padding:0 16px !important;text-align:center}
  .pc-stats>div:first-child{text-align:center}
}
@media (max-width:560px){
  .pc-card{padding:20px 16px !important}
  .pc-avatar{width:80px !important;height:80px !important}
  .pc-name-row h3{font-size:1.3rem !important}
  .pc-editor-actions{flex-direction:column}
  .pc-editor .pc-btn-primary,
  .pc-editor .pc-btn-ghost{width:100%}
}

/* ===== 个人中心窄屏响应式修复（2026-09-15 追加，仅 ≤1100px 生效，宽屏不变）===== */
@media (max-width:1100px){
  /* 解除整页锁屏，恢复自然滚动 */
  body.page-profile{overflow:auto !important}
  body.page-profile #profile{
    position:relative !important;
    top:auto !important;left:auto !important;right:auto !important;bottom:auto !important;
    height:auto !important;
    overflow:visible !important;
    padding-top:88px !important;padding-bottom:64px !important;
  }
  body.page-profile footer#exit{position:relative !important;height:auto !important}
  .pc-wrap{height:auto !important;overflow:visible !important}
  .pc-card{height:auto !important;min-height:0 !important;overflow:visible !important}
  .pc-body{flex-direction:column !important;gap:20px !important;height:auto !important;min-height:0 !important;overflow:visible !important}
  .pc-funcs{flex:0 0 auto !important;width:100% !important;max-width:100% !important;height:auto !important;overflow:visible !important}
  .pc-editor{width:100% !important;max-width:100% !important;height:auto !important;min-height:0 !important;overflow:visible !important;flex:1 1 auto !important}
}

/* ===== 个人中心矮屏响应式修复（2026-09-15 追加，仅高度 ≤850px 生效，高屏不变）===== */
@media (max-height:850px){
  /* 解除整页锁屏，恢复自然滚动（宽度够时仍保持左右分栏） */
  body.page-profile{overflow:auto !important}
  body.page-profile #profile{
    position:relative !important;
    top:auto !important;left:auto !important;right:auto !important;bottom:auto !important;
    height:auto !important;
    overflow:visible !important;
    padding-top:88px !important;padding-bottom:64px !important;
  }
  body.page-profile footer#exit{position:relative !important;height:auto !important}
  .pc-wrap{height:auto !important;overflow:visible !important}
  .pc-card{height:auto !important;min-height:0 !important;overflow:visible !important}
  .pc-body{height:auto !important;min-height:0 !important;overflow:visible !important}
  .pc-funcs{height:auto !important;overflow:visible !important}
  .pc-editor{height:auto !important;min-height:0 !important;overflow:visible !important}
}

/* ===== 全屏播放光标修复（2026-09-15 追加）：全屏时恢复系统光标、隐藏自定义光标 ===== */
video:fullscreen,
video:fullscreen *,
:fullscreen video,
:fullscreen{ cursor:auto !important; }
:fullscreen .cursor-dot,
:fullscreen .cursor-ring{ display:none !important; }
