.cc-profile-editor-vars,
:root {
    --cc-primary: var(--mud-palette-primary);
    --cc-primary-strong: var(--mud-palette-primary-darken);
    --cc-primary-line: rgba(var(--mud-palette-primary-rgb), 0.32);
    --cc-surface: var(--mud-palette-surface);
    --cc-surface-soft: color-mix(in srgb, var(--mud-palette-surface) 84%, var(--mud-palette-primary) 16%);
    --cc-surface-glass: color-mix(in srgb, var(--mud-palette-surface) 88%, transparent);
    --cc-ink: var(--mud-palette-text-primary);
    --cc-muted: var(--mud-palette-text-secondary);
    --cc-soft-ink: var(--mud-palette-action-default);
    --cc-border: var(--mud-palette-lines-default);
    --cc-border-strong: var(--mud-palette-divider);
    --cc-radius: var(--mud-default-borderradius);
    --cc-radius-tight: calc(var(--mud-default-borderradius) - 2px);
    --cc-radius-pill: 999px;
    --cc-shadow: var(--mud-elevation-8);
    --cc-shadow-soft: var(--mud-elevation-4);
    --cc-shadow-portrait: 0 18px 38px color-mix(in srgb, var(--mud-palette-dark) 15%, transparent);
    --cc-focus-ring: 0 0 0 3px color-mix(in srgb, var(--mud-palette-primary) 32%, transparent);
    --cc-media-overlay: linear-gradient(180deg, transparent 44%, color-mix(in srgb, var(--mud-palette-dark) 72%, transparent) 100%);
    --cc-selected-border: color-mix(in srgb, var(--mud-palette-primary) 72%, var(--cc-border));
    --cc-chip-bg: color-mix(in srgb, var(--mud-palette-surface) 88%, var(--mud-palette-primary) 12%);
    --cc-chip-template-bg: color-mix(in srgb, var(--mud-palette-warning) 18%, var(--mud-palette-surface));
    --cc-chip-red-bg: color-mix(in srgb, var(--mud-palette-error) 12%, var(--mud-palette-surface));
    --cc-drawer-surface: color-mix(in srgb, var(--mud-palette-surface) 94%, transparent);
    --cc-bottom-nav-surface: color-mix(in srgb, var(--mud-palette-surface) 92%, transparent);
    --cc-cyan: color-mix(in srgb, var(--mud-palette-tertiary) 32%, var(--cc-surface));
    --cc-tooltip-max-inline-size: min(22rem, calc(100vw - 1.5rem));
}

.mud-popover.mud-tooltip,
.mud-popover .mud-tooltip,
.mud-tooltip {
    box-sizing: border-box;
    inline-size: fit-content;
    min-inline-size: 0 !important;
    max-width: var(--cc-tooltip-max-inline-size) !important;
    max-inline-size: var(--cc-tooltip-max-inline-size) !important;
    white-space: normal !important;
    overflow-wrap: anywhere;
    line-height: 1.35;
    text-align: left;
}

.cc-button.mud-button-root {
    min-width: 0;
    border-radius: var(--cc-radius-pill);
    font-weight: 850;
    letter-spacing: 0;
    text-transform: none;
}

.cc-button:focus-visible,
.cc-icon-button:focus-visible,
.cc-portrait-card:focus-within,
.cc-character-tile:focus-within {
    box-shadow: var(--cc-focus-ring);
}

.cc-button-glass.mud-button-outlined,
.cc-button-mediaoverlay.mud-button-outlined {
    border-color: color-mix(in srgb, var(--cc-border) 62%, transparent);
    background: color-mix(in srgb, var(--cc-surface) 74%, transparent);
    backdrop-filter: blur(12px);
}

.cc-button-spinner {
    margin-inline-end: 0.45rem;
}

.cc-icon-button.mud-icon-button {
    border-radius: var(--cc-radius-pill);
}

.cc-icon-button-glass,
.cc-icon-button-mediaoverlay {
    background: color-mix(in srgb, var(--cc-surface) 70%, transparent);
    backdrop-filter: blur(10px);
}

.cc-chip.mud-chip {
    border-radius: var(--cc-radius-pill);
    font-weight: 850;
    letter-spacing: 0;
}

.cc-chip-quiet.mud-chip-outlined,
.cc-chip-starter.mud-chip-outlined {
    border-color: var(--cc-border);
    background: var(--cc-chip-bg);
}

.cc-chip-template.mud-chip-outlined {
    border-color: color-mix(in srgb, var(--mud-palette-warning) 62%, var(--cc-border));
    background: var(--cc-chip-template-bg);
}

.cc-chip-nsfwcapable.mud-chip-outlined {
    border-color: color-mix(in srgb, var(--mud-palette-error) 55%, var(--cc-border));
    background: var(--cc-chip-red-bg);
}

.cc-segmented-control {
    display: inline-flex;
    gap: 0.25rem;
    padding: 0.25rem;
    border: 1px solid var(--cc-border);
    border-radius: var(--cc-radius);
    background:
        linear-gradient(135deg, color-mix(in srgb, var(--mud-palette-primary) 8%, transparent), transparent 58%),
        color-mix(in srgb, var(--cc-surface) 86%, transparent);
}

.cc-portrait-card {
    position: relative;
    display: grid;
    min-width: 0;
    overflow: hidden;
    border: 1px solid var(--cc-border);
    border-radius: var(--cc-radius);
    background:
        linear-gradient(180deg, color-mix(in srgb, var(--cc-surface) 96%, transparent), color-mix(in srgb, var(--cc-surface) 88%, var(--mud-palette-primary) 6%));
    box-shadow: 0 18px 36px color-mix(in srgb, var(--mud-palette-dark) 24%, transparent);
}

.cc-portrait-card-media {
    position: relative;
    aspect-ratio: 4 / 5;
    min-height: 18rem;
    overflow: hidden;
    background:
        linear-gradient(145deg, color-mix(in srgb, var(--mud-palette-primary) 20%, transparent), transparent 52%),
        color-mix(in srgb, var(--cc-surface) 74%, var(--mud-palette-tertiary) 14%);
}

.cc-portrait-card-media::after {
    position: absolute;
    inset: 0;
    content: "";
    background: var(--cc-media-overlay);
    pointer-events: none;
}

.cc-portrait-card-image,
.cc-portrait-card-fallback {
    display: block;
    width: 100%;
    height: 100%;
}

.cc-portrait-card-image {
    object-fit: cover;
    object-position: center top;
}

.cc-portrait-card-fallback {
    display: grid;
    place-items: center;
    color: var(--cc-ink);
    font-size: 3rem;
    font-weight: 900;
    background:
        radial-gradient(circle at 50% 18%, color-mix(in srgb, var(--mud-palette-primary) 18%, transparent), transparent 36%),
        color-mix(in srgb, var(--cc-surface) 72%, var(--mud-palette-primary) 14%);
}

