* {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
}

body {
    font-family: 'Segoe UI', Arial, sans-serif;
    background: #0a0a0f;
    color: #e4e4ec;
    min-height: 100vh;
}

.live-feed {
    margin: 0 0 40px;
    background: linear-gradient(180deg, #14141d 0%, #101017 100%);
    border: 1px solid #2a2a3a;
    border-radius: 18px;
    padding: 18px;
}

.live-feed-title {
    font-size: 20px;
    font-weight: 800;
    margin-bottom: 14px;
    color: #fff;
}

.live-feed-item {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 10px 0;
    border-bottom: 1px solid #252535;
}

.live-feed-item:last-child {
    border-bottom: none;
}

.live-feed-avatar {
    width: 38px;
    height: 38px;
    border-radius: 50%;
    background: #2a2a3a;
    object-fit: cover;
    flex-shrink: 0;
}

.live-feed-main {
    flex: 1;
    min-width: 0;
}

.live-feed-text {
    color: #e4e4ec;
    font-size: 14px;
    line-height: 1.4;
}

.live-feed-time {
    color: #777;
    font-size: 11px;
    margin-top: 3px;
}

.header {
    background: #12121a;
    border-bottom: 1px solid #2a2a3a;
    padding: 16px 20px;
    display: flex;
    justify-content: space-between;
    align-items: center;
    position: sticky;
    top: 0;
    z-index: 100;
}

.logo {
    font-size: 24px;
    font-weight: 800;
    color: #ff4d4d;
    text-decoration: none;
}

.how-it-works {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 14px;
    margin: 28px 0 40px;
}

.how-card {
    position: relative;
    background: linear-gradient(180deg, #14141d 0%, #101017 100%);
    border: 1px solid #2a2a3a;
    border-radius: 18px;
    padding: 24px;
    overflow: hidden;
    transition: 0.25s ease;
    cursor: pointer;
}

.how-card:hover {
    border-color: #ff4d4d;
    transform: translateY(-3px);
    box-shadow: 0 0 24px rgba(255, 77, 77, 0.16);
}

.how-step {
    font-size: 42px;
    font-weight: 900;
    color: rgba(255, 77, 77, 0.14);
    line-height: 1;
    margin-bottom: 18px;
    letter-spacing: -2px;
}

.how-card h3 {
    font-size: 20px;
    margin-bottom: 10px;
    color: #fff;
}

.how-card p {
    color: #8b8b98;
    line-height: 1.6;
    font-size: 14px;
}

.seo-text {
    margin: 0 0 40px;
    background: linear-gradient(180deg, #14141d 0%, #101017 100%);
    border: 1px solid #2a2a3a;
    border-radius: 18px;
    padding: 24px;
}

.seo-text h2 {
    color: #fff;
    font-size: 24px;
    margin-bottom: 14px;
}

.seo-text p {
    color: #a8a8b5;
    font-size: 15px;
    line-height: 1.7;
    margin-bottom: 12px;
}

.seo-links {
    display: flex;
    gap: 10px;
    flex-wrap: wrap;
    margin-top: 16px;
}

.seo-links a {
    color: #ff4d4d;
    text-decoration: none;
    font-weight: 700;
    font-size: 14px;
}

.seo-links a:hover {
    color: #fff;
}

@media (max-width: 768px) {
    .how-it-works {
        grid-template-columns: 1fr;
    }

    .how-card {
        padding: 20px;
    }

    .how-step {
        font-size: 36px;
    }
}

@media (max-width: 768px) {
    .how-it-works {
        grid-template-columns: 1fr;
    }

    .how-card {
        padding: 16px;
    }

    .how-card h3 {
        font-size: 17px;
    }

    .how-card p {
        font-size: 13px;
    }
}

.logo span {
    color: #e4e4ec;
}
#video-modal .modal-box {
    max-width: 900px !important;
    width: 95% !important;
    box-sizing: border-box;
}

#video-modal-player {
    max-width: 100% !important;
    width: 100% !important;
    height: auto !important;
    max-height: 80vh;
    display: block;
    margin: 0 auto;
}

#section-messages {
    position: fixed;
    top: 57px;
    left: 0;
    right: 0;
    bottom: 0;
    z-index: 10;
    background: #0a0a0f;
    padding: 0 !important;
    margin: 0 !important;
    display: none;
    flex-direction: column;
}

#section-messages .section-title {
    padding: 12px 20px;
    margin: 0;
    flex-shrink: 0;
    background: #0a0a0f;
}

.rule-highlight {
    color: #ff4d4d;
    font-weight: 800;
    background: #3a1212;
    padding: 2px 6px;
    border-radius: 6px;
    display: inline-block;
    letter-spacing: 0.3px;
}

#section-messages > div {
    flex: 1;
    min-height: 0;
    border: none;
    border-radius: 0;
    overflow: hidden;
    display: flex;
}

@media (max-width: 768px) {
    #video-modal .modal-box {
        width: 98% !important;
        padding: 16px !important;
    }
}

.nav-links {
    display: flex;
    gap: 20px;
    align-items: center;
}

.nav-links a {
    color: #888;
    text-decoration: none;
    font-weight: 500;
    font-size: 14px;
}

.nav-links a:hover {
    color: #fff;
}

.container {
    max-width: 900px;
    margin: 0 auto;
    padding: 0 20px;
}

.hero {
    text-align: center;
    padding: 60px 20px 40px;
}

.hero h1 {
    font-size: 42px;
    font-weight: 800;
    margin-bottom: 12px;
}

.hero h1 .red {
    color: #ff4d4d;
}

.hero p {
    color: #888;
    font-size: 16px;
    margin-bottom: 30px;
}

.btn {
    display: inline-block;
    padding: 12px 28px;
    border-radius: 10px;
    font-weight: 600;
    font-size: 15px;
    cursor: pointer;
    border: none;
    text-decoration: none;
    font-family: inherit;
}

.btn-red {
    background: #ff4d4d;
    color: white;
}

.btn-red:hover {
    background: #ff3333;
}

.btn-outline {
    background: transparent;
    color: #e4e4ec;
    border: 2px solid #2a2a3a;
}

.btn-outline:hover {
    border-color: #ff4d4d;
}

.stats {
    display: flex;
    justify-content: center;
    gap: 40px;
    margin-top: 40px;
    flex-wrap: wrap;
}

.stat {
    text-align: center;
}

.stat-value {
    display: block;
    font-size: 32px;
    font-weight: 800;
    color: #ff4d4d;
}

.stat-label {
    font-size: 13px;
    color: #888;
    text-transform: uppercase;
    letter-spacing: 1px;
}

.section {
    padding: 30px 0;
}

.section-title {
    font-size: 22px;
    font-weight: 700;
    margin-bottom: 16px;
}

.card {
    background: #12121a;
    border: 1px solid #2a2a3a;
    border-radius: 12px;
    padding: 20px;
    margin-bottom: 10px;
    display: flex;
    align-items: center;
    gap: 16px;
}

.card:hover {
    border-color: #ff4d4d;
}

.rank {
    font-size: 24px;
    font-weight: 800;
    min-width: 40px;
    text-align: center;
}

.rank-1 { color: #ffd700; }
.rank-2 { color: #c0c0c0; }
.rank-3 { color: #cd7f32; }

.avatar {
    width: 48px;
    height: 48px;
    border-radius: 50%;
    background: #2a2a3a;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 20px;
    font-weight: 700;
    color: #ff4d4d;
}

.info {
    flex: 1;
}

.name {
    font-weight: 700;
    font-size: 16px;
}

.city {
    font-size: 13px;
    color: #888;
}

.points {
    text-align: right;
}

.points-value {
    font-weight: 700;
    color: #ff4d4d;
    font-size: 18px;
}

.points-label {
    font-size: 12px;
    color: #888;
}

.modal {
    display: none;
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: rgba(0,0,0,0.8);
    z-index: 1000;
    justify-content: center;
    align-items: center;
}

.modal.active {
    display: flex;
}

.modal-box {
    background: #12121a;
    border: 1px solid #2a2a3a;
    border-radius: 16px;
    padding: 30px;
    width: 90%;
    max-width: 400px;
}

.modal-box h2 {
    margin-bottom: 20px;
    text-align: center;
}

.modal-box input {
    width: 100%;
    padding: 12px;
    margin-bottom: 10px;
    border-radius: 8px;
    border: 1px solid #2a2a3a;
    background: #0a0a0f;
    color: #e4e4ec;
    font-size: 14px;
    font-family: inherit;
}

.modal-box .btn {
    width: 100%;
    margin-top: 6px;
}

#profile-view-modal .btn-outline {
    width: auto;
    margin-top: 0;
}

#comments-modal .btn-red {
    width: auto;
    margin-top: 0px;
}

#comments-modal .modal-box > div:last-child {
    display: flex;
    align-items: center;
    gap: 8px;

}

#comments-modal-input {
    margin-bottom: 0px;          
}

.tabs {
    display: flex;
    margin-bottom: 20px;
}

.tab {
    flex: 1;
    text-align: center;
    padding: 10px;
    cursor: pointer;
    border-bottom: 2px solid #2a2a3a;
    color: #888;
    font-weight: 600;
}

.tab.active {
    color: #ff4d4d;
    border-bottom-color: #ff4d4d;
}

.close {
    float: right;
    font-size: 28px;
    cursor: pointer;
    color: #888;
    line-height: 1;
}

.close:hover {
    color: #fff;
}

.loading {
    text-align: center;
    padding: 40px;
    color: #888;
}

.spinner {
    width: 40px;
    height: 40px;
    border: 3px solid #2a2a3a;
    border-top-color: #ff4d4d;
    border-radius: 50%;
    animation: spin 1s linear infinite;
    margin: 0 auto 16px;
}

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

