*
{
    box-sizing: border-box;
}

html
{
    margin: 0;
    padding: 0;
}

body
{
    margin: 0;
    background: #000000;
    color: #f3f5f4;
    font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Arial, sans-serif;
}

a
{
    color: inherit;
    text-decoration: none;
}

button,
.button
{
    font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Arial, sans-serif;
}

.button
{
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-height: 46px;
    padding: 0 22px;
    border: 1px solid transparent;
    border-radius: 10px;
    font-size: 15px;
    font-weight: 600;
    cursor: pointer;
    transition: background 0.15s ease,
        border-color 0.15s ease,
        transform 0.15s ease;
}

.button:hover
{
    transform: translateY(-1px);
}

.button-primary
{
    background: #2f9e44;
    color: #ffffff;
}

.button-primary:hover
{
    background: #37b24d;
}

.button-secondary
{
    background: #1b201e;
    border-color: #3a413e;
    color: #f1f3f2;
}

.button-secondary:hover
{
    background: #252b28;
}

.button-soft
{
    background: #193321;
    border-color: #285436;
    color: #8ce99a;
}

.button-small
{
    min-height: 40px;
    padding: 0 16px;
}

.login-container
{
    width: calc(100% - 40px);
    max-width: 380px;
    margin: 80px auto;
    padding: 30px;
    background: #191d1b;
    border: 1px solid #303633;
    border-radius: 14px;
}

.login-container h1
{
    margin-top: 0;
}

.form-group
{
    margin-bottom: 18px;
}

.form-group label
{
    display: block;
    margin-bottom: 7px;
    color: #c6ccc9;
    font-size: 14px;
}

.form-group input
{
    width: 100%;
    padding: 12px;
    background: #101312;
    color: #ffffff;
    border: 1px solid #3a413e;
    border-radius: 8px;
    font-size: 16px;
}

.form-group input:focus
{
    border-color: #2f9e44;
    outline: none;
}

.login-container button
{
    width: 100%;
    min-height: 45px;
    margin-bottom: 10px;
}

.top-bar
{
    display: flex;
    align-items: center;
    justify-content: space-between;
    min-height: 75px;
    padding: 14px 18px;
    background: #151917;
    border-bottom: 1px solid #2b302e;
}

.brand
{
    display: flex;
    align-items: center;
    gap: 14px;
}

.brand-icon
{
    display: flex;
    align-items: center;
    justify-content: center;
    width: 40px;
    height: 40px;
    background: #183a22;
    border-radius: 12px;
    font-size: 21px;
}

.brand h1
{
    margin: 0;
    font-size: 22px;
}

.brand span
{
    display: none;
    margin-top: 3px;
    color: #9ca7a2;
    font-size: 14px;
}

.account-area
{
    display: flex;
    align-items: center;
    gap: 18px;
    color: #b8c0bc;
}

.home-container
{
    width: calc(100% - 28px);
    max-width: 1300px;
    margin: 0 auto;
    padding: 16px 0 120px;
}

.dinner-hero
{
    display: flex;
    align-items: center;
    justify-content: space-between;
    min-height: auto;
    padding: 25px 20px;
    overflow: hidden;
    background: linear-gradient(
            110deg,
            #162a1c,
            #183421
        );
    border: 1px solid #294531;
    border-radius: 18px;
}

.dinner-content
{
    position: relative;
    z-index: 2;
}

.section-label
{
    color: #69db7c;
    font-size: 13px;
    font-weight: 700;
    letter-spacing: 0.8px;
}

.dinner-content h2
{
    margin: 10px 0;
    font-size: 32px;
    line-height: 1.05;
}

.dinner-content p
{
    margin: 0;
    color: #b6c2bb;
    font-size: 15px;
}

.hero-actions
{
    display: flex;
    flex-wrap: wrap;
    gap: 14px;
    margin-top: 28px;
    flex-direction: column;
}

.dinner-decoration
{
    display: flex;
    align-items: center;
    gap: 25px;
    padding-left: 30px;
    display: none;
}

.plate
{
    display: flex;
    align-items: center;
    justify-content: center;
    width: 150px;
    height: 150px;
    background: #242b27;
    border: 7px solid #e9ecea;
    border-radius: 50%;
    box-shadow: 0 12px 30px rgba(0, 0, 0, 0.3);
    font-size: 72px;
}

.dinner-decoration > span
{
    color: #8ce99a;
    font-size: 20px;
    font-style: italic;
    line-height: 1.5;
    transform: rotate(-4deg);
}

.home-section
{
    margin-top: 32px;
}

.section-heading
{
    margin-bottom: 15px;
}

.section-heading h2
{
    margin: 0;
    font-size: 23px;
}

.section-heading p
{
    margin: 4px 0 0;
    color: #8f9994;
    font-size: 14px;
}

.kitchen-grid
{
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 10px;
}

.kitchen-card
{
    position: relative;
    display: block;
    min-height: 135px;
    padding: 17px;
    background: #191e1b;
    border: 1px solid #303633;
    border-radius: 14px;
    transition: transform 0.15s ease,
        border-color 0.15s ease,
        background 0.15s ease;
}

.kitchen-card:hover
{
    transform: translateY(-2px);
    background: #202622;
    border-color: #46504b;
}

.card-icon
{
    margin: 0 0 12px;
    font-size: 35px;
}

.card-content h3
{
    margin: 0 0 6px;
    font-size: 18px;
}

.card-content p
{
    margin: 0;
    color: #929d97;
    font-size: 12px;
}

.card-arrow
{
    position: absolute;
    right: 18px;
    font-size: 30px;
    display: none;
}

.recipe-card
{
    border-top: 3px solid #4dabf7;
}

.meal-card
{
    border-top: 3px solid #ffa94d;
}

.favorite-card
{
    border-top: 3px solid #f06595;
}

.dashboard-grid
{
    display: grid;
    grid-template-columns: 1fr;
    gap: 18px;
    margin-top: 24px;
}

.dashboard-card
{
    padding: 18px;
    background: #181c1a;
    border: 1px solid #303633;
    border-radius: 14px;
}

.dashboard-card-header
{
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-bottom: 18px;
}

.dashboard-card-header h2
{
    margin: 0;
    font-size: 18px;
}

.dashboard-card-header a
{
    color: #69db7c;
    font-size: 14px;
}

.pantry-stats
{
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 0;
}

.stat
{
    display: flex;
    flex-direction: column;
    align-items: center;
    padding: 4px 8px;
    text-align: center;
}

.stat + .stat
{
    border-left: 1px solid #303633;
}

.stat-icon
{
    display: flex;
    align-items: center;
    justify-content: center;
    width: 46px;
    height: 46px;
    margin-bottom: 10px;
    border-radius: 50%;
}

.stat-icon.green
{
    background: #183a22;
}

.stat-icon.orange
{
    background: #3c2a14;
}

.stat-icon.blue
{
    background: #172d40;
}

.stat strong
{
    font-size: 22px;
}

.stat span
{
    margin-top: 4px;
    font-weight: 600;
    font-size: 12px;
}

.stat small
{
    margin-top: 3px;
    color: #808b85;
    font-size: 10px;
}

.next-meal
{
    display: flex;
    align-items: flex-start;
    gap: 20px;
}

.meal-icon
{
    display: flex;
    align-items: center;
    justify-content: center;
    min-width: 60px;
    height: 60px;
    background: #302344;
    border-radius: 50%;
    font-size: 25px;
}

.meal-details h3
{
    margin: 0;
    font-size: 20px;
}

.meal-details p
{
    margin: 6px 0 18px;
    color: #919c96;
}

.activity-card
{
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    min-height: 130px;
    padding: 25px;
    background: #171b19;
    border: 1px solid #292f2c;
    border-radius: 14px;
    color: #8f9994;
    text-align: center;
}

.activity-icon
{
    margin-bottom: 7px;
    color: #b3bcb7;
    font-size: 25px;
}

.activity-card strong
{
    color: #cbd1ce;
}

.activity-card p
{
    margin: 7px 0 0;
}

.bottom-nav
{
    position: fixed;
    right: 0;
    bottom: 0;
    left: 0;
    z-index: 10;
    display: flex;
    align-items: center;
    justify-content: space-around;
    min-height: 75px;
    padding: 8px 4px;
    background: rgba(18, 22, 20, 0.96);
    border-top: 1px solid #303633;
    backdrop-filter: blur(12px);
}

.nav-item
{
    display: flex;
    flex-direction: column;
    align-items: center;
    min-width: 55px;
    gap: 5px;
    color: #a3ada8;
    font-size: 11px;
}

.nav-item span
{
    font-size: 23px;
}

.nav-item:hover,
.nav-item.active
{
    color: #69db7c;
}

.nav-add span
{
    display: flex;
    align-items: center;
    justify-content: center;
    width: 52px;
    height: 52px;
    margin-top: -25px;
    background: #2f9e44;
    color: white;
    border: 4px solid #101312;
    border-radius: 50%;
    font-size: 30px;
}

.account-area > span
{
    display: none;
}

.hero-actions .button
{
    width: 100%;
}

.admin-tabs
{
    display: flex;
    gap: 8px;
    margin-bottom: 24px;
    border-bottom: 1px solid #303633;
}

.admin-tab
{
    padding: 12px 20px;
    background: transparent;
    color: #9ca7a2;
    border: none;
    border-bottom: 3px solid transparent;
    font-size: 15px;
    font-weight: 600;
    cursor: pointer;
}

.admin-tab.active
{
    color: #69db7c;
    border-bottom-color: #2f9e44;
}

.admin-tab-content
{
    padding-top: 5px;
}

.style-table-container
{
    overflow-x: auto;
    background: #181c1a;
    border: 1px solid #303633;
    border-radius: 12px;
}

.style-table
{
    width: 100%;
    border-collapse: collapse;
}

.style-table th
{
    padding: 14px 16px;
    background: #202622;
    color: #cbd1ce;
    border-bottom: 1px solid #303633;
    text-align: left;
    font-size: 13px;
    text-transform: uppercase;
}

.style-table td
{
    padding: 12px 16px;
    border-bottom: 1px solid #292f2c;
    color: #c4cbc7;
    vertical-align: top;
}

.style-table tr:last-child td
{
    border-bottom: none;
}

