.hub-page {
    display: grid;
    grid-column: 1 / -1;
    gap: var(--space-24);
    width: 100%;
    padding-inline: var(--space-16);
    margin-block-end: var(--space-40);
}

.hub-page__header,
.hub-detail__header {
    display: grid;
    gap: var(--space-16);
    padding-block-end: var(--space-20);
    border-bottom: var(--border-width-hairline) solid var(--color-border-medium);
}

.hub-page__header-copy {
    display: grid;
    gap: var(--space-10);
    max-width: 680px;
}

.hub-page__header {
    grid-template-columns: minmax(0, 1fr) auto;
    align-items: center;
}

.hub-page__create-button {
    justify-self: end;
    white-space: nowrap;
}

.hub-page h1,
.hub-detail h1 {
    margin: 0;
    color: var(--color-text-strong);
    font-size: clamp(var(--text-2xl), 3vw, var(--text-4xl));
    font-weight: var(--font-weight-bold);
    line-height: var(--line-height-title);
}

.hub-page h2,
.hub-page h3 {
    margin: 0;
    color: var(--color-text-strong);
    line-height: var(--leading-compact);
}

.hub-page__header-copy p,
.hub-card p,
.hub-create__state,
.hub-empty p {
    margin: 0;
    color: var(--color-text-muted);
    line-height: var(--leading-relaxed);
}

.hub-create,
.hub-card,
.hub-empty {
    border: var(--border-width-hairline) solid var(--color-card-border);
    border-radius: var(--radius-corner-m);
    background: var(--color-card-bg);
}

.hub-detail-main {
    display: grid;
    gap: var(--space-28);
    min-width: 0;
}

.hub-detail-main > .hub-page {
    grid-column: auto;
    padding-inline: 0;
    margin-block-end: 0;
}

.hub-detail-main > .content-comments {
    min-width: 0;
    margin-top: 0;
}

.hub-opening {
    display: grid;
    gap: var(--space-16);
    min-width: 0;
    padding: var(--space-18);
    border: var(--border-width-hairline) solid var(--color-card-border);
    border-radius: var(--radius-corner-m);
    background: var(--color-card-bg);
}

.hub-opening__author {
    display: grid;
    grid-template-columns: 4rem minmax(0, 1fr);
    gap: var(--space-16);
    align-items: start;
    min-width: 0;
}

.hub-opening__avatar {
    display: block;
    width: 4rem;
    height: 4rem;
    border-radius: 50%;
    object-fit: cover;
}

.hub-opening__content {
    display: grid;
    gap: var(--space-16);
    min-width: 0;
}

.hub-opening__top {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: space-between;
    gap: var(--space-8) var(--space-16);
    min-height: 2rem;
}

.hub-opening__identity {
    display: flex;
    flex: 1 1 auto;
    flex-wrap: nowrap;
    align-items: center;
    gap: var(--space-8);
    min-width: 0;
    white-space: nowrap;
}

