/* ================================================================
   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: 1200px;
    margin: 0 auto;
    width: 100%;
}

/* --- 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-400);
    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: 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: 1023px) {
    .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: 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;
    transition: border-color 0.15s, background 0.15s, box-shadow 0.15s;
}

.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;
    }
}