body.theme-studio_app {
    --studio-ink: #182230;
    --studio-muted: #607086;
    --studio-line: #d9e1eb;
    --studio-soft: #f3f6f9;
    --studio-surface: #ffffff;
    --studio-primary: #2463eb;
    --studio-primary-dark: #1648ba;
    --studio-teal: #0f766e;
    --studio-sidebar: #1c2735;
    --studio-sidebar-muted: #9eabba;
    min-width: 320px;
    background: var(--studio-soft);
    color: var(--studio-ink);
}

.theme-studio_app .button {
    border-radius: 7px;
}

.theme-studio_app .button.primary {
    border-color: var(--studio-primary);
    background: var(--studio-primary);
}

.theme-studio_app .button.primary:hover {
    background: var(--studio-primary-dark);
}

.theme-studio_app .service-logo-image {
    max-width: 180px;
    max-height: 40px;
}

.studio-public-header {
    position: relative;
    z-index: 10;
    background: var(--studio-surface);
    border-bottom: 1px solid var(--studio-line);
}

.studio-public-header-inner,
.studio-public-footer > div {
    width: min(1220px, calc(100% - 56px));
    margin: 0 auto;
}

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

.studio-public-brand,
.studio-topbar-brand,
.studio-sidebar-brand {
    min-width: 0;
    color: var(--studio-ink);
    font-size: 18px;
    font-weight: 800;
    overflow-wrap: anywhere;
}

.studio-public-nav,
.studio-compact-nav {
    display: flex;
    align-items: center;
    gap: 6px;
    color: var(--studio-muted);
    font-size: 14px;
    font-weight: 700;
}

.studio-compact-nav {
    margin-left: auto;
}

.studio-public-nav a,
.studio-compact-nav a {
    padding: 9px 10px;
    border-radius: 7px;
}

.studio-public-nav a:hover,
.studio-compact-nav a:hover {
    background: #edf3ff;
    color: var(--studio-primary-dark);
}

.studio-public-nav .studio-nav-primary {
    border: 1px solid var(--studio-primary);
    background: var(--studio-primary);
    color: #fff;
}

.studio-public-nav .studio-nav-primary:hover {
    background: var(--studio-primary-dark);
    color: #fff;
}

.studio-public-page {
    min-height: calc(100vh - 137px);
}

.layout-auth .studio-public-page {
    width: min(1120px, calc(100% - 32px));
    margin: 0 auto;
    padding: 38px 0 64px;
}

.layout-landing .studio-public-page > .flash {
    width: min(1220px, calc(100% - 56px));
    margin: 20px auto 0;
}

.layout-landing .hero {
    display: grid;
    min-height: min(600px, calc(100vh - 170px));
    padding: 64px 28px;
    place-items: center;
    border: 0;
    border-bottom: 1px solid var(--studio-line);
    border-radius: 0;
    background: #edf4ff;
    box-shadow: none;
    color: var(--studio-ink);
    text-align: center;
}

.layout-landing .hero > div {
    width: min(880px, 100%);
}

.layout-landing .hero .eyebrow {
    color: var(--studio-teal);
}

.layout-landing .hero h1 {
    font-size: 46px;
    line-height: 1.18;
}

.layout-landing .hero-copy {
    max-width: 680px;
    margin: 18px auto 0;
    color: var(--studio-muted);
    font-size: 18px;
    line-height: 1.7;
}

.layout-landing .hero .actions {
    justify-content: center;
    margin-top: 28px;
}

.layout-landing .hero.has-hero-image {
    grid-template-columns: minmax(0, 2fr) minmax(360px, 3fr);
    width: min(1220px, calc(100% - 56px));
    min-height: 520px;
    margin: 42px auto 0;
    padding: 40px;
    place-items: stretch;
    border: 1px solid var(--studio-line);
    border-radius: 12px;
    text-align: left;
}

.layout-landing .hero.has-hero-image > .landing-long-intro-content {
    width: auto;
}

.layout-landing .hero.has-hero-image .hero-copy {
    margin-right: 0;
    margin-left: 0;
}

.layout-landing .hero.has-hero-image .actions {
    justify-content: flex-start;
}

.layout-landing .hero.has-hero-image .landing-hero-visual {
    margin: -40px;
    margin-left: 0;
}

.layout-landing .landing-login-focus {
    width: min(1220px, calc(100% - 56px));
    min-height: 560px;
    margin: 42px auto 0;
    border: 1px solid var(--studio-line);
    border-radius: 12px;
    box-shadow: none;
}