.hub-opening__username {
    display: block;
    flex: 0 1 auto;
    min-width: 0;
    overflow: hidden;
    color: var(--color-heading, var(--color-text-strong));
    font-weight: var(--font-weight-extrabold, 800);
    text-decoration: none;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.hub-opening__time {
    flex: 0 0 auto;
    color: var(--color-text);
    font-size: var(--text-xs);
    line-height: var(--leading-ui);
    white-space: nowrap;
}

.hub-opening__meta-actions {
    position: relative;
    display: flex;
    flex: 0 0 auto;
    align-items: center;
    gap: var(--space-8);
    max-width: 100%;
    min-width: 0;
}

.hub-opening__kebab {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 2.25rem;
    height: 2.25rem;
    padding: 0;
    border: 0.0625rem solid var(--comments-border, var(--color-border));
    border-radius: var(--radius-round);
    background: var(--color-bg-frosted-strong, var(--color-card-bg));
    color: var(--color-heading, var(--color-text-strong));
    cursor: pointer;
}

.hub-opening__kebab:hover,
.hub-opening__kebab:focus-visible,
.hub-opening__kebab[aria-expanded="true"] {
    border-color: var(--comments-border-strong, var(--color-border-medium));
    background: var(--color-control-hover-bg, var(--color-bg-chip));
    color: var(--color-text-strong);
}

.hub-opening__kebab .content-comments-kebab__icon {
    position: static;
    display: block;
    width: 1rem;
    height: 1rem;
    flex: 0 0 1rem;
    margin: 0;
    overflow: visible;
    fill: currentColor;
}

.hub-opening__menu {
    top: calc(100% + var(--space-6));
    right: 0;
    border-color: var(--color-dropdown-border, var(--color-border));
    background: var(--color-dropdown-bg, var(--color-card-bg));
}

.hub-opening__menu .u-menu__option {
    flex-direction: row;
    flex-wrap: nowrap;
    align-items: center;
    justify-content: flex-start;
    gap: var(--space-8);
    color: var(--color-text-strong);
    white-space: nowrap;
}

.hub-opening__menu .u-menu__option:hover,
.hub-opening__menu .u-menu__option:focus-visible {
    background: var(--color-control-hover-bg, var(--color-bg-chip));
    color: var(--color-text-strong);
}

.hub-opening .content-comments-crew-block {
    position: relative;
    flex: 0 0 auto;
}

.hub-opening .content-comments-crew {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    max-width: none;
    min-height: 1.375rem;
    padding: 0 var(--space-10);
    border-radius: var(--radius-round);
    background: var(--color-bg-warning-soft);
    color: var(--color-heading, var(--color-text-strong));
    font-size: var(--text-xs);
    font-weight: var(--font-weight-medium, 600);
    cursor: default;
}

.hub-opening__body {
    display: grid;
    gap: var(--space-10);
    color: var(--color-text);
    font-size: var(--text-base);
    line-height: var(--leading-reading);
}

.hub-opening__body[hidden],
.hub-detail__title-copy[hidden] {
    display: none;
}

.hub-opening__body p {
    margin: 0;
}

.hub-opening__edit {
    display: grid;
    gap: var(--space-14);
    min-width: 0;
}

.hub-opening__edit[hidden] {
    display: none;
}

.hub-opening__edit-actions {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: var(--space-10);
    justify-content: flex-start;
}

.hub-opening__edit-actions .button {
    min-width: 0;
    min-height: 2.75rem;
    padding: 0 var(--space-18);
    border-radius: var(--radius-corner);
    box-shadow: none;
    font-size: var(--text-base);
    font-weight: var(--font-weight-bold, 700);
    line-height: var(--leading-tight);
    white-space: nowrap;
}

.hub-opening__edit-actions .primary-button-100 {
    border-color: var(--color-brand-primary);
    background: var(--color-brand-primary);
    color: var(--color-text-strong);
    box-shadow: none;
}

.hub-opening__edit-actions .primary-button-100:hover,
.hub-opening__edit-actions .primary-button-100:focus-visible {
    border-color: var(--color-brand-secondary, var(--color-brand-primary));
    background: var(--color-brand-secondary, var(--color-brand-primary));
    color: var(--color-white, var(--color-text-strong));
}

.hub-opening__edit-actions .accent-button-200 {
    border-color: var(--color-bg-chip-hover);
    background: var(--color-bg-chip);
    color: var(--color-heading, var(--color-text-strong));
    box-shadow: none;
}

.hub-opening__edit-actions .accent-button-200:hover,
.hub-opening__edit-actions .accent-button-200:focus-visible {
    border-color: var(--color-bg-chip-hover);
    background: var(--color-bg-chip-hover);
}

.hub-create {
    display: grid;
    gap: var(--space-18);
    padding: var(--space-18);
}

.hub-create--state {
    padding: var(--space-16) var(--space-18);
}

.hub-create__heading,
.hub-list__heading {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: var(--space-12);
}

.hub-list__heading {
    flex-wrap: wrap;
}

.hub-list__sort {
    display: flex;
    flex-wrap: wrap;
    justify-content: flex-end;
    gap: var(--space-10);
}

.hub-list__sort-button {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-height: 3.125rem;
    padding: 0 var(--space-24);
    border: var(--border-width-hairline) solid var(--color-card-border);
    border-radius: var(--radius-round);
    appearance: none;
    background: var(--color-card-bg);
    color: var(--color-text-strong);
    cursor: pointer;
    font: inherit;
    font-weight: var(--font-weight-bold);
    line-height: var(--leading-none);
    text-align: center;
    text-decoration: none;
    white-space: nowrap;
    box-shadow: 0 0.75rem 1.75rem rgb(0 0 0 / 5%);
    transition: border-color .18s ease, background-color .18s ease, color .18s ease;
}

.hub-list__sort-button:hover,
.hub-list__sort-button:focus-visible,
.hub-list__sort-button.is-active {
    border-color: var(--color-brand-primary);
    color: var(--color-text-strong);
}

.hub-create__form {
    display: grid;
    gap: var(--space-14);
}

.hub-field {
    display: grid;
    gap: var(--space-8);
    color: var(--color-text);
    font-weight: var(--font-weight-semibold);
}

.hub-field input,
.hub-field textarea {
    width: 100%;
    min-width: 0;
    border: var(--border-width-hairline) solid var(--color-border);
    border-radius: var(--radius-corner);
    background: var(--color-bg-surface);
    color: var(--color-text);
    font: inherit;
    font-weight: var(--font-weight-regular);
}

.hub-field input {
    min-height: 2.75rem;
    padding: 0 var(--space-12);
}

.hub-field textarea {
    min-height: 9rem;
    padding: var(--space-12);
    resize: vertical;
}

.hub-field input.is-error,
.hub-field textarea.is-error,
.hub-field input[aria-invalid="true"],
.hub-field textarea[aria-invalid="true"] {
    border-color: var(--color-danger);
    box-shadow: 0 0 0 0.1875rem var(--color-danger-ring);
}

.hub-field input.is-error:focus,
.hub-field textarea.is-error:focus,
.hub-field input[aria-invalid="true"]:focus,
.hub-field textarea[aria-invalid="true"]:focus {
    border-color: var(--color-danger);
    box-shadow: 0 0 0 0.1875rem var(--color-danger-ring);
    outline: 0;
}

.hub-field__error {
    margin: calc(var(--space-4) * -1) 0 0;
    color: var(--color-danger);
    font-size: var(--text-sm);
    font-weight: var(--font-weight-semibold);
    line-height: var(--leading-ui);
}

.hub-ubb-toolbar {
    display: flex;
    flex-wrap: wrap;
    gap: var(--space-6);
    align-items: center;
}

.hub-ubb-toolbar__button {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 2.25rem;
    height: 2.25rem;
    border: var(--border-width-hairline) solid var(--color-border);
    border-radius: var(--radius-corner-s, var(--radius-corner));
    background: var(--color-bg-surface);
    color: var(--color-text);
    cursor: pointer;
}

.hub-ubb-toolbar__button:hover,
.hub-ubb-toolbar__button:focus-visible {
    border-color: var(--color-text);
    color: var(--color-text-strong);
}

.hub-ubb-toolbar__icon {
    width: 1rem;
    height: 1rem;
    fill: currentColor;
}

.hub-create__submit {
    width: 100%;
    justify-content: center;
}

.hub-modal {
    position: fixed;
    inset: 0;
    z-index: var(--z-index-modal, 1000);
    display: grid;
    place-items: center;
    padding: var(--space-20);
}

.hub-modal[hidden] {
    display: none;
}

.hub-modal__backdrop {
    position: absolute;
    inset: 0;
    background: rgba(12, 17, 24, 0.62);
}

.hub-modal__dialog {
    position: relative;
    z-index: 1;
    display: grid;
    gap: var(--space-18);
    width: min(920px, 100%);
    max-height: min(90vh, 760px);
    overflow: auto;
    padding: var(--space-20);
    border: var(--border-width-hairline) solid var(--color-card-border);
    border-radius: var(--radius-corner-m);
    background: var(--color-card-bg);
    box-shadow: 0 1.5rem 4rem rgba(12, 17, 24, 0.28);
}

.hub-modal__header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: var(--space-12);
}

