*{
    box-sizing:border-box;
}


body{
    margin:0;
    padding:0;

    font-family:
    "Microsoft YaHei",
    "PingFang SC",
    Arial,
    sans-serif;

    background:#f5f2ec;

    color:#333;

    line-height:1.6;
}


/* =========================
   顶部
========================= */

.top-header{

    background:
    linear-gradient(
        135deg,
        #394538,
        #53634c
    );

    color:white;

    padding:22px 24px;

    display:flex;

    align-items:center;

    justify-content:space-between;

    box-shadow:
    0 4px 18px
    rgba(0,0,0,0.12);

}


.brand{

    display:flex;

    align-items:center;

    gap:12px;

}


.brand-icon{

    width:48px;

    height:48px;

    border-radius:14px;

    background:
    rgba(255,255,255,0.14);

    display:flex;

    align-items:center;

    justify-content:center;

    font-size:25px;

}


.brand h1{

    margin:0;

    font-size:24px;

    letter-spacing:1px;

}


.brand p{

    margin:2px 0 0;

    font-size:13px;

    opacity:.8;

}


.logout-btn{

    background:
    rgba(255,255,255,.12);

    border:
    1px solid
    rgba(255,255,255,.35);

    color:white;

    border-radius:20px;

    padding:8px 17px;

    cursor:pointer;

}


/* =========================
   主体
========================= */

main{

    width:94%;

    max-width:1000px;

    margin:25px auto 60px;

}


/* =========================
   用户
========================= */

.user-card{

    background:white;

    border-radius:18px;

    padding:18px 20px;

    display:flex;

    align-items:center;

    gap:14px;

    margin-bottom:20px;

    box-shadow:
    0 5px 18px
    rgba(0,0,0,.06);

    border:
    1px solid #ebe5db;

}


.user-avatar{

    width:50px;

    height:50px;

    border-radius:50%;

    background:#eee9df;

    display:flex;

    align-items:center;

    justify-content:center;

    font-size:24px;

}


.user-title{

    font-weight:bold;

    color:#3f4a3c;

}


.user-name{

    font-size:13px;

    color:#999;

}


/* =========================
   新增菜品
========================= */

.add-section{

    margin-bottom:30px;

}


.add-toggle{

    width:100%;

    border:none;

    background:white;

    color:#3f4a3c;

    border-radius:15px;

    padding:15px 18px;

    display:flex;

    justify-content:space-between;

    align-items:center;

    font-size:16px;

    font-weight:bold;

    cursor:pointer;

    box-shadow:
    0 4px 15px
    rgba(0,0,0,.05);

}


.add-toggle:hover{

    transform:none;

    opacity:1;

}


.add-panel{

    background:white;

    margin-top:10px;

    padding:22px;

    border-radius:16px;

    box-shadow:
    0 4px 18px
    rgba(0,0,0,.06);

}


.section-title{

    display:flex;

    gap:8px;

    align-items:center;

    font-size:18px;

    font-weight:bold;

    color:#3f4a3c;

    margin-bottom:12px;

}


.upload-box{

    background:#faf8f4;

    border-radius:12px;

    padding:13px;

    margin:8px 0;

}


.upload-title{

    font-size:14px;

    color:#666;

    margin-bottom:5px;

}


.form-row{

    display:grid;

    grid-template-columns:
    1fr 1fr;

    gap:10px;

}


input,
textarea{

    width:100%;

    border:
    1px solid #ded8cf;

    border-radius:10px;

    padding:12px 14px;

    margin:6px 0;

    background:white;

    color:#333;

    font-size:15px;

    font-family:inherit;

    outline:none;

}


input:focus,
textarea:focus{

    border-color:#71806a;

    box-shadow:
    0 0 0 3px
    rgba(113,128,106,.12);

}


textarea{

    min-height:90px;

    resize:vertical;

}


input[type="file"]{

    background:#fff;

    cursor:pointer;

}


.save-food-btn{

    width:100%;

    background:#4f6049;

    font-weight:bold;

    margin-top:10px;

}


