* { margin:0; padding:0; box-sizing:border-box; -webkit-tap-highlight-color:transparent; }
body { font-family:-apple-system,BlinkMacSystemFont,"Segoe UI","PingFang SC","Hiragino Sans GB","Microsoft YaHei",sans-serif; background:#f4f7f6; color:#333; }

.header { background:linear-gradient(135deg,#0d7377 0%,#14919b 50%,#2dd4bf 100%); color:#fff; padding:24px 16px 20px; position:sticky; top:0; z-index:100; }
.header-inner { display:flex; align-items:center; gap:12px; max-width:600px; margin:0 auto; }
.logo { font-size:36px; }
.header-text h1 { font-size:22px; font-weight:700; letter-spacing:1px; }
.header-text p { font-size:13px; opacity:.85; margin-top:2px; }

.main { max-width:600px; margin:0 auto; padding:16px 12px 90px; }
.section-title { font-size:16px; font-weight:600; margin-bottom:12px; color:#0d7377; }

.product-grid { display:grid; grid-template-columns:repeat(2,1fr); gap:10px; }
.product-card { background:#fff; border-radius:12px; padding:14px 12px; box-shadow:0 1px 4px rgba(0,0,0,.06); display:flex; flex-direction:column; gap:6px; }
.product-name { font-size:16px; font-weight:600; }
.product-desc { font-size:12px; color:#999; }
.product-bottom { display:flex; justify-content:space-between; align-items:flex-end; margin-top:4px; }
.product-unit { font-size:13px; color:#999; }
.add-btn { width:30px; height:30px; border-radius:50%; background:#0d7377; color:#fff; border:none; font-size:20px; line-height:1; cursor:pointer; display:flex; align-items:center; justify-content:center; transition:transform .15s; }
.add-btn:active { transform:scale(.9); }

.empty-msg { text-align:center; padding:60px 0; color:#aaa; font-size:14px; }

.cart-bar { position:fixed; bottom:0; left:0; right:0; max-width:600px; margin:0 auto; display:flex; align-items:center; background:#fff; box-shadow:0 -2px 12px rgba(0,0,0,.08); z-index:200; border-radius:16px 16px 0 0; overflow:hidden; }
.cart-info { flex:1; display:flex; align-items:center; gap:8px; padding:0 16px; height:52px; cursor:pointer; position:relative; }
.cart-icon { font-size:24px; }
.cart-count { position:absolute; top:4px; left:46px; background:#e63946; color:#fff; font-size:11px; min-width:18px; height:18px; border-radius:9px; display:flex; align-items:center; justify-content:center; padding:0 4px; }
.cart-summary { font-size:14px; color:#666; }
.cart-btn { background:linear-gradient(135deg,#0d7377,#14919b); color:#fff; border:none; height:52px; padding:0 28px; font-size:16px; font-weight:600; cursor:pointer; }

.drawer-mask, .modal-mask { position:fixed; inset:0; background:rgba(0,0,0,.4); z-index:300; display:none; }
.cart-drawer { position:fixed; bottom:0; left:0; right:0; max-width:600px; margin:0 auto; background:#fff; border-radius:16px 16px 0 0; z-index:301; display:none; max-height:60vh; overflow:hidden; }
.drawer-header { display:flex; justify-content:space-between; align-items:center; padding:14px 16px; border-bottom:1px solid #eee; font-size:16px; font-weight:600; }
.clear-cart { background:none; border:none; color:#999; font-size:13px; cursor:pointer; }
.drawer-items { max-height:44vh; overflow-y:auto; padding:0 16px 16px; }
.drawer-item { display:flex; align-items:center; justify-content:space-between; padding:10px 0; border-bottom:1px solid #f5f5f5; }
.drawer-item-info { flex:1; }
.drawer-item-name { font-size:15px; font-weight:500; }
.drawer-item-unit { font-size:12px; color:#999; }
.drawer-item-ctrl { display:flex; align-items:center; gap:10px; }
.qty-btn { width:26px; height:26px; border-radius:50%; border:1px solid #0d7377; background:#fff; color:#0d7377; font-size:16px; cursor:pointer; display:flex; align-items:center; justify-content:center; }
.qty-num { font-size:15px; min-width:20px; text-align:center; font-weight:600; }

.modal-mask.show, .cart-drawer.show { display:block; }
.modal { position:fixed; top:50%; left:50%; transform:translate(-50%,-50%); background:#fff; border-radius:16px; width:88%; max-width:400px; z-index:302; display:none; max-height:85vh; overflow-y:auto; }
.modal-mask.show .modal { display:block; }
.modal-header { display:flex; justify-content:space-between; align-items:center; padding:16px; font-size:17px; font-weight:600; border-bottom:1px solid #eee; }
.modal-close { background:none; border:none; font-size:26px; color:#999; cursor:pointer; line-height:1; }
.modal-body { padding:16px; }
.order-summary { background:#f8f9fa; border-radius:8px; padding:12px; margin-bottom:16px; font-size:13px; color:#555; }
.form-group { margin-bottom:14px; }
.form-group label { display:block; font-size:14px; font-weight:500; margin-bottom:6px; color:#333; }
.required { color:#e63946; }
.form-group input, .form-group textarea { width:100%; padding:10px 12px; border:1px solid #ddd; border-radius:8px; font-size:15px; outline:none; transition:border-color .2s; }
.form-group input:focus, .form-group textarea:focus { border-color:#0d7377; }
.order-tip { text-align:right; font-size:13px; color:#999; margin:4px 0 16px; }
.submit-order { width:100%; padding:14px; background:linear-gradient(135deg,#0d7377,#14919b); color:#fff; border:none; border-radius:10px; font-size:17px; font-weight:600; cursor:pointer; }

.modal-success { text-align:center; padding:36px 24px 28px; }
.success-icon { font-size:52px; margin-bottom:12px; }
.modal-success h3 { font-size:20px; margin-bottom:8px; }
.modal-success p { font-size:14px; color:#666; margin-bottom:4px; }
.success-msg { color:#999 !important; margin-bottom:20px !important; }
.btn-done { padding:12px 40px; background:#0d7377; color:#fff; border:none; border-radius:8px; font-size:16px; cursor:pointer; }