/* ═══════════════════════════════════════════════════════════
   CSS Reset & Base
   ═══════════════════════════════════════════════════════════ */
*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; -webkit-tap-highlight-color: transparent; }
body {
  font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', 'PingFang SC', 'Microsoft YaHei', sans-serif;
  background: #0a0f1a;
  color: #ffffff;
  overflow: hidden;
  height: 100vh;
  width: 100vw;
  user-select: none;
  -webkit-user-select: none;
}

/* ── Dark scrollbars ── */
::-webkit-scrollbar { width: 6px; height: 6px; }
::-webkit-scrollbar-track { background: transparent; }
::-webkit-scrollbar-thumb { background: rgba(255,255,255,0.12); border-radius: 3px; }
::-webkit-scrollbar-thumb:hover { background: rgba(255,255,255,0.2); }
* { scrollbar-width: thin; scrollbar-color: rgba(255,255,255,0.12) transparent; }

canvas { display: block; position: absolute; top: 0; left: 0; cursor: grab; }
canvas:active { cursor: grabbing; }

/* ═══════════════════════════════════════════════════════════
   Panels - shared
   ═══════════════════════════════════════════════════════════ */
.panel {
  position: fixed;
  background: rgba(10, 15, 30, 0.3);
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);
  border: 1px solid rgba(255, 255, 255, 0.04);
  border-radius: 14px;
  z-index: 10;
  box-shadow: 0 0 30px rgba(0, 0, 0, 0.3), inset 0 1px 0 rgba(255, 255, 255, 0.03);
}

/* ═══════════════════════════════════════════════════════════
   Top Search Bar
   ═══════════════════════════════════════════════════════════ */
