/* ============================================================
 * QQ等级代挂 · 站点补丁
 * 补齐页面用到但 uno.css 预编译时未包含的原子工具类。
 * 引入顺序：放在 kit-patches.css 之后。
 * ============================================================ */

/* ---------- 间距 ---------- */
.gap-1\.5 { gap: 0.375rem; }
.mt-0\.5 { margin-top: 0.125rem; }
.mt-1\.5 { margin-top: 0.375rem; }
.mr-1 { margin-right: 0.25rem; }
.p-1\.5 { padding: 0.375rem; }
.pl-0\.5 { padding-left: 0.125rem; }
.pt-1\.5 { padding-top: 0.375rem; }
.py-6 { padding-top: 1.5rem; padding-bottom: 1.5rem; }
.py-2\.5 { padding-top: 0.625rem; padding-bottom: 0.625rem; }
.px-3\.5 { padding-left: 0.875rem; padding-right: 0.875rem; }

/* ---------- 尺寸 ---------- */
.h-48 { height: 12rem; }
.w-48 { width: 12rem; }
.max-w-xl { max-width: 36rem; }

/* ---------- 排版 ---------- */
.text-4xl { font-size: 2.25rem; line-height: 2.5rem; }
.leading-6 { line-height: 1.5rem; }
.text-gray-300 { color: rgb(209 213 219); }