@media (max-width: 600px) {
    .how-it-works {
        grid-template-columns: 1fr !important;
    }
    #section-tournaments {
        padding: 70px 10px 80px !important;
    }

    #section-tournaments .section-title {
        font-size: 20px !important;
        line-height: 1.25 !important;
        margin-bottom: 12px !important;
    }

    #tournaments-list {
        width: 100% !important;
    }

    #tournaments-list > .card {
        display: flex !important;
        flex-direction: column !important;
        align-items: stretch !important;
        grid-template-columns: none !important;
        grid-template-areas: none !important;
        width: 100% !important;
        padding: 12px !important;
        margin: 0 0 12px 0 !important;
        gap: 10px !important;
    }

    #tournaments-list > .card > div:first-child {
        display: flex !important;
        flex-direction: column !important;
        align-items: stretch !important;
        gap: 8px !important;
    }

    #tournaments-list h3 {
        font-size: 16px !important;
        line-height: 1.3 !important;
        word-break: break-word !important;
    }

    #tournaments-list span {
        align-self: flex-start !important;
    }

    #tournaments-list .btn,
    #section-tournaments .btn {
        width: 100% !important;
        padding: 12px !important;
        font-size: 14px !important;
    }
    #section-admin {
        padding-top: 70px !important;
    }

    #section-admin > .card {
        display: flex !important;
        flex-direction: column !important;
        align-items: stretch !important;
        grid-template-columns: none !important;
        padding: 12px !important;
        gap: 12px !important;
    }

    #section-admin > .card > div:first-child {
        display: flex !important;
        flex-direction: column !important;
        align-items: stretch !important;
        gap: 10px !important;
    }

    #section-admin > .card > div:first-child .btn {
        width: 100% !important;
        padding: 12px !important;
        font-size: 14px !important;
    }

    #admin-pending-list {
        padding: 0 !important;
    }

    #admin-pending-list > .card {
        display: flex !important;
        flex-direction: column !important;
        align-items: stretch !important;
        grid-template-columns: none !important;
        width: 100% !important;
        padding: 12px !important;
        gap: 10px !important;
    }

    #admin-pending-list > .card > div:first-child {
        display: flex !important;
        flex-direction: column !important;
        align-items: stretch !important;
        gap: 6px !important;
    }

    #admin-pending-list > .card > div:first-child div {
        overflow-wrap: anywhere !important;
        word-break: break-word !important;
    }

    #admin-pending-list video {
        width: 100% !important;
        max-width: 100% !important;
        height: auto !important;
        max-height: 55vh !important;
        object-fit: contain !important;
    }

    #admin-pending-list > .card > div:last-child {
        display: flex !important;
        flex-direction: column !important;
        gap: 8px !important;
    }

    #admin-pending-list > .card > div:last-child .btn {
        width: 100% !important;
        padding: 12px !important;
        font-size: 14px !important;
    }
    #section-messages,
    #section-profile,
    #section-upload,
    #section-admin {
        padding-top: 60px;
    }

    #section-profile .card {
        display: flex !important;
        flex-direction: column !important;
    }

    #section-messages.active-chat .section-title {
        display: none;
    }

    #section-profile .card > div:first-child {
        display: flex;
        flex-direction: column;
        align-items: center;
        text-align: center;
        width: 100%;
    }

    #section-leaderboard > div:first-child {
        margin-top: 60px;
    }

    #section-tournaments {
        padding-top: 60px;
    }

    #section-profile .tabs {
        flex-wrap: wrap;
    }

    #section-profile .tab {
        font-size: 13px;
        padding: 8px 6px;
    }
    #section-upload .card {
        display: flex !important;
        flex-direction: column !important;
        padding: 12px !important;
    }
    #section-upload label {
        font-size: 13px !important;
    }
    #section-upload input[type="file"],
    #section-upload input[type="number"],
    #section-upload select {
        font-size: 14px !important;
        padding: 8px !important;
    }

    #profile-tab-content input {
        font-size: 14px !important;
        padding: 8px !important;
    }

    #chat-window {
        display: none;
    }
    #chat-window.active {
        display: flex;
    }
    #chat-back-btn {
        display: none;
    }
    
    .header {
        position: fixed !important;
        top: 0 !important;
        left: 0 !important;
        right: 0 !important;
        z-index: 100 !important;
        background: #12121a;
        padding: 10px 12px;
        flex-wrap: wrap;
        gap: 8px;
    }
    
    .logo {
        font-size: 18px;
    }
    
    .burger {
        display: flex !important;
        flex-direction: column;
        gap: 4px;
        cursor: pointer;
        z-index: 101;
        padding: 4px;
    }
    
    .burger span {
        display: block;
        width: 22px;
        height: 2px;
        background: #fff;
        border-radius: 2px;
        transition: 0.3s;
    }
    
    .nav-links {
        display: none;
        position: absolute;
        top: 100%;
        left: 0;
        right: 0;
        background: #12121a;
        flex-direction: column;
        padding: 12px;
        gap: 10px;
        border-bottom: 1px solid #2a2a3a;
        z-index: 99;
    }
    
    .nav-links.active {
        display: flex;
    }
    
    .nav-links a {
        font-size: 14px;
        padding: 8px 0;
    }
    
    #user-area {
        display: flex;
        gap: 6px;
        align-items: center;
    }
    
    .hero h1 {
        font-size: 24px;
    }
    
    .stats {
        gap: 16px;
    }
    
    .stat-value {
        font-size: 24px;
    }
    
    .btn {
        padding: 8px 14px;
        font-size: 12px;
    }
    
    .btn-outline {
        padding: 6px 12px;
        font-size: 11px;
    }
    
    .card {
        padding: 10px;
        gap: 8px;
        flex-wrap: nowrap;
        display: grid;
        grid-template-columns: 28px 36px 1fr auto;
        grid-template-areas: "rank avatar info points";
        align-items: center;
    }

    .card .rank {
        grid-area: rank;
        font-size: 18px;
        min-width: auto;
    }

    .card .avatar {
        grid-area: avatar;
        width: 36px;
        height: 36px;
        font-size: 16px;
    }

    .card .info {
        grid-area: info;
        min-width: 0;
    }

    .card .name {
        font-size: 14px;
    }

    .card .city {
        font-size: 11px;
    }

    .card .points {
        grid-area: points;
        display: flex !important;
        flex-direction: column !important;
        align-items: flex-end !important;
        gap: 2px;
        width: auto;
        text-align: right;
        white-space: nowrap;
    }

    .card .points-value {
        font-size: 15px;
    }

    .card .points-label {
        font-size: 10px;
        white-space: nowrap;
    }

    .card .points button {
        padding: 3px 5px !important;
        font-size: 10px !important;
        white-space: nowrap;
        margin-top: 2px;
    }

    /* Сообщения на мобильных — на весь экран */
    #section-messages {
        padding: 0 !important;
    }
    #section-messages .section-title {
        font-size: 18px;
        padding: 10px 12px;
        margin: 0;
    }
    #section-messages > div {
        flex-direction: column !important;
        min-height: calc(100vh - 100px) !important;
        border: none !important;
        border-radius: 0 !important;
    }
    #section-messages > div > div:first-child {
        width: 100% !important;
        min-width: auto !important;
        height: 100%;
        flex: 1;
    }
    #dialogs-list {
        max-height: none;
        border-right: none !important;
        border-bottom: 1px solid #2a2a3a !important;
    }
    #chat-window {
        display: none !important;
        position: fixed;
        top: 56px;
        left: 0;
        right: 0;
        bottom: 0;
        z-index: 50;
        background: #0a0a0f;
    }
    #chat-window.active {
        display: flex !important;
    }
    #chat-header {
        font-size: 14px;
        padding: 12px !important;
    }
    #chat-messages {
        padding: 10px !important;
    }
    #chat-input-area {
        padding: 8px !important;
        gap: 6px !important;
    }
    #chat-input {
        padding: 8px !important;
        font-size: 13px !important;
    }
    #chat-input-area .btn {
        padding: 8px 12px !important;
        font-size: 13px !important;
    }
    #user-search {
        font-size: 12px !important;
        padding: 6px !important;
    }

    #section-upload .card {
        display: flex !important;
        flex-direction: column !important;
        padding: 12px !important;
    }

    #section-upload label {
        font-size: 13px !important;
    }

    #section-upload input[type="file"],
    #section-upload input[type="number"] {
        font-size: 14px !important;
        padding: 8px !important;
    }

    #section-upload .btn-red {
        padding: 12px !important;
        font-size: 14px !important;
    }

    /* Поддержка — мобильный режим */
    /* Поддержка как сообщения */
    #section-support {
        padding: 0 !important;
    }

    #section-support > div {
        flex-direction: column !important;
        min-height: calc(100vh - 100px) !important;
        border: none !important;
        border-radius: 0 !important;
    }

    #tickets-sidebar {
        width: 100% !important;
        min-width: auto !important;
        height: 100%;
        flex: 1;
    }

    #ticket-view {
        display: none !important;
        position: fixed;
        top: 56px;
        left: 0;
        right: 0;
        bottom: 0;
        z-index: 50;
        background: #0a0a0f;
    }

    #ticket-view.active {
        display: flex !important;
        flex-direction: column;
    }

    #ticket-mobile-header {
        display: flex !important;
    }

    #ticket-view-content {
        flex: 1;
        overflow-y: auto;
        padding: 10px !important;
        padding-bottom: 80px !important;
    }

    #section-upload h3 {
        font-size: 16px !important;
    }

    #section-upload ol li {
        font-size: 13px !important;
    }

    #section-upload p {
        font-size: 11px !important;
    }
    
    #section-upload div[style*="background:#1a1a2e"] {
        padding: 12px !important;
    }

    #section-messages #chat-window:not(.active) {
        display: none !important;
    }
    
    #section-wall {
        padding: 10px !important;
    }
    #section-wall textarea {
        font-size: 13px !important;
        padding: 10px !important;
    }
    #section-wall-user {
        padding-top: 70px !important;
    }
    /* Поддержка на мобильных */
    #section-support {
        padding: 10px 0 60px !important;
    }
    #section-support .section-title {
        font-size: 18px;
        padding: 0 10px;
    }
    #section-support .card {
        display: flex !important;
        flex-direction: column !important;
        padding: 14px !important;
        margin: 0 10px 16px !important;
        gap: 10px !important;
    }
    #section-support input[type="text"],
    #section-support textarea {
        font-size: 14px !important;
        padding: 10px !important;
    }
    #section-support .btn-red {
        padding: 12px !important;
        font-size: 14px !important;
    }
    #section-support h4 {
        font-size: 16px !important;
    }
    #section-admin-tickets {
        padding: 10px 0 60px !important;
    }
    #section-admin-tickets .section-title {
        font-size: 18px;
        padding: 0 10px;
    }
    #section-admin-tickets .btn-outline {
        margin-left: 10px;
        font-size: 12px;
        padding: 8px 14px;
    }
    #tickets-list .card,
    #admin-tickets-list .card {
        display: flex !important;
        flex-direction: column !important;
        padding: 12px !important;
        margin: 0 10px 10px !important;
        gap: 8px !important;
        grid-template-columns: none !important;
    }
    #tickets-list .card div,
    #admin-tickets-list .card div {
        font-size: 13px !important;
    }
    #tickets-list input[type="text"],
    #admin-tickets-list input[type="text"] {
        font-size: 13px !important;
        padding: 8px !important;
    }
    #tickets-list .btn-red,
    #admin-tickets-list .btn-red {
        padding: 8px 14px !important;
        font-size: 13px !important;
    }
}

/* Бургер скрыт на десктопе */
.burger {
    display: none;
}
}

/* Бургер-меню скрыто на десктопе */
.burger {
    display: none;
}

#section-messages input,
#section-messages textarea,
#section-messages select {
    box-sizing: border-box;
}

#user-search {
    width: 100%;
    max-width: 100%;
    box-sizing: border-box;
}

#section-messages {
    height: calc(100vh - 57px);
}

#chat-window {
    min-height: 0;
}

#chat-messages {
    flex: 1;
    min-height: 0;
    overflow-y: auto;
}

#chat-input-area {
    flex-shrink: 0;
}

/* ===== FIX messages page layout ===== */

#section-messages {
    height: calc(100vh - 57px) !important;
    max-height: calc(100vh - 57px) !important;
    overflow: hidden !important;
    display: flex !important;
    flex-direction: column !important;
}

#section-messages > div[style*="display:flex"] {
    flex: 1 !important;
    min-height: 0 !important;
    height: 100% !important;
    overflow: hidden !important;
}

#chat-window {
    min-height: 0 !important;
    height: 100% !important;
    overflow: hidden !important;
    display: flex !important;
    flex-direction: column !important;
}

#chat-header {
    flex-shrink: 0 !important;
}

#chat-messages {
    flex: 1 1 auto !important;
    min-height: 0 !important;
    overflow-y: auto !important;
}

#chat-input-area {
    flex-shrink: 0 !important;
    display: flex !important;
}

/* ==================== КАЛЬКУЛЯТОРЫ ==================== */

.calculator-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
    gap: 22px;
    max-width: 900px;
    margin: 0 auto;
}

.calculator-card {
    display: flex;
    flex-direction: column;
    text-decoration: none;
    color: inherit;

    background: #12121a;
    border: 1px solid #2a2a3a;
    border-radius: 16px;

    padding: 24px;

    transition: .25s;
}

.calculator-card:hover {
    transform: translateY(-6px);
    border-color: #ff4d4d;
    box-shadow: 0 10px 30px rgba(255,77,77,.18);
}

.calculator-icon {
    font-size: 44px;
    margin-bottom: 18px;
}

.calculator-card h2 {
    margin: 0 0 12px;
    color: #fff;
    font-size: 24px;
}

.calculator-card p {
    margin: 0;
    color: #aaa;
    line-height: 1.7;
    flex: 1;
}

.calculator-card span {
    margin-top: 24px;
    color: #ff4d4d;
    font-weight: 700;
}

@media (max-width: 700px) {

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

    .calculator-card {
        padding: 20px;
    }

}

