/* 拾光票根 — 票根模板通用样式（模板卡片预览 + 成品票根） */

/* ========== 票根根容器 ========== */
.ftk {
  position: relative;
  border-radius: 12px;
  overflow: hidden;
  background: #fff;
  box-shadow: var(--sg-shadow-md);
  font-family: var(--sg-font-mono);
}
.ftk * { box-sizing: border-box; }

/* 照片区 */
.ftk-pw { position: relative; overflow: hidden; background: #E2E8F0; }
.ftk-img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; display: block; }
.ftk-ph {
  position: absolute; inset: 0;
  background: var(--fg-grad, linear-gradient(110deg, #94A3B8, #64748B));
  display: flex; align-items: center; justify-content: center;
}
.ftk-ph span {
  color: rgba(255, 255, 255, 0.85);
  font-size: 12px; letter-spacing: 2px; font-weight: 600;
}

/* 条形码占位 */
.ftk .ft-bar { height: 26px; display: flex; }
.ftk .ft-bar svg { width: 100%; height: 100%; }
.ftk .ft-bar-img { width: 100%; height: 100%; object-fit: contain; }

/* ========== 横版票根 h1 ========== */
/* h1: 照片区 68%，信息区 32%，整体比例 2.4:1 */
.ftk-h { display: flex; aspect-ratio: 2.4; }
.ftk-h .fh-photo { flex: 0 0 68%; }
.ftk-h .fh-info {
  flex: 1; background: var(--fg-info-bg, #fff); padding: 14px 10px;
  display: flex; flex-direction: column; gap: 4px;
  position: relative; min-width: 0;
}
/* 照片与票根信息拼接处：垂直虚线 + 上下内凹半圆缺口 */
.ftk-h .fh-info {
  border-left: 2px dashed rgba(0, 0, 0, 0.35);
}
.ftk-h .fh-info::before,
.ftk-h .fh-info::after {
  content: ""; position: absolute; left: -8px;
  width: 16px; height: 16px; border-radius: 50%;
  background: #F2EDE6;
  z-index: 2;
}
.ftk-h .fh-info::before { top: -8px; }
.ftk-h .fh-info::after { bottom: -8px; }
.ftk-h .fh-city {
  font-size: 14px; font-weight: 800; letter-spacing: 0.5px;
  color: var(--fg-accent, #4F46E5);
  word-break: break-word; overflow-wrap: break-word;
}
.ftk-h .fh-cn {
  font-family: var(--sg-font-sans);
  font-size: 11px; color: #334155; margin-top: 2px;
  word-break: break-word; overflow-wrap: break-word;
}
/* 水平虚线分割（信息区中部） */
.ftk-h .fh-divider {
  border-top: 1.5px dashed rgba(0, 0, 0, 0.3);
  margin: 10px 0;
}
.ftk-h .fh-date { font-size: 10px; color: var(--fg-sub, #64748B); }
.ftk-h .fh-no { font-size: 9px; color: var(--fg-sub, #64748B); }
.ftk-h .ft-bar { height: 40px; }

.ftk-h1 { --fg-info-bg: #4A6B8A; --fg-grad: linear-gradient(110deg, #6B8CFF 0%, #D946EF 55%, #FB7185 100%); --fg-accent: #93C5FD; --fg-sub: #94A3B8; }
.ftk-h1 .fh-city { color: #FFFFFF; }
.ftk-h1 .fh-cn { color: #CBD5E1; }
.ftk-h1 .fh-date, .ftk-h1 .fh-no { color: #94A3B8; }
.ftk-h1 .ft-bar { color: #CBD5E1; }
.ftk-h1 .fh-info::before, .ftk-h1 .fh-info::after { background: #F2EDE6; }
.ftk-h1 .fh-divider { border-top-color: rgba(255, 255, 255, 0.2); }

/* ========== 竖版票根 v1 / v2 ========== */
.ftk-v { display: flex; flex-direction: column; aspect-ratio: 3 / 4; }
.ftk-v .fv-photo { flex: 1 1 auto; min-height: 0; }
.ftk-v .fv-info {
  flex: 0 0 auto; background: var(--fg-info-bg, #fff);
  padding: 12px 14px 12px;
  display: flex; flex-direction: column; gap: 4px;
}
.ftk-v .fv-city { font-size: 16px; font-weight: 800; letter-spacing: 1px; color: var(--fg-accent, #4F46E5); }
.ftk-v .fv-cn { font-family: var(--sg-font-sans); font-size: 12px; color: #334155; }
.ftk-v .fv-row { display: flex; align-items: flex-end; justify-content: space-between; gap: 8px; }
.ftk-v .fv-date { font-size: 11px; color: var(--fg-sub, #64748B); }
.ftk-v .fv-no { font-size: 10px; color: var(--fg-sub, #64748B); }
.ftk-v .fv-row .ft-bar { flex: 0 0 44%; height: 22px; }

.ftk-v1 { --fg-grad: linear-gradient(160deg, #93C5FD 0%, #A78BFA 60%, #F9A8D4 100%); --fg-accent: #4F46E5; --fg-sub: #64748B; }
.ftk-v2 { --fg-grad: linear-gradient(160deg, #1E1B4B 0%, #4C1D95 50%, #C084FC 100%); --fg-accent: #111827; --fg-sub: #64748B; }

/* ========== 制作页票根预览区域（跟随页面默认背景，主题色只作用于票根信息区） ========== */
.sg-ticket-preview {
  padding: 28px 8px;
  border-radius: var(--sg-radius-large);
  background-color: var(--sg-background);
}
.sg-ticket-preview .ftk {
  box-shadow: 0 12px 32px rgba(0, 0, 0, 0.08);
  transform: scale(1.15);
  transform-origin: center top;
  margin-bottom: 15%;
}

/* 票根舞台：预览容器和历史详情通用 */
#ticket-preview-inner,
.ftk-stage {
  background: #F2EDE6;
  padding: 28px 8px;
  border-radius: 12px;
}

/* ========== 模板选择卡片内的预览（缩小字号） ========== */
.tpl-mini .ftk { box-shadow: none; }
.tpl-mini .fh-city { font-size: 12px; }
.tpl-mini .fh-cn { font-size: 9px; }
.tpl-mini .ftk-h .ft-bar { height: 24px; }
.tpl-mini .fh-divider { margin: 4px 0; }
.tpl-mini .fh-date, .tpl-mini .fh-no, .tpl-mini .fv-date, .tpl-mini .fv-no { font-size: 9px; }
.tpl-mini .ft-bar, .tpl-mini .fv-row .ft-bar { height: 14px; }