:root {
  color-scheme: light;
  --bg: #f6f8fb;
  --surface: #ffffff;
  --surface-soft: #eef6f3;
  --ink: #18212f;
  --muted: #5f6d7c;
  --line: #dbe3ea;
  --brand: #0c7c77;
  --brand-dark: #095f5b;
  --accent: #b45309;
  --blue: #2563eb;
  --danger: #b42318;
  --shadow: 0 18px 42px rgba(20, 31, 43, 0.08);
  font-family: Inter, ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
}

* {
  box-sizing: border-box;
}

[hidden] {
  display: none !important;
}

body {
  margin: 0;
  background: var(--bg);
  color: var(--ink);
  line-height: 1.6;
}

a {
  color: var(--brand-dark);
  text-decoration: none;
}

a:hover {
  text-decoration: underline;
}

.shell {
  width: min(1120px, calc(100% - 40px));
  margin: 0 auto;
}

.narrow {
  width: min(820px, calc(100% - 40px));
}

.site-header {
  position: sticky;
  top: 0;
  z-index: 10;
  background: rgba(255, 255, 255, 0.92);
  border-bottom: 1px solid var(--line);
  backdrop-filter: blur(14px);
}

.header-inner {
  min-height: 64px;
  display: grid;
  grid-template-columns: auto minmax(0, 1fr) auto auto;
  align-items: center;
  gap: 16px;
}

.brand {
  display: inline-flex;
  align-items: center;
  gap: 12px;
  color: var(--ink);
  flex: 0 0 auto;
  min-width: 0;
}

.brand:hover {
  text-decoration: none;
}

.brand-logo {
  line-height: 0;
}

.brand-logo-frame {
  display: block;
  position: relative;
  width: 138px;
  height: 42px;
  overflow: hidden;
}

.brand-logo-image {
  display: block;
  position: absolute;
  left: -31px;
  top: -42px;
  width: 197px;
  max-width: none;
  height: auto;
}

.brand-mark {
  display: block;
  width: 38px;
  height: 38px;
  overflow: visible;
  border-radius: 0;
  background: transparent;
}

.brand-mark img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: contain;
}

.brand-copy strong,
.brand-copy small {
  display: block;
}

.brand-copy strong {
  color: var(--ink);
  font-size: 1.08rem;
  line-height: 1.15;
  letter-spacing: 0;
}

.brand-copy small {
  color: var(--muted);
  font-size: 0.78rem;
  line-height: 1.2;
  margin-top: 2px;
}

.top-nav {
  display: flex;
  flex-wrap: nowrap;
  justify-content: flex-end;
  align-items: center;
  gap: 6px;
  min-width: 0;
}

.top-nav a,
.top-nav button,
.mobile-menu-toggle {
  color: var(--ink);
  border-radius: 8px;
  padding: 8px 10px;
  font-size: 0.94rem;
  line-height: 1.2;
  white-space: nowrap;
  border: 0;
  background: transparent;
  font-weight: 720;
}

.top-nav a[aria-current="page"],
.top-nav a:hover,
.top-nav button[aria-expanded="true"],
.top-nav button:hover,
.mobile-menu-toggle:hover,
.mobile-menu-toggle[aria-expanded="true"] {
  background: #e7f2ef;
  color: var(--brand-dark);
  text-decoration: none;
}

.tools-menu-button {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  cursor: pointer;
}

.mobile-menu-toggle {
  display: none;
  cursor: pointer;
}

.tools-mega-menu {
  position: absolute;
  top: 100%;
  left: 0;
  right: 0;
  z-index: 30;
  border-bottom: 1px solid var(--line);
  background: rgba(255, 255, 255, 0.98);
  box-shadow: 0 18px 42px rgba(20, 31, 43, 0.14);
}

.mega-menu-inner {
  display: grid;
  grid-template-columns: minmax(190px, 240px) minmax(0, 1fr);
  gap: 22px;
  max-height: min(70vh, 620px);
  padding: 22px 0;
  overflow: auto;
}

.mega-menu-inner-three {
  grid-template-columns: minmax(180px, 230px) minmax(230px, 0.36fr) minmax(0, 1fr);
}

.mega-menu-inner-compact .mega-category-panel {
  grid-template-columns: 1fr;
}

.mega-primary-list {
  display: grid;
  gap: 6px;
  align-content: start;
  border-right: 1px solid var(--line);
  padding-right: 14px;
}

.mega-primary-list a {
  display: grid;
  gap: 2px;
  border-radius: 8px;
  padding: 10px;
  color: var(--ink);
  font-weight: 780;
}

.mega-primary-list a span {
  color: var(--muted);
  font-size: 0.78rem;
  font-weight: 650;
}

.mega-primary-list a:hover,
.mega-primary-list a:focus-visible,
.mega-primary-list a[aria-current="true"] {
  background: #e7f2ef;
  color: var(--brand-dark);
  text-decoration: none;
}

.mega-category-panel {
  display: grid;
  grid-template-columns: minmax(220px, 0.34fr) minmax(0, 1fr);
  gap: 22px;
}

.mega-menu-inner-three .mega-category-panel {
  grid-template-columns: 1fr;
}

.mega-panel-intro p {
  color: var(--muted);
}

.mega-panel-title,
.mega-tool-panel-title,
.mega-tool-group-title {
  margin: 0;
  color: var(--ink);
  font-size: 1.08rem;
  font-weight: 820;
  line-height: 1.25;
}

.mega-subcategory-list {
  display: grid;
  gap: 6px;
  align-content: start;
}

.mega-subcategory-list a {
  display: flex;
  align-items: center;
  gap: 8px;
  border: 1px solid var(--line);
  border-radius: 8px;
  background: #ffffff;
  color: var(--ink);
  padding: 8px 10px;
  font-weight: 720;
  line-height: 1.25;
}

.mega-subcategory-list a:hover,
.mega-subcategory-list a:focus-visible,
.mega-subcategory-list a[aria-current="true"] {
  background: #e7f2ef;
  color: var(--brand-dark);
  text-decoration: none;
}

.mega-subcategory-list small {
  color: var(--muted);
  font-weight: 760;
}

.mega-tool-panels {
  min-width: 0;
}

.mega-tool-panel {
  display: grid;
  gap: 12px;
  align-content: start;
}

.mega-tool-panel-head {
  display: grid;
  gap: 4px;
  border-bottom: 1px solid var(--line);
  padding-bottom: 10px;
}

.mega-tool-row-list {
  display: grid;
  gap: 8px;
  margin: 0;
  padding: 0;
  list-style: none;
}

.mega-tool-row-list a {
  display: block;
  border: 1px solid var(--line);
  border-radius: 8px;
  background: #ffffff;
  padding: 9px 12px;
  color: var(--ink);
  line-height: 1.25;
}

.mega-tool-row-list a:hover,
.mega-tool-row-list a:focus-visible {
  border-color: rgba(12, 124, 119, 0.38);
  color: var(--brand-dark);
  text-decoration: none;
}

.mega-tool-row-list span {
  font-weight: 780;
}

.mega-tool-row-list small,
.mega-empty-note,
.empty-subcategory-note {
  color: var(--muted);
}

.mega-more-link {
  justify-self: start;
}

.mega-tool-groups {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 14px;
}

.mega-tool-group {
  border: 1px solid var(--line);
  border-radius: 8px;
  background: #ffffff;
  padding: 14px;
}

.mega-tool-group h3 {
  margin-bottom: 10px;
}

.mega-tool-group ul,
.mobile-category-section ul {
  display: grid;
  gap: 7px;
  margin: 0;
  padding-left: 18px;
}

.mobile-nav-panel {
  position: absolute;
  top: 100%;
  left: 0;
  right: 0;
  z-index: 30;
  max-height: calc(100vh - 60px);
  overflow: auto;
  border-bottom: 1px solid var(--line);
  background: #ffffff;
  box-shadow: var(--shadow);
}

.mobile-nav-inner {
  display: grid;
  gap: 16px;
  padding: 16px 0 22px;
}

.mobile-nav-tools {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 10px;
}

.mobile-category-accordion {
  display: grid;
  gap: 10px;
}

.mobile-category-group {
  border: 1px solid var(--line);
  border-radius: 8px;
  background: #ffffff;
  padding: 0 12px 12px;
}

.mobile-category-link {
  display: block;
  border: 1px solid var(--line);
  border-radius: 8px;
  background: #ffffff;
  padding: 12px;
  font-weight: 760;
}

.mobile-category-group summary {
  min-height: 44px;
  padding: 12px 0;
  cursor: pointer;
  font-weight: 780;
}

.mobile-category-section {
  margin-top: 12px;
}

.mobile-category-section h3,
.mobile-category-section-title {
  color: var(--muted);
  font-size: 0.94rem;
}

.mobile-subcategory-group {
  border-top: 1px solid var(--line);
  padding: 4px 0 8px;
}

.mobile-subcategory-group summary {
  color: var(--ink);
  font-weight: 740;
}

.language-switcher {
  display: grid;
  grid-template-columns: auto minmax(150px, 1fr);
  align-items: center;
  justify-content: end;
  gap: 8px;
  min-width: 220px;
}

.language-label {
  color: var(--muted);
  font-size: 0.84rem;
  font-weight: 700;
  white-space: nowrap;
}

.language-select {
  min-height: 38px;
  border: 1px solid var(--line);
  border-radius: 8px;
  background: #ffffff;
  color: var(--ink);
  padding: 6px 10px;
  font-size: 0.9rem;
  line-height: 1.2;
}

.preview-notice {
  border-bottom: 1px solid #f2d08c;
  background: #fff8e8;
  color: #8a5700;
  font-size: 0.92rem;
  font-weight: 650;
}

.preview-notice .shell {
  padding: 10px 0;
}

[dir="rtl"] body {
  text-align: right;
}

[dir="rtl"] .top-nav,
[dir="rtl"] .language-switcher,
[dir="rtl"] .hero-actions,
[dir="rtl"] .button-row {
  justify-content: flex-start;
}

[dir="rtl"] .mega-primary-list {
  border-right: 0;
  border-left: 1px solid var(--line);
  padding-right: 0;
  padding-left: 14px;
}

