/* =====================================================================
   P34HB SCREENER — Design-system override layer
   Loaded AFTER the inline <style> block. All rules here use !important
   on the visual properties (borders, backgrounds, gradients, shadows,
   fonts) so they beat the legacy inline CSS regardless of specificity.

   Token source: ../../tokens.css
   Policy: paper surfaces, forest accent, hairline rules, italics for
   emphasis, JetBrains Mono for all numbers.
   ===================================================================== */

/* ─────────────────────────────────────────────────────────────────────
   1. SECTION HEADINGS inside tabs (h2, h3)
   ───────────────────────────────────────────────────────────────────── */
.section h2,
.section h3 {
  font-family: var(--serif-display) !important;
  font-variation-settings: "opsz" 48, "wght" 420, "SOFT" 30 !important;
  font-weight: 420 !important;
  color: var(--ink) !important;
  letter-spacing: -0.015em !important;
  line-height: 1.15 !important;
  background: none !important;
  -webkit-text-fill-color: currentColor !important;
  -webkit-background-clip: unset !important;
  background-clip: unset !important;
  text-shadow: none !important;
}
.section h2 { font-size: clamp(22px, 2.6vw, 30px) !important; margin-bottom: 10px !important; }
.section h3 { font-size: clamp(18px, 2.2vw, 22px) !important; margin-bottom: 8px !important; }
html[lang="ko"] .section h2,
html[lang="ko"] .section h3 {
  font-family: var(--korean) !important;
  font-weight: 500 !important;
  letter-spacing: -0.02em !important;
}

/* Section intro paragraph — Newsreader body */
.section > p,
.section .box > p {
  font-family: var(--serif-body) !important;
  color: var(--ink-soft) !important;
  line-height: 1.65 !important;
  max-width: 75ch !important;
}
html[lang="ko"] .section > p,
html[lang="ko"] .section .box > p {
  font-family: var(--korean) !important;
}

/* ─────────────────────────────────────────────────────────────────────
   2. CONTROLS PANEL (sticky side panel with sliders)
   ───────────────────────────────────────────────────────────────────── */
.controls {
  background: var(--paper-2) !important;
  background-image: none !important;
  border: 0.5px solid var(--rule-strong) !important;
  border-radius: 4px !important;
  box-shadow: none !important;
  padding: 20px 22px !important;
}
#section-model .controls,
#section-morph .controls,
#section-comp .controls {
  top: 60px !important;
}

.row {
  margin: 14px 0 !important;
}
.row label,
.row > span:first-child {
  font-family: var(--serif-body) !important;
  font-size: 14px !important;
  color: var(--ink) !important;
  font-weight: 500 !important;
}
html[lang="ko"] .row label,
html[lang="ko"] .row > span:first-child { font-family: var(--korean) !important; }

/* ─────────────────────────────────────────────────────────────────────
   3. SLIDERS — flat hairline track, forest-green thumb
   ───────────────────────────────────────────────────────────────────── */
.slider {
  height: 2px !important;
  border: 0 !important;
  border-radius: 0 !important;
  background-color: #B8AF99 !important;
  background-image: none !important;
  box-shadow: none !important;
}
.slider::-webkit-slider-thumb {
  width: 18px !important;
  height: 18px !important;
  border-radius: 50% !important;
  background-color: #2C5D3F !important;
  background-image: none !important;
  border: 2px solid #F5F1E8 !important;
  box-shadow: 0 0 0 1px #2C5D3F !important;
  cursor: pointer !important;
}
.slider::-moz-range-thumb {
  width: 18px !important;
  height: 18px !important;
  border-radius: 50% !important;
  background-color: #2C5D3F !important;
  background-image: none !important;
  border: 2px solid #F5F1E8 !important;
  box-shadow: 0 0 0 1px #2C5D3F !important;
  cursor: pointer !important;
}
.slider::-moz-range-track {
  height: 2px !important;
  border: 0 !important;
  border-radius: 0 !important;
  background-color: #B8AF99 !important;
  background-image: none !important;
}

/* ─────────────────────────────────────────────────────────────────────
   4. CHIPS — mono value readouts (e.g. "35.2 mol%")
   ───────────────────────────────────────────────────────────────────── */
.chip {
  min-width: 120px !important;
  background: var(--paper) !important;
  background-image: none !important;
  color: var(--ink) !important;
  border: 0.5px solid var(--rule-strong) !important;
  border-radius: 2px !important;
  padding: 6px 12px !important;
  font-family: var(--mono) !important;
  font-size: 12px !important;
  font-weight: 500 !important;
  letter-spacing: 0.02em !important;
  font-variant-numeric: tabular-nums !important;
  box-shadow: none !important;
  text-align: right !important;
}

