/* =========================================================
   Qeel Clean Home
   独立首页样式
   ========================================================= */

:root{
    color-scheme:light;

    --home-bg:#f4f7fc;
    --home-surface:#ffffff;
    --home-surface-soft:#f8faff;

    --home-text:#0b1b37;
    --home-muted:#71829d;

    --home-border:#dce6f3;

    --home-primary:#176cff;
    --home-primary-hover:#0f5dea;

    --home-header-bg:rgba(255,255,255,.94);

    --home-shadow:
        0 14px 38px rgba(31,72,128,.08);

    --home-radius:24px;

    --header-height:72px;

    --page-width:1180px;
}


html[data-theme="dark"]{
    color-scheme:dark;

    --home-bg:#071424;
    --home-surface:#0f1f33;
    --home-surface-soft:#132640;

    --home-text:#f4f8ff;
    --home-muted:#9fb0c8;

    --home-border:#263c59;

    --home-primary:#5a9aff;
    --home-primary-hover:#72a9ff;

    --home-header-bg:rgba(7,20,36,.95);

    --home-shadow:
        0 18px 46px rgba(0,0,0,.28);
}


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


html{
    margin:0;
    padding:0;
    scroll-behavior:smooth;
    background:var(--home-bg);
}


body{
    margin:0;
    padding:0;

    min-width:0;

    background:var(--home-bg);
    color:var(--home-text);

    font-family:
        -apple-system,
        BlinkMacSystemFont,
        "Segoe UI",
        "PingFang SC",
        "Microsoft YaHei",
        sans-serif;

    -webkit-font-smoothing:antialiased;
}


a{
    color:inherit;
}


button,
input{
    font:inherit;
}


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

.home-header{
    position:sticky;
    top:0;
    z-index:100;

    width:100%;
    height:var(--header-height);

    background:var(--home-header-bg);
    border-bottom:1px solid var(--home-border);

    backdrop-filter:blur(18px);
    -webkit-backdrop-filter:blur(18px);
}


.home-header-inner{
    width:min(
        calc(100% - 40px),
        var(--page-width)
    );

    height:100%;

    margin:0 auto;

    display:grid;

    grid-template-columns:
        180px
        minmax(0,1fr)
        200px;

    align-items:center;

    gap:24px;
}


.home-brand{
    min-width:0;

    display:flex;
    align-items:center;

    gap:10px;

    text-decoration:none;
}


.home-brand-mark{
    width:38px;
    height:38px;

    flex:0 0 38px;

    display:grid;
    place-items:center;

    border-radius:11px;

    color:#fff;

    font-size:23px;
    font-weight:800;

    background:
        linear-gradient(
            145deg,
            #31a2ff,
            #176cff 58%,
            #6654f7
        );

    box-shadow:
        0 7px 18px rgba(23,108,255,.22);
}


.home-brand-text{
    overflow:hidden;

    color:var(--home-text);

    font-size:18px;
    font-weight:800;

    white-space:nowrap;
    text-overflow:ellipsis;
}


.home-nav{
    min-width:0;

    display:flex;
    align-items:center;
    justify-content:center;

    gap:28px;
}


.home-nav a{
    position:relative;

    padding:25px 0 23px;

    color:var(--home-text);

    font-size:15px;
    font-weight:700;

    line-height:1;

    text-decoration:none;

    white-space:nowrap;
}


.home-nav a:hover{
    color:var(--home-primary);
}


.home-nav a[aria-current="page"]{
    color:var(--home-primary);
}


.home-actions{
    min-width:0;

    display:grid;

    grid-template-columns:
        40px
        150px;

    justify-content:end;
    align-items:center;

    gap:10px;
}


.home-theme-toggle{
    width:40px;
    height:40px;

    display:grid;
    place-items:center;

    margin:0;
    padding:0;

    border:1px solid transparent;
    border-radius:12px;

    background:transparent;
    color:var(--home-text);

    cursor:pointer;

    transition:
        background-color .15s ease,
        border-color .15s ease;
}


.home-theme-toggle:hover{
    background:var(--home-surface-soft);
    border-color:var(--home-border);
}


.home-account-slot{
    width:150px;
    min-width:150px;
    max-width:150px;

    height:42px;
}


.home-account{
    width:100%;
    height:100%;

    display:flex;
    align-items:center;
    justify-content:center;

    gap:8px;

    padding:0 14px;

    overflow:hidden;

    border:1px solid var(--home-border);
    border-radius:13px;

    background:var(--home-surface);

    color:var(--home-text);

    box-shadow:
        0 4px 14px rgba(31,72,128,.05);

    text-decoration:none;
}


.home-account:hover{
    border-color:
        color-mix(
            in srgb,
            var(--home-primary) 40%,
            var(--home-border)
        );
}


.account-avatar{
    width:24px;
    height:24px;

    flex:0 0 24px;

    display:none;
    place-items:center;

    overflow:hidden;

    border-radius:50%;

    background:
        linear-gradient(
            145deg,
            #29a3ff,
            #6654f7
        );

    color:#fff;

    font-size:12px;
    font-weight:800;
}


.account-label{
    min-width:0;

    overflow:hidden;

    font-size:14px;
    font-weight:700;

    text-overflow:ellipsis;
    white-space:nowrap;
}


/* =========================================================
   STAGING MAIN
   Task 3 开始重建正式内容
   ========================================================= */

.home-main{
    width:min(
        calc(100% - 40px),
        var(--page-width)
    );

    margin:0 auto;
    padding:40px 0 50px;
}


.home-rebuild-placeholder{
    min-height:420px;

    display:flex;
    align-items:center;
    justify-content:center;

    padding:60px 30px;

    border:1px solid var(--home-border);
    border-radius:var(--home-radius);

    background:var(--home-surface);

    box-shadow:var(--home-shadow);

    text-align:center;
}


.home-rebuild-placeholder-inner{
    max-width:680px;
}


.home-rebuild-eyebrow{
    display:block;

    margin-bottom:12px;

    color:var(--home-primary);

    font-size:12px;
    font-weight:800;

    letter-spacing:.16em;
}


.home-rebuild-placeholder h1{
    margin:
        0
        0
        16px;

    font-size:
        clamp(
            34px,
            5vw,
            58px
        );

    line-height:1.08;
}


.home-rebuild-placeholder p{
    margin:0;

    color:var(--home-muted);

    font-size:16px;
    line-height:1.8;
}


#allTools{
    scroll-margin-top:
        calc(
            var(--header-height) + 20px
        );
}


/* =========================================================
   FOOTER SHELL
   Task 6 会完成最终视觉
   ========================================================= */

.home-footer{
    width:min(
        calc(100% - 40px),
        var(--page-width)
    );

    margin:0 auto;

    padding:
        24px
        0
        38px;

    border-top:1px solid var(--home-border);

    color:var(--home-muted);

    text-align:center;
}


.home-footer-row{
    display:flex;
    align-items:center;
    justify-content:center;
    flex-wrap:wrap;

    gap:
        6px
        14px;

    font-size:13px;
    line-height:1.8;
}


.home-footer-row strong{
    color:var(--home-text);
}


.home-footer a{
    color:inherit;
    text-decoration:none;
}


