/* ============================================
   Lufulus Center
   ============================================ */

.lufulus-page {
    max-width: 1120px;
    margin: 0 auto;
    padding: clamp(1.5rem, 3vw, 3rem) 1rem 4rem;
}

.public-launch-page {
    max-width: none;
    padding: 0 0 4rem;
}

.public-launch-inner {
    width: min(1120px, 100%);
    margin: 0 auto;
    padding-inline: 1rem;
}

.public-launch-hero {
    min-height: min(68vh, 620px);
    display: flex;
    align-items: stretch;
    margin: 0 0 1rem;
    border-radius: 8px;
    overflow: hidden;
    background:
        linear-gradient(90deg, rgba(7, 12, 22, 0.86) 0%, rgba(8, 14, 25, 0.68) 48%, rgba(8, 14, 25, 0.36) 100%),
        url("/images/brand/golgufus-game-hub-hero-1536.jpg") center / cover no-repeat;
    color: #fff;
    box-shadow: var(--shadow-md);
}

.public-launch-hero-content {
    display: flex;
    flex-direction: column;
    justify-content: flex-end;
    padding-block: clamp(2.25rem, 7vw, 5rem);
}

.public-launch-hero .lufulus-kicker {
    color: #a8d8ff;
}

.public-launch-hero .lufulus-title {
    max-width: 12ch;
    color: #fff;
    text-shadow: 0 2px 16px rgba(0, 0, 0, 0.35);
}

.public-launch-hero .lufulus-subtitle {
    max-width: 58ch;
    color: rgba(246, 249, 255, 0.92);
    text-shadow: 0 1px 12px rgba(0, 0, 0, 0.42);
}

.public-launch-hero .btn-outline-light {
    border-color: rgba(255, 255, 255, 0.82);
    color: #fff;
    background: rgba(255, 255, 255, 0.06);
}

.public-launch-hero .btn-outline-light:hover,
.public-launch-hero .btn-outline-light:focus {
    border-color: #fff;
    color: #111827;
    background: #fff;
}

.public-launch-actions .btn {
    min-height: 3rem;
}

.public-launch-strip {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 0.75rem;
    margin-bottom: 1rem;
}

.public-launch-strip > div {
    min-width: 0;
    padding: 0.9rem 1rem;
    border: 1px solid var(--border);
    border-radius: 8px;
    background: color-mix(in srgb, var(--bg-card) 94%, var(--accent) 6%);
    box-shadow: var(--shadow-sm);
}

.public-launch-strip span {
    display: block;
    color: var(--text-secondary);
    font-size: 0.78rem;
    font-weight: 700;
    text-transform: uppercase;
}

.public-launch-strip strong {
    display: block;
    margin-top: 0.18rem;
    color: var(--text-primary);
    font-size: 0.96rem;
    line-height: 1.3;
}

.public-launch-grid {
    margin-bottom: 1rem;
}

.public-launch-panel-link {
    display: inline-flex;
    align-items: center;
    gap: 0.35rem;
    margin-top: 0.85rem;
    color: var(--accent);
    font-weight: 750;
    text-decoration: none;
}

.public-launch-panel-link::after {
    content: "\2192";
    font-size: 0.95rem;
}

.public-launch-panel-link:hover,
.public-launch-panel-link:focus {
    color: var(--accent-hover);
    text-decoration: underline;
}

.public-launch-agent-note {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 1rem;
    padding-block: 1rem;
}

.public-launch-agent-note h2 {
    margin: 0;
    color: var(--text-primary);
    font-size: clamp(1.15rem, 2vw, 1.6rem);
    line-height: 1.2;
}

.public-launch-agent-note p {
    max-width: 76ch;
    margin: 0.65rem 0 0;
    color: var(--text-secondary);
}

.public-launch-legal-links {
    display: inline-flex;
    gap: 0.6rem;
    flex-wrap: wrap;
    flex: 0 0 auto;
}

