/* ═══════════════════════════════════════════════════════
   FYORD — Shared Theme CSS
   Handles dark  light mode via [data-theme] on <html>
   Dark mode is the default; light mode overrides follow.
═══════════════════════════════════════════════════════ */

/* ═══════════════════════════════════════════════════════
   FYORD 2026 — EDITORIAL INDUSTRIAL THEME
   A precise, image-led system inspired by modern identity studios.
═══════════════════════════════════════════════════════ */
@import url('https://fonts.googleapis.com/css2?family=DM+Mono:wght@400;500&family=Manrope:wght@400;500;600;700&display=swap');

:root {
  --bg: #f1efe9 !important;
  --surface: #f8f6f0 !important;
  --surface-2: #e6e2d9 !important;
  --border: #c9c4b9 !important;
  --border-mid: #a9a398 !important;
  --text: #1b1b18 !important;
  --muted: #66635d !important;
  --dim: #8f8a80 !important;
  --accent: #e54728 !important;
  --accent-light: rgba(229, 71, 40, .12) !important;
  --accent-glow: none !important;
  --r: 0px !important;
  --r-lg: 0px !important;
  /* Theme-aware surfaces for chrome, fields and hovered cards. */
  --chrome-bg: rgba(241,239,233,.92) !important;
  --input-bg: #fffdf7 !important;
  --card-hover: #fffdf7 !important;
  --accent-text: #c73a1f !important;
  color-scheme: light;
}

html, body { background: var(--bg) !important; color: var(--text) !important; }
body, button, input, select, textarea { font-family: 'Manrope', sans-serif !important; }
body::after {
  content: '';
  position: fixed;
  inset: 0;
  z-index: 999999;
  pointer-events: none;
  opacity: .035;
  background-image: url("data:image/svg+xml,%3Csvg viewBox='0 0 180 180' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.9' numOctaves='3' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)' opacity='.9'/%3E%3C/svg%3E");
}

h1, h2, h3, h4, .stat-num, .price-main, .hero-title {
  font-family: 'Manrope', sans-serif !important;
  letter-spacing: -.055em !important;
  color: var(--text);
}

.section-tag, .eyebrow, .hero-badge, .stat-lbl, .spec-label,
.card-label, .sb-section, .mob-section-hd, .marquee-item {
  font-family: 'DM Mono', monospace !important;
  text-transform: uppercase;
  letter-spacing: .11em !important;
}

nav:not(.mob-nav):not(.sb-nav):not(.guide-nav), header:not(.article-hero), .topbar {
  background: var(--chrome-bg) !important;
  color: var(--text) !important;
  border-bottom: 1px solid var(--border) !important;
  backdrop-filter: blur(14px) !important;
}
.nav-logo, .nav-links a, .nav-actions a, .h-breadcrumb, .topbar-title { color: var(--text) !important; }
.nav-links a { font-family: 'DM Mono', monospace !important; font-size: 12px !important; text-transform: uppercase; letter-spacing: .06em; }
.nav-links a:hover { color: var(--accent) !important; }

