:root{
  --bg:#EBEBEB; /* paint_2:0980 */
  --card:#FFFFFF; /* paint_2:0165 */
  --text:#14151A; /* 中性色10 paint_2:0150 */
  --muted:#797A80; /* 中性色50 paint_2:0453 */
  --primary:#36CFD9; /* paint_2:0267 */
  --ov:linear-gradient(180deg, rgba(26,26,26,0) 0%, #1A1A1A 100%); /* paint_2:0282 */
}
*{box-sizing:border-box}
html,body{margin:0;padding:0;height:100%}
body{font-family:MiSans,Inter,system-ui,-apple-system,'Segoe UI',Roboto,'Microsoft YaHei',Arial;background:var(--bg);color:var(--text)}

.phone{width:min(100vw,393px);min-height:100dvh;margin:0 auto;position:relative;background:var(--bg)}
.status{height:54px}
.status img{display:block;width:100%;height:100%;object-fit:contain}
/* 让状态栏作为头图内的顶部覆盖层，且不拦截点击 */
.hero .status{position:absolute;top:0;left:0;right:0;height:54px;z-index:5;pointer-events:none}
.hero .status img{mix-blend-mode:darken}

/* 头部大图 */
.hero{position:relative;height:262px;overflow:hidden;z-index:0} /* 使整个头图处于较低层，便于内容卡片覆盖 */
.hero::before{content:"";position:absolute;inset:0;background:url('images/Rectangle 916.png') center/cover no-repeat;z-index:0}
.hero::after{
  content:"";
  position:absolute;
  left:0;right:0;bottom:-1px; /* 轻微覆盖边缘避免接缝 */
  height:32%; /* 减少可视厚度 */
  background:linear-gradient(180deg,
    rgba(235,235,235,0) 0%,        /* 顶部完全透明，贴合图片 */
    rgba(235,235,235,0.10) 20%,    /* 轻微提亮，过渡更自然 */
    rgba(235,235,235,0.35) 55%,
    rgba(235,235,235,0.75) 85%,
    rgba(235,235,235,1) 100%       /* 与 var(--bg) #EBEBEB 融合 */
  );
  backdrop-filter:blur(8px);
  -webkit-backdrop-filter:blur(8px);
  pointer-events:none; /* 不阻挡按钮点击 */
  z-index:1; /* 置于内容之下，由下行抬高内容 */
}
/* 返回按钮保持最上层以便可点击 */
.hero .back{z-index:4}

/* 叠在头图上的白色信息卡（1:1 对齐 DSL 组 2） */
.hero-panel{
  position:relative;
  width:361px;
  margin:-108px auto 0; /* 262-154 = 108，使卡片顶部与设计对齐 */
  background:#fff;
  border-radius:8px; /* 与 DSL 矢量轮廓近似 */
  box-shadow:0 0 12px rgba(26,26,26,0.04); /* effect_2:2566 */
  padding:12px 16px 16px;
  border:1px solid #EBEBEB;
  z-index:2; /* 保证卡片永远覆盖头图及其模糊层 */
}
.hero-panel .tabs{display:flex;gap:4px;align-items:center;margin:0 0 12px;padding:4px;border-radius:12px;background:#F5F5F5}
.hero-panel .tabs .tab{flex:1;display:block;text-align:center;height:32px;line-height:32px;font-weight:600;font-size:14px;color:var(--muted);background:transparent;border:0;border-radius:8px;cursor:pointer}
.hero-panel .tabs .tab.active{background:#fff;color:var(--primary);box-shadow:0 1px 3px rgba(0,0,0,.08)}
.hero-panel .loc-row{display:flex;justify-content:space-between;align-items:center;margin:8px 0}
.hero-panel .loc-row .loc-box{display:flex;align-items:center;gap:6px}
  .hero-panel .loc-row .loc{font-size:16px;font-weight:600;color:var(--text);line-height:1.5}
.hero-panel .loc-row .loc-icon{border:0;background:transparent;display:inline-flex;align-items:center;justify-content:center;padding:0;cursor:pointer}
.hero-panel .loc-row .loc-icon img{display:block;height:16px;width:auto}
.hero-panel .loc-row .loc-icon img{transition:transform .16s ease}
.hero-panel .loc-row .loc-icon.active img{transform:rotate(180deg)}

/* 城市下拉弹层 */
.hero-panel .loc-pop{margin:8px 0 0;background:#fff;border:1px solid #EBEBEB;border-radius:8px;box-shadow:0 6px 18px rgba(0,0,0,.08);overflow:hidden;transform-origin:top;transition:transform .16s ease,opacity .16s ease;opacity:0;transform:scaleY(0.9)}
.hero-panel .loc-pop.open{opacity:1;transform:scaleY(1)}
.hero-panel .loc-pop[hidden]{display:none}
.hero-panel .loc-pop button{display:block;width:100%;text-align:left;padding:10px 12px;border:0;background:#fff;color:var(--text);font-size:14px;cursor:pointer}
.hero-panel .loc-pop button:hover{background:#F5F5F5}
.hero-panel .loc-row .near{border:0;background:transparent;color:var(--text);font-size:12px;cursor:pointer}
.hero-panel .divider{height:1px;background:#EBEBEB;margin:12px 0}
.hero-panel .panel[hidden]{display:none}
.hero-panel .date-row{position:relative;display:grid;grid-template-columns:repeat(3,1fr);gap:12px;align-items:end}
.hero-panel .date-row .sub{font-size:11px;color:var(--muted)}
.hero-panel .date-row .main{font-size:16px;font-weight:600;color:var(--text)}
.hero-panel .date-row .main .muted{margin-left:8px;color:var(--muted);font-weight:600}
.hero-panel .date-row .col{position:relative}
.hero-panel .date-row .col::after{content:"";position:absolute;left:0;right:0;bottom:-10px;height:1px;background:#EBEBEB}
.hero-panel .date-row .nights{position:absolute;left:50%;transform:translateX(-50%);bottom:-20px;font-size:11px;color:var(--muted)}

/* 调整卡片内搜索区域间距（沿用原有样式） */
.hero-panel .search-panel{padding:24px 0 0}
.hero-panel .kw-box{height:40px;border-radius:4px;background:#F5F5F5;display:flex;align-items:center;padding:0 12px}
.hero-panel .kw-box .kw{flex:1;min-width:0;height:100%;border:0;outline:none;background:transparent;color:var(--text);font-weight:400;appearance:none;-webkit-appearance:none;box-shadow:none}
.hero-panel .kw-box .kw::placeholder{color:var(--muted);font-weight:400}
.hero-panel .flash{display:flex;align-items:center;gap:8px;color:var(--muted);font-size:12px;margin:4px 0 12px}
.hero-panel .flash .chk{width:12px;height:12px}
.hero-panel .cta{display:block;width:100%;height:44px;border-radius:4px;border:0;background:var(--primary);color:#fff;font-size:16px;font-weight:600;cursor:pointer}
/* 让文字/按钮位于遮罩之上，保持清晰 */
.hero > *{position:relative;z-index:2}
.hero .back{position:absolute;left:16px;top:64px;width:24px;height:24px;border-radius:6px;border:0;background:url('images/10 (1).png') center/contain no-repeat;cursor:pointer;appearance:none;-webkit-appearance:none}
.hero .back::before{content:none}

/* 旧版绝对定位的 tabs/loc/date/search 已移除，改为 hero-panel 内部相对布局 */

/* 规则卡片 */
.rule-card{display:flex;align-items:center;justify-content:space-between;margin:12px 16px 0;padding:12px;border-radius:8px;background:#fff;color:#000;text-decoration:none}
.rule-card .chev{width:12px;height:12px;border-right:2px solid #fff0;border-top:2px solid #fff0;position:relative}
.rule-card .chev::before{content:"";display:block;width:8px;height:8px;border-right:2px solid #000;border-top:2px solid #000;transform:rotate(45deg)}

/* 精选推荐 */
.sec-title{margin:28px 16px 12px;font-size:16px;font-weight:600}
.grid{display:grid;grid-template-columns:repeat(2,1fr);gap:8px;padding:0 16px 28px}
.card{position:relative;display:block;border-radius:8px;overflow:hidden}
.card img{display:block;width:100%;height:auto;aspect-ratio:176/218;object-fit:cover}
.card .ov{position:absolute;left:0;right:0;bottom:0;height:36px;background:var(--ov);backdrop-filter:blur(10px)}
.card .txt{position:absolute;left:12px;bottom:10px;color:#fff;font-weight:600}

/* Home Indicator */
.home-ind{height:21px;display:flex;align-items:center;justify-content:center}
.home-ind span{display:block;width:144px;height:5px;border-radius:100px;background:#000;opacity:.85}