.hub-modal__close {
    flex: 0 0 auto;
}

.hub-modal .hub-field textarea {
    min-height: 12rem;
}

body.hub-modal-is-open {
    overflow: hidden;
}

.hub-ubb-prompt {
    position: fixed;
    inset: 0;
    z-index: 2;
    display: grid;
    place-items: center;
    padding: var(--space-20);
}

.hub-ubb-prompt[hidden] {
    display: none;
}

.hub-ubb-prompt__backdrop {
    position: absolute;
    inset: 0;
    background: rgba(12, 17, 24, 0.36);
}

.hub-ubb-prompt__dialog {
    position: relative;
    z-index: 1;
    display: grid;
    gap: var(--space-16);
    width: min(480px, 100%);
    padding: var(--space-20);
    border: var(--border-width-hairline) solid var(--color-card-border);
    border-radius: var(--radius-corner-m);
    background: var(--color-card-bg);
    box-shadow: 0 1.25rem 3.5rem rgba(12, 17, 24, 0.26);
}

.hub-ubb-prompt__header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: var(--space-12);
}

.hub-ubb-prompt__header h3 {
    margin: 0;
    color: var(--color-text-strong);
    font-size: var(--text-xl);
    line-height: var(--leading-tight);
}

.hub-ubb-prompt__field {
    margin: 0;
}

