:root {
    --joyns-primary: #00a979;
    --joyns-primary-hover: #008c65;
    --joyns-primary-soft: #e6f7f2;
    --joyns-secondary: #072b3a;
    --joyns-accent: #00a979;
    --joyns-success: #15803d;
    --joyns-warning: #9a6700;
    --joyns-danger: #b42318;
    --joyns-info: #176b87;
    --joyns-status-success: #116b4d;
    --joyns-status-success-bg: #e7f5ee;
    --joyns-status-warning: #805600;
    --joyns-status-warning-bg: #fff4d6;
    --joyns-status-danger: #a32a22;
    --joyns-status-danger-bg: #fcebe8;
    --joyns-status-info: #145f78;
    --joyns-status-info-bg: #e8f3f7;
    --joyns-bg: #f6f8f8;
    --joyns-surface: #ffffff;
    --joyns-border: #d8e1e3;
    --joyns-text: #072b3a;
    --joyns-text-muted: #52656d;
    --joyns-focus: #00a979;
    --joyns-sidebar-width: 17rem;
    --tblr-primary: #00a979;
    --tblr-primary-rgb: 0, 169, 121;
    --tblr-body-color: #072b3a;
    --tblr-body-bg: #f6f8f8;
    --tblr-border-color: #d8e1e3;
}

@media (prefers-color-scheme: dark) {
    :root {
        --joyns-bg: #061e29;
        --joyns-surface: #0b3544;
        --joyns-border: #31515d;
        --joyns-text: #f5fbf9;
        --joyns-text-muted: #b8c8cd;
        --joyns-status-success: #8cdbb6;
        --joyns-status-success-bg: #123f37;
        --joyns-status-warning: #f3cc73;
        --joyns-status-warning-bg: #493a1c;
        --joyns-status-danger: #ffaaa1;
        --joyns-status-danger-bg: #4a292b;
        --joyns-status-info: #a5d8ea;
        --joyns-status-info-bg: #153d4b;
        --tblr-body-color: #f5fbf9;
        --tblr-body-bg: #061e29;
        --tblr-card-bg: #0b3544;
        --tblr-border-color: #31515d;
    }
}

html { min-width: 20rem; }

.joyns-body {
    margin: 0;
    background: var(--joyns-bg);
    color: var(--joyns-text);
}

.joyns-skip-link {
    position: fixed;
    z-index: 3000;
    top: .5rem;
    left: .5rem;
    padding: .75rem 1rem;
    border-radius: .5rem;
    background: var(--joyns-surface);
    color: var(--joyns-secondary);
    transform: translateY(-150%);
}

.joyns-skip-link:focus { transform: translateY(0); }

:focus-visible {
    outline: .2rem solid var(--joyns-focus) !important;
    outline-offset: .15rem;
    box-shadow: 0 0 0 .15rem var(--joyns-surface);
}

.btn-primary {
    --tblr-btn-bg: var(--joyns-primary);
    --tblr-btn-border-color: var(--joyns-primary);
    --tblr-btn-hover-bg: var(--joyns-secondary);
    --tblr-btn-hover-border-color: var(--joyns-secondary);
    --tblr-btn-hover-color: #fff;
    --tblr-btn-color: var(--joyns-secondary);
    min-height: 2.75rem;
    font-weight: 700;
}

.joyns-auth-shell {
    min-height: 100vh;
    display: grid;
    grid-template-columns: minmax(18rem, 1fr) minmax(20rem, 34rem);
}

.joyns-auth-brand {
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    padding: clamp(2rem, 8vw, 7rem);
    background: var(--joyns-secondary);
    color: #fff;
    text-align: center;
}

.joyns-auth-brand img {
    width: min(100%, 32rem);
    height: auto;
    padding: 1.25rem;
    border-radius: 1rem;
    background: #fff;
}

.joyns-auth-brand p { margin-top: 1.5rem; font-size: 1.05rem; }

.joyns-login-brand {
    min-width: 0;
    gap: clamp(1.5rem, 4vw, 3rem);
    padding: clamp(1rem, 3vw, 3rem);
    background: #fff;
}