.public-launch-legal-links a {
    display: inline-flex;
    align-items: center;
    min-height: 2.4rem;
    padding: 0.45rem 0.8rem;
    border: 1px solid var(--border);
    border-radius: 8px;
    color: var(--text-secondary);
    background: var(--bg-card);
    text-decoration: none;
    font-weight: 700;
}

.public-launch-legal-links a:hover,
.public-launch-legal-links a:focus {
    color: var(--accent);
    border-color: var(--accent);
}

.lufulus-hero {
    display: grid;
    grid-template-columns: minmax(0, 1fr) minmax(280px, 360px);
    gap: 1rem;
    align-items: stretch;
    margin-bottom: 1rem;
}

.lufulus-hero-copy,
.lufulus-build-panel,
.lufulus-panel,
.lufulus-step-list,
.lufulus-tab-content {
    border: 1px solid var(--border);
    border-radius: 8px;
    background: color-mix(in srgb, var(--bg-card) 94%, var(--accent) 6%);
    box-shadow: var(--shadow-sm);
}

.lufulus-hero-copy {
    padding: clamp(1.25rem, 3vw, 2rem);
}

.lufulus-kicker {
    margin: 0 0 0.35rem;
    color: var(--accent);
    font-size: 0.78rem;
    font-weight: 800;
    letter-spacing: 0.08em;
    text-transform: uppercase;
}

.lufulus-title {
    margin: 0;
    color: var(--text-primary);
    font-size: clamp(2rem, 4vw, 3.35rem);
    font-weight: 800;
    line-height: 1.02;
}

.lufulus-subtitle {
    max-width: 62ch;
    margin: 0.85rem 0 0;
    color: var(--text-secondary);
    font-size: 1rem;
    line-height: 1.6;
}

.lufulus-actions {
    display: flex;
    flex-wrap: wrap;
    gap: 0.65rem;
    margin-top: 1.35rem;
}

.lufulus-build-panel {
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    padding: 1.25rem;
}

.lufulus-device {
    display: grid;
    place-items: center;
    min-height: 138px;
    border: 1px solid color-mix(in srgb, var(--accent) 28%, var(--border));
    border-radius: 8px;
    background:
        linear-gradient(135deg, color-mix(in srgb, var(--accent) 16%, transparent), transparent 55%),
        var(--bg-input);
    color: var(--accent);
    font-size: 3.5rem;
}

.lufulus-build-meta {
    display: grid;
    gap: 0.65rem;
    margin-top: 1rem;
}

.lufulus-meta-row {
    display: flex;
    justify-content: space-between;
    gap: 1rem;
    color: var(--text-secondary);
    font-size: 0.88rem;
}

.lufulus-meta-row strong {
    color: var(--text-primary);
    text-align: right;
}

.lufulus-grid {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 1rem;
    margin-bottom: 1rem;
}

.lufulus-panel {
    padding: 1rem;
}

.lufulus-panel-icon {
    display: grid;
    place-items: center;
    width: 2.25rem;
    height: 2.25rem;
    margin-bottom: 0.85rem;
    border-radius: 8px;
    background: color-mix(in srgb, var(--accent) 16%, transparent);
    color: var(--accent);
    font-size: 1.15rem;
}

.lufulus-panel h2,
.lufulus-panel h3 {
    margin: 0 0 0.45rem;
    color: var(--text-primary);
    font-size: 1rem;
    font-weight: 750;
}

.lufulus-panel p {
    margin: 0;
    color: var(--text-secondary);
    line-height: 1.55;
}

.lufulus-step-list {
    display: grid;
    gap: 0.75rem;
    padding: 1rem;
    margin: 0;
    list-style: none;
}

.lufulus-step {
    display: grid;
    grid-template-columns: auto 1fr;
    gap: 0.75rem;
    align-items: start;
}

