/* =========================================
   APP LAYOUT
   Общие стили shell-части приложения:
   хедер, верхняя навигация, общие карточки,
   общие typography-элементы, адаптивность shell.
   Используется на /app и /app-analytics
   ========================================= */

.app-shell-header {
    padding: 20px 0 10px;
}

.app-shell-header-row {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 20px;
}

.app-header-actions {
    display: flex;
    align-items: center;
    gap: 12px;
    flex-wrap: wrap;
}

.app-top-link {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-height: 46px;
    padding: 0 18px;
    border-radius: 999px;
    background: rgba(255, 255, 255, 0.76);
    border: 1px solid rgba(219, 39, 119, 0.14);
    text-decoration: none;
    color: #4b4350;
    font-weight: 600;
}

.app-top-link-active {
    background: rgba(255, 241, 247, 0.9);
    color: var(--pink);
    border-color: rgba(219, 39, 119, 0.24);
}

.app-main-section {
    padding: 26px 0 84px;
}

.app-main-grid {
    display: block;
}

.app-page-stack {
    display: flex;
    flex-direction: column;
    gap: 18px;
}

.app-panel-card,
.app-side-card,
.analytics-card,
.analytics-summary-card,
.today-summary-card,
.community-section-card {
    background: rgba(255, 255, 255, 0.94);
    border: 1px solid rgba(234, 223, 229, 0.9);
    border-radius: 28px;
    box-shadow: var(--shadow-soft);
    padding: 26px 28px;
}

.app-panel-head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
}

.app-panel-title,
.app-side-title,
.analytics-card-title {
    margin: 0;
    font-size: 24px;
    line-height: 1.15;
    font-weight: 800;
    color: #241f24;
}

.app-panel-link {
    text-decoration: none;
    color: var(--pink);
    font-size: 14px;
    font-weight: 700;
}

.app-panel-subtitle,
.app-side-text,
.analytics-subtitle {
    margin: 10px 0 0;
    color: #756c76;
    font-size: 15px;
    line-height: 1.7;
}

.app-side-list,
.quick-action-list,
.feed-list {
    display: flex;
    flex-direction: column;
    gap: 12px;
}

.side-row {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    padding: 12px 0;
    border-bottom: 1px solid rgba(234, 223, 229, 0.7);
}

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

.side-row-label {
    color: #857a85;
    font-size: 14px;
}

.side-row-value {
    color: #272127;
    font-size: 14px;
    font-weight: 700;
}

.quick-action-btn {
    min-height: 50px;
    padding: 0 16px;
    border: 1px solid rgba(219, 39, 119, 0.18);
    border-radius: 16px;
    background: #fff;
    color: #4b4350;
    text-align: left;
    font-size: 15px;
    font-weight: 600;
    cursor: pointer;
}

.water-stat-pill,
.mini-pill {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-height: 38px;
    padding: 0 14px;
    border-radius: 999px;
    background: rgba(255, 248, 251, 0.96);
    border: 1px solid rgba(219, 39, 119, 0.16);
    color: #6d5967;
    font-size: 13px;
    font-weight: 700;
}

.program-info-note {
    margin-top: 12px;
    padding: 14px 16px;
    border-radius: 16px;
    background: rgba(255, 241, 247, 0.96);
    border: 1px solid rgba(219, 39, 119, 0.16);
    color: #7a5569;
    font-size: 14px;
    line-height: 1.6;
}

@media (max-width: 700px) {
    .app-shell-header-row {
        flex-direction: column;
        align-items: flex-start;
    }

    .app-panel-card,
    .app-side-card,
    .analytics-card,
    .analytics-summary-card,
    .today-summary-card,
    .community-section-card {
        padding: 20px 18px;
        border-radius: 24px;
    }

    .app-panel-head {
        flex-direction: column;
        align-items: flex-start;
    }
}