[dir="rtl"] .compact-links,
[dir="rtl"] .link-list,
[dir="rtl"] .content-panel ol,
[dir="rtl"] .mega-tool-group ul,
[dir="rtl"] .mobile-category-section ul,
[dir="rtl"] .use-case-card ul {
  padding-right: 20px;
  padding-left: 0;
}

[dir="rtl"] input,
[dir="rtl"] textarea,
[dir="rtl"] select {
  text-align: right;
}

[dir="rtl"] code,
[dir="rtl"] bdi,
[dir="rtl"] input[type="url"],
[dir="rtl"] #utm-source,
[dir="rtl"] #utm-medium,
[dir="rtl"] #utm-campaign,
[dir="rtl"] #utm-content,
[dir="rtl"] #utm-term,
[dir="rtl"] #utm-output,
[dir="rtl"] #json-input,
[dir="rtl"] #json-output,
[dir="rtl"] #json-escape-input,
[dir="rtl"] #json-escape-output,
[dir="rtl"] textarea[spellcheck="false"] {
  direction: ltr;
  unicode-bidi: isolate;
  text-align: left;
}

.hero-band,
.page-intro {
  background:
    linear-gradient(135deg, rgba(12, 124, 119, 0.10), rgba(37, 99, 235, 0.07) 48%, rgba(180, 83, 9, 0.06)),
    linear-gradient(0deg, #ffffff, #ffffff);
  border-bottom: 1px solid var(--line);
}

.hero-grid {
  min-height: 560px;
  display: grid;
  grid-template-columns: minmax(0, 0.98fr) minmax(360px, 0.78fr);
  align-items: center;
  gap: 52px;
  padding: 78px 0 70px;
}

.hero-copy {
  display: grid;
  gap: 18px;
  align-content: start;
}

.hero-copy h1,
.hero-copy > p {
  margin-bottom: 0;
}

.page-intro {
  padding: 58px 0 46px;
}

.eyebrow {
  margin: 0 0 10px;
  color: var(--accent);
  font-size: 0.78rem;
  font-weight: 760;
  letter-spacing: 0;
  text-transform: uppercase;
}

h1,
h2,
h3,
p {
  margin-top: 0;
}

h1 {
  max-width: 760px;
  margin-bottom: 18px;
  font-size: 4.25rem;
  line-height: 1.03;
  letter-spacing: 0;
}

h2 {
  margin-bottom: 12px;
  font-size: 1.55rem;
  line-height: 1.22;
  letter-spacing: 0;
}

h3 {
  margin-bottom: 8px;
  font-size: 1.08rem;
}

.hero-grid p,
.page-intro p {
  max-width: 720px;
  color: var(--muted);
  font-size: 1.08rem;
}

.hero-actions,
.button-row {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
}

.primary-button,
.secondary-button,
button {
  min-height: 42px;
  border: 1px solid transparent;
  border-radius: 8px;
  padding: 10px 14px;
  font: inherit;
  font-weight: 700;
  cursor: pointer;
}

.primary-button,
button {
  background: var(--brand);
  color: #ffffff;
}

.primary-button:hover,
button:hover {
  background: var(--brand-dark);
  text-decoration: none;
}

.secondary-button {
  background: #ffffff;
  color: var(--brand-dark);
  border-color: var(--line);
}

.secondary-button:hover {
  border-color: var(--brand);
  text-decoration: none;
}

.tool-search-panel,
.tool-shell,
.content-panel,
.tool-card,
.category-band,
.ad-slot,
.legal-copy,
.faq-list details {
  border: 1px solid var(--line);
  border-radius: 8px;
  background: var(--surface);
  box-shadow: var(--shadow);
}

.tool-search-panel {
  padding: 22px;
}

.home-search-panel {
  display: grid;
  gap: 12px;
  width: min(100%, 620px);
  box-shadow: 0 22px 48px rgba(20, 31, 43, 0.10);
}

.home-search-row {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  gap: 10px;
  align-items: center;
}

.hero-trust-list {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  max-width: 680px;
}

.hero-trust-list span,
.workbench-chips span,
.category-task-list li {
  border: 1px solid rgba(12, 124, 119, 0.16);
  border-radius: 999px;
  background: rgba(255, 255, 255, 0.78);
  color: var(--brand-dark);
  font-size: 0.86rem;
  font-weight: 720;
}

.hero-trust-list span {
  padding: 7px 10px;
}

.hero-workbench {
  width: min(100%, 460px);
  justify-self: end;
  aspect-ratio: 1 / 1;
  display: grid;
  align-items: center;
}

.workbench-frame {
  border: 1px solid rgba(24, 33, 47, 0.12);
  border-radius: 8px;
  background: #ffffff;
  box-shadow: 0 30px 80px rgba(20, 31, 43, 0.15);
  overflow: hidden;
}

.workbench-topbar {
  display: grid;
  grid-template-columns: 10px 10px 10px minmax(0, 1fr);
  gap: 8px;
  align-items: center;
  min-height: 42px;
  padding: 0 16px;
  border-bottom: 1px solid var(--line);
  background: #f8fafc;
}

.workbench-topbar span {
  width: 10px;
  height: 10px;
  border-radius: 50%;
  background: #f97316;
}

.workbench-topbar span:nth-child(2) {
  background: #22c55e;
}

.workbench-topbar span:nth-child(3) {
  background: #2563eb;
}

.workbench-topbar strong {
  justify-self: end;
  color: var(--muted);
  font-size: 0.8rem;
}

.workbench-body {
  display: grid;
  gap: 16px;
  padding: 20px;
}

.workbench-search {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  gap: 12px;
  align-items: center;
  min-height: 54px;
  border: 1px solid #c8d3dc;
  border-radius: 8px;
  padding: 0 14px;
}

.workbench-search span {
  color: var(--muted);
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.workbench-search b {
  color: var(--brand-dark);
  font-size: 0.85rem;
}

.workbench-chips {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
}

.workbench-chips span {
  padding: 6px 9px;
}

.workbench-grid {
  display: grid;
  grid-template-columns: minmax(0, 1.05fr) minmax(0, 0.95fr);
  gap: 14px;
}

.workbench-card {
  min-height: 168px;
  border: 1px solid var(--line);
  border-radius: 8px;
  background: #f8fbfc;
  padding: 16px;
}

.workbench-card small {
  display: block;
  margin-bottom: 12px;
  color: var(--muted);
  font-weight: 760;
}

.workbench-code code {
  display: block;
  color: #0f172a;
  font-family: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono", monospace;
  font-size: 0.82rem;
  line-height: 1.7;
  word-break: break-word;
}

.workbench-result {
  display: grid;
  align-content: start;
  gap: 10px;
}

.workbench-result strong {
  color: var(--brand-dark);
  font-size: 1.25rem;
  line-height: 1.2;
}

.workbench-result span {
  display: block;
  width: 100%;
  height: 56px;
  border-radius: 8px;
  background:
    linear-gradient(90deg, rgba(12, 124, 119, 0.20), rgba(37, 99, 235, 0.16)),
    repeating-linear-gradient(0deg, transparent, transparent 8px, rgba(24, 33, 47, 0.06) 9px);
}

.tool-search-panel label,
.field-group label {
  display: block;
  margin-bottom: 8px;
  color: var(--ink);
  font-weight: 760;
}

.field-help {
  margin: 10px 0 0;
  color: var(--muted);
  font-size: 0.92rem;
}

input,
select,
textarea {
  width: 100%;
  border: 1px solid #c8d3dc;
  border-radius: 8px;
  background: #ffffff;
  color: var(--ink);
  font: inherit;
  letter-spacing: 0;
}

input,
select {
  min-height: 44px;
  padding: 9px 11px;
}

textarea {
  min-height: 180px;
  padding: 12px;
  resize: vertical;
}

input:focus,
select:focus,
textarea:focus,
button:focus-visible,
a:focus-visible {
  outline: 3px solid rgba(12, 124, 119, 0.25);
  outline-offset: 2px;
}

.sr-only {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
  border: 0;
}

.section-block {
  padding: 44px 0;
}

.section-heading {
  max-width: 760px;
  margin-bottom: 22px;
}

.section-heading p {
  color: var(--muted);
}

.tool-grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 18px;
}

.tool-card {
  --card-accent: #4f46e5;
  --card-accent-2: #2563eb;
  --card-ink: #3730a3;
  --card-soft: #dbeafe;
  --card-tag: #eef2ff;
  --card-tag-muted: #f8fafc;
  --card-border: #c7d2fe;
  display: flex;
  min-height: 238px;
  flex-direction: column;
  justify-content: space-between;
  padding: 20px;
}

.tool-card h2 {
  font-size: 1.25rem;
}

.tool-card p {
  color: var(--muted);
}

.text-link {
  width: fit-content;
  font-weight: 760;
}

.category-stack {
  display: grid;
  gap: 16px;
}

.category-breadcrumb {
  padding-top: 18px;
}

.directory-controls {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(220px, 0.32fr) minmax(240px, 0.36fr);
  gap: 16px;
  align-items: end;
}

.category-band {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(220px, 0.35fr);
  gap: 20px;
  align-items: center;
  padding: 20px;
}

.category-subnav-panel,
.category-index-card {
  border: 1px solid var(--line);
  border-radius: 8px;
  background: var(--surface);
  box-shadow: var(--shadow);
}

.category-subnav-panel {
  display: grid;
  grid-template-columns: minmax(220px, 0.32fr) minmax(0, 1fr);
  gap: 18px;
  align-items: start;
  padding: 20px;
}

.subcategory-link-list {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
}

.subcategory-link-list a {
  border: 1px solid var(--line);
  border-radius: 999px;
  background: #f8fafc;
  color: var(--brand-dark);
  padding: 7px 10px;
  font-size: 0.9rem;
  font-weight: 720;
}

.category-index-grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 16px;
}

.category-index-card {
  display: grid;
  min-height: 230px;
  align-content: space-between;
  gap: 16px;
  padding: 20px;
}

.category-index-card-head {
  display: grid;
  gap: 10px;
}

