/* ─────────────────────────────────────────────────────────────
   AI365 工具箱共用樣式（img / apng / qrcode / suno-dl）
   - 色彩全部走 --tl-* 變數，淺色為預設，深色有兩個入口：
     1) 使用者沒選過 → 跟隨系統 prefers-color-scheme
     2) 使用者按過切換鈕 → <html data-theme="light|dark">
   - 品牌色沿用網站的珊瑚紅 / 青綠（style.css 的 primary / secondary）
   ───────────────────────────────────────────────────────────── */

:root {
    --tl-bg: #F6F7F9;
    --tl-bg-glow: rgba(242, 85, 90, 0.07);
    --tl-surface: #FFFFFF;
    --tl-surface-2: #F1F3F6;
    --tl-surface-3: #E8EBEF;
    --tl-border: #E3E7EC;
    --tl-border-strong: #CDD3DA;
    --tl-text: #1E2730;
    --tl-muted: #5B6773;
    --tl-faint: #8B96A2;

    --tl-accent: #EE4F57;          /* 按鈕底色：珊瑚紅，白字對比足夠 */
    --tl-accent-hover: #DC3E46;
    --tl-accent-text: #D23A42;     /* 小字、連結用，比底色深一階 */
    --tl-accent-soft: rgba(238, 79, 87, 0.10);
    --tl-accent-line: rgba(238, 79, 87, 0.35);
    --tl-on-accent: #FFFFFF;

    --tl-teal: #13A89E;
    --tl-teal-soft: rgba(19, 168, 158, 0.12);
    --tl-ok: #0E8C68;
    --tl-warn: #B45309;
    --tl-warn-soft: rgba(245, 158, 11, 0.12);
    --tl-err: #D92D20;

    --tl-checker-a: #FFFFFF;
    --tl-checker-b: #DDE2E8;

    --tl-shadow: 0 1px 2px rgba(16, 24, 40, 0.04), 0 4px 16px rgba(16, 24, 40, 0.06);
    --tl-shadow-lg: 0 12px 32px rgba(16, 24, 40, 0.10);
    --tl-radius: 16px;
    --tl-radius-sm: 10px;
    color-scheme: light;
}

/* 深色：系統偏好（使用者沒指定淺色時）與手動指定共用同一組值 */
@media (prefers-color-scheme: dark) {
    :root:not([data-theme="light"]) {
        --tl-bg: #0E1318;
        --tl-bg-glow: rgba(255, 107, 107, 0.08);
        --tl-surface: #161D24;
        --tl-surface-2: #1D252E;
        --tl-surface-3: #26303A;
        --tl-border: #27313B;
        --tl-border-strong: #364250;
        --tl-text: #E8EDF2;
        --tl-muted: #9AA7B4;
        --tl-faint: #6C7986;
        --tl-accent: #F2555D;
        --tl-accent-hover: #FF6B6B;
        --tl-accent-text: #FF8A8A;
        --tl-accent-soft: rgba(255, 107, 107, 0.14);
        --tl-accent-line: rgba(255, 107, 107, 0.40);
        --tl-teal: #4ECDC4;
        --tl-teal-soft: rgba(78, 205, 196, 0.14);
        --tl-ok: #4ADE9B;
        --tl-warn: #FBBF24;
        --tl-warn-soft: rgba(251, 191, 36, 0.12);
        --tl-err: #F87171;
        --tl-checker-a: #1B232B;
        --tl-checker-b: #2A343E;
        --tl-shadow: 0 1px 2px rgba(0, 0, 0, 0.3), 0 4px 16px rgba(0, 0, 0, 0.25);
        --tl-shadow-lg: 0 12px 32px rgba(0, 0, 0, 0.4);
        color-scheme: dark;
    }
}
:root[data-theme="dark"] {
    --tl-bg: #0E1318;
    --tl-bg-glow: rgba(255, 107, 107, 0.08);
    --tl-surface: #161D24;
    --tl-surface-2: #1D252E;
    --tl-surface-3: #26303A;
    --tl-border: #27313B;
    --tl-border-strong: #364250;
    --tl-text: #E8EDF2;
    --tl-muted: #9AA7B4;
    --tl-faint: #6C7986;
    --tl-accent: #F2555D;
    --tl-accent-hover: #FF6B6B;
    --tl-accent-text: #FF8A8A;
    --tl-accent-soft: rgba(255, 107, 107, 0.14);
    --tl-accent-line: rgba(255, 107, 107, 0.40);
    --tl-teal: #4ECDC4;
    --tl-teal-soft: rgba(78, 205, 196, 0.14);
    --tl-ok: #4ADE9B;
    --tl-warn: #FBBF24;
    --tl-warn-soft: rgba(251, 191, 36, 0.12);
    --tl-err: #F87171;
    --tl-checker-a: #1B232B;
    --tl-checker-b: #2A343E;
    --tl-shadow: 0 1px 2px rgba(0, 0, 0, 0.3), 0 4px 16px rgba(0, 0, 0, 0.25);
    --tl-shadow-lg: 0 12px 32px rgba(0, 0, 0, 0.4);
    color-scheme: dark;
}