.home-footer a:hover{
    color:var(--home-primary);
}


/* =========================================================
   TABLET
   ========================================================= */

@media (max-width:1023px){

    .home-header-inner{
        grid-template-columns:
            minmax(130px,1fr)
            auto;
    }

    .home-nav{
        display:none;
    }

    .home-actions{
        grid-column:2;
    }
}


/* =========================================================
   MOBILE
   ========================================================= */

@media (max-width:767px){

    :root{
        --header-height:64px;
    }


    .home-header-inner{
        width:calc(100% - 24px);

        grid-template-columns:
            minmax(0,1fr)
            auto;

        gap:10px;
    }


    .home-brand-mark{
        width:34px;
        height:34px;

        flex-basis:34px;

        border-radius:10px;

        font-size:20px;
    }


    .home-brand-text{
        font-size:17px;
    }


    .home-actions{
        grid-template-columns:
            36px
            112px;

        gap:6px;
    }


    .home-theme-toggle{
        width:36px;
        height:36px;
    }


    .home-account-slot{
        width:112px;
        min-width:112px;
        max-width:112px;

        height:38px;
    }


    .home-account{
        padding:0 10px;
    }


    .account-label{
        font-size:13px;
    }


    .home-main{
        width:calc(100% - 24px);

        padding-top:24px;
    }


    .home-rebuild-placeholder{
        min-height:360px;

        padding:40px 20px;
    }


    .home-footer{
        width:calc(100% - 24px);
    }
}


/* =========================================================
   REDUCED MOTION
   ========================================================= */

@media (
    prefers-reduced-motion:reduce
){

    html{
        scroll-behavior:auto;
    }

    *,
    *::before,
    *::after{
        scroll-behavior:auto !important;
        transition:none !important;
        animation:none !important;
    }
}

/* QEEL HOME TASK3 START */

/* =========================================================
   HERO
   ========================================================= */

.home-hero{
    position:relative;

    min-height:520px;

    display:grid;
    grid-template-columns:
        minmax(0,1.08fr)
        minmax(360px,.92fr);

    gap:54px;

    padding:
        52px
        52px
        42px;

    overflow:hidden;

    border:1px solid var(--home-border);
    border-radius:30px;

    background:
        radial-gradient(
            circle at 78% 28%,
            rgba(81,154,255,.23),
            transparent 34%
        ),
        linear-gradient(
            135deg,
            var(--home-surface)
            0%,
            var(--home-surface-soft)
            58%,
            color-mix(
                in srgb,
                var(--home-primary) 8%,
                var(--home-surface)
            )
            100%
        );

    box-shadow:var(--home-shadow);
}


.home-hero-copy{
    position:relative;
    z-index:2;

    min-width:0;

    align-self:center;
}


.home-hero-eyebrow{
    display:block;

    margin-bottom:13px;

    color:var(--home-primary);

    font-size:12px;
    font-weight:850;

    letter-spacing:.17em;
}


.home-hero h1{
    margin:0;

    color:var(--home-text);

    font-size:
        clamp(
            46px,
            5.2vw,
            68px
        );

    line-height:1.05;

    letter-spacing:-.045em;
}


.home-hero-qeel{
    color:var(--home-primary);
}


.home-hero h2{
    margin:
        13px
        0
        0;

    color:var(--home-text);

    font-size:
        clamp(
            23px,
            2.3vw,
            31px
        );

    line-height:1.28;

    letter-spacing:-.025em;
}


.home-hero-description{
    max-width:620px;

    margin:
        18px
        0
        0;

    color:var(--home-muted);

    font-size:16px;
    line-height:1.82;
}


.home-hero-actions{
    display:flex;
    align-items:center;
    flex-wrap:wrap;

    gap:12px;

    margin-top:24px;
}


.home-button{
    min-height:48px;

    display:inline-flex;
    align-items:center;
    justify-content:center;

    gap:10px;

    padding:
        0
        24px;

    border-radius:14px;

    font-size:15px;
    font-weight:800;

    text-decoration:none;

    transition:
        transform .15s ease,
        box-shadow .15s ease,
        border-color .15s ease,
        background-color .15s ease;
}


.home-button:hover{
    transform:translateY(-1px);
}


.home-button-primary{
    color:#fff;

    background:
        linear-gradient(
            135deg,
            #3f91ff,
            #176cff
        );

    box-shadow:
        0 10px 22px rgba(23,108,255,.22);
}


.home-button-secondary{
    border:1px solid var(--home-border);

    background:var(--home-surface);

    color:var(--home-primary);
}


/* =========================================================
   QUICK SEARCH
   ========================================================= */

.home-quick{
    margin-top:23px;

    scroll-margin-top:
        calc(
            var(--header-height) + 20px
        );
}


.home-quick-form{
    width:min(100%,620px);

    height:58px;

    display:grid;
    grid-template-columns:
        30px
        minmax(0,1fr)
        48px;

    align-items:center;

    gap:8px;

    padding:
        5px
        6px
        5px
        15px;

    border:1px solid var(--home-border);
    border-radius:999px;

    background:var(--home-surface);

    box-shadow:
        0 12px 30px rgba(35,78,138,.10);
}


.home-quick-icon{
    display:grid;
    place-items:center;

    color:var(--home-text);

    font-size:24px;
    font-weight:800;
}


.home-quick-form input{
    min-width:0;
    width:100%;

    border:0;
    outline:0;

    background:transparent;
    color:var(--home-text);

    font-size:15px;
}


.home-quick-form input::placeholder{
    color:var(--home-muted);
}


.home-quick-form button{
    width:48px;
    height:48px;

    display:grid;
    place-items:center;

    margin:0;
    padding:0;

    border:0;
    border-radius:50%;

    background:var(--home-primary);
    color:#fff;

    font-size:25px;
    font-weight:800;

    cursor:pointer;

    box-shadow:
        0 8px 18px rgba(23,108,255,.25);
}


.home-quick-examples{
    width:min(100%,620px);

    display:flex;
    align-items:center;
    flex-wrap:wrap;

    gap:
        6px
        15px;

    margin-top:10px;
    padding-left:12px;

    color:var(--home-muted);

    font-size:13px;
}


.home-quick-examples button{
    margin:0;
    padding:0;

    border:0;

    background:transparent;
    color:
        color-mix(
            in srgb,
            var(--home-primary) 62%,
            var(--home-muted)
        );

    cursor:pointer;

    font-size:13px;
}


.home-quick-examples button:hover{
    color:var(--home-primary);
}


/* =========================================================
   HERO VISUAL
   ========================================================= */

.home-hero-visual{
    position:relative;

    min-height:390px;

    align-self:center;
}


.home-network-art{
    position:absolute;

    inset:
        10px
        0
        88px
        0;

    min-height:300px;
}


.network-back-card,
.network-main-card{
    position:absolute;

    left:50%;
    top:50%;

    width:210px;
    height:190px;

    border-radius:24px;
}


.network-back-card{
    border:2px solid
        color-mix(
            in srgb,
            var(--home-primary) 45%,
            var(--home-border)
        );

    background:
        color-mix(
            in srgb,
            var(--home-primary) 5%,
            transparent
        );
}


.network-back-card-one{
    transform:
        translate(-60%,-54%)
        rotate(-7deg);
}


