/* ============================================================
   首页新界面：液态玻璃 + Dock 顶栏 + 全息课程卡
   只有 index.html 引用这个文件。Dock 的 DOM 结构直接写在 index.html 里，
   交互（放大、菜单定位、卡片倾斜）在 premium.js。
   ============================================================ */

/* ---------- 液态玻璃 tokens ---------- */
:root {
  --lg-bg: color-mix(in srgb, var(--surface-container-lowest) 58%, transparent);
  --lg-bg-strong: color-mix(in srgb, var(--surface-container-lowest) 78%, transparent);
  --lg-border: color-mix(in srgb, var(--on-surface) 13%, transparent);
  --lg-highlight: rgba(255, 255, 255, 0.5);
  --lg-highlight-weak: rgba(255, 255, 255, 0.18);
  --lg-shadow: 0 12px 32px rgba(20, 10, 50, 0.16), 0 2px 8px rgba(20, 10, 50, 0.08);
  --lg-blur: blur(22px) saturate(1.65);
}

/* 玻璃面板配方：模糊折射 + 顶缘高光 + 细描边，直接套在既有元素上。 */
.dock-panel,
.create-menu,
.settings-menu,
.modal,
.about-card {
  background: var(--lg-bg);
  -webkit-backdrop-filter: var(--lg-blur);
  backdrop-filter: var(--lg-blur);
  border: 1px solid var(--lg-border);
  box-shadow:
    inset 0 1px 0 var(--lg-highlight),
    inset 0 -1px 0 var(--lg-highlight-weak),
    var(--lg-shadow);
}
.modal,
.about-card,
.create-menu,
.settings-menu {
  background: var(--lg-bg-strong);
}
.modal-overlay {
  background: rgba(10, 8, 18, 0.35);
  -webkit-backdrop-filter: blur(6px);
  backdrop-filter: blur(6px);
}

/* ---------- 极光背景 ---------- */
:root { background: var(--surface); }
body.home { background: transparent; position: relative; }
body.home::before {
  content: '';
  position: fixed;
  inset: -12%;
  z-index: -1;
  pointer-events: none;
  background:
    radial-gradient(52vw 38vh at 16% 4%, color-mix(in srgb, var(--primary) 16%, transparent), transparent 68%),
    radial-gradient(48vw 40vh at 88% 10%, rgba(0, 190, 255, 0.09), transparent 70%),
    radial-gradient(60vw 46vh at 55% 102%, rgba(168, 90, 255, 0.10), transparent 70%);
  filter: blur(46px);
}

/* ---------- Dock 顶栏 ----------
   居中的 .dock-panel 里依次是：五个分类瓦片、分隔线、窄屏分类菜单、搜索、AI、创建、设置；
   brand logo 固定在左侧。 */
.topbar.dockbar {
  position: sticky;
  top: 10px;
  z-index: 80;
  max-width: none;
  padding: 6px 24px;
  display: block;
}
.dockbar .brand {
  position: absolute;
  left: 26px;
  top: 50%;
  transform: translateY(-50%);
  z-index: 2;
}
@media (min-width: 701px) {
  .dockbar .brand {
    transition: opacity 180ms ease, transform 180ms ease;
  }
  .dockbar.dockbar-scrolled .brand {
    opacity: 0;
    transform: translateY(calc(-50% - 8px));
    pointer-events: none;
  }
}

.dock-panel {
  position: relative;
  display: flex;
  align-items: flex-end;
  justify-content: center;
  gap: 12px;
  width: fit-content;
  margin: 0 auto;
  padding: 8px 12px;
  border-radius: 22px;
  height: 62px;
  overflow: visible;
  /* 通透度滑杆（设置里的「顶栏通透度」，theme.js 写这四个变量）。
     只降 alpha 会让 Dock 变成一块脏兮兮的半透明板，所以越透就同步：
     模糊更重 + 饱和更高（折射感）+ 顶缘高光更亮（玻璃的边）。
     只作用于 Dock 本身，菜单/弹窗仍用 --lg-bg-strong，不然内容会透穿。 */
  background: color-mix(in srgb, var(--surface-container-lowest) calc(var(--nb-bar-alpha, .72) * 100%), transparent);
  -webkit-backdrop-filter: blur(var(--nb-bar-blur, 22px)) saturate(var(--nb-bar-sat, 1.65));
  backdrop-filter: blur(var(--nb-bar-blur, 22px)) saturate(var(--nb-bar-sat, 1.65));
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, var(--nb-bar-gloss, .5)),
    inset 0 -1px 0 var(--lg-highlight-weak),
    var(--lg-shadow);
}

