:root {
  --bg: #030303;
  --surface: #0a0a0b;
  --surface-2: #101012;
  --surface-3: #151518;
  --line: #3d3d42;
  --line-soft: #27272b;
  --text: #f7f7f8;
  --muted: #a4a4ad;
  --muted-2: #74747d;
  --primary: #7452ff;
  --primary-2: #9a62ff;
  --success: #6fe0a7;
  --danger: #ff8094;
  --wrap: 1180px;
  --tool-width: 820px;
  --radius: 12px;
  --radius-sm: 9px;
}
* {
  box-sizing: border-box;
}
html {
  scroll-behavior: smooth;
}
body {
  min-width: 320px;
  margin: 0;
  background:
    radial-gradient(620px 350px at 88% 3%, rgba(103, 67, 236, 0.11), transparent 65%),
    #030303;
  color: var(--text);
  font-family: Inter, "Segoe UI", Arial, sans-serif;
  font-size: 14px;
  line-height: 1.5;
}
a {
  color: inherit;
  text-decoration: none;
}
button,
input,
select,
textarea {
  font: inherit;
}
.wrap {
  width: min(var(--wrap), calc(100% - 32px));
  margin-inline: auto;
}
.site-header {
  position: sticky;
  top: 0;
  z-index: 50;
  height: 70px;
  border-bottom: 1px solid #303035;
  background: rgba(3, 3, 3, 0.94);
  backdrop-filter: blur(14px);
}
.nav {
  height: 100%;
  display: flex;
  align-items: center;
  gap: 22px;
}
.brand,
.footer-brand {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  white-space: nowrap;
}
.brand-mark {
  display: grid;
  width: 30px;
  height: 30px;
  place-items: center;
  border-radius: 8px;
  background: linear-gradient(135deg, var(--primary), var(--primary-2));
  color: white;
  font-size: 20px;
  font-weight: 900;
  line-height: 1;
  box-shadow: 0 6px 18px rgba(116, 82, 255, 0.30);
}
.brand-word {
  font-size: 18px;
  font-weight: 900;
  letter-spacing: -0.055em;
}
.brand-tools {
  color: #f8f8fb;
}
.brand-ora {
  color: #a886ff;
}
.nav-links {
  display: flex;
  align-items: center;
  gap: 23px;
  color: #a9a9b4;
  font-size: 12px;
  font-weight: 700;
}
.nav-links a:hover {
  color: #fff;
}
.nav-cta,
.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: 37px;
  padding: 7px 13px;
  border: 1px solid #55555b;
  border-radius: 999px;
  background: #0c0c0e;
  color: #f8f8fb;
  font-size: 12px;
  font-weight: 800;
  cursor: pointer;
  transition: border-color 150ms ease, background 150ms ease, transform 150ms ease;
}
.nav-cta {
  margin-left: auto;
  min-width: 112px;
}
.nav-cta:hover,
.btn:hover {
  border-color: #8d8d98;
  background: #16161a;
  transform: translateY(-1px);
}
.btn-primary {
  border-color: transparent;
  background: linear-gradient(135deg, var(--primary), var(--primary-2));
  color: #fff;
}
.btn-primary:hover {
  background: linear-gradient(135deg, #8164ff, #aa74ff);
}
.btn-danger {
  border-color: #78414c;
  color: #ffbdc7;
}
.btn-small {
  min-height: 32px;
  padding: 5px 10px;
  font-size: 11px;
}
.btn:disabled {
  opacity: 0.52;
  cursor: not-allowed;
  transform: none;
}
.menu {
  display: none;
  margin-left: auto;
  border-radius: 8px;
}
.page-head {
  width: min(var(--tool-width), calc(100% - 32px));
  margin-inline: auto;
  padding: 30px 0 10px;
}

.eyebrow {
  margin: 0 0 5px;
  color: #b5a5ff;
  font-size: 10px;
  font-weight: 800;
  letter-spacing: 0.09em;
  text-transform: uppercase;
}
.page-title {
  margin: 0;
  color: #f7f7f8;
  font-size: clamp(24px, 3vw, 33px);
  line-height: 1.14;
  letter-spacing: -0.04em;
}
.lead {
  margin: 6px 0 0;
  color: var(--muted);
  font-size: 13px;
}
main > .wrap {
  width: min(var(--tool-width), calc(100% - 32px));
}
.panel,
.card {
  border: 1px solid var(--line);
  border-radius: var(--radius);
  background: linear-gradient(145deg, #0b0b0c, #0e0e10);
}
.panel {
  width: 100%;
  margin: 14px auto 22px;
  padding: 14px;
}
.card {
  padding: 16px;
}
.tool-layout {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 14px;
}
.field {
  display: flex;
  flex-direction: column;
  gap: 5px;
}
.field label {
  color: #dedee4;
  font-size: 11px;
  font-weight: 800;
}
.field input,
.field textarea,
.field select {
  width: 100%;
  min-height: 39px;
  padding: 8px 10px;
  border: 1px solid #49494f;
  border-radius: 7px;
  outline: none;
  background: #08080a;
  color: #f7f7f8;
  font-size: 12px;
}
.field textarea {
  min-height: 170px;
  resize: vertical;
}
.field input:focus,
.field textarea:focus,
.field select:focus {
  border-color: #957cff;
  box-shadow: 0 0 0 3px rgba(116, 82, 255, 0.15);
}
.toolbar,
.tool-actions {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 8px;
}
.toolbar {
  margin: 14px 0;
}
.note,
.hint {
  margin: 0;
  color: var(--muted-2);
  font-size: 11px;
}
.status {
  min-height: 22px;
  color: var(--muted);
  font-size: 12px;
}
.status.success {
  color: var(--success);
}
.status.error {
  color: #ff9cac;
}
.results {
  white-space: pre-wrap;
  overflow: auto;
}
.pdf-tool {
  display: grid;
  gap: 12px;
  width: 100%;
}
.pdf-upload-card {
  padding: 0;
}
.visually-hidden {
  position: absolute !important;
  width: 1px !important;
  height: 1px !important;
  overflow: hidden !important;
  clip: rect(0, 0, 0, 0) !important;
  white-space: nowrap !important;
}
.pdf-dropzone {
  display: flex;
  width: 100%;
  min-height: 148px;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 5px;
  padding: 18px;
  border: 1px dashed #55555b;
  border-radius: 9px;
  background: #0a0a0c;
  color: #f4f4f6;
  cursor: pointer;
}
.pdf-dropzone:hover,
.pdf-dropzone.is-dragging {
  border-color: #987fff;
  background: #101014;
}
.pdf-dropzone-icon {
  display: none;
}
.pdf-dropzone-title {
  font-size: 12px;
  font-weight: 800;
}
.pdf-dropzone-copy,
.tool-privacy-note {
  color: var(--muted-2);
  font-size: 11px;
}
.tool-privacy-note {
  margin: 8px 0 0;
  text-align: center;
}
.pdf-file-card {
  display: flex;
  min-height: 58px;
  align-items: center;
  gap: 10px;
  padding: 9px 10px;
  border: 1px solid #44444a;
  border-radius: 8px;
  background: #0a0a0c;
}
.pdf-file-icon {
  display: grid;
  width: 34px;
  height: 34px;
  flex: 0 0 auto;
  place-items: center;
  border-radius: 7px;
  background: rgba(255, 94, 118, 0.15);
  color: #ffc0ca;
  font-size: 10px;
  font-weight: 900;
}
.pdf-file-details {
  display: grid;
  min-width: 0;
  gap: 1px;
}
.pdf-file-details strong {
  overflow: hidden;
  font-size: 12px;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.pdf-file-details span {
  color: var(--muted);
  font-size: 11px;
}
.pdf-file-card .btn {
  margin-left: auto;
}
.pdf-options {
  display: grid;
  gap: 11px;
  padding: 12px;
  border: 1px solid #3e3e44;
  border-radius: 9px;
  background: #0a0a0c;
}
.pdf-options .field input {
  min-height: 39px;
}
.tool-status {
  min-height: 20px;
  padding: 8px 10px;
  border: 1px solid #414147;
  border-radius: 8px;
  background: #0a0a0c;
  color: var(--muted);
  font-size: 11px;
}
.tool-status[data-type="success"] {
  border-color: rgba(87, 205, 143, 0.45);
  color: #a5efc8;
}
.tool-status[data-type="error"] {
  border-color: rgba(255, 108, 132, 0.48);
  color: #ffb1c0;
}
.tool-status[data-type="loading"] {
  border-color: rgba(151, 124, 255, 0.55);
  color: #d2c4ff;
}
.ad-slot {
  display: flex;
  width: min(100%, 970px);
  min-height: 90px;
  align-items: center;
  justify-content: center;
  margin: 18px auto;
  border: 1px dashed transparent;
  color: transparent;
}
.site-footer {
  margin-top: 60px;
  border-top: 1px solid #2e2e33;
  background: #030303;
}
.footer-grid {
  display: grid;
  grid-template-columns: 2fr 1fr 1fr;
  gap: 24px;
  padding: 30px 0;
  color: var(--muted);
  font-size: 12px;
}
.footer-grid h3 {
  margin: 0 0 8px;
  color: #f5f5f7;
  font-size: 12px;
}
.footer-grid p {
  max-width: 270px;
  margin: 9px 0 0;
}
.footer-grid a {
  display: block;
  margin: 5px 0;
}
.footer-grid a:hover {
  color: #fff;
}
.copyright {
  padding: 13px 0;
  border-top: 1px solid #26262a;
  color: #777780;
  font-size: 11px;
}
.toast {
  position: fixed;
  right: 20px;
  bottom: 20px;
  z-index: 100;
  max-width: min(360px, calc(100% - 40px));
  padding: 10px 12px;
  border: 1px solid #55555e;
  border-radius: 8px;
  background: #131317;
  color: #f7f7f8;
  font-size: 12px;
  opacity: 0;
  pointer-events: none;
  transform: translateY(12px);
  transition: 160ms ease;
}
.toast.show {
  opacity: 1;
  transform: translateY(0);
}
.toast.success {
  border-color: #3a9b68;
}
.toast.error {
  border-color: #b74a5e;
}
.hidden {
  display: none !important;
}
@media (max-width: 760px) {
  .site-header {
    height: 60px;
  }
  .nav {
    gap: 12px;
  }
  .brand-word {
    font-size: 16px;
  }
  .brand-mark {
    width: 28px;
    height: 28px;
    font-size: 18px;
  }
  .menu {
    display: inline-flex;
  }
  .nav-cta {
    display: none;
  }
  .nav-links {
    display: none;
  }
  .nav-links.open {
    position: absolute;
    top: 60px;
    right: 0;
    left: 0;
    display: flex;
    flex-direction: column;
    align-items: stretch;
    gap: 0;
    padding: 10px 16px;
    border-bottom: 1px solid #343439;
    background: #0a0a0c;
  }
  .nav-links.open a {
    padding: 10px 0;
  }
  .page-head {
    padding-top: 22px;
  }
  .page-head::before {
    margin-bottom: 12px;
  }
  .tool-layout,
  .footer-grid {
    grid-template-columns: 1fr;
  }
  .footer-grid {
    gap: 17px;
  }
  .pdf-file-card {
    align-items: flex-start;
    flex-wrap: wrap;
  }
  .pdf-file-card .btn {
    width: 100%;
    margin-left: 0;
  }
  .tool-actions .btn {
    flex: 1 1 145px;
  }
}
/* Real clickable back link for tool pages */
.back-link {
  display: inline-flex;
  align-items: center;
  min-height: 27px;
  margin-bottom: 15px;
  padding: 4px 9px;
  border: 1px solid #4a4a50;
  border-radius: 6px;
  background: #0b0b0d;
  color: #e5e5e9;
  font-size: 10px;
  font-weight: 800;
}
.back-link:hover {
  border-color: #8b8b95;
  background: #151519;
}
.page-head::before {
  display: none;
}
/* ===== Home page rebuild: wide layout, matching the project reference rhythm ===== */
.home-page .wrap {
  width: min(1140px, calc(100% - 48px));
}
.home-hero {
  display: grid;
  grid-template-columns: minmax(0, 1.06fr) minmax(360px, 0.94fr);
  align-items: center;
  gap: 56px;
  min-height: 470px;
  padding: 72px 0 54px;
}
.home-hero-copy {
  max-width: 640px;
}
.home-hero .eyebrow {
  margin: 0 0 17px;
  color: #a893ff;
  font-size: 11px;
  letter-spacing: 0.12em;
}
.home-hero h1 {
  margin: 0;
  color: #fafafa;
  font-size: clamp(42px, 4.5vw, 68px);
  font-weight: 900;
  letter-spacing: -0.065em;
  line-height: 0.97;
}
.home-hero h1 span {
  color: #855dff;
}
.home-hero p {
  max-width: 630px;
  margin: 22px 0 0;
  color: #b1b1bb;
  font-size: 16px;
  line-height: 1.65;
}
.home-hero .actions {
  margin-top: 26px;
}
.home-hero .btn {
  min-height: 44px;
  padding: 10px 16px;
  font-size: 13px;
}
.trust-line {
  display: flex;
  flex-wrap: wrap;
  gap: 10px 14px;
  margin-top: 14px;
  color: #e0e0e4;
  font-size: 12px;
  font-weight: 650;
}
.trust-line span {
  display: inline-flex;
  align-items: center;
  gap: 5px;
}
.check-mark {
  width: 11px;
  height: 7px;
  display: inline-block;
  border-bottom: 2px solid #f3f3f5;
  border-left: 2px solid #f3f3f5;
  transform: rotate(-45deg) translateY(-1px);
}
.hero-brand-art {
  position: relative;
  display: grid;
  min-height: 300px;
  place-items: center;
}
.hero-brand-art::before {
  position: absolute;
  width: 390px;
  height: 260px;
  border-radius: 50%;
  background: radial-gradient(ellipse, rgba(117, 82, 255, 0.28), rgba(85, 58, 230, 0.08) 43%, transparent 72%);
  content: "";
  filter: blur(8px);
}
.hero-tile {
  z-index: 1;
  display: grid;
  width: 210px;
  height: 210px;
  place-items: center;
  border-radius: 38px;
  background: linear-gradient(140deg, #7051f7, #9159ed);
  box-shadow: 0 24px 58px rgba(84, 51, 228, 0.42);
  color: white;
  font-size: 92px;
  font-weight: 950;
  transform: rotate(-3deg);
}
.hero-float {
  position: absolute;
  z-index: 2;
  padding: 10px 15px;
  border: 1px solid #4c4c53;
  border-radius: 999px;
  background: rgba(12, 12, 14, 0.93);
  color: #f5f5f6;
  font-size: 13px;
  font-weight: 800;
}
.hero-float-top {
  top: 55px;
  right: 10px;
}
.hero-float-bottom {
  bottom: 45px;
  left: 12px;
}
.home-features {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 16px;
  padding: 18px 0 42px;
}
.home-feature {
  min-height: 153px;
  padding: 22px;
  border: 1px solid #37373d;
  border-radius: 15px;
  background: linear-gradient(145deg, #0c0c0e, #111114);
}
.feature-symbol {
  position: relative;
  display: inline-block;
  width: 24px;
  height: 24px;
  margin-bottom: 10px;
}
.feature-lock::before {
  position: absolute;
  left: 6px;
  bottom: 2px;
  width: 13px;
  height: 12px;
  border-radius: 2px;
  background: #ffc64d;
  content: "";
}
.feature-lock::after {
  position: absolute;
  left: 8px;
  top: 1px;
  width: 9px;
  height: 11px;
  border: 3px solid #ffc64d;
  border-bottom: 0;
  border-radius: 8px 8px 0 0;
  content: "";
}
.feature-bolt::before {
  position: absolute;
  width: 11px;
  height: 20px;
  background: #ffca4f;
  clip-path: polygon(56% 0, 100% 0, 64% 40%, 100% 40%, 16% 100%, 38% 54%, 0 54%);
  content: "";
}
.feature-palette {
  border-radius: 50%;
  background: #ffca4f;
}
.feature-palette::before,
.feature-palette::after {
  position: absolute;
  width: 4px;
  height: 4px;
  border-radius: 50%;
  content: "";
}
.feature-palette::before {
  top: 5px;
  left: 5px;
  background: #ff5f74;
  box-shadow: 9px -1px 0 #76c7ff, 12px 8px 0 #7c64ff;
}
.feature-palette::after {
  bottom: 4px;
  left: 8px;
  background: #0d0d10;
}
.home-feature h3 {
  margin: 0 0 7px;
  color: #f4f4f6;
  font-size: 15px;
}
.home-feature p {
  margin: 0;
  color: #a3a3ad;
  font-size: 13px;
  line-height: 1.55;
}
.home-tools {
  padding: 22px 0 80px;
}
.tools-heading {
  display: flex;
  align-items: end;
  justify-content: space-between;
  gap: 22px;
  margin-bottom: 18px;
}
.tools-kicker {
  margin: 0 0 5px;
  color: #a893ff;
  font-size: 11px;
  font-weight: 800;
  letter-spacing: 0.11em;
  text-transform: uppercase;
}
.tools-heading h2 {
  margin: 0;
  font-size: 29px;
  letter-spacing: -0.04em;
}
.tools-heading p:not(.tools-kicker) {
  margin: 6px 0 0;
  color: #a3a3ad;
  font-size: 13px;
}
.tools-suite-link {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  min-height: 38px;
  padding: 8px 13px;
  border: 1px solid #515158;
  border-radius: 999px;
  color: #f0f0f2;
  font-size: 12px;
  font-weight: 800;
}
.tools-suite-link:hover {
  border-color: #9078ff;
}
.search-box {
  display: flex;
  align-items: center;
  gap: 9px;
  min-height: 48px;
  padding: 0 14px;
  border: 1px solid #45454b;
  border-radius: 10px;
  background: #0b0b0d;
}
.search-symbol {
  position: relative;
  width: 16px;
  height: 16px;
  border: 2px solid #9898a1;
  border-radius: 50%;
}
.search-symbol::after {
  position: absolute;
  right: -5px;
  bottom: -4px;
  width: 7px;
  height: 2px;
  background: #9898a1;
  content: "";
  transform: rotate(45deg);
}
.search-box input {
  width: 100%;
  border: 0;
  outline: 0;
  background: transparent;
  color: #f3f3f5;
  font-size: 13px;
}
.tool-grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 14px;
  margin-top: 18px;
}
.tool-card {
  display: block;
  min-height: 177px;
  padding: 17px;
  border: 1px solid #3d3d43;
  border-radius: 13px;
  background: #0b0b0d;
  transition: border-color 160ms ease, transform 160ms ease, background 160ms ease;
}
.tool-card:hover {
  border-color: #8167f7;
  background: #111115;
  transform: translateY(-2px);
}
.tool-card-icon {
  position: relative;
  display: block;
  width: 27px;
  height: 27px;
  margin-bottom: 13px;
  border: 1px solid #4e4e56;
  border-radius: 7px;
  background: #151519;
}
.tool-card-icon::before {
  position: absolute;
  inset: 7px;
  border-radius: 2px;
  background: #8b70ff;
  content: "";
}
.tool-icon-pdf::before { background: #ff6f83; }
.tool-icon-image::before { background: #54b8ff; clip-path: polygon(0 100%, 35% 45%, 55% 70%, 73% 34%, 100% 100%); }
.tool-icon-video::before { background: #ac7cff; clip-path: polygon(20% 10%, 90% 50%, 20% 90%); }
.tool-icon-audio::before { background: #50d2d0; border-radius: 50%; }
.tool-icon-code::before { background: #8f7cff; clip-path: polygon(0 25%, 38% 0, 35% 100%, 0 75%, 18% 50%); }
.tool-icon-text::before { background: #f6be55; }
.tool-icon-lock::before { background: #ff9a55; border-radius: 50% 50% 4px 4px; }
.tool-icon-grid::before { background: #73d59c; }
.tool-card-category {
  display: block;
  margin-bottom: 4px;
  color: #9999a4;
  font-size: 11px;
}
.tool-card h3 {
  margin: 0;
  color: #f5f5f7;
  font-size: 15px;
  letter-spacing: -0.015em;
}
.tool-card p {
  margin: 7px 0 0;
  color: #a5a5ae;
  font-size: 12px;
  line-height: 1.52;
}
.empty-tools {
  grid-column: 1 / -1;
  padding: 18px;
  border: 1px dashed #4b4b52;
  border-radius: 10px;
  color: #a9a9b1;
}
@media (max-width: 900px) {
  .home-hero {
    grid-template-columns: 1fr;
    gap: 10px;
    padding-top: 56px;
  }
  .hero-brand-art {
    min-height: 245px;
  }
  .home-features,
  .tool-grid {
    grid-template-columns: repeat(2, 1fr);
  }
}
@media (max-width: 600px) {
  .home-page .wrap {
    width: min(100% - 32px, 1140px);
  }
  .home-hero {
    min-height: 0;
    padding: 42px 0 28px;
  }
  .home-hero h1 {
    font-size: 40px;
  }
  .home-hero p {
    font-size: 14px;
  }
  .hero-brand-art {
    min-height: 205px;
  }
  .hero-brand-art::before {
    width: 300px;
    height: 200px;
  }
  .hero-tile {
    width: 150px;
    height: 150px;
    border-radius: 28px;
    font-size: 66px;
  }
  .hero-float-top {
    top: 18px;
    right: 0;
  }
  .hero-float-bottom {
    bottom: 14px;
    left: 0;
  }
  .home-features,
  .tool-grid {
    grid-template-columns: 1fr;
  }
  .tools-heading {
    align-items: start;
    flex-direction: column;
  }
  .tools-heading h2 {
    font-size: 25px;
  }
}
/* Header and hero brand scale adjustment */
.site-header {
  height: 76px;
}
.brand {
  gap: 10px;
}
.brand-mark {
  width: 36px;
  height: 36px;
  border-radius: 10px;
  font-size: 23px;
}
.brand-word {
  font-size: 22px;
}
.nav {
  gap: 28px;
}
.nav-links {
  gap: 25px;
  font-size: 13px;
}
.nav-cta {
  min-height: 40px;
  min-width: 122px;
  padding: 8px 16px;
  font-size: 13px;
}
.home-hero {
  padding-top: 78px;
}
.hero-tile {
  width: 230px;
  height: 230px;
  border-radius: 42px;
  font-size: 100px;
}
.hero-brand-art::before {
  width: 425px;
  height: 285px;
}
.hero-float-top {
  right: -3px;
}
.hero-float-bottom {
  left: 0;
}
@media (max-width: 760px) {
  .site-header {
    height: 64px;
  }
  .brand-mark {
    width: 31px;
    height: 31px;
    border-radius: 9px;
    font-size: 20px;
  }
  .brand-word {
    font-size: 18px;
  }
  .nav-links.open {
    top: 64px;
  }
  .hero-tile {
    width: 165px;
    height: 165px;
    border-radius: 30px;
    font-size: 72px;
  }
}
/* Stronger visible scale for header and home T mark */
.site-header {
  height: 86px !important;
}
.nav {
  gap: 34px !important;
}
.brand {
  gap: 12px !important;
}
.brand-mark {
  width: 46px !important;
  height: 46px !important;
  border-radius: 13px !important;
  font-size: 29px !important;
}
.brand-word {
  font-size: 27px !important;
}
.nav-links {
  gap: 31px !important;
  font-size: 16px !important;
}
.nav-cta {
  min-height: 46px !important;
  min-width: 142px !important;
  padding: 9px 19px !important;
  font-size: 15px !important;
}
.home-hero {
  padding-top: 88px !important;
  gap: 62px !important;
}
.hero-brand-art {
  min-height: 345px !important;
}
.hero-tile {
  width: 258px !important;
  height: 258px !important;
  border-radius: 47px !important;
  font-size: 114px !important;
}
.hero-brand-art::before {
  width: 485px !important;
  height: 325px !important;
}
.hero-float {
  padding: 11px 17px !important;
  font-size: 14px !important;
}
.hero-float-top {
  top: 43px !important;
  right: -10px !important;
}
.hero-float-bottom {
  bottom: 33px !important;
  left: -5px !important;
}
@media (max-width: 760px) {
  .site-header {
    height: 68px !important;
  }
  .brand-mark {
    width: 34px !important;
    height: 34px !important;
    font-size: 22px !important;
  }
  .brand-word {
    font-size: 20px !important;
  }
  .nav-links.open {
    top: 68px !important;
  }
  .hero-brand-art {
    min-height: 240px !important;
  }
  .hero-tile {
    width: 185px !important;
    height: 185px !important;
    border-radius: 34px !important;
    font-size: 82px !important;
  }
}
/* Restore clear per-tool icons inside the unified card icon frame */
.tool-card-icon {
  display: grid !important;
  place-items: center !important;
  overflow: hidden;
}
.tool-card-icon::before {
  display: none !important;
}
.tool-card-icon-glyph {
  display: block;
  color: #f5f5f8;
  font-family: "Segoe UI Emoji", "Apple Color Emoji", "Noto Color Emoji", sans-serif;
  font-size: 16px;
  line-height: 1;
  transform: translateY(0.5px);
}
.tool-icon-pdf .tool-card-icon-glyph {
  filter: saturate(1.1);
}
.tool-icon-image .tool-card-icon-glyph {
  filter: saturate(1.05);
}
.tool-icon-video .tool-card-icon-glyph {
  filter: saturate(1.05);
}
/* ===== Password Generator professional UI ===== */
.password-panel {
  overflow: hidden;
  padding: 0 !important;
  border-color: #3f3f47 !important;
  background: linear-gradient(145deg, #0c0c0f, #111116) !important;
}
.password-app {
  display: grid;
  grid-template-columns: minmax(0, 0.95fr) minmax(0, 1.05fr);
  min-height: 390px;
}
.password-settings,
.password-result {
  padding: 24px;
}
.password-settings {
  border-right: 1px solid #36363d;
  background: rgba(8, 8, 10, 0.50);
}
.password-section-heading {
  display: flex;
  align-items: flex-start;
  gap: 11px;
  margin-bottom: 22px;
}
.password-section-heading h2 {
  margin: 0;
  color: #f7f7f9;
  font-size: 17px;
  letter-spacing: -0.025em;
}
.password-section-heading p {
  margin: 3px 0 0;
  color: #9d9da7;
  font-size: 12px;
}
.password-heading-icon,
.password-result-icon {
  position: relative;
  display: grid;
  width: 32px;
  height: 32px;
  flex: 0 0 auto;
  place-items: center;
  border: 1px solid #585861;
  border-radius: 9px;
  background: #17171c;
}
.password-heading-icon::before {
  width: 12px;
  height: 14px;
  border: 2px solid #ffc557;
  border-radius: 3px;
  content: "";
}
.password-heading-icon::after {
  position: absolute;
  top: 7px;
  width: 8px;
  height: 7px;
  border: 2px solid #ffc557;
  border-bottom: 0;
  border-radius: 7px 7px 0 0;
  content: "";
}
.password-result-icon::before {
  width: 13px;
  height: 13px;
  border: 2px solid #a68bff;
  border-radius: 50%;
  content: "";
}
.password-result-icon::after {
  position: absolute;
  width: 2px;
  height: 9px;
  border-radius: 2px;
  background: #a68bff;
  transform: rotate(45deg) translate(7px, 5px);
  content: "";
}
.password-length-field {
  gap: 6px !important;
}
.length-control {
  position: relative;
}
.length-control input {
  padding-right: 95px !important;
}
.length-suffix {
  position: absolute;
  top: 50%;
  right: 12px;
  color: #8e8e98;
  font-size: 11px;
  pointer-events: none;
  transform: translateY(-50%);
}
.password-options {
  display: grid;
  gap: 7px;
  margin: 22px 0 0;
  padding: 0;
  border: 0;
}
.password-options legend {
  margin-bottom: 9px;
  padding: 0;
  color: #e5e5ea;
  font-size: 12px;
  font-weight: 800;
}
.password-option {
  display: flex !important;
  min-height: 46px !important;
  align-items: center;
  gap: 10px !important;
  margin: 0 !important;
  padding: 8px 10px;
  border: 1px solid #37373e;
  border-radius: 9px;
  background: #101014;
  color: #f1f1f4 !important;
  cursor: pointer;
  transition: border-color 150ms ease, background 150ms ease;
}
.password-option:hover {
  border-color: #6d5bb8;
  background: #15151b;
}
.password-option input {
  position: absolute !important;
  width: 1px !important;
  height: 1px !important;
  opacity: 0 !important;
  pointer-events: none;
}
.password-check-ui {
  position: relative;
  display: grid;
  width: 18px;
  height: 18px;
  flex: 0 0 18px;
  place-items: center;
  border: 1px solid #696970;
  border-radius: 5px;
  background: #0a0a0c;
}
.password-option input:checked + .password-check-ui {
  border-color: #8d70ff;
  background: linear-gradient(135deg, #7957f7, #a46cff);
}
.password-option input:checked + .password-check-ui::after {
  width: 8px;
  height: 4px;
  border-bottom: 2px solid #fff;
  border-left: 2px solid #fff;
  content: "";
  transform: rotate(-45deg) translateY(-1px);
}
.password-option-copy {
  display: flex;
  min-width: 0;
  align-items: baseline;
  justify-content: space-between;
  flex: 1;
  gap: 10px;
}
.password-option-copy strong {
  color: #f0f0f3;
  font-size: 13px;
}
.password-option-copy small {
  color: #8e8e98;
  font-size: 11px;
}
.password-option-last {
  margin-top: 3px !important;
}
.password-output-wrap {
  position: relative;
}
.password-output-wrap textarea {
  min-height: 140px !important;
  padding: 14px 68px 14px 14px !important;
  border-color: #514b73 !important;
  border-radius: 10px !important;
  background:
    radial-gradient(240px 120px at 100% 0%, rgba(125, 88, 255, 0.12), transparent 70%),
    #09090c !important;
  color: #f5f4ff !important;
  font-family: ui-monospace, SFMono-Regular, Consolas, "Liberation Mono", monospace !important;
  font-size: 15px !important;
  letter-spacing: 0.03em;
  line-height: 1.55;
  resize: none !important;
}
.password-copy-inline {
  position: absolute;
  top: 10px;
  right: 10px;
  min-height: 29px;
  padding: 5px 9px;
  border: 1px solid #6653b8;
  border-radius: 7px;
  background: #1a1730;
  color: #e8e1ff;
  font-size: 11px;
  font-weight: 800;
  cursor: pointer;
}
.password-copy-inline:hover {
  border-color: #9c80ff;
  background: #262047;
}
.password-strength-card {
  margin-top: 13px;
  padding: 12px;
  border: 1px solid #383840;
  border-radius: 10px;
  background: #0b0b0e;
}
.strength-heading {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  color: #a8a8b1;
  font-size: 11px;
}
.strength-heading strong {
  color: #bcaeff;
  font-size: 11px;
}
.strength-meter {
  height: 6px;
  margin: 10px 0 8px;
  overflow: hidden;
  border-radius: 999px;
  background: #24242b;
}
.strength-meter span {
  display: block;
  width: 0%;
  height: 100%;
  border-radius: inherit;
  background: linear-gradient(90deg, #8060ff, #a67cff);
  box-shadow: 0 0 12px rgba(138, 100, 255, 0.55);
  transition: width 240ms ease;
}
.strength-meter span[data-level="low"] {
  background: linear-gradient(90deg, #e76678, #ff9b66);
}
.strength-meter span[data-level="good"] {
  background: linear-gradient(90deg, #ddac54, #f2d373);
}
.strength-meter span[data-level="strong"],
.strength-meter span[data-level="very-strong"] {
  background: linear-gradient(90deg, #57c98d, #8be2b8);
}
.password-strength-card .note {
  margin: 0;
  color: #90909a;
  font-size: 11px;
  line-height: 1.5;
}
.password-result-note {
  display: flex;
  align-items: center;
  gap: 7px;
  margin-top: 13px;
  color: #9b9ba5;
  font-size: 11px;
}
.local-lock {
  position: relative;
  width: 11px;
  height: 9px;
  border: 1px solid #77d7a4;
  border-radius: 2px;
}
.local-lock::before {
  position: absolute;
  left: 2px;
  top: -6px;
  width: 5px;
  height: 6px;
  border: 1px solid #77d7a4;
  border-bottom: 0;
  border-radius: 5px 5px 0 0;
  content: "";
}
.password-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 9px;
  padding: 15px 18px 17px;
  border-top: 1px solid #36363d;
  background: #0d0d10;
}
.password-actions .btn {
  min-height: 39px !important;
  padding-inline: 14px !important;
}
.password-reset-button {
  margin-left: auto;
}
.password-status {
  min-height: 37px !important;
  margin: 0 !important;
  padding: 10px 18px 12px;
  border-top: 1px solid #303037;
  background: #0a0a0c;
  color: #a0a0a9;
  font-size: 12px !important;
}
.password-status.success {
  color: #91e1b7;
}
.password-status.error {
  color: #ffadb9;
}
.tool-intro h2 {
  margin: 0 0 6px;
  color: #f5f5f7;
  font-size: 17px;
}
.tool-intro > p {
  margin: 0;
  color: #a7a7b0;
  font-size: 13px;
}
.intro-steps {
  display: flex;
  flex-wrap: wrap;
  gap: 9px 20px;
  margin-top: 14px;
  color: #c6c6ce;
  font-size: 12px;
}
.intro-steps span {
  display: inline-flex;
  align-items: center;
  gap: 7px;
}
.intro-steps b {
  display: grid;
  width: 19px;
  height: 19px;
  place-items: center;
  border: 1px solid #6551b6;
  border-radius: 50%;
  color: #cbbdff;
  font-size: 10px;
}
@media (max-width: 720px) {
  .password-app {
    grid-template-columns: 1fr;
  }
  .password-settings {
    border-right: 0;
    border-bottom: 1px solid #36363d;
  }
  .password-settings,
  .password-result {
    padding: 18px;
  }
  .password-reset-button {
    margin-left: 0;
  }
  .password-actions .btn {
    flex: 1 1 145px;
  }
}
/* ===== Shared professional image-tool interface ===== */
.image-tool-app {
  display: grid;
  gap: 14px;
}
.image-upload-section {
  display: grid;
  gap: 8px;
}
.image-dropzone {
  display: flex;
  min-height: 170px;
  width: 100%;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 7px;
  padding: 22px;
  border: 1px dashed #5a5a63;
  border-radius: 11px;
  background:
    radial-gradient(380px 160px at 50% 100%, rgba(114, 79, 244, 0.11), transparent 72%),
    #0a0a0d;
  color: #f4f4f6;
  cursor: pointer;
  transition: border-color 150ms ease, background 150ms ease, transform 150ms ease;
}
.image-dropzone:hover,
.image-dropzone.is-dragging {
  border-color: #967cff;
  background:
    radial-gradient(380px 160px at 50% 100%, rgba(114, 79, 244, 0.20), transparent 72%),
    #111116;
  transform: translateY(-1px);
}
.image-dropzone strong {
  color: #fafafd;
  font-size: 14px;
}
.image-dropzone > span:last-child,
.image-local-note {
  color: #94949e;
  font-size: 12px;
}
.image-upload-icon {
  position: relative;
  display: grid;
  width: 42px;
  height: 42px;
  place-items: center;
  border: 1px solid #6657a7;
  border-radius: 12px;
  background: rgba(124, 91, 255, 0.13);
}
.image-upload-icon::before {
  width: 19px;
  height: 15px;
  border: 2px solid #b9a8ff;
  border-radius: 3px;
  background: linear-gradient(135deg, transparent 46%, #b9a8ff 47% 54%, transparent 55%);
  content: "";
}
.image-upload-icon::after {
  position: absolute;
  top: 11px;
  right: 10px;
  width: 4px;
  height: 4px;
  border-radius: 50%;
  background: #b9a8ff;
  content: "";
}
.image-local-note {
  margin: 0;
  text-align: center;
}
.image-workspace {
  display: grid;
  gap: 14px;
}
.image-preview-card {
  display: grid;
  grid-template-columns: 120px minmax(0, 1fr);
  min-height: 118px;
  overflow: hidden;
  border: 1px solid #3d3d44;
  border-radius: 10px;
  background: #0a0a0d;
}
.image-preview-card img {
  display: block;
  width: 120px;
  height: 118px;
  object-fit: cover;
  background: #17171b;
}
.image-file-details {
  display: grid;
  align-content: center;
  gap: 4px;
  padding: 15px;
}
.image-file-details strong {
  overflow: hidden;
  color: #f5f5f7;
  font-size: 13px;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.image-file-details span {
  color: #9696a0;
  font-size: 12px;
}
.image-controls {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
  gap: 12px;
  padding: 14px;
  border: 1px solid #3e3e45;
  border-radius: 10px;
  background: #0a0a0d;
}
.image-controls .field label span {
  color: #b9aaff;
  font-weight: 800;
}
.image-controls input[type="range"] {
  width: 100%;
  min-height: 38px;
  accent-color: #8a68ff;
  cursor: pointer;
}
.image-resize-controls {
  grid-template-columns: repeat(2, minmax(0, 1fr));
}
.image-check-row {
  display: flex !important;
  min-height: 40px;
  align-items: center;
  gap: 8px;
  margin: 0 !important;
  padding: 0 2px;
  color: #e6e6eb !important;
  font-size: 12px !important;
  font-weight: 750 !important;
  cursor: pointer;
}
.image-check-row input {
  width: 17px !important;
  height: 17px !important;
  min-height: 17px !important;
  margin: 0 !important;
  accent-color: #8763ff;
}
.image-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 9px;
  align-items: center;
}
.image-actions .btn {
  min-height: 40px !important;
  padding-inline: 14px !important;
}
@media (max-width: 620px) {
  .image-preview-card {
    grid-template-columns: 88px minmax(0, 1fr);
    min-height: 90px;
  }
  .image-preview-card img {
    width: 88px;
    height: 90px;
  }
  .image-controls,
  .image-resize-controls {
    grid-template-columns: 1fr;
  }
  .image-actions .btn {
    flex: 1 1 150px;
  }
}
/* Larger useful preview for all image tools */
.image-preview-card {
  grid-template-columns: 220px minmax(0, 1fr) !important;
  min-height: 180px !important;
}
.image-preview-card img {
  width: 220px !important;
  height: 180px !important;
  object-fit: contain !important;
  padding: 8px;
  background:
    linear-gradient(45deg, #15151a 25%, transparent 25%) 0 0/16px 16px,
    linear-gradient(-45deg, #15151a 25%, transparent 25%) 0 8px/16px 16px,
    linear-gradient(45deg, transparent 75%, #15151a 75%) 8px -8px/16px 16px,
    linear-gradient(-45deg, transparent 75%, #15151a 75%) -8px 0/16px 16px,
    #202026 !important;
}
.image-file-details {
  padding: 22px !important;
}
.image-file-details strong {
  font-size: 15px !important;
}
.image-file-details span {
  font-size: 13px !important;
}
@media (max-width: 620px) {
  .image-preview-card {
    grid-template-columns: 1fr !important;
  }
  .image-preview-card img {
    width: 100% !important;
    height: 210px !important;
  }
}
/* Centered large preview stage for image tools */
.image-preview-card {
  display: grid !important;
  grid-template-columns: 1fr !important;
  min-height: 360px !important;
  overflow: hidden;
  background:
    radial-gradient(520px 250px at 50% 50%, rgba(117, 83, 255, 0.12), transparent 72%),
    #0a0a0d !important;
}
.image-preview-card img {
  display: block !important;
  width: min(100%, 680px) !important;
  height: 300px !important;
  justify-self: center !important;
  align-self: center !important;
  margin: 18px auto 0 !important;
  padding: 10px !important;
  object-fit: contain !important;
  background:
    linear-gradient(45deg, #18181e 25%, transparent 25%) 0 0/18px 18px,
    linear-gradient(-45deg, #18181e 25%, transparent 25%) 0 9px/18px 18px,
    linear-gradient(45deg, transparent 75%, #18181e 75%) 9px -9px/18px 18px,
    linear-gradient(-45deg, transparent 75%, #18181e 75%) -9px 0/18px 18px,
    #23232a !important;
  border-radius: 10px !important;
}
.image-file-details {
  display: grid !important;
  justify-items: center !important;
  align-content: center !important;
  gap: 4px !important;
  padding: 10px 18px 18px !important;
  text-align: center !important;
}
.image-file-details strong {
  max-width: min(100%, 620px);
  font-size: 15px !important;
}
.image-file-details span {
  font-size: 13px !important;
}
@media (max-width: 620px) {
  .image-preview-card {
    min-height: 290px !important;
  }
  .image-preview-card img {
    width: calc(100% - 24px) !important;
    height: 225px !important;
    margin-top: 12px !important;
  }
}
/* Keep image-tool settings hidden until a file is selected */
.image-workspace[hidden],
.image-workspace[aria-hidden="true"] {
  display: none !important;
}
.image-workspace[aria-hidden="false"] {
  display: grid !important;
  animation: imageWorkspaceReveal 180ms ease-out;
}
@keyframes imageWorkspaceReveal {
  from {
    opacity: 0;
    transform: translateY(7px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}
/* Batch 2 image tools */
.webp-tip,
.upscale-result {
  display: grid;
  align-content: center;
  gap: 3px;
  min-height: 40px;
  padding: 9px 11px;
  border: 1px solid #3d3d45;
  border-radius: 8px;
  background: #0b0b0e;
}
.webp-tip strong,
.upscale-result span {
  color: #b9aaff;
  font-size: 11px;
}
.webp-tip span,
.upscale-result strong {
  color: #e7e7eb;
  font-size: 12px;
}
.upscale-disclaimer,
.favicon-note {
  margin: 0;
  color: #9696a0;
  font-size: 12px;
  line-height: 1.55;
}
.favicon-sizes {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 9px;
  margin: 0;
  padding: 14px;
  border: 1px solid #3d3d45;
  border-radius: 10px;
  background: #0a0a0d;
}
.favicon-sizes legend {
  padding: 0;
  color: #eeeeF2;
  font-size: 12px;
  font-weight: 800;
}
.favicon-sizes label {
  display: flex !important;
  min-height: 36px !important;
  align-items: center;
  gap: 7px !important;
  margin: 0 !important;
  padding: 7px 8px;
  border: 1px solid #393940;
  border-radius: 7px;
  background: #111115;
  color: #e5e5e9 !important;
  font-size: 11px !important;
  font-weight: 700 !important;
  cursor: pointer;
}
.favicon-sizes input {
  width: 15px !important;
  height: 15px !important;
  min-height: 15px !important;
  margin: 0 !important;
  accent-color: #8865ff;
}
@media (max-width: 620px) {
  .favicon-sizes {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}
/* Favicon ZIP package interface */
.favicon-package-card {
  padding: 16px;
  border: 1px solid #41414a;
  border-radius: 11px;
  background:
    radial-gradient(420px 190px at 100% 0%, rgba(125, 91, 255, 0.12), transparent 75%),
    #0a0a0d;
}
.favicon-package-heading {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 14px;
  margin-bottom: 14px;
}
.favicon-package-heading h2 {
  margin: 0;
  color: #f5f5f8;
  font-size: 16px;
}
.favicon-package-heading p {
  margin: 4px 0 0;
  color: #9c9ca6;
  font-size: 12px;
}
.zip-badge {
  display: grid;
  width: 39px;
  height: 29px;
  flex: 0 0 auto;
  place-items: center;
  border: 1px solid #7862d7;
  border-radius: 7px;
  background: rgba(124, 91, 255, 0.17);
  color: #d3c8ff;
  font-size: 10px;
  font-weight: 900;
  letter-spacing: 0.08em;
}
.favicon-file-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 8px;
}
.favicon-file-grid > div {
  display: grid;
  gap: 2px;
  min-height: 53px;
  align-content: center;
  padding: 9px 10px;
  border: 1px solid #37373f;
  border-radius: 8px;
  background: #111115;
}
.favicon-file-grid strong {
  overflow: hidden;
  color: #eeeeF2;
  font-family: ui-monospace, SFMono-Regular, Consolas, monospace;
  font-size: 11px;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.favicon-file-grid span {
  color: #92929c;
  font-size: 11px;
}
@media (max-width: 560px) {
  .favicon-file-grid {
    grid-template-columns: 1fr;
  }
}
/* ===== Image Watermark editor ===== */
.watermark-app {
  gap: 16px;
}
.watermark-stage {
  display: grid;
  min-height: 340px;
  place-items: center;
  overflow: auto;
  padding: 18px;
  border: 1px solid #3f3f47;
  border-radius: 12px;
  background:
    radial-gradient(500px 260px at 50% 50%, rgba(124, 91, 255, 0.14), transparent 72%),
    #09090c;
}
.watermark-stage canvas {
  display: block;
  max-width: 100%;
  height: auto;
  border: 1px solid rgba(255, 255, 255, 0.13);
  border-radius: 8px;
  box-shadow: 0 14px 36px rgba(0, 0, 0, 0.36);
}
.watermark-settings {
  display: grid;
  grid-template-columns: 1.7fr 0.7fr 1fr 1fr;
  gap: 12px;
  padding: 14px;
  border: 1px solid #3e3e46;
  border-radius: 11px;
  background: #0a0a0d;
}
.watermark-text-field {
  grid-column: span 2;
}
.watermark-settings .field label span {
  color: #bbaeff;
  font-weight: 800;
}
.watermark-settings input[type="range"] {
  width: 100%;
  min-height: 38px;
  accent-color: #8966ff;
  cursor: pointer;
}
.watermark-color-input {
  min-height: 40px !important;
  padding: 4px !important;
  cursor: pointer;
}
.watermark-check {
  display: flex !important;
  grid-column: span 2;
  min-height: 40px;
  align-items: center;
  gap: 9px;
  margin: 0 !important;
  padding: 0 2px;
  color: #e9e9ed !important;
  font-size: 12px !important;
  font-weight: 750 !important;
  cursor: pointer;
}
.watermark-check input {
  width: 17px !important;
  height: 17px !important;
  min-height: 17px !important;
  margin: 0 !important;
  accent-color: #8966ff;
}
@media (max-width: 720px) {
  .watermark-stage {
    min-height: 260px;
    padding: 12px;
  }
  .watermark-settings {
    grid-template-columns: 1fr 1fr;
  }
  .watermark-text-field,
  .watermark-check {
    grid-column: span 2;
  }
}
@media (max-width: 460px) {
  .watermark-settings {
    grid-template-columns: 1fr;
  }
  .watermark-text-field,
  .watermark-check {
    grid-column: span 1;
  }
}
/* Draggable watermark controls */
.watermark-stage canvas {
  touch-action: none;
  cursor: default;
}
.watermark-stage canvas.is-dragging {
  cursor: grabbing !important;
}
.watermark-center-button {
  grid-column: span 2;
  min-height: 39px;
  padding: 8px 11px;
  border: 1px solid #55505f;
  border-radius: 8px;
  background: #111116;
  color: #e7e1ff;
  font: inherit;
  font-size: 12px;
  font-weight: 800;
  cursor: pointer;
}
.watermark-center-button:hover {
  border-color: #9478ff;
  background: #191623;
}
@media (max-width: 460px) {
  .watermark-center-button {
    grid-column: span 1;
  }
}
/* ===== Meme Generator templates ===== */
.meme-start {
  display: grid;
  gap: 18px;
}
.meme-start-copy {
  max-width: 670px;
}
.meme-kicker {
  display: block;
  margin-bottom: 7px;
  color: #bbaeff;
  font-size: 11px;
  font-weight: 850;
  letter-spacing: .1em;
  text-transform: uppercase;
}
.meme-start-copy h2,
.meme-library-head h3 {
  margin: 0;
  color: #fafafe;
  font-size: clamp(22px, 3vw, 30px);
  letter-spacing: -.03em;
}
.meme-start-copy p {
  margin: 9px 0 0;
  color: #b9b9c2;
  line-height: 1.65;
}
.meme-start-actions {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 14px;
}
.meme-start-card {
  display: grid;
  min-height: 190px;
  place-content: center;
  justify-items: center;
  gap: 8px;
  padding: 22px;
  border: 1px solid #44444f;
  border-radius: 14px;
  background: linear-gradient(145deg, #17171d, #101014);
  color: #f6f6fa;
  cursor: pointer;
  transition: border-color .18s ease, transform .18s ease, background .18s ease;
}
.meme-start-card:hover {
  border-color: #987cff;
  background: linear-gradient(145deg, #211e31, #121218);
  transform: translateY(-2px);
}
.meme-start-card strong {
  font-size: 16px;
}
.meme-start-card small {
  color: #aaaab5;
  font-size: 12px;
  text-align: center;
}
.meme-start-icon {
  position: relative;
  display: block;
  width: 42px;
  height: 42px;
  border-radius: 12px;
  background: #8063ee;
}
.meme-upload-icon::before {
  position: absolute;
  top: 10px;
  left: 12px;
  width: 18px;
  height: 14px;
  border: 2px solid #fff;
  border-radius: 4px;
  content: "";
}
.meme-upload-icon::after {
  position: absolute;
  top: 5px;
  left: 19px;
  width: 2px;
  height: 18px;
  background: #fff;
  box-shadow: -4px 4px 0 -1px #fff, 4px 4px 0 -1px #fff;
  content: "";
}
.meme-template-icon {
  background: #e05786;
}
.meme-template-icon::before,
.meme-template-icon::after {
  position: absolute;
  width: 18px;
  height: 18px;
  border: 2px solid #fff;
  border-radius: 4px;
  content: "";
}
.meme-template-icon::before {
  top: 8px;
  left: 8px;
}
.meme-template-icon::after {
  right: 8px;
  bottom: 8px;
  background: #e05786;
}
.meme-template-library {
  padding: 16px;
  border: 1px solid #42424d;
  border-radius: 14px;
  background: #0e0e13;
}
.meme-library-head {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 16px;
  margin-bottom: 15px;
}
.meme-library-head h3 {
  font-size: 20px;
}
.icon-btn {
  display: grid;
  width: 34px;
  height: 34px;
  flex: 0 0 auto;
  place-items: center;
  border: 1px solid #464650;
  border-radius: 9px;
  background: #18181f;
  color: #fff;
  font-size: 23px;
  line-height: 1;
  cursor: pointer;
}
.icon-btn:hover {
  border-color: #987cff;
}
.meme-template-grid {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 12px;
}
.meme-template-item {
  overflow: hidden;
  padding: 0;
  border: 1px solid #3f3f49;
  border-radius: 11px;
  background: #17171d;
  color: #f7f7fa;
  text-align: left;
  cursor: pointer;
  transition: border-color .18s ease, transform .18s ease;
}
.meme-template-item:hover {
  border-color: #9b81ff;
  transform: translateY(-2px);
}
.meme-template-item img {
  display: block;
  width: 100%;
  aspect-ratio: 3 / 2;
  object-fit: cover;
  background: #252530;
}
.meme-template-meta {
  display: grid;
  gap: 3px;
  padding: 9px 10px 10px;
}
.meme-template-meta strong {
  font-size: 12px;
}
.meme-template-meta small {
  color: #aaaab6;
  font-size: 10px;
}
.meme-editor-bar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
}
.back-to-templates {
  border: 0;
  background: transparent;
  color: #c7b9ff;
  font-size: 13px;
  font-weight: 750;
  cursor: pointer;
}
.back-to-templates:hover {
  color: #fff;
}
.meme-source-label {
  color: #a8a8b1;
  font-size: 12px;
}
@media (max-width: 840px) {
  .meme-template-grid {
    grid-template-columns: repeat(3, minmax(0, 1fr));
  }
}
@media (max-width: 620px) {
  .meme-start-actions {
    grid-template-columns: 1fr;
  }
  .meme-start-card {
    min-height: 155px;
  }
  .meme-template-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
  .meme-source-label {
    display: none;
  }
}
@media (max-width: 380px) {
  .meme-template-grid {
    grid-template-columns: 1fr;
  }
}
/* ===== Social Media Image Studio ===== */
.social-studio-panel {
  overflow: visible;
}
.social-studio-app {
  display: grid;
  gap: 16px;
}
.studio-upload-zone {
  display: grid;
  width: 100%;
  min-height: 300px;
  place-content: center;
  justify-items: center;
  gap: 10px;
  padding: 30px;
  border: 1px dashed #5a5a68;
  border-radius: 16px;
  background:
    radial-gradient(520px 250px at 50% 20%, rgba(124, 91, 255, .15), transparent 72%),
    #0c0c11;
  color: #f7f7fb;
  cursor: pointer;
  transition: border-color .18s ease, background .18s ease, transform .18s ease;
}
.studio-upload-zone:hover,
.studio-upload-zone.is-dragging {
  border-color: #977cff;
  background:
    radial-gradient(520px 250px at 50% 20%, rgba(124, 91, 255, .25), transparent 72%),
    #111018;
  transform: translateY(-1px);
}
.studio-upload-zone strong {
  font-size: 18px;
}
.studio-upload-zone > span:not(.studio-upload-icon) {
  color: #aaaab6;
  font-size: 13px;
  text-align: center;
}
.studio-upload-zone small {
  color: #858590;
  font-size: 11px;
}
.studio-upload-icon {
  position: relative;
  width: 52px;
  height: 52px;
  border-radius: 16px;
  background: linear-gradient(145deg, #9b7cff, #6946df);
  box-shadow: 0 10px 30px rgba(115, 79, 240, .32);
}
.studio-upload-icon::before {
  position: absolute;
  top: 13px;
  left: 15px;
  width: 22px;
  height: 17px;
  border: 2px solid #fff;
  border-radius: 5px;
  content: "";
}
.studio-upload-icon::after {
  position: absolute;
  top: 7px;
  left: 25px;
  width: 2px;
  height: 20px;
  background: #fff;
  box-shadow: -5px 5px 0 -1px #fff, 5px 5px 0 -1px #fff;
  content: "";
}
.studio-toolbar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 14px;
  padding: 11px 13px;
  border: 1px solid #3d3d47;
  border-radius: 11px;
  background: #111116;
}
.studio-file-info {
  display: flex;
  min-width: 0;
  align-items: center;
  gap: 9px;
  color: #e8e8ee;
  font-size: 13px;
  font-weight: 700;
}
.studio-file-info span:last-child {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.studio-file-dot {
  width: 9px;
  height: 9px;
  flex: 0 0 auto;
  border-radius: 999px;
  background: #69d39a;
  box-shadow: 0 0 0 4px rgba(105, 211, 154, .12);
}
.studio-text-btn {
  flex: 0 0 auto;
  border: 0;
  background: transparent;
  color: #c7b9ff;
  font-size: 12px;
  font-weight: 800;
  cursor: pointer;
}
.studio-text-btn:hover {
  color: #fff;
}
.studio-layout {
  display: grid;
  grid-template-columns: minmax(270px, .85fr) minmax(0, 1.55fr);
  gap: 16px;
}
.studio-presets-panel,
.studio-selection-panel {
  min-height: 540px;
  padding: 16px;
  border: 1px solid #3d3d47;
  border-radius: 14px;
  background: #0d0d12;
}
.studio-panel-heading {
  display: flex;
  align-items: flex-start;
  gap: 10px;
  margin-bottom: 16px;
}
.studio-step {
  display: grid;
  width: 25px;
  height: 25px;
  flex: 0 0 auto;
  place-items: center;
  border-radius: 8px;
  background: #7e5ff0;
  color: #fff;
  font-size: 12px;
  font-weight: 900;
}
.studio-panel-heading h2 {
  margin: 0;
  color: #f7f7fb;
  font-size: 16px;
  letter-spacing: -.01em;
}
.studio-panel-heading p {
  margin: 4px 0 0;
  color: #91919d;
  font-size: 12px;
}
.studio-platform-list {
  display: grid;
  gap: 11px;
}
.studio-platform-group {
  padding: 11px;
  border: 1px solid #363640;
  border-radius: 10px;
  background: #141419;
}
.studio-platform-heading {
  display: flex;
  align-items: center;
  gap: 8px;
  margin-bottom: 8px;
  color: #f2f2f5;
  font-size: 13px;
}
.studio-platform-color {
  width: 9px;
  height: 9px;
  border-radius: 999px;
  background: var(--platform-accent);
  box-shadow: 0 0 0 4px color-mix(in srgb, var(--platform-accent) 18%, transparent);
}
.studio-format-options {
  display: grid;
  gap: 6px;
}
.studio-format-option {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 6px 5px;
  border-radius: 7px;
  cursor: pointer;
}
.studio-format-option:hover {
  background: rgba(255, 255, 255, .045);
}
.studio-format-option input {
  width: 15px;
  height: 15px;
  flex: 0 0 auto;
  margin: 0;
  accent-color: var(--platform-accent);
  cursor: pointer;
}
.studio-format-copy {
  display: flex;
  min-width: 0;
  align-items: baseline;
  justify-content: space-between;
  gap: 8px;
  width: 100%;
}
.studio-format-copy strong {
  overflow: hidden;
  color: #d9d9e0;
  font-size: 11px;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.studio-format-copy small {
  flex: 0 0 auto;
  color: #82828e;
  font-size: 10px;
}
.studio-custom-size {
  margin-top: 14px;
  padding-top: 14px;
  border-top: 1px solid #34343e;
}
.studio-custom-heading {
  display: flex;
  align-items: center;
  gap: 8px;
  color: #f1f1f5;
  font-size: 13px;
}
.studio-custom-heading .studio-step {
  background: #343440;
}
.studio-custom-inputs {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 8px;
  margin-top: 10px;
}
.studio-custom-inputs label {
  display: grid;
  gap: 5px;
  color: #9999a5;
  font-size: 10px;
  font-weight: 750;
}
.studio-custom-inputs input {
  width: 100%;
  min-height: 36px;
  border: 1px solid #41414c;
  border-radius: 8px;
  background: #17171d;
  color: #f5f5f8;
  font: inherit;
  outline: none;
  padding: 7px 8px;
}
.studio-custom-inputs input:focus {
  border-color: #9477ff;
}
.studio-add-custom {
  width: 100%;
  min-height: 37px;
  margin-top: 9px;
  font-size: 12px;
}
.studio-selection-panel {
  display: flex;
  flex-direction: column;
}
.studio-selection-empty {
  display: grid;
  flex: 1;
  min-height: 360px;
  place-content: center;
  justify-items: center;
  gap: 8px;
  color: #d8d8df;
  text-align: center;
}
.studio-selection-empty strong {
  font-size: 15px;
}
.studio-selection-empty p {
  max-width: 260px;
  margin: 0;
  color: #91919e;
  font-size: 12px;
  line-height: 1.55;
}
.studio-empty-icon {
  position: relative;
  display: block;
  width: 48px;
  height: 48px;
  margin-bottom: 4px;
  border: 1px solid #565663;
  border-radius: 14px;
  background: #191920;
}
.studio-empty-icon::before,
.studio-empty-icon::after {
  position: absolute;
  background: #8b70f6;
  content: "";
}
.studio-empty-icon::before {
  top: 12px;
  left: 14px;
  width: 18px;
  height: 2px;
  box-shadow: 0 8px 0 #8b70f6, 0 16px 0 #8b70f6;
}
.studio-empty-icon::after {
  top: 12px;
  right: 12px;
  width: 2px;
  height: 18px;
}
.studio-output-list {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 12px;
}
.studio-output-card {
  position: relative;
  display: grid;
  grid-template-columns: 92px minmax(0, 1fr);
  gap: 11px;
  align-items: center;
  min-width: 0;
  padding: 10px;
  border: 1px solid #42424d;
  border-radius: 11px;
  background: #15151b;
}
.studio-output-preview {
  display: grid;
  width: 92px;
  height: 68px;
  place-items: center;
  border: 1px solid color-mix(in srgb, var(--output-accent) 50%, #50505d);
  border-radius: 7px;
  background:
    linear-gradient(135deg, color-mix(in srgb, var(--output-accent) 30%, #16161d), #111116);
  color: #e9e9f0;
  font-size: 10px;
  font-weight: 850;
  text-align: center;
}
.studio-output-preview span {
  padding: 5px;
}
.studio-output-info {
  display: grid;
  min-width: 0;
  gap: 3px;
}
.studio-output-platform {
  color: var(--output-accent);
  font-size: 10px;
  font-weight: 850;
}
.studio-output-info strong {
  overflow: hidden;
  color: #f3f3f6;
  font-size: 13px;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.studio-output-info small {
  color: #9898a4;
  font-size: 10px;
}
.studio-remove-output {
  position: absolute;
  top: 7px;
  right: 7px;
  display: grid;
  width: 22px;
  height: 22px;
  place-items: center;
  border: 0;
  border-radius: 6px;
  background: #27272f;
  color: #c8c8d0;
  font-size: 17px;
  line-height: 1;
  cursor: pointer;
}
.studio-remove-output:hover {
  background: #513441;
  color: #fff;
}
.studio-next-note {
  padding: 11px 13px;
  border: 1px solid rgba(139, 111, 246, .35);
  border-radius: 10px;
  background: rgba(109, 74, 255, .09);
  color: #beb2f7;
  font-size: 12px;
  line-height: 1.45;
}
.studio-benefits {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin-top: 14px;
}
.studio-benefits span {
  padding: 6px 9px;
  border: 1px solid #41414b;
  border-radius: 999px;
  color: #c2c2cd;
  font-size: 11px;
  font-weight: 750;
}
@media (max-width: 800px) {
  .studio-layout {
    grid-template-columns: 1fr;
  }
  .studio-presets-panel,
  .studio-selection-panel {
    min-height: auto;
  }
  .studio-output-list {
    grid-template-columns: 1fr 1fr;
  }
}
@media (max-width: 500px) {
  .studio-upload-zone {
    min-height: 250px;
  }
  .studio-output-list {
    grid-template-columns: 1fr;
  }
  .studio-toolbar {
    align-items: flex-start;
    flex-direction: column;
  }
}
/* ===== Social Media Image Studio - Batch 2 editor ===== */
.studio-editor-panel {
  min-width: 0;
  min-height: 540px;
  padding: 16px;
  border: 1px solid #3d3d47;
  border-radius: 14px;
  background: #0d0d12;
}
.studio-editor-content {
  display: grid;
  gap: 14px;
}
.studio-output-tabs-wrap {
  overflow-x: auto;
  padding-bottom: 2px;
}
.studio-output-tabs {
  display: flex;
  min-width: max-content;
  gap: 8px;
}
.studio-output-tab {
  min-height: 33px;
  padding: 7px 10px;
  border: 1px solid #42424d;
  border-radius: 8px;
  background: #18181e;
  color: #bcbcc6;
  font-size: 11px;
  font-weight: 750;
  cursor: pointer;
  white-space: nowrap;
}
.studio-output-tab:hover {
  border-color: #706d7d;
  color: #f4f4f8;
}
.studio-output-tab.is-active {
  border-color: var(--tab-accent);
  background: color-mix(in srgb, var(--tab-accent) 14%, #16161c);
  color: #fff;
}
.studio-canvas-shell {
  position: relative;
  display: grid;
  min-height: 260px;
  place-items: center;
  overflow: hidden;
  padding: 14px;
  border: 1px solid #3d3d48;
  border-radius: 12px;
  background:
    linear-gradient(45deg, #131319 25%, transparent 25%) 0 0 / 18px 18px,
    linear-gradient(-45deg, #131319 25%, transparent 25%) 0 0 / 18px 18px,
    linear-gradient(45deg, transparent 75%, #131319 75%) 0 0 / 18px 18px,
    linear-gradient(-45deg, transparent 75%, #131319 75%) 0 0 / 18px 18px,
    #0a0a0e;
}
.studio-canvas-shell canvas {
  display: block;
  max-width: 100%;
  height: auto;
  border: 1px solid rgba(255, 255, 255, .18);
  border-radius: 7px;
  box-shadow: 0 16px 36px rgba(0, 0, 0, .38);
  cursor: grab;
  touch-action: none;
}
.studio-canvas-shell canvas.is-dragging {
  cursor: grabbing;
}
.studio-drag-hint {
  position: absolute;
  bottom: 24px;
  left: 50%;
  z-index: 2;
  padding: 7px 10px;
  border: 1px solid rgba(255, 255, 255, .18);
  border-radius: 999px;
  background: rgba(16, 16, 21, .86);
  color: #e9e8f4;
  font-size: 11px;
  font-weight: 750;
  pointer-events: none;
  transform: translateX(-50%);
  transition: opacity .22s ease, transform .22s ease;
}
.studio-drag-hint.is-hidden {
  opacity: 0;
  transform: translate(-50%, 7px);
}
.studio-editor-controls {
  display: grid;
  gap: 13px;
  padding: 13px;
  border: 1px solid #393944;
  border-radius: 11px;
  background: #141419;
}
.studio-mode-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 13px;
}
.studio-control-label {
  flex: 0 0 auto;
  color: #ceced7;
  font-size: 12px;
  font-weight: 800;
}
.studio-fit-modes {
  display: flex;
  flex-wrap: wrap;
  justify-content: flex-end;
  gap: 6px;
}
.studio-fit-modes button {
  min-height: 30px;
  padding: 5px 9px;
  border: 1px solid #454550;
  border-radius: 7px;
  background: #1d1d24;
  color: #aaaab5;
  font-size: 11px;
  font-weight: 750;
  cursor: pointer;
}
.studio-fit-modes button:hover {
  border-color: #8272be;
  color: #f1efff;
}
.studio-fit-modes button.is-active {
  border-color: #916fff;
  background: #513e9b;
  color: #fff;
}
.studio-slider-row {
  display: grid;
  gap: 7px;
}
.studio-slider-row label {
  display: flex;
  justify-content: space-between;
  color: #cbcad5;
  font-size: 12px;
  font-weight: 750;
}
.studio-slider-row label strong {
  color: #c5b8ff;
}
.studio-slider-row input[type="range"] {
  width: 100%;
  min-height: 28px;
  margin: 0;
  accent-color: #8966ff;
  cursor: pointer;
}
.studio-background-control {
  padding-top: 2px;
}
.studio-background-control label {
  display: flex;
  align-items: center;
  justify-content: space-between;
  color: #c9c9d2;
  font-size: 12px;
  font-weight: 750;
}
.studio-background-control input[type="color"] {
  width: 48px;
  min-height: 34px;
  padding: 3px;
  border: 1px solid #4b4b56;
  border-radius: 7px;
  background: #202027;
  cursor: pointer;
}
.studio-editor-actions {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 11px;
  padding-top: 2px;
}
.studio-download-controls {
  display: flex;
  align-items: center;
  gap: 8px;
}
.studio-download-controls select {
  min-height: 38px;
  padding: 0 27px 0 10px;
  border: 1px solid #494953;
  border-radius: 8px;
  background: #1b1b22;
  color: #efeff3;
  font: inherit;
  font-size: 12px;
  cursor: pointer;
}
.studio-output-section {
  margin-top: 16px;
  padding: 16px;
  border: 1px solid #3d3d47;
  border-radius: 14px;
  background: #0d0d12;
}
.studio-output-section-head {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 14px;
  margin-bottom: 13px;
}
.studio-output-section-head h2 {
  margin: 0;
  color: #f5f5f8;
  font-size: 15px;
}
.studio-output-section-head p {
  margin: 4px 0 0;
  color: #90909c;
  font-size: 12px;
}
.studio-output-note {
  color: #a59bbd;
  font-size: 11px;
  font-weight: 700;
}
.studio-output-card {
  width: 100%;
  border: 1px solid #42424d;
  color: inherit;
  text-align: left;
  cursor: pointer;
}
.studio-output-card:hover {
  border-color: color-mix(in srgb, var(--output-accent) 65%, #7d7d88);
}
.studio-output-card.is-active {
  border-color: var(--output-accent);
  box-shadow: 0 0 0 1px color-mix(in srgb, var(--output-accent) 30%, transparent);
}
.studio-output-card .studio-remove-output {
  z-index: 2;
  border: 0;
  cursor: pointer;
}
@media (max-width: 900px) {
  .studio-editor-panel {
    min-height: auto;
  }
}
@media (max-width: 600px) {
  .studio-mode-row,
  .studio-editor-actions {
    align-items: stretch;
    flex-direction: column;
  }
  .studio-fit-modes {
    justify-content: flex-start;
  }
  .studio-download-controls {
    width: 100%;
  }
  .studio-download-controls select,
  .studio-download-controls .btn {
    flex: 1;
  }
  .studio-output-section-head {
    flex-direction: column;
  }
}
/* ===== Social Media Image Studio - Batch 3 ZIP export ===== */
.studio-download-all {
  border-color: #6d59b6 !important;
  background: #29203f !important;
  color: #eeeaff !important;
}
.studio-download-all:hover:not(:disabled) {
  border-color: #a189ff !important;
  background: #392c60 !important;
}
.studio-download-all:disabled,
.studio-download-controls .btn:disabled {
  cursor: wait;
  opacity: .62;
}
@media (max-width: 760px) {
  .studio-download-controls {
    flex-wrap: wrap;
  }
  .studio-download-controls select {
    flex: 0 0 100%;
  }
  .studio-download-controls .btn {
    min-width: calc(50% - 4px);
  }
}
/* Vamriko: PDF Merger card preview experiment */
.tool-card-pdf-demo {
  overflow: hidden;
}
.tool-preview-pdf {
  position: absolute;
  right: 18px;
  bottom: -58px;
  width: 118px;
  height: 92px;
  opacity: 0;
  pointer-events: none;
  transform: translateY(16px) scale(.92);
  transition: opacity .24s ease, transform .34s cubic-bezier(.2,.8,.2,1);
}
.pdf-sheet {
  position: absolute;
  width: 68px;
  height: 84px;
  border-radius: 8px;
  background: linear-gradient(145deg, #ffffff, #e9e3ff);
  box-shadow: 0 15px 28px rgba(0, 0, 0, .34);
}
.pdf-sheet::after {
  content: "";
  position: absolute;
  top: 12px;
  left: 13px;
  width: 40px;
  height: 3px;
  border-radius: 999px;
  background: #c8bcff;
  box-shadow: 0 9px 0 #d8d0ff, 0 18px 0 #e3ddff;
}
.pdf-sheet-back {
  left: 17px;
  top: 5px;
  opacity: .78;
  transform: rotate(-13deg) translateY(10px);
}
.pdf-sheet-front {
  left: 39px;
  top: 0;
  transform: rotate(8deg);
  overflow: hidden;
}
.pdf-sheet-front b {
  position: absolute;
  z-index: 1;
  left: 12px;
  bottom: 11px;
  padding: 3px 6px;
  border-radius: 5px;
  color: #fff;
  background: #7651ff;
  font-size: 9px;
  line-height: 1;
  letter-spacing: .08em;
}
.pdf-sheet-front i {
  display: none;
}
.pdf-merge-arrow {
  position: absolute;
  z-index: 3;
  left: 53px;
  top: 39px;
  width: 27px;
  height: 27px;
  display: grid;
  place-items: center;
  border-radius: 50%;
  color: #fff;
  background: linear-gradient(135deg, #6b4cff, #a46dff);
  box-shadow: 0 7px 18px rgba(112, 76, 255, .48);
  font-size: 15px;
  font-weight: 800;
}
@media (hover: hover) and (pointer: fine) {
  .tool-card-pdf-demo:hover {
    z-index: 2;
    border-color: rgba(151, 112, 255, .82);
    box-shadow: 0 20px 44px rgba(91, 59, 207, .22);
    transform: translateY(-4px);
  }
  .tool-card-pdf-demo:hover .tool-card-icon {
    transform: translateY(-2px) scale(1.07);
  }
  .tool-card-pdf-demo:hover .tool-preview-pdf {
    opacity: 1;
    transform: translateY(0) scale(1);
  }
}
@media (prefers-reduced-motion: reduce) {
  .tool-card-pdf-demo,
  .tool-card-pdf-demo .tool-card-icon,
  .tool-preview-pdf {
    transition: none !important;
  }
}/* Vamriko: PDF card preview placement fix */
.tool-card.tool-card-pdf-demo {
  position: relative !important;
  overflow: visible !important;
  isolation: isolate;
}
.tool-card.tool-card-pdf-demo .tool-preview-pdf {
  display: block !important;
  position: absolute !important;
  z-index: 20 !important;
  right: 14px !important;
  bottom: -46px !important;
  width: 126px !important;
  height: 100px !important;
  visibility: hidden;
  opacity: 0;
  pointer-events: none;
}
@media (hover: hover) and (pointer: fine) {
  .tool-card.tool-card-pdf-demo:hover .tool-preview-pdf {
    visibility: visible !important;
    opacity: 1 !important;
    transform: translateY(0) scale(1) !important;
  }
}/* Vamriko: PDF preview contained inside the card */
.tool-card.tool-card-pdf-demo {
  position: relative !important;
  overflow: hidden !important;
  min-height: 184px;
  padding-right: 118px !important;
}
.tool-card.tool-card-pdf-demo .tool-preview-pdf {
  right: 12px !important;
  bottom: 12px !important;
  width: 96px !important;
  height: 108px !important;
  z-index: 1 !important;
  opacity: .34 !important;
  visibility: visible !important;
  transform: translateY(14px) scale(.82) !important;
  transition: opacity .25s ease, transform .35s cubic-bezier(.2,.8,.2,1) !important;
}
.tool-card.tool-card-pdf-demo .pdf-sheet {
  width: 57px !important;
  height: 72px !important;
  border-radius: 7px;
}
.tool-card.tool-card-pdf-demo .pdf-sheet-back {
  left: 5px;
  top: 18px;
  transform: rotate(-13deg) translateY(8px);
}
.tool-card.tool-card-pdf-demo .pdf-sheet-front {
  left: 31px;
  top: 12px;
  transform: rotate(8deg);
}
.tool-card.tool-card-pdf-demo .pdf-sheet::after {
  top: 11px;
  left: 10px;
  width: 34px;
  box-shadow: 0 8px 0 #d8d0ff, 0 16px 0 #e3ddff;
}
.tool-card.tool-card-pdf-demo .pdf-sheet-front b {
  left: 9px;
  bottom: 9px;
  font-size: 8px;
  padding: 3px 5px;
}
.tool-card.tool-card-pdf-demo .pdf-merge-arrow {
  left: 38px;
  top: 46px;
  width: 23px;
  height: 23px;
  font-size: 13px;
}
@media (hover: hover) and (pointer: fine) {
  .tool-card.tool-card-pdf-demo:hover {
    padding-right: 118px !important;
    background: linear-gradient(145deg, rgba(27, 22, 47, .98), rgba(17, 16, 26, .98)) !important;
  }
  .tool-card.tool-card-pdf-demo:hover .tool-preview-pdf {
    opacity: 1 !important;
    transform: translateY(0) scale(1) !important;
  }
}/* Vamriko: premium visual treatment for PDF Merger card only */
.tool-card.tool-card-pdf-demo {
  min-height: 206px !important;
  padding: 22px 122px 20px 22px !important;
  border: 1px solid rgba(255, 255, 255, .11) !important;
  border-radius: 20px !important;
  color: #f8f6ff !important;
  background:
    radial-gradient(circle at 92% 14%, rgba(145, 101, 255, .22), transparent 38%),
    linear-gradient(145deg, #1b1727 0%, #121116 60%, #0e0e12 100%) !important;
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,.05),
    0 12px 28px rgba(0,0,0,.24) !important;
  transition:
    transform .24s ease,
    border-color .24s ease,
    box-shadow .24s ease,
    background .24s ease !important;
}
.tool-card.tool-card-pdf-demo::before {
  content: "↗";
  position: absolute;
  top: 17px;
  right: 18px;
  z-index: 4;
  width: 28px;
  height: 28px;
  display: grid;
  place-items: center;
  border: 1px solid rgba(209, 193, 255, .22);
  border-radius: 9px;
  color: #d8ccff;
  background: rgba(255,255,255,.045);
  font-size: 15px;
  line-height: 1;
  transition: transform .22s ease, background .22s ease, color .22s ease;
}
.tool-card.tool-card-pdf-demo .tool-card-icon {
  width: 56px !important;
  height: 56px !important;
  display: grid !important;
  place-items: center !important;
  margin-bottom: 15px !important;
  border: 1px solid rgba(188, 166, 255, .34) !important;
  border-radius: 17px !important;
  color: #ffffff !important;
  background: linear-gradient(135deg, rgba(104, 72, 255, .94), rgba(164, 105, 255, .8)) !important;
  box-shadow: 0 10px 24px rgba(98, 65, 241, .3) !important;
  transition: transform .24s ease, box-shadow .24s ease !important;
}
.tool-card.tool-card-pdf-demo .tool-card-icon-glyph {
  font-size: 28px !important;
  line-height: 1 !important;
  filter: none !important;
}
.tool-card.tool-card-pdf-demo .tool-card-category {
  display: inline-flex !important;
  align-items: center;
  width: max-content;
  margin: 0 0 8px !important;
  padding: 4px 8px !important;
  border: 1px solid rgba(180, 153, 255, .27);
  border-radius: 999px !important;
  color: #cdbdff !important;
  background: rgba(128, 88, 255, .12) !important;
  font-size: 10px !important;
  font-weight: 800 !important;
  letter-spacing: .08em !important;
  text-transform: uppercase;
}
.tool-card.tool-card-pdf-demo h3 {
  margin: 0 0 7px !important;
  color: #ffffff !important;
  font-size: 19px !important;
  line-height: 1.15 !important;
  letter-spacing: -.02em;
}
.tool-card.tool-card-pdf-demo p {
  max-width: 175px;
  margin: 0 !important;
  color: #aaa6b8 !important;
  font-size: 13px !important;
  line-height: 1.52 !important;
}
@media (hover: hover) and (pointer: fine) {
  .tool-card.tool-card-pdf-demo:hover {
    border-color: rgba(174, 143, 255, .78) !important;
    background:
      radial-gradient(circle at 90% 13%, rgba(165, 116, 255, .34), transparent 42%),
      linear-gradient(145deg, #211a37 0%, #15121e 62%, #101015 100%) !important;
    box-shadow:
      inset 0 1px 0 rgba(255,255,255,.08),
      0 24px 48px rgba(74, 44, 179, .27) !important;
    transform: translateY(-5px) !important;
  }
  .tool-card.tool-card-pdf-demo:hover::before {
    color: #ffffff;
    background: rgba(142, 101, 255, .25);
    transform: translate(2px, -2px);
  }
  .tool-card.tool-card-pdf-demo:hover .tool-card-icon {
    box-shadow: 0 14px 30px rgba(111, 72, 255, .48) !important;
    transform: translateY(-2px) scale(1.05) !important;
  }
}
@media (prefers-reduced-motion: reduce) {
  .tool-card.tool-card-pdf-demo,
  .tool-card.tool-card-pdf-demo::before,
  .tool-card.tool-card-pdf-demo .tool-card-icon {
    transition: none !important;
  }
}/* Vamriko: premium treatment for all home tool cards */
.tool-card {
  position: relative;
  min-height: 206px;
  padding: 22px !important;
  overflow: hidden;
  border: 1px solid rgba(255, 255, 255, .11) !important;
  border-radius: 20px !important;
  color: #f8f6ff !important;
  background:
    radial-gradient(circle at 92% 14%, rgba(145, 101, 255, .13), transparent 36%),
    linear-gradient(145deg, #17141f 0%, #111116 62%, #0d0d10 100%) !important;
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,.045),
    0 12px 28px rgba(0,0,0,.20) !important;
  transition:
    transform .24s ease,
    border-color .24s ease,
    box-shadow .24s ease,
    background .24s ease !important;
}
.tool-card::before {
  content: "↗";
  position: absolute;
  top: 17px;
  right: 18px;
  z-index: 4;
  width: 28px;
  height: 28px;
  display: grid;
  place-items: center;
  border: 1px solid rgba(209, 193, 255, .20);
  border-radius: 9px;
  color: #d8ccff;
  background: rgba(255,255,255,.04);
  font-size: 15px;
  line-height: 1;
  transition: transform .22s ease, background .22s ease, color .22s ease;
}
.tool-card-icon {
  width: 56px !important;
  height: 56px !important;
  display: grid !important;
  place-items: center !important;
  margin-bottom: 15px !important;
  border: 1px solid rgba(188, 166, 255, .30) !important;
  border-radius: 17px !important;
  color: #ffffff !important;
  background: linear-gradient(135deg, rgba(104, 72, 255, .94), rgba(164, 105, 255, .80)) !important;
  box-shadow: 0 10px 24px rgba(98, 65, 241, .28) !important;
  transition: transform .24s ease, box-shadow .24s ease !important;
}
.tool-card-icon-glyph {
  font-size: 28px !important;
  line-height: 1 !important;
  filter: none !important;
}
.tool-card-category {
  display: inline-flex !important;
  align-items: center;
  width: max-content;
  margin: 0 0 8px !important;
  padding: 4px 8px !important;
  border: 1px solid rgba(180, 153, 255, .25);
  border-radius: 999px !important;
  color: #cdbdff !important;
  background: rgba(128, 88, 255, .11) !important;
  font-size: 10px !important;
  font-weight: 800 !important;
  letter-spacing: .08em !important;
  line-height: 1.1 !important;
  text-transform: uppercase;
}
.tool-card h3 {
  margin: 0 0 7px !important;
  color: #ffffff !important;
  font-size: 19px !important;
  line-height: 1.15 !important;
  letter-spacing: -.02em;
}
.tool-card p {
  margin: 0 !important;
  color: #aaa6b8 !important;
  font-size: 13px !important;
  line-height: 1.52 !important;
}
@media (hover: hover) and (pointer: fine) {
  .tool-card:hover {
    z-index: 2;
    border-color: rgba(174, 143, 255, .72) !important;
    background:
      radial-gradient(circle at 90% 13%, rgba(165, 116, 255, .27), transparent 42%),
      linear-gradient(145deg, #211a37 0%, #15121e 62%, #101015 100%) !important;
    box-shadow:
      inset 0 1px 0 rgba(255,255,255,.075),
      0 24px 48px rgba(74, 44, 179, .23) !important;
    transform: translateY(-5px);
  }
  .tool-card:hover::before {
    color: #ffffff;
    background: rgba(142, 101, 255, .24);
    transform: translate(2px, -2px);
  }
  .tool-card:hover .tool-card-icon {
    box-shadow: 0 14px 30px rgba(111, 72, 255, .44) !important;
    transform: translateY(-2px) scale(1.05);
  }
}
@media (max-width: 640px) {
  .tool-card {
    min-height: 190px;
    padding: 19px !important;
    border-radius: 18px !important;
  }
  .tool-card-icon {
    width: 52px !important;
    height: 52px !important;
    border-radius: 16px !important;
  }
  .tool-card h3 {
    font-size: 18px !important;
  }
}
@media (prefers-reduced-motion: reduce) {
  .tool-card,
  .tool-card::before,
  .tool-card-icon {
    transition: none !important;
  }
}/* Fix: keep Image Compressor preview visible above the card surface */
.tool-card {
  position: relative !important;
  overflow: hidden !important;
}
.tool-card .tool-preview-image-compressor {
  z-index: 2 !important;
}
.tool-card > .tool-card-icon,
.tool-card > .tool-card-category,
.tool-card > h3,
.tool-card > p {
  position: relative;
  z-index: 3;
}/* Temporary diagnostic: make Image Compressor preview impossible to miss */
.tool-card .tool-preview-image-compressor {
  position: absolute !important;
  top: 12px !important;
  right: 12px !important;
  bottom: auto !important;
  left: auto !important;
  z-index: 9999 !important;
  width: 136px !important;
  height: 76px !important;
  display: block !important;
  visibility: visible !important;
  opacity: 1 !important;
  overflow: visible !important;
  outline: 3px solid #ff2d55 !important;
  background: rgba(255, 45, 85, .45) !important;
}/* Image Compressor: final visible landscape preview */
.tool-card .tool-preview-image-compressor {
  position: absolute !important;
  right: 14px !important;
  bottom: 14px !important;
  left: auto !important;
  top: auto !important;
  z-index: 2 !important;
  width: 142px !important;
  height: 78px !important;
  display: block !important;
  visibility: visible !important;
  overflow: visible !important;
  outline: none !important;
  background: transparent !important;
  opacity: .94 !important;
  transform: none !important;
  transition: transform .24s ease, opacity .24s ease !important;
}
.tool-card .tool-preview-image-compressor .image-scene {
  position: absolute !important;
  display: block !important;
  overflow: hidden !important;
  border: 1px solid rgba(239, 232, 255, .50) !important;
  background: linear-gradient(160deg, #ab8df0 0%, #6d78c8 45%, #33446f 100%) !important;
  box-shadow: 0 9px 19px rgba(0, 0, 0, .32) !important;
}
.tool-card .tool-preview-image-compressor .image-compress-large {
  top: 4px !important;
  left: 0 !important;
  width: 82px !important;
  height: 64px !important;
  border-radius: 10px !important;
  transform: rotate(-4deg) !important;
}
.tool-card .tool-preview-image-compressor .image-compress-small {
  right: 0 !important;
  bottom: 4px !important;
  width: 49px !important;
  height: 39px !important;
  border-radius: 7px !important;
  transform: rotate(4deg) !important;
}
.tool-card .tool-preview-image-compressor .scene-sun {
  position: absolute !important;
  top: 11px !important;
  right: 12px !important;
  display: block !important;
  width: 12px !important;
  height: 12px !important;
  border-radius: 50% !important;
  background: #ffe38b !important;
  box-shadow: 0 0 10px rgba(255, 226, 139, .82) !important;
}
.tool-card .tool-preview-image-compressor .scene-cloud {
  position: absolute !important;
  display: block !important;
  height: 5px !important;
  border-radius: 999px !important;
  background: rgba(255,255,255,.48) !important;
}
.tool-card .tool-preview-image-compressor .scene-cloud-a {
  top: 21px !important;
  left: 10px !important;
  width: 23px !important;
}
.tool-card .tool-preview-image-compressor .scene-cloud-b {
  top: 30px !important;
  left: 29px !important;
  width: 15px !important;
  opacity: .65 !important;
}
.tool-card .tool-preview-image-compressor .scene-mountain {
  position: absolute !important;
  display: block !important;
  bottom: -23px !important;
  width: 62px !important;
  height: 62px !important;
  border-radius: 9px !important;
  transform: rotate(45deg) !important;
}
.tool-card .tool-preview-image-compressor .scene-mountain-back {
  left: 3px !important;
  background: linear-gradient(135deg, #8be0de, #3a77ac) !important;
  opacity: .94 !important;
}
.tool-card .tool-preview-image-compressor .scene-mountain-front {
  right: -18px !important;
  bottom: -35px !important;
  background: linear-gradient(135deg, #5d94bd, #263f78) !important;
}
.tool-card .tool-preview-image-compressor .scene-haze {
  position: absolute !important;
  right: 0 !important;
  bottom: 0 !important;
  left: 0 !important;
  display: block !important;
  height: 18px !important;
  background: linear-gradient(transparent, rgba(226, 237, 255, .30)) !important;
}
.tool-card .tool-preview-image-compressor .image-compress-arrow {
  position: absolute !important;
  top: 27px !important;
  left: 85px !important;
  z-index: 8 !important;
  width: 24px !important;
  height: 24px !important;
  display: grid !important;
  place-items: center !important;
  border: 1px solid rgba(229, 215, 255, .56) !important;
  border-radius: 50% !important;
  color: #ffffff !important;
  background: linear-gradient(135deg, #9a70f4, #6545ce) !important;
  box-shadow: 0 5px 15px rgba(79, 46, 185, .50) !important;
  font-size: 15px !important;
  font-weight: 800 !important;
  line-height: 1 !important;
}
@media (hover: hover) and (pointer: fine) {
  .tool-card:hover .tool-preview-image-compressor {
    transform: translateY(-2px) !important;
    opacity: 1 !important;
  }
  .tool-card:hover .tool-preview-image-compressor .image-compress-large {
    transform: translateX(-3px) rotate(-7deg) !important;
  }
  .tool-card:hover .tool-preview-image-compressor .image-compress-small {
    transform: translateX(3px) rotate(7deg) scale(1.06) !important;
  }
}
@media (max-width: 640px) {
  .tool-card .tool-preview-image-compressor {
    right: 10px !important;
    bottom: 11px !important;
    opacity: .64 !important;
    transform: scale(.86) !important;
    transform-origin: right bottom !important;
  }
}/* Image Compressor: clear lift-and-compress hover motion */
@media (hover: hover) and (pointer: fine) {
  .tool-card:hover .tool-preview-image-compressor {
    transform: translateY(-8px) scale(1.02) !important;
  }
  .tool-card:hover .tool-preview-image-compressor .image-compress-large {
    transform: translate(-7px, -11px) rotate(-10deg) !important;
    box-shadow: 0 18px 28px rgba(0, 0, 0, .42) !important;
  }
  .tool-card:hover .tool-preview-image-compressor .image-compress-small {
    transform: translate(7px, -15px) rotate(10deg) scale(1.14) !important;
    box-shadow: 0 19px 31px rgba(0, 0, 0, .45) !important;
  }
  .tool-card:hover .tool-preview-image-compressor .image-compress-arrow {
    transform: translateY(-9px) scale(1.18) !important;
    box-shadow: 0 8px 21px rgba(125, 79, 235, .76) !important;
    animation: vamriko-compress-arrow-pulse .78s ease-in-out infinite alternate;
  }
}
@keyframes vamriko-compress-arrow-pulse {
  from {
    filter: brightness(1);
  }
  to {
    filter: brightness(1.28);
  }
}
@media (prefers-reduced-motion: reduce) {
  .tool-card:hover .tool-preview-image-compressor,
  .tool-card:hover .tool-preview-image-compressor * {
    animation: none !important;
    transform: none !important;
  }
}/* Fix: ensure Logo to Intro cinematic preview stays visible */
.tool-card .tool-preview-logo-intro {
  position: absolute !important;
  right: 15px !important;
  bottom: 14px !important;
  top: auto !important;
  left: auto !important;
  z-index: 2 !important;
  width: 128px !important;
  height: 78px !important;
  display: block !important;
  visibility: visible !important;
  opacity: .92 !important;
  overflow: hidden !important;
  pointer-events: none !important;
}
.tool-card .tool-preview-logo-intro .logo-intro-glow,
.tool-card .tool-preview-logo-intro .logo-intro-orbit,
.tool-card .tool-preview-logo-intro .logo-intro-core,
.tool-card .tool-preview-logo-intro .logo-intro-spark {
  display: block !important;
  visibility: visible !important;
}/* Temporary diagnostic: Logo to Intro preview visibility */
.tool-card .tool-preview-logo-intro {
  position: absolute !important;
  top: 8px !important;
  right: 8px !important;
  bottom: auto !important;
  left: auto !important;
  z-index: 99999 !important;
  width: 128px !important;
  height: 78px !important;
  display: block !important;
  visibility: visible !important;
  opacity: 1 !important;
  overflow: visible !important;
  outline: 3px solid #00e5ff !important;
  background: rgba(0, 229, 255, .40) !important;
}/* Logo to Intro: final cinematic logo reveal */
.tool-card .tool-preview-logo-intro {
  position: absolute !important;
  right: 14px !important;
  bottom: 14px !important;
  top: auto !important;
  left: auto !important;
  z-index: 2 !important;
  width: 128px !important;
  height: 78px !important;
  display: block !important;
  visibility: visible !important;
  overflow: hidden !important;
  pointer-events: none !important;
  outline: none !important;
  border: 1px solid rgba(225, 209, 255, .38) !important;
  border-radius: 12px !important;
  opacity: .94 !important;
  background:
    radial-gradient(circle at 50% 50%, rgba(179, 109, 255, .42), transparent 27%),
    linear-gradient(145deg, #2d1e57 0%, #151025 62%, #0e0d14 100%) !important;
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,.10),
    0 12px 25px rgba(0,0,0,.34) !important;
  transform: none !important;
  transition: transform .28s ease, box-shadow .28s ease, opacity .28s ease !important;
}
.tool-card .tool-preview-logo-intro .logo-intro-glow {
  position: absolute !important;
  top: 14px !important;
  left: 39px !important;
  display: block !important;
  width: 50px !important;
  height: 50px !important;
  border-radius: 50% !important;
  visibility: visible !important;
  background: radial-gradient(circle, rgba(208, 161, 255, .56), rgba(123, 69, 243, .15) 51%, transparent 72%) !important;
  filter: blur(2px) !important;
}
.tool-card .tool-preview-logo-intro .logo-intro-core {
  position: absolute !important;
  top: 25px !important;
  left: 48px !important;
  z-index: 5 !important;
  display: block !important;
  width: 31px !important;
  height: 31px !important;
  visibility: visible !important;
  border: 1px solid rgba(255,255,255,.78) !important;
  border-radius: 8px !important;
  background: linear-gradient(135deg, #d9b7ff, #8753e7 55%, #5431b4) !important;
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,.48),
    0 0 19px rgba(183, 116, 255, .78) !important;
  transform: rotate(45deg) !important;
  transition: transform .32s cubic-bezier(.2,.9,.2,1), box-shadow .32s ease !important;
}
.tool-card .tool-preview-logo-intro .logo-intro-core i {
  position: absolute !important;
  top: 14px !important;
  left: 7px !important;
  display: block !important;
  width: 17px !important;
  height: 2px !important;
  visibility: visible !important;
  border-radius: 999px !important;
  background: rgba(255,255,255,.93) !important;
  transform: rotate(-45deg) !important;
}
.tool-card .tool-preview-logo-intro .logo-intro-core i:nth-child(1) {
  top: 9px !important;
  left: 11px !important;
  width: 10px !important;
}
.tool-card .tool-preview-logo-intro .logo-intro-core i:nth-child(2) {
  top: 14px !important;
  left: 7px !important;
  width: 17px !important;
}
.tool-card .tool-preview-logo-intro .logo-intro-core i:nth-child(3) {
  top: 19px !important;
  left: 11px !important;
  width: 8px !important;
}
.tool-card .tool-preview-logo-intro .logo-intro-orbit {
  position: absolute !important;
  z-index: 3 !important;
  display: block !important;
  height: 2px !important;
  visibility: visible !important;
  border: 0 !important;
  border-radius: 999px !important;
  background: linear-gradient(90deg, transparent, rgba(238, 196, 255, .96), transparent) !important;
  box-shadow: 0 0 10px rgba(207, 135, 255, .80) !important;
}
.tool-card .tool-preview-logo-intro .logo-intro-orbit-a {
  top: 27px !important;
  left: 13px !important;
  width: 104px !important;
  transform: rotate(-24deg) !important;
}
.tool-card .tool-preview-logo-intro .logo-intro-orbit-b {
  top: 49px !important;
  left: 12px !important;
  width: 102px !important;
  background: linear-gradient(90deg, transparent, rgba(255, 135, 204, .90), transparent) !important;
  box-shadow: 0 0 10px rgba(255, 123, 190, .65) !important;
  transform: rotate(24deg) !important;
}
.tool-card .tool-preview-logo-intro .logo-intro-spark {
  position: absolute !important;
  z-index: 6 !important;
  display: block !important;
  width: 5px !important;
  height: 5px !important;
  visibility: visible !important;
  border-radius: 50% !important;
  background: #fff1b9 !important;
  box-shadow: 0 0 11px rgba(255, 225, 139, .96) !important;
}
.tool-card .tool-preview-logo-intro .logo-intro-spark-a {
  top: 17px !important;
  left: 25px !important;
}
.tool-card .tool-preview-logo-intro .logo-intro-spark-b {
  right: 21px !important;
  bottom: 17px !important;
  background: #f2d5ff !important;
  box-shadow: 0 0 11px rgba(224, 169, 255, .95) !important;
}
@media (hover: hover) and (pointer: fine) {
  .tool-card:hover .tool-preview-logo-intro {
    opacity: 1 !important;
    transform: translateY(-8px) scale(1.03) !important;
    box-shadow:
      inset 0 1px 0 rgba(255,255,255,.16),
      0 20px 35px rgba(83, 41, 177, .42) !important;
  }
  .tool-card:hover .tool-preview-logo-intro .logo-intro-core {
    transform: translateY(-8px) rotate(225deg) scale(1.12) !important;
    box-shadow:
      inset 0 1px 0 rgba(255,255,255,.60),
      0 0 29px rgba(204, 137, 255, .95) !important;
  }
  .tool-card:hover .tool-preview-logo-intro .logo-intro-orbit-a {
    transform: translate(-4px, -7px) rotate(-24deg) !important;
  }
  .tool-card:hover .tool-preview-logo-intro .logo-intro-orbit-b {
    transform: translate(4px, 7px) rotate(24deg) !important;
  }
  .tool-card:hover .tool-preview-logo-intro .logo-intro-spark-a {
    transform: translate(25px, 14px) scale(1.45) !important;
  }
  .tool-card:hover .tool-preview-logo-intro .logo-intro-spark-b {
    transform: translate(-26px, -14px) scale(1.35) !important;
  }
}
@media (max-width: 640px) {
  .tool-card .tool-preview-logo-intro {
    right: 11px !important;
    bottom: 11px !important;
    opacity: .63 !important;
    transform: scale(.86) !important;
    transform-origin: right bottom !important;
  }
}
@media (prefers-reduced-motion: reduce) {
  .tool-card .tool-preview-logo-intro,
  .tool-card .tool-preview-logo-intro * {
    animation: none !important;
    transition: none !important;
  }
}/* Featured cards use their bespoke preview as the visual icon */
.tool-card.tool-merge-pdf .tool-card-icon,
.tool-card.tool-image-compressor .tool-card-icon,
.tool-card.tool-logo-to-intro .tool-card-icon {
  display: none !important;
}
/* Reclaim the vertical space left by the hidden icon */
.tool-card.tool-merge-pdf,
.tool-card.tool-image-compressor,
.tool-card.tool-logo-to-intro {
  padding-top: 24px !important;
}
.tool-card.tool-merge-pdf .tool-card-category,
.tool-card.tool-image-compressor .tool-card-category,
.tool-card.tool-logo-to-intro .tool-card-category {
  margin-top: 0 !important;
}/* Hide the default icon automatically when a bespoke card preview exists */
.tool-card:has(.tool-preview-pdf) .tool-card-icon,
.tool-card:has(.tool-preview-image-compressor) .tool-card-icon,
.tool-card:has(.tool-preview-logo-intro) .tool-card-icon {
  display: none !important;
}
.tool-card:has(.tool-preview-pdf),
.tool-card:has(.tool-preview-image-compressor),
.tool-card:has(.tool-preview-logo-intro) {
  padding-top: 24px !important;
}
.tool-card:has(.tool-preview-pdf) .tool-card-category,
.tool-card:has(.tool-preview-image-compressor) .tool-card-category,
.tool-card:has(.tool-preview-logo-intro) .tool-card-category {
  margin-top: 0 !important;
}/* Password Generator: an open lock that closes firmly on hover */
.tool-card .tool-preview-password .password-lock {
  top: 24px !important;
  left: 48px !important;
  width: 34px !important;
  height: 38px !important;
}
.tool-card .tool-preview-password .password-lock-shackle {
  top: -5px !important;
  left: 8px !important;
  width: 18px !important;
  height: 19px !important;
  border: 4px solid #b6ffe2 !important;
  border-bottom: 0 !important;
  border-radius: 12px 12px 0 0 !important;
  transform: translateX(8px) rotate(18deg) !important;
  transform-origin: left bottom !important;
  transition:
    transform .42s cubic-bezier(.2,.9,.2,1),
    box-shadow .30s ease,
    border-color .30s ease !important;
}
.tool-card .tool-preview-password .password-lock-body {
  bottom: 0 !important;
  left: 1px !important;
  width: 32px !important;
  height: 24px !important;
  border-radius: 7px !important;
}
.tool-card .tool-preview-password .password-lock-body i {
  position: relative !important;
  width: 6px !important;
  height: 8px !important;
  border-radius: 99px 99px 3px 3px !important;
}
.tool-card .tool-preview-password .password-lock-body i::after {
  content: "";
  position: absolute;
  bottom: -5px;
  left: 2px;
  width: 2px;
  height: 6px;
  border-radius: 99px;
  background: #e8fff7;
}
@media (hover: hover) and (pointer: fine) {
  .tool-card:hover .tool-preview-password .password-lock {
    transform: translateY(-5px) scale(1.10) !important;
  }
  .tool-card:hover .tool-preview-password .password-lock-shackle {
    transform: translateX(0) rotate(0deg) !important;
    border-color: #e6fff4 !important;
    box-shadow:
      0 0 10px rgba(108, 243, 184, .74),
      0 0 22px rgba(86, 235, 170, .34) !important;
  }
  .tool-card:hover .tool-preview-password .password-lock-body {
    background: linear-gradient(135deg, #66eab3, #287c63) !important;
    box-shadow:
      inset 0 1px 0 rgba(255,255,255,.48),
      0 0 25px rgba(86, 235, 170, .66) !important;
  }
  .tool-card:hover .tool-preview-password .password-lock-body i,
  .tool-card:hover .tool-preview-password .password-lock-body i::after {
    background: #ffffff !important;
    box-shadow: 0 0 9px rgba(255,255,255,.88) !important;
  }
  .tool-card:hover .tool-preview-password .password-strength i {
    transform: scaleX(1.16) !important;
    transform-origin: left !important;
  }
}
@media (prefers-reduced-motion: reduce) {
  .tool-card .tool-preview-password .password-lock-shackle,
  .tool-card .tool-preview-password .password-lock,
  .tool-card .tool-preview-password .password-lock-body {
    transition: none !important;
  }
}/* Fix: make Password Generator preview visible above the card surface */
.tool-card .tool-preview-password {
  position: absolute !important;
  right: 14px !important;
  bottom: 14px !important;
  top: auto !important;
  left: auto !important;
  z-index: 999 !important;
  width: 128px !important;
  height: 78px !important;
  display: block !important;
  visibility: visible !important;
  opacity: 1 !important;
  overflow: hidden !important;
  pointer-events: none !important;
}
.tool-card .tool-preview-password,
.tool-card .tool-preview-password * {
  box-sizing: border-box !important;
}/* Password Generator: use the card icon as the visual, hide duplicate lock preview */
.tool-card.tool-password-generator .tool-preview-password {
  display: none !important;
}
.tool-card.tool-password-generator .tool-card-icon.tool-icon-lock {
  position: absolute !important;
  right: 18px !important;
  bottom: 17px !important;
  left: auto !important;
  top: auto !important;
  z-index: 10 !important;
  display: grid !important;
  place-items: center !important;
  width: 72px !important;
  height: 72px !important;
  border: 1px solid rgba(174, 255, 220, .34) !important;
  border-radius: 20px !important;
  background:
    radial-gradient(circle at 45% 35%, rgba(121, 255, 198, .28), transparent 38%),
    linear-gradient(145deg, #214b3e, #101d1a) !important;
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,.14),
    0 14px 28px rgba(0,0,0,.30) !important;
  overflow: hidden !important;
  transition: transform .30s ease, box-shadow .30s ease, background .30s ease !important;
}
.tool-card.tool-password-generator .tool-card-icon.tool-icon-lock::before {
  content: "" !important;
  position: absolute !important;
  inset: 8px !important;
  border: 1px solid rgba(185,255,224,.15) !important;
  border-radius: 15px !important;
  pointer-events: none !important;
}
.tool-card.tool-password-generator .tool-card-icon-glyph {
  position: relative !important;
  z-index: 2 !important;
  display: block !important;
  font-size: 35px !important;
  line-height: 1 !important;
  filter: drop-shadow(0 0 10px rgba(123,255,198,.52)) !important;
  transform: translateY(-1px) !important;
  transition: transform .30s ease, filter .30s ease !important;
}
@media (hover: hover) and (pointer: fine) {
  .tool-card.tool-password-generator:hover .tool-card-icon.tool-icon-lock {
    transform: translateY(-7px) rotate(-4deg) scale(1.06) !important;
    background:
      radial-gradient(circle at 45% 35%, rgba(144, 255, 208, .42), transparent 42%),
      linear-gradient(145deg, #2c6753, #12251f) !important;
    box-shadow:
      inset 0 1px 0 rgba(255,255,255,.20),
      0 20px 34px rgba(34, 181, 123, .32) !important;
  }
  .tool-card.tool-password-generator:hover .tool-card-icon-glyph {
    transform: translateY(-3px) scale(1.10) !important;
    filter: drop-shadow(0 0 16px rgba(146,255,211,.90)) !important;
  }
}
@media (max-width: 640px) {
  .tool-card.tool-password-generator .tool-card-icon.tool-icon-lock {
    right: 14px !important;
    bottom: 14px !important;
    width: 60px !important;
    height: 60px !important;
    border-radius: 17px !important;
  }
  .tool-card.tool-password-generator .tool-card-icon-glyph {
    font-size: 29px !important;
  }
}/* Password Generator - CSS padlock: open normally, locks on card hover */
.tool-card.tool-password-generator .tool-card-icon.tool-icon-lock {
  display: none !important;
}
.tool-card.tool-password-generator .tool-preview-password {
  position: absolute !important;
  right: 17px !important;
  bottom: 16px !important;
  left: auto !important;
  top: auto !important;
  z-index: 20 !important;
  display: block !important;
  visibility: visible !important;
  opacity: 1 !important;
  width: 112px !important;
  height: 88px !important;
  overflow: visible !important;
  pointer-events: none !important;
  border: 1px solid rgba(178, 255, 225, .34) !important;
  border-radius: 16px !important;
  background:
    radial-gradient(circle at 50% 42%, rgba(83, 239, 172, .22), transparent 40%),
    linear-gradient(145deg, #1b4136 0%, #10231d 100%) !important;
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,.12),
    0 14px 28px rgba(0,0,0,.34) !important;
  transform: none !important;
  transition:
    transform .28s ease,
    box-shadow .28s ease,
    background .28s ease !important;
}
/* Keep old decorative parts hidden: the lock itself is the focus */
.tool-card.tool-password-generator .password-dots,
.tool-card.tool-password-generator .password-strength,
.tool-card.tool-password-generator .password-spark {
  display: none !important;
}
/* Lock wrapper */
.tool-card.tool-password-generator .password-lock {
  position: absolute !important;
  left: 36px !important;
  bottom: 13px !important;
  display: block !important;
  width: 42px !important;
  height: 55px !important;
  transform: none !important;
}
/* The shackle starts OPEN: raised and tilted away from the body */
.tool-card.tool-password-generator .password-lock-shackle {
  position: absolute !important;
  top: 0 !important;
  left: 6px !important;
  z-index: 1 !important;
  display: block !important;
  width: 30px !important;
  height: 31px !important;
  box-sizing: border-box !important;
  border: 5px solid #caffea !important;
  border-bottom: 0 !important;
  border-radius: 18px 18px 0 0 !important;
  background: transparent !important;
  box-shadow: 0 0 12px rgba(117, 255, 195, .54) !important;
  transform-origin: 5px 26px !important;
  transform: translate(-11px, -10px) rotate(-35deg) !important;
  transition:
    transform .46s cubic-bezier(.18, .88, .28, 1.22),
    box-shadow .30s ease,
    border-color .30s ease !important;
}
/* Solid body */
.tool-card.tool-password-generator .password-lock-body {
  position: absolute !important;
  bottom: 0 !important;
  left: 0 !important;
  z-index: 2 !important;
  display: grid !important;
  place-items: center !important;
  width: 42px !important;
  height: 34px !important;
  box-sizing: border-box !important;
  border: 1px solid rgba(235, 255, 247, .78) !important;
  border-radius: 9px !important;
  background: linear-gradient(135deg, #68eab2 0%, #28775f 100%) !important;
  box-shadow:
    inset 0 2px 0 rgba(255,255,255,.40),
    0 8px 17px rgba(11, 87, 58, .50) !important;
  transition:
    background .30s ease,
    box-shadow .30s ease,
    transform .30s ease !important;
}
/* Keyhole */
.tool-card.tool-password-generator .password-lock-body i {
  position: relative !important;
  display: block !important;
  width: 8px !important;
  height: 10px !important;
  border-radius: 50% 50% 3px 3px !important;
  background: #103e31 !important;
  box-shadow: 0 0 0 2px rgba(222,255,241,.20) !important;
}
.tool-card.tool-password-generator .password-lock-body i::after {
  content: "" !important;
  position: absolute !important;
  left: 3px !important;
  top: 7px !important;
  width: 2px !important;
  height: 8px !important;
  border-radius: 2px !important;
  background: #103e31 !important;
}
/* Hover: the raised shackle rotates and drops precisely into the locked position */
@media (hover: hover) and (pointer: fine) {
  .tool-card.tool-password-generator:hover .tool-preview-password {
    transform: translateY(-7px) scale(1.04) !important;
    background:
      radial-gradient(circle at 50% 42%, rgba(117, 255, 198, .36), transparent 43%),
      linear-gradient(145deg, #245945 0%, #11271f 100%) !important;
    box-shadow:
      inset 0 1px 0 rgba(255,255,255,.18),
      0 20px 34px rgba(35, 196, 128, .31) !important;
  }
  .tool-card.tool-password-generator:hover .password-lock-shackle {
    transform: translate(0, 0) rotate(0deg) !important;
    border-color: #e4fff4 !important;
    box-shadow:
      0 0 13px rgba(144, 255, 211, .95),
      0 0 27px rgba(74, 234, 157, .46) !important;
  }
  .tool-card.tool-password-generator:hover .password-lock-body {
    transform: translateY(1px) !important;
    background: linear-gradient(135deg, #8af8c8 0%, #2d8f6f 100%) !important;
    box-shadow:
      inset 0 2px 0 rgba(255,255,255,.55),
      0 0 24px rgba(77, 239, 163, .56) !important;
  }
}
@media (max-width: 640px) {
  .tool-card.tool-password-generator .tool-preview-password {
    right: 12px !important;
    bottom: 12px !important;
    transform: scale(.88) !important;
    transform-origin: right bottom !important;
  }
  .tool-card.tool-password-generator:hover .tool-preview-password {
    transform: translateY(-5px) scale(.92) !important;
  }
}
@media (prefers-reduced-motion: reduce) {
  .tool-card.tool-password-generator .tool-preview-password,
  .tool-card.tool-password-generator .password-lock-shackle,
  .tool-card.tool-password-generator .password-lock-body {
    transition: none !important;
  }
}/* Social Media Image Studio - real card visual */
.tool-card.tool-social-media-image-studio {
  overflow: hidden !important;
}
.tool-card.tool-social-media-image-studio .tool-card-icon,
.tool-card.tool-social-media-image-studio .tool-icon-image {
  display: none !important;
}
.tool-card.tool-social-media-image-studio .tool-preview-social-studio {
  position: absolute !important;
  right: 13px !important;
  bottom: 11px !important;
  z-index: 15 !important;
  display: block !important;
  visibility: visible !important;
  opacity: 1 !important;
  width: 150px !important;
  height: 106px !important;
  overflow: visible !important;
  pointer-events: none !important;
}
.tool-card.tool-social-media-image-studio .social-source-frame {
  position: absolute !important;
  left: 48px !important;
  top: 28px !important;
  z-index: 5 !important;
  display: block !important;
  width: 48px !important;
  height: 48px !important;
  overflow: hidden !important;
  border: 2px solid rgba(239,247,255,.88) !important;
  border-radius: 11px !important;
  background: linear-gradient(145deg, #3d7cff 0%, #1d469f 58%, #192866 100%) !important;
  box-shadow: inset 0 1px 0 rgba(255,255,255,.28), 0 9px 19px rgba(8,23,70,.40) !important;
  transform: rotate(-4deg) !important;
  transition: transform .45s cubic-bezier(.18,.88,.25,1.18), box-shadow .30s ease !important;
}
.tool-card.tool-social-media-image-studio .social-source-sun {
  position: absolute !important;
  top: 9px !important;
  right: 9px !important;
  display: block !important;
  width: 11px !important;
  height: 11px !important;
  border-radius: 50% !important;
  background: #ffe586 !important;
  box-shadow: 0 0 12px rgba(255,229,134,.78) !important;
}
.tool-card.tool-social-media-image-studio .social-source-hill {
  position: absolute !important;
  left: -8px !important;
  right: -8px !important;
  bottom: -13px !important;
  display: block !important;
  height: 37px !important;
  background:
    linear-gradient(135deg, transparent 48%, #70e0b8 49% 63%, transparent 64%),
    linear-gradient(45deg, transparent 43%, #3faf91 44% 61%, transparent 62%),
    #255fb6 !important;
  transform: rotate(-4deg) !important;
}
.tool-card.tool-social-media-image-studio .social-format {
  position: absolute !important;
  z-index: 4 !important;
  display: grid !important;
  place-items: center !important;
  box-sizing: border-box !important;
  overflow: hidden !important;
  border: 1px solid rgba(255,255,255,.74) !important;
  color: #fff !important;
  font: 800 9px/1 inherit !important;
  letter-spacing: .2px !important;
  box-shadow: inset 0 1px 0 rgba(255,255,255,.22), 0 7px 16px rgba(0,0,0,.25) !important;
  transition: transform .48s cubic-bezier(.18,.88,.25,1.18), box-shadow .30s ease, filter .30s ease !important;
}
.tool-card.tool-social-media-image-studio .social-format::before {
  content: "" !important;
  position: absolute !important;
  inset: 4px !important;
  border: 1px solid rgba(255,255,255,.19) !important;
  border-radius: inherit !important;
}
.tool-card.tool-social-media-image-studio .social-format b {
  position: relative !important;
  z-index: 1 !important;
}
.tool-card.tool-social-media-image-studio .social-format-youtube {
  top: 7px !important;
  right: 4px !important;
  width: 52px !important;
  height: 28px !important;
  border-radius: 8px !important;
  background: linear-gradient(145deg, #ff5962, #b91232) !important;
  transform: translate(-8px, 11px) rotate(6deg) scale(.86) !important;
  transition-delay: .02s !important;
}
.tool-card.tool-social-media-image-studio .social-format-instagram {
  top: 13px !important;
  left: 18px !important;
  width: 33px !important;
  height: 33px !important;
  border-radius: 9px !important;
  background: linear-gradient(145deg, #ffb34d, #e43499 50%, #6749db 100%) !important;
  transform: translate(16px, 14px) rotate(-9deg) scale(.82) !important;
  transition-delay: .07s !important;
}
.tool-card.tool-social-media-image-studio .social-format-tiktok {
  top: 31px !important;
  right: 5px !important;
  width: 25px !important;
  height: 48px !important;
  border-radius: 8px !important;
  background: linear-gradient(155deg, #36e9eb, #16203a 48%, #f24983 100%) !important;
  transform: translate(-12px, -5px) rotate(7deg) scale(.80) !important;
  transition-delay: .12s !important;
}
.tool-card.tool-social-media-image-studio .social-format-x {
  left: 7px !important;
  bottom: 4px !important;
  width: 49px !important;
  height: 23px !important;
  border-radius: 7px !important;
  background: linear-gradient(145deg, #559cff, #233e95) !important;
  transform: translate(19px, -8px) rotate(-5deg) scale(.82) !important;
  transition-delay: .17s !important;
}
.tool-card.tool-social-media-image-studio .social-connector {
  position: absolute !important;
  z-index: 2 !important;
  display: block !important;
  height: 1px !important;
  transform-origin: left center !important;
  background: linear-gradient(90deg, rgba(166,213,255,.10), rgba(185,233,255,.88)) !important;
  opacity: .40 !important;
  transition: opacity .32s ease, transform .45s cubic-bezier(.2,.85,.2,1) !important;
}
.tool-card.tool-social-media-image-studio .social-connector-yt {
  top: 38px !important;
  left: 89px !important;
  width: 39px !important;
  transform: rotate(-27deg) scaleX(.54) !important;
}
.tool-card.tool-social-media-image-studio .social-connector-ig {
  top: 44px !important;
  left: 50px !important;
  width: 30px !important;
  transform: rotate(-142deg) scaleX(.54) !important;
}
.tool-card.tool-social-media-image-studio .social-connector-tt {
  top: 56px !important;
  left: 93px !important;
  width: 35px !important;
  transform: rotate(27deg) scaleX(.54) !important;
}
.tool-card.tool-social-media-image-studio .social-connector-x {
  top: 69px !important;
  left: 52px !important;
  width: 30px !important;
  transform: rotate(143deg) scaleX(.54) !important;
}
@media (hover: hover) and (pointer: fine) {
  .tool-card.tool-social-media-image-studio:hover .social-source-frame {
    transform: translate(-8px, -9px) rotate(-8deg) scale(1.10) !important;
    box-shadow: inset 0 1px 0 rgba(255,255,255,.36), 0 14px 27px rgba(39,108,255,.56) !important;
  }
  .tool-card.tool-social-media-image-studio:hover .social-format {
    filter: brightness(1.13) saturate(1.12) !important;
    box-shadow: inset 0 1px 0 rgba(255,255,255,.36), 0 12px 23px rgba(0,0,0,.34) !important;
  }
  .tool-card.tool-social-media-image-studio:hover .social-format-youtube {
    transform: translate(4px, -9px) rotate(5deg) scale(1.12) !important;
  }
  .tool-card.tool-social-media-image-studio:hover .social-format-instagram {
    transform: translate(-8px, -5px) rotate(-12deg) scale(1.14) !important;
  }
  .tool-card.tool-social-media-image-studio:hover .social-format-tiktok {
    transform: translate(7px, 10px) rotate(9deg) scale(1.14) !important;
  }
  .tool-card.tool-social-media-image-studio:hover .social-format-x {
    transform: translate(-9px, 10px) rotate(-7deg) scale(1.14) !important;
  }
  .tool-card.tool-social-media-image-studio:hover .social-connector {
    opacity: .96 !important;
  }
  .tool-card.tool-social-media-image-studio:hover .social-connector-yt {
    transform: rotate(-27deg) scaleX(1) !important;
  }
  .tool-card.tool-social-media-image-studio:hover .social-connector-ig {
    transform: rotate(-142deg) scaleX(1) !important;
  }
  .tool-card.tool-social-media-image-studio:hover .social-connector-tt {
    transform: rotate(27deg) scaleX(1) !important;
  }
  .tool-card.tool-social-media-image-studio:hover .social-connector-x {
    transform: rotate(143deg) scaleX(1) !important;
  }
}
@media (max-width: 640px) {
  .tool-card.tool-social-media-image-studio .tool-preview-social-studio {
    right: 8px !important;
    bottom: 7px !important;
    transform: scale(.84) !important;
    transform-origin: right bottom !important;
  }
}
@media (prefers-reduced-motion: reduce) {
  .tool-card.tool-social-media-image-studio .tool-preview-social-studio,
  .tool-card.tool-social-media-image-studio .tool-preview-social-studio * {
    transition: none !important;
  }
}/* SOCIAL-STUDIO-IDENTITY-FIX */
.tool-card.tool-social-media-image-studio .social-youtube-play {
  position: absolute !important;
  left: 50% !important;
  top: 50% !important;
  z-index: 10 !important;
  display: block !important;
  width: 19px !important;
  height: 14px !important;
  border-radius: 5px !important;
  background: #ffffff !important;
  transform: translate(-50%, -50%) !important;
  box-shadow: 0 2px 6px rgba(0,0,0,.28) !important;
}
.tool-card.tool-social-media-image-studio .social-youtube-play::after {
  content: "" !important;
  position: absolute !important;
  left: 7px !important;
  top: 3px !important;
  display: block !important;
  width: 0 !important;
  height: 0 !important;
  border-top: 4px solid transparent !important;
  border-bottom: 4px solid transparent !important;
  border-left: 6px solid #d91f3d !important;
}
.tool-card.tool-social-media-image-studio .social-instagram-camera {
  position: absolute !important;
  left: 50% !important;
  top: 50% !important;
  z-index: 10 !important;
  display: block !important;
  width: 19px !important;
  height: 19px !important;
  box-sizing: border-box !important;
  border: 2px solid #ffffff !important;
  border-radius: 6px !important;
  transform: translate(-50%, -50%) !important;
  box-shadow: 0 2px 6px rgba(0,0,0,.20) !important;
}
.tool-card.tool-social-media-image-studio .social-instagram-lens {
  position: absolute !important;
  left: 50% !important;
  top: 50% !important;
  display: block !important;
  width: 6px !important;
  height: 6px !important;
  box-sizing: border-box !important;
  border: 2px solid #ffffff !important;
  border-radius: 50% !important;
  transform: translate(-50%, -50%) !important;
}
.tool-card.tool-social-media-image-studio .social-instagram-dot {
  position: absolute !important;
  top: 2px !important;
  right: 2px !important;
  display: block !important;
  width: 3px !important;
  height: 3px !important;
  border-radius: 50% !important;
  background: #ffffff !important;
}
.tool-card.tool-social-media-image-studio .social-tiktok-note {
  position: absolute !important;
  left: 50% !important;
  top: 11px !important;
  z-index: 10 !important;
  display: block !important;
  color: #ffffff !important;
  font-family: Arial, sans-serif !important;
  font-size: 27px !important;
  font-weight: 900 !important;
  line-height: 1 !important;
  text-shadow: -2px 1px 0 #2fe8e9, 2px -1px 0 #f34c87 !important;
  transform: translateX(-50%) rotate(-5deg) !important;
}
.tool-card.tool-social-media-image-studio .social-linkedin-mark {
  position: absolute !important;
  left: 7px !important;
  top: 50% !important;
  z-index: 10 !important;
  display: grid !important;
  place-items: center !important;
  width: 14px !important;
  height: 14px !important;
  border-radius: 2px !important;
  background: #ffffff !important;
  color: #0a5d9f !important;
  font-family: Arial, sans-serif !important;
  font-size: 10px !important;
  font-weight: 900 !important;
  line-height: 1 !important;
  transform: translateY(-50%) !important;
}
.tool-card.tool-social-media-image-studio .social-format-x {
  background: linear-gradient(145deg, #1673b8, #084b87) !important;
}
@media (hover: hover) and (pointer: fine) {
  .tool-card.tool-social-media-image-studio:hover .social-youtube-play,
  .tool-card.tool-social-media-image-studio:hover .social-instagram-camera {
    transform: translate(-50%, -50%) scale(1.13) !important;
  }
  .tool-card.tool-social-media-image-studio:hover .social-tiktok-note {
    transform: translateX(-50%) rotate(-5deg) scale(1.11) !important;
  }
  .tool-card.tool-social-media-image-studio:hover .social-linkedin-mark {
    transform: translateY(-50%) scale(1.11) !important;
  }
}
/* QR-CODE-CARD-VISUAL-START */
.tool-card.tool-qr-code-generator {
  overflow: hidden !important;
}
.tool-card.tool-qr-code-generator .tool-card-icon,
.tool-card.tool-qr-code-generator .tool-icon-grid {
  display: none !important;
}
.tool-card.tool-qr-code-generator .tool-preview-qr-card {
  position: absolute !important;
  right: 14px !important;
  bottom: 12px !important;
  z-index: 15 !important;
  display: block !important;
  width: 104px !important;
  height: 104px !important;
  overflow: hidden !important;
  border: 1px solid rgba(175, 210, 255, .58) !important;
  border-radius: 16px !important;
  background:
    radial-gradient(circle at 50% 42%, rgba(94, 166, 255, .22), transparent 60%),
    linear-gradient(145deg, #16263f 0%, #0d1727 100%) !important;
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,.15),
    0 13px 27px rgba(0,0,0,.35) !important;
  pointer-events: none !important;
  transform: translateZ(0) !important;
  transition:
    transform .42s cubic-bezier(.2,.85,.2,1),
    border-color .30s ease,
    box-shadow .30s ease !important;
}
.tool-card.tool-qr-code-generator .qr-image-frame {
  position: absolute !important;
  left: 13px !important;
  top: 13px !important;
  z-index: 2 !important;
  display: block !important;
  width: 78px !important;
  height: 78px !important;
  overflow: hidden !important;
  border: 2px solid rgba(255,255,255,.90) !important;
  border-radius: 8px !important;
  background: #ffffff !important;
  box-shadow: 0 5px 15px rgba(0,0,0,.26) !important;
  transform: rotate(-2deg) !important;
  transition:
    transform .44s cubic-bezier(.18,.88,.25,1.18),
    box-shadow .30s ease,
    filter .30s ease !important;
}
.tool-card.tool-qr-code-generator .qr-image-frame img {
  display: block !important;
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important;
  image-rendering: auto !important;
  filter: contrast(1.14) brightness(1.02) !important;
  transform: scale(1.02) !important;
  transition: transform .44s cubic-bezier(.18,.88,.25,1.18) !important;
}
.tool-card.tool-qr-code-generator .qr-scan-corners {
  position: absolute !important;
  inset: 7px !important;
  z-index: 5 !important;
  display: block !important;
  pointer-events: none !important;
}
.tool-card.tool-qr-code-generator .qr-corner {
  position: absolute !important;
  display: block !important;
  width: 15px !important;
  height: 15px !important;
  border-color: #8bc8ff !important;
  border-style: solid !important;
  opacity: .72 !important;
  transition: opacity .24s ease, filter .24s ease !important;
}
.tool-card.tool-qr-code-generator .qr-corner-tl {
  left: 0 !important;
  top: 0 !important;
  border-width: 2px 0 0 2px !important;
  border-radius: 6px 0 0 0 !important;
}
.tool-card.tool-qr-code-generator .qr-corner-tr {
  right: 0 !important;
  top: 0 !important;
  border-width: 2px 2px 0 0 !important;
  border-radius: 0 6px 0 0 !important;
}
.tool-card.tool-qr-code-generator .qr-corner-bl {
  left: 0 !important;
  bottom: 0 !important;
  border-width: 0 0 2px 2px !important;
  border-radius: 0 0 0 6px !important;
}
.tool-card.tool-qr-code-generator .qr-corner-br {
  right: 0 !important;
  bottom: 0 !important;
  border-width: 0 2px 2px 0 !important;
  border-radius: 0 0 6px 0 !important;
}
.tool-card.tool-qr-code-generator .qr-scan-line {
  position: absolute !important;
  left: 14px !important;
  top: 17px !important;
  z-index: 7 !important;
  display: block !important;
  width: 76px !important;
  height: 2px !important;
  border-radius: 99px !important;
  opacity: .52 !important;
  background: #6caeff !important;
  box-shadow:
    0 0 8px #6caeff,
    0 0 18px rgba(78,155,255,.78) !important;
  transform: translateY(0) !important;
  transition: opacity .20s ease !important;
}
.tool-card.tool-qr-code-generator .qr-success {
  position: absolute !important;
  right: 5px !important;
  bottom: 5px !important;
  z-index: 8 !important;
  display: grid !important;
  place-items: center !important;
  width: 20px !important;
  height: 20px !important;
  border: 1px solid rgba(235,247,255,.95) !important;
  border-radius: 50% !important;
  color: #123d75 !important;
  background: #b9dcff !important;
  font-family: Arial, sans-serif !important;
  font-size: 14px !important;
  font-weight: 900 !important;
  line-height: 1 !important;
  opacity: 0 !important;
  transform: scale(.40) rotate(-28deg) !important;
  box-shadow: 0 0 0 rgba(112,183,255,0) !important;
  transition:
    opacity .18s ease .34s,
    transform .34s cubic-bezier(.2,.9,.25,1.25) .34s,
    box-shadow .25s ease .34s !important;
}
@media (hover: hover) and (pointer: fine) {
  .tool-card.tool-qr-code-generator:hover .tool-preview-qr-card {
    transform: translateY(-10px) rotate(2deg) scale(1.08) !important;
    border-color: rgba(169, 216, 255, .95) !important;
    box-shadow:
      inset 0 1px 0 rgba(255,255,255,.20),
      0 22px 39px rgba(46,132,255,.38) !important;
  }
  .tool-card.tool-qr-code-generator:hover .qr-image-frame {
    transform: rotate(0deg) scale(1.08) !important;
    box-shadow: 0 9px 22px rgba(5,16,40,.48) !important;
    filter: brightness(1.05) !important;
  }
  .tool-card.tool-qr-code-generator:hover .qr-image-frame img {
    transform: scale(1.11) !important;
  }
  .tool-card.tool-qr-code-generator:hover .qr-scan-line {
    opacity: 1 !important;
    animation: qr-image-card-scan .82s cubic-bezier(.35,.05,.65,.95) forwards !important;
  }
  .tool-card.tool-qr-code-generator:hover .qr-corner {
    opacity: 1 !important;
    filter: drop-shadow(0 0 5px rgba(139,200,255,.98)) !important;
  }
  .tool-card.tool-qr-code-generator:hover .qr-success {
    opacity: 1 !important;
    transform: scale(1) rotate(0deg) !important;
    box-shadow: 0 0 15px rgba(120,190,255,.88) !important;
  }
}
@keyframes qr-image-card-scan {
  0% { transform: translateY(0) !important; }
  100% { transform: translateY(68px) !important; }
}
@media (max-width: 640px) {
  .tool-card.tool-qr-code-generator .tool-preview-qr-card {
    right: 10px !important;
    bottom: 9px !important;
    transform: scale(.86) !important;
    transform-origin: right bottom !important;
  }
}
@media (prefers-reduced-motion: reduce) {
  .tool-card.tool-qr-code-generator .tool-preview-qr-card,
  .tool-card.tool-qr-code-generator .tool-preview-qr-card * {
    animation: none !important;
    transition: none !important;
  }
  .tool-card.tool-qr-code-generator .qr-success {
    opacity: 1 !important;
    transform: scale(1) !important;
  }
}
/* QR-CODE-CARD-VISUAL-END */
/* IMAGE-RESIZER-FINAL-START */
.tool-card.tool-image-resizer .tool-preview-image-resizer {
  position: absolute !important;
  right: 14px !important;
  bottom: 14px !important;
  z-index: 2 !important;
  display: block !important;
  width: 118px !important;
  height: 82px !important;
  overflow: visible !important;
  pointer-events: none !important;
  opacity: .96 !important;
  transform: none !important;
  transform-origin: right bottom !important;
  transition: transform .24s ease, opacity .24s ease !important;
}
.tool-card.tool-image-resizer .image-resizer-scene {
  position: absolute !important;
  left: 4px !important;
  top: 5px !important;
  display: block !important;
  width: 82px !important;
  height: 64px !important;
  overflow: hidden !important;
  border: 1px solid rgba(239, 232, 255, .50) !important;
  border-radius: 10px !important;
  background: linear-gradient(160deg, #ab8df0 0%, #6d78c8 45%, #33446f 100%) !important;
  box-shadow: 0 9px 19px rgba(0, 0, 0, .32) !important;
  transform: rotate(-4deg) !important;
  transform-origin: center center !important;
  transition:
    width .34s cubic-bezier(.2,.85,.25,1),
    height .34s cubic-bezier(.2,.85,.25,1),
    left .34s cubic-bezier(.2,.85,.25,1),
    top .34s cubic-bezier(.2,.85,.25,1),
    border-radius .26s ease,
    box-shadow .26s ease,
    transform .34s cubic-bezier(.2,.85,.25,1) !important;
}
.tool-card.tool-image-resizer .image-resizer-scene .scene-sun {
  position: absolute !important;
  top: 11px !important;
  right: 12px !important;
  display: block !important;
  width: 12px !important;
  height: 12px !important;
  border-radius: 50% !important;
  background: #ffe38b !important;
  box-shadow: 0 0 10px rgba(255, 226, 139, .82) !important;
}
.tool-card.tool-image-resizer .image-resizer-scene .scene-cloud {
  position: absolute !important;
  display: block !important;
  height: 5px !important;
  border-radius: 999px !important;
  background: rgba(255, 255, 255, .48) !important;
}
.tool-card.tool-image-resizer .image-resizer-scene .scene-cloud-a {
  top: 21px !important;
  left: 10px !important;
  width: 23px !important;
}
.tool-card.tool-image-resizer .image-resizer-scene .scene-cloud-b {
  top: 30px !important;
  left: 29px !important;
  width: 15px !important;
  opacity: .65 !important;
}
.tool-card.tool-image-resizer .image-resizer-scene .scene-mountain {
  position: absolute !important;
  display: block !important;
  bottom: -23px !important;
  width: 62px !important;
  height: 62px !important;
  border-radius: 9px !important;
  transform: rotate(45deg) !important;
}
.tool-card.tool-image-resizer .image-resizer-scene .scene-mountain-back {
  left: 3px !important;
  background: linear-gradient(135deg, #8bE0de, #3a77ac) !important;
  opacity: .94 !important;
}
.tool-card.tool-image-resizer .image-resizer-scene .scene-mountain-front {
  right: -18px !important;
  bottom: -35px !important;
  background: linear-gradient(135deg, #5d94bd, #263f78) !important;
}
.tool-card.tool-image-resizer .image-resizer-scene .scene-haze {
  position: absolute !important;
  right: 0 !important;
  bottom: 0 !important;
  left: 0 !important;
  display: block !important;
  height: 18px !important;
  background: linear-gradient(transparent, rgba(226, 237, 255, .30)) !important;
}
.tool-card.tool-image-resizer .resizer-corner {
  position: absolute !important;
  z-index: 4 !important;
  display: block !important;
  width: 9px !important;
  height: 9px !important;
  border: 2px solid #f6f1ff !important;
  border-radius: 3px !important;
  background: #8b6af3 !important;
  box-shadow: 0 2px 7px rgba(40, 22, 105, .54) !important;
  transition:
    transform .34s cubic-bezier(.2,.85,.25,1),
    background .22s ease,
    box-shadow .22s ease !important;
}
.tool-card.tool-image-resizer .resizer-corner-tl {
  left: 0 !important;
  top: 0 !important;
}
.tool-card.tool-image-resizer .resizer-corner-tr {
  left: 78px !important;
  top: 0 !important;
}
.tool-card.tool-image-resizer .resizer-corner-bl {
  left: 0 !important;
  top: 61px !important;
}
.tool-card.tool-image-resizer .resizer-corner-br {
  left: 78px !important;
  top: 61px !important;
}
@media (hover: hover) and (pointer: fine) {
  .tool-card.tool-image-resizer:hover .tool-preview-image-resizer {
    transform: translateY(-8px) scale(1.02) !important;
  }
  .tool-card.tool-image-resizer:hover .image-resizer-scene {
    left: 20px !important;
    top: 0 !important;
    width: 69px !important;
    height: 69px !important;
    border-radius: 12px !important;
    box-shadow:
      0 18px 28px rgba(0, 0, 0, .42),
      0 0 17px rgba(145, 112, 255, .25) !important;
    transform: rotate(3deg) !important;
  }
  .tool-card.tool-image-resizer:hover .resizer-corner {
    background: #b8a4ff !important;
    box-shadow:
      0 2px 8px rgba(40, 22, 105, .58),
      0 0 10px rgba(190, 166, 255, .52) !important;
  }
  .tool-card.tool-image-resizer:hover .resizer-corner-tr {
    transform: translateX(-25px) !important;
  }
  .tool-card.tool-image-resizer:hover .resizer-corner-bl {
    transform: translateY(8px) !important;
  }
  .tool-card.tool-image-resizer:hover .resizer-corner-br {
    transform: translate(-25px, 8px) !important;
  }
  .tool-card.tool-image-resizer:hover .image-resizer-scene .scene-sun {
    transform: translate(-7px, 3px) scale(1.07) !important;
  }
}
@media (max-width: 640px) {
  .tool-card.tool-image-resizer .tool-preview-image-resizer {
    right: 6px !important;
    bottom: 6px !important;
    transform: scale(.84) !important;
    transform-origin: right bottom !important;
  }
}
@media (prefers-reduced-motion: reduce) {
  .tool-card.tool-image-resizer .tool-preview-image-resizer,
  .tool-card.tool-image-resizer .tool-preview-image-resizer * {
    transition: none !important;
  }
}
/* IMAGE-RESIZER-FINAL-END */
/* IMAGE-CONVERTER-PREVIEW-START */
.tool-card.tool-image-converter .tool-preview-image-converter {
  position: absolute !important;
  right: 14px !important;
  bottom: 14px !important;
  z-index: 2 !important;
  display: block !important;
  width: 140px !important;
  height: 84px !important;
  overflow: visible !important;
  pointer-events: none !important;
  opacity: .96 !important;
  transform: none !important;
  transform-origin: right bottom !important;
  transition: transform .24s ease, opacity .24s ease !important;
}
.tool-card.tool-image-converter .image-convert-scene {
  position: absolute !important;
  display: block !important;
  overflow: hidden !important;
  border: 1px solid rgba(239, 232, 255, .50) !important;
  background: linear-gradient(160deg, #ab8df0 0%, #6d78c8 45%, #33446f 100%) !important;
  box-shadow: 0 9px 19px rgba(0, 0, 0, .32) !important;
  transform-origin: center center !important;
  transition: transform .32s cubic-bezier(.2,.85,.25,1), box-shadow .26s ease !important;
}
.tool-card.tool-image-converter .image-convert-scene-back {
  left: 4px !important;
  top: 6px !important;
  width: 63px !important;
  height: 49px !important;
  border-radius: 9px !important;
  opacity: .88 !important;
  transform: rotate(-8deg) !important;
}
.tool-card.tool-image-converter .image-convert-scene-front {
  right: 3px !important;
  bottom: 4px !important;
  width: 70px !important;
  height: 55px !important;
  border-radius: 10px !important;
  transform: rotate(6deg) !important;
}
.tool-card.tool-image-converter .convert-sun {
  position: absolute !important;
  top: 9px !important;
  right: 10px !important;
  display: block !important;
  width: 10px !important;
  height: 10px !important;
  border-radius: 50% !important;
  background: #ffe38b !important;
  box-shadow: 0 0 9px rgba(255, 226, 139, .82) !important;
}
.tool-card.tool-image-converter .convert-cloud {
  position: absolute !important;
  display: block !important;
  height: 4px !important;
  border-radius: 999px !important;
  background: rgba(255, 255, 255, .48) !important;
}
.tool-card.tool-image-converter .convert-cloud-a {
  top: 18px !important;
  left: 8px !important;
  width: 20px !important;
}
.tool-card.tool-image-converter .convert-cloud-b {
  top: 26px !important;
  left: 23px !important;
  width: 13px !important;
  opacity: .65 !important;
}
.tool-card.tool-image-converter .convert-mountain {
  position: absolute !important;
  display: block !important;
  bottom: -20px !important;
  width: 55px !important;
  height: 55px !important;
  border-radius: 8px !important;
  transform: rotate(45deg) !important;
}
.tool-card.tool-image-converter .convert-mountain-back {
  left: 2px !important;
  background: linear-gradient(135deg, #8be0de, #3a77ac) !important;
  opacity: .94 !important;
}
.tool-card.tool-image-converter .convert-mountain-front {
  right: -16px !important;
  bottom: -31px !important;
  background: linear-gradient(135deg, #5d94bd, #263f78) !important;
}
.tool-card.tool-image-converter .convert-haze {
  position: absolute !important;
  right: 0 !important;
  bottom: 0 !important;
  left: 0 !important;
  display: block !important;
  height: 15px !important;
  background: linear-gradient(transparent, rgba(226, 237, 255, .30)) !important;
}
.tool-card.tool-image-converter .image-convert-switch {
  position: absolute !important;
  left: 56px !important;
  top: 27px !important;
  z-index: 7 !important;
  display: grid !important;
  place-items: center !important;
  width: 29px !important;
  height: 29px !important;
  border: 1px solid rgba(229, 215, 255, .60) !important;
  border-radius: 50% !important;
  color: #fff !important;
  background: linear-gradient(135deg, #9a70f4, #6545ce) !important;
  box-shadow: 0 5px 15px rgba(79, 46, 185, .50) !important;
  font: 800 17px/1 Arial, sans-serif !important;
  transition: transform .34s cubic-bezier(.2,.9,.25,1), box-shadow .26s ease !important;
}
@media (hover: hover) and (pointer: fine) {
  .tool-card.tool-image-converter:hover .tool-preview-image-converter {
    transform: translateY(-8px) scale(1.02) !important;
  }
  .tool-card.tool-image-converter:hover .image-convert-scene-back {
    transform: translate(-7px, -10px) rotate(-13deg) !important;
    box-shadow: 0 18px 28px rgba(0, 0, 0, .42) !important;
  }
  .tool-card.tool-image-converter:hover .image-convert-scene-front {
    transform: translate(7px, -13px) rotate(12deg) scale(1.08) !important;
    box-shadow: 0 19px 31px rgba(0, 0, 0, .45) !important;
  }
  .tool-card.tool-image-converter:hover .image-convert-switch {
    transform: translateY(-10px) rotate(180deg) scale(1.16) !important;
    box-shadow: 0 8px 21px rgba(125, 79, 235, .76) !important;
  }
}
@media (max-width: 640px) {
  .tool-card.tool-image-converter .tool-preview-image-converter {
    right: 6px !important;
    bottom: 6px !important;
    transform: scale(.84) !important;
    transform-origin: right bottom !important;
  }
}
@media (prefers-reduced-motion: reduce) {
  .tool-card.tool-image-converter .tool-preview-image-converter,
  .tool-card.tool-image-converter .tool-preview-image-converter * {
    transition: none !important;
  }
}
/* IMAGE-CONVERTER-PREVIEW-END */
/* IMAGE-OCR-PREVIEW-START */
.tool-card.tool-image-to-text .tool-preview-image-ocr {
  position: absolute !important;
  right: 14px !important;
  bottom: 14px !important;
  z-index: 2 !important;
  display: block !important;
  width: 140px !important;
  height: 86px !important;
  overflow: visible !important;
  pointer-events: none !important;
  opacity: .96 !important;
  transform-origin: right bottom !important;
  transition: transform .24s ease, opacity .24s ease !important;
}
.tool-card.tool-image-to-text .ocr-image-scene {
  position: absolute !important;
  left: 2px !important;
  bottom: 3px !important;
  display: block !important;
  width: 72px !important;
  height: 57px !important;
  overflow: hidden !important;
  border: 1px solid rgba(239, 232, 255, .50) !important;
  border-radius: 10px !important;
  background: linear-gradient(160deg, #ab8df0 0%, #6d78c8 45%, #33446f 100%) !important;
  box-shadow: 0 9px 19px rgba(0, 0, 0, .32) !important;
  transform: rotate(-7deg) !important;
  transition: transform .32s cubic-bezier(.2,.85,.25,1), box-shadow .26s ease !important;
}
.tool-card.tool-image-to-text .ocr-sun {
  position: absolute !important;
  top: 10px !important;
  right: 10px !important;
  display: block !important;
  width: 10px !important;
  height: 10px !important;
  border-radius: 50% !important;
  background: #ffe38b !important;
  box-shadow: 0 0 9px rgba(255, 226, 139, .82) !important;
}
.tool-card.tool-image-to-text .ocr-cloud {
  position: absolute !important;
  display: block !important;
  height: 4px !important;
  border-radius: 999px !important;
  background: rgba(255, 255, 255, .48) !important;
}
.tool-card.tool-image-to-text .ocr-cloud-a {
  top: 18px !important;
  left: 8px !important;
  width: 20px !important;
}
.tool-card.tool-image-to-text .ocr-cloud-b {
  top: 26px !important;
  left: 23px !important;
  width: 13px !important;
  opacity: .65 !important;
}
.tool-card.tool-image-to-text .ocr-mountain {
  position: absolute !important;
  display: block !important;
  bottom: -20px !important;
  width: 55px !important;
  height: 55px !important;
  border-radius: 8px !important;
  transform: rotate(45deg) !important;
}
.tool-card.tool-image-to-text .ocr-mountain-back {
  left: 2px !important;
  background: linear-gradient(135deg, #8be0de, #3a77ac) !important;
  opacity: .94 !important;
}
.tool-card.tool-image-to-text .ocr-mountain-front {
  right: -16px !important;
  bottom: -31px !important;
  background: linear-gradient(135deg, #5d94bd, #263f78) !important;
}
.tool-card.tool-image-to-text .ocr-haze {
  position: absolute !important;
  right: 0 !important;
  bottom: 0 !important;
  left: 0 !important;
  display: block !important;
  height: 15px !important;
  background: linear-gradient(transparent, rgba(226, 237, 255, .30)) !important;
}
.tool-card.tool-image-to-text .ocr-document {
  position: absolute !important;
  right: 9px !important;
  top: 1px !important;
  z-index: 4 !important;
  display: block !important;
  width: 64px !important;
  height: 76px !important;
  overflow: hidden !important;
  border: 1px solid rgba(246, 241, 255, .72) !important;
  border-radius: 9px !important;
  background:
    linear-gradient(145deg, rgba(254, 252, 255, .96), rgba(211, 224, 255, .84)) !important;
  box-shadow: 0 11px 21px rgba(10, 18, 68, .34) !important;
  transform: rotate(6deg) !important;
  transition: transform .32s cubic-bezier(.2,.85,.25,1), box-shadow .26s ease !important;
}
.tool-card.tool-image-to-text .ocr-doc-header {
  position: absolute !important;
  left: 11px !important;
  top: 12px !important;
  display: block !important;
  width: 29px !important;
  height: 5px !important;
  border-radius: 99px !important;
  background: #6d59cf !important;
}
.tool-card.tool-image-to-text .ocr-text-line {
  position: absolute !important;
  left: 11px !important;
  display: block !important;
  height: 3px !important;
  border-radius: 99px !important;
  background: rgba(69, 86, 149, .50) !important;
}
.tool-card.tool-image-to-text .ocr-text-line-a { top: 26px !important; width: 39px !important; }
.tool-card.tool-image-to-text .ocr-text-line-b { top: 34px !important; width: 32px !important; }
.tool-card.tool-image-to-text .ocr-text-line-c { top: 42px !important; width: 37px !important; }
.tool-card.tool-image-to-text .ocr-text-line-d { top: 50px !important; width: 25px !important; }
.tool-card.tool-image-to-text .ocr-scan-line {
  position: absolute !important;
  left: 7px !important;
  right: 7px !important;
  top: 21px !important;
  display: block !important;
  height: 2px !important;
  border-radius: 99px !important;
  opacity: 0 !important;
  background: #8eebff !important;
  box-shadow: 0 0 8px rgba(85, 222, 255, .88) !important;
}
.tool-card.tool-image-to-text .ocr-lens {
  position: absolute !important;
  right: 0 !important;
  bottom: 0 !important;
  z-index: 7 !important;
  display: block !important;
  width: 27px !important;
  height: 27px !important;
  box-sizing: border-box !important;
  border: 4px solid #9d7af2 !important;
  border-radius: 50% !important;
  background: rgba(197, 240, 255, .22) !important;
  box-shadow:
    0 4px 12px rgba(58, 33, 146, .44),
    inset 0 0 8px rgba(198, 244, 255, .58) !important;
  transform: rotate(-18deg) !important;
  transition: transform .32s cubic-bezier(.2,.9,.25,1), box-shadow .26s ease !important;
}
.tool-card.tool-image-to-text .ocr-lens-handle {
  position: absolute !important;
  right: -10px !important;
  bottom: -8px !important;
  display: block !important;
  width: 13px !important;
  height: 7px !important;
  border-radius: 99px !important;
  background: linear-gradient(90deg, #7152cf, #b69cff) !important;
  transform: rotate(42deg) !important;
  transform-origin: left center !important;
  box-shadow: 0 3px 6px rgba(48, 26, 116, .36) !important;
}
@media (hover: hover) and (pointer: fine) {
  .tool-card.tool-image-to-text:hover .tool-preview-image-ocr {
    transform: translateY(-8px) scale(1.02) !important;
  }
  .tool-card.tool-image-to-text:hover .ocr-image-scene {
    transform: translate(-7px, -10px) rotate(-12deg) !important;
    box-shadow: 0 18px 28px rgba(0, 0, 0, .42) !important;
  }
  .tool-card.tool-image-to-text:hover .ocr-document {
    transform: translate(4px, -12px) rotate(10deg) scale(1.06) !important;
    box-shadow: 0 19px 31px rgba(0, 0, 0, .45) !important;
  }
  .tool-card.tool-image-to-text:hover .ocr-lens {
    transform: translate(-8px, -14px) rotate(-18deg) scale(1.11) !important;
    box-shadow:
      0 7px 17px rgba(94, 58, 208, .62),
      inset 0 0 10px rgba(198, 244, 255, .72) !important;
  }
  .tool-card.tool-image-to-text:hover .ocr-scan-line {
    animation: ocr-card-scan .82s ease-in-out both !important;
  }
}
@keyframes ocr-card-scan {
  0% {
    opacity: 0;
    transform: translateY(0);
  }
  15% {
    opacity: 1;
  }
  82% {
    opacity: 1;
  }
  100% {
    opacity: 0;
    transform: translateY(38px);
  }
}
@media (max-width: 640px) {
  .tool-card.tool-image-to-text .tool-preview-image-ocr {
    right: 6px !important;
    bottom: 6px !important;
    transform: scale(.84) !important;
    transform-origin: right bottom !important;
  }
}
@media (prefers-reduced-motion: reduce) {
  .tool-card.tool-image-to-text .tool-preview-image-ocr,
  .tool-card.tool-image-to-text .tool-preview-image-ocr * {
    animation: none !important;
    transition: none !important;
  }
}
/* IMAGE-OCR-PREVIEW-END */
/* IMAGE-WATERMARK-PREVIEW-START */
.tool-card.tool-image-watermark .tool-preview-image-watermark {
  position: absolute !important;
  right: 14px !important;
  bottom: 14px !important;
  z-index: 2 !important;
  display: block !important;
  width: 132px !important;
  height: 84px !important;
  overflow: visible !important;
  pointer-events: none !important;
  opacity: .96 !important;
  transform-origin: right bottom !important;
  transition: transform .24s ease, opacity .24s ease !important;
}
.tool-card.tool-image-watermark .watermark-image-scene {
  position: absolute !important;
  left: 6px !important;
  top: 7px !important;
  display: block !important;
  width: 92px !important;
  height: 64px !important;
  overflow: hidden !important;
  border: 1px solid rgba(239, 232, 255, .50) !important;
  border-radius: 11px !important;
  background: linear-gradient(160deg, #ab8df0 0%, #6d78c8 45%, #33446f 100%) !important;
  box-shadow: 0 9px 19px rgba(0, 0, 0, .32) !important;
  transform: rotate(-5deg) !important;
  transition: transform .32s cubic-bezier(.2,.85,.25,1), box-shadow .26s ease !important;
}
.tool-card.tool-image-watermark .watermark-sun {
  position: absolute !important;
  top: 10px !important;
  right: 11px !important;
  display: block !important;
  width: 11px !important;
  height: 11px !important;
  border-radius: 50% !important;
  background: #ffe38b !important;
  box-shadow: 0 0 9px rgba(255, 226, 139, .82) !important;
}
.tool-card.tool-image-watermark .watermark-cloud {
  position: absolute !important;
  display: block !important;
  height: 4px !important;
  border-radius: 999px !important;
  background: rgba(255, 255, 255, .48) !important;
}
.tool-card.tool-image-watermark .watermark-cloud-a {
  top: 18px !important;
  left: 9px !important;
  width: 21px !important;
}
.tool-card.tool-image-watermark .watermark-cloud-b {
  top: 27px !important;
  left: 26px !important;
  width: 14px !important;
  opacity: .65 !important;
}
.tool-card.tool-image-watermark .watermark-mountain {
  position: absolute !important;
  display: block !important;
  bottom: -21px !important;
  width: 58px !important;
  height: 58px !important;
  border-radius: 8px !important;
  transform: rotate(45deg) !important;
}
.tool-card.tool-image-watermark .watermark-mountain-back {
  left: 3px !important;
  background: linear-gradient(135deg, #8be0de, #3a77ac) !important;
  opacity: .94 !important;
}
.tool-card.tool-image-watermark .watermark-mountain-front {
  right: -17px !important;
  bottom: -33px !important;
  background: linear-gradient(135deg, #5d94bd, #263f78) !important;
}
.tool-card.tool-image-watermark .watermark-haze {
  position: absolute !important;
  right: 0 !important;
  bottom: 0 !important;
  left: 0 !important;
  display: block !important;
  height: 17px !important;
  background: linear-gradient(transparent, rgba(226, 237, 255, .30)) !important;
}
.tool-card.tool-image-watermark .watermark-stamp {
  position: absolute !important;
  right: 4px !important;
  bottom: 2px !important;
  z-index: 6 !important;
  display: grid !important;
  place-items: center !important;
  width: 42px !important;
  height: 42px !important;
  border: 1px solid rgba(245, 237, 255, .80) !important;
  border-radius: 50% !important;
  color: #fff !important;
  background:
    radial-gradient(circle at 32% 25%, rgba(255,255,255,.44), transparent 30%),
    linear-gradient(135deg, rgba(191, 141, 255, .95), rgba(96, 65, 203, .95)) !important;
  box-shadow:
    0 7px 18px rgba(62, 32, 160, .48),
    inset 0 1px 0 rgba(255,255,255,.46) !important;
  transform: rotate(10deg) !important;
  transition: transform .34s cubic-bezier(.2,.9,.25,1), box-shadow .26s ease !important;
}
.tool-card.tool-image-watermark .watermark-letter {
  position: relative !important;
  top: -3px !important;
  display: block !important;
  font: 900 20px/1 Georgia, serif !important;
  text-shadow: 0 2px 4px rgba(49, 25, 131, .48) !important;
}
.tool-card.tool-image-watermark .watermark-signature {
  position: absolute !important;
  left: 12px !important;
  bottom: 10px !important;
  display: block !important;
  width: 19px !important;
  height: 5px !important;
  border-bottom: 2px solid rgba(255,255,255,.86) !important;
  border-radius: 50% !important;
  transform: rotate(-8deg) !important;
}
@media (hover: hover) and (pointer: fine) {
  .tool-card.tool-image-watermark:hover .tool-preview-image-watermark {
    transform: translateY(-8px) scale(1.02) !important;
  }
  .tool-card.tool-image-watermark:hover .watermark-image-scene {
    transform: translate(-6px, -10px) rotate(-10deg) !important;
    box-shadow: 0 18px 28px rgba(0, 0, 0, .42) !important;
  }
  .tool-card.tool-image-watermark:hover .watermark-stamp {
    transform: translate(-6px, -12px) rotate(0deg) scale(1.12) !important;
    box-shadow:
      0 10px 24px rgba(108, 67, 230, .72),
      0 0 16px rgba(201, 163, 255, .42),
      inset 0 1px 0 rgba(255,255,255,.58) !important;
  }
}
@media (max-width: 640px) {
  .tool-card.tool-image-watermark .tool-preview-image-watermark {
    right: 6px !important;
    bottom: 6px !important;
    transform: scale(.84) !important;
    transform-origin: right bottom !important;
  }
}
@media (prefers-reduced-motion: reduce) {
  .tool-card.tool-image-watermark .tool-preview-image-watermark,
  .tool-card.tool-image-watermark .tool-preview-image-watermark * {
    transition: none !important;
  }
}
/* IMAGE-WATERMARK-PREVIEW-END */
/* IMAGE-TO-PDF-PREVIEW-START */
.tool-card.tool-image-to-pdf .tool-preview-image-to-pdf {
  position: absolute !important;
  right: 13px !important;
  bottom: 13px !important;
  z-index: 2 !important;
  display: block !important;
  width: 142px !important;
  height: 88px !important;
  overflow: visible !important;
  pointer-events: none !important;
  opacity: .97 !important;
  transform-origin: right bottom !important;
  transition: transform .24s ease, opacity .24s ease !important;
}
.tool-card.tool-image-to-pdf .image-to-pdf-photo {
  position: absolute !important;
  display: block !important;
  overflow: hidden !important;
  border: 1px solid rgba(239, 232, 255, .52) !important;
  background: linear-gradient(160deg, #ab8df0 0%, #6d78c8 45%, #33446f 100%) !important;
  box-shadow: 0 8px 17px rgba(0, 0, 0, .30) !important;
  transform-origin: center center !important;
  transition: transform .32s cubic-bezier(.2,.85,.25,1), opacity .24s ease !important;
}
.tool-card.tool-image-to-pdf .image-to-pdf-photo-back {
  left: 1px !important;
  top: 14px !important;
  width: 49px !important;
  height: 39px !important;
  border-radius: 7px !important;
  opacity: .84 !important;
  transform: rotate(-10deg) !important;
}
.tool-card.tool-image-to-pdf .image-to-pdf-photo-front {
  left: 23px !important;
  top: 27px !important;
  width: 54px !important;
  height: 43px !important;
  border-radius: 8px !important;
  transform: rotate(5deg) !important;
}
.tool-card.tool-image-to-pdf .pdf-photo-sun {
  position: absolute !important;
  top: 6px !important;
  right: 7px !important;
  display: block !important;
  width: 7px !important;
  height: 7px !important;
  border-radius: 50% !important;
  background: #ffe38b !important;
  box-shadow: 0 0 7px rgba(255, 226, 139, .82) !important;
}
.tool-card.tool-image-to-pdf .pdf-photo-cloud {
  position: absolute !important;
  top: 13px !important;
  left: 6px !important;
  display: block !important;
  width: 15px !important;
  height: 3px !important;
  border-radius: 99px !important;
  background: rgba(255, 255, 255, .48) !important;
}
.tool-card.tool-image-to-pdf .pdf-photo-mountain {
  position: absolute !important;
  display: block !important;
  bottom: -17px !important;
  width: 43px !important;
  height: 43px !important;
  border-radius: 6px !important;
  transform: rotate(45deg) !important;
}
.tool-card.tool-image-to-pdf .pdf-photo-mountain-a {
  left: 1px !important;
  background: linear-gradient(135deg, #8be0de, #3a77ac) !important;
}
.tool-card.tool-image-to-pdf .pdf-photo-mountain-b {
  right: -13px !important;
  bottom: -24px !important;
  background: linear-gradient(135deg, #5d94bd, #263f78) !important;
}
.tool-card.tool-image-to-pdf .image-to-pdf-arrow {
  position: absolute !important;
  left: 69px !important;
  top: 37px !important;
  z-index: 8 !important;
  display: grid !important;
  place-items: center !important;
  width: 23px !important;
  height: 23px !important;
  border: 1px solid rgba(255, 220, 220, .55) !important;
  border-radius: 50% !important;
  color: #fff !important;
  background: linear-gradient(135deg, #ff7668, #c82e42) !important;
  box-shadow: 0 5px 13px rgba(157, 28, 44, .45) !important;
  font: 900 15px/1 Arial, sans-serif !important;
  transition: transform .32s cubic-bezier(.2,.9,.25,1), box-shadow .24s ease !important;
}
.tool-card.tool-image-to-pdf .image-to-pdf-file {
  position: absolute !important;
  right: 2px !important;
  top: 3px !important;
  z-index: 6 !important;
  display: block !important;
  width: 55px !important;
  height: 72px !important;
  overflow: hidden !important;
  border: 1px solid rgba(255, 225, 225, .76) !important;
  border-radius: 9px !important;
  background: linear-gradient(145deg, #ff7568 0%, #e6424d 52%, #b91f39 100%) !important;
  box-shadow:
    0 10px 20px rgba(117, 18, 41, .48),
    inset 0 1px 0 rgba(255,255,255,.32) !important;
  transform: rotate(6deg) !important;
  transition: transform .34s cubic-bezier(.2,.85,.25,1), box-shadow .26s ease !important;
}
.tool-card.tool-image-to-pdf .pdf-file-fold {
  position: absolute !important;
  right: 0 !important;
  top: 0 !important;
  display: block !important;
  width: 18px !important;
  height: 18px !important;
  background: linear-gradient(135deg, rgba(255,255,255,.52) 0 49%, rgba(255,255,255,.08) 50% 100%) !important;
  clip-path: polygon(0 0, 100% 100%, 0 100%) !important;
}
.tool-card.tool-image-to-pdf .pdf-file-label {
  position: absolute !important;
  left: 8px !important;
  top: 27px !important;
  color: #fff !important;
  font: 900 15px/1 Arial, sans-serif !important;
  letter-spacing: .4px !important;
  text-shadow: 0 2px 3px rgba(100, 12, 31, .32) !important;
}
.tool-card.tool-image-to-pdf .pdf-file-line {
  position: absolute !important;
  left: 9px !important;
  display: block !important;
  height: 3px !important;
  border-radius: 99px !important;
  background: rgba(255,255,255,.58) !important;
}
.tool-card.tool-image-to-pdf .pdf-file-line-a {
  top: 48px !important;
  width: 27px !important;
}
.tool-card.tool-image-to-pdf .pdf-file-line-b {
  top: 55px !important;
  width: 20px !important;
  opacity: .78 !important;
}
@media (hover: hover) and (pointer: fine) {
  .tool-card.tool-image-to-pdf:hover .tool-preview-image-to-pdf {
    transform: translateY(-8px) scale(1.02) !important;
  }
  .tool-card.tool-image-to-pdf:hover .image-to-pdf-photo-back {
    transform: translate(-7px, -10px) rotate(-15deg) !important;
    opacity: 1 !important;
  }
  .tool-card.tool-image-to-pdf:hover .image-to-pdf-photo-front {
    transform: translate(-7px, -13px) rotate(9deg) scale(1.06) !important;
  }
  .tool-card.tool-image-to-pdf:hover .image-to-pdf-arrow {
    transform: translateY(-10px) scale(1.15) !important;
    box-shadow: 0 8px 19px rgba(226, 55, 70, .72) !important;
  }
  .tool-card.tool-image-to-pdf:hover .image-to-pdf-file {
    transform: translate(4px, -13px) rotate(10deg) scale(1.08) !important;
    box-shadow:
      0 18px 30px rgba(154, 22, 47, .65),
      0 0 17px rgba(255, 92, 100, .30),
      inset 0 1px 0 rgba(255,255,255,.40) !important;
  }
}
@media (max-width: 640px) {
  .tool-card.tool-image-to-pdf .tool-preview-image-to-pdf {
    right: 6px !important;
    bottom: 6px !important;
    transform: scale(.84) !important;
    transform-origin: right bottom !important;
  }
}
@media (prefers-reduced-motion: reduce) {
  .tool-card.tool-image-to-pdf .tool-preview-image-to-pdf,
  .tool-card.tool-image-to-pdf .tool-preview-image-to-pdf * {
    transition: none !important;
  }
}
/* IMAGE-TO-PDF-PREVIEW-END */
/* LOAN-CALCULATOR-PREVIEW-START */
.tool-card.tool-loan-calculator .tool-preview-loan-calculator {
  position: absolute !important;
  right: 14px !important;
  bottom: 13px !important;
  z-index: 2 !important;
  display: block !important;
  width: 132px !important;
  height: 88px !important;
  overflow: visible !important;
  pointer-events: none !important;
  opacity: .98 !important;
  transform-origin: right bottom !important;
  transition: transform .24s ease, opacity .24s ease !important;
}
.tool-card.tool-loan-calculator .loan-house {
  position: absolute !important;
  left: 2px !important;
  bottom: 8px !important;
  z-index: 2 !important;
  display: block !important;
  width: 67px !important;
  height: 59px !important;
  filter: drop-shadow(0 8px 11px rgba(8, 49, 49, .34)) !important;
  transform: rotate(-5deg) !important;
  transform-origin: bottom center !important;
  transition: transform .34s cubic-bezier(.2,.85,.25,1), filter .26s ease !important;
}
.tool-card.tool-loan-calculator .loan-house-roof {
  position: absolute !important;
  left: 3px !important;
  top: 0 !important;
  display: block !important;
  width: 61px !important;
  height: 38px !important;
  border-radius: 7px !important;
  background: linear-gradient(135deg, #f0bd74 0%, #bb6e45 100%) !important;
  clip-path: polygon(50% 0, 100% 78%, 86% 78%, 86% 100%, 14% 100%, 14% 78%, 0 78%) !important;
  box-shadow: inset 0 1px 0 rgba(255,255,255,.30) !important;
}
.tool-card.tool-loan-calculator .loan-house-body {
  position: absolute !important;
  left: 13px !important;
  bottom: 0 !important;
  display: block !important;
  width: 43px !important;
  height: 33px !important;
  border-radius: 4px 4px 7px 7px !important;
  background: linear-gradient(145deg, #d5f0e7 0%, #83bfb6 100%) !important;
  box-shadow: inset 0 1px 0 rgba(255,255,255,.45) !important;
}
.tool-card.tool-loan-calculator .loan-house-window {
  position: absolute !important;
  top: 8px !important;
  display: block !important;
  width: 8px !important;
  height: 8px !important;
  border: 2px solid rgba(223, 255, 252, .82) !important;
  border-radius: 2px !important;
  background: #4fb2bc !important;
  box-shadow: inset 0 0 4px rgba(230,255,255,.52) !important;
}
.tool-card.tool-loan-calculator .loan-house-window-a { left: 7px !important; }
.tool-card.tool-loan-calculator .loan-house-window-b { right: 7px !important; }
.tool-card.tool-loan-calculator .loan-house-door {
  position: absolute !important;
  left: 17px !important;
  bottom: 0 !important;
  display: block !important;
  width: 9px !important;
  height: 16px !important;
  border-radius: 3px 3px 0 0 !important;
  background: #557470 !important;
}
.tool-card.tool-loan-calculator .loan-calculator-device {
  position: absolute !important;
  right: 1px !important;
  bottom: 1px !important;
  z-index: 5 !important;
  display: block !important;
  width: 67px !important;
  height: 80px !important;
  box-sizing: border-box !important;
  padding: 8px 8px 7px !important;
  border: 1px solid rgba(221, 255, 247, .55) !important;
  border-radius: 12px !important;
  background:
    linear-gradient(145deg, rgba(104, 205, 190, .95), rgba(30, 100, 108, .98)) !important;
  box-shadow:
    0 12px 23px rgba(8, 53, 57, .48),
    inset 0 1px 0 rgba(255,255,255,.37) !important;
  transform: rotate(7deg) !important;
  transform-origin: bottom center !important;
  transition: transform .34s cubic-bezier(.2,.85,.25,1), box-shadow .26s ease !important;
}
.tool-card.tool-loan-calculator .loan-calculator-screen {
  display: grid !important;
  place-items: center !important;
  width: 100% !important;
  height: 24px !important;
  border: 1px solid rgba(205, 255, 245, .62) !important;
  border-radius: 5px !important;
  color: #d8fff2 !important;
  background: linear-gradient(145deg, #164f58, #0c343d) !important;
  box-shadow: inset 0 1px 4px rgba(0,0,0,.44) !important;
  font: 900 17px/1 Arial, sans-serif !important;
  text-shadow: 0 0 7px rgba(124, 255, 215, .62) !important;
  transition: color .26s ease, box-shadow .26s ease !important;
}
.tool-card.tool-loan-calculator .loan-calculator-keys {
  display: grid !important;
  grid-template-columns: repeat(3, 1fr) !important;
  gap: 4px !important;
  margin-top: 7px !important;
}
.tool-card.tool-loan-calculator .loan-calculator-keys i {
  display: block !important;
  height: 10px !important;
  border: 1px solid rgba(224, 255, 250, .44) !important;
  border-radius: 3px !important;
  background: linear-gradient(145deg, #87d9cf, #4aa99f) !important;
  box-shadow: inset 0 1px 0 rgba(255,255,255,.36) !important;
}
.tool-card.tool-loan-calculator .loan-calculator-keys .loan-key-ac {
  background: linear-gradient(145deg, #ffd38e, #d88a5d) !important;
}
@media (hover: hover) and (pointer: fine) {
  .tool-card.tool-loan-calculator:hover .tool-preview-loan-calculator {
    transform: translateY(-8px) scale(1.02) !important;
  }
  .tool-card.tool-loan-calculator:hover .loan-house {
    transform: translate(-7px, -9px) rotate(-9deg) !important;
    filter: drop-shadow(0 15px 18px rgba(11, 69, 63, .47)) !important;
  }
  .tool-card.tool-loan-calculator:hover .loan-calculator-device {
    transform: translate(4px, -13px) rotate(11deg) scale(1.08) !important;
    box-shadow:
      0 19px 31px rgba(9, 79, 82, .62),
      0 0 17px rgba(101, 237, 204, .23),
      inset 0 1px 0 rgba(255,255,255,.45) !important;
  }
  .tool-card.tool-loan-calculator:hover .loan-calculator-screen {
    color: #f0fff9 !important;
    box-shadow:
      inset 0 1px 4px rgba(0,0,0,.44),
      0 0 13px rgba(119, 255, 214, .36) !important;
  }
}
@media (max-width: 640px) {
  .tool-card.tool-loan-calculator .tool-preview-loan-calculator {
    right: 6px !important;
    bottom: 6px !important;
    transform: scale(.84) !important;
    transform-origin: right bottom !important;
  }
}
@media (prefers-reduced-motion: reduce) {
  .tool-card.tool-loan-calculator .tool-preview-loan-calculator,
  .tool-card.tool-loan-calculator .tool-preview-loan-calculator * {
    transition: none !important;
  }
}
/* LOAN-CALCULATOR-PREVIEW-END */
/* PNG-CONVERTER-PREVIEW-START */
.tool-card.tool-png-converter .tool-preview-png-converter {
  position: absolute !important;
  right: 13px !important;
  bottom: 13px !important;
  z-index: 2 !important;
  display: block !important;
  width: 142px !important;
  height: 88px !important;
  overflow: visible !important;
  pointer-events: none !important;
  opacity: .97 !important;
  transform-origin: right bottom !important;
  transition: transform .24s ease, opacity .24s ease !important;
}
.tool-card.tool-png-converter .png-source-image {
  position: absolute !important;
  left: 4px !important;
  bottom: 8px !important;
  display: block !important;
  width: 62px !important;
  height: 49px !important;
  overflow: hidden !important;
  border: 1px solid rgba(239, 232, 255, .52) !important;
  border-radius: 8px !important;
  background: linear-gradient(160deg, #ab8df0 0%, #6d78c8 45%, #33446f 100%) !important;
  box-shadow: 0 8px 17px rgba(0, 0, 0, .30) !important;
  transform: rotate(-8deg) !important;
  transition: transform .32s cubic-bezier(.2,.85,.25,1), box-shadow .26s ease !important;
}
.tool-card.tool-png-converter .png-source-sun {
  position: absolute !important;
  top: 8px !important;
  right: 9px !important;
  display: block !important;
  width: 9px !important;
  height: 9px !important;
  border-radius: 50% !important;
  background: #ffe38b !important;
  box-shadow: 0 0 8px rgba(255, 226, 139, .82) !important;
}
.tool-card.tool-png-converter .png-source-cloud {
  position: absolute !important;
  top: 16px !important;
  left: 7px !important;
  display: block !important;
  width: 18px !important;
  height: 4px !important;
  border-radius: 99px !important;
  background: rgba(255,255,255,.48) !important;
}
.tool-card.tool-png-converter .png-source-mountain {
  position: absolute !important;
  display: block !important;
  bottom: -19px !important;
  width: 51px !important;
  height: 51px !important;
  border-radius: 7px !important;
  transform: rotate(45deg) !important;
}
.tool-card.tool-png-converter .png-source-mountain-back {
  left: 2px !important;
  background: linear-gradient(135deg, #8be0de, #3a77ac) !important;
}
.tool-card.tool-png-converter .png-source-mountain-front {
  right: -15px !important;
  bottom: -29px !important;
  background: linear-gradient(135deg, #5d94bd, #263f78) !important;
}
.tool-card.tool-png-converter .png-source-haze {
  position: absolute !important;
  right: 0 !important;
  bottom: 0 !important;
  left: 0 !important;
  display: block !important;
  height: 14px !important;
  background: linear-gradient(transparent, rgba(226,237,255,.30)) !important;
}
.tool-card.tool-png-converter .png-convert-arrow {
  position: absolute !important;
  left: 61px !important;
  top: 36px !important;
  z-index: 8 !important;
  display: grid !important;
  place-items: center !important;
  width: 23px !important;
  height: 23px !important;
  border: 1px solid rgba(229,215,255,.60) !important;
  border-radius: 50% !important;
  color: #fff !important;
  background: linear-gradient(135deg, #9a70f4, #6545ce) !important;
  box-shadow: 0 5px 13px rgba(79,46,185,.50) !important;
  font: 900 15px/1 Arial, sans-serif !important;
  transition: transform .32s cubic-bezier(.2,.9,.25,1), box-shadow .24s ease !important;
}
.tool-card.tool-png-converter .png-file {
  position: absolute !important;
  right: 3px !important;
  top: 3px !important;
  z-index: 6 !important;
  display: block !important;
  width: 57px !important;
  height: 73px !important;
  overflow: hidden !important;
  border: 1px solid rgba(220,248,255,.78) !important;
  border-radius: 9px !important;
  background: linear-gradient(145deg, #6ed6ff 0%, #3b9edc 55%, #2865b3 100%) !important;
  box-shadow:
    0 10px 20px rgba(24, 69, 150, .48),
    inset 0 1px 0 rgba(255,255,255,.38) !important;
  transform: rotate(6deg) !important;
  transition: transform .34s cubic-bezier(.2,.85,.25,1), box-shadow .26s ease !important;
}
.tool-card.tool-png-converter .png-file-fold {
  position: absolute !important;
  right: 0 !important;
  top: 0 !important;
  display: block !important;
  width: 18px !important;
  height: 18px !important;
  background: linear-gradient(135deg, rgba(255,255,255,.58) 0 49%, rgba(255,255,255,.09) 50% 100%) !important;
  clip-path: polygon(0 0, 100% 100%, 0 100%) !important;
}
.tool-card.tool-png-converter .png-checker {
  position: absolute !important;
  left: 8px !important;
  top: 24px !important;
  display: block !important;
  width: 40px !important;
  height: 25px !important;
  border: 1px solid rgba(227,250,255,.55) !important;
  border-radius: 3px !important;
  background-color: rgba(255,255,255,.38) !important;
  background-image:
    linear-gradient(45deg, rgba(37,117,181,.30) 25%, transparent 25%),
    linear-gradient(-45deg, rgba(37,117,181,.30) 25%, transparent 25%),
    linear-gradient(45deg, transparent 75%, rgba(37,117,181,.30) 75%),
    linear-gradient(-45deg, transparent 75%, rgba(37,117,181,.30) 75%) !important;
  background-position: 0 0, 0 4px, 4px -4px, -4px 0 !important;
  background-size: 8px 8px !important;
  box-shadow: inset 0 1px 2px rgba(255,255,255,.25) !important;
  transition: filter .26s ease, opacity .26s ease !important;
}
.tool-card.tool-png-converter .png-file-label {
  position: absolute !important;
  left: 10px !important;
  bottom: 9px !important;
  z-index: 2 !important;
  color: #fff !important;
  font: 900 12px/1 Arial, sans-serif !important;
  letter-spacing: .55px !important;
  text-shadow: 0 2px 3px rgba(16, 67, 131, .40) !important;
}
@media (hover: hover) and (pointer: fine) {
  .tool-card.tool-png-converter:hover .tool-preview-png-converter {
    transform: translateY(-8px) scale(1.02) !important;
  }
  .tool-card.tool-png-converter:hover .png-source-image {
    transform: translate(-7px, -10px) rotate(-13deg) !important;
    box-shadow: 0 18px 28px rgba(0,0,0,.42) !important;
  }
  .tool-card.tool-png-converter:hover .png-convert-arrow {
    transform: translateY(-10px) scale(1.16) !important;
    box-shadow: 0 8px 19px rgba(125,79,235,.72) !important;
  }
  .tool-card.tool-png-converter:hover .png-file {
    transform: translate(4px, -13px) rotate(10deg) scale(1.08) !important;
    box-shadow:
      0 18px 30px rgba(36, 104, 193, .64),
      0 0 17px rgba(105, 220, 255, .33),
      inset 0 1px 0 rgba(255,255,255,.46) !important;
  }
  .tool-card.tool-png-converter:hover .png-checker {
    filter: brightness(1.24) saturate(1.14) !important;
  }
}
@media (max-width: 640px) {
  .tool-card.tool-png-converter .tool-preview-png-converter {
    right: 6px !important;
    bottom: 6px !important;
    transform: scale(.84) !important;
    transform-origin: right bottom !important;
  }
}
@media (prefers-reduced-motion: reduce) {
  .tool-card.tool-png-converter .tool-preview-png-converter,
  .tool-card.tool-png-converter .tool-preview-png-converter * {
    transition: none !important;
  }
}
/* PNG-CONVERTER-PREVIEW-END */
/* WEBP-CONVERTER-PREVIEW-START */
.tool-card.tool-webp-converter .tool-preview-webp-converter {
  position: absolute !important;
  right: 13px !important;
  bottom: 13px !important;
  z-index: 2 !important;
  display: block !important;
  width: 142px !important;
  height: 88px !important;
  overflow: visible !important;
  pointer-events: none !important;
  opacity: .97 !important;
  transform-origin: right bottom !important;
  transition: transform .24s ease, opacity .24s ease !important;
}
.tool-card.tool-webp-converter .webp-source-image {
  position: absolute !important;
  left: 4px !important;
  bottom: 8px !important;
  display: block !important;
  width: 62px !important;
  height: 49px !important;
  overflow: hidden !important;
  border: 1px solid rgba(239, 232, 255, .52) !important;
  border-radius: 8px !important;
  background: linear-gradient(160deg, #ab8df0 0%, #6d78c8 45%, #33446f 100%) !important;
  box-shadow: 0 8px 17px rgba(0, 0, 0, .30) !important;
  transform: rotate(-8deg) !important;
  transition: transform .32s cubic-bezier(.2,.85,.25,1), box-shadow .26s ease !important;
}
.tool-card.tool-webp-converter .webp-source-sun {
  position: absolute !important;
  top: 8px !important;
  right: 9px !important;
  display: block !important;
  width: 9px !important;
  height: 9px !important;
  border-radius: 50% !important;
  background: #ffe38b !important;
  box-shadow: 0 0 8px rgba(255, 226, 139, .82) !important;
}
.tool-card.tool-webp-converter .webp-source-cloud {
  position: absolute !important;
  top: 16px !important;
  left: 7px !important;
  display: block !important;
  width: 18px !important;
  height: 4px !important;
  border-radius: 99px !important;
  background: rgba(255,255,255,.48) !important;
}
.tool-card.tool-webp-converter .webp-source-mountain {
  position: absolute !important;
  display: block !important;
  bottom: -19px !important;
  width: 51px !important;
  height: 51px !important;
  border-radius: 7px !important;
  transform: rotate(45deg) !important;
}
.tool-card.tool-webp-converter .webp-source-mountain-back {
  left: 2px !important;
  background: linear-gradient(135deg, #8be0de, #3a77ac) !important;
}
.tool-card.tool-webp-converter .webp-source-mountain-front {
  right: -15px !important;
  bottom: -29px !important;
  background: linear-gradient(135deg, #5d94bd, #263f78) !important;
}
.tool-card.tool-webp-converter .webp-source-haze {
  position: absolute !important;
  right: 0 !important;
  bottom: 0 !important;
  left: 0 !important;
  display: block !important;
  height: 14px !important;
  background: linear-gradient(transparent, rgba(226,237,255,.30)) !important;
}
.tool-card.tool-webp-converter .webp-convert-arrow {
  position: absolute !important;
  left: 61px !important;
  top: 36px !important;
  z-index: 8 !important;
  display: grid !important;
  place-items: center !important;
  width: 23px !important;
  height: 23px !important;
  border: 1px solid rgba(206,255,235,.60) !important;
  border-radius: 50% !important;
  color: #fff !important;
  background: linear-gradient(135deg, #44cfa1, #218b82) !important;
  box-shadow: 0 5px 13px rgba(20, 112, 93, .50) !important;
  font: 900 15px/1 Arial, sans-serif !important;
  transition: transform .32s cubic-bezier(.2,.9,.25,1), box-shadow .24s ease !important;
}
.tool-card.tool-webp-converter .webp-file {
  position: absolute !important;
  right: 3px !important;
  top: 3px !important;
  z-index: 6 !important;
  display: block !important;
  width: 57px !important;
  height: 73px !important;
  overflow: hidden !important;
  border: 1px solid rgba(215,255,240,.78) !important;
  border-radius: 9px !important;
  background: linear-gradient(145deg, #58d8b3 0%, #2aa98e 55%, #187163 100%) !important;
  box-shadow:
    0 10px 20px rgba(13, 91, 77, .48),
    inset 0 1px 0 rgba(255,255,255,.38) !important;
  transform: rotate(6deg) !important;
  transition: transform .34s cubic-bezier(.2,.85,.25,1), box-shadow .26s ease !important;
}
.tool-card.tool-webp-converter .webp-file-fold {
  position: absolute !important;
  right: 0 !important;
  top: 0 !important;
  display: block !important;
  width: 18px !important;
  height: 18px !important;
  background: linear-gradient(135deg, rgba(255,255,255,.58) 0 49%, rgba(255,255,255,.09) 50% 100%) !important;
  clip-path: polygon(0 0, 100% 100%, 0 100%) !important;
}
.tool-card.tool-webp-converter .webp-compress-mark {
  position: absolute !important;
  left: 9px !important;
  top: 24px !important;
  display: block !important;
  width: 39px !important;
  height: 19px !important;
}
.tool-card.tool-webp-converter .webp-compress-mark i {
  position: absolute !important;
  top: 4px !important;
  display: block !important;
  width: 12px !important;
  height: 12px !important;
  border-top: 3px solid rgba(235,255,248,.92) !important;
  border-bottom: 3px solid rgba(235,255,248,.92) !important;
  opacity: .95 !important;
}
.tool-card.tool-webp-converter .webp-mark-left {
  left: 1px !important;
  border-left: 3px solid rgba(235,255,248,.92) !important;
  transform: skewY(35deg) !important;
}
.tool-card.tool-webp-converter .webp-mark-right {
  right: 1px !important;
  border-right: 3px solid rgba(235,255,248,.92) !important;
  transform: skewY(-35deg) !important;
}
.tool-card.tool-webp-converter .webp-file-label {
  position: absolute !important;
  left: 7px !important;
  bottom: 9px !important;
  z-index: 2 !important;
  color: #fff !important;
  font: 900 11px/1 Arial, sans-serif !important;
  letter-spacing: .15px !important;
  text-shadow: 0 2px 3px rgba(8, 77, 65, .42) !important;
}
@media (hover: hover) and (pointer: fine) {
  .tool-card.tool-webp-converter:hover .tool-preview-webp-converter {
    transform: translateY(-8px) scale(1.02) !important;
  }
  .tool-card.tool-webp-converter:hover .webp-source-image {
    transform: translate(-7px, -10px) rotate(-13deg) !important;
    box-shadow: 0 18px 28px rgba(0,0,0,.42) !important;
  }
  .tool-card.tool-webp-converter:hover .webp-convert-arrow {
    transform: translateY(-10px) scale(1.16) !important;
    box-shadow: 0 8px 19px rgba(51, 202, 156, .70) !important;
  }
  .tool-card.tool-webp-converter:hover .webp-file {
    transform: translate(4px, -13px) rotate(10deg) scale(1.08) !important;
    box-shadow:
      0 18px 30px rgba(17, 126, 104, .64),
      0 0 17px rgba(87, 226, 184, .33),
      inset 0 1px 0 rgba(255,255,255,.46) !important;
  }
  .tool-card.tool-webp-converter:hover .webp-mark-left {
    transform: translateX(5px) skewY(35deg) !important;
  }
  .tool-card.tool-webp-converter:hover .webp-mark-right {
    transform: translateX(-5px) skewY(-35deg) !important;
  }
}
@media (max-width: 640px) {
  .tool-card.tool-webp-converter .tool-preview-webp-converter {
    right: 6px !important;
    bottom: 6px !important;
    transform: scale(.84) !important;
    transform-origin: right bottom !important;
  }
}
@media (prefers-reduced-motion: reduce) {
  .tool-card.tool-webp-converter .tool-preview-webp-converter,
  .tool-card.tool-webp-converter .tool-preview-webp-converter * {
    transition: none !important;
  }
}
/* WEBP-CONVERTER-PREVIEW-END */
/* PDF-MERGER-REDESIGN-START */
.tool-card.tool-merge-pdf .tool-preview-pdf-merger-red {
  position: absolute !important;
  right: 14px !important;
  bottom: 13px !important;
  z-index: 8 !important;
  display: block !important;
  width: 128px !important;
  height: 90px !important;
  overflow: visible !important;
  pointer-events: none !important;
  opacity: .98 !important;
  transform-origin: right bottom !important;
  transition: transform .26s ease, opacity .24s ease !important;
}
.tool-card.tool-merge-pdf .pdf-merge-document {
  position: absolute !important;
  z-index: 2 !important;
  display: block !important;
  width: 57px !important;
  height: 73px !important;
  overflow: hidden !important;
  border: 1px solid rgba(255, 225, 225, .78) !important;
  border-radius: 9px !important;
  background: linear-gradient(145deg, #ff7568 0%, #e6424d 52%, #b91f39 100%) !important;
  box-shadow:
    0 10px 20px rgba(117, 18, 41, .48),
    inset 0 1px 0 rgba(255,255,255,.32) !important;
  transform-origin: center bottom !important;
  transition:
    transform .38s cubic-bezier(.2,.9,.25,1),
    opacity .28s ease,
    box-shadow .28s ease !important;
}
.tool-card.tool-merge-pdf .pdf-merge-document-front {
  right: 22px !important;
  bottom: 2px !important;
  z-index: 5 !important;
  transform: rotate(5deg) !important;
}
.tool-card.tool-merge-pdf .pdf-merge-document-one {
  right: 22px !important;
  bottom: 2px !important;
  z-index: 3 !important;
  opacity: 0 !important;
  transform: rotate(5deg) scale(.88) !important;
}
.tool-card.tool-merge-pdf .pdf-merge-document-two {
  right: 22px !important;
  bottom: 2px !important;
  z-index: 4 !important;
  opacity: 0 !important;
  transform: rotate(5deg) scale(.88) !important;
}
.tool-card.tool-merge-pdf .pdf-merge-fold {
  position: absolute !important;
  right: 0 !important;
  top: 0 !important;
  display: block !important;
  width: 18px !important;
  height: 18px !important;
  background: linear-gradient(135deg, rgba(255,255,255,.54) 0 49%, rgba(255,255,255,.08) 50% 100%) !important;
  clip-path: polygon(0 0, 100% 100%, 0 100%) !important;
}
.tool-card.tool-merge-pdf .pdf-merge-label {
  position: absolute !important;
  left: 8px !important;
  top: 27px !important;
  color: #fff !important;
  font: 900 15px/1 Arial, sans-serif !important;
  letter-spacing: .4px !important;
  text-shadow: 0 2px 3px rgba(100, 12, 31, .32) !important;
}
.tool-card.tool-merge-pdf .pdf-merge-line {
  position: absolute !important;
  left: 9px !important;
  display: block !important;
  height: 3px !important;
  border-radius: 99px !important;
  background: rgba(255,255,255,.58) !important;
}
.tool-card.tool-merge-pdf .pdf-merge-line-a {
  top: 48px !important;
  width: 27px !important;
}
.tool-card.tool-merge-pdf .pdf-merge-line-b {
  top: 55px !important;
  width: 20px !important;
  opacity: .78 !important;
}
.tool-card.tool-merge-pdf .pdf-merge-symbol {
  position: absolute !important;
  right: 5px !important;
  top: 30px !important;
  z-index: 9 !important;
  display: grid !important;
  place-items: center !important;
  width: 25px !important;
  height: 25px !important;
  border: 1px solid rgba(255, 224, 224, .64) !important;
  border-radius: 50% !important;
  color: #fff !important;
  background: linear-gradient(135deg, #ff8276, #c92b43) !important;
  box-shadow: 0 5px 14px rgba(151, 22, 44, .48) !important;
  font: 800 20px/1 Arial, sans-serif !important;
  opacity: 0 !important;
  transform: scale(.4) rotate(-40deg) !important;
  transition:
    transform .35s cubic-bezier(.2,.95,.25,1.3) .13s,
    opacity .20s ease .13s,
    box-shadow .25s ease .13s !important;
}
@media (hover: hover) and (pointer: fine) {
  .tool-card.tool-merge-pdf:hover .tool-preview-pdf-merger-red {
    transform: translateY(-8px) scale(1.02) !important;
  }
  .tool-card.tool-merge-pdf:hover .pdf-merge-document-front {
    transform: translate(6px, -14px) rotate(10deg) scale(1.08) !important;
    box-shadow:
      0 19px 31px rgba(154, 22, 47, .65),
      0 0 17px rgba(255, 92, 100, .30),
      inset 0 1px 0 rgba(255,255,255,.40) !important;
  }
  .tool-card.tool-merge-pdf:hover .pdf-merge-document-one {
    opacity: 1 !important;
    transform: translate(-42px, -7px) rotate(-13deg) scale(.96) !important;
    box-shadow: 0 17px 27px rgba(117, 18, 41, .54) !important;
  }
  .tool-card.tool-merge-pdf:hover .pdf-merge-document-two {
    opacity: 1 !important;
    transform: translate(-17px, -22px) rotate(-3deg) scale(.99) !important;
    box-shadow: 0 18px 29px rgba(117, 18, 41, .58) !important;
  }
  .tool-card.tool-merge-pdf:hover .pdf-merge-symbol {
    opacity: 1 !important;
    transform: scale(1) rotate(0deg) !important;
    box-shadow:
      0 7px 19px rgba(196, 38, 55, .72),
      0 0 13px rgba(255, 115, 123, .34) !important;
  }
}
@media (max-width: 640px) {
  .tool-card.tool-merge-pdf .tool-preview-pdf-merger-red {
    right: 6px !important;
    bottom: 6px !important;
    transform: scale(.84) !important;
    transform-origin: right bottom !important;
  }
}
@media (prefers-reduced-motion: reduce) {
  .tool-card.tool-merge-pdf .tool-preview-pdf-merger-red,
  .tool-card.tool-merge-pdf .tool-preview-pdf-merger-red * {
    transition: none !important;
  }
  .tool-card.tool-merge-pdf .pdf-merge-document-one {
    opacity: .82 !important;
    transform: translate(-35px, -5px) rotate(-10deg) scale(.92) !important;
  }
  .tool-card.tool-merge-pdf .pdf-merge-document-two {
    opacity: .9 !important;
    transform: translate(-13px, -18px) rotate(-2deg) scale(.96) !important;
  }
  .tool-card.tool-merge-pdf .pdf-merge-symbol {
    opacity: 1 !important;
    transform: scale(1) !important;
  }
}
/* PDF-MERGER-REDESIGN-END */
/* BACKGROUND-REMOVER-PREVIEW-START */
.tool-card.tool-background-remover .tool-preview-background-remover {
  position: absolute !important;
  right: 14px !important;
  bottom: 14px !important;
  z-index: 2 !important;
  display: block !important;
  width: 132px !important;
  height: 86px !important;
  overflow: visible !important;
  pointer-events: none !important;
  opacity: .97 !important;
  transform-origin: right bottom !important;
  transition: transform .24s ease, opacity .24s ease !important;
}
.tool-card.tool-background-remover .background-remover-frame {
  position: absolute !important;
  right: 4px !important;
  bottom: 4px !important;
  display: block !important;
  width: 113px !important;
  height: 70px !important;
  overflow: hidden !important;
  border: 1px solid rgba(239, 232, 255, .58) !important;
  border-radius: 11px !important;
  background: #7183c9 !important;
  box-shadow: 0 10px 21px rgba(0, 0, 0, .36) !important;
  transform: rotate(-4deg) !important;
  transform-origin: center center !important;
  transition: transform .34s cubic-bezier(.2,.85,.25,1), box-shadow .26s ease !important;
}
.tool-card.tool-background-remover .background-remover-scene {
  position: absolute !important;
  inset: 0 !important;
  display: block !important;
  overflow: hidden !important;
  background: linear-gradient(160deg, #ad8ff1 0%, #7180cb 45%, #374874 100%) !important;
  clip-path: inset(0 50% 0 0) !important;
  transition: clip-path .46s cubic-bezier(.2,.85,.25,1) !important;
}
.tool-card.tool-background-remover .background-remover-sun {
  position: absolute !important;
  top: 11px !important;
  left: 33px !important;
  display: block !important;
  width: 12px !important;
  height: 12px !important;
  border-radius: 50% !important;
  background: #ffe38b !important;
  box-shadow: 0 0 10px rgba(255,226,139,.82) !important;
}
.tool-card.tool-background-remover .background-remover-cloud {
  position: absolute !important;
  top: 25px !important;
  left: 10px !important;
  display: block !important;
  width: 25px !important;
  height: 5px !important;
  border-radius: 99px !important;
  background: rgba(255,255,255,.48) !important;
}
.tool-card.tool-background-remover .background-remover-mountain {
  position: absolute !important;
  display: block !important;
  bottom: -27px !important;
  width: 70px !important;
  height: 70px !important;
  border-radius: 9px !important;
  transform: rotate(45deg) !important;
}
.tool-card.tool-background-remover .background-remover-mountain-back {
  left: -3px !important;
  background: linear-gradient(135deg, #8be0de, #3a77ac) !important;
}
.tool-card.tool-background-remover .background-remover-mountain-front {
  right: 26px !important;
  bottom: -39px !important;
  background: linear-gradient(135deg, #5d94bd, #263f78) !important;
}
.tool-card.tool-background-remover .background-remover-transparent {
  position: absolute !important;
  inset: 0 !important;
  display: block !important;
  background-color: rgba(239, 246, 255, .88) !important;
  background-image:
    linear-gradient(45deg, rgba(136, 162, 205, .42) 25%, transparent 25%),
    linear-gradient(-45deg, rgba(136, 162, 205, .42) 25%, transparent 25%),
    linear-gradient(45deg, transparent 75%, rgba(136, 162, 205, .42) 75%),
    linear-gradient(-45deg, transparent 75%, rgba(136, 162, 205, .42) 75%) !important;
  background-position: 0 0, 0 6px, 6px -6px, -6px 0 !important;
  background-size: 12px 12px !important;
  clip-path: inset(0 0 0 50%) !important;
  transition: clip-path .46s cubic-bezier(.2,.85,.25,1) !important;
}
.tool-card.tool-background-remover .background-remover-subject {
  position: absolute !important;
  left: 43px !important;
  bottom: 7px !important;
  z-index: 4 !important;
  display: block !important;
  width: 33px !important;
  height: 49px !important;
  filter: drop-shadow(0 5px 6px rgba(28, 35, 86, .34)) !important;
  transform-origin: bottom center !important;
  transition: transform .34s cubic-bezier(.2,.85,.25,1), filter .26s ease !important;
}
.tool-card.tool-background-remover .background-remover-head {
  position: absolute !important;
  left: 9px !important;
  top: 0 !important;
  display: block !important;
  width: 16px !important;
  height: 16px !important;
  border: 2px solid rgba(239,248,255,.76) !important;
  border-radius: 50% !important;
  background: linear-gradient(145deg, #ffcfad, #d98f82) !important;
  box-shadow: inset 0 1px 0 rgba(255,255,255,.46) !important;
}
.tool-card.tool-background-remover .background-remover-body {
  position: absolute !important;
  left: 2px !important;
  bottom: 0 !important;
  display: block !important;
  width: 29px !important;
  height: 33px !important;
  border: 2px solid rgba(234,248,255,.70) !important;
  border-radius: 15px 15px 6px 6px !important;
  background: linear-gradient(145deg, #7063cf, #40338e) !important;
  box-shadow: inset 0 1px 0 rgba(255,255,255,.26) !important;
}
.tool-card.tool-background-remover .background-remover-divider {
  position: absolute !important;
  top: -4px !important;
  bottom: -4px !important;
  left: 50% !important;
  z-index: 6 !important;
  display: block !important;
  width: 2px !important;
  border-radius: 99px !important;
  background: #a7f2ff !important;
  box-shadow: 0 0 10px rgba(102,229,255,.92) !important;
  transform: translateX(-50%) !important;
  transition: left .46s cubic-bezier(.2,.85,.25,1), box-shadow .26s ease !important;
}
@media (hover: hover) and (pointer: fine) {
  .tool-card.tool-background-remover:hover .tool-preview-background-remover {
    transform: translateY(-8px) scale(1.02) !important;
  }
  .tool-card.tool-background-remover:hover .background-remover-frame {
    transform: translateY(-2px) rotate(-7deg) scale(1.04) !important;
    box-shadow:
      0 18px 29px rgba(0,0,0,.44),
      0 0 18px rgba(119, 233, 255, .22) !important;
  }
  .tool-card.tool-background-remover:hover .background-remover-scene {
    clip-path: inset(0 82% 0 0) !important;
  }
  .tool-card.tool-background-remover:hover .background-remover-transparent {
    clip-path: inset(0 0 0 18%) !important;
  }
  .tool-card.tool-background-remover:hover .background-remover-divider {
    left: 18% !important;
    box-shadow: 0 0 14px rgba(102,229,255,1) !important;
  }
  .tool-card.tool-background-remover:hover .background-remover-subject {
    transform: translate(8px, -8px) scale(1.08) !important;
    filter: drop-shadow(0 9px 10px rgba(25, 36, 98, .50)) !important;
  }
}
@media (max-width: 640px) {
  .tool-card.tool-background-remover .tool-preview-background-remover {
    right: 6px !important;
    bottom: 6px !important;
    transform: scale(.84) !important;
    transform-origin: right bottom !important;
  }
}
@media (prefers-reduced-motion: reduce) {
  .tool-card.tool-background-remover .tool-preview-background-remover,
  .tool-card.tool-background-remover .tool-preview-background-remover * {
    transition: none !important;
  }
  .tool-card.tool-background-remover .background-remover-scene {
    clip-path: inset(0 82% 0 0) !important;
  }
  .tool-card.tool-background-remover .background-remover-transparent {
    clip-path: inset(0 0 0 18%) !important;
  }
  .tool-card.tool-background-remover .background-remover-divider {
    left: 18% !important;
  }
}
/* BACKGROUND-REMOVER-PREVIEW-END */
/* PDF-TO-JPG-PREVIEW-START */
.tool-card.tool-pdf-to-jpg .tool-preview-pdf-to-jpg {
  position: absolute !important;
  right: 13px !important;
  bottom: 13px !important;
  z-index: 2 !important;
  display: block !important;
  width: 142px !important;
  height: 88px !important;
  overflow: visible !important;
  pointer-events: none !important;
  opacity: .97 !important;
  transform-origin: right bottom !important;
  transition: transform .24s ease, opacity .24s ease !important;
}
.tool-card.tool-pdf-to-jpg .pdf-to-jpg-file {
  position: absolute !important;
  left: 4px !important;
  top: 6px !important;
  z-index: 4 !important;
  display: block !important;
  width: 54px !important;
  height: 70px !important;
  overflow: hidden !important;
  border: 1px solid rgba(255,225,225,.76) !important;
  border-radius: 9px !important;
  background: linear-gradient(145deg, #ff7568 0%, #e6424d 52%, #b91f39 100%) !important;
  box-shadow:
    0 10px 20px rgba(117,18,41,.48),
    inset 0 1px 0 rgba(255,255,255,.32) !important;
  transform: rotate(-6deg) !important;
  transform-origin: center center !important;
  transition: transform .34s cubic-bezier(.2,.85,.25,1), box-shadow .26s ease, opacity .26s ease !important;
}
.tool-card.tool-pdf-to-jpg .pdf-to-jpg-fold {
  position: absolute !important;
  right: 0 !important;
  top: 0 !important;
  display: block !important;
  width: 18px !important;
  height: 18px !important;
  background: linear-gradient(135deg, rgba(255,255,255,.54) 0 49%, rgba(255,255,255,.08) 50% 100%) !important;
  clip-path: polygon(0 0, 100% 100%, 0 100%) !important;
}
.tool-card.tool-pdf-to-jpg .pdf-to-jpg-label {
  position: absolute !important;
  left: 8px !important;
  top: 26px !important;
  color: #fff !important;
  font: 900 14px/1 Arial, sans-serif !important;
  letter-spacing: .35px !important;
  text-shadow: 0 2px 3px rgba(100,12,31,.32) !important;
}
.tool-card.tool-pdf-to-jpg .pdf-to-jpg-file-line {
  position: absolute !important;
  left: 9px !important;
  display: block !important;
  height: 3px !important;
  border-radius: 99px !important;
  background: rgba(255,255,255,.58) !important;
}
.tool-card.tool-pdf-to-jpg .pdf-to-jpg-file-line-a {
  top: 46px !important;
  width: 26px !important;
}
.tool-card.tool-pdf-to-jpg .pdf-to-jpg-file-line-b {
  top: 53px !important;
  width: 19px !important;
  opacity: .78 !important;
}
.tool-card.tool-pdf-to-jpg .pdf-to-jpg-arrow {
  position: absolute !important;
  left: 58px !important;
  top: 34px !important;
  z-index: 8 !important;
  display: grid !important;
  place-items: center !important;
  width: 24px !important;
  height: 24px !important;
  border: 1px solid rgba(232,221,255,.60) !important;
  border-radius: 50% !important;
  color: #fff !important;
  background: linear-gradient(135deg, #9a70f4, #6545ce) !important;
  box-shadow: 0 5px 14px rgba(79,46,185,.50) !important;
  font: 900 15px/1 Arial, sans-serif !important;
  transition: transform .32s cubic-bezier(.2,.9,.25,1), box-shadow .24s ease !important;
}
.tool-card.tool-pdf-to-jpg .pdf-to-jpg-image {
  position: absolute !important;
  right: 2px !important;
  bottom: 5px !important;
  z-index: 6 !important;
  display: block !important;
  width: 69px !important;
  height: 55px !important;
  overflow: hidden !important;
  border: 1px solid rgba(239,232,255,.54) !important;
  border-radius: 10px !important;
  background: linear-gradient(160deg, #ab8df0 0%, #6d78c8 45%, #33446f 100%) !important;
  box-shadow: 0 9px 19px rgba(0,0,0,.32) !important;
  transform: rotate(6deg) !important;
  transform-origin: center center !important;
  transition: transform .34s cubic-bezier(.2,.85,.25,1), box-shadow .26s ease !important;
}
.tool-card.tool-pdf-to-jpg .pdf-to-jpg-sun {
  position: absolute !important;
  top: 9px !important;
  right: 10px !important;
  display: block !important;
  width: 10px !important;
  height: 10px !important;
  border-radius: 50% !important;
  background: #ffe38b !important;
  box-shadow: 0 0 9px rgba(255,226,139,.82) !important;
}
.tool-card.tool-pdf-to-jpg .pdf-to-jpg-cloud {
  position: absolute !important;
  display: block !important;
  height: 4px !important;
  border-radius: 999px !important;
  background: rgba(255,255,255,.48) !important;
}
.tool-card.tool-pdf-to-jpg .pdf-to-jpg-cloud-a {
  top: 18px !important;
  left: 8px !important;
  width: 20px !important;
}
.tool-card.tool-pdf-to-jpg .pdf-to-jpg-cloud-b {
  top: 26px !important;
  left: 23px !important;
  width: 13px !important;
  opacity: .65 !important;
}
.tool-card.tool-pdf-to-jpg .pdf-to-jpg-mountain {
  position: absolute !important;
  display: block !important;
  bottom: -20px !important;
  width: 55px !important;
  height: 55px !important;
  border-radius: 8px !important;
  transform: rotate(45deg) !important;
}
.tool-card.tool-pdf-to-jpg .pdf-to-jpg-mountain-back {
  left: 2px !important;
  background: linear-gradient(135deg, #8be0de, #3a77ac) !important;
  opacity: .94 !important;
}
.tool-card.tool-pdf-to-jpg .pdf-to-jpg-mountain-front {
  right: -16px !important;
  bottom: -31px !important;
  background: linear-gradient(135deg, #5d94bd, #263f78) !important;
}
.tool-card.tool-pdf-to-jpg .pdf-to-jpg-haze {
  position: absolute !important;
  right: 0 !important;
  bottom: 0 !important;
  left: 0 !important;
  display: block !important;
  height: 15px !important;
  background: linear-gradient(transparent, rgba(226,237,255,.30)) !important;
}
.tool-card.tool-pdf-to-jpg .pdf-to-jpg-tag {
  position: absolute !important;
  right: 5px !important;
  bottom: 5px !important;
  z-index: 2 !important;
  display: grid !important;
  place-items: center !important;
  min-width: 24px !important;
  height: 13px !important;
  padding: 0 3px !important;
  border: 1px solid rgba(239,248,255,.54) !important;
  border-radius: 4px !important;
  color: #fff !important;
  background: rgba(30,51,121,.54) !important;
  font: 900 7px/1 Arial, sans-serif !important;
  letter-spacing: .2px !important;
}
@media (hover: hover) and (pointer: fine) {
  .tool-card.tool-pdf-to-jpg:hover .tool-preview-pdf-to-jpg {
    transform: translateY(-8px) scale(1.02) !important;
  }
  .tool-card.tool-pdf-to-jpg:hover .pdf-to-jpg-file {
    transform: translate(-7px, -8px) rotate(-12deg) scale(.95) !important;
    opacity: .92 !important;
    box-shadow: 0 17px 27px rgba(117,18,41,.54) !important;
  }
  .tool-card.tool-pdf-to-jpg:hover .pdf-to-jpg-arrow {
    transform: translateY(-10px) scale(1.16) !important;
    box-shadow: 0 8px 19px rgba(125,79,235,.72) !important;
  }
  .tool-card.tool-pdf-to-jpg:hover .pdf-to-jpg-image {
    transform: translate(5px, -14px) rotate(11deg) scale(1.13) !important;
    box-shadow:
      0 19px 31px rgba(0,0,0,.45),
      0 0 17px rgba(136,187,255,.28) !important;
  }
}
@media (max-width: 640px) {
  .tool-card.tool-pdf-to-jpg .tool-preview-pdf-to-jpg {
    right: 6px !important;
    bottom: 6px !important;
    transform: scale(.84) !important;
    transform-origin: right bottom !important;
  }
}
@media (prefers-reduced-motion: reduce) {
  .tool-card.tool-pdf-to-jpg .tool-preview-pdf-to-jpg,
  .tool-card.tool-pdf-to-jpg .tool-preview-pdf-to-jpg * {
    transition: none !important;
  }
}
/* PDF-TO-JPG-PREVIEW-END */
/* VOICE-TO-TEXT-PREVIEW-START */
.tool-card.tool-voice-typer .tool-preview-voice-to-text {
  position: absolute !important;
  right: 13px !important;
  bottom: 13px !important;
  z-index: 2 !important;
  display: block !important;
  width: 140px !important;
  height: 88px !important;
  overflow: visible !important;
  pointer-events: none !important;
  opacity: .98 !important;
  transform-origin: right bottom !important;
  transition: transform .24s ease, opacity .24s ease !important;
}
.tool-card.tool-voice-typer .voice-text-sheet {
  position: absolute !important;
  right: 5px !important;
  top: 4px !important;
  z-index: 2 !important;
  display: block !important;
  width: 75px !important;
  height: 71px !important;
  border: 1px solid rgba(238,230,255,.64) !important;
  border-radius: 10px !important;
  background:
    linear-gradient(145deg, rgba(251,248,255,.95), rgba(210,219,255,.82)) !important;
  box-shadow: 0 10px 20px rgba(16,19,71,.34) !important;
  transform: rotate(6deg) !important;
  transform-origin: center bottom !important;
  transition: transform .34s cubic-bezier(.2,.85,.25,1), box-shadow .26s ease !important;
}
.tool-card.tool-voice-typer .voice-text-line {
  position: absolute !important;
  left: 14px !important;
  display: block !important;
  height: 4px !important;
  border-radius: 99px !important;
  background: linear-gradient(90deg, #7b62db, #a48aef) !important;
  box-shadow: 0 1px 2px rgba(83,60,174,.16) !important;
  transform-origin: left center !important;
  transition: transform .32s ease, opacity .24s ease !important;
}
.tool-card.tool-voice-typer .voice-text-line-a { top: 20px !important; width: 41px !important; }
.tool-card.tool-voice-typer .voice-text-line-b { top: 31px !important; width: 33px !important; opacity: .86 !important; }
.tool-card.tool-voice-typer .voice-text-line-c { top: 42px !important; width: 45px !important; opacity: .72 !important; }
.tool-card.tool-voice-typer .voice-text-cursor {
  position: absolute !important;
  left: 14px !important;
  bottom: 15px !important;
  display: block !important;
  width: 2px !important;
  height: 10px !important;
  border-radius: 99px !important;
  background: #6a50cd !important;
  opacity: .75 !important;
}
.tool-card.tool-voice-typer .voice-mic {
  position: absolute !important;
  left: 20px !important;
  bottom: 2px !important;
  z-index: 6 !important;
  display: block !important;
  width: 53px !important;
  height: 74px !important;
  filter: drop-shadow(0 9px 13px rgba(29,20,110,.38)) !important;
  transform: rotate(-8deg) !important;
  transform-origin: bottom center !important;
  transition: transform .34s cubic-bezier(.2,.9,.25,1), filter .26s ease !important;
}
.tool-card.tool-voice-typer .voice-mic-head {
  position: absolute !important;
  left: 11px !important;
  top: 0 !important;
  display: block !important;
  width: 29px !important;
  height: 42px !important;
  border: 2px solid rgba(224,255,252,.72) !important;
  border-radius: 17px !important;
  background:
    radial-gradient(circle at 32% 22%, rgba(255,255,255,.54), transparent 24%),
    linear-gradient(145deg, #74dbc8 0%, #3a9cb7 47%, #5a48bb 100%) !important;
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,.46),
    0 5px 12px rgba(37,48,162,.38) !important;
}
.tool-card.tool-voice-typer .voice-mic-stem {
  position: absolute !important;
  left: 24px !important;
  top: 40px !important;
  display: block !important;
  width: 5px !important;
  height: 19px !important;
  border-radius: 99px !important;
  background: linear-gradient(#8ce5d5, #6651c5) !important;
}
.tool-card.tool-voice-typer .voice-mic-base {
  position: absolute !important;
  left: 9px !important;
  bottom: 3px !important;
  display: block !important;
  width: 35px !important;
  height: 8px !important;
  border-radius: 99px !important;
  background: linear-gradient(90deg, #5a45ba, #82dccc) !important;
  box-shadow: 0 3px 5px rgba(31,27,111,.30) !important;
}
.tool-card.tool-voice-typer .voice-wave {
  position: absolute !important;
  z-index: 5 !important;
  display: flex !important;
  align-items: center !important;
  gap: 3px !important;
  height: 40px !important;
  bottom: 23px !important;
  opacity: .84 !important;
  transition: transform .32s ease, opacity .24s ease !important;
}
.tool-card.tool-voice-typer .voice-wave-left { left: 2px !important; }
.tool-card.tool-voice-typer .voice-wave-right { left: 75px !important; }
.tool-card.tool-voice-typer .voice-wave i {
  display: block !important;
  width: 3px !important;
  border-radius: 99px !important;
  background: linear-gradient(#8ceddf, #7459d2) !important;
  box-shadow: 0 0 6px rgba(120,226,213,.34) !important;
  transform-origin: center !important;
  transition: height .28s ease, transform .28s ease !important;
}
.tool-card.tool-voice-typer .voice-wave i:nth-child(1) { height: 14px !important; }
.tool-card.tool-voice-typer .voice-wave i:nth-child(2) { height: 29px !important; }
.tool-card.tool-voice-typer .voice-wave i:nth-child(3) { height: 18px !important; }
@media (hover: hover) and (pointer: fine) {
  .tool-card.tool-voice-typer:hover .tool-preview-voice-to-text {
    transform: translateY(-8px) scale(1.02) !important;
  }
  .tool-card.tool-voice-typer:hover .voice-text-sheet {
    transform: translate(5px, -12px) rotate(10deg) scale(1.06) !important;
    box-shadow: 0 19px 31px rgba(16,19,71,.45) !important;
  }
  .tool-card.tool-voice-typer:hover .voice-mic {
    transform: translate(-4px, -12px) rotate(-13deg) scale(1.09) !important;
    filter: drop-shadow(0 14px 18px rgba(62,46,191,.60)) !important;
  }
  .tool-card.tool-voice-typer:hover .voice-wave-left {
    transform: translate(-4px, -8px) !important;
  }
  .tool-card.tool-voice-typer:hover .voice-wave-right {
    transform: translate(5px, -8px) !important;
  }
  .tool-card.tool-voice-typer:hover .voice-wave i:nth-child(1) { height: 22px !important; }
  .tool-card.tool-voice-typer:hover .voice-wave i:nth-child(2) { height: 39px !important; }
  .tool-card.tool-voice-typer:hover .voice-wave i:nth-child(3) { height: 27px !important; }
  .tool-card.tool-voice-typer:hover .voice-text-line-a { transform: scaleX(1.15) !important; }
  .tool-card.tool-voice-typer:hover .voice-text-line-b { transform: scaleX(1.22) !important; opacity: 1 !important; }
  .tool-card.tool-voice-typer:hover .voice-text-line-c { transform: scaleX(1.12) !important; opacity: .92 !important; }
}
@media (max-width: 640px) {
  .tool-card.tool-voice-typer .tool-preview-voice-to-text {
    right: 6px !important;
    bottom: 6px !important;
    transform: scale(.84) !important;
    transform-origin: right bottom !important;
  }
}
@media (prefers-reduced-motion: reduce) {
  .tool-card.tool-voice-typer .tool-preview-voice-to-text,
  .tool-card.tool-voice-typer .tool-preview-voice-to-text * {
    transition: none !important;
  }
}
/* VOICE-TO-TEXT-PREVIEW-END */
/* KEYWORD-GENERATOR-PREVIEW-START */
.tool-card.tool-keyword-generator .tool-preview-keyword-generator {
  position: absolute !important;
  right: 13px !important;
  bottom: 13px !important;
  z-index: 2 !important;
  display: block !important;
  width: 141px !important;
  height: 88px !important;
  overflow: visible !important;
  pointer-events: none !important;
  opacity: .98 !important;
  transform-origin: right bottom !important;
  transition: transform .24s ease, opacity .24s ease !important;
}
.tool-card.tool-keyword-generator .keyword-search-box {
  position: absolute !important;
  left: 3px !important;
  top: 8px !important;
  z-index: 2 !important;
  display: block !important;
  width: 103px !important;
  height: 45px !important;
  border: 1px solid rgba(219,255,209,.48) !important;
  border-radius: 12px !important;
  background:
    radial-gradient(circle at 15% 18%, rgba(206,255,132,.19), transparent 35%),
    linear-gradient(145deg, #24495b 0%, #182b3b 54%, #10212d 100%) !important;
  box-shadow:
    0 11px 21px rgba(3, 19, 25, .42),
    inset 0 1px 0 rgba(255,255,255,.12) !important;
  transform: rotate(-5deg) !important;
  transition: transform .34s cubic-bezier(.2,.85,.25,1), box-shadow .26s ease !important;
}
.tool-card.tool-keyword-generator .keyword-search-lens {
  position: absolute !important;
  left: 14px !important;
  top: 12px !important;
  display: block !important;
  width: 13px !important;
  height: 13px !important;
  border: 3px solid #b7f16a !important;
  border-radius: 50% !important;
  box-shadow: 0 0 9px rgba(191,255,113,.54) !important;
}
.tool-card.tool-keyword-generator .keyword-search-lens::after {
  content: "" !important;
  position: absolute !important;
  right: -9px !important;
  bottom: -6px !important;
  display: block !important;
  width: 10px !important;
  height: 3px !important;
  border-radius: 99px !important;
  background: #b7f16a !important;
  box-shadow: 0 0 7px rgba(191,255,113,.54) !important;
  transform: rotate(45deg) !important;
}
.tool-card.tool-keyword-generator .keyword-search-line {
  position: absolute !important;
  left: 46px !important;
  top: 21px !important;
  display: block !important;
  width: 41px !important;
  height: 4px !important;
  border-radius: 99px !important;
  background: linear-gradient(90deg, rgba(208,255,149,.85), rgba(208,255,149,.30)) !important;
}
.tool-card.tool-keyword-generator .keyword-tag {
  position: absolute !important;
  z-index: 5 !important;
  display: grid !important;
  place-items: center !important;
  min-width: 37px !important;
  height: 23px !important;
  padding: 0 7px !important;
  border: 1px solid rgba(232,255,210,.64) !important;
  border-radius: 7px !important;
  color: #f6ffec !important;
  background:
    linear-gradient(145deg, rgba(196,242,101,.92), rgba(80,169,102,.95)) !important;
  box-shadow:
    0 7px 14px rgba(25,99,69,.40),
    inset 0 1px 0 rgba(255,255,255,.34) !important;
  font: 900 9px/1 Arial, sans-serif !important;
  letter-spacing: .35px !important;
  transition: transform .34s cubic-bezier(.2,.9,.25,1), box-shadow .26s ease !important;
}
.tool-card.tool-keyword-generator .keyword-tag-seo {
  left: 19px !important;
  bottom: 6px !important;
  transform: rotate(-8deg) !important;
}
.tool-card.tool-keyword-generator .keyword-tag-idea {
  left: 63px !important;
  bottom: 9px !important;
  color: #fffcec !important;
  background: linear-gradient(145deg, #f5c75f, #d98948) !important;
  box-shadow:
    0 7px 14px rgba(137,75,28,.39),
    inset 0 1px 0 rgba(255,255,255,.37) !important;
  transform: rotate(7deg) !important;
}
.tool-card.tool-keyword-generator .keyword-tag-hash {
  right: 4px !important;
  top: 28px !important;
  min-width: 21px !important;
  padding: 0 !important;
  color: #f6f3ff !important;
  background: linear-gradient(145deg, #9a7bea, #6247bc) !important;
  box-shadow:
    0 7px 14px rgba(60,36,149,.41),
    inset 0 1px 0 rgba(255,255,255,.34) !important;
  font-size: 13px !important;
  transform: rotate(10deg) !important;
}
.tool-card.tool-keyword-generator .keyword-spark {
  position: absolute !important;
  right: 10px !important;
  top: 4px !important;
  z-index: 7 !important;
  display: block !important;
  width: 22px !important;
  height: 22px !important;
  transform: rotate(16deg) !important;
  transition: transform .34s cubic-bezier(.2,.9,.25,1), filter .26s ease !important;
}
.tool-card.tool-keyword-generator .keyword-spark i {
  position: absolute !important;
  left: 10px !important;
  top: 10px !important;
  display: block !important;
  width: 3px !important;
  height: 3px !important;
  border-radius: 50% !important;
  background: #f6f59d !important;
  box-shadow: 0 0 9px rgba(245,255,119,.88) !important;
  transform-origin: center !important;
}
.tool-card.tool-keyword-generator .keyword-spark-a {
  transform: scaleY(5) !important;
}
.tool-card.tool-keyword-generator .keyword-spark-b {
  transform: scaleX(5) !important;
}
.tool-card.tool-keyword-generator .keyword-spark-c {
  transform: rotate(45deg) scaleX(3.5) !important;
}
@media (hover: hover) and (pointer: fine) {
  .tool-card.tool-keyword-generator:hover .tool-preview-keyword-generator {
    transform: translateY(-8px) scale(1.02) !important;
  }
  .tool-card.tool-keyword-generator:hover .keyword-search-box {
    transform: translate(-4px, -10px) rotate(-9deg) !important;
    box-shadow:
      0 18px 29px rgba(3,19,25,.54),
      0 0 17px rgba(184,248,103,.18),
      inset 0 1px 0 rgba(255,255,255,.16) !important;
  }
  .tool-card.tool-keyword-generator:hover .keyword-tag-seo {
    transform: translate(-8px, -12px) rotate(-14deg) scale(1.08) !important;
  }
  .tool-card.tool-keyword-generator:hover .keyword-tag-idea {
    transform: translate(3px, -18px) rotate(12deg) scale(1.10) !important;
  }
  .tool-card.tool-keyword-generator:hover .keyword-tag-hash {
    transform: translate(8px, -7px) rotate(18deg) scale(1.13) !important;
  }
  .tool-card.tool-keyword-generator:hover .keyword-spark {
    transform: translate(4px, -7px) rotate(48deg) scale(1.22) !important;
    filter: drop-shadow(0 0 8px rgba(241,255,125,.78)) !important;
  }
}
@media (max-width: 640px) {
  .tool-card.tool-keyword-generator .tool-preview-keyword-generator {
    right: 6px !important;
    bottom: 6px !important;
    transform: scale(.84) !important;
    transform-origin: right bottom !important;
  }
}
@media (prefers-reduced-motion: reduce) {
  .tool-card.tool-keyword-generator .tool-preview-keyword-generator,
  .tool-card.tool-keyword-generator .tool-preview-keyword-generator * {
    transition: none !important;
  }
}
/* KEYWORD-GENERATOR-PREVIEW-END */
/* VIDEO-COMPRESSOR-PREVIEW-START */
.tool-card.tool-video-compressor .tool-preview-video-compressor {
  position: absolute !important;
  right: 13px !important;
  bottom: 13px !important;
  z-index: 2 !important;
  display: block !important;
  width: 142px !important;
  height: 88px !important;
  overflow: visible !important;
  pointer-events: none !important;
  opacity: .98 !important;
  transform-origin: right bottom !important;
  transition: transform .24s ease, opacity .24s ease !important;
}
.tool-card.tool-video-compressor .video-compress-frame {
  position: absolute !important;
  left: 17px !important;
  top: 10px !important;
  display: block !important;
  width: 100px !important;
  height: 65px !important;
  overflow: hidden !important;
  border: 2px solid rgba(255,222,248,.62) !important;
  border-radius: 11px !important;
  background: linear-gradient(145deg, #f06aa9 0%, #a93b9e 45%, #4e286f 100%) !important;
  box-shadow:
    0 10px 21px rgba(77,19,92,.46),
    inset 0 1px 0 rgba(255,255,255,.35) !important;
  transform: rotate(-5deg) !important;
  transform-origin: center center !important;
  transition: transform .34s cubic-bezier(.2,.85,.25,1), box-shadow .26s ease !important;
}
.tool-card.tool-video-compressor .video-compress-screen {
  position: absolute !important;
  left: 10px !important;
  right: 10px !important;
  top: 9px !important;
  bottom: 9px !important;
  display: block !important;
  overflow: hidden !important;
  border: 1px solid rgba(255,221,249,.48) !important;
  border-radius: 7px !important;
  background:
    radial-gradient(circle at 68% 26%, rgba(255,174,226,.55), transparent 22%),
    linear-gradient(145deg, #422759 0%, #291d47 55%, #1b1834 100%) !important;
  box-shadow: inset 0 1px 6px rgba(0,0,0,.46) !important;
}
.tool-card.tool-video-compressor .video-compress-glow {
  position: absolute !important;
  left: 10px !important;
  bottom: -8px !important;
  display: block !important;
  width: 53px !important;
  height: 23px !important;
  border-radius: 50% !important;
  background: rgba(229,80,183,.42) !important;
  filter: blur(8px) !important;
  transform: rotate(-18deg) !important;
  transition: opacity .26s ease, transform .34s ease !important;
}
.tool-card.tool-video-compressor .video-compress-play {
  position: absolute !important;
  left: 50% !important;
  top: 50% !important;
  z-index: 3 !important;
  display: block !important;
  width: 0 !important;
  height: 0 !important;
  border-top: 11px solid transparent !important;
  border-bottom: 11px solid transparent !important;
  border-left: 17px solid #fff !important;
  filter: drop-shadow(0 2px 4px rgba(44,14,74,.60)) !important;
  transform: translate(-42%, -50%) !important;
  transition: filter .26s ease, transform .32s cubic-bezier(.2,.9,.25,1) !important;
}
.tool-card.tool-video-compressor .video-compress-sprockets {
  position: absolute !important;
  left: 3px !important;
  right: 3px !important;
  display: block !important;
  height: 4px !important;
  opacity: .70 !important;
  background:
    repeating-linear-gradient(90deg, rgba(255,244,252,.85) 0 6px, transparent 6px 11px) !important;
}
.tool-card.tool-video-compressor .video-compress-sprockets-top { top: 2px !important; }
.tool-card.tool-video-compressor .video-compress-sprockets-bottom { bottom: 2px !important; }
.tool-card.tool-video-compressor .video-compress-bracket {
  position: absolute !important;
  top: 24px !important;
  z-index: 5 !important;
  display: block !important;
  width: 12px !important;
  height: 38px !important;
  border-top: 3px solid #ffc6ec !important;
  border-bottom: 3px solid #ffc6ec !important;
  filter: drop-shadow(0 0 6px rgba(255,159,221,.64)) !important;
  transition: transform .34s cubic-bezier(.2,.85,.25,1), filter .26s ease !important;
}
.tool-card.tool-video-compressor .video-compress-bracket-left {
  left: 1px !important;
  border-left: 3px solid #ffc6ec !important;
  border-radius: 5px 0 0 5px !important;
}
.tool-card.tool-video-compressor .video-compress-bracket-right {
  right: 1px !important;
  border-right: 3px solid #ffc6ec !important;
  border-radius: 0 5px 5px 0 !important;
}
@media (hover: hover) and (pointer: fine) {
  .tool-card.tool-video-compressor:hover .tool-preview-video-compressor {
    transform: translateY(-8px) scale(1.02) !important;
  }
  .tool-card.tool-video-compressor:hover .video-compress-frame {
    transform: translateY(-11px) rotate(-9deg) scale(1.06) !important;
    box-shadow:
      0 19px 31px rgba(87,20,103,.64),
      0 0 18px rgba(244,105,187,.26),
      inset 0 1px 0 rgba(255,255,255,.43) !important;
  }
  .tool-card.tool-video-compressor:hover .video-compress-bracket-left {
    transform: translate(15px, -9px) !important;
    filter: drop-shadow(0 0 9px rgba(255,190,233,.92)) !important;
  }
  .tool-card.tool-video-compressor:hover .video-compress-bracket-right {
    transform: translate(-15px, -9px) !important;
    filter: drop-shadow(0 0 9px rgba(255,190,233,.92)) !important;
  }
  .tool-card.tool-video-compressor:hover .video-compress-play {
    transform: translate(-42%, -50%) scale(1.16) !important;
    filter: drop-shadow(0 0 8px rgba(255,211,243,.84)) !important;
  }
  .tool-card.tool-video-compressor:hover .video-compress-glow {
    opacity: .88 !important;
    transform: rotate(-18deg) translate(8px, -3px) scale(1.22) !important;
  }
}
@media (max-width: 640px) {
  .tool-card.tool-video-compressor .tool-preview-video-compressor {
    right: 6px !important;
    bottom: 6px !important;
    transform: scale(.84) !important;
    transform-origin: right bottom !important;
  }
}
@media (prefers-reduced-motion: reduce) {
  .tool-card.tool-video-compressor .tool-preview-video-compressor,
  .tool-card.tool-video-compressor .tool-preview-video-compressor * {
    transition: none !important;
  }
}
/* VIDEO-COMPRESSOR-PREVIEW-END */
/* IMAGE-UPSCALER-PREVIEW-START */
.tool-card.tool-image-upscaler .tool-preview-image-upscaler {
  position: absolute !important;
  right: 12px !important;
  bottom: 12px !important;
  z-index: 2 !important;
  display: block !important;
  width: 144px !important;
  height: 90px !important;
  overflow: visible !important;
  pointer-events: none !important;
  opacity: .98 !important;
  transform-origin: right bottom !important;
  transition: transform .24s ease, opacity .24s ease !important;
}
.tool-card.tool-image-upscaler .upscale-image-card {
  position: absolute !important;
  right: 7px !important;
  top: 8px !important;
  display: block !important;
  width: 85px !important;
  height: 61px !important;
  overflow: hidden !important;
  border: 2px solid rgba(227,250,255,.75) !important;
  border-radius: 11px !important;
  background: linear-gradient(150deg, #61c9f3 0%, #95dbfa 49%, #dff4e5 50%, #a8dc95 100%) !important;
  box-shadow:
    0 11px 22px rgba(17,91,123,.35),
    inset 0 1px 0 rgba(255,255,255,.54) !important;
  transform: rotate(4deg) !important;
  transition: transform .36s cubic-bezier(.2,.85,.25,1), box-shadow .28s ease !important;
}
.tool-card.tool-image-upscaler .upscale-sky {
  position: absolute !important;
  inset: 0 0 38% 0 !important;
  display: block !important;
  background:
    radial-gradient(circle at 78% 28%, rgba(255,251,181,.92) 0 7%, transparent 8%),
    linear-gradient(180deg, rgba(88,197,246,.33), rgba(255,255,255,.04)) !important;
}
.tool-card.tool-image-upscaler .upscale-sun {
  position: absolute !important;
  right: 13px !important;
  top: 10px !important;
  display: block !important;
  width: 11px !important;
  height: 11px !important;
  border-radius: 50% !important;
  background: #fff6a2 !important;
  box-shadow: 0 0 10px rgba(255,241,133,.85) !important;
}
.tool-card.tool-image-upscaler .upscale-mountain {
  position: absolute !important;
  bottom: -12px !important;
  display: block !important;
  width: 57px !important;
  height: 47px !important;
  transform: rotate(45deg) !important;
}
.tool-card.tool-image-upscaler .upscale-mountain-back {
  left: 3px !important;
  background: linear-gradient(135deg, #467f93, #2b6177) !important;
}
.tool-card.tool-image-upscaler .upscale-mountain-front {
  right: -6px !important;
  background: linear-gradient(135deg, #4d9a70, #2c6e54) !important;
}
.tool-card.tool-image-upscaler .upscale-shine {
  position: absolute !important;
  left: -18px !important;
  top: -15px !important;
  display: block !important;
  width: 24px !important;
  height: 96px !important;
  opacity: 0 !important;
  background: linear-gradient(90deg, transparent, rgba(255,255,255,.70), transparent) !important;
  transform: rotate(24deg) !important;
  transition: left .50s ease, opacity .22s ease !important;
}
.tool-card.tool-image-upscaler .upscale-pixel-grid {
  position: absolute !important;
  left: 0 !important;
  top: 25px !important;
  z-index: 3 !important;
  display: grid !important;
  grid-template-columns: repeat(3, 11px) !important;
  gap: 3px !important;
  width: 39px !important;
  padding: 5px !important;
  border: 1px solid rgba(211,247,255,.48) !important;
  border-radius: 8px !important;
  background: rgba(28,100,141,.87) !important;
  box-shadow:
    0 8px 17px rgba(10,62,91,.34),
    inset 0 1px 0 rgba(255,255,255,.16) !important;
  transform: rotate(-7deg) !important;
  transition: transform .36s cubic-bezier(.2,.85,.25,1), box-shadow .26s ease !important;
}
.tool-card.tool-image-upscaler .upscale-pixel-grid i {
  display: block !important;
  width: 11px !important;
  height: 11px !important;
  border-radius: 2px !important;
  background: #aee5f7 !important;
  box-shadow: inset 0 1px 0 rgba(255,255,255,.35) !important;
  transition: transform .34s ease, background .26s ease, opacity .26s ease !important;
}
.tool-card.tool-image-upscaler .upscale-pixel-grid i:nth-child(2n) { background: #70c7e7 !important; }
.tool-card.tool-image-upscaler .upscale-pixel-grid i:nth-child(3n) { background: #d6f498 !important; }
.tool-card.tool-image-upscaler .upscale-arrow {
  position: absolute !important;
  left: 42px !important;
  top: 42px !important;
  z-index: 5 !important;
  display: block !important;
  width: 29px !important;
  height: 16px !important;
  filter: drop-shadow(0 2px 3px rgba(12,80,100,.28)) !important;
  transform: rotate(-6deg) !important;
  transition: transform .34s cubic-bezier(.2,.85,.25,1), filter .26s ease !important;
}
.tool-card.tool-image-upscaler .upscale-arrow i {
  position: absolute !important;
  left: 0 !important;
  top: 6px !important;
  display: block !important;
  width: 21px !important;
  height: 4px !important;
  border-radius: 99px !important;
  background: #f7ffff !important;
}
.tool-card.tool-image-upscaler .upscale-arrow b {
  position: absolute !important;
  right: 0 !important;
  top: 2px !important;
  display: block !important;
  width: 12px !important;
  height: 12px !important;
  border-top: 4px solid #f7ffff !important;
  border-right: 4px solid #f7ffff !important;
  transform: rotate(45deg) !important;
}
.tool-card.tool-image-upscaler .upscale-badge {
  position: absolute !important;
  right: 0 !important;
  bottom: 0 !important;
  z-index: 6 !important;
  display: grid !important;
  place-items: center !important;
  width: 35px !important;
  height: 27px !important;
  border: 1px solid rgba(239,255,190,.79) !important;
  border-radius: 9px !important;
  color: #f9ffe8 !important;
  background: linear-gradient(145deg, #92c94d, #4d9b55) !important;
  box-shadow:
    0 8px 15px rgba(39,111,51,.38),
    inset 0 1px 0 rgba(255,255,255,.32) !important;
  font: 900 13px/1 Arial, sans-serif !important;
  letter-spacing: -.4px !important;
  transform: rotate(7deg) !important;
  transition: transform .34s cubic-bezier(.2,.9,.25,1), box-shadow .26s ease !important;
}
@media (hover: hover) and (pointer: fine) {
  .tool-card.tool-image-upscaler:hover .tool-preview-image-upscaler {
    transform: translateY(-8px) scale(1.02) !important;
  }
  .tool-card.tool-image-upscaler:hover .upscale-image-card {
    transform: translate(5px, -10px) rotate(7deg) scale(1.07) !important;
    box-shadow:
      0 19px 30px rgba(16,93,124,.47),
      0 0 17px rgba(129,229,255,.23),
      inset 0 1px 0 rgba(255,255,255,.64) !important;
  }
  .tool-card.tool-image-upscaler:hover .upscale-pixel-grid {
    transform: translate(-4px, -11px) rotate(-13deg) scale(1.04) !important;
    box-shadow:
      0 15px 24px rgba(9,72,105,.45),
      0 0 13px rgba(125,226,255,.26),
      inset 0 1px 0 rgba(255,255,255,.18) !important;
  }
  .tool-card.tool-image-upscaler:hover .upscale-pixel-grid i {
    transform: scale(.73) !important;
    background: #e3f8ba !important;
  }
  .tool-card.tool-image-upscaler:hover .upscale-arrow {
    transform: translate(8px, -9px) rotate(-6deg) scale(1.10) !important;
    filter: drop-shadow(0 0 7px rgba(236,255,255,.82)) !important;
  }
  .tool-card.tool-image-upscaler:hover .upscale-badge {
    transform: translate(4px, -11px) rotate(12deg) scale(1.17) !important;
    box-shadow:
      0 13px 21px rgba(39,111,51,.47),
      0 0 12px rgba(194,249,101,.34),
      inset 0 1px 0 rgba(255,255,255,.42) !important;
  }
  .tool-card.tool-image-upscaler:hover .upscale-shine {
    left: 92px !important;
    opacity: .92 !important;
  }
}
@media (max-width: 640px) {
  .tool-card.tool-image-upscaler .tool-preview-image-upscaler {
    right: 6px !important;
    bottom: 6px !important;
    transform: scale(.84) !important;
    transform-origin: right bottom !important;
  }
}
@media (prefers-reduced-motion: reduce) {
  .tool-card.tool-image-upscaler .tool-preview-image-upscaler,
  .tool-card.tool-image-upscaler .tool-preview-image-upscaler * {
    transition: none !important;
  }
}
/* IMAGE-UPSCALER-PREVIEW-END */
/* PDF-SPLITTER-RED-FIX-START */
/*
  Makes the main Split PDF document use the same intended PDF-red family
  as the red PDF Merger document, without changing any other card.
*/
.tool-card.tool-split-pdf .pdf-split-main-page {
  border-color: rgba(255, 225, 225, .78) !important;
  background: linear-gradient(145deg, #ff5b5f 0%, #e23845 52%, #a51e35 100%) !important;
  box-shadow:
    0 11px 21px rgba(116, 37, 50, .38),
    inset 0 1px 0 rgba(255,255,255,.43) !important;
}
@media (hover: hover) and (pointer: fine) {
  .tool-card.tool-split-pdf:hover .pdf-split-main-page {
    border-color: rgba(255, 225, 225, .78) !important;
    background: linear-gradient(145deg, #ff5b5f 0%, #e23845 52%, #a51e35 100%) !important;
    box-shadow:
      0 18px 30px rgba(116,37,50,.49),
      0 0 16px rgba(255,91,95,.23),
      inset 0 1px 0 rgba(255,255,255,.48) !important;
  }
}
/* PDF-SPLITTER-RED-FIX-END */
/* PDF-SPLITTER-FINAL-STYLE-START */
.tool-card.tool-split-pdf .tool-preview-pdf-splitter {
  position: absolute !important;
  right: 15px !important;
  bottom: 14px !important;
  z-index: 6 !important;
  display: block !important;
  width: 137px !important;
  height: 76px !important;
  overflow: visible !important;
  pointer-events: none !important;
  transform-origin: right bottom !important;
  transition: transform .25s ease !important;
}
.tool-card.tool-split-pdf .pdf-split-main-page {
  position: absolute !important;
  left: 7px !important;
  bottom: 3px !important;
  display: block !important;
  width: 49px !important;
  height: 62px !important;
  overflow: hidden !important;
  border: 1px solid rgba(255,225,225,.78) !important;
  border-radius: 8px !important;
  background: linear-gradient(145deg, #ff5b5f 0%, #e23845 52%, #a51e35 100%) !important;
  box-shadow:
    0 8px 17px rgba(105,25,42,.42),
    inset 0 1px 0 rgba(255,255,255,.36) !important;
  transform: rotate(-8deg) !important;
  transition: transform .32s cubic-bezier(.2,.85,.25,1), box-shadow .25s ease !important;
}
.tool-card.tool-split-pdf .pdf-split-fold {
  position: absolute !important;
  right: 0 !important;
  top: 0 !important;
  display: block !important;
  width: 15px !important;
  height: 15px !important;
  background: linear-gradient(135deg, rgba(255,255,255,.72) 0 49%, transparent 50%) !important;
}
.tool-card.tool-split-pdf .pdf-split-label {
  position: absolute !important;
  left: 7px !important;
  top: 14px !important;
  display: block !important;
  color: #fff !important;
  font: 900 11px/1 Arial, sans-serif !important;
  letter-spacing: .15px !important;
}
.tool-card.tool-split-pdf .pdf-split-lines {
  position: absolute !important;
  left: 8px !important;
  bottom: 11px !important;
  display: grid !important;
  gap: 4px !important;
  width: 29px !important;
}
.tool-card.tool-split-pdf .pdf-split-lines i {
  display: block !important;
  width: 29px !important;
  height: 3px !important;
  border-radius: 99px !important;
  background: rgba(255,255,255,.62) !important;
}
.tool-card.tool-split-pdf .pdf-split-lines i:nth-child(2) {
  width: 22px !important;
}
.tool-card.tool-split-pdf .pdf-split-lines i:nth-child(3) {
  width: 15px !important;
}
.tool-card.tool-split-pdf .pdf-split-cutline {
  display: none !important;
}
.tool-card.tool-split-pdf .pdf-split-piece {
  position: absolute !important;
  z-index: 4 !important;
  display: grid !important;
  place-items: center !important;
  width: 31px !important;
  height: 41px !important;
  overflow: hidden !important;
  border: 1px solid rgba(230,243,255,.78) !important;
  border-radius: 7px !important;
  color: #f8fbff !important;
  background: linear-gradient(145deg, #668be3 0%, #415cb6 100%) !important;
  box-shadow:
    0 7px 14px rgba(31,52,125,.38),
    inset 0 1px 0 rgba(255,255,255,.32) !important;
  font: 900 12px/1 Arial, sans-serif !important;
  transition: transform .32s cubic-bezier(.2,.85,.25,1), box-shadow .25s ease !important;
}
.tool-card.tool-split-pdf .pdf-split-piece::before {
  content: "" !important;
  position: absolute !important;
  right: 0 !important;
  top: 0 !important;
  display: block !important;
  width: 9px !important;
  height: 9px !important;
  background: linear-gradient(135deg, rgba(255,255,255,.66) 0 49%, transparent 50%) !important;
}
.tool-card.tool-split-pdf .pdf-split-piece-one {
  left: 79px !important;
  bottom: 17px !important;
  transform: rotate(7deg) !important;
}
.tool-card.tool-split-pdf .pdf-split-piece-two {
  left: 104px !important;
  bottom: 6px !important;
  color: #f4fffb !important;
  background: linear-gradient(145deg, #55bca8 0%, #28756f 100%) !important;
  box-shadow:
    0 7px 14px rgba(20,92,82,.38),
    inset 0 1px 0 rgba(255,255,255,.32) !important;
  transform: rotate(13deg) !important;
}
.tool-card.tool-split-pdf .pdf-split-scissors {
  display: none !important;
}
.tool-card.tool-split-pdf::after {
  content: "→" !important;
  position: absolute !important;
  right: 76px !important;
  bottom: 38px !important;
  z-index: 7 !important;
  color: #faf7ff !important;
  font: 900 25px/1 Arial, sans-serif !important;
  text-shadow: 0 3px 8px rgba(17,12,43,.55) !important;
  pointer-events: none !important;
  transition: transform .30s ease, color .25s ease !important;
}
@media (hover: hover) and (pointer: fine) {
  .tool-card.tool-split-pdf:hover .tool-preview-pdf-splitter {
    transform: translateY(-7px) scale(1.03) !important;
  }
  .tool-card.tool-split-pdf:hover .pdf-split-main-page {
    transform: translate(-3px, -7px) rotate(-13deg) scale(1.05) !important;
    box-shadow:
      0 15px 25px rgba(105,25,42,.54),
      0 0 13px rgba(255,91,95,.26),
      inset 0 1px 0 rgba(255,255,255,.42) !important;
  }
  .tool-card.tool-split-pdf:hover .pdf-split-piece-one {
    transform: translate(4px, -10px) rotate(12deg) scale(1.08) !important;
  }
  .tool-card.tool-split-pdf:hover .pdf-split-piece-two {
    transform: translate(11px, -3px) rotate(20deg) scale(1.08) !important;
  }
  .tool-card.tool-split-pdf:hover::after {
    color: #fff1a8 !important;
    transform: translate(5px, -7px) scale(1.12) !important;
  }
}
@media (max-width: 640px) {
  .tool-card.tool-split-pdf .tool-preview-pdf-splitter {
    right: 6px !important;
    bottom: 7px !important;
    transform: scale(.84) !important;
    transform-origin: right bottom !important;
  }
}
@media (prefers-reduced-motion: reduce) {
  .tool-card.tool-split-pdf .tool-preview-pdf-splitter,
  .tool-card.tool-split-pdf .tool-preview-pdf-splitter *,
  .tool-card.tool-split-pdf::after {
    transition: none !important;
  }
}
/* PDF-SPLITTER-FINAL-STYLE-END */
/* AUDIO-CUTTER-PREVIEW-START */
.tool-card.tool-audio-cutter .tool-preview-audio-cutter {
  position: absolute !important;
  right: 14px !important;
  bottom: 15px !important;
  z-index: 5 !important;
  display: block !important;
  width: 142px !important;
  height: 78px !important;
  overflow: visible !important;
  pointer-events: none !important;
  transform-origin: right bottom !important;
  transition: transform .25s ease !important;
}
.tool-card.tool-audio-cutter .audio-cut-track {
  position: absolute !important;
  left: 3px !important;
  top: 21px !important;
  display: block !important;
  width: 112px !important;
  height: 42px !important;
  overflow: hidden !important;
  border: 1px solid rgba(210,194,255,.54) !important;
  border-radius: 11px !important;
  background:
    radial-gradient(circle at 20% 12%, rgba(163,119,255,.21), transparent 35%),
    linear-gradient(145deg, #25204c 0%, #1a193d 58%, #12142e 100%) !important;
  box-shadow:
    0 9px 18px rgba(15,8,58,.46),
    inset 0 1px 0 rgba(255,255,255,.11) !important;
  transform: rotate(-4deg) !important;
  transition: transform .34s cubic-bezier(.2,.85,.25,1), box-shadow .25s ease !important;
}
.tool-card.tool-audio-cutter .audio-cut-wave {
  position: absolute !important;
  left: 9px !important;
  right: 9px !important;
  top: 8px !important;
  bottom: 8px !important;
  z-index: 1 !important;
  display: flex !important;
  align-items: center !important;
  justify-content: space-between !important;
}
.tool-card.tool-audio-cutter .audio-cut-wave i {
  display: block !important;
  width: 4px !important;
  height: 13px !important;
  border-radius: 99px !important;
  background: linear-gradient(180deg, #be9dff, #7358db) !important;
  box-shadow: 0 0 6px rgba(162,120,255,.42) !important;
}
.tool-card.tool-audio-cutter .audio-cut-wave i:nth-child(2)  { height: 23px !important; }
.tool-card.tool-audio-cutter .audio-cut-wave i:nth-child(3)  { height: 17px !important; }
.tool-card.tool-audio-cutter .audio-cut-wave i:nth-child(4)  { height: 29px !important; }
.tool-card.tool-audio-cutter .audio-cut-wave i:nth-child(5)  { height: 20px !important; }
.tool-card.tool-audio-cutter .audio-cut-wave i:nth-child(6)  { height: 33px !important; }
.tool-card.tool-audio-cutter .audio-cut-wave i:nth-child(7)  { height: 18px !important; }
.tool-card.tool-audio-cutter .audio-cut-wave i:nth-child(8)  { height: 27px !important; }
.tool-card.tool-audio-cutter .audio-cut-wave i:nth-child(9)  { height: 15px !important; }
.tool-card.tool-audio-cutter .audio-cut-wave i:nth-child(10) { height: 25px !important; }
.tool-card.tool-audio-cutter .audio-cut-wave i:nth-child(11) { height: 19px !important; }
.tool-card.tool-audio-cutter .audio-cut-wave i:nth-child(12) { height: 30px !important; }
.tool-card.tool-audio-cutter .audio-cut-wave i:nth-child(13) { height: 16px !important; }
.tool-card.tool-audio-cutter .audio-cut-wave i:nth-child(14) { height: 22px !important; }
.tool-card.tool-audio-cutter .audio-cut-selection {
  position: absolute !important;
  left: 34px !important;
  top: 4px !important;
  z-index: 2 !important;
  display: block !important;
  width: 42px !important;
  height: 32px !important;
  border: 1px solid rgba(238,224,255,.63) !important;
  border-radius: 6px !important;
  background: linear-gradient(90deg, rgba(170,116,255,.30), rgba(100,225,225,.22)) !important;
  box-shadow:
    inset 0 0 11px rgba(207,165,255,.22),
    0 0 9px rgba(173,126,255,.17) !important;
  transition: left .36s cubic-bezier(.2,.85,.25,1), width .36s ease, box-shadow .25s ease !important;
}
.tool-card.tool-audio-cutter .audio-cut-handle {
  position: absolute !important;
  top: 3px !important;
  z-index: 4 !important;
  display: block !important;
  width: 4px !important;
  height: 35px !important;
  border-radius: 99px !important;
  background: #f3dcff !important;
  box-shadow: 0 0 8px rgba(233,197,255,.80) !important;
  transition: left .36s cubic-bezier(.2,.85,.25,1), box-shadow .25s ease !important;
}
.tool-card.tool-audio-cutter .audio-cut-handle::before,
.tool-card.tool-audio-cutter .audio-cut-handle::after {
  content: "" !important;
  position: absolute !important;
  left: -3px !important;
  display: block !important;
  width: 10px !important;
  height: 4px !important;
  border-radius: 99px !important;
  background: #f3dcff !important;
}
.tool-card.tool-audio-cutter .audio-cut-handle::before { top: 0 !important; }
.tool-card.tool-audio-cutter .audio-cut-handle::after { bottom: 0 !important; }
.tool-card.tool-audio-cutter .audio-cut-handle-left { left: 33px !important; }
.tool-card.tool-audio-cutter .audio-cut-handle-right { left: 75px !important; }
.tool-card.tool-audio-cutter .audio-cut-scissors {
  position: absolute !important;
  right: 0 !important;
  top: 2px !important;
  z-index: 7 !important;
  display: block !important;
  width: 35px !important;
  height: 35px !important;
  transform: rotate(-25deg) !important;
  transform-origin: 15px 14px !important;
  transition: transform .35s cubic-bezier(.2,.9,.25,1), filter .25s ease !important;
}
.tool-card.tool-audio-cutter .audio-cut-scissors b {
  position: absolute !important;
  left: 14px !important;
  top: 13px !important;
  display: block !important;
  width: 7px !important;
  height: 7px !important;
  border-radius: 50% !important;
  background: #ffd8ed !important;
  box-shadow: 0 1px 3px rgba(65,22,83,.45) !important;
}
.tool-card.tool-audio-cutter .audio-cut-ring {
  position: absolute !important;
  left: 1px !important;
  display: block !important;
  width: 12px !important;
  height: 12px !important;
  border: 3px solid #ffb6e5 !important;
  border-radius: 50% !important;
  box-shadow: 0 0 6px rgba(255,150,217,.44) !important;
}
.tool-card.tool-audio-cutter .audio-cut-ring-one { top: 2px !important; }
.tool-card.tool-audio-cutter .audio-cut-ring-two { bottom: 0 !important; }
.tool-card.tool-audio-cutter .audio-cut-blade {
  position: absolute !important;
  left: 17px !important;
  display: block !important;
  width: 21px !important;
  height: 4px !important;
  border-radius: 99px !important;
  background: linear-gradient(90deg, #fff3fb, #9ab5e8) !important;
  box-shadow: 0 1px 3px rgba(27,35,91,.43) !important;
  transform-origin: left center !important;
  transition: transform .30s ease !important;
}
.tool-card.tool-audio-cutter .audio-cut-blade-one {
  top: 12px !important;
  transform: rotate(-25deg) !important;
}
.tool-card.tool-audio-cutter .audio-cut-blade-two {
  top: 17px !important;
  transform: rotate(25deg) !important;
}
@media (hover: hover) and (pointer: fine) {
  .tool-card.tool-audio-cutter:hover .tool-preview-audio-cutter {
    transform: translateY(-7px) scale(1.02) !important;
  }
  .tool-card.tool-audio-cutter:hover .audio-cut-track {
    transform: translate(-4px, -8px) rotate(-8deg) !important;
    box-shadow:
      0 17px 28px rgba(15,8,58,.58),
      0 0 16px rgba(160,116,255,.20),
      inset 0 1px 0 rgba(255,255,255,.15) !important;
  }
  .tool-card.tool-audio-cutter:hover .audio-cut-selection {
    left: 40px !important;
    width: 33px !important;
    box-shadow:
      inset 0 0 13px rgba(207,165,255,.30),
      0 0 12px rgba(183,139,255,.36) !important;
  }
  .tool-card.tool-audio-cutter:hover .audio-cut-handle-left {
    left: 39px !important;
  }
  .tool-card.tool-audio-cutter:hover .audio-cut-handle-right {
    left: 72px !important;
  }
  .tool-card.tool-audio-cutter:hover .audio-cut-scissors {
    transform: translate(3px, -9px) rotate(-43deg) scale(1.12) !important;
    filter: drop-shadow(0 0 7px rgba(255,174,226,.67)) !important;
  }
  .tool-card.tool-audio-cutter:hover .audio-cut-blade-one {
    transform: rotate(-34deg) !important;
  }
  .tool-card.tool-audio-cutter:hover .audio-cut-blade-two {
    transform: rotate(34deg) !important;
  }
}
@media (max-width: 640px) {
  .tool-card.tool-audio-cutter .tool-preview-audio-cutter {
    right: 6px !important;
    bottom: 6px !important;
    transform: scale(.84) !important;
    transform-origin: right bottom !important;
  }
}
@media (prefers-reduced-motion: reduce) {
  .tool-card.tool-audio-cutter .tool-preview-audio-cutter,
  .tool-card.tool-audio-cutter .tool-preview-audio-cutter * {
    transition: none !important;
  }
}
/* AUDIO-CUTTER-PREVIEW-END */
/* FAVICON-GENERATOR-PREVIEW-START */
.tool-card.tool-favicon-generator .tool-preview-favicon-generator {
  position: absolute !important;
  right: 13px !important;
  bottom: 13px !important;
  z-index: 5 !important;
  display: block !important;
  width: 141px !important;
  height: 83px !important;
  overflow: visible !important;
  pointer-events: none !important;
  transform-origin: right bottom !important;
  transition: transform .25s ease !important;
}
.tool-card.tool-favicon-generator .favicon-main-icon {
  position: absolute !important;
  left: 10px !important;
  bottom: 6px !important;
  z-index: 2 !important;
  display: grid !important;
  place-items: center !important;
  width: 59px !important;
  height: 59px !important;
  overflow: hidden !important;
  border: 2px solid rgba(225,213,255,.64) !important;
  border-radius: 17px !important;
  color: #fff19b !important;
  background:
    radial-gradient(circle at 27% 19%, rgba(255,255,255,.31), transparent 24%),
    linear-gradient(145deg, #9b6df5 0%, #6d45d0 58%, #402997 100%) !important;
  box-shadow:
    0 11px 22px rgba(60,33,143,.45),
    inset 0 1px 0 rgba(255,255,255,.34) !important;
  transform: rotate(-7deg) !important;
  transition: transform .35s cubic-bezier(.2,.85,.25,1), box-shadow .25s ease !important;
}
.tool-card.tool-favicon-generator .favicon-star {
  position: relative !important;
  z-index: 2 !important;
  color: #ffe76d !important;
  font: 900 34px/1 Arial, sans-serif !important;
  text-shadow:
    0 2px 0 #bb8325,
    0 5px 8px rgba(49,25,104,.46) !important;
  transform: translateY(-1px) !important;
}
.tool-card.tool-favicon-generator .favicon-main-shine {
  position: absolute !important;
  left: -18px !important;
  top: -12px !important;
  display: block !important;
  width: 18px !important;
  height: 86px !important;
  opacity: .36 !important;
  background: linear-gradient(90deg, transparent, rgba(255,255,255,.78), transparent) !important;
  transform: rotate(27deg) !important;
  transition: left .48s ease, opacity .25s ease !important;
}
.tool-card.tool-favicon-generator .favicon-mini {
  position: absolute !important;
  z-index: 4 !important;
  display: grid !important;
  place-items: center !important;
  overflow: visible !important;
  border: 1px solid rgba(235,228,255,.68) !important;
  border-radius: 8px !important;
  color: #fff19b !important;
  background: linear-gradient(145deg, #8e62e8, #4e319f) !important;
  box-shadow:
    0 7px 14px rgba(50,29,123,.38),
    inset 0 1px 0 rgba(255,255,255,.29) !important;
  transition: transform .35s cubic-bezier(.2,.9,.25,1), box-shadow .25s ease !important;
}
.tool-card.tool-favicon-generator .favicon-mini span {
  display: block !important;
  font: 900 13px/1 Arial, sans-serif !important;
  text-shadow: 0 1px 0 #af7b1d !important;
}
.tool-card.tool-favicon-generator .favicon-mini b {
  position: absolute !important;
  right: -7px !important;
  bottom: -8px !important;
  display: grid !important;
  place-items: center !important;
  min-width: 18px !important;
  height: 13px !important;
  padding: 0 2px !important;
  border: 1px solid rgba(245,250,255,.62) !important;
  border-radius: 4px !important;
  color: #f8fbff !important;
  background: #2a315f !important;
  box-shadow: 0 3px 6px rgba(9,11,40,.33) !important;
  font: 900 7px/1 Arial, sans-serif !important;
}
.tool-card.tool-favicon-generator .favicon-mini-16 {
  left: 70px !important;
  bottom: 15px !important;
  width: 21px !important;
  height: 21px !important;
  transform: rotate(8deg) !important;
}
.tool-card.tool-favicon-generator .favicon-mini-16 span {
  font-size: 10px !important;
}
.tool-card.tool-favicon-generator .favicon-mini-32 {
  left: 95px !important;
  bottom: 29px !important;
  width: 29px !important;
  height: 29px !important;
  transform: rotate(-7deg) !important;
}
.tool-card.tool-favicon-generator .favicon-mini-64 {
  right: 0 !important;
  bottom: 5px !important;
  width: 36px !important;
  height: 36px !important;
  border-radius: 10px !important;
  background: linear-gradient(145deg, #57b9d6, #3566ad) !important;
  transform: rotate(9deg) !important;
}
.tool-card.tool-favicon-generator .favicon-mini-64 span {
  font-size: 18px !important;
}
.tool-card.tool-favicon-generator .favicon-spark {
  position: absolute !important;
  left: 57px !important;
  top: 0 !important;
  z-index: 7 !important;
  display: block !important;
  width: 20px !important;
  height: 20px !important;
  transform: rotate(18deg) !important;
  transition: transform .35s cubic-bezier(.2,.9,.25,1), filter .25s ease !important;
}
.tool-card.tool-favicon-generator .favicon-spark i {
  position: absolute !important;
  left: 9px !important;
  top: 9px !important;
  display: block !important;
  width: 3px !important;
  height: 3px !important;
  border-radius: 50% !important;
  background: #fff39a !important;
  box-shadow: 0 0 8px rgba(255,239,113,.88) !important;
  transform-origin: center !important;
}
.tool-card.tool-favicon-generator .favicon-spark i:nth-child(1) {
  transform: scaleY(5) !important;
}
.tool-card.tool-favicon-generator .favicon-spark i:nth-child(2) {
  transform: scaleX(5) !important;
}
.tool-card.tool-favicon-generator .favicon-spark i:nth-child(3) {
  transform: rotate(45deg) scaleX(3.5) !important;
}
@media (hover: hover) and (pointer: fine) {
  .tool-card.tool-favicon-generator:hover .tool-preview-favicon-generator {
    transform: translateY(-7px) scale(1.03) !important;
  }
  .tool-card.tool-favicon-generator:hover .favicon-main-icon {
    transform: translate(-4px, -8px) rotate(-12deg) scale(1.06) !important;
    box-shadow:
      0 18px 29px rgba(60,33,143,.58),
      0 0 17px rgba(154,105,247,.27),
      inset 0 1px 0 rgba(255,255,255,.40) !important;
  }
  .tool-card.tool-favicon-generator:hover .favicon-main-shine {
    left: 67px !important;
    opacity: .88 !important;
  }
  .tool-card.tool-favicon-generator:hover .favicon-mini-16 {
    transform: translate(1px, -12px) rotate(16deg) scale(1.13) !important;
  }
  .tool-card.tool-favicon-generator:hover .favicon-mini-32 {
    transform: translate(4px, -17px) rotate(-15deg) scale(1.12) !important;
  }
  .tool-card.tool-favicon-generator:hover .favicon-mini-64 {
    transform: translate(10px, -7px) rotate(18deg) scale(1.11) !important;
  }
  .tool-card.tool-favicon-generator:hover .favicon-spark {
    transform: translate(3px, -7px) rotate(53deg) scale(1.23) !important;
    filter: drop-shadow(0 0 8px rgba(255,240,113,.80)) !important;
  }
}
@media (max-width: 640px) {
  .tool-card.tool-favicon-generator .tool-preview-favicon-generator {
    right: 6px !important;
    bottom: 6px !important;
    transform: scale(.84) !important;
    transform-origin: right bottom !important;
  }
}
@media (prefers-reduced-motion: reduce) {
  .tool-card.tool-favicon-generator .tool-preview-favicon-generator,
  .tool-card.tool-favicon-generator .tool-preview-favicon-generator * {
    transition: none !important;
  }
}
/* FAVICON-GENERATOR-PREVIEW-END */
/* WORD-COUNTER-PREVIEW-START */
.tool-card.tool-word-counter .tool-preview-word-counter {
  position: absolute !important;
  right: 13px !important;
  bottom: 13px !important;
  z-index: 5 !important;
  display: block !important;
  width: 143px !important;
  height: 84px !important;
  overflow: visible !important;
  pointer-events: none !important;
  transform-origin: right bottom !important;
  transition: transform .25s ease !important;
}
.tool-card.tool-word-counter .word-counter-paper {
  position: absolute !important;
  left: 4px !important;
  bottom: 5px !important;
  z-index: 2 !important;
  display: block !important;
  width: 62px !important;
  height: 68px !important;
  overflow: hidden !important;
  border: 1px solid rgba(224,238,255,.73) !important;
  border-radius: 10px !important;
  background:
    linear-gradient(145deg, rgba(255,255,255,.29), transparent 35%),
    linear-gradient(145deg, #5b83d9 0%, #3f58ac 58%, #283a7d 100%) !important;
  box-shadow:
    0 10px 20px rgba(32,48,122,.43),
    inset 0 1px 0 rgba(255,255,255,.38) !important;
  transform: rotate(-7deg) !important;
  transition: transform .35s cubic-bezier(.2,.85,.25,1), box-shadow .25s ease !important;
}
.tool-card.tool-word-counter .word-counter-fold {
  position: absolute !important;
  right: 0 !important;
  top: 0 !important;
  display: block !important;
  width: 18px !important;
  height: 18px !important;
  background: linear-gradient(135deg, rgba(255,255,255,.72) 0 49%, transparent 50%) !important;
  box-shadow: -2px 2px 4px rgba(24,36,93,.17) !important;
}
.tool-card.tool-word-counter .word-counter-lines {
  position: absolute !important;
  left: 11px !important;
  right: 11px !important;
  top: 20px !important;
  display: grid !important;
  gap: 6px !important;
}
.tool-card.tool-word-counter .word-counter-lines i {
  display: block !important;
  height: 4px !important;
  border-radius: 99px !important;
  background: rgba(240,248,255,.76) !important;
  box-shadow: 0 1px 1px rgba(29,49,122,.16) !important;
}
.tool-card.tool-word-counter .word-counter-lines i:nth-child(2) { width: 80% !important; }
.tool-card.tool-word-counter .word-counter-lines i:nth-child(3) { width: 92% !important; }
.tool-card.tool-word-counter .word-counter-lines i:nth-child(4) { width: 62% !important; }
.tool-card.tool-word-counter .word-counter-total {
  position: absolute !important;
  right: 1px !important;
  bottom: 10px !important;
  z-index: 5 !important;
  display: grid !important;
  place-items: center !important;
  width: 80px !important;
  height: 48px !important;
  border: 1px solid rgba(239,233,255,.69) !important;
  border-radius: 12px !important;
  color: #fff !important;
  background:
    radial-gradient(circle at 25% 18%, rgba(255,255,255,.22), transparent 29%),
    linear-gradient(145deg, #a46ae5 0%, #7044bd 57%, #47308e 100%) !important;
  box-shadow:
    0 10px 20px rgba(63,30,125,.44),
    inset 0 1px 0 rgba(255,255,255,.35) !important;
  transform: rotate(5deg) !important;
  transition: transform .35s cubic-bezier(.2,.9,.25,1), box-shadow .25s ease !important;
}
.tool-card.tool-word-counter .word-counter-total b {
  display: block !important;
  margin-top: 4px !important;
  font: 900 19px/1 Arial, sans-serif !important;
  letter-spacing: -.7px !important;
  text-shadow: 0 2px 4px rgba(38,16,90,.43) !important;
}
.tool-card.tool-word-counter .word-counter-total small {
  display: block !important;
  margin-top: -2px !important;
  color: rgba(249,245,255,.88) !important;
  font: 900 7px/1 Arial, sans-serif !important;
  letter-spacing: 1px !important;
}
.tool-card.tool-word-counter .word-counter-check {
  position: absolute !important;
  right: 1px !important;
  top: 8px !important;
  z-index: 7 !important;
  display: grid !important;
  place-items: center !important;
  width: 23px !important;
  height: 23px !important;
  border: 1px solid rgba(229,255,222,.75) !important;
  border-radius: 50% !important;
  color: #efffe5 !important;
  background: linear-gradient(145deg, #76c77c, #3f9161) !important;
  box-shadow:
    0 6px 12px rgba(27,99,58,.37),
    inset 0 1px 0 rgba(255,255,255,.34) !important;
  font: 900 15px/1 Arial, sans-serif !important;
  transform: rotate(10deg) !important;
  transition: transform .35s cubic-bezier(.2,.9,.25,1), box-shadow .25s ease !important;
}
@media (hover: hover) and (pointer: fine) {
  .tool-card.tool-word-counter:hover .tool-preview-word-counter {
    transform: translateY(-7px) scale(1.03) !important;
  }
  .tool-card.tool-word-counter:hover .word-counter-paper {
    transform: translate(-5px, -10px) rotate(-12deg) scale(1.05) !important;
    box-shadow:
      0 17px 28px rgba(32,48,122,.56),
      0 0 15px rgba(104,145,243,.23),
      inset 0 1px 0 rgba(255,255,255,.43) !important;
  }
  .tool-card.tool-word-counter:hover .word-counter-total {
    transform: translate(4px, -12px) rotate(9deg) scale(1.10) !important;
    box-shadow:
      0 15px 25px rgba(63,30,125,.56),
      0 0 14px rgba(177,115,255,.29),
      inset 0 1px 0 rgba(255,255,255,.42) !important;
  }
  .tool-card.tool-word-counter:hover .word-counter-check {
    transform: translate(4px, -8px) rotate(22deg) scale(1.12) !important;
    box-shadow:
      0 10px 17px rgba(27,99,58,.45),
      0 0 10px rgba(150,244,143,.30),
      inset 0 1px 0 rgba(255,255,255,.38) !important;
  }
}
@media (max-width: 640px) {
  .tool-card.tool-word-counter .tool-preview-word-counter {
    right: 6px !important;
    bottom: 6px !important;
    transform: scale(.84) !important;
    transform-origin: right bottom !important;
  }
}
@media (prefers-reduced-motion: reduce) {
  .tool-card.tool-word-counter .tool-preview-word-counter,
  .tool-card.tool-word-counter .tool-preview-word-counter * {
    transition: none !important;
  }
}
/* WORD-COUNTER-PREVIEW-END */
/* IMAGE-CROPPER-PREVIEW-START */
.tool-card.tool-image-cropper .tool-preview-image-cropper {
  position: absolute !important;
  right: 12px !important;
  bottom: 12px !important;
  z-index: 5 !important;
  display: block !important;
  width: 143px !important;
  height: 89px !important;
  overflow: visible !important;
  pointer-events: none !important;
  transform-origin: right bottom !important;
  transition: transform .25s ease !important;
}
.tool-card.tool-image-cropper .cropper-photo {
  position: absolute !important;
  right: 7px !important;
  top: 8px !important;
  display: block !important;
  width: 99px !important;
  height: 67px !important;
  overflow: hidden !important;
  border: 2px solid rgba(224,249,255,.74) !important;
  border-radius: 11px !important;
  background: linear-gradient(150deg, #64cbf1 0%, #9edff9 49%, #dff4dc 50%, #a8dc91 100%) !important;
  box-shadow:
    0 10px 21px rgba(17,91,123,.36),
    inset 0 1px 0 rgba(255,255,255,.54) !important;
  transform: rotate(4deg) !important;
  transition: transform .36s cubic-bezier(.2,.85,.25,1), box-shadow .26s ease !important;
}
.tool-card.tool-image-cropper .cropper-sky {
  position: absolute !important;
  inset: 0 0 38% 0 !important;
  display: block !important;
  background:
    radial-gradient(circle at 75% 29%, rgba(255,251,180,.92) 0 7%, transparent 8%),
    linear-gradient(180deg, rgba(96,203,245,.32), rgba(255,255,255,.03)) !important;
}
.tool-card.tool-image-cropper .cropper-sun {
  position: absolute !important;
  right: 14px !important;
  top: 10px !important;
  display: block !important;
  width: 11px !important;
  height: 11px !important;
  border-radius: 50% !important;
  background: #fff4a0 !important;
  box-shadow: 0 0 10px rgba(255,241,133,.84) !important;
}
.tool-card.tool-image-cropper .cropper-mountain {
  position: absolute !important;
  bottom: -15px !important;
  display: block !important;
  width: 67px !important;
  height: 56px !important;
  transform: rotate(45deg) !important;
}
.tool-card.tool-image-cropper .cropper-mountain-back {
  left: 0 !important;
  background: linear-gradient(135deg, #4f879a, #2c6379) !important;
}
.tool-card.tool-image-cropper .cropper-mountain-front {
  right: -8px !important;
  background: linear-gradient(135deg, #4e9b70, #2b7154) !important;
}
.tool-card.tool-image-cropper .cropper-dim {
  position: absolute !important;
  z-index: 3 !important;
  display: block !important;
  background: rgba(11,28,51,.34) !important;
  transition: opacity .24s ease !important;
}
.tool-card.tool-image-cropper .cropper-dim-top {
  left: 0 !important;
  right: 0 !important;
  top: 0 !important;
  height: 12px !important;
}
.tool-card.tool-image-cropper .cropper-dim-bottom {
  left: 0 !important;
  right: 0 !important;
  bottom: 0 !important;
  height: 13px !important;
}
.tool-card.tool-image-cropper .cropper-dim-left {
  left: 0 !important;
  top: 12px !important;
  bottom: 13px !important;
  width: 15px !important;
}
.tool-card.tool-image-cropper .cropper-dim-right {
  right: 0 !important;
  top: 12px !important;
  bottom: 13px !important;
  width: 16px !important;
}
.tool-card.tool-image-cropper .cropper-selection {
  position: absolute !important;
  left: 15px !important;
  top: 12px !important;
  z-index: 5 !important;
  display: block !important;
  width: 68px !important;
  height: 41px !important;
  border: 2px solid #f5ffd0 !important;
  border-radius: 3px !important;
  box-shadow:
    0 0 9px rgba(240,255,174,.75),
    inset 0 0 10px rgba(255,255,255,.11) !important;
  transition: left .36s cubic-bezier(.2,.85,.25,1), top .36s ease, width .36s ease, height .36s ease, box-shadow .25s ease !important;
}
.tool-card.tool-image-cropper .cropper-grid {
  position: absolute !important;
  z-index: 1 !important;
  display: block !important;
  opacity: .58 !important;
  background: rgba(246,255,214,.86) !important;
}
.tool-card.tool-image-cropper .cropper-grid-v-one {
  left: 33.33% !important;
  top: 0 !important;
  bottom: 0 !important;
  width: 1px !important;
}
.tool-card.tool-image-cropper .cropper-grid-v-two {
  left: 66.66% !important;
  top: 0 !important;
  bottom: 0 !important;
  width: 1px !important;
}
.tool-card.tool-image-cropper .cropper-grid-h-one {
  left: 0 !important;
  right: 0 !important;
  top: 33.33% !important;
  height: 1px !important;
}
.tool-card.tool-image-cropper .cropper-grid-h-two {
  left: 0 !important;
  right: 0 !important;
  top: 66.66% !important;
  height: 1px !important;
}
.tool-card.tool-image-cropper .cropper-handle {
  position: absolute !important;
  z-index: 3 !important;
  display: block !important;
  width: 7px !important;
  height: 7px !important;
  border: 1px solid rgba(76,109,65,.77) !important;
  border-radius: 2px !important;
  background: #f7ffd0 !important;
  box-shadow: 0 0 5px rgba(242,255,177,.84) !important;
}
.tool-card.tool-image-cropper .cropper-handle-tl { left: -5px !important; top: -5px !important; }
.tool-card.tool-image-cropper .cropper-handle-tr { right: -5px !important; top: -5px !important; }
.tool-card.tool-image-cropper .cropper-handle-bl { left: -5px !important; bottom: -5px !important; }
.tool-card.tool-image-cropper .cropper-handle-br { right: -5px !important; bottom: -5px !important; }
.tool-card.tool-image-cropper .cropper-corner-mark {
  position: absolute !important;
  z-index: 7 !important;
  display: block !important;
  width: 15px !important;
  height: 15px !important;
  border-color: #f2ffb0 !important;
  filter: drop-shadow(0 0 5px rgba(238,255,170,.50)) !important;
  transition: transform .34s cubic-bezier(.2,.9,.25,1), filter .25s ease !important;
}
.tool-card.tool-image-cropper .cropper-corner-mark-a {
  left: 0 !important;
  bottom: 3px !important;
  border-left: 3px solid !important;
  border-bottom: 3px solid !important;
  border-radius: 0 0 0 4px !important;
}
.tool-card.tool-image-cropper .cropper-corner-mark-b {
  right: 0 !important;
  top: 0 !important;
  border-right: 3px solid !important;
  border-top: 3px solid !important;
  border-radius: 0 4px 0 0 !important;
}
@media (hover: hover) and (pointer: fine) {
  .tool-card.tool-image-cropper:hover .tool-preview-image-cropper {
    transform: translateY(-8px) scale(1.02) !important;
  }
  .tool-card.tool-image-cropper:hover .cropper-photo {
    transform: translate(3px, -10px) rotate(7deg) scale(1.06) !important;
    box-shadow:
      0 19px 30px rgba(16,93,124,.48),
      0 0 17px rgba(129,229,255,.22),
      inset 0 1px 0 rgba(255,255,255,.64) !important;
  }
  .tool-card.tool-image-cropper:hover .cropper-selection {
    left: 22px !important;
    top: 16px !important;
    width: 55px !important;
    height: 32px !important;
    box-shadow:
      0 0 12px rgba(240,255,174,.92),
      inset 0 0 12px rgba(255,255,255,.16) !important;
  }
  .tool-card.tool-image-cropper:hover .cropper-dim {
    opacity: .86 !important;
  }
  .tool-card.tool-image-cropper:hover .cropper-corner-mark-a {
    transform: translate(-4px, 6px) scale(1.12) !important;
    filter: drop-shadow(0 0 8px rgba(238,255,170,.84)) !important;
  }
  .tool-card.tool-image-cropper:hover .cropper-corner-mark-b {
    transform: translate(4px, -6px) scale(1.12) !important;
    filter: drop-shadow(0 0 8px rgba(238,255,170,.84)) !important;
  }
}
@media (max-width: 640px) {
  .tool-card.tool-image-cropper .tool-preview-image-cropper {
    right: 6px !important;
    bottom: 6px !important;
    transform: scale(.84) !important;
    transform-origin: right bottom !important;
  }
}
@media (prefers-reduced-motion: reduce) {
  .tool-card.tool-image-cropper .tool-preview-image-cropper,
  .tool-card.tool-image-cropper .tool-preview-image-cropper * {
    transition: none !important;
  }
}
/* IMAGE-CROPPER-PREVIEW-END */
/* HASHTAG-GENERATOR-PREVIEW-START */
.tool-card.tool-hashtag-generator .tool-preview-hashtag-generator {
  position: absolute !important;
  right: 13px !important;
  bottom: 13px !important;
  z-index: 5 !important;
  display: block !important;
  width: 144px !important;
  height: 85px !important;
  overflow: visible !important;
  pointer-events: none !important;
  transform-origin: right bottom !important;
  transition: transform .25s ease !important;
}
.tool-card.tool-hashtag-generator .hashtag-input {
  position: absolute !important;
  left: 3px !important;
  top: 9px !important;
  z-index: 2 !important;
  display: block !important;
  width: 104px !important;
  height: 43px !important;
  border: 1px solid rgba(221,211,255,.52) !important;
  border-radius: 12px !important;
  background:
    radial-gradient(circle at 16% 18%, rgba(193,148,255,.19), transparent 35%),
    linear-gradient(145deg, #30234f 0%, #211a40 54%, #15142e 100%) !important;
  box-shadow:
    0 10px 20px rgba(13,8,43,.43),
    inset 0 1px 0 rgba(255,255,255,.12) !important;
  transform: rotate(-5deg) !important;
  transition: transform .34s cubic-bezier(.2,.85,.25,1), box-shadow .26s ease !important;
}
.tool-card.tool-hashtag-generator .hashtag-symbol {
  position: absolute !important;
  left: 13px !important;
  top: 8px !important;
  display: block !important;
  color: #c09bff !important;
  font: 900 25px/1 Arial, sans-serif !important;
  text-shadow: 0 0 9px rgba(184,137,255,.50) !important;
}
.tool-card.tool-hashtag-generator .hashtag-input-line {
  position: absolute !important;
  left: 44px !important;
  top: 20px !important;
  display: block !important;
  width: 42px !important;
  height: 4px !important;
  border-radius: 99px !important;
  background: linear-gradient(90deg, rgba(224,212,255,.86), rgba(224,212,255,.28)) !important;
}
.tool-card.tool-hashtag-generator .hashtag-tag {
  position: absolute !important;
  z-index: 5 !important;
  display: grid !important;
  place-items: center !important;
  height: 24px !important;
  padding: 0 8px !important;
  border: 1px solid rgba(242,235,255,.61) !important;
  border-radius: 8px !important;
  color: #fbf8ff !important;
  box-shadow:
    0 7px 14px rgba(47,24,116,.41),
    inset 0 1px 0 rgba(255,255,255,.32) !important;
  font: 900 9px/1 Arial, sans-serif !important;
  letter-spacing: .05px !important;
  transition: transform .34s cubic-bezier(.2,.9,.25,1), box-shadow .26s ease !important;
}
.tool-card.tool-hashtag-generator .hashtag-tag-trend {
  left: 9px !important;
  bottom: 6px !important;
  background: linear-gradient(145deg, #8661df, #4c32a3) !important;
  transform: rotate(-9deg) !important;
}
.tool-card.tool-hashtag-generator .hashtag-tag-social {
  left: 61px !important;
  bottom: 11px !important;
  background: linear-gradient(145deg, #5cb9df, #3566ae) !important;
  transform: rotate(6deg) !important;
}
.tool-card.tool-hashtag-generator .hashtag-tag-viral {
  right: 0 !important;
  bottom: 1px !important;
  background: linear-gradient(145deg, #ec70b8, #b43c87) !important;
  transform: rotate(12deg) !important;
}
.tool-card.tool-hashtag-generator .hashtag-spark {
  position: absolute !important;
  right: 15px !important;
  top: 3px !important;
  z-index: 7 !important;
  display: block !important;
  width: 21px !important;
  height: 21px !important;
  transform: rotate(18deg) !important;
  transition: transform .34s cubic-bezier(.2,.9,.25,1), filter .26s ease !important;
}
.tool-card.tool-hashtag-generator .hashtag-spark i {
  position: absolute !important;
  left: 9px !important;
  top: 9px !important;
  display: block !important;
  width: 3px !important;
  height: 3px !important;
  border-radius: 50% !important;
  background: #fff09d !important;
  box-shadow: 0 0 8px rgba(255,237,113,.86) !important;
  transform-origin: center !important;
}
.tool-card.tool-hashtag-generator .hashtag-spark i:nth-child(1) { transform: scaleY(5) !important; }
.tool-card.tool-hashtag-generator .hashtag-spark i:nth-child(2) { transform: scaleX(5) !important; }
.tool-card.tool-hashtag-generator .hashtag-spark i:nth-child(3) { transform: rotate(45deg) scaleX(3.5) !important; }
@media (hover: hover) and (pointer: fine) {
  .tool-card.tool-hashtag-generator:hover .tool-preview-hashtag-generator {
    transform: translateY(-7px) scale(1.02) !important;
  }
  .tool-card.tool-hashtag-generator:hover .hashtag-input {
    transform: translate(-3px, -9px) rotate(-9deg) !important;
    box-shadow:
      0 17px 28px rgba(13,8,43,.57),
      0 0 16px rgba(170,119,255,.21),
      inset 0 1px 0 rgba(255,255,255,.16) !important;
  }
  .tool-card.tool-hashtag-generator:hover .hashtag-tag-trend {
    transform: translate(-7px, -12px) rotate(-15deg) scale(1.08) !important;
  }
  .tool-card.tool-hashtag-generator:hover .hashtag-tag-social {
    transform: translate(3px, -18px) rotate(12deg) scale(1.09) !important;
  }
  .tool-card.tool-hashtag-generator:hover .hashtag-tag-viral {
    transform: translate(8px, -8px) rotate(19deg) scale(1.10) !important;
  }
  .tool-card.tool-hashtag-generator:hover .hashtag-spark {
    transform: translate(3px, -7px) rotate(53deg) scale(1.22) !important;
    filter: drop-shadow(0 0 8px rgba(255,238,113,.80)) !important;
  }
}
@media (max-width: 640px) {
  .tool-card.tool-hashtag-generator .tool-preview-hashtag-generator {
    right: 6px !important;
    bottom: 6px !important;
    transform: scale(.84) !important;
    transform-origin: right bottom !important;
  }
}
@media (prefers-reduced-motion: reduce) {
  .tool-card.tool-hashtag-generator .tool-preview-hashtag-generator,
  .tool-card.tool-hashtag-generator .tool-preview-hashtag-generator * {
    transition: none !important;
  }
}
/* HASHTAG-GENERATOR-PREVIEW-END */
/* PDF-COMPRESS-PREVIEW-START */
.tool-card.tool-pdf-compress .tool-preview-pdf-compress {
  position: absolute !important;
  right: 13px !important;
  bottom: 13px !important;
  z-index: 5 !important;
  display: block !important;
  width: 141px !important;
  height: 86px !important;
  overflow: visible !important;
  pointer-events: none !important;
  transform-origin: right bottom !important;
  transition: transform .25s ease !important;
}
.tool-card.tool-pdf-compress .pdf-compress-document {
  position: absolute !important;
  left: 40px !important;
  top: 6px !important;
  z-index: 3 !important;
  display: block !important;
  width: 56px !important;
  height: 70px !important;
  overflow: hidden !important;
  border: 1px solid rgba(255,225,225,.78) !important;
  border-radius: 9px !important;
  background: linear-gradient(145deg, #ff5b5f 0%, #e23845 52%, #a51e35 100%) !important;
  box-shadow:
    0 10px 20px rgba(105,25,42,.42),
    inset 0 1px 0 rgba(255,255,255,.37) !important;
  transform: rotate(-4deg) !important;
  transition: transform .35s cubic-bezier(.2,.85,.25,1), box-shadow .25s ease !important;
}
.tool-card.tool-pdf-compress .pdf-compress-fold {
  position: absolute !important;
  right: 0 !important;
  top: 0 !important;
  display: block !important;
  width: 17px !important;
  height: 17px !important;
  background: linear-gradient(135deg, rgba(255,255,255,.70) 0 49%, transparent 50%) !important;
  box-shadow: -2px 2px 4px rgba(126,33,48,.17) !important;
}
.tool-card.tool-pdf-compress .pdf-compress-label {
  position: absolute !important;
  left: 9px !important;
  top: 15px !important;
  display: grid !important;
  place-items: center !important;
  width: 28px !important;
  height: 17px !important;
  border-radius: 4px !important;
  color: #fff !important;
  background: rgba(132,31,47,.34) !important;
  font: 900 9px/1 Arial, sans-serif !important;
  letter-spacing: .35px !important;
}
.tool-card.tool-pdf-compress .pdf-compress-lines {
  position: absolute !important;
  left: 10px !important;
  right: 10px !important;
  top: 41px !important;
  display: grid !important;
  gap: 5px !important;
}
.tool-card.tool-pdf-compress .pdf-compress-lines i {
  display: block !important;
  height: 3px !important;
  border-radius: 99px !important;
  background: rgba(255,255,255,.62) !important;
}
.tool-card.tool-pdf-compress .pdf-compress-lines i:nth-child(2) { width: 76% !important; }
.tool-card.tool-pdf-compress .pdf-compress-lines i:nth-child(3) { width: 54% !important; }
.tool-card.tool-pdf-compress .pdf-compress-bracket {
  position: absolute !important;
  top: 23px !important;
  z-index: 5 !important;
  display: block !important;
  width: 13px !important;
  height: 39px !important;
  border-top: 3px solid #ffb7ad !important;
  border-bottom: 3px solid #ffb7ad !important;
  filter: drop-shadow(0 0 6px rgba(255,111,105,.57)) !important;
  transition: transform .35s cubic-bezier(.2,.85,.25,1), filter .25s ease !important;
}
.tool-card.tool-pdf-compress .pdf-compress-bracket-left {
  left: 14px !important;
  border-left: 3px solid #ffb7ad !important;
  border-radius: 5px 0 0 5px !important;
}
.tool-card.tool-pdf-compress .pdf-compress-bracket-right {
  right: 19px !important;
  border-right: 3px solid #ffb7ad !important;
  border-radius: 0 5px 5px 0 !important;
}
.tool-card.tool-pdf-compress .pdf-compress-badge {
  position: absolute !important;
  right: 0 !important;
  bottom: 4px !important;
  z-index: 7 !important;
  display: grid !important;
  grid-template-columns: auto auto !important;
  place-items: center !important;
  gap: 3px !important;
  min-width: 39px !important;
  height: 25px !important;
  padding: 0 6px !important;
  border: 1px solid rgba(231,255,211,.72) !important;
  border-radius: 8px !important;
  color: #f7ffec !important;
  background: linear-gradient(145deg, #76bd75, #3d8a60) !important;
  box-shadow:
    0 7px 14px rgba(24,95,55,.40),
    inset 0 1px 0 rgba(255,255,255,.31) !important;
  transform: rotate(8deg) !important;
  transition: transform .35s cubic-bezier(.2,.9,.25,1), box-shadow .25s ease !important;
}
.tool-card.tool-pdf-compress .pdf-compress-badge b {
  font: 900 9px/1 Arial, sans-serif !important;
  letter-spacing: .25px !important;
}
.tool-card.tool-pdf-compress .pdf-compress-badge i {
  font: 900 16px/1 Arial, sans-serif !important;
  font-style: normal !important;
}
@media (hover: hover) and (pointer: fine) {
  .tool-card.tool-pdf-compress:hover .tool-preview-pdf-compress {
    transform: translateY(-7px) scale(1.03) !important;
  }
  .tool-card.tool-pdf-compress:hover .pdf-compress-document {
    transform: translateY(-10px) rotate(-8deg) scale(.92) !important;
    box-shadow:
      0 17px 28px rgba(105,25,42,.56),
      0 0 15px rgba(255,91,95,.25),
      inset 0 1px 0 rgba(255,255,255,.42) !important;
  }
  .tool-card.tool-pdf-compress:hover .pdf-compress-bracket-left {
    transform: translate(17px, -8px) !important;
    filter: drop-shadow(0 0 9px rgba(255,175,169,.86)) !important;
  }
  .tool-card.tool-pdf-compress:hover .pdf-compress-bracket-right {
    transform: translate(-17px, -8px) !important;
    filter: drop-shadow(0 0 9px rgba(255,175,169,.86)) !important;
  }
  .tool-card.tool-pdf-compress:hover .pdf-compress-badge {
    transform: translate(5px, -11px) rotate(14deg) scale(1.13) !important;
    box-shadow:
      0 12px 20px rgba(24,95,55,.48),
      0 0 12px rgba(160,241,139,.30),
      inset 0 1px 0 rgba(255,255,255,.38) !important;
  }
}
@media (max-width: 640px) {
  .tool-card.tool-pdf-compress .tool-preview-pdf-compress {
    right: 6px !important;
    bottom: 6px !important;
    transform: scale(.84) !important;
    transform-origin: right bottom !important;
  }
}
@media (prefers-reduced-motion: reduce) {
  .tool-card.tool-pdf-compress .tool-preview-pdf-compress,
  .tool-card.tool-pdf-compress .tool-preview-pdf-compress * {
    transition: none !important;
  }
}
/* PDF-COMPRESS-PREVIEW-END */
/* VIDEO-TO-MP3-PREVIEW-START */
.tool-card.tool-video-to-mp3 .tool-preview-video-to-mp3 {
  position: absolute !important;
  right: 12px !important;
  bottom: 13px !important;
  z-index: 5 !important;
  display: block !important;
  width: 144px !important;
  height: 86px !important;
  overflow: visible !important;
  pointer-events: none !important;
  transform-origin: right bottom !important;
  transition: transform .25s ease !important;
}
.tool-card.tool-video-to-mp3 .vmp3-video-card {
  position: absolute !important;
  left: 2px !important;
  bottom: 10px !important;
  display: block !important;
  width: 58px !important;
  height: 46px !important;
  overflow: hidden !important;
  border: 2px solid rgba(255,222,248,.62) !important;
  border-radius: 9px !important;
  background:
    radial-gradient(circle at 70% 27%, rgba(255,174,226,.42), transparent 24%),
    linear-gradient(145deg, #e85fa4 0%, #a43d9e 50%, #4f2b73 100%) !important;
  box-shadow:
    0 9px 18px rgba(78,18,92,.43),
    inset 0 1px 0 rgba(255,255,255,.34) !important;
  transform: rotate(-7deg) !important;
  transition: transform .35s cubic-bezier(.2,.85,.25,1), box-shadow .25s ease !important;
}
.tool-card.tool-video-to-mp3 .vmp3-film-hole {
  position: absolute !important;
  left: 3px !important;
  right: 3px !important;
  display: block !important;
  height: 3px !important;
  opacity: .72 !important;
  background: repeating-linear-gradient(90deg, rgba(255,241,250,.87) 0 5px, transparent 5px 9px) !important;
}
.tool-card.tool-video-to-mp3 .vmp3-film-hole-top { top: 2px !important; }
.tool-card.tool-video-to-mp3 .vmp3-film-hole-bottom { bottom: 2px !important; }
.tool-card.tool-video-to-mp3 .vmp3-play {
  position: absolute !important;
  left: 50% !important;
  top: 50% !important;
  display: block !important;
  width: 0 !important;
  height: 0 !important;
  border-top: 9px solid transparent !important;
  border-bottom: 9px solid transparent !important;
  border-left: 14px solid #fff !important;
  filter: drop-shadow(0 2px 3px rgba(52,12,70,.56)) !important;
  transform: translate(-40%, -50%) !important;
  transition: transform .30s ease, filter .25s ease !important;
}
.tool-card.tool-video-to-mp3 .vmp3-arrow {
  position: absolute !important;
  left: 62px !important;
  bottom: 27px !important;
  z-index: 5 !important;
  color: #faf7ff !important;
  font: 900 24px/1 Arial, sans-serif !important;
  text-shadow: 0 3px 8px rgba(17,12,43,.54) !important;
  transform: rotate(-4deg) !important;
  transition: transform .32s ease, color .25s ease !important;
}
.tool-card.tool-video-to-mp3 .vmp3-audio-card {
  position: absolute !important;
  right: 3px !important;
  bottom: 6px !important;
  z-index: 4 !important;
  display: block !important;
  width: 59px !important;
  height: 54px !important;
  overflow: hidden !important;
  border: 1px solid rgba(211,255,248,.65) !important;
  border-radius: 10px !important;
  background:
    radial-gradient(circle at 26% 17%, rgba(224,255,248,.22), transparent 30%),
    linear-gradient(145deg, #54c8b8 0%, #2d947f 56%, #216260 100%) !important;
  box-shadow:
    0 9px 18px rgba(20,102,91,.42),
    inset 0 1px 0 rgba(255,255,255,.34) !important;
  transform: rotate(7deg) !important;
  transition: transform .35s cubic-bezier(.2,.85,.25,1), box-shadow .25s ease !important;
}
.tool-card.tool-video-to-mp3 .vmp3-audio-label {
  position: absolute !important;
  left: 8px !important;
  top: 10px !important;
  color: #f3fffa !important;
  font: 900 13px/1 Arial, sans-serif !important;
  letter-spacing: .2px !important;
  text-shadow: 0 2px 3px rgba(12,71,66,.35) !important;
}
.tool-card.tool-video-to-mp3 .vmp3-wave {
  position: absolute !important;
  left: 8px !important;
  right: 8px !important;
  bottom: 9px !important;
  display: flex !important;
  align-items: center !important;
  justify-content: space-between !important;
  height: 16px !important;
}
.tool-card.tool-video-to-mp3 .vmp3-wave i {
  display: block !important;
  width: 4px !important;
  height: 8px !important;
  border-radius: 99px !important;
  background: #dbfff5 !important;
  box-shadow: 0 0 5px rgba(213,255,243,.50) !important;
}
.tool-card.tool-video-to-mp3 .vmp3-wave i:nth-child(2) { height: 15px !important; }
.tool-card.tool-video-to-mp3 .vmp3-wave i:nth-child(3) { height: 11px !important; }
.tool-card.tool-video-to-mp3 .vmp3-wave i:nth-child(4) { height: 17px !important; }
.tool-card.tool-video-to-mp3 .vmp3-wave i:nth-child(5) { height: 10px !important; }
.tool-card.tool-video-to-mp3 .vmp3-note {
  position: absolute !important;
  right: 0 !important;
  top: 2px !important;
  z-index: 7 !important;
  display: grid !important;
  place-items: center !important;
  width: 25px !important;
  height: 25px !important;
  border: 1px solid rgba(226,251,255,.67) !important;
  border-radius: 50% !important;
  color: #ecffff !important;
  background: linear-gradient(145deg, #668be3, #4554ac) !important;
  box-shadow:
    0 6px 12px rgba(39,55,139,.39),
    inset 0 1px 0 rgba(255,255,255,.33) !important;
  font: 900 16px/1 Arial, sans-serif !important;
  transform: rotate(10deg) !important;
  transition: transform .35s cubic-bezier(.2,.9,.25,1), box-shadow .25s ease !important;
}
@media (hover: hover) and (pointer: fine) {
  .tool-card.tool-video-to-mp3:hover .tool-preview-video-to-mp3 {
    transform: translateY(-7px) scale(1.02) !important;
  }
  .tool-card.tool-video-to-mp3:hover .vmp3-video-card {
    transform: translate(-4px, -9px) rotate(-13deg) scale(1.07) !important;
    box-shadow:
      0 17px 28px rgba(78,18,92,.58),
      0 0 16px rgba(242,98,181,.25),
      inset 0 1px 0 rgba(255,255,255,.42) !important;
  }
  .tool-card.tool-video-to-mp3:hover .vmp3-play {
    transform: translate(-40%, -50%) scale(1.14) !important;
    filter: drop-shadow(0 0 7px rgba(255,216,244,.81)) !important;
  }
  .tool-card.tool-video-to-mp3:hover .vmp3-arrow {
    color: #fff1a8 !important;
    transform: translate(5px, -7px) rotate(-4deg) scale(1.13) !important;
  }
  .tool-card.tool-video-to-mp3:hover .vmp3-audio-card {
    transform: translate(5px, -11px) rotate(13deg) scale(1.08) !important;
    box-shadow:
      0 16px 26px rgba(20,102,91,.54),
      0 0 15px rgba(104,240,218,.25),
      inset 0 1px 0 rgba(255,255,255,.41) !important;
  }
  .tool-card.tool-video-to-mp3:hover .vmp3-note {
    transform: translate(4px, -9px) rotate(23deg) scale(1.14) !important;
  }
}
@media (max-width: 640px) {
  .tool-card.tool-video-to-mp3 .tool-preview-video-to-mp3 {
    right: 6px !important;
    bottom: 6px !important;
    transform: scale(.84) !important;
    transform-origin: right bottom !important;
  }
}
@media (prefers-reduced-motion: reduce) {
  .tool-card.tool-video-to-mp3 .tool-preview-video-to-mp3,
  .tool-card.tool-video-to-mp3 .tool-preview-video-to-mp3 * {
    transition: none !important;
  }
}
/* VIDEO-TO-MP3-PREVIEW-END */
/* DEVELOPER-TOOLS-THEME-START */
/*
  Shared presentation layer for pages inside /developer-tools/.
  Scoped through #tool-root and requires no HTML or JavaScript changes.
*/
body:has(#tool-root) {
  background:
    radial-gradient(circle at 12% 8%, rgba(111, 74, 214, .14), transparent 25rem),
    radial-gradient(circle at 88% 22%, rgba(35, 181, 214, .09), transparent 24rem),
    #090a13 !important;
}
body:has(#tool-root) main {
  position: relative !important;
  overflow: hidden !important;
}
body:has(#tool-root) main::before {
  content: "" !important;
  position: absolute !important;
  inset: 0 !important;
  z-index: 0 !important;
  pointer-events: none !important;
  opacity: .30 !important;
  background-image:
    linear-gradient(rgba(140, 120, 255, .055) 1px, transparent 1px),
    linear-gradient(90deg, rgba(140, 120, 255, .055) 1px, transparent 1px) !important;
  background-size: 28px 28px !important;
  mask-image: linear-gradient(to bottom, black, transparent 78%) !important;
}
body:has(#tool-root) main > section {
  position: relative !important;
  z-index: 1 !important;
}
body:has(#tool-root) .page-head {
  padding-top: 54px !important;
  padding-bottom: 24px !important;
}
body:has(#tool-root) .page-head .eyebrow {
  display: inline-flex !important;
  align-items: center !important;
  min-height: 25px !important;
  padding: 0 10px !important;
  border: 1px solid rgba(177, 153, 255, .38) !important;
  border-radius: 999px !important;
  color: #d8ccff !important;
  background: rgba(105, 72, 184, .18) !important;
  box-shadow: inset 0 1px 0 rgba(255,255,255,.08) !important;
  font-weight: 800 !important;
  letter-spacing: .08em !important;
  text-transform: uppercase !important;
}
body:has(#tool-root) .page-title {
  max-width: 820px !important;
  margin-top: 13px !important;
  color: #f7f5ff !important;
  letter-spacing: -.035em !important;
  text-wrap: balance !important;
}
body:has(#tool-root) .lead {
  max-width: 690px !important;
  color: #b8b4ca !important;
}
body:has(#tool-root) .panel {
  overflow: hidden !important;
  border: 1px solid rgba(174, 156, 255, .19) !important;
  border-radius: 20px !important;
  background:
    linear-gradient(145deg, rgba(29, 26, 49, .94), rgba(16, 17, 31, .96)) !important;
  box-shadow:
    0 24px 70px rgba(0,0,0,.33),
    inset 0 1px 0 rgba(255,255,255,.055) !important;
}
body:has(#tool-root) #tool-root {
  position: relative !important;
  padding: 25px !important;
}
body:has(#tool-root) #tool-root::before {
  content: "" !important;
  position: absolute !important;
  left: 0 !important;
  right: 0 !important;
  top: 0 !important;
  height: 1px !important;
  opacity: .85 !important;
  background: linear-gradient(90deg, transparent, rgba(170,141,255,.60), rgba(70,210,231,.45), transparent) !important;
}
body:has(#tool-root) .tool-layout {
  display: grid !important;
  grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
  gap: 18px !important;
}
body:has(#tool-root) .field {
  position: relative !important;
  min-width: 0 !important;
}
body:has(#tool-root) .field label {
  display: flex !important;
  align-items: center !important;
  gap: 8px !important;
  margin: 0 0 9px !important;
  color: #e3ddfa !important;
  font-size: .85rem !important;
  font-weight: 800 !important;
  letter-spacing: .02em !important;
}
body:has(#tool-root) .field label::before {
  content: "⌘" !important;
  display: grid !important;
  place-items: center !important;
  width: 19px !important;
  height: 19px !important;
  border: 1px solid rgba(184,165,255,.39) !important;
  border-radius: 5px !important;
  color: #bca8ff !important;
  background: rgba(111,75,200,.16) !important;
  font-size: 11px !important;
  line-height: 1 !important;
}
body:has(#tool-root) .field textarea {
  display: block !important;
  box-sizing: border-box !important;
  width: 100% !important;
  min-height: 350px !important;
  padding: 16px 17px !important;
  resize: vertical !important;
  border: 1px solid rgba(153, 142, 198, .28) !important;
  border-radius: 13px !important;
  outline: none !important;
  color: #e9e7f4 !important;
  background:
    linear-gradient(90deg, rgba(119, 93, 201, .09) 0 39px, transparent 39px),
    linear-gradient(145deg, #121221, #0d0e1a) !important;
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,.035),
    inset 0 0 35px rgba(6,6,16,.42) !important;
  font-family: "SFMono-Regular", Consolas, "Liberation Mono", monospace !important;
  font-size: .86rem !important;
  line-height: 1.7 !important;
  tab-size: 2 !important;
  transition: border-color .18s ease, box-shadow .18s ease, background .18s ease !important;
}
body:has(#tool-root) .field textarea::placeholder {
  color: #77728d !important;
  opacity: 1 !important;
}
body:has(#tool-root) .field textarea:focus {
  border-color: rgba(152, 125, 255, .79) !important;
  background:
    linear-gradient(90deg, rgba(130, 102, 223, .14) 0 39px, transparent 39px),
    linear-gradient(145deg, #141426, #0e0f1d) !important;
  box-shadow:
    0 0 0 3px rgba(126, 91, 235, .14),
    inset 0 1px 0 rgba(255,255,255,.045),
    inset 0 0 35px rgba(6,6,16,.42) !important;
}
body:has(#tool-root) .field textarea[readonly] {
  color: #cfeeff !important;
  border-color: rgba(83, 188, 218, .28) !important;
  background:
    linear-gradient(90deg, rgba(52, 181, 210, .08) 0 39px, transparent 39px),
    linear-gradient(145deg, #101d29, #0c141e) !important;
}
body:has(#tool-root) .note {
  margin: 8px 2px 0 !important;
  color: #827e97 !important;
  font-size: .76rem !important;
}
body:has(#tool-root) .status {
  min-height: 1.25em !important;
  margin: 8px 2px 0 !important;
  color: #b9eeb6 !important;
  font-size: .80rem !important;
  font-weight: 700 !important;
}
body:has(#tool-root) .toolbar {
  display: flex !important;
  flex-wrap: wrap !important;
  gap: 10px !important;
  margin-top: 21px !important;
  padding-top: 20px !important;
  border-top: 1px solid rgba(173,155,239,.14) !important;
}
body:has(#tool-root) .toolbar .btn {
  min-height: 40px !important;
  padding: 0 14px !important;
  border: 1px solid rgba(177,160,228,.29) !important;
  border-radius: 10px !important;
  color: #ded9ef !important;
  background: linear-gradient(145deg, rgba(66,58,99,.92), rgba(37,35,62,.94)) !important;
  box-shadow:
    0 4px 12px rgba(0,0,0,.18),
    inset 0 1px 0 rgba(255,255,255,.055) !important;
  font-weight: 800 !important;
  transition: transform .18s ease, border-color .18s ease, background .18s ease, box-shadow .18s ease !important;
}
body:has(#tool-root) .toolbar .btn:hover {
  border-color: rgba(196,180,255,.61) !important;
  background: linear-gradient(145deg, rgba(83,72,127,.98), rgba(48,43,81,.98)) !important;
  box-shadow:
    0 8px 17px rgba(0,0,0,.23),
    0 0 0 3px rgba(132,99,239,.09),
    inset 0 1px 0 rgba(255,255,255,.08) !important;
  transform: translateY(-2px) !important;
}
body:has(#tool-root) .toolbar .btn:active {
  transform: translateY(0) scale(.98) !important;
}
body:has(#tool-root) .toolbar .btn.btn-primary {
  border-color: rgba(170,153,255,.73) !important;
  color: #fff !important;
  background: linear-gradient(135deg, #8e66df, #5b3eae) !important;
  box-shadow:
    0 8px 19px rgba(74,42,160,.35),
    inset 0 1px 0 rgba(255,255,255,.20) !important;
}
body:has(#tool-root) .toolbar .btn.btn-primary:hover {
  background: linear-gradient(135deg, #a17af1, #6545c4) !important;
  box-shadow:
    0 12px 24px rgba(84,49,182,.44),
    0 0 0 3px rgba(163,125,255,.15),
    inset 0 1px 0 rgba(255,255,255,.24) !important;
}
body:has(#tool-root) .toolbar .btn.btn-danger {
  border-color: rgba(255,132,145,.36) !important;
  color: #ffe6e9 !important;
  background: linear-gradient(145deg, rgba(128,48,67,.83), rgba(73,31,45,.92)) !important;
}
body:has(#tool-root) .toolbar .btn.btn-danger:hover {
  border-color: rgba(255,153,165,.70) !important;
  background: linear-gradient(145deg, rgba(158,56,79,.95), rgba(93,33,51,.98)) !important;
  box-shadow:
    0 8px 17px rgba(85,20,35,.32),
    0 0 0 3px rgba(255,98,124,.10),
    inset 0 1px 0 rgba(255,255,255,.08) !important;
}
@media (max-width: 760px) {
  body:has(#tool-root) .page-head {
    padding-top: 35px !important;
  }
  body:has(#tool-root) #tool-root {
    padding: 16px !important;
  }
  body:has(#tool-root) .tool-layout {
    grid-template-columns: 1fr !important;
    gap: 15px !important;
  }
  body:has(#tool-root) .field textarea {
    min-height: 230px !important;
  }
  body:has(#tool-root) .toolbar {
    gap: 8px !important;
  }
  body:has(#tool-root) .toolbar .btn {
    flex: 1 1 calc(50% - 8px) !important;
    padding: 0 10px !important;
  }
}
@media (max-width: 420px) {
  body:has(#tool-root) .toolbar .btn {
    flex-basis: 100% !important;
  }
}
/* DEVELOPER-TOOLS-THEME-END */
/* DEV-JSON-DATA-CARDS-START */
body:has(a.card[href="json-formatter/index.html"]) a.card[href="json-formatter/index.html"],
body:has(a.card[href="json-to-csv/index.html"]) a.card[href="json-to-csv/index.html"],
body:has(a.card[href="csv-to-json/index.html"]) a.card[href="csv-to-json/index.html"],
body:has(a.card[href="base64-encode/index.html"]) a.card[href="base64-encode/index.html"],
body:has(a.card[href="image-to-base64/index.html"]) a.card[href="image-to-base64/index.html"],
body:has(a.card[href="jwt-decoder/index.html"]) a.card[href="jwt-decoder/index.html"],
body:has(a.card[href="uuid-generator/index.html"]) a.card[href="uuid-generator/index.html"],
body:has(a.card[href="timestamp-converter/index.html"]) a.card[href="timestamp-converter/index.html"] {
  position: relative !important;
  overflow: hidden !important;
  min-height: 190px !important;
}
.dev-preview {
  position: absolute !important;
  right: 13px !important;
  bottom: 12px !important;
  z-index: 4 !important;
  display: block !important;
  width: 116px !important;
  height: 63px !important;
  pointer-events: none !important;
  transform-origin: right bottom !important;
  transition: transform .24s ease !important;
}
a.card:has(.dev-preview):hover .dev-preview {
  transform: translateY(-6px) scale(1.04) !important;
}
/* JSON Formatter */
.dev-preview-json {
  right: 18px !important;
  bottom: 15px !important;
  width: 94px !important;
  height: 62px !important;
  border: 1px solid rgba(173,216,255,.48) !important;
  border-radius: 11px !important;
  background: linear-gradient(145deg, #173451, #18214a) !important;
  box-shadow: 0 9px 19px rgba(9,27,74,.40), inset 0 1px 0 rgba(255,255,255,.13) !important;
  transform: rotate(-5deg) !important;
}
.dev-code-brace {
  position: absolute !important;
  left: 11px !important;
  top: 9px !important;
  color: #7ce6ff !important;
  font: 900 35px/1 Consolas, monospace !important;
  text-shadow: 0 0 8px rgba(111,231,255,.42) !important;
}
.dev-code-brace-close {
  left: auto !important;
  right: 12px !important;
  top: 18px !important;
  font-size: 28px !important;
}
.dev-code-lines {
  position: absolute !important;
  left: 32px !important;
  top: 17px !important;
  display: grid !important;
  gap: 6px !important;
}
.dev-code-lines i {
  display: block !important;
  width: 27px !important;
  height: 4px !important;
  border-radius: 99px !important;
  background: #aa8bff !important;
}
.dev-code-lines i:nth-child(2) { width: 19px !important; background: #7be0c4 !important; }
.dev-code-lines i:nth-child(3) { width: 31px !important; background: #f5b569 !important; }
.dev-code-check {
  position: absolute !important;
  right: -7px !important;
  bottom: -8px !important;
  display: grid !important;
  place-items: center !important;
  width: 22px !important;
  height: 22px !important;
  border-radius: 50% !important;
  color: #efffe8 !important;
  background: #47a875 !important;
  box-shadow: 0 5px 11px rgba(21,103,65,.40) !important;
  font: 900 14px/1 Arial, sans-serif !important;
}
/* JSON ↔ CSV */
.dev-mini-json,
.dev-mini-table {
  position: absolute !important;
  display: grid !important;
  place-items: center !important;
  border: 1px solid rgba(187,226,255,.57) !important;
  border-radius: 8px !important;
  box-shadow: 0 7px 14px rgba(13,39,88,.36), inset 0 1px 0 rgba(255,255,255,.20) !important;
}
.dev-mini-json {
  width: 40px !important;
  height: 43px !important;
  color: #d7f5ff !important;
  background: linear-gradient(145deg, #3d89cf, #3153a1) !important;
  font: 900 16px/1 Consolas, monospace !important;
}
.dev-mini-table {
  grid-template-columns: repeat(3, 9px) !important;
  grid-template-rows: repeat(2, 10px) !important;
  gap: 2px !important;
  width: 40px !important;
  height: 40px !important;
  background: linear-gradient(145deg, #4ebea7, #28726f) !important;
}
.dev-mini-table i {
  display: block !important;
  width: 9px !important;
  height: 10px !important;
  border-radius: 2px !important;
  background: rgba(232,255,249,.74) !important;
}
.dev-mini-arrow {
  position: absolute !important;
  z-index: 4 !important;
  color: #fff0a6 !important;
  text-shadow: 0 0 8px rgba(255,229,117,.48) !important;
  font: 900 23px/1 Arial, sans-serif !important;
}
.dev-preview-json-csv .dev-mini-json {
  left: 4px !important;
  bottom: 8px !important;
  transform: rotate(-7deg) !important;
}
.dev-preview-json-csv .dev-mini-arrow {
  left: 47px !important;
  bottom: 19px !important;
}
.dev-preview-json-csv .dev-mini-table {
  right: 3px !important;
  bottom: 8px !important;
  transform: rotate(7deg) !important;
}
.dev-preview-csv-json .dev-mini-table {
  left: 4px !important;
  bottom: 8px !important;
  transform: rotate(-7deg) !important;
}
.dev-preview-csv-json .dev-mini-arrow {
  left: 48px !important;
  bottom: 19px !important;
}
.dev-preview-csv-json .dev-mini-json {
  right: 3px !important;
  bottom: 8px !important;
  transform: rotate(7deg) !important;
}
/* Base64 */
.dev-preview-base64 {
  right: 14px !important;
  bottom: 14px !important;
  width: 109px !important;
  height: 55px !important;
  border: 1px solid rgba(220,203,255,.48) !important;
  border-radius: 10px !important;
  background: linear-gradient(145deg, #35245c, #1e2147) !important;
  box-shadow: 0 9px 18px rgba(28,16,83,.42), inset 0 1px 0 rgba(255,255,255,.12) !important;
  transform: rotate(-4deg) !important;
}
.dev-lock {
  position: absolute !important;
  left: 10px !important;
  top: 9px !important;
  color: #ffe883 !important;
  font: 900 25px/1 Arial, sans-serif !important;
}
.dev-base-text {
  position: absolute !important;
  left: 37px !important;
  top: 14px !important;
  color: #d7c7ff !important;
  font: 800 10px/1 Consolas, monospace !important;
}
.dev-base-bits {
  position: absolute !important;
  right: 8px !important;
  bottom: 8px !important;
  color: #8cf0d4 !important;
  font: 900 10px/1 Consolas, monospace !important;
}
/* Image to Base64 */
.dev-preview-image64 .dev-mini-image {
  position: absolute !important;
  left: 3px !important;
  bottom: 7px !important;
  display: block !important;
  width: 43px !important;
  height: 40px !important;
  overflow: hidden !important;
  border: 1px solid rgba(209,245,255,.63) !important;
  border-radius: 8px !important;
  background: linear-gradient(145deg, #66c9f0 0%, #a4e1f7 52%, #64a86d 53%, #34755c 100%) !important;
  transform: rotate(-7deg) !important;
  box-shadow: 0 7px 14px rgba(17,91,123,.36) !important;
}
.dev-mini-image i {
  position: absolute !important;
  right: 7px !important;
  top: 7px !important;
  width: 8px !important;
  height: 8px !important;
  border-radius: 50% !important;
  background: #fff4a0 !important;
}
.dev-mini-image b {
  position: absolute !important;
  left: 8px !important;
  bottom: -8px !important;
  width: 28px !important;
  height: 28px !important;
  background: #356f70 !important;
  transform: rotate(45deg) !important;
}
.dev-preview-image64 .dev-mini-arrow {
  left: 49px !important;
  bottom: 18px !important;
}
.dev-data-url {
  position: absolute !important;
  right: 0 !important;
  bottom: 13px !important;
  display: grid !important;
  place-items: center !important;
  width: 54px !important;
  height: 29px !important;
  border: 1px solid rgba(225,211,255,.58) !important;
  border-radius: 7px !important;
  color: #f3edff !important;
  background: linear-gradient(145deg, #8a63d9, #50389e) !important;
  box-shadow: 0 6px 12px rgba(48,27,123,.38) !important;
  font: 900 10px/1 Consolas, monospace !important;
  transform: rotate(7deg) !important;
}
/* JWT */
.dev-preview-jwt {
  right: 9px !important;
  bottom: 17px !important;
  width: 121px !important;
  height: 44px !important;
  display: flex !important;
  align-items: center !important;
  gap: 3px !important;
  padding: 0 7px !important;
  border: 1px solid rgba(221,211,255,.47) !important;
  border-radius: 9px !important;
  background: linear-gradient(145deg, #2c254c, #1b1b39) !important;
  box-shadow: 0 8px 17px rgba(18,14,63,.41) !important;
  transform: rotate(-4deg) !important;
}
.dev-jwt-part {
  display: grid !important;
  place-items: center !important;
  width: 27px !important;
  height: 23px !important;
  border-radius: 5px !important;
  color: #fff !important;
  font: 900 9px/1 Consolas, monospace !important;
}
.dev-jwt-head { background: #578fd4 !important; }
.dev-jwt-body { background: #6bae86 !important; }
.dev-jwt-sign { background: #d36a9c !important; }
.dev-jwt-dot {
  color: #d9c9ff !important;
  font: 900 16px/1 Arial, sans-serif !important;
}
.dev-jwt-key {
  position: absolute !important;
  right: -5px !important;
  top: -10px !important;
  display: grid !important;
  place-items: center !important;
  width: 21px !important;
  height: 21px !important;
  border-radius: 50% !important;
  color: #fff3a3 !important;
  background: #8061d9 !important;
  box-shadow: 0 5px 10px rgba(55,36,137,.42) !important;
  font: 900 14px/1 Arial, sans-serif !important;
}
/* UUID */
.dev-preview-uuid {
  right: 12px !important;
  bottom: 13px !important;
  width: 108px !important;
  height: 54px !important;
  border: 1px solid rgba(197,219,255,.52) !important;
  border-radius: 10px !important;
  background: linear-gradient(145deg, #233f69, #1c2750) !important;
  box-shadow: 0 9px 17px rgba(19,39,97,.39) !important;
  transform: rotate(-5deg) !important;
}
.dev-uuid-line {
  position: absolute !important;
  color: #d7edff !important;
  font: 900 11px/1 Consolas, monospace !important;
  letter-spacing: .2px !important;
}
.dev-uuid-line:nth-child(1) { left: 10px !important; top: 11px !important; }
.dev-uuid-line:nth-child(2) { left: 35px !important; top: 22px !important; color: #90dbff !important; }
.dev-uuid-line:nth-child(3) { right: 10px !important; bottom: 10px !important; color: #b4f0cc !important; }
.dev-uuid-spark {
  position: absolute !important;
  right: -4px !important;
  top: -10px !important;
  color: #fff191 !important;
  text-shadow: 0 0 8px rgba(255,237,115,.84) !important;
  font: 900 21px/1 Arial, sans-serif !important;
}
/* Timestamp */
.dev-preview-time {
  right: 9px !important;
  bottom: 13px !important;
  width: 119px !important;
  height: 57px !important;
}
.dev-clock {
  position: absolute !important;
  left: 2px !important;
  bottom: 8px !important;
  display: block !important;
  width: 40px !important;
  height: 40px !important;
  border: 3px solid #a5e8ff !important;
  border-radius: 50% !important;
  background: linear-gradient(145deg, #3b84bd, #2d4f98) !important;
  box-shadow: 0 7px 14px rgba(24,63,132,.42), inset 0 1px 0 rgba(255,255,255,.25) !important;
}
.dev-clock i,
.dev-clock b {
  position: absolute !important;
  left: 18px !important;
  top: 8px !important;
  display: block !important;
  width: 3px !important;
  border-radius: 99px !important;
  background: #e7fbff !important;
  transform-origin: bottom center !important;
}
.dev-clock i { height: 13px !important; transform: rotate(35deg) !important; }
.dev-clock b { height: 10px !important; transform: rotate(122deg) !important; }
.dev-time-code,
.dev-time-date {
  position: absolute !important;
  display: grid !important;
  place-items: center !important;
  height: 25px !important;
  border-radius: 6px !important;
  color: #effdff !important;
  font: 900 10px/1 Consolas, monospace !important;
}
.dev-time-code {
  left: 43px !important;
  top: 8px !important;
  width: 39px !important;
  background: #5b74cd !important;
  transform: rotate(-5deg) !important;
}
.dev-time-arrow {
  position: absolute !important;
  left: 80px !important;
  top: 10px !important;
  color: #fff19e !important;
  font: 900 17px/1 Arial, sans-serif !important;
}
.dev-time-date {
  right: 0 !important;
  bottom: 7px !important;
  width: 42px !important;
  background: #4baa86 !important;
  transform: rotate(6deg) !important;
}
@media (max-width: 640px) {
  .dev-preview {
    transform: scale(.88) !important;
    transform-origin: right bottom !important;
  }
}
@media (prefers-reduced-motion: reduce) {
  .dev-preview,
  .dev-preview * {
    transition: none !important;
  }
}
/* DEV-JSON-DATA-CARDS-END */
/* DEV-ENCODING-CARDS-START */
body:has(a.card[href="url-encoder/index.html"]) a.card[href="url-encoder/index.html"],
body:has(a.card[href="html-encoder/index.html"]) a.card[href="html-encoder/index.html"],
body:has(a.card[href="markdown-to-html/index.html"]) a.card[href="markdown-to-html/index.html"],
body:has(a.card[href="html-to-markdown/index.html"]) a.card[href="html-to-markdown/index.html"] {
  position: relative !important;
  overflow: hidden !important;
  min-height: 190px !important;
}
.dev-preview-url {
  right: 13px !important;
  bottom: 14px !important;
  width: 114px !important;
  height: 56px !important;
  border: 1px solid rgba(174,232,255,.48) !important;
  border-radius: 10px !important;
  background: linear-gradient(145deg, #183c56, #172444) !important;
  box-shadow: 0 9px 18px rgba(8,42,73,.39), inset 0 1px 0 rgba(255,255,255,.11) !important;
  transform: rotate(-4deg) !important;
}
.dev-url-link,
.dev-url-code {
  position: absolute !important;
  display: grid !important;
  place-items: center !important;
  height: 25px !important;
  border-radius: 6px !important;
  font: 900 10px/1 Consolas, monospace !important;
}
.dev-url-link {
  left: 8px !important;
  top: 14px !important;
  width: 36px !important;
  color: #dffaff !important;
  background: #397eab !important;
}
.dev-url-arrow {
  position: absolute !important;
  left: 45px !important;
  top: 16px !important;
  color: #fff19b !important;
  font: 900 20px/1 Arial, sans-serif !important;
}
.dev-url-code {
  right: 8px !important;
  top: 14px !important;
  width: 35px !important;
  color: #e9ffef !important;
  background: #438f72 !important;
}
.dev-url-chain {
  position: absolute !important;
  right: -5px !important;
  top: -10px !important;
  color: #b9eaff !important;
  text-shadow: 0 0 8px rgba(128,223,255,.75) !important;
  font: 900 21px/1 Arial, sans-serif !important;
}
.dev-preview-html-encode {
  right: 14px !important;
  bottom: 14px !important;
  width: 112px !important;
  height: 57px !important;
  border: 1px solid rgba(234,204,255,.48) !important;
  border-radius: 10px !important;
  background: linear-gradient(145deg, #372454, #251e46) !important;
  box-shadow: 0 9px 18px rgba(41,18,81,.39), inset 0 1px 0 rgba(255,255,255,.11) !important;
  transform: rotate(4deg) !important;
}
.dev-html-tag,
.dev-html-entity {
  position: absolute !important;
  top: 15px !important;
  display: grid !important;
  place-items: center !important;
  height: 26px !important;
  border-radius: 6px !important;
  font: 900 11px/1 Consolas, monospace !important;
}
.dev-html-tag {
  left: 8px !important;
  width: 35px !important;
  color: #ffebf7 !important;
  background: #bc5a99 !important;
}
.dev-html-arrow {
  position: absolute !important;
  left: 45px !important;
  top: 17px !important;
  color: #fff0a4 !important;
  font: 900 19px/1 Arial, sans-serif !important;
}
.dev-html-entity {
  right: 7px !important;
  width: 41px !important;
  color: #ebfff6 !important;
  background: #4d9a7b !important;
  font-size: 9px !important;
}
.dev-preview-md-html,
.dev-preview-html-md {
  right: 10px !important;
  bottom: 13px !important;
  width: 123px !important;
  height: 63px !important;
}
.dev-md-card,
.dev-html-card {
  position: absolute !important;
  display: block !important;
  width: 40px !important;
  height: 46px !important;
  overflow: hidden !important;
  border: 1px solid rgba(220,216,255,.56) !important;
  border-radius: 8px !important;
  box-shadow: 0 7px 14px rgba(23,18,72,.39), inset 0 1px 0 rgba(255,255,255,.19) !important;
}
.dev-md-card {
  color: #eee8ff !important;
  background: linear-gradient(145deg, #7361cb, #44338e) !important;
  transform: rotate(-7deg) !important;
}
.dev-html-card {
  color: #edfff9 !important;
  background: linear-gradient(145deg, #51b89b, #28776d) !important;
  transform: rotate(7deg) !important;
}
.dev-md-card b,
.dev-html-card b {
  position: absolute !important;
  left: 8px !important;
  top: 8px !important;
  font: 900 14px/1 Consolas, monospace !important;
}
.dev-html-card b {
  left: 5px !important;
  font-size: 9px !important;
}
.dev-md-card i,
.dev-html-card i {
  position: absolute !important;
  left: 8px !important;
  display: block !important;
  height: 3px !important;
  border-radius: 99px !important;
  background: rgba(255,255,255,.63) !important;
}
.dev-md-card i:nth-of-type(1) {
  bottom: 14px !important;
  width: 23px !important;
}
.dev-md-card i:nth-of-type(2) {
  bottom: 8px !important;
  width: 16px !important;
}
.dev-html-card i {
  bottom: 11px !important;
  width: 25px !important;
}
.dev-convert-arrow {
  position: absolute !important;
  top: 22px !important;
  z-index: 4 !important;
  color: #fff1a1 !important;
  text-shadow: 0 0 8px rgba(255,231,119,.47) !important;
  font: 900 22px/1 Arial, sans-serif !important;
}
.dev-preview-md-html .dev-md-card {
  left: 2px !important;
  bottom: 6px !important;
}
.dev-preview-md-html .dev-convert-arrow {
  left: 47px !important;
}
.dev-preview-md-html .dev-html-card {
  right: 4px !important;
  bottom: 6px !important;
}
.dev-preview-html-md .dev-html-card {
  left: 2px !important;
  bottom: 6px !important;
}
.dev-preview-html-md .dev-convert-arrow {
  left: 47px !important;
}
.dev-preview-html-md .dev-md-card {
  right: 4px !important;
  bottom: 6px !important;
}
a.card:has(.dev-preview-url):hover .dev-preview-url,
a.card:has(.dev-preview-html-encode):hover .dev-preview-html-encode,
a.card:has(.dev-preview-md-html):hover .dev-preview-md-html,
a.card:has(.dev-preview-html-md):hover .dev-preview-html-md {
  transform: translateY(-7px) scale(1.04) !important;
}
@media (max-width: 640px) {
  .dev-preview-url,
  .dev-preview-html-encode,
  .dev-preview-md-html,
  .dev-preview-html-md {
    transform: scale(.88) !important;
    transform-origin: right bottom !important;
  }
}
@media (prefers-reduced-motion: reduce) {
  .dev-preview-url,
  .dev-preview-url *,
  .dev-preview-html-encode,
  .dev-preview-html-encode *,
  .dev-preview-md-html,
  .dev-preview-md-html *,
  .dev-preview-html-md,
  .dev-preview-html-md * {
    transition: none !important;
  }
}
/* DEV-ENCODING-CARDS-END */
/* DEV-TEXT-CARDS-START */
body:has(a.card[href="diff-checker/index.html"]) a.card[href="diff-checker/index.html"],
body:has(a.card[href="case-converter/index.html"]) a.card[href="case-converter/index.html"],
body:has(a.card[href="remove-duplicates/index.html"]) a.card[href="remove-duplicates/index.html"],
body:has(a.card[href="text-sorter/index.html"]) a.card[href="text-sorter/index.html"],
body:has(a.card[href="slug-generator/index.html"]) a.card[href="slug-generator/index.html"],
body:has(a.card[href="lorem-ipsum/index.html"]) a.card[href="lorem-ipsum/index.html"] {
  position: relative !important;
  overflow: hidden !important;
  min-height: 190px !important;
}
/* Diff */
.dev-preview-diff {
  right: 13px !important;
  bottom: 14px !important;
  width: 113px !important;
  height: 55px !important;
  border: 1px solid rgba(225,211,255,.43) !important;
  border-radius: 9px !important;
  background: linear-gradient(145deg, #2a2445, #1b1b35) !important;
  box-shadow: 0 8px 17px rgba(19,14,60,.39), inset 0 1px 0 rgba(255,255,255,.10) !important;
  transform: rotate(-4deg) !important;
}
.dev-diff-line {
  position: absolute !important;
  left: 8px !important;
  display: block !important;
  width: 79px !important;
  height: 16px !important;
  padding-left: 5px !important;
  border-radius: 4px !important;
  font: 900 8px/16px Consolas, monospace !important;
}
.dev-diff-minus {
  top: 9px !important;
  color: #ffe5eb !important;
  background: rgba(188,68,95,.74) !important;
  text-decoration: line-through !important;
}
.dev-diff-plus {
  bottom: 9px !important;
  color: #e8fff0 !important;
  background: rgba(53,151,103,.72) !important;
}
.dev-diff-mark {
  position: absolute !important;
  right: -8px !important;
  top: 15px !important;
  display: grid !important;
  place-items: center !important;
  width: 23px !important;
  height: 23px !important;
  border-radius: 50% !important;
  color: #fff0a2 !important;
  background: #8060d7 !important;
  box-shadow: 0 5px 11px rgba(47,28,120,.42) !important;
  font: 900 15px/1 Arial, sans-serif !important;
}
/* Case converter */
.dev-preview-case {
  right: 11px !important;
  bottom: 14px !important;
  width: 122px !important;
  height: 55px !important;
}
.dev-case-camel,
.dev-case-upper {
  position: absolute !important;
  display: grid !important;
  place-items: center !important;
  height: 26px !important;
  border: 1px solid rgba(222,214,255,.56) !important;
  border-radius: 7px !important;
  color: #f6f2ff !important;
  box-shadow: 0 6px 12px rgba(32,19,88,.36), inset 0 1px 0 rgba(255,255,255,.20) !important;
  font: 900 9px/1 Consolas, monospace !important;
}
.dev-case-camel {
  left: 1px !important;
  top: 13px !important;
  width: 49px !important;
  background: #6d53c9 !important;
  transform: rotate(-6deg) !important;
}
.dev-case-upper {
  right: 1px !important;
  top: 13px !important;
  width: 49px !important;
  background: #469b7d !important;
  transform: rotate(6deg) !important;
}
.dev-case-arrow {
  position: absolute !important;
  left: 52px !important;
  top: 16px !important;
  z-index: 3 !important;
  color: #fff09c !important;
  font: 900 19px/1 Arial, sans-serif !important;
}
/* Duplicate remover */
.dev-preview-duplicates {
  right: 12px !important;
  bottom: 13px !important;
  width: 108px !important;
  height: 59px !important;
  border: 1px solid rgba(182,217,255,.49) !important;
  border-radius: 9px !important;
  background: linear-gradient(145deg, #243961, #1a2245) !important;
  box-shadow: 0 8px 17px rgba(18,32,85,.39), inset 0 1px 0 rgba(255,255,255,.10) !important;
  transform: rotate(4deg) !important;
}
.dev-dupe-lines {
  position: absolute !important;
  left: 12px !important;
  top: 12px !important;
  display: grid !important;
  gap: 5px !important;
}
.dev-dupe-lines i {
  display: block !important;
  width: 48px !important;
  height: 4px !important;
  border-radius: 99px !important;
  background: #b3dfff !important;
}
.dev-dupe-lines i:nth-child(2),
.dev-dupe-lines i:nth-child(3) {
  width: 39px !important;
  opacity: .48 !important;
}
.dev-dupe-lines i:nth-child(4) {
  width: 28px !important;
  background: #a4efc9 !important;
}
.dev-dupe-cut,
.dev-dupe-check {
  position: absolute !important;
  display: grid !important;
  place-items: center !important;
  width: 19px !important;
  height: 19px !important;
  border-radius: 50% !important;
  font: 900 13px/1 Arial, sans-serif !important;
}
.dev-dupe-cut {
  right: 9px !important;
  top: 12px !important;
  color: #ffe4e9 !important;
  background: #c35b72 !important;
}
.dev-dupe-check {
  right: 9px !important;
  bottom: 10px !important;
  color: #edffe8 !important;
  background: #54a875 !important;
}
/* Text sorter */
.dev-preview-sorter {
  right: 13px !important;
  bottom: 14px !important;
  width: 108px !important;
  height: 58px !important;
  border: 1px solid rgba(227,211,255,.49) !important;
  border-radius: 10px !important;
  background: linear-gradient(145deg, #352553, #241d43) !important;
  box-shadow: 0 8px 17px rgba(38,19,82,.39), inset 0 1px 0 rgba(255,255,255,.10) !important;
  transform: rotate(-4deg) !important;
}
.dev-sort-letter {
  position: absolute !important;
  left: 12px !important;
  display: grid !important;
  place-items: center !important;
  width: 21px !important;
  height: 15px !important;
  border-radius: 4px !important;
  color: #f7f1ff !important;
  font: 900 9px/1 Consolas, monospace !important;
}
.dev-sort-a { top: 8px !important; background: #5a91ca !important; }
.dev-sort-m { top: 22px !important; background: #8763d5 !important; }
.dev-sort-z { bottom: 8px !important; background: #56aa80 !important; }
.dev-sort-arrow {
  position: absolute !important;
  right: 16px !important;
  top: 12px !important;
  color: #fff09b !important;
  text-shadow: 0 0 8px rgba(255,234,121,.52) !important;
  font: 900 28px/1 Arial, sans-serif !important;
}
/* Slug */
.dev-preview-slug {
  right: 10px !important;
  bottom: 13px !important;
  width: 121px !important;
  height: 59px !important;
  border: 1px solid rgba(195,234,224,.48) !important;
  border-radius: 10px !important;
  background: linear-gradient(145deg, #1f4a50, #193343) !important;
  box-shadow: 0 8px 17px rgba(12,62,69,.39), inset 0 1px 0 rgba(255,255,255,.10) !important;
  transform: rotate(4deg) !important;
}
.dev-slug-title,
.dev-slug-url {
  position: absolute !important;
  left: 8px !important;
  display: grid !important;
  align-items: center !important;
  padding-left: 6px !important;
  height: 16px !important;
  border-radius: 4px !important;
  font: 900 8px/1 Consolas, monospace !important;
}
.dev-slug-title {
  top: 8px !important;
  width: 75px !important;
  color: #e7fbff !important;
  background: rgba(84,142,179,.69) !important;
}
.dev-slug-url {
  bottom: 8px !important;
  width: 92px !important;
  color: #edffef !important;
  background: rgba(62,154,110,.69) !important;
}
.dev-slug-arrow {
  position: absolute !important;
  right: 13px !important;
  top: 19px !important;
  color: #fff09a !important;
  font: 900 19px/1 Arial, sans-serif !important;
}
/* Lorem */
.dev-preview-lorem {
  right: 14px !important;
  bottom: 12px !important;
  width: 104px !important;
  height: 64px !important;
}
.dev-lorem-paper {
  position: absolute !important;
  left: 6px !important;
  bottom: 3px !important;
  display: grid !important;
  gap: 6px !important;
  width: 57px !important;
  height: 57px !important;
  padding: 14px 10px !important;
  box-sizing: border-box !important;
  border: 1px solid rgba(239,231,255,.70) !important;
  border-radius: 8px !important;
  background: linear-gradient(145deg, #9670de, #5b42aa) !important;
  box-shadow: 0 8px 17px rgba(53,29,125,.41), inset 0 1px 0 rgba(255,255,255,.28) !important;
  transform: rotate(-7deg) !important;
}
.dev-lorem-paper::before {
  content: "" !important;
  position: absolute !important;
  right: 0 !important;
  top: 0 !important;
  width: 15px !important;
  height: 15px !important;
  background: linear-gradient(135deg, rgba(255,255,255,.63) 0 49%, transparent 50%) !important;
}
.dev-lorem-paper i {
  display: block !important;
  height: 3px !important;
  border-radius: 99px !important;
  background: rgba(255,255,255,.68) !important;
}
.dev-lorem-paper i:nth-child(2) { width: 80% !important; }
.dev-lorem-paper i:nth-child(3) { width: 92% !important; }
.dev-lorem-paper i:nth-child(4) { width: 58% !important; }
.dev-lorem-label {
  position: absolute !important;
  right: 0 !important;
  bottom: 10px !important;
  display: grid !important;
  place-items: center !important;
  width: 45px !important;
  height: 23px !important;
  border: 1px solid rgba(239,225,255,.63) !important;
  border-radius: 7px !important;
  color: #fbf6ff !important;
  background: #9c579f !important;
  box-shadow: 0 6px 12px rgba(91,31,94,.38) !important;
  font: 900 8px/1 Arial, sans-serif !important;
  transform: rotate(8deg) !important;
}
a.card:has(.dev-preview-diff):hover .dev-preview-diff,
a.card:has(.dev-preview-case):hover .dev-preview-case,
a.card:has(.dev-preview-duplicates):hover .dev-preview-duplicates,
a.card:has(.dev-preview-sorter):hover .dev-preview-sorter,
a.card:has(.dev-preview-slug):hover .dev-preview-slug,
a.card:has(.dev-preview-lorem):hover .dev-preview-lorem {
  transform: translateY(-7px) scale(1.04) !important;
}
@media (max-width: 640px) {
  .dev-preview-diff,
  .dev-preview-case,
  .dev-preview-duplicates,
  .dev-preview-sorter,
  .dev-preview-slug,
  .dev-preview-lorem {
    transform: scale(.88) !important;
    transform-origin: right bottom !important;
  }
}
@media (prefers-reduced-motion: reduce) {
  .dev-preview-diff,
  .dev-preview-diff *,
  .dev-preview-case,
  .dev-preview-case *,
  .dev-preview-duplicates,
  .dev-preview-duplicates *,
  .dev-preview-sorter,
  .dev-preview-sorter *,
  .dev-preview-slug,
  .dev-preview-slug *,
  .dev-preview-lorem,
  .dev-preview-lorem * {
    transition: none !important;
  }
}
/* DEV-TEXT-CARDS-END */
/* DEV-CODE-SEO-CARDS-START */
body:has(a.card[href="regex-tester/index.html"]) a.card[href="regex-tester/index.html"],
body:has(a.card[href="code-minifier/index.html"]) a.card[href="code-minifier/index.html"],
body:has(a.card[href="gradient-generator/index.html"]) a.card[href="gradient-generator/index.html"],
body:has(a.card[href="color-picker/index.html"]) a.card[href="color-picker/index.html"],
body:has(a.card[href="hex-to-rgb/index.html"]) a.card[href="hex-to-rgb/index.html"],
body:has(a.card[href="og-generator/index.html"]) a.card[href="og-generator/index.html"],
body:has(a.card[href="robots-generator/index.html"]) a.card[href="robots-generator/index.html"],
body:has(a.card[href="sitemap-generator/index.html"]) a.card[href="sitemap-generator/index.html"],
body:has(a.card[href="schema-generator/index.html"]) a.card[href="schema-generator/index.html"],
body:has(a.card[href="utm-builder/index.html"]) a.card[href="utm-builder/index.html"] {
  position: relative !important;
  overflow: hidden !important;
  min-height: 190px !important;
}
/* Regex */
.dev-preview-regex {
  right: 13px !important;
  bottom: 14px !important;
  width: 112px !important;
  height: 54px !important;
  border: 1px solid rgba(222,205,255,.49) !important;
  border-radius: 10px !important;
  background: linear-gradient(145deg, #362454, #241c45) !important;
  box-shadow: 0 8px 17px rgba(38,17,87,.40), inset 0 1px 0 rgba(255,255,255,.11) !important;
  transform: rotate(-4deg) !important;
}
.dev-regex-slash,
.dev-regex-pattern,
.dev-regex-flag {
  position: absolute !important;
  color: #eaf9ff !important;
  font-family: Consolas, monospace !important;
  font-weight: 900 !important;
}
.dev-regex-slash {
  left: 9px !important;
  top: 12px !important;
  color: #a9ebff !important;
  font-size: 25px !important;
  line-height: 1 !important;
}
.dev-regex-pattern {
  left: 24px !important;
  top: 18px !important;
  color: #f0c8ff !important;
  font-size: 11px !important;
}
.dev-regex-slash-end {
  left: 67px !important;
}
.dev-regex-flag {
  right: 8px !important;
  bottom: 9px !important;
  color: #9cf0c5 !important;
  font-size: 10px !important;
}
/* Minifier */
.dev-preview-minify {
  right: 13px !important;
  bottom: 14px !important;
  width: 108px !important;
  height: 56px !important;
  border: 1px solid rgba(255,222,194,.48) !important;
  border-radius: 10px !important;
  background: linear-gradient(145deg, #523521, #3d2730) !important;
  box-shadow: 0 8px 17px rgba(83,38,18,.39), inset 0 1px 0 rgba(255,255,255,.11) !important;
  transform: rotate(4deg) !important;
}
.dev-minify-code,
.dev-minify-small {
  position: absolute !important;
  display: grid !important;
  place-items: center !important;
  border-radius: 6px !important;
  font: 900 14px/1 Consolas, monospace !important;
}
.dev-minify-code {
  left: 9px !important;
  top: 12px !important;
  width: 37px !important;
  height: 29px !important;
  color: #fff3d9 !important;
  background: #bd7441 !important;
}
.dev-minify-arrow {
  position: absolute !important;
  left: 50px !important;
  top: 15px !important;
  color: #fff2a3 !important;
  font: 900 22px/1 Arial, sans-serif !important;
}
.dev-minify-small {
  right: 8px !important;
  bottom: 11px !important;
  width: 29px !important;
  height: 20px !important;
  color: #eafff3 !important;
  background: #4b9e7d !important;
  font-size: 10px !important;
}
/* Gradient */
.dev-preview-gradient {
  right: 11px !important;
  bottom: 13px !important;
  width: 118px !important;
  height: 61px !important;
}
.dev-gradient-swatch {
  position: absolute !important;
  left: 2px !important;
  bottom: 4px !important;
  display: block !important;
  width: 59px !important;
  height: 54px !important;
  border: 1px solid rgba(255,255,255,.55) !important;
  border-radius: 12px !important;
  background: linear-gradient(135deg, #ff8a71, #cf5bdb 47%, #5e8dff 100%) !important;
  box-shadow: 0 8px 18px rgba(113,43,139,.42), inset 0 1px 0 rgba(255,255,255,.38) !important;
  transform: rotate(-7deg) !important;
}
.dev-gradient-code {
  position: absolute !important;
  right: 0 !important;
  bottom: 10px !important;
  display: grid !important;
  place-items: center !important;
  width: 57px !important;
  height: 25px !important;
  border: 1px solid rgba(232,226,255,.60) !important;
  border-radius: 7px !important;
  color: #f7f3ff !important;
  background: #443677 !important;
  box-shadow: 0 6px 12px rgba(34,20,93,.36) !important;
  font: 900 8px/1 Consolas, monospace !important;
  transform: rotate(6deg) !important;
}
.dev-gradient-spark {
  position: absolute !important;
  left: 51px !important;
  top: 0 !important;
  color: #fff49c !important;
  text-shadow: 0 0 8px rgba(255,238,117,.83) !important;
  font: 900 21px/1 Arial, sans-serif !important;
}
/* Color picker */
.dev-preview-picker {
  right: 10px !important;
  bottom: 12px !important;
  width: 123px !important;
  height: 64px !important;
}
.dev-picker-wheel {
  position: absolute !important;
  left: 3px !important;
  bottom: 5px !important;
  display: block !important;
  width: 53px !important;
  height: 53px !important;
  border: 2px solid rgba(255,255,255,.65) !important;
  border-radius: 50% !important;
  background: conic-gradient(#ff627d, #ffc65e, #96e772, #55dddb, #5e85ff, #bd6aec, #ff627d) !important;
  box-shadow: 0 8px 17px rgba(57,31,112,.39) !important;
  transform: rotate(-9deg) !important;
}
.dev-picker-wheel::after {
  content: "" !important;
  position: absolute !important;
  inset: 12px !important;
  border-radius: 50% !important;
  background: #2b2150 !important;
}
.dev-picker-drop {
  position: absolute !important;
  left: 21px !important;
  top: 15px !important;
  z-index: 2 !important;
  width: 15px !important;
  height: 15px !important;
  border: 2px solid #fff !important;
  border-radius: 50% 50% 50% 0 !important;
  background: #9f6dff !important;
  box-shadow: 0 0 9px rgba(194,143,255,.69) !important;
  transform: rotate(-45deg) !important;
}
.dev-picker-hex {
  position: absolute !important;
  right: 0 !important;
  bottom: 12px !important;
  display: grid !important;
  place-items: center !important;
  width: 66px !important;
  height: 26px !important;
  border: 1px solid rgba(234,224,255,.61) !important;
  border-radius: 7px !important;
  color: #fbf7ff !important;
  background: #6545bf !important;
  box-shadow: 0 6px 12px rgba(43,23,121,.39) !important;
  font: 900 8px/1 Consolas, monospace !important;
  transform: rotate(6deg) !important;
}
/* HEX to RGB */
.dev-preview-hexrgb {
  right: 11px !important;
  bottom: 14px !important;
  width: 118px !important;
  height: 55px !important;
  border: 1px solid rgba(232,214,255,.49) !important;
  border-radius: 9px !important;
  background: linear-gradient(145deg, #34234f, #241d43) !important;
  box-shadow: 0 8px 17px rgba(37,18,80,.39), inset 0 1px 0 rgba(255,255,255,.10) !important;
  transform: rotate(-4deg) !important;
}
.dev-hex-value,
.dev-rgb-value {
  position: absolute !important;
  display: grid !important;
  place-items: center !important;
  height: 25px !important;
  border-radius: 6px !important;
  color: #fdf5ff !important;
  font: 900 9px/1 Consolas, monospace !important;
}
.dev-hex-value {
  left: 7px !important;
  top: 15px !important;
  width: 52px !important;
  background: #a35ed8 !important;
}
.dev-hex-arrow {
  position: absolute !important;
  left: 62px !important;
  top: 17px !important;
  color: #fff19b !important;
  font: 900 18px/1 Arial, sans-serif !important;
}
.dev-rgb-value {
  right: 7px !important;
  top: 15px !important;
  width: 33px !important;
  background: #499d83 !important;
}
/* Open Graph */
.dev-preview-og {
  right: 13px !important;
  bottom: 13px !important;
  width: 113px !important;
  height: 61px !important;
}
.dev-og-browser {
  position: absolute !important;
  inset: 2px 0 0 2px !important;
  display: block !important;
  overflow: hidden !important;
  border: 1px solid rgba(216,234,255,.67) !important;
  border-radius: 9px !important;
  background: linear-gradient(145deg, #4f84cf 0%, #285799 46%, #26345f 47%, #1d264a 100%) !important;
  box-shadow: 0 8px 17px rgba(18,43,111,.40), inset 0 1px 0 rgba(255,255,255,.26) !important;
  transform: rotate(-5deg) !important;
}
.dev-og-browser i {
  position: relative !important;
  left: 8px !important;
  top: 7px !important;
  display: inline-block !important;
  width: 4px !important;
  height: 4px !important;
  margin-right: 2px !important;
  border-radius: 50% !important;
  background: rgba(255,255,255,.75) !important;
}
.dev-og-browser b {
  position: absolute !important;
  left: 8px !important;
  top: 25px !important;
  color: #f2f7ff !important;
  font: 900 10px/1 Arial, sans-serif !important;
}
.dev-og-browser small {
  position: absolute !important;
  left: 8px !important;
  bottom: 8px !important;
  color: rgba(224,239,255,.78) !important;
  font: 800 7px/1 Arial, sans-serif !important;
}
/* Robots */
.dev-preview-robots {
  right: 12px !important;
  bottom: 12px !important;
  width: 116px !important;
  height: 65px !important;
}
.dev-robot-file {
  position: absolute !important;
  left: 3px !important;
  bottom: 2px !important;
  display: grid !important;
  gap: 4px !important;
  width: 71px !important;
  height: 58px !important;
  padding: 11px 8px !important;
  box-sizing: border-box !important;
  border: 1px solid rgba(237,250,224,.67) !important;
  border-radius: 8px !important;
  background: linear-gradient(145deg, #7eb55f, #43805d) !important;
  box-shadow: 0 8px 17px rgba(31,91,48,.39), inset 0 1px 0 rgba(255,255,255,.27) !important;
  transform: rotate(-6deg) !important;
}
.dev-robot-file::before {
  content: "" !important;
  position: absolute !important;
  right: 0 !important;
  top: 0 !important;
  width: 15px !important;
  height: 15px !important;
  background: linear-gradient(135deg, rgba(255,255,255,.60) 0 49%, transparent 50%) !important;
}
.dev-robot-file b {
  color: #f8ffec !important;
  font: 900 9px/1 Consolas, monospace !important;
}
.dev-robot-file i {
  color: rgba(246,255,235,.80) !important;
  font: 800 7px/1 Consolas, monospace !important;
  font-style: normal !important;
}
.dev-robot-bot {
  position: absolute !important;
  right: 0 !important;
  bottom: 9px !important;
  display: grid !important;
  place-items: center !important;
  width: 36px !important;
  height: 36px !important;
  border: 1px solid rgba(231,255,222,.61) !important;
  border-radius: 11px !important;
  background: #4d9368 !important;
  box-shadow: 0 6px 13px rgba(23,96,50,.39) !important;
  font-size: 19px !important;
  transform: rotate(8deg) !important;
}
/* Sitemap */
.dev-preview-sitemap {
  right: 12px !important;
  bottom: 12px !important;
  width: 112px !important;
  height: 65px !important;
  border: 1px solid rgba(203,245,229,.49) !important;
  border-radius: 10px !important;
  background: linear-gradient(145deg, #204b52, #193440) !important;
  box-shadow: 0 8px 17px rgba(10,63,69,.39), inset 0 1px 0 rgba(255,255,255,.10) !important;
  transform: rotate(-4deg) !important;
}
.dev-map-node {
  position: absolute !important;
  display: block !important;
  width: 13px !important;
  height: 13px !important;
  border: 2px solid #d8fff0 !important;
  border-radius: 4px !important;
  background: #48ad8e !important;
  box-shadow: 0 0 7px rgba(116,246,194,.36) !important;
}
.dev-map-root {
  left: 18px !important;
  top: 11px !important;
}
.dev-map-child-a {
  left: 8px !important;
  bottom: 11px !important;
  background: #579bce !important;
}
.dev-map-child-b {
  left: 40px !important;
  bottom: 11px !important;
  background: #9b6fda !important;
}
.dev-map-line {
  position: absolute !important;
  left: 25px !important;
  top: 25px !important;
  display: block !important;
  width: 2px !important;
  height: 18px !important;
  background: #a9ebcf !important;
  transform-origin: top center !important;
}
.dev-map-line-a { transform: rotate(-38deg) !important; }
.dev-map-line-b { transform: rotate(38deg) !important; }
.dev-map-label {
  position: absolute !important;
  right: 9px !important;
  top: 20px !important;
  color: #e6fff5 !important;
  font: 900 15px/1 Consolas, monospace !important;
}
/* Schema */
.dev-preview-schema {
  right: 13px !important;
  bottom: 13px !important;
  width: 105px !important;
  height: 61px !important;
  border: 1px solid rgba(250,228,190,.54) !important;
  border-radius: 10px !important;
  background: linear-gradient(145deg, #554027, #382c2b) !important;
  box-shadow: 0 8px 17px rgba(77,47,17,.39), inset 0 1px 0 rgba(255,255,255,.11) !important;
  transform: rotate(4deg) !important;
}
.dev-schema-brace {
  position: absolute !important;
  left: 10px !important;
  top: 9px !important;
  color: #ffce7b !important;
  font: 900 35px/1 Consolas, monospace !important;
}
.dev-schema-close {
  left: auto !important;
  right: 27px !important;
  top: 18px !important;
  font-size: 27px !important;
}
.dev-schema-lines {
  position: absolute !important;
  left: 30px !important;
  top: 17px !important;
  display: grid !important;
  gap: 6px !important;
}
.dev-schema-lines i {
  display: block !important;
  width: 27px !important;
  height: 4px !important;
  border-radius: 99px !important;
  background: #f4ad6d !important;
}
.dev-schema-lines i:nth-child(2) { width: 17px !important; background: #a5df83 !important; }
.dev-schema-lines i:nth-child(3) { width: 23px !important; background: #8dcdf3 !important; }
.dev-schema-ld {
  position: absolute !important;
  right: -7px !important;
  bottom: -7px !important;
  display: grid !important;
  place-items: center !important;
  width: 25px !important;
  height: 20px !important;
  border-radius: 6px !important;
  color: #fff8e7 !important;
  background: #c2793f !important;
  box-shadow: 0 5px 10px rgba(106,52,18,.40) !important;
  font: 900 9px/1 Arial, sans-serif !important;
}
/* UTM */
.dev-preview-utm {
  right: 10px !important;
  bottom: 13px !important;
  width: 122px !important;
  height: 59px !important;
  border: 1px solid rgba(213,236,255,.51) !important;
  border-radius: 10px !important;
  background: linear-gradient(145deg, #274563, #1c2d4d) !important;
  box-shadow: 0 8px 17px rgba(14,42,77,.39), inset 0 1px 0 rgba(255,255,255,.10) !important;
  transform: rotate(-4deg) !important;
}
.dev-utm-url,
.dev-utm-query,
.dev-utm-tag {
  position: absolute !important;
  left: 8px !important;
  display: grid !important;
  align-items: center !important;
  padding-left: 5px !important;
  height: 14px !important;
  border-radius: 4px !important;
  font: 900 8px/1 Consolas, monospace !important;
}
.dev-utm-url {
  top: 8px !important;
  width: 54px !important;
  color: #e2f7ff !important;
  background: rgba(77,145,197,.68) !important;
}
.dev-utm-query {
  top: 24px !important;
  width: 47px !important;
  color: #fff3d1 !important;
  background: rgba(187,130,66,.71) !important;
}
.dev-utm-tag {
  bottom: 8px !important;
  width: 83px !important;
  color: #eaffed !important;
  background: rgba(64,156,107,.73) !important;
}
a.card:has(.dev-preview-regex):hover .dev-preview-regex,
a.card:has(.dev-preview-minify):hover .dev-preview-minify,
a.card:has(.dev-preview-gradient):hover .dev-preview-gradient,
a.card:has(.dev-preview-picker):hover .dev-preview-picker,
a.card:has(.dev-preview-hexrgb):hover .dev-preview-hexrgb,
a.card:has(.dev-preview-og):hover .dev-preview-og,
a.card:has(.dev-preview-robots):hover .dev-preview-robots,
a.card:has(.dev-preview-sitemap):hover .dev-preview-sitemap,
a.card:has(.dev-preview-schema):hover .dev-preview-schema,
a.card:has(.dev-preview-utm):hover .dev-preview-utm {
  transform: translateY(-7px) scale(1.04) !important;
}
@media (max-width: 640px) {
  .dev-preview-regex,
  .dev-preview-minify,
  .dev-preview-gradient,
  .dev-preview-picker,
  .dev-preview-hexrgb,
  .dev-preview-og,
  .dev-preview-robots,
  .dev-preview-sitemap,
  .dev-preview-schema,
  .dev-preview-utm {
    transform: scale(.88) !important;
    transform-origin: right bottom !important;
  }
}
@media (prefers-reduced-motion: reduce) {
  .dev-preview-regex,
  .dev-preview-regex *,
  .dev-preview-minify,
  .dev-preview-minify *,
  .dev-preview-gradient,
  .dev-preview-gradient *,
  .dev-preview-picker,
  .dev-preview-picker *,
  .dev-preview-hexrgb,
  .dev-preview-hexrgb *,
  .dev-preview-og,
  .dev-preview-og *,
  .dev-preview-robots,
  .dev-preview-robots *,
  .dev-preview-sitemap,
  .dev-preview-sitemap *,
  .dev-preview-schema,
  .dev-preview-schema *,
  .dev-preview-utm,
  .dev-preview-utm * {
    transition: none !important;
  }
}
/* DEV-CODE-SEO-CARDS-END */
/* DEVELOPER-SUITE-MAIN-CARD-STYLE-START */
/*
  Applies the main Vamriko card language only to developer-tools/index.html.
  The page fingerprint is the JSON Formatter card link.
*/
body:has(a.card[href="json-formatter/index.html"]) {
  background:
    radial-gradient(circle at 82% 10%, rgba(92, 67, 197, .13), transparent 31rem),
    radial-gradient(circle at 11% 38%, rgba(49, 114, 205, .08), transparent 29rem),
    #050507 !important;
}
body:has(a.card[href="json-formatter/index.html"]) main {
  position: relative !important;
}
body:has(a.card[href="json-formatter/index.html"]) main::before {
  content: "" !important;
  position: absolute !important;
  inset: 0 !important;
  z-index: 0 !important;
  pointer-events: none !important;
  opacity: .30 !important;
  background:
    linear-gradient(rgba(133, 112, 231, .045) 1px, transparent 1px),
    linear-gradient(90deg, rgba(133, 112, 231, .045) 1px, transparent 1px) !important;
  background-size: 32px 32px !important;
  mask-image: linear-gradient(to bottom, black 0%, transparent 76%) !important;
}
body:has(a.card[href="json-formatter/index.html"]) main > * {
  position: relative !important;
  z-index: 1 !important;
}
body:has(a.card[href="json-formatter/index.html"]) .page-head,
body:has(a.card[href="json-formatter/index.html"]) .wrap > h1,
body:has(a.card[href="json-formatter/index.html"]) .wrap > h2 {
  color: #f8f7ff !important;
}
body:has(a.card[href="json-formatter/index.html"]) a.card {
  position: relative !important;
  display: block !important;
  min-height: 205px !important;
  padding: 24px 22px !important;
  overflow: hidden !important;
  border: 1px solid rgba(151, 133, 220, .17) !important;
  border-radius: 19px !important;
  color: inherit !important;
  background:
    radial-gradient(circle at 100% 0%, rgba(115, 83, 218, .13), transparent 45%),
    linear-gradient(145deg, rgba(24, 22, 39, .98) 0%, rgba(18, 18, 30, .98) 58%, rgba(14, 15, 25, .99) 100%) !important;
  box-shadow:
    0 12px 28px rgba(0, 0, 0, .23),
    inset 0 1px 0 rgba(255,255,255,.035) !important;
  text-decoration: none !important;
  isolation: isolate !important;
  transition:
    transform .26s cubic-bezier(.2,.85,.25,1),
    border-color .26s ease,
    box-shadow .26s ease,
    background .26s ease !important;
}
body:has(a.card[href="json-formatter/index.html"]) a.card::before {
  content: "" !important;
  position: absolute !important;
  left: -35% !important;
  bottom: -85% !important;
  z-index: -1 !important;
  width: 150% !important;
  height: 125% !important;
  opacity: .24 !important;
  background: radial-gradient(ellipse, rgba(104, 76, 208, .38), transparent 66%) !important;
  transform: rotate(-12deg) !important;
  transition: opacity .26s ease, transform .34s ease !important;
}
body:has(a.card[href="json-formatter/index.html"]) a.card::after {
  content: "↗" !important;
  position: absolute !important;
  right: 18px !important;
  top: 17px !important;
  z-index: 9 !important;
  display: grid !important;
  place-items: center !important;
  width: 29px !important;
  height: 29px !important;
  border: 1px solid rgba(185, 168, 255, .15) !important;
  border-radius: 9px !important;
  color: #d7caff !important;
  background: rgba(46, 38, 84, .30) !important;
  box-shadow: inset 0 1px 0 rgba(255,255,255,.05) !important;
  font: 800 14px/1 Arial, sans-serif !important;
  transition: transform .26s ease, color .26s ease, background .26s ease, border-color .26s ease !important;
}
body:has(a.card[href="json-formatter/index.html"]) a.card:hover {
  z-index: 4 !important;
  border-color: rgba(164, 142, 250, .43) !important;
  background:
    radial-gradient(circle at 100% 0%, rgba(132, 95, 251, .20), transparent 48%),
    linear-gradient(145deg, rgba(30, 26, 52, 1) 0%, rgba(21, 20, 38, 1) 58%, rgba(16, 16, 29, 1) 100%) !important;
  box-shadow:
    0 21px 41px rgba(0, 0, 0, .33),
    0 0 0 1px rgba(154, 131, 246, .05),
    0 0 26px rgba(100, 71, 217, .13),
    inset 0 1px 0 rgba(255,255,255,.065) !important;
  transform: translateY(-7px) !important;
}
body:has(a.card[href="json-formatter/index.html"]) a.card:hover::before {
  opacity: .48 !important;
  transform: translate(8px, -9px) rotate(-12deg) !important;
}
body:has(a.card[href="json-formatter/index.html"]) a.card:hover::after {
  border-color: rgba(202, 186, 255, .44) !important;
  color: #fff !important;
  background: rgba(109, 77, 211, .36) !important;
  transform: translate(2px, -2px) rotate(8deg) !important;
}
/* Category becomes the small glowing pill used across the main page cards. */
body:has(a.card[href="json-formatter/index.html"]) a.card > div:first-child,
body:has(a.card[href="json-formatter/index.html"]) a.card .category,
body:has(a.card[href="json-formatter/index.html"]) a.card .eyebrow {
  position: relative !important;
  z-index: 5 !important;
  display: inline-flex !important;
  align-items: center !important;
  min-height: 22px !important;
  max-width: calc(100% - 42px) !important;
  margin: 0 0 12px !important;
  padding: 0 8px !important;
  overflow: hidden !important;
  border: 1px solid rgba(158, 132, 250, .35) !important;
  border-radius: 999px !important;
  color: #cfc1ff !important;
  background: rgba(91, 65, 180, .17) !important;
  box-shadow: inset 0 1px 0 rgba(255,255,255,.07) !important;
  font-size: .65rem !important;
  font-weight: 900 !important;
  letter-spacing: .07em !important;
  line-height: 1 !important;
  text-transform: uppercase !important;
  white-space: nowrap !important;
  text-overflow: ellipsis !important;
}
/*
  The old icon container is already empty on cards that have a preview.
  Hiding only empty icon-like elements prevents leftover emoji spacing.
*/
body:has(a.card[href="json-formatter/index.html"]) a.card .icon:empty,
body:has(a.card[href="json-formatter/index.html"]) a.card .card-icon:empty {
  display: none !important;
}
body:has(a.card[href="json-formatter/index.html"]) a.card h3 {
  position: relative !important;
  z-index: 5 !important;
  max-width: 78% !important;
  margin: 0 0 9px !important;
  color: #fbfaff !important;
  font-size: 1.06rem !important;
  font-weight: 850 !important;
  line-height: 1.22 !important;
  letter-spacing: -.018em !important;
}
body:has(a.card[href="json-formatter/index.html"]) a.card p {
  position: relative !important;
  z-index: 5 !important;
  max-width: 73% !important;
  margin: 0 !important;
  color: #b9b6c9 !important;
  font-size: .84rem !important;
  line-height: 1.55 !important;
}
/* Existing mini visuals inherit more depth and sit like the homepage previews. */
body:has(a.card[href="json-formatter/index.html"]) a.card .dev-preview {
  z-index: 7 !important;
  filter: saturate(1.08) contrast(1.03) !important;
}
body:has(a.card[href="json-formatter/index.html"]) a.card:hover .dev-preview {
  filter: saturate(1.16) contrast(1.06) drop-shadow(0 10px 14px rgba(0,0,0,.22)) !important;
}
/* Colour accents by tool family. */
body:has(a.card[href="json-formatter/index.html"]) a.card[href*="json"],
body:has(a.card[href="json-formatter/index.html"]) a.card[href*="base64"],
body:has(a.card[href="json-formatter/index.html"]) a.card[href*="jwt"],
body:has(a.card[href="json-formatter/index.html"]) a.card[href*="uuid"],
body:has(a.card[href="json-formatter/index.html"]) a.card[href*="timestamp"] {
  --suite-accent: 116, 142, 255;
}
body:has(a.card[href="json-formatter/index.html"]) a.card[href*="encoder"],
body:has(a.card[href="json-formatter/index.html"]) a.card[href*="markdown"],
body:has(a.card[href="json-formatter/index.html"]) a.card[href*="diff"],
body:has(a.card[href="json-formatter/index.html"]) a.card[href*="case"],
body:has(a.card[href="json-formatter/index.html"]) a.card[href*="slug"],
body:has(a.card[href="json-formatter/index.html"]) a.card[href*="lorem"] {
  --suite-accent: 177, 112, 255;
}
body:has(a.card[href="json-formatter/index.html"]) a.card[href*="regex"],
body:has(a.card[href="json-formatter/index.html"]) a.card[href*="gradient"],
body:has(a.card[href="json-formatter/index.html"]) a.card[href*="color"],
body:has(a.card[href="json-formatter/index.html"]) a.card[href*="hex"] {
  --suite-accent: 244, 142, 107;
}
body:has(a.card[href="json-formatter/index.html"]) a.card[href*="robots"],
body:has(a.card[href="json-formatter/index.html"]) a.card[href*="sitemap"],
body:has(a.card[href="json-formatter/index.html"]) a.card[href*="schema"],
body:has(a.card[href="json-formatter/index.html"]) a.card[href*="utm"],
body:has(a.card[href="json-formatter/index.html"]) a.card[href*="og-"] {
  --suite-accent: 92, 215, 161;
}
body:has(a.card[href="json-formatter/index.html"]) a.card:hover {
  border-color: rgba(var(--suite-accent, 166, 142, 250), .44) !important;
  box-shadow:
    0 21px 41px rgba(0,0,0,.33),
    0 0 0 1px rgba(var(--suite-accent, 166, 142, 250), .06),
    0 0 27px rgba(var(--suite-accent, 166, 142, 250), .12),
    inset 0 1px 0 rgba(255,255,255,.065) !important;
}
body:has(a.card[href="json-formatter/index.html"]) a.card:hover > div:first-child,
body:has(a.card[href="json-formatter/index.html"]) a.card:hover .category,
body:has(a.card[href="json-formatter/index.html"]) a.card:hover .eyebrow {
  border-color: rgba(var(--suite-accent, 166, 142, 250), .52) !important;
  color: rgb(222, 218, 255) !important;
  background: rgba(var(--suite-accent, 166, 142, 250), .14) !important;
}
@media (max-width: 760px) {
  body:has(a.card[href="json-formatter/index.html"]) a.card {
    min-height: 194px !important;
    padding: 20px 18px !important;
  }
  body:has(a.card[href="json-formatter/index.html"]) a.card h3 {
    max-width: 76% !important;
  }
  body:has(a.card[href="json-formatter/index.html"]) a.card p {
    max-width: 70% !important;
  }
}
@media (max-width: 500px) {
  body:has(a.card[href="json-formatter/index.html"]) a.card {
    min-height: 182px !important;
  }
  body:has(a.card[href="json-formatter/index.html"]) a.card p {
    max-width: 68% !important;
    font-size: .79rem !important;
  }
}
@media (prefers-reduced-motion: reduce) {
  body:has(a.card[href="json-formatter/index.html"]) a.card,
  body:has(a.card[href="json-formatter/index.html"]) a.card::before,
  body:has(a.card[href="json-formatter/index.html"]) a.card::after {
    transition: none !important;
  }
}
/* DEVELOPER-SUITE-MAIN-CARD-STYLE-END */
/* PREMIUM-HERO-COPY-START */
.hero-kicker {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  margin-bottom: 18px;
  color: #a98cff;
  font-size: .68rem;
  font-weight: 900;
  letter-spacing: .16em;
  text-transform: uppercase;
}
.hero-kicker::before {
  content: "";
  display: inline-block;
  width: 20px;
  height: 1px;
  background: linear-gradient(90deg, transparent, #9b79ff);
}
.hero h1 {
  max-width: 650px;
  margin-bottom: 18px;
  letter-spacing: -.065em;
  line-height: .93;
}
.hero h1 span {
  display: inline-block;
  color: #a66cff;
  background: linear-gradient(100deg, #c4a4ff 0%, #8b55ff 48%, #ba86ff 100%);
  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-fill-color: transparent;
  text-shadow: 0 0 28px rgba(139, 85, 255, .14);
}
.hero-copy {
  max-width: 510px;
  margin-bottom: 26px;
  color: #b9b5c8;
  font-size: 1.02rem;
  line-height: 1.65;
}
.hero-trust {
  display: inline-flex;
  flex-wrap: wrap;
  gap: 8px 15px;
  align-items: center;
  margin-top: 19px;
  padding: 9px 13px;
  border: 1px solid rgba(159, 136, 255, .15);
  border-radius: 999px;
  color: #c9c4d7;
  background: rgba(34, 29, 53, .35);
  box-shadow: inset 0 1px 0 rgba(255,255,255,.035);
  font-size: .75rem;
  font-weight: 700;
  line-height: 1.3;
  backdrop-filter: blur(10px);
}
.hero-trust span {
  white-space: nowrap;
}
.hero-trust b {
  margin-right: 4px;
  color: #9b76ff;
  font-size: .82rem;
}
.hero-actions .btn.primary span {
  display: inline-block;
  margin-left: 3px;
  transition: transform .22s ease;
}
.hero-actions .btn.primary:hover span {
  transform: translateX(4px);
}
@media (max-width: 600px) {
  .hero-trust {
    display: flex;
    width: 100%;
    border-radius: 15px;
  }
  .hero h1 {
    letter-spacing: -.052em;
  }
}
@media (prefers-reduced-motion: reduce) {
  .hero-actions .btn.primary span {
    transition: none;
  }
}
/* PREMIUM-HERO-COPY-END */
/* FINAL-PREMIUM-HOME-HERO-START */
.home-hero-copy {
  position: relative !important;
  padding: 6px 0 4px !important;
}
/* Compact marble-violet title: premium but not oversized. */
.home-hero-copy h1 {
  max-width: 560px !important;
  margin: 0 0 14px !important;
  font-size: clamp(2.2rem, 3.55vw, 3.45rem) !important;
  font-weight: 900 !important;
  letter-spacing: -.062em !important;
  line-height: .98 !important;
  background:
    linear-gradient(
      112deg,
      #64457f 0%,
      #8760af 22%,
      #d9cce7 43%,
      #9d73c4 60%,
      #5c3e7d 80%,
      #bca6d1 100%
    ) !important;
  -webkit-background-clip: text !important;
  background-clip: text !important;
  -webkit-text-fill-color: transparent !important;
  text-shadow:
    0 1px 0 rgba(255,255,255,.045),
    0 8px 20px rgba(85, 46, 133, .15) !important;
}
.home-hero-copy h1 span {
  display: inline-block !important;
  background:
    linear-gradient(
      104deg,
      #583b79 0%,
      #7e56a5 24%,
      #cdbde0 48%,
      #8d60b9 65%,
      #513572 94%
    ) !important;
  -webkit-background-clip: text !important;
  background-clip: text !important;
  -webkit-text-fill-color: transparent !important;
  text-shadow:
    0 1px 0 rgba(255,255,255,.03),
    0 7px 19px rgba(85, 46, 133, .17) !important;
}
.home-hero-copy::before {
  content: "" !important;
  position: absolute !important;
  left: -50px !important;
  top: -48px !important;
  z-index: -1 !important;
  width: 390px !important;
  height: 210px !important;
  pointer-events: none !important;
  opacity: .27 !important;
  background:
    radial-gradient(ellipse at 42% 48%, rgba(173, 134, 224, .13), transparent 61%),
    radial-gradient(ellipse at 77% 25%, rgba(246, 234, 255, .05), transparent 40%) !important;
  filter: blur(8px) !important;
}
.home-hero-copy .eyebrow {
  display: inline-flex !important;
  align-items: center !important;
  gap: 8px !important;
  margin-bottom: 12px !important;
  color: #8870a9 !important;
  font-size: .57rem !important;
  font-weight: 900 !important;
  letter-spacing: .18em !important;
  line-height: 1 !important;
  text-transform: uppercase !important;
}
.home-hero-copy .eyebrow::before {
  content: "" !important;
  display: block !important;
  width: 18px !important;
  height: 1px !important;
  background: linear-gradient(90deg, transparent, #815bb2, #b69aca) !important;
}
.home-hero-copy > p {
  max-width: 420px !important;
  margin: 0 0 19px !important;
  color: #9690a2 !important;
  font-size: .84rem !important;
  font-weight: 500 !important;
  line-height: 1.58 !important;
}
.home-hero-copy .actions {
  display: flex !important;
  flex-wrap: wrap !important;
  gap: 8px !important;
}
.home-hero-copy .actions .btn {
  min-height: 37px !important;
  padding: 0 14px !important;
  border-radius: 10px !important;
  font-size: .74rem !important;
  font-weight: 800 !important;
}
.home-hero-copy .actions .btn-primary {
  border-color: rgba(196, 166, 255, .28) !important;
  background: linear-gradient(135deg, #603eaa, #8055cc 52%, #6945b2) !important;
  box-shadow:
    0 8px 17px rgba(91, 51, 180, .20),
    inset 0 1px 0 rgba(255,255,255,.15) !important;
}
.home-hero-copy .actions .btn-primary:hover {
  background: linear-gradient(135deg, #6d49bd, #8e64db 52%, #7550c3) !important;
  box-shadow:
    0 10px 21px rgba(101, 56, 199, .28),
    inset 0 1px 0 rgba(255,255,255,.20) !important;
}
.home-hero-copy .actions .btn-primary span {
  display: inline-block !important;
  margin-left: 3px !important;
  transition: transform .22s ease !important;
}
.home-hero-copy .actions .btn-primary:hover span {
  transform: translateX(3px) !important;
}
/* Separate compact trust pills: less heavy than one long capsule. */
.home-hero-copy .trust-line {
  display: flex !important;
  flex-wrap: wrap !important;
  gap: 6px !important;
  align-items: center !important;
  margin-top: 14px !important;
  padding: 0 !important;
  border: 0 !important;
  border-radius: 0 !important;
  background: transparent !important;
  box-shadow: none !important;
  backdrop-filter: none !important;
}
.home-hero-copy .trust-line span {
  display: inline-flex !important;
  align-items: center !important;
  min-height: 25px !important;
  padding: 0 9px !important;
  border: 1px solid rgba(151, 125, 198, .14) !important;
  border-radius: 999px !important;
  color: #9d96aa !important;
  background: linear-gradient(120deg, rgba(67, 49, 94, .34), rgba(29, 26, 38, .29)) !important;
  box-shadow: inset 0 1px 0 rgba(255,255,255,.025) !important;
  font-size: .64rem !important;
  font-weight: 700 !important;
  line-height: 1 !important;
  white-space: nowrap !important;
}
.home-hero-copy .trust-line .check-mark {
  display: inline-block !important;
  width: 6px !important;
  height: 3px !important;
  margin: -2px 6px 0 0 !important;
  border: solid #8e6ac0 !important;
  border-width: 0 0 1.5px 1.5px !important;
  opacity: .90 !important;
  transform: rotate(-45deg) !important;
}
@media (max-width: 700px) {
  .home-hero-copy {
    padding-top: 0 !important;
  }
  .home-hero-copy h1 {
    font-size: clamp(2.15rem, 10vw, 3.2rem) !important;
    letter-spacing: -.055em !important;
  }
  .home-hero-copy > p {
    font-size: .82rem !important;
  }
}
@media (max-width: 440px) {
  .home-hero-copy .actions .btn {
    min-height: 36px !important;
    padding: 0 12px !important;
    font-size: .70rem !important;
  }
  .home-hero-copy .trust-line span {
    font-size: .61rem !important;
  }
}
@media (prefers-reduced-motion: reduce) {
  .home-hero-copy .actions .btn-primary span {
    transition: none !important;
  }
}
/* FINAL-PREMIUM-HOME-HERO-END */
/* HERO-DARK-LOGO-GRADIENT-START */
/*
  Uses the Vamriko logo family: vivid violet -> rich purple -> near-black violet.
  The dark stop is purple-black rather than neutral black, so text stays readable
  on the black hero background.
*/
.home-hero-copy h1 {
  background:
    linear-gradient(
      108deg,
      #9a6cff 0%,
      #7b43e8 24%,
      #b58cff 43%,
      #52269e 60%,
      #21102f 78%,
      #8f5cf0 100%
    ) !important;
  -webkit-background-clip: text !important;
  background-clip: text !important;
  -webkit-text-fill-color: transparent !important;
  text-shadow:
    0 1px 0 rgba(255,255,255,.06),
    0 8px 22px rgba(111, 64, 221, .22),
    0 0 34px rgba(88, 45, 187, .12) !important;
}
.home-hero-copy h1 span {
  background:
    linear-gradient(
      108deg,
      #b088ff 0%,
      #8050e5 25%,
      #5f2db9 47%,
      #1d0c2b 69%,
      #7d4bd8 100%
    ) !important;
  -webkit-background-clip: text !important;
  background-clip: text !important;
  -webkit-text-fill-color: transparent !important;
  text-shadow:
    0 1px 0 rgba(255,255,255,.045),
    0 8px 21px rgba(101, 52, 205, .22),
    0 0 30px rgba(92, 43, 190, .12) !important;
}
/* Keep every character visible: a subtle thin outline separates the dark stops
   from the black page background without turning the title white. */
@supports (-webkit-text-stroke: 1px #000) {
  .home-hero-copy h1,
  .home-hero-copy h1 span {
    -webkit-text-stroke: .35px rgba(183, 142, 255, .20) !important;
  }
}
/* HERO-DARK-LOGO-GRADIENT-END */
/* DEV-TOOLS-BACK-NAV-START */
#site-header .nav {
  position: relative !important;
}
.dev-tools-back-link {
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  gap: 7px !important;
  min-height: 36px !important;
  margin-left: auto !important;
  padding: 0 13px !important;
  border: 1px solid rgba(164, 142, 255, .34) !important;
  border-radius: 11px !important;
  color: #dfd5ff !important;
  background: linear-gradient(135deg, rgba(101, 68, 197, .30), rgba(31, 27, 51, .55)) !important;
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,.08),
    0 7px 18px rgba(36, 20, 91, .20) !important;
  font-size: .77rem !important;
  font-weight: 850 !important;
  line-height: 1 !important;
  text-decoration: none !important;
  white-space: nowrap !important;
  transition: transform .2s ease, border-color .2s ease, background .2s ease, box-shadow .2s ease !important;
}
.dev-tools-back-link > span:first-child {
  color: #ba9aff !important;
  font-size: 1.04rem !important;
  line-height: 1 !important;
  transition: transform .2s ease !important;
}
.dev-tools-back-link:hover {
  border-color: rgba(205, 185, 255, .62) !important;
  color: #fff !important;
  background: linear-gradient(135deg, rgba(124, 82, 229, .60), rgba(54, 39, 100, .70)) !important;
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,.12),
    0 11px 24px rgba(85, 48, 183, .32) !important;
  transform: translateY(-2px) !important;
}
.dev-tools-back-link:hover > span:first-child {
  transform: translateX(-3px) !important;
}
/* Diff Checker uses its own local header, so its button is positioned locally. */
.dev-tools-back-local {
  position: absolute !important;
  right: max(18px, calc((100vw - 1180px) / 2)) !important;
  top: 20px !important;
  z-index: 100 !important;
}
@media (max-width: 900px) {
  #site-header .nav {
    flex-wrap: wrap !important;
  }
  #site-header .dev-tools-back-link {
    margin-left: 0 !important;
  }
  .dev-tools-back-local {
    right: 16px !important;
    top: 14px !important;
  }
}
@media (max-width: 600px) {
  .dev-tools-back-link {
    min-height: 33px !important;
    padding: 0 10px !important;
    border-radius: 9px !important;
    font-size: .70rem !important;
  }
  .dev-tools-back-label {
    display: none !important;
  }
  .dev-tools-back-link > span:first-child {
    font-size: 1.08rem !important;
  }
  .dev-tools-back-local {
    right: 12px !important;
    top: 12px !important;
  }
}
@media (prefers-reduced-motion: reduce) {
  .dev-tools-back-link,
  .dev-tools-back-link > span:first-child {
    transition: none !important;
  }
}
/* DEV-TOOLS-BACK-NAV-END */
/* DEV-TOOLS-NAV-FINAL-FIX-START */
/* Make the shared V mark bright and unmistakable above any local tool CSS. */
#site-header .brand-mark {
  display: grid !important;
  place-items: center !important;
  width: 38px !important;
  height: 38px !important;
  flex: 0 0 38px !important;
  border: 1px solid rgba(220, 208, 255, .25) !important;
  border-radius: 11px !important;
  color: #ffffff !important;
  background: linear-gradient(135deg, #9a6cff 0%, #7142dc 52%, #5a2eaa 100%) !important;
  box-shadow:
    0 8px 19px rgba(114, 66, 220, .38),
    inset 0 1px 0 rgba(255,255,255,.27) !important;
  font-size: 23px !important;
  font-weight: 950 !important;
  line-height: 1 !important;
  text-shadow: 0 1px 1px rgba(32, 12, 82, .26) !important;
}
#site-header .brand-word {
  color: #f8f6ff !important;
  font-size: 21px !important;
  font-weight: 900 !important;
  letter-spacing: -.055em !important;
}
/* Keep the mark and the written name visually separate, not "VVamriko". */
#site-header .brand {
  gap: 10px !important;
}
/* Ensure the action stays visible even when local page styles define nav rules. */
#site-header .nav {
  position: relative !important;
  display: flex !important;
  align-items: center !important;
}
#site-header .dev-tools-back-link {
  display: inline-flex !important;
  visibility: visible !important;
  opacity: 1 !important;
  align-items: center !important;
  justify-content: center !important;
  gap: 7px !important;
  min-height: 36px !important;
  margin-left: auto !important;
  padding: 0 13px !important;
  border: 1px solid rgba(164, 142, 255, .36) !important;
  border-radius: 11px !important;
  color: #e2d9ff !important;
  background: linear-gradient(135deg, rgba(111, 72, 211, .38), rgba(36, 28, 65, .68)) !important;
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,.09),
    0 8px 19px rgba(47, 24, 113, .23) !important;
  font-size: .77rem !important;
  font-weight: 850 !important;
  line-height: 1 !important;
  text-decoration: none !important;
  white-space: nowrap !important;
}
#site-header .dev-tools-back-link > span:first-child {
  color: #c2a7ff !important;
  font-size: 1.05rem !important;
  line-height: 1 !important;
}
#site-header .dev-tools-back-link:hover {
  border-color: rgba(215, 197, 255, .68) !important;
  color: #fff !important;
  background: linear-gradient(135deg, rgba(139, 90, 245, .67), rgba(62, 42, 116, .82)) !important;
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,.14),
    0 11px 25px rgba(87, 45, 189, .38) !important;
  transform: translateY(-2px) !important;
}
#site-header .dev-tools-back-link:hover > span:first-child {
  transform: translateX(-3px) !important;
}
@media (max-width: 760px) {
  #site-header .brand-mark {
    width: 32px !important;
    height: 32px !important;
    flex-basis: 32px !important;
    border-radius: 9px !important;
    font-size: 19px !important;
  }
  #site-header .brand-word {
    font-size: 18px !important;
  }
  #site-header .dev-tools-back-link {
    min-height: 33px !important;
    padding: 0 10px !important;
    border-radius: 9px !important;
  }
}
@media (max-width: 560px) {
  #site-header .dev-tools-back-label {
    display: none !important;
  }
  #site-header .dev-tools-back-link {
    min-width: 34px !important;
    padding: 0 9px !important;
  }
}
/* DEV-TOOLS-NAV-FINAL-FIX-END */

/* DEV-TOOLS-BACK-LINK-STYLE */
.dev-tools-back-link {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  min-height: 37px;
  margin-left: 2px;
  padding: 7px 12px;
  border: 1px solid #55555b;
  border-radius: 999px;
  color: #f8f8fb;
  background: #0c0c0e;
  font-size: 12px;
  font-weight: 800;
  line-height: 1;
  text-decoration: none;
  white-space: nowrap;
  transition: border-color .18s ease, background .18s ease, transform .18s ease;
}
.dev-tools-back-link:hover {
  border-color: #8d8d98;
  color: #ffffff;
  background: #16161a;
  text-decoration: none;
  transform: translateY(-1px);
}
.dev-tools-back-link:focus-visible {
  outline: 2px solid var(--primary, #7452ff);
  outline-offset: 2px;
}
.dev-tools-back-link span[aria-hidden="true"] {
  font-size: 15px;
  font-weight: 900;
  line-height: 1;
}
@media (max-width: 720px) {
  .dev-tools-back-link {
    display: none;
  }
}
/* DEV-TOOLS-BACK-LINK-STYLE-END */
/* VAMRIKO-TOOL-SEO-CONTENT-START */
.tool-seo-content {
  width: min(var(--tool-width), calc(100% - 32px));
  margin: 28px auto 34px;
  color: var(--text);
}
.tool-seo-section {
  margin: 0 0 18px;
  padding: 20px 21px;
  border: 1px solid rgba(174, 156, 255, .17);
  border-radius: 16px;
  background:
    linear-gradient(145deg, rgba(24, 22, 37, .92), rgba(11, 11, 15, .96));
  box-shadow:
    0 16px 42px rgba(0, 0, 0, .20),
    inset 0 1px 0 rgba(255,255,255,.025);
}
.tool-seo-section:last-child {
  margin-bottom: 0;
}
.tool-seo-section h2 {
  margin: 0 0 8px;
  color: #f5f3ff;
  font-size: 18px;
  font-weight: 800;
  line-height: 1.3;
}
.tool-seo-section > p {
  margin: 0;
  color: #aaa7b7;
  font-size: 13px;
  line-height: 1.7;
}
.tool-seo-section p + p {
  margin-top: 9px;
}
.tool-seo-steps {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 10px;
  margin-top: 16px;
}
.tool-seo-step {
  min-width: 0;
  padding: 12px;
  border: 1px solid rgba(174, 156, 255, .13);
  border-radius: 11px;
  background: rgba(255,255,255,.018);
}
.tool-seo-step strong {
  display: flex;
  align-items: center;
  gap: 8px;
  margin-bottom: 5px;
  color: #ddd5ff;
  font-size: 12px;
  line-height: 1.35;
}
.tool-seo-step strong::before {
  content: attr(data-step);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  flex: 0 0 21px;
  width: 21px;
  height: 21px;
  border: 1px solid rgba(164, 142, 255, .40);
  border-radius: 50%;
  color: #d7c9ff;
  background: rgba(116, 82, 255, .13);
  font-size: 10px;
  font-weight: 800;
}
.tool-seo-step span {
  display: block;
  color: #9996a5;
  font-size: 12px;
  line-height: 1.6;
}
.tool-faq {
  display: grid;
  gap: 8px;
  margin-top: 13px;
}
.tool-faq details {
  overflow: hidden;
  border: 1px solid rgba(132, 104, 220, .34);
  border-radius: 11px;
  background: #0b0b0f;
}
.tool-faq summary {
  position: relative;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 14px;
  min-height: 48px;
  padding: 12px 14px;
  color: #eeeaff;
  cursor: pointer;
  list-style: none;
  font-size: 13px;
  font-weight: 750;
  line-height: 1.45;
}
.tool-faq summary::-webkit-details-marker {
  display: none;
}
.tool-faq summary::after {
  content: "+";
  flex: 0 0 auto;
  color: #a989ff;
  font-size: 17px;
  font-weight: 500;
  line-height: 1;
  transition: transform .18s ease;
}
.tool-faq details[open] summary {
  border-bottom: 1px solid rgba(132, 104, 220, .18);
  color: #ffffff;
}
.tool-faq details[open] summary::after {
  transform: rotate(45deg);
}
.tool-faq-answer {
  padding: 11px 14px 13px;
  color: #a9a6b5;
  font-size: 12px;
  line-height: 1.7;
}
.tool-faq-answer p {
  margin: 0;
}
.tool-related-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 9px;
  margin-top: 13px;
}
.tool-related-card {
  display: flex;
  align-items: center;
  gap: 11px;
  min-width: 0;
  padding: 11px 12px;
  border: 1px solid rgba(151, 133, 220, .18);
  border-radius: 12px;
  background: rgba(255,255,255,.018);
  color: inherit;
  transition:
    transform .18s ease,
    border-color .18s ease,
    background .18s ease,
    box-shadow .18s ease;
}
.tool-related-card:hover {
  transform: translateY(-2px);
  border-color: rgba(174, 156, 255, .42);
  background: rgba(116, 82, 255, .08);
  box-shadow: 0 10px 26px rgba(0,0,0,.20);
}
.tool-related-card:focus-visible {
  outline: 2px solid var(--primary, #7452ff);
  outline-offset: 2px;
}
.tool-related-icon {
  position: relative;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  flex: 0 0 34px;
  width: 34px;
  height: 34px;
  border: 1px solid rgba(174, 156, 255, .18);
  border-radius: 9px;
  background: rgba(116, 82, 255, .10);
}
.tool-related-icon::before {
  content: "";
  display: block;
  width: 15px;
  height: 15px;
}
.tool-related-icon.tool-icon-image::before {
  background: #54b8ff;
  clip-path: polygon(0 100%, 35% 45%, 55% 70%, 73% 34%, 100% 100%);
}
.tool-related-icon.tool-icon-pdf::before {
  background: #ff6f83;
}
.tool-related-icon.tool-icon-code::before {
  background: #8f7cff;
  clip-path: polygon(0 25%, 38% 0, 35% 100%, 0 75%, 18% 50%);
}
.tool-related-icon.tool-icon-grid::before {
  background: #73d59c;
}
.tool-related-name {
  min-width: 0;
}
.tool-related-name strong {
  display: block;
  overflow: hidden;
  color: #e9e5f8;
  font-size: 12px;
  font-weight: 750;
  line-height: 1.35;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.tool-related-name span {
  display: block;
  margin-top: 2px;
  color: #777481;
  font-size: 10px;
  line-height: 1.35;
}
@media (max-width: 680px) {
  .tool-seo-content {
    width: min(var(--tool-width), calc(100% - 24px));
    margin-top: 22px;
  }
  .tool-seo-section {
    padding: 17px 15px;
    border-radius: 14px;
  }
  .tool-seo-steps {
    grid-template-columns: 1fr;
  }
  .tool-related-grid {
    grid-template-columns: 1fr;
  }
  .tool-related-card {
    padding: 10px 11px;
  }
}
@media (prefers-reduced-motion: reduce) {
  .tool-faq summary::after,
  .tool-related-card {
    transition: none;
  }
}
/* VAMRIKO-TOOL-SEO-CONTENT-END */