.joyns-auth-brand.joyns-login-brand > img {
    display: block;
    width: min(100%, 9rem);
    height: auto;
    padding: 0;
    border-radius: 0;
}

.joyns-auth-brand.joyns-login-brand > .joyns-login-artwork {
    width: 100%;
    max-width: 76rem;
    object-fit: contain;
}

.joyns-login-shell .joyns-auth-main { min-width: 0; }
.joyns-login-shell .joyns-auth-card { max-width: 30rem; }

.joyns-auth-main {
    display: flex;
    align-items: center;
    padding: clamp(1rem, 5vw, 4rem);
}

.joyns-auth-card {
    width: 100%;
    border-color: var(--joyns-border);
    border-radius: 1rem;
    box-shadow: 0 .75rem 2rem rgb(7 43 58 / 10%);
}

.joyns-auth-card .card-body { padding: clamp(1.5rem, 5vw, 3rem); }
.joyns-auth-card h1 { color: var(--joyns-secondary); font-size: clamp(1.6rem, 3vw, 2.1rem); }
.joyns-context-list { display: grid; gap: .75rem; }
.joyns-context-option { display: flex; align-items: center; justify-content: space-between; gap: 1rem; padding: 1rem; border: 1px solid var(--joyns-border); border-radius: .75rem; }
.joyns-context-option div { display: grid; gap: .2rem; min-width: 0; }
.joyns-context-option span { color: var(--joyns-text-muted); font-size: .85rem; }
.joyns-auth-support { margin: 1.25rem 0 0; text-align: center; }
.joyns-otp-input { letter-spacing: .35em; font-size: 1.35rem; font-weight: 700; }

.joyns-admin-shell { min-height: 100vh; display: grid; grid-template-columns: var(--joyns-sidebar-width) minmax(0, 1fr); }

.joyns-sidebar {
    position: sticky;
    top: 0;
    z-index: 1030;
    height: 100vh;
    display: flex;
    flex-direction: column;
    padding: 1rem;
    background: var(--joyns-secondary);
    color: #fff;
}

