/* ============================================================
 * 赛博朋克 2077 主题 + GameHub 卡片首页
 * 纯追加层：所有规则都 scoped 在 body[data-theme="cyber"] 下，
 * 不修改、不覆盖任何 Win98（classic）分支，互不影响。
 * ============================================================ */

/* ---------- 1. 调色板 ---------- */
:root {
  --cp-yellow:  #fcee0a;   /* CP2077 标志性黄 */
  --cp-cyan:    #00f0ff;   /* 霓虹青 */
  --cp-magenta: #ff003c;   /* 洋红警示 */
  --cp-bg0:     #06070c;
  --cp-bg1:     #0d1018;
  --cp-panel:   rgba(10, 14, 20, .88);
  --cp-panel2:  rgba(18, 24, 34, .92);
  --cp-line:    rgba(0, 240, 255, .28);
  --cp-line-2:  rgba(0, 240, 255, .12);
  --cp-text:    #dff4ff;
  --cp-dim:     #7f9cb3;
  --cp-ok:      #5ef2a0;
  --cp-cut:     14px;      /* 切角尺寸 */
}

body[data-theme="cyber"] {
  --bg:       #06070c;
  --orange:   #fcee0a;
  --yellow:   #fcee0a;
  --red:      #ff003c;
  --panel:    #0f1420;
  --title-a:  #10151f;
  --title-b:  #1b2330;
  --text:     #dff4ff;
  --line:     rgba(0, 240, 255, .22);
  --flw-sub:  #8fb0c6;
  color: var(--cp-text);
}

/* ---------- 2. 桌面背景：网格 + 霓虹光晕 + 扫描线 ---------- */
body[data-theme="cyber"] #desktop {
  background-color: var(--cp-bg0) !important;
  background-image:
    radial-gradient(1200px 620px at 10% -12%, rgba(0, 240, 255, .20), transparent 62%),
    radial-gradient(980px  540px at 108% 108%, rgba(255, 0, 60, .18), transparent 62%),
    repeating-linear-gradient(0deg,  rgba(0, 240, 255, .055) 0 1px, transparent 1px 46px),
    repeating-linear-gradient(90deg, rgba(0, 240, 255, .055) 0 1px, transparent 1px 46px) !important;
}
/* 扫描线 + 暗角（覆盖在内容之上，但不吃点击） */
body[data-theme="cyber"] #desktop::after {
  content: '';
  position: fixed; inset: 0; z-index: 2; pointer-events: none;
  background:
    repeating-linear-gradient(0deg, rgba(0, 0, 0, .20) 0 1px, transparent 1px 3px),
    radial-gradient(120% 100% at 50% 50%, transparent 55%, rgba(0, 0, 0, .55) 100%);
  opacity: .55;
}

/* ---------- 3. 主题切换按钮（右上角） ---------- */
#theme-toggle {
  position: fixed; z-index: 300; cursor: pointer;
  top: calc(10px + env(safe-area-inset-top)); right: 10px;
  font-family: inherit; font-size: 12px; line-height: 1;
  padding: 7px 10px;
  border: 1px solid; border-color: #fff #000 #000 #fff;
  background: var(--panel); color: #000;
}
#theme-toggle:active { border-color: #000 #fff #fff #000; }

body[data-theme="cyber"] #theme-toggle {
  border: 1px solid var(--cp-cyan);
  background: linear-gradient(180deg, rgba(0, 240, 255, .16), rgba(0, 240, 255, .05));
  color: var(--cp-cyan);
  letter-spacing: 1px; text-transform: uppercase; font-weight: 700;
  padding: 8px 12px;
  clip-path: polygon(0 0, 100% 0, 100% calc(100% - 8px), calc(100% - 8px) 100%, 0 100%);
  box-shadow: 0 0 12px rgba(0, 240, 255, .28);
  transition: box-shadow .18s, color .18s, background .18s;
}
body[data-theme="cyber"] #theme-toggle:hover {
  color: #06121a; background: var(--cp-cyan);
  box-shadow: 0 0 20px rgba(0, 240, 255, .65);
}