.cc-portrait-card-badges {
    position: absolute;
    z-index: 1;
    right: 0.65rem;
    top: 0.65rem;
    display: flex;
    flex-wrap: wrap;
    gap: 0.4rem;
    justify-content: flex-end;
    max-width: calc(100% - 1.3rem);
}

.cc-portrait-card-body {
    display: grid;
    gap: 0.7rem;
    padding: 0.9rem;
}

.cc-portrait-card-heading {
    display: grid;
    gap: 0.25rem;
}

.cc-portrait-card-heading h3,
.cc-portrait-card-heading p,
.cc-portrait-card-body p {
    margin: 0;
}

.cc-portrait-card-heading h3 {
    color: var(--cc-ink);
    font-size: 1.05rem;
    line-height: 1.14;
    letter-spacing: 0;
}

.cc-portrait-card-heading p,
.cc-portrait-card-body p {
    color: var(--cc-muted);
    font-size: 0.86rem;
    line-height: 1.35;
}

.cc-portrait-card-actions {
    display: flex;
    flex-wrap: wrap;
    gap: 0.45rem;
    align-items: center;
    justify-content: flex-end;
    padding: 0 0.9rem 0.9rem;
}

.cc-character-tile {
    display: grid;
    grid-template-columns: 2.75rem minmax(0, 1fr) auto;
    gap: 0.65rem;
    align-items: center;
    min-width: 0;
    padding: 0.55rem;
    border: 1px solid var(--cc-border);
    border-radius: var(--cc-radius);
    background:
        linear-gradient(135deg, color-mix(in srgb, var(--mud-palette-tertiary) 8%, transparent), transparent 62%),
        color-mix(in srgb, var(--cc-surface) 90%, transparent);
}

.cc-character-tile-copy {
    display: grid;
    min-width: 0;
}

.cc-character-tile-copy strong,
.cc-character-tile-copy span {
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.cc-character-tile-copy span {
    color: var(--cc-muted);
    font-size: 0.8rem;
}

.cc-action-sheet {
    border: 1px solid var(--cc-border);
    border-radius: var(--cc-radius);
    background: var(--cc-drawer-surface);
    box-shadow: var(--cc-shadow);
    backdrop-filter: blur(16px);
}

.cc-drawer-surface.mud-drawer {
    border-left: 1px solid var(--cc-border);
    background: var(--cc-drawer-surface);
    backdrop-filter: blur(18px);
}

.cc-bottom-nav-surface {
    border-top: 1px solid var(--cc-border);
    background: var(--cc-bottom-nav-surface);
    backdrop-filter: blur(14px);
}

.cc-media-gallery {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(10rem, 1fr));
    gap: 0.75rem;
    min-width: 0;
}

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

.cc-character-edit-form,
.cc-character-create-form {
    display: grid;
    gap: 1rem;
    min-width: 0;
    max-width: 100%;
}

.cc-character-edit-heading {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 1rem;
}

.cc-character-edit-heading h2,
.cc-character-portrait-panel h3 {
    margin: 0;
    letter-spacing: 0;
}

.cc-character-edit-heading h2 {
    font-size: 1.35rem;
    line-height: 1.1;
}

.cc-character-edit-grid {
    display: grid;
    grid-template-columns: minmax(0, 1fr) minmax(17rem, 0.36fr);
    gap: 1rem;
    align-items: start;
}

.cc-character-edit-primary,
.cc-character-edit-side,
.cc-character-definition-panels {
    display: grid;
    gap: 0.75rem;
    min-width: 0;
}

.cc-character-side-actions {
    position: sticky;
    top: 0.75rem;
    z-index: 2;
    display: flex;
    flex-wrap: wrap;
    gap: 0.6rem;
    align-items: center;
    padding: 0.65rem;
    border: 1px solid var(--cc-border);
    border-radius: var(--cc-radius);
    background: var(--cc-surface);
    box-shadow: var(--cc-shadow-soft);
}

.cc-character-side-actions .mud-button-root {
    flex: 1 1 8rem;
}

.cc-character-definition-tabs {
    min-width: 0;
    max-width: 100%;
    overflow: hidden;
    border: 1px solid var(--cc-border);
    border-radius: var(--cc-radius);
    background: var(--cc-surface-glass);
    box-shadow: var(--cc-shadow-soft);
}

.cc-character-definition-tabs .mud-tabs-toolbar,
.cc-character-definition-tabs .mud-tabs-tabbar {
    padding-inline: 0.5rem;
    border-bottom: 1px solid var(--cc-border);
    background: var(--cc-surface);
}

.cc-character-consumer-fields .cc-character-definition-tabs .mud-tab:nth-of-type(7),
.cc-character-consumer-fields .cc-character-mobile-section-nav .mud-button-root:nth-of-type(7) {
    display: none;
}

.cc-character-definition-tab-panel {
    padding: 0.85rem;
}

.cc-character-guided-stepper {
    min-width: 0;
    max-width: 100%;
    overflow-x: auto;
    overflow-y: hidden;
    border: 1px solid var(--cc-border);
    border-radius: var(--cc-radius);
    background: var(--cc-surface);
}

.cc-character-mobile-section-nav {
    display: none;
}

.cc-character-authoring-band,
.cc-character-audition-surface {
    display: grid;
    gap: 0.85rem;
    min-width: 0;
}

.cc-relationship-authoring-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(min(100%, 26rem), 1fr));
    gap: 0.75rem;
    min-width: 0;
}

.cc-character-tab-section-heading {
    display: flex;
    flex-wrap: wrap;
    gap: 0.75rem;
    align-items: start;
    justify-content: space-between;
    min-width: 0;
}

.cc-character-tab-section-heading > div {
    display: grid;
    gap: 0.25rem;
    min-width: min(100%, 18rem);
}

.cc-relationship-preview,
.cc-character-audition-result,
.cc-character-kept-example {
    padding: 0.8rem;
    border: 1px solid var(--cc-border);
    border-radius: var(--cc-radius);
    background: var(--cc-surface);
}

.cc-relationship-stage-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(12rem, 1fr));
    gap: 0.65rem;
    min-width: 0;
}

.cc-relationship-stage {
    display: grid;
    gap: 0.35rem;
    min-width: 0;
    padding: 0.7rem;
    border: 1px solid var(--cc-border);
    border-radius: var(--cc-radius);
    background: var(--cc-surface-soft);
}

.cc-relationship-stage span,
.cc-relationship-note-list p {
    margin: 0;
    color: var(--cc-soft-ink);
    line-height: 1.45;
}