.cluster-actions {
  display: inline-flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: flex-end;
  gap: 10px;
}

.empty-subcategory-note {
  border: 1px dashed var(--line);
  border-radius: 8px;
  background: #f8fafc;
  padding: 14px;
}

.home-category-grid,
.trust-grid {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 16px;
}

.use-case-grid {
  display: grid;
  grid-template-columns: repeat(5, minmax(0, 1fr));
  gap: 16px;
}

.home-category-card,
.use-case-card,
.trust-grid article {
  border: 1px solid var(--line);
  border-radius: 8px;
  background: var(--surface);
  box-shadow: var(--shadow);
  padding: 18px;
}

.home-category-card {
  display: grid;
  min-height: 224px;
  align-content: space-between;
  gap: 16px;
}

.home-category-card-head {
  display: grid;
  gap: 10px;
}

.home-category-icon {
  display: inline-grid;
  place-items: center;
  width: 42px;
  height: 42px;
  color: var(--brand-dark);
}

.home-category-icon svg {
  width: 42px;
  height: 42px;
  fill: none;
  stroke: currentColor;
  stroke-width: 2.1;
  stroke-linecap: round;
  stroke-linejoin: round;
}

.category-icon-developer-data {
  color: var(--blue);
}

.category-icon-seo-marketing,
.category-icon-design-css {
  color: var(--accent);
}

.home-category-card h3,
.use-case-card h3,
.trust-grid h3 {
  font-size: 1.05rem;
  line-height: 1.25;
}

.home-category-card p,
.use-case-card p,
.trust-grid p {
  color: var(--muted);
}

.category-meta {
  display: grid;
  gap: 6px;
  border-top: 1px solid var(--line);
  padding-top: 12px;
  color: var(--muted);
  font-size: 0.88rem;
}

.category-task-list ul {
  display: flex;
  flex-wrap: wrap;
  gap: 7px;
  margin: 0;
  padding: 0;
  list-style: none;
}

.category-task-list li {
  padding: 5px 8px;
}

.category-task-list a {
  color: inherit;
}

.category-meta span:first-child {
  color: var(--brand-dark);
  font-weight: 780;
}

.home-featured-grid .tool-card {
  min-height: 220px;
}

.use-case-card {
  display: grid;
  gap: 10px;
  align-content: start;
}

.use-case-card ul {
  display: grid;
  gap: 7px;
  margin: 0;
  padding-left: 18px;
}

.trust-band {
  border-top: 1px solid var(--line);
}

.directory-category {
  grid-template-columns: minmax(260px, 0.42fr) minmax(0, 1fr);
  align-items: start;
}

.directory-cluster-stack {
  display: grid;
  gap: 18px;
}

.directory-subcategory {
  display: grid;
  gap: 12px;
}

.directory-subcategory-heading {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  border-bottom: 1px solid var(--line);
  padding-bottom: 8px;
}

.directory-subcategory-heading h3 {
  margin: 0;
  font-size: 1rem;
}

.directory-subcategory-heading span {
  color: var(--muted);
  font-weight: 760;
}

.tool-cluster {
  display: grid;
  gap: 14px;
  margin-bottom: 26px;
}

.tool-cluster:last-child {
  margin-bottom: 0;
}

.cluster-heading {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  border-bottom: 1px solid var(--line);
  padding-bottom: 8px;
}

.cluster-heading h2 {
  margin: 0;
}

.cluster-heading span {
  display: inline-grid;
  min-width: 30px;
  min-height: 30px;
  place-items: center;
  border: 1px solid var(--line);
  border-radius: 999px;
  color: var(--muted);
  font-weight: 760;
}

.compact-tool-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 14px;
}

.compact-tool-grid .tool-card {
  min-height: 190px;
  box-shadow: none;
}

.category-chip-list {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin-bottom: 16px;
}

.category-chip-list span {
  border: 1px solid var(--line);
  border-radius: 999px;
  background: #f8fafc;
  color: var(--muted);
  padding: 6px 10px;
  font-size: 0.88rem;
}

.compact-links,
.link-list {
  display: grid;
  gap: 8px;
  margin: 0;
  padding-left: 18px;
}