.network-back-card-two{
    transform:
        translate(-50%,-50%)
        rotate(4deg);
}


.network-main-card{
    z-index:3;

    display:flex;
    flex-direction:column;

    padding:25px;

    transform:
        translate(-40%,-42%);

    color:#fff;

    background:
        linear-gradient(
            145deg,
            #1d70ff,
            #375af5
        );

    box-shadow:
        0 28px 50px rgba(23,108,255,.28);
}


.network-main-card strong{
    font-size:31px;
    line-height:1;
}


.network-main-card > span{
    margin-top:7px;

    font-size:13px;

    opacity:.88;
}


.network-bars{
    display:flex;
    align-items:flex-end;

    gap:7px;

    height:70px;

    margin-top:auto;
}


.network-bars i{
    display:block;

    width:12px;

    border-radius:5px;

    background:#72ddff;
}


.network-bars i:nth-child(1){
    height:25px;
}

.network-bars i:nth-child(2){
    height:43px;
}

.network-bars i:nth-child(3){
    height:60px;
}

.network-bars i:nth-child(4){
    height:35px;
}


.network-globe{
    position:absolute;
    z-index:5;

    left:55%;
    top:51%;

    width:150px;
    height:150px;

    transform:
        translate(-20%,-43%);

    overflow:hidden;

    border:
        2px
        solid
        rgba(255,255,255,.68);

    border-radius:50%;

    background:
        radial-gradient(
            circle at 35% 25%,
            #72ebff,
            #209bff 45%,
            #1168ec 100%
        );

    box-shadow:
        0 16px 35px rgba(0,116,255,.30);
}


.globe-line{
    position:absolute;

    border:
        1px
        solid
        rgba(255,255,255,.72);

    border-radius:50%;
}


.globe-line-a{
    inset:
        16px
        48px;
}


.globe-line-b{
    inset:
        48px
        16px;
}


.globe-line-c{
    inset:
        15px;

    transform:rotate(43deg);
}


.globe-dot{
    position:absolute;

    width:6px;
    height:6px;

    border-radius:50%;

    background:#fff;

    box-shadow:
        0 0 8px rgba(255,255,255,.85);
}


.dot-a{
    left:32px;
    top:67px;
}

.dot-b{
    right:35px;
    top:48px;
}

.dot-c{
    left:76px;
    bottom:27px;
}


.network-orbit{
    position:absolute;
    z-index:6;

    left:53%;
    top:50%;

    width:250px;
    height:82px;

    border:
        4px
        solid
        #634cff;

    border-radius:50%;

    transform:
        translate(-12%,-25%)
        rotate(-13deg);

    clip-path:
        polygon(
            0 0,
            100% 0,
            100% 47%,
            0 75%
        );
}


.network-small-card{
    position:absolute;
    z-index:4;

    width:58px;
    height:58px;

    display:grid;
    place-items:center;

    border-radius:13px;

    background:
        linear-gradient(
            145deg,
            #3d96ff,
            #2c65ec
        );

    color:#9fe7ff;

    font-size:30px;
    font-weight:800;

    box-shadow:
        0 12px 25px rgba(23,108,255,.20);
}


.small-card-a{
    left:16%;
    top:37%;
}


.small-card-b{
    left:23%;
    top:58%;
}


.network-slogan{
    position:absolute;

    right:0;
    top:26%;

    color:
        color-mix(
            in srgb,
            var(--home-primary) 68%,
            var(--home-text)
        );

    font-size:16px;
    font-weight:850;

    line-height:1.6;

    transform:rotate(-7deg);
}


.home-data-note{
    position:absolute;

    right:0;
    bottom:0;

    width:min(100%,470px);

    display:grid;
    grid-template-columns:
        auto
        minmax(0,1fr);

    gap:10px;

    padding:
        13px
        15px;

    border:1px solid var(--home-border);
    border-radius:13px;

    background:
        color-mix(
            in srgb,
            var(--home-surface) 88%,
            transparent
        );

    color:var(--home-muted);

    font-size:12px;
    line-height:1.55;
}


.home-data-note strong{
    color:var(--home-text);

    white-space:nowrap;
}


/* =========================================================
   METRICS
   ========================================================= */

.home-metrics{
    display:grid;

    grid-template-columns:
        repeat(
            5,
            minmax(0,1fr)
        );

    gap:12px;

    margin-top:14px;
}


.home-metric-card{
    min-width:0;
    min-height:96px;

    display:flex;
    align-items:center;

    gap:13px;

    padding:
        16px
        17px;

    border:1px solid var(--home-border);
    border-radius:18px;

    background:var(--home-surface);

    box-shadow:
        0 8px 22px rgba(31,72,128,.05);
}


.metric-icon{
    width:42px;
    height:42px;

    flex:0 0 42px;

    display:grid;
    place-items:center;

    border-radius:50%;

    font-size:19px;
    font-weight:850;
}


.metric-green{
    background:#e6faf1;
    color:#0aa56c;
}


.metric-blue{
    background:#edf3ff;
    color:#4e77ff;
}


.metric-purple{
    background:#f1edff;
    color:#7455eb;
}


.metric-violet{
    background:#f1ebff;
    color:#694af4;
}


html[data-theme="dark"] .metric-green{
    background:rgba(10,165,108,.16);
}

html[data-theme="dark"] .metric-blue{
    background:rgba(78,119,255,.16);
}

html[data-theme="dark"] .metric-purple,
html[data-theme="dark"] .metric-violet{
    background:rgba(116,85,235,.16);
}


.metric-copy{
    min-width:0;

    display:flex;
    flex-direction:column;
}


.metric-label{
    overflow:hidden;

    color:var(--home-muted);

    font-size:12px;

    white-space:nowrap;
    text-overflow:ellipsis;
}


.metric-copy strong{
    margin-top:3px;

    overflow:hidden;

    color:var(--home-text);

    font-size:19px;
    line-height:1.25;

    white-space:nowrap;
    text-overflow:ellipsis;
}


.metric-copy small{
    margin-top:4px;

    color:var(--home-muted);

    font-size:11px;
}


/* =========================================================
   ACCESSIBILITY
   ========================================================= */

.sr-only{
    position:absolute;

    width:1px;
    height:1px;

    padding:0;
    margin:-1px;

    overflow:hidden;

    clip:rect(0,0,0,0);
    white-space:nowrap;

    border:0;
}


/* =========================================================
   TABLET
   ========================================================= */

