/* ============================================================
   CodeHub · Aurora Glass 设计系统 v2
   自写覆盖层 —— 通过 #app 前缀获得最高优先级，无需重新构建
   ============================================================ */

/* ---------- 1. 设计令牌 ---------- */
:root {
  --bg: #05070f;
  --bg-2: #0a0f1d;
  --panel: rgba(17, 24, 44, .72);
  --panel-2: rgba(24, 33, 58, .65);
  --border: rgba(122, 152, 224, .14);
  --border-strong: rgba(122, 152, 224, .28);
  --text: #e9eefb;
  --text-dim: #93a0c2;
  --accent: #5ea2ff;
  --accent-2: #8b6cff;
  --accent-3: #3fd6ff;
  --grad: linear-gradient(135deg, #5ea2ff, #8b6cff);
  --grad-soft: linear-gradient(135deg, rgba(94,162,255,.16), rgba(139,108,255,.16));
  --glow: 0 8px 30px rgba(94, 162, 255, .22);
  --green: #34e3a1;
  --red: #ff5d7a;
  --yellow: #ffc857;
  --radius: 14px;
  --radius-lg: 18px;
  --mono: "JetBrains Mono", "Cascadia Code", Consolas, monospace;
  --sans: -apple-system, "SF Pro Display", "Segoe UI", "PingFang SC", "HarmonyOS Sans SC", "Microsoft YaHei", sans-serif;
  --ease: cubic-bezier(.22, .8, .32, 1);
}

/* ---------- 2. 全局底色与氛围 ---------- */
html { scrollbar-color: #2a3a63 transparent; }

body {
  font-family: var(--sans);
  background:
    radial-gradient(1000px 560px at 88% -12%, rgba(94, 162, 255, .17), transparent 62%),
    radial-gradient(760px 520px at 2% 12%, rgba(139, 108, 255, .11), transparent 60%),
    radial-gradient(1100px 760px at 50% 118%, rgba(63, 214, 255, .09), transparent 62%),
    linear-gradient(180deg, #070b16 0%, #05070f 100%);
  background-attachment: fixed;
  letter-spacing: .1px;
  -webkit-font-smoothing: antialiased;
}

/* 极光网格底纹 */
body::before {
  content: "";
  position: fixed;
  inset: 0;
  z-index: 0;
  pointer-events: none;
  background-image:
    linear-gradient(rgba(148, 170, 255, .05) 1px, transparent 1px),
    linear-gradient(90deg, rgba(148, 170, 255, .05) 1px, transparent 1px);
  background-size: 46px 46px;
  -webkit-mask-image: radial-gradient(ellipse 95% 65% at 50% 0%, #000 25%, transparent 78%);
          mask-image: radial-gradient(ellipse 95% 65% at 50% 0%, #000 25%, transparent 78%);
}

/* 内容整体抬升到底纹之上 */
#app > * { position: relative; z-index: 1; }

::selection { background: rgba(94, 162, 255, .32); color: #fff; }

::-webkit-scrollbar { width: 10px; height: 10px; }
::-webkit-scrollbar-track { background: transparent; }
::-webkit-scrollbar-thumb {
  background: linear-gradient(180deg, #2c3d69, #1d2947);
  border-radius: 8px;
  border: 2px solid transparent;
  background-clip: padding-box;
}
::-webkit-scrollbar-thumb:hover { background: linear-gradient(180deg, #3a4f85, #253358); background-clip: padding-box; }

#app a { transition: color .18s var(--ease); }
#app :focus-visible { outline: 2px solid rgba(94, 162, 255, .55); outline-offset: 2px; border-radius: 6px; }

h1, h2, h3 { letter-spacing: .2px; }

/* ---------- 3. 按钮（微交互：光泽扫过 + 抬升） ---------- */
#app button {
  position: relative;
  overflow: hidden;
  background: var(--grad);
  border: 1px solid rgba(255, 255, 255, .08);
  color: #fff;
  padding: 10px 20px;
  border-radius: 11px;
  font-size: 14px;
  font-weight: 600;
  font-family: inherit;
  letter-spacing: .3px;
  cursor: pointer;
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, .18), 0 4px 16px rgba(94, 162, 255, .22);
  transition: transform .16s var(--ease), box-shadow .2s var(--ease), filter .2s var(--ease);
}
#app button::after {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(115deg, transparent 32%, rgba(255, 255, 255, .22) 50%, transparent 68%);
  transform: translateX(-130%);
  transition: transform .55s var(--ease);
  pointer-events: none;
}
#app button:hover { transform: translateY(-1px); box-shadow: inset 0 1px 0 rgba(255,255,255,.18), 0 8px 26px rgba(94,162,255,.34); filter: brightness(1.06); }
#app button:hover::after { transform: translateX(130%); }
#app button:active { transform: translateY(0) scale(.98); filter: brightness(.96); }
#app button:disabled { opacity: .45; cursor: not-allowed; transform: none; box-shadow: none; filter: grayscale(.4); }
#app button:disabled::after { display: none; }

#app button.ghost {
  background: rgba(24, 33, 58, .5);
  border: 1px solid var(--border);
  color: var(--text);
  font-weight: 500;
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, .04);
}
#app button.ghost:hover { border-color: var(--border-strong); background: rgba(33, 45, 78, .6); box-shadow: 0 6px 20px rgba(0, 0, 0, .3); }

#app button.danger {
  background: linear-gradient(135deg, #ff5d7a, #d6456a);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, .18), 0 4px 16px rgba(255, 93, 122, .25);
}
#app button.danger:hover { box-shadow: 0 8px 26px rgba(255, 93, 122, .4); }

/* ---------- 4. 输入控件 ---------- */
#app input, #app textarea, #app select {
  background: rgba(9, 13, 26, .8);
  border: 1px solid var(--border);
  color: var(--text);
  padding: 10px 14px;
  border-radius: 11px;
  font-size: 14px;
  font-family: inherit;
  outline: none;
  width: 100%;
  box-shadow: inset 0 2px 6px rgba(0, 0, 0, .25);
  transition: border-color .2s var(--ease), box-shadow .25s var(--ease), background .2s var(--ease);
}
#app input::placeholder, #app textarea::placeholder { color: #5a6882; }
#app input:hover, #app textarea:hover, #app select:hover { border-color: var(--border-strong); }
#app input:focus, #app textarea:focus, #app select:focus {
  border-color: rgba(94, 162, 255, .6);
  background: rgba(11, 16, 32, .9);
  box-shadow: 0 0 0 3px rgba(94, 162, 255, .16), inset 0 2px 6px rgba(0, 0, 0, .2);
}
#app select option { background: #0b101e; color: var(--text); }
#app textarea { line-height: 1.6; resize: vertical; }

/* ---------- 5. 卡片（玻璃 + 渐变描边 + 悬浮辉光） ---------- */
#app .card {
  position: relative;
  background: linear-gradient(165deg, rgba(20, 28, 50, .78), rgba(9, 13, 26, .86));
  border: 1px solid var(--border);
  border-radius: var(--radius-lg);
  padding: 20px;
  box-shadow: 0 12px 40px rgba(0, 0, 0, .38), inset 0 1px 0 rgba(255, 255, 255, .05);
  backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px);
}
#app .card::before {
  content: "";
  position: absolute;
  top: 0; left: 12%; right: 12%;
  height: 1px;
  background: linear-gradient(90deg, transparent, rgba(94, 162, 255, .55), rgba(139, 108, 255, .45), transparent);
  pointer-events: none;
}