/* ─────────────────────────────────────────────────────────────────────
   5. CARDS — property readouts (Tg, Tm, E, σ, etc.)
   ───────────────────────────────────────────────────────────────────── */
.card {
  background: var(--paper) !important;
  background-image: none !important;
  border: 0.5px solid var(--rule) !important;
  border-radius: 2px !important;
  box-shadow: none !important;
  padding: 16px !important;
  transition: border-color 160ms ease !important;
}
.card:hover {
  transform: none !important;
  border-color: var(--rule-strong) !important;
  box-shadow: none !important;
  filter: none !important;
}
.card.critical {
  border-left: 2px solid var(--warn) !important;
  background: var(--paper) !important;
  background-image: none !important;
}

/* Card content typography */
.name {
  font-family: var(--mono) !important;
  font-size: 10.5px !important;
  font-weight: 400 !important;
  letter-spacing: 0.14em !important;
  text-transform: uppercase !important;
  color: var(--ink-soft) !important;
}
html[lang="ko"] .name { font-family: var(--korean) !important; letter-spacing: 0.04em !important; font-size: 12px !important; text-transform: none !important; }

.value {
  font-family: var(--mono) !important;
  font-size: 26px !important;
  font-weight: 400 !important;
  letter-spacing: -0.01em !important;
  color: var(--ink) !important;
  font-variant-numeric: tabular-nums !important;
  line-height: 1.05 !important;
  background: none !important;
  -webkit-text-fill-color: currentColor !important;
  -webkit-background-clip: unset !important;
  background-clip: unset !important;
}
.unit {
  font-family: var(--mono) !important;
  font-size: 11px !important;
  color: var(--ink-soft) !important;
  margin-left: 4px !important;
  font-weight: 400 !important;
  letter-spacing: 0.04em !important;
}

/* Card "big" value (composite tab) */
.card .big,
.big {
  font-family: var(--mono) !important;
  font-size: 28px !important;
  font-weight: 400 !important;
  color: var(--ink) !important;
  font-variant-numeric: tabular-nums !important;
  letter-spacing: -0.01em !important;
  background: none !important;
  -webkit-text-fill-color: currentColor !important;
  -webkit-background-clip: unset !important;
  background-clip: unset !important;
}

/* ─────────────────────────────────────────────────────────────────────
   6. PHASE + METRIC BADGES — hairline pills
   ───────────────────────────────────────────────────────────────────── */
.phase,
.metric-badge {
  font-family: var(--mono) !important;
  font-size: 10px !important;
  font-weight: 400 !important;
  letter-spacing: 0.12em !important;
  text-transform: uppercase !important;
  padding: 3px 8px !important;
  border-radius: 2px !important;
  border: 0.5px solid currentColor !important;
  box-shadow: none !important;
  background: transparent !important;
}
.phase-crystalline,
.metric-badge.phase { color: var(--accent) !important; background: transparent !important; }
.phase-amorphous,
.metric-badge.thermal { color: var(--warn) !important; background: transparent !important; }
.phase-mixed,
.metric-badge.matrix { color: var(--ok, var(--accent)) !important; background: transparent !important; }

/* ─────────────────────────────────────────────────────────────────────
   7. MORPHOLOGY CARDS + CHIPS
   ───────────────────────────────────────────────────────────────────── */
.morph-card {
  background: var(--paper) !important;
  background-image: none !important;
  border: 0.5px solid var(--rule) !important;
  border-radius: 2px !important;
  box-shadow: none !important;
  padding: 16px !important;
}
.morph-card h4 {
  font-family: var(--serif-display) !important;
  font-variation-settings: "opsz" 36, "wght" 420 !important;
  font-weight: 420 !important;
  color: var(--ink) !important;
  font-size: 16px !important;
  margin-bottom: 8px !important;
  letter-spacing: -0.01em !important;
  background: none !important;
  -webkit-text-fill-color: currentColor !important;
}
html[lang="ko"] .morph-card h4 { font-family: var(--korean) !important; font-weight: 500 !important; }

