:root{
  --bg:#f8e6e6;
  --card:#ffffffcc;
  --line:#e7b4b4;
  --text:#6b3a3a;
  --muted:#9a6b6b;
  --primary:#c96b6b;
  --primary2:#b85a5a;
}

*{box-sizing:border-box;}
html,body{margin:0;padding:0;font-family:-apple-system,BlinkMacSystemFont,"PingFang SC","Microsoft YaHei",Arial;color:var(--text);background:transparent;}

/* Global Image Fix */
img {
  max-width: 100%;
  height: auto;
  display: block;
}

.container{max-width:420px;margin:0 auto;min-height:100vh;padding:16px 16px 88px;position:relative;z-index:1;}
.hero{
  border-radius:18px;
  padding:18px;
  background:linear-gradient(180deg,#f7d7d7,#f8e6e6);
  border:1px solid #f0c7c7;
  position:relative;
  overflow:hidden;
}
.hero h1{margin:0;font-size:28px;letter-spacing:2px;}
.hero p{margin:10px 0 0;color:var(--muted);}

.card{
  margin-top:14px;
  border:1px solid var(--line);
  border-radius:18px;
  background:var(--card);
  padding:16px;
  box-shadow:0 10px 30px rgba(156,85,85,.10);
}

.field{margin:12px 0;}
.label{font-size:14px;color:var(--muted);margin-bottom:6px;}
.input{
  width:100%;
  padding:12px 12px;
  border-radius:12px;
  border:1px solid #e9c6c6;
  outline:none;
  background:#fff;
  font-size:15px;
}
.row{display:flex;gap:10px;}
.row > *{flex:1;}

.seg{
  display:flex;
  gap:10px;
}
.seg button{
  flex:1;
  padding:12px 0;
  border-radius:12px;
  border:1px solid #e9c6c6;
  background:#fff;
  color:var(--muted);
  font-size:15px;
}
.seg button.active{
  border-color:var(--primary);
  color:var(--primary2);
  background:#fff5f5;
}

.btn{
  width:100%;
  margin-top:14px;
  padding:14px 0;
  border:none;
  border-radius:14px;
  background:linear-gradient(180deg,var(--primary),var(--primary2));
  color:#fff;
  font-size:17px;
  letter-spacing:1px;
}

.hint{font-size:12px;color:var(--muted);margin-top:10px;line-height:1.6;}

.tabbar{
  position:fixed;
  left:0;right:0;bottom:0;
  background:#fff;
  border-top:1px solid #f0d3d3;
  height:70px;
  display:flex;
  justify-content:center;
  z-index: 9999;
}
.tabbar .wrap{
  width:420px;
  display:flex;
}
.tab{
  flex:1;
  text-decoration:none;
  color:#a77777;
  display:flex;
  flex-direction:column;
  align-items:center;
  justify-content:center;
  gap:4px;
  font-size:12px;
}
.tab .icon{font-size:20px;line-height:20px;}
.tab.active{color:var(--primary2);font-weight:600;}

.page-title{margin:6px 0 0;font-size:18px;}
.small{font-size:12px;color:var(--muted);}
.box{
  border:1px dashed #e7b4b4;
  border-radius:14px;
  padding:14px;
  background:#fff7f7;
  color:#8b5555;
}

/* Page Background */
.page-bg {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  z-index: -1;
  background-color: var(--bg);
  background-size: cover;
  background-position: center;
  background-repeat: no-repeat;
  pointer-events: none;
}

/* Carousel */
.carousel-wrap {
  margin-top: 14px;
  overflow: hidden;
  border-radius: 18px;
  position: relative;
  box-shadow: 0 4px 12px rgba(0,0,0,0.08);
  aspect-ratio: 2/1; /* Enforce 2:1 aspect ratio */
  background: #f0f0f0;
}
.carousel-track {
  display: flex;
  transition: transform 0.5s ease;
  height: 100%;
}
.carousel-item {
  min-width: 100%;
  flex-shrink: 0;
  height: 100%;
}
.carousel-item img {
  width: 100%;
  height: 100%;
  display: block;
  object-fit: cover; /* Crop to fit */
}
.carousel-dots {
  position: absolute;
  bottom: 10px;
  left: 0;
  width: 100%;
  display: flex;
  justify-content: center;
  gap: 6px;
}
.carousel-dot {
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: rgba(255,255,255,0.5);
  transition: all 0.3s;
}
.carousel-dot.active {
  background: #fff;
  width: 14px;
  border-radius: 3px;
}

/* Video Section */
.video-section {
  margin-top: 14px;
  border-radius: 18px;
  overflow: hidden;
  background: #000;
  position: relative;
  aspect-ratio: 16/9; /* Enforce 16:9 */
}
.video-section video {
  width: 100%;
  height: 100%;
  object-fit: contain; /* Show full video */
  display: block;
}

/* Rich Content */
.rich-section {
  margin-top: 14px;
}
.rich-section .rich-img {
  width: 100%;
  height: auto;
  max-height: 400px; /* Limit max height */
  object-fit: cover;
  border-radius: 14px;
  margin-bottom: 10px;
  display: block;
}
.rich-section h3 {
  margin: 0 0 8px;
  font-size: 18px;
  color: var(--text);
}
.rich-section .content {
  font-size: 14px;
  line-height: 1.6;
  color: #555;
  white-space: pre-wrap;
  word-wrap: break-word; /* Ensure long words break */
  overflow-wrap: break-word;
}
.rich-section .content img {
    max-width: 100%;
    height: auto;
    border-radius: 8px;
}

/* Enhanced Hero */
.hero.has-bg {
  color: #fff;
  text-shadow: 0 1px 3px rgba(0,0,0,0.3);
  background-size: cover;
  background-position: center;
}
.hero.has-bg p {
  color: rgba(255,255,255,0.9);
}