/* ==========================================================================
   hub.css —— 学习项目大厅（独立模块）

   视觉：沿用「默书大冒险」的配色 / 字体 / 圆角 / 阴影，
        但本文件是独立样式表：不 @import 任何大冒险样式，也不复用其类名。
        所有类名统一 hb- 前缀，避免与既有页面产生样式耦合。

   版式：一本书的「目录总索引」—— 轻量、留白充足、只有列表导航，
        行名与日期之间用点线引导（像目录的页码引导线），悬停有反馈。
   ========================================================================== */

:root{
  /* 设计 token（与「默书大冒险」视觉一致，此处为独立声明） */
  --hb-indigo:#4338ca;        /* 主色 */
  --hb-indigo-deep:#312e81;  /* 条目标题 */
  --hb-indigo-soft:#eef2ff;  /* 悬停浅底 */
  --hb-indigo-mid:#e0e7ff;   /* 按下浅底 */
  --hb-indigo-line:#c7d2fe;  /* 点线引导 / 悬停色条 */
  --hb-gray:#6b7280;         /* 日期 / 副标题 */
  --hb-ink:#1f2937;
  --hb-sheet-shadow:0 4px 14px rgba(49,46,129,.07);
  --hb-font:"PingFang SC","Microsoft YaHei",system-ui,-apple-system,sans-serif;
}

*{ box-sizing:border-box; }

html,body{ height:100%; }