.morph-chip {
  display: inline-block !important;
  padding: 3px 8px !important;
  border-radius: 2px !important;
  font-family: var(--mono) !important;
  font-size: 10px !important;
  font-weight: 400 !important;
  letter-spacing: 0.12em !important;
  text-transform: uppercase !important;
  color: var(--ink) !important;
  background: transparent !important;
  border: 0.5px solid currentColor !important;
  margin-right: 6px !important;
}
.chip-glass   { color: var(--accent-cool, #3A5A7C) !important; }
.chip-rubbery { color: #6B5B8C !important; }
.chip-cryst   { color: var(--accent) !important; }
.chip-melt    { color: var(--warn) !important; }

.morph-card .small,
.card .small,
.small {
  font-family: var(--serif-body) !important;
  font-size: 13px !important;
  color: var(--ink-soft) !important;
  line-height: 1.55 !important;
}
html[lang="ko"] .morph-card .small,
html[lang="ko"] .card .small,
html[lang="ko"] .small { font-family: var(--korean) !important; font-size: 13px !important; }

/* Numbers inside .small — switch to mono inline */
.small code,
.small .num { font-family: var(--mono) !important; font-variant-numeric: tabular-nums !important; }

/* ─────────────────────────────────────────────────────────────────────
   8. CHARTS — frame in hairline, flat background
   ───────────────────────────────────────────────────────────────────── */
.chart {
  background: var(--paper) !important;
  background-image: none !important;
  border: 0.5px solid var(--rule) !important;
  border-radius: 2px !important;
  box-shadow: none !important;
  padding: 8px !important;
}

/* ─────────────────────────────────────────────────────────────────────
   9. TABLES — hairline, mono numeric cells
   ───────────────────────────────────────────────────────────────────── */
.equation-table {
  font-family: var(--serif-body) !important;
  font-size: 14px !important;
  border: 0 !important;
  border-top: 0.5px solid var(--rule-strong) !important;
  border-bottom: 0.5px solid var(--rule-strong) !important;
}
.equation-table th {
  background: transparent !important;
  color: var(--ink) !important;
  font-family: var(--mono) !important;
  font-size: 10.5px !important;
  font-weight: 400 !important;
  letter-spacing: 0.14em !important;
  text-transform: uppercase !important;
  text-align: left !important;
  padding: 10px 12px !important;
  border: 0 !important;
  border-bottom: 0.5px solid var(--rule) !important;
}
.equation-table td {
  padding: 10px 12px !important;
  border: 0 !important;
  border-bottom: 0.5px solid var(--rule) !important;
  color: var(--ink) !important;
  vertical-align: top !important;
}
.equation-table tr:last-child td { border-bottom: 0 !important; }
.equation-table td code,
.equation-table td.num,
.equation-table td.number {
  font-family: var(--mono) !important;
  font-variant-numeric: tabular-nums !important;
}
html[lang="ko"] .equation-table th { font-family: var(--korean) !important; letter-spacing: 0.04em !important; font-size: 12.5px !important; text-transform: none !important; font-weight: 500 !important; }
html[lang="ko"] .equation-table td { font-family: var(--korean) !important; }

/* ─────────────────────────────────────────────────────────────────────
   10. GENERIC .box — bordered content containers
   ───────────────────────────────────────────────────────────────────── */
.box {
  background: var(--paper) !important;
  background-image: none !important;
  border: 0.5px solid var(--rule) !important;
  border-radius: 2px !important;
  box-shadow: none !important;
  padding: 20px !important;
}
.section .box { margin-bottom: 20px !important; }

/* ─────────────────────────────────────────────────────────────────────
   11. DETAILS/DISCLOSURE (Assumptions/Methodology)
   ───────────────────────────────────────────────────────────────────── */
details.disclosure {
  background: var(--paper-2) !important;
  border: 0.5px solid var(--rule) !important;
  border-radius: 2px !important;
  padding: 12px 16px !important;
}
details.disclosure > summary {
  font-family: var(--mono) !important;
  font-size: 11px !important;
  font-weight: 400 !important;
  letter-spacing: 0.14em !important;
  text-transform: uppercase !important;
  color: var(--ink) !important;
  cursor: pointer !important;
}
html[lang="ko"] details.disclosure > summary { font-family: var(--korean) !important; letter-spacing: 0.04em !important; font-size: 13px !important; text-transform: none !important; font-weight: 500 !important; }
details.disclosure[open] { background: var(--paper-2) !important; }
details.disclosure[open] > summary { color: var(--accent) !important; margin-bottom: 10px !important; border-bottom: 0.5px solid var(--rule) !important; padding-bottom: 10px !important; }

/* ─────────────────────────────────────────────────────────────────────
   12. FORM CONTROLS — inputs, selects
   ───────────────────────────────────────────────────────────────────── */
input[type="number"],
input[type="text"],
select,
textarea {
  background: var(--paper) !important;
  border: 0.5px solid var(--rule-strong) !important;
  border-radius: 2px !important;
  padding: 8px 10px !important;
  font-family: var(--mono) !important;
  font-size: 13px !important;
  color: var(--ink) !important;
  box-shadow: none !important;
  transition: border-color 160ms ease !important;
}
input[type="number"]:focus,
input[type="text"]:focus,
select:focus,
textarea:focus {
  outline: 0 !important;
  border-color: var(--accent) !important;
  box-shadow: 0 0 0 1px var(--accent) !important;
}

/* Buttons other than .tab-btn and .lang-toggle */
button:not(.tab-btn):not(.lang-toggle) {
  appearance: none !important;
  background: var(--ink) !important;
  background-image: none !important;
  color: var(--paper) !important;
  border: 0 !important;
  border-radius: 2px !important;
  padding: 10px 18px !important;
  font-family: var(--mono) !important;
  font-size: 11px !important;
  font-weight: 400 !important;
  letter-spacing: 0.14em !important;
  text-transform: uppercase !important;
  cursor: pointer !important;
  box-shadow: none !important;
  transition: background 160ms ease !important;
}
button:not(.tab-btn):not(.lang-toggle):hover {
  background: var(--accent) !important;
  transform: none !important;
  filter: none !important;
  box-shadow: none !important;
}
html[lang="ko"] button:not(.tab-btn):not(.lang-toggle) { font-family: var(--korean) !important; letter-spacing: 0.06em !important; font-size: 13px !important; text-transform: none !important; font-weight: 500 !important; }

/* ─────────────────────────────────────────────────────────────────────
   13. RESULTS GRID (Composite tab metric cards)
   ───────────────────────────────────────────────────────────────────── */
.results-grid {
  gap: 12px !important;
}

/* ─────────────────────────────────────────────────────────────────────
   14. GUIDE CARDS + PANELS + NARRATIVE NOTES
   Individual rules (not grouped) — grouped selectors were being dropped.
   ───────────────────────────────────────────────────────────────────── */
.guide-card {
  background: var(--paper) !important;
  background-image: none !important;
  border: 0.5px solid var(--rule) !important;
  border-radius: 2px !important;
  box-shadow: none !important;
  padding: 20px !important;
  color: var(--ink) !important;
}
article.guide-card {
  background: var(--paper) !important;
  background-image: none !important;
  border: 0.5px solid var(--rule) !important;
  border-radius: 2px !important;
  box-shadow: none !important;
  padding: 20px !important;
  color: var(--ink) !important;
}
.guide-panel {
  background: var(--paper) !important;
  background-image: none !important;
  border: 0.5px solid var(--rule) !important;
  border-radius: 2px !important;
  box-shadow: none !important;
  padding: 16px 18px !important;
  color: var(--ink-soft) !important;
  font-family: var(--serif-body) !important;
  font-size: 14px !important;
  line-height: 1.6 !important;
  margin-bottom: 16px !important;
}
.context-note {
  background: var(--paper) !important;
  background-image: none !important;
  border: 0.5px solid var(--rule) !important;
  border-radius: 2px !important;
  box-shadow: none !important;
  padding: 16px 18px !important;
  color: var(--ink-soft) !important;
  font-family: var(--serif-body) !important;
  font-size: 13.5px !important;
  line-height: 1.6 !important;
  margin-top: 12px !important;
}
.model-narrative {
  background: var(--paper) !important;
  background-image: none !important;
  border: 0.5px solid var(--rule) !important;
  border-radius: 2px !important;
  box-shadow: none !important;
  padding: 16px 18px !important;
  color: var(--ink-soft) !important;
  font-family: var(--serif-body) !important;
  font-size: 13.5px !important;
  line-height: 1.6 !important;
  margin-top: 12px !important;
}
html[lang="ko"] .guide-panel,
html[lang="ko"] .context-note,
html[lang="ko"] .model-narrative { font-family: var(--korean) !important; }
.guide-card h4 {
  font-family: var(--serif-display) !important;
  font-variation-settings: "opsz" 36, "wght" 420 !important;
  font-weight: 420 !important;
  color: var(--ink) !important;
  font-size: 16px !important;
  margin-bottom: 8px !important;
  letter-spacing: -0.01em !important;
  background: none !important;
  -webkit-text-fill-color: currentColor !important;
}
html[lang="ko"] .guide-card h4 { font-family: var(--korean) !important; font-weight: 500 !important; }

/* ─────────────────────────────────────────────────────────────────────
   15. LINKS
   ───────────────────────────────────────────────────────────────────── */
.section a {
  color: var(--accent) !important;
  text-decoration: none !important;
  border-bottom: 0.5px solid var(--accent) !important;
  transition: color 160ms ease, border-color 160ms ease !important;
}
.section a:hover {
  color: var(--ink) !important;
  border-bottom-color: var(--ink) !important;
}

/* ─────────────────────────────────────────────────────────────────────
   17. PLA/PHA HIGH HDT TAB (teal-scoped independent style block)
   Scoped to #section-pla-hdt. Map teal to forest accent.
   ───────────────────────────────────────────────────────────────────── */
#section-pla-hdt .pla-nav-btn {
  border: 0.5px solid #D8D0BE !important;
  background: #F5F1E8 !important;
  color: #3A352D !important;
  padding: 10px 16px !important;
  border-radius: 2px !important;
  font-family: var(--mono) !important;
  font-size: 10.5px !important;
  font-weight: 400 !important;
  letter-spacing: 0.14em !important;
  text-transform: uppercase !important;
  min-height: 44px !important;
  box-shadow: none !important;
}
html[lang="ko"] #section-pla-hdt .pla-nav-btn { font-family: var(--korean) !important; font-size: 13px !important; letter-spacing: 0.04em !important; text-transform: none !important; font-weight: 500 !important; }
#section-pla-hdt .pla-nav-btn.active {
  border-color: #2C5D3F !important;
  color: #2C5D3F !important;
  background: #F5F1E8 !important;
}
#section-pla-hdt .pla-nav-btn:hover:not(.active) {
  background: #EDE7D8 !important;
  color: #1A1814 !important;
}