.ad-slot {
  display: grid;
  min-height: 88px;
  place-items: center;
  color: #6d7885;
  background: repeating-linear-gradient(135deg, #f7f9fb, #f7f9fb 10px, #eef2f6 10px, #eef2f6 20px);
  font-size: 0.9rem;
}

.ad-slot-hidden {
  display: none;
}

.tool-shell {
  padding: 22px;
}

.tool-page-breadcrumb {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  align-items: center;
  padding-top: 20px;
  color: var(--muted);
  font-size: 0.9rem;
}

.tool-page-breadcrumb a {
  color: var(--brand-dark);
  font-weight: 720;
}

.tool-page-breadcrumb [aria-current="page"] {
  color: var(--ink);
  font-weight: 720;
}

.tool-detail-hero {
  padding: 28px 0 10px;
}

.tool-detail-hero-copy {
  max-width: 820px;
}

.tool-detail-hero h1 {
  max-width: 760px;
  margin: 6px 0 12px;
  font-size: 3.5rem;
}

.tool-detail-hero p {
  max-width: 740px;
  color: var(--muted);
  font-size: 1.05rem;
}

.tool-detail-tags {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin-top: 18px;
}

.tool-detail-tag {
  display: inline-flex;
  align-items: center;
  min-height: 34px;
  border: 1px solid var(--line);
  border-radius: 999px;
  padding: 6px 10px;
  background: #ffffff;
  color: var(--brand-dark);
  font-size: 0.86rem;
  font-weight: 760;
  line-height: 1.2;
}

.tool-detail-tag:hover {
  text-decoration: none;
  border-color: var(--brand);
}

.tool-detail-tag-secondary {
  background: #f5f7ff;
  color: #374151;
}

.tool-detail-tag-privacy {
  max-width: 520px;
  background: #f8fafc;
  color: var(--muted);
  font-weight: 680;
}

.tool-workbench-section .tool-shell {
  border-color: rgba(79, 70, 229, 0.16);
  box-shadow: 0 18px 42px rgba(15, 23, 42, 0.08);
}

.tool-site-header {
  background: rgba(255, 255, 255, 0.96);
}

.tool-header-inner {
  width: min(100% - 64px, 1760px);
  grid-template-columns: auto minmax(260px, 560px) auto auto auto;
  min-height: 76px;
}

.tool-header-search {
  position: relative;
  display: grid;
  grid-template-columns: auto minmax(0, 1fr);
  align-items: center;
  gap: 10px;
  min-height: 48px;
  border: 1px solid #dfe5f0;
  border-radius: 8px;
  background: #ffffff;
  padding: 0 14px;
  box-shadow: 0 10px 28px rgba(15, 23, 42, 0.04);
}

.tool-header-search span {
  color: #536179;
  font-size: 1.1rem;
}

.tool-header-search input {
  min-width: 0;
  min-height: 44px;
  border: 0;
  padding: 0;
  background: transparent;
  color: var(--ink);
  font: inherit;
}

.tool-header-search input:focus {
  outline: none;
}

.tool-header-search:focus-within {
  border-color: #a5b4fc;
  box-shadow: 0 0 0 4px rgba(99, 102, 241, 0.12);
}

.tool-top-nav {
  justify-content: flex-end;
}

.tool-browse-link {
  display: inline-flex;
  align-items: center;
  gap: 8px;
}

.tool-page-modern {
  --brand: #5b5ce2;
  --brand-dark: #4338ca;
  --tool-accent: #5b5ce2;
  --tool-accent-dark: #4338ca;
  --tool-panel: rgba(255, 255, 255, 0.92);
  position: relative;
  overflow-x: clip;
  background: linear-gradient(180deg, #fbfcff 0%, #f6f8fc 62%, #ffffff 100%);
}

.tool-visual-hero {
  padding: 44px 0 24px;
}

.tool-visual-hero-inner {
  width: min(100% - 64px, 1760px);
  display: grid;
  grid-template-columns: 84px minmax(0, 1fr);
  gap: 24px;
  align-items: start;
}

.tool-visual-icon {
  display: grid;
  width: 84px;
  height: 84px;
  place-items: center;
  border: 1px solid rgba(79, 70, 229, 0.14);
  border-radius: 8px;
  background: #ffffff;
  color: var(--card-accent, var(--tool-accent));
  box-shadow: 0 18px 45px rgba(15, 23, 42, 0.08);
  font-size: 1.35rem;
  font-weight: 860;
  letter-spacing: 0;
}

.tool-visual-title {
  min-width: 0;
}

.tool-visual-kicker {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 8px;
  color: #64748b;
  font-size: 0.9rem;
  font-weight: 760;
}

.tool-visual-kicker a {
  color: var(--card-accent, var(--tool-accent));
}

.tool-visual-title h1 {
  max-width: 980px;
  margin: 8px 0;
  color: #071330;
  font-size: 3.45rem;
  line-height: 1.04;
}

.tool-visual-title p {
  max-width: 900px;
  margin: 0;
  color: #475569;
  font-size: 1.08rem;
}

.tool-visual-badges {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  margin-top: 20px;
}

.tool-visual-badges span {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  min-height: 36px;
  border: 1px solid #e2e8f0;
  border-radius: 8px;
  background: rgba(255, 255, 255, 0.78);
  color: #26364f;
  padding: 7px 12px;
  font-size: 0.92rem;
  font-weight: 740;
}

.tool-visual-badges span::before {
  content: "";
  width: 10px;
  height: 10px;
  border-radius: 999px;
  background: var(--tool-accent);
  box-shadow: 0 0 0 4px rgba(91, 92, 226, 0.1);
}

.tool-product-layout {
  width: min(100% - 64px, 1760px);
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(270px, 340px);
  gap: 28px;
  align-items: start;
  padding: 0 0 22px;
}

.tool-product-main,
.tool-side-panel {
  min-width: 0;
}

.tool-workspace-card,
.tool-side-card,
.tool-help-card {
  border: 1px solid rgba(203, 213, 225, 0.9);
  border-radius: 8px;
  background: var(--tool-panel);
  box-shadow: 0 22px 58px rgba(15, 23, 42, 0.08);
}

.tool-workspace-card {
  overflow: hidden;
}

.tool-workspace-card-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 14px;
  border-bottom: 1px solid rgba(226, 232, 240, 0.9);
  padding: 18px 24px;
}

.tool-workspace-card-header h2,
.tool-side-card h2,
.tool-help-card h2 {
  margin: 0;
  color: #101a33;
  font-size: 1.05rem;
}

.tool-workspace-card > .tool-shell {
  padding: 24px;
}

.tool-workspace-card textarea,
.tool-workspace-card input,
.tool-workspace-card select,
.tool-workspace-card .json-model-code-block,
.tool-workspace-card .raw-output-panel,
.tool-workspace-card .serp-preview-card,
.tool-workspace-card .og-preview-card,
.tool-workspace-card .contrast-preview-card,
.tool-workspace-card .css-preview-stage,
.tool-workspace-card .css-preview-box,
.tool-workspace-card .mini-list {
  border-radius: 8px;
}

.tool-page-modern .button-row {
  gap: 10px;
}

.tool-page-modern .button-row button,
.tool-page-modern .button-row .secondary-button {
  display: inline-flex;
  width: auto;
  min-height: 48px;
  align-items: center;
  justify-content: center;
  border-color: #dbe3ff;
  border-radius: 8px;
  background: #f8f9ff;
  color: #3730a3;
  box-shadow: none;
  padding: 0 18px;
  font-size: 0.94rem;
  font-weight: 800;
  line-height: 1.2;
}

.tool-page-modern .button-row button:first-child,
.tool-page-modern .button-row button[data-run-special-tool],
.tool-page-modern .button-row button[data-run-generic-tool],
.tool-page-modern .button-row button[data-run-file-tool],
.tool-page-modern .button-row button[data-run-learning-random-tool] {
  border-color: transparent;
  background: var(--tool-accent);
  color: #ffffff;
  box-shadow: 0 10px 22px rgba(79, 70, 229, 0.22);
}

.tool-page-modern .button-row button:hover,
.tool-page-modern .button-row .secondary-button:hover {
  border-color: #c7d2fe;
  background: #eef2ff;
  color: #312e81;
  text-decoration: none;
}

.tool-page-modern .button-row button:first-child:hover,
.tool-page-modern .button-row button[data-run-special-tool]:hover,
.tool-page-modern .button-row button[data-run-generic-tool]:hover,
.tool-page-modern .button-row button[data-run-file-tool]:hover,
.tool-page-modern .button-row button[data-run-learning-random-tool]:hover {
  border-color: transparent;
  background: var(--tool-accent-dark);
  color: #ffffff;
}

.learning-random-tool-shell {
  display: grid;
  gap: 18px;
}

.learning-random-grid .inline-field-row {
  display: grid;
  grid-template-columns: auto minmax(72px, 1fr) auto minmax(72px, 1fr) auto minmax(72px, 1fr);
  align-items: center;
  gap: 10px;
  margin-top: 12px;
}

.learning-random-grid .inline-field-row input {
  min-width: 0;
}

.checkbox-row {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  margin-top: 12px;
  color: #334155;
  font-weight: 720;
}

.checkbox-row input {
  width: auto;
}

.printable-a4-preview {
  width: min(100%, 794px);
  min-height: 560px;
  border: 1px solid #d9e2f2;
  border-radius: 8px;
  background: #f8fafc;
  padding: 18px;
  color: #334155;
}

.printable-a4-page {
  width: 100%;
  min-height: 520px;
  border: 1px solid #e2e8f0;
  border-radius: 6px;
  background: #ffffff;
  padding: 24px;
}

.printable-a4-page h3 {
  margin: 0 0 16px;
  color: #101a33;
  font-size: 1.25rem;
}

.printable-item-list {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 10px 24px;
  margin: 0;
  padding-left: 22px;
}

.printable-item-list li {
  min-height: 30px;
  border-bottom: 1px dotted #cbd5e1;
  padding-bottom: 6px;
}

.printable-answer-key {
  margin-top: 24px;
  border-top: 1px solid #e2e8f0;
  padding-top: 14px;
}

.printable-answer-key h4 {
  margin: 0 0 8px;
  color: #1f2a44;
}

.learning-random-result-cards {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 10px;
  margin-top: 12px;
}

.learning-random-result-card {
  min-width: 0;
  border: 1px solid #dbe3ff;
  border-radius: 8px;
  background: #f8f9ff;
  padding: 12px;
}

.learning-random-result-card span {
  display: inline-grid;
  width: 26px;
  height: 26px;
  place-items: center;
  border-radius: 999px;
  background: #3730a3;
  color: #ffffff;
  font-size: 0.8rem;
  font-weight: 800;
}

.learning-random-result-card strong {
  display: block;
  margin-top: 8px;
  overflow-wrap: anywhere;
  color: #101a33;
}

@media print {
  .site-header,
  .site-footer,
  .footer-search,
  .tool-visual-hero,
  .tool-side-panel,
  .tool-help-grid,
  .tool-workspace-card-header,
  .learning-random-grid,
  .button-row,
  .preview-notice,
  .ad-placeholder,
  .adsbygoogle {
    display: none !important;
  }

  body,
  .tool-page-modern,
  .tool-product-layout,
  .tool-product-main,
  .tool-workspace-card,
  .tool-workspace-card > .tool-shell {
    display: block !important;
    width: 100% !important;
    max-width: none !important;
    margin: 0 !important;
    border: 0 !important;
    box-shadow: none !important;
    background: #ffffff !important;
    padding: 0 !important;
  }

  .printable-a4-preview {
    width: 210mm;
    min-height: 297mm;
    border: 0;
    border-radius: 0;
    background: #ffffff;
    padding: 0;
  }

  .printable-a4-page {
    min-height: 297mm;
    border: 0;
    border-radius: 0;
    padding: 14mm;
  }
}

.tool-side-panel {
  display: grid;
  gap: 18px;
  position: sticky;
  top: 94px;
}

.tool-side-card {
  padding: 20px;
}

.tool-related-list {
  display: grid;
  gap: 10px;
  margin-top: 16px;
}

.tool-related-card {
  display: grid;
  grid-template-columns: 42px minmax(0, 1fr);
  gap: 12px;
  align-items: center;
  min-width: 0;
  border-radius: 8px;
  padding: 9px;
  color: #16213a;
}

.tool-related-card:hover {
  background: #f8fafc;
  text-decoration: none;
}

.tool-related-icon,
.tool-privacy-icon {
  display: grid;
  width: 38px;
  height: 38px;
  place-items: center;
  border-radius: 8px;
  background: #eef2ff;
  color: var(--card-accent, var(--tool-accent));
  font-weight: 850;
}

.tool-related-card strong,
.tool-related-card small {
  display: block;
  min-width: 0;
  overflow-wrap: anywhere;
}

.tool-related-card strong {
  font-size: 0.96rem;
  line-height: 1.25;
}

.tool-related-card small {
  margin-top: 2px;
  color: #64748b;
  font-size: 0.82rem;
}

.tool-privacy-card {
  display: grid;
  grid-template-columns: 46px minmax(0, 1fr);
  gap: 12px;
  background: #ffffff;
}

.tool-privacy-card p {
  margin: 8px 0 0;
  color: #475569;
  font-size: 0.92rem;
}

.tool-help-grid {
  width: min(100% - 64px, 1760px);
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1fr) minmax(0, 1fr);
  gap: 28px;
  padding: 0 0 18px;
}

.tool-help-card {
  min-width: 0;
  padding: 24px;
}

.tool-help-card p,
.tool-help-card li {
  color: #475569;
}

.tool-help-card ol {
  display: grid;
  gap: 12px;
  margin: 18px 0 0;
  padding-left: 20px;
}

.tool-faq-card {
  display: grid;
  gap: 10px;
}

.tool-faq-card details {
  border: 1px solid #e2e8f0;
  border-radius: 8px;
  background: #ffffff;
  padding: 12px 14px;
}

.tool-faq-card summary {
  cursor: pointer;
  color: #1f2a44;
  font-weight: 760;
}

.tool-faq-card p {
  margin: 10px 0 0;
}

.tool-two-column,
.converter-grid,
.content-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 18px;
}

.converter-grid {
  grid-template-columns: repeat(4, minmax(0, 1fr));
}

.converter-grid.compact {
  grid-template-columns: minmax(240px, 360px);
}

.field-group.full {
  margin-bottom: 18px;
}

.stats-grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 12px;
  margin-top: 18px;
}

.stat-box,
.result-panel {
  min-height: 96px;
  border: 1px solid var(--line);
  border-radius: 8px;
  background: #f9fbfc;
  padding: 16px;
}

.stat-box span,
.result-panel span {
  display: block;
  color: var(--muted);
  font-size: 0.9rem;
}

.stat-box strong,
.result-panel strong {
  display: block;
  margin-top: 6px;
  color: var(--ink);
  font-size: 1.8rem;
  line-height: 1.15;
  word-break: break-word;
}

.button-row {
  margin-top: 16px;
}

.check-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 10px;
}

.inline-check {
  display: flex;
  align-items: center;
  gap: 8px;
  min-height: 44px;
  border: 1px solid var(--line);
  border-radius: 8px;
  background: #f9fbfc;
  padding: 9px 11px;
  color: var(--ink);
  font-weight: 650;
}

.inline-check input {
  width: 18px;
  min-height: 18px;
  flex: 0 0 18px;
  padding: 0;
}

.tool-error,
.tool-warning {
  margin: 14px 0 0;
  border: 1px solid #f3b3ad;
  border-radius: 8px;
  background: #fff4f2;
  color: var(--danger);
  padding: 10px 12px;
  font-weight: 650;
}

.tool-warning {
  border-color: #f2d08c;
  background: #fff8e8;
  color: #8a5700;
}

.result-panel {
  margin-top: 18px;
}

.result-summary {
  margin-top: 18px;
}

