/* =============================================================
   Minine Inc — v2 站点层
   tokens / components / screens 三层来自设计稿，这一层只补真实站点
   需要而设计稿里没有的东西：预发标记、加载态、语言主题控件、长文排版。
   ============================================================= */

/* ---------------------------------------------------------- lab flag */

/* 预发环境的常驻提示，避免有人把 lab 当正式站截图对外发。 */
.labflag {
  position: fixed;
  z-index: 120;
  right: 14px;
  bottom: 12px;
  padding: 5px 14px;
  border-radius: var(--r-pill);
  background: var(--ink);
  color: var(--paper);
  font-size: 10.5px;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  opacity: 0.72;
  pointer-events: none;
}

/* 手机屏窄，浮标别压在正文上：缩到右下角一小块 */
@media (max-width: 560px) {
  .labflag {
    right: 8px;
    bottom: 8px;
    padding: 3px 8px;
    font-size: 9px;
    opacity: 0.55;
  }
}

/* ---------------------------------------------------------- motion */

/*
   两套进场。
   [data-rise] 给首屏：页面一挂上就按层级依次淡入上移，纯 CSS，不等 JS。
   [data-reveal] 给首屏以下：滚到视口里才走，app.js 用 IntersectionObserver 加 is-in。

   位移只有 10px、时长 400ms 左右——这类动效一旦大了就显得廉价。
   两套都关在 no-preference 里：系统里关了动效的人，这些规则整条不生效，
   元素从头到尾就是普通的可见状态。
*/

@keyframes rise-in {
  from {
    opacity: 0;
    transform: translateY(10px);
  }
}

@media (prefers-reduced-motion: no-preference) {
  [data-rise] {
    animation: rise-in 460ms var(--ease) both;
  }
  [data-rise="1"] {
    animation-delay: 30ms;
  }
  [data-rise="2"] {
    animation-delay: 90ms;
  }
  [data-rise="3"] {
    animation-delay: 160ms;
  }
  [data-rise="4"] {
    animation-delay: 230ms;
  }
  [data-rise="5"] {
    animation-delay: 300ms;
  }

  /* .reveal-ready 由 app.js 在真的挂上观察器时才加：脚本没跑起来的话
     这些元素就是普通可见状态，不会有一整页透明的内容。 */
  .reveal-ready [data-reveal] {
    opacity: 0;
    transform: translateY(14px);
    transition: opacity 520ms var(--ease), transform 520ms var(--ease);
  }
  .reveal-ready [data-reveal].is-in {
    opacity: 1;
    transform: none;
  }

  /* 二级页面的页头统一按行错开，不用每个页面自己标 */
  body[data-shell="site"] .phead > * {
    animation: rise-in 460ms var(--ease) both;
  }
  body[data-shell="site"] .phead > *:nth-child(2) {
    animation-delay: 60ms;
  }
  body[data-shell="site"] .phead > *:nth-child(3) {
    animation-delay: 120ms;
  }
  body[data-shell="site"] .phead > *:nth-child(n + 4) {
    animation-delay: 170ms;
  }

  /* 内容填进容器时淡一下，替代原来那套闪光骨架 */
  [data-fill].is-filled > * {
    animation: rise-in 420ms var(--ease) both;
  }
  [data-fill].is-filled > *:nth-child(2) {
    animation-delay: 70ms;
  }
  [data-fill].is-filled > *:nth-child(3) {
    animation-delay: 140ms;
  }
  [data-fill].is-filled > *:nth-child(n + 4) {
    animation-delay: 200ms;
  }
}

/* ---------------------------------------------------------- 数字位 */

/* 数字变化时宽度会跳，等宽数字能少抖一点 */
.numslot {
  font-variant-numeric: tabular-nums;
}

/*
   一个数字都拿不到时的占位（首访 + 烘进 HTML 的快照也没有 + 接口没回来）。
   显示一条和字号等高的灰条，而不是 0——"0 people. 0 apps. 0 users."
   读起来不像加载中，像公司倒闭了。--wait-ch 是预留的字符宽度。
*/
.numslot--wait {
  display: inline-block;
  position: relative;
  overflow: hidden;
  width: calc(var(--wait-ch, 3) * 0.58em);
  height: 0.62em;
  vertical-align: baseline;
  border-radius: var(--r-sm);
  background: color-mix(in srgb, currentColor 16%, transparent);
}

.numslot--wait::after {
  content: "";
  position: absolute;
  inset: 0;
  transform: translateX(-100%);
  background: linear-gradient(90deg, transparent, rgb(255 255 255 / 0.4), transparent);
  animation: skel-shimmer 1.9s cubic-bezier(0.4, 0, 0.2, 1) infinite;
}

[data-theme="dark"] .numslot--wait::after {
  background: linear-gradient(90deg, transparent, rgb(255 255 255 / 0.08), transparent);
}

