/* Final layout overrides loaded after the large legacy stylesheet. */
body.home .directory-layout {
  align-items: stretch;
}

body.home .latest-sidebar {
  display: flex;
  flex-direction: column;
  min-height: 100%;
}

body.home .bundle-card.ad-card {
  min-height: 282px;
  margin-top: auto;
  padding: 24px;
  background:
    radial-gradient(circle at 78% 12%, rgba(139, 216, 255, 0.32), transparent 30%),
    linear-gradient(145deg, #172033, #26364a 58%, #101827);
  border: 1px solid rgba(255, 255, 255, 0.16);
}

body.home .bundle-card.ad-card::before {
  content: "";
  position: absolute;
  right: 22px;
  top: 22px;
  width: 66px;
  height: 66px;
  border: 1px solid rgba(255, 255, 255, 0.24);
  border-radius: 18px;
  background: linear-gradient(135deg, rgba(255, 255, 255, 0.28), rgba(255, 255, 255, 0.04));
}

body.home .bundle-card.ad-card::after {
  content: "AD";
  position: absolute;
  right: 41px;
  top: 45px;
  color: rgba(255, 255, 255, 0.84);
  font-size: 13px;
  font-weight: 850;
  letter-spacing: 0.08em;
}

body.home .bundle-card.ad-card span {
  background: rgba(255, 255, 255, 0.14);
}

body.home .bundle-card.ad-card strong {
  max-width: 190px;
}

body.home .bundle-card.ad-card em {
  pointer-events: none;
}

body.detail {
  min-height: 100vh;
  display: flex;
  flex-direction: column;
}

body.detail main {
  flex: 1 0 auto;
}

body.detail .site-footer {
  margin-top: auto;
  flex-shrink: 0;
}

.mobile-top-ad {
  display: none;
}

.directory-empty {
  color: #64748b;
  font-size: 14px;
  font-weight: 700;
  margin: 0;
}

body.home .search-hero #clearSearch {
  align-items: center;
  background: transparent;
  color: #64748b;
  display: flex !important;
  font-size: 18px;
  font-weight: 800;
  justify-content: center;
  opacity: 0;
  pointer-events: none;
  transition: opacity 0.16s ease;
}

body.home .search-hero #toolSearch:not(:placeholder-shown) + #clearSearch {
  opacity: 1;
  pointer-events: auto;
}

/* Final icon system: colorful flat app-style tiles for every calculator icon. */
.tool-icon,
.mini-icon,
.generated-tool-icon,
body.home .tool-icon,
body.home .mini-icon,
body.detail .tool-icon,
body.detail .mini-icon,
body.detail .category-page .generated-tool-icon,
.search-suggestion .mini-icon {
  --app-a: #5db7ff;
  --app-b: #376cff;
  --glyph-line: #ffffff;
  --glyph-a: rgba(255, 255, 255, 0.88);
  --glyph-b: rgba(206, 237, 255, 0.76);
  --glyph-c: rgba(255, 227, 138, 0.74);
  position: relative;
  display: grid;
  place-items: center;
  overflow: hidden;
  color: #ffffff !important;
  background:
    linear-gradient(180deg, rgba(255, 255, 255, 0.34), rgba(255, 255, 255, 0) 46%),
    linear-gradient(135deg, var(--app-a), var(--app-b)) !important;
  border: 0 !important;
  border-radius: 14px !important;
  box-shadow: 0 12px 20px color-mix(in srgb, var(--app-b) 25%, transparent) !important;
}

.tool-icon::before,
.tool-icon::after,
.mini-icon::before,
.mini-icon::after,
.generated-tool-icon::before,
.generated-tool-icon::after {
  display: none !important;
}

body.home .top-directory .tool-icon,
.tool-card .tool-icon,
body.detail .category-page .generated-tool-icon,
.generated-tool-icon {
  width: 64px !important;
  height: 64px !important;
  min-width: 64px !important;
  border-radius: 16px !important;
}

body.home .latest-item .mini-icon,
.latest-item .mini-icon {
  width: 42px !important;
  height: 42px !important;
  min-width: 42px !important;
  border-radius: 12px !important;
}

.search-suggestion .mini-icon {
  width: 46px !important;
  height: 46px !important;
  min-width: 46px !important;
  border-radius: 13px !important;
}

.tool-icon svg,
.mini-icon svg,
.generated-tool-icon svg,
body.home .tool-icon svg,
body.home .mini-icon svg,
body.detail .category-page .generated-tool-icon svg {
  position: relative;
  z-index: 1;
  width: 50px !important;
  height: 50px !important;
  color: #ffffff !important;
  filter: none !important;
}

body.home .latest-item .mini-icon svg,
.latest-item .mini-icon svg {
  width: 32px !important;
  height: 32px !important;
}

.search-suggestion .mini-icon svg {
  width: 35px !important;
  height: 35px !important;
}

.functional-icon {
  --icon-ink: rgba(255, 255, 255, 0.96) !important;
  --icon-fill: rgba(255, 255, 255, 0.84) !important;
  --icon-fill-2: rgba(255, 255, 255, 0.54) !important;
  --icon-fill-3: rgba(255, 255, 255, 0.34) !important;
  --icon-accent: #ffffff !important;
  --icon-white: #ffffff !important;
}

.functional-icon .icon-ink,
.functional-icon .icon-accent,
.functional-icon .icon-white {
  fill: none !important;
  stroke: var(--glyph-line) !important;
  stroke-width: 2.75 !important;
  stroke-linecap: round !important;
  stroke-linejoin: round !important;
}

.functional-icon .icon-accent {
  stroke: var(--glyph-c) !important;
}

.functional-icon .icon-white {
  stroke: #ffffff !important;
}

.functional-icon .icon-fill {
  fill: #ffffff !important;
  stroke: rgba(255, 255, 255, 0.95) !important;
  stroke-width: 2.35 !important;
}