.hub-ubb-prompt__actions {
    display: flex;
    flex-wrap: wrap;
    justify-content: flex-end;
    gap: var(--space-10);
}

.hub-ubb-prompt__submit,
.hub-ubb-prompt__cancel {
    min-height: 2.75rem;
    padding-inline: var(--space-18);
}

.content-comments .content-ubb-b,
.hub-ubb-content .content-ubb-b {
    font-weight: var(--font-weight-bold);
}

.content-comments .content-ubb-i,
.hub-ubb-content .content-ubb-i {
    font-style: italic;
}

.content-comments .content-ubb-url,
.hub-ubb-content .content-ubb-url {
    color: var(--color-link, var(--color-text-strong));
    font-weight: var(--font-weight-semibold);
}

.content-comments .content-ubb-quote,
.hub-ubb-content .content-ubb-quote {
    display: grid;
    grid-template-columns: auto minmax(0, 1fr);
    gap: var(--space-12);
    margin: var(--space-14) 0;
    padding: var(--space-14);
    border: var(--border-width-hairline) solid var(--color-border);
    border-radius: var(--radius-corner);
    background: var(--color-bg-surface);
}

.content-comments .content-ubb-quote__marker,
.hub-ubb-content .content-ubb-quote__marker {
    display: flex;
    align-items: flex-start;
    color: var(--color-text-muted);
}

.content-comments .content-ubb-quote__icon,
.hub-ubb-content .content-ubb-quote__icon {
    width: 1rem;
    height: 1rem;
    fill: currentColor;
}

.content-comments .content-ubb-quote__text,
.hub-ubb-content .content-ubb-quote__text {
    margin: 0;
}

.content-comments .content-ubb-quote__caption,
.hub-ubb-content .content-ubb-quote__caption {
    margin-block-start: var(--space-8);
    color: var(--color-text-muted);
    font-size: var(--text-sm);
    font-weight: var(--font-weight-semibold);
}

.content-comments .content-ubb-list ul,
.hub-ubb-content .content-ubb-list ul {
    display: grid;
    gap: var(--space-6);
    margin: var(--space-10) 0;
    padding: 0;
    list-style: none;
}

.content-comments .content-ubb-list li,
.hub-ubb-content .content-ubb-list li {
    display: grid;
    grid-template-columns: auto minmax(0, 1fr);
    gap: var(--space-8);
    align-items: start;
}

.content-comments .content-ubb-list__icon,
.hub-ubb-content .content-ubb-list__icon {
    width: 0.85rem;
    height: 0.85rem;
    margin-block-start: 0.28rem;
    fill: var(--color-text-muted);
}

.content-comments .content-ubb-spoiler,
.hub-ubb-content .content-ubb-spoiler {
    margin: var(--space-12) 0;
    padding: var(--space-12);
    border-radius: var(--radius-corner);
    background: var(--color-bg-chip);
}

.content-comments .content-ubb-spoiler-header,
.hub-ubb-content .content-ubb-spoiler-header {
    display: inline-flex;
    align-items: center;
    gap: var(--space-8);
    font-weight: var(--font-weight-bold);
}

.content-comments .content-ubb-spoiler-header__icon,
.hub-ubb-content .content-ubb-spoiler-header__icon {
    width: 1rem;
    height: 1rem;
    fill: currentColor;
}

.content-comments .content-ubb-spoiler-information,
.hub-ubb-content .content-ubb-spoiler-information {
    margin: var(--space-8) 0 0;
}

.hub-list {
    display: grid;
    gap: var(--space-16);
}

.hub-list__items {
    display: grid;
    gap: var(--space-12);
}

.hub-card {
    display: grid;
    grid-template-columns: 3.5rem minmax(0, 1fr);
    gap: var(--space-14);
    align-items: start;
    padding: var(--space-16);
}

.hub-card__avatar {
    color: inherit;
    text-decoration: none;
}

.hub-card__avatar {
    display: block;
    width: 3.5rem;
    height: 3.5rem;
    overflow: hidden;
    border-radius: 50%;
    background: var(--color-bg-chip);
}

