/* yp-base.css —— 四科共用：设计令牌 + 玻璃质感 + 导航条 + 卡片 + 按钮 + 标签 + 弹窗 + 页脚
 * 类名一律 yp- 前缀（W1 决定 2）。
 *
 * 视觉来源（只读参考，E12 第 1 步 / E13 第 1–2 步）：
 *   · 背景渐变（四层 radial + 一层 135° linear，再加 body::before 模糊层、body::after 点阵）：
 *     主站首页 ~/Desktop/ielts-production/index.html 的 body / body::before / body::after
 *   · 导航条排版（sticky、min-height 82、玻璃底 blur(18px)、logo 70 圆形、gap 14、nav gap 22）：
 *     同上 .site-header / .brand / .brand-logo-img / .brand-copy / .nav
 *   · 玻璃卡片 / 背景渐变 / 圆角阴影：主站 public/help.html 的 .card 与 body background
 *   · 导航条排版（高 74 / 版心 min(1380px, 100%-32px) / logo 64 / 品牌区 gap 18）：
 *     主站 public/questions/listening/shell.html 的 .shell-topbar / .topbar-inner /
 *     .exam-brand / .exam-mark
 *   · 文字 / 次要文字 / 分隔线 / 状态色：同上 shell.html 的 :root
 *   · 站名双色写法（YAYA'S 与 IELTS 两个 span）：课程站 public/js/course-chrome.js:107
 *   · IELTS 的紫 #7549db：课程站 public/css/course.css:88 .chrome-name-b
 *   · 玻璃导航条（半透明 + blur(18px) + 1px 高光描边）：课程站 .chrome-nav
 *
 * 主色：主站是紫（#6d40d4）。本站按 Yaya 裁定改为**灰蓝（偏灰）**；
 * 品牌紫只留在站名的「IELTS」上，⛔ 不参与任何控件着色。
 */

:root {
  /* 主色：灰蓝（偏灰） */
  --yp-primary: #4d6180;
  --yp-primary-dark: #3b4d68;
  --yp-primary-soft: rgba(77, 97, 128, 0.12);
  --yp-primary-line: rgba(77, 97, 128, 0.34);

  /* 品牌紫：只给站名的 IELTS，⛔ 不要接到任何控件上 */
  --yp-brand-purple: #7549db;

  --yp-text: #1f2937;
  --yp-ink-soft: #3a4352;
  --yp-muted: #667085;

  --yp-panel: #ffffff;
  --yp-panel-soft: #f6f8fb;
  --yp-glass: rgba(255, 255, 255, 0.55);
  --yp-glass-strong: rgba(255, 255, 255, 0.78);
  --yp-glass-line: rgba(255, 255, 255, 0.62);
  --yp-line: #d8dee7;
  --yp-line-soft: #e8edf3;

  --yp-shadow: 0 20px 60px rgba(55, 70, 92, 0.12);
  --yp-shadow-sm: 0 10px 26px rgba(55, 70, 92, 0.1);

  --yp-radius-lg: 20px;
  --yp-radius-md: 14px;
  --yp-radius-sm: 10px;

  --yp-ok: #16a34a;
  --yp-warn: #f59e0b;
  --yp-danger: #dc2626;

  --yp-page: min(1380px, calc(100% - 32px));

  /* 背景色阶：灰蓝，比上一版更蓝更亮（E13 第 2 步）。
     结构照主站首页：四层 radial 叠一层 135° linear，另有一层模糊层与一层点阵。 */
  --yp-bg-1: #fbfdff;
  --yp-bg-2: #ecf4fd;
  --yp-bg-3: #dceafa;
  --yp-bg-4: #c9dff6;
  --yp-bg-5: #e4effc;
}

* {
  box-sizing: border-box;
}

html,
body {
  overflow-x: hidden;
  min-height: 100%;
}

