/* TrueBloom 桌布飛輪樣式（issue #1427）— 深色、RWD、結構圖示走 FA
   [2026-06-07 / Claude PR-B] 色彩收斂到 tl-tokens.css 語意 token（var(--tl-*) + 原值 fallback，
   即使 token 未載入也不破版）；補 :focus-visible、.wp-wrap min-width:0、body padding 騰出 fixed navbar、
   gallery grid 改 container query。每曲主色仍由卡片 inline --wp-color 覆寫。 */
:root { --wp-color: var(--tl-primary, #38BDF8); }
body { background:var(--tl-bg,#050B14); color:var(--tl-text,#E2E8F0); font-family:var(--tl-font-sans,'Noto Sans TC',system-ui,sans-serif); padding-top:80px; overflow-x:hidden; }
a { color:inherit; text-decoration:none; }
.wp-wrap { max-width:1180px; width:100%; min-width:0; box-sizing:border-box; margin:0 auto; padding:0 16px 80px; container-type:inline-size; } /* border-box：width:100% 含左右 padding，避免窄屏溢出（本檔無全域 box-sizing） */

/* hero / intro */
.wp-intro { text-align:center; padding:64px 16px 36px; position:relative; }
.wp-intro::before { content:''; position:absolute; inset:-10% 0 auto 0; height:520px; background:radial-gradient(circle at 50% 0,rgba(56,189,248,.16),rgba(168,85,247,.05) 45%,transparent 70%); pointer-events:none; z-index:0; }
.wp-intro > * { position:relative; z-index:1; }
.wp-eyebrow { display:inline-flex; align-items:center; gap:8px; font-weight:800; letter-spacing:.15em; text-transform:uppercase; font-size:.8rem; color:var(--tl-primary,#38BDF8); background:rgba(56,189,248,.1); border:1px solid rgba(56,189,248,.3); padding:6px 16px; border-radius:999px; margin-bottom:20px; }
.wp-intro h1 { font-size:clamp(2rem,5vw,3.25rem); font-weight:900; color:var(--tl-text,#F8FAFC); line-height:1.15; margin:0 0 18px; }
.wp-intro h1 .grad { background:linear-gradient(90deg,var(--tl-primary,#38BDF8),var(--tl-accent,#A855F7)); -webkit-background-clip:text; background-clip:text; color:transparent; }
.wp-intro p { max-width:680px; margin:0 auto; color:var(--tl-slate-300,#CBD5E1); font-size:1.05rem; line-height:1.8; }
.wp-intro-links { display:flex; flex-wrap:wrap; gap:12px; justify-content:center; margin-top:26px; }

/* gallery grid */
.wp-grid { display:grid; grid-template-columns:repeat(auto-fill,minmax(280px,1fr)); gap:22px; margin-top:8px; }
.wp-card { display:flex; flex-direction:column; background:rgba(15,23,42,.85); border:1px solid rgba(51,65,85,.8); border-radius:18px; overflow:hidden; transition:transform .3s,box-shadow .3s,border-color .3s; }
.wp-card:hover { transform:translateY(-6px); border-color:var(--wp-color); box-shadow:0 18px 40px rgba(0,0,0,.55); }
.wp-thumb-wrap { position:relative; aspect-ratio:16/9; background:#0B1220; }
.wp-thumb { width:100%; height:100%; object-fit:cover; display:block; }
.wp-thumb-empty { width:100%; height:100%; display:flex; align-items:center; justify-content:center; color:var(--tl-border,#334155); font-size:2.5rem; }
.wp-badge { position:absolute; top:10px; right:10px; background:rgba(5,11,20,.85); color:var(--tl-amber-400,#FBBF24); font-size:.72rem; font-weight:700; padding:4px 10px; border-radius:999px; border:1px solid rgba(251,191,36,.4); }
.wp-card-body { padding:18px 18px 22px; display:flex; flex-direction:column; gap:8px; }
.wp-card-title { font-size:1.15rem; font-weight:800; color:var(--tl-text,#F8FAFC); margin:0; }
.wp-card-mood { font-size:.9rem; color:var(--tl-text-muted,#94A3B8); margin:0; }
.wp-card-cta { margin-top:8px; font-weight:700; color:var(--wp-color); font-size:.92rem; }

/* empty state */
.wp-empty { text-align:center; padding:64px 20px; border:1px dashed rgba(71,85,105,.6); border-radius:20px; background:rgba(15,23,42,.5); margin-top:12px; }
.wp-empty i { font-size:3rem; color:var(--tl-primary,#38BDF8); margin-bottom:18px; display:block; }
.wp-empty h2 { color:var(--tl-slate-100,#F1F5F9); font-weight:800; margin:0 0 10px; }
.wp-empty p { color:var(--tl-text-muted,#94A3B8); max-width:520px; margin:0 auto; line-height:1.7; }
.wp-empty a { color:var(--tl-primary,#38BDF8); text-decoration:underline; }

/* buttons */
.wp-btn { display:inline-flex; align-items:center; gap:8px; font-weight:700; padding:12px 22px; border-radius:999px; border:1px solid transparent; cursor:pointer; font-size:.95rem; min-height:44px; transition:transform .2s,background .2s,border-color .2s; }
.wp-btn-primary { background:var(--tl-primary,#38BDF8); color:var(--tl-primary-contrast,#04121f); }
.wp-btn-primary:hover { background:var(--tl-primary-hover,#7dd3fc); transform:translateY(-2px); }
.wp-btn-ghost { background:rgba(148,163,184,.08); color:var(--tl-text,#E2E8F0); border-color:rgba(148,163,184,.35); }
.wp-btn-ghost:hover { border-color:var(--tl-primary,#38BDF8); color:var(--tl-white,#fff); }

/* 無障礙：鍵盤可見聚焦（#6） */
.wp-btn:focus-visible, .wp-card:focus-visible, .wp-dl:focus-visible, .wp-dev-chip:focus-visible,
.wp-back:focus-visible, .wp-credit-text:focus-visible, .wp-intro-links a:focus-visible,
.wp-credit a:focus-visible, .wp-license a:focus-visible, .wp-empty a:focus-visible {
  outline:2px solid var(--tl-ring,#38bdf8); outline-offset:2px; border-radius:8px;
}

/* detail page */
.wp-back { display:inline-flex; align-items:center; gap:8px; color:var(--tl-text-muted,#94A3B8); font-weight:700; margin:8px 0 22px; }
.wp-back:hover { color:var(--tl-white,#fff); }
.wp-hero { display:grid; grid-template-columns:1.15fr 1fr; gap:34px; align-items:start; }
.wp-hero-media { border-radius:20px; overflow:hidden; border:1px solid rgba(51,65,85,.8); background:#0B1220; aspect-ratio:16/9; }
.wp-hero-img { width:100%; height:100%; object-fit:cover; display:block; }
.wp-h1 { font-size:clamp(1.8rem,4vw,2.6rem); font-weight:900; color:var(--tl-text,#F8FAFC); margin:0 0 10px; }
.wp-mood { color:var(--wp-color); font-weight:700; margin:0 0 14px; }
.wp-desc { color:var(--tl-slate-300,#CBD5E1); line-height:1.8; margin:0 0 20px; }
.wp-credit { background:rgba(15,23,42,.8); border:1px solid rgba(51,65,85,.8); border-radius:16px; padding:18px; margin-bottom:16px; }
.wp-credit-label { display:block; font-size:.82rem; font-weight:700; color:var(--tl-text-muted,#94A3B8); margin-bottom:8px; }
.wp-credit-text { width:100%; background:#0B1220; color:var(--tl-text,#E2E8F0); border:1px solid var(--tl-border,#334155); border-radius:10px; padding:10px 12px; font-size:16px; resize:vertical; font-family:var(--tl-font-mono,ui-monospace,'JetBrains Mono',monospace); line-height:1.5; margin-bottom:12px; }
.wp-formats { margin-top:46px; }
.wp-section-h { font-size:1.4rem; font-weight:800; color:var(--tl-text,#F8FAFC); margin:0 0 22px; display:flex; align-items:center; gap:10px; }
.wp-fmt-group { margin-bottom:24px; }
.wp-fmt-title { font-size:1.05rem; font-weight:800; color:var(--tl-text,#E2E8F0); margin:0 0 12px; display:flex; align-items:center; gap:8px; }
.wp-fmt-title i { color:var(--wp-color); }
/* 裝置尺寸選擇器（issue #1726） */
.wp-dev-picker { display:flex; flex-wrap:wrap; gap:10px; margin:0 0 18px; }
.wp-dev-chip { display:inline-flex; align-items:center; gap:8px; background:rgba(148,163,184,.08); border:1px solid rgba(148,163,184,.3); color:var(--tl-slate-300,#CBD5E1); padding:10px 16px; border-radius:999px; font-weight:700; font-size:.9rem; min-height:44px; cursor:pointer; transition:border-color .2s,background .2s,color .2s; }
.wp-dev-chip i { color:var(--tl-text-muted,#94A3B8); transition:color .2s; }
.wp-dev-chip:hover { border-color:var(--wp-color); color:var(--tl-white,#fff); }
.wp-dev-chip.is-active { background:rgba(56,189,248,.15); border-color:var(--wp-color); color:var(--tl-white,#fff); }
.wp-dev-chip.is-active i { color:var(--wp-color); }
.wp-dl-row { display:flex; flex-wrap:wrap; gap:10px; }
.wp-dl { display:inline-flex; align-items:center; gap:8px; background:rgba(148,163,184,.08); border:1px solid rgba(148,163,184,.3); color:var(--tl-text,#E2E8F0); padding:10px 16px; border-radius:12px; font-weight:600; font-size:.9rem; min-height:44px; transition:border-color .2s,background .2s; }
.wp-dl:hover { border-color:var(--wp-color); background:rgba(56,189,248,.12); color:var(--tl-white,#fff); }
.wp-dl i { color:var(--wp-color); }
.wp-dl[data-dl="busy"] { opacity:.7; cursor:progress; }
/* KYC 下載閘（issue #1730）*/
.wp-badge-kyc { right:auto; left:10px; color:#67E8F9; border-color:rgba(56,189,248,.45); }
.wp-dl-locked { cursor:pointer; background:rgba(245,158,11,.08); border-color:rgba(245,158,11,.45); color:#FCD34D; font-family:inherit; }
.wp-dl-locked:hover { border-color:#FBBF24; background:rgba(245,158,11,.16); color:#FDE68A; }
.wp-dl-locked i { color:#FBBF24; }
.wp-kyc-gate { background:linear-gradient(135deg,rgba(14,165,233,.10),rgba(245,158,11,.06)); border:1px solid rgba(56,189,248,.35); border-radius:14px; padding:16px 20px; margin:0 0 22px; }
.wp-kyc-gate-h { margin:0 0 6px; font-size:1rem; font-weight:800; color:#67E8F9; display:flex; align-items:center; gap:8px; }
.wp-kyc-gate-p { margin:0 0 14px; font-size:.9rem; line-height:1.7; color:#CBD5E1; }
.wp-kyc-gate-cta { display:flex; flex-wrap:wrap; gap:10px; }
.wp-license { margin-top:30px; color:var(--tl-text-muted,#94A3B8); font-size:.9rem; line-height:1.7; background:rgba(15,23,42,.5); border-left:3px solid var(--wp-color); padding:14px 18px; border-radius:0 12px 12px 0; }
.wp-license a { color:var(--tl-primary,#38BDF8); text-decoration:underline; }
.wp-muted { color:var(--tl-text-muted,#94A3B8); }
.wp-notfound { text-align:center; padding:80px 20px; }
.wp-notfound i { font-size:3rem; color:var(--tl-primary,#38BDF8); margin-bottom:18px; display:block; }
.wp-notfound h2 { color:var(--tl-slate-100,#F1F5F9); margin:0 0 10px; }
.wp-notfound p { color:var(--tl-text-muted,#94A3B8); margin:0 0 24px; }

/* gallery 卡片依「內容容器」寬度斷行（#container；附 viewport @media 後備） */
@container (max-width:520px) {
  .wp-grid { grid-template-columns:1fr; }
}
@media (max-width:820px) {
  .wp-hero { grid-template-columns:1fr; gap:22px; }
}
@media (max-width:480px) {
  .wp-intro { padding:48px 12px 28px; }
  .wp-grid { grid-template-columns:1fr; }
  .wp-dl { width:100%; justify-content:flex-start; }
}