.functional-icon .icon-fill-2 {
  fill: var(--glyph-b) !important;
  stroke: rgba(255, 255, 255, 0.88) !important;
  stroke-width: 2.25 !important;
}

.functional-icon .icon-fill-3,
.functional-icon .icon-accent-fill {
  fill: var(--glyph-c) !important;
  stroke: rgba(255, 255, 255, 0.82) !important;
  stroke-width: 2.2 !important;
}

.functional-icon .icon-label {
  fill: #ffffff !important;
  stroke: none !important;
  font-family: Inter, ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif !important;
  font-size: 12px !important;
  font-weight: 900 !important;
  letter-spacing: 0 !important;
  text-anchor: middle !important;
  dominant-baseline: middle !important;
}

.functional-icon .icon-label-wide {
  font-size: 9px !important;
}

.functional-icon .icon-label-small {
  font-size: 10px !important;
}

.generated-tool-icon svg circle,
.generated-tool-icon svg rect,
.generated-tool-icon svg ellipse,
.generated-tool-icon svg path,
body.detail .category-page .generated-tool-icon svg circle,
body.detail .category-page .generated-tool-icon svg rect,
body.detail .category-page .generated-tool-icon svg ellipse,
body.detail .category-page .generated-tool-icon svg path {
  fill: none !important;
  stroke: #ffffff !important;
  stroke-width: 2.85 !important;
  stroke-linecap: round !important;
  stroke-linejoin: round !important;
}

.generated-tool-icon svg :nth-child(2n) {
  stroke: var(--glyph-b) !important;
}

.generated-tool-icon svg :nth-child(3n) {
  stroke: var(--glyph-c) !important;
}

body.home .quick-card .generated-tool-icon,
body.detail .quick-card .generated-tool-icon {
  width: 64px !important;
  height: 64px !important;
  min-width: 64px !important;
  border-radius: 16px !important;
}

body.home .quick-card .generated-tool-icon svg,
body.detail .quick-card .generated-tool-icon svg {
  width: 50px !important;
  height: 50px !important;
}

[data-icon*="finance"],
[data-icon="home-finance"],
[data-icon="card-finance"],
[data-icon="growth"],
[data-icon="receipt"],
[data-icon="cart"],
[data-icon="loan"],
[data-icon="mortgage"] {
  --app-a: #ffd15a;
  --app-b: #ff7a1a;
}

[data-icon="heart"],
[data-icon="scale"],
[data-icon="flame"],
[data-icon="body"],
[data-icon="tape"],
[data-icon="water"],
[data-icon="weight-down"],
[data-icon="weight-up"],
[data-icon="bmi"] {
  --app-a: #58f08a;
  --app-b: #00a979;
}

[data-icon="percent"],
[data-icon="tag"],
[data-icon="fraction"],
[data-icon="chart"],
[data-icon="calc"] {
  --app-a: #ffb347;
  --app-b: #ff5b5f;
}

[data-icon*="calendar"],
[data-icon="clock"] {
  --app-a: #ff7b7d;
  --app-b: #f43f5e;
}

[data-icon="temperature"] {
  --app-a: #ff9aa2;
  --app-b: #ff6b6b;
}

[data-icon="ruler"],
[data-icon="gauge"],
[data-icon="area"],
[data-icon="volume"],
[data-icon="database"],
[data-icon="transfer"] {
  --app-a: #6ee7d8;
  --app-b: #31a7ff;
}

[data-icon="bolt"],
[data-icon="current"],
[data-icon="resistor"],
[data-icon="capacitor"],
[data-icon="circuit"],
[data-icon="battery"],
[data-icon="plug"] {
  --app-a: #8fd3ff;
  --app-b: #4169ff;
}

[data-icon="aspect"],
[data-icon="pixels"],
[data-icon="screen"],
[data-icon="tv-distance"],
[data-icon="tv-mount"] {
  --app-a: #81c7ff;
  --app-b: #6c5cff;
}

[data-icon="hash"],
[data-icon="vault"],
[data-icon="code"],
[data-icon="link"],
[data-icon="json"],
[data-icon="ai"] {
  --app-a: #4fd1c5;
  --app-b: #3150d8;
}

[data-icon="text"],
[data-icon="book"] {
  --app-a: #ff7db8;
  --app-b: #7c3aed;
}

.tool-icon[data-icon*="finance"],
.mini-icon[data-icon*="finance"],
.tool-icon[data-icon="home-finance"],
.mini-icon[data-icon="home-finance"],
.tool-icon[data-icon="card-finance"],
.mini-icon[data-icon="card-finance"],
.tool-icon[data-icon="growth"],
.mini-icon[data-icon="growth"],
.tool-icon[data-icon="receipt"],
.mini-icon[data-icon="receipt"],
.tool-icon[data-icon="cart"],
.mini-icon[data-icon="cart"] {
  --app-a: #ffe16a !important;
  --app-b: #ff7a1a !important;
  --glyph-a: #fff9d6 !important;
  --glyph-b: #ffffff !important;
  --glyph-c: #65d6ff !important;
}

.tool-icon[data-icon="heart"],
.mini-icon[data-icon="heart"],
.tool-icon[data-icon="scale"],
.mini-icon[data-icon="scale"],
.tool-icon[data-icon="flame"],
.mini-icon[data-icon="flame"],
.tool-icon[data-icon="body"],
.mini-icon[data-icon="body"],
.tool-icon[data-icon="tape"],
.mini-icon[data-icon="tape"],
.tool-icon[data-icon="water"],
.mini-icon[data-icon="water"],
.tool-icon[data-icon="weight-down"],
.mini-icon[data-icon="weight-down"],
.tool-icon[data-icon="weight-up"],
.mini-icon[data-icon="weight-up"] {
  --app-a: #65f58c !important;
  --app-b: #00a779 !important;
  --glyph-a: #eafff4 !important;
  --glyph-b: #8cecff !important;
  --glyph-c: #ffd2e7 !important;
}