@media (prefers-reduced-motion: reduce) {
  .numslot--wait::after {
    animation: none;
  }
}

/* 数据没到之前先把位置占住，填进来时下面的内容不会被顶走 */
.featured:empty {
  min-height: 320px;
}

.siteband:empty {
  min-height: 132px;
}

/* ---------------------------------------------------------- shell */

.view {
  display: block;
  padding-bottom: var(--s-9);
}

/*
   内容进来之前先把一屏的高度占住。不这么做的话第一帧是"顶栏 + 紧挨着的页脚"，
   页面一渲染页脚被推到几千像素以下，CLS 直接 0.42。
*/
.view:empty {
  min-height: 100vh;
}

/*
   build-seo.js 生成的静态快照正文。给爬虫看的，也顺带当首屏占位：SPA 一渲染
   就被整块换掉，所以同样要撑住一屏，不然换的瞬间页脚会往下弹一次。
*/
.prerender {
  min-height: 100vh;
}

/* 二级页面的页头：面包屑 + 标题，比首屏 hero 收敛一档 */
.phead {
  padding: var(--s-8) 0 var(--s-6);
  display: flex;
  flex-direction: column;
  gap: var(--s-4);
}

.phead h1 {
  font-size: clamp(36px, 4.2vw, 60px);
}

.phead .lede {
  max-width: 64ch;
}

/* phead 是纵向 flex，行内元素默认会被拉满一整行 */
.phead .badge,
.phead .crumb {
  align-self: flex-start;
}

.crumb {
  display: inline-flex;
  align-items: center;
  gap: var(--s-2);
  font-family: var(--mono);
  font-size: 11px;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--faint);
}

.crumb a:hover {
  color: var(--brand-ink);
}

/* ---------------------------------------------------------- nav extras */

.nav__links a.is-active {
  color: var(--brand-ink);
  font-weight: 600;
}

/* 语言 / 主题：顶栏右侧的小分段控件，不用下拉，省一次点击 */
.seg {
  display: inline-flex;
  align-items: center;
  padding: 2px;
  border: 1px solid var(--line);
  border-radius: var(--r-pill);
  background: var(--surface);
}

.seg button {
  padding: 4px 10px;
  border: 0;
  border-radius: var(--r-pill);
  background: none;
  font-family: var(--mono);
  font-size: 11px;
  letter-spacing: 0.06em;
  color: var(--muted);
  cursor: pointer;
  transition: background var(--fast), color var(--fast);
}

.seg button:hover {
  color: var(--ink);
}

.seg button[aria-pressed="true"] {
  background: var(--ink);
  color: var(--paper);
}

/* ---------------------------------------------------------- loading */

/* 整页骨架照搬真实版式（见 skeletons.js），外层只是个容器 */
.page-skel {
  display: block;
}

.missing {
  padding: var(--s-9) 0;
  font-family: var(--mono);
  font-size: 14px;
  color: var(--muted);
}

/* 团队人数后面的单位：中文"人"可以贴着，英文 "people" 必须留空格 */
.statband .stat__value em {
  margin-left: 0.22em;
}

/* ---------------------------------------------------------- live numbers */

/* 数字被推进时闪一下品红，+1 这种小改动也能被注意到 */
.is-ticking {
  color: var(--brand);
  transition: color var(--base);
}

/* ---------------------------------------------------------- app icons from stores */

/* 商店图标是位图，圆角要自己切；appicon 的 grid 居中对 img 无效，改成盖满 */
img.appicon {
  object-fit: cover;
  display: block;
}

/* ---------------------------------------------------------- forms */

/* 文件选择框本体藏起来，点的是旁边那个 label 按钮 */
.filein {
  position: absolute;
  width: 1px;
  height: 1px;
  opacity: 0;
  pointer-events: none;
}

.filelist {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
}

.filex {
  border: 0;
  background: none;
  padding: 0 0 0 2px;
  color: inherit;
  cursor: pointer;
  font-size: 13px;
  line-height: 1;
}

.field__hint.is-err {
  color: var(--danger);
}

.field__hint.is-ok {
  color: color-mix(in srgb, var(--mint) 80%, var(--ink));
}

/* 登录卡和投递卡里的表单：字段之间留一致的呼吸 */
.logincard form,
.applycard form {
  display: flex;
  flex-direction: column;
  gap: var(--s-4);
}

/* ---------------------------------------------------------- long-form doc */

.doc {
  max-width: var(--text);
  display: flex;
  flex-direction: column;
  gap: var(--s-4);
  font-size: 16px;
  line-height: 1.8;
  color: var(--ink-2);
}

.doc h2 {
  font-size: 26px;
  margin-top: var(--s-5);
}

.doc h3 {
  font-size: 19px;
  margin-top: var(--s-4);
}

.doc ul,
.doc ol {
  margin: 0;
  padding-left: 22px;
  display: flex;
  flex-direction: column;
  gap: var(--s-2);
}