.cc-relationship-note-list {
    display: grid;
    gap: 0.45rem;
    min-width: 0;
}

.cc-relationship-influence-list {
    display: flex;
    flex-wrap: wrap;
    gap: 0.45rem;
    min-width: 0;
}

.cc-relationship-influence-list span {
    max-width: 100%;
    padding: 0.35rem 0.5rem;
    border: 1px solid var(--cc-border);
    border-radius: calc(var(--cc-radius) - 2px);
    background: var(--cc-surface-soft);
    color: var(--cc-soft-ink);
    font-size: 0.82rem;
    line-height: 1.35;
}

.cc-character-audition-controls,
.cc-character-audition-actions {
    display: flex;
    flex-wrap: wrap;
    gap: 0.75rem;
    align-items: end;
    min-width: 0;
}

.cc-character-audition-controls .cc-form-field {
    flex: 1 1 16rem;
    min-width: 0;
}

.cc-character-audition-result {
    display: grid;
    gap: 0.7rem;
}

.cc-character-audition-result p,
.cc-character-kept-example span {
    margin: 0;
    color: var(--cc-soft-ink);
    line-height: 1.55;
}

.cc-character-kept-examples {
    display: grid;
    gap: 0.55rem;
}

.cc-character-kept-examples-heading {
    display: flex;
    flex-wrap: wrap;
    gap: 0.6rem;
    align-items: start;
    justify-content: space-between;
}

.cc-character-kept-examples-heading > div {
    display: grid;
    gap: 0.2rem;
    min-width: min(100%, 18rem);
}

.cc-character-kept-example {
    display: grid;
    grid-template-columns: minmax(0, 1fr) auto;
    gap: 0.75rem;
    align-items: start;
    min-width: 0;
}

.cc-character-kept-example div {
    display: grid;
    gap: 0.25rem;
    min-width: 0;
}

@media (max-width: 960px) {
    .cc-character-edit-grid {
        grid-template-columns: 1fr;
        max-width: 100%;
    }

    .cc-character-edit-side {
        order: -1;
    }

    .cc-character-side-actions {
        position: static;
    }
}

@media (max-width: 640px) {
    .cc-profile-editor-vars,
    :root {
        --cc-tooltip-max-inline-size: min(14rem, calc(100vw - 2rem));
    }

    .cc-character-definition-tab-panel {
        padding: 0.65rem;
    }

    .cc-character-mobile-section-nav {
        display: flex;
        max-width: 100%;
        gap: 0.4rem;
        overflow-x: auto;
        padding-bottom: 0.1rem;
        scrollbar-width: none;
    }

    .cc-character-mobile-section-nav::-webkit-scrollbar {
        display: none;
    }

    .cc-character-mobile-section-nav .mud-button-root {
        flex: 0 0 auto;
        min-height: 2rem;
        border-radius: var(--cc-radius-tight);
        text-transform: none;
        letter-spacing: 0;
    }

    .cc-character-definition-tabs .mud-tabs-toolbar,
    .cc-character-definition-tabs .mud-tabs-tabbar {
        display: none;
    }

    .cc-character-audition-controls .cc-form-field,
    .cc-character-audition-controls .mud-button-root,
    .cc-character-audition-actions .mud-button-root {
        flex-basis: 100%;
        width: 100%;
    }
}

.cc-character-definition-panels .mud-expand-panel {
    overflow: hidden;
    border: 1px solid var(--cc-border);
    border-radius: var(--cc-radius);
    background: var(--cc-surface);
    box-shadow: var(--cc-shadow-soft);
}

.cc-character-definition-panels .mud-expand-panel-header {
    min-height: 3rem;
    padding: 0.7rem 0.85rem;
    color: var(--cc-ink);
    font-weight: 900;
}

.cc-character-definition-panels .mud-expand-panel-content {
    padding: 0 0.85rem 0.85rem;
}

.cc-character-tab-alert {
    margin-bottom: 0.85rem;
}

.cc-page-kicker,
.cc-section-guidance,
.cc-authoring-guidance {
    margin: 0;
    color: var(--cc-muted);
    font-size: 0.82rem;
    line-height: 1.45;
}

.cc-page-kicker {
    color: var(--cc-primary-strong);
    font-size: 0.72rem;
    font-weight: 850;
    letter-spacing: 0;
    text-transform: uppercase;
}

.cc-authoring-guidance {
    grid-column: 1 / -1;
    padding: 0.65rem 0.75rem;
    border-left: 3px solid var(--mud-palette-primary);
    border-radius: var(--cc-radius-tight);
    background: color-mix(in srgb, var(--mud-palette-primary) 6%, var(--cc-surface));
}

.cc-authoring-editor {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    align-items: start;
    gap: 0.85rem 1rem;
}

.cc-authoring-editor > .cc-form-field,
.cc-authoring-editor > .cc-authoring-draft-actions {
    grid-column: 1 / -1;
}

.cc-visual-style-lock {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 0.45rem 0.6rem;
    min-width: 0;
    padding: 0.7rem 0.75rem;
    border: 1px solid var(--cc-border);
    border-radius: var(--cc-radius-tight);
    background: var(--cc-surface-glass);
}

.cc-visual-style-lock .mud-typography-caption {
    flex-basis: 100%;
    min-width: 0;
}

.cc-authoring-section {
    display: grid;
    gap: 0.55rem;
    min-width: 0;
    padding-block: 0.15rem 0.35rem;
}

.cc-authoring-section-heading {
    display: grid;
    gap: 0.15rem;
}

.cc-authoring-section-heading h4 {
    margin: 0;
    color: var(--cc-ink);
    font-size: 0.9rem;
    line-height: 1.2;
    letter-spacing: 0;
}

.cc-authoring-section-heading span {
    color: var(--cc-muted);
    font-size: 0.78rem;
    line-height: 1.35;
}

.cc-authoring-chip-list,
.cc-authoring-draft-actions {
    display: flex;
    flex-wrap: wrap;
    gap: 0.4rem;
}

.cc-authoring-chip.mud-button-root {
    min-width: 0;
    border-radius: 999px;
    text-transform: none;
    letter-spacing: 0;
}

.cc-authoring-chip.mud-button-outlined {
    border-color: var(--cc-border);
    background: var(--cc-surface-glass);
    color: var(--cc-muted);
    font-weight: 750;
}

.cc-authoring-chip.is-legacy.mud-button-root {
    opacity: 0.82;
}

.cc-authoring-chip.is-selected.mud-button-root {
    font-weight: 900;
}

.cc-personality-generate-section,
.cc-personality-tags-section,
.cc-personality-behavior-preview,
.cc-personality-advanced-panels {
    grid-column: 1 / -1;
}