#section-pla-hdt .pla-card {
  background: #F5F1E8 !important;
  background-image: none !important;
  border: 0.5px solid #D8D0BE !important;
  border-radius: 2px !important;
  padding: 20px !important;
  margin-bottom: 16px !important;
  box-shadow: none !important;
}
#section-pla-hdt .pla-card h3 {
  font-family: var(--serif-display) !important;
  font-variation-settings: "opsz" 36, "wght" 420 !important;
  font-weight: 420 !important;
  color: #1A1814 !important;
  border-bottom: 0.5px solid #D8D0BE !important;
  padding-bottom: 10px !important;
  margin-bottom: 14px !important;
  font-size: 20px !important;
  letter-spacing: -0.01em !important;
  background: none !important;
  -webkit-text-fill-color: currentColor !important;
}
#section-pla-hdt .pla-card h4 {
  font-family: var(--serif-display) !important;
  font-variation-settings: "opsz" 28, "wght" 420 !important;
  font-weight: 420 !important;
  color: #1A1814 !important;
  font-size: 16px !important;
  margin: 14px 0 8px !important;
  letter-spacing: -0.01em !important;
}
html[lang="ko"] #section-pla-hdt .pla-card h3,
html[lang="ko"] #section-pla-hdt .pla-card h4 { font-family: var(--korean) !important; font-weight: 500 !important; }