@media (max-width:1023px){

    .home-hero{
        grid-template-columns:
            minmax(0,1fr)
            minmax(300px,.78fr);

        gap:24px;

        padding:
            40px
            34px
            34px;
    }


    .home-hero h1{
        font-size:
            clamp(
                42px,
                6vw,
                56px
            );
    }


    .home-hero-visual{
        min-height:340px;
    }


    .network-main-card{
        width:170px;
        height:165px;
    }


    .network-globe{
        width:125px;
        height:125px;
    }


    .network-orbit{
        width:205px;
    }


    .network-slogan{
        display:none;
    }


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


/* =========================================================
   MOBILE
   ========================================================= */

@media (max-width:767px){

    .home-hero{
        min-height:0;

        display:block;

        padding:
            30px
            20px
            24px;

        border-radius:24px;
    }


    .home-hero h1{
        font-size:
            clamp(
                42px,
                13vw,
                58px
            );
    }


    .home-hero h2{
        font-size:
            clamp(
                23px,
                7vw,
                30px
            );
    }


    .home-hero-description{
        font-size:15px;
        line-height:1.75;
    }


    .home-hero-actions{
        display:grid;

        grid-template-columns:
            1fr
            1fr;

        gap:9px;
    }


    .home-button{
        min-width:0;

        padding:
            0
            14px;

        font-size:14px;
    }


    .home-quick-form{
        grid-template-columns:
            28px
            minmax(0,1fr)
            44px;

        height:55px;

        padding-left:12px;
    }


    .home-quick-form button{
        width:44px;
        height:44px;
    }


    .home-quick-examples{
        gap:
            5px
            12px;

        padding-left:3px;
    }


    .home-hero-visual{
        display:none;
    }


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

        gap:10px;
    }


    .home-metric-card{
        min-height:92px;

        gap:10px;

        padding:
            14px
            13px;
    }


    .metric-icon{
        width:38px;
        height:38px;

        flex-basis:38px;
    }


    .metric-copy strong{
        font-size:17px;
    }


    .home-metric-card:last-child{
        grid-column:
            1 / -1;
    }
}


@media (max-width:420px){

    .home-hero-actions{
        grid-template-columns:1fr;
    }


    .home-metrics{
        grid-template-columns:1fr;
    }


    .home-metric-card:last-child{
        grid-column:auto;
    }
}

/* QEEL HOME TASK3 END */

/* QEEL HOME TASK4 START */

/* =========================================================
   COMMON SECTION
   ========================================================= */

.home-tools-section,
.home-workspaces,
.home-services{
    margin-top:46px;
}


.home-section-heading{
    display:flex;
    align-items:flex-end;
    justify-content:space-between;

    gap:24px;

    margin-bottom:22px;
}


.home-section-heading > div{
    min-width:0;
}


.home-section-eyebrow{
    display:block;

    margin-bottom:7px;

    color:var(--home-primary);

    font-size:11px;
    font-weight:850;

    letter-spacing:.18em;
}


.home-section-heading h2{
    margin:0;

    color:var(--home-text);

    font-size:
        clamp(
            27px,
            3vw,
            38px
        );

    line-height:1.16;

    letter-spacing:-.025em;
}


.home-section-heading p{
    max-width:650px;

    margin:
        8px
        0
        0;

    color:var(--home-muted);

    font-size:14px;
    line-height:1.75;
}


.home-section-count{
    flex:0 0 auto;

    padding:
        8px
        12px;

    border:1px solid var(--home-border);
    border-radius:999px;

    background:var(--home-surface);

    color:var(--home-muted);

    font-size:12px;
    font-weight:700;
}


/* =========================================================
   TOOL GROUPS
   ========================================================= */

.home-tool-group{
    margin-top:17px;

    padding:
        22px
        22px
        24px;

    border:1px solid var(--home-border);
    border-radius:24px;

    background:
        color-mix(
            in srgb,
            var(--home-surface) 92%,
            var(--home-primary) 8%
        );

    box-shadow:
        0 9px 26px rgba(31,72,128,.04);
}


.home-tool-group + .home-tool-group{
    margin-top:14px;
}


.home-tool-group-head{
    display:flex;
    align-items:center;
    justify-content:space-between;

    gap:16px;

    margin-bottom:15px;
}


.home-tool-group-head h3{
    margin:0;

    color:var(--home-text);

    font-size:19px;
}


.home-tool-group-head span{
    color:var(--home-muted);

    font-size:12px;
}


.home-tool-grid{
    display:grid;

    grid-template-columns:
        repeat(
            3,
            minmax(0,1fr)
        );

    gap:11px;
}


.home-tool-card{
    min-width:0;
    min-height:96px;

    display:grid;

    grid-template-columns:
        42px
        minmax(0,1fr)
        22px;

    align-items:center;

    gap:12px;

    padding:
        15px
        15px;

    border:1px solid var(--home-border);
    border-radius:17px;

    background:var(--home-surface);

    color:var(--home-text);

    text-decoration:none;

    transition:
        transform .15s ease,
        border-color .15s ease,
        box-shadow .15s ease,
        background-color .15s ease;
}


.home-tool-card:hover{
    transform:translateY(-2px);

    border-color:
        color-mix(
            in srgb,
            var(--home-primary) 40%,
            var(--home-border)
        );

    box-shadow:
        0 10px 22px rgba(31,72,128,.08);
}


.home-tool-icon{
    width:42px;
    height:42px;

    display:grid;
    place-items:center;

    border-radius:13px;

    background:
        color-mix(
            in srgb,
            var(--home-primary) 12%,
            var(--home-surface)
        );

    color:var(--home-primary);

    font-size:15px;
    font-weight:900;
}


.home-tool-copy{
    min-width:0;

    display:flex;
    flex-direction:column;
}


.home-tool-copy strong{
    overflow:hidden;

    color:var(--home-text);

    font-size:14px;
    font-weight:800;

    white-space:nowrap;
    text-overflow:ellipsis;
}


.home-tool-copy > span{
    display:-webkit-box;

    margin-top:5px;

    overflow:hidden;

    color:var(--home-muted);

    font-size:12px;
    line-height:1.5;

    -webkit-box-orient:vertical;
    -webkit-line-clamp:2;
}


.home-tool-arrow{
    color:var(--home-muted);

    font-size:18px;

    transition:
        transform .15s ease,
        color .15s ease;
}


.home-tool-card:hover .home-tool-arrow{
    transform:translateX(2px);

    color:var(--home-primary);
}


/* =========================================================
   WORKSPACES
   ========================================================= */

.home-workspace-grid{
    display:grid;

    grid-template-columns:
        repeat(
            2,
            minmax(0,1fr)
        );

    gap:14px;
}


.home-workspace-card{
    position:relative;

    min-height:220px;

    display:flex;
    flex-direction:column;

    padding:
        27px
        28px;

    overflow:hidden;

    border:1px solid var(--home-border);
    border-radius:24px;

    background:
        linear-gradient(
            135deg,
            var(--home-surface),
            var(--home-surface-soft)
        );

    color:var(--home-text);

    text-decoration:none;

    box-shadow:
        0 12px 28px rgba(31,72,128,.05);

    transition:
        transform .15s ease,
        border-color .15s ease;
}


.home-workspace-card:hover{
    transform:translateY(-2px);

    border-color:
        color-mix(
            in srgb,
            var(--home-primary) 42%,
            var(--home-border)
        );
}


.home-workspace-primary{
    background:
        radial-gradient(
            circle at 90% 18%,
            rgba(74,153,255,.24),
            transparent 36%
        ),
        linear-gradient(
            135deg,
            color-mix(
                in srgb,
                var(--home-primary) 10%,
                var(--home-surface)
            ),
            var(--home-surface)
        );
}


.workspace-index{
    color:var(--home-primary);

    font-size:11px;
    font-weight:900;

    letter-spacing:.12em;
}