.layout-landing .landing-login-promo {
    padding: 64px;
    border-right: 1px solid var(--studio-line);
    background: #edf4ff;
    color: var(--studio-ink);
}

.layout-landing .landing-login-promo .eyebrow {
    color: var(--studio-teal);
}

.layout-landing .landing-login-promo h1 {
    font-size: 46px;
    line-height: 1.18;
}

.layout-landing .landing-login-promo .hero-copy {
    color: var(--studio-muted);
    line-height: 1.7;
}

.layout-landing .landing-login-focus.has-hero-image .landing-login-promo {
    color: #ffffff;
}

.layout-landing .landing-login-focus.has-hero-image .landing-login-promo .eyebrow {
    color: #99f6e4;
}

.layout-landing .landing-login-focus.has-hero-image .landing-login-promo .hero-copy {
    color: #e2e8f0;
}

.layout-landing .landing-login-card {
    width: min(460px, calc(100% - 72px));
    margin: 36px 0;
}

.layout-landing .landing-section,
.layout-landing .landing-story-section,
.layout-landing .studio-public-page > .public-services-page,
.layout-landing .studio-public-page > .public-service-detail > .public-service-hero,
.layout-landing .studio-public-page > .panel {
    width: min(1220px, calc(100% - 56px));
    margin-right: auto;
    margin-left: auto;
}

.layout-landing .landing-section {
    padding-top: 46px;
}

.layout-landing .landing-section h2 {
    margin-bottom: 18px;
    font-size: 28px;
}

.layout-landing .landing-story-copy h2::after,
.layout-landing .landing-feature-grid-section > h2::after,
.layout-landing .landing-faq-section > h2::after {
    background: var(--studio-primary);
}

.layout-landing .landing-faq-item[open] summary {
    background: #edf3ff;
    color: var(--studio-primary-dark);
}

.layout-landing .feature-list {
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 16px;
}

.layout-landing .feature-card {
    min-height: 168px;
    padding: 24px;
    align-content: start;
    border-color: var(--studio-line);
    border-radius: 8px;
}

.layout-landing .feature-card h3 {
    margin-bottom: 16px;
    font-size: 19px;
}

.layout-landing .studio-public-page > .panel {
    margin-top: 28px;
    margin-bottom: 64px;
    box-shadow: none;
}

.studio-public-footer {
    padding: 22px 0;
    background: var(--studio-surface);
    border-top: 1px solid var(--studio-line);
    color: var(--studio-muted);
    font-size: 13px;
}

.studio-public-footer > div {
    display: grid;
    gap: 20px;
}

.studio-public-footer .seller-footer-brand {
    color: var(--studio-text);
    font-weight: 700;
}

.studio-public-footer .seller-information-title {
    color: var(--studio-text);
}

.studio-app-shell {
    display: grid;
    grid-template-columns: 256px minmax(0, 1fr);
    min-height: 100vh;
}

.studio-sidebar {
    position: sticky;
    top: 0;
    display: flex;
    height: 100vh;
    min-width: 0;
    flex-direction: column;
    overflow-y: auto;
    padding: 20px 16px;
    background: var(--studio-sidebar);
    color: #dce4ee;
}

.studio-sidebar-header {
    display: flex;
    min-height: 44px;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    padding: 0 8px;
}

.studio-sidebar-brand {
    color: #fff;
}

.studio-sidebar-brand .service-logo-image {
    max-width: 188px;
    max-height: 42px;
}

.studio-drawer-close,
.studio-drawer-open,
.studio-drawer-backdrop {
    display: none;
}

.studio-workspace-summary {
    display: grid;
    gap: 2px;
    margin: 18px 0 12px;
    padding: 14px;
    border: 1px solid #394758;
    border-radius: 7px;
    background: #243142;
}

.studio-workspace-summary span,
.studio-workspace-summary small {
    color: var(--studio-sidebar-muted);
    font-size: 11px;
}

