/* ================================================================
   HOME PAGE — Action-first launchpad
   Pagina inicial orientada a acoes concretas

   Layout: stats bar + suggested action + card grid
   Grid: auto-fill minmax (zoom-resilient), 3 colunas default
   ================================================================ */

/* --- Home Container (scrollable content area) --- */

.home-container {
    flex: 1;
    display: flex;
    flex-direction: column;
    overflow-y: auto;
    overflow-x: hidden;
    padding: var(--space-5, 20px) var(--space-4);
    background: var(--window-dark);
    max-width: var(--ecbt-modal-2xl, clamp(720px, 95vw, 1200px));
    margin: 0 auto;
    width: 100%;
}

.home-container.home-container-actions {
    max-width: clamp(960px, 95vw, 1680px);
}

/* --- Actions Shell (Phase A) --- */

.actions-shell {
    --actions-left-width: 320px;
    --actions-right-width: 520px;
    --actions-main-min: 380px;
    --actions-splitter-size: 12px;
    --actions-splitter-track-size: var(--actions-splitter-size);
    display: grid;
    grid-template-columns:
        minmax(0, var(--actions-left-width))
        var(--actions-splitter-track-size)
        minmax(var(--actions-main-min), 1fr)
        var(--actions-splitter-track-size)
        minmax(0, var(--actions-right-width));
    gap: var(--space-4);
    min-height: 100%;
    align-items: start;
}

.actions-shell--resize-disabled {
    --actions-splitter-track-size: 0px;
}

.actions-shell-splitter {
    width: var(--actions-splitter-track-size);
    align-self: stretch;
    position: relative;
    cursor: col-resize;
    border-radius: 999px;
    outline: none;
    background: transparent;
}

.actions-shell-splitter::before {
    content: '';
    position: absolute;
    top: 8px;
    bottom: 8px;
    left: 50%;
    width: 3px;
    transform: translateX(-50%);
    border-radius: 999px;
    background: rgba(255, 255, 255, 0.08);
    transition: background 0.15s ease;
}

.actions-shell-splitter:hover::before,
.actions-shell-splitter:focus-visible::before,
.actions-shell-splitter.is-dragging::before {
    background: rgba(76, 205, 196, 0.52);
}

.actions-shell--resize-disabled .actions-shell-splitter {
    display: none;
}

.actions-shell-resizing,
.actions-shell-resizing * {
    cursor: col-resize !important;
    user-select: none !important;
}

.actions-shell-left,
.actions-shell-right {
    display: flex;
    flex-direction: column;
    gap: var(--space-3);
    padding: var(--space-3);
    border: 1px solid var(--neutral-200);
    border-radius: var(--radius-lg);
    background: var(--surface-1);
    min-height: 0;
}

.actions-shell-main {
    min-width: 0;
}

.actions-shell-left--workspace {
    align-self: start;
    min-height: min(72vh, 860px);
}

.actions-shell-main--workspace {
    padding-top: 0;
}

.actions-shell-right--constellation {
    padding: 0;
    border: none;
    background: transparent;
}

#app.view-group-actions #actions-shell-root #constellation-hud.actions-shell-constellation-hosted {
    display: flex !important;
    height: min(72vh, 860px);
    min-height: 420px;
    max-height: min(72vh, 860px);
    --bottom-bg: rgba(10, 14, 20, 0.88);
    --bottom-bg-solid: rgba(10, 14, 20, 0.94);
    --bottom-border: rgba(255, 255, 255, 0.08);
    --bottom-text: rgba(255, 255, 255, 0.88);
    --bottom-text-muted: rgba(255, 255, 255, 0.68);
    --bottom-text-faint: rgba(255, 255, 255, 0.38);
    --bottom-hover: rgba(255, 255, 255, 0.08);
    border: 1px solid var(--neutral-200);
    border-radius: var(--radius-lg);
    background: var(--bottom-bg-solid);
    overflow: hidden;
    box-shadow: 0 20px 40px rgba(4, 10, 18, 0.28);
}

#app.view-group-actions #actions-shell-root #constellation-hud.actions-shell-constellation-hosted .constellation-collapse-btn,
#app.view-group-actions #actions-shell-root #constellation-hud.actions-shell-constellation-hosted .constellation-tab[data-ctab='pdplu'],
#app.view-group-actions #actions-shell-root #constellation-hud.actions-shell-constellation-hosted .constellation-tab[data-ctab='report'],
#app.view-group-actions #actions-shell-root #constellation-hud.actions-shell-constellation-hosted .constellation-tab[data-ctab='storyboard'] {
    display: none !important;
}

#app.view-group-actions #actions-shell-root #constellation-hud.actions-shell-constellation-hosted .constellation-tabs {
    padding-left: 8px;
}

#app.view-group-actions #actions-shell-root #constellation-hud.actions-shell-constellation-hosted #constellation-add-obs {
    display: none !important;
}

#app.view-group-actions #actions-shell-root #constellation-hud.actions-shell-constellation-hosted .constellation-view {
    background: var(--bottom-bg-solid);
}

#app.view-group-actions #actions-shell-root #constellation-hud.actions-shell-constellation-hosted #constellation-canvas {
    background: var(--bottom-bg);
}

.actions-shell-tools {
    display: grid;
    grid-template-columns: 1fr;
    gap: var(--space-2);
}

.actions-shell-tool-btn {
    height: 32px;
    border: 1px solid var(--neutral-200);
    border-radius: var(--radius-sm);
    background: var(--surface-1);
    color: var(--neutral-700);
    font-size: var(--text-xs);
    cursor: pointer;
    text-align: left;
    padding: 0 var(--space-2);
}

.actions-shell-rail {
    display: grid;
    gap: var(--space-1);
}

.actions-shell-rail-btn {
    height: 32px;
    display: flex;
    align-items: center;
    gap: var(--space-2);
    border: 1px solid transparent;
    border-radius: var(--radius-sm);
    background: transparent;
    color: var(--neutral-600);
    font-size: var(--text-xs);
    cursor: pointer;
    text-align: left;
    padding: 0 var(--space-2);
}

.actions-shell-rail-btn.active {
    border-color: var(--primary-300);
    background: var(--primary-50);
    color: var(--primary-700);
}

.actions-shell-tree {
    border-top: 1px solid var(--neutral-200);
    padding-top: var(--space-2);
}

.actions-shell-tree-filter-wrap {
    display: grid;
    gap: 4px;
    margin-bottom: var(--space-2);
}

.actions-shell-tree-filter-label {
    font-size: var(--text-xs);
    color: var(--neutral-500);
}

.actions-shell-tree-filter {
    height: 30px;
    border: 1px solid var(--neutral-200);
    border-radius: var(--radius-sm);
    background: var(--surface-1);
    color: var(--neutral-700);
    padding: 0 8px;
    font-size: var(--text-xs);
}

.actions-shell-tree-title {
    font-size: var(--text-xs);
    font-weight: 600;
    color: var(--neutral-700);
    margin-bottom: var(--space-2);
}