.selector-cell
{
    width: 30%;
    color: #69db7c !important;
    font-family: "SFMono-Regular", Consolas, monospace;
    font-weight: 600;
}

.style-table code
{
    color: #ffa94d;
    font-family: "SFMono-Regular", Consolas, monospace;
}

.style-select
{
    min-width: 180px;
    padding: 8px 10px;
    background: #101312;
    color: #f3f5f4;
    border: 1px solid #3a413e;
    border-radius: 7px;
    font-family: "SFMono-Regular", Consolas, monospace;
    font-size: 14px;
}

.style-select:focus
{
    border-color: #2f9e44;
    outline: none;
}

.color-value
{
    display: flex;
    align-items: center;
    gap: 10px;
}

.style-color
{
    width: 42px;
    height: 32px;
    padding: 0;
    background: transparent;
    border: 1px solid #3a413e;
    border-radius: 6px;
    cursor: pointer;
}

.style-color::-webkit-color-swatch-wrapper
{
    padding: 2px;
}

.style-color::-webkit-color-swatch
{
    border: none;
    border-radius: 4px;
}

.numeric-value
{
    display: flex;
    align-items: center;
    gap: 7px;
}

.style-number
{
    width: 90px;
    padding: 8px 10px;
    background: #101312;
    color: #f3f5f4;
    border: 1px solid #3a413e;
    border-radius: 7px;
    font-family: "SFMono-Regular", Consolas, monospace;
    font-size: 14px;
}

.style-number:focus
{
    border-color: #2f9e44;
    outline: none;
}

.unit-label
{
    color: #9ca7a2;
    font-family: "SFMono-Regular", Consolas, monospace;
    font-size: 14px;
}

.border-editor
{
    display: flex;
    align-items: center;
    gap: 10px;
}

.border-editor .style-number
{
    width: 70px;
}

.border-editor .style-select
{
    min-width: 110px;
}

.percent-value
{
    display: flex;
    align-items: center;
    gap: 8px;
}

.style-range
{
    width: 180px;
    cursor: pointer;
}

.range-value
{
    min-width: 30px;
    color: #f3f5f4;
    font-family: "SFMono-Regular", Consolas, monospace;
    font-size: 14px;
    text-align: right;
}

.style-actions
{
    display: flex;
    align-items: center;
    gap: 10px;
    flex-wrap: wrap;
}
.modal-overlay
{
    display: none;

    position: fixed;

    top: 0;
    right: 0;
    bottom: 0;
    left: 0;

    align-items: center;
    justify-content: center;

    padding: 24px;

    background: rgba(0, 0, 0, 0.7);

    z-index: 1000;
}


.modal-overlay.active
{
    display: flex;
}


.modal
{
    width: 100%;
    max-width: 560px;

    background: #181c1a;

    border: 1px solid #303633;
    border-radius: 14px;

    overflow: hidden;
}


.modal-header
{
    display: flex;

    align-items: flex-start;
    justify-content: space-between;

    gap: 20px;

    padding: 22px 24px;

    border-bottom: 1px solid #303633;
}


.modal-header h2
{
    margin: 0 0 6px 0;
}


.modal-header p
{
    margin: 0;

    color: #9ca7a2;
}


.modal-close-button
{
    padding: 0;

    background: transparent;

    color: #c4cbc7;

    border: none;

    font-size: 28px;
    line-height: 1;

    cursor: pointer;
}


.modal-body
{
    padding: 24px;
}


.modal-footer
{
    display: flex;

    justify-content: flex-end;

    gap: 10px;

    padding: 18px 24px;

    border-top: 1px solid #303633;
}


.form-label
{
    display: block;

    margin-bottom: 8px;

    color: #cbd1ce;

    font-size: 14px;
    font-weight: 600;
}


.form-input
{
    width: 100%;

    padding: 12px 14px;

    background: #101312;

    color: #f3f5f4;

    border: 1px solid #3a413e;
    border-radius: 8px;

    font-size: 15px;
}


.form-input:focus
{
    border-color: #2f9e44;

    outline: none;
}


.form-message
{
    min-height: 20px;

    margin: 10px 0 0 0;

    color: #9ca7a2;

    font-size: 14px;
}

.recipe-json-container
{
    display: none;

    max-height: 450px;

    margin-top: 20px;

    background: #101312;

    border: 1px solid #303633;
    border-radius: 8px;

    overflow: auto;
}


.recipe-json-container.active
{
    display: block;
}


.recipe-json
{
    margin: 0;

    padding: 16px;

    color: #cbd1ce;

    font-family: "SFMono-Regular", Consolas, monospace;
    font-size: 13px;
    line-height: 1.5;

    white-space: pre-wrap;
    word-break: break-word;
}
/* =========================================================
   RECIPE TILES
   ========================================================= */

.recipe-tile-grid
{
    display: grid;

    grid-template-columns: repeat(
        2,
        minmax(
            0,
            1fr
        )
    );

    gap: 18px;

    margin-top: 20px;
}


.recipe-tile
{
    position: relative;

    display: flex;
    flex-direction: column;

    min-height: 190px;

    padding: 22px;

    background:
        linear-gradient(
            145deg,
            #1c221f 0%,
            #171b19 100%
        );

    border: 1px solid #343c38;
    border-top: 3px solid #2f9e44;

    border-radius: 14px;

    color: #f3f5f4;

    text-decoration: none;

    box-shadow:
        0 4px 12px rgba(
            0,
            0,
            0,
            0.18
        );

    overflow: hidden;

    transition:
        transform 0.15s ease,
        box-shadow 0.15s ease,
        border-color 0.15s ease,
        background 0.15s ease;
}


.recipe-tile::after
{
    content: "›";

    position: absolute;

    right: 18px;
    bottom: 14px;

    color: #59635e;

    font-size: 30px;
    font-weight: 300;

    transition:
        color 0.15s ease,
        transform 0.15s ease;
}


.recipe-tile:hover
{
    transform: translateY(
        -3px
    );

    background:
        linear-gradient(
            145deg,
            #222a26 0%,
            #1a201d 100%
        );

    border-color: #4b5a52;
    border-top-color: #51cf66;

    box-shadow:
        0 10px 28px rgba(
            0,
            0,
            0,
            0.32
        );
}


.recipe-tile:hover::after
{
    color: #69db7c;

    transform: translateX(
        3px
    );
}


.recipe-tile-header
{
    display: flex;

    align-items: flex-start;
    justify-content: space-between;

    gap: 15px;
}


.recipe-tile-header h3
{
    margin: 0;

    color: #ffffff;

    font-size: 20px;
    font-weight: 650;

    line-height: 1.25;
}


.recipe-rating
{
    flex-shrink: 0;

    padding: 5px 9px;

    background: #2d2817;

    border: 1px solid #514724;
    border-radius: 7px;

    color: #ffd43b;

    font-size: 13px;
    font-weight: 600;

    white-space: nowrap;
}


.recipe-tile-intro
{
    margin: 14px 0 18px;

    color: #aeb8b3;

    font-size: 14px;
    line-height: 1.55;
}


.recipe-tile-details
{
    display: flex;
    flex-wrap: wrap;

    gap: 8px 18px;

    margin-top: auto;
    padding-top: 14px;
    padding-right: 25px;

    border-top: 1px solid #2b322f;

    color: #89958f;

    font-size: 13px;
}


.recipe-tile-details span
{
    display: inline-flex;

    align-items: center;
}


.empty-state
{
    margin-top: 20px;

    padding: 40px;

    background: #181c1a;

    border: 1px solid #303633;
    border-radius: 14px;

    color: #8f9994;

    text-align: center;
}


/* =========================================================
   MAIN NAVIGATION
   ========================================================= */

.main-navigation
{
    position: sticky;

    top: 0;

    z-index: 100;

    display: flex;

    align-items: center;
    justify-content: space-between;

    width: 100%;
    min-height: 62px;

    padding: 0 4%;

    background:
        linear-gradient(
            90deg,
            #121614 0%,
            #181e1a 50%,
            #121614 100%
        );

    border-bottom: 1px solid #303833;

    box-shadow:
        0 4px 16px rgba(
            0,
            0,
            0,
            0.28
        );

    box-sizing: border-box;
}


.main-navigation-brand
{
    display: flex;

    align-items: center;
}


.main-navigation-logo
{
    position: relative;

    display: flex;

    align-items: center;

    color: #f5f7f6;

    font-size: 20px;
    font-weight: 750;

    letter-spacing: -0.3px;

    text-decoration: none;
}


.main-navigation-logo::before
{
    content: "🍴";

    display: flex;

    align-items: center;
    justify-content: center;

    width: 36px;
    height: 36px;

    margin-right: 10px;

    background: #183a22;

    border: 1px solid #285436;
    border-radius: 9px;

    font-size: 18px;
}


.main-navigation-logo:hover
{
    color: #69db7c;
}


.main-navigation-links
{
    display: flex;

    align-items: center;

    gap: 6px;
}


.main-navigation-link
{
    position: relative;

    display: flex;

    align-items: center;
    justify-content: center;

    min-height: 40px;

    padding: 0 15px;

    border-radius: 8px;

    color: #aeb8b3;

    font-size: 14px;
    font-weight: 600;

    text-decoration: none;

    transition:
        background 0.15s ease,
        color 0.15s ease;
}


.main-navigation-link:hover
{
    background: #222824;

    color: #ffffff;

    text-decoration: none;
}


.main-navigation-link:last-child
{
    margin-left: 8px;

    border: 1px solid #3a413e;

    color: #c6ccc9;
}


.main-navigation-link:last-child:hover
{
    background: #302020;

    border-color: #633535;

    color: #ff8787;
}


/* =========================================================
   RECIPE PAGE HEADER
   ========================================================= */

.page-content
{
    width: 92%;
    max-width: 1300px;

    margin: 0 auto;

    padding: 28px 0 80px;
}


.page-content > section
{
    padding: 24px;

    background: #141816;

    border: 1px solid #292f2c;
    border-radius: 16px;
}


/* =========================================================
   ADD RECIPE PAGE
   ========================================================= */

body > main
{
    width: 92%;
    max-width: 1100px;

    margin: 0 auto;

    padding: 28px 0 80px;
}


body > main > h1
{
    margin-top: 0;

    font-size: 28px;
}