.doc a {
  color: var(--brand-ink);
  border-bottom: 1px solid var(--brand-line);
}

/* ---------------------------------------------------------- footer bits */

.foot__grid h4 {
  font-family: var(--sans);
  font-size: 13px;
  letter-spacing: 0.04em;
  margin-bottom: var(--s-3);
}

.foot__grid ul {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: var(--s-2);
  font-size: 14px;
  color: var(--muted);
}

.foot__grid a:hover {
  color: var(--brand-ink);
}

/* ---------------------------------------------------------- console shell */

/* 后台自带侧栏和顶栏，营销站的顶栏 / 页脚在这里让位 */
body[data-shell="console"] .nav,
body[data-shell="console"] .foot {
  display: none;
}

body[data-shell="console"] .view {
  padding-bottom: 0;
}

.cside__who {
  display: flex;
  flex-direction: column;
  min-width: 0;
  line-height: 1.25;
}

.cside__name {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.cside__role {
  font-size: 10px;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--faint);
}

/* 控制台里的小节说明文字 */
.chint {
  font-size: 13px;
  color: var(--muted);
  max-width: 72ch;
}

.chint--err {
  color: var(--danger);
}

/* 行内字段：标签和控件同一行，用在工具条和紧凑表单里 */
.field--inline {
  flex-direction: row;
  align-items: center;
  gap: 8px;
}

.field--inline .field__label {
  flex: none;
  font-size: 12px;
  color: var(--muted);
}

.field--inline .input,
.field--inline .select {
  width: auto;
  padding: 7px 10px;
  font-size: 13px;
}

/* 面板标题用 h2/h3 写语义，字号跟 .panel__title 走 */
.panel__head h2,
.panel__head h3 {
  margin: 0;
  font-family: var(--sans);
  font-size: 15px;
  font-weight: 600;
  letter-spacing: 0;
}

/* ---------------------------------------------------------- console forms & tables */

/* 同一页里若干个面板竖着排 */
.cstack {
  display: flex;
  flex-direction: column;
  gap: var(--s-5);
}

.panel--narrow {
  max-width: 560px;
}

.panel__headend {
  display: flex;
  align-items: center;
  gap: var(--s-3);
}

.formgrid {
  display: flex;
  flex-direction: column;
  gap: var(--s-4);
}

/* 一行放多个字段，窄屏自动落成一列 */
.formgrid__row {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
  gap: var(--s-4);
}

.formgrid__foot {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--s-4);
  padding-top: var(--s-2);
}

/* ---- /admin/profile：对外卡片的编辑区 ---- */

/* 左边填字段，右边实时预览。窄屏预览挪到最上面，先看效果再改。 */
.cardedit {
  display: grid;
  grid-template-columns: minmax(0, 1fr) 260px;
  gap: var(--s-6);
  align-items: start;
  margin-top: var(--s-5);
}

.cardedit__prev {
  display: flex;
  flex-direction: column;
  gap: var(--s-3);
  padding: var(--s-5);
  border-radius: var(--r-lg);
  background: var(--sunken);
}

/* 头像整块占一行，网格才铺得开——挤在字段那一列里每个只有指甲盖大 */
.avfield {
  margin-top: var(--s-6);
}

/*
 * 头像选择：单选按钮本体藏掉，选中态画在图片外框上。
 * 格子里不上品牌色——那块颜色在团队页上是按位置轮的，跟选哪个头像无关，
 * 在这里染上反而误导。真实效果看右边的预览。
 */
/* 固定八列而不是按宽度自动填：一共十六个，八列正好两排齐口，auto-fill 在宽屏
   上会排成 11 + 5 这种断掉的样子 */
.avpick {
  display: grid;
  grid-template-columns: repeat(8, 1fr);
  gap: var(--s-4);
  max-width: 760px;
  margin-top: var(--s-2);
}

.avpick__item {
  display: block;
  cursor: pointer;
}

.avpick__item input {
  position: absolute;
  opacity: 0;
  pointer-events: none;
}

.avpick__item img {
  display: block;
  width: 100%;
  /* height 属性是 256，不显式压回 auto 的话它会当成表现层提示盖掉 aspect-ratio，
     格子被撑成 256 高的长条 */
  height: auto;
  aspect-ratio: 1;
  object-fit: contain;
  border-radius: 26%;
  background: var(--sunken);
  box-shadow: inset 0 0 0 2px transparent;
  transition: box-shadow var(--fast), transform var(--fast), background var(--fast);
}

.avpick__item:hover img {
  transform: translateY(-3px);
  background: var(--brand-soft);
}

.avpick__item input:checked + img {
  background: var(--brand-soft);
  box-shadow: inset 0 0 0 3px var(--brand);
}

.avpick__item input:focus-visible + img {
  box-shadow: inset 0 0 0 3px var(--brand), 0 0 0 3px var(--brand-line);
}

