:root {

  --primary: #B91C1C;

  --primary-dark: #7F1D1D;

  --accent: #0F4C75;

  --bg: #F8F6F3;

  --card: #fff;

  --text: #1C1410;

  --text-muted: #78716C;

  --border: rgba(28, 20, 16, 0.08);

  --radius: 16px;

  --shadow: 0 4px 24px rgba(28, 20, 16, 0.08);

  --ease: cubic-bezier(0.22, 1, 0.36, 1);

  --max: 1080px;

  --page-pad-x: 20px;

  --section-y: 48px;

}



* { box-sizing: border-box; margin: 0; padding: 0; }



html { scroll-behavior: smooth; }



body {

  font-family: "Noto Sans SC", "PingFang SC", "Microsoft YaHei", sans-serif;

  background: var(--bg);

  color: var(--text);

  line-height: 1.65;

  font-size: 15px;

  -webkit-font-smoothing: antialiased;

  min-height: 100vh;

  display: flex;

  flex-direction: column;

}

.portal-main { flex: 1; width: 100%; }

a { color: var(--accent); text-decoration: none; }

a:hover { text-decoration: underline; }



/* —— Header —— */

.portal-header {

  background: #fff;

  border-bottom: 1px solid var(--border);

  position: sticky;

  top: 0;

  z-index: 100;

  flex-shrink: 0;

}



.portal-header-inner {

  max-width: var(--max);

  margin: 0 auto;

  padding: 14px var(--page-pad-x);

  display: flex;

  flex-wrap: wrap;

  align-items: center;

  justify-content: space-between;

  gap: 14px;

}



.portal-brand { text-decoration: none; color: inherit; flex-shrink: 0; }

.portal-brand:hover { text-decoration: none; }

.portal-brand-title { display: block; font-size: 19px; font-weight: 700; color: var(--primary); letter-spacing: 0.02em; }

.portal-brand-sub { display: block; font-size: 11px; color: var(--text-muted); margin-top: 4px; line-height: 1.4; max-width: 320px; }



.portal-nav {

  display: flex;

  flex-wrap: wrap;

  justify-content: flex-end;

  gap: 4px 12px;

  max-width: 100%;

}

.portal-nav-link {

  font-size: 13px;

  color: var(--text);

  text-decoration: none;

  padding: 6px 2px;

  border-bottom: 2px solid transparent;

  white-space: nowrap;

}

.portal-nav-link:hover { color: var(--primary); text-decoration: none; }

.portal-nav-link.active { color: var(--primary); border-bottom-color: var(--primary); font-weight: 600; }



/* —— Footer —— */

.portal-footer {

  margin-top: auto;

  padding: 40px var(--page-pad-x) 36px;

  background: #fff;

  border-top: 1px solid var(--border);

  text-align: center;

  font-size: 13px;

  color: var(--text-muted);

  flex-shrink: 0;

}



.portal-footer-inner {

  max-width: 720px;

  margin: 0 auto;

  display: flex;

  flex-direction: column;

  align-items: center;

  gap: 10px;

}



.portal-footer-brand {

  font-size: 14px;

  color: var(--text);

  line-height: 1.5;

}

.portal-footer-brand strong { font-weight: 700; }

.portal-footer-brand span::before { content: '·'; margin: 0 8px; color: var(--text-muted); font-weight: 400; }



.portal-footer-contact a,

.portal-footer-beian a { color: var(--text-muted); }

.portal-footer-contact a:hover,

.portal-footer-beian a:hover { color: var(--accent); }



.portal-footer-address { font-size: 12px; }



.portal-footer-beian {

  font-size: 12px;

  line-height: 1.6;

}



.portal-footer-links {

  display: flex;

  flex-wrap: wrap;

  justify-content: center;

  gap: 8px 20px;

  margin-top: 8px;

  padding-top: 16px;

  border-top: 1px solid var(--border);

  width: 100%;

}

.portal-footer-links a {

  font-size: 13px;

  color: var(--text);

  font-weight: 500;

}

.portal-footer-links a:hover { color: var(--primary); text-decoration: none; }



.portal-footer-note {

  width: 100%;

  max-width: 560px;

  margin: 16px auto 0;

  padding: 14px 16px;

  text-align: center;

  font-size: 13px;

  line-height: 1.75;

  color: var(--text-muted);

  background: var(--bg);

  border-radius: 12px;

  border: 1px solid var(--border);

}



/* —— Page shell —— */

.page-wrap {

  max-width: var(--max);

  margin: 0 auto;

  padding: 36px var(--page-pad-x) var(--section-y);

  width: 100%;

  flex: 1;

}



.page-title {

  font-size: clamp(22px, 4vw, 28px);

  font-weight: 700;

  margin-bottom: 10px;

  letter-spacing: 0.02em;

}

.page-desc {

  font-size: 14px;

  color: var(--text-muted);

  margin-bottom: 28px;

  line-height: 1.75;

  max-width: 640px;

}



.page-wrap > .page-title,

.page-wrap > .page-desc { text-align: center; margin-left: auto; margin-right: auto; }



/* —— Home —— */