.lufulus-step-number,
.lufulus-rank-medal {
    display: grid;
    place-items: center;
    width: 2rem;
    height: 2rem;
    border-radius: 999px;
    background: color-mix(in srgb, var(--accent) 18%, transparent);
    color: var(--accent);
    font-weight: 800;
}

.lufulus-step strong {
    display: block;
    color: var(--text-primary);
}

.lufulus-step span {
    color: var(--text-secondary);
}

.lufulus-alert {
    margin: 1rem 0 0;
    padding: 0.85rem 1rem;
    border: 1px solid color-mix(in srgb, var(--warning) 45%, var(--border));
    border-radius: 8px;
    color: var(--warning);
    background: color-mix(in srgb, var(--warning) 12%, transparent);
}

.lufulus-hint {
    margin: 0.85rem 0 0;
    font-size: 0.9rem;
    color: color-mix(in srgb, var(--body-color, currentColor) 70%, transparent);
}

.lufulus-leaderboard-head {
    display: flex;
    flex-wrap: wrap;
    align-items: flex-end;
    justify-content: space-between;
    gap: 1rem;
    margin-bottom: 1rem;
}

.lufulus-last-update {
    display: inline-flex;
    align-items: center;
    gap: 0.4rem;
    margin-top: 0.85rem;
    padding: 0.35rem 0.55rem;
    border: 1px solid var(--border);
    border-radius: 999px;
    color: var(--text-secondary);
    background: var(--bg-input);
    font-size: 0.82rem;
}

.lufulus-tabs {
    gap: 0.35rem;
    margin-bottom: 0.75rem;
    border: 0;
}

.lufulus-tabs .nav-link {
    border: 1px solid var(--border);
    border-radius: 999px;
    color: var(--text-secondary);
    background: var(--bg-card);
    font-weight: 700;
}

.lufulus-tabs .nav-link.active {
    border-color: var(--accent);
    color: var(--text-on-accent);
    background: var(--accent);
}

.lufulus-tab-content {
    overflow: hidden;
    padding: 0;
}

.lufulus-table-wrap {
    overflow-x: auto;
}

.lufulus-table {
    width: 100%;
    min-width: 560px;
    margin: 0;
    color: var(--text-primary);
    border-collapse: collapse;
}

.lufulus-table th,
.lufulus-table td {
    padding: 0.85rem 1rem;
    border-bottom: 1px solid var(--border);
    vertical-align: middle;
}

.lufulus-table th {
    color: var(--text-secondary);
    font-size: 0.78rem;
    font-weight: 800;
    letter-spacing: 0.04em;
    text-transform: uppercase;
    background: var(--bg-input);
}

.lufulus-table tbody tr:hover {
    background: var(--bg-hover);
}

.lufulus-player {
    display: flex;
    flex-wrap: wrap;
    gap: 0.5rem;
    align-items: center;
}

.lufulus-player-badge {
    display: inline-flex;
    align-items: center;
    padding: 0.2rem 0.45rem;
    border-radius: 999px;
    font-size: 0.72rem;
    font-weight: 750;
}

.lufulus-player-badge.account {
    color: var(--accent);
    background: color-mix(in srgb, var(--accent) 15%, transparent);
}

.lufulus-player-badge.guest {
    color: var(--text-secondary);
    background: var(--bg-input);
}

.lufulus-empty {
    padding: 2rem 1rem;
    text-align: center;
    color: var(--text-secondary);
}

.lufulus-editor-head,
.lufulus-editor-status,
.lufulus-editor-form {
    border: 1px solid var(--border);
    border-radius: 8px;
    background: color-mix(in srgb, var(--bg-card) 94%, var(--accent) 6%);
    box-shadow: var(--shadow-sm);
}

.lufulus-editor-head {
    display: flex;
    flex-wrap: wrap;
    align-items: flex-end;
    justify-content: space-between;
    gap: 1rem;
    padding: clamp(1.25rem, 3vw, 2rem);
    margin-bottom: 1rem;
}