.btn-accent, .btn-hero-p, .mob-cta-main, .topbar-btn.primary,
.cta-btn, button.primary, .primary-btn, .checkout-btn {
  border-radius: 0 !important;
  background: var(--accent) !important;
  color: #fffaf3 !important;
  box-shadow: none !important;
  text-transform: uppercase;
  font-family: 'DM Mono', monospace !important;
  letter-spacing: .04em;
}
.btn-ghost, .btn-hero-s, .mob-cta-ghost, .topbar-btn, button.secondary {
  border-radius: 0 !important;
  border-color: var(--border-mid) !important;
  color: var(--text) !important;
  background: transparent !important;
}
.btn-accent:hover, .btn-hero-p:hover, .cta-btn:hover { background: #bd321c !important; transform: translateY(-2px); }

.hero {
  min-height: 92vh !important;
  text-align: left !important;
  justify-content: flex-start !important;
  border-bottom: 1px solid var(--border);
}
.hero-photo { filter: grayscale(1) contrast(1.1) brightness(.62) !important; transform: scale(1.015) !important; }
.hero-gradient { background: linear-gradient(90deg, rgba(20,20,17,.82) 0%, rgba(20,20,17,.35) 58%, rgba(20,20,17,.04) 100%) !important; }
.hero-grid { opacity: .12 !important; background-size: 96px 96px !important; }
.hero-content { margin-left: max(0px, calc((100vw - 1260px)/2)) !important; max-width: 920px !important; }
.hero h1 { font-size: clamp(58px, 10vw, 148px) !important; line-height: .82 !important; letter-spacing: -.075em !important; max-width: 9ch; margin-bottom: 34px !important; }
.hero h1 span { color: #f15a3a !important; }
.hero-sub { margin: 0 0 42px !important; max-width: 520px !important; color: rgba(255,255,255,.76) !important; }
.hero-ctas { justify-content: flex-start !important; }
.hero-badge { border-radius: 0 !important; background: #f1efe9 !important; color: #1b1b18 !important; border: 0 !important; }

.stats-inner, .hiw-grid, .svc-grid, .mat-grid, .price-grid, .why-grid, .gal-grid {
  gap: 1px !important;
  background: var(--border) !important;
  border: 1px solid var(--border) !important;
  border-radius: 0 !important;
}
.stat-cell, .hiw-card, .svc-card, .mat-card, .price-card, .why-card,
.factor-card, .spec-card, .cap-card, .card, .stat-card, .summary-card, .quick-actions {
  border-radius: 0 !important;
  background: var(--surface) !important;
  border-color: var(--border) !important;
  box-shadow: none !important;
}
.hiw-card:hover, .svc-card:hover, .mat-card:hover, .why-card:hover,
.factor-card:hover, .spec-card:hover { transform: translateY(-4px) !important; background: var(--card-hover) !important; }
.section-title { font-size: clamp(44px, 7vw, 96px) !important; line-height: .92 !important; max-width: 11ch; }
.section-head { align-items: end !important; border-top: 1px solid var(--border); padding-top: 22px; }
.section-tag { color: var(--accent) !important; }
.hiw, .services, .materials, .pricing, .why, .gallery, .upload-cta,
.hiw-section, .services-section, .materials-section, .pricing-section, .why-section, .gallery-section {
  background: var(--bg) !important;
}
.marquee-strip { background: var(--accent) !important; border: 0 !important; }
.marquee-item, .marquee-dot { color: #fffaf3 !important; }
.marquee-dot { background: #fffaf3 !important; border-radius: 0 !important; }
.upload-zone { border-radius: 0 !important; border: 1px solid var(--border-mid) !important; background: var(--surface) !important; }
.upload-zone:hover { border-color: var(--accent) !important; }
footer { background: #1b1b18 !important; color: #f1efe9 !important; }

.sidebar, .detail-panel, .mob-drawer { background: var(--surface) !important; border-color: var(--border) !important; }
.sb-item { border-radius: 0 !important; color: var(--muted) !important; }
.sb-item:hover, .sb-item.active { background: var(--accent) !important; color: white !important; }
.table, .orders-table, .tbl-row, input, select, textarea { border-radius: 0 !important; border-color: var(--border) !important; }

@media (max-width: 760px) {
  .hero { padding-inline: 22px !important; }
  .hero-content { margin-left: 0 !important; }
  .hero h1 { font-size: clamp(52px, 17vw, 84px) !important; }
  .section-title { font-size: clamp(40px, 13vw, 64px) !important; }
  #fabtiv-theme-toggle { right: 16px !important; bottom: 16px !important; }
}

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation-duration: .01ms !important; animation-iteration-count: 1 !important; transition-duration: .01ms !important; }
}

/* The refreshed identity uses one intentional colour system. */
#p3dp-theme-btn { display: none !important; }

/* ── COMPLETE ROUTE COVERAGE ───────────────────────────
   Legacy pages use several component vocabularies. These rules make the
   editorial system authoritative wherever those components appear. */
.section-title, .section-sub, .sh h2, .sh p,
.hiw-card h3, .hiw-card p, .why-card h3, .why-card p,
.svc-body h3, .svc-desc, .mat-name, .mat-sub,
.factor-card h3, .factor-card p, .spec-card h3,
.proc-card h3, .proc-card p, .prop-value, .prop-note,
.rel-name, .rel-sub, .rule-card h3, .rule-card p,
.faq-q, .faq-a, .step h3, .step p {
  color: var(--text) !important;
}
.section-sub, .hiw-card p, .why-card p, .svc-desc,
.mat-sub, .factor-card p, .proc-card p, .prop-note,
.rel-sub, .rule-card p, .faq-a, .step p { color: var(--muted) !important; }

.page-hero, .standard-hero, .article-hero {
  background: var(--bg) !important;
  border-bottom: 1px solid var(--border) !important;
}
.page-hero h1, .standard-hero h1, .article-hero h1,
.page-hero p, .standard-hero p, .article-hero p { color: var(--text) !important; }
.hero:not(.page-hero) h1, .hero:not(.page-hero) .hero-sub,
.brand-panel h1, .brand-panel h2, .brand-panel .brand-headline,
.brand-panel .brand-logo { color: #fffaf3 !important; }

section, main, .main, .content, .content-area { color: var(--text); }
.surface-bg, .how, .examples, .stats, .related,
.properties, .applications, .process, .faq {
  background: var(--surface-2) !important;
  border-color: var(--border) !important;
}
.factor-grid, .props-grid, .proc-grid, .apps-grid, .rel-grid,
.spec-grid, .cap-grid, .other-grid, .rules-grid { gap: 1px !important; }
.prop-card, .proc-card, .app-chip, .rel-card, .rule-card,
.part-chip, .thick-chip, .grade-tag, .chip, .mpill,
.other-card, .callout, .faq-item, .type-card, .qa-item {
  border-radius: 0 !important;
  border-color: var(--border) !important;
  box-shadow: none !important;
}
.prop-card, .proc-card, .app-chip, .rel-card, .rule-card,
.other-card, .faq-item, .type-card, .qa-item { background: var(--surface) !important; }

.grades-table, .ex-table, table { border-color: var(--border) !important; }
.grades-table th, .ex-table th, table th {
  background: var(--surface-2) !important;
  color: var(--muted) !important;
  font-family: 'DM Mono', monospace !important;
  letter-spacing: .08em !important;
}
.grades-table td, .ex-table td, table td { color: var(--text) !important; border-color: var(--border) !important; }

.dropdown-inner, .dropdown, .user-menu, .modal, .modal-card,
.panel, .form-card, .auth-card, .settings-card {
  background: var(--surface) !important;
  border-color: var(--border) !important;
  border-radius: 0 !important;
  box-shadow: 0 24px 70px rgba(44, 40, 32, .13) !important;
}
input, select, textarea, .form-input, .settings-input, .rate-input {
  background: var(--input-bg) !important;
  color: var(--text) !important;
  border: 1px solid var(--border-mid) !important;
  box-shadow: none !important;
}
input:focus, select:focus, textarea:focus { outline: 2px solid var(--accent) !important; outline-offset: 1px; }
label, .form-label, .detail-label, .prop-label, .spec-label { color: var(--muted) !important; }

.brand-panel { background: #20201c !important; border-color: #3b3a33 !important; }
.brand-panel::before { background: radial-gradient(circle, rgba(229,71,40,.32), transparent 68%) !important; }
.auth-panel, .form-panel, .login-panel { background: var(--bg) !important; }
.auth-title, .form-title, .login-title, .ob-title,
.success-msg h3, .ob-success h3, .type-card .tc-title { color: var(--text) !important; }

.cta-strip, .quote-cta {
  background: var(--accent) !important;
  color: #fffaf3 !important;
  border: 0 !important;
}
.cta-strip h2, .cta-strip p, .quote-cta h2, .quote-cta p { color: #fffaf3 !important; }
.std-foot-col h4, footer h2, footer h3, footer h4 { color: #f1efe9 !important; }

.mob-link, .mob-sub-link { color: var(--text) !important; }
.mob-link:hover, .mob-sub-link:hover { background: var(--accent) !important; color: white !important; }

@media (max-width: 760px) {
  .page-hero { padding: 128px 22px 68px !important; }
  section { padding-inline: 22px !important; }
  .section-head, .sh { text-align: left !important; }
}

/* ── NON-EMOJI VISUAL LANGUAGE ─────────────────────── */
.hiw-grid { counter-reset: fyord-step; }
.hiw-card { counter-increment: fyord-step; }
.hiw-icon:empty::before {
  content: '0' counter(fyord-step);
  font: 500 13px/1 'DM Mono', monospace;
  letter-spacing: .08em;
  color: var(--accent);
}
.proc-icon:empty::before, .cap-icon:empty::before,
.why-icon:empty::before, .spec-icon:empty::before,
.rule-icon:empty::before, .callout-icon:empty::before,
.rel-badge:empty::before, .part-chip-icon:empty::before,
.app-chip-icon:empty::before {
  content: '+';
  font: 500 18px/1 'DM Mono', monospace;
  color: var(--accent);
}
.proc-icon, .cap-icon, .why-icon, .spec-icon, .rule-icon,
.callout-icon, .rel-badge, .part-chip-icon, .app-chip-icon,
.hiw-icon {
  border-radius: 0 !important;
  display: inline-flex;
  align-items: center;
  justify-content: center;
}
.ham-btn:empty::before {
  content: '';
  width: 18px;
  height: 12px;
  border-top: 1.5px solid currentColor;
  border-bottom: 1.5px solid currentColor;
  background: linear-gradient(currentColor,currentColor) center/100% 1.5px no-repeat;
}
.check-ico:empty::before, .trust-item > span:empty::before,
.security-row > span:empty::before { content: '—'; color: var(--accent); }
.delivery-pincode-icon:empty::before, .eta-icon:empty::before { content: 'FY'; font: 500 11px/1 'DM Mono', monospace; color: var(--accent); }
.success-icon:empty::before { content: 'DONE'; font: 500 11px/1 'DM Mono', monospace; color: var(--accent); }
.soc-btn:empty { display: none !important; }
.feature > .feat-icon:empty, .factor-icon:empty, .upload-icon:empty { display: none !important; }
.part-chip-icon:empty, .app-chip-icon:empty { width: 18px; flex: 0 0 18px; }
button[onclick*="togglePass"]:empty::before {
  content: 'SHOW';
  font: 500 9px/1 'DM Mono', monospace;
  letter-spacing: .05em;
  color: var(--muted);
}

/* ── THEME TOGGLE BUTTON ─────────────────────────────── */
#p3dp-theme-btn {
  position: fixed;
  bottom: 20px;
  right: 20px;
  width: 36px;
  height: 36px;
  border-radius: 50%;
  background: var(--surface, #111);
  border: 1px solid var(--border-mid, #2a2a2a);
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 16px;
  z-index: 99999;
  box-shadow: 0 2px 12px rgba(0,0,0,.4);
  transition: transform .2s ease, background .25s, border-color .25s, box-shadow .25s;
  line-height: 1;
  padding: 0;
}
#p3dp-theme-btn:hover {
  transform: scale(1.12) rotate(12deg);
  box-shadow: 0 6px 32px rgba(0,0,0,.4);
}
#p3dp-theme-btn:active { transform: scale(.96); }

/* ── LIGHT MODE ROOT VARS ────────────────────────────── */
html[data-theme="light"] {
  --accent: #d13f23 !important;
  --bg:           #f2f2f3;
  --surface:      #ffffff;
  --surface-2:    #f7f7f8;
  --border:       #e8e8e8;
  --border-mid:   #d5d5d5;
  --text:         #111111;
  --muted:        #555555;
  --dim:          #999999;
  /* app-page aliases */
  --s2:           #f5f5f6;
  --s3:           #eeeeef;
  --bm:           #d8d8d8;
  color-scheme: light;
}

/* ── LIGHT MODE: GLOBAL ───────────────────────────────── */
html[data-theme="light"] body {
  background: var(--bg) !important;
  color: var(--text) !important;
}

html[data-theme="light"] h1,
html[data-theme="light"] h2,
html[data-theme="light"] h3,
html[data-theme="light"] h4 { color: var(--text) !important; }

/* ── LIGHT MODE: LANDING PAGE ────────────────────────── */
html[data-theme="light"] nav:not(.mob-nav):not(.sb-nav):not(.guide-nav) {
  background: rgba(255,255,255,.92) !important;
  border-bottom: 1px solid var(--border) !important;
}
html[data-theme="light"] nav.pinned {
  background: rgba(255,255,255,.97) !important;
  backdrop-filter: blur(18px);
}
html[data-theme="light"] .nav-links a { color: var(--muted) !important; }
html[data-theme="light"] .nav-links a:hover { color: var(--text) !important; }
html[data-theme="light"] .nav-logo { color: var(--text) !important; }
html[data-theme="light"] .btn-ghost {
  color: var(--muted) !important;
  border-color: var(--border-mid) !important;
}
html[data-theme="light"] .btn-ghost:hover { color: var(--text) !important; }

/* Hero stays dark for visual impact */
html[data-theme="light"] .hero { background: #0d0d0f !important; }

/* Stats bar — keep dark */
html[data-theme="light"] .stats-bar { background: #111 !important; }

/* Sections */
html[data-theme="light"] .hiw-section,
html[data-theme="light"] .services-section,
html[data-theme="light"] .materials-section,
html[data-theme="light"] .why-section,
html[data-theme="light"] .pricing-section,
html[data-theme="light"] .upload-cta {
  background: var(--bg) !important;
}
html[data-theme="light"] .gallery-section { background: var(--surface-2) !important; }

html[data-theme="light"] .section-title { color: var(--text) !important; }
html[data-theme="light"] .section-sub   { color: var(--muted) !important; }
html[data-theme="light"] .section-tag   { color: var(--accent) !important; }

html[data-theme="light"] .hiw-card {
  background: var(--surface) !important;
  border-color: var(--border) !important;
}
html[data-theme="light"] .hiw-card h3 { color: var(--text) !important; }
html[data-theme="light"] .hiw-card p  { color: var(--muted) !important; }

html[data-theme="light"] .why-card {
  background: var(--surface) !important;
  border-color: var(--border) !important;
}
html[data-theme="light"] .why-card h3 { color: var(--text) !important; }
html[data-theme="light"] .why-card p  { color: var(--muted) !important; }

html[data-theme="light"] .mat-card {
  border-color: var(--border) !important;
}
html[data-theme="light"] .mat-name { color: var(--text) !important; }
html[data-theme="light"] .mat-sub  { color: var(--muted) !important; }

html[data-theme="light"] .price-card {
  background: var(--surface) !important;
  border-color: var(--border) !important;
}
html[data-theme="light"] .price-card th,
html[data-theme="light"] .price-card td { color: var(--text) !important; }

html[data-theme="light"] .upload-zone {
  background: var(--surface) !important;
  border-color: var(--border-mid) !important;
}
html[data-theme="light"] .upload-zone h3 { color: var(--text) !important; }
html[data-theme="light"] .upload-zone p  { color: var(--muted) !important; }
html[data-theme="light"] .fmt-tag {
  background: var(--s2) !important;
  color: var(--muted) !important;
  border-color: var(--border) !important;
}
html[data-theme="light"] .lock-note { color: var(--dim) !important; }

/* Footer stays dark */
html[data-theme="light"] footer { background: #0d0d0f !important; }

/* ── LIGHT MODE: APP PAGES (header, sidebar, cards) ─── */
html[data-theme="light"] header:not(.article-hero),
html[data-theme="light"] .topbar {
  background: var(--surface) !important;
  border-bottom-color: var(--border) !important;
}
html[data-theme="light"] .topbar-title { color: var(--text) !important; }
html[data-theme="light"] .topbar-sub   { color: var(--muted) !important; }
html[data-theme="light"] .h-breadcrumb a,
html[data-theme="light"] .h-breadcrumb { color: var(--muted) !important; }
html[data-theme="light"] .h-sep { background: var(--border) !important; }

/* Sidebar */
html[data-theme="light"] .sidebar {
  background: var(--surface) !important;
  border-right-color: var(--border) !important;
}
html[data-theme="light"] .sb-logo { border-bottom-color: var(--border) !important; }
html[data-theme="light"] .sb-wordmark { color: var(--text) !important; }
html[data-theme="light"] .sb-section { color: var(--muted) !important; }
html[data-theme="light"] .sb-item { color: var(--muted) !important; }
html[data-theme="light"] .sb-item:hover { background: var(--s2) !important; color: var(--text) !important; }
html[data-theme="light"] .sb-item.active { background: rgba(229,71,40,.1) !important; color: var(--text) !important; box-shadow: inset 2px 0 0 var(--accent); }
html[data-theme="light"] .sb-user { border-top-color: var(--border) !important; }
html[data-theme="light"] .sb-user-name  { color: var(--text) !important; }
html[data-theme="light"] .sb-user-email { color: var(--dim) !important; }
html[data-theme="light"] .sb-user-cog   { color: var(--dim) !important; }

/* Cards */
html[data-theme="light"] .card,
html[data-theme="light"] .stat-card,
html[data-theme="light"] .summary-card,
html[data-theme="light"] .quick-actions,
html[data-theme="light"] .mat-usage,
html[data-theme="light"] .orders-table {
  background: var(--surface) !important;
  border-color: var(--border) !important;
}
html[data-theme="light"] .stat-value { color: var(--text) !important; }
html[data-theme="light"] .stat-label { color: var(--dim) !important; }
html[data-theme="light"] .section-title-sm { color: var(--text) !important; }
html[data-theme="light"] .sum-total-val   { color: var(--text) !important; }
html[data-theme="light"] .sum-total-label { color: var(--text) !important; }
html[data-theme="light"] .sum-label { color: var(--muted) !important; }
html[data-theme="light"] .sum-val   { color: var(--text) !important; }
html[data-theme="light"] .summary-hd { color: var(--text) !important; border-bottom-color: var(--border) !important; }

/* Table rows */
html[data-theme="light"] .tbl-hd { color: var(--dim) !important; border-bottom-color: var(--border) !important; }
html[data-theme="light"] .tbl-row { border-bottom-color: var(--border) !important; }
html[data-theme="light"] .tbl-row:hover { background: var(--s2) !important; }
html[data-theme="light"] .tbl-file-name { color: var(--text) !important; }
html[data-theme="light"] .tbl-file-meta { color: var(--dim) !important; }
html[data-theme="light"] .tbl-file-icon { background: var(--s2) !important; border-color: var(--border) !important; }
html[data-theme="light"] .tbl-cell      { color: var(--muted) !important; }
html[data-theme="light"] .tbl-cell.bold { color: var(--text) !important; }

/* Detail panel */
html[data-theme="light"] .detail-panel {
  background: var(--surface) !important;
  border-left-color: var(--border) !important;
}
html[data-theme="light"] .dp-title { color: var(--text) !important; }
html[data-theme="light"] .dp-close {
  background: var(--s2) !important;
  border-color: var(--border) !important;
  color: var(--muted) !important;
}
html[data-theme="light"] .dp-info-item { background: var(--s2) !important; }
html[data-theme="light"] .dp-info-label { color: var(--dim) !important; }
html[data-theme="light"] .dp-info-val   { color: var(--text) !important; }
html[data-theme="light"] .dp-section-hd { color: var(--dim) !important; border-bottom-color: var(--border) !important; }
html[data-theme="light"] .tl-name { color: var(--text) !important; }
html[data-theme="light"] .tl-desc { color: var(--muted) !important; }
html[data-theme="light"] .dp-btn {
  background: var(--s2) !important;
  border-color: var(--border) !important;
  color: var(--text) !important;
}

/* Quick actions */
html[data-theme="light"] .qa-item {
  background: var(--s2) !important;
  border-color: var(--border) !important;
}
html[data-theme="light"] .qa-label { color: var(--text) !important; }
html[data-theme="light"] .qa-sub   { color: var(--dim) !important; }

/* Forms */
html[data-theme="light"] .form-input,
html[data-theme="light"] .form-input-auth {
  background: var(--s2) !important;
  border-color: var(--bm) !important;
  color: var(--text) !important;
}
html[data-theme="light"] .form-label { color: var(--muted) !important; }

/* Delivery options */
html[data-theme="light"] .delivery-opt {
  border-color: var(--border) !important;
}
html[data-theme="light"] .delivery-opt:hover { background: var(--s2) !important; }
html[data-theme="light"] .delivery-name { color: var(--text) !important; }
html[data-theme="light"] .delivery-desc { color: var(--muted) !important; }

/* Payment section */
html[data-theme="light"] .pay-method {
  border-color: var(--border) !important;
}
html[data-theme="light"] .pay-method:hover { background: var(--s2) !important; }
html[data-theme="light"] .pay-name  { color: var(--muted) !important; }
html[data-theme="light"] .bank-opt  { border-color: var(--border) !important; }
html[data-theme="light"] .bank-name { color: var(--muted) !important; }
html[data-theme="light"] .card-icon-pill {
  background: var(--s2) !important;
  border-color: var(--border) !important;
  color: var(--muted) !important;
}
html[data-theme="light"] .promo-input {
  background: var(--s2) !important;
  border-color: var(--border) !important;
  color: var(--text) !important;
}
html[data-theme="light"] .promo-apply {
  background: var(--s3) !important;
  border-color: var(--border) !important;
  color: var(--text) !important;
}

/* Quote page panels */
html[data-theme="light"] .config-panel,
html[data-theme="light"] .ann-panel {
  background: var(--surface) !important;
  border-color: var(--border) !important;
}
html[data-theme="light"] .panel-hd { color: var(--text) !important; border-bottom-color: var(--border) !important; }
html[data-theme="light"] .file-card { background: var(--s2) !important; border-color: var(--border) !important; }
html[data-theme="light"] .mat-option { border-color: var(--border) !important; }
html[data-theme="light"] .mat-option:not(.selected) { background: var(--s2) !important; }
html[data-theme="light"] .svc-item  { border-bottom-color: var(--border) !important; }
html[data-theme="light"] .svc-label { color: var(--text) !important; }
html[data-theme="light"] .price-breakdown { background: var(--s2) !important; border-color: var(--border) !important; }
html[data-theme="light"] .p-row span { color: var(--muted) !important; }
html[data-theme="light"] .ann-card { background: var(--s2) !important; border-color: var(--border) !important; }
html[data-theme="light"] .ann-text { color: var(--text) !important; }
html[data-theme="light"] .ann-meta { color: var(--dim) !important; }

/* SVG viewer canvas always stays dark */
html[data-theme="light"] .viewer-area { background: #1a1a1e !important; }

/* Login page right panel */
html[data-theme="light"] .right-panel { background: var(--surface) !important; }
html[data-theme="light"] .tab-btn { color: var(--muted) !important; }
html[data-theme="light"] .tab-btn.active { color: var(--text) !important; }
html[data-theme="light"] .input-label { color: var(--muted) !important; }
html[data-theme="light"] .input-field {
  background: var(--s2) !important;
  border-color: var(--bm) !important;
  color: var(--text) !important;
}
html[data-theme="light"] .divider-line { background: var(--border) !important; }
html[data-theme="light"] .divider-text { color: var(--dim) !important; }
html[data-theme="light"] .sso-btn {
  background: var(--surface) !important;
  border-color: var(--bm) !important;
  color: var(--text) !important;
}

/* Toast */
html[data-theme="light"] #toast {
  background: #ffffff !important;
  border-color: var(--border) !important;
  color: var(--text) !important;
  box-shadow: 0 8px 32px rgba(0,0,0,.15) !important;
}

/* Banner */
html[data-theme="light"] .new-order-banner { background: rgba(249,115,22,.08) !important; }


/* ── LIGHT MODE: MISSING OVERRIDES (pricing + gallery + service breadcrumbs) ─ */
/* Pricing section — these are <div> and <span>, not heading tags */
html[data-theme="light"] .price-title  { color: var(--text) !important; }
html[data-theme="light"] .tier-price   { color: var(--text) !important; }
html[data-theme="light"] .tier-qty     { color: var(--muted) !important; }
html[data-theme="light"] .price-spec   { color: var(--muted) !important; }
html[data-theme="light"] .tier-row     { background: var(--surface-2) !important; }

/* How-it-works cards use --surface which becomes white; h3 covered by global rule */
html[data-theme="light"] .hiw-step     { background: var(--surface) !important; }
html[data-theme="light"] .hiw-step p   { color: var(--muted) !important; }
html[data-theme="light"] .hiw-tag      { color: var(--muted) !important; }

/* Service breadcrumb hover (service pages link proto3dp.css) */
html[data-theme="light"] .breadcrumb a:hover { color: var(--text) !important; }
html[data-theme="light"] .breadcrumb a       { color: var(--muted) !important; }

/* Gallery captions are on dark gradient overlay — keep white */
/* (no override needed — they're always on dark bg) */

/* Stat cells stay dark background, just ensure numbers/labels render */
html[data-theme="light"] .stat-num,
html[data-theme="light"] .stat-cell-val  { color: var(--accent) !important; }
html[data-theme="light"] .stat-cell-lbl  { color: var(--muted) !important; }

/* Upload CTA section text */
html[data-theme="light"] .upload-zone p  { color: var(--muted) !important; }

/* ── LIGHT MODE: QUOTE PAGE SPECIFIC ──────────────────── */
/* Logo text color in quote/portal app header */
html[data-theme="light"] .h-logo { color: var(--text) !important; }
html[data-theme="light"] .h-breadcrumb .curr { color: var(--text) !important; }

/* Viewer toolbar (always dark background — keep text light) */
html[data-theme="light"] .viewer-toolbar {
  background: #1a1a1a !important;
  border-bottom-color: #333 !important;
}

/* Quote left panel text */
html[data-theme="light"] .file-name   { color: var(--text) !important; }
html[data-theme="light"] .file-size   { color: var(--muted) !important; }
html[data-theme="light"] .dim-chip    { background: #eee !important; border-color: #ddd !important; color: var(--muted) !important; }
html[data-theme="light"] .dim-chip span { color: var(--text) !important; }
html[data-theme="light"] .mat-name-s  { color: var(--text) !important; }
html[data-theme="light"] .cp-label    { color: var(--dim) !important; }
html[data-theme="light"] .thick-select {
  background: var(--input-bg) !important; border-color: var(--border-mid) !important; color: var(--text) !important;
}
html[data-theme="light"] .svc-name   { color: var(--text) !important; }
html[data-theme="light"] .svc-cost   { color: var(--muted) !important; }
html[data-theme="light"] .p-row      { color: var(--text) !important; }
html[data-theme="light"] .p-total    { color: var(--text) !important; }

/* Annotation sidebar text */
html[data-theme="light"] .ann-panel { background: #fff !important; }
html[data-theme="light"] .panel-hd  { color: var(--text) !important; }
html[data-theme="light"] .ann-tool  { background: #f0f0f0 !important; border-color: #ddd !important; color: var(--text) !important; }
html[data-theme="light"] .ann-tool.active { background: rgba(249,115,22,.1) !important; }
html[data-theme="light"] .ann-empty { color: var(--dim) !important; }

/* Comment textarea in annotation panel */
html[data-theme="light"] textarea,
html[data-theme="light"] .comment-input {
  background: var(--input-bg) !important;
  border-color: var(--border-mid) !important;
  color: var(--text) !important;
}
html[data-theme="light"] textarea::placeholder { color: var(--dim) !important; }

/* Bottom status bar */
html[data-theme="light"] .status-bar {
  background: #1a1a1a !important;
  border-top-color: #333 !important;
}

/* h-btn in light mode */
html[data-theme="light"] .h-btn {
  background: #f0f0f0 !important;
  border-color: #ddd !important;
  color: var(--text) !important;
}
html[data-theme="light"] .h-btn:hover { background: #e8e8e8 !important; color: var(--text) !important; }
html[data-theme="light"] .h-btn.primary { background: var(--accent) !important; color: #fff !important; border-color: var(--accent) !important; }
html[data-theme="light"] .h-btn.saved   { background: rgba(34,197,94,.1) !important; border-color: #166534 !important; color: #166534 !important; }

/* User menu */
html[data-theme="light"] .user-menu { background: #fff !important; border-color: #e0e0e0 !important; }
html[data-theme="light"] .user-menu a,
html[data-theme="light"] .user-menu button { color: var(--text) !important; }
html[data-theme="light"] .user-menu .signout { color: #dc2626 !important; border-top-color: #e8e8e8 !important; }
html[data-theme="light"] .user-menu-email { color: var(--muted) !important; }

/* Portal file cards + upload zone */
html[data-theme="light"] .file-card { background: #f7f7f8 !important; border-color: #e0e0e0 !important; }
html[data-theme="light"] .file-card .file-name { color: var(--text) !important; }
html[data-theme="light"] .file-card .file-meta { color: var(--dim) !important; }
html[data-theme="light"] .upload-zone { background: #f7f7f8 !important; }
html[data-theme="light"] .upload-title { color: var(--text) !important; }
html[data-theme="light"] .upload-sub   { color: var(--dim) !important; }
html[data-theme="light"] .fmt-pill { background: #eee !important; color: var(--muted) !important; }

/* ── NAV DROPDOWN ── */
.has-drop { position: relative; }
.has-drop .dropdown {
  display: none; position: absolute; top: calc(100% + 14px); left: 50%;
  transform: translateX(-50%); list-style: none;
  background: var(--surface); border: 1px solid var(--border-mid);
  border-radius: 14px; padding: 10px 0; min-width: 230px;
  box-shadow: 0 24px 64px rgba(0,0,0,.55); z-index: 300;
}
.has-drop:hover .dropdown { display: block; }
.dropdown li a {
  display: block; padding: 10px 18px; font-size: 13px; font-weight: 500;
  color: var(--muted); transition: color .15s, background .15s;
}
.dropdown li a:hover { color: var(--text); background: var(--surface-2); }

/* ═══════════════════════════════════════════════════════
   FINAL CONTRAST & THEME PASS
   Kept last so legacy page CSS cannot win the cascade.
═══════════════════════════════════════════════════════ */
html[data-theme="light"] {
  --bg: #f1efe9 !important;
  --surface: #f8f6f0 !important;
  --surface-2: #e6e2d9 !important;
  --border: #c9c4b9 !important;
  --border-mid: #a9a398 !important;
  --text: #1b1b18 !important;
  --muted: #66635d !important;
  --dim: #837e74 !important;
  --s2: #e6e2d9 !important;
  --s3: #d9d4ca !important;
  --bm: #a9a398 !important;
  --chrome-bg: rgba(241,239,233,.92) !important;
  --input-bg: #fffdf7 !important;
  --card-hover: #fffdf7 !important;
  --accent-text: #c73a1f !important;
  /* App pages define bright status hues tuned for dark UI; deepen them on paper. */
  --green: #15803d;
  --yellow: #a16207;
  --blue: #1d4ed8;
  --red: #b91c1c;
  --purple: #9333ea;
  color-scheme: light;
}
html[data-theme="dark"] {
  --accent: #d13f23 !important;
  --bg: #1b1b18 !important;
  --surface: #23231f !important;
  --surface-2: #2d2c27 !important;
  --border: #46453e !important;
  --border-mid: #5b5950 !important;
  --text: #f2efe7 !important;
  --muted: #bbb6ab !important;
  --dim: #918c82 !important;
  --s2: #2d2c27 !important;
  --s3: #36352f !important;
  --bm: #5b5950 !important;
  --chrome-bg: rgba(27,27,24,.94) !important;
  --input-bg: #1b1b18 !important;
  --card-hover: #2d2c27 !important;
  --accent-text: #ff7a5c !important;
  color-scheme: dark;
}
html[data-theme] body { background: var(--bg) !important; color: var(--text) !important; }

/* Readable type on all paper/dark neutral surfaces. */
html[data-theme] :is(
  .section-title, .hiw-card h3, .why-card h3, .svc-card h3,
  .mat-card h3, .mat-name, .price-card h3, .factor-card h3,
  .proc-card h3, .rule-card h3, .spec-card h3, .rel-card h3,
  .upload-zone h3, .upload-title, .auth-title, .form-title,
  .login-title, .auth-card h1, .auth-card h2, .form-panel h1,
  .form-panel h2, .ob-title, .success-msg h3, .ob-success h3,
  .type-card .tc-title, .card h1, .card h2, .card h3,
  .stat-value, .summary-hd, .sum-total-label, .sum-total-val,
  .tbl-file-name, .dp-title, .section-title-sm
) { color: var(--text) !important; }

html[data-theme] :is(
  .section-sub, .hiw-card p, .why-card p, .svc-desc,
  .mat-sub, .price-card p, .factor-card p, .proc-card p,
  .rule-card p, .spec-note, .rel-sub, .upload-zone p,
  .upload-sub, .auth-sub, .form-sub, .stat-label, .tbl-cell,
  .detail-label, .sum-label
) { color: var(--muted) !important; }

html[data-theme] :is(
  .hiw-card, .why-card, .mat-card, .price-card, .factor-card,
  .proc-card, .rule-card, .spec-card, .rel-card, .upload-zone,
  .auth-card, .form-card, .type-card, .card, .stat-card,
  .summary-card, .quick-actions, .orders-table
) { background: var(--surface) !important; border-color: var(--border) !important; }

/* Intentional inverse regions retain light text in both themes. */
html[data-theme] :is(
  .hero:not(.page-hero), .svc-hero, .brand-panel, .cta-strip,
  .quote-cta, footer, .btn-accent, .btn-hero-p, .primary,
  .primary-btn, .checkout-btn, .mob-cta-main
) :is(h1,h2,h3,h4,p,span,strong) { color: #fffaf3 !important; }
html[data-theme] :is(.btn-accent, .btn-hero-p, .primary-btn, .checkout-btn, .mob-cta-main) { color: #fffaf3 !important; }

#fabtiv-theme-toggle {
  display: block !important;
  width: 68px !important;
  height: 36px !important;
  right: 22px !important;
  bottom: 22px !important;
  border-radius: 999px !important;
  outline: 1px solid var(--border-mid) !important;
  outline-offset: 3px;
}
#fabtiv-theme-toggle:focus-visible { outline: 3px solid var(--accent) !important; }

/* Removed emoji artwork must not leave decorative empty boxes behind. */
:is(.proc-icon, .cap-icon, .why-icon, .spec-icon, .rule-icon,
  .callout-icon, .rel-badge, .part-chip-icon, .app-chip-icon,
  .factor-icon, .upload-icon, .delivery-pincode-icon, .eta-icon,
  .tc-icon):empty,
:is(.trust-item, .security-row) > span:empty { display: none !important; }

/* Legacy emoji containers: remove the entire slot when no real icon exists. */
[class$="-icon"]:empty,
[class$="-badge"]:empty,
.icon:empty { display: none !important; margin: 0 !important; }

/* Homepage service cards are photographic inverse surfaces, not paper cards. */
html[data-theme] .svc-card .svc-body h3 {
  color: #fffaf3 !important;
  text-shadow: 0 1px 20px rgba(0,0,0,.45);
}
html[data-theme] .svc-card .svc-desc {
  color: rgba(255,250,243,.78) !important;
}
html[data-theme] .svc-card .svc-arrow { color: #ff8b70 !important; }
html[data-theme] .svc-card .svc-shade {
  background: linear-gradient(to top, rgba(12,12,10,.96) 0%, rgba(12,12,10,.52) 56%, rgba(12,12,10,.08) 100%) !important;
}

/* ═══════════════════════════════════════════════════════
   VISIBILITY PASS — both themes
   Fixes light-on-light / dark-on-dark text left by the
   dark-first page styles and the editorial overrides.
═══════════════════════════════════════════════════════ */

/* Dark islands: regions that stay dark in every theme (CAD viewer chrome,
   photographic heroes, footer, portal file/order modals). Re-scoping the
   palette here lets var(--text)/var(--muted) inside them resolve light. */
html[data-theme] :is(.viewer-toolbar, .status-bar, .fy-dark,
  #uploadModal, #previewModal, #orderDetailModal, #estDetailModal),
html[data-theme="light"] :is(.hero:not(.page-hero), .svc-hero, .brand-panel, footer) {
  --bg: #1b1b18;
  --surface: #23231f;
  --surface-2: #2d2c27;
  --border: #46453e;
  --border-mid: #5b5950;
  --text: #f2efe7;
  --muted: #bbb6ab;
  --dim: #918c82;
  --s2: #2d2c27;
  --s3: #36352f;
  --bm: #5b5950;
  --input-bg: #1b1b18;
  --card-hover: #2d2c27;
  --accent-text: #ff7a5c;
  color-scheme: dark;
}
html[data-theme] :is(.viewer-toolbar, .status-bar, .fy-dark),
html[data-theme="light"] :is(.hero:not(.page-hero), .svc-hero, .brand-panel) { color: var(--text); }

/* Footer is always dark: the wordmark must not pick up the light-mode #111. */
html[data-theme] footer .nav-logo { color: #f1efe9 !important; }

/* Secondary buttons sitting on the dark hero photo. */
html[data-theme] .hero:not(.page-hero) :is(.btn-hero-s, .btn-ghost) {
  color: #fffaf3 !important;
  border-color: rgba(255,250,243,.45) !important;
}
html[data-theme] .hero:not(.page-hero) :is(.btn-hero-s, .btn-ghost):hover {
  border-color: #fffaf3 !important;
  background: rgba(255,250,243,.08) !important;
}

/* Buttons inside the accent CTA band. */
html[data-theme] :is(.cta-strip, .quote-cta) :is(.btn-ghost, .btn-hero-s, .btn-outline) {
  color: #fffaf3 !important;
  border-color: rgba(255,250,243,.55) !important;
  background: transparent !important;
}
html[data-theme] :is(.cta-strip, .quote-cta) .btn-white {
  background: #fffaf3 !important;
  color: var(--accent) !important;
}
html[data-theme] :is(.cta-strip, .quote-cta) .btn-white :is(span, strong) { color: inherit !important; }

/* Stat strips: the grid paints --border as 1px gutters, so cells need a fill. */
.stats-inner > .stat { background: var(--surface) !important; }

/* Native select popups follow the theme (some pages hard-code dark options). */
html[data-theme] select option { background: var(--surface); color: var(--text); }
html[data-theme] :is(input, textarea)::placeholder { color: var(--dim); opacity: 1; }

/* Sidebar badges on the solid-accent hover/active row in dark mode. */
html[data-theme="dark"] .sb-item:is(:hover, .active) .sb-badge {
  background: rgba(0,0,0,.28) !important;
  color: #fffaf3 !important;
}

/* Accent-coloured small text: #d13f23 is too dark on the dark surfaces. */
html[data-theme="dark"] :is(
  .section-tag, .rule-val, .ftab.active, .stab.active, .tb-btn.active,
  .svc-item.checked .svc-name, .ann-tool.active .ann-tool-lbl, .file-ext,
  .pay-method.selected .pay-name, .upi-verify, .act-btn.accent,
  .dp-info-val.accent, .badge-t3, .mat-option.selected .mat-name-s,
  .badge-fabricating, .gal-mgr-tag, .fab-dot.active
) { color: var(--accent-text) !important; }

/* Hero eyebrows tinted with the accent sit on a dark, accent-washed hero. */
html[data-theme="dark"] .hero-eyebrow { --accent: var(--accent-text); }

/* Light mode: bright status/material chips designed for dark UI. */
html[data-theme="light"] :is(
  .chip-amber, .mat-chip.chip-br, .chip-pc, .mpill-machinable, .tag-industry,
  .badge-dfm-pending
) { color: #92400e !important; }
html[data-theme="light"] :is(
  .chip-green, .chip-wj, .mpill-strength, .tag-best, .tag-news, .td-ok,
  .winner-tag, .delivery-location, .est-lead, .est-row-val.disc,
  .price-row .disc, .qty-discount, .qty-discount *, .otp-sent-info,
  .otp-sent-info strong, .field-hint.valid, .ob-step.done .ob-step-label,
  .do-col h3, .badge-dfm-passed, .badge-delivered, .notify-pill
) { color: #166534 !important; }
html[data-theme="light"] :is(
  .mat-chip.chip-al, .chip-blue, .chip-cnc, .alloy-grade, .badge-t2, .badge-waterjet,
  .badge-wet, .badge-dim, .badge-shipped, .badge-paid, .fmt-step, .mpill-weld,
  .tag-material
) { color: #1d4ed8 !important; }
html[data-theme="light"] :is(
  .mat-chip.chip-cu, .chip-laser, .fmt-dxf, .mpill-corr, .badge-laser, .badge-powder,
  .tag-good, .ob-field label .req, .ob-step.active .ob-step-label,
  .ob-success .badge-pill, .otp-resend a, .type-card.selected .tc-title,
  .badge-fabricating, .gal-mgr-tag
) { color: #9a3412 !important; }
html[data-theme="light"] :is(
  .chip-bend, .chip-sp, .fmt-pdf, .mpill-form, .tag-premium, .badge-anodize,
  .badge-estimate, .badge-dfm-review
) { color: #7e22ce !important; }
html[data-theme="light"] :is(
  .mpill-heat, .dont-col h3, .td-bad, .field-err, .field-hint.invalid,
  .pin-status.err, .delivery-error, .badge-flag, .admin-badge,
  .badge-dfm-failed, .badge-cancelled, #admin-gate .gate-err
) { color: #b91c1c !important; }
html[data-theme="light"] :is(.chip-ms, .mat-chip.chip-ss) { color: #475569 !important; }

/* ── NAV: keep a single row between the tablet breakpoint and wide desktop ── */
.nav-links a, .nav-ctas a, .nav-actions a, .nav-logo { white-space: nowrap; }
@media (min-width: 861px) and (max-width: 1240px) {
  nav:not(.mob-nav):not(.sb-nav):not(.guide-nav) {
    padding-left: 24px !important;
    padding-right: 24px !important;
    gap: 16px;
  }
  .nav-links { gap: 18px !important; }
  .nav-links a { font-size: 11px !important; letter-spacing: .03em !important; }
  :is(.nav-ctas, .nav-actions) { gap: 8px !important; }
  :is(.nav-ctas, .nav-actions) a { padding-left: 12px !important; padding-right: 12px !important; font-size: 12px !important; }
}
@media (min-width: 861px) and (max-width: 1040px) {
  .nav-links { gap: 14px !important; }
}

/* ── MOBILE: wide data tables scroll inside their block, not the page ── */
@media (max-width: 760px) {
  :is(.max-w, .article-body, .wrap, .content, section) > table {
    display: block;
    max-width: 100%;
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
  }
  .svc-hero { overflow: hidden !important; }
}

/* ── Centred section headers: the 11ch heading measure must be centred too,
   otherwise the title drifts left of its eyebrow and subtitle. ── */
:is([style*="text-align:center"], [style*="text-align: center"]) > .section-title {
  margin-left: auto !important;
  margin-right: auto !important;
}
@media (min-width: 761px) {
  .sh.c > .section-title { margin-left: auto !important; margin-right: auto !important; }
}