.calculator-input {
    width: 100%;
    padding: 12px 14px;
    border: 1px solid #2a2a3a;
    border-radius: 8px;
    background: #0a0a0f;
    color: #fff;
    font-size: 16px;
    box-sizing: border-box;
    transition: border-color .2s;
}

.calculator-input:focus {
    outline: none;
    border-color: #ff4d4d;
}

@media (max-width: 600px) {
    #plates-calculator .card {
        display: flex !important;
        flex-direction: column !important;
        align-items: stretch !important;
        grid-template-columns: none !important;
        gap: 14px !important;
        padding: 14px !important;
        border-color: #2a2a3a !important;
    }

    #plates-calculator label {
        font-size: 14px !important;
        line-height: 1.3 !important;
    }

    #plates-calculator .calculator-input {
        width: 100% !important;
        height: auto !important;
        padding: 12px 14px !important;
        font-size: 16px !important;
    }

    #plates-calculator .btn {
        width: 100% !important;
        height: auto !important;
        padding: 12px !important;
        font-size: 14px !important;
    }

    #plates-result {
        width: 100% !important;
        overflow: hidden !important;
    }

    #plates-result svg {
        width: 100% !important;
        min-width: 0 !important;
        height: 190px !important;
    }
}

@media (max-width: 600px) {
    .container {
        padding: 58px 20px 20px;
    }
}

@media (max-width: 600px) {
    #bench-calculator {
        padding-top: 16px !important;
    }

    #bench-calculator .section-title {
        font-size: 22px !important;
        line-height: 1.25 !important;
        margin-bottom: 10px !important;
    }

    #bench-calculator p {
        font-size: 14px !important;
        line-height: 1.6 !important;
        margin-bottom: 18px !important;
    }

    #bench-calculator .card {
        display: flex !important;
        flex-direction: column !important;
        align-items: stretch !important;
        grid-template-columns: none !important;
        gap: 14px !important;
        padding: 14px !important;
    }

    #bench-calculator .card > div:first-child {
        display: flex !important;
        flex-direction: column !important;
        gap: 12px !important;
    }

    #bench-calculator label {
        font-size: 14px !important;
    }

    #bench-calculator .calculator-input,
    #bench-calculator input[type="number"] {
        width: 100% !important;
        padding: 12px 14px !important;
        font-size: 16px !important;
        box-sizing: border-box !important;
    }

    #bench-calculator .btn {
        width: 100% !important;
        padding: 12px !important;
        font-size: 14px !important;
    }

    #bench-result {
        width: 100% !important;
        overflow-x: auto !important;
    }

    #bench-result table {
        font-size: 13px !important;
    }

    #bench-result div[style*="font-size:42px"] {
        font-size: 34px !important;
    }
}

.standards-table-card {
    background: #12121a;
    border: 1px solid #2a2a3a;
    border-radius: 16px;
    overflow: hidden;
}

.standards-table-scroll {
    width: 100%;
    overflow-x: auto;
}

.standards-table {
    width: 100%;
    border-collapse: collapse;
    min-width: 720px;
}

.standards-table th,
.standards-table td {
    padding: 12px 14px;
    border-bottom: 1px solid #2a2a3a;
    text-align: center;
    font-size: 14px;
}

.standards-table th {
    background: #0a0a0f;
    color: #fff;
    font-weight: 800;
}

.standards-table td:first-child,
.standards-table th:first-child {
    text-align: left;
    color: #fff;
    font-weight: 700;
}

.standards-table td {
    color: #ddd;
}

@media (max-width: 600px) {
    #standards-page {
        padding-top: 16px !important;
    }

    #standards-page .section-title {
        font-size: 22px !important;
        line-height: 1.25 !important;
    }

    .standards-table th,
    .standards-table td {
        padding: 10px 12px;
        font-size: 13px;
    }
}

@media (max-width: 600px) {
    #standards-page {
        padding-top: 16px !important;
    }

    #standards-page .section-title {
        font-size: 22px !important;
        line-height: 1.25 !important;
        margin-bottom: 10px !important;
    }

    #standards-page p {
        font-size: 14px !important;
        line-height: 1.6 !important;
        margin-bottom: 18px !important;
    }

    #standards-page .card {
        display: flex !important;
        flex-direction: column !important;
        align-items: stretch !important;
        gap: 12px !important;
        padding: 14px !important;
    }

    #standards-page .calculator-input {
        width: 100% !important;
        font-size: 16px !important;
        padding: 12px 14px !important;
        box-sizing: border-box !important;
    }

    .standards-table-card {
        margin: 0 -10px !important;
        border-radius: 12px !important;
    }

    .standards-table-scroll {
        overflow-x: auto !important;
        -webkit-overflow-scrolling: touch;
    }

    .standards-table {
        min-width: 760px !important;
    }

    .standards-table th,
    .standards-table td {
        padding: 9px 10px !important;
        font-size: 12px !important;
        white-space: nowrap !important;
    }

    .standards-table th:first-child,
    .standards-table td:first-child {
        position: sticky;
        left: 0;
        z-index: 2;
        width: 72px;
        min-width: 72px;
        max-width: 72px;
        padding: 8px 4px !important;
        font-size: 11px !important;
        line-height: 1.2;
        text-align: center;
        background: #0a0a0f;
    }

    .standards-table td:first-child {
        background: #12121a;
        font-weight: 700;
    }
}

@media (max-width: 600px) {
    #percentages-calculator {
        padding-top: 16px !important;
    }

    #percentages-calculator .section-title {
        font-size: 22px !important;
        line-height: 1.25 !important;
        margin-bottom: 10px !important;
    }

    #percentages-calculator p {
        font-size: 14px !important;
        line-height: 1.6 !important;
        margin-bottom: 18px !important;
    }

    #percentages-calculator .card {
        display: flex !important;
        flex-direction: column !important;
        align-items: stretch !important;
        gap: 14px !important;
        padding: 14px !important;
    }

    #percentages-calculator .calculator-input {
        width: 100% !important;
        font-size: 16px !important;
        padding: 12px 14px !important;
        box-sizing: border-box !important;
    }

    #percentages-calculator .btn {
        width: 100% !important;
        padding: 12px !important;
        font-size: 14px !important;
    }

    #percent-result {
        width: 100% !important;
        overflow-x: auto !important;
    }

    #percent-result table {
        min-width: 520px !important;
        font-size: 13px !important;
    }

    #percent-result td {
        padding: 8px 10px !important;
        white-space: nowrap !important;
    }
}

@media (max-width: 600px) {
    #wilks-calculator {
        padding-top: 16px !important;
    }

    #wilks-calculator .section-title {
        font-size: 22px !important;
        line-height: 1.25 !important;
        margin-bottom: 10px !important;
    }

    #wilks-calculator p {
        font-size: 14px !important;
        line-height: 1.6 !important;
        margin-bottom: 18px !important;
    }

    #wilks-calculator .card {
        display: flex !important;
        flex-direction: column !important;
        align-items: stretch !important;
        gap: 14px !important;
        padding: 14px !important;
    }

    #wilks-calculator .calculator-input {
        width: 100% !important;
        font-size: 16px !important;
        padding: 12px 14px !important;
        box-sizing: border-box !important;
    }

    #wilks-calculator .btn {
        width: 100% !important;
        padding: 12px !important;
        font-size: 14px !important;
    }

    #wilks-result > div:first-child {
        display: flex !important;
        flex-direction: column !important;
        gap: 12px !important;
    }

    #wilks-result div[style*="font-size:42px"] {
        font-size: 34px !important;
    }
}

.seo-card {
    line-height: 1.65;
}

.seo-card h2 {
    margin: 0 0 12px;
    color: #fff;
}

.seo-card p {
    margin: 0 0 12px;
    color: #ddd;
}

.seo-card ul {
    margin: 8px 0 16px 22px;
    padding: 0;
    color: #ddd;
}

.seo-card li {
    margin-bottom: 6px;
}

@media (max-width: 600px) {
    #bmi-calculator {
        padding-top: 16px !important;
    }

    #bmi-calculator .section-title {
        font-size: 22px !important;
        line-height: 1.25 !important;
    }

    #bmi-calculator p {
        font-size: 14px !important;
        line-height: 1.6 !important;
    }

    #bmi-calculator .card {
        display: flex !important;
        flex-direction: column !important;
        align-items: stretch !important;
        gap: 14px !important;
        padding: 14px !important;
    }

    #bmi-calculator .calculator-input {
        width: 100% !important;
        font-size: 16px !important;
        padding: 12px 14px !important;
        box-sizing: border-box !important;
    }

    #bmi-calculator .btn {
        width: 100% !important;
        padding: 12px !important;
        font-size: 14px !important;
    }

    #bmi-result div[style*="font-size:52px"] {
        font-size: 38px !important;
    }
}

@media (max-width: 600px) {
    #kbju-calculator {
        padding-top: 16px !important;
    }

    #kbju-calculator .section-title {
        font-size: 22px !important;
        line-height: 1.25 !important;
    }

    #kbju-calculator p {
        font-size: 14px !important;
        line-height: 1.6 !important;
    }

    #kbju-calculator .card {
        display: flex !important;
        flex-direction: column !important;
        align-items: stretch !important;
        gap: 14px !important;
        padding: 14px !important;
    }

    #kbju-calculator .calculator-input {
        width: 100% !important;
        font-size: 16px !important;
        padding: 12px 14px !important;
        box-sizing: border-box !important;
    }

    #kbju-calculator .btn {
        width: 100% !important;
        padding: 12px !important;
        font-size: 14px !important;
    }

    #kbju-result > div {
        display: flex !important;
        flex-direction: column !important;
        gap: 12px !important;
    }

    #kbju-result div[style*="font-size:42px"] {
        font-size: 34px !important;
    }

    #kbju-result div[style*="font-size:32px"] {
        font-size: 28px !important;
    }
}

/* ========== ИСТОРИЯ КБЖУ ========== */

.kbju-history-card {
    display: block !important;
    max-width: 760px;
    margin: 24px auto;
    padding: 22px !important;
}

.kbju-history-heading {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 20px;
}

.kbju-history-heading h2 {
    margin: 0 0 7px;
    color: #ffffff;
    font-size: 24px;
    line-height: 1.25;
}

.kbju-history-heading p {
    max-width: 520px;
    margin: 0;
    color: #8f8f9d;
    font-size: 14px;
    line-height: 1.6;
}

.kbju-history-clear {
    flex-shrink: 0;
    width: auto !important;
    padding: 10px 14px !important;
    border: 1px solid #512a32 !important;
    background: transparent !important;
    color: #ff6b6b !important;
    font-size: 13px !important;
}

.kbju-history-clear:hover {
    border-color: #ff4d4d !important;
    background: rgba(255, 77, 77, 0.08) !important;
}

.kbju-history-status {
    min-height: 22px;
    margin-top: 18px;
    color: #9a9aaa;
    font-size: 14px;
    line-height: 1.5;
}

.kbju-history-status-success {
    color: #34d399;
}

.kbju-history-status-error {
    color: #ff6b6b;
}

.kbju-history-list {
    display: grid;
    gap: 14px;
    margin-top: 12px;
}

.kbju-history-empty {
    padding: 28px 20px;
    border: 1px dashed #323242;
    border-radius: 14px;
    background: #0a0a0f;
    text-align: center;
}

.kbju-history-empty strong {
    display: block;
    margin-bottom: 8px;
    color: #ffffff;
    font-size: 18px;
}

.kbju-history-empty p {
    margin: 0 0 16px;
    color: #8f8f9d;
    font-size: 14px;
    line-height: 1.6;
}

.kbju-history-empty .btn {
    width: auto !important;
    padding: 10px 24px !important;
}

.kbju-history-item {
    padding: 17px;
    border: 1px solid #292938;
    border-radius: 14px;
    background: #0a0a0f;
}

.kbju-history-item-header {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 16px;
}