/* 名册列表里的小头像。同样不垫品牌色，那是 /team 上按位置轮的 */
.avthumb {
  display: block;
  width: 40px;
  height: auto;
  aspect-ratio: 1;
  object-fit: contain;
  border-radius: 28%;
  background: var(--sunken);
}

/* 预览下面那行"为什么还没出现"：缺东西才提亮，都齐了就退回普通灰 */
[data-why].is-todo {
  color: var(--brand-ink);
}

@media (max-width: 760px) {
  .cardedit {
    grid-template-columns: 1fr;
  }

  /* 预览提到字段上面：窄屏下它要是垫在最底下，改一个字得滚回去看效果 */
  .cardedit__prev {
    order: -1;
  }

  .avpick {
    grid-template-columns: repeat(4, 1fr);
  }
}

/* markdown / 长文本输入：等宽 + 关掉调整手柄之外的多余装饰 */
.docinput {
  min-height: 200px;
  line-height: 1.6;
  resize: vertical;
}

.tickgroup {
  margin: 0;
  padding: var(--s-4);
  border: 1px solid var(--line);
  border-radius: var(--r-sm);
  display: flex;
  flex-direction: column;
  gap: var(--s-3);
}

.tickgroup__legend {
  padding: 0 6px;
  font-size: 12px;
  color: var(--muted);
}

.tickgrid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(120px, 1fr));
  gap: var(--s-3);
}

/* 表格里一格两行：主标题 + 次要信息 */
.cellstack {
  display: flex;
  flex-direction: column;
  gap: 2px;
  min-width: 0;
}

.cellstack__title {
  font-weight: 500;
}

.cellstack__sub {
  font-size: 11.5px;
  color: var(--faint);
}

.table tbody tr.is-clickable {
  cursor: pointer;
}

/* 次要列在窄屏收掉，信息挪进主单元格（.sm-only）里，免得横向拖动才能看到状态 */
.sm-only {
  display: none;
}

@media (max-width: 700px) {
  .tcell--sm-hide {
    display: none;
  }

  .sm-only {
    display: block;
  }

  /* 收掉次要列之后就不必再横向滚动了 */
  .table--sm-fit {
    min-width: 0;
  }
}

/* 键值对详情 */
.deflist {
  display: flex;
  flex-direction: column;
}

.deflist__row {
  display: grid;
  grid-template-columns: 160px minmax(0, 1fr);
  gap: var(--s-4);
  padding: var(--s-3) 0;
  border-bottom: 1px solid var(--line);
}

.deflist__row:last-child {
  border-bottom: 0;
}

.deflist__key {
  font-size: 13px;
  color: var(--muted);
}

.deflist__val {
  min-width: 0;
  font-size: 14px;
  overflow-wrap: anywhere;
}

.deflist__val--pre {
  white-space: pre-wrap;
}

.filelist2 {
  margin: 0;
  padding: 0;
  list-style: none;
  display: flex;
  flex-direction: column;
  gap: var(--s-2);
}

.filerow {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--s-3);
  padding: var(--s-3);
  border-radius: var(--r-sm);
  background: var(--sunken);
}

.filerow__name {
  font-weight: 500;
}

.filerow__meta {
  font-size: 11.5px;
  color: var(--faint);
  margin-right: auto;
}

/* 法务页：两个正文并排，窄屏落成一列 */
.legalblock summary {
  cursor: pointer;
  list-style: none;
}

.legalblock summary::-webkit-details-marker {
  display: none;
}

.legalblock:not([open]) summary {
  border-bottom: 0;
}

.legalblock__meta {
  display: flex;
  align-items: center;
  gap: var(--s-3);
}

/* 折叠面板的箭头：展开后转 180°。挂在 meta 上，窄屏换行时跟着走 */
.legalblock__meta::after,
.blended summary::after {
  content: "▾";
  display: inline-block;
  font-size: 11px;
  color: var(--faint);
  transition: transform var(--fast);
}

.legalblock[open] .legalblock__meta::after,
.blended[open] summary::after {
  transform: rotate(180deg);
}

.legalform__meta {
  display: grid;
  grid-template-columns: 1fr 1fr 200px;
  gap: var(--s-4);
}

.legalform__bodies {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: var(--s-4);
}

@media (max-width: 1080px) {
  .legalform__meta,
  .legalform__bodies {
    grid-template-columns: 1fr;
  }
}

@media (max-width: 700px) {
  .deflist__row {
    grid-template-columns: 1fr;
    gap: 4px;
  }

  /* 面板标题带右侧信息时，窄屏改成上下两行，别把时间戳挤成竖排 */
  .panel__head {
    flex-direction: column;
    align-items: flex-start;
    gap: var(--s-2);
  }

  .panel__headend,
  .legalblock__meta {
    flex-wrap: wrap;
  }

  .legalblock__meta {
    width: 100%;
    justify-content: space-between;
  }
}

