/* =========================================================
   Jerry 小窝 · 导航台（单屏 + 上滑抽屉）
   与 index.html 共用同一套设计语言，但布局独立
   ========================================================= */

:root {
  --bg: #05050a;
  --bg-2: #0a0a14;
  --fg: #f4f5fb;
  --fg-soft: #dbdeee;
  --muted: #a3a9c0;
  --muted-2: #6d7390;

  --line: rgba(255, 255, 255, 0.10);
  --line-soft: rgba(255, 255, 255, 0.06);

  --glass-bg: rgba(255, 255, 255, 0.045);
  --glass-bg-2: rgba(255, 255, 255, 0.08);
  --glass-brd: rgba(255, 255, 255, 0.11);
  --glass-hi: rgba(255, 255, 255, 0.16);

  --c1: #22d3ee;
  --c2: #7c5cff;
  --c3: #ff2e9a;
  --c4: #ffd166;
  --c5: #7cffb2;

  --grad-main: linear-gradient(100deg, #22d3ee 0%, #7c5cff 30%, #ff2e9a 58%, #ffd166 82%, #22d3ee 100%);

  --shadow-panel: 0 -30px 90px -30px rgba(0, 0, 0, 0.9), 0 20px 60px -30px rgba(0, 0, 0, 0.8);

  --ease: cubic-bezier(0.22, 1, 0.36, 1);
  --ease-out: cubic-bezier(0.16, 1, 0.3, 1);
  --ease-io: cubic-bezier(0.65, 0, 0.35, 1);

  --ff: "PingFang SC", "HarmonyOS Sans SC", "MiSans", "Source Han Sans SC",
        "Microsoft YaHei", "Noto Sans SC", system-ui, -apple-system,
        "Segoe UI", Roboto, "Helvetica Neue", sans-serif;
  --ff-mono: ui-monospace, "SF Mono", "JetBrains Mono", "Cascadia Code",
        Consolas, "Liberation Mono", monospace;

  --drawer-h: min(88svh, 780px);
}

html[data-theme="light"] {
  --bg: #f5f6fc;
  --bg-2: #ebeef8;
  --fg: #101220;
  --fg-soft: #2a2e40;
  --muted: #565c75;
  --muted-2: #7a8099;

  --line: rgba(16, 20, 40, 0.12);
  --line-soft: rgba(16, 20, 40, 0.07);

  --glass-bg: rgba(255, 255, 255, 0.62);
  --glass-bg-2: rgba(255, 255, 255, 0.85);
  --glass-brd: rgba(16, 20, 40, 0.10);
  --glass-hi: rgba(255, 255, 255, 0.92);

  --c1: #0b93ad;
  --c2: #5a3ce2;
  --c3: #d4177f;
  --c4: #b57d00;
  --c5: #1f9d63;

  --grad-main: linear-gradient(100deg, #0b93ad 0%, #5a3ce2 30%, #d4177f 58%, #b57d00 82%, #0b93ad 100%);
  --shadow-panel: 0 -30px 90px -34px rgba(30, 40, 80, 0.35);
}

*, *::before, *::after { box-sizing: border-box; }

html, body {
  height: 100%;
  margin: 0;
}

body {
  background: var(--bg);
  color: var(--fg);
  font-family: var(--ff);
  font-size: 16px;
  line-height: 1.7;
  overflow: hidden;              /* 单屏：页面本身不滚动 */
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  transition: background-color 0.5s var(--ease), color 0.5s var(--ease);
}

body.has-custom-cursor,
body.has-custom-cursor a,
body.has-custom-cursor button { cursor: none; }

a { color: inherit; text-decoration: none; }
button { font: inherit; color: inherit; border: 0; background: none; cursor: pointer; }
::selection { background: rgba(255, 46, 154, 0.38); color: #fff; }

:focus-visible {
  outline: 2px solid var(--c1);
  outline-offset: 3px;
  border-radius: 8px;
}

::-webkit-scrollbar { width: 8px; }
::-webkit-scrollbar-track { background: transparent; }
::-webkit-scrollbar-thumb {
  background: linear-gradient(var(--c2), var(--c1));
  border-radius: 99px;
  border: 2px solid transparent;
  background-clip: padding-box;
}

/* ---------- 背景 ---------- */
#bg {
  position: fixed;
  inset: 0;
  width: 100%;
  height: 100%;
  z-index: 0;
  pointer-events: none;
  opacity: 0.9;
}

.aurora {
  position: fixed;
  inset: -14%;
  z-index: 0;
  pointer-events: none;
  opacity: 0.62;
  contain: strict;
}

.blob {
  position: absolute;
  display: block;
  border-radius: 50%;
  will-change: transform;
}

.b1 {
  width: 58vw; height: 58vw; max-width: 760px; max-height: 760px;
  left: -16vw; top: -20vw;
  background: radial-gradient(circle at 40% 38%, rgba(34, 211, 238, 0.60), rgba(34, 211, 238, 0) 66%);
  animation: drift1 26s var(--ease-io) infinite alternate;
}

.b2 {
  width: 52vw; height: 52vw; max-width: 700px; max-height: 700px;
  right: -16vw; top: 2vh;
  background: radial-gradient(circle at 56% 42%, rgba(124, 92, 255, 0.62), rgba(124, 92, 255, 0) 66%);
  animation: drift2 33s var(--ease-io) infinite alternate;
}

.b3 {
  width: 46vw; height: 46vw; max-width: 620px; max-height: 620px;
  left: 24vw; bottom: -22vw;
  background: radial-gradient(circle at 50% 50%, rgba(255, 46, 154, 0.48), rgba(255, 46, 154, 0) 68%);
  animation: drift3 29s var(--ease-io) infinite alternate;
}

html[data-theme="light"] .aurora { opacity: 0.34; }

@keyframes drift1 { to { transform: translate3d(8vw, 6vh, 0) scale(1.15); } }
@keyframes drift2 { to { transform: translate3d(-7vw, 11vh, 0) scale(1.1); } }
@keyframes drift3 { to { transform: translate3d(5vw, -9vh, 0) scale(1.17); } }

.noise {
  position: fixed;
  inset: 0;
  z-index: 3;
  pointer-events: none;
  opacity: 0.035;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='160' height='160'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.85' numOctaves='2' stitchTiles='stitch'/%3E%3CfeColorMatrix type='saturate' values='0'/%3E%3C/filter%3E%3Crect width='160' height='160' filter='url(%23n)'/%3E%3C/svg%3E");
}

html[data-theme="light"] .noise { opacity: 0.025; }

/* ---------- 光标 ---------- */
.cursor-dot, .cursor-ring {
  position: fixed;
  top: 0; left: 0;
  z-index: 9999;
  pointer-events: none;
  border-radius: 50%;
  opacity: 0;
  transition: opacity 0.3s linear;
}

.cursor-dot {
  width: 6px; height: 6px;
  margin: -3px 0 0 -3px;
  background: #fff;
  box-shadow: 0 0 12px 2px rgba(124, 92, 255, 0.9);
  will-change: transform;
}

.cursor-ring {
  width: 34px; height: 34px;
  margin: -17px 0 0 -17px;
  border: 1px solid rgba(255, 255, 255, 0.5);
  transition: width 0.3s var(--ease), height 0.3s var(--ease),
              margin 0.3s var(--ease), border-color 0.3s var(--ease),
              background-color 0.3s var(--ease), opacity 0.3s linear;
  will-change: transform;
}

.cursor-ring.hover {
  width: 54px; height: 54px;
  margin: -27px 0 0 -27px;
  border-color: rgba(255, 46, 154, 0.8);
  background: rgba(255, 46, 154, 0.08);
}

/* ---------- 顶栏 ---------- */
.topbar {
  position: fixed;
  top: 0; left: 0; right: 0;
  z-index: 60;
  height: 66px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 0 clamp(16px, 4vw, 36px);
}

.brand { display: inline-flex; align-items: center; gap: 9px; }

.brand-mark { display: grid; place-items: center; transition: transform 0.5s var(--ease); }
.brand:hover .brand-mark { transform: rotate(-8deg) scale(1.08); }

.brand-text {
  font-size: 0.95rem;
  font-weight: 800;
  background: var(--grad-main);
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
}

.top-right { display: flex; align-items: center; gap: 12px; }

.clock, .clock-date {
  font-family: var(--ff-mono);
  font-size: 0.74rem;
  letter-spacing: 0.12em;
  color: var(--muted-2);
}

.clock { color: var(--muted); font-variant-numeric: tabular-nums; }

.clock-sep { width: 1px; height: 12px; background: var(--line); }

.theme-toggle {
  position: relative;
  width: 34px; height: 34px;
  display: grid;
  place-items: center;
  border-radius: 50%;
  border: 1px solid var(--line);
  background: var(--glass-bg);
  backdrop-filter: blur(6px);
  -webkit-backdrop-filter: blur(6px);
  transition: transform 0.4s var(--ease), border-color 0.3s var(--ease), background-color 0.3s var(--ease);
}

.theme-toggle:hover {
  transform: rotate(18deg);
  border-color: rgba(124, 92, 255, 0.6);
  background: var(--glass-bg-2);
}

.theme-toggle svg { position: absolute; transition: opacity 0.35s var(--ease), transform 0.45s var(--ease); }
.theme-toggle .ico-moon { opacity: 0; transform: scale(0.4) rotate(-40deg); }
.theme-toggle .ico-sun { opacity: 1; transform: scale(1) rotate(0); }
html[data-theme="light"] .theme-toggle .ico-moon { opacity: 1; transform: scale(1) rotate(0); }
html[data-theme="light"] .theme-toggle .ico-sun { opacity: 0; transform: scale(0.4) rotate(40deg); }

/* ---------- HUD ---------- */
.hud {
  position: fixed;
  inset: 0;
  z-index: 5;
  pointer-events: none;
  font-family: var(--ff-mono);
  font-size: 0.58rem;
  letter-spacing: 0.22em;
  color: var(--muted-2);
  opacity: 0.55;
}

.hud span { position: absolute; }
.hud-tl { top: 78px; left: 22px; }
.hud-bl { bottom: 18px; left: 22px; }
.hud-br { bottom: 18px; right: 22px; }


/* ---------- 雷达罗盘（导航台主题装饰） ---------- */
.radar {
  position: fixed;
  left: 50%;
  top: 50%;
  width: min(76vw, 660px);
  aspect-ratio: 1;
  margin: 0;
  transform: translate3d(-50%, -50%, 0);
  border-radius: 50%;
  z-index: 1;
  pointer-events: none;
  opacity: 0.55;
  contain: strict;
  background-image:
    repeating-radial-gradient(circle at 50% 50%,
      transparent 0 118px,
      rgba(34, 211, 238, 0.10) 118px 119px,
      transparent 119px 120px),
    linear-gradient(90deg,
      transparent calc(50% - 0.5px),
      rgba(34, 211, 238, 0.10) calc(50% - 0.5px),
      rgba(34, 211, 238, 0.10) calc(50% + 0.5px),
      transparent calc(50% + 0.5px)),
    linear-gradient(0deg,
      transparent calc(50% - 0.5px),
      rgba(124, 92, 255, 0.10) calc(50% - 0.5px),
      rgba(124, 92, 255, 0.10) calc(50% + 0.5px),
      transparent calc(50% + 0.5px));
  border: 1px solid rgba(124, 92, 255, 0.14);
}

.radar::before {
  content: "";
  position: absolute;
  inset: 0;
  border-radius: 50%;
  background: conic-gradient(from 0deg,
    rgba(34, 211, 238, 0.26) 0deg,
    rgba(34, 211, 238, 0.13) 6deg,
    rgba(124, 92, 255, 0.07) 18deg,
    rgba(124, 92, 255, 0.02) 34deg,
    transparent 62deg,
    transparent 360deg);
  animation: radarSweep 9s linear infinite;
  will-change: transform;
}

.radar::after {
  content: "";
  position: absolute;
  inset: 24%;
  border-radius: 50%;
  border: 1px dashed rgba(255, 46, 154, 0.16);
}

@keyframes radarSweep { to { transform: rotate(360deg); } }

html[data-theme="light"] .radar { opacity: 0.5; }

body.drawer-open .radar { opacity: 0.15; }
.radar { transition: opacity 0.5s var(--ease); }

/* ---------- 舞台 ---------- */
.stage {
  position: relative;
  z-index: 10;
  height: 100svh;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  padding: 80px 20px 150px;
  text-align: center;
}

.orb {
  position: relative;
  width: clamp(88px, 16vw, 112px);
  aspect-ratio: 1;
  margin-bottom: clamp(20px, 3.4vh, 30px);
}

.orb-face {
  position: relative;
  z-index: 2;
  border-radius: 50%;
  box-shadow: 0 18px 50px -18px rgba(124, 92, 255, 0.9);
}

.orb-glow {
  position: absolute;
  inset: -26px;
  border-radius: 50%;
  background: radial-gradient(circle, rgba(255, 46, 154, 0.32), rgba(124, 92, 255, 0.2) 45%, transparent 70%);
  filter: blur(10px);
  animation: haloBreathe 5s var(--ease-io) infinite;
  z-index: 0;
}

@keyframes haloBreathe {
  0%, 100% { opacity: 0.45; transform: scale(0.94); }
  50%      { opacity: 0.85; transform: scale(1.06); }
}

.orb-ring {
  position: absolute;
  border-radius: 50%;
  z-index: 1;
  pointer-events: none;
}

.ring-a {
  inset: -10px;
  border: 1px dashed rgba(124, 92, 255, 0.45);
  animation: spin 26s linear infinite;
}

.ring-b {
  inset: -22px;
  border: 1px solid rgba(34, 211, 238, 0.18);
  animation: spin 44s linear infinite reverse;
}

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

.orb-dot {
  position: absolute;
  top: -12px;
  left: 50%;
  width: 7px; height: 7px;
  margin-left: -3.5px;
  border-radius: 50%;
  background: var(--c1);
  box-shadow: 0 0 14px 3px var(--c1);
  z-index: 3;
  animation: orbit 9s linear infinite;
  transform-origin: 50% calc(50% + 60px);
}

@keyframes orbit {
  from { transform: rotate(0deg) translateY(-4px); }
  to   { transform: rotate(360deg) translateY(-4px); }
}

.name {
  margin: 0;
  font-size: clamp(2.1rem, 8vw, 4rem);
  font-weight: 900;
  letter-spacing: -0.03em;
  line-height: 1.05;
  background: var(--grad-main);
  background-size: 180% 100%;
  background-position: 18% 50%;
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
  filter: drop-shadow(0 0 34px rgba(124, 92, 255, 0.35));
}

.role {
  margin: 6px 0 0;
  font-family: var(--ff-mono);
  font-size: 0.72rem;
  letter-spacing: 0.36em;
  text-transform: uppercase;
  color: var(--muted-2);
}

.slogan {
  display: flex;
  align-items: center;
  gap: 8px;
  margin: clamp(18px, 3vh, 26px) 0 0;
  font-size: clamp(0.92rem, 2.4vw, 1.06rem);
  color: var(--fg-soft);
  min-height: 1.9em;
}

.slogan-mark { font-family: var(--ff-mono); color: var(--c3); }

#sloganText { transition: opacity 0.35s var(--ease), transform 0.35s var(--ease); }
#sloganText.swap { opacity: 0; transform: translateY(6px); }

.slogan-caret {
  width: 2px;
  height: 1.05em;
  background: var(--c1);
  box-shadow: 0 0 10px var(--c1);
  animation: blink 1.1s steps(1) infinite;
}

@keyframes blink { 0%, 49% { opacity: 1; } 50%, 100% { opacity: 0; } }

.stage-meta {
  margin: 16px 0 0;
  font-family: var(--ff-mono);
  font-size: 0.68rem;
  letter-spacing: 0.16em;
  color: var(--muted-2);
}

/* ---------- 底部把手 ---------- */
.hintbar {
  position: fixed;
  left: 0; right: 0;
  bottom: 0;
  z-index: 70;
  display: flex;
  justify-content: center;
  padding-bottom: max(18px, env(safe-area-inset-bottom));
  pointer-events: none;
}

.handle {
  pointer-events: auto;
  display: inline-flex;
  flex-direction: column;
  align-items: center;
  gap: 6px;
  padding: 10px 22px 8px;
  border-radius: 999px;
  border: 1px solid var(--line);
  background: var(--glass-bg);
  backdrop-filter: blur(6px);
  -webkit-backdrop-filter: blur(6px);
  box-shadow: 0 10px 30px -16px rgba(0, 0, 0, 0.9), inset 0 1px 0 var(--glass-hi);
  transition: border-color 0.35s var(--ease), transform 0.35s var(--ease), opacity 0.35s var(--ease);
}

.handle:hover {
  border-color: rgba(255, 46, 154, 0.5);
  transform: translateY(-2px);
}

.chevrons { display: flex; flex-direction: column; gap: 2px; align-items: center; }

.chevrons i {
  width: 9px;
  height: 9px;
  border-left: 1.4px solid var(--c1);
  border-top: 1.4px solid var(--c1);
  transform: rotate(45deg);
  opacity: 0.25;
  animation: chev 1.8s var(--ease-io) infinite;
  box-shadow: -1px -1px 6px -2px var(--c1);
}

.chevrons i:nth-child(2) { animation-delay: 0.18s; }
.chevrons i:nth-child(3) { animation-delay: 0.36s; opacity: 0.5; }

@keyframes chev {
  0%, 100% { opacity: 0.15; transform: rotate(45deg) translate(0, 0); }
  50%      { opacity: 1; transform: rotate(45deg) translate(2px, -2px); }
}

.handle-text {
  font-family: var(--ff-mono);
  font-size: 0.62rem;
  letter-spacing: 0.2em;
  color: var(--muted);
  text-transform: uppercase;
}

.when-open { display: none; }
body.drawer-open .when-closed { display: none; }
body.drawer-open .when-open { display: inline; }

body.drawer-open .chevrons i { transform: rotate(225deg); }
body.drawer-open .chevrons i:nth-child(3) { opacity: 0.25; }
body.drawer-open .chevrons i:nth-child(1) { opacity: 0.5; }

/* ---------- 抽屉 ---------- */
.drawer {
  position: fixed;
  left: 0; right: 0;
  bottom: 0;
  z-index: 65;
  height: auto;
  max-height: var(--drawer-h);
  transform: translate3d(0, 100%, 0);
  transition: transform 0.62s var(--ease-out), visibility 0s linear 0.62s;
  will-change: transform;
  visibility: hidden;
}

.drawer.open {
  transform: translate3d(0, 0, 0);
  visibility: visible;
  transition: transform 0.62s var(--ease-out), visibility 0s;
}

.drawer-panel {
  position: relative;
  height: auto;
  max-height: var(--drawer-h);
  display: flex;
  flex-direction: column;
  border-radius: 26px 26px 0 0;
  border: 1px solid var(--glass-brd);
  border-bottom: 0;
  background:
    linear-gradient(180deg, rgba(255, 255, 255, 0.09), rgba(255, 255, 255, 0.03) 34%, rgba(255, 255, 255, 0.02)),
    rgba(8, 8, 14, 0.93);
  /* 大面积抽屉不做实时背景模糊 */
  backdrop-filter: none;
  -webkit-backdrop-filter: none;
  box-shadow: var(--shadow-panel), inset 0 1px 0 var(--glass-hi);
  overflow: hidden;
  padding-bottom: max(12px, env(safe-area-inset-bottom));
}

html[data-theme="light"] .drawer-panel {
  background:
    linear-gradient(180deg, rgba(255, 255, 255, 0.95), rgba(255, 255, 255, 0.88)),
    rgba(255, 255, 255, 0.9);
}

.drawer-edge {
  position: absolute;
  top: 0; left: 0; right: 0;
  height: 2px;
  background: linear-gradient(90deg, transparent, var(--c5), var(--c1) 26%, var(--c2) 52%, var(--c3) 78%, transparent);
  box-shadow: 0 0 22px rgba(124, 92, 255, 0.7);
  opacity: 0.9;
}

.drawer-head {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 18px clamp(16px, 3vw, 28px) 12px;
  flex: 0 0 auto;
}

.tabs {
  position: relative;
  display: flex;
  gap: 2px;
  padding: 5px;
  border-radius: 999px;
  border: 1px solid var(--line-soft);
  background: var(--glass-bg);
  overflow-x: auto;
  scrollbar-width: none;
  max-width: 100%;
}

.tabs::-webkit-scrollbar { display: none; }

.tab-pill {
  position: absolute;
  top: 5px;
  bottom: 5px;
  left: 0;
  width: 0;
  border-radius: 999px;
  background: linear-gradient(120deg, rgba(34, 211, 238, 0.20), rgba(124, 92, 255, 0.24), rgba(255, 46, 154, 0.18));
  border: 1px solid rgba(124, 92, 255, 0.4);
  box-shadow: 0 0 20px -6px rgba(124, 92, 255, 0.9), inset 0 1px 0 rgba(255, 255, 255, 0.14);
  opacity: 0;
  transition: transform 0.45s var(--ease-out), width 0.45s var(--ease-out), opacity 0.3s;
  pointer-events: none;
}

.tab-pill.on { opacity: 1; }

.tab {
  position: relative;
  z-index: 1;
  padding: 6px 15px;
  border-radius: 999px;
  font-size: 0.82rem;
  color: var(--muted);
  white-space: nowrap;
  transition: color 0.3s var(--ease);
}

.tab:hover { color: var(--fg); }
.tab.active { color: var(--fg); }

.drawer-close {
  margin-left: auto;
  flex: 0 0 auto;
  width: 34px; height: 34px;
  display: grid;
  place-items: center;
  border-radius: 50%;
  border: 1px solid var(--line);
  color: var(--muted);
  transition: color 0.3s var(--ease), border-color 0.3s var(--ease), transform 0.35s var(--ease);
}

.drawer-close:hover {
  color: var(--fg);
  border-color: rgba(255, 46, 154, 0.5);
  transform: rotate(90deg);
}

.drawer-body {
  flex: 0 1 auto;
  min-height: 0;
  max-height: calc(var(--drawer-h) - 92px);
  overflow-y: auto;
  overscroll-behavior: contain;
  -webkit-overflow-scrolling: touch;
  padding: 6px clamp(16px, 3vw, 28px) 84px;
}

.pane { display: none; }
.pane.active { display: block; }

.cards {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(220px, 1fr));
  gap: 12px;
}

.card {
  position: relative;
  display: flex;
  align-items: center;
  gap: 13px;
  padding: 14px 16px;
  border-radius: 16px;
  border: 1px solid var(--glass-brd);
  background: linear-gradient(160deg, var(--glass-bg-2), var(--glass-bg) 60%, transparent);
  box-shadow: inset 0 1px 0 var(--glass-hi);
  opacity: 0;
  transform: translate3d(0, 14px, 0);
  transition: opacity 0.5s var(--ease-out), transform 0.5s var(--ease-out),
              border-color 0.35s var(--ease), background-color 0.35s var(--ease),
              box-shadow 0.4s var(--ease);
  overflow: hidden;
  contain: paint;
}

.card.in {
  opacity: 1;
  transform: translate3d(0, 0, 0);
}

.card::after {
  content: "";
  position: absolute;
  inset: 0;
  border-radius: inherit;
  pointer-events: none;
  opacity: 0;
  transition: opacity 0.4s var(--ease);
  background: radial-gradient(240px circle at var(--mx, 50%) var(--my, 50%),
    rgba(255, 255, 255, 0.14), rgba(255, 46, 154, 0.08) 40%, transparent 66%);
}

.card:hover::after { opacity: 1; }

.card:hover {
  transform: translate3d(0, -4px, 0);
  border-color: rgba(124, 92, 255, 0.42);
  box-shadow: inset 0 1px 0 var(--glass-hi), 0 16px 40px -22px rgba(124, 92, 255, 0.9);
}

.card-ico {
  flex: 0 0 auto;
  width: 42px; height: 42px;
  border-radius: 12px;
  display: grid;
  place-items: center;
  color: #fff;
  font-weight: 800;
  font-size: 1rem;
  font-family: var(--ff-mono);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.35), 0 8px 20px -12px rgba(0, 0, 0, 0.9);
  transition: transform 0.4s var(--ease);
}

