@charset "utf-8";
/**
 * Wind × 飛律 — print-card 專屬樣式 (assets/print-card.css)
 * 自 print-card.html 內聯樣式抽離，利於快取與維運。
 * 涵蓋：CSS Reset / Screen Toolbar / 3D 翻轉 / 1:1 實體卡 / Dark Theme / Print @media
 */

/* ==========================================================================
  CSS Reset & Screen Layout
  ========================================================================== */
*, *::before, *::after {
 box-sizing: border-box;
 margin: 0;
 padding: 0;
}

:root {
  --toggle-hover-border: rgba(59, 130, 246, 0.5);
  --toggle-border: rgba(255, 255, 255, 0.10);
 --font-base: 'Plus Jakarta Sans', "Noto Sans TC", -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
 --bg-screen: #0f172a;
 --surface-screen: #1e293b;
 --border-screen: rgba(255, 255, 255, 0.1);
 --text-screen: var(--color-text-main);
 --dim-screen: var(--color-text-muted);
 
 /* 名片實體尺寸變數 */
 --card-w: 90mm;
 --card-h: 54mm;
 --bleed-w: 92mm;
 --bleed-h: 56mm;
}
 
.sr-only {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0,0,0,0);
  white-space: nowrap;
  border: 0;
}

body {
  font-family: var(--font-base);
  background: radial-gradient(circle at 50% 18%, rgba(59, 130, 246, 0.07) 0%, transparent 65%), var(--bg-screen);
  color: var(--text-screen);
  line-height: 1.4;
  -webkit-font-smoothing: antialiased;
  min-height: 100vh;
  display: flex;
  flex-direction: column;
}

/* ==========================================================================
  Screen Toolbar & Guidance
  ========================================================================== */
.toolbar-wrap {
 background: var(--surface-screen);
 border-bottom: 1px solid var(--border-screen);
 padding: 14px 24px;
 position: sticky;
 top: 0;
 z-index: var(--z-nav);
}

.toolbar-inner {
 max-width: 1200px;
 margin: 0 auto;
 display: flex;
 flex-wrap: wrap;
 align-items: center;
 justify-content: space-between;
 gap: 16px;
}

.brand-header h1 {
 font-size: 1.05rem;
 font-weight: 800;
 letter-spacing: -0.01em;
 display: flex;
 align-items: center;
 gap: 8px;
}

.brand-header h1 span {
 font-size: 0.8rem;
 font-weight: 600;
 padding: 2px 8px;
 border-radius: 99px;
 background: rgba(99, 102, 241, 0.2);
 color: #a5b4fc;
 border: 1px solid rgba(99, 102, 241, 0.3);
}

.brand-header p {
 font-size: 0.8rem;
 color: var(--dim-screen);
 margin-top: 2px;
}

.tool-controls {
 display: flex;
 flex-wrap: wrap;
 align-items: center;
 gap: 10px;
}

.btn {
 appearance: none;
 border: 1px solid var(--border-screen);
 background: rgba(255, 255, 255, 0.06);
 color: #f1f5f9;
 padding: 8px 16px;
 border-radius: 8px;
 font-size: 0.85rem;
 font-weight: 600;
 cursor: pointer;
 display: inline-flex;
 align-items: center;
 gap: 6px;
 transition: all 0.15s ease;
 font-family: inherit;
}

.btn:hover {
 background: rgba(255, 255, 255, 0.12);
 border-color: rgba(255, 255, 255, 0.25);
}

.btn.primary {
 background: #1d4ed8;
 border-color: #1d4ed8;
 color: #fff;
 box-shadow: 0 4px 14px rgba(29, 78, 216, 0.35);
}

.btn.primary:hover {
 background: #1e40af;
 border-color: #1e40af;
}

.toggle-group {
 display: flex;
 background: rgba(0, 0, 0, 0.25);
 padding: 3px;
 border-radius: 8px;
 border: 1px solid var(--border-screen);
}