/* ---------- 6. 顶部导航（悬浮玻璃舱） ---------- */
#app .nav[class] {
  background: rgba(6, 9, 19, .68);
  -webkit-backdrop-filter: blur(18px) saturate(1.5);
          backdrop-filter: blur(18px) saturate(1.5);
  border-bottom: 1px solid rgba(122, 152, 224, .1);
  box-shadow: 0 10px 34px rgba(0, 0, 0, .35);
}
#app .nav-inner[class] { padding: 12px 24px; gap: 20px; }

#app .logo-mark[class] {
  font-family: var(--mono);
  font-weight: 700;
  background: linear-gradient(120deg, #5ea2ff, #8b6cff 55%, #3fd6ff 110%);
  background-size: 180% 180%;
  animation: logoShift 7s var(--ease) infinite;
  padding: 6px 12px;
  border-radius: 10px;
  box-shadow: 0 4px 20px rgba(94, 162, 255, .4), inset 0 1px 0 rgba(255, 255, 255, .28);
  transition: transform .2s var(--ease);
}
#app .logo:hover .logo-mark[class] { transform: rotate(-4deg) scale(1.05); }
@keyframes logoShift {
  0%, 100% { background-position: 0% 50%; }
  50% { background-position: 100% 50%; }
}

#app .logo-text[class] { font-size: 19px; font-weight: 800; letter-spacing: .4px; }
#app .logo-text span[class] {
  background: linear-gradient(120deg, #5ea2ff, #3fd6ff);
  -webkit-background-clip: text;
          background-clip: text;
  -webkit-text-fill-color: transparent;
}

