:root {
    --skillhub-accio-start: #ff7a4d;
    --skillhub-accio-end: #ef426f;
    --skillhub-workbuddy-start: #5b7cfa;
    --skillhub-workbuddy-end: #7a4ce0;
}

.skillhub-platform-field {
    display: grid;
    gap: 10px;
}

.skillhub-platform-help,
.skillhub-platform-note {
    color: #646970;
    font-size: 12px;
    line-height: 1.55;
}

.skillhub-platform-option {
    display: block;
    margin: 0;
}

.skillhub-platform-option > input {
    position: absolute;
    width: 1px;
    height: 1px;
    overflow: hidden;
    clip: rect(0 0 0 0);
    clip-path: inset(50%);
    white-space: nowrap;
}

.skillhub-platform-pill,
.skillhub-platform-badge {
    display: inline-flex;
    align-items: center;
    gap: 7px;
    border: 1px solid #dde2ea;
    border-radius: 999px;
    background: #fff;
    color: #3a4150;
    font-weight: 600;
    line-height: 1;
    white-space: nowrap;
}

.skillhub-platform-pill {
    width: 100%;
    box-sizing: border-box;
    padding: 9px 12px;
    cursor: pointer;
    transition: border-color .18s ease, box-shadow .18s ease, background .18s ease;
}

.skillhub-platform-option > input:focus-visible + .skillhub-platform-pill {
    outline: 2px solid #2271b1;
    outline-offset: 2px;
}

.skillhub-platform-option > input:checked + .skillhub-platform-pill {
    border-color: #6f7df1;
    background: #f6f7ff;
    box-shadow: 0 0 0 2px rgba(91, 124, 250, .12);
}

.skillhub-platform-icon {
    display: inline-block;
    flex: 0 0 auto;
    width: 22px;
    height: 22px;
    border-radius: 7px;
    background-repeat: no-repeat;
    background-position: center;
    background-size: contain;
}

.skillhub-platform-pill--accio-work .skillhub-platform-icon,
.skillhub-platform-badge--accio-work .skillhub-platform-icon {
    background-image: url('../icons/accio-work.svg');
}

.skillhub-platform-pill--workbuddy .skillhub-platform-icon,
.skillhub-platform-badge--workbuddy .skillhub-platform-icon {
    background-image: url('../icons/workbuddy.svg');
}

.skillhub-platform-list {
    display: inline-flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 7px;
}

.skillhub-platform-badge {
    padding: 5px 9px 5px 6px;
    font-size: 12px;
    box-shadow: 0 4px 12px rgba(31, 41, 55, .07);
}

.skillhub-platform-badge .skillhub-platform-icon {
    width: 20px;
    height: 20px;
}

.skillhub-platform-badge--accio-work {
    border-color: rgba(239, 66, 111, .28);
    background: rgba(255, 122, 77, .08);
    color: #c9365e;
}

.skillhub-platform-badge--workbuddy {
    border-color: rgba(91, 124, 250, .28);
    background: rgba(91, 124, 250, .08);
    color: #4f5ed0;
}

.app-item .skillhub-card-platforms {
    margin-top: 7px;
}

.app-item .skillhub-platform-badge {
    padding: 4px 7px 4px 5px;
    font-size: 11px;
    box-shadow: none;
}

.app-item .skillhub-platform-badge .skillhub-platform-icon {
    width: 17px;
    height: 17px;
}

.app-item .app-platform.skillhub-platform-enhanced {
    margin-top: 7px;
}

body.dark-mode .skillhub-platform-badge,
body.io-black-mode .skillhub-platform-badge {
    background-color: rgba(255, 255, 255, .08);
}

.skillhub-profile-badges {
    display: inline-flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 7px;
}

.skillhub-profile-badges .skillhub-platform-list {
    display: contents;
}

.skillhub-product-badge {
    display: inline-flex;
    align-items: center;
    min-height: 30px;
    padding: 6px 10px;
    border: 1px solid transparent;
    border-radius: 999px;
    font-size: 12px;
    font-weight: 600;
    line-height: 1;
    white-space: nowrap;
}

.skillhub-product-badge--access-contact {
    color: #87530c;
    background: #fff8e8;
    border-color: #f1d291;
}

.skillhub-product-badge--access-free {
    color: #08754d;
    background: #ebfbf4;
    border-color: #9ce0c5;
}