/* =========================
   菜单标题
========================= */

.menu-heading{

    display:flex;

    justify-content:space-between;

    align-items:end;

    margin-bottom:15px;

}


.menu-title{

    font-size:21px;

    font-weight:bold;

    color:#3f4a3c;

}


.menu-subtitle{

    font-size:13px;

    color:#999;

    margin-top:2px;

}


/* =========================
   菜品网格
========================= */

.food-grid{

    display:grid;

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

    gap:18px;

}


.food-card{

    background:white;

    border-radius:18px;

    overflow:hidden;

    border:
    1px solid #ebe5db;

    box-shadow:
    0 5px 18px
    rgba(0,0,0,.06);

    transition:
    transform .2s,
    box-shadow .2s;

}


.food-card:hover{

    transform:
    translateY(-3px);

    box-shadow:
    0 10px 25px
    rgba(0,0,0,.10);

}


.food-image-wrap{

    width:100%;

    height:240px;

    background:#eee;

    overflow:hidden;

}


.food-image{

    width:100%;

    height:100%;

    object-fit:cover;

    display:block;

}


.food-no-image{

    height:240px;

    background:#ebe7df;

    display:flex;

    align-items:center;

    justify-content:center;

    font-size:60px;

}


.food-info{

    padding:17px;

}


.food-top{

    display:flex;

    align-items:start;

    justify-content:space-between;

    gap:10px;

}


.food-top h3{

    margin:0;

    font-size:19px;

    color:#333;

}


.food-price{

    color:#b56b36;

    font-size:20px;

    font-weight:bold;

    white-space:nowrap;

}


.food-category{

    display:inline-block;

    margin-top:8px;

    padding:3px 9px;

    border-radius:12px;

    background:#f0eee8;

    color:#6d7567;

    font-size:12px;

}


.food-description{

    color:#777;

    font-size:14px;

    margin:10px 0;

}


.food-ingredients{

    color:#888;

    font-size:13px;

    margin:10px 0;

    line-height:1.7;

}


.order-btn{

    width:100%;

    background:#4f6049;

    margin-top:10px;

    font-weight:bold;

}


/* =========================
   订单
========================= */

.orders-section{

    margin-top:35px;

}


.order-card{

    background:white;

    border-radius:16px;

    padding:17px;

    margin-top:12px;

    border:
    1px solid #ebe5db;

    box-shadow:
    0 4px 15px
    rgba(0,0,0,.05);

}


.order-main{

    display:flex;

    align-items:center;

    justify-content:space-between;

    gap:10px;

}


.order-food-name{

    font-size:17px;

    font-weight:bold;

    color:#333;

}


.order-time{

    font-size:12px;

    color:#aaa;

    margin-top:4px;

}


.order-status{

    padding:5px 11px;

    border-radius:20px;

    font-size:12px;

    white-space:nowrap;

}


.status-waiting{

    background:#f8ead9;

    color:#b06b28;

}


.status-making{

    background:#e1ebf3;

    color:#547493;

}


.status-completed{

    background:#e3eee0;

    color:#5c7d53;

}


.order-remark{

    margin-top:12px;

    padding-top:10px;

    border-top:
    1px solid #eee;

    color:#888;

    font-size:13px;

}


.order-remark span{

    color:#555;

}


/* =========================
   空状态
========================= */

.loading-card,
.empty-card{

    background:white;

    border-radius:16px;

    padding:35px 20px;

    text-align:center;

    color:#999;

    border:
    1px solid #ebe5db;

}


.empty-card.small{

    padding:25px 20px;

}


.empty-icon{

    font-size:40px;

    margin-bottom:8px;

}


.empty-title{

    color:#555;

    font-weight:bold;

    font-size:16px;

}


.empty-text{

    color:#aaa;

    font-size:13px;

    margin-top:4px;

}


/* =========================
   点餐弹窗
========================= */

