/* ============================================================
   CLIB FDE · 自习室视觉增强层（毛玻璃 + 横向滑台 + 去黑条）
   纯视觉增强，不改任何业务逻辑与数据。
   主程序接入：在自有样式【之后】引入本 CSS，并引入 clib-glass-enhance.js
   ============================================================ */

/* ---------- 1. 去掉独立原型顶部黑色“研学社”条（主程序无此条，零副作用） ---------- */
.proto-topbar{display:none !important;}

/* ---------- 2. 研究小组：毛玻璃横向滑台舞台 ---------- */
.glass-stage{
  position:relative;
  border-radius:20px;
  padding:18px 18px 14px;
  margin-top:8px;
  overflow:hidden;
  border:1px solid rgba(79,107,237,.12);
  background:
    radial-gradient(1100px 320px at 0% 0%, rgba(79,107,237,.16), transparent 60%),
    radial-gradient(900px 300px at 100% 100%, rgba(139,92,246,.14), transparent 55%),
    linear-gradient(135deg,#EEF2FF 0%,#EAF0FE 46%,#F2ECFD 100%);
}
.glass-stage-head{display:flex;align-items:baseline;gap:10px;margin:0 2px 12px;}
.gsh-title{font-size:15px;font-weight:800;color:#1A1D26;letter-spacing:.2px;}
.gsh-hint{font-size:12px;color:#5B6478;}
.glass-stage-foot{display:flex;align-items:center;gap:6px;font-size:12px;color:#6B7280;padding:2px 4px 0;}
.gsh-arrow{display:inline-grid;place-items:center;width:18px;height:18px;border-radius:50%;
  background:rgba(79,107,237,.14);color:#4F6BED;font-weight:800;line-height:1;}

/* 解除 SR2 自动包裹层 #srRoomScroll.sr2-scroll 的约束：
   原为白底不透明+固定高度+overflow-x:hidden，会盖住舞台背景并裁掉横滑；
   在舞台内改为透明、高度自适应、不裁剪，露出彩色背景让毛玻璃生效 */
.glass-stage .sr2-scroll{
  height:auto !important;
  min-height:0 !important;
  max-height:none !important;
  overflow:visible !important;
  background:transparent !important;
  border:none !important;
  padding:0 !important;
  cursor:auto !important;
}

/* 卡片容器：从纵向网格改为横向 scroll-snap 滑动 */
#srRooms.glass-track{
  display:flex !important;
  flex-direction:row !important;
  flex-wrap:nowrap !important;
  align-items:stretch;
  gap:16px;
  overflow-x:auto;
  overflow-y:hidden;
  scroll-snap-type:x mandatory;
  padding:4px 4px 14px;
  scrollbar-width:thin;
  scrollbar-color:rgba(79,107,237,.35) transparent;
}
#srRooms.glass-track::-webkit-scrollbar{height:8px;}
#srRooms.glass-track::-webkit-scrollbar-track{background:transparent;}
#srRooms.glass-track::-webkit-scrollbar-thumb{background:rgba(79,107,237,.32);border-radius:8px;}

/* ============================================================
   小组卡片「高级毛玻璃」重做（#2）
   真实卡片为 .group-card（roomCard 渲染），旧选择器 .sr2-room 从未命中。
   clib-v24-polish 用 .group-card{background:#fff!important} 强制白底，
   故此处用 #srRooms .group-card（id+class，特异性更高）+ !important 压过它。
   静止即生效：半透明白 + backdrop-filter blur/saturate + 1px 高光描边。
   ============================================================ */
/* 毛玻璃外观（任何布局下都生效） */
#srRooms .group-card{
  position:relative;
  background:linear-gradient(155deg,rgba(255,255,255,.66) 0%,rgba(255,255,255,.40) 100%) !important;
  -webkit-backdrop-filter:blur(22px) saturate(180%);
  backdrop-filter:blur(22px) saturate(180%);
  border:1px solid rgba(255,255,255,.72) !important;
  border-radius:var(--r-lg,18px) !important;
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,.85),
    0 10px 30px rgba(38,52,120,.12),
    0 2px 8px rgba(38,52,120,.06) !important;
  overflow:hidden;
  transition:transform .22s cubic-bezier(.22,.61,.36,1),box-shadow .22s ease,border-color .22s ease;
}
/* 状态色系叠在毛玻璃上：招募中=靛蓝细边 / 我的小组=金边 / 满人=弱化边 */
#srRooms .group-card.is-recruiting{border-color:rgba(79,107,237,.34) !important;}
#srRooms .group-card.is-mine{border-color:rgba(214,175,84,.55) !important;}
#srRooms .group-card.is-full{border-color:rgba(255,255,255,.60) !important;}
#srRooms .group-card:hover{
  transform:translateY(-4px);
  border-color:rgba(79,107,237,.46) !important;
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,.92),
    0 22px 50px rgba(38,52,120,.20),
    0 4px 12px rgba(38,52,120,.08) !important;
}
/* 横滑舞台内：固定舒适宽度 + 居中吸附 */
#srRooms.glass-track > .group-card{
  flex:0 0 320px;
  width:320px;
  min-width:0;
  margin:0;
  scroll-snap-align:start;
}
/* 卡片进度条/头像栈在毛玻璃上更通透 */
#srRooms .group-card .gc-progress{background:rgba(15,23,42,.06);}
/* 空态/加载态在横滑容器内不被固定宽度卡住 */
#srRooms.glass-track > .qa-empty,
#srRooms.glass-track > .sr2-guestnote,
#srRooms.glass-track > .gc-recruitline,
#srRooms.glass-track > .sr3-archived{flex:1 1 auto;width:auto;min-width:0;}

/* ---------- 3. 视频课：保持网格，卡片静止即毛玻璃 ---------- */
#videoCourseList.glass-grid-stage{
  border-radius:20px;
  padding:18px !important;
  border:1px solid rgba(16,185,129,.14);
  background:
    radial-gradient(700px 320px at 6% -10%, rgba(16,185,129,.22), transparent 60%),
    radial-gradient(600px 300px at 96% 0%, rgba(79,107,237,.20), transparent 60%),
    radial-gradient(520px 300px at 50% 120%, rgba(45,212,191,.18), transparent 60%),
    linear-gradient(135deg,#EAFBF3 0%,#E7F5FE 52%,#ECF0FE 100%);
}
#videoCourseList .vc-card{
  background:rgba(255,255,255,.5) !important;
  -webkit-backdrop-filter:blur(20px) saturate(170%);
  backdrop-filter:blur(20px) saturate(170%);
  border:1px solid rgba(255,255,255,.66) !important;
  border-radius:14px !important;
  box-shadow:0 8px 24px rgba(40,52,120,.10);
  transition:transform .18s ease, box-shadow .18s ease;
}
#videoCourseList .vc-card:hover{
  transform:translateY(-3px);
  box-shadow:0 14px 36px rgba(40,52,120,.17);
}

/* ---------- 4. 无障碍：尊重“减少动态效果” ---------- */
@media (prefers-reduced-motion: reduce){
  #srRooms .group-card,
  #videoCourseList .vc-card{transition:none;}
  #srRooms .group-card:hover,
  #videoCourseList .vc-card:hover{transform:none;}
}