/* ToolTapGo interaction upgrade
   Vanilla HTML/CSS implementation inspired by modern component patterns.
   Loaded after the existing site styles so it can enhance without replacing tools. */

:root{
  --ttg-motion-ease:cubic-bezier(.22,.8,.25,1);
  --ttg-motion-fast:180ms;
  --ttg-motion-standard:220ms;
  --ttg-motion-medium:240ms;
  --ttg-motion-slow:260ms;
  --ttg-sheet-shadow:0 -24px 70px rgba(15,23,42,.18);
  --ttg-command-shadow:0 28px 70px rgba(15,23,42,.16);
}

/* ---------- File upload ---------- */
.file-dropzone.ttg-kokonut-upload{
  isolation:isolate;
  position:relative;
  min-height:132px;
  padding:18px;
  overflow:hidden;
  border:1px solid color-mix(in srgb,var(--brand) 22%,var(--line));
  border-radius:20px;
  background:
    radial-gradient(circle at 14% 15%,color-mix(in srgb,var(--brand-soft) 68%,transparent),transparent 38%),
    linear-gradient(145deg,var(--surface),color-mix(in srgb,var(--surface-2) 86%,var(--brand-soft)));
  box-shadow:0 12px 32px rgba(15,23,42,.055),inset 0 0 0 1px rgba(255,255,255,.38);
  transition:border-color var(--ttg-motion-fast) ease,box-shadow var(--ttg-motion-medium) var(--ttg-motion-ease),transform var(--ttg-motion-medium) var(--ttg-motion-ease),background var(--ttg-motion-medium) ease;
}
.file-dropzone.ttg-kokonut-upload::before{
  content:"";
  position:absolute;
  inset:-1px;
  z-index:-1;
  opacity:0;
  pointer-events:none;
  background:linear-gradient(105deg,transparent 20%,rgba(255,255,255,.82) 45%,transparent 70%);
  transform:translateX(-110%);
}
.file-dropzone.ttg-kokonut-upload:hover::before,
.file-dropzone.ttg-kokonut-upload:focus-visible::before{
  opacity:.75;
  animation:ttg-upload-shine var(--ttg-motion-slow) var(--ttg-motion-ease) both;
}
.file-dropzone.ttg-kokonut-upload:hover,
.file-dropzone.ttg-kokonut-upload:focus-visible{
  transform:translateY(-2px);
  border-color:color-mix(in srgb,var(--brand) 56%,var(--line));
  box-shadow:0 18px 42px rgba(15,23,42,.1),0 0 0 4px color-mix(in srgb,var(--brand-soft) 78%,transparent);
}
.file-dropzone.ttg-kokonut-upload.dragging{
  transform:scale(1.012);
  border-color:var(--brand);
  border-style:solid;
  background:color-mix(in srgb,var(--brand-soft) 76%,var(--surface));
  box-shadow:0 20px 48px rgba(239,106,71,.16),0 0 0 5px color-mix(in srgb,var(--brand-soft) 82%,transparent);
}
.file-dropzone.ttg-kokonut-upload .file-upload-icon{
  width:56px;
  height:56px;
  border-radius:18px;
  color:var(--brand);
  background:color-mix(in srgb,var(--brand-soft) 82%,var(--surface));
  box-shadow:inset 0 0 0 1px color-mix(in srgb,var(--brand) 18%,transparent),0 12px 24px rgba(15,23,42,.07);
  font-size:1.45rem;
  transition:transform var(--ttg-motion-medium) var(--ttg-motion-ease);
}
.file-dropzone.ttg-kokonut-upload:hover .file-upload-icon,
.file-dropzone.ttg-kokonut-upload.dragging .file-upload-icon{transform:translateY(-3px) rotate(-3deg)}
.file-dropzone.ttg-kokonut-upload .file-upload-copy{gap:5px; padding: 10px;}
.file-dropzone.ttg-kokonut-upload .file-upload-copy strong{font-size:.94rem;font-weight:850}
.file-dropzone.ttg-kokonut-upload .file-upload-copy small{font-size:.76rem;line-height:1.45}
.file-upload-formats{
  display:flex;
  flex-wrap:wrap;
  gap:6px;
  margin-top:3px;
}
.file-upload-format-chip{
  display:inline-flex;
  align-items:center;
  min-height:24px;
  padding:3px 8px;
  border:1px solid color-mix(in srgb,var(--line) 80%,transparent);
  border-radius:999px;
  background:color-mix(in srgb,var(--surface) 86%,transparent);
  color:var(--muted);
  font-size:.64rem;
  font-weight:800;
  letter-spacing:.02em;
}
.file-dropzone.ttg-kokonut-upload .file-upload-action{
  min-height:44px;
  padding:0 16px;
  border:1px solid color-mix(in srgb,var(--brand) 20%,transparent);
  border-radius:13px;
  box-shadow:0 10px 22px rgba(239,106,71,.15);
}
.file-dropzone.ttg-kokonut-upload.has-files{
  border-style:solid;
  border-color:color-mix(in srgb,var(--teal) 52%,var(--line));
  background:linear-gradient(145deg,var(--surface),color-mix(in srgb,var(--teal-soft) 48%,var(--surface)));
}
.file-dropzone.ttg-kokonut-upload.file-selected-card .file-selected-thumb{
  width:82px;
  height:82px;
  border-radius:18px;
  box-shadow:0 10px 24px rgba(15,23,42,.09);
}
.file-dropzone.ttg-kokonut-upload .file-remove-action{border-radius:13px}
@keyframes ttg-upload-shine{to{transform:translateX(110%)}}