.skillhub-product-badge--access-paid {
    color: #8549b4;
    background: #f8efff;
    border-color: #d9b4f5;
}

.skillhub-product-badge--setup-zero-config {
    color: #0a7080;
    background: #eafcff;
    border-color: #9edee8;
}

.skillhub-product-badge--setup-parameters {
    color: #315fc0;
    background: #eef4ff;
    border-color: #b7ccef;
}

.skillhub-product-badge--setup-review {
    color: #b13b53;
    background: #fff0f3;
    border-color: #f1b4c0;
}

.skillhub-app-hero .skillhub-platform-badge,
.skillhub-app-hero .skillhub-product-badge {
    min-height: 32px;
}

.skillhub-single-app .skillhub-app-hero {
    position: relative;
    display: grid;
    grid-template-columns: minmax(0, 1.12fr) minmax(390px, .88fr);
    gap: 34px;
    overflow: hidden;
    margin: 28px 0 42px !important;
    padding: 34px !important;
    border: 1px solid rgba(var(--theme-color-rgb), .12);
    border-radius: 26px;
    background:
        radial-gradient(circle at 0 0, rgba(var(--theme-color-rgb), .11), transparent 38%),
        radial-gradient(circle at 100% 100%, rgba(91, 124, 250, .10), transparent 36%),
        var(--main-bg-color);
    box-shadow: 0 24px 70px rgba(40, 47, 68, .10);
}

.skillhub-single-app .skillhub-app-hero::after {
    position: absolute;
    top: -90px;
    right: 34%;
    width: 220px;
    height: 220px;
    border-radius: 50%;
    background: rgba(var(--theme-color-rgb), .07);
    content: '';
    filter: blur(4px);
    pointer-events: none;
}

.skillhub-app-hero > .col,
.skillhub-app-hero > .col-12 {
    z-index: 1;
    width: auto;
    max-width: none;
    padding: 0;
}

.skillhub-app-hero > .col > .d-md-flex {
    align-items: flex-start;
    margin: 0 !important;
}

.skillhub-app-hero > .col-xl-5 {
    position: relative;
    display: flex;
    align-items: center;
    align-self: center;
    padding: 48px 16px 16px;
    border: 1px solid rgba(91, 124, 250, .12);
    border-radius: 22px;
    background: linear-gradient(145deg, rgba(239, 242, 255, .95), rgba(249, 245, 255, .82));
    box-shadow: inset 0 1px 0 rgba(255, 255, 255, .85);
}

.skillhub-app-hero > .col-xl-5::before {
    position: absolute;
    top: 16px;
    left: 18px;
    z-index: 2;
    color: #6d7390;
    content: 'SKILL 工作流预览';
    font-size: 11px;
    font-weight: 700;
    letter-spacing: .09em;
}

.skillhub-app-hero .screenshot-carousel {
    width: 100%;
    overflow: hidden;
    border: 1px solid rgba(91, 124, 250, .10);
    border-radius: 16px !important;
    background: var(--main-bg-color);
    box-shadow: 0 18px 45px rgba(48, 61, 105, .16);
}

.skillhub-app-hero .screenshot-carousel img {
    width: 100%;
    height: 100%;
    max-width: 100%;
    max-height: none;
    border-radius: 14px;
    box-shadow: none;
    object-fit: cover;
}

.skillhub-app-hero .screenshot-carousel .img_wrapper {
    height: auto;
    aspect-ratio: 16 / 9;
}

.skillhub-app-hero .carousel-indicators {
    bottom: 8px;
}

.skillhub-app-hero .carousel-indicators li {
    width: 7px;
    height: 7px;
    border: 0;
    border-radius: 50%;
    background: rgba(75, 83, 111, .45);
}

.skillhub-app-hero .breadcrumb {
    display: inline-flex;
    align-items: center;
    width: auto;
    margin: 0 0 14px !important;
    padding: 0 !important;
    border: 0 !important;
    background: transparent !important;
    font-size: 12px;
}

.skillhub-app-hero .app-ico img {
    width: 88px !important;
    height: 88px !important;
    border: 4px solid rgba(255, 255, 255, .9);
    border-radius: 24px;
    object-fit: cover;
    box-shadow: 0 15px 34px rgba(40, 51, 88, .16);
}

.skillhub-app-hero .app-info {
    min-width: 0;
}

.skillhub-hero-kicker {
    display: flex;
    align-items: center;
    gap: 9px;
    margin-bottom: 7px;
}

