/* AdeDX modern UI layer. Loaded after page-local styles for a consistent tool shell. */
:root,
[data-theme="light"] {
  --bg: #f7f8fb;
  --bg2: #eef2f7;
  --sur: #ffffff;
  --sur2: #f9fafb;
  --sur3: #eef2f7;
  --bdr: #d8dee9;
  --bdr2: #b9c3d3;
  --tx: #111827;
  --tx2: #425166;
  --tx3: #728096;
  --nav-bg: rgba(255, 255, 255, .92);
  --a: #2563eb;
  --a2: #0f766e;
  --acc: #c2410c;
  --glow: rgba(37, 99, 235, .16);
  --ring: rgba(37, 99, 235, .18);
  --card-sh: 0 1px 2px rgba(15, 23, 42, .06), 0 10px 30px rgba(15, 23, 42, .06);
  --card-sh-h: 0 2px 6px rgba(15, 23, 42, .08), 0 16px 42px rgba(15, 23, 42, .08);
  --dot-color: transparent;
}

[data-theme="dark"] {
  --bg: #0b1019;
  --bg2: #111827;
  --sur: #121a26;
  --sur2: #182231;
  --sur3: #202c3d;
  --bdr: #2b3748;
  --bdr2: #425166;
  --tx: #f8fafc;
  --tx2: #c3ccda;
  --tx3: #8995a8;
  --nav-bg: rgba(11, 16, 25, .92);
  --a: #60a5fa;
  --a2: #34d399;
  --acc: #fb923c;
  --glow: rgba(96, 165, 250, .16);
  --ring: rgba(96, 165, 250, .2);
  --card-sh: 0 1px 2px rgba(0, 0, 0, .28), 0 16px 42px rgba(0, 0, 0, .18);
  --card-sh-h: 0 2px 8px rgba(0, 0, 0, .34), 0 20px 52px rgba(0, 0, 0, .22);
  --dot-color: transparent;
}

html {
  background: var(--bg);
  text-size-adjust: 100%;
}

body {
  background: var(--bg) !important;
  background-image: none !important;
  color: var(--tx);
  letter-spacing: 0;
  overflow-x: hidden;
}

body,
input,
textarea,
select,
button {
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}

h1,
h2,
h3,
.logo,
.t-title,
.seo-h2,
.nav-cat-badge {
  letter-spacing: 0 !important;
}

nav {
  height: 64px;
  padding-inline: 1rem !important;
  border-bottom: 1px solid var(--bdr) !important;
  box-shadow: 0 1px 0 rgba(15, 23, 42, .04) !important;
}

.logo,
.foot-logo {
  color: var(--tx) !important;
  background: none !important;
  -webkit-text-fill-color: currentColor !important;
}

.nav-search-link,
.theme-btn,
.mob-sb-btn,
.nav-cat-badge,
.pg-sb-count {
  border-radius: 8px !important;
}

.nav-search-link {
  background: var(--sur2) !important;
  border-color: var(--bdr) !important;
  min-width: min(380px, 42vw) !important;
}

.theme-btn,
.mob-sb-btn {
  background: var(--sur) !important;
  border-color: var(--bdr) !important;
  color: var(--tx2) !important;
}

.theme-btn:hover,
.mob-sb-btn:hover,
.nav-search-link:hover {
  border-color: var(--bdr2) !important;
  box-shadow: 0 8px 24px rgba(15, 23, 42, .08) !important;
}

.pg-layout,
.pg-wrap {
  grid-template-columns: 270px minmax(0, 1fr) !important;
}

.pg-sidebar {
  top: 64px !important;
  height: calc(100vh - 64px) !important;
  background: var(--sur) !important;
  border-right: 1px solid var(--bdr) !important;
  box-shadow: inset -1px 0 0 rgba(15, 23, 42, .02);
}

.pg-sb-header,
.sb-logo-row {
  padding: .9rem 1rem !important;
}

.pg-sb-search input,
#sbSearch,
.sb-search input {
  border-radius: 8px !important;
  background: var(--sur2) !important;
  border: 1px solid var(--bdr) !important;
  color: var(--tx) !important;
}

.pg-sb-search input:focus,
#sbSearch:focus,
.sb-search input:focus {
  border-color: var(--a) !important;
  box-shadow: 0 0 0 4px var(--ring) !important;
}

.pg-sb-cat-title,
.sb-section-title,
.sb-cat {
  letter-spacing: .04em !important;
}