.actions-shell-tree-list {
    margin: 0;
    padding-left: 16px;
    display: grid;
    gap: 4px;
    color: var(--neutral-500);
    font-size: var(--text-xs);
}

.actions-shell-tree-node {
    width: 100%;
    border: 1px solid transparent;
    border-radius: var(--radius-sm);
    background: transparent;
    color: var(--neutral-600);
    text-align: left;
    cursor: pointer;
    font-size: var(--text-xs);
    padding: 4px 6px;
}

.actions-shell-tree-node:hover {
    background: var(--neutral-100);
}

.actions-shell-tree-node.active {
    border-color: var(--accent-500);
    color: var(--accent-500);
    background: rgba(45, 138, 122, 0.08);
}

.actions-shell-tree-empty {
    font-size: var(--text-xs);
    color: var(--neutral-500);
    margin-top: var(--space-2);
}

.actions-shell-footer {
    margin-top: auto;
    border-top: 1px solid var(--neutral-200);
    padding-top: var(--space-2);
    font-size: var(--text-xs);
    color: var(--neutral-500);
    display: grid;
    gap: 4px;
}

.actions-shell-workspace,
.actions-shell-footer-card {
    display: grid;
    gap: var(--space-2);
}

.actions-shell-workspace-head,
.actions-shell-footer-toggle {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: var(--space-2);
}

.actions-shell-workspace-head-copy {
    min-width: 0;
    display: grid;
    gap: 2px;
}

.actions-shell-layout-btn {
    height: 28px;
    border: 1px solid var(--neutral-200);
    border-radius: 999px;
    background: var(--surface-1);
    color: var(--neutral-600);
    font-size: var(--text-xs);
    padding: 0 10px;
    cursor: pointer;
    white-space: nowrap;
}

.actions-shell-layout-btn:hover {
    border-color: var(--accent-500);
    color: var(--accent-500);
    background: rgba(45, 138, 122, 0.08);
}

.actions-shell-footer-toggle {
    width: 100%;
    border: 1px solid var(--neutral-200);
    border-radius: var(--radius-md);
    background: var(--surface-1);
    color: var(--neutral-700);
    padding: var(--space-2);
    cursor: pointer;
    text-align: left;
}

.actions-shell-footer-toggle:hover {
    border-color: var(--accent-500);
}

.actions-shell-footer-title-wrap {
    min-width: 0;
    display: grid;
    gap: 2px;
}

.actions-shell-workspace-title,
.actions-shell-footer-title,
.actions-shell-footer-label {
    font-size: var(--text-xs);
    font-weight: 600;
    color: var(--neutral-700);
}

.actions-shell-workspace-status,
.actions-shell-footer-status,
.actions-shell-workspace-label,
.actions-shell-footer-selection {
    font-size: var(--text-xs);
    color: var(--neutral-500);
}

.actions-shell-footer-selection {
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    max-width: 100%;
}

.actions-shell-workspace-group,
.actions-shell-footer-group {
    display: grid;
    gap: 6px;
}

.actions-shell-scope-switcher,
.actions-shell-source-rail,
.actions-shell-footer-chip-row {
    display: flex;
    gap: 6px;
    flex-wrap: wrap;
}

.actions-shell-chip {
    height: 28px;
    border: 1px solid var(--neutral-200);
    border-radius: 999px;
    background: var(--surface-1);
    color: var(--neutral-600);
    font-size: var(--text-xs);
    padding: 0 10px;
    cursor: pointer;
}

.actions-shell-chip.active,
.actions-shell-chip[aria-pressed='true'] {
    border-color: var(--accent-500);
    color: var(--accent-500);
    background: rgba(45, 138, 122, 0.08);
}

.actions-shell-chip:disabled {
    opacity: 0.45;
    cursor: not-allowed;
}

.actions-shell-model-list,
.actions-shell-snapshot-list,
.actions-shell-footer-list {
    display: grid;
    gap: 6px;
}

.actions-shell-footer-controls {
    display: grid;
    gap: var(--space-2);
}

.actions-shell-footer-list {
    max-height: 180px;
    overflow: auto;
    padding-right: 2px;
}

.actions-shell-model-item {
    width: 100%;
    display: grid;
    gap: 2px;
    border: 1px solid var(--neutral-200);
    border-radius: var(--radius-md);
    background: var(--surface-1);
    color: var(--neutral-700);
    padding: var(--space-2);
    text-align: left;
    cursor: pointer;
}

.actions-shell-model-item:hover {
    border-color: var(--accent-500);
}

.actions-shell-model-item.active {
    border-color: var(--accent-500);
    background: rgba(45, 138, 122, 0.08);
}

.actions-shell-model-title {
    font-size: var(--text-xs);
    font-weight: 600;
    color: var(--neutral-700);
}

.actions-shell-model-meta,
.actions-shell-model-status,
.actions-shell-workspace-empty,
.actions-shell-footer-meta {
    font-size: var(--text-xs);
    color: var(--neutral-500);
}

.actions-shell-footer-meta {
    display: flex;
    gap: 6px;
    flex-wrap: wrap;
}

.actions-shell-footer-meta span {
    border: 1px solid var(--neutral-200);
    border-radius: 999px;
    padding: 2px 8px;
    background: rgba(255, 255, 255, 0.02);
}

.actions-shell-footer-controls.is-hidden {
    display: none;
}

.actions-shell-workspace-actions {
    display: flex;
    justify-content: flex-start;
}

.actions-shell-side-panel {
    flex: 1;
    min-height: 320px;
    display: grid;
    gap: var(--space-2);
}

.actions-shell-side-tabs {
    display: flex;
    gap: 6px;
}

.actions-shell-side-tab,
.actions-shell-inspector-btn {
    height: 28px;
    border: 1px solid var(--neutral-200);
    border-radius: 999px;
    background: var(--surface-1);
    color: var(--neutral-600);
    font-size: var(--text-xs);
    padding: 0 10px;
    cursor: pointer;
}

.actions-shell-side-tab.active,
.actions-shell-inspector-btn:hover {
    border-color: var(--accent-500);
    color: var(--accent-500);
    background: rgba(45, 138, 122, 0.08);
}

.actions-shell-side-body {
    flex: 1;
    min-height: 0;
    display: grid;
}

.actions-shell-side-pane {
    min-height: 0;
    display: flex;
}

.actions-shell-side-pane.is-hidden {
    display: none;
}

.actions-shell-inspector {
    width: 100%;
    min-height: 0;
    display: grid;
    gap: var(--space-2);
    padding: var(--space-3);
    border: 1px solid var(--neutral-200);
    border-radius: var(--radius-lg);
    background: var(--surface-1);
}

.actions-shell-inspector-head {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: var(--space-2);
}

.actions-shell-inspector-title-wrap {
    min-width: 0;
    display: grid;
    gap: 4px;
}

.actions-shell-inspector-title {
    font-size: var(--text-xs);
    font-weight: 600;
    color: var(--neutral-700);
}

