:root{
    --xs-red:#e21f26;
    --xs-red-dark:#b71119;
    --xs-yellow:#ffc400;
    --xs-blue:#114c9d;
    --xs-blue-dark:#061d43;
    --xs-blue-deep:#031126;
    --xs-text:#14213d;
    --xs-muted:#66738a;
    --xs-bg:#f5f7fb;
    --xs-white:#ffffff;
    --xs-line:#e4eaf2;
    --xs-shadow:0 18px 48px rgba(19,43,84,.12);
}

*,
*::before,
*::after{
    box-sizing:border-box;
}

html{
    scroll-behavior:smooth;
}

body{
    margin:0;
    min-height:100vh;
    overflow-x:hidden;
    font-family:Inter,Arial,sans-serif;
    background:var(--xs-bg);
    color:var(--xs-text);
}

a{
    color:inherit;
    text-decoration:none;
}

img{
    display:block;
    max-width:100%;
    height:auto;
}

button,
input,
textarea,
select{
    font:inherit;
}

button{
    cursor:pointer;
}

.xs-container{
    width:min(1200px,92%);
    margin-inline:auto;
}

/* =========================================================
   HEADER
   ========================================================= */

.xs-topbar{
    position:relative;
    z-index:3100;
    background:var(--xs-blue-deep);
    color:#fff;
    border-bottom:1px solid rgba(255,255,255,.1);
}

.xs-topbar-inner{
    min-height:39px;
    display:flex;
    align-items:center;
    justify-content:space-between;
    gap:14px;
}

.xs-topbar-group{
    display:flex;
    align-items:center;
    gap:20px;
    flex-wrap:wrap;
}

.xs-topbar a,
.xs-topbar span{
    color:#e8effa;
    font-size:12.5px;
    line-height:1.3;
}

.xs-topbar i{
    color:var(--xs-yellow);
    margin-right:7px;
}

.xs-header{
    position:sticky;
    top:0;
    z-index:3000;
    background:rgba(255,255,255,.97);
    backdrop-filter:blur(16px);
    border-bottom:1px solid var(--xs-line);
    box-shadow:0 6px 22px rgba(13,38,78,.055);
}

.xs-header-inner{
    min-height:78px;
    display:flex;
    align-items:center;
    justify-content:space-between;
    gap:24px;
}

.xs-brand{
    display:flex;
    align-items:center;
    gap:11px;
    min-width:210px;
}

.xs-brand img{
    width:62px;
    height:58px;
    max-width:62px;
    max-height:58px;
    object-fit:contain;
    flex:0 0 auto;
}

.xs-brand-copy strong{
    display:block;
    margin:0;
    color:var(--xs-blue);
    font-size:19px;
    font-weight:900;
    line-height:1.1;
}

.xs-brand-copy span{
    display:block;
    margin-top:4px;
    color:var(--xs-muted);
    font-size:11.5px;
    line-height:1.2;
}

.xs-nav{
    display:flex;
    align-items:center;
    gap:4px;
}

.xs-nav a{
    display:flex;
    align-items:center;
    gap:7px;
    padding:12px 13px;
    border-radius:11px;
    color:#253957;
    font-size:14px;
    font-weight:800;
    white-space:nowrap;
    transition:.22s ease;
}

.xs-nav a:hover{
    background:#edf3fd;
    color:var(--xs-blue);
}

.xs-nav .xs-contact-link{
    margin-left:7px;
    background:linear-gradient(135deg,var(--xs-red),var(--xs-red-dark));
    color:#fff;
}