.toggle-btn {
 padding: 5px 12px;
 font-size: 0.8rem;
 font-weight: 600;
 border: none;
 background: transparent;
 color: var(--dim-screen);
 border-radius: 6px;
 cursor: pointer;
 transition: all 0.15s ease;
}

.toggle-btn.active {
 background: rgba(255, 255, 255, 0.15);
 color: #fff;
}

.main-preview {
 max-width: 1200px;
 margin: 0 auto;
 padding: 48px 20px 48px;
 display: flex;
 flex-direction: column;
 align-items: center;
 justify-content: center;
 flex: 1;
 width: 100%;
}

/* ==========================================================================
  視圖模式切換控制
  ========================================================================== */
.view-mode-ecard .toolbar-wrap {
 display: none !important;
}
.view-mode-ecard #printViewSection {
 display: none !important;
}
.view-mode-print #ecardViewSection {
 display: none !important;
}
.view-mode-print .ecard-footer {
 display: none !important;
}

/* 頁尾精緻微標記與隱藏送印入口 */
.ecard-footer {
 margin-top: 36px;
 display: flex;
 flex-direction: column;
 align-items: center;
 gap: 12px;
 text-align: center;
}

.footer-brand {
 font-size: 0.82rem;
 color: var(--color-text-muted);
 font-weight: 500;
 letter-spacing: 0.02em;
}

.btn-print-toggle {
 appearance: none;
 background: transparent;
 border: 1px solid rgba(255, 255, 255, 0.1);
 color: var(--color-text-muted);
 padding: 6px 16px;
 border-radius: 99px;
 font-size: 0.78rem;
 font-weight: 600;
 cursor: pointer;
 transition: all 0.2s ease;
 font-family: inherit;
}

.btn-print-toggle:hover {
 background: rgba(255, 255, 255, 0.06);
 color: #94a3b8;
 border-color: rgba(255, 255, 255, 0.22);
}

/* ==========================================================================
  📱 3D 擬真翻轉電子名片模式樣式
  ========================================================================== */
.ecard-stage {
 display: flex;
 flex-direction: column;
 align-items: center;
 gap: 20px;
 width: 100%;
 margin: 0 auto;
}

/* 縮放層：手機視窗放不下 90mm 卡面時等比縮小；perspective 需留在翻轉容器的直接父層 */
.flipper-scaler {
 perspective: 1200px;
 -webkit-perspective: 1200px;
 width: var(--card-w);
 height: var(--card-h);
 transform-origin: top center;
}

.card-flipper-container {
 width: var(--card-w);
 height: var(--card-h);
 position: relative;
 transform-style: preserve-3d;
 -webkit-transform-style: preserve-3d;
 transition: transform 0.6s cubic-bezier(0.34, 1.56, 0.64, 1);
 cursor: pointer;
 outline: none;
 border-radius: 8px;
}

.card-flipper-container:focus-visible {
 box-shadow: 0 0 0 3px #3b82f6;
}

.card-flipper-container.is-flipped {
 transform: rotateY(180deg);
}

.card-face {
 position: absolute;
 top: 0;
 left: 0;
 width: 100%;
 height: 100%;
 backface-visibility: hidden;
 -webkit-backface-visibility: hidden;
 border-radius: 8px;
 overflow: hidden;
 box-shadow: 0 22px 48px -12px rgba(0, 0, 0, 0.6), 0 0 0 1px rgba(255, 255, 255, 0.12);
 background: #ffffff;
 transition: box-shadow 0.3s ease;
}

.theme-dark .card-face {
 background: #090d16;
 box-shadow: 0 22px 48px -12px rgba(0, 0, 0, 0.85), 0 0 0 1px rgba(255, 255, 255, 0.08);
}

.card-flipper-container:hover .card-face {
 box-shadow: 0 28px 56px -12px rgba(0, 0, 0, 0.7), 0 0 0 1px rgba(99, 102, 241, 0.4);
}

