/* MiniPay 复现台 · 业务补充样式
   基础样式（重置、设计变量、Tailwind 工具类、移动端适配）全部来自 vendor/tuyo.css，
   这里只补 Tuyo 没有的工具类小组件，颜色一律引用 Tuyo 的 CSS 变量。 */

/* 文本 */
.mono { font-family: ui-monospace, SFMono-Regular, "SF Mono", Menlo, Consolas, monospace; font-size: .78rem; line-height: 1.5; word-break: break-all; }
.dim { color: var(--muted-foreground); }
.faint { color: var(--muted-foreground); font-size: .78rem; line-height: 1.55; }

/* 状态条 */
.status {
  margin-top: .625rem;
  padding: .55rem .7rem;
  border-radius: .5rem;
  background: var(--muted);
  color: var(--muted-foreground);
  font-size: .8rem;
  line-height: 1.6;
  word-break: break-word;
}
.status.ok { background: color-mix(in srgb, #2f7d55 12%, var(--card)); color: #2f7d55; }
.status.err { background: color-mix(in srgb, var(--destructive) 12%, var(--card)); color: var(--destructive); }
.status.warn { background: color-mix(in srgb, #96631a 14%, var(--card)); color: #96631a; }
.dark .status.ok { background: color-mix(in srgb, #74c69d 16%, var(--card)); color: #8fd7b3; }
.dark .status.warn { background: color-mix(in srgb, #e2b872 16%, var(--card)); color: #e8c78c; }

/* 徽标 */
.chip {
  display: inline-flex;
  align-items: center;
  gap: .3rem;
  padding: .15rem .55rem;
  border-radius: 999px;
  border: 1px solid var(--border);
  background: var(--muted);
  color: var(--muted-foreground);
  font-size: .72rem;
  line-height: 1.5;
  white-space: nowrap;
}
.chip.ok { background: color-mix(in srgb, #2f7d55 12%, var(--card)); color: #2f7d55; border-color: color-mix(in srgb, #2f7d55 28%, transparent); }
.chip.bad, .chip.err { background: color-mix(in srgb, var(--destructive) 12%, var(--card)); color: var(--destructive); border-color: color-mix(in srgb, var(--destructive) 28%, transparent); }
.chip.warn { background: color-mix(in srgb, #96631a 14%, var(--card)); color: #96631a; border-color: color-mix(in srgb, #96631a 26%, transparent); }
.chip.primary { background: var(--secondary); color: var(--secondary-foreground); border-color: color-mix(in srgb, var(--primary) 24%, transparent); }
.dark .chip.ok { color: #8fd7b3; }
.dark .chip.warn { color: #e8c78c; }

/* 提示块 */
.note {
  padding: .7rem .85rem;
  border-radius: .55rem;
  border: 1px solid var(--border);
  background: var(--muted);
  color: var(--muted-foreground);
  font-size: .8rem;
  line-height: 1.7;
}
.note.info { background: var(--accent); border-color: color-mix(in srgb, var(--primary) 20%, transparent); color: var(--accent-foreground); }
.note.warn { background: color-mix(in srgb, #96631a 12%, var(--card)); border-color: color-mix(in srgb, #96631a 26%, transparent); color: #7d5314; }
.note.err { background: color-mix(in srgb, var(--destructive) 10%, var(--card)); border-color: color-mix(in srgb, var(--destructive) 26%, transparent); color: var(--destructive); }
.note.pre { white-space: pre-line; font-family: ui-monospace, Menlo, Consolas, monospace; font-size: .76rem; }
.dark .note.warn { color: #e8c78c; }

/* 请求日志 */
.log { display: flex; flex-direction: column; gap: .5rem; }
.entry { padding: .55rem .7rem; border-radius: .55rem; background: var(--muted); border: 1px solid transparent; }
.entry.bad { background: color-mix(in srgb, var(--destructive) 8%, var(--card)); border-color: color-mix(in srgb, var(--destructive) 22%, transparent); }
.entry .meta { display: flex; flex-wrap: wrap; align-items: center; gap: .4rem; font-size: .74rem; color: var(--muted-foreground); }
.entry .body { margin-top: .25rem; font-size: .8rem; word-break: break-all; }
.empty { padding: 1.4rem .75rem; text-align: center; color: var(--muted-foreground); font-size: .8rem; }

/* JWT 解析结果 */
.claims { display: flex; flex-direction: column; }
.claims .kv { display: grid; grid-template-columns: 8.5rem 1fr; gap: .6rem; padding: .4rem 0; border-bottom: 1px dashed var(--border); font-size: .8rem; }
.claims .kv:last-child { border-bottom: 0; }
.claims .kv .k { color: var(--muted-foreground); font-family: ui-monospace, Menlo, monospace; font-size: .74rem; }
.claims .kv .v { word-break: break-all; }
.claims .kv .v.bad { color: var(--destructive); }
.claims .kv .v.ok { color: #2f7d55; }
.dark .claims .kv .v.ok { color: #8fd7b3; }

/* 分段控件 */
.seg {
  display: inline-flex;
  gap: .2rem;
  padding: .18rem;
  border-radius: .55rem;
  background: var(--muted);
  border: 1px solid var(--border);
  max-width: 100%;
  overflow-x: auto;
  scrollbar-width: none;
}
.seg::-webkit-scrollbar { display: none; }
.seg button {
  min-height: 2.1rem;
  padding: .3rem .8rem;
  border: 0;
  border-radius: .4rem;
  background: transparent;
  color: var(--muted-foreground);
  font-size: .8rem;
  white-space: nowrap;
  cursor: pointer;
}
.seg button.active { background: var(--card); color: var(--foreground); font-weight: 600; box-shadow: 0 1px 3px rgba(0, 0, 0, .08); }

/* 代码片段与步骤 */
.snippet {
  margin: .7rem 0;
  padding: .7rem .85rem;
  border-radius: .55rem;
  border: 1px solid var(--border);
  background: var(--muted);
  font-family: ui-monospace, Menlo, Consolas, monospace;
  font-size: .76rem;
  white-space: pre-wrap;
  word-break: break-all;
  overflow-x: auto;
}
.steps { margin: .5rem 0 .8rem; padding-left: 1.15rem; font-size: .82rem; line-height: 1.75; color: var(--foreground); }
.steps li { margin-bottom: .25rem; }
ul.plain { margin: .5rem 0 .8rem; padding-left: 1.1rem; font-size: .82rem; line-height: 1.7; }
ul.plain li { margin-bottom: .25rem; }
code { font-family: ui-monospace, Menlo, Consolas, monospace; font-size: .78rem; background: var(--muted); padding: .08rem .3rem; border-radius: .3rem; }
details summary { cursor: pointer; padding: .3rem 0; font-size: .8rem; color: var(--muted-foreground); }

/* 代理池 */
.proxy-list { display: flex; flex-direction: column; gap: .5rem; }
.proxy-item {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: .5rem;
  padding: .6rem .75rem;
  border: 1px solid var(--border);
  border-radius: .55rem;
  background: var(--card);
  font-size: .8rem;
}
.proxy-item .purl { flex: 1 1 12rem; min-width: 0; font-family: ui-monospace, Menlo, monospace; font-size: .76rem; word-break: break-all; }
.proxy-item.cooling { border-color: color-mix(in srgb, #96631a 40%, transparent); background: color-mix(in srgb, #96631a 8%, var(--card)); }

/* 表格里的操作按钮组 */
.cell-actions { display: flex; flex-wrap: wrap; gap: .35rem; }
.cell-actions button { min-height: 1.9rem; padding: .2rem .6rem; font-size: .76rem; }

/* 原生 select（替代表驱动 Select） */
select.ui-select {
  height: 2.25rem;
  width: 100%;
  border-radius: .375rem;
  border: 1px solid var(--input);
  background: transparent;
  padding: 0 .55rem;
  font-size: .875rem;
  color: var(--foreground);
  outline: none;
}
select.ui-select:focus-visible { border-color: var(--ring); box-shadow: 0 0 0 3px color-mix(in srgb, var(--ring) 25%, transparent); }

/* 抽屉 */
.drawer-mask { position: fixed; inset: 0; z-index: 50; background: rgba(0, 0, 0, .4); }
.drawer-mask.hidden, .drawer-panel.hidden { display: none; }
.drawer-panel {
  position: fixed;
  inset: 0 auto 0 0;
  z-index: 51;
  display: flex;
  flex-direction: column;
  height: 100dvh;
  width: min(20rem, calc(100vw - 2rem));
  border-right: 1px solid var(--border);
  background: var(--background);
  box-shadow: 0 20px 50px rgba(0, 0, 0, .25);
}

/* 一次性输入对话框 */
dialog.mini-dialog {
  width: min(24rem, calc(100vw - 2rem));
  padding: 1.25rem;
  border: 1px solid var(--border);
  border-radius: var(--radius);
  background: var(--card);
  color: var(--card-foreground);
  box-shadow: 0 24px 60px rgba(0, 0, 0, .28);
}
dialog.mini-dialog::backdrop { background: rgba(0, 0, 0, .4); }
dialog.mini-dialog h3 { margin-bottom: .85rem; font-size: .95rem; font-weight: 600; }

/* 移动端：输入框 16px 防 iOS 缩放、触控目标 44px（Tuyo 已有一层，这里补业务元素） */
@media (max-width: 899px) {
  .claims .kv { grid-template-columns: 1fr; gap: .1rem; }
  .status, .note { font-size: .84rem; }
  .seg button { min-height: 2.4rem; }
  .proxy-item { font-size: .84rem; }
}

/* 响应式显隐（Tuyo 的产物里没有 sm:block / md:block） */
.show-sm, .show-md { display: none; }
@media (min-width: 640px) { .show-sm { display: block; } }
@media (min-width: 768px) { .show-md { display: block; } }

/* 顶栏信息按宽度收起（Tuyo 产物里没有 sm:inline / xl:inline-flex 的完整组合） */
@media (max-width: 639px) { .hide-sm { display: none; } }
@media (max-width: 1023px) { .hide-md { display: none; } }