/* 一个输入框 + 一个按钮同行，按钮跟输入框底部对齐（有 hint 时也不歪） */
.inlinerow {
  display: flex;
  align-items: flex-end;
  gap: var(--s-3);
}

.inlinerow .field,
.inlinerow .input,
.inlinerow .select {
  flex: 1 1 auto;
  min-width: 0;
}

.inlinerow .btn {
  flex: none;
}

/* 序号一类的窄列不占多余宽度 */
.tcell--tight {
  width: 1%;
  white-space: nowrap;
}

.field--narrow {
  max-width: 260px;
}

.select--sm {
  padding: 6px 28px 6px 10px;
  font-size: 13px;
}

.badge--danger {
  border-color: var(--danger);
  color: var(--danger);
}

/* Catalog：抓回来的商店信息预览 */
.apprev {
  display: flex;
  gap: var(--s-4);
  align-items: flex-start;
  padding: var(--s-4);
  margin-bottom: var(--s-5);
  border-radius: var(--r-sm);
  background: var(--sunken);
}

.apprev__icon {
  width: 64px;
  height: 64px;
  flex: none;
  border-radius: 14px;
  object-fit: cover;
  background: var(--line);
}

.apprev__meta {
  display: flex;
  flex-direction: column;
  gap: 3px;
  min-width: 0;
}

.apprev__name {
  font-weight: 600;
}

.apprev__desc {
  margin: 4px 0 0;
  font-size: 13px;
  color: var(--muted);
}

/* 里程碑：自定义指标那一行 key + value */
.msnewkey {
  display: grid;
  grid-template-columns: 1fr 120px;
  gap: var(--s-3);
  align-items: end;
  max-width: 420px;
}

/* 账号管理 */
.ustar {
  color: var(--sun-ink);
  font-size: 12px;
}

.ubadges {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
}

.urow__ops {
  display: flex;
  align-items: center;
  justify-content: flex-end;
  gap: var(--s-2);
}

.urow__ops .select {
  width: auto;
  min-width: 132px;
}

.urow__ops .btn {
  white-space: nowrap;
}

.pwline {
  display: inline-flex;
  align-items: center;
  gap: var(--s-3);
  flex-wrap: wrap;
}

/* 一次性信息的模态框（目前只有新建账号的临时密码） */
.modal {
  position: fixed;
  inset: 0;
  z-index: 60;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: var(--s-5);
  background: rgb(20 12 18 / 55%);
}

.modal__card {
  width: min(520px, 100%);
  max-height: 90vh;
  overflow-y: auto;
  display: flex;
  flex-direction: column;
  gap: var(--s-4);
  padding: var(--s-6);
  border-radius: var(--r-md);
  background: var(--surface);
  box-shadow: var(--sh-pop);
}

.modal__title {
  margin: 0;
  font-family: var(--serif);
  font-size: 22px;
}

@media (max-width: 700px) {
  .msnewkey {
    grid-template-columns: 1fr;
  }

  .urow__ops {
    justify-content: flex-start;
    flex-wrap: wrap;
  }
}

/* ---------------------------------------------------------- console overview */

/* 概览的四个数字卡是链接：点了直接进对应的管理页 */
a.cstat {
  color: inherit;
  transition: border-color var(--fast), background var(--fast);
}

a.cstat:hover {
  border-color: var(--brand-line);
  background: var(--brand-soft);
}

.cstat__value {
  font-family: var(--serif);
  font-size: 29px;
  line-height: 1.1;
  letter-spacing: -0.02em;
}

.cstat__value.is-dim {
  color: var(--faint);
}

.cstat__note {
  font-size: 12px;
  color: var(--muted);
}

.ctwo {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: var(--s-4);
  align-items: start;
}

.btnrow {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
}

.codeout {
  margin: var(--s-4) 0 0;
  padding: var(--s-4);
  max-height: 260px;
  overflow: auto;
  border-radius: var(--r-sm);
  background: var(--sunken);
  font-size: 12px;
  line-height: 1.55;
  white-space: pre-wrap;
  word-break: break-word;
  color: var(--ink-2);
}

/* 概览里的列表只用来看，不需要 hover 高亮 */
.tditem--static:hover {
  background: none;
}

.tditem__meta .is-late {
  color: var(--danger);
}

@media (max-width: 1080px) {
  .ctwo {
    grid-template-columns: 1fr;
  }
}

@media (max-width: 560px) {
  .cstat__value {
    font-size: 26px;
  }
}

/* ---------------------------------------------------------- partner billing */

.blpage {
  display: flex;
  flex-direction: column;
  gap: var(--s-5);
  padding-bottom: var(--s-8);
}

.blhead__who {
  display: flex;
  flex-direction: column;
  gap: 2px;
  min-width: 0;
}

.blhead__name {
  font-family: var(--serif);
  font-size: 20px;
  letter-spacing: -0.01em;
}

.blitem {
  display: flex;
  flex-direction: column;
  gap: 4px;
}