.hub-card__avatar-image {
    display: block;
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.hub-card__body {
    display: grid;
    gap: var(--space-8);
    min-width: 0;
    color: inherit;
    text-decoration: none;
}

.hub-card__top,
.hub-card__meta,
.hub-detail__title-meta {
    display: flex;
    flex-wrap: wrap;
    gap: var(--space-8);
    align-items: center;
}

.hub-card__status,
.hub-card__top span,
.hub-detail__pill {
    display: inline-flex;
    align-items: center;
    min-height: var(--space-28);
    padding: var(--space-4) var(--space-10);
    border-radius: var(--radius-round);
    background: var(--color-bg-chip);
    color: var(--color-text-strong);
    font-size: var(--text-sm);
    line-height: var(--leading-none);
}

.hub-card:not(.hub-card--closed) .hub-card__status,
.hub-notice--success {
    background: var(--color-bg-success-soft);
    color: var(--color-success-strong);
}

.hub-card--closed .hub-card__status,
.hub-notice--error {
    background: var(--color-bg-danger-soft);
    color: var(--color-danger-strong);
}

.hub-card h3 {
    overflow-wrap: anywhere;
    font-size: var(--text-lg);
}

.hub-card__meta {
    color: var(--color-text-muted);
    font-size: var(--text-sm);
}

.hub-notice {
    padding: var(--space-12) var(--space-16);
    border-radius: var(--radius-corner);
    font-weight: var(--font-weight-semibold);
}

.hub-empty {
    display: grid;
    grid-template-columns: 1.75rem minmax(0, 1fr);
    gap: var(--space-14);
    align-items: start;
    padding: var(--space-18);
}

.hub-empty__icon {
    position: static;
    display: block;
    flex: 0 0 auto;
    width: 1.5rem;
    height: 1.5rem;
    overflow: visible;
    fill: var(--color-text-muted);
    justify-self: start;
    margin-block-start: 0.125rem;
}

.hub-detail__title-row {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: var(--space-16);
}

.hub-detail__title-copy {
    display: grid;
    gap: var(--space-8);
    min-width: 0;
}

.hub-detail__title-line {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: var(--space-12) var(--space-16);
    min-width: 0;
}

.hub-detail__title-meta {
    flex: 0 1 auto;
}

.hub-detail .content-header-breadcrumb__list {
    display: flex;
    flex-wrap: wrap;
    gap: var(--space-8) var(--space-20);
    margin: 0;
    padding: 0;
    color: var(--color-text);
    font-weight: var(--font-weight-semibold);
    list-style: none;
}

.hub-detail .content-header-breadcrumb__item {
    position: relative;
}

.hub-detail .content-header-breadcrumb__item:not(:last-child)::after {
    content: "";
    position: absolute;
    top: 50%;
    right: calc(var(--space-12) * -1);
    width: 0.25rem;
    height: 0.25rem;
    border-radius: 50%;
    background: currentColor;
    transform: translateY(-50%);
}

.hub-detail .content-header-breadcrumb a,
.hub-detail .content-header-edit {
    color: inherit;
    text-decoration: none;
}

.hub-detail .content-header-edit {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: var(--space-8);
    min-height: 2.75rem;
    padding: 0 var(--space-16);
    border: var(--border-width-hairline) solid var(--color-border);
    border-radius: var(--radius-corner);
    background: var(--color-bg-surface);
    color: var(--color-text);
    font-size: var(--text-base);
    font-weight: var(--font-weight-bold);
    white-space: nowrap;
}

.hub-detail .content-header-edit__icon {
    position: static;
    display: block;
    flex: 0 0 auto;
    width: 1rem;
    height: 1rem;
    overflow: visible;
    fill: currentColor;
}

@media (max-width: 767px) {
    .hub-page {
        padding-inline: 0;
    }

    .hub-page__header {
        grid-template-columns: 1fr;
        align-items: start;
    }

    .hub-page__create-button {
        justify-self: stretch;
        justify-content: center;
    }

    .hub-modal {
        padding: var(--space-12);
    }

    .hub-modal__dialog {
        max-height: calc(100vh - (var(--space-12) * 2));
        padding: var(--space-16);
    }

    .hub-ubb-prompt {
        padding: var(--space-12);
    }

    .hub-ubb-prompt__dialog {
        padding: var(--space-16);
    }

    .hub-card {
        grid-template-columns: 2.75rem minmax(0, 1fr);
        padding: var(--space-14);
    }

    .hub-card__avatar {
        width: 2.75rem;
        height: 2.75rem;
    }

    .hub-detail__title-row {
        align-items: flex-start;
        flex-direction: column;
    }
}