/* 导航链接：底部渐变光条 */
#app .link[class] {
  background: transparent !important;
  box-shadow: none !important;
  border: none;
  color: var(--text-dim);
  padding: 8px 15px;
  font-size: 14px;
  font-weight: 500;
  border-radius: 9px;
  overflow: visible;
}
#app .link[class]::after { display: none; }
#app .link[class]::before {
  content: "";
  position: absolute;
  left: 15px; right: 15px; bottom: 2px;
  height: 2px;
  border-radius: 2px;
  background: linear-gradient(90deg, #5ea2ff, #8b6cff);
  transform: scaleX(0);
  transform-origin: left;
  transition: transform .28s var(--ease);
  opacity: 0;
}
#app .link[class]:hover { color: var(--text); background: rgba(94, 162, 255, .08) !important; transform: none; }
#app .link[class]:hover::before { transform: scaleX(1); opacity: 1; }

#app .user-chip[class] {
  position: relative;
  background: var(--grad-soft);
  border: 1px solid transparent;
  background-clip: padding-box;
  color: #cfe0ff;
  padding: 6px 14px;
  border-radius: 20px;
  font-size: 13px;
  font-weight: 600;
  box-shadow: 0 0 0 1px rgba(94, 162, 255, .25), 0 4px 14px rgba(94, 162, 255, .14);
}

/* ---------- 7. 徽章 / 标签 ---------- */
#app .badge[class] {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 3px 11px;
  border-radius: 20px;
  font-size: 12px;
  font-weight: 600;
  background: rgba(94, 162, 255, .13);
  color: #9ec5ff;
  border: 1px solid rgba(94, 162, 255, .3);
}
#app .badge[class]::before {
  content: "";
  width: 5px; height: 5px;
  border-radius: 50%;
  background: var(--accent);
  box-shadow: 0 0 6px var(--accent);
}
#app .lang-tag[class] {
  font-family: var(--mono);
  font-size: 11px;
  font-weight: 600;
  padding: 3px 9px;
  border-radius: 7px;
  background: rgba(139, 108, 255, .14);
  color: #c3b2ff;
  border: 1px solid rgba(139, 108, 255, .3);
}
#app .tag-danger[class] {
  background: rgba(255, 93, 122, .12) !important;
  color: #ff8ba0 !important;
  border: 1px solid rgba(255, 93, 122, .35) !important;
}
#app .tag-ok[class] {
  background: rgba(52, 227, 161, .12) !important;
  color: #6cf0c1 !important;
  border: 1px solid rgba(52, 227, 161, .35) !important;
}
#app .tag-ok[class]::before, #app .tag-danger[class]::before {
  content: "";
  display: inline-block;
  width: 5px; height: 5px;
  border-radius: 50%;
  margin-right: 6px;
  vertical-align: 1px;
}
#app .tag-ok[class]::before { background: var(--green); box-shadow: 0 0 6px var(--green); }
#app .tag-danger[class]::before { background: var(--red); box-shadow: 0 0 6px var(--red); }