/* Dock 单元：统一方圆玻璃瓦片；放大/推开变换由 JS 写 transform。
   注意不能挂 will-change: transform —— 它会把子级 position:fixed 的
   包含块劫持成瓦片本身（手机端菜单曾因此变成 46px 窄条），由 JS 在
   桌面放大引擎里按需设置。 */
.dock-item {
  position: relative;
  flex: none;
  width: 46px;
  height: 46px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border-radius: 14px;
  border: 1px solid var(--lg-border);
  background: color-mix(in srgb, var(--surface-container-lowest) 40%, transparent);
  color: var(--on-surface);
  transform-origin: bottom center;
  cursor: pointer;
  transition: background-color var(--transition), border-color var(--transition);
}
.dock-item:hover {
  background: color-mix(in srgb, var(--primary) 14%, transparent);
  border-color: color-mix(in srgb, var(--primary) 35%, var(--lg-border));
}
.dock-sep {
  flex: none;
  width: 1px;
  align-self: stretch;
  margin: 6px 4px;
  background: var(--lg-border);
}

/* 悬停标签气泡（对应 React Bits DockLabel） */
.dock-item::after {
  content: attr(data-label);
  position: absolute;
  left: 50%;
  top: -34px;
  transform: translate(-50%, 6px);
  padding: 4px 10px;
  border-radius: 8px;
  white-space: nowrap;
  font-size: 12px;
  font-weight: 600;
  color: var(--on-surface);
  background: var(--lg-bg-strong);
  -webkit-backdrop-filter: var(--lg-blur);
  backdrop-filter: var(--lg-blur);
  border: 1px solid var(--lg-border);
  box-shadow: inset 0 1px 0 var(--lg-highlight-weak), 0 4px 14px rgba(0,0,0,.18);
  opacity: 0;
  pointer-events: none;
  transition: opacity 160ms ease, transform 160ms ease;
}
.dock-item:hover::after,
.dock-item:focus-visible::after {
  opacity: 1;
  transform: translate(-50%, 0);
}
/* 展开中的搜索框不需要气泡遮挡输入 */
.search-wrap.dock-item.expanded::after { display: none; }

/* 分类瓦片：图标 + 激活小圆点 */
.dock-tab { padding: 0; font: inherit; }
.dock-tab .ic { line-height: 0; }
.dock-tab.active {
  background: color-mix(in srgb, var(--primary) 22%, transparent);
  border-color: color-mix(in srgb, var(--primary) 50%, transparent);
  color: var(--primary);
}
.dock-tab.active::before {
  content: '';
  position: absolute;
  bottom: -6px;
  left: 50%;
  transform: translateX(-50%);
  width: 4px;
  height: 4px;
  border-radius: 50%;
  background: var(--primary);
}
/* 拖课程卡到分类瓦片上松手 = 改分类，悬停的那个亮成投放区 */
.dock-tab.drop-target {
  background: var(--primary);
  color: var(--on-primary);
  box-shadow: 0 0 0 3px color-mix(in srgb, var(--primary) 30%, transparent);
}

/* 通用控件重塑为 dock 瓦片。
   注意 #omni-btn 自己就是瓦片（.pill-btn.dock-item），而 #create-btn 是
   .create-wrap 瓦片的内层按钮——两种情况分开写，避免宽度互相污染。 */
