﻿/* =========================================================
   SunnyAudios V2.11 UI Consistency Layer
   目的：第一階段收斂用，統一前台營運頁、列表、搜尋、主題書單與 CTA 視覺。
   原則：只做樣式收斂，不改資料、不改播放器、不改 SSO 登入流程。
   ========================================================= */
:root{
  --sy-op-blue:#073763;
  --sy-op-blue-soft:#eef7ff;
  --sy-op-orange:#ff8200;
  --sy-op-orange-dark:#ef7d00;
  --sy-op-orange-soft:#fff7eb;
  --sy-op-text:#17233c;
  --sy-op-muted:#617083;
  --sy-op-line:rgba(7,55,99,.11);
  --sy-op-shadow:0 14px 34px rgba(7,55,99,.08);
  --sy-op-shadow-card:0 10px 26px rgba(7,55,99,.07);
  --sy-op-radius-xl:26px;
  --sy-op-radius-lg:20px;
  --sy-op-radius-md:14px;
  --sy-op-focus:0 0 0 3px rgba(255,130,0,.20);
}

/* 共用可及性與點擊回饋 */
.sy-theme-page a:focus,
.audiolist-v2 a:focus,
.sy-search-page a:focus,
.sy-theme-page button:focus,
.audiolist-v2 button:focus,
.sy-search-page button:focus,
.sy-theme-page input:focus,
.audiolist-v2 input:focus,
.sy-search-page input:focus{
  outline:none!important;
  box-shadow:var(--sy-op-focus)!important;
}
.sy-theme-page a,
.audiolist-v2 a,
.sy-search-page a{
  transition:transform .16s ease, box-shadow .16s ease, background .16s ease, border-color .16s ease, color .16s ease;
}

/* 前台 CTA 統一：主題頁、書單頁、搜尋頁、列表頁 */
.sy-theme-btn,
.sy-book-btn,
.al-btn,
.sy-btn-listen,
.sy-btn-detail,
.sy-btn-secondary,
.sy-empty-btn,
.sy-outline-link,
.sy-floating-apply{
  border-radius:999px!important;
  font-weight:900!important;
  text-decoration:none!important;
  letter-spacing:.01em;
}
.sy-theme-btn.primary,
.sy-book-btn.primary,
.al-btn-primary,
.sy-btn-listen,
.sy-floating-apply{
  background:var(--sy-op-orange)!important;
  color:#fff!important;
  border-color:var(--sy-op-orange)!important;
  box-shadow:0 10px 22px rgba(255,130,0,.22)!important;
}
.sy-theme-btn:not(.primary),
.sy-book-btn:not(.primary),
.al-btn-outline,
.sy-btn-detail,
.sy-btn-secondary,
.sy-empty-btn,
.sy-outline-link{
  background:#fff!important;
  color:var(--sy-op-orange-dark)!important;
  border:1px solid rgba(239,126,0,.34)!important;
}
.sy-theme-btn:hover,
.sy-book-btn:hover,
.al-btn:hover,
.sy-btn-listen:hover,
.sy-btn-detail:hover,
.sy-btn-secondary:hover,
.sy-empty-btn:hover,
.sy-outline-link:hover,
.sy-floating-apply:hover{
  transform:translateY(-1px);
  text-decoration:none!important;
}

