/* site_nav.css — 全站共用頁首(templates/includes/site_nav.html、2026-09-18)
 *
 * 自帶色票、不依賴各頁的 :root 變數(公開頁、資產頁、會員頁三種版型的變數名稱不同);全站一律深色、不跟系統深淺色。
 * 手機選單一律給不透明實底:Chrome 手機的自動深色會把透明底壓暗、字就看不到(2026-06-07 實案)。
 * 斷點 900px:以下收成「字標＋帳戶鈕＋選單鈕」,公開頁再多一排三項服務切換。
 */

.sn {
  /* 全站統一深色頁首(user 2026-09-18:三個服務的頁面底色各自配合服務色、頁首統一深色做區隔;取 OCCASIO 資產頁那一版) */
  --sn-bg: #0b1020; --sn-panel: #131c31; --sn-ink: #f3efe4; --sn-ink-2: #cfc7b2; --sn-ink-3: #8f8a7c;
  --sn-rule: #26314a; --sn-brand: #d4af37; --sn-brand-ink: #0b1020; --sn-soft: #d4af371f;
  --sn-per: #d4af37; --sn-occa: #60a5fa; --sn-yv: #2dc97a;
  position: sticky; top: 0; z-index: 200;
  background: var(--sn-bg); border-bottom: 1px solid var(--sn-rule);
  color: var(--sn-ink); font-family: "Noto Sans TC", "Inter", system-ui, sans-serif;   /* 與各頁內文同一順序 */
  color-scheme: dark;
}
.sn a { color: inherit; text-decoration: none; }
.sn [hidden] { display: none !important; }

.sn-bar {
  max-width: 1280px; margin: 0 auto; min-height: 60px;
  padding: 8px clamp(14px, 3vw, 40px);
  display: flex; align-items: center; gap: 14px;
}

/* 字標:桌機三個服務名都可點;手機只留目前服務一個(服務列會補上另外兩個) */
.sn-brand { font-family: "Audiowide", "Oswald", sans-serif; font-size: clamp(15px, 1.5vw, 18px);
  letter-spacing: .05em; line-height: 1; white-space: nowrap; display: inline-flex; align-items: center; }
.sn-wm { padding: 4px 0; }
.sn .sn-wm-per { color: var(--sn-per); }
.sn .sn-wm-occa { color: var(--sn-occa); }
.sn .sn-wm-yv { color: var(--sn-yv); }
.sn-plus { color: var(--sn-ink-3); font-size: .8em; margin: 0 4px; }

/* 桌機連結 */
.sn-links { display: flex; align-items: center; gap: 2px; margin-left: auto; }
.sn-links > a, .sn-dd-btn {
  font: inherit; font-size: 14px; font-weight: 600; color: var(--sn-ink-2);
  padding: 8px 12px; border-radius: 8px; background: none; border: 0; cursor: pointer; white-space: nowrap;
}
.sn-links > a:hover, .sn-dd-btn:hover, .sn-links > a[aria-current="page"], .sn-dd-btn.is-active {
  background: var(--sn-soft); color: var(--sn-brand);
}
.sn-dd { position: relative; }
.sn-dd-btn::after { content: "▾"; font-size: 10px; margin-left: 5px; opacity: .7; }
.sn-dd-menu {
  display: none; position: absolute; top: calc(100% + 6px); left: 0; min-width: 240px;
  background: var(--sn-panel); border: 1px solid var(--sn-rule); border-radius: 10px;
  box-shadow: 0 12px 30px rgba(0,0,0,.14); padding: 6px; flex-direction: column;
}
/* 2026-09-22 滑鼠從按鈕移到選單要跨過 6px 空隙、途中 :hover 斷掉選單就收(user:「還沒選到就自動收起來」)
   → 選單上方補一條透明橋、蓋住空隙;滑鼠真的離開整個下拉區才收。 */
.sn-dd-menu::before { content: ""; position: absolute; left: 0; right: 0; top: -8px; height: 8px; }
.sn-dd.open .sn-dd-menu { display: flex; }
@media (hover: hover) { .sn-dd:hover .sn-dd-menu { display: flex; } }
.sn-dd-menu a { padding: 9px 12px; border-radius: 6px; font-size: 14px; color: var(--sn-ink); }
.sn-dd-menu a:hover, .sn-dd-menu a[aria-current="page"] { background: var(--sn-soft); color: var(--sn-brand); }