.card-face.face-back {
 transform: rotateY(180deg);
}

.flip-hint-btn {
 appearance: none;
 user-select: none;
 border: 1px solid var(--border-screen);
 background: rgba(255, 255, 255, 0.06);
 color: #cbd5e1;
 padding: 8px 18px;
 border-radius: 99px;
 font-size: 0.82rem;
 font-weight: 600;
 cursor: pointer;
 display: inline-flex;
 align-items: center;
 gap: 8px;
 transition: all 0.2s ease;
 font-family: inherit;
}

.flip-hint-btn:hover {
 background: rgba(255, 255, 255, 0.14);
 color: #ffffff;
 border-color: rgba(255, 255, 255, 0.25);
 transform: translateY(-1px);
}

.flip-hint-btn span {
 font-size: 0.76rem;
 color: #94a3b8;
}

/* ==========================================================================
  ⚡ 行動快捷列 (Action Bar)
  ========================================================================== */
.action-bar-wrap {
 display: flex;
 flex-wrap: wrap;
 justify-content: center;
 align-items: center;
 gap: 12px;
 width: 100%;
 max-width: 480px;
 margin-top: 6px;
}

.action-btn {
 flex: 1 1 130px;
 padding: 11px 18px;
 border-radius: 10px;
 font-size: 0.88rem;
 font-weight: 700;
 text-decoration: none;
 display: inline-flex;
 align-items: center;
 justify-content: center;
 gap: 8px;
 cursor: pointer;
 border: none;
 font-family: inherit;
 transition: all 0.18s cubic-bezier(0.4, 0, 0.2, 1);
 box-shadow: 0 4px 14px rgba(0, 0, 0, 0.25);
}

.action-btn:hover {
 transform: translateY(-2px);
 box-shadow: 0 8px 22px rgba(0, 0, 0, 0.35);
}

.action-btn:active {
 transform: translateY(0);
}

.btn-line {
 background: #06c755;
 color: #04130d;
}
.btn-line:hover {
 background: #05b34c;
}

.btn-call {
 background: #1d4ed8;
 color: #ffffff;
}
.btn-call:hover {
 background: #1e40af;
}

.btn-share {
 background: rgba(255, 255, 255, 0.08);
 color: #f8fafc;
 border: 1px solid var(--border-screen);
}
.btn-share:hover {
 background: rgba(255, 255, 255, 0.16);
 border-color: rgba(255, 255, 255, 0.3);
}

/* Toast 提示浮動卡 */
.toast-popup {
 position: fixed;
 bottom: 28px;
 left: 50%;
 transform: translateX(-50%) translateY(100px);
 background: #1e293b;
 color: #f8fafc;
 border: 1px solid rgba(255, 255, 255, 0.18);
 box-shadow: 0 12px 28px rgba(0, 0, 0, 0.55);
 padding: 10px 22px;
 border-radius: 99px;
 font-size: 0.88rem;
 font-weight: 600;
 display: flex;
 align-items: center;
 gap: 8px;
 z-index: var(--z-toast);
 opacity: 0;
 transition: transform 0.3s cubic-bezier(0.34, 1.56, 0.64, 1), opacity 0.3s ease;
 pointer-events: none;
}

.toast-popup.show {
 transform: translateX(-50%) translateY(0);
 opacity: 1;
}

.preview-grid {
 display: flex;
 flex-wrap: wrap;
 justify-content: center;
 gap: 36px;
 width: 100%;
}

.card-stage {
 display: flex;
 flex-direction: column;
 align-items: center;
 gap: 12px;
}

.stage-title {
 font-size: 0.88rem;
 font-weight: 700;
 color: #cbd5e1;
 letter-spacing: 0.5px;
 display: flex;
 align-items: center;
 gap: 8px;
}

.stage-title .dim {
 font-size: 0.75rem;
 font-weight: 500;
 color: var(--color-text-muted);
}

/* ==========================================================================
  1:1 Physical Business Card Styles (90mm × 54mm / 92mm × 56mm)
  ========================================================================== */
