/* ==========================================================================
   My-TW-Coverage: Taiwan Equity Research & Valuation Theme
   UX-Deck Unified Design System (Pure White Studio Basis)
   Direct 1:1 match with showcase.html Section 1, 2, and 3
   ========================================================================== */

/* 1. Global CSS Variables Override (Strict White Studio Basis) */
:root {
  /* Fonts: Plus Jakarta Sans + Inter + JetBrains Mono */
  --base-font-family:         "Plus Jakarta Sans", "Inter", "Noto Sans TC", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif !important;
  --code-font-family:         "JetBrains Mono", ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, monospace !important;

  /* Primary Brand: Taiwan Pine Emerald & Research Amber */
  --theme-color:              #059669 !important; /* Taiwan Pine Emerald */
  --theme-color-rgb:          5, 150, 105 !important;
  --theme-color-dark:         #047857 !important;
  --accent-amber:             #d97706 !important; /* Research Amber */
  --badge-neutral:            #334155 !important; /* Slate Neutral for Industry Badges */

  /* Surfaces: Pure White Basis & Clean Slate */
  --base-background:          #ffffff !important;
  --content-background:       #ffffff !important;
  --sidebar-background:       #f8fafc !important; /* Slate 50 */
  --sidebar-border-color:     #e2e8f0 !important; /* Slate 200 */
  --sidebar-width:            290px !important;
  --content-max-width:        74em !important;

  /* Text & Contrast: High Contrast Slate 900 */
  --base-color:               #0f172a !important; /* Slate 900 */
  --text-color:               #0f172a !important;
  --text-muted:               #475569 !important; /* Slate 600 */
  --text-dim:                 #94a3b8 !important; /* Slate 400 */

  /* Search & Inputs */
  --search-input-background:  #ffffff !important;
  --search-input-placeholder-color: #94a3b8 !important;
  --search-result-keyword-background: #d1fae5 !important;

  /* Code & Tables */
  --code-inline-background:   #ecfdf5 !important;
  --code-inline-color:        #047857 !important;
  --blockquote-background:    #f8fafc !important;
  --blockquote-border-color:  #059669 !important;
  --table-row-odd-background: #ffffff !important;
  --table-row-even-background:#f8fafc !important;
  --table-border-color:       #e2e8f0 !important;

  /* TWSE Market Standard Colors */
  --tw-market-gain:           #dc2626 !important; /* TW Gain Red */
  --tw-market-loss:           #16a34a !important; /* TW Loss Green */
}

/* 2. Body Foundation: Pure White with showcase.html Ambient Gradients */
html, body {
  background-color: #ffffff !important;
  background-image: 
    radial-gradient(circle at 10% 8%, rgba(5, 150, 105, 0.04) 0%, transparent 35%),
    radial-gradient(circle at 90% 15%, rgba(217, 119, 6, 0.03) 0%, transparent 40%),
    radial-gradient(circle at 50% 95%, rgba(15, 23, 42, 0.02) 0%, transparent 45%) !important;
  background-attachment: fixed !important;
  color: #0f172a !important;
  font-family: var(--base-font-family) !important;
}

/* 3. Top Header Bar (Frosted Glass on White Studio) */
.app-nav {
  background-color: rgba(255, 255, 255, 0.94) !important;
  backdrop-filter: blur(12px) !important;
  -webkit-backdrop-filter: blur(12px) !important;
  border-bottom: 1px solid #e2e8f0 !important;
  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.03) !important;
  height: 56px !important;
  line-height: 56px !important;
  z-index: 100 !important;
  display: flex !important;
  align-items: center !important;
  justify-content: flex-end !important;
  padding: 0 24px !important;
}
.app-nav::before {
  display: none !important;
}

/* Hide redundant diagonal GitHub Corner ribbon (superseded by .app-nav pill button) */
.github-corner {
  display: none !important;
}