.blitem__title {
  font-weight: 500;
}

.blitem__tags {
  display: flex;
  flex-wrap: wrap;
  gap: 5px;
}

.blitem__detail {
  font-size: 13px;
  color: var(--muted);
  white-space: pre-wrap;
}

.blitem__date {
  display: block;
  font-size: 11.5px;
  color: var(--faint);
}

/* 周期后缀（/月、/年）跟在金额后面，比金额小一号 */
.blsuffix {
  margin-left: 3px;
  font-size: 11px;
  color: var(--faint);
}

.blsub td {
  border-top: 1px solid var(--line-strong);
  background: var(--sunken);
  font-weight: 600;
}

.table--muted tbody td {
  color: var(--muted);
}

.blended {
  overflow: hidden;
}

.blended summary {
  cursor: pointer;
  list-style: none;
}

.blended summary::-webkit-details-marker {
  display: none;
}

.blended:not([open]) summary {
  border-bottom: 0;
}

.blreq {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: var(--s-4);
}

.blreq__wide {
  grid-column: 1 / -1;
}

.blreq__foot {
  grid-column: 1 / -1;
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--s-4);
}

@media (max-width: 700px) {
  .blreq {
    grid-template-columns: 1fr;
  }
}

/* ---------------------------------------------------------- admin billing */

.rcptnav {
  display: flex;
  flex-wrap: nowrap;
  align-items: center;
  gap: var(--s-3);
  white-space: nowrap;
}

.rcptrange {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 8px;
}

.rcptrange .input {
  width: auto;
  padding: 7px 10px;
  font-size: 13px;
}

/* 应收清单：屏幕上就长成一张打印出来的收据，跟导出的 PNG/PDF 对得上 */
.rcpt {
  max-width: 620px;
  padding: var(--s-5);
  border-radius: var(--r-sm);
  background: var(--sunken);
  font-size: 12.5px;
  line-height: 1.55;
}

.rcpt__head {
  text-align: center;
  color: var(--faint);
  font-size: 11.5px;
}

.rcpt__brand {
  font-size: 16px;
  font-weight: 700;
  letter-spacing: 0.22em;
  color: var(--ink);
}

.rcpt__rule {
  border-top: 1px dashed var(--line-strong);
  margin: var(--s-3) 0;
}

.rcpt__line {
  display: flex;
  gap: 10px;
  align-items: baseline;
  padding: 3px 0;
}

.rcpt__date {
  flex: 0 0 44px;
  color: var(--faint);
  font-size: 11.5px;
  white-space: nowrap;
}

.rcpt__desc {
  flex: 1 1 auto;
  min-width: 0;
  word-break: break-word;
}

.rcpt__cad {
  color: var(--faint);
  font-size: 11px;
}

.rcpt__amt {
  flex: 0 0 auto;
  text-align: right;
  white-space: nowrap;
}

.rcpt__cny {
  display: block;
  color: var(--faint);
  font-size: 11px;
}

.rcpt__subhead {
  color: var(--faint);
  font-size: 10.5px;
  letter-spacing: 0.1em;
  text-transform: uppercase;
}

.rcpt__line--sub .rcpt__desc {
  color: var(--muted);
}

.rcpt__line--total {
  font-weight: 700;
  font-size: 13.5px;
}

.rcpt__note {
  margin-top: var(--s-3);
  color: var(--faint);
  font-size: 11px;
}

/* 合作方列表：一行一个，编辑表单和密钥就地展开 */
.plist {
  margin: 0;
  padding: 0;
  list-style: none;
}

.plist__row {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  gap: var(--s-3) var(--s-4);
  align-items: start;
  padding: var(--s-4) var(--s-5);
  border-bottom: 1px solid var(--line);
}

.plist__row:last-child {
  border-bottom: 0;
}

.plist__main {
  display: flex;
  flex-direction: column;
  gap: 5px;
  min-width: 0;
}

.plist__name {
  align-self: flex-start;
  padding: 0;
  border: 0;
  background: none;
  font: inherit;
  font-weight: 600;
  color: inherit;
  cursor: pointer;
  text-decoration: underline;
  text-decoration-color: var(--brand-line);
  text-underline-offset: 3px;
}

.plist__name:hover {
  color: var(--brand-ink);
}

.plist__counts {
  display: flex;
  flex-wrap: wrap;
  gap: 5px;
}

.plist__ops {
  display: flex;
  flex-wrap: wrap;
  justify-content: flex-end;
  gap: var(--s-2);
}

.plist__key,
.plist__edit {
  grid-column: 1 / -1;
}

.plist__key {
  margin: 0;
}

/* 条目行的操作区 */
.itemops {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: flex-end;
  gap: var(--s-2);
}

.itemops .btn {
  white-space: nowrap;
}

/* 待定价的条目：金额列直接是"填个数字就定价"的输入框 */
.pricerow .input {
  width: 92px;
  flex: 0 0 auto;
}

