/* ==========================================================================
   港股財報庫 — modernised dark theme
   --------------------------------------------------------------------------
   Design goals:
   - Soft dark surface (deep neutral) with cyan/gold accents
   - Inter + system font stack for crisp typography
   - Cards with subtle elevation + hover lift
   - Sticky nav with backdrop blur
   - Modern pill / chip / button styles
   ========================================================================== */

:root {
  /* Surfaces — modern dark neutral */
  --bg:        #0e1116;   /* page background */
  --bg-2:      #161b22;   /* card / surface */
  --panel:     #1c222c;   /* panel */
  --line:      #2a3140;   /* divider */
  --line-2:    #232a36;   /* subtle inner divider */

  /* Text */
  --ink:       #e6edf3;
  --ink-2:     #b3bdc7;
  --muted:     #7d8590;

  /* Brand accents */
  --gold:      #f0b85b;   /* primary accent */
  --gold-2:    #d49a3a;
  --cyan:      #6bd0e0;   /* secondary accent */
  --cyan-2:    #4cb3c4;

  /* Function identity colors (2026-10-15 fn-colors) — soft static, brighter hover */
  --fn-5s:     #6bd0e0;   /* 4C · cyan */
  --fn-brand:  #5fc6b8;   /* 財報庫 · teal/藍綠 */
  --fn-live:   #79d07a;   /* 最新財報 · green/青綠 */
  --fn-market: #e8956a;   /* 市場 · orange */
  --fn-calc:   #b48cd6;   /* 計算器 · purple */
  --fn-latest: #f0b85b;   /* 上市／派息 · gold */
  --fn-inst:   #8fb6ff;   /* 公開持倉 · blue */
  --fn-learn:  #e88aad;   /* 學習資源 · rose */
  --fn-more:   #a8b0ba;   /* 更多 · soft gray */

  /* Status */
  --good:      #79d07a;
  --teal:      #5fc6b8;
  --info:      #8fb6ff;
  --warn:      #f0b85b;
  --bad:       #f08585;
  --hot:       #f06b6b;
  --ink-on:    #0d1117;

  /* Shadow */
  --shadow-sm: 0 1px 2px rgba(0, 0, 0, 0.32);
  --shadow-md: 0 4px 12px rgba(0, 0, 0, 0.45);
  --shadow-lg: 0 8px 24px rgba(0, 0, 0, 0.55);
  --shadow-xl: 0 16px 40px rgba(0, 0, 0, 0.65);
  --shadow-glow-gold: 0 0 0 1px rgba(240, 184, 91, 0.25), 0 4px 16px rgba(240, 184, 91, 0.18);
  --shadow-glow-cyan: 0 0 0 1px rgba(107, 208, 224, 0.25), 0 4px 16px rgba(107, 208, 224, 0.18);

  /* Radius */
  --r-sm: 8px;
  --r-md: 12px;
  --r-lg: 16px;
  --r-xl: 22px;

  color-scheme: dark;
}

* { box-sizing: border-box; }