/* PDF Editor has a custom upload element; give it the same visual language. */
.pe-pdf-dropzone.ttg-kokonut-upload{
  position:relative;
  overflow:hidden;
  border:1px solid color-mix(in srgb,var(--pe-brand) 28%,var(--pe-line));
  border-radius:20px;
  background:
    radial-gradient(circle at 12% 15%,color-mix(in srgb,var(--pe-brand-soft) 72%,transparent),transparent 38%),
    color-mix(in srgb,var(--pe-panel) 90%,var(--pe-brand-soft));
  box-shadow:0 14px 34px rgba(15,23,42,.07);
  transition:transform var(--ttg-motion-medium) var(--ttg-motion-ease),border-color var(--ttg-motion-fast) ease,box-shadow var(--ttg-motion-medium) ease;
}
.pe-pdf-dropzone.ttg-kokonut-upload:hover,
.pe-pdf-dropzone.ttg-kokonut-upload.is-dragging{
  transform:translateY(-2px);
  border-color:var(--pe-brand);
  box-shadow:0 20px 44px rgba(15,23,42,.11),0 0 0 4px color-mix(in srgb,var(--pe-brand-soft) 78%,transparent);
}

/* ---------- Action search / command bar ---------- */
body[data-page="directory"] .directory-toolbar--simple{overflow:visible}
body[data-page="directory"] .search-wrap.ttg-action-search-wrap{z-index:60}
body[data-page="directory"] .directory-search.ttg-action-search{
  position:relative;
  min-height:62px;
  padding:0 12px 0 18px;
  border:1px solid color-mix(in srgb,var(--line-strong) 62%,transparent);
  border-radius:18px;
  background:var(--surface);
  box-shadow:0 14px 34px rgba(15,23,42,.07);
  transition:border-color var(--ttg-motion-fast) ease,box-shadow var(--ttg-motion-medium) var(--ttg-motion-ease),transform var(--ttg-motion-medium) var(--ttg-motion-ease);
}
body[data-page="directory"] .directory-search.ttg-action-search:focus-within{
  transform:translateY(-1px);
  border-color:color-mix(in srgb,var(--brand) 52%,var(--line));
  box-shadow:var(--ttg-command-shadow),0 0 0 4px color-mix(in srgb,var(--brand-soft) 76%,transparent);
}
body[data-page="directory"] .directory-search.ttg-action-search>i{font-size:1.3rem;color:var(--brand)}
body[data-page="directory"] .directory-search.ttg-action-search input{min-height:58px;padding-right:80px;font-size:1rem}
.directory-search-shortcut{
  position:absolute;
  right:14px;
  top:50%;
  transform:translateY(-50%);
  display:inline-flex;
  align-items:center;
  justify-content:center;
  min-width:48px;
  height:30px;
  padding:0 8px;
  border:1px solid var(--line);
  border-bottom-width:2px;
  border-radius:8px;
  background:var(--surface-2);
  color:var(--muted);
  font-family:inherit;
  font-size:.67rem;
  font-weight:850;
  box-shadow:0 2px 5px rgba(15,23,42,.06);
}
body[data-page="directory"] .directory-search .search-clear:not(.hidden)+.directory-search-shortcut{right:52px}
body[data-page="directory"] .search-wrap>.suggestions.ttg-command-results{
  top:72px;
  left:0;
  right:0;
  padding:10px;
  border:1px solid color-mix(in srgb,var(--line) 82%,transparent);
  border-radius:20px;
  background:color-mix(in srgb,var(--surface) 95%,transparent);
  backdrop-filter:blur(18px) saturate(1.15);
  box-shadow:var(--ttg-command-shadow);
  transform-origin:top center;
  animation:ttg-command-in 220ms var(--ttg-motion-ease) both;
}
.ttg-command-heading{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:12px;
  padding:7px 10px 10px;
  color:var(--muted);
  font-size:.68rem;
  font-weight:850;
  letter-spacing:.07em;
  text-transform:uppercase;
}
.ttg-command-heading span:last-child{font-weight:700;text-transform:none;letter-spacing:0}
body[data-page="directory"] .suggestions .suggestion,
.ttg-command-action{
  width:100%;
  min-height:58px;
  display:grid;
  grid-template-columns:auto minmax(0,1fr) auto;
  align-items:center;
  gap:12px;
  padding:9px 10px;
  border:0;
  border-radius:14px;
  background:transparent;
  color:inherit;
  text-align:left;
  cursor:pointer;
}
body[data-page="directory"] .suggestions .suggestion:hover,
body[data-page="directory"] .suggestions .suggestion.active,
.ttg-command-action:hover,
.ttg-command-action:focus-visible{
  background:color-mix(in srgb,var(--brand-soft) 70%,var(--surface));
  outline:0;
}
.ttg-command-action-icon{
  width:42px;
  height:42px;
  border-radius:13px;
  display:grid;
  place-items:center;
  background:var(--brand-soft);
  color:var(--brand);
  font-size:1.25rem;
}
.ttg-command-action span{display:grid;gap:2px}
.ttg-command-action b{font-size:.86rem}
.ttg-command-action small{color:var(--muted);font-size:.7rem}
.ttg-command-action>kbd{min-width:26px;padding:3px 7px;border:1px solid var(--line);border-radius:7px;background:var(--surface);color:var(--muted);font:700 .64rem/1.4 inherit;text-align:center}
@keyframes ttg-command-in{from{opacity:0;transform:translateY(-8px) scale(.985)}to{opacity:1;transform:none}}