.home-workspace-card strong{
    display:block;

    margin-top:12px;

    color:var(--home-text);

    font-size:
        clamp(
            22px,
            2.5vw,
            29px
        );
}


.home-workspace-card p{
    max-width:500px;

    margin:
        10px
        0
        0;

    color:var(--home-muted);

    font-size:14px;
    line-height:1.75;
}


.workspace-link{
    margin-top:auto;
    padding-top:24px;

    color:var(--home-primary);

    font-size:14px;
    font-weight:800;
}


/* =========================================================
   SERVICES
   ========================================================= */

.home-service-grid{
    display:grid;

    grid-template-columns:
        repeat(
            3,
            minmax(0,1fr)
        );

    gap:14px;
}


.home-service-card{
    min-height:205px;

    display:flex;
    flex-direction:column;

    padding:
        25px
        25px;

    border:1px solid var(--home-border);
    border-radius:22px;

    background:var(--home-surface);

    color:var(--home-text);

    text-decoration:none;

    box-shadow:
        0 10px 28px rgba(31,72,128,.05);

    transition:
        transform .15s ease,
        border-color .15s ease,
        box-shadow .15s ease;
}


.home-service-card:hover{
    transform:translateY(-2px);

    border-color:
        color-mix(
            in srgb,
            var(--home-primary) 42%,
            var(--home-border)
        );

    box-shadow:
        0 14px 32px rgba(31,72,128,.08);
}


.home-service-tag{
    color:var(--home-primary);

    font-size:10px;
    font-weight:900;

    letter-spacing:.16em;
}


.home-service-card strong{
    display:block;

    margin-top:12px;

    color:var(--home-text);

    font-size:21px;
}


.home-service-card p{
    margin:
        10px
        0
        0;

    color:var(--home-muted);

    font-size:13px;
    line-height:1.75;
}


.home-service-link{
    margin-top:auto;
    padding-top:20px;

    color:var(--home-primary);

    font-size:13px;
    font-weight:800;
}


/* =========================================================
   DARK
   ========================================================= */

html[data-theme="dark"] .home-tool-group{
    background:
        color-mix(
            in srgb,
            var(--home-surface) 94%,
            var(--home-primary) 6%
        );
}


/* =========================================================
   TABLET
   ========================================================= */

@media (max-width:1023px){

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


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


    .home-service-card:last-child{
        grid-column:
            1 / -1;
    }
}


/* =========================================================
   MOBILE
   ========================================================= */

@media (max-width:767px){

    .home-tools-section,
    .home-workspaces,
    .home-services{
        margin-top:34px;
    }


    .home-section-heading{
        align-items:flex-start;
    }


    .home-section-count{
        display:none;
    }


    .home-tool-group{
        padding:
            17px
            14px
            16px;

        border-radius:20px;
    }


    .home-tool-grid{
        grid-template-columns:1fr;

        gap:9px;
    }


    .home-tool-card{
        min-height:84px;

        grid-template-columns:
            38px
            minmax(0,1fr)
            18px;

        padding:
            13px
            12px;
    }


    .home-tool-icon{
        width:38px;
        height:38px;

        border-radius:12px;
    }


    .home-workspace-grid{
        grid-template-columns:1fr;
    }


    .home-workspace-card{
        min-height:190px;

        padding:
            22px
            20px;
    }


    .home-service-grid{
        grid-template-columns:1fr;
    }


    .home-service-card,
    .home-service-card:last-child{
        grid-column:auto;

        min-height:180px;

        padding:
            21px
            20px;
    }
}

/* QEEL HOME TASK4 END */

/* QEEL HOME TASK5 START */

/* =========================================================
   ACCOUNT LAYOUT STABILITY
   ========================================================= */

@media (min-width:1024px){

    .home-actions{
        width:200px;
        min-width:200px;
        max-width:200px;
    }

}


.home-account-slot{
    width:150px;
    min-width:150px;
    max-width:150px;

    flex:0 0 150px;

    contain:layout;
}


.home-account{
    width:150px;
    min-width:150px;
    max-width:150px;

    overflow:hidden;

    transition:
        background-color .15s ease,
        border-color .15s ease,
        color .15s ease;
}


.home-account .account-label{
    min-width:0;
    max-width:100%;

    overflow:hidden;

    text-overflow:ellipsis;
    white-space:nowrap;
}


.home-account .account-avatar{
    display:none;

    flex:0 0 24px;
}


.home-account.is-user{
    justify-content:flex-start;
}


.home-account.is-user .account-avatar{
    display:grid;
}


.home-account.is-user .account-label{
    flex:1 1 auto;

    min-width:0;

    text-align:left;
}


/*
 * 账号状态变化只能影响 account 内部，
 * 不允许改变 Header 三列尺寸。
 */
.home-header-inner,
.home-brand,
.home-nav,
.home-actions,
.home-account-slot{
    transition:
        background-color .15s ease,
        border-color .15s ease,
        color .15s ease;
}


@media (max-width:1023px){

    .home-actions{
        width:200px;
        min-width:200px;
        max-width:200px;
    }

}


@media (max-width:767px){

    .home-actions{
        width:154px;
        min-width:154px;
        max-width:154px;
    }


    .home-account-slot{
        width:112px;
        min-width:112px;
        max-width:112px;

        flex-basis:112px;
    }


    .home-account{
        width:112px;
        min-width:112px;
        max-width:112px;
    }

}

/* QEEL HOME TASK5 END */

/* QEEL HOME TASK6 START */

/* =========================================================
   GLOBAL STABILITY
   ========================================================= */

html{
    scrollbar-gutter:stable;
    max-width:100%;
    overflow-x:hidden;
}


body{
    max-width:100%;
    overflow-x:hidden;
}


.home-header,
.home-main,
.home-footer{
    max-width:100%;
}


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

.home-footer{
    width:min(
        calc(100% - 40px),
        var(--page-width)
    );

    margin:
        46px
        auto
        0;

    padding:
        25px
        0
        28px;

    border-top:
        1px
        solid
        var(--home-border);

    background:transparent;

    color:var(--home-muted);

    text-align:center;
}


.home-footer-line{
    width:100%;

    display:flex;
    align-items:center;
    justify-content:center;
    flex-wrap:wrap;

    gap:
        4px
        14px;

    font-size:13px;
    line-height:1.75;

    text-align:center;
}


.home-footer-line + .home-footer-line{
    margin-top:3px;
}


.home-footer-brand-line strong{
    color:var(--home-text);
    font-weight:800;
}


.home-footer a{
    color:var(--home-muted);

    text-decoration:none;
}


.home-footer a:hover{
    color:var(--home-primary);
}


/* =========================================================
   MOBILE / TABLET BOTTOM NAV
   Desktop hidden by default.
   ========================================================= */

.mobile-bottom-nav{
    display:none;
}


/* =========================================================
   DARK MODE FINAL PASS
   ========================================================= */

html[data-theme="dark"] body{
    background:var(--home-bg);
    color:var(--home-text);
}


html[data-theme="dark"] .home-header{
    background:var(--home-header-bg);
    border-color:var(--home-border);
}


html[data-theme="dark"] .home-footer{
    background:transparent;
    border-color:var(--home-border);
}