.card:hover .card-ico { transform: scale(1.06) rotate(-4deg); }

.card-ico svg { width: 20px; height: 20px; }

.card-main { min-width: 0; flex: 1 1 auto; }

.card-title {
  display: block;
  margin: 0;
  font-size: 0.92rem;
  font-weight: 650;
  color: var(--fg);
  letter-spacing: 0.01em;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.card-desc {
  display: block;
  margin: 2px 0 0;
  font-size: 0.74rem;
  color: var(--muted-2);
  line-height: 1.5;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.card-go {
  flex: 0 0 auto;
  color: var(--muted-2);
  transition: color 0.35s var(--ease), transform 0.35s var(--ease);
}

.card:hover .card-go {
  color: var(--c1);
  transform: translate3d(2px, -2px, 0);
}

.pane-empty {
  padding: 56px 0;
  text-align: center;
  color: var(--muted-2);
  font-size: 0.85rem;
}

.drawer-foot {
  margin-top: 18px;
  display: flex;
  flex-wrap: wrap;
  gap: 8px 18px;
  font-family: var(--ff-mono);
  font-size: 0.66rem;
  letter-spacing: 0.1em;
  color: var(--muted-2);
  opacity: 0.8;
}

/* 抽屉打开时，背景舞台淡出一点 */
.stage, .hud { transition: opacity 0.5s var(--ease), transform 0.6s var(--ease); }
body.drawer-open .stage { opacity: 0.28; transform: translate3d(0, -18px, 0); }
body.drawer-open .hud { opacity: 0.2; }

/* ---------- 响应式 ---------- */
@media (max-width: 640px) {
  :root { --drawer-h: min(90svh, 720px); }

  .clock-date, .clock-sep { display: none; }
  .hud-tl, .hud-br { display: none; }
  .hud-bl { bottom: 84px; }

  .stage { padding: 70px 18px 150px; }

  .drawer-head { padding: 16px 14px 10px; gap: 8px; }
  .drawer-body { padding: 4px 14px 84px; }

  .tabs { max-width: calc(100vw - 88px); }
  .tab { padding: 6px 12px; font-size: 0.78rem; }

  .cards { grid-template-columns: 1fr; gap: 10px; }
  .card { padding: 12px 14px; }
  .card-ico { width: 38px; height: 38px; border-radius: 11px; }
}

@media (max-height: 680px) {
  .orb { width: 76px; margin-bottom: 14px; }
  .name { font-size: clamp(1.9rem, 7vw, 2.6rem); }
  .stage { padding-top: 64px; padding-bottom: 130px; }
  .stage-meta { display: none; }
}

/* ---------- 减少动效（柔和版） ----------
   只停大面积装饰，抽屉、卡片入场这些导航反馈保留 */
@media (prefers-reduced-motion: reduce) {
  .noise, .aurora, .cursor-dot, .cursor-ring { display: none !important; }

  .blob, .orb-ring, .orb-dot, .orb-glow, .orb-face,
  .chevrons i, .radar::before, .radar::after { animation: none !important; }
}

/* ---------- 低性能降级 ---------- */
html.perf-low .aurora,
html.perf-low .noise,
html.perf-low .orb-glow { display: none !important; }

html.perf-low .drawer-panel,
html.perf-low .handle,
html.perf-low .theme-toggle {
  backdrop-filter: none !important;
  -webkit-backdrop-filter: none !important;
}

html.perf-low .drawer-panel { background: rgba(9, 9, 16, 0.97); }
html[data-theme="light"] html.perf-low .drawer-panel { background: rgba(255, 255, 255, 0.98); }

/* ---------- 触摸设备 ---------- */
@media (hover: none) {
  .cursor-dot, .cursor-ring { display: none !important; }
  .card:hover { transform: none; }
  .card::after { display: none; }
}