.actions-shell-inspector-breadcrumb {
    font-size: var(--text-xs);
    color: var(--neutral-500);
    word-break: break-word;
}

.actions-shell-inspector-actions {
    display: flex;
    gap: 6px;
    flex-wrap: wrap;
    justify-content: flex-end;
}

.actions-shell-inspector-search-wrap {
    display: grid;
    gap: 4px;
}

.actions-shell-inspector-body {
    min-height: 0;
    overflow: auto;
    padding-right: 2px;
}

.actions-shell-inspector-summary {
    display: grid;
    gap: var(--space-3);
}

.actions-shell-inspector-section {
    display: grid;
    gap: 6px;
}

.actions-shell-inspector-kicker {
    font-size: var(--text-xs);
    color: var(--neutral-500);
    text-transform: uppercase;
    letter-spacing: 0.04em;
}

.actions-shell-inspector-hero {
    font-size: var(--text-md);
    font-weight: 600;
    color: var(--neutral-700);
    word-break: break-word;
}

.actions-shell-inspector-meta {
    font-size: var(--text-xs);
    color: var(--neutral-500);
    line-height: 1.45;
}

.actions-shell-inspector-stats {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: var(--space-2);
}

.actions-shell-inspector-stat {
    display: grid;
    gap: 4px;
    border: 1px solid var(--neutral-200);
    border-radius: var(--radius-md);
    background: rgba(255, 255, 255, 0.02);
    padding: var(--space-2);
}

.actions-shell-inspector-stat strong {
    font-size: var(--text-md);
    color: var(--neutral-700);
}

.actions-shell-inspector-stat span,
.actions-shell-inspector-empty {
    font-size: var(--text-xs);
    color: var(--neutral-500);
}

.actions-shell-inspector-chips,
.actions-shell-inspector-action-row {
    display: flex;
    gap: 6px;
    flex-wrap: wrap;
}

.actions-shell-inspector-chip {
    border: 1px solid var(--neutral-200);
    border-radius: 999px;
    padding: 4px 8px;
    font-size: var(--text-xs);
    color: var(--neutral-600);
    background: rgba(255, 255, 255, 0.02);
}

.actions-shell-inspector-body .inspector-node {
    border-radius: var(--radius-sm);
}

.actions-shell-side-pane .actions-shell-tree {
    width: 100%;
    min-height: 0;
    display: grid;
    align-content: start;
    border: 1px solid var(--neutral-200);
    border-radius: var(--radius-lg);
    background: var(--surface-1);
    padding: var(--space-3);
}

.actions-shell-side-pane .actions-shell-tree-list {
    max-height: 100%;
    overflow: auto;
    padding-right: 2px;
}

.actions-shell-tabs {
    display: flex;
    align-items: center;
    gap: var(--space-2);
    margin-bottom: var(--space-2);
}

.actions-shell-tab {
    display: inline-flex;
    align-items: center;
    height: 28px;
    padding: 0 10px;
    border: 1px solid var(--neutral-200);
    border-radius: 999px;
    font-size: var(--text-xs);
    color: var(--neutral-600);
    background: var(--surface-1);
}

.actions-shell-tab.active {
    border-color: var(--accent-500);
    color: var(--accent-500);
}

.actions-shell-breadcrumb {
    margin-bottom: var(--space-3);
    font-size: var(--text-xs);
    color: var(--neutral-500);
}

.actions-shell-view-toggle {
    display: flex;
    gap: var(--space-1);
    margin-bottom: var(--space-2);
    flex-wrap: wrap;
}

.actions-shell-view-btn {
    height: 28px;
    border: 1px solid var(--neutral-200);
    border-radius: 999px;
    background: var(--surface-1);
    color: var(--neutral-600);
    font-size: var(--text-xs);
    padding: 0 10px;
    cursor: pointer;
}

.actions-shell-view-btn.active {
    border-color: var(--accent-500);
    color: var(--accent-500);
}

.actions-shell-context-toolbar {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: var(--space-2);
    margin-bottom: var(--space-3);
}

.actions-shell-toolbar-title {
    font-size: var(--text-xs);
    color: var(--neutral-500);
    margin-right: var(--space-1);
}

.actions-shell-toolbar-btn {
    height: 30px;
    border: 1px solid var(--neutral-200);
    border-radius: 999px;
    background: var(--surface-1);
    color: var(--neutral-600);
    font-size: var(--text-xs);
    padding: 0 10px;
    cursor: pointer;
}

.actions-shell-toolbar-btn:hover {
    border-color: var(--accent-500);
    color: var(--accent-500);
}

.actions-shell-context-surface {
    border: 1px solid var(--neutral-200);
    border-radius: var(--radius-lg);
    background: var(--surface-1);
    padding: var(--space-3);
    margin-bottom: var(--space-4);
}

.actions-shell-surface-head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-bottom: var(--space-2);
    font-size: var(--text-xs);
    color: var(--neutral-700);
}

.actions-shell-surface-origin {
    color: var(--neutral-500);
}

.actions-shell-surface-grid {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: var(--space-2);
    font-size: var(--text-xs);
    color: var(--neutral-600);
}

.actions-shell-surface-actions {
    margin-top: var(--space-3);
    display: grid;
    gap: var(--space-2);
}

.actions-shell-surface-actions-label {
    font-size: var(--text-xs);
    color: var(--neutral-500);
}

.actions-shell-surface-actions-list {
    display: flex;
    gap: var(--space-2);
    flex-wrap: wrap;
}

.actions-shell-surface-action-btn {
    height: 30px;
    border: 1px solid var(--neutral-200);
    border-radius: 999px;
    background: var(--surface-1);
    color: var(--neutral-600);
    font-size: var(--text-xs);
    padding: 0 10px;
    cursor: pointer;
}

.actions-shell-surface-action-btn:hover {
    border-color: var(--accent-500);
    color: var(--accent-500);
}

.actions-shell-right h4 {
    margin: 0 0 var(--space-2) 0;
    font-size: var(--text-xs);
    color: var(--neutral-700);
}

.actions-shell-right ul {
    margin: 0;
    padding-left: 16px;
    display: grid;
    gap: 4px;
    color: var(--neutral-500);
    font-size: var(--text-xs);
}

.actions-shell-graph,
.actions-shell-ai {
    border-top: 1px solid var(--neutral-200);
    padding-top: var(--space-2);
}

.actions-shell-premium-btn {
    height: 30px;
    border: 1px solid var(--neutral-200);
    border-radius: var(--radius-sm);
    background: var(--surface-1);
    color: var(--neutral-600);
    font-size: var(--text-xs);
    padding: 0 10px;
    cursor: pointer;
}

.actions-shell-premium-btn:hover {
    border-color: var(--accent-500);
    color: var(--accent-500);
}

.actions-shell-premium-lock {
    font-size: var(--text-xs);
    color: var(--neutral-500);
    background: var(--neutral-100);
    border: 1px dashed var(--neutral-200);
    border-radius: var(--radius-sm);
    padding: var(--space-2);
}

