/* ============================================================
   爱弥斯.space · 子页面样式
   （依赖 style.css 的变量与基础类）
   ============================================================ */

/* ---------- 页面容器 ---------- */
.page{
  width:min(1000px,100%);
  margin:0 auto;
  padding:130px 34px 60px;
}
.page-head{text-align:center;margin-bottom:46px}
.page-title{
  font-size:clamp(30px,5.2vw,46px);
  font-weight:900;letter-spacing:-.8px;
  color:var(--ink);
  margin-bottom:14px;
  position:relative;
  display:inline-block;
}
.page-title::after{
  content:'';
  position:absolute;left:50%;bottom:-12px;
  width:56px;height:4px;border-radius:4px;
  transform:translateX(-50%);
  background:linear-gradient(90deg,#7fd8f0,#2c6bc4);
}
.page-sub{
  margin-top:24px;
  font-size:15px;color:var(--ink-dim);font-weight:500;
}
.page-nav{
  display:flex;flex-wrap:wrap;gap:13px;
  justify-content:center;
  margin-top:44px;
}

/* 导航高亮 */
.nav-links a.active{
  background:rgba(255,255,255,.92);
  color:var(--water-3);
  box-shadow:0 4px 12px rgba(44,107,196,.14);
}

/* ============================================================
   时间线（完整版）
   ============================================================ */
.tl-full{
  position:relative;
  padding-left:38px;
}
.tl-full::before{
  content:'';position:absolute;left:12px;top:10px;bottom:10px;
  width:3px;border-radius:3px;
  background:linear-gradient(180deg,
    var(--water-1) 0%,
    var(--water-2) 30%,
    var(--water-3) 60%,
    var(--water-2) 100%);
  opacity:.45;
}
.tl-full .tl-item{padding-bottom:34px}
.tl-full .tl-item:last-child{padding-bottom:0}
.tl-full .tl-dot{
  left:-38px;top:8px;
  width:14px;height:14px;
}
.tl-full .tl-year{font-size:12.5px;padding:3px 13px}
.tl-full .tl-title{font-size:18px;margin-bottom:8px}
.tl-full .tl-desc{font-size:14.5px;line-height:2}

/* 大字卡片（重点节点） */
.tl-full .tl-item.hl{
  padding:20px 22px 24px 22px;
  margin-left:-6px;
  border-radius:18px;
  background:linear-gradient(120deg,rgba(245,217,139,.2),rgba(255,255,255,.5));
  border:1px solid rgba(217,174,82,.28);
}
.tl-full .tl-item.hl .tl-dot{left:-44px}

/* ============================================================
   测验
   ============================================================ */
.quiz-wrap{
  padding:32px 34px;
  border-radius:var(--r-lg);
}
.quiz-progress{
  display:flex;align-items:center;gap:14px;
  margin-bottom:28px;
}
.qp-bar{
  flex:1;height:8px;border-radius:8px;
  background:rgba(44,107,196,.12);
  overflow:hidden;
}
.qp-fill{
  display:block;height:100%;width:0;
  border-radius:8px;
  background:linear-gradient(90deg,#7fd8f0,#2c6bc4);
  transition:width .45s var(--ease-out);
}
.qp-text{
  font-size:12.5px;font-weight:800;
  color:var(--water-3);
  white-space:nowrap;
}

.quiz-q{
  font-size:clamp(17px,2.6vw,21px);
  font-weight:900;line-height:1.7;
  color:var(--ink);
  margin-bottom:22px;
}
.quiz-opts{
  display:flex;flex-direction:column;gap:11px;
}
.opt-btn{
  display:flex;align-items:center;gap:12px;
  padding:15px 20px;
  border-radius:14px;
  font-size:15px;font-weight:600;font-family:inherit;
  text-align:left;
  color:var(--ink-mid);
  background:rgba(255,255,255,.66);
  border:1.5px solid rgba(255,255,255,.9);
  cursor:pointer;
  transition:transform .25s var(--ease),background .25s,color .25s,border-color .25s,box-shadow .25s;
  -webkit-tap-highlight-color:transparent;
}
.opt-btn:hover{
  transform:translateX(5px);
  background:#fff;color:var(--water-3);
  border-color:rgba(74,168,232,.4);
  box-shadow:0 8px 20px rgba(44,107,196,.13);
}
.opt-key{
  display:flex;align-items:center;justify-content:center;
  width:26px;height:26px;flex-shrink:0;
  border-radius:8px;
  font-size:13px;font-weight:900;
  color:var(--water-3);
  background:rgba(127,216,240,.24);
  transition:background .25s,color .25s;
}
.opt-btn:hover .opt-key{background:var(--water-2);color:#fff}

.opt-btn.correct{
  background:linear-gradient(120deg,rgba(62,168,108,.16),rgba(62,168,108,.08));
  border-color:rgba(62,168,108,.55);
  color:#2d8a5f;
}
.opt-btn.correct .opt-key{background:#3ea86c;color:#fff}
.opt-btn.wrong{
  background:linear-gradient(120deg,rgba(224,90,90,.14),rgba(224,90,90,.06));
  border-color:rgba(224,90,90,.5);
  color:#c74a4a;
}
.opt-btn.wrong .opt-key{background:#e05a5a;color:#fff}
.opt-btn:disabled{cursor:default;transform:none}
.opt-btn:disabled:hover{
  transform:none;box-shadow:none;
}

.quiz-foot{
  display:flex;align-items:center;justify-content:space-between;
  gap:14px;flex-wrap:wrap;
  margin-top:28px;padding-top:22px;
  border-top:1px solid rgba(44,107,196,.1);
}
.quiz-score{font-size:14px;font-weight:600;color:var(--ink-mid)}
.quiz-score b{color:var(--water-3);font-size:18px;font-weight:900}

/* 结果卡 */
.quiz-result{
  display:none;
  margin-top:26px;
  padding:44px 34px;
  border-radius:var(--r-lg);
  text-align:center;
}
.quiz-result.show{display:block;animation:popIn .5s var(--ease)}
@keyframes popIn{
  from{opacity:0;transform:scale(.94) translateY(18px)}
  to{opacity:1;transform:scale(1) translateY(0)}
}
.qr-emoji{
  font-size:56px;line-height:1;
  margin-bottom:16px;
}
.qr-title{
  font-size:clamp(22px,3.6vw,30px);
  font-weight:900;color:var(--ink);
  margin-bottom:12px;
}
.qr-desc{
  font-size:15px;line-height:2;
  color:var(--ink-mid);
  max-width:34em;margin:0 auto 20px;
}
.qr-score{
  font-size:34px;font-weight:900;
  color:var(--water-3);
  letter-spacing:-1px;
  margin-bottom:8px;
}

/* ============================================================
   画廊
   ============================================================ */
.gal-grid{
  display:grid;
  grid-template-columns:repeat(auto-fill,minmax(200px,1fr));
  gap:16px;
}
.gal-item{
  position:relative;
  border-radius:var(--r-md);
  overflow:hidden;
  cursor:pointer;
  aspect-ratio:1;
  background:#fff;
  border:1px solid rgba(255,255,255,.85);
  box-shadow:0 6px 20px rgba(28,84,140,.12);
  transition:transform .42s var(--ease),box-shadow .42s;
  -webkit-tap-highlight-color:transparent;
}
.gal-item:hover{
  transform:translateY(-7px) scale(1.03);
  box-shadow:0 20px 44px rgba(28,84,140,.24);
}
.gal-item img{
  width:100%;height:100%;
  object-fit:cover;
  transition:transform .6s var(--ease-out);
}
.gal-item:hover img{transform:scale(1.08)}
.gal-cap{
  position:absolute;left:0;right:0;bottom:0;
  padding:24px 14px 12px;
  font-size:13px;font-weight:800;
  color:#fff;
  background:linear-gradient(180deg,transparent,rgba(10,26,46,.82));
  display:flex;align-items:center;justify-content:space-between;
  gap:8px;
}
.gal-cap svg{flex-shrink:0;opacity:.9}

.gal-empty{
  display:none;
  margin-top:22px;
  padding:44px 30px;
  border-radius:var(--r-lg);
  text-align:center;
}
.gal-empty.show{display:block}
.ge-ico{
  display:inline-flex;align-items:center;justify-content:center;
  width:64px;height:64px;margin-bottom:16px;
  border-radius:22px;
  color:var(--water-3);
  background:linear-gradient(135deg,rgba(127,216,240,.42),rgba(74,168,232,.16));
}
.gal-empty h3{font-size:19px;font-weight:900;color:var(--ink);margin-bottom:10px}
.gal-empty p{font-size:14px;line-height:1.9;color:var(--ink-mid)}

/* 预览层 */
.viewer{
  position:fixed;inset:0;z-index:500;
  display:none;
  align-items:center;justify-content:center;
  padding:24px;
}
.viewer.show{display:flex}
.viewer-bg{
  position:absolute;inset:0;
  background:rgba(10,26,46,.62);
  -webkit-backdrop-filter:blur(10px);
  backdrop-filter:blur(10px);
  animation:fadeIn .3s ease;
}
@keyframes fadeIn{from{opacity:0}to{opacity:1}}
.viewer-box{
  position:relative;z-index:2;
  max-width:min(680px,100%);
  max-height:88vh;
  padding:14px;
  border-radius:var(--r-lg);
  display:flex;flex-direction:column;
  animation:popIn .38s var(--ease);
}
.viewer-box img{
  width:100%;max-height:64vh;
  object-fit:contain;
  border-radius:var(--r-sm);
  background:repeating-conic-gradient(rgba(180,220,245,.22) 0% 25%,#fff 0% 50%) 50%/22px 22px;
}
.viewer-bar{
  display:flex;align-items:center;justify-content:space-between;
  gap:12px;flex-wrap:wrap;
  padding:14px 6px 2px;
}
.viewer-name{
  font-size:14px;font-weight:800;color:var(--ink);
}
.viewer-acts{display:flex;gap:9px}
.viewer-acts .btn{padding:10px 20px;font-size:14px}

/* ============================================================
   响应式
   ============================================================ */
@media (max-width:720px){
  .page{padding:112px 20px 44px}
  .quiz-wrap{padding:24px 20px}
  .quiz-result{padding:34px 22px}
  .tl-full{padding-left:32px}
  .tl-full::before{left:9px}
  .tl-full .tl-dot{left:-32px}
  .tl-full .tl-item.hl{padding:16px 16px 20px}
  .tl-full .tl-item.hl .tl-dot{left:-38px}
  .gal-grid{grid-template-columns:repeat(auto-fill,minmax(140px,1fr));gap:12px}
  .viewer{padding:14px}
  .viewer-acts{width:100%}
  .viewer-acts .btn{flex:1;justify-content:center}
}

@media (max-width:400px){
  .opt-btn{padding:13px 15px;font-size:14px}
  .opt-key{width:23px;height:23px;font-size:12px}
}