/* ============================================================
   大厅（index.html）：四个模块 + 中间徽标，一个正方形
   ============================================================ */

.hub-body{
  background:
    radial-gradient(1100px 520px at 50% -8%, rgba(74,158,255,.20), transparent 62%),
    radial-gradient(900px 520px at 90% 110%, rgba(167,139,250,.16), transparent 60%),
    var(--bg);
  overflow-y:auto;
}
.hub-app{min-height:100vh;display:flex;flex-direction:column}

.hub-top{
  display:flex;align-items:center;justify-content:space-between;gap:12px;
  padding:14px 22px 6px;flex-wrap:wrap;
}
.hub-brand{display:flex;align-items:center;gap:12px}
.hb-logo{font-size:26px;line-height:1}
.hb-title{font-size:18px;font-weight:800;letter-spacing:.6px}
.hb-sub{font-size:11.5px;color:var(--muted);margin-top:2px}
.hub-top .top-tools{display:flex;gap:8px;align-items:center}

.hub-main{flex:1;display:grid;place-items:center;padding:6px 18px 10px}

/* 正方形：3×3 网格，四个角是模块，中间格放徽标（不遮字） */
.hub-square{
  width:min(74vh,680px);aspect-ratio:1;
  display:grid;
  grid-template-columns:1fr 25% 1fr;
  grid-template-rows:1fr 25% 1fr;
  gap:12px;padding:14px;border-radius:30px;
  background:linear-gradient(160deg,rgba(90,169,255,.13),rgba(167,139,250,.10));
  border:1px solid rgba(120,160,255,.28);
  box-shadow:0 26px 70px rgba(12,40,100,.38), inset 0 0 42px rgba(90,169,255,.07);
}

.hub-tile{
  position:relative;display:flex;flex-direction:column;justify-content:center;gap:7px;
  padding:16px 16px 14px;border-radius:18px;text-decoration:none;color:var(--text);
  border:1px solid rgba(120,160,255,.2);
  transition:transform .18s ease,box-shadow .18s ease,border-color .18s ease;
}
.hub-tile:hover{transform:translateY(-3px);border-color:rgba(150,200,255,.62)}
.hub-tile:active{transform:translateY(-1px) scale(.998)}
.hub-tile::after{
  content:"→";position:absolute;right:13px;top:11px;font-size:15px;opacity:.45;
  transition:transform .18s ease,opacity .18s ease;
}
.hub-tile:hover::after{transform:translateX(3px);opacity:1}

.ht-ico{font-size:28px;line-height:1;margin-bottom:2px}
.ht-name{font-size:18px;font-weight:800;letter-spacing:.6px}
.ht-desc{font-size:11.5px;line-height:1.7;color:var(--text-2)}
.ht-meta{
  align-self:flex-start;margin-top:3px;font-size:10.5px;padding:2px 9px;border-radius:20px;
  border:1px solid rgba(255,255,255,.18);background:rgba(255,255,255,.07);color:var(--text-2);
}

.t-math{grid-area:1 / 1;background:linear-gradient(150deg,rgba(74,158,255,.34),rgba(16,54,116,.22))}
.t-en{grid-area:1 / 3;background:linear-gradient(150deg,rgba(61,220,151,.30),rgba(12,78,62,.20))}
.t-pol{grid-area:3 / 1;background:linear-gradient(150deg,rgba(255,184,77,.30),rgba(112,58,16,.20))}
.t-word{grid-area:3 / 3;background:linear-gradient(150deg,rgba(167,139,250,.32),rgba(56,38,118,.22))}

.hub-tile.t-math:hover{box-shadow:0 16px 38px rgba(74,158,255,.26)}
.hub-tile.t-en:hover{box-shadow:0 16px 38px rgba(61,220,151,.22)}
.hub-tile.t-pol:hover{box-shadow:0 16px 38px rgba(255,184,77,.22)}
.hub-tile.t-word:hover{box-shadow:0 16px 38px rgba(167,139,250,.24)}