.joyns-sidebar-brand { padding: .5rem .5rem 1.5rem; }
.joyns-sidebar-brand img { width: 100%; height: auto; padding: .45rem; border-radius: .5rem; background: #fff; }
.joyns-nav-label { padding: .5rem .75rem; color: #b8c8cd; font-size: .75rem; font-weight: 700; letter-spacing: .08em; text-transform: uppercase; }

.joyns-nav-link {
    display: flex;
    align-items: center;
    min-height: 2.75rem;
    gap: .75rem;
    margin-bottom: .25rem;
    padding: .65rem .75rem;
    border-radius: .55rem;
    color: #e7f0f2;
    text-decoration: none;
    font-weight: 600;
}

.joyns-nav-link:hover { background: rgb(255 255 255 / 9%); color: #fff; }
.joyns-nav-link.is-active { background: var(--joyns-primary-soft); color: var(--joyns-secondary); box-shadow: inset .25rem 0 var(--joyns-primary); }
.joyns-icon {
    display: inline-block;
    width: 1.25rem;
    height: 1.25rem;
    flex: 0 0 1.25rem;
    background-color: currentColor;
    -webkit-mask: var(--joyns-icon) center / contain no-repeat;
    mask: var(--joyns-icon) center / contain no-repeat;
}
.joyns-icon-home { --joyns-icon: url('/icons/home.svg'); }
.joyns-icon-building { --joyns-icon: url('/icons/building.svg'); }
.joyns-icon-users { --joyns-icon: url('/icons/users.svg'); }
.joyns-icon-mail { --joyns-icon: url('/icons/mail.svg'); }
.joyns-icon-logout { --joyns-icon: url('/icons/logout.svg'); }
.joyns-icon-menu { --joyns-icon: url('/icons/menu-2.svg'); }
.joyns-signout-link { margin-top: auto; }
.joyns-page-column { min-width: 0; }

.joyns-topbar {
    min-height: 4rem;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 1rem;
    padding: .75rem clamp(1rem, 4vw, 2.5rem);
    border-bottom: 1px solid var(--joyns-border);
    background: var(--joyns-surface);
}
.joyns-topbar-actions { display: flex; align-items: center; justify-content: flex-end; gap: 1rem; min-width: 0; }
.joyns-welcome-user { color: var(--joyns-text); font-size: .875rem; font-weight: 700; white-space: nowrap; }

.joyns-page-main { width: min(100%, 90rem); margin: 0 auto; padding: clamp(1rem, 4vw, 2.5rem); }
.joyns-page-heading { display: flex; align-items: flex-start; justify-content: space-between; gap: 1rem; margin-bottom: 1.5rem; }
.joyns-page-heading h1 { margin: 0; color: var(--joyns-text); font-size: clamp(1.65rem, 3vw, 2.25rem); line-height: 1.15; }
.joyns-page-heading p { margin: .35rem 0 0; color: var(--joyns-text-muted); }
.joyns-page-heading .joyns-eyebrow { margin-bottom: .4rem; }
.joyns-eyebrow { color: var(--joyns-primary) !important; font-size: .75rem; font-weight: 800; letter-spacing: .08em; text-transform: uppercase; }
.joyns-metric-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(12rem, 1fr)); gap: 1rem; margin-bottom: 1.5rem; }
.joyns-action-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(15rem, 1fr)); gap: 1rem; margin-bottom: 1.5rem; }
.joyns-action-card { display: grid; grid-template-columns: auto 1fr; gap: .25rem .75rem; padding: 1.25rem; border-color: var(--joyns-border); color: var(--joyns-text); text-decoration: none; }
.joyns-action-card .joyns-icon { grid-row: 1 / 3; color: var(--joyns-primary); }
.joyns-action-card small { color: var(--joyns-text-muted); }
.joyns-action-card:hover { border-color: var(--joyns-primary); color: var(--joyns-text); }
.joyns-metric-card { min-height: 9rem; padding: 1.25rem; border-color: var(--joyns-border); color: var(--joyns-text); text-decoration: none; }
.joyns-metric-card:hover { border-color: var(--joyns-primary); color: var(--joyns-text); }
.joyns-metric-card span { font-weight: 700; }
.joyns-metric-card strong { display: block; margin: .45rem 0; color: var(--joyns-primary); font-size: 2rem; }
.joyns-metric-card small { color: var(--joyns-text-muted); }
.joyns-summary-card, .joyns-table-card, .joyns-detail-grid .card { border-color: var(--joyns-border); border-radius: .85rem; box-shadow: 0 .2rem .75rem rgb(7 43 58 / 4%); }
.joyns-page-main > .card, .joyns-page-main > .joyns-detail-grid, .joyns-page-main > .joyns-action-grid, .joyns-page-main > .joyns-metric-grid { margin-top: 1.25rem; }
.joyns-section-heading { display: flex; align-items: flex-start; justify-content: space-between; gap: 1rem; }
.joyns-section-heading h2, .joyns-table-card .card-body h2 { margin-bottom: .25rem; }
.joyns-table-card .card-body > :last-child { margin-bottom: 0; }
.joyns-summary-list, .joyns-detail-list { margin: 0; }
.joyns-summary-list { display: grid; grid-template-columns: repeat(auto-fit, minmax(12rem, 1fr)); gap: 1rem; }
.joyns-summary-list div, .joyns-detail-list div { display: grid; gap: .25rem; }
.joyns-list-item { display: flex; align-items: center; justify-content: space-between; gap: .75rem; padding: .7rem 0; border-bottom: 1px solid var(--joyns-border); }
.joyns-list-item:last-child { border-bottom: 0; }
.joyns-list-item span { color: var(--joyns-text-muted); }
.joyns-summary-list dt, .joyns-detail-list dt { color: var(--joyns-text-muted); font-size: .8rem; font-weight: 700; text-transform: uppercase; }
.joyns-summary-list dd, .joyns-detail-list dd { margin: 0; font-weight: 700; overflow-wrap: anywhere; }
.joyns-filter-bar { display: flex; flex-wrap: wrap; align-items: end; gap: .75rem; margin-bottom: 1rem; padding: 1rem; border-color: var(--joyns-border); }
.joyns-filter-bar label { width: 100%; font-weight: 700; }
.joyns-filter-bar select { min-width: 14rem; min-height: 2.5rem; padding: .4rem .75rem; border: 1px solid var(--joyns-border); border-radius: .4rem; background: var(--joyns-surface); color: var(--joyns-text); }
.joyns-table-card caption { padding: 1rem; color: var(--joyns-text); font-weight: 700; caption-side: top; }
.joyns-status { --joyns-status-color: var(--joyns-text-muted); --joyns-status-background: var(--joyns-bg); display: inline-flex; align-items: center; gap: .4rem; padding: .3rem .65rem; border: 1px solid var(--joyns-border); border-radius: 999px; background: var(--joyns-status-background); color: var(--joyns-status-color); font-size: .78rem; font-weight: 700; line-height: 1.2; white-space: nowrap; }
.joyns-status::before { flex: 0 0 .45rem; width: .45rem; height: .45rem; border-radius: 50%; background: var(--joyns-status-color); content: ""; }
.joyns-status[data-status="Activated"], .joyns-status[data-status="Approved"], .joyns-status[data-status="Active"], .joyns-status[data-status="Completed"], .joyns-status[data-status="Published"], .joyns-status[data-status="Consumed"], .joyns-status[data-status="Verified"], .joyns-status[data-status="Eligible"], .joyns-status[data-status="Enabled"], .joyns-status[data-status="OperationallyEnabled"] { --joyns-status-color: var(--joyns-status-success); --joyns-status-background: var(--joyns-status-success-bg); border-color: var(--joyns-status-success); }
.joyns-status[data-status="Suspended"], .joyns-status[data-status="Rejected"], .joyns-status[data-status="Failed"], .joyns-status[data-status="Expired"], .joyns-status[data-status="Revoked"], .joyns-status[data-status="Disabled"], .joyns-status[data-status="Denied"], .joyns-status[data-status="Cancelled"], .joyns-status[data-status="Canceled"] { --joyns-status-color: var(--joyns-status-danger); --joyns-status-background: var(--joyns-status-danger-bg); border-color: var(--joyns-status-danger); }
.joyns-status[data-status="Submitted"], .joyns-status[data-status="UnderReview"], .joyns-status[data-status="CommercialSetup"], .joyns-status[data-status="Pending"], .joyns-status[data-status="PendingActivation"], .joyns-status[data-status="AwaitingVerification"], .joyns-status[data-status="Resubmitted"], .joyns-status[data-status="InformationRequested"], .joyns-status[data-status="Scheduled"], .joyns-status[data-status="FailedRetryable"], .joyns-status[data-status="Processing"] { --joyns-status-color: var(--joyns-status-warning); --joyns-status-background: var(--joyns-status-warning-bg); border-color: var(--joyns-status-warning); }
.joyns-status[data-status="Draft"], .joyns-status[data-status="Preview"], .joyns-status[data-status="Available"], .joyns-status[data-status="Ready"] { --joyns-status-color: var(--joyns-status-info); --joyns-status-background: var(--joyns-status-info-bg); border-color: var(--joyns-status-info); }
.joyns-status-large { padding: .5rem .8rem; font-size: .9rem; }
.joyns-empty-state { margin: .75rem; padding: 1.5rem !important; border: 1px dashed var(--joyns-border); border-radius: .75rem; background: var(--joyns-bg); color: var(--joyns-text-muted); text-align: center; }
.joyns-detail-grid { display: grid; grid-template-columns: minmax(0, 2fr) minmax(17rem, 1fr); gap: 1.25rem; align-items: start; }
.joyns-detail-main { display: grid; gap: 1.25rem; }
.joyns-detail-list { display: grid; grid-template-columns: repeat(auto-fit, minmax(12rem, 1fr)); gap: 1rem; }
.joyns-detail-list.joyns-single-column { grid-template-columns: 1fr; }
.joyns-detail-actions { position: sticky; top: 5rem; }
.joyns-action-form { display: grid; gap: .4rem; padding: .85rem 0; border-top: 1px solid var(--joyns-border); }
.joyns-action-form label { color: var(--joyns-text-muted); font-size: .8rem; font-weight: 700; }
.joyns-action-form input { min-height: 2.4rem; padding: .4rem .6rem; border: 1px solid var(--joyns-border); border-radius: .4rem; background: var(--joyns-surface); color: var(--joyns-text); }
.joyns-action-form button { text-transform: capitalize; }
.joyns-timeline { margin: 0; padding: 0; list-style: none; }
.joyns-timeline li { position: relative; display: grid; gap: .2rem; padding: 0 0 1.1rem 1.5rem; }
.joyns-timeline li::before { position: absolute; top: .35rem; left: .25rem; width: .65rem; height: .65rem; border: 2px solid var(--joyns-border); border-radius: 50%; background: var(--joyns-surface); content: ""; }
.joyns-timeline li::after { position: absolute; top: 1rem; bottom: 0; left: .54rem; width: 1px; background: var(--joyns-border); content: ""; }
.joyns-timeline li:last-child::after { display: none; }
.joyns-timeline li.is-current::before { border-color: var(--joyns-primary); background: var(--joyns-primary); }
.joyns-timeline time, .joyns-timeline span { color: var(--joyns-text-muted); font-size: .82rem; }
.joyns-capability-list { display: grid; grid-template-columns: repeat(auto-fit, minmax(13rem, 1fr)); gap: .75rem; padding: 0; list-style: none; }
.joyns-capability-list li { display: grid; gap: .25rem; padding: .85rem; border: 1px solid var(--joyns-border); border-radius: .5rem; }
.joyns-capability-list small { color: var(--joyns-text-muted); }
.joyns-disclosure-card summary { cursor: pointer; padding: 1rem 1.25rem; font-weight: 700; }
.joyns-disclosure-card[open] summary { border-bottom: 1px solid var(--joyns-border); }
.joyns-form-grid { display: grid; grid-template-columns: minmax(10rem, .7fr) minmax(12rem, 1.3fr); gap: .85rem 1rem; align-items: center; }
.joyns-form-grid label { margin: 0; font-weight: 700; }
.joyns-form-grid label span { color: var(--joyns-text-muted); font-size: .8rem; font-weight: 400; }
.joyns-form-grid input, .joyns-form-grid select { width: 100%; min-height: 2.75rem; padding: .45rem .7rem; border: 1px solid var(--joyns-border); border-radius: .5rem; background: var(--joyns-surface); color: var(--joyns-text); }
.joyns-form-grid textarea { width: 100%; min-height: 7rem; padding: .6rem .7rem; border: 1px solid var(--joyns-border); border-radius: .5rem; background: var(--joyns-surface); color: var(--joyns-text); resize: vertical; }
.joyns-form-grid .form-text, .joyns-form-grid .joyns-form-hint, .joyns-form-grid > p { grid-column: 2; margin: -.4rem 0 0; color: var(--joyns-text-muted); font-size: .875rem; }
.joyns-form-fieldset { display: grid; grid-column: 1 / -1; grid-template-columns: minmax(10rem, .7fr) minmax(12rem, 1.3fr); gap: .85rem 1rem; align-items: center; margin: .5rem 0; padding: 1rem; border: 1px solid var(--joyns-border); border-radius: .65rem; }
.joyns-form-fieldset legend { float: none; width: auto; grid-column: 1 / -1; margin: 0; padding: 0 .35rem; color: var(--joyns-text); font-size: 1rem; font-weight: 700; }
.joyns-form-fieldset label { margin: 0; font-weight: 700; }
.joyns-form-fieldset input, .joyns-form-fieldset select, .joyns-form-fieldset textarea { width: 100%; min-height: 2.75rem; padding: .45rem .7rem; border: 1px solid var(--joyns-border); border-radius: .5rem; background: var(--joyns-surface); color: var(--joyns-text); }
.joyns-form-fieldset textarea { min-height: 7rem; resize: vertical; }
.joyns-form-grid button { grid-column: 2; justify-self: start; }
.joyns-fixed-value { grid-column: 2; display: flex; gap: .6rem; align-items: center; color: var(--joyns-text-muted); }
.joyns-inline-form { display: flex; flex-wrap: wrap; align-items: center; gap: .5rem; }
.joyns-inline-form select { min-width: 12rem; min-height: 2.5rem; }
.joyns-post-body { white-space: pre-wrap; overflow-wrap: anywhere; }
.joyns-inline-action summary { cursor: pointer; font-weight: 700; }
.joyns-inline-action form { display: grid; gap: .5rem; min-width: 14rem; padding-top: .75rem; }
.joyns-inline-action input, .joyns-invitation-result input { min-height: 2.5rem; padding: .4rem .65rem; border: 1px solid var(--joyns-border); border-radius: .4rem; background: var(--joyns-surface); color: var(--joyns-text); }
.joyns-invitation-result { margin-bottom: 1.25rem; border: 2px solid var(--joyns-primary); }
.joyns-invitation-result .card-body { display: grid; gap: .75rem; }
.joyns-qr { width: min(100%, 18rem); margin: 0; padding: 1rem; border-radius: .75rem; background: #fff; }
.joyns-qr svg { display: block; width: 100%; height: auto; }
.joyns-qr figcaption { margin-top: .5rem; font-size: .85rem; }
.joyns-invitation-link { display: flex; flex-wrap: wrap; gap: .5rem; }
.joyns-invitation-link input { flex: 1 1 20rem; min-width: 0; min-height: 2.75rem; padding: .45rem .7rem; border: 1px solid var(--joyns-border); border-radius: .5rem; background: var(--joyns-surface); color: var(--joyns-text); }
.joyns-menu-button { display: none; width: 2.75rem; height: 2.75rem; align-items: center; justify-content: center; cursor: pointer; }
.joyns-menu-button .joyns-icon { width: 1.5rem; height: 1.5rem; flex-basis: 1.5rem; }
.joyns-nav-backdrop { display: none; border: 0; }

@media (max-width: 62rem) {
    .joyns-auth-shell { grid-template-columns: 1fr; }
    .joyns-auth-brand { min-height: 12rem; padding: 2rem; }
    .joyns-auth-brand img { width: min(75vw, 23rem); }
    .joyns-auth-brand p { margin-bottom: 0; }
    .joyns-login-shell { align-content: center; }
    .joyns-auth-brand.joyns-login-brand { min-height: 0; padding: 1.5rem 1rem; }
    .joyns-login-brand .joyns-login-artwork { max-width: 46rem; }
    .joyns-auth-main { align-items: flex-start; justify-content: center; }
    .joyns-admin-shell { display: block; }
    .joyns-sidebar { position: fixed; left: 0; width: var(--joyns-sidebar-width); visibility: hidden; transform: translateX(-105%); transition: transform .18s ease, visibility .18s; }
    .joyns-menu-button { display: inline-flex; }
    .joyns-nav-backdrop { position: fixed; inset: 0; z-index: 1020; background: rgb(7 43 58 / 55%); }
    .is-nav-open .joyns-sidebar { visibility: visible; transform: translateX(0); }
    .is-nav-open .joyns-nav-backdrop { display: block; }
    .joyns-detail-grid { grid-template-columns: 1fr; }
    .joyns-detail-actions { position: static; }
}

@media (max-width: 42rem) {
    .joyns-page-heading { display: grid; }
    .joyns-page-heading .btn { width: 100%; }
    .joyns-responsive-table thead { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); }
    .joyns-responsive-table, .joyns-responsive-table tbody, .joyns-responsive-table tr, .joyns-responsive-table td, .joyns-responsive-table th { display: block; width: 100%; }
    .joyns-responsive-table tr { padding: 1rem; border-bottom: 1px solid var(--joyns-border); }
    .joyns-responsive-table td, .joyns-responsive-table th { display: grid; grid-template-columns: 7.5rem 1fr; gap: .75rem; padding: .4rem 0; border: 0; }
    .joyns-responsive-table [data-label]::before { color: var(--joyns-text-muted); content: attr(data-label); font-size: .75rem; font-weight: 700; text-transform: uppercase; }
    .joyns-form-grid { grid-template-columns: 1fr; }
    .joyns-form-grid button, .joyns-fixed-value { grid-column: 1; width: 100%; }
    .joyns-form-grid .form-text, .joyns-form-grid .joyns-form-hint, .joyns-form-grid > p { grid-column: 1; }
    .joyns-form-fieldset { grid-template-columns: 1fr; }
    .joyns-form-fieldset legend { grid-column: 1; }
}