.skillhub-hero-kicker span {
    padding: 4px 7px;
    border-radius: 5px;
    color: #fff;
    background: linear-gradient(135deg, var(--skillhub-accio-start), var(--skillhub-accio-end));
    font-size: 9px;
    font-weight: 800;
    letter-spacing: .08em;
}

.skillhub-hero-kicker strong {
    color: var(--muted-color2);
    font-size: 12px;
    font-weight: 600;
}

.skillhub-app-hero h1 {
    margin-bottom: 10px !important;
    color: var(--main-color);
    font-size: clamp(28px, 2.4vw, 38px);
    font-weight: 750;
    letter-spacing: -.035em;
    line-height: 1.16;
}

.skillhub-app-hero .skillhub-hero-badges {
    margin-top: 3px;
}

.skillhub-app-hero .skillhub-platform-badge,
.skillhub-app-hero .skillhub-product-badge {
    min-height: 29px;
    padding-top: 5px;
    padding-bottom: 5px;
    box-shadow: none;
}

.skillhub-app-summary {
    max-width: 690px;
    margin: 17px 0 19px;
    color: var(--main-color);
    font-size: 15px;
    line-height: 1.8;
}

.skillhub-skill-flow {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 9px;
    margin: 0 0 14px;
}

.skillhub-flow-step {
    position: relative;
    display: flex;
    min-height: 116px;
    flex-direction: column;
    justify-content: flex-end;
    overflow: hidden;
    padding: 15px;
    border: 1px solid rgba(var(--theme-color-rgb), .10);
    border-radius: 15px;
    background: rgba(255, 255, 255, .72);
    box-shadow: 0 8px 24px rgba(43, 49, 72, .055);
}

.skillhub-flow-step::after {
    position: absolute;
    top: -26px;
    right: -20px;
    width: 74px;
    height: 74px;
    border-radius: 50%;
    background: rgba(var(--theme-color-rgb), .07);
    content: '';
}

.skillhub-flow-index {
    position: absolute;
    top: 12px;
    right: 13px;
    color: rgba(var(--theme-color-rgb), .36);
    font-size: 11px;
    font-weight: 800;
    letter-spacing: .08em;
}

.skillhub-flow-label {
    margin-bottom: 6px;
    color: var(--theme-color);
    font-size: 11px;
    font-weight: 700;
}

.skillhub-flow-step strong {
    position: relative;
    z-index: 1;
    color: var(--main-color);
    font-size: 13px;
    font-weight: 600;
    line-height: 1.55;
}

.skillhub-hero-meta {
    display: flex;
    flex-wrap: wrap;
    gap: 10px 24px;
    margin: 0 0 20px;
    padding: 13px 3px 0;
    border-top: 1px solid rgba(var(--theme-color-rgb), .10);
}

.skillhub-hero-meta > span {
    display: inline-flex;
    align-items: baseline;
    gap: 7px;
}

.skillhub-hero-meta small {
    color: var(--muted-color2);
    font-size: 11px;
}

.skillhub-hero-meta strong {
    color: var(--main-color);
    font-size: 12px;
    font-weight: 650;
}

.skillhub-app-actions {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 8px 2px;
}

.skillhub-consult-button {
    border: 0;
    border-radius: 12px;
    background: linear-gradient(135deg, var(--skillhub-accio-start), var(--skillhub-accio-end));
    box-shadow: 0 14px 30px rgba(239, 66, 111, .22);
    transition: transform .2s ease, box-shadow .2s ease;
}

.skillhub-consult-button:hover {
    box-shadow: 0 18px 36px rgba(239, 66, 111, .30);
    transform: translateY(-2px);
}

.skillhub-consult-button i {
    display: none;
}

.skillhub-consult-button::after {
    margin-left: 10px;
    content: '\2192';
    font-size: 18px;
}

.skillhub-delivery-note {
    color: var(--muted-color);
    font-size: 12px;
}

.skillhub-delivery-note::before {
    margin-right: 5px;
    color: #20a66a;
    content: '\2713';
    font-weight: 800;
}

.skillhub-app-hero .text-sm .iconfont {
    display: none;
}

.skillhub-related-section {
    padding: 24px;
    border-radius: var(--theme-border-radius);
    background: var(--main-bg-color);
}

.skillhub-related-heading {
    display: flex;
    align-items: end;
    justify-content: space-between;
    gap: 20px;
    margin-bottom: 18px;
}