body > main section
{
    margin-bottom: 24px;

    padding: 22px;

    background: #171b19;

    border: 1px solid #303633;
    border-radius: 14px;
}


body > main section h2
{
    margin-top: 0;

    color: #f3f5f4;

    font-size: 20px;
}


.recipe-form-table
{
    width: 100%;

    border-collapse: separate;
    border-spacing: 0;

    overflow: hidden;

    border: 1px solid #303633;
    border-radius: 10px;
}


.recipe-form-table th,
.recipe-form-table td
{
    padding: 11px 14px;

    border: none;
    border-bottom: 1px solid #292f2c;

    vertical-align: middle;
}


.recipe-form-table tr:last-child th,
.recipe-form-table tr:last-child td
{
    border-bottom: none;
}


.recipe-form-table th
{
    width: 220px;

    background: #1e2421;

    color: #b9c2bd;

    text-align: left;

    font-size: 13px;
    font-weight: 600;

    white-space: nowrap;
}


.recipe-form-table td
{
    background: #151917;
}


.recipe-form-table input,
.recipe-form-table textarea
{
    width: 100%;

    padding: 9px 11px;

    box-sizing: border-box;

    background: #0f1211;

    border: 1px solid #363e3a;
    border-radius: 7px;

    color: #f3f5f4;

    font-family: inherit;
    font-size: 14px;
}


.recipe-form-table input:focus,
.recipe-form-table textarea:focus
{
    border-color: #2f9e44;

    outline: none;

    box-shadow:
        0 0 0 2px rgba(
            47,
            158,
            68,
            0.12
        );
}


.recipe-form-table textarea
{
    min-height: 80px;

    resize: vertical;
}


.ingredient-row,
.direction-row,
.nutrition-row
{
    margin-bottom: 12px;

    padding: 16px;

    background: #111513;

    border: 1px solid #292f2c;
    border-radius: 9px;
}


.ingredient-row label,
.direction-row label
{
    display: block;

    margin: 8px 0 5px;

    color: #aeb8b3;

    font-size: 13px;
    font-weight: 600;
}


.ingredient-row input,
.direction-row textarea,
.nutrition-row input,
#categories-container input
{
    width: 100%;

    padding: 9px 11px;

    box-sizing: border-box;

    background: #0d100f;

    border: 1px solid #363e3a;
    border-radius: 7px;

    color: #f3f5f4;
}


.nutrition-row
{
    display: grid;

    grid-template-columns:
        2fr
        1fr
        1fr
        1fr;

    gap: 10px;
}


#categories-container input
{
    margin-bottom: 8px;
}


/* =========================================================
   MOBILE
   ========================================================= */

@media
(
    max-width: 700px
)
{

    .main-navigation
    {
        min-height: 58px;

        padding: 0 14px;
    }


    .main-navigation-logo
    {
        font-size: 0;
    }


    .main-navigation-logo::before
    {
        margin-right: 0;
    }


    .main-navigation-links
    {
        gap: 2px;
    }


    .main-navigation-link
    {
        min-height: 38px;

        padding: 0 10px;

        font-size: 13px;
    }


    .main-navigation-link:last-child
    {
        margin-left: 2px;
    }


    .recipe-tile-grid
    {
        grid-template-columns: 1fr;

        gap: 14px;
    }


    .recipe-tile
    {
        min-height: 160px;

        padding: 18px;
    }


    .page-content
    {
        width: calc(
            100% - 28px
        );

        padding-top: 16px;
    }


    .page-content > section
    {
        padding: 16px;
    }


    body > main
    {
        width: calc(
            100% - 28px
        );

        padding-top: 18px;
    }


    body > main section
    {
        padding: 14px;
    }


    .recipe-form-table th
    {
        width: 130px;

        white-space: normal;
    }


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

}

/* =========================================================
   FAVORITES
   ========================================================= */

.recipe-detail-actions
{
    display: flex;
    flex-direction: column;

    align-items: stretch;

    gap: 10px;

    min-width: 140px;
}


.recipe-detail-actions form
{
    margin: 0;
}


.favorite-button
{
    display: flex;

    align-items: center;
    justify-content: center;

    width: 100%;
    min-height: 44px;

    padding: 0 16px;

    background: #1c211f;

    border: 1px solid #414946;
    border-radius: 10px;

    color: #cbd1ce;

    font-family: inherit;
    font-size: 13px;
    font-weight: 650;

    cursor: pointer;

    transition:
        background 0.15s ease,
        border-color 0.15s ease,
        color 0.15s ease,
        transform 0.15s ease;
}


.favorite-button:hover
{
    transform: translateY(
        -1px
    );

    background: #2d2025;

    border-color: #6b3949;

    color: #ff87ad;
}


.favorite-icon
{
    margin-right: 7px;

    font-size: 19px;
}


.favorite-button-active
{
    background: #40202c;

    border-color: #80405a;

    color: #ff87ad;
}


.favorite-button-active:hover
{
    background: #4b2533;

    border-color: #a34e6d;

    color: #ffa0bf;
}


@media
(
    max-width: 800px
)
{

    .recipe-detail-actions
    {
        width: 100%;

        flex-direction: row;

        align-items: stretch;
    }


    .recipe-detail-actions form
    {
        flex: 1;
    }


    .recipe-detail-rating
    {
        flex: 1;
    }

}

.favorite-tile-marker
{
    position: absolute;

    top: 15px;
    right: 15px;

    display: none;

    color: #ff87ad;

    font-size: 18px;
}


.favorites-empty-icon
{
    margin-bottom: 10px;

    color: #ff87ad;

    font-size: 42px;
}


.empty-state h2
{
    margin: 0 0 8px;

    color: #f3f5f4;
}


.empty-state .button
{
    margin-top: 15px;
}

/* ========================================
   Pantry
======================================== */

.pantry-page-container,
.pantry-detail-container
{
    width: min(
        1180px,
        calc(100% - 40px)
    );
    margin: 0 auto;
    padding: 38px 0 70px;
}


.pantry-page-header
{
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 30px;
    margin-bottom: 42px;
}


.pantry-page-header h1,
.pantry-detail-heading h1
{
    margin: 5px 0 10px;
    color: #f4f7f5;
    font-size: 38px;
    line-height: 1.1;
}


.pantry-page-header p
{
    max-width: 680px;
    margin: 0;
    color: #929b96;
    line-height: 1.6;
}


.pantry-page-eyebrow
{
    color: #54c56b;
    font-size: 12px;
    font-weight: 750;
    letter-spacing: 0.09em;
    text-transform: uppercase;
}


.pantry-create-button
{
    flex-shrink: 0;
}


.pantry-section
{
    margin-bottom: 42px;
}


.pantry-section-header
{
    display: flex;
    align-items: flex-end;
    justify-content: space-between;
    margin-bottom: 18px;
}


.pantry-section-header h2
{
    margin: 0 0 4px;
    color: #f2f5f3;
    font-size: 22px;
}


.pantry-section-header p
{
    margin: 0;
    color: #7f8984;
    font-size: 13px;
}


.pantry-card-grid
{
    display: grid;
    grid-template-columns: repeat(
        2,
        minmax(
            0,
            1fr
        )
    );
    gap: 18px;
}


.pantry-card
{
    position: relative;
    display: flex;
    flex-direction: column;
    min-height: 220px;
    overflow: hidden;
    background:
        linear-gradient(
            145deg,
            #1a1f1c 0%,
            #141815 100%
        );
    border: 1px solid #2d3531;
    border-top: 3px solid #2f9e44;
    border-radius: 14px;
    color: inherit;
    text-decoration: none;
    transition:
        transform 0.15s ease,
        border-color 0.15s ease,
        box-shadow 0.15s ease;
}


.pantry-card:hover
{
    transform: translateY(-3px);
    border-color: #3c7047;
    box-shadow:
        0 14px 34px rgba(
            0,
            0,
            0,
            0.28
        );
}


.pantry-card-top
{
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 20px 22px 0;
}


.pantry-card-icon
{
    font-size: 28px;
}


.pantry-role-badge
{
    padding: 5px 9px;
    background: #202c24;
    border: 1px solid #32523a;
    border-radius: 999px;
    color: #75d488;
    font-size: 11px;
    font-weight: 700;
    text-transform: uppercase;
}


.pantry-card-content
{
    flex: 1;
    padding: 14px 22px 20px;
}


.pantry-card-content h3
{
    margin: 0 0 18px;
    color: #f4f6f5;
    font-size: 22px;
}


.pantry-card-stats
{
    display: flex;
    gap: 30px;
}


.pantry-card-stat
{
    display: flex;
    flex-direction: column;
}


.pantry-card-stat strong
{
    color: #e7ece9;
    font-size: 20px;
}


.pantry-card-stat span
{
    margin-top: 2px;
    color: #77817c;
    font-size: 12px;
}


.pantry-card-footer
{
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 13px 22px;
    background: #121613;
    border-top: 1px solid #272e2a;
    color: #62c977;
    font-size: 13px;
    font-weight: 650;
}


.pantry-empty-state
{
    padding: 54px 30px;
    background: #171b19;
    border: 1px dashed #343c38;
    border-radius: 14px;
    text-align: center;
}


.pantry-empty-icon
{
    margin-bottom: 10px;
    font-size: 38px;
}


.pantry-empty-state h3
{
    margin: 0 0 7px;
    color: #eef1ef;
}


.pantry-empty-state p
{
    margin: 0;
    color: #818a85;
}


.pantry-expiring-list
{
    overflow: hidden;
    background: #171b19;
    border: 1px solid #2c332f;
    border-radius: 14px;
}


.pantry-expiring-item
{
    display: grid;
    grid-template-columns:
        minmax(
            0,
            1fr
        )
        140px
        110px;
    align-items: center;
    gap: 18px;
    min-height: 70px;
    padding: 0 20px;
    border-bottom: 1px solid #282f2b;
    color: inherit;
    text-decoration: none;
    transition: background 0.12s ease;
}


.pantry-expiring-item:last-child
{
    border-bottom: 0;
}


.pantry-expiring-item:hover
{
    background: #1d231f;
}


.pantry-expiring-name
{
    display: flex;
    flex-direction: column;
}


.pantry-expiring-name strong
{
    color: #e9edeb;
}