.card-outer {
 width: var(--card-w);
 height: var(--card-h);
 position: relative;
 box-shadow: 0 16px 36px rgba(0, 0, 0, 0.45);
 border-radius: 0px; /* 實體名片印刷直角 */
 background: #ffffff;
 color: #111827;
 overflow: hidden;
 /* 不可對 width/height 加 transition：切換出血時該轉場會卡在起始值，
    導致 .card-outer 永遠停在 90×54，出血區根本沒生出來（實測 Chrome）。 */
}

/* 出血模式 (92mm × 56mm 含 1mm 出血) */
.bleed-active .card-outer {
 width: var(--bleed-w);
 height: var(--bleed-h);
}

.card-inner {
 width: 90mm;
 height: 54mm;
 padding: 3.2mm 4.5mm;
 display: flex;
 flex-direction: column;
 justify-content: space-between;
 position: absolute;
 top: 50%;
 left: 50%;
 transform: translate(-50%, -50%);
 background: #ffffff;
 box-sizing: border-box;
}

/* 出血模式下內容框「不變」——固定 90×54 置中，出血僅由 .card-outer 的底色向外延伸 1mm。
   若在此放大 card-inner 會整個重排版面，裁切後成品將與成品模式預覽不一致。 */

/* 送印畫布：出血模式下向外撐出 2mm 空白，讓裁切線能落在出血區「之外」。
   90×54 成品 + 1mm 出血 = 92×56，再加四周 2mm 空白 = 96×60 頁面。 */
.card-canvas {
 position: relative;
 width: var(--card-w);
 height: var(--card-h);
 flex-shrink: 0;
}

.bleed-active .card-canvas {
 width: calc(var(--bleed-w) + 4mm);  /* 96mm */
 height: calc(var(--bleed-h) + 4mm); /* 60mm */
 padding: 2mm;
 background: #ffffff; /* 空白區代表未印刷的紙面，讓黑色角線在深色畫面上可見 */
}

/* 出血裁切線 (Crop Marks) — 對齊 90×54 成品邊，落在出血區外的空白處。
   印刷慣例用黑色：紅色在單色版會轉為不確定的灰階。 */
.crop-mark {
 position: absolute;
 background: #000000;
 pointer-events: none;
 display: none;
 z-index: 2;
}

.bleed-active .crop-mark {
 display: block;
}

.cm-v { width: 0.2mm; height: 1.2mm; }
.cm-h { width: 1.2mm; height: 0.2mm; }

.crop-tl-v { top: 0.5mm; left: 3mm; }
.crop-tl-h { top: 3mm; left: 0.5mm; }
.crop-tr-v { top: 0.5mm; right: 3mm; }
.crop-tr-h { top: 3mm; right: 0.5mm; }
.crop-bl-v { bottom: 0.5mm; left: 3mm; }
.crop-bl-h { bottom: 3mm; left: 0.5mm; }
.crop-br-v { bottom: 0.5mm; right: 3mm; }
.crop-br-h { bottom: 3mm; right: 0.5mm; }

/* --------------------------------------------------------------------------
  Front Side Layout (Wind)
  -------------------------------------------------------------------------- */
.card-front {
 background: #ffffff;
 color: #0f172a;
}

.front-top {
 display: flex;
 align-items: center;
 justify-content: space-between;
}

.brand-row {
 display: flex;
 align-items: baseline;
 gap: 2.2mm;
}

.name-main {
 font-size: 12.5pt;
 font-weight: 800;
 letter-spacing: -0.02em;
 color: #0f172a;
 line-height: 1;
}

.name-badge {
 font-size: 6.5pt;
 font-weight: 700;
 padding: 0.6mm 2mm;
 border-radius: 1.5mm;
 background: #1e293b;
 color: #f8fafc;
 letter-spacing: 0.02em;
}

.front-headline {
 margin-top: 1.0mm;
}

