:root {
    --shell-bg: var(--background);
    --shell-bg-soft: var(--surface_muted);
    --shell-chrome: var(--surface);
    --shell-panel: var(--surface_elevated, var(--surface));
    --shell-panel-strong: var(--surface_elevated, var(--surface));
    --shell-control: var(--surface_muted);
    --shell-line: var(--border);
    --shell-line-strong: var(--border_strong, var(--thumbnail_border));
    --shell-text: var(--text_main);
    --shell-text-soft: var(--text_muted);
    --shell-accent: var(--accent);
    --shell-accent-strong: var(--accent);
    --shell-accent-hover: var(--accent_hover, var(--accent));
    --shell-accent-soft: var(--selected_background);
    --shell-accent-text: var(--accent_text, var(--background));
    --shell-success: var(--success);
    --shell-danger: var(--danger);
    --shell-shadow: none;
    --shell-radius: 8px;
    --shell-radius-sm: 6px;
    --shell-sidebar-width: 248px;
    --shell-sidebar-collapsed-width: 60px;
    --shell-inspector-width: 360px;
    --shell-header-height: 66px;
}

* {
    box-sizing: border-box;
}

html,
body {
    margin: 0;
    min-height: 100%;
}

body.app-shell-body {
    min-height: 100vh;
    color: var(--shell-text);
    font-family: "Segoe UI Variable Text", "Segoe UI", Arial, sans-serif;
    background: var(--shell-bg);
}

body.app-shell-body::before {
    content: none;
}

.shell-hidden-form {
    display: none;
}

.app-shell-root,
.shell-app {
    min-height: 100vh;
}

.app-shell-fallback,
.app-shell-noscript,
.shell-boot,
.shell-full-state {
    max-width: 720px;
    margin: 72px auto;
    padding: 24px;
    border: 1px solid var(--shell-line);
    border-radius: var(--shell-radius);
    background: var(--shell-panel);
    box-shadow: var(--shell-shadow);
}

.app-shell-fallback-eyebrow,
.shell-kicker {
    margin: 0 0 8px;
    font-size: 0.76rem;
    letter-spacing: 0.16em;
    text-transform: uppercase;
    color: var(--shell-text-soft);
}

.shell-app {
    display: grid;
    grid-template-columns: var(--shell-sidebar-width) minmax(0, 1fr);
    transition: grid-template-columns 180ms ease;
}

.shell-app.is-focus-mode {
    grid-template-columns: minmax(0, 1fr);
}

.shell-app.is-focus-mode .shell-sidebar,
.shell-app.is-focus-mode .shell-inspector {
    display: none;
}

.shell-app.is-focus-mode .shell-body {
    grid-template-columns: minmax(0, 1fr);
}


.shell-brand {
    padding: 10px;
    border: 1px solid var(--shell-line);
    border-radius: var(--shell-radius);
    background: var(--shell-chrome);
}

.shell-brand h1,
.shell-panel-title,
.shell-inspector-title,
.shell-card-title,
.shell-view-title,
.shell-story-title {
    margin: 0;
    font-family: inherit;
    font-weight: 700;
    letter-spacing: 0;
}

.shell-brand p,
.shell-meta,
.shell-muted,
.shell-empty p,
.shell-error p,
.shell-field-value,
.shell-toolbar-note {
    color: var(--shell-text-soft);
}

.shell-brand p {
    margin: 8px 0 0;
    line-height: 1.45;
}


.shell-action-button,
.shell-inline-button {
    display: inline-flex;
    align-items: center;
    min-height: 34px;
    padding: 7px 10px;
    border-radius: var(--shell-radius-sm);
    background: var(--shell-control);
    border-color: var(--shell-line);
    color: var(--shell-text);
}

.ui-top-navigation-bar__guest-actions {
    display: inline-flex;
    align-items: center;
    gap: 8px;
}

.ui-top-navigation-bar__theme-actions {
    display: inline-flex;
    align-items: center;
    margin-left: 4px;
    padding-right: 10px;
}

.ui-top-navigation-bar__theme-actions.has-auth-actions {
    border-right: 1px solid var(--shell-line);
}

.shell-theme-toggle {
    display: inline-grid;
    place-items: center;
    width: 36px;
    min-width: 36px;
    min-height: 36px;
    padding: 0;
}

.shell-theme-toggle svg {
    width: 17px;
    height: 17px;
}

.shell-action-button.is-ghost {
    border-color: transparent;
    background: transparent;
    color: var(--shell-text-soft);
}

.shell-action-button.is-ghost:hover,
.shell-action-button.is-ghost:focus-visible {
    border-color: var(--shell-line);
    background: color-mix(in srgb, var(--shell-control) 52%, transparent);
    color: var(--shell-text);
}

.shell-action-button:hover,
.shell-inline-button:hover,
.shell-chip-button:hover,
.shell-row-button:hover {
    border-color: var(--shell-line-strong);
    background: var(--surface_hover);
}

.shell-action-button:disabled,
.shell-inline-button:disabled {
    cursor: not-allowed;
    opacity: 0.56;
}

.shell-action-button:disabled:hover,
.shell-inline-button:disabled:hover {
    border-color: var(--shell-line);
    background: var(--shell-control);
}

.shell-action-button.is-primary,
.shell-chip-button.is-active {
    background: var(--shell-accent-strong);
    border-color: var(--shell-accent-strong);
    color: var(--shell-accent-text);
}