.cc-personality-tag-list,
.cc-personality-tag-mappings {
    display: flex;
    flex-wrap: wrap;
    gap: 0.4rem;
}

.cc-personality-tag-editor {
    display: grid;
    gap: 0.55rem;
    min-width: 0;
}

.cc-personality-tag-editor-entry {
    align-items: flex-start;
    display: flex;
    gap: 0.5rem;
    min-width: 0;
}

.cc-personality-tag-autocomplete {
    flex: 1 1 auto;
    min-width: min(100%, 14rem);
}

.cc-personality-tag-option {
    display: grid;
    gap: 0.12rem;
    min-width: 0;
}

.cc-personality-tag-option span,
.cc-personality-tag-chip span {
    min-width: 0;
    overflow-wrap: anywhere;
}

.cc-personality-tag-option small,
.cc-personality-tag-chip small {
    color: var(--cc-muted);
    font-size: 0.72rem;
    font-weight: 750;
    line-height: 1.15;
}

.cc-personality-tag-option.is-muted {
    color: var(--cc-muted);
    padding: 0.35rem 0;
}

.cc-personality-tag-chip.mud-chip {
    max-width: 100%;
}

.cc-personality-tag {
    display: inline-flex;
    align-items: center;
    gap: 0.25rem;
    min-width: 0;
    max-width: 100%;
    padding: 0.18rem 0.2rem 0.18rem 0.65rem;
    border: 1px solid var(--mud-palette-primary);
    border-radius: 999px;
    background: color-mix(in srgb, var(--mud-palette-primary) 8%, var(--cc-surface));
    color: var(--cc-ink);
    font-size: 0.82rem;
    font-weight: 850;
}

.cc-personality-tag span {
    min-width: 0;
    overflow-wrap: anywhere;
}

.cc-personality-tag small,
.cc-personality-tag-mappings span {
    color: var(--cc-muted);
    font-size: 0.72rem;
    font-weight: 750;
}

.cc-personality-tag.is-custom {
    border-color: color-mix(in srgb, var(--mud-palette-warning) 70%, var(--cc-border));
    background: color-mix(in srgb, var(--mud-palette-warning) 9%, var(--cc-surface));
}

.cc-personality-behavior-preview {
    padding: 0.75rem;
    border: 1px solid var(--cc-border);
    border-radius: var(--cc-radius);
    background: var(--cc-surface-glass);
}

.cc-personality-behavior-preview-text {
    display: grid;
    gap: 0.55rem;
}

.cc-personality-behavior-preview-text article {
    display: grid;
    gap: 0.18rem;
}

.cc-personality-behavior-preview-text strong {
    color: var(--cc-ink);
    font-size: 0.83rem;
    line-height: 1.2;
}

.cc-personality-behavior-preview-text p {
    margin: 0;
    color: var(--cc-muted);
    font-size: 0.78rem;
    line-height: 1.4;
    overflow-wrap: anywhere;
}

.cc-character-edit-side,
.cc-character-portrait-panel,
.cc-character-live-preview {
    display: grid;
    gap: 0.75rem;
    padding: 0.75rem;
    border: 1px solid var(--cc-border);
    border-radius: var(--cc-radius);
    background: var(--cc-surface-glass);
}

.cc-character-live-preview {
    border-color: var(--cc-primary-line);
    background: linear-gradient(135deg, var(--cc-cyan), transparent 68%), var(--cc-surface);
    box-shadow: var(--cc-shadow-soft);
}

.cc-character-live-preview > .mud-avatar {
    inline-size: 5rem;
    block-size: 5rem;
    border: 3px solid var(--cc-surface);
    box-shadow: var(--cc-shadow-soft);
}

.cc-character-live-preview p {
    margin: 0;
    color: var(--cc-muted);
    font-size: 0.9rem;
    line-height: 1.45;
}

.cc-character-portrait-panel {
    background: var(--cc-surface);
}

.cc-character-portrait-panel h3 {
    font-size: 0.95rem;
    line-height: 1.15;
}

.cc-character-image-capability-switch {
    justify-self: end;
    margin: -0.2rem 0 -0.2rem auto;
    white-space: nowrap;
}

.cc-portrait-file {
    width: 100%;
    min-width: 0;
    padding: 0.65rem;
    border: 1px dashed var(--cc-primary-line);
    border-radius: var(--cc-radius);
    background: var(--cc-cyan);
    color: var(--cc-soft-ink);
    font: inherit;
    font-size: 0.86rem;
}

.cc-inline-status {
    display: inline-flex;
    align-items: center;
    gap: 0.5rem;
    color: var(--cc-muted);
    font-size: 0.84rem;
    font-weight: 800;
}

.cc-character-edit-actions {
    display: flex;
    flex-wrap: wrap;
    gap: 0.75rem;
}

.cc-character-save {
    min-height: 3rem;
}

.cc-avatar-preview-button {
    display: block;
    width: 100%;
    height: 100%;
    min-width: 0;
    margin: 0;
    padding: 0;
    overflow: hidden;
    border: 0;
    border-radius: inherit;
    background: transparent;
    cursor: zoom-in;
}

.cc-avatar-preview-button:focus-visible {
    outline: 2px solid var(--cc-primary);
    outline-offset: 2px;
}

.cc-avatar-preview-popover {
    width: min(28rem, calc(100vw - 2rem));
    overflow: hidden;
    border: 1px solid var(--cc-border-strong);
    border-radius: var(--cc-radius);
    background: var(--cc-surface);
    box-shadow: var(--cc-shadow);
}

.cc-avatar-preview-image {
    display: block;
    width: 100%;
    max-height: min(72vh, 34rem);
    object-fit: contain;
    background: var(--cc-surface-soft);
}

.cc-chat-markdown {
    min-width: 0;
    overflow-wrap: anywhere;
    word-break: normal;
}

.cc-chat-markdown > :first-child {
    margin-top: 0;
}

.cc-chat-markdown > :last-child {
    margin-bottom: 0;
}

.cc-chat-markdown p {
    margin: 0;
}

.cc-chat-markdown p + p,
.cc-chat-markdown p + ul,
.cc-chat-markdown p + ol,
.cc-chat-markdown ul + p,
.cc-chat-markdown ol + p {
    margin-top: 0.42rem;
}

.cc-chat-markdown ul,
.cc-chat-markdown ol {
    margin: 0.25rem 0 0.25rem 1.15rem;
    padding-inline-start: 1rem;
}

.cc-chat-markdown li + li {
    margin-top: 0.18rem;
}

.cc-chat-markdown a {
    color: var(--cc-primary-strong);
    text-decoration: underline;
    text-underline-offset: 0.14em;
    overflow-wrap: anywhere;
}