.studio-workspace-summary strong {
    min-width: 0;
    overflow: hidden;
    font-size: 14px;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.studio-app-menu {
    display: grid;
    gap: 4px;
    margin-top: 6px;
}

.studio-app-menu a {
    display: grid;
    grid-template-columns: 28px minmax(0, 1fr);
    gap: 9px;
    align-items: start;
    min-height: 42px;
    padding: 8px 10px;
    border-radius: 7px;
    color: #d3dce7;
}

.studio-app-menu a:hover,
.studio-app-menu a.active {
    background: #2a65e8;
    color: #fff;
}

.studio-menu-mark {
    display: grid;
    width: 24px;
    height: 24px;
    place-items: center;
    border-radius: 6px;
    background: #2a3748;
    color: #a9c5ff;
    font-size: 11px;
    font-weight: 800;
}

.studio-app-menu a:hover .studio-menu-mark,
.studio-app-menu a.active .studio-menu-mark {
    background: rgba(255, 255, 255, 0.16);
    color: #fff;
}

.studio-menu-copy {
    display: grid;
    min-width: 0;
    gap: 2px;
}

.studio-menu-copy strong {
    font-size: 14px;
    overflow-wrap: anywhere;
}

.studio-menu-copy small {
    color: var(--studio-sidebar-muted);
    font-size: 11px;
    line-height: 1.35;
    overflow-wrap: anywhere;
}

.studio-app-menu a.active small,
.studio-app-menu a:hover small {
    color: #dce7ff;
}

.studio-sidebar-footer {
    display: grid;
    gap: 12px;
    margin-top: auto;
    padding: 18px 8px 2px;
    border-top: 1px solid #394758;
}

.studio-sidebar-footer > div:first-child {
    display: grid;
    gap: 2px;
    min-width: 0;
}

.studio-sidebar-footer strong,
.studio-sidebar-footer small {
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.studio-sidebar-footer strong {
    color: #fff;
    font-size: 13px;
}

.studio-sidebar-footer small {
    color: var(--studio-sidebar-muted);
    font-size: 11px;
}

.studio-sidebar-actions {
    display: flex;
    flex-wrap: wrap;
    gap: 12px;
    color: #bfcbd8;
    font-size: 12px;
    font-weight: 700;
}

.studio-app-content {
    min-width: 0;
    padding-bottom: 56px;
}

.studio-app-topbar {
    position: sticky;
    top: 0;
    z-index: 20;
    display: flex;
    min-height: 64px;
    align-items: center;
    justify-content: space-between;
    gap: 18px;
    padding: 0 32px;
    background: rgba(255, 255, 255, 0.97);
    border-bottom: 1px solid var(--studio-line);
}

.studio-topbar-brand {
    display: none;
}

.studio-app-content > .page-title,
.studio-app-content > .panel,
.studio-app-content > .grid,
.studio-app-content > .form-wrap,
.studio-app-content > .support-layout,
.studio-app-content > .workspace-list,
.studio-app-content > .table-wrap,
.studio-app-content > .public-service-detail {
    margin-right: 32px;
    margin-left: 32px;
}

.studio-app-content > .page-title {
    margin-top: 28px;
}

.studio-app-content > .page-title h1 {
    font-size: 34px;
}

.studio-app-content > .flash {
    margin: 20px 32px 0;
}

.studio-app-content .panel {
    border-color: var(--studio-line);
    box-shadow: 0 8px 24px rgba(33, 52, 79, 0.07);
}

.studio-app-content .grid.three {
    grid-template-columns: repeat(3, minmax(0, 1fr));
}

.studio-app-content .feature-card {
    border-color: var(--studio-line);
}

.studio-app-content .entitlement-reminder {
    margin-right: 32px;
    margin-left: 32px;
}

.studio-drawer-backdrop {
    border: 0;
}

@media (max-width: 1100px) {
    .studio-app-content .grid.three {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }
}

@media (max-width: 900px) {
    body.studio-drawer-is-open {
        overflow: hidden;
    }

    .studio-app-shell {
        display: block;
    }

    .studio-sidebar {
        position: fixed;
        z-index: 60;
        width: min(320px, calc(100vw - 48px));
        transform: translateX(-102%);
        transition: transform 180ms ease;
    }

    .studio-drawer-is-open .studio-sidebar {
        transform: translateX(0);
    }

    .studio-drawer-close {
        display: grid;
        width: 36px;
        height: 36px;
        padding: 0;
        place-items: center;
        border: 1px solid #445367;
        border-radius: 7px;
        background: transparent;
        color: #fff;
        font-size: 24px;
        cursor: pointer;
    }

    .studio-drawer-open {
        display: grid;
        width: 40px;
        height: 40px;
        padding: 10px;
        place-content: center;
        gap: 4px;
        border: 1px solid var(--studio-line);
        border-radius: 7px;
        background: var(--studio-surface);
        cursor: pointer;
    }

    .studio-drawer-open span {
        display: block;
        width: 18px;
        height: 2px;
        background: var(--studio-ink);
    }

    .studio-drawer-backdrop {
        position: fixed;
        z-index: 50;
        inset: 0;
        background: rgba(24, 34, 48, 0.52);
        cursor: pointer;
    }

    .studio-drawer-is-open .studio-drawer-backdrop {
        display: block;
    }

    .studio-app-topbar {
        min-height: 64px;
        padding: 0 20px;
    }

    .studio-topbar-brand {
        display: inline-flex;
        margin-right: auto;
        font-size: 16px;
    }

    .studio-topbar-brand .service-logo-image {
        max-width: 154px;
        max-height: 34px;
    }

    .studio-app-content > .page-title,
    .studio-app-content > .panel,
    .studio-app-content > .grid,
    .studio-app-content > .form-wrap,
    .studio-app-content > .support-layout,
    .studio-app-content > .workspace-list,
    .studio-app-content > .table-wrap,
    .studio-app-content > .public-service-detail {
        margin-right: 20px;
        margin-left: 20px;
    }

    .studio-app-content > .flash,
    .studio-app-content .entitlement-reminder {
        margin-right: 20px;
        margin-left: 20px;
    }
}

@media (max-width: 760px) {
    .studio-public-header-inner {
        align-items: flex-start;
        flex-direction: column;
        width: min(100% - 32px, 1220px);
        padding: 14px 0;
    }

    .studio-public-nav {
        width: 100%;
        flex-wrap: wrap;
    }

    .studio-public-nav a {
        padding: 7px 8px;
    }

    .layout-landing .hero {
        min-height: 470px;
        padding: 48px 20px;
    }

    .layout-landing .hero.has-hero-image {
        grid-template-columns: 1fr;
        width: calc(100% - 32px);
        min-height: 0;
        margin-top: 24px;
        padding: 32px 24px;
    }

    .layout-landing .hero.has-hero-image .landing-hero-visual {
        margin: 0 -24px -32px;
    }

    .layout-landing .hero h1 {
        font-size: 34px;
    }

    .layout-landing .hero-copy {
        font-size: 16px;
    }

    .layout-landing .landing-login-focus {
        width: calc(100% - 32px);
        min-height: 0;
        margin-top: 24px;
    }

    .layout-landing .landing-login-promo {
        min-height: 320px;
        padding: 40px 24px;
        border-right: 0;
        border-bottom: 1px solid var(--studio-line);
    }

    .layout-landing .landing-login-promo h1 {
        font-size: 34px;
    }

    .layout-landing .landing-login-card {
        width: calc(100% - 32px);
        margin: 16px 0;
    }

    .layout-landing .landing-section,
    .layout-landing .landing-story-section,
    .layout-landing .studio-public-page > .public-services-page,
    .layout-landing .studio-public-page > .public-service-detail > .public-service-hero,
    .layout-landing .studio-public-page > .panel,
    .layout-landing .studio-public-page > .flash {
        width: calc(100% - 32px);
    }

    .layout-landing .landing-section {
        padding-top: 34px;
    }

    .layout-landing .feature-list {
        grid-template-columns: 1fr;
    }

    .studio-public-footer > div {
        align-items: flex-start;
        flex-direction: column;
        width: calc(100% - 32px);
    }

    .studio-app-topbar {
        gap: 8px;
        padding: 0 16px;
    }

    .studio-compact-nav {
        gap: 0;
        font-size: 12px;
    }

    .studio-compact-nav a {
        padding: 8px 6px;
    }

    .studio-app-content > .page-title,
    .studio-app-content > .panel,
    .studio-app-content > .grid,
    .studio-app-content > .form-wrap,
    .studio-app-content > .support-layout,
    .studio-app-content > .workspace-list,
    .studio-app-content > .table-wrap,
    .studio-app-content > .public-service-detail {
        margin-right: 16px;
        margin-left: 16px;
    }

    .studio-app-content > .flash,
    .studio-app-content .entitlement-reminder {
        margin-right: 16px;
        margin-left: 16px;
    }

    .studio-app-content > .page-title h1 {
        font-size: 28px;
    }

    .studio-app-content .grid.three {
        grid-template-columns: 1fr;
    }
}

@media (max-width: 420px) {
    .studio-topbar-brand {
        max-width: 112px;
        font-size: 14px;
    }

    .studio-topbar-brand .service-logo-image {
        max-width: 112px;
    }

    .studio-compact-nav a:last-child {
        display: none;
    }
}

@media (prefers-reduced-motion: reduce) {
    .studio-sidebar {
        transition: none;
    }
}

.service-hub-preview-banner {
    margin: 20px 32px 0;
    padding: 12px 16px;
    border: 1px solid #e0b454;
    border-radius: 6px;
    background: #fff8e8;
    color: #6c4a08;
    font-weight: 700;
}

.service-hub-pc-menu {
    display: grid;
    gap: 5px;
    margin-top: 22px;
}

.service-hub-root-link,
.service-hub-service-group > summary {
    display: flex;
    min-height: 42px;
    align-items: center;
    justify-content: space-between;
    padding: 9px 12px;
    border-radius: 7px;
    color: #dce4ee;
    font-size: 14px;
    font-weight: 750;
    cursor: pointer;
}

.service-hub-root-link:hover,
.service-hub-root-link.active,
.service-hub-service-group > summary:hover,
.service-hub-service-group > summary.active {
    background: #2a65e8;
    color: #fff;
}

.service-hub-service-group > summary {
    list-style: none;
}

.service-hub-service-group > summary::-webkit-details-marker {
    display: none;
}

.service-hub-service-group > div {
    display: grid;
    gap: 2px;
    padding: 5px 0 8px 12px;
}

.service-hub-service-group > div a {
    display: grid;
    min-width: 0;
    grid-template-columns: minmax(0, 1fr);
    gap: 2px;
    align-items: start;
    min-height: 48px;
    padding: 7px 10px;
    border-left: 2px solid #3a485a;
    color: #cbd6e3;
}

.service-hub-service-group > div a:hover,
.service-hub-service-group > div a.active {
    border-left-color: #6aa2ff;
    color: #fff;
    background: #253449;
}

.service-hub-service-group > div a span {
    display: -webkit-box;
    min-width: 0;
    overflow: hidden;
    overflow-wrap: anywhere;
    line-height: 1.35;
    -webkit-box-orient: vertical;
    -webkit-line-clamp: 2;
}

.service-hub-workspace-context {
    display: grid;
    gap: 3px;
    margin: 18px 0 4px;
    padding: 12px;
    border: 1px solid #394758;
    border-radius: 7px;
    background: #243142;
}

.service-hub-workspace-context > span,
.service-hub-workspace-context > small {
    color: var(--studio-sidebar-muted);
    font-size: 11px;
}

.service-hub-workspace-context > strong {
    min-width: 0;
    overflow: hidden;
    color: #fff;
    font-size: 14px;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.service-hub-workspace-context > div {
    display: flex;
    flex-wrap: wrap;
    gap: 5px 10px;
    margin-top: 7px;
}

.service-hub-workspace-context a {
    color: #b9cdf0;
    font-size: 11px;
    font-weight: 700;
}

.service-hub-workspace-context a:hover {
    color: #fff;
}

.service-hub-mobile-workspace {
    display: none;
}

.service-hub-service-group > div a small {
    color: #9eabba;
    font-size: 10px;
    line-height: 1.35;
    white-space: normal;
}

.service-hub-service-group > div .service-hub-all-services {
    display: block;
    margin-top: 3px;
    font-size: 12px;
    font-weight: 700;
}

.service-hub-logout {
    color: #fff;
    font-weight: 700;
}

.service-hub-top-actions {
    display: flex;
    align-items: center;
    gap: 6px;
}

.service-hub-top-actions summary,
.service-hub-top-icon {
    position: relative;
    display: grid;
    width: 40px;
    height: 40px;
    padding: 0;
    place-items: center;
    border: 1px solid var(--studio-line);
    border-radius: 7px;
    background: #fff;
    color: var(--studio-ink);
    cursor: pointer;
}

.service-hub-top-actions summary {
    list-style: none;
}

.service-hub-top-actions summary::-webkit-details-marker {
    display: none;
}

.service-hub-notification-menu {
    position: relative;
}

.service-hub-unread-badge {
    position: absolute;
    top: -5px;
    right: -5px;
    display: grid;
    min-width: 18px;
    height: 18px;
    padding: 0 4px;
    place-items: center;
    border: 2px solid #fff;
    border-radius: 9px;
    background: #d64045;
    color: #fff;
    font-size: 10px;
    font-weight: 800;
}

.service-hub-notification-popover {
    position: absolute;
    z-index: 80;
    top: 48px;
    right: auto;
    left: 0;
    display: grid;
    width: min(360px, calc(100vw - 32px));
    max-height: 420px;
    overflow-y: auto;
    padding: 10px;
    border: 1px solid var(--studio-line);
    border-radius: 8px;
    background: #fff;
    box-shadow: 0 14px 36px rgba(24, 38, 59, 0.18);
}

.service-hub-notification-popover > strong,
.service-hub-notification-popover > p {
    padding: 9px 10px;
}

.service-hub-notification-popover > a {
    display: grid;
    gap: 3px;
    padding: 10px;
    border-top: 1px solid var(--studio-line);
    color: var(--studio-ink);
}

.service-hub-notification-popover > a:hover {
    background: #f4f7fb;
}

.service-hub-notification-popover small {
    color: var(--studio-muted);
    font-size: 11px;
}

.service-hub-notification-popover .service-hub-notification-all {
    color: #205fd7;
    font-weight: 750;
}

.service-hub-section-heading {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 18px;
    margin-bottom: 18px;
}

.service-hub-section-heading h2,
.service-hub-card h3 {
    margin: 0;
}

.service-hub-section-heading .eyebrow {
    margin: 0 0 4px;
}

.service-hub-card-grid {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 14px;
}

.service-hub-card {
    display: flex;
    min-width: 0;
    min-height: 236px;
    flex-direction: column;
    padding: 18px;
    border: 1px solid var(--studio-line);
    border-radius: 8px;
    background: #fff;
}

.service-hub-card-heading {
    display: grid;
    grid-template-columns: 46px minmax(0, 1fr);
    gap: 12px;
    align-items: start;
}

.service-hub-icon-wrap,
.service-hub-default-icon {
    display: grid;
    width: 46px;
    height: 46px;
    place-items: center;
    border-radius: 8px;
    background: #e9f0fb;
    color: #205fd7;
    font-size: 18px;
    font-weight: 800;
}

.service-hub-icon-wrap {
    position: relative;
}

.service-hub-icon-wrap img {
    position: absolute;
    inset: 0;
    width: 46px;
    height: 46px;
    border-radius: 8px;
    background: #e9f0fb;
    object-fit: contain;
}

.service-hub-card-heading h3 {
    margin-bottom: 7px;
    font-size: 17px;
}

.service-hub-card > p {
    color: var(--studio-muted);
    font-size: 14px;
}

.service-hub-card .actions {
    margin-top: auto;
}

.service-hub-card .button.disabled,
.service-hub-section-heading .button[aria-disabled="true"] {
    pointer-events: none;
    opacity: 0.55;
}

.service-hub-card-meta {
    font-size: 12px !important;
}

.service-hub-summary-list {
    display: grid;
    gap: 0;
}

.service-hub-summary-list > div {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 16px;
    padding: 12px 0;
    border-top: 1px solid var(--studio-line);
}

.service-hub-summary-list > div:first-child {
    border-top: 0;
}

.service-hub-summary-list span {
    color: var(--studio-muted);
    text-align: right;
}

.service-hub-entitlement-workspace {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 18px;
}

.service-hub-entitlement-workspace > div {
    display: grid;
    gap: 4px;
}

.service-hub-entitlement-workspace span,
.service-hub-entitlement-workspace small {
    color: var(--studio-muted);
}

.service-hub-entitlement-counts {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    margin: 20px 0 0;
    border-top: 1px solid var(--studio-line);
}

.service-hub-entitlement-counts > div {
    padding: 18px 12px 0 0;
}

.service-hub-entitlement-counts dt {
    color: var(--studio-muted);
    font-size: 13px;
}

.service-hub-entitlement-counts dd {
    margin: 5px 0 0;
    font-size: 22px;
    font-weight: 800;
}

.service-hub-entitlement-list > article {
    display: grid;
    grid-template-columns: minmax(0, 1fr) auto;
    gap: 24px;
    align-items: center;
    padding: 20px 0;
    border-top: 1px solid var(--studio-line);
}

.service-hub-entitlement-list > article:first-child {
    padding-top: 0;
    border-top: 0;
}

.service-hub-entitlement-list > article:last-child {
    padding-bottom: 0;
}

.service-hub-entitlement-main {
    display: grid;
    grid-template-columns: minmax(220px, 0.7fr) minmax(260px, 1fr);
    gap: 24px;
    min-width: 0;
}

.service-hub-entitlement-title {
    display: grid;
    grid-template-columns: 46px minmax(0, 1fr);
    gap: 12px;
    align-items: start;
}

.service-hub-entitlement-title h3 {
    margin: 0 0 7px;
    font-size: 17px;
}

.service-hub-entitlement-meta {
    display: grid;
    gap: 9px;
    margin: 0;
}

.service-hub-entitlement-meta > div {
    display: grid;
    grid-template-columns: 74px minmax(0, 1fr);
    gap: 12px;
}

.service-hub-entitlement-meta dt {
    color: var(--studio-muted);
}

.service-hub-entitlement-meta dd {
    min-width: 0;
    margin: 0;
    overflow-wrap: anywhere;
}

.service-hub-entitlement-actions {
    justify-content: flex-end;
    margin: 0;
}

.service-hub-entitlement-empty {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 18px;
}

.service-hub-tabs {
    display: flex;
    gap: 6px;
    margin: 0 32px 18px;
    overflow-x: auto;
}

.service-hub-tabs a,
.service-hub-tabs span {
    padding: 9px 12px;
    border: 1px solid var(--studio-line);
    border-radius: 7px;
    background: #fff;
    color: var(--studio-ink);
    font-size: 13px;
    font-weight: 700;
    white-space: nowrap;
}

.service-hub-tabs a.active {
    border-color: #2a65e8;
    background: #2a65e8;
    color: #fff;
}

.service-hub-tabs-compact {
    width: fit-content;
}

.service-hub-app-list > article {
    display: grid;
    grid-template-columns: minmax(0, 1fr) auto;
    gap: 24px;
    align-items: center;
    padding: 20px 0;
    border-top: 1px solid var(--studio-line);
}

.service-hub-app-list > article:first-child {
    padding-top: 0;
    border-top: 0;
}

.service-hub-app-list > article:last-child {
    padding-bottom: 0;
}

.service-hub-app-main {
    min-width: 0;
}

.service-hub-app-main > p {
    color: var(--studio-muted);
}

.service-hub-app-meta {
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: 12px;
    margin: 16px 0 0;
}

.service-hub-app-meta > div {
    min-width: 0;
    padding: 12px;
    border: 1px solid var(--studio-line);
    border-radius: 7px;
}

.service-hub-app-meta dt {
    color: var(--studio-muted);
    font-size: 12px;
}

.service-hub-app-meta dd {
    margin: 5px 0 0;
    overflow-wrap: anywhere;
    font-weight: 700;
}

.service-hub-app-actions {
    justify-content: flex-end;
    max-width: 180px;
    margin: 0;
}

.service-hub-info-grid {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 18px;
    margin: 0 32px 32px;
}

.service-hub-info-grid > .panel {
    margin: 0;
}

.service-hub-info-grid .actions {
    margin-top: 18px;
}

.service-hub-info-wide {
    grid-column: 1 / -1;
}

.service-hub-faq-list details,
.service-hub-guide-list > article {
    border-top: 1px solid var(--studio-line);
}

.service-hub-faq-list details:first-child,
.service-hub-guide-list > article:first-child {
    border-top: 0;
}

.service-hub-faq-list summary {
    display: grid;
    grid-template-columns: minmax(0, 1fr) auto;
    gap: 18px;
    align-items: center;
    padding: 18px 0;
    cursor: pointer;
    font-weight: 700;
}

.service-hub-faq-list summary small {
    color: var(--studio-muted);
    font-size: 12px;
    font-weight: 500;
    white-space: nowrap;
}

.service-hub-faq-answer {
    padding: 0 0 20px;
    color: var(--studio-muted);
    line-height: 1.7;
}

.service-hub-guide-list > article {
    display: grid;
    grid-template-columns: minmax(0, 1fr) auto;
    gap: 24px;
    align-items: center;
    padding: 18px 0;
}

.service-hub-guide-list h3,
.service-hub-guide-list p {
    margin: 0;
}

.service-hub-guide-list p {
    margin-top: 6px;
    color: var(--studio-muted);
}

.service-hub-support-empty {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 18px;
}

.service-hub-tabs span {
    color: var(--studio-muted);
}

.service-hub-mobile-nav {
    display: none;
}

@media (max-width: 1100px) {
    .service-hub-card-grid {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }

    .service-hub-entitlement-list > article,
    .service-hub-entitlement-main {
        grid-template-columns: 1fr;
    }

    .service-hub-entitlement-actions {
        justify-content: flex-start;
    }

    .service-hub-app-list > article {
        grid-template-columns: 1fr;
    }

    .service-hub-app-actions {
        justify-content: flex-start;
        max-width: none;
    }

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

@media (max-width: 900px) {
    .service-hub-enabled .studio-sidebar,
    .service-hub-enabled .studio-drawer-open {
        display: none;
    }

    .service-hub-enabled .studio-app-content {
        padding-bottom: 96px;
    }

    .service-hub-enabled .studio-topbar-brand {
        display: inline-flex;
    }

    .service-hub-mobile-workspace {
        display: block;
    }

    .service-hub-notification-popover {
        position: fixed;
        top: 72px;
        right: max(16px, env(safe-area-inset-right));
        left: max(16px, env(safe-area-inset-left));
        width: auto;
        max-height: min(420px, calc(100dvh - 168px));
    }

    .service-hub-mobile-nav {
        position: fixed;
        z-index: 70;
        right: 0;
        bottom: 0;
        left: 0;
        display: grid;
        grid-template-columns: repeat(4, minmax(0, 1fr));
        padding: 6px max(8px, env(safe-area-inset-right)) max(6px, env(safe-area-inset-bottom)) max(8px, env(safe-area-inset-left));
        border-top: 1px solid var(--studio-line);
        background: rgba(255, 255, 255, 0.98);
        box-shadow: 0 -8px 24px rgba(25, 40, 61, 0.08);
    }

    .service-hub-mobile-nav a {
        display: grid;
        min-width: 0;
        min-height: 54px;
        place-items: center;
        align-content: center;
        gap: 3px;
        border-radius: 7px;
        color: #647186;
    }

    .service-hub-mobile-nav a.active {
        background: #eaf1ff;
        color: #205fd7;
    }

    .service-hub-mobile-nav strong {
        font-size: 11px;
    }

    .service-hub-mobile-nav .admin-navigation-icon {
        width: 21px;
        height: 21px;
    }

    .service-hub-preview-banner,
    .service-hub-tabs {
        margin-right: 20px;
        margin-left: 20px;
    }

    .service-hub-info-grid {
        margin-right: 20px;
        margin-left: 20px;
    }
}

@media (max-width: 640px) {
    .service-hub-card-grid {
        grid-template-columns: 1fr;
    }

    .service-hub-card {
        min-height: 0;
    }

    .service-hub-info-grid,
    .service-hub-app-meta {
        grid-template-columns: 1fr;
    }

    .service-hub-info-grid {
        margin-right: 16px;
        margin-left: 16px;
    }

    .service-hub-info-wide {
        grid-column: auto;
    }

    .service-hub-section-heading,
    .service-hub-summary-list > div {
        align-items: flex-start;
        flex-direction: column;
    }

    .service-hub-summary-list span {
        text-align: left;
    }

    .service-hub-entitlement-workspace,
    .service-hub-entitlement-empty,
    .service-hub-support-empty {
        align-items: flex-start;
        flex-direction: column;
    }

    .service-hub-faq-list summary,
    .service-hub-guide-list > article {
        grid-template-columns: 1fr;
        gap: 8px;
    }

    .service-hub-faq-list summary small {
        white-space: normal;
    }

    .service-hub-entitlement-counts {
        grid-template-columns: 1fr;
    }

    .service-hub-entitlement-counts > div {
        display: flex;
        align-items: baseline;
        justify-content: space-between;
        padding: 12px 0;
        border-bottom: 1px solid var(--studio-line);
    }

    .service-hub-entitlement-counts > div:last-child {
        border-bottom: 0;
    }

    .service-hub-entitlement-counts dd {
        margin: 0;
        font-size: 18px;
    }

    .service-hub-entitlement-meta > div {
        grid-template-columns: 1fr;
        gap: 3px;
    }

    .service-hub-preview-banner,
    .service-hub-tabs {
        margin-right: 16px;
        margin-left: 16px;
    }

    .service-hub-tabs-compact {
        width: auto;
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }

    .service-hub-tabs-compact a {
        grid-column: auto;
    }

    .service-hub-tabs {
        display: grid;
        grid-template-columns: repeat(6, minmax(0, 1fr));
        overflow: visible;
    }

    .service-hub-tabs a,
    .service-hub-tabs span {
        display: flex;
        grid-column: span 2;
        align-items: center;
        justify-content: center;
        min-width: 0;
        padding-right: 6px;
        padding-left: 6px;
        text-align: center;
        white-space: normal;
    }

    .service-hub-tabs > :nth-child(n + 4) {
        grid-column: span 3;
    }
}