.headline-text {
 font-size: 8.2pt;
 font-weight: 700;
 color: #1e3a8a;
 line-height: 1.2;
}

.sub-proof {
 font-size: 6.8pt;
 font-weight: 500;
 color: #475569;
 margin-top: 0.5mm;
 line-height: 1.2;
}

.tags-row {
 display: flex;
 gap: 1.2mm;
 margin-top: 1.2mm;
}

.tag-pill {
  font-size: 6.5pt;
  font-weight: 600;
  padding: 0.5mm 1.8mm;
  border-radius: 1.2mm;
  background: #f1f5f9;
  color: #334155;
  border: 0.2mm solid #cbd5e1;
  line-height: 1.2;
}

.front-bottom {
 display: flex;
 align-items: flex-end;
 justify-content: space-between;
 border-top: 0.25mm solid #e2e8f0;
 padding-top: 1.5mm;
 margin-top: 1.0mm;
}

.contact-col {
 display: flex;
 flex-direction: column;
 gap: 0.8mm;
}

.contact-item {
 font-size: 6.5pt;
 line-height: 1.2;
 color: #334155;
 display: flex;
 align-items: center;
 gap: 1.2mm;
}

.contact-item strong {
 color: #0f172a;
 font-weight: 700;
}

.contact-item .note {
 font-size: 5.8pt;
 color: #64748b;
}

/* 卡面單色向量圖示。取代原本的彩色 emoji：emoji 依賴系統字型，送印 PDF 時
   在印刷廠 RIP 常出現缺字或被轉成點陣。inline SVG 以 currentColor 描邊，
   跟著文字顏色與主題走，且在任何解析度下都是純向量。 */
.ico {
 display: inline-block;
 width: 2.6mm;
 height: 2.6mm;
 vertical-align: -0.5mm;
 margin-right: 0.5mm;
 fill: none;
 stroke: currentColor;
 stroke-width: 1.8;
 stroke-linecap: round;
 stroke-linejoin: round;
 flex-shrink: 0;
}

/* QR 說明文字僅 5.2pt，圖示需同步縮小並加粗描邊以維持印刷可辨識度 */
.ico-sm {
 width: 1.9mm;
 height: 1.9mm;
 vertical-align: -0.3mm;
 margin-right: 0.4mm;
 stroke-width: 2.4;
}

.qr-box {
 display: flex;
 flex-direction: column;
 align-items: center;
 flex-shrink: 0;
}

.qr-img-wrap {
 width: 14.5mm;
 height: 14.5mm;
 padding: 0.4mm;
 background: #fff;
 border: 0.2mm solid #e2e8f0;
 border-radius: 0.8mm;
 display: flex;
 align-items: center;
 justify-content: center;
}

.qr-img-wrap svg {
 width: 100%;
 height: 100%;
 display: block;
}

.qr-caption {
 font-size: 5.2pt;
 font-weight: 700;
 color: #1e3a8a;
 margin-top: 0.5mm;
 letter-spacing: -0.01em;
 line-height: 1;
}

/* --------------------------------------------------------------------------
  Back Side Layout (Feilu AI Enablement)
  -------------------------------------------------------------------------- */
.card-back {
 background: #ffffff;
 color: #0f172a;
}

.back-top {
 display: flex;
 align-items: center;
 justify-content: space-between;
}

.back-brand-row {
 display: flex;
 align-items: baseline;
 gap: 2.2mm;
}

.back-brand-name {
 font-size: 12.5pt;
 font-weight: 800;
 letter-spacing: -0.02em;
 color: #065f46;
 line-height: 1;
}

.back-badge {
 font-size: 6.5pt;
 font-weight: 700;
 padding: 0.6mm 2mm;
 border-radius: 1.5mm;
 background: #065f46;
 color: #ecfdf5;
 letter-spacing: 0.02em;
}

.back-headline {
 margin-top: 1.0mm;
}

.back-offer-text {
 font-size: 8.2pt;
 font-weight: 700;
 color: #047857;
 line-height: 1.2;
}