.pricerow .btn {
  white-space: nowrap;
}

/* 条目编辑表单占满一整行，底色区分出"这是展开出来的" */
.editrow > td {
  padding: var(--s-5);
  background: var(--sunken);
}

/* ---------------------------------------------------------- admin receipts */

.rceditor {
  display: grid;
  grid-template-columns: minmax(320px, 1fr) minmax(320px, 620px);
  gap: var(--s-5);
  align-items: start;
}

.rcpreview {
  position: sticky;
  top: var(--s-5);
  display: flex;
  flex-direction: column;
  gap: var(--s-3);
}

/* 明细行：标题独占一行，第二行放期间 / 数量 / 单价 / 删除，窄栏里也不挤 */
.rcitem {
  display: grid;
  grid-template-columns: minmax(0, 1fr) 60px 104px auto;
  gap: 8px;
  align-items: center;
  padding-bottom: var(--s-3);
}

.rcitem input[name="title"] {
  grid-column: 1 / -1;
}

.rcitem .btn {
  white-space: nowrap;
}

/* 多条明细之间给一道虚线，免得上下两条的字段看起来是一行 */
.rcitem + .rcitem {
  border-top: 1px dashed var(--line);
  padding-top: var(--s-3);
}

.table tbody tr.is-void td {
  opacity: 0.55;
}

.rcdoc-wrap {
  display: flex;
  justify-content: center;
}

/* 收据文书：正规账单版式，屏幕上和导出的 PDF 保持一致 */
.rcdoc {
  position: relative;
  width: 100%;
  max-width: 620px;
  padding: var(--s-6);
  border-radius: var(--r-sm);
  background: var(--surface);
  border: 1px solid var(--line);
  font-size: 12.5px;
  line-height: 1.55;
  overflow: hidden;
}

.rcdoc__logo {
  height: 46px;
  width: auto;
  display: block;
  margin-bottom: var(--s-5);
}

/* 深色主题下黑 logo 看不见，换白色版 */
[data-theme="dark"] .rcdoc__logo {
  content: url("/MG_White.png");
}

.rcdoc__top {
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
  gap: var(--s-5);
}

.rcdoc__coname {
  font-size: 14.5px;
  font-weight: 700;
  letter-spacing: 0.08em;
}

.rcdoc__line {
  margin-top: 3px;
  color: var(--faint);
  font-size: 10.5px;
  word-break: break-word;
}

.rcdoc__titleblock {
  flex: 0 0 auto;
  text-align: right;
}

.rcdoc__title {
  font-size: 14.5px;
  font-weight: 700;
  letter-spacing: 0.14em;
}

.rcdoc__meta {
  margin-top: 3px;
  color: var(--faint);
  font-size: 11px;
}

.rcdoc__rule {
  border-top: 1px dashed var(--line-strong);
  margin: var(--s-4) 0;
}

.rcdoc__billto {
  margin-top: var(--s-5);
}

.rcdoc__seclabel {
  margin-bottom: 5px;
  color: var(--faint);
  font-size: 10px;
  font-weight: 700;
  letter-spacing: 0.14em;
}

.rcdoc__buyer {
  font-size: 13.5px;
  font-weight: 700;
}

.rcdoc__table {
  width: 100%;
  border-collapse: collapse;
  margin: var(--s-5) 0 6px;
  font-size: 12px;
}

.rcdoc__table th {
  padding: 6px 8px;
  border-bottom: 1px solid var(--line-strong);
  color: var(--faint);
  font-size: 10.5px;
  font-weight: 700;
  text-align: left;
}

.rcdoc__table td {
  padding: 7px 8px;
  border-bottom: 1px dashed var(--line);
  vertical-align: top;
}

.rcdoc__num {
  text-align: right;
  white-space: nowrap;
}

.rcdoc__table th.rcdoc__num {
  text-align: right;
}

.rcdoc__period {
  display: block;
  margin-top: 2px;
  color: var(--faint);
  font-size: 10px;
}

.rcdoc__sums {
  width: 260px;
  max-width: 100%;
  margin: var(--s-3) 0 0 auto;
}

.rcdoc__sumrow {
  display: flex;
  justify-content: space-between;
  gap: var(--s-4);
  padding: 3px 0;
  font-size: 11.5px;
}

.rcdoc__sumrow--total {
  margin-top: 4px;
  padding-top: 6px;
  border-top: 1px solid var(--line-strong);
  font-size: 13.5px;
  font-weight: 700;
}

.rcdoc__sumrow--due {
  color: var(--faint);
}

.rcdoc__kv {
  margin-top: 6px;
  color: var(--faint);
  font-size: 11px;
  word-break: break-word;
}

.rcdoc__foot {
  margin-top: var(--s-4);
  font-size: 12px;
}

.rcdoc__decl {
  margin-top: var(--s-4);
  color: var(--faint);
  font-size: 9.5px;
}

