/* ToolTapGo 2026 full visual redesign
   Loaded after site.css so the existing tool logic and specialist editors stay intact. */
:root{
  --page:#f4f6f3;
  --surface:#ffffff;
  --surface-2:#f7f8f5;
  --surface-3:#edf1ed;
  --ink:#102b2a;
  --ink-2:#294542;
  --muted:#6c7d79;
  --line:#dfe5df;
  --line-strong:#cbd5ce;
  --brand:#ef6a47;
  --brand-strong:#db5535;
  --brand-soft:#fff0eb;
  --teal:#0b7a71;
  --teal-strong:#075f58;
  --teal-soft:#e2f4f0;
  --gold:#d4a146;
  --danger:#c94f59;
  --success:#19845d;
  --warning:#a86b14;
  --shadow:0 24px 70px rgba(20,52,48,.10);
  --shadow-sm:0 10px 30px rgba(20,52,48,.07);
  --shadow-xs:0 4px 14px rgba(20,52,48,.06);
  --radius-sm:12px;
  --radius:18px;
  --radius-lg:26px;
  --radius-xl:34px;
  --max:1320px;
  --content-max:820px;
  --header-height:74px;
}
[data-theme=dark]{
  --page:#0d1514;
  --surface:#15201e;
  --surface-2:#192725;
  --surface-3:#21312e;
  --ink:#f5f7f3;
  --ink-2:#d1ddd8;
  --muted:#9caea8;
  --line:#2d3d39;
  --line-strong:#40524d;
  --brand:#ff8060;
  --brand-strong:#ff9a7f;
  --brand-soft:rgba(239,106,71,.14);
  --teal:#67d0c4;
  --teal-strong:#91e3d8;
  --teal-soft:rgba(11,122,113,.22);
  --shadow:0 28px 80px rgba(0,0,0,.34);
  --shadow-sm:0 14px 34px rgba(0,0,0,.24);
  --shadow-xs:0 5px 16px rgba(0,0,0,.18);
}
html{background:var(--page)}
body{
  background:
    radial-gradient(circle at 11% 2%,color-mix(in srgb,var(--teal) 8%,transparent),transparent 25rem),
    radial-gradient(circle at 94% 8%,color-mix(in srgb,var(--brand) 9%,transparent),transparent 28rem),
    var(--page);
  font-size:16px;
  line-height:1.62;
  letter-spacing:-.004em;
}
body.redesign-ready{padding-top:var(--header-height)}
body:before{display:none}
body,button,input,select,textarea{font-family:Manrope,system-ui,-apple-system,BlinkMacSystemFont,"Segoe UI",sans-serif}
h1,h2,h3,h4{font-family:"Plus Jakarta Sans",Manrope,sans-serif;color:var(--ink);letter-spacing:-.035em}
h1{font-weight:800}h2,h3,h4{font-weight:750}
p{color:var(--muted)}
.container{width:min(var(--max),calc(100% - 48px))}
.section{padding:88px 0}.section-soft{background:color-mix(in srgb,var(--surface-2) 88%,transparent);border-block:1px solid var(--line)}
.eyebrow,.kicker{font-size:.74rem;font-weight:850;letter-spacing:.11em;text-transform:uppercase}
.eyebrow{color:var(--brand)}