.back-usp {
 font-size: 6.8pt;
 font-weight: 600;
 color: #b45309;
 margin-top: 0.5mm;
 line-height: 1.2;
}

.scope-grid {
 display: grid;
 grid-template-columns: 1fr 1fr;
 gap: 0.8mm 2mm;
 margin-top: 1.2mm;
}

.scope-item {
  font-size: 6.5pt;
  color: #334155;
  display: flex;
  align-items: center;
  gap: 0.8mm;
  background: #f8fafc;
  padding: 0.4mm 1.2mm;
  border-radius: 0.8mm;
  border: 0.15mm solid #e2e8f0;
  line-height: 1.15;
}

.scope-item strong {
 color: #0f172a;
 font-weight: 700;
}

.back-bottom {
 display: flex;
 align-items: flex-end;
 justify-content: space-between;
 border-top: 0.25mm solid #e2e8f0;
 padding-top: 1.5mm;
 margin-top: 1.0mm;
}

.back-qr-caption {
 font-size: 5.2pt;
 font-weight: 700;
 color: #065f46;
 margin-top: 0.5mm;
 letter-spacing: -0.01em;
 line-height: 1;
}

/* ==========================================================================
  Dark Theme Variant (曜黑科技版)
  ========================================================================== */
.theme-dark .card-front,
.theme-dark .card-back {
 background: #090d16;
 color: #f8fafc;
}

.theme-dark .card-outer {
 background: #090d16;
}

.theme-dark .card-inner {
 background: #090d16;
}

.theme-dark .name-main {
 color: #ffffff;
}

.theme-dark .name-badge {
 background: #312e81;
 color: #c7d2fe;
}

.theme-dark .headline-text {
 color: #93c5fd;
}

.theme-dark .sub-proof {
 color: #94a3b8;
}

.theme-dark .tag-pill {
 background: #1e293b;
 color: #cbd5e1;
 border-color: #334155;
}

.theme-dark .front-bottom,
.theme-dark .back-bottom {
 border-color: #1e293b;
}

.theme-dark .contact-item {
 color: #94a3b8;
}

.theme-dark .contact-item strong {
 color: #f8fafc;
}

.theme-dark .contact-item .note {
 color: #64748b;
}

.theme-dark .qr-img-wrap {
 background: #ffffff;
 border-color: #334155;
}

.theme-dark .qr-caption {
 color: #93c5fd;
}

.theme-dark .back-brand-name {
 color: #34d399;
}

.theme-dark .back-badge {
 background: #064e3b;
 color: #6ee7b7;
}

.theme-dark .back-offer-text {
 color: #6ee7b7;
}

.theme-dark .back-usp {
 color: #fbbf24;
}

.theme-dark .scope-item {
 background: #111827;
 color: #cbd5e1;
 border-color: #1f2937;
}

.theme-dark .scope-item strong {
 color: #f3f4f6;
}

.theme-dark .back-qr-caption {
 color: #34d399;
}

/* ==========================================================================
  Print CSS (@media print) - Standard 1:1 Page Size & Multi-Page Output
  ========================================================================== */
