body{
  margin:0;
  font-family: Inter, system-ui, -apple-system, Segoe UI, Roboto, 'Noto Sans SC', Arial;
  color:var(--text);
  background:
    radial-gradient(1200px 600px at 20% -10%, rgba(61,214,255,0.30), transparent 60%),
    radial-gradient(900px 520px at 90% 0%, rgba(255,77,109,0.18), transparent 65%),
    linear-gradient(180deg,#f7f9ff 0%, #fbfdff 100%);
  -webkit-font-smoothing:antialiased;
  -moz-osx-font-smoothing:grayscale;
}
header{
  position:sticky;top:0;z-index:50;
  backdrop-filter:saturate(160%) blur(10px);
  background:linear-gradient(135deg, rgba(11,102,255,0.92), rgba(0,65,179,0.92));
  color:#fff;
  box-shadow:0 8px 22px rgba(2,6,23,0.12);
  width:100%;
}
footer{
  margin-top:40px;
  padding:20px 0;
  text-align:center;
  font-size:14px;
  color:var(--muted);
}
.wrap{max-width:1200px;margin:0 auto;padding:0 16px}
.topbar{display:flex;align-items:center;justify-content:space-between;gap:12px;padding:14px 0}
.brand{display:flex;align-items:center;gap:12px;min-width:240px}
.logo{
  width:44px;height:44px;border-radius:12px;
  display:flex;align-items:center;justify-content:center;
  background:linear-gradient(135deg, rgba(255,255,255,0.75), rgba(255,255,255,0.12));
  color:#083b9a;font-weight:900;letter-spacing:.5px;
  box-shadow:inset 0 0 0 1px rgba(255,255,255,0.18);
}
.brand-title{font-weight:900;line-height:1.05}
.lang{
  display:flex;align-items:center;gap:8px;
  background:rgba(255,255,255,0.16);
  border:1px solid rgba(255,255,255,0.24);
  border-radius:999px;
  padding:6px 10px;
}
.lang select{background:transparent;border:0;outline:0;color:#fff;font-weight:900;cursor:pointer}
.lang select option{color:#000}
.container {
    max-width: 1200px;
    margin: auto;
    padding: 16px;
}
.section-title {
    font-size: 22px;
    font-weight: bold;
    margin: 20px 0 10px;
}
.card-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(260px, 1fr));
    gap: 16px;
}
.card {
    background: #fff;
    border-radius: 12px;
    overflow: hidden;
    box-shadow: 0 2px 6px rgba(0,0,0,0.1);
    transition: 0.2s;
    display: flex;
    flex-direction: column;
}
.card:hover {
    transform: translateY(-4px);
    box-shadow: 0 4px 12px rgba(0,0,0,0.2);
}
.card img {
    width: 100%;
    height: 160px;
    object-fit: cover;
}
.card-body {
    padding: 14px;
    display: flex;
    flex-direction: column;
    flex: 1;              /* 撑满整张卡片 */
}
.card-title {
    font-size: 18px;
    font-weight: bold;
    margin-bottom: 8px;
}
.price {
    font-size: 20px;
    font-weight: bold;
    color: #e60023;
    margin: 10px 0;
    margin-top: auto;     /* 👈 核心：把价格推到最下面 */
}
.btn {
    display: block;
    width: 90%;
    padding: 12px;
    text-align: center;
    background: #0055ff;
    color: #fff;
    border-radius: 8px;
    text-decoration: none;
    font-size: 16px;
    margin-top: 10px;
}
.btn:hover {
    background: #0044cc;
}
.mbar{
  position:fixed;left:10px;right:10px;bottom:10px;
  display:flex;align-items:center;gap:10px;z-index:60
}
.mbar .dock{
  flex:1;display:flex;align-items:center;justify-content:space-around;
  padding:12px 10px;
  border-radius:22px;
  background:linear-gradient(180deg, rgba(255,255,255,0.96), rgba(248,250,255,0.92));
  border:1px solid rgba(233,239,255,0.9);
  box-shadow:0 24px 70px rgba(2,6,23,0.18);
  backdrop-filter: blur(12px)
}
.mbar .dock a{
  text-decoration:none;
  color:var(--muted);
  font-weight:1000;
  font-size:15px;
  display:flex;flex-direction:column;align-items:center;gap:6px;
  min-width:64px;
  padding:8px 6px;
  border-radius:14px;
  transition:all .18s ease
}
.mbar .dock a span{font-size:12px}
.mbar .dock a.active{
  color:var(--primary);
  background:rgba(11,102,255,0.10);
  box-shadow:inset 0 0 0 1px rgba(11,102,255,0.18)
}
.mbar .dock a:hover{
  background:rgba(11,102,255,0.08)
}
@media (max-width: 600px) {
    .section-title { font-size: 20px; }
    .card img { height: 140px; }
    .brand{min-width:auto}
    .brand-title{font-size:14px}
    .hero-title{font-size:20px}
    
    .mbar{display:flex}
}