.kbju-history-item-header h3 {
    margin: 0;
    color: #ff4d4d;
    font-size: 25px;
    font-weight: 900;
    line-height: 1.2;
}

.kbju-history-date {
    margin-top: 5px;
    color: #777785;
    font-size: 12px;
}

.kbju-history-goal {
    flex-shrink: 0;
    padding: 7px 11px;
    border: 1px solid #353547;
    border-radius: 999px;
    background: #161620;
    color: #ffffff;
    font-size: 13px;
    font-weight: 800;
}

.kbju-history-macros {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 10px;
    margin-top: 15px;
}

.kbju-history-macro {
    padding: 11px 8px;
    border: 1px solid #242433;
    border-radius: 10px;
    background: #111119;
    text-align: center;
}

.kbju-history-macro span {
    display: block;
    margin-bottom: 4px;
    color: #7f7f8e;
    font-size: 12px;
}

.kbju-history-macro strong {
    color: #ffffff;
    font-size: 17px;
    font-weight: 900;
}

.kbju-history-details {
    display: flex;
    flex-wrap: wrap;
    gap: 7px;
    margin-top: 14px;
}

.kbju-history-details span {
    padding: 6px 9px;
    border: 1px solid #252534;
    border-radius: 8px;
    background: #111119;
    color: #a4a4b1;
    font-size: 12px;
    line-height: 1.3;
}

.kbju-history-actions {
    display: flex;
    gap: 10px;
    margin-top: 15px;
}

.kbju-history-actions .btn {
    width: auto !important;
    padding: 9px 14px !important;
    font-size: 13px !important;
}

.kbju-history-repeat {
    border: 1px solid #37374a !important;
    background: #181822 !important;
    color: #ffffff !important;
}

.kbju-history-repeat:hover {
    border-color: #ff4d4d !important;
}

.kbju-history-delete {
    border: 1px solid #512a32 !important;
    background: transparent !important;
    color: #ff6b6b !important;
}

.kbju-history-delete:hover {
    border-color: #ff4d4d !important;
    background: rgba(255, 77, 77, 0.08) !important;
}


/* Мобильная версия истории КБЖУ */

@media (max-width: 600px) {
    .kbju-history-card {
        margin-top: 18px;
        padding: 15px !important;
    }

    .kbju-history-heading {
        flex-direction: column;
        gap: 14px;
    }

    .kbju-history-heading h2 {
        font-size: 21px;
    }

    .kbju-history-clear {
        width: 100% !important;
    }

    .kbju-history-item {
        padding: 14px;
    }

    .kbju-history-item-header {
        flex-direction: column;
        gap: 10px;
    }

    .kbju-history-item-header h3 {
        font-size: 23px;
    }

    .kbju-history-goal {
        align-self: flex-start;
    }

    .kbju-history-macros {
        gap: 6px;
    }

    .kbju-history-macro {
        padding: 9px 4px;
    }

    .kbju-history-macro span {
        font-size: 11px;
    }

    .kbju-history-macro strong {
        font-size: 15px;
    }

    .kbju-history-details {
        gap: 6px;
    }

    .kbju-history-actions {
        flex-direction: column;
    }

    .kbju-history-actions .btn {
        width: 100% !important;
    }
}

/* ==================================================
   ДНЕВНИК ПИТАНИЯ
================================================== */

.nutrition-page {
    max-width: 1100px;
    margin: 0 auto;
}

.nutrition-section {
    padding-top: 34px;
    padding-bottom: 60px;
}

.nutrition-page-header {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 20px;
    margin-bottom: 24px;
}

.nutrition-page-title {
    margin-bottom: 10px;
}

.nutrition-page-description {
    max-width: 720px;
    margin: 0;
    color: #9a9aa8;
    font-size: 15px;
    line-height: 1.65;
}


/* ==================================================
   ВКЛАДКИ
================================================== */

.nutrition-tabs {
    display: inline-flex;
    gap: 6px;
    margin-bottom: 22px;
    padding: 5px;
    border: 1px solid #292938;
    border-radius: 13px;
    background: #0c0c12;
}

.nutrition-tab {
    min-width: 130px;
    padding: 11px 22px;
    border: none;
    border-radius: 9px;
    background: transparent;
    color: #8f8f9e;
    font-size: 14px;
    font-weight: 800;
    cursor: pointer;
    transition:
        background 0.2s ease,
        color 0.2s ease;
}

.nutrition-tab:hover {
    color: #ffffff;
}

.nutrition-tab-active {
    background: #ff4d4d;
    color: #ffffff;
}

.nutrition-tab-panel[hidden] {
    display: none !important;
}


/* ==================================================
   БЛОК АВТОРИЗАЦИИ
================================================== */

.nutrition-login-card {
    display: block !important;
    max-width: 620px;
    margin: 40px auto;
    padding: 30px !important;
    text-align: center;
}

.nutrition-login-card[hidden] {
    display: none !important;
}

.nutrition-login-card h2 {
    margin: 0 0 12px;
    color: #ffffff;
    font-size: 26px;
}

.nutrition-login-card p {
    margin: 0 auto 22px;
    color: #9a9aa8;
    line-height: 1.65;
}

.nutrition-login-card .btn {
    width: auto !important;
    min-width: 160px;
}


/* ==================================================
   ВЫБОР ДАТЫ
================================================== */

.nutrition-date-card {
    display: flex !important;
    align-items: center;
    justify-content: center;
    gap: 14px;
    margin-bottom: 18px;
    padding: 14px 18px !important;
}

.nutrition-date-arrow {
    display: flex;
    width: 42px;
    height: 42px;
    flex-shrink: 0;
    align-items: center;
    justify-content: center;
    border: 1px solid #303040;
    border-radius: 10px;
    background: #111118;
    color: #ffffff;
    font-size: 22px;
    cursor: pointer;
    transition:
        border-color 0.2s ease,
        background 0.2s ease;
}

.nutrition-date-arrow:hover {
    border-color: #ff4d4d;
    background: #191920;
}

.nutrition-current-date {
    min-width: 230px;
    padding: 10px 18px;
    border: none;
    background: transparent;
    color: #ffffff;
    font-size: 18px;
    font-weight: 900;
    cursor: pointer;
}

.nutrition-date-input {
    position: absolute;
    width: 1px;
    height: 1px;
    opacity: 0;
    pointer-events: none;
}


/* ==================================================
   ДНЕВНЫЕ ИТОГИ
================================================== */

.nutrition-summary {
    display: grid;
    grid-template-columns: 1.4fr repeat(3, 1fr);
    gap: 14px;
    margin-bottom: 18px;
}

.nutrition-summary-card {
    display: flex;
    min-height: 120px;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    padding: 18px;
    border: 1px solid #292938;
    border-radius: 14px;
    background: #0c0c12;
    text-align: center;
}

.nutrition-summary-label {
    margin-bottom: 7px;
    color: #858593;
    font-size: 13px;
    font-weight: 700;
}

.nutrition-summary-card strong {
    color: #ffffff;
    font-size: 31px;
    font-weight: 900;
    line-height: 1;
}

.nutrition-calories-card strong {
    color: #ff4d4d;
    font-size: 42px;
}

.nutrition-summary-unit {
    margin-top: 7px;
    color: #777785;
    font-size: 12px;
}


/* ==================================================
   СООБЩЕНИЯ
================================================== */

.nutrition-status {
    min-height: 22px;
    margin: 10px 0;
    color: #9999a7;
    font-size: 14px;
    line-height: 1.5;
}

.nutrition-status-success {
    color: #34d399;
}

.nutrition-status-error {
    color: #ff6b6b;
}

.nutrition-form-status {
    min-height: 22px;
    margin: 12px 0;
    color: #9999a7;
    font-size: 13px;
    line-height: 1.5;
}

.nutrition-form-status-error {
    color: #ff6b6b;
}

.nutrition-form-status-success {
    color: #34d399;
}


/* ==================================================
   ПРИЁМЫ ПИЩИ
================================================== */

.nutrition-meals-list {
    display: grid;
    gap: 16px;
}

.nutrition-empty-day {
    padding: 40px 24px;
    border: 1px dashed #343444;
    border-radius: 15px;
    background: #0b0b11;
    text-align: center;
}

.nutrition-empty-day strong {
    display: block;
    margin-bottom: 9px;
    color: #ffffff;
    font-size: 20px;
}

.nutrition-empty-day p {
    margin: 0;
    color: #8f8f9d;
    font-size: 14px;
    line-height: 1.6;
}

.nutrition-meal-card {
    overflow: hidden;
    border: 1px solid #292938;
    border-radius: 15px;
    background: #0c0c12;
}

.nutrition-meal-header {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 18px;
    padding: 18px;
    border-bottom: 1px solid #242432;
}

.nutrition-meal-heading {
    min-width: 0;
}

.nutrition-meal-title-row {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 9px;
}

.nutrition-meal-title {
    margin: 0;
    color: #ffffff;
    font-size: 21px;
    font-weight: 900;
    word-break: break-word;
}

.nutrition-meal-time {
    padding: 5px 9px;
    border: 1px solid #303041;
    border-radius: 999px;
    background: #15151d;
    color: #a5a5b2;
    font-size: 12px;
}

.nutrition-meal-total {
    margin-top: 7px;
    color: #8f8f9d;
    font-size: 13px;
}

.nutrition-meal-total strong {
    color: #ff6262;
}

.nutrition-meal-header-actions {
    display: flex;
    flex-shrink: 0;
    gap: 8px;
}

.nutrition-icon-button {
    display: inline-flex;
    min-height: 36px;
    align-items: center;
    justify-content: center;
    padding: 7px 11px;
    border: 1px solid #303040;
    border-radius: 9px;
    background: #14141c;
    color: #c6c6d0;
    font-size: 12px;
    font-weight: 800;
    cursor: pointer;
    transition:
        border-color 0.2s ease,
        color 0.2s ease,
        background 0.2s ease;
}

.nutrition-icon-button:hover {
    border-color: #ff4d4d;
    color: #ffffff;
}

.nutrition-icon-button-danger {
    border-color: #4b292f;
    background: transparent;
    color: #ff7474;
}

.nutrition-icon-button-danger:hover {
    border-color: #ff4d4d;
    background: rgba(255, 77, 77, 0.08);
}

.nutrition-meal-entries {
    display: grid;
}

.nutrition-meal-empty {
    padding: 25px 18px;
    color: #777785;
    font-size: 14px;
    text-align: center;
}

.nutrition-entry-row {
    display: grid;
    grid-template-columns:
        minmax(180px, 1.7fr)
        minmax(90px, 0.6fr)
        minmax(110px, 0.7fr)
        minmax(220px, 1.2fr)
        auto;
    align-items: center;
    gap: 14px;
    padding: 14px 18px;
    border-bottom: 1px solid #20202c;
}

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

.nutrition-entry-product-name {
    min-width: 0;
    color: #ffffff;
    font-size: 14px;
    font-weight: 800;
    word-break: break-word;
}

.nutrition-entry-amount {
    color: #a7a7b3;
    font-size: 13px;
}

.nutrition-entry-calories {
    color: #ff6262;
    font-size: 14px;
    font-weight: 900;
}

.nutrition-entry-macros {
    color: #8f8f9d;
    font-size: 12px;
    line-height: 1.5;
}

.nutrition-entry-actions {
    display: flex;
    justify-content: flex-end;
    gap: 7px;
}

.nutrition-meal-footer {
    padding: 14px 18px;
    border-top: 1px solid #242432;
    background: #0a0a0f;
}

.nutrition-add-entry-button {
    width: auto !important;
    padding: 9px 15px !important;
    border: 1px solid #3a3a4c !important;
    background: #161620 !important;
    color: #ffffff !important;
    font-size: 13px !important;
}

.nutrition-add-entry-button:hover {
    border-color: #ff4d4d !important;
}

.nutrition-add-meal-button {
    display: block;
    width: 100% !important;
    margin-top: 18px;
    padding: 13px !important;
}


