:root{
 --ink:#12203b;--muted:#61708a;--line:#dfe6f2;--soft:#f7faff;
 --blue:#1f69d8;--shadow:0 8px 24px rgba(22,49,91,.08);
}
body{background:#fff;color:var(--ink);font-family:"Helvetica Neue",Helvetica,Arial,sans-serif;}
a{color:inherit}
.navbar{min-height:62px;margin-bottom:0;border:0;border-bottom:1px solid var(--line);background:rgba(255,255,255,.98)}
.navbar-brand{height:62px;padding:18px 15px;color:var(--ink)!important;font-size:24px;font-weight:700}
.navbar-brand:before{content:"⚡";margin-right:6px;color:var(--blue)}
.navbar-nav>li>a{padding-top:21px;padding-bottom:21px;color:var(--ink)!important}
.body-content{padding-top:0}
.instant-hero{padding:72px 0 26px;text-align:left}
.instant-hero h1{margin:0;max-width:760px;font-size:52px;line-height:1.06;font-weight:700;letter-spacing:-1.5px}
.instant-hero h1 .accent{display:block;color:var(--blue)}
.instant-hero .lead{max-width:680px;margin:20px 0 0;color:var(--muted);font-size:19px;line-height:1.55}
.instant-search,.subdomain-search{position:relative;margin-top:28px;max-width:none}
.instant-search .form-control,.subdomain-search .form-control{height:48px;padding:10px 125px 10px 16px;border:1px solid var(--line);border-radius:8px;box-shadow:0 2px 10px rgba(27,67,122,.05);font-size:16px}
.instant-search button{position:absolute;right:0;top:0;height:48px;min-width:110px;border:0;border-radius:0 8px 8px 0;background:var(--blue);color:#fff;font-weight:600}
.popular-tools{margin:18px 0 18px}.popular-tools h2,.section-heading{margin:0 0 12px;font-size:20px;font-weight:700}
.popular-row{display:flex;flex-wrap:wrap;gap:10px}
.popular-pill{display:inline-flex;align-items:center;gap:7px;padding:8px 13px;border:1px solid var(--line);border-radius:7px;background:#fff;box-shadow:0 2px 8px rgba(27,67,122,.04);font-size:13px}
.popular-pill:hover{text-decoration:none;border-color:#b8c8e3;box-shadow:var(--shadow)}
.section-grid{display:grid;grid-template-columns:repeat(5,minmax(0,1fr));gap:18px;margin-bottom:22px}
.section-card{position:relative;min-height:174px;padding:18px 16px 14px;border:1px solid var(--line);border-radius:9px;background:#fff;box-shadow:var(--shadow);text-align:center}
.section-card:hover,.sub-tool-card:hover{transform:translateY(-2px);text-decoration:none;border-color:#bdcce4}
.section-icon{width:52px;height:52px;margin:0 auto 10px;border-radius:50%;color:#fff;font-size:25px;line-height:52px;font-weight:600;text-align:center}
.section-icon.calc{background:linear-gradient(135deg,#1f69d8,#3f85ee)}
.section-icon.convert{background:linear-gradient(135deg,#35a85f,#64c879)}
.section-icon.network{background:linear-gradient(135deg,#7d4ec5,#a074e2)}
.section-icon.dev{background:linear-gradient(135deg,#f47b20,#ff9a4f)}
.section-icon.time{background:linear-gradient(135deg,#e83a4e,#ff6b79)}
.section-icon.text{background:linear-gradient(135deg,#10a7a0,#39c5be)}
.section-icon.image{background:linear-gradient(135deg,#2870d8,#5a94ef)}
.section-icon.uk{background:linear-gradient(135deg,#e83a73,#ff6798)}
.section-icon.usa{background:linear-gradient(135deg,#409244,#67b55e)}
.section-icon.web{background:linear-gradient(135deg,#8750c8,#a36cdb)}
.section-card strong{display:block;font-size:18px;margin-bottom:6px}
.section-card p{margin:0;color:var(--muted);font-size:13px;line-height:1.45}
.section-card .count{position:absolute;left:14px;right:14px;bottom:10px;padding-top:8px;border-top:1px solid #eef2f7;color:var(--blue);text-align:left;font-size:12px}
.section-card .count:after{content:"→";float:right;font-size:18px}
.benefits{display:grid;grid-template-columns:repeat(4,1fr);margin:16px 0 28px;border:1px solid #cfe0fa;border-radius:8px;background:#f8fbff}
.benefit{padding:18px 20px;border-right:1px solid #dce7f7}.benefit:last-child{border-right:0}
.benefit strong{display:block;margin-bottom:4px;color:#2459ad}.benefit span{color:var(--muted);font-size:13px}
.subdomain-hero{padding:72px 0 28px}.subdomain-hero-inner{display:flex;align-items:center;gap:18px}
.subdomain-hero .section-icon{margin:0;flex:0 0 58px;width:58px;height:58px;line-height:58px;font-size:27px}
.subdomain-hero h1{margin:0 0 7px;font-size:44px;font-weight:700;letter-spacing:-1px}.subdomain-hero p{margin:0;color:var(--muted);font-size:18px}
.subdomain-search{max-width:720px;margin-top:24px}.subdomain-search .form-control{padding-right:16px}
.subdomain-tools{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:16px;margin:10px 0 34px}
.sub-tool-card{display:block;min-height:132px;padding:18px;border:1px solid var(--line);border-radius:9px;background:#fff;box-shadow:var(--shadow);color:var(--ink)}
.sub-tool-card strong{display:block;margin-bottom:7px;font-size:18px}.sub-tool-card span{display:block;color:var(--muted);font-size:14px;line-height:1.45}
.sub-tool-card .arrow{margin-top:14px;color:var(--blue);font-size:18px;text-align:right}
.tool-page{max-width:820px;margin-bottom:60px}.breadcrumbs{margin:82px 0 16px;color:var(--muted);font-size:13px}.breadcrumbs a{color:var(--blue)}
.tool-title{font-size:42px;font-weight:700;letter-spacing:-1px}.tool-lead{color:var(--muted);font-size:18px}
.tool-box{border:1px solid var(--line);border-radius:10px;padding:22px;margin:24px 0;background:#fff;box-shadow:var(--shadow)}
.tool-box .form-control{border-radius:7px;border-color:var(--line);box-shadow:none}
.tool-actions{margin-top:12px}.tool-actions .btn{margin-right:7px;margin-bottom:7px;border-radius:7px}
.tool-result{margin-top:18px;padding:16px;border:1px solid var(--line);border-radius:8px;background:var(--soft);white-space:pre-wrap;word-break:break-word;font-size:15px}
.related{margin:28px 0}.related-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:12px}.related a{display:block;padding:14px;border:1px solid var(--line);border-radius:8px;background:#fff}.related a:hover{text-decoration:none;box-shadow:var(--shadow)}
.seo-copy{border-top:1px solid var(--line);padding-top:24px;margin-top:32px}.seo-copy p,.seo-copy li{color:#52617a;line-height:1.7}
.site-footer{margin-top:38px;padding:22px 0;border-top:1px solid var(--line);color:var(--muted);font-size:12px}.footer-links a{margin-right:16px;color:#52617a}
.legal{max-width:820px;padding-top:80px;padding-bottom:50px}.legal h1{font-weight:700}.legal h2{margin-top:28px}
.not-found{text-align:center;padding:130px 15px}.not-found h1{font-size:72px;font-weight:700;color:var(--blue)}
#colour-preview{height:100px;border-radius:8px;border:1px solid var(--line);margin-top:12px}
@media(max-width:1100px){.section-grid{grid-template-columns:repeat(3,1fr)}.subdomain-tools{grid-template-columns:repeat(2,1fr)}}
@media(max-width:767px){
 .instant-hero{padding-top:48px}.instant-hero h1{font-size:38px}.instant-hero .lead{font-size:17px}
 .section-grid{grid-template-columns:repeat(2,1fr);gap:12px}.benefits{grid-template-columns:1fr 1fr}
 .benefit:nth-child(2){border-right:0}.benefit:nth-child(-n+2){border-bottom:1px solid #dce7f7}
 .subdomain-hero-inner{align-items:flex-start}.subdomain-hero h1{font-size:34px}
 .subdomain-tools{grid-template-columns:1fr}.related-grid{grid-template-columns:1fr}.tool-title{font-size:34px}
}
@media(max-width:460px){.section-grid{grid-template-columns:1fr}.benefits{grid-template-columns:1fr}.benefit{border-right:0;border-bottom:1px solid #dce7f7}.benefit:last-child{border-bottom:0}}


/* V7 glossary tooltips */
.term-help-wrap {
    display: inline-flex;
    align-items: center;
    gap: 5px;
    position: relative;
}
.term-help {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 19px;
    height: 19px;
    padding: 0;
    border: 1px solid #9eb2d1;
    border-radius: 50%;
    background: #fff;
    color: #1f69d8;
    font-size: 12px;
    font-weight: 700;
    cursor: help;
    vertical-align: middle;
}
.term-tooltip {
    display: none;
    position: absolute;
    z-index: 1000;
    left: 0;
    top: calc(100% + 8px);
    width: min(320px, 80vw);
    padding: 12px 14px;
    border: 1px solid var(--line);
    border-radius: 8px;
    background: #fff;
    box-shadow: var(--shadow);
    color: var(--ink);
    font-size: 13px;
    font-weight: 400;
    line-height: 1.45;
}
.term-tooltip.open { display: block; }
.term-tooltip a { color: var(--blue); font-weight: 600; }
.glossary-grid, .sections-grid {
    display: grid;
    grid-template-columns: repeat(3, minmax(0,1fr));
    gap: 16px;
    margin: 18px 0 38px;
}
.glossary-card, .section-directory-card {
    display:block;
    border:1px solid var(--line);
    border-radius:9px;
    padding:18px;
    background:#fff;
    box-shadow:var(--shadow);
}
.glossary-card:hover,.section-directory-card:hover {
    text-decoration:none;
    transform:translateY(-2px);
    border-color:#bdcce4;
}
.glossary-card strong,.section-directory-card strong {
    display:block;
    margin-bottom:6px;
    font-size:18px;
}
.glossary-card span,.section-directory-card span {
    color:var(--muted);
    line-height:1.45;
}
.source-box {
    margin: 24px 0;
    padding: 15px 17px;
    border-left: 4px solid var(--blue);
    border-radius: 6px;
    background: #f7faff;
}
.source-box p { margin: 0 0 7px; }
.source-box p:last-child { margin-bottom:0; }
.social-platforms {
    display:flex;
    flex-wrap:wrap;
    gap:8px;
    margin:0 0 20px;
}
.social-platforms a {
    padding:7px 11px;
    border:1px solid var(--line);
    border-radius:999px;
    background:#fff;
}
@media(max-width:800px){
    .glossary-grid,.sections-grid{grid-template-columns:1fr 1fr}
}
@media(max-width:500px){
    .glossary-grid,.sections-grid{grid-template-columns:1fr}
}


/* V7.3 - category colour carried through child pages */
body {
    --accent: #1f69d8;
    --accent-2: #3f85ee;
    --accent-soft: #eef5ff;
    --accent-line: #cfe0fa;
}

body.theme-calc       { --accent:#1f69d8; --accent-2:#3f85ee; --accent-soft:#eef5ff; --accent-line:#cfe0fa; }
body.theme-convert    { --accent:#35a85f; --accent-2:#64c879; --accent-soft:#effaf2; --accent-line:#cfead7; }
body.theme-network    { --accent:#7d4ec5; --accent-2:#a074e2; --accent-soft:#f5f0fb; --accent-line:#dfd0f0; }
body.theme-dev        { --accent:#f47b20; --accent-2:#ff9a4f; --accent-soft:#fff4eb; --accent-line:#f8d8bd; }
body.theme-time       { --accent:#e83a4e; --accent-2:#ff6b79; --accent-soft:#fff0f2; --accent-line:#f5ccd2; }
body.theme-text       { --accent:#10a7a0; --accent-2:#39c5be; --accent-soft:#eefafa; --accent-line:#c8ece9; }
body.theme-image      { --accent:#2870d8; --accent-2:#5a94ef; --accent-soft:#eef5ff; --accent-line:#ccdcf6; }
body.theme-uk         { --accent:#e83a73; --accent-2:#ff6798; --accent-soft:#fff0f5; --accent-line:#f5cbda; }
body.theme-usa        { --accent:#409244; --accent-2:#67b55e; --accent-soft:#f0f8ef; --accent-line:#cfe5cc; }
body.theme-web        { --accent:#8750c8; --accent-2:#a36cdb; --accent-soft:#f6f1fb; --accent-line:#dfd1ef; }
body.theme-social     { --accent:#536dfe; --accent-2:#7c8cff; --accent-soft:#f0f2ff; --accent-line:#d3d8ff; }

body.theme-tiktok     { --accent:#111111; --accent-2:#25f4ee; --accent-soft:#f5fbfb; --accent-line:#c8efed; }
body.theme-youtube    { --accent:#e62117; --accent-2:#ff4b42; --accent-soft:#fff1f0; --accent-line:#f3cecb; }
body.theme-facebook   { --accent:#1877f2; --accent-2:#4593f5; --accent-soft:#eef5ff; --accent-line:#cedef4; }
body.theme-instagram  { --accent:#c13584; --accent-2:#fd1d1d; --accent-soft:#fff0f6; --accent-line:#f0cbdc; }

/* Navbar brand follows the section accent */
body[class*="theme-"] .navbar-brand::before {
    color: var(--accent);
}

/* Child-page hero and headings now carry their section identity */
body[class*="theme-"] .subdomain-hero {
    position: relative;
    margin-top: 62px;
    padding: 34px 28px 30px;
    border: 1px solid var(--accent-line);
    border-top: 5px solid var(--accent);
    border-radius: 0 0 12px 12px;
    background:
        radial-gradient(circle at 92% 8%, color-mix(in srgb, var(--accent-2) 18%, transparent), transparent 38%),
        linear-gradient(135deg, var(--accent-soft), #fff 72%);
}

body[class*="theme-"] .subdomain-hero h1,
body[class*="theme-"] .tool-title,
body[class*="theme-"] .legal h1 {
    color: var(--ink);
}

body[class*="theme-"] .subdomain-hero h1::after,
body[class*="theme-"] .tool-title::after,
body[class*="theme-"] .legal h1::after {
    content: "";
    display: block;
    width: 54px;
    height: 4px;
    margin-top: 10px;
    border-radius: 99px;
    background: linear-gradient(90deg, var(--accent), var(--accent-2));
}

/* Section / social brand icon */
body[class*="theme-"] .section-icon {
    background: linear-gradient(135deg, var(--accent), var(--accent-2)) !important;
    box-shadow: 0 8px 20px color-mix(in srgb, var(--accent) 20%, transparent);
}

/* Tool cards gain a coloured marker */
body[class*="theme-"] .sub-tool-card,
body[class*="theme-"] .tool-box,
body[class*="theme-"] .section-directory-card,
body[class*="theme-"] .glossary-card {
    position: relative;
    overflow: hidden;
}

body[class*="theme-"] .sub-tool-card::before,
body[class*="theme-"] .section-directory-card::before {
    content: "";
    position: absolute;
    left: 0;
    top: 0;
    bottom: 0;
    width: 4px;
    background: linear-gradient(var(--accent), var(--accent-2));
}

body[class*="theme-"] .sub-tool-card:hover,
body[class*="theme-"] .section-directory-card:hover,
body[class*="theme-"] .glossary-card:hover {
    border-color: var(--accent-line);
    box-shadow: 0 10px 28px color-mix(in srgb, var(--accent) 12%, transparent);
}

body[class*="theme-"] .sub-tool-card .arrow,
body[class*="theme-"] .breadcrumbs a,
body[class*="theme-"] .related a strong,
body[class*="theme-"] .seo-copy a {
    color: var(--accent);
}

/* Working tool itself */
body[class*="theme-"] .tool-box {
    border-top: 4px solid var(--accent);
    background: linear-gradient(180deg, var(--accent-soft) 0, #fff 62px);
}

body[class*="theme-"] .tool-result {
    border-color: var(--accent-line);
    background: var(--accent-soft);
}

body[class*="theme-"] .btn-primary {
    border-color: var(--accent);
    background: var(--accent);
}

body[class*="theme-"] .btn-primary:hover,
body[class*="theme-"] .btn-primary:focus {
    border-color: var(--accent-2);
    background: var(--accent-2);
}

/* Supporting information */
body[class*="theme-"] .source-box {
    border-left-color: var(--accent);
    background: var(--accent-soft);
}

body[class*="theme-"] .related a {
    border-top: 3px solid var(--accent);
}

body[class*="theme-"] .benefits {
    border-color: var(--accent-line);
    background: var(--accent-soft);
}

body[class*="theme-"] .benefit strong {
    color: var(--accent);
}

/* Social brand hubs get a compact colour banner */
body.theme-tiktok .subdomain-hero,
body.theme-youtube .subdomain-hero,
body.theme-facebook .subdomain-hero,
body.theme-instagram .subdomain-hero {
    box-shadow: 0 10px 28px color-mix(in srgb, var(--accent) 10%, transparent);
}

/* Legal / glossary pages on root should still feel part of the brand */
body.theme-root .legal,
body.theme-root .not-found {
    position: relative;
}
body.theme-root .legal::before,
body.theme-root .not-found::before {
    content: "";
    display: block;
    height: 5px;
    margin-bottom: 28px;
    border-radius: 99px;
    background: linear-gradient(90deg, #1f69d8, #7d4ec5, #10a7a0);
}

@supports not (background: color-mix(in srgb, red 10%, transparent)) {
    body[class*="theme-"] .subdomain-hero,
    body[class*="theme-"] .sub-tool-card:hover,
    body[class*="theme-"] .section-directory-card:hover {
        box-shadow: 0 8px 24px rgba(22,49,91,.08);
    }
}

@media (max-width: 767px) {
    body[class*="theme-"] .subdomain-hero {
        margin-top: 62px;
        padding: 24px 18px;
    }
}

.tool-colour-band {
    height: 6px;
    margin: 72px 0 -56px;
    border-radius: 99px;
    background: linear-gradient(90deg, var(--accent), var(--accent-2));
}
.tool-colour-band + .breadcrumbs {
    margin-top: 82px;
}
@media(max-width:767px){
    .tool-colour-band { margin-top:72px; }
}