body{
  margin:0;
  font-family:var(--hb-font);
  color:var(--hb-ink);
  background:linear-gradient(160deg,#eef6ff 0%,#e3f2fe 60%,#fce7f3 100%);
  -webkit-font-smoothing:antialiased;
  -webkit-tap-highlight-color:transparent;
}

/* ---------------- 页面容器 ---------------- */
.hb-wrap{
  max-width:680px;
  margin:0 auto;
  padding:56px 22px 72px;
}

/* 书脊式标题区 */
.hb-head{
  padding-left:14px;
  border-left:4px solid var(--hb-indigo-line);
  margin-bottom:30px;
}
.hb-title{
  font-size:23px;
  font-weight:800;
  color:var(--hb-indigo);
  letter-spacing:.01em;
  line-height:1.3;
}
.hb-sub{
  margin-top:7px;
  font-size:13px;
  color:var(--hb-gray);
}

/* ---------------- 目录（书页） ---------------- */
.hb-sheet{
  background:#fff;
  border-radius:18px;
  box-shadow:var(--hb-sheet-shadow);
  padding:12px 10px;
}

.hb-row{
  position:relative;
  display:flex;
  align-items:baseline;
  gap:12px;
  padding:17px 16px;
  border-radius:12px;
  text-decoration:none;
  color:inherit;
  cursor:pointer;
  transition:background .16s ease, transform .16s ease;
}
.hb-row + .hb-row{ margin-top:2px; }

/* 悬停 / 聚焦 / 按下：都有明确反馈 */
.hb-row:hover,
.hb-row:focus-visible{
  background:var(--hb-indigo-soft);
  outline:none;
}
.hb-row:active{
  background:var(--hb-indigo-mid);
  transform:translateY(1px);
}

/* 悬停时左侧出现色条，像书签 */
.hb-row::before{
  content:"";
  position:absolute;
  left:4px; top:15px; bottom:15px;
  width:3px;
  border-radius:2px;
  background:var(--hb-indigo);
  opacity:0;
  transition:opacity .16s ease;
}
.hb-row:hover::before,
.hb-row:focus-visible::before{ opacity:1; }

.hb-name{
  flex:none;
  font-size:17px;
  font-weight:700;
  color:var(--hb-indigo-deep);
  transition:color .16s ease;
}
.hb-row:hover .hb-name,
.hb-row:focus-visible .hb-name{ color:var(--hb-indigo); }

/* 目录式点线引导（连接条目名与"页码"日期） */
.hb-lead{
  flex:1 1 auto;
  min-width:16px;
  height:0;
  border-bottom:1px dotted var(--hb-indigo-line);
  transform:translateY(-4px);
}

.hb-date{
  flex:none;
  font-size:13px;
  color:var(--hb-gray);
  font-variant-numeric:tabular-nums;
  letter-spacing:.02em;
  transition:color .16s ease;
}
.hb-row:hover .hb-date,
.hb-row:focus-visible .hb-date{ color:var(--hb-indigo); }

/* ---------------- 页脚 ---------------- */
.hb-foot{
  margin-top:22px;
  font-size:12px;
  line-height:1.9;
  color:var(--hb-gray);
}
.hb-foot a{
  color:var(--hb-gray);
  text-decoration:none;
  border-bottom:1px dotted var(--hb-indigo-line);
}
.hb-foot a:hover{ color:var(--hb-indigo); border-bottom-color:var(--hb-indigo); }

/* ---------------- 登录（兜底：直接打开 /hub/ 且无凭证时） ---------------- */
.hb-gate{
  position:fixed; inset:0; z-index:50;
  display:flex; align-items:center; justify-content:center;
  padding:20px;
  background:rgba(238,246,255,.94);
  backdrop-filter:blur(3px);
}
.hb-gate.hide{ display:none; }
.hb-gate-box{
  width:100%; max-width:330px;
  background:#fff;
  border-radius:20px;
  box-shadow:0 10px 30px rgba(49,46,129,.14);
  padding:26px 22px 20px;
  text-align:center;
}
.hb-gate-title{ font-size:19px; font-weight:800; color:var(--hb-indigo-deep); }
.hb-gate-sub{ margin-top:6px; font-size:12.5px; color:var(--hb-gray); }

.hb-dots{ display:flex; justify-content:center; gap:10px; margin:20px 0 16px; }
.hb-dot{
  width:12px; height:12px; border-radius:50%;
  background:#e5e7eb; transition:background .15s ease, transform .15s ease;
}
.hb-dot.on{ background:var(--hb-indigo); transform:scale(1.12); }

.hb-pad{ display:grid; grid-template-columns:repeat(3,1fr); gap:9px; }
.hb-key{
  border:none; border-radius:12px;
  padding:13px 0;
  font-size:19px; font-weight:700;
  font-family:var(--hb-font);
  background:var(--hb-indigo-soft); color:var(--hb-indigo-deep);
  cursor:pointer;
  transition:background .14s ease, transform .14s ease;
}
.hb-key:hover{ background:var(--hb-indigo-mid); }
.hb-key:active{ transform:translateY(1px); background:var(--hb-indigo-line); }
.hb-key-fn{ font-size:14px; background:#f3f4f6; color:var(--hb-gray); }
.hb-key-fn:hover{ background:#e5e7eb; }

.hb-gate-msg{ min-height:18px; margin-top:12px; font-size:13px; font-weight:700; color:#dc2626; }
.hb-gate-hint{ margin-top:4px; font-size:11.5px; color:#9ca3af; }

/* ---------------- 轻提示 ---------------- */
.hb-toast{
  position:fixed; left:50%; bottom:34px;
  transform:translate(-50%,14px);
  background:var(--hb-indigo-deep); color:#fff;
  font-size:13.5px; font-weight:700;
  padding:11px 18px; border-radius:999px;
  box-shadow:0 6px 18px rgba(49,46,129,.24);
  opacity:0; pointer-events:none;
  transition:opacity .2s ease, transform .2s ease;
  z-index:60;
}
.hb-toast.on{ opacity:1; transform:translate(-50%,0); }

/* ---------------- 小屏适配 ---------------- */
@media (max-width:520px){
  .hb-wrap{ padding:34px 15px 56px; }
  .hb-title{ font-size:20px; }
  .hb-sheet{ padding:8px 6px; border-radius:15px; }
  .hb-row{ padding:15px 11px; gap:9px; }
  .hb-name{ font-size:16px; }
  .hb-date{ font-size:12px; }
}

/* 大屏：给目录更多留白 */
@media (min-width:900px){
  .hb-wrap{ max-width:760px; padding:76px 24px 96px; }
  .hb-row{ padding:19px 18px; }
}