html[data-theme="dark"] .home-quick-form,
html[data-theme="dark"] .home-account,
html[data-theme="dark"] .home-tool-card,
html[data-theme="dark"] .home-service-card,
html[data-theme="dark"] .home-metric-card{
    background:var(--home-surface);
    border-color:var(--home-border);
}


html[data-theme="dark"] input,
html[data-theme="dark"] select,
html[data-theme="dark"] textarea{
    color:var(--home-text);
}


/* =========================================================
   TABLET + MOBILE <= 1023
   ========================================================= */

@media (max-width:1023px){

    /*
     * 顶部完整桌面导航在 Task 2 已隐藏。
     * 手机和平板统一使用底部导航。
     */

    body{
        padding-bottom:
            calc(
                88px +
                env(
                    safe-area-inset-bottom,
                    0px
                )
            );
    }


    .home-main{
        padding-bottom:16px;
    }


    .home-footer{
        width:calc(100% - 28px);

        margin-top:34px;

        padding:
            22px
            0
            20px;
    }


    .mobile-bottom-nav{
        position:fixed;

        z-index:120;

        left:50%;

        bottom:
            calc(
                10px +
                env(
                    safe-area-inset-bottom,
                    0px
                )
            );

        transform:translateX(-50%);

        width:min(
            calc(100% - 24px),
            720px
        );

        min-height:68px;

        display:grid;

        grid-template-columns:
            repeat(
                4,
                minmax(0,1fr)
            );

        align-items:center;

        padding:
            7px
            10px;

        border:
            1px
            solid
            var(--home-border);

        border-radius:24px;

        background:
            rgba(
                255,
                255,
                255,
                .96
            );

        box-shadow:
            0
            16px
            42px
            rgba(
                23,
                60,
                110,
                .16
            );

        backdrop-filter:blur(18px);
        -webkit-backdrop-filter:blur(18px);
    }


    .mobile-nav-item{
        min-width:0;
        min-height:54px;

        display:flex;
        flex-direction:column;

        align-items:center;
        justify-content:center;

        gap:2px;

        padding:
            5px
            4px;

        border-radius:16px;

        color:var(--home-muted);

        text-decoration:none;

        -webkit-tap-highlight-color:transparent;
    }


    .mobile-nav-item.is-active{
        color:var(--home-primary);
    }


    .mobile-nav-icon{
        height:24px;

        display:grid;
        place-items:center;

        font-size:20px;
        font-weight:800;

        line-height:1;
    }


    .mobile-nav-label{
        max-width:100%;

        overflow:hidden;

        font-size:12px;
        font-weight:750;

        line-height:1.25;

        white-space:nowrap;
        text-overflow:ellipsis;
    }


    html[data-theme="dark"] .mobile-bottom-nav{
        background:
            rgba(
                15,
                31,
                51,
                .96
            );

        border-color:
            var(--home-border);

        box-shadow:
            0
            18px
            46px
            rgba(
                0,
                0,
                0,
                .34
            );
    }


    html[data-theme="dark"] .mobile-nav-item{
        color:var(--home-muted);
    }


    html[data-theme="dark"] .mobile-nav-item.is-active{
        color:var(--home-primary);
    }

}


/* =========================================================
   MOBILE <= 767
   ========================================================= */

@media (max-width:767px){

    body{
        padding-bottom:
            calc(
                84px +
                env(
                    safe-area-inset-bottom,
                    0px
                )
            );
    }


    .home-footer{
        width:calc(100% - 24px);

        margin-top:28px;

        padding:
            19px
            0
            16px;
    }


    .home-footer-line{
        gap:
            2px
            9px;

        font-size:12px;
        line-height:1.7;
    }


    .mobile-bottom-nav{
        width:calc(100% - 20px);

        bottom:
            calc(
                8px +
                env(
                    safe-area-inset-bottom,
                    0px
                )
            );

        min-height:66px;

        padding:
            6px
            7px;

        border-radius:22px;
    }


    .mobile-nav-item{
        min-height:52px;
    }


    .mobile-nav-icon{
        font-size:19px;
    }


    .mobile-nav-label{
        font-size:12px;
    }

}


/* =========================================================
   VERY SMALL PHONE
   ========================================================= */

@media (max-width:390px){

    .mobile-bottom-nav{
        width:calc(100% - 14px);

        border-radius:20px;
    }


    .mobile-nav-label{
        font-size:11px;
    }


    .home-footer-line{
        font-size:11.5px;
    }

}

/* QEEL HOME TASK6 END */

/* QEEL MOBILE TWO COLUMN + NAV FIX START */

/* 平板和手机状态卡统一两列 */
@media (max-width:1023px){

    .home-metrics{
        display:grid !important;
        grid-template-columns:
            repeat(2,minmax(0,1fr)) !important;

        gap:10px !important;
    }

    .home-metric-card,
    .home-metric-card:last-child{
        grid-column:auto !important;

        min-width:0 !important;
        min-height:108px !important;

        padding:14px 13px !important;
    }

    .metric-icon{
        width:38px !important;
        height:38px !important;
        flex:0 0 38px !important;
    }

    .metric-copy{
        min-width:0 !important;
    }

    .metric-copy strong{
        font-size:18px !important;

        overflow:hidden !important;
        white-space:nowrap !important;
        text-overflow:ellipsis !important;
    }

}


/* 手机也永远保持两列 */
@media (max-width:420px){

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

    .home-metric-card,
    .home-metric-card:last-child{
        grid-column:auto !important;
    }

    .home-metric-card{
        min-height:104px !important;
        gap:8px !important;

        padding:
            12px
            10px !important;
    }

    .metric-icon{
        width:34px !important;
        height:34px !important;
        flex-basis:34px !important;

        font-size:16px !important;
    }

    .metric-label{
        font-size:11px !important;
    }

    .metric-copy strong{
        font-size:16px !important;
    }

    .metric-copy small{
        font-size:10px !important;
    }

}


/* =========================================================
   手机 / 平板底部导航点击修复
   ========================================================= */

@media (max-width:1023px){

    .mobile-bottom-nav{
        z-index:2147483000 !important;

        pointer-events:auto !important;

        isolation:isolate !important;

        user-select:none !important;
        -webkit-user-select:none !important;
    }

    .mobile-bottom-nav,
    .mobile-bottom-nav *{
        pointer-events:auto !important;
    }

    .mobile-nav-item{
        position:relative !important;
        z-index:2 !important;

        cursor:pointer !important;

        touch-action:manipulation !important;

        -webkit-tap-highlight-color:
            transparent !important;
    }

    .mobile-nav-icon,
    .mobile-nav-label{
        pointer-events:none !important;
    }

}

/* QEEL MOBILE TWO COLUMN + NAV FIX END */

/* QEEL REAL MOBILE TWO COLUMN START */

/*
 * Task 4 实际结构：
 * .home-tool-grid
 * .home-tool-card
 * .home-workspace-grid
 * .home-workspace-card
 * .home-service-grid
 * .home-service-card
 */