@media (prefers-reduced-motion: reduce) {
    *, *::before, *::after { scroll-behavior: auto !important; transition-duration: .01ms !important; animation-duration: .01ms !important; }
}

.joyns-lifecycle { list-style: none; padding: 0; margin: 1rem 0; display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); gap: .75rem; }
.joyns-lifecycle li { border: 1px solid var(--joyns-border); border-radius: .75rem; padding: 1rem; background: var(--joyns-surface-subtle); }
.joyns-lifecycle li.is-current { border-color: var(--joyns-primary); box-shadow: inset 0 0 0 1px var(--joyns-primary); }
.joyns-lifecycle li span { display: block; margin-top: .4rem; color: var(--joyns-text-muted); font-size: .85rem; }
.joyns-lifecycle-wide { grid-template-columns: repeat(4, minmax(0, 1fr)); }
.joyns-product-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 1rem; }
.joyns-product-grid article { border: 1px solid var(--joyns-border); border-radius: 1rem; padding: 1.25rem; background: var(--joyns-surface-subtle); }
.joyns-product-grid h3 { margin: .75rem 0 .4rem; }
.joyns-availability { display: inline-flex; border-radius: 999px; padding: .25rem .6rem; font-size: .75rem; font-weight: 800; text-transform: uppercase; letter-spacing: .04em; }
.joyns-availability.is-live { background: #dff8ef; color: #006b4d; }
.joyns-availability.is-next, .joyns-availability.is-preview, .joyns-availability.is-prepared { background: #e8eef1; color: var(--joyns-navy); }
.joyns-availability.is-off { background: #f4e9e7; color: #812c20; }
.joyns-success-state { border-left: .25rem solid var(--joyns-primary); padding: 1rem; background: #e9f8f3; }
.joyns-welcome-hero { margin-bottom: 1.25rem; border-left: .3rem solid var(--joyns-primary); background: linear-gradient(135deg, var(--joyns-surface), #e9f8f3); }
.joyns-setup-steps { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 1rem; margin: 1.25rem 0 0; padding: 0; list-style: none; }
.joyns-setup-steps li { display: grid; grid-template-columns: 2rem minmax(0,1fr); gap: .75rem; padding: 1rem; border: 1px solid var(--joyns-border); border-radius: .75rem; }
.joyns-setup-steps li > span { display: inline-flex; width: 2rem; height: 2rem; align-items: center; justify-content: center; border-radius: 50%; background: var(--joyns-bg); font-weight: 800; }
.joyns-setup-steps li.is-complete { border-color: var(--joyns-primary); }
.joyns-setup-steps li.is-complete > span { background: var(--joyns-primary); color: #fff; }
.joyns-setup-steps p { margin: .25rem 0; color: var(--joyns-text-muted); }

@media (max-width: 64rem) { .joyns-lifecycle, .joyns-lifecycle-wide, .joyns-product-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 36rem) { .joyns-lifecycle, .joyns-lifecycle-wide, .joyns-product-grid, .joyns-setup-steps { grid-template-columns: 1fr; } .joyns-context-option { align-items: stretch; flex-direction: column; } .joyns-topbar-actions { gap: .5rem; } .joyns-welcome-user { font-size: .75rem; } }