/* ============================================================
   紅色精靈篩選「離線 App 版」的底層樣式（2026-10-06）
   App 版不載入網站的 theme.css（太大、還帶導覽列樣式），這裡只放 sprite_finder.css 需要的設計變數、
   基本重設、雙語切換、提示訊息。深色主題（觀測都在晚上）。
   ============================================================ */
:root {
    --font-primary: system-ui, -apple-system, "Segoe UI", "PingFang TC", "Noto Sans TC", "Microsoft JhengHei", sans-serif;
    --radius-sm: 4px; --radius-md: 8px; --radius-lg: 12px; --radius-xl: 16px;
    --space-xs: 4px; --space-sm: 8px; --space-md: 16px; --space-lg: 24px; --space-xl: 32px; --space-2xl: 48px; --space-3xl: 72px;
    --transition-fast: 150ms ease; --transition-base: 200ms ease;
    --navbar-height: 0px;
    --color-bg: #0c0a1a;
    --color-surface: rgba(22, 19, 44, 0.72);
    --color-surface-elevated: rgba(32, 28, 60, 0.95);
    --color-border: rgba(255, 255, 255, 0.09);
    --color-text: #eae8f0;
    --color-text-secondary: #b3adc8;
    --color-text-muted: #8b85a5;
    --color-text-faint: #6b6585;
    --color-accent: #F39F5A;
    --color-accent-hover: #f5b278;
    --color-accent-text: #0c0a1a;
    --color-accent-soft: rgba(243, 159, 90, 0.12);
    --dropdown-bg: #1a1732;
    --shadow-lg: 0 8px 24px rgba(0, 0, 0, 0.4);
    color-scheme: dark;
}
*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }
html { -webkit-text-size-adjust: 100%; }
body {
    min-height: 100vh; min-height: 100dvh; display: flex; flex-direction: column;
    font-family: var(--font-primary); color: var(--color-text); line-height: 1.5;
    background: radial-gradient(1200px 640px at 85% -10%, rgba(99, 72, 190, 0.26), transparent 60%),
                radial-gradient(1000px 560px at -10% 105%, rgba(30, 90, 160, 0.22), transparent 60%),
                linear-gradient(180deg, #06050f 0%, #0b0a1e 55%, #110c28 100%) fixed, var(--color-bg);
    padding: env(safe-area-inset-top) env(safe-area-inset-right) env(safe-area-inset-bottom) env(safe-area-inset-left);
}
main { flex: 1; }
a { color: var(--color-accent); text-decoration: none; }
button { font-family: inherit; }
img { max-width: 100%; display: block; }
.container { max-width: 1400px; margin: 0 auto; padding: 0 var(--space-lg); }
@media (max-width: 768px) { .container { padding: 0 var(--space-md); } }

/* 雙語 */
[data-lang="en"] [data-i18n-zh], [data-lang="zh"] [data-i18n-en] { display: none !important; }

.sf-app-foot { display: flex; flex-wrap: wrap; gap: 4px 16px; justify-content: center; padding: 18px 16px 22px; font-size: 0.74rem; color: var(--color-text-faint); }

/* 提示訊息（網站版用 global.js 的 showToast，App 版用這個） */
.sf-toasts { position: fixed; left: 50%; bottom: calc(20px + env(safe-area-inset-bottom)); transform: translateX(-50%); z-index: 1000;
    display: flex; flex-direction: column; gap: 8px; align-items: center; pointer-events: none; width: min(560px, calc(100vw - 32px)); }
.sf-toast { pointer-events: auto; padding: 10px 16px; border-radius: 12px; font-size: 0.86rem; line-height: 1.5; color: var(--color-text);
    background: var(--color-surface-elevated); border: 1px solid var(--color-border); box-shadow: var(--shadow-lg);
    animation: sf-toast-in 0.2s ease; }
.sf-toast.is-error { border-color: rgba(224, 85, 106, 0.6); }
.sf-toast.is-success { border-color: rgba(63, 179, 127, 0.6); }
.sf-toast.is-out { opacity: 0; transition: opacity 0.3s; }
@keyframes sf-toast-in { from { opacity: 0; transform: translateY(8px); } }

/* 桌面版的新版本提示列 */
.sf-update { display: flex; align-items: center; justify-content: center; gap: 12px; flex-wrap: wrap; padding: 8px 16px; font-size: 0.84rem;
    background: var(--color-accent-soft); border-bottom: 1px solid rgba(243, 159, 90, 0.4); color: var(--color-text); }
.sf-update a { font-weight: 600; }
.sf-update button { border: 0; background: none; color: var(--color-text-secondary); font-size: 1.1rem; line-height: 1; cursor: pointer; padding: 2px 6px; }