#section-pla-hdt .pla-table {
  font-family: var(--serif-body) !important;
  font-size: 13.5px !important;
  border: 0 !important;
  border-top: 0.5px solid #B8AF99 !important;
  border-bottom: 0.5px solid #B8AF99 !important;
  border-collapse: collapse !important;
}
#section-pla-hdt .pla-table th {
  background: transparent !important;
  color: #1A1814 !important;
  font-family: var(--mono) !important;
  font-size: 10.5px !important;
  font-weight: 400 !important;
  letter-spacing: 0.14em !important;
  text-transform: uppercase !important;
  padding: 10px 12px !important;
  border: 0 !important;
  border-bottom: 0.5px solid #D8D0BE !important;
  text-align: left !important;
}
#section-pla-hdt .pla-table td {
  padding: 10px 12px !important;
  border: 0 !important;
  border-bottom: 0.5px solid #D8D0BE !important;
  color: #1A1814 !important;
}
#section-pla-hdt .pla-table tr:last-child td { border-bottom: 0 !important; }
html[lang="ko"] #section-pla-hdt .pla-table th { font-family: var(--korean) !important; letter-spacing: 0.04em !important; text-transform: none !important; font-weight: 500 !important; font-size: 12.5px !important; }
html[lang="ko"] #section-pla-hdt .pla-table td { font-family: var(--korean) !important; }