/* Brand Bar with Cute Flapping Owl Mascot 🦉 (Matching showcase.html exactly) */
.tw-nav-brand {
  position: fixed !important;
  left: 32px !important;
  top: 0 !important;
  height: 56px !important;
  display: flex !important;
  align-items: center !important;
  gap: 12px !important;
  text-decoration: none !important;
  color: #0f172a !important;
  font-weight: 800 !important;
  font-size: 1.15rem !important;
  letter-spacing: -0.015em !important;
  font-family: "Plus Jakarta Sans", var(--base-font-family) !important;
  z-index: 105 !important;
}
.tw-nav-brand .brand-icon-box {
  width: 36px;
  height: 36px;
  border-radius: 11px;
  background: #ecfdf5;
  border: 1px solid #a7f3d0;
  display: flex;
  align-items: center;
  justify-content: center;
  color: #059669;
  box-shadow: 0 2px 6px rgba(5, 150, 105, 0.12);
  transition: transform 0.25s cubic-bezier(0.2, 0, 0, 1);
}
.tw-nav-brand:hover .brand-icon-box {
  transform: translateY(-2px) scale(1.08);
}
.tw-nav-brand .brand-tag {
  font-size: 0.72rem;
  font-weight: 700;
  background: #ecfdf5;
  color: #059669;
  border: 1px solid #a7f3d0;
  padding: 3px 10px;
  border-radius: 9999px;
  font-family: var(--code-font-family);
}

.app-nav ul {
  display: flex !important;
  align-items: center !important;
  gap: 10px !important;
  margin: 0 !important;
  padding: 0 !important;
  list-style: none !important;
}
.app-nav li {
  display: inline-flex !important;
  align-items: center !important;
  margin: 0 !important;
  padding: 0 !important;
}

/* Tactile Pill Buttons for Navbar Navigation (🏠 主題首頁, 📦 GitHub 儲存庫) */
.app-nav a {
  display: inline-flex !important;
  align-items: center !important;
  gap: 6px !important;
  height: 34px !important;
  line-height: 34px !important;
  padding: 0 14px !important;
  border-radius: 9999px !important;
  background: #f8fafc !important;
  border: 1px solid #e2e8f0 !important;
  color: #334155 !important;
  font-weight: 600 !important;
  font-size: 0.84rem !important;
  text-decoration: none !important;
  font-family: "Plus Jakarta Sans", var(--base-font-family) !important;
  box-shadow: 0 1px 2px rgba(15, 23, 42, 0.04) !important;
  transition: all 0.22s cubic-bezier(0.2, 0, 0, 1) !important;
}
.app-nav a:hover {
  background: #ecfdf5 !important;
  color: #059669 !important;
  border-color: #a7f3d0 !important;
  transform: translateY(-1px) !important;
  box-shadow: 0 4px 10px rgba(5, 150, 105, 0.12) !important;
}
.app-nav li.active a {
  background: #ecfdf5 !important;
  color: #059669 !important;
  border-color: #059669 !important;
  font-weight: 700 !important;
}

/* Shields.io Badges Enhancement: consistent rounded pill style matching showcase.html */
img[src*="shields.io"] {
  border-radius: 6px !important;
  box-shadow: 0 1px 3px rgba(15, 23, 42, 0.08) !important;
  vertical-align: middle !important;
  transition: transform 0.2s ease, box-shadow 0.2s ease !important;
}
a:has(> img[src*="shields.io"]):hover img,
a > img[src*="shields.io"]:hover {
  transform: translateY(-1.5px) scale(1.03) !important;
  box-shadow: 0 3px 8px rgba(5, 150, 105, 0.18) !important;
}

/* 4. Sidebar: Studio Slate 50 Foundation */
.sidebar {
  top: 56px !important;
  height: calc(100vh - 56px) !important;
  background-color: #f8fafc !important;
  border-right: 1px solid #e2e8f0 !important;
  box-shadow: 1px 0 3px rgba(0, 0, 0, 0.02) !important;
}
.sidebar .app-name {
  display: none !important;
}
.sidebar nav li a {
  color: #475569 !important;
  font-weight: 500 !important;
  border-radius: 8px !important;
  margin: 3px 12px !important;
  padding: 8px 14px !important;
  transition: all 0.2s ease !important;
  font-size: 0.92rem !important;
}
.sidebar nav li a:hover {
  background: #f1f5f9 !important;
  color: #059669 !important;
  transform: translateX(3px) !important;
}
.sidebar nav li.active > a {
  background: #ecfdf5 !important;
  color: #059669 !important;
  font-weight: 700 !important;
  border-left: 3px solid #059669 !important;
}