/* ---------- 8. 代码块 ---------- */
#app pre.code-block[class],
#app .codeview[class] {
  background: linear-gradient(180deg, #090d1a, #070b15);
  border: 1px solid rgba(122, 152, 224, .16);
  border-radius: 12px;
  padding: 16px;
  font-size: 13px;
  line-height: 1.65;
  box-shadow: inset 0 2px 10px rgba(0, 0, 0, .35), 0 6px 20px rgba(0, 0, 0, .22);
}
#app .peek[class] {
  background: linear-gradient(180deg, #090d1a, #070b15);
  border: 1px solid rgba(122, 152, 224, .12);
  border-radius: 10px;
  font-size: 12px;
  line-height: 1.6;
}

/* ---------- 9. 首页 / 列表页 ---------- */
#app .hero[class] { padding: 42px 0 28px; }
#app .hero h1[class] {
  font-size: clamp(26px, 4.2vw, 36px);
  font-weight: 800;
  margin: 0 0 10px;
  background: linear-gradient(120deg, #f4f7ff 30%, #9ec5ff 70%, #c3b2ff);
  -webkit-background-clip: text;
          background-clip: text;
  -webkit-text-fill-color: transparent;
}
#app .hero .accent[class] { -webkit-text-fill-color: transparent; }

#app .grid[class] { gap: 18px; }

/* 可点击卡片：渐变描边呼吸 + 抬升 */
#app .repo[class], #app .snip[class], #app .doc[class] {
  transition: transform .22s var(--ease), border-color .22s var(--ease), box-shadow .28s var(--ease);
  animation: riseIn .5s var(--ease) backwards;
}
#app .grid[class] > *:nth-child(1) { animation-delay: .02s; }
#app .grid[class] > *:nth-child(2) { animation-delay: .06s; }
#app .grid[class] > *:nth-child(3) { animation-delay: .1s; }
#app .grid[class] > *:nth-child(4) { animation-delay: .14s; }
#app .grid[class] > *:nth-child(5) { animation-delay: .18s; }
#app .grid[class] > *:nth-child(6) { animation-delay: .22s; }
#app .repo[class]:hover, #app .snip[class]:hover, #app .doc[class]:hover {
  transform: translateY(-4px);
  border-color: rgba(94, 162, 255, .5);
  box-shadow: 0 18px 46px rgba(0, 0, 0, .45), 0 0 0 1px rgba(94, 162, 255, .18), 0 10px 34px rgba(94, 162, 255, .14);
}
@keyframes riseIn {
  from { opacity: 0; transform: translateY(14px); }
  to { opacity: 1; transform: translateY(0); }
}

#app .title[class] { font-size: 17px; font-weight: 700; letter-spacing: .2px; }

/* ---------- 10. 仓库详情 ---------- */
#app .chip[class], #app .tab[class] {
  padding: 7px 16px;
  border-radius: 20px;
  background: rgba(24, 33, 58, .55);
  border: 1px solid var(--border);
  color: var(--text-dim);
  font-weight: 500;
  font-size: 13px;
  box-shadow: none;
  transition: all .2s var(--ease);
}
#app .chip[class]:hover, #app .tab[class]:hover {
  color: var(--text);
  border-color: var(--border-strong);
  transform: translateY(-1px);
}
#app .chip.active[class], #app .tab.active[class] {
  color: #fff;
  border-color: transparent;
  background: var(--grad);
  box-shadow: 0 4px 16px rgba(94, 162, 255, .35), inset 0 1px 0 rgba(255, 255, 255, .2);
}
#app .chip.active[class]::after, #app .tab.active[class]::after { opacity: 0; }