.cc-chat-markdown code {
    padding: 0.04rem 0.22rem;
    border-radius: var(--cc-radius-tight);
    background: var(--cc-surface-soft);
    color: var(--cc-ink);
    font-size: 0.92em;
    white-space: break-spaces;
    overflow-wrap: anywhere;
}

.cc-template-card {
    height: 100%;
    border-radius: var(--cc-radius-tight);
}

.cc-template-card-content,
.cc-template-card-actions {
    min-width: 0;
}

.cc-template-card-content {
    display: grid;
    gap: 0.75rem;
}

.cc-template-card-header,
.cc-template-profile-head {
    display: grid;
    grid-template-columns: auto minmax(0, 1fr);
    gap: 0.8rem;
    align-items: center;
    min-width: 0;
}

.cc-template-card-avatar,
.cc-template-profile-avatar {
    flex: 0 0 auto;
}

.cc-template-card-title,
.cc-template-profile-title {
    min-width: 0;
}

.cc-template-card-title .mud-typography,
.cc-template-profile-title .mud-typography {
    overflow-wrap: anywhere;
}

.cc-template-card-short,
.cc-template-profile-short,
.cc-template-card-summary {
    color: var(--cc-muted);
    overflow-wrap: anywhere;
}

.cc-template-card-summary {
    display: -webkit-box;
    overflow: hidden;
    -webkit-box-orient: vertical;
    -webkit-line-clamp: 3;
}

.cc-template-chip-row,
.cc-template-profile-behavior {
    display: flex;
    flex-wrap: wrap;
    gap: 0.35rem;
    min-width: 0;
}

.cc-template-card-actions {
    justify-content: flex-end;
    padding-top: 0;
}

.cc-template-profile-preview {
    display: grid;
    gap: 1rem;
    min-width: 0;
}

.cc-template-profile-sections {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 0.8rem;
}

.cc-template-profile-section {
    min-width: 0;
    padding: 0.75rem;
    border: 1px solid var(--cc-border);
    border-radius: var(--cc-radius-tight);
    background: var(--cc-surface-soft);
}

.cc-template-profile-section h4 {
    margin: 0 0 0.35rem;
    font-size: 0.78rem;
    font-weight: 700;
    color: var(--cc-muted);
    text-transform: uppercase;
}

.cc-template-profile-section p {
    margin: 0;
    color: var(--cc-ink);
    font-size: 0.9rem;
    line-height: 1.45;
    overflow-wrap: anywhere;
}

.cc-template-performance-summary {
    display: grid;
    grid-column: 1 / -1;
    gap: 0.7rem;
    min-width: 0;
    padding: 0.8rem;
    border: 1px solid color-mix(in srgb, var(--mud-palette-primary) 24%, var(--cc-border));
    border-radius: var(--cc-radius-tight);
    background: color-mix(in srgb, var(--mud-palette-primary) 4%, var(--cc-surface));
}

.cc-template-performance-head,
.cc-template-performance-status,
.cc-template-performance-metrics,
.cc-template-performance-warnings {
    display: flex;
    flex-wrap: wrap;
    gap: 0.45rem;
    min-width: 0;
}

.cc-template-performance-head {
    align-items: flex-start;
    justify-content: space-between;
}

.cc-template-performance-grid {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 0.55rem;
}

.cc-template-performance-field {
    min-width: 0;
}

.cc-template-performance-field span {
    color: var(--cc-muted);
    display: block;
    font-size: 0.72rem;
    font-weight: 800;
    letter-spacing: 0;
    text-transform: uppercase;
}

.cc-template-performance-field p {
    margin: 0.15rem 0 0;
    color: var(--cc-ink);
    font-size: 0.88rem;
    line-height: 1.4;
    overflow-wrap: anywhere;
}

.cc-template-preview-pane {
    display: grid;
    gap: 1rem;
    min-width: 0;
}

.cc-template-preview-stage {
    position: relative;
    display: grid;
    min-height: clamp(22rem, 48vh, 34rem);
    overflow: hidden;
    border-radius: var(--cc-radius);
    border: 1px solid var(--cc-border);
    background: var(--cc-surface-soft);
    box-shadow: var(--cc-portrait-card-shadow);
}

.cc-template-preview-image,
.cc-template-preview-fallback {
    width: 100%;
    height: 100%;
    min-height: inherit;
}

.cc-template-preview-image {
    display: block;
    object-fit: cover;
}

.cc-template-preview-fallback {
    display: grid;
    place-items: center;
    background:
        linear-gradient(145deg, color-mix(in srgb, var(--mud-palette-primary) 18%, transparent), transparent 48%),
        var(--cc-surface);
    color: var(--cc-muted);
    font-size: 4rem;
    font-weight: 900;
}

.cc-template-preview-stage-copy {
    position: absolute;
    inset-inline: 0;
    bottom: 0;
    display: grid;
    gap: 0.75rem;
    padding: 1rem;
    background: linear-gradient(180deg, transparent, rgba(0, 0, 0, 0.76));
    color: white;
}

.cc-template-preview-stage-copy h2,
.cc-template-preview-stage-copy p,
.cc-template-preview-hook,
.cc-character-preview-copy h2,
.cc-character-preview-copy p {
    margin: 0;
}

.cc-template-preview-stage-copy h2,
.cc-character-preview-copy h2 {
    font-size: clamp(1.45rem, 3vw, 2.3rem);
    line-height: 1;
    letter-spacing: 0;
}

.cc-template-preview-stage-copy p {
    max-width: 36rem;
    color: rgba(255, 255, 255, 0.86);
    line-height: 1.4;
}

.cc-template-preview-chip-row,
.cc-template-preview-actions,
.cc-character-preview-rooms {
    display: flex;
    flex-wrap: wrap;
    gap: 0.5rem;
    min-width: 0;
}

.cc-template-preview-thumbs {
    grid-template-columns: repeat(auto-fill, minmax(4.25rem, 1fr));
    gap: 0.45rem;
}

.cc-template-preview-thumb {
    display: grid;
    width: 100%;
    aspect-ratio: 1;
    overflow: hidden;
    place-items: center;
    border: 1px solid var(--cc-border);
    border-radius: var(--cc-radius-tight);
    background: var(--cc-surface-soft);
    color: var(--cc-muted);
    font-weight: 900;
    cursor: pointer;
    transition: border-color 140ms ease, box-shadow 140ms ease, transform 140ms ease;
}

.cc-template-preview-thumb:hover,
.cc-template-preview-thumb:focus-visible,
.cc-template-preview-thumb.is-active {
    border-color: var(--cc-primary);
    box-shadow: var(--cc-focus-ring);
    transform: translateY(-1px);
}

.cc-template-preview-thumb img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.cc-template-preview-hook {
    color: var(--cc-ink);
    font-size: 1rem;
    line-height: 1.55;
}