#section-pla-hdt .pla-slider-box {
  background: #EDE7D8 !important;
  border: 0.5px solid #D8D0BE !important;
  border-radius: 2px !important;
  padding: 16px 18px !important;
  margin: 16px 0 !important;
}
#section-pla-hdt .pla-slider-label {
  font-family: var(--mono) !important;
  font-size: 10.5px !important;
  font-weight: 400 !important;
  color: #3A352D !important;
  letter-spacing: 0.14em !important;
  text-transform: uppercase !important;
  display: block !important;
  margin-bottom: 10px !important;
}
html[lang="ko"] #section-pla-hdt .pla-slider-label { font-family: var(--korean) !important; font-size: 13px !important; letter-spacing: 0.04em !important; text-transform: none !important; font-weight: 500 !important; }

#section-pla-hdt .pla-slider {
  height: 2px !important;
  -webkit-appearance: none !important;
  appearance: none !important;
  background-color: #B8AF99 !important;
  background-image: none !important;
  border: 0 !important;
  border-radius: 0 !important;
}
#section-pla-hdt .pla-slider::-webkit-slider-thumb {
  -webkit-appearance: none !important;
  width: 18px !important;
  height: 18px !important;
  border-radius: 50% !important;
  background-color: #2C5D3F !important;
  background-image: none !important;
  border: 2px solid #F5F1E8 !important;
  box-shadow: 0 0 0 1px #2C5D3F !important;
  cursor: pointer !important;
}
#section-pla-hdt .pla-slider::-moz-range-thumb {
  width: 18px !important;
  height: 18px !important;
  border-radius: 50% !important;
  background-color: #2C5D3F !important;
  background-image: none !important;
  border: 2px solid #F5F1E8 !important;
  cursor: pointer !important;
}

#section-pla-hdt .pla-res-box {
  background: #F5F1E8 !important;
  border: 0.5px solid #D8D0BE !important;
  border-radius: 2px !important;
  padding: 16px !important;
  text-align: center !important;
  box-shadow: none !important;
}
#section-pla-hdt .pla-res-box.sky {
  background: #F5F1E8 !important;
  border-color: #D8D0BE !important;
  border-left: 2px solid #3A5E7A !important;
}
#section-pla-hdt .pla-res-box.pla-res-neutral {
  background: #F5F1E8 !important;
  border-color: #D8D0BE !important;
}
#section-pla-hdt .pla-res-title {
  font-family: var(--mono) !important;
  font-size: 10.5px !important;
  color: #757065 !important;
  font-weight: 400 !important;
  letter-spacing: 0.14em !important;
  text-transform: uppercase !important;
}
html[lang="ko"] #section-pla-hdt .pla-res-title { font-family: var(--korean) !important; letter-spacing: 0.04em !important; text-transform: none !important; font-weight: 500 !important; font-size: 12.5px !important; }
#section-pla-hdt .pla-res-value {
  font-family: var(--mono) !important;
  font-size: 22px !important;
  font-weight: 400 !important;
  color: #2C5D3F !important;
  margin-top: 6px !important;
  font-variant-numeric: tabular-nums !important;
  letter-spacing: -0.01em !important;
}
#section-pla-hdt .pla-res-box.sky .pla-res-value { color: #3A5E7A !important; }

#section-pla-hdt .pla-btn {
  background-color: #1A1814 !important;
  background-image: none !important;
  color: #F5F1E8 !important;
  border: 0 !important;
  border-radius: 2px !important;
  padding: 10px 18px !important;
  font-family: var(--mono) !important;
  font-size: 11px !important;
  font-weight: 400 !important;
  letter-spacing: 0.14em !important;
  text-transform: uppercase !important;
  cursor: pointer !important;
  box-shadow: none !important;
}
html[lang="ko"] #section-pla-hdt .pla-btn { font-family: var(--korean) !important; letter-spacing: 0.06em !important; text-transform: none !important; font-weight: 500 !important; font-size: 13px !important; }
#section-pla-hdt .pla-btn:hover {
  background-color: #2C5D3F !important;
  color: #F5F1E8 !important;
}

/* ─────────────────────────────────────────────────────────────────────
   18. REMOVE DECORATIVE PSEUDO-ORBS
   ───────────────────────────────────────────────────────────────────── */
.section::before,
.section::after,
.controls::before,
.controls::after,
.card::before,
.card::after,
.morph-card::before,
.morph-card::after,
.box::before,
.box::after {
  display: none !important;
  content: none !important;
}