#app .commit[class] {
  background: rgba(17, 24, 44, .5);
  border: 1px solid var(--border);
  border-radius: 12px;
  padding: 12px 14px;
  margin-bottom: 10px;
  transition: border-color .2s var(--ease), background .2s var(--ease);
}
#app .commit[class]:hover { border-color: var(--border-strong); background: rgba(24, 33, 58, .6); }
#app .commit .oid[class] {
  font-family: var(--mono);
  font-size: 12px;
  background: rgba(94, 162, 255, .12);
  border: 1px solid rgba(94, 162, 255, .25);
  color: #9ec5ff;
  padding: 2px 8px;
  border-radius: 6px;
}

#app .file[class] {
  background: rgba(17, 24, 44, .45);
  border: 1px solid var(--border);
  border-radius: 11px;
  padding: 11px 14px;
  margin-bottom: 8px;
  transition: all .2s var(--ease);
}
#app .file[class]:hover {
  border-color: rgba(94, 162, 255, .45);
  background: rgba(24, 33, 58, .65);
  transform: translateX(3px);
}
#app .dir[class] { color: #c3b2ff; }
#app .file-path[class] { color: #9ec5ff; font-family: var(--mono); font-size: 13px; }

/* ---------- 11. 弹窗（毛玻璃幕 + 弹性入场） ---------- */
#app .overlay[class] {
  background: rgba(3, 5, 11, .66);
  -webkit-backdrop-filter: blur(10px) saturate(1.2);
          backdrop-filter: blur(10px) saturate(1.2);
  animation: overlayIn .2s var(--ease);
}
@keyframes overlayIn { from { opacity: 0; } }

#app .modal[class] {
  background: linear-gradient(165deg, rgba(22, 30, 54, .96), rgba(11, 16, 32, .98));
  border: 1px solid var(--border-strong);
  border-radius: var(--radius-lg);
  padding: 26px;
  box-shadow: 0 30px 80px rgba(0, 0, 0, .6), 0 0 0 1px rgba(94, 162, 255, .08), inset 0 1px 0 rgba(255, 255, 255, .06);
  animation: modalIn .32s var(--ease);
}
@keyframes modalIn {
  from { opacity: 0; transform: translateY(16px) scale(.96); }
  to { opacity: 1; transform: translateY(0) scale(1); }
}
#app .modal h3[class] { font-size: 17px; font-weight: 700; }

/* ---------- 12. 登录页（极光聚光） ---------- */
#app .login-wrap[class] { padding-top: 9vh; }
#app .login-box[class] {
  width: 380px;
  gap: 16px;
  padding: 36px 32px 30px;
  border-radius: 22px;
  background: linear-gradient(165deg, rgba(22, 30, 54, .85), rgba(9, 13, 26, .92));
  border: 1px solid var(--border-strong);
  box-shadow:
    0 30px 90px rgba(0, 0, 0, .55),
    0 0 90px rgba(94, 162, 255, .1),
    inset 0 1px 0 rgba(255, 255, 255, .07);
  animation: riseIn .55s var(--ease);
}
#app .login-box .logo-mark[class] {
  width: 62px; height: 62px;
  font-size: 26px;
  font-weight: 800;
  border-radius: 17px;
  animation: logoShift 7s var(--ease) infinite, floatY 5s ease-in-out infinite;
}
@keyframes floatY {
  0%, 100% { box-shadow: 0 6px 24px rgba(94, 162, 255, .4), inset 0 1px 0 rgba(255,255,255,.28); }
  50% { box-shadow: 0 14px 40px rgba(94, 162, 255, .55), inset 0 1px 0 rgba(255,255,255,.28); }
}
#app .login-box h2[class] { font-size: 22px; font-weight: 800; }
#app .switch[class]:hover { color: #9ec5ff; }