.pg-sb-item,
.sb-item {
  display: block !important;
  position: relative !important;
  margin: 1px .5rem !important;
  padding: .64rem .75rem .64rem 1rem !important;
  border: 0 !important;
  border-radius: 8px !important;
  color: var(--tx2) !important;
  font-size: .9rem !important;
  line-height: 1.35 !important;
  overflow-wrap: anywhere;
  transition: background-color .16s ease, color .16s ease, box-shadow .16s ease;
}

.pg-sb-item:hover,
.sb-item:hover {
  background: var(--sur2) !important;
  color: var(--tx) !important;
}

.pg-sb-item.active,
.sb-item.active {
  background: color-mix(in srgb, var(--a) 10%, transparent) !important;
  color: var(--a) !important;
  border: 0 !important;
  box-shadow: inset 3px 0 0 var(--a);
  font-weight: 700 !important;
}

.pg-sb-tooltip,
.sb-tooltip,
.pg-sb-item .pg-sb-tooltip,
.sb-item .sb-tooltip {
  display: none !important;
  visibility: hidden !important;
  opacity: 0 !important;
  pointer-events: none !important;
  position: absolute !important;
  width: 0 !important;
  height: 0 !important;
  overflow: hidden !important;
}

.pg-main,
.pg-main-inner,
main,
.tool-box,
.tool-shell,
.seo-section {
  min-width: 0 !important;
}

.pg-main-inner {
  width: 100% !important;
  max-width: 1180px !important;
  margin-inline: auto !important;
  padding: 1.2rem 1.1rem 2.5rem !important;
}

.breadcrumb,
.t-bc {
  margin-bottom: .9rem !important;
}

.tool-box .t-bc,
.tool-box .t-back,
#toolBox .t-bc,
#toolBox .t-back {
  display: none !important;
}

.tool-box,
.seo-section,
.panel,
.tw,
.tool-shell,
.calc-shell,
.calc-output,
.calc-panel,
.feature-card,
.usecase-card,
.related-card,
.mini-card,
.result-card,
.adedx-guidance-card,
.foot-inner,
.card {
  border-radius: 8px !important;
  border-color: var(--bdr) !important;
  box-shadow: var(--card-sh) !important;
}

.tool-box,
.seo-section,
.foot-inner {
  background: var(--sur) !important;
}

.tool-shell,
.tw,
.calc-shell {
  background: var(--sur2) !important;
}

.panel,
.feature-card,
.usecase-card,
.related-card,
.mini-card,
.result-card,
.adedx-guidance-card,
.calc-panel,
.calc-result-card,
.swatch,
.card {
  background: var(--sur2) !important;
}

.tool-box,
.seo-section {
  padding: 1.2rem !important;
}

.t-title,
h1.t-title {
  font-size: clamp(1.65rem, 1.42rem + .9vw, 2.35rem) !important;
  line-height: 1.12 !important;
  font-weight: 800 !important;
}

.t-sub {
  color: var(--tx2) !important;
  line-height: 1.72 !important;
}

.seo-h2,
.seo-section h2 {
  font-size: 1.32rem !important;
  line-height: 1.22 !important;
}

.seo-section p,
.seo-section li,
.feature-desc,
.usecase-desc,
.related-desc,
.adedx-guidance-card p {
  color: var(--tx2) !important;
  line-height: 1.78 !important;
}

input:not([type="checkbox"]):not([type="radio"]):not([type="color"]),
textarea,
select,
.input,
.inp,
.toolInput,
.toolSelect,
.calc-input,
.calc-select,
.calc-textarea {
  border-radius: 8px !important;
  border: 1px solid var(--bdr) !important;
  background: var(--sur) !important;
  color: var(--tx) !important;
  max-width: 100% !important;
}

input:not([type="checkbox"]):not([type="radio"]):not([type="color"]):focus,
textarea:focus,
select:focus,
.input:focus,
.inp:focus,
.toolInput:focus,
.toolSelect:focus,
.calc-input:focus,
.calc-select:focus,
.calc-textarea:focus {
  border-color: var(--a) !important;
  box-shadow: 0 0 0 4px var(--ring) !important;
  outline: none !important;
}

button,
.btn,
.btn2,
.btn-primary,
.copy-btn,
.pbtn,
.tb-b,
.calc-btn {
  border-radius: 8px !important;
  letter-spacing: 0 !important;
}