.pantry-expiring-name span
{
    margin-top: 3px;
    color: #707a75;
    font-size: 12px;
}


.pantry-expiring-quantity
{
    color: #a2aaa6;
    font-size: 13px;
}


.pantry-expiring-date
{
    color: #e7bd69;
    font-size: 13px;
    font-weight: 700;
    text-align: right;
}


.pantry-expiring-empty
{
    padding: 24px;
    background: #172019;
    border: 1px solid #294631;
    border-radius: 12px;
    color: #86c994;
    font-size: 13px;
}


.pantry-expiring-empty span
{
    margin-right: 7px;
    font-weight: 800;
}


/* ========================================
   Pantry Detail
======================================== */

.pantry-detail-header
{
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 30px;
    margin-bottom: 28px;
}


.pantry-detail-heading
{
    min-width: 0;
}


.pantry-back-link
{
    display: inline-block;
    margin-bottom: 14px;
    color: #7d8982;
    font-size: 13px;
    font-weight: 600;
    text-decoration: none;
}


.pantry-back-link:hover
{
    color: #56c96d;
}


.pantry-detail-summary
{
    display: flex;
    gap: 30px;
    margin-top: 18px;
}


.pantry-detail-summary > div
{
    display: flex;
    flex-direction: column;
}


.pantry-detail-summary strong
{
    color: #edf1ef;
    font-size: 18px;
}


.pantry-detail-summary span
{
    color: #7b8580;
    font-size: 12px;
}



.pantry-detail-layout
{
    display: flex;
    flex-direction: column;
    gap: 22px;

    width: 100%;
}


.pantry-detail-main,
.pantry-detail-sidebar
{
    width: 100%;
    min-width: 0;
}


.pantry-detail-card
{
    overflow: hidden;
    background: #171b19;
    border: 1px solid #2d3430;
    border-radius: 14px;
}


.pantry-detail-card-header
{
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 20px 22px;
    border-bottom: 1px solid #292f2c;
}


.pantry-detail-card-header h2
{
    margin: 0 0 4px;
    color: #f1f4f2;
    font-size: 18px;
}


.pantry-detail-card-header p
{
    margin: 0;
    color: #737d77;
    font-size: 12px;
}


.pantry-item-table
{
    width: 100%;
}


.pantry-item-row
{
    display: grid;
    grid-template-columns:
        minmax(
            180px,
            1fr
        )
        140px
        150px
        150px;
    align-items: center;
    min-height: 64px;
    padding: 0 22px;
    border-bottom: 1px solid #292f2c;
    color: #9ca59f;
    font-size: 13px;
}


.pantry-item-row:last-child
{
    border-bottom: 0;
}


.pantry-item-row:not(.pantry-item-header-row):hover
{
    background: #1c211e;
}


.pantry-item-header-row
{
    min-height: 42px;
    background: #121613;
    color: #646e68;
    font-size: 10px;
    font-weight: 750;
    letter-spacing: 0.07em;
    text-transform: uppercase;
}


.pantry-item-name strong
{
    color: #e7ebe9;
}


.pantry-expiration-value
{
    color: #d6ad61;
}


.pantry-detail-empty
{
    margin: 20px;
}


.pantry-member-list
{
    display: flex;
    flex-direction: column;
}


.pantry-member
{
    display: grid;
    grid-template-columns:
        40px
        minmax(
            0,
            1fr
        )
        auto;
    align-items: center;
    gap: 12px;
    min-height: 68px;
    padding: 10px 18px;
    border-bottom: 1px solid #292f2c;
}


.pantry-member:last-child
{
    border-bottom: 0;
}


.pantry-member-avatar
{
    display: flex;
    align-items: center;
    justify-content: center;
    width: 38px;
    height: 38px;
    background: #26352a;
    border: 1px solid #37503d;
    border-radius: 50%;
    color: #6dd180;
    font-size: 14px;
    font-weight: 800;
}


.pantry-member-content
{
    display: flex;
    flex-direction: column;
    min-width: 0;
}


.pantry-member-content strong
{
    overflow: hidden;
    color: #e9edeb;
    font-size: 13px;
    text-overflow: ellipsis;
    white-space: nowrap;
}


.pantry-member-content span
{
    overflow: hidden;
    margin-top: 2px;
    color: #6f7974;
    font-size: 11px;
    text-overflow: ellipsis;
    white-space: nowrap;
}


.pantry-member-role
{
    padding: 4px 7px;
    background: #202a23;
    border-radius: 999px;
    color: #7fc48c;
    font-size: 10px;
    font-weight: 700;
    text-transform: uppercase;
}


@media
(
    max-width: 800px
)
{

    .pantry-page-container,
    .pantry-detail-container
    {
        width: min(
            100% - 24px,
            1180px
        );
        padding-top: 24px;
    }


    .pantry-page-header,
    .pantry-detail-header
    {
        flex-direction: column;
    }


    .pantry-create-button,
    .pantry-detail-actions,
    .pantry-detail-actions .button
    {
        width: 100%;
    }


    .pantry-detail-actions
    {
        padding-top: 0;
    }


    .pantry-card-grid
    {
        grid-template-columns: 1fr;
    }


    .pantry-expiring-item
    {
        grid-template-columns:
            minmax(
                0,
                1fr
            )
            auto;
    }


    .pantry-expiring-quantity
    {
        display: none;
    }


    .pantry-item-table
    {
        overflow-x: auto;
    }


    .pantry-item-row
    {
        min-width: 700px;
    }

}

/* ========================================
   Create Pantry Modal
======================================== */

body.modal-open
{
    overflow: hidden;
}


.pantry-modal-overlay
{
    position: fixed;
    inset: 0;
    z-index: 2000;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 20px;
    background:
        rgba(
            0,
            0,
            0,
            0.72
        );
    opacity: 0;
    visibility: hidden;
    transition:
        opacity 0.15s ease,
        visibility 0.15s ease;
}


.pantry-modal-overlay.pantry-modal-visible
{
    opacity: 1;
    visibility: visible;
}


.pantry-modal
{
    width: min(
        100%,
        520px
    );
    overflow: hidden;
    background: #171b19;
    border: 1px solid #343c38;
    border-radius: 16px;
    box-shadow:
        0 28px 70px rgba(
            0,
            0,
            0,
            0.5
        );
    transform: translateY(
        8px
    );
    transition:
        transform 0.15s ease;
}


.pantry-modal-visible .pantry-modal
{
    transform: translateY(
        0
    );
}


.pantry-modal-header
{
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 20px;
    padding: 22px 24px;
    border-bottom: 1px solid #2b322e;
}


.pantry-modal-header h2
{
    margin: 5px 0 0;
    color: #f2f5f3;
    font-size: 22px;
}


.pantry-modal-close
{
    display: flex;
    align-items: center;
    justify-content: center;
    width: 36px;
    height: 36px;
    padding: 0;
    background: transparent;
    border: 1px solid transparent;
    border-radius: 8px;
    color: #89928d;
    font-family: inherit;
    font-size: 24px;
    line-height: 1;
    cursor: pointer;
}


.pantry-modal-close:hover
{
    background: #222825;
    border-color: #353e39;
    color: #f1f4f2;
}


.pantry-modal-body
{
    padding: 24px;
}


.pantry-form-group
{
    display: flex;
    flex-direction: column;
    gap: 8px;
}


.pantry-form-group label
{
    color: #e4e9e6;
    font-size: 13px;
    font-weight: 700;
}


.pantry-form-group input
{
    width: 100%;
    box-sizing: border-box;
    min-height: 46px;
    padding: 0 13px;
    background: #101412;
    border: 1px solid #363f3a;
    border-radius: 9px;
    outline: none;
    color: #f0f3f1;
    font-family: inherit;
    font-size: 14px;
    transition:
        border-color 0.15s ease,
        box-shadow 0.15s ease;
}


.pantry-form-group input:focus
{
    border-color: #3fa952;
    box-shadow:
        0 0 0 3px
        rgba(
            47,
            158,
            68,
            0.12
        );
}


.pantry-form-group input::placeholder
{
    color: #59625d;
}


.pantry-form-group small
{
    color: #717b75;
    font-size: 11px;
    line-height: 1.5;
}


.pantry-modal-footer
{
    display: flex;
    align-items: center;
    justify-content: flex-end;
    gap: 10px;
    padding: 17px 24px;
    background: #121613;
    border-top: 1px solid #2b322e;
}


.pantry-modal-cancel
{
    min-height: 42px;
    padding: 0 16px;
    background: transparent;
    border: 1px solid #373f3b;
    border-radius: 8px;
    color: #a4aca8;
    font-family: inherit;
    font-size: 13px;
    font-weight: 650;
    cursor: pointer;
}


.pantry-modal-cancel:hover
{
    background: #202522;
    color: #f0f3f1;
}


@media
(
    max-width: 600px
)
{

    .pantry-modal-overlay
    {
        align-items: flex-end;
        padding: 10px;
    }


    .pantry-modal
    {
        width: 100%;
    }


    .pantry-modal-footer
    {
        flex-direction: column-reverse;
    }


    .pantry-modal-footer .button,
    .pantry-modal-cancel
    {
        width: 100%;
    }

}

/* ========================================
   Pantry Item Controls
======================================== */

.pantry-detail-actions
{
    display: flex;
    align-items: center;
    gap: 10px;
    padding-top: 28px;
}


.pantry-secondary-button
{
    background: #1b211e;
    border: 1px solid #39413d;
    color: #a2aaa6;
}


.pantry-secondary-button:hover:not(:disabled)
{
    background: #242b27;
    border-color: #4b5750;
    color: #edf1ef;
}


.pantry-secondary-button:disabled
{
    background: #181c1a;
    border-color: #2b312e;
    color: #535b57;
    cursor: not-allowed;
    opacity: 0.7;
}


.pantry-item-modal
{
    width: min(
        100%,
        620px
    );
}


.pantry-form-row
{
    display: grid;
    grid-template-columns: repeat(
        2,
        minmax(
            0,
            1fr
        )
    );
    gap: 14px;
    margin-top: 18px;
}


.pantry-form-note
{
    margin-top: 18px;
    padding: 12px 14px;
    background: #131815;
    border: 1px solid #29312c;
    border-radius: 8px;
    color: #737d77;
    font-size: 11px;
    line-height: 1.5;
}


