/* CityShop Prototype Visual Enhancement Layer */
@import url('https://fonts.googleapis.com/css2?family=Plus+Jakarta+Sans:wght@400;500;600;700;800&display=swap');

:root {
  --primary: #c4452b;
  --primary-dark: #9e3520;
  --primary-light: #f8ede8;
  --accent-gold: #ffd700;
  --shadow-sm: 0 2px 8px rgba(0,0,0,.06);
  --shadow-md: 0 8px 24px rgba(0,0,0,.1);
  --shadow-lg: 0 16px 48px rgba(0,0,0,.14);
  --glass: rgba(255,255,255,.82);
  --font-display: "Plus Jakarta Sans", -apple-system, "PingFang SC", "Microsoft YaHei", sans-serif;
}

body { font-family: var(--font-display); -webkit-font-smoothing: antialiased; }

/* ── Images ── */
.img-cover, .product-img img, .jxe-feed-card .img img, .jxe-order-item .pic img,
.jxe-nc-p .pic img, .jxe-flash-item .pic img, .store-thumb img, .banner-img {
  width: 100%; height: 100%; object-fit: cover; display: block;
}
.product-img, .jxe-feed-card .img, .jxe-order-item .pic, .jxe-nc-p .pic,
.jxe-flash-item .pic, .store-thumb {
  overflow: hidden; background: #f0f2f5;
}
.product-img { border-radius: 10px; width: 72px; height: 72px; }
.product-img.lg { width: 100%; height: 200px; border-radius: 0; }

/* ── Phone shell polish ── */
.phone-shell {
  background: linear-gradient(145deg, #2d2d2d, #0a0a0a);
  box-shadow: var(--shadow-lg), 0 0 0 1px rgba(255,255,255,.08) inset;
}
.phone-screen { background: #f6f0e8; }
.status-bar { backdrop-filter: blur(12px); background: rgba(255,255,255,.92); }

/* ── Tab bar ── */
.tab-bar {
  backdrop-filter: blur(16px);
  background: rgba(255,255,255,.94);
  box-shadow: 0 -4px 20px rgba(0,0,0,.06);
  height: 58px; padding-bottom: env(safe-area-inset-bottom, 0);
}
.tab-item { transition: color .2s, transform .15s; font-weight: 500; }
.tab-item.active { transform: translateY(-1px); }
.tab-item .ico { filter: drop-shadow(0 1px 2px rgba(0,0,0,.08)); }

/* ── Cards & surfaces ── */
.card, .content-card, .store-card, .jxe-feed-card, .stat-card {
  box-shadow: var(--shadow-sm);
  transition: box-shadow .25s, transform .25s;
}
.store-card:hover, .jxe-feed-card:hover { box-shadow: var(--shadow-md); transform: translateY(-2px); }

/* ── Buttons ── */
.btn {
  font-weight: 600; letter-spacing: .02em;
  box-shadow: 0 2px 8px rgba(196,69,43,.22);
}
.btn-primary { background: linear-gradient(135deg, #c4452b, #e07058); border: none; }
.btn-primary:hover { background: linear-gradient(135deg, #9e3520, #c4452b); box-shadow: 0 4px 16px rgba(196,69,43,.32); }
.btn-outline { box-shadow: none; }

/* ── Admin polish ── */
.sidebar {
  background: linear-gradient(180deg, #3d2918 0%, #1c120e 100%);
  box-shadow: 4px 0 24px rgba(0,0,0,.15);
}
.sidebar-brand { background: rgba(255,255,255,.04); }
.stat-card {
  border: 1px solid rgba(0,0,0,.04);
  position: relative; overflow: hidden;
}
.stat-card::before {
  content: ''; position: absolute; top: 0; left: 0; right: 0; height: 3px;
  background: linear-gradient(90deg, var(--primary), #e07058);
}
.admin-topbar { backdrop-filter: blur(12px); background: rgba(255,255,255,.95); }
.content-card { border: 1px solid rgba(0,0,0,.04); }
.login-page {
  background: linear-gradient(135deg, #3d2918 0%, #6b4032 50%, #c4452b 100%);
  position: relative; overflow: hidden;
}
.login-page::before {
  content: ''; position: absolute; inset: 0;
  background: url('../images/banners/fresh.jpg') center/cover;
  opacity: .15;
}
.login-box { position: relative; z-index: 1; border: 1px solid rgba(255,255,255,.2); }

.store-admin .sidebar { background: linear-gradient(180deg, #4a3228 0%, #2a1c16 100%); }
.franchise-admin .sidebar { background: linear-gradient(180deg, #6b4032 0%, #3d2918 100%); }
.platform-admin .sidebar { background: linear-gradient(180deg, #3d2918 0%, #1c120e 100%); }
.agent-admin .sidebar { background: linear-gradient(180deg, #5a3d2e 0%, #2a1c16 100%); }

.chart-placeholder {
  background: linear-gradient(180deg, #fff 0%, #fff5f5 100%);
  border: none; box-shadow: inset 0 0 0 1px rgba(255,71,87,.1);
}

/* ── Hub index ── */
.proto-badge { pointer-events: auto; backdrop-filter: blur(8px); }

/* ── Tags ── */
.tag { font-weight: 600; letter-spacing: .03em; }

/* ── Map ── */
.map-placeholder {
  background: url('../images/maps/delivery.jpg') center/cover;
  color: #fff; text-shadow: 0 1px 4px rgba(0,0,0,.5);
  position: relative;
}
.map-placeholder::after {
  content: ''; position: absolute; inset: 0;
  background: linear-gradient(180deg, rgba(0,0,0,.2), rgba(0,0,0,.45));
}