.home-hero {

  background: linear-gradient(145deg, #7F1D1D 0%, #B91C1C 42%, #0F4C75 100%);

  color: #fff;

  padding: 56px var(--page-pad-x) 64px;

  text-align: center;

}

.home-hero h1 {

  font-size: clamp(28px, 5vw, 42px);

  font-weight: 800;

  margin-bottom: 14px;

  letter-spacing: 0.03em;

}

.home-hero .lead {

  max-width: 620px;

  margin: 0 auto 10px;

  font-size: 15px;

  line-height: 1.8;

  opacity: 0.96;

}

.home-hero .partner {

  font-size: 13px;

  opacity: 0.78;

  margin-top: 10px;

  line-height: 1.6;

}

.hero-actions {

  display: flex;

  flex-wrap: wrap;

  gap: 10px;

  justify-content: center;

  margin-top: 28px;

}

.hero-actions .btn-outline {

  background: rgba(255, 255, 255, 0.14);

  color: #fff;

  border-color: rgba(255, 255, 255, 0.4);

}

.hero-actions .btn-outline:hover { background: rgba(255, 255, 255, 0.22); }



.section {

  max-width: var(--max);

  margin: 0 auto;

  padding: var(--section-y) var(--page-pad-x);

}

.section-head {

  text-align: center;

  margin-bottom: 32px;

}

.section-head h2 {

  font-size: clamp(20px, 3.5vw, 26px);

  margin-bottom: 10px;

  font-weight: 700;

}

.section-head p {

  font-size: 14px;

  color: var(--text-muted);

  max-width: 580px;

  margin: 0 auto;

  line-height: 1.75;

}

.bg-alt {

  background: #fff;

  border-top: 1px solid var(--border);

  border-bottom: 1px solid var(--border);

}



.flow-steps {

  display: grid;

  grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));

  gap: 16px;

}

.flow-step {

  background: #fff;

  border-radius: var(--radius);

  padding: 22px 16px;

  text-align: center;

  border: 1px solid rgba(28, 20, 16, 0.06);

  box-shadow: 0 2px 12px rgba(28, 20, 16, 0.04);

}

.flow-step strong { display: block; font-size: 15px; margin: 10px 0 6px; color: var(--text); }

.flow-step span { font-size: 12px; color: var(--text-muted); line-height: 1.55; }



.entry-cards {

  display: grid;

  grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));

  gap: 20px;

}

.entry-card {

  background: #fff;

  border-radius: var(--radius);

  overflow: hidden;

  box-shadow: var(--shadow);

  border: 1px solid rgba(28, 20, 16, 0.06);

  transition: transform 0.25s var(--ease), box-shadow 0.25s var(--ease);

}

.entry-card:hover {

  transform: translateY(-4px);

  box-shadow: 0 12px 36px rgba(28, 20, 16, 0.1);

  text-decoration: none;

}

.entry-card .cover {

  height: 128px;

  background-size: cover;

  background-position: center;

  background-color: #F3EDE4;

}

.entry-card .body { padding: 20px; }

.entry-card h3 { font-size: 17px; color: var(--primary); margin-bottom: 8px; font-weight: 700; }

.entry-card p { font-size: 13px; color: var(--text-muted); line-height: 1.65; }



.section-more { text-align: center; margin-top: 24px; }



/* —— Buttons —— */

.btn {

  display: inline-flex;

  align-items: center;

  justify-content: center;

  padding: 10px 22px;

  border-radius: 999px;

  font-size: 14px;

  font-weight: 600;

  border: none;

  cursor: pointer;

  text-decoration: none;

  transition: transform 0.2s var(--ease), box-shadow 0.2s;

}

.btn:hover { text-decoration: none; transform: translateY(-1px); }