/* 5. Header Search Box (Clean White Input) */
.search {
  position: fixed !important;
  right: 315px !important;
  top: 12px !important;
  z-index: 105 !important;
  width: 210px !important;
  margin: 0 !important;
  padding: 0 !important;
}
.search input {
  background-color: #ffffff !important;
  border: 1px solid #cbd5e1 !important;
  border-radius: 8px !important;
  color: #0f172a !important;
  font-size: 0.85rem !important;
  height: 32px !important;
  padding: 6px 12px 6px 30px !important;
  box-shadow: 0 1px 2px rgba(0, 0, 0, 0.04) !important;
  transition: all 0.2s ease !important;
}
.search input:focus {
  border-color: #059669 !important;
  box-shadow: 0 0 0 3px rgba(5, 150, 105, 0.15) !important;
  outline: none !important;
}
.search .results-panel {
  background: #ffffff !important;
  border: 1px solid #e2e8f0 !important;
  border-radius: 12px !important;
  box-shadow: 0 10px 25px -5px rgba(0, 0, 0, 0.1) !important;
}

/* 6. Content Area: Pure White Canvas with High-Contrast Typography */
.content {
  padding-top: 56px !important;
  background: #ffffff !important;
}
.markdown-section {
  padding: 40px 32px !important;
  background: #ffffff !important; /* Overwrite yellow paper */
  max-width: 900px !important;
  margin: 30px auto !important;
}

.markdown-section h1 {
  font-size: 2.2rem !important;
  font-weight: 800 !important;
  color: #0f172a !important;
  letter-spacing: -0.025em !important;
  border-bottom: 1px solid #e2e8f0 !important;
  padding-bottom: 16px !important;
  margin-bottom: 1.5rem !important;
  font-family: "Plus Jakarta Sans", var(--base-font-family) !important;
}
.markdown-section h2 {
  font-size: 1.5rem !important;
  font-weight: 700 !important;
  color: #0f172a !important;
  letter-spacing: -0.015em !important;
  border-bottom: 1px solid #f1f5f9 !important;
  padding-bottom: 8px !important;
  margin-top: 2.2rem !important;
  font-family: "Plus Jakarta Sans", var(--base-font-family) !important;
}
.markdown-section h3 {
  font-size: 1.25rem !important;
  font-weight: 700 !important;
  color: #1e293b !important;
  margin-top: 1.75rem !important;
}

.markdown-section p,
.markdown-section li {
  color: #334155 !important; /* Slate 700 */
  line-height: 1.7 !important;
  font-size: 0.98rem !important;
}

/* Links & Accents: Taiwan Pine Emerald */
.markdown-section a {
  color: #059669 !important;
  text-decoration: none !important;
  font-weight: 600 !important;
  transition: color 0.2s ease !important;
}
.markdown-section a:hover {
  color: #047857 !important;
  text-decoration: underline !important;
}

/* 7. Tables (Financial Monospace Numbers) */
.markdown-section table {
  border-collapse: separate !important;
  border-spacing: 0 !important;
  width: 100% !important;
  margin: 1.8rem 0 !important;
  border-radius: 12px !important;
  border: 1px solid #e2e8f0 !important;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.03) !important;
  overflow: hidden !important;
}
.markdown-section th {
  background: #f8fafc !important;
  color: #475569 !important;
  font-weight: 700 !important;
  font-size: 0.82rem !important;
  text-transform: uppercase !important;
  letter-spacing: 0.04em !important;
  padding: 12px 16px !important;
  border-bottom: 1px solid #e2e8f0 !important;
}
.markdown-section td {
  padding: 12px 16px !important;
  border-top: 1px solid #f1f5f9 !important;
  color: #334155 !important;
  font-variant-numeric: tabular-nums !important;
}
.markdown-section tr:hover td {
  background: #f8fafc !important;
}

/* 8. Code & JetBrains Mono Tabular Numerals */
.markdown-section code,
.markdown-section pre code {
  font-family: var(--code-font-family) !important;
  font-variant-numeric: tabular-nums !important;
}
.markdown-section code {
  background: #ecfdf5 !important;
  color: #047857 !important;
  border-radius: 4px !important;
  padding: 2px 6px !important;
  font-size: 0.88em !important;
}
.markdown-section pre {
  background: #0f172a !important; /* Crisp Obsidian Dark */
  border-radius: 12px !important;
  border: 1px solid #1e293b !important;
  box-shadow: 0 4px 14px rgba(0, 0, 0, 0.08) !important;
  padding: 18px !important;
}
.markdown-section pre code {
  background: transparent !important;
  color: #f8fafc !important;
}