/* ---------- 13. 聊天 ---------- */
#app .chat[class] { height: calc(100vh - 132px); gap: 18px; }
#app .side[class] {
  background: linear-gradient(165deg, rgba(20, 28, 50, .6), rgba(9, 13, 26, .7));
  border: 1px solid var(--border);
  border-radius: var(--radius-lg);
  padding: 14px;
  backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px);
  box-shadow: 0 12px 40px rgba(0, 0, 0, .3);
}
#app .main[class] {
  background: linear-gradient(165deg, rgba(20, 28, 50, .6), rgba(9, 13, 26, .7));
  border: 1px solid var(--border);
  border-radius: var(--radius-lg);
  overflow: hidden;
  backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px);
  box-shadow: 0 12px 40px rgba(0, 0, 0, .3);
}
#app .chat .item[class] {
  padding: 10px 12px;
  border-radius: 11px;
  transition: all .18s var(--ease);
  border: 1px solid transparent;
}
#app .chat .item[class]:hover { background: rgba(94, 162, 255, .1); color: var(--text); transform: translateX(2px); }
#app .chat .item.active[class] {
  background: var(--grad-soft);
  border-color: rgba(94, 162, 255, .35);
  color: var(--text);
}

#app .dot[class] { background: #2c3a5c; transition: background .2s; }
#app .dot.on[class] { background: var(--green); box-shadow: 0 0 8px var(--green); animation: pulseDot 2.2s infinite; }
@keyframes pulseDot {
  0%, 100% { box-shadow: 0 0 0 0 rgba(52, 227, 161, .45); }
  55% { box-shadow: 0 0 0 6px rgba(52, 227, 161, 0); }
}

/* 气泡 */
#app .bubble[class] {
  background: rgba(26, 36, 63, .85);
  border: 1px solid var(--border);
  padding: 10px 14px;
  border-radius: 15px 15px 15px 5px;
  font-size: 14px;
  line-height: 1.55;
  box-shadow: 0 4px 14px rgba(0, 0, 0, .22);
}
#app .msg.mine .bubble[class] {
  background: var(--grad);
  border-color: rgba(255, 255, 255, .12);
  border-radius: 15px 15px 5px 15px;
  color: #fff;
  box-shadow: 0 6px 20px rgba(94, 162, 255, .3);
}
#app .name[class] { color: #9ec5ff; font-weight: 600; }
#app .msgs[class] { padding: 18px; gap: 12px; }
#app .head[class] {
  background: rgba(12, 17, 33, .55);
  border-bottom: 1px solid var(--border);
  padding: 12px 16px;
  font-weight: 600;
}
#app .input-bar[class] { background: rgba(12, 17, 33, .45); padding: 14px; }