@media print {
 @page {
  size: 90mm 54mm;
  margin: 0;
 }
 
 html, body {
  background: transparent !important;
  color: #000 !important;
  margin: 0 !important;
  padding: 0 !important;
  -webkit-print-color-adjust: exact !important;
  print-color-adjust: exact !important;
 }
 
 .no-print,
 .skip-link,
 .toolbar-wrap,
 .info-box,
 .stage-title,
 .ecard-stage,
 .action-bar-wrap,
 .flip-hint-btn,
 .toast-popup {
  display: none !important;
 }
 
 .main-preview {
  margin: 0 !important;
  padding: 0 !important;
  display: block !important;
 }

 /* 強制在列印時展開正反雙頁送印預覽 */
 #printViewSection {
  display: block !important;
 }
 #ecardViewSection {
  display: none !important;
 }
 
 .preview-grid {
  display: block !important;
  margin: 0 !important;
  gap: 0 !important;
 }
 
 .card-stage {
  margin: 0 !important;
  padding: 0 !important;
  page-break-after: always !important;
  break-after: page !important;
  display: block !important;
 }
 
 .card-stage:last-child {
  page-break-after: auto !important;
  break-after: auto !important;
 }
 
 .card-canvas {
  margin: 0 !important;
  padding: 0 !important;
  width: 90mm !important;
  height: 54mm !important;
  background: transparent !important;
 }
 
 /* 出血：96×60mm 頁面 = 92×56 出血版面 + 四周 2mm 裁切線落點空白 */
 .bleed-active .card-canvas {
  width: 96mm !important;
  height: 60mm !important;
  padding: 2mm !important;
  background: #ffffff !important;
 }
 
 .card-outer {
  box-shadow: none !important;
  margin: 0 !important;
  width: 90mm !important;
  height: 54mm !important;
  position: relative !important;
 }
 
 .bleed-active .card-outer {
  width: 92mm !important;
  height: 56mm !important;
 }
}

@media (max-width: 768px) {
 .toolbar-wrap {
  padding: 12px 16px;
 }
 .toolbar-inner {
  flex-direction: column;
  align-items: stretch;
  gap: 12px;
 }
 .tool-controls {
  justify-content: flex-start;
  gap: 8px;
 }
 .main-preview {
  margin: 20px auto;
  padding: 0 14px 40px;
  gap: 28px;
 }
 .preview-grid {
  gap: 28px;
 }
}

/* 3D 卡面是固定 90mm(≈340px) 寬，窄螢幕放不下時等比縮放整個縮放層。
   不改 --card-w：那會破壞 mm 排版下的字級與間距比例。
   margin-bottom 為負值以吸收縮放後多出來的高度（54mm ≈ 204px）。 */
@media (max-width: 374px) {
 .flipper-scaler {
  transform: scale(0.95);
  margin-bottom: -10px;
 }
}

@media (max-width: 359px) {
 .flipper-scaler {
  transform: scale(0.85);
  margin-bottom: -31px;
 }
}

@media (max-width: 339px) {
 .flipper-scaler {
  transform: scale(0.80);
  margin-bottom: -41px;
 }
}

/* 提示訊息卡 */
.info-box {
 max-width: 800px;
 width: 100%;
 background: rgba(255, 255, 255, 0.04);
 border: 1px solid var(--border-screen);
 border-radius: 12px;
 padding: 20px 24px;
 font-size: 0.85rem;
 color: var(--dim-screen);
 line-height: 1.7;
}

.info-box h2,
.info-box h3 {
  font-size: 0.95rem;
  font-weight: 700;
  color: #f1f5f9;
  margin-bottom: 8px;
  display: flex;
  align-items: center;
  gap: 6px;
}

.info-box ul {
 padding-left: 20px;
 margin-top: 6px;
}

.info-box li {
  margin-bottom: 4px;
}

/* ==============================================================================
 * ☀️ 淺色模式適配
 * ============================================================================== */
