/* JANG Modern Pass — benchmark/spec-sheet aesthetic. */
:root {
  --modern-bg: #050505 !important;
  --modern-panel: #0d0e10 !important;
  --modern-panel-2: #121417 !important;
  --modern-text: rgba(248, 250, 252, 0.96) !important;
  --modern-muted: rgba(218, 226, 239, 0.66) !important;
  --modern-faint: rgba(218, 226, 239, 0.42) !important;
  --modern-line: rgba(230, 236, 255, 0.14) !important;
  --modern-line-strong: rgba(230, 236, 255, 0.28) !important;
  --modern-accent: #ffbf3f !important;
  --modern-accent-2: #9da9ff !important;
}

* { box-shadow: none !important; }
html { background: var(--modern-bg) !important; text-rendering: geometricPrecision; }
body {
  background:
    linear-gradient(rgba(255,255,255,0.032) 1px, transparent 1px),
    linear-gradient(90deg, rgba(255,255,255,0.032) 1px, transparent 1px),
    radial-gradient(circle at 82% 8%, color-mix(in srgb, var(--modern-accent) 9%, transparent), transparent 34rem),
    var(--modern-bg) !important;
  background-size: 44px 44px, 44px 44px, auto, auto !important;
  color: var(--modern-text) !important;
  font-family: ui-sans-serif, -apple-system, BlinkMacSystemFont, "SF Pro Display", "Segoe UI", sans-serif !important;
  letter-spacing: -0.018em;
}
body::before {
  content: "";
  position: fixed;
  inset: 0;
  z-index: -1;
  pointer-events: none;
  background: linear-gradient(90deg, transparent, color-mix(in srgb, var(--modern-accent) 5%, transparent), transparent);
}
a, button, [role="button"], .btn, .button, .cta, .nav-download, .nav-links a, .logo, .lang-btn, summary {
  position: relative !important;
  z-index: 30 !important;
  pointer-events: auto !important;
}
nav, header, .nav, .navbar, .site-header {
  position: relative !important;
  z-index: 1000 !important;
  border-bottom: 1px solid var(--modern-line) !important;
  background: rgba(5, 5, 6, 0.92) !important;
  backdrop-filter: blur(14px) !important;
}
[class*="glow"], [class*="orb"], [class*="grid"]::before, [class*="grid"]::after,
.hero::before, .hero::after, .btn::before, .btn::after, .button::before, .button::after,
.card::before, .card::after, .bento-card::before, .bento-card::after, .feature-card::before, .feature-card::after,
.cta::before, .cta::after, canvas[aria-hidden="true"] {
  pointer-events: none !important;
}
main > section, .hero, .section, .container, .wrap, .hero-inner, .section-inner {
  position: relative;
  z-index: 2;
}
.hero, section { border-top: 1px solid rgba(230,236,255,0.08); }
.badge, .pill, .hero-pill, .hero-tag, .section-eyebrow, .section-label, .eyebrow, .tag, .chip,
[class*="badge"], [class*="pill"] {
  border: 1px solid var(--modern-line) !important;
  border-radius: 2px !important;
  background: rgba(8, 9, 11, 0.86) !important;
  color: var(--modern-accent) !important;
  font-family: "SF Mono", "Cascadia Code", "JetBrains Mono", ui-monospace, monospace !important;
  font-size: 0.72rem !important;
  font-weight: 720 !important;
  letter-spacing: 0.14em !important;
  text-transform: uppercase !important;
}
h1, .hero h1, .section-heading, .section-title, .cta-title, .title {
  color: var(--modern-text) !important;
  font-weight: 790 !important;
  letter-spacing: -0.08em !important;
  text-shadow: none !important;
}
h1 span, .grad, .gradient, .accent, .gr {
  background: none !important;
  color: inherit !important;
  -webkit-text-fill-color: currentColor !important;
  -webkit-background-clip: initial !important;
  background-clip: initial !important;
}
p, .hero-sub, .hero p, .section-desc, .cta-sub, .feature-desc, .card p, li { color: var(--modern-muted) !important; }
.card, .panel, .glass, .feature-card, .bento-card, .stat-card, .metric-card, .test-card, .compare-card,
.model-card, .api-card, .tool-card, .faq-item, .app-frame, .screenshot-card, .terminal, .term, .code-block,
[class*="card"], [class*="panel"] {
  border: 1px solid var(--modern-line) !important;
  border-radius: 2px !important;
  background: rgba(10, 11, 13, 0.88) !important;
  backdrop-filter: none !important;
}
.card:hover, .feature-card:hover, .bento-card:hover, .model-card:hover, .api-card:hover, .tool-card:hover,
[class*="card"]:hover {
  border-color: var(--modern-line-strong) !important;
  background: #111319 !important;
  transform: none !important;
}
.btn, .button, button, .btn-primary, .btn-secondary, .btn-ghost, .download-btn, .cta-button, a[class*="btn"] {
  min-height: 46px;
  border: 1px solid var(--modern-line-strong) !important;
  border-radius: 2px !important;
  background: transparent !important;
  color: var(--modern-text) !important;
  font-weight: 760 !important;
  text-decoration: none !important;
  transition: border-color .16s ease, background .16s ease, color .16s ease !important;
}
.btn-primary, .button.primary, .download-btn.primary, .cta-button.primary, a[href*="download"][class*="btn"] {
  border-color: var(--modern-accent) !important;
  background: var(--modern-text) !important;
  color: #050506 !important;
}
.btn:hover, .button:hover, button:hover, a[class*="btn"]:hover {
  border-color: var(--modern-accent) !important;
  filter: none !important;
  transform: none !important;
}
code, pre, .mono, .code, .terminal, .term-body, .api-path {
  border-radius: 2px !important;
  background: #060708 !important;
  color: rgba(248,250,252,.9) !important;
  font-family: "SF Mono", "Cascadia Code", "JetBrains Mono", ui-monospace, monospace !important;
}
table { border-collapse: collapse !important; background: rgba(8,9,11,.86) !important; }
th, td, table { border-color: var(--modern-line) !important; }
th { background: #101114 !important; color: var(--modern-text) !important; }
img, video, canvas, .screenshot, .app-preview, .hero-visual { border-radius: 4px !important; }
footer { border-top: 1px solid var(--modern-line) !important; background: var(--modern-bg) !important; }

/* Live Hugging Face recent-model grids */
.hf-model-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
  gap: 1px;
  max-width: 980px;
  margin: 0 auto 2rem;
  border: 1px solid var(--modern-line, var(--border));
  background: var(--modern-line, var(--border));
  text-align: left;
}
.hf-model-card, .hf-model-loading {
  display: grid;
  gap: 0.75rem;
  min-height: 172px;
  padding: 1rem 1.1rem;
  background: rgba(10, 11, 13, 0.94);
  color: var(--modern-text, var(--text));
  text-decoration: none;
}
.hf-model-card:hover { background: #121419; }
.hf-model-card-top, .hf-model-card-meta {
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
  gap: 0.5rem;
  color: var(--modern-faint, var(--text-tertiary));
  font-family: "SF Mono", "Cascadia Code", "JetBrains Mono", ui-monospace, monospace;
  font-size: 0.66rem;
  letter-spacing: 0.04em;
  text-transform: uppercase;
}
.hf-model-card h3 {
  margin: 0;
  color: var(--modern-text, var(--text));
  font-size: 0.98rem;
  line-height: 1.25;
  word-break: break-word;
}
.hf-model-tags { display: flex; flex-wrap: wrap; gap: 0.35rem; }
.hf-model-tags span {
  border: 1px solid var(--modern-line, var(--border));
  padding: 0.18rem 0.4rem;
  color: var(--modern-muted, var(--text-secondary));
  font-family: "SF Mono", "Cascadia Code", "JetBrains Mono", ui-monospace, monospace;
  font-size: 0.62rem;
}
.hf-model-card-meta strong { color: var(--modern-accent, var(--blue-bright)); font-weight: 750; }
.hf-model-loading { grid-column: 1 / -1; min-height: 120px; align-content: center; text-align: center; color: var(--modern-muted, var(--text-secondary)); }

/* Final QA guards: keep decorative layers and wide data tables from creating mobile side-scroll. */
html, body {
  max-width: 100% !important;
  overflow-x: hidden !important;
}

@media (max-width: 820px) {
  table {
    display: block !important;
    width: 100% !important;
    max-width: 100% !important;
    overflow-x: auto !important;
    -webkit-overflow-scrolling: touch;
  }

  .profile-table-wrap {
    max-width: 100% !important;
    overflow-x: auto !important;
    -webkit-overflow-scrolling: touch;
  }

  .profile-table {
    display: table !important;
    min-width: 0 !important;
    width: 100% !important;
    table-layout: fixed !important;
  }

  .profile-table th,
  .profile-table td {
    padding: 0.52rem 0.38rem !important;
    font-size: clamp(0.56rem, 2.45vw, 0.72rem) !important;
    overflow-wrap: anywhere;
  }

  .orb,
  [class*="orb"],
  [class*="glow"],
  .cursor-glow,
  #cursorGlow,
  .hero::before,
  .hero::after,
  section::before,
  section::after {
    display: none !important;
  }

  h1, h2, h3, p, li, .eyebrow, .section-eyebrow, .badge, .pill {
    overflow-wrap: anywhere;
  }
}