/*
  Interlace 卡密托管页样式（深色卡面 + 查看/隐藏 切换）。
  CSP: style-src 'self' 'unsafe-inline' —— 本文件走 'self' 同源加载。

  隐藏/显示机制（PCI 关键）：真实 PAN/CVV/有效期由 Interlace 渲染在各自 iframe 内，
  「隐藏」绝不能对 iframe 用 display:none（会触发 iframe 重载，过期 token 再取即失败）。
  故每个字段用 grid 把「真实槽(.real=iframe)」与「遮罩(.mask=圆点)」堆在同一格，
  靠 .card.revealed 切换二者 visibility —— iframe 始终存活，隐藏只是盖上遮罩。
*/
:root {
  --gold:   #C9992E;
  --gold-1: #E8B65A;
  --gold-2: #C68A28;
  --muted:  rgba(255,255,255,.52);
}
* { margin: 0; padding: 0; box-sizing: border-box; }
html, body { height: 100%; background: transparent; }
body {
  font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", "PingFang SC", system-ui, sans-serif;
  color: #fff;
  -webkit-user-select: none; user-select: none;
}

/* 深色卡面铺满 WebView 视口（App 侧已用 AspectRatio 约束卡片比例） */
.card {
  position: relative; box-sizing: border-box;
  width: 100%; height: 100%; min-height: 190px;
  border-radius: 20px; padding: 26px 28px; overflow: hidden;
  display: flex; flex-direction: column;
  background:
    radial-gradient(130% 90% at 92% -12%, rgba(201,153,46,.42) 0%, rgba(201,153,46,0) 44%),
    linear-gradient(160deg, #24242a 0%, #141416 100%);
}

/* 顶行：品牌 + VISA */
.top { display: flex; align-items: center; justify-content: space-between; }
.brand { font-size: 18px; font-weight: 700; letter-spacing: .01em; }
/* VISA 字标（内联 SVG，白色单色；fill=currentColor 便于换色）。
   靠右：.top 为 space-between 已顶到卡面右缘，margin-left:auto 再钉死靠右（布局变动兜底）。 */
.visa { height: 15px; width: auto; display: block; color: #fff; margin-left: auto; }
/* Mastercard 双圆标（彩色，不随 currentColor）；比 VISA 字标略高以求视觉等重，同样靠右。 */
.mc { height: 26px; width: auto; display: block; margin-left: auto; }

/* 芯片行：芯片 + 查看/隐藏 */
.mid { display: flex; align-items: center; justify-content: space-between; margin-top: 12px; }
.chip { width: 40px; height: auto; display: block; filter: drop-shadow(0 1px 1px rgba(0,0,0,.35)); }
.toggle {
  display: inline-flex; align-items: center; justify-content: center;
  width: 38px; height: 38px; padding: 0; color: #fff;
  background: rgba(255,255,255,.12); border: 1px solid rgba(255,255,255,.2);
  border-radius: 999px; cursor: pointer; -webkit-tap-highlight-color: transparent;
}
.toggle:active { background: rgba(255,255,255,.2); }
.toggle:disabled { cursor: default; }
/* 睁眼=查看（掩码态默认），闭眼=隐藏（揭示态）。图标用 currentColor */
.toggle .eye { width: 16px; height: 16px; display: block; }
.toggle .eye-off { display: none; }
.card.revealed .toggle .eye-open { display: none; }
.card.revealed .toggle .eye-off  { display: block; }
/* loading 态仅禁用按钮（见 .toggle:disabled），不显示 spinner，眼睛图标保持可见 */

/* 卡号行：卡号 + 复制 */
.pan-row { display: flex; align-items: center; justify-content: space-between; gap: 12px; margin-top: auto; }

/* 字段槽：真实(iframe) 与 遮罩(圆点) 堆同格，visibility 切换 */
.slot { display: grid; min-width: 0; position: relative; }
.slot > * { grid-area: 1 / 1; }
/* .sizer：隐形撑位，用等宽数字占「真实数据」的宽度来定槽格尺寸。掩码是圆点（比数字窄），
   若让掩码定尺寸，真实数字会比槽宽、右侧被裁。sizer visibility:hidden 只占位不显示。 */
.slot .sizer { visibility: hidden; font-variant-numeric: tabular-nums; }
/* .real 是 Interlace 注入 iframe 的目标（须为 div）。iframe 默认 intrinsic 300×150，
   若参与尺寸计算会撑宽撑高整卡；故绝对定位铺满槽格、不参与尺寸——槽格尺寸由 .sizer 决定。
   竖直用负 inset 给一点余量（Interlace 内部内容略高于一行，避免字底被裁），绝对定位不影响
   布局。绝不用 display:none（会触发 iframe 重载，过期 token 再取即失败）。 */
.slot .real { position: absolute; inset: -0.15em 0; visibility: hidden; }
.slot .real iframe { display: block; width: 100%; height: 100%; border: 0; }
.slot .mask { visibility: visible; }
.card.revealed .slot .real { visibility: visible; }
.card.revealed .slot .mask { visibility: hidden; }

.pan {
  font-size: 18px; font-weight: 700; letter-spacing: .06em;
  font-variant-numeric: tabular-nums; line-height: 1.15; min-height: 1.15em;
}
/* 复制按钮：不用 display:none 隐藏——SDK 的 copyCardPan 要往本元素注入透明复制 iframe，
   零尺寸元素注入不了；故始终保留盒子，用 opacity + pointer-events 控制可见/可点。 */
.copy {
  flex: none; background: none; border: none; color: var(--muted); cursor: pointer; padding: 4px;
  display: inline-flex; opacity: 0; pointer-events: none;
  transition: opacity .15s, transform .1s; -webkit-tap-highlight-color: transparent;
}
.card.revealed .copy { opacity: 1; pointer-events: auto; }
.copy:active { transform: scale(.86); }               /* 直接命中按钮时的按压反馈 */
.copy svg { width: 18px; height: 18px; display: block; }

/* 底行：VALID / CVV */
.bottom { display: flex; align-items: flex-end; justify-content: space-between; margin-top: 14px; }
.bottom .cvvcol { text-align: right; }
.bottom .cvvcol .slot { justify-items: end; }
.cap { font-size: 14px;  color: var(--muted); text-transform: uppercase; margin-bottom: 4px; }
.val { font-size: 16px; font-weight: 600; font-variant-numeric: tabular-nums; line-height: 1.15; min-height: 1.15em; }

[hidden] { display: none !important; }