.modal{

    position:fixed;

    inset:0;

    background:
    rgba(35,40,33,.58);

    display:flex;

    align-items:center;

    justify-content:center;

    padding:20px;

    z-index:9999;

}


.modal-content{

    width:100%;

    max-width:450px;

    background:white;

    border-radius:20px;

    padding:28px;

    position:relative;

    box-shadow:
    0 15px 50px
    rgba(0,0,0,.25);

}


.modal-close{

    position:absolute;

    top:12px;

    right:15px;

    width:35px;

    height:35px;

    border-radius:50%;

    padding:0;

    background:#f1eee8;

    color:#666;

    font-size:24px;

}


.modal-icon{

    font-size:35px;

}


.modal-label{

    color:#999;

    font-size:13px;

    margin-top:5px;

}


.modal-content h2{

    margin:
    5px 0;

    color:#333;

}


.modal-tip{

    color:#999;

    font-size:13px;

}


.modal-content textarea{

    min-height:100px;

}


.confirm-order-btn{

    width:100%;

    background:#4f6049;

    font-weight:bold;

    margin-top:8px;

}


.cancel-order-btn{

    width:100%;

    background:#eeeae3;

    color:#666;

}


/* =========================
   按钮
========================= */

button{

    border:none;

    border-radius:10px;

    padding:11px 18px;

    font-size:15px;

    font-family:inherit;

    cursor:pointer;

    transition:
    transform .15s,
    opacity .15s,
    box-shadow .15s;

}


button:hover{

    opacity:.92;

    transform:
    translateY(-1px);

}


button:active{

    transform:none;

}


/* =========================
   手机端
========================= */

@media(max-width:700px){

    .top-header{

        padding:18px 15px;

    }


    .brand h1{

        font-size:20px;

    }


    .brand-icon{

        width:42px;

        height:42px;

        font-size:21px;

    }


    .logout-btn{

        padding:7px 12px;

        font-size:13px;

    }


    main{

        width:92%;

        margin-top:18px;

    }


    .food-grid{

        grid-template-columns:
        1fr;

        gap:15px;

    }


    .food-image-wrap,
    .food-no-image{

        height:230px;

    }


    .form-row{

        grid-template-columns:
        1fr;

        gap:0;

    }


    .order-main{

        align-items:flex-start;

    }


    .order-status{

        font-size:11px;

        padding:4px 8px;

    }


    .modal-content{

        padding:23px;

    }

}/* =========================
   用户头像
========================= */

.avatar-area{

    position:relative;

}


.avatar-wrap{

    width:64px;

    height:64px;

    border-radius:50%;

    position:relative;

    cursor:pointer;

}


.user-avatar-img{

    width:64px;

    height:64px;

    border-radius:50%;

    object-fit:cover;

    display:block;

    border:3px solid #eee9df;

}


.default-avatar{

    width:64px;

    height:64px;

    border-radius:50%;

    background:#eee9df;

    display:flex;

    align-items:center;

    justify-content:center;

    font-size:32px;

    border:3px solid #eee9df;

}


.avatar-camera{

    position:absolute;

    right:-2px;

    bottom:-2px;

    width:23px;

    height:23px;

    border-radius:50%;

    background:#4f6049;

    color:white;

    display:flex;

    align-items:center;

    justify-content:center;

    font-size:12px;

    border:2px solid white;

}


.user-info{

    flex:1;

}


.avatar-change-btn{

    background:#f0eee8;

    color:#596352;

    padding:5px 10px;

    margin-top:5px;

    font-size:12px;

}


.avatar-change-btn:hover{

    background:#e8e4dc;

    color:#3f4a3c;

}


.kitchen-title{

    color:#3f4a3c;

    font-size:21px;

    margin-top:30px;

    margin-bottom:14px;

}


@media(max-width:700px){

    .user-card{

        padding:15px;

    }


    .avatar-wrap,
    .user-avatar-img,
    .default-avatar{

        width:58px;

        height:58px;

    }


    .default-avatar{

        font-size:28px;

    }

}