/* ==================================================
   СПИСОК ПРОДУКТОВ
================================================== */

.nutrition-products-toolbar {
    display: block !important;
    margin-bottom: 18px;
    padding: 20px !important;
}

.nutrition-products-toolbar-heading {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 20px;
}

.nutrition-products-toolbar-heading h2 {
    margin: 0 0 7px;
    color: #ffffff;
    font-size: 23px;
}

.nutrition-products-toolbar-heading p {
    max-width: 650px;
    margin: 0;
    color: #9292a0;
    font-size: 14px;
    line-height: 1.6;
}

.nutrition-products-toolbar-heading .btn {
    width: auto !important;
    flex-shrink: 0;
    padding: 11px 17px !important;
}

.nutrition-products-filters {
    display: grid;
    grid-template-columns: minmax(240px, 1fr) 210px 220px;
    gap: 12px;
    margin-top: 20px;
}

.nutrition-products-filters .calculator-input {
    width: 100%;
    margin: 0;
}

.nutrition-products-list {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 14px;
}

.nutrition-product-card {
    display: flex;
    flex-direction: column;
    padding: 17px;
    border: 1px solid #292938;
    border-radius: 14px;
    background: #0c0c12;
}

.nutrition-product-card-header {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 12px;
}

.nutrition-product-card h3 {
    margin: 0;
    color: #ffffff;
    font-size: 17px;
    line-height: 1.35;
}

.nutrition-product-badge {
    flex-shrink: 0;
    padding: 5px 8px;
    border: 1px solid #343445;
    border-radius: 999px;
    background: #16161f;
    color: #a0a0ad;
    font-size: 11px;
    font-weight: 800;
}

.nutrition-product-badge-personal {
    border-color: #594029;
    background: rgba(255, 169, 77, 0.08);
    color: #ffb25f;
}

.nutrition-product-meta {
    display: flex;
    flex-wrap: wrap;
    gap: 7px;
    margin-top: 9px;
}

.nutrition-product-meta span {
    padding: 5px 8px;
    border-radius: 7px;
    background: #15151e;
    color: #8e8e9c;
    font-size: 11px;
}

.nutrition-product-values {
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: 7px;
    margin-top: 15px;
}

.nutrition-product-value {
    padding: 10px 5px;
    border: 1px solid #242432;
    border-radius: 9px;
    background: #101017;
    text-align: center;
}

.nutrition-product-value span {
    display: block;
    margin-bottom: 4px;
    color: #777785;
    font-size: 10px;
}

.nutrition-product-value strong {
    color: #ffffff;
    font-size: 14px;
}

.nutrition-product-card-actions {
    display: flex;
    gap: 8px;
    margin-top: auto;
    padding-top: 15px;
}

.nutrition-product-card-actions .btn {
    width: auto !important;
    padding: 8px 12px !important;
    font-size: 12px !important;
}

.nutrition-products-empty {
    grid-column: 1 / -1;
    padding: 38px 20px;
    border: 1px dashed #343444;
    border-radius: 14px;
    color: #8f8f9d;
    text-align: center;
}


/* ==================================================
   МОДАЛЬНЫЕ ОКНА
================================================== */

.nutrition-modal[hidden] {
    display: none !important;
}

.nutrition-modal {
    position: fixed;
    z-index: 10050;
    inset: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 20px;
}

.nutrition-modal-backdrop {
    position: absolute;
    inset: 0;
    background: rgba(0, 0, 0, 0.78);
    backdrop-filter: blur(4px);
}

.nutrition-modal-content {
    position: relative;
    z-index: 1;
    width: 100%;
    max-width: 520px;
    max-height: calc(100vh - 40px);
    overflow-y: auto;
    padding: 24px;
    border: 1px solid #333344;
    border-radius: 16px;
    background: #111118;
    box-shadow: 0 20px 70px rgba(0, 0, 0, 0.55);
}

.nutrition-entry-modal-content {
    max-width: 680px;
}

.nutrition-modal-content h2 {
    margin: 0 40px 20px 0;
    color: #ffffff;
    font-size: 24px;
}

.nutrition-modal-content label {
    display: block;
    margin: 15px 0 7px;
    color: #c7c7d0;
    font-size: 13px;
    font-weight: 800;
}

.nutrition-modal-content .calculator-input {
    width: 100%;
    margin: 0;
}

.nutrition-modal-content .btn {
    width: 100%;
}

.nutrition-modal-close {
    position: absolute;
    top: 13px;
    right: 15px;
    width: 36px;
    height: 36px;
    border: none;
    border-radius: 9px;
    background: #1d1d27;
    color: #ffffff;
    font-size: 25px;
    line-height: 1;
    cursor: pointer;
}

.nutrition-modal-close:hover {
    background: #2a2a36;
}

.nutrition-product-form-hint {
    margin: 18px 0 4px;
    color: #8f8f9d;
    font-size: 13px;
}

.nutrition-product-macros-form {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 0 12px;
}


/* ==================================================
   ВЫБОР ПРОДУКТА
================================================== */

.nutrition-entry-products-list {
    display: grid;
    max-height: 310px;
    gap: 9px;
    margin-top: 12px;
    overflow-y: auto;
}

.nutrition-entry-product-option {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 15px;
    width: 100%;
    padding: 12px 13px;
    border: 1px solid #292938;
    border-radius: 11px;
    background: #0b0b11;
    color: inherit;
    text-align: left;
    cursor: pointer;
}

.nutrition-entry-product-option:hover {
    border-color: #ff4d4d;
    background: #121219;
}

.nutrition-entry-product-option-name {
    color: #ffffff;
    font-size: 14px;
    font-weight: 800;
}

.nutrition-entry-product-option-meta {
    margin-top: 4px;
    color: #858593;
    font-size: 11px;
}

.nutrition-entry-product-option-calories {
    flex-shrink: 0;
    color: #ff6262;
    font-size: 13px;
    font-weight: 900;
}

.nutrition-selected-product {
    margin-top: 18px;
    padding: 17px;
    border: 1px solid #3a3a4c;
    border-radius: 13px;
    background: #0b0b11;
}

.nutrition-selected-product h3 {
    margin: 0 0 7px;
    color: #ffffff;
    font-size: 18px;
}

.nutrition-selected-product p {
    margin: 0 0 14px;
    color: #9898a6;
    font-size: 13px;
    line-height: 1.55;
}

.nutrition-entry-preview {
    margin: 13px 0;
    padding: 12px;
    border: 1px solid #292938;
    border-radius: 10px;
    background: #121219;
    color: #c7c7d0;
    font-size: 13px;
    line-height: 1.6;
}

body.nutrition-modal-open {
    overflow: hidden;
}


/* ==================================================
   МОБИЛЬНАЯ ВЕРСИЯ
================================================== */

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

    .nutrition-products-filters {
        grid-template-columns: 1fr;
    }

    .nutrition-products-list {
        grid-template-columns: 1fr;
    }

    .nutrition-entry-row {
        grid-template-columns: 1fr auto;
        gap: 8px 12px;
    }

    .nutrition-entry-product-name {
        grid-column: 1;
    }

    .nutrition-entry-amount {
        grid-column: 1;
    }

    .nutrition-entry-calories {
        grid-column: 2;
        grid-row: 1;
        text-align: right;
    }

    .nutrition-entry-macros {
        grid-column: 1 / -1;
    }

    .nutrition-entry-actions {
        grid-column: 1 / -1;
        justify-content: flex-start;
    }
}


@media (max-width: 600px) {
    .nutrition-section {
        padding-top: 16px;
        padding-bottom: 36px;
    }

    .nutrition-page-title {
        font-size: 24px !important;
        line-height: 1.25;
    }

    .nutrition-page-description {
        font-size: 14px;
    }

    .nutrition-tabs {
        display: grid;
        grid-template-columns: repeat(2, 1fr);
        width: 100%;
    }

    .nutrition-tab {
        min-width: 0;
        padding: 10px 12px;
    }

    .nutrition-date-card {
        gap: 7px;
        padding: 10px !important;
    }

    .nutrition-date-arrow {
        width: 38px;
        height: 38px;
    }

    .nutrition-current-date {
        min-width: 0;
        flex: 1;
        padding: 8px 4px;
        font-size: 15px;
    }

    .nutrition-summary {
        gap: 8px;
    }

    .nutrition-summary-card {
        min-height: 98px;
        padding: 12px 7px;
    }

    .nutrition-summary-card strong {
        font-size: 25px;
    }

    .nutrition-calories-card strong {
        font-size: 32px;
    }

    .nutrition-summary-label {
        font-size: 11px;
    }

    .nutrition-meal-header {
        flex-direction: column;
        padding: 14px;
    }

    .nutrition-meal-header-actions {
        width: 100%;
    }

    .nutrition-meal-header-actions button {
        flex: 1;
    }

    .nutrition-meal-title {
        font-size: 19px;
    }

    .nutrition-entry-row {
        padding: 13px 14px;
    }

    .nutrition-meal-footer {
        padding: 12px 14px;
    }

    .nutrition-add-entry-button {
        width: 100% !important;
    }

    .nutrition-products-toolbar {
        padding: 15px !important;
    }

    .nutrition-products-toolbar-heading {
        flex-direction: column;
    }

    .nutrition-products-toolbar-heading h2 {
        font-size: 21px;
    }

    .nutrition-products-toolbar-heading .btn {
        width: 100% !important;
    }

    .nutrition-product-values {
        gap: 5px;
    }

    .nutrition-product-value {
        padding: 8px 3px;
    }

    .nutrition-product-value strong {
        font-size: 12px;
    }

    .nutrition-modal {
        align-items: flex-end;
        padding: 0;
    }

    .nutrition-modal-content {
        max-height: 92vh;
        padding: 19px 15px 22px;
        border-right: none;
        border-bottom: none;
        border-left: none;
        border-radius: 18px 18px 0 0;
    }

    .nutrition-modal-content h2 {
        font-size: 21px;
    }

    .nutrition-modal-content .calculator-input {
        font-size: 16px;
    }

    .nutrition-product-macros-form {
        grid-template-columns: 1fr;
    }

    .nutrition-entry-products-list {
        max-height: 260px;
    }

    .nutrition-entry-product-option {
        align-items: flex-start;
    }

    .nutrition-entry-product-option-calories {
        font-size: 12px;
    }
}

/* ==================================================
   ИКОНКИ ПРОДУКТОВ И АДМИНИСТРАТИВНАЯ ФОРМА
================================================== */

.nutrition-admin-product-fields[hidden] {
    display: none !important;
}

.nutrition-admin-product-fields {
    margin-bottom: 20px;
    padding: 16px;
    border: 1px solid #49332b;
    border-radius: 12px;
    background: rgba(255, 153, 51, 0.06);
}

.nutrition-admin-product-notice {
    margin-bottom: 16px;
}

.nutrition-admin-product-notice strong {
    display: block;
    margin-bottom: 6px;
    color: #ffb25f;
    font-size: 15px;
}

.nutrition-admin-product-notice p {
    margin: 0;
    color: #a5a5b1;
    font-size: 13px;
    line-height: 1.55;
}

.nutrition-product-icon-input {
    display: block;
    width: 100%;
    margin-top: 7px;
    padding: 11px;
    border: 1px solid #303040;
    border-radius: 10px;
    background: #0c0c12;
    color: #ffffff;
    font-size: 13px;
}

.nutrition-product-icon-input::file-selector-button {
    margin-right: 12px;
    padding: 8px 12px;
    border: none;
    border-radius: 8px;
    background: #242432;
    color: #ffffff;
    font-weight: 800;
    cursor: pointer;
}

.nutrition-product-icon-input::file-selector-button:hover {
    background: #323244;
}

.nutrition-product-icon-hint {
    margin: 8px 0 0;
    color: #80808e;
    font-size: 12px;
    line-height: 1.5;
}

