/* ==========================================================================
   ZAAT Speak Quest · components.css
   全站共享组件：站点头部 / 站点底部 / 通用卡片 / 横滑任务行 / 弹窗（支付、云端启动）
   登录 / 注册为独立页面（login.html / register.html），共享表单控件仍在本文档
   ========================================================================== */

/* --------------------------------------------------------------------------
   1. 站点头部（由 js/site.js 注入 <site-header>，所有页面一致）
   -------------------------------------------------------------------------- */
site-header { display: block; position: sticky; top: 0; z-index: 60; }

.site-header {
  min-height: var(--header-h);
  display: grid;
  grid-template-columns: 200px 1fr auto;
  align-items: center;
  gap: 20px;
  padding: 0 max(20px, calc((100vw - var(--container)) / 2));
  background: rgba(5, 13, 26, .82);
  border-bottom: 1px solid var(--line);
  backdrop-filter: blur(14px);
}

.brand {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  color: var(--text);
  font-weight: 800;
}

.brand img { width: 34px; height: 34px; }

.brand strong { display: block; font-size: 16px; line-height: 1.2; letter-spacing: .04em; }
.brand small { display: block; font-size: 10px; font-weight: 600; letter-spacing: .3em; color: var(--text-muted); }

.nav-links { display: flex; align-items: center; gap: 6px; }

.nav-links a {
  padding: 8px 14px;
  border-radius: 999px;
  font-size: 14px;
  font-weight: 600;
  color: var(--text-soft);
  transition: color .16s ease, background .16s ease;
}

.nav-links a:hover { color: var(--text); background: var(--panel-soft); }

.nav-links a.is-active {
  color: #ffd98c;
  background: rgba(255, 210, 94, .1);
  box-shadow: inset 0 0 0 1px rgba(255, 210, 94, .3);
}

.nav-actions { display: flex; align-items: center; gap: 10px; }

.nav-auth { font-size: 14px; font-weight: 600; color: var(--text-soft); padding: 8px 4px; }
.nav-auth:hover { color: var(--text); }

.avatar-link {
  display: grid;
  place-items: center;
  width: 38px;
  height: 38px;
  border-radius: 50%;
  font-size: 14px;
  font-weight: 800;
  color: var(--gold-ink);
  background: linear-gradient(135deg, #ffe08a, var(--gold-deep));
  box-shadow: 0 6px 16px rgba(255, 190, 60, .3);
}

.menu-toggle { display: none; font-size: 20px; padding: 6px 10px; color: var(--text-soft); }

@media (max-width: 960px) {
  .site-header { grid-template-columns: auto 1fr auto; }
  .menu-toggle { display: inline-flex; }

  .nav-links {
    position: absolute;
    top: var(--header-h);
    left: 0;
    right: 0;
    flex-direction: column;
    align-items: stretch;
    padding: 10px 16px 16px;
    background: rgba(5, 13, 26, .97);
    border-bottom: 1px solid var(--line);
    display: none;
  }

  site-header.nav-open .nav-links { display: flex; }
  .nav-links a { padding: 12px 14px; border-radius: var(--radius-md); }
}

/* --------------------------------------------------------------------------
   2. 站点底部
   -------------------------------------------------------------------------- */
site-footer { display: block; position: relative; z-index: 1; }

.site-footer {
  margin-top: 60px;
  padding: 34px 0 40px;
  border-top: 1px solid var(--line);
  background: rgba(4, 10, 20, .7);
}

.site-footer .container {
  display: flex;
  flex-wrap: wrap;
  gap: 12px 28px;
  align-items: center;
  justify-content: space-between;
  font-size: 12.5px;
  color: var(--text-muted);
}

.site-footer a { color: var(--text-soft); }
.site-footer a:hover { color: var(--cyan); }

/* --------------------------------------------------------------------------
   3. 数据统计条
   -------------------------------------------------------------------------- */
.stat-strip {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(150px, 1fr));
  gap: 14px;
}

.stat-strip > div {
  padding: 16px 18px;
  border-radius: var(--radius-md);
  background: var(--panel);
  border: 1px solid var(--line);
}

.stat-strip strong { display: block; font-size: 22px; font-weight: 800; color: var(--gold); }
.stat-strip span { font-size: 12.5px; color: var(--text-muted); }

/* 数字与单位同行变体（如：96 总任务） */
.stat-strip.inline > div { display: flex; align-items: baseline; gap: 8px; padding: 14px 16px; }
.stat-strip.inline strong { font-size: 24px; line-height: 1; }

/* --------------------------------------------------------------------------
   4. 通用页面 Hero（内页统一头部）
   -------------------------------------------------------------------------- */
.page-hero { padding: 64px 0 48px; }