.xs-nav .xs-contact-link:hover{
    background:linear-gradient(135deg,var(--xs-red-dark),#8d0910);
    color:#fff;
}

.xs-menu-button{
    display:none;
    width:46px;
    height:46px;
    flex:0 0 46px;
    align-items:center;
    justify-content:center;
    border:0;
    border-radius:13px;
    background:linear-gradient(135deg,var(--xs-yellow),#ff9d00);
    color:#171717;
    font-size:18px;
}

/* =========================================================
   TOOL PAGE HERO
   ========================================================= */

.pagehero{
    position:relative;
    text-align:center;
    padding:48px 5% 42px;
    background:
        radial-gradient(circle at 12% 12%,rgba(255,196,0,.18),transparent 25%),
        linear-gradient(135deg,#fff,#edf4ff);
    border-bottom:1px solid var(--xs-line);
}

.pagehero .tool-brand-chip{
    display:inline-flex;
    align-items:center;
    gap:8px;
    margin-bottom:12px;
    padding:8px 13px;
    border:1px solid var(--xs-line);
    border-radius:999px;
    background:#fff;
    box-shadow:0 7px 18px rgba(20,42,82,.07);
    color:var(--xs-red);
    font-size:12px;
    font-weight:900;
    letter-spacing:.06em;
}

.pagehero h1{
    margin:0;
    color:#102b57;
    font-size:clamp(32px,5vw,52px);
    line-height:1.08;
}

.pagehero p{
    max-width:760px;
    margin:13px auto 0;
    color:var(--xs-muted);
    line-height:1.75;
}

/* =========================================================
   TOOL BODY
   ========================================================= */

.toolwrap{
    width:min(1070px,92%);
    margin:30px auto 72px;
    display:grid;
    grid-template-columns:minmax(0,1fr) 300px;
    gap:23px;
    align-items:start;
}

.panel,
.side,
.content{
    min-width:0;
    background:#fff;
    border:1px solid var(--xs-line);
    border-radius:22px;
    padding:25px;
    box-shadow:0 9px 26px rgba(20,43,84,.06);
}

.side{
    position:sticky;
    top:98px;
    height:max-content;
}

.side h3{
    margin:16px 0 7px;
    color:var(--xs-red);
}

.side h3:first-child{
    margin-top:0;
}

.side p{
    margin:0 0 10px;
    color:var(--xs-muted);
    font-size:13.5px;
    line-height:1.72;
}

.side a{
    color:var(--xs-blue);
    font-weight:800;
}

label{
    display:block;
    margin:14px 0 7px;
    color:#293b5a;
    font-weight:800;
}

input,
textarea,
select{
    width:100%;
    min-height:46px;
    padding:12px 14px;
    border:1px solid #d8e0eb;
    border-radius:12px;
    outline:none;
    background:#fff;
    color:#111;
}

textarea{
    min-height:150px;
    resize:vertical;
}

input:focus,
textarea:focus,
select:focus{
    border-color:var(--xs-blue);
    box-shadow:0 0 0 4px rgba(17,76,157,.1);
}

.formgrid{
    display:grid;
    grid-template-columns:repeat(2,minmax(0,1fr));
    gap:14px;
}

.actions{
    display:flex;
    gap:10px;
    flex-wrap:wrap;
    margin-top:17px;
}

.btn{
    display:inline-flex;
    align-items:center;
    justify-content:center;
    gap:8px;
    padding:12px 17px;
    border:0;
    border-radius:13px;
    background:linear-gradient(135deg,var(--xs-red),var(--xs-red-dark));
    color:#fff;
    font-weight:850;
    transition:.22s ease;
}

.btn:hover{
    transform:translateY(-2px);
    box-shadow:0 10px 22px rgba(226,31,38,.22);
}

.btn2{
    background:#fff;
    color:var(--xs-blue);
    border:1px solid var(--xs-line);
}

.output{
    min-height:62px;
    margin-top:17px;
    padding:16px;
    overflow-wrap:anywhere;
    white-space:pre-wrap;
    border:1px dashed #c7d2e2;
    border-radius:14px;
    background:#f8fafc;
    color:#20324e;
}

.metrics{
    display:grid;
    grid-template-columns:repeat(4,minmax(0,1fr));
    gap:10px;
    margin-top:16px;
}

.metric{
    padding:14px 9px;
    text-align:center;
    border:1px solid var(--xs-line);
    border-radius:13px;
    background:#f8fafc;
}

.metric strong{
    display:block;
    margin-bottom:4px;
    color:var(--xs-red);
    font-size:22px;
}

.drop{
    padding:28px 18px;
    text-align:center;
    border:2px dashed #c7d2e2;
    border-radius:17px;
    background:#fafcff;
}

.preview{
    margin-top:17px;
    text-align:center;
}

.preview canvas,
.preview img{
    max-width:100%;
    height:auto;
    border-radius:13px;
}

.content{
    margin:24px auto;
}

.content h2{
    color:var(--xs-blue);
}

.content p,
.content li{
    color:var(--xs-muted);
    line-height:1.8;
}

/* =========================================================
   SEO ENGINE
   ========================================================= */

.seo-breadcrumb{
    width:min(1180px,92%);
    margin:14px auto 0;
    display:flex;
    align-items:center;
    gap:9px;
    flex-wrap:wrap;
    color:#64738b;
    font-size:12.5px;
}

.seo-breadcrumb a{
    color:var(--xs-blue);
    font-weight:750;
}

.seo-breadcrumb i{
    color:#aab4c4;
    font-size:9px;
}

.seo-breadcrumb span{
    color:#273a59;
}

.seo-tool-content{
    padding:10px 0 62px;
    background:var(--xs-bg);
}

.seo-content-container{
    width:min(1070px,92%);
    margin:auto;
}

.seo-ai-summary{
    margin-bottom:22px;
    padding:22px 24px;
    border-radius:20px;
    background:linear-gradient(135deg,#0b2d63,var(--xs-blue));
    box-shadow:0 15px 35px rgba(15,55,112,.16);
    color:#fff;
}

.seo-ai-summary span{
    display:inline-flex;
    align-items:center;
    gap:8px;
    color:var(--xs-yellow);
    font-size:12px;
    font-weight:900;
    letter-spacing:.07em;
    text-transform:uppercase;
}

.seo-ai-summary p{
    margin:9px 0 0;
    color:#eff5ff;
    line-height:1.75;
}

.seo-content-grid{
    display:grid;
    grid-template-columns:repeat(2,minmax(0,1fr));
    gap:18px;
}

.seo-content-grid article,
.seo-faq,
.seo-related{
    padding:22px;
    border:1px solid var(--xs-line);
    border-radius:19px;
    background:#fff;
    box-shadow:0 7px 20px rgba(20,43,84,.045);
}

.seo-content-grid h2,
.seo-faq h2,
.seo-related h2{
    margin:0 0 11px;
    color:#102d5a;
    font-size:21px;
}

.seo-content-grid p,
.seo-content-grid li,
.seo-faq p{
    color:var(--xs-muted);
    font-size:14px;
    line-height:1.75;
}

.seo-content-grid ul,
.seo-content-grid ol{
    margin:0;
    padding-left:21px;
}

.seo-faq,
.seo-related{
    margin-top:19px;
}

.seo-faq details{
    padding:13px 0;
    border-top:1px solid #e7ebf2;
}

.seo-faq details:first-of-type{
    border-top:0;
}

.seo-faq summary{
    cursor:pointer;
    color:#173661;
    font-weight:800;
}

.seo-faq details[open] summary{
    color:var(--xs-red);
}

.seo-faq p{
    margin:9px 0 0;
}

.seo-related-grid{
    display:grid;
    grid-template-columns:repeat(2,minmax(0,1fr));
    gap:12px;
}

.seo-related-grid a{
    min-width:0;
    display:flex;
    align-items:center;
    gap:12px;
    padding:14px;
    border:1px solid var(--xs-line);
    border-radius:14px;
    color:#173661;
    transition:.22s ease;
}

.seo-related-grid a:hover{
    transform:translateY(-2px);
    border-color:#bfcde1;
    box-shadow:0 9px 22px rgba(20,43,84,.08);
}

.seo-related-grid > a > i:first-child{
    width:40px;
    height:40px;
    flex:0 0 40px;
    display:grid;
    place-items:center;
    border-radius:11px;
    background:#edf4ff;
    color:var(--xs-blue);
}

.seo-related-grid span{
    min-width:0;
    flex:1;
}

.seo-related-grid strong{
    display:block;
    font-size:14px;
}

.seo-related-grid small{
    display:block;
    margin-top:3px;
    overflow:hidden;
    color:#758197;
    font-size:11.5px;
    line-height:1.45;
}

.seo-related-grid > a > i:last-child{
    color:var(--xs-red);
}

/* =========================================================
   FOOTER
   ========================================================= */

.xs-footer{
    margin-top:45px;
    padding-top:54px;
    background:
        radial-gradient(circle at 12% 0%,rgba(255,196,0,.11),transparent 22%),
        linear-gradient(135deg,#06152f,#020a18);
    color:#cbd7e8;
}

.xs-footer-grid{
    display:grid;
    grid-template-columns:1.6fr .8fr 1fr 1.2fr;
    gap:36px;
    padding-bottom:40px;
}

.xs-footer-logo{
    width:82px;
    height:76px;
    object-fit:contain;
    margin-bottom:14px;
    padding:5px;
    border-radius:15px;
    background:#fff;
}

.xs-footer-about h2,
.xs-footer h3{
    margin:0 0 13px;
    color:#fff;
}

.xs-footer-about p{
    max-width:420px;
    color:#cbd7e8;
    font-size:14px;
    line-height:1.75;
}

.xs-brand-signature{
    display:inline-flex;
    align-items:center;
    gap:8px;
    margin-top:17px;
    padding:9px 12px;
    border:1px solid rgba(255,255,255,.11);
    border-radius:999px;
    background:rgba(255,255,255,.07);
    color:#fff;
    font-size:12px;
    font-weight:700;
}

.xs-brand-signature i{
    color:var(--xs-yellow);
}

.xs-footer-links,
.xs-contact-list{
    margin:0;
    padding:0;
    list-style:none;
}

.xs-footer-links li{
    margin:9px 0;
}

.xs-footer a{
    color:#cbd7e8;
    transition:.2s ease;
}

.xs-footer a:hover{
    color:var(--xs-yellow);
}

.xs-contact-list li{
    display:flex;
    align-items:flex-start;
    gap:10px;
    margin:11px 0;
    color:#cbd7e8;
    font-size:13.5px;
    line-height:1.5;
}

.xs-contact-list i{
    width:17px;
    margin-top:2px;
    color:var(--xs-yellow);
}

.xs-socials{
    display:flex;
    gap:9px;
    margin-top:16px;
}

.xs-socials a{
    width:39px;
    height:39px;
    padding:0!important;
    display:grid;
    place-items:center;
    border:1px solid rgba(255,255,255,.13);
    border-radius:11px;
    background:rgba(255,255,255,.07);
    color:#fff;
}

.xs-socials a:hover{
    transform:translateY(-3px);
    background:var(--xs-yellow);
    color:#111;
}

.xs-footer-bottom{
    border-top:1px solid rgba(255,255,255,.11);
}

.xs-footer-bottom-inner{
    min-height:61px;
    display:flex;
    align-items:center;
    justify-content:space-between;
    gap:14px;
    color:#aebbd0;
    font-size:12.5px;
}

.xs-footer-bottom-inner p{
    margin:0;
}

.xs-back-to-top{
    position:fixed;
    right:20px;
    bottom:20px;
    z-index:2500;
    width:44px;
    height:44px;
    border:0;
    border-radius:13px;
    background:linear-gradient(135deg,var(--xs-yellow),#ff9d00);
    box-shadow:0 12px 28px rgba(0,0,0,.2);
    color:#151515;
    opacity:0;
    visibility:hidden;
    transform:translateY(10px);
    transition:.22s ease;
}

.xs-back-to-top.show{
    opacity:1;
    visibility:visible;
    transform:translateY(0);
}

/* =========================================================
   RESPONSIVE
   ========================================================= */

@media(max-width:1020px){
    .toolwrap{
        grid-template-columns:1fr;
    }

    .side{
        position:static;
    }

    .xs-footer-grid{
        grid-template-columns:repeat(2,minmax(0,1fr));
    }
}

@media(max-width:780px){
    .xs-topbar-inner{
        justify-content:center;
        padding:8px 0;
    }

    .xs-topbar-group{
        justify-content:center;
        gap:10px 16px;
    }

    .xs-header-inner{
        min-height:72px;
    }

    .xs-brand{
        min-width:0;
    }

    .xs-brand img{
        width:54px;
        height:50px;
        max-width:54px;
        max-height:50px;
    }

    .xs-brand-copy strong{
        font-size:18px;
    }

    .xs-menu-button{
        display:flex;
    }

    .xs-nav{
        display:none;
        position:absolute;
        top:72px;
        right:4%;
        width:min(300px,92%);
        padding:12px;
        flex-direction:column;
        align-items:stretch;
        gap:2px;
        border:1px solid var(--xs-line);
        border-radius:16px;
        background:#fff;
        box-shadow:var(--xs-shadow);
    }

    .xs-nav.open{
        display:flex;
    }

    .xs-nav a{
        padding:13px 14px;
    }

    .xs-nav .xs-contact-link{
        margin:4px 0 0;
    }

    .formgrid,
    .metrics{
        grid-template-columns:repeat(2,minmax(0,1fr));
    }
}

@media(max-width:700px){
    .seo-content-grid,
    .seo-related-grid{
        grid-template-columns:1fr;
    }

    .seo-ai-summary,
    .seo-content-grid article,
    .seo-faq,
    .seo-related{
        padding:18px;
    }
}

@media(max-width:540px){
    .xs-brand-copy span{
        display:none;
    }

    .xs-topbar-group:last-child{
        display:none;
    }

    .xs-footer-grid,
    .formgrid,
    .metrics{
        grid-template-columns:1fr;
    }

    .xs-footer-bottom-inner{
        flex-direction:column;
        justify-content:center;
        padding:14px 0;
        text-align:center;
    }

    .panel,
    .side{
        padding:18px;
    }

    .pagehero{
        padding:40px 5% 36px;
    }
}