:root{
    --red:#e5232f;
    --dark:#202124;
    --text:#202124;
    --muted:#777;
    --line:#e7e7e7;
    --bg:#f7f7f7;
    --green:#159447;
}
*{box-sizing:border-box}
body{
    margin:0;
    font-family:Arial,Helvetica,sans-serif;
    background:var(--bg);
    color:var(--text)
}
button,input,select,textarea{font:inherit}
.header{
    background:#fff;
    border-bottom:1px solid var(--line);
    padding:18px 30px;
    display:flex;
    align-items:center;
    justify-content:space-between
}
.brand{
    display:flex;
    align-items:center;
    gap:14px;
    font-weight:700;
    font-size:18px
}
.logo{
    background:var(--red);
    color:white;
    font-weight:900;
    letter-spacing:1px;
    padding:9px 13px;
    font-size:20px
}
.manager{
    display:flex;
    align-items:center;
    gap:12px;
    font-size:14px
}
.container{
    max-width:1480px;
    margin:0 auto;
    padding:28px
}
h1{
    margin:0 0 5px;
    font-size:34px
}
.subtitle{
    color:var(--muted);
    margin-bottom:25px
}
.card{
    background:#fff;
    border:1px solid var(--line);
    border-radius:12px;
    padding:20px;
    box-shadow:0 2px 8px rgba(0,0,0,.03)
}
.form-grid{
    display:grid;
    grid-template-columns:repeat(4,1fr);
    gap:16px
}
.field label{
    display:block;
    font-size:13px;
    font-weight:700;
    margin-bottom:7px
}
.field input,.field select,.field textarea{
    width:100%;
    border:1px solid #d8d8d8;
    border-radius:7px;
    padding:11px 12px;
    background:#fff
}
.actions{
    display:grid;
    grid-template-columns:1fr 1fr 1.4fr;
    gap:12px;
    margin-top:18px
}
.btn{
    border:1px solid #222;
    background:#fff;
    border-radius:7px;
    padding:12px;
    font-weight:700;
    cursor:pointer
}
.btn-red{
    background:var(--red);
    border-color:var(--red);
    color:#fff
}
.content{
    display:grid;
    grid-template-columns:minmax(0,1fr) 320px;
    gap:18px;
    margin-top:18px
}
.table-card{
    padding:0;
    overflow:hidden
}
.table-head,.product{
    display:grid;
    grid-template-columns:minmax(320px,2.1fr) 130px 120px 120px 155px 155px 40px;
    align-items:center;
    gap:12px;
    padding:14px 16px
}
.table-head{
    background:#fafafa;
    border-bottom:1px solid var(--line);
    font-size:12px;
    font-weight:700
}
.product{
    border-bottom:1px solid var(--line)
}
.product:last-child{border-bottom:0}
.product-main{
    display:flex;
    align-items:center;
    gap:15px
}
.product-img{
    width:100px;
    height:78px;
    border:1px solid #eee;
    border-radius:7px;
    object-fit:contain;
    background:#fff
}
.product-name{
    font-weight:700;
    line-height:1.3
}
.article{
    color:#777;
    font-size:12px;
    margin-top:5px
}
.price{
    font-weight:700
}
.qty{
    display:flex;
    align-items:center
}
.qty button{
    width:30px;
    height:34px;
    border:1px solid #ddd;
    background:#fff;
    cursor:pointer
}
.qty input{
    width:44px;
    height:34px;
    text-align:center;
    border:1px solid #ddd;
    border-left:0;
    border-right:0
}
.discount{
    width:72px;
    padding:8px;
    border:1px solid #ddd;
    border-radius:6px
}
.remove{
    background:none;
    border:0;
    color:var(--red);
    font-size:20px;
    cursor:pointer
}
.summary h3{
    margin-top:0
}
.sum-row{
    display:flex;
    justify-content:space-between;
    margin:13px 0;
    gap:15px
}
.sum-row.total{
    border-top:1px solid var(--line);
    padding-top:15px;
    font-size:20px;
    font-weight:800
}
.red{color:var(--red)}
.green{color:var(--green)}
.notice{
    background:#fff2f3;
    border-radius:7px;
    padding:12px;
    font-size:13px;
    margin-top:18px
}
.add-product{
    margin:14px;
    padding:16px;
    border:1px dashed #bbb;
    border-radius:8px;
    text-align:center;
    cursor:pointer;
    color:#555
}
.login-wrap{
    min-height:100vh;
    display:flex;
    justify-content:center;
    align-items:center;
    padding:20px
}
.login-box{
    width:420px;
    max-width:100%;
    background:#fff;
    padding:35px;
    border-radius:14px;
    border:1px solid var(--line);
    box-shadow:0 15px 50px rgba(0,0,0,.08)
}
.login-box h1{
    font-size:26px;
    margin:25px 0 7px
}
.login-box input{
    width:100%;
    padding:12px;
    margin-top:7px;
    margin-bottom:14px;
    border:1px solid #d5d5d5;
    border-radius:7px
}
.login-note{
    margin-top:18px;
    padding:11px;
    border-radius:7px;
    background:#fff4d9;
    font-size:12px
}
@media(max-width:1100px){
    .form-grid{grid-template-columns:1fr 1fr}
    .content{grid-template-columns:1fr}
    .table-card{overflow:auto}
    .table-head,.product{min-width:1050px}
}