/* 站台基本樣式（bootstrap 檔案未就位前的最小可用樣式；深色主題與圖鑑一致） */
:root { --bg:#16181d; --panel:#1f232b; --text:#e8eaed; --muted:#9aa0a8;
        --accent:#ffcb05; --line:#333a46; }
body { margin:0; background:var(--bg); color:var(--text);
       font-family:"Hiragino Sans","Noto Sans JP","PingFang TC",sans-serif; }
a { color:var(--accent); text-decoration:none; }
a:hover { text-decoration:underline; }

/* Header（版式參照 HAKU eSHOP：上細條靠右選單、主列＝品牌+大搜尋框、下方熱搜列） */
.shop-header { background:var(--panel); border-bottom:1px solid var(--line); }
.shop-header .container { max-width:1200px; margin:0 auto; padding:0 20px; }
/* 上層細條：語系＋會員連結靠右 */
.shop-header-top { background:#101216; border-bottom:1px solid var(--line); font-size:13.5px; }
.shop-header-top .container { display:flex; align-items:center; min-height:38px; }
.shop-header-top-nav { list-style:none; display:flex; gap:22px; margin:0 0 0 auto; padding:0;
       align-items:center; }
/* 左上快速連結（quick_links 表管理） */
.shop-quick-links { list-style:none; display:flex; gap:22px; margin:0; padding:0;
       align-items:center; }
.shop-quick-links a { color:#c7ccd4; }
.shop-quick-links a:hover { color:var(--accent); text-decoration:none; }
.shop-quick-links i { font-size:11px; opacity:.75; margin-right:2px; }
.shop-header-top-nav a { color:#c7ccd4; }
.shop-header-top-nav a:hover { color:#fff; text-decoration:none; }
/* 主列：品牌靠左、搜尋框置中放大 */
.shop-header-main .container { display:flex; align-items:flex-start; gap:36px;
       padding-top:18px; padding-bottom:14px; }
.navbar-brand { font-weight:800; color:var(--accent); font-size:23px; white-space:nowrap;
       line-height:46px; }
.navbar-brand:hover { text-decoration:none; }
.shop-search-wrap { flex:1; }   /* 延伸填滿 container 至最右緣 */
.shop-search { display:flex; }
.shop-search-input { flex:1; min-width:0; padding:11px 16px; font-size:15.5px;
       border:1.5px solid var(--line); border-right:none; border-radius:8px 0 0 8px;
       background:var(--panel2); color:var(--text); }
.shop-search-input:focus { outline:none; border-color:var(--accent); }
.shop-search-btn { padding:0 22px; border:none; border-radius:0 8px 8px 0;
       background:var(--accent); color:#333; font-size:16px; cursor:pointer; }
.shop-search-btn:hover { filter:brightness(1.08); }
/* 篩選切換鈕（搜尋鈕右側）＋ 展開的篩選列（輸入框與熱搜之間） */
.shop-filter-btn { margin-left:10px; padding:0 15px; border-radius:8px; white-space:nowrap;
       border:1.5px solid var(--line); background:var(--panel2); color:var(--muted);
       font-size:16px; cursor:pointer; }
.shop-filter-btn:hover { border-color:var(--accent); color:var(--accent); }
.shop-filter-btn.on { border-color:var(--accent); color:var(--accent); }
.shop-filters { margin-top:10px; }

/* 搜尋框下方：今日熱搜卡片 */
.shop-hot-cards { display:flex; flex-wrap:wrap; gap:4px 18px; margin-top:9px;
       font-size:13.5px; min-height:20px; align-items:center; }
.shop-hot-cards .hot-label { color:var(--muted); font-size:12.5px; }
.shop-hot-cards .hot-label i { color:#ff8a4b; margin-right:3px; }
.shop-hot-cards a { color:#c7ccd4; }
.shop-hot-cards a:hover { color:var(--accent); text-decoration:none; }

/* Footer（間距與字級參照 HAKU eSHOP 版式） */
.shop-footer { background:var(--panel); border-top:1px solid var(--line);
       margin-top:56px; padding:52px 0 30px; font-size:15px; }
.shop-footer .container { max-width:1200px; margin:0 auto; padding:0 40px; }
.shop-footer .row { display:flex; flex-wrap:wrap; gap:32px 56px; }
.shop-footer .row > div { flex:1 1 220px; }
.shop-footer h6 { color:var(--text) !important; margin:0 0 20px; font-size:17px;
       font-weight:700; }
.shop-footer ul { list-style:none; margin:0; padding:0; }
.shop-footer li { margin-bottom:12px; }
.shop-footer li:last-child { margin-bottom:0; }
.shop-footer a { color:var(--muted); }
.shop-footer a:hover { color:var(--text); text-decoration:none; }
.shop-footer p { margin:0 0 12px; }
.shop-footer .small { color:var(--muted); font-size:15px; line-height:1.7; }
.shop-footer .border-top { border-top:1px solid var(--line); margin-top:40px; padding-top:26px; }
.shop-footer .text-center { text-align:center; font-size:15px; }
/* 頁尾：語系＋幣別切換 */
.footer-switches { display:flex; gap:20px; align-items:center; margin-top:36px; }
.footer-switches ul { list-style:none; margin:0; padding:0; }
.footer-switches .nav-link { color:var(--muted); font-size:14px; }
.footer-switches .nav-link:hover { color:var(--text); text-decoration:none; }
.footer-switches select { padding:7px 12px; border-radius:8px; border:1px solid var(--line);
       background:var(--panel2); color:var(--text); font-size:13.5px; }
.footer-switches .dropdown-menu { top:auto; bottom:100%; }   /* 靠近頁底，往上展開 */

/* ===== 會員／認證表單 ===== */
.auth-wrap { display:flex; justify-content:center; padding:48px 16px 80px; }
.auth-card { width:100%; max-width:420px; background:var(--panel);
       border:1px solid var(--line); border-radius:14px; padding:28px 30px 24px; }
.auth-card h2 { margin:0 0 18px; color:var(--accent); font-size:20px; }
.auth-card label { display:block; margin:14px 0 6px; font-size:13.5px; color:var(--muted); }
.auth-card label .req { color:#ff5b5b; }
.auth-card input[type=email], .auth-card input[type=password], .auth-card input[type=text] {
       width:100%; box-sizing:border-box; padding:10px 12px; border-radius:8px;
       border:1px solid var(--line); background:var(--panel2); color:var(--text); font-size:15px; }
.auth-card input:focus { outline:none; border-color:var(--accent); }
.auth-card button[type=submit] { width:100%; margin-top:20px; padding:11px;
       border:none; border-radius:8px; background:var(--accent); color:#333;
       font-size:15px; font-weight:800; cursor:pointer; }
.auth-card button[type=submit]:hover { filter:brightness(1.08); }
.auth-links { margin-top:16px; font-size:13.5px; color:var(--muted); text-align:center; }
.auth-note { margin-top:14px; font-size:12.5px; color:var(--muted); line-height:1.6; }
.auth-flash { padding:10px 14px; border-radius:8px; font-size:13.5px; margin-bottom:6px;
       line-height:1.6; }
.auth-flash.ok  { background:rgba(111,207,124,.12); border:1px solid #3c6e44; color:#6fcf7c; }
.auth-flash.err { background:rgba(255,91,91,.10);  border:1px solid #7e3b3b; color:#ff8a8a; }
/* 會員中心 */
.member-card { max-width:520px; }
.member-row { display:flex; gap:14px; padding:11px 2px; border-bottom:1px solid var(--line);
       font-size:14.5px; align-items:center; }
.member-row .k { flex:0 0 84px; color:var(--muted); font-size:13px; }
.badge-ok { display:inline-block; padding:2px 10px; border-radius:10px; font-size:12px;
       font-weight:700; background:rgba(111,207,124,.12); border:1px solid #3c6e44; color:#6fcf7c; }
.badge-no { display:inline-block; padding:2px 10px; border-radius:10px; font-size:12px;
       background:var(--panel2); border:1px solid var(--line); color:var(--muted); }

/* ===== 手機版（≤720px）：header 堆疊式排版（參考 HAKU eSHOP） ===== */
@media (max-width: 720px) {
  /* 上條：快速連結＋會員連結緊湊、可換行不爆版 */
  .shop-header-top { font-size:12.5px; }
  .shop-header-top .container { flex-wrap:wrap; gap:4px 14px; min-height:34px;
       padding:5px 14px; }
  .shop-quick-links { gap:14px; }
  .shop-header-top-nav { gap:14px; }
  /* 主列：品牌一行 → 搜尋框滿版一行 → 熱搜換行 */
  .shop-header-main .container { flex-direction:column; align-items:stretch;
       gap:8px; padding:10px 14px 12px; }
  .navbar-brand { font-size:20px; line-height:1.3; }
  .shop-search-wrap { width:100%; }
  .shop-search-input { padding:10px 12px; font-size:15px; }
  .shop-search-btn { padding:0 16px; }
  .shop-filter-btn { margin-left:8px; padding:0 12px; font-size:13px; }
  .shop-hot-cards { gap:3px 12px; font-size:12.5px; margin-top:7px; }
  /* 頁尾 */
  .shop-footer { padding:32px 0 22px; }
  .shop-footer .container { padding:0 20px; }
  .footer-switches { margin-top:24px; }
}

/* dropdown（無 bootstrap JS 時退化為 hover 展開） */
.dropdown { position:relative; }
.dropdown-menu { display:none; position:absolute; right:0; top:100%; background:var(--panel);
       border:1px solid var(--line); border-radius:8px; padding:6px 0; margin:0;
       list-style:none; min-width:140px; z-index:100; }
.dropdown:hover .dropdown-menu { display:block; }
.dropdown-menu a { display:block; padding:5px 14px; color:var(--muted); }
.dropdown-menu a.active, .dropdown-menu a:hover { color:var(--accent); text-decoration:none; }