/* 手机 + 平板全部维持两列 */
@media (max-width:1023px){

    /* =========================
       全部工具
       ========================= */

    .home-tool-grid{
        display:grid !important;
        grid-template-columns:
            repeat(2,minmax(0,1fr)) !important;
        gap:12px !important;
    }

    .home-tool-card{
        width:100% !important;
        min-width:0 !important;
        min-height:150px !important;

        display:flex !important;
        flex-direction:column !important;
        align-items:flex-start !important;

        gap:10px !important;

        padding:16px !important;
    }

    .home-tool-icon{
        width:44px !important;
        height:44px !important;
        min-width:44px !important;
        flex:0 0 44px !important;
    }

    .home-tool-copy{
        width:100% !important;
        min-width:0 !important;
    }

    .home-tool-copy strong{
        display:block !important;

        font-size:16px !important;
        line-height:1.3 !important;

        white-space:normal !important;
        overflow:visible !important;
        text-overflow:clip !important;
    }

    .home-tool-copy > span{
        display:-webkit-box !important;

        margin-top:6px !important;

        font-size:12px !important;
        line-height:1.55 !important;

        overflow:hidden !important;

        -webkit-box-orient:vertical !important;
        -webkit-line-clamp:3 !important;
    }

    .home-tool-arrow{
        position:absolute !important;
        right:14px !important;
        top:17px !important;

        margin:0 !important;
    }

    .home-tool-card{
        position:relative !important;
    }


    /* =========================
       检测工作区
       ========================= */

    .home-workspace-grid{
        display:grid !important;
        grid-template-columns:
            repeat(2,minmax(0,1fr)) !important;
        gap:12px !important;
    }

    .home-workspace-card{
        width:100% !important;
        min-width:0 !important;
        min-height:230px !important;

        padding:20px 18px !important;
    }

    .home-workspace-card strong{
        font-size:20px !important;
        line-height:1.3 !important;
    }

    .home-workspace-card p{
        font-size:13px !important;
        line-height:1.65 !important;
    }

    .workspace-link{
        font-size:13px !important;
        padding-top:16px !important;
    }


    /* =========================
       服务入口
       ========================= */

    .home-service-grid{
        display:grid !important;
        grid-template-columns:
            repeat(2,minmax(0,1fr)) !important;
        gap:12px !important;
    }

    .home-service-card,
    .home-service-card:last-child{
        grid-column:auto !important;

        width:100% !important;
        min-width:0 !important;
        min-height:220px !important;

        padding:20px 18px !important;
    }

    .home-service-card strong{
        font-size:20px !important;
        line-height:1.3 !important;
    }

    .home-service-card p{
        font-size:13px !important;
        line-height:1.65 !important;
    }

    .home-service-link{
        font-size:13px !important;
        padding-top:16px !important;
    }

}


/* iPhone 小屏继续两列 */
@media (max-width:480px){

    .home-tool-grid,
    .home-workspace-grid,
    .home-service-grid{
        grid-template-columns:
            repeat(2,minmax(0,1fr)) !important;

        gap:9px !important;
    }


    .home-tool-group{
        padding:14px 10px !important;
    }


    .home-tool-card{
        min-height:142px !important;
        padding:13px 11px !important;
        gap:8px !important;

        border-radius:18px !important;
    }


    .home-tool-icon{
        width:38px !important;
        height:38px !important;
        min-width:38px !important;
        flex-basis:38px !important;

        border-radius:11px !important;

        font-size:13px !important;
    }


    .home-tool-copy strong{
        padding-right:18px !important;

        font-size:14px !important;
        line-height:1.25 !important;
    }


    .home-tool-copy > span{
        font-size:11px !important;
        line-height:1.45 !important;

        -webkit-line-clamp:3 !important;
    }


    .home-tool-arrow{
        top:14px !important;
        right:10px !important;

        font-size:15px !important;
    }


    /* 工作区 */
    .home-workspace-card{
        min-height:210px !important;

        padding:17px 14px !important;

        border-radius:20px !important;
    }


    .home-workspace-card strong{
        font-size:17px !important;
    }


    .home-workspace-card p{
        font-size:11.5px !important;
        line-height:1.55 !important;
    }


    .workspace-index{
        font-size:10px !important;
    }


    .workspace-link{
        font-size:12px !important;
        padding-top:12px !important;
    }


    /* 服务入口 */
    .home-service-card,
    .home-service-card:last-child{
        min-height:205px !important;

        padding:17px 14px !important;

        border-radius:20px !important;
    }


    .home-service-tag{
        font-size:9px !important;
    }


    .home-service-card strong{
        font-size:17px !important;
    }


    .home-service-card p{
        font-size:11.5px !important;
        line-height:1.55 !important;
    }


    .home-service-link{
        font-size:12px !important;
        padding-top:12px !important;
    }

}

/* QEEL REAL MOBILE TWO COLUMN END */

/* QEEL CANONICAL NAV START */

/* =========================================================
   顶部导航唯一规范
   ========================================================= */

body{
    padding-top:0 !important;
}


.qeel-home-header{
    position:sticky !important;
    top:0 !important;

    z-index:1000 !important;

    width:100% !important;
    height:72px !important;

    margin:0 !important;
    padding:0 !important;

    border-bottom:
        1px
        solid
        var(--home-border) !important;

    background:
        rgba(255,255,255,.96) !important;

    box-shadow:none !important;

    overflow:visible !important;

    pointer-events:auto !important;

    backdrop-filter:blur(18px);
    -webkit-backdrop-filter:blur(18px);
}


.qeel-home-header::before,
.qeel-home-header::after{
    display:none !important;
    content:none !important;
}


.qeel-home-header-inner{
    width:min(
        calc(100% - 32px),
        1180px
    ) !important;

    height:72px !important;

    margin:0 auto !important;
    padding:0 !important;

    display:grid !important;

    grid-template-columns:
        190px
        minmax(0,1fr)
        200px !important;

    align-items:center !important;

    column-gap:20px !important;

    position:relative !important;

    overflow:visible !important;

    pointer-events:auto !important;
}


/* =========================================================
   Logo 固定槽
   ========================================================= */

.qeel-home-brand{
    width:190px !important;
    min-width:190px !important;
    max-width:190px !important;

    height:44px !important;

    display:flex !important;
    align-items:center !important;

    gap:9px !important;

    margin:0 !important;
    padding:0 !important;

    position:relative !important;

    color:var(--home-text) !important;

    text-decoration:none !important;

    opacity:1 !important;
    visibility:visible !important;

    pointer-events:auto !important;

    transform:none !important;
}


.qeel-home-logo{
    width:36px !important;
    height:36px !important;

    min-width:36px !important;
    max-width:36px !important;

    flex:0 0 36px !important;

    display:grid !important;
    place-items:center !important;

    border-radius:11px !important;

    background:
        linear-gradient(
            135deg,
            #4d93ff,
            #1268f3
        ) !important;

    color:#fff !important;

    font-size:24px !important;
    font-weight:900 !important;
    line-height:1 !important;

    box-shadow:
        0 7px 18px
        rgba(31,111,255,.24) !important;
}


.qeel-home-brand-name{
    display:block !important;

    min-width:0 !important;

    color:var(--home-text) !important;

    font-size:19px !important;
    font-weight:900 !important;

    line-height:1 !important;

    white-space:nowrap !important;
}


/* =========================================================
   中间六项原生导航
   ========================================================= */

