/* ============================================================
   签到页（page/sign.php，步骤43，电脑端）
   规范：_优化补丁/前端设计基线.md 6.9    设计稿：_优化补丁/签到页设计稿.html
   - 令牌和通用组件（按钮、分段切换、头像、页面层 --qh-s-* / 界面层 --qh-chrome-*）在 ui.css。
   - 页面专用 class 一律 qh-sign- 前缀；作用域 .qh-sign。
   - 主题 jinsom.js 签到 / 补签 / 领宝箱后会改 DOM（.had、had-sign、#jinsom-sign-day-N、
     .jinsom-sign-page-all-days span 等），这里的样式都按改完的状态写好了。
   - 日夜间：只用令牌，不写死颜色（主题色按钮上的白字除外）。
   ============================================================ */

/* ---- 卡片 ---- */
.qh-sign-card {
  box-sizing: border-box;
  margin-bottom: 12px;
  padding: 20px;
  border: 1px solid var(--qh-s-edge);
  border-radius: var(--qh-r-card);
  background: var(--qh-s-card);
  box-shadow: var(--qh-s-shadow);
  color: var(--qh-s-text);
  font-family: var(--qh-font);
  font-size: 14px;
  line-height: 1.5;
  --qh-ring-gap: var(--qh-s-card);                 /* 卡片里的 VIP 头像描边间隙 */
}
.qh-sign-head { display: flex; align-items: center; justify-content: space-between; gap: 12px; min-height: 32px; margin-bottom: 14px; }
.qh-sign-title { margin: 0; color: var(--qh-s-text); font-size: 16px; font-weight: 600; line-height: 1.3; }
.qh-sign-extra { color: var(--qh-s-muted); font-size: 12px; white-space: nowrap; }
.qh-sign-foot { margin-top: 14px; color: var(--qh-s-muted); font-size: 12px; }

.qh-sign .qh-sign-sub { margin: 4px 0 0; color: var(--qh-s-muted); font-size: 12px; }

/* ---- 日历 ---- */
.qh-sign-first { display: flex; align-items: center; gap: 8px; color: var(--qh-s-muted); font-size: 12px; }
.qh-sign-first a { display: flex; align-items: center; gap: 6px; color: var(--qh-s-text); font-size: 13px; }
.qh-sign-first a:hover { color: var(--qh-accent); }
.qh-sign-first .qh-avatar { width: 22px; height: 22px; }
.qh-sign-first time { font-variant-numeric: tabular-nums; }

