/* ===========================================================
   Shared UI components: badges, tabs, filters, skeleton,
   empty state, toast, tooltip, avatar
   =========================================================== */

/* ---- Verified / VIP badges ---- */
.v-badge { display: inline-flex; align-items: center; justify-content: center; vertical-align: middle; }
.v-badge svg { width: 14px; height: 14px; }
.v-badge.verified svg { fill: #2f8fff; }
.vip-tag { display: inline-flex; align-items: center; gap: 3px; height: 16px; padding: 0 5px; border-radius: 3px; font-size: 10px; font-weight: 700; color: #fff; line-height: 1; }
.vip-tag.pro { background: linear-gradient(90deg,#ff9a3d,#ff6a00); }
.vip-tag.svip { background: linear-gradient(90deg,#b07cff,#7b3fff); }
.vip-tag .crown { font-size: 9px; }

/* ---- Avatar ---- */
.avatar { border-radius: 50%; object-fit: cover; background: var(--color-surface-2); display: inline-block; flex: none; }
.avatar.sm { width: 28px; height: 28px; }
.avatar.md { width: 40px; height: 40px; }
.avatar.lg { width: 64px; height: 64px; }
.avatar.xl { width: 96px; height: 96px; }

/* ---- Tabs ---- */
.xpc-tabs { display: flex; align-items: center; gap: 4px; border-bottom: 1px solid var(--color-border); }
/* SEO: h1 包裹激活 Tab，display:contents 使其盒子不参与布局（内容正常渲染，视觉零变化） */
.tab-h1 { display: contents; }
.xpc-tabs.scroll { overflow-x: auto; scrollbar-width: none; }
.xpc-tabs.scroll::-webkit-scrollbar { display: none; }
.xpc-tab { position: relative; padding: 12px 16px; font-size: var(--fs-sm); color: var(--color-text-muted); cursor: pointer; white-space: nowrap; }
.xpc-tab:hover { color: var(--color-text); }
.xpc-tab.is-active { color: var(--color-text); font-weight: var(--fw-semibold); }
.xpc-tab.is-active::after { content: ""; position: absolute; left: 16px; right: 16px; bottom: -1px; height: 2px; background: var(--color-primary); border-radius: 2px; }

/* ---- Filters ---- */
.filter-bar { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; margin-bottom: 20px; }
.filter-chip { height: 32px; padding: 0 14px; border-radius: 999px; background: var(--color-surface-2); color: var(--color-text-secondary); font-size: var(--fs-sm); cursor: pointer; border: 1px solid transparent; }
.filter-chip:hover { color: var(--color-text); }
.filter-chip.is-active { background: var(--color-primary-bg); color: var(--color-primary); border-color: rgba(231,75,59,.3); }
.filter-group { display: flex; align-items: center; gap: 8px; margin-right: 8px; }
.filter-group .lbl { font-size: var(--fs-xs); color: var(--color-text-light); }

/* ---- Skeleton ---- */
.skeleton { background: linear-gradient(90deg,#eee 25%,#f5f5f5 37%,#eee 63%); background-size: 400% 100%; animation: xpcShimmer 1.4s ease infinite; border-radius: var(--radius-md); }
@keyframes xpcShimmer { 0% { background-position: 100% 0; } 100% { background-position: -100% 0; } }
.sk-card .sk-thumb { width: 100%; aspect-ratio: 16/9; border-radius: var(--radius-lg); }
.sk-card .sk-line { height: 14px; margin-top: 10px; }
.sk-card .sk-line.s2 { width: 60%; }

/* ---- Empty state ---- */
.empty-state { text-align: center; padding: 70px 20px; color: var(--color-text-muted); }
/* 图标：柔和圆形底 + 线性 SVG（早期是 emoji，大小/颜色都不受控） */
.empty-state .ico {
  width: 72px; height: 72px; margin: 0 auto 18px;
  display: flex; align-items: center; justify-content: center;
  border-radius: 50%;
  background: linear-gradient(180deg, var(--color-surface-2), var(--color-surface));
  border: 1px solid var(--color-border);
  color: var(--color-text-light);
}
.empty-state .ico svg { width: 30px; height: 30px; }
/* 空状态常被放进 .work-grid 等网格容器：不横跨整行的话只会占一格、看起来靠左 */
.work-grid > .empty-state,
.creator-scroll > .empty-state,
.note-list > .empty-state,
.article-list > .empty-state,
.tag-cloud > .empty-state,
.activity-grid > .empty-state {
  grid-column: 1 / -1;
  justify-self: center;
  width: 100%;
}
.empty-state h3, .empty-state h2 { font-size: var(--fs-md); color: var(--color-text-strong); margin-bottom: 6px; }
.empty-state p { font-size: var(--fs-sm); margin-bottom: 18px; }

/* ---- Toast ---- */
.xpc-toast-wrap { position: fixed; left: 50%; top: 80px; transform: translateX(-50%); z-index: var(--z-toast); display: flex; flex-direction: column; gap: 10px; align-items: center; pointer-events: none; }
.xpc-toast { background: rgba(33,33,33,.92); color: #fff; padding: 10px 18px; border-radius: var(--radius-md); font-size: var(--fs-sm); box-shadow: 0 8px 24px rgba(0,0,0,.25); animation: xpcToastIn .25s ease; display: flex; align-items: center; gap: 8px; }
.xpc-toast.ok { background: rgba(7,148,85,.95); }
.xpc-toast.err { background: rgba(220,38,38,.95); }
@keyframes xpcToastIn { from { opacity: 0; transform: translateY(-10px); } to { opacity: 1; transform: translateY(0); } }

/* ---- Tooltip ---- */
.xpc-tip { position: relative; }
.xpc-tip::after { content: attr(data-tip); position: absolute; bottom: 130%; left: 50%; transform: translateX(-50%) translateY(4px); background: #1f1f1f; color: #fff; font-size: 12px; padding: 5px 9px; border-radius: 6px; white-space: nowrap; opacity: 0; pointer-events: none; transition: opacity .15s, transform .15s; z-index: 50; }
.xpc-tip:hover::after { opacity: 1; transform: translateX(-50%) translateY(0); }

/* ---- Stat pill ---- */
.stat-pill { display: inline-flex; align-items: center; gap: 4px; color: var(--color-text-muted); font-size: var(--fs-xs); }
.stat-pill .dot { width: 3px; height: 3px; border-radius: 50%; background: currentColor; }

/* ---- Filter chips（浏览分类等筛选胶囊） ----
   此前项目里完全没有 .filter-chip 规则，<a> 退化为裸链接：
   文字不居中、也没有胶囊外观。 */
.filter-chip {
  display: inline-flex; align-items: center; justify-content: center;
  height: 32px; padding: 0 14px; border-radius: 999px;
  background: var(--color-surface-2); color: var(--color-text-secondary);
  font-size: var(--fs-sm); cursor: pointer; border: 1px solid transparent;
  text-decoration: none; white-space: nowrap;
  transition: color .15s, background .15s, border-color .15s;
}
.filter-chip:hover { color: var(--color-text); border-color: var(--color-border-strong); }
.filter-chip.is-active { background: var(--color-primary-bg); color: var(--color-primary); border-color: rgba(231, 75, 59, .3); }

/* ---- Pagination ---- */
.pagination { display: flex; justify-content: center; gap: 8px; margin: 32px 0; }
.pagination a { min-width: 34px; height: 34px; padding: 0 10px; display: inline-flex; align-items: center; justify-content: center; border: 1px solid var(--color-border); border-radius: var(--radius-md); font-size: var(--fs-sm); color: var(--color-text-secondary); }
.pagination a:hover { border-color: var(--color-primary); color: var(--color-primary); }
.pagination a.is-active { background: var(--color-primary); color: #fff; border-color: var(--color-primary); }

/* ---- 统一分页视图（resources/views/components/pagination.blade.php）
        后台是 .adm-pagination 包一层，前台（评论区等）直接用 .xpc-pager ---- */
.xpc-pager { display: flex; align-items: center; justify-content: space-between; gap: 12px 16px; flex-wrap: wrap; margin: 20px 0; }
.xpc-pager-info { font-size: var(--fs-xs); color: var(--color-text-muted); }
.xpc-pager-list { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; margin: 0 0 0 auto; padding: 0; list-style: none; }
.xpc-pager-list > li { display: flex; }
.xpc-pager a, .xpc-pager span { min-width: 34px; height: 34px; padding: 0 10px; display: inline-flex; align-items: center; justify-content: center; border: 1px solid var(--color-border); border-radius: var(--radius-md); font-size: var(--fs-sm); color: var(--color-text-secondary); background: var(--color-surface); }
.xpc-pager a:hover { border-color: var(--color-primary); color: var(--color-primary); }
.xpc-pager span[aria-current] { background: var(--color-primary); color: #fff; border-color: var(--color-primary); }
.xpc-pager .disabled, .xpc-pager span[aria-disabled] { color: var(--color-text-muted); opacity: .6; cursor: not-allowed; }
.xpc-pager span.gap { border-color: transparent; background: transparent; min-width: 20px; padding: 0 2px; color: var(--color-text-muted); }

/* ---- 评论验证码（后台 comment.captcha_enabled 开启时显示） ---- */
.captcha-row { display: flex; align-items: center; gap: 10px; margin-top: 10px; flex-wrap: wrap; }
.captcha-row .input { flex: 0 1 180px; }
.captcha-img { height: 40px; border-radius: var(--radius-md); border: 1px solid var(--color-border); background: var(--color-surface-2); cursor: pointer; }
.captcha-img:hover { border-color: var(--color-primary); }
.captcha-tip { font-size: var(--fs-xs); color: var(--color-text-muted); }

/* ---- 上传入口（后台 upload.video_enabled 关闭时隐藏） ----
   body[data-upload="off"] 由 layouts/site.blade.php 输出，一处开关覆盖全站入口，
   不必在每个视图里逐个 @if（上传入口分散在页头、悬浮条、移动菜单、个人菜单等 6 处）。
   两条选择器分别对应：真实路由链接（href 以 /upload 结尾，精确匹配所以
   /upload?tab=my「我的作品」不受影响）与整块上传按钮容器 [data-upload-btn]。
   服务端 UploadController 另有一道闸门，这里只是别让用户点到不能用的入口。 */
body[data-upload="off"] a[href$="/upload"],
body[data-upload="off"] [data-upload-btn] { display: none !important; }

/* ---- 注册入口（后台 auth.register_enabled 关闭时隐藏） ----
   body[data-register="off"] 由 layouts/site.blade.php 输出，与上面的上传开关同一套做法。
   三条选择器分别对应：
     ① [data-register-entry] —— 运营区块里那行「注册账号 · 忘记密码」，
        入口与分隔符已被 RegisterEntryRewriter 一起包进这个 span，
        隐藏它就不会剩下孤零零的「·」（迁移 2026_10_13_000007 负责套层）；
     ② 兜底：任何指向 /register 的链接（运营后改回未套层的样子也照样藏得住，
        只是可能残留分隔符）；
     ③ 移动端抽屉里的「注册」按钮（chrome.js 注入的 .mnav__btn-reg）。
   服务端 AuthController 另有一道闸门，这里只是别让用户点到不能用的入口。 */
body[data-register="off"] [data-register-entry],
body[data-register="off"] a[href$="/register"],
body[data-register="off"] .mnav__btn-reg { display: none !important; }