.btn-primary { background: linear-gradient(135deg, var(--primary), var(--primary-dark)); color: #fff; box-shadow: 0 4px 14px rgba(185, 28, 28, 0.25); }

.btn-outline { background: #fff; color: var(--primary); border: 1px solid rgba(185, 28, 28, 0.35); }

.btn-sm { padding: 8px 14px; font-size: 13px; }

.btn-block { width: 100%; }



/* —— Shops —— */

.shop-grid {

  display: grid;

  grid-template-columns: repeat(auto-fill, minmax(300px, 1fr));

  gap: 22px;

}



.shop-card {

  background: var(--card);

  border-radius: var(--radius);

  overflow: hidden;

  box-shadow: var(--shadow);

  border: 1px solid rgba(28, 20, 16, 0.06);

  display: flex;

  flex-direction: column;

  height: 100%;

}



.shop-card-cover {

  display: block;

  height: 168px;

  background-size: cover;

  background-position: center;

  background-color: #F3EDE4;

}



.shop-card-body { padding: 18px 20px 20px; flex: 1; display: flex; flex-direction: column; }

.shop-card-tags { display: flex; gap: 6px; flex-wrap: wrap; margin-bottom: 8px; }

.tag-join { font-size: 10px; font-weight: 700; padding: 2px 8px; border-radius: 999px; background: rgba(15, 76, 117, 0.12); color: var(--accent); }

.tag-cert { font-size: 10px; font-weight: 600; padding: 2px 8px; border-radius: 999px; background: rgba(185, 28, 28, 0.1); color: var(--primary); }

.shop-card-body h3 { font-size: 17px; margin-bottom: 6px; line-height: 1.35; }

.shop-card-body h3 a { color: inherit; text-decoration: none; }

.shop-card-body h3 a:hover { color: var(--primary); }

.shop-card-meta { font-size: 12px; color: var(--text-muted); margin-bottom: 4px; line-height: 1.5; }

.shop-card-deals { font-size: 13px; margin: 10px 0 14px; }

.shop-card-actions { display: flex; gap: 10px; margin-top: auto; }



.filter-bar {

  display: flex;

  flex-wrap: wrap;

  gap: 10px;

  margin-bottom: 20px;

  align-items: center;

}

.filter-bar select,

.filter-bar input {

  padding: 9px 14px;

  border-radius: 10px;

  border: 1px solid rgba(28, 20, 16, 0.12);

  font-size: 14px;

  background: #fff;

  min-width: 160px;

}



.deal-list { display: flex; flex-direction: column; gap: 14px; }

.deal-row {

  display: flex;

  gap: 16px;

  padding: 16px;

  background: var(--card);

  border-radius: var(--radius);

  border: 1px solid rgba(28, 20, 16, 0.06);

  align-items: center;

  box-shadow: 0 2px 10px rgba(28, 20, 16, 0.04);

}

.deal-row-cover {

  width: 92px;

  height: 92px;

  border-radius: 12px;

  flex-shrink: 0;

  background-size: cover;

  background-position: center;

  background-color: #F3EDE4;

}

.deal-row-body { flex: 1; min-width: 0; }

.deal-row-body h4 { font-size: 16px; margin-bottom: 4px; }

.deal-row-price { font-size: 18px; font-weight: 700; color: var(--primary); margin-top: 6px; }

.deal-row-price del { font-size: 13px; color: var(--text-muted); font-weight: 400; margin-left: 8px; }



/* —— Auth —— */

.auth-card {

  background: var(--card);

  border-radius: var(--radius);

  padding: 32px 28px;

  box-shadow: var(--shadow);

  max-width: 440px;

  margin: 0 auto;

  border: 1px solid rgba(28, 20, 16, 0.06);

}

.auth-card label { display: block; font-size: 13px; margin: 14px 0 6px; font-weight: 500; }

.auth-card input[type="text"],

.auth-card input[type="tel"],

.auth-card input[type="password"] {

  width: 100%;

  padding: 11px 14px;

  border-radius: 10px;

  border: 1px solid rgba(28, 20, 16, 0.12);

  font-size: 14px;

}

.auth-agree {

  display: flex;

  align-items: flex-start;

  gap: 8px;

  margin: 18px 0;

  font-size: 13px;

  line-height: 1.55;

  color: var(--text-muted);

}

.auth-agree input { margin-top: 3px; flex-shrink: 0; }

.auth-hint { font-size: 12px; color: var(--text-muted); text-align: center; margin-top: 16px; }



.checkout-card,

.success-card {

  background: var(--card);

  border-radius: var(--radius);

  padding: 28px;

  box-shadow: var(--shadow);

  max-width: 520px;

  margin: 0 auto;

  border: 1px solid rgba(28, 20, 16, 0.06);

}



.form-line {

  display: flex;

  justify-content: space-between;

  gap: 16px;

  padding: 12px 0;

  border-bottom: 1px solid rgba(28, 20, 16, 0.06);

  font-size: 14px;

}

.form-line:last-child { border-bottom: none; }



.coupon-code {

  font-family: ui-monospace, monospace;

  font-size: 28px;

  letter-spacing: 0.2em;

  text-align: center;

  padding: 16px;

  margin: 16px 0;

  background: rgba(15, 76, 117, 0.06);

  border-radius: 12px;

  color: var(--accent);

}



.breadcrumb { font-size: 13px; color: var(--text-muted); margin-bottom: 22px; }

.breadcrumb a { color: var(--accent); }



.shop-card-row { flex-direction: row; max-width: 100%; }



.legal-doc {

  background: #fff;

  padding: 32px 28px;

  border-radius: var(--radius);

  max-width: 720px;

  margin: 0 auto;

  font-size: 14px;

  line-height: 1.85;

  border: 1px solid var(--border);

  box-shadow: 0 2px 12px rgba(28, 20, 16, 0.04);

}

.legal-doc h2 { font-size: 16px; margin: 22px 0 8px; color: var(--text); }



@media (max-width: 768px) {

  .portal-header-inner { padding: 12px var(--page-pad-x); }

  .portal-nav { justify-content: flex-start; width: 100%; }

  .portal-brand-sub { max-width: none; }

  --section-y: 40px;

}



@media (max-width: 640px) {

  .deal-row { flex-direction: column; align-items: flex-start; }

  .shop-card-row { flex-direction: column !important; }

  .shop-card-row .shop-card-cover { width: 100% !important; min-height: 180px !important; }

  .portal-footer-note { font-size: 12px; padding: 12px 14px; }

  .hero-actions .btn { width: 100%; max-width: 280px; }

}