.privacy-note-inline {
  margin: 0 0 18px;
  border: 1px solid #b7dfca;
  border-radius: 8px;
  background: #f1fbf5;
  color: #24543a;
  padding: 10px 12px;
  font-weight: 720;
}

.json-model-workspace {
  display: grid;
  grid-template-columns: minmax(0, 0.95fr) minmax(0, 1.05fr);
  gap: 22px;
  align-items: start;
}

.json-model-panel {
  min-width: 0;
}

.json-model-samples {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
}

.json-model-output-head {
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
  gap: 8px 14px;
  margin-top: 16px;
  border: 1px solid var(--line);
  border-bottom: 0;
  border-radius: 8px 8px 0 0;
  background: #f5f7f9;
  padding: 10px 12px;
  color: var(--muted);
  font-size: 0.9rem;
  font-weight: 720;
}

.json-model-output-head span:first-child {
  color: var(--ink);
}

.json-model-code-block {
  min-height: 420px;
  max-height: 640px;
  overflow: auto;
  margin: 0;
  border: 1px solid var(--line);
  border-radius: 0 0 8px 8px;
  background: #101820;
  color: #edf7ff;
  padding: 16px;
  font-size: 0.9rem;
  line-height: 1.55;
  white-space: pre;
}

.json-model-code-block code {
  font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, "Liberation Mono", monospace;
}

.json-model-result-grid {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 14px;
  margin-top: 22px;
}

.compact-panel {
  padding: 16px;
}

.compact-panel h2 {
  margin-top: 0;
  font-size: 1rem;
}

.json-model-summary-list {
  display: grid;
  gap: 10px;
  margin: 0;
}

.json-model-summary-list div {
  display: flex;
  justify-content: space-between;
  gap: 12px;
  border-bottom: 1px solid var(--line);
  padding-bottom: 8px;
}

.json-model-summary-list dt {
  color: var(--muted);
  font-weight: 680;
}

.json-model-summary-list dd {
  margin: 0;
  color: var(--ink);
  font-weight: 780;
  text-align: right;
  word-break: break-word;
}

.json-model-warning-list {
  margin: 0;
  padding-left: 18px;
}

.special-tool-layout {
  display: grid;
  grid-template-columns: minmax(0, 0.95fr) minmax(0, 1.05fr);
  gap: 22px;
  align-items: start;
}

.special-input-panel,
.special-output-panel {
  min-width: 0;
}

.special-tool-actions {
  display: flex;
  justify-content: flex-end;
  margin-bottom: 14px;
}

.special-field-grid,
.special-result-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 14px;
}

.special-result-card {
  min-width: 0;
}

.special-result-card strong {
  overflow-wrap: anywhere;
  word-break: break-word;
}

.special-field-grid .field-group:has(textarea),
.special-field-grid .field-group:has([type="url"]) {
  grid-column: 1 / -1;
}

.special-checkbox-group {
  align-self: end;
}

.special-inline-check {
  margin-top: 30px;
}

.raw-output-panel {
  margin-top: 14px;
  border: 1px solid var(--line);
  border-radius: 8px;
  background: #f9fbfc;
  padding: 12px 14px;
}

.raw-output-panel summary {
  cursor: pointer;
  font-weight: 760;
}

.raw-output-panel pre,
.inline-code-result {
  overflow: auto;
  margin: 12px 0 0;
  white-space: pre-wrap;
  word-break: break-word;
  font-size: 0.9rem;
}

.special-visual-preview {
  margin-top: 16px;
}

.serp-preview-card,
.og-preview-card,
.contrast-preview-card,
.css-preview-stage,
.css-preview-box,
.mini-list {
  border: 1px solid var(--line);
  border-radius: 8px;
  background: #ffffff;
  padding: 16px;
}

.serp-preview-card cite {
  color: #188038;
  font-style: normal;
  font-size: 0.9rem;
}

.serp-preview-card h3 {
  color: #1a0dab;
  font-size: 1.15rem;
}

.serp-preview-card p,
.og-preview-card p {
  color: #4d5156;
}

.og-preview-card {
  display: grid;
  grid-template-columns: 160px minmax(0, 1fr);
  gap: 14px;
}

.og-preview-image {
  display: grid;
  min-height: 96px;
  place-items: center;
  border-radius: 6px;
  background: #dbeafe;
  color: #1e3a8a;
  font-weight: 760;
}

.contrast-preview-card {
  min-height: 110px;
  font-size: 1.35rem;
  font-weight: 800;
}

.css-preview-box {
  min-height: 118px;
}

.css-preview-stage {
  display: grid;
  place-items: center;
  min-height: 170px;
}

.css-shadow-preview {
  width: min(70%, 260px);
  background: #ffffff;
}

.mini-list {
  display: grid;
  gap: 8px;
}

.compact-panel {
  margin-top: 18px;
  box-shadow: none;
}

.content-panel,
.legal-copy {
  padding: 22px;
}

.content-panel p,
.legal-copy p,
.content-panel li {
  color: var(--muted);
}

.content-panel ol {
  margin: 0;
  padding-left: 20px;
}

.faq-list {
  display: grid;
  gap: 10px;
}

.faq-list details {
  padding: 16px 18px;
}

.faq-list summary {
  cursor: pointer;
  font-weight: 760;
}

.faq-list p {
  margin: 10px 0 0;
  color: var(--muted);
}

.legal-copy h2 {
  margin-top: 26px;
}

.legal-copy h2:first-child {
  margin-top: 0;
}

.legal-section {
  margin-top: 28px;
}

.legal-section:first-child {
  margin-top: 0;
}

.site-footer {
  margin-top: 32px;
  border-top: 1px solid var(--line);
  background: #101820;
  color: #e9eef2;
}