.pantry-form-group input[type="date"]
{
    color-scheme: dark;
}


@media
(
    max-width: 700px
)
{

    .pantry-detail-actions
    {
        width: 100%;
        flex-direction: column;
        padding-top: 0;
    }


    .pantry-detail-actions .button
    {
        width: 100%;
    }


    .pantry-form-row
    {
        grid-template-columns: 1fr;
    }

}
.bottom-nav-add-wrapper
{
    position: relative;
    display: flex;
    align-items: center;
    justify-content: center;
}


.bottom-nav-add-wrapper .nav-add
{
    border: 0;
    font-family: inherit;
    cursor: pointer;
}


.bottom-nav-add-menu
{
    position: absolute;
    bottom: calc(
        100% + 14px
    );
    left: 50%;
    z-index: 1000;

    display: none;
    flex-direction: column;

    width: 180px;

    padding: 8px;

    background: #171b19;
    border: 1px solid #2d3430;
    border-radius: 12px;

    box-shadow:
        0 12px 30px rgba(
            0,
            0,
            0,
            0.35
        );

    transform: translateX(
        -50%
    );
}


.bottom-nav-add-menu-visible
{
    display: flex;
}


.bottom-nav-add-menu-item
{
    display: flex;
    align-items: center;
    gap: 10px;

    width: 100%;

    padding: 11px 12px;

    background: transparent;
    border: 0;
    border-radius: 8px;

    color: #e5e9e7;

    font-family: inherit;
    font-size: 13px;
    font-weight: 650;

    text-align: left;
    text-decoration: none;

    cursor: pointer;
}


.bottom-nav-add-menu-item:hover
{
    background: #202622;
}


.bottom-nav-add-menu-item span
{
    color: #65cb78;
    font-size: 17px;
    font-weight: 700;
}


.bottom-nav-add-menu-item:disabled
{
    cursor: not-allowed;
    opacity: 0.45;
}

.settings-container
{
    width: min(
        900px,
        calc(
            100% - 40px
        )
    );

    margin: 0 auto;
    padding: 42px 0 120px 0;
}


.settings-header
{
    margin-bottom: 28px;
}


.settings-header h1
{
    margin: 6px 0 8px 0;

    font-size: 32px;
}


.settings-header p
{
    margin: 0;

    color: #929b96;
}


.settings-form
{
    display: flex;
    flex-direction: column;
    gap: 18px;
}


.settings-card
{
    padding: 24px;

    background: #171b19;

    border: 1px solid #2d3430;
    border-radius: 14px;
}


.settings-card-header
{
    display: flex;
    align-items: center;
    justify-content: space-between;

    margin-bottom: 22px;
}


.settings-card-header h2
{
    margin: 0 0 5px 0;

    font-size: 18px;
}


.settings-card-header p
{
    margin: 0;

    color: #929b96;

    font-size: 13px;
}


.settings-fields
{
    display: flex;
    flex-direction: column;
    gap: 18px;
}


.settings-fields-grid
{
    display: grid;

    grid-template-columns: repeat(
        2,
        minmax(
            0,
            1fr
        )
    );
}


.settings-field
{
    display: flex;
    flex-direction: column;
    gap: 7px;
}


.settings-field label
{
    color: #c8cfcb;

    font-size: 13px;
    font-weight: 650;
}


.settings-field input[type="text"],
.settings-field input[type="email"],
.settings-field select
{
    width: 100%;
    box-sizing: border-box;

    padding: 11px 12px;

    background: #101311;

    border: 1px solid #343b37;
    border-radius: 8px;

    color: #e5e9e7;

    font-family: inherit;
    font-size: 14px;
}


.settings-field input:focus,
.settings-field select:focus
{
    outline: none;

    border-color: #2f9e44;
}


.settings-field input[type="color"]
{
    width: 100%;
    height: 44px;

    padding: 4px;

    background: #101311;

    border: 1px solid #343b37;
    border-radius: 8px;

    cursor: pointer;
}


.settings-info-row
{
    display: flex;
    align-items: center;
    justify-content: space-between;

    padding: 14px 0;

    border-bottom: 1px solid #292f2b;
}


.settings-info-row span
{
    color: #929b96;
}


.settings-info-row strong
{
    color: #e5e9e7;
}


.settings-card-actions
{
    display: flex;
    flex-wrap: wrap;
    gap: 10px;

    margin-top: 18px;
}


.settings-save-bar
{
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 20px;

    padding: 18px 22px;

    background: #171b19;

    border: 1px solid #2d3430;
    border-radius: 14px;
}


.settings-save-bar span
{
    color: #929b96;

    font-size: 13px;
}


@media (
    max-width: 650px
)
{

    .settings-container
    {
        width: calc(
            100% - 28px
        );

        padding-top: 26px;
    }


    .settings-fields-grid
    {
        grid-template-columns: 1fr;
    }


    .settings-save-bar
    {
        align-items: stretch;
        flex-direction: column;
    }


    .settings-save-bar .button
    {
        width: 100%;
    }

}
.meal-items-form
{
    width: 100%;

    margin: 0;
    padding: 0;
}


.meal-item-list
{
    display: flex;
    flex-direction: column;

    width: 100%;
}


.meal-item-row
{
    display: flex;
    align-items: flex-start;
    gap: 12px;

    width: 100%;

    box-sizing: border-box;

    padding: 14px 0;

    border-bottom: 1px solid #292f2b;

    cursor: pointer;
}


.meal-item-row:last-child
{
    border-bottom: 0;
}


.meal-item-row:hover
{
    background: rgba(
        255,
        255,
        255,
        0.015
    );
}


.meal-item-checkbox
{
    display: flex;
    align-items: flex-start;
    justify-content: center;

    flex: 0 0 auto;

    padding-top: 2px;
}


.meal-item-checkbox-input
{
    width: 20px;
    height: 20px;

    margin: 0;

    accent-color: #2f9e44;

    cursor: pointer;
}


.meal-item-info
{
    flex: 1;

    min-width: 0;
}


.meal-item-info strong
{
    display: block;

    color: #e5e9e7;
}


.meal-item-meta
{
    display: flex;
    flex-wrap: wrap;
    gap: 10px;

    margin-top: 4px;

    color: #929b96;

    font-size: 12px;
}


.meal-item-original
{
    display: block;

    margin-top: 6px;

    color: #707975;

    font-size: 11px;
}


.meal-item-row:has(
    .meal-item-checkbox-input:checked
)
.meal-item-info
{
    opacity: 0.55;
}


.meal-item-row:has(
    .meal-item-checkbox-input:checked
)
.meal-item-info strong
{
    text-decoration: line-through;
}


/*
    Add Recipe Modal
*/

.meal-recipe-modal select
{
    width: 100%;

    box-sizing: border-box;

    padding: 11px 12px;

    background: #101311;

    border: 1px solid #343b37;
    border-radius: 8px;

    color: #e5e9e7;

    font-family: inherit;
    font-size: 14px;
}


.meal-recipe-modal select:focus
{
    outline: none;

    border-color: #2f9e44;
}


/*
    Meal Recipe List
*/

.meal-recipe-list
{
    display: flex;
    flex-direction: column;

    width: 100%;
}


.meal-recipe-row
{
    display: flex;
    align-items: center;

    width: 100%;

    box-sizing: border-box;

    border-bottom: 1px solid #292f2b;
}


.meal-recipe-row:last-child
{
    border-bottom: 0;
}


.meal-recipe-main
{
    display: flex;
    align-items: center;
    gap: 14px;

    flex: 1;

    min-width: 0;

    padding: 15px 0;

    color: #e5e9e7;

    text-decoration: none;
}


.meal-recipe-main:hover
{
    color: #ffffff;
}


.meal-recipe-icon
{
    display: flex;
    align-items: center;
    justify-content: center;

    flex: 0 0 42px;

    width: 42px;
    height: 42px;

    background: rgba(
        47,
        158,
        68,
        0.14
    );

    border-radius: 10px;

    font-size: 20px;
}


.meal-recipe-info
{
    flex: 1;

    min-width: 0;
}


.meal-recipe-info strong
{
    display: block;

    margin-bottom: 5px;
}


.meal-recipe-meta
{
    display: flex;
    flex-wrap: wrap;
    gap: 10px;

    color: #929b96;

    font-size: 12px;
}


.meal-recipe-arrow
{
    margin-left: auto;

    color: #68716c;

    font-size: 24px;
}


.meal-recipe-delete-form
{
    flex: 0 0 auto;

    margin: 0 0 0 16px;
    padding: 0;
}


.meal-delete-button
{
    display: flex;
    align-items: center;
    justify-content: center;

    width: 34px;
    height: 34px;

    padding: 0;

    background: transparent;

    border: 1px solid #493131;
    border-radius: 8px;

    color: #c97070;

    font-family: inherit;
    font-size: 20px;
    line-height: 1;

    cursor: pointer;

    transition:
        background 0.15s ease,
        border-color 0.15s ease,
        color 0.15s ease;
}


.meal-delete-button:hover
{
    background: #351c1c;

    border-color: #8f3d3d;

    color: #ff8787;
}


/*
    Meal Detail Header
*/

.meal-detail-header
{
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 24px;

    width: 100%;

    box-sizing: border-box;
}


.meal-detail-header > div:first-child
{
    flex: 1;

    min-width: 0;
}


.meal-detail-actions
{
    display: flex;
    align-items: flex-start;
    justify-content: flex-end;
    gap: 10px;

    flex: 0 0 auto;

    margin-left: auto;
}


.meal-detail-actions form
{
    display: flex;

    margin: 0;
    padding: 0;
}


/*
    I Ate This
*/

.meal-complete-button
{
    flex: 0 0 auto;

    margin: 0;

    background: #2f9e44;

    border: 1px solid #2f9e44;

    color: #ffffff;

    white-space: nowrap;

    cursor: pointer;
}


.meal-complete-button:hover
{
    background: #37b24d;

    border-color: #37b24d;

    color: #ffffff;
}


/*
    Delete Meal
*/

.meal-danger-button
{
    flex: 0 0 auto;

    margin: 0;

    background: transparent;

    border: 1px solid #7c3535;

    color: #e47777;

    white-space: nowrap;

    cursor: pointer;
}


