:root{
  --bg:#DCEFE4; --surface:#FFFFFF; --ink:#123B28; --muted:#5C7466; --line:#E3EAE4;
  --green:#1E7A4E; --green-soft:#E7F6EC; --orange:#F97316; --orange-soft:#FFF1E6;
  --amber:#D97706; --red:#E5484D; --red-soft:#FCEBEC;
}
*{box-sizing:border-box;margin:0;padding:0;-webkit-tap-highlight-color:transparent;}
html,body{height:100%;}
body{
  font-family:-apple-system,"SF Pro Text","Segoe UI",Roboto,Helvetica,Arial,sans-serif;
  background:var(--bg);color:var(--ink);padding-bottom:120px;
}
.top{display:flex;align-items:center;justify-content:space-between;padding:14px 18px;}
.brand{display:flex;align-items:center;gap:8px;}
.logo{width:32px;height:32px;border-radius:9px;background:var(--green);display:flex;align-items:center;justify-content:center;font-size:17px;}
.wordmark{font-size:17px;font-weight:700;color:var(--ink);}
.wordmark .ai{color:var(--orange);}
.hint-label{font-size:11px;color:var(--muted);}

main{padding:0 18px;}
.shops{display:flex;gap:8px;overflow-x:auto;padding:2px 0 4px;}
.shop{flex:none;padding:9px 13px;border-radius:12px;border:1px solid var(--line);background:#fff;cursor:pointer;min-width:104px;}
.shop.active{background:var(--green);border-color:var(--green);}
.shop .sn{font-size:12.5px;font-weight:600;color:var(--ink);white-space:nowrap;}
.shop .sp{font-size:11px;color:var(--muted);margin-top:1px;}
.shop.active .sn,.shop.active .sp{color:#fff;}

.title{font-size:19px;font-weight:700;color:var(--ink);margin-top:12px;}
.sub{font-size:12px;color:var(--muted);margin:3px 0 12px;}

.cart{display:flex;flex-direction:column;gap:10px;}
.empty{background:var(--surface);border-radius:16px;padding:26px 18px;text-align:center;color:var(--muted);font-size:14px;}

.item{background:var(--surface);border-radius:16px;padding:13px 15px;box-shadow:0 6px 18px rgba(16,59,40,.06);}
.row1{display:flex;justify-content:space-between;align-items:center;gap:10px;}
.row1 .nm{font-size:15px;font-weight:600;color:var(--ink);}
.row1 .pc{font-size:14px;font-weight:700;color:var(--ink);white-space:nowrap;}
.qty-box{display:flex;align-items:center;gap:7px;}
.qty-box button{width:27px;height:27px;border-radius:8px;border:1px solid var(--line);background:#F3F5F1;color:var(--ink);font-size:15px;line-height:1;cursor:pointer;}
.qty-box .val{font-size:13px;font-weight:600;min-width:38px;text-align:center;}
.meta{font-size:11.5px;color:var(--muted);margin-top:3px;}

/* карусель марок */
.carousel{display:flex;gap:8px;overflow-x:auto;padding:4px 1px 5px;margin-top:9px;}
.mcard{flex:none;width:104px;border:1.5px solid var(--line);border-radius:12px;padding:8px;cursor:pointer;position:relative;background:#fff;}
.mcard.sel{border-color:var(--green);background:var(--green-soft);}
.mcard .img{height:44px;border-radius:8px;background:#F3F5F1;display:flex;align-items:center;justify-content:center;font-size:26px;margin-bottom:5px;}
.mcard .br{font-size:10.5px;font-weight:600;color:var(--ink);line-height:1.25;}
.mcard .pk{font-size:9.5px;color:var(--muted);margin-top:1px;}
.mcard .pc{font-size:12px;font-weight:700;color:var(--ink);margin-top:3px;}
.mcard .chk{position:absolute;top:6px;right:6px;width:17px;height:17px;border-radius:50%;background:var(--green);color:#fff;font-size:10px;display:flex;align-items:center;justify-content:center;opacity:0;}
.mcard.sel .chk{opacity:1;}

/* полоска */
.bar{height:10px;border-radius:5px;background:#EFF3EF;overflow:hidden;margin-top:9px;display:flex;}
.bar .need{background:var(--green);height:100%;}
.bar .spare{background:repeating-linear-gradient(135deg,#B6DFC4 0 5px,#D8EEDD 5px 10px);height:100%;}
.bar .short{background:var(--red);height:100%;}
.legend{display:flex;justify-content:space-between;font-size:10.5px;color:var(--muted);margin-top:3px;}
.legend .need-t{color:var(--green);font-weight:600;}
.legend .short-t{color:var(--red);font-weight:600;}
.tag{display:inline-flex;font-size:10.5px;font-weight:600;padding:2px 8px;border-radius:999px;margin-top:6px;}
.tag.warn{background:var(--orange-soft);color:var(--orange);}
.tag.ok{background:var(--green-soft);color:var(--green);}
.tag.short{background:var(--red-soft);color:var(--red);}
.actions{margin-top:8px;display:flex;gap:8px;}
.actions button{font-size:12px;color:var(--ink);border:1px solid var(--line);background:#fff;border-radius:9px;padding:5px 10px;cursor:pointer;}
.actions button.danger{color:#C2410C;border-color:#F3D2C0;}

.footer{position:fixed;left:0;right:0;bottom:0;background:linear-gradient(180deg,rgba(220,239,228,0) 0%,var(--bg) 30%);padding:12px 18px 18px;}
.totals{font-size:13px;color:var(--muted);margin-bottom:9px;}
.cta{width:100%;height:50px;border-radius:14px;background:var(--orange);color:#fff;font-size:15px;font-weight:600;border:none;cursor:pointer;box-shadow:0 10px 22px rgba(249,115,22,.22);}
.cta:disabled{background:#CBD5CE;color:#7a8a80;box-shadow:none;cursor:default;}

/* компактный вид + раскрытие */
.chev{color:var(--muted);font-size:13px;font-weight:400;}
.cmeta{display:flex;align-items:center;justify-content:space-between;gap:8px;margin-top:3px;}
.cmeta-t{font-size:11.5px;color:var(--muted);min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;}
.cmeta-badge{flex:none;}
.cmeta-badge .tag{margin-top:0;}
.mbar{height:4px;border-radius:2px;background:#EFF3EF;overflow:hidden;margin-top:7px;display:flex;}
.mbar .need{background:var(--green);height:100%;}
.mbar .spare{background:repeating-linear-gradient(135deg,#B6DFC4 0 4px,#D8EEDD 4px 8px);height:100%;}
.mbar .short{background:var(--red);height:100%;}
.detail{margin-top:9px;border-top:1px dashed var(--line);padding-top:9px;}
.item{cursor:pointer;}
.item.open{box-shadow:0 10px 24px rgba(16,59,40,.12);}
.mcard .img img{width:100%;height:44px;object-fit:cover;border-radius:8px;}