:root{
  --paper:#fbf6ea;
  --ink:#2a1a12;
  --muted:#6b5146;
  --line: rgba(42,26,18,.16);
  --shadow: 0 22px 60px rgba(42,26,18,.16);
  --rust:#c24b2a;
  --gold:#caa46a;
  --leaf:#2c7a5a;
  --radius: 20px;
  --container: 1100px;
}

*{ box-sizing:border-box; }
html,body{ height:100%; }
body{
  margin:0;
  font-family: ui-serif, "Iowan Old Style", "Palatino Linotype", Palatino, "Songti SC", "STSong", Georgia, serif;
  color: var(--ink);
  background:
    radial-gradient(1000px 560px at 20% 10%, rgba(194,75,42,.14), transparent 60%),
    radial-gradient(800px 560px at 90% 20%, rgba(44,122,90,.10), transparent 60%),
    radial-gradient(900px 620px at 70% 95%, rgba(202,164,106,.18), transparent 62%),
    linear-gradient(180deg, #fff, var(--paper));
}
a{ color:inherit; text-decoration:none; }
button, input{ font: inherit; }
.shell{
  width: min(var(--container), calc(100% - 44px));
  margin: 0 auto;
}
.small{ font-size: 13px; color: rgba(107,81,70,.88); }

/* Header */
.header{
  position: sticky;
  top:0;
  z-index:5;
  background: rgba(251,246,234,.80);
  backdrop-filter: blur(10px);
  border-bottom: 1px solid var(--line);
}
.header .shell{
  display:flex;
  align-items:center;
  justify-content:space-between;
  padding: 16px 0;
  gap: 16px;
}
.brand{
  display:flex;
  align-items:center;
  gap: 10px;
  font-weight: 900;
  letter-spacing: .2px;
}
.mark{
  width: 36px;
  height: 36px;
  border-radius: 14px;
  display:grid;
  place-items:center;
  background: linear-gradient(135deg, var(--rust), var(--gold));
  color: #fff;
  box-shadow: 0 18px 40px rgba(194,75,42,.18);
}
.name{ font-size: 14px; }
.nav{
  display:flex;
  align-items:center;
  gap: 12px;
  font-size: 13px;
  color: rgba(42,26,18,.74);
}
.nav a{
  padding: 8px 10px;
  border-radius: 999px;
  border: 1px solid transparent;
}
.nav a:hover{ border-color: rgba(194,75,42,.24); background: rgba(194,75,42,.06); }
.nav a.active{
  background: rgba(202,164,106,.18);
  border-color: rgba(202,164,106,.28);
  color: rgba(42,26,18,.92);
}
.tools{ display:flex; gap: 10px; align-items:center; }
.chip{
  height: 38px;
  padding: 0 14px;
  border-radius: 999px;
  border: 1px solid rgba(42,26,18,.18);
  background: rgba(255,255,255,.60);
  cursor:pointer;
  font-weight: 800;
  font-size: 13px;
}
.chip:hover{
  border-color: rgba(194,75,42,.30);
  box-shadow: 0 0 0 4px rgba(194,75,42,.08);
}

/* Hero */
.hero{ padding: 62px 0 22px; }
.hero-top{
  border-radius: var(--radius);
  border: 1px solid rgba(42,26,18,.14);
  background:
    radial-gradient(880px 320px at 15% 10%, rgba(202,164,106,.24), transparent 70%),
    rgba(255,255,255,.55);
  box-shadow: var(--shadow);
  padding: 44px 38px;
  position:relative;
  overflow:hidden;
  text-align:center;
}
.hero-top .cta{ justify-content:center; }
.badge{
  display:inline-flex;
  padding: 8px 12px;
  border-radius: 999px;
  border: 1px dashed rgba(42,26,18,.28);
  background: rgba(251,246,234,.68);
  font-size: 12px;
  font-weight: 900;
  letter-spacing: .3px;
}
.hero-top .badge{
  /* keep this badge readable even if theme defaults to light/white text */
  color: var(--ink);
  /* override theme badge shape (style.css uses clip-path ribbon), so border wraps text correctly */
  -webkit-clip-path: none;
  clip-path: none;
  white-space: nowrap;
}
.hero h1{
  margin: 14px 0 10px;
  font-size: 46px;
  line-height: 1.12;
  /* override theme default (style.css sets all h1-h6 to white) */
  color: var(--ink);
}
.hero p{
  margin: 0 0 18px;
  font-family: ui-sans-serif, system-ui, -apple-system, "PingFang SC","Noto Sans CJK SC","Microsoft YaHei", Segoe UI, Roboto, Helvetica, Arial;
  color: rgba(107,81,70,.92);
  line-height: 1.9;
  font-size: 14px;
  max-width: 56ch;
}
.cta{ display:flex; gap: 12px; flex-wrap:wrap; }
.btn{
  height: 44px;
  padding: 0 18px;
  border-radius: 999px;
  border: 1px solid rgba(42,26,18,.18);
  background: rgba(255,255,255,.55);
  display:inline-flex;
  align-items:center;
  justify-content:center;
  cursor:pointer;
  font-weight: 900;
  font-size: 14px;
}
.btn:hover{ border-color: rgba(194,75,42,.30); }
.btn:not(.ghost){
  border-color: rgba(194,75,42,.28);
  background: linear-gradient(135deg, rgba(194,75,42,.95), rgba(202,164,106,.92));
  color:#fff;
  box-shadow: 0 18px 40px rgba(194,75,42,.20);
}
.btn.ghost{ color: rgba(42,26,18,.90); }

/* Top-up details (left panel) */
.topup-details-content-area .topup-details-content .title{
  color: var(--ink);
}
.topup-details-content-area .topup-details-content-badge-area .badge{
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 8px 12px;
  border-radius: 999px;
  border: 1px dashed rgba(42,26,18,.28);
  background: rgba(251,246,234,.68);
  color: var(--ink);
  font-weight: 900;
  letter-spacing: .2px;
  white-space: nowrap;
  /* override theme badge ribbon */
  -webkit-clip-path: none;
  clip-path: none;
}
.topup-details-content-area .topup-details-content-badge-area .badge i{
  color: rgba(194,75,42,.95);
}

/* 今日上新模块已移除（对应样式删除） */
.tag{
  display:inline-flex;
  padding: 6px 10px;
  border-radius: 999px;
  border: 1px solid rgba(42,26,18,.16);
  background: rgba(255,255,255,.55);
  font-family: ui-sans-serif, system-ui, -apple-system, "PingFang SC","Noto Sans CJK SC","Microsoft YaHei", Segoe UI, Roboto, Helvetica, Arial;
  font-weight: 900;
  font-size: 12px;
}
.desc{
  margin-top: 10px;
  font-weight: 900;
  font-size: 14px;
}
.meta{
  margin-top: 6px;
  font-family: ui-sans-serif, system-ui, -apple-system, "PingFang SC","Noto Sans CJK SC","Microsoft YaHei", Segoe UI, Roboto, Helvetica, Arial;
  color: rgba(107,81,70,.90);
  font-size: 12px;
}
/* Section */

/* Section */
.section{ padding: 40px 0; }
.head{
  display:flex;
  align-items:flex-end;
  justify-content:space-between;
  gap: 18px;
  margin-bottom: 18px;
}
.head.center{ text-align:center; justify-content:center; flex-direction:column; align-items:center; }
.section h2{
  margin:0;
  font-size: 28px;
}
.head p{
  margin: 6px 0 0;
  font-family: ui-sans-serif, system-ui, -apple-system, "PingFang SC","Noto Sans CJK SC","Microsoft YaHei", Segoe UI, Roboto, Helvetica, Arial;
  color: rgba(107,81,70,.92);
  line-height: 1.8;
}
.market{
  display:grid;
  grid-template-columns: 1.15fr .85fr;
  gap: 16px;
  align-items:start;
}
.lead{
  border-radius: 22px;
  border: 1px solid rgba(42,26,18,.14);
  background: rgba(255,255,255,.55);
  box-shadow: 0 18px 50px rgba(42,26,18,.14);
  overflow:hidden;
  min-height: 420px;
  display:flex;
  flex-direction:column;
}
.lead-media{
  height: 260px;
  margin: 14px;
  border-radius: 18px;
  border: 1px solid rgba(42,26,18,.14);
  background: linear-gradient(135deg, rgba(202,164,106,.28), rgba(194,75,42,.18));
}
.lead-body{ padding: 0 16px 16px; }

.stack{
  display:grid;
  gap: 12px;
}
.stack-item{
  display:grid;
  grid-template-columns: 62px 1fr auto;
  gap: 12px;
  align-items:center;
  border-radius: 22px;
  border: 1px solid rgba(42,26,18,.14);
  background: rgba(255,255,255,.55);
  box-shadow: 0 18px 50px rgba(42,26,18,.14);
  padding: 14px;
}
.mini{
  width: 62px;
  height: 62px;
  border-radius: 18px;
  border: 1px solid rgba(42,26,18,.14);
  background: linear-gradient(135deg, rgba(202,164,106,.28), rgba(194,75,42,.18));
}
.stack-main{ min-width:0; }
.stack-main .title{ margin:0; }
.stack-main .small{ white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }

.media{
  height: 178px;
  margin: 14px;
  border-radius: 18px;
  border: 1px solid rgba(42,26,18,.14);
  background: linear-gradient(135deg, rgba(202,164,106,.28), rgba(194,75,42,.18));
}
.media.m1{ background: linear-gradient(135deg, rgba(194,75,42,.22), rgba(251,246,234,.0)); }
.media.m2{ background: linear-gradient(135deg, rgba(202,164,106,.26), rgba(251,246,234,.0)); }
.media.m3{ background: linear-gradient(135deg, rgba(44,122,90,.18), rgba(251,246,234,.0)); }
.media.m4{ background: linear-gradient(135deg, rgba(124,78,50,.18), rgba(251,246,234,.0)); }
.media.m5{ background: linear-gradient(135deg, rgba(80,44,32,.18), rgba(251,246,234,.0)); }
.media.m6{ background: linear-gradient(135deg, rgba(194,75,42,.16), rgba(44,122,90,.10), rgba(251,246,234,.0)); }
.media.m7{ background: linear-gradient(135deg, rgba(202,164,106,.18), rgba(124,78,50,.12), rgba(251,246,234,.0)); }
.media.m8{ background: linear-gradient(135deg, rgba(44,122,90,.16), rgba(202,164,106,.10), rgba(251,246,234,.0)); }
.media.m9{ background: linear-gradient(135deg, rgba(124,78,50,.16), rgba(194,75,42,.10), rgba(251,246,234,.0)); }
.media.m10{ background: linear-gradient(135deg, rgba(80,44,32,.14), rgba(202,164,106,.14), rgba(251,246,234,.0)); }
.m1{ background: linear-gradient(135deg, rgba(194,75,42,.22), rgba(251,246,234,.0)); }
.m2{ background: linear-gradient(135deg, rgba(202,164,106,.26), rgba(251,246,234,.0)); }
.m3{ background: linear-gradient(135deg, rgba(44,122,90,.18), rgba(251,246,234,.0)); }
.m4{ background: linear-gradient(135deg, rgba(124,78,50,.18), rgba(251,246,234,.0)); }
.m5{ background: linear-gradient(135deg, rgba(80,44,32,.18), rgba(251,246,234,.0)); }
.m6{ background: linear-gradient(135deg, rgba(194,75,42,.16), rgba(44,122,90,.10), rgba(251,246,234,.0)); }
.m7{ background: linear-gradient(135deg, rgba(202,164,106,.18), rgba(124,78,50,.12), rgba(251,246,234,.0)); }
.m8{ background: linear-gradient(135deg, rgba(44,122,90,.16), rgba(202,164,106,.10), rgba(251,246,234,.0)); }
.m9{ background: linear-gradient(135deg, rgba(124,78,50,.16), rgba(194,75,42,.10), rgba(251,246,234,.0)); }
.m10{ background: linear-gradient(135deg, rgba(80,44,32,.14), rgba(202,164,106,.14), rgba(251,246,234,.0)); }
/* NOTE: Don't override Bootstrap's `.row` globally (breaks grid on other pages, e.g. top-up details). */
.bento-row{ display:flex; justify-content:space-between; align-items:center; gap: 10px; }
.title{
  font-weight: 900;
  font-size: 14px;
  font-family: ui-sans-serif, system-ui, -apple-system, "PingFang SC","Noto Sans CJK SC","Microsoft YaHei", Segoe UI, Roboto, Helvetica, Arial;
}
.pill{
  font-family: ui-sans-serif, system-ui, -apple-system, "PingFang SC","Noto Sans CJK SC","Microsoft YaHei", Segoe UI, Roboto, Helvetica, Arial;
  font-size: 12px;
  font-weight: 900;
  padding: 6px 10px;
  border-radius: 999px;
  background: rgba(202,164,106,.18);
  border: 1px solid rgba(202,164,106,.26);
}
.price{
  font-weight: 900;
  font-size: 15px;
  color: rgba(194,75,42,.95);
  font-family: ui-sans-serif, system-ui, -apple-system, "PingFang SC","Noto Sans CJK SC","Microsoft YaHei", Segoe UI, Roboto, Helvetica, Arial;
}
.buy{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  height: 38px;
  padding: 0 14px;
  border-radius: 999px;
  border: 1px solid rgba(194,75,42,.30);
  background: rgba(194,75,42,.12);
  color: rgba(194,75,42,.95);
  cursor:pointer;
  font-weight: 900;
  font-family: ui-sans-serif, system-ui, -apple-system, "PingFang SC","Noto Sans CJK SC","Microsoft YaHei", Segoe UI, Roboto, Helvetica, Arial;
}
.buy:hover{ background: rgba(194,75,42,.16); }

/* Hot items: Bento */
.bento-market{
  border-radius: 22px;
  border: 1px solid rgba(42,26,18,.14);
  background: rgba(255,255,255,.42);
  box-shadow: 0 18px 50px rgba(42,26,18,.14);
  padding: 14px;
}
.bento-grid{
  display:grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 12px;
  align-items: stretch;
  grid-auto-rows: 220px;
  grid-auto-flow: dense;
}
.bento-tile{
  border-radius: 22px;
  border: 1px solid rgba(42,26,18,.14);
  background: rgba(255,255,255,.55);
  box-shadow: 0 18px 50px rgba(42,26,18,.12);
  overflow:hidden;
  display:flex;
  flex-direction:column;
  min-height: 220px;
  height: 100%;
}
.bento-tile.big{ grid-column: span 2; grid-row: span 2; min-height: 460px; }
.bento-tile.wide{ grid-column: span 2; }
.bento-tile.tall{ grid-row: span 2; min-height: 460px; }
.bmedia{
  position: relative;
  display: block;
  flex: 1 1 auto;
  /* keep enough room for title + "buy" button even in smallest tiles */
  min-height: 110px;
  margin: 12px;
  border-radius: 18px;
  border: 1px solid rgba(42,26,18,.14);
  background: linear-gradient(135deg, rgba(202,164,106,.28), rgba(194,75,42,.18));
}
.buy.buy-float{
  position: absolute;
  right: 12px;
  bottom: 12px;
  height: 34px;
  padding: 0 14px;
  border-radius: 999px;
  border: 1px solid rgba(42,26,18,.18);
  background: rgba(255,255,255,.78);
  color: rgba(42,26,18,.92);
  box-shadow: 0 18px 40px rgba(42,26,18,.18);
  backdrop-filter: blur(10px);
}
.bbody{
  position: relative;
  padding: 0 16px 62px;
}
.bbody .title{ margin: 0; }

/* Buy button pinned to bottom-right of the tile body (under the title area) */
.buy.buy-card{
  position: absolute;
  right: 16px;
  bottom: 16px;
}

/* Services (Our Features) */
.services{
  border-top: 1px solid rgba(42,26,18,.14);
  border-bottom: 1px solid rgba(42,26,18,.14);
  background:
    radial-gradient(900px 520px at 50% 20%, rgba(44,122,90,.10), transparent 62%),
    rgba(255,255,255,.30);
}
.svc-top{
  display:inline-flex;
  align-items:center;
  padding: 8px 12px;
  border-radius: 999px;
  border: 1px dashed rgba(42,26,18,.28);
  background: rgba(251,246,234,.68);
  font-family: ui-sans-serif, system-ui, -apple-system, "PingFang SC","Noto Sans CJK SC","Microsoft YaHei", Segoe UI, Roboto, Helvetica, Arial;
  font-weight: 900;
  font-size: 12px;
  letter-spacing: .6px;
}
.svc-title{
  font-size: 36px;
  line-height: 1.1;
  letter-spacing: .6px;
  color: rgba(44,122,90,.92);
}
.svc-list{
  margin-top: 16px;
  border-radius: 22px;
  border: 1px solid rgba(42,26,18,.14);
  background: rgba(251,246,234,.55);
  box-shadow: 0 18px 50px rgba(42,26,18,.12);
  overflow:hidden;
}
.svc-row{
  display:grid;
  grid-template-columns: 64px 1fr;
  gap: 14px;
  align-items:start;
  padding: 18px 18px;
  border-top: 1px solid rgba(42,26,18,.14);
  position:relative;
}
.svc-row:first-child{ border-top: 0; }
.svc-row::after{
  content:"";
  position:absolute;
  left: 0;
  top: 0;
  bottom: 0;
  width: 5px;
  background: linear-gradient(180deg, rgba(194,75,42,.35), rgba(44,122,90,.25));
  opacity:.55;
}
.svc-main h3{
  margin: 0 0 8px;
  font-size: 16px;
  /* override theme default (style.css sets all h1-h6 to white) */
  color: var(--ink);
}
.svc-main p{
  margin: 0;
  font-family: ui-sans-serif, system-ui, -apple-system, "PingFang SC","Noto Sans CJK SC","Microsoft YaHei", Segoe UI, Roboto, Helvetica, Arial;
  color: rgba(107,81,70,.92);
  line-height: 1.85;
  font-size: 13px;
}
.svc-ico{
  width: 54px;
  height: 54px;
  border-radius: 18px;
  display:grid;
  place-items:center;
  background: rgba(44,122,90,.12);
  border: 1px solid rgba(44,122,90,.22);
  font-size: 18px;
  font-family: ui-sans-serif, system-ui, -apple-system, "PingFang SC","Noto Sans CJK SC","Microsoft YaHei", Segoe UI, Roboto, Helvetica, Arial;
}
/* old grid style replaced by list style */
/* Why (timeline) removed: 02 使用 feature 块 */

/* Footer */
.footer{ padding: 28px 0 18px; }
.foot{
  border-top: 1px solid rgba(42,26,18,.14);
  padding-top: 22px;
  display:flex;
  justify-content:space-between;
  align-items:flex-start;
  gap: 18px;
}
.cols{ display:flex; gap: 28px; }
.col{ display:grid; gap: 10px; font-size: 13px; color: rgba(107,81,70,.92); }
.col a:hover{ color: rgba(194,75,42,.95); }
.ftitle{
  font-weight: 900;
  font-family: ui-sans-serif, system-ui, -apple-system, "PingFang SC","Noto Sans CJK SC","Microsoft YaHei", Segoe UI, Roboto, Helvetica, Arial;
}
.copy{
  margin-top: 16px;
  text-align:center;
  color: rgba(107,81,70,.78);
  font-size: 12px;
  font-family: ui-sans-serif, system-ui, -apple-system, "PingFang SC","Noto Sans CJK SC","Microsoft YaHei", Segoe UI, Roboto, Helvetica, Arial;
}

/* Bento pagination (make numbers/arrows readable on light background) */
.bento-pagination .pagination .page-link{
  color: rgba(42,26,18,.92);
}
.bento-pagination .pagination .page-item.disabled .page-link{
  color: rgba(42,26,18,.35);
}
.bento-pagination .pagination .page-item:not(.active) .page-link:hover{
  color: rgba(42,26,18,.92);
}

@media (max-width: 1060px){
  .market{ grid-template-columns: 1fr; }
  .bento-grid{ grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .bento-tile.big{ grid-column: span 2; grid-row: auto; min-height: 320px; }
  .bento-tile.tall{ grid-row: auto; min-height: 320px; }
  .bento-tile.wide{ grid-column: span 2; }
}
@media (max-width: 860px){
  .nav{ display:none; }
  .foot{ flex-direction:column; }
}
@media (max-width: 520px){
  .cols{ flex-direction:column; gap: 18px; }
  .bento-grid{ grid-template-columns: 1fr; }
  .bento-tile.big, .bento-tile.wide{ grid-column: auto; }
  .bento-grid{ grid-auto-rows: 240px; }
  .bmedia{ min-height: 160px; }
}