.meal-danger-button:hover
{
    background: #351c1c;

    border-color: #a74747;

    color: #ff8787;
}


/*
    Mobile
*/

@media (
    max-width: 750px
)
{

    .meal-detail-header
    {
        flex-direction: column;
        align-items: stretch;
        gap: 18px;

        padding-right: 0;
    }


    .meal-detail-actions
    {
        position: static;

        display: flex;
        justify-content: flex-end;
        gap: 10px;

        width: 100%;

        margin: 0;
        padding: 0;
    }


    .meal-detail-actions form
    {
        flex: 0 0 auto;
    }


    .meal-detail-actions .button
    {
        width: auto;
    }


    .meal-item-row
    {
        gap: 10px;
    }


    .meal-item-checkbox-input
    {
        width: 22px;
        height: 22px;
    }

}

.pantry-item-edit-row
{
    display: flex;
    align-items: center;
    gap: 10px;

    width: 100%;

    box-sizing: border-box;

    padding: 10px 0;

    border-bottom: 1px solid #292f2b;
}


.pantry-item-edit-row:last-child
{
    border-bottom: 0;
}


.pantry-item-edit-form
{
    display: grid;
    grid-template-columns:
        minmax(180px, 2fr)
        minmax(180px, 1.2fr)
        minmax(140px, 1fr)
        minmax(140px, 1fr)
        auto;

    align-items: center;
    gap: 10px;

    flex: 1;

    min-width: 0;

    margin: 0;
    padding: 0;
}


.pantry-item-edit-cell
{
    min-width: 0;
}


.pantry-item-quantity-group
{
    display: grid;
    grid-template-columns: minmax(70px, 0.8fr) minmax(90px, 1fr);
    gap: 8px;
}


.pantry-item-edit-cell input
{
    width: 100%;

    box-sizing: border-box;

    padding: 9px 10px;

    background: #101311;

    border: 1px solid #343b37;
    border-radius: 7px;

    color: #e5e9e7;

    font-family: inherit;
    font-size: 13px;
}


.pantry-item-edit-cell input:focus
{
    outline: none;

    border-color: #2f9e44;
}


.pantry-item-save-button
{
    white-space: nowrap;
}


.pantry-item-edit-header-row
{
    min-height: 42px;
    padding: 0;
    background: #121613;
    color: #646e68;
    font-size: 10px;
    font-weight: 750;
    letter-spacing: 0.07em;
    text-transform: uppercase;
}


.pantry-item-edit-header-grid
{
    min-height: 42px;
}


.pantry-item-header-delete-spacer
{
    flex: 0 0 32px;
    width: 32px;
}


.pantry-item-delete-form
{
    flex: 0 0 auto;

    margin: 0;
    padding: 0;
}


.pantry-item-delete-button
{
    display: flex;
    align-items: center;
    justify-content: center;

    width: 32px;
    height: 32px;

    padding: 0;

    background: transparent;

    border: 1px solid #493131;
    border-radius: 7px;

    color: #c97070;

    font-family: inherit;
    font-size: 19px;
    line-height: 1;

    cursor: pointer;
}


.pantry-item-delete-button:hover
{
    background: #351c1c;

    border-color: #8f3d3d;

    color: #ff8787;
}


@media (
    max-width: 900px
)
{

    .pantry-item-edit-form
    {
        grid-template-columns:
            minmax(160px, 2fr)
            minmax(160px, 1.2fr)
            minmax(135px, 1fr)
            minmax(135px, 1fr)
            auto;
    }

}


@media (
    max-width: 650px
)
{

    .pantry-item-edit-row
    {
        align-items: flex-start;
    }


    .pantry-item-edit-form
    {
        grid-template-columns: 1fr 1fr;
    }


    .pantry-item-name-cell
    {
        grid-column: 1 / -1;
    }


    .pantry-item-quantity-cell
    {
        grid-column: 1 / -1;
    }


    .pantry-item-quantity-group
    {
        grid-template-columns: 1fr 1fr;
    }


    .pantry-item-edit-actions
    {
        grid-column: 1 / -1;
    }


    .pantry-item-save-button
    {
        width: 100%;
    }

}

/* ========================================
   Meal Completion / Pantry Removal
======================================== */

.meal-complete-review-container
{
    width: min(
        1100px,
        100%
    );

    margin: 0 auto;
}


.meal-complete-review-header
{
    margin-bottom: 28px;
}


.meal-complete-review-header h1
{
    margin: 6px 0 8px;

    color: #f3f5f4;

    font-size: 32px;
}


.meal-complete-review-header p
{
    margin: 0;

    color: #929b96;
}


.meal-complete-review-form
{
    display: flex;
    flex-direction: column;
    gap: 20px;
}


.meal-complete-review-card
{
    overflow: hidden;

    background: #171b19;

    border: 1px solid #2d3430;
    border-radius: 14px;
}


.meal-removal-header,
.meal-removal-row
{
    display: grid;

    grid-template-columns:
        70px
        minmax(200px, 1.6fr)
        minmax(130px, 0.8fr)
        minmax(130px, 0.8fr)
        minmax(110px, 0.6fr);

    align-items: center;

    gap: 14px;

    padding: 14px 18px;
}


.meal-removal-header
{
    background: #121613;

    color: #68716c;

    font-size: 10px;
    font-weight: 750;

    letter-spacing: 0.07em;

    text-transform: uppercase;
}


.meal-removal-row
{
    border-top: 1px solid #292f2b;
}


.meal-removal-row:hover
{
    background: #1b201d;
}


.meal-removal-checkbox
{
    display: flex;
    justify-content: center;
}


.meal-removal-checkbox input
{
    width: 20px;
    height: 20px;

    accent-color: #2f9e44;

    cursor: pointer;
}


.meal-removal-item
{
    display: flex;
    flex-direction: column;

    min-width: 0;
}


.meal-removal-item strong
{
    color: #e8ecea;
}


.meal-removal-item span
{
    margin-top: 3px;

    color: #929b96;

    font-size: 12px;
}


.meal-removal-item small
{
    margin-top: 5px;

    color: #66706a;

    font-size: 11px;
}


.meal-removal-pantry
{
    display: flex;
    align-items: baseline;
    gap: 5px;

    color: #aeb6b2;
}


.meal-removal-pantry strong
{
    color: #e4e9e6;
}


.meal-removal-input
{
    width: 100%;

    box-sizing: border-box;

    padding: 9px 10px;

    background: #101311;

    border: 1px solid #343b37;
    border-radius: 7px;

    color: #e5e9e7;

    font-family: inherit;
    font-size: 13px;
}


.meal-removal-input:focus
{
    outline: none;

    border-color: #2f9e44;
}


.meal-removal-warning
{
    display: block;

    margin-top: 5px;

    color: #e7bd69;

    font-size: 10px;
}


.meal-removal-not-found
{
    color: #8b5555;
}


.meal-complete-review-actions
{
    display: flex;
    justify-content: flex-end;

    gap: 10px;
}


@media (
    max-width: 800px
)
{

    .meal-complete-review-card
    {
        overflow-x: auto;
    }


    .meal-removal-header,
    .meal-removal-row
    {
        min-width: 760px;
    }


    .meal-complete-review-actions
    {
        flex-direction: column-reverse;
    }


    .meal-complete-review-actions .button
    {
        width: 100%;
    }

}

..main-navigation-icon-link
{
    display: inline-flex;
    align-items: center;
    justify-content: center;

    width: 38px;
    height: 38px;

    padding: 0;

    font-size: 20px;
    line-height: 1;

    text-decoration: none;

    border-radius: 8px;

    transition:
        background 0.15s ease,
        transform 0.15s ease;
}


.main-navigation-icon-link:hover
{
    background: rgba(
        47,
        158,
        68,
        0.12
    );

    transform: translateY(-1px);
}

/* ========================================
   Dinner Wheel
======================================== */

.dinner-wheel-container
{
    width: min(
        1200px,
        calc(100% - 40px)
    );

    margin: 0 auto;

    padding: 40px 0 100px;
}


.dinner-wheel-header
{
    margin-bottom: 30px;
}


.dinner-wheel-header h1
{
    margin-top: 8px;
    margin-bottom: 8px;
}


.dinner-wheel-header p
{
    margin: 0;

    color: #8d9691;
}


.dinner-wheel-layout
{
    display: grid;

    grid-template-columns:
        minmax(360px, 1fr)
        minmax(320px, 0.75fr);

    gap: 24px;

    align-items: stretch;

    margin-bottom: 24px;
}


.dinner-wheel-card
{
    position: relative;

    display: flex;
    flex-direction: column;
    align-items: center;

    padding: 35px;

    background: #101411;

    border: 1px solid #2b322e;
    border-radius: 18px;
}


.dinner-wheel
{
    position: relative;

    width: min(
        460px,
        80vw
    );

    aspect-ratio: 1 / 1;

    border: 8px solid #252c28;
    border-radius: 50%;

    overflow: hidden;

    box-shadow:
        0 0 0 3px #0b0e0c,
        0 20px 45px rgba(0, 0, 0, 0.35);

    transition:
        transform 4.2s
        cubic-bezier(
            0.12,
            0.68,
            0.16,
            1
        );
}


.dinner-wheel-center
{
    position: absolute;

    z-index: 10;

    top: 50%;
    left: 50%;

    display: flex;
    align-items: center;
    justify-content: center;

    width: 74px;
    height: 74px;

    transform: translate(
        -50%,
        -50%
    );

    background: #111512;

    border: 6px solid #2f9e44;
    border-radius: 50%;

    font-size: 30px;

    box-shadow:
        0 5px 20px rgba(0, 0, 0, 0.4);
}


.dinner-wheel-pointer
{
    position: absolute;

    z-index: 20;

    top: 13px;
    left: 50%;

    transform: translateX(
        -50%
    );

    color: #37b24d;

    font-size: 38px;

    line-height: 1;

    text-shadow:
        0 3px 8px rgba(0, 0, 0, 0.5);
}


.dinner-wheel-label
{
    position: absolute;

    z-index: 2;

    top: 50%;
    left: 50%;

    width: 50%;
    height: 22px;

    transform-origin:
        left center;

    pointer-events: none;
}