.cc-template-preview-sections {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 0.7rem;
}

.cc-template-preview-section {
    min-width: 0;
    padding: 0.8rem;
    border: 1px solid var(--cc-border);
    border-radius: var(--cc-radius-tight);
    background: var(--cc-surface-soft);
}

.cc-template-preview-section h3 {
    margin: 0 0 0.35rem;
    color: var(--cc-muted);
    font-size: 0.75rem;
    font-weight: 900;
    letter-spacing: 0;
    text-transform: uppercase;
}

.cc-template-preview-section p {
    margin: 0;
    color: var(--cc-ink);
    font-size: 0.92rem;
    line-height: 1.45;
    overflow-wrap: anywhere;
}

.cc-template-preview-actions {
    justify-content: flex-end;
    padding-top: 0.2rem;
}

.cc-character-preview-pane {
    display: grid;
    gap: 1rem;
}

.cc-character-preview-avatar.mud-avatar {
    width: min(100%, 22rem);
    height: auto;
    aspect-ratio: 4 / 5;
    border-radius: var(--cc-radius);
    box-shadow: var(--cc-portrait-card-shadow);
}

.cc-character-preview-copy {
    display: grid;
    gap: 0.35rem;
}

.cc-character-preview-copy p {
    color: var(--cc-muted);
    line-height: 1.45;
}

.cc-character-preview-rooms {
    display: grid;
}

@media (max-width: 640px) {
    .cc-template-profile-sections,
    .cc-template-preview-sections {
        grid-template-columns: 1fr;
    }

    .cc-template-performance-grid {
        grid-template-columns: 1fr;
    }

    .cc-template-preview-stage {
        min-height: 24rem;
    }

    .cc-template-preview-actions {
        justify-content: stretch;
    }

    .cc-template-preview-actions .cc-button {
        width: 100%;
    }
}

.cc-scenario-editor {
    display: grid;
    gap: 1rem;
    min-width: 0;
}

.cc-scenario-editor-consumer {
    padding-bottom: 8.5rem;
}

.cc-scenario-editor-heading,
.cc-scenario-section-heading,
.cc-scenario-card-heading,
.cc-scenario-card-toolbar {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 0.75rem;
    min-width: 0;
}

.cc-scenario-editor-heading h2,
.cc-scenario-section-heading h3 {
    margin: 0;
    letter-spacing: 0;
}

.cc-scenario-editor-heading h2 {
    font-size: 1.55rem;
    line-height: 1.08;
}

.cc-scenario-section-heading h3 {
    font-size: 1rem;
    line-height: 1.18;
}

.cc-scenario-editor-status,
.cc-scenario-preview-chips,
.cc-scenario-assist-actions,
.cc-scenario-location-role,
.cc-scenario-order-controls {
    display: flex;
    flex-wrap: wrap;
    gap: 0.4rem;
    align-items: center;
}

.cc-scenario-guidance {
    color: var(--cc-muted);
    font-size: 0.9rem;
    line-height: 1.42;
    margin: 0;
}

.cc-scenario-fixed-surface {
    align-items: center;
    border: 1px solid color-mix(in srgb, var(--mud-palette-primary) 35%, transparent);
    border-radius: 8px;
    color: var(--mud-palette-primary);
    display: flex;
    font-weight: 700;
    gap: 0.5rem;
    min-height: 3.5rem;
    padding: 0.85rem 1rem;
}

.cc-scenario-fixed-surface-copy {
    display: grid;
    gap: 0.15rem;
    min-width: 0;
}

.cc-scenario-fixed-surface-copy small,
.cc-scenario-mature-control small {
    color: var(--cc-muted);
    font-size: 0.78rem;
    font-weight: 500;
    line-height: 1.3;
}

.cc-scenario-mature-control {
    display: grid;
    gap: 0.15rem;
}

.cc-scenario-editor-layout {
    display: grid;
    grid-template-columns: minmax(0, 1fr) minmax(18rem, 25rem);
    gap: 1rem;
    align-items: start;
    min-width: 0;
}

.cc-scenario-editor-main,
.cc-scenario-editor-side,
.cc-scenario-tab-panel,
.cc-scenario-assist-panel,
.cc-scenario-provided-actor,
.cc-scenario-preview-panel,
.cc-scenario-policy-panel,
.cc-scenario-readiness-panel,
.cc-scenario-admin-panel,
.cc-scenario-actions-panel {
    display: grid;
    gap: 0.85rem;
    min-width: 0;
}

.cc-scenario-assist-panel,
.cc-scenario-preview-panel,
.cc-scenario-policy-panel,
.cc-scenario-readiness-panel,
.cc-scenario-admin-panel,
.cc-scenario-actions-panel,
.cc-scenario-structure-card {
    padding: 0.9rem;
    border: 1px solid var(--cc-border);
    border-radius: var(--cc-radius);
    background: color-mix(in srgb, var(--cc-surface) 92%, transparent);
}

.cc-scenario-tabs {
    min-width: 0;
}

.cc-scenario-tab-panel {
    padding-top: 0.85rem;
}

.cc-scenario-binding-mode-set {
    display: grid;
    gap: 0.45rem;
    min-width: 0;
}

.cc-scenario-actor-placement {
    border: 1px solid color-mix(in srgb, var(--mud-palette-info) 28%, var(--cc-border));
    border-radius: var(--cc-radius);
    background: color-mix(in srgb, var(--mud-palette-info) 5%, var(--cc-surface));
    display: grid;
    gap: 0.7rem;
    min-width: 0;
    padding: 0.75rem;
}

.cc-scenario-performance-overlay {
    border: 1px solid color-mix(in srgb, var(--mud-palette-secondary) 28%, var(--cc-border));
    border-radius: var(--cc-radius);
    background: color-mix(in srgb, var(--mud-palette-secondary) 5%, var(--cc-surface));
    display: grid;
    gap: 0.75rem;
    min-width: 0;
    padding: 0.75rem;
}

.cc-scenario-overlay-chips {
    display: flex;
    flex-wrap: wrap;
    gap: 0.35rem;
    justify-content: flex-end;
}

.cc-scenario-hidden-overlay-panel .mud-expand-panel {
    border: 1px dashed color-mix(in srgb, var(--mud-palette-warning) 36%, var(--cc-border));
    border-radius: var(--cc-radius-tight);
    background: color-mix(in srgb, var(--mud-palette-warning) 5%, var(--cc-surface));
}

.cc-scenario-assist-actions {
    align-items: stretch;
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
}

.cc-scenario-assist-action {
    min-height: 4.4rem;
    text-align: left;
}

.cc-scenario-assist-action .mud-button-label {
    align-items: flex-start;
    display: grid;
    gap: 0.2rem;
    justify-items: start;
    min-width: 0;
    white-space: normal;
}