html, body {
  margin: 0;
  padding: 0;
  background: var(--bg);
  color: var(--ink);
  font: 15px/1.55 "Inter", -apple-system, BlinkMacSystemFont, "Segoe UI",
        "Noto Sans CJK TC", "Noto Sans CJK HK", "Source Han Sans TC",
        "PingFang TC", "Microsoft JhengHei", sans-serif;
  font-feature-settings: "ss01", "cv11";
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

body {
  background:
    radial-gradient(900px 600px at 10% -10%, rgba(240, 184, 91, 0.05), transparent 60%),
    radial-gradient(800px 500px at 110% 10%, rgba(107, 208, 224, 0.05), transparent 60%),
    var(--bg);
  min-height: 100vh;
}

a {
  color: var(--gold);
  text-decoration: none;
  transition: color 0.18s ease;
}
a:hover { color: var(--cyan); }

h1, h2, h3 {
  font-weight: 700;
  letter-spacing: -0.01em;
  color: var(--ink);
}
h1 { font-size: 1.55rem; margin: 0.2rem 0 0.4rem; }
h2 { font-size: 1.0rem; margin: 0 0 0.5rem; color: var(--ink-2); }

/* ==========================================================================
   Top nav — sticky, glassmorphic
   ========================================================================== */
/* v2 (Lee 2026-10-14): .top class is now overridden by #topbar ID rule
   (which uses position: fixed + !important). The legacy .top class
   is kept for backward compat but is no-op'd by ID specificity.
   The original glassmorphic look is preserved via #topbar. */
.top {
  /* No-op: all visual properties now set by #topbar */
  position: static;  /* allow #topbar's !important to win */
  padding: 0;
  background: transparent;
  backdrop-filter: none;
}
/* ==========================================================================
   Live filings (HKEX 披露易 timeline)
   ========================================================================== */
.live-page { max-width: 760px; margin: 0 auto; }

/* Header row with auto-refresh toggle */
.live-header {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  flex-wrap: wrap;
  gap: 10px;
}
.live-header h1 { margin: 6px 0; }
.live-auto-refresh {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  font-size: 12px;
  color: var(--muted);
  cursor: pointer;
  user-select: none;
}
.live-auto-refresh input {
  width: 14px;
  height: 14px;
  cursor: pointer;
  accent-color: var(--gold);
}

/* Date group header (e.g. "2026-10-08 · 3 條") */
.live-day-group { margin-top: 14px; }
.live-day-header {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 4px 0 6px;
  border-bottom: 1px solid var(--line-2);
  margin-bottom: 8px;
  position: sticky;
  top: 0;
  background: var(--bg);
  z-index: 1;
}
.live-day-date {
  font-size: 13px;
  font-weight: 700;
  color: var(--gold);
  font-variant-numeric: tabular-nums;
  letter-spacing: 0.01em;
}
.live-day-count {
  font-size: 11px;
  color: var(--muted);
  background: var(--bg-2);
  padding: 2px 8px;
  border-radius: 999px;
  border: 1px solid var(--line-2);
}

/* Period quick filter (separate row) */
.live-filters.live-period {
  margin-top: 12px;
  padding: 8px 0;
  border-bottom: 1px dashed var(--line-2);
}
.live-filters {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  align-items: center;
  margin-top: 12px;
}
.live-filter-group {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  align-items: center;
}
.live-filter-label {
  font-size: 12px;
  color: var(--muted);
  font-weight: 600;
  margin-right: 4px;
}
.live-chip {
  display: inline-flex;
  align-items: center;
  padding: 5px 10px;
  border-radius: 999px;
  background: var(--bg-2);
  border: 1px solid var(--line-2);
  color: var(--ink-2);
  font-size: 12px;
  font-weight: 600;
  text-decoration: none;
  white-space: nowrap;
  transition: background 0.12s ease, border-color 0.12s ease;
}
.live-chip:hover {
  background: var(--panel);
  border-color: var(--cyan);
  text-decoration: none;
}
.live-chip-on {
  background: var(--cyan);
  border-color: var(--cyan);
  color: var(--ink-on);
}
.live-search {
  display: flex;
  gap: 6px;
  margin-left: auto;
}
.live-search input {
  padding: 5px 10px;
  border-radius: 6px;
  background: var(--bg-2);
  border: 1px solid var(--line-2);
  color: var(--ink);
  font-size: 12px;
  width: 180px;
  font-family: inherit;
}
.live-search button {
  padding: 5px 12px;
  border-radius: 6px;
  background: var(--gold);
  color: var(--ink-on);
  border: none;
  font-weight: 700;
  font-size: 12px;
  cursor: pointer;
}

/* Timeline (left time, right card) */
.live-timeline {
  list-style: none;
  margin: 0;
  padding: 0;
  position: relative;
}
.live-timeline::before {
  content: "";
  position: absolute;
  left: 60px;
  top: 8px;
  bottom: 8px;
  width: 2px;
  background: var(--line-2);
}
.live-item {
  display: grid;
  grid-template-columns: 60px 24px 1fr;
  gap: 0;
  margin: 0 0 10px;
  align-items: start;
}
.live-time {
  text-align: right;
  padding-right: 8px;
  padding-top: 8px;
  font-variant-numeric: tabular-nums;
}
.live-date {
  font-size: 12px;
  color: var(--ink);
  font-weight: 700;
}
.live-hour {
  font-size: 12px;
  color: var(--muted);
  font-variant-numeric: tabular-nums;
}
.live-dot {
  width: 12px;
  height: 12px;
  border-radius: 50%;
  background: var(--gold);
  border: 2px solid var(--bg);
  margin: 10px auto 0;
  position: relative;
  z-index: 1;
}
.live-item.kind-annual .live-dot    { background: var(--good); }
.live-item.kind-interim .live-dot   { background: var(--cyan); }
.live-item.kind-quarterly .live-dot { background: #b48cd6; }
.live-item.kind-results .live-dot   { background: var(--gold); }
.live-card {
  background: var(--bg-2);
  border: 1px solid var(--line);
  border-radius: var(--r-md);
  padding: 10px 12px;
  margin-left: 8px;
  transition: border-color 0.12s ease;
}
.live-card:hover { border-color: var(--gold); }
.live-card-head {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  align-items: baseline;
  margin-bottom: 4px;
}
.live-code {
  font-size: 13px;
  font-weight: 700;
  color: var(--gold);
  font-variant-numeric: tabular-nums;
  text-decoration: none;
}
.live-code:hover { color: var(--cyan); }
.live-name { font-size: 13px; color: var(--ink); font-weight: 600; }
.live-kind {
  font-size: 11px;
  font-weight: 700;
  padding: 2px 7px;
  border-radius: 999px;
  background: var(--bg);
  border: 1px solid var(--line-2);
  color: var(--muted);
}
.live-kind-annual    { background: rgba(121,208,122,0.15); color: var(--good); border-color: rgba(121,208,122,0.4); }
.live-kind-interim   { background: rgba(122,211,224,0.15); color: #7ad3e0; border-color: rgba(122,211,224,0.4); }
.live-kind-quarterly { background: rgba(180,140,214,0.15); color: #b48cd6; border-color: rgba(180,140,214,0.4); }
.live-kind-results   { background: rgba(240,184,91,0.15); color: var(--gold); border-color: rgba(240,184,91,0.4); }
.live-title {
  display: block;
  font-size: 14px;
  font-weight: 600;
  color: var(--ink);
  text-decoration: none;
  margin: 2px 0 6px;
  line-height: 1.4;
}
.live-title:hover { color: var(--gold); }
.live-card-meta {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  font-size: 12px;
  color: var(--muted);
  align-items: center;
}
.live-link { color: var(--cyan); text-decoration: none; }
.live-link:hover { text-decoration: underline; }
.live-size { color: var(--muted); }
.live-link-pdf { color: var(--good); font-weight: 600; }
.live-link-hkex { color: var(--gold); font-weight: 600; }

/* Detail page */
.live-detail {
  background: var(--bg-2);
  border: 1px solid var(--line);
  border-radius: var(--r-md);
  padding: 16px;
  margin-top: 12px;
}
.live-detail-head h1 {
  font-size: 22px;
  margin: 6px 0;
  line-height: 1.3;
}
.live-detail-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin: 14px 0;
}

/* 5S snapshot embed (in live filings detail) */
.live-5s-embed {
  background: var(--bg);
  border: 1px solid var(--line-2);
  border-radius: var(--r-md);
  padding: 12px;
  margin: 16px 0;
}
.live-5s-embed h2 {
  font-size: 14px;
  margin: 0 0 10px;
  color: var(--gold);
  letter-spacing: 0.02em;
}
.live-5s-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 10px;
  margin-bottom: 12px;
}
.live-5s-stat {
  background: var(--bg-2);
  border: 1px solid var(--line-2);
  border-radius: 6px;
  padding: 8px 10px;
  display: flex;
  flex-direction: column;
  gap: 2px;
}
.live-5s-stat-label {
  font-size: 11px;
  color: var(--muted);
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.04em;
}
.live-5s-stat-value {
  font-size: 16px;
  font-weight: 700;
  color: var(--ink);
  font-variant-numeric: tabular-nums;
}
.live-5s-stat-value small {
  font-size: 11px;
  font-weight: 400;
  color: var(--muted);
  margin-left: 4px;
}
.live-5s-badge {
  display: inline-block;
  font-size: 11px;
  font-weight: 700;
  padding: 2px 8px;
  border-radius: 999px;
  margin-right: 4px;
}
.live-5s-review { background: rgba(240, 184, 91, 0.15); color: var(--gold); border: 1px solid rgba(240, 184, 91, 0.4); }
.live-5s-priced { background: rgba(107, 208, 224, 0.15); color: #7ad3e0; border: 1px solid rgba(107, 208, 224, 0.4); }
.live-5s-chips {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  margin-top: 4px;
}
@media (max-width: 540px) {
  .live-5s-grid { grid-template-columns: 1fr; }
  .live-5s-chips { gap: 4px; }
}
.live-cta {
  display: inline-flex;
  align-items: center;
  padding: 8px 14px;
  border-radius: 8px;
  font-weight: 700;
  font-size: 13px;
  text-decoration: none;
  border: 1px solid var(--line-2);
  background: var(--bg);
  color: var(--ink);
}
.live-cta:hover { background: var(--panel); text-decoration: none; }
.live-cta-pdf { background: var(--good); color: var(--ink-on); border-color: var(--good); }
.live-cta-hkex { background: var(--gold); color: var(--ink-on); border-color: var(--gold); }
.live-cta-5s { background: var(--cyan); color: var(--ink-on); border-color: var(--cyan); }
.live-detail-embed h2 { font-size: 14px; margin: 0 0 8px; color: var(--muted); }
.live-pdf-iframe {
  width: 100%;
  height: 70vh;
  border: 1px solid var(--line);
  border-radius: var(--r-sm);
  background: var(--bg);
}
.live-detail-meta {
  display: grid;
  grid-template-columns: max-content 1fr;
  gap: 6px 16px;
  margin-top: 16px;
  font-size: 12px;
  color: var(--ink-2);
}
.live-detail-meta dt { color: var(--muted); font-weight: 600; }
.live-detail-meta dd { margin: 0; word-break: break-all; }
.live-detail-meta a { color: var(--cyan); }

@media (min-width: 720px) {
  .live-pdf-iframe { height: 80vh; }
}

/* ==========================================================================
   Latest news (新分類視圖: 新股上市 / 業績 / 派息 / 供股)
   ========================================================================== */
.latest-page { max-width: 760px; margin: 0 auto; }
.latest-header {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  flex-wrap: wrap;
  gap: 10px;
}
.latest-header h1 { margin: 6px 0; }
.latest-sidebar-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 40px;
  height: 40px;
  border-radius: 8px;
  background: var(--bg-2);
  border: 1px solid var(--line-2);
  color: var(--ink);
  font-size: 20px;
  cursor: pointer;
  flex-shrink: 0;
}
.latest-sidebar-btn:hover { background: var(--panel); border-color: var(--gold); }

/* Sidebar drawer */
.latest-sidebar {
  position: fixed;
  top: 0;
  left: -300px;
  width: 280px;
  max-width: 80vw;
  height: 100vh;
  background: var(--bg-2);
  border-right: 1px solid var(--line);
  z-index: 200;
  transition: left 0.3s ease;
  overflow-y: auto;
  box-shadow: 4px 0 20px rgba(0, 0, 0, 0.3);
}
.latest-sidebar.open { left: 0; }
.latest-sidebar-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 14px 16px;
  border-bottom: 1px solid var(--line-2);
  position: sticky;
  top: 0;
  background: var(--bg-2);
  z-index: 1;
}
.latest-sidebar-head h3 {
  margin: 0;
  font-size: 16px;
  color: var(--gold);
  letter-spacing: 0.02em;
}
.latest-sidebar-close {
  width: 32px;
  height: 32px;
  border-radius: 6px;
  background: transparent;
  border: 1px solid var(--line-2);
  color: var(--ink);
  font-size: 16px;
  cursor: pointer;
}
.latest-sidebar-close:hover { background: var(--bad); border-color: var(--bad); color: var(--ink-on); }
.latest-sidebar-nav {
  display: flex;
  flex-direction: column;
  padding: 8px 12px;
}
.latest-sidebar-nav a {
  display: block;
  padding: 12px 14px;
  border-radius: 8px;
  color: var(--ink-2);
  text-decoration: none;
  font-size: 14px;
  font-weight: 600;
  border-bottom: 1px solid var(--line-2);
}
.latest-sidebar-nav a:last-child { border-bottom: none; }
.latest-sidebar-nav a:hover { background: var(--panel); color: var(--ink); }

/* Sidebar group header (時間 / 分類) */
.latest-sidebar-group {
  font-size: 11px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  color: var(--gold);
  padding: 14px 14px 4px;
  border-bottom: none;
}
.latest-sidebar-group:not(:first-child) {
  border-top: 1px solid var(--line-2);
  margin-top: 6px;
}

/* Period link (sidebar) — orange highlight when active */
.latest-period-link.on {
  background: linear-gradient(135deg, rgba(230, 163, 112, 0.15), rgba(240, 184, 91, 0.08));
  color: #e6a370;
  border-left: 3px solid #e6a370;
  padding-left: 11px;
}

/* Page-header period tag (next to "📊 最新資訊" h1) */
.latest-period-tag {
  display: inline-block;
  font-size: 13px;
  font-weight: 700;
  padding: 3px 10px;
  border-radius: 999px;
  background: linear-gradient(135deg, rgba(230, 163, 112, 0.25), rgba(240, 184, 91, 0.15));
  color: #e6a370;
  border: 1px solid rgba(230, 163, 112, 0.4);
  margin-left: 10px;
  vertical-align: middle;
  letter-spacing: 0.02em;
}

/* Header action buttons (Share / CSV) */
.latest-header-actions {
  display: flex;
  align-items: center;
  gap: 8px;
  flex-shrink: 0;
}
.latest-action-btn {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  height: 36px;
  padding: 0 10px;
  border-radius: 8px;
  background: var(--bg-2);
  border: 1px solid var(--line-2);
  color: var(--ink-2);
  font-size: 12px;
  font-weight: 600;
  text-decoration: none;
  cursor: pointer;
  transition: all 0.15s;
}
.latest-action-btn svg { display: block; }
.latest-action-btn:hover { background: var(--panel); border-color: var(--gold); color: var(--ink); }
.latest-action-share.on { background: rgba(121, 208, 122, 0.18); border-color: var(--good); color: var(--good); }
.latest-action-export { color: var(--cyan); border-color: rgba(122, 211, 224, 0.4); }
.latest-action-export:hover { background: rgba(122, 211, 224, 0.15); border-color: var(--cyan); color: var(--ink); }
@media (max-width: 480px) {
  .latest-action-label { display: none; }
  .latest-action-btn { width: 36px; padding: 0; justify-content: center; }
}

/* Sticky table header — within wrap, thead sticks to wrap top */
.latest-table th {
  background: var(--bg);
  color: var(--ink-2);
  font-weight: 700;
  font-size: 11px;
  text-transform: uppercase;
  letter-spacing: 0.04em;
  padding: 8px 12px;
  text-align: left;
  white-space: nowrap;
  border-bottom: 1px solid var(--line-2);
  position: sticky;
  top: 0;
  z-index: 3;
}

/* Toast — bottom-center floating message */
.latest-toast {
  position: fixed;
  bottom: 24px;
  left: 50%;
  transform: translateX(-50%) translateY(20px);
  background: var(--bg-2);
  color: var(--ink);
  border: 1px solid var(--good);
  padding: 10px 18px;
  border-radius: 999px;
  font-size: 13px;
  font-weight: 600;
  box-shadow: 0 4px 16px rgba(0, 0, 0, 0.4);
  z-index: 300;
  opacity: 0;
  pointer-events: none;
  transition: opacity 0.2s, transform 0.2s;
}
.latest-toast.show { opacity: 1; transform: translateX(-50%) translateY(0); }
.latest-toast.err { border-color: var(--bad); color: var(--bad); }
.latest-sidebar-overlay {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background: rgba(0, 0, 0, 0.5);
  z-index: 199;
  display: none;
}
.latest-sidebar-overlay.show { display: block; }

/* Latest section card */

/* Phase C1/C6: sticky mini-bar clearance for in-page anchors (2026-10-15) */
html {
  scroll-padding-top: calc(48px + env(safe-area-inset-top, 0px));
}
.latest-section,
.landing-card[id],
section[id] {
  scroll-margin-top: calc(56px + env(safe-area-inset-top, 0px));
}

.latest-section {
  background: var(--bg-2);
  border: 1px solid var(--line);
  border-radius: var(--r-md);
  padding: 14px;
  margin-top: 14px;
}
.latest-section-head {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  margin-bottom: 10px;
}
.latest-section-head h2 {
  font-size: 18px;
  margin: 0;
  color: var(--ink);
}
.latest-section-count {
  font-size: 11px;
  color: var(--muted);
  background: var(--bg);
  padding: 2px 8px;
  border-radius: 999px;
  border: 1px solid var(--line-2);
}

/* Table — horizontal scroll on mobile */
.latest-table-wrap {
  overflow-x: auto;
  -webkit-overflow-scrolling: touch;
  border-radius: var(--r-sm);
  border: 1px solid var(--line-2);
}
.latest-table {
  width: 100%;
  min-width: 560px;
  border-collapse: collapse;
  font-size: 13px;
}
.latest-table th {
  background: var(--bg);
  color: var(--ink-2);
  font-weight: 700;
  font-size: 11px;
  text-transform: uppercase;
  letter-spacing: 0.04em;
  padding: 8px 12px;
  text-align: left;
  white-space: nowrap;
  border-bottom: 1px solid var(--line-2);
  position: sticky;
  top: 0;
  z-index: 3;
}
.latest-table td {
  padding: 10px 12px;
  border-bottom: 1px solid var(--line-2);
  color: var(--ink-2);
  vertical-align: top;
  line-height: 1.4;
}
.latest-table tr:last-child td { border-bottom: none; }
.latest-table .sticky-col {
  position: sticky;
  left: 0;
  background: var(--bg-2);
  z-index: 2;
  min-width: 90px;
  max-width: 90px;
}
.latest-table th.sticky-col {
  background: var(--bg);
  z-index: 3;
}
.latest-date {
  font-size: 12px;
  color: var(--ink);
  font-weight: 700;
  font-variant-numeric: tabular-nums;
}
.latest-time {
  font-size: 10px;
  color: var(--muted);
  font-variant-numeric: tabular-nums;
}
.latest-code {
  font-size: 12px;
  font-weight: 700;
  color: var(--gold);
  font-variant-numeric: tabular-nums;
  text-decoration: none;
}
.latest-code:hover { color: var(--cyan); }
.latest-name {
  font-size: 13px;
  color: var(--ink);
  font-weight: 600;
}
.latest-title {
  display: block;
  font-size: 12px;
  color: var(--ink-2);
  text-decoration: none;
  line-height: 1.4;
  margin-bottom: 4px;
}
.latest-title:hover { color: var(--gold); }
.latest-actions { display: flex; gap: 6px; font-size: 14px; }
.latest-link {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 26px;
  height: 22px;
  border-radius: 4px;
  background: var(--bg);
  border: 1px solid var(--line-2);
  color: var(--cyan);
  text-decoration: none;
  font-size: 12px;
}
.latest-link:hover { background: var(--cyan); color: var(--ink-on); border-color: var(--cyan); }
.latest-kind {
  display: inline-block;
  font-size: 10px;
  font-weight: 700;
  padding: 2px 7px;
  border-radius: 999px;
  background: var(--bg);
  color: var(--muted);
  border: 1px solid var(--line-2);
  white-space: nowrap;
}
.latest-kind-new_listing { background: rgba(230, 163, 112, 0.15); color: #e6a370; border-color: rgba(230, 163, 112, 0.4); }
.latest-kind-annual      { background: rgba(121, 208, 122, 0.15); color: var(--good); border-color: rgba(121, 208, 122, 0.4); }
.latest-kind-interim     { background: rgba(122, 211, 224, 0.15); color: #7ad3e0; border-color: rgba(122, 211, 224, 0.4); }
.latest-kind-quarterly   { background: rgba(180, 140, 214, 0.15); color: #b48cd6; border-color: rgba(180, 140, 214, 0.4); }
.latest-kind-results     { background: rgba(240, 184, 91, 0.15); color: var(--gold); border-color: rgba(240, 184, 91, 0.4); }
.latest-kind-dividend    { background: rgba(107, 208, 224, 0.15); color: var(--cyan); border-color: rgba(107, 208, 224, 0.4); }
.latest-kind-rights      { background: rgba(232, 140, 160, 0.15); color: #e88ca0; border-color: rgba(232, 140, 160, 0.4); }
.latest-scroll-hint {
  text-align: center;
  color: var(--muted);
  font-size: 11px;
  padding: 6px 0 0;
}

/* 🆕 "今日新" / "昨" badge + today row highlight */
.latest-new-badge {
  display: inline-block;
  font-size: 9px;
  font-weight: 700;
  padding: 1px 4px 0;
  border-radius: 999px;
  background: linear-gradient(135deg, #e6a370, #f0b85b);
  color: var(--ink-on);
  margin-left: 3px;
  vertical-align: middle;
  line-height: 1.4;
  letter-spacing: 0.02em;
  animation: latest-badge-pulse 2.4s ease-in-out infinite;
}
.latest-yesterday-badge {
  display: inline-block;
  font-size: 9px;
  font-weight: 700;
  padding: 1px 4px 0;
  border-radius: 999px;
  background: var(--bg-2);
  color: var(--muted);
  border: 1px solid var(--line-2);
  margin-left: 3px;
  vertical-align: middle;
  line-height: 1.4;
}
@keyframes latest-badge-pulse {
  0%, 100% { transform: scale(1); box-shadow: 0 0 0 0 rgba(230, 163, 112, 0.5); }
  50%      { transform: scale(1.08); box-shadow: 0 0 0 4px rgba(230, 163, 112, 0); }
}
.latest-row-today {
  background: rgba(230, 163, 112, 0.08) !important;
}
.latest-row-today .sticky-col {
  border-left: 3px solid #e6a370;
  padding-left: 9px;
  font-weight: 700;
}

/* "今日新增 N 條" pill (page header) */
.latest-today-pill {
  display: inline-block;
  font-size: 12px;
  font-weight: 700;
  padding: 4px 12px;
  border-radius: 999px;
  background: linear-gradient(135deg, #e6a370, #f0b85b);
  color: var(--ink-on);
  margin-top: 6px;
  letter-spacing: 0.02em;
}

/* C. Stats summary (6 cards row) */
.latest-stats {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 8px;
  margin: 14px 0 8px;
}
@media (min-width: 720px) {
  .latest-stats {
    grid-template-columns: repeat(6, 1fr);
  }
}
.latest-stat {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  padding: 10px 6px;
  border-radius: var(--r-md);
  background: var(--bg-2);
  border: 1px solid var(--line-2);
  text-decoration: none;
  color: var(--ink-2);
  transition: all 0.15s;
  cursor: pointer;
}
.latest-stat:hover {
  background: var(--panel);
  border-color: var(--gold);
  color: var(--ink);
  transform: translateY(-1px);
}
.latest-stat.on {
  background: linear-gradient(135deg, rgba(230, 163, 112, 0.18), rgba(240, 184, 91, 0.08));
  border-color: #e6a370;
  color: var(--ink);
  box-shadow: 0 0 0 1px rgba(230, 163, 112, 0.3);
}
.latest-stat-num {
  font-size: 22px;
  font-weight: 800;
  line-height: 1.1;
  font-variant-numeric: tabular-nums;
  color: var(--ink);
}
.latest-stat-sub {
  font-size: 12px;
  font-weight: 600;
  color: var(--muted);
  margin-left: 1px;
}
.latest-stat-label {
  font-size: 11px;
  font-weight: 600;
  color: var(--muted);
  margin-top: 2px;
  letter-spacing: 0.02em;
}
.latest-stat-today .latest-stat-num   { color: #e6a370; }
.latest-stat-7d .latest-stat-num      { color: var(--gold); }
.latest-stat-30d .latest-stat-num     { color: var(--cyan); }
.latest-stat-all .latest-stat-num     { color: var(--good); }
.latest-stat-storage .latest-stat-num { color: #b48cd6; }
.latest-stat-mb .latest-stat-num      { color: var(--ink-2); }

/* Section head: count + per-kind CSV button */
.latest-section-actions {
  display: flex;
  align-items: center;
  gap: 8px;
  flex-shrink: 0;
}
.latest-section-csv {
  display: inline-block;
  font-size: 10px;
  font-weight: 700;
  padding: 3px 8px;
  border-radius: 999px;
  background: rgba(122, 211, 224, 0.12);
  color: var(--cyan);
  border: 1px solid rgba(122, 211, 224, 0.35);
  text-decoration: none;
  letter-spacing: 0.02em;
  white-space: nowrap;
}
.latest-section-csv:hover {
  background: var(--cyan);
  color: var(--ink-on);
  border-color: var(--cyan);
}

/* D. Per-record status indicator (in sticky-col) */
.latest-status {
  display: inline-block;
  font-size: 9px;
  margin-left: 4px;
  padding: 0 2px;
  border-radius: 3px;
  font-weight: 700;
  vertical-align: middle;
  cursor: help;
}
.latest-status-ok {
  color: var(--good);
  background: rgba(121, 208, 122, 0.15);
  border: 1px solid rgba(121, 208, 122, 0.3);
}
.latest-status-pending {
  color: var(--muted);
  background: var(--bg);
  border: 1px solid var(--line-2);
  animation: latest-status-pending-blink 1.6s ease-in-out infinite;
}
@keyframes latest-status-pending-blink {
  0%, 100% { opacity: 0.5; }
  50%      { opacity: 1; }
}

/* E. Re-download + F. Auto-fetch toggle (controls row) */
.latest-controls {
  display: flex;
  align-items: center;
  gap: 10px;
  flex-wrap: wrap;
  margin: 10px 0 14px;
  padding: 10px 12px;
  background: var(--bg-2);
  border: 1px solid var(--line-2);
  border-radius: var(--r-md);
}
.latest-ctrl-btn {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  height: 32px;
  padding: 0 12px;
  border-radius: 8px;
  font-size: 12px;
  font-weight: 600;
  cursor: pointer;
  transition: all 0.15s;
  background: var(--bg);
  border: 1px solid var(--line-2);
  color: var(--ink-2);
}
.latest-ctrl-btn:disabled { opacity: 0.6; cursor: wait; }
.latest-ctrl-redownload {
  color: #e6a370;
  border-color: rgba(230, 163, 112, 0.4);
}
.latest-ctrl-redownload:hover {
  background: rgba(230, 163, 112, 0.15);
  color: var(--ink);
  border-color: #e6a370;
}
.latest-ctrl-toggle {
  margin-left: auto;
  color: var(--good);
  border-color: rgba(121, 208, 122, 0.4);
}
.latest-ctrl-toggle:hover {
  background: rgba(121, 208, 122, 0.15);
  color: var(--ink);
}
.latest-ctrl-toggle.off {
  color: var(--bad);
  border-color: rgba(240, 133, 133, 0.4);
}
.latest-ctrl-toggle.off:hover {
  background: rgba(240, 133, 133, 0.15);
  color: var(--ink);
}
.latest-ctrl-led {
  display: inline-block;
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: var(--good);
  box-shadow: 0 0 6px rgba(121, 208, 122, 0.7);
  animation: latest-led-pulse 2s ease-in-out infinite;
}
.latest-ctrl-led.off {
  background: var(--bad);
  box-shadow: 0 0 6px rgba(240, 133, 133, 0.6);
  animation: none;
}
@keyframes latest-led-pulse {
  0%, 100% { opacity: 1; }
  50%      { opacity: 0.5; }
}
.latest-ctrl-ok {
  font-size: 12px;
  color: var(--good);
  font-weight: 600;
}
.latest-ctrl-spinner {
  display: inline-block;
  width: 12px;
  height: 12px;
  border: 2px solid rgba(255, 255, 255, 0.3);
  border-top-color: currentColor;
  border-radius: 50%;
  animation: latest-ctrl-spin 0.7s linear infinite;
}
@keyframes latest-ctrl-spin {
  to { transform: rotate(360deg); }
}

@media (min-width: 720px) {
  .latest-table-wrap { overflow-x: visible; }
  .latest-table { min-width: auto; }
  .latest-table .sticky-col { position: static; }
  .latest-scroll-hint { display: none; }
}

/* ==========================================================================
   B. /market page — FX, Macro, Yahoo dashboard
   ========================================================================== */
.market-page { max-width: 1100px; margin: 0 auto; }
.market-section {
  background: var(--bg-2);
  border: 1px solid var(--line);
  border-radius: var(--r-md);
  padding: 16px;
  margin: 14px 0;
}
.market-section h2 { font-size: 17px; margin: 0 0 8px; color: var(--ink); }
.market-grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 10px;
  margin-top: 12px;
}
@media (min-width: 720px) {
  .market-grid { grid-template-columns: repeat(3, 1fr); }
  .market-grid:has(.market-card:nth-child(6)) { grid-template-columns: repeat(3, 1fr); }
}
.market-card {
  background: var(--bg);
  border: 1px solid var(--line-2);
  border-radius: var(--r-sm);
  padding: 14px;
  position: relative;
}
.market-card-label {
  font-size: 11px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.05em;
  color: var(--muted);
  margin-bottom: 4px;
}
.market-card-value {
  font-size: 22px;
  font-weight: 800;
  color: var(--ink);
  font-variant-numeric: tabular-nums;
  line-height: 1.1;
}
.market-card-unit { font-size: 12px; font-weight: 600; color: var(--muted); margin-left: 4px; }
.market-card-meta {
  font-size: 10px;
  color: var(--muted);
  margin-top: 4px;
  letter-spacing: 0.04em;
}
.market-card-desc {
  font-size: 11px;
  color: var(--ink-2);
  margin-top: 6px;
  line-height: 1.3;
}

/* Color hints per indicator */
.market-card.macro-us10y { border-left: 3px solid #e88ca0; }
.market-card.macro-dxy   { border-left: 3px solid var(--cyan); }
.market-card.macro-hsi   { border-left: 3px solid var(--good); }
.market-card.macro-vix   { border-left: 3px solid #b48cd6; }
.market-card.macro-sp500 { border-left: 3px solid var(--gold); }

/* FX rate cards — copper tone */
.market-card[class*="fx-"] { border-left: 3px solid #e6a370; }

/* HK stock table */
.market-table-wrap {
  overflow-x: auto;
  border: 1px solid var(--line-2);
  border-radius: var(--r-sm);
  margin-top: 12px;
}
.market-table {
  width: 100%;
  border-collapse: collapse;
  font-size: 13px;
}
.market-table th {
  background: var(--bg);
  color: var(--ink-2);
  font-weight: 700;
  font-size: 11px;
  text-transform: uppercase;
  letter-spacing: 0.04em;
  padding: 8px 12px;
  text-align: left;
  border-bottom: 1px solid var(--line-2);
}
.market-table td {
  padding: 8px 12px;
  border-bottom: 1px solid var(--line-2);
  color: var(--ink-2);
  font-variant-numeric: tabular-nums;
}
.market-table tr:last-child td { border-bottom: none; }
.market-td-code { color: var(--gold); }

/* Schedule table */
.market-schedule-table {
  width: 100%;
  border-collapse: collapse;
  font-size: 12px;
  margin-top: 8px;
}
.market-schedule-table th,
.market-schedule-table td {
  padding: 8px 10px;
  text-align: left;
  border-bottom: 1px solid var(--line-2);
  vertical-align: top;
}
.market-schedule-table th {
  background: var(--bg);
  color: var(--ink-2);
  font-weight: 700;
  font-size: 11px;
  text-transform: uppercase;
}
.market-schedule-table code {
  background: var(--bg);
  padding: 1px 6px;
  border-radius: 3px;
  font-size: 11px;
  color: var(--gold);
}

/* C. FX alert box (top of page when deviation > 0.5%) */
.market-alert {
  background: rgba(232, 140, 160, 0.10);
  border: 1px solid rgba(232, 140, 160, 0.4);
  border-left: 4px solid #e88ca0;
  border-radius: var(--r-md);
  padding: 14px 16px;
  margin: 14px 0;
}
.market-alert h2 { font-size: 15px; color: #e88ca0; margin: 0 0 8px; }
.market-alert-table {
  width: 100%;
  border-collapse: collapse;
  font-size: 13px;
}
.market-alert-table th,
.market-alert-table td {
  padding: 6px 10px;
  text-align: left;
  border-bottom: 1px solid rgba(232, 140, 160, 0.2);
}
.market-alert-table th {
  color: var(--muted);
  font-weight: 700;
  font-size: 11px;
  text-transform: uppercase;
}
.market-alert-table .pct.up   { color: var(--good); font-weight: 700; }
.market-alert-table .pct.down { color: var(--bad);  font-weight: 700; }

/* C. Refresh-now buttons (3 jobs) */
.market-refresh {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin: 10px 0 14px;
  padding: 10px 12px;
  background: var(--bg-2);
  border: 1px solid var(--line-2);
  border-radius: var(--r-md);
}
.market-refresh-btn {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  height: 32px;
  padding: 0 12px;
  border-radius: 8px;
  background: var(--bg);
  border: 1px solid var(--line-2);
  color: var(--ink-2);
  font-size: 12px;
  font-weight: 600;
  cursor: pointer;
  transition: all 0.15s;
}
.market-refresh-btn:hover { background: var(--panel); border-color: var(--gold); color: var(--ink); }
.market-refresh-btn:disabled { opacity: 0.6; cursor: wait; }
.market-refresh-btn svg { display: block; }
.market-refresh-spinner {
  display: inline-block;
  width: 12px;
  height: 12px;
  border: 2px solid rgba(255,255,255,0.3);
  border-top-color: currentColor;
  border-radius: 50%;
  animation: market-spin 0.7s linear infinite;
}
@keyframes market-spin { to { transform: rotate(360deg); } }

/* Toast */
.market-toast {
  position: fixed;
  bottom: 24px;
  left: 50%;
  transform: translateX(-50%) translateY(20px);
  background: var(--bg-2);
  color: var(--ink);
  border: 1px solid var(--good);
  padding: 10px 18px;
  border-radius: 999px;
  font-size: 13px;
  font-weight: 600;
  box-shadow: 0 4px 16px rgba(0, 0, 0, 0.4);
  z-index: 300;
  opacity: 0;
  pointer-events: none;
  transition: opacity 0.2s, transform 0.2s;
}
.market-toast.show { opacity: 1; transform: translateX(-50%) translateY(0); }
.market-toast.err { border-color: var(--bad); color: var(--bad); }

/* B/D. Line chart section */
.market-h3 {
  font-size: 14px;
  margin: 20px 0 10px;
  color: var(--ink-2);
  font-weight: 700;
}
.market-chart-grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: 10px;
  margin-top: 8px;
}
@media (min-width: 720px) {
  .market-chart-grid { grid-template-columns: repeat(3, 1fr); }
}
@media (min-width: 960px) {
  .market-chart-grid { grid-template-columns: repeat(5, 1fr); }
}
.market-chart-card {
  background: var(--bg);
  border: 1px solid var(--line-2);
  border-radius: var(--r-sm);
  padding: 10px 12px;
  position: relative;
}
.market-chart-label {
  font-size: 11px;
  font-weight: 700;
  color: var(--ink-2);
  margin-bottom: 4px;
  letter-spacing: 0.04em;
}
.market-chart-svg {
  width: 100%;
  height: 80px;
  display: block;
  background: var(--bg-2);
  border-radius: 4px;
}

/* ==========================================================================
   Main nav — mobile burger + desktop 1 row (8 tiles ≥1024; 5+更多 768–1023)
   ========================================================================== */
.main-nav-head {
  display: none;            /* hidden on desktop */
  align-items: center;
  justify-content: space-between;
  padding: 4px 2px 8px;
  border-bottom: 1px solid var(--line-2);
  margin-bottom: 6px;
}
.main-nav-title {
  display: none;  /* Lee 2026-10-14: 「主功能」標題移除, nav clean */
}
.main-nav-title::before {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(135deg, rgba(240, 184, 91, 0.15), rgba(230, 163, 112, 0.10));
  border: 1px solid rgba(240, 184, 91, 0.4);
  border-radius: 8px;
  z-index: -1;
}
.main-nav-toggle {
  display: none;            /* hidden on desktop */
  align-items: center;
  justify-content: center;
  width: 36px;
  height: 36px;
  border-radius: 8px;
  background: var(--bg-2);
  border: 1px solid var(--line-2);
  color: var(--ink-2);
  cursor: pointer;
  transition: all 0.15s;
  flex-shrink: 0;
}
.main-nav-toggle:hover { background: var(--panel); border-color: var(--gold); color: var(--ink); }
.main-nav-toggle svg { display: block; transition: transform 0.18s; }
.main-nav-toggle line { transition: transform 0.2s ease, opacity 0.2s ease; transform-origin: 12px 12px; }

.main-nav {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 6px;
  padding: 6px;
  background: var(--bg-2);
  border: 1px solid var(--line);
  border-radius: var(--r-md);
}

/* F2: latest/brand no longer full-width (更多選單／主列) */
.nav-btn-latest,
.nav-btn-brand { grid-column: auto; }

/* Desktop: 1 row, 8 primary tiles (2026-10-15 topbar-8rows — no「更多」) */
@media (min-width: 768px) {
  .main-nav-head { display: none; }
  .main-nav-toggle { display: none; }
  .main-nav {
    display: flex;
    flex-wrap: wrap;
    align-items: stretch;
    gap: 3px;
    grid-template-columns: none;
  }
  .main-nav > .nav-btn {
    flex: 1 1 0;
    min-width: 0;
    flex-direction: row;
    align-items: center;
    justify-content: center;
    gap: 4px;
    font-size: 14px;
    padding: 6px 4px;
    min-height: 36px;
    text-align: center;
    overflow: hidden;
    transform: none !important; /* F2-01: 禁止 scale 壓扁 */
  }
  .nav-btn-icon { font-size: 12px; width: 13px; height: 13px; flex-shrink: 0; }
  .nav-btn-label { font-size: 14px; line-height: 1.15; font-weight: 800; text-align: center; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; min-width: 0; }
  .nav-btn-latest,
  .nav-btn-brand { grid-column: auto; }
  .nav-burger { display: none !important; }
  .nav-backdrop { display: none !important; }
}

/* Legacy .nav-more rules kept inert (HTML no longer wraps tiles) */
@media (min-width: 1024px) {
  .nav-more { display: contents; }
  .nav-more > summary.nav-btn-more { display: none !important; }
  .nav-more-panel { display: contents !important; }
}

/* Market nav button — orange/copper tone (matches FX/macro theme) */
/* B. Compact "show topbar" reveal — square, rounded, semi-transparent,
   top-right viewport (Keith 2026-10-15). Thumb-tap ~44px; icon-only. */
.topbar-show-mini {
  position: fixed;
  top: max(10px, env(safe-area-inset-top, 0px));
  right: max(10px, env(safe-area-inset-right, 0px));
  left: auto;
  transform: none;
  z-index: 55;
  display: none; /* shown via body.collapsed-scroll */
  align-items: center;
  justify-content: center;
  width: 44px;
  height: 44px;
  min-width: 44px;
  min-height: 44px;
  max-width: 48px;
  max-height: 48px;
  padding: 0;
  gap: 0;
  border-radius: 12px;
  background: rgba(18, 22, 30, 0.48);
  border: 1px solid rgba(240, 184, 91, 0.55);
  color: var(--gold);
  font-size: 0;
  font-weight: 700;
  letter-spacing: 0;
  cursor: pointer;
  box-shadow: 0 2px 12px rgba(0, 0, 0, 0.28);
  transition: background 0.15s, color 0.15s, box-shadow 0.15s, transform 0.15s, opacity 0.2s, border-color 0.15s;
  font-family: inherit;
  -webkit-tap-highlight-color: transparent;
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
}
body.collapsed-scroll .topbar-show-mini:not(.permanent-hide) {
  display: inline-flex;
}
.topbar-show-mini > span {
  /* icon-only square; label kept in DOM for older a11y but visually hidden */
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
  border: 0;
}
.topbar-show-mini:hover,
.topbar-show-mini:focus-visible {
  background: rgba(240, 184, 91, 0.72);
  color: var(--ink-on, #0e1116);
  border-color: rgba(240, 184, 91, 0.95);
  transform: none;
  box-shadow: 0 4px 16px rgba(240, 184, 91, 0.28);
  outline: none;
}
.topbar-show-mini:active {
  transform: scale(0.96);
  background: rgba(240, 184, 91, 0.85);
}
.topbar-show-mini svg {
  display: block;
  width: 20px;
  height: 20px;
  flex-shrink: 0;
}

/* Tooltip — drop below, align to right edge (button is top-right) */
.topbar-show-mini::after {
  content: "顯示主功能表";
  position: absolute;
  right: 0;
  left: auto;
  top: calc(100% + 8px);
  transform: translateY(-4px);
  padding: 6px 12px;
  background: rgba(22, 26, 34, 0.92);
  border: 1px solid rgba(240, 184, 91, 0.55);
  border-radius: 8px;
  color: var(--ink);
  font-size: 12px;
  font-weight: 600;
  letter-spacing: 0.02em;
  white-space: nowrap;
  box-shadow: 0 4px 14px rgba(0, 0, 0, 0.35);
  opacity: 0;
  pointer-events: none;
  transition: opacity 0.18s ease, transform 0.18s ease;
  z-index: 56;
}
.topbar-show-mini:hover::after {
  opacity: 1;
  transform: translateY(0);
}
.topbar-show-mini::before {
  content: "";
  position: absolute;
  right: 14px;
  left: auto;
  top: calc(100% + 2px);
  transform: none;
  width: 0;
  height: 0;
  border-left: 6px solid transparent;
  border-right: 6px solid transparent;
  border-bottom: 6px solid rgba(240, 184, 91, 0.7);
  opacity: 0;
  pointer-events: none;
  transition: opacity 0.18s ease;
  z-index: 56;
}
.topbar-show-mini:hover::before { opacity: 1; }

.topbar-show-mini.permanent-hide {
  display: none !important;
}
.topbar-show-mini.tooltip-dismissed::after,
.topbar-show-mini.tooltip-dismissed::before {
  opacity: 0 !important;
}


/* 2026-10-15 login-fix: fixed 登入 pill when topbar is collapsed (pointer-events:none on .topbar-inner) */
.topbar-login-collapsed {
  display: none;
  position: fixed;
  top: max(10px, env(safe-area-inset-top, 0px));
  right: calc(10px + 44px + 8px + env(safe-area-inset-right, 0px));
  left: auto;
  z-index: 56;
  align-items: center;
  justify-content: center;
  gap: 6px;
  height: 44px;
  min-height: 44px;
  padding: 0 14px;
  border-radius: 12px;
  background: linear-gradient(135deg, var(--gold), #e6a370);
  border: 1px solid rgba(240, 184, 91, 0.95);
  color: var(--ink-on, #0e1116);
  font-size: 13px;
  font-weight: 800;
  letter-spacing: 0.02em;
  text-decoration: none;
  box-shadow: 0 2px 12px rgba(0, 0, 0, 0.28);
  font-family: inherit;
  -webkit-tap-highlight-color: transparent;
  pointer-events: auto !important;
  cursor: pointer;
}
body.collapsed-scroll .topbar-login-collapsed {
  display: inline-flex;
}
body.page-auth .topbar-login-collapsed {
  display: none !important;
}
/* If mini is permanently hidden, still keep collapsed login visible (already via body.collapsed-scroll). */
.topbar-login-collapsed:hover,
.topbar-login-collapsed:focus-visible {
  background: linear-gradient(135deg, #e6a370, var(--gold));
  color: var(--ink-on, #0e1116);
  outline: none;
}
.topbar-login-collapsed svg { display: block; flex-shrink: 0; }
@media (max-width: 720px) {
  .topbar-login-collapsed {
    padding: 0 12px;
    font-size: 12px;
    right: calc(10px + 44px + 6px + env(safe-area-inset-right, 0px));
  }
}

/* Keep fade helpers harmless; visibility is CSS-driven by collapsed-scroll */
.topbar-show-mini.fading-out {
  opacity: 0.4;
  pointer-events: none;
}
.topbar-show-mini.hidden-after-click {
  /* no longer force-hide; collapsed-scroll CSS owns visibility */
}

@media (max-width: 720px) {
  .topbar-show-mini {
    top: max(10px, env(safe-area-inset-top, 0px));
    right: max(10px, env(safe-area-inset-right, 0px));
    width: 44px;
    height: 44px;
    padding: 0;
    font-size: 0;
    max-width: 48px;
  }
  .topbar-show-mini svg { width: 20px; height: 20px; }
  .topbar-show-mini::after,
  .topbar-show-mini::before {
    /* touch devices: no hover tooltip clutter */
    display: none;
  }
}

/* C. Legacy scroll-up trigger — MUST NOT steal taps.
   Expand is handled by .topbar-show-mini. Keep node for JS compat but inert. */
.topbar-scroll-trigger {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  height: 0;
  z-index: -1;
  background: transparent;
  pointer-events: none !important;
}

/* Live + Market side-by-side on mobile — same row layout, slightly tighter label */
@media (max-width: 720px) {
  .nav-btn-live .nav-btn-label,
  .nav-btn-market .nav-btn-label {
    font-size: 15px;
    line-height: 1.15;
    text-align: center;  /* 2026-10-15 center */
  }
  .nav-btn-live,
  .nav-btn-market {
    min-height: 36px;
    padding: 6px 8px;
    flex-direction: row;
  }
}


/* Mobile-only (≤ 720px): 摺疊模式 — 預設只顯示 active button,
   其他 6 個隱藏. 撳 toggle 展開所有. */
@media (max-width: 720px) {
  /* 2026-10-15: main-nav-actions removed — always show full 2-col nav */
  .main-nav-head,
  .main-nav-toggle,
  .main-nav-actions,
  .main-nav-mode { display: none !important; }
  .main-nav { padding: 5px; gap: 5px; }
}

/* Action buttons (expand-all / collapse-all) — sit next to toggle */
.main-nav-actions {
  display: inline-flex;
  align-items: center;
  gap: 6px;
}
.main-nav-mode {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 32px;
  height: 32px;
  border-radius: 6px;
  background: var(--bg-2);
  border: 1px solid var(--line-2);
  color: var(--ink-2);
  cursor: pointer;
  transition: all 0.15s;
}
.main-nav-mode:hover { background: var(--panel); border-color: var(--gold); color: var(--ink); }
.main-nav-mode svg { display: block; }
@media (min-width: 720px) {
  .main-nav-mode { display: none; }
}

/* D. Visited indicator — small dot in the corner of the icon */
.nav-btn.visited .nav-btn-icon { position: relative; }
.nav-btn.visited .nav-btn-icon::after {
  content: "";
  position: absolute;
  top: -2px;
  right: -3px;
  width: 7px;
  height: 7px;
  border-radius: 50%;
  background: var(--good);
  box-shadow: 0 0 0 2px var(--bg-2);
}

/* C. iOS-style scroll auto-collapse — topbar shrinks to a compact
   floating pill when user scrolls down past 200px.

   Bug fix v2 (Lee 2026-10-14): 原本用 position: sticky, 撳 nav button
   嗰陣 topbar 嘅 1px border-bottom 殘影會喺頂部閃動. 改成 position: fixed
   + body padding-top 預留空間, 將 topbar 完全由 document flow 分離,
   避免 sticky 喺 scroll 過渡時嘅 paint conflict.

   C. 2026-10-14: 縮短 transition 由 0.3s → 0.15s (更 iOS 感覺). */
:root {
  --topbar-h: 112px;  /* default ~20% shorter; JS updates on load/resize */
}
body {
  /* Reserve space at top so content doesn't get hidden under fixed topbar */
  padding-top: var(--topbar-h);
  transition: padding-top 0.15s ease;
}
body.collapsed-scroll {
  /* Phase C1: keep room for .topbar-show-mini so quote/content never sit under it */
  padding-top: calc(44px + env(safe-area-inset-top, 0px));
}

.topbar-inner {
  transition: transform 0.15s ease, opacity 0.12s;
  transform: translateY(0);
  opacity: 1;
  overflow: hidden;
  max-height: 800px;
}
#topbar {
  /* v2: position fixed, completely out of document flow.
     Use !important to override the legacy .top { position: sticky } rule.
     2026-10-16 zindex-auth: raise above landing cards / search (was 50). */
  position: fixed !important;
  top: 0 !important;
  left: 0 !important;
  right: 0 !important;
  z-index: 1000 !important;
  background: var(--bg);
  border-bottom: 1px solid var(--line);
  transition: padding 0.15s ease, box-shadow 0.15s ease, border-color 0.15s;
  backface-visibility: hidden;
  -webkit-backface-visibility: hidden;
  will-change: padding, box-shadow, border-color;
  /* Avoid subpixel jitter on Safari iOS */
  transform: translateZ(0);
  -webkit-transform: translateZ(0);
}
#topbar.collapsed-scroll {
  padding: 0 !important;
  border-bottom-color: transparent;
  box-shadow: 0 2px 12px rgba(0, 0, 0, 0.25);
}
#topbar.collapsed-scroll .topbar-inner {
  transform: translateY(-100%);
  opacity: 0;
  padding: 0 22px;
  max-height: 0;
  pointer-events: none;
}

/* Decorative collapsed pills removed 2026-10-14 — replaced by tappable .topbar-show-mini */
#topbar::before,
#topbar::after {
  content: none !important;
  display: none !important;
}
@media (min-width: 720px) {
  #topbar.collapsed-scroll .topbar-inner { max-height: 0; padding: 0 22px; }
  #topbar.collapsed-scroll { padding: 0; box-shadow: 0 2px 12px rgba(0,0,0,0.25); }
}
.nav-btn {
  display: flex;
  flex-direction: row;           /* icon LEFT, text RIGHT */
  align-items: center;
  justify-content: center;
  gap: 6px;
  padding: 6px 8px;
  border-radius: var(--r-md);
  background: var(--bg-2);
  color: var(--ink);
  border: 1px solid var(--line-2);
  font-weight: 700;
  font-size: 18px;               /* +30% vs prior 14px; row layout keeps height short */
  letter-spacing: 0.01em;
  text-decoration: none;
  white-space: normal;
  text-align: center;
  min-height: 36px;              /* keep ~20% shorter than original ~52 column tiles */
  transition: transform 0.12s ease, box-shadow 0.15s ease, border-color 0.15s ease;
  position: relative;
  overflow: hidden;
}
.nav-btn:active { transform: translateY(1px); }
.nav-btn-icon {
  width: 14px;
  height: 14px;
  line-height: 1;
  flex-shrink: 0;
  display: inline-flex;
  align-items: center;
  justify-content: center;
}
.nav-btn-icon svg { display: block; width: 100%; height: 100%; }
.nav-btn-label {
  flex: 0 1 auto;
  min-width: 0;
  line-height: 1.15;
  white-space: normal;
  overflow: visible;
  text-overflow: unset;
  max-width: 100%;
  font-size: 18px;
  font-weight: 800;
  text-align: center;  /* 2026-10-15: icon+文字全部置中 */
}

/* Per-function identity accents (2026-10-15 fn-colors) — quiet static, brighter hover/on */
.nav-btn-5s,
.nav-btn-calc,
.nav-btn-live,
.nav-btn-market,
.nav-btn-latest,
.nav-btn-inst,
.nav-btn-learn,
.nav-btn-brand,
.nav-btn-watch,
.nav-btn-usfilings {
  background: var(--bg);
  color: var(--ink-2);
  border-color: var(--line);
  border-left-width: 3px;
  border-left-style: solid;
}
.nav-btn-5s    { border-left-color: rgba(107, 208, 224, 0.55); color: #9edbe6; }
.nav-btn-brand { border-left-color: rgba(95, 198, 184, 0.55);  color: #7fd4c8; }
.nav-btn-watch { border-left-color: rgba(139, 156, 247, 0.55); color: #a8b4fb; }
.nav-btn-usfilings { border-left-color: rgba(143, 182, 255, 0.55); color: #a8c4ff; }
.nav-btn-live  { border-left-color: rgba(121, 208, 122, 0.55); color: #8fd890; }
.nav-btn-market{ border-left-color: rgba(232, 149, 106, 0.55); color: #efb08a; }
.nav-btn-calc  { border-left-color: rgba(180, 140, 214, 0.55); color: #c4a3de; }
.nav-btn-latest{ border-left-color: rgba(240, 184, 91, 0.55);  color: #f0c47a; }
.nav-btn-inst  { border-left-color: rgba(143, 182, 255, 0.55); color: #a8c4ff; }
.nav-btn-learn { border-left-color: rgba(232, 138, 173, 0.55); color: #efa0bb; }

.nav-btn-5s:hover {
  color: var(--fn-5s); border-color: rgba(107, 208, 224, 0.55); border-left-color: var(--fn-5s);
  background: rgba(107, 208, 224, 0.08); box-shadow: 0 0 0 1px rgba(107,208,224,0.35), 0 4px 14px rgba(107,208,224,0.18);
}
.nav-btn-brand:hover {
  color: var(--fn-brand); border-color: rgba(95, 198, 184, 0.55); border-left-color: var(--fn-brand);
  background: rgba(95, 198, 184, 0.08); box-shadow: 0 0 0 1px rgba(95,198,184,0.35), 0 4px 14px rgba(95,198,184,0.18);
}
.nav-btn-watch:hover {
  color: #a8b4fb; border-color: rgba(139, 156, 247, 0.55); border-left-color: #8b9cf7;
  background: rgba(139, 156, 247, 0.08); box-shadow: 0 0 0 1px rgba(139,156,247,0.35), 0 4px 14px rgba(139,156,247,0.18);
}
.nav-btn-live:hover {
  color: var(--fn-live); border-color: rgba(121, 208, 122, 0.55); border-left-color: var(--fn-live);
  background: rgba(121, 208, 122, 0.08); box-shadow: 0 0 0 1px rgba(121,208,122,0.35), 0 4px 14px rgba(121,208,122,0.18);
}
.nav-btn-market:hover {
  color: var(--fn-market); border-color: rgba(232, 149, 106, 0.55); border-left-color: var(--fn-market);
  background: rgba(232, 149, 106, 0.08); box-shadow: 0 0 0 1px rgba(232,149,106,0.35), 0 4px 14px rgba(232,149,106,0.18);
}
.nav-btn-calc:hover {
  color: var(--fn-calc); border-color: rgba(180, 140, 214, 0.55); border-left-color: var(--fn-calc);
  background: rgba(180, 140, 214, 0.08); box-shadow: 0 0 0 1px rgba(180,140,214,0.35), 0 4px 14px rgba(180,140,214,0.18);
}
.nav-btn-latest:hover {
  color: var(--fn-latest); border-color: rgba(240, 184, 91, 0.55); border-left-color: var(--fn-latest);
  background: rgba(240, 184, 91, 0.08); box-shadow: 0 0 0 1px rgba(240,184,91,0.35), 0 4px 14px rgba(240,184,91,0.18);
}
.nav-btn-inst:hover {
  color: var(--fn-inst); border-color: rgba(143, 182, 255, 0.55); border-left-color: var(--fn-inst);
  background: rgba(143, 182, 255, 0.08); box-shadow: 0 0 0 1px rgba(143,182,255,0.35), 0 4px 14px rgba(143,182,255,0.18);
}
.nav-btn-learn:hover {
  color: var(--fn-learn); border-color: rgba(232, 138, 173, 0.55); border-left-color: var(--fn-learn);
  background: rgba(232, 138, 173, 0.08); box-shadow: 0 0 0 1px rgba(232,138,173,0.35), 0 4px 14px rgba(232,138,173,0.18);
}

/* On state (active page) — match function color, not all-gold */
.nav-btn.on {
  box-shadow: 0 0 0 2px currentColor, 0 4px 14px rgba(255,255,255,0.06);
  background: var(--bg-2);
}
.nav-btn-5s.on    { color: var(--fn-5s);    border-color: rgba(107, 208, 224, 0.65); border-left-color: var(--fn-5s); background: rgba(107,208,224,0.10); }
.nav-btn-brand.on { color: var(--fn-brand); border-color: rgba(95, 198, 184, 0.65);  border-left-color: var(--fn-brand); background: rgba(95,198,184,0.10); }
.nav-btn-watch.on { color: #a8b4fb; border-color: rgba(139, 156, 247, 0.65); border-left-color: #8b9cf7; background: rgba(139,156,247,0.10); }
.nav-btn-live.on  { color: var(--fn-live);  border-color: rgba(121, 208, 122, 0.65); border-left-color: var(--fn-live); background: rgba(121,208,122,0.10); }
.nav-btn-market.on{ color: var(--fn-market);border-color: rgba(232, 149, 106, 0.65); border-left-color: var(--fn-market); background: rgba(232,149,106,0.10); }
.nav-btn-calc.on  { color: var(--fn-calc);  border-color: rgba(180, 140, 214, 0.65); border-left-color: var(--fn-calc); background: rgba(180,140,214,0.10); }
.nav-btn-latest.on{ color: var(--fn-latest);border-color: rgba(240, 184, 91, 0.65);  border-left-color: var(--fn-latest); background: rgba(240,184,91,0.10); }
.nav-btn-inst.on  { color: var(--fn-inst);  border-color: rgba(143, 182, 255, 0.65); border-left-color: var(--fn-inst); background: rgba(143,182,255,0.10); }
.nav-btn-learn.on { color: var(--fn-learn); border-color: rgba(232, 138, 173, 0.65); border-left-color: var(--fn-learn); background: rgba(232,138,173,0.10); }
.nav-btn.on::before {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(180deg, transparent, rgba(255,255,255,0.04));
  pointer-events: none;
}

.muted { color: var(--muted); }
.note { color: var(--warn); }

/* ==========================================================================
   Layout
   ========================================================================== */
.top, main { padding-left: 22px; padding-right: 22px; }
main { padding-top: 18px; padding-bottom: 28px; max-width: 1320px; margin: 0 auto; }

/* ==========================================================================
   Chips / pills / badges
   ========================================================================== */
.counts {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  margin: 10px 0 0;
}
.chip, .kind, .pill, .state, .badge {
  display: inline-flex;
  align-items: center;
  border-radius: 999px;
  padding: 1px 9px;
  font-size: 12px;
  font-weight: 600;
  line-height: 1.7;
  white-space: nowrap;
  letter-spacing: 0.01em;
  border: 1px solid transparent;
}
.chip-good, .kind-annual, .state.在檔 { background: rgba(121, 208, 122, 0.15); color: var(--good); border-color: rgba(121, 208, 122, 0.35); }
.chip-bad, .state.缺檔, .state.失敗, .state.已刪 { background: rgba(240, 133, 133, 0.15); color: var(--bad); border-color: rgba(240, 133, 133, 0.35); }
.chip-info, .kind-quarterly { background: rgba(143, 182, 255, 0.15); color: var(--info); border-color: rgba(143, 182, 255, 0.35); }
.chip-gold, .kind-interim { background: rgba(240, 184, 91, 0.15); color: var(--gold); border-color: rgba(240, 184, 91, 0.35); }
.tone-miss { background: rgba(125, 133, 144, 0.18); color: var(--ink-2); border-color: rgba(125, 133, 144, 0.35); }
.pill { margin: 0 2px; vertical-align: baseline; }

/* ==========================================================================
   Forms
   ========================================================================== */
input, select, button {
  width: 100%;
  background: var(--bg-2);
  color: var(--ink);
  border: 1px solid var(--line);
  border-radius: var(--r-md);
  padding: 10px 12px;
  font: inherit;
  transition: border-color 0.18s ease, box-shadow 0.18s ease, background 0.18s ease;
}
input:hover, select:hover { border-color: var(--line-2); }
input:focus, select:focus {
  outline: none;
  border-color: var(--cyan);
  box-shadow: 0 0 0 3px rgba(107, 208, 224, 0.18);
  background: var(--bg);
}
button {
  cursor: pointer;
  background: linear-gradient(135deg, var(--gold), var(--gold-2));
  color: var(--ink-on);
  font-weight: 700;
  border: none;
  box-shadow: 0 2px 8px rgba(240, 184, 91, 0.3);
  transition: transform 0.05s ease, box-shadow 0.18s ease, filter 0.18s ease;
}
button:hover { filter: brightness(1.05); box-shadow: 0 4px 14px rgba(240, 184, 91, 0.45); }
button:active { transform: translateY(1px); box-shadow: 0 1px 4px rgba(240, 184, 91, 0.3); }
button:disabled { opacity: 0.55; cursor: not-allowed; transform: none; }

.filters, .cards { display: grid; gap: 10px; }
.filters { grid-template-columns: 1.1fr 1.4fr 0.8fr 0.8fr 0.9fr 0.9fr auto; margin-bottom: 12px; }

/* ==========================================================================
   Panels / cards — modernised
   ========================================================================== */
.panel, .card {
  background: var(--panel);
  border: 1px solid var(--line);
  border-radius: var(--r-lg);
  padding: 16px 18px;
  margin: 14px 0;
  box-shadow: var(--shadow-sm);
  transition: border-color 0.18s ease, transform 0.18s ease, box-shadow 0.18s ease;
}
.panel:hover { border-color: var(--line-2); }
.card {
  display: grid;
  gap: 6px;
  color: inherit;
}
.cards { display: none; }
.cards a.card:hover, a.card:hover {
  transform: translateY(-2px);
  border-color: rgba(240, 184, 91, 0.4);
  box-shadow: var(--shadow-md);
}

/* ==========================================================================
   Tables — modern
   ========================================================================== */
table { width: 100%; border-collapse: separate; border-spacing: 0; font-size: 14px; }
thead th {
  background: var(--bg-2);
  color: var(--ink-2);
  font-weight: 600;
  font-size: 12px;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  padding: 12px 10px;
  border-bottom: 1px solid var(--line);
  position: sticky;
  top: 0;
  z-index: 1;
}
tbody td {
  padding: 12px 10px;
  border-bottom: 1px solid var(--line-2);
  vertical-align: middle;
}
tbody tr { transition: background 0.15s ease; }
tbody tr:hover { background: rgba(255, 255, 255, 0.02); }
tbody tr:last-child td { border-bottom: none; }

th, td { text-align: left; }
.title, .raw { max-width: 28rem; }
.raw { white-space: pre-wrap; }
.num { font-variant-numeric: tabular-nums; white-space: nowrap; }
.state { display: inline-block; }
.pager { display: flex; gap: 14px; align-items: center; }
iframe {
  width: 100%;
  height: 72vh;
  border: 0;
  background: #0d1014;
  border-radius: var(--r-md);
  box-shadow: var(--shadow-md);
}

pre {
  white-space: pre-wrap;
  word-break: break-word;
  max-height: 70vh;
  overflow: auto;
  background: var(--bg);
  padding: 14px;
  border-radius: var(--r-md);
  border: 1px solid var(--line);
  font-family: ui-monospace, "SF Mono", Menlo, "JetBrains Mono", monospace;
  font-size: 13px;
  line-height: 1.6;
}

/* ==========================================================================
   Screen search bar
   ========================================================================== */
.screen-search {
  display: flex;
  gap: 10px;
  align-items: flex-end;
  margin: 12px 0 14px;
  flex-wrap: wrap;
}
.screen-search label {
  flex: 1;
  display: grid;
  gap: 4px;
  color: var(--muted);
  font-size: 13px;
  min-width: 140px;
}
.screen-search label > * { width: 100%; }
.screen-search button { width: auto; min-width: 7rem; }

.onboarding ul { margin: 6px 0 6px 22px; padding: 0; }
.onboarding li { margin: 4px 0; }
.onboarding code {
  background: var(--bg);
  padding: 1px 6px;
  border-radius: 5px;
  font-size: 90%;
  font-family: ui-monospace, "SF Mono", Menlo, monospace;
  border: 1px solid var(--line);
}

/* ==========================================================================
   KPIs (cards on screen pages)
   ========================================================================== */
.kpis {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(120px, 1fr));
  gap: 10px;
  margin-bottom: 14px;
}
.kpi {
  position: relative;
  display: block;
  color: inherit;
  background: var(--bg-2);
  border: 1px solid var(--line);
  border-radius: var(--r-md);
  padding: 14px 14px 12px;
  text-decoration: none;
  overflow: hidden;
  transition: transform 0.18s ease, border-color 0.18s ease, box-shadow 0.18s ease;
}
.kpi::before {
  content: "";
  position: absolute;
  inset: 0 0 auto 0;
  height: 3px;
  background: var(--line);
}
.kpi:hover { transform: translateY(-2px); border-color: var(--line-2); box-shadow: var(--shadow-md); }
.kpi.on {
  background: var(--panel);
  border-color: rgba(240, 184, 91, 0.45);
  box-shadow: var(--shadow-glow-gold);
}
.kpi .num {
  display: block;
  font-size: 1.7rem;
  font-weight: 800;
  line-height: 1.1;
  color: var(--ink);
  font-variant-numeric: tabular-nums;
  letter-spacing: -0.02em;
}
.kpi > span:last-child { color: var(--muted); font-size: 12px; font-weight: 500; }

.kpi-pass .num, .kpi-s2_pass .num, .kpi-screened .num { color: var(--good); }
.kpi-pass::before, .kpi-s2_pass::before, .kpi-screened::before { background: var(--good); }
.kpi-near .num, .kpi-review .num, .kpi-quarantine .num, .kpi-equity .num { color: var(--gold); }
.kpi-near::before, .kpi-review::before, .kpi-quarantine::before, .kpi-equity::before { background: var(--gold); }
.kpi-s2_fail .num, .kpi-cannot .num { color: var(--bad); }
.kpi-s2_fail::before, .kpi-cannot::before { background: var(--bad); }
.kpi-s4_priced .num, .kpi-priced .num { color: var(--cyan); }
.kpi-s4_priced::before, .kpi-priced::before { background: var(--cyan); }
.kpi-keith_ai .num, .kpi-info .num { color: var(--info); }
.kpi-keith_ai::before, .kpi-info::before { background: var(--info); }
.kpi-s4_missing .num, .kpi-undone .num, .kpi-stop .num { color: var(--muted); }
.kpi-s4_missing::before, .kpi-undone::before, .kpi-stop::before { background: var(--muted); }
.kpi-companies .num { color: var(--cyan); }
.kpi-companies::before { background: var(--cyan); }

.legend, .shown, .export-row, .miss-note, .price-refresh { margin: 8px 0; }
.price-refresh {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  align-items: center;
}
.price-refresh button { width: auto; }
.price-refresh button:disabled { opacity: 0.65; cursor: progress; }

/* ==========================================================================
   Steps (C1/C2/C3/C4/lee-nine nav)
   ========================================================================== */
.steps {
  display: flex;
  gap: 4px;
  margin: 4px 0 14px;
  flex-wrap: nowrap;
  background: var(--bg-2);
  border: 1px solid var(--line);
  border-radius: var(--r-lg);
  padding: 4px;
  box-shadow: inset 0 1px 2px rgba(0, 0, 0, 0.3);
}
.step {
  flex: 1 1 0;
  min-width: 0;
  text-align: center;
  text-decoration: none;
  color: var(--ink-2);
  background: transparent;
  border: 1px solid transparent;
  border-radius: var(--r-md);
  padding: 8px 6px;
  font-weight: 600;
  font-size: 0.92rem;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  transition: background 0.18s ease, color 0.18s ease, box-shadow 0.18s ease;
}
.step:hover {
  color: var(--ink);
  background: var(--panel);
}
.step.on {
  background: linear-gradient(135deg, var(--gold), var(--gold-2));
  color: var(--ink-on);
  box-shadow: 0 2px 8px rgba(240, 184, 91, 0.4);
}
.empty-screen h2 { margin-top: 1rem; }

/* ==========================================================================
   s1-table — refined
   ========================================================================== */
.screen-wrap { overflow: auto; max-height: 75vh; border-radius: var(--r-md); border: 1px solid var(--line); }
.s1-table { font-size: 13px; }
.s1-table thead th {
  position: sticky;
  top: 0;
  z-index: 2;
  background: var(--bg-2);
  box-shadow: inset 0 -1px 0 var(--line);
}
.s1-table th:first-child,
.s1-table td:first-child {
  position: sticky;
  left: 0;
  z-index: 1;
  background: var(--bg-2);
}
.s1-table thead th:first-child { z-index: 3; background: var(--bg-2); }
.s1-table tbody tr.near td:first-child { background: rgba(240, 184, 91, 0.12); }
.s1-table th, .s1-table td { white-space: nowrap; }
.s1-table td.num .muted { display: block; font-size: 12px; font-weight: 400; }
a.summary-jump { margin-left: 0.35rem; font-size: 12px; font-weight: 600; color: var(--cyan); }
.s1-table td.name, .s1-table td.period, .s1-table td.fcf,
.s1-table td.gate, .s1-table td.src, .s1-table td.stop, .s1-table td.note, .s1-table td.price { white-space: normal; }
.s1-table td.amt, .s1-table td.s4c { white-space: nowrap; }
.s1-table td.name { max-width: 14rem; }
.s1-table td.fcf { max-width: 11rem; }
.s1-table td.gate, .s1-table td.src, .s1-table td.stop, .s1-table td.note { max-width: 16rem; }
.s1-table td.gate .muted, .s1-table td.src span, .s1-table td.stop .muted, .s1-table td.s4c .muted,
.s1-cards .muted, .s1-cards .src span { display: block; }
.fcf-n { display: inline-block; margin-right: 0.55rem; white-space: nowrap; font-variant-numeric: tabular-nums; }
.fcf-chart { display: block; height: 40px; width: auto; max-width: 100%; margin: 2px 0 4px; }
.fcf-chart.wide { height: 78px; }
.fcf-chart .fcf-up { fill: var(--good); }
.fcf-chart .fcf-down { fill: var(--bad); }
.fcf-chart .fcf-gap { fill: var(--muted); }
.fcf-chart .fcf-zero { stroke: var(--muted); stroke-width: 1; }
.fcf-chart .fcf-year { fill: var(--muted); }
.name-zh { font-weight: 700; }
.source-note, .name-zh { display: block; }
tr.near td, .card.near { background: rgba(240, 184, 91, 0.08); }

.badge {
  background: var(--bg-2);
  color: var(--ink-2);
  border-color: var(--line);
  font-size: 12px;
}
.badge.miss, .badge.review { background: rgba(240, 184, 91, 0.15); color: var(--gold); border-color: rgba(240, 184, 91, 0.4); }
.badge.both { background: rgba(95, 198, 184, 0.15); color: var(--teal); border-color: rgba(95, 198, 184, 0.4); }
.badge.ai { background: rgba(143, 182, 255, 0.15); color: var(--info); border-color: rgba(143, 182, 255, 0.4); }

.qbox { margin-top: 18px; border-top: 1px solid var(--line); padding-top: 12px; }
.qbox ul { margin: 10px 0; padding-left: 1.2rem; }
.screen-foot { margin-top: 18px; color: var(--muted); }
.screen-foot p { margin: 2px 0; }
.summary-steps { display: grid; gap: 12px; }
.summary-steps .panel:nth-child(1) { border-top: 3px solid var(--gold); }
.summary-steps .panel:nth-child(2) { border-top: 3px solid var(--cyan); }
.summary-steps .panel:nth-child(3) { border-top: 3px solid var(--info); }
.summary-steps .panel:nth-child(4) { border-top: 3px solid var(--bad); }
.summary-steps .panel:nth-child(5) { border-top: 3px solid var(--good); }

#pdf { border-top: 3px solid var(--gold); }
#toc { border-top: 3px solid var(--cyan); }
#items { border-top: 3px solid var(--info); }
#slices { border-top: 3px solid var(--bad); }
#text { border-top: 3px solid var(--good); }

.cards a.card, .s1-cards .card { border-left: 4px solid var(--cyan); }
.s1-cards .card.near, .card.near { border-left-color: var(--gold); }

@media (min-width: 900px) {
  .summary-steps { grid-template-columns: 1fr 1fr; }
}

/* ==========================================================================
   Heat map (3-dot per cell)
   ========================================================================== */
.heat-map { margin: 6px 0 14px; }
.heat-map h2 { margin-bottom: 0.4rem; }
.heat-key {
  display: flex;
  flex-wrap: wrap;
  gap: 6px 18px;
  align-items: center;
  margin: 0 0 8px;
  font-size: 13px;
  line-height: 1.7;
}
.heat-key i {
  display: inline-block;
  width: 12px;
  height: 12px;
  border-radius: 4px;
  margin: 0 4px 0 10px;
  vertical-align: -2px;
  box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.08);
}
.heat-key i:first-child { margin-left: 0; }
.heat-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(78px, 1fr));
  gap: 6px;
  max-height: 320px;
  overflow: auto;
  padding: 10px;
  border: 1px solid var(--line);
  border-radius: var(--r-md);
  background: linear-gradient(180deg, var(--bg-2) 0%, var(--bg) 100%);
  box-shadow: inset 0 1px 2px rgba(0, 0, 0, 0.3);
}
.heat-cell {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 4px;
  min-height: 50px;
  padding: 6px 4px;
  border-radius: var(--r-sm);
  text-decoration: none;
  color: var(--ink-on);
  line-height: 1.2;
  font-size: 11px;
  font-weight: 600;
  box-shadow: var(--shadow-sm), inset 0 1px 0 rgba(255, 255, 255, 0.08);
  transition: transform 0.15s ease, box-shadow 0.15s ease;
  position: relative;
}
.heat-cell:hover {
  transform: translateY(-2px) scale(1.04);
  box-shadow: var(--shadow-md), inset 0 1px 0 rgba(255, 255, 255, 0.15);
  z-index: 2;
}
.heat-code { font-weight: 800; font-size: 13px; font-variant-numeric: tabular-nums; }
.heat-status { font-size: 10.5px; font-weight: 600; opacity: 0.92; }

.heat-pass, .heat-low, .heat-all { background: linear-gradient(135deg, var(--good), #5cb95d); color: var(--ink-on); }
.heat-s12 { background: linear-gradient(135deg, var(--teal), #4ab29f); color: #08211e; }
.heat-s13 { background: linear-gradient(135deg, var(--gold), var(--gold-2)); color: #1b160c; }
.heat-s23 { background: linear-gradient(135deg, var(--info), #6d99e0); color: #0e1c33; }
.heat-mid { background: linear-gradient(135deg, var(--teal), #4ab29f); color: #08211e; }
.heat-near, .heat-high { background: linear-gradient(135deg, var(--gold), var(--gold-2)); color: #1b160c; }
.heat-one { background: linear-gradient(135deg, #4a5a4f, #3a4a3f); color: #e6efe0; }
.heat-fail, .heat-hot { background: linear-gradient(135deg, var(--bad), #d96b6b); color: #3a1210; }
.heat-cannot { background: linear-gradient(135deg, #c45c52, #a04a40); color: #fff8f6; }
.heat-miss { background: linear-gradient(135deg, #3a4438, #2d342c); color: #d7e0d2; }

.heat-dots { display: inline-flex; gap: 4px; margin-top: 2px; }
.heat-dots .dot, .heat-key .dot {
  width: 9px;
  height: 9px;
  border-radius: 50%;
  display: inline-block;
  box-shadow: inset 0 0 0 1px rgba(0, 0, 0, 0.5);
}
.heat-key .dot { margin-right: 3px; }
.dot-pass { background: var(--good); }
.dot-near { background: var(--gold); }
.dot-fail { background: var(--bad); }
.dot-miss { background: #4a5550; }

/* ==========================================================================
   Responsive
   ========================================================================== */
@media (max-width: 800px) {
  body { overflow-x: hidden; }
  .top, main {
    padding-left: max(14px, env(safe-area-inset-left));
    padding-right: max(14px, env(safe-area-inset-right));
  }
  .top { padding-top: max(10px, env(safe-area-inset-top)); }
  main { padding-bottom: 28px; }
  .top .muted { font-size: 13px; }
  .filters { grid-template-columns: 1fr 1fr; }
  .filters input[name="code"],
  .filters input[name="q"],
  .filters button { grid-column: 1 / -1; }
  input, select, button, .step, .pager a { min-height: 44px; }
  .desk { display: none; }
  .cards { display: grid; gap: 12px; }
  .card { padding: 14px; }
  h1 { font-size: 1.3rem; }
  iframe { height: 60vh; }
  .steps { padding: 3px; gap: 3px; }
  .step { padding: 7px 2px; font-size: 12.5px; }
  .kpis { grid-template-columns: 1fr 1fr; }
  .heat-grid { max-height: 280px; grid-template-columns: repeat(auto-fill, minmax(72px, 1fr)); }
  .screen-search { flex-wrap: wrap; }
  .screen-search button, .price-refresh button { width: 100%; }
  .price-refresh { align-items: stretch; }
  .fcf-n { display: inline-block; }
  .pager { flex-wrap: wrap; }
  .pager a {
    display: inline-flex;
    align-items: center;
    padding: 9px 16px;
    border-radius: var(--r-md);
    background: var(--bg-2);
    border: 1px solid var(--line);
    text-decoration: none;
  }
  .s1-cards .card strong { font-size: 1.05rem; }
  .cited-table, .summary-list { font-size: 15px; }
}

.screen-entry { margin: 0.15rem 0 0.55rem; }
.summary-links { margin: 0.3rem 0 0.8rem; }
.summary-list { margin: 0.3rem 0; padding-left: 1.15rem; }
.summary-list li { margin: 0.12rem 0; }
.cited-table td.raw, .cited-table td.label { white-space: normal; max-width: 22rem; }

.keith-ai-panel { border: 1px solid rgba(143, 182, 255, 0.5); border-top: 3px solid var(--info); }

.screen-search select {
  min-width: 9rem;
  background: var(--bg);
  color: var(--ink);
  border: 1px solid var(--line);
  border-radius: var(--r-md);
  padding: 9px 10px;
}
.sort-link { color: inherit; text-decoration: none; white-space: nowrap; transition: color 0.15s ease; }
.sort-link:hover { color: var(--gold); }
.sort-link.on { color: var(--gold); }

.filing-check-panel { margin: 14px 0 18px; }
.filing-check-actions { margin-top: 10px; }

/* ==========================================================================
   5S radar + coverage (stock page)
   ========================================================================== */
.five-s-layout {
  display: grid;
  grid-template-columns: 240px 1fr;
  gap: 18px;
  align-items: start;
}
.five-s-table { overflow: auto; }
.radar-wrap { display: flex; flex-direction: column; align-items: center; }
.radar { display: block; filter: drop-shadow(0 2px 6px rgba(0,0,0,0.4)); }

.coverage-bar {
  position: relative;
  width: 90px;
  height: 16px;
  background: var(--bg);
  border: 1px solid var(--line);
  border-radius: 999px;
  overflow: hidden;
  display: inline-block;
  vertical-align: middle;
}
.coverage-bar-fill {
  position: absolute;
  top: 0; left: 0; bottom: 0;
  width: 0%;
  border-radius: 999px;
  transition: width 0.3s ease;
  opacity: 0.85;
}
.coverage-bar-text {
  position: absolute;
  top: 0; left: 0; right: 0; bottom: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 10.5px;
  font-weight: 700;
  color: var(--ink);
  text-shadow: 0 0 2px rgba(0,0,0,0.6);
  font-variant-numeric: tabular-nums;
}

@media (max-width: 800px) {
  .five-s-layout { grid-template-columns: 1fr; }
  .radar-wrap { margin: 0 auto; }
}

.trend-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(310px, 1fr));
  gap: 12px;
  margin-top: 8px;
}
.trend-cell {
  background: var(--bg-2);
  border: 1px solid var(--line);
  border-radius: var(--r-md);
  padding: 10px;
  transition: border-color 0.18s ease;
}
.trend-cell:hover { border-color: var(--line-2); }
.trend-chart { display: block; max-width: 100%; height: auto; }

/* Watchlist */
.watch-toggle {
  width: auto;
  display: inline-flex;
  align-items: center;
  margin-left: 4px;
  background: var(--bg-2);
  color: var(--ink);
  border: 1px solid var(--line);
  box-shadow: none;
  padding: 4px 12px;
  font-size: 0.92rem;
  font-weight: 600;
}
.watch-toggle:hover { background: var(--panel); }
.watch-toggle.watch-on {
  background: rgba(240, 184, 91, 0.18);
  border-color: rgba(240, 184, 91, 0.5);
  color: var(--gold);
  box-shadow: var(--shadow-glow-gold);
}
.watchlist-toolbar {
  display: flex;
  align-items: center;
  gap: 10px;
  margin: 12px 0;
  flex-wrap: wrap;
}
.watchlist-toolbar input { max-width: 220px; }
.watchlist-toolbar button { width: auto; min-width: 5rem; }
.watchlist-table { font-size: 14px; }
.watchlist-table th, .watchlist-table td { padding: 10px 8px; }
.watchlist-table tbody tr:hover { background: rgba(255, 255, 255, 0.025); }
.watch-remove {
  width: auto;
  padding: 4px 10px;
  font-size: 0.85rem;
  background: var(--bg-2);
  color: var(--ink-2);
  border: 1px solid var(--line);
  box-shadow: none;
}
.watch-remove:hover {
  background: rgba(240, 133, 133, 0.15);
  color: var(--bad);
  border-color: rgba(240, 133, 133, 0.4);
}

/* ==========================================================================
   5S 摘要頁 mobile-first layout
   ========================================================================== */
.s5-stock-page { max-width: 720px; margin: 0 auto; }

/* Sticky top nav (mobile) */
.s5-topnav {
  position: sticky;
  top: 0;
  z-index: 20;
  display: flex;
  align-items: center;
  gap: 6px;
  padding: 8px 14px;
  background: rgba(14, 17, 22, 0.92);
  backdrop-filter: saturate(160%) blur(12px);
  -webkit-backdrop-filter: saturate(160%) blur(12px);
  border-bottom: 1px solid var(--line);
}
.s5-topnav .back {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 36px;
  height: 36px;
  border-radius: 8px;
  background: var(--bg-2);
  color: var(--ink);
  text-decoration: none;
  font-size: 18px;
  flex-shrink: 0;
}
.s5-topnav .back:hover { background: var(--panel); }
.s5-topnav .title {
  flex: 1;
  font-size: 16px;
  font-weight: 700;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  display: flex;
  align-items: baseline;
  gap: 6px;
}
.s5-topnav .title .code { color: var(--gold); font-variant-numeric: tabular-nums; }
.s5-topnav .title .name { color: var(--ink-2); font-weight: 500; font-size: 14px; }
.s5-topnav .share {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 36px;
  height: 36px;
  border-radius: 8px;
  background: var(--bg-2);
  color: var(--ink-2);
  text-decoration: none;
  font-size: 16px;
  flex-shrink: 0;
  border: 1px solid var(--line);
}
.s5-topnav .share:hover { color: var(--cyan); border-color: var(--cyan); }

/* Summary card (the hero, "5-second judgment") */
.s5-summary {
  margin: 12px 14px;
  padding: 16px;
  background: var(--bg-2);
  border: 1px solid var(--line);
  border-radius: var(--r-lg);
  display: grid;
  gap: 12px;
  box-shadow: var(--shadow-sm);
}
.s5-summary .row1 {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  gap: 10px;
}
.s5-summary .coe-block {
  display: flex;
  align-items: baseline;
  gap: 6px;
}
.s5-summary .coe-block .label { color: var(--muted); font-size: 12px; }
.s5-summary .coe-block .value {
  font-size: 26px;
  font-weight: 800;
  font-variant-numeric: tabular-nums;
  letter-spacing: -0.01em;
}
.s5-summary .coe-block .value.pass { color: var(--good); }
.s5-summary .coe-block .value.near { color: var(--gold); }
.s5-summary .coe-block .value.fail { color: var(--bad); }
.s5-summary .coe-block .value.miss { color: var(--muted); }
.s5-summary .price-block { text-align: right; }
.s5-summary .price-block .label { color: var(--muted); font-size: 12px; }
.s5-summary .price-block .value {
  font-size: 18px;
  font-weight: 700;
  font-variant-numeric: tabular-nums;
  color: var(--ink);
}

.s5-summary .badges {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 6px;
}
.s5-summary .badge-cell {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 2px;
  padding: 8px 4px;
  border-radius: 8px;
  background: rgba(255, 255, 255, 0.02);
  border: 1px solid var(--line-2);
  cursor: pointer;
  transition: transform 0.12s ease, box-shadow 0.12s ease;
}
.s5-summary .badge-cell:hover {
  transform: translateY(-1px);
  border-color: var(--cyan);
}
.s5-summary .badge-cell .sname { font-size: 11px; color: var(--muted); font-weight: 600; }
.s5-summary .badge-cell .state {
  font-size: 12px;
  font-weight: 700;
  padding: 1px 8px;
  border-radius: 999px;
  border: 1px solid transparent;
}
.s5-summary .badge-cell .state.s-pass { background: rgba(121, 208, 122, 0.15); color: var(--good); border-color: rgba(121, 208, 122, 0.4); }
.s5-summary .badge-cell .state.s-fail { background: rgba(240, 133, 133, 0.15); color: var(--bad); border-color: rgba(240, 133, 133, 0.4); }
.s5-summary .badge-cell .state.s-near { background: rgba(240, 184, 91, 0.15); color: var(--gold); border-color: rgba(240, 184, 91, 0.4); }
.s5-summary .badge-cell .state.s-miss { background: rgba(125, 133, 144, 0.18); color: var(--ink-2); border-color: rgba(125, 133, 144, 0.35); }
.s5-summary .badge-cell .state.s-other { background: rgba(125, 133, 144, 0.12); color: var(--ink-2); border-color: var(--line-2); }

.s5-summary .meta {
  display: flex;
  justify-content: space-between;
  font-size: 12px;
  color: var(--muted);
  padding-top: 8px;
  border-top: 1px dashed var(--line-2);
}

/* Accordion C1-C4 */
.s5-accordion { margin: 0 14px 12px; display: grid; gap: 8px; }
.s5-acc-item {
  background: var(--bg-2);
  border: 1px solid var(--line);
  border-radius: var(--r-md);
  overflow: hidden;
  position: relative;
}
.s5-acc-item::before {
  content: "";
  position: absolute;
  left: 0; top: 0; bottom: 0;
  width: 4px;
  background: var(--line);
}
.s5-acc-item.s-pass::before { background: var(--good); }
.s5-acc-item.s-fail::before { background: var(--bad); }
.s5-acc-item.s-near::before { background: var(--gold); }
.s5-acc-item.s-miss::before { background: var(--muted); }
.s5-acc-header {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 12px 14px;
  cursor: pointer;
  user-select: none;
  -webkit-tap-highlight-color: transparent;
  min-height: 48px;
}
.s5-acc-header:hover { background: var(--panel); }
.s5-acc-header .label { font-weight: 700; font-size: 15px; color: var(--ink); flex: 1; }
.s5-acc-header .label .num { color: var(--gold); margin-right: 4px; }
.s5-acc-header .state-chip {
  font-size: 12px;
  font-weight: 700;
  padding: 2px 9px;
  border-radius: 999px;
  border: 1px solid transparent;
}
.s5-acc-header .state-chip.s-pass { background: rgba(121, 208, 122, 0.15); color: var(--good); border-color: rgba(121, 208, 122, 0.4); }
.s5-acc-header .state-chip.s-fail { background: rgba(240, 133, 133, 0.15); color: var(--bad); border-color: rgba(240, 133, 133, 0.4); }
.s5-acc-header .state-chip.s-near { background: rgba(240, 184, 91, 0.15); color: var(--gold); border-color: rgba(240, 184, 91, 0.4); }
.s5-acc-header .state-chip.s-miss { background: rgba(125, 133, 144, 0.18); color: var(--ink-2); border-color: rgba(125, 133, 144, 0.35); }
.s5-acc-header .state-chip.s-other { background: rgba(125, 133, 144, 0.12); color: var(--ink-2); border-color: var(--line-2); }
.s5-acc-header .chev {
  width: 20px;
  text-align: center;
  color: var(--muted);
  font-size: 14px;
  transition: transform 0.18s ease;
}
.s5-acc-item.open .s5-acc-header .chev { transform: rotate(90deg); color: var(--ink); }
.s5-acc-body {
  display: none;
  padding: 0 14px 14px;
  border-top: 1px solid var(--line-2);
}
.s5-acc-item.open .s5-acc-body { display: block; }
.s5-acc-body ul {
  list-style: none;
  margin: 12px 0 0;
  padding: 0;
  display: grid;
  gap: 6px;
}
.s5-acc-body li {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  gap: 8px;
  font-size: 14px;
  line-height: 1.5;
  padding: 6px 0;
  border-bottom: 1px dashed var(--line-2);
}
.s5-acc-body li:last-child { border-bottom: none; }
.s5-acc-body .gate-label { color: var(--ink-2); flex: 1; min-width: 0; }
.s5-acc-body .gate-label strong { color: var(--ink); font-weight: 700; }
.s5-acc-body .gate-detail { color: var(--muted); font-size: 12px; font-variant-numeric: tabular-nums; }
.s5-acc-body .summary-list { list-style: none; margin: 8px 0 0; padding: 0; }

/* FCF mini bars (5-year FCF section) */
.s5-fcf-mini { display: grid; gap: 6px; margin-top: 8px; }
.s5-fcf-row {
  display: grid;
  grid-template-columns: 44px 1fr 80px;
  gap: 8px;
  align-items: center;
  font-variant-numeric: tabular-nums;
  font-size: 13px;
}
.s5-fcf-row .year { color: var(--muted); }
.s5-fcf-row .bar-wrap { position: relative; height: 16px; background: var(--bg); border-radius: 4px; overflow: hidden; }
.s5-fcf-row .bar {
  position: absolute;
  top: 0; bottom: 0; left: 0;
  background: linear-gradient(90deg, var(--good), #5cb95d);
  border-radius: 4px;
}
.s5-fcf-row .bar.negative { background: linear-gradient(90deg, var(--bad), #d96b6b); }
.s5-fcf-row .value { text-align: right; font-weight: 600; }
.s5-fcf-row .value.pos { color: var(--good); }
.s5-fcf-row .value.neg { color: var(--bad); }

/* Cited items (所用科目) */
.s5-cited {
  display: grid;
  grid-template-columns: 1fr;
  gap: 6px;
  margin-top: 8px;
}
.s5-cited-card {
  background: var(--bg);
  border: 1px solid var(--line);
  border-radius: 8px;
  padding: 10px 12px;
  display: grid;
  gap: 2px;
}
.s5-cited-card .yr-key { font-size: 13px; font-weight: 700; color: var(--gold); }
.s5-cited-card .raw { font-size: 12px; color: var(--ink-2); }
.s5-cited-card .val { font-size: 14px; font-weight: 600; font-variant-numeric: tabular-nums; }
.s5-cited-card .conf { font-size: 11px; color: var(--muted); }
.s5-cited-card .missing { color: var(--muted); font-style: italic; }

/* Sticky bottom action bar */
.s5-bottombar {
  position: sticky;
  bottom: 0;
  z-index: 20;
  display: flex;
  gap: 8px;
  padding: 10px 14px;
  background: rgba(14, 17, 22, 0.92);
  backdrop-filter: saturate(160%) blur(12px);
  -webkit-backdrop-filter: saturate(160%) blur(12px);
  border-top: 1px solid var(--line);
}
.s5-bottombar button, .s5-bottombar a.btn {
  flex: 1;
  min-height: 44px;
  padding: 10px 14px;
  border-radius: 10px;
  font-weight: 700;
  font-size: 14px;
  text-align: center;
  cursor: pointer;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  text-decoration: none;
  background: var(--bg-2);
  color: var(--ink);
  border: 1px solid var(--line);
}
.s5-bottombar .btn-primary {
  background: linear-gradient(135deg, var(--gold), var(--gold-2));
  color: var(--ink-on);
  border-color: transparent;
  box-shadow: 0 2px 8px rgba(240, 184, 91, 0.3);
}

/* Disclaimer (above sticky bottom) */
.s5-disclaimer {
  margin: 0 14px 80px;
  font-size: 11px;
  color: var(--muted);
  text-align: center;
  padding: 8px;
  border-top: 1px dashed var(--line-2);
}

/* Bigger screens (tablet / desktop): more horizontal real estate */
@media (min-width: 720px) {
  .s5-summary .badges { gap: 10px; }
  .s5-summary .badge-cell { padding: 10px 8px; }
  .s5-fcf-row { grid-template-columns: 60px 1fr 100px; }
}

/* Mid-block text (used for empty states / "needs more" hints) */
.s5-empty { color: var(--muted); font-size: 13px; padding: 8px 0; }


/* Calculator home (.calc-cat*) moved to calc.css — Peter UX/perf 2026-10-15
   (loaded only on /calc*). Breadcrumb stays sitewide (also used on /market). */

/* ==========================================================================
   Learning resources page (/learn)
   ========================================================================== */
.learn-page { max-width: 720px; margin: 0 auto; }

.learn-grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: 10px;
  margin-top: 12px;
}
.learn-card {
  display: flex;
  flex-direction: column;
  gap: 4px;
  padding: 12px 14px;
  background: var(--bg);
  border: 1px solid var(--line);
  border-radius: var(--r-sm);
  text-decoration: none;
  color: var(--ink);
  transition: transform 0.15s ease, border-color 0.15s ease, box-shadow 0.15s ease;
}
.learn-card:hover {
  transform: translateY(-1px);
  border-color: var(--cyan);
  box-shadow: var(--shadow-glow-cyan);
  text-decoration: none;
}
.learn-card.learn-book {
  background: var(--bg);
  border-color: var(--line-2);
}
.learn-title {
  font-size: 15px;
  color: var(--gold);
  font-weight: 700;
  line-height: 1.4;
}
.learn-card.learn-book .learn-title { color: var(--ink); }
.learn-desc {
  font-size: 13px;
  color: var(--ink-2);
  line-height: 1.5;
  display: block;
}
.learn-domain {
  font-size: 11px;
  color: var(--muted);
  font-family: ui-monospace, SFMono-Regular, Menlo, monospace;
  letter-spacing: 0.02em;
}
.learn-purchase {
  display: flex;
  gap: 6px;
  flex-wrap: wrap;
  margin-top: 6px;
  padding-top: 8px;
  border-top: 1px dashed var(--line-2);
}
.learn-buy {
  display: inline-flex;
  align-items: center;
  gap: 3px;
  font-size: 12px;
  font-weight: 600;
  padding: 4px 10px;
  border-radius: 999px;
  background: var(--bg-2);
  color: var(--ink);
  text-decoration: none;
  border: 1px solid var(--line);
  transition: all 0.12s ease;
}
.learn-buy:hover {
  background: var(--gold);
  color: var(--ink-on);
  border-color: var(--gold);
  transform: translateY(-1px);
  text-decoration: none;
}
.learn-buy-search {
  background: transparent;
  color: var(--muted);
  border-color: var(--line-2);
}
.learn-buy-search:hover {
  background: var(--cyan);
  color: var(--ink-on);
  border-color: var(--cyan);
}

/* 為何推薦 */
.learn-why {
  display: grid;
  grid-template-columns: auto 1fr;
  gap: 4px 8px;
  margin-top: 8px;
  padding: 8px 10px;
  background: var(--bg-2);
  border: 1px solid var(--line-2);
  border-radius: var(--r-sm);
  align-items: start;
}
.learn-why-label {
  font-size: 11px;
  font-weight: 700;
  color: var(--gold);
  text-transform: uppercase;
  letter-spacing: 0.04em;
  padding-top: 1px;
  white-space: nowrap;
}
.learn-why-text {
  font-size: 12px;
  color: var(--ink-2);
  line-height: 1.55;
}

/* 5S mapping chips */
.learn-maps {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 5px;
  margin-top: 6px;
}
.learn-maps-label {
  font-size: 11px;
  color: var(--muted);
  font-weight: 600;
  letter-spacing: 0.02em;
}
.learn-maps-chip {
  display: inline-block;
  font-size: 11px;
  font-weight: 700;
  padding: 2px 8px;
  border-radius: 999px;
  background: linear-gradient(135deg, var(--gold), var(--gold-2));
  color: var(--ink-on);
  border: 1px solid transparent;
  white-space: nowrap;
}

@media (min-width: 540px) {
  .learn-grid { grid-template-columns: 1fr 1fr; }
}
@media (min-width: 720px) {
  .learn-grid { grid-template-columns: 1fr 1fr 1fr; }
}


/* Breadcrumb */
.calc-breadcrumb {
  font-size: 12px;
  color: var(--muted);
  margin-bottom: 8px;
}
.calc-breadcrumb a { color: var(--muted); text-decoration: none; }
.calc-breadcrumb a:hover { color: var(--cyan); }
.calc-breadcrumb .sep { margin: 0 6px; opacity: 0.5; }
.calc-breadcrumb .current { color: var(--ink); font-weight: 600; }

/* 5S gate state chips */
.tone {
  display: inline-flex;
  align-items: center;
  border-radius: 999px;
  padding: 2px 9px;
  font-size: 12px;
  font-weight: 700;
  line-height: 1.6;
  white-space: nowrap;
  font-family: ui-monospace, "SF Mono", "Menlo", monospace;
  border: 1px solid transparent;
}
.tone.tone-pass { background: rgba(121, 208, 122, 0.15); color: var(--good); border-color: rgba(121, 208, 122, 0.4); }
.tone.tone-fail { background: rgba(240, 133, 133, 0.15); color: var(--bad); border-color: rgba(240, 133, 133, 0.4); }
.tone.tone-miss { background: rgba(125, 133, 144, 0.18); color: var(--ink-2); border-color: rgba(125, 133, 144, 0.35); }
.tone.tone-warn { background: rgba(240, 184, 91, 0.15); color: var(--gold); border-color: rgba(240, 184, 91, 0.4); }

#text-body { max-height: 50vh; }
#text .screen-search { margin: 6px 0 12px; }
#text code {
  background: var(--bg);
  padding: 1px 5px;
  border-radius: 4px;
  font-family: ui-monospace, "SF Mono", Menlo, monospace;
  border: 1px solid var(--line);
}
#text ol li { margin: 4px 0; }

/* ==========================================================================
   Tiny UX polish
   ========================================================================== */
::selection {
  background: rgba(240, 184, 91, 0.35);
  color: var(--ink);
}
::-webkit-scrollbar { width: 10px; height: 10px; }
::-webkit-scrollbar-track { background: var(--bg); }
::-webkit-scrollbar-thumb { background: var(--line); border-radius: 999px; }
::-webkit-scrollbar-thumb:hover { background: var(--line-2); }


/* ============== Login / Apply / Pending / Admin ============== */
.login-page {
  max-width: 480px;
  margin: 60px auto;
  padding: 0 20px;
}
.login-card {
  background: var(--bg-2);
  border: 1px solid var(--line);
  border-radius: var(--r-lg, 16px);
  padding: 40px 32px;
  box-shadow: 0 4px 24px rgba(0,0,0,0.3);
}
.login-card-wide { max-width: 560px; }
.login-title {
  margin: 0 0 8px;
  font-size: 28px;
  font-weight: 800;
  text-align: center;
  color: var(--ink);
}
.login-sub {
  margin: 0 0 32px;
  font-size: 14px;
  text-align: center;
  color: var(--muted);
}
.login-providers {
  display: flex;
  flex-direction: column;
  gap: 12px;
  margin-bottom: 24px;
}
.login-page {
  position: relative;
  z-index: 20;
  isolation: isolate;
}
.login-card {
  position: relative;
  z-index: 21;
  pointer-events: auto !important;
}
.login-btn-google,
.login-btn-github {
  position: relative;
  z-index: 22;
  pointer-events: auto !important;
  -webkit-tap-highlight-color: rgba(240, 184, 91, 0.35);
}
body.page-auth #nav-backdrop {
  display: none !important;
  pointer-events: none !important;
}

.login-btn {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 12px;
  padding: 14px 20px;
  background: var(--panel);
  border: 1px solid var(--line-2);
  border-radius: var(--r-md, 10px);
  color: var(--ink);
  text-decoration: none;
  font-size: 15px;
  font-weight: 600;
  cursor: pointer;
  transition: all 0.15s;
  font-family: inherit;
}
.login-btn:hover {
  background: var(--bg-2);
  border-color: var(--gold);
  transform: translateY(-1px);
}
.login-btn-primary {
  background: var(--gold);
  color: var(--ink-on, #000);
  border: none;
  width: 100%;
}
.login-btn-primary:hover {
  background: #e6a370;
  color: var(--ink-on, #000);
}
.login-btn-secondary {
  background: var(--panel);
  color: var(--ink);
  border: 1px solid var(--line-2);
  width: 100%;
}
.login-foot {
  margin: 24px 0 0;
  font-size: 12px;
  text-align: center;
  color: var(--muted);
}
.login-foot a { color: var(--gold); }
.login-oauth-fallback {
  margin: 0 0 16px;
  text-align: center;
  font-size: 13px;
  color: var(--muted);
}
.login-oauth-fallback a {
  color: var(--gold);
  font-weight: 700;
  text-decoration: underline;
}

/* fix3 2026-10-15: extremely visible one-tap Google OAuth fallback */
.login-oauth-direct-wrap {
  margin: 0 0 10px;
  text-align: center;
}
.login-oauth-direct {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 100%;
  box-sizing: border-box;
  min-height: 56px;
  padding: 16px 18px;
  border-radius: 14px;
  background: linear-gradient(135deg, #f0b85b, #e6a370);
  color: #0e1116 !important;
  font-size: 18px;
  font-weight: 900;
  letter-spacing: 0.02em;
  text-decoration: none !important;
  border: 2px solid rgba(255, 255, 255, 0.55);
  box-shadow: 0 4px 18px rgba(240, 184, 91, 0.45);
  -webkit-tap-highlight-color: rgba(240, 184, 91, 0.5);
  touch-action: manipulation;
  cursor: pointer;
  position: relative;
  z-index: 30;
  pointer-events: auto !important;
}
.login-oauth-direct:hover,
.login-oauth-direct:focus-visible {
  background: linear-gradient(135deg, #e6a370, #f0b85b);
  outline: 3px solid rgba(240, 184, 91, 0.7);
  outline-offset: 2px;
}
.login-oauth-direct-hint {
  margin: 0 0 20px;
  text-align: center;
  font-size: 13px;
  font-weight: 600;
  color: var(--gold);
  line-height: 1.4;
}
.login-oauth-fallback-box {
  margin: 8px 0 20px;
  padding: 16px 14px;
  border-radius: 12px;
  border: 2px dashed rgba(240, 184, 91, 0.7);
  background: rgba(240, 184, 91, 0.08);
  text-align: center;
  position: relative;
  z-index: 30;
  pointer-events: auto !important;
}
.login-oauth-fallback-title {
  margin: 0 0 10px;
  font-size: 15px;
  font-weight: 800;
  color: var(--ink);
}
.login-oauth-fallback-link {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: 48px;
  padding: 12px 20px;
  border-radius: 10px;
  background: var(--panel);
  border: 2px solid var(--gold);
  color: var(--gold) !important;
  font-size: 16px;
  font-weight: 900;
  text-decoration: none !important;
  -webkit-tap-highlight-color: rgba(240, 184, 91, 0.45);
  touch-action: manipulation;
  pointer-events: auto !important;
}
.login-oauth-fallback-link:hover,
.login-oauth-fallback-link:focus-visible {
  background: rgba(240, 184, 91, 0.15);
  outline: none;
}
.login-oauth-fallback-url {
  margin: 12px 0 0;
  font-size: 12px;
  color: var(--muted);
  word-break: break-all;
}
.login-oauth-fallback-url code {
  display: inline-block;
  margin-top: 4px;
  padding: 4px 8px;
  border-radius: 6px;
  background: rgba(0,0,0,0.35);
  color: var(--gold);
  font-size: 11px;
}
.login-refresh-hint {
  display: inline-block;
  margin-top: 8px;
  color: var(--gold);
  font-weight: 700;
  text-decoration: underline;
}

.alert {
  padding: 10px 14px;
  border-radius: var(--r-md, 10px);
  margin-bottom: 16px;
  font-size: 14px;
}
.alert-success { background: rgba(121,208,122,0.15); border: 1px solid rgba(121,208,122,0.4); color: var(--good, #79d07a); }
.alert-error { background: rgba(240,133,133,0.15); border: 1px solid rgba(240,133,133,0.4); color: var(--bad, #f08585); }
.alert-warning { background: rgba(240,184,91,0.15); border: 1px solid rgba(240,184,91,0.4); color: var(--gold); }
.alert code { background: rgba(0,0,0,0.3); padding: 2px 6px; border-radius: 4px; font-size: 12px; }

/* Apply form */
.apply-user-info {
  display: flex;
  gap: 16px;
  align-items: center;
  padding: 16px;
  background: var(--bg);
  border-radius: var(--r-md, 10px);
  margin-bottom: 24px;
}
.apply-avatar { width: 56px; height: 56px; border-radius: 50%; border: 2px solid var(--gold); }
.apply-name { font-size: 16px; font-weight: 700; color: var(--ink); }
.apply-email { font-size: 13px; color: var(--muted); margin-top: 2px; }
.apply-provider { font-size: 11px; color: var(--muted); text-transform: uppercase; margin-top: 2px; }
.apply-form { display: flex; flex-direction: column; gap: 8px; }
.apply-label { font-size: 14px; font-weight: 600; color: var(--ink); margin-top: 8px; }
.apply-textarea {
  width: 100%;
  padding: 12px 14px;
  background: var(--bg);
  border: 1px solid var(--line-2);
  border-radius: var(--r-md, 10px);
  color: var(--ink);
  font-family: inherit;
  font-size: 14px;
  resize: vertical;
  min-height: 100px;
  box-sizing: border-box;
}
.apply-textarea:focus { outline: none; border-color: var(--gold); }
.apply-hint { font-size: 12px; color: var(--muted); margin: 0; }
.apply-actions { display: flex; gap: 12px; align-items: center; margin-top: 16px; }
.apply-cancel { font-size: 14px; color: var(--muted); text-decoration: none; padding: 8px 12px; }
.apply-cancel:hover { color: var(--ink); }

.status-badge {
  display: inline-block;
  padding: 2px 8px;
  border-radius: 999px;
  font-size: 11px;
  font-weight: 700;
  text-transform: uppercase;
}
.status-pending { background: rgba(240,184,91,0.2); color: var(--gold); }
.status-approved { background: rgba(121,208,122,0.2); color: var(--good); }
.status-blocked { background: rgba(240,133,133,0.2); color: var(--bad); }

.pending-message { text-align: center; padding: 24px 0; }
.pending-message p { margin: 8px 0; color: var(--ink); }
.pending-sub { font-size: 13px; color: var(--muted); }
.pending-note { background: var(--bg); border-radius: var(--r-md, 10px); padding: 16px; margin: 16px 0; }
.pending-note-label { font-size: 12px; color: var(--muted); margin-bottom: 6px; }
.pending-note-text { color: var(--ink); font-size: 14px; line-height: 1.5; }
.pending-actions { display: flex; gap: 12px; align-items: center; }

/* Admin approvals */
.admin-page { max-width: 1100px; margin: 0 auto; padding: 0 20px; }
.admin-title { font-size: 28px; font-weight: 800; margin: 32px 0 24px; color: var(--ink); }
.admin-stats { display: grid; grid-template-columns: repeat(3, 1fr); gap: 12px; margin-bottom: 32px; }
.admin-stat { background: var(--bg-2); border: 1px solid var(--line); border-radius: var(--r-md, 10px); padding: 20px; text-align: center; }
.admin-stat-num { font-size: 36px; font-weight: 800; color: var(--ink); }
.admin-stat-label { font-size: 13px; color: var(--muted); margin-top: 4px; }
.admin-stat-pending { border-color: rgba(240,184,91,0.4); }
.admin-stat-pending .admin-stat-num { color: var(--gold); }
.admin-stat-approved { border-color: rgba(121,208,122,0.4); }
.admin-stat-approved .admin-stat-num { color: var(--good); }
.admin-stat-blocked { border-color: rgba(240,133,133,0.4); }
.admin-stat-blocked .admin-stat-num { color: var(--bad); }

.admin-section { margin-bottom: 40px; }
.admin-h2 { font-size: 20px; font-weight: 700; color: var(--ink); margin-bottom: 16px; }
.admin-list { display: flex; flex-direction: column; gap: 12px; }
.admin-user {
  display: flex;
  align-items: flex-start;
  gap: 16px;
  background: var(--bg-2);
  border: 1px solid var(--line);
  border-radius: var(--r-md, 10px);
  padding: 16px;
}
.admin-user-pending { border-color: rgba(240,184,91,0.3); }
.admin-user-blocked { border-color: rgba(240,133,133,0.3); opacity: 0.7; }
.admin-avatar { width: 48px; height: 48px; border-radius: 50%; border: 2px solid var(--line-2); flex-shrink: 0; }
.admin-avatar-sm { width: 32px; height: 32px; }
.admin-user-info { flex: 1; min-width: 0; }
.admin-user-name { font-size: 15px; font-weight: 700; color: var(--ink); }
.admin-user-email { font-size: 12px; color: var(--muted); font-weight: 400; }
.admin-user-meta { font-size: 12px; color: var(--muted); margin-top: 4px; }
.admin-user-note { font-size: 13px; color: var(--ink); margin-top: 8px; padding: 8px 12px; background: var(--bg); border-radius: 6px; }
.admin-note-label { color: var(--muted); font-weight: 600; }
.admin-user-actions { display: flex; flex-direction: column; gap: 6px; flex-shrink: 0; }
.admin-btn {
  padding: 8px 14px;
  border: none;
  border-radius: var(--r-sm, 6px);
  font-size: 13px;
  font-weight: 700;
  cursor: pointer;
  font-family: inherit;
  transition: all 0.15s;
}
.admin-btn-sm { padding: 4px 10px; font-size: 12px; }
.admin-btn-approve { background: rgba(121,208,122,0.2); color: var(--good); border: 1px solid rgba(121,208,122,0.4); }
.admin-btn-approve:hover { background: var(--good); color: #000; }
.admin-btn-block { background: rgba(240,133,133,0.2); color: var(--bad); border: 1px solid rgba(240,133,133,0.4); }
.admin-btn-block:hover { background: var(--bad); color: #fff; }
.admin-empty { color: var(--muted); text-align: center; padding: 24px; }


/* ============== User menu + Login button ============== */
.nav-btn-login {
  background: linear-gradient(135deg, var(--gold), #e6a370) !important;
  color: var(--ink-on, #000) !important;
  border: 1px solid var(--gold);
  font-weight: 700;
}
.nav-btn-login:hover {
  background: linear-gradient(135deg, #e6a370, var(--gold)) !important;
  transform: translateY(-1px);
}

.user-menu { position: relative; display: inline-block; }
.user-menu-btn {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 4px 12px 4px 4px;
  background: var(--bg-2);
  border: 1px solid var(--line-2);
  border-radius: 999px;
  color: var(--ink);
  font-size: 13px;
  font-weight: 600;
  cursor: pointer;
  font-family: inherit;
  transition: all 0.15s;
}
.user-menu-btn:hover { background: var(--bg); border-color: var(--gold); }
.user-avatar {
  width: 28px;
  height: 28px;
  border-radius: 50%;
  border: 1.5px solid var(--gold);
  object-fit: cover;
}
.user-avatar-fallback {
  display: flex;
  align-items: center;
  justify-content: center;
  background: var(--gold);
  color: #000;
  font-size: 12px;
  font-weight: 800;
}
.user-menu-name { white-space: nowrap; max-width: 120px; overflow: hidden; text-overflow: ellipsis; }
.user-menu-chevron { transition: transform 0.15s; }
.user-menu-btn[aria-expanded="true"] .user-menu-chevron { transform: rotate(180deg); }

.user-menu-dropdown {
  position: absolute;
  top: calc(100% + 8px);
  right: 0;
  min-width: 260px;
  background: var(--bg-2);
  border: 1px solid var(--line);
  border-radius: var(--r-md, 10px);
  box-shadow: 0 8px 32px rgba(0,0,0,0.5);
  z-index: 100;
  overflow: hidden;
}
.user-menu-dropdown[hidden] { display: none; }
.user-menu-header {
  display: flex;
  gap: 12px;
  align-items: center;
  padding: 16px;
  background: var(--bg);
  border-bottom: 1px solid var(--line);
}
.user-avatar-lg { width: 48px; height: 48px; border-radius: 50%; border: 2px solid var(--gold); object-fit: cover; }
.user-menu-name-lg { font-size: 14px; font-weight: 700; color: var(--ink); }
.user-menu-email { font-size: 12px; color: var(--muted); margin-top: 2px; word-break: break-all; }
.user-menu-badge {
  display: inline-block;
  padding: 1px 6px;
  border-radius: 4px;
  font-size: 10px;
  font-weight: 700;
  margin-top: 4px;
}
.user-menu-badge-admin { background: rgba(240,184,91,0.2); color: var(--gold); }

.user-menu-item {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 12px 16px;
  color: var(--ink);
  text-decoration: none;
  font-size: 14px;
  border-bottom: 1px solid var(--line);
  transition: background 0.15s;
}
.user-menu-item:last-child { border-bottom: none; }
.user-menu-item:hover { background: var(--bg); }
.user-menu-item-logout { color: var(--bad, #f08585); }

/* Remember me checkbox */
.remember-me {
  display: flex;
  align-items: center;
  gap: 8px;
  margin-top: 16px;
  padding: 12px 14px;
  background: var(--bg);
  border-radius: var(--r-md, 10px);
  cursor: pointer;
  font-size: 13px;
  color: var(--muted);
  user-select: none;
}
.remember-me:hover { background: var(--panel); color: var(--ink); }
.remember-me input[type="checkbox"] {
  width: 16px;
  height: 16px;
  accent-color: var(--gold);
  cursor: pointer;
}


/* ============== Admin page nav + Audit table ============== */
.admin-page-nav {
  display: flex;
  gap: 8px;
  margin: 24px 0 16px;
  padding-bottom: 12px;
  border-bottom: 1px solid var(--line);
}
.admin-page-link {
  padding: 8px 16px;
  border-radius: var(--r-md, 10px);
  color: var(--muted);
  text-decoration: none;
  font-size: 14px;
  font-weight: 600;
  transition: all 0.15s;
}
.admin-page-link:hover {
  color: var(--ink);
  background: var(--bg-2);
}
.admin-page-link.on {
  color: var(--gold);
  background: rgba(240,184,91,0.15);
}

.audit-table {
  width: 100%;
  border-collapse: collapse;
  font-size: 13px;
  font-family: ui-monospace, monospace;
  margin-bottom: 24px;
}
.audit-table th {
  text-align: left;
  padding: 10px 12px;
  background: var(--bg-2);
  color: var(--muted);
  font-weight: 700;
  text-transform: uppercase;
  font-size: 11px;
  letter-spacing: 0.05em;
  border-bottom: 1px solid var(--line);
}
.audit-table td {
  padding: 8px 12px;
  border-bottom: 1px solid var(--line);
  color: var(--ink);
  vertical-align: top;
}
.audit-table tr:hover { background: var(--bg-2); }
.audit-time { color: var(--muted); white-space: nowrap; }
.audit-event {
  display: inline-block;
  padding: 2px 8px;
  border-radius: 4px;
  font-size: 11px;
  font-weight: 700;
}
.audit-event-login-success { background: rgba(121,208,122,0.2); color: var(--good); }
.audit-event-login-failed { background: rgba(240,133,133,0.2); color: var(--bad); }
.audit-event-login-blocked { background: rgba(240,133,133,0.3); color: var(--bad); }
.audit-event-login-rate_limited { background: rgba(240,133,133,0.4); color: var(--bad); }
.audit-event-user-register { background: rgba(122,211,224,0.2); color: var(--cyan); }
.audit-event-admin-approve { background: rgba(121,208,122,0.3); color: var(--good); }
.audit-event-admin-block { background: rgba(240,133,133,0.3); color: var(--bad); }
.audit-event-logout { background: var(--bg-2); color: var(--muted); }
.audit-user { white-space: nowrap; font-size: 12px; }
.audit-ip { color: var(--muted); font-size: 12px; }
.audit-details { font-size: 11px; }
.audit-kv { display: inline-block; margin-right: 8px; color: var(--muted); }
.audit-kv b { color: var(--ink); font-weight: 600; }

.admin-audit-help {
  background: var(--bg-2);
  border: 1px solid var(--line);
  border-radius: var(--r-md, 10px);
  padding: 16px;
  margin-top: 24px;
}
.admin-audit-help h3 { margin: 0 0 8px; color: var(--ink); font-size: 14px; }
.admin-audit-help pre {
  background: var(--bg);
  padding: 10px 12px;
  border-radius: 6px;
  font-size: 12px;
  color: var(--ink);
  overflow-x: auto;
}


/* Full-dark 2026-10-15 + one-row top bar 2026-10-15:
   Row1: brand (left) + login/account (right). Row2: main-nav. */
.topbar-inner {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 6px 10px;
  padding: 6px 12px 8px;
}
.topbar-bar {
  order: 0;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
  width: 100%;
  flex: 1 1 100%;
  min-height: 32px;
}
.topbar-bar .auth-brand {
  order: 0;
  flex: 0 1 auto;
  min-width: 0;
  max-width: min(70vw, 280px);
  display: inline-flex;
  align-items: center;
  gap: 8px;
  overflow: hidden;
  cursor: pointer;
}
.topbar-bar .auth-brand > span:last-child {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.topbar-bar .user-menu,
.topbar-bar .nav-btn-login-fixed {
  order: 0;
  position: static;
  top: auto;
  left: auto;
  right: auto;
  z-index: 5;
  margin-left: 0;
  flex: 0 0 auto;
}
.main-nav {
  order: 1;
  flex: 1 1 100%;
  margin-left: 0 !important;
  width: 100%;
}
.nav-btn-login-fixed {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 8px 16px;
  background: linear-gradient(135deg, var(--gold), #e6a370);
  color: var(--ink-on, #000);
  text-decoration: none;
  font-size: 13px;
  font-weight: 700;
  border-radius: 999px;
  border: 1px solid var(--gold);
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.3);
  transition: all 0.15s;
  font-family: inherit;
}
.nav-btn-login-fixed:hover {
  background: linear-gradient(135deg, #e6a370, var(--gold));
  transform: translateY(-1px);
}
/* muted/counts below nav */
.topbar-inner > .muted,
.topbar-inner > .counts {
  order: 2;
  flex: 1 1 100%;
  margin: 0;
}
@media (max-width: 720px) {
  .topbar-inner { padding: 6px 10px 8px; gap: 6px; }
  .topbar-bar { min-height: 30px; gap: 6px; }
  .topbar-bar .auth-brand { font-size: 13px; letter-spacing: 0.02em; }
  .topbar-bar .nav-btn-login-fixed {
    padding: 7px 12px;
    font-size: 12px;
    gap: 6px;
  }
  /* Keep account chip compact on one row */
  .topbar-bar .user-menu-name { max-width: 72px; }
  .topbar-bar .user-menu-btn { padding: 4px 8px; gap: 6px; }
  .main-nav { margin-left: 0 !important; }
}


/* ============== Audit filter chips ============== */
.audit-filters {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  align-items: center;
  padding: 12px 0;
  border-bottom: 1px solid var(--line);
  margin-bottom: 16px;
}
.audit-filter-chip {
  display: inline-block;
  padding: 4px 10px;
  background: var(--bg-2);
  border: 1px solid var(--line-2);
  border-radius: 999px;
  color: var(--muted);
  text-decoration: none;
  font-size: 11px;
  font-weight: 600;
  font-family: ui-monospace, monospace;
  transition: all 0.15s;
}
.audit-filter-chip:hover {
  background: var(--bg);
  color: var(--ink);
  border-color: var(--gold);
}
.audit-filter-chip.on {
  background: var(--gold);
  color: var(--ink-on, #000);
  border-color: var(--gold);
}

.audit-user-link {
  color: var(--cyan);
  text-decoration: none;
  font-weight: 600;
  border-bottom: 1px dashed var(--cyan);
}
.audit-user-link:hover {
  color: var(--ink);
  background: var(--bg-2);
  border-bottom-style: solid;
}


/* ============== Auth pages (login / apply / pending) — slim brand bar ============== */
body.page-auth {
  padding-top: 56px !important;
}
body.page-auth #topbar {
  padding: 10px 16px !important;
  border-bottom: 1px solid var(--line);
  background: rgba(14, 17, 22, 0.92);
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
}
body.page-auth #topbar.collapsed-scroll,
body.page-auth.collapsed-scroll {
  /* never collapse on auth screens */
}
body.page-auth #main-nav,
body.page-auth #topbar .main-nav,
body.page-auth #topbar .main-nav-head,
body.page-auth #topbar .nav-shell,
body.page-auth #nav-backdrop,
body.page-auth #topbar .muted,
body.page-auth #topbar .counts,
body.page-auth #topbar .counts-fold,
body.page-auth #topbar .site-disclaimer,
body.page-auth .topbar-show-mini,
body.page-auth .topbar-scroll-trigger {
  display: none !important;
}
body.page-auth .site-footer { display: none !important; }
body.page-auth #topbar .topbar-inner {
  max-height: none !important;
  transform: none !important;
  opacity: 1 !important;
  pointer-events: auto !important;
  padding: 0 !important;
  display: flex;
  align-items: center;
  justify-content: flex-start;
  min-height: 36px;
}
body.page-auth .auth-brand {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  font-size: 14px;
  font-weight: 800;
  letter-spacing: 0.04em;
  color: var(--gold);
  text-decoration: none;
}
body.page-auth .auth-brand-mark {
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: linear-gradient(135deg, var(--gold), #6bd0e0);
  box-shadow: 0 0 10px rgba(240, 184, 91, 0.45);
}
body.page-auth .nav-btn-login-fixed {
  /* already on login — hide duplicate 登入 pill */
  display: none !important;
}
/* Brand visible site-wide (full-dark 2026-10-15) — homepage button 2026-10-15 */
.auth-brand {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  font-size: 14px;
  font-weight: 800;
  letter-spacing: 0.04em;
  color: var(--gold);
  text-decoration: none;
  margin-right: 12px;
  flex-shrink: 0;
  cursor: pointer;
  position: relative;
  z-index: 6;
  padding: 6px 10px;
  margin-left: -6px;
  border-radius: 10px;
  border: 1px solid transparent;
  transition: color 0.15s ease, background 0.15s ease, border-color 0.15s ease;
}
.auth-brand:hover,
.auth-brand:focus-visible {
  color: var(--cyan);
  background: rgba(107, 208, 224, 0.08);
  border-color: rgba(107, 208, 224, 0.28);
  outline: none;
}
.auth-brand:active {
  transform: translateY(1px);
}
.auth-brand-mark {
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: linear-gradient(135deg, var(--gold), #6bd0e0);
  box-shadow: 0 0 10px rgba(240, 184, 91, 0.45);
}


/* ============== 5S progress panel (restored full-dark 2026-10-15) ============== */
/* Big 5S progress cards/charts CSS removed 2026-10-15 (Peter UX):
   /market + /screen now use .progress-5s-summary one-liner (see end of file). */

/* ---- Value tools MVP (peers / calendars) ---- */
.value-tools-strip {
  display: flex; flex-wrap: wrap; gap: 0.55rem 1rem; align-items: center;
  margin: 0.6rem 0 1rem; padding: 0.45rem 0.7rem;
  border: 1px solid var(--line); border-radius: 10px; background: var(--bg-2);
}
.value-tools-strip a { font-weight: 600; }
.value-tools-tabs {
  display: flex; flex-wrap: wrap; gap: 0.4rem; margin: 0.8rem 0 1rem;
}
.value-tools-tabs a {
  padding: 0.35rem 0.75rem; border-radius: 999px; border: 1px solid var(--line);
  text-decoration: none; font-size: 0.92rem;
}
.value-tools-tabs a.on { background: var(--cyan); color: #041018; border-color: transparent; font-weight: 700; }
.value-tools-form {
  display: flex; flex-wrap: wrap; gap: 0.6rem 1rem; align-items: end; margin: 0.8rem 0 1rem;
}
.value-tools-form label { display: flex; flex-direction: column; gap: 0.2rem; font-size: 0.85rem; color: var(--muted); }
.value-tools-form input, .value-tools-form select {
  padding: 0.35rem 0.5rem; border-radius: 8px; border: 1px solid var(--line);
  background: var(--bg); color: inherit; min-width: 8rem;
}
.value-tools-form button {
  padding: 0.4rem 0.9rem; border-radius: 8px; border: 0; background: var(--gold); color: #1a1200; font-weight: 700; cursor: pointer;
}
.value-peers-table tr.focus-row td { background: rgba(240, 184, 91, 0.12); }
.value-cal-h { margin-top: 1.4rem; font-size: 1.05rem; }
.value-cal-grid {
  display: grid; grid-template-columns: repeat(auto-fill, minmax(16rem, 1fr));
  gap: 0.75rem; margin-top: 0.6rem;
}
.value-cal-day { padding: 0.7rem 0.85rem; }
.value-cal-day h3 { margin: 0 0 0.4rem; font-size: 0.95rem; }
.value-cal-day ul { margin: 0; padding-left: 1.1rem; font-size: 0.88rem; }
.value-watch-banner {
  margin: 0.6rem 0 1rem; padding: 0.55rem 0.75rem; border-radius: 8px;
  border: 1px solid var(--gold); background: rgba(240, 184, 91, 0.12);
}
.watch-btn {
  padding: 0.2rem 0.55rem; border-radius: 999px; border: 1px solid var(--line);
  background: transparent; color: inherit; cursor: pointer; font-size: 0.8rem;
}
.watch-btn.on { border-color: var(--gold); background: rgba(240, 184, 91, 0.18); font-weight: 700; }
.value-tools-page .lead { max-width: 52rem; }

/* ==========================================================================
   Public landing (stock.keithleehk.com /) — full dark, useful, directional
   Approved: no hero slogan; main nav only; cards; mobile 1-col / desktop 2-col
   Theme: unified with site dark tokens (2026-10-15)
   Layout polish + section icons (2026-10-15)
   ========================================================================== */
/* Landing uses same dark theme as rest of site (full-dark 2026-10-15) */
body.page-landing {
  color-scheme: dark;
  background: var(--bg);
  color: var(--ink);
}
body.page-landing #topbar {
  background: var(--bg);
  border-bottom: 1px solid var(--line);
  color: var(--ink);
}
body.page-landing .top {
  background: transparent;
  border-bottom: none;
  color: var(--ink);
}
body.page-landing .auth-brand {
  display: inline-flex;
  color: var(--gold);
}
body.page-landing main {
  max-width: 1080px;
  margin: 0 auto;
  padding: 1.25rem 1rem 2.5rem;
}

.landing {
  color: var(--ink);
  display: flex;
  flex-direction: column;
  gap: 1.25rem;
}

/* Shared small icons */
.landing-ico {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  width: 1.25rem;
  height: 1.25rem;
  color: var(--teal);
  line-height: 0;
}
.landing-ico svg {
  width: 18px;
  height: 18px;
  display: block;
}
.landing-ico-muted { color: var(--muted); }
.landing-ico-accent { color: var(--teal); }
.landing-ico-muted svg,
.landing-ico-accent svg { width: 16px; height: 16px; }

.landing-section-title {
  display: flex;
  align-items: center;
  gap: 0.45rem;
  margin: 0 0 0.75rem;
  font-size: 1.05rem;
  font-weight: 700;
  letter-spacing: 0.02em;
}

/* Section theme titles — colored text + pill/badge backdrop */
.landing-title-pill {
  display: inline-flex;
  align-items: center;
  gap: 0.4rem;
  padding: 0.28rem 0.75rem 0.28rem 0.55rem;
  border-radius: 999px;
  border: 1px solid transparent;
  font-size: 0.95rem;
  font-weight: 700;
  line-height: 1.25;
  letter-spacing: 0.02em;
  box-shadow: 0 1px 0 rgba(0, 0, 0, 0.25);
}
.landing-title-pill .landing-ico {
  width: 1.15rem;
  height: 1.15rem;
  color: inherit;
}
.landing-title-pill .landing-ico svg {
  width: 16px;
  height: 16px;
}

.landing-theme-today {
  color: #5fc6b8;
  background: rgba(95, 198, 184, 0.18);
  border-color: rgba(95, 198, 184, 0.45);
}
.landing-theme-div {
  color: #f0b85b;
  background: rgba(240, 184, 91, 0.18);
  border-color: rgba(240, 184, 91, 0.45);
}
.landing-theme-quote {
  color: #b48cd6;
  background: rgba(180, 140, 214, 0.18);
  border-color: rgba(180, 140, 214, 0.45);
}
.landing-theme-news {
  color: #6bd0e0;
  background: rgba(107, 208, 224, 0.18);
  border-color: rgba(107, 208, 224, 0.45);
}
.landing-theme-tools {
  color: #79d07a;
  background: rgba(121, 208, 122, 0.18);
  border-color: rgba(121, 208, 122, 0.45);
}
.landing-theme-links {
  color: #8fb6ff;
  background: rgba(143, 182, 255, 0.18);
  border-color: rgba(143, 182, 255, 0.45);
}

.landing-today-grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: 0.75rem;
}
@media (min-width: 720px) {
  .landing-today-grid {
    grid-template-columns: repeat(3, minmax(0, 1fr));
    align-items: stretch;
  }
}
.landing-today-card {
  display: flex;
  flex-direction: column;
  gap: 0.35rem;
  min-height: 7.5rem;
  height: 100%;
  padding: 0.95rem 1rem;
  border-radius: var(--r-md, 12px);
  border: 1px solid var(--line);
  background: var(--panel);
  text-decoration: none;
  color: inherit;
  box-shadow: var(--shadow-sm);
  transition: transform 0.15s ease, box-shadow 0.15s ease, border-color 0.15s ease;
  box-sizing: border-box;
}
.landing-today-card:hover {
  transform: translateY(-2px);
  box-shadow: var(--shadow-md);
  border-color: var(--teal);
}
.landing-today-top {
  display: flex;
  align-items: center;
  gap: 0.4rem;
  min-height: 1.25rem;
}
.landing-today-label {
  font-size: 0.8rem;
  color: var(--muted);
  font-weight: 600;
}
.landing-today-value {
  font-size: 1.1rem;
  font-weight: 700;
  color: var(--ink);
  line-height: 1.4;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
  flex: 1;
  min-height: 2.8rem;
}
.landing-today-hint {
  font-size: 0.78rem;
  color: var(--muted);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.landing-today-go {
  margin-top: auto;
  padding-top: 0.25rem;
  font-size: 0.8rem;
  font-weight: 600;
  color: var(--cyan);
}

.landing-grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: 1rem;
  align-items: start;
}
@media (min-width: 900px) {
  .landing-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}
.landing-col {
  display: flex;
  flex-direction: column;
  gap: 1rem;
  min-width: 0;
}
.landing-card {
  background: var(--panel);
  border: 1px solid var(--line);
  border-radius: var(--r-lg, 16px);
  padding: 1.05rem 1.15rem 1.2rem;
  box-shadow: var(--shadow-sm);
  box-sizing: border-box;
  min-width: 0;
}
.landing-card-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 0.75rem;
  margin-bottom: 0.55rem;
  min-height: 1.5rem;
}
.landing-card-head h2 {
  display: inline-flex;
  align-items: center;
  gap: 0.45rem;
  margin: 0;
  font-size: 1.05rem;
  font-weight: 700;
  line-height: 1.3;
  color: inherit;
}
.landing-head-meta {
  margin: 0 !important;
  white-space: nowrap;
}
.landing-more {
  font-size: 0.82rem;
  font-weight: 600;
  color: var(--cyan);
  text-decoration: none;
  white-space: nowrap;
  flex-shrink: 0;
}
.landing-more:hover { text-decoration: underline; }
.landing-muted { color: var(--muted); font-size: 0.85rem; margin: 0 0 0.65rem; line-height: 1.4; }
.landing-fine { color: var(--muted); font-size: 0.75rem; margin: 0.75rem 0 0; line-height: 1.45; }
.landing-empty { color: var(--muted); margin: 0.5rem 0; line-height: 1.5; }

.landing-table-wrap {
  overflow-x: auto;
  -webkit-overflow-scrolling: touch;
  margin: 0 -0.15rem;
  padding-bottom: 0.15rem;
}
.landing-table {
  width: 100%;
  min-width: 36rem;
  border-collapse: collapse;
  font-size: 0.86rem;
  table-layout: auto;
}
.landing-table th, .landing-table td {
  text-align: left;
  padding: 0.5rem 0.4rem;
  border-bottom: 1px solid var(--line);
  vertical-align: middle;
}
.landing-table th {
  color: var(--muted);
  font-weight: 600;
  font-size: 0.78rem;
  white-space: nowrap;
}
.landing-table th:nth-child(1),
.landing-table td:nth-child(1) { white-space: nowrap; min-width: 4.5rem; }
.landing-table th:nth-child(2),
.landing-table td:nth-child(2) { white-space: nowrap; width: 1%; }
.landing-table th:nth-child(3),
.landing-table td:nth-child(3) { min-width: 5.5rem; max-width: 8rem; }
.landing-table th:nth-child(4),
.landing-table td:nth-child(4) { white-space: nowrap; min-width: 5rem; }
.landing-table th:nth-child(5),
.landing-table td:nth-child(5) { white-space: nowrap; width: 1%; text-align: right; }
.landing-table th:nth-child(6),
.landing-table td:nth-child(6) { white-space: nowrap; width: 1%; text-align: center; }
.landing-name {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  display: block;
  max-width: 8rem;
}
.landing-div {
  font-size: 0.8rem;
  color: var(--muted);
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
/* landing-aastock link styles: see later feat_dividend block */

@media (max-width: 420px) {
  /* 極窄屏：隱藏名稱，減欄位擠壓；仍可橫滑睇齊息率／AA */
  .landing-table { min-width: 28rem; }
  .landing-table th:nth-child(3),
  .landing-table td:nth-child(3) { display: none; }
}
.landing-pill {
  display: inline-block;
  padding: 0.05rem 0.4rem;
  border-radius: 999px;
  background: rgba(95, 198, 184, 0.15);
  color: var(--teal);
  font-size: 0.7rem;
  font-weight: 700;
  vertical-align: middle;
}

.landing-quote {
  margin: 0.25rem 0 0;
  padding: 0.65rem 0 0.15rem;
  border: none;
}
.landing-quote p {
  margin: 0;
  font-size: 1.12rem;
  line-height: 1.55;
  font-weight: 600;
  font-style: italic;  /* 2026-10-15 Keith: 語錄正文斜體 */
}
.landing-quote footer {
  margin-top: 0.65rem;
  font-size: 0.88rem;
  color: var(--muted);
}
.landing-quote-en {
  margin: 0.5rem 0 0;
  font-size: 0.82rem;
  color: var(--muted);
  font-style: italic;
  line-height: 1.45;
}

.landing-chips {
  display: flex;
  flex-wrap: wrap;
  gap: 0.35rem;
  margin: 0 0 0.75rem;
}
.landing-chip {
  display: inline-block;
  padding: 0.15rem 0.5rem;
  border-radius: 999px;
  border: 1px solid var(--line);
  background: rgba(95, 198, 184, 0.12);
  font-size: 0.75rem;
  font-weight: 600;
}
.landing-news-list { list-style: none; margin: 0; padding: 0; }
.landing-news-list li {
  padding: 0.6rem 0;
  border-bottom: 1px solid var(--line);
}
.landing-news-list li:last-child { border-bottom: none; }
.landing-news-list a {
  color: var(--ink);
  font-weight: 600;
  text-decoration: none;
  line-height: 1.4;
  display: block;
}
.landing-news-list a:hover { color: var(--cyan); text-decoration: underline; }
.landing-news-meta {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0.35rem;
  margin-top: 0.3rem;
  font-size: 0.75rem;
  color: var(--muted);
}

.landing-tools {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 0.65rem;
}
.landing-tool {
  display: flex;
  flex-direction: column;
  gap: 0.3rem;
  min-height: 4.5rem;
  padding: 0.8rem 0.85rem;
  border-radius: var(--r-md, 12px);
  border: 1px solid var(--line);
  background: var(--bg-2);
  text-decoration: none;
  color: inherit;
  box-sizing: border-box;
  transition: border-color 0.15s ease;
}
.landing-tool:hover { border-color: var(--teal); }
.landing-tool-row {
  display: flex;
  align-items: center;
  gap: 0.4rem;
}
.landing-tool-name { font-weight: 700; color: var(--teal); font-size: 0.95rem; }
.landing-tool-desc { font-size: 0.78rem; color: var(--muted); line-height: 1.35; }

.landing-links { margin: 0; }
.landing-link-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 0.6rem;
}
@media (min-width: 720px) {
  .landing-link-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); }
}
.landing-link {
  display: flex;
  flex-direction: column;
  gap: 0.25rem;
  min-height: 4.1rem;
  padding: 0.75rem 0.85rem;
  border-radius: var(--r-md, 12px);
  border: 1px solid var(--line);
  text-decoration: none;
  color: inherit;
  background: var(--bg-2);
  box-sizing: border-box;
  transition: border-color 0.15s ease;
}
.landing-link:hover { border-color: var(--cyan); }
.landing-link-row {
  display: flex;
  align-items: center;
  gap: 0.4rem;
  min-width: 0;
}
.landing-link-name {
  font-weight: 700;
  font-size: 0.9rem;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.landing-link-desc { font-size: 0.75rem; color: var(--muted); line-height: 1.35; }

.landing-footer {
  margin-top: 0.25rem;
  padding: 1rem 0.15rem 0;
  border-top: 1px solid var(--line);
  color: var(--muted);
  font-size: 0.82rem;
}

.landing-footer p { margin: 0.25rem 0; }

/* 2026-10-15 footer-login: homepage bottom CTA → /login (bypass topbar pointer-events) */
.landing-footer-login {
  display: flex;
  flex-direction: column;
  align-items: stretch;
  gap: 0.5rem;
  margin: 0 0 1rem;
  padding: 0.85rem 0.75rem 1rem;
  border-radius: 14px;
  background: rgba(240, 184, 91, 0.08);
  border: 1px solid rgba(240, 184, 91, 0.35);
}
.landing-footer-login-btn {
  display: flex;
  align-items: center;
  justify-content: center;
  min-height: 52px;
  padding: 0.85rem 1.25rem;
  border-radius: 12px;
  text-decoration: none;
  font-weight: 800;
  font-size: 1.05rem;
  letter-spacing: 0.02em;
  color: var(--ink-on, #0e1116) !important;
  background: linear-gradient(135deg, var(--gold), #e6a370);
  border: 1px solid var(--gold);
  box-shadow: var(--shadow-glow-gold, 0 4px 16px rgba(240, 184, 91, 0.18));
  -webkit-tap-highlight-color: rgba(240, 184, 91, 0.45);
  touch-action: manipulation;
}
.landing-footer-login-btn:hover {
  background: linear-gradient(135deg, #e6a370, var(--gold));
  transform: translateY(-1px);
}
.landing-footer-login-hint {
  margin: 0 !important;
  text-align: center;
  font-size: 0.8rem;
  color: var(--muted);
}
.landing-footer-logged {
  margin: 0 0 0.75rem !important;
  color: var(--gold);
  font-weight: 600;
}
@media (min-width: 640px) {
  .landing-footer-login {
    align-items: center;
    max-width: 28rem;
  }
  .landing-footer-login-btn {
    min-width: 16rem;
    font-size: 1.1rem;
  }
}


/* Watchlist admin */
.landing-admin, .watchlist-page .lead { max-width: 40rem; }
.watchlist-simple { list-style: none; margin: 1rem 0 0; padding: 0; }
.watchlist-row {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0.5rem 0.75rem;
  padding: 0.65rem 0.5rem;
  border-bottom: 1px solid var(--line);
}
.watchlist-ord {
  width: 1.5rem;
  color: var(--muted);
  font-weight: 700;
}
.watchlist-name { flex: 1; min-width: 8rem; color: var(--ink-2); }
.watchlist-actions { display: flex; gap: 0.35rem; align-items: center; }
.watchlist-actions form.inline { display: inline; margin: 0; }
.watchlist-actions button {
  min-width: 2rem;
  padding: 0.25rem 0.5rem;
  font-size: 0.85rem;
}

/* 2026-10-15: remove top-right grid/list/hamburger controls.
   Hide leftover classes; keep all main-nav tiles visible on mobile. */
.main-nav-head,
.main-nav-actions,
.main-nav-mode,
.main-nav-toggle {
  display: none !important;
}
@media (max-width: 720px) {
  .main-nav.collapsed .nav-btn:not(.on) { display: flex !important; }
  .main-nav.collapsed .nav-btn.on {
    grid-column: auto !important;
    min-height: inherit;
    font-size: inherit;
  }
}

/* 2026-10-15 landing: snappy hide main nav on scroll (mobile-first) */
body.page-landing #topbar.collapsed-scroll .topbar-inner {
  transition: max-height 0.18s ease, opacity 0.14s ease, transform 0.18s ease, padding 0.18s ease;
}
@media (max-width: 720px) {
  body.page-landing #topbar.collapsed-scroll .topbar-inner {
    transition: max-height 0.14s ease, opacity 0.1s ease, transform 0.14s ease, padding 0.14s ease;
  }
}

/* 2026-10-15 topbar-bar one-row guarantee */
.auth-brand { display: inline-flex !important; }
body.page-landing .topbar-bar .auth-brand { display: inline-flex !important; color: var(--gold); }

/* 2026-10-15 PDF mobile viewer fallback */
.pdf-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  margin: 0 0 12px;
}
.pdf-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 8px 14px;
  border-radius: var(--r-sm, 8px);
  border: 1px solid var(--gold, #d4af37);
  color: var(--gold, #d4af37);
  text-decoration: none;
  font-size: 14px;
  background: transparent;
  transition: background 0.15s ease;
}
.pdf-btn:hover {
  background: rgba(212, 175, 55, 0.12);
  color: var(--gold, #d4af37);
}
.pdf-btn-dl {
  border-color: var(--line, #2a3140);
  color: var(--muted, #9aa3b2);
}
.pdf-btn-lg {
  padding: 14px 22px;
  font-size: 16px;
  font-weight: 600;
}
.pdf-fallback-card {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 14px;
  padding: 36px 18px;
  text-align: center;
  background: #0d1014;
  border-radius: var(--r-md, 12px);
  border: 1px dashed var(--line, #2a3140);
  min-height: 180px;
}
.pdf-fallback-msg {
  margin: 0;
  color: var(--muted, #9aa3b2);
  line-height: 1.6;
  font-size: 14px;
}
.pdf-iframe,
.live-pdf-iframe {
  width: 100%;
  border: 0;
  background: #0d1014;
  border-radius: var(--r-md, 12px);
}
.pdf-embed[hidden],
.pdf-fallback[hidden] {
  display: none !important;
}
@media (max-width: 720px) {
  .pdf-btn-lg { width: 100%; max-width: 320px; }
}


/* Feature B — watchlist / landing C1–C4 lights (2026-10-15) */
.watchlist-5s {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0.25rem 0.4rem;
  flex: 1 1 14rem;
  min-width: 12rem;
}
.watchlist-5s-link {
  display: inline-flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0.2rem 0.3rem;
  text-decoration: none;
  color: inherit;
}
.watchlist-5s-link:hover .pill { filter: brightness(1.15); }
.watchlist-5s-lab {
  font-size: 0.65rem;
  font-weight: 700;
  color: var(--muted);
  letter-spacing: 0.02em;
  margin-left: 0.15rem;
}
.watchlist-5s-lab:first-child { margin-left: 0; }
.watchlist-5s-meta {
  font-size: 0.75rem;
  width: 100%;
}
.landing-watch-lights {
  list-style: none;
  margin: 0 0 0.75rem;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: 0.45rem;
}
.landing-watch-item {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0.35rem 0.65rem;
  padding: 0.4rem 0.5rem;
  border: 1px solid var(--line);
  border-radius: 10px;
  background: rgba(255, 255, 255, 0.02);
}
.landing-watch-code {
  font-weight: 700;
  text-decoration: none;
  color: var(--ink);
  min-width: 7rem;
}
.landing-watch-code:hover { color: var(--cyan); text-decoration: underline; }
.landing-watch-5s {
  display: inline-flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0.15rem 0.25rem;
}
.landing-watch-meta { font-size: 0.75rem; }
@media (max-width: 720px) {
  .watchlist-row { align-items: flex-start; }
  .watchlist-actions { width: 100%; justify-content: flex-end; }
}


/* Feature E — C4 待人手核工作佇列 (2026-10-15) */
.s4-review-page .lead code { font-size: 0.85em; }
.s4-review-tabs {
  display: flex;
  flex-wrap: wrap;
  gap: 0.4rem;
  margin: 0.75rem 0 1rem;
}
.s4-review-tabs a {
  display: inline-flex;
  align-items: center;
  gap: 0.35rem;
  padding: 0.35rem 0.75rem;
  border-radius: 999px;
  border: 1px solid var(--line);
  text-decoration: none;
  color: var(--ink-2);
  font-size: 0.85rem;
  font-weight: 600;
  background: rgba(255,255,255,0.03);
}
.s4-review-tabs a .num {
  font-variant-numeric: tabular-nums;
  color: var(--muted);
}
.s4-review-tabs a.on {
  background: var(--cyan);
  color: #041018;
  border-color: transparent;
  font-weight: 700;
}
.s4-review-tabs a.on .num { color: #041018; }
.s4-review-filter {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0.5rem 0.75rem;
  margin-bottom: 0.75rem;
}
.s4-review-filter input { max-width: 14rem; }
.s4-review-table td { vertical-align: top; }
.s4-review-reason { max-width: 22rem; }
.s4-review-missing { display: inline-flex; flex-wrap: wrap; gap: 0.25rem; margin-bottom: 0.25rem; }
.s4-review-links { white-space: nowrap; }
.s4-review-actions form.inline { display: inline; margin: 0; }
.s4-review-cleared-meta { font-size: 0.72rem; margin-top: 0.25rem; }
@media (max-width: 720px) {
  .s4-review-table { font-size: 0.85rem; }
  .s4-review-links { white-space: normal; }
}


/* Feature F — 持倉重疊 (2026-10-15) */
.inst-overlap-page .lead code { font-size: 0.85em; }
.inst-overlap-form {
  display: flex;
  flex-wrap: wrap;
  align-items: flex-end;
  gap: 0.75rem 1rem;
  margin: 0.75rem 0 1rem;
  padding: 0.75rem;
  border: 1px solid var(--line);
  border-radius: 12px;
  background: rgba(255,255,255,0.02);
}
.inst-overlap-universe {
  border: 0;
  margin: 0;
  padding: 0;
  display: flex;
  flex-wrap: wrap;
  gap: 0.5rem 0.85rem;
}
.inst-overlap-universe legend {
  font-size: 0.75rem;
  font-weight: 700;
  color: var(--muted);
  margin-bottom: 0.25rem;
  width: 100%;
}
.inst-overlap-universe label,
.inst-overlap-etf {
  font-size: 0.85rem;
  display: inline-flex;
  align-items: center;
  gap: 0.3rem;
}
.inst-overlap-stats {
  display: flex;
  flex-wrap: wrap;
  gap: 0.4rem;
  margin-bottom: 0.75rem;
}
.inst-overlap-covers {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(9.5rem, 1fr));
  gap: 0.45rem;
  margin-bottom: 1rem;
}
.inst-overlap-cover {
  display: flex;
  flex-direction: column;
  gap: 0.15rem;
  padding: 0.55rem 0.65rem;
  border-radius: 10px;
  border: 1px solid var(--line);
  text-decoration: none;
  color: inherit;
  background: rgba(255,255,255,0.02);
  min-height: 4.2rem;
}
.inst-overlap-cover.has {
  border-color: rgba(121, 208, 122, 0.45);
  background: rgba(121, 208, 122, 0.08);
}
.inst-overlap-cover.miss { opacity: 0.55; }
.inst-overlap-cover .num {
  margin-top: auto;
  font-weight: 800;
  font-variant-numeric: tabular-nums;
  color: var(--cyan);
}
.inst-overlap-cover.has .num { color: var(--good); }
.inst-overlap-hits {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: 0.25rem;
}
.inst-overlap-hits li {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0.25rem 0.4rem;
  font-size: 0.85rem;
}

/* #5 my-list × institution source filter 2026-10-16 */
.inst-overlap-sources {
  border: 0;
  margin: 0;
  padding: 0;
  width: 100%;
}
.inst-overlap-sources legend {
  font-size: 0.75rem;
  font-weight: 700;
  color: var(--muted);
  margin-bottom: 0.35rem;
}
.inst-overlap-src-grid {
  display: flex;
  flex-wrap: wrap;
  gap: 0.35rem 0.75rem;
}
.inst-overlap-src-item {
  font-size: 0.82rem;
  display: inline-flex;
  align-items: center;
  gap: 0.3rem;
  padding: 0.2rem 0.4rem;
  border-radius: 8px;
  border: 1px solid transparent;
}
.inst-overlap-src-item.is-disabled { opacity: 0.45; }
.inst-overlap-src-hint { font-size: 0.75rem; margin: 0.35rem 0 0; width: 100%; }
.inst-overlap-table td { vertical-align: top; }


/* Feature D — 財報／除淨 digest (2026-10-15) */
.digest-channels { margin: 0.75rem 0 1rem; }
.digest-channel-cards {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(14rem, 1fr));
  gap: 0.5rem;
}
.digest-channel {
  border: 1px solid var(--line);
  border-radius: 12px;
  padding: 0.7rem 0.85rem;
  background: rgba(255,255,255,0.02);
}
.digest-channel.ok { border-color: rgba(121, 208, 122, 0.45); }
.digest-channel.pending { border-color: rgba(240, 184, 91, 0.5); }
.digest-channel .chip { margin-left: 0.35rem; }
.digest-form, .digest-send {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0.5rem 0.75rem;
  margin: 0.75rem 0;
}
.digest-meta { margin: 0.5rem 0; line-height: 1.5; }
.digest-codes {
  display: inline-flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0.25rem 0.15rem;
  max-width: 100%;
}
.digest-codes a.digest-code-chip,
.digest-code-chip {
  margin-right: 0;
  font-weight: 700;
  font-variant-numeric: tabular-nums;
  text-decoration: none;
  padding: 0.1rem 0.45rem;
  line-height: 1.4;
}
.digest-code-sep {
  color: var(--muted);
  margin: 0 0.05rem;
  user-select: none;
}
.digest-code-more { margin-left: 0.15rem; }
@media (max-width: 420px) {
  .digest-codes { gap: 0.2rem; }
  .digest-code-chip { font-size: 12px; padding: 0.08rem 0.35rem; }
}
.digest-counts { display: flex; flex-wrap: wrap; gap: 0.35rem; margin-bottom: 0.75rem; }
.digest-section { margin-top: 1.25rem; }
.digest-preview { margin-top: 1.25rem; }
.digest-pre {
  white-space: pre-wrap;
  font-size: 0.8rem;
  padding: 0.75rem;
  border-radius: 8px;
  border: 1px solid var(--line);
  background: rgba(0,0,0,0.25);
  max-height: 22rem;
  overflow: auto;
}
.digest-note { font-size: 0.85rem; }


/* Watchlist Chinese names (2026-10-15) */
.watchlist-name {
  display: inline-flex;
  flex-wrap: wrap;
  align-items: baseline;
  gap: 0.25rem 0.45rem;
}
.watchlist-name-en { color: var(--ink-2); }
.watchlist-name-zh {
  color: var(--cyan);
  font-weight: 600;
  font-size: 0.92em;
}
.landing-watch-zh {
  color: var(--cyan);
  font-weight: 600;
  font-size: 0.85em;
}


/* Homepage watchlist toolbar (2026-10-15 layout polish) */
.landing-news-toolbar {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0.45rem;
  margin: 0 0 0.65rem;
  min-height: 1.85rem;
}
.landing-news-toolbar .landing-news-refresh,
.landing-news-toolbar .landing-watch-toggle {
  box-sizing: border-box;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  height: 1.85rem;
  min-height: 1.85rem;
  padding: 0 0.75rem;
  border-radius: 999px;
  font-size: 0.78rem;
  font-weight: 700;
  line-height: 1;
  cursor: pointer;
  white-space: nowrap;
  appearance: none;
  font-family: inherit;
}
.landing-watch-toggle {
  border: 1px solid var(--line);
  background: rgba(255, 255, 255, 0.04);
  color: var(--ink-2);
}
.landing-watch-toggle:hover {
  border-color: rgba(122, 211, 224, 0.55);
  color: var(--cyan);
}
.landing-watch-toggle.is-open {
  background: rgba(122, 211, 224, 0.14);
  border-color: rgba(122, 211, 224, 0.45);
  color: var(--cyan);
}
.landing-watch-collapse.is-collapsed,
.landing-watch-collapse[hidden] {
  display: none !important;
}


/* Watchlist dividends (2026-10-15) */
.watchlist-div,
.landing-watch-div {
  display: inline-flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0.25rem 0.4rem;
  font-size: 0.78rem;
  color: var(--gold);
  font-weight: 600;
}
.watchlist-div {
  width: 100%;
  margin-top: 0.15rem;
}
.watchlist-div-lab {
  font-size: 0.65rem;
  letter-spacing: 0.02em;
  color: var(--muted);
  font-weight: 700;
}
.watchlist-div-soon,
.landing-watch-div .landing-pill {
  display: inline-block;
  padding: 0.05rem 0.4rem;
  border-radius: 999px;
  background: rgba(240, 184, 91, 0.18);
  border: 1px solid rgba(240, 184, 91, 0.4);
  font-size: 0.7rem;
}
.watchlist-div-amt { color: var(--ink-2); font-weight: 500; }
.landing-watch-div { width: 100%; }

/* feat_dividend_table_columns 2026-10-15: amount-only + special annot + yield col */
.landing-div-annot,
.div-special-annot {
  display: inline-block;
  margin-left: 0.35em;
  font-size: 0.75em;
  font-weight: 500;
  color: var(--muted, #8a8a8a);
  vertical-align: baseline;
}
.landing-div .landing-div-annot {
  display: block;
  margin-left: 0;
  margin-top: 0.15em;
}
.landing-div-yield {
  white-space: nowrap;
  color: var(--muted, #8a8a8a);
  font-variant-numeric: tabular-nums;
}
.div-amount .div-special-annot {
  display: block;
  margin-left: 0;
  margin-top: 0.15em;
}


/* ---- Hermes AI ask MVP (2026-10-15) ---- */
.hermes-ask { margin: 1.1rem 0; }
.hermes-ask-head h2 { display: flex; align-items: center; gap: 0.5rem; flex-wrap: wrap; }
.hermes-ask-engine {
  font-size: 0.72rem;
  font-weight: 600;
  letter-spacing: 0.04em;
  padding: 0.15rem 0.45rem;
  border-radius: 999px;
  border: 1px solid var(--gold);
  color: var(--gold);
  background: rgba(240, 184, 91, 0.08);
}
.hermes-ask-disclaimer { margin: 0.25rem 0 0.75rem; font-size: 0.85rem; }
.hermes-ask-chips {
  display: flex;
  flex-wrap: wrap;
  gap: 0.4rem;
  margin-bottom: 0.7rem;
}
.hermes-chip {
  appearance: none;
  border: 1px solid var(--line, #333);
  background: var(--panel, #1a1d24);
  color: var(--ink, #e8eaed);
  border-radius: 999px;
  padding: 0.35rem 0.7rem;
  font-size: 0.82rem;
  cursor: pointer;
  line-height: 1.3;
}
.hermes-chip:hover { border-color: var(--gold); color: var(--gold); }
.hermes-ask-compose {
  display: flex;
  gap: 0.5rem;
  align-items: flex-end;
}
.hermes-ask-input {
  flex: 1;
  min-height: 2.6rem;
  resize: vertical;
  border-radius: 8px;
  border: 1px solid var(--line, #333);
  background: #0f1218;
  color: var(--ink, #e8eaed);
  padding: 0.55rem 0.7rem;
  font: inherit;
}
.hermes-ask-send {
  appearance: none;
  border: 1px solid var(--gold);
  background: rgba(240, 184, 91, 0.15);
  color: var(--gold);
  border-radius: 8px;
  padding: 0.55rem 0.95rem;
  font-weight: 600;
  cursor: pointer;
  white-space: nowrap;
}
.hermes-ask-send:hover { background: rgba(240, 184, 91, 0.28); }
.hermes-ask-send:disabled { opacity: 0.55; cursor: wait; }
.hermes-ask-status { margin: 0.45rem 0; font-size: 0.85rem; }
.hermes-ask-thread {
  margin-top: 0.75rem;
  display: flex;
  flex-direction: column;
  gap: 0.65rem;
  max-height: 28rem;
  overflow-y: auto;
}
.hermes-msg {
  border: 1px solid var(--line, #333);
  border-radius: 10px;
  padding: 0.65rem 0.8rem;
  background: #12151c;
}
.hermes-msg-user { border-color: rgba(143, 182, 255, 0.35); }
.hermes-msg-assistant { border-color: rgba(240, 184, 91, 0.35); }
.hermes-msg-role {
  font-size: 0.75rem;
  font-weight: 700;
  color: var(--muted, #9aa0a6);
  margin-bottom: 0.25rem;
}
.hermes-msg-body {
  white-space: pre-wrap;
  word-break: break-word;
  line-height: 1.45;
  font-size: 0.92rem;
}
.hermes-msg-meta { margin-top: 0.35rem; font-size: 0.75rem; }
@media (max-width: 640px) {
  .hermes-ask-compose { flex-direction: column; align-items: stretch; }
  .hermes-ask-send { width: 100%; }
}


/* === AI external links (Grok / Gemini) — 2026-10-15 === */
.ai-external { margin: 1.1rem 0; }
.ai-external-head h2 { display: flex; align-items: center; gap: 0.5rem; flex-wrap: wrap; }
.ai-external-engine {
  font-size: 0.72em;
  font-weight: 600;
  color: var(--gold);
  border: 1px solid rgba(240, 184, 91, 0.45);
  border-radius: 999px;
  padding: 0.12rem 0.55rem;
}
.ai-external-disclaimer { margin: 0.25rem 0 0.75rem; font-size: 0.85rem; }
.ai-external-chips {
  display: flex; flex-wrap: wrap; gap: 0.45rem; margin-bottom: 0.65rem;
}
.ai-chip {
  background: rgba(255,255,255,0.04);
  border: 1px solid rgba(255,255,255,0.12);
  color: var(--text);
  border-radius: 999px;
  padding: 0.28rem 0.7rem;
  font-size: 0.85rem;
  cursor: pointer;
}
.ai-chip:hover { border-color: var(--gold); color: var(--gold); }
.ai-external-compose { margin-bottom: 0.65rem; }
.ai-external-input {
  width: 100%;
  box-sizing: border-box;
  background: rgba(0,0,0,0.25);
  border: 1px solid rgba(255,255,255,0.12);
  color: var(--text);
  border-radius: 8px;
  padding: 0.55rem 0.7rem;
  font: inherit;
  resize: vertical;
  min-height: 2.6rem;
}
.ai-external-actions {
  display: flex; flex-wrap: wrap; gap: 0.5rem; align-items: center;
}
.ai-open-btn {
  border: none;
  border-radius: 8px;
  padding: 0.55rem 1rem;
  font: inherit;
  font-weight: 600;
  cursor: pointer;
}
.ai-open-grok {
  background: linear-gradient(135deg, #1a1a1a, #333);
  color: #fff;
  border: 1px solid rgba(255,255,255,0.2);
}
.ai-open-grok:hover { border-color: var(--gold); color: var(--gold); }
.ai-open-gemini {
  background: linear-gradient(135deg, #1a237e, #4a148c);
  color: #fff;
  border: 1px solid rgba(180, 160, 255, 0.35);
}
.ai-open-gemini:hover { filter: brightness(1.12); }
.ai-copy-only {
  background: transparent;
  border: 1px solid rgba(255,255,255,0.18);
  color: var(--muted, #9aa);
  border-radius: 8px;
  padding: 0.5rem 0.85rem;
  font: inherit;
  cursor: pointer;
}
.ai-copy-only:hover { border-color: var(--gold); color: var(--gold); }
.ai-external-status { margin: 0.5rem 0 0; font-size: 0.85rem; }
.ai-external-preview, .ai-hermes-advanced {
  margin-top: 0.85rem;
  border-top: 1px solid rgba(255,255,255,0.08);
  padding-top: 0.55rem;
}
.ai-external-preview summary,
.ai-hermes-advanced summary {
  cursor: pointer;
  color: var(--muted, #9aa);
  font-size: 0.9rem;
  user-select: none;
}
.ai-external-prompt {
  margin: 0.5rem 0 0;
  padding: 0.65rem 0.75rem;
  background: rgba(0,0,0,0.3);
  border-radius: 8px;
  font-size: 0.78rem;
  white-space: pre-wrap;
  word-break: break-word;
  max-height: 16rem;
  overflow: auto;
}
.ai-hermes-advanced .hermes-ask {
  margin-top: 0.6rem;
  border: 1px solid rgba(255,255,255,0.08);
  border-radius: 10px;
  padding: 0.75rem;
}
@media (max-width: 640px) {
  .ai-external-actions { flex-direction: column; align-items: stretch; }
  .ai-open-btn, .ai-copy-only { width: 100%; text-align: center; }
}

.landing-ai-wrap { margin-top: 0.75rem; }
.landing-ai-wrap .ai-external { margin: 0; }

.ai-chip-on {
  border-color: var(--gold) !important;
  color: var(--gold) !important;
  background: rgba(240, 184, 91, 0.12);
}

.landing-aastock a, .aastock-link a {
  white-space: nowrap;
  font-weight: 600;
}
.aastock-link a {
  display: inline-block;
  padding: 0.15rem 0.45rem;
  border-radius: 6px;
  border: 1px solid rgba(240, 184, 91, 0.45);
  color: var(--gold);
  text-decoration: none;
  font-size: 0.78rem;
}
.table-wrap { overflow-x: auto; -webkit-overflow-scrolling: touch; }

/* Landing news refresh — 2026-10-15 (equal height with watch toggle) */
.landing-news-refresh {
  border: 1px solid rgba(240, 184, 91, 0.45);
  background: rgba(240, 184, 91, 0.1);
  color: var(--gold);
}
.landing-news-refresh:hover { background: rgba(240, 184, 91, 0.2); }
.landing-news-refresh:disabled,
.landing-news-refresh.is-loading {
  opacity: 0.65;
  cursor: wait;
}
.landing-news-status {
  font-size: 0.8rem;
  margin: 0 0 0.55rem;
}
.landing-news-list li.landing-news-recent {
  border-left: 3px solid var(--gold);
  padding-left: 0.55rem;
  margin-left: -0.15rem;
}
.landing-news-badge {
  display: inline-block;
  margin-right: 0.35rem;
  padding: 0.05rem 0.35rem;
  border-radius: 4px;
  background: rgba(240, 184, 91, 0.2);
  color: var(--gold);
  font-size: 0.7rem;
  font-weight: 700;
  vertical-align: middle;
}
@media (max-width: 420px) {
  .landing-card-head {
    flex-wrap: wrap;
    align-items: flex-start;
  }
  .landing-news-toolbar {
    width: 100%;
  }
}

/* Dual 回首頁 corners — 2026-10-15 */
.topbar-bar-right {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  flex: 0 0 auto;
  margin-left: auto;
}
.topbar-home-btn {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  text-decoration: none;
  font-weight: 800;
  white-space: nowrap;
  cursor: pointer;
}
.topbar-home-right {
  padding: 6px 12px;
  border-radius: 999px;
  border: 1px solid rgba(240, 184, 91, 0.45);
  background: rgba(240, 184, 91, 0.1);
  color: var(--gold);
  font-size: 13px;
  letter-spacing: 0.02em;
  z-index: 6;
}
.topbar-home-right:hover,
.topbar-home-right:focus-visible {
  background: rgba(240, 184, 91, 0.22);
  border-color: var(--gold);
  outline: none;
}
.topbar-home-left.auth-brand > span:last-child {
  /* no longer a long URL — don't need aggressive ellipsis */
  overflow: visible;
  text-overflow: clip;
}
@media (max-width: 720px) {
  .topbar-home-right {
    padding: 5px 10px;
    font-size: 12px;
  }
  .topbar-bar-right { gap: 6px; }
  /* Keep both 回首頁 visible on one row with login/avatar */
  .topbar-bar .auth-brand { max-width: none; }
}
body.page-auth .topbar-home-right {
  /* auth pages: left brand enough; keep right for consistency */
  display: inline-flex;
}

/* 5S screen search — prominent top placement 2026-10-15 */
.screen-search-hero {
  margin: 0.35rem 0 1rem;
  padding: 0.85rem 0.9rem;
  border-radius: 12px;
  border: 1px solid rgba(240, 184, 91, 0.35);
  background: rgba(240, 184, 91, 0.07);
  box-shadow: 0 0 0 1px rgba(240, 184, 91, 0.06);
}
.screen-search-hero label { font-weight: 700; color: var(--gold); }
.screen-search-hero input[name="q"] {
  font-size: 1.05rem; min-height: 2.5rem;
  border-color: rgba(240, 184, 91, 0.4);
}
.screen-search-hero button[type="submit"] {
  font-weight: 700;
  background: rgba(240, 184, 91, 0.2);
  border: 1px solid rgba(240, 184, 91, 0.5);
  color: var(--gold);
}
.screen-search-hero button[type="submit"]:hover { background: rgba(240, 184, 91, 0.32); }
@media (max-width: 720px) {
  .screen-search-hero { padding: 0.75rem; margin-bottom: 0.85rem; }
}

/* ===== Peter UX/perf 2026-10-15 ===== */

/* 5S one-line summary (market + screen) — keeps real content above the fold */
.progress-5s-summary {
  margin: 0 0 0.75rem;
  padding: 0.45rem 0.7rem;
  border: 1px solid var(--line, #2a3140);
  border-radius: 8px;
  background: var(--panel, #1a1d24);
  font-size: 0.88rem;
  line-height: 1.45;
  color: var(--ink-2, #c8cdd5);
}
.progress-5s-summary a {
  color: inherit;
  text-decoration: none;
  border-bottom: 1px dotted transparent;
}
.progress-5s-summary a:hover { border-bottom-color: var(--gold); color: var(--gold); }
.progress-5s-summary a.on b { text-decoration: underline; }
.progress-5s-summary .tone-pass { color: var(--good, #79d07a); }
.progress-5s-summary .tone-info { color: var(--cyan, #7ad3e0); }
.progress-5s-summary .tone-gold { color: var(--gold, #f0b85b); }
.progress-5s-summary b { font-variant-numeric: tabular-nums; }

/* Dividend tables: sticky key cols + no clip of yield/AA around ~1280 */
.landing-table-wrap,
.table-wrap {
  overflow-x: auto;
  -webkit-overflow-scrolling: touch;
  max-width: 100%;
}
.landing-table {
  min-width: 38rem;
}
.landing-table th:nth-child(1),
.landing-table td:nth-child(1) {
  position: sticky;
  left: 0;
  z-index: 2;
  background: var(--panel, #1a1d24);
  box-shadow: 1px 0 0 var(--line, #2a3140);
}
.landing-table th:nth-child(2),
.landing-table td:nth-child(2) {
  position: sticky;
  left: 4.6rem;
  z-index: 2;
  background: var(--panel, #1a1d24);
  box-shadow: 1px 0 0 var(--line, #2a3140);
}
.landing-div-yield,
.landing-aastock {
  white-space: nowrap;
  min-width: 3.2rem;
}
@media (max-width: 1280px) {
  /* Prefer horizontal scroll over clipping yield/AA */
  .landing-card #landing-dividends .landing-table-wrap,
  #landing-dividends.landing-card .landing-table-wrap,
  section#landing-dividends .landing-table-wrap {
    overflow-x: auto;
  }
}

/* Full dividend calendar: hide secondary cols under 1280 unless .show-more-cols */
.div-cal-table th.div-col-more,
.div-cal-table td.div-col-more { display: none; }
.div-cal-table.show-more-cols th.div-col-more,
.div-cal-table.show-more-cols td.div-col-more { display: table-cell; }
.div-cal-more-toggle {
  appearance: none;
  border: 1px solid var(--line);
  background: var(--panel);
  color: var(--ink-2);
  border-radius: 999px;
  padding: 0.25rem 0.7rem;
  font: inherit;
  font-size: 0.8rem;
  cursor: pointer;
  margin: 0 0 0.6rem;
}
.div-cal-more-toggle:hover { border-color: var(--gold); color: var(--gold); }

/* Nav visited green-dot: clearer affordance */
.nav-btn.visited .nav-btn-icon::after {
  width: 8px;
  height: 8px;
}

/* Stock page: don't let big 5S radar crowd filings list */
.five-s-layout {
  display: grid;
  grid-template-columns: minmax(0, 160px) minmax(0, 1fr);
  gap: 0.75rem;
  align-items: start;
}
.five-s-layout .radar-wrap.desk svg,
.five-s-layout .radar-wrap.desk {
  max-width: 150px;
  margin: 0 auto;
}
.five-s-layout .five-s-table { min-width: 0; overflow-x: auto; }
@media (max-width: 900px) {
  .five-s-layout { grid-template-columns: 1fr; }
  .five-s-layout .radar-wrap.desk { display: none; }
}

/* screen_stock hero: slightly tighter so panels / links sit higher */
.s5-summary {
  margin-bottom: 0.6rem !important;
  padding: 0.65rem 0.85rem !important;
}
.s5-summary .coe-block .value {
  font-size: clamp(1.35rem, 3.5vw, 1.85rem) !important;
}

/* Quote under stock search (2026-10-15) — body > title prominence (Keith) */
.landing-quote-top {
  margin-bottom: 0.25rem;
}
/* Title pill: soften so it does not outshine the quote body */
.landing-quote-top .landing-theme-quote {
  color: #9a8fb0;
  background: rgba(154, 143, 176, 0.10);
  border-color: rgba(154, 143, 176, 0.28);
  font-size: 0.78rem;
  font-weight: 600;
  letter-spacing: 0.06em;
  padding: 0.18rem 0.6rem 0.18rem 0.45rem;
  box-shadow: none;
}
.landing-quote-top .landing-card-head h2 {
  font-size: 0.85rem;
  font-weight: 600;
}
.landing-quote-top .landing-head-meta {
  font-size: 0.75rem;
  opacity: 0.85;
}
/* Quote body: largest, gold, high contrast — hero of the card */
.landing-quote-top .landing-quote {
  margin: 0.45rem 0 0;
  padding: 0.85rem 0.65rem 0.35rem;
  text-align: center;
}
.landing-quote-top .landing-quote p,
.landing-quote-top #landing-quote-zh {
  margin: 0;
  font-size: clamp(1.28rem, 4.2vw, 1.55rem);
  line-height: 1.55;
  font-weight: 800;
  font-style: italic;  /* 2026-10-15 Keith: 中文語錄斜體 */
  letter-spacing: 0.01em;
  color: var(--gold);
  text-shadow: 0 0 28px rgba(240, 184, 91, 0.22);
}
.landing-quote-top .landing-quote footer,
.landing-quote-top #landing-quote-footer {
  margin-top: 0.85rem;
  font-size: 0.86rem;
  font-weight: 500;
  color: #a8b0ba;
  text-align: center;
  line-height: 1.45;
}
.landing-quote-top .landing-quote-en,
.landing-quote-top #landing-quote-en {
  margin: 0.55rem 0 0;
  padding: 0 0.35rem;
  font-size: clamp(0.88rem, 2.6vw, 0.98rem);
  font-weight: 500;
  font-style: italic;
  line-height: 1.5;
  color: #c9b896;
  text-align: center;
}
.landing-quote-top .landing-quote-actions {
  justify-content: center;
  margin-top: 0.85rem;
}
.landing-quote-top .landing-quote-status {
  font-size: 0.72rem;
  text-align: center;
}
@media (max-width: 480px) {
  .landing-quote-top .landing-quote p,
  .landing-quote-top #landing-quote-zh {
    font-size: clamp(1.22rem, 5.2vw, 1.42rem);
  }
  .landing-quote-top .landing-quote {
    padding: 0.7rem 0.25rem 0.25rem;
  }
}



/* Phase B3 — C4 慈善價 scannable 2dp */
td.raid-price, .raid-price {
  font-variant-numeric: tabular-nums;
  font-weight: 700;
  letter-spacing: 0.01em;
  white-space: nowrap;
}
td.raid-ratio, .raid-ratio {
  font-variant-numeric: tabular-nums;
  white-space: nowrap;
}
.col-raid { min-width: 7.5rem; }
.denom-note {
  font-size: 12px;
  margin: 0.25rem 0 0.75rem;
  line-height: 1.45;
}
.secondary-fail {
  margin: 1rem 0;
  border: 1px solid var(--line, #333);
  border-radius: 8px;
  padding: 0.5rem 0.75rem;
  background: var(--bg-2, #161b22);
}
.secondary-fail summary {
  cursor: pointer;
  font-weight: 600;
  color: var(--muted, #9aa4b2);
}
.secondary-fail-list {
  margin: 0.5rem 0 0;
  padding-left: 1.2rem;
  max-height: 16rem;
  overflow: auto;
  font-size: 13px;
}
.secondary-fail-list li { margin: 0.2rem 0; }

/* Phase B5 — stock 5S tighter */
.s5-summary { margin-bottom: 0.5rem; }
.s5-acc-item.s-other .s5-acc-body { font-size: 12px; }
.s5-cited-card .raw { display: none; }
.s5-stock-tight .s5-side-links a + a::before { content: " · "; color: var(--muted); }
.s5-stock-tight .meta-extra { display: none; }

/* Phase C2 — news row: 代號 first, then headline */
.landing-news-list li {
  display: grid;
  grid-template-columns: 4.5rem 1fr;
  column-gap: 0.65rem;
  row-gap: 0.15rem;
  align-items: start;
}
.landing-news-code {
  grid-column: 1;
  grid-row: 1 / span 2;
  font-variant-numeric: tabular-nums;
  font-weight: 800;
  font-size: 13px;
  color: var(--gold);
  text-decoration: none;
  padding-top: 2px;
}
.landing-news-code:hover { color: var(--cyan); text-decoration: underline; }
.landing-news-list li > a.landing-news-title {
  grid-column: 2;
  grid-row: 1;
}
.landing-news-list li > .landing-news-meta {
  grid-column: 2;
  grid-row: 2;
}
.landing-news-list li.landing-news-recent {
  grid-template-columns: auto 4.5rem 1fr;
}
.landing-news-list li.landing-news-recent .landing-news-badge {
  grid-column: 1;
  grid-row: 1;
}
.landing-news-list li.landing-news-recent .landing-news-code {
  grid-column: 2;
}
.landing-news-list li.landing-news-recent > a.landing-news-title,
.landing-news-list li.landing-news-recent > .landing-news-meta {
  grid-column: 3;
}

.landing-quote-actions {
  display: flex;
  align-items: center;
  gap: 0.75rem;
  margin-top: 0.65rem;
  flex-wrap: wrap;
}
.landing-quote-refresh {
  font: inherit;
  font-size: 12px;
  font-weight: 700;
  padding: 0.35rem 0.75rem;
  border-radius: 999px;
  border: 1px solid var(--gold);
  background: transparent;
  color: var(--gold);
  cursor: pointer;
}
.landing-quote-refresh:hover { background: rgba(240,184,91,0.12); }
.landing-quote-refresh.is-loading { opacity: 0.6; cursor: wait; }
.landing-quote-status {
  font-size: 12px;
  color: var(--muted);
}

.latest-section-anchor {
  color: inherit;
  text-decoration: none;
}
.latest-section-anchor:hover { color: var(--gold); text-decoration: underline; }
.latest-sidebar-nav a.latest-toc-link {
  cursor: pointer;
}

/* /filings Chinese company names (2026-10-15) — avoid global .name-zh {display:block} */
.name-cell .filings-name-zh { font-weight: 600; }
.name-cell .filings-name-en { font-size: 0.92em; margin-left: 0.25em; white-space: nowrap; }

/* Homepage stock code search under 財經語錄 (2026-10-15) */
.landing-code-search {
  margin-bottom: 0.35rem;
}
.landing-theme-search {
  color: var(--cyan, #6ec8ff);
}
.landing-code-form {
  margin: 0.15rem 0 0;
}
.landing-code-label {
  display: block;
  font-size: 13px;
  font-weight: 700;
  color: var(--gold, #f0b85b);
  margin: 0;
}
.landing-code-row {
  display: flex;
  gap: 0.55rem;
  margin-top: 0.4rem;
  align-items: stretch;
  flex-wrap: wrap;
}
.landing-code-row input {
  flex: 1 1 10rem;
  min-width: 8rem;
  max-width: 16rem;
  font: inherit;
  font-size: 1.05rem;
  font-variant-numeric: tabular-nums;
  font-weight: 700;
  letter-spacing: 0.04em;
  padding: 0.55rem 0.75rem;
  border-radius: 10px;
  border: 1px solid var(--line, #333);
  background: var(--bg-2, #161b22);
  color: var(--text, #e8eef7);
}
.landing-code-row input:focus {
  outline: none;
  border-color: var(--gold, #f0b85b);
  box-shadow: 0 0 0 2px rgba(240, 184, 91, 0.25);
}
.landing-code-btn {
  font: inherit;
  font-size: 14px;
  font-weight: 800;
  padding: 0.55rem 1.15rem;
  border-radius: 999px;
  border: 1px solid var(--gold, #f0b85b);
  background: rgba(240, 184, 91, 0.16);
  color: var(--gold, #f0b85b);
  cursor: pointer;
  white-space: nowrap;
}
.landing-code-btn:hover { background: rgba(240, 184, 91, 0.28); }
.landing-code-btn.is-loading { opacity: 0.65; cursor: wait; }
.landing-code-hint {
  margin: 0.45rem 0 0;
  font-size: 12px;
  color: var(--muted, #9aa4b2);
}
.landing-code-result {
  margin-top: 0.85rem;
  padding-top: 0.75rem;
  border-top: 1px solid var(--line, #333);
}
.landing-code-basics {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 0.65rem 1rem;
  margin-bottom: 0.65rem;
}
.landing-code-basics-main {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  gap: 0.45rem 0.75rem;
}
.landing-code-num {
  font-size: 1.35rem;
  font-weight: 800;
  font-variant-numeric: tabular-nums;
  color: var(--gold, #f0b85b);
  letter-spacing: 0.03em;
}
.landing-code-zh { font-weight: 700; font-size: 1.05rem; }
.landing-code-en { color: var(--muted, #9aa4b2); font-size: 0.92rem; }
.landing-code-basics-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 0.4rem;
}
.landing-code-sections {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: 0.45rem;
}
.landing-code-sec {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 0.75rem;
  padding: 0.65rem 0.75rem;
  border-radius: 10px;
  border: 1px solid var(--line, #333);
  background: var(--bg-2, #161b22);
}
.landing-code-sec-body { min-width: 0; flex: 1 1 auto; }
.landing-code-sec-title {
  font-weight: 800;
  font-size: 13px;
  color: var(--cyan, #6ec8ff);
}
.landing-code-sec-summary {
  margin-top: 0.15rem;
  font-size: 12px;
  color: var(--muted, #9aa4b2);
  line-height: 1.4;
  overflow: hidden;
  text-overflow: ellipsis;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
}
.landing-code-enter {
  flex: 0 0 auto;
  font-size: 12px;
  font-weight: 800;
  padding: 0.35rem 0.8rem;
  border-radius: 999px;
  border: 1px solid var(--gold, #f0b85b);
  color: var(--gold, #f0b85b);
  text-decoration: none;
  white-space: nowrap;
  background: transparent;
}
.landing-code-enter:hover {
  background: rgba(240, 184, 91, 0.14);
  color: var(--gold, #f0b85b);
}
.landing-code-enter-secondary {
  border-color: var(--line, #555);
  color: var(--muted, #9aa4b2);
}
.landing-code-enter-secondary:hover {
  border-color: var(--cyan, #6ec8ff);
  color: var(--cyan, #6ec8ff);
  background: rgba(110, 200, 255, 0.08);
}
.landing-code-empty {
  margin: 0.35rem 0 0;
  color: var(--muted, #9aa4b2);
  font-size: 13px;
}
@media (max-width: 640px) {
  .landing-code-row input { max-width: none; }
  .landing-code-btn { width: 100%; }
  .landing-code-sec {
    flex-direction: column;
    align-items: stretch;
  }
  .landing-code-enter { text-align: center; }
}

/* Stock search above 財經語錄 (2026-10-15) */

/* Name-search match picker (2026-10-16 staging) */
.landing-code-pick-title {
  margin: 0 0 0.55rem;
  font-size: 0.92rem;
  color: var(--muted, #9aa4b2);
}
.landing-code-matches {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: 0.45rem;
}
.landing-code-match {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0.45rem 0.65rem;
  padding: 0.55rem 0.65rem;
  border: 1px solid rgba(240, 184, 91, 0.22);
  border-radius: 10px;
  background: rgba(255, 255, 255, 0.03);
}
.landing-code-match-btn {
  flex: 1 1 12rem;
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  gap: 0.35rem 0.65rem;
  margin: 0;
  padding: 0.15rem 0;
  border: 0;
  background: transparent;
  color: inherit;
  text-align: left;
  cursor: pointer;
  font: inherit;
}
.landing-code-match-btn:hover .landing-code-num {
  color: #f0b85b;
}
.landing-code-match-links {
  display: flex;
  flex-wrap: wrap;
  gap: 0.35rem;
}

.landing-code-search-top {
  margin-bottom: 0.35rem;
}


/* Main nav: icon LEFT + text RIGHT; text +30%; group centered in cell (Keith 2026-10-15) */
:root { --topbar-h: 112px; }
.main-nav { gap: 6px; padding: 6px; }
.nav-btn {
  display: flex;
  flex-direction: row;
  align-items: center;
  justify-content: center;   /* center icon+text group in grid cell */
  gap: 6px;
  padding: 6px 8px;
  font-size: 18px;           /* was ~14px → +30% */
  min-height: 36px;
  text-align: center;
}
.nav-btn-icon { width: 14px; height: 14px; flex-shrink: 0; }
.nav-btn-label {
  flex: 0 1 auto;            /* don't stretch; keep group compact & centered */
  min-width: 0;
  font-size: 18px;           /* +30% vs prior 14px */
  font-weight: 800;
  line-height: 1.15;
  text-align: left;          /* text sits to the right of icon */
}
@media (min-width: 720px) {
  .main-nav { gap: 3px; }
  .nav-btn {
    flex-direction: row;
    justify-content: center;
    gap: 5px;
    font-size: 16px;         /* was ~12px → +30%≈15.6 */
    padding: 5px 6px;
    min-height: 34px;
  }
  .nav-btn-icon { width: 13px; height: 13px; }
  .nav-btn-label { font-size: 16px; font-weight: 800; }
}
.topbar-inner { gap: 6px 10px; padding: 6px 12px 8px; }
.topbar-bar { min-height: 32px; gap: 8px; }
@media (max-width: 720px) {
  .topbar-inner { padding: 6px 10px 8px; gap: 6px; }
  .topbar-bar { min-height: 30px; }
  .main-nav { padding: 5px; gap: 5px; }
  .nav-btn {
    flex-direction: row;
    justify-content: center;
    min-height: 36px;
    padding: 7px 8px;
    font-size: 17px;         /* was ~13px → +30%≈16.9 */
    gap: 6px;
  }
  .nav-btn-icon { width: 14px; height: 14px; }
  .nav-btn-label { font-size: 17px; font-weight: 800; }
  .nav-btn-live .nav-btn-label,
  .nav-btn-market .nav-btn-label {
    font-size: 15px;         /* half-width cells: slightly smaller so +30% still fits */
    line-height: 1.15;
    text-align: left;
  }
  .nav-btn-live,
  .nav-btn-market {
    min-height: 36px;
    padding: 6px 8px;
    flex-direction: row;
    justify-content: center;
  }
}
body.collapsed-scroll {
  padding-top: calc(44px + env(safe-area-inset-top, 0px));
}
html {
  scroll-padding-top: calc(48px + env(safe-area-inset-top, 0px));
}

/* Code-search: list all news items (2026-10-15) */
.landing-code-sec-news {
  flex-direction: column;
  align-items: stretch;
}
.landing-code-news-items {
  list-style: none;
  margin: 0.45rem 0 0;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: 0.4rem;
}
.landing-code-news-item {
  padding: 0.5rem 0.55rem;
  border-radius: 8px;
  border: 1px solid var(--line, #333);
  background: rgba(0, 0, 0, 0.18);
}
.landing-code-news-title {
  font-size: 13px;
  font-weight: 600;
  line-height: 1.35;
  color: var(--text, #e8eef7);
  white-space: normal;
  overflow: visible;
  /* no harsh clamp — show full title */
}
.landing-code-news-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 0.4rem;
  margin-top: 0.4rem;
}
.landing-code-source {
  font-size: 12px;
  font-weight: 700;
  padding: 0.35rem 0.75rem;
  border-radius: 999px;
  border: 1px solid var(--line, #555);
  color: var(--muted, #9aa4b2);
  text-decoration: none;
  white-space: nowrap;
  background: transparent;
}
.landing-code-source:hover {
  border-color: var(--cyan, #6ec8ff);
  color: var(--cyan, #6ec8ff);
}


/* F0-T: anomaly / non-authority badges + price conflict */
.badge.anomaly {
  background: rgba(240, 133, 133, 0.18);
  color: var(--bad);
  border-color: rgba(240, 133, 133, 0.55);
  font-weight: 700;
}
.price-conflict-warn {
  line-height: 1.45;
}
.kpi-quarantine .num { color: var(--bad); }
.kpi-quarantine::before { background: var(--bad); }
.qbox .badge.anomaly { margin-right: 4px; }

/* ---- F1 rest 2026-10-15: currency nowrap / dividend short+note / date nowrap ---- */
.ccy-badge {
  display: inline-block;
  white-space: nowrap;
  flex-shrink: 0;
  font-variant-numeric: tabular-nums;
  letter-spacing: 0;
}
.date-cell {
  white-space: nowrap !important;
  font-variant-numeric: tabular-nums;
}
.div-amount,
.landing-div {
  white-space: normal;
  overflow: visible;
  text-overflow: unset;
  max-width: 14rem;
}
.div-amount-main {
  display: inline-block;
  white-space: nowrap;
  font-weight: 600;
}
.div-amount-note {
  display: block;
  margin-top: 0.12em;
  font-size: 0.78em;
  color: var(--muted, #8a8a8a);
  white-space: normal;
  line-height: 1.35;
  word-break: break-word;
}
.landing-div .div-amount-note {
  max-width: 12rem;
}
@media (max-width: 420px) {
  .div-amount,
  .landing-div {
    max-width: 9.5rem;
  }
  /* Currency badge must never clip (RMB→HMB style bug) */
  .ccy-badge,
  .div-amount-main {
    overflow: visible;
    text-overflow: clip;
  }
}
.value-peers-table td.num .ccy-badge {
  margin-left: 0.25em;
}


/* ==========================================================================
   F2-00…08 layout pack (2026-10-15) — nav 5+更多、免責折叠、手機 hamburger、
   FAB 避讓、圖標題、市場橫滑、日曆列表、Lee 九間
   ========================================================================== */

.nav-shell {
  position: relative;
  order: 1;
  flex: 1 1 100%;
  width: 100%;
}
.nav-burger {
  display: none;
  align-items: center;
  gap: 8px;
  height: 44px;
  min-height: 44px;
  padding: 0 14px;
  border-radius: 10px;
  border: 1px solid var(--line-2);
  background: var(--bg-2);
  color: var(--gold);
  font-size: 14px;
  font-weight: 700;
  font-family: inherit;
  cursor: pointer;
  -webkit-tap-highlight-color: rgba(240, 184, 91, 0.35);
  touch-action: manipulation;
  pointer-events: auto !important;
  position: relative;
  z-index: 220;
}
.nav-burger-label { letter-spacing: 0.02em; }
.nav-backdrop {
  position: fixed;
  inset: 0;
  background: rgba(0, 0, 0, 0.45);
  z-index: 90;
}
body.nav-lock {
  overflow: hidden;
  touch-action: none;
}

/* F2-00 disclaimer + counts fold */
.site-disclaimer {
  order: 2;
  flex: 1 1 100%;
  margin: 0;
  padding: 0;
  border: none;
  background: transparent;
}
.site-disclaimer-short {
  list-style: none;
  cursor: pointer;
  font-size: 12.5px;
  line-height: 1.35;
  color: var(--muted);
  max-width: 52rem;
}
.site-disclaimer-short::-webkit-details-marker { display: none; }
.site-disclaimer-short::marker { content: ""; }
.site-disclaimer-more {
  color: var(--gold);
  font-weight: 700;
  margin-left: 0.35rem;
  text-decoration: underline;
  text-underline-offset: 2px;
}
.site-disclaimer-full { margin: 0.35rem 0 0; font-size: 12.5px; max-width: 52rem; }
.counts-fold {
  order: 2;
  flex: 1 1 100%;
  margin: 0;
}
.counts-summary {
  list-style: none;
  cursor: pointer;
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
  padding: 2px 0;
}
.counts-summary::-webkit-details-marker { display: none; }
.counts-summary::marker { content: ""; }
.counts-more { font-size: 12px; }
.counts-fold[open] .counts-more { display: none; }
.counts-fold .counts { margin: 0.35rem 0 0; }

.site-footer {
  max-width: 1320px;
  margin: 2rem auto 1.5rem;
  padding: 1rem 1rem 1.5rem;
  border-top: 1px solid var(--line);
  color: var(--muted);
  font-size: 12.5px;
  line-height: 1.45;
}
.site-footer p { margin: 0.25rem 0; }
.site-footer strong { color: var(--ink-2); }

/* F2-01 更多 dropdown (desktop) */
.nav-more {
  position: relative;
  flex: 0 0 auto;
  margin: 0;
  padding: 0;
  border: none;
  background: transparent;
}
.nav-more > summary.nav-btn-more {
  list-style: none;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 5px;
  height: 100%;
  min-height: 36px;
  padding: 6px 10px;
  border-radius: var(--r-md, 8px);
  border: 1px solid var(--line-2);
  border-left: 3px solid rgba(168, 176, 186, 0.45);
  background: var(--bg-2);
  color: var(--ink-2);
  font-weight: 800;
  font-size: 15px;
  font-family: inherit;
  transform: none !important;
}
.nav-more > summary.nav-btn-more::-webkit-details-marker { display: none; }
.nav-more > summary.nav-btn-more::marker { content: ""; }
.nav-more.has-on > summary.nav-btn-more,
.nav-more[open] > summary.nav-btn-more {
  border-color: rgba(168, 176, 186, 0.55);
  border-left-color: var(--fn-more, #a8b0ba);
  color: var(--ink);
  background: rgba(168, 176, 186, 0.08);
}
.nav-more-panel {
  display: flex;
  flex-direction: column;
  gap: 4px;
  min-width: 11.5rem;
  padding: 6px;
  background: var(--bg-2);
  border: 1px solid var(--line);
  border-radius: var(--r-md, 8px);
  box-shadow: 0 8px 24px rgba(0, 0, 0, 0.35);
  z-index: 80;
}
@media (min-width: 768px) {
  .nav-more-panel {
    position: absolute;
    top: calc(100% + 4px);
    right: 0;
  }
  .nav-more-panel .nav-btn {
    justify-content: center;  /* 2026-10-15: icon+文字置中 */
    align-items: center;
    width: 100%;
    min-height: 40px;
    font-size: 14px;
  }
}

/* 2026-10-15 mobile-menu-native1: checkbox opens drawer without JS */
.nav-open-cb {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
  border: 0;
  appearance: none;
  -webkit-appearance: none;
}
/* Always keep burger/shell tappable even when collapsed topbar sets pointer-events:none */
#topbar.collapsed-scroll .nav-shell,
#topbar.collapsed-scroll .nav-burger,
#topbar .nav-burger {
  pointer-events: auto !important;
}
@media (max-width: 767px) {
  /* burger-fix4: nav/backdrop are body children — use :has / .nav-lock, not sibling ~ */
  body:has(#nav-open-cb:checked) #main-nav,
  body.nav-lock #main-nav {
    display: grid !important;
  }
  body:has(#nav-open-cb:checked) #nav-backdrop,
  body.nav-lock #nav-backdrop {
    display: block !important;
  }
  body:has(.nav-open-cb:checked) {
    overflow: hidden;
    touch-action: none;
  }
  body:has(.nav-open-cb:checked) #topbar,
  body:has(.nav-open-cb:checked) #topbar.collapsed-scroll {
    transform: none !important;
    -webkit-transform: none !important;
    z-index: 200 !important;
    overflow: visible !important;
    padding: 0 !important;
    border-bottom-color: var(--line) !important;
  }
  body:has(.nav-open-cb:checked) .topbar-inner,
  body:has(.nav-open-cb:checked) #topbar.collapsed-scroll .topbar-inner {
    overflow: visible !important;
    max-height: none !important;
    opacity: 1 !important;
    transform: none !important;
    -webkit-transform: none !important;
    pointer-events: auto !important;
    padding: 6px 10px 8px !important;
  }
  /* When collapsed, still show burger row so user can open menu */
  #topbar.collapsed-scroll .nav-shell {
    opacity: 1 !important;
    max-height: none !important;
  }
}

/* F2-02 mobile: collapsed burger bar ≤72px; expand overlay
   Fix 2026-10-15: #topbar uses transform:translateZ(0) (iOS paint) which makes
   position:fixed descendants use the topbar as containing block; combined with
   .topbar-inner{overflow:hidden} the drawer was clipped to ~3 tiles and the
   backdrop only covered the short topbar — 4C tabs stayed visible underneath.
   On nav-lock: drop topbar transform, overflow visible, raise z-index; drawer
   is viewport-fixed, scrollable, above page sticky tabs. */
@media (max-width: 767px) {
  .nav-shell {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 6px;
    min-height: 44px;
    max-height: 72px;
    overflow: visible;
  }
  .nav-burger {
    display: inline-flex;
    position: relative;
    z-index: 220;
    width: 100%;
    justify-content: center;
    pointer-events: auto !important;
    touch-action: manipulation;
  }
  .main-nav {
    display: none;
    position: fixed;
    /* native1: clear burger row (~44) + topbar bar so 4C not covered */
    top: calc(110px + env(safe-area-inset-top, 0px));
    left: 10px;
    right: 10px;
    z-index: 210;
    width: auto;
    max-height: calc(100dvh - 110px - env(safe-area-inset-top, 0px) - 12px);
    max-height: calc(100vh - 110px - env(safe-area-inset-top, 0px) - 12px);
    overflow-x: hidden;
    overflow-y: auto;
    -webkit-overflow-scrolling: touch;
    overscroll-behavior: contain;
    grid-template-columns: 1fr !important;
    padding: 10px !important;
    gap: 6px !important;
    background: var(--bg-2);
    border: 1px solid var(--line);
    border-radius: 12px;
    box-shadow: 0 12px 32px rgba(0, 0, 0, 0.45);
  }
  .nav-shell.nav-open {
    max-height: none;
    overflow: visible;
  }
  /* burger-fix4: open via body, not descendant of .nav-shell */
  body.nav-lock #main-nav,
  body:has(#nav-open-cb:checked) #main-nav {
    display: grid;
  }
  body.nav-lock #nav-backdrop,
  body:has(#nav-open-cb:checked) #nav-backdrop {
    display: block;
    z-index: 205;
  }
  /* Escape topbar containing-block + clipping while menu open.
     Must beat #topbar.collapsed-scroll .topbar-inner (id+!important) so drawer
     stays visible/tappable even if scroll race re-adds collapsed-scroll. */
  body.nav-lock #topbar,
  body.nav-lock #topbar.collapsed-scroll {
    transform: none !important;
    -webkit-transform: none !important;
    z-index: 200 !important;
    overflow: visible !important;
    padding: 0 !important;
    border-bottom-color: var(--line) !important;
  }
  body.nav-lock .topbar-inner,
  body.nav-lock #topbar.collapsed-scroll .topbar-inner,
  body.nav-lock #topbar .topbar-inner {
    overflow: visible !important;
    max-height: none !important;
    opacity: 1 !important;
    transform: none !important;
    -webkit-transform: none !important;
    pointer-events: auto !important;
    padding: 6px 10px 8px !important;
  }
  body.nav-lock .nav-burger {
    pointer-events: auto !important;
    z-index: 230 !important;
  }
  body.nav-lock .main-nav {
    pointer-events: auto !important;
    z-index: 210 !important;
  }
  .main-nav > .nav-btn,
  .nav-more > summary.nav-btn-more {
    min-height: 44px;
    font-size: 16px;
    justify-content: center;  /* 2026-10-15: was flex-start → 上四項靠左 */
    align-items: center;
    text-align: center;
  }
  /* 漢堡展開：全部 7 項（含「更多」入面 3 項）icon+文字置中 */
  .main-nav .nav-btn {
    justify-content: center;
    align-items: center;
    text-align: center;
  }
  .main-nav .nav-btn-label {
    text-align: center;
  }
  .nav-more { display: contents; }
  .nav-more > summary.nav-btn-more { display: none; }
  .nav-more-panel {
    display: contents !important;
    box-shadow: none;
    border: none;
    padding: 0;
    background: transparent;
  }
  .nav-more-panel .nav-btn { width: 100%; justify-content: center; align-items: center; }
  /* F2-00: 390 免責預設 ≤2 行 */
  .site-disclaimer:not([open]) .site-disclaimer-short {
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
  }
  /* F2-03: 內容避讓浮掣 */
  main {
    padding-bottom: 88px !important;
  }
  .screen-wrap,
  .table-wrap,
  .market-table-wrap,
  .latest-table-wrap {
    padding-bottom: 12px;
  }
  .topbar-show-mini {
    /* keep top-right; do not cover bottom table rows */
    bottom: auto;
  }
}

/* F2-05 market scroll hint + freeze first cols */
.market-scroll-hint {
  text-align: center;
  color: var(--muted);
  font-size: 11px;
  padding: 6px 0 0;
  display: none;
}
@media (max-width: 767px) {
  .market-scroll-hint { display: block; }
  .market-table-wrap {
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
    border: 1px solid var(--line-2);
    border-radius: 8px;
  }
  .market-table { min-width: 28rem; }
  .market-table th:nth-child(-n+2),
  .market-table td:nth-child(-n+2) {
    position: sticky;
    left: 0;
    z-index: 1;
    background: var(--bg-2);
  }
  .market-table th:nth-child(2),
  .market-table td:nth-child(2) { left: 5.5rem; }
  .market-table th:first-child,
  .market-table td:first-child { left: 0; }
  .market-alert-table,
  .market-schedule-table {
    display: block;
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
  }
}

/* F2-06 calendar: mobile default list (D7=A) */
.cal-view-table { margin-bottom: 0.75rem; }
.cal-view-list { margin-top: 0.5rem; }
@media (max-width: 767px) {
  .cal-view-table { display: none; }
  .cal-mobile-list-note {
    display: block;
    font-size: 12px;
    color: var(--muted);
    margin: 0.4rem 0 0.6rem;
  }
  .value-cal-grid {
    grid-template-columns: 1fr !important;
  }
  .cal-show-table-btn {
    display: inline-flex;
    margin: 0.35rem 0 0.75rem;
    padding: 0.45rem 0.85rem;
    border-radius: 8px;
    border: 1px solid var(--line-2);
    background: var(--bg-2);
    color: var(--ink-2);
    font-size: 13px;
    font-weight: 600;
    cursor: pointer;
    font-family: inherit;
  }
  body.cal-show-table .cal-view-table { display: block; }
}
@media (min-width: 768px) {
  .cal-mobile-list-note,
  .cal-show-table-btn { display: none !important; }
}

/* F2-07 stop buttons: larger touch + spacing */
.filings-update-actions button,
.latest-ctrl-btn#scrape-stop-btn,
#filings-check-stop,
#live-scrape-stop,
#scrape-stop-btn {
  min-height: 44px;
  min-width: 72px;
  padding: 0.45rem 1rem;
  margin-left: 12px !important;
  font-weight: 700;
}
#filings-check-btn,
#live-scrape-btn,
#scrape-start-btn {
  min-height: 44px;
  padding: 0.45rem 1rem;
}

/* F2-08 steps: Keith AI vs Lee 九間 distinguishable */
.steps .step[href*="keith-ai"],
.steps .step[data-step="keith-ai"] {
  flex: 1.15 1 0;
}
.steps .step[href*="lee-nine"],
.steps .step[data-step="lee-nine"] {
  flex: 1.05 1 0;
}
@media (max-width: 767px) {
  .steps {
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
    flex-wrap: nowrap;
    scrollbar-width: thin;
  }
  .step {
    flex: 0 0 auto;
    min-width: 4.6rem;
    padding: 8px 10px;
    font-size: 12.5px;
    overflow: visible;
    text-overflow: unset;
  }
}

/* F2-04 trend chart: title lives above plot (SVG pad increased in py) */
.trend-chart-wrap {
  padding-top: 4px;
}
.trend-chart-title {
  font-size: 12px;
  font-weight: 700;
  color: var(--ink-2);
  margin: 0 0 4px;
}


/* F3-02 peers FX */
.fx-miss, .fx-miss-label {
  color: var(--muted, #8b93a7);
  opacity: 0.75;
}
.fx-meta {
  font-size: 10px;
  line-height: 1.2;
  margin-top: 2px;
}
.inst-preparing {
  border-style: dashed !important;
}
.latest-update-badge {
  font-size: 11px;
  vertical-align: middle;
}


/* ==========================================================================
   Landing card identity edges (2026-10-15 fn-colors)
   Quiet left accent per section; title pills already colored.
   Quote body gold (quote-prom) unchanged.
   ========================================================================== */
.landing-today {
  border-left: 3px solid rgba(95, 198, 184, 0.50);
  padding-left: 0.85rem;
  margin-left: -0.15rem;
}
#landing-code-search.landing-card {
  border-left: 3px solid rgba(107, 208, 224, 0.55);
}
#landing-quote.landing-card {
  border-left: 3px solid rgba(240, 184, 91, 0.40); /* soft gold edge; body still hero */
}
#landing-dividends.landing-card {
  border-left: 3px solid rgba(240, 184, 91, 0.55);
}
#landing-news.landing-card {
  border-left: 3px solid rgba(107, 208, 224, 0.55);
}
#landing-tools.landing-card {
  border-left: 3px solid rgba(121, 208, 122, 0.55);
}
.landing-links.landing-card {
  border-left: 3px solid rgba(143, 182, 255, 0.55);
}
/* Today grid cards: slight teal edge */
.landing-today-card {
  border-left: 3px solid rgba(95, 198, 184, 0.45);
}
.landing-theme-search {
  color: #6bd0e0;
  background: rgba(107, 208, 224, 0.18);
  border-color: rgba(107, 208, 224, 0.45);
}


/* custom stock onboard MVP 2026-10-15 */
.custom-stock-page .lead { max-width: 42rem; }
.custom-stock-card {
  border: 1px solid var(--border, #333);
  border-radius: 10px;
  padding: 0.9rem 1rem;
  margin: 0.6rem 0 1rem;
  background: rgba(255,255,255,0.03);
}
.custom-stock-jobs { list-style: none; padding: 0; margin: 0; }
.custom-stock-jobs li {
  display: flex; flex-wrap: wrap; gap: 0.5rem 0.75rem;
  align-items: baseline;
  padding: 0.55rem 0;
  border-bottom: 1px solid rgba(255,255,255,0.06);
}
.custom-stock-log {
  white-space: pre-wrap;
  font-size: 0.78rem;
  max-height: 14rem;
  overflow: auto;
  background: rgba(0,0,0,0.35);
  padding: 0.6rem 0.75rem;
  border-radius: 8px;
}
.custom-state-queued { color: #9ecbff; border-color: rgba(158,203,255,0.35); }
.custom-state-downloading, .custom-state-extracting, .custom-state-building {
  color: #f0c674; border-color: rgba(240,198,116,0.4);
}
.custom-state-done { color: #79d07a; border-color: rgba(121,208,122,0.35); }
.custom-state-failed { color: #f07178; border-color: rgba(240,113,120,0.4); }
.custom-stock-note { margin-top: 1.5rem; font-size: 0.85rem; }


/* Personal portfolio (持倉) — 2026-10-15 */
.portfolio-toolbar { flex-wrap: wrap; gap: 0.5rem; }
.portfolio-toolbar input { max-width: 140px; }
.portfolio-toolbar input[name="note"] { max-width: 180px; }
.portfolio-summary {
  margin: 0.75rem 0 0.25rem;
  display: flex;
  flex-wrap: wrap;
  gap: 0.35rem 0.75rem;
  font-size: 0.92rem;
}
.portfolio-holding {
  display: flex;
  flex-wrap: wrap;
  gap: 0.15rem 0.35rem;
  font-size: 0.88rem;
  width: 100%;
  order: 5;
}
.portfolio-row { flex-wrap: wrap; }
.portfolio-note { opacity: 0.85; }
.portfolio-edit { display: inline-block; margin: 0 0.25rem; }
.portfolio-edit summary {
  cursor: pointer;
  list-style: none;
  font-size: 0.85rem;
  padding: 0.2rem 0.55rem;
  border-radius: 6px;
  border: 1px solid rgba(125, 133, 144, 0.35);
  background: rgba(125, 133, 144, 0.12);
}
.portfolio-edit summary::-webkit-details-marker { display: none; }
.portfolio-edit-form {
  display: flex;
  flex-wrap: wrap;
  gap: 0.4rem;
  margin-top: 0.4rem;
  padding: 0.5rem;
  border-radius: 8px;
  background: rgba(0, 0, 0, 0.18);
  border: 1px solid rgba(125, 133, 144, 0.25);
}
.portfolio-edit-form label {
  display: flex;
  flex-direction: column;
  gap: 0.15rem;
  font-size: 0.78rem;
  color: var(--ink-2);
}
.portfolio-edit-form input { min-width: 5.5rem; max-width: 8rem; }
.portfolio-actions { align-items: center; }


/* 2026-10-15 footer-login-move: remove left brand-dot; topbar login moved to landing footer */
.auth-brand-mark { display: none !important; }
.nav-btn-login-fixed,
.topbar-login-collapsed { display: none !important; }
.topbar-home-label {
  font-size: 13px;
  font-weight: 800;
  letter-spacing: 0.04em;
  color: inherit;
}
.landing-footer-login-title {
  margin: 0 !important;
  text-align: center;
  font-size: 0.95rem;
  font-weight: 800;
  color: var(--gold);
  letter-spacing: 0.02em;
}
.landing-footer-login-alt {
  margin: 0 !important;
  text-align: center;
  font-size: 0.78rem;
}
.landing-footer-login-alt a {
  color: var(--cyan, #6bd0e0);
  text-decoration: underline;
}


/* 2026-10-15 footer-auth-rebuild: working footer user menu (JS after DOM; open UP; clickable) */
.topbar-bar-right .user-menu,
.topbar-bar .user-menu { display: none !important; }
.site-footer {
  position: relative;
  overflow: visible !important;
  z-index: 40;
}
.site-footer-auth {
  display: flex;
  flex-direction: column;
  align-items: stretch;
  gap: 0.75rem;
  margin: 0 0 1rem;
  position: relative;
  overflow: visible !important;
  z-index: 50;
  pointer-events: auto;
}
.site-footer-auth .user-menu,
.site-footer-user-menu {
  position: relative;
  display: inline-block;
  align-self: flex-start;
  overflow: visible !important;
  z-index: 60;
  pointer-events: auto;
}
.site-footer-auth .user-menu-btn {
  pointer-events: auto !important;
  cursor: pointer;
  -webkit-tap-highlight-color: rgba(240, 184, 91, 0.35);
  touch-action: manipulation;
}
.site-footer-auth .user-menu-dropdown {
  top: auto !important;
  bottom: calc(100% + 8px) !important;
  right: 0;
  left: auto;
  z-index: 400 !important;
  overflow: auto;
  max-height: min(70vh, 28rem);
  pointer-events: auto !important;
  box-shadow: 0 8px 32px rgba(0,0,0,0.55);
}
.site-footer-auth .user-menu-item {
  pointer-events: auto !important;
  cursor: pointer;
}
.site-footer-login {
  margin-bottom: 0;
  pointer-events: auto;
}
@media (min-width: 640px) {
  .site-footer-auth { align-items: flex-start; max-width: 28rem; }
  .site-footer-auth .user-menu { align-self: flex-start; }
}


/* 2026-10-15 remove-top-home: 頂左首頁已拆；頂欄左右皆空時收埋避免空白帶 */
.topbar-bar:has(> .topbar-bar-right:only-child) {
  display: none !important;
  min-height: 0 !important;
}
.topbar-home-btn,
.topbar-home-left,
.topbar-home-label { display: none !important; }


/* 2026-10-15 login-topleft: restore working Google login / user-menu at TOP-LEFT */
.topbar-bar {
  display: flex !important;
  min-height: 32px !important;
  justify-content: flex-start;
  align-items: center;
  gap: 8px;
}
.topbar-bar .user-menu,
.topbar-bar .topbar-user-menu,
.topbar-bar-right .user-menu {
  display: inline-block !important;
  position: relative;
  flex: 0 0 auto;
  order: 0;
  margin-left: 0;
  margin-right: auto;
  z-index: 80;
  overflow: visible !important;
  pointer-events: auto;
}
.topbar-bar .nav-btn-login-fixed,
.topbar-bar .topbar-login-left {
  display: inline-flex !important;
  position: relative;
  flex: 0 0 auto;
  order: 0;
  margin-left: 0;
  margin-right: auto;
  z-index: 80;
  pointer-events: auto !important;
  cursor: pointer;
  -webkit-tap-highlight-color: rgba(240, 184, 91, 0.35);
  touch-action: manipulation;
}
.topbar-bar .user-menu-btn {
  pointer-events: auto !important;
  cursor: pointer;
  -webkit-tap-highlight-color: rgba(240, 184, 91, 0.35);
  touch-action: manipulation;
}
/* Dropdown opens DOWN from top-left (not up like footer) */
.topbar-bar .user-menu-dropdown {
  top: calc(100% + 8px) !important;
  bottom: auto !important;
  left: 0 !important;
  right: auto !important;
  z-index: 400 !important;
  overflow: auto;
  max-height: min(70vh, 28rem);
  pointer-events: auto !important;
  box-shadow: 0 8px 32px rgba(0,0,0,0.55);
}
.topbar-bar .user-menu-item {
  pointer-events: auto !important;
  cursor: pointer;
}
/* Footer no longer hosts auth */
.site-footer-auth,
.site-footer-login,
.site-footer .landing-footer-login {
  display: none !important;
}
@media (max-width: 720px) {
  .topbar-bar .nav-btn-login-fixed,
  .topbar-bar .topbar-login-left {
    padding: 7px 12px;
    font-size: 12px;
    gap: 6px;
  }
  .topbar-bar .user-menu-name { max-width: 88px; }
  .topbar-bar .user-menu-btn { padding: 4px 8px; gap: 6px; }
}


/* 2026-10-16 login-topright: move working Google login / user-menu to TOP-RIGHT */
.topbar-bar {
  display: flex !important;
  min-height: 32px !important;
  justify-content: flex-end;
  align-items: center;
  gap: 8px;
}
/* Override remove-top-home hide when bar only contains topbar-bar-right (login) */
.topbar-bar:has(> .topbar-bar-right:only-child) {
  display: flex !important;
  min-height: 32px !important;
}
.topbar-bar-right {
  display: inline-flex !important;
  align-items: center;
  gap: 8px;
  flex: 0 0 auto;
  margin-left: auto;
  margin-right: 0;
  order: 99;
  z-index: 80;
  overflow: visible !important;
  pointer-events: auto;
}
.topbar-bar-right .user-menu,
.topbar-bar-right .topbar-user-menu,
.topbar-bar .user-menu,
.topbar-bar .topbar-user-menu {
  display: inline-block !important;
  position: relative;
  flex: 0 0 auto;
  margin-left: 0;
  margin-right: 0;
  z-index: 80;
  overflow: visible !important;
  pointer-events: auto;
}
.topbar-bar-right .nav-btn-login-fixed,
.topbar-bar-right .topbar-login-right,
.topbar-bar .nav-btn-login-fixed,
.topbar-bar .topbar-login-right {
  display: inline-flex !important;
  position: relative;
  flex: 0 0 auto;
  margin-left: 0;
  margin-right: 0;
  z-index: 80;
  pointer-events: auto !important;
  cursor: pointer;
  -webkit-tap-highlight-color: rgba(240, 184, 91, 0.35);
  touch-action: manipulation;
}
.topbar-bar-right .user-menu-btn,
.topbar-bar .user-menu-btn {
  pointer-events: auto !important;
  cursor: pointer;
  -webkit-tap-highlight-color: rgba(240, 184, 91, 0.35);
  touch-action: manipulation;
}
/* Dropdown opens DOWN from top-right */
.topbar-bar-right .user-menu-dropdown,
.topbar-bar .user-menu-dropdown {
  top: calc(100% + 8px) !important;
  bottom: auto !important;
  left: auto !important;
  right: 0 !important;
  z-index: 400 !important;
  overflow: auto;
  max-height: min(70vh, 28rem);
  pointer-events: auto !important;
  box-shadow: 0 8px 32px rgba(0,0,0,0.55);
}
.topbar-bar-right .user-menu-item,
.topbar-bar .user-menu-item {
  pointer-events: auto !important;
  cursor: pointer;
}
/* Keep left clean: no brand-mark 圓點; desktop 首頁 via .topbar-home-desktop */
.auth-brand-mark { display: none !important; }
.topbar-home-btn,
.topbar-home-left,
.topbar-home-label { display: none !important; }
/* Footer still free of auth */
.site-footer-auth,
.site-footer-login,
.site-footer .landing-footer-login {
  display: none !important;
}
@media (max-width: 720px) {
  .topbar-bar-right .nav-btn-login-fixed,
  .topbar-bar-right .topbar-login-right {
    padding: 7px 12px;
    font-size: 12px;
    gap: 6px;
  }
  .topbar-bar-right .user-menu-name { max-width: 88px; }
  .topbar-bar-right .user-menu-btn { padding: 4px 8px; gap: 6px; }
}


/* 2026-10-16 desktop-home-left: 頂左「首頁」僅 ≥1024px；手機隱藏；無 brand-mark */
.topbar-bar {
  justify-content: space-between !important;
}
.topbar-home-desktop {
  display: none; /* mobile / <1024: hidden */
  align-items: center;
  flex: 0 0 auto;
  order: 0;
  margin-right: auto;
  padding: 6px 12px;
  border-radius: 999px;
  border: 1px solid rgba(240, 184, 91, 0.45);
  background: rgba(240, 184, 91, 0.1);
  color: var(--gold);
  font-size: 13px;
  font-weight: 800;
  letter-spacing: 0.04em;
  text-decoration: none;
  white-space: nowrap;
  z-index: 80;
  pointer-events: auto;
  cursor: pointer;
  -webkit-tap-highlight-color: rgba(240, 184, 91, 0.35);
}
.topbar-home-desktop:hover,
.topbar-home-desktop:focus-visible {
  background: rgba(240, 184, 91, 0.22);
  border-color: var(--gold);
  outline: none;
}
@media (min-width: 1024px) {
  .topbar-home-desktop {
    display: inline-flex !important;
  }
}


/* ===== ZINDEX-AUTH-BLOCK-START ===== */
/* 2026-10-16 zindex-login-over-nav:
   Prior fix raised #topbar to 1000 then put mobile .nav-shell/.nav-burger at
   1150–1160 ABOVE auth. User dropdown (inside .topbar-bar) lost to「選單」bar.
   Rule: auth/user dropdown always beats hamburger + drawer; drawer still beats
   page content via #topbar stacking. Close drawer when opening user menu (JS). */
#topbar {
  z-index: 1000 !important;
}
.topbar-show-mini,
.topbar-login-collapsed {
  z-index: 1001 !important;
}

/* Auth chrome above nav-shell siblings inside #topbar */
.topbar-bar {
  position: relative;
  z-index: 2000 !important;
}
.topbar-bar-right,
.topbar-bar-right .user-menu,
.topbar-bar .user-menu,
.topbar-bar-right .nav-btn-login-fixed,
.topbar-bar-right .topbar-login-right {
  position: relative;
  z-index: 2001 !important;
}
.topbar-bar-right .user-menu-dropdown,
.topbar-bar .user-menu-dropdown,
#user-menu-dropdown {
  z-index: 2100 !important;
  pointer-events: auto !important;
}

/* Unclip dropdown while open; keep topbar above page */
#topbar:has(#user-menu-btn[aria-expanded="true"]),
#topbar:has(.user-menu-dropdown:not([hidden])) {
  z-index: 2200 !important;
  transform: none !important;
  -webkit-transform: none !important;
  overflow: visible !important;
}
#topbar:has(#user-menu-btn[aria-expanded="true"]) .topbar-inner,
#topbar:has(.user-menu-dropdown:not([hidden])) .topbar-inner {
  overflow: visible !important;
  max-height: none !important;
  pointer-events: auto !important;
}

/* Landing cards stay below topbar auth */
body.page-landing main,
body.page-landing .landing,
.landing-card,
#landing-code-search,
.landing-code-search {
  position: relative;
  z-index: 1;
}

/* Mobile: drawer may cover page content, but NEVER cover auth dropdown.
   Keep nav-shell/burger BELOW .topbar-bar (2000+). */
@media (max-width: 767px) {
  body.nav-lock #topbar,
  body.nav-lock #topbar.collapsed-scroll,
  body:has(.nav-open-cb:checked) #topbar,
  body:has(.nav-open-cb:checked) #topbar.collapsed-scroll {
    z-index: 1000 !important;
    overflow: visible !important;
  }
  /* When account menu open, raise whole topbar further above any leftover overlays */
  body.nav-lock #topbar:has(.user-menu-dropdown:not([hidden])),
  body:has(.nav-open-cb:checked) #topbar:has(.user-menu-dropdown:not([hidden])),
  #topbar:has(.user-menu-dropdown:not([hidden])) {
    z-index: 2200 !important;
  }
  body.nav-lock .nav-shell,
  body:has(.nav-open-cb:checked) .nav-shell,
  .nav-shell {
    z-index: 200 !important;
  }
  .nav-burger,
  body.nav-lock .nav-burger {
    z-index: 220 !important;
  }
  /* burger-fix4: nav/backdrop are outside #topbar — keep below auth, above page.
     Open-state z-index is raised further in BURGER-FIX4 (#main-nav 1210). */
  body.nav-lock #main-nav,
  body:has(#nav-open-cb:checked) #main-nav,
  #main-nav {
    z-index: 210 !important;
  }
  body.nav-lock #nav-backdrop,
  body:has(#nav-open-cb:checked) #nav-backdrop,
  #nav-backdrop {
    z-index: 205 !important;
  }
  /* Auth bar always wins over 選單 / drawer inside topbar */
  .topbar-bar {
    z-index: 2000 !important;
  }
  .topbar-bar-right .user-menu-dropdown,
  .topbar-bar .user-menu-dropdown,
  #user-menu-dropdown {
    z-index: 2100 !important;
  }
}
/* ===== ZINDEX-AUTH-BLOCK-END ===== */

/* ===== BURGER-FIX4-START ===== */
/* 2026-10-16 burger-fix4
   Structural: #main-nav + #nav-backdrop are body children AFTER </header>
   (not inside #topbar / .topbar-inner / .nav-shell). Drawer cannot inherit
   .topbar-inner{opacity:0}; position:fixed is viewport-fixed (no translateZ
   containing-block from #topbar). Open state uses body:has(#nav-open-cb:checked)
   and body.nav-lock — not sibling ~ (checkbox stays in .nav-shell).
*/
.topbar-show-mini {
  position: fixed !important;
  top: max(10px, env(safe-area-inset-top, 0px)) !important;
  right: max(10px, env(safe-area-inset-right, 0px)) !important;
  left: auto !important;
  z-index: 1200 !important;
  pointer-events: auto !important;
  -webkit-tap-highlight-color: rgba(240, 184, 91, 0.35);
  touch-action: manipulation;
}
body.collapsed-scroll .topbar-show-mini:not(.permanent-hide) {
  display: inline-flex !important;
  opacity: 1 !important;
  visibility: visible !important;
}
#topbar.collapsed-scroll {
  overflow: visible !important;
}
#topbar.collapsed-scroll .nav-shell,
#topbar.collapsed-scroll .nav-burger {
  pointer-events: none !important;
}
#topbar:not(.collapsed-scroll) .nav-burger,
#topbar:not(.collapsed-scroll) .nav-shell,
body.nav-lock .nav-burger,
body.nav-lock .nav-shell,
body:has(#nav-open-cb:checked) .nav-burger,
body:has(#nav-open-cb:checked) .nav-shell {
  pointer-events: auto !important;
}

/* Desktop: #main-nav is outside fixed #topbar — pin below chrome */
@media (min-width: 768px) {
  .nav-shell {
    /* burger unused on desktop; keep checkbox in DOM for :has() */
    position: absolute !important;
    width: 1px !important;
    height: 1px !important;
    overflow: hidden !important;
    clip: rect(0, 0, 0, 0) !important;
    margin: -1px !important;
    padding: 0 !important;
    border: 0 !important;
    flex: 0 0 0 !important;
    max-height: 0 !important;
    min-height: 0 !important;
    pointer-events: none !important;
  }
  #main-nav {
    position: fixed !important;
    top: var(--topbar-chrome-h, 48px) !important;
    left: 0 !important;
    right: 0 !important;
    z-index: 998 !important;
    display: flex !important;
    flex-wrap: nowrap !important;
    align-items: stretch !important;
    gap: 3px !important;
    width: auto !important;
    max-width: 1320px !important;
    margin: 0 auto !important;
    padding: 6px 22px !important;
    box-sizing: border-box !important;
    background: var(--bg) !important;
    border: none !important;
    border-bottom: 1px solid var(--line) !important;
    border-radius: 0 !important;
    box-shadow: none !important;
    opacity: 1 !important;
    visibility: visible !important;
    transform: none !important;
    pointer-events: auto !important;
  }
  body.collapsed-scroll #main-nav,
  #topbar.collapsed-scroll ~ #main-nav {
    display: none !important;
    visibility: hidden !important;
    pointer-events: none !important;
    opacity: 0 !important;
  }
  body.page-auth #main-nav {
    display: none !important;
  }
  #nav-backdrop {
    display: none !important;
  }
}

/* Mobile drawer open — body-scoped (nav is not a sibling of checkbox) */
@media (max-width: 767px) {
  body:has(#nav-open-cb:checked) #main-nav,
  body.nav-lock #main-nav {
    display: grid !important;
    position: fixed !important;
    top: calc(110px + env(safe-area-inset-top, 0px)) !important;
    left: 10px !important;
    right: 10px !important;
    z-index: 1210 !important;
    width: auto !important;
    max-height: calc(100dvh - 110px - env(safe-area-inset-top, 0px) - 12px) !important;
    max-height: calc(100vh - 110px - env(safe-area-inset-top, 0px) - 12px) !important;
    overflow-x: hidden !important;
    overflow-y: auto !important;
    -webkit-overflow-scrolling: touch;
    overscroll-behavior: contain;
    grid-template-columns: 1fr !important;
    padding: 10px !important;
    gap: 6px !important;
    background: var(--bg-2) !important;
    border: 1px solid var(--line) !important;
    border-radius: 12px !important;
    box-shadow: 0 12px 32px rgba(0, 0, 0, 0.45) !important;
    opacity: 1 !important;
    visibility: visible !important;
    transform: none !important;
    -webkit-transform: none !important;
    pointer-events: auto !important;
  }
  body:has(#nav-open-cb:checked) #nav-backdrop,
  body.nav-lock #nav-backdrop {
    display: block !important;
    position: fixed !important;
    inset: 0 !important;
    z-index: 1205 !important;
    background: rgba(0, 0, 0, 0.45) !important;
    opacity: 1 !important;
    visibility: visible !important;
    pointer-events: auto !important;
  }
  /* Force readable tiles — explicit colors, not only inherit */
  body:has(#nav-open-cb:checked) #main-nav .nav-btn,
  body.nav-lock #main-nav .nav-btn {
    opacity: 1 !important;
    visibility: visible !important;
    transform: none !important;
    pointer-events: auto !important;
    font-size: 16px !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    gap: 8px !important;
    min-height: 44px !important;
    overflow: visible !important;
  }
  body:has(#nav-open-cb:checked) #main-nav .nav-btn-label,
  body.nav-lock #main-nav .nav-btn-label {
    display: inline !important;
    opacity: 1 !important;
    visibility: visible !important;
    clip: auto !important;
    -webkit-clip-path: none !important;
    clip-path: none !important;
    overflow: visible !important;
    font-size: 17px !important;
    font-weight: 800 !important;
    line-height: 1.2 !important;
    white-space: nowrap !important;
    width: auto !important;
    height: auto !important;
    max-width: none !important;
    max-height: none !important;
    color: #e8eef7 !important; /* explicit readable — not inherit */
  }
  body:has(#nav-open-cb:checked) #main-nav .nav-btn-icon,
  body.nav-lock #main-nav .nav-btn-icon {
    display: inline-flex !important;
    opacity: 1 !important;
    visibility: visible !important;
    width: 14px !important;
    height: 14px !important;
    flex-shrink: 0 !important;
    color: inherit !important;
  }
  body:has(#nav-open-cb:checked) #main-nav .nav-btn-icon svg,
  body.nav-lock #main-nav .nav-btn-icon svg {
    display: block !important;
    width: 100% !important;
    height: 100% !important;
    opacity: 1 !important;
    visibility: visible !important;
    stroke: currentColor !important;
  }
  body:has(#nav-open-cb:checked) #main-nav .nav-btn-5s,
  body.nav-lock #main-nav .nav-btn-5s { color: #9edbe6 !important; }
  body:has(#nav-open-cb:checked) #main-nav .nav-btn-5s .nav-btn-label,
  body.nav-lock #main-nav .nav-btn-5s .nav-btn-label { color: #9edbe6 !important; }
  body:has(#nav-open-cb:checked) #main-nav .nav-btn-brand,
  body.nav-lock #main-nav .nav-btn-brand { color: #7fd4c8 !important; }
  body:has(#nav-open-cb:checked) #main-nav .nav-btn-brand .nav-btn-label,
  body.nav-lock #main-nav .nav-btn-brand .nav-btn-label { color: #7fd4c8 !important; }
  body:has(#nav-open-cb:checked) #main-nav .nav-btn-live,
  body.nav-lock #main-nav .nav-btn-live { color: #8fd890 !important; }
  body:has(#nav-open-cb:checked) #main-nav .nav-btn-live .nav-btn-label,
  body.nav-lock #main-nav .nav-btn-live .nav-btn-label { color: #8fd890 !important; }
  body:has(#nav-open-cb:checked) #main-nav .nav-btn-market,
  body.nav-lock #main-nav .nav-btn-market { color: #efb08a !important; }
  body:has(#nav-open-cb:checked) #main-nav .nav-btn-market .nav-btn-label,
  body.nav-lock #main-nav .nav-btn-market .nav-btn-label { color: #efb08a !important; }
  body:has(#nav-open-cb:checked) #main-nav .nav-btn-calc,
  body.nav-lock #main-nav .nav-btn-calc { color: #c4a3de !important; }
  body:has(#nav-open-cb:checked) #main-nav .nav-btn-calc .nav-btn-label,
  body.nav-lock #main-nav .nav-btn-calc .nav-btn-label { color: #c4a3de !important; }
  body:has(#nav-open-cb:checked) #main-nav .nav-btn-latest,
  body.nav-lock #main-nav .nav-btn-latest { color: #f0c47a !important; }
  body:has(#nav-open-cb:checked) #main-nav .nav-btn-latest .nav-btn-label,
  body.nav-lock #main-nav .nav-btn-latest .nav-btn-label { color: #f0c47a !important; }
  body:has(#nav-open-cb:checked) #main-nav .nav-btn-inst,
  body.nav-lock #main-nav .nav-btn-inst { color: #a8c4ff !important; }
  body:has(#nav-open-cb:checked) #main-nav .nav-btn-inst .nav-btn-label,
  body.nav-lock #main-nav .nav-btn-inst .nav-btn-label { color: #a8c4ff !important; }
  body:has(#nav-open-cb:checked) #main-nav .nav-btn-learn,
  body.nav-lock #main-nav .nav-btn-learn { color: #efa0bb !important; }
  body:has(#nav-open-cb:checked) #main-nav .nav-btn-learn .nav-btn-label,
  body.nav-lock #main-nav .nav-btn-learn .nav-btn-label { color: #efa0bb !important; }

  /* Keep topbar chrome usable while drawer open (burger stays tappable) */
  body.nav-lock #topbar,
  body:has(#nav-open-cb:checked) #topbar,
  body.nav-lock #topbar.collapsed-scroll,
  body:has(#nav-open-cb:checked) #topbar.collapsed-scroll {
    opacity: 1 !important;
    visibility: visible !important;
    transform: none !important;
    -webkit-transform: none !important;
    pointer-events: auto !important;
    overflow: visible !important;
    z-index: 200 !important;
    padding: 0 !important;
    background: var(--bg) !important;
  }
  body.nav-lock .topbar-inner,
  body:has(#nav-open-cb:checked) .topbar-inner,
  body.nav-lock #topbar.collapsed-scroll .topbar-inner,
  body:has(#nav-open-cb:checked) #topbar.collapsed-scroll .topbar-inner {
    opacity: 1 !important;
    visibility: visible !important;
    transform: none !important;
    -webkit-transform: none !important;
    pointer-events: auto !important;
    max-height: none !important;
    overflow: visible !important;
    padding: 6px 10px 8px !important;
  }
  .live-day-header,
  .latest-table th {
    z-index: 2;
  }
}
/* ===== BURGER-FIX4-END ===== */


/* Portfolio rebuild 2026-10-16: target / filing / safety */
.portfolio-toolbar input[name="target_price"] { max-width: 120px; }
.portfolio-safety { display: inline-block; }
.portfolio-filing {
  display: inline-flex;
  align-items: center;
  gap: 0.35rem;
  margin-left: 0.5rem;
  font-size: 0.85em;
}
.portfolio-filing-lab {
  font-weight: 600;
  opacity: 0.8;
}
.portfolio-filing-new { color: var(--good, #3d9a6a); }
.portfolio-filing-known { opacity: 0.95; }
.portfolio-filing-checked { opacity: 0.75; }
.portfolio-filing-unknown { opacity: 0.65; }
.portfolio-filing-at { font-size: 0.8em; }


/* Screen pool filters + one-click actions 2026-10-16 */
.screen-pool-bar {
  margin: 0.75rem 0 1rem;
  padding: 0.5rem 0.75rem;
}
.screen-pool-bar > summary {
  cursor: pointer;
  font-weight: 600;
  display: flex;
  flex-wrap: wrap;
  gap: 0.5rem;
  align-items: center;
}
.screen-pool-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(9.5rem, 1fr));
  gap: 0.6rem 0.75rem;
  margin: 0.75rem 0 0.35rem;
}
.screen-pool-grid label {
  display: flex;
  flex-direction: column;
  gap: 0.25rem;
  font-size: 0.85rem;
}
.screen-pool-grid select {
  min-width: 0;
  width: 100%;
}
.screen-pool-note { font-size: 0.8rem; margin: 0.35rem 0 0.5rem; }
.screen-pool-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 0.5rem;
  align-items: center;
  margin-bottom: 0.25rem;
}
.screen-actions-cell {
  white-space: nowrap;
  vertical-align: middle;
}
.screen-row-actions {
  display: inline-flex;
  flex-wrap: wrap;
  gap: 0.25rem;
  align-items: center;
}
.screen-add-btn {
  font-size: 0.75rem;
  padding: 0.15rem 0.45rem;
  border-radius: 999px;
  border: 1px solid var(--border, #444);
  background: transparent;
  color: inherit;
  cursor: pointer;
  line-height: 1.3;
}
.screen-add-btn:hover:not(:disabled) {
  border-color: var(--accent, #f0b85b);
}
.screen-add-btn.is-on,
.screen-add-btn:disabled.is-on {
  opacity: 0.75;
  cursor: default;
}
.screen-row-actions-login { font-size: 0.75rem; }
.col-actions { width: 1%; }
.s1-cards .screen-row-actions { margin: 0.25rem 0; }
@media (max-width: 720px) {
  .screen-pool-grid { grid-template-columns: 1fr 1fr; }
  .screen-actions-cell { white-space: normal; }
}


/* Smart alerts MVP 2026-10-16 */
.alert-badge {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 1.15rem;
  height: 1.15rem;
  padding: 0 0.3rem;
  margin-left: 0.25rem;
  border-radius: 999px;
  background: var(--bad, #c45);
  color: #fff;
  font-size: 0.65rem;
  font-weight: 700;
  line-height: 1;
}
.alert-badge-menu { margin-left: auto; }
.user-menu-item { display: flex; align-items: center; gap: 0.5rem; }
.alerts-toolbar {
  display: flex;
  flex-wrap: wrap;
  gap: 0.5rem;
  align-items: center;
  margin: 0.75rem 0;
}
.alerts-mute-form {
  margin: 1rem 0;
  padding: 0.75rem;
  border: 1px solid var(--line, #333);
  border-radius: 8px;
}
.alerts-mute-grid {
  display: flex;
  flex-wrap: wrap;
  gap: 0.75rem 1.25rem;
  margin: 0.5rem 0 0.75rem;
}
.alerts-mute-item {
  display: inline-flex;
  align-items: center;
  gap: 0.35rem;
  font-size: 0.9rem;
}
.alerts-counts {
  display: flex;
  flex-wrap: wrap;
  gap: 0.4rem;
  margin-bottom: 1rem;
}
.alerts-list {
  list-style: none;
  padding: 0;
  margin: 0;
  display: flex;
  flex-direction: column;
  gap: 0.65rem;
}
.alerts-item {
  padding: 0.65rem 0.85rem;
  border: 1px solid var(--line, #333);
  border-radius: 8px;
  border-left-width: 3px;
}
.alerts-item.is-unread {
  box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--bad, #c45) 35%, transparent);
}
.alerts-item.tone-warn { border-left-color: var(--bad, #c45); }
.alerts-item.tone-gold { border-left-color: var(--gold, #c89b3c); }
.alerts-item.tone-good { border-left-color: var(--good, #3d9a6a); }
.alerts-item.tone-info { border-left-color: var(--accent, #6af); }
.alerts-item-head {
  display: flex;
  flex-wrap: wrap;
  gap: 0.35rem 0.5rem;
  align-items: center;
  margin-bottom: 0.25rem;
}
.alerts-at { margin-left: auto; font-size: 0.8rem; }
.alerts-title { font-weight: 600; }
.alerts-detail { font-size: 0.9rem; margin-top: 0.15rem; }
.alerts-links { margin-top: 0.35rem; font-size: 0.85rem; }
.alerts-foot { margin-top: 1.5rem; font-size: 0.85rem; }
@media (max-width: 720px) {
  .alerts-at { margin-left: 0; width: 100%; }
}

/* ---- #4 invest notes / thesis cards 2026-10-16 ---- */
.notes-page .lead { max-width: 52rem; }
.notes-toolbar, .notes-stock-toolbar { display: flex; flex-wrap: wrap; gap: 8px; margin: 10px 0 14px; align-items: center; }
.notes-meta { margin: 6px 0 14px; font-size: 13px; }
.notes-list { list-style: none; padding: 0; margin: 0; display: grid; gap: 12px; }
.notes-card {
  border: 1px solid var(--line, rgba(255,255,255,0.12));
  border-radius: 12px;
  padding: 14px 16px;
  background: rgba(255,255,255,0.03);
}
.notes-card.stance-bull { border-left: 3px solid var(--good, #79d07a); }
.notes-card.stance-bear { border-left: 3px solid var(--bad, #f08585); }
.notes-card.stance-neutral { border-left: 3px solid var(--gold, #f0b85b); }
.notes-card-head { display: flex; flex-wrap: wrap; gap: 8px; align-items: center; margin-bottom: 6px; }
.notes-title { font-size: 1.1rem; margin: 4px 0 8px; }
.notes-title a { text-decoration: none; color: inherit; }
.notes-title a:hover { color: var(--accent, #7eb6ff); }
.notes-lab {
  display: inline-block;
  font-size: 11px;
  font-weight: 600;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  opacity: 0.7;
  margin-right: 4px;
}
.notes-thesis { margin: 4px 0; line-height: 1.45; }
.notes-risks { margin: 4px 0; line-height: 1.45; color: var(--bad, #f08585); opacity: 0.95; }
.notes-body { margin: 4px 0; line-height: 1.45; white-space: pre-wrap; }
.notes-tags { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 8px; }
.notes-links { margin-top: 10px; font-size: 13px; }
.notes-stance { font-size: 12px; }
.notes-at { margin-left: auto; font-size: 12px; }
.notes-form { display: grid; gap: 12px; max-width: 40rem; margin-top: 12px; }
.notes-field { display: grid; gap: 4px; }
.notes-field input, .notes-field textarea, .notes-field select {
  width: 100%;
  padding: 8px 10px;
  border-radius: 8px;
  border: 1px solid var(--line, rgba(255,255,255,0.15));
  background: rgba(0,0,0,0.25);
  color: inherit;
  font: inherit;
}
.notes-form-actions { display: flex; gap: 10px; align-items: center; margin-top: 4px; }
.notes-delete { margin-top: 24px; padding-top: 16px; border-top: 1px dashed var(--line, rgba(255,255,255,0.12)); }
.notes-stock-list { list-style: none; padding: 0; margin: 8px 0 0; display: grid; gap: 8px; }
.notes-stock-item {
  padding: 8px 10px;
  border-radius: 8px;
  border: 1px solid var(--line, rgba(255,255,255,0.1));
  background: rgba(0,0,0,0.15);
}
.notes-stock-item.stance-bull { border-left: 3px solid var(--good, #79d07a); }
.notes-stock-item.stance-bear { border-left: 3px solid var(--bad, #f08585); }
.portfolio-notes-link { text-decoration: none; font-size: 12px; }

/* ---- #7 invest summary print card 2026-10-16 ---- */
.summary-page { max-width: 52rem; }
.summary-toolbar { margin-bottom: 1rem; }
.summary-actions { display: flex; flex-wrap: wrap; gap: 8px; align-items: center; margin: 8px 0; }
.summary-btn {
  appearance: none;
  border: 1px solid rgba(121, 208, 122, 0.5);
  background: rgba(121, 208, 122, 0.15);
  color: inherit;
  font: inherit;
  font-weight: 600;
  padding: 0.45rem 0.9rem;
  border-radius: 999px;
  cursor: pointer;
}
.summary-btn:hover { background: rgba(121, 208, 122, 0.28); }
.summary-hint { font-size: 0.85rem; margin: 0.25rem 0 0; }
.summary-head {
  display: flex;
  flex-wrap: wrap;
  align-items: flex-start;
  justify-content: space-between;
  gap: 0.75rem;
  margin-bottom: 1rem;
  padding-bottom: 0.75rem;
  border-bottom: 1px solid var(--line, rgba(255,255,255,0.12));
}
.summary-code { font-size: 1.6rem; margin: 0 0 0.25rem; }
.summary-name { font-size: 1.15rem; font-weight: 600; margin-left: 0.35rem; }
.summary-name-en { margin-left: 0.35rem; font-size: 0.95rem; }
.summary-lights {
  display: flex;
  flex-wrap: wrap;
  gap: 0.65rem 1rem;
  margin: 0.75rem 0 1rem;
}
.summary-light { display: inline-flex; align-items: center; gap: 0.35rem; }
.summary-light .lab,
.summary-block .lab {
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.04em;
  opacity: 0.7;
  margin-right: 2px;
}
.summary-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(14rem, 1fr));
  gap: 0.85rem;
  margin-bottom: 1rem;
}
.summary-block {
  border: 1px solid var(--line, rgba(255,255,255,0.12));
  border-radius: 12px;
  padding: 0.85rem 1rem;
  background: rgba(255,255,255,0.03);
}
.summary-block h2 { font-size: 0.95rem; margin: 0 0 0.5rem; }
.summary-kv { list-style: none; margin: 0; padding: 0; display: grid; gap: 0.35rem; }
.summary-kv li { display: flex; flex-wrap: wrap; gap: 0.35rem 0.6rem; align-items: baseline; }
.summary-kv li > span:first-child { min-width: 4.5rem; color: var(--muted, #9aa); font-size: 0.85rem; }
.summary-thesis-title { font-weight: 600; margin: 0 0 0.35rem; }
.summary-risks { color: var(--bad, #f08585); }
.summary-foot { margin-top: 1.25rem; padding-top: 0.75rem; border-top: 1px dashed var(--line, rgba(255,255,255,0.12)); font-size: 0.8rem; }
.summary-mini-lights { display: flex; flex-direction: column; gap: 0.2rem; font-size: 0.82rem; }
.summary-table { font-size: 0.9rem; }

@media print {
  .no-print,
  .topbar, .site-nav, .nav-bar, header.top, .user-menu,
  .crumb, .summary-toolbar, footer.site-footer, .toast {
    display: none !important;
  }
  body {
    background: #fff !important;
    color: #111 !important;
  }
  .summary-page, .panel {
    box-shadow: none !important;
    border: none !important;
    max-width: 100% !important;
    margin: 0 !important;
    padding: 0 !important;
  }
  .summary-block, .summary-head {
    break-inside: avoid;
    border-color: #ccc !important;
    background: #fff !important;
  }
  a { color: inherit !important; text-decoration: none !important; }
  .summary-foot { color: #444 !important; }
  @page { margin: 12mm; }
}


/* ===== BURGER-FIX5-START 2026-10-16 =====
   Belt-and-suspenders with inline <style id="burger-fix5"> in base.html.
   Android Chrome Auto Dark can crush inherited color/currentColor while leaving
   absolute border-left-color intact — force absolute label + stroke colors.
*/
html { color-scheme: only dark; }
#main-nav .nav-btn-label {
  display: inline !important;
  opacity: 1 !important;
  visibility: visible !important;
  font-size: 17px !important;
  font-weight: 800 !important;
  line-height: 1.2 !important;
  color: #e8eef7 !important;
  -webkit-text-fill-color: #e8eef7 !important;
  filter: none !important;
  text-shadow: none !important;
}
#main-nav .nav-btn-icon,
#main-nav .nav-btn-icon svg {
  display: inline-flex !important;
  opacity: 1 !important;
  visibility: visible !important;
  width: 14px !important;
  height: 14px !important;
}
#main-nav .nav-btn-icon svg {
  display: block !important;
  fill: none !important;
  stroke-width: 2 !important;
}
#main-nav .nav-btn-5s .nav-btn-label { color: #9edbe6 !important; -webkit-text-fill-color: #9edbe6 !important; }
#main-nav .nav-btn-5s .nav-btn-icon svg { stroke: #9edbe6 !important; }
#main-nav .nav-btn-brand .nav-btn-label { color: #7fd4c8 !important; -webkit-text-fill-color: #7fd4c8 !important; }
#main-nav .nav-btn-brand .nav-btn-icon svg { stroke: #7fd4c8 !important; }
#main-nav .nav-btn-live .nav-btn-label { color: #8fd890 !important; -webkit-text-fill-color: #8fd890 !important; }
#main-nav .nav-btn-live .nav-btn-icon svg { stroke: #8fd890 !important; }
#main-nav .nav-btn-market .nav-btn-label { color: #efb08a !important; -webkit-text-fill-color: #efb08a !important; }
#main-nav .nav-btn-market .nav-btn-icon svg { stroke: #efb08a !important; }
#main-nav .nav-btn-calc .nav-btn-label { color: #c4a3de !important; -webkit-text-fill-color: #c4a3de !important; }
#main-nav .nav-btn-calc .nav-btn-icon svg { stroke: #c4a3de !important; }
#main-nav .nav-btn-latest .nav-btn-label { color: #f0c47a !important; -webkit-text-fill-color: #f0c47a !important; }
#main-nav .nav-btn-latest .nav-btn-icon svg { stroke: #f0c47a !important; }
#main-nav .nav-btn-inst .nav-btn-label { color: #a8c4ff !important; -webkit-text-fill-color: #a8c4ff !important; }
#main-nav .nav-btn-inst .nav-btn-icon svg { stroke: #a8c4ff !important; }
#main-nav .nav-btn-learn .nav-btn-label { color: #efa0bb !important; -webkit-text-fill-color: #efa0bb !important; }
#main-nav .nav-btn-learn .nav-btn-icon svg { stroke: #efa0bb !important; }
body.page-filings-live #topbar.collapsed-scroll .topbar-inner,
body.page-latest #topbar.collapsed-scroll .topbar-inner {
  opacity: 1 !important;
  visibility: visible !important;
  transform: none !important;
  -webkit-transform: none !important;
  max-height: none !important;
  pointer-events: auto !important;
  padding: 6px 10px 8px !important;
  overflow: visible !important;
}
body.page-filings-live #topbar.collapsed-scroll,
body.page-latest #topbar.collapsed-scroll {
  padding: 0 !important;
  border-bottom-color: var(--line, #2a3140) !important;
}
body.page-filings-live .nav-burger,
body.page-latest .nav-burger,
body.page-filings-live .nav-shell,
body.page-latest .nav-shell {
  opacity: 1 !important;
  visibility: visible !important;
  pointer-events: auto !important;
}
/* ===== BURGER-FIX5-END ===== */


/* ===== BURGER-FIX6-START 2026-10-16 =====
   Nuclear: emoji icons + inline colors in base.html; hide SVG; yellow banner diagnostic.
   Two fresh mobile browsers still blank after fix5 — Auto Dark alone not full story. */
#nav-fix-banner {
  display: block !important;
  grid-column: 1 / -1 !important;
  background: #f0b85b !important;
  color: #000 !important;
  -webkit-text-fill-color: #000 !important;
  opacity: 1 !important;
  visibility: visible !important;
  padding: 10px 12px !important;
  border-radius: 8px !important;
  font-size: 14px !important;
  font-weight: 800 !important;
  line-height: 1.35 !important;
}
#main-nav .nav-btn-icon svg { display: none !important; }
#main-nav .nav-btn {
  opacity: 1 !important;
  visibility: visible !important;
  overflow: visible !important;
  min-height: 48px !important;
}
#main-nav .nav-btn-icon {
  display: inline !important;
  opacity: 1 !important;
  visibility: visible !important;
  font-size: 18px !important;
  line-height: 1 !important;
}
#main-nav .nav-btn-label {
  display: inline !important;
  opacity: 1 !important;
  visibility: visible !important;
  font-size: 17px !important;
  font-weight: 800 !important;
  -webkit-text-fill-color: inherit !important;
  filter: none !important;
  text-shadow: none !important;
}
#main-nav .nav-btn-5s .nav-btn-label { color: #9edbe6 !important; -webkit-text-fill-color: #9edbe6 !important; }
#main-nav .nav-btn-brand .nav-btn-label { color: #7fd4c8 !important; -webkit-text-fill-color: #7fd4c8 !important; }
#main-nav .nav-btn-live .nav-btn-label { color: #8fd890 !important; -webkit-text-fill-color: #8fd890 !important; }
#main-nav .nav-btn-market .nav-btn-label { color: #efb08a !important; -webkit-text-fill-color: #efb08a !important; }
#main-nav .nav-btn-calc .nav-btn-label { color: #c4a3de !important; -webkit-text-fill-color: #c4a3de !important; }
#main-nav .nav-btn-latest .nav-btn-label { color: #f0c47a !important; -webkit-text-fill-color: #f0c47a !important; }
#main-nav .nav-btn-inst .nav-btn-label { color: #a8c4ff !important; -webkit-text-fill-color: #a8c4ff !important; }
#main-nav .nav-btn-learn .nav-btn-label { color: #efa0bb !important; -webkit-text-fill-color: #efa0bb !important; }
/* ===== BURGER-FIX6-END ===== */

/* ===== SITE-DRAWER-V3b 2026-10-16 — gold .nav-btn strip on desktop; light-card drawer on mobile ===== */
/* Desktop: classic .nav-btn colors from earlier rules; only position the strip. */
@media (min-width: 768px) {
  #main-nav.site-drawer {
    display: flex !important;
    flex-direction: row !important;
    flex-wrap: nowrap !important;
    gap: 3px !important;
    position: fixed !important;
    top: var(--topbar-chrome-h, 48px) !important;
    left: 0; right: 0;
    z-index: 998 !important;
    padding: 6px 22px !important;
    background: var(--bg-2, #141a22) !important;
    border-bottom: 1px solid var(--line, #2a3140) !important;
    max-width: none !important;
    margin: 0 !important;
    width: auto !important;
    grid-template-columns: none !important;
    box-shadow: none !important;
    border-radius: 0 !important;
  }
  #main-nav.site-drawer .site-drawer-title { display: none !important; }
  #main-nav.site-drawer > .nav-btn {
    flex: 1 1 0 !important;
    min-width: 0 !important;
    opacity: 1 !important;
    visibility: visible !important;
  }
  #main-nav.site-drawer .nav-btn-label,
  #main-nav.site-drawer .nav-btn-icon,
  #main-nav.site-drawer .nav-btn-icon svg {
    opacity: 1 !important;
    visibility: visible !important;
  }
  body.collapsed-scroll #main-nav.site-drawer { display: none !important; }
}
@media (max-width: 767px) {
  body:has(#nav-open-cb:checked) #main-nav.site-drawer,
  body.nav-lock #main-nav.site-drawer {
    display: flex !important;
    flex-direction: column !important;
    position: fixed !important;
    top: calc(96px + env(safe-area-inset-top, 0px)) !important;
    left: 12px !important; right: 12px !important;
    z-index: 1300 !important;
    max-height: calc(100dvh - 110px) !important;
    overflow: auto !important;
    padding: 12px !important;
    gap: 8px !important;
    background: #12161e !important;
    border: 1px solid #2a3140 !important;
    border-radius: 16px !important;
    box-shadow: 0 18px 48px rgba(0,0,0,.55) !important;
    grid-template-columns: none !important;
  }
  #main-nav.site-drawer .site-drawer-title {
    display: inline-block !important;
    align-self: flex-start !important;
    margin: 0 0 4px !important;
    padding: 4px 10px !important;
    background: #e5e7eb !important;
    color: #0e1116 !important;
    -webkit-text-fill-color: #0e1116 !important;
    font-size: 12px !important;
    font-weight: 700 !important;
    border: 1px solid #d0d7e2 !important;
    border-radius: 999px !important;
  }
  body:has(#nav-open-cb:checked) #main-nav.site-drawer > .nav-btn,
  body.nav-lock #main-nav.site-drawer > .nav-btn {
    display: flex !important;
    flex-direction: row !important;
    align-items: center !important;
    justify-content: flex-start !important;
    gap: 10px !important;
    width: 100% !important;
    padding: 14px 16px !important;
    background: #f3f6fb !important;
    color: #0e1116 !important;
    -webkit-text-fill-color: #0e1116 !important;
    font-size: 16px !important;
    font-weight: 700 !important;
    border: 1px solid #d0d7e2 !important;
    border-left: 4px solid #6bd0e0 !important;
    border-radius: 12px !important;
    box-shadow: 0 1px 3px rgba(0,0,0,.25) !important;
    opacity: 1 !important;
    visibility: visible !important;
    min-height: 48px !important;
    transform: none !important;
  }
  body:has(#nav-open-cb:checked) #main-nav.site-drawer > .nav-btn .nav-btn-label,
  body.nav-lock #main-nav.site-drawer > .nav-btn .nav-btn-label {
    color: #0e1116 !important;
    -webkit-text-fill-color: #0e1116 !important;
    opacity: 1 !important;
    visibility: visible !important;
    font-size: 16px !important;
    font-weight: 700 !important;
  }
  body:has(#nav-open-cb:checked) #main-nav.site-drawer > .nav-btn .nav-btn-icon,
  body.nav-lock #main-nav.site-drawer > .nav-btn .nav-btn-icon {
    display: inline-flex !important;
    opacity: 1 !important;
    visibility: visible !important;
    width: 20px; height: 20px;
    color: #0e1116 !important;
  }
  body:has(#nav-open-cb:checked) #main-nav.site-drawer > .nav-btn .nav-btn-icon svg,
  body.nav-lock #main-nav.site-drawer > .nav-btn .nav-btn-icon svg {
    display: block !important;
    width: 100%; height: 100%;
    stroke: #0e1116 !important;
    fill: none !important;
    opacity: 1 !important;
    visibility: visible !important;
  }
  #main-nav.site-drawer > .nav-btn[data-nav-key="5s"] { border-left-color: #6bd0e0 !important; }
  #main-nav.site-drawer > .nav-btn[data-nav-key="brand"] { border-left-color: #5fc6b8 !important; }
  #main-nav.site-drawer > .nav-btn[data-nav-key="live"] { border-left-color: #79d07a !important; }
  #main-nav.site-drawer > .nav-btn[data-nav-key="market"] { border-left-color: #e8956a !important; }
  #main-nav.site-drawer > .nav-btn[data-nav-key="calc"] { border-left-color: #b48cd6 !important; }
  #main-nav.site-drawer > .nav-btn[data-nav-key="latest"] { border-left-color: #f0b85b !important; }
  #main-nav.site-drawer > .nav-btn[data-nav-key="inst"] { border-left-color: #8fb6ff !important; }
  #main-nav.site-drawer > .nav-btn[data-nav-key="learn"] { border-left-color: #e88aad !important; }
  body:has(#nav-open-cb:checked) #main-nav.site-drawer > .nav-btn.on[data-nav-key="5s"],
  body.nav-lock #main-nav.site-drawer > .nav-btn.on[data-nav-key="5s"] {
    background: #b8ecf4 !important; border-color: #6bd0e0 !important; border-left-color: #6bd0e0 !important;
  }
  body:has(#nav-open-cb:checked) #main-nav.site-drawer > .nav-btn.on[data-nav-key="brand"],
  body.nav-lock #main-nav.site-drawer > .nav-btn.on[data-nav-key="brand"] {
    background: #c5ebe4 !important; border-color: #5fc6b8 !important; border-left-color: #5fc6b8 !important;
  }
  body:has(#nav-open-cb:checked) #main-nav.site-drawer > .nav-btn.on[data-nav-key="live"],
  body.nav-lock #main-nav.site-drawer > .nav-btn.on[data-nav-key="live"] {
    background: #c8eac8 !important; border-color: #79d07a !important; border-left-color: #79d07a !important;
  }
  body:has(#nav-open-cb:checked) #main-nav.site-drawer > .nav-btn.on[data-nav-key="market"],
  body.nav-lock #main-nav.site-drawer > .nav-btn.on[data-nav-key="market"] {
    background: #f5dcc8 !important; border-color: #e8956a !important; border-left-color: #e8956a !important;
  }
  body:has(#nav-open-cb:checked) #main-nav.site-drawer > .nav-btn.on[data-nav-key="calc"],
  body.nav-lock #main-nav.site-drawer > .nav-btn.on[data-nav-key="calc"] {
    background: #e0d4ef !important; border-color: #b48cd6 !important; border-left-color: #b48cd6 !important;
  }
  body:has(#nav-open-cb:checked) #main-nav.site-drawer > .nav-btn.on[data-nav-key="latest"],
  body.nav-lock #main-nav.site-drawer > .nav-btn.on[data-nav-key="latest"] {
    background: #f5e6c8 !important; border-color: #f0b85b !important; border-left-color: #f0b85b !important;
  }
  body:has(#nav-open-cb:checked) #main-nav.site-drawer > .nav-btn.on[data-nav-key="inst"],
  body.nav-lock #main-nav.site-drawer > .nav-btn.on[data-nav-key="inst"] {
    background: #d4e2ff !important; border-color: #8fb6ff !important; border-left-color: #8fb6ff !important;
  }
  body:has(#nav-open-cb:checked) #main-nav.site-drawer > .nav-btn.on[data-nav-key="learn"],
  body.nav-lock #main-nav.site-drawer > .nav-btn.on[data-nav-key="learn"] {
    background: #f5d4e0 !important; border-color: #e88aad !important; border-left-color: #e88aad !important;
  }
}
/* ===== SITE-DRAWER-V3b-END ===== */


/* ===== 2026-10-16 nav-rebuild-v1-kill：蓋過舊 icon-hide／更多／夾死 ===== */
#main-nav .nav-btn-icon svg { display: block !important; }
#main-nav.site-nav .nav-btn-icon svg { display: block !important; opacity: 1 !important; visibility: visible !important; }
.nav-more { display: none !important; } /* 舊「更多」唔再用 */


/* ===== 2026-10-16 muse topbar-brand2：蓋過 desktop-only／flex-shrink／footer-login-move ===== */
#topbar .topbar-bar a.auth-brand.topbar-brand {
  display: inline-flex !important;
  flex: 0 0 auto !important;
  min-width: max-content !important;
  max-width: none !important;
  overflow: visible !important;
  color: #f0b85b !important;
  -webkit-text-fill-color: #f0b85b !important;
  opacity: 1 !important;
  visibility: visible !important;
}
#topbar .topbar-bar a.auth-brand.topbar-brand .auth-brand-mark {
  display: inline-block !important;
}
#topbar .topbar-bar a.auth-brand.topbar-brand > span:last-child {
  display: inline !important;
  color: #f0b85b !important;
  -webkit-text-fill-color: #f0b85b !important;
  overflow: visible !important;
}
/* 手機／桌面都顯示「首頁」（蓋過 display:none + min-width 1024 限制） */
#topbar .topbar-bar a.topbar-home-desktop {
  display: inline-flex !important;
  flex: 0 0 auto !important;
  opacity: 1 !important;
  visibility: visible !important;
  color: #f0b85b !important;
  -webkit-text-fill-color: #f0b85b !important;
}
/* ===== 2026-10-16 muse topbar-brand2-END ===== */

/* ===== 2026-10-16 staging filter-wrap2b：兩行 chip 原尺寸 wrap（唔縮字／padding）=====
   Keith：唔好縮小 chip；窄屏真正 flex-wrap，chip 保持原本大小，跟 viewport 換行。
   時段列＝.live-filters.live-period 直屬 chips；類別列＝.live-filter-group。
   根因：group 跟 content 撐闊 + body overflow-x:hidden 切右邊。
*/
@media (max-width: 720px) {
  body.page-filings-live,
  body.page-latest {
    overflow-x: visible !important;
  }
  body.page-filings-live main,
  body.page-latest main,
  body.page-filings-live .live-page,
  body.page-latest .latest-page,
  .live-page,
  .latest-page,
  .value-tools-page {
    max-width: 100% !important;
    width: 100% !important;
    box-sizing: border-box !important;
    overflow-x: visible !important;
  }

  .live-filters,
  .live-filters.live-period,
  body.page-filings-live .live-filters,
  body.page-filings-live .live-filters.live-period {
    display: flex !important;
    flex-direction: row !important;
    flex-wrap: wrap !important;
    align-items: flex-start !important;
    align-content: flex-start !important;
    gap: 8px !important;
    width: 100% !important;
    max-width: 100% !important;
    min-width: 0 !important;
    box-sizing: border-box !important;
    overflow-x: visible !important;
    overflow-y: visible !important;
  }

  .live-filter-group,
  body.page-filings-live .live-filter-group {
    display: flex !important;
    flex-direction: row !important;
    flex-wrap: wrap !important;
    flex: 1 1 100% !important;
    width: 100% !important;
    max-width: 100% !important;
    min-width: 0 !important;
    gap: 6px !important;
    box-sizing: border-box !important;
    overflow-x: visible !important;
  }

  /* label 獨佔一行，唔同 chip 爭位；chip 本身大小唔改 */
  .live-filters > .live-filter-label,
  .live-filter-group > .live-filter-label,
  .live-filters.live-period > .live-filter-label {
    flex: 0 0 100% !important;
    width: 100% !important;
    max-width: 100% !important;
    margin: 0 0 2px !important;
  }

  /* 唔縮 padding／font——只確保可 wrap、唔撐爆容器 */
  .live-chip,
  body.page-filings-live .live-chip {
    flex: 0 0 auto !important;
    flex-shrink: 0 !important;
    max-width: 100% !important;
    box-sizing: border-box !important;
  }

  .live-search,
  body.page-filings-live .live-search {
    margin-left: 0 !important;
    flex: 1 1 100% !important;
    width: 100% !important;
    max-width: 100% !important;
    min-width: 0 !important;
  }
  .live-search input {
    width: 100% !important;
    max-width: 100% !important;
    min-width: 0 !important;
    box-sizing: border-box !important;
  }

  .value-tools-tabs {
    display: flex !important;
    flex-wrap: wrap !important;
    gap: 0.4rem !important;
    width: 100% !important;
    max-width: 100% !important;
    min-width: 0 !important;
    box-sizing: border-box !important;
    overflow-x: visible !important;
  }
  .value-tools-tabs a {
    flex: 0 0 auto !important;
    flex-shrink: 0 !important;
    max-width: 100% !important;
    box-sizing: border-box !important;
    /* 保留原本 padding／font-size（唔覆寫） */
  }
  .value-tools-form {
    max-width: 100% !important;
    min-width: 0 !important;
    flex-wrap: wrap !important;
  }
}
/* ===== 2026-10-16 staging filter-wrap2b-END ===== */

/* ===== 2026-10-16 staging filter-wrap2c：/latest 同期 wrap（唔縮字）=====
   /latest 用 .latest-stats／.latest-controls／.chip.chip-info（長文 nowrap）／.ai-external-chips
   唔共用 .live-filters。chip 原尺寸；只 wrap + max-width 100% + min-width 0。
*/
@media (max-width: 720px) {
  body.page-latest,
  body.page-latest main,
  body.page-latest .latest-page {
    overflow-x: visible !important;
    max-width: 100% !important;
    box-sizing: border-box !important;
  }

  /* 時段 KPI 卡：保持 grid，唔畀 min-content 撐爆 */
  body.page-latest .latest-stats,
  .latest-page .latest-stats {
    width: 100% !important;
    max-width: 100% !important;
    min-width: 0 !important;
    box-sizing: border-box !important;
    grid-template-columns: repeat(3, minmax(0, 1fr)) !important;
  }
  body.page-latest .latest-stat,
  .latest-page .latest-stat {
    min-width: 0 !important;
    max-width: 100% !important;
    box-sizing: border-box !important;
  }

  /* 控制列：wrap；取消 toggle 嘅 margin-left:auto 推爆 */
  body.page-latest .latest-controls,
  .latest-page .latest-controls {
    display: flex !important;
    flex-wrap: wrap !important;
    width: 100% !important;
    max-width: 100% !important;
    min-width: 0 !important;
    box-sizing: border-box !important;
    overflow-x: visible !important;
  }
  body.page-latest .latest-ctrl-btn,
  .latest-page .latest-ctrl-btn {
    flex: 0 0 auto !important;
    max-width: 100% !important;
  }
  body.page-latest .latest-ctrl-toggle,
  .latest-page .latest-ctrl-toggle {
    margin-left: 0 !important;
  }

  /* 頁頂標題列 */
  body.page-latest .latest-header,
  .latest-page .latest-header {
    display: flex !important;
    flex-wrap: wrap !important;
    width: 100% !important;
    max-width: 100% !important;
    min-width: 0 !important;
    box-sizing: border-box !important;
  }
  body.page-latest .latest-header h1,
  .latest-page .latest-header h1 {
    flex: 1 1 100% !important;
    min-width: 0 !important;
    max-width: 100% !important;
    white-space: normal !important;
    overflow-wrap: anywhere;
  }
  body.page-latest .latest-header-actions,
  .latest-page .latest-header-actions {
    flex: 0 0 auto !important;
    max-width: 100% !important;
  }

  /* 長角色說明誤用 .chip（預設 nowrap）→ 允許換行，唔切「派息」 */
  body.page-latest p.chip,
  body.page-latest .chip.chip-info,
  body.page-filings-live p.chip,
  body.page-filings-live .chip.chip-info,
  .latest-page p.chip,
  .latest-page .chip.chip-info,
  .live-page p.chip,
  .live-page .chip.chip-info {
    display: block !important;
    white-space: normal !important;
    max-width: 100% !important;
    width: 100% !important;
    box-sizing: border-box !important;
    line-height: 1.45 !important;
    overflow-wrap: anywhere;
  }

  /* section 標題列 */
  body.page-latest .latest-section-head,
  .latest-page .latest-section-head {
    flex-wrap: wrap !important;
    max-width: 100% !important;
    min-width: 0 !important;
    gap: 8px !important;
  }

  /* AI 預設問題 chips */
  body.page-latest .ai-external-chips,
  .latest-page .ai-external-chips,
  .ai-external-chips {
    display: flex !important;
    flex-wrap: wrap !important;
    width: 100% !important;
    max-width: 100% !important;
    min-width: 0 !important;
    gap: 6px !important;
    box-sizing: border-box !important;
    overflow-x: visible !important;
  }
  body.page-latest .ai-chip,
  .latest-page .ai-chip,
  .ai-chip {
    flex: 0 0 auto !important;
    max-width: 100% !important;
    box-sizing: border-box !important;
  }
}
/* ===== 2026-10-16 staging filter-wrap2c-END ===== */

/* ===== 2026-10-16 staging filter-wrap3：根治 document 橫向溢出 =====
   證據：類別 chip 合計 ~548px；若 group flex-wrap 失效／被當 nowrap，
   group scrollWidth≈921 > viewport；body overflow-x:hidden 只係藏，
   Keith 縮細頁可見螢幕外內容。
   修法：唔靠 flex-wrap 單一路徑——改 block 容器 + inline-flex chip
   （行內自然換行），chip 保持原 padding/font；document 唔再比 viewport 闊。
*/
@media (max-width: 720px) {
  html {
    overflow-x: visible !important;
    max-width: 100% !important;
  }
  body.page-filings-live,
  body.page-latest {
    overflow-x: visible !important;
    max-width: 100% !important;
    width: 100% !important;
    position: relative !important;
  }
  /* 蓋過 @media(max-width:800px) body{overflow-x:hidden} —— 唔好用 hidden 藏溢出 */
  body.page-filings-live,
  body.page-latest {
    overflow-x: visible !important;
  }
  body.page-filings-live main,
  body.page-latest main,
  body.page-filings-live .live-page,
  body.page-latest .latest-page,
  body.page-filings-live .value-tools-page {
    max-width: 100% !important;
    width: 100% !important;
    min-width: 0 !important;
    box-sizing: border-box !important;
    overflow-x: visible !important;
  }

  /* 時段列：block + 行內 chip 自然 wrap */
  body.page-filings-live .live-filters,
  body.page-filings-live .live-filters.live-period,
  .live-page .live-filters,
  .live-page .live-filters.live-period {
    display: block !important;
    width: 100% !important;
    max-width: 100% !important;
    min-width: 0 !important;
    box-sizing: border-box !important;
    overflow: visible !important;
    font-size: 12px !important; /* restore after any collapse; chip keeps own size */
  }
  body.page-filings-live .live-filters > .live-filter-label,
  body.page-filings-live .live-filters.live-period > .live-filter-label,
  .live-page .live-filters > .live-filter-label {
    display: block !important;
    width: 100% !important;
    margin: 0 0 6px !important;
  }

  /* 類別 group：block 令 chip 做 inline 換行（唔依賴 flex-wrap） */
  body.page-filings-live .live-filter-group,
  .live-page .live-filter-group {
    display: block !important;
    width: 100% !important;
    max-width: 100% !important;
    min-width: 0 !important;
    box-sizing: border-box !important;
    overflow: visible !important;
    margin: 0 0 8px !important;
  }
  body.page-filings-live .live-filter-group > .live-filter-label,
  .live-page .live-filter-group > .live-filter-label {
    display: block !important;
    width: 100% !important;
    margin: 0 0 6px !important;
  }

  /* chip：inline-flex = 行內盒，跟 block 父級自然 wrap；唔縮 padding/font */
  body.page-filings-live .live-chip,
  .live-page .live-chip,
  body.page-filings-live .live-filters .live-chip,
  body.page-filings-live .live-filter-group .live-chip {
    display: inline-flex !important;
    vertical-align: middle !important;
    flex: none !important;
    flex-shrink: 0 !important;
    max-width: 100% !important;
    box-sizing: border-box !important;
    margin: 0 6px 6px 0 !important;
    /* padding/font 沿用 .live-chip 原規則（5px 10px / 12px） */
  }

  /* search 全闊，唔 margin-left:auto 推爆 */
  body.page-filings-live .live-search,
  .live-page .live-search {
    display: flex !important;
    flex-wrap: wrap !important;
    width: 100% !important;
    max-width: 100% !important;
    min-width: 0 !important;
    margin-left: 0 !important;
    box-sizing: border-box !important;
  }
  body.page-filings-live .live-search input,
  .live-page .live-search input {
    width: 100% !important;
    max-width: 100% !important;
    min-width: 0 !important;
    box-sizing: border-box !important;
  }

  /* 派息日曆 tabs：同樣 block + inline-flex */
  .value-tools-tabs {
    display: block !important;
    width: 100% !important;
    max-width: 100% !important;
    min-width: 0 !important;
    box-sizing: border-box !important;
    overflow: visible !important;
  }
  .value-tools-tabs a {
    display: inline-flex !important;
    vertical-align: middle !important;
    flex: none !important;
    max-width: 100% !important;
    margin: 0 6px 6px 0 !important;
    box-sizing: border-box !important;
  }
  .value-tools-form {
    max-width: 100% !important;
    min-width: 0 !important;
    flex-wrap: wrap !important;
  }

  /* topbar 唔好撐闊 document */
  body.page-filings-live #topbar,
  body.page-filings-live .top,
  body.page-filings-live .topbar-inner,
  body.page-filings-live .topbar-bar {
    max-width: 100% !important;
    box-sizing: border-box !important;
  }
  body.page-filings-live .topbar-bar {
    flex-wrap: wrap !important;
    min-width: 0 !important;
  }
}
/* ===== 2026-10-16 staging filter-wrap3-END ===== */






/* ---- US heatmap (staging 2026-10-16) ---- */
/* Title: soft sky cyan on dark + ~30% larger (0.95rem -> 1.24rem) */
.landing-theme-heatmap {
  color: #7ec8e3;
  background: linear-gradient(135deg, rgba(34, 197, 94, 0.18), rgba(239, 68, 68, 0.14));
  border-color: rgba(126, 200, 227, 0.45);
  font-size: 1.24rem; /* base pill 0.95rem * 1.3 */
}
.landing-heatmap .landing-theme-heatmap .landing-ico {
  width: 1.45rem;
  height: 1.45rem;
}
.landing-heatmap .landing-theme-heatmap .landing-ico svg {
  width: 20px;
  height: 20px;
}
.landing-heatmap.landing-card {
  margin-top: 0.85rem;
}
/* HK heatmap cards (HSI / HSTECH) — same title theme as US */
#landing-heatmap-hsi .landing-theme-heatmap,
#landing-heatmap-hstech .landing-theme-heatmap {
  color: #7ec8e3;
}
.landing-heatmap-cap {
  margin: 0.15rem 0 0.55rem;
  font-size: 0.92rem;
}
.landing-heatmap-thumb-btn {
  display: block;
  width: 100%;
  margin: 0;
  padding: 0;
  border: 1px solid rgba(148, 163, 184, 0.28);
  border-radius: 12px;
  background: #0b1220;
  cursor: zoom-in;
  position: relative;
  overflow: hidden;
}
.landing-heatmap-thumb-btn:focus-visible {
  outline: 2px solid #fbbf24;
  outline-offset: 2px;
}
.landing-heatmap-thumb {
  display: block;
  width: 100%;
  height: auto;
  max-height: 420px;
  object-fit: cover;
  object-position: center top;
  vertical-align: top;
}
.landing-heatmap-zoom-hint {
  position: absolute;
  right: 10px;
  bottom: 10px;
  padding: 0.2rem 0.55rem;
  border-radius: 999px;
  font-size: 0.78rem;
  color: #e2e8f0;
  background: rgba(15, 23, 42, 0.72);
  pointer-events: none;
}
.landing-heatmap-attr {
  margin: 0.45rem 0 0;
  font-size: 0.8rem;
  color: #94a3b8;
}
.landing-heatmap-lightbox[hidden] { display: none !important; }
.landing-heatmap-lightbox {
  position: fixed;
  inset: 0;
  z-index: 12000;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 1rem;
}
.landing-heatmap-lightbox-backdrop {
  position: absolute;
  inset: 0;
  border: 0;
  padding: 0;
  margin: 0;
  background: rgba(2, 6, 23, 0.82);
  cursor: zoom-out;
}
.landing-heatmap-lightbox-panel {
  position: relative;
  z-index: 1;
  max-width: min(96vw, 1400px);
  max-height: 92vh;
  background: #0b1220;
  border: 1px solid rgba(148, 163, 184, 0.35);
  border-radius: 14px;
  padding: 0.65rem 0.65rem 0.4rem;
  box-shadow: 0 20px 60px rgba(0,0,0,0.45);
  overflow: auto;
}
.landing-heatmap-lightbox-panel img {
  display: block;
  width: 100%;
  height: auto;
  max-height: 82vh;
  object-fit: contain;
  border-radius: 8px;
}
.landing-heatmap-lightbox-x {
  position: absolute;
  top: 0.35rem;
  right: 0.45rem;
  z-index: 2;
  width: 2rem;
  height: 2rem;
  border: 0;
  border-radius: 999px;
  background: rgba(15, 23, 42, 0.85);
  color: #f8fafc;
  font-size: 1.35rem;
  line-height: 1;
  cursor: pointer;
}
.landing-heatmap-lightbox-attr {
  margin: 0.4rem 0 0.15rem;
  text-align: center;
  font-size: 0.8rem;
  color: #94a3b8;
}
html.landing-heatmap-lock,
html.landing-heatmap-lock body {
  overflow: hidden;
}
@media (max-width: 720px) {
  .landing-heatmap-thumb {
    max-height: 260px;
  }
  .landing-heatmap-lightbox-panel {
    padding: 0.45rem;
  }
}


/* ---- Market breadth card (staging 2026-10-16) ---- */
.landing-theme-breadth {
  color: #7ec8e3;
  background: linear-gradient(135deg, rgba(126, 200, 227, 0.16), rgba(56, 189, 248, 0.10));
  border-color: rgba(126, 200, 227, 0.45);
  font-size: 1.24rem; /* base pill 0.95rem * 1.3 ≈ +30% */
}
.landing-breadth .landing-theme-breadth .landing-ico {
  width: 1.45rem;
  height: 1.45rem;
}
.landing-breadth .landing-theme-breadth .landing-ico svg {
  width: 20px;
  height: 20px;
}
.landing-breadth.landing-card {
  margin-top: 0.85rem;
}
.landing-breadth-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 0.85rem;
  margin-top: 0.35rem;
}
@media (max-width: 720px) {
  .landing-breadth-grid {
    grid-template-columns: 1fr;
  }
}
.landing-breadth-panel {
  background: rgba(11, 18, 32, 0.72);
  border: 1px solid rgba(148, 163, 184, 0.22);
  border-radius: 12px;
  padding: 0.75rem 0.85rem 0.9rem;
}
.landing-breadth-panel-head {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  justify-content: space-between;
  gap: 0.35rem 0.75rem;
  margin-bottom: 0.55rem;
}
.landing-breadth-market {
  font-weight: 700;
  font-size: 1.02rem;
  color: #e2e8f0;
}
.landing-breadth-src {
  font-size: 0.82rem;
}
.landing-breadth-metrics {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(4.6rem, 1fr));
  gap: 0.45rem 0.55rem;
}
.landing-breadth-metric {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 0.12rem;
  padding: 0.35rem 0.45rem;
  border-radius: 8px;
  background: rgba(15, 23, 42, 0.55);
  border: 1px solid rgba(148, 163, 184, 0.14);
}
.landing-breadth-num {
  font-size: 1.35rem;
  font-weight: 700;
  font-variant-numeric: tabular-nums;
  line-height: 1.15;
  color: #f1f5f9;
}
.landing-breadth-label {
  font-size: 0.78rem;
  color: #94a3b8;
  letter-spacing: 0.02em;
}
.landing-breadth-metric.is-up .landing-breadth-num { color: #4ade80; }
.landing-breadth-metric.is-down .landing-breadth-num { color: #f87171; }
.landing-breadth-metric.is-pct .landing-breadth-num { color: #7ec8e3; }
.landing-breadth-empty {
  margin: 0.4rem 0 0.2rem;
  font-size: 0.95rem;
}


/* Custom stock visibility + registry (2026-10-16 plan v1) */
.custom-vis-label { display: inline-flex; align-items: center; gap: 0.35rem; margin: 0 0.4rem; font-size: 0.95rem; color: #c8d6e5; }
.custom-vis-public { color: #7ec8e3; border-color: rgba(126,200,227,0.4); }
.custom-vis-private { color: #e0b3ff; border-color: rgba(224,179,255,0.4); }
.custom-status-pending { color: #9ecbff; border-color: rgba(158,203,255,0.35); }
.custom-status-fetching, .custom-status-computing { color: #f0c674; border-color: rgba(240,198,116,0.4); }
.custom-status-ready { color: #79d07a; border-color: rgba(121,208,122,0.35); }
.custom-status-error { color: #f07178; border-color: rgba(240,113,120,0.4); }
.custom-stock-registry { margin-top: 1.25rem; }


/* Search miss → Keith onboard (5y → C1–C4) */
.search-onboard-miss {
  margin-top: 0.35rem;
}
.search-onboard-box {
  margin-top: 0.75rem;
  padding: 0.85rem 1rem;
  border: 1px solid rgba(126, 200, 227, 0.35);
  border-radius: 10px;
  background: rgba(126, 200, 227, 0.06);
}
.search-onboard-lead {
  margin: 0 0 0.65rem;
  color: var(--muted, #9aa4b2);
  font-size: 0.92rem;
}
.search-onboard-btn {
  appearance: none;
  border: 1px solid rgba(240, 184, 91, 0.55);
  background: rgba(240, 184, 91, 0.18);
  color: var(--text, #e8eef7);
  font-weight: 700;
  font-size: 0.95rem;
  padding: 0.55rem 0.95rem;
  border-radius: 8px;
  cursor: pointer;
}
.search-onboard-btn:hover:not(:disabled) {
  background: rgba(240, 184, 91, 0.3);
}
.search-onboard-btn:disabled {
  opacity: 0.65;
  cursor: wait;
}
.search-onboard-status {
  display: inline-block;
  margin-left: 0.75rem;
  font-size: 0.9rem;
  vertical-align: middle;
}
.search-onboard-status.search-onboard-good { color: var(--good, #79d07a); }
.search-onboard-status.search-onboard-bad { color: var(--bad, #f07178); }
.search-onboard-links {
  margin: 0.55rem 0 0;
  font-size: 0.88rem;
}
.search-onboard-links a { margin-right: 0.35rem; }
.search-onboard-hint { margin-top: 0.5rem; font-size: 0.88rem; }

/* Force rebuild C1–C4 (Keith-only, no download) */
.search-onboard-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 0.5rem;
  align-items: center;
  margin: 0.35rem 0 0.25rem;
}
.search-force-btn {
  background: transparent !important;
  border: 1px solid #7ec8e3 !important;
  color: #7ec8e3 !important;
}
.search-force-btn:hover:not(:disabled) {
  background: rgba(126, 200, 227, 0.12) !important;
}
.search-force-bar {
  margin-top: 0.65rem;
}


/* ===== 2026-10-17 nav-responsive + landing title/grid fit ===== */
.landing-card-head {
  flex-wrap: wrap;
  align-items: center;
  gap: 0.5rem 0.75rem;
}
.landing-card-head h2 {
  min-width: 0;
  flex: 1 1 auto;
  max-width: 100%;
}
.landing-title-pill {
  max-width: 100%;
  flex-wrap: wrap;
  box-sizing: border-box;
}
.landing-head-meta,
.landing-more {
  white-space: normal;
  max-width: 100%;
  text-align: right;
}
.landing-grid {
  width: 100%;
  box-sizing: border-box;
}
@media (max-width: 720px) {
  .landing-card-head {
    flex-direction: column;
    align-items: center;
    text-align: center;
    justify-content: center;
  }
  .landing-card-head h2 {
    justify-content: center;
    width: 100%;
  }
  .landing-title-pill {
    justify-content: center;
  }
  .landing-head-meta,
  .landing-more {
    text-align: center;
    width: 100%;
  }
  .landing-today-grid {
    grid-template-columns: 1fr;
  }
}
/* ===== 2026-10-17 watchlist-ai mobile: 防長路徑／cron 撐爆 viewport ===== */
.watchlist-ai-reports-page {
  max-width: 100%;
  width: 100%;
  box-sizing: border-box;
  overflow-x: hidden;
  min-width: 0;
}
.watchlist-ai-reports-page details.card,
.watchlist-ai-reports-page .watchlist-ai-plan {
  display: block; /* override .card {display:grid} 以免 min-content 撐闊 */
  max-width: 100%;
  width: 100%;
  box-sizing: border-box;
  overflow-x: hidden;
  min-width: 0;
}
.watchlist-ai-reports-page details.card summary,
.watchlist-ai-plan summary {
  cursor: pointer;
  line-height: 1.4;
  overflow-wrap: anywhere;
  word-break: break-word;
}
.watchlist-ai-plan-hint {
  font-size: 0.85em;
  margin-left: 0.35rem;
  font-weight: 400;
}
.watchlist-ai-reports-page details.card ul,
.watchlist-ai-plan-list {
  padding-left: 1.2rem;
  margin: 0.6rem 0 0;
  max-width: 100%;
  box-sizing: border-box;
  overflow-wrap: anywhere;
  word-break: break-word;
}
.watchlist-ai-reports-page details.card li,
.watchlist-ai-plan-list li {
  margin: 0.35rem 0;
  overflow-wrap: anywhere;
  word-break: break-word;
  min-width: 0;
}
.watchlist-ai-reports-page code,
.watchlist-ai-plan code,
.watchlist-ai-reports-page .alerts-meta,
.watchlist-ai-reports-page .lead {
  max-width: 100%;
  overflow-wrap: anywhere;
  word-break: break-all;
  white-space: normal;
}
.watchlist-ai-reports-page h1 {
  font-size: clamp(1.15rem, 4.2vw, 1.65rem);
  line-height: 1.3;
  overflow-wrap: anywhere;
  word-break: break-word;
  max-width: 100%;
}
.watchlist-ai-list,
.watchlist-ai-card {
  max-width: 100%;
  min-width: 0;
  box-sizing: border-box;
  overflow-x: hidden;
}
.watchlist-ai-body {
  white-space: pre-wrap;
  overflow-wrap: anywhere;
  word-break: break-word;
  font-family: inherit;
  margin: 0.6rem 0 0;
  line-height: 1.55;
  max-width: 100%;
  box-sizing: border-box;
  overflow-x: hidden;
  background: transparent;
  border: none;
  padding: 0;
  max-height: none;
}
@media (max-width: 720px) {
  .watchlist-ai-reports-page {
    padding-left: 12px;
    padding-right: 12px;
  }
  .watchlist-ai-reports-page .alerts-meta {
    white-space: normal;
    line-height: 1.45;
    overflow-wrap: anywhere;
    word-break: break-word;
  }
  .watchlist-ai-card {
    padding: 0.7rem 0.75rem;
  }
}

/* 頁底免責：窄屏 wrap＋側邊 padding，唔跟長字串被裁 */
.site-footer {
  max-width: 100%;
  box-sizing: border-box;
  overflow-wrap: anywhere;
  word-break: break-word;
  padding-left: max(1rem, env(safe-area-inset-left, 0px));
  padding-right: max(1rem, env(safe-area-inset-right, 0px));
}
.site-footer p {
  max-width: 100%;
  overflow-wrap: anywhere;
  word-break: break-word;
}


/* —— 自選追蹤 /watch —— */
.watch-page { display: flex; flex-direction: column; gap: 14px; }
.watch-intro h1 { font-size: 1.35rem; margin: 0 0 8px; }
.watch-add { display: flex; flex-wrap: wrap; gap: 8px; align-items: center; margin-top: 10px; }
.watch-add input {
  flex: 1 1 180px; min-width: 140px; height: 38px; padding: 0 12px;
  border-radius: 10px; border: 1px solid var(--line); background: var(--bg-2); color: var(--ink);
}
.watch-add button {
  height: 38px; padding: 0 14px; border-radius: 10px; border: 1px solid rgba(139,156,247,0.45);
  background: rgba(139,156,247,0.18); color: #c5ceff; font-weight: 700; cursor: pointer;
}
.watch-add button:disabled { opacity: 0.55; cursor: not-allowed; }
.watch-run-btn { border-color: rgba(107,208,224,0.45) !important; background: rgba(107,208,224,0.16) !important; color: #9edbe6 !important; }
.watch-msg { color: #8fd890; margin: 8px 0 0; font-size: 0.92rem; }
.watch-err { color: #efa0bb; margin: 8px 0 0; font-size: 0.92rem; }
.watch-list { list-style: none; padding: 0; margin: 0; display: flex; flex-direction: column; gap: 8px; }
.watch-item {
  display: flex; align-items: center; justify-content: space-between; gap: 10px;
  padding: 10px 12px; border-radius: 12px; border: 1px solid var(--line); background: var(--bg-2);
}
.watch-item-main { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; }
.watch-added { font-size: 0.8rem; }
.watch-remove {
  height: 32px; padding: 0 10px; border-radius: 8px; border: 1px solid rgba(232,138,173,0.4);
  background: transparent; color: #efa0bb; cursor: pointer;
}
.watch-results { overflow-x: auto; }
.watch-table { width: 100%; border-collapse: collapse; font-size: 0.92rem; }
.watch-table th, .watch-table td {
  text-align: left; padding: 8px 10px; border-bottom: 1px solid var(--line); vertical-align: top;
}
.watch-table th { color: var(--ink-2); font-weight: 700; white-space: nowrap; }
.watch-name { font-size: 0.8rem; margin-top: 2px; }
.watch-history { list-style: none; padding: 0; margin: 0; display: flex; flex-direction: column; gap: 6px; }
.watch-history li { padding: 6px 0; border-bottom: 1px solid var(--line); font-size: 0.92rem; }