.tools-directory-hero {
    padding: 82px 0 92px;
    color: #fff;
    background:
        radial-gradient(circle at 78% 12%, rgba(75, 111, 255, .38), transparent 29%),
        radial-gradient(circle at 18% 100%, rgba(73, 220, 189, .16), transparent 27%),
        linear-gradient(135deg, #06142f 0%, #0a2853 100%);
}

.tools-directory-hero small,
.tool-detail-hero small,
.tool-section-heading small,
.tool-faq-layout > div:first-child > small,
.related-tools-heading small {
    color: #2c5cff;
    font-size: 9px;
    font-weight: 800;
    letter-spacing: .13em;
}

.tools-directory-hero small { color: #9bf1dc; }
.tools-directory-hero h1 { max-width: 820px; margin: 13px 0 18px; font-size: clamp(42px, 5vw, 66px); line-height: 1.02; letter-spacing: -.055em; }
.tools-directory-hero h1 em { color: #91e9d5; font-style: normal; }
.tools-directory-hero p { max-width: 650px; margin: 0; color: #bac9dc; font-size: 16px; line-height: 1.7; }
.tools-directory-meta { margin-top: 30px; display: flex; flex-wrap: wrap; gap: 8px; }
.tools-directory-meta span { padding: 9px 12px; color: #dce7f5; background: rgba(255,255,255,.07); border: 1px solid rgba(255,255,255,.12); border-radius: 9px; font-size: 10px; font-weight: 700; }
.tools-directory-meta i { margin-right: 6px; color: #9bf1dc; }

.tools-directory { padding: 76px 0 96px; background: #f5f7fb; }
.tools-directory-heading { max-width: 650px; margin-bottom: 30px; }
.tools-directory-heading small { color: #2c5cff; font-size: 9px; font-weight: 800; letter-spacing: .13em; }
.tools-directory-heading h2 { margin: 8px 0 9px; color: #0b1f3a; font-size: 36px; letter-spacing: -.035em; }
.tools-directory-heading p { margin: 0; color: #64758b; line-height: 1.7; }
.tools-directory-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 16px; }
.tools-directory-card { min-height: 300px; padding: 26px; display: flex; flex-direction: column; color: #11243e; background: #fff; border: 1px solid #dfe6ef; border-radius: 18px; box-shadow: 0 12px 32px rgba(20, 47, 82, .045); transition: transform .2s ease, border-color .2s ease, box-shadow .2s ease; }
.tools-directory-card:hover { color: #11243e; border-color: #bfcdf0; box-shadow: 0 18px 42px rgba(20, 47, 82, .09); transform: translateY(-4px); }
.tools-directory-card > span, .related-tools-grid > a > span { width: 47px; height: 47px; display: grid; place-items: center; color: #2c5cff; background: #edf2ff; border-radius: 13px; font-size: 18px; }
.tools-directory-card > small { margin-top: 24px; color: #7b899c; font-size: 8px; font-weight: 800; letter-spacing: .1em; text-transform: uppercase; }
.tools-directory-card h2 { margin: 6px 0 9px; font-size: 22px; letter-spacing: -.025em; }
.tools-directory-card p { margin: 0; color: #65768a; font-size: 12px; line-height: 1.7; }
.tools-directory-card b { margin-top: auto; padding-top: 25px; color: #264fde; font-size: 10px; }
.tools-directory-card b i { margin-left: 5px; transition: transform .2s ease; }
.tools-directory-card:hover b i { transform: translateX(3px); }

.tool-detail-hero { padding: 34px 0 78px; overflow: hidden; background: radial-gradient(circle at 75% 25%, rgba(48, 93, 255, .12), transparent 31%), linear-gradient(180deg, #f7f9fd, #edf3fb); }
.tool-breadcrumb { margin-bottom: 47px; display: flex; align-items: center; gap: 10px; color: #77889c; font-size: 10px; font-weight: 700; }
.tool-breadcrumb a { color: #365ee5; }
.tool-breadcrumb i { font-size: 7px; }
.tool-detail-hero__grid { display: block; }
.tool-category { display: inline-flex; align-items: center; gap: 8px; color: #234cd1; font-size: 9px; font-weight: 800; letter-spacing: .12em; text-transform: uppercase; }
.tool-category i { width: 31px; height: 31px; display: grid; place-items: center; color: #fff; background: #2f5bff; border-radius: 9px; font-size: 12px; }
.tool-detail-hero h1 { max-width: 790px; margin: 17px 0 18px; color: #071a39; font-size: clamp(40px, 5vw, 62px); line-height: 1.03; letter-spacing: -.055em; }
.tool-detail-hero__grid > div > p { max-width: 730px; margin: 0; color: #596d85; font-size: 15px; line-height: 1.75; }
.tool-hero-action { margin-top: 27px; display: inline-flex; align-items: center; gap: 8px; color: #153fd2; font-size: 10px; font-weight: 800; }

.tool-workspace-section { padding: 80px 0; background: #fff; scroll-margin-top: 90px; }
.tool-workspace { display: grid; grid-template-columns: minmax(0, 1.35fr) minmax(300px, .65fr); gap: 20px; align-items: stretch; }
.tool-calculator-card, .tool-method-card { padding: 31px; border: 1px solid #dce4ed; border-radius: 19px; box-shadow: 0 15px 38px rgba(18,45,78,.055); }
.tool-calculator-card { background: #fff; }
.tool-calculator-card > header { margin-bottom: 27px; display: flex; align-items: center; gap: 13px; }
.tool-calculator-card > header > span { width: 45px; height: 45px; display: grid; place-items: center; color: #fff; background: #2f5bff; border-radius: 12px; box-shadow: 0 9px 20px rgba(47,91,255,.22); }
.tool-calculator-card header small { color: #7f8da0; font-size: 8px; font-weight: 800; letter-spacing: .12em; }
.tool-calculator-card h2 { margin: 3px 0 0; color: #0c203d; font-size: 22px; }
.tool-fields { display: grid; grid-template-columns: repeat(3, minmax(0,1fr)); gap: 11px; }
.tool-fields--four { grid-template-columns: repeat(2, minmax(0,1fr)); }
.tool-fields--meta { grid-template-columns: repeat(2, minmax(0,1fr)); }
.tool-fields--message { grid-template-columns: minmax(220px,.55fr) 1fr; }
.tool-fields label { position: relative; display: grid; gap: 7px; color: #42576f; font-size: 10px; font-weight: 700; }
.tool-fields label > small { position: absolute; top: 0; right: 0; color: #8b98a8; font-size: 8px; font-weight: 500; }
.tool-fields label.full { grid-column: 1 / -1; }
.tool-fields input, .tool-fields select, .tool-fields textarea { width: 100%; min-height: 47px; padding: 11px 13px; color: #10233d; background: #f8fafc; border: 1px solid #d5dfeb; border-radius: 10px; outline: 0; font: inherit; font-size: 11px; transition: border-color .2s ease, box-shadow .2s ease, background .2s ease; }
.tool-fields textarea { min-height: 94px; resize: vertical; }
.tool-fields input:focus, .tool-fields select:focus, .tool-fields textarea:focus { background: #fff; border-color: #5b79ee; box-shadow: 0 0 0 3px rgba(47,91,255,.09); }
.tool-result { margin-top: 18px; padding: 17px; display: grid; gap: 1px; color: #fff; background: linear-gradient(135deg, #071d40, #0c315e); border: 0; border-radius: 13px; }
.tool-result--three { grid-template-columns: repeat(3, minmax(0,1fr)); }
.tool-result span { min-width: 0; padding: 3px 15px; display: grid; gap: 3px; border-left: 1px solid rgba(255,255,255,.11); }
.tool-result span:first-child { border-left: 0; }
.tool-result small { color: #9fb1c8; font-size: 8px; }
.tool-result strong { overflow: hidden; color: #fff; font-size: clamp(16px, 2vw, 21px); text-overflow: ellipsis; white-space: nowrap; }
.tool-result strong.is-negative { color: #ff9ca5; }
.tool-privacy { margin: 16px 0 0; display: flex; align-items: center; gap: 7px; color: #8391a2; font-size: 9px; }
.tool-privacy i { color: #27a888; }
.tool-method-card { color: #dce8f7; background: #071d40; border-color: #071d40; }
.tool-method-card > small { color: #8fe5d2; font-size: 8px; font-weight: 800; letter-spacing: .12em; }
.tool-method-card > h2 { margin: 9px 0 24px; color: #fff; font-size: 24px; line-height: 1.32; letter-spacing: -.025em; }
.tool-facts { display: grid; }
.tool-facts article { padding: 16px 0; display: grid; grid-template-columns: 34px 1fr; gap: 12px; border-top: 1px solid rgba(255,255,255,.1); }
.tool-facts article > b { width: 27px; height: 27px; display: grid; place-items: center; color: #071d40; background: #8fe5d2; border-radius: 8px; font-size: 8px; }
.tool-facts h3 { margin: 0 0 4px; color: #fff; font-size: 12px; }
.tool-facts p { margin: 0; color: #a9bad0; font-size: 9px; line-height: 1.6; }

.search-preview { margin-top: 18px; padding: 22px; background: #fff; border: 1px solid #dce3ec; border-radius: 13px; box-shadow: 0 10px 26px rgba(20,47,82,.04); }
.search-preview > small { margin-bottom: 13px; display: block; color: #8a96a5; font-size: 8px; font-weight: 800; letter-spacing: .1em; }
.search-preview span { display: block; color: #30724b; font-size: 10px; }
.search-preview strong { margin: 5px 0; display: block; color: #1a0dab; font-size: 19px; font-weight: 500; line-height: 1.3; }
.search-preview p { margin: 0; color: #4d5156; font-size: 11px; line-height: 1.55; }
.tool-link-result { margin-top: 17px; display: grid; grid-template-columns: minmax(0,1fr) auto auto; gap: 8px; }
.tool-link-result input { min-width: 0; padding: 11px 12px; color: #33465c; background: #f8fafc; border: 1px solid #d5dfeb; border-radius: 10px; font-size: 10px; }
.tool-link-result button, .tool-link-result a { min-height: 43px; padding: 10px 15px; display: inline-flex; align-items: center; justify-content: center; gap: 6px; color: #fff; background: #0a2045; border: 0; border-radius: 9px; font-size: 9px; font-weight: 800; cursor: pointer; }
.tool-link-result a { background: #2f5bff; }
.tool-link-result a[aria-disabled="true"] { opacity: .45; pointer-events: none; }

.tool-guide-section { padding: 76px 0 84px; background: #f5f7fb; }
.tool-section-heading { max-width: 650px; }
.tool-section-heading h2, .tool-faq-layout h2, .related-tools-heading h2 { margin: 7px 0 8px; color: #0c203d; font-size: 34px; letter-spacing: -.035em; }
.tool-section-heading p, .tool-faq-layout > div:first-child p { margin: 0; color: #68798e; line-height: 1.7; }
.tool-steps { margin: 31px 0 0; padding: 0; display: grid; grid-template-columns: repeat(3,1fr); gap: 15px; list-style: none; }
.tool-steps li { min-height: 155px; padding: 23px; background: #fff; border: 1px solid #dfe6ef; border-radius: 16px; }
.tool-steps span { width: 31px; height: 31px; display: grid; place-items: center; color: #fff; background: #2f5bff; border-radius: 9px; font-size: 8px; font-weight: 800; }
.tool-steps p { margin: 19px 0 0; color: #334960; font-size: 12px; line-height: 1.65; }

.tool-faq-section { padding: 84px 0; background: #fff; }
.tool-faq-layout { display: grid; grid-template-columns: 340px 1fr; gap: 70px; align-items: start; }
.tool-faq-list { border-top: 1px solid #dce4ed; }
.tool-faq-list details { border-bottom: 1px solid #dce4ed; }
.tool-faq-list summary { padding: 19px 3px; display: flex; align-items: center; justify-content: space-between; gap: 20px; color: #152a45; font-size: 12px; font-weight: 700; cursor: pointer; list-style: none; }
.tool-faq-list summary::-webkit-details-marker { display: none; }
.tool-faq-list summary i { color: #5c72a0; font-size: 9px; transition: transform .2s ease; }
.tool-faq-list details[open] summary i { transform: rotate(45deg); }
.tool-faq-list details p { margin: -4px 35px 20px 3px; color: #66788d; font-size: 11px; line-height: 1.75; }

.related-tools-section { padding: 76px 0 90px; background: #f5f7fb; }
.related-tools-heading { margin-bottom: 25px; display: flex; align-items: end; justify-content: space-between; gap: 30px; }
.related-tools-heading h2 { margin-bottom: 0; }
.related-tools-heading > a { color: #2a51da; font-size: 10px; font-weight: 800; }
.related-tools-grid { display: grid; grid-template-columns: repeat(3,1fr); gap: 15px; }
.related-tools-grid > a { min-height: 260px; padding: 24px; display: flex; flex-direction: column; color: #142942; background: #fff; border: 1px solid #dfe6ef; border-radius: 16px; transition: transform .2s ease, box-shadow .2s ease; }
.related-tools-grid > a:hover { color: #142942; box-shadow: 0 15px 34px rgba(20,47,82,.08); transform: translateY(-3px); }
.related-tools-grid > a > small { margin-top: 20px; color: #8090a3; font-size: 8px; font-weight: 800; letter-spacing: .1em; text-transform: uppercase; }
.related-tools-grid h3 { margin: 5px 0 7px; font-size: 19px; }
.related-tools-grid p { margin: 0; color: #697a8e; font-size: 10px; line-height: 1.65; }
.related-tools-grid b { margin-top: auto; padding-top: 18px; color: #2a51da; font-size: 9px; }
.tool-not-found { padding: 100px 0; text-align: center; }

@media (max-width: 980px) {
    .tools-directory-grid { grid-template-columns: repeat(2,1fr); }
    .tool-workspace { grid-template-columns: 1fr; }
    .tool-faq-layout { grid-template-columns: 1fr; gap: 30px; }
}

@media (max-width: 680px) {
    .tools-directory-hero { padding: 60px 0 70px; }
    .tools-directory { padding: 60px 0 70px; }
    .tools-directory-grid, .tool-steps, .related-tools-grid { grid-template-columns: 1fr; }
    .tools-directory-card { min-height: 255px; }
    .tool-detail-hero { padding-bottom: 58px; }
    .tool-breadcrumb { margin-bottom: 34px; }
    .tool-detail-hero h1 { font-size: 39px; }
    .tool-workspace-section, .tool-guide-section, .tool-faq-section, .related-tools-section { padding: 58px 0; }
    .tool-calculator-card, .tool-method-card { padding: 22px 18px; }
    .tool-fields, .tool-fields--four, .tool-fields--meta, .tool-fields--message { grid-template-columns: 1fr; }
    .tool-result--three { grid-template-columns: 1fr; }
    .tool-result span { padding: 10px 7px; border-top: 1px solid rgba(255,255,255,.11); border-left: 0; }
    .tool-result span:first-child { border-top: 0; }
    .tool-link-result { grid-template-columns: 1fr 1fr; }
    .tool-link-result input { grid-column: 1 / -1; }
    .related-tools-heading { align-items: flex-start; flex-direction: column; }
}

@media (prefers-reduced-motion: reduce) {
    .tools-directory-card, .related-tools-grid > a { transition: none; }
}