body.tl-body {
    background: var(--tl-bg);
    background-image: radial-gradient(900px 420px at 15% -10%, var(--tl-bg-glow), transparent 70%);
    background-repeat: no-repeat;
    color: var(--tl-text);
    font-family: 'Noto Sans TC', 'Outfit', sans-serif;
    margin: 0;
    transition: background-color .25s, color .25s;
}

/* ── 導覽列 ── */
.tl-nav {
    position: sticky; top: 0; z-index: 100;
    background: color-mix(in srgb, var(--tl-surface) 88%, transparent);
    backdrop-filter: blur(14px); -webkit-backdrop-filter: blur(14px);
    border-bottom: 1px solid var(--tl-border);
}
.tl-nav-inner {
    max-width: 1100px; margin: 0 auto; padding: 0 16px; height: 60px;
    display: flex; align-items: center; gap: 16px;
}
.tl-brand {
    display: flex; align-items: center; gap: 8px; text-decoration: none; flex-shrink: 0;
    color: var(--tl-text); font-weight: 800; font-size: 1rem;
}
.tl-brand img { width: 30px; height: 30px; border-radius: 7px; object-fit: cover; }
.tl-tabs { display: flex; gap: 4px; flex: 1; justify-content: center; }
.tl-tab {
    display: inline-flex; align-items: center; gap: 6px; padding: 8px 12px; border-radius: 10px;
    color: var(--tl-muted); text-decoration: none; font-size: 0.9rem; font-weight: 600; white-space: nowrap;
    transition: background .15s, color .15s;
}
.tl-tab:hover { background: var(--tl-surface-2); color: var(--tl-text); }
.tl-tab.active { background: var(--tl-accent-soft); color: var(--tl-accent-text); }
.tl-tab i { font-size: 0.85em; }
.tl-actions { display: flex; align-items: center; gap: 6px; flex-shrink: 0; }
.tl-icon-btn {
    display: inline-flex; align-items: center; justify-content: center; gap: 6px;
    height: 38px; min-width: 38px; padding: 0 12px; border-radius: 10px;
    border: 1px solid var(--tl-border); background: var(--tl-surface); color: var(--tl-text);
    font: inherit; font-size: 0.88rem; font-weight: 600; cursor: pointer; text-decoration: none;
    transition: background .15s, border-color .15s;
}
.tl-icon-btn:hover { background: var(--tl-surface-2); border-color: var(--tl-border-strong); }
#tl-theme-toggle { padding: 0; width: 38px; }
@media (max-width: 760px) {
    .tl-nav-inner { flex-wrap: wrap; height: auto; padding-top: 10px; gap: 8px 12px; }
    .tl-brand { flex: 1; }
    .tl-tabs {
        order: 3; flex-basis: 100%; justify-content: flex-start; overflow-x: auto;
        margin: 0 -16px; padding: 0 16px 8px; scrollbar-width: none;
    }
    .tl-tabs::-webkit-scrollbar { display: none; }
    .tl-hide-sm { display: none; }
    .tl-icon-btn:has(.tl-hide-sm) { padding: 0; width: 38px; gap: 0; }
}

/* ── 版面 ── */
.tl-main { max-width: 980px; margin: 0 auto; padding: 36px 16px 72px; }
.tl-hero { text-align: center; margin-bottom: 28px; }
.tl-badge {
    display: inline-flex; align-items: center; gap: 6px; padding: 5px 14px; border-radius: 50px;
    background: var(--tl-accent-soft); color: var(--tl-accent-text); border: 1px solid var(--tl-accent-line);
    font-size: 0.8rem; font-weight: 700; margin-bottom: 14px;
}
.tl-hero h1 {
    font-family: 'Outfit', 'Noto Sans TC', sans-serif; font-weight: 900;
    font-size: clamp(1.7rem, 4.5vw, 2.5rem); line-height: 1.2; margin: 0 0 10px; color: var(--tl-text);
}
.tl-accent { color: var(--tl-accent-text); }
.tl-hero p { color: var(--tl-muted); margin: 0 auto; max-width: 620px; line-height: 1.75; }