.lufulus-editor-status {
    display: grid;
    gap: 0.65rem;
    padding: 1rem;
    margin: 1rem 0;
}

.lufulus-editor-status .lufulus-meta-row strong {
    max-width: min(62ch, 100%);
    overflow-wrap: anywhere;
}

.lufulus-editor-file-grid {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 1rem;
}

.lufulus-editor-file {
    display: grid;
    gap: 1rem;
    align-content: space-between;
}

.lufulus-editor-file-meta {
    display: grid;
    gap: 0.25rem;
    color: var(--text-secondary);
    font-size: 0.84rem;
}

.lufulus-editor-form {
    padding: 1rem;
}

.lufulus-editor-textarea {
    min-height: min(68vh, 720px);
    resize: vertical;
    color: var(--text-primary);
    background: var(--bg-input);
    border-color: var(--border);
    font-family: "JetBrains Mono", ui-monospace, SFMono-Regular, Consolas, monospace;
    font-size: 0.86rem;
    line-height: 1.55;
    white-space: pre;
    overflow: auto;
}

.lufulus-editor-page {
    max-width: 1480px;
}

.lufulus-editor-app {
    display: grid;
    grid-template-columns: minmax(180px, 240px) minmax(0, 1fr) minmax(260px, 340px);
    gap: 1rem;
    align-items: stretch;
    min-height: 720px;
    margin-top: 1rem;
}

.lufulus-editor-sidebar,
.lufulus-editor-main,
.lufulus-editor-preview,
.lufulus-editor-actionbar {
    border: 1px solid var(--border);
    border-radius: 8px;
    background: color-mix(in srgb, var(--bg-card) 92%, var(--accent) 8%);
    box-shadow: var(--shadow-sm);
}

.lufulus-editor-sidebar,
.lufulus-editor-preview {
    min-width: 0;
    overflow: hidden;
}

.lufulus-editor-sidebar-head,
.lufulus-editor-preview-head,
.lufulus-editor-detail-head,
.lufulus-editor-toolbar {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 0.75rem;
}

.lufulus-editor-sidebar-head {
    padding: 0.85rem;
    border-bottom: 1px solid var(--border);
}

.lufulus-editor-sidebar-head strong,
.lufulus-editor-preview-head strong,
.lufulus-editor-detail-head h3,
.lufulus-editor-toolbar h2 {
    color: var(--text-primary);
}

.lufulus-editor-sidebar-head span,
.lufulus-editor-muted {
    color: var(--text-secondary);
    font-size: 0.84rem;
}

.lufulus-editor-collection-list {
    display: grid;
    gap: 0.35rem;
    padding: 0.55rem;
}

.lufulus-editor-collection,
.lufulus-editor-asset,
.lufulus-editor-chip {
    appearance: none;
    border: 1px solid transparent;
    color: var(--text-primary);
    background: transparent;
    text-align: left;
}

.lufulus-editor-collection {
    display: grid;
    grid-template-columns: 1.9rem minmax(0, 1fr);
    gap: 0.6rem;
    align-items: center;
    width: 100%;
    padding: 0.65rem;
    border-radius: 8px;
}

.lufulus-editor-collection i {
    display: grid;
    place-items: center;
    width: 1.9rem;
    height: 1.9rem;
    border-radius: 8px;
    background: color-mix(in srgb, var(--accent) 15%, transparent);
    color: var(--accent);
}