/* ---------- 4. 窗口：切角玻璃 + 黄色标题条 ---------- */
body[data-theme="cyber"] .win {
  background: var(--cp-panel);
  color: var(--cp-text);
  border: 1px solid var(--cp-line);
  border-radius: 0;
  box-shadow: 0 0 0 1px rgba(0, 240, 255, .10), 0 26px 64px rgba(0, 0, 0, .68);
  clip-path: polygon(0 0, calc(100% - var(--cp-cut)) 0, 100% var(--cp-cut), 100% 100%, var(--cp-cut) 100%, 0 calc(100% - var(--cp-cut)));
  backdrop-filter: blur(6px);
}
body[data-theme="cyber"] .win-title {
  background: linear-gradient(90deg, #0e1420, #18202e);
  color: var(--cp-yellow);
  border-bottom: 1px solid var(--cp-line);
  padding: 7px 8px;
  letter-spacing: 1px;
  font-size: 12px;
  position: relative;
}
body[data-theme="cyber"] .win-title::before {
  content: ''; position: absolute; left: 0; top: 0; bottom: 0; width: 3px;
  background: var(--cp-yellow); box-shadow: 0 0 8px rgba(252, 238, 10, .65);
}
body[data-theme="cyber"] .win-btn {
  width: 24px; height: 20px;
  border: 1px solid var(--cp-line);
  background: #10161f; color: var(--cp-cyan);
  font-size: 11px;
}
body[data-theme="cyber"] .win-btn:hover { background: rgba(0, 240, 255, .18); color: #fff; }
body[data-theme="cyber"] .win-body {
  background: transparent;
  color: var(--cp-text);
}

/* ---------- 5. 窗口内通用件 ---------- */
body[data-theme="cyber"] .pad { font-size: 13px; }
body[data-theme="cyber"] hr { border-top: 1px solid var(--cp-line-2); }
body[data-theme="cyber"] .hint,
body[data-theme="cyber"] .pc-sub,
body[data-theme="cyber"] .ach-desc,
body[data-theme="cyber"] .help-sub,
body[data-theme="cyber"] .dos-upload-hint,
body[data-theme="cyber"] .vview,
body[data-theme="cyber"] .cam-row-label,
body[data-theme="cyber"] .cam-status,
body[data-theme="cyber"] .paint-status,
body[data-theme="cyber"] .tang-statusbar { color: var(--cp-dim) !important; }

body[data-theme="cyber"] .loading,
body[data-theme="cyber"] .empty { color: var(--cp-dim); }

body[data-theme="cyber"] .btn,
body[data-theme="cyber"] .help-btn,
body[data-theme="cyber"] .help-link-input,
body[data-theme="cyber"] .pc-ach-btn,
body[data-theme="cyber"] .ach-prog {
  border: 1px solid var(--cp-line) !important;
  background: var(--cp-panel2) !important;
  color: var(--cp-yellow) !important;
  letter-spacing: .5px;
}
body[data-theme="cyber"] .btn:hover,
body[data-theme="cyber"] .help-btn:hover,
body[data-theme="cyber"] .pc-ach-btn:hover { background: rgba(0, 240, 255, .16) !important; }
body[data-theme="cyber"] .help-link-input { color: var(--cp-cyan) !important; }

body[data-theme="cyber"] .kv,
body[data-theme="cyber"] .ritem { border-bottom: 1px dotted rgba(0, 240, 255, .22) !important; }
body[data-theme="cyber"] .avatar { border: 1px solid var(--cp-cyan); background: #0d1219; }
body[data-theme="cyber"] .pc-name,
body[data-theme="cyber"] .ach-name,
body[data-theme="cyber"] .rname,
body[data-theme="cyber"] .vtitle { color: #fff; }
body[data-theme="cyber"] .ach-pts,
body[data-theme="cyber"] .rscore { color: var(--cp-magenta); }
body[data-theme="cyber"] .rrank { color: var(--cp-yellow); }
body[data-theme="cyber"] .rank-me {
  background: rgba(252, 238, 10, .10) !important;
  border: 1px solid rgba(252, 238, 10, .45) !important;
  color: var(--cp-yellow) !important;
}

/* 成就墙 */
body[data-theme="cyber"] .ach-item {
  background: var(--cp-panel2) !important;
  border: 1px solid var(--cp-line-2) !important;
}
body[data-theme="cyber"] .ach-item.on {
  background: rgba(252, 238, 10, .10) !important;
  border-color: rgba(252, 238, 10, .5) !important;
}
body[data-theme="cyber"] .ach-item.locked { opacity: .45; filter: grayscale(.7); }

/* 视频列表 / 门禁 / 帮助 */
body[data-theme="cyber"] .vitem {
  background: var(--cp-panel2) !important; border: 1px solid var(--cp-line-2) !important;
}
body[data-theme="cyber"] .vitem:hover { border-color: var(--cp-cyan) !important; }
body[data-theme="cyber"] .vpic { background: #0b0f16; }
body[data-theme="cyber"] .big { color: #fff; }
body[data-theme="cyber"] .help-header { border-bottom: 1px solid var(--cp-line) !important; }
body[data-theme="cyber"] .help-icon {
  background: linear-gradient(180deg, #00f0ff, #086a8a) !important; border-color: var(--cp-line) !important; color: #04121a !important;
}
body[data-theme="cyber"] .help-section-title { border-left-color: var(--cp-yellow) !important; }
body[data-theme="cyber"] .help-desc,
body[data-theme="cyber"] .dos-upload-text { color: #b9d6e6 !important; }
body[data-theme="cyber"] .qr { border-color: var(--cp-line); background: #06090f; }

/* 子程序外壳（DOS / 画图 / 拍照 / 计算器 / 唐诗）*/
body[data-theme="cyber"] .dos-wrap,
body[data-theme="cyber"] .paint-wrap,
body[data-theme="cyber"] .cam-wrap,
body[data-theme="cyber"] .calc-win98,
body[data-theme="cyber"] .tang-wrap { background: var(--cp-bg1) !important; color: var(--cp-text) !important; }
body[data-theme="cyber"] .dos-wrap *,
body[data-theme="cyber"] .paint-wrap *,
body[data-theme="cyber"] .cam-wrap *,
body[data-theme="cyber"] .calc-win98 *,
body[data-theme="cyber"] .tang-wrap * { color: inherit; }
body[data-theme="cyber"] .dos-bar,
body[data-theme="cyber"] .paint-toolbar,
body[data-theme="cyber"] .paint-status,
body[data-theme="cyber"] .cam-toolbar,
body[data-theme="cyber"] .cam-bar,
body[data-theme="cyber"] .cam-status,
body[data-theme="cyber"] .tang-menubar,
body[data-theme="cyber"] .tang-toolbar,
body[data-theme="cyber"] .tang-statusbar {
  background: #0c121b !important;
  border-color: var(--cp-line-2) !important;
}
body[data-theme="cyber"] .dos-btn,
body[data-theme="cyber"] .paint-btn,
body[data-theme="cyber"] .cam-btn,
body[data-theme="cyber"] .cam-chip,
body[data-theme="cyber"] .tang-tb-btn,
body[data-theme="cyber"] .tang-nav-btn {
  background: var(--cp-panel2) !important;
  border: 1px solid var(--cp-line) !important;
  color: var(--cp-cyan) !important;
}
body[data-theme="cyber"] .paint-btn.active,
body[data-theme="cyber"] .cam-chip.active,
body[data-theme="cyber"] .tang-tb-btn:hover,
body[data-theme="cyber"] .tang-nav-btn:hover { background: rgba(0, 240, 255, .18) !important; }
body[data-theme="cyber"] .paint-btn.paint-save-btn,
body[data-theme="cyber"] .cam-chip.active { border-color: var(--cp-yellow) !important; color: var(--cp-yellow) !important; }
body[data-theme="cyber"] .dos-fname,
body[data-theme="cyber"] .calc-win98-disp-text { color: var(--cp-cyan) !important; }
body[data-theme="cyber"] .calc-win98-display {
  background: #06090f !important; border-color: var(--cp-line) !important;
}
body[data-theme="cyber"] .calc-win98-key {
  background: var(--cp-panel2) !important; border: 1px solid var(--cp-line) !important; color: var(--cp-text) !important;
}
body[data-theme="cyber"] .calc-win98-key:hover { background: rgba(0, 240, 255, .16) !important; }
body[data-theme="cyber"] .calc-win98-key-calc-r { color: var(--cp-magenta) !important; }
body[data-theme="cyber"] .calc-win98-key-calc-b { color: var(--cp-yellow) !important; }
body[data-theme="cyber"] .tang-page,
body[data-theme="cyber"] .dos-upload {
  background: #0b0f16 !important; border-color: var(--cp-line) !important; color: var(--cp-text) !important;
}
body[data-theme="cyber"] .dos-msg { background: rgba(0, 240, 255, .10) !important; border-color: var(--cp-line) !important; color: var(--cp-cyan) !important; }
body[data-theme="cyber"] .dos-msg.err { background: rgba(255, 0, 60, .12) !important; border-color: rgba(255, 0, 60, .5) !important; color: #ff8098 !important; }

/* 电子宠物 / 迷宫 / Winamp 底色 */
body[data-theme="cyber"] .pet-wrap { background: var(--cp-bg1) !important; }
body[data-theme="cyber"] .pet-stat,
body[data-theme="cyber"] .pet-msg,
body[data-theme="cyber"] .pet-exp,
body[data-theme="cyber"] .pet-exp b { color: var(--cp-dim) !important; }
body[data-theme="cyber"] .pet-name { color: #fff !important; }
body[data-theme="cyber"] .pet-btn {
  background: var(--cp-panel2) !important; border: 1px solid var(--cp-line) !important; color: var(--cp-cyan) !important;
}
body[data-theme="cyber"] .pet-btn:hover { background: rgba(0, 240, 255, .16) !important; }
body[data-theme="cyber"] .pet-bar { background: #10161f !important; border-color: var(--cp-line) !important; }
body[data-theme="cyber"] .pet-bar i { background: linear-gradient(90deg, #00f0ff, #5ef2a0) !important; }
body[data-theme="cyber"] .pet-dex-item { background: var(--cp-panel2) !important; border-color: var(--cp-line) !important; }
body[data-theme="cyber"] .pet-dex-name { color: #fff !important; }
body[data-theme="cyber"] .maze-wrap { background: #060910 !important; }

/* ---------- 6. 任务栏 / 开始菜单 / toast ---------- */
body[data-theme="cyber"] #taskbar {
  background: rgba(7, 9, 15, .92) !important;
  border-top: 1px solid var(--cp-line) !important;
  backdrop-filter: blur(8px);
}
body[data-theme="cyber"] #start-btn,
body[data-theme="cyber"] .task-win,
body[data-theme="cyber"] #clock {
  background: #0c121b !important;
  border: 1px solid var(--cp-line) !important;
  color: var(--cp-cyan) !important;
}
body[data-theme="cyber"] #start-btn { color: var(--cp-yellow) !important; letter-spacing: 1px; }
body[data-theme="cyber"] #clock { display: none !important; }
body[data-theme="cyber"] #start-btn:hover,
body[data-theme="cyber"] .task-win:hover { background: rgba(0, 240, 255, .16) !important; }
body[data-theme="cyber"] .task-win.active { background: rgba(252, 238, 10, .18) !important; border-color: var(--cp-yellow) !important; color: var(--cp-yellow) !important; }
body[data-theme="cyber"] #startmenu {
  background: rgba(9, 12, 18, .96) !important;
  border: 1px solid var(--cp-line) !important;
  backdrop-filter: blur(8px);
}
body[data-theme="cyber"] .start-item { color: var(--cp-text) !important; }
body[data-theme="cyber"] .start-item:hover {
  background: linear-gradient(90deg, rgba(252, 238, 10, .92), rgba(255, 208, 0, .75)) !important;
  color: #0a0c10 !important;
}
body[data-theme="cyber"] #toast {
  background: rgba(7, 9, 15, .95) !important;
  border: 1px solid var(--cp-cyan) !important;
  color: var(--cp-cyan) !important;
  border-radius: 0 !important;
  box-shadow: 0 0 16px rgba(0, 240, 255, .35);
}

/* ---------- 7. GameHub 卡片首页 ---------- */
#hub { min-height: 100%; }
.hub-wrap {
  max-width: 1180px; margin: 0 auto;
  padding: 76px 22px 48px;
  position: relative; z-index: 3;
}

/* Hero */
.hub-hero { margin-bottom: 26px; }
.hub-kicker {
  font-size: 11px; letter-spacing: 4px; text-transform: uppercase;
  color: var(--cp-cyan); margin-bottom: 10px;
}
.hub-brand {
  font-size: 38px; font-weight: 800; letter-spacing: 1px; line-height: 1.25;
  color: #fff; margin: 0 0 6px;
}
.hub-brand span {
  display: inline-block; background: var(--cp-yellow); color: #0a0c10;
  padding: 2px 14px 4px; margin-right: 6px;
  clip-path: polygon(0 0, 100% 0, calc(100% - 16px) 100%, 0 100%);
}
.hub-sub { font-size: 12px; color: var(--cp-dim); letter-spacing: 1px; margin-top: 10px; }
.hub-stats { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 14px; }
.hub-stat {
  font-size: 11px; letter-spacing: 1px; color: var(--cp-cyan);
  border: 1px solid var(--cp-line); background: rgba(0, 240, 255, .06);
  padding: 4px 10px;
  clip-path: polygon(0 0, calc(100% - 8px) 0, 100% 8px, 100% 100%, 8px 100%, 0 calc(100% - 8px));
}
.hub-stat b { color: var(--cp-yellow); font-size: 13px; margin-right: 4px; }

/* 选项卡 */
.hub-tabs { display: flex; flex-wrap: wrap; gap: 8px; margin-bottom: 18px; }
.hub-tab {
  cursor: pointer; font-size: 12px; letter-spacing: 2px;
  padding: 8px 16px; color: var(--cp-dim);
  background: rgba(12, 18, 27, .8);
  border: 1px solid var(--cp-line-2);
  clip-path: polygon(0 0, calc(100% - 10px) 0, 100% 10px, 100% 100%, 10px 100%, 0 calc(100% - 10px));
  transition: color .16s, background .16s, border-color .16s;
}
.hub-tab:hover { color: #fff; border-color: var(--cp-cyan); }
.hub-tab.active {
  color: #0a0c10; background: var(--cp-yellow); border-color: var(--cp-yellow); font-weight: 700;
  box-shadow: 0 0 18px rgba(252, 238, 10, .35);
}

/* 玩家状态 + 每日任务（赛博首页粘性） */
.daily-block {
  display: grid;
  grid-template-columns: 1fr 1.4fr;
  gap: 14px;
  margin: 0 0 22px;
}
.daily-card {
  position: relative;
  background: linear-gradient(160deg, rgba(18, 25, 36, .92), rgba(8, 11, 17, .92));
  border: 1px solid var(--cp-line);
  padding: 16px 18px 18px;
  clip-path: polygon(0 0, calc(100% - var(--cp-cut)) 0, 100% var(--cp-cut), 100% 100%, var(--cp-cut) 100%, 0 calc(100% - var(--cp-cut)));
}
.daily-card::before {
  content: ''; position: absolute; left: 0; top: 0; height: 2px; width: 56px;
  background: var(--cp-cyan); box-shadow: 0 0 10px rgba(0, 240, 255, .8);
}
.daily-card.quest::before { background: var(--cp-yellow); box-shadow: 0 0 10px rgba(252, 238, 10, .8); }
.daily-kicker {
  font-size: 10px; letter-spacing: 3px; text-transform: uppercase;
  color: var(--cp-cyan); margin-bottom: 4px;
}
.daily-card.quest .daily-kicker { color: var(--cp-yellow); }
.daily-title {
  font-size: 22px; font-weight: 800; color: #fff;
  letter-spacing: 1px; margin: 0 0 12px;
  display: flex; align-items: baseline; justify-content: space-between; gap: 8px;
}
.daily-energy-num { font-size: 16px; color: var(--cp-yellow); font-weight: 700; letter-spacing: 1px; }
.daily-energy-num b { font-size: 22px; color: #fff; margin-right: 2px; }
.daily-bar {
  position: relative;
  height: 8px;
  background:
    repeating-linear-gradient(135deg, rgba(0, 240, 255, .15) 0 6px, transparent 6px 12px),
    #0a121d;
  border: 1px solid var(--cp-line);
  overflow: hidden;
}
.daily-bar i {
  display: block; height: 100%; width: 0%;
  background: linear-gradient(90deg, var(--cp-cyan), var(--cp-yellow));
  box-shadow: 0 0 12px rgba(0, 240, 255, .55);
  transition: width .35s ease;
}
.daily-tip {
  margin-top: 10px; font-size: 12px; color: var(--cp-dim); line-height: 1.5;
  min-height: 18px;
}
.daily-tip b { color: var(--cp-text); font-weight: 600; }
.daily-tip.done { color: var(--cp-ok); }

/* 任务列表 */
.daily-quest {
  display: flex; align-items: center; gap: 12px;
  padding: 9px 4px;
  border-bottom: 1px dashed rgba(0, 240, 255, .14);
  font-size: 13px; color: var(--cp-text);
  cursor: pointer;
}
.daily-quest:hover .qname { color: #fff; }
.daily-quest:last-child { border-bottom: 0; }
.daily-quest input { display: none; }
.daily-quest .ck {
  flex: none; width: 18px; height: 18px;
  border: 1px solid var(--cp-line); background: rgba(0, 240, 255, .06);
  display: inline-flex; align-items: center; justify-content: center;
  clip-path: polygon(0 0, calc(100% - 4px) 0, 100% 4px, 100% 100%, 4px 100%, 0 calc(100% - 4px));
  transition: background .18s, border-color .18s, box-shadow .18s;
  cursor: pointer;
}
.daily-quest .ck::after {
  content: ''; width: 9px; height: 5px;
  border-left: 2px solid var(--cp-yellow);
  border-bottom: 2px solid var(--cp-yellow);
  transform: rotate(-45deg) translate(1px, -2px);
  opacity: 0;
  transition: opacity .18s;
}
.daily-quest.done .ck { background: rgba(94, 242, 160, .15); border-color: var(--cp-ok); box-shadow: 0 0 8px rgba(94, 242, 160, .35); }
.daily-quest.done .ck::after { border-color: var(--cp-ok); opacity: 1; }

/* 任务行里的机种图标 */
.daily-quest .qico {
  flex: none; width: 22px; height: 22px;
  display: inline-flex; align-items: center; justify-content: center;
  opacity: .95;
  filter: drop-shadow(0 0 4px rgba(0, 240, 255, .35));
  transition: filter .18s, opacity .18s;
}
.daily-quest .qico svg { width: 22px; height: 22px; display: block; }
.daily-quest.done .qico { opacity: .45; filter: grayscale(1); }

.daily-quest .qname { flex: 1 1 auto; display: flex; flex-direction: column; gap: 1px; }
.daily-quest .qhint {
  font-style: normal; font-size: 11px; color: var(--cp-dim); letter-spacing: .5px;
}
.daily-quest.done .qname { color: var(--cp-dim); text-decoration: line-through; }

/* 「今日机种」标题右侧的随机说明 */
.daily-reset {
  font-size: 10px; letter-spacing: 2px; color: var(--cp-dim);
  border: 1px solid var(--cp-line-2); padding: 2px 7px;
}
.daily-quest .pts {
  flex: none;
  font-size: 11px; font-weight: 700; letter-spacing: 1px;
  color: var(--cp-cyan);
  border: 1px solid var(--cp-line);
  padding: 2px 8px;
}
.daily-quest.done .pts { color: var(--cp-dim); border-color: var(--cp-line-2); }

/* 任务全部完成后切黄边庆祝 */
.daily-block.all-done .daily-card.quest { box-shadow: 0 0 24px rgba(252, 238, 10, .18); }

@media (max-width: 720px) {
  .daily-block { grid-template-columns: 1fr; }
}

/* 卡片网格 */
.hub-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(196px, 1fr));
  gap: 14px;
}
.hub-card {
  position: relative; text-align: left; cursor: pointer; overflow: hidden;
  padding: 16px 14px 14px;
  background: linear-gradient(160deg, rgba(18, 25, 36, .92), rgba(8, 11, 17, .92));
  border: 1px solid var(--cp-line-2);
  color: var(--cp-text);
  clip-path: polygon(0 0, calc(100% - var(--cp-cut)) 0, 100% var(--cp-cut), 100% 100%, var(--cp-cut) 100%, 0 calc(100% - var(--cp-cut)));
  transition: transform .18s ease, border-color .18s ease, box-shadow .18s ease;
}
.hub-card::before {  /* 顶部霓虹细条 */
  content: ''; position: absolute; left: 0; top: 0; height: 2px; width: 42px;
  background: var(--cp-cyan); box-shadow: 0 0 10px rgba(0, 240, 255, .8);
  transition: width .22s ease;
}
.hub-card:hover,
.hub-card:focus-visible {
  transform: translateY(-3px);
  border-color: var(--cp-cyan);
  box-shadow: 0 0 0 1px rgba(0, 240, 255, .28), 0 14px 34px rgba(0, 240, 255, .16);
  outline: none;
}
.hub-card:hover::before { width: 100%; }
.hub-card:active { transform: translateY(-1px); }

.hub-ico {
  width: 48px; height: 48px; margin-bottom: 12px; display: block;
  filter: drop-shadow(0 0 6px rgba(0, 240, 255, .55));
}
.hub-ico svg { width: 100%; height: 100%; }
.hub-name {
  font-size: 14px; font-weight: 700; color: #fff;
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis; margin-bottom: 4px;
}
.hub-desc {
  font-size: 11px; color: var(--cp-dim); line-height: 1.5; min-height: 32px;
}
.hub-foot { display: flex; align-items: center; gap: 6px; margin-top: 10px; }
.hub-tag {
  font-size: 10px; letter-spacing: 1px; padding: 2px 7px;
  border: 1px solid rgba(252, 238, 10, .45); color: var(--cp-yellow);
  background: rgba(252, 238, 10, .08);
}
.hub-tag.emu { border-color: rgba(0, 240, 255, .45); color: var(--cp-cyan); background: rgba(0, 240, 255, .08); }
.hub-tag.lock { border-color: rgba(255, 0, 60, .5); color: #ff6a86; background: rgba(255, 0, 60, .10); }
.hub-go { margin-left: auto; font-size: 15px; color: var(--cp-cyan); opacity: .55; }
.hub-card:hover .hub-go { opacity: 1; }
.hub-empty { color: var(--cp-dim); font-size: 12px; padding: 24px 4px; }

/* ---------- 8. 移动端适配 ---------- */
@media (max-width: 768px) {
  .hub-wrap { padding: 64px 14px 40px; }
  .hub-brand { font-size: 26px; }
  .hub-grid { grid-template-columns: repeat(auto-fill, minmax(150px, 1fr)); gap: 10px; }
  .hub-card { padding: 12px 10px 11px; }
  .hub-ico { width: 40px; height: 40px; margin-bottom: 9px; }
  .hub-name { font-size: 13px; }
  .hub-desc { min-height: 0; font-size: 10px; }
}

/* 移动端若仍显示 S60 界面（classic 主题），赛博不影响；这里只处理同主题下的观感 */
body[data-theme="cyber"] #lock { background: var(--cp-bg0); }

/* ---------- 9. 确认弹层：霓虹切角卡片 ---------- */
body[data-theme="cyber"] #confirm {
  background: rgba(3, 6, 10, .74);
  backdrop-filter: blur(3px);
}
body[data-theme="cyber"] .cf-card {
  background: var(--cp-panel2);
  color: var(--cp-text);
  border: 1px solid var(--cp-line);
  box-shadow: 0 0 28px rgba(0, 240, 255, .22), 0 24px 60px rgba(0, 0, 0, .72);
  clip-path: polygon(0 0, calc(100% - var(--cp-cut)) 0, 100% var(--cp-cut), 100% 100%, var(--cp-cut) 100%, 0 calc(100% - var(--cp-cut)));
  animation: cfPop .18s cubic-bezier(.2, .9, .3, 1.2) both;
}
body[data-theme="cyber"] .cf-head {
  background: linear-gradient(90deg, #0e1420, #1b2330);
  color: var(--cp-yellow);
  border-bottom: 1px solid var(--cp-line);
  padding: 8px 12px; letter-spacing: 1.5px; text-transform: uppercase;
}
body[data-theme="cyber"] .cf-body { padding: 16px 14px 4px; font-size: 12.5px; line-height: 1.8; }
body[data-theme="cyber"] .cf-body b { color: var(--cp-cyan); }
body[data-theme="cyber"] .cf-dim { color: var(--cp-dim); }
/* 注意：第 5 节的通用按钮规则带 !important，这里必须同步加，否则主按钮看不出主次 */
body[data-theme="cyber"] .cf-foot .btn {
  border: 1px solid var(--cp-line) !important;
  background: rgba(0, 240, 255, .06) !important;
  color: var(--cp-text) !important;
  letter-spacing: 1px; font-weight: 700;
  padding: 9px 14px;
  clip-path: polygon(0 0, 100% 0, 100% calc(100% - 8px), calc(100% - 8px) 100%, 0 100%);
  transition: background .16s, color .16s, box-shadow .16s;
}
body[data-theme="cyber"] .cf-foot .btn:hover { background: rgba(0, 240, 255, .16) !important; box-shadow: 0 0 14px rgba(0, 240, 255, .3); }
body[data-theme="cyber"] .cf-foot .cf-ok {
  background: var(--cp-yellow) !important; border-color: var(--cp-yellow) !important; color: #06121a !important;
  box-shadow: 0 0 18px rgba(252, 238, 10, .32);
}
body[data-theme="cyber"] .cf-foot .cf-ok:hover { background: #fff64a !important; color: #06121a !important; box-shadow: 0 0 26px rgba(252, 238, 10, .6); }
body[data-theme="cyber"] .cf-foot .cf-cancel { color: var(--cp-dim) !important; }
@media (max-width: 768px) {
  body[data-theme="cyber"] .cf-card { width: min(320px, 100%); }
  body[data-theme="cyber"] .cf-body { font-size: 13px; }
}