/* 主題專區 / 主題書單：讓第一階段的策展頁看起來像同一套產品 */
.sy-theme-page{
  background:linear-gradient(180deg,#fffaf3 0,#ffffff 45%,#f7fbff 100%);
  color:var(--sy-op-text);
}
.sy-theme-container{
  width:min(1180px,calc(100% - 40px));
  margin:0 auto;
}
.sy-theme-hero{
  background:linear-gradient(135deg,#fff7eb 0,#eef7ff 100%)!important;
  border:1px solid rgba(239,126,0,.20)!important;
  border-radius:var(--sy-op-radius-xl)!important;
  box-shadow:var(--sy-op-shadow)!important;
}
.sy-theme-eyebrow{
  color:var(--sy-op-orange-dark)!important;
  font-weight:900!important;
  letter-spacing:.08em;
}
.sy-theme-hero h1,
.sy-theme-title,
.sy-book-title{
  color:var(--sy-op-blue)!important;
  font-weight:900!important;
}
.sy-theme-business-note{
  color:var(--sy-op-muted)!important;
  line-height:1.8!important;
}
.sy-theme-card,
.sy-book-card,
.sy-empty-box{
  border:1px solid var(--sy-op-line)!important;
  border-radius:var(--sy-op-radius-lg)!important;
  box-shadow:var(--sy-op-shadow-card)!important;
  background:#fff!important;
}
.sy-theme-card:hover,
.sy-book-card:hover{
  transform:translateY(-2px);
  box-shadow:0 16px 38px rgba(7,55,99,.11)!important;
}
.sy-book-meta,
.sy-theme-card-desc{
  color:var(--sy-op-muted)!important;
}

/* 列表頁：讓篩選、卡片、清單與 CTA 視覺一致 */
.audiolist-v2{
  background:#fffaf3;
}
.audiolist-v2 .al-page{
  color:var(--sy-op-text);
}
.audiolist-v2 .al-hero,
.audiolist-v2 .al-search-panel,
.audiolist-v2 .al-sidebar-card,
.audiolist-v2 .al-results-panel,
.audiolist-v2 .al-publisher-zone{
  border:1px solid var(--sy-op-line)!important;
  border-radius:var(--sy-op-radius-xl)!important;
  box-shadow:var(--sy-op-shadow-card)!important;
}
.audiolist-v2 .al-hero{
  background:linear-gradient(135deg,#fff7eb,#eef7ff)!important;
}
.audiolist-v2 .al-list-item,
.audiolist-v2 .al-card{
  border:1px solid var(--sy-op-line)!important;
  border-radius:var(--sy-op-radius-lg)!important;
  box-shadow:var(--sy-op-shadow-card)!important;
  background:#fff!important;
}
.audiolist-v2 .al-list-title a,
.audiolist-v2 .al-card-title a{
  color:var(--sy-op-blue)!important;
  font-weight:900!important;
}
.audiolist-v2 .al-list-desc,
.audiolist-v2 .al-card-desc,
.audiolist-v2 .al-list-meta,
.audiolist-v2 .al-card-meta{
  color:var(--sy-op-muted)!important;
}
.audiolist-v2 .al-search-input,
.audiolist-v2 .al-filter-field select{
  border:1px solid rgba(7,55,99,.15)!important;
  border-radius:14px!important;
}

/* 搜尋頁：讓搜尋結果、篩選與空狀態一致 */
.sy-search-page,
.sy-guide-mode{
  background:#fffaf3;
  color:var(--sy-op-text);
}
.sy-search-hero,
.sy-search-refine,
.sy-search-sidebar,
.sy-search-results,
.sy-search-guide,
.sy-empty-result{
  border:1px solid var(--sy-op-line)!important;
  border-radius:var(--sy-op-radius-xl)!important;
  box-shadow:var(--sy-op-shadow-card)!important;
  background:#fff!important;
}
.sy-search-hero{
  background:linear-gradient(135deg,#fff7eb,#eef7ff)!important;
}
.sy-search-hero h1,
.sy-results-head h2,
.sy-sidebar-title,
.sy-result-card h3{
  color:var(--sy-op-blue)!important;
  font-weight:900!important;
}
.sy-result-card{
  border:1px solid var(--sy-op-line)!important;
  border-radius:var(--sy-op-radius-lg)!important;
  box-shadow:0 8px 22px rgba(7,55,99,.055)!important;
  background:#fff!important;
}
.sy-result-meta,
.sy-search-summary,
.sy-results-note{
  color:var(--sy-op-muted)!important;
}
.sy-search-tab.is-active,
.sy-filter-link.is-active,
.sy-tag{
  background:var(--sy-op-orange-soft)!important;
  color:var(--sy-op-orange-dark)!important;
  border-color:rgba(239,126,0,.30)!important;
}

/* 行動版一致化：第一階段先確保不跑版、按鈕可點 */
@media(max-width:860px){
  .sy-theme-container{width:min(100% - 28px,1180px);}
  .sy-theme-actions,
  .sy-book-actions,
  .al-list-actions,
  .al-card-actions,
  .sy-result-actions,
  .sy-search-bottom-actions,
  .sy-summary-actions{
    gap:9px!important;
  }
  .sy-theme-btn,
  .sy-book-btn,
  .al-btn,
  .sy-btn-listen,
  .sy-btn-detail,
  .sy-btn-secondary,
  .sy-empty-btn{
    min-height:40px;
    padding-left:14px!important;
    padding-right:14px!important;
  }
  .audiolist-v2 .al-content-layout,
  .sy-search-layout{
    display:block!important;
  }
  .audiolist-v2 .al-sidebar-card,
  .sy-search-sidebar{
    margin-bottom:16px!important;
  }
}
@media(max-width:520px){
  .sy-theme-hero,
  .audiolist-v2 .al-hero,
  .sy-search-hero{
    border-radius:20px!important;
    padding:20px!important;
  }
  .sy-theme-hero h1,
  .audiolist-v2 .al-hero h1,
  .sy-search-hero h1{
    font-size:26px!important;
    line-height:1.35!important;
  }
}