/* 右側按鈕 */
.sn-actions { display: flex; align-items: center; gap: 8px; flex-shrink: 0; }
.sn-mode-member .sn-actions { margin-left: 12px; }
.sn-pill {
  font: inherit; font-size: 14px; font-weight: 700; line-height: 1; white-space: nowrap; cursor: pointer;
  display: inline-flex; align-items: center; min-height: 38px; padding: 0 14px;
  border-radius: 999px; border: 1px solid var(--sn-rule); background: var(--sn-panel); color: var(--sn-ink);
}
.sn-pill:hover { border-color: var(--sn-brand); color: var(--sn-brand); }
.sn-pill-brand { background: var(--sn-brand); border-color: var(--sn-brand); color: var(--sn-brand-ink) !important; }
.sn-pill-brand:hover { filter: brightness(1.08); }

.sn-burger {
  display: none; align-items: center; gap: 6px; min-height: 40px; padding: 0 12px 0 10px;
  border: 1px solid var(--sn-rule); border-radius: 999px; background: var(--sn-panel);
  color: var(--sn-ink); font: inherit; font-size: 14px; font-weight: 700; cursor: pointer;
}
.sn-burger-ico { display: inline-flex; flex-direction: column; gap: 3px; }
.sn-burger-ico i { display: block; width: 16px; height: 2px; border-radius: 1px; background: currentColor; transition: transform .2s, opacity .2s; }
.sn-burger[aria-expanded="true"] .sn-burger-ico i:nth-child(1) { transform: translateY(5px) rotate(45deg); }
.sn-burger[aria-expanded="true"] .sn-burger-ico i:nth-child(2) { opacity: 0; }
.sn-burger[aria-expanded="true"] .sn-burger-ico i:nth-child(3) { transform: translateY(-5px) rotate(-45deg); }

/* 登入狀態與身分:伺服器先依 Cookie 畫,site_nav.js 確認後改 data-* */
.sn[data-logged="1"] .sn-guest, .sn[data-logged="0"] .sn-member { display: none !important; }
.sn [data-need] { display: none !important; }
.sn[data-partner="1"]:not([data-admin="1"]) .sn-hide-partner { display: none !important; }   /* 合夥人唯讀:不顯示操作頁(資金調度) */
.sn[data-admin="1"] [data-need="admin"],
.sn[data-admin="1"] [data-need="partner"],   /* 2026-09-22 v2.29.95:管理員也要看得到 OCCASIO 正式(BingX)入口(原只給合夥人、站長自己看不到) */
.sn[data-partner="1"] [data-need="partner"],
.sn[data-per-partner="1"] [data-need="perpartner"],   /* 全部帳戶(唯讀):只給合夥人名單、管理者不顯示 */
.sn[data-hua="1"] [data-need="hua"] { display: flex !important; }
.sn[data-admin="1"] .sn-pill[data-need="admin"] { display: inline-flex !important; }
.sn[data-admin="1"] .sn-big[data-need="admin"] { display: flex !important; }

/* 代看提示條(在頁首裡、跟著頁首黏住)。
   🔴 不能把 display:flex 寫在元素的 style 屬性上:行內樣式會壓過 [hidden] → 對每個登入者都顯示(2026-09-17 實案)。 */