.lufulus-editor-collection strong,
.lufulus-editor-collection small,
.lufulus-editor-asset strong,
.lufulus-editor-asset small {
    display: block;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.lufulus-editor-collection small,
.lufulus-editor-asset small {
    color: var(--text-secondary);
    font-size: 0.76rem;
}

.lufulus-editor-collection:hover,
.lufulus-editor-collection[data-active="true"],
.lufulus-editor-asset:hover,
.lufulus-editor-asset[data-active="true"],
.lufulus-editor-chip:hover {
    border-color: color-mix(in srgb, var(--accent) 45%, var(--border));
    background: color-mix(in srgb, var(--accent) 12%, transparent);
}

.lufulus-editor-main {
    display: grid;
    grid-template-rows: auto minmax(0, 1fr);
    min-width: 0;
    overflow: hidden;
}

.lufulus-editor-toolbar {
    padding: 1rem;
    border-bottom: 1px solid var(--border);
}

.lufulus-editor-toolbar h2,
.lufulus-editor-detail-head h3 {
    margin: 0;
    font-size: 1.2rem;
}

.lufulus-editor-toolbar-actions {
    display: flex;
    flex-wrap: wrap;
    gap: 0.5rem;
    justify-content: flex-end;
}

.lufulus-editor-search {
    display: flex;
    align-items: center;
    gap: 0.45rem;
    min-width: min(260px, 100%);
    padding: 0.4rem 0.6rem;
    border: 1px solid var(--border);
    border-radius: 8px;
    color: var(--text-secondary);
    background: var(--bg-input);
}

.lufulus-editor-search input {
    width: 100%;
    border: 0;
    outline: 0;
    color: var(--text-primary);
    background: transparent;
}

.lufulus-editor-workbench {
    display: grid;
    grid-template-columns: minmax(220px, 32%) minmax(0, 1fr);
    min-height: 0;
}

.lufulus-editor-list-wrap {
    min-height: 0;
    overflow: auto;
    border-right: 1px solid var(--border);
}

.lufulus-editor-asset-list {
    display: grid;
    gap: 0.45rem;
    padding: 0.65rem;
}

.lufulus-editor-asset {
    display: grid;
    grid-template-columns: minmax(0, 1fr) auto;
    gap: 0.65rem;
    align-items: center;
    width: 100%;
    padding: 0.7rem;
    border-radius: 8px;
}

.lufulus-editor-asset code {
    max-width: 6rem;
    overflow: hidden;
    color: var(--accent);
    text-overflow: ellipsis;
}

.lufulus-editor-detail {
    min-width: 0;
    min-height: 0;
    overflow: auto;
    padding: 1rem;
}

.lufulus-editor-detail-head {
    margin-bottom: 1rem;
}

.lufulus-editor-badge {
    display: inline-flex;
    align-items: center;
    max-width: 100%;
    min-height: 1.65rem;
    padding: 0.25rem 0.55rem;
    border: 1px solid color-mix(in srgb, var(--accent) 35%, var(--border));
    border-radius: 999px;
    color: var(--accent);
    background: color-mix(in srgb, var(--accent) 12%, transparent);
    font-size: 0.75rem;
    font-weight: 750;
    overflow-wrap: anywhere;
}

.lufulus-editor-badge[data-state="error"],
.lufulus-editor-server-state[data-state="offline"] {
    border-color: color-mix(in srgb, var(--danger) 45%, var(--border));
    color: var(--danger);
    background: color-mix(in srgb, var(--danger) 12%, transparent);
}

.lufulus-editor-badge[data-state="ok"] {
    border-color: color-mix(in srgb, var(--success) 45%, var(--border));
    color: var(--success);
    background: color-mix(in srgb, var(--success) 12%, transparent);
}

.lufulus-editor-form-grid {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 0.75rem;
}

.lufulus-editor-field {
    display: grid;
    gap: 0.35rem;
    color: var(--text-secondary);
    font-size: 0.8rem;
    font-weight: 700;
}

.lufulus-editor-field input,
.lufulus-editor-json textarea {
    width: 100%;
    border: 1px solid var(--border);
    border-radius: 8px;
    color: var(--text-primary);
    background: var(--bg-input);
}

.lufulus-editor-field input {
    min-height: 2.4rem;
    padding: 0.45rem 0.6rem;
}

.lufulus-editor-field input[type="checkbox"] {
    width: 1.35rem;
    height: 1.35rem;
    min-height: 0;
}

.lufulus-editor-dropzones {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 0.75rem;
    margin-top: 1rem;
}

.lufulus-editor-dropzone {
    display: grid;
    gap: 0.25rem;
    min-height: 5rem;
    padding: 0.75rem;
    border: 1px dashed color-mix(in srgb, var(--accent) 42%, var(--border));
    border-radius: 8px;
    color: var(--text-secondary);
    background: color-mix(in srgb, var(--accent) 7%, transparent);
}

.lufulus-editor-dropzone[data-ready="true"] {
    border-style: solid;
    color: var(--text-primary);
    background: color-mix(in srgb, var(--accent) 18%, transparent);
}

.lufulus-editor-dropzone strong {
    color: var(--text-primary);
}

.lufulus-editor-dropzone code {
    width: max-content;
    max-width: 100%;
    color: var(--accent);
    overflow-wrap: anywhere;
}

.lufulus-editor-json {
    margin-top: 1rem;
}

.lufulus-editor-json summary {
    cursor: pointer;
    color: var(--text-primary);
    font-weight: 750;
}

.lufulus-editor-json textarea {
    min-height: 220px;
    margin: 0.75rem 0;
    padding: 0.75rem;
    resize: vertical;
    font-family: "JetBrains Mono", ui-monospace, SFMono-Regular, Consolas, monospace;
    font-size: 0.82rem;
    line-height: 1.5;
}

.lufulus-editor-preview {
    display: grid;
    align-content: start;
    gap: 0;
    min-height: 0;
    overflow: auto;
}

.lufulus-editor-preview section {
    display: grid;
    gap: 0.7rem;
    padding: 0.9rem;
    border-bottom: 1px solid var(--border);
}

.lufulus-editor-mini-meta {
    display: grid;
    gap: 0.45rem;
    margin: 0;
}

.lufulus-editor-mini-meta div {
    display: grid;
    grid-template-columns: auto minmax(0, 1fr);
    gap: 0.6rem;
}

.lufulus-editor-mini-meta dt {
    color: var(--text-secondary);
    font-size: 0.75rem;
}

.lufulus-editor-mini-meta dd {
    margin: 0;
    color: var(--text-primary);
    text-align: right;
    overflow-wrap: anywhere;
}

.lufulus-editor-relationships,
.lufulus-editor-validation,
.lufulus-editor-palette,
.lufulus-editor-table-health,
.lufulus-editor-wave-preview,
.lufulus-editor-build-preview {
    display: grid;
    gap: 0.5rem;
}

.lufulus-editor-relationship,
.lufulus-editor-validation-item,
.lufulus-editor-table-row,
.lufulus-editor-build-row {
    display: grid;
    gap: 0.2rem;
    padding: 0.65rem;
    border: 1px solid var(--border);
    border-radius: 8px;
    background: var(--bg-input);
}

.lufulus-editor-table-row {
    grid-template-columns: minmax(0, 1fr) auto;
    gap: 0.6rem;
    align-items: center;
}

.lufulus-editor-table-row[data-draft="true"] {
    border-color: color-mix(in srgb, var(--warning) 36%, var(--border));
}

.lufulus-editor-table-row strong,
.lufulus-editor-table-row small,
.lufulus-editor-build-row strong,
.lufulus-editor-build-row span,
.lufulus-editor-build-row small {
    display: block;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.lufulus-editor-table-row code {
    color: var(--accent);
    font-size: 0.72rem;
}

.lufulus-editor-table-row small,
.lufulus-editor-build-row small {
    color: var(--text-secondary);
    font-size: 0.75rem;
}

.lufulus-editor-wave-row {
    display: grid;
    grid-template-columns: 2.2rem minmax(0, 1fr) 3.8rem;
    gap: 0.45rem;
    align-items: center;
    color: var(--text-secondary);
    font-size: 0.75rem;
}

.lufulus-editor-wave-row div {
    height: 0.5rem;
    overflow: hidden;
    border-radius: 999px;
    background: var(--bg-input);
}

.lufulus-editor-wave-row div span {
    display: block;
    height: 100%;
    border-radius: inherit;
    background: var(--accent);
}

.lufulus-editor-wave-row[data-covered="false"] div span {
    background: var(--danger);
}

.lufulus-editor-build-row[data-obtainable="false"] {
    border-color: color-mix(in srgb, var(--danger) 45%, var(--border));
}

.lufulus-editor-relationship[data-broken="true"],
.lufulus-editor-validation-item[data-severity="error"] {
    border-color: color-mix(in srgb, var(--danger) 45%, var(--border));
    color: var(--danger);
}

.lufulus-editor-validation-item[data-severity="warning"] {
    border-color: color-mix(in srgb, var(--warning) 45%, var(--border));
    color: var(--warning);
}

.lufulus-editor-relationship span,
.lufulus-editor-validation-item span {
    color: var(--text-secondary);
    font-size: 0.82rem;
    line-height: 1.45;
}

.lufulus-editor-palette-group {
    display: grid;
    gap: 0.4rem;
}

.lufulus-editor-chip {
    padding: 0.45rem 0.55rem;
    border-color: var(--border);
    border-radius: 999px;
    color: var(--text-secondary);
    background: var(--bg-input);
    font-size: 0.78rem;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.lufulus-editor-actionbar {
    position: sticky;
    bottom: 0.75rem;
    z-index: 5;
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: space-between;
    gap: 0.75rem;
    margin-top: 1rem;
    padding: 0.85rem 1rem;
}

.lufulus-editor-actionbar strong {
    display: block;
    color: var(--text-primary);
}

.lufulus-editor-actionbar span {
    color: var(--text-secondary);
    font-size: 0.84rem;
}

@media (max-width: 820px) {
    .public-launch-strip,
    .public-launch-grid {
        grid-template-columns: 1fr;
    }

    .public-launch-agent-note {
        flex-direction: column;
    }

    .lufulus-hero,
    .lufulus-grid,
    .lufulus-editor-file-grid {
        grid-template-columns: 1fr;
    }

    .lufulus-title {
        font-size: 2.2rem;
    }

    .lufulus-editor-app {
        grid-template-columns: 1fr;
        min-height: 0;
    }

    .lufulus-editor-workbench {
        grid-template-columns: 1fr;
    }

    .lufulus-editor-list-wrap {
        max-height: 320px;
        border-right: 0;
        border-bottom: 1px solid var(--border);
    }

    .lufulus-editor-form-grid,
    .lufulus-editor-dropzones {
        grid-template-columns: 1fr;
    }
}

@media (max-width: 520px) {
    .public-launch-hero {
        min-height: 560px;
        background-position: 58% center;
    }

    .public-launch-legal-links {
        width: 100%;
    }

    .public-launch-legal-links a {
        flex: 1 1 9rem;
        justify-content: center;
    }

    .lufulus-page {
        padding-inline: 0.75rem;
    }

    .lufulus-actions .btn {
        width: 100%;
    }

    .lufulus-meta-row {
        flex-direction: column;
        gap: 0.15rem;
    }

    .lufulus-meta-row strong {
        text-align: left;
    }

    .lufulus-editor-toolbar,
    .lufulus-editor-actionbar,
    .lufulus-editor-toolbar-actions {
        align-items: stretch;
        flex-direction: column;
    }

    .lufulus-editor-search,
    .lufulus-editor-toolbar-actions .btn,
    .lufulus-editor-actionbar .btn {
        width: 100%;
    }

    .lufulus-editor-asset {
        grid-template-columns: 1fr;
    }
}
