@layer components {
    .dashboard-page {
        padding-block: clamp(2rem, 5vw, 5rem);
    }

    .dashboard-header {
        display: flex;
        align-items: end;
        justify-content: space-between;
        gap: 2rem;
        margin-bottom: 2rem;
    }

    .dashboard-header__copy {
        max-width: 720px;
    }

    .dashboard-header h1 {
        margin-top: 0.55rem;
        font-size: clamp(2.2rem, 5vw, 4.4rem);
        line-height: 1;
        letter-spacing: -0.055em;
    }

    .dashboard-header p {
        margin-top: 0.9rem;
        color: var(--text-soft);
    }

    .dashboard-header__actions {
        display: flex;
        flex-wrap: wrap;
        gap: 0.7rem;
    }

    .dashboard-badge {
        display: inline-flex;
        align-items: center;
        gap: 0.45rem;
        padding: 0.48rem 0.75rem;
        border: 1px solid color-mix(in srgb, var(--primary) 38%, var(--border));
        border-radius: 999px;
        color: var(--primary);
        background: var(--primary-soft);
        font-size: 0.78rem;
        font-weight: 800;
    }

    .dashboard-badge--admin {
        color: #ffffff;
        border-color: transparent;
        background: linear-gradient(135deg, var(--primary), var(--violet));
    }

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

    .stat-card,
    .dashboard-panel,
    .profile-card {
        border: 1px solid var(--border);
        background: var(--surface);
        box-shadow: var(--shadow-sm);
    }

    .stat-card {
        min-height: 150px;
        padding: 1.25rem;
        border-radius: var(--radius-md);
    }

    .stat-card__label {
        color: var(--text-soft);
        font-size: 0.82rem;
        font-weight: 700;
    }

    .stat-card__value {
        display: block;
        margin-top: 0.6rem;
        font-size: clamp(2rem, 4vw, 3rem);
        font-weight: 900;
        line-height: 1;
        letter-spacing: -0.045em;
    }

    .stat-card__hint {
        display: block;
        margin-top: 0.7rem;
        color: var(--text-muted);
        font-size: 0.78rem;
    }

    .dashboard-grid {
        display: grid;
        grid-template-columns: minmax(0, 1.55fr) minmax(280px, 0.75fr);
        gap: 1.25rem;
    }

    .dashboard-panel,
    .profile-card {
        border-radius: var(--radius-md);
    }

    .dashboard-panel__header {
        display: flex;
        align-items: center;
        justify-content: space-between;
        gap: 1rem;
        padding: 1.25rem;
        border-bottom: 1px solid var(--border);
    }

    .dashboard-panel__header h2 {
        font-size: 1.08rem;
    }

    .dashboard-panel__body {
        padding: 1.25rem;
    }

    .dashboard-actions {
        display: grid;
        grid-template-columns: repeat(2, minmax(0, 1fr));
        gap: 0.85rem;
    }

    .dashboard-action {
        min-height: 132px;
        padding: 1rem;
        border: 1px solid var(--border);
        border-radius: 16px;
        background: var(--surface-soft);
        transition: transform 160ms ease, border-color 160ms ease, background-color 160ms ease;
    }

    .dashboard-action:hover {
        transform: translateY(-3px);
        border-color: color-mix(in srgb, var(--primary) 45%, var(--border));
        background: var(--surface-hover);
    }

    .dashboard-action strong {
        display: block;
        margin-top: 1.2rem;
    }

    .dashboard-action span {
        display: block;
        margin-top: 0.35rem;
        color: var(--text-soft);
        font-size: 0.82rem;
    }

    .dashboard-action__icon {
        display: grid;
        width: 38px;
        height: 38px;
        place-items: center;
        border-radius: 12px;
        color: var(--primary);
        background: linear-gradient(145deg, var(--primary-soft), var(--violet-soft));
        font-weight: 900;
    }

    .dashboard-action__icon img {
        width: 80%;
        height: 80%;
        align-items: center;
    }

    .profile-card {
        overflow: hidden;
    }

    .profile-card__cover {
        height: 115px;
        background:
            radial-gradient(circle at 75% 25%, rgba(255, 138, 98, 0.44), transparent 10rem),
            linear-gradient(135deg, #24101b, #8b2c55 60%, #5a2c75);
    }

    .profile-card__body {
        padding: 0 1.25rem 1.25rem;
    }

    .profile-avatar {
        display: grid;
        width: 76px;
        height: 76px;
        place-items: center;
        margin-top: -38px;
        border: 5px solid var(--surface-solid);
        border-radius: 22px;
        color: #ffffff;
        background: linear-gradient(145deg, var(--primary), var(--violet));
        font-size: 1.35rem;
        font-weight: 900;
        box-shadow: var(--shadow-sm);
    }

    .profile-card h2 {
        margin-top: 1rem;
        font-size: 1.35rem;
    }

    .profile-card__email {
        color: var(--text-soft);
        font-size: 0.9rem;
    }

    .profile-list {
        display: grid;
        gap: 0.75rem;
        margin-top: 1.25rem;
        padding-top: 1.25rem;
        border-top: 1px solid var(--border);
    }

    .profile-list li {
        display: flex;
        justify-content: space-between;
        gap: 1rem;
        color: var(--text-soft);
        font-size: 0.84rem;
    }

    .profile-list strong {
        color: var(--text);
        text-align: end;
    }

    .empty-state {
        display: grid;
        min-height: 270px;
        place-items: center;
        padding: 2rem;
        text-align: center;
    }

    .empty-state__icon {
        display: grid;
        width: 64px;
        height: 64px;
        place-items: center;
        margin-inline: auto;
        border-radius: 20px;
        color: var(--primary);
        background: linear-gradient(145deg, var(--primary-soft), var(--violet-soft));
        font-size: 1.4rem;
        font-weight: 900;
    }

    .empty-state h3 {
        margin-top: 1rem;
        font-size: 1.2rem;
    }

    .empty-state p {
        max-width: 510px;
        margin-top: 0.55rem;
        color: var(--text-soft);
    }

    @media (max-width: 1000px) {
        .stats-grid {
            grid-template-columns: repeat(2, minmax(0, 1fr));
        }

        .dashboard-grid {
            grid-template-columns: 1fr;
        }
    }

    @media (max-width: 680px) {
        .dashboard-header {
            align-items: flex-start;
            flex-direction: column;
        }

        .dashboard-header__actions,
        .dashboard-header__actions .btn {
            width: 100%;
        }

        .stats-grid,
        .dashboard-actions {
            grid-template-columns: 1fr;
        }

        .profile-list li {
            align-items: flex-start;
            flex-direction: column;
            gap: 0.2rem;
        }
    }
}

@layer components {
.stats-grid{grid-template-columns:repeat(auto-fit,minmax(180px,1fr));}
.dashboard-actions{grid-template-columns:repeat(auto-fit,minmax(230px,1fr));}
}