.rcdoc--void {
  opacity: 0.85;
}

.rcdoc__stamp {
  position: absolute;
  top: 42%;
  left: 50%;
  transform: translate(-50%, -50%) rotate(-22deg);
  font-size: 64px;
  font-weight: 700;
  letter-spacing: 0.2em;
  color: rgb(176 58 46 / 16%);
  pointer-events: none;
  user-select: none;
}

/* 侧栏吃掉 260px 后，1280 以下再并排就两边都挤，直接改成上下 */
@media (max-width: 1280px) {
  .rceditor {
    grid-template-columns: 1fr;
  }

  .rcpreview {
    position: static;
  }
}

/* 结算这几张表列太多，窄屏塞不下：整行改成一张卡片，一格一行往下排 */
@media (max-width: 700px) {
  .table--stack thead {
    display: none;
  }

  .table--stack tbody tr {
    display: block;
    padding: var(--s-4) var(--s-5);
    border-bottom: 1px solid var(--line);
  }

  .table--stack tbody tr:last-child {
    border-bottom: 0;
  }

  .table--stack tbody td {
    display: block;
    padding: 3px 0;
    border: 0;
    text-align: left;
  }

  .table--stack tbody td:empty,
  .table--stack tbody td.tcell--sm-hide {
    display: none;
  }

  .table--stack .itemops,
  .table--stack .table__actions {
    justify-content: flex-start;
    padding-top: var(--s-2);
  }

  .table--stack .editrow > td {
    padding: var(--s-4);
    border-radius: var(--r-sm);
  }
}

@media (max-width: 700px) {
  .rcpt {
    padding: var(--s-4);
    font-size: 11.5px;
  }

  .rcpt__date {
    flex-basis: 38px;
  }

  .plist__row {
    grid-template-columns: minmax(0, 1fr);
  }

  .plist__ops {
    justify-content: flex-start;
  }

  .itemops {
    justify-content: flex-start;
  }

  .rcitem > .btn {
    grid-column: 1 / -1;
    justify-self: start;
  }

  .editrow > td,
  .rcdoc {
    padding: var(--s-4);
  }
}

/* ---------------------------------------------------------- todos */

.tdform {
  display: flex;
  flex-direction: column;
  gap: var(--s-3);
}

.tdform__main {
  display: flex;
  gap: var(--s-3);
}

.tdform__main .input {
  flex: 1;
  min-width: 0;
}

.tdform__main .btn {
  flex: none;
}

.tdform__opts {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--s-4);
}

.tdform__btns {
  display: flex;
  gap: 8px;
  margin-left: auto;
}

/* 列表用 ul/li 写语义，但不要浏览器默认的项目符号缩进 */
.tdlist {
  margin: 0;
  padding: 0;
  list-style: none;
}

.tdhead {
  padding: var(--s-3) var(--s-5);
  border-bottom: 1px solid var(--line);
  background: var(--sunken);
  font-size: 11.5px;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--faint);
}

.tdempty {
  padding: var(--s-5);
}

.tditem__tags {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 6px;
}

.tditem__detail {
  font-size: 13px;
  color: var(--muted);
  white-space: pre-wrap;
}

.tditem--edit {
  display: block;
  background: var(--sunken);
}

.tditem--edit:hover {
  background: var(--sunken);
}

.tdrange__custom {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 8px;
}

.tdrange__custom .input {
  width: auto;
  padding: 7px 10px;
  font-size: 13px;
}

/* 触屏没有 hover，操作按钮直接常显 */
@media (hover: none) {
  .tditem__ops,
  .table__actions {
    opacity: 1;
  }
}

/* ---------------------------------------------------------- responsive */

@media (max-width: 900px) {
  .nav {
    height: auto;
    padding: 10px 12px;
    flex-wrap: wrap;
    border-radius: var(--r-lg);
  }

  .nav__links {
    order: 3;
    width: 100%;
    gap: var(--s-4);
    flex-wrap: wrap;
    padding-top: var(--s-2);
    font-size: 13.5px;
  }

  .statband__inner {
    grid-template-columns: repeat(2, 1fr);
    row-gap: var(--s-6);
  }

  .statband .stat:nth-child(odd) {
    border-left: 0;
    padding-left: 0;
  }

  .featured {
    grid-template-columns: 1fr;
  }

  .sect__head--split {
    flex-direction: column;
    align-items: flex-start;
  }
}

@media (max-width: 560px) {
  /* 顶栏在手机上要塞下链接行，主 CTA 让位——导航里本来就有"产品" */
  .nav__end .btn:not(.btn--ghost) {
    display: none;
  }

  /* 目录页筛选条：手机上搜索框独占一行，筛选和计数排第二行 */
  .catbar {
    flex-direction: column;
    align-items: stretch;
  }

  .catbar .search {
    min-width: 0;
    width: 100%;
  }

  .nav__links {
    justify-content: space-between;
    gap: var(--s-3);
  }
}