.nutrition-product-icon-preview-block {
    display: flex;
    align-items: center;
    gap: 14px;
    margin-top: 14px;
    padding: 12px;
    border: 1px solid #292938;
    border-radius: 11px;
    background: #0b0b11;
}

.nutrition-product-icon-preview-block[hidden] {
    display: none !important;
}

.nutrition-product-icon-preview {
    width: 82px;
    height: 82px;
    flex-shrink: 0;
    object-fit: contain;
    border: 1px solid #303040;
    border-radius: 12px;
    background:
        linear-gradient(
            45deg,
            #181820 25%,
            transparent 25%
        ),
        linear-gradient(
            -45deg,
            #181820 25%,
            transparent 25%
        ),
        linear-gradient(
            45deg,
            transparent 75%,
            #181820 75%
        ),
        linear-gradient(
            -45deg,
            transparent 75%,
            #181820 75%
        ),
        #101017;
    background-position:
        0 0,
        0 6px,
        6px -6px,
        -6px 0;
    background-size: 12px 12px;
}

.nutrition-product-icon-preview-block
.nutrition-icon-button {
    width: auto;
}


/* Иконка в карточке продукта */

.nutrition-product-card-main {
    display: flex;
    align-items: flex-start;
    gap: 13px;
}

.nutrition-product-card-content {
    min-width: 0;
    flex: 1;
}

.nutrition-product-card-icon {
    display: flex;
    width: 72px;
    height: 72px;
    flex-shrink: 0;
    align-items: center;
    justify-content: center;
    overflow: hidden;
    border: 1px solid #2d2d3c;
    border-radius: 12px;
    background: #111118;
}

.nutrition-product-card-icon img {
    display: block;
    width: 100%;
    height: 100%;
    object-fit: contain;
}

.nutrition-product-card-icon-placeholder {
    color: #5f5f6d;
    font-size: 28px;
    font-weight: 900;
}


/* Иконка в окне выбора продукта */

.nutrition-entry-product-option {
    gap: 12px;
}

.nutrition-entry-product-option-icon {
    display: flex;
    width: 46px;
    height: 46px;
    flex-shrink: 0;
    align-items: center;
    justify-content: center;
    overflow: hidden;
    border: 1px solid #292938;
    border-radius: 9px;
    background: #15151d;
}

.nutrition-entry-product-option-icon img {
    width: 100%;
    height: 100%;
    object-fit: contain;
}

.nutrition-entry-product-option-icon-placeholder {
    color: #60606e;
    font-size: 19px;
    font-weight: 900;
}

.nutrition-entry-product-option-information {
    min-width: 0;
    flex: 1;
}


/* Административные кнопки */

.nutrition-product-admin-actions {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
    margin-top: 14px;
}

.nutrition-product-admin-actions .btn {
    width: auto !important;
    padding: 8px 11px !important;
    font-size: 12px !important;
}

.nutrition-product-icon-button {
    border: 1px solid #36516a !important;
    background: rgba(96, 165, 250, 0.08) !important;
    color: #7ab7ff !important;
}

.nutrition-product-icon-button:hover {
    border-color: #60a5fa !important;
}

.nutrition-product-edit {
    border: 1px solid #3d3d50 !important;
    background: #171720 !important;
    color: #ffffff !important;
}

.nutrition-product-delete {
    border: 1px solid #512a32 !important;
    background: transparent !important;
    color: #ff7373 !important;
}


/* Мобильная версия */

@media (max-width: 600px) {
    .nutrition-product-card-main {
        gap: 10px;
    }

    .nutrition-product-card-icon {
        width: 58px;
        height: 58px;
    }

    .nutrition-product-icon-preview-block {
        align-items: flex-start;
        flex-direction: column;
    }

    .nutrition-product-icon-preview {
        width: 96px;
        height: 96px;
    }

    .nutrition-product-icon-preview-block
    .nutrition-icon-button {
        width: 100%;
    }

    .nutrition-product-admin-actions {
        flex-direction: column;
    }

    .nutrition-product-admin-actions .btn {
        width: 100% !important;
    }
}

/* ==================================================
   ЕДИНИЦЫ ИЗМЕРЕНИЯ ПРОДУКТОВ
================================================== */

.nutrition-product-unit-settings {
    margin: 18px 0;
    padding: 16px;
    border: 1px solid #30303f;
    border-radius: 12px;
    background: #101017;
}

.nutrition-product-unit-settings h4 {
    margin: 0 0 7px;
    color: #ffffff;
    font-size: 15px;
}

.nutrition-product-unit-description,
.nutrition-product-unit-example {
    margin: 0;
    color: #8d8d9b;
    font-size: 12px;
    line-height: 1.5;
}

.nutrition-product-unit-grid {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 12px;
    margin: 14px 0 10px;
}

.nutrition-product-unit-grid label {
    display: flex;
    flex-direction: column;
    gap: 7px;
    color: #d7d7df;
    font-size: 13px;
    font-weight: 700;
}

.nutrition-product-unit-grid input {
    width: 100%;
    padding: 11px 12px;
    border: 1px solid #303040;
    border-radius: 9px;
    background: #0b0b11;
    color: #ffffff;
    font-size: 14px;
}

.nutrition-product-unit-grid input:focus {
    border-color: #ff9f43;
    outline: none;
}


/* Переключатель в форме добавления продукта */

.nutrition-entry-measurement-block {
    margin-bottom: 14px;
}

.nutrition-entry-measurement-block[hidden] {
    display: none !important;
}

.nutrition-entry-measurement-title {
    display: block;
    margin-bottom: 8px;
    color: #d7d7df;
    font-size: 13px;
    font-weight: 700;
}

.nutrition-entry-measurement-switch {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 6px;
    padding: 5px;
    border: 1px solid #2d2d3c;
    border-radius: 11px;
    background: #0b0b11;
}

.nutrition-entry-measurement-button {
    min-height: 42px;
    padding: 9px 12px;
    border: 1px solid transparent;
    border-radius: 8px;
    background: transparent;
    color: #8f8f9c;
    font-size: 13px;
    font-weight: 800;
    cursor: pointer;
    transition:
        background 0.2s ease,
        border-color 0.2s ease,
        color 0.2s ease;
}

.nutrition-entry-measurement-button:hover {
    color: #ffffff;
}

.nutrition-entry-measurement-button.active {
    border-color: #72451e;
    background: rgba(255, 159, 67, 0.14);
    color: #ffad5f;
}

.nutrition-entry-amount-hint {
    margin: 7px 0 0;
    color: #81818f;
    font-size: 12px;
    line-height: 1.45;
}


/* Отображение количества в дневнике */

.nutrition-entry-measurement-value {
    color: #ffffff;
    font-weight: 800;
}

.nutrition-entry-measurement-weight {
    margin-left: 5px;
    color: #858592;
    font-size: 12px;
}


/* Мобильная версия */

@media (max-width: 600px) {
    .nutrition-product-unit-grid {
        grid-template-columns: 1fr;
    }

    .nutrition-entry-measurement-switch {
        grid-template-columns: 1fr 1fr;
    }
}

/* Поле количества продукта */

#nutrition-entry-amount {
    display: block;
    width: 100%;
    min-height: 48px;
    margin-top: 8px;
    padding: 12px 14px;
    border: 1px solid #303040;
    border-radius: 10px;
    outline: none;
    background: #0b0b11;
    color: #ffffff;
    font-family: inherit;
    font-size: 15px;
    font-weight: 700;
    line-height: 1.2;
    box-sizing: border-box;
    transition:
        border-color 0.2s ease,
        box-shadow 0.2s ease;
}

/* Убираем стандартные стрелки браузера */

#nutrition-entry-amount::-webkit-inner-spin-button,
#nutrition-entry-amount::-webkit-outer-spin-button {
    margin: 0;
    appearance: none;
    -webkit-appearance: none;
}

#nutrition-entry-amount {
    appearance: textfield;
    -moz-appearance: textfield;
}

#nutrition-entry-amount:focus {
    border-color: #ff9f43;
    box-shadow: 0 0 0 3px rgba(255, 159, 67, 0.12);
}

#nutrition-entry-amount::placeholder {
    color: #686875;
    font-weight: 500;
}

/* Иконка продукта в приёме пищи */

.nutrition-entry-product {
    display: flex;
    min-width: 0;
    align-items: center;
    gap: 11px;
}

.nutrition-entry-product-icon {
    display: flex;
    width: 46px;
    height: 46px;
    flex: 0 0 46px;
    align-items: center;
    justify-content: center;
    overflow: hidden;
    border: 1px solid #303040;
    border-radius: 10px;
    background: #111118;
}

.nutrition-entry-product-icon img {
    display: block;
    width: 100%;
    height: 100%;
    object-fit: contain;
}

.nutrition-entry-product-icon-placeholder {
    color: #777785;
    font-size: 19px;
    font-weight: 900;
}

.nutrition-entry-product-icon-placeholder[hidden] {
    display: none !important;
}

.nutrition-entry-product-name {
    min-width: 0;
    overflow-wrap: anywhere;
}

@media (max-width: 600px) {
    .nutrition-entry-product-icon {
        width: 40px;
        height: 40px;
        flex-basis: 40px;
        border-radius: 9px;
    }

    .nutrition-entry-product-icon-placeholder {
        font-size: 17px;
    }
}

/* ==================================================
   ПРЕДЛОЖЕНИЕ РАССЧИТАТЬ КБЖУ
================================================== */

.nutrition-kbju-offer {
    display: grid;
    grid-template-columns: auto minmax(0, 1fr) auto;
    gap: 18px;
    align-items: center;
    margin: 20px 0;
    padding: 20px;
    overflow: hidden;
    position: relative;
    border: 1px solid rgba(255, 159, 67, 0.38);
    border-radius: 16px;
    background:
        radial-gradient(
            circle at top right,
            rgba(255, 159, 67, 0.16),
            transparent 45%
        ),
        linear-gradient(
            135deg,
            #141118 0%,
            #101017 100%
        );
}

.nutrition-kbju-offer::before {
    content: "";
    width: 140px;
    height: 140px;
    position: absolute;
    top: -85px;
    right: 140px;
    border-radius: 50%;
    background: rgba(255, 159, 67, 0.09);
    filter: blur(10px);
    pointer-events: none;
}

.nutrition-kbju-offer-icon {
    display: flex;
    width: 54px;
    height: 54px;
    flex-shrink: 0;
    align-items: center;
    justify-content: center;
    position: relative;
    z-index: 1;
    border: 1px solid rgba(255, 159, 67, 0.35);
    border-radius: 14px;
    background: rgba(255, 159, 67, 0.12);
    font-size: 25px;
}

.nutrition-kbju-offer-content {
    min-width: 0;
    position: relative;
    z-index: 1;
}

.nutrition-kbju-offer-label {
    display: block;
    margin-bottom: 5px;
    color: #ffad5f;
    font-size: 11px;
    font-weight: 900;
    letter-spacing: 0.08em;
    text-transform: uppercase;
}

.nutrition-kbju-offer h2 {
    margin: 0 0 7px;
    color: #ffffff;
    font-size: 18px;
    line-height: 1.3;
}

.nutrition-kbju-offer p {
    max-width: 680px;
    margin: 0;
    color: #9999a6;
    font-size: 13px;
    line-height: 1.55;
}

.nutrition-kbju-offer-button {
    display: inline-flex;
    min-height: 44px;
    align-items: center;
    justify-content: center;
    gap: 9px;
    position: relative;
    z-index: 1;
    padding: 11px 17px;
    border: 1px solid #ff9f43;
    border-radius: 10px;
    background: #ff9f43;
    color: #111118;
    font-size: 13px;
    font-weight: 900;
    text-decoration: none;
    white-space: nowrap;
    transition:
        transform 0.2s ease,
        box-shadow 0.2s ease,
        background 0.2s ease;
}