/* --- Header Section (Welcome + Branding) --- */

.home-header {
    margin-bottom: var(--space-4);
}

.home-header:empty {
    display: none;
}

.home-header-content {
    display: flex;
    align-items: center;
    gap: var(--space-4);
    padding: var(--space-5);
    background: linear-gradient(135deg, var(--primary-900) 0%, var(--primary-800) 100%);
    border: 1px solid var(--primary-700);
    border-radius: var(--radius-lg);
    color: var(--neutral-0);
}

.home-header-icon {
    flex-shrink: 0;
}

.home-header-logo {
    height: 48px;
    width: auto;
    object-fit: contain;
}

.home-header-text {
    flex: 1;
    min-width: 0;
}

.home-header-text h1 {
    font-size: var(--text-xl, 16px);
    font-weight: 600;
    margin: 0 0 var(--space-1) 0;
    color: var(--neutral-0);
}

.home-header-text p {
    font-size: var(--text-sm);
    margin: 0;
    color: var(--primary-200);
    line-height: 1.5;
}

.home-header-actions {
    display: flex;
    align-items: center;
    gap: var(--space-2);
    flex-shrink: 0;
}

.home-header-cta {
    display: flex;
    align-items: center;
    gap: var(--space-2);
    height: 40px;
    padding: 0 var(--space-4);
    background: var(--accent-500);
    border: none;
    border-radius: var(--radius-md);
    color: #fff;
    font-size: var(--text-sm);
    font-weight: 600;
    cursor: pointer;
    transition: background 0.15s, transform 0.1s;
    flex-shrink: 0;
}

.home-header-cta:hover {
    background: var(--accent-600);
}

.home-header-cta:active {
    transform: scale(0.98);
}

.home-header-cta.secondary {
    background: transparent;
    border: 1px solid rgba(255, 255, 255, 0.24);
    color: var(--neutral-0);
}

.home-header-cta.secondary:hover {
    background: rgba(255, 255, 255, 0.08);
}

/* --- Random Boot State --- */

.home-boot-state {
    display: none;
    align-items: center;
    gap: var(--space-2);
    padding: var(--space-2) var(--space-3);
    margin-bottom: var(--space-3);
    border: 1px solid var(--neutral-200);
    border-radius: var(--radius-md, 4px);
    background: var(--surface-1, var(--neutral-50));
    color: var(--neutral-600);
    font-size: var(--text-sm);
}

/* --- Stats Bar --- */

.home-stats {
    display: flex;
    gap: var(--space-3);
    margin-bottom: var(--space-4);
}

.home-stat-card {
    flex: 1;
    display: flex;
    align-items: center;
    gap: var(--space-3);
    padding: var(--space-3) var(--space-4);
    border: 1px solid var(--neutral-200);
    border-radius: var(--radius-lg);
    background: var(--surface-1, var(--neutral-50));
    min-height: 64px;
}

.home-stat-icon {
    width: 36px;
    height: 36px;
    display: flex;
    align-items: center;
    justify-content: center;
    background: var(--primary-50);
    border-radius: var(--radius-md);
    color: var(--primary-500);
    flex-shrink: 0;
}

.home-stat-content {
    flex: 1;
    display: flex;
    flex-direction: column;
    min-width: 0;
}

.home-stat-value {
    font-size: var(--text-lg, 14px);
    font-weight: 700;
    color: var(--primary-500);
    line-height: 1.2;
}

.home-stat-label {
    font-size: var(--text-xs);
    color: var(--neutral-500);
    margin-top: 1px;
}

/* Progress bar for completeness stat */
.home-stat-progress {
    width: 100%;
    height: 3px;
    background: var(--neutral-200);
    border-radius: 2px;
    margin-top: var(--space-1);
    overflow: hidden;
}

.home-stat-progress-bar {
    height: 100%;
    border-radius: 2px;
    transition: width 0.3s ease;
}

.home-stat-progress-bar.low {
    background: var(--warning-300);
}

.home-stat-progress-bar.medium {
    background: var(--accent-500);
}

.home-stat-progress-bar.high {
    background: var(--success);
}

/* --- Suggested Actions --- */

.home-suggested {
    display: flex;
    flex-direction: column;
    gap: var(--space-2);
    padding: var(--space-3) var(--space-4);
    margin-bottom: var(--space-4);
    border: 1px solid var(--neutral-200);
    border-left-width: 3px;
    border-left-color: var(--accent-500);
    border-radius: var(--radius-lg);
    background: var(--surface-1, var(--neutral-50));
}

.home-suggested:empty {
    display: none;
}

.home-suggested-header {
    display: flex;
    align-items: center;
    gap: var(--space-2);
    font-size: var(--text-xs);
    font-weight: 600;
    color: var(--accent-500);
    text-transform: uppercase;
    letter-spacing: 0.5px;
    margin-bottom: var(--space-1);
}

.home-suggested-row {
    display: flex;
    align-items: center;
    gap: var(--space-3);
    padding: var(--space-2) 0;
    border-bottom: 1px solid var(--neutral-100);
}

.home-suggested-row:last-child {
    border-bottom: none;
}

.home-suggested-row.success {
    background: var(--success-bg, rgba(61, 138, 92, 0.08));
    margin: 0 calc(-1 * var(--space-4));
    padding: var(--space-2) var(--space-4);
    border-radius: var(--radius-md);
    border-bottom: none;
}

.home-suggested-icon {
    width: 28px;
    height: 28px;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: var(--radius-md);
    flex-shrink: 0;
}

.home-suggested-icon.warning {
    background: var(--warning-50);
    color: var(--warning);
}

.home-suggested-icon.info {
    background: var(--primary-50);
    color: var(--primary-500);
}

.home-suggested-icon.success {
    background: rgba(61, 138, 92, 0.15);
    color: var(--success);
}

.home-suggested-content {
    flex: 1;
    min-width: 0;
}

.home-suggested-msg {
    font-size: var(--text-sm);
    color: var(--neutral-700);
    line-height: 1.4;
}

.home-suggested-btn {
    width: 32px;
    height: 32px;
    display: flex;
    align-items: center;
    justify-content: center;
    border: 1px solid var(--neutral-200);
    border-radius: var(--radius-md);
    background: var(--neutral-0);
    color: var(--neutral-600);
    cursor: pointer;
    flex-shrink: 0;
    transition: background 0.15s, border-color 0.15s, color 0.15s;
}

.home-suggested-btn:hover {
    background: var(--accent-500);
    border-color: var(--accent-500);
    color: #fff;
}

.home-suggested-btn:active {
    opacity: 0.85;
}

