.page-content {
  padding-top: 10px;
  padding-right: 25px;
  padding-bottom: 48px;
  padding-left: 25px;
  gap: 4px;
  max-width: 100%;
  min-width: 0;
  overflow-x: hidden;
}

body {
  overflow-x: hidden;
}

.layout-wrapper,
.main-content {
  min-width: 0;
  overflow-x: hidden;
}

.tool-host-heading {
  position: absolute !important;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
  border: 0;
}

@media (max-width: 1024px) {
  body,
  .layout-wrapper,
  .main-content,
  .page-content {
    overflow-x: visible;
  }
  
  .page-content {
    padding-left: 0;
    padding-right: 0;
  }}

.tool-host-shell-direct .tool-direct-root.cat-text-content { --tool-link: #2f2a9d; --tool-border: #c4c1ff; --tool-bg: #f2f1ff; --tool-active-a: #4f46e5; --tool-menu-border: #c4c1ff; --tool-menu-bg: #f5f4ff; --tool-active-shadow: rgba(79, 70, 229, 0.28); --tool-scroll-track: #e6e4ff; }
.tool-host-shell-direct .tool-direct-root.cat-data-conversion { --tool-link: #0f6a4a; --tool-border: #9fe9cb; --tool-bg: #ecfbf5; --tool-active-a: #10b981; --tool-menu-border: #9fe9cb; --tool-menu-bg: #effdf7; --tool-active-shadow: rgba(16, 185, 129, 0.28); --tool-scroll-track: #ddf7ec; }
.tool-host-shell-direct .tool-direct-root.cat-encoding-security { --tool-link: #8a1d58; --tool-border: #f7b3d2; --tool-bg: #fff1f8; --tool-active-a: #ec4899; --tool-menu-border: #f7b3d2; --tool-menu-bg: #fff5fa; --tool-active-shadow: rgba(236, 72, 153, 0.28); --tool-scroll-track: #ffe3f1; }
.tool-host-shell-direct .tool-direct-root.cat-generators { --tool-link: #7a4a00; --tool-border: #f6cf8a; --tool-bg: #fff7e6; --tool-active-a: #f59e0b; --tool-menu-border: #f6cf8a; --tool-menu-bg: #fff9ec; --tool-active-shadow: rgba(245, 158, 11, 0.28); --tool-scroll-track: #ffedc8; }
.tool-host-shell-direct .tool-direct-root.cat-productivity { --tool-link: #1e4fa3; --tool-border: #a9c9ff; --tool-bg: #eef5ff; --tool-active-a: #3b82f6; --tool-menu-border: #a9c9ff; --tool-menu-bg: #f2f7ff; --tool-active-shadow: rgba(59, 130, 246, 0.28); --tool-scroll-track: #ddeaff; }
.tool-host-shell-direct .tool-direct-root.cat-finance-business { --tool-link: #0b5f57; --tool-border: #8fe3da; --tool-bg: #ebfbf8; --tool-active-a: #14b8a6; --tool-menu-border: #8fe3da; --tool-menu-bg: #eefcf9; --tool-active-shadow: rgba(20, 184, 166, 0.28); --tool-scroll-track: #d9f5f1; }
.tool-host-shell-direct .tool-direct-root.cat-electronics-embedded { --tool-link: #186a39; --tool-border: #9ce7b7; --tool-bg: #ecfbf1; --tool-active-a: #22c55e; --tool-menu-border: #9ce7b7; --tool-menu-bg: #f0fcf4; --tool-active-shadow: rgba(34, 197, 94, 0.28); --tool-scroll-track: #dcf7e6; }
.tool-host-shell-direct .tool-direct-root.cat-mechanical-manufacturing { --tool-link: #5a2590; --tool-border: #d9b4fb; --tool-bg: #f8efff; --tool-active-a: #a855f7; --tool-menu-border: #d9b4fb; --tool-menu-bg: #faf2ff; --tool-active-shadow: rgba(168, 85, 247, 0.28); --tool-scroll-track: #eddcff; }
.tool-host-shell-direct .tool-direct-root.cat-gis-mapping { --tool-link: #0a5a67; --tool-border: #89e3f2; --tool-bg: #eafcff; --tool-active-a: #06b6d4; --tool-menu-border: #89e3f2; --tool-menu-bg: #effdff; --tool-active-shadow: rgba(6, 182, 212, 0.28); --tool-scroll-track: #d9f7fc; }
.tool-host-shell-direct .tool-direct-root.cat-engineering { --tool-link: #8a3c00; --tool-border: #ffc59f; --tool-bg: #fff3eb; --tool-active-a: #f97316; --tool-menu-border: #ffc59f; --tool-menu-bg: #fff6f0; --tool-active-shadow: rgba(249, 115, 22, 0.28); --tool-scroll-track: #ffe5d5; }
.tool-host-shell-direct .tool-direct-root.cat-seo { --tool-link: #84112b; --tool-border: #f6a8bd; --tool-bg: #fff0f4; --tool-active-a: #e11d48; --tool-menu-border: #f6a8bd; --tool-menu-bg: #fff4f7; --tool-active-shadow: rgba(225, 29, 72, 0.28); --tool-scroll-track: #ffe0e9; }
.tool-host-shell-direct .tool-direct-root.cat-fun { --tool-link: #0a5678; --tool-border: #97dcfa; --tool-bg: #ebf9ff; --tool-active-a: #0ea5e9; --tool-menu-border: #97dcfa; --tool-menu-bg: #f0fbff; --tool-active-shadow: rgba(14, 165, 233, 0.28); --tool-scroll-track: #ddf4ff; }

.tool-host-shell {
  background: var(--bg-card);
  border: 1px solid var(--border-color);
  border-radius: 16px;
  overflow: hidden;
  box-shadow: var(--shadow-sm);
  max-width: 100%;
  min-width: 0;
}

.tool-host-frame {
  display: block;
  width: 100%;
  min-height: clamp(760px, calc(100vh - 180px), 1100px);
  border: 0;
  background: transparent;
  overflow: hidden;
}

.tool-host-shell-direct {
  background: #fff;
}

.tool-host-shell-direct .tool-direct-root {
  background: transparent !important;
}

.tool-host-shell-direct .io-tool-about,
.tool-host-shell-direct .tool-description {
  background: transparent;
  padding: 16px 20px;
}

.tool-host-shell-direct .io-tool-about ul,
.tool-host-shell-direct .tool-description ul {
  margin: 0 0 8px 1.5rem;
  padding: 0;
}

body.dark-theme .tool-host-shell-direct {
  background: #0f1626;
}

.related-tools-shell {
  margin-top: 16px;
  max-width: 100%;
  min-width: 0;
}

.related-tools-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 10px;
}

.related-tools-head h2 {
  margin: 0;
  color: var(--text-main);
  font-size: 1.05rem;
  font-weight: 700;
  line-height: 1.3;
}

.related-tools-shell .tools-grid {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 14px;
  max-width: 100%;
  min-width: 0;
}

.related-tools-shell .tool-card {
  background-color: var(--bg-card);
  border: 1px solid var(--border-color);
  border-radius: 14px;
  padding: 16px 18px;
  transition: all 0.2s ease;
  display: flex;
  flex-direction: row;
  align-items: center;
  gap: 14px;
  text-decoration: none;
  min-width: 0;
}

.related-tools-shell .tool-card:hover {
  background-color: var(--bg-card-hover);
  border-color: var(--primary);
  box-shadow: var(--shadow-sm);
  transform: translateY(-1px);
}

.related-tools-shell .tool-card-icon {
  width: 40px;
  height: 40px;
  min-width: 40px;
  border-radius: 10px;
  background: rgba(79, 70, 229, 0.1);
  color: var(--primary);
  display: flex;
  align-items: center;
  justify-content: center;
}

.related-tools-shell .tool-card-text {
  display: flex;
  flex-direction: column;
  gap: 2px;
  overflow: hidden;
  min-width: 0;
}

.related-tools-shell .tool-card h3 {
  font-size: 0.9rem;
  font-weight: 600;
  color: var(--text-main);
  margin: 0;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.related-tools-shell .tool-card p {
  font-size: 0.8rem;
  color: var(--text-muted);
  margin: 0;
  line-height: 1.4;
  display: -webkit-box;
  -webkit-line-clamp: 1;
  -webkit-box-orient: vertical;
  overflow: hidden;
}

@media (max-width: 1180px) {
  .related-tools-shell .tools-grid {
    grid-template-columns: repeat(3, minmax(0, 1fr));
  }
}

@media (max-width: 960px) {
  .related-tools-shell .tools-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}

@media (max-width: 720px) {
  .related-tools-shell {
    padding-inline: 14px;
  }

  .related-tools-shell .tools-grid {
    grid-template-columns: repeat(1, minmax(0, 1fr));
  }
}

/* ── Breadcrumb ─────────────────────────────────────────────── */
.tool-breadcrumb {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 4px 6px;
  font-size: 0.8rem;
  color: var(--text-muted);
  margin-bottom: 4px;
  line-height: 1.4;
}

.tool-breadcrumb a {
  color: var(--text-muted);
  text-decoration: none;
  transition: color 0.15s ease;
}

.tool-breadcrumb a:hover {
  color: var(--primary);
  text-decoration: underline;
}

.tool-breadcrumb .bc-sep {
  color: var(--text-muted);
  font-size: 0.85rem;
  user-select: none;
  flex-shrink: 0;
}

.tool-breadcrumb .bc-current {
  color: var(--text-main);
  font-weight: 600;
}

@media (max-width: 1024px) {
  .tool-breadcrumb {
    padding-left: 14px;
    padding-right: 14px;
  }
}

/* ── Share Button ──────────────────────────────────────── */
.tool-share-wrap {
  position: relative;
  display: inline-flex;
  align-items: center;
}

.tool-share-btn {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 6px 14px;
  border-radius: 8px;
  border: 1px solid var(--primary);
  background: var(--bg-card);
  color: var(--primary);
  font-size: 0.83rem;
  font-weight: 600;
  cursor: pointer;
  transition: all 0.18s ease;
  white-space: nowrap;
  font-family: inherit;
  line-height: 1;
}

.tool-share-btn:hover {
  background: var(--primary);
  color: #fff;
  box-shadow: 0 4px 12px var(--primary-glow);
}

.tool-share-btn svg {
  width: 14px;
  height: 14px;
  flex-shrink: 0;
}

.tool-share-dropdown {
  position: absolute;
  top: calc(100% + 8px);
  right: 0;
  min-width: 210px;
  background: var(--bg-card);
  border: 1px solid var(--border-color);
  border-radius: 14px;
  box-shadow: 0 12px 32px rgba(0,0,0,0.13), 0 2px 8px rgba(0,0,0,0.07);
  padding: 6px;
  z-index: 9999;
  display: none;
  flex-direction: column;
  gap: 2px;
  animation: shareDropIn 0.15s cubic-bezier(0.16,1,0.3,1);
}

@keyframes shareDropIn {
  from { opacity: 0; transform: translateY(-6px) scale(0.97); }
  to   { opacity: 1; transform: translateY(0) scale(1); }
}

.tool-share-dropdown.open {
  display: flex;
}

.tool-share-dropdown a,
.tool-share-dropdown button {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 9px 12px;
  border-radius: 9px;
  border: none;
  background: transparent;
  color: var(--text-main);
  font-size: 0.87rem;
  font-weight: 500;
  cursor: pointer;
  text-decoration: none;
  transition: background 0.13s ease, color 0.13s ease;
  width: 100%;
  text-align: left;
  font-family: inherit;
  line-height: 1.3;
}

.tool-share-dropdown a:hover,
.tool-share-dropdown button:hover {
  background: var(--bg-main);
  color: var(--primary);
}

.tool-share-dropdown svg {
  width: 17px;
  height: 17px;
  flex-shrink: 0;
}

.tool-share-divider {
  height: 1px;
  background: var(--border-color);
  margin: 4px 8px;
}

/* ── Favorite Button ──────────────────────────────────────── */
.tool-fav-btn {
  position: absolute;
  top: 20px;
  right: 20px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 44px;
  height: 44px;
  padding: 0;
  border-radius: 8px;
  border: 1px solid #fbbf24 !important;
  background: rgba(251, 191, 36, 0.04) !important;
  color: #fbbf24 !important;
  cursor: pointer;
  transition: all 0.18s ease;
  flex-shrink: 0;
  z-index: 10;
}

.tool-fav-btn:hover {
  background: rgba(251, 191, 36, 0.15) !important;
  box-shadow: 0 2px 8px rgba(251, 191, 36, 0.12) !important;
}

.tool-fav-btn.is-fav {
  background: rgba(251, 191, 36, 0.15) !important;
}

.tool-fav-btn.is-fav:hover {
  background: rgba(251, 191, 36, 0.22) !important;
}

.tool-fav-btn svg {
  width: 22px;
  height: 22px;
  display: block;
  stroke: #fbbf24 !important;
  color: #fbbf24 !important;
}

.tool-fav-btn.is-fav svg {
  fill: #fbbf24 !important;
}

/* item default text — neutral, icon carries the brand colour */
.share-copy-btn,
.share-item-x,
.share-item-li,
.share-item-wa { color: var(--text-main); }

/* brand-coloured icons (always) */
.share-copy-btn svg { color: var(--primary); }
.share-item-x   svg { color: #000; }
.share-item-li  svg { color: #0a66c2; }
.share-item-wa  svg { color: #25d366; }
body.dark-theme .share-item-x svg { color: #e5e7eb; }

/* brand-tinted hover (overrides the generic hover rule) */
.share-copy-btn:hover { background: rgba(79,70,229,0.08)  !important; color: var(--primary) !important; }
.share-item-x:hover   { background: rgba(0,0,0,0.06)      !important; color: #000          !important; }
.share-item-li:hover  { background: rgba(10,102,194,0.09) !important; color: #0a66c2       !important; }
.share-item-wa:hover  { background: rgba(37,211,102,0.09) !important; color: #18a74a       !important; }

/* dark-mode X hover */
body.dark-theme .share-item-x:hover { background: rgba(255,255,255,0.06) !important; color: #e5e7eb !important; }
body.dark-theme .share-item-wa:hover { color: #25d366 !important; }


@media (max-width: 1024px) {
  .tool-share-btn span { display: none; }
  .tool-share-btn { padding: 6px 8px; }
  .tool-share-dropdown { right: auto; left: 0; }
}