/* MetalSemi Asia - Quantum Trading Floor Theme
   Dual-Track: Precious Metals (Gold) + Semiconductor (Chip) */

a, button, .group img { transition-property: color, background-color, border-color, text-decoration-color, fill, stroke, opacity, box-shadow, transform; transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1); }
a, button { transition-duration: 150ms; }
.group img { transition-duration: 500ms; }

.line-clamp-1 { display: -webkit-box; -webkit-line-clamp: 1; -webkit-box-orient: vertical; overflow: hidden; }
.line-clamp-2 { display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
.line-clamp-3 { display: -webkit-box; -webkit-line-clamp: 3; -webkit-box-orient: vertical; overflow: hidden; }

/* ======== Custom Scrollbar ======== */
::-webkit-scrollbar { width: 8px; height: 8px; }
::-webkit-scrollbar-track { background: #0A1628; }
::-webkit-scrollbar-thumb { background: #1F3454; border-radius: 4px; }
::-webkit-scrollbar-thumb:hover { background: #324B6E; }

/* ======== Focus & Selection ======== */
a:focus-visible, button:focus-visible, input:focus-visible { outline: 2px solid #D4A857; outline-offset: 2px; }
::selection { background: rgba(212, 168, 87, 0.3); color: #FAEEC9; }

@media print { header, footer, aside, #mobile-menu { display: none !important; } main { padding: 0 !important; } .article-content { max-width: 100% !important; } body { background: white !important; color: black !important; } }

/* ======== Pagination ======== */
.pagination { display: flex; gap: 0.375rem; justify-content: center; align-items: center; flex-wrap: wrap; }
.pagination a, .pagination span {
  min-width: 2.25rem; height: 2.25rem; display: inline-flex; align-items: center; justify-content: center;
  padding: 0 0.75rem; border-radius: 0.375rem; font-size: 0.8125rem; font-weight: 500;
  background: rgba(15, 27, 45, 0.5); color: #A9B7C9; text-decoration: none; border: 1px solid rgba(31, 52, 84, 0.6);
  font-family: 'JetBrains Mono', monospace;
}
.pagination a:hover { background: rgba(212, 168, 87, 0.1); color: #F4D982; border-color: rgba(212, 168, 87, 0.3); }
.pagination .active { background: linear-gradient(135deg, #D4A857, #B58A2E); color: #0A1628; border-color: transparent; }
.pagination .disabled { opacity: 0.35; pointer-events: none; }

/* ======== Article Content ======== */
.article-content {
  font-family: 'IBM Plex Sans', 'Noto Sans SC', system-ui, sans-serif;
  color: #D5DEE9;
  line-height: 1.85;
}
.article-content h2 {
  font-size: 1.5rem; font-weight: 700;
  margin-top: 2.5rem; margin-bottom: 1rem;
  color: #F8FAFC;
  border-left: 4px solid #D4A857;
  padding-left: 1rem;
  font-family: 'Playfair Display', 'Noto Serif SC', Georgia, serif;
}
.article-content h3 {
  font-size: 1.2rem; font-weight: 600;
  margin-top: 2rem; margin-bottom: 0.75rem;
  color: #EEF2F7;
  display: flex; align-items: center; gap: 0.5rem;
}
.article-content h3::before {
  content: ''; display: inline-block;
  width: 6px; height: 6px;
  background: #06B6D4;
  border-radius: 1px;
}
.article-content p {
  margin-bottom: 1.25rem;
  color: #C5D0DE;
  font-size: 1.0625rem;
}
.article-content ul, .article-content ol {
  margin-bottom: 1.25rem; padding-left: 1.75rem;
  color: #C5D0DE;
}
.article-content li { margin-bottom: 0.5rem; line-height: 1.75; }
.article-content li::marker { color: #D4A857; }
.article-content a {
  color: #F4D982; text-decoration: underline;
  text-underline-offset: 3px; text-decoration-color: rgba(212, 168, 87, 0.4);
}
.article-content a:hover { color: #EEC554; text-decoration-color: #EEC554; }
.article-content img {
  max-width: 100%; border-radius: 0.5rem;
  margin: 1.5rem 0;
  border: 1px solid rgba(31, 52, 84, 0.8);
  box-shadow: 0 4px 16px rgba(0, 0, 0, 0.4);
}
.article-content blockquote {
  border-left: 3px solid #06B6D4;
  padding: 1.25rem 1.5rem;
  background: linear-gradient(135deg, rgba(6, 182, 212, 0.08), rgba(8, 145, 178, 0.05));
  border-radius: 0 0.5rem 0.5rem 0;
  margin: 1.5rem 0;
  font-style: italic;
  color: #A5F3FC;
  border: 1px solid rgba(6, 182, 212, 0.2);
  border-left-width: 3px;
}
.article-content table {
  width: 100%; border-collapse: collapse;
  margin: 1.5rem 0; font-size: 0.95rem;
  background: rgba(15, 27, 45, 0.4);
  border-radius: 0.5rem; overflow: hidden;
}
.article-content th, .article-content td {
  border: 1px solid rgba(31, 52, 84, 0.6);
  padding: 0.75rem 1rem; text-align: left;
}
.article-content th {
  background: linear-gradient(135deg, rgba(212, 168, 87, 0.15), rgba(181, 138, 46, 0.1));
  font-weight: 600; color: #F4D982;
  font-family: 'JetBrains Mono', monospace;
  font-size: 0.85rem;
  text-transform: uppercase;
  letter-spacing: 0.05em;
}
.article-content code {
  background: rgba(6, 182, 212, 0.1);
  padding: 0.15rem 0.4rem;
  border-radius: 0.25rem;
  font-family: 'JetBrains Mono', monospace;
  font-size: 0.9em;
  color: #67E8F9;
  border: 1px solid rgba(6, 182, 212, 0.2);
}
.article-content pre {
  background: #050A14;
  color: #A9B7C9;
  padding: 1.25rem;
  border-radius: 0.5rem;
  overflow-x: auto;
  margin: 1.5rem 0;
  border: 1px solid rgba(31, 52, 84, 0.8);
  position: relative;
}
.article-content pre::before {
  content: 'CODE';
  position: absolute;
  top: 0.5rem; right: 0.75rem;
  font-size: 0.625rem;
  color: #4A6489;
  font-family: 'JetBrains Mono', monospace;
  letter-spacing: 0.2em;
}
.article-content pre code {
  background: none; padding: 0; color: inherit;
  border: none;
}

/* ======== Tag Pills from get_tags_by_ids ======== */
.article-tags {
  display: flex; flex-wrap: wrap; gap: 0.5rem;
  margin-top: 2rem; padding-top: 1.5rem;
  border-top: 1px solid rgba(31, 52, 84, 0.6);
}
.article-tags a {
  display: inline-flex; align-items: center; gap: 0.375rem;
  padding: 0.375rem 0.75rem;
  background: rgba(15, 27, 45, 0.6);
  border: 1px solid rgba(31, 52, 84, 0.6);
  border-radius: 0.375rem;
  font-size: 0.75rem;
  color: #A9B7C9;
  text-decoration: none;
  font-family: 'JetBrains Mono', monospace;
  transition: all 0.15s ease;
}
.article-tags a::before {
  content: '#';
  color: #D4A857;
  font-weight: bold;
}
.article-tags a:hover {
  background: rgba(212, 168, 87, 0.15);
  border-color: rgba(212, 168, 87, 0.4);
  color: #F4D982;
}

/* ======== Data Ticker Animation ======== */
.animate-ticker { animation: ticker 60s linear infinite; }
.animate-pause:hover { animation-play-state: paused; }

/* ======== Utility: Backdrop Blur Strength ======== */
.backdrop-blur-xl { backdrop-filter: blur(20px) saturate(180%); -webkit-backdrop-filter: blur(20px) saturate(180%); }

/* ======== Mobile Menu Fixes ======== */
@media (max-width: 1024px) {
  #mobile-menu { animation: slideDown 0.2s ease-out; }
}
@keyframes slideDown {
  from { opacity: 0; transform: translateY(-8px); }
  to { opacity: 1; transform: translateY(0); }
}