.page-hero .crumb { font-size: 13px; color: var(--text-muted); margin-bottom: 18px; }
.page-hero .crumb a { color: var(--text-muted); }
.page-hero .crumb a:hover { color: var(--cyan); }
.page-hero h1 span { color: var(--gold); }
.page-hero p { max-width: 720px; margin-top: 14px; color: var(--text-soft); }

/* --------------------------------------------------------------------------
   5. 横滑任务行（任务体系 / 个人中心共用）
   -------------------------------------------------------------------------- */
.lane { margin-bottom: 26px; min-width: 0; }

.lane-head {
  display: flex;
  align-items: center;
  gap: 12px;
  margin-bottom: 10px;
  font-size: 13px;
  color: var(--text-muted);
}

.lane-head b { color: var(--text-soft); font-weight: 600; }

.lane-head .lane-nav { margin-left: auto; display: flex; gap: 8px; }

.lane-head .lane-prev, .lane-head .lane-next {
  width: 32px;
  height: 32px;
  border-radius: 50%;
  display: grid;
  place-items: center;
  font-size: 17px;
  color: var(--text);
  background: var(--panel-soft);
  border: 1px solid var(--line-strong);
  transition: background .16s ease, border-color .16s ease, opacity .16s ease;
}

.lane-head .lane-prev:hover, .lane-head .lane-next:hover {
  border-color: rgba(56, 225, 255, .5);
  background: rgba(56, 225, 255, .08);
}

.lane-head .lane-prev[disabled], .lane-head .lane-next[disabled] { opacity: .35; cursor: default; }

.lane-row {
  display: grid;
  grid-auto-flow: column;
  grid-auto-columns: minmax(255px, 1fr);
  gap: 14px;
  overflow-x: auto;
  padding: 4px 2px 4px;
  scroll-snap-type: x mandatory;
  /* 原生滚动条隐藏，使用下方自绘滚动指示条（各浏览器表现一致） */
  scrollbar-width: none;
}

.lane-row::-webkit-scrollbar { display: none; }

.lane-row > * { scroll-snap-align: start; }

/* 自绘滚动指示条（由 js/site.js 初始化、同步与拖拽） */
.lane-bar {
  position: relative;
  height: 6px;
  margin: 10px 2px 0;
  border-radius: 999px;
  background: rgba(148, 196, 255, .1);
  overflow: hidden;
  cursor: pointer;
  touch-action: none;
  user-select: none;
}