.tl-card {
    background: var(--tl-surface); border: 1px solid var(--tl-border); border-radius: var(--tl-radius);
    box-shadow: var(--tl-shadow); padding: 22px; margin-bottom: 18px;
}
.tl-card h2 {
    font-size: 1.05rem; margin: 0 0 14px; color: var(--tl-text);
    display: flex; align-items: center; gap: 8px;
}
.tl-step {
    width: 24px; height: 24px; border-radius: 50%; background: var(--tl-accent); color: var(--tl-on-accent);
    display: inline-flex; align-items: center; justify-content: center; font-size: 0.8rem; font-weight: 800; flex-shrink: 0;
}
.tl-note { font-size: 0.84rem; color: var(--tl-muted); line-height: 1.75; }
.tl-note b, .tl-note strong { color: var(--tl-text); }
.tl-note a { color: var(--tl-accent-text); }
.tl-warn-text { color: var(--tl-warn); }

/* ── 表單 ── */
.tl-label { display: block; font-size: 0.8rem; font-weight: 700; color: var(--tl-muted); margin-bottom: 6px; }
.tl-input {
    width: 100%; box-sizing: border-box; padding: 10px 12px; border-radius: var(--tl-radius-sm);
    background: var(--tl-surface-2); border: 1px solid var(--tl-border); color: var(--tl-text);
    font: inherit; font-size: 0.95rem; outline: none; transition: border-color .15s, background .15s;
}
.tl-input:focus { border-color: var(--tl-accent); background: var(--tl-surface); }
.tl-input::placeholder { color: var(--tl-faint); }
input[type=range] { accent-color: var(--tl-accent); }
input[type=checkbox] { accent-color: var(--tl-accent); }

/* ── 按鈕 ── */
.tl-btn {
    display: inline-flex; align-items: center; justify-content: center; gap: 8px;
    padding: 11px 20px; border-radius: 12px; border: 1px solid var(--tl-border);
    background: var(--tl-surface-2); color: var(--tl-text);
    font: inherit; font-weight: 700; font-size: 0.95rem; cursor: pointer; text-decoration: none;
    transition: background .15s, border-color .15s, transform .15s, opacity .15s;
}
.tl-btn:hover:not(:disabled) { background: var(--tl-surface-3); transform: translateY(-1px); }
.tl-btn:disabled { opacity: .45; cursor: not-allowed; }
.tl-btn.primary { background: var(--tl-accent); border-color: transparent; color: var(--tl-on-accent); }
.tl-btn.primary:hover:not(:disabled) { background: var(--tl-accent-hover); }
.tl-btn.big { padding: 14px 26px; font-size: 1.02rem; }
.tl-btn.block { width: 100%; }

/* 分段選擇（模式切換等） */
.tl-seg { display: inline-flex; background: var(--tl-surface-2); border: 1px solid var(--tl-border); border-radius: 12px; padding: 4px; gap: 2px; }
.tl-seg button {
    border: none; background: transparent; color: var(--tl-muted); padding: 8px 14px; border-radius: 9px;
    font: inherit; font-weight: 700; font-size: 0.88rem; cursor: pointer;
}
.tl-seg button.active { background: var(--tl-surface); color: var(--tl-accent-text); box-shadow: var(--tl-shadow); }

/* 透明背景棋盤格 */
.tl-checker {
    background-color: var(--tl-checker-a);
    background-image:
        linear-gradient(45deg, var(--tl-checker-b) 25%, transparent 25%), linear-gradient(-45deg, var(--tl-checker-b) 25%, transparent 25%),
        linear-gradient(45deg, transparent 75%, var(--tl-checker-b) 75%), linear-gradient(-45deg, transparent 75%, var(--tl-checker-b) 75%);
    background-size: 16px 16px; background-position: 0 0, 0 8px, 8px -8px, -8px 0;
}

/* ── 提示訊息 ── */
.tl-toast {
    position: fixed; bottom: 28px; left: 50%; transform: translateX(-50%) translateY(20px);
    background: var(--tl-text); color: var(--tl-surface); padding: 10px 22px; border-radius: 50px;
    font-size: 0.88rem; font-weight: 700; z-index: 9999; opacity: 0; pointer-events: none;
    transition: opacity .3s, transform .3s; max-width: calc(100vw - 32px); text-align: center;
    box-shadow: var(--tl-shadow-lg);
}
.tl-toast.show { opacity: 1; transform: translateX(-50%) translateY(0); }

/* ── 頁尾 ── */
.tl-footer { text-align: center; padding: 28px 16px 40px; color: var(--tl-faint); font-size: 0.82rem; border-top: 1px solid var(--tl-border); }
.tl-footer a { color: var(--tl-muted); }