/* ========== 基础 ========== */
* { margin:0; padding:0; box-sizing:border-box; }
:root {
  --green:#2e9e5b; --green-dark:#237a46; --green-light:#e8f7ee;
  --orange:#ff8a3d; --red:#e74c3c;
  --text:#2c3e50; --text-light:#7f8c8d;
  --border:#e6ebe8; --bg:#f4f7f5; --card:#fff;
  --radius:12px; --radius-sm:8px;
  --shadow:0 2px 12px rgba(46,158,91,.08);
  --shadow-hover:0 6px 20px rgba(46,158,91,.15);
}
html,body {
  font-family:-apple-system,BlinkMacSystemFont,"PingFang SC","Microsoft YaHei",sans-serif;
  color:var(--text); background:var(--bg);
  background-image:
    radial-gradient(circle at 0% 0%,rgba(46,158,91,.06) 0,transparent 40%),
    radial-gradient(circle at 100% 100%,rgba(255,138,61,.05) 0,transparent 40%);
  background-attachment:fixed;
  font-size:14px; line-height:1.6;
  -webkit-font-smoothing:antialiased;
}
a { text-decoration:none; color:inherit; }

/* ========== 顶部导航 ========== */
.topbar {
  background:linear-gradient(135deg,var(--green) 0%,#43b06e 100%);
  color:#fff; padding:14px 20px;
  display:flex; justify-content:space-between; align-items:center;
  position:sticky; top:0; z-index:100;
  box-shadow:0 2px 10px rgba(0,0,0,.08);
}
.topbar h1 { font-size:18px; font-weight:600; letter-spacing:.5px; }
.topbar a { color:#fff; font-size:14px; opacity:.95; }
.topbar a:hover { opacity:1; text-decoration:underline; }
/* 顶栏右侧：登录名 / 改密码 / 退出 收成一组靠右 */
.topbar .who { display:flex; align-items:center; gap:30px; margin-left:auto; }
.topbar .who a + a { margin-left: 10px; }
.topbar .who-name { font-size:13px; color:#eaf5ec; }
.topbar .who a { margin:0; }

/* ========== 登录页 ========== */
.login-wrap {
  min-height:100vh; display:flex; flex-direction:column;
  align-items:center; justify-content:center; padding:20px;
  background:
    radial-gradient(circle at 20% 20%,rgba(46,158,91,.35),transparent 50%),
    radial-gradient(circle at 80% 80%,rgba(255,138,61,.25),transparent 50%),
    linear-gradient(135deg,#1e6b3f 0%,#2e9e5b 60%,#43b06e 100%);
  position:relative; overflow:hidden;
}
.login-wrap::before {
  content:""; position:absolute; inset:0;
  background-image:radial-gradient(rgba(255,255,255,.08) 1px,transparent 1px);
  background-size:22px 22px; pointer-events:none;
}
.login-box {
  position:relative;
  background:rgba(255,255,255,.14);
  backdrop-filter:blur(14px); -webkit-backdrop-filter:blur(14px);
  border:1px solid rgba(255,255,255,.25);
  border-radius:20px; padding:40px 32px;
  width:100%; max-width:380px;
  box-shadow:0 20px 60px rgba(0,0,0,.25);
  animation:loginIn .5s ease;
}
@keyframes loginIn { from{opacity:0;transform:translateY(20px)} to{opacity:1;transform:translateY(0)} }
.login-box h2 { color:#fff; text-align:center; margin-bottom:26px; font-size:22px; font-weight:600; letter-spacing:2px; }
.login-box input {
  width:100%; height:46px;
  border:1px solid rgba(255,255,255,.3); border-radius:10px;
  padding:0 16px; margin-bottom:14px; font-size:15px;
  background:rgba(255,255,255,.9); outline:none; transition:all .2s;
}
.login-box input:focus { border-color:#fff; box-shadow:0 0 0 4px rgba(255,255,255,.2); }
.login-box button {
  width:100%; height:46px; background:#fff; color:var(--green-dark);
  border:none; border-radius:10px; font-size:16px; font-weight:700;
  cursor:pointer; letter-spacing:4px; transition:all .2s; margin-top:6px;
}
.login-box button:hover { transform:translateY(-2px); box-shadow:0 8px 20px rgba(0,0,0,.2); }
.login-tip { text-align:center; margin-top:16px; font-size:12px; color:rgba(255,255,255,.75); line-height:1.8; }
.error-msg {
  background:rgba(255,235,238,.95); color:#c62828; padding:10px;
  border-radius:8px; margin-bottom:14px; font-size:13px; text-align:center;
}

/* ========== 管理后台 ========== */
.admin-body { padding:16px; max-width:1600px; margin:0 auto; }
.admin-menu { display:flex; gap:8px; flex-wrap:wrap; margin-bottom:16px; }
.admin-menu a {
  background:#fff; padding:10px 16px; border-radius:8px;
  font-size:14px; border:1px solid var(--border); transition:all .2s;
}
.admin-menu a:hover { border-color:var(--green); color:var(--green-dark); }
.admin-menu a.active { background:var(--green); color:#fff; border-color:var(--green); font-weight:600; }
/* 菜单上的数字小红点（目前用于「订单查看」显示订单总数） */
.admin-menu a { position:relative; }
.badge-dot {
  position:absolute; top:-7px; right:-7px; min-width:18px; height:18px; line-height:18px; padding:0 5px;
  border-radius:9px; background:#e53935; color:#fff; font-size:11px; font-weight:600; text-align:center;
  box-shadow:0 1px 4px rgba(0,0,0,.25);
}
/* 订单查看页的「待送货日期」标签 */
.date-chip{display:inline-block;margin:4px 8px 4px 0;padding:6px 12px;border-radius:16px;background:#eef7f0;
  color:#1e7d3c;font-size:13px;text-decoration:none;border:1px solid #cfe9d6;line-height:1.2}
.date-chip:hover{border-color:var(--green);background:#e3f2e8}
.date-chip b{display:inline-block;background:#e53935;color:#fff;border-radius:9px;padding:0 6px;margin-left:5px;
  font-size:12px;font-weight:600}
.date-chip.is-today{border-color:#2e7d32;font-weight:600}
.date-chip.is-read{background:#f5f5f5;color:#999;border-color:#e3e3e3}
.date-chip.is-read b{display:none}
.card { background:var(--card); border-radius:10px; padding:16px; margin-bottom:16px; box-shadow:var(--shadow); }
.card h3 { font-size:16px; margin-bottom:12px; padding-bottom:8px; border-bottom:1px solid var(--border); }
table { width:100%; border-collapse:collapse; font-size:14px; }
th,td { padding:10px 8px; text-align:left; border-bottom:1px solid #f0f0f0; }
th { color:var(--text-light); font-weight:600; background:#f7faf8; }
tr:hover td { background:#fafcfb; }
.btn {
  display:inline-block; padding:6px 14px; border-radius:6px;
  font-size:13px; cursor:pointer; border:none; transition:all .2s;
}
.btn-primary { background:var(--green); color:#fff; }
.btn-primary:hover { background:var(--green-dark); }
.btn-danger { background:var(--red); color:#fff; }
.btn-danger:hover { background:#c0392b; }
.btn-success { background:var(--orange); color:#fff; }
.btn-sm { padding:4px 10px; font-size:12px; }
.form-row { display:flex; gap:8px; flex-wrap:wrap; margin-bottom:12px; align-items:center; }
.form-row input, .form-row select {
  height:36px; border:1px solid var(--border); border-radius:6px;
  padding:0 10px; font-size:14px; outline:none; transition:all .2s;
}
.form-row input:focus, .form-row select:focus { border-color:var(--green); box-shadow:0 0 0 3px rgba(46,158,91,.12); }
.price-input { width:90px; text-align:right; }

/* ========== 下单页 ========== */
.order-page { display:flex; height:calc(100vh - 56px); overflow:hidden; }
.order-right { flex:1; display:flex; flex-direction:column; min-width:0; overflow:hidden; }
.order-right .search-bar { position:static; background:var(--bg); padding:12px 12px 8px; flex-shrink:0; border-bottom:1px solid var(--border); }
.order-right .cat-content { flex:1; overflow-y:auto; padding:12px; padding-bottom:90px; }
.cat-sidebar {
  width:100px; background:#fff; border-right:1px solid var(--border);
  overflow-y:auto; flex-shrink:0;
  scrollbar-width:none;
}
.cat-sidebar::-webkit-scrollbar { display:none; }
.cat-item {
  padding:14px 8px; text-align:center; font-size:13px; color:var(--text-light);
  cursor:pointer; border-left:3px solid transparent; transition:all .2s;
}
.cat-item:hover { background:var(--green-light); }
.cat-item.active {
  background:var(--green-light); color:var(--green-dark);
  border-left-color:var(--green); font-weight:600;
}
.prod-grid { display:grid; grid-template-columns:1fr 1fr; gap:10px; }
.prod-card {
  background:#fff; border-radius:var(--radius); overflow:hidden;
  position:relative; box-shadow:var(--shadow);
  transition:transform .2s,box-shadow .2s;
  display:flex; flex-direction:column;
}
.prod-card:hover { transform:translateY(-3px); box-shadow:var(--shadow-hover); }
.prod-img {
  width:100%; aspect-ratio:1/1; background:#f0f4f2;
  object-fit:cover; display:block;
}
.prod-info { padding:10px 12px 12px; flex:1; display:flex; flex-direction:column; }
.prod-name {
  font-size:14px; font-weight:600; line-height:1.3; margin-bottom:4px;
  display:-webkit-box; -webkit-line-clamp:2; -webkit-box-orient:vertical; overflow:hidden;
}
.prod-spec { font-size:12px; color:var(--text-light); margin-bottom:6px; }
.prod-price { color:var(--orange); font-size:17px; font-weight:700; }
.prod-price::before { content:"¥"; font-size:12px; margin-right:1px; }
.prod-price small { font-size:11px; font-weight:400; color:var(--text-light); }
.qty-control {
  display:flex; align-items:center; justify-content:space-between;
  margin-top:10px; background:#f4f8f5; border-radius:20px; padding:3px;
}
.qty-btn {
  width:30px; height:30px; border-radius:50%; border:none;
  font-size:18px; font-weight:700; cursor:pointer;
  display:flex; align-items:center; justify-content:center;
  transition:all .15s; line-height:1;
}
.qty-minus { background:#fff; color:var(--green); box-shadow:0 1px 4px rgba(0,0,0,.08); }
.qty-minus:hover { background:var(--green); color:#fff; }
.qty-plus { background:var(--green); color:#fff; box-shadow:0 1px 4px rgba(46,158,91,.3); }
.qty-plus:hover { background:var(--green-dark); }
.qty-btn:active { transform:scale(.92); }
.qty-num { font-size:15px; font-weight:600; min-width:24px; text-align:center; }

/* ========== 底部购物车 ========== */
.cart-bar {
  position:fixed; bottom:0; left:0; right:0;
  background:#fff; padding:10px 20px;
  display:flex; align-items:center; justify-content:space-between;
  box-shadow:0 -2px 16px rgba(0,0,0,.08); z-index:50;
  border-radius:0;
  gap:16px;
}
.cart-bar .cart-left { flex:0 0 auto; display:flex; align-items:center; gap:10px; cursor:pointer; }
.cart-bar .cart-total { flex:0 0 auto; text-align:right; }
.cart-bar .checkout-btn { flex:0 0 auto; }
@media (min-width:1024px) {
  .cart-bar { left:50%; right:auto; bottom:0; transform:translateX(-50%); width:900px; max-width:900px; border-radius:16px 16px 0 0; }
  .cart-bar .cart-left { flex:0 0 auto; }
  .cart-bar .cart-total { flex:1; text-align:center; }
  .cart-bar .checkout-btn { flex:0 0 auto; }
}
.cart-left { display:flex; align-items:center; gap:10px; cursor:pointer; }
.cart-icon { font-size:28px; }
.cart-count { font-size:14px; color:var(--text-light); }
.cart-total { color:var(--red); font-size:20px; font-weight:700; }
.cart-total small { font-size:12px; font-weight:400; }
.checkout-btn {
  background:linear-gradient(135deg,var(--green),#43b06e); color:#fff;
  border:none; padding:10px 24px; border-radius:22px; font-size:15px;
  font-weight:600; cursor:pointer; box-shadow:0 4px 12px rgba(46,158,91,.3);
  transition:all .2s;
}
.checkout-btn:hover { box-shadow:0 6px 18px rgba(46,158,91,.4); }
.checkout-btn:disabled { background:#ccc; box-shadow:none; }

/* ========== 购物车弹层 ========== */
.cart-modal {
  position:fixed; inset:0; background:rgba(0,0,0,.45);
  z-index:100; display:none; align-items:flex-end; justify-content:center;
  backdrop-filter:blur(2px);
}
.cart-modal.show { display:flex; animation:fadeIn .2s; }
@keyframes fadeIn { from{opacity:0} to{opacity:1} }
.cart-panel {
  background:#fff; width:100%; max-width:560px; max-height:80vh;
  border-radius:20px 20px 0 0; display:flex; flex-direction:column;
  animation:slideUp .28s ease;
}
@keyframes slideUp { from{transform:translateY(100%)} to{transform:translateY(0)} }
.cart-header { padding:16px 20px; border-bottom:1px solid var(--border); display:flex; justify-content:space-between; align-items:center; font-size:16px; }
.cart-body { flex:1; overflow-y:auto; padding:12px 20px; }
.cart-item { display:flex; justify-content:space-between; align-items:center; padding:10px 0; border-bottom:1px solid #f5f5f5; }
.cart-footer { padding:14px 20px 20px; border-top:1px solid var(--border); }
.cart-footer input { width:100%; height:38px; border:1px solid var(--border); border-radius:6px; padding:0 10px; margin-bottom:8px; outline:none; }
.cart-footer input:focus { border-color:var(--green); }

/* ========== 订单列表 ========== */
.order-card { background:#fff; border-radius:10px; padding:14px; margin-bottom:10px; box-shadow:var(--shadow); }
.order-card .row { display:flex; justify-content:space-between; margin-bottom:6px; font-size:14px; }
.order-status { padding:2px 8px; border-radius:4px; font-size:12px; background:#fef3c7; color:#92400e; }

/* ========== 响应式 ========== */
@media (min-width: 1024px) {
  .prod-grid { grid-template-columns:repeat(4,1fr); gap:12px; }
  .prod-img { aspect-ratio:1/1; }
  .cat-sidebar { width:130px; }
  .cat-item { font-size:14px; padding:16px 10px; }
}
@media (min-width: 1400px) {
  .prod-grid { grid-template-columns:repeat(5,1fr); }
}
@media (max-width: 640px) {
  .topbar { padding:12px 14px; }
  .topbar h1 { font-size:16px; }
  .admin-menu { overflow-x:auto; flex-wrap:nowrap; padding-bottom:4px; scrollbar-width:none; }
  .admin-menu::-webkit-scrollbar { display:none; }
  .admin-menu a { flex:0 0 auto; white-space:nowrap; }
  .form-row { flex-direction:column; align-items:stretch; }
  .form-row input, .form-row select, .form-row button { width:100% !important; }
  .card table { display:block; overflow-x:auto; white-space:nowrap; }
  .order-page { height:calc(100vh - 52px); }
  .cat-sidebar { width:80px; }
  .cat-item { padding:12px 6px; font-size:12px; }
  .prod-grid { grid-template-columns:repeat(2,1fr); gap:8px; }
  .prod-info { padding:8px 10px 10px; }
  .prod-name { font-size:13px; }
  .prod-price { font-size:15px; }
  .qty-btn { width:28px; height:28px; font-size:16px; }
  .cart-bar { border-radius:14px 14px 0 0; padding:8px 12px; }
  .cart-icon { font-size:24px; }
  .cart-total { font-size:18px; }
  .checkout-btn { padding:9px 20px; font-size:14px; }
  .login-box { padding:32px 22px; border-radius:16px; }
  .login-box h2 { font-size:19px; }
}

/* ========== 商品列表：左图右文（有图 + 省空间） ========== */
.prod-list {
  display: flex;
  flex-direction: column;
  background: #fff;
  border-radius: var(--radius);
  overflow: hidden;
  box-shadow: var(--shadow);
}
.prod-row {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 10px 12px;
  border-bottom: 1px solid #f0f4f2;
  transition: background .15s;
}
.prod-row:last-child { border-bottom: none; }
.prod-row:hover { background: #fafcfb; }
.prod-thumb {
  width: 60px; height: 60px; flex-shrink: 0;
  border-radius: 8px; overflow: hidden;
  background: #f4f8f5;
  display: flex; align-items: center; justify-content: center;
}
.prod-thumb img { width: 100%; height: 100%; object-fit: cover; display: block; }
.prod-thumb-empty { font-size: 11px; color: #cbd5d0; letter-spacing: 1px; }
.prod-info { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 6px; }
.prod-name {
  font-size: 15px; font-weight: 600; color: var(--text); line-height: 1.3;
  display: flex; align-items: baseline; gap: 8px; flex-wrap: wrap;
}
.prod-name .prod-spec {
  font-size: 11px; font-weight: 400; color: var(--text-light);
  background: #f0f4f2; padding: 1px 6px; border-radius: 4px;
}
.prod-price-row { display: flex; align-items: baseline; gap: 10px; flex-wrap: wrap; }
.price-special { font-size: 16px; font-weight: 700; color: var(--orange); }
.price-market { font-size: 12px; color: var(--text-light); text-decoration: line-through; }
.prod-row .qty-control {
  margin-top: 0; background: #f4f8f5; border-radius: 20px;
  padding: 3px; flex-shrink: 0;
  display: flex; align-items: center; gap: 4px;
}
.prod-row .qty-btn { width: 28px; height: 28px; font-size: 16px; }
.prod-row .qty-num {
  width: 30px; border: none; background: transparent;
  text-align: center; font-size: 15px; font-weight: 600;
  outline: none; -moz-appearance: textfield;
}
.prod-row .qty-num::-webkit-outer-spin-button,
.prod-row .qty-num::-webkit-inner-spin-button { -webkit-appearance: none; margin: 0; }

@media (max-width: 640px) {
  .prod-row { padding: 9px 10px; gap: 10px; }
  .prod-thumb { width: 54px; height: 54px; }
  .prod-name { font-size: 14px; }
  .price-special { font-size: 15px; }
  .prod-row .qty-btn { width: 26px; height: 26px; font-size: 15px; }
  .prod-row .qty-num { width: 26px; font-size: 14px; }
}
@media (min-width: 1024px) {
  .prod-thumb { width: 72px; height: 72px; }
  .prod-name { font-size: 16px; }
  .price-special { font-size: 18px; }
  .prod-row { padding: 14px 16px; }
}

/* ========== 商品列表：左图右文 ========== */
.prod-list { display:flex; flex-direction:column; background:#fff; border-radius:var(--radius); overflow:hidden; box-shadow:var(--shadow); }
.prod-row { display:flex; align-items:center; gap:12px; padding:10px 12px; border-bottom:1px solid #f0f4f2; transition:background .15s; }
.prod-row:last-child { border-bottom:none; }
.prod-row:hover { background:#fafcfb; }
.prod-thumb { width:60px; height:60px; flex-shrink:0; border-radius:8px; overflow:hidden; background:#f4f8f5; display:flex; align-items:center; justify-content:center; }
.prod-thumb img { width:100%; height:100%; object-fit:cover; display:block; }
.prod-thumb-empty { font-size:11px; color:#cbd5d0; letter-spacing:1px; }
.prod-info { flex:1; min-width:0; display:flex; flex-direction:column; gap:6px; }
.prod-name { font-size:15px; font-weight:600; color:var(--text); line-height:1.3; display:flex; align-items:baseline; gap:8px; flex-wrap:wrap; }
.prod-name .prod-spec { font-size:11px; font-weight:400; color:var(--text-light); background:#f0f4f2; padding:1px 6px; border-radius:4px; }
.prod-price-row { display:flex; align-items:baseline; gap:10px; flex-wrap:wrap; }
.price-special { font-size:16px; font-weight:700; color:var(--orange); }
.price-market { font-size:12px; color:var(--text-light); text-decoration:line-through; }
.prod-row .qty-control { margin-top:0; background:#f4f8f5; border-radius:20px; padding:3px; flex-shrink:0; display:flex; align-items:center; gap:4px; }
.prod-row .qty-btn { width:28px; height:28px; font-size:16px; }
.prod-row .qty-num { width:30px; border:none; background:transparent; text-align:center; font-size:15px; font-weight:600; outline:none; -moz-appearance:textfield; }
.prod-row .qty-num::-webkit-outer-spin-button,
.prod-row .qty-num::-webkit-inner-spin-button { -webkit-appearance:none; margin:0; }
@media (max-width:640px) {
  .prod-row { padding:9px 10px; gap:10px; }
  .prod-thumb { width:54px; height:54px; }
  .prod-name { font-size:14px; }
  .price-special { font-size:15px; }
  .prod-row .qty-btn { width:26px; height:26px; font-size:15px; }
  .prod-row .qty-num { width:26px; font-size:14px; }
}
@media (min-width:1024px) {
  .prod-thumb { width:72px; height:72px; }
  .prod-name { font-size:16px; }
  .price-special { font-size:18px; }
  .prod-row { padding:14px 16px; }
}

/* 商品搜索：固定在 topbar 下方 */
.search-bar {
  position:sticky;
  top:0;
  z-index:20;
  background:var(--bg);
  padding:12px 12px 8px;
  margin:0 -12px;
  border-bottom:1px solid var(--border);
}
@media (min-width:1024px) {
  .search-bar { padding:16px 0 10px; margin:0; }
}
.search-bar input {
  width:100%; height:38px; border:1px solid var(--border); border-radius:20px;
  padding:0 16px; font-size:14px; outline:none; background:#fff;
  transition:border-color .2s, box-shadow .2s;
}
.search-bar input:focus { border-color:var(--green); box-shadow:0 0 0 3px rgba(46,158,91,.12); }

/* 电脑端：内容居中，最大宽度 900px */
@media (min-width: 1024px) {
  .cat-content { max-width: 900px; margin: 0 auto; width: 100%; }
  .search-bar { padding: 16px 16px 8px; }
  .prod-row { padding: 16px 20px; }
}

/* 右侧容器：搜索栏固定，商品区滚动 */
.order-right {
  flex:1;
  display:flex;
  flex-direction:column;
  min-width:0;
  overflow:hidden;
}
.order-right .search-bar {
  position:static;
  background:var(--bg);
  padding:12px 12px 8px;
  flex-shrink:0;
  border-bottom:1px solid var(--border);
}
.order-right .cat-content {
  flex:1;
  overflow-y:auto;
  padding:12px;
  padding-bottom:90px;
}
@media (min-width:1024px) {
  .order-right { max-width:900px; margin:0 auto; width:100%; }
  .order-right .search-bar { padding:16px 0 10px; }
  .order-right .cat-content { padding:0 0 90px; }
  .order-right .cat-content .prod-list { margin-top:12px; }
}