.skillhub-related-heading h2,
.skillhub-get-context h2 {
    margin: 4px 0 0;
    font-size: 20px;
}

.skillhub-related-heading p {
    margin: 0;
    color: var(--muted-color);
    font-size: 13px;
}

.skillhub-related-kicker {
    color: var(--theme-color);
    font-size: 12px;
    font-weight: 700;
    letter-spacing: .08em;
}

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

.skillhub-related-card {
    display: grid;
    grid-template-columns: 54px minmax(0, 1fr) 22px;
    gap: 12px;
    align-items: center;
    padding: 13px;
    border: 1px solid var(--muted-bg-color);
    border-radius: var(--theme-border-radius-md);
    background: var(--muted-bg-a-color);
}

.skillhub-related-card:hover {
    border-color: rgba(var(--theme-color-rgb), .35);
    background: var(--theme-color-bg);
}

.skillhub-related-image {
    width: 54px;
    height: 54px;
    overflow: hidden;
    border-radius: 14px;
    background: var(--main-bg-color);
}

.skillhub-related-image img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.skillhub-related-copy {
    display: flex;
    min-width: 0;
    flex-direction: column;
    gap: 3px;
}

.skillhub-related-copy strong,
.skillhub-related-copy > span:last-child {
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.skillhub-related-copy > span:last-child {
    color: var(--muted-color);
    font-size: 12px;
}

.skillhub-related-stage {
    color: var(--theme-color);
    font-size: 11px;
    font-weight: 600;
}

.skillhub-related-arrow {
    color: var(--muted-color);
    font-size: 18px;
    transition: transform .2s ease;
}

.skillhub-related-card:hover .skillhub-related-arrow {
    color: var(--theme-color);
    transform: translateX(3px);
}

/* Real scenario-to-Skill backlinks. */
.skillhub-scenario-related {
    padding: 30px;
    border: 1px solid #e2e6ef;
    border-radius: 22px;
    background: linear-gradient(145deg, #fff, #f7f5ff);
    box-shadow: 0 13px 36px rgba(36, 46, 75, .045);
}
.skillhub-scenario-related__heading {
    display: flex;
    align-items: flex-end;
    justify-content: space-between;
    gap: 35px;
    margin-bottom: 22px;
}
.skillhub-scenario-related__heading > div > span {
    display: block;
    margin-bottom: 5px;
    color: #6757d9;
    font-size: 10px;
    font-weight: 800;
    letter-spacing: .1em;
}
.skillhub-scenario-related__heading h2 { margin: 0; color: #253249; font-size: 24px; }
.skillhub-scenario-related__heading p { max-width: 360px; margin: 0; color: #7b8799; font-size: 11px; }
.skillhub-scenario-related__grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 14px; }
.skillhub-scenario-related__grid > a {
    position: relative;
    display: flex;
    min-height: 145px;
    flex-direction: column;
    padding: 20px;
    border: 1px solid #e3e5ee;
    border-radius: 17px;
    color: #27344b !important;
    background: #fff;
    text-decoration: none !important;
    transition: .22s ease;
}
.skillhub-scenario-related__grid > a:hover { transform: translateY(-3px); border-color: #cdc5fb; box-shadow: 0 14px 30px rgba(65, 51, 146, .08); }
.skillhub-scenario-related__grid > a > span { color: #6d5ddd; font-size: 9px; font-weight: 800; letter-spacing: .08em; }
.skillhub-scenario-related__grid > a > strong { margin: 7px 0 6px; color: #27344b; font-size: 15px; }
.skillhub-scenario-related__grid > a > small { overflow: hidden; color: #7b8798; font-size: 10px; line-height: 1.6; text-overflow: ellipsis; white-space: nowrap; }
.skillhub-scenario-related__grid > a > em { margin-top: auto; color: #5e4fcf; font-size: 9px; font-style: normal; font-weight: 800; }

@media (max-width: 767px) {
    .skillhub-scenario-related { padding: 22px; border-radius: 18px; }
    .skillhub-scenario-related__heading { align-items: flex-start; flex-direction: column; gap: 9px; }
    .skillhub-scenario-related__heading h2 { font-size: 21px; }
    .skillhub-scenario-related__grid { grid-template-columns: 1fr; }
}

.io-black-mode .skillhub-scenario-related { border-color: #373a42; background: linear-gradient(145deg, #292b2e, #2d293c); }
.io-black-mode .skillhub-scenario-related__heading h2,
.io-black-mode .skillhub-scenario-related__grid > a > strong { color: #edf0f5; }
.io-black-mode .skillhub-scenario-related__grid > a { border-color: #3b3e46; background: #292b2e; }

.skillhub-profile-badges--card {
    gap: 5px;
    margin-top: 8px;
}

.app-item .skillhub-profile-badges--card .skillhub-platform-badge,
.app-item .skillhub-profile-badges--card .skillhub-product-badge {
    min-height: 22px;
    padding: 3px 6px;
    font-size: 10px;
    box-shadow: none;
}

.app-item .skillhub-profile-badges--card .skillhub-platform-icon {
    width: 15px;
    height: 15px;
}

.app-item .app-v {
    display: none !important;
}

.skillhub-get-context {
    margin-bottom: 24px;
    padding: 22px;
    border: 1px solid rgba(var(--theme-color-rgb), .22);
    border-radius: var(--theme-border-radius);
    background: linear-gradient(135deg, var(--theme-color-bg), var(--main-bg-color));
}

.skillhub-consult-copy {
    display: flex;
    gap: 10px;
    align-items: center;
    margin-top: 14px;
}

.skillhub-consult-copy code {
    flex: 1;
    padding: 12px;
    color: var(--main-color);
    line-height: 1.55;
    background: var(--main-bg-color);
}

.skillhub-product-admin-grid {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 18px 24px;
}

.skillhub-product-admin-field label,
.skillhub-product-admin-field > strong {
    display: block;
    margin-bottom: 7px;
}

.skillhub-product-admin-wide {
    grid-column: 1 / -1;
}

.skillhub-admin-checks {
    display: flex;
    flex-wrap: wrap;
    gap: 12px;
}

.skillhub-admin-checks label {
    margin: 0;
}

@media (max-width: 767.98px) {
    .skillhub-skill-flow,
    .skillhub-related-grid,
    .skillhub-product-admin-grid {
        grid-template-columns: 1fr;
    }

    .skillhub-single-app .skillhub-app-hero {
        margin: 16px 0 28px !important;
        padding: 20px !important;
        border-radius: 19px;
    }

    .skillhub-app-hero .breadcrumb,
    .skillhub-hero-kicker,
    .skillhub-app-hero .skillhub-profile-badges {
        justify-content: center;
    }

    .skillhub-app-hero h1 {
        font-size: 28px;
    }

    .skillhub-app-summary {
        text-align: left;
    }

    .skillhub-flow-step {
        min-height: 94px;
    }

    .skillhub-hero-meta {
        align-items: flex-start;
        flex-direction: column;
        gap: 7px;
    }

    .skillhub-app-actions {
        align-items: stretch;
        flex-direction: column;
    }

    .skillhub-consult-button {
        width: 100%;
        margin-right: 0 !important;
    }

    .skillhub-delivery-note {
        text-align: center;
    }

    .skillhub-related-heading {
        align-items: flex-start;
        flex-direction: column;
        gap: 6px;
    }

    .skillhub-related-section {
        padding: 18px;
    }

    .skillhub-consult-copy {
        align-items: stretch;
        flex-direction: column;
    }

    .skillhub-product-admin-wide {
        grid-column: auto;
    }
}

@media (max-width: 1199.98px) {
    .skillhub-single-app .skillhub-app-hero {
        grid-template-columns: 1fr;
    }

    .skillhub-app-hero > .col-xl-5 {
        min-height: 0;
    }
}

body.dark-mode .skillhub-app-hero > .col-xl-5,
body.io-black-mode .skillhub-app-hero > .col-xl-5 {
    background: linear-gradient(145deg, rgba(57, 64, 91, .72), rgba(35, 38, 53, .82));
}

body.dark-mode .skillhub-flow-step,
body.io-black-mode .skillhub-flow-step {
    background: rgba(255, 255, 255, .045);
}
/* Keep all 70 homepage Skills in the HTML for discovery, while allowing the
 * browser to postpone layout and paint work for category rows below the fold. */
@supports (content-visibility: auto) {
    body.home .content-layout.show-card > .content-card {
        content-visibility: auto;
        contain-intrinsic-size: auto 620px;
    }

    @media (max-width: 767.98px) {
        body.home .content-layout.show-card > .content-card {
            contain-intrinsic-size: auto 1100px;
        }
    }
}