/* =========================================================
   vibemake — 开源机器人社区
   顶部导航 · 宽留白 · 大字号层次 · 每个项目带自己的光晕色
   ========================================================= */
/* 站内跳转时新旧页面淡入淡出，不白屏闪一下（Chrome / Edge 支持，其他浏览器照常跳转） */
@view-transition { navigation: auto; }
::view-transition-old(root), ::view-transition-new(root) { animation-duration: .18s; }

:root {
  --bg: #07080a;
  --bg-2: #0b0c0f;
  --surface: #0f1114;
  --surface-2: #15181c;
  --panel: rgba(15, 17, 20, 0.78);
  --line: rgba(255, 255, 255, 0.07);
  --line-strong: rgba(255, 255, 255, 0.13);
  --text: #f3f4f6;
  --soft: #c9cdd3;
  --muted: #8f96a0;
  --dim: #5c636c;
  --accent: #c8ff3e;
  --accent-ink: #0d1203;
  --accent-soft: rgba(200, 255, 62, 0.1);
  --accent-line: rgba(200, 255, 62, 0.32);
  --danger: #ff6b5b;
  --ok: #46e38a;
  --nav: 64px;
  --font: 'Sora', 'PingFang SC', 'Hiragino Sans GB', 'Microsoft YaHei', system-ui, sans-serif;
  --mono: 'JetBrains Mono', ui-monospace, SFMono-Regular, Menlo, monospace;
  color-scheme: dark;
}