.tool-icon[data-icon="percent"],
.mini-icon[data-icon="percent"],
.tool-icon[data-icon="tag"],
.mini-icon[data-icon="tag"],
.tool-icon[data-icon="fraction"],
.mini-icon[data-icon="fraction"],
.tool-icon[data-icon="chart"],
.mini-icon[data-icon="chart"],
.tool-icon[data-icon="calc"],
.mini-icon[data-icon="calc"] {
  --app-a: #ffc34d !important;
  --app-b: #ff4f66 !important;
  --glyph-a: #fff4c9 !important;
  --glyph-b: #ffffff !important;
  --glyph-c: #b8f2ff !important;
}

.tool-icon[data-icon*="calendar"],
.mini-icon[data-icon*="calendar"],
.tool-icon[data-icon="clock"],
.mini-icon[data-icon="clock"] {
  --app-a: #ff7f8f !important;
  --app-b: #ee3c67 !important;
  --glyph-a: #ffffff !important;
  --glyph-b: #ffe3ac !important;
  --glyph-c: #c9f2ff !important;
}

.tool-icon[data-icon="temperature"],
.mini-icon[data-icon="temperature"] {
  --app-a: #ffafb5 !important;
  --app-b: #ff5d63 !important;
  --glyph-a: #ffffff !important;
  --glyph-b: #ffdf8c !important;
  --glyph-c: #a7f3ff !important;
}

.tool-icon[data-icon="ruler"],
.mini-icon[data-icon="ruler"],
.tool-icon[data-icon="gauge"],
.mini-icon[data-icon="gauge"],
.tool-icon[data-icon="area"],
.mini-icon[data-icon="area"],
.tool-icon[data-icon="volume"],
.mini-icon[data-icon="volume"],
.tool-icon[data-icon="database"],
.mini-icon[data-icon="database"],
.tool-icon[data-icon="transfer"],
.mini-icon[data-icon="transfer"] {
  --app-a: #7ff2df !important;
  --app-b: #2da4ff !important;
  --glyph-a: #ffffff !important;
  --glyph-b: #d8fff2 !important;
  --glyph-c: #ffe680 !important;
}

.tool-icon[data-icon="bolt"],
.mini-icon[data-icon="bolt"],
.tool-icon[data-icon="current"],
.mini-icon[data-icon="current"],
.tool-icon[data-icon="resistor"],
.mini-icon[data-icon="resistor"],
.tool-icon[data-icon="capacitor"],
.mini-icon[data-icon="capacitor"],
.tool-icon[data-icon="circuit"],
.mini-icon[data-icon="circuit"],
.tool-icon[data-icon="battery"],
.mini-icon[data-icon="battery"],
.tool-icon[data-icon="plug"],
.mini-icon[data-icon="plug"] {
  --app-a: #9fd8ff !important;
  --app-b: #3f63ff !important;
  --glyph-a: #ffffff !important;
  --glyph-b: #fff2a8 !important;
  --glyph-c: #ff9bd4 !important;
}

.tool-icon[data-icon="aspect"],
.mini-icon[data-icon="aspect"],
.tool-icon[data-icon="pixels"],
.mini-icon[data-icon="pixels"],
.tool-icon[data-icon="screen"],
.mini-icon[data-icon="screen"],
.tool-icon[data-icon="tv-distance"],
.mini-icon[data-icon="tv-distance"],
.tool-icon[data-icon="tv-mount"],
.mini-icon[data-icon="tv-mount"] {
  --app-a: #92d7ff !important;
  --app-b: #7057ff !important;
  --glyph-a: #ffffff !important;
  --glyph-b: #b9fff0 !important;
  --glyph-c: #ffd0a8 !important;
}

.tool-icon[data-icon="hash"],
.mini-icon[data-icon="hash"],
.tool-icon[data-icon="vault"],
.mini-icon[data-icon="vault"],
.tool-icon[data-icon="code"],
.mini-icon[data-icon="code"],
.tool-icon[data-icon="link"],
.mini-icon[data-icon="link"],
.tool-icon[data-icon="json"],
.mini-icon[data-icon="json"],
.tool-icon[data-icon="ai"],
.mini-icon[data-icon="ai"] {
  --app-a: #4fe0d2 !important;
  --app-b: #4040d8 !important;
  --glyph-a: #ffffff !important;
  --glyph-b: #c7fff3 !important;
  --glyph-c: #ffb8ed !important;
}

.tool-icon[data-icon="text"],
.mini-icon[data-icon="text"],
.tool-icon[data-icon="book"],
.mini-icon[data-icon="book"] {
  --app-a: #ff8ac1 !important;
  --app-b: #7a46e8 !important;
  --glyph-a: #ffffff !important;
  --glyph-b: #ffe0f0 !important;
  --glyph-c: #bdf5ff !important;
}