.dock-panel .pill-btn.dock-item {
  width: 46px;
  height: 46px;
  padding: 0;
  justify-content: center;
  border-radius: 14px;
}
.create-wrap.dock-item .pill-btn {
  width: 100%;
  height: 100%;
  padding: 0;
  border: none;
  background: transparent;
  color: inherit;
  border-radius: inherit;
  justify-content: center;
}
.dock-panel .pill-label,
.dock-panel .pill-caret { display: none; }
/* 创建瓦片与其他瓦片同色（不常亮），悬停时才提色 */
.create-wrap.dock-item .pill-primary {
  background: transparent;
  color: inherit;
  filter: none;
}
/* 分类菜单瓦片（窄屏）：内层按钮铺满瓦片，只留图标，当前分类名让位给 46px 见方 */
.cats-wrap.dock-item .cats-btn {
  width: 100%;
  height: 100%;
  padding: 0;
  border: none;
  background: transparent;
  color: inherit;
  border-radius: inherit;
  justify-content: center;
}
.dock-panel .cats-now { display: none; }
/* 桌面端有分类瓦片，用不上分类菜单（.dock-item 的 display 压过 style.css，得在这儿关） */
.cats-wrap.dock-item { display: none; }
.settings-wrap.dock-item .settings-btn {
  width: 100%;
  height: 100%;
  border: none;
  background: transparent;
  color: inherit;
  border-radius: inherit;
  display: inline-flex;
  align-items: center;
  justify-content: center;
}

/* 搜索瓦片：默认只见放大镜，点击横向展开成玻璃输入条 */
.search-wrap.dock-item {
  max-width: none;
  overflow: hidden;
  transition: width 260ms cubic-bezier(0.3, 0.9, 0.3, 1), background-color var(--transition), border-color var(--transition);
}
.search-wrap.dock-item .search-icon {
  left: 50%;
  transform: translate(-50%, -50%);
  transition: left 260ms cubic-bezier(0.3, 0.9, 0.3, 1), transform 260ms cubic-bezier(0.3, 0.9, 0.3, 1);
}
.search-wrap.dock-item #search {
  opacity: 0;
  pointer-events: none;
  border: none;
  background: transparent;
  padding: 0 14px 0 40px;
  height: 100%;
  font-size: 14px;
  transition: opacity 180ms ease 80ms;
}
.search-wrap.dock-item.expanded { width: 280px; cursor: text; }
.search-wrap.dock-item.expanded .search-icon { left: 14px; transform: translateY(-50%); }
.search-wrap.dock-item.expanded #search { opacity: 1; pointer-events: auto; box-shadow: none; }

/* dock 下拉菜单：挂在 body 下（.dock-menu-detached），fixed 定位、坐标由 JS 按锚点瓦片计算写 inline。
   不要用 transform 定位：基础样式的 settings-pop 开场动画会临时接管
   transform，导致菜单先出现在错位处、动画结束再跳回。 */
.dock-menu-detached {
  position: fixed;
  z-index: 130;
}

/* ---------- 课程卡：封面 + 3D 倾斜 + 全息光泽 ---------- */
.card-grid .nb-card {
  padding: 0;
  min-height: 0;
  border-radius: 18px;
  background: color-mix(in srgb, var(--accent, var(--primary)) 10%, var(--surface-container-lowest));
  transform: perspective(760px) rotateX(var(--ry, 0deg)) rotateY(var(--rx, 0deg)) translateY(var(--lift, 0px));
  transform-style: preserve-3d;
  transition: box-shadow 260ms ease, border-color 260ms ease;
}
.card-grid .nb-card:hover {
  border-color: color-mix(in srgb, var(--accent, var(--primary)) 55%, transparent);
  box-shadow:
    0 24px 48px -16px color-mix(in srgb, var(--accent, var(--primary)) 42%, transparent),
    0 6px 18px rgba(0, 0, 0, 0.18);
}