/* ---------- 14. 通话 ---------- */
#app .call[class] {
  background:
    radial-gradient(700px 500px at 75% -10%, rgba(94, 162, 255, .12), transparent 60%),
    radial-gradient(600px 420px at 15% 110%, rgba(139, 108, 255, .1), transparent 60%),
    #05070d;
}
#app .call .avatar[class] {
  background: linear-gradient(135deg, #5ea2ff, #8b6cff);
  color: #fff;
  box-shadow: 0 0 0 4px rgba(94, 162, 255, .18), 0 0 44px rgba(94, 162, 255, .4);
  animation: floatY 4.5s ease-in-out infinite;
}
#app .call .btn[class] {
  background: var(--grad);
  color: #fff;
  border-radius: 12px;
  font-weight: 700;
  box-shadow: 0 6px 22px rgba(94, 162, 255, .35);
}
#app .call .btn.danger[class] { background: linear-gradient(135deg, #ff5d7a, #d6456a); box-shadow: 0 6px 22px rgba(255, 93, 122, .35); }
#app .call .ctrl[class] {
  background: rgba(24, 33, 58, .8);
  border: 1px solid var(--border-strong);
  border-radius: 14px;
  transition: all .18s var(--ease);
}
#app .call .ctrl[class]:hover { background: rgba(35, 48, 84, .9); transform: translateY(-2px); }
#app .call .ctrl.off[class] { border-color: rgba(255, 93, 122, .6); color: #ff8ba0; }
#app .call .ctrl.danger[class] { background: linear-gradient(135deg, #ff5d7a, #d6456a); color: #fff; border-color: transparent; }
#app .call .stage[class] {
  border: 1px solid rgba(122, 152, 224, .25);
  border-radius: 16px;
  box-shadow: 0 20px 60px rgba(0, 0, 0, .5), 0 0 60px rgba(94, 162, 255, .08);
}
#app .pulse[class] { background: var(--green); box-shadow: 0 0 12px var(--green); animation: pulseDot 2s infinite; }
#app .pulse.muted[class] { background: var(--red); box-shadow: 0 0 12px var(--red); animation: none; }

/* ---------- 15. 协作编辑器 / 文档 ---------- */
#app .topbar[class], #app .members-panel[class] {
  background: linear-gradient(165deg, rgba(20, 28, 50, .65), rgba(9, 13, 26, .75));
  border: 1px solid var(--border);
  border-radius: 14px;
  backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px);
  box-shadow: 0 8px 28px rgba(0, 0, 0, .28);
}
#app .conn.ok[class] { color: var(--green); }
#app .avatar[class] {
  border: 2px solid rgba(9, 13, 26, .95);
  box-shadow: 0 2px 10px rgba(0, 0, 0, .3);
  background: var(--grad);
}
#app .editor-box[class], #app .editor[class] {
  border-color: rgba(122, 152, 224, .2);
  box-shadow: 0 14px 44px rgba(0, 0, 0, .38), 0 0 40px rgba(94, 162, 255, .05);
}
#app .ver[class] { border-bottom-color: rgba(122, 152, 224, .12); }

/* ---------- 16. Snippet 详情 / 个人页 / 好友 ---------- */
#app .share[class] {
  background: rgba(52, 227, 161, .07);
  border: 1px dashed rgba(52, 227, 161, .4);
  border-radius: 11px;
  color: #6cf0c1;
  font-family: var(--mono);
  font-size: 12.5px;
  padding: 10px 14px;
}
#app .comment[class] { border-bottom-color: rgba(122, 152, 224, .1); padding: 13px 0; }
#app .item[class] { transition: background .18s var(--ease); border-bottom-color: rgba(122, 152, 224, .1); }
#app .item[class]:hover { background: rgba(94, 162, 255, .05); border-radius: 8px; }
#app .item .title[class]:hover { color: #c3b2ff; }

/* ---------- 17. 杂项 ---------- */
#app .dim[class] { color: var(--text-dim); }
#app .center[class] { padding: 56px 0; }
#app .back[class] { margin-bottom: 20px; }
#app .empty svg { opacity: .5; }
#app .err[class] { color: #ff8ba0; }

/* ---------- 18. 动效降级 & 响应式 ---------- */
@media (prefers-reduced-motion: reduce) {
  #app *, #app *::before, #app *::after {
    animation-duration: .01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: .01ms !important;
  }
}

@media (max-width: 720px) {
  #app .nav-inner[class] { flex-wrap: wrap; gap: 10px; padding: 10px 16px; }
  #app .links[class] { order: 3; width: 100%; overflow-x: auto; }
  #app .page[class] { padding: 20px 16px 48px; }
  #app .hero[class] { padding: 26px 0 18px; }
  #app .chat[class] { flex-direction: column; height: auto; }
  #app .side[class] { width: 100%; max-height: 260px; }
  #app .login-box[class] { width: min(380px, 92vw); padding: 28px 22px 24px; }
}