/* ── 搜索框: Uiverse.io 发光边框 ── */
#search-bar {
  top: 20px; left: 50%; transform: translateX(-50%);
  position: fixed; z-index: 62;
  display: flex; align-items: center;
  width: 380px; height: 48px;
}
#search-main {
  position: relative; width: 100%; height: 100%;
}
#search-main .glow,
#search-main .white,
#search-main .border,
#search-main .darkBorderBg {
  max-height: 48px; max-width: 380px;
  height: 100%; width: 100%;
  position: absolute; top: 0; left: 0;
  overflow: hidden; z-index: -1;
  border-radius: 14px;
  filter: blur(3px);
}
#search-main .white {
  max-height: 46px; max-width: 376px;
  border-radius: 12px; filter: blur(2px);
  top: 1px; left: 2px;
}
#search-main .white::before {
  content: ""; z-index: -2; text-align: center;
  top: 50%; left: 50%;
  transform: translate(-50%, -50%) rotate(83deg);
  position: absolute; width: 600px; height: 600px;
  background-repeat: no-repeat; background-position: 0 0;
  filter: brightness(1.4);
  background-image: conic-gradient(rgba(0,0,0,0) 0%, #a099d8, rgba(0,0,0,0) 8%, rgba(0,0,0,0) 50%, #dfa2da, rgba(0,0,0,0) 58%);
  transition: all 2s;
}
#search-main .border {
  max-height: 44px; max-width: 374px;
  border-radius: 12px; filter: blur(0.5px);
  top: 2px; left: 3px;
}
#search-main .border::before {
  content: ""; z-index: -2; text-align: center;
  top: 50%; left: 50%;
  transform: translate(-50%, -50%) rotate(70deg);
  position: absolute; width: 600px; height: 600px;
  filter: brightness(1.3);
  background-repeat: no-repeat; background-position: 0 0;
  background-image: conic-gradient(#1c191c, #402fb5 5%, #1c191c 14%, #1c191c 50%, #cf30aa 60%, #1c191c 64%);
  transition: all 2s;
}
#search-main .darkBorderBg {
  max-height: 48px; max-width: 380px;
}
#search-main .darkBorderBg::before {
  content: ""; z-index: -2; text-align: center;
  top: 50%; left: 50%;
  transform: translate(-50%, -50%) rotate(82deg);
  position: absolute; width: 600px; height: 600px;
  background-repeat: no-repeat; background-position: 0 0;
  background-image: conic-gradient(rgba(0,0,0,0), #18116a, rgba(0,0,0,0) 10%, rgba(0,0,0,0) 50%, #6e1b60, rgba(0,0,0,0) 60%);
  transition: all 2s;
}
#search-main .glow {
  overflow: hidden; filter: blur(30px); opacity: 0.4;
  max-height: 70px; max-width: 400px;
  top: -11px; left: -10px;
}
#search-main .glow::before {
  content: ""; z-index: -2; text-align: center;
  top: 50%; left: 50%;
  transform: translate(-50%, -50%) rotate(60deg);
  position: absolute; width: 999px; height: 999px;
  background-repeat: no-repeat; background-position: 0 0;
  background-image: conic-gradient(#000, #402fb5 5%, #000 38%, #000 50%, #cf30aa 60%, #000 87%);
  transition: all 2s;
}
/* hover rotation */
#search-main:hover .darkBorderBg::before { transform: translate(-50%, -50%) rotate(262deg); }
#search-main:hover .glow::before { transform: translate(-50%, -50%) rotate(240deg); }
#search-main:hover .white::before { transform: translate(-50%, -50%) rotate(263deg); }
#search-main:hover .border::before { transform: translate(-50%, -50%) rotate(250deg); }
/* focus rotation */
#search-main:focus-within .darkBorderBg::before { transform: translate(-50%, -50%) rotate(442deg); transition: all 4s; }
#search-main:focus-within .glow::before { transform: translate(-50%, -50%) rotate(420deg); transition: all 4s; }
#search-main:focus-within .white::before { transform: translate(-50%, -50%) rotate(443deg); transition: all 4s; }
#search-main:focus-within .border::before { transform: translate(-50%, -50%) rotate(430deg); transition: all 4s; }
#search-main input {
  background: #010201; border: none; outline: none;
  width: 100%; height: 42px; border-radius: 12px;
  color: #fff; padding: 0 50px 0 16px;
  font-size: 14px; position: relative; z-index: 1;
  margin: 3px 0 0 0;
}
#search-main input::placeholder { color: #666; }
#search-filter {
  position: absolute; top: 7px; right: 6px; z-index: 2;
  width: 36px; height: 36px; border-radius: 10px;
  display: flex; align-items: center; justify-content: center;
  cursor: pointer;
  background: linear-gradient(180deg, #161329, #000, #1d1b4b);
  border: 1px solid transparent;
  font-size: 14px; color: #aaa;
}
#search-filter:hover { color: #c084fc; }
#search-filter-dropdown {
  display: none; position: absolute; top: 44px; right: 4px;
  background: rgba(20,20,40,0.98); border: 1px solid rgba(192,132,252,0.15);
  border-radius: 8px; padding: 4px; z-index: 20; min-width: 80px;
}
#search-filter-dropdown.active { display: block; }
#search-filter-dropdown button {
  display: block; width: 100%; padding: 6px 12px;
  background: none; border: none; color: #aaa;
  font-size: 12px; cursor: pointer; text-align: left;
  border-radius: 4px;
}
#search-filter-dropdown button:hover { background: rgba(192,132,252,0.12); color: #c084fc; }
#search-filter-dropdown button.sel { color: #c084fc; font-weight: 600; }
#search-results {
  position: absolute; top: 100%; left: 0; right: 0;
  margin-top: 8px;
  background: rgba(10, 15, 30, 0.95);
  border: 1px solid rgba(255, 255, 255, 0.1);
  border-radius: 10px;
  max-height: 300px; overflow-y: auto;
  display: none;
  z-index: 60;
}
#search-results.active { display: block; }
.search-result-item {
  padding: 10px 16px; cursor: pointer; display: flex; justify-content: space-between; align-items: center;
  border-bottom: 1px solid rgba(255, 255, 255, 0.04);
  transition: background 0.15s;
  touch-action: manipulation;
  -webkit-tap-highlight-color: rgba(78,205,196,0.15);
}
.search-result-item:hover { background: rgba(255, 255, 255, 0.06); }
.search-result-item .path { font-size: 11px; color: #777; }

/* ═══════════════════════════════════════════════════════════
   Left Cluster Navigation
   ═══════════════════════════════════════════════════════════ */
#cluster-nav {
  top: 50%; left: 20px; transform: translateY(-50%);
  padding: 16px 14px;
  display: flex; flex-direction: column; gap: 8px;
  min-width: 180px;
}
#cluster-nav .nav-title {
  font-size: 11px; color: #555; text-transform: uppercase; letter-spacing: 2px;
  margin-bottom: 4px; text-align: center;
}
.cn-global-btn {
  width: 100%; padding: 8px 10px; margin-bottom: 6px;
  background: rgba(150,190,255,0.1); border: 1px solid rgba(150,190,255,0.3);
  border-radius: 8px; color: #cdd8ee; font-size: 12px; cursor: pointer;
  font-family: inherit; transition: all 0.2s;
}
.cn-global-btn:hover { background: rgba(150,190,255,0.2); color: #fff; }
.cn-item { display: flex; align-items: center; gap: 6px; padding: 5px 8px;
  border-radius: 6px; cursor: pointer; transition: all 0.15s; font-size: 12px; }
.cn-item:hover { background: rgba(255, 255, 255, 0.08); }
.cn-l1 { font-size: 13px; padding: 7px 10px; }
.cn-l2 { padding-left: 24px; }
.cn-l3 { padding-left: 40px; font-size: 11px; color: #999; }
.cn-l3:hover { color: #fff; }
.cn-dot { width: 8px; height: 8px; border-radius: 50%; flex-shrink: 0; }
.cn-name { flex: 1; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.cn-count { font-size: 10px; color: #555; flex-shrink: 0; }
.cn-arrow { font-size: 10px; color: #555; flex-shrink: 0; transition: transform 0.15s; }
.cn-children { overflow: hidden; }
#cluster-nav { max-height: 80vh; overflow-y: auto; display: none; }
#cluster-nav.nav-open { display: flex; }
#cluster-nav .nav-toggle { display: none; }

/* ═══════════════════════════════════════════════════════════
   Bottom Control Bar
   ═══════════════════════════════════════════════════════════ */
#bottom-bar {
  bottom: 24px; left: 50%; transform: translateX(-50%);
  padding: 10px 20px; z-index: 50;
  display: flex; align-items: center; gap: 6px;
}
.ctrl-btn {
  background: rgba(255, 255, 255, 0.04);
  border: 1px solid rgba(255, 255, 255, 0.08);
  color: #b0b0b0;
  padding: 8px 14px; border-radius: 8px;
  cursor: pointer; font-size: 12px;
  transition: transform 0.1s, background 0.2s;
  white-space: nowrap;
  -webkit-tap-highlight-color: transparent;
  -webkit-touch-callout: none;
}
.ctrl-btn:active {
  transform: scale(0.95);
}
.ctrl-btn:hover { background: rgba(255, 255, 255, 0.1); color: #fff; }
.ctrl-btn.active { background: rgba(78, 205, 196, 0.2); border-color: rgba(78, 205, 196, 0.4); color: #4ecdc4; }
.ctrl-sep { width: 1px; height: 20px; background: rgba(255, 255, 255, 0.08); margin: 0 4px; }

/* ═══════════════════════════════════════════════════════════
   操控台 - 白底星光胶囊 (8按钮平铺, Uiverse.io hover辉光)
   ═══════════════════════════════════════════════════════════ */
#cockpit {
  position: fixed; z-index: 55; pointer-events: none;
  left: 50%; bottom: 22px; transform: translateX(-50%);
}
.cockpit-row {
  display: flex; align-items: center; gap: 10px;
}

.cbtn {
  pointer-events: auto;
  position: relative;
  padding: 10px 18px;
  background: rgba(255,255,255,0.65);
  backdrop-filter: blur(6px);
  -webkit-backdrop-filter: blur(6px);
  font-size: 13px; font-weight: 600;
  color: #1a1f2e;
  box-shadow: 0 0 10px 0 rgba(255, 255, 255, 0.4);
  border-radius: 100px; border: none;
  transition: all 0.3s ease-in-out;
  cursor: pointer;
  display: flex; align-items: center; gap: 5px;
  user-select: none; white-space: nowrap;
  -webkit-tap-highlight-color: transparent;
}

/* 中间两个大按钮 */
.cbtn.lg {
  padding: 14px 28px;
  font-size: 16px;
}

/* 星星 - 初始隐藏 */
.cbtn .star {
  position: absolute; width: 25px; height: auto;
  z-index: -5; opacity: 0;
  transition: all 0.8s cubic-bezier(0.05, 0.83, 0.43, 0.96);
  pointer-events: none;
}
.cbtn .star svg { width: 100%; height: 100%; }
.star-fill { fill: #fffdef; }

/* 星星初始位置 */
.cbtn .star.s1 { top: 20%; left: 20%; width: 25px; transition: all 0.8s cubic-bezier(0.05, 0.83, 0.43, 0.96); }
.cbtn .star.s2 { top: 45%; left: 45%; width: 15px; transition: all 0.8s cubic-bezier(0, 0.4, 0, 1.01); }
.cbtn .star.s3 { top: 40%; left: 40%; width: 5px;  transition: all 0.8s cubic-bezier(0, 0.4, 0, 1.01); }
.cbtn .star.s4 { top: 20%; left: 40%; width: 8px;  transition: all 0.8s cubic-bezier(0, 0.4, 0, 1.01); }
.cbtn .star.s5 { top: 25%; left: 45%; width: 15px; transition: all 0.8s cubic-bezier(0, 0.4, 0, 1.01); }
.cbtn .star.s6 { top: 5%;  left: 50%; width: 5px;  transition: all 0.8s cubic-bezier(0, 0.4, 0, 1.01); }

/* ══ Hover: 黑底白字 + 白色辉光 + 星星飞出 ══ */
.cbtn:hover {
  background: #000000;
  color: #ffffff;
  box-shadow: 0 0 80px #ffffff8c;
}
.cbtn:hover .star {
  z-index: 2; opacity: 1;
  filter: drop-shadow(0 0 10px #fffdef);
}
.cbtn:hover .star.s1 { top: -20%; left: -20%; width: 20px; }
.cbtn:hover .star.s2 { top: 35%; left: -25%; width: 15px; }
.cbtn:hover .star.s3 { top: 80%; left: -10%; width: 10px; }
.cbtn:hover .star.s4 { top: -25%; left: 105%; width: 20px; }
.cbtn:hover .star.s5 { top: 30%; left: 115%; width: 15px; }
.cbtn:hover .star.s6 { top: 80%; left: 105%; width: 10px; }

/* ══ Toggle 激活态(点击): 黑底紫字 + 紫金辉光 ══ */
.cbtn.active {
  background: #0a0d15 !important;
  color: #d946ef !important;
  box-shadow: 0 0 40px rgba(245,158,11,0.3), 0 0 80px rgba(168,85,247,0.15) !important;
}
.cbtn.active .star {
  z-index: 2; opacity: 1;
  filter: drop-shadow(0 0 10px rgba(245,158,11,0.9));
}
.cbtn.active .star-fill { fill: url(#starGrad); }
.cbtn.active .star.s1 { top: -20%; left: -20%; width: 20px; }
.cbtn.active .star.s2 { top: 35%; left: -25%; width: 15px; }
.cbtn.active .star.s3 { top: 80%; left: -10%; width: 10px; }
.cbtn.active .star.s4 { top: -25%; left: 105%; width: 20px; }
.cbtn.active .star.s5 { top: 30%; left: 115%; width: 15px; }
.cbtn.active .star.s6 { top: 80%; left: 105%; width: 10px; }

/* active 态 hover: 仍然出白色辉光 */
.cbtn.active:hover {
  box-shadow: 0 0 80px #ffffff8c !important;
}

/* ══ 点击闪光(非toggle): 瞬间闪一下白辉光 ══ */
.cbtn.flash {
  background: #000000 !important;
  color: #ffffff !important;
  box-shadow: 0 0 80px #ffffff8c !important;
}
.cbtn.flash .star {
  z-index: 2; opacity: 1;
  filter: drop-shadow(0 0 10px #fffdef);
}
.cbtn.flash .star.s1 { top: -20%; left: -20%; width: 20px; }
.cbtn.flash .star.s2 { top: 35%; left: -25%; width: 15px; }
.cbtn.flash .star.s3 { top: 80%; left: -10%; width: 10px; }
.cbtn.flash .star.s4 { top: -25%; left: 105%; width: 20px; }
.cbtn.flash .star.s5 { top: 30%; left: 115%; width: 15px; }
.cbtn.flash .star.s6 { top: 80%; left: 105%; width: 10px; }

/* 手机适配 */
@media (max-width: 767px) {
  /* Hide search bar glow effects */
  #search-main .glow,
  #search-main .white,
  #search-main .border,
  #search-main .darkBorderBg { display: none !important; }

  /* ── Galaxy Stage: fixed to viewport, sized by JS to screen dims ── */
  #galaxy-stage {
    position: fixed !important; top: 0; left: 0; overflow: hidden;
  }
  /* mobile: cockpit uses absolute inside #galaxy-stage (same ref as canvas) */
  #cockpit {
    position: absolute;
    left: 6px; right: auto; bottom: auto;
    top: 50%; transform: translateY(calc(-50% - 30px));
  }
  .cockpit-row {
    gap: 6px; padding: 0;
    flex-direction: column;
  }
  .cbtn {
    position: relative;
    padding: 3px 4px; font-size: 10px; gap: 0;
    border-radius: 8px;
    width: 42px;
    text-align: center; line-height: 1.35;
    display: flex; align-items: center; justify-content: center;
    white-space: nowrap;
    /* 立体感 */
    background: linear-gradient(180deg, #fff 0%, #f0f0f3 100%);
    border: none;
    box-shadow: 0 2px 0 #d0d0d5, 0 4px 8px rgba(0,0,0,0.12);
    transition: all 0.15s;
    overflow: visible;
  }
  /* 左边彩条 */
  .cbtn::before {
    content: "";
    position: absolute;
    left: 4px; top: 22%; bottom: 22%;
    width: 3px; border-radius: 2px;
    background: linear-gradient(180deg, #4ecdc4 0%, #a855f7 100%);
    opacity: 0.85;
    z-index: 0;
  }
  .cbtn:active {
    box-shadow: 0 1px 0 #d0d0d5, 0 0 12px rgba(78,205,196,0.4);
    transform: translateY(1px);
  }
  .cbtn svg.star { display: none; }
  .cbtn.lg {
    padding: 4px 5px; font-size: 11px;
    width: 50px;
  }
}

/* 极速刷题卡片 滑入填充(主题色 --sqclr, 半透保证文字可读) */
.sq-card { position: relative; overflow: hidden; }
.sq-card > div { position: relative; z-index: 1; }
.sq-card::before, .sq-card::after {
  content:""; position:absolute; top:50%; width:8em; aspect-ratio:1; border-radius:50%;
  background: var(--sqclr, #4ecdc4); opacity:0.16; pointer-events:none; z-index:0;
  transition: transform 0.5s ease;
}
.sq-card::before { left:0; transform: translate(-8.5em,-50%); }
.sq-card::after { right:0; transform: translate(8.5em,-50%); }
.sq-card:not([disabled]):hover::before { transform: translate(-2.5em,-50%); }
.sq-card:not([disabled]):hover::after { transform: translate(2.5em,-50%); }
.sq-card:not([disabled]):hover { border-color: var(--sqclr) !important; }


/* 复习滞块: 已填充渐变 + 未填充暗底 */
.review-slider {
  -webkit-appearance: none; appearance: none; width: 100%;
  height: 10px; border-radius: 5px; outline: none;
  background: #2a3242;
  touch-action: pan-x; cursor: pointer;
}
.review-slider::-webkit-slider-runnable-track {
  -webkit-appearance: none; appearance: none;
  height: 10px; border-radius: 5px; background: transparent; border: none;
}
.review-slider::-webkit-slider-thumb {
  -webkit-appearance: none; appearance: none;
  width: 22px; height: 22px; border-radius: 50%; margin-top: -6px;
  background: #4ecdc4; border: 3px solid #0b1020;
  box-shadow: 0 0 8px rgba(78,205,196,0.6); cursor: pointer;
}
.review-slider::-moz-range-track { height: 10px; border-radius: 5px; background: transparent; }
.review-slider::-moz-range-thumb {
  width: 22px; height: 22px; border-radius: 50%;
  background: #4ecdc4; border: 3px solid #0b1020;
  box-shadow: 0 0 8px rgba(78,205,196,0.6); cursor: pointer;
}


}

/* ── Galaxy Stage: wraps canvas + cockpit, share coordinate system ── */
#galaxy-stage { position: relative; }
/* 主页头像 */
#galaxy-avatar{position:absolute;top:12px;left:12px;z-index:100;width:40px;height:40px;border-radius:50%;background:rgba(255,255,255,.08);border:2px solid rgba(255,255,255,.15);cursor:pointer;display:flex;align-items:center;justify-content:center;transition:border-color .2s,transform .15s}#galaxy-avatar:hover{border-color:rgba(255,200,60,.5);transform:scale(1.05)}#galaxy-avatar-inner{width:36px;height:36px;border-radius:50%;background:linear-gradient(135deg,#2a3a5c,#1a2a3c);display:flex;align-items:center;justify-content:center;color:#ccc;font-size:15px;font-weight:700;text-transform:uppercase;overflow:hidden}#galaxy-avatar-inner img{width:100%;height:100%;border-radius:50%;object-fit:cover}
/* 主页左上角商城按钮 */
#galaxy-shop-btn-main{position:absolute;top:58px;left:12px;z-index:100;width:40px;height:40px;border-radius:50%;background:rgba(192,132,252,.35);border:2px solid rgba(192,132,252,.5);cursor:pointer;display:flex;align-items:center;justify-content:center;transition:all .2s;font-size:18px;color:#c084fc;box-shadow:0 0 12px rgba(192,132,252,.2)}#galaxy-shop-btn-main:hover{background:rgba(192,132,252,.55);border-color:rgba(192,132,252,.75);transform:scale(1.08);box-shadow:0 0 20px rgba(192,132,252,.4)}

/* 3D Star Map (按钮颜色已统一到 #cockpit .cbtn 铬银皮肤, 旧透明样式已移除) */
#galaxy-3d { position: fixed; top: 0; left: 0; width: 100%; height: 100%; display: none; z-index: 5; cursor: grab; }
#galaxy-3d:active { cursor: grabbing; }
.three-loading { position: fixed; top: 50%; left: 50%; transform: translate(-50%,-50%); color: #c084fc; font-size: 18px; z-index: 100; pointer-events: none; text-align: center; }
.three-loading .spinner { width: 40px; height: 40px; border: 3px solid rgba(192,132,252,0.2); border-top-color: #c084fc; border-radius: 50%; animation: spin3d 1s linear infinite; margin: 0 auto 12px; }
@keyframes spin3d { to { transform: rotate(360deg); } }

/* ═══════════════════════════════════════════════════════════
   Right Detail Panel
   ═══════════════════════════════════════════════════════════ */
#detail-panel .drag-handle {
  position: absolute; left: 3px; top: 50%; transform: translateY(-50%);
  width: 4px; height: 36px; border-radius: 2px;
  background: rgba(255, 255, 255, 0.12);
  transition: background 0.2s;
}
@media (pointer: coarse) {
  #detail-panel .drag-handle { background: rgba(255, 255, 255, 0.18); }
}
#detail-panel {
  position: fixed;
  top: 0; bottom: 0; right: 0; width: 340px;
  border-radius: 0; border-right: none;
  transform: translateX(100%);
  transition: transform 0.35s cubic-bezier(0.22, 0.61, 0.36, 1);
  padding: 24px 20px 60px 20px;
  overflow-y: auto;
  z-index: 20;
  touch-action: pan-y;
}
#detail-panel.open { transform: translateX(0); }
#detail-panel .close-btn {
  position: absolute; top: 16px; right: 16px;
  width: 30px; height: 30px; border-radius: 50%;
  background: rgba(255, 255, 255, 0.06); border: none; color: #888;
  cursor: pointer; font-size: 16px; display: flex; align-items: center; justify-content: center;
  transition: all 0.2s;
}
#detail-panel .close-btn:hover { background: rgba(255, 255, 255, 0.15); color: #fff; }
#detail-panel .dp-cluster { font-size: 12px; color: #888; margin-bottom: 4px; }
#detail-panel .dp-name { font-size: 20px; font-weight: 600; margin-bottom: 16px; }
#detail-panel .dp-mastery-label { font-size: 11px; color: #666; margin-bottom: 4px; }
#detail-panel .dp-mastery-bar {
  height: 6px; border-radius: 3px; background: rgba(255, 255, 255, 0.08);
  margin-bottom: 16px; overflow: hidden;
}
#detail-panel .dp-mastery-fill { height: 100%; border-radius: 3px; transition: width 0.5s; }
#detail-panel .dp-tags { display: flex; gap: 6px; flex-wrap: wrap; margin-bottom: 16px; }
.dp-tag {
  font-size: 11px; padding: 4px 10px; border-radius: 12px;
  background: rgba(255, 255, 255, 0.06); color: #b0b0b0;
}
.dp-tag.freq-high { background: rgba(255, 100, 100, 0.2); color: #ff6b6b; }
.dp-tag.freq-mid { background: rgba(255, 200, 60, 0.2); color: #ffc83c; }
.dp-tag.freq-low { background: rgba(100, 200, 255, 0.2); color: #64c8ff; }
#detail-panel .dp-section-title {
  font-size: 13px; color: #888; margin: 16px 0 8px;
  padding-bottom: 6px; border-bottom: 1px solid rgba(255, 255, 255, 0.06);
}
.dp-history-item {
  padding: 10px 12px; background: rgba(255, 255, 255, 0.03); border-radius: 8px;
  margin-bottom: 8px; font-size: 12px; line-height: 1.6;
  word-break: break-word; white-space: normal;
  -webkit-tap-highlight-color: transparent;
  -webkit-touch-callout: none;
  transition: transform 0.1s, background 0.1s;
}
.dp-history-item:active {
  transform: scale(0.97);
  background: rgba(255, 255, 255, 0.06);
}
.dp-history-item .hi-result { display: inline-block; padding: 1px 6px; border-radius: 4px; font-size: 11px; margin-right: 6px; }
.dp-history-item .hi-result.correct { background: rgba(78, 205, 196, 0.2); color: #4ecdc4; }
.dp-history-item .hi-result.wrong { background: rgba(255, 90, 90, 0.2); color: #ff6b6b; }
.dp-history-item .hi-result.unanswered { background: rgba(150,150,150,0.15); color: #888; }
#detail-panel .dp-actions { display: flex; gap: 8px; margin-top: 16px; flex-wrap: wrap; }
.dp-action-btn {
  flex: 1; min-width: 80px; padding: 8px 12px; border-radius: 8px;
  border: 1px solid rgba(255, 255, 255, 0.1); background: rgba(255, 255, 255, 0.04);
  color: #b0b0b0; cursor: pointer; font-size: 12px; text-align: center; transition: all 0.2s;
}
.dp-action-btn:hover { background: rgba(255, 255, 255, 0.1); color: #fff; }

/* ═══════════════════════════════════════════════════════════
   Upload Area
   ═══════════════════════════════════════════════════════════ */
#upload-zone {
  position: fixed; top: 20px; right: 20px; z-index: 15;
  display: flex; gap: 8px; align-items: center;
}
/* #upload-btn / #btn-pdf-export 旧透明方按钮样式已移除, 统一由 #cockpit .cbtn 铬银皮肤接管 */
/* Format Selector */
.fs-overlay {
  position: fixed; top: 0; left: 0; right: 0; bottom: 0;
  background: rgba(0, 0, 0, 0.6); z-index: 200;
  display: none; align-items: center; justify-content: center;
}
.fs-overlay.active { display: flex; }
.fs-box {
  background: #1a1a2e; border: 1px solid rgba(78, 205, 196, 0.25);
  border-radius: 16px; padding: 32px; max-width: 480px; width: 90%;
  text-align: center; box-shadow: 0 8px 40px rgba(0,0,0,0.5);
}
.fs-title {
  font-size: 18px; color: #e0e0e0; margin-bottom: 24px; font-weight: 600;
}
.fs-options {
  display: flex; flex-direction: column; gap: 12px; margin-bottom: 20px;
}
.fs-opt {
  display: flex; flex-wrap: wrap; align-items: center;
  column-gap: 12px; row-gap: 4px;
  width: 100%; padding: 16px 20px;
  background: rgba(78, 205, 196, 0.06);
  border: 1px solid rgba(78, 205, 196, 0.15);
  border-radius: 12px;
  color: #ccc; cursor: pointer;
  transition: all 0.2s;
  text-align: left; font-size: 14px;
}
.fs-opt:hover {
  background: rgba(78, 205, 196, 0.15);
  border-color: rgba(78, 205, 196, 0.4);
  color: #fff;
  transform: translateY(-1px);
}
.fs-ico { font-size: 28px; flex-shrink: 0; width: 36px; text-align: center; }
.fs-name { font-size: 17px; font-weight: 700; color: #4ecdc4; flex: 1; white-space: nowrap; }
.fs-desc { font-size: 11px; color: #888; width: 100%; padding-left: 48px; line-height: 1.5; }
.fs-cancel {
  background: transparent; border: 1px solid rgba(255,255,255,0.1);
  color: #888; padding: 8px 24px; border-radius: 8px;
  cursor: pointer; font-size: 13px; transition: all 0.2s;
}
.fs-cancel:hover { background: rgba(255,255,255,0.05); color: #ccc; }

/* ═══════════════════════════════════════════════════════════
   Progress Modal
   ═══════════════════════════════════════════════════════════ */
#progress-modal {
  position: fixed; top: 0; left: 0; right: 0; bottom: 0;
  background: rgba(0, 0, 0, 0.6); z-index: 100;
  display: none; align-items: center; justify-content: center;
}
#progress-modal.active { display: flex; }
#progress-modal .pm-box {
  background: rgba(15, 20, 40, 0.95);
  border: 1px solid rgba(255, 255, 255, 0.1);
  border-radius: 16px; padding: 32px 40px;
  text-align: center; min-width: 360px;
}
#progress-modal .pm-title { font-size: 18px; margin-bottom: 20px; }
#progress-modal .pm-stage { color: #888; font-size: 13px; margin-bottom: 12px; }
#progress-modal .pm-bar {
  height: 4px; border-radius: 2px; background: rgba(255, 255, 255, 0.08);
  overflow: hidden; margin-bottom: 8px;
}
#progress-modal .pm-fill {
  height: 100%; border-radius: 2px;
  background: linear-gradient(90deg, #4ecdc4, #3a86ff);
  transition: width 0.5s ease;
}
#progress-modal .pm-percent { font-size: 12px; color: #666; }
#progress-modal .pm-spinner {
  display: inline-block; width: 16px; height: 16px;
  border: 2px solid rgba(255,255,255,0.1);
  border-top-color: #4ecdc4; border-radius: 50%;
  animation: spin 0.8s linear infinite; margin-right: 8px; vertical-align: middle;
}

#skill-loading-modal {
  position: fixed; top: 0; left: 0; right: 0; bottom: 0;
  background: rgba(0, 0, 0, 0.6); z-index: 10001;
  display: none; align-items: center; justify-content: center;
}
#skill-loading-modal.active { display: flex; }


/* ═══════════════════════════════════════════════════════════
   Quiz Modal
   ═══════════════════════════════════════════════════════════ */
#quiz-modal {
  position: fixed; top: 0; left: 0; right: 0; bottom: 0;
  background: rgba(0, 0, 0, 0.85); z-index: 200;
  display: none; align-items: center; justify-content: center;
}
#quiz-modal.active { display: flex; }
#quiz-modal .quiz-box {
  background: rgba(15, 20, 40, 0.98);
  border: 1px solid rgba(255, 255, 255, 0.1);
  border-radius: 16px; padding: 28px 32px;
  width: 90vw; max-width: 700px; max-height: 85vh;
  overflow-y: auto; overflow-x: hidden; display: flex; flex-direction: column; gap: 14px;
}
.quiz-stem { font-size: 15px; color: #ddd; line-height: 1.7; white-space: pre-line; }
.quiz-option {
  display: block; width: 100%; text-align: left;
  padding: 10px 14px; margin: 6px 0;
  background: rgba(255,255,255,0.04); border: 1px solid rgba(255,255,255,0.08);
  border-radius: 8px; color: #ccc; font-size: 14px; cursor: pointer;
  transition: transform 0.1s, background 0.15s, border-color 0.15s;
  -webkit-tap-highlight-color: transparent;
}
.quiz-option:active {
  transform: scale(0.97);
  background: rgba(255,255,255,0.08);
}
.quiz-option:hover { background: rgba(255,255,255,0.1); border-color: rgba(255,255,255,0.2); }
.quiz-option.selected { border-color: #3a86ff; background: rgba(58,134,255,0.15); }
.quiz-option.correct { border-color: #4ecdc4; background: rgba(78,205,196,0.2); color: #4ecdc4; }
.quiz-option.wrong { border-color: #ff6b6b; background: rgba(255,107,107,0.15); color: #ff6b6b; }
.quiz-option.dim { opacity: 0.4; }
.quiz-feedback { font-size: 13px; color: #888; line-height: 1.6; padding: 10px; background: rgba(255,255,255,0.03); border-radius: 8px; }
.quiz-next { align-self: center; margin-top: 8px; }

/* Question modal (single question from history) */
.qm-header { display: flex; justify-content: space-between; align-items: center; margin-bottom: 8px; }
.qm-path { font-size: 13px; color: #888; }
.qm-close-btn { font-size: 16px; padding: 2px 8px; color: #888; }
.qm-question { font-size: 15px; color: #ddd; line-height: 1.7; margin-bottom: 10px; white-space: pre-line; }
.qm-options { margin-bottom: 10px; }
.qm-opt { color: #777; font-size: 14px; padding: 6px 0; }
.qm-opt-correct { color: #4ecdc4; }
.qm-opt-wrong { color: #ff6b6b; }

/* ═══════════════════════════════════════════════════════════
   Settings overlay
   ═══════════════════════════════════════════════════════════ */
#settings-overlay {
  position: fixed; top: 0; left: 0; right: 0; bottom: 0;
  background: rgba(0, 0, 0, 0.7); z-index: 90;
  display: none; align-items: center; justify-content: center;
}
#settings-overlay.active { display: flex; }
#settings-overlay .so-box {
  background: rgba(15, 20, 40, 0.97);
  border: 1px solid rgba(255, 255, 255, 0.1);
  border-radius: 16px; padding: 28px 32px;
  width: 420px; max-width: 90vw;
}
#settings-overlay .so-title { font-size: 16px; margin-bottom: 16px; }
#settings-overlay .so-field { margin-bottom: 14px; }
#settings-overlay .so-label { font-size: 12px; color: #777; display: block; margin-bottom: 4px; }
#settings-overlay .so-input {
  width: 100%; padding: 8px 12px; background: rgba(255, 255, 255, 0.06);
  border: 1px solid rgba(255, 255, 255, 0.1); border-radius: 8px;
  color: #fff; font-size: 13px; outline: none;
}
#settings-overlay .so-input:focus { border-color: #4ecdc4; }
#settings-overlay .so-actions { display: flex; gap: 8px; justify-content: flex-end; margin-top: 20px; }

/* ═══════════════════════════════════════════════════════════
   Toast
   ═══════════════════════════════════════════════════════════ */
#toast {
  position: fixed; bottom: 100px; left: 50%; transform: translateX(-50%);
  padding: 10px 24px; border-radius: 8px; background: rgba(78, 205, 196, 0.2);
  border: 1px solid rgba(78, 205, 196, 0.3); color: #4ecdc4;
  font-size: 13px; z-index: 200; opacity: 0; transition: opacity 0.3s;
  pointer-events: none;
}
#toast.show { opacity: 1; }

/* ═══════════════════════════════════════════════════════════
   Welcome hint
   ═══════════════════════════════════════════════════════════ */
#welcome-hint {
  position: fixed; top: 50%; left: 50%; transform: translate(-50%, -50%);
  text-align: center; color: #444; z-index: 5; transition: opacity 0.5s;
  pointer-events: none;
}
#welcome-hint .wh-icon { font-size: 48px; margin-bottom: 12px; }
#welcome-hint .wh-text { font-size: 14px; }

/* ═══════════════════════════════════════════════════════════
   Reduced Motion
   ═══════════════════════════════════════════════════════════ */
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    transition-duration: 0.01ms !important;
    animation-duration: 0.01ms !important;
    scroll-behavior: auto !important;
  }
}

/* ═══════════════════════════════════════════════════════════
   Mobile / Responsive - bigger text, touch-friendly
   ═══════════════════════════════════════════════════════════ */
@media (max-width: 640px) {
  /* ── Search bar: fluid width, moderate sizing ── */
  #search-bar { width: calc(100vw - 16px); top: 8px; }
  
  #search-results { max-height: 380px; overscroll-behavior: contain; }
  .search-result-item { padding: 12px 14px; font-size: 14px; }
  .search-result-item .path { font-size: 12px; }

  /* ── Cluster nav: collapsible toggle on mobile ── */
  #cluster-nav { left: auto; right: 4px; min-width: 0; width: auto; min-width: 48px; padding: 8px; border-radius: 12px; max-height: 55vh; overflow-y: auto; transition: all 0.25s ease; }
  #cluster-nav.collapsed { padding: 8px; min-width: 40px; max-width: 40px; border-radius: 20px; }
  #cluster-nav.collapsed .nav-title { display: none; }
  #cluster-nav.collapsed .cn-name, #cluster-nav.collapsed .cn-count, #cluster-nav.collapsed .cn-arrow, #cluster-nav.collapsed .cn-l2, #cluster-nav.collapsed .cn-l3 { display: none; }
  #cluster-nav.collapsed #total-count { display: none; }
  #cluster-nav.collapsed .cn-l1 { padding: 6px 8px; justify-content: center; }
  #cluster-nav .nav-toggle { display: none; justify-content: center; align-items: center; padding: 4px; cursor: pointer; margin-bottom: 4px; border-radius: 6px; }
  #cluster-nav .nav-toggle:hover { background: rgba(255,255,255,0.06); }
  #cluster-nav .cn-count.nav-toggle-count { font-size: 12px; margin-left: auto; }
  #cluster-nav .nav-title { font-size: 9px; letter-spacing: 1px; }
  .cn-item { font-size: 12px; padding: 5px 8px; }
  .cn-l1 { font-size: 13px; }
  .cn-count { font-size: 10px; }
  #total-count { font-size: 11px !important; }

  /* ── Detail panel: narrower, bottom clearance ── */
  #detail-panel { width: min(300px, 85vw); padding: 20px 14px 80px 14px; z-index: 115; }
  #detail-panel .dp-cluster { font-size: 11px; }
  #detail-panel .dp-name { font-size: 19px; }
  #detail-panel .dp-mastery-label { font-size: 12px; }
  #detail-panel .dp-section-title { font-size: 13px; }
  .dp-history-item { padding: 10px 10px; }
  .dp-history-item > div:first-child { font-size: 13px; }
  .dp-history-item > div:nth-child(2) { font-size: 14px !important; }

  /* ── Bottom bar: grid so rows align ── */
  #bottom-bar { padding: 8px 6px; display: grid; grid-template-columns: repeat(3, 1fr); gap: 4px; align-items: center; }
  .ctrl-btn { padding: 6px 4px; font-size: 11px; min-height: 34px; border-radius: 8px; text-align: center; }
  .ctrl-sep { display: none; }
  #btn-fc { grid-column: span 2; }

  /* ── Upload zone: below search bar, right side (按钮已进操控台, 不再样式化) ── */
  #upload-zone { right: 8px; left: auto; top: 68px; gap: 4px; flex-wrap: nowrap; max-width: none; }

  /* ── User bar: below search bar, left side (same row as upload) ── */
  #user-bar, .auth-user-bar { top: 68px; left: 8px; right: auto; font-size: 11px; padding: 5px 10px; gap: 6px; }

  /* ── Quiz & question modal: wider but smaller text ── */
  #quiz-modal .quiz-box { padding: 20px 14px; width: 94vw; max-width: none; max-height: 85vh; border-radius: 14px; gap: 10px; }
  .quiz-stem { font-size: 15px; line-height: 1.7; white-space: pre-line; }
  .quiz-option { padding: 12px 14px; font-size: 14px; margin: 4px 0; border-radius: 10px; }
  .quiz-feedback { font-size: 14px; line-height: 1.6; padding: 12px; }
  .quiz-next { padding: 10px 24px; font-size: 14px; }
  /* Question detail modal */
  .qm-path { font-size: 13px; }
  .qm-question { font-size: 15px; line-height: 1.7; white-space: pre-line; }
  .qm-opt { font-size: 14px; padding: 8px 0; }
  .qm-close-btn { font-size: 20px; min-width: 36px; min-height: 36px; }

  /* ── Settings overlay ── */
  #settings-overlay .so-box { width: 92vw; padding: 24px 20px; }
  #settings-overlay .so-title { font-size: 18px; }
  #settings-overlay .so-label { font-size: 14px; }
  #settings-overlay .so-input { font-size: 15px; padding: 10px 14px; }
  #settings-overlay .so-actions button { font-size: 14px; padding: 9px 18px; }

  /* ── Progress modal ── */
  #progress-modal .pm-box { min-width: 0; width: 90vw; padding: 24px; }
  #progress-modal .pm-title { font-size: 16px; }
  #progress-modal .pm-stage { font-size: 14px; }
  #progress-modal .pm-percent { font-size: 13px; }

  /* ── Format selector ── */
  .fs-box { padding: 24px 20px; width: 92vw; }
  .fs-title { font-size: 17px; }
  .fs-opt { padding: 14px 16px; }
  .fs-ico { font-size: 24px; width: 32px; }
  .fs-name { font-size: 16px; }
  .fs-desc { font-size: 11px; padding-left: 44px; }
  .fs-cancel { font-size: 14px; padding: 10px 20px; }

  /* ── Toast ── */
  #toast { font-size: 15px; padding: 12px 24px; bottom: 120px; }

  /* ── Welcome hint ── */
  #welcome-hint .wh-text { font-size: 16px; }
  #welcome-hint .wh-icon { font-size: 40px; }

  /* ── Touch-friendly: bigger hit targets everywhere ── */
  .close-btn { min-width: 36px; min-height: 36px; font-size: 18px; }

  /* ── PDF export dialog ── */
  .pdf-dialog { width: 96vw; padding: 18px 12px; }
  .pdf-title { font-size: 18px; }
  .pdf-cols { gap: 4px; }
  .pdf-col { min-width: 90px; max-height: 220px; overflow-y: auto; }
  .pdf-col-item { padding: 7px 8px; font-size: 12px; }

  /* ── Cover button: single line ── */
  .cover-enter-btn { padding: 14px 30px; font-size: 14px; letter-spacing: 1.5px; white-space: nowrap; }
}

/* ═══════════════════════════════════════════════════════════
   Auth Modal
   ═══════════════════════════════════════════════════════════ */
.auth-overlay {
  position: fixed; top: 0; left: 0; width: 100%; height: 100%;
  background: rgba(0,0,0,0.85); z-index: 9999;
  display: flex; align-items: center; justify-content: center;
}
.auth-box {
  background: rgba(15,20,35,0.98); border: 1px solid rgba(255,255,255,0.1);
  border-radius: 12px; padding: 32px 28px; width: 360px; max-width: 90vw;
  box-shadow: 0 20px 60px rgba(0,0,0,0.5);
}
.auth-title {
  font-size: 22px; font-weight: 700; margin-bottom: 4px; text-align: center;
}
.auth-subtitle {
  font-size: 12px; color: #888; margin-bottom: 20px; text-align: center;
}
.auth-tabs {
  display: flex; margin-bottom: 20px; border-bottom: 1px solid rgba(255,255,255,0.08);
}
.auth-tab {
  flex: 1; text-align: center; padding: 10px 0; font-size: 14px;
  color: #666; cursor: pointer; border-bottom: 2px solid transparent;
  transition: all 0.2s; background: none; border-top: none; border-left: none; border-right: none;
  font-family: inherit;
}
.auth-tab.active { color: #ffc83c; border-bottom-color: #ffc83c; }
.auth-field { margin-bottom: 14px; }
.auth-label { display: block; font-size: 11px; color: #888; margin-bottom: 4px; }
.auth-input {
  width: 100%; padding: 10px 12px; background: rgba(255,255,255,0.05);
  border: 1px solid rgba(255,255,255,0.1); border-radius: 6px; color: #fff;
  font-size: 15px; font-family: inherit; outline: none; transition: border-color 0.2s;
  box-sizing: border-box;
}
.auth-input:focus { border-color: rgba(255,200,60,0.4); }
.auth-error { color: #ff6b6b; font-size: 12px; min-height: 18px; margin-bottom: 8px; }
.pwd-wrap { position: relative; display: flex; align-items: center; }
.pwd-wrap .auth-input { width: 100%; padding-right: 36px; }
.pwd-toggle { position: absolute; right: 4px; top: 50%; transform: translateY(-50%); background: none; border: none; color: #888; cursor: pointer; font-size: 18px; padding: 4px 8px; line-height: 1; user-select: none; -webkit-user-select: none; }
.pwd-toggle:hover { color: #ffc83c; }
.auth-btn {
  width: 100%; padding: 12px 0; background: rgba(255,200,60,0.15);
  border: 1px solid rgba(255,200,60,0.3); border-radius: 6px; color: #ffc83c;
  font-size: 15px; font-weight: 600; cursor: pointer; transition: all 0.2s;
  font-family: inherit;
}
.auth-btn:hover { background: rgba(255,200,60,0.25); }

/* ── PDF Export Dialog ── */
.pdf-overlay {
  position: fixed; top: 0; left: 0; width: 100%; height: 100%;
  background: rgba(0,0,0,0.85); z-index: 9999;
  display: none; align-items: center; justify-content: center;
}
.pdf-overlay.active { display: flex; }
.pdf-dialog {
  background: rgba(15,20,35,0.98); border: 1px solid rgba(255,255,255,0.1);
  border-radius: 12px; padding: 28px 24px; width: 520px; max-width: 95vw;
  max-height: 90vh; overflow-y: auto;
  box-shadow: 0 20px 60px rgba(0,0,0,0.5);
  position: relative;
}
.pdf-title { font-size: 20px; font-weight: 700; margin-bottom: 18px; color: #ffc83c; }
.pdf-section { margin-bottom: 16px; }
.pdf-label { font-size: 12px; color: #888; margin-bottom: 8px; text-transform: uppercase; letter-spacing: 1px; }
.pdf-tag-tree {
  max-height: 220px; overflow-y: auto;
  background: rgba(255,255,255,0.03); border: 1px solid rgba(255,255,255,0.08);
  border-radius: 8px; padding: 8px;
  display:none;
}
/* Column-based tag selector */
.pdf-cols { display: flex; gap: 8px; overflow-x: auto; padding-bottom: 4px; }
.pdf-col {
  flex: 1 1 0; min-width: 90px;
  background: rgba(255,255,255,0.03); border: 1px solid rgba(255,255,255,0.08);
  border-radius: 8px; padding: 6px;
}
.pdf-col-item {
  display: flex; align-items: center; gap: 6px;
  padding: 8px 10px; margin: 2px 0; border-radius: 6px;
  cursor: pointer; font-size: 13px; transition: all 0.15s;
  border: 1px solid transparent;
  white-space: nowrap;
}
.pdf-col-item:hover { background: rgba(255,255,255,0.06); }
.pdf-col-item.selected {
  background: rgba(255,200,60,0.15); border-color: rgba(255,200,60,0.3); color: #ffc83c; font-weight: 600;
}
.pdf-col-item .count { margin-left: auto; font-size: 11px; color: #555; }
.pdf-col-item.selected .count { color: #ffc83c; }
.pdf-col-item .arrow { margin-left: 2px; font-size: 10px; color: #555; }
.pdf-templates { display: flex; flex-direction: column; gap: 8px; }
.pdf-tpl-card {
  display: flex; align-items: center; gap: 10px;
  padding: 12px 14px; border-radius: 8px;
  border: 1px solid rgba(255,255,255,0.08);
  background: rgba(255,255,255,0.02);
  cursor: pointer; transition: all 0.2s;
}
.pdf-tpl-card:hover { border-color: rgba(255,255,255,0.15); background: rgba(255,255,255,0.04); }
.pdf-tpl-card input[type="radio"] { accent-color: #ffc83c; }
.pdf-tpl-name { font-size: 14px; font-weight: 600; }
.pdf-tpl-desc { font-size: 11px; color: #888; margin-top: 2px; }
.auth-user-bar {
  position: fixed; top: 8px; left: 12px; z-index: 100;
  font-size: 12px; color: #888; display: flex; align-items: center; gap: 10px;
  background: rgba(10,15,30,0.7); padding: 5px 12px; border-radius: 20px;
  border: 1px solid rgba(255,255,255,0.06);
}
.user-info-link { color: #ccc; cursor: pointer; max-width: 160px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.user-info-link:hover { color: #ffc83c; }

/* Personal info modal */
.info-modal-overlay {
  position: fixed; top: 0; left: 0; width: 100%; height: 100%;
  background: rgba(0,0,0,0.7); z-index: 9999;
  display: flex; align-items: center; justify-content: center;
}
.info-modal {
  background: rgba(15,20,35,0.98); border: 1px solid rgba(255,255,255,0.1);
  border-radius: 12px; padding: 24px; width: 320px; max-width: 90vw;
  box-shadow: 0 20px 60px rgba(0,0,0,0.5);
}
.info-modal-title { font-size: 18px; font-weight: 600; margin-bottom: 16px; color: #ffc83c; }
.info-row { display: flex; justify-content: space-between; padding: 10px 0; border-bottom: 1px solid rgba(255,255,255,0.06); font-size: 14px; }
.info-row .info-label { color: #888; }
.info-row .info-value { color: #ccc; font-weight: 500; }


    /* ── Flashcard v2: Mail UI (three-column) ── */
  #fc-overlay { display:none; position:fixed; inset:0; z-index:1001; background:rgba(0,0,0,0.88); align-items:center; justify-content:center; }
  #fc-overlay.active { display:flex; }
  #mail-box { width:94vw; max-width:960px; height:86vh; max-height:700px; display:flex; flex-direction:column; border-radius:14px; overflow:hidden; background:#0f1322; border:1px solid rgba(78,205,196,0.12); box-shadow:0 0 50px rgba(0,0,0,0.6); }
  /* STARMIL ribbon (top-right corner) */
  #mail-ribbon { position:absolute; overflow:hidden; width:150px; height:150px; top:-10px; right:-10px; z-index:10; pointer-events:none; display:flex; align-items:center; justify-content:center; }
  #mail-ribbon::before { content:'STARMAIL'; position:absolute; width:150%; height:40px; background-image:linear-gradient(45deg, #ff6547 0%, #ffb144 51%, #ff7053 100%); transform:rotate(45deg) translateY(-20px); display:flex; align-items:center; justify-content:center; color:#fff; font-weight:600; font-size:12px; letter-spacing:0.2em; text-transform:uppercase; box-shadow:0 5px 10px rgba(0,0,0,0.23); }
  #mail-ribbon::after { content:''; position:absolute; width:10px; height:10px; bottom:0; right:0; z-index:-1; box-shadow:-140px -140px #cc3f47; background-image:linear-gradient(45deg, #FF512F 0%, #F09819 51%, #FF512F 100%); }
  /* Tabs */
  .mail-tabs { display:flex; gap:8px; padding:10px 16px; background:linear-gradient(180deg, rgba(30,40,70,0.6), rgba(20,28,50,0.5)); flex-shrink:0; border-bottom:1px solid rgba(100,140,200,0.12); }
  .mail-tab { padding:6px 18px; border-radius:5rem; font-size:13px; font-weight:600; color:rgba(200,210,230,0.5); cursor:pointer; transition:all 0.2s; border:1px solid transparent; }
  .mail-tab:hover { color:rgba(200,220,255,0.8); }
  .mail-tab.active { color:#7eb8ff; background:rgba(100,160,220,0.12); border-color:rgba(100,160,220,0.3); }
  .mail-tab .mt-badge { font-size:11px; background:rgba(100,160,220,0.2); border-radius:8px; padding:1px 6px; margin-left:4px; }
  .mail-tab.active .mt-badge { background:rgba(100,160,220,0.35); }
  #mt-unread { background:#ff3b30 !important; color:#fff; font-weight:700; }
  /* Columns */
  .mail-columns { flex:1; display:flex; overflow:hidden; }
  /* Left: module sidebar */
  #mail-sidebar { width:130px; min-width:130px; background:rgba(0,0,0,0.3); border-right:1px solid rgba(255,255,255,0.05); display:flex; flex-direction:column; padding:0; }
  /* Module buttons - rectangle, gradient border, stars on select */
  .ms-mod { flex:1; display:flex; justify-content:center; align-items:center; overflow:hidden; cursor:pointer; position:relative; background-size:300% 300%; transition:0.4s; animation:gradient_301 5s ease infinite paused; border:none; border-bottom:1px solid rgba(255,255,255,0.04); background-image:linear-gradient(#101524, #101524), linear-gradient(137.48deg, #ffdb3b 10%, #fe53bb 45%, #8f51ea 67%, #0044ff 87%); background-origin:border-box; background-clip:content-box, border-box; font-size:13px; font-weight:700; color:rgba(255,255,255,0.4); letter-spacing:0.05em; }
  .ms-mod:hover { color:rgba(255,255,255,0.65); }
  .ms-mod.sel { animation-play-state:running; background-image:linear-gradient(#0f1a28, #0f1a28), linear-gradient(137.48deg, #4ecdc4 10%, #4ecdc4 45%, #4ecdc4 67%, #4ecdc4 87%); color:#4ecdc4; text-shadow:0 0 8px rgba(78,205,196,0.5); }
  .ms-mod .ms-stars { display:none; }
  .ms-mod.sel .ms-stars { display:block; position:absolute; z-index:0; width:100%; height:100%; overflow:hidden; background:transparent; }
  .ms-mod.sel .ms-stars::after { content:""; position:absolute; top:-10rem; left:-100rem; width:100%; height:100%; background-image:radial-gradient(rgba(78,205,196,0.6) 1px, transparent 1%); background-size:50px 50px; animation:animStarRotate 90s linear infinite; }
  .ms-mod.sel .ms-stars::before { content:""; position:absolute; top:0; left:-50%; width:170%; height:500%; background-image:radial-gradient(rgba(78,205,196,0.35) 1px, transparent 1%); background-size:50px 50px; opacity:0.5; animation:animStar 60s linear infinite; }
  .ms-mod .ms-glow { display:none; }
  .ms-mod.sel .ms-glow { display:flex; position:absolute; width:100%; z-index:-1; }
  .ms-mod.sel .ms-glow .ms-circle { width:100%; height:30px; filter:blur(2rem); animation:pulse_3011 4s infinite; }
  .ms-mod.sel .ms-glow .ms-circle:nth-of-type(1) { background:rgba(78,205,196,0.5); }
  .ms-mod.sel .ms-glow .ms-circle:nth-of-type(2) { background:rgba(78,205,196,0.4); }
  .ms-mod .ms-label { position:relative; z-index:2; display:flex; align-items:center; gap:4px; }
  .ms-mod .ms-badge { font-size:9px; opacity:0.5; background:rgba(255,255,255,0.08); border-radius:6px; padding:1px 5px; }
  .ms-mod.sel .ms-badge { background:rgba(78,205,196,0.2); opacity:1; }
  .ms-mod .ms-badge-unread { background:#ff3b30; color:#fff; font-weight:700; font-size:10px; min-width:16px; height:16px; line-height:16px; text-align:center; border-radius:8px; padding:0 5px; opacity:1; }
  /* Middle: summary list */
  .mail-summary-col { width:220px; min-width:220px; border-right:1px solid rgba(255,255,255,0.05); display:flex; flex-direction:column; background:rgba(0,0,0,0.08); }
  #mail-summary { flex:1; overflow-y:auto; }
  #mail-summary-footer { flex-shrink:0; text-align:center; font-size:11px; color:#4ecdc4; padding:8px 4px; border-top:1px solid rgba(78,205,196,0.15); text-shadow:0 0 8px rgba(78,205,196,0.3); }
  .msum-item { padding:10px 12px; border-bottom:1px solid rgba(255,255,255,0.03); cursor:pointer; transition:all 0.15s; }
  .msum-item:hover { background:rgba(255,255,255,0.04); }
  .msum-item.sel { background:rgba(78,205,196,0.08); border-left:3px solid #4ecdc4; }
  .msum-item.msum-oldest { border-left:3px solid #f0a500; background:linear-gradient(90deg, rgba(240,165,0,0.10) 0%, rgba(240,165,0,0.02) 60%, transparent 100%); }
  .msum-item.msum-oldest.sel { border-left:3px solid #4ecdc4; background:linear-gradient(90deg, rgba(240,165,0,0.10) 0%, rgba(78,205,196,0.08) 60%, rgba(78,205,196,0.04) 100%); }
  .msum-item .msi-planet { font-size:12px; font-weight:700; color:#4ecdc4; margin-bottom:2px; }
  .msum-item .msi-subject { font-size:11px; color:rgba(255,255,255,0.55); margin-bottom:2px; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
  .msum-item .msi-preview { font-size:10px; color:rgba(255,255,255,0.25); line-height:1.4; display:-webkit-box; -webkit-line-clamp:2; -webkit-box-orient:vertical; overflow:hidden; }
  .msum-item .msi-replied { font-size:9px; color:rgba(78,205,196,0.4); margin-top:3px; }
  /* Right: email detail */
  #mail-detail { flex:1; overflow-y:auto; padding:24px 28px; color:#ccc; font-size:14px; line-height:1.8; }
  #mail-detail .md-empty { text-align:center; color:rgba(255,255,255,0.2); padding-top:60px; font-size:15px; }
  .md-greeting { margin-bottom:12px; }
  .md-body { margin:16px 0; }
  .md-body .md-question { background:rgba(78,205,196,0.06); border:1px solid rgba(78,205,196,0.15); border-left:3px solid #4ecdc4; border-radius:0 8px 8px 0; padding:12px 14px; margin:10px 0; font-size:14px; color:#e0e0e0; line-height:1.7; }
  .md-body .md-highlight { color:#4ecdc4; font-weight:700; }
  .md-body .md-wrong { color:#ea5455; font-weight:600; }
  .md-body .md-compare { margin:6px 0; line-height:2; }
  .md-body .md-kaodian { color:#ffb300; font-size:13px; background:rgba(255,179,0,0.08); border-left:3px solid #ffb300; border-radius:4px; padding:8px 12px; margin:10px 0; line-height:1.7; }
  .md-signature { text-align:right; color:rgba(255,255,255,0.35); font-size:12px; margin-top:20px; line-height:1.6; }
  .md-attach { display:inline-block; margin-top:16px; padding:8px 16px; border-radius:8px; background:rgba(78,205,196,0.1); border:1px solid rgba(78,205,196,0.2); color:#4ecdc4; font-size:13px; cursor:pointer; transition:all 0.2s; }
  .md-attach:hover { background:rgba(78,205,196,0.2); }
  .md-reply { display:flex; gap:8px; margin-top:16px; }
  .md-reply-btn { flex:1; padding:10px 6px; border-radius:8px; border:none; font-size:13px; font-weight:700; cursor:pointer; transition:all 0.2s; }
  .md-reply-btn.forgot { background:rgba(234,84,85,0.2); color:#ea5455; }
  .md-reply-btn.forgot:hover { background:rgba(234,84,85,0.35); }
  .md-reply-btn.fuzzy { background:rgba(255,200,60,0.2); color:#ffc83c; }
  .md-reply-btn.fuzzy:hover { background:rgba(255,200,60,0.35); }
  .md-reply-btn.mastered { background:rgba(78,205,196,0.2); color:#4ecdc4; }
  .md-reply-btn.mastered:hover { background:rgba(78,205,196,0.35); }
  /* Quiz in detail */
  .md-quiz { margin-top:12px; }
  .md-quiz .mq-opt { display:block; width:100%; padding:9px 12px; margin:4px 0; border-radius:6px; border:1px solid rgba(255,255,255,0.08); background:rgba(255,255,255,0.02); color:#bbb; text-align:left; cursor:pointer; font-size:13px; transition:all 0.15s; }
  .md-quiz .mq-opt:hover { background:rgba(78,205,196,0.08); border-color:rgba(78,205,196,0.3); }
  .md-quiz .mq-opt.chosen { background:rgba(78,205,196,0.2); border-color:#4ecdc4; color:#4ecdc4; }
  .md-quiz .mq-opt.wrong { background:rgba(234,84,85,0.2); border-color:#ea5455; color:#ea5455; }
  .md-quiz .mq-result { font-size:12px; margin-top:8px; padding:8px; border-radius:4px; display:none; }
  .md-quiz .mq-result.show { display:block; }
  .md-quiz .mq-result.right { background:rgba(78,205,196,0.1); color:#4ecdc4; }
  .md-quiz .mq-result.wrong-r { background:rgba(234,84,85,0.1); color:#ea5455; }
  #mail-close { position:absolute; top:8px; right:14px; z-index:10; background:rgba(0,0,0,0.5); border:1px solid rgba(255,255,255,0.12); color:rgba(255,255,255,0.5); border-radius:6px; padding:3px 10px; font-size:11px; cursor:pointer; }
  #mail-close:hover { color:#fff; background:rgba(255,255,255,0.1); }
  #mail-detail-back { display:none; }
  @media (max-width:768px) {
    #mail-ribbon { display:none; }
    #mail-box { height:94vh; max-height:none; }
    /* columns: relative for detail slide, sidebar+summary side by side */
    .mail-columns {
      position: relative; flex: 1; overflow: hidden;
      flex-direction: row;
    }
    /* sidebar: vertical module list */
    #mail-sidebar {
      width: 48px; min-width: 48px;
      flex-direction: column; flex-wrap: nowrap;
      border-right: 1px solid rgba(255,255,255,0.05);
      border-bottom: none; overflow-y: auto;
    }
    .ms-mod {
      flex: 1; min-height: 0; font-size: 13px;
      writing-mode: vertical-rl; text-orientation: upright;
      letter-spacing: 2px;
      position: relative;
    }
    .ms-mod .ms-label { flex-direction: column; position:static; }
    .ms-mod .ms-badge, .ms-mod .ms-badge-unread {
      position:absolute; top:4px; right:4px;
      writing-mode: horizontal-tb;
    }
    /* summary: takes remaining space */
    .mail-summary-col {
      flex: 1; min-width: 0; display:flex; flex-direction:column;
    }
    #mail-summary {
      flex: 1; min-width: 0; max-height: none; overflow-y: auto;
    }
    #mail-summary-footer { font-size:10px; padding:5px 4px; }
    /* detail: full-width overlay on mobile */
    #mail-detail {
      display: none;
      position: absolute;
      top: 0; left: 0; bottom: 0;
      width: 100%; z-index: 5;
      background: #0f1322; padding: 16px; padding-top: 44px;
      font-size: 13px; overflow-y: auto;
    }
    #mail-detail.mail-detail-open { display: block; }
    /* back button - above detail, inside .mail-columns */
    #mail-detail-back {
      display: none;
      position: absolute; top: 10px; left: 10px;
      z-index: 7; width: 30px; height: 30px;
      border-radius: 50%; background: rgba(78,205,196,0.15);
      border: 1px solid rgba(78,205,196,0.3); color: #4ecdc4;
      font-size: 16px; cursor: pointer;
      align-items: center; justify-content: center;
    }
    #mail-detail-back.show { display: flex; }
    .md-reply-btn { font-size: 12px; padding: 8px 4px; }
    .md-empty { font-size: 13px; padding: 20px 0; }
  }

  /* ── StealthWorm keyframes ── */
  @keyframes animStar { from{transform:translateY(0)} to{transform:translateY(-135rem)} }
  @keyframes animStarRotate { from{transform:rotate(360deg)} to{transform:rotate(0)} }
  @keyframes gradient_301 { 0%{background-position:0% 50%} 50%{background-position:100% 50%} 100%{background-position:0% 50%} }
  @keyframes pulse_3011 { 0%{transform:scale(0.75);box-shadow:0 0 0 0 rgba(0,0,0,0.7)} 70%{transform:scale(1);box-shadow:0 0 0 10px rgba(0,0,0,0)} 100%{transform:scale(0.75);box-shadow:0 0 0 0 rgba(0,0,0,0)} }

/* ── OCR Review Modal (mobile-first single-question) ──────── */
.ocr-overlay {
  display: none;
  position: fixed; inset: 0; z-index: 500;
  background: rgba(0,0,0,0.85);
  backdrop-filter: blur(4px);
  flex-direction: column;
  align-items: center; justify-content: center;
}
.ocr-overlay.active { display: flex; }
.ocr-box {
  width: 92vw; max-width: 520px; max-height: 92vh;
  overflow-y: auto;
  background: rgba(20,20,30,0.95);
  border: 1px solid rgba(78,205,196,0.25);
  border-radius: 14px;
  padding: 20px 18px;
  box-shadow: 0 0 40px rgba(78,205,196,0.08);
}
.ocr-progress {
  font-size: 13px; color: #888;
  margin-bottom: 14px;
  display: flex; justify-content: space-between; align-items: center;
}
.ocr-progress span { color: #4ecdc4; font-weight: 600; }
.ocr-stem-label {
  font-size: 11px; color: #666; margin-bottom: 4px;
}
.ocr-stem-input {
  width: 100%; min-height: 80px;
  background: rgba(255,255,255,0.04);
  border: 1px solid rgba(255,255,255,0.1);
  border-radius: 8px;
  color: #ddd; font-size: 14px; line-height: 1.6;
  padding: 10px 12px;
  resize: vertical;
  font-family: inherit;
  box-sizing: border-box;
}
.ocr-stem-input:focus {
  border-color: rgba(78,205,196,0.4);
  outline: none;
}
.ocr-stem-input.invalid {
  border-color: rgba(255,107,107,0.6);
  box-shadow: 0 0 8px rgba(255,107,107,0.15);
}
.ocr-opts-title {
  font-size: 11px; color: #666; margin: 10px 0 6px;
}
.ocr-opt-row {
  display: flex; align-items: center;
  gap: 8px; margin-bottom: 6px;
}
.ocr-opt-label {
  width: 20px; text-align: center;
  font-size: 13px; font-weight: 600;
  color: #888;
  flex-shrink: 0;
}
.ocr-opt-input {
  flex: 1;
  background: rgba(255,255,255,0.04);
  border: 1px solid rgba(255,255,255,0.08);
  border-radius: 6px;
  color: #ccc; font-size: 13px;
  padding: 8px 10px;
  font-family: inherit;
  box-sizing: border-box;
}
.ocr-opt-input:focus {
  border-color: rgba(78,205,196,0.3);
  outline: none;
}
.ocr-opt-input.missing {
  border-color: rgba(255,194,40,0.5);
  color: #ffc83c;
}
.ocr-select-row {
  display: flex; gap: 10px;
  margin-top: 12px;
  padding-top: 10px;
  border-top: 1px solid rgba(255,255,255,0.06);
}
.ocr-select-group {
  flex: 1;
  display: flex; flex-direction: column;
  gap: 4px;
}
.ocr-select-label {
  font-size: 11px; color: #ccc; font-weight: 600;
}
.ocr-select {
  width: 100%;
  background: rgba(15,25,45,0.9);
  border: 1px solid rgba(78,205,196,0.25);
  border-radius: 6px;
  color: #e0e0e0; font-size: 13px; font-weight: 600;
  padding: 7px 8px;
  font-family: inherit;
  cursor: pointer;
  appearance: none;
  text-align: center;
  text-align-last: center;
}
.ocr-select option {
  background: #0f1928;
  color: #e0e0e0;
}
.ocr-select:focus {
  border-color: rgba(78,205,196,0.4);
  outline: none;
}
.ocr-select.required {
  border-color: rgba(255,107,107,0.5);
}
.ocr-nav {
  display: flex; gap: 8px; margin-top: 14px;
}
.ocr-nav button {
  flex: 1;
  background: rgba(255,255,255,0.06);
  border: 1px solid rgba(255,255,255,0.1);
  border-radius: 8px;
  color: #aaa; font-size: 13px;
  padding: 10px 0;
  cursor: pointer;
  font-family: inherit;
  transition: all 0.15s;
}
.ocr-nav button:hover { background: rgba(255,255,255,0.1); }
.ocr-nav button:disabled { opacity: 0.3; cursor: not-allowed; }
.ocr-nav .ocr-nav-submit {
  color: #4ecdc4;
  border-color: rgba(78,205,196,0.3);
  background: rgba(78,205,196,0.08);
}
.ocr-nav .ocr-nav-submit:hover {
  background: rgba(78,205,196,0.18);
}
.ocr-err-banner {
  display: none;
  background: rgba(255,107,107,0.12);
  border: 1px solid rgba(255,107,107,0.3);
  border-radius: 8px;
  color: #ff6b6b; font-size: 12px;
  padding: 8px 12px; margin-bottom: 10px;
}
.ocr-err-banner.show { display: block; }

@media (max-width: 480px) {
  .ocr-box { padding: 14px 12px; border-radius: 10px; }
  .ocr-stem-input { font-size: 13px; min-height: 64px; }
  .ocr-opt-input { font-size: 12px; padding: 6px 8px; }
  .ocr-select { font-size: 12px; padding: 6px 4px; }
  .ocr-nav button { font-size: 12px; padding: 8px 0; }
}

/* ═══════════════════════════════════════════════════════════
   Cover Page
   ═══════════════════════════════════════════════════════════ */
#cover {
  position: fixed; top: 0; left: 0; width: 100%; height: 100vh;
  z-index: 199;
  background: radial-gradient(ellipse at center, #0d1330 0%, #060a16 50%, #020408 100%);
  transition: transform 0.85s cubic-bezier(0.65, 0, 0.35, 1);
  transform: translateY(0);
  display: flex; flex-direction: column;
  overflow: hidden;
}
#cover.slide-away { transform: translateY(100vh); }

#cover-canvas { position: absolute; inset: 0; z-index: 0; width: 100%; height: 100%; }
.cover-bg-overlay { position: absolute; inset: 0; z-index: 1; background: rgba(10,15,26,0.52); pointer-events: none; }
#cover .star {
  position: absolute; background: #fff; border-radius: 50%;
  animation: cover-twinkle var(--dur) ease-in-out infinite;
  animation-delay: var(--delay); opacity: 0;
}
@keyframes cover-twinkle {
  0%, 100% { opacity: 0.15; transform: scale(1); }
  50% { opacity: 0.7; transform: scale(1.8); }
}

.cover-bar {
  position: relative; z-index: 2;
  display: flex; justify-content: center; align-items: center;
  padding: 12px 28px;
  background: rgba(8, 12, 26, 0.55);
  backdrop-filter: blur(18px); -webkit-backdrop-filter: blur(18px);
  border-bottom: 1px solid rgba(255,255,255,0.05);
  animation: fade-down 0.6s ease-out both;
}
.cover-bar-center { display: flex; align-items: center; gap: 14px; }
.cover-bar-btn {
  background: transparent; border: 1px solid rgba(255,255,255,0.12);
  color: #999; padding: 6px 0; border-radius: 6px; cursor: pointer;
  font-size: 13px; transition: all 0.2s; font-family: inherit;
  width: 88px; text-align: center; overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.cover-bar-btn:hover { background: rgba(255,255,255,0.08); color: #ddd; border-color: rgba(255,255,255,0.2); }
.cover-bar-btn.primary { background: rgba(78,205,196,0.12); border-color: rgba(78,205,196,0.25); color: #4ecdc4; }
.cover-bar-btn.primary:hover { background: rgba(78,205,196,0.22); }
.cover-shop-btn { background: rgba(192,132,252,0.1); border-color: rgba(192,132,252,0.25); color: #c084fc; font-size: 12px; padding: 4px 12px; min-width: auto; }
.cover-shop-btn:hover { background: rgba(192,132,252,0.22); }
.cover-user-info { font-size: 13px; color: #ccc; display: inline-block; width: 88px; text-align: center; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.cover-user-info span { color: #ffc83c; }
.cover-center {
  position: relative; z-index: 2;
  flex: 1; display: flex; flex-direction: column; justify-content: center; align-items: center;
  text-align: center; padding: 40px;
}
.cover-title {
  font-size: clamp(30px, 5.5vw, 60px); font-weight: 800;
  letter-spacing: 6px; margin-bottom: 14px;
  background: linear-gradient(100deg, #e9d5ff 0%, #b794f6 22%, #9f7aea 45%, #7c8cf8 68%, #a5b4fc 88%, #e9d5ff 100%);
  background-size: 220% auto;
  -webkit-background-clip: text; background-clip: text;
  -webkit-text-fill-color: transparent; color: transparent;
  filter: drop-shadow(0 0 16px rgba(167,139,250,0.55)) drop-shadow(0 0 42px rgba(124,140,248,0.32));
  animation: fade-rise 0.8s ease-out both, titleShimmer 8s ease-in-out infinite;
}
@keyframes titleShimmer {
  0%,100% { background-position: 0% center; }
  50% { background-position: 100% center; }
}
.cover-slogan {
  font-size: clamp(12px, 1.4vw, 15px); color: #888;
  letter-spacing: 1px; margin-bottom: 40px;
  animation: fade-rise 0.8s ease-out 0.15s both;
}
.cover-register-hint { font-size: 13px; color: #999; margin-top: 20px; animation: fade-rise 0.8s ease-out 0.5s both; }
.cover-register-hint span { color: #4ecdc4; cursor: pointer; text-decoration: none; font-weight: 600; }
.cover-register-hint span:hover { color: #6eece4; }

/* ── Checkin Badge (title corner) ── */
.title-wrapper { position: relative; display: inline-block; }
.checkin-badge {
  position: absolute; top: -2px; right: -175px;
  padding: 5px 14px; border-radius: 6px;
  background: linear-gradient(135deg, #f6d365 0%, #f5a623 100%);
  display: flex; align-items: center; gap: 5px;
  cursor: pointer; box-shadow: 0 0 16px rgba(245,166,35,0.5);
  transition: transform 0.2s, box-shadow 0.2s;
  z-index: 10; white-space: nowrap;
}
.checkin-badge svg { color: #fff; width: 14px; height: 14px; flex-shrink: 0; }
.checkin-badge::after {
  content: '签到领取银河币';
  color: #fff; font-size: 12px; font-weight: 600; letter-spacing: 1px;
}
.checkin-badge:hover { transform: scale(1.05); box-shadow: 0 0 24px rgba(245,166,35,0.7); }
.checkin-badge.checked { background: linear-gradient(135deg, #666 0%, #444 100%); box-shadow: 0 0 8px rgba(136,136,136,0.3); }
.checkin-badge.checked::after { color: #aaa; }
.checkin-badge.checked .checkin-badge-day { border-color: #888; color: #aaa; }
.checkin-badge-day {
  min-width: 18px; height: 18px; border-radius: 9px;
  background: #1a1a2e; color: #ffc83c; font-size: 10px; font-weight: 700;
  display: flex; align-items: center; justify-content: center;
  border: 1.5px solid #f5a623; padding: 0 4px;
}

/* ── Checkin Modal ── */
.checkin-panel {
  background: linear-gradient(145deg, #0d0d2b 0%, #161640 100%);
  border: 1px solid rgba(245,166,35,0.25); border-radius: 20px;
  padding: 32px 28px 24px; max-width: 480px; width: 92vw;
  text-align: center; position: relative;
  box-shadow: 0 0 60px rgba(245,166,35,0.12);
}
.checkin-close {
  position: absolute; top: 12px; right: 16px; font-size: 20px;
  color: #666; cursor: pointer; line-height: 1;
  transition: color 0.2s;
}
.checkin-close:hover { color: #ffc83c; }
.checkin-title {
  font-size: 22px; font-weight: 700; color: #ffc83c;
  margin-bottom: 6px; letter-spacing: 2px;
}
.checkin-subtitle {
  font-size: 13px; color: #777; margin-bottom: 24px;
}
.checkin-wheel {
  display: flex; justify-content: center; gap: 8px;
  margin-bottom: 20px; flex-wrap: wrap;
}
.checkin-day {
  width: 48px; height: 64px; border-radius: 12px;
  background: rgba(255,255,255,0.04); border: 1.5px solid rgba(255,255,255,0.08);
  display: flex; flex-direction: column; align-items: center; justify-content: center;
  gap: 4px; transition: all 0.3s; position: relative;
}
.checkin-day.done {
  background: rgba(245,166,35,0.15); border-color: rgba(245,166,35,0.4);
}
.checkin-day.current {
  background: rgba(245,166,35,0.25); border-color: #f5a623;
  box-shadow: 0 0 18px rgba(245,166,35,0.35);
  animation: checkin-pulse 1.5s ease-in-out infinite;
}
@keyframes checkin-pulse {
  0%,100% { box-shadow: 0 0 12px rgba(245,166,35,0.25); }
  50% { box-shadow: 0 0 24px rgba(245,166,35,0.5); }
}
.checkin-day.locked {
  opacity: 0.3; border-color: rgba(255,255,255,0.04);
}
.checkin-day.bonus.done, .checkin-day.bonus.current {
  background: rgba(78,205,196,0.2); border-color: #4ecdc4;
  box-shadow: 0 0 18px rgba(78,205,196,0.3);
}
.checkin-day-num {
  font-size: 18px; font-weight: 700; color: #ccc;
}
.checkin-day.done .checkin-day-num { color: #ffc83c; }
.checkin-day.current .checkin-day-num { color: #fff; font-size: 20px; }
.checkin-day.bonus.done .checkin-day-num, .checkin-day.bonus.current .checkin-day-num { color: #4ecdc4; }
.checkin-day-label {
  font-size: 10px; color: #eee; font-weight: 500;
}
.checkin-day.done .checkin-day-label { color: #b8935a; }
.checkin-day.current .checkin-day-label { color: #ffc83c; }
.checkin-day.locked .checkin-day-label { color: #ccc; }
.checkin-day.bonus .checkin-day-label { color: #4ecdc4; font-size: 12px; font-weight: 700; letter-spacing: 0.5px; }
.checkin-day.bonus.done .checkin-day-label { color: #4ecdc4; font-size: 12px; font-weight: 700; }
.checkin-day.bonus.current .checkin-day-label { color: #4ecdc4; font-size: 13px; font-weight: 700; }
.checkin-day.bonus.locked .checkin-day-label { color: #3a9a94; font-size: 12px; font-weight: 700; }
.checkin-streak {
  font-size: 13px; color: #888; margin-bottom: 16px; min-height: 20px;
}
.checkin-claim-btn {
  width: 100%; padding: 12px; border-radius: 12px;
  border: 1.5px solid #f5a623; background: linear-gradient(135deg, rgba(245,166,35,0.15) 0%, rgba(245,166,35,0.05) 100%);
  color: #ffc83c; font-size: 16px; font-weight: 600; cursor: pointer;
  transition: all 0.2s; letter-spacing: 1px;
}
.checkin-claim-btn:hover { background: linear-gradient(135deg, rgba(245,166,35,0.25) 0%, rgba(245,166,35,0.1) 100%); }
.checkin-claim-btn:disabled { opacity: 0.35; cursor: not-allowed; border-color: #555; color: #666; background: rgba(255,255,255,0.03); }

.cover-enter-btn {
  --active: 0; --transition: 0.25s; --spark: 1.8s; --cut: 0.1em;
  --bg: radial-gradient(40% 50% at center 100%, hsl(270 calc(var(--active)*97%) 72% / var(--active)), transparent),
    radial-gradient(80% 100% at center 120%, hsl(260 calc(var(--active)*97%) 70% / var(--active)), transparent),
    hsl(260 calc(var(--active)*97%) calc((var(--active)*44%) + 12%));
  position: relative; border: 0; cursor: pointer;
  padding: 16px 44px; display: inline-flex; align-items: center; justify-content: center; gap: 0.5em;
  border-radius: 100px; font-size: 17px; font-weight: 600; letter-spacing: 3px; font-family: inherit;
  background: var(--bg);
  box-shadow: 0 0 calc(var(--active)*3em) calc(var(--active)*1em) hsl(260 97% 61% / 0.75),
    0 0 0 0 hsl(260 calc(var(--active)*97%) calc((var(--active)*50%) + 30%)) inset,
    0 -0.05em 0 0 hsl(260 calc(var(--active)*97%) calc(var(--active)*60%)) inset;
  transition: box-shadow var(--transition), scale var(--transition), background var(--transition);
  scale: calc(1 + (var(--active)*0.1));
  animation: fade-rise 0.8s ease-out 0.3s both;
}
.cover-enter-btn:is(:hover,:focus-visible) { --active: 1; }
.cover-enter-btn:active { scale: 1; }
.cover-enter-btn .hs-text {
  position: relative; z-index: 1;
  background: linear-gradient(90deg, hsl(0 0% calc((var(--active)*100%) + 72%)), hsl(0 0% calc((var(--active)*100%) + 42%)));
  -webkit-background-clip: text; background-clip: text; color: transparent;
  transition: background var(--transition);
}
.cover-enter-btn .hs-icon { position: relative; z-index: 1; }
.cover-enter-btn:before {
  content:""; position:absolute; inset:-0.2em; z-index:-1;
  border: 0.25em solid hsl(260 97% 50% / 0.5); border-radius: 100px;
  opacity: var(--active,0); transition: opacity var(--transition);
}
.cover-enter-btn .hs-spark {
  position:absolute; inset:0; border-radius:100px; rotate:0deg; overflow:hidden;
  -webkit-mask: linear-gradient(white, transparent 50%); mask: linear-gradient(white, transparent 50%);
  animation: hs-flip calc(var(--spark)*2) infinite steps(2,end);
}
@keyframes hs-flip { to { rotate: 360deg; } }
.cover-enter-btn .hs-spark:before {
  content:""; position:absolute; width:200%; aspect-ratio:1; top:0; left:50%; z-index:-1;
  translate:-50% -15%; transform: rotate(-90deg); opacity: calc(var(--active) + 0.4);
  background: conic-gradient(from 0deg, transparent 0 340deg, white 360deg);
  transition: opacity var(--transition); animation: hs-rotate var(--spark) linear infinite both;
}
.cover-enter-btn .hs-spark:after { content:""; position:absolute; inset:var(--cut); border-radius:100px; }
.cover-enter-btn .hs-backdrop { position:absolute; inset:var(--cut); background: var(--bg); border-radius:100px; transition: background var(--transition); }
@keyframes hs-rotate { to { transform: rotate(90deg); } }

@keyframes fade-rise {
  from { opacity: 0; transform: translateY(24px); }
  to   { opacity: 1; transform: translateY(0); }
}
@keyframes fade-down {
  from { opacity: 0; transform: translateY(-12px); }
  to   { opacity: 1; transform: translateY(0); }
}


/* Loading overlay */







.loading-star:nth-child(2) { animation-delay: 0.2s; }
.loading-star:nth-child(3) { animation-delay: 0.4s; }
.loading-star:nth-child(4) { animation-delay: 0.6s; }
.loading-star:nth-child(5) { animation-delay: 0.8s; }



@keyframes spin{to{transform:rotate(360deg)}}@keyframes cover-spin{to{transform:rotate(360deg)}}

#blackhole-btn { position:relative; display:flex; align-items:center; justify-content:center; border-radius:50%; background:transparent; }
#blackhole-btn .bh-loader { position:absolute; top:0; left:0; width:100%; aspect-ratio:1/1; border-radius:50%; background:transparent; animation:bh-rotate 2s linear infinite; z-index:0; }
#blackhole-btn .bh-letters { position:relative; z-index:1; font-size:14px; font-weight:700; color:#c084fc; display:flex; gap:1px; }
#blackhole-btn .bh-letters span { display:inline-block; opacity:0.4; animation:bh-letter 2s infinite; }
#blackhole-btn .bh-letters span:nth-child(1) { animation-delay:0s; }
#blackhole-btn .bh-letters span:nth-child(2) { animation-delay:0.15s; }
#blackhole-btn:hover .bh-letters span { opacity:1; color:#fff; }
@keyframes bh-rotate {
  0% { transform:rotate(90deg); box-shadow:0 5px 10px 0 #fff inset, 0 10px 15px 0 #ad5fff inset, 0 30px 30px 0 #471eec inset; }
  50% { transform:rotate(270deg); box-shadow:0 5px 10px 0 #fff inset, 0 10px 5px 0 #d60a47 inset, 0 20px 30px 0 #311e80 inset; }
  100% { transform:rotate(450deg); box-shadow:0 5px 10px 0 #fff inset, 0 10px 15px 0 #ad5fff inset, 0 30px 30px 0 #471eec inset; }
}
@keyframes bh-letter {
  0%,100% { opacity:0.4; transform:translateY(0); }
  20% { opacity:1; transform:scale(1.15); }
  40% { opacity:0.7; transform:translateY(0); }
}

/* ── Wormhole button (bottom-right) ── */
#wormhole-btn { position:relative; display:flex; align-items:center; justify-content:center; border-radius:50%; background:transparent; }
#wormhole-btn .wh-loader { position:absolute; top:0; left:0; width:100%; aspect-ratio:1/1; border-radius:50%; background:transparent; animation:wh-rotate 3s linear infinite; z-index:0; }
#wormhole-btn .wh-letters { position:relative; z-index:1; font-size:14px; font-weight:700; color:#f0a500; display:flex; gap:1px; }
#wormhole-btn .wh-letters span { display:inline-block; opacity:0.4; animation:wh-letter 3s infinite; }
#wormhole-btn .wh-letters span:nth-child(1) { animation-delay:0s; }
#wormhole-btn .wh-letters span:nth-child(2) { animation-delay:0.2s; }
#wormhole-btn:hover .wh-letters span { opacity:1; color:#ffd000; }
@keyframes wh-rotate {
  0% { transform:rotate(0deg); box-shadow:0 0 8px 0 rgba(240,165,0,0.4) inset, 0 0 12px 0 rgba(255,200,0,0.3) inset, 0 0 20px 0 rgba(240,140,0,0.2) inset; }
  50% { transform:rotate(180deg); box-shadow:0 0 15px 0 rgba(255,200,0,0.5) inset, 0 0 25px 0 rgba(240,165,0,0.4) inset, 0 0 35px 0 rgba(220,120,0,0.25) inset; }
  100% { transform:rotate(360deg); box-shadow:0 0 8px 0 rgba(240,165,0,0.4) inset, 0 0 12px 0 rgba(255,200,0,0.3) inset, 0 0 20px 0 rgba(240,140,0,0.2) inset; }
}
@keyframes wh-letter {
  0%,100% { opacity:0.4; transform:translateY(0); }
  20% { opacity:1; transform:scale(1.1); }
  40% { opacity:0.6; transform:translateY(0); }
}

.wh-qitem { transition: background 0.15s; }
.wh-qitem:hover { background: rgba(240,165,0,0.06) !important; }