.footer-search-band {
  margin-top: 28px;
  border-top: 1px solid var(--line);
  background: linear-gradient(135deg, #edf7f5, #f8fbff);
}

.footer-search-inner {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(280px, 0.45fr);
  gap: 22px;
  align-items: center;
  padding: 28px 0;
}

.footer-search-inner p {
  color: var(--muted);
}

.footer-search-form {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  gap: 10px;
}

.footer-search-form button {
  min-height: 44px;
  border: 0;
  border-radius: 8px;
  background: #4f46e5;
  color: #ffffff;
  padding: 0 18px;
  font-weight: 780;
  cursor: pointer;
  box-shadow: 0 12px 24px rgba(79, 70, 229, 0.18);
  transition: background 160ms ease, box-shadow 160ms ease, transform 160ms ease;
}

.footer-search-form button:hover,
.footer-search-form button:focus-visible {
  background: #4338ca;
  box-shadow: 0 16px 30px rgba(67, 56, 202, 0.22);
  transform: translateY(-1px);
}

.footer-main {
  display: grid;
  grid-template-columns: minmax(190px, 0.85fr) minmax(0, 3.15fr);
  gap: 34px;
  align-items: start;
  padding: 24px 0 18px;
}

.footer-brand {
  max-width: 300px;
}

.footer-brand-logo {
  display: inline-flex;
  width: min(100%, 124px);
  line-height: 0;
}

.footer-brand-logo-image {
  display: block;
  width: 100%;
  height: auto;
  aspect-ratio: 334 / 111;
  object-fit: contain;
}

.footer-brand p {
  margin: 8px 0 0;
  font-size: 0.92rem;
  line-height: 1.55;
}

.footer-nav {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 18px;
}

.footer-column {
  min-width: 0;
}

.site-footer a,
.site-footer .brand {
  color: #ffffff;
}

.site-footer .brand-mark {
  background: transparent;
}

.site-footer .brand-copy strong {
  color: #ffffff;
}

.site-footer p,
.site-footer small,
.site-footer li {
  color: #b9c5cf;
}

.footer-heading {
  margin: 0 0 10px;
  color: #ffffff;
  font-size: 0.92rem;
  font-weight: 780;
}

.footer-link-list {
  list-style: none;
  display: grid;
  gap: 7px;
  padding: 0;
  margin: 0;
  font-size: 0.92rem;
}

.footer-bottom {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 18px;
  border-top: 1px solid rgba(255, 255, 255, 0.12);
  padding: 12px 0 14px;
}

.footer-bottom p {
  margin: 0;
  font-size: 0.9rem;
}

.footer-language-switcher {
  display: grid;
  grid-template-columns: auto minmax(120px, 1fr);
  justify-content: end;
  min-width: 176px;
  gap: 8px;
}

.footer-language-switcher .language-label {
  color: #b9c5cf;
}

.footer-language-switcher .language-select {
  min-height: 34px;
  padding: 5px 9px;
  font-size: 0.86rem;
}

@media (max-width: 860px) {
  .shell,
  .narrow {
    width: min(100% - 28px, 1120px);
  }

  .tool-header-inner,
  .tool-visual-hero-inner,
  .tool-product-layout,
  .tool-help-grid {
    width: min(100% - 28px, 1120px);
  }

  .hero-grid,
  .category-band,
  .category-subnav-panel,
  .category-index-grid,
  .directory-controls,
  .footer-search-inner,
  .footer-search-form,
  .footer-main,
  .tool-two-column,
  .special-tool-layout,
  .json-model-workspace,
  .special-field-grid,
  .special-result-grid,
  .json-model-result-grid,
  .og-preview-card,
  .content-grid,
  .mega-menu-inner-three,
  .mega-category-panel,
  .home-category-grid,
  .use-case-grid,
  .trust-grid,
  .tool-product-layout,
  .tool-help-grid {
    grid-template-columns: 1fr;
  }

  .learning-random-grid .inline-field-row,
  .printable-item-list,
  .learning-random-result-cards {
    grid-template-columns: 1fr;
  }

  .tool-header-inner {
    grid-template-columns: auto minmax(0, 1fr) auto;
    align-items: center;
    gap: 10px;
    min-height: 0;
    padding: 8px 0;
  }

  .tool-header-search {
    grid-column: 1 / -1;
    order: 4;
    min-height: 42px;
  }

  .tool-top-nav {
    display: none;
  }

  .tool-visual-hero {
    padding: 28px 0 18px;
  }

  .tool-visual-hero-inner {
    grid-template-columns: 64px minmax(0, 1fr);
    gap: 16px;
  }

  .tool-visual-icon {
    width: 64px;
    height: 64px;
    font-size: 1.05rem;
  }

  .tool-visual-title h1 {
    font-size: 2.35rem;
  }

  .tool-product-layout,
  .tool-help-grid {
    gap: 18px;
  }

  .tool-side-panel {
    position: static;
  }

  .footer-main {
    gap: 18px;
    padding: 24px 0 18px;
  }

  .footer-brand {
    max-width: none;
  }

  .footer-nav {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 18px;
  }

  .footer-bottom {
    align-items: flex-start;
    flex-direction: column;
    gap: 10px;
  }

  .footer-language-switcher {
    justify-content: start;
    min-width: 0;
    width: min(100%, 240px);
  }

  .header-inner {
    grid-template-columns: auto minmax(0, 1fr) auto;
    align-items: center;
    gap: 10px;
    min-height: 0;
    padding: 8px 0;
  }

  .top-nav {
    display: none;
  }

  .header-language-switcher {
    display: none;
  }

  .mobile-menu-toggle {
    display: inline-flex;
    justify-self: end;
    min-height: 40px;
    align-items: center;
    justify-content: center;
  }

  .tools-mega-menu {
    display: none !important;
  }

  .mobile-language-switcher {
    grid-template-columns: auto minmax(0, 1fr);
    min-width: 0;
  }

  .hero-grid {
    min-height: auto;
    gap: 28px;
    padding: 44px 0;
  }

  .hero-workbench {
    justify-self: start;
    width: min(100%, 520px);
  }

  .tool-grid,
  .compact-tool-grid,
  .stats-grid,
  .converter-grid,
  .check-grid,
  .json-model-result-grid,
  .mega-tool-groups {
    grid-template-columns: 1fr;
  }

  .section-block {
    padding: 30px 0;
  }

  h1 {
    font-size: 2.35rem;
  }
}

@media (max-width: 520px) {
  .footer-nav {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 16px;
  }

  .footer-language-switcher {
    grid-template-columns: auto minmax(0, 1fr);
    width: 100%;
  }

  .brand-logo-frame {
    width: 104px;
    height: 32px;
  }

  .brand-logo-image {
    left: -23px;
    top: -32px;
    width: 149px;
  }

  .header-language-switcher {
    grid-template-columns: minmax(0, 116px);
  }

  .language-select {
    font-size: 0.86rem;
    max-width: 100%;
  }

  .primary-button,
  .secondary-button,
  button {
    width: 100%;
  }

  .home-search-row,
  .workbench-grid {
    grid-template-columns: 1fr;
  }

  .hero-workbench {
    aspect-ratio: auto;
  }

  .tool-shell,
  .content-panel,
  .legal-copy,
  .tool-card,
  .category-band {
    padding: 16px;
  }

  .tool-detail-hero h1 {
    font-size: 2.35rem;
  }

  .stat-box strong,
  .result-panel strong {
    font-size: 1.45rem;
  }

  .json-model-code-block {
    min-height: 320px;
    font-size: 0.82rem;
  }

  .json-model-output-head,
  .json-model-summary-list div {
    display: grid;
  }

  .tool-workspace-card > .tool-shell,
  .tool-side-card,
  .tool-help-card {
    padding: 16px;
  }

  .tool-workspace-card-header {
    padding: 14px 16px;
  }

  .tool-visual-hero-inner {
    grid-template-columns: 1fr;
  }

  .tool-visual-icon {
    width: 58px;
    height: 58px;
  }

  .tool-visual-title h1 {
    font-size: 2.1rem;
  }

  .tool-visual-title p {
    font-size: 0.98rem;
  }

  .tool-visual-badges {
    gap: 8px;
  }

  .tool-visual-badges span {
    min-height: 34px;
    padding: 6px 9px;
    font-size: 0.84rem;
  }
}

/* Home and tools directory main-merge visual pass */
.palette-text-writing,
.palette-text-writing-tools {
  --card-accent: #059669;
  --card-accent-2: #047857;
  --card-ink: #065f46;
  --card-soft: #d1fae5;
  --card-tag: #ecfdf5;
  --card-tag-muted: #f0fdf4;
  --card-border: #a7f3d0;
}

.palette-developer-data,
.palette-developer-data-tools {
  --card-accent: #6d28d9;
  --card-accent-2: #4f46e5;
  --card-ink: #4c1d95;
  --card-soft: #ede9fe;
  --card-tag: #f5f3ff;
  --card-tag-muted: #faf5ff;
  --card-border: #ddd6fe;
}

.palette-seo-marketing,
.palette-seo-marketing-tools {
  --card-accent: #0284c7;
  --card-accent-2: #0369a1;
  --card-ink: #075985;
  --card-soft: #e0f2fe;
  --card-tag: #f0f9ff;
  --card-tag-muted: #f8fafc;
  --card-border: #bae6fd;
}

.palette-calculators-converters {
  --card-accent: #ea580c;
  --card-accent-2: #c2410c;
  --card-ink: #9a3412;
  --card-soft: #ffedd5;
  --card-tag: #fff7ed;
  --card-tag-muted: #fffbeb;
  --card-border: #fed7aa;
}

.palette-date-time,
.palette-date-time-tools {
  --card-accent: #7c3aed;
  --card-accent-2: #5b21b6;
  --card-ink: #5b21b6;
  --card-soft: #ede9fe;
  --card-tag: #f5f3ff;
  --card-tag-muted: #faf5ff;
  --card-border: #ddd6fe;
}

.palette-design-css,
.palette-design-css-tools {
  --card-accent: #db2777;
  --card-accent-2: #9d174d;
  --card-ink: #9d174d;
  --card-soft: #fce7f3;
  --card-tag: #fdf2f8;
  --card-tag-muted: #fff7fb;
  --card-border: #fbcfe8;
}

.palette-image-pdf-file,
.palette-image-pdf-file-tools {
  --card-accent: #0891b2;
  --card-accent-2: #0e7490;
  --card-ink: #155e75;
  --card-soft: #cffafe;
  --card-tag: #ecfeff;
  --card-tag-muted: #f0fdfa;
  --card-border: #a5f3fc;
}

.palette-web-network,
.palette-web-network-tools {
  --card-accent: #16a34a;
  --card-accent-2: #166534;
  --card-ink: #166534;
  --card-soft: #dcfce7;
  --card-tag: #f0fdf4;
  --card-tag-muted: #f7fee7;
  --card-border: #bbf7d0;
}

.palette-privacy-security,
.palette-privacy-security-tools {
  --card-accent: #475569;
  --card-accent-2: #1e293b;
  --card-ink: #334155;
  --card-soft: #e2e8f0;
  --card-tag: #f8fafc;
  --card-tag-muted: #f1f5f9;
  --card-border: #cbd5e1;
}

.palette-random-learning-everyday,
.palette-random-learning-everyday-tools {
  --card-accent: #ca8a04;
  --card-accent-2: #a16207;
  --card-ink: #92400e;
  --card-soft: #fef3c7;
  --card-tag: #fffbeb;
  --card-tag-muted: #fefce8;
  --card-border: #fde68a;
}

.button-label-short {
  display: none;
}

.home-minimal-header,
.tools-minimal-header {
  position: relative;
  z-index: 5;
  border-bottom: 1px solid rgba(226, 232, 240, 0.72);
  background: rgba(249, 250, 255, 0.94);
  backdrop-filter: blur(14px);
}

.home-minimal-header .shell,
.tools-minimal-header-inner {
  width: min(1760px, calc(100% - 56px));
}

.tools-minimal-header-inner {
  margin: 0 auto;
}

.home-minimal-header-inner,
.tools-minimal-header-inner {
  min-height: 86px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 18px;
}

.minimal-header-actions {
  display: inline-flex;
  align-items: center;
  justify-content: flex-end;
  gap: 12px;
  min-width: 0;
}

.minimal-language-switcher {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  margin: 0;
}

.minimal-language-switcher .language-label {
  font-size: 0.82rem;
  font-weight: 760;
  color: #64748b;
}

.minimal-language-switcher .language-select {
  min-height: 40px;
  max-width: 150px;
  border-color: rgba(203, 213, 225, 0.88);
  background: #ffffff;
}

.home-top-button,
.tools-back-home {
  display: inline-flex;
  min-height: 42px;
  align-items: center;
  justify-content: center;
  gap: 10px;
  border-radius: 8px;
  font-weight: 820;
  text-decoration: none;
  white-space: nowrap;
}

.home-top-button {
  min-width: 174px;
  background: linear-gradient(135deg, #5b5cf6, #4338ca);
  color: #ffffff;
  box-shadow: 0 14px 28px rgba(79, 70, 229, 0.22);
}

.home-top-button:hover {
  background: linear-gradient(135deg, #6366f1, #4f46e5);
  color: #ffffff;
  text-decoration: none;
}

.tools-back-home {
  border: 1px solid rgba(203, 213, 225, 0.88);
  background: #ffffff;
  color: #334155;
  padding: 0 14px;
}

.tools-back-home:hover {
  border-color: rgba(79, 70, 229, 0.36);
  color: #3730a3;
  text-decoration: none;
}

.home-minimal-main {
  min-height: calc(100svh - 86px);
  background:
    linear-gradient(180deg, #fbfcff 0%, #f7f8ff 58%, #ffffff 100%);
  overflow: hidden;
}

.home-landing-hero {
  min-height: calc(100svh - 86px);
  display: grid;
  align-items: center;
  padding: 54px 0 46px;
}

.home-landing-shell {
  width: min(1320px, calc(100% - 56px));
  display: grid;
  justify-items: center;
  text-align: center;
}

.home-hero-pill {
  display: inline-flex;
  min-height: 38px;
  align-items: center;
  border: 1px solid #e0e7ff;
  border-radius: 999px;
  background: #eef2ff;
  color: #4f46e5;
  padding: 0 14px;
  font-size: 0.86rem;
  font-weight: 820;
}

.home-landing-shell h1 {
  max-width: 930px;
  margin: 28px 0 0;
  color: #0f172a;
  font-size: 5rem;
  line-height: 1.02;
  letter-spacing: 0;
}

.home-landing-shell h1 span {
  background: linear-gradient(135deg, #5b5cf6 10%, #8b5cf6 58%, #4f46e5 100%);
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
}

.home-landing-subtitle {
  max-width: 760px;
  margin: 28px 0 0;
  color: #5b6680;
  font-size: 1.12rem;
  line-height: 1.7;
}

.home-hero-search {
  width: min(940px, 100%);
  margin-top: 42px;
}

.home-hero-search-row,
.directory-search-form {
  display: grid;
  align-items: center;
  gap: 0;
  min-height: 72px;
  border: 1px solid #c4b5fd;
  border-radius: 8px;
  background: #ffffff;
  padding: 8px;
  box-shadow: 0 18px 50px rgba(15, 23, 42, 0.08);
  transition: border-color 160ms ease, box-shadow 160ms ease, background 160ms ease;
}

.home-hero-search-row {
  grid-template-columns: auto minmax(0, 1fr) 132px;
}

.directory-search-form {
  grid-template-columns: auto minmax(0, 1fr) minmax(118px, auto) 132px;
}

.home-search-icon,
.directory-search-icon {
  display: inline-grid;
  width: 44px;
  place-items: center;
  color: #6d5bd0;
  font-size: 1.2rem;
}

.home-hero-search input,
.directory-search-form input {
  width: 100%;
  min-height: 52px;
  border: 0;
  background: transparent;
  color: #0f172a;
  font-size: 1rem;
}

.home-hero-search input:focus,
.directory-search-form input:focus {
  outline: none;
}

.home-hero-search-row:focus-within,
.directory-search-form:focus-within {
  border-color: #8b5cf6;
  box-shadow: 0 0 0 4px rgba(139, 92, 246, 0.14), 0 18px 50px rgba(79, 70, 229, 0.10);
}

.home-hero-search button,
.directory-search-form button,
.home-hero-actions .primary-button {
  min-height: 52px;
  border-radius: 8px;
  background: linear-gradient(135deg, #5b5cf6, #4f46e5);
  color: #ffffff;
  box-shadow: 0 12px 24px rgba(79, 70, 229, 0.22);
}

.home-hero-search button:hover,
.directory-search-form button:not(.directory-clear-search-button):hover,
.home-hero-actions .primary-button:hover {
  background: linear-gradient(135deg, #6366f1, #4338ca);
}

.directory-clear-search-button {
  min-height: 52px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border: 1px solid #cbd5e1;
  border-radius: 8px;
  background: #f8fafc;
  color: #334155;
  font-weight: 780;
  padding: 0 14px;
  white-space: nowrap;
}

.directory-clear-search-button:hover {
  border-color: #94a3b8;
  background: #eef2ff;
  color: #312e81;
}

.home-popular-searches {
  width: min(940px, 100%);
  display: grid;
  gap: 16px;
  margin-top: 34px;
}

.home-popular-title {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto minmax(0, 1fr);
  align-items: center;
  gap: 14px;
}

.home-popular-title span {
  height: 1px;
  background: #e2e8f0;
}

.home-popular-title p {
  margin: 0;
  color: #475569;
  font-weight: 780;
}

.home-popular-searches div:last-child,
.directory-popular-searches {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: center;
  gap: 12px;
}

.home-popular-searches a,
.directory-popular-searches a {
  display: inline-flex;
  min-height: 38px;
  align-items: center;
  gap: 8px;
  border: 1px solid #ddd6fe;
  border-radius: 999px;
  background: #f1edff;
  color: #4c1d95;
  padding: 0 14px;
  font-weight: 760;
  text-decoration: none;
  transition: background 160ms ease, border-color 160ms ease, box-shadow 160ms ease, color 160ms ease, transform 160ms ease;
}

.home-popular-searches a:hover,
.directory-popular-searches a:hover,
.home-popular-searches a:focus-visible,
.directory-popular-searches a:focus-visible {
  border-color: #c4b5fd;
  background: #ede9fe;
  color: #3730a3;
  box-shadow: 0 8px 18px rgba(79, 70, 229, 0.12);
  text-decoration: none;
  transform: translateY(-1px);
}

.home-popular-searches a span {
  color: #4f46e5;
  font-weight: 860;
}

.home-hero-actions {
  margin-top: 18px;
}

.home-capability-panel {
  width: min(1320px, 100%);
  display: grid;
  grid-template-columns: repeat(6, minmax(0, 1fr));
  gap: 0;
  margin-top: 42px;
  border-top: 1px solid rgba(226, 232, 240, 0.88);
  border-bottom: 1px solid rgba(226, 232, 240, 0.88);
  padding: 22px 0;
}

.home-capability-module {
  position: relative;
  display: grid;
  justify-items: center;
  gap: 9px;
  color: #334155;
  padding: 8px 16px;
  text-decoration: none;
}

.home-capability-module:not(:last-child)::after {
  content: "";
  position: absolute;
  top: 8px;
  right: 0;
  width: 1px;
  height: calc(100% - 16px);
  background: #e2e8f0;
}

.home-capability-icon {
  display: inline-grid;
  width: 54px;
  height: 54px;
  place-items: center;
  border-radius: 8px;
  background: #eef2ff;
  color: #4f46e5;
  font-weight: 860;
}

.home-capability-2 .home-capability-icon { background: #e0f2fe; color: #0369a1; }
.home-capability-3 .home-capability-icon { background: #ccfbf1; color: #0f766e; }
.home-capability-4 .home-capability-icon { background: #ffedd5; color: #c2410c; }
.home-capability-5 .home-capability-icon { background: #ede9fe; color: #5b21b6; }
.home-capability-6 .home-capability-icon { background: #dcfce7; color: #15803d; }

.home-capability-module strong {
  color: #0f172a;
  font-size: 1rem;
}

.home-capability-module small {
  max-width: 176px;
  color: #64748b;
  line-height: 1.45;
}

.home-minimal-main + .site-footer {
  margin-top: 0;
  border-top: 1px solid rgba(15, 23, 42, 0.08);
}

.tools-directory-layout {
  width: min(1760px, calc(100% - 56px));
  display: grid;
  grid-template-columns: minmax(300px, 360px) minmax(0, 1fr);
  align-items: start;
  gap: 24px;
  padding-top: 24px;
}

.tools-directory-main {
  min-width: 0;
  display: grid;
  gap: 24px;
}

.tools-catalog-panel,
.tools-directory-hero {
  border: 1px solid rgba(199, 210, 254, 0.72);
  border-radius: 8px;
  background: rgba(255, 255, 255, 0.96);
  box-shadow: 0 20px 56px rgba(15, 23, 42, 0.07);
}

.tools-catalog-panel {
  position: sticky;
  top: 20px;
  align-self: start;
  max-height: calc(100svh - 40px);
  overflow: auto;
  padding: 22px;
  scrollbar-width: thin;
}

.tools-catalog-head {
  display: grid;
  gap: 8px;
  margin-bottom: 14px;
}

.tools-catalog-head h2 {
  margin: 0;
  color: #0f172a;
  font-size: 1.1rem;
}

.tools-catalog-all,
.tools-catalog-primary,
.tools-catalog-toggle,
.tools-catalog-children a {
  border-radius: 8px;
  color: #334155;
  text-decoration: none;
}

.tools-catalog-all {
  display: flex;
  min-height: 48px;
  align-items: center;
  border: 1px solid #e0e7ff;
  background: #f1edff;
  color: #4c1d95;
  padding: 0 14px;
  font-weight: 820;
}

.tools-catalog-list,
.tools-catalog-group,
.tools-catalog-children {
  display: grid;
  gap: 8px;
}

.tools-catalog-group {
  border-top: 1px solid rgba(226, 232, 240, 0.82);
  padding-top: 10px;
}

.tools-catalog-primary-row {
  display: grid;
  grid-template-columns: minmax(0, 1fr) 42px;
  align-items: stretch;
  gap: 4px;
}

.tools-catalog-primary {
  display: grid;
  grid-template-columns: 34px minmax(0, 1fr);
  min-height: 54px;
  align-items: center;
  gap: 10px;
  padding: 8px 10px;
}

.tools-catalog-toggle {
  display: inline-grid;
  width: 42px;
  height: 100%;
  min-height: 54px;
  place-items: center;
  border: 0;
  border-radius: 8px;
  padding: 0;
  background: transparent;
  color: #334155;
  cursor: pointer;
  font: inherit;
  font-weight: 850;
  appearance: none;
  -webkit-appearance: none;
  box-shadow: none;
}

.tools-catalog-mini-icon {
  display: inline-grid;
  width: 28px;
  height: 28px;
  place-items: center;
  border-radius: 8px;
  background: var(--card-soft, #eef2ff);
  color: var(--card-accent, #4f46e5);
  border: 1px solid var(--card-border, #ddd6fe);
  font-size: 0.78rem;
  font-weight: 850;
}

.tools-catalog-primary strong,
.tools-catalog-primary small {
  display: block;
}

.tools-catalog-primary strong {
  color: #0f172a;
  font-size: 0.94rem;
  line-height: 1.24;
}

.tools-catalog-primary small {
  color: #64748b;
  font-size: 0.78rem;
}

.tools-catalog-toggle b {
  color: #64748b;
  transition: transform 160ms ease;
}

.tools-catalog-group.is-open .tools-catalog-toggle b {
  transform: rotate(180deg);
}

.tools-catalog-primary:hover,
.tools-catalog-toggle:hover,
.tools-catalog-primary[aria-current="true"],
.tools-catalog-group.is-open .tools-catalog-primary,
.tools-catalog-group.is-open .tools-catalog-toggle {
  background: var(--card-tag, #eef2ff);
  color: var(--card-ink, var(--card-accent, #4f46e5));
}

.tools-catalog-primary:hover,
.tools-catalog-primary[aria-current="true"],
.tools-catalog-group.is-open .tools-catalog-primary {
  box-shadow: inset 3px 0 0 var(--card-accent, #4f46e5);
}

.tools-catalog-children {
  padding: 4px 0 10px 44px;
}

.tools-catalog-children a {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  min-height: 36px;
  align-items: center;
  gap: 8px;
  padding: 8px 10px;
}

.tools-catalog-children a:hover,
.tools-catalog-children a[aria-current="true"],
.tools-catalog-all[aria-current="true"] {
  background: var(--card-tag, #eef2ff);
  color: var(--card-ink, var(--card-accent, #4f46e5));
  font-weight: 800;
}

.tools-catalog-children small {
  color: #94a3b8;
  font-weight: 760;
}

.tools-directory-hero {
  background: linear-gradient(180deg, rgba(255, 255, 255, 0.98), rgba(250, 250, 255, 0.96));
  padding: 34px 38px 30px;
}

.tools-directory-hero h1 {
  margin: 6px 0 10px;
  color: #0f172a;
  font-size: 2rem;
  letter-spacing: 0;
}

.tools-directory-hero p {
  max-width: 720px;
  color: #64748b;
}

.directory-search-form {
  margin-top: 22px;
  background: rgba(255, 255, 255, 0.98);
  box-shadow: inset 0 0 0 1px rgba(139, 92, 246, 0.04);
}

.directory-popular-searches {
  justify-content: flex-start;
  margin-top: 18px;
}

.directory-popular-searches strong {
  color: #0f172a;
  font-size: 0.92rem;
}

.directory-result-toolbar {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 16px;
  min-width: 0;
}

.directory-result-bar,
.directory-view-row {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 10px;
}

.directory-result-bar span {
  color: #334155;
  font-size: 1.04rem;
  font-weight: 820;
}

.directory-result-bar a {
  color: #4338ca;
  font-weight: 760;
}

.directory-sort-button,
.directory-view-toggle button {
  min-height: 36px;
  border: 1px solid #e0e7ff;
  border-radius: 8px;
  background: #ffffff;
  color: #334155;
  padding: 0 12px;
  box-shadow: 0 8px 18px rgba(15, 23, 42, 0.04);
  transition: background 160ms ease, border-color 160ms ease, color 160ms ease, box-shadow 160ms ease, transform 160ms ease;
}

.directory-view-toggle {
  display: inline-flex;
  gap: 4px;
}

.directory-view-toggle button[aria-current="true"] {
  border-color: #c4b5fd;
  background: #f1edff;
  color: #4338ca;
}

.directory-sort-button:hover,
.directory-view-toggle button:hover,
.directory-sort-button:focus-visible,
.directory-view-toggle button:focus-visible {
  border-color: #c4b5fd;
  background: #f5f3ff;
  color: #3730a3;
  box-shadow: 0 10px 22px rgba(79, 70, 229, 0.10);
  transform: translateY(-1px);
}

.directory-result-grid {
  grid-template-columns: repeat(auto-fill, minmax(230px, 1fr));
  align-items: stretch;
}

.directory-result-grid.is-filtering {
  opacity: 0.72;
}

.directory-result-grid .tool-card {
  min-height: 220px;
}

.directory-result-grid .tool-card h2 a {
  color: #111827;
  transition: color 160ms ease;
}

.directory-result-grid .tool-card h2 a:hover,
.directory-result-grid .tool-card h2 a:focus-visible {
  color: #4338ca;
  text-decoration: none;
}

.directory-empty {
  border: 1px dashed rgba(148, 163, 184, 0.42);
  border-radius: 8px;
  background: #ffffff;
  padding: 18px;
}

.tool-card {
  border-color: rgba(226, 232, 240, 0.88);
  border-radius: 8px;
  background: rgba(255, 255, 255, 0.98);
  box-shadow: 0 16px 38px rgba(15, 23, 42, 0.06);
  transition: border-color 160ms ease, box-shadow 160ms ease, transform 160ms ease;
}

.tool-card:hover {
  transform: translateY(-2px);
  border-color: rgba(148, 163, 184, 0.44);
  box-shadow: 0 22px 48px rgba(15, 23, 42, 0.10);
}

.tool-card-headline {
  display: grid;
  grid-template-columns: 50px minmax(0, 1fr);
  gap: 14px;
  align-items: center;
  margin-bottom: 12px;
}

.tool-card-icon {
  display: inline-grid;
  width: 48px;
  height: 48px;
  place-items: center;
  border-radius: 8px;
  border: 1px solid var(--card-border, #c7d2fe);
  background: var(--card-soft, #eef2ff);
  color: var(--card-accent, #4f46e5);
  box-shadow: inset 0 -10px 18px rgba(255, 255, 255, 0.42);
  font-size: 0.9rem;
  font-weight: 860;
}

.tool-card h2 {
  margin: 0;
  font-size: 1.02rem;
  letter-spacing: 0;
}

.tool-card p {
  font-size: 0.9rem;
  line-height: 1.55;
  margin-bottom: 0;
}

.tool-card-tags {
  display: flex;
  flex-wrap: wrap;
  gap: 7px;
  margin-top: 14px;
}

.tool-card-tags span {
  max-width: 100%;
  border: 1px solid var(--card-border, #c7d2fe);
  border-radius: 999px;
  background: var(--card-tag);
  color: var(--card-ink, var(--card-accent));
  padding: 5px 9px;
  font-size: 0.76rem;
  font-weight: 780;
  line-height: 1.2;
}

.tool-card-tags .tool-secondary-tag {
  border-color: transparent;
  background: var(--card-tag-muted, var(--card-tag));
  color: var(--card-accent);
}

.tool-card-footer {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 12px;
  margin-top: 18px;
}

.tool-card-footer > span {
  display: inline-grid;
  width: 24px;
  height: 24px;
  place-items: center;
  border-radius: 7px;
  background: var(--card-tag-muted, #f8fafc);
  color: var(--card-accent, #4f46e5);
}

.tool-card-footer .text-link {
  color: #4f46e5;
}

[dir="rtl"] .tools-catalog-primary:hover,
[dir="rtl"] .tools-catalog-primary[aria-current="true"],
[dir="rtl"] .tools-catalog-group.is-open .tools-catalog-primary {
  box-shadow: inset -3px 0 0 var(--card-accent, #4f46e5);
}

[dir="rtl"] .tools-catalog-children {
  padding-right: 44px;
  padding-left: 0;
}

@media (max-width: 1280px) {
  .home-landing-shell h1 {
    font-size: 4rem;
  }

  .home-capability-panel {
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 22px 0;
  }

  .home-capability-module:nth-child(3)::after {
    display: none;
  }

  .tools-directory-layout {
    grid-template-columns: minmax(260px, 310px) minmax(0, 1fr);
  }
}

@media (max-width: 900px) {
  .home-minimal-header .shell,
  .tools-minimal-header-inner,
  .tools-directory-layout,
  .home-landing-shell {
    width: min(100% - 28px, 1120px);
  }

  .home-minimal-header-inner,
  .tools-minimal-header-inner {
    min-height: 70px;
  }

  .home-landing-hero {
    min-height: auto;
    padding: 42px 0 38px;
  }

  .home-landing-shell h1 {
    font-size: 3rem;
  }

  .home-hero-search-row,
  .directory-search-form {
    grid-template-columns: auto minmax(0, 1fr);
    min-height: 0;
    gap: 6px 0;
  }

  .home-hero-search button,
  .directory-search-form button {
    grid-column: 1 / -1;
    width: 100%;
  }

  .directory-clear-search-button {
    grid-column: 1 / -1;
    width: 100%;
  }

  .home-capability-panel {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .home-capability-module:nth-child(2n)::after {
    display: none;
  }

  .tools-directory-layout {
    grid-template-columns: 1fr;
    padding-top: 14px;
  }

  .tools-directory-main {
    display: contents;
  }

  .tools-directory-hero {
    order: 1;
  }

  .tools-catalog-panel {
    position: static;
    max-height: none;
    order: 2;
  }

  .directory-result-toolbar {
    order: 3;
  }

  .tools-result-section {
    order: 4;
  }

  .tools-catalog-list {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .tools-catalog-children {
    padding-left: 0;
  }

  .directory-result-toolbar {
    align-items: flex-start;
    flex-direction: column;
  }
}

@media (max-width: 520px) {
  .minimal-header-actions {
    gap: 6px;
  }

  .home-minimal-header-inner,
  .tools-minimal-header-inner {
    gap: 10px;
  }

  .minimal-language-switcher {
    min-width: 0;
    flex: 0 1 auto;
  }

  .minimal-language-switcher .language-label {
    display: none;
  }

  .minimal-language-switcher .language-select {
    max-width: 82px;
    min-height: 36px;
    padding: 5px 7px;
  }

  .home-minimal-header .brand-logo-frame,
  .tools-minimal-header .brand-logo-frame {
    width: 92px;
    height: 30px;
  }

  .home-minimal-header .brand-logo-image,
  .tools-minimal-header .brand-logo-image {
    left: -21px;
    top: -30px;
    width: 136px;
    height: auto;
  }

  .button-label-full {
    display: none;
  }

  .button-label-short {
    display: inline;
  }

  .home-top-button,
  .tools-back-home {
    min-width: 58px;
    min-height: 38px;
    padding: 0 10px;
  }

  .home-top-button span[aria-hidden],
  .tools-back-home span[aria-hidden] {
    display: none;
  }

  .home-landing-shell h1 {
    font-size: 2.42rem;
  }

  .home-landing-subtitle {
    font-size: 1rem;
  }

  .home-popular-searches div:last-child,
  .directory-popular-searches {
    justify-content: flex-start;
    gap: 8px;
  }

  .home-capability-panel,
  .tools-catalog-list {
    grid-template-columns: 1fr;
  }

  .home-capability-module::after {
    display: none;
  }

  .tools-directory-hero,
  .tools-catalog-panel {
    padding: 18px;
  }

  .tools-directory-hero h1 {
    font-size: 1.85rem;
  }

  .directory-search-form {
    padding: 7px;
  }

  .directory-search-icon {
    width: 36px;
  }

  .directory-popular-searches a {
    min-height: 34px;
    padding: 0 11px;
    font-size: 0.86rem;
  }

  .directory-result-grid {
    grid-template-columns: 1fr;
  }
}