/* ============================================================
   M3 · Studio Home 与社区动态（rectify_m3_home.css, 2026-10-26）
   只新增组件样式，不改既有规则；V1 白玻璃 + 浅蓝 #38BDF8 主色，禁紫。
   作用域：workbench.html 首页公告横幅 / 推荐模板轮播 / 每日签到弹窗 / 导航角标。
   ============================================================ */

/* ---------- 1. 官方公告横幅（Studio Home 顶部，1 条静态公告卡） ---------- */
.wb-ann-banner {
  display:flex; align-items:center; gap:12px; margin:14px 0 4px;
  padding:12px 16px; border-radius:14px;
  background:linear-gradient(90deg, rgba(230,244,255,.9), rgba(255,255,255,.75));
  border:1px solid #D6E4FB;
  backdrop-filter:blur(18px) saturate(140%);
  -webkit-backdrop-filter:blur(18px) saturate(140%);
  box-shadow:0 2px 8px rgba(15,23,42,.04);
}
.wb-ann-banner .wb-ann-ico {
  flex:0 0 auto; width:34px; height:34px; border-radius:10px;
  background:var(--primary); color:#fff; display:flex; align-items:center; justify-content:center;
}
.wb-ann-banner .wb-ann-main { flex:1; min-width:0; }
.wb-ann-banner .wb-ann-title { font-size:13px; font-weight:600; color:#0F172A; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
.wb-ann-banner .wb-ann-sub { font-size:12px; color:#64748B; margin-top:2px; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
.wb-ann-banner .wb-ann-tag {
  flex:0 0 auto; font-size:11px; color:var(--primary-dark); background:var(--primary-soft);
  border-radius:999px; padding:3px 10px; font-weight:600;
}

/* ---------- 2. 推荐模板轮播 ---------- */
.wb-tpl-sec { margin:22px 0 6px; }
.wb-tpl-head { display:flex; align-items:center; gap:8px; margin:0 2px 12px; }
.wb-tpl-head .wb-sec-title { font-size:16px; font-weight:700; color:var(--ink,#1d2129); }
.wb-tpl-head .wb-tpl-hint { font-size:12px; color:#909399; flex:1; }
.wb-tpl-carousel { position:relative; }
.wb-tpl-track {
  display:flex; gap:16px; overflow-x:auto; scroll-behavior:smooth;
  scroll-snap-type:x mandatory; padding:4px 2px 8px;
  scrollbar-width:none;
}
.wb-tpl-track::-webkit-scrollbar { display:none; }
.wb-tpl-card {
  flex:0 0 260px; scroll-snap-align:start; cursor:pointer;
  background:var(--card); border:1px solid var(--border); border-radius:16px; overflow:hidden;
  transition:all .18s; display:flex; flex-direction:column;
}
.wb-tpl-card:hover { transform:translateY(-3px); box-shadow:0 12px 28px rgba(30,60,110,.14); border-color:var(--primary); }
.wb-tpl-cover {
  height:140px; display:flex; align-items:center; justify-content:center;
  font-size:40px; color:#fff; position:relative;
}
.wb-tpl-cover.g1 { background:linear-gradient(135deg,#38BDF8,#818CF8); }
.wb-tpl-cover.g2 { background:linear-gradient(135deg,#0EA5E9,#38BDF8); }
.wb-tpl-cover.g3 { background:linear-gradient(135deg,#22D3EE,#0EA5E9); }
.wb-tpl-cover .wb-tpl-kind {
  position:absolute; top:8px; left:8px; font-size:11px; font-weight:600;
  background:rgba(255,255,255,.9); color:var(--primary-dark); border-radius:8px; padding:2px 8px;
}
.wb-tpl-body { padding:12px 14px; display:flex; flex-direction:column; gap:4px; }
.wb-tpl-name { font-size:14px; font-weight:600; color:var(--text); white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
.wb-tpl-cat { font-size:12px; color:#909399; }
.wb-tpl-use { margin-top:8px; align-self:flex-start; }
.wb-tpl-arrow {
  position:absolute; top:50%; transform:translateY(-50%); z-index:5;
  width:32px; height:32px; border-radius:50%; border:1px solid var(--border);
  background:rgba(255,255,255,.92); color:var(--text); cursor:pointer; font-size:15px;
  display:flex; align-items:center; justify-content:center; box-shadow:0 4px 12px rgba(15,23,42,.12);
  transition:all .15s;
}
.wb-tpl-arrow:hover { background:var(--primary); color:#fff; border-color:var(--primary); }
.wb-tpl-arrow.prev { left:-14px; }
.wb-tpl-arrow.next { right:-14px; }
.wb-tpl-dots { display:flex; gap:6px; justify-content:center; margin-top:8px; }
.wb-tpl-dot { width:6px; height:6px; border-radius:50%; background:#CBD5E1; cursor:pointer; transition:all .15s; }
.wb-tpl-dot.active { background:var(--primary); width:18px; border-radius:999px; }

/* ---------- 3. 导航角标（签到/邀请红点） ---------- */
.wb-nav-item .wb-nav-badge {
  margin-left:auto; min-width:18px; height:18px; padding:0 5px; border-radius:999px;
  background:#F43F5E; color:#fff; font-size:11px; font-weight:600;
  display:flex; align-items:center; justify-content:center;
}

/* ---------- 4. 每日签到弹窗 ---------- */
#checkinMask .modal { width:560px; max-width:calc(100vw - 32px); }
.wb-ci-top { display:flex; gap:12px; align-items:stretch; margin-bottom:14px; }
.wb-ci-streak {
  flex:0 0 130px; border-radius:14px; padding:14px; text-align:center;
  background:linear-gradient(135deg, var(--primary), #0EA5E9); color:#fff;
}
.wb-ci-streak .num { font-size:34px; font-weight:700; line-height:1.1; }
.wb-ci-streak .lbl { font-size:12px; opacity:.9; margin-top:4px; }
.wb-ci-next {
  flex:1; border:1px solid var(--border); border-radius:14px; padding:14px 16px;
  background:var(--bg-soft); display:flex; flex-direction:column; justify-content:center; gap:6px;
}
.wb-ci-next .row { display:flex; justify-content:space-between; font-size:13px; color:var(--text); }
.wb-ci-next .row b { color:var(--primary-dark); }
.wb-sign-scheme { display:flex; gap:6px; margin:10px 0 14px; }
.wb-sign-day {
  flex:1; text-align:center; border-radius:10px; padding:8px 2px;
  border:1px solid var(--border); background:var(--card); font-size:11px; color:#64748B;
}
.wb-sign-day .pts { font-size:13px; font-weight:700; color:var(--text); display:block; margin-top:2px; }
.wb-sign-day.done { background:var(--primary-soft); border-color:var(--primary); color:var(--primary-dark); }
.wb-sign-day.done .pts { color:var(--primary-dark); }
.wb-sign-day.today { border-color:var(--primary); box-shadow:0 0 0 2px rgba(56,189,248,.25); }
.wb-ci-cal { display:grid; grid-template-columns:repeat(7,1fr); gap:6px; margin:10px 0 6px; }
.wb-ci-cal .dow { font-size:11px; color:#909399; text-align:center; padding:2px 0; }
.wb-ci-cell {
  height:36px; border-radius:10px; display:flex; flex-direction:column; align-items:center; justify-content:center;
  font-size:13px; border:1px solid var(--border); background:var(--card); color:var(--text);
}
.wb-ci-cell.checked { background:var(--primary); color:#fff; border-color:var(--primary); }
.wb-ci-cell.missed { background:#FFF7ED; border-color:#FED7AA; color:#C2410C; font-size:11px; }
.wb-ci-cell.today { box-shadow:0 0 0 2px var(--primary); font-weight:700; }
.wb-ci-cell.future { opacity:.4; }
.wb-ci-cell.empty { border:none; background:transparent; }
.wb-ci-rules {
  margin-top:12px; padding:10px 12px; border-radius:10px; font-size:12px; line-height:1.7;
  color:#64748B; background:var(--bg-soft); border:1px solid var(--border);
}
.wb-ci-rules b { color:var(--text); }
.wb-ci-tasks { margin-top:10px; display:flex; flex-direction:column; gap:6px; }
.wb-ci-task {
  display:flex; align-items:center; gap:10px; font-size:13px; padding:8px 10px;
  border:1px solid var(--border); border-radius:10px; background:var(--card);
}
.wb-ci-task .t-name { flex:1; min-width:0; }
.wb-ci-task .t-name small { display:block; color:#909399; font-size:11px; }
.wb-ci-task .t-reward { color:var(--primary-dark); font-weight:600; font-size:12px; }
.wb-ci-task.done { opacity:.75; border-color:var(--primary); }
.wb-ci-task .t-state { font-size:11px; color:#16A34A; font-weight:600; }
.wb-ci-task .t-state.pending { color:#909399; }