.home-inline-spinner {
    width: 14px;
    height: 14px;
    border: 2px solid var(--neutral-300, #c8d1d7);
    border-top-color: var(--accent-500);
    border-radius: 50%;
    display: inline-block;
    animation: home-spin 0.8s linear infinite;
    flex-shrink: 0;
}

/* --- Action Cards Grid (Sections) --- */

.home-grid {
    display: flex;
    flex-direction: column;
    gap: var(--space-5);
    flex: 1;
}

/* Section container */
.home-section {
    display: flex;
    flex-direction: column;
    gap: var(--space-3);
}

.home-section.primary {
    order: -1;
}

/* Section header */
.home-section-header {
    display: flex;
    align-items: center;
    gap: var(--space-2);
    padding-bottom: var(--space-2);
    border-bottom: 1px solid var(--neutral-200);
}

.home-section-title {
    font-size: var(--text-xs);
    font-weight: 600;
    color: var(--neutral-500);
    text-transform: uppercase;
    letter-spacing: 0.5px;
}

.home-section-count {
    font-size: var(--text-xs);
    font-weight: 600;
    color: var(--neutral-600); /* was neutral-400 — 7.2:1 on neutral-100 (SPEC_CONTRAST_TESTING_9_77) */
    background: var(--neutral-100);
    padding: 1px 6px;
    border-radius: 10px;
}

/* Section grid */
.home-section-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(260px, 1fr));
    gap: var(--space-3);
}

.home-section-grid.single {
    grid-template-columns: minmax(280px, 400px);
}

/* Individual cards */
.home-card {
    display: flex;
    flex-direction: column;
    gap: var(--space-2);
    padding: var(--space-4);
    border: 1px solid var(--neutral-200);
    border-radius: var(--radius-lg);
    background: var(--surface-1);
    box-shadow: var(--shadow-sm);
    cursor: pointer;
    transition: box-shadow 0.15s, border-color 0.15s, transform 0.1s;
    text-align: left;
    min-height: 110px;
}