.dinner-wheel-label span
{
    position: absolute;

    right: 10px;

    display: block;

    width: 130px;

    overflow: hidden;

    color: #f0f4f2;

    font-size: 10px;
    font-weight: 700;

    text-align: center;
    text-overflow: ellipsis;

    white-space: nowrap;
}


.dinner-wheel-spin-button
{
    margin-top: 28px;

    min-width: 210px;
}


.dinner-wheel-spin-button:disabled
{
    cursor: not-allowed;

    opacity: 0.55;
}


.dinner-wheel-result-card
{
    display: flex;
    flex-direction: column;

    padding: 32px;

    background: #101411;

    border: 1px solid #2b322e;
    border-radius: 18px;
}


.dinner-wheel-result-placeholder,
.dinner-wheel-result
{
    flex: 1;

    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;

    text-align: center;
}


.dinner-wheel-result-placeholder
{
    color: #8d9691;
}


.dinner-wheel-result-placeholder strong
{
    margin-top: 10px;

    color: #f0f4f2;

    font-size: 20px;
}


.dinner-wheel-result-placeholder p
{
    margin-top: 7px;
}


.dinner-wheel-result-icon
{
    margin-bottom: 12px;

    font-size: 48px;
}


.dinner-wheel-result h2
{
    margin: 0;

    color: #f0f4f2;

    font-size: 30px;
}


.dinner-wheel-result-meta
{
    margin-top: 12px;

    color: #8d9691;

    font-size: 13px;
}


.dinner-wheel-result-actions
{
    display: flex;

    gap: 10px;

    margin-top: 25px;
}


.dinner-wheel-result-visible
{
    border-color: rgba(
        47,
        158,
        68,
        0.7
    );
}


.dinner-wheel-recipe-card
{
    margin-top: 24px;
}


.dinner-wheel-recipe-list
{
    display: flex;
    flex-direction: column;
}


.dinner-wheel-recipe-row
{
    display: flex;
    align-items: center;

    gap: 14px;

    padding: 14px 4px;

    color: inherit;

    text-decoration: none;

    border-bottom:
        1px solid
        rgba(
            255,
            255,
            255,
            0.07
        );
}


.dinner-wheel-recipe-row:last-child
{
    border-bottom: none;
}


.dinner-wheel-recipe-row:hover
{
    background:
        rgba(
            47,
            158,
            68,
            0.05
        );
}


.dinner-wheel-recipe-icon
{
    font-size: 22px;
}


.dinner-wheel-recipe-info
{
    flex: 1;

    min-width: 0;
}


.dinner-wheel-recipe-info strong
{
    color: #f0f4f2;
}


.dinner-wheel-recipe-meta
{
    display: flex;
    flex-wrap: wrap;

    gap: 10px;

    margin-top: 4px;

    color: #8d9691;

    font-size: 12px;
}


.dinner-wheel-recipe-arrow
{
    color: #37b24d;

    font-size: 24px;
}


@media (
    max-width: 850px
)
{

    .dinner-wheel-layout
    {
        grid-template-columns: 1fr;
    }


    .dinner-wheel-result-card
    {
        min-height: 300px;
    }

}


@media (
    max-width: 550px
)
{

    .dinner-wheel-container
    {
        width: min(
            100% - 20px,
            1200px
        );

        padding-top: 25px;
    }


    .dinner-wheel-card
    {
        padding:
            35px
            12px
            22px;
    }


    .dinner-wheel
    {
        width: min(
            340px,
            82vw
        );
    }


    .dinner-wheel-label span
    {
        width: 90px;

        font-size: 8px;
    }


    .dinner-wheel-result-actions
    {
        width: 100%;

        flex-direction: column;
    }

}

.meal-db-page {
    max-width: 1200px;
    margin: 0 auto;
    padding: 24px;
}

.meal-db-header {
    margin-bottom: 24px;
}

.meal-db-header h1 {
    margin-bottom: 8px;
}

.meal-db-filter {
    display: flex;
    flex-direction: column;
    gap: 8px;
    max-width: 400px;
    margin-bottom: 32px;
}

.meal-db-filter label {
    font-weight: 600;
}

.meal-db-filter select {
    width: 100%;
    padding: 12px;
    color: inherit;
    background-color: inherit;
    border: 1px solid #777;
    border-radius: 6px;
    font: inherit;
}

.meal-db-results-header {
    display: flex;
    align-items: baseline;
    justify-content: space-between;
    gap: 16px;
    margin-bottom: 16px;
}

.meal-grid {
    display: grid;
    grid-template-columns: repeat(
        auto-fill,
        minmax(220px, 1fr)
    );
    gap: 20px;
}

.meal-card {
    overflow: hidden;
    color: inherit;
    background-color: rgba(128, 128, 128, 0.12);
    border: 1px solid rgba(128, 128, 128, 0.35);
    border-radius: 10px;
}

.meal-card img {
    display: block;
    width: 100%;
    aspect-ratio: 1 / 1;
    object-fit: cover;
}

.meal-card-content {
    padding: 16px;
}

.meal-card-content h3 {
    margin: 0 0 12px;
}

.meal-card-footer {
    opacity: 0.7;
    font-size: 0.85rem;
}

.meal-db-empty,
.meal-db-error {
    padding: 20px;
    border-radius: 8px;
}

.meal-db-empty {
    background-color: rgba(128, 128, 128, 0.12);
}

.meal-db-error {
    color: #8b0000;
    background-color: #ffdede;
}

.meal-recipe-search-results {
    display: flex;
    flex-direction: column;
    max-height: 280px;
    margin-top: 8px;
    overflow-y: auto;
    border-radius: 8px;
}

.meal-recipe-search-result {
    display: flex;
    flex-direction: column;
    gap: 3px;
    width: 100%;
    padding: 12px;
    color: inherit;
    text-align: left;
    background: rgba(128, 128, 128, 0.12);
    border: 0;
    border-bottom: 1px solid rgba(128, 128, 128, 0.25);
    cursor: pointer;
}

.meal-recipe-search-result:hover,
.meal-recipe-search-result:focus {
    background: rgba(128, 128, 128, 0.25);
}

.meal-recipe-search-result span {
    opacity: 0.65;
    font-size: 12px;
}

.meal-recipe-search-empty {
    padding: 14px;
    opacity: 0.7;
}

.meal-recipe-picker-divider
{
    display: flex;
    align-items: center;
    gap: 10px;
    margin: 14px 0;
    color: rgba(243, 245, 244, 0.58);
    font-size: 12px;
    text-transform: uppercase;
    letter-spacing: 0.08em;
}

.meal-recipe-picker-divider::before,
.meal-recipe-picker-divider::after
{
    content: "";
    flex: 1 1 auto;
    height: 1px;
    background: rgba(128, 128, 128, 0.25);
}


/*
    Recipe Detail Lists
*/

.ingredient-list,
.direction-list
{
    display: flex;
    flex-direction: column;
    gap: 0;
}

.ingredient-item
{
    display: flex;
    align-items: center;
    gap: 12px;
    width: 100%;
    padding: 12px 0;
    border-bottom: 1px solid rgba(128, 128, 128, 0.22);
}

.ingredient-check
{
    display: flex;
    flex: 0 0 20px;
    align-items: center;
    justify-content: center;
}

.ingredient-check input
{
    width: 18px;
    height: 18px;
    margin: 0;
}

.ingredient-content
{
    display: flex;
    flex: 1 1 auto;
    flex-direction: column;
    gap: 4px;
    min-width: 0;
    line-height: 1.4;
}

.direction-item
{
    display: grid;
    grid-template-columns: 36px minmax(0, 1fr);
    gap: 14px;
    align-items: start;
    padding: 14px 0;
    border-bottom: 1px solid rgba(128, 128, 128, 0.22);
}

.direction-number
{
    display: flex;
    align-items: center;
    justify-content: center;
    width: 32px;
    height: 32px;
    border-radius: 50%;
    font-weight: 700;
    background: rgba(128, 128, 128, 0.18);
}

.direction-item p
{
    margin: 4px 0 0;
    line-height: 1.55;
}


/*
    TheMealDB
*/

.meal-card-link
{
    display: block;
    color: inherit;
    text-decoration: none;
    transition: transform 0.15s ease,
        box-shadow 0.15s ease;
}

.meal-card-link:hover,
.meal-card-link:focus-visible
{
    transform: translateY(-3px);
    box-shadow: 0 10px 24px rgba(0, 0, 0, 0.22);
}

.meal-card-footer
{
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
}

.meal-db-detail-page .recipe-detail-header
{
    position: relative;
    padding-right: 220px;
}

.meal-db-detail-page .recipe-detail-actions
{
    position: absolute;
    top: 0;
    right: 0;
    z-index: 2;
}

.meal-db-hero
{
    display: grid;
    grid-template-columns: minmax(260px, 420px) 1fr;
    gap: 28px;
    margin: 24px 0;
    align-items: center;
}

.meal-db-hero-image
{
    display: block;
    width: 100%;
    border-radius: 14px;
    object-fit: cover;
    aspect-ratio: 1 / 1;
}

.meal-db-links
{
    display: flex;
    flex-wrap: wrap;
    gap: 10px;
    margin-top: 20px;
}

.meal-db-ingredient-list,
.meal-db-direction-list
{
    display: flex;
    flex-direction: column;
    gap: 0;
}

.meal-db-ingredient-row
{
    display: flex;
    align-items: center;
    gap: 12px;
    width: 100%;
    padding: 12px 0;
    border-bottom: 1px solid rgba(128, 128, 128, 0.22);
    cursor: pointer;
    box-sizing: border-box;
}

.meal-db-ingredient-check
{
    display: flex;
    flex: 0 0 20px;
    align-items: center;
    justify-content: center;
}

.meal-db-ingredient-check input
{
    width: 18px;
    height: 18px;
    margin: 0;
}

.meal-db-ingredient-text
{
    display: block;
    flex: 1 1 auto;
    min-width: 0;
    line-height: 1.4;
}

.meal-db-direction-row
{
    display: grid;
    grid-template-columns: 36px minmax(0, 1fr);
    gap: 14px;
    align-items: start;
    padding: 14px 0;
    border-bottom: 1px solid rgba(128, 128, 128, 0.22);
}

