
/* NAB MACHINES v10 fixes: working search/translation, stable image zoom, mobile header */
body.modal-open { overflow: hidden !important; }
.topbar { z-index: 1000 !important; }
.header-tool-btn[data-lang-toggle], .header-tool-btn[data-site-search-open] {
  border: 0 !important;
  min-width: 48px !important;
  min-height: 44px !important;
  padding: 10px 15px !important;
  border-radius: 999px !important;
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  gap: 8px !important;
  font-weight: 1000 !important;
  cursor: pointer !important;
  position: relative !important;
  z-index: 1002 !important;
  white-space: nowrap !important;
  box-shadow: 0 12px 30px rgba(15,97,108,.15) !important;
}
.header-tool-btn[data-lang-toggle] { background: linear-gradient(135deg,var(--teal),#168897) !important; color:#fff !important; }
.header-tool-btn[data-site-search-open] { background: linear-gradient(135deg,var(--gold),#f2d68f) !important; color:#13363b !important; }
.header-tool-btn:hover { transform: translateY(-2px) !important; filter: brightness(1.04) !important; }
.category-card .link-more {
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  gap: 9px !important;
  margin-top: 14px !important;
  padding: 13px 22px !important;
  min-height: 48px !important;
  border-radius: 999px !important;
  background: linear-gradient(135deg,var(--teal),#168897) !important;
  color: #fff !important;
  font-weight: 1000 !important;
  text-decoration: none !important;
  border: 1px solid rgba(215,180,112,.65) !important;
  box-shadow: 0 18px 44px rgba(15,97,108,.25) !important;
}
.category-card .link-more::after { content:'←'; font-weight:1000; }
html[dir="ltr"] .category-card .link-more::after { content:'→'; }
.category-card .link-more:hover { background: linear-gradient(135deg,#0b515b,var(--teal)) !important; transform: translateY(-3px) !important; }

.explain-grid-v10, .explain-grid {
  display: grid !important;
  grid-template-columns: repeat(2,minmax(0,1fr)) !important;
  gap: 28px !important;
  align-items: stretch !important;
}
.explain-card-v10, .explain-card {
  position: relative !important;
  overflow: hidden !important;
  border-radius: 32px !important;
  border: 1px solid rgba(15,97,108,.18) !important;
  background: linear-gradient(180deg,#fff 0%,#f6fcfc 100%) !important;
  box-shadow: 0 24px 76px rgba(15,97,108,.14) !important;
  cursor: zoom-in !important;
  transition: transform .22s ease, box-shadow .22s ease, border-color .22s ease !important;
}
.explain-card-v10:hover, .explain-card:hover { transform: translateY(-5px) !important; border-color: rgba(215,180,112,.72) !important; box-shadow: 0 32px 90px rgba(15,97,108,.22) !important; }
.explain-card-v10::before, .explain-card::before {
  content:'' !important;
  position:absolute !important;
  inset:0 0 auto 0 !important;
  height:5px !important;
  background:linear-gradient(90deg,var(--teal),var(--gold),#68c0d8) !important;
  z-index:3 !important;
}
.explain-card-v10 img, .explain-card img {
  display: block !important;
  width: 100% !important;
  height: clamp(340px, 35vw, 540px) !important;
  object-fit: contain !important;
  object-position: center !important;
  padding: 24px !important;
  background: radial-gradient(circle at 18% 15%, rgba(215,180,112,.18), transparent 30%), linear-gradient(135deg,#f9fdfd,#eef8f7) !important;
}
.technical-img img { height: auto !important; min-height: 300px !important; max-height: none !important; }
.explain-card-v10 h3, .explain-card h3 {
  position: relative !important;
  z-index: 4 !important;
  margin: 0 !important;
  padding: 18px 20px !important;
  background: rgba(255,255,255,.96) !important;
  border-top: 1px solid rgba(15,97,108,.12) !important;
  color: var(--teal) !important;
  font-weight: 1000 !important;
  line-height: 1.65 !important;
}
.explain-card h3::after { content: none !important; }
.zoom-badge-v10 {
  position: absolute !important;
  top: 16px !important;
  inset-inline-end: 16px !important;
  z-index: 5 !important;
  width: 46px !important;
  height: 46px !important;
  border-radius: 50% !important;
  display: grid !important;
  place-items: center !important;
  background: linear-gradient(135deg,var(--teal),#168897) !important;
  color: #fff !important;
  box-shadow: 0 15px 38px rgba(15,97,108,.32) !important;
  pointer-events: none !important;
}
.zoomable-image-v10 { cursor: zoom-in !important; }
.zoomable-image-v10:focus { outline: 3px solid rgba(215,180,112,.8) !important; outline-offset: 4px !important; border-radius: 18px !important; }

.site-search-v10, .image-lightbox-v10 {
  position: fixed !important;
  inset: 0 !important;
  z-index: 100000 !important;
  display: none !important;
  background: rgba(2,16,19,.78) !important;
  backdrop-filter: blur(12px) !important;
  padding: 22px !important;
}
.site-search-v10.show, .image-lightbox-v10.show { display: flex !important; }
.site-search-v10 { align-items: flex-start !important; justify-content: center !important; overflow: auto !important; }
.search-panel-v10 {
  width: min(960px,100%) !important;
  margin-top: 44px !important;
  max-height: 88vh !important;
  overflow: hidden !important;
  display: flex !important;
  flex-direction: column !important;
  border-radius: 30px !important;
  background: #fff !important;
  border: 1px solid rgba(255,255,255,.35) !important;
  box-shadow: 0 36px 110px rgba(0,0,0,.35) !important;
}
.search-head-v10 { display:flex !important; align-items:flex-start !important; justify-content:space-between !important; gap:16px !important; padding:20px 24px !important; border-bottom:1px solid var(--line) !important; background:linear-gradient(90deg,rgba(15,97,108,.10),rgba(215,180,112,.15)) !important; }
.search-head-v10 h3 { margin:0 0 4px !important; color:var(--teal) !important; font-size:1.42rem !important; }
.search-head-v10 p { margin:0 !important; color:var(--muted) !important; line-height:1.65 !important; }
.search-close-v10, .lightbox-close-v10 {
  border:0 !important; border-radius:50% !important; background:var(--teal) !important; color:#fff !important; width:44px !important; height:44px !important; display:grid !important; place-items:center !important; font-size:1.35rem !important; cursor:pointer !important; flex:0 0 auto !important;
}
.search-form-v10 { display:flex !important; gap:12px !important; padding:18px 24px !important; border-bottom:1px solid var(--line) !important; }
.search-form-v10 input { flex:1 !important; border:1px solid var(--line) !important; border-radius:999px !important; padding:15px 20px !important; font-size:1.02rem !important; outline:0 !important; background:#f8fcfc !important; color:var(--ink) !important; }
.search-form-v10 input:focus { border-color:var(--teal) !important; background:#fff !important; box-shadow:0 0 0 4px rgba(15,97,108,.08) !important; }
.search-form-v10 button { border:0 !important; border-radius:999px !important; padding:14px 24px !important; background:linear-gradient(135deg,var(--teal),#168897) !important; color:#fff !important; font-weight:1000 !important; cursor:pointer !important; }
.search-results-v10 { padding:16px 24px 24px !important; display:grid !important; gap:12px !important; overflow:auto !important; max-height:56vh !important; }
.result-v10 { display:grid !important; grid-template-columns:108px 1fr !important; gap:16px !important; align-items:center !important; padding:13px !important; border:1px solid var(--line) !important; border-radius:20px !important; background:#fff !important; transition:.18s ease !important; }
.result-v10:hover { transform: translateY(-2px) !important; box-shadow:0 18px 48px rgba(15,97,108,.15) !important; }
.result-v10 img { width:108px !important; height:76px !important; object-fit:contain !important; background:#f1faf9 !important; border-radius:14px !important; padding:5px !important; }
.result-v10 h4 { margin:0 0 5px !important; direction:ltr !important; text-align:left !important; color:var(--ink) !important; }
.result-v10 p { margin:0 0 6px !important; color:var(--muted) !important; font-size:.92rem !important; line-height:1.5 !important; }
.result-v10 span { color:var(--teal) !important; font-weight:1000 !important; }
.empty-v10 { text-align:center !important; color:var(--muted) !important; font-weight:800 !important; padding:34px 12px !important; }

.image-lightbox-v10 { align-items: center !important; justify-content: center !important; }
.lightbox-panel-v10 {
  width: min(1440px, 98vw) !important;
  height: min(92vh, 980px) !important;
  max-height: 96vh !important;
  display: flex !important;
  flex-direction: column !important;
  overflow: hidden !important;
  border-radius: 32px !important;
  background: #fff !important;
  border: 1px solid rgba(255,255,255,.35) !important;
  box-shadow: 0 40px 125px rgba(0,0,0,.45) !important;
}
.lightbox-head-v10 { display:flex !important; align-items:center !important; justify-content:space-between !important; gap:14px !important; padding:14px 18px !important; border-bottom:1px solid var(--line) !important; background:linear-gradient(90deg,rgba(15,97,108,.10),rgba(215,180,112,.15)) !important; }
.lightbox-head-v10 h3 { margin:0 !important; color:var(--teal) !important; font-size:clamp(1rem,1.7vw,1.34rem) !important; line-height:1.45 !important; flex:1 1 auto !important; }
.zoom-tools-v10 { display:flex !important; align-items:center !important; justify-content:flex-end !important; gap:8px !important; flex-wrap:wrap !important; }
.zoom-tools-v10 button { border:1px solid var(--line) !important; border-radius:999px !important; background:#fff !important; color:var(--teal) !important; padding:8px 11px !important; min-width:58px !important; font-weight:1000 !important; cursor:pointer !important; }
.zoom-tools-v10 button.active, .zoom-tools-v10 button:hover { background:linear-gradient(135deg,var(--gold),#f2d68f) !important; color:#13363b !important; }
.lightbox-stage-v10 { position:relative !important; flex:1 1 auto !important; display:grid !important; place-items:center !important; overflow:hidden !important; min-height:280px !important; padding:18px !important; background:radial-gradient(circle at 12% 12%, rgba(215,180,112,.16), transparent 32%), linear-gradient(135deg,#f8fdfd,#edf7f6) !important; }
.lightbox-stage-v10.zoomed { overflow:auto !important; place-items:start center !important; cursor:grab !important; }
.lightbox-stage-v10.dragging { cursor:grabbing !important; }
.lightbox-stage-v10 img { max-width:100% !important; max-height:78vh !important; object-fit:contain !important; border-radius:18px !important; background:#fff !important; box-shadow:0 20px 60px rgba(0,0,0,.18) !important; transition:width .18s ease, max-height .18s ease !important; }
.lightbox-stage-v10.zoomed img { margin:42px auto !important; max-width:none !important; max-height:none !important; }
.lightbox-arrow-v10 { position:absolute !important; top:50% !important; transform:translateY(-50%) !important; z-index:5 !important; width:50px !important; height:50px !important; border:0 !important; border-radius:50% !important; background:rgba(15,97,108,.96) !important; color:#fff !important; font-size:1.8rem !important; cursor:pointer !important; box-shadow:0 15px 36px rgba(15,97,108,.25) !important; }
.lightbox-arrow-v10.prev { inset-inline-start:16px !important; }
.lightbox-arrow-v10.next { inset-inline-end:16px !important; }

html[data-theme="dark"] .search-panel-v10,
html[data-theme="dark"] .lightbox-panel-v10,
html[data-theme="dark"] .result-v10,
html[data-theme="dark"] .explain-card-v10,
html[data-theme="dark"] .explain-card-v10 h3 { background:#0b252a !important; color:var(--ink) !important; border-color:var(--line) !important; }
html[data-theme="dark"] .search-form-v10 input { background:#102f35 !important; color:var(--ink) !important; border-color:var(--line) !important; }
html[data-theme="dark"] .lightbox-stage-v10,
html[data-theme="dark"] .explain-card-v10 img { background:linear-gradient(135deg,#071c20,#0b252a) !important; }
html[data-theme="dark"] .zoom-tools-v10 button { background:#102f35 !important; color:var(--ink) !important; border-color:var(--line) !important; }
html[data-theme="dark"] .zoom-tools-v10 button.active,
html[data-theme="dark"] .zoom-tools-v10 button:hover { background:linear-gradient(135deg,var(--gold),#f2d68f) !important; color:#13363b !important; }
html[dir="ltr"] body { direction:ltr !important; }
html[dir="ltr"] .slide { direction:ltr !important; }
html[dir="ltr"] .pro-table th { text-align:left !important; }
html[dir="ltr"] .category-card p { text-align:left !important; }

@media (max-width: 980px) {
  .nav { min-height:70px !important; gap:8px !important; }
  .logo { min-width:0 !important; gap:8px !important; }
  .logo img { width:124px !important; }
  .logo span { display:none !important; }
  .nav-actions { gap:7px !important; margin-inline-start:auto !important; }
  .topbar .nav-actions .btn-primary,
  .topbar .nav-actions .btn-outline { display:none !important; }
  .header-tool-btn[data-lang-toggle], .header-tool-btn[data-site-search-open] { width:44px !important; min-width:44px !important; height:44px !important; min-height:44px !important; padding:0 !important; }
  .header-tool-btn .label { display:none !important; }
  .mobile-toggle { flex:0 0 auto !important; display:inline-flex !important; align-items:center !important; justify-content:center !important; width:44px !important; height:44px !important; padding:0 !important; }
  .menu { top:70px !important; z-index:1001 !important; max-height:calc(100vh - 70px) !important; overflow:auto !important; }
  .menu.show { display:flex !important; flex-direction:column !important; align-items:stretch !important; gap:6px !important; }
}
@media (max-width: 760px) {
  .container { width:calc(100% - 20px) !important; }
  .explain-grid-v10, .explain-grid { grid-template-columns:1fr !important; gap:18px !important; }
  .explain-card-v10 img, .explain-card img { height:clamp(280px,74vw,430px) !important; padding:15px !important; }
  .technical-img img { min-height:230px !important; }
  .category-card .link-more { width:100% !important; }
  .site-search-v10, .image-lightbox-v10 { padding:8px !important; }
  .search-panel-v10 { margin-top:30px !important; border-radius:22px !important; }
  .search-head-v10 { padding:16px !important; }
  .search-form-v10 { flex-direction:column !important; padding:15px !important; }
  .search-results-v10 { padding:12px 15px 18px !important; }
  .result-v10 { grid-template-columns:76px 1fr !important; gap:12px !important; }
  .result-v10 img { width:76px !important; height:58px !important; }
  .lightbox-panel-v10 { width:100% !important; height:96vh !important; border-radius:22px !important; }
  .lightbox-head-v10 { padding:12px !important; flex-wrap:wrap !important; }
  .zoom-tools-v10 { order:3 !important; width:100% !important; justify-content:center !important; }
  .zoom-tools-v10 button { min-width:52px !important; padding:7px 8px !important; font-size:.82rem !important; }
  .lightbox-stage-v10 { padding:10px !important; }
  .lightbox-stage-v10 img { max-height:70vh !important; }
  .lightbox-arrow-v10 { width:40px !important; height:40px !important; font-size:1.45rem !important; }
  .lightbox-arrow-v10.prev { inset-inline-start:7px !important; }
  .lightbox-arrow-v10.next { inset-inline-end:7px !important; }
}
@media (max-width: 390px) {
  .logo img { width:112px !important; }
  .nav { gap:6px !important; }
  .mobile-toggle, .header-tool-btn[data-lang-toggle], .header-tool-btn[data-site-search-open] { width:40px !important; height:40px !important; min-width:40px !important; min-height:40px !important; }
}
