/* ============================================================
   人形机器人学习站 · 玻璃拟态设计系统(V2.1.0)
   基调: 深空影院 —— 深空渐变 + 噪点纹理 + 磨砂玻璃 + 单一冰蓝强调色
   用法: 在 site.css 之后引入;全部类名 glass- 前缀,不与全局冲突
   浅色主题: 双选择器 html:not([data-theme-early="dark"]) ============================================================ */

/* ---------- 设计令牌 ---------- */
:root{
  --glass-bg: rgba(255,255,255,.055);
  --glass-bg-strong: rgba(255,255,255,.09);
  --glass-border: rgba(255,255,255,.12);
  --glass-border-hi: rgba(140,190,255,.4);
  --glass-blur: 20px;
  --glass-ice: #8ec5ff;          /* 冰蓝强调色 */
  --glass-ice-dim: rgba(142,197,255,.35);
  --glass-ink: #eef4fb;
  --glass-ink-dim: #94a3b8;
  --glass-radius: 18px;
  --glass-ease: cubic-bezier(.22,1,.36,1);
}
html:not([data-theme-early="dark"]) {
  --glass-bg: rgba(255,255,255,.5);
  --glass-bg-strong: rgba(255,255,255,.72);
  --glass-border: rgba(60,90,140,.14);
  --glass-border-hi: rgba(37,99,235,.35);
  --glass-ice: #2563eb;
  --glass-ice-dim: rgba(37,99,235,.25);
  --glass-ink: #0f172a;
  --glass-ink-dim: #5a6a85;
}

