/* ============ 光擎（Lumen）主题 H5 公共样式 —— 明亮科技风 ============
 * 设计语言：冷白浅空底 + 靛青/紫/翠科技光晕，明亮通透、层次清晰、轻动效
 * 所有组件类名与旧主题保持一致，仅通过 CSS 变量切换全局配色
 * ========================================================================== */
:root {
  /* 底色：冷白浅空（明亮） */
  --pk-bg-1:#eef3fc; --pk-bg-2:#f5f8fe; --pk-bg-3:#e7eefb;
  /* 主色：科技靛（主操作 / 强调） */
  --pk-primary:#6366f1; --pk-primary-2:#4f46e5;
  /* 辅助：科技青（次要强调 / 进度 / 链接） */
  --pk-cyan:#06b6d4; --pk-cyan-2:#0891b2;
  /* 功能色 */
  --pk-violet:#7c3aed; --pk-emerald:#10b981;
  --pk-gold:#f59e0b; --pk-pink:#ec4899;
  --pk-green:#10b981; --pk-red:#ef4444;
  /* 文字：深色为主，明亮底上高对比 */
  --pk-text:#0f172a; --pk-text-2:#475569; --pk-text-3:#94a3b8;
  /* 卡片：白色玻璃（明亮底上的悬浮感） */
  --pk-card:rgba(255,255,255,.74); --pk-card-border:rgba(99,102,241,.16);
  --pk-radius:14px;
  /* 阴影：柔和彩投影 */
  --pk-shadow-primary:0 10px 26px rgba(99,102,241,.30);
  --pk-shadow-cyan:0 10px 26px rgba(6,182,212,.28);
  --pk-shadow-soft:0 8px 22px rgba(30,41,59,.10);
}
* { margin:0; padding:0; box-sizing:border-box; -webkit-tap-highlight-color:transparent; }
html, body { height:100%; }
body {
  font-family:-apple-system,BlinkMacSystemFont,'Segoe UI','PingFang SC','Microsoft YaHei',sans-serif;
  background:
    radial-gradient(820px 460px at 10% -10%, rgba(99,102,241,.20), transparent 60%),
    radial-gradient(760px 440px at 98% 2%, rgba(6,182,212,.18), transparent 58%),
    radial-gradient(720px 520px at 50% 118%, rgba(236,72,153,.13), transparent 60%),
    linear-gradient(165deg,var(--pk-bg-1),var(--pk-bg-2) 56%,var(--pk-bg-3));
  background-attachment:fixed; color:var(--pk-text); font-size:14px; line-height:1.6;
  -webkit-font-smoothing:antialiased;
}
/* 科技网格底纹（极淡，营造科技氛围） */
body::before{
  content:''; position:fixed; inset:0; z-index:0; pointer-events:none; opacity:.5;
  background-image:
    linear-gradient(rgba(99,102,241,.06) 1px,transparent 1px),
    linear-gradient(90deg,rgba(99,102,241,.06) 1px,transparent 1px);
  background-size:30px 30px;
  -webkit-mask-image:radial-gradient(circle at 50% 0%,#000 0%,transparent 78%);
          mask-image:radial-gradient(circle at 50% 0%,#000 0%,transparent 78%);
}
a { color:var(--pk-cyan-2); text-decoration:none; }
img { max-width:100%; display:block; }
button { font-family:inherit; cursor:pointer; border:none; outline:none; background:none; }
input,textarea,select { font-family:inherit; outline:none; }
ul,li { list-style:none; }

/* 容器：移动端居中，PC 上限宽 480px */
.pk-app { max-width:480px; margin:0 auto; min-height:100vh; position:relative; z-index:1; }
.pk-page { padding:16px; }
.pk-has-tabbar { padding-bottom:84px; }

/* 顶部栏：白色玻璃 */
.pk-topbar {
  display:flex; align-items:center; gap:10px; padding:14px 16px;
  position:sticky; top:0; z-index:20;
  background:linear-gradient(180deg,rgba(255,255,255,.92),rgba(255,255,255,.66));
  backdrop-filter:blur(14px); border-bottom:1px solid var(--pk-card-border);
}
.pk-topbar__title { font-size:17px; font-weight:700; flex:1; color:var(--pk-text); }
.pk-topbar__back {
  width:32px; height:32px; border-radius:10px; background:var(--pk-card);
  color:var(--pk-text); display:flex; align-items:center; justify-content:center; font-size:18px;
  border:1px solid var(--pk-card-border);
}

/* 卡片：白色玻璃 + 柔阴影 */
.pk-card {
  background:var(--pk-card); border:1px solid var(--pk-card-border);
  border-radius:var(--pk-radius); padding:16px;
  backdrop-filter:blur(12px);
  box-shadow:var(--pk-shadow-soft), inset 0 1px 0 rgba(255,255,255,.6);
  margin-bottom:12px;
}
.pk-card__title {
  font-size:14px; font-weight:600; color:var(--pk-text-2);
  margin-bottom:12px; display:flex; align-items:center; gap:6px;
}
.pk-card__title::before {
  content:''; width:3px; height:14px; border-radius:2px;
  background:linear-gradient(180deg,var(--pk-cyan-2),var(--pk-primary-2));
}

/* 按钮：渐变 + 流光 */
.pk-btn {
  position:relative; overflow:hidden;
  display:inline-flex; align-items:center; justify-content:center; gap:6px;
  padding:11px 18px; border-radius:12px; font-size:14px; font-weight:600; color:#fff;
  background:linear-gradient(135deg,var(--pk-primary),var(--pk-cyan));
  box-shadow:var(--pk-shadow-primary); transition:all .2s;
}
.pk-btn::after {
  content:''; position:absolute; top:0; left:-120%; width:60%; height:100%;
  background:linear-gradient(110deg,transparent,rgba(255,255,255,.45),transparent);
  transform:skewX(-20deg); transition:left .6s;
}
.pk-btn:active { transform:scale(.97); }
.pk-btn:active::after { left:140%; }
.pk-btn--block { display:flex; width:100%; }
.pk-btn--ghost { background:var(--pk-card); color:var(--pk-text-2); border:1px solid var(--pk-card-border); box-shadow:none; }
.pk-btn--ghost::after { display:none; }
.pk-btn--cyan { background:linear-gradient(135deg,var(--pk-cyan),var(--pk-cyan-2)); box-shadow:var(--pk-shadow-cyan); }
.pk-btn--emerald { background:linear-gradient(135deg,var(--pk-emerald),#34d399); box-shadow:0 10px 26px rgba(16,185,129,.30); }
.pk-btn--gold { background:linear-gradient(135deg,var(--pk-gold),#fbbf24); box-shadow:0 10px 26px rgba(245,158,11,.30); }
.pk-btn--danger { background:linear-gradient(135deg,var(--pk-red),#f87171); box-shadow:0 10px 26px rgba(239,68,68,.30); }
.pk-btn[disabled] { opacity:.5; box-shadow:none; }
.pk-btn[disabled]::after { display:none; }

/* 表单 */
.pk-field { margin-bottom:14px; }
.pk-field__label { font-size:13px; color:var(--pk-text-3); margin-bottom:6px; }
.pk-input,.pk-textarea,.pk-select {
  width:100%; padding:12px 14px; background:rgba(255,255,255,.7);
  border:1px solid var(--pk-card-border); border-radius:12px;
  color:var(--pk-text); font-size:14px; transition:border-color .2s, box-shadow .2s;
}
.pk-input:focus,.pk-textarea:focus,.pk-select:focus {
  border-color:var(--pk-primary-2);
  box-shadow:0 0 0 3px rgba(99,102,241,.18);
}
.pk-input::placeholder,.pk-textarea::placeholder { color:var(--pk-text-3); }
.pk-textarea { resize:none; min-height:80px; }

/* 底部 tabbar：白色玻璃 + 选中项光条 */
.pk-tabbar {
  position:fixed; bottom:0; left:50%; transform:translateX(-50%);
  width:100%; max-width:480px; display:flex; z-index:30;
  background:linear-gradient(180deg,rgba(255,255,255,.86),rgba(255,255,255,.97));
  backdrop-filter:blur(16px); border-top:1px solid var(--pk-card-border);
  box-shadow:0 -6px 20px rgba(30,41,59,.06);
  padding-bottom:env(safe-area-inset-bottom);
}
.pk-tabbar__item {
  position:relative; flex:1; display:flex; flex-direction:column; align-items:center; gap:2px;
  padding:8px 0; color:var(--pk-text-3); font-size:11px; transition:color .2s;
}
.pk-tabbar__item .ico { font-size:20px; line-height:1; transition:transform .2s; }
.pk-tabbar__item.is-active { color:var(--pk-primary-2); }
.pk-tabbar__item.is-active .ico { transform:translateY(-1px) scale(1.12); }
.pk-tabbar__item.is-active::after {
  content:''; position:absolute; bottom:2px; left:50%; transform:translateX(-50%);
  width:22px; height:3px; border-radius:2px;
  background:linear-gradient(90deg,var(--pk-primary-2),var(--pk-cyan-2));
  box-shadow:0 0 8px var(--pk-primary-2);
}

/* 标签 */
.pk-tag {
  display:inline-flex; align-items:center; padding:2px 8px; border-radius:6px;
  font-size:11px; font-weight:500; background:rgba(99,102,241,.14); color:var(--pk-primary-2);
}
.pk-tag--green { background:rgba(16,185,129,.16); color:var(--pk-green); }
.pk-tag--emerald { background:rgba(16,185,129,.16); color:var(--pk-emerald); }
.pk-tag--gold { background:rgba(245,158,11,.18); color:var(--pk-gold); }
.pk-tag--red { background:rgba(239,68,68,.16); color:var(--pk-red); }
.pk-tag--cyan { background:rgba(6,182,212,.16); color:var(--pk-cyan-2); }

/* 列表行 */
.pk-list-item {
  display:flex; align-items:center; gap:12px; padding:14px;
  background:var(--pk-card); border:1px solid var(--pk-card-border);
  border-radius:12px; margin-bottom:10px; transition:transform .15s, border-color .15s;
  box-shadow:var(--pk-shadow-soft);
}
.pk-list-item:active { transform:scale(.99); border-color:rgba(99,102,241,.32); }

/* 空状态 */
.pk-empty { text-align:center; padding:60px 20px; color:var(--pk-text-3); }
.pk-empty .ico { font-size:48px; margin-bottom:12px; display:block; opacity:.5; }

/* Toast */
.pk-toast {
  position:fixed; top:40%; left:50%; transform:translate(-50%,-50%);
  background:rgba(15,23,42,.92); color:#fff; padding:12px 20px;
  border-radius:12px; font-size:14px; z-index:9999; max-width:80%; text-align:center;
  border:1px solid rgba(255,255,255,.12); box-shadow:0 12px 40px rgba(0,0,0,.4); animation:pkToastIn .2s;
}
.pk-toast--error { border-color:var(--pk-red); box-shadow:0 12px 40px rgba(239,68,68,.3); }
.pk-toast--success { border-color:var(--pk-green); box-shadow:0 12px 40px rgba(16,185,129,.3); }
@keyframes pkToastIn { from{opacity:0;transform:translate(-50%,-60%) scale(.9);} to{opacity:1;transform:translate(-50%,-50%) scale(1);} }

/* Loading */
.pk-loading-mask {
  position:fixed; inset:0; background:rgba(238,243,252,.72); z-index:9998;
  display:flex; align-items:center; justify-content:center; backdrop-filter:blur(3px);
}
.pk-spinner {
  width:38px; height:38px; border:3px solid rgba(99,102,241,.18);
  border-top-color:var(--pk-primary-2); border-right-color:var(--pk-cyan-2);
  border-radius:50%; animation:pkSpin .8s linear infinite;
}
@keyframes pkSpin { to{transform:rotate(360deg);} }

/* 小节标题 */
.pk-section-title {
  font-size:15px; font-weight:700; color:var(--pk-text);
  margin:16px 0 10px; display:flex; align-items:center; gap:8px;
}
.pk-section-title::before {
  content:''; width:4px; height:16px; border-radius:2px;
  background:linear-gradient(180deg,var(--pk-cyan-2),var(--pk-primary-2));
}

/* 工具类 */
.pk-flex{display:flex;align-items:center;}
.pk-flex-between{display:flex;align-items:center;justify-content:space-between;}
.pk-flex-col{display:flex;flex-direction:column;}
.pk-gap-8{gap:8px;} .pk-gap-12{gap:12px;}
.pk-mt-8{margin-top:8px;} .pk-mt-12{margin-top:12px;} .pk-mt-16{margin-top:16px;} .pk-mb-12{margin-bottom:12px;}
.pk-text-3{color:var(--pk-text-3);} .pk-text-2{color:var(--pk-text-2);}
.pk-text-gold{color:var(--pk-gold);} .pk-text-cyan{color:var(--pk-cyan-2);} .pk-text-primary{color:var(--pk-primary-2);}
.pk-text-emerald{color:var(--pk-emerald);} .pk-text-pink{color:var(--pk-pink);}
.pk-text-center{text-align:center;} .pk-text-right{text-align:right;}
.pk-font-lg{font-size:16px;} .pk-font-xl{font-size:22px;font-weight:700;} .pk-font-sm{font-size:12px;}
.pk-truncate{overflow:hidden;text-overflow:ellipsis;white-space:nowrap;}
.pk-hide{display:none!important;}
.pk-divider{height:1px;background:var(--pk-card-border);margin:12px 0;border:none;}

/* 科技渐变文字 */
.pk-grad-text {
  background:linear-gradient(90deg,var(--pk-primary-2),var(--pk-cyan-2),var(--pk-pink));
  -webkit-background-clip:text; background-clip:text; color:transparent;
}
.pk-grad-text-2 {
  background:linear-gradient(90deg,var(--pk-text),var(--pk-cyan-2));
  -webkit-background-clip:text; background-clip:text; color:transparent;
}

/* ============ 答题过程通用动画（练习 / PK 共享）============ */
/* 题目卡片切入：上浮淡入 */
@keyframes pkQEnter{from{opacity:0;transform:translateY(18px) scale(.98);}to{opacity:1;transform:translateY(0) scale(1);}}
.pk-q-enter{animation:pkQEnter .42s cubic-bezier(.2,.7,.3,1) both;}
/* 选项逐条入场（不设基础 opacity:0，避免 animation 被覆盖时元素消失） */
@keyframes pkOptIn{from{opacity:0;transform:translateX(-10px);}to{opacity:1;transform:translateX(0);}}
.pk-opt-in{animation:pkOptIn .4s ease-out both;}
/* 选项选中涟漪 */
@keyframes pkRipple{0%{box-shadow:0 0 0 0 rgba(99,102,241,.4);}100%{box-shadow:0 0 0 16px rgba(99,102,241,0);}}
.pk-ripple{animation:pkRipple .5s ease-out;}
/* 对错结果弹出 */
@keyframes pkResultPop{0%{opacity:0;transform:scale(.7) translateY(10px);}60%{transform:scale(1.04);}100%{opacity:1;transform:scale(1) translateY(0);}}
.pk-result-pop{animation:pkResultPop .45s cubic-bezier(.2,1.3,.4,1) both;}
/* 加分飘字 */
@keyframes pkFloatScore{0%{opacity:0;transform:translateY(0) scale(.6);}25%{opacity:1;transform:translateY(-10px) scale(1.15);}100%{opacity:0;transform:translateY(-46px) scale(1);}}
.pk-float-score{position:fixed;z-index:60;font-size:20px;font-weight:800;pointer-events:none;animation:pkFloatScore 1s ease-out forwards;}
/* 摇头（答错抖动） */
@keyframes pkShake{10%,90%{transform:translateX(-2px);}20%,80%{transform:translateX(3px);}30%,50%,70%{transform:translateX(-5px);}40%,60%{transform:translateX(5px);}}
.pk-shake{animation:pkShake .5s both;}
/* 庆祝光晕脉冲 */
@keyframes pkGlow{0%,100%{filter:drop-shadow(0 0 6px rgba(245,158,11,.4));}50%{filter:drop-shadow(0 0 18px rgba(245,158,11,.8));}}
.pk-glow{animation:pkGlow 1.6s ease-in-out infinite;}
/* 撒花粒子（练习结果 / PK 胜利共享） */
.confetti{position:fixed;inset:0;z-index:50;pointer-events:none;overflow:hidden;}
.confetti i{position:absolute;top:-12px;width:8px;height:14px;border-radius:2px;opacity:.9;}
@keyframes confettiFall{to{transform:translateY(110vh) rotate(540deg);opacity:0;}}