/* ============================================================
   剧情卡片 · 拟物美化皮肤层 (Skeuomorphic Skin)
   来源：剧情卡片美化.txt（Tailwind 设计稿）→ 翻译为项目纯 CSS
   作用域：全部限定在 .scenario-card 内，避免污染全局
   夜间：设计稿的 .dark 映射为 body.dark-mode / body.night
   依赖：scenario-card-fx.js（按键音效/振动/点击变状态）
   ============================================================ */

/* 字体（与设计稿一致） */
@import url('https://fonts.googleapis.com/css2?family=Playfair+Display:ital,wght@0,400;0,500;0,600;1,400;1,500&family=Plus+Jakarta+Sans:wght@300;400;500;600&family=Noto+Serif+SC:wght@300;400;500;700&family=Noto+Sans+SC:wght@300;400;500&family=Space+Mono:ital,wght@0,400;0,700;1,400&family=Caveat:wght@400;500;600&display=swap');

/* ── 色板：日间为默认值，夜间在 body.dark-mode 下覆盖（禁止硬编码，全走变量）── */
.scenario-card {
  --sc-bg: #FCFBF9;
  --sc-border: #F2EFEA;
  --sc-panel: #F9F8F5;
  --sc-panel-border: #EAE7E0;
  --sc-ink: #4A453F;        /* 主文字 */
  --sc-ink-2: #4A453F;      /* 次级主文字（夜间会变浅） */
  --sc-muted: #8C857B;      /* 辅助文字 */
  --sc-muted-2: #A8A39D;    /* 更浅标签文字 */
  --sc-window: #EAE7E0;     /* 图片挖孔窗底 */
  --sc-btn: #4A453F;        /* 主按钮底 */
  --sc-btn-ink: #FFFFFF;    /* 主按钮字 */
  --sc-btn-ok: #4A5D4E;     /* 成功态绿 */
  --sc-dash: #E6E2DC;       /* 虚线 */
  --sc-serif: 'Playfair Display','Noto Serif SC',serif;
  --sc-sans: 'Plus Jakarta Sans','Noto Sans SC',sans-serif;
  --sc-mono: 'Space Mono',monospace;
  --sc-hand: 'Caveat',cursive;

  font-family: var(--sc-sans);
  color: var(--sc-ink);
  box-sizing: border-box;
}
.scenario-card *, .scenario-card *::before, .scenario-card *::after { box-sizing: border-box; }

/* 夜间色板覆盖（在根块覆盖变量值，不写死颜色） */
body.dark-mode .scenario-card,
body.night .scenario-card {
  --sc-bg: #1E1C1A;
  --sc-border: #2C2A28;
  --sc-panel: #252321;
  --sc-panel-border: #33312E;
  --sc-ink: #E8E6E3;
  --sc-ink-2: #D4CFC9;
  --sc-muted: #7A7570;
  --sc-muted-2: #7A7570;
  --sc-window: #111111;
  --sc-btn: #D4CFC9;
  --sc-btn-ink: #222222;
  --sc-btn-ok: #4A5D4E;
  --sc-dash: #3A3A3A;
}

/* ── 卡片基础容器：奶油柔和底影 ── */
.scenario-card.sk-card {
  position: relative;
  width: 100%;
  background: var(--sc-bg);
  border: 1px solid var(--sc-border);
  border-radius: 28px;
  padding: 16px;
  box-shadow: 0 16px 32px -12px rgba(140,133,123,.08), 0 4px 12px -4px rgba(0,0,0,.03);
  transition: background .3s, border-color .3s, color .3s;
}
body.dark-mode .scenario-card.sk-card,
body.night .scenario-card.sk-card {
  box-shadow: 0 16px 32px -12px rgba(0,0,0,.6), 0 4px 12px -4px rgba(0,0,0,.4);
}

/* ── 纸张肌理（SVG 噪点叠加）── */
.sk-paper { position: relative; }
.sk-paper::after {
  content: ""; position: absolute; inset: 0; pointer-events: none; z-index: 20;
  mix-blend-mode: multiply; border-radius: inherit; opacity: .04;
  background-image: url("data:image/svg+xml,%3Csvg viewBox='0 0 200 200' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.85' numOctaves='3' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)' opacity='1'/%3E%3C/svg%3E");
}
body.dark-mode .sk-paper::after,
body.night .sk-paper::after { mix-blend-mode: screen; opacity: .06; }

/* ── 挖孔内嵌窗（图片/凹槽）── */
.sk-window {
  background: var(--sc-window);
  box-shadow:
    inset 0 4px 8px -2px rgba(74,69,63,.25),
    inset 0 1px 3px rgba(74,69,63,.15),
    inset 0 0 0 1px rgba(74,69,63,.1),
    0 1px 1px rgba(255,255,255,.8);
}
body.dark-mode .sk-window,
body.night .sk-window {
  box-shadow:
    inset 0 6px 12px -2px rgba(0,0,0,.9),
    inset 0 1px 4px rgba(0,0,0,.6),
    inset 0 0 0 1px rgba(0,0,0,.5),
    0 1px 1px rgba(255,255,255,.05);
}
.sk-window > img { width: 100%; height: 100%; object-fit: cover; opacity: .95; }
body.dark-mode .sk-window > img,
body.night .sk-window > img { filter: brightness(.9); }