.viewas-bar { background: #5b21b6; color: #f5f3ff; padding: 8px 16px; font-size: 13.5px; line-height: 1.6;
  display: flex; flex-wrap: wrap; align-items: center; gap: 6px 10px; border-top: 1px solid #7c3aed; }
.viewas-bar .viewas-exit { margin-left: auto; color: #ddd6fe; text-decoration: underline; font-weight: 600; }

/* 手機服務列與選單(桌機不顯示) */
.sn-prod, .sn-drawer { display: none; }

@media (max-width: 900px) {
  .sn-bar { min-height: 56px; padding: 8px 14px; gap: 8px; }
  .sn-links, .sn-desk, .sn-cta { display: none !important; }
  .sn .sn-actions { margin-left: auto; }
  .sn-burger { display: inline-flex; }
  .sn-brand { font-size: 15px; }
  .sn-brand .sn-wm, .sn-brand .sn-plus { display: none; }
  .sn[data-cur="per"] .sn-brand .sn-wm-per,
  .sn[data-cur="occa"] .sn-brand .sn-wm-occa,
  .sn[data-cur="yv"] .sn-brand .sn-wm-yv { display: inline; }

  .sn-prod { display: grid; grid-template-columns: repeat(3, 1fr); border-top: 1px solid var(--sn-rule); }
  .sn-prod a {
    display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 1px;
    min-height: 46px; padding: 5px 4px; text-align: center; border-bottom: 3px solid transparent;
  }
  .sn-prod a + a { border-left: 1px solid var(--sn-rule); }
  .sn-prod b { font-family: "Audiowide", "Oswald", sans-serif; font-weight: 400; font-size: 12.5px; letter-spacing: .04em; }
  .sn-prod small { font-size: 11.5px; color: var(--sn-ink-3); font-weight: 600; }
  .sn-p-per b { color: var(--sn-per); }
  .sn-p-occa b { color: var(--sn-occa); }
  .sn-p-yv b { color: var(--sn-yv); }
  .sn-p-per[aria-current] { border-bottom-color: var(--sn-per); background: var(--sn-soft); }
  .sn-p-occa[aria-current] { border-bottom-color: var(--sn-occa); background: #60a5fa1a; }
  .sn-p-yv[aria-current] { border-bottom-color: var(--sn-yv); background: #2dc97a1a; }

  .sn-drawer {
    display: block; position: absolute; top: 100%; left: 0; right: 0;
    max-height: calc(100vh - 110px); max-height: calc(100dvh - 110px); overflow-y: auto; overscroll-behavior: contain;
    background: var(--sn-panel); border-bottom: 1px solid var(--sn-rule);
    box-shadow: 0 18px 36px rgba(0,0,0,.22); padding: 6px 16px 20px;
  }
  .sn-drawer[hidden] { display: none; }
}

.sn-sec { padding: 14px 0 6px; }
.sn-sec + .sn-sec { border-top: 1px solid var(--sn-rule); }
.sn-h { font-size: 12px; font-weight: 700; letter-spacing: .12em; color: var(--sn-ink-3); margin: 0 0 8px; display: flex; gap: 8px; align-items: baseline; }
.sn-who { letter-spacing: 0; font-weight: 600; color: var(--sn-ink-2); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.sn-acct-row { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; }
.sn-big {
  display: flex; align-items: center; justify-content: center; width: 100%; min-height: 46px; margin: 0 0 8px;
  border-radius: 12px; border: 1px solid var(--sn-rule); background: var(--sn-bg); color: var(--sn-ink);
  font: inherit; font-size: 15.5px; font-weight: 700; cursor: pointer;
}
.sn-acct-row .sn-big { margin: 0; }
.sn-big-brand { background: var(--sn-brand); border-color: var(--sn-brand); color: var(--sn-brand-ink) !important; }
.sn-list { display: flex; flex-direction: column; margin-bottom: 8px; }
.sn-list a { display: flex; align-items: center; min-height: 44px; padding: 0 10px; border-radius: 8px; font-size: 15px; font-weight: 600; color: var(--sn-ink); }
.sn-list a:active, .sn-list a[aria-current="page"] { background: var(--sn-soft); color: var(--sn-brand); }
.sn-list-sm a { min-height: 40px; font-size: 14px; font-weight: 500; color: var(--sn-ink-2); }
.sn-list .sn-a-per { border-left: 3px solid var(--sn-per); border-radius: 0 8px 8px 0; }
.sn-list .sn-a-yv { border-left: 3px solid var(--sn-yv); border-radius: 0 8px 8px 0; }
.sn-list .sn-a-occa { border-left: 3px solid var(--sn-occa); border-radius: 0 8px 8px 0; }
.sn-card {
  display: flex; flex-direction: column; gap: 2px; padding: 11px 14px; margin: 0 0 8px;
  border: 1px solid var(--sn-rule); border-left-width: 4px; border-radius: 10px; background: var(--sn-bg);
}
.sn-card b { font-size: 15px; }
.sn-card small { font-size: 12.5px; color: var(--sn-ink-3); }
.sn-c-per { border-left-color: var(--sn-per); } .sn-c-per b { color: var(--sn-per); }
.sn-c-occa { border-left-color: var(--sn-occa); } .sn-c-occa b { color: var(--sn-occa); }
.sn-c-yv { border-left-color: var(--sn-yv); } .sn-c-yv b { color: var(--sn-yv); }

@media (max-width: 360px) {
  .sn-pill { padding: 0 11px; font-size: 13.5px; }
  .sn-burger-txt { display: none; }
}