/* Header */
.site-header{
  position:fixed;top:0;right:0;left:0;width:100%;
  height:var(--header-height);
  border-bottom:1px solid color-mix(in srgb,var(--line) 86%,transparent);
  background:color-mix(in srgb,var(--surface) 88%,transparent);
  backdrop-filter:blur(20px) saturate(150%);
  box-shadow:0 1px 0 rgba(16,43,42,.02);
  transition:height .28s cubic-bezier(.22,1,.36,1),background .28s ease,box-shadow .28s ease,border-color .28s ease;
}
.site-header.is-scrolled{height:60px;background:color-mix(in srgb,var(--surface) 96%,transparent);box-shadow:0 10px 35px rgba(16,43,42,.1)}
.nav{height:var(--header-height);gap:22px;transition:height .28s cubic-bezier(.22,1,.36,1),gap .28s ease}
.site-header.is-scrolled .nav{height:60px}
.brand-logo{min-width:176px;display:inline-flex;align-items:center;transition:min-width .28s cubic-bezier(.22,1,.36,1),padding .28s ease}
.brand-logo img{width:176px;max-height:48px;transform-origin:left center;transition:width .28s cubic-bezier(.22,1,.36,1),max-height .28s ease,transform .28s ease,opacity .2s ease}
.site-header.is-scrolled .brand-logo{min-width:142px}
.site-header.is-scrolled .brand-logo img{width:142px;max-height:38px}
.brand-logo img.logo-swap{animation:navLogoSwap .32s cubic-bezier(.22,1,.36,1)}
@keyframes navLogoSwap{from{opacity:.4;transform:translateY(-4px) scale(.94)}to{opacity:1;transform:none}}
[data-theme=dark] .brand-logo{padding:5px 10px 5px 6px;border-radius:14px;background:#fff}
[data-theme=dark] .site-header.is-scrolled .brand-logo{padding:3px 7px 3px 4px;border-radius:11px}
.nav-links{
  display:flex;
  margin-left:auto;
  gap:5px;
  padding:0;
  border:0;
  border-radius:0;
  background:transparent;
  font-size:.82rem;
}
.nav-links a{min-height:44px;padding:9px 13px;border:1px solid transparent;border-radius:10px;color:var(--ink-2);transition:background .18s ease,color .18s ease,border-color .18s ease,box-shadow .18s ease;display:inline-flex;align-items:center}
.nav-links a:after{display:none}
.nav-links a:hover{background:#fff;color:var(--brand);border-color:var(--brand)}
.nav-links a[aria-current=page]{background:var(--brand);color:#fff;border-color:var(--brand);box-shadow:0 8px 18px rgba(239,106,71,.22)}
.nav-links a[aria-current=page]:hover{background:var(--brand-strong);color:#fff;border-color:var(--brand-strong)}
.site-header.is-scrolled .nav-links a{min-height:38px;padding-block:6px}
.nav-actions{gap:8px}
.icon-btn,.soft-btn{box-shadow:none}
.icon-btn{width:46px;height:46px;border-radius:12px;background:var(--surface)}
.soft-btn{min-height:42px;padding:0 14px;border-radius:12px;font-size:.82rem}
.site-header.is-scrolled .icon-btn{width:40px;height:40px}
.site-header.is-scrolled .soft-btn{min-height:40px}
.mobile-menu-btn{display:none!important}
.soft-btn.accent{background:var(--brand);border-color:var(--brand);color:#fff;box-shadow:0 8px 20px rgba(239,106,71,.2)}
.soft-btn.accent:hover{background:var(--brand-strong);border-color:var(--brand-strong)}
.mobile-drawer{
  position:fixed;top:calc(var(--header-height) + 10px);right:16px;left:16px;z-index:999;
  padding:10px;border:1px solid var(--line);border-radius:18px;background:var(--surface);box-shadow:var(--shadow);
}
.mobile-drawer a{padding:13px 14px;border:1px solid transparent;border-radius:11px;font-weight:750}
.mobile-drawer a:hover{background:#fff;color:var(--brand);border-color:var(--brand)}
.mobile-drawer a[aria-current=page]{background:var(--brand);color:#fff;border-color:var(--brand)}
html.mobile-menu-open{overflow:hidden}

.scroll-to-top{
  position:fixed;right:22px;bottom:22px;z-index:950;width:50px;height:50px;display:grid;place-items:center;
  border:1px solid var(--brand);border-radius:15px;background:var(--brand);color:#fff;box-shadow:0 12px 28px rgba(239,106,71,.3);
  opacity:0;visibility:hidden;pointer-events:none;transform:translateY(14px) scale(.9);
  transition:opacity .22s ease,visibility .22s ease,transform .22s cubic-bezier(.22,1,.36,1),background .18s ease,color .18s ease,border-color .18s ease;
}
.scroll-to-top.is-visible{opacity:1;visibility:visible;pointer-events:auto;transform:none}
.scroll-to-top:hover{background:var(--surface);color:var(--brand);border-color:var(--brand);transform:translateY(-3px)}
.scroll-to-top:focus-visible{outline:3px solid color-mix(in srgb,var(--brand) 32%,transparent);outline-offset:3px}

/* Shared buttons, cards and controls */
.button,.primary-btn,.secondary-btn,.ghost-btn,.soft-btn,.page-btn{
  min-height:46px;border-radius:13px;font-size:.9rem;font-weight:800;letter-spacing:-.01em;
}
.primary-btn,.button--primary{background:linear-gradient(135deg,var(--brand),var(--brand-strong));box-shadow:0 10px 22px rgba(239,106,71,.24)}
.primary-btn:hover,.button--primary:hover{transform:translateY(-1px);box-shadow:0 14px 28px rgba(239,106,71,.28)}
.secondary-btn,.button--secondary{background:var(--surface);border:1px solid var(--line);box-shadow:none}
.secondary-btn:hover,.button--secondary:hover{border-color:var(--line-strong);background:var(--surface-2);transform:translateY(-1px)}
.button--tertiary,.ghost-btn{background:transparent;color:var(--teal);border:0}
.panel,.card,.content-panel,.related,.category-card,.tool-card,.admin-card-like{
  border:1px solid var(--line);background:var(--surface);box-shadow:var(--shadow-xs);
}
.panel{border-radius:var(--radius-lg);padding:30px}
input,select,textarea,.custom-select-button{
  min-height:50px;border:1px solid var(--line)!important;border-radius:13px!important;background:var(--surface)!important;
  box-shadow:0 1px 0 rgba(16,43,42,.02);transition:border-color .18s ease,box-shadow .18s ease,background .18s ease;
}
input:hover,select:hover,textarea:hover,.custom-select-button:hover{border-color:var(--line-strong)!important}
input:focus,select:focus,textarea:focus,.custom-select-button:focus{border-color:var(--teal)!important;box-shadow:0 0 0 4px color-mix(in srgb,var(--teal) 14%,transparent)!important;outline:0}
label{color:var(--ink-2)}
.password-field-wrap{position:relative;display:block}.password-field-wrap input{padding-right:56px}.password-visibility-toggle{position:absolute;right:4px;top:50%;width:44px;height:44px;transform:translateY(-50%);display:grid;place-items:center;border:0;border-radius:11px;background:transparent;color:var(--muted)}.password-visibility-toggle:hover{background:var(--surface-2);color:var(--ink)}

/* Homepage */
.hero{padding:96px 0 86px;min-height:680px;display:flex;align-items:center}
.hero:before{width:620px;height:620px;right:-250px;top:-260px;background:color-mix(in srgb,var(--brand) 13%,transparent);filter:blur(1px)}
.hero:after{width:460px;height:460px;left:-250px;bottom:-240px;background:color-mix(in srgb,var(--teal) 10%,transparent)}
.hero-grid{grid-template-columns:minmax(0,1.08fr) minmax(440px,.92fr);gap:82px}
.hero h1{font-size:clamp(3.55rem,6vw,5.9rem);line-height:.98;letter-spacing:-.068em;margin:22px 0 26px;max-width:800px}
.hero-copy>p{font-size:1.12rem;line-height:1.75;max-width:700px}
.home-search-form{position:relative;display:grid;grid-template-columns:minmax(0,1fr) auto;gap:10px;max-width:700px;margin:0 0 18px}
.home-search-field{min-height:54px;display:flex;align-items:center;gap:10px;padding:0 16px;border:1px solid var(--line);border-radius:15px;background:var(--surface);box-shadow:var(--shadow-sm)}
.home-search-field>i{color:var(--teal)}
.home-search-field input{width:100%;min-width:0;border:0!important;outline:0;background:transparent!important;box-shadow:none!important}
.home-search-form>.button{min-height:54px}
.home-search-form>.suggestions{top:calc(100% + 8px);text-align:left}
.hero-actions{gap:12px}.hero-actions .button{min-height:54px;padding-inline:22px;border-radius:15px}
.hero-proof{margin-top:28px;gap:12px}
.hero-proof span{padding:9px 12px;border:1px solid var(--line);border-radius:999px;background:color-mix(in srgb,var(--surface) 80%,transparent);font-size:.76rem}
.hero-visual{position:relative}
.visual-window{border:1px solid var(--line);border-radius:26px;background:var(--surface);box-shadow:var(--shadow);padding:18px;transform:rotate(1.2deg)}
.visual-head{padding:1px 3px 15px}.visual-brand{font-weight:850}.visual-brand img{width:30px;height:30px;border-radius:9px}
.fake-search{min-height:54px;border-radius:14px;background:var(--surface-2);border:1px solid var(--line)}
.fake-grid{gap:12px}.fake-tool{min-height:94px;padding:15px;border:1px solid var(--line);border-radius:16px;background:var(--surface)}
.fake-tool i{width:38px;height:38px;border-radius:12px;background:var(--brand-soft);color:var(--brand)}
.floating-card{right:-28px;bottom:-32px;border:1px solid var(--line);border-radius:17px;background:var(--surface);box-shadow:var(--shadow-sm)}
.home-ad-section,.tool-ad-section,.hub-ad-section{padding:20px 0}
.section-head{align-items:flex-end;margin-bottom:34px}
.section-head h2{font-size:clamp(2.05rem,3.2vw,3.15rem);line-height:1.08;margin:8px 0 0}
.section-head>p{max-width:560px;font-size:.98rem}
.category-preview-grid{grid-template-columns:repeat(4,minmax(0,1fr));gap:18px}
.category-card{min-height:260px;border-radius:22px;padding:22px;transition:transform .2s ease,border-color .2s ease,box-shadow .2s ease}
.category-card:hover{transform:translateY(-5px);border-color:color-mix(in srgb,var(--brand) 34%,var(--line));box-shadow:var(--shadow-sm)}
.category-card-head{margin-bottom:24px}.category-icon{width:48px;height:48px;border-radius:15px;background:var(--brand-soft);color:var(--brand)}
.category-card:nth-child(2n) .category-icon{background:var(--teal-soft);color:var(--teal)}
.category-card h3{font-size:1.18rem;margin-bottom:9px}.category-card p{font-size:.88rem;line-height:1.6}
.tool-count-pill{border:1px solid var(--line);background:var(--surface-2);font-size:.68rem}
.section-link{font-size:.82rem;color:var(--teal);font-weight:850}
.expanded-category-links{gap:11px}.expanded-category-links a{min-height:54px;border:1px solid var(--line);border-radius:14px;background:var(--surface);box-shadow:none}
.expanded-category-links a:hover{border-color:var(--brand);transform:translateY(-2px)}
.home-guide-grid{gap:18px}.home-guide-grid>*{border-radius:22px}

/* Directory / all tools */
.directory-hero,.compact-page-hero,.category-page-hero{padding:74px 0 44px;background:transparent}
.directory-hero h1,.compact-page-hero h1,.category-page-hero h1{font-size:clamp(2.7rem,5vw,4.6rem);line-height:1.03;max-width:900px;margin:14px 0 16px}
.directory-hero p,.compact-page-hero p,.category-page-hero p{max-width:760px;font-size:1.04rem}
.directory-shell{padding-bottom:88px}
.directory-toolbar{position:sticky;top:calc(var(--header-height) + 14px);z-index:30;padding:18px;border:1px solid var(--line);border-radius:22px;background:color-mix(in srgb,var(--surface) 93%,transparent);backdrop-filter:blur(16px);box-shadow:var(--shadow-sm)}
.search-wrap{display:grid;grid-template-columns:minmax(280px,1fr) minmax(0,1.35fr);gap:14px;align-items:start}
.directory-search{min-height:54px;border-radius:15px;background:var(--surface-2);border:1px solid var(--line)}
.directory-search input{border:0!important;box-shadow:none!important;background:transparent!important}
.filter-panel{gap:9px}.filter-row{gap:7px}.filter-chip{min-height:44px;padding:0 13px;border-radius:999px;border:1px solid var(--line);background:var(--surface)}
.filter-chip.active{background:var(--ink);border-color:var(--ink);color:#fff}
.directory-options{padding:18px 3px 14px}.result-summary{font-size:.85rem}
.sort-control select{min-height:46px}.view-toggle{border:1px solid var(--line);border-radius:12px;background:var(--surface)}.view-toggle button{min-width:46px;min-height:46px}
.tool-grid{grid-template-columns:repeat(3,minmax(0,1fr));gap:18px}
.tool-card{min-height:230px;border-radius:21px;padding:20px;transition:transform .2s ease,border-color .2s ease,box-shadow .2s ease}
.tool-card:hover{transform:translateY(-4px);border-color:color-mix(in srgb,var(--teal) 32%,var(--line));box-shadow:var(--shadow-sm)}
.tool-card-icon{width:48px;height:48px;border-radius:15px;background:var(--brand-soft);color:var(--brand)}
.tool-card h3{font-size:1.02rem;line-height:1.35}.tool-card p{font-size:.82rem;line-height:1.58}
.favorite-action,.favourite-btn{border-radius:11px}.favourite-btn{width:46px;height:46px;min-width:46px;min-height:46px}.ttg-select-button,.sort-control .ttg-select-button{min-height:46px}
.pagination{padding-top:26px;gap:12px}.page-btn{min-width:112px;border:1px solid var(--line);background:var(--surface)}.page-status{font-size:.82rem;font-weight:750}
.complete-directory{border:1px solid var(--line);border-radius:20px;background:var(--surface);padding:8px 18px}.complete-directory summary{min-height:64px}
.crawl-tool-links{grid-template-columns:repeat(4,minmax(0,1fr));gap:7px}.crawl-tool-links a{padding:8px 10px;border-radius:9px}.crawl-tool-links a:hover{background:var(--surface-2);color:var(--brand)}

/* Category pages */
.category-content-grid{gap:22px}.category-copy{max-width:780px}.category-nav{gap:9px}.category-jump{min-height:44px;border:1px solid var(--line);border-radius:999px;background:var(--surface)}
.category-jump:hover,.category-jump.active{background:var(--ink);border-color:var(--ink);color:#fff}
.category-tool-section{padding:42px 0 88px}.category-faq details,.tool-faq details{border:1px solid var(--line);border-radius:15px;background:var(--surface);overflow:hidden}
.category-faq summary,.tool-faq summary{padding:17px 18px;font-weight:800}.category-faq details p,.tool-faq details p{padding:0 18px 18px}

/* Single tool pages */
.tool-hero{padding:48px 0 28px;background:linear-gradient(180deg,color-mix(in srgb,var(--surface) 70%,transparent),transparent);border-bottom:1px solid color-mix(in srgb,var(--line) 60%,transparent)}
.breadcrumbs{font-size:.72rem;color:var(--muted);gap:8px}.breadcrumbs i{font-size:.52rem;color:var(--line-strong)}
.tool-heading{margin-top:19px;align-items:center;gap:16px}.tool-heading .tool-card-icon{width:58px;height:58px;border-radius:18px;box-shadow:inset 0 0 0 1px color-mix(in srgb,var(--brand) 18%,transparent)}
.tool-heading h1{font-size:clamp(2.25rem,4vw,3.7rem);line-height:1.05;margin:0 0 7px}.tool-heading p{max-width:800px;font-size:.98rem;margin:0}
.tool-layout{grid-template-columns:minmax(0,1fr) 360px;gap:24px;align-items:start;padding-top:28px;padding-bottom:94px}
.tool-layout>div{min-width:0;display:grid;gap:22px}.tool-layout .panel{padding:26px}
.sidebar{position:sticky;top:calc(var(--header-height) + 20px);display:grid;gap:18px}
.tool-layout>.sidebar .related{padding:24px;border-radius:24px}
.tool-layout>.sidebar .related h3{display:flex;align-items:center;gap:10px;font-size:1rem;line-height:1.35;margin:0 0 18px;padding:0;border:0}
.tool-layout>.sidebar .related h3::before{content:"\f0c1";font-family:"Font Awesome 7 Free";font-weight:900;font-size:1rem;color:var(--brand)}
.tool-layout>.sidebar .related a{min-height:66px;padding:12px 13px;border-radius:15px;border:1px solid var(--line);background:color-mix(in srgb,var(--surface-2) 72%,var(--surface));transition:transform .18s ease,border-color .18s ease,background .18s ease}
.tool-layout>.sidebar .related a+a{margin-top:12px}
.tool-layout>.sidebar .related a:hover{background:var(--surface);border-color:color-mix(in srgb,var(--brand) 32%,var(--line));transform:translateX(2px)}
.tool-layout>.sidebar .related a span{min-width:0;gap:11px;font-size:.8rem;font-weight:750;line-height:1.35}
.tool-layout>.sidebar .related a span i{width:46px;height:46px;flex:0 0 46px;display:grid;place-items:center;border-radius:13px;background:var(--surface);color:var(--teal);box-shadow:0 1px 3px rgba(16,43,42,.06);font-size:.9rem;line-height:1;text-align:center}
.tool-layout>.sidebar .related a>i:last-child{flex:0 0 auto;margin-left:auto;color:var(--muted);font-size:.84rem}
.guide{min-height:54px;padding:13px 15px;border:1px solid color-mix(in srgb,var(--teal) 18%,var(--line));border-radius:14px;background:var(--teal-soft);font-size:.8rem;color:var(--ink-2)}
.guide>i{width:28px;height:28px;display:grid;place-items:center;border-radius:9px;background:var(--surface);color:var(--teal)}
.tool-form{margin-top:22px}.form-grid{gap:16px}.field-group{gap:7px}.field-group label,.tool-form>label{font-size:.68rem;letter-spacing:.075em;text-transform:uppercase;font-weight:850;color:var(--muted)}
.tool-form input,.tool-form select,.tool-form textarea{padding-inline:14px}
.actions.result-actions{margin-top:18px;padding-top:18px;border-top:1px solid var(--line);gap:9px;align-items:center}
.actions.result-actions .favorite-action{margin-left:auto}
.result-box{position:relative;overflow:hidden;margin-top:22px;padding:0;border:1px solid var(--line-strong);border-radius:21px;background:var(--surface);box-shadow:none}
.result-box::after{content:"";position:absolute;z-index:3;top:0;bottom:0;left:0;width:5px;background:var(--brand);pointer-events:none}
.result-box>.result-label{display:block;padding:25px 30px 0;font-size:.68rem;letter-spacing:.09em;color:var(--muted)}
.result-box>.result-main{margin:10px 0 23px;padding:0 30px;font:800 clamp(1.55rem,3vw,2.35rem)/1.18 "Plus Jakarta Sans",sans-serif;color:var(--ink)}
.result-box.has-multiline>.result-main{margin:10px 0 23px;padding:0 30px;border:0;background:transparent}
.result-details{grid-template-columns:repeat(2,minmax(0,1fr));gap:0;border-top:1px solid var(--line);background:var(--surface-2)}
.result-details>div{min-height:78px;padding:18px 30px;border:0!important;border-radius:0!important;background:transparent!important}
.result-details>div+div{border-left:1px solid var(--line)!important}
.result-details small{color:var(--muted)}
.result-details b{color:var(--ink)}
.result-box[data-result-state=error]{border-color:color-mix(in srgb,var(--danger) 48%,var(--line));background:color-mix(in srgb,var(--danger) 5%,var(--surface))}
.result-box[data-result-state=error]::after{background:var(--danger)}
[data-theme=dark] .result-box{border-color:var(--line-strong);background:var(--surface);color:var(--ink);box-shadow:none}
[data-theme=dark] .result-box>.result-main{color:var(--ink)}
[data-theme=dark] .result-box .result-details{border-color:var(--line);background:var(--surface-2)}
[data-theme=dark] .result-box .result-details>div{border:0!important;background:transparent!important}
[data-theme=dark] .result-box .result-details>div+div{border-left:1px solid var(--line)!important}
[data-theme=dark] .result-box[data-result-state=error]{background:color-mix(in srgb,var(--danger) 8%,var(--surface));box-shadow:none}
.tool-status{font-size:.74rem;margin:10px 0}.tool-note{font-size:.68rem;color:var(--muted);margin:13px 0 0}
.tool-form #toolFields label.mega-check{display:flex;flex-direction:row;align-items:center;justify-content:space-between;gap:16px;min-height:50px;margin:0;padding:10px 12px 10px 15px;border:1px solid var(--line);border-radius:14px;background:var(--surface-2);color:var(--ink-2);font-size:.78rem;font-weight:800;line-height:1.35;cursor:pointer;transition:border-color .18s ease,background .18s ease,box-shadow .18s ease}
.tool-form #toolFields label.mega-check:hover{border-color:color-mix(in srgb,var(--teal) 45%,var(--line));background:var(--surface)}
.tool-form #toolFields label.mega-check>span{order:1;min-width:0}
.tool-form #toolFields label.mega-check>input[type=checkbox]{order:2;appearance:none;width:24px!important;height:24px!important;min-height:24px!important;flex:0 0 24px;margin:0!important;padding:0!important;border:1px solid var(--line-strong)!important;border-radius:7px!important;background:var(--surface)!important;display:grid;place-items:center;cursor:pointer}
.tool-form #toolFields label.mega-check>input[type=checkbox]::after{content:"";width:10px;height:6px;border-left:2px solid #fff;border-bottom:2px solid #fff;opacity:0;transform:translateY(-1px) rotate(-45deg)}
.tool-form #toolFields label.mega-check>input[type=checkbox]:checked{border-color:var(--teal)!important;background:var(--teal)!important;box-shadow:0 0 0 3px var(--teal-soft)}
.tool-form #toolFields label.mega-check>input[type=checkbox]:checked::after{opacity:1}
.tool-form #toolFields label.mega-check>input[type=checkbox]:focus-visible{outline:3px solid color-mix(in srgb,var(--teal) 32%,transparent);outline-offset:2px}
.tool-form #toolFields label.mega-check>input[type=checkbox]:disabled{opacity:.5;cursor:not-allowed}
.mega-wheel-workspace{display:grid;grid-template-columns:minmax(0,1fr) minmax(300px,420px);gap:clamp(28px,5vw,72px);align-items:start}
.mega-wheel-controls{display:grid;gap:18px;align-content:start}
.mega-wheel-controls>label{margin:0}
.mega-wheel-controls textarea{min-height:180px;resize:vertical}
.mega-wheel-controls .actions{margin:0}
.mega-wheel-stage{position:relative;width:min(100%,420px);aspect-ratio:1;margin:0 auto;padding:12px;border:1px solid var(--line);border-radius:50%;background:var(--surface);box-shadow:var(--shadow-sm)}
.mega-wheel-canvas{display:block;width:100%;height:100%;border-radius:50%}
.mega-wheel-pointer{position:absolute;z-index:2;top:-4px;left:50%;width:0;height:0;transform:translateX(-50%);border-left:13px solid transparent;border-right:13px solid transparent;border-top:24px solid var(--brand);filter:drop-shadow(0 3px 2px rgba(16,43,42,.22));pointer-events:none}
[data-theme=dark] .mega-wheel-stage{background:var(--surface-2);border-color:var(--line)}
@media(max-width:760px){.mega-wheel-workspace{grid-template-columns:1fr;gap:28px}.mega-wheel-stage{width:min(100%,390px)}.mega-wheel-controls textarea{min-height:160px}}
@media(max-width:420px){.mega-wheel-stage{padding:8px}.mega-wheel-pointer{border-left-width:11px;border-right-width:11px;border-top-width:20px}}
.tool-form>.mega-health-note{margin:4px 0 18px;border-color:var(--line);background:var(--surface-2);color:var(--muted)}
.tool-form>.mega-health-note i{color:var(--muted)}
@media(min-width:761px){
  #toolFields>.mega-converter-grid{grid-template-columns:repeat(3,minmax(0,1fr))}
  .mega-reading-time-layout{display:grid;grid-template-columns:minmax(0,1.65fr) minmax(240px,.75fr);gap:20px;align-items:start}
}
.mega-reading-time-layout,.mega-reading-time-controls{min-width:0}
.mega-reading-time-controls{display:grid;gap:16px;align-content:start}
.mega-reading-time-layout textarea{min-height:178px}
.mega-reading-time-controls .actions,.mega-reading-time-controls .primary-btn{width:100%}
.mega-reading-time-controls .primary-btn{justify-content:center}
.file-drop,.file-dropzone{border:1.5px dashed var(--line-strong);border-radius:18px;background:var(--surface-2)}
.file-drop:hover,.file-dropzone:hover{border-color:var(--brand);background:var(--brand-soft)}
.content-panel{padding:34px!important;border-radius:24px;box-shadow:none}
.content-panel h2{font-size:1.25rem;margin:34px 0 12px;padding-top:28px;border-top:1px solid var(--line)}
.content-panel h2:first-child{margin-top:0;padding-top:0;border-top:0}.content-panel p,.content-panel li{font-size:.91rem;line-height:1.76}
.tool-steps{counter-reset:steps;display:grid;gap:12px;list-style:none;padding:0}.tool-steps li{position:relative;padding:14px 16px 14px 48px;border:1px solid var(--line);border-radius:14px;background:var(--surface-2)}
.tool-steps li:before{counter-increment:steps;content:counter(steps);position:absolute;left:14px;top:13px;width:24px;height:24px;display:grid;place-items:center;border-radius:8px;background:var(--teal-soft);color:var(--teal);font-size:.72rem;font-weight:850}
.tool-faq{gap:9px}

/* Blog listing */
.blog-hero{padding-bottom:54px}.blog-list-section{padding-top:34px}
.blog-grid{grid-template-columns:repeat(3,minmax(0,1fr));gap:20px}
.blog-card{border:1px solid var(--line);border-radius:23px;background:var(--surface);box-shadow:var(--shadow-xs);overflow:hidden;transition:transform .2s ease,box-shadow .2s ease,border-color .2s ease}
.blog-card:hover{transform:translateY(-5px);box-shadow:var(--shadow-sm);border-color:color-mix(in srgb,var(--brand) 32%,var(--line))}
.blog-card:first-child{grid-column:span 2;display:grid;grid-template-columns:1.06fr .94fr}
.blog-card-image{aspect-ratio:16/9;background:linear-gradient(135deg,var(--teal-soft),var(--brand-soft))}.blog-card:first-child .blog-card-image{height:100%;aspect-ratio:auto}
.blog-card-body{padding:21px}.blog-card:first-child .blog-card-body{padding:32px;display:flex;flex-direction:column;justify-content:center}
.blog-card h2,.blog-card h3{font-size:1.18rem;line-height:1.35}.blog-card:first-child h2,.blog-card:first-child h3{font-size:1.75rem}
.blog-card p{font-size:.84rem}.blog-card-tag{background:var(--brand-soft);color:var(--brand);border-radius:999px}
.blog-card-footer{border-top:1px solid var(--line);padding-top:14px}.blog-meta{font-size:.7rem}
.blog-pagination{gap:10px}

/* Single article */
.blog-article{padding:54px 0 96px}
.blog-article-shell{display:grid;grid-template-columns:minmax(0,1fr) 300px;column-gap:32px;align-items:start}
.blog-article-header{grid-column:1/-1;max-width:980px;margin-bottom:34px}.blog-article-header h1{font-size:clamp(2.8rem,5vw,4.9rem);line-height:1.03;margin:18px 0 18px}
.blog-standfirst{max-width:850px;font-size:1.08rem;line-height:1.75}.blog-meta-large{gap:12px}
.blog-article-spacer,.blog-article-feature-spacer{display:none}
.blog-article-feature{grid-column:1/-1;margin-bottom:34px;border-radius:26px;overflow:hidden;border:1px solid var(--line);box-shadow:var(--shadow-sm)}
.blog-article-content{grid-column:1;max-width:var(--content-max);padding:34px;border:1px solid var(--line);border-radius:25px;background:var(--surface);box-shadow:var(--shadow-xs);font-size:1rem;line-height:1.82}
.blog-article-content h2{font-size:1.55rem;margin:40px 0 14px}.blog-article-content h3{font-size:1.18rem;margin:30px 0 10px}
.blog-article-content p{color:var(--ink-2)}.blog-article-content pre,.blog-article-content code{border-radius:12px}.blog-article-content img{border-radius:16px}
.blog-sidebar{grid-column:2;position:sticky;top:calc(var(--header-height) + 20px)}
.article-cta{margin-top:42px;padding:25px;border:1px solid color-mix(in srgb,var(--brand) 20%,var(--line));border-radius:19px;background:linear-gradient(135deg,var(--brand-soft),var(--surface))}
.article-cta h2{margin:0 0 7px}.article-cta p{margin-bottom:18px}.article-cta__actions{gap:10px}

/* Auth */
.auth-page{min-height:calc(100vh - var(--header-height));padding:58px 0 86px;display:grid;align-items:center}
.auth-shell{max-width:1120px;margin:auto;display:grid;grid-template-columns:.9fr 1.1fr;border:1px solid var(--line);border-radius:30px;background:var(--surface);box-shadow:var(--shadow);overflow:hidden}
.auth-side{padding:54px;background:linear-gradient(145deg,var(--ink),#173e3a);color:#fff}.auth-side h1,.auth-side h2,.auth-side p{color:#fff}.auth-side p{opacity:.75}.auth-benefits{gap:13px}.auth-benefits li{background:rgba(255,255,255,.08);border:1px solid rgba(255,255,255,.10);border-radius:14px;padding:12px 13px}
.auth-form{padding:50px}.auth-form h1{font-size:2.35rem}.auth-fields{gap:15px}.auth-fields label{font-size:.78rem;font-weight:800}.auth-submit{width:100%;min-height:51px}
.google-auth-block{margin-bottom:18px}.auth-divider{margin:18px 0;color:var(--muted)}
.auth-links{font-size:.82rem}.auth-message{font-size:.78rem}

/* Account and settings */
.account-page{padding:54px 0 94px}.account-page-heading{margin-bottom:26px}.account-page-heading h1{font-size:clamp(2.6rem,4.5vw,4.25rem);margin:10px 0 9px}.account-page-heading p{font-size:1rem}
.account-shell{display:grid;grid-template-columns:250px minmax(0,1fr);gap:22px;align-items:start}
.account-navigation{position:sticky;top:calc(var(--header-height) + 20px);padding:18px;border:1px solid var(--line);border-radius:22px;background:var(--surface);box-shadow:var(--shadow-xs)}
.account-navigation-profile{display:flex;align-items:center;gap:11px;padding:8px 6px 17px;border-bottom:1px solid var(--line)}
.account-navigation-profile .account-avatar{width:44px;height:44px;font-size:.9rem}.account-navigation-profile div{display:grid;min-width:0}.account-navigation-profile b,.account-navigation-profile small{white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.account-navigation-profile small{color:var(--muted);font-size:.68rem}
.account-navigation-links{display:grid;gap:5px;padding-top:12px}.account-navigation-links a{min-height:43px;display:flex;align-items:center;gap:10px;padding:0 12px;border-radius:11px;font-size:.8rem;font-weight:800;color:var(--ink-2)}.account-navigation-links a i{width:20px;text-align:center;color:var(--muted)}.account-navigation-links a:hover{background:var(--surface-2)}.account-navigation-links a[aria-current=page]{background:var(--brand-soft);color:var(--brand)}.account-navigation-links a[aria-current=page] i{color:var(--brand)}
.account-main{display:grid;gap:20px;min-width:0}.account-welcome{padding:30px;border:1px solid var(--line);border-radius:24px;background:linear-gradient(135deg,var(--surface),var(--teal-soft));box-shadow:var(--shadow-xs)}.account-welcome h2{font-size:2rem;margin:7px 0 8px}.account-welcome-actions{display:flex;flex-wrap:wrap;gap:10px;margin-top:20px}
.account-stat-grid{grid-template-columns:repeat(3,minmax(0,1fr));gap:14px}.account-stat{min-height:116px;padding:18px;border:1px solid var(--line);border-radius:18px;background:var(--surface)}.account-stat-icon{width:43px;height:43px;border-radius:13px}.account-stat b{font-size:1.55rem}.account-stat span{font-size:.75rem}
.account-dashboard-grid{display:grid;grid-template-columns:1.15fr .85fr;gap:18px}.account-dashboard-card{padding:24px;border:1px solid var(--line);border-radius:22px;background:var(--surface);box-shadow:var(--shadow-xs)}.account-dashboard-card h3{margin-bottom:7px}.account-quick-links{display:grid;gap:9px;margin-top:17px}.account-quick-links a{min-height:58px;display:grid;grid-template-columns:38px 1fr auto;align-items:center;gap:11px;padding:9px 11px;border:1px solid var(--line);border-radius:14px;background:var(--surface-2)}.account-quick-links a:hover{border-color:var(--brand);background:var(--surface)}.account-quick-links a>i:first-child{width:38px;height:38px;display:grid;place-items:center;border-radius:11px;background:var(--brand-soft);color:var(--brand)}.account-quick-links span{display:grid}.account-quick-links b{font-size:.8rem}.account-quick-links small{font-size:.68rem;color:var(--muted)}
.account-recent-list{display:grid;gap:8px;margin-top:15px}.account-recent-item{display:flex;align-items:center;gap:10px;padding:10px;border:1px solid var(--line);border-radius:13px}.account-recent-item>i{width:36px;height:36px;display:grid;place-items:center;border-radius:11px;background:var(--teal-soft);color:var(--teal)}.account-recent-item span{display:grid;min-width:0}.account-recent-item b{font-size:.78rem;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.account-recent-item small{font-size:.66rem;color:var(--muted)}
.settings-page-grid{display:grid;grid-template-columns:1fr 1fr;gap:18px}.settings-page-grid .account-settings-card{margin:0}.settings-page-grid .settings-span-2{grid-column:1/-1}.account-settings-card{padding:24px;border-radius:22px}.settings-card-head{gap:12px}.settings-card-icon{width:43px;height:43px;border-radius:13px}.account-form{gap:14px}.account-form label{font-size:.76rem}.theme-choice-group{grid-template-columns:1fr 1fr;gap:10px}.theme-choice{min-height:82px;border:1px solid var(--line);border-radius:15px;background:var(--surface-2)}.theme-choice.is-active{border-color:var(--brand);background:var(--brand-soft)}

/* Contact and reading pages */
.contact-layout{grid-template-columns:minmax(0,1fr) 340px;gap:22px;align-items:start}.contact-form{padding:28px;border-radius:24px}.info-grid{display:grid;gap:12px}.info-grid>*{border:1px solid var(--line);border-radius:18px;background:var(--surface);padding:20px}
.reading-page,.legal-page{padding:52px 0 94px}.reading-page .content-panel,.legal-page .content-panel{max-width:900px;margin:auto}

/* Footer */
.footer{margin-top:0;padding:70px 0 26px;border-top:1px solid var(--line);background:var(--ink);color:#fff}
.footer .container{width:min(var(--max),calc(100% - 48px))}.footer-grid{grid-template-columns:1.25fr .75fr 1fr .8fr;gap:54px}
.footer h4{color:#fff;font-size:.82rem;letter-spacing:.04em}.footer p,.footer a{color:rgba(255,255,255,.66)}.footer a:hover{color:#fff}.footer-brand img{width:185px;padding:7px 10px 7px 6px;border-radius:13px;background:#fff}.footer-brand p{max-width:330px;font-size:.82rem;line-height:1.7}.footer-links{gap:9px;font-size:.78rem}.copyright{margin-top:48px;padding-top:20px;border-top-color:rgba(255,255,255,.12);color:rgba(255,255,255,.48);font-size:.7rem}

/* Specialist workspaces: keep functionality, modernise chrome */
.image-editor-studio,.pdf-editor-shell,.image-studio,.crop-only-studio,.business-doc-tool,.app-icon-builder{border:1px solid var(--line);border-radius:22px;background:var(--surface);box-shadow:var(--shadow-xs)}

@media(max-width:1180px){
  .nav-links{gap:1px}.nav-links a{padding-inline:10px}.brand-logo{min-width:160px}.brand-logo img{width:160px}
  .hero-grid{grid-template-columns:1fr 420px;gap:54px}.category-preview-grid{grid-template-columns:repeat(3,minmax(0,1fr))}
  .tool-grid{grid-template-columns:repeat(2,minmax(0,1fr))}.crawl-tool-links{grid-template-columns:repeat(3,minmax(0,1fr))}
  .blog-grid{grid-template-columns:repeat(2,minmax(0,1fr))}.blog-card:first-child{grid-column:1/-1}
  .account-dashboard-grid{grid-template-columns:1fr}
}
@media(max-width:1020px){
  :root{--header-height:68px}.container{width:min(var(--max),calc(100% - 36px))}
  .site-header,.nav{height:var(--header-height)}
  .hero{min-height:auto;padding:76px 0}.hero-grid{grid-template-columns:1fr;gap:54px}.hero-copy{text-align:center}.hero-copy>p,.home-search-form{margin-inline:auto}.hero-actions,.hero-proof{justify-content:center}.hero-visual{max-width:650px;margin:auto;width:100%}
  .category-preview-grid{grid-template-columns:repeat(2,minmax(0,1fr))}
  .search-wrap{grid-template-columns:1fr}.directory-toolbar{position:relative;top:auto}
  .tool-layout{grid-template-columns:1fr}.sidebar{position:static;grid-template-columns:1fr 1fr}.sidebar .ad-slot{min-height:0}
  .blog-article-shell{grid-template-columns:1fr}.blog-article-content{grid-column:1;max-width:none}.blog-sidebar{grid-column:1;position:static;margin-top:20px}
  .account-shell{grid-template-columns:1fr}.account-navigation{position:static}.account-navigation-links{grid-template-columns:repeat(4,minmax(0,1fr))}.account-navigation-links a{justify-content:center}.account-navigation-links a span{display:none}
}
@media(max-width:760px){
  .container,.footer .container{width:min(100% - 28px,var(--max))}.section{padding:66px 0}
  .nav-links{display:none!important}.mobile-menu-btn{display:grid!important}
  .site-header.is-scrolled,.site-header.is-scrolled .nav{height:58px}.site-header.is-scrolled + .mobile-drawer{top:66px}
  .soft-btn span{display:none}.soft-btn{width:42px;padding:0;justify-content:center}.brand-logo{min-width:145px}.brand-logo img{width:145px}
  .site-header.is-scrolled .brand-logo{min-width:126px}.site-header.is-scrolled .brand-logo img{width:126px;max-height:36px}
  .scroll-to-top{right:14px;bottom:14px;width:46px;height:46px;border-radius:14px}
  .hero{padding:60px 0 66px}.hero h1{font-size:clamp(2.8rem,13vw,4.3rem)}.hero-copy>p{font-size:1rem}.home-search-form{grid-template-columns:1fr;width:100%;margin-bottom:20px}.home-search-form>.button{width:100%}.hero-actions{display:grid;grid-template-columns:1fr}.hero-actions .button{width:100%}.hero-proof{display:grid;grid-template-columns:1fr 1fr}.visual-window{transform:none}.floating-card{right:10px}
  .section-head{align-items:flex-start;flex-direction:column}.category-preview-grid{grid-template-columns:1fr}.category-card{min-height:auto}.expanded-category-links{grid-template-columns:1fr 1fr}
  .directory-hero h1,.compact-page-hero h1,.category-page-hero h1{font-size:2.65rem}.filter-row{overflow:auto;flex-wrap:nowrap;padding-bottom:4px}.filter-chip{flex:0 0 auto}.directory-options{align-items:flex-start;flex-direction:column}.tool-grid{grid-template-columns:1fr}.crawl-tool-links{grid-template-columns:1fr 1fr}
  .tool-hero{padding-top:34px}.tool-heading{align-items:flex-start}.tool-heading h1{font-size:2.25rem}.tool-layout .panel{padding:20px}.sidebar{grid-template-columns:1fr}.form-grid{grid-template-columns:1fr!important}.actions.result-actions{display:grid;grid-template-columns:1fr 1fr}.actions.result-actions .favorite-action{grid-column:1/-1;margin-left:0}.content-panel{padding:24px!important}
  .blog-grid{grid-template-columns:1fr}.blog-card:first-child{display:block}.blog-card:first-child .blog-card-image{aspect-ratio:16/9}.blog-card:first-child .blog-card-body{padding:22px}.blog-card:first-child h2,.blog-card:first-child h3{font-size:1.3rem}.blog-article{padding-top:36px}.blog-article-header h1{font-size:2.75rem}.blog-article-content{padding:23px}.article-cta__actions{display:grid}.article-cta__actions .button{width:100%}
  .auth-page{padding:28px 14px 54px}.auth-shell{grid-template-columns:1fr;border-radius:24px}.auth-side{padding:30px}.auth-form{padding:30px}
  .account-page{padding-top:38px}.account-navigation-links{grid-template-columns:repeat(2,minmax(0,1fr))}.account-navigation-links a span{display:inline}.account-stat-grid{grid-template-columns:1fr}.settings-page-grid{grid-template-columns:1fr}.settings-page-grid .settings-span-2{grid-column:auto}.theme-choice-group{grid-template-columns:1fr}
  .contact-layout{grid-template-columns:1fr}.footer-grid{grid-template-columns:1fr 1fr;gap:34px}.footer-brand{grid-column:1/-1}.copyright{align-items:flex-start;flex-direction:column;gap:7px}
}
@media(max-width:480px){
  .container,.footer .container{width:min(100% - 22px,var(--max))}.brand-logo{min-width:132px}.brand-logo img{width:132px}.nav{gap:8px}.nav-actions{margin-left:auto}
  .hero h1{font-size:2.75rem}.hero-proof{grid-template-columns:1fr}.expanded-category-links,.crawl-tool-links{grid-template-columns:1fr}
  .actions.result-actions{grid-template-columns:1fr}.actions.result-actions .favorite-action{grid-column:auto}.result-details{grid-template-columns:1fr}.result-details>div+div,[data-theme=dark] .result-box .result-details>div+div{border-left:0!important;border-top:1px solid var(--line)!important}
  .result-box>.result-label{padding:22px 22px 0}.result-box>.result-main,.result-box.has-multiline>.result-main{padding-inline:22px}.result-details>div{min-height:70px;padding:16px 22px}
  .account-navigation-links{grid-template-columns:1fr}.account-navigation-links a{justify-content:flex-start}.footer-grid{grid-template-columns:1fr}.footer-brand{grid-column:auto}
}
.auth-benefits span{display:flex;align-items:center;gap:10px;min-height:48px;padding:12px 13px;border:1px solid rgba(255,255,255,.10);border-radius:14px;background:rgba(255,255,255,.08);color:#fff;font-size:.8rem;font-weight:750}
.auth-benefits span i{width:28px;height:28px;display:grid;place-items:center;border-radius:9px;background:rgba(255,255,255,.1);color:#ff9a7f}

/* ============================================================
   Shared single-tool form layout system
   Semantic field markup is produced by tool-engine.js before insertion.
   Specialist editors keep their own scoped layouts.
   ============================================================ */
.tool-layout > *,
.tool-form,
#toolFields,
#toolFields > *,
.tool-form-grid > *,
.tool-options-columns > *,
.tool-field,
.tool-field__control,
.result-box,
.result-details > *{min-width:0}

.tool-form,#toolFields{width:100%}
#toolFields{display:grid;gap:24px}

.tool-form-grid{
  display:grid;
  grid-template-columns:repeat(2,minmax(0,1fr));
  column-gap:28px;
  row-gap:24px;
  align-items:stretch;
  width:100%;
}
.tool-form-grid--three,#toolFields .mega-converter-grid{grid-template-columns:repeat(3,minmax(0,1fr))}

.tool-field{
  display:grid!important;
  grid-row:span 3;
  grid-template-rows:subgrid;
  row-gap:6px;
  align-self:stretch!important;
  align-content:start;
  min-width:0;
  height:auto!important;
  margin:0!important;
  color:var(--ink-2);
  text-transform:none!important;
  letter-spacing:0!important;
}
.tool-field--full{grid-column:1/-1}
.tool-field--standalone,.tool-field--embedded{
  display:flex!important;
  grid-row:auto;
  flex-direction:column;
  gap:6px;
  width:100%;
}
.tool-field--embedded{align-self:start!important}
.tool-field__label{
  display:block;
  min-width:0;
  color:var(--ink-2);
  font-size:.78rem;
  font-weight:800;
  line-height:1.35;
  letter-spacing:.045em;
  text-transform:uppercase;
  overflow-wrap:anywhere;
}
.tool-field__help{
  display:block;
  min-width:0;
  margin:0!important;
  color:var(--muted);
  font-size:.82rem;
  font-weight:500;
  line-height:1.48;
  letter-spacing:0;
  text-transform:none;
  overflow-wrap:anywhere;
}
.tool-field__help--empty{visibility:hidden;min-height:1px}
.tool-field__control{
  display:flex;
  flex-direction:column;
  align-items:stretch;
  align-self:start;
  gap:10px;
  width:100%;
  min-width:0;
}
.tool-field__control > input:not([type=checkbox]):not([type=radio]):not([type=range]):not([type=file]),
.tool-field__control > select,
.tool-field__control > textarea,
.tool-field__control > .custom-select,
.tool-field__control > .ttg-select,
.tool-field__control > .dimension-input,
.tool-field__control > .crop-number-input,
.tool-field__control > .password-input-wrap{
  width:100%!important;
  max-width:none!important;
  min-width:0!important;
  margin:0!important;
}
.tool-field__control > input:not([type=checkbox]):not([type=radio]):not([type=range]):not([type=color]):not([type=file]),
.tool-field__control > select,
.tool-field__control > .custom-select > .custom-select-button,
.tool-field__control > .ttg-select > .ttg-select-button,
.tool-field__control > .ttg-select-button{
  min-height:52px!important;
  height:auto;
  padding:12px 15px;
  font-size:1rem;
  line-height:1.35;
  border-radius:14px;
}
.tool-field__control > textarea{
  width:100%;
  min-height:112px;
  padding:13px 15px;
  font-size:1rem;
  line-height:1.5;
  border-radius:14px;
  resize:vertical;
}
.tool-field--compact{justify-self:start;width:min(100%,240px)}
.tool-field--colour .tool-field__control{max-width:none}
.tool-field__control > input[type=color]{
  width:100%!important;
  min-width:0!important;
  min-height:52px!important;
  height:52px!important;
  padding:6px!important;
  border-radius:14px!important;
  background:var(--surface-2);
  cursor:pointer;
}
.tool-field--range .tool-field__control{min-height:52px;justify-content:center}
.tool-field__control > input[type=range]{width:100%;margin:0}
.tool-field__control > .file-dropzone{width:100%;margin:0;min-height:122px}

/* Independent column stacks prevent a textarea or upload control in one
   column from creating empty vertical holes in the neighbouring column. */
.tool-options-columns{
  display:grid;
  grid-template-columns:repeat(2,minmax(0,1fr));
  gap:28px;
  align-items:start;
  width:100%;
}
.tool-options-column{display:grid;gap:22px;align-content:start;min-width:0}
.tool-options-column .tool-field{
  display:flex!important;
  grid-row:auto;
  flex-direction:column;
  gap:6px;
  align-self:start!important;
}
.tool-options-column--upload .tool-field__control > .file-dropzone{min-height:142px}

.tool-form-grid > .tool-choice-card{
  grid-row:span 3;
  align-self:end!important;
}
.tool-choice-card{
  display:flex!important;
  flex-direction:row!important;
  align-items:center!important;
  justify-content:space-between!important;
  gap:16px!important;
  width:100%;
  min-height:52px;
  margin:0!important;
  padding:11px 13px 11px 16px!important;
  border:1px solid var(--line);
  border-radius:14px;
  background:var(--surface-2);
  color:var(--ink-2);
  font-size:.82rem;
  font-weight:800;
  line-height:1.35;
  text-transform:none!important;
  letter-spacing:0!important;
  cursor:pointer;
}
.tool-choice-card__copy{display:grid;gap:3px;min-width:0}
.tool-choice-card__copy small{margin:0;color:var(--muted);font-size:.76rem;font-weight:500;line-height:1.4}
.tool-choice-card > input[type=checkbox],.tool-choice-card > input[type=radio]{
  flex:0 0 24px!important;
  width:24px!important;
  height:24px!important;
  min-height:24px!important;
  margin:0!important;
  padding:0!important;
}

.tool-actions{
  display:flex;
  flex-wrap:wrap;
  align-items:center;
  gap:12px;
  width:100%;
  margin:0;
}
.tool-actions > button,.tool-actions > a.button{
  min-height:52px;
  margin:0;
  padding-inline:18px;
  line-height:1.25;
}
.tool-actions--full-primary > .primary-btn{width:100%;justify-content:center}
.tool-actions--inline{display:grid;grid-template-columns:minmax(0,1fr) auto;align-items:stretch}
.tool-actions--inline > input,.tool-actions--inline > select,.tool-actions--inline > textarea{width:100%;min-width:0;margin:0}
.tool-actions--inline > button,.tool-actions--inline > a.button{height:100%}
.tool-grid-action{align-self:end;min-height:52px}

/* Compact paired controls such as Regex pattern + flags still share the
   label/help/control row tracks, so wrapped helper text cannot push one control down. */
.regex-head{
  display:grid!important;
  grid-template-columns:minmax(0,1fr) minmax(180px,220px)!important;
  gap:0 18px!important;
  align-items:stretch!important;
}
.regex-head > .tool-field{
  display:grid!important;
  grid-row:span 3;
  grid-template-rows:subgrid;
  row-gap:6px;
  align-self:stretch!important;
}

/* Explicit balanced generators. */
.tool-balanced-columns{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:28px;align-items:start;width:100%}
.tool-balanced-column{display:grid;gap:22px;align-content:start;min-width:0}
.tool-balanced-column .tool-field{display:flex!important;grid-row:auto;flex-direction:column;gap:6px;align-self:start!important}
.colour-channel-grid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:18px;width:100%}
.colour-channel-grid .tool-field{display:flex!important;grid-row:auto;flex-direction:column;gap:6px}
.colour-preview{width:100%;height:clamp(120px,18vw,190px);border:1px solid var(--line);border-radius:18px;background:var(--surface-2)}

/* Existing generic labels that are outside the dynamic renderer still receive
   the same dimensions without altering specialist editor controls. */
.tool-form input:not([type=checkbox]):not([type=radio]):not([type=range]):not([type=color]):not([type=file]),
.tool-form select{min-height:52px;font-size:1rem}
.tool-form textarea{font-size:1rem;line-height:1.5}

@supports not (grid-template-rows:subgrid){
  .tool-field{display:flex!important;flex-direction:column;gap:6px;grid-row:auto}
  .tool-field__help{min-height:2.45em}
  .tool-field__help--empty{display:block}
}

@media(max-width:820px){
  .tool-form-grid,.tool-form-grid--three,#toolFields .mega-converter-grid,.tool-options-columns,.tool-balanced-columns,.colour-channel-grid{grid-template-columns:1fr!important;gap:20px}
  .tool-field{display:flex!important;grid-row:auto;flex-direction:column;gap:6px;align-self:start!important}
  .tool-form-grid > .tool-choice-card{grid-row:auto;align-self:stretch!important}
  .regex-head{grid-template-columns:1fr!important;gap:20px!important}
  .regex-head > .tool-field{display:flex!important;grid-row:auto;flex-direction:column;gap:6px}
  .tool-field--full{grid-column:auto}
  .tool-field__help--empty{display:none}
  .tool-actions--inline{grid-template-columns:1fr}
  .tool-actions--inline > button,.tool-actions--inline > a.button{width:100%}
  .tool-options-column{gap:20px}
}
@media(max-width:520px){
  #toolFields{gap:20px}
  .tool-form-grid{row-gap:18px}
  .tool-field__label{font-size:.75rem}
  .tool-field__help{font-size:.79rem}
  .tool-field__control > input:not([type=checkbox]):not([type=radio]):not([type=range]):not([type=file]),
  .tool-field__control > select,
  .tool-field__control > .custom-select > .custom-select-button,
  .tool-field__control > textarea{font-size:16px!important}
  .tool-actions{display:grid;grid-template-columns:1fr}
  .tool-actions > button,.tool-actions > a.button{width:100%}
}


/* All Tools directory refinement: simple top controls + category sidebar. */
.directory-toolbar--simple{
  display:grid;
  gap:16px;
  margin-bottom:24px;
}
.directory-toolbar--simple .filter-panel{
  margin-top:0;
}
.directory-toolbar--simple .filter-panel--show-only{
  display:block;
}
.directory-toolbar--simple #typeFilters{
  min-width:0;
}
.directory-layout{
  display:grid;
  grid-template-columns:minmax(230px,270px) minmax(0,1fr);
  align-items:start;
  gap:24px;
}
.directory-sidebar{
  min-width:0;
}
.directory-category-panel{
  position:sticky;
  top:92px;
  overflow:hidden;
  padding:20px;
  border:1px solid var(--line);
  border-radius:20px;
  background:var(--surface);
  box-shadow:var(--shadow-sm);
}
.directory-sidebar-heading{
  display:flex;
  align-items:center;
  gap:12px;
  padding:0 2px 16px;
  margin-bottom:8px;
  border-bottom:1px solid var(--line);
}
.directory-sidebar-heading h2{
  margin:2px 0 0;
  font-size:1.08rem;
  letter-spacing:-.025em;
}
.directory-sidebar-icon{
  display:grid;
  place-items:center;
  width:42px;
  height:42px;
  flex:0 0 42px;
  border-radius:13px;
  color:var(--teal);
  background:var(--teal-soft);
}
.directory-category-list{
  display:grid;
  gap:5px;
  max-height:calc(100vh - 205px);
  overflow:auto;
  padding:4px 3px 4px 0;
  scrollbar-width:thin;
}
.directory-category-item{
  width:100%;
  min-height:44px;
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:12px;
  padding:8px 9px;
  border:1px solid transparent;
  border-radius:12px;
  color:var(--ink);
  background:transparent;
  text-align:left;
  font:inherit;
  font-size:.78rem;
  font-weight:750;
  cursor:pointer;
  transition:background .16s ease,border-color .16s ease,color .16s ease,transform .16s ease;
}
.directory-category-item:hover{
  border-color:var(--line);
  background:var(--page);
}
.directory-category-item.active{
  border-color:color-mix(in srgb,var(--brand) 28%,var(--line));
  color:var(--brand);
  background:var(--brand-soft);
}
.directory-category-item-main{
  display:flex;
  align-items:center;
  min-width:0;
  gap:10px;
}
.directory-category-item-main i{
  width:28px;
  height:28px;
  flex:0 0 28px;
  display:grid;
  place-items:center;
  border-radius:9px;
  color:var(--teal);
  background:var(--teal-soft);
  font-size:.76rem;
}
.directory-category-item.active .directory-category-item-main i{
  color:var(--brand);
  background:color-mix(in srgb,var(--brand) 13%,transparent);
}
.directory-category-item-main span{
  min-width:0;
  overflow:hidden;
  text-overflow:ellipsis;
  white-space:nowrap;
}
.directory-category-item .count{
  min-width:29px;
  padding:3px 7px;
  flex:0 0 auto;
  border-radius:999px;
  color:var(--muted);
  background:var(--surface-2);
  text-align:center;
  font-size:.66rem;
  font-weight:800;
}
.directory-category-item.active .count{
  color:var(--brand);
  background:color-mix(in srgb,var(--brand) 12%,var(--surface));
}
.directory-results{
  min-width:0;
}
.directory-results-head{
  min-height:48px;
  display:flex;
  align-items:center;
  justify-content:space-between;
  margin:0 2px 14px;
}
.directory-results .tool-grid{
  grid-template-columns:repeat(3,minmax(0,1fr));
}
.directory-category-toggle{
  display:none;
}

@media(max-width:1180px){
  .directory-results .tool-grid{
    grid-template-columns:repeat(2,minmax(0,1fr));
  }
}

@media(max-width:900px){
  .directory-toolbar--simple{
    margin-bottom:16px;
  }
  .directory-toolbar--simple .filter-row{
    overflow-x:auto;
    flex-wrap:nowrap;
    padding-bottom:4px;
    scrollbar-width:thin;
  }
  .directory-toolbar--simple .filter-chip{
    flex:0 0 auto;
  }
  .directory-layout{
    grid-template-columns:minmax(0,1fr);
    gap:16px;
  }
  .directory-category-toggle{
    width:100%;
    min-height:62px;
    display:flex;
    align-items:center;
    justify-content:space-between;
    gap:14px;
    padding:10px 15px;
    border:1px solid var(--line);
    border-radius:16px;
    color:var(--ink);
    background:var(--surface);
    box-shadow:var(--shadow-sm);
    text-align:left;
  }
  .directory-category-toggle>span{
    min-width:0;
    display:grid;
    grid-template-columns:30px minmax(0,1fr);
    align-items:center;
    column-gap:10px;
  }
  .directory-category-toggle>span>i{
    grid-row:1 / 3;
    width:30px;
    height:30px;
    display:grid;
    place-items:center;
    border-radius:9px;
    color:var(--teal);
    background:var(--teal-soft);
  }
  .directory-category-toggle b{
    font-size:.88rem;
  }
  .directory-category-toggle small{
    min-width:0;
    overflow:hidden;
    color:var(--muted);
    font-size:.72rem;
    text-overflow:ellipsis;
    white-space:nowrap;
  }
  .directory-category-toggle-icon{
    color:var(--muted);
    transition:transform .18s ease;
  }
  .directory-category-toggle[aria-expanded="true"] .directory-category-toggle-icon{
    transform:rotate(180deg);
  }
  .directory-category-panel{
    position:static;
    display:none;
    max-height:none;
    margin-top:9px;
    padding:14px;
    border-radius:16px;
  }
  .directory-category-panel.open{
    display:block;
  }
  .directory-sidebar-heading{
    display:none;
  }
  .directory-category-list{
    max-height:330px;
  }
  .directory-category-item{
    min-height:46px;
  }
  .directory-results-head{
    min-height:0;
    margin-top:4px;
  }
}

@media(max-width:620px){
  .directory-toolbar--simple{
    padding:14px;
    border-radius:18px;
  }
  .directory-toolbar--simple .directory-search{
    min-height:52px;
  }
  .directory-results .tool-grid{
    grid-template-columns:minmax(0,1fr);
  }
}


/* All Tools mobile header and toolbar fit update. */
@media(max-width:760px){
  .site-header .nav{
    width:100%;
    min-width:0;
    display:flex;
    align-items:center;
  }
  .site-header .brand-logo{
    min-width:0;
    flex:0 1 auto;
    margin-right:auto;
  }
  .site-header .brand-logo img{
    width:min(145px,40vw);
    max-width:100%;
  }
  .site-header .nav-actions{
    display:flex;
    align-items:center;
    justify-content:flex-end;
    flex:0 0 auto;
    margin-left:auto;
    gap:8px;
  }
  .site-header .nav-actions .soft-btn,
  .site-header .nav-actions .mobile-menu-btn{
    flex:0 0 42px;
    width:42px;
    min-width:42px;
    height:42px;
    min-height:42px;
    padding:0;
  }

  .directory-toolbar--simple,
  .directory-toolbar--simple .search-wrap,
  .directory-toolbar--simple .filter-panel,
  .directory-toolbar--simple .filter-row,
  .directory-toolbar--simple .directory-search{
    width:100%;
    min-width:0;
    max-width:100%;
  }
  .directory-toolbar--simple .directory-search{
    display:flex;
    overflow:hidden;
  }
  .directory-toolbar--simple .directory-search input{
    width:100%;
    min-width:0;
    max-width:100%;
    overflow:hidden;
    text-overflow:ellipsis;
    white-space:nowrap;
  }
  .directory-toolbar--simple .filter-row{
    display:flex;
    flex-wrap:wrap;
    overflow:visible;
    gap:9px;
    padding:0;
  }
  .directory-toolbar--simple .filter-label{
    flex:0 0 100%;
    width:100%;
    margin:0 0 1px;
  }
  .directory-toolbar--simple .filter-chip{
    min-width:0;
    flex:1 1 calc(50% - 5px);
    justify-content:center;
    padding-inline:10px;
    white-space:nowrap;
  }
  .directory-category-list{
    scrollbar-width:none;
  }
  .directory-category-list::-webkit-scrollbar{
    display:none;
  }
}

@media(max-width:420px){
  .site-header .nav{gap:6px}
  .site-header .brand-logo img{width:min(124px,36vw)}
  .site-header .nav-actions{gap:6px}
  .site-header .nav-actions .soft-btn,
  .site-header .nav-actions .mobile-menu-btn{
    flex-basis:40px;
    width:40px;
    min-width:40px;
    height:40px;
    min-height:40px;
    border-radius:11px;
  }
  .directory-toolbar--simple{
    padding:13px;
  }
  .directory-toolbar--simple .filter-chip{
    min-height:42px;
    font-size:.78rem;
  }
}