/* Blockquotes */
.markdown-section blockquote {
  background: #f8fafc !important;
  border-left: 4px solid #059669 !important;
  border-radius: 0 10px 10px 0 !important;
  color: #475569 !important;
  padding: 14px 20px !important;
  margin: 1.5rem 0 !important;
}

/* 9. UX-Deck Mascot Icon Helper (.ux-icon) */
.ux-icon {
  display: inline-block;
  width: 24px;
  height: 24px;
  stroke-width: 1.6;
  stroke: currentColor;
  fill: none;
  stroke-linecap: round;
  stroke-linejoin="round";
  vertical-align: middle;
}
.ux-icon-owl {
  color: #059669;
  transition: transform 0.25s cubic-bezier(0.2, 0, 0, 1);
}
.ux-icon-owl:hover {
  transform: translateY(-2px) scale(1.12);
}

/* 10. Live Stock Coverage Radar Card (showcase.html Section 3) */
.tw-coverage-card {
  background: #ffffff !important;
  border: 1px solid #e2e8f0 !important;
  border-radius: 18px !important;
  padding: 1.75rem 2rem !important;
  margin: 1.75rem 0 2.25rem !important;
  box-shadow: 0 4px 16px -2px rgba(15, 23, 42, 0.05) !important;
  font-family: var(--base-font-family) !important;
  transition: all 0.25s ease !important;
}
.tw-coverage-card:hover {
  box-shadow: 0 8px 24px -4px rgba(5, 150, 105, 0.1) !important;
  border-color: #cbd5e1 !important;
}

.tw-coverage-header {
  display: flex !important;
  justify-content: space-between !important;
  align-items: flex-start !important;
  flex-wrap: wrap !important;
  gap: 1rem !important;
  padding-bottom: 1rem !important;
  border-bottom: 1px solid #f1f5f9 !important;
  margin-bottom: 1.25rem !important;
}

.tw-rating-pill {
  font-family: var(--code-font-family) !important;
  font-size: 0.75rem !important;
  font-weight: 700 !important;
  padding: 3px 12px !important;
  border-radius: 9999px !important;
  display: inline-flex !important;
  align-items: center !important;
  gap: 4px !important;
  letter-spacing: 0.03em !important;
}
.tw-rating-buy {
  background: #ecfdf5 !important;
  color: #059669 !important;
  border: 1px solid #a7f3d0 !important;
}
.tw-rating-outperform {
  background: #fef2f2 !important;
  color: #dc2626 !important;
  border: 1px solid #fecaca !important;
}
.tw-rating-hold {
  background: #f8fafc !important;
  color: #64748b !important;
  border: 1px solid #cbd5e1 !important;
}
.tw-rating-reduce {
  background: #f0fdf4 !important;
  color: #16a34a !important;
  border: 1px solid #bbf7d0 !important;
}

.tw-price-current {
  font-family: var(--code-font-family) !important;
  font-size: 1.65rem !important;
  font-weight: 800 !important;
  color: #dc2626 !important;
  font-variant-numeric: tabular-nums !important;
}
.tw-price-target {
  font-size: 0.95rem !important;
  color: #64748b !important;
  font-weight: 600 !important;
}

.tw-thesis-box {
  background: #f8fafc !important;
  border-left: 3px solid #059669 !important;
  border-radius: 0 10px 10px 0 !important;
  padding: 0.9rem 1.15rem !important;
  font-size: 0.92rem !important;
  line-height: 1.65 !important;
  color: #0f172a !important;
  margin-bottom: 1.25rem !important;
}

.tw-kpi-grid {
  display: grid !important;
  grid-template-columns: repeat(auto-fit, minmax(130px, 1fr)) !important;
  gap: 0.85rem !important;
}
.tw-kpi-tile {
  background: #f8fafc !important;
  border: 1px solid #e2e8f0 !important;
  border-radius: 12px !important;
  padding: 0.85rem 0.75rem !important;
  text-align: center !important;
}
.tw-kpi-label {
  font-size: 0.72rem !important;
  color: #64748b !important;
  text-transform: uppercase !important;
  font-weight: 600 !important;
  letter-spacing: 0.03em !important;
  margin-bottom: 4px !important;
}
.tw-kpi-val {
  font-family: var(--code-font-family) !important;
  font-size: 1.25rem !important;
  font-weight: 800 !important;
  color: #0f172a !important;
  font-variant-numeric: tabular-nums !important;
}
.tw-kpi-val.gain { color: #dc2626 !important; }
.tw-kpi-val.emerald { color: #059669 !important; }