.lane-bar i {
  position: absolute;
  top: 0;
  bottom: 0;
  left: 0;
  width: 30%;
  border-radius: 999px;
  background: linear-gradient(90deg, #ffe08a, var(--gold-deep));
}

.lane-bar.hidden { display: none; }

/* --------------------------------------------------------------------------
   6. 任务卡（商品态：详情 + 购买）
   -------------------------------------------------------------------------- */
.task-card {
  display: flex;
  flex-direction: column;
  overflow: hidden;
  border-radius: var(--radius-lg);
  background: var(--panel);
  border: 1px solid var(--line);
  transition: transform .2s ease, border-color .2s ease;
}

.task-card:hover { transform: translateY(-3px); border-color: rgba(56, 225, 255, .4); }

.task-card img { width: 100%; aspect-ratio: 16 / 10; object-fit: cover; }

.task-card-body { display: grid; gap: 6px; padding: 14px 16px 16px; flex: 1; }
.task-card-body .num { font-size: 11.5px; letter-spacing: .14em; color: var(--cyan); font-weight: 700; }
.task-card-body h3 { font-size: 15.5px; }
.task-card-body p { font-size: 12.5px; color: var(--text-muted); }

.task-card-buy {
  margin-top: auto;
  padding-top: 10px;
  display: flex;
  align-items: center;
  gap: 8px;
  border-top: 1px solid var(--line);
}

.task-card-buy strong { font-size: 14px; color: var(--gold); }
.task-card-buy .grow { flex: 1; }
.task-card-buy a { font-size: 12.5px; color: var(--text-soft); }
.task-card-buy a:hover { color: var(--cyan); }

/* 查看任务按钮（无价格/购买态的任务卡主操作） */
.task-card-buy .detail-btn {
  flex: 1;
  padding: 7px 14px;
  border-radius: 999px;
  font-size: 12.5px;
  font-weight: 700;
  text-align: center;
  color: var(--cyan);
  background: rgba(56, 225, 255, .08);
  border: 1px solid rgba(56, 225, 255, .35);
  transition: background .2s ease, border-color .2s ease;
}

.task-card-buy .detail-btn:hover {
  background: rgba(56, 225, 255, .16);
  border-color: rgba(56, 225, 255, .6);
}

.task-card-buy .buy-btn {
  padding: 6px 14px;
  border-radius: 999px;
  font-size: 12.5px;
  font-weight: 700;
  color: var(--gold-ink);
  background: linear-gradient(135deg, #ffe08a, var(--gold-deep));
}

/* 个人中心任务卡（权益态：详情 + 开启/复练/报告） */
.owned-card { position: relative; }
.owned-card .state-tag {
  position: absolute;
  top: 10px;
  left: 10px;
  z-index: 1;
  padding: 3px 10px;
  border-radius: 999px;
  font-size: 11px;
  font-weight: 700;
  background: rgba(5, 13, 26, .85);
  border: 1px solid var(--line-strong);
  color: var(--text-soft);
}

.owned-card.is-done .state-tag { color: #a5f7cd; border-color: rgba(125, 240, 182, .45); }
.owned-card.is-current .state-tag { color: #ffd98c; border-color: rgba(255, 210, 94, .5); }

/* 关卡锁定态：顺序解锁模式，未解锁关卡降饱和但保留少量色彩，悬停略微提亮 */
.owned-card.is-locked img { filter: grayscale(.55) brightness(.7); transition: filter .25s ease; }
.owned-card.is-locked:hover img { filter: grayscale(.4) brightness(.85); }
.owned-card.is-locked .state-tag { color: #9fb0c6; }
.owned-card.is-locked .task-card-body h3 { color: var(--text-soft); }

.lock-hint { font-size: 12px; color: var(--text-muted); font-weight: 600; white-space: nowrap; }

/* 奖励与权益卡行 */
.ticket-row { display: grid; grid-template-columns: repeat(auto-fill, minmax(260px, 1fr)); gap: 14px; }

.owned-card-actions { display: flex; align-items: center; gap: 8px; margin-top: auto; padding-top: 10px; border-top: 1px solid var(--line); }
.owned-card-actions a { font-size: 12.5px; color: var(--text-soft); }
.owned-card-actions a:hover { color: var(--cyan); }
.owned-card-actions .grow { flex: 1; }

.owned-card-actions .start-btn {
  padding: 6px 14px;
  border-radius: 999px;
  font-size: 12.5px;
  font-weight: 700;
  color: var(--gold-ink);
  background: linear-gradient(135deg, #ffe08a, var(--gold-deep));
}

.owned-card-actions .start-btn.replay {
  color: #241a00;
  background: linear-gradient(135deg, #ffe9a8, #ffb938);
  box-shadow: 0 6px 16px rgba(255, 170, 40, .3);
}

/* 无封面卡（如权益卡）：给状态标签留出空间 */
.owned-card.no-media .task-card-body { padding-top: 36px; }

/* --------------------------------------------------------------------------
   7. 弹窗（支付 / 云端启动）与共享表单控件（登录注册页复用）
   -------------------------------------------------------------------------- */
.modal-shell {
  position: fixed;
  inset: 0;
  z-index: 100;
  display: grid;
  place-items: center;
  padding: 20px;
  visibility: hidden;
  opacity: 0;
  transition: opacity .2s ease, visibility .2s ease;
}

.modal-shell.open { visibility: visible; opacity: 1; }

.modal-backdrop {
  position: absolute;
  inset: 0;
  background: rgba(2, 6, 14, .78);
  backdrop-filter: blur(6px);
}

.modal-panel {
  position: relative;
  width: min(480px, 100%);
  max-height: calc(100vh - 40px);
  overflow-y: auto;
  padding: 28px;
  border-radius: var(--radius-lg);
  background: linear-gradient(180deg, #0c1b30, #081424);
  border: 1px solid var(--line-strong);
  box-shadow: var(--shadow-pop);
  transform: translateY(10px);
  transition: transform .22s ease;
}

.modal-shell.open .modal-panel { transform: none; }

.modal-close {
  position: absolute;
  top: 14px;
  right: 14px;
  width: 32px;
  height: 32px;
  border-radius: 50%;
  display: grid;
  place-items: center;
  font-size: 18px;
  color: var(--text-soft);
  background: var(--panel-soft);
  border: 1px solid var(--line);
}

.modal-close:hover { color: var(--text); border-color: var(--line-strong); }

.modal-kicker {
  font-size: 11px;
  font-weight: 700;
  letter-spacing: .24em;
  color: var(--cyan);
}

.modal-panel h2 { margin: 8px 0 6px; font-size: 22px; }
.modal-panel > p, .modal-panel .modal-sub { font-size: 13px; color: var(--text-soft); }

.form-grid { display: grid; gap: 14px; margin-top: 16px; }
.form-row { display: flex; gap: 10px; }
.form-row input { flex: 1; min-height: 44px; padding: 10px 14px; border-radius: var(--radius-md); color: var(--text); background: rgba(6, 14, 26, .85); border: 1px solid var(--line-strong); outline: none; }
.form-row input:focus { border-color: rgba(56, 225, 255, .6); }
.form-row button { min-height: 44px; padding: 0 16px; border-radius: var(--radius-md); font-size: 13px; font-weight: 700; color: #bdf1ff; background: rgba(56, 225, 255, .12); border: 1px solid rgba(56, 225, 255, .4); }

.form-note { font-size: 12px; color: var(--text-muted); }

.modal-status {
  margin-top: 16px;
  padding: 10px 14px;
  border-radius: var(--radius-md);
  font-size: 12.5px;
  color: var(--text-soft);
  background: rgba(56, 225, 255, .07);
  border: 1px solid rgba(56, 225, 255, .2);
}

.code-boxes { display: flex; gap: 8px; }

.code-boxes input {
  flex: 1;
  min-width: 0;
  aspect-ratio: 1;
  max-height: 52px;
  border-radius: var(--radius-md);
  text-align: center;
  font-size: 20px;
  font-weight: 700;
  color: var(--text);
  background: rgba(6, 14, 26, .85);
  border: 1px solid var(--line-strong);
  outline: none;
}

.code-boxes input:focus { border-color: rgba(56, 225, 255, .6); }

.wide-action {
  width: 100%;
  min-height: 46px;
  border-radius: 999px;
  font-size: 14px;
  font-weight: 800;
  color: var(--gold-ink);
  background: linear-gradient(135deg, #ffe08a, var(--gold-deep));
}

.qr-box {
  width: 168px;
  aspect-ratio: 1;
  margin: 0 auto;
  display: grid;
  place-items: center;
  border-radius: var(--radius-md);
  background:
    repeating-linear-gradient(0deg, rgba(148, 196, 255, .16) 0 8px, transparent 8px 16px),
    repeating-linear-gradient(90deg, rgba(148, 196, 255, .16) 0 8px, transparent 8px 16px),
    #f4f8ff;
  border: 6px solid #f4f8ff;
}

.qr-box span { padding: 6px 10px; border-radius: 6px; font-size: 12px; font-weight: 800; color: #0a1a2e; background: #fff; box-shadow: 0 2px 8px rgba(0,0,0,.15); }

/* 支付弹窗 */
.pay-switch { display: flex; gap: 8px; margin-top: 16px; }

.pay-switch button {
  flex: 1;
  min-height: 40px;
  border-radius: var(--radius-md);
  font-size: 13.5px;
  font-weight: 700;
  color: var(--text-soft);
  background: var(--panel-soft);
  border: 1px solid var(--line);
}

.pay-switch button.active {
  color: #7ff0c0;
  border-color: rgba(125, 240, 182, .5);
  background: rgba(125, 240, 182, .1);
}

.pay-qr-row { display: flex; gap: 18px; align-items: center; margin-top: 18px; }
.pay-amount { font-size: 26px; font-weight: 800; color: var(--gold); }
.pay-amount-row p { font-size: 12.5px; color: var(--text-muted); margin-top: 4px; }

.pay-invite { margin-top: 18px; padding-top: 16px; border-top: 1px dashed var(--line-strong); display: grid; gap: 8px; }
.pay-invite label { font-size: 13px; font-weight: 600; color: var(--text-soft); }
.pay-invite p { font-size: 12px; color: var(--text-muted); }

.pay-safety { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 16px; }
.pay-safety span { font-size: 11.5px; color: var(--text-muted); padding: 4px 10px; border-radius: 999px; border: 1px solid var(--line); }

/* 云端启动弹窗 */
.launch-flow { display: grid; gap: 10px; margin-top: 16px; }

.launch-flow > div {
  display: grid;
  grid-template-columns: auto 1fr;
  gap: 4px 12px;
  padding: 12px 14px;
  border-radius: var(--radius-md);
  background: var(--panel-soft);
  border: 1px solid var(--line);
}

.launch-flow b { grid-row: span 2; align-self: center; font-size: 18px; color: var(--cyan); }
.launch-flow strong { font-size: 14px; }
.launch-flow span { font-size: 12.5px; color: var(--text-muted); }

.launch-check { margin-top: 16px; display: grid; gap: 6px; }
.launch-check label { display: flex; gap: 8px; font-size: 13px; color: var(--text-soft); align-items: flex-start; }
.launch-check input { margin-top: 3px; accent-color: var(--gold); }
.launch-check p { font-size: 12px; color: var(--text-muted); }

.launch-actions { display: grid; gap: 10px; margin-top: 18px; }

@media (max-width: 520px) {
  .modal-panel { padding: 22px 18px; }
  .pay-qr-row { flex-direction: column; }
}