.qh-sign-cal table { table-layout: fixed; width: calc(100% + 8px) !important; margin: -4px; border: 0; border-collapse: collapse; }
.qh-sign-cal td { padding: 4px; border: 0; vertical-align: top; }
.qh-sign-cal thead td { padding-bottom: 2px; color: var(--qh-s-muted); font-size: 12px; text-align: center; }
.qh-sign-cal tbody td > span {
  position: relative;
  box-sizing: border-box;
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  height: 74px;
  padding: 9px 11px 8px;
  border-radius: 10px;
  background: var(--qh-s-sunken);
  color: var(--qh-s-text2);
  font-size: 15px;
  font-weight: 600;
  line-height: 1.3;
  cursor: pointer;
  transition: background-color .15s, box-shadow .15s;
}
.qh-sign-cal tbody td > span:hover { background: var(--qh-s-hover); }
.qh-sign-cal tbody td.empty > span { background: transparent; cursor: default; }
.qh-sign-cal n { display: flex; align-items: center; font-variant-numeric: tabular-nums; }
.qh-sign-cal em { margin-top: auto; color: var(--qh-s-muted); font-size: 12px; font-style: normal; font-weight: 400; }
.qh-sign-cal em.is-more { color: var(--qh-accent); }
/* 今天：主题色细框 + 「今天」 */
.qh-sign-cal td.today > span { box-shadow: inset 0 0 0 1.5px var(--qh-accent); }
.qh-sign-cal td.today n::after { content: "今天"; margin-left: 6px; color: var(--qh-accent); font-size: 12px; font-weight: 500; }
/* 漏签：日期变淡，底部「补签」，悬停变成主题色浅底 */
.qh-sign-cal td.no:not(.had-sign) > span { color: var(--qh-s-muted); }
.qh-sign-cal td.no:not(.had-sign) em { display: none; }
.qh-sign-cal td.no:not(.had-sign) > span::before {
  content: "补签";
  order: 2;
  margin-top: auto;
  padding: 1px 7px;
  margin-left: -7px;
  border-radius: 5px;
  color: var(--qh-s-text2);
  font-size: 12px;
  font-weight: 400;
  transition: background-color .15s, color .15s;
}
.qh-sign-cal td.no:not(.had-sign) > span:hover::before { background: var(--qh-accent); color: #fff; }
/* 已签到：主题色浅底 + 右上角勾 + 「已签到」。补签成功后主题 JS 会整格重写，所以都用伪元素画 */
.qh-sign-cal td.had-sign > span { background: var(--qh-s-tint); color: var(--qh-accent); }
.qh-sign-cal td.had-sign > span:hover { background: var(--qh-s-tint-hover); }
.qh-sign-cal td.had-sign em,
.qh-sign-cal td.had-sign i { display: none; }
.qh-sign-cal td.had-sign > span::before { content: "已签到"; order: 2; margin-top: auto; font-size: 12px; font-weight: 400; }
.qh-sign-cal td.had-sign > span::after {
  content: "";
  position: absolute;
  top: 9px;
  right: 9px;
  width: 18px;
  height: 18px;
  border-radius: 50%;
  background: var(--qh-accent) var(--qh-i-check) center / 14px no-repeat;
}
.qh-sign-legend { display: flex; flex-wrap: wrap; gap: 18px; margin-top: 14px; color: var(--qh-s-muted); font-size: 12px; }
.qh-sign-legend span { display: flex; align-items: center; gap: 6px; }
.qh-sign-legend i { width: 12px; height: 12px; border-radius: 4px; background: var(--qh-s-sunken); }
.qh-sign-legend i.is-had { background: var(--qh-accent); }
.qh-sign-legend i.is-today { background: transparent; box-shadow: inset 0 0 0 1.5px var(--qh-accent); }
.qh-sign-legend b { color: var(--qh-accent); font-weight: 400; }

/* ---- 排行 ---- */
.qh-sign-rank ol { display: grid; grid-template-columns: repeat(4, 1fr); gap: 4px; margin: 0 -8px; padding: 0; }
.qh-sign-rank li { list-style: none; min-width: 0; }
.qh-sign-rank li a { display: flex; align-items: center; gap: 10px; padding: 8px; border-radius: var(--qh-r-item); color: var(--qh-s-text); transition: background-color .15s; }
.qh-sign-rank li a:hover { background: var(--qh-s-sunken); }
.qh-sign-rank .no { flex: none; width: 18px; color: var(--qh-s-muted); font-size: 13px; font-variant-numeric: tabular-nums; text-align: center; }
.qh-sign-rank li:nth-child(-n+3) .no { color: var(--qh-accent); font-weight: 700; }
.qh-sign-rank .who { min-width: 0; display: flex; flex-direction: column; }
.qh-sign-rank .who b { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-size: 14px; font-weight: 500; }
.qh-sign-rank .who small { color: var(--qh-s-muted); font-size: 12px; font-variant-numeric: tabular-nums; }
.qh-sign-rank [role="tabpanel"][hidden] { display: none; }

/* ---- 右侧：签到 ---- */
.qh-sign-stats { display: flex; margin: 0 -4px 16px; }
.qh-sign-stats[hidden] { display: none; }
.qh-sign-stats > div { flex: 1; padding: 0 4px; }
.qh-sign-stats > div + div { border-left: 1px solid var(--qh-s-line); padding-left: 14px; }
.qh-sign-stats b { display: block; color: var(--qh-s-text); font-size: 24px; font-weight: 700; line-height: 1.2; font-variant-numeric: tabular-nums; }
.qh-sign-stats b em { font-style: normal; }   /* 连续天数用 em（避开主题 JS 更新的 span），不要斜体 */
.qh-sign-stats b small { margin-left: 2px; color: var(--qh-s-muted); font-size: 12px; font-weight: 400; }
.qh-sign-stats p { margin: 2px 0 0; color: var(--qh-s-muted); font-size: 12px; }
.qh-sign-guest { margin: -2px 0 16px; color: var(--qh-s-text2); font-size: 13px; }
.qh-sign-btn { width: 100%; }
.qh-sign-btn.had { color: var(--qh-s-muted); background: var(--qh-s-sunken); cursor: default; }   /* 主题 JS 签到成功后加 .had */
.qh-sign-btn.had:active { transform: none; }
.qh-sign-btn.had:hover { color: var(--qh-s-muted); background-image: none; }   /* 主题 JS 不会去掉 .qh-btn-primary，压掉它的悬停加深 */
.qh-sign-btn.had::before { content: ""; width: 16px; height: 16px; border-radius: 50%; background: var(--qh-s-muted) var(--qh-i-check) center / 12px no-repeat; }
.qh-sign-reward { display: flex; align-items: center; gap: 10px; margin-top: 12px; padding: 10px 12px; border-radius: 10px; background: var(--qh-s-sunken); font-size: 13px; }
.qh-sign-reward > span { flex: none; color: var(--qh-s-muted); font-size: 12px; }
.qh-sign-reward ul { display: flex; flex-wrap: wrap; gap: 4px 12px; }
.qh-sign-reward li { color: var(--qh-s-text2); }
.qh-sign-reward li b { margin-right: 3px; color: var(--qh-accent); font-weight: 600; }

/* ---- 右侧：补签卡 ---- */
.qh-sign-ticket { display: flex; align-items: center; gap: 12px; }
.qh-sign-ico { flex: none; display: flex; align-items: center; justify-content: center; width: 38px; height: 38px; border-radius: 10px; background: var(--qh-s-tint); color: var(--qh-accent); }
.qh-sign-ico svg { width: 20px; height: 20px; }
.qh-sign-ticket > div { flex: 1; min-width: 0; }
.qh-sign-ticket b { display: block; font-size: 14px; font-weight: 500; }
.qh-sign-ticket p { color: var(--qh-s-muted); font-size: 12px; }
.qh-sign-ticket p span { color: var(--qh-s-text); font-weight: 600; }

/* ---- 右侧：宝箱 ---- */
.qh-sign-box ul { margin: -4px -8px; }
.qh-sign-box li { display: flex; align-items: center; gap: 12px; padding: 8px; border-radius: var(--qh-r-item); }
.qh-sign-box li img { flex: none; width: 40px; height: 40px; object-fit: contain; cursor: pointer; }
.qh-sign-box li > div { flex: 1; min-width: 0; }
.qh-sign-box li b { display: block; font-size: 14px; font-weight: 500; white-space: nowrap; }
.qh-sign-box li p { color: var(--qh-s-muted); font-size: 12px; line-height: 1.45; }
.qh-sign-box .qh-btn { flex: none; }
.qh-sign-box .qh-btn.had { color: var(--qh-s-muted); background: transparent; cursor: default; padding: 0 4px; }   /* 主题 JS 领取成功后加 .had */
.qh-sign-box .qh-btn.had:active { transform: none; }
.qh-sign-box .qh-btn.had:hover { color: var(--qh-s-muted); background: transparent; }
.qh-sign-box li b small { margin-left: 6px; color: var(--qh-s-muted); font-size: 12px; font-weight: 400; }
.qh-sign-box .qh-sign-lock, .qh-sign-box .qh-sign-lock:hover { color: var(--qh-s-muted); background: var(--qh-s-sunken); cursor: default; }   /* 没达到天数：灰色按钮，点了由主题接口提示「还没有达到领取条件」 */
.qh-sign-box .qh-sign-lock:active { transform: none; }
.qh-sign-box li.is-done img { opacity: .5; }

/* ---- 弹窗：签到成功 / 补签 / 宝箱（主题的 layer 弹窗，按皮肤 class 改成基线的弹窗样式，跟随日夜间） ----
   - 选择器都以 .layui-layer.皮肤 开头：强度高于主题 jinsom.min.css 里同名的规则，不依赖样式表的加载顺序。
   - 补签弹窗是 layer 的对话框（.layui-layer-dialog），主题给它的内容层加了带 !important 的白底，
     这里同样用 !important 改成透明，否则白底没有圆角，会从弹窗的圆角下面露出直角。
   - 这三个弹窗都没有标题栏，layer 会用挂在角外的圆形关闭按钮（.layui-layer-close2），统一改成弹窗内右上角的图标按钮。 */
.layui-layer.jinsom-sign-success-form,
.layui-layer.jinsom-sign-add-form,
.layui-layer.jinsom-sign-treasure-form {
  border: 1px solid var(--qh-chrome-line);
  border-radius: 16px;
  background: var(--qh-chrome-dialog);
  -webkit-background-clip: border-box;
  background-clip: border-box;
  -webkit-backdrop-filter: var(--qh-blur-pop);
  backdrop-filter: var(--qh-blur-pop);
  box-shadow: var(--qh-chrome-dialog-shadow);
  color: rgba(var(--qh-chrome-ink), .78);
  font-family: var(--qh-font);
}
.layui-layer.jinsom-sign-success-form .layui-layer-content,
.layui-layer.jinsom-sign-add-form .layui-layer-content,
.layui-layer.jinsom-sign-treasure-form .layui-layer-content {
  padding: 28px 24px 22px;
  border-radius: inherit;
  background: transparent !important;   /* 压过主题 .layui-layer-dialog .layui-layer-content 的 !important 白底 */
  color: inherit;
  text-align: center;
  line-height: 1.5;
}
.layui-layer.jinsom-sign-success-form .layui-layer-content > li { list-style: none; margin: 0; color: rgba(var(--qh-chrome-ink), .5); font-size: 13px; text-align: center; }
.layui-layer.jinsom-sign-success-form .layui-layer-content > li:first-child { display: flex; flex-direction: column; align-items: center; gap: 12px; margin-bottom: 4px; color: var(--qh-chrome-strong); font-size: 18px; font-weight: 600; }
.layui-layer.jinsom-sign-success-form .layui-layer-content > li:first-child i {
  display: flex; align-items: center; justify-content: center;
  width: 48px; height: 48px; margin: 0; border-radius: 50%;
  background: var(--qh-accent) var(--qh-i-check) center / 30px no-repeat;
  color: transparent;
  font-size: 0;                                    /* 不用主题的字体图标，画成勾 */
}
.layui-layer.jinsom-sign-success-form fieldset,
.layui-layer.jinsom-sign-add-form fieldset,
.layui-layer.jinsom-sign-treasure-form fieldset { margin: 18px 0 0; padding: 0; border: 0; border-radius: 0; }
.layui-layer.jinsom-sign-success-form legend,
.layui-layer.jinsom-sign-add-form legend,
.layui-layer.jinsom-sign-treasure-form legend { margin: 0 0 8px; padding: 0; color: rgba(var(--qh-chrome-ink), .4); font-size: 12px; font-weight: 400; text-align: left; }
.layui-layer.jinsom-sign-success-form .layui-field-box,
.layui-layer.jinsom-sign-add-form .layui-field-box,
.layui-layer.jinsom-sign-treasure-form .layui-field-box { display: flex; flex-wrap: wrap; gap: 6px; margin: 0; padding: 0; background: none; border-radius: 0; }
.layui-layer.jinsom-sign-success-form .layui-field-box li,
.layui-layer.jinsom-sign-add-form .layui-field-box li,
.layui-layer.jinsom-sign-treasure-form .layui-field-box li {
  list-style: none; margin: 0; padding: 0 10px; height: 28px; line-height: 28px;
  border: 0; border-radius: 7px; background: rgba(var(--qh-chrome-ink), .06); color: rgba(var(--qh-chrome-ink), .84); font-size: 13px; text-align: left;
}
.layui-layer .jinsom-sign-add-form-content .treasure-img img { width: 64px; height: 64px; margin: 0 0 4px; object-fit: contain; }
.layui-layer .jinsom-sign-add-form-content .no-reward { margin: 4px 0 0; color: rgba(var(--qh-chrome-ink), .45); font-size: 13px; }
.layui-layer .jinsom-sign-add-form-content .btn {
  display: flex; align-items: center; justify-content: center; gap: 4px;
  height: 40px; margin-top: 20px; padding: 0; border-radius: var(--qh-r-btn);
  background: var(--qh-accent); color: #fff; font-size: 14px; font-weight: 500; cursor: pointer;
}
.layui-layer .jinsom-sign-add-form-content .btn:hover { background-image: linear-gradient(rgba(0, 0, 0, .08), rgba(0, 0, 0, .08)); opacity: 1; }
.layui-layer .jinsom-sign-add-form-content .btn m { color: rgba(255, 255, 255, .75); font-size: 12px; }   /* 主题色按钮上，日夜间都是白色 */
.layui-layer .jinsom-sign-add-form-content .btn.no { background: rgba(var(--qh-chrome-ink), .08); color: rgba(var(--qh-chrome-ink), .5); cursor: default; }
/* 关闭按钮：弹窗内右上角 28px 图标按钮（layer 用的是 layui 图标字体的 ×，保留它，只改位置和颜色） */
.layui-layer.jinsom-sign-success-form .layui-layer-setwin,
.layui-layer.jinsom-sign-add-form .layui-layer-setwin,
.layui-layer.jinsom-sign-treasure-form .layui-layer-setwin { top: 10px; right: 10px; }
.layui-layer.jinsom-sign-success-form .layui-layer-setwin .layui-layer-close,
.layui-layer.jinsom-sign-add-form .layui-layer-setwin .layui-layer-close,
.layui-layer.jinsom-sign-treasure-form .layui-layer-setwin .layui-layer-close {
  position: static;
  display: block;
  box-sizing: border-box;
  width: 28px; height: 28px; margin: 0; padding: 0;
  border: 0; border-radius: 8px;
  background: transparent;
  color: rgba(var(--qh-chrome-ink), .5);
  font-size: 16px; font-weight: 400; line-height: 28px; text-align: center;
  opacity: 1;
  transition: background-color .15s, color .15s;
}
.layui-layer.jinsom-sign-success-form .layui-layer-setwin .layui-layer-close:hover,
.layui-layer.jinsom-sign-add-form .layui-layer-setwin .layui-layer-close:hover,
.layui-layer.jinsom-sign-treasure-form .layui-layer-setwin .layui-layer-close:hover { opacity: 1; background: rgba(var(--qh-chrome-ink), .08); color: var(--qh-chrome-strong); }
@supports not ((backdrop-filter: blur(1px)) or (-webkit-backdrop-filter: blur(1px))) {
  .layui-layer.jinsom-sign-success-form, .layui-layer.jinsom-sign-add-form, .layui-layer.jinsom-sign-treasure-form { background: var(--qh-chrome-dialog-solid); }
}