.btn,
.btn-primary,
.copy-btn,
.calc-btn.primary,
.ctrls > .btn:not(.secondary):not(.ghost),
.tb-b.active {
  background: var(--a) !important;
  color: #fff !important;
  border-color: var(--a) !important;
  box-shadow: 0 10px 24px var(--glow) !important;
}

.btn2,
.pbtn,
.tb-b,
.calc-btn.secondary,
.calc-btn.ghost {
  background: var(--sur) !important;
  color: var(--tx2) !important;
  border: 1px solid var(--bdr) !important;
}

.btn:hover,
.btn2:hover,
.btn-primary:hover,
.copy-btn:hover,
.pbtn:hover,
.tb-b:hover,
.calc-btn:hover {
  transform: translateY(-1px);
  box-shadow: var(--card-sh-h) !important;
}

.tool-grid,
.ws,
.calc-grid,
.calc-result-grid,
.features-grid,
.usecases-grid,
.related-grid,
.adedx-guidance-grid,
.result-grid,
.mini-grid {
  gap: .85rem !important;
}

img,
svg,
video,
canvas,
iframe,
ins {
  max-width: 100% !important;
}

table {
  max-width: 100% !important;
}

pre,
code,
.pre-box,
.link-box,
.result-value,
.feature-desc,
.usecase-desc,
.related-desc,
.adedx-guidance-card p {
  overflow-wrap: anywhere !important;
  word-break: break-word;
}

footer {
  background: transparent !important;
}

@media (max-width: 1080px) {
  .pg-layout,
  .pg-wrap {
    grid-template-columns: minmax(0, 1fr) !important;
  }

  .mob-sb-btn {
    display: inline-flex !important;
  }

  .pg-sidebar {
    position: fixed !important;
    top: 64px !important;
    left: 0 !important;
    bottom: 0 !important;
    width: min(300px, 88vw) !important;
    max-width: 88vw !important;
    height: auto !important;
    z-index: 999 !important;
    transform: translateX(-104%) !important;
    transition: transform .2s ease !important;
  }

  .pg-sidebar.open {
    transform: translateX(0) !important;
  }

  .sb-overlay.show,
  .sb-overlay.on {
    display: block !important;
    position: fixed !important;
    inset: 0 !important;
    z-index: 998 !important;
    background: rgba(2, 6, 23, .55) !important;
    backdrop-filter: blur(3px);
  }
}

@media (max-width: 860px) {
  nav {
    padding-inline: .75rem !important;
    gap: .5rem !important;
  }

  .nav-r {
    gap: .35rem !important;
    min-width: 0 !important;
  }

  .nav-search-link {
    min-width: 0 !important;
    flex: 1 1 auto !important;
    max-width: 42vw !important;
  }

  .nav-search-link span,
  .theme-btn-label,
  .nav-cat-badge {
    display: none !important;
  }

  .pg-main-inner {
    padding: .85rem .75rem 1.6rem !important;
  }

  .tool-box,
  .seo-section {
    padding: 1rem !important;
  }

  .tool-grid,
  .ws,
  .calc-grid,
  .calc-grid.three,
  .calc-grid.cols-3,
  .calc-grid.cols-4,
  .calc-result-grid,
  .features-grid,
  .usecases-grid,
  .related-grid,
  .adedx-guidance-grid,
  .result-grid,
  .mini-grid,
  .foot-top,
  .foot-links-grid,
  .swatch-grid {
    grid-template-columns: minmax(0, 1fr) !important;
  }

  .tool-box [style*="display:grid"],
  .panel [style*="display:grid"],
  .seo-section [style*="display:grid"] {
    grid-template-columns: minmax(0, 1fr) !important;
  }

  .tool-box [style*="display:flex"],
  .panel [style*="display:flex"],
  .seo-section [style*="display:flex"],
  .actions,
  .ctrls,
  .calc-actions,
  .tool-actions,
  .option-row {
    flex-wrap: wrap !important;
    max-width: 100% !important;
  }

  .actions > *,
  .ctrls > *,
  .calc-actions > *,
  .tool-actions > *,
  .option-row > * {
    min-width: 0 !important;
  }

  .actions > button,
  .ctrls > button,
  .calc-actions > button,
  .tool-actions > button,
  .option-row > button {
    max-width: 100% !important;
  }
}

@media (max-width: 520px) {
  .t-title,
  h1.t-title {
    font-size: 1.58rem !important;
  }

  .seo-h2,
  .seo-section h2 {
    font-size: 1.18rem !important;
  }

  .pg-sb-item,
  .sb-item {
    padding-block: .72rem !important;
  }
}