/* 中间圆形徽标 */
.hub-center{
  grid-area:2 / 2;align-self:center;justify-self:center;
  width:100%;height:100%;border-radius:50%;
  display:flex;flex-direction:column;align-items:center;justify-content:center;gap:0;
  background:radial-gradient(circle at 32% 26%,rgba(255,255,255,.22),rgba(8,16,32,.94) 72%);
  border:1px solid rgba(150,200,255,.55);
  box-shadow:0 0 0 8px rgba(8,16,32,.55), 0 12px 34px rgba(0,0,0,.5), inset 0 0 22px rgba(90,169,255,.22);
  color:#e2eeff;font-weight:800;letter-spacing:2px;pointer-events:none;
}
.hc-line1{font-size:clamp(10px,1.3vh,13px);opacity:.75}
.hc-line2{font-size:clamp(12px,1.9vh,18px)}

.hub-note{font-size:11.5px;color:var(--muted);margin:14px 0 0;text-align:center;line-height:1.7}
.hub-foot{padding:8px 18px 16px;text-align:center;font-size:11.5px;color:var(--muted)}
.hub-foot a{color:var(--accent);text-decoration:none}
.hub-foot a:hover{text-decoration:underline}

/* 顶部横幅沿用 .champ 结构 */
.champ{
  max-width:860px;margin:8px auto 0;padding:8px 16px;
  border:1px solid rgba(255,184,77,.35);border-radius:12px;
  background:linear-gradient(135deg,rgba(255,184,77,.14),rgba(61,220,151,.08));
  font-size:12.5px;color:var(--text-2);line-height:1.6;display:flex;align-items:center;gap:8px;
}
.champ[hidden]{display:none}
.champ b{color:var(--text)}

/* 日间模式 */
html[data-theme="light"] .hub-square{
  background:linear-gradient(160deg,rgba(31,111,208,.10),rgba(107,79,216,.07));
  border-color:rgba(31,111,208,.26);
  box-shadow:0 20px 50px rgba(31,80,160,.16), inset 0 0 30px rgba(31,111,208,.05);
}
html[data-theme="light"] .hub-tile{border-color:rgba(31,111,208,.2)}
html[data-theme="light"] .hub-tile:hover{border-color:rgba(31,111,208,.55)}
html[data-theme="light"] .hub-tile::after{color:#1f6fd0}
html[data-theme="light"] .ht-meta{border-color:rgba(31,111,208,.25);background:rgba(31,111,208,.08);color:#28486c}
html[data-theme="light"] .t-math{background:linear-gradient(150deg,rgba(74,158,255,.18),rgba(74,158,255,.05))}
html[data-theme="light"] .t-en{background:linear-gradient(150deg,rgba(18,138,91,.16),rgba(18,138,91,.04))}
html[data-theme="light"] .t-pol{background:linear-gradient(150deg,rgba(178,106,0,.16),rgba(178,106,0,.04))}
html[data-theme="light"] .t-word{background:linear-gradient(150deg,rgba(107,79,216,.16),rgba(107,79,216,.04))}
html[data-theme="light"] .hub-center{
  background:radial-gradient(circle at 32% 26%,#ffffff,#eaf1fb 72%);
  border-color:rgba(31,111,208,.5);color:#12314f;
  box-shadow:0 0 0 8px rgba(244,246,250,.92), 0 10px 26px rgba(31,80,160,.18);
}

@media (max-width:760px){
  .hub-top{padding:12px 14px 4px}
  .hb-sub{display:none}
  .hub-square{width:min(93vw,520px);gap:8px;padding:9px;border-radius:22px;grid-template-columns:1fr 24% 1fr;grid-template-rows:1fr 24% 1fr}
  .hub-tile{padding:11px 11px 10px;border-radius:13px;gap:5px}
  .ht-ico{font-size:21px;margin-bottom:0}
  .ht-name{font-size:14.5px;letter-spacing:.3px}
  .ht-desc{font-size:10px;line-height:1.55}
  .ht-meta{font-size:9px;padding:1px 7px}
  .hub-note{font-size:10.5px;margin-top:10px}
}