.nutrition-kbju-offer-button:hover {
    transform: translateY(-2px);
    background: #ffad5f;
    box-shadow: 0 10px 25px rgba(255, 159, 67, 0.18);
}

.nutrition-kbju-offer-button span {
    font-size: 18px;
    line-height: 1;
}

@media (max-width: 760px) {
    .nutrition-kbju-offer {
        grid-template-columns: auto minmax(0, 1fr);
        gap: 14px;
        padding: 17px;
    }

    .nutrition-kbju-offer-button {
        width: 100%;
        grid-column: 1 / -1;
    }
}

@media (max-width: 480px) {
    .nutrition-kbju-offer {
        grid-template-columns: 1fr;
    }

    .nutrition-kbju-offer-icon {
        width: 46px;
        height: 46px;
    }

    .nutrition-kbju-offer h2 {
        font-size: 16px;
    }

    .nutrition-kbju-offer p {
        font-size: 12px;
    }

    .nutrition-kbju-offer-button {
        grid-column: auto;
    }
}

/* ==================================================
   ПРОГРЕСС КБЖУ В ВЕРХНИХ КАРТОЧКАХ
================================================== */

.nutrition-summary-card {
    --nutrition-progress-color: #ff5058;

    position: relative;
    display: flex;
    min-width: 0;
    min-height: 180px;
    flex-direction: column;
    justify-content: flex-start;
    overflow: hidden;
}

.nutrition-summary-card[
    data-nutrition-goal-card="protein"
] {
    --nutrition-progress-color: #5fa8ff;
}

.nutrition-summary-card[
    data-nutrition-goal-card="fat"
] {
    --nutrition-progress-color: #ffae45;
}

.nutrition-summary-card[
    data-nutrition-goal-card="carbs"
] {
    --nutrition-progress-color: #a78bfa;
}

.nutrition-summary-percent {
    color: var(--nutrition-progress-color);
    font-size: 12px;
    font-weight: 900;
}

.nutrition-summary-value-line {
    display: flex;
    min-width: 0;
    align-items: baseline;
    justify-content: center;
    flex-wrap: wrap;
    gap: 5px;
    margin-top: 13px;
    color: #ffffff;
    line-height: 1;
}

.nutrition-summary-value-line
#nutrition-total-calories,
.nutrition-summary-value-line
#nutrition-total-protein,
.nutrition-summary-value-line
#nutrition-total-fat,
.nutrition-summary-value-line
#nutrition-total-carbs {
    font-size: 34px;
    font-weight: 900;
}

.nutrition-summary-target {
    color: #a9a9b6;
    font-size: 24px;
    font-weight: 800;
}

.nutrition-summary-target-part {
    color: #777784;
    font-size: 22px;
    font-weight: 700;
}

.nutrition-summary-value-line
.nutrition-summary-unit {
    margin-left: 1px;
    color: #8e8e9b;
    font-size: 12px;
    font-weight: 600;
}

.nutrition-summary-progress {
    width: 100%;
    height: 8px;
    margin-top: 18px;
    overflow: hidden;
    border-radius: 999px;
    background: #282832;
}

.nutrition-summary-progress[hidden],
.nutrition-summary-percent[hidden],
.nutrition-summary-remaining[hidden],
.nutrition-summary-target-part[hidden] {
    display: none !important;
}

.nutrition-summary-progress-bar {
    width: 0;
    height: 100%;
    border-radius: inherit;
    background: var(--nutrition-progress-color);
    transition: width 0.35s ease;
}

.nutrition-summary-remaining {
    min-height: 18px;
    margin: 9px 0 0;
    color: #9696a3;
    font-size: 12px;
    font-weight: 700;
    line-height: 1.4;
    text-align: center;
}

.nutrition-summary-card.nutrition-goal-complete
.nutrition-summary-remaining {
    color: #61d996;
}

.nutrition-summary-card.nutrition-goal-exceeded
.nutrition-summary-progress-bar {
    background: #ff5058;
}

.nutrition-summary-card.nutrition-goal-exceeded
.nutrition-summary-percent,
.nutrition-summary-card.nutrition-goal-exceeded
.nutrition-summary-remaining {
    color: #ff696f;
}


/* Без рассчитанной цели карточки остаются компактными */

.nutrition-summary-card:not(
    .nutrition-summary-card-with-goal
) {
    min-height: 128px;
    justify-content: center;
}

.nutrition-summary-card:not(
    .nutrition-summary-card-with-goal
)
.nutrition-summary-card-header {
    justify-content: center;
}


/* Планшеты и мобильные устройства */

@media (max-width: 900px) {
    .nutrition-summary-card {
        min-height: 170px;
    }

    .nutrition-summary-value-line
    #nutrition-total-calories,
    .nutrition-summary-value-line
    #nutrition-total-protein,
    .nutrition-summary-value-line
    #nutrition-total-fat,
    .nutrition-summary-value-line
    #nutrition-total-carbs {
        font-size: 29px;
    }

    .nutrition-summary-target {
        font-size: 21px;
    }
}

@media (max-width: 600px) {
    .nutrition-summary-card {
        min-height: 160px;
        padding: 15px 12px;
    }

    .nutrition-summary-value-line {
        gap: 4px;
        margin-top: 10px;
    }

    .nutrition-summary-value-line
    #nutrition-total-calories,
    .nutrition-summary-value-line
    #nutrition-total-protein,
    .nutrition-summary-value-line
    #nutrition-total-fat,
    .nutrition-summary-value-line
    #nutrition-total-carbs {
        font-size: 25px;
    }

    .nutrition-summary-target,
    .nutrition-summary-target-part {
        font-size: 18px;
    }

    .nutrition-summary-progress {
        margin-top: 14px;
    }

    .nutrition-summary-remaining {
        font-size: 11px;
    }
}

.nutrition-kbju-offer[hidden] {
    display: none !important;
}

/* Выравнивание названия КБЖУ и процента */

.nutrition-summary-card-header {
    display: flex;
    width: 100%;
    min-height: 22px;
    align-items: center;
    justify-content: space-between;
    flex-wrap: nowrap;
    gap: 10px;
    margin: 0;
}

.nutrition-summary-card-header
.nutrition-summary-label {
    display: inline-flex;
    align-items: center;
    margin: 0;
    padding: 0;
    line-height: 1;
}

.nutrition-summary-card-header
.nutrition-summary-percent {
    display: inline-flex;
    align-items: center;
    flex-shrink: 0;
    margin: 0;
    padding: 0;
    line-height: 1;
}

/* ==================================================
   КАРТОЧКИ ПРИЁМОВ ПИЩИ
================================================== */

.nutrition-meals-heading {
    display: flex;
    align-items: flex-end;
    justify-content: space-between;
    gap: 16px;
    margin: 26px 0 16px;
}

.nutrition-meals-heading h2 {
    margin: 0;
    color: #ffffff;
    font-size: 25px;
    line-height: 1.2;
}

.nutrition-meals-heading span {
    color: #797987;
    font-size: 12px;
}

.nutrition-meals-list {
    display: grid;
    grid-template-columns:
        repeat(2, minmax(0, 1fr));
    gap: 18px;
    align-items: start;
}

.nutrition-meal-card {
    --meal-accent: #ff9f43;
    --meal-soft: rgba(255, 159, 67, 0.13);

    min-width: 0;
    overflow: hidden;
    border: 1px solid #292936;
    border-radius: 22px;
    background: #101017;
    box-shadow:
        0 16px 40px rgba(0, 0, 0, 0.16);
}

.nutrition-meal-card-breakfast {
    --meal-accent: #ffb340;
    --meal-soft: rgba(255, 179, 64, 0.14);
}

.nutrition-meal-card-snack {
    --meal-accent: #8b6dff;
    --meal-soft: rgba(139, 109, 255, 0.14);
}

.nutrition-meal-card-lunch {
    --meal-accent: #52c997;
    --meal-soft: rgba(82, 201, 151, 0.13);
}

.nutrition-meal-card-dinner {
    --meal-accent: #ff7869;
    --meal-soft: rgba(255, 120, 105, 0.13);
}

.nutrition-meal-card-other {
    --meal-accent: #69aaff;
    --meal-soft: rgba(105, 170, 255, 0.13);
}


/* Верхняя часть карточки */

.nutrition-meal-hero {
    min-height: 205px;
    position: relative;
    overflow: hidden;
    padding: 22px;
    background:
        radial-gradient(
            circle at 90% 90%,
            var(--meal-soft),
            transparent 42%
        ),
        linear-gradient(
            145deg,
            #15151e 0%,
            #101017 100%
        );
}

.nutrition-meal-hero::before {
    content: "";
    width: 140px;
    height: 140px;
    position: absolute;
    right: -55px;
    bottom: -65px;
    border-radius: 50%;
    background: var(--meal-soft);
    filter: blur(4px);
    pointer-events: none;
}

.nutrition-meal-top-row {
    display: flex;
    min-width: 0;
    align-items: flex-start;
    justify-content: space-between;
    gap: 14px;
    position: relative;
    z-index: 2;
}

.nutrition-meal-title-area {
    display: flex;
    min-width: 0;
    align-items: center;
    flex-wrap: wrap;
    gap: 9px;
}

.nutrition-meal-title {
    min-width: 0;
    margin: 0;
    color: #ffffff;
    font-size: 22px;
    font-weight: 900;
    line-height: 1.2;
    overflow-wrap: anywhere;
}

.nutrition-meal-time {
    display: inline-flex;
    min-height: 34px;
    align-items: center;
    padding: 6px 11px;
    border: 1px solid
        color-mix(
            in srgb,
            var(--meal-accent) 42%,
            transparent
        );
    border-radius: 999px;
    background: var(--meal-soft);
    color: var(--meal-accent);
    font-size: 13px;
    font-weight: 900;
}


/* Круглая кнопка плюс */

.nutrition-meal-add-button {
    display: flex;
    width: 46px;
    height: 46px;
    flex: 0 0 46px;
    align-items: center;
    justify-content: center;
    position: relative;
    z-index: 3;
    padding: 0;
    border: 1px solid
        color-mix(
            in srgb,
            var(--meal-accent) 38%,
            transparent
        );
    border-radius: 50%;
    background: var(--meal-soft);
    color: var(--meal-accent);
    font-family: inherit;
    font-size: 34px;
    font-weight: 400;
    line-height: 1;
    cursor: pointer;
    transition:
        transform 0.2s ease,
        background 0.2s ease;
}

.nutrition-meal-add-button:hover {
    transform: scale(1.07);
    background:
        color-mix(
            in srgb,
            var(--meal-accent) 22%,
            transparent
        );
}

.nutrition-meal-add-button:active {
    transform: scale(0.96);
}


/* Калории и БЖУ */

.nutrition-meal-card-summary {
    position: relative;
    z-index: 2;
    margin-top: 43px;
}

.nutrition-meal-calories-line {
    display: flex;
    align-items: baseline;
    gap: 7px;
}

.nutrition-meal-calories-line strong {
    color: #ffffff;
    font-size: 38px;
    font-weight: 900;
    line-height: 1;
}

.nutrition-meal-calories-line span {
    color: #ffffff;
    font-size: 21px;
    font-weight: 900;
}

.nutrition-meal-card-macros {
    max-width: calc(100% - 115px);
    margin-top: 9px;
    color: #92929f;
    font-size: 12px;
    font-weight: 700;
    line-height: 1.45;
}


/* Иллюстрация */

.nutrition-meal-illustration {
    position: absolute;
    right: 17px;
    bottom: 28px;
    z-index: 1;
    font-size: 72px;
    line-height: 1;
    transform: rotate(-8deg);
    filter:
        drop-shadow(
            0 12px 16px rgba(0, 0, 0, 0.2)
        );
    user-select: none;
    pointer-events: none;
}


/* Редактирование и удаление */

.nutrition-meal-management {
    display: flex;
    gap: 7px;
    position: absolute;
    left: 22px;
    bottom: 14px;
    z-index: 3;
}