* { box-sizing: border-box; }
[hidden] { display: none !important; }
html { scroll-behavior: smooth; }
html, body { margin: 0; }
body {
  background: var(--bg);
  color: var(--text);
  font-family: var(--font);
  font-size: 15px;
  line-height: 1.65;
  -webkit-font-smoothing: antialiased;
  overflow-x: hidden;
}
/* ---------- 背景：极淡的工程网格 + 两侧参考线 + 色光 + 颗粒 ---------- */
/* 网格画在 body 上、跟着内容一起滚动；以页面中线对齐，主网格线正好落在内容区两侧 */
body { position: relative; }
body::before {
  content: ''; position: absolute; inset: 0; z-index: -1; pointer-events: none;
  background:
    /* 色光：只在页面顶部 */
    radial-gradient(900px 600px at 6% -120px, rgba(200, 255, 62, 0.2), transparent 70%),
    radial-gradient(800px 700px at 100% 200px, rgba(80, 130, 255, 0.16), transparent 70%),
    /* 主网格交点上的十字标记 */
    url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='320' height='320'%3E%3Cpath d='M0 -6V6M-6 0H6M320 -6V6M314 0H326M0 314V326M-6 320H6M320 314V326M314 320H326' stroke='rgba(255,255,255,0.45)' stroke-width='1'/%3E%3C/svg%3E") 50% 0 / 320px 320px,
    linear-gradient(rgba(255, 255, 255, 0.085) 1px, transparent 1px) 50% 0 / 320px 320px,
    linear-gradient(90deg, rgba(255, 255, 255, 0.085) 1px, transparent 1px) 50% 0 / 320px 320px,
    linear-gradient(rgba(255, 255, 255, 0.04) 1px, transparent 1px) 50% 0 / 64px 64px,
    linear-gradient(90deg, rgba(255, 255, 255, 0.04) 1px, transparent 1px) 50% 0 / 64px 64px;
  /* 越往下越淡，长页面底部不至于太花 */
  -webkit-mask-image: linear-gradient(#000 0, #000 1400px, rgba(0, 0, 0, 0.45) 2600px);
          mask-image: linear-gradient(#000 0, #000 1400px, rgba(0, 0, 0, 0.45) 2600px);
}
body::after {
  content: ''; position: fixed; inset: 0; z-index: 200; pointer-events: none; opacity: 0.025;
  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.9' numOctaves='2' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
}
html { background: var(--bg); }
body { background: transparent; }
/* 区块标题上的十字定位标记，落在两侧参考线上 */
.section-head { position: relative; }
.section-head::before, .section-head::after { content: ''; position: absolute; left: -66px; top: 6px; width: 11px; height: 11px; pointer-events: none;
  background: linear-gradient(var(--dim), var(--dim)) center / 1px 100% no-repeat, linear-gradient(var(--dim), var(--dim)) center / 100% 1px no-repeat; opacity: .7; }
.section-head::after { left: auto; right: -66px; }
@media (max-width: 1360px) { .section-head::before, .section-head::after { display: none; } }
a { color: inherit; text-decoration: none; }
button { font: inherit; color: inherit; cursor: pointer; }
input, select, textarea { font: inherit; color: inherit; }
img { display: block; max-width: 100%; }
h1, h2, h3, h4, h5, h6 { margin: 0; font-weight: 600; letter-spacing: -0.015em; }
.mono { font-family: var(--mono); }
.muted { color: var(--muted); }
.ic { flex: 0 0 auto; }
.container { width: 100%; max-width: 1240px; margin: 0 auto; padding: 0 40px; }

/* ---------- 基础组件 ---------- */
.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: 8px;
  height: 40px; padding: 0 18px;
  border-radius: 999px;
  border: 1px solid var(--line-strong);
  background: rgba(255, 255, 255, 0.03);
  font-size: 14px; font-weight: 500; white-space: nowrap;
  transition: background .2s, border-color .2s, transform .15s, color .2s;
}
.btn:hover { background: rgba(255, 255, 255, 0.08); border-color: rgba(255, 255, 255, 0.24); }
.btn:active { transform: scale(0.98); }
.btn-primary { background: var(--accent); border-color: var(--accent); color: var(--accent-ink); font-weight: 600; }
.btn-primary:hover { background: #d8ff70; border-color: #d8ff70; }
.btn-light { background: var(--text); border-color: var(--text); color: #0b0c0e; font-weight: 600; }
.btn-light:hover { background: #fff; border-color: #fff; }
.btn-ghost { background: transparent; border-color: transparent; color: var(--soft); }
.btn-ghost:hover { background: rgba(255, 255, 255, 0.06); border-color: transparent; }
.btn-danger { background: var(--danger); border-color: var(--danger); color: #1a0705; font-weight: 600; }
.btn-sm { height: 34px; padding: 0 14px; font-size: 13px; }
.btn-lg { height: 50px; padding: 0 26px; font-size: 15px; }
.btn.on { color: var(--accent); border-color: var(--accent-line); background: var(--accent-soft); }
.icon-btn { display: grid; place-items: center; width: 40px; height: 40px; border: 0; border-radius: 999px; background: transparent; color: var(--soft); }
.icon-btn:hover { background: rgba(255, 255, 255, 0.07); color: var(--text); }
.round-btn { display: grid; place-items: center; width: 44px; height: 44px; border-radius: 50%; border: 1px solid var(--line-strong); background: rgba(10, 11, 13, 0.5); color: var(--soft); backdrop-filter: blur(10px); }
.round-btn:hover { color: var(--text); border-color: rgba(255, 255, 255, 0.3); }

.chip {
  display: inline-flex; align-items: center; gap: 6px;
  height: 28px; padding: 0 12px;
  border: 1px solid var(--line-strong);
  border-radius: 999px;
  color: var(--soft); font-size: 12.5px; white-space: nowrap;
}
.chip b { color: var(--text); font-weight: 500; }
a.chip:hover, button.chip:hover { border-color: rgba(255, 255, 255, 0.28); color: var(--text); }
.chip.accent { color: var(--accent); border-color: var(--accent-line); }
.eyebrow { display: inline-flex; align-items: center; gap: 10px; font-family: var(--mono); font-size: 12px; letter-spacing: .12em; text-transform: uppercase; color: var(--muted); }
.eyebrow b { color: var(--accent); font-weight: 500; }
.eyebrow i { width: 24px; height: 1px; background: var(--line-strong); }
.dot { display: inline-block; width: 6px; height: 6px; border-radius: 50%; background: var(--accent); box-shadow: 0 0 10px var(--accent); }
.avatar {
  display: inline-grid; place-items: center; flex: 0 0 auto;
  border-radius: 50%;
  background: color-mix(in srgb, var(--c) 20%, #0e0f12);
  color: var(--c);
  box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--c) 38%, transparent);
  font-weight: 600; line-height: 1;
}

/* ---------- 顶部导航 ---------- */
.nav {
  position: sticky; top: 0; z-index: 50;
  height: var(--nav);
  border-bottom: 1px solid transparent;
  transition: background .25s, border-color .25s;
}
.nav.scrolled, .nav.overlay, .nav.open {
  background: rgba(7, 8, 10, 0.72);
  backdrop-filter: blur(18px) saturate(1.5);
  -webkit-backdrop-filter: blur(18px) saturate(1.5);
  border-bottom-color: var(--line);
}
.nav.overlay { position: fixed; left: 0; right: 0; }
.nav-inner { display: flex; align-items: center; gap: 44px; height: 100%; max-width: 1240px; margin: 0 auto; padding: 0 40px; }
.nav-logo img { height: 18px; width: auto; }
.nav-links { display: flex; gap: 30px; margin-right: auto; }
.nav-links a { position: relative; color: var(--muted); font-size: 14px; transition: color .2s; }
.nav-links a:hover { color: var(--text); }
.nav-links a.active { color: var(--text); }
.nav-links a.active::after { content: ''; position: absolute; left: 50%; bottom: -10px; width: 4px; height: 4px; margin-left: -2px; border-radius: 50%; background: var(--accent); }
.nav-actions { display: flex; align-items: center; gap: 10px; margin-left: auto; }
.nav-search {
  display: inline-flex; align-items: center; gap: 8px;
  height: 34px; padding: 0 8px 0 12px;
  border-radius: 999px; border: 1px solid var(--line-strong);
  background: rgba(255, 255, 255, 0.025);
  color: var(--muted); font-size: 13px;
}
.nav-search:hover { color: var(--text); border-color: rgba(255, 255, 255, 0.24); }
.nav-search span { min-width: 72px; text-align: left; }
kbd { font-family: var(--mono); font-size: 10.5px; padding: 1px 6px; border: 1px solid var(--line-strong); border-radius: 6px; color: var(--muted); }
.nav-menu { display: none; }
.sheet { display: none; }

/* ⌘K 面板 */
.palette { position: fixed; inset: 0; z-index: 90; display: grid; justify-items: center; align-items: start; padding-top: 14vh; background: rgba(0, 0, 0, 0.55); backdrop-filter: blur(6px); opacity: 0; pointer-events: none; transition: opacity .2s; }
.palette.open { opacity: 1; pointer-events: auto; }
.palette-box { width: min(620px, calc(100% - 32px)); border-radius: 18px; border: 1px solid var(--line-strong); background: #101215; box-shadow: 0 40px 120px rgba(0, 0, 0, 0.6); overflow: hidden; transform: translateY(-8px); transition: transform .2s; }
.palette.open .palette-box { transform: none; }
.palette-input { display: flex; align-items: center; gap: 12px; padding: 0 18px; height: 60px; border-bottom: 1px solid var(--line); color: var(--muted); }
.palette-input input { flex: 1; border: 0; outline: none; background: transparent; font-size: 16px; color: var(--text); }
.palette-list { max-height: 420px; overflow: auto; padding: 8px; }
.palette-list a { display: flex; align-items: center; gap: 12px; padding: 10px 12px; border-radius: 12px; }
.palette-list a:hover, .palette-list a:first-child { background: rgba(255, 255, 255, 0.05); }
.palette-list a > span:not(.avatar) { flex: 1; display: grid; line-height: 1.35; }
.palette-list small { color: var(--dim); font-size: 12px; }
.palette-list em { font-style: normal; display: inline-flex; align-items: center; gap: 4px; color: var(--muted); font-size: 12.5px; }
.palette-empty { padding: 28px; text-align: center; color: var(--muted); font-size: 14px; }
.palette-empty a { color: var(--accent); }

/* ---------- 首页 Hero 轮播 ---------- */
.hero {
  --hue: var(--accent);
  position: relative;
  height: clamp(580px, calc(88vh - var(--nav)), 760px);
  overflow: hidden;
  isolation: isolate;
}
.hero::before {
  content: ''; position: absolute; inset: 0; z-index: -2;
  background:
    radial-gradient(48% 60% at 68% 58%, color-mix(in srgb, var(--hue) 16%, transparent), transparent 70%),
    radial-gradient(30% 40% at 12% 20%, rgba(120, 140, 255, 0.05), transparent 70%);
  transition: background 1s;
}
.hero-stage { position: absolute; inset: 0 0 0 28%; z-index: -1; }
.hero-stage .vm-canvas { position: absolute; inset: 0; width: 100% !important; height: 100% !important; }
.hero-inner { position: relative; z-index: 2; height: 100%; display: flex; flex-direction: column; justify-content: center; padding-bottom: 120px; pointer-events: none; }
.hero-copy { max-width: 520px; pointer-events: auto; }
.hero-copy.swap > * { animation: rise .7s cubic-bezier(.2, .7, .2, 1) both; }
.hero-copy.swap > *:nth-child(2) { animation-delay: .05s; }
.hero-copy.swap > *:nth-child(3) { animation-delay: .1s; }
.hero-copy.swap > *:nth-child(4) { animation-delay: .15s; }
.hero-copy.swap > *:nth-child(5) { animation-delay: .2s; }
@keyframes rise { from { opacity: 0; transform: translateY(14px); } to { opacity: 1; transform: none; } }
.hero-title { margin: 22px 0 18px; font-size: clamp(52px, 6.4vw, 92px); line-height: 0.98; letter-spacing: -0.035em; }
.hero-desc { margin: 0; max-width: 440px; color: var(--soft); font-size: 17px; line-height: 1.7; }
.hero-meta { display: flex; align-items: center; gap: 18px; margin-top: 26px; color: var(--muted); font-size: 13.5px; flex-wrap: wrap; }
.hero-meta .who { display: inline-flex; align-items: center; gap: 10px; color: var(--text); }
.hero-meta span:not(.avatar) { display: inline-flex; align-items: center; gap: 6px; }
.hero-actions { display: flex; gap: 12px; margin-top: 34px; flex-wrap: wrap; }
.hero-hint { position: absolute; right: 40px; top: 28px; z-index: 2; color: var(--dim); font-size: 12px; display: inline-flex; gap: 8px; align-items: center; }
.hero-bar { position: absolute; left: 0; right: 0; bottom: 36px; z-index: 3; }
.hero-bar .container { display: flex; align-items: end; gap: 28px; }
.hero-tabs { flex: 1; display: grid; grid-auto-flow: column; grid-auto-columns: 1fr; gap: 20px; }
.hero-tab { display: grid; gap: 4px; padding: 14px 0 0; border: 0; background: transparent; text-align: left; color: var(--dim); position: relative; transition: color .2s; }
.hero-tab::before { content: ''; position: absolute; left: 0; right: 0; top: 0; height: 2px; border-radius: 2px; background: rgba(255, 255, 255, 0.1); }
.hero-tab i { position: absolute; left: 0; top: 0; height: 2px; width: 0; border-radius: 2px; background: var(--text); }
.hero-tab.active i { animation: fill var(--cycle, 8s) linear forwards; }
.hero.paused .hero-tab.active i { animation-play-state: paused; }
.hero-tab small { font-family: var(--mono); font-size: 11px; letter-spacing: .08em; }
.hero-tab b { font-weight: 500; font-size: 14px; }
.hero-tab:hover, .hero-tab.active { color: var(--text); }
.hero-arrows { display: flex; gap: 10px; }
@keyframes fill { to { width: 100%; } }

/* ---------- 区块 ---------- */
.section { padding-top: 120px; }
.section-head { display: flex; align-items: end; justify-content: space-between; gap: 24px; margin-bottom: 40px; flex-wrap: wrap; }
.section-head h2 { margin-top: 14px; font-size: clamp(28px, 3vw, 40px); line-height: 1.15; }
.section-head p { margin: 10px 0 0; color: var(--muted); max-width: 520px; }
.link-more { display: inline-flex; align-items: center; gap: 8px; color: var(--soft); font-size: 14px; }
.link-more:hover { color: var(--accent); }

.pills { display: flex; gap: 8px; flex-wrap: wrap; }
.pill-btn { height: 36px; padding: 0 16px; border-radius: 999px; border: 1px solid var(--line-strong); background: transparent; color: var(--muted); font-size: 13.5px; transition: all .2s; }
.pill-btn:hover { color: var(--text); border-color: rgba(255, 255, 255, 0.26); }
.pill-btn.active { background: var(--text); border-color: var(--text); color: #0b0c0e; font-weight: 500; }
.pill-btn span { margin-left: 6px; opacity: .55; font-family: var(--mono); font-size: 11.5px; }

/* ---------- 项目卡片 ---------- */
.pgrid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 28px; }
.pcard {
  --hue: var(--accent);
  position: relative;
  display: flex; flex-direction: column;
  border-radius: 20px;
  border: 1px solid rgba(255, 255, 255, 0.1);
  background: linear-gradient(180deg, #15181d, #0f1115);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.06), 0 24px 48px -24px rgba(0, 0, 0, 0.9);
  overflow: hidden;
  transition: transform .35s cubic-bezier(.2, .7, .2, 1), border-color .3s, box-shadow .35s;
}
.pcard:hover { transform: translateY(-4px); border-color: color-mix(in srgb, var(--hue) 35%, transparent); box-shadow: 0 30px 60px -30px color-mix(in srgb, var(--hue) 35%, transparent); }
.pcard-media {
  position: relative;
  aspect-ratio: 16 / 10;
  display: grid; place-items: center;
  background: radial-gradient(70% 80% at 50% 70%, color-mix(in srgb, var(--hue) 16%, #15181c), #0d0f12 75%);
  border-bottom: 1px solid rgba(255, 255, 255, 0.06);
  overflow: hidden;
}
.pcard-media img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; opacity: 0; transition: opacity .5s, transform .6s cubic-bezier(.2, .7, .2, 1); }
.pcard-media.ready img { opacity: 1; }
.pcard:hover .pcard-media img { transform: scale(1.05); }
.pcard-ph { font-size: 44px; font-weight: 600; color: rgba(255, 255, 255, 0.06); }
.pcard-media:not(.ready) .pcard-ph { animation: pulse 1.6s ease-in-out infinite; }
.pcard-media:not(.ready)::after { content: ''; position: absolute; inset: 0; background: linear-gradient(100deg, transparent 30%, rgba(255, 255, 255, 0.045) 50%, transparent 70%) 0 0 / 250% 100%; animation: shimmer 1.6s linear infinite; }
.pcard-media.failed::after { content: none; }
.pcard-default { display: grid; justify-items: center; gap: 10px; color: color-mix(in srgb, var(--hue) 55%, rgba(255, 255, 255, 0.35)); }
.pcard-default .ic { opacity: .7; }
.pcard-default small { font-size: 12px; letter-spacing: .2em; color: rgba(255, 255, 255, 0.32); }
.pcard.skel { pointer-events: none; --hue: #2a2f36; }
.pcard.skel .pcard-media { background: #111418; }
.sk { display: block; height: 12px; border-radius: 6px; background: linear-gradient(100deg, rgba(255,255,255,.045) 30%, rgba(255,255,255,.09) 50%, rgba(255,255,255,.045) 70%) 0 0 / 250% 100%; animation: shimmer 1.4s linear infinite; }
.sk-title { height: 20px; margin: 4px 0 2px; }
.sk-av { width: 22px; height: 22px; border-radius: 50%; flex: 0 0 auto; }
.pcard.skel .pcard-foot { justify-content: flex-start; }
.ws-card.skel { pointer-events: none; }
.ws-card.skel .ws-cover { background: linear-gradient(100deg, rgba(255,255,255,.03) 30%, rgba(255,255,255,.07) 50%, rgba(255,255,255,.03) 70%) 0 0 / 250% 100%; animation: shimmer 1.4s linear infinite; }
@keyframes shimmer { from { background-position: 125% 0; } to { background-position: -125% 0; } }
@keyframes pulse { 50% { opacity: .4; } }
.pcard-rank { position: absolute; top: 16px; left: 16px; font-family: var(--mono); font-size: 12px; color: var(--text); padding: 3px 10px; border-radius: 999px; background: rgba(0, 0, 0, 0.45); backdrop-filter: blur(8px); border: 1px solid var(--line); }
.pcard-body { display: flex; flex-direction: column; gap: 8px; padding: 20px 22px 20px; flex: 1; }
.pcard-row { display: flex; justify-content: space-between; align-items: center; font-size: 12px; color: var(--muted); }
.pcard-type { letter-spacing: .04em; }
.pcard-star { display: inline-flex; align-items: center; gap: 5px; }
.pcard h3 { font-size: 20px; line-height: 1.25; }
.pcard p { margin: 0; color: var(--muted); font-size: 13.5px; line-height: 1.6; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
/* 简介和收藏数同一行，收藏数靠右下 */
.pcard-end { display: flex; align-items: flex-end; gap: 16px; margin-top: auto; }
.pcard-end p { flex: 1; min-width: 0; }
.pcard-end .pcard-star { flex: 0 0 auto; display: inline-flex; align-items: center; gap: 5px; font-size: 12.5px; color: var(--muted); line-height: 1.6; }
.pcard-foot { display: flex; align-items: center; justify-content: space-between; gap: 12px; margin-top: auto; padding-top: 16px; font-size: 12.5px; color: var(--soft); }
.pcard-owner { display: inline-flex; align-items: center; gap: 8px; min-width: 0; }
.pcard-owner i { color: var(--dim); font-style: normal; }
.pcard-stats { display: inline-flex; gap: 14px; color: var(--muted); }
.pcard-stats span { display: inline-flex; align-items: center; gap: 5px; }
.pgrid.list { grid-template-columns: 1fr; gap: 16px; }
.pcard.list { flex-direction: row; }
.pcard.list .pcard-media { flex: 0 0 300px; aspect-ratio: auto; min-height: 170px; }

/* ---------- 讨论精选 ---------- */
.quotes { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 28px; }
.quote { display: flex; flex-direction: column; gap: 18px; padding: 30px; border-radius: 20px; border: 1px solid var(--line); background: linear-gradient(180deg, #121418, var(--surface)); transition: border-color .3s; }
.quote:hover { border-color: var(--line-strong); }
.quote-mark { font-size: 44px; line-height: .6; color: var(--accent); font-family: Georgia, serif; height: 18px; }
.quote p { margin: 0; color: var(--soft); font-size: 15.5px; line-height: 1.75; flex: 1; }
.quote-foot { display: flex; align-items: center; gap: 10px; font-size: 13px; color: var(--muted); }
.quote-foot b { color: var(--text); font-weight: 500; }
.quote-foot a { color: var(--text); }
.quote-foot a:hover { color: var(--accent); }
.quote-foot .likes { margin-left: auto; display: inline-flex; align-items: center; gap: 5px; }

/* ---------- 创客 ---------- */
.makers { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 20px; }
.maker { display: grid; justify-items: start; gap: 4px; padding: 26px; border-radius: 20px; border: 1px solid var(--line); background: var(--surface); }
.maker .avatar { margin-bottom: 14px; }
.maker b { font-size: 16px; font-weight: 600; }
.maker small { color: var(--dim); font-family: var(--mono); font-size: 12px; }
.maker p { margin: 8px 0 16px; color: var(--muted); font-size: 13.5px; min-height: 44px; }
.maker .stats { display: flex; gap: 16px; font-size: 12.5px; color: var(--muted); margin-bottom: 18px; }
.maker .stats b { color: var(--text); font-size: 13px; font-weight: 500; }

/* ---------- 发布引导 ---------- */
.publish {
  position: relative; overflow: hidden;
  display: grid; grid-template-columns: 1.1fr 1fr; gap: 64px; align-items: center;
  padding: 64px; border-radius: 28px; border: 1px solid var(--line);
  background:
    radial-gradient(60% 80% at 100% 100%, rgba(200, 255, 62, 0.12), transparent 70%),
    var(--bg-2);
}
.publish h2 { font-size: clamp(30px, 3.4vw, 46px); line-height: 1.12; margin: 16px 0 16px; }
.publish p { margin: 0; color: var(--soft); max-width: 440px; }
.publish .actions { display: flex; gap: 12px; margin-top: 30px; flex-wrap: wrap; }
.steps { list-style: none; margin: 0; padding: 0; display: grid; gap: 4px; counter-reset: step; }
.steps li { display: grid; grid-template-columns: 48px 1fr; gap: 6px 16px; padding: 18px 0; border-bottom: 1px solid var(--line); }
.steps li:last-child { border-bottom: 0; }
.steps li::before { counter-increment: step; content: '0' counter(step); grid-row: span 2; font-family: var(--mono); font-size: 13px; color: var(--accent); padding-top: 3px; }
.steps b { font-weight: 600; font-size: 16px; }
.steps span { color: var(--muted); font-size: 13.5px; }
code, .md code { font-family: var(--mono); font-size: .86em; color: var(--accent); background: var(--accent-soft); padding: 1px 6px; border-radius: 5px; }

/* ---------- 页脚 ---------- */
.site-footer { margin-top: 140px; border-top: 1px solid var(--line); padding: 64px 0 36px; color: var(--muted); font-size: 13.5px; }
.footer-grid { display: grid; grid-template-columns: 2fr 1fr 1fr 1fr; gap: 40px; }
.footer-brand img { height: 18px; width: auto; margin-bottom: 18px; }
.footer-brand p { margin: 0; line-height: 1.8; }
.footer-grid h6 { font-size: 13px; color: var(--text); font-weight: 500; margin-bottom: 14px; }
.footer-grid a { display: block; padding: 4px 0; }
.footer-grid a:hover { color: var(--text); }
.footer-bottom { display: flex; justify-content: space-between; gap: 16px; margin-top: 56px; padding-top: 24px; border-top: 1px solid var(--line); color: var(--dim); font-size: 12.5px; }

/* ---------- 发现页 ---------- */
.page-hero { padding-top: 80px; padding-bottom: 48px; position: relative; }
.page-hero::before { content: ''; position: absolute; inset: -64px -50vw 0; z-index: -1; background: radial-gradient(28% 70% at 35% 0%, rgba(200, 255, 62, 0.07), transparent 70%); }
.page-hero h1 { font-size: clamp(40px, 5vw, 64px); line-height: 1.05; letter-spacing: -0.03em; margin: 18px 0 16px; }
.page-hero p { margin: 0; color: var(--soft); font-size: 17px; max-width: 560px; }
.searchbox { position: relative; display: block; max-width: 600px; margin-top: 36px; }
.searchbox .ic { position: absolute; left: 20px; top: 50%; transform: translateY(-50%); color: var(--muted); }
.searchbox input { width: 100%; height: 56px; padding: 0 80px 0 52px; border-radius: 999px; border: 1px solid var(--line-strong); background: #121418; outline: none; font-size: 15px; transition: border-color .2s, box-shadow .2s; }
.searchbox input:focus { border-color: var(--accent-line); box-shadow: 0 0 0 4px var(--accent-soft); }
.searchbox kbd { position: absolute; right: 20px; top: 50%; transform: translateY(-50%); }
.filterbar { position: sticky; top: var(--nav); z-index: 20; padding: 16px 0; margin-bottom: 32px; background: rgba(7, 8, 10, 0.82); backdrop-filter: blur(16px); -webkit-backdrop-filter: blur(16px); border-bottom: 1px solid var(--line); }
.filterbar .container { display: flex; align-items: center; justify-content: space-between; gap: 16px; flex-wrap: wrap; }
.filterbar .right { display: flex; align-items: center; gap: 10px; }
.divider-v { width: 1px; height: 22px; background: var(--line-strong); margin: 0 6px; align-self: center; }
.result-count { color: var(--muted); font-size: 14px; margin-bottom: 20px; }
.result-count b { color: var(--text); font-weight: 500; }
.select {
  appearance: none; height: 36px; padding: 0 36px 0 16px;
  border-radius: 999px; border: 1px solid var(--line-strong);
  background: transparent url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' fill='none' stroke='%238f96a0' stroke-width='1.6'%3E%3Cpath d='M3 4.5 6 7.5 9 4.5'/%3E%3C/svg%3E") no-repeat right 14px center;
  font-size: 13.5px; color: var(--soft); outline: none;
}
.select option { background: var(--surface); }
.seg { display: inline-flex; padding: 3px; border-radius: 999px; border: 1px solid var(--line-strong); }
.seg button { height: 30px; padding: 0 12px; border: 0; border-radius: 999px; background: transparent; color: var(--muted); font-size: 13px; display: inline-flex; align-items: center; gap: 6px; }
.seg button.active { background: rgba(255, 255, 255, 0.1); color: var(--text); }
.empty { padding: 80px 16px; text-align: center; color: var(--muted); font-size: 14px; }

/* ---------- 项目详情 ---------- */
.p-hero { --hue: var(--accent); padding-top: 56px; padding-bottom: 36px; position: relative; }
.p-hero::before { content: ''; position: absolute; inset: -64px -50vw -200px; z-index: -1; background: radial-gradient(28% 60% at 32% 10%, color-mix(in srgb, var(--hue) 12%, transparent), transparent 70%); pointer-events: none; }
.p-crumbs { display: flex; gap: 8px; align-items: center; color: var(--muted); font-size: 13.5px; }
.p-crumbs a:hover { color: var(--text); }
.p-head { display: flex; align-items: end; justify-content: space-between; gap: 32px; flex-wrap: wrap; margin-top: 22px; }
.p-title { display: flex; align-items: center; gap: 16px; flex-wrap: wrap; }
.p-title h1 { font-size: clamp(36px, 4.4vw, 56px); line-height: 1.05; letter-spacing: -0.03em; }
.p-title .badge { height: 26px; padding: 0 10px; display: inline-flex; align-items: center; border-radius: 999px; border: 1px solid var(--line-strong); font-size: 12px; color: var(--muted); }
.p-desc { margin: 16px 0 0; color: var(--soft); font-size: 17px; max-width: 680px; }
.p-meta { display: flex; align-items: center; gap: 20px; margin-top: 22px; color: var(--muted); font-size: 13.5px; flex-wrap: wrap; }
.p-meta .who { display: inline-flex; align-items: center; gap: 10px; color: var(--text); }
.p-meta .topics { display: flex; gap: 6px; flex-wrap: wrap; }
.p-actions { display: flex; gap: 10px; flex-wrap: wrap; }
.counter { display: inline-flex; align-items: center; height: 40px; border-radius: 999px; border: 1px solid var(--line-strong); overflow: hidden; }
.counter button { display: inline-flex; align-items: center; gap: 8px; height: 100%; padding: 0 14px 0 16px; border: 0; background: transparent; font-size: 13.5px; font-weight: 500; }
.counter button:hover { background: rgba(255, 255, 255, 0.06); }
.counter span { padding: 0 16px 0 12px; border-left: 1px solid var(--line-strong); font-family: var(--mono); font-size: 12.5px; color: var(--muted); height: 100%; display: inline-flex; align-items: center; }
.counter.on { border-color: var(--accent-line); background: var(--accent-soft); }
.counter.on button { color: var(--accent); }
.counter.on button .ic { fill: var(--accent); }

.p-stage {
  --hue: var(--accent);
  position: relative; height: clamp(420px, 62vh, 640px);
  border-radius: 28px; border: 1px solid var(--line); overflow: hidden;
  background:
    radial-gradient(50% 60% at 50% 70%, color-mix(in srgb, var(--hue) 12%, transparent), transparent 70%),
    radial-gradient(120% 90% at 50% 80%, #13161a, #08090b 75%);
}
.p-stage .vm-canvas { position: absolute; inset: 0; width: 100% !important; height: 100% !important; }
.stage-tools { position: absolute; top: 20px; right: 20px; display: flex; gap: 8px; z-index: 2; }
.stage-tools .btn { background: rgba(10, 11, 13, 0.55); backdrop-filter: blur(10px); }
.stage-tools .btn.on { background: rgba(200, 255, 62, 0.12); }
.stage-tools .btn-primary, .stage-tools .btn-primary:hover { background: var(--accent); color: var(--accent-ink); }
.stage-info { position: absolute; left: 24px; bottom: 22px; z-index: 2; display: flex; gap: 8px; flex-wrap: wrap; pointer-events: none; }
.stage-info .chip { background: rgba(10, 11, 13, 0.55); backdrop-filter: blur(10px); }

.p-tabs { position: sticky; top: var(--nav); z-index: 20; margin-top: 48px; background: rgba(7, 8, 10, 0.85); backdrop-filter: blur(16px); -webkit-backdrop-filter: blur(16px); border-bottom: 1px solid var(--line); }
.p-tabs .container { display: flex; align-items: center; gap: 6px; overflow-x: auto; scrollbar-width: none; }
.p-tabs .container::-webkit-scrollbar { display: none; }
.p-tabs button { position: relative; display: inline-flex; align-items: center; gap: 8px; height: 56px; padding: 0 16px; border: 0; background: transparent; color: var(--muted); font-size: 14.5px; white-space: nowrap; }
.p-tabs button:hover { color: var(--text); }
.p-tabs button.active { color: var(--text); font-weight: 500; }
.p-tabs button.active::after { content: ''; position: absolute; left: 14px; right: 14px; bottom: -1px; height: 2px; border-radius: 2px; background: var(--accent); }
.p-tabs .count { padding: 0 8px; border-radius: 999px; background: rgba(255, 255, 255, 0.07); font-size: 11.5px; font-family: var(--mono); color: var(--soft); }
.p-tabs .spacer { flex: 1; }
.p-body { display: grid; grid-template-columns: minmax(0, 1fr) 300px; gap: 64px; align-items: start; padding-top: 48px; }
.p-body > div { min-width: 0; }
.p-main { display: grid; grid-template-columns: minmax(0, 1fr); gap: 24px; min-width: 0; }

.card { border-radius: 20px; border: 1px solid var(--line); background: var(--surface); overflow: hidden; }
.card-head { display: flex; align-items: center; justify-content: space-between; gap: 12px; min-height: 56px; padding: 10px 20px; border-bottom: 1px solid var(--line); flex-wrap: wrap; }
.branch { display: inline-flex; align-items: center; gap: 6px; height: 32px; padding: 0 12px; border-radius: 999px; border: 1px solid var(--line-strong); font-size: 12.5px; font-family: var(--mono); }
.path { display: flex; align-items: center; gap: 6px; font-size: 14px; flex-wrap: wrap; }
.path a { color: var(--accent); cursor: pointer; }
.path a:hover { text-decoration: underline; }
.path .sep { color: var(--dim); }
.last-commit { display: flex; align-items: center; gap: 10px; padding: 12px 20px; border-bottom: 1px solid var(--line); background: rgba(255, 255, 255, 0.015); font-size: 13px; color: var(--muted); flex-wrap: wrap; }
.last-commit b { color: var(--text); font-weight: 500; }
.last-commit .msg { flex: 1; min-width: 160px; overflow: hidden; white-space: nowrap; text-overflow: ellipsis; }
.last-commit .h { font-family: var(--mono); font-size: 12px; color: var(--dim); }
.ftable { width: 100%; border-collapse: collapse; table-layout: fixed; }
.ftable tr { border-bottom: 1px solid var(--line); transition: background .15s; }
.ftable tr:last-child { border-bottom: 0; }
.ftable tr:hover { background: rgba(255, 255, 255, 0.025); }
.ftable td { padding: 12px 20px; font-size: 13.5px; }
.ftable td:first-child { width: 36%; }
.ftable .fname { display: inline-flex; align-items: center; gap: 10px; cursor: pointer; max-width: 100%; }
.ftable .fname span { overflow: hidden; white-space: nowrap; text-overflow: ellipsis; }
.ftable .fname:hover { color: var(--accent); }
.ftable .fname .ic { color: var(--dim); }
.ftable .fname.dir .ic { color: #8fc8ff; }
.ftable .cmsg { color: var(--muted); overflow: hidden; white-space: nowrap; text-overflow: ellipsis; }
.ftable .ctime { color: var(--dim); text-align: right; white-space: nowrap; font-size: 12.5px; width: 110px; }
.code { margin: 0; overflow: auto; max-height: 620px; padding: 12px 0; font-family: var(--mono); font-size: 12.5px; line-height: 1.75; counter-reset: ln; font-variant-ligatures: none; }
.code .ln { display: block; padding-right: 20px; white-space: pre; }
.code .ln::before { counter-increment: ln; content: counter(ln); display: inline-block; width: 56px; padding-right: 16px; margin-right: 16px; text-align: right; color: var(--dim); user-select: none; }
.code .ln:hover { background: rgba(255, 255, 255, 0.025); }
.binary { padding: 56px; text-align: center; color: var(--muted); display: grid; gap: 12px; justify-items: center; }

.md { padding: 12px 40px 40px; font-size: 15px; line-height: 1.85; color: var(--soft); }
.md h1 { font-size: 30px; margin: 24px 0 18px; color: var(--text); letter-spacing: -0.02em; }
.md h2 { font-size: 21px; margin: 40px 0 14px; color: var(--text); }
.md a { color: var(--accent); }
.md blockquote { margin: 18px 0; padding: 6px 20px; border-left: 2px solid var(--accent); color: var(--muted); background: rgba(255, 255, 255, 0.02); border-radius: 0 10px 10px 0; }
.md table { border-collapse: collapse; width: 100%; font-size: 14px; margin: 16px 0; }
.md th, .md td { border-bottom: 1px solid var(--line-strong); padding: 10px 12px; text-align: left; }
.md th { color: var(--text); font-weight: 500; }
.md pre { background: var(--bg-2); border: 1px solid var(--line); border-radius: 14px; padding: 18px 20px; overflow: auto; }
.md pre code { background: none; color: var(--soft); padding: 0; }
.md li { margin: 4px 0; }

.aside { display: grid; gap: 36px; position: sticky; top: calc(var(--nav) + 80px); }
.aside h5 { font-size: 12px; font-family: var(--mono); letter-spacing: .1em; text-transform: uppercase; color: var(--dim); font-weight: 500; margin-bottom: 14px; }
.aside p { margin: 0 0 16px; color: var(--soft); font-size: 14px; }
.facts { display: grid; grid-template-columns: 1fr 1fr; gap: 1px; background: var(--line); border: 1px solid var(--line); border-radius: 16px; overflow: hidden; }
.facts div { background: var(--bg); padding: 14px 16px; display: grid; gap: 2px; }
.facts small { color: var(--dim); font-size: 12px; }
.facts b { font-size: 16px; font-weight: 500; }
.people { display: flex; gap: 8px; flex-wrap: wrap; }
.langbar { display: flex; height: 6px; border-radius: 6px; overflow: hidden; gap: 3px; margin-bottom: 12px; }
.langs { display: flex; flex-wrap: wrap; gap: 6px 16px; font-size: 12.5px; color: var(--muted); }
.langs i { display: inline-block; width: 8px; height: 8px; border-radius: 50%; margin-right: 6px; }
.related { display: grid; gap: 12px; }
.related a { display: flex; align-items: center; gap: 14px; padding: 8px; margin: -8px; border-radius: 14px; font-size: 14px; transition: background .2s; }
.related a:hover { background: rgba(255, 255, 255, 0.04); }
.related .thumb { position: relative; width: 64px; height: 48px; border-radius: 10px; overflow: hidden; background: var(--surface-2); flex: 0 0 auto; }
.related .thumb img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.related small { display: block; font-size: 12px; color: var(--dim); }

/* 讨论 */
.composer { display: grid; grid-template-columns: 40px 1fr; gap: 16px; padding-bottom: 36px; margin-bottom: 12px; border-bottom: 1px solid var(--line); }
.composer textarea { width: 100%; min-height: 110px; padding: 16px 18px; resize: vertical; border-radius: 16px; border: 1px solid var(--line-strong); background: var(--bg-2); outline: none; font-size: 14.5px; transition: border-color .2s, box-shadow .2s; }
.composer textarea:focus { border-color: var(--accent-line); box-shadow: 0 0 0 4px var(--accent-soft); }
.composer .row { display: flex; justify-content: space-between; align-items: center; gap: 10px; margin-top: 10px; color: var(--dim); font-size: 12.5px; }
.thread { display: grid; grid-template-columns: 40px minmax(0, 1fr); gap: 16px; padding: 24px 0; border-bottom: 1px solid var(--line); }
.thread .thread { padding: 18px 0 0; border: 0; grid-template-columns: 32px minmax(0, 1fr); }
.c-head { display: flex; align-items: center; gap: 10px; font-size: 13.5px; color: var(--muted); flex-wrap: wrap; }
.c-head b { color: var(--text); font-weight: 500; }
.c-head .role { padding: 0 8px; border-radius: 999px; border: 1px solid var(--accent-line); color: var(--accent); font-size: 11.5px; }
.c-body { margin-top: 6px; font-size: 15px; line-height: 1.75; color: var(--soft); white-space: pre-wrap; word-break: break-word; }
.c-actions { display: flex; gap: 6px; margin: 10px 0 0 -10px; }
.react { display: inline-flex; align-items: center; gap: 6px; height: 30px; padding: 0 10px; border-radius: 999px; border: 0; background: transparent; font-size: 13px; color: var(--muted); }
.react:hover { background: rgba(255, 255, 255, 0.05); color: var(--text); }
.react.on { color: var(--accent); }
.react.on .ic { fill: var(--accent); }
.replies { border-left: 1px solid var(--line-strong); padding-left: 20px; margin-top: 4px; }
.reply-box { display: flex; gap: 8px; margin-top: 12px; }
.reply-box input { flex: 1; min-width: 0; height: 38px; padding: 0 16px; border-radius: 999px; border: 1px solid var(--line-strong); background: var(--bg-2); outline: none; font-size: 13.5px; }

/* Fork / 动态 */
.rows > div { display: grid; grid-template-columns: auto minmax(0, 1fr) auto; gap: 16px; align-items: center; padding: 18px 22px; border-bottom: 1px solid var(--line); }
.rows > div:last-child { border-bottom: 0; }
.rows b { font-weight: 500; }
.rows .sub { display: block; font-size: 13px; color: var(--muted); }
.rows .meta { display: inline-flex; gap: 14px; align-items: center; font-size: 12.5px; color: var(--dim); }
.rows .meta span { display: inline-flex; gap: 5px; align-items: center; }
.timeline { position: relative; padding-left: 28px; }
.timeline::before { content: ''; position: absolute; left: 6px; top: 10px; bottom: 10px; width: 1px; background: var(--line-strong); }
.timeline .day { position: relative; margin: 28px 0 12px; font-size: 13px; color: var(--muted); }
.timeline .day:first-child { margin-top: 0; }
.timeline .day::before { content: ''; position: absolute; left: -27px; top: 6px; width: 11px; height: 11px; border-radius: 50%; background: var(--bg); border: 2px solid var(--accent); }

.toast { position: fixed; left: 50%; bottom: 32px; z-index: 100; transform: translate(-50%, 20px); padding: 12px 20px; border-radius: 999px; background: var(--text); color: #0b0c0e; font-size: 13.5px; font-weight: 500; opacity: 0; pointer-events: none; transition: opacity .25s, transform .25s; }
.toast.show { opacity: 1; transform: translate(-50%, 0); }

/* 3D 舞台公用 */
.joint-tag { position: absolute; left: 50%; top: 22px; z-index: 3; transform: translate(-50%, -6px); padding: 5px 12px; border-radius: 999px; background: var(--accent); color: var(--accent-ink); font-family: var(--mono); font-size: 12px; font-weight: 600; opacity: 0; transition: opacity .15s, transform .15s; pointer-events: none; }
.joint-tag.show { opacity: 1; transform: translate(-50%, 0); }
.loader { position: absolute; inset: 0; display: grid; place-items: center; pointer-events: none; transition: opacity .4s; z-index: 1; }
.loader.hidden { opacity: 0; }
.loader-box { display: grid; gap: 14px; justify-items: center; color: var(--muted); font-size: 13px; }
.loader:not(.error) #loader-text { display: none; }
.loader.error .spinner { display: none; }
.loader.error .loader-box { color: var(--danger); max-width: 420px; text-align: center; padding: 0 16px; }
/* 切换模型时的小加载环：两段弧线反向旋转 */
.spinner { position: relative; width: 34px; height: 34px; }
.spinner::before, .spinner::after { content: ''; position: absolute; inset: 0; border-radius: 50%; border: 1.5px solid transparent; }
.spinner::before { border-top-color: var(--accent); animation: spin 0.9s cubic-bezier(.5, .1, .5, .9) infinite; }
.spinner::after { inset: 7px; border-bottom-color: rgba(255, 255, 255, 0.35); animation: spin 1.3s linear infinite reverse; }
@keyframes spin { to { transform: rotate(360deg); } }

/* ---------- 启动页 ---------- */
.no-splash .splash { display: none; }
.splash { position: fixed; inset: 0; z-index: 300; display: grid; place-items: center; background: var(--bg);
  transition: opacity .7s ease, visibility .7s; }
.splash::before { content: ''; position: absolute; inset: 0; pointer-events: none;
  background:
    radial-gradient(40% 35% at 50% 45%, rgba(200, 255, 62, 0.07), transparent 70%),
    linear-gradient(rgba(255, 255, 255, 0.03) 1px, transparent 1px) 50% 50% / 80px 80px,
    linear-gradient(90deg, rgba(255, 255, 255, 0.03) 1px, transparent 1px) 50% 50% / 80px 80px;
  -webkit-mask-image: radial-gradient(50% 50% at 50% 50%, #000, transparent 85%);
          mask-image: radial-gradient(50% 50% at 50% 50%, #000, transparent 85%); }
.splash-inner { position: relative; display: grid; justify-items: center; gap: 28px; transition: transform .8s cubic-bezier(.6, 0, .2, 1), opacity .5s; }
.splash-logo { width: 168px; height: auto; animation: splash-in .9s cubic-bezier(.2, .7, .2, 1) both, breathe 2.4s ease-in-out .9s infinite; }
.splash-bar { width: 200px; height: 1px; background: rgba(255, 255, 255, 0.1); overflow: hidden; animation: splash-in .9s .15s cubic-bezier(.2, .7, .2, 1) both; }
.splash-bar i { display: block; height: 100%; background: var(--accent); transform: scaleX(0); transform-origin: left; transition: transform .4s ease-out; box-shadow: 0 0 12px var(--accent); }
.splash-foot { position: absolute; left: 40px; right: 40px; bottom: 32px; display: flex; justify-content: space-between; align-items: end;
  font-family: var(--mono); font-size: 11px; letter-spacing: .18em; color: var(--dim); }
.splash-pct { font-size: 13px; letter-spacing: .1em; color: var(--soft); font-variant-numeric: tabular-nums; }
.splash.out { opacity: 0; visibility: hidden; pointer-events: none; }
.splash.out .splash-inner { transform: translateY(-14px) scale(.97); opacity: 0; }
@keyframes splash-in { from { opacity: 0; transform: translateY(10px); } }
@keyframes breathe { 50% { opacity: .55; } }
@media (max-width: 820px) { .splash-foot { left: 16px; right: 16px; } .splash-foot span:first-child { display: none; } }

/* ---------- 工作室 ---------- */
body.studio { height: 100vh; height: 100dvh; overflow: hidden; background: var(--bg); }
body.studio::before, body.studio::after { display: none; }
.studio .stage { position: fixed; inset: 0 0 0 268px; background: radial-gradient(800px 560px at 50% 58%, #15191d, var(--bg) 72%); }
.studio .stage .vm-canvas { position: absolute; inset: 0; width: 100% !important; height: 100% !important; }
/* 控制台：左侧机器人列表 + 底部操作条 + 摆姿势时右侧关节面板 */
.lab-rail, .lab-joints, .lab-hud, .lab-takes {
  background: rgba(12, 14, 17, 0.72); backdrop-filter: blur(18px); -webkit-backdrop-filter: blur(18px);
  border: 1px solid var(--line); border-radius: 20px;
}
.lab-rail { position: fixed; z-index: 10; top: calc(var(--nav) + 20px); left: 20px; bottom: 20px; width: 248px; display: flex; flex-direction: column; overflow: hidden; }
.lab-rail-head { display: flex; align-items: center; justify-content: space-between; gap: 8px; padding: 16px 16px 10px; font-size: 12px; letter-spacing: .14em; color: var(--muted); }
.lab-rail-head small { font-family: var(--mono); letter-spacing: 0; color: var(--dim); }
.lab-list { flex: 1; overflow: auto; padding: 0 8px 8px; display: grid; align-content: start; gap: 2px; }
.lab-item { position: relative; display: flex; align-items: center; gap: 12px; width: 100%; padding: 10px; border: 0; border-radius: 12px; background: transparent; color: var(--soft); text-align: left; transition: background .15s; }
.lab-item:hover { background: rgba(255, 255, 255, 0.04); }
.lab-item .no { font-family: var(--mono); font-size: 11px; color: var(--dim); width: 18px; }
.lab-item .nm { display: grid; min-width: 0; }
.lab-item b { font-size: 14px; font-weight: 500; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.lab-item small { font-size: 12px; color: var(--dim); }
.lab-item.active { background: rgba(200, 255, 62, 0.07); color: var(--text); }
.lab-item.active .no { color: var(--accent); }
.lab-item.active::before { content: ''; position: absolute; left: -8px; top: 12px; bottom: 12px; width: 3px; border-radius: 0 3px 3px 0; background: var(--accent); }
.lab-skel { height: 52px; border-radius: 12px; background: linear-gradient(100deg, rgba(255,255,255,.03) 30%, rgba(255,255,255,.07) 50%, rgba(255,255,255,.03) 70%) 0 0 / 250% 100%; animation: shimmer 1.4s linear infinite; }
.lab-meta { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; padding: 14px 16px 16px; border-top: 1px solid var(--line); }
.lab-meta div { display: grid; gap: 2px; }
.lab-meta .wide { grid-column: 1 / -1; }
.lab-meta small { font-size: 11px; color: var(--dim); }
.lab-meta b { font-family: var(--mono); font-size: 12.5px; font-weight: 500; color: var(--text); }
.lab-meta a { font-size: 13px; color: var(--accent); }

.lab-joints { position: fixed; z-index: 10; top: calc(var(--nav) + 82px); right: 20px; bottom: 110px; width: 280px; display: flex; flex-direction: column; overflow: hidden; }
.lab-joints .joint-list { flex: 1; grid-template-columns: 1fr; max-height: none; padding: 0 16px 16px; }

.lab-bottom { position: fixed; z-index: 10; left: calc(50% + 134px); bottom: 20px; transform: translateX(-50%); display: grid; justify-items: center; gap: 10px; max-width: calc(100vw - 308px); }
.lab-hud { position: relative; display: flex; align-items: center; gap: 18px; min-height: 82px; padding: 12px 12px 12px 18px; border-radius: 22px; max-width: 100%; }
.lab-mode { display: grid; grid-auto-flow: column; gap: 2px; padding: 4px; border-radius: 999px; background: rgba(12, 14, 17, 0.72); backdrop-filter: blur(18px); -webkit-backdrop-filter: blur(18px); border: 1px solid var(--line); }
.lab-mode button { white-space: nowrap; height: 32px; padding: 0 18px; border: 0; border-radius: 999px; background: transparent; color: var(--muted); font-size: 13px; }
.lab-mode button.active { background: var(--accent); color: var(--accent-ink); font-weight: 600; }
.lab-drive { display: flex; align-items: center; gap: 18px; }
.lab-drive[hidden], .lab-pose-hint[hidden], .lab-explode[hidden] { display: none; }
.lab-explode { display: flex; align-items: center; gap: 16px; }
.lab-explode .btn { min-width: 64px; }
.keycaps { display: grid; grid-template-columns: repeat(3, 38px); grid-template-rows: repeat(2, 38px); gap: 5px; }
.lab-speed { display: grid; gap: 6px; width: 220px; font-size: 12px; color: var(--muted); }
.lab-speed label { display: flex; justify-content: space-between; }
.lab-speed output { font-family: var(--mono); color: var(--text); }
.lab-speed input { width: 100%; accent-color: var(--accent); }
.lab-pose-hint { width: 360px; font-size: 13px; color: var(--muted); line-height: 1.6; }
.lab-actions { display: flex; align-items: center; gap: 6px; padding-left: 14px; border-left: 1px solid var(--line); }
.lab-icon { position: relative; width: 40px; height: 40px; display: grid; place-items: center; border-radius: 12px; border: 1px solid var(--line-strong); background: transparent; color: var(--soft); }
.lab-icon:hover { color: var(--text); border-color: rgba(255, 255, 255, 0.26); }
.lab-icon em { position: absolute; top: -5px; right: -5px; min-width: 18px; height: 18px; padding: 0 5px; border-radius: 9px; background: var(--accent); color: var(--accent-ink); font: 600 11px/18px var(--mono); font-style: normal; }
.lab-rec { white-space: nowrap; height: 40px; display: inline-flex; align-items: center; gap: 8px; padding: 0 16px; border-radius: 12px; border: 1px solid rgba(255, 107, 91, 0.35); background: rgba(255, 107, 91, 0.08); color: var(--danger); font-size: 13px; }
.lab-rec.recording { background: var(--danger); color: #1a0a08; border-color: var(--danger); }
.lab-takes { position: absolute; right: 0; bottom: calc(100% + 10px); width: 380px; max-width: calc(100vw - 32px); padding-bottom: 12px; }
.lab-takes .takes { margin: 0; padding: 0 12px; }
.lab-takes .empty { padding: 12px 4px; font-size: 13px; }

/* 加载：舞台中央的进度环 */
.lab-load { position: fixed; z-index: 5; left: calc(50% + 134px); top: 50%; transform: translate(-50%, -50%); display: grid; justify-items: center; gap: 10px; pointer-events: none; transition: opacity .5s, transform .5s; }
.lab-load.done { opacity: 0; transform: translate(-50%, -46%); }
.lab-load-ring { position: relative; width: 92px; height: 92px; display: grid; place-items: center; margin-bottom: 6px; }
.lab-load-ring svg { position: absolute; inset: 0; transform: rotate(-90deg); }
.lab-load-ring circle { fill: none; stroke: rgba(255, 255, 255, 0.08); stroke-width: 3; }
.lab-load-ring .arc { stroke: var(--accent); stroke-linecap: round; stroke-dasharray: 100; stroke-dashoffset: 100; transition: stroke-dashoffset .3s ease-out; filter: drop-shadow(0 0 6px rgba(200, 255, 62, 0.6)); }
.lab-load-ring span { font: 500 22px var(--mono); color: var(--text); }
.lab-load-ring span::after { content: '%'; font-size: 12px; color: var(--dim); margin-left: 2px; }
.lab-load b { font-size: 15px; font-weight: 600; }
.lab-load small { font-size: 12px; color: var(--dim); }
.lab-load.error .lab-load-ring { display: none; }
.lab-load.error small { color: var(--danger); font-size: 13px; max-width: 360px; text-align: center; }

.key { display: grid; place-items: center; border-radius: 10px; border: 1px solid var(--line-strong); border-bottom-width: 3px; background: rgba(255, 255, 255, 0.03); color: var(--muted); font-family: var(--mono); font-size: 12px; user-select: none; touch-action: none; transition: all .08s; }
.key.pressed { background: var(--accent); border-color: var(--accent); color: var(--accent-ink); transform: translateY(2px); border-bottom-width: 1px; }
.key[data-key="up"] { grid-column: 2; grid-row: 1; }
.key[data-key="left"] { grid-column: 1; grid-row: 2; }
.key[data-key="down"] { grid-column: 2; grid-row: 2; }
.key[data-key="right"] { grid-column: 3; grid-row: 2; }
.key-space { height: 38px; padding: 0 14px; white-space: nowrap; }
.kbd-hint { font-size: 11.5px; color: var(--dim); }
.joint-list { display: grid; gap: 12px; overflow: auto; }
.joint-row { display: grid; grid-template-columns: 1fr auto; gap: 2px 8px; align-items: center; font-size: 12px; }
.joint-row label { font-family: var(--mono); color: var(--muted); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.joint-row output { font-family: var(--mono); color: var(--text); }
.joint-row input { grid-column: 1 / -1; width: 100%; accent-color: var(--accent); }
.takes { display: grid; gap: 6px; max-height: 240px; overflow: auto; }
.take { display: flex; align-items: center; gap: 6px; padding: 8px 10px; border-radius: 12px; border: 1px solid var(--line); font-size: 13px; }
.take span { flex: 1; color: var(--muted); font-size: 12px; }
.take b { color: var(--text); font-weight: 500; margin-right: 8px; }
.rec-dot { width: 8px; height: 8px; border-radius: 50%; background: currentColor; }
.recording .rec-dot { animation: blink 1s infinite; }
@keyframes blink { 50% { opacity: .2; } }

/* ---------- 响应式 ---------- */
@media (max-width: 1100px) {
  .pgrid, .quotes { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .makers { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .p-body { grid-template-columns: 1fr; gap: 48px; }
  .aside { position: static; }
  .publish { grid-template-columns: 1fr; gap: 32px; padding: 48px; }
  .hero-stage { inset: 0 0 0 20%; }
}
@media (max-width: 820px) {
  .container, .nav-inner { padding: 0 20px; }
  .nav-inner { gap: 16px; }
  .nav-links, .hide-sm { display: none; }
  .nav-search span, .nav-search kbd { display: none; }
  .nav-search { width: 40px; height: 40px; padding: 0; justify-content: center; }
  .nav-menu { display: grid; }
  .nav.open .sheet { display: grid; gap: 4px; padding: 12px 20px 20px; background: rgba(7, 8, 10, 0.96); border-bottom: 1px solid var(--line); }
  .sheet a { padding: 12px 4px; font-size: 16px; color: var(--soft); border-bottom: 1px solid var(--line); }
  .sheet a.active { color: var(--accent); }
  .sheet-actions { display: flex; gap: 10px; margin-top: 14px; }
  .sheet-actions .btn { flex: 1; }

  .hero { height: auto; padding-bottom: 32px; }
  .hero-stage { position: relative; inset: auto; height: 340px; z-index: 0; }
  .hero::after { display: none; }
  .hero-inner { padding-top: 8px; padding-bottom: 0; height: auto; }
  .hero-title { font-size: 46px; margin: 16px 0 12px; }
  .hero-hint { display: none; }
  .hero-bar { position: static; margin-top: 28px; }
  .hero-tabs { grid-auto-flow: row; grid-template-columns: repeat(2, 1fr); gap: 14px; }
  .hero-arrows { display: none; }

  .section { padding-top: 88px; }
  .pgrid, .quotes, .makers { grid-template-columns: 1fr; }
  .pcard.list { flex-direction: column; }
  .pcard.list .pcard-media { flex-basis: auto; aspect-ratio: 16 / 10; }
  .publish { padding: 32px 24px; border-radius: 22px; }
  .footer-grid { grid-template-columns: 1fr 1fr; }
  .footer-brand { grid-column: 1 / -1; }
  .page-hero { padding-top: 48px; padding-bottom: 32px; }
  .filterbar .right { width: 100%; justify-content: space-between; }
  .p-hero { padding-top: 32px; padding-bottom: 28px; }
  .p-stage { border-radius: 20px; height: 360px; }
  .md { padding: 8px 20px 24px; }
  .ftable td:first-child { width: auto; }
  .ftable .cmsg { display: none; }

  .lab-rail { top: calc(var(--nav) + 10px); left: 12px; right: 12px; bottom: auto; width: auto; }
  .lab-rail-head, .lab-meta { display: none; }
  .lab-list { display: flex; overflow-x: auto; padding: 6px; gap: 4px; }
  .lab-item { flex: 0 0 auto; width: auto; padding: 8px 12px; }
  .lab-item .no, .lab-item.active::before { display: none; }
  .lab-joints { top: auto; left: 12px; right: 12px; bottom: 200px; width: auto; max-height: 34vh; }
  .lab-bottom { left: 50%; bottom: 12px; max-width: calc(100vw - 24px); width: max-content; }
  .lab-hud { flex-wrap: wrap; justify-content: center; gap: 10px; padding: 12px; }
  .lab-speed { width: 150px; }
  .lab-speed .kbd-hint { display: none; }
  .lab-pose-hint { width: auto; flex: 1 1 100%; text-align: center; font-size: 12px; }
  .lab-actions { border-left: 0; padding-left: 0; }
  .lab-load { left: 50%; }
  .studio .stage { left: 0; }
}
@media (prefers-reduced-motion: reduce) {
  * { transition: none !important; animation: none !important; }
}
#trending { padding-top: 80px; }

/* 首页热门：两列大卡片，模型看得更清楚 */
#grid.pgrid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
@media (max-width: 820px) { #grid.pgrid { grid-template-columns: minmax(0, 1fr); } }

/* ---------- 登录 / 发布 / Fork 弹窗 ---------- */
.modal { position: fixed; inset: 0; z-index: 95; display: grid; place-items: center; padding: 16px; background: rgba(0, 0, 0, 0.6); backdrop-filter: blur(6px); opacity: 0; transition: opacity .2s; }
.modal.open { opacity: 1; }
.modal-box { width: min(420px, 100%); max-height: calc(100vh - 32px); overflow: auto; border-radius: 20px; border: 1px solid var(--line-strong); background: #101215; box-shadow: 0 40px 120px rgba(0, 0, 0, 0.6); transform: translateY(8px); transition: transform .2s; }
.modal-box.wide { width: min(640px, 100%); }
.modal.open .modal-box { transform: none; }
.modal-head { display: flex; align-items: center; justify-content: space-between; padding: 18px 20px 6px 24px; }
.modal-head b { font-size: 17px; font-weight: 600; }
.modal-body { padding: 10px 24px 24px; }
.form { display: grid; gap: 16px; }
.form-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 16px; }
@media (max-width: 560px) { .form-grid { grid-template-columns: 1fr; } }
.fld { display: grid; gap: 8px; font-size: 13px; color: var(--muted); }
.fld input:not([type=file]), .fld textarea, .fld .select { width: 100%; height: 44px; padding: 0 14px; border-radius: 12px; border: 1px solid var(--line-strong); background: var(--bg-2); color: var(--text); font: inherit; font-size: 14.5px; outline: none; transition: border-color .2s, box-shadow .2s; }
.fld textarea { height: auto; padding: 12px 14px; resize: vertical; }
.fld input:focus, .fld textarea:focus { border-color: var(--accent-line); box-shadow: 0 0 0 4px var(--accent-soft); }
.captcha { display: grid; grid-template-columns: 1fr 128px; gap: 10px; }
.captcha-img { height: 44px; border-radius: 12px; border: 1px solid var(--line-strong); background: #fff; color: #333; display: grid; place-items: center; overflow: hidden; padding: 0; font-size: 12.5px; cursor: pointer; }
.captcha-img img { width: 100%; height: 100%; object-fit: contain; }
.drop { position: relative; display: grid; gap: 2px; padding: 16px; border-radius: 12px; border: 1px dashed var(--line-strong); background: var(--bg-2); color: var(--text); cursor: pointer; transition: border-color .2s; }
.drop:hover { border-color: var(--accent-line); }
.drop input { position: absolute; inset: 0; opacity: 0; cursor: pointer; }
.drop b { font-weight: 500; font-size: 14px; }
.drop small { color: var(--dim); font-size: 12.5px; }
.drop em { font-style: normal; color: #ffb347; }
.form-msg { margin: 0; min-height: 0; color: var(--danger); font-size: 13px; }
.form-msg:empty { display: none; }
.form-note { margin: 0; color: var(--dim); font-size: 12.5px; text-align: center; }
.form-foot { display: flex; align-items: center; justify-content: space-between; gap: 12px; font-size: 13px; }
.btn-block { width: 100%; height: 46px; }
.btn:disabled { opacity: .55; pointer-events: none; }

/* ---------- 导航栏用户 ---------- */
.nav-user { display: inline-flex; align-items: center; gap: 8px; height: 36px; padding: 0 12px 0 4px; border-radius: 999px; border: 1px solid var(--line); background: rgba(255, 255, 255, 0.03); color: var(--text); font-size: 13px; cursor: pointer; }
.nav-user:hover { border-color: var(--line-strong); }
.nav-user > span:not(.avatar) { max-width: 120px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.user-pop { position: fixed; z-index: 96; min-width: 220px; padding: 8px; border-radius: 16px; border: 1px solid var(--line-strong); background: #101215; box-shadow: 0 24px 60px rgba(0, 0, 0, 0.5); }
.user-pop .who { display: grid; padding: 8px 12px 10px; border-bottom: 1px solid var(--line); margin-bottom: 6px; }
.user-pop .who small { color: var(--dim); font-size: 12px; }
.user-pop button { display: flex; align-items: center; gap: 10px; width: 100%; height: 38px; padding: 0 12px; border: 0; border-radius: 10px; background: transparent; color: var(--soft); font-size: 13.5px; text-align: left; cursor: pointer; }
.user-pop button:hover { background: rgba(255, 255, 255, 0.05); color: var(--text); }
.load-more { display: flex; justify-content: center; padding: 28px 0 8px; }

/* ---------- AI 助手 ---------- */
.ai-fab { position: fixed; right: 24px; bottom: 24px; z-index: 120; display: inline-flex; align-items: center; gap: 8px; height: 46px; padding: 0 18px 0 14px; border-radius: 999px;
  border: 1px solid rgba(200, 255, 62, 0.4); color: var(--text); font-size: 14px; font-weight: 500;
  background: linear-gradient(135deg, rgba(200, 255, 62, 0.16), rgba(94, 168, 255, 0.12)) , rgba(12, 14, 17, 0.85); backdrop-filter: blur(14px);
  box-shadow: 0 12px 40px -12px rgba(200, 255, 62, 0.45); transition: transform .2s, opacity .2s; }
.ai-fab .ic { color: var(--accent); }
.ai-fab:hover { transform: translateY(-2px); }
.studio .ai-fab { top: calc(var(--nav) + 20px); bottom: auto; right: 20px; }
.ai.open .ai-fab { opacity: 0; pointer-events: none; transform: scale(.9); }
.ai-panel { position: fixed; z-index: 130; top: 16px; right: 16px; bottom: 16px; width: 420px; max-width: calc(100vw - 32px); display: flex; flex-direction: column;
  border-radius: 24px; border: 1px solid var(--line-strong); background: rgba(11, 13, 16, 0.94); backdrop-filter: blur(24px); -webkit-backdrop-filter: blur(24px);
  box-shadow: 0 30px 80px -20px rgba(0, 0, 0, 0.7); overflow: hidden;
  opacity: 0; transform: translateX(24px) scale(.98); pointer-events: none; transition: opacity .25s, transform .3s cubic-bezier(.2, .7, .2, 1); }
.ai.open .ai-panel { opacity: 1; transform: none; pointer-events: auto; }
.ai-panel::before { content: ''; position: absolute; inset: 0 0 auto; height: 220px; pointer-events: none;
  background: radial-gradient(60% 100% at 20% 0%, rgba(200, 255, 62, 0.10), transparent 70%), radial-gradient(50% 90% at 90% 0%, rgba(94, 168, 255, 0.10), transparent 70%); }
.ai-head { position: relative; display: flex; align-items: center; gap: 10px; padding: 14px 12px 14px 16px; border-bottom: 1px solid var(--line); }
.ai-avatar { display: grid; place-items: center; width: 34px; height: 34px; border-radius: 11px; color: var(--accent); background: radial-gradient(circle at 30% 25%, rgba(200, 255, 62, 0.22), rgba(200, 255, 62, 0.06) 70%); border: 1px solid rgba(200, 255, 62, 0.3); flex: 0 0 auto; }
.ai-avatar.sm { width: 26px; height: 26px; border-radius: 8px; margin-top: 2px; }
.ai-title { flex: 1; display: grid; line-height: 1.3; }
.ai-title b { font-size: 14.5px; }
.ai-title small { font-size: 11.5px; color: var(--muted); }
.ai-head .icon-btn { width: 34px; height: 34px; }
.ai-body { position: relative; flex: 1; overflow-y: auto; padding: 20px 16px; display: flex; flex-direction: column; gap: 14px; }
.ai-hello { text-align: center; padding: 18px 8px 6px; }
.ai-orb { width: 64px; height: 64px; margin: 0 auto 16px; display: grid; place-items: center; border-radius: 22px; color: var(--accent);
  background: radial-gradient(circle at 30% 25%, rgba(200, 255, 62, 0.28), rgba(94, 168, 255, 0.12) 60%, transparent), rgba(255, 255, 255, 0.03);
  border: 1px solid rgba(200, 255, 62, 0.25); animation: ai-float 4s ease-in-out infinite; }
@keyframes ai-float { 50% { transform: translateY(-5px); } }
.ai-hello h3 { margin: 0 0 8px; font-size: 20px; }
.ai-hello p { margin: 0; color: var(--muted); font-size: 13.5px; line-height: 1.7; }
.ai-caps { display: grid; gap: 8px; margin-top: 6px; }
.ai-cap { display: flex; align-items: center; gap: 12px; padding: 14px; border-radius: 16px; border: 1px solid var(--line); background: rgba(255, 255, 255, 0.025); color: var(--muted); text-align: left; transition: border-color .2s, background .2s; }
.ai-cap:hover { border-color: rgba(200, 255, 62, 0.35); background: rgba(200, 255, 62, 0.04); color: var(--text); }
.ai-cap > span:nth-child(2) { flex: 1; display: grid; gap: 2px; }
.ai-cap b { color: var(--text); font-size: 14px; font-weight: 500; }
.ai-cap small { font-size: 12px; }
.ai-cap-ic { width: 34px; height: 34px; display: grid; place-items: center; border-radius: 10px; background: rgba(200, 255, 62, 0.1); color: var(--accent); flex: 0 0 auto; }
.ai-msg { display: flex; gap: 8px; max-width: 100%; animation: ai-in .3s cubic-bezier(.2, .7, .2, 1) both; }
@keyframes ai-in { from { opacity: 0; transform: translateY(6px); } }
.ai-msg.sys { justify-content: center; }
.ai-demo-tag { font-size: 11px; color: var(--dim); padding: 3px 10px; border-radius: 999px; border: 1px dashed var(--line-strong); }
.ai-msg.me { align-self: flex-end; max-width: 85%; padding: 10px 14px; border-radius: 16px 16px 4px 16px; background: rgba(255, 255, 255, 0.08); font-size: 13.5px; line-height: 1.6; }
.ai-msg.bot { align-items: flex-start; }
.ai-bubble { flex: 1; min-width: 0; font-size: 13.5px; line-height: 1.7; color: var(--soft); display: grid; gap: 10px; }
.ai-bubble p { margin: 0; }
.ai-typing { display: inline-flex; gap: 4px; padding: 10px 0; }
.ai-typing i { width: 6px; height: 6px; border-radius: 50%; background: var(--muted); animation: ai-dot 1s infinite; }
.ai-typing i:nth-child(2) { animation-delay: .15s; }
.ai-typing i:nth-child(3) { animation-delay: .3s; }
@keyframes ai-dot { 30% { transform: translateY(-4px); opacity: 1; } 0%, 60%, 100% { opacity: .35; } }
.ai-steps { display: grid; gap: 4px; padding: 10px 12px; border-radius: 12px; background: rgba(255, 255, 255, 0.03); font-size: 12px; color: var(--muted); }
.ai-steps[hidden] { display: none; }
.ai-steps span { display: flex; align-items: center; gap: 8px; }
.ai-steps .ok::before { content: '✓'; color: var(--accent); width: 12px; }
.ai-steps .now { color: var(--text); }
.ai-steps .now::before { content: ''; width: 10px; height: 10px; border-radius: 50%; border: 1.5px solid rgba(255, 255, 255, 0.2); border-top-color: var(--accent); animation: spin .8s linear infinite; }
.ai-send.stop { background: rgba(255, 255, 255, 0.1); }
.ai-stop { width: 10px; height: 10px; border-radius: 2px; background: var(--text); }
.ai-pick { display: grid; gap: 6px; padding: 8px; border-radius: 14px; border: 1px solid var(--line); background: rgba(255, 255, 255, 0.02); }
.ai-pick .ai-result { border: 0; padding: 0; background: none; }
.ai-pick .btn { justify-self: start; }
.ai-idx { width: 20px; height: 20px; display: grid; place-items: center; border-radius: 6px; background: rgba(255, 255, 255, 0.07); font: 500 11px var(--mono); color: var(--soft); flex: 0 0 auto; }
.ai-reason { margin: 0; font-size: 12.5px !important; color: var(--soft); }
.ai-ev { margin: 0; padding: 0; list-style: none; display: grid; gap: 3px; font-size: 12px; color: var(--muted); }
.ai-ev em { font-style: normal; color: var(--dim); margin-right: 4px; }
.ai-ev span { color: var(--accent); margin-left: 4px; }
.ai-unv { margin: 0; font-size: 12px !important; color: #ffcf8a; }
.ai-err { margin: 0; color: var(--danger); }
.ai-muted { margin: 0; font-size: 12px !important; color: var(--muted); }
.ai-card.done { border-color: rgba(70, 227, 138, 0.3); background: linear-gradient(180deg, rgba(70, 227, 138, 0.06), transparent 60%); }
.ai-card.done .ai-card-head { color: var(--ok); }
.ai-kv code, .ai-muted code { font-family: var(--mono); font-size: 12px; color: var(--soft); }
.ai-link { border: 0; background: none; padding: 0 4px; color: var(--accent); font-size: 12px; cursor: pointer; }
.ai-results { display: grid; gap: 6px; }
.ai-result { display: flex; align-items: center; gap: 10px; padding: 8px; border-radius: 14px; border: 1px solid var(--line); background: rgba(255, 255, 255, 0.02); transition: border-color .2s; }
.ai-result:hover { border-color: rgba(255, 255, 255, 0.2); }
.ai-thumb { width: 56px; height: 42px; border-radius: 9px; overflow: hidden; display: grid; place-items: center; background: var(--surface-2, #15181c); color: var(--dim); flex: 0 0 auto; }
.ai-thumb img { width: 100%; height: 100%; object-fit: cover; }
.ai-result-txt { flex: 1; min-width: 0; display: grid; }
.ai-result-txt b { font-size: 13.5px; color: var(--text); font-weight: 500; }
.ai-result-txt small { font-size: 12px; color: var(--dim); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.ai-score { font-family: var(--mono); font-size: 11.5px; color: var(--accent); padding: 2px 8px; border-radius: 999px; background: rgba(200, 255, 62, 0.08); }
.ai-warn { font-size: 12px !important; color: #ffcf8a; padding: 8px 12px; border-radius: 10px; background: rgba(255, 179, 71, 0.08); }
.ai-card { border-radius: 16px; border: 1px solid rgba(200, 255, 62, 0.22); background: linear-gradient(180deg, rgba(200, 255, 62, 0.05), transparent 60%); padding: 14px; display: grid; gap: 12px; }
.ai-card-head { display: flex; align-items: center; gap: 8px; font-size: 12px; letter-spacing: .1em; color: var(--accent); }
.ai-kv { display: grid; grid-template-columns: 44px 1fr; gap: 8px 10px; margin: 0; font-size: 13px; }
.ai-kv dt { color: var(--dim); }
.ai-kv dd { margin: 0; color: var(--text); }
.ai-tag { font-size: 12px; padding: 2px 8px; border-radius: 6px; background: rgba(255, 255, 255, 0.07); }
.ai-fork { display: flex; align-items: center; gap: 8px; }
.ai-fork-node { flex: 1; display: grid; gap: 2px; padding: 10px 12px; border-radius: 12px; background: rgba(255, 255, 255, 0.04); min-width: 0; }
.ai-fork-node small { font-size: 11px; color: var(--dim); }
.ai-fork-node b { font-size: 13px; font-weight: 500; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.ai-fork-node.mine { border: 1px dashed rgba(200, 255, 62, 0.4); }
.ai-fork-line { color: var(--accent); }
.ai-card-actions { display: flex; gap: 8px; }
.ai-card-note { margin: 0; font-size: 12px; color: var(--muted); }
.ai-foot { padding: 10px 14px 12px; border-top: 1px solid var(--line); display: grid; gap: 8px; }
.ai-chips { display: flex; gap: 6px; overflow-x: auto; }
.ai-chip { flex: 0 0 auto; display: inline-flex; align-items: center; gap: 6px; height: 28px; padding: 0 11px; border-radius: 999px; border: 1px solid var(--line-strong); background: transparent; color: var(--muted); font-size: 12px; }
.ai-chip:hover { color: var(--text); border-color: rgba(255, 255, 255, 0.26); }
.ai-input { display: flex; align-items: flex-end; gap: 8px; padding: 8px 8px 8px 14px; border-radius: 16px; border: 1px solid var(--line-strong); background: rgba(0, 0, 0, 0.3); }
.ai-input:focus-within { border-color: rgba(200, 255, 62, 0.45); }
.ai-input textarea { flex: 1; resize: none; border: 0; background: transparent; color: var(--text); font: inherit; font-size: 13.5px; line-height: 1.5; padding: 6px 0; max-height: 120px; outline: none; }
.ai-input textarea:disabled { cursor: not-allowed; }
.ai-send { width: 34px; height: 34px; display: grid; place-items: center; border-radius: 11px; border: 0; background: var(--accent); color: var(--accent-ink); }
.ai-send:disabled { background: rgba(255, 255, 255, 0.08); color: var(--dim); cursor: not-allowed; }
.ai-note { margin: 0; text-align: center; font-size: 11px; color: var(--dim); }
@media (max-width: 820px) {
  .ai-fab { right: 14px; bottom: 14px; width: 46px; padding: 0; justify-content: center; }
  .ai-fab span { display: none; }
  .studio .ai-fab { bottom: auto; top: calc(var(--nav) + 92px); }
  .ai-panel { inset: 0; width: auto; max-width: none; border-radius: 0; }
}

/* ---------- 工作台 ---------- */
.ws-empty-page { min-height: 60vh; display: grid; place-content: center; justify-items: center; gap: 14px; text-align: center; color: var(--muted); }
.ws-empty-page h2 { margin: 6px 0 0; color: var(--text); font-size: 22px; }
.ws-empty-page p { margin: 0; max-width: 420px; line-height: 1.7; }
.ws-list-head { display: flex; align-items: flex-end; justify-content: space-between; gap: 24px; flex-wrap: wrap; padding-top: 56px; padding-bottom: 28px; }
.ws-list-head h1 { margin: 14px 0 8px; font-size: 40px; letter-spacing: -0.02em; }
.ws-list-head p { margin: 0; max-width: 560px; line-height: 1.7; }
.ws-head-actions { display: flex; gap: 10px; }
.ws-filter { display: flex; align-items: center; gap: 16px; flex-wrap: wrap; margin-bottom: 24px; }
.ws-search { display: flex; align-items: center; gap: 8px; height: 40px; padding: 0 14px; border-radius: 999px; border: 1px solid var(--line-strong); color: var(--dim); min-width: 260px; }
.ws-search input { flex: 1; border: 0; background: none; color: var(--text); font: inherit; font-size: 13.5px; outline: none; }
.ws-search:focus-within { border-color: var(--accent-line); }
.ws-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 16px; padding-bottom: 80px; }
.ws-card { display: flex; gap: 14px; padding: 14px; border-radius: 18px; border: 1px solid var(--line); background: var(--surface); transition: border-color .2s, transform .2s; min-width: 0; }
.ws-card:hover { border-color: rgba(255, 255, 255, 0.18); transform: translateY(-2px); }
.ws-cover { flex: 0 0 auto; width: 88px; height: 66px; border-radius: 12px; overflow: hidden; display: grid; place-items: center; background: var(--surface-2); color: var(--dim); }
.ws-cover img { width: 100%; height: 100%; object-fit: cover; }
.ws-card-body { flex: 1; min-width: 0; display: grid; gap: 6px; align-content: start; }
.ws-card-top { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; }
.ws-card-top b { font-size: 15px; font-weight: 600; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; max-width: 100%; }
.ws-card-desc { font-size: 13px; color: var(--muted); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.ws-card-foot { display: flex; gap: 12px; font-size: 12px; color: var(--dim); flex-wrap: wrap; }
.ws-card-foot span { display: inline-flex; align-items: center; gap: 4px; }
.ws-badge { display: inline-flex; align-items: center; gap: 5px; height: 22px; padding: 0 9px; border-radius: 999px; border: 1px solid var(--line-strong); font-size: 11.5px; color: var(--muted); white-space: nowrap; }
.ws-badge.ok { color: var(--ok); border-color: rgba(70, 227, 138, 0.35); background: rgba(70, 227, 138, 0.06); }
.ws-badge.warn { color: #ffcf8a; border-color: rgba(255, 179, 71, 0.4); }
a.ws-badge:hover { color: var(--text); }
.ws-none { grid-column: 1 / -1; display: grid; justify-items: center; gap: 10px; padding: 64px 16px; text-align: center; color: var(--muted); }
.ws-none b { color: var(--text); font-size: 15px; }
.ws-none-actions { display: flex; gap: 8px; margin-top: 6px; }

.ws-hero { padding-top: 36px; padding-bottom: 8px; }
.ws-hero .p-crumbs b { color: var(--text); font-weight: 500; }
.ws-title-row { display: flex; align-items: center; justify-content: space-between; gap: 16px; flex-wrap: wrap; margin-top: 18px; }
.ws-title { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; min-width: 0; }
.ws-title h1 { margin: 0; font-size: 30px; letter-spacing: -0.02em; }
.ws-actions { display: flex; gap: 10px; flex-wrap: wrap; }
.ws-banner { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; margin-top: 18px; padding: 12px 16px; border-radius: 14px; border: 1px solid var(--accent-line); background: var(--accent-soft); font-size: 13.5px; color: var(--soft); }
.ws-banner.warn { border-color: rgba(255, 179, 71, 0.35); background: rgba(255, 179, 71, 0.07); color: #ffdca6; }
.ws-banner code { font-family: var(--mono); font-size: 12.5px; color: var(--text); }
.ws-banner a { color: var(--accent); cursor: pointer; margin-left: auto; }
.ws-hero + .p-tabs { margin-top: 28px; }
.ws-body { padding-top: 28px; padding-bottom: 96px; display: grid; gap: 20px; }
.ws-head-left { display: flex; align-items: center; gap: 12px; flex-wrap: wrap; min-width: 0; }
.ws-head-right { display: flex; gap: 8px; }
.branch.warn { color: #ffcf8a; border-color: rgba(255, 179, 71, 0.4); }
.ws-menu { position: relative; z-index: 40; }
/* 文件列表卡片不裁剪内容，「添加文件」下拉菜单才能伸出卡片；表格最后一行补圆角 */
.card.ws-tree { overflow: visible; position: relative; z-index: 2; }
.card.ws-tree .ftable tr:last-child td:first-child { border-bottom-left-radius: 20px; }
.card.ws-tree .ftable tr:last-child td:last-child { border-bottom-right-radius: 20px; }
.ws-menu > .btn .ic:last-child { margin-left: -2px; opacity: .7; }
.ws-menu-pop { position: absolute; right: 0; top: calc(100% + 6px); z-index: 30; min-width: 200px; padding: 6px; border-radius: 14px; border: 1px solid var(--line-strong); background: #101215; box-shadow: 0 20px 50px rgba(0, 0, 0, 0.5); }
.ws-menu-pop button { display: flex; align-items: center; gap: 10px; width: 100%; height: 36px; padding: 0 10px; border: 0; border-radius: 9px; background: transparent; color: var(--soft); font-size: 13.5px; text-align: left; }
.ws-menu-pop button:hover { background: rgba(255, 255, 255, 0.06); color: var(--text); }
.ws-menu-pop button.danger { color: var(--danger); }
.ws-menu-pop hr { border: 0; border-top: 1px solid var(--line); margin: 6px 0; }
.ws-filebar { display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: 6px 12px 6px 20px; border-bottom: 1px solid var(--line); font-size: 12.5px; color: var(--muted); }
.ws-filebar-actions { display: flex; gap: 2px; }
.ws-filebar .icon-btn { width: 34px; height: 34px; border-radius: 10px; }
.icon-btn.danger:hover { color: var(--danger); background: rgba(255, 107, 91, 0.1); }
.ws-viewtabs { display: flex; align-items: center; gap: 4px; padding: 8px 12px; border-bottom: 1px solid var(--line); }
.ws-viewtabs button { display: inline-flex; align-items: center; gap: 6px; height: 30px; padding: 0 12px; border: 0; border-radius: 8px; background: transparent; color: var(--muted); font-size: 13px; }
.ws-viewtabs button.active { background: rgba(255, 255, 255, 0.08); color: var(--text); }
.ws-bytes { margin-left: auto; font-family: var(--mono); font-size: 11.5px; color: var(--dim); }
.ws-bytes.over { color: var(--danger); }
.ws-readme .card-head .icon-btn { width: 34px; height: 34px; }
.ws-namebar { flex: 1; font-size: 14px; }
.ws-name { flex: 1 1 240px; min-width: 160px; height: 34px; padding: 0 12px; border-radius: 10px; border: 1px solid var(--line-strong); background: rgba(0, 0, 0, 0.3); color: var(--text); font-family: var(--mono); font-size: 13px; outline: none; }
.ws-name:focus { border-color: var(--accent-line); }
.ws-editor-wrap { display: flex; min-height: 520px; background: rgba(0, 0, 0, 0.2); }
.ws-editor-wrap[hidden] { display: none; }
.ws-gutter { flex: 0 0 56px; overflow: hidden; padding: 14px 0; text-align: right; font-family: var(--mono); font-size: 12.5px; line-height: 1.75; color: var(--dim); user-select: none; border-right: 1px solid var(--line); }
.ws-gutter span { display: block; padding-right: 12px; }
.ws-editor { flex: 1; min-height: 520px; height: 64vh; resize: vertical; border: 0; outline: none; padding: 14px 16px; background: transparent; color: var(--text); font-family: var(--mono); font-size: 12.5px; line-height: 1.75; tab-size: 2; white-space: pre; overflow: auto; font-variant-ligatures: none; }
.ws-preview { min-height: 320px; }
.ws-drop { display: grid; justify-items: center; gap: 10px; margin: 20px; padding: 48px 20px; border-radius: 16px; border: 1.5px dashed var(--line-strong); color: var(--muted); text-align: center; cursor: default; transition: border-color .2s, background .2s; }
.ws-drop b { color: var(--text); font-size: 15px; }
.ws-drop a { color: var(--accent); cursor: pointer; }
.ws-drop.over { border-color: var(--accent); background: var(--accent-soft); }
.ws-queue-head { display: flex; align-items: center; gap: 12px; padding: 0 20px 8px; font-size: 13px; }
.ws-queue-head a { margin-left: auto; color: var(--muted); cursor: pointer; }
.ws-err { color: var(--danger); }
.ws-queue { list-style: none; margin: 0 20px; padding: 0; max-height: 280px; overflow: auto; border: 1px solid var(--line); border-radius: 12px; }
.ws-queue li { display: flex; align-items: center; gap: 10px; padding: 6px 6px 6px 12px; border-bottom: 1px solid var(--line); font-size: 13px; color: var(--soft); }
.ws-queue li:last-child { border-bottom: 0; }
.ws-queue li span { flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-family: var(--mono); font-size: 12.5px; }
.ws-queue li small { color: var(--dim); font-size: 12px; }
.ws-queue .icon-btn { width: 28px; height: 28px; }
.ws-upload-foot { display: grid; gap: 12px; padding: 20px; }
.ws-day { display: flex; align-items: center; gap: 8px; margin: 8px 0 -8px; font-size: 13px; color: var(--muted); }
.ws-commits { display: grid; }
.ws-commit { display: flex; align-items: center; gap: 12px; padding: 14px 20px; border-bottom: 1px solid var(--line); }
.ws-commit:last-child { border-bottom: 0; }
.ws-commit-main { flex: 1; min-width: 0; display: grid; gap: 4px; }
.ws-commit-main b { font-size: 14px; font-weight: 500; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.ws-commit-main p { margin: 0; font-size: 12.5px; color: var(--muted); white-space: pre-wrap; }
.ws-commit-main small { font-size: 12px; color: var(--dim); }
.ws-tag { display: inline-flex; align-items: center; gap: 3px; padding: 0 7px; border-radius: 6px; background: rgba(255, 255, 255, 0.07); color: var(--soft); }
.ws-tag.ok { color: var(--ok); background: rgba(70, 227, 138, 0.08); }
.ws-sha { height: 30px; padding: 0 10px; border-radius: 8px; border: 1px solid var(--line-strong); background: transparent; color: var(--soft); font-family: var(--mono); font-size: 12px; }
.ws-sha:hover { color: var(--accent); border-color: var(--accent-line); }
.ws-settings { display: grid; gap: 20px; max-width: 760px; }
.ws-set-body { padding: 20px; }
.ws-set-body .form-note, .ws-set-body .form-msg { text-align: left; }
.ws-cover-edit { display: flex; align-items: center; gap: 16px; }
.ws-cover-edit .ws-cover { width: 128px; height: 96px; }
.ws-cover-btns { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; }
.ws-set.danger { border-color: rgba(255, 107, 91, 0.3); }
.ws-danger-row { display: flex; align-items: center; justify-content: space-between; gap: 16px; padding: 16px 20px; border-bottom: 1px solid var(--line); }
.ws-danger-row:last-child { border-bottom: 0; }
.ws-danger-row div { display: grid; gap: 4px; }
.ws-danger-row small { color: var(--muted); font-size: 12.5px; }
.form-msg a { color: var(--accent); cursor: pointer; }
@media (max-width: 1100px) { .ws-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 820px) {
  .ws-grid { grid-template-columns: 1fr; }
  .ws-list-head h1 { font-size: 30px; }
  .ws-search { min-width: 0; flex: 1; }
  .ws-commit { flex-wrap: wrap; }
  .ws-gutter { display: none; }
}

/* 「我的」→ 设置 → 3D 模型 */
.ws-urdf-now { display: grid; grid-template-columns: 260px 1fr; gap: 20px; align-items: start; margin-bottom: 16px; }
.ws-urdf-preview { position: relative; height: 200px; border-radius: 14px; overflow: hidden; background: radial-gradient(circle at 50% 60%, #171b20, #0b0d10); display: grid; place-items: center; text-align: center; font-size: 12.5px; padding: 0; }
.ws-urdf-preview canvas { position: absolute; inset: 0; width: 100% !important; height: 100% !important; }
.ws-urdf-info { display: grid; grid-template-columns: 48px 1fr; gap: 8px 12px; margin: 0; font-size: 13px; }
.ws-urdf-info dt { color: var(--dim); }
.ws-urdf-info dd { margin: 0; color: var(--soft); word-break: break-all; }
.ws-urdf-tip { margin: 0 0 12px; font-size: 13px; }
.ws-urdf-drop { margin: 0; padding: 28px 16px; cursor: pointer; }
.ws-urdf-drop.busy { opacity: .6; pointer-events: none; }
.ws-urdf-actions { display: flex; align-items: center; justify-content: space-between; gap: 12px; margin-top: 10px; font-size: 12.5px; }
@media (max-width: 820px) { .ws-urdf-now { grid-template-columns: 1fr; } }
.ai-text { white-space: pre-wrap; }
.ai-code { margin: 0; padding: 10px 12px; border-radius: 10px; background: rgba(0, 0, 0, 0.35); border: 1px solid var(--line); overflow-x: auto; font-family: var(--mono); font-size: 12px; line-height: 1.6; color: var(--soft); }