.cc-scenario-assist-action small {
    color: color-mix(in srgb, currentColor 70%, transparent);
    font-size: 0.73rem;
    font-weight: 500;
    line-height: 1.2;
}

.cc-scenario-order-controls {
    flex-wrap: nowrap;
    gap: 0.1rem;
}

.cc-scenario-provided-actor {
    margin-top: 0.35rem;
    padding: 0.75rem;
    border: 1px dashed color-mix(in srgb, var(--mud-palette-primary) 35%, var(--cc-border));
    border-radius: var(--cc-radius);
    background: color-mix(in srgb, var(--mud-palette-primary) 5%, var(--cc-surface));
}

.cc-scenario-structure-card-error {
    border-color: color-mix(in srgb, var(--mud-palette-error) 55%, var(--cc-border));
    background: color-mix(in srgb, var(--mud-palette-error) 5%, var(--cc-surface));
}

.cc-scenario-inline-grid {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 0.75rem;
}

.cc-scenario-visual-identity {
    border: 1px solid color-mix(in srgb, var(--mud-palette-primary) 28%, var(--cc-border));
    border-radius: var(--cc-radius);
    background:
        linear-gradient(
            135deg,
            color-mix(in srgb, var(--mud-palette-primary) 8%, transparent),
            color-mix(in srgb, var(--cc-surface) 94%, transparent)
        );
    display: grid;
    gap: 0.75rem;
    padding: 0.8rem;
}

.cc-scenario-visual-identity .cc-scenario-guidance {
    margin: 0;
}

.cc-scenario-appearance-dialog-body {
    display: grid;
    gap: 1rem;
    min-width: 0;
}

.cc-scenario-appearance-dialog-heading {
    display: grid;
    gap: 0.15rem;
}

.cc-scenario-appearance-dialog-heading span {
    color: var(--cc-muted);
    font-size: 0.75rem;
    font-weight: 800;
    letter-spacing: 0;
    text-transform: uppercase;
}

.cc-scenario-appearance-dialog-heading strong {
    color: var(--cc-ink);
    font-size: 1.1rem;
    line-height: 1.2;
}

.cc-scenario-mini-heading {
    align-items: center;
    display: flex;
    gap: 0.75rem;
    justify-content: space-between;
    min-width: 0;
}

.cc-scenario-mini-heading h4 {
    font-size: 0.95rem;
    line-height: 1.15;
    margin: 0;
}

.cc-scenario-known-by-panel {
    border: 1px dashed color-mix(in srgb, var(--mud-palette-primary) 28%, var(--cc-border));
    border-radius: var(--cc-radius);
    display: grid;
    gap: 0.55rem;
    padding: 0.75rem;
}

.cc-scenario-structure-card {
    position: relative;
    overflow: hidden;
}

.cc-scenario-structure-card::before {
    position: absolute;
    inset: 0 auto 0 0;
    width: 0.22rem;
    content: "";
    background: color-mix(in srgb, var(--mud-palette-primary) 62%, var(--mud-palette-secondary));
}

.cc-scenario-player-cast-card {
    background: color-mix(in srgb, var(--mud-palette-primary) 8%, var(--cc-surface));
    border-color: color-mix(in srgb, var(--mud-palette-primary) 34%, var(--cc-border));
}

.cc-scenario-player-cast-card::before {
    width: 0.34rem;
    background: var(--mud-palette-primary);
}

.cc-scenario-preview-panel p,
.cc-scenario-preview-notes,
.cc-scenario-mini-row span {
    margin: 0;
    color: var(--cc-muted);
    overflow-wrap: anywhere;
}

.cc-scenario-preview-notes {
    display: grid;
    gap: 0.4rem;
    font-size: 0.9rem;
    line-height: 1.38;
}

.cc-scenario-mini-row {
    display: grid;
    gap: 0.15rem;
    padding: 0.55rem 0;
    border-bottom: 1px solid var(--cc-border);
}

.cc-scenario-mini-row:last-child {
    border-bottom: 0;
}

.cc-scenario-action-grid {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 0.55rem;
}

.cc-scenario-action-grid .mud-button-root {
    min-width: 0;
}

.cc-scenario-save-state {
    display: grid;
    gap: 0.2rem;
    padding: 0.75rem;
    border: 1px solid var(--cc-border);
    border-radius: calc(var(--cc-radius) * 0.75);
    background: color-mix(in srgb, var(--cc-surface) 82%, var(--mud-palette-primary) 18%);
}

.cc-scenario-save-state span {
    color: var(--mud-palette-text-secondary);
    font-size: 0.88rem;
    line-height: 1.4;
}

.cc-world-editor {
    display: grid;
    gap: 1rem;
    min-width: 0;
}

.cc-world-editor-grid {
    display: grid;
    grid-template-columns: repeat(2, minmax(15rem, 1fr));
    gap: 0.85rem;
    min-width: 0;
}

.cc-world-editor-grid .cc-form-field:nth-child(2),
.cc-world-editor-grid .cc-form-field:nth-child(4),
.cc-world-editor-grid .cc-form-field:nth-child(5) {
    grid-column: 1 / -1;
}

.cc-worlds-workspace {
    align-items: start;
    display: grid;
    gap: 1rem;
    grid-template-columns: minmax(14rem, 18rem) minmax(0, 1fr);
    min-width: 0;
}

.cc-worlds-main {
    display: grid;
    gap: 1rem;
    min-width: 0;
}

.cc-worlds-editor-panel,
.cc-worlds-rail {
    border: 1px solid var(--cc-border);
    border-radius: var(--cc-radius);
    background: var(--cc-surface-glass);
    box-shadow: var(--cc-shadow-soft);
}

.cc-worlds-editor-panel {
    display: grid;
    gap: 1rem;
    min-width: 0;
    padding: 1rem;
}

.cc-worlds-rail {
    display: grid;
    gap: 0.75rem;
    max-height: calc(100vh - 2rem);
    min-width: 0;
    overflow: hidden;
    padding: 0.85rem;
    position: sticky;
    top: 1rem;
}

.cc-worlds-rail-head {
    align-items: center;
    display: flex;
    gap: 0.75rem;
    justify-content: space-between;
    min-width: 0;
}

.cc-worlds-rail-head h3 {
    font-size: 1rem;
    line-height: 1.2;
    margin: 0;
}

.cc-worlds-list {
    display: grid;
    gap: 0.45rem;
    min-height: 0;
    overflow: auto;
    padding-right: 0.15rem;
}