body {
  margin: 0;
  color: var(--yp-text);
  line-height: 1.6;
  min-height: 100vh;
  display: flex;
  flex-direction: column;
  font-family: -apple-system, BlinkMacSystemFont, "PingFang SC", "Microsoft YaHei", Arial,
    Helvetica, sans-serif;
  position: relative;
  background-color: var(--yp-bg-1);
  background-image:
    radial-gradient(circle at 14% 16%, rgba(255, 255, 255, 0.95), transparent 28%),
    radial-gradient(circle at 78% 14%, rgba(196, 226, 255, 0.85), transparent 32%),
    radial-gradient(circle at 22% 86%, rgba(150, 196, 240, 0.34), transparent 28%),
    radial-gradient(circle at 84% 70%, rgba(176, 216, 248, 0.38), transparent 30%),
    linear-gradient(
      135deg,
      var(--yp-bg-5) 0%,
      var(--yp-bg-2) 28%,
      var(--yp-bg-1) 48%,
      var(--yp-bg-3) 72%,
      var(--yp-bg-4) 100%
    );
  background-attachment: fixed;
}

/* 第二层渐变 + 点阵纹理：结构与主站首页的 body::before / body::after 一致。
   两个伪元素都是 position:fixed，不会变成 body 这个 flex 容器的 flex item。 */
body::before,
body::after {
  content: "";
  position: fixed;
  inset: 0;
  pointer-events: none;
  z-index: -1;
}

body::before {
  background:
    radial-gradient(circle at 10% 12%, rgba(255, 255, 255, 0.78), transparent 24%),
    radial-gradient(circle at 60% 22%, rgba(210, 233, 255, 0.62), transparent 24%),
    radial-gradient(circle at 88% 40%, rgba(132, 184, 236, 0.24), transparent 26%),
    radial-gradient(circle at 76% 82%, rgba(170, 212, 246, 0.28), transparent 30%);
  filter: blur(14px);
}

body::after {
  opacity: 0.22;
  background-image: radial-gradient(rgba(255, 255, 255, 0.85) 0.6px, transparent 0.6px);
  background-size: 18px 18px;
  mask-image: linear-gradient(180deg, rgba(0, 0, 0, 0.24), transparent 76%);
  -webkit-mask-image: linear-gradient(180deg, rgba(0, 0, 0, 0.24), transparent 76%);
}

main {
  flex: 1 0 auto;
}

/* ------------------------------------------------------------------ 导航条 */

.yp-topbar {
  position: sticky;
  top: 0;
  z-index: 50;
  background: rgba(255, 255, 255, 0.16);
  border-bottom: 1px solid rgba(255, 255, 255, 0.3);
  backdrop-filter: blur(18px);
  -webkit-backdrop-filter: blur(18px);
}

.yp-topbar-inner {
  width: var(--yp-page);
  margin: 0 auto;
  min-height: 82px;
  padding: 10px 0;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 20px;
}

/* 品牌区：圆形图标 + 两行文字（主站首页 .brand / .brand-logo-img / .brand-copy） */
.yp-brand {
  display: flex;
  align-items: center;
  gap: 14px;
  min-width: 0;
  text-decoration: none;
  color: inherit;
  flex: none;
}

.yp-brand-logo {
  width: 70px;
  height: 70px;
  border-radius: 999px;
  object-fit: cover;
  display: block;
  flex: 0 0 auto;
}

.yp-brand-copy strong {
  display: block;
  font-size: 15px;
  letter-spacing: 0.02em;
  line-height: 1.25;
}

.yp-brand-copy > span {
  display: block;
  color: var(--yp-muted);
  font-size: 12px;
  margin-top: 2px;
  white-space: nowrap;
}

.yp-wordmark {
  font-weight: 800;
  white-space: nowrap;
}

.yp-wordmark .yp-wm-a {
  color: #000;
}

.yp-wordmark .yp-wm-b {
  color: var(--yp-brand-purple);
}

/* 菜单（主站首页 .nav：gap 22 / 14px / 700） */
.yp-nav {
  display: flex;
  align-items: center;
  gap: 22px;
  font-size: 14px;
  font-weight: 700;
  color: rgba(31, 41, 55, 0.84);
}

.yp-nav-item {
  color: inherit;
  text-decoration: none;
  white-space: nowrap;
}

a.yp-nav-item:hover {
  color: var(--yp-primary-dark);
}

/* 暂不可点的两项：灰色 + 禁止样式；悬停时才冒出「即将上线」（E14-4） */
.yp-nav-item.is-soon {
  position: relative;
  color: rgba(31, 41, 55, 0.34);
  cursor: not-allowed;
}