.qeel-home-nav{
    min-width:0 !important;
    height:72px !important;

    display:flex !important;
    align-items:center !important;
    justify-content:center !important;

    gap:22px !important;

    margin:0 !important;
    padding:0 !important;

    position:relative !important;

    transform:none !important;

    overflow:visible !important;

    pointer-events:auto !important;
}


.qeel-home-nav a{
    position:relative !important;

    display:inline-flex !important;
    align-items:center !important;
    justify-content:center !important;

    height:72px !important;

    margin:0 !important;
    padding:0 !important;

    border:0 !important;
    background:none !important;

    color:var(--home-text) !important;

    font-size:14px !important;
    font-weight:750 !important;

    line-height:1 !important;

    text-decoration:none !important;

    white-space:nowrap !important;

    cursor:pointer !important;

    pointer-events:auto !important;

    touch-action:manipulation !important;

    transform:none !important;
}


.qeel-home-nav a::after{
    content:"" !important;

    position:absolute !important;

    left:50% !important;
    bottom:14px !important;

    width:0 !important;
    height:2px !important;

    border-radius:99px !important;

    background:var(--home-primary) !important;

    transform:translateX(-50%) !important;

    transition:width .15s ease !important;
}


.qeel-home-nav a:hover,
.qeel-home-nav a.is-active{
    color:var(--home-primary) !important;
}


.qeel-home-nav a:hover::after,
.qeel-home-nav a.is-active::after{
    width:18px !important;
}


/* =========================================================
   右侧主题 + 固定账号槽
   ========================================================= */

.qeel-home-actions{
    width:200px !important;
    min-width:200px !important;
    max-width:200px !important;

    height:44px !important;

    display:grid !important;

    grid-template-columns:
        36px
        150px !important;

    align-items:center !important;

    justify-content:end !important;

    gap:14px !important;

    margin:0 !important;
    padding:0 !important;

    position:relative !important;

    transform:none !important;

    pointer-events:auto !important;
}


.qeel-home-theme{
    width:36px !important;
    height:36px !important;

    min-width:36px !important;
    max-width:36px !important;

    display:grid !important;
    place-items:center !important;

    margin:0 !important;
    padding:0 !important;

    border:0 !important;
    border-radius:10px !important;

    background:transparent !important;

    color:var(--home-muted) !important;

    font-size:18px !important;
    line-height:1 !important;

    cursor:pointer !important;

    pointer-events:auto !important;

    touch-action:manipulation !important;
}


.qeel-home-theme:hover{
    background:
        var(--home-surface) !important;

    color:
        var(--home-primary) !important;
}


.qeel-home-actions .home-account-slot{
    width:150px !important;
    min-width:150px !important;
    max-width:150px !important;

    height:42px !important;

    margin:0 !important;
    padding:0 !important;

    flex:none !important;

    position:relative !important;

    contain:layout !important;

    transform:none !important;
}


.qeel-home-actions .home-account{
    width:150px !important;
    min-width:150px !important;
    max-width:150px !important;

    height:42px !important;

    display:flex !important;
    align-items:center !important;
    justify-content:center !important;

    gap:8px !important;

    margin:0 !important;
    padding:0 12px !important;

    border:
        1px
        solid
        var(--home-border) !important;

    border-radius:13px !important;

    background:
        var(--home-primary) !important;

    color:#fff !important;

    box-sizing:border-box !important;

    overflow:hidden !important;

    text-decoration:none !important;

    pointer-events:auto !important;

    transform:none !important;
}


.qeel-home-actions
.home-account:not(.is-user)
.account-avatar{
    display:none !important;
}


.qeel-home-actions
.home-account:not(.is-user)
.account-label{
    width:100% !important;

    color:#fff !important;

    text-align:center !important;
}


.qeel-home-actions
.home-account.is-user{
    justify-content:flex-start !important;

    background:
        var(--home-surface) !important;

    color:
        var(--home-text) !important;
}


.qeel-home-actions
.home-account.is-user
.account-avatar{
    width:24px !important;
    height:24px !important;

    min-width:24px !important;
    flex:0 0 24px !important;

    display:grid !important;
    place-items:center !important;

    border-radius:50% !important;

    background:
        rgba(35,115,255,.12) !important;

    color:
        var(--home-primary) !important;

    font-size:12px !important;
    font-weight:900 !important;
}


.qeel-home-actions
.home-account.is-user
.account-label{
    min-width:0 !important;

    flex:1 1 auto !important;

    overflow:hidden !important;

    color:
        var(--home-text) !important;

    text-align:left !important;

    text-overflow:ellipsis !important;
    white-space:nowrap !important;
}


/* =========================================================
   深色模式
   ========================================================= */

html[data-theme="dark"]
.qeel-home-header{
    background:
        rgba(8,22,38,.96) !important;

    border-color:
        var(--home-border) !important;
}


html[data-theme="dark"]
.qeel-home-brand-name,
html[data-theme="dark"]
.qeel-home-nav a{
    color:
        var(--home-text) !important;
}


html[data-theme="dark"]
.qeel-home-nav a:hover,
html[data-theme="dark"]
.qeel-home-nav a.is-active{
    color:
        var(--home-primary) !important;
}


/* =========================================================
   平板 / 手机
   只保留 Logo + 主题按钮。
   页面导航使用底部四项导航。
   ========================================================= */

@media (max-width:1023px){

    .qeel-home-header{
        height:62px !important;
    }


    .qeel-home-header-inner{
        width:calc(100% - 24px) !important;
        height:62px !important;

        display:grid !important;

        grid-template-columns:
            minmax(0,1fr)
            40px !important;

        column-gap:10px !important;
    }


    .qeel-home-brand{
        width:auto !important;
        min-width:0 !important;
        max-width:none !important;

        height:40px !important;
    }


    .qeel-home-logo{
        width:34px !important;
        height:34px !important;

        min-width:34px !important;
        max-width:34px !important;

        flex-basis:34px !important;

        font-size:21px !important;
    }


    .qeel-home-brand-name{
        font-size:18px !important;
    }


    .qeel-home-nav{
        display:none !important;
    }


    .qeel-home-actions{
        width:40px !important;
        min-width:40px !important;
        max-width:40px !important;

        height:40px !important;

        display:block !important;
    }


    .qeel-home-theme{
        width:40px !important;
        height:40px !important;
    }


    .qeel-home-actions
    .home-account-slot{
        display:none !important;
    }

}


/* Anchor 定位时不被 sticky Header 挡住 */
#allTools,
#quickSearch{
    scroll-margin-top:88px !important;
}


@media (max-width:1023px){

    #allTools,
    #quickSearch{
        scroll-margin-top:74px !important;
    }

}

/* QEEL CANONICAL NAV END */

/* QEEL ALLTOOLS CLICK FIX START */

#allTools{
    position:relative !important;
}

#allTools a[href]{
    position:relative !important;
    z-index:5 !important;

    pointer-events:auto !important;
    cursor:pointer !important;

    touch-action:manipulation !important;
}

/*
 * 工具卡里的图标、文字、箭头不单独抢事件，
 * 点击统一交给外层 a[href]。
 */
#allTools a[href] > *{
    pointer-events:none !important;
}

/* QEEL ALLTOOLS CLICK FIX END */