.shell-action-button.is-primary:hover,
.shell-chip-button.is-active:hover {
    background: var(--shell-accent-hover);
    border-color: var(--shell-accent-hover);
}

.shell-body {
    display: grid;
    grid-template-columns: minmax(0, 1fr);
    gap: 10px;
    padding: 0;
}

.shell-body.has-inspector {
    grid-template-columns: minmax(0, 1fr) var(--shell-inspector-width);
}

.shell-content,
.shell-inspector {
    min-width: 0;
}

.shell-content {
    width: 100%;
}

.shell-panel,
.shell-inspector {
    border: 1px solid var(--shell-line);
    border-radius: var(--shell-radius);
    background: var(--shell-panel);
    box-shadow: var(--shell-shadow);
}

.shell-panel {
    padding: 12px;
}

.shell-view-header,
.shell-toolbar,
.shell-grid,
.shell-list,
.shell-card-stack,
.shell-metadata,
.shell-story-grid,
.shell-story-column,
.shell-sequence-list,
.shell-scene-list,
.shell-inspector-sections,
.shell-tag-row,
.shell-summary-grid {
    display: grid;
    gap: 10px;
}

.shell-view-header {
    margin-bottom: 12px;
}

.shell-view-title {
    font-size: 1.28rem;
}

.shell-toolbar {
    grid-template-columns: minmax(0, 1fr) auto;
    align-items: center;
    margin-bottom: 12px;
}

.shell-search {
    width: 100%;
    min-height: 34px;
    padding: 7px 10px;
    border: 1px solid var(--shell-line);
    border-radius: var(--shell-radius-sm);
    background: var(--shell-control);
    color: var(--shell-text);
    font: inherit;
}

.shell-summary-grid,
.shell-grid {
    grid-template-columns: repeat(auto-fit, minmax(210px, 1fr));
}

.shell-card,
.shell-list-item,
.shell-story-card,
.shell-story-scene,
.shell-empty,
.shell-error,
.shell-loading,
.shell-workspace-card {
    padding: 10px;
    border: 1px solid var(--shell-line);
    border-radius: var(--shell-radius);
    background: var(--shell-panel-strong);
}

.shell-list-item,
.shell-story-card,
.shell-story-scene,
.shell-row-button {
    text-align: left;
}

.shell-list-item.is-active,
.shell-story-card.is-active,
.shell-story-scene.is-active {
    border-color: var(--shell-accent);
    background: var(--shell-accent-soft);
}

.shell-list-item:hover,
.shell-story-card:hover,
.shell-story-scene:hover,
.shell-row-button:hover {
    border-color: var(--shell-line-strong);
}

.shell-row-button {
    width: 100%;
    padding: 0;
    border: 0;
    background: transparent;
}

.shell-card-title,
.shell-panel-title,
.shell-inspector-title,
.shell-story-title {
    font-size: 0.98rem;
}

.shell-card-meta,
.shell-story-meta,
.shell-inspector-meta,
.shell-field-label,
.shell-chip,
.shell-badge {
    font-size: 0.8rem;
    letter-spacing: 0.04em;
    text-transform: uppercase;
}

.shell-card-meta,
.shell-story-meta,
.shell-inspector-meta,
.shell-field-label {
    color: var(--shell-text-soft);
}

.shell-chip-row,
.shell-stat-row,
.shell-inline-actions {
    display: flex;
    gap: 10px;
    flex-wrap: wrap;
    align-items: center;
}

.shell-chip,
.shell-badge,
.shell-chip-button {
    padding: 3px 7px;
    border-radius: 999px;
    border: 1px solid var(--shell-line);
    background: var(--shell-bg-soft);
}

.shell-chip-button {
    background: var(--shell-accent-soft);
}

.shell-badge.is-status-active,
.shell-badge.is-status-published {
    color: var(--shell-success);
    border-color: color-mix(in srgb, var(--shell-success) 38%, transparent);
    background: color-mix(in srgb, var(--shell-success) 14%, transparent);
}

.shell-badge.is-status-draft,
.shell-badge.is-status-archived,
.shell-badge.is-status-inactive {
    color: var(--shell-text-soft);
    background: rgba(92, 82, 65, 0.08);
}

.shell-badge.is-status-error {
    color: var(--shell-danger);
    border-color: rgba(163, 61, 43, 0.28);
    background: rgba(163, 61, 43, 0.08);
}


.shell-full-state h1,
.shell-empty h2,
.shell-error h2,
.shell-loading h2 {
    margin-top: 0;
}

.shell-link {
    color: var(--shell-accent-strong);
    text-decoration: none;
}

.shell-link:hover {
    text-decoration: underline;
}

.project-onboarding {
    display: grid;
    gap: 18px;
    max-width: 720px;
    margin: 0 auto;
    padding: 24px 12px;
}

.project-onboarding__intro,
.project-onboarding__form {
    display: grid;
    gap: 12px;
}

.project-onboarding__field {
    display: grid;
    gap: 7px;
    font-weight: 700;
}

.project-onboarding__textarea {
    width: 100%;
    min-height: 112px;
    resize: vertical;
    padding: 9px 10px;
    border: 1px solid var(--shell-line);
    border-radius: var(--shell-radius-sm);
    background: var(--shell-control);
    color: var(--shell-text);
    font: inherit;
    font-weight: 400;
}

.project-onboarding__error {
    margin: 0;
    color: var(--shell-danger);
}