/* ---------- 边框与外观 ---------- */
.border-dashed { border-style: dashed; }
.object-contain { object-fit: contain; }
.accent-green-700 { accent-color: var(--theme-primary); }
.hover\:bg-red-100:hover { background-color: #fee2e2; }

/* ---------- 响应式：sm (≥640px) ---------- */
@media (min-width: 640px) {
  .sm\:flex { display: flex; }
  .sm\:items-end { align-items: flex-end; }
  .sm\:col-span-2 { grid-column: span 2 / span 2; }
  .sm\:grid-cols-4 { grid-template-columns: repeat(4, minmax(0, 1fr)); }
  .sm\:w-64 { width: 16rem; }
  .sm\:grid-cols-\[1fr_auto\] { grid-template-columns: 1fr auto; }
}

/* ---------- 响应式：lg (≥1024px) ---------- */
@media (min-width: 1024px) {
  .lg\:grid-cols-4 { grid-template-columns: repeat(4, minmax(0, 1fr)); }
}

/* ---------- 样式包遗留的未定义变量 ---------- */
/* partials/dashboard.css 用了这三个 token，但 design-system.css 只定义了
   --ink / --ink-soft / --ink-faint 与 --border-soft / --border-strong。
   不定义时 color 会继承、border-color 会退化成 currentColor（描边过深）。 */
:root {
  --ink-muted: color-mix(in srgb, var(--theme-text) 52%, transparent);
  --line: var(--border-soft);
  --line-strong: var(--border-strong);
}

/* ---------- 表格窄屏：横向滚动代替逐字折行 ----------
   7 个列表表格都用同一层 .overflow-hidden 容器，窄屏下列被压成一字一行。 */
.shadow.overflow-hidden:has(> table) { overflow-x: auto; }
.shadow.overflow-hidden > table { min-width: 660px; }

/* ---------- 页面内提示条 ----------
   .notice 只定义在 partials/login.css（工作区页面不加载），所以这里自带一套；
   信息类说明原先误用 .error-panel，整块被染成告警红。 */
.page-note {
  display: flex;
  align-items: flex-start;
  gap: 10px;
  padding: 12px 14px;
  border-radius: var(--radius-sm);
  border: 1px solid var(--border-soft);
  background: color-mix(in srgb, var(--theme-primary) 5%, var(--surface));
  color: var(--theme-text);
  font-size: 13px;
  line-height: 1.6;
}

.page-note > i {
  flex: none;
  width: 18px;
  height: 18px;
  margin-top: 1px;
  font-size: 18px;
  line-height: 1.3;
  color: color-mix(in srgb, var(--theme-primary) 78%, var(--ink));
}

.page-note > strong { display: block; font-size: 13px; }
.page-note > p { margin: 4px 0 0; color: var(--ink-soft); }
.page-note > div > strong { display: block; font-size: 13px; }

.page-note.is-warn {
  border-color: color-mix(in srgb, var(--gold) 42%, transparent);
  background: color-mix(in srgb, var(--gold) 12%, var(--surface));
  color: #8a5f1c;
}

.page-note.is-warn > i { color: color-mix(in srgb, var(--gold) 78%, black); }

.page-note.is-error {
  border-color: color-mix(in srgb, #d9534f 32%, transparent);
  background: color-mix(in srgb, #d9534f 8%, var(--surface));
  color: color-mix(in srgb, #b83a36 88%, var(--ink));
}

.page-note.is-error > i { color: #b83a36; }

/* 概览四卡：窄屏沿用组件的 2 列，宽屏铺成一行 */
@media (min-width: 1024px) {
  .dash-stock-grid.is-wide { grid-template-columns: repeat(4, minmax(0, 1fr)); }
}

/* 加速倍率四卡：uno.css 只带了 sm:/lg: 变体，窄屏两列需自带 */
#boost-speed-rows { grid-template-columns: repeat(2, minmax(0, 1fr)); }
@media (min-width: 1024px) {
  #boost-speed-rows { grid-template-columns: repeat(4, minmax(0, 1fr)); }
}

/* ---------- 托管列表窄屏：一行一卡 ----------
   上面的横向滚动依赖 :has()，旧内核（微信/QQ 内置浏览器）不支持时会退回逐字折行。
   手机端这里不依赖 :has()，直接把表格拆成卡片：账号一行、在线方式+状态一行、
   等级一行、操作按钮一行。 */
@media (max-width: 639px) {
  .mk-cards-wrap { overflow: visible; }
  .shadow.overflow-hidden > .mk-cards-table { min-width: 0; }
  .mk-cards-table, .mk-cards-table tbody { display: block; }
  .mk-cards-table thead { display: none; }
  .mk-cards-table tr {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 12px;
    padding: 14px;
    border-bottom: 1px solid var(--border-soft);
  }
  .mk-cards-table tbody tr:last-child { border-bottom: 0; }
  .mk-cards-table td {
    display: block;
    min-width: 0;
    padding: 0;
    border: 0;
    text-align: left;
  }
  .mk-cards-table td[data-label]:before {
    content: attr(data-label);
    display: block;
    margin-bottom: 5px;
    font-size: 11px;
    color: var(--ink-faint);
  }
  .mk-cards-table td:first-child,
  .mk-cards-table td:nth-child(4),
  .mk-cards-table td:last-child { grid-column: 1 / -1; }
  .mk-cards-table td:last-child {
    display: flex;
    align-items: center;
    justify-content: flex-end;
    gap: 8px;
  }
  .mk-cards-table td:last-child button { margin: 0; }
  .mk-cards-table td:only-child {
    display: block;
    grid-column: 1 / -1;
    padding: 18px 0;
    text-align: center;
    color: var(--ink-faint);
  }

  /* 任务表首列是勾选框：勾框和任务名必须同一行，否则手机端会出现只有复选框的空行。 */
  .mk-boost-table tr { grid-template-columns: 24px minmax(0, 1fr) minmax(0, 1fr); }
  .mk-boost-table td:first-child { grid-column: 1; justify-self: center; padding-top: 3px; }
  .mk-boost-table td:nth-child(2) { grid-column: 2 / -1; }
  .mk-boost-table td:nth-child(4) { grid-column: 3; }
  .mk-boost-table td:nth-child(3) { grid-column: 2; }
  /* 空状态是一个 colspan 单元，不能落进 24px 的勾选列 */
  .mk-boost-table td:only-child { grid-column: 1 / -1; justify-self: stretch; padding-top: 0; }
}

/* ---------- 窄屏：标题行与右侧说明分两行 ----------
   .section-heading 是 flex 两端对齐，手机端长说明会把标题挤成竖排折字。 */
@media (max-width: 639px) {
  .section-heading {
    flex-direction: column;
    align-items: flex-start;
    gap: 4px;
  }

  /* 页头右侧的账号选择器会把四字标题挤成「等级任/务」，改成标题一行、选择器一行。 */
  .feature-header { flex-direction: column; align-items: flex-start; gap: 14px; }
  .feature-title { white-space: nowrap; }
}

/* ---------- 后台用户详情里的小表：手机端一行两项 ----------
   核销/动态表有 4–5 列，整表横滑在手机上不可读；详情弹窗本身可上下滚，
   所以把每行折成两列网格，第一列当标签、其余值跟在后面。 */
@media (max-width: 639px) {
  .mk-detail-table thead { display: none; }
  .mk-detail-table, .mk-detail-table tbody { display: block; }
  .mk-detail-table tr {
    display: grid;
    grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
    gap: 2px 12px;
    padding: 8px 0;
    border-top: 1px solid var(--border-soft);
  }
  .mk-detail-table tr:first-child { border-top: 0; padding-top: 0; }
  .mk-detail-table td { display: block; padding: 0; white-space: normal; word-break: break-all; }
  .mk-detail-table td:first-child { grid-column: 1 / -1; color: var(--ink); font-weight: 500; }
}

/* ---------- 首页 hero 动作按钮 ----------
   ≤900px 时三枚按钮均分一行（各约 100px），「站内信」在默认 padding 下折成两行，
   比左右两枚高出一截。短文本一律不折行，窄屏把左右内边距压掉 6px。 */
.dashboard-refresh { white-space: nowrap; }

@media (max-width: 900px) {
  /* 均分三列时「站内信」会溢出 5px，改成按内容分配 */
  .dashboard-hero-actions { display: flex; gap: 6px; }
  .dashboard-hero-actions .dashboard-refresh {
    flex: 1 1 auto;
    width: auto;
    min-width: 0;
    gap: 6px;
    padding: 11px 10px;
    justify-content: center;
  }
}

/* ---------- 登录页图形验证码：嵌在输入框右侧，点击换一张 ---------- */
.captcha-img {
  flex: 0 0 auto;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 124px;
  height: 36px;
  margin-right: -6px;
  overflow: hidden;
  border: 1px solid var(--auth-line);
  border-radius: 8px;
  background: #f4f6f8;
  cursor: pointer;
}

.captcha-img img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.captcha-img span {
  font-size: 12px;
  color: var(--auth-faint);
}

@media (max-width: 639px) {
  .captcha-img { width: 108px; }
}

/* ---------- 后台：托管引擎登录的图形验证码 ---------- */
.engine-captcha-img {
  width: 112px;
  height: 38px;
  padding: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  overflow: hidden;
  border: 1px solid var(--border-soft);
  border-radius: 8px;
  background: #f4f6f8;
  cursor: pointer;
  font-size: 12px;
  color: #8b968f;
}

.engine-captcha-img img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
}

/* ============================================================
 * uno.css 是预编译产物，下面几个原子类没被收进去，
 * 在最后一层补齐，保证「批量生成卡密」「注册开关行」在桌面端铺得开。
 * ============================================================ */
@media (min-width: 640px) {
  .sm\:grid-cols-5 {
    grid-template-columns: repeat(5, minmax(0, 1fr));
  }

  .sm\:col-span-3 {
    grid-column: span 3 / span 3;
  }

  .sm\:text-sm {
    font-size: 14px;
    line-height: 20px;
  }
}

.uppercase {
  text-transform: uppercase;
}

.self-center {
  align-self: center;
}

/* 后台看板：内容列较窄，只有宽屏才铺成 5 / 4 列 */
@media (min-width: 1180px) {
  .admin-stats {
    grid-template-columns: repeat(5, minmax(0, 1fr));
  }

  .admin-metrics {
    grid-template-columns: repeat(4, minmax(0, 1fr));
  }
}

/* ============================================================
 * 会员胶囊：design-system 的 .dash-hero-fact:hover 会把背景刷成
 * rgba(255,255,255,.2)，而会员胶囊本身是深底浅字，悬停后文字直接消失。
 * 这里把各档背景在 :hover 下按原样钉回去，只保留提亮。
 * ============================================================ */
.dash-hero-fact.dashboard-membership-fact:hover {
  background: linear-gradient(135deg, rgba(57, 48, 30, 0.88), rgba(20, 24, 23, 0.78));
}

.dash-hero-fact.dashboard-membership-fact.is-none:hover,
.dash-hero-fact.dashboard-membership-fact.is-expired:hover {
  background: rgba(101, 111, 107, 0.48);
}

/* 账号下拉是深底面板（原为侧栏配色），页面里挂到白底头部时
   内部裸文案会继承 text-gray-400 变成深字，这里统一压成浅色。 */
.account-dropdown-menu > p,
.account-dropdown-menu p {
  color: rgba(226, 240, 228, 0.72);
}