[data-theme="light"] {
  --bg-screen: var(--color-bg-dark);
  --surface-screen: var(--color-bg-surface);
  --border-screen: var(--color-border);
  --text-screen: var(--color-text-main);
  --dim-screen: var(--color-text-muted);
  --bg-primary: var(--color-bg-dark);
  --bg-secondary: var(--color-bg-surface);
  --bg-card: var(--color-bg-surface);
  --bg-elevated: var(--color-bg-elevated);
  --border: var(--color-border);
  --text-main: var(--color-text-main);
  --text-sub: var(--color-text-sub);
  --text-muted: var(--color-text-muted);
  --accent: var(--color-emerald-dark);
  --accent-light: var(--color-emerald-dark);
}
[data-theme="light"] body {
  background: radial-gradient(circle at 50% 18%, rgba(59, 130, 246, 0.04) 0%, transparent 65%), var(--bg-screen);
  color: var(--text-screen);
}
[data-theme="light"] .toolbar-wrap {
  background: rgba(255, 255, 255, 0.9);
  border-bottom: 1px solid var(--border-screen);
}
[data-theme="light"] .main-preview {
  background: transparent;
}
[data-theme="light"] .info-box {
  background: #ffffff;
  border: 1px solid var(--border-screen);
  color: var(--dim-screen);
  box-shadow: 0 4px 18px rgba(0, 0, 0, 0.04);
}
[data-theme="light"] .info-box h2,
[data-theme="light"] .info-box h3 {
  color: #0f172a;
}
[data-theme="light"] .ecard-footer .footer-brand {
  color: #64748b;
}
[data-theme="light"] .btn-print-toggle {
  border-color: rgba(15, 23, 42, 0.12);
  color: #64748b;
}
[data-theme="light"] .btn-print-toggle:hover {
  background: #f1f5f9;
  color: #334155;
}


[data-theme="light"] .btn {
  background: #ffffff;
  border-color: rgba(15,23,42,0.12);
  color: #0f172a;
}
[data-theme="light"] .btn:hover {
  background: #f1f5f9;
  border-color: #cbd5e1;
}
[data-theme="light"] .btn.primary {
  background: #2563eb;
  border-color: #2563eb;
  color: #ffffff;
}
[data-theme="light"] .btn.primary:hover {
  background: #1d4ed8;
  border-color: #1d4ed8;
}
[data-theme="light"] .toggle-group {
  background: #f1f5f9;
  border-color: rgba(15,23,42,0.09);
}
[data-theme="light"] .toggle-btn {
  color: #475569;
}
[data-theme="light"] .toggle-btn.active {
  background: #ffffff;
  color: #0f172a;
  box-shadow: 0 1px 3px rgba(0,0,0,0.08);
  border: 1px solid rgba(15,23,42,0.09);
}
[data-theme="light"] .flip-hint-btn {
  background: #ffffff;
  border-color: rgba(15,23,42,0.12);
  color: #334155;
  box-shadow: 0 2px 8px rgba(0,0,0,0.06);
}
[data-theme="light"] .flip-hint-btn:hover {
  background: #f8fafc;
  border-color: rgba(15,23,42,0.18);
  color: #0f172a;
}
[data-theme="light"] .flip-hint-btn span {
  color: #475569;
}
[data-theme="light"] .btn-share {
  background: #ffffff;
  color: #0f172a;
  border-color: rgba(15,23,42,0.12);
}
[data-theme="light"] .btn-share:hover {
  background: #f1f5f9;
  border-color: #cbd5e1;
}
[data-theme="light"] .brand-header p {
  color: #475569;
}
[data-theme="light"] .brand-header h1 span {
  background: rgba(4,120,87,0.10);
  color: #047857;
  border-color: rgba(4,120,87,0.25);
}
[data-theme="light"] .stage-title {
  color: #334155;
}
[data-theme="light"] .toast-popup {
  background: #ffffff;
  color: #0f172a;
  border-color: rgba(15,23,42,0.12);
}

@media (prefers-reduced-motion: reduce) {
  .card-flipper-container {
    transition: none !important;
  }
  .card-flipper-container:hover .card-face {
    box-shadow: 0 22px 48px -12px rgba(0, 0, 0, 0.6), 0 0 0 1px rgba(255, 255, 255, 0.12);
  }
}

[data-theme="light"] .btn-line {
  background: #047857;
  border-color: #047857;
  color: #ffffff;
}
[data-theme="light"] .btn-line:hover {
  background: #065f46;
  border-color: #065f46;
}
[data-theme="light"] .btn-call {
  background: #1e40af;
  border-color: #1e40af;
  color: #ffffff;
}
[data-theme="light"] .btn-call:hover {
  background: #1e3a8a;
  border-color: #1e3a8a;
}