.nb-card-cover {
  display: block;
  position: relative;
  height: 118px;
  overflow: hidden;
  background:
    linear-gradient(135deg,
      color-mix(in srgb, var(--accent, var(--primary)) 46%, #221c38) 0%,
      color-mix(in srgb, var(--accent, var(--primary)) 14%, #16121f) 100%);
}
.nb-card-cover img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}
.nb-card-cover.noimg img { display: none; }

/* 换封面的入口已经搬进「更多选项」弹窗，卡片左上角不再放按钮 */
/* 无图退底时补一道极光高光，避免纯渐变太平 */
.nb-card-cover.noimg::before {
  content: '';
  position: absolute;
  inset: 0;
  background:
    radial-gradient(120px 70px at 78% 30%, color-mix(in srgb, var(--accent, var(--primary)) 55%, transparent), transparent 75%),
    radial-gradient(90px 60px at 20% 85%, rgba(255, 255, 255, 0.10), transparent 70%);
  filter: blur(2px);
}
/* 全息彩虹条：跟随指针横移（--px 由倾斜引擎写入） */
.nb-card-cover::after {
  content: '';
  position: absolute;
  inset: 0;
  background: linear-gradient(115deg,
    transparent 30%,
    rgba(255, 90, 120, 0.20) 42%,
    rgba(255, 220, 100, 0.18) 48%,
    rgba(90, 255, 180, 0.18) 54%,
    rgba(90, 170, 255, 0.20) 60%,
    transparent 72%);
  background-size: 260% 100%;
  background-position-x: calc(100% - var(--px, 50%));
  mix-blend-mode: color-dodge;
  opacity: var(--holo, 0);
  transition: opacity 320ms ease;
  pointer-events: none;
}

/* 图标浮在封面左下角的玻璃小方块上 */
.card-grid .nb-card-icon {
  position: absolute;
  top: 118px;
  left: 16px;
  transform: translateY(-50%);
  z-index: 3;
  margin: 0;
  font-size: 26px;
  width: 46px;
  height: 46px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border-radius: 13px;
  background: var(--lg-bg-strong);
  -webkit-backdrop-filter: var(--lg-blur);
  backdrop-filter: var(--lg-blur);
  border: 1px solid var(--lg-border);
  box-shadow: inset 0 1px 0 var(--lg-highlight-weak), 0 4px 12px rgba(0, 0, 0, 0.18);
}
.card-grid .nb-card-body {
  margin-top: 0;
  padding: 30px 18px 18px;
}
/* 指针追随眩光层 */
.card-grid .nb-card::after {
  content: '';
  position: absolute;
  inset: 0;
  z-index: 2;
  border-radius: inherit;
  background: radial-gradient(220px circle at var(--px, 50%) var(--py, 50%),
    rgba(255, 255, 255, 0.22), transparent 60%);
  opacity: var(--holo, 0);
  mix-blend-mode: overlay;
  pointer-events: none;
  transition: opacity 320ms ease;
}
/* 管理控件浮于封面之上 */
.nb-card .nb-more,
.nb-card .nb-drag { z-index: 4; }

/* ---------- 杂项 ---------- */
.section-title { margin-top: 34px; }

/* ---------- 响应式 ---------- */
@media (max-width: 700px) {
  /* 小屏：dock 收窄，五个分类瓦片收进「分类」菜单瓦片（见 style.css .cats-wrap）。
     以前这里是退回经典分类条，但 5 个标签在 iPhone 上会折成两行。 */
  .dock-tab, .dock-sep { display: none; }
  .cats-wrap.dock-item { display: inline-flex; }
  .dockbar .brand { position: static; transform: none; display: inline-flex; margin-bottom: 8px; }
  .topbar.dockbar { position: static; padding: 14px 16px 4px; text-align: center; }
  /* ⚠ 瓦片 46px + 上下 8px 内边距 = 62px。小屏把高度压到 58 却没动内边距，
     而 align-items 是 flex-end（桌面放大引擎要的），于是 46px 的瓦片被挤得
     顶出内容框 4px —— 看着就是「按钮整体偏上」。内边距跟着收到 6px 正好合上，
     再显式居中一次，以后改高度也不会再犯。 */
  .dock-panel { height: 58px; padding: 6px 12px; align-items: center; }
  .search-wrap.dock-item.expanded { width: min(72vw, 280px); }
  /* 小屏菜单改为全宽玻璃面板（挂在 body 下，fixed 相对视口） */
  .dock-menu-detached {
    top: 84px;
    right: 12px;
    left: 12px;
    width: auto;
    max-height: calc(100vh - 108px);
    overflow-y: auto;
    transform-origin: top center;
  }
}

/* 触屏没有 hover：关掉悬停气泡标签，避免残影 */
@media (hover: none) {
  .dock-item::after { display: none; }
}

/* ---------- 无障碍：减少动效 ---------- */
@media (prefers-reduced-motion: reduce) {
  .card-grid .nb-card { transform: none !important; }
  .nb-card-cover::after,
  .card-grid .nb-card::after { display: none; }
}