/* 卡片题图：真实图填满容器；加载失败回落 emoji（居中 + 渐变底，不开天窗） */
.scenario-card .sk-hero-img { display: block; width: 100%; height: 100%; object-fit: cover; opacity: .95; }
body.dark-mode .scenario-card .sk-hero-img,
body.night .scenario-card .sk-hero-img { filter: brightness(.9); }
.scenario-card .sk-hero-emoji {
  width: 100%; height: 100%; display: flex; align-items: center; justify-content: center;
  font-size: 46px; background: linear-gradient(135deg,#F5F4F0,#D4CFC9);
}
body.dark-mode .scenario-card .sk-hero-emoji,
body.night .scenario-card .sk-hero-emoji { background: linear-gradient(135deg,#2a2724,#111); }

/* ── 内嵌面板（订单明细底盒）── */
.sk-panel {
  background: var(--sc-panel);
  border: 1px solid var(--sc-panel-border);
  border-radius: 16px;
  transition: background .3s, border-color .3s;
}

/* ── 物理按键（点击下沉 + 高光）── */
.btn-tactile {
  position: relative; cursor: pointer; user-select: none;
  touch-action: manipulation; -webkit-tap-highlight-color: transparent;
  transition: all .2s cubic-bezier(.4,0,.2,1);
  box-shadow: 0 4px 10px rgba(74,69,63,.15), 0 1px 2px rgba(0,0,0,.1), inset 0 1px 1px rgba(255,255,255,.4);
}
body.dark-mode .btn-tactile,
body.night .btn-tactile {
  box-shadow: 0 4px 10px rgba(0,0,0,.5), 0 1px 2px rgba(0,0,0,.3), inset 0 1px 1px rgba(255,255,255,.05);
}
.btn-tactile:active { transform: translateY(2px) scale(.96); }
.btn-tactile.btn-pressed {
  box-shadow: inset 0 3px 6px rgba(0,0,0,.15), inset 0 1px 3px rgba(0,0,0,.2) !important;
  transform: translateY(1px) !important; cursor: default; pointer-events: none;
}
body.dark-mode .btn-tactile.btn-pressed,
body.night .btn-tactile.btn-pressed {
  box-shadow: inset 0 4px 8px rgba(0,0,0,.8), inset 0 1px 3px rgba(0,0,0,.5) !important;
}

/* 主按钮配色（深底浅字，可点） */
.sk-btn-primary { background: var(--sc-btn); color: var(--sc-btn-ink); border: none; }
.sk-btn-primary.btn-ok { background: var(--sc-btn-ok); color: #fff; }
/* 次按钮（浅底描边） */
.sk-btn-ghost { background: var(--sc-panel); color: var(--sc-ink-2); border: 1px solid var(--sc-panel-border); }

/* ── 虚线分隔 ── */
.sk-dashed { border-top: 1.5px dashed var(--sc-dash); }

/* ── 条码（密/疏两种）── */
.sk-barcode-dense {
  background: repeating-linear-gradient(to right,#333,#333 1px,transparent 1px,transparent 3px,#333 3px,#333 5px,transparent 5px,transparent 6px,#333 6px,#333 7px,transparent 7px,transparent 9px,#333 9px,#333 12px,transparent 12px,transparent 13px);
}
.sk-barcode-soft {
  background: repeating-linear-gradient(to bottom,#A8A39D,#A8A39D 1px,transparent 1px,transparent 3px,#A8A39D 3px,#A8A39D 5px,transparent 5px,transparent 7px,#A8A39D 7px,#A8A39D 8px,transparent 8px,transparent 11px);
}
body.dark-mode .sk-barcode-dense, body.dark-mode .sk-barcode-soft,
body.night .sk-barcode-dense, body.night .sk-barcode-soft { opacity: .5; }

/* ── 呼吸灯（在线/配送中状态点）── */
@keyframes skBreathe {
  0%,100% { opacity:.6; box-shadow:0 0 2px rgba(16,185,129,.3); }
  50%     { opacity:1;  box-shadow:0 0 8px rgba(16,185,129,.8),0 0 2px rgba(16,185,129,.5); }
}
.sk-live-dot { width:6px; height:6px; border-radius:50%; background:#10b981; animation:skBreathe 2.5s ease-in-out infinite; }

/* ── 字体工具类 ── */
.sk-serif { font-family: var(--sc-serif); }
.sk-sans  { font-family: var(--sc-sans); }
.sk-mono  { font-family: var(--sc-mono); }
.sk-hand  { font-family: var(--sc-hand); }

/* ── 文字色工具 ── */
.sk-ink   { color: var(--sc-ink); }
.sk-ink2  { color: var(--sc-ink-2); }
.sk-muted { color: var(--sc-muted); }
.sk-muted2{ color: var(--sc-muted-2); }

/* ── lucide 替代：内联 SVG 统一描边 ── */
.scenario-card .sk-ico { display:inline-block; vertical-align:middle; stroke:currentColor; fill:none; stroke-width:2; stroke-linecap:round; stroke-linejoin:round; }
.scenario-card .sk-ico-fill { fill:currentColor; stroke:none; }

/* ============================================================
   01. 外卖卡 card-delivery（新皮肤 .sk-card.card-delivery）
   字段映射：店铺/商品(订单)/金额/状态/骑手/预计/备注
   ============================================================ */
.scenario-card.card-delivery .dlv-hero {
  width: 100%; height: 140px; border-radius: 20px; margin-bottom: 16px;
  overflow: hidden; position: relative;
}
.scenario-card.card-delivery .dlv-hero-emoji {
  width: 100%; height: 100%; display: flex; align-items: center; justify-content: center;
  font-size: 52px; background: linear-gradient(135deg, #F5F4F0, #D4CFC9);
}
body.dark-mode .scenario-card.card-delivery .dlv-hero-emoji,
body.night .scenario-card.card-delivery .dlv-hero-emoji { background: linear-gradient(135deg,#2a2724,#111); }
.scenario-card.card-delivery .dlv-store-name {
  font-family: var(--sc-serif); font-size: 22px; color: var(--sc-ink); margin-bottom: 2px;
}
.scenario-card.card-delivery .dlv-sub {
  font-size: 10px; color: var(--sc-muted); letter-spacing: .1em; font-weight: 300; margin-bottom: 16px;
}
.scenario-card.card-delivery .dlv-addr {
  display: flex; align-items: flex-start; gap: 5px;
  font-size: 10.5px; color: var(--sc-ink-2); line-height: 1.5;
  margin-top: -10px; margin-bottom: 16px;
}
.scenario-card.card-delivery .dlv-addr svg { width: 12px; height: 12px; flex-shrink: 0; margin-top: 1px; }
.scenario-card.card-delivery .dlv-order { padding: 12px; border-radius: 16px; margin-bottom: 16px; }
.scenario-card.card-delivery .dlv-line {
  display: flex; justify-content: space-between; align-items: center;
  font-size: 11px; color: var(--sc-ink-2); margin-bottom: 10px;
}
.scenario-card.card-delivery .dlv-line:last-child { margin-bottom: 0; }
.scenario-card.card-delivery .dlv-line .qty { color: var(--sc-muted-2); margin-right: 12px; }
.scenario-card.card-delivery .dlv-note {
  margin-top: 10px; padding: 10px; border-radius: 8px;
  background: rgba(242,239,234,.6); border: 1px solid rgba(234,231,224,.5);
  font-size: 10px; color: var(--sc-muted); line-height: 1.6; font-style: italic;
  display: flex; gap: 8px; align-items: flex-start;
}
body.dark-mode .scenario-card.card-delivery .dlv-note,
body.night .scenario-card.card-delivery .dlv-note { background: rgba(51,49,46,.5); border-color: rgba(51,49,46,.5); }
.scenario-card.card-delivery .dlv-total {
  margin-top: 10px; padding-top: 10px; display: flex; justify-content: space-between; align-items: flex-end;
}
.scenario-card.card-delivery .dlv-total-label {
  font-size: 9px; color: var(--sc-muted-2); text-transform: uppercase; letter-spacing: .05em; font-weight: 500;
}
.scenario-card.card-delivery .dlv-total-price {
  font-family: var(--sc-serif); font-size: 16px; color: var(--sc-ink-2); font-style: italic; font-weight: 500;
}
.scenario-card.card-delivery .dlv-rider { display: flex; align-items: center; justify-content: space-between; }
.scenario-card.card-delivery .dlv-rider-left { display: flex; align-items: center; gap: 8px; }
.scenario-card.card-delivery .dlv-avatar {
  width: 32px; height: 32px; border-radius: 50%; background: var(--sc-bg);
  display: flex; align-items: center; justify-content: center;
  border: 1px solid var(--sc-panel-border); position: relative;
}
.scenario-card.card-delivery .dlv-avatar .dot {
  position: absolute; top: 0; right: 0; width: 8px; height: 8px; border-radius: 50%;
  background: #22c55e; border: 2px solid var(--sc-bg);
}
.scenario-card.card-delivery .dlv-rider-name { font-size: 11px; color: var(--sc-ink-2); font-weight: 500; }
.scenario-card.card-delivery .dlv-rider-eta { font-size: 9px; color: var(--sc-muted-2); }
.scenario-card.card-delivery .dlv-confirm {
  font-size: 10px; padding: 8px 16px; border-radius: 9999px; font-weight: 500; letter-spacing: .02em;
  display: inline-flex; align-items: center; gap: 6px;
}
.scenario-card.card-delivery .dlv-confirm .sk-ico { width: 12px; height: 12px; }

/* ============================================================
   02. 快递卡 card-express
   ============================================================ */
.scenario-card.card-express .ex-barcode { width: 100%; height: 36px; opacity: .8; margin-bottom: 8px; }
.scenario-card.card-express .ex-trackno {
  text-align: center; font-size: 10px; letter-spacing: .2em; color: var(--sc-muted); margin-bottom: 20px;
}
.scenario-card.card-express .ex-hero { width: 100%; height: 120px; border-radius: 12px; margin-bottom: 20px; overflow: hidden; }
.scenario-card.card-express .ex-hero-emoji {
  width: 100%; height: 100%; display: flex; align-items: center; justify-content: center; font-size: 48px;
  background: linear-gradient(135deg,#F5F4F0,#D4CFC9);
}
body.dark-mode .scenario-card.card-express .ex-hero-emoji,
body.night .scenario-card.card-express .ex-hero-emoji { background: linear-gradient(135deg,#2a2724,#111); }
.scenario-card.card-express .ex-status-title { text-align: center; font-size: 24px; color: var(--sc-ink); margin-bottom: 2px; }
.scenario-card.card-express .ex-status-sub {
  text-align: center; font-size: 10px; letter-spacing: .15em; text-transform: uppercase; color: var(--sc-muted); margin-bottom: 20px;
}
.scenario-card.card-express .ex-timeline { padding: 16px; border-radius: 12px; margin-bottom: 20px; position: relative; }
.scenario-card.card-express .ex-tl-row { display: flex; gap: 12px; align-items: flex-start; }
.scenario-card.card-express .ex-tl-row:first-child { margin-bottom: 16px; }
.scenario-card.card-express .ex-tl-row.faded { opacity: .5; }
.scenario-card.card-express .ex-tl-dot {
  width: 12px; height: 12px; border-radius: 50%; margin-top: 2px; flex-shrink: 0;
  background: var(--sc-muted-2); outline: 4px solid var(--sc-panel);
}
.scenario-card.card-express .ex-tl-dot.active { background: var(--sc-ink); }
.scenario-card.card-express .ex-tl-text { font-size: 11px; color: var(--sc-ink-2); font-weight: 500; line-height: 1.3; }
.scenario-card.card-express .ex-tl-time { font-size: 9px; color: var(--sc-muted); margin-top: 2px; }
.scenario-card.card-express .ex-footer { display: flex; align-items: center; justify-content: space-between; padding-top: 16px; }
.scenario-card.card-express .ex-addr {
  display: flex; align-items: flex-start; gap: 5px;
  font-size: 10.5px; color: var(--sc-ink-2); line-height: 1.5;
  padding-top: 12px; margin-top: 4px;
}
.scenario-card.card-express .ex-addr svg { width: 12px; height: 12px; flex-shrink: 0; margin-top: 1px; }
.scenario-card.card-express .ex-pkg { display: flex; align-items: center; gap: 8px; font-size: 10px; color: var(--sc-ink-2); font-weight: 500; }
.scenario-card.card-express .ex-pkg .sk-ico { width: 16px; height: 16px; }
.scenario-card.card-express .ex-contact { font-size: 9px; padding: 6px 12px; border-radius: 9999px; font-weight: 500; display: inline-flex; align-items: center; gap: 4px; }
.scenario-card.card-express .ex-contact .sk-ico { width: 12px; height: 12px; }

/* ============================================================
   03. 打车卡 card-car
   ============================================================ */
.scenario-card.card-car .car-hero { width: 100%; height: 120px; border-radius: 20px; margin-bottom: 16px; overflow: hidden; }
.scenario-card.card-car .car-hero-emoji {
  width: 100%; height: 100%; display: flex; align-items: center; justify-content: center; font-size: 48px;
  background: linear-gradient(135deg,#F5F4F0,#D4CFC9);
}
body.dark-mode .scenario-card.card-car .car-hero-emoji,
body.night .scenario-card.card-car .car-hero-emoji { background: linear-gradient(135deg,#2a2724,#111); }
.scenario-card.card-car .car-head { display: flex; justify-content: space-between; align-items: flex-start; margin-bottom: 16px; }
.scenario-card.card-car .car-model { font-size: 22px; color: var(--sc-ink); margin-bottom: 2px; }
.scenario-card.card-car .car-sub { font-size: 10px; color: var(--sc-muted); letter-spacing: .1em; }
.scenario-card.card-car .car-plate {
  font-size: 10px; font-weight: 500; letter-spacing: .15em; color: var(--sc-ink-2);
  border: 1px solid var(--sc-panel-border); background: var(--sc-bg); padding: 4px 8px; border-radius: 6px;
}
.scenario-card.card-car .car-route { padding: 14px; border-radius: 16px; margin-bottom: 16px; position: relative; }
.scenario-card.card-car .car-route-line {
  position: absolute; left: 21px; top: 22px; bottom: 22px; width: 1px;
  background: linear-gradient(to bottom, var(--sc-muted-2), var(--sc-ink)); opacity: .4;
}
.scenario-card.card-car .car-stop { display: flex; align-items: center; gap: 12px; }
.scenario-card.card-car .car-stop:first-child { margin-bottom: 16px; }
.scenario-card.card-car .car-dot {
  width: 8px; height: 8px; border-radius: 50%; flex-shrink: 0; z-index: 1;
  outline: 2px solid var(--sc-panel); background: var(--sc-muted-2);
}
.scenario-card.card-car .car-dot.end { background: var(--sc-ink); }
.scenario-card.card-car .car-stop-name { font-size: 11px; color: var(--sc-ink-2); }
.scenario-card.card-car .car-stop-name.strong { font-weight: 500; }
.scenario-card.card-car .car-note {
  padding-top: 10px; margin-bottom: 12px; display: flex; gap: 8px; align-items: flex-start;
  font-size: 10px; color: var(--sc-muted); line-height: 1.6; font-style: italic;
}
.scenario-card.card-car .car-note .sk-ico { width: 14px; height: 14px; flex-shrink: 0; margin-top: 2px; }
.scenario-card.card-car .car-driver { display: flex; align-items: center; justify-content: space-between; padding-top: 12px; }
.scenario-card.card-car .car-driver-left { display: flex; align-items: center; gap: 10px; }
.scenario-card.card-car .car-avatar {
  width: 32px; height: 32px; border-radius: 50%; background: var(--sc-bg);
  display: flex; align-items: center; justify-content: center; border: 1px solid var(--sc-panel-border);
}
.scenario-card.card-car .car-avatar .sk-ico { width: 14px; height: 14px; }
.scenario-card.card-car .car-driver-name { font-size: 11px; color: var(--sc-ink-2); font-weight: 500; }
.scenario-card.card-car .car-driver-meta { font-size: 9px; color: var(--sc-muted-2); }
.scenario-card.card-car .car-call { width: 32px; height: 32px; border-radius: 50%; display: flex; align-items: center; justify-content: center; padding: 0; }
.scenario-card.card-car .car-call .sk-ico { width: 14px; height: 14px; }

/* ============================================================
   04. 航班卡 card-flight（登机牌：左主券 + 右副券，虚线分隔）
   ============================================================ */
.scenario-card.card-flight.fl-pass { display: flex; padding: 0; border-radius: 20px; overflow: hidden; }
.scenario-card.card-flight .fl-main { flex: 1; padding: 14px 16px; border-right: 2px dashed var(--sc-panel-border); display: flex; flex-direction: column; gap: 12px; }
.scenario-card.card-flight .fl-top { display: flex; justify-content: space-between; align-items: flex-start; }
.scenario-card.card-flight .fl-r { text-align: right; }
.scenario-card.card-flight .fl-k { font-size: 7px; color: var(--sc-muted-2); letter-spacing: .2em; text-transform: uppercase; margin-bottom: 2px; }
.scenario-card.card-flight .fl-v { font-size: 12px; font-weight: 700; color: var(--sc-ink); }
.scenario-card.card-flight .fl-route { display: flex; align-items: center; justify-content: space-between; }
.scenario-card.card-flight .fl-city { text-align: center; width: 56px; }
.scenario-card.card-flight .fl-code { font-size: 26px; line-height: 1; letter-spacing: -.02em; color: var(--sc-ink); }
.scenario-card.card-flight .fl-name { font-size: 7px; color: var(--sc-muted); text-transform: uppercase; letter-spacing: .12em; margin-top: 4px; }
.scenario-card.card-flight .fl-mid { flex: 1; position: relative; display: flex; align-items: center; justify-content: center; padding: 0 12px; }
.scenario-card.card-flight .fl-line { width: 100%; height: 1px; background: var(--sc-panel-border); }
.scenario-card.card-flight .fl-plane { position: absolute; width: 14px; height: 14px; background: var(--sc-bg); padding: 0 4px; box-sizing: content-box; }
.scenario-card.card-flight .fl-detail { display: flex; justify-content: space-between; align-items: flex-end; padding: 8px 10px; border-radius: 10px; }
.scenario-card.card-flight .fl-time { color: #D9534F; }
body.dark-mode .scenario-card.card-flight .fl-time,
body.night .scenario-card.card-flight .fl-time { color: #F87171; }
.scenario-card.card-flight .fl-foot { display: flex; align-items: center; justify-content: space-between; }
.scenario-card.card-flight .fl-status { display: flex; align-items: center; gap: 6px; font-size: 8px; font-weight: 700; letter-spacing: .15em; text-transform: uppercase; color: var(--sc-ink); }
.scenario-card.card-flight .fl-scan { font-size: 9px; padding: 6px 10px; border-radius: 6px; font-weight: 500; display: inline-flex; align-items: center; gap: 4px; }
.scenario-card.card-flight .fl-scan.btn-danger { background: #8A3A3A; color: #fff; }
.scenario-card.card-flight .fl-scan .sk-ico { width: 12px; height: 12px; }
.scenario-card.card-flight .fl-stub { width: 80px; flex-shrink: 0; margin: 8px 8px 8px 0; border-radius: 10px; display: flex; align-items: center; justify-content: center; position: relative; overflow: hidden; }
.scenario-card.card-flight .fl-stub .sk-hero-img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.scenario-card.card-flight .fl-stub-code { position: relative; z-index: 2; font-size: 10px; color: #fff; writing-mode: vertical-rl; letter-spacing: .2em; text-shadow: 0 1px 3px rgba(0,0,0,.7); background: rgba(0,0,0,.35); padding: 6px 3px; border-radius: 6px; }

/* ============================================================
   05. 火车卡 card-train（高铁票，对齐设计稿06：题图 + 正文 + 磁条全幅）
   ============================================================ */
.scenario-card.card-train { padding: 0; overflow: hidden; border-radius: 12px; }
.scenario-card.card-train .tr-hero { width: 100%; height: 100px; }
.scenario-card.card-train .tr-body { padding: 16px; }
.scenario-card.card-train .tr-head { display: flex; align-items: center; justify-content: space-between; margin-bottom: 20px; }
.scenario-card.card-train .tr-no { font-size: 24px; font-weight: 500; letter-spacing: .04em; color: var(--sc-ink); }
.scenario-card.card-train .tr-class { font-size: 9px; font-weight: 700; letter-spacing: .15em; color: var(--sc-ink-2); border: 1px solid var(--sc-ink-2); padding: 2px 8px; border-radius: 4px; }
.scenario-card.card-train .tr-route { display: flex; align-items: center; justify-content: space-between; margin-bottom: 20px; }
.scenario-card.card-train .tr-station { flex-shrink: 0; }
.scenario-card.card-train .tr-station.tr-right { text-align: right; }
.scenario-card.card-train .tr-name { font-size: 18px; font-weight: 500; color: var(--sc-ink); }
.scenario-card.card-train .tr-time { font-size: 10px; color: var(--sc-muted); margin-top: 4px; }
.scenario-card.card-train .tr-mid { flex: 1; display: flex; flex-direction: column; align-items: center; gap: 4px; padding: 0 12px; }
.scenario-card.card-train .tr-date { font-size: 8px; letter-spacing: .15em; color: var(--sc-muted-2); }
.scenario-card.card-train .tr-arrow { width: 16px; height: 16px; color: var(--sc-panel-border); }
.scenario-card.card-train .tr-foot { display: flex; align-items: center; justify-content: space-between; padding-top: 16px; }
.scenario-card.card-train .tr-foot-info { display: flex; flex-direction: column; gap: 4px; }
.scenario-card.card-train .tr-fi { font-size: 11px; color: var(--sc-ink-2); }
.scenario-card.card-train .tr-fi b { font-size: 14px; font-weight: 700; }
.scenario-card.card-train .tr-fi.tr-fi-sub { color: var(--sc-muted); }
.scenario-card.card-train .tr-fi.tr-fi-sub b { font-size: 12px; }
.scenario-card.card-train .tr-qr { width: 36px; height: 36px; border-radius: 50%; display: flex; align-items: center; justify-content: center; padding: 0; }
.scenario-card.card-train .tr-qr.btn-ghost-ok { background: transparent; border: 1.5px solid var(--sc-ink); color: var(--sc-ink); box-shadow: none !important; }
.scenario-card.card-train .tr-qr .sk-ico { width: 16px; height: 16px; }
.scenario-card.card-train .tr-stripe {
  width: 100%; height: 32px; display: flex; align-items: center; padding: 0 16px;
  font-size: 8px; letter-spacing: .3em; color: rgba(255,255,255,.5);
  background: repeating-linear-gradient(45deg,#33312E,#33312E 4px,#3a3835 4px,#3a3835 8px);
}

/* 顶部虚线（与 sk-dashed 底部虚线对应） */
.scenario-card .sk-dashed-t { border-top: 1.5px dashed var(--sc-dash); }

/* ============================================================
   06. 票务卡 card-event（横向门票：图 + 主体 + 副券）
   ============================================================ */
.scenario-card.card-event.ev-ticket { display: flex; padding: 0; border-radius: 24px; overflow: hidden; min-height: 150px; }
.scenario-card.card-event .ev-poster { width: 100px; flex-shrink: 0; }
.scenario-card.card-event .ev-poster img { width: 100%; height: 100%; object-fit: cover; }
.scenario-card.card-event .ev-poster.ev-poster-fallback { display: flex; align-items: center; justify-content: center; background: linear-gradient(135deg,#D4CFC9,#A8A39D); }
.scenario-card.card-event .ev-poster-ico { font-size: 32px; }
.scenario-card.card-event .ev-main { flex: 1; padding: 16px; border-right: 1.5px dashed var(--sc-dash); display: flex; flex-direction: column; justify-content: space-between; }
.scenario-card.card-event .ev-type { display: flex; align-items: center; gap: 4px; font-size: 8px; color: var(--sc-muted); text-transform: uppercase; letter-spacing: .12em; margin-bottom: 4px; }
.scenario-card.card-event .ev-title { font-size: 18px; line-height: 1.2; color: var(--sc-ink); }
.scenario-card.card-event .ev-subtitle { font-size: 10px; color: var(--sc-muted-2); font-style: italic; margin-top: 2px; }
.scenario-card.card-event .ev-venue { font-size: 9px; color: var(--sc-muted); line-height: 1.5; margin-top: 6px; }
.scenario-card.card-event .ev-foot { display: flex; gap: 12px; margin-top: 12px; }
.scenario-card.card-event .ev-foot-col.ev-right { margin-left: auto; text-align: right; }
.scenario-card.card-event .ev-k { font-size: 7px; color: var(--sc-muted-2); text-transform: uppercase; letter-spacing: .1em; margin-bottom: 2px; }
.scenario-card.card-event .ev-v { font-size: 11px; color: var(--sc-ink-2); font-weight: 500; }
.scenario-card.card-event .ev-v.ev-price { font-family: var(--sc-serif); font-size: 14px; }
.scenario-card.card-event .ev-stub { width: 60px; flex-shrink: 0; display: flex; flex-direction: column; align-items: center; justify-content: space-between; padding: 16px 0; }
.scenario-card.card-event .ev-stub-label { font-size: 8px; color: var(--sc-muted); text-transform: uppercase; letter-spacing: .3em; writing-mode: vertical-rl; }
.scenario-card.card-event .ev-stub-bar { width: 12px; height: 36px; opacity: .5; }
.scenario-card.card-event .ev-stub-no { font-size: 10px; font-weight: 700; color: var(--sc-ink); }
.scenario-card.card-event .ev-type svg { width: 10px; height: 10px; }

/* ============================================================
   07. 酒店卡 card-hotel
   ============================================================ */
.scenario-card.card-hotel .ht-hero { width: 100%; height: 140px; border-radius: 16px; margin-bottom: 16px; overflow: hidden; position: relative; }
.scenario-card.card-hotel .ht-hero-emoji {
  width: 100%; height: 100%; display: flex; align-items: center; justify-content: center; font-size: 52px;
  background: linear-gradient(135deg,#F5F4F0,#D4CFC9);
}
body.dark-mode .scenario-card.card-hotel .ht-hero-emoji,
body.night .scenario-card.card-hotel .ht-hero-emoji { background: linear-gradient(135deg,#2a2724,#111); }
.scenario-card.card-hotel .ht-stars { position: absolute; top: 12px; right: 12px; font-size: 11px; color: #fff; letter-spacing: 1px; text-shadow: 0 1px 2px rgba(0,0,0,.4); }
.scenario-card.card-hotel .ht-title-wrap { text-align: center; margin-bottom: 16px; }
.scenario-card.card-hotel .ht-name { font-size: 22px; color: var(--sc-ink); line-height: 1.2; }
.scenario-card.card-hotel .ht-addr { font-size: 9px; color: var(--sc-muted-2); letter-spacing: .2em; text-transform: uppercase; margin-top: 4px; }
.scenario-card.card-hotel .ht-roomtype { font-size: 10px; color: var(--sc-muted); font-weight: 300; margin-top: 4px; }
.scenario-card.card-hotel .ht-dates { display: flex; border-radius: 12px; margin-bottom: 16px; overflow: hidden; }
.scenario-card.card-hotel .ht-date-block { flex: 1; padding: 10px; text-align: center; }
.scenario-card.card-hotel .ht-date-block:first-child { border-right: 1px solid var(--sc-panel-border); }
.scenario-card.card-hotel .ht-date-label { font-size: 7px; color: var(--sc-muted-2); text-transform: uppercase; letter-spacing: .1em; margin-bottom: 4px; }
.scenario-card.card-hotel .ht-date-day { font-size: 13px; font-weight: 700; color: var(--sc-ink); }
.scenario-card.card-hotel .ht-foot { display: flex; align-items: center; justify-content: space-between; }
.scenario-card.card-hotel .ht-status { display: flex; align-items: center; gap: 6px; font-size: 10px; color: var(--sc-ink-2); font-weight: 500; }
.scenario-card.card-hotel .ht-keybtn { font-size: 9px; padding: 6px 14px; border-radius: 6px; font-weight: 500; display: inline-flex; align-items: center; gap: 6px; }
.scenario-card.card-hotel .ht-keybtn.btn-gold { background: #C2A878; color: #fff; }
.scenario-card.card-hotel .ht-keybtn .sk-ico { width: 12px; height: 12px; }

/* ============================================================
   08. 餐厅卡 card-restaurant
   ============================================================ */
.scenario-card.card-restaurant .rst-hero { width: 100%; height: 120px; border-radius: 12px; margin-bottom: 16px; overflow: hidden; }
.scenario-card.card-restaurant .rst-hero-emoji {
  width: 100%; height: 100%; display: flex; align-items: center; justify-content: center; font-size: 44px;
  background: linear-gradient(135deg,#F5F4F0,#D4CFC9);
}
body.dark-mode .scenario-card.card-restaurant .rst-hero-emoji,
body.night .scenario-card.card-restaurant .rst-hero-emoji { background: linear-gradient(135deg,#2a2724,#111); }
.scenario-card.card-restaurant .rst-title-wrap { text-align: center; margin-bottom: 20px; }
.scenario-card.card-restaurant .rst-name { font-size: 20px; color: var(--sc-ink); letter-spacing: .02em; }
.scenario-card.card-restaurant .rst-label { font-size: 8px; color: var(--sc-muted-2); text-transform: uppercase; letter-spacing: .2em; margin-top: 4px; }
.scenario-card.card-restaurant .rst-rows { margin-bottom: 16px; }
.scenario-card.card-restaurant .rst-row { display: flex; justify-content: space-between; align-items: flex-end; padding-bottom: 6px; margin-bottom: 12px; }
.scenario-card.card-restaurant .rst-row:last-child { margin-bottom: 0; }
.scenario-card.card-restaurant .rst-k { font-size: 9px; color: var(--sc-muted); text-transform: uppercase; letter-spacing: .1em; }
.scenario-card.card-restaurant .rst-v { font-size: 12px; color: var(--sc-ink-2); font-weight: 500; }
.scenario-card.card-restaurant .rst-note {
  background: rgba(242,239,234,.5); padding: 10px; border-radius: 6px; margin-bottom: 16px;
  font-size: 9px; color: var(--sc-muted); font-style: italic; text-align: center;
}
body.dark-mode .scenario-card.card-restaurant .rst-note,
body.night .scenario-card.card-restaurant .rst-note { background: rgba(51,49,46,.5); }
.scenario-card.card-restaurant .rst-modify {
  display: flex; align-items: center; justify-content: center; gap: 6px; width: 100%;
  font-size: 10px; padding: 8px; border-radius: 6px; font-weight: 500; letter-spacing: .1em; text-transform: uppercase;
}
.scenario-card.card-restaurant .rst-modify.btn-dark { background: #2C3E50; color: #fff; border-color: transparent; }
.scenario-card.card-restaurant .rst-modify .sk-ico { width: 14px; height: 14px; }

/* ============================================================
   09. 社交动态卡 card-social-post（拍立得底片，禁毛玻璃）
   ============================================================ */
.scenario-card.card-social-post.sp-polaroid {
  width: 280px; background: #fff; padding: 12px 12px 24px; border-radius: 4px;
  box-shadow: 0 10px 30px -10px rgba(0,0,0,.25); transform: rotate(1deg);
}
body.dark-mode .scenario-card.card-social-post.sp-polaroid,
body.night .scenario-card.card-social-post.sp-polaroid { background: #EAE7E0; }
.scenario-card.card-social-post .sp-photo { width: 100%; aspect-ratio: 1/1; margin-bottom: 16px; overflow: hidden; }
.scenario-card.card-social-post .sp-photo-emoji {
  width: 100%; height: 100%; display: flex; align-items: center; justify-content: center; font-size: 60px; color: #fff;
  background: linear-gradient(135deg,#F5F4F0,#D4CFC9,#A8A39D);
}
.scenario-card.card-social-post .sp-caption { font-size: 22px; color: #2A2A2A; line-height: 1.2; padding: 0 4px; margin-bottom: 12px; }
.scenario-card.card-social-post .sp-note { font-size: 10px; color: #8C857B; padding: 0 4px; margin-bottom: 12px; }
.scenario-card.card-social-post .sp-foot {
  display: flex; align-items: center; justify-content: space-between;
  border-top: 1px dashed #EAE7E0; padding: 12px 4px 0;
}
.scenario-card.card-social-post .sp-account { font-family: var(--sc-mono); font-size: 11px; font-weight: 500; color: #A8A39D; letter-spacing: .02em; }
.scenario-card.card-social-post .sp-v-badge { display: inline-flex; align-items: center; justify-content: center; width: 12px; height: 12px; border-radius: 50%; background: #4A90D9; color: #fff; font-size: 8px; font-style: normal; }
.scenario-card.card-social-post .sp-like { width: 32px; height: 32px; border-radius: 50%; border: 1px solid #EAE7E0; background: #FCFBF9; color: #D9534F; display: flex; align-items: center; justify-content: center; }
.scenario-card.card-social-post .sp-like.liked { background: #D9534F; color: #fff; border-color: transparent; }
.scenario-card.card-social-post .sp-like .sk-ico { width: 16px; height: 16px; }
.scenario-card.card-social-post .sp-status { display: flex; align-items: center; gap: 6px; font-size: 9px; color: #8C857B; padding: 8px 4px 0; }
.scenario-card.card-social-post .sp-status-dot { width: 6px; height: 6px; border-radius: 50%; background: #D9534F; }

/* ============================================================
   10. 天气卡 card-weather
   ============================================================ */
.scenario-card.card-weather { border-radius: 24px; }
.scenario-card.card-weather .wt-top { display: flex; justify-content: space-between; align-items: flex-start; margin-bottom: 16px; padding: 0 4px; }
.scenario-card.card-weather .wt-temp-num { font-size: 42px; line-height: 1; letter-spacing: -.03em; color: var(--sc-ink); }
.scenario-card.card-weather .wt-deg { font-size: 20px; vertical-align: top; color: var(--sc-muted-2); margin-left: 2px; }
.scenario-card.card-weather .wt-location { display: flex; align-items: center; gap: 6px; font-size: 11px; color: var(--sc-muted); font-weight: 500; margin-top: 8px; }
.scenario-card.card-weather .wt-icon {
  width: 48px; height: 48px; border-radius: 50%; display: flex; align-items: center; justify-content: center; font-size: 24px;
}
.scenario-card.card-weather .wt-range { display: flex; justify-content: space-between; padding: 14px; border-radius: 16px; margin-bottom: 16px; }
.scenario-card.card-weather .wt-range-item { display: flex; flex-direction: column; align-items: center; gap: 4px; }
.scenario-card.card-weather .wt-k { font-size: 9px; color: var(--sc-muted-2); }
.scenario-card.card-weather .wt-v { font-size: 13px; font-weight: 700; color: var(--sc-ink); }
.scenario-card.card-weather .wt-forecast { padding: 0 4px; }
.scenario-card.card-weather .wt-forecast-title { text-align: center; font-size: 9px; color: var(--sc-muted-2); letter-spacing: .1em; margin-bottom: 10px; }
.scenario-card.card-weather .wt-forecast-row { display: flex; align-items: center; justify-content: space-between; font-size: 11px; color: var(--sc-ink-2); margin-bottom: 10px; }
.scenario-card.card-weather .wt-forecast-day { width: 40px; color: var(--sc-muted); }
.scenario-card.card-weather .wt-forecast-temp { font-family: var(--sc-mono); }
.scenario-card.card-weather .wt-remind { margin-top: 8px; padding-top: 10px; font-size: 11px; color: var(--sc-muted); text-align: center; }
.scenario-card.card-weather .wt-music {
  margin-top: 14px; padding: 10px; border-radius: 16px;
  background: var(--sc-bg); border: 1px solid var(--sc-panel-border);
  display: flex; align-items: center; gap: 14px;
  box-shadow: 0 2px 8px rgba(0,0,0,.04), inset 0 1px 0 rgba(255,255,255,1);
}
body.dark-mode .scenario-card.card-weather .wt-music,
body.night .scenario-card.card-weather .wt-music { box-shadow: none; }
.scenario-card.card-weather .wt-cd-slot {
  width: 42px; height: 42px; border-radius: 9999px; flex-shrink: 0;
  display: flex; align-items: center; justify-content: center;
}
.scenario-card.card-weather .wt-cd {
  width: 36px; height: 36px; border-radius: 9999px; position: relative;
  display: flex; align-items: center; justify-content: center;
  background: conic-gradient(from 0deg, #8C857B, #D4CFC9, #8C857B, #D4CFC9, #8C857B);
  box-shadow: inset 0 0 4px rgba(0,0,0,.3);
}
.scenario-card.card-weather .wt-cd.spinning { animation: wt-cd-spin 3s linear infinite; }
@keyframes wt-cd-spin { to { transform: rotate(360deg); } }
.scenario-card.card-weather .wt-cd-hole {
  width: 10px; height: 10px; border-radius: 9999px; background: var(--sc-bg);
  border: 1px solid var(--sc-dash); box-shadow: inset 0 0 2px rgba(0,0,0,.3);
}
.scenario-card.card-weather .wt-music-info { flex: 1; min-width: 0; }
.scenario-card.card-weather .wt-music-title {
  font-size: 11px; color: var(--sc-ink); font-weight: 700;
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
  margin-bottom: 6px; padding-bottom: 5px; border-bottom: 1.5px dashed var(--sc-dash);
}
.scenario-card.card-weather .wt-music-bar { width: 100%; height: 4px; border-radius: 9999px; background: var(--sc-dash); box-shadow: inset 0 1px 2px rgba(0,0,0,.15); }
.scenario-card.card-weather .wt-music-prog { width: 33%; height: 100%; border-radius: 9999px; background: var(--sc-muted); }
.scenario-card.card-weather .wt-cd-play {
  width: 32px; height: 32px; border-radius: 9999px; flex-shrink: 0;
  background: var(--sc-bg); border: 1px solid var(--sc-dash); color: var(--sc-ink);
  display: flex; align-items: center; justify-content: center;
}
.scenario-card.card-weather .wt-cd-play svg { width: 14px; height: 14px; }
.scenario-card.card-weather .wt-cd-play.playing { background: #10B981; border-color: transparent; color: #fff; }

/* ============================================================
   11. 日历卡 card-calendar
   ============================================================ */
.scenario-card.card-calendar .cal-hero { width: 100%; height: 120px; border-radius: 20px; margin-bottom: 20px; overflow: hidden; position: relative; }
.scenario-card.card-calendar .cal-hero-emoji {
  width: 100%; height: 100%; display: flex; align-items: center; justify-content: center; font-size: 48px;
  background: linear-gradient(135deg,#F5F4F0,#D4CFC9);
}
body.dark-mode .scenario-card.card-calendar .cal-hero-emoji,
body.night .scenario-card.card-calendar .cal-hero-emoji { background: linear-gradient(135deg,#2a2724,#111); }
.scenario-card.card-calendar .cal-hero-tag {
  position: absolute; top: 12px; left: 12px; display: flex; align-items: center; gap: 6px;
  background: rgba(255,255,255,.9); color: var(--sc-ink); font-size: 9px; font-weight: 700;
  letter-spacing: .15em; text-transform: uppercase; padding: 6px 10px; border-radius: 6px;
}
.scenario-card.card-calendar .cal-hero-tag .sk-ico { width: 12px; height: 12px; }
.scenario-card.card-calendar .cal-datehead { display: flex; align-items: baseline; gap: 8px; padding: 0 8px; margin-bottom: 16px; color: var(--sc-ink); }
.scenario-card.card-calendar .cal-md { font-size: 26px; }
.scenario-card.card-calendar .cal-dd { font-size: 30px; }
.scenario-card.card-calendar .cal-wk { font-size: 11px; color: var(--sc-muted); font-weight: 500; }
.scenario-card.card-calendar .cal-event { display: flex; gap: 12px; padding: 16px; border-radius: 16px; margin-bottom: 16px; }
.scenario-card.card-calendar .cal-event-bar { width: 3px; border-radius: 9999px; background: var(--sc-ink); flex-shrink: 0; }
.scenario-card.card-calendar .cal-event-body { flex: 1; }
.scenario-card.card-calendar .cal-event-top { display: flex; justify-content: space-between; align-items: flex-start; margin-bottom: 6px; }
.scenario-card.card-calendar .cal-event-title { font-size: 13px; font-weight: 700; color: var(--sc-ink-2); }
.scenario-card.card-calendar .cal-event-time { font-size: 11px; color: var(--sc-muted); font-weight: 500; }
.scenario-card.card-calendar .cal-event-loc { display: flex; align-items: center; gap: 4px; font-size: 10px; color: var(--sc-muted-2); margin-bottom: 4px; }
.scenario-card.card-calendar .cal-event-loc .sk-ico { width: 10px; height: 10px; color: #D9534F; }
.scenario-card.card-calendar .cal-event-note { font-size: 10px; color: var(--sc-muted); }
.scenario-card.card-calendar .cal-foot {
  display: flex; align-items: center; justify-content: space-between;
  background: var(--sc-bg); border: 1px solid var(--sc-panel-border); border-radius: 9999px; padding: 6px 6px 6px 16px;
}
.scenario-card.card-calendar .cal-remind { display: flex; align-items: center; gap: 6px; font-size: 10px; color: var(--sc-muted-2); font-weight: 500; }
.scenario-card.card-calendar .cal-remind .sk-ico { width: 14px; height: 14px; }
.scenario-card.card-calendar .cal-editbtn { font-size: 10px; padding: 8px 20px; border-radius: 9999px; font-weight: 500; letter-spacing: .1em; }
.scenario-card.card-calendar .cal-editbtn.btn-gold { background: #8C6B4A; color: #fff; }

/* 通用：底部虚线 */
.scenario-card .sk-dashed-b { border-bottom: 1.5px dashed var(--sc-dash); }

/* 红色歪斜印章（档案 TOP SECRET / 通用印记） */
.scenario-card .stamp-red {
  color: #B53A38; border: 2px solid #B53A38; border-radius: 4px;
  font-weight: 700; letter-spacing: .1em; padding: 2px 6px; opacity: .55;
}
body.dark-mode .scenario-card .stamp-red,
body.night .scenario-card .stamp-red { color: #C26A68; border-color: #C26A68; }

/* ============================================================
   15. 凭证卡 card-certificate（所有权证书）
   ============================================================ */
.scenario-card.card-certificate { text-align: center; }
.scenario-card.card-certificate .cert-head { margin-bottom: 4px; }
.scenario-card.card-certificate .cert-title-en { font-size: 9px; color: var(--sc-muted-2); text-transform: uppercase; letter-spacing: .2em; margin-bottom: 4px; }
.scenario-card.card-certificate .cert-title-cn { font-size: 22px; color: var(--sc-ink); letter-spacing: .15em; }
.scenario-card.card-certificate .cert-medal {
  width: 100px; height: 100px; border-radius: 50%; margin: 0 auto -32px; position: relative; z-index: 2;
  display: flex; align-items: center; justify-content: center;
  border: 4px solid var(--sc-bg);
}
.scenario-card.card-certificate .cert-medal-emoji { font-size: 40px; }
.scenario-card.card-certificate .cert-item-box { padding: 44px 16px 16px; border-radius: 16px; margin-bottom: 24px; position: relative; z-index: 1; }
.scenario-card.card-certificate .cert-item-name { font-size: 13px; font-weight: 700; color: var(--sc-ink); margin-bottom: 8px; }
.scenario-card.card-certificate .cert-item-desc { font-size: 10px; color: var(--sc-muted); line-height: 1.8; margin-bottom: 16px; }
.scenario-card.card-certificate .cert-verify { display: inline-flex; align-items: center; gap: 4px; font-size: 9px; padding: 6px 16px; border-radius: 9999px; font-weight: 500; letter-spacing: .1em; text-transform: uppercase; }
.scenario-card.card-certificate .cert-verify.btn-ok { background: #10B981; color: #fff; border-color: transparent; }
.scenario-card.card-certificate .cert-verify .sk-ico { width: 14px; height: 14px; }
.scenario-card.card-certificate .cert-details { padding: 0 8px; margin-bottom: 24px; }
.scenario-card.card-certificate .cert-row { display: flex; justify-content: space-between; align-items: flex-end; padding-bottom: 6px; margin-bottom: 10px; }
.scenario-card.card-certificate .cert-k { font-size: 9px; color: var(--sc-muted-2); text-transform: uppercase; letter-spacing: .05em; }
.scenario-card.card-certificate .cert-v { font-size: 11px; font-weight: 700; color: var(--sc-ink); }
.scenario-card.card-certificate .cert-foot { display: flex; justify-content: space-between; align-items: center; padding: 0 8px; }
.scenario-card.card-certificate .cert-seal {
  width: 40px; height: 40px; border-radius: 50%; background: var(--sc-window);
  border: 1px solid var(--sc-panel-border); display: flex; align-items: center; justify-content: center;
}
.scenario-card.card-certificate .cert-seal.stamped { background: #B53A38; border-color: transparent; }
.scenario-card.card-certificate .cert-seal.stamped .cert-seal-text { color: #fff; }
.scenario-card.card-certificate .cert-seal-text { font-size: 18px; color: var(--sc-ink-2); }
.scenario-card.card-certificate .cert-sign { text-align: right; }
.scenario-card.card-certificate .cert-sign-label { font-size: 7px; color: var(--sc-muted-2); text-transform: uppercase; letter-spacing: .15em; margin-bottom: 2px; }
.scenario-card.card-certificate .cert-sign-name { font-size: 20px; color: #2A2A2A; line-height: 1; }
body.dark-mode .scenario-card.card-certificate .cert-sign-name,
body.night .scenario-card.card-certificate .cert-sign-name { color: #F3F2F0; }

/* ============================================================
   16. 契约卡 card-contract（婚前协议）
   ============================================================ */
.scenario-card.card-contract { text-align: center; }
.scenario-card.card-contract .ct-hero { width: 100%; height: 70px; border-radius: 16px; margin-bottom: 20px; overflow: hidden; position: relative; }
.scenario-card.card-contract .ct-hero-tag {
  position: absolute; top: 8px; left: 8px; display: flex; align-items: center; gap: 4px;
  background: rgba(255,255,255,.8); color: var(--sc-ink-2); font-size: 7px; font-weight: 700;
  letter-spacing: .15em; text-transform: uppercase; padding: 2px 6px; border-radius: 4px;
}
.scenario-card.card-contract .ct-hero-tag .sk-ico { width: 10px; height: 10px; }
.scenario-card.card-contract .ct-head { margin-bottom: 20px; }
.scenario-card.card-contract .ct-title-en { font-size: 9px; color: var(--sc-muted-2); text-transform: uppercase; letter-spacing: .2em; margin-bottom: 4px; }
.scenario-card.card-contract .ct-title-cn { font-size: 24px; color: var(--sc-ink); letter-spacing: .2em; }
.scenario-card.card-contract .ct-body { padding: 16px; border-radius: 16px; margin-bottom: 16px; position: relative; text-align: left; }
.scenario-card.card-contract .ct-bar { position: absolute; left: 0; top: 16px; bottom: 16px; width: 2px; background: var(--sc-panel-border); border-radius: 0 4px 4px 0; }
.scenario-card.card-contract .ct-clauses { padding: 0 4px 16px 4px; margin-bottom: 12px; }
.scenario-card.card-contract .ct-clause { font-size: 11px; color: var(--sc-ink-2); line-height: 1.8; text-align: justify; margin-bottom: 12px; }
.scenario-card.card-contract .ct-clause:last-child { margin-bottom: 0; }
.scenario-card.card-contract .ct-num { font-weight: 700; font-style: italic; margin-right: 4px; color: var(--sc-muted-2); }
.scenario-card.card-contract .ct-highlight { color: #B53A38; font-weight: 700; }
.scenario-card.card-contract .ct-verify-wrap { display: flex; justify-content: center; }
.scenario-card.card-contract .ct-verify { display: inline-flex; align-items: center; gap: 6px; font-size: 9px; padding: 6px 16px; border-radius: 9999px; font-weight: 700; letter-spacing: .05em; }
.scenario-card.card-contract .ct-verify.btn-danger { background: #8A3A3A; color: #fff; }
.scenario-card.card-contract .ct-verify .sk-ico { width: 12px; height: 12px; }
.scenario-card.card-contract .ct-foot { display: flex; justify-content: space-between; align-items: flex-end; padding: 0 8px; }
.scenario-card.card-contract .ct-party { text-align: left; }
.scenario-card.card-contract .ct-party.ct-right { text-align: right; }
.scenario-card.card-contract .ct-party-label { font-size: 8px; color: var(--sc-muted-2); text-transform: uppercase; letter-spacing: .15em; margin-bottom: 4px; }
.scenario-card.card-contract .ct-sign { font-size: 22px; color: #2A2A2A; line-height: 1; }
body.dark-mode .scenario-card.card-contract .ct-sign,
body.night .scenario-card.card-contract .ct-sign { color: #F3F2F0; }

/* ============================================================
   17. 档案卡 card-dossier（绝密档案）
   ============================================================ */
.scenario-card.card-dossier .ds-top { display: flex; justify-content: space-between; align-items: flex-start; margin-bottom: 20px; padding: 0 4px; }
.scenario-card.card-dossier .ds-title { font-size: 28px; color: var(--sc-ink); letter-spacing: .15em; line-height: 1; margin-bottom: 8px; }
.scenario-card.card-dossier .ds-id { font-size: 9px; color: var(--sc-muted); letter-spacing: .15em; text-transform: uppercase; }
.scenario-card.card-dossier .ds-classified {
  display: inline-flex; align-items: center; gap: 4px; margin-top: 12px;
  background: var(--sc-window); color: var(--sc-ink-2); font-size: 8px; font-weight: 700;
  letter-spacing: .15em; text-transform: uppercase; padding: 2px 8px; border-radius: 4px;
}
.scenario-card.card-dossier .ds-classified .sk-ico { width: 10px; height: 10px; }
.scenario-card.card-dossier .ds-photo { width: 80px; height: 80px; flex-shrink: 0; border-radius: 12px; display: flex; align-items: center; justify-content: center; }
.scenario-card.card-dossier .ds-photo-emoji { font-size: 32px; }
.scenario-card.card-dossier .ds-body { padding: 16px; border-radius: 16px; position: relative; overflow: hidden; }
.scenario-card.card-dossier .ds-stamp { position: absolute; top: 12px; right: 12px; font-size: 10px; transform: rotate(15deg); z-index: 0; }
.scenario-card.card-dossier .ds-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 12px 8px; margin-bottom: 16px; padding-bottom: 16px; position: relative; z-index: 1; }
.scenario-card.card-dossier .ds-row { display: flex; flex-direction: column; }
.scenario-card.card-dossier .ds-row:has(.ds-v-red) { grid-column: span 2; }
.scenario-card.card-dossier .ds-k { font-size: 8px; color: var(--sc-muted-2); text-transform: uppercase; letter-spacing: .05em; margin-bottom: 2px; }
.scenario-card.card-dossier .ds-v { font-size: 12px; font-weight: 700; color: var(--sc-ink); }
.scenario-card.card-dossier .ds-v-red { color: #B53A38; }
.scenario-card.card-dossier .ds-content { font-size: 11px; color: var(--sc-ink-2); line-height: 1.8; text-align: justify; margin-bottom: 16px; padding-bottom: 16px; position: relative; z-index: 1; }
.scenario-card.card-dossier .ds-redact { background: var(--sc-panel-border); color: transparent; padding: 0 8px; margin: 0 2px; border-radius: 2px; user-select: none; }
.scenario-card.card-dossier .ds-open-wrap { display: flex; justify-content: flex-end; position: relative; z-index: 1; }
.scenario-card.card-dossier .ds-open {
  display: inline-flex; align-items: center; gap: 6px; font-family: var(--sc-mono);
  background: #2A2A2A; color: #F9F8F5; font-size: 9px; font-weight: 700; letter-spacing: .15em;
  text-transform: uppercase; padding: 8px 16px; border-radius: 4px;
}
.scenario-card.card-dossier .ds-open.granted { background: #8A3A3A; color: #fff; }
.scenario-card.card-dossier .ds-open .sk-ico { width: 12px; height: 12px; }

/* ============================================================
   18. 黑卡 card-blackcard（钛金卡，整卡可点感应支付）
   ============================================================ */
.scenario-card.card-blackcard.bc-titanium {
  width: 305px; height: 192px; border-radius: 12px; padding: 20px; box-sizing: border-box;
  display: flex; flex-direction: column; justify-content: space-between; position: relative; overflow: hidden;
  background:
    linear-gradient(135deg, rgba(255,255,255,.06) 0%, transparent 40%),
    linear-gradient(160deg, #2b2b2e 0%, #1a1a1c 45%, #232325 100%);
  box-shadow: 0 18px 40px -12px rgba(0,0,0,.7), inset 0 1px 1px rgba(255,255,255,.12);
  color: #fff;
}
.scenario-card.card-blackcard .bc-top { display: flex; justify-content: space-between; align-items: flex-start; }
.scenario-card.card-blackcard .bc-logo { font-size: 18px; color: rgba(255,255,255,.92); letter-spacing: .25em; text-transform: uppercase; }
.scenario-card.card-blackcard .bc-chip {
  width: 42px; height: 32px; border-radius: 6px; margin-top: 14px;
  background: linear-gradient(135deg, #d9c38a, #b8995a 50%, #d9c38a);
  box-shadow: inset 0 0 0 1px rgba(0,0,0,.2);
}
.scenario-card.card-blackcard .bc-chip::after {
  content: ""; display: block; width: 100%; height: 100%;
  background-image: linear-gradient(90deg, rgba(0,0,0,.25) 1px, transparent 1px), linear-gradient(rgba(0,0,0,.25) 1px, transparent 1px);
  background-size: 10px 8px;
}
.scenario-card.card-blackcard .bc-wifi-ico { width: 22px; height: 22px; color: rgba(255,255,255,.5); transform: rotate(90deg); }
.scenario-card.card-blackcard .bc-number {
  font-size: 21px; letter-spacing: .08em; color: #cfcfcf; display: flex; justify-content: space-between;
  text-shadow: 0 1px 1px rgba(0,0,0,.6), 0 -1px 0 rgba(255,255,255,.15);
}
.scenario-card.card-blackcard .bc-foot { display: flex; justify-content: space-between; align-items: flex-end; }
.scenario-card.card-blackcard .bc-foot-col.bc-right { text-align: right; }
.scenario-card.card-blackcard .bc-foot-label { font-size: 7px; color: rgba(255,255,255,.5); letter-spacing: .2em; text-transform: uppercase; margin-bottom: 4px; }
.scenario-card.card-blackcard .bc-foot-val { font-size: 13px; color: #cfcfcf; letter-spacing: .1em; text-transform: uppercase; }
.scenario-card.card-blackcard .bc-paid-badge {
  position: absolute; top: 50%; left: 50%; transform: translate(-50%,-50%) scale(.6);
  background: rgba(16,185,129,.95); color: #fff; font-size: 16px; font-weight: 700;
  padding: 8px 18px; border-radius: 9999px; opacity: 0; transition: all .35s; pointer-events: none;
}
.scenario-card.card-blackcard.bc-paid .bc-paid-badge { opacity: 1; transform: translate(-50%,-50%) scale(1); }

/* ============================================================
   19. 通用卡 generic-card（信息概览）
   ============================================================ */
.scenario-card.generic-card .gc-head { display: flex; align-items: center; gap: 16px; margin-bottom: 16px; padding: 0 4px; }
.scenario-card.generic-card .gc-thumb { width: 70px; height: 90px; border-radius: 12px; flex-shrink: 0; display: flex; align-items: center; justify-content: center; }
.scenario-card.generic-card .gc-thumb-emoji { font-size: 32px; }
.scenario-card.generic-card .gc-tag {
  display: inline-flex; align-items: center; gap: 4px; background: var(--sc-panel);
  border: 1px solid var(--sc-panel-border); color: var(--sc-ink-2); font-size: 8px; font-weight: 700;
  letter-spacing: .15em; text-transform: uppercase; padding: 2px 8px; border-radius: 4px; margin-bottom: 8px;
}
.scenario-card.generic-card .gc-tag .sk-ico { width: 10px; height: 10px; }
.scenario-card.generic-card .gc-title { font-size: 22px; color: var(--sc-ink); letter-spacing: .05em; line-height: 1.2; }
.scenario-card.generic-card .gc-body { padding: 16px; border-radius: 16px; }
.scenario-card.generic-card .sc-details { list-style: none; margin: 0; padding: 0; }
.scenario-card.generic-card .sc-details li { position: relative; padding-left: 14px; font-size: 12px; color: var(--sc-ink-2); line-height: 1.7; margin-bottom: 8px; }
.scenario-card.generic-card .sc-details li::before { content: ""; position: absolute; left: 0; top: 9px; width: 5px; height: 5px; border-radius: 50%; background: var(--sc-muted-2); }
.scenario-card.generic-card .gc-foot { display: flex; justify-content: flex-end; margin-top: 8px; }
.scenario-card.generic-card .gc-view { display: inline-flex; align-items: center; gap: 4px; font-size: 9px; padding: 6px 14px; border-radius: 6px; font-weight: 500; }
.scenario-card.generic-card .gc-view.btn-faded { opacity: .5; }
.scenario-card.generic-card .gc-view .sk-ico { width: 12px; height: 12px; }

/* 中和旧卡片样式：新皮肤卡 .sk-card 不要旧的根 ::before 装饰条（纸张肌理走 .sk-paper::after）
   旧规则在 apps-styles.css，本文件后加载，故可覆盖 */
.scenario-card.sk-card::before { content: none !important; display: none !important; }

/* PLACEHOLDER_CARD_END */