:root{
  --vermilion:#C8402A;      /* 朱红 */
  --vermilion-dark:#A53320;
  --ink:#1F1B16;            /* 墨 */
  --paper:#FAF6EF;          /* 宣纸 */
  --gold:#B8862B;           /* 金(装饰用途;正文级金色文字改用 --gold-ink) */
  --gold-ink:#8A6410;       /* 深金:宣纸上对比度达标,用于签证结果标题、评分等正文级文字 */
  --grey:#6E655A;           /* 加深,正文对比度达 4.5:1 */
  --card:#FFFFFF;
  --radius:18px;
}
*{margin:0;padding:0;box-sizing:border-box}
[hidden]{display:none!important}
body{font-family:"Segoe UI","Helvetica Neue",Arial,"PingFang SC","Microsoft YaHei",sans-serif;background:var(--paper);color:var(--ink);line-height:1.6}
.serif{font-family:Georgia,"Times New Roman","Songti SC","SimSun",serif}
a{color:inherit;text-decoration:none}
img{max-width:100%}
.wrap{max-width:1180px;margin:0 auto;padding:0 24px}

/* ---------- Nav ---------- */
nav{position:sticky;top:0;z-index:50;background:rgba(250,246,239,.92);backdrop-filter:blur(10px);border-bottom:1px solid #E8E0D2}
.nav-inner{display:flex;align-items:center;justify-content:space-between;height:66px}
.logo{display:flex;align-items:center;gap:10px;font-weight:700;font-size:1.05rem;white-space:nowrap}
.logo-seal{width:36px;height:36px;background:var(--vermilion);color:#fff;border-radius:8px;display:flex;align-items:center;justify-content:center;font-family:Georgia,"SimSun",serif;font-size:1.05rem;box-shadow:2px 2px 0 var(--gold)}
.nav-links{display:flex;gap:16px;font-size:.9rem;white-space:nowrap}
.nav-links a{cursor:pointer;padding:6px 2px;border-bottom:2px solid transparent;color:var(--grey)}
.nav-links a.active,.nav-links a:hover{color:var(--ink);border-bottom-color:var(--vermilion)}
.lang-switch{font-size:.85rem;border:1px solid #D9CFBD;border-radius:999px;padding:4px 12px;cursor:pointer;color:var(--grey);background:transparent;font-family:inherit}
.signin-link{font-size:.85rem;font-weight:600;color:var(--vermilion);text-decoration:none;border:1px solid #D9CFBD;border-radius:999px;padding:4px 12px;white-space:nowrap}
.signin-link:hover{border-color:var(--vermilion)}
.signin-name{font-size:.85rem;font-weight:600;white-space:nowrap;max-width:180px;overflow:hidden;text-overflow:ellipsis}

/* ---------- Boot error banner ---------- */
.boot-banner{position:relative;display:flex;align-items:center;justify-content:center;background:var(--vermilion);color:#fff;padding:10px 48px 10px 20px;font-size:.9rem;font-weight:600;text-align:center}
.boot-banner button{position:absolute;right:14px;top:50%;transform:translateY(-50%);background:none;border:none;color:#fff;font-size:1.05rem;cursor:pointer;opacity:.85;padding:4px 8px}
.boot-banner button:hover{opacity:1}

/* ---------- Toast(轻量提示,数秒后自动消失) ---------- */
.toast{position:fixed;left:50%;bottom:32px;transform:translateX(-50%) translateY(16px);background:var(--ink);color:#fff;padding:12px 22px;border-radius:999px;font-size:.88rem;font-weight:600;opacity:0;pointer-events:none;transition:.25s;z-index:200;box-shadow:0 10px 30px rgba(31,27,22,.25)}
.toast.show{opacity:1;transform:translateX(-50%) translateY(0)}

/* ---------- Hero ---------- */
.hero{position:relative;padding:96px 0 80px;overflow:hidden}
.hero-bg{position:absolute;inset:0;background:
  radial-gradient(ellipse 60% 50% at 85% 10%,rgba(200,64,42,.12),transparent),
  radial-gradient(ellipse 50% 45% at 10% 90%,rgba(184,134,43,.10),transparent)}
.hero h1{font-size:3.4rem;line-height:1.15;letter-spacing:-.5px}
.hero h1 .zh{display:block;font-size:1.6rem;color:var(--vermilion);letter-spacing:14px;margin-top:10px;font-weight:400}
.hero p.lead{font-size:1.2rem;color:var(--grey);max-width:560px;margin:22px 0 30px}
.btn{display:inline-block;padding:13px 28px;border-radius:999px;font-weight:600;font-size:.98rem;cursor:pointer;border:none;transition:.2s}
.btn-primary{background:var(--vermilion);color:#fff}
.btn-primary:hover{background:var(--vermilion-dark);transform:translateY(-1px)}
.btn-ghost{background:transparent;color:var(--ink);border:1.5px solid #D9CFBD;margin-left:12px}
.btn-ghost:hover{border-color:var(--ink)}
.hero-badge{display:inline-flex;align-items:center;gap:8px;background:#fff;border:1px solid #E8E0D2;border-radius:999px;padding:6px 16px;font-size:.82rem;color:var(--grey);margin-bottom:26px}
.dot{width:8px;height:8px;border-radius:50%;background:#3D9A50}

/* ---------- Hero search bar ---------- */
.search-bar{display:flex;flex-wrap:wrap;gap:14px;align-items:flex-end;background:#fff;border:1px solid #E8E0D2;border-radius:20px;padding:18px 20px;box-shadow:0 10px 30px rgba(31,27,22,.07);max-width:900px}
.sb-field{display:flex;flex-direction:column;gap:5px;flex:1;min-width:130px}
.sb-field.sb-lang{flex:1.6;min-width:220px}
.sb-field label{font-size:.78rem;font-weight:700;color:var(--grey);letter-spacing:.3px}
.sb-field label .sb-hint{font-weight:400;text-transform:none;color:#8A7D6B}
.sb-langs{display:flex;gap:6px}
.sb-field select,.sb-field input{padding:10px 12px;font-size:.92rem;font-family:inherit;border:1.5px solid #D9CFBD;border-radius:12px;background:var(--paper);color:var(--ink);width:100%}
.sb-field select:focus,.sb-field input:focus{outline:none;border-color:var(--vermilion)}
.sb-go{padding:11px 30px;white-space:nowrap}
.sb-error{flex-basis:100%;color:var(--vermilion);font-size:.85rem;font-weight:600}

/* ---------- Quick icons ---------- */
.quick-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(150px,1fr));gap:16px;margin-top:44px}
.quick-card{background:var(--card);border:1px solid #EEE5D6;border-radius:var(--radius);padding:22px 18px;text-align:center;cursor:pointer;transition:.2s}
.quick-card:hover{transform:translateY(-4px);box-shadow:0 12px 28px rgba(31,27,22,.08);border-color:var(--vermilion)}
.quick-card .ico{font-size:2rem;margin-bottom:10px}
.quick-card .t{font-weight:600;font-size:.95rem}
.quick-card .s{font-size:.78rem;color:var(--grey);margin-top:3px}

/* ---------- Sections ---------- */
section{padding:72px 0}
.sec-head{margin-bottom:40px}
.sec-kicker{color:var(--vermilion);font-weight:700;font-size:.82rem;letter-spacing:3px;text-transform:uppercase;margin-bottom:8px}
.sec-head h2{font-size:2.2rem;letter-spacing:-.5px}
.sec-head p{color:var(--grey);max-width:620px;margin-top:10px}

/* ---------- Cards ---------- */
.card-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(280px,1fr));gap:24px}
.card{background:var(--card);border:1px solid #EEE5D6;border-radius:var(--radius);overflow:hidden;transition:.2s;cursor:pointer}
.card:hover{transform:translateY(-4px);box-shadow:0 14px 32px rgba(31,27,22,.1)}
.card-img{height:170px;position:relative;display:flex;align-items:flex-end;padding:14px}
.card-img .tag{background:rgba(255,255,255,.92);border-radius:999px;padding:3px 12px;font-size:.75rem;font-weight:600}
.card-body{padding:18px 20px 20px}
.card-body h3{font-size:1.12rem;margin-bottom:6px}
.card-meta{display:flex;gap:14px;font-size:.82rem;color:var(--grey);flex-wrap:wrap}
.card-price{margin-top:12px;font-weight:700;color:var(--vermilion)}
.card-price span{font-weight:400;color:var(--grey);font-size:.82rem}
.badge{display:inline-block;background:#F6E9E6;color:var(--vermilion);border-radius:6px;padding:2px 9px;font-size:.72rem;font-weight:700;margin-right:6px}
.badge.gold{background:#F7F0DD;color:var(--gold-ink)}
.badge.green{background:#E7F2E9;color:#2F7A43}
/* Popular 导游卡片:金色渐变描边(border-image 不支持圆角,用双层背景实现) */
.guide-card-popular{border:2px solid transparent;background:linear-gradient(var(--card),var(--card)) padding-box,linear-gradient(135deg,#B8862B,#F0D488 45%,#B8862B) border-box;box-shadow:0 6px 20px rgba(184,134,43,.18)}
.guide-card-popular:hover{box-shadow:0 14px 32px rgba(184,134,43,.3)}
.badge.popular{background:linear-gradient(135deg,#B8862B,#D9AE4A);color:#fff}

/* ---------- Timeline (240h) ---------- */
.timeline{position:relative;padding-left:34px}
.timeline::before{content:"";position:absolute;left:10px;top:6px;bottom:6px;width:2px;background:linear-gradient(var(--vermilion),var(--gold))}
.tl-item{position:relative;margin-bottom:40px}
.tl-item::before{content:"";position:absolute;left:-31px;top:6px;width:14px;height:14px;border-radius:50%;background:var(--paper);border:3px solid var(--vermilion)}
.tl-item h3{font-size:1.35rem;margin-bottom:4px}
.tl-item .tl-sub{color:var(--grey);font-size:.9rem;margin-bottom:14px}
.fact-table{width:100%;background:#fff;border:1px solid #EEE5D6;border-radius:14px;border-collapse:separate;border-spacing:0;overflow:hidden;margin-top:8px}
.fact-table td{padding:12px 16px;border-top:1px solid #F2EBDD;font-size:.92rem;vertical-align:top}
.fact-table tr td:first-child{border-top:none;font-weight:600;width:34%}
.fact-table tr:first-child td{border-top:none}
.yes{color:#2F7A43;font-weight:700}.no{color:var(--vermilion);font-weight:700}

/* ---------- China Unicom product finder ---------- */
.connect-finder{background:linear-gradient(145deg,#FFF 0%,#FFF7F5 100%);border:1px solid #F0D8D2;border-radius:26px;padding:32px;margin-bottom:56px;box-shadow:0 14px 36px rgba(200,64,42,.08)}
.connect-heading{margin-bottom:24px}
.connect-brand{display:inline-block;color:#D71920;font-size:.8rem;font-weight:800;letter-spacing:1.4px;text-transform:uppercase;margin-bottom:8px}
.connect-heading h3{font-size:1.65rem;line-height:1.3}
.connect-heading p{color:var(--grey);margin-top:8px}
.connect-step{display:block;color:var(--vermilion);font-size:.76rem;font-weight:700;letter-spacing:1.2px;text-transform:uppercase;margin-bottom:6px}
.connect-question h4{font-size:1.18rem;margin-bottom:16px}
.connect-choice-grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:16px}
.connect-choice{display:flex;align-items:center;gap:14px;width:100%;padding:20px;background:#fff;border:1.5px solid #E7DAD3;border-radius:16px;color:var(--ink);font:inherit;text-align:left;cursor:pointer;transition:.2s}
.connect-choice:hover{border-color:#D71920;transform:translateY(-2px);box-shadow:0 8px 20px rgba(200,64,42,.1)}
.connect-choice-icon{font-size:1.8rem}
.connect-choice b{display:block;font-size:1rem}
.connect-choice small{display:block;color:var(--grey);font-size:.8rem;margin-top:3px;line-height:1.45}
.connect-arrow{margin-left:auto;color:var(--vermilion);font-size:1.3rem}
.connect-back{background:transparent;border:none;color:var(--vermilion);font:inherit;font-size:.84rem;font-weight:700;cursor:pointer;padding:8px 0;margin-top:14px}
.connect-result{border-top:2px solid #E7DAD3;padding-top:24px}
.connect-result-head{display:flex;align-items:center;gap:16px}
.connect-product-icon{display:flex;align-items:center;justify-content:center;width:64px;height:64px;border-radius:18px;background:#D71920;color:#fff;font-size:2rem;box-shadow:4px 4px 0 #F3C5C0}
.connect-recommended{display:block;color:#D71920;font-size:.74rem;font-weight:800;letter-spacing:1px;text-transform:uppercase}
.connect-result-head h3{font-size:1.65rem;line-height:1.25}
.connect-result-head h3 span{font-size:1.1rem;font-weight:500;margin-left:8px}
.connect-tagline{font-size:1.02rem;font-weight:600;margin-top:18px}
.connect-reason{color:var(--grey);font-size:.9rem;margin-top:5px}
.connect-features{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:12px;list-style:none;margin-top:22px}
.connect-features li{display:flex;align-items:flex-start;gap:10px;background:#fff;border:1px solid #EEE1DA;border-radius:12px;padding:13px}
.connect-features b{display:block;font-size:.88rem}
.connect-features small{display:block;color:var(--grey);font-size:.76rem;line-height:1.45;margin-top:2px}
.connect-result-foot{display:flex;align-items:center;justify-content:space-between;gap:16px;border-top:1px dashed #DCC9C0;margin-top:20px;padding-top:8px;color:var(--grey);font-size:.75rem}
@media(max-width:700px){.connect-finder{padding:24px 18px}.connect-choice-grid,.connect-features{grid-template-columns:1fr}.connect-result-foot{align-items:flex-start;flex-direction:column}.connect-result-head h3{font-size:1.35rem}}

/* ---------- Guides ---------- */
.filter-bar{display:flex;gap:10px;flex-wrap:wrap;margin-bottom:30px}
.chip{border:1.5px solid #D9CFBD;background:#fff;border-radius:999px;padding:7px 18px;font-size:.88rem;cursor:pointer;color:var(--grey)}
.chip.active,.chip:hover{background:var(--ink);color:#fff;border-color:var(--ink)}
.guide-card .card-img{height:190px;align-items:center;justify-content:center}
/* 形象照铺满卡片上半部分(有照片时替代首字母色块);正方形区域,尽量完整展示人像 */
.card-img-fill{padding:0;display:block;overflow:hidden}
.guide-card .card-img-fill{height:auto;aspect-ratio:1/1}
.card-img-fill img{width:100%;height:100%;object-fit:cover;object-position:center 15%;display:block}
.avatar{width:88px;height:88px;border-radius:50%;display:flex;align-items:center;justify-content:center;font-size:2rem;color:#fff;font-weight:700;border:3px solid rgba(255,255,255,.7)}
.avatar-img{overflow:hidden;padding:0}
.avatar-img img{width:100%;height:100%;object-fit:cover;display:block;border-radius:50%}
.guide-langs{margin:8px 0 4px;font-size:.85rem}
.stars{color:var(--gold-ink)}

/* ---------- Culture banner ---------- */
.culture-hero{background:linear-gradient(120deg,#2B2320,#4A2A20 55%,#6E2F1D);color:#F5EDE0;border-radius:26px;padding:54px 48px;position:relative;overflow:hidden;margin-bottom:40px}
.culture-hero h2{font-size:2rem;color:#fff}
.culture-hero p{max-width:560px;color:#D9C9B4;margin-top:10px}
.culture-hero .zh-bg{position:absolute;right:-20px;bottom:-40px;font-family:Georgia,"SimSun",serif;font-size:11rem;color:rgba(255,255,255,.05);line-height:1}

/* ---------- Survival ---------- */
.sos-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(240px,1fr));gap:20px}
.sos-card{background:#fff;border:1px solid #EEE5D6;border-radius:var(--radius);padding:24px}
.sos-card .num{font-size:1.9rem;font-weight:800;color:var(--vermilion)}
.zh-card-btn{margin-top:14px;display:inline-block;font-size:.85rem;color:var(--vermilion);font-weight:600;cursor:pointer;border-bottom:1px dashed var(--vermilion)}

/* ---------- Tax refund simulator ---------- */
.phone-mock{background:linear-gradient(160deg,#1677FF,#0A4FC2);color:#fff;border-radius:26px;padding:36px 28px;text-align:center;position:relative;overflow:hidden;min-height:300px}
.phone-mock.unionpay{background:linear-gradient(160deg,#0B3D91,#A32020)}
.nfc-waves{position:relative;width:120px;height:120px;margin:0 auto 16px;display:flex;align-items:center;justify-content:center}
.nfc-waves i{position:absolute;inset:0;border:2px solid rgba(255,255,255,.8);border-radius:50%;opacity:0}
.phone-mock.tapping .nfc-waves i{animation:nfcRing 1.5s ease-out infinite}
.phone-mock.tapping .nfc-waves i:nth-child(2){animation-delay:.4s}
.phone-mock.tapping .nfc-waves i:nth-child(3){animation-delay:.8s}
@keyframes nfcRing{0%{transform:scale(.45);opacity:.95}100%{transform:scale(1.3);opacity:0}}
.nfc-icon{font-size:2.6rem;position:relative}
.tax-status{margin-top:14px;font-size:.95rem;min-height:26px}
.tax-done{background:rgba(255,255,255,.16);border-radius:16px;padding:14px 18px;margin-top:16px;text-align:left;font-size:.9rem;line-height:1.7}

/* ---------- Modal ---------- */
.modal-mask{position:fixed;inset:0;background:rgba(31,27,22,.55);z-index:100;display:none;align-items:center;justify-content:center;padding:24px}
.modal-mask.open{display:flex}
.modal{background:var(--paper);border-radius:22px;max-width:640px;width:100%;max-height:86vh;overflow-y:auto;padding:36px;position:relative}
.modal-close{position:absolute;top:16px;right:20px;font-size:1.5rem;cursor:pointer;color:var(--grey);background:none;border:none}
.zh-show{text-align:center;padding:30px 10px}
.zh-show .big{font-size:2.1rem;font-family:"PingFang SC","Microsoft YaHei",serif;font-weight:700;margin:18px 0}
.zh-show .py{color:var(--grey)}
.review{border-top:1px solid #EAE1D2;padding:14px 0;font-size:.92rem}
.review .who{font-weight:600;font-size:.85rem}

/* ---------- Footer ---------- */
footer{background:var(--ink);color:#B9AF9F;padding:56px 0 32px;margin-top:40px}
.foot-grid{display:flex;justify-content:space-between;flex-wrap:wrap;gap:30px}
footer h4{color:#fff;font-size:1rem;margin-bottom:10px}
footer .small{font-size:.82rem;line-height:2}
.foot-bottom{border-top:1px solid #3A342C;margin-top:36px;padding-top:20px;font-size:.78rem;color:#7A7166}

.page{display:none}
.page.active{display:block;animation:fade .35s}
@keyframes fade{from{opacity:0;transform:translateY(8px)}to{opacity:1}}

/* ---------- 聊天窗口:中国风信封 ---------- */
.chat-envelope{padding:0;overflow:hidden;border-radius:16px;border:1px solid #E4D8BE;box-shadow:0 24px 60px rgba(31,27,22,.30)}
.chat-envelope .modal-close{color:#F3E7D3;top:12px;right:14px;z-index:2}
.ce-header{position:relative;background:linear-gradient(160deg,var(--vermilion),var(--vermilion-dark));color:#fff;padding:20px 24px 24px;border-bottom:3px solid var(--gold)}
.ce-header h3{margin:0;font-size:1.25rem;letter-spacing:1px}
/* 邮票:宣纸方块 + 齿孔虚线 + ✉ 图案 */
.ce-stamp{position:absolute;top:14px;right:54px;width:52px;height:60px;background:var(--paper);color:var(--vermilion);display:flex;align-items:center;justify-content:center;transform:rotate(3deg);box-shadow:0 2px 6px rgba(31,27,22,.25);outline:2px dashed rgba(200,64,42,.55);outline-offset:-5px}
.ce-stamp span{font-family:Georgia,"SimSun",serif;font-size:1.5rem;font-weight:700}
/* 封口印章 ✦,斜盖在红封与信纸交界处 */
.ce-seal{position:absolute;right:18px;bottom:-16px;width:34px;height:34px;background:#fff;color:var(--vermilion);border:2px solid var(--vermilion);border-radius:6px;display:flex;align-items:center;justify-content:center;font-family:Georgia,"SimSun",serif;font-weight:700;transform:rotate(-5deg);box-shadow:1px 2px 4px rgba(31,27,22,.18);z-index:1}
/* 信纸区:竖行朱丝栏 */
.ce-letter{display:flex;flex-direction:column;max-height:44vh;min-height:200px;overflow-y:auto;padding:24px 18px 12px;background:repeating-linear-gradient(90deg,transparent 0 44px,rgba(200,64,42,.07) 44px 45px),var(--paper)}
.cm{max-width:78%;padding:9px 14px;margin-bottom:10px;font-size:.92rem;line-height:1.55;border-radius:6px;word-break:break-word}
.cm.mine{margin-left:auto;background:var(--vermilion);color:#fff;box-shadow:2px 2px 0 rgba(165,51,32,.35)}
.cm.theirs{margin-right:auto;background:#FFFDF8;color:var(--ink);border:1px solid #E4D8BE;box-shadow:2px 2px 0 rgba(31,27,22,.06)}
.cm-meta{font-size:.68rem;opacity:.72;margin-top:4px}
/* 提笔书写区 */
.ce-compose{display:flex;gap:8px;align-items:center;padding:14px 18px 8px;border-top:1px dashed #D9CFBD;background:#FFFDF8}
.ce-compose input#chat-input{flex:1;padding:10px 4px;border:none;border-bottom:2px solid #D9CFBD;border-radius:0;background:transparent;font-family:inherit;font-size:.95rem;color:var(--ink)}
.ce-compose input#chat-input:focus{outline:none;border-bottom-color:var(--vermilion)}
.ce-tool{margin-left:0!important;padding:8px 10px!important;border-radius:8px!important}
.ce-send{background:var(--vermilion);color:#fff;border:none;border-radius:8px;padding:10px 18px;font-weight:700;font-family:inherit;font-size:.92rem;cursor:pointer;box-shadow:2px 2px 0 var(--gold);letter-spacing:2px}
.ce-send:hover{background:var(--vermilion-dark)}
.ce-foot{font-size:.72rem;color:var(--grey);text-align:center;padding:2px 18px 14px;background:#FFFDF8}
@media(max-width:900px){.nav-inner{height:auto;flex-wrap:wrap;padding:10px 24px}.nav-links{order:3;width:100%;overflow-x:auto;padding:6px 0 2px;-webkit-overflow-scrolling:touch}.nav-links::-webkit-scrollbar{display:none}.planner-grid{grid-template-columns:1fr!important}}
@media(max-width:760px){.hero h1{font-size:2.3rem}.culture-hero{padding:36px 26px}}
@media(max-width:700px){
  .nav-inner{display:grid;grid-template-columns:minmax(0,1fr) auto;gap:8px 12px;padding:9px 24px 0}
  .logo{min-width:0;gap:8px;font-size:.95rem}
  .logo-seal{width:32px;height:32px;flex:0 0 32px}
  .lang-switch{display:none}
  #auth-area{justify-self:end;min-width:0}
  .signin-link{font-size:.78rem;padding:4px 10px}
  .signin-name{max-width:110px;font-size:.8rem}
  .nav-links{grid-column:1/-1;grid-row:2;order:initial;display:flex;gap:18px;padding:4px 0 8px;scrollbar-width:none}
  .nav-links a{flex:0 0 auto;font-size:.82rem;padding:4px 0}
  nav.logged-in #auth-area{grid-column:1/-1;grid-row:2;justify-self:stretch;overflow-x:auto;gap:8px;padding:2px 0 4px;scrollbar-width:none}
  nav.logged-in #auth-area::-webkit-scrollbar{display:none}
  nav.logged-in #auth-area .signin-name{flex:0 0 auto;max-width:130px;line-height:27px}
  nav.logged-in #auth-area .signin-link{flex:0 0 auto}
  nav.logged-in .nav-links{grid-row:3}
}
@media(max-width:380px){
  .wrap{padding-left:16px;padding-right:16px}
  .nav-inner{padding-left:16px;padding-right:16px}
  .logo{font-size:.86rem}
  .logo-seal{width:30px;height:30px;flex-basis:30px}
  .signin-link{font-size:.72rem;padding:4px 8px}
  .signin-name{max-width:88px}
}