/* ---------- Smooth tabs ---------- */
.ttg-smooth-tabs{position:relative;isolation:isolate}
.ttg-smooth-tabs>.ttg-tab-indicator{
  position:absolute;
  z-index:0;
  left:0;
  top:0;
  width:var(--ttg-tab-width,0px);
  height:var(--ttg-tab-height,0px);
  transform:translate3d(var(--ttg-tab-x,0px),var(--ttg-tab-y,0px),0);
  border:1px solid color-mix(in srgb,var(--brand) 24%,transparent);
  border-radius:11px;
  background:color-mix(in srgb,var(--brand-soft) 82%,var(--surface));
  box-shadow:0 6px 16px rgba(15,23,42,.06);
  pointer-events:none;
  transition:transform var(--ttg-motion-medium) var(--ttg-motion-ease),width var(--ttg-motion-medium) var(--ttg-motion-ease),height var(--ttg-motion-medium) var(--ttg-motion-ease),opacity var(--ttg-motion-fast) ease;
}
.ttg-smooth-tabs>button{position:relative;z-index:1}
.studio-tabs.ttg-smooth-tabs .studio-tab.is-active{background:transparent!important;box-shadow:none!important}
.pe-right-tabs.ttg-smooth-tabs .pe-panel-tab.active{background:transparent!important;box-shadow:none!important}
.pe-main-toolbar.ttg-smooth-tabs>.ttg-tab-indicator{
  border-radius:12px;
  background:color-mix(in srgb,var(--pe-brand-soft) 84%,var(--pe-panel));
  border-color:color-mix(in srgb,var(--pe-brand) 25%,transparent);
}
.pe-main-toolbar.ttg-smooth-tabs .pe-tool.active{background:transparent!important;box-shadow:none!important}

/* ---------- Drawers ---------- */
.ttg-drawer-backdrop{
  position:fixed;
  inset:0;
  z-index:12000;
  opacity:0;
  visibility:hidden;
  pointer-events:none;
  background:rgba(15,23,42,.38);
  backdrop-filter:blur(3px);
  transition:opacity var(--ttg-motion-medium) ease,visibility var(--ttg-motion-medium) ease;
}
.ttg-drawer-backdrop.is-open{opacity:1;visibility:visible;pointer-events:auto}
.ttg-drawer-header{
  display:none;
  align-items:center;
  justify-content:space-between;
  gap:12px;
  padding:10px 14px 8px;
  border-bottom:1px solid var(--line);
}
.ttg-drawer-title{display:flex;align-items:center;gap:9px;font-size:.9rem;font-weight:850}
.ttg-drawer-close{
  width:38px;
  height:38px;
  display:grid;
  place-items:center;
  border:1px solid var(--line);
  border-radius:11px;
  background:var(--surface);
  color:var(--ink);
}
.ttg-drawer-handle{display:none;width:46px;height:5px;margin:0 auto;border-radius:999px;background:color-mix(in srgb,var(--muted) 38%,transparent)}
.ttg-editor-controls-trigger{
  position:fixed;
  z-index:11980;
  right:16px;
  bottom:max(16px,env(safe-area-inset-bottom));
  min-height:50px;
  padding:0 18px;
  border:1px solid color-mix(in srgb,var(--brand) 28%,transparent);
  border-radius:999px;
  background:var(--brand);
  color:#fff;
  box-shadow:0 16px 34px rgba(239,106,71,.27);
  display:none;
  align-items:center;
  gap:9px;
  font:800 .82rem/1 inherit;
}