/* ---------- 深空背景(径向星云 + 噪点) ---------- */
.glass-space{
  background:
    radial-gradient(1100px 520px at 15% -10%, rgba(56,120,255,.16), transparent 60%),
    radial-gradient(900px 460px at 90% 0%, rgba(150,90,255,.10), transparent 55%),
    radial-gradient(700px 500px at 50% 115%, rgba(20,180,190,.08), transparent 60%),
    linear-gradient(165deg,#070b14 0%,#0a0f1c 45%,#060a12 100%);
}
html:not([data-theme-early="dark"]) .glass-space {
  background:
    radial-gradient(1100px 520px at 15% -10%, rgba(56,120,255,.14), transparent 60%),
    radial-gradient(900px 460px at 90% 0%, rgba(150,90,255,.08), transparent 55%),
    linear-gradient(165deg,#f4f7fd 0%,#eef2fa 50%,#e9eef8 100%);
}
/* 噪点纹理叠层(::before 挂在使用者容器上) */
.glass-noise{position:relative}
@keyframes glassAurora{
  0%,100%{transform:translate(0,0) scale(1)}
  33%{transform:translate(60px,30px) scale(1.15)}
  66%{transform:translate(-40px,50px) scale(1.08)}
}
.glass-space::after{
  content:"";position:fixed;inset:-10%;pointer-events:none;z-index:0;opacity:.5;
  background:
    radial-gradient(520px 380px at 18% 24%, rgba(56,120,255,.13), transparent 65%),
    radial-gradient(460px 340px at 78% 18%, rgba(168,85,247,.10), transparent 62%),
    radial-gradient(560px 400px at 55% 88%, rgba(20,190,190,.09), transparent 62%);
  animation:glassAurora 26s ease-in-out infinite alternate;
}
html:not([data-theme-early="dark"]) .glass-space::after {opacity:.55}
.glass-noise::before{
  content:"";position:absolute;inset:0;pointer-events:none;opacity:.05;border-radius:inherit;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='140' height='140'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='2'/%3E%3C/filter%3E%3Crect width='140' height='140' filter='url(%23n)' opacity='0.6'/%3E%3C/svg%3E");
}

/* ---------- 玻璃面板 ---------- */
.glass{
  background:var(--glass-bg);
  -webkit-backdrop-filter:blur(var(--glass-blur)) saturate(150%);
  backdrop-filter:blur(var(--glass-blur)) saturate(150%);
  border:1px solid var(--glass-border);
  border-radius:var(--glass-radius);
  box-shadow:0 16px 48px rgba(0,0,0,.34), inset 0 1px 0 rgba(255,255,255,.14), inset 0 -1px 0 rgba(142,197,255,.06);
}
html:not([data-theme-early="dark"]) .glass {
  box-shadow:0 12px 40px rgba(50,80,140,.12), inset 0 1px 0 rgba(255,255,255,.85);
}
.glass:hover{border-color:var(--glass-border-hi)}

/* ---------- 现代标题排版(去 emoji,细金线装饰) ---------- */
.glass-title{
  font-family:"Segoe UI Variable Display","Segoe UI","PingFang SC","Microsoft YaHei",sans-serif;
  font-weight:300;letter-spacing:.14em;color:var(--glass-ink);
}
.glass-title b,.glass-title strong{font-weight:800;color:var(--glass-ink)}
.glass-kicker{
  font-size:11px;letter-spacing:.42em;text-transform:uppercase;
  color:var(--glass-ice);font-weight:600;
}
.glass-rule{
  width:64px;height:1px;margin:14px auto;
  background:linear-gradient(90deg,transparent,var(--glass-ice-dim),transparent);
}

/* ---------- 水波纹交互(替代 hover 微放大) ----------
   结构: 任意元素加 .glass-ripple;JS(site.js)在 pointerdown 处
   注入 <span class="glass-ripple-wave"> 定位到点击坐标,动画结束自移除 */
.glass-ripple{position:relative;overflow:hidden;transition:transform .5s var(--glass-ease),border-color .25s,box-shadow .5s}
.glass-ripple:hover{transform:translateY(-3px)}
.glass-ripple:active{transform:translateY(-1px) scale(.995)}
.glass-ripple-wave{
  position:absolute;border-radius:50%;pointer-events:none;
  background:radial-gradient(circle, rgba(142,197,255,.55) 0%, rgba(142,197,255,.16) 42%, transparent 68%);
  transform:scale(0);opacity:1;
  animation:glassWave .9s var(--glass-ease) forwards;
}
@keyframes glassWave{
  0%{transform:scale(0);opacity:.85}
  70%{opacity:.35}
  100%{transform:scale(1);opacity:0}
}
/* 悬浮时的"水光"扫过 */
.glass-ripple::after{
  content:"";position:absolute;inset:0;border-radius:inherit;pointer-events:none;
  background:linear-gradient(115deg,transparent 30%,rgba(255,255,255,.07) 45%,transparent 60%);
  transform:translateX(-120%);transition:transform .8s var(--glass-ease);
}
.glass-ripple:hover::after{transform:translateX(120%)}

/* ---------- 玻璃胶囊导航条 ---------- */
.glass-pillbar{
  display:inline-flex;gap:4px;padding:5px;border-radius:999px;
  background:var(--glass-bg);border:1px solid var(--glass-border);
  -webkit-backdrop-filter:blur(var(--glass-blur));backdrop-filter:blur(var(--glass-blur));
}
.glass-pillbar a,.glass-pillbar button{
  font-size:12.5px;color:var(--glass-ink-dim);text-decoration:none;border:none;background:transparent;
  padding:6px 14px;border-radius:999px;cursor:pointer;font-family:inherit;transition:.22s var(--glass-ease);
}
.glass-pillbar a:hover,.glass-pillbar button:hover{color:var(--glass-ink);background:rgba(142,197,255,.12)}
.glass-pillbar a.on,.glass-pillbar button.on{color:var(--glass-ice);background:var(--glass-ice-dim)}

/* ---------- 悬浮玻璃气泡(作品台门厅) ---------- */
.glass-bubble{
  position:absolute;border-radius:50%;cursor:pointer;
  background:
    radial-gradient(circle at 32% 28%, rgba(255,255,255,.22), rgba(255,255,255,.03) 42%),
    radial-gradient(circle at 68% 78%, var(--glass-ice-dim), transparent 55%),
    rgba(255,255,255,.028);
  border:1px solid var(--glass-border);
  -webkit-backdrop-filter:blur(10px);backdrop-filter:blur(10px);
  box-shadow:0 20px 60px rgba(0,0,0,.4), inset 0 0 34px rgba(142,197,255,.07);
  display:flex;flex-direction:column;align-items:center;justify-content:center;gap:6px;
  text-align:center;color:var(--glass-ink);text-decoration:none;
  transition:box-shadow .4s var(--glass-ease),border-color .3s;
  animation:glassFloat 7s ease-in-out infinite;
  will-change:transform;
}
.glass-bubble:hover{border-color:var(--glass-border-hi);box-shadow:0 26px 80px rgba(56,120,255,.28), inset 0 0 50px rgba(142,197,255,.14)}
.glass-bubble .gb-name{font-size:15px;font-weight:700;letter-spacing:1px;text-shadow:0 2px 10px rgba(0,0,0,.5)}
.glass-bubble .gb-sub{font-size:10.5px;color:var(--glass-ink-dim);letter-spacing:2px}
@keyframes glassFloat{0%,100%{translate:0 0}50%{translate:0 -14px}}

/* ---------- 玻璃 HUD(作品页) ---------- */
.glass-hud{
  background:rgba(8,12,22,.55);
  border:1px solid rgba(255,255,255,.1);
  border-radius:14px;
  -webkit-backdrop-filter:blur(16px);backdrop-filter:blur(16px);
  color:#dbe6f5;
}

/* ---------- 入场动画 ---------- */
@keyframes glassRise{from{opacity:0;transform:translateY(18px)}to{opacity:1;transform:translateY(0)}}
.glass-rise{animation:glassRise .8s var(--glass-ease) both}
.glass-rise:nth-child(2){animation-delay:.08s}
.glass-rise:nth-child(3){animation-delay:.16s}
.glass-rise:nth-child(4){animation-delay:.24s}
@media (prefers-reduced-motion:reduce){.glass-rise{animation:none}.glass-ripple-wave{display:none}}

/* ---------- 回到顶部按钮玻璃化(与全站一致,V2.1.3) ---------- */
.backtop{
  background:radial-gradient(circle at 30% 25%, rgba(140,190,255,.35), rgba(20,40,80,.9) 60%),linear-gradient(160deg,#123,#0a1428) !important;
  border:1px solid rgba(140,190,255,.45) !important;
  box-shadow:0 10px 30px rgba(30,80,200,.45), inset 0 0 18px rgba(120,180,255,.18) !important;
}
.backtop:hover{transform:translateY(-3px) scale(1.08);box-shadow:0 14px 40px rgba(30,80,200,.6) !important}
html:not([data-theme-early="dark"]) .backtop {
  background:radial-gradient(circle at 30% 25%, rgba(255,255,255,.7), rgba(210,228,252,.95) 60%),linear-gradient(160deg,#eaf1fc,#dbe8fa) !important;
  color:#2563eb;border-color:rgba(37,99,235,.4) !important;
  box-shadow:0 10px 30px rgba(40,80,160,.25) !important;
}

/* ============================================================
   B1 · 玻璃组件层(V2.1.4):设计令牌 + 六件套
   全站新功能/新页面统一使用,禁止各自内联面板样式
   ============================================================ */
:root{
  --gr-sm:10px; --gr-md:16px; --gr-lg:20px;           /* 圆角阶 */
  --gs-1:4px; --gs-2:8px; --gs-3:14px; --gs-4:24px;   /* 间距阶 */
  --glass-blur-sm:12px;
  --glass-ice-a10: rgba(142,197,255,.10);
  --glass-ice-a20: rgba(142,197,255,.20);
  --glass-ink: var(--glass-ink);
}

/* ---------- 玻璃卡片(可点内容卡) ---------- */
.glass-card{
  position:relative;display:block;text-decoration:none;color:inherit;
  background:var(--glass-bg);border:1px solid var(--glass-border);border-radius:var(--gr-md);
  padding:var(--gs-3);
  -webkit-backdrop-filter:blur(var(--glass-blur)) saturate(150%);backdrop-filter:blur(var(--glass-blur)) saturate(150%);
  box-shadow:0 12px 36px rgba(0,0,0,.22), inset 0 1px 0 rgba(255,255,255,.1);
  overflow:hidden;cursor:pointer;
  transition:transform .45s var(--glass-ease),border-color .25s,box-shadow .45s;
}
.glass-card:hover{transform:translateY(-3px);border-color:var(--glass-border-hi);box-shadow:0 20px 50px rgba(30,80,200,.25), inset 0 1px 0 rgba(255,255,255,.14)}
.glass-card .gc-t{font-size:15px;font-weight:700;color:var(--glass-ink)}
.glass-card .gc-d{font-size:12.5px;color:var(--glass-ink-dim);margin-top:6px;line-height:1.75}

/* ---------- 玻璃面板(大容器/弹窗) ---------- */
.glass-panel{
  background:var(--glass-bg-strong);border:1px solid var(--glass-border-hi);border-radius:var(--gr-lg);
  -webkit-backdrop-filter:blur(22px) saturate(160%);backdrop-filter:blur(22px) saturate(160%);
  box-shadow:0 26px 70px rgba(0,0,0,.4), inset 0 1px 0 rgba(255,255,255,.12);
}
html:not([data-theme-early="dark"]) .glass-panel {
  box-shadow:0 26px 70px rgba(40,80,160,.22), inset 0 1px 0 rgba(255,255,255,.9);
}

/* ---------- 玻璃胶囊条(横向小容器) ---------- */
.glass-pill{
  display:inline-flex;align-items:center;gap:var(--gs-2);
  padding:var(--gs-1) var(--gs-3);border-radius:999px;
  background:var(--glass-bg);border:1px solid var(--glass-border);
  -webkit-backdrop-filter:blur(var(--glass-blur-sm));backdrop-filter:blur(var(--glass-blur-sm));
  font-size:12px;color:var(--glass-ink-dim);
}

/* ---------- 玻璃按钮(+主按钮) ---------- */
.glass-btn{
  display:inline-flex;align-items:center;justify-content:center;gap:6px;
  background:var(--glass-bg);border:1px solid var(--glass-border);border-radius:10px;
  color:var(--glass-ink);font-size:13px;padding:9px 18px;cursor:pointer;font-family:inherit;
  -webkit-backdrop-filter:blur(var(--glass-blur-sm));backdrop-filter:blur(var(--glass-blur-sm));
  transition:.22s var(--glass-ease);text-decoration:none;
}
.glass-btn:hover{border-color:var(--glass-border-hi);color:var(--glass-ink);transform:translateY(-1px)}
.glass-btn:active{transform:translateY(0) scale(.97)}
.glass-btn.primary{
  background:linear-gradient(135deg,#2563eb,#3b82f6);border-color:transparent;color:#fff;font-weight:700;
  box-shadow:0 6px 20px rgba(37,99,235,.35);
}
.glass-btn.primary:hover{filter:brightness(1.12);box-shadow:0 10px 26px rgba(37,99,235,.45)}
.glass-btn:disabled{opacity:.45;cursor:not-allowed;transform:none}

/* ---------- 玻璃输入框 ---------- */
.glass-input{
  width:100%;background:rgba(255,255,255,.05);border:1px solid var(--glass-border);border-radius:10px;
  color:var(--glass-ink);font-size:13.5px;padding:10px 14px;outline:none;font-family:inherit;
  transition:border-color .2s, box-shadow .2s;
}
.glass-input:focus{border-color:var(--glass-ice);box-shadow:0 0 0 3px var(--glass-ice-a20)}
.glass-input::placeholder{color:var(--glass-ink-dim);opacity:.7}
html:not([data-theme-early="dark"]) .glass-input {background:rgba(255,255,255,.8)}

/* ---------- 分隔细线 ---------- */
.glass-hr{height:1px;border:none;margin:var(--gs-3) 0;
  background:linear-gradient(90deg,transparent,var(--glass-ice-dim),transparent)}

/* ============================================================
   B3 · 内容页排版玻璃化(V2.1.4):table / pre / quiz / box
   全局覆写,66个内容页零改动自动继承;深浅双主题
   ============================================================ */
table{background:var(--glass-bg);border:1px solid var(--glass-border);border-radius:var(--gr-sm);overflow:hidden}
th{background:var(--glass-ice-a10);color:var(--glass-ink);border-bottom:1px solid var(--glass-border)}
td{border-top:1px solid rgba(140,190,255,.08)}
pre{background:rgba(6,10,18,.55);border:1px solid var(--glass-border);border-radius:var(--gr-sm)}
.quiz{background:var(--glass-bg);border:1px solid var(--glass-border);border-radius:var(--gr-md)}
.quiz-options button{background:rgba(255,255,255,.04);border:1px solid var(--glass-border);border-radius:10px}
.quiz-options button:hover{border-color:var(--glass-border-hi);transform:translateX(3px)}
.quiz-options button.correct{border-color:rgba(34,197,94,.55);background:rgba(34,197,94,.14)}
.quiz-options button.wrong{border-color:rgba(239,68,68,.5);background:rgba(239,68,68,.12)}
.quiz-explain{background:var(--glass-ice-a10);border-left:3px solid var(--glass-ice);border-radius:0 10px 10px 0}
.box{border-radius:var(--gr-sm)}
.step-item{border-radius:var(--gr-sm)}
html:not([data-theme-early="dark"]) table {background:rgba(255,255,255,.6);box-shadow:0 8px 26px rgba(50,80,140,.08)}
html:not([data-theme-early="dark"]) pre {background:rgba(244,247,252,.9);border-color:rgba(60,80,120,.16)}
html:not([data-theme-early="dark"]) .quiz {background:rgba(255,255,255,.6)}
html:not([data-theme-early="dark"]) .quiz-options button {background:rgba(255,255,255,.8);border-color:rgba(60,80,120,.16);color:#334155}

/* ---------- B6 移动端适配(≤640px):下拉改全宽底部贴靠、触控目标加大 ---------- */
@media (max-width:640px){
  .nav-dd-panel,.nav-dd.open .nav-dd-panel{
    left:8px !important; right:8px !important; top:56px !important;
    width:auto; min-width:0; transform-origin:top center;
  }
  .nav-dd-panel a{padding:11px 14px;font-size:14px}   /* 触控目标 ≥44px */
  .nav-dd-btn{padding:8px 14px}
  .w-row{padding:16px;gap:14px}
  .glass-btn{padding:11px 20px}
  .ai-fab-panel{right:8px;left:8px;width:auto;bottom:120px}
}

/* ---------- B7 排版细节 ---------- */
h2{scroll-margin-top:76px}   /* 顶栏固定,锚点跳转不被遮挡 */
.my-svg{background:var(--glass-bg);border:1px solid var(--glass-border);border-radius:12px;padding:12px 12px 6px}
html:not([data-theme-early="dark"]) .my-svg {background:rgba(255,255,255,.6);border-color:rgba(60,80,120,.14)}

/* ---------- V2.1.7 触屏防 sticky-hover ----------
   hover:none(纯触屏)设备上取消 hover 位移,点击后不再残留抬起/放大态 */
@media (hover:none){
  .glass-ripple:hover,.backtop:hover,.glass-card:hover,.glass-btn:hover,.quiz-options button:hover{transform:none}
}