.meal-db-direction-number
{
    display: flex;
    align-items: center;
    justify-content: center;
    width: 32px;
    height: 32px;
    border-radius: 50%;
    font-weight: 700;
    background: rgba(128, 128, 128, 0.18);
}

.meal-db-direction-row p
{
    margin: 4px 0 0;
    line-height: 1.55;
}

.meal-db-video-card
{
    margin-top: 24px;
}

.meal-db-video-wrapper
{
    position: relative;
    width: 100%;
    padding-top: 56.25%;
    overflow: hidden;
    border-radius: 12px;
}

.meal-db-video-wrapper iframe
{
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    border: 0;
}

@media (max-width: 760px)
{
    .meal-db-detail-page .recipe-detail-header
    {
        padding-right: 0;
    }

    .meal-db-detail-page .recipe-detail-actions
    {
        position: static;
        margin-top: 16px;
    }

    .meal-db-hero
    {
        grid-template-columns: 1fr;
    }
}
/* Forkestra Stats */

.stats-page
{
    width: min(1180px, calc(100% - 32px));
    margin: 0 auto;
    padding: 34px 0 110px;
}

.stats-hero
{
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 30px;
    margin-bottom: 38px;
    padding: 30px;
    background: linear-gradient(135deg, #202823, #171c19);
    border: 1px solid #343d38;
    border-radius: 20px;
}

.stats-hero h1
{
    margin: 8px 0 7px;
    font-size: clamp(2rem, 5vw, 3.25rem);
}

.stats-hero p
{
    max-width: 620px;
    margin: 0;
    color: #aab3ae;
    line-height: 1.6;
}

.stats-hero-icon
{
    display: grid;
    flex: 0 0 104px;
    width: 104px;
    height: 104px;
    place-items: center;
    background: rgba(47, 158, 68, 0.14);
    border: 1px solid rgba(140, 233, 154, 0.22);
    border-radius: 24px;
    font-size: 48px;
}

.stats-section + .stats-section
{
    margin-top: 38px;
}

.stats-card-grid
{
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 16px;
}

.stats-card
{
    display: flex;
    min-height: 180px;
    flex-direction: column;
    align-items: flex-start;
    justify-content: flex-end;
    padding: 22px;
    background: #191e1b;
    border: 1px solid #303733;
    border-radius: 16px;
}

.stats-card-primary
{
    background: linear-gradient(145deg, #25462e, #1a281e);
    border-color: #3d724a;
}

.stats-card-icon
{
    margin-bottom: auto;
    font-size: 27px;
}

.stats-card strong
{
    margin-top: 16px;
    color: #f3f6f4;
    font-size: 38px;
    line-height: 1;
}

.stats-card > span:not(.stats-card-icon)
{
    margin-top: 8px;
    color: #dfe5e1;
    font-weight: 700;
}

.stats-card small
{
    margin-top: 5px;
    color: #8f9994;
}

.nutrition-stats-card
{
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    overflow: hidden;
    background: #191e1b;
    border: 1px solid #303733;
    border-radius: 16px;
}

.nutrition-stat
{
    display: flex;
    align-items: center;
    gap: 14px;
    min-height: 120px;
    padding: 22px;
    border-left: 1px solid #303733;
}

.nutrition-stat:first-child
{
    border-left: 0;
}

.nutrition-stat > span
{
    font-size: 28px;
}

.nutrition-stat strong,
.nutrition-stat small
{
    display: block;
}

.nutrition-stat strong
{
    color: #f3f6f4;
    font-size: 24px;
}

.nutrition-stat small
{
    margin-top: 4px;
    color: #8f9994;
}

.nutrition-stat-calories strong
{
    color: #8ce99a;
}

.stats-disclaimer
{
    margin: 12px 2px 0;
    color: #7f8984;
    font-size: 12px;
    line-height: 1.5;
}

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

    .nutrition-stats-card
    {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }

    .nutrition-stat:nth-child(3)
    {
        border-left: 0;
        border-top: 1px solid #303733;
    }

    .nutrition-stat:nth-child(4)
    {
        border-top: 1px solid #303733;
    }
}

@media (max-width: 540px)
{
    .stats-page
    {
        width: min(100% - 20px, 1180px);
        padding-top: 18px;
    }

    .stats-hero
    {
        padding: 22px;
    }

    .stats-hero-icon
    {
        display: none;
    }

    .stats-card-grid
    {
        grid-template-columns: 1fr;
    }

    .nutrition-stats-card
    {
        grid-template-columns: 1fr;
    }

    .nutrition-stat,
    .nutrition-stat:first-child,
    .nutrition-stat:nth-child(3),
    .nutrition-stat:nth-child(4)
    {
        border-top: 1px solid #303733;
        border-left: 0;
    }

    .nutrition-stat:first-child
    {
        border-top: 0;
    }
}
/* Upcoming meal dismissal */

.upcoming-meal-card
{
    position: relative;
    min-width: 0;
}

.upcoming-meal-card-link
{
    display: flex;
    height: 100%;
    color: inherit;
    text-decoration: none;
}

.upcoming-meal-hide-form
{
    position: absolute;
    top: 10px;
    right: 10px;
    z-index: 3;
    margin: 0;
}

.upcoming-meal-hide-button
{
    display: grid;
    width: 32px;
    height: 32px;
    padding: 0;
    place-items: center;
    color: #c8cfcb;
    background: rgba(16, 19, 17, 0.88);
    border: 1px solid #3b443f;
    border-radius: 50%;
    cursor: pointer;
    font-size: 20px;
    line-height: 1;
}

.upcoming-meal-hide-button:hover,
.upcoming-meal-hide-button:focus-visible
{
    color: #ffffff;
    background: #7f1d1d;
    border-color: #ef4444;
}
/* Meal completion information */

.meal-completion-info-box
{
    padding: 16px 18px;
    color: #f8e5b3;
    background: rgba(146, 92, 18, 0.18);
    border: 1px solid #8d651f;
    border-radius: 12px;
}

.meal-completion-info-box strong,
.meal-completion-info-box p,
.meal-completion-info-box small
{
    display: block;
}

.meal-completion-info-box p
{
    margin: 6px 0;
}

.meal-completion-info-box small
{
    color: #c9b985;
}

.meal-removal-error
{
    display: block;
    margin-top: 6px;
    color: #ff8787;
    font-size: 11px;
    line-height: 1.4;
}

.meal-completion-error-box
{
    color: #ffd2d2;
    background: rgba(127, 29, 29, 0.2);
    border-color: #9f3a3a;
}

.meal-completion-error-box small
{
    color: #d9aaaa;
}

.admin-navigation-active
{
    color: #8ce99a;
    border-color: #2f9e44;
}

.traffic-page
{
    width: calc(100% - 28px);
    max-width: 1400px;
    margin: 0 auto;
    padding: 28px 0 120px;
}

.traffic-controls
{
    display: grid;
    grid-template-columns: minmax(260px, 1fr) auto auto;
    gap: 12px;
    margin: 24px 0 18px;
}

.traffic-controls input,
.traffic-controls select
{
    min-height: 44px;
    padding: 10px 12px;
    background: #101312;
    color: #f3f5f4;
    border: 1px solid #3a413e;
    border-radius: 8px;
    font-size: 14px;
}

.traffic-controls input:focus,
.traffic-controls select:focus
{
    border-color: #2f9e44;
    outline: none;
}

.traffic-table-container
{
    width: 100%;
    overflow-x: auto;
    background: #181c1a;
    width: 100%;
    overflow-x: auto;
    background: #181c1a;
    border: 1px solid #303633;
    border-radius: 12px;
}

.traffic-table td
{
    padding: 13px 16px;
    overflow: hidden;
    border-bottom: 1px solid #292f2c;
    color: #c4cbc7;
    font-size: 13px;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.traffic-table th:nth-child(1),
.traffic-table td:nth-child(1)
{
    width: 155px;
}

.traffic-table th:nth-child(2),
.traffic-table td:nth-child(2)
{
    width: 215px;
}

.traffic-table th:nth-child(3),
.traffic-table td:nth-child(3)
{
    width: 80px;
}

.traffic-table th:nth-child(4),
.traffic-table td:nth-child(4)
{
    width: 220px;
}

.traffic-table th:nth-child(5),
.traffic-table td:nth-child(5)
{
    width: 75px;
}

.traffic-table th:nth-child(6),
.traffic-table td:nth-child(6)
{
    width: 90px;
}

.traffic-table th:nth-child(7),
.traffic-table td:nth-child(7)
{
    width: 65px;
}

.traffic-timestamp
{
    display: flex;
    flex-direction: column;
    gap: 3px;
}

.traffic-date
{
    color: #f1f3f2;
    font-weight: 600;
}

.traffic-time
{
    color: #8f9994;
    font-size: 12px;
}

.traffic-ip
{
    font-family: "SFMono-Regular", Consolas, monospace;
}

.traffic-path
{
    color: #8ce99a !important;
    font-family: "SFMono-Regular", Consolas, monospace;
}

.traffic-table tbody tr:hover
{
    background: #202622;
}

.traffic-method
{
    color: #74c0fc;
    font-family: "SFMono-Regular", Consolas, monospace;
    font-weight: 700;
}

.traffic-status
{
    display: inline-flex;
    min-width: 42px;
    justify-content: center;
    padding: 4px 7px;
    border-radius: 6px;
    font-weight: 700;
}

.traffic-status-2
{
    background: #193321;
    color: #8ce99a;
}

.traffic-status-3
{
    background: #182e3d;
    color: #74c0fc;
}

.traffic-status-4
{
    background: #3a2c16;
    color: #ffd43b;
}

.traffic-status-5
{
    background: #3b1f23;
    color: #ff8787;
}

.traffic-warning
{
    color: #ffd43b;
}

.traffic-empty
{
    padding: 35px !important;
    color: #8f9994 !important;
    text-align: center;
}

@media (max-width: 760px)
{
    .admin-navigation
    {
        align-items: flex-start;
        gap: 14px;
    }

    .admin-navigation .account-area
    {
        gap: 8px;
    }

    .admin-navigation .button
    {
        min-height: 38px;
        padding: 0 12px;
    }

    .traffic-controls
    {
        grid-template-columns: 1fr;
    }
}