.cc-worlds-row {
    align-items: center;
    background: color-mix(in srgb, var(--cc-surface) 76%, transparent);
    border: 1px solid transparent;
    border-radius: var(--cc-radius-tight);
    display: grid;
    gap: 0.65rem;
    grid-template-columns: auto minmax(0, 1fr) auto;
    min-width: 0;
    padding: 0.55rem;
}

.cc-worlds-row.is-selected {
    background: var(--cc-surface-soft);
    border-color: var(--cc-primary-line);
}

.cc-worlds-row-copy {
    background: transparent;
    border: 0;
    color: inherit;
    cursor: pointer;
    min-width: 0;
    padding: 0;
    text-align: left;
}

.cc-worlds-row-copy strong,
.cc-worlds-row-copy span {
    display: block;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.cc-worlds-row-copy span {
    color: var(--cc-muted);
    font-size: 0.8rem;
}

.cc-worlds-row-copy:focus-visible {
    border-radius: var(--cc-radius-tight);
    outline: 3px solid var(--cc-focus-ring);
    outline-offset: 3px;
}

.cc-worlds-empty {
    border: 1px dashed var(--cc-border-strong);
    border-radius: var(--cc-radius);
    color: var(--cc-muted);
    display: grid;
    gap: 0.55rem;
    min-height: 8rem;
    padding: 1rem;
    place-items: center;
    text-align: center;
}

.cc-worlds-danger-actions {
    display: flex;
    justify-content: flex-end;
}

.cc-world-place-manager {
    border: 1px solid var(--cc-border);
    border-radius: var(--cc-radius);
    background: var(--cc-surface-glass);
    box-shadow: var(--cc-shadow-soft);
    display: grid;
    gap: 1rem;
    min-width: 0;
    padding: 1rem;
}

.cc-world-place-actions {
    display: flex;
    flex-wrap: wrap;
    gap: 0.5rem;
    justify-content: flex-end;
    min-width: 0;
}

.cc-world-place-grid {
    display: grid;
    grid-template-columns: minmax(15rem, 0.9fr) minmax(22rem, 1.35fr);
    gap: 1rem;
    min-width: 0;
}

.cc-world-place-list,
.cc-world-place-form {
    border: 1px solid var(--mud-palette-lines-default);
    border-radius: 8px;
    display: grid;
    gap: 0.75rem;
    min-width: 0;
    padding: 0.85rem;
}

.cc-world-place-row {
    align-items: center;
    border: 1px solid var(--mud-palette-lines-default);
    border-radius: 8px;
    display: grid;
    gap: 0.65rem;
    grid-template-columns: minmax(0, 1fr) auto;
    margin-left: var(--cc-world-place-indent, 0);
    min-width: 0;
    padding: 0.65rem;
}

.cc-world-place-row.is-selected {
    border-color: var(--mud-palette-primary);
    background: color-mix(in srgb, var(--mud-palette-primary) 8%, transparent);
}

.cc-world-place-row.is-archived {
    opacity: 0.68;
}

.cc-world-place-select {
    appearance: none;
    background: transparent;
    border: 0;
    color: inherit;
    display: grid;
    gap: 0.15rem;
    min-width: 0;
    padding: 0;
    text-align: left;
}

.cc-world-place-select strong,
.cc-world-place-select span {
    overflow-wrap: anywhere;
}

.cc-world-place-select span {
    color: var(--mud-palette-text-secondary);
    font-size: 0.82rem;
}

.cc-world-place-form-head {
    align-items: flex-start;
    display: flex;
    gap: 0.75rem;
    justify-content: space-between;
    min-width: 0;
}

.cc-world-place-form-head h4 {
    font-size: 1.05rem;
    margin: 0;
}

.cc-world-place-empty {
    align-items: center;
    color: var(--mud-palette-text-secondary);
    display: flex;
    gap: 0.65rem;
    min-height: 4rem;
}

.cc-scenario-action-dock {
    align-items: center;
    background: color-mix(in srgb, var(--cc-surface) 96%, transparent);
    border: 1px solid var(--cc-border-strong);
    border-radius: var(--cc-radius);
    bottom: calc(env(safe-area-inset-bottom, 0px) + 0.75rem);
    box-shadow: var(--cc-shadow-soft);
    display: grid;
    gap: 0.8rem;
    grid-template-columns: minmax(0, 1fr) minmax(10rem, auto);
    left: max(0.75rem, calc((100vw - 80rem) / 2));
    padding: 0.75rem;
    position: fixed;
    right: max(0.75rem, calc((100vw - 80rem) / 2));
    z-index: 1200;
}

.cc-scenario-dock-status,
.cc-scenario-authoring-progress {
    display: grid;
    gap: 0.35rem;
    min-width: 0;
}

.cc-scenario-action-dock > .cc-scenario-save {
    min-width: 10rem;
}

.cc-scenario-authoring-progress-heading {
    align-items: center;
    display: flex;
    gap: 0.5rem;
    justify-content: space-between;
    min-width: 0;
}

@media (max-width: 960px) {
    .cc-scenario-editor-layout {
        grid-template-columns: 1fr;
    }

    .cc-scenario-action-dock {
        bottom: calc(var(--cc-nav-height, 2rem) + env(safe-area-inset-bottom, 0px) + 1.25rem);
    }

    .cc-world-place-grid {
        grid-template-columns: 1fr;
    }

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

    .cc-worlds-rail {
        max-height: none;
        order: -1;
        position: static;
    }
}

@media (max-width: 640px) {
    .cc-scenario-editor-consumer {
        padding-bottom: 12rem;
    }

    .cc-scenario-action-dock {
        grid-template-columns: 1fr;
        left: 0.5rem;
        padding: 0.65rem;
        right: 0.5rem;
    }

    .cc-scenario-action-dock > .cc-scenario-save {
        min-height: 2.75rem;
        width: 100%;
    }

    .cc-scenario-authoring-progress-heading {
        align-items: flex-start;
        flex-direction: column;
    }

    .cc-scenario-editor-heading,
    .cc-scenario-section-heading,
    .cc-scenario-card-heading,
    .cc-scenario-card-toolbar {
        align-items: flex-start;
        flex-direction: column;
    }

    .cc-scenario-inline-grid,
    .cc-scenario-action-grid,
    .cc-scenario-assist-actions {
        grid-template-columns: 1fr;
    }

    .cc-scenario-action-grid .mud-button-root {
        width: 100%;
    }

    .cc-world-place-actions,
    .cc-world-place-form-head {
        align-items: stretch;
        flex-direction: column;
    }

    .cc-world-editor-grid {
        grid-template-columns: 1fr;
    }

    .cc-worlds-danger-actions {
        justify-content: stretch;
    }

    .cc-world-place-actions .mud-button-root,
    .cc-world-place-form-head .mud-button-root,
    .cc-worlds-danger-actions .mud-button-root {
        width: 100%;
    }
}