.generated-tool-icon {
  --app-a: var(--icon-bg, #5db7ff) !important;
  --app-b: var(--icon-bg-2, #376cff) !important;
  --glyph-a: #ffffff !important;
  --glyph-b: rgba(255, 255, 255, 0.7) !important;
  --glyph-c: rgba(255, 230, 128, 0.8) !important;
}

/* Function-level colors aligned to the generated category icon system. */
.tool-icon[data-icon="temperature"],
.mini-icon[data-icon="temperature"] {
  --app-a: #ffb26f !important;
  --app-b: #ff7e9e !important;
}

.tool-icon[data-icon="ruler"],
.mini-icon[data-icon="ruler"] {
  --app-a: #ffd36f !important;
  --app-b: #ffa06b !important;
}

.tool-icon[data-icon="scale"],
.mini-icon[data-icon="scale"] {
  --app-a: #7ee9c7 !important;
  --app-b: #70c8ee !important;
}

.tool-icon[data-icon="gauge"],
.mini-icon[data-icon="gauge"] {
  --app-a: #ffb26f !important;
  --app-b: #ff7e9e !important;
}

.tool-icon[data-icon="clock"],
.mini-icon[data-icon="clock"],
.tool-icon[data-icon*="calendar"],
.mini-icon[data-icon*="calendar"] {
  --app-a: #9bd7ff !important;
  --app-b: #7c6ad8 !important;
}

.tool-icon[data-icon="area"],
.mini-icon[data-icon="area"] {
  --app-a: #ffb26f !important;
  --app-b: #ff7e9e !important;
}

.tool-icon[data-icon="volume"],
.mini-icon[data-icon="volume"] {
  --app-a: #a8f28a !important;
  --app-b: #78e69f !important;
}

.tool-icon[data-icon="database"],
.mini-icon[data-icon="database"] {
  --app-a: #a8d8ff !important;
  --app-b: #8b7cf4 !important;
}

.tool-icon[data-icon="transfer"],
.mini-icon[data-icon="transfer"],
.tool-icon[data-icon="circuit"],
.mini-icon[data-icon="circuit"] {
  --app-a: #8debd8 !important;
  --app-b: #77c9ed !important;
}

.tool-icon[data-icon="plug"],
.mini-icon[data-icon="plug"] {
  --app-a: #ffb26f !important;
  --app-b: #ff7e9e !important;
}

.tool-icon[data-icon="bolt"],
.mini-icon[data-icon="bolt"] {
  --app-a: #f56bb8 !important;
  --app-b: #f44772 !important;
}

.tool-icon[data-icon="aspect"],
.mini-icon[data-icon="aspect"] {
  --app-a: #9bd7ff !important;
  --app-b: #7c6ad8 !important;
}

/* Match home/search icons to generated category pages exactly: line icons, same function colors. */
.tool-icon .functional-icon :is(path, rect, circle, ellipse, line, polyline, polygon),
.mini-icon .functional-icon :is(path, rect, circle, ellipse, line, polyline, polygon),
.search-suggestion .functional-icon :is(path, rect, circle, ellipse, line, polyline, polygon) {
  fill: none !important;
  stroke: #ffffff !important;
  stroke-width: 2.85 !important;
  stroke-linecap: round !important;
  stroke-linejoin: round !important;
}

.tool-icon .functional-icon :is(path, rect, circle, ellipse, line, polyline, polygon):nth-child(2n),
.mini-icon .functional-icon :is(path, rect, circle, ellipse, line, polyline, polygon):nth-child(2n),
.search-suggestion .functional-icon :is(path, rect, circle, ellipse, line, polyline, polygon):nth-child(2n) {
  stroke: var(--glyph-b) !important;
}

.tool-icon .functional-icon :is(path, rect, circle, ellipse, line, polyline, polygon):nth-child(3n),
.mini-icon .functional-icon :is(path, rect, circle, ellipse, line, polyline, polygon):nth-child(3n),
.search-suggestion .functional-icon :is(path, rect, circle, ellipse, line, polyline, polygon):nth-child(3n) {
  stroke: var(--glyph-c) !important;
}

.tool-icon[data-tool-id="aspect"], .mini-icon[data-tool-id="aspect"] { --app-a: #9bd7ff !important; --app-b: #7c6ad8 !important; }
.tool-icon[data-tool-id="ohms-law"], .mini-icon[data-tool-id="ohms-law"] { --app-a: #8debd8 !important; --app-b: #77c9ed !important; }
.tool-icon[data-tool-id="health-summary"], .mini-icon[data-tool-id="health-summary"] { --app-a: #7ee9c7 !important; --app-b: #70c8ee !important; }
.tool-icon[data-tool-id="temperature"], .mini-icon[data-tool-id="temperature"] { --app-a: #ffb26f !important; --app-b: #ff7e9e !important; }
.tool-icon[data-tool-id="storage-converter"], .mini-icon[data-tool-id="storage-converter"] { --app-a: #a8d8ff !important; --app-b: #8b7cf4 !important; }
.tool-icon[data-tool-id="voltage-converter"], .mini-icon[data-tool-id="voltage-converter"] { --app-a: #f56bb8 !important; --app-b: #f44772 !important; }
.tool-icon[data-tool-id="length-converter"], .mini-icon[data-tool-id="length-converter"] { --app-a: #ffd36f !important; --app-b: #ffa06b !important; }
.tool-icon[data-tool-id="bmi"], .mini-icon[data-tool-id="bmi"] { --app-a: #8debd8 !important; --app-b: #77c9ed !important; }
.tool-icon[data-tool-id="loan"], .mini-icon[data-tool-id="loan"] { --app-a: #a8d8ff !important; --app-b: #8b7cf4 !important; }
.tool-icon[data-tool-id="word-count"], .mini-icon[data-tool-id="word-count"] { --app-a: #8debd8 !important; --app-b: #77c9ed !important; }
.tool-icon[data-tool-id="power-converter"], .mini-icon[data-tool-id="power-converter"] { --app-a: #ffb26f !important; --app-b: #ff7e9e !important; }
.tool-icon[data-tool-id="sha3-hash"], .mini-icon[data-tool-id="sha3-hash"] { --app-a: #8debd8 !important; --app-b: #77c9ed !important; }
.tool-icon[data-tool-id="tv-distance"], .mini-icon[data-tool-id="tv-distance"] { --app-a: #8debd8 !important; --app-b: #77c9ed !important; }
.tool-icon[data-tool-id="water"], .mini-icon[data-tool-id="water"] { --app-a: #7ee9c7 !important; --app-b: #70c8ee !important; }
.tool-icon[data-tool-id="date-diff"], .mini-icon[data-tool-id="date-diff"] { --app-a: #ffb26f !important; --app-b: #ff7e9e !important; }
.tool-icon[data-tool-id="json-format"], .mini-icon[data-tool-id="json-format"] { --app-a: #a8d8ff !important; --app-b: #8b7cf4 !important; }

.tool-icon[data-tool-id="workdays"], .mini-icon[data-tool-id="workdays"] { --app-a: #f56bb8 !important; --app-b: #f44772 !important; }
.tool-icon[data-tool-id="age"], .mini-icon[data-tool-id="age"] { --app-a: #ffd36f !important; --app-b: #ffa06b !important; }
.tool-icon[data-tool-id="days-until"], .mini-icon[data-tool-id="days-until"] { --app-a: #f56bb8 !important; --app-b: #f44772 !important; }
.tool-icon[data-tool-id="percentage"], .mini-icon[data-tool-id="percentage"] { --app-a: #f56bb8 !important; --app-b: #f44772 !important; }
.tool-icon[data-tool-id="fraction"], .mini-icon[data-tool-id="fraction"] { --app-a: #f56bb8 !important; --app-b: #f44772 !important; }
.tool-icon[data-tool-id="average"], .mini-icon[data-tool-id="average"] { --app-a: #ffd36f !important; --app-b: #ffa06b !important; }
.tool-icon[data-tool-id="discount"], .mini-icon[data-tool-id="discount"] { --app-a: #a8f28a !important; --app-b: #78e69f !important; }
.tool-icon[data-tool-id="tip"], .mini-icon[data-tool-id="tip"] { --app-a: #a8f28a !important; --app-b: #78e69f !important; }
.tool-icon[data-tool-id="unit-price"], .mini-icon[data-tool-id="unit-price"] { --app-a: #f56bb8 !important; --app-b: #f44772 !important; }
.tool-icon[data-tool-id="weight-converter"], .mini-icon[data-tool-id="weight-converter"] { --app-a: #7ee9c7 !important; --app-b: #70c8ee !important; }
.tool-icon[data-tool-id="speed-converter"], .mini-icon[data-tool-id="speed-converter"] { --app-a: #ffb26f !important; --app-b: #ff7e9e !important; }
.tool-icon[data-tool-id="time-converter"], .mini-icon[data-tool-id="time-converter"] { --app-a: #9bd7ff !important; --app-b: #7c6ad8 !important; }
.tool-icon[data-tool-id="area-converter"], .mini-icon[data-tool-id="area-converter"] { --app-a: #ffb26f !important; --app-b: #ff7e9e !important; }
.tool-icon[data-tool-id="volume-converter"], .mini-icon[data-tool-id="volume-converter"] { --app-a: #a8f28a !important; --app-b: #78e69f !important; }
.tool-icon[data-tool-id="current-converter"], .mini-icon[data-tool-id="current-converter"] { --app-a: #6fd6d5 !important; --app-b: #8f8be8 !important; }
.tool-icon[data-tool-id="resistance-converter"], .mini-icon[data-tool-id="resistance-converter"] { --app-a: #9bd7ff !important; --app-b: #7c6ad8 !important; }
.tool-icon[data-tool-id="capacitance-converter"], .mini-icon[data-tool-id="capacitance-converter"] { --app-a: #b6f584 !important; --app-b: #76e8a8 !important; }
.tool-icon[data-tool-id="datarate-converter"], .mini-icon[data-tool-id="datarate-converter"] { --app-a: #7ee9c7 !important; --app-b: #70c8ee !important; }
.tool-icon[data-tool-id="ppi"], .mini-icon[data-tool-id="ppi"] { --app-a: #8a7bf0 !important; --app-b: #6d4bc4 !important; }
.tool-icon[data-tool-id="screen-size"], .mini-icon[data-tool-id="screen-size"] { --app-a: #ffb26f !important; --app-b: #ff7e9e !important; }
.tool-icon[data-tool-id="tv-mounting-height"], .mini-icon[data-tool-id="tv-mounting-height"] { --app-a: #ffb26f !important; --app-b: #ff7e9e !important; }
.tool-icon[data-tool-id="real-disk"], .mini-icon[data-tool-id="real-disk"] { --app-a: #8debd8 !important; --app-b: #77c9ed !important; }
.tool-icon[data-tool-id="series-resistor"], .mini-icon[data-tool-id="series-resistor"] { --app-a: #7ee9c7 !important; --app-b: #70c8ee !important; }
.tool-icon[data-tool-id="parallel-resistor"], .mini-icon[data-tool-id="parallel-resistor"] { --app-a: #ffd36f !important; --app-b: #ffa06b !important; }
.tool-icon[data-tool-id="battery-wh"], .mini-icon[data-tool-id="battery-wh"] { --app-a: #ffd56b !important; --app-b: #ff9f6f !important; }
.tool-icon[data-tool-id="kwh-to-ah"], .mini-icon[data-tool-id="kwh-to-ah"] { --app-a: #a8d8ff !important; --app-b: #8b7cf4 !important; }
.tool-icon[data-tool-id="bmr"], .mini-icon[data-tool-id="bmr"] { --app-a: #ffd36f !important; --app-b: #ffa06b !important; }
.tool-icon[data-tool-id="body-fat"], .mini-icon[data-tool-id="body-fat"] { --app-a: #9bd7ff !important; --app-b: #7c6ad8 !important; }
.tool-icon[data-tool-id="waist-ratio"], .mini-icon[data-tool-id="waist-ratio"] { --app-a: #9bd7ff !important; --app-b: #7c6ad8 !important; }
.tool-icon[data-tool-id="weight-loss"], .mini-icon[data-tool-id="weight-loss"] { --app-a: #8debd8 !important; --app-b: #77c9ed !important; }
.tool-icon[data-tool-id="weight-gain"], .mini-icon[data-tool-id="weight-gain"] { --app-a: #ffb26f !important; --app-b: #ff7e9e !important; }
.tool-icon[data-tool-id="ponderal-index"], .mini-icon[data-tool-id="ponderal-index"] { --app-a: #f56bb8 !important; --app-b: #f44772 !important; }
.tool-icon[data-tool-id="mortgage"], .mini-icon[data-tool-id="mortgage"] { --app-a: #f56bb8 !important; --app-b: #f44772 !important; }
.tool-icon[data-tool-id="compound"], .mini-icon[data-tool-id="compound"] { --app-a: #8a7bf0 !important; --app-b: #6d4bc4 !important; }
.tool-icon[data-tool-id="roi"], .mini-icon[data-tool-id="roi"] { --app-a: #9bd7ff !important; --app-b: #7c6ad8 !important; }
.tool-icon[data-tool-id="hash"], .mini-icon[data-tool-id="hash"] { --app-a: #9bd7ff !important; --app-b: #7c6ad8 !important; }
.tool-icon[data-tool-id="sha384-hash"], .mini-icon[data-tool-id="sha384-hash"] { --app-a: #9bd7ff !important; --app-b: #7c6ad8 !important; }
.tool-icon[data-tool-id="sha512-hash"], .mini-icon[data-tool-id="sha512-hash"] { --app-a: #a8f28a !important; --app-b: #78e69f !important; }
.tool-icon[data-tool-id="ripemd160-hash"], .mini-icon[data-tool-id="ripemd160-hash"] { --app-a: #7ee9c7 !important; --app-b: #70c8ee !important; }
.tool-icon[data-tool-id="data-vault"], .mini-icon[data-tool-id="data-vault"] { --app-a: #ffd36f !important; --app-b: #ffa06b !important; }
.tool-icon[data-tool-id="base64"], .mini-icon[data-tool-id="base64"] { --app-a: #7ee9c7 !important; --app-b: #70c8ee !important; }
.tool-icon[data-tool-id="url-encoder"], .mini-icon[data-tool-id="url-encoder"] { --app-a: #9bd7ff !important; --app-b: #7c6ad8 !important; }
.tool-icon[data-tool-id="timestamp"], .mini-icon[data-tool-id="timestamp"] { --app-a: #9bd7ff !important; --app-b: #7c6ad8 !important; }
.tool-icon[data-tool-id="reading-time"], .mini-icon[data-tool-id="reading-time"] { --app-a: #a8d8ff !important; --app-b: #8b7cf4 !important; }
.tool-icon[data-tool-id="token-estimator"], .mini-icon[data-tool-id="token-estimator"] { --app-a: #f56bb8 !important; --app-b: #f44772 !important; }

.tool-icon svg .icon-unique-dot,
.mini-icon svg .icon-unique-dot,
.generated-tool-icon svg .icon-unique-dot,
.functional-icon .icon-unique-dot {
  fill: #ffffff !important;
  stroke: none !important;
}

.tool-icon svg .icon-unique-stem,
.mini-icon svg .icon-unique-stem,
.generated-tool-icon svg .icon-unique-stem,
.functional-icon .icon-unique-stem {
  fill: none !important;
  stroke: rgba(255, 255, 255, 0.82) !important;
  stroke-width: 1.8 !important;
  stroke-linecap: round !important;
}

.site-footer .disclaimer-link {
  appearance: none;
  border: 0;
  background: transparent;
  color: inherit;
  cursor: pointer;
  font: inherit;
  opacity: 0.52;
  padding: 0;
  text-align: left;
  text-decoration: none;
}

.site-footer .disclaimer-link:hover,
.site-footer .disclaimer-link:focus-visible {
  opacity: 0.9;
  text-decoration: underline;
}

.disclaimer-modal {
  align-items: center;
  display: none;
  inset: 0;
  justify-content: center;
  padding: 24px;
  position: fixed;
  z-index: 2000;
}

.disclaimer-modal.is-open {
  display: flex;
}

.disclaimer-backdrop {
  background: rgba(15, 23, 42, 0.34);
  inset: 0;
  position: absolute;
}

.disclaimer-dialog {
  background: #ffffff;
  border: 1px solid rgba(148, 163, 184, 0.42);
  border-radius: 14px;
  box-shadow: 0 24px 70px rgba(15, 23, 42, 0.24);
  color: #1f2937;
  max-width: 520px;
  padding: 26px 28px 24px;
  position: relative;
  width: min(100%, 520px);
}

.disclaimer-dialog h2 {
  color: #111827;
  font-size: 28px;
  line-height: 1.15;
  margin: 0 0 14px;
}

.disclaimer-dialog p {
  color: #4b5563;
  font-size: 14px;
  line-height: 1.65;
  margin: 0 0 12px;
}

.disclaimer-dialog p:last-child {
  margin-bottom: 0;
}

.disclaimer-kicker {
  color: #64748b !important;
  font-size: 11px !important;
  font-weight: 800;
  letter-spacing: 0.08em;
  margin-bottom: 8px !important;
  text-transform: uppercase;
}

.disclaimer-close {
  align-items: center;
  background: #f1f5f9;
  border: 1px solid rgba(148, 163, 184, 0.35);
  border-radius: 999px;
  color: #334155;
  cursor: pointer;
  display: flex;
  font-size: 20px;
  height: 34px;
  justify-content: center;
  line-height: 1;
  position: absolute;
  right: 16px;
  top: 16px;
  width: 34px;
}

.disclaimer-close:hover,
.disclaimer-close:focus-visible {
  background: #e2e8f0;
}

.local-accuracy-graphic {
  align-items: flex-end;
  background:
    linear-gradient(135deg, rgba(124, 106, 216, 0.24), rgba(112, 200, 238, 0.18)),
    #f8fafc;
  border: 1px solid rgba(148, 163, 184, 0.22);
  border-radius: 18px;
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.72);
  display: flex;
  gap: 14px;
  height: 100%;
  justify-content: center;
  min-height: 210px;
  overflow: hidden;
  padding: 36px;
  position: relative;
  width: 100%;
}

.local-accuracy-graphic::before {
  border: 2px solid rgba(37, 99, 235, 0.16);
  border-radius: 999px;
  content: "";
  height: 150px;
  left: 50%;
  position: absolute;
  top: 50%;
  transform: translate(-50%, -50%);
  width: 150px;
}

.local-accuracy-graphic::after {
  background: linear-gradient(135deg, #8debd8, #7c6ad8);
  border-radius: 999px;
  content: "";
  height: 68px;
  left: 50%;
  position: absolute;
  top: 50%;
  transform: translate(-50%, -50%);
  width: 68px;
}

.local-accuracy-graphic span {
  background: linear-gradient(180deg, #9bd7ff, #7c6ad8);
  border-radius: 999px 999px 10px 10px;
  display: block;
  position: relative;
  width: 34px;
  z-index: 1;
}

.local-accuracy-graphic span:nth-child(1) {
  height: 74px;
}

.local-accuracy-graphic span:nth-child(2) {
  height: 118px;
}

.local-accuracy-graphic span:nth-child(3) {
  height: 92px;
}

@media (max-width: 640px) {
  .disclaimer-modal {
    align-items: flex-end;
    padding: 16px;
  }

  .disclaimer-dialog {
    border-radius: 14px;
    padding: 24px 22px 22px;
  }
}

@media (max-width: 860px) {
  html,
  body {
    max-width: 100%;
    overflow-x: hidden;
  }

  body.home,
  body.detail {
    width: 100%;
  }

  body.home main,
  body.detail main {
    box-sizing: border-box;
    margin-left: auto !important;
    margin-right: auto !important;
    max-width: 100vw !important;
    overflow-x: hidden;
    padding-left: 12px !important;
    padding-right: 12px !important;
    width: 100% !important;
  }

  .site-header.figma-home-header,
  body.home .site-header.figma-home-header,
  body.detail .site-header.figma-home-header {
    box-sizing: border-box;
    display: grid !important;
    gap: 8px 10px !important;
    grid-template-columns: minmax(0, 1fr) auto !important;
    max-width: 100vw !important;
    overflow: hidden;
    padding: 8px 12px !important;
    width: 100% !important;
  }

  .site-header.figma-home-header .brand,
  body.home .figma-home-header .brand,
  body.detail .site-header.figma-home-header .brand {
    min-width: 0;
  }

  .site-header.figma-home-header .brand span,
  body.home .figma-home-header .brand span,
  body.detail .site-header.figma-home-header .brand span {
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
  }

  .site-header.figma-home-header .global-search,
  body.home .figma-home-header .global-search,
  body.detail .site-header.figma-home-header .global-search {
    grid-column: 2;
    justify-self: end;
    max-width: 48px !important;
    min-width: 48px;
    overflow: visible;
    width: 48px !important;
  }

  .site-header.figma-home-header .global-search input,
  body.home .figma-home-header .global-search input,
  body.detail .site-header.figma-home-header .global-search input {
    opacity: 0;
    padding: 0 !important;
    pointer-events: none;
    width: 0 !important;
  }

  .site-header.figma-home-header .global-search:focus-within,
  body.home .figma-home-header .global-search:focus-within,
  body.detail .site-header.figma-home-header .global-search:focus-within {
    grid-column: 1 / -1;
    max-width: 100% !important;
    width: 100% !important;
  }

  .site-header.figma-home-header .global-search:focus-within input,
  body.home .figma-home-header .global-search:focus-within input,
  body.detail .site-header.figma-home-header .global-search:focus-within input {
    min-width: 0;
    opacity: 1;
    padding: 0 48px 0 18px !important;
    pointer-events: auto;
    width: 100% !important;
  }

  .site-header.figma-home-header .figma-home-nav,
  body.home .site-header.figma-home-header .figma-home-nav,
  body.detail .site-header.figma-home-header .figma-home-nav {
    box-sizing: border-box;
    display: flex !important;
    gap: 14px !important;
    grid-column: 1 / -1;
    max-width: 100%;
    margin-left: 0 !important;
    overflow-x: auto;
    padding: 0 12px 2px 12px !important;
    position: static !important;
    left: auto !important;
    right: auto !important;
    scroll-padding-left: 12px;
    scrollbar-width: none;
    transform: none !important;
    width: 100% !important;
    white-space: nowrap;
  }

  .site-header.figma-home-header .figma-home-nav a,
  body.home .site-header.figma-home-header .figma-home-nav a,
  body.detail .site-header.figma-home-header .figma-home-nav a {
    flex: 0 0 auto;
  }

  .site-header.figma-home-header .figma-home-nav::-webkit-scrollbar,
  body.home .site-header.figma-home-header .figma-home-nav::-webkit-scrollbar,
  body.detail .site-header.figma-home-header .figma-home-nav::-webkit-scrollbar {
    display: none;
  }

  body.home .search-hero {
    margin: 0 !important;
    max-width: 100% !important;
    padding: 18px 0 12px !important;
    width: 100% !important;
  }

  body.home .search-hero h1 {
    display: none !important;
  }

  body.home .search-panel,
  body.home .search-hero .search-row,
  body.home .search-input-wrap {
    box-sizing: border-box;
    max-width: 100% !important;
    width: 100% !important;
  }

  body.home .search-hero input {
    font-size: 14px !important;
    min-height: 52px;
    padding-left: 46px !important;
    padding-right: 42px !important;
  }

  body.home .category-tabs {
    display: flex !important;
    gap: 8px;
    margin-top: 10px !important;
    max-width: 100%;
    overflow-x: auto;
    padding-bottom: 4px;
    scrollbar-width: none;
  }

  body.home .category-tabs::-webkit-scrollbar {
    display: none;
  }

  body.home .directory-layout {
    display: block !important;
    margin-top: 8px !important;
    max-width: 100% !important;
    width: 100% !important;
  }

  body.home .mobile-top-ad {
    align-items: center;
    background:
      radial-gradient(circle at 88% 16%, rgba(139, 216, 255, 0.24), transparent 28%),
      linear-gradient(135deg, #172033, #26364a);
    border: 1px solid rgba(255, 255, 255, 0.16);
    border-radius: 14px;
    box-shadow: 0 12px 28px rgba(15, 23, 42, 0.12);
    box-sizing: border-box;
    color: #ffffff;
    display: flex;
    gap: 10px;
    justify-content: space-between;
    margin: 0 0 12px !important;
    max-width: 100% !important;
    min-height: 48px;
    padding: 10px 12px;
    width: 100% !important;
  }

  body.home .mobile-top-ad span {
    background: rgba(255, 255, 255, 0.16);
    border-radius: 999px;
    color: rgba(255, 255, 255, 0.78);
    flex: 0 0 auto;
    font-size: 10px;
    font-weight: 850;
    letter-spacing: 0.08em;
    padding: 5px 8px;
    text-transform: uppercase;
  }

  body.home .mobile-top-ad strong {
    color: rgba(255, 255, 255, 0.92);
    flex: 1 1 auto;
    font-size: 12px;
    font-weight: 800;
    overflow: hidden;
    text-align: right;
    text-overflow: ellipsis;
    white-space: nowrap;
  }

  body.home .top-directory,
  body.home .latest-sidebar,
  body.home .accuracy-section,
  body.home .directory-band,
  body.home .content-grid {
    box-sizing: border-box;
    max-width: 100% !important;
    min-width: 0 !important;
    width: 100% !important;
  }

  body.home .top-directory .section-heading,
  body.home .latest-sidebar .section-heading {
    align-items: baseline;
    gap: 12px;
    margin-bottom: 12px !important;
  }

  body.home .top-directory .section-heading h2,
  body.home .latest-sidebar h2 {
    font-size: 26px !important;
    line-height: 1.1;
  }

  body.home .top-directory .quick-grid {
    display: grid !important;
    gap: 10px !important;
    grid-template-columns: 1fr !important;
    max-width: 100% !important;
    width: 100% !important;
  }

  body.home .top-directory .quick-card {
    box-sizing: border-box;
    grid-template-columns: 58px minmax(0, 1fr) !important;
    max-width: 100% !important;
    min-height: 96px !important;
    min-width: 0 !important;
    padding: 12px !important;
    width: 100% !important;
  }

  body.home .top-directory .quick-card *,
  body.home .latest-item * {
    min-width: 0;
  }

  body.home .top-directory .quick-card strong {
    font-size: 18px !important;
    overflow-wrap: anywhere;
  }

  body.home .top-directory .quick-card p {
    font-size: 11px !important;
    line-height: 1.45;
  }

  body.home .latest-sidebar {
    margin-top: 18px !important;
  }

  body.home .latest-sidebar .latest-list,
  body.home .latest-sidebar #latestTools.latest-list {
    display: flex !important;
    flex-direction: column !important;
    gap: 8px !important;
    max-width: 100% !important;
    overflow: visible !important;
    width: 100% !important;
  }

  body.home .latest-item {
    box-sizing: border-box;
    display: grid !important;
    grid-template-columns: 44px minmax(0, 1fr) !important;
    max-width: 100% !important;
    min-width: 0 !important;
    overflow: hidden;
    width: 100% !important;
  }

  body.home .latest-item span:last-child {
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
  }

  body.home .bundle-card.ad-card {
    box-sizing: border-box;
    margin-top: 16px !important;
    max-height: none;
    max-width: 100% !important;
    min-height: 220px !important;
    padding: 18px !important;
    width: 100% !important;
  }

  body.home .accuracy-section {
    margin-top: 24px !important;
  }

  .local-accuracy-graphic {
    min-height: 150px;
  }

  body.home .site-footer,
  body.detail .site-footer {
    box-sizing: border-box;
    margin-left: 0 !important;
    margin-right: 0 !important;
    max-width: 100% !important;
    padding-left: 12px !important;
    padding-right: 12px !important;
    width: 100% !important;
  }

  body.detail .breadcrumb,
  body.detail .detail-hero,
  body.detail .tool-shell,
  body.detail .tool-page-app,
  body.detail .calculator-area,
  body.detail .article-layout,
  body.detail .content-card,
  body.detail .ad-slot,
  body.detail .category-page {
    box-sizing: border-box;
    max-width: 100% !important;
    min-width: 0 !important;
    width: 100% !important;
  }

  body.detail .breadcrumb {
    overflow-x: auto;
    white-space: nowrap;
  }

  body.detail .detail-hero {
    display: grid !important;
    gap: 14px !important;
    grid-template-columns: 1fr !important;
  }

  body.detail .tool-intro,
  body.detail .calculator-area {
    padding: 16px !important;
  }

  body.detail .calculator-header {
    align-items: flex-start;
    gap: 12px;
  }

  body.detail .action-stack,
  body.detail .preset-row {
    display: flex !important;
    flex-wrap: wrap;
    gap: 8px;
  }

  body.detail #calculatorPanel {
    display: grid !important;
    grid-template-columns: 1fr !important;
    max-width: 100%;
  }

  body.detail .field,
  body.detail .field input,
  body.detail .field select,
  body.detail .field textarea,
  body.detail .result-panel,
  body.detail #resultOutput {
    box-sizing: border-box;
    max-width: 100% !important;
    min-width: 0 !important;
    width: 100% !important;
  }

  body.detail .ad-slot {
    min-height: 110px;
  }

  body.detail .category-page .quick-grid {
    display: grid !important;
    gap: 12px !important;
    grid-template-columns: 1fr !important;
    max-width: 100% !important;
  }
}