.yp-nav-item.is-soon::after {
  content: attr(data-tip);
  position: absolute;
  top: calc(100% + 8px);
  left: 50%;
  transform: translateX(-50%);
  padding: 4px 10px;
  border-radius: 8px;
  background: rgba(31, 41, 55, 0.92);
  color: #fff;
  font-size: 12px;
  font-weight: 600;
  white-space: nowrap;
  opacity: 0;
  visibility: hidden;
  transition: opacity 0.15s;
  pointer-events: none;
  z-index: 60;
}

.yp-nav-item.is-soon:hover::after {
  opacity: 1;
  visibility: visible;
}

.yp-topbar-tools {
  display: flex;
  align-items: center;
  gap: 10px;
  flex: none;
}

.yp-account {
  font-size: 13px;
  color: var(--yp-muted);
  max-width: 22ch;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

/* 汉堡按钮：只在手机端出现 */
.yp-burger {
  display: none;
  width: 38px;
  height: 38px;
  padding: 0;
  border: 1px solid var(--yp-glass-line);
  border-radius: 10px;
  background: rgba(255, 255, 255, 0.6);
  cursor: pointer;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 4px;
}

.yp-burger span {
  display: block;
  width: 18px;
  height: 2px;
  border-radius: 2px;
  background: var(--yp-text);
  transition: transform 0.18s, opacity 0.18s;
}

.yp-burger.is-open span:nth-child(1) {
  transform: translateY(6px) rotate(45deg);
}

.yp-burger.is-open span:nth-child(2) {
  opacity: 0;
}

.yp-burger.is-open span:nth-child(3) {
  transform: translateY(-6px) rotate(-45deg);
}

@media (max-width: 860px) {
  .yp-topbar-inner {
    min-height: 60px;
    gap: 10px;
  }

  .yp-brand {
    gap: 10px;
  }

  .yp-brand-logo {
    width: 44px;
    height: 44px;
  }

  .yp-brand-copy > span {
    display: none;
  }

  .yp-burger {
    display: flex;
  }

  /* 菜单收进汉堡：展开后是一块玻璃面板，竖排 */
  .yp-nav {
    position: absolute;
    top: 100%;
    right: 16px;
    left: 16px;
    display: none;
    flex-direction: column;
    align-items: stretch;
    gap: 0;
    padding: 6px;
    /* 展开的菜单面板要压住底下的页面内容，所以这里不用半透明玻璃，走接近实心的白 */
    background: rgba(255, 255, 255, 0.97);
    border: 1px solid var(--yp-glass-line);
    border-radius: var(--yp-radius-md);
    box-shadow: var(--yp-shadow);
    backdrop-filter: blur(18px);
    -webkit-backdrop-filter: blur(18px);
  }

  .yp-nav.is-open {
    display: flex;
  }

  .yp-nav-item {
    padding: 11px 12px;
    border-radius: var(--yp-radius-sm);
  }

  a.yp-nav-item:hover {
    background: rgba(255, 255, 255, 0.7);
  }
}

/* ------------------------------------------------------------------ 版心 */

.yp-wrap {
  width: var(--yp-page);
  margin: 0 auto;
  padding: 26px 0 40px;
}

.yp-wrap-narrow {
  width: min(1120px, calc(100% - 32px));
}

/* ------------------------------------------------------------------ 玻璃卡片 */

.yp-card {
  background: var(--yp-glass);
  border: 1px solid var(--yp-glass-line);
  border-radius: var(--yp-radius-lg);
  box-shadow: var(--yp-shadow);
  backdrop-filter: blur(14px);
  -webkit-backdrop-filter: blur(14px);
}

.yp-card-pad {
  padding: 24px;
}

/* ------------------------------------------------------------------ 标题区 */

.yp-page-head {
  padding: 34px 0 10px;
  text-align: center;
}

.yp-page-head h1 {
  margin: 0 0 8px;
  font-size: 30px;
  letter-spacing: 0.3px;
}

.yp-page-head p {
  margin: 0;
  color: var(--yp-ink-soft);
  font-size: 15px;
}

@media (max-width: 719px) {
  .yp-page-head h1 {
    font-size: 22px;
  }

  .yp-page-head p {
    font-size: 13.5px;
  }
}

/* ------------------------------------------------------------------ 按钮 */

.yp-btn {
  min-height: 38px;
  padding: 0 16px;
  border: 1px solid var(--yp-line);
  border-radius: 99px;
  background: rgba(255, 255, 255, 0.72);
  color: var(--yp-text);
  font: inherit;
  font-size: 13.5px;
  font-weight: 700;
  cursor: pointer;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
  text-decoration: none;
  transition: background 0.18s, border-color 0.18s;
}

.yp-btn:hover:not(:disabled) {
  background: #fff;
}

.yp-btn:disabled {
  opacity: 0.5;
  cursor: default;
}

.yp-btn-primary {
  background: var(--yp-primary);
  border-color: var(--yp-primary);
  color: #fff;
}

.yp-btn-primary:hover:not(:disabled) {
  background: var(--yp-primary-dark);
  border-color: var(--yp-primary-dark);
}

.yp-btn-dark {
  background: #111827;
  border-color: #111827;
  color: #fff;
}

.yp-btn-dark:hover:not(:disabled) {
  background: #000;
}

.yp-btn-ghost {
  background: transparent;
}

/* ⚠️ .yp-btn 是 inline-flex，会盖掉浏览器自带的 [hidden]{display:none}。
   交卷按钮靠 hidden 控制「不能提前交卷」（B5），这一条必须在。 */
.yp-btn[hidden],
.yp-tool-btn[hidden] {
  display: none !important;
}

/* ------------------------------------------------------------------ 标签 */

.yp-tag {
  display: inline-flex;
  align-items: center;
  min-height: 22px;
  padding: 0 9px;
  border-radius: 99px;
  font-size: 12px;
  font-weight: 700;
  line-height: 1;
  white-space: nowrap;
  vertical-align: middle;
}

/* 「刷整套」：紧跟卷名的小标签，本身就是进整套的入口 */
.yp-tag-full {
  background: var(--yp-primary-soft);
  border: 1px solid var(--yp-primary-line);
  color: var(--yp-primary-dark);
  cursor: pointer;
}

.yp-tag-full:hover {
  background: var(--yp-primary);
  border-color: var(--yp-primary);
  color: #fff;
}

/* 「审核中」：琥珀，排在「刷整套」后面（W1 D1） */
.yp-tag-review {
  background: #fff7e6;
  border: 1px solid #f0c270;
  color: #9a6400;
}

/* ------------------------------------------------------------------ 弹窗 */

.yp-sheet-bg {
  position: fixed;
  inset: 0;
  z-index: 200;
  display: none;
  align-items: center;
  justify-content: center;
  padding: 20px;
  background: rgba(23, 31, 42, 0.42);
  backdrop-filter: blur(3px);
  -webkit-backdrop-filter: blur(3px);
}

.yp-sheet-bg.open {
  display: flex;
}

.yp-sheet {
  width: min(400px, 100%);
  background: var(--yp-glass-strong);
  border: 1px solid var(--yp-glass-line);
  border-radius: var(--yp-radius-lg);
  box-shadow: var(--yp-shadow);
  backdrop-filter: blur(16px);
  -webkit-backdrop-filter: blur(16px);
  padding: 24px 22px;
}

/* 标题居中（备考管家 plan.css:228「弹窗里的标题居中」） */
.yp-sheet-title {
  margin: 0 0 14px;
  font-size: 18px;
  text-align: center;
}

.yp-sheet-stack {
  display: grid;
  gap: 12px;
  justify-items: center;
  text-align: center;
}

.yp-sheet-sub {
  font-size: 14px;
  line-height: 1.7;
  color: var(--yp-ink-soft);
}

.yp-sheet-aux {
  font-size: 12px;
  color: var(--yp-muted);
}

.yp-qr {
  width: 220px;
  height: 220px;
  object-fit: cover;
  border-radius: var(--yp-radius-md);
}

.yp-sheet .yp-btn {
  width: 100%;
}

/* ------------------------------------------------------------------ 页脚 */

.yp-footer {
  flex: 0 0 auto;
  width: var(--yp-page);
  margin: 0 auto;
  padding: 20px 0 30px;
  color: #8a93a3;
  font-size: 12px;
  text-align: center;
}

/* ------------------------------------------------------------------ 杂项 */

.yp-deny,
.yp-empty {
  padding: 32px 20px;
  text-align: center;
  color: var(--yp-muted);
  font-size: 14px;
}

.yp-note {
  margin: 14px 0 0;
  font-size: 13px;
  color: var(--yp-muted);
}

.yp-hidden {
  display: none !important;
}

.yp-sr {
  position: absolute;
  width: 1px;
  height: 1px;
  overflow: hidden;
  clip: rect(0 0 0 0);
  white-space: nowrap;
}