.nutrition-meal-management-button {
    padding: 0;
    border: none;
    background: transparent;
    color: #6f6f7c;
    font-family: inherit;
    font-size: 10px;
    font-weight: 700;
    cursor: pointer;
}

.nutrition-meal-management-button:hover {
    color: #ffffff;
}

.nutrition-meal-management-delete:hover {
    color: #ff676d;
}


/* Продукты внутри карточки */

.nutrition-meal-entries {
    padding: 12px 16px 16px;
    border-top: 1px solid #252532;
    background: #0d0d13;
}

.nutrition-meal-empty {
    display: block;
    width: 100%;
    padding: 13px;
    border: 1px dashed #30303e;
    border-radius: 11px;
    background: transparent;
    color: #777785;
    font-family: inherit;
    font-size: 12px;
    cursor: pointer;
}

.nutrition-meal-empty:hover {
    border-color: var(--meal-accent);
    color: var(--meal-accent);
}


/* Перестраиваем строку продукта под узкую карточку */

.nutrition-meal-card
.nutrition-entry-row {
    display: grid;
    grid-template-columns:
        minmax(0, 1fr) auto;
    gap: 8px 12px;
    padding: 12px 0;
}

.nutrition-meal-card
.nutrition-entry-product {
    min-width: 0;
    grid-column: 1;
}

.nutrition-meal-card
.nutrition-entry-amount {
    grid-column: 2;
    text-align: right;
}

.nutrition-meal-card
.nutrition-entry-calories {
    grid-column: 1;
}

.nutrition-meal-card
.nutrition-entry-macros {
    grid-column: 1 / -1;
}

.nutrition-meal-card
.nutrition-entry-actions {
    display: flex;
    grid-column: 1 / -1;
    justify-content: flex-end;
    gap: 7px;
}


/* Адаптация */

@media (max-width: 820px) {
    .nutrition-meals-list {
        grid-template-columns: 1fr;
    }
}

@media (max-width: 600px) {
    .nutrition-meals-heading {
        align-items: flex-start;
        flex-direction: column;
        gap: 5px;
    }

    .nutrition-meals-heading h2 {
        font-size: 21px;
    }

    .nutrition-meal-hero {
        min-height: 190px;
        padding: 18px;
    }

    .nutrition-meal-title {
        font-size: 20px;
    }

    .nutrition-meal-add-button {
        width: 42px;
        height: 42px;
        flex-basis: 42px;
        font-size: 30px;
    }

    .nutrition-meal-card-summary {
        margin-top: 37px;
    }

    .nutrition-meal-calories-line strong {
        font-size: 33px;
    }

    .nutrition-meal-calories-line span {
        font-size: 18px;
    }

    .nutrition-meal-illustration {
        right: 13px;
        bottom: 27px;
        font-size: 62px;
    }

    .nutrition-meal-management {
        left: 18px;
    }
}

.nutrition-meal-products-count {
    max-width: calc(100% - 115px);
    margin-top: 7px;
    color: var(--meal-accent);
    font-size: 11px;
    font-weight: 800;
    line-height: 1.4;
}

.nutrition-meal-card {
    cursor: pointer;
    transition:
        transform 0.2s ease,
        border-color 0.2s ease,
        box-shadow 0.2s ease;
}

.nutrition-meal-card:hover {
    transform: translateY(-3px);
    border-color:
        color-mix(
            in srgb,
            var(--meal-accent) 42%,
            #292936
        );
    box-shadow:
        0 20px 46px rgba(0, 0, 0, 0.24);
}

.nutrition-meal-card:focus-visible {
    outline: 2px solid var(--meal-accent);
    outline-offset: 3px;
}

/* ==================================================
   МОДАЛЬНОЕ ОКНО ПРИЁМА ПИЩИ
================================================== */

.nutrition-meal-details-modal-content,
.nutrition-meal-details-modal-content * {
    box-sizing: border-box;
}

.nutrition-meal-details-modal-content {
    width: min(760px, calc(100vw - 32px));
    max-width: 760px;
    max-height: calc(100vh - 40px);
    overflow-x: hidden;
    overflow-y: auto;
    padding: 30px;
    border: 1px solid #2c2c3a;
    border-radius: 24px;
    background:
        linear-gradient(
            145deg,
            #16161f 0%,
            #101017 100%
        );
    box-shadow:
        0 30px 90px rgba(0, 0, 0, 0.55);
}


/* Заголовок */

.nutrition-meal-details-header {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 22px;
    padding-right: 38px;
    margin-bottom: 24px;
}

.nutrition-meal-details-header > div {
    min-width: 0;
}

.nutrition-meal-details-label {
    display: block;
    margin-bottom: 7px;
    color: #777785;
    font-size: 11px;
    font-weight: 800;
    line-height: 1;
    letter-spacing: 0.08em;
    text-transform: uppercase;
}

.nutrition-meal-details-header h2 {
    margin: 0;
    color: #ffffff;
    font-size: 30px;
    font-weight: 900;
    line-height: 1.15;
}

.nutrition-meal-details-time {
    display: inline-flex;
    min-height: 31px;
    align-items: center;
    margin: 11px 0 0;
    padding: 5px 11px;
    border: 1px solid rgba(255, 77, 77, 0.3);
    border-radius: 999px;
    background: rgba(255, 77, 77, 0.1);
    color: #ff6969;
    font-size: 12px;
    font-weight: 800;
}

.nutrition-meal-details-time[hidden] {
    display: none;
}


/* Кнопка добавления */

.nutrition-meal-details-add-button {
    display: inline-flex;
    min-height: 43px;
    flex-shrink: 0;
    align-items: center;
    justify-content: center;
    padding: 10px 17px;
    border: 1px solid #ff4d4d;
    border-radius: 12px;
    background: #ff4d4d;
    color: #ffffff;
    font-family: inherit;
    font-size: 13px;
    font-weight: 800;
    line-height: 1;
    text-decoration: none;
    cursor: pointer;
    transition:
        transform 0.2s ease,
        background 0.2s ease,
        box-shadow 0.2s ease;
}

.nutrition-meal-details-add-button:hover {
    transform: translateY(-2px);
    background: #ff6161;
    box-shadow:
        0 10px 25px rgba(255, 77, 77, 0.25);
}

.nutrition-meal-details-add-button:active {
    transform: translateY(0);
}


/* КБЖУ приёма пищи */

.nutrition-meal-details-summary {
    display: grid;
    grid-template-columns:
        repeat(4, minmax(0, 1fr));
    gap: 12px;
    margin-bottom: 25px;
}

.nutrition-meal-details-summary > div {
    min-width: 0;
    padding: 15px;
    border: 1px solid #292936;
    border-radius: 15px;
    background: #0d0d14;
}

.nutrition-meal-details-summary span {
    display: block;
    margin-bottom: 8px;
    color: #7e7e8c;
    font-size: 11px;
    font-weight: 700;
}

.nutrition-meal-details-summary strong {
    color: #ffffff;
    font-size: 23px;
    font-weight: 900;
    line-height: 1;
}

.nutrition-meal-details-summary small {
    margin-left: 4px;
    color: #858593;
    font-size: 11px;
    font-weight: 700;
}


/* Список продуктов */

.nutrition-meal-details-entries {
    display: flex;
    min-width: 0;
    flex-direction: column;
    gap: 10px;
}

.nutrition-meal-details-entries[hidden] {
    display: none;
}

.nutrition-meal-details-entries
.nutrition-entry-row {
    display: grid;
    width: 100%;
    min-width: 0;
    grid-template-columns:
        minmax(0, 1fr) auto;
    grid-template-areas:
        "product calories"
        "amount amount"
        "macros macros"
        "actions actions";
    align-items: center;
    gap: 7px 14px;
    padding: 15px;
    border: 1px solid #292936;
    border-radius: 15px;
    background: #0d0d14;
    overflow: hidden;
}

.nutrition-meal-details-entries
.nutrition-entry-product {
    display: flex;
    min-width: 0;
    grid-area: product;
    align-items: center;
    gap: 12px;
}

.nutrition-meal-details-entries
.nutrition-entry-product-icon {
    width: 44px;
    height: 44px;
    flex: 0 0 44px;
    overflow: hidden;
    border: 1px solid #30303e;
    border-radius: 11px;
    background: #171720;
}

.nutrition-meal-details-entries
.nutrition-entry-product-icon img {
    width: 100%;
    height: 100%;
    display: block;
    object-fit: cover;
}

.nutrition-meal-details-entries
.nutrition-entry-product-name {
    min-width: 0;
    color: #ffffff;
    font-size: 14px;
    font-weight: 800;
    line-height: 1.3;
    overflow-wrap: anywhere;
}

.nutrition-meal-details-entries
.nutrition-entry-calories {
    grid-area: calories;
    color: #ff6262;
    font-size: 13px;
    font-weight: 900;
    white-space: nowrap;
    text-align: right;
}

.nutrition-meal-details-entries
.nutrition-entry-amount {
    grid-area: amount;
    padding-left: 56px;
    color: #a3a3ae;
    font-size: 11px;
}

.nutrition-meal-details-entries
.nutrition-entry-macros {
    grid-area: macros;
    padding-left: 56px;
    color: #777785;
    font-size: 11px;
    line-height: 1.45;
}

.nutrition-meal-details-entries
.nutrition-entry-actions {
    display: flex;
    grid-area: actions;
    justify-content: flex-end;
    gap: 8px;
    padding-top: 8px;
    border-top: 1px solid #242430;
}

.nutrition-meal-details-entries
.nutrition-icon-button {
    padding: 7px 10px;
    border: 1px solid #30303e;
    border-radius: 8px;
    background: #171720;
    color: #a0a0ab;
    font-family: inherit;
    font-size: 11px;
    font-weight: 700;
    cursor: pointer;
}

.nutrition-meal-details-entries
.nutrition-icon-button:hover {
    border-color: #505063;
    color: #ffffff;
}

.nutrition-meal-details-entries
.nutrition-icon-button-danger:hover {
    border-color: #ff4d4d;
    color: #ff6868;
}


/* Пустой приём пищи */

.nutrition-meal-details-empty {
    padding: 35px 20px;
    border: 1px dashed #343443;
    border-radius: 16px;
    background: #0d0d14;
    text-align: center;
}

.nutrition-meal-details-empty[hidden] {
    display: none;
}

.nutrition-meal-details-empty strong {
    display: block;
    color: #ffffff;
    font-size: 15px;
}

.nutrition-meal-details-empty p {
    max-width: 360px;
    margin: 8px auto 0;
    color: #777785;
    font-size: 12px;
    line-height: 1.5;
}


/* Мобильная версия */

@media (max-width: 600px) {
    .nutrition-meal-details-modal-content {
        width: calc(100vw - 16px);
        max-height: calc(100dvh - 16px);
        padding: 21px 16px;
        border-radius: 18px;
    }

    .nutrition-meal-details-header {
        align-items: stretch;
        flex-direction: column;
        gap: 16px;
        padding-right: 35px;
    }

    .nutrition-meal-details-header h2 {
        font-size: 25px;
    }

    .nutrition-meal-details-add-button {
        width: 100%;
    }

    .nutrition-meal-details-summary {
        grid-template-columns:
            repeat(2, minmax(0, 1fr));
        gap: 9px;
    }

    .nutrition-meal-details-summary > div {
        padding: 13px;
    }

    .nutrition-meal-details-summary strong {
        font-size: 21px;
    }

    .nutrition-meal-details-entries
    .nutrition-entry-row {
        gap: 7px 10px;
        padding: 13px;
    }

    .nutrition-meal-details-entries
    .nutrition-entry-amount,
    .nutrition-meal-details-entries
    .nutrition-entry-macros {
        padding-left: 0;
    }

    .nutrition-meal-details-entries
    .nutrition-entry-product-name {
        font-size: 13px;
    }

    .nutrition-meal-details-entries
    .nutrition-entry-calories {
        font-size: 12px;
    }
}