/* ---------- Homepage bento + spotlight ---------- */
.home-v4-tool-card.ttg-spotlight-card,
.home-v4-featured.ttg-spotlight-card{
  --ttg-spot-x:50%;
  --ttg-spot-y:50%;
  --ttg-tilt-x:0deg;
  --ttg-tilt-y:0deg;
  position:relative;
  isolation:isolate;
  overflow:hidden;
  transform:perspective(900px) rotateX(var(--ttg-tilt-x)) rotateY(var(--ttg-tilt-y));
  transition:transform var(--ttg-motion-medium) var(--ttg-motion-ease),border-color var(--ttg-motion-fast) ease,box-shadow var(--ttg-motion-medium) ease;
}
.home-v4-tool-card.ttg-spotlight-card::before,
.home-v4-featured.ttg-spotlight-card::before{
  content:"";
  position:absolute;
  inset:0;
  z-index:0;
  opacity:0;
  pointer-events:none;
  background:radial-gradient(280px circle at var(--ttg-spot-x) var(--ttg-spot-y),rgba(239,106,71,.13),transparent 68%);
  transition:opacity var(--ttg-motion-medium) ease;
}
.home-v4-tool-card.ttg-spotlight-card:hover::before,
.home-v4-featured.ttg-spotlight-card:hover::before{opacity:1}
.home-v4-tool-card.ttg-spotlight-card>a,
.home-v4-featured.ttg-spotlight-card>*{position:relative;z-index:1}
.home-v4-tool-card.ttg-spotlight-card:hover{
  border-color:color-mix(in srgb,var(--home-orange) 32%,#e3e7ed);
  box-shadow:0 20px 46px rgba(15,23,42,.09);
}
.home-v4-hero{position:relative;overflow:hidden;isolation:isolate}
.home-v4-hero::before,
.home-v4-hero::after{
  content:"";
  position:absolute;
  z-index:-1;
  width:460px;
  height:460px;
  border-radius:50%;
  filter:blur(85px);
  opacity:.16;
  pointer-events:none;
}
.home-v4-hero::before{left:-220px;top:-250px;background:#ef6a47}
.home-v4-hero::after{right:-240px;bottom:-280px;background:#8cb7c6}

.ttg-reveal-motion{
  opacity:0;
  transform:translateY(10px) scale(.995);
  transition:opacity var(--ttg-motion-medium) var(--ttg-motion-ease),transform var(--ttg-motion-medium) var(--ttg-motion-ease);
  transition-delay:var(--ttg-reveal-delay,0ms);
}
.ttg-reveal-motion.is-visible{opacity:1;transform:none}

@media (min-width:1101px){
  .home-v4-tool-grid.ttg-bento-grid{
    grid-template-columns:repeat(12,minmax(0,1fr));
    grid-auto-rows:minmax(122px,auto);
    align-items:stretch;
  }
  .home-v4-tool-grid.ttg-bento-grid .home-v4-tool-card:nth-child(1),
  .home-v4-tool-grid.ttg-bento-grid .home-v4-tool-card:nth-child(2){grid-column:span 4;grid-row:span 2}
  .home-v4-tool-grid.ttg-bento-grid .home-v4-tool-card:nth-child(n+3){grid-column:span 2}
  .home-v4-tool-grid.ttg-bento-grid .home-v4-tool-card:nth-child(-n+2)>a{min-height:286px;padding:26px 24px}
  .home-v4-tool-grid.ttg-bento-grid .home-v4-tool-card:nth-child(-n+2) .home-v4-icon{width:68px;height:68px;border-radius:19px}
  .home-v4-tool-grid.ttg-bento-grid .home-v4-tool-card:nth-child(-n+2) .home-v4-icon i{font-size:34px}
  .home-v4-tool-grid.ttg-bento-grid .home-v4-tool-card:nth-child(-n+2) h3{font-size:1.22rem;margin-top:14px}
  .home-v4-tool-grid.ttg-bento-grid .home-v4-tool-card:nth-child(-n+2) p{font-size:.91rem;max-width:300px}
}

@media (max-width:1100px){
  /* PDF inspector becomes a smooth side sheet on tablets. */
  .ttg-pe .pe-sidebar-right.ttg-pe-drawer{
    display:grid!important;
    z-index:12100!important;
    position:absolute!important;
    inset:0 0 0 auto!important;
    width:min(342px,92vw)!important;
    min-width:0!important;
    border-radius:20px 0 0 20px;
    box-shadow:-18px 0 48px rgba(15,23,42,.17);
    transform:translateX(0);
    transition:transform var(--ttg-motion-medium) var(--ttg-motion-ease),visibility var(--ttg-motion-medium) ease;
  }
  .ttg-pe .pe-sidebar-right.ttg-pe-drawer.pe-panel-closed{
    display:grid!important;
    visibility:hidden;
    transform:translateX(105%);
    pointer-events:none;
  }
}

@media (max-width:900px){
  .directory-category-panel.ttg-mobile-drawer-panel,
  .image-editor-studio .studio-sidebar.ttg-mobile-drawer-panel{
    position:fixed!important;
    z-index:12100!important;
    left:0!important;
    right:0!important;
    bottom:0!important;
    top:auto!important;
    width:100%!important;
    max-width:none!important;
    max-height:min(78vh,720px)!important;
    margin:0!important;
    overflow:auto!important;
    border:1px solid var(--line)!important;
    border-bottom:0!important;
    border-radius:24px 24px 0 0!important;
    background:var(--surface)!important;
    box-shadow:var(--ttg-sheet-shadow)!important;
    transform:translateY(105%)!important;
    visibility:hidden!important;
    transition:transform var(--ttg-motion-medium) var(--ttg-motion-ease),visibility var(--ttg-motion-medium) ease!important;
  }
  .directory-category-panel.ttg-mobile-drawer-panel.open,
  .image-editor-studio .studio-sidebar.ttg-mobile-drawer-panel.ttg-drawer-open{
    transform:translateY(0)!important;
    visibility:visible!important;
  }
  .directory-category-panel.ttg-mobile-drawer-panel .ttg-drawer-header,
  .image-editor-studio .studio-sidebar.ttg-mobile-drawer-panel .ttg-drawer-header{display:flex;position:sticky;top:0;z-index:5;background:var(--surface)}
  .directory-category-panel.ttg-mobile-drawer-panel .ttg-drawer-handle,
  .image-editor-studio .studio-sidebar.ttg-mobile-drawer-panel .ttg-drawer-handle{display:block;position:sticky;top:0;z-index:6;margin-top:8px}
  .ttg-editor-controls-trigger{display:inline-flex}
  .image-editor-studio .studio-sidebar.ttg-mobile-drawer-panel .studio-tabs{
    position:sticky;
    top:57px;
    z-index:4;
    display:flex!important;
    grid-template-columns:none!important;
    gap:6px!important;
    overflow-x:auto;
    padding:9px 12px!important;
    scrollbar-width:none;
    background:var(--surface-2);
  }
  .image-editor-studio .studio-sidebar.ttg-mobile-drawer-panel .studio-tabs::-webkit-scrollbar{display:none}
  .image-editor-studio .studio-sidebar.ttg-mobile-drawer-panel .studio-tab{
    flex:0 0 auto;
    min-width:108px;
    min-height:48px!important;
    display:flex!important;
    gap:7px;
    scroll-snap-align:start;
  }
  .image-editor-studio .studio-sidebar.ttg-mobile-drawer-panel .studio-control-panel{max-height:none!important;padding-bottom:calc(30px + env(safe-area-inset-bottom))}
  body.ttg-drawer-lock{overflow:hidden!important}
}

@media (max-width:720px){
  .file-dropzone.ttg-kokonut-upload{grid-template-columns:auto minmax(0,1fr);min-height:144px;padding:16px}
  .file-dropzone.ttg-kokonut-upload .file-upload-action{grid-column:1/-1;width:100%;justify-content:center}
  .file-dropzone.ttg-kokonut-upload.file-selected-card{grid-template-columns:68px minmax(0,1fr)}
  .file-dropzone.ttg-kokonut-upload.file-selected-card .file-selected-thumb{width:68px;height:68px}
  body[data-page="directory"] .directory-search.ttg-action-search{min-height:58px;padding-left:14px}
  body[data-page="directory"] .directory-search.ttg-action-search input{min-height:54px;padding-right:54px;font-size:.92rem}
  .directory-search-shortcut{min-width:36px;height:28px;font-size:0}
  .directory-search-shortcut::after{content:"⌘K";font-size:.62rem}
  body[data-page="directory"] .search-wrap>.suggestions.ttg-command-results{position:fixed;left:10px;right:10px;top:auto;bottom:calc(12px + env(safe-area-inset-bottom));max-height:min(68vh,620px);overflow:auto}
  .home-v4-tool-grid.ttg-bento-grid{display:grid;grid-template-columns:1fr!important}
}

@media (prefers-reduced-motion:reduce){
  .file-dropzone.ttg-kokonut-upload,
  .ttg-smooth-tabs>.ttg-tab-indicator,
  .ttg-reveal-motion,
  .home-v4-tool-card.ttg-spotlight-card,
  .home-v4-featured.ttg-spotlight-card,
  .directory-category-panel.ttg-mobile-drawer-panel,
  .image-editor-studio .studio-sidebar.ttg-mobile-drawer-panel,
  .ttg-pe .pe-sidebar-right.ttg-pe-drawer{transition:none!important;animation:none!important}
  .home-v4-hero::before,.home-v4-hero::after{animation:none!important}
  .ttg-reveal-motion{opacity:1!important;transform:none!important}
}


/* ---------- Homepage action search correction ---------- */
body[data-page="home"] .home-v4-hero{
  overflow:visible!important;
  z-index:5;
}
body[data-page="home"] .home-v4-hero-grid{
  position:relative;
  z-index:3;
}
body[data-page="home"] .home-v4-flagships{
  position:relative;
  z-index:1;
}
body[data-page="home"] .home-v4-search-form.ttg-home-action-search{
  position:relative;
  z-index:80;
  display:grid;
  grid-template-columns:minmax(0,1fr) auto;
  gap:6px;
  width:100%;
  max-width:680px;
  margin-top:28px;
  padding:6px;
  border:1px solid color-mix(in srgb,#cfd7e3 82%,transparent);
  border-radius:18px;
  background:rgba(255,255,255,.96);
  box-shadow:0 18px 48px rgba(15,23,42,.09),0 1px 2px rgba(15,23,42,.04);
  transition:border-color var(--ttg-motion-fast) ease,box-shadow var(--ttg-motion-medium) var(--ttg-motion-ease),transform var(--ttg-motion-medium) var(--ttg-motion-ease);
}
body[data-page="home"] .home-v4-search-form.ttg-home-action-search:focus-within{
  border-color:color-mix(in srgb,var(--home-orange) 48%,#d9e0ea);
  box-shadow:0 22px 60px rgba(15,23,42,.12),0 0 0 4px rgba(239,106,71,.1);
  transform:translateY(-1px);
}
body[data-page="home"] .home-v4-search-form.ttg-home-action-search .home-search-field{
  position:relative;
  min-width:0;
  height:52px!important;
  padding:0 14px 0 15px!important;
  gap:11px!important;
  border:0!important;
  border-radius:13px!important;
  background:transparent!important;
  box-shadow:none!important;
}
body[data-page="home"] .home-v4-search-form.ttg-home-action-search .home-search-field>i{
  flex:0 0 auto;
  font-size:21px;
  color:#758196;
}
body[data-page="home"] .home-v4-search-form.ttg-home-action-search input{
  min-width:0;
  height:48px;
  padding:0 104px 0 0;
  font-size:.96rem;
  color:#1d2635;
  appearance:none;
  -webkit-appearance:none;
}
body[data-page="home"] .home-v4-search-form.ttg-home-action-search input::-webkit-search-cancel-button{
  display:none;
  -webkit-appearance:none;
}
body[data-page="home"] .ttg-home-search-shortcut{
  position:absolute;
  right:13px;
  top:50%;
  transform:translateY(-50%);
  display:inline-flex;
  align-items:center;
  justify-content:center;
  height:28px;
  padding:0 8px;
  border:1px solid #dce2ea;
  border-bottom-width:2px;
  border-radius:8px;
  background:#f7f8fa;
  color:#7b8596;
  font-family:inherit;
  font-size:.66rem;
  font-weight:800;
  white-space:nowrap;
}
body[data-page="home"] .ttg-home-search-clear{
  position:absolute;
  right:10px;
  top:50%;
  transform:translateY(-50%);
  display:inline-grid;
  place-items:center;
  width:34px;
  height:34px;
  padding:0;
  border:0;
  border-radius:10px;
  background:#f1f3f6;
  color:#6f7a8d;
  cursor:pointer;
}
body[data-page="home"] .ttg-home-search-clear:hover,
body[data-page="home"] .ttg-home-search-clear:focus-visible{
  background:#e8ebf0;
  color:#1f2937;
  outline:0;
}
body[data-page="home"] .home-v4-search-form.ttg-home-action-search>.primary-btn{
  min-width:104px;
  min-height:52px!important;
  height:52px;
  padding:0 20px!important;
  border-radius:13px!important;
  display:inline-flex;
  align-items:center;
  justify-content:center;
  gap:8px;
  box-shadow:0 9px 20px rgba(239,106,71,.2);
}
body[data-page="home"] .home-v4-search-form.ttg-home-action-search>.primary-btn i{
  font-size:17px;
}
body[data-page="home"] .home-v4-search-form.ttg-home-action-search>.suggestions.ttg-home-action-results{
  position:absolute!important;
  z-index:9999!important;
  top:calc(100% + 10px)!important;
  left:0!important;
  right:0!important;
  width:auto!important;
  max-height:min(340px,48vh)!important;
  margin:0!important;
  padding:8px!important;
  overflow-x:hidden!important;
  overflow-y:auto!important;
  overscroll-behavior:contain;
  border:1px solid #dde3ec!important;
  border-radius:18px!important;
  background:rgba(255,255,255,.985)!important;
  box-shadow:0 26px 70px rgba(15,23,42,.18)!important;
  backdrop-filter:blur(18px) saturate(1.1);
  scrollbar-width:thin;
  scrollbar-color:#c9d0da transparent;
  transform-origin:top center;
  animation:ttg-command-in 180ms var(--ttg-motion-ease) both;
}
body[data-page="home"] .home-v4-search-form .suggestions.ttg-home-action-results::-webkit-scrollbar{width:8px}
body[data-page="home"] .home-v4-search-form .suggestions.ttg-home-action-results::-webkit-scrollbar-thumb{background:#c9d0da;border:2px solid transparent;border-radius:999px;background-clip:padding-box}
body[data-page="home"] .home-v4-search-form .suggestions.ttg-home-action-results .suggestion{
  min-height:64px;
  display:grid;
  grid-template-columns:42px minmax(0,1fr) 26px;
  align-items:center;
  gap:11px;
  padding:9px 10px;
  border-radius:13px;
  color:#1e293b;
  text-decoration:none;
}
body[data-page="home"] .home-v4-search-form .suggestions.ttg-home-action-results .suggestion:hover,
body[data-page="home"] .home-v4-search-form .suggestions.ttg-home-action-results .suggestion.active{
  background:#f7f4f2;
}
body[data-page="home"] .home-v4-search-form .suggestions.ttg-home-action-results .tool-card-icon--mini{
  width:42px!important;
  height:42px!important;
  margin:0!important;
  border-radius:12px!important;
  box-shadow:none!important;
}
body[data-page="home"] .home-v4-search-form .suggestions.ttg-home-action-results b{
  display:block;
  margin-bottom:3px;
  font-size:.83rem;
  line-height:1.25;
}
body[data-page="home"] .home-v4-search-form .suggestions.ttg-home-action-results small{
  display:block;
  min-width:0;
  overflow:hidden;
  color:#7a8495;
  font-size:.72rem;
  line-height:1.35;
  text-overflow:ellipsis;
  white-space:nowrap;
}
body[data-page="home"] .home-v4-search-form .suggestions.ttg-home-action-results .arrow{
  display:grid;
  place-items:center;
  width:26px;
  height:26px;
  border-radius:8px;
  color:#687386;
}

/* ---------- Balanced featured tools grid ---------- */
.home-v4-tool-card.ttg-spotlight-card{
  transform:none!important;
}
.home-v4-tool-card.ttg-spotlight-card:hover{
  transform:translateY(-3px)!important;
}
@media (min-width:1101px){
  .home-v4-tool-grid.ttg-bento-grid{
    display:grid!important;
    grid-template-columns:repeat(3,minmax(0,1fr))!important;
    grid-auto-rows:auto!important;
    gap:18px!important;
    align-items:stretch!important;
  }
  .home-v4-tool-grid.ttg-bento-grid .home-v4-tool-card{
    grid-column:auto!important;
    grid-row:auto!important;
    min-height:0!important;
  }
  .home-v4-tool-grid.ttg-bento-grid .home-v4-tool-card>a,
  .home-v4-tool-grid.ttg-bento-grid .home-v4-tool-card:nth-child(-n+2)>a{
    min-height:206px!important;
    height:100%!important;
    padding:22px 22px 20px!important;
  }
  .home-v4-tool-grid.ttg-bento-grid .home-v4-tool-card .home-v4-icon,
  .home-v4-tool-grid.ttg-bento-grid .home-v4-tool-card:nth-child(-n+2) .home-v4-icon{
    width:56px!important;
    height:56px!important;
    border-radius:16px!important;
  }
  .home-v4-tool-grid.ttg-bento-grid .home-v4-tool-card .home-v4-icon i,
  .home-v4-tool-grid.ttg-bento-grid .home-v4-tool-card:nth-child(-n+2) .home-v4-icon i{
    font-size:28px!important;
  }
  .home-v4-tool-grid.ttg-bento-grid .home-v4-tool-card h3,
  .home-v4-tool-grid.ttg-bento-grid .home-v4-tool-card:nth-child(-n+2) h3{
    margin-top:12px!important;
    font-size:1.03rem!important;
  }
  .home-v4-tool-grid.ttg-bento-grid .home-v4-tool-card p,
  .home-v4-tool-grid.ttg-bento-grid .home-v4-tool-card:nth-child(-n+2) p{
    max-width:none!important;
    font-size:.86rem!important;
    line-height:1.5!important;
  }
}
@media (min-width:721px) and (max-width:1100px){
  .home-v4-tool-grid.ttg-bento-grid{
    display:grid!important;
    grid-template-columns:repeat(2,minmax(0,1fr))!important;
    gap:16px!important;
  }
  .home-v4-tool-grid.ttg-bento-grid .home-v4-tool-card>a{
    min-height:196px!important;
  }
}
@media (max-width:720px){
  body[data-page="home"] .home-v4-search-form.ttg-home-action-search{
    grid-template-columns:minmax(0,1fr) auto!important;
    gap:5px!important;
    padding:5px!important;
    border-radius:16px!important;
  }
  body[data-page="home"] .home-v4-search-form.ttg-home-action-search .home-search-field{
    height:50px!important;
    padding-left:12px!important;
  }
  body[data-page="home"] .home-v4-search-form.ttg-home-action-search input{
    height:46px;
    padding-right:44px;
    font-size:.9rem;
  }
  body[data-page="home"] .ttg-home-search-shortcut{display:none!important}
  body[data-page="home"] .home-v4-search-form.ttg-home-action-search>.primary-btn{
    min-width:86px;
    width:auto!important;
    height:50px;
    min-height:50px!important;
    padding:0 15px!important;
  }
  body[data-page="home"] .home-v4-search-form.ttg-home-action-search>.suggestions.ttg-home-action-results{
    top:calc(100% + 8px)!important;
    max-height:min(320px,52vh)!important;
    border-radius:16px!important;
  }
  body[data-page="home"] .home-v4-search-form .suggestions.ttg-home-action-results small{
    display:-webkit-box;
    white-space:normal;
    -webkit-box-orient:vertical;
    -webkit-line-clamp:2;
  }
  .home-v4-tool-grid.ttg-bento-grid .home-v4-tool-card>a{
    min-height:164px!important;
  }
}


/* Image editor drawer integration v2: available only in the loaded editor and always above the blur layer. */
@media(max-width:900px){
  body[data-tool="image-edit"] .ttg-editor-controls-trigger{display:none!important}
  body[data-tool="image-edit"].mobile-editor-open .ttg-editor-controls-trigger:not([hidden]){
    display:inline-flex!important;
    z-index:12140!important;
    right:14px!important;
    bottom:max(14px,env(safe-area-inset-bottom))!important;
    min-height:48px!important;
    padding:0 16px!important;
    border-radius:999px!important
  }
  body[data-tool="image-edit"].mobile-editor-open .image-editor-studio .studio-sidebar.ttg-mobile-drawer-panel{
    position:fixed!important;
    z-index:12130!important;
    inset:auto 0 0 0!important;
    width:100%!important;
    height:min(72dvh,620px)!important;
    min-height:300px!important;
    max-height:min(72dvh,620px)!important;
    padding:0!important;
    overflow:hidden!important;
    border:1px solid var(--line)!important;
    border-bottom:0!important;
    border-radius:24px 24px 0 0!important;
    background:var(--surface)!important;
    box-shadow:0 -22px 60px rgba(12,28,26,.24)!important;
    transform:translateY(105%)!important;
    visibility:hidden!important;
    pointer-events:none!important;
    transition:transform var(--ttg-motion-medium) var(--ttg-motion-ease),visibility var(--ttg-motion-medium) ease!important
  }
  body[data-tool="image-edit"].mobile-editor-open .image-editor-studio .studio-sidebar.ttg-mobile-drawer-panel.ttg-drawer-open{
    transform:translateY(0)!important;
    visibility:visible!important;
    pointer-events:auto!important
  }
  body[data-tool="image-edit"].mobile-editor-open .image-editor-studio .studio-sidebar.ttg-mobile-drawer-panel .ttg-drawer-header{
    display:flex!important;position:sticky!important;top:0!important;z-index:8!important;min-height:54px!important;padding:8px 14px!important;background:var(--surface)!important
  }
  body[data-tool="image-edit"].mobile-editor-open .image-editor-studio .studio-sidebar.ttg-mobile-drawer-panel .ttg-drawer-handle{display:none!important}
  body[data-tool="image-edit"].mobile-editor-open .image-editor-studio .studio-sidebar.ttg-mobile-drawer-panel .studio-tabs{
    order:1!important;position:sticky!important;top:54px!important;z-index:7!important;display:grid!important;grid-template-columns:repeat(5,minmax(0,1fr))!important;
    min-height:62px!important;padding:6px!important;overflow:visible!important;background:var(--surface-2)!important
  }
  body[data-tool="image-edit"].mobile-editor-open .image-editor-studio .studio-sidebar.ttg-mobile-drawer-panel .studio-tab{
    min-width:0!important;min-height:50px!important;padding:4px 2px!important;display:grid!important;place-items:center!important;gap:3px!important
  }
  body[data-tool="image-edit"].mobile-editor-open .image-editor-studio .studio-sidebar.ttg-mobile-drawer-panel .studio-control-panel{
    order:2!important;max-height:calc(min(72dvh,620px) - 116px)!important;padding:12px 14px calc(22px + env(safe-area-inset-bottom))!important;overflow-y:auto!important;pointer-events:auto!important
  }
  body[data-tool="image-edit"] .ttg-drawer-backdrop[data-drawer="image-editor-controls"]{z-index:12110!important}
}

/* ---------- Consolidated motion layer ---------- */
html.ttg-motion-enhanced body>main{
  animation:ttg-page-enter var(--ttg-motion-medium) var(--ttg-motion-ease) both;
}
@keyframes ttg-page-enter{
  from{opacity:.01;transform:translateY(6px)}
  to{opacity:1;transform:none}
}

/* Cards lift only when hover is a real input capability. Touch keeps a short
   press response and never inherits a sticky hover transform. */
.tool-card,
.category-card,
.home-v4-tool-card,
.home-v4-featured,
.blog-card,
.panel,
.related{
  transition-duration:var(--ttg-motion-standard)!important;
  transition-timing-function:var(--ttg-motion-ease)!important;
}
@media (hover:hover) and (pointer:fine){
  .tool-card:not(.ad-tool-card):hover,
  .category-card:hover,
  .blog-card:hover{transform:translateY(-3px)}
  .tool-card:hover .open-link i,
  .category-card:hover .section-link i,
  .blog-card:hover .section-link i{transform:translateX(3px)}
}

button,
.button,
.primary-btn,
.secondary-btn,
.soft-btn,
.icon-btn,
.filter-chip,
.view-toggle button,
.page-btn{
  transition:transform var(--ttg-motion-fast) var(--ttg-motion-ease),opacity var(--ttg-motion-fast) ease,background-color var(--ttg-motion-standard) ease,border-color var(--ttg-motion-standard) ease,box-shadow var(--ttg-motion-standard) ease,color var(--ttg-motion-standard) ease;
}
button:not(:disabled):active,
.button:not([aria-disabled="true"]):active,
.primary-btn:not(:disabled):active,
.secondary-btn:not(:disabled):active,
.soft-btn:not(:disabled):active{transform:scale(.975)}
button[data-ttg-motion-state="loading"]{cursor:progress}
button[data-ttg-motion-state="loading"]>i:first-child{animation:ttg-button-spin var(--ttg-motion-slow) linear infinite}
button[data-ttg-motion-state="loading"]>span,
button[data-ttg-motion-state="loading"]:not(:has(>span)){opacity:.82}
button[data-ttg-motion-state="success"]{animation:ttg-button-success var(--ttg-motion-medium) var(--ttg-motion-ease) both}
button[data-ttg-motion-state="success"]>i:first-child{animation:ttg-button-pop var(--ttg-motion-medium) var(--ttg-motion-ease) both}
@keyframes ttg-button-spin{to{transform:rotate(360deg)}}
@keyframes ttg-button-success{50%{transform:scale(1.025)}}
@keyframes ttg-button-pop{50%{transform:scale(1.2)}}

.mobile-drawer.open,
.ttg-account-dropdown:not([hidden]),
.ttg-select.open .ttg-select-menu,
.suggestions:not(.hidden),
[role="menu"]:not([hidden]){
  transform-origin:top center;
  animation:ttg-popover-in var(--ttg-motion-standard) var(--ttg-motion-ease) both;
}
@keyframes ttg-popover-in{
  from{opacity:0;transform:translateY(-6px) scale(.99)}
  to{opacity:1;transform:none}
}
.mobile-drawer a,
.nav-links a,
.footer-links a,
.related a{transition:transform var(--ttg-motion-fast) var(--ttg-motion-ease),color var(--ttg-motion-fast) ease,background-color var(--ttg-motion-fast) ease,border-color var(--ttg-motion-fast) ease}
@media (hover:hover) and (pointer:fine){
  .mobile-drawer a:hover,
  .footer-links a:hover,
  .related a:hover{transform:translateX(2px)}
}

.filter-chip.active,
.view-toggle button.active,
[role="tab"][aria-selected="true"]{animation:ttg-control-selected var(--ttg-motion-standard) var(--ttg-motion-ease) both}
@keyframes ttg-control-selected{50%{transform:scale(1.025)}}
[role="tabpanel"]:not([hidden]),
.studio-control-panel:not([hidden]),
.pe-panel:not([hidden]){animation:ttg-panel-in var(--ttg-motion-standard) var(--ttg-motion-ease) both}
@keyframes ttg-panel-in{from{opacity:0;transform:translateY(5px)}to{opacity:1;transform:none}}

details{transition:border-color var(--ttg-motion-standard) ease,box-shadow var(--ttg-motion-standard) ease}
details>summary{transition:color var(--ttg-motion-fast) ease,background-color var(--ttg-motion-fast) ease}
details>summary::marker{transition:transform var(--ttg-motion-standard) var(--ttg-motion-ease)}
details.ttg-disclosure-opened>summary~*{animation:ttg-disclosure-in var(--ttg-motion-standard) var(--ttg-motion-ease) both}
@keyframes ttg-disclosure-in{from{opacity:0;transform:translateY(-5px)}to{opacity:1;transform:none}}

dialog[open],
[role="dialog"]:not([hidden]),
.modal.open,
.modal.is-open,
.modal.show{
  animation:ttg-modal-in var(--ttg-motion-medium) var(--ttg-motion-ease) both;
}
dialog::backdrop{animation:ttg-backdrop-in var(--ttg-motion-standard) ease both}
@keyframes ttg-modal-in{from{opacity:0;transform:translateY(8px) scale(.985)}to{opacity:1;transform:none}}
@keyframes ttg-backdrop-in{from{opacity:0}to{opacity:1}}

.ttg-motion-item{
  opacity:0;
  transform:translateY(7px);
  transition:opacity var(--ttg-motion-standard) var(--ttg-motion-ease),transform var(--ttg-motion-standard) var(--ttg-motion-ease);
  transition-delay:var(--ttg-item-delay,0ms);
}
.ttg-motion-item.is-visible{opacity:1;transform:none}

#resultBox,
.ttg-file-card,
[data-ttg-result-visual="true"]{scroll-margin-top:calc(var(--header-height,76px) + 16px)}
.ttg-result-reveal{animation:ttg-result-in var(--ttg-motion-medium) var(--ttg-motion-ease) both}
@keyframes ttg-result-in{
  from{opacity:.01;transform:translateY(9px) scale(.995)}
  to{opacity:1;transform:none}
}

@media (hover:none), (pointer:coarse){
  .tool-card:hover,
  .category-card:hover,
  .home-v4-tool-card:hover,
  .home-v4-featured:hover,
  .blog-card:hover{transform:none!important}
  button:not(:disabled):active,
  .button:not([aria-disabled="true"]):active,
  .primary-btn:not(:disabled):active,
  .secondary-btn:not(:disabled):active{transform:scale(.97)}
}

@media (prefers-reduced-motion:reduce){
  html{scroll-behavior:auto!important}
  html.ttg-motion-enhanced body>main,
  .ttg-motion-item,
  .ttg-result-reveal,
  .mobile-drawer.open,
  .ttg-account-dropdown:not([hidden]),
  .ttg-select.open .ttg-select-menu,
  .suggestions:not(.hidden),
  [role="menu"]:not([hidden]),
  .filter-chip.active,
  .view-toggle button.active,
  [role="tab"][aria-selected="true"],
  [role="tabpanel"]:not([hidden]),
  .studio-control-panel:not([hidden]),
  .pe-panel:not([hidden]),
  details.ttg-disclosure-opened>summary~*,
  dialog[open],
  [role="dialog"]:not([hidden]),
  .modal.open,
  .modal.is-open,
  .modal.show,
  dialog::backdrop,
  button[data-ttg-motion-state="loading"]>i:first-child,
  button[data-ttg-motion-state="success"],
  button[data-ttg-motion-state="success"]>i:first-child{
    animation:none!important;
    transition:none!important;
    transform:none!important;
  }
  .ttg-motion-item{opacity:1!important}
}