.home-card:hover {
    box-shadow: var(--shadow-md);
    border-color: var(--neutral-300, #bcc6cd);
}

.home-card:active {
    transform: scale(0.98);
}

.home-card:focus-visible {
    outline: 2px solid var(--accent-500);
    outline-offset: 2px;
}

.home-card-disabled {
    opacity: 0.55;
    cursor: not-allowed;
    pointer-events: none;
}

/* Primary card (Spatial View) */
.home-card-primary {
    flex-direction: row;
    align-items: center;
    gap: var(--space-4);
    padding: var(--space-5);
    min-height: 100px;
    background: linear-gradient(135deg, var(--surface-1) 0%, var(--primary-50) 100%);
    border-color: var(--primary-200);
}

.home-card-primary:hover {
    border-color: var(--primary-300);
    box-shadow: var(--shadow-lg);
}

.home-card-primary .home-card-icon-large {
    width: 48px;
    height: 48px;
    background: var(--primary-500);
    color: var(--neutral-0);
    border-radius: var(--radius-lg);
}

.home-card-primary .home-card-title {
    font-size: var(--text-lg);
    color: var(--primary-700);
}

.home-card-primary .home-card-desc {
    color: var(--primary-600);
}

.home-card-arrow {
    margin-left: auto;
    color: var(--primary-500);
    opacity: 0.6;
    transition: opacity 0.15s, transform 0.15s;
}

.home-card-primary:hover .home-card-arrow {
    opacity: 1;
    transform: translateX(4px);
}

/* Standard card icon */
.home-card-icon {
    width: 36px;
    height: 36px;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: var(--radius-md, 4px);
    background: var(--primary-50);
    color: var(--primary-500);
    flex-shrink: 0;
}

.home-card-title {
    font-size: var(--text-base, 14px);
    font-weight: 600;
    color: var(--neutral-800);
    line-height: 1.3;
}

.home-card-desc {
    font-size: var(--text-sm);
    color: var(--neutral-500);
    line-height: 1.4;
}

/* --- Empty State (2D+D, scene error) --- */

.home-empty-state {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: var(--space-3);
    padding: var(--space-6, 24px);
    text-align: center;
    color: var(--neutral-500);
    height: 100%;
    min-height: 300px;
}

.home-empty-state h3 {
    font-size: var(--text-lg, 16px);
    font-weight: 600;
    color: var(--neutral-700);
    margin: 0;
}

.home-empty-state p {
    font-size: var(--text-sm);
    max-width: clamp(220px, 80vw, 320px);
    margin: 0;
}

.home-empty-state button {
    height: 36px;
    padding: 0 var(--space-4);
    border: 1px solid var(--accent-500);
    border-radius: var(--radius-sm);
    background: var(--accent-500);
    color: #fff;
    font-size: var(--text-sm);
    font-weight: 600;
    cursor: pointer;
    transition: opacity 0.15s;
}

.home-empty-state button:hover {
    opacity: 0.85;
}

/* --- View transition --- */
/* Group chrome rules moved to swipe-nav.css (canonical owner) */

/* --- 3D Loading Indicator --- */

.home-3d-loading {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: var(--space-3);
    height: 100%;
    color: var(--neutral-500);
    font-size: var(--text-sm);
}

.home-3d-loading-spinner {
    width: 32px;
    height: 32px;
    border: 3px solid var(--neutral-200);
    border-top-color: var(--accent-500);
    border-radius: 50%;
    animation: home-spin 0.8s linear infinite;
}

@keyframes home-spin {
    to { transform: rotate(360deg); }
}

/* --- Responsive --- */

@media (max-width: 1279px) {
    .actions-shell {
        grid-template-columns: minmax(0, 1fr);
    }

    .actions-shell-splitter {
        display: none;
    }

    .actions-shell-left,
    .actions-shell-right {
        order: 2;
        width: 100%;
    }

    .actions-shell-main {
        order: 1;
    }
}

@media (max-width: 1023px) {
    .actions-shell {
        grid-template-columns: minmax(0, 1fr);
    }

    .actions-shell-splitter {
        display: none;
    }

    .actions-shell-left,
    .actions-shell-right {
        order: 2;
    }

    .actions-shell-main {
        order: 1;
    }

    .actions-shell-surface-grid {
        grid-template-columns: 1fr;
    }

    .actions-shell-inspector-stats {
        grid-template-columns: 1fr;
    }

    .home-suggested-btn {
        min-height: 44px;
        width: 44px;
    }

    .home-stats {
        flex-wrap: wrap;
        gap: var(--space-2);
    }

    .home-stat-card {
        min-width: calc(50% - var(--space-2));
    }

    .home-header-content {
        flex-direction: column;
        text-align: center;
        gap: var(--space-3);
    }

    .home-header-actions {
        width: 100%;
        flex-direction: column;
    }

    .home-header-cta {
        width: 100%;
        justify-content: center;
    }

    .home-section-grid {
        grid-template-columns: 1fr;
    }

    .home-section-grid.single {
        grid-template-columns: 1fr;
    }

    .home-card-primary {
        flex-direction: column;
        text-align: center;
    }

    .home-card-arrow {
        display: none;
    }
}

@media (max-width: 479px) {
    .home-container {
        padding: var(--space-3);
    }

    .home-grid {
        gap: var(--space-4);
    }

    .home-section-grid {
        gap: var(--space-2);
    }

    .home-card {
        padding: var(--space-3);
        min-height: 90px;
    }

    .home-stat-card {
        padding: var(--space-2) var(--space-3);
        min-height: 56px;
    }

    .home-stat-icon {
        width: 28px;
        height: 28px;
    }
}

/* --- EIS Section --- */

.home-eis {
    display: flex;
    flex-direction: column;
    gap: var(--space-3);
    padding: var(--space-4);
    margin-bottom: var(--space-4);
    border: 1px solid var(--neutral-200);
    border-radius: var(--radius-lg);
    background: var(--surface-1);
}

.home-eis:empty {
    display: none;
}

.home-eis-badge {
    font-size: var(--text-xs);
    font-weight: 600;
    padding: 2px 8px;
    border-radius: 10px;
    text-transform: uppercase;
    letter-spacing: 0.5px;
}

.home-eis-badge.high {
    background: rgba(61, 138, 92, 0.15);
    color: var(--success);
}

.home-eis-badge.medium {
    background: rgba(45, 138, 122, 0.15);
    color: var(--accent-600);
}

.home-eis-badge.low {
    background: rgba(184, 70, 70, 0.15);
    color: var(--error);
}

.home-eis-content {
    display: flex;
    gap: var(--space-5);
    align-items: flex-start;
}

.home-eis-main {
    display: flex;
    align-items: baseline;
    gap: var(--space-1);
    min-width: 100px;
}

.home-eis-score {
    font-size: 36px;
    font-weight: 700;
    line-height: 1;
}

.home-eis-score.high {
    color: var(--success);
}

.home-eis-score.medium {
    color: var(--accent-500);
}

.home-eis-score.low {
    color: var(--error);
}

.home-eis-scale {
    font-size: var(--text-sm);
    color: var(--neutral-400);
    font-weight: 500;
}

.home-eis-axes {
    flex: 1;
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: var(--space-2) var(--space-4);
}

.home-eis-axis {
    display: flex;
    align-items: center;
    gap: var(--space-2);
}

.home-eis-axis-label {
    width: 24px;
    font-size: var(--text-xs);
    font-weight: 600;
    color: var(--neutral-500);
    text-align: center;
}

.home-eis-axis-bar {
    flex: 1;
    height: 4px;
    background: var(--neutral-200);
    border-radius: 2px;
    overflow: hidden;
}

.home-eis-axis-fill {
    height: 100%;
    background: var(--primary-500);
    border-radius: 2px;
    transition: width 0.3s ease;
}

.home-eis-axis-value {
    width: 20px;
    font-size: var(--text-xs);
    font-weight: 600;
    color: var(--neutral-600);
    text-align: right;
}

/* --- Reputation Section --- */

.home-reputation {
    display: flex;
    flex-direction: column;
    gap: var(--space-3);
    padding: var(--space-4);
    margin-bottom: var(--space-4);
    border: 1px solid var(--neutral-200);
    border-radius: var(--radius-lg);
    background: var(--surface-1);
}

.home-reputation:empty {
    display: none;
}

.home-reputation-level {
    font-size: var(--text-xs);
    font-weight: 600;
    padding: 2px 8px;
    border-radius: 10px;
    text-transform: uppercase;
    letter-spacing: 0.5px;
}

.home-reputation-level.vanguard {
    background: linear-gradient(135deg, #ffd700 0%, #ffb700 100%);
    color: #735100;
}

.home-reputation-level.trusted {
    background: rgba(61, 138, 92, 0.15);
    color: var(--success);
}

.home-reputation-level.active {
    background: rgba(45, 138, 122, 0.15);
    color: var(--accent-600);
}

.home-reputation-level.rising {
    background: rgba(184, 134, 46, 0.15);
    color: var(--warning);
}

.home-reputation-level.seed {
    background: var(--neutral-100);
    color: var(--neutral-500);
}

.home-reputation-content {
    display: flex;
    gap: var(--space-5);
    align-items: flex-start;
}

.home-reputation-main {
    display: flex;
    align-items: baseline;
    gap: var(--space-1);
    min-width: 80px;
}

.home-reputation-score {
    font-size: 32px;
    font-weight: 700;
    color: var(--primary-500);
    line-height: 1;
}

.home-reputation-scale {
    font-size: var(--text-sm);
    color: var(--neutral-400);
    font-weight: 500;
}

.home-reputation-stats {
    flex: 1;
    display: flex;
    flex-direction: column;
    gap: var(--space-2);
}

.home-reputation-stat {
    display: flex;
    align-items: center;
    gap: var(--space-2);
    font-size: var(--text-sm);
    color: var(--neutral-600);
}

/* Progress bar toward next tier */
.home-reputation-progress {
    margin-top: var(--space-3);
}
.home-reputation-progress-label {
    font-size: 11px;
    color: var(--neutral-500);
    margin-bottom: var(--space-1);
}
.home-reputation-progress-bar {
    height: 6px;
    background: var(--neutral-200);
    border-radius: 3px;
    overflow: hidden;
}
.home-reputation-progress-fill {
    height: 100%;
    border-radius: 3px;
    transition: width 0.6s ease;
}
.home-reputation-progress-fill.seed { background: var(--neutral-400); }
.home-reputation-progress-fill.rising { background: #60a5fa; }
.home-reputation-progress-fill.active { background: #34d399; }
.home-reputation-progress-fill.trusted { background: #fbbf24; }
.home-reputation-progress-fill.vanguard { background: #a78bfa; }

/* Badges chips */
.home-reputation-badges {
    display: flex;
    flex-wrap: wrap;
    gap: var(--space-1);
    margin-top: var(--space-2);
}
.home-reputation-badge-chip {
    font-size: 10px;
    padding: 2px 8px;
    border-radius: 10px;
    background: var(--neutral-100);
    color: var(--neutral-600);
    border: 1px solid var(--neutral-200);
    font-weight: 500;
}

/* --- Community Impact Section --- */
.home-impact {
    padding: var(--space-4);
    margin-bottom: var(--space-4);
    border: 1px solid var(--neutral-200);
    border-radius: var(--radius-lg);
    background: var(--surface-1);
}
.home-impact:empty { display: none; }
.home-impact-narrative {
    font-size: var(--text-sm);
    color: var(--neutral-500);
    font-style: italic;
    margin-bottom: var(--space-3);
    line-height: 1.5;
}
.home-impact-counters {
    display: flex;
    gap: var(--space-4);
}
.home-impact-counter {
    flex: 1;
    text-align: center;
    padding: var(--space-2) 0;
}
.home-impact-counter-value {
    font-size: 24px;
    font-weight: 700;
    color: var(--neutral-100);
}
.home-impact-counter-label {
    font-size: 11px;
    color: var(--neutral-500);
    margin-top: var(--space-1);
    text-transform: uppercase;
    letter-spacing: 0.5px;
}

/* --- Marketplace Section --- */

.home-marketplace {
    display: flex;
    flex-direction: column;
    gap: var(--space-3);
    padding: var(--space-4);
    margin-bottom: var(--space-4);
    border: 1px solid var(--neutral-200);
    border-radius: var(--radius-lg);
    background: var(--surface-1);
}

.home-marketplace:empty {
    display: none;
}

.home-marketplace-badge {
    font-size: var(--text-xs);
    font-weight: 600;
    color: var(--neutral-500);
    background: var(--neutral-100);
    padding: 2px 8px;
    border-radius: 10px;
}

.home-marketplace-content {
    display: flex;
    flex-direction: column;
    gap: var(--space-4);
}

.home-marketplace-stats {
    display: flex;
    gap: var(--space-4);
}

.home-marketplace-stat {
    display: flex;
    align-items: center;
    gap: var(--space-2);
    padding: var(--space-2) var(--space-3);
    background: var(--neutral-50);
    border-radius: var(--radius-md);
}

.home-marketplace-stat-value {
    font-size: var(--text-base);
    font-weight: 700;
    color: var(--primary-500);
}

.home-marketplace-stat-label {
    font-size: var(--text-xs);
    color: var(--neutral-500);
}

.home-marketplace-activity {
    display: flex;
    flex-direction: column;
    gap: var(--space-2);
}

.home-marketplace-activity-header {
    font-size: var(--text-xs);
    font-weight: 600;
    color: var(--neutral-500);
    text-transform: uppercase;
    letter-spacing: 0.5px;
    margin-bottom: var(--space-1);
}

.home-marketplace-activity-item {
    display: flex;
    align-items: center;
    gap: var(--space-2);
    padding: var(--space-2) 0;
    border-bottom: 1px solid var(--neutral-100);
    font-size: var(--text-sm);
}

.home-marketplace-activity-item:last-child {
    border-bottom: none;
}

.home-marketplace-activity-text {
    flex: 1;
    color: var(--neutral-700);
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.home-marketplace-activity-time {
    font-size: var(--text-xs);
    color: var(--neutral-400);
    flex-shrink: 0;
}

/* --- Quick Access --- */

.home-quick-access {
    display: flex;
    flex-direction: column;
    gap: var(--space-3);
    padding: var(--space-4);
    margin-top: var(--space-6, 32px);
    margin-bottom: var(--space-4);
    border: 1px solid var(--neutral-200);
    border-radius: var(--radius-lg);
    background: var(--surface-1);
}

.home-quick-access:empty {
    display: none;
}

.home-quick-access-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: var(--space-3);
    padding-bottom: var(--space-2);
    border-bottom: 1px solid var(--neutral-200);
}

.home-quick-access-title {
    display: flex;
    align-items: center;
    gap: var(--space-2);
    font-size: var(--text-sm);
    font-weight: 700;
    color: var(--neutral-700);
}

.home-quick-access-search {
    min-width: 240px;
    max-width: clamp(240px, 80vw, 380px);
    width: 100%;
}

.home-quick-access-search input {
    width: 100%;
    height: 34px;
    border: 1px solid var(--neutral-300);
    border-radius: var(--radius-md);
    padding: 0 var(--space-3);
    background: var(--neutral-0);
    color: var(--neutral-700);
    font-size: var(--text-sm);
}

.home-quick-access-search input:focus-visible {
    outline: 2px solid var(--accent-500);
    outline-offset: 1px;
}

.home-quick-access-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(320px, 1fr));
    gap: var(--space-3);
}

.home-quick-access-category {
    border: 1px solid var(--neutral-200);
    border-radius: var(--radius-lg);
    background: var(--neutral-50);
    overflow: hidden;
}

.home-quick-access-category-header {
    display: flex;
    align-items: center;
    gap: var(--space-2);
    padding: var(--space-2) var(--space-3);
    background: var(--surface-1);
    border-bottom: 1px solid var(--neutral-200);
}

.home-quick-access-category-title {
    font-size: var(--text-xs);
    font-weight: 700;
    color: var(--neutral-600);
    text-transform: uppercase;
    letter-spacing: 0.4px;
    flex: 1;
    min-width: 0;
}

.home-quick-access-category-count {
    font-size: var(--text-xs);
    font-weight: 600;
    color: var(--neutral-500);
    background: var(--neutral-100);
    border-radius: 999px;
    padding: 1px 7px;
}

.home-quick-access-items {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(180px, 1fr));
    gap: var(--space-2);
    padding: var(--space-3);
}

.home-quick-access-category[data-category="documentation"] .home-quick-access-items {
    max-height: 360px;
    overflow-y: auto;
}

.home-quick-access-item {
    display: flex;
    align-items: center;
    gap: var(--space-2);
    padding: var(--space-2) var(--space-2);
    min-height: 34px;
    border: 1px solid var(--neutral-200);
    border-radius: var(--radius-md);
    background: var(--neutral-0);
    color: var(--neutral-700);
    cursor: pointer;
    position: relative;
    transition: border-color 0.15s, background 0.15s, box-shadow 0.15s;
}

/* INP fix — loading state painted BEFORE heavy module loads.
   User sees immediate feedback (border pulse + cursor) while the
   handler is queued for next rAF. Core Web Vitals 2026 INP <200ms. */
.home-quick-access-item.quick-access-loading {
    cursor: progress;
    border-color: var(--color-primary, #3b82f6);
    box-shadow: 0 0 0 2px rgba(59, 130, 246, 0.15);
    pointer-events: none;
}
.home-quick-access-item.quick-access-loading::after {
    content: '';
    position: absolute;
    top: 50%;
    right: 8px;
    width: 12px;
    height: 12px;
    margin-top: -6px;
    border: 2px solid var(--color-primary, #3b82f6);
    border-right-color: transparent;
    border-radius: 50%;
    animation: qa-spin 0.6s linear infinite;
}
@keyframes qa-spin {
    to { transform: rotate(360deg); }
}

.home-quick-access-item:hover {
    border-color: var(--primary-300);
    background: var(--primary-50);
    box-shadow: var(--shadow-sm);
}

.home-quick-access-item:focus-visible {
    outline: 2px solid var(--accent-500);
    outline-offset: 1px;
}

.home-quick-access-item-label {
    font-size: var(--text-sm);
    line-height: 1.2;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    min-width: 0;
    flex: 1;
}

.home-quick-access-item-tag {
    font-size: 10px;
    font-weight: 700;
    color: var(--accent-600);
    background: rgba(45, 138, 122, 0.14);
    border-radius: 999px;
    padding: 1px 6px;
    text-transform: uppercase;
    letter-spacing: 0.3px;
    flex-shrink: 0;
}

.home-quick-access-item.disabled {
    opacity: 0.5;
    cursor: not-allowed;
    background: var(--neutral-100);
}

/* Responsive for new sections */
@media (max-width: 1023px) {
    .home-eis-content,
    .home-reputation-content {
        flex-direction: column;
        gap: var(--space-3);
    }

    .home-eis-axes {
        grid-template-columns: repeat(2, 1fr);
    }

    .home-marketplace-stats {
        flex-wrap: wrap;
    }

    .home-quick-access-header {
        flex-direction: column;
        align-items: stretch;
    }

    .home-quick-access-search {
        max-width: none;
        min-width: 0;
    }

    .home-quick-access-grid {
        grid-template-columns: 1fr;
    }
}

@media (max-width: 479px) {
    .home-eis,
    .home-reputation,
    .home-marketplace,
    .home-quick-access {
        padding: var(--space-3);
    }

    .home-eis-axes {
        grid-template-columns: 1fr;
    }

    .home-marketplace-stats {
        flex-direction: column;
        gap: var(--space-2);
    }

    .home-marketplace-stat {
        justify-content: space-between;
    }

    .home-quick-access-items {
        grid-template-columns: 1fr;
    }
}

/* --- Home Redesign V2 (SPEC_HOME_REDESIGN_3COL, item 9.80) --- */

/* App Header inside #app-header */
.app-header-left,
.app-header-center,
.app-header-right {
    display: flex;
    align-items: center;
    gap: 12px;
    min-width: 0;
}
.app-header-left {
    flex: 0 0 auto;
}
.app-header-center {
    flex: 1 1 auto;
    justify-content: center;
    gap: 16px;
}
.app-header-right {
    flex: 0 0 auto;
    justify-content: flex-end;
}

.app-header-logo {
    height: 22px;
    width: auto;
    object-fit: contain;
}
.app-header-app-name {
    font-weight: 600;
    font-size: 13px;
    letter-spacing: 0.5px;
}

.app-header-breadcrumb {
    font-size: 12px;
    color: var(--neutral-400);
}
.app-header-breadcrumb-list {
    display: flex;
    align-items: center;
    gap: 6px;
    list-style: none;
    margin: 0;
    padding: 0;
}
.app-header-bc-btn {
    background: transparent;
    border: none;
    color: var(--primary-300);
    font-size: 12px;
    cursor: pointer;
    padding: 0;
}
.app-header-bc-text {
    color: var(--neutral-400);
}
.app-header-bc-current {
    color: var(--window-text);
    font-weight: 500;
}
.app-header-bc-sep {
    color: var(--neutral-500);
}

.app-header-divider {
    width: 1px;
    height: 18px;
    background: var(--neutral-600);
}

.app-header-model-name {
    font-size: 13px;
    font-weight: 500;
    color: var(--window-text);
    padding: 2px 6px;
    border-radius: var(--radius-sm);
    border: 1px solid transparent;
    min-width: 60px;
    max-width: 240px;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    cursor: text;
}
.app-header-model-name:hover {
    border-color: var(--neutral-600);
}
.app-header-model-name:focus {
    outline: none;
    border-color: var(--primary-400);
    background: var(--window-dark-3);
}

.app-header-save-status {
    font-size: 11px;
    font-weight: 600;
    padding: 2px 8px;
    border-radius: 999px;
    text-transform: uppercase;
    letter-spacing: 0.4px;
}
.app-header-save-saved {
    color: #e8f5e9;
    background: rgba(61, 138, 92, 0.25);
}
.app-header-save-saving {
    color: #fff8e1;
    background: rgba(184, 134, 46, 0.25);
}
.app-header-save-offline {
    color: #ffebee;
    background: rgba(184, 68, 68, 0.25);
}

.app-header-ctx-buttons {
    display: flex;
    align-items: center;
    gap: 8px;
}
.app-header-ctx-btn {
    height: 28px;
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 0 10px;
    border-radius: var(--radius-sm);
    border: 1px solid var(--primary-500);
    background: var(--primary-500);
    color: #fff;
    font-size: 12px;
    font-weight: 500;
    cursor: pointer;
}
.app-header-ctx-btn.secondary {
    background: transparent;
    color: var(--window-text);
    border-color: var(--neutral-600);
}
.app-header-ctx-btn:hover {
    opacity: 0.92;
}

/* Empty State */
.home-empty-state {
    display: flex;
    align-items: center;
    justify-content: center;
    min-height: 320px;
    padding: var(--space-6);
}
.home-empty-state-box {
    text-align: center;
    max-width: var(--ecbt-modal-xs, clamp(280px, 90vw, 360px));
}
.home-empty-state-title {
    font-size: 1.25rem;
    font-weight: 600;
    color: var(--window-text);
    margin-bottom: var(--space-5);
}
.home-empty-state-actions {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: var(--space-3);
}
.home-empty-state-cta {
    height: 40px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    padding: 0 18px;
    border-radius: var(--radius-md);
    border: 1px solid var(--primary-500);
    background: var(--primary-500);
    color: #fff;
    font-size: 14px;
    font-weight: 500;
    cursor: pointer;
    min-width: 220px;
}
.home-empty-state-cta.secondary {
    background: transparent;
    color: var(--window-text);
    border-color: var(--neutral-600);
}
.home-empty-state-cta:hover {
    opacity: 0.92;
}

/* Sidebar Groups */
.sidebar-group {
    display: flex;
    flex-direction: column;
    gap: 2px;
}
.sidebar-group + .sidebar-group {
    border-top: 1px solid var(--neutral-200);
    padding-top: var(--space-2);
    margin-top: var(--space-1);
}
.sidebar-group-toggle {
    display: flex;
    align-items: center;
    justify-content: space-between;
    width: 100%;
    height: 32px;
    padding: 0 6px;
    background: transparent;
    border: none;
    color: var(--neutral-700);
    font-size: 12px;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.4px;
    cursor: pointer;
    border-radius: var(--radius-sm);
}
.sidebar-group-toggle:hover {
    background: var(--primary-50);
}
.sidebar-group-list {
    list-style: none;
    margin: 0;
    padding: 0 0 var(--space-1) 0;
    display: flex;
    flex-direction: column;
    gap: 2px;
}
.sidebar-group-list li {
    display: flex;
}

/* Model empty overlay — shown when Modelo tab has no elements */
.model-empty-overlay {
    position: absolute;
    inset: 0;
    z-index: 5;
    display: flex;
    align-items: center;
    justify-content: center;
    background: var(--bg-primary, #0a1929);
    color: var(--text-primary, rgba(255, 255, 255, 0.85));
}

.model-empty-overlay-content {
    text-align: center;
    max-width: clamp(280px, 90vw, 400px);
    padding: var(--space-6, 24px);
}

.model-empty-overlay-icon {
    font-size: 48px;
    color: var(--accent-500, #14b8a6);
    margin-bottom: var(--space-4, 16px);
    opacity: 0.6;
}

.model-empty-overlay-content h3 {
    margin: 0 0 var(--space-2, 8px);
    font-size: 18px;
    font-weight: 600;
}

.model-empty-overlay-content p {
    margin: 0 0 var(--space-4, 16px);
    font-size: 13px;
    color: var(--text-secondary, rgba(255, 255, 255, 0.6));
    line-height: 1.5;
}

.model-empty-overlay-actions {
    display: flex;
    gap: var(--space-2, 8px);
    justify-content: center;
}