:root {
  --ink: #171717;
  --muted: #686868;
  --paper: #ffffff;
  --soft: #f4f3ef;
  --line: #deddd8;
  --accent: #ba2f2a;
  --accent-dark: #8e211d;
  --max: 1240px;
  --radius: 22px;
  --shadow: 0 18px 50px rgba(20, 20, 20, .08);
  color-scheme: light;
}

/* ===================== Theme system (P4.1) ===================== */
html[data-theme="dark"] {
  color-scheme: dark;
  --ink: #f0f1f3;
  --muted: #c4c9d0;
  --paper: #131519;
  --soft: #1b1f27;
  --surface-2: #23272f;
  --line: #2c313a;
  --shadow: 0 18px 50px rgba(0,0,0,.5);
}

/* chrome */
html[data-theme="dark"] .site-header { background: var(--paper); border-bottom-color: rgba(255,255,255,.08); backdrop-filter: none; -webkit-backdrop-filter: none; }
html[data-theme="dark"] .announcement { background: #0e1014; color: var(--ink); }
html[data-theme="dark"] .main-nav a { color: var(--muted); }
html[data-theme="dark"] .main-nav a:hover { color: var(--ink); border-color: var(--ink); }
html[data-theme="dark"] .main-nav a.active { color: var(--muted); border-color: var(--muted); }
html[data-theme="dark"] .main-nav { background: rgba(19,21,25,.98); }

/* Dark-mode fixes for the Free Tools mega-menu cards (inline styles in many HTML files) */
html[data-theme="dark"] .tools-cards .tool-card { background: var(--surface-2); border-color: var(--line); }
html[data-theme="dark"] .tools-cards .tool-card:hover { border-color: color-mix(in srgb, var(--cat) 22%, transparent); }
html[data-theme="dark"] .tools-cards .t-ico { background: var(--surface-2); color: var(--cat); border-color: var(--line); box-shadow: none; }
html[data-theme="dark"] .tools-cards .t-title { color: var(--ink); }
html[data-theme="dark"] .tools-cards .t-desc { color: var(--muted); }
html[data-theme="dark"] .tools-cards .t-free { color: var(--muted); border-color: var(--line); }

/* Equal-height Free Tools mega-menu cards per row (inner .tool-card must fill the stretched grid item) */
.main-nav .tools-cards .tool-card { height: 100%; }

/* cards & white surfaces -> dark elevated surfaces */
html[data-theme="dark"] .feature,
html[data-theme="dark"] .catalog-card,
html[data-theme="dark"] .kit-chapter-card,
html[data-theme="dark"] .guide-topic-card,
html[data-theme="dark"] .city-fact-bar,
html[data-theme="dark"] .itinerary-card,
html[data-theme="dark"] .essential-grid article,
html[data-theme="dark"] .city-commerce-box,
html[data-theme="dark"] .route-map-card,
html[data-theme="dark"] .placeholder-card,
html[data-theme="dark"] .related-list a,
html[data-theme="dark"] .upl-stat,
html[data-theme="dark"] .upl-band,
html[data-theme="dark"] .upl-tool-card,
html[data-theme="dark"] .detail-card,
html[data-theme="dark"] .card,
html[data-theme="dark"] .tool-card { background: var(--surface-2); }

/* ===== missed white surfaces -> dark (P4.1 fix: kill light cards in dark mode) ===== */
html[data-theme="dark"] .payment-card,
html[data-theme="dark"] .incl-card,
html[data-theme="dark"] .peek,
html[data-theme="dark"] .empty-note,
html[data-theme="dark"] .content-notice,
html[data-theme="dark"] .placeholder-box,
html[data-theme="dark"] .tool-placeholder,
html[data-theme="dark"] .upl-fact-card,
html[data-theme="dark"] .upl-tips,
html[data-theme="dark"] .upl-rule,
html[data-theme="dark"] .upl-compare tbody th,
html[data-theme="dark"] .city-day { background: var(--surface-2); }

/* image holders keep a neutral elevated tone (mirrors light-mode off-white) */
html[data-theme="dark"] .city-day-image.map-day-image,
html[data-theme="dark"] .route-map-card img { background: var(--surface-2); }

/* chips that sat on white in light mode need elevation in dark or they vanish */
html[data-theme="dark"] .incl-icon,
html[data-theme="dark"] .peek-tip { background: var(--surface-2); }

/* hardcoded dark text meant for a white bg -> unreadable on dark surface */
html[data-theme="dark"] .peek-text { color: var(--ink); }

/* hover regressions: keep tints inside the dark palette, never snap to white */
html[data-theme="dark"] .btn-light:hover { background: var(--surface-2); }
html[data-theme="dark"] a.feature:hover { background: var(--surface-2); }

/* elevated surfaces (inputs, dropdowns, swaps) */
html[data-theme="dark"] .search-dropdown,
html[data-theme="dark"] .search-input,
html[data-theme="dark"] .select,
html[data-theme="dark"] .form-field input,
html[data-theme="dark"] .form-field textarea,
html[data-theme="dark"] .form-field select,
html[data-theme="dark"] .tool-input,
html[data-theme="dark"] .tool-check,
html[data-theme="dark"] .tool-swap,
html[data-theme="dark"] .rail-reopen { background: var(--surface-2); color: var(--ink); border-color: var(--line); }

/* dark-band elements that used --ink as a background */
html[data-theme="dark"] .newsletter { background: #0e1014; }
html[data-theme="dark"] .guide-topic-card.overview-card { background: #0e1014; color: #fff; }
html[data-theme="dark"] .placeholder-banner { background: var(--soft); }
html[data-theme="dark"] .upl-related a:hover { background: var(--surface-2); }

/* buttons */
html[data-theme="dark"] .btn-light { background: var(--soft); color: var(--ink); border-color: var(--line); }
html[data-theme="dark"] .btn-outline:hover { background: var(--surface-2); }
html[data-theme="dark"] .hero .btn-outline:hover,
html[data-theme="dark"] .city-detail-hero .btn-outline:hover,
html[data-theme="dark"] .upl-article-hero .btn-outline:hover,
html[data-theme="dark"] .cover-visual .btn-outline:hover { background: #fff; color: var(--ink); }
html[data-theme="dark"] .tool-swap:hover { background: rgba(186,47,42,.18); }

/* hero scrim a touch deeper for cohesion */
html[data-theme="dark"] .upl-article-hero::before { background: linear-gradient(180deg, rgba(0,0,0,.28) 0%, rgba(0,0,0,.42) 45%, rgba(0,0,0,.7) 100%); }

/* ===== Dark mode text & surface fixes (ensure readable contrast) ===== */
/* hardcoded gray text meant for white bg -> use theme variables */
html[data-theme="dark"] .article-body p,
html[data-theme="dark"] .article-body ul,
html[data-theme="dark"] .article-body ol,
html[data-theme="dark"] .upl-article-body p,
html[data-theme="dark"] .upl-article-body ul,
html[data-theme="dark"] .upl-article-body ol,
html[data-theme="dark"] .upl-article-body li { color: var(--ink); }
html[data-theme="dark"] .city-intro-copy .lead { color: var(--muted); }
/* subtle hover/accent surfaces that were light-only */
html[data-theme="dark"] .upl-related a:hover { background: rgba(255,255,255,.06); }
html[data-theme="dark"] .chapter-jump a:hover { background: var(--surface-2); }
html[data-theme="dark"] .article-body blockquote { background: var(--surface-2); }
html[data-theme="dark"] .article-body th { background: var(--surface-2); }
html[data-theme="dark"] .affiliate-note{ background:var(--surface-2); border-color:var(--line); color:var(--muted); }
/* keep nav background elevated above the header */
html[data-theme="dark"] .main-nav { background: rgba(19,21,25,.98); }

/* theme toggle (icon swap) */
.theme-toggle .ico-sun { display: none; }
.theme-toggle .ico-moon { display: block; }
html[data-theme="dark"] .theme-toggle .ico-sun { display: block; }
html[data-theme="dark"] .theme-toggle .ico-moon { display: none; }

* { box-sizing: border-box; }
html { scroll-behavior: smooth; }
body {
  margin: 0;
  color: var(--ink);
  background: var(--paper);
  font-family: Inter, ui-sans-serif, -apple-system, BlinkMacSystemFont, "Segoe UI", Arial, sans-serif;
  line-height: 1.55;
}
body.menu-open { overflow: hidden; }
a { color: inherit; text-decoration: none; }
button, input { font: inherit; }
img { display: block; max-width: 100%; }

.announcement {
  background: var(--ink);
  color: white;
  text-align: center;
  padding: 9px 18px;
  font-size: 13px;
  letter-spacing: .04em;
}
.site-header {
  position: sticky;
  top: 0;
  z-index: 1000;
  background: #fff;
  backdrop-filter: none;
  border-bottom: 1px solid rgba(222,221,216,.8);
}
.nav-wrap {
  max-width: var(--max);
  margin: 0 auto;
  min-height: 76px;
  padding: 0 24px;
  display: grid;
  grid-template-columns: 1fr auto 1fr;
  align-items: center;
  gap: 28px;
}
.brand {
  font-weight: 800;
  letter-spacing: -.03em;
  font-size: 20px;
  white-space: nowrap;
}
.brand span { color: var(--accent); }
.brand img { height: 56px; width: auto; display: block; }
.footer-brand .brand img { height: 46px; width: auto; margin-bottom: 12px; }
.main-nav { display: flex; gap: 28px; align-items: center; background: #fff; }
.main-nav a {
  font-size: 14px;
  color: #3d3d3d;
  padding: 27px 0 24px;
  border-bottom: 2px solid transparent;
}
.main-nav a:hover, .main-nav a.active { color: var(--ink); border-color: var(--ink); }
.nav-actions { justify-self: end; display: flex; align-items: center; gap: 14px; }
.icon-link, .menu-toggle {
  width: 44px;
  height: 44px;
  min-width: 44px;
  min-height: 44px;
  border: 0;
  border-radius: 999px;
  background: transparent;
  display: inline-grid;
  place-items: center;
  cursor: pointer;
}
.icon-link:hover, .menu-toggle:hover { background: var(--soft); }
.menu-toggle { display: none; }

/* Cart badge — sits on the navbar cart icon, updates from localStorage */
.icon-link.cart-link { position: relative; }
.cart-count {
  position: absolute;
  top: -3px;
  right: -3px;
  min-width: 18px;
  height: 18px;
  padding: 0 5px;
  border-radius: 999px;
  background: var(--accent);
  color: #fff;
  font-size: 11px;
  font-weight: 700;
  line-height: 18px;
  text-align: center;
  box-shadow: 0 0 0 2px #fff;
}
.cart-count[hidden] { display: none; }

.container { max-width: var(--max); margin: 0 auto; padding: 0 24px; }
.section { padding: 104px 0; }
.section.compact { padding: 76px 0; }
.section.alt { background: var(--soft); }
.eyebrow {
  margin: 0 0 12px;
  color: var(--accent);
  text-transform: uppercase;
  letter-spacing: .16em;
  font-size: 12px;
  font-weight: 800;
}
.section-heading {
  display: flex;
  justify-content: space-between;
  align-items: end;
  gap: 28px;
  margin-bottom: 44px;
}
.section-heading h2, .page-hero h1 {
  margin: 0;
  font-family: "Playfair Display", "Times New Roman", serif;
  font-weight: 500;
  letter-spacing: -.035em;
  line-height: 1.06;
}
.section-heading h2 { font-size: clamp(38px, 5vw, 62px); max-width: 780px; }
.section-heading p { max-width: 470px; margin: 0; color: var(--muted); }

.hero {
  position: relative;
  min-height: min(810px, calc(100vh - 109px));
  display: grid;
  place-items: center;
  color: white;
  text-align: center;
  background-image: linear-gradient(rgba(0,0,0,.19), rgba(0,0,0,.32)), url('hero-ocean.webp');
  background-size: cover;
  background-position: center 55%;
}
.hero-content { width: min(960px, 90%); transform: translateY(-1%); }
.hero h1 {
  margin: 0;
  font-family: "Playfair Display", "Times New Roman", serif;
  font-size: clamp(52px, 8.3vw, 116px);
  line-height: .95;
  letter-spacing: -.055em;
  text-shadow: 0 2px 22px rgba(0,0,0,.18);
}
.hero p { margin: 26px auto 34px; max-width: 650px; font-size: clamp(17px, 2vw, 22px); }
.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  min-height: 52px;
  padding: 0 24px;
  border: 1px solid var(--ink);
  border-radius: 999px;
  background: var(--ink);
  color: white;
  font-weight: 700;
  font-size: 14px;
  transition: .2s ease;
}
.btn:hover { transform: translateY(-2px); background: #303030; }
/* Default outline button — adapts to the current theme (dark text on light, light text on dark) */
.btn-outline { background: transparent; border-color: var(--ink); color: var(--ink); }
.btn-outline:hover { background: var(--ink); color: var(--paper); }

/* Outline button on dark/image backgrounds — always light, regardless of theme */
.hero .btn-outline,
.city-detail-hero .btn-outline,
.upl-article-hero .btn-outline,
.cover-visual .btn-outline { border-color: rgba(255,255,255,.85); color: #fff; }
.hero .btn-outline:hover,
.city-detail-hero .btn-outline:hover,
.upl-article-hero .btn-outline:hover,
.cover-visual .btn-outline:hover { background: #fff; color: var(--ink); }
.btn-light { background: white; color: var(--ink); border-color: white; }
.btn-light:hover { background: #f5f5f5; }
.btn-primary { background: var(--accent); color: #fff; border-color: var(--accent); }
.btn-primary:hover { background: #9e2723; transform: translateY(-2px); }
.btn-add { background: transparent; color: var(--accent); border-color: var(--accent); }
.btn-add:hover { background: var(--accent); color: #fff; transform: translateY(-2px); }
.text-link { display: inline-flex; gap: 8px; align-items: center; font-weight: 750; border-bottom: 1px solid; padding-bottom: 2px; }

.product-grid { display: grid; grid-template-columns: repeat(2, minmax(0,1fr)); gap: 24px; }
.product-card {
  position: relative;
  min-height: 590px;
  overflow: hidden;
  border-radius: var(--radius);
  box-shadow: var(--shadow);
  color: white;
  display: flex;
  align-items: end;
}
.product-card::before {
  content: "";
  position: absolute;
  inset: 0;
  transition: transform .45s ease;
}
.product-card:hover::before { transform: scale(1.035); }
.product-card.survival::before {
  background:
    linear-gradient(180deg, rgba(8,37,41,.08), rgba(5,24,28,.82)),
    radial-gradient(circle at 20% 22%, rgba(255,216,117,.95), transparent 25%),
    linear-gradient(135deg, #167a78, #0c3d48 65%, #092b34);
}
.product-card.city::before {
  background:
    linear-gradient(180deg, rgba(0,0,0,.03), rgba(30,20,10,.78)),
    radial-gradient(circle at 75% 20%, rgba(255,220,163,.75), transparent 23%),
    linear-gradient(135deg, #c15a38, #8b2f2c 55%, #3a1f28);
}
.card-art { position: absolute; inset: 0; overflow: hidden; pointer-events: none; }
.card-art .phone {
  position: absolute; width: 210px; height: 400px; left: 14%; top: 11%;
  border: 9px solid rgba(255,255,255,.88); border-radius: 32px; transform: rotate(-8deg);
  box-shadow: 0 30px 60px rgba(0,0,0,.25);
}
.card-art .phone::before { content:""; position:absolute; inset:18px; border-radius:20px; background: linear-gradient(#f7e8b2,#e47442); opacity:.95; }
.card-art .map-line { position:absolute; width:360px; height:360px; right:-60px; top:60px; border:2px solid rgba(255,255,255,.25); border-radius: 44% 56% 50% 50%; transform: rotate(22deg); }
.card-art .city-block { position:absolute; bottom:0; background: rgba(255,230,190,.32); border:1px solid rgba(255,255,255,.22); }
.city-block.b1 { left:8%; width:18%; height:34%; }
.city-block.b2 { left:29%; width:23%; height:47%; }
.city-block.b3 { left:55%; width:14%; height:31%; }
.city-block.b4 { left:72%; width:20%; height:57%; }
.product-card-content { position: relative; z-index: 2; padding: 42px; width: 100%; }
.product-card h3 { margin: 0 0 10px; font-family: "Playfair Display", serif; font-size: clamp(34px,4vw,52px); font-weight:500; line-height:1.05; }
.product-card p { max-width: 520px; margin: 0 0 24px; color: rgba(255,255,255,.83); }

.feature-grid { display: grid; grid-template-columns: repeat(4,1fr); border-top: 1px solid var(--line); border-left: 1px solid var(--line); }
.feature { min-height: 220px; padding: 30px; border-right: 1px solid var(--line); border-bottom: 1px solid var(--line); background: white; }
.feature-number { font-family: "Playfair Display", serif; font-size: 42px; color: var(--accent); }
.feature h3 { margin: 42px 0 8px; font-size: 17px; }
.feature p { margin: 0; color: var(--muted); font-size: 14px; }

.city-grid { display: grid; grid-template-columns: repeat(4,1fr); gap: 20px; }
.city-card { min-height: 430px; border-radius: 18px; padding: 28px; display:flex; flex-direction:column; justify-content:space-between; color:white; overflow:hidden; position:relative; }
.city-card::before { content:""; position:absolute; inset:0; background: var(--city-bg); transition:.35s; }
.city-card:hover::before { transform: scale(1.04); }
.city-card > * { position:relative; z-index:1; }
.city-card .tag { align-self:flex-start; padding:7px 12px; border:1px solid rgba(255,255,255,.5); border-radius:999px; font-size:12px; }
.city-card h3 { font-family: "Playfair Display", serif; font-size:46px; margin:0 0 4px; font-weight:500; }
.city-card p { margin:0; color:rgba(255,255,255,.78); }
.beijing { --city-bg: linear-gradient(160deg, rgba(30,20,15,.08), rgba(20,10,5,.72)), linear-gradient(135deg,#c67b43,#724530); }
.shanghai { --city-bg: linear-gradient(160deg, rgba(10,20,40,.06), rgba(8,15,30,.75)), linear-gradient(135deg,#6193a7,#243d55); }
.shenzhen { --city-bg: linear-gradient(160deg, rgba(10,20,20,.05), rgba(5,25,20,.73)), linear-gradient(135deg,#6cb8a5,#1f5d5d); }

.review-shell { display:grid; grid-template-columns: .7fr 1.3fr; gap:72px; align-items:start; }
.rating { font-size: 23px; letter-spacing:.12em; color:var(--accent); }
.review-quote { margin:0; font-family: "Playfair Display", serif; font-size:clamp(34px,4.4vw,62px); line-height:1.12; letter-spacing:-.03em; }
.review-meta { margin-top:28px; color:var(--muted); }
.review-dots { margin-top:30px; display:flex; gap:8px; }
.review-dots i { display:block; width:7px; height:7px; border-radius:50%; background:#c8c8c8; }
.review-dots i:first-child { width:28px; border-radius:10px; background:var(--ink); }

.faq-list { border-top:1px solid var(--line); }
.faq-item { border-bottom:1px solid var(--line); }
.faq-question { width:100%; border:0; background:transparent; text-align:left; display:flex; justify-content:space-between; gap:20px; padding:25px 0; font-weight:760; cursor:pointer; }
.faq-question span:last-child { font-size:24px; font-weight:400; transition:.2s; }
.faq-answer { max-height:0; overflow:hidden; transition:max-height .3s ease; color:var(--muted); }
.faq-answer p { margin:0; padding:0 50px 26px 0; max-width:850px; }
.faq-item.open .faq-answer { max-height:240px; }
.faq-item.open .faq-question span:last-child { transform:rotate(45deg); }

.newsletter { background:var(--ink); color:white; border-radius:var(--radius); padding:70px; display:grid; grid-template-columns:1fr 1fr; gap:60px; align-items:end; }
.newsletter h2 { margin:0; font-family: "Playfair Display", serif; font-weight:500; font-size:clamp(38px,5vw,64px); line-height:1.03; }
.newsletter p { color:#bfbfbf; }
.subscribe { display:flex; border-bottom:1px solid #777; }
.subscribe input { width:100%; padding:16px 0; background:transparent; border:0; outline:0; color:white; }
.subscribe button { border:0; background:transparent; color:white; font-weight:750; cursor:pointer; }

.site-footer { padding:72px 0 30px; }
.footer-grid { display:grid; grid-template-columns:2fr repeat(3,1fr); gap:50px; }
.footer-brand p { color:var(--muted); max-width:320px; }
.footer-col h4 { margin:0 0 16px; font-size:13px; text-transform:uppercase; letter-spacing:.12em; }
.footer-col a { display:block; margin:9px 0; color:var(--muted); font-size:14px; }
.footer-col a:hover { color:var(--ink); }
.footer-bottom { margin-top:60px; padding-top:22px; border-top:1px solid var(--line); display:flex; justify-content:space-between; gap:20px; color:var(--muted); font-size:13px; }

.page-hero { padding:110px 0 78px; background:var(--soft); }
.page-hero h1 { font-size:clamp(52px,8vw,100px); max-width:930px; }
.page-hero p { max-width:680px; font-size:19px; color:var(--muted); margin:24px 0 0; }
.breadcrumbs { font-size:13px; color:var(--muted); margin-bottom:34px; }
.breadcrumbs a:hover { color:var(--ink); }

.catalog-toolbar { display:flex; justify-content:space-between; align-items:center; gap:20px; margin-bottom:32px; }
.catalog-toolbar p { color:var(--muted); }
.select { padding:12px 38px 12px 16px; border:1px solid var(--line); background:white; border-radius:999px; }
.catalog-grid { display:grid; grid-template-columns:repeat(3,1fr); gap:22px; }
.catalog-card { border:1px solid var(--line); border-radius:18px; overflow:hidden; background:white; }
.catalog-image { aspect-ratio:4/3; display:grid; place-items:center; background:linear-gradient(135deg,#efeae0,#d4cab8); color:#877b67; font-weight:800; letter-spacing:.1em; text-transform:uppercase; }
.catalog-image.dark { background:linear-gradient(135deg,#315e62,#16383f); color:#e9fbf8; }
.catalog-image.warm { background:linear-gradient(135deg,#d18b61,#733a32); color:#fff1e4; }
.catalog-body { padding:24px; }
.catalog-body h3 { margin:0 0 7px; font-family: "Playfair Display", serif; font-size:27px; font-weight:500; }
.catalog-body p { color:var(--muted); min-height:48px; }
.card-bottom { display:flex; align-items:center; justify-content:space-between; gap:15px; margin-top:20px; }
.price { font-weight:800; }
.price-was { display:inline-block; margin-left:8px; font-weight:500; color:#6b6b6b; text-decoration:line-through; font-size:.82em; vertical-align:middle; }
.price-flag { display:inline-block; margin-left:10px; color:#ba2f2a; font-weight:700; font-size:.7rem; letter-spacing:.05em; text-transform:uppercase; vertical-align:middle; }
.status { font-size:12px; text-transform:uppercase; letter-spacing:.12em; color:var(--accent); }

.detail-layout { display:grid; grid-template-columns:1.05fr .95fr; gap:64px; align-items:start; }
.detail-visual { min-height:660px; border-radius:22px; display:grid; place-items:center; background:linear-gradient(145deg,#173e43,#3d8987); color:white; position:sticky; top:110px; }
.detail-visual span { font-family: "Playfair Display", serif; font-size:50px; text-align:center; padding:30px; }
.detail-copy h1 { margin:0; font-family: "Playfair Display", serif; font-size:clamp(46px,6vw,78px); line-height:1.03; font-weight:500; letter-spacing:-.04em; }
.detail-copy .lead { color:var(--muted); font-size:19px; }
.placeholder-box { border:1px dashed #aaa; border-radius:16px; padding:24px; color:var(--muted); margin:25px 0; background:#fafafa; }
.check-list { list-style:none; margin:28px 0; padding:0; }
.check-list li { padding:13px 0; border-bottom:1px solid var(--line); display:flex; gap:12px; }
.check-list li::before { content:"✓"; font-weight:900; color:var(--accent); }

.guide-nav { display:grid; grid-template-columns:280px 1fr; gap:60px; }
.side-nav { position:sticky; top:118px; align-self:start; border:1px solid var(--line); border-radius:16px; padding:22px; }
.side-nav strong { display:block; margin-bottom:14px; }
.side-nav a { display:block; padding:9px 0; color:var(--muted); font-size:14px; }
.side-nav a:hover { color:var(--ink); }
.guide-section { padding-bottom:72px; border-bottom:1px solid var(--line); margin-bottom:72px; }
.guide-section h2 { font-family: "Playfair Display", serif; font-size:48px; font-weight:500; margin:0 0 18px; }
.guide-section h3 { font-size:20px; margin:32px 0 10px; }
.guide-section p { color:var(--muted); max-width:800px; }

.review-grid { display:grid; grid-template-columns:repeat(3,1fr); gap:20px; }
.review-card { padding:30px; border:1px solid var(--line); border-radius:18px; min-height:280px; display:flex; flex-direction:column; justify-content:space-between; }
.review-card blockquote { margin:20px 0; font-family: "Playfair Display", serif; font-size:23px; line-height:1.35; }
.review-card small { color:var(--muted); }

.contact-grid { display:grid; grid-template-columns:.8fr 1.2fr; gap:70px; }
.contact-copy h2 { font-family: "Playfair Display", serif; font-size:54px; font-weight:500; margin:0; }
.contact-copy p { color:var(--muted); }
.form-grid { display:grid; gap:18px; }
.form-field { display:grid; gap:8px; }
.form-field label { font-size:13px; font-weight:750; }
.form-field input, .form-field textarea, .form-field select { width:100%; padding:15px 16px; border:1px solid var(--line); border-radius:10px; background:white; }
.form-field textarea { min-height:150px; resize:vertical; }

.empty-note { padding:26px; border-left:3px solid var(--accent); background:#faf7f2; color:var(--muted); }

@media (max-width: 980px) {
  .nav-wrap { grid-template-columns:1fr auto; }
  .main-nav { position:fixed; top:0; right:0; bottom:0; left:auto; width:min(340px, 86vw); min-width:280px; max-width:86vw; background:#fff !important; padding:34px 28px; flex-direction:column; align-items:flex-start; transform:translateX(100%); transition:.25s; box-shadow:-8px 0 32px rgba(0,0,0,.2); z-index:1001; }
  .menu-open .main-nav { transform:translateX(0); }
  .main-nav a { padding:12px 0; font-size:22px; color:#1a1a1a; }
  [data-theme="dark"] .main-nav { background:rgba(19,21,25,.98)!important; box-shadow:-8px 0 32px rgba(0,0,0,.45)!important; }
  [data-theme="dark"] .main-nav a { color:var(--muted); }
  [data-theme="dark"] .main-nav a:hover { color:var(--ink)!important; border-color:var(--ink)!important; }
  [data-theme="dark"] .main-nav a.active { color:var(--muted)!important; border-color:var(--muted)!important; }
  /* Mobile menu backdrop — dims content behind the open nav so text is always readable */
  body.menu-open::after { content:''; position:fixed; inset:0; background:rgba(0,0,0,.35); z-index:55; }
  /* Hide site search on mobile; keep cart, theme-toggle, locale, menu visible.
     Use class selectors instead of :nth-child so DOM order changes (e.g. theme
     toggle being inserted dynamically) don't accidentally hide the wrong icon. */
  .nav-actions > .site-search,
  .nav-actions .icon-link:not(.cart-link):not(.theme-toggle) { display:none; }
  .menu-toggle { display:inline-grid; }
  .product-grid, .newsletter, .detail-layout, .contact-grid, .review-shell { grid-template-columns:1fr; }
  .feature-grid { grid-template-columns:repeat(2,1fr); }
  .city-grid, .catalog-grid, .review-grid { grid-template-columns:repeat(2,1fr); }
  .guide-nav { grid-template-columns:1fr; }
  .side-nav { position:static; }
  .detail-visual { position:static; min-height:470px; }
  .footer-grid { grid-template-columns:1.5fr 1fr 1fr; }
}
@media (max-width: 680px) {
  .announcement { font-size:11px; }
  .nav-wrap { min-height:68px; padding:0 16px; }
  .brand { font-size:17px; }
  .brand img { height: 52px; }
  .footer-brand .brand img { height: 40px; }
  .main-nav { top:0; }
  .container { padding:0 18px; }
  .section { padding:76px 0; }
  .section-heading { display:block; }
  .section-heading p { margin-top:18px; }
  .hero { min-height:680px; }
  .hero h1 { font-size:clamp(40px, 11vw, 58px); }
  .product-grid, .city-grid, .catalog-grid, .review-grid, .feature-grid { grid-template-columns:1fr; }
  .product-card { min-height:510px; }
  .product-card-content { padding:30px; }
  .newsletter { padding:42px 26px; }
  .footer-grid { grid-template-columns:1fr 1fr; }
  .footer-brand { grid-column:1/-1; }
  .footer-bottom { flex-direction:column; }
  .page-hero { padding:76px 0 58px; }
  .page-hero h1 { font-size:clamp(34px, 10vw, 55px); }
  .catalog-toolbar { align-items:flex-start; flex-direction:column; }
}


/* Integrated China Survival Kit content */
.feature-grid.five { grid-template-columns: repeat(5, 1fr); }
a.feature { color: inherit; transition: background .2s ease, transform .2s ease; }
a.feature:hover { background: #faf9f6; transform: translateY(-3px); }
.cover-visual { padding: 0; overflow: hidden; background: #111827; display: flex; flex-direction: column; justify-content: center; }
.cover-visual img { width: 100%; height: auto; object-fit: contain; }
.cover-visual .cover-caption { position: static; font: 12px Inter, sans-serif; padding: 14px 18px; color: rgba(255,255,255,.7); text-align: left; width: 100%; }
.kit-stats { display: grid; grid-template-columns: repeat(3,1fr); gap: 10px; margin: 28px 0; }
.kit-stats div { border: 1px solid var(--line); border-radius: 14px; padding: 18px; display: grid; gap: 2px; }
.kit-stats strong { font-family: "Playfair Display", serif; font-size: 34px; font-weight: 500; }
.kit-stats span { color: var(--muted); font-size: 12px; text-transform: uppercase; letter-spacing: .1em; }
.button-row { display: flex; gap: 12px; flex-wrap: wrap; }
.btn-secondary { background: transparent; color: var(--ink); }
.btn-secondary:hover { color: white; }
.kit-chapter-grid { display: grid; grid-template-columns: repeat(2,1fr); gap: 18px; }
.kit-chapter-card { display: grid; grid-template-columns: 76px 1fr; gap: 22px; border: 1px solid var(--line); border-radius: 18px; padding: 28px; background: white; transition: .2s ease; }
.kit-chapter-card:last-child { grid-column: 1 / -1; }
.kit-chapter-card:hover { transform: translateY(-3px); box-shadow: var(--shadow); }
.kit-chapter-card > span { font-family: "Playfair Display", serif; color: var(--accent); font-size: 42px; }
.kit-chapter-card h3 { margin: 0 0 7px; font-family: "Playfair Display", serif; font-size: 27px; font-weight: 500; }
.kit-chapter-card p { margin: 0; color: var(--muted); }
.content-notice { border-left: 3px solid var(--accent); padding: 18px 20px; background: #faf7f2; margin-bottom: 34px; }
.content-notice p { margin: 5px 0 0 !important; color: var(--muted); }
.content-notice.wide { max-width: 920px; }
.chapter-jump { display: grid; grid-template-columns: repeat(5,1fr); border: 1px solid var(--line); border-radius: 18px; overflow: hidden; margin: 42px 0 90px; }
.chapter-jump.six { grid-template-columns: repeat(6,1fr); }
.chapter-jump a { padding: 22px 16px; border-right: 1px solid var(--line); font-size: 13px; font-weight: 750; display: grid; gap: 4px; }
.chapter-jump a:last-child { border-right: 0; }
.chapter-jump a:hover { background: var(--soft); }
.chapter-jump span { color: var(--accent); font-family: "Playfair Display", serif; font-size: 25px; }
.contents-chapter { padding: 0 0 96px; margin-bottom: 96px; border-bottom: 1px solid var(--line); scroll-margin-top: 120px; }
.contents-chapter:last-child { border-bottom: 0; margin-bottom: 0; }
.chapter-heading { display: grid; grid-template-columns: 110px 1fr; gap: 28px; margin-bottom: 38px; max-width: 900px; }
.chapter-number { font-family: "Playfair Display", serif; font-size: 78px; line-height: .9; color: var(--accent); }
.chapter-heading h2 { font-family: "Playfair Display", serif; font-weight: 500; font-size: clamp(38px,5vw,62px); margin: 0 0 10px; letter-spacing: -.03em; }
.chapter-heading p:last-child { color: var(--muted); margin: 0; }
.guide-topic-grid { display: grid; grid-template-columns: repeat(3,1fr); gap: 18px; }
.guide-topic-card { border: 1px solid var(--line); border-radius: 17px; padding: 25px; min-height: 240px; display: flex; flex-direction: column; background: white; transition: .2s ease; }
.guide-topic-card:hover { transform: translateY(-3px); box-shadow: var(--shadow); }
.guide-topic-card.overview-card { background: var(--ink); color: white; border-color: var(--ink); }
.guide-topic-card .topic-label { color: var(--accent); font-size: 11px; text-transform: uppercase; font-weight: 800; letter-spacing: .12em; }
.guide-topic-card.overview-card .topic-label { color: #f4bd5c; }
.guide-topic-card h3 { font-family: "Playfair Display", serif; font-size: 27px; line-height: 1.15; font-weight: 500; margin: 16px 0 10px; }
.guide-topic-card p { color: var(--muted); font-size: 14px; margin: 0 0 24px; }
.guide-topic-card.overview-card p { color: rgba(255,255,255,.72); }
.topic-arrow { margin-top: auto; font-size: 13px; font-weight: 800; }
.article-hero { padding: 88px 0 66px; background: var(--soft); }
.article-hero h1 { font-family: "Playfair Display", serif; font-size: clamp(48px,7vw,88px); font-weight: 500; line-height: 1.02; letter-spacing: -.045em; margin: 0; max-width: 980px; }
.article-hero > .container > p:last-child { max-width: 780px; font-size: 18px; color: var(--muted); margin: 24px 0 0; }
/* Tool pages: line-drawn hero illustration next to the title */
.article-hero.tool-hero .container {
  display: grid;
  grid-template-columns: 1fr minmax(150px, 260px);
  gap: 40px;
  align-items: center;
}
@media (max-width: 680px) {
  .article-hero.tool-hero .container { grid-template-columns: 1fr; gap: 20px; }
  .tool-hero .hero-illustration { grid-column: auto; grid-row: auto; max-width: 180px; margin: 0 auto; }
  .article-hero h1 { font-size: clamp(34px, 9vw, 48px); }
  .page-hero h1 { font-size: clamp(34px, 10vw, 55px); }
}
.tool-hero .hero-illustration {
  grid-column: 2;
  grid-row: 1 / 5;
  width: 100%;
}
.tool-hero .hero-illustration svg {
  width: 100%;
  height: auto;
  display: block;
}
/* Toolkit hero icon: transparent, floats on the light hero like Option B — no card/frame */
.tool-hero .hero-illustration {
  background: transparent;
  border: 0;
  padding: 0;
}
.tool-hero .hero-illustration .mag {
  transform-box: fill-box;
  transform-origin: center;
  animation: magScan 3.4s ease-in-out infinite;
}
@keyframes magScan {
  0%, 100% { transform: translate(-4px, 0) rotate(-2deg); }
  50%      { transform: translate(4px, 0) rotate(2deg); }
}
@media (prefers-reduced-motion: reduce) {
  .tool-hero .hero-illustration .mag { animation: none; }
}
/* Toolkit hero: each tool's intrinsic micro-motion (subtle, reduced-motion safe) */
.tool-hero .hero-illustration [class^="anim-"] { transform-box: fill-box; transform-origin: center; }
.tool-hero .hero-illustration .anim-spin  { animation: thSpin 9s linear infinite; }
.tool-hero .hero-illustration .anim-tilt  { animation: thTilt 4.5s ease-in-out infinite; }
.tool-hero .hero-illustration .anim-bob   { animation: thBob 3.2s ease-in-out infinite; }
.tool-hero .hero-illustration .anim-pulse { animation: thPulse 2.6s ease-in-out infinite; }
.tool-hero .hero-illustration .anim-swap  { animation: thSwap 3s ease-in-out infinite; }
.tool-hero .hero-illustration .anim-wave  { animation: thWave 2.4s ease-in-out infinite; }
.tool-hero .hero-illustration .anim-clock { transform-box: view-box; transform-origin: 120px 92px; animation: thSpin 8s linear infinite; }
@keyframes thSpin  { to { transform: rotate(360deg); } }
@keyframes thTilt  { 0%,100% { transform: rotate(-3deg); } 50% { transform: rotate(3deg); } }
@keyframes thBob   { 0%,100% { transform: translateY(-3px); } 50% { transform: translateY(3px); } }
@keyframes thPulse { 0%,100% { transform: scale(1); } 50% { transform: scale(1.05); } }
@keyframes thSwap  { 0%,100% { transform: translateX(-3px); } 50% { transform: translateX(3px); } }
@keyframes thWave  { 0%,100% { transform: scale(1); opacity: .55; } 50% { transform: scale(1.08); opacity: 1; } }
@media (prefers-reduced-motion: reduce) {
  .tool-hero .hero-illustration [class^="anim-"] { animation: none !important; }
}
@media (max-width: 900px) {
  .article-hero.tool-hero .container { grid-template-columns: 1fr; text-align: center; }
  .tool-hero .hero-illustration {
    grid-column: 1;
    grid-row: 1;
    max-width: 190px;
    margin: 0 auto 8px;
  }
  .article-hero.tool-hero h1,
  .article-hero.tool-hero > .container > p:last-child { margin-left: auto; margin-right: auto; }
}
.article-layout-section { padding: 72px 0 110px; }
.article-layout { display: grid; grid-template-columns: 280px minmax(0, 640px); justify-content: center; gap: 56px; }
.article-sidebar { position: sticky; top: 116px; align-self: start; max-height: calc(100vh - 145px); overflow-y: auto; padding-right: 12px; }
.article-sidebar strong { display: block; margin: 18px 0 9px; font-size: 12px; text-transform: uppercase; letter-spacing: .12em; }
.article-sidebar a { display: block; color: var(--muted); font-size: 13px; padding: 6px 0; line-height: 1.35; overflow-wrap: break-word; }
.article-sidebar a:hover, .article-sidebar .current { color: var(--ink); font-weight: 750; }
.article-sidebar .back-link { color: var(--ink); font-weight: 800; margin-bottom: 18px; }
.sidebar-divider { border-top: 1px solid var(--line); margin: 18px 0; }
.article-body { min-width: 0; }
.article-body h2 { font-family: "Playfair Display", serif; font-size: 42px; line-height: 1.12; font-weight: 500; margin: 64px 0 18px; scroll-margin-top: 118px; }
.article-body h2:first-of-type { margin-top: 24px; }
.article-body h3 { font-size: 24px; margin: 40px 0 14px; line-height: 1.25; }
.article-body h4 { font-size: 17px; margin: 28px 0 9px; }
.article-body p { color: #494949; margin: 0 0 18px; font-size: 16px; line-height: 1.75; }
.article-body ul, .article-body ol { margin: 0 0 24px; padding-left: 24px; color: #494949; }
.article-body li { padding: 5px 0; line-height: 1.65; }
.article-body blockquote { margin: 30px 0; padding: 22px 26px; border-left: 3px solid var(--accent); background: var(--soft); font-family: "Playfair Display", serif; font-size: 23px; }
.article-body table { width: 100%; border-collapse: collapse; min-width: 560px; }
.article-body th, .article-body td { text-align: left; padding: 12px 14px; border-bottom: 1px solid var(--line); vertical-align: top; }
.article-body th { background: var(--soft); }
.table-scroll { overflow-x: auto; margin: 24px 0; border: 1px solid var(--line); border-radius: 12px; }
.tool-placeholder { border: 1px dashed #aaa; border-radius: 16px; padding: 22px; margin-bottom: 28px; background: #fafafa; }
.tool-placeholder p { margin: 5px 0 0; }
.article-end { margin-top: 70px; padding-top: 34px; border-top: 1px solid var(--line); }
@media (max-width: 1100px) {
  .feature-grid.five { grid-template-columns: repeat(3,1fr); }
  .chapter-jump { grid-template-columns: repeat(3,1fr); }
  .chapter-jump a { border-bottom: 1px solid var(--line); }
  .guide-topic-grid { grid-template-columns: repeat(2,1fr); }
}
@media (max-width: 900px) {
  .article-layout { grid-template-columns: 1fr; }
  .article-sidebar { position: static; max-height: none; display: none; }
  .kit-chapter-grid { grid-template-columns: 1fr; }
  .kit-chapter-card:last-child { grid-column: auto; }
}
@media (max-width: 680px) {
  .feature-grid.five, .chapter-jump, .guide-topic-grid { grid-template-columns: 1fr; }
  .chapter-jump a { border-right: 0; }
  .chapter-heading { grid-template-columns: 62px 1fr; }
  .chapter-number { font-size: 52px; }
  .kit-stats { grid-template-columns: 1fr 1fr; }
  .kit-chapter-card { grid-template-columns: 55px 1fr; padding: 22px; }
  .article-hero { padding: 68px 0 48px; }
  .article-body h2 { font-size: 34px; }
}

/* Shenzhen city guide */
.city-detail-hero {
  position: relative;
  min-height: 760px;
  color: white;
  background-size: cover;
  background-position: center;
  display: flex;
  align-items: stretch;
}
.shenzhen-detail-hero {
  background-image: linear-gradient(90deg, rgba(4,19,24,.8) 0%, rgba(5,20,25,.52) 45%, rgba(5,20,25,.16) 78%), url('shenzhen/pexels-jun-huil-140089-448299.webp');
}
.city-detail-hero-inner { width: 100%; min-height: inherit; display: flex; flex-direction: column; padding-top: 42px; padding-bottom: 34px; }
.breadcrumbs.light, .breadcrumbs.light a { color: rgba(255,255,255,.72); }
.city-detail-title { margin-top: auto; max-width: 760px; padding-bottom: 78px; }
.city-detail-title .eyebrow { color: #d8b777; }
.city-detail-title h1 { margin: 0; font-family: "Playfair Display", serif; font-size: clamp(76px,12vw,164px); line-height: .82; font-weight: 500; letter-spacing: -.07em; }
.city-detail-title > p:not(.eyebrow) { max-width: 700px; margin: 34px 0 32px; font-size: clamp(18px,2.2vw,25px); line-height: 1.45; color: rgba(255,255,255,.86); }
.city-hero-caption { font-size: 11px; color: rgba(255,255,255,.58); letter-spacing: .05em; text-transform: uppercase; }
.city-fact-bar { border-bottom: 1px solid var(--line); background: white; }
.city-facts { display: grid; grid-template-columns: repeat(4,1fr); }
.city-facts div { min-height: 128px; display: flex; flex-direction: column; justify-content: center; padding: 20px 26px; border-right: 1px solid var(--line); }
.city-facts div:first-child { border-left: 1px solid var(--line); }
.city-facts strong { font-family: "Playfair Display", serif; font-size: 28px; font-weight: 500; }
.city-facts span { margin-top: 5px; color: var(--muted); font-size: 12px; text-transform: uppercase; letter-spacing: .08em; }
.city-intro-grid { display: grid; grid-template-columns: .9fr 1.1fr; gap: 90px; align-items: center; }
.city-intro-copy h2, .food-banner h2, .city-product-cta h2 { margin: 0; font-family: "Playfair Display", serif; font-size: clamp(44px,5.5vw,72px); line-height: 1.02; font-weight: 500; letter-spacing: -.04em; }
.city-intro-copy .lead { font-size: 19px; color: #3f3f3f; }
.city-intro-copy > p { color: var(--muted); }
.compact-list li { padding: 10px 0; }
.shenzhen-collage { min-height: 680px; position: relative; }
.shenzhen-collage img { position: absolute; object-fit: cover; border-radius: 18px; box-shadow: var(--shadow); }
.collage-main { width: 70%; height: 76%; right: 0; top: 9%; }
.collage-small { width: 37%; height: 36%; left: 0; }
.collage-small.top { top: 0; }
.collage-small.bottom { bottom: 0; }
.itinerary-grid { display: grid; grid-template-columns: repeat(6,1fr); gap: 18px; }
.itinerary-card { grid-column: span 2; border: 1px solid var(--line); border-radius: 18px; padding: 28px; background: white; min-height: 300px; display: flex; flex-direction: column; }
.itinerary-card:nth-child(4), .itinerary-card:nth-child(5) { grid-column: span 3; }
.itinerary-day { color: var(--accent); font-size: 11px; font-weight: 800; letter-spacing: .14em; text-transform: uppercase; }
.itinerary-card h3 { margin: 48px 0 12px; font-family: "Playfair Display", serif; font-size: 29px; line-height: 1.12; font-weight: 500; }
.itinerary-card p { margin: 0 0 24px; color: var(--muted); font-size: 14px; }
.itinerary-card a { margin-top: auto; font-size: 13px; font-weight: 800; }
.city-days { padding-top: 0; }
.city-day { display: grid; grid-template-columns: 1.05fr .95fr; min-height: 650px; margin-bottom: 28px; background: #f4f3ef; border-radius: 22px; overflow: hidden; scroll-margin-top: 120px; }
.city-day.reverse { grid-template-columns: .95fr 1.05fr; }
.city-day.reverse .city-day-image { order: 2; }
.city-day-image img { width: 100%; height: 100%; object-fit: cover; }
.city-day-copy { padding: clamp(42px,6vw,84px); align-self: center; }
.city-day-copy h2 { margin: 0; font-family: "Playfair Display", serif; font-size: clamp(38px,4.4vw,58px); line-height: 1.04; font-weight: 500; letter-spacing: -.035em; }
.city-day-copy > p:not(.eyebrow) { color: var(--muted); font-size: 16px; }
.route-points { display: flex; flex-wrap: wrap; gap: 8px; margin: 28px 0; }
.route-points span { border: 1px solid #c8c6bf; border-radius: 999px; padding: 7px 12px; font-size: 12px; background: rgba(255,255,255,.6); }
.day-note { padding-top: 20px; border-top: 1px solid #d6d3cb; font-size: 13px !important; }
.essential-grid { display: grid; grid-template-columns: repeat(4,1fr); border-top: 1px solid var(--line); border-left: 1px solid var(--line); }
.essential-grid article { min-height: 300px; padding: 30px; border-right: 1px solid var(--line); border-bottom: 1px solid var(--line); background: white; }
.essential-grid article > span { font-family: "Playfair Display", serif; font-size: 44px; color: var(--accent); }
.essential-grid h3 { margin: 62px 0 10px; font-family: "Playfair Display", serif; font-size: 27px; font-weight: 500; }
.essential-grid p { margin: 0; color: var(--muted); font-size: 14px; }
.food-banner { min-height: 480px; border-radius: 22px; padding: clamp(38px,7vw,86px); color: white; display: grid; grid-template-columns: 1fr 1fr; gap: 70px; align-items: end; background: linear-gradient(90deg,rgba(5,26,31,.9),rgba(5,26,31,.55)), url('shenzhen/DSCF2644.webp') center/cover; }
.food-banner .eyebrow { color: #d8b777; }
.food-banner p { color: rgba(255,255,255,.75); max-width: 600px; }
.food-tags { display: flex; flex-wrap: wrap; gap: 10px; align-content: end; }
.food-tags span { border: 1px solid rgba(255,255,255,.45); background: rgba(0,0,0,.15); border-radius: 999px; padding: 9px 14px; font-size: 13px; }
.city-product-cta { display: grid; grid-template-columns: 1.3fr .7fr; gap: 70px; padding: clamp(42px,7vw,82px); border-radius: 22px; background: var(--soft); align-items: center; }
.city-product-cta > div:first-child > p:last-child { color: var(--muted); max-width: 720px; }
.city-commerce-box { background: white; border: 1px solid var(--line); border-radius: 18px; padding: 30px; display: grid; gap: 14px; }
.city-commerce-box strong { font-family: "Playfair Display", serif; font-size: 40px; font-weight: 500; }
.city-commerce-box p { margin: 0; color: var(--muted); }
.city-source-note { margin-top: 26px; }
.city-card.shenzhen { --city-bg: linear-gradient(160deg,rgba(3,22,28,.08),rgba(3,22,28,.78)), url('shenzhen/pexels-jun-huil-140089-448299.webp') center/cover; }
.catalog-image.shenzhen-photo { background: linear-gradient(rgba(4,20,25,.15),rgba(4,20,25,.55)), url('shenzhen/pexels-jun-huil-140089-448299.webp') center/cover; color: white; }
@media (max-width: 1050px) {
  .city-intro-grid, .city-product-cta { grid-template-columns: 1fr; }
  .city-facts { grid-template-columns: repeat(2,1fr); }
  .city-facts div:nth-child(odd) { border-left: 1px solid var(--line); }
  .itinerary-grid { grid-template-columns: repeat(2,1fr); }
  .itinerary-card, .itinerary-card:nth-child(4), .itinerary-card:nth-child(5) { grid-column: auto; }
  .itinerary-card:last-child { grid-column: 1 / -1; }
  .essential-grid { grid-template-columns: repeat(2,1fr); }
  .food-banner { grid-template-columns: 1fr; }
}
@media (max-width: 780px) {
  .city-detail-hero { min-height: 690px; }
  .city-detail-title { padding-bottom: 42px; }
  .city-detail-title h1 { font-size: 82px; }
  .city-detail-title .button-row { gap: 8px; }
  .city-facts { grid-template-columns: 1fr; }
  .city-facts div, .city-facts div:nth-child(odd) { border-left: 1px solid var(--line); border-bottom: 1px solid var(--line); }
  .shenzhen-collage { min-height: 520px; }
  .city-day, .city-day.reverse { grid-template-columns: 1fr; }
  .city-day.reverse .city-day-image { order: 0; }
  .city-day-image { min-height: 360px; }
  .itinerary-grid, .essential-grid { grid-template-columns: 1fr; }
  .itinerary-card:last-child { grid-column: auto; }
  .food-banner { min-height: 570px; }
}

/* Beijing city guide */
.beijing-detail-hero {
  background-image: linear-gradient(90deg, rgba(28,12,8,.84) 0%, rgba(28,12,8,.5) 48%, rgba(28,12,8,.12) 82%), url('beijing/pexels-da-na-461418424-34502247.webp');
  background-position: center 42%;
}
.city-collage { min-height: 680px; position: relative; }
.city-collage img { position: absolute; object-fit: cover; border-radius: 18px; box-shadow: var(--shadow); }
.beijing-collage .collage-main { object-position: 62% center; }
.beijing-collage .collage-small.top { object-position: 55% center; }
.beijing-collage .collage-small.bottom { object-position: center 58%; }
.city-day-image.map-day-image { background: #eee8dc; padding: clamp(20px,3vw,48px); display: grid; place-items: center; }
.city-day-image.map-day-image img { object-fit: contain; height: auto; max-height: 100%; border-radius: 12px; }
.beijing-maps { overflow: hidden; }
.route-map-grid { display: grid; grid-template-columns: repeat(2,minmax(0,1fr)); gap: 22px; }
.route-map-card { margin: 0; border: 1px solid var(--line); border-radius: 20px; overflow: hidden; background: white; }
.route-map-card.wide { grid-column: 1 / -1; }
.route-map-card img { width: 100%; aspect-ratio: 4/3; object-fit: contain; display: block; background: #f0ece3; padding: 16px; }
.route-map-card.wide img { aspect-ratio: 2/1; }
.route-map-card figcaption { padding: 20px 22px 22px; display: flex; justify-content: space-between; gap: 20px; align-items: baseline; border-top: 1px solid var(--line); }
.route-map-card figcaption strong { font-family: "Playfair Display", serif; font-size: 23px; font-weight: 500; }
.route-map-card figcaption span { color: var(--muted); font-size: 13px; text-align: right; }
.beijing-food-banner { background: linear-gradient(90deg,rgba(41,13,7,.91),rgba(41,13,7,.48)), url('beijing/pexels-ainc-t-76908403-29179710.webp') center 62%/cover; }
.city-card.beijing { --city-bg: linear-gradient(160deg,rgba(48,14,7,.04),rgba(35,10,5,.8)), url('beijing/pexels-da-na-461418424-34502247.webp') center/cover; }
.catalog-image.beijing-photo { background: linear-gradient(rgba(43,12,6,.12),rgba(43,12,6,.58)), url('beijing/pexels-mic-oller-2959176-18706744.webp') center/cover; color: white; }
@media (max-width: 780px) {
  .city-collage { min-height: 520px; }
  .route-map-grid { grid-template-columns: 1fr; }
  .route-map-card.wide { grid-column: auto; }
  .route-map-card.wide img, .route-map-card img { aspect-ratio: 4/3; }
  .route-map-card figcaption { display: grid; }
  .route-map-card figcaption span { text-align: left; }
}

/* Guangzhou city guide */
.guangzhou-detail-hero {
  background-image: linear-gradient(90deg, rgba(15,18,20,.86) 0%, rgba(15,18,20,.54) 48%, rgba(15,18,20,.12) 82%), url('guangzhou/photos/pexels-clarence-chan-2160207969-36949770.webp');
  background-position: center 48%;
}
.guangzhou-collage .collage-main { object-position: center 58%; }
.guangzhou-collage .collage-small.top { object-position: center center; }
.guangzhou-collage .collage-small.bottom { object-position: center 44%; }
.guangzhou-food-banner { background: linear-gradient(90deg,rgba(48,18,8,.92),rgba(48,18,8,.48)), url('guangzhou/photos/pexels-kitsun-yuen-49565104-7614896.webp') center 54%/cover; }
.city-card.guangzhou { --city-bg: linear-gradient(160deg,rgba(40,12,5,.06),rgba(35,10,4,.8)), url('guangzhou/photos/pexels-clarence-chan-2160207969-36949770.webp') center/cover; }
.catalog-image.guangzhou-photo { background: linear-gradient(rgba(34,13,7,.12),rgba(34,13,7,.6)), url('guangzhou/photos/pexels-clarence-chan-2160207969-36949770.webp') center 42%/cover; color: white; }


/* Shanghai city guide */
.shanghai-detail-hero {
  background-image: linear-gradient(90deg, rgba(6,17,28,.86) 0%, rgba(6,17,28,.55) 48%, rgba(6,17,28,.10) 82%), url('shanghai/photos/hero.webp');
  background-position: center 52%;
}
.shanghai-collage .collage-main { object-position: center 38%; }
.shanghai-collage .collage-small.top { object-position: center 54%; }
.shanghai-collage .collage-small.bottom { object-position: center 48%; }
.shanghai-food-banner { background: linear-gradient(90deg,rgba(5,16,27,.94),rgba(5,16,27,.48)), url('shanghai/photos/street-night.webp') center 54%/cover; }
.city-card.shanghai { --city-bg: linear-gradient(160deg,rgba(4,15,27,.04),rgba(4,13,24,.82)), url('shanghai/photos/hero.webp') center 52%/cover; }
.catalog-image.shanghai-photo { background: linear-gradient(rgba(5,15,26,.10),rgba(5,15,26,.62)), url('shanghai/photos/hero.webp') center 52%/cover; color: white; }


/* ===== Global guide rail (W1 navigation: left dark collapsible chapter rail) ===== */
body.has-guide-rail { padding-left: 292px; transition: padding-left .26s ease; }
body.rail-collapsed { padding-left: 0; }
.guide-rail {
  position: fixed; top: 0; left: 0; bottom: 0; width: 292px;
  background: #16130f; color: #e9e4dc; z-index: 60;
  display: flex; flex-direction: column; overflow-y: auto;
  transition: transform .26s ease; border-right: 1px solid rgba(255,255,255,.06);
}
body.rail-collapsed .guide-rail { transform: translateX(-100%); }
.rail-head { display: flex; align-items: center; justify-content: space-between; padding: 16px 16px 12px; border-bottom: 1px solid rgba(255,255,255,.08); }
.rail-brand img { height: 44px; width: auto; }
.rail-close { background: transparent; border: 0; color: #cfc7bb; font-size: 26px; line-height: 1; cursor: pointer; width: 44px; height: 44px; border-radius: 8px; }
.rail-close:hover { background: rgba(255,255,255,.08); }
.rail-nav { padding: 8px 12px 48px; }
.rail-chapter { border-bottom: 1px solid rgba(255,255,255,.06); }
.rail-chapter-head {
  width: 100%; display: flex; align-items: center; gap: 12px; padding: 14px 10px;
  background: transparent; border: 0; color: #e9e4dc; cursor: pointer; text-align: left; font: inherit;
}
.rail-chapter-head:hover { background: rgba(255,255,255,.05); }
/* Tier 1 — Chapter (section header): dominant, numbered, brightest */
.rail-num { font-family: "Playfair Display", serif; color: var(--accent); font-size: 18px; min-width: 26px; }
.rail-title { flex: 1; font-weight: 700; font-size: 14.5px; letter-spacing: .01em; color: #f2ede4; }
.rail-caret { transition: transform .2s; color: #9a9189; font-size: 12px; }
.rail-chapter.open .rail-caret { transform: rotate(90deg); }
/* Tier 3 — leaf page links (plain topics directly under a chapter) */
/* Smooth expand/collapse via grid-template-rows 0fr→1fr: elegant, height-adaptive, no easing tail */
.rail-topics { display: grid; grid-template-rows: 0fr; transition: grid-template-rows 0.38s cubic-bezier(0.22, 1, 0.36, 1); }
.rail-chapter.open .rail-topics { grid-template-rows: 1fr; }
.rail-topics > .rail-topics-inner { overflow: hidden; min-height: 0; padding: 4px 0 14px 38px; }
.rail-topic { display: block; padding: 12px 12px; color: #b7afa4; font-size: 14px; font-weight: 400; border-radius: 8px; }
.rail-topic:hover { color: #fff; background: rgba(255,255,255,.05); }
.rail-topic.active { color: #fff; background: var(--accent); font-weight: 700; }
.rail-chapter.disabled .rail-chapter-head { cursor: default; color: #8a827a; }
/* Active chapter — the section containing the current page */
.rail-chapter.active-chapter .rail-chapter-head { background: rgba(186,47,42,.12); }
.rail-chapter.active-chapter .rail-title { color: #fff; }
.rail-chapter.active-chapter .rail-num { color: #fff; }
/* Active group — the sub-category (e.g. Connectivity) containing the current page */
.rail-group.active-group .rail-group-head { color: #fff; background: rgba(186,47,42,.1); font-weight: 600; }
.rail-group.active-group .rail-group-title { color: #fff; font-weight: 600; }
/* Tier 2 — Group / sub-category (Connectivity, Essential Apps): rendered exactly like a
   regular topic (same font/size as .rail-topic) so it blends in with the other entries;
   the caret + the indented children beneath it are what signal it's a parent, not a leaf */
.rail-group { margin: 0; }
.rail-group-head { display: flex; align-items: center; gap: 8px; width: 100%; padding: 12px 12px; background: none; border: 0; color: #b7afa4; font: inherit; cursor: pointer; text-align: left; border-radius: 8px; }
.rail-group-head:hover { color: #fff; background: rgba(255,255,255,.05); }
.rail-group-title { flex: 1; font-weight: 400; font-size: 13px; letter-spacing: .01em; text-transform: none; color: inherit; }
.rail-group .rail-caret { transition: transform .2s; color: #9a9189; font-size: 12px; }
.rail-group.open .rail-caret { transform: rotate(90deg); }
/* Tier 3 — group children (eSIM, VPN, SIM Card, ...): indented further under the group label,
   with a thin accent rule so the parent→child relationship reads at a glance */
.rail-subtopics { display: grid; grid-template-rows: 0fr; transition: grid-template-rows 0.34s cubic-bezier(0.22, 1, 0.36, 1); }
.rail-group.open .rail-subtopics { grid-template-rows: 1fr; }
.rail-subtopics > .rail-subtopics-inner { overflow: hidden; min-height: 0; padding: 3px 0 6px 16px; }
/* Respect users who prefer reduced motion */
@media (prefers-reduced-motion: reduce) {
  .rail-topics, .rail-subtopics { transition: none; }
}
.rail-sub { display: block; margin: 2px 0 2px 4px; padding: 13px 12px; color: #b7afa4; font-size: 13px; font-weight: 400; border-radius: 8px; border-left: 2px solid rgba(186,47,42,.5); }
.rail-sub:hover { color: #fff; background: rgba(255,255,255,.05); }
.rail-sub.active { color: #fff; background: var(--accent); font-weight: 700; border-left-color: var(--accent); }
.cte-hub-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(240px, 1fr)); gap: 16px; margin: 28px 0; }
.cte-hub-card { display: block; padding: 20px; background: #fff; border: 1px solid rgba(0,0,0,.08); border-radius: 14px; text-decoration: none; color: inherit; box-shadow: 0 1px 2px rgba(0,0,0,.04); transition: transform .15s, box-shadow .15s, border-color .15s; }
.cte-hub-card:hover { transform: translateY(-3px); box-shadow: 0 12px 28px rgba(0,0,0,.12); border-color: var(--accent); }
.cte-hub-kicker { font-size: 11px; letter-spacing: .08em; text-transform: uppercase; color: var(--accent); font-weight: 700; }
.cte-hub-card h3 { margin: 8px 0 6px; font-size: 19px; }
.cte-hub-card p { margin: 0 0 14px; font-size: 14px; color: #5b554d; line-height: 1.55; }

/* Connectivity comparison (02-connectivity.html) */
.cte-cmp-defs { display: grid; grid-template-columns: repeat(auto-fit, minmax(210px, 1fr)); gap: 14px; margin: 22px 0; }
.cte-cmp-def { padding: 15px 17px; background: #fff; border: 1px solid rgba(0,0,0,.08); border-radius: 14px; }
.cte-cmp-def .lbl { font-size: 11px; letter-spacing: .05em; text-transform: uppercase; color: var(--accent); font-weight: 700; }
.cte-cmp-def h4 { margin: 5px 0 6px; font-size: 16px; font-family: inherit; }
.cte-cmp-def p { margin: 0; font-size: 13px; color: #5b554d; line-height: 1.55; }
.cte-cmp-opts { margin: 28px 0; }
.cte-cmp-opt { padding: 18px 0; border-top: 1px solid var(--line); }
.cte-cmp-opt h3 { margin: 0 0 8px; display: flex; flex-wrap: wrap; align-items: center; gap: 10px; }
.cte-cmp-opt p { margin: 0 0 12px; }
.cte-cmp-pc { display: grid; grid-template-columns: 1fr 1fr; gap: 16px; }
.cte-cmp-pc h5 { margin: 0 0 6px; font-size: 12px; text-transform: uppercase; letter-spacing: .04em; }
.cte-cmp-pc ul { margin: 0; padding-left: 18px; }
.cte-cmp-pc li { font-size: 13.5px; line-height: 1.6; padding: 2px 0; }
.cte-cmp-pros h5 { color: #2e7d32; }
.cte-cmp-cons h5 { color: #c0392b; }
.cte-cmp-warn { margin: 12px 0 14px; padding: 13px 17px; border-left: 3px solid #c0392b; background: rgba(192,57,43,.06); border-radius: 0 10px 10px 0; font-size: 14px; line-height: 1.6; }
.cte-cmp-block { margin: 14px 0; padding: 15px 18px; border: 1.5px solid #c0392b; background: rgba(192,57,43,.10); border-radius: 12px; font-size: 14.5px; line-height: 1.65; font-weight: 500; }
.cte-cmp-block strong { color: #c0392b; }
.cte-cmp-block b { color: #1c1c1c; }
.cte-cmp-tag { display: inline-block; font-size: 11px; font-weight: 700; letter-spacing: .02em; text-transform: uppercase; padding: 2px 9px; border-radius: 999px; white-space: nowrap; }
.cte-cmp-tag.yes { background: rgba(46,125,50,.12); color: #2e7d32; }
.cte-cmp-tag.no { background: rgba(192,57,43,.10); color: #c0392b; }
.cte-cmp-tag.warn { background: rgba(230,160,30,.16); color: #a9720a; }
@media (max-width: 680px) { .cte-cmp-pc { grid-template-columns: 1fr; } }
.cte-hub-arrow { font-weight: 700; color: var(--accent); font-size: 14px; }

/* --- Connectivity Picker tool output (.cte-rec-*) --- */
.cte-rec { margin: 6px 0 2px; }
.cte-rec-head { display: flex; align-items: center; gap: 14px; margin-bottom: 8px; }
.cte-rec-badge { display: inline-flex; align-items: center; justify-content: center; min-width: 70px; height: 42px; padding: 0 14px; border-radius: 12px; background: var(--brand-primary); color: #fff; font-weight: 700; font-size: 15px; letter-spacing: .01em; white-space: nowrap; }
.cte-rec-head strong { display: block; font-size: 17px; font-family: inherit; line-height: 1.2; }
.cte-rec-price { font-size: 12.5px; color: var(--muted); font-weight: 600; }
.cte-rec-reason { margin: 0 0 12px; font-size: 14px; line-height: 1.6; color: var(--ink); }
.cte-rec-caps { display: grid; grid-template-columns: repeat(3, 1fr); gap: 8px; margin: 0 0 14px; }
.cte-rec-cap { display: flex; flex-direction: column; gap: 4px; padding: 9px 11px; background: #fff; border: 1px solid var(--line); border-radius: 10px; }
.cte-rec-cap .k { font-size: 10.5px; color: var(--muted); text-transform: uppercase; letter-spacing: .03em; }
.cte-rec-sub { font-weight: 700; font-size: 14px; margin: 14px 0 6px; font-family: inherit; }
.cte-rec-sub.cte-rec-avoid-h { color: #c0392b; }
.cte-rec-list { margin: 0; padding: 0; list-style: none; }
.cte-rec-list li { padding: 8px 0; border-top: 1px solid var(--line); font-size: 13.5px; line-height: 1.55; }
.cte-rec-list li b { color: var(--brand-primary); }
.cte-rec-list.cte-rec-avoid li b { color: #c0392b; }
.cte-rec-steps { display: grid; grid-template-columns: 1fr 1fr; gap: 16px; margin: 6px 0 4px; }
.cte-rec-steps h5 { margin: 0 0 6px; font-size: 12px; text-transform: uppercase; letter-spacing: .04em; color: var(--brand-primary); font-family: inherit; }
.cte-rec-steps ul { margin: 0; padding-left: 18px; }
.cte-rec-steps li { font-size: 13px; line-height: 1.6; padding: 2px 0; }
@media (max-width: 680px) { .cte-rec-caps { grid-template-columns: repeat(2, 1fr); } .cte-rec-steps { grid-template-columns: 1fr; } }
[data-theme="dark"] .cte-rec-cap { background: #1c1c1e; border-color: rgba(255,255,255,.12); }
[data-theme="dark"] .cte-hub-card { background: #1c1c1e; border-color: rgba(255,255,255,.12); }
[data-theme="dark"] .cte-hub-card p { color: #b7afa4; }
.rail-soon { font-size: 10px; text-transform: uppercase; letter-spacing: .1em; background: rgba(255,255,255,.1); color: #cfc7bb; padding: 2px 7px; border-radius: 999px; }
.rail-reopen {
  position: fixed; top: 120px; left: 14px; z-index: 61; display: none;
  width: 44px; height: 44px; border-radius: 10px; border: 1px solid var(--line);
  background: #fff; color: var(--ink); font-size: 18px; cursor: pointer; box-shadow: var(--shadow);
}
/* Always show the reopen control while the rail is collapsed (desktop + mobile) */
body.rail-collapsed .rail-reopen { display: flex; align-items: center; justify-content: center; }
/* tap-scrim behind the rail when open on mobile */
.rail-backdrop { display: none; position: fixed; inset: 0; background: rgba(0,0,0,.45); z-index: 59; }
/* repurpose article layout: body left, in-page TOC right */
body.has-guide-rail .article-layout { grid-template-columns: minmax(0,1fr) 280px; }
body.has-guide-rail .article-layout > .article-sidebar { order: 2; }
body.has-guide-rail .article-layout > .article-body { order: 1; }
@media (max-width: 980px) {
  body.has-guide-rail { padding-left: 0; }
  /* Mobile: collapse the in-page TOC column so the article body isn't crushed
     beside the 280px rail column. Must match the specificity of the desktop
     rule `body.has-guide-rail .article-layout` (line ~902) to win on mobile. */
  body.has-guide-rail .article-layout { grid-template-columns: 1fr; }
  /* lock background scroll only while the rail drawer is open on mobile */
  body.has-guide-rail:not(.rail-collapsed) { overflow: hidden; }
  .guide-rail { transform: translateX(-100%); max-width: 86vw; }
  /* on mobile the rail is a drawer: hidden when collapsed, shown otherwise */
  body:not(.rail-collapsed) .guide-rail { transform: translateX(0); }
  body.rail-collapsed .rail-reopen { display: flex; top: 120px; }
  .rail-backdrop { display: none; }
  body:not(.rail-collapsed) .rail-backdrop { display: block; }
}

/* guide rail: in-product text label (logo removed) */
.rail-brand-text{font-family: "Playfair Display", serif;font-weight:700;font-size:15px;letter-spacing:.02em;color:#fff;opacity:.92;white-space:nowrap;}

/* ===== Header site search (expand-on-click) ===== */
.site-search {
  position: relative;
  display: inline-flex;
  align-items: center;
  /* Keep wrapper visually transparent in the flex flow */
}
.site-search .icon-link {
  display: inline-grid;
}
.search-dropdown {
  position: absolute;
  top: calc(100% + 10px);
  right: 0;
  width: min(420px, 88vw);
  background: #fff;
  border: 1px solid var(--line, #deddd8);
  border-radius: 14px;
  box-shadow: 0 16px 44px rgba(20,20,20,.14);
  padding: 12px;
  display: none !important;
  z-index: 200;
}
.site-search.open .search-dropdown {
  display: block !important;
}
.search-input {
  width: 100%; padding: 12px 14px; border: 1px solid var(--line); border-radius: 10px;
  font-size: 15px; outline: none; background: #fff; color: var(--ink);
}
.search-input:focus { border-color: var(--accent); box-shadow: 0 0 0 3px rgba(186,47,42,.12); }
.search-results { margin-top: 8px; max-height: 60vh; overflow-y: auto; }
.search-result { display: block; padding: 10px 12px; border-radius: 10px; color: var(--ink); }
.search-result:hover, .search-result:focus { background: var(--soft); }
.search-result .sr-cat { font-size: 11px; text-transform: uppercase; letter-spacing: .08em; color: var(--accent); margin-bottom: 2px; }
.search-result .sr-title { font-weight: 700; font-size: 14px; line-height: 1.3; }
.search-result .sr-desc { color: var(--muted); font-size: 13px; margin-top: 2px; line-height: 1.4; }
.search-empty { color: var(--muted); font-size: 14px; padding: 10px 12px; }
@media (max-width: 680px) {
  .search-dropdown { right: -8px; }
}

/* Placeholder content skeleton */
.placeholder-section{margin:28px 0 24px;}
.placeholder-section h2{font-family: "Playfair Display", serif;font-size:22px;font-weight:700;margin:0 0 16px;color:var(--ink);}
.placeholder-section p{color:var(--muted);margin:0 0 14px;}
.placeholder-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(220px,1fr));gap:16px;margin:18px 0;}
.placeholder-card{background:#fff;border:1px solid var(--line);border-radius:14px;padding:18px;box-shadow:0 2px 8px rgba(0,0,0,.03);}
.placeholder-card h3{font-size:15px;font-weight:700;margin:0 0 10px;color:var(--ink);display:flex;align-items:center;gap:8px;}
.placeholder-card h3 .dot{width:8px;height:8px;border-radius:50%;background:var(--accent);flex-shrink:0;}
.placeholder-card ul{margin:0;padding-left:18px;color:var(--muted);font-size:14px;line-height:1.55;}
.placeholder-card li{margin-bottom:6px;}
.placeholder-banner{background:#faf9f7;border:1px dashed var(--line);border-radius:14px;padding:18px 20px;margin:24px 0;text-align:center;}
.placeholder-banner p{margin:0;color:var(--muted);font-size:14px;}
.placeholder-banner strong{color:var(--accent);}
.related-list{display:flex;flex-wrap:wrap;gap:10px;margin:12px 0 0;}
.related-list a{display:inline-block;padding:8px 14px;background:#fff;border:1px solid var(--line);border-radius:999px;font-size:13px;color:var(--ink);text-decoration:none;transition:.2s;}
.related-list a:hover{border-color:var(--accent);color:var(--accent);}
.tool-related{margin-top:18px;padding-top:14px;border-top:1px solid var(--line);}
.tool-related-title{margin:0 0 8px;font-size:11px;font-weight:700;letter-spacing:.06em;text-transform:uppercase;color:var(--muted,#8a8a8a);}
.tool-related .related-list{margin-top:0;}

/* ── 1.5 Trust externalization: written-by-expats / fact-checked (compact tag row) ── */
.trust-tags{
  margin:48px 0 8px;
  display:flex;flex-wrap:wrap;align-items:center;gap:8px;
}
.affiliate-note{
  margin:36px 0 8px;
  padding:15px 18px;
  background:var(--soft);
  border:1px solid var(--line);
  border-left:3px solid var(--accent);
  border-radius:0 12px 12px 0;
  font-size:13.5px;
  line-height:1.6;
  color:var(--muted);
}
.affiliate-note p{ margin:0; }
.affiliate-cta{ margin:28px 0 10px; display:flex; flex-direction:column; align-items:flex-start; gap:12px; }
.trust-tag{
  display:inline-flex;align-items:center;gap:7px;
  padding:5px 13px;
  background:var(--soft);
  border:1px solid var(--line);
  border-radius:999px;
  font-size:12.5px;font-weight:500;color:var(--muted);
  white-space:nowrap;
}
.trust-tag .trust-check{
  flex-shrink:0;width:15px;height:15px;border-radius:50%;
  background:#10b981;color:#fff;
  display:inline-flex;align-items:center;justify-content:center;
  font-size:9px;font-weight:700;line-height:1;
}
html[data-theme="dark"] .trust-tag .trust-check{background:#34d399;}
.trust-tag .trust-sep{color:var(--line);font-weight:400;margin:0 2px;}
/* inline source citation for factual claims */
.source-note{
  display:inline-block;margin-left:6px;
  font-size:12px;color:var(--muted);font-style:italic;
}
.source-note::before{content:"\2014  ";}

/* ============================================================
   Interactive Tools (06 Traveler's Toolkit) — shared component styles
   Depends on: --accent #ba2f2a, --ink, --muted, --line, --shadow
   ============================================================ */
.tool-mount{display:block;margin:8px 0 28px;}
.tool-card{
  background:#fff;border:1px solid var(--line);border-radius:16px;
  padding:22px;margin-bottom:18px;box-shadow:0 1px 2px rgba(0,0,0,.04);
}
.tool-row{display:flex;flex-direction:column;gap:6px;margin-bottom:14px;}
.tool-row--inline{flex-direction:row;align-items:flex-end;gap:12px;flex-wrap:wrap;}
.tool-row--inline .tool-field{flex:1;min-width:120px;}
.tool-field{display:flex;flex-direction:column;gap:6px;margin-bottom:0;}
.tool-field-label{font-size:13px;font-weight:600;color:var(--ink);}
.tool-input,.tool-check{
  font:inherit;font-size:15px;color:var(--ink);
  padding:11px 12px;border:1px solid var(--line);border-radius:10px;background:#fff;
  width:100%;box-sizing:border-box;
}
.tool-input:focus{outline:3px solid rgba(186,47,42,.28);outline-offset:1px;border-color:var(--accent);}
.tool-check{width:auto;height:20px;transform:translateY(2px);}
.tool-swap{
  align-self:center;width:42px;height:42px;border-radius:10px;border:1px solid var(--line);
  background:#fff;color:var(--ink);font-size:18px;cursor:pointer;flex:0 0 auto;
  transition:background .15s,transform .15s;
}
.tool-swap:hover{background:#fbeaea;transform:rotate(180deg);}
.tool-out{margin-top:6px;}
.tool-result{display:block;font-size:15px;color:var(--ink);}
.tool-result-num{font-size:30px;font-weight:700;color:var(--accent);letter-spacing:-.5px;}
.tool-result-unit{font-size:15px;color:var(--muted);font-weight:600;}
.tool-result-note{display:block;margin-top:4px;font-size:12px;color:var(--muted);}
.tool-verdict{display:block;margin:2px 0 12px;padding:10px 12px;border-left:4px solid var(--brand-primary,#ba2f2a);background:var(--surface-2,#f6f2ee);border-radius:6px;font-weight:600;font-size:14px;line-height:1.4;color:var(--text,#171717);}
.tool-quick{display:flex;flex-wrap:wrap;gap:8px;margin:8px 0 2px;}
.tool-chip{font:inherit;font-size:13px;padding:5px 13px;border:1px solid var(--border,#e5e7eb);background:var(--paper,#fff);border-radius:999px;cursor:pointer;color:var(--text,#171717);transition:border-color .15s,color .15s;}
.tool-chip:hover{border-color:var(--brand-primary,#ba2f2a);color:var(--brand-primary,#ba2f2a);}
.tool-error{color:#b3261e;font-size:13px;margin:6px 0 0;}
.tool-hint{font-family:"Playfair Display","Times New Roman",serif;font-style:italic;font-size:14px;line-height:1.6;color:var(--muted);margin:16px 0 0;padding-top:13px;border-top:1px solid var(--line);letter-spacing:.005em;}
.tool-card .tool-map-link{display:inline-block;margin:6px 0 2px;padding:8px 14px;border-radius:10px;background:var(--accent);color:#fff;font-size:14px;font-weight:500;text-decoration:none;}
.tool-card .tool-map-link:hover{opacity:.9;}
.tool-fields{display:flex;flex-direction:column;gap:14px;margin-bottom:16px;}
.tool-submit{margin-bottom:14px;}
.tool-checks{display:flex;flex-wrap:wrap;gap:8px 16px;padding:4px 0;}
.tool-check-item{display:inline-flex;align-items:center;gap:6px;font-size:14px;color:var(--ink);cursor:pointer;}
.tool-card-actions{margin-top:16px;}
.tool-print-btn{cursor:pointer;}
.tool-info{margin-top:4px;}
/* Optional static reference block above a lookup field (e.g. plug-checker images). */
.tool-diagram{margin:0 0 14px;}
.tool-lookup-search{margin-bottom:10px;}
.tool-footnote{margin-top:16px;padding:13px 16px;background:var(--surface-2);border:1px solid var(--line);border-radius:12px;}
.tool-footnote-head{font-weight:700;margin:0 0 6px;font-size:14px;color:var(--ink);}
.tool-figgrid{display:grid;grid-template-columns:1fr 1fr;gap:10px;}
.tool-figcell{margin:0;background:var(--surface-2);border:1px solid var(--line);border-radius:10px;overflow:hidden;}
.tool-figcell img{display:block;width:100%;height:auto;background:#fff;}
.tool-figcell figcaption{font-size:11px;line-height:1.35;color:var(--muted);padding:6px 8px;text-align:center;letter-spacing:.01em;}
@media (max-width:520px){.tool-figgrid{grid-template-columns:1fr;}}
.lookup-grid{display:grid;grid-template-columns:auto 1fr;gap:6px 14px;margin:10px 0;align-items:center;}
.lookup-grid .lk{font-size:13px;color:var(--muted);}
.lookup-grid .lv{font-size:15px;font-weight:600;color:var(--ink);}
.policy-badge{
  display:inline-block;font-size:12px;font-weight:700;letter-spacing:.04em;
  padding:4px 10px;border-radius:999px;margin:6px 0;
}
.policy-VISAFREE,.policy-Works{background:#e7f4e8;color:#1d6b2e;}
.policy-TRANSIT240,.policy-INTERMITTENT{background:#fdf1dc;color:#9a6400;}
.policy-VISAREQUIRED,.policy-VISABLOCKED{background:#fbe3e1;color:#a3271d;}
/* calculator output */
.calc-out{margin-top:4px;}
.calc-line{display:flex;justify-content:space-between;gap:12px;padding:8px 0;border-bottom:1px dashed var(--line);font-size:15px;}
.calc-line:last-child{border-bottom:0;}
.calc-line span{color:var(--muted);}
.calc-line b{color:var(--ink);font-size:17px;}
.calc-walk b{color:var(--accent);}
.tool-tips{margin:12px 0 0;padding:0 0 0 18px;font-size:13px;color:var(--muted);line-height:1.55;}
.tool-tips li{margin:3px 0;}
/* printable cards (allergy / emergency / taxi) */
.tool-print{margin-top:14px;}
.print-card{
  border:2px solid var(--accent);border-radius:14px;padding:20px;background:#fffdf9;
  font-size:16px;line-height:1.6;color:var(--ink);
}
.print-card .pc-name{font-weight:700;margin:0 0 6px;}
.print-card .pc-en{margin:0 0 8px;}
.print-card .pc-zh{font-size:20px;font-weight:700;margin:0 0 8px;}
.print-card .pc-sev{display:inline-block;font-size:13px;font-weight:800;letter-spacing:.02em;padding:4px 10px;border-radius:999px;margin:0 0 8px;}
.pc-sev--mild{background:rgba(39,174,96,.15);color:#1e7d4f;}
.pc-sev--moderate{background:rgba(214,137,16,.16);color:#a05f00;}
.pc-sev--severe{background:#c0392b;color:#fff;}
.print-card .pc-big{font-size:26px;text-align:center;padding:10px 0;}
.print-card .pc-list{margin:8px 0;padding-left:20px;}
.print-card .pc-list li{margin:4px 0;}
.print-card .pc-foot{font-size:12px;color:var(--muted);margin:10px 0 0;border-top:1px dashed var(--line);padding-top:8px;}
.print-card .pc-head{font-size:12px;font-weight:700;letter-spacing:.08em;text-transform:uppercase;color:var(--accent);margin:0 0 8px;}
.print-card .pc-phrases{display:grid;grid-template-columns:1fr 1fr;gap:8px;margin:6px 0 12px;}
.print-card .pc-phrases .pc-big{font-size:22px;margin:0;padding:8px 4px;background:rgba(186,47,42,.06);border-radius:10px;}
.print-card .pc-phrases .pc-big .pc-en{display:block;font-size:12px;font-weight:500;color:var(--muted);margin-top:2px;}
.print-card .pc-sub{display:block;font-size:11px;color:var(--muted);font-weight:500;margin-top:2px;}
/* zh phrase block */
.zh-phrase{font-size:20px;font-weight:700;color:var(--accent);margin:8px 0;}
/* calendar */
.tool-cal{list-style:none;margin:10px 0 0;padding:0;}
.tool-cal-item{border-left:2px solid var(--line);padding:6px 0 6px 12px;margin-bottom:8px;}
.tool-cal-row{display:flex;align-items:center;justify-content:space-between;gap:10px;}
.tool-cal-main{display:flex;flex-direction:column;gap:1px;min-width:0;}
.tool-cal-date{font-size:12px;color:var(--muted);font-weight:500;letter-spacing:.01em;}
.tool-cal-name{font-size:15px;font-weight:700;color:var(--ink);line-height:1.25;}
.tool-cal-note{font-size:12px;color:var(--muted);line-height:1.45;margin-top:3px;}
.tool-cal-kicker{font-size:11px;font-weight:700;color:var(--accent);text-transform:uppercase;letter-spacing:.06em;}
.tool-cal-badge{display:inline-block;font-size:12px;font-weight:600;padding:2px 9px;border-radius:999px;background:var(--surface-2);color:var(--ink);white-space:nowrap;}
.tool-cal-badge--now{background:var(--accent);color:#fff;}
.tool-cal-badge--upcoming{background:var(--surface-2);color:var(--ink);}
.tool-cal-item.is-featured{border-left:2px solid var(--accent);background:var(--surface-2);border-radius:0 10px 10px 0;padding:10px 12px 10px 14px;margin-bottom:12px;}
.tool-cal-item.is-featured .tool-cal-row{margin-bottom:4px;}
.tool-cal-item.is-featured .tool-cal-name{font-size:19px;margin:1px 0 2px;}
.tool-cal-item.is-featured .tool-cal-date{font-size:13px;}
/* visa checker result */
.tool-visa-result{margin-top:14px;}
.visa-hint{font-size:14px;color:var(--muted);margin:4px 0 0;}
.visa-badge{display:inline-block;font-size:13px;font-weight:800;letter-spacing:.06em;padding:5px 12px;border-radius:999px;margin:2px 0 10px;color:#fff;}
.visa-badge--free{background:#1f7a4d;}
.visa-badge--transit{background:#b5791a;}
.visa-badge--required{background:var(--accent);}
.visa-title{font-size:21px;font-weight:800;color:var(--ink);margin:0 0 8px;}
.visa-detail{font-size:15px;line-height:1.6;color:var(--ink);margin:0 0 10px;}
.visa-notes{margin:0 0 14px;padding-left:20px;font-size:14px;color:var(--muted);line-height:1.6;}
.visa-notes li{margin:5px 0;}
.visa-cta{display:inline-flex;align-items:center;justify-content:center;margin-top:18px;}
.visa-depart{display:flex;align-items:baseline;flex-wrap:wrap;gap:8px;margin:14px 0 4px;padding:12px 14px;background:var(--surface-2);border:1px solid var(--line);border-radius:12px;}
.visa-depart-label{font-size:13px;color:var(--muted);}
.visa-depart b{font-size:18px;color:var(--brand-primary);font-weight:800;}
.visa-depart-sub{font-size:12px;color:var(--muted);}
/* arrival-card stepper */
.tool-stepper{margin-bottom:8px;}
.ts-progress{display:flex;align-items:center;gap:12px;margin-bottom:14px;}
.ts-bar{flex:1;height:6px;border-radius:999px;background:var(--line);overflow:hidden;}
.ts-fill{display:block;height:100%;width:20%;background:var(--accent);border-radius:999px;transition:width .25s ease;}
.ts-count{font-size:12px;font-weight:600;color:var(--muted);white-space:nowrap;}
.ts-dots{list-style:none;display:flex;gap:10px;padding:0;margin:0 0 16px;flex-wrap:wrap;}
.ts-dot{box-sizing:border-box;width:38px;height:38px;border-radius:50%;display:grid;place-items:center;font-size:13px;line-height:1;font-weight:700;font-variant-numeric:tabular-nums;color:var(--muted);background:#fff;border:1px solid var(--line);cursor:pointer;transition:background .15s,color .15s,border-color .15s;}
.ts-dot:hover{border-color:var(--accent);}
.ts-dot.is-active{background:var(--accent);color:#fff;border-color:var(--accent);}
.ts-dot.is-done{background:#fbeaea;color:var(--accent);border-color:var(--accent);}
.ts-title{font-size:18px;font-weight:800;color:var(--ink);margin:0 0 10px;}
.ts-text{font-size:15px;line-height:1.65;color:var(--ink);}
.ts-text ul{margin:10px 0 0;padding-left:20px;}
.ts-text li{margin:5px 0;}
.ts-note{margin-top:12px;font-size:13px;line-height:1.55;color:var(--ink);background:#fbeaea;border-left:3px solid var(--accent);padding:10px 12px;border-radius:0 8px 8px 0;}
/* stepper split layout: left text + right image */
.ts-body{display:grid;grid-template-columns:1fr 1.2fr;gap:24px;align-items:center;}
.ts-left{min-width:0;}
.ts-img{display:flex;flex-direction:column;align-items:center;justify-content:center;}
.ts-img img{width:100%;max-height:620px;object-fit:contain;border-radius:10px;border:1px solid var(--line);display:block;background:#fafafa;cursor:zoom-in;transition:transform .2s ease,box-shadow .2s ease;}
.ts-img:hover img{transform:scale(1.02);box-shadow:0 12px 30px rgba(0,0,0,.12);}
.ts-img-cap{margin-top:6px;font-size:11.5px;color:var(--muted);text-align:center;}
.ts-lightbox{position:fixed;inset:0;z-index:9999;display:flex;align-items:center;justify-content:center;}
.ts-lightbox-backdrop{position:absolute;inset:0;background:rgba(0,0,0,.88);cursor:zoom-out;}
.ts-lightbox img{position:relative;z-index:1;max-width:92vw;max-height:92vh;object-fit:contain;border-radius:10px;box-shadow:0 24px 70px rgba(0,0,0,.45);cursor:zoom-out;}
html[data-theme="dark"] .ts-lightbox-backdrop{background:rgba(0,0,0,.92);}
.ts-nav{display:flex;gap:10px;margin-top:18px;}
.ts-nav .btn{flex:1;}
@media (max-width:640px){.ts-dots{gap:8px;}.ts-dot{width:32px;height:32px;font-size:12px;}.ts-nav .btn{flex:1 1 100%;}.ts-body{grid-template-columns:1fr;gap:14px;}.ts-img{order:2;}}
html[data-theme="dark"] .ts-dot{background:var(--surface-2);color:var(--muted);}
html[data-theme="dark"] .ts-note{background:rgba(186,47,42,.16);}
/* print: only the card when printing */
@media print{
  body *{visibility:hidden !important;}
  .tool-print,.tool-print *{visibility:visible !important;}
  .tool-print{position:absolute;left:0;top:0;width:100%;}
}
@media (max-width:640px){
  .tool-card{padding:16px;}
  .tool-result-num{font-size:26px;}
  .tool-row--inline{gap:8px;}
  .tool-swap{align-self:stretch;width:100%;height:38px;}
}
@media (prefers-reduced-motion:reduce){
  .tool-swap{transition:none;}
  .tool-swap:hover{transform:none;}
}

/* ============================================================
   Interactive Tools — "Sketch" hand-drawn skin (2026-08-01)
   Applied to EVERY .tool-card. The pencil-wobble lives only on
   a ::before border (filter:url(#sketch), injected by tools.js),
   so inner text & form controls stay crisp — no crooked boxes.
   Each card gets a hand-drawn icon top-right (added by tools.js).
   ============================================================ */
.tool-card{
  position:relative;
  background:#fff;
  border:0;
  border-radius:18px;
  padding:24px 26px 26px;
  margin-bottom:18px;
  box-shadow:4px 5px 0 rgba(43,38,34,.10);
  isolation:isolate;
}
.tool-card::before{
  content:"";
  position:absolute;
  inset:0;
  border:2.5px solid var(--ink);
  border-radius:18px;
  filter:url(#sketch);
  pointer-events:none;
  z-index:-1;
}
.tool-card > *{position:relative;z-index:1;}
/* tool header bar (Sketch skin) */
.tool-card .tool-header{
  display:flex;align-items:center;justify-content:space-between;gap:12px;
  margin:-24px -26px 18px;
  padding:12px 18px;
  background:var(--ink);
  color:#fff;
  border-radius:16px 16px 0 0;
  position:relative;z-index:2;
}
.tool-card .tool-header-title{
  font-family:"Inter",sans-serif;font-size:13px;font-weight:700;letter-spacing:.06em;text-transform:uppercase;
}
.tool-card .tool-header-status{
  display:flex;align-items:center;gap:6px;
  font-size:12px;font-weight:600;color:rgba(255,255,255,.85);
}
.tool-card .tool-header-dot{
  width:7px;height:7px;border-radius:50%;
  background:#2ecc71;box-shadow:0 0 0 3px rgba(46,204,113,.25);
}
html[data-theme="dark"] .tool-card .tool-header{background:#1a1a1a;}
@media (max-width:640px){
  .tool-card .tool-header{margin:-20px -20px 16px;padding:10px 15px;}
  .tool-card .tool-header-title{font-size:12px;}
}
/* top-right hand-drawn icon removed per request (rendered as a black box on some setups) */
.tool-card .tool-card-icon{
  display:none;
}
/* field rows no longer need to clear a top-right icon */
.tool-card .tool-field{padding-right:0;}
/* field rows: left-align all controls (prevents checkbox from centering) */
.tool-card .tool-field{align-items:flex-start;}
/* inputs / selects: clean rounded, no wobble */
.tool-card .tool-input,
.tool-card .tool-check{
  font:inherit;font-size:15px;font-weight:600;color:var(--ink);
  padding:11px 13px;
  border:2px solid var(--ink);
  border-radius:12px;
  background:#fff;
  box-sizing:border-box;
}
.tool-card .tool-input{width:100%;}
.tool-card select.tool-input{
  -webkit-appearance:none;appearance:none;cursor:pointer;
  padding-right:34px;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='8' viewBox='0 0 12 8'%3E%3Cpath fill='none' stroke='%23434343' stroke-width='2' stroke-linecap='round' stroke-linejoin='round' d='M1 1l5 5 5-5'/%3E%3C/svg%3E");
  background-repeat:no-repeat;
  background-position:right 13px center;
}
html[data-theme="dark"] .tool-card select.tool-input{
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='8' viewBox='0 0 12 8'%3E%3Cpath fill='none' stroke='%23cccccc' stroke-width='2' stroke-linecap='round' stroke-linejoin='round' d='M1 1l5 5 5-5'/%3E%3C/svg%3E");
  background-repeat:no-repeat;
  background-position:right 13px center;
}
.tool-card .tool-check{width:auto;height:20px;align-self:flex-start;margin-top:4px;}
.tool-card .tool-input:focus{
  outline:none;
  border-color:var(--accent);
  box-shadow:0 0 0 3px rgba(186,47,42,.16);
}
/* swap button */
.tool-card .tool-swap{
  align-self:center;
  width:44px;height:44px;
  border-radius:12px;
  border:2.5px solid var(--ink);
  background:#fff;color:var(--ink);
  font-size:18px;cursor:pointer;
  flex:0 0 auto;
  transition:background .15s,transform .15s;
}
.tool-card .tool-swap:hover{background:var(--accent);color:#fff;transform:rotate(180deg);}
/* primary / outline buttons inside tools */
.tool-card .btn-primary,
.tool-card .tool-submit,
.tool-card .visa-cta,
.tool-card .tool-print-btn{
  border:2.5px solid var(--ink);
  border-radius:12px;
  box-shadow:3px 3px 0 rgba(43,38,34,.18);
}
.tool-card .btn-primary:hover,
.tool-card .tool-submit:hover,
.tool-card .visa-cta:hover,
.tool-card .tool-print-btn:hover{
  transform:translate(-1px,-1px);
  box-shadow:4px 4px 0 rgba(43,38,34,.20);
}
.tool-card .btn-outline{border:2.5px solid var(--ink);border-radius:12px;}
/* visa & policy badges: hand-drawn outline */
.tool-card .visa-badge{border:2.5px solid currentColor;border-radius:999px;}
.tool-card .policy-badge{border:2px solid currentColor;}
/* calc output lines */
.tool-card .calc-line{border-bottom:1.5px dashed var(--line);}
/* printable cards keep their accent frame */
.tool-card .print-card{border:2.5px solid var(--accent);border-radius:14px;}
/* dark theme */
html[data-theme="dark"] .tool-card{
  background:var(--surface-2);
  box-shadow:4px 5px 0 rgba(0,0,0,.40);
}
html[data-theme="dark"] .tool-card .tool-input,
html[data-theme="dark"] .tool-card .tool-check{background:var(--surface-2);}
html[data-theme="dark"] .tool-card .tool-card-icon{opacity:.65;}
/* dark: printable card previews (allergy / emergency / taxi) */
html[data-theme="dark"] .print-card{
  background:var(--surface-2);
  border-color:var(--accent);
}
/* dark: tool sub-elements with hardcoded light backgrounds */
html[data-theme="dark"] .tool-swap{background:var(--surface-2);}
html[data-theme="dark"] .tool-swap:hover{background:rgba(186,47,42,.12);}
html[data-theme="dark"] .tool-figcell img{background:var(--surface-2);}
html[data-theme="dark"] .ts-dot{background:var(--surface-2);border-color:var(--line);}
html[data-theme="dark"] .ts-dot.is-done{background:rgba(186,47,42,.15);}
html[data-theme="dark"] .ts-img img{background:var(--surface-2);}
html[data-theme="dark"] .ts-note{background:rgba(186,47,42,.08);border-left-color:var(--accent);}
@media (max-width:640px){
  .tool-card .tool-card-icon{width:42px;height:42px;top:11px;right:11px;}
}

/* ============================================================
   Interactive checklist (pre-trip)
   ============================================================ */
.tool-checklist-header{
  display:flex;align-items:center;justify-content:space-between;
  gap:16px;flex-wrap:wrap;margin-bottom:18px;
}
.tool-checklist-progress-area{
  display:flex;flex-direction:column;gap:6px;flex:1;min-width:220px;
}
.tool-checklist-progress-label{
  font-size:13px;font-weight:600;color:var(--ink);
}
.tool-checklist-progress{
  height:10px;background:var(--line);border-radius:999px;overflow:hidden;
}
.tool-checklist-bar{
  height:100%;background:var(--accent);width:0;transition:width .25s ease;
}
.tool-checklist-count{
  font-size:13px;color:var(--muted);
}
.tool-checklist-export-btn{min-height:44px;}
.tool-checklist-section{margin-bottom:18px;}
.tool-checklist-title-row{
  display:flex;align-items:flex-start;justify-content:space-between;
  gap:12px;margin-bottom:10px;flex-wrap:wrap;
}
.tool-checklist-title-row .upl-section-title{margin:0;}
.tool-checklist-toggles{
  font-size:13px;color:var(--muted);white-space:nowrap;
}
.tool-checklist-toggle{
  background:none;border:none;padding:0;color:var(--accent);
  font-size:13px;font-weight:600;cursor:pointer;
}
.tool-checklist-toggle:hover{text-decoration:underline;}
.tool-checklist-list{list-style:none;margin:0;padding:0;}
.tool-checklist-item{
  display:grid;
  grid-template-columns:minmax(0,1.3fr) minmax(0,1fr) auto;
  gap:16px;align-items:start;
  padding:12px 0;border-bottom:1px dashed var(--line);
}
.tool-checklist-item:last-child{border-bottom:0;}
.tool-checklist-item.is-checked .tool-checklist-text{opacity:.75;}
.tool-checklist-main{
  display:flex;align-items:flex-start;gap:12px;cursor:pointer;min-width:0;
}
.tool-checklist-input{
  position:absolute;opacity:0;width:1px;height:1px;
}
.tool-checklist-box{
  flex:0 0 auto;width:22px;height:22px;
  border:2px solid var(--accent);border-radius:6px;margin-top:1px;
  display:grid;place-items:center;
  transition:background .15s,border-color .15s;
}
.tool-checklist-input:checked + .tool-checklist-box,
.tool-checklist-item.is-checked .tool-checklist-box{
  background:var(--accent);border-color:var(--accent);
}
.tool-checklist-box::after{
  content:'';width:6px;height:10px;border:solid #fff;
  border-width:0 2px 2px 0;transform:rotate(45deg) translate(-1px,-1px);opacity:0;
}
.tool-checklist-input:checked + .tool-checklist-box::after,
.tool-checklist-item.is-checked .tool-checklist-box::after{opacity:1;}
.tool-checklist-text{
  font-size:15px;color:var(--ink);line-height:1.45;
}
.tool-checklist-why{
  font-size:14px;color:var(--muted);line-height:1.45;
}
.tool-checklist-delete{
  flex:0 0 auto;width:26px;height:26px;border-radius:50%;
  border:1px solid var(--line);background:transparent;color:var(--muted);
  font-size:18px;line-height:1;cursor:pointer;display:grid;place-items:center;
}
.tool-checklist-delete:hover{color:var(--accent);border-color:var(--accent);}
.tool-checklist-add{
  display:grid;grid-template-columns:1fr 1fr auto;gap:10px;align-items:end;
  padding-top:12px;border-top:1px dashed var(--line);margin-top:4px;
}
.tool-checklist-add .tool-input{margin:0;}
.tool-checklist-add-btn{min-height:44px;}
html[data-theme="dark"] .tool-checklist-box{background:transparent;}
html[data-theme="dark"] .tool-checklist-delete{color:var(--muted);}
@media (max-width:640px){
  .tool-checklist-header{flex-direction:column;align-items:stretch;}
  .tool-checklist-export-btn{width:100%;}
  .tool-checklist-item{grid-template-columns:1fr auto;}
  .tool-checklist-main{grid-column:1;}
  .tool-checklist-why{grid-column:1;padding-left:34px;margin-top:-4px;}
  .tool-checklist-add{grid-template-columns:1fr;}
}
@media print{
  .tool-checklist-header,.tool-checklist-toggles,.tool-checklist-add{display:none;}
}

/* ============================================================
   Article page uplift pilot — immersive reading experience
   ============================================================ */

/* Reading progress bar */
.upl-reading-progress{
  position: fixed; top: 0; left: 292px; right: 0; height: 3px;
  background: rgba(186,47,42,0); z-index: 55;
  transform-origin: left; transform: scaleX(0);
  will-change: transform;
}
.upl-reading-progress.visible{ background: #ba2f2a; }
body.has-guide-rail .upl-reading-progress{ left: 292px; }
body.rail-collapsed .upl-reading-progress,
body:not(.has-guide-rail) .upl-reading-progress{ left: 0; }
@media (max-width: 980px){
  .upl-reading-progress{ left: 0 !important; }
}

/* Full-bleed photo hero for articles */
.upl-article-hero{
  position: relative;
  min-height: min(760px, calc(100vh - 109px));
  display: flex; align-items: flex-end;
  color: #fff;
  background-size: cover; background-position: center;
  overflow: hidden;
}
.upl-article-hero::before{
  content: "";
  position: absolute; inset: 0;
  background: linear-gradient(180deg, rgba(0,0,0,.05) 0%, rgba(0,0,0,.18) 45%, rgba(0,0,0,.55) 100%);
  z-index: 1;
}
.upl-article-hero .container{ position: relative; z-index: 2; width: 100%; }
.upl-hero-inner{ max-width: 820px; padding: 110px 0 70px; }
.upl-hero-breadcrumbs{ font-size: 13px; color: rgba(255,255,255,.68); margin-bottom: 18px; }
.upl-hero-breadcrumbs a{ color: rgba(255,255,255,.68); }
.upl-hero-breadcrumbs a:hover{ color: #fff; }
.upl-hero-title{
  margin: 0 0 14px; font-family: "Playfair Display", "Times New Roman", serif; font-size: clamp(48px, 7vw, 92px);
  line-height: .98; letter-spacing: -.045em; font-weight: 500;
  text-shadow: 0 2px 20px rgba(0,0,0,.2);
}
.upl-hero-lead{
  margin: 0; max-width: 640px; font-size: clamp(17px, 2vw, 21px); line-height: 1.5;
  color: rgba(255,255,255,.85);
}

/* Refined article body */
.upl-article-body p,
.upl-article-body ul,
.upl-article-body ol,
.upl-article-body li{ font-size: 16px; line-height: 1.75; color: #3d3d3d; }
.upl-article-body p{ margin: 0 0 18px; }
.upl-article-body ul,
.upl-article-body ol{ margin: 0 0 24px; padding-left: 24px; }
.upl-article-body li{ padding: 5px 0; }
.upl-article-body h2{ position: relative; margin: 72px 0 22px; }
.upl-article-body h2:first-of-type{ margin-top: 0; }

/* Numbered section headings */
.upl-section-title{
  display: flex; align-items: baseline; gap: 18px;
  font-family: "Playfair Display", "Times New Roman", serif; font-size: clamp(34px, 4.5vw, 52px);
  line-height: 1.08; letter-spacing: -.03em; font-weight: 500; color: var(--ink);
  border-top: 1px solid var(--line); padding-top: 30px; scroll-margin-top: 92px;
}
.upl-section-num{
  font-family: "Playfair Display", "Times New Roman", serif; font-size: .55em; color: var(--accent);
  font-weight: 500; letter-spacing: -.02em;
}

/* Pull quote */
.upl-pull-quote{
  margin: 36px 0; padding: 26px 28px;
  background: var(--soft); border-left: 4px solid var(--accent);
  border-radius: 0 16px 16px 0;
}
.upl-pull-quote p{
  margin: 0; font-family: "Playfair Display", "Times New Roman", serif; font-size: clamp(22px, 3vw, 30px);
  line-height: 1.25; color: var(--ink); letter-spacing: -.02em;
}
.upl-pull-quote cite{
  display: block; margin-top: 14px; font-size: 14px; font-style: normal;
  color: var(--muted); font-family: Inter, ui-sans-serif, sans-serif;
}

/* Body-sized pull-quote variant for Q&A in the "Common worries" section */
.upl-pull-quote--body p{
  font-size: inherit; line-height: 1.6; letter-spacing: 0;
  font-family: inherit; font-weight: 400;
}

/* Fact card */
.upl-fact-card{
  display: grid; grid-template-columns: 120px 1fr; gap: 22px; align-items: center;
  margin: 32px 0; padding: 24px 26px; border: 1px solid var(--line);
  border-radius: 18px; background: #fff; box-shadow: var(--shadow);
}
.upl-fact-number{
  font-family: "Playfair Display", "Times New Roman", serif; font-size: 64px; line-height: .85; color: var(--accent);
  font-weight: 500; letter-spacing: -.04em;
}
.upl-fact-label{ display: block; font-size: 12px; letter-spacing: .12em; text-transform: uppercase; color: var(--muted); }
.upl-fact-body h4{ margin: 0 0 6px; font-size: 20px; font-weight: 700; }
.upl-fact-body p{ margin: 0; color: var(--muted); font-size: 15px; line-height: 1.55; }

/* Figure + caption */
.upl-figure{ margin: 36px 0; }
.upl-figure img{ width: 100%; height: auto; max-height: 520px; object-fit: cover; border-radius: 16px; display: block; }
.upl-figure figcaption{ margin-top: 10px; font-size: 13px; color: var(--muted); }

/* Editorial sub-headings inside article body */
.upl-article-body h3{
  font-family: Inter, ui-sans-serif, sans-serif; font-size: 24px; font-weight: 700;
  color: var(--ink); margin: 46px 0 14px; line-height: 1.25; letter-spacing: -.01em;
}
.upl-article-body h4{
  font-size: 15px; font-weight: 700; text-transform: uppercase; letter-spacing: .1em;
  color: var(--accent); margin: 30px 0 10px;
}

/* Pro Tips callout */
.upl-tips{
  margin: 34px 0; padding: 24px 26px;
  background: linear-gradient(180deg, #fff 0%, #fbf5f4 100%);
  border: 1px solid var(--line); border-left: 4px solid var(--accent);
  border-radius: 0 16px 16px 0;
}
.upl-subhead{
  font-family: Inter, ui-sans-serif, sans-serif; font-size: 19px; font-weight: 800;
  letter-spacing: .02em; color: var(--ink); margin: 0 0 14px; scroll-margin-top: 92px;
}

/* Inline links inside Pro Tips list */
.upl-tips li a{
  color: var(--accent); font-weight: 600; text-decoration: none;
  border-bottom: 1px solid rgba(186,47,42,.35); padding-bottom: 1px;
}
.upl-tips li a:hover{ border-bottom-color: var(--accent); }

/* "You might also need" related links */
.upl-related{ list-style: none; margin: 6px 0 0; padding: 0; display: grid; gap: 10px; }
.upl-related li{ margin: 0; }
.upl-related a{
  display: flex; align-items: center; justify-content: space-between; gap: 12px;
  padding: 14px 16px; border: 1px solid var(--line); border-radius: 10px;
  color: var(--ink); text-decoration: none; font-weight: 600;
  transition: border-color .2s ease, background .2s ease, transform .2s ease;
}
.upl-related a:hover{ border-color: var(--accent); background: #fff5f4; transform: translateX(2px); }
.upl-related .upl-related-arrow{ color: var(--accent); font-weight: 700; }
@media (prefers-reduced-motion: reduce){
  .upl-related a{ transition: none; }
  .upl-related a:hover{ transform: none; }
}
.upl-tips ul{ margin: 0; }

/* Scroll reveal */
.upl-reveal{ opacity: 0; transform: translateY(28px); transition: opacity .7s ease, transform .7s ease; }
.upl-reveal-visible{ opacity: 1; transform: translateY(0); }
@media (prefers-reduced-motion: reduce){
  .upl-reveal{ opacity: 1; transform: none; transition: none; }
}
/* No-JS safety net: when scripting is unavailable the reveal observer never runs,
   so content must stay visible instead of stuck at opacity:0. */
@media (scripting: none){
  .upl-reveal{ opacity: 1; transform: none; }
}

/* Responsive */
@media (max-width: 980px){
  .upl-hero-inner{ padding: 90px 0 50px; }
  .upl-fact-card{ grid-template-columns: 1fr; text-align: left; gap: 14px; }
  .upl-fact-number{ font-size: 52px; }
}
@media (max-width: 680px){
  .upl-hero-inner{ padding: 72px 0 42px; }
  .upl-hero-title{ font-size: 46px; }
  .upl-section-title{ font-size: 30px; gap: 12px; }
  .upl-pull-quote{ padding: 20px 22px; }
  .upl-pull-quote p{ font-size: 22px; }
}

/* ===== Visual Uplift Pilot — Tier 2/3 additions ===== */

/* Smooth scroll + anchor offset so sections clear the sticky header */
html{ scroll-behavior: smooth; }
.upl-section-title{ scroll-margin-top: 116px; }

/* TOC scroll-spy active state */
.upl-toc-active{
  color: var(--accent) !important; font-weight: 700;
  border-right: 2px solid var(--accent); padding-right: 10px; margin-right: -12px;
  background: rgba(186,47,42,.05); border-radius: 4px;
}

/* Hero eyebrow — cleaner editorial treatment (drops the gold "luxury" tone) */
.upl-hero-eyebrow{
  display: inline-flex; align-items: center; gap: 10px;
  font-size: 12px; letter-spacing: .16em; text-transform: uppercase; font-weight: 800;
  color: rgba(255,255,255,.85); margin-bottom: 14px;
}
.upl-hero-eyebrow::before{
  content: ""; width: 26px; height: 2px; background: var(--accent); display: inline-block;
}

/* Hero Ken Burns (respects reduced-motion) */
@keyframes uplHeroZoom{ from{ background-position: 50% 30%; } to{ background-position: 50% 70%; } }
.upl-article-hero{ animation: uplHeroZoom 30s ease-in-out infinite alternate; }
@media (prefers-reduced-motion: reduce){
  .upl-article-hero{ animation: none; }
  html{ scroll-behavior: auto; }
}

/* Section 01 lede + embedded Visa Checker tool card */
.upl-lede{ font-size: 17px; line-height: 1.6; color: var(--muted); margin: 0 0 22px; }
.upl-tool-card{
  margin: 0 0 36px; padding: 20px 22px; border: 1px solid var(--line);
  border-radius: 18px; background: #fff; box-shadow: var(--shadow);
}
.upl-tool-cap{
  font-size: 12px; letter-spacing: .1em; text-transform: uppercase; color: var(--muted);
  margin: 0 0 14px; display: flex; align-items: center; gap: 8px;
}
.upl-tool-cap::before{ content: ""; width: 18px; height: 2px; background: var(--accent); display: inline-block; }

/* Stat band (replaces single fact card) */
.upl-stat-band{ display: grid; grid-template-columns: repeat(4, 1fr); gap: 14px; margin: 30px 0 14px; }
.upl-stat{ padding: 18px 16px; border: 1px solid var(--line); border-radius: 14px; background: #fff; text-align: center; }
.upl-stat-num{
  display: block; font-family: "Playfair Display", "Times New Roman", serif; font-size: 38px;
  line-height: 1; color: var(--accent); font-weight: 500; letter-spacing: -.03em;
}
.upl-stat-label{ display: block; margin-top: 8px; font-size: 12px; letter-spacing: .06em; text-transform: uppercase; color: var(--muted); }
.upl-caption{ font-size: 14px; color: var(--muted); line-height: 1.6; margin: 0 0 30px; }

/* 240h step timeline */
.upl-timeline{ display: grid; grid-template-columns: repeat(4, 1fr); gap: 14px; margin: 30px 0 18px; }
.upl-step{ position: relative; padding-top: 26px; border-top: 2px solid var(--accent); }
.upl-step:not(:first-child){ border-top-color: var(--line); }
.upl-step-dot{
  position: absolute; top: -13px; left: 0; width: 24px; height: 24px; border-radius: 50%;
  background: var(--accent); color: #fff; font-size: 12px; font-weight: 700;
  display: flex; align-items: center; justify-content: center;
}
.upl-step-title{ font-size: 15px; font-weight: 700; margin: 0 0 2px; color: var(--ink); }
.upl-step-sub{ font-size: 13px; color: var(--muted); margin: 0; }
.upl-rule{
  margin: 0 0 30px; padding: 14px 18px; background: #fbf5f4; border-left: 3px solid var(--accent);
  border-radius: 0 12px 12px 0; font-size: 15px; line-height: 1.6; color: var(--ink);
}

/* Step split: text left, reference image right */
.upl-step-split{
  display: grid; grid-template-columns: 1.05fr 0.95fr; gap: 28px; align-items: center;
  margin: 22px 0; padding: 18px; background: #fff; border: 1px solid var(--line);
  border-radius: 14px;
}
.upl-step-split .upl-step-text strong{
  display: block; font-size: 16px; font-weight: 700; color: var(--ink); margin-bottom: 6px;
}
.upl-step-split .upl-step-text p{ margin: 0 0 8px; font-size: 14.5px; line-height: 1.62; color: var(--ink); }
.upl-step-split .upl-step-text p:last-child{ margin-bottom: 0; }
.upl-step-split .upl-step-text ul{ margin: 6px 0 8px; padding-left: 18px; font-size: 14px; line-height: 1.55; }
.upl-step-split .upl-step-text li{ margin-bottom: 3px; }
.upl-step-split .upl-step-text em{ color: var(--accent); font-style: normal; font-weight: 600; }
.upl-step-media{ margin: 0; }
.upl-step-media img{ width: 100%; height: auto; border-radius: 10px; border: 1px solid var(--line); display: block; }
.upl-step-media figcaption{ margin-top: 8px; font-size: 12.5px; color: var(--muted); text-align: center; }
@media (max-width: 720px){
  .upl-step-split{ grid-template-columns: 1fr; gap: 14px; padding: 14px; }
  .upl-step-split .upl-step-media{ order: 2; }
}

/* Comparison table */
.upl-compare{ width: 100%; border-collapse: collapse; margin: 30px 0; font-size: 14px; border: 1px solid var(--line); border-radius: 14px; overflow: hidden; }
.upl-compare th, .upl-compare td{ padding: 12px 14px; text-align: left; border-bottom: 1px solid var(--line); }
.upl-compare thead th{ background: var(--soft); font-weight: 700; color: var(--ink); }
.upl-compare tbody th{ font-weight: 600; color: var(--ink); background: #fff; }
.upl-compare td{ color: var(--muted); }
.upl-compare tr:last-child td, .upl-compare tr:last-child th{ border-bottom: none; }

/* Breathing band */
.upl-band{ margin: 32px 0; padding: 28px 30px; background: #fbf0ef; border-radius: 18px; border-left: 4px solid var(--accent); }
.upl-band-quote{ margin: 0; font-family: Inter, ui-sans-serif, -apple-system, BlinkMacSystemFont, "Segoe UI", Arial, sans-serif; font-size: clamp(18px, 2.3vw, 23px); line-height: 1.5; color: var(--ink); font-weight: 600; }
.upl-band-sub{ margin: 10px 0 0; font-size: 14px; color: var(--muted); }

/* Hero CTA — glass/ghost button that blends into the photo */
.upl-hero-cta{ margin-top: 32px; }
.upl-hero-btn{
  display: inline-flex; align-items: center; gap: 8px;
  padding: 13px 22px;
  border: 1px solid rgba(255,255,255,.55);
  background: rgba(255,255,255,.08);
  backdrop-filter: blur(6px); -webkit-backdrop-filter: blur(6px);
  color: #fff; font-size: 14px; font-weight: 600; letter-spacing: .02em;
  border-radius: 999px; text-decoration: none;
  text-shadow: 0 1px 4px rgba(0,0,0,.2);
  transition: background .2s ease, border-color .2s ease, transform .2s ease;
}
.upl-hero-btn:hover{
  background: rgba(255,255,255,.18);
  border-color: rgba(255,255,255,.9);
  transform: translateY(-1px);
}
.upl-hero-btn svg{
  width: 16px; height: 16px; stroke: currentColor; stroke-width: 2;
  fill: none; transition: transform .2s ease;
}
.upl-hero-btn:hover svg{ transform: translateX(2px); }

/* Airport journey step-flow: cards + connecting arrows */
.upl-stepflow{
  display:grid; grid-template-columns:repeat(auto-fit,minmax(165px,1fr));
  gap:18px 22px; margin:34px 0 6px;
}
.upl-flow-card{
  position:relative; background:#fff; border:1px solid var(--line);
  border-radius:14px; padding:16px 16px 14px;
}
html[data-theme="dark"] .upl-flow-card{ background:var(--surface-2); }
.upl-flow-step{
  display:inline-flex; align-items:center; justify-content:center;
  width:26px; height:26px; border-radius:50%; background:var(--accent);
  color:#fff; font-size:13px; font-weight:700; margin-bottom:10px;
}
.upl-flow-card h3{ font-size:15px; font-weight:700; margin:0 0 4px; color:var(--ink); }
.upl-flow-card p{ font-size:13px; line-height:1.5; color:var(--muted); margin:0; }
.upl-flow-card::after{
  content:"\2192"; position:absolute; right:-15px; top:50%; transform:translateY(-50%);
  color:var(--accent); font-weight:700; font-size:18px; line-height:1;
}
.upl-flow-card:last-child::after{ content:""; }

/* Responsive for new components */
@media (max-width: 680px){
  .upl-hero-cta{ margin-top: 24px; }
  .upl-hero-btn{ padding: 12px 18px; font-size: 13px; }
  .upl-stat-band{ grid-template-columns: repeat(2, 1fr); }
  .upl-timeline{ grid-template-columns: repeat(2, 1fr); gap: 18px 14px; }
  .upl-stat-num{ font-size: 32px; }
  .upl-stepflow{ grid-template-columns: repeat(2, 1fr); gap: 14px; }
  .upl-flow-card::after{ display:none; }
}

/* TOC numbers in article sidebar (On this page) */
.upl-toc-num{ display:inline-block; min-width:1.4em; color:var(--accent); font-weight:700; font-variant-numeric:tabular-nums; }
.upl-cta{margin:28px 0;}


   TOOLKIT · GRAIN SKIN  (final, 2026-08-05)
   Overrides the Sketch skin (loaded above). Material: warm paper
   + SVG film grain. Low-sat tints only. No changes to tools.js —
   pure CSS via .tool-card[data-tool].

   SAFETY: all colour/visual tokens are scoped to .tool-card so
   they NEVER leak into the global :root (styles.css uses
   --paper/--ink/--text/--line site-wide). Only control vars
   (--grain / --noise-img / header offsets) live on :root —
   those are harmless globally.
   ============================================================ */

/* control vars (global, harmless) */
:root{
  --grain:.30;                 /* light & dark both 30% */
  --logo-top:17px; --title-y:-13px; --live-top:4px;
  --noise-img:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='220' height='220'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.85' numOctaves='3' stitchTiles='stitch'/%3E%3CfeColorMatrix type='saturate' values='0'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
}

/* kill Sketch wobble border (must win over styles.css) */
.tool-card::before{ content:none !important; }

/* ---------- card (tokens + visuals, scoped to .tool-card only) ---------- */
.tool-card{
  /* tokens */
  --grain-font:"SF Pro Display","Segoe UI Variable Display","Segoe UI",-apple-system,system-ui,"Helvetica Neue",Arial,sans-serif;
  --paper:#F7F3EA; --paper-2:#F1ECE0;
  --ink:#2B2620; --ink-2:rgba(43,38,32,.62); --ink-3:rgba(43,38,32,.40);
  --line:rgba(43,38,32,.14); --line-strong:rgba(43,38,32,.28);
  --shadow:0 1px 2px rgba(40,34,26,.10), 0 8px 22px rgba(40,34,26,.09), inset 0 1px 0 rgba(255,255,255,.55);
  --shadow-hover:0 2px 4px rgba(40,34,26,.12), 0 16px 40px rgba(40,34,26,.15), inset 0 1px 0 rgba(255,255,255,.75);
  --blend:multiply;
  --text:var(--ink);
  --t-money:#7E8A6A; --t-safety:#B06A5C; --t-tech:#6E8499;
  --t-shop:#B0895A; --t-travel:#6C9A95; --t-plan:#8C7C9A; --t-docs:#9A8A6E;
  --field-bg:rgba(43,38,32,.06);

  /* visuals */
  position:relative; isolation:isolate;
  background:linear-gradient(180deg,
    color-mix(in srgb, var(--paper) 92%, #fff) 0%,
    var(--paper) 26%);
  border:1px solid var(--line);
  border-radius:16px; overflow:hidden;
  box-shadow:var(--shadow);
  font-family:var(--grain-font); color:var(--ink);
  -webkit-font-smoothing:antialiased; -moz-osx-font-smoothing:grayscale;
  transition:box-shadow .42s cubic-bezier(.22,1,.36,1), transform .42s cubic-bezier(.22,1,.36,1), border-color .42s cubic-bezier(.22,1,.36,1);
}
html[data-theme="dark"] .tool-card{
  --paper:#252019; --paper-2:#2E281F; --field-bg:rgba(255,255,255,.13);
  --ink:#ECE5D8; --ink-2:rgba(236,229,216,.70); --ink-3:rgba(236,229,216,.50);
  --line:rgba(236,229,216,.16); --line-strong:rgba(236,229,216,.32);
  --shadow:0 1px 2px rgba(0,0,0,.4), 0 10px 28px rgba(0,0,0,.45), inset 0 1px 0 rgba(255,255,255,.07);
  --shadow-hover:0 2px 4px rgba(0,0,0,.5), 0 18px 44px rgba(0,0,0,.55), inset 0 1px 0 rgba(255,255,255,.1);
  --blend:screen;
  --text:var(--ink);
  --t-money:#9DAE83; --t-safety:#C98273; --t-tech:#93A9BC;
  --t-shop:#CCA878; --t-travel:#8FB7B1; --t-plan:#AFA0BC; --t-docs:#BCAE92;
}
.tool-card::before{ /* grain layer */
  content:"" !important; position:absolute; inset:0; z-index:0; pointer-events:none;
  background-image:var(--noise-img); background-size:130px 130px;
  opacity:var(--grain); mix-blend-mode:var(--blend);
}
.tool-card::before,
.tool-card::after{ pointer-events:none; }
.tool-card::after{ /* top category seam */
  content:""; position:absolute; top:0; left:0; right:0; height:3px; z-index:1;
  background:linear-gradient(90deg, transparent, var(--tint), transparent);
  opacity:.6;
}
.tool-card:hover{ transform:translateY(-3px); box-shadow:var(--shadow-hover); border-color:var(--line-strong); }
.tool-card > *{ position:relative; z-index:2; }

/* ---------- header: single top row — [icon] [title] ···· [Live corner] ---------- */
.tool-card .tool-header,
html[data-theme="dark"] .tool-card .tool-header{
  position:relative;
  display:flex; align-items:center; justify-content:flex-start; gap:0 12px;
  min-height:52px;
  padding:6px 56px 6px 72px;            /* top / right(Live) / bottom / left(icon) — logo+title form one left-aligned unit on a shared center line */
  background:transparent !important; border:0; border-radius:0; margin:0;
  text-align:left;
}
.tool-card .tool-header::before{ content:none !important; display:none !important; } /* eyebrow removed */
.tool-card:not(:has(.tool-card-icon)) .tool-header{ padding-left:22px; }
.tool-card .tool-header-title{
  font-size:17px; font-weight:700; letter-spacing:-.02em; line-height:1.2;
  color:var(--ink); margin:0;
  text-align:left; white-space:nowrap;
  transform:translateY(-13px);
}
.tool-card .tool-header-status{
  position:absolute; top:4px; right:10px;
  font-size:11px; font-weight:600; color:var(--ink-3);
  display:flex; align-items:center; gap:6px; white-space:nowrap;
}
.tool-card .tool-header-dot{
  width:7px; height:7px; border-radius:50%; background:var(--tint);
  display:inline-block; animation:breathe 2.6s ease-in-out infinite;
}
@keyframes breathe{0%,100%{opacity:.35; transform:scale(.85);}50%{opacity:1; transform:scale(1);}}

/* ---------- icon stamp: top-left corner, flush with body content (left:22) ---------- */
.tool-card .tool-card-icon{
  position:absolute; top:17px; left:22px; z-index:2;
  width:40px; height:40px; border-radius:11px;
  display:grid; place-items:center;
  background:transparent; border:1px solid var(--line);
  color:var(--tint);
}
.tool-card .tool-card-icon svg{ width:21px; height:21px; display:block; }

/* ---------- body / fields / buttons / chips ---------- */
.tool-card .tool-hint,
.tool-card .tool-result-note,
.tool-card .tool-info,
.tool-card .tool-footnote{
  color:var(--ink-2); font-weight:450; line-height:1.55;
}

/* rows */
.tool-card .tool-row{ display:flex; flex-direction:column; gap:10px; margin:0 0 12px; }
.tool-card .tool-row--inline{
  flex-direction:row; align-items:flex-end; gap:10px;
  flex-wrap:nowrap;
}
.tool-card .tool-row--inline > .tool-field{ flex:1 1 0; min-width:0; margin:0; }

/* labels (Amount / From / To …) */
.tool-card .tool-field{
  display:flex; flex-direction:column; gap:6px; margin:0;
}
.tool-card .tool-field-label{
  display:block; font-size:12px; font-weight:600; letter-spacing:.04em;
  color:var(--ink-2); margin:0;
}

/* inputs & selects */
.tool-card .tool-input{
  appearance:none;
  width:100%; min-height:40px;
  background:var(--field-bg); color:var(--ink);
  border:1px solid var(--line-strong); border-radius:10px;
  padding:9px 34px 9px 12px; font:500 14px var(--grain-font);
  outline:none; transition:border-color .25s cubic-bezier(.22,1,.36,1), box-shadow .25s cubic-bezier(.22,1,.36,1), background .25s cubic-bezier(.22,1,.36,1);
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 24 24' fill='none' stroke='%236B6B6B' stroke-width='2.5' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m6 9 6 6 6-6'/%3E%3C/svg%3E");
  background-repeat:no-repeat; background-position:right 12px center;
}
.tool-card select.tool-input{ cursor:pointer; }
.tool-card input.tool-input{ background-image:none; padding-right:12px; }
.tool-card .tool-input::placeholder{ color:var(--ink-3); }
.tool-card .tool-input:focus,
.tool-card .tool-input:focus-within{
  border-color:var(--tint);
  box-shadow:0 0 0 3px color-mix(in srgb, var(--tint) 22%, transparent);
  background:rgba(255,255,255,.03);
}
html[data-theme="dark"] .tool-card .tool-input:focus,
html[data-theme="dark"] .tool-card .tool-input:focus-within{
  background:rgba(255,255,255,.06);
}

/* native <select> dropdown options — OS chrome often uses a light menu regardless of theme */
.tool-card option,
.tool-card optgroup{
  background:#fff; color:#2B2620;
}
.tool-card option:disabled{ color:#999; }

/* swap button */
.tool-card .tool-swap{
  align-self:flex-end;
  width:40px; height:40px; border-radius:10px;
  background:var(--field-bg); color:var(--ink-2);
  border:1px solid var(--line-strong); cursor:pointer;
  font-size:18px; line-height:1; transition:border-color .25s cubic-bezier(.22,1,.36,1), color .25s cubic-bezier(.22,1,.36,1), background .25s cubic-bezier(.22,1,.36,1), transform .25s cubic-bezier(.34,1.56,.64,1);
  display:inline-flex; align-items:center; justify-content:center;
}
.tool-card .tool-swap:hover{
  border-color:var(--tint); color:var(--tint); background:rgba(255,255,255,.05);
  transform:rotate(180deg);
}

/* main CTA button */
.tool-card .btn{
  display:inline-flex; align-items:center; justify-content:center; gap:7px;
  width:100%; margin-top:6px; padding:10px; border-radius:11px;
  font:600 13.5px var(--grain-font); cursor:pointer;
  background:var(--tint); color:#fff; border:1px solid transparent;
  box-shadow:0 1px 2px rgba(40,34,26,.18);
  transition:filter .3s cubic-bezier(.22,1,.36,1), transform .3s cubic-bezier(.22,1,.36,1), box-shadow .3s cubic-bezier(.22,1,.36,1);
}
.tool-card .btn:hover{ filter:brightness(1.06); transform:translateY(-1px); box-shadow:0 4px 14px rgba(40,34,26,.22); }
.tool-card .btn:active{ transform:translateY(0); }

/* quick-select chips (100 / 500 / 1000) */
.tool-card .tool-quick{ display:flex; flex-wrap:wrap; gap:8px; margin:10px 0 6px; }
.tool-card .tool-chip{
  appearance:none; border:0;
  display:inline-flex; align-items:center; justify-content:center;
  min-height:32px; padding:6px 14px; border-radius:999px;
  background:var(--field-bg); color:var(--ink);
  border:1px solid var(--line-strong);
  font:600 13px var(--grain-font); cursor:pointer;
  transition:border-color .25s cubic-bezier(.22,1,.36,1), color .25s cubic-bezier(.22,1,.36,1), background .25s cubic-bezier(.22,1,.36,1), transform .25s cubic-bezier(.34,1.56,.64,1);
}
.tool-card .tool-chip:hover,
.tool-card .tool-chip:focus{
  background:var(--tint); border-color:var(--tint); color:#fff;
  transform:translateY(-1px); box-shadow:0 3px 10px color-mix(in srgb, var(--tint) 28%, transparent);
}
.tool-card .tool-chip:active{ transform:translateY(0); }

/* result figure */
.tool-card .tool-result{ color:var(--tint); font-weight:800; letter-spacing:-.02em; }
.tool-card .tool-result-unit{ color:var(--ink-2); font-weight:500; }

/* related tools pills */
.tool-card .tool-related{ margin-top:18px; padding-top:14px; border-top:1px solid var(--line); }
.tool-card .tool-related-title{
  font-size:11px; font-weight:700; letter-spacing:.1em; text-transform:uppercase;
  color:var(--ink-3); margin:0 0 10px;
}
.tool-card .related-list{ display:flex; flex-wrap:wrap; gap:8px; }
.tool-card .related-list a{
  display:inline-flex; align-items:center;
  min-height:32px; padding:6px 14px; border-radius:999px;
  background:var(--field-bg); color:var(--ink);
  border:1px solid var(--line-strong);
  font:500 13px var(--grain-font); text-decoration:none;
  transition:border-color .15s, color .15s, background .15s;
}
.tool-card .related-list a:hover{
  background:var(--tint); border-color:var(--tint); color:#fff;
}

/* ---------- per-tool category mapping (all 25 tools) ---------- */
.tool-card[data-tool="currency"],
.tool-card[data-tool="jin"],
.tool-card[data-tool="size"]{ --tint:var(--t-money); }

.tool-card[data-tool="plug-checker"],
.tool-card[data-tool="firewall-checker"],
.tool-card[data-tool="connectivity-recommender"]{ --tint:var(--t-tech); }

.tool-card[data-tool="water-picker"],
.tool-card[data-tool="allergy-card"],
.tool-card[data-tool="emergency-cards"]{ --tint:var(--t-safety); }

.tool-card[data-tool="haggling-calculator"],
.tool-card[data-tool="boba-tea-builder"],
.tool-card[data-tool="alipay-setup"],
.tool-card[data-tool="alipay-registration"],
.tool-card[data-tool="wechat-setup"]{ --tint:var(--t-shop); }

.tool-card[data-tool="toilet-finder"],
.tool-card[data-tool="taxi-price-estimator"],
.tool-card[data-tool="taxi-cards"],
.tool-card[data-tool="didi-setup"],
.tool-card[data-tool="amap-setup"],
.tool-card[data-tool="subway-qr"],
.tool-card[data-tool="departure-calculator"]{ --tint:var(--t-travel); }

.tool-card[data-tool="holiday-radar"],
.tool-card[data-tool="preChecklist"]{ --tint:var(--t-plan); }

.tool-card[data-tool="visa-checker"],
.tool-card[data-tool="arrival-card"]{ --tint:var(--t-docs); }

/* eyebrow labels removed per request (2026-08-05) */

/* neutral mode — collapse tints to ink */
html[data-color="neutral"] .tool-card{ --tint:var(--ink-3); }
html[data-color="neutral"] .tool-card::after{ background:linear-gradient(90deg,transparent,var(--line-strong),transparent); }

/* --- visa checker UI refresh (2026-08-23): Check button, result card, verdict --- */
.visa-actions{display:flex;align-items:center;gap:10px;flex-wrap:wrap;margin:14px 0 4px;}
.visa-check-btn{cursor:pointer;font-weight:700;font-size:15px;padding:11px 22px;}
.visa-reset-btn{cursor:pointer;font-weight:600;font-size:14px;padding:11px 18px;border:1px solid var(--line);}
.visa-dirty{display:none;width:100%;margin:8px 0 0;font-size:13px;color:#b5791a;}
.visa-result-card{margin-top:16px;padding:18px;border:1px solid var(--line);border-radius:16px;background:var(--surface-2);}
.visa-result-card:empty{display:none;}
.visa-verdict{display:flex;align-items:center;gap:9px;font-size:18px;font-weight:800;margin:6px 0 10px;line-height:1.2;}
.visa-verdict-mark{width:14px;height:14px;border-radius:50%;flex:0 0 auto;}
.visa-verdict--ok{color:#1f7a4d;}
.visa-verdict--ok .visa-verdict-mark{background:#1f7a4d;}
.visa-verdict--bad{color:var(--accent);}
.visa-verdict--bad .visa-verdict-mark{background:var(--accent);}
.visa-verdict--neutral{color:var(--muted);}
.visa-verdict--neutral .visa-verdict-mark{background:var(--muted);}
.visa-legs{margin:14px 0 4px;display:flex;flex-direction:column;gap:8px;}
.visa-leg{padding:11px 13px;border-radius:12px;border:1px solid var(--line);font-size:14px;}
.visa-leg--ok{background:rgba(31,122,77,.08);border-color:rgba(31,122,77,.4);}
.visa-leg--bad{background:rgba(186,47,42,.07);border-color:rgba(186,47,42,.4);}
.visa-leg-head{font-weight:700;color:var(--ink);margin-bottom:5px;}
.visa-disclosure{margin:14px 0 4px;border-top:1px dashed var(--line);padding-top:10px;}
.visa-disclosure summary{cursor:pointer;font-size:13.5px;font-weight:700;color:var(--muted);list-style:none;}
.visa-disclosure summary::-webkit-details-marker{display:none;}
.visa-disclosure summary::before{content:'+ ';}
.visa-disclosure[open] summary::before{content:'– ';}
.visa-disclosure .visa-notes{margin-top:8px;}
.visa-row-label{display:block;font-size:12.5px;font-weight:700;color:var(--muted);margin-bottom:4px;}
.visa-itinerary-row{flex-direction:row;align-items:center;gap:8px;flex-wrap:wrap;}
.visa-itinerary-row .visa-place{flex:1 1 auto;min-width:0;max-width:240px;}
.visa-row-del{flex:0 0 auto;padding:0;width:26px;height:26px;display:grid;place-items:center;border:1px solid var(--line);background:var(--paper);border-radius:8px;cursor:pointer;color:var(--muted);font-size:16px;line-height:1;transition:color .15s,border-color .15s;}
.visa-row-del:hover{color:var(--accent);border-color:var(--accent);}
.visa-row-del:hover{color:var(--accent);border-color:var(--accent);}

/* --- visa checker “How to use" step instructions --- */
.visa-howto{margin:0 0 12px;padding:11px 14px;border:1px solid var(--line);border-radius:12px;background:transparent;}
.visa-howto-title{font-size:10px;font-weight:800;letter-spacing:.05em;text-transform:uppercase;color:var(--muted);margin:0 0 6px;}
.visa-howto ol{list-style:none;counter-reset:visastep;margin:0;padding:0;display:grid;gap:6px;}
.visa-howto li{counter-increment:visastep;display:grid;grid-template-columns:16px 1fr;gap:8px;align-items:baseline;font-size:11px;line-height:1.4;color:var(--ink);text-wrap:pretty;}
.visa-howto-num{width:16px;height:16px;border-radius:50%;background:var(--accent);color:#fff;font-size:9.5px;font-weight:800;display:grid;place-items:center;line-height:1;}
.visa-howto-num::before{content:counter(visastep);}
.visa-howto-body{display:block;}
.visa-howto b{color:var(--accent);font-weight:700;}
.visa-howto .visa-ex{display:block;margin-top:1px;font-size:10px;color:var(--muted);}
.visa-howto .visa-ex b{font-weight:700;}

.tool-stepper{margin-bottom:8px;}
.ts-progress{display:flex;align-items:center;gap:12px;margin-bottom:14px;}
.ts-bar{flex:1;height:6px;border-radius:999px;background:var(--line);overflow:hidden;}
.ts-fill{display:block;height:100%;width:20%;background:var(--accent);border-radius:999px;transition:width .25s ease;}
.ts-count{font-size:12px;font-weight:600;color:var(--muted);white-space:nowrap;}
.ts-dots{list-style:none;display:flex;gap:10px;padding:0;margin:0 0 16px;flex-wrap:wrap;}
.ts-dot{box-sizing:border-box;width:38px;height:38px;border-radius:50%;display:grid;place-items:center;font-size:13px;line-height:1;font-weight:700;font-variant-numeric:tabular-nums;color:var(--muted);background:#fff;border:1px solid var(--line);cursor:pointer;transition:background .15s,color .15s,border-color .15s;}
.ts-dot:hover{border-color:var(--accent);}
.ts-dot.is-active{background:var(--accent);color:#fff;border-color:var(--accent);}
.ts-dot.is-done{background:#fbeaea;color:var(--accent);border-color:var(--accent);}
.ts-title{font-size:18px;font-weight:800;color:var(--ink);margin:0 0 10px;}
.ts-text{font-size:15px;line-height:1.65;color:var(--ink);}
.ts-text ul{margin:10px 0 0;padding-left:20px;}
.ts-text li{margin:5px 0;}
.ts-note{margin-top:12px;font-size:13px;line-height:1.55;color:var(--ink);background:#fbeaea;border-left:3px solid var(--accent);padding:10px 12px;border-radius:0 8px 8px 0;}

.ts-body{display:grid;grid-template-columns:1fr 1.2fr;gap:24px;align-items:center;}
.ts-left{min-width:0;}
.ts-img{display:flex;flex-direction:column;align-items:center;justify-content:center;}
.ts-img img{width:100%;max-height:620px;object-fit:contain;border-radius:10px;border:1px solid var(--line);display:block;background:#fafafa;cursor:zoom-in;transition:transform .2s ease,box-shadow .2s ease;}
.ts-img:hover img{transform:scale(1.02);box-shadow:0 12px 30px rgba(0,0,0,.12);}
.ts-img-cap{margin-top:6px;font-size:11.5px;color:var(--muted);text-align:center;}
.ts-lightbox{position:fixed;inset:0;z-index:9999;display:flex;align-items:center;justify-content:center;}
.ts-lightbox-backdrop{position:absolute;inset:0;background:rgba(0,0,0,.88);cursor:zoom-out;}
.ts-lightbox img{position:relative;z-index:1;max-width:92vw;max-height:92vh;object-fit:contain;border-radius:10px;box-shadow:0 24px 70px rgba(0,0,0,.45);cursor:zoom-out;}
html[data-theme="dark"] .ts-lightbox-backdrop{background:rgba(0,0,0,.92);}
.ts-nav{display:flex;gap:10px;margin-top:18px;}
.ts-nav .btn{flex:1;}
@media (max-width:640px){.ts-dots{gap:8px;}.ts-dot{width:32px;height:32px;font-size:12px;}.ts-nav .btn{flex:1 1 100%;}.ts-body{grid-template-columns:1fr;gap:14px;}.ts-img{order:2;}}
html[data-theme="dark"] .ts-dot{background:var(--surface-2);color:var(--muted);}
html[data-theme="dark"] .ts-note{background:rgba(186,47,42,.16);}

@media print{
  body *{visibility:hidden !important;}
  .tool-print,.tool-print *{visibility:visible !important;}
  .tool-print{position:absolute;left:0;top:0;width:100%;}
}
@media (max-width:640px){
  .tool-card{padding:16px;}
  .tool-result-num{font-size:26px;}
  .tool-row--inline{gap:8px;}
  .tool-swap{align-self:stretch;width:100%;height:38px;}
}
@media (prefers-reduced-motion:reduce){
  .tool-swap{transition:none;}
  .tool-swap:hover{transform:none;}
}


.tool-card{
  position:relative;
  background:#fff;
  border:0;
  border-radius:18px;
  padding:24px 26px 26px;
  margin-bottom:18px;
  box-shadow:4px 5px 0 rgba(43,38,34,.10);
  isolation:isolate;
}
.tool-card::before{
  content:"";
  position:absolute;
  inset:0;
  border:2.5px solid var(--ink);
  border-radius:18px;
  filter:url(#sketch);
  pointer-events:none;
  z-index:-1;
}
.tool-card > *{position:relative;z-index:1;}

.tool-card .tool-header{
  display:flex;align-items:center;justify-content:space-between;gap:12px;
  margin:-24px -26px 18px;
  padding:12px 18px;
  background:var(--ink);
  color:#fff;
  border-radius:16px 16px 0 0;
  position:relative;z-index:2;
}
.tool-card .tool-header-title{
  font-family:"Inter",sans-serif;font-size:13px;font-weight:700;letter-spacing:.06em;text-transform:uppercase;
}
.tool-card .tool-header-status{
  display:flex;align-items:center;gap:6px;
  font-size:12px;font-weight:600;color:rgba(255,255,255,.85);
}
.tool-card .tool-header-dot{
  width:7px;height:7px;border-radius:50%;
  background:#2ecc71;box-shadow:0 0 0 3px rgba(46,204,113,.25);
}
html[data-theme="dark"] .tool-card .tool-header{background:#1a1a1a;}
@media (max-width:640px){
  .tool-card .tool-header{margin:-20px -20px 16px;padding:10px 15px;}
  .tool-card .tool-header-title{font-size:12px;}
}

.tool-card .tool-card-icon{
  display:none;
}

.tool-card .tool-field{padding-right:0;}

.tool-card .tool-field{align-items:flex-start;}

.tool-card .tool-input,
.tool-card .tool-check{
  font:inherit;font-size:15px;font-weight:600;color:var(--ink);
  padding:11px 13px;
  border:2px solid var(--ink);
  border-radius:12px;
  background:#fff;
  box-sizing:border-box;
}
.tool-card .tool-input{width:100%;}
.tool-card select.tool-input{
  -webkit-appearance:none;appearance:none;cursor:pointer;
  padding-right:34px;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='8' viewBox='0 0 12 8'%3E%3Cpath fill='none' stroke='%23434343' stroke-width='2' stroke-linecap='round' stroke-linejoin='round' d='M1 1l5 5 5-5'/%3E%3C/svg%3E");
  background-repeat:no-repeat;
  background-position:right 13px center;
}
html[data-theme="dark"] .tool-card select.tool-input{
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='8' viewBox='0 0 12 8'%3E%3Cpath fill='none' stroke='%23cccccc' stroke-width='2' stroke-linecap='round' stroke-linejoin='round' d='M1 1l5 5 5-5'/%3E%3C/svg%3E");
  background-repeat:no-repeat;
  background-position:right 13px center;
}

.tool-card option,
.tool-card optgroup{
  background:#fff; color:#222;
}
.tool-card option:disabled{ color:#999; }
.tool-card .tool-check{width:auto;height:20px;align-self:flex-start;margin-top:4px;}
.tool-card .tool-input:focus{
  outline:none;
  border-color:var(--accent);
  box-shadow:0 0 0 3px rgba(186,47,42,.16);
}

.tool-card .tool-swap{
  align-self:center;
  width:44px;height:44px;
  border-radius:12px;
  border:2.5px solid var(--ink);
  background:#fff;color:var(--ink);
  font-size:18px;cursor:pointer;
  flex:0 0 auto;
  transition:background .15s,transform .15s;
}
.tool-card .tool-swap:hover{background:var(--accent);color:#fff;transform:rotate(180deg);}

.tool-card .btn-primary,
.tool-card .tool-submit,
.tool-card .visa-cta,
.tool-card .tool-print-btn{
  border:2.5px solid var(--ink);
  border-radius:12px;
  box-shadow:3px 3px 0 rgba(43,38,34,.18);
}
.tool-card .btn-primary:hover,
.tool-card .tool-submit:hover,
.tool-card .visa-cta:hover,
.tool-card .tool-print-btn:hover{
  transform:translate(-1px,-1px);
  box-shadow:4px 4px 0 rgba(43,38,34,.20);
}
.tool-card .btn-outline{border:2.5px solid var(--ink);border-radius:12px;}

.tool-card .visa-badge{border:2.5px solid currentColor;border-radius:999px;}
.tool-card .policy-badge{border:2px solid currentColor;}

.tool-card .calc-line{border-bottom:1.5px dashed var(--line);}

.tool-card .print-card{border:2.5px solid var(--accent);border-radius:14px;}

html[data-theme="dark"] .tool-card{
  background:var(--surface-2);
  box-shadow:4px 5px 0 rgba(0,0,0,.40);
}
html[data-theme="dark"] .tool-card .tool-input,
html[data-theme="dark"] .tool-card .tool-check{background:var(--surface-2);}
html[data-theme="dark"] .tool-card .tool-card-icon{opacity:.65;}

html[data-theme="dark"] .print-card{
  background:var(--surface-2);
  border-color:var(--accent);
}

html[data-theme="dark"] .tool-swap{background:var(--surface-2);}
html[data-theme="dark"] .tool-swap:hover{background:rgba(186,47,42,.12);}
html[data-theme="dark"] .tool-figcell img{background:var(--surface-2);}
html[data-theme="dark"] .ts-dot{background:var(--surface-2);border-color:var(--line);}
html[data-theme="dark"] .ts-dot.is-done{background:rgba(186,47,42,.15);}
html[data-theme="dark"] .ts-img img{background:var(--surface-2);}
html[data-theme="dark"] .ts-note{background:rgba(186,47,42,.08);border-left-color:var(--accent);}
@media (max-width:640px){
  .tool-card .tool-card-icon{width:42px;height:42px;top:11px;right:11px;}
}


.tool-checklist-header{
  display:flex;align-items:center;justify-content:space-between;
  gap:16px;flex-wrap:wrap;margin-bottom:18px;
}
.tool-checklist-progress-area{
  display:flex;flex-direction:column;gap:6px;flex:1;min-width:220px;
}
.tool-checklist-progress-label{
  font-size:13px;font-weight:600;color:var(--ink);
}
.tool-checklist-progress{
  height:10px;background:var(--line);border-radius:999px;overflow:hidden;
}
.tool-checklist-bar{
  height:100%;background:var(--accent);width:0;transition:width .25s ease;
}
.tool-checklist-count{
  font-size:13px;color:var(--muted);
}
.tool-checklist-export-btn{min-height:44px;}
.tool-checklist-section{margin-bottom:18px;}
.tool-checklist-title-row{
  display:flex;align-items:flex-start;justify-content:space-between;
  gap:12px;margin-bottom:10px;flex-wrap:wrap;
}
.tool-checklist-title-row .upl-section-title{margin:0;}
.tool-checklist-toggles{
  font-size:13px;color:var(--muted);white-space:nowrap;
}
.tool-checklist-toggle{
  background:none;border:none;padding:0;color:var(--accent);
  font-size:13px;font-weight:600;cursor:pointer;
}
.tool-checklist-toggle:hover{text-decoration:underline;}
.tool-checklist-list{list-style:none;margin:0;padding:0;}
.tool-checklist-item{
  display:grid;
  grid-template-columns:minmax(0,1.3fr) minmax(0,1fr) auto;
  gap:16px;align-items:start;
  padding:12px 0;border-bottom:1px dashed var(--line);
}
.tool-checklist-item:last-child{border-bottom:0;}
.tool-checklist-item.is-checked .tool-checklist-text{opacity:.75;}
.tool-checklist-main{
  display:flex;align-items:flex-start;gap:12px;cursor:pointer;min-width:0;
}
.tool-checklist-input{
  position:absolute;opacity:0;width:1px;height:1px;
}
.tool-checklist-box{
  flex:0 0 auto;width:22px;height:22px;
  border:2px solid var(--accent);border-radius:6px;margin-top:1px;
  display:grid;place-items:center;
  transition:background .15s,border-color .15s;
}
.tool-checklist-input:checked + .tool-checklist-box,
.tool-checklist-item.is-checked .tool-checklist-box{
  background:var(--accent);border-color:var(--accent);
}
.tool-checklist-box::after{
  content:'';width:6px;height:10px;border:solid #fff;
  border-width:0 2px 2px 0;transform:rotate(45deg) translate(-1px,-1px);opacity:0;
}
.tool-checklist-input:checked + .tool-checklist-box::after,
.tool-checklist-item.is-checked .tool-checklist-box::after{opacity:1;}
.tool-checklist-text{
  font-size:15px;color:var(--ink);line-height:1.45;
}
.tool-checklist-why{
  font-size:14px;color:var(--muted);line-height:1.45;
}
.tool-checklist-delete{
  flex:0 0 auto;width:26px;height:26px;border-radius:50%;
  border:1px solid var(--line);background:transparent;color:var(--muted);
  font-size:18px;line-height:1;cursor:pointer;display:grid;place-items:center;
}
.tool-checklist-delete:hover{color:var(--accent);border-color:var(--accent);}
.tool-checklist-add{
  display:grid;grid-template-columns:1fr 1fr auto;gap:10px;align-items:end;
  padding-top:12px;border-top:1px dashed var(--line);margin-top:4px;
}
.tool-checklist-add .tool-input{margin:0;}
.tool-checklist-add-btn{min-height:44px;}
html[data-theme="dark"] .tool-checklist-box{background:transparent;}
html[data-theme="dark"] .tool-checklist-delete{color:var(--muted);}
@media (max-width:640px){
  .tool-checklist-header{flex-direction:column;align-items:stretch;}
  .tool-checklist-export-btn{width:100%;}
  .tool-checklist-item{grid-template-columns:1fr auto;}
  .tool-checklist-main{grid-column:1;}
  .tool-checklist-why{grid-column:1;padding-left:34px;margin-top:-4px;}
  .tool-checklist-add{grid-template-columns:1fr;}
}
@media print{
  .tool-checklist-header,.tool-checklist-toggles,.tool-checklist-add{display:none;}
}




.upl-reading-progress{
  position: fixed; top: 0; left: 292px; right: 0; height: 3px;
  background: rgba(186,47,42,0); z-index: 55;
  transform-origin: left; transform: scaleX(0);
  will-change: transform;
}
.upl-reading-progress.visible{ background: #ba2f2a; }
body.has-guide-rail .upl-reading-progress{ left: 292px; }
body.rail-collapsed .upl-reading-progress,
body:not(.has-guide-rail) .upl-reading-progress{ left: 0; }
@media (max-width: 980px){
  .upl-reading-progress{ left: 0 !important; }
}


.upl-article-hero{
  position: relative;
  min-height: min(760px, calc(100vh - 109px));
  display: flex; align-items: flex-end;
  color: #fff;
  background-size: cover; background-position: center;
  overflow: hidden;
}
.upl-article-hero::before{
  content: "";
  position: absolute; inset: 0;
  background: linear-gradient(180deg, rgba(0,0,0,.05) 0%, rgba(0,0,0,.18) 45%, rgba(0,0,0,.55) 100%);
  z-index: 1;
}
.upl-article-hero .container{ position: relative; z-index: 2; width: 100%; }
.upl-hero-inner{ max-width: 820px; padding: 110px 0 70px; }
.upl-hero-breadcrumbs{ font-size: 13px; color: rgba(255,255,255,.68); margin-bottom: 18px; }
.upl-hero-breadcrumbs a{ color: rgba(255,255,255,.68); }
.upl-hero-breadcrumbs a:hover{ color: #fff; }
.upl-hero-title{
  margin: 0 0 14px; font-family: "Playfair Display", "Times New Roman", serif; font-size: clamp(48px, 7vw, 92px);
  line-height: .98; letter-spacing: -.045em; font-weight: 500;
  text-shadow: 0 2px 20px rgba(0,0,0,.2);
}
.upl-hero-lead{
  margin: 0; max-width: 640px; font-size: clamp(17px, 2vw, 21px); line-height: 1.5;
  color: rgba(255,255,255,.85);
}


.upl-article-body p,
.upl-article-body ul,
.upl-article-body ol,
.upl-article-body li{ font-size: 16px; line-height: 1.75; color: #3d3d3d; }
.upl-article-body p{ margin: 0 0 18px; }
.upl-article-body ul,
.upl-article-body ol{ margin: 0 0 24px; padding-left: 24px; }
.upl-article-body li{ padding: 5px 0; }
.upl-article-body h2{ position: relative; margin: 72px 0 22px; }
.upl-article-body h2:first-of-type{ margin-top: 0; }


.upl-section-title{
  display: flex; align-items: baseline; gap: 18px;
  font-family: "Playfair Display", "Times New Roman", serif; font-size: clamp(34px, 4.5vw, 52px);
  line-height: 1.08; letter-spacing: -.03em; font-weight: 500; color: var(--ink);
  border-top: 1px solid var(--line); padding-top: 30px; scroll-margin-top: 92px;
}
.upl-section-num{
  font-family: "Playfair Display", "Times New Roman", serif; font-size: .55em; color: var(--accent);
  font-weight: 500; letter-spacing: -.02em;
}


.upl-pull-quote{
  margin: 36px 0; padding: 26px 28px;
  background: var(--soft); border-left: 4px solid var(--accent);
  border-radius: 0 16px 16px 0;
}
.upl-pull-quote p{
  margin: 0; font-family: "Playfair Display", "Times New Roman", serif; font-size: clamp(22px, 3vw, 30px);
  line-height: 1.25; color: var(--ink); letter-spacing: -.02em;
}
.upl-pull-quote cite{
  display: block; margin-top: 14px; font-size: 14px; font-style: normal;
  color: var(--muted); font-family: Inter, ui-sans-serif, sans-serif;
}


.upl-pull-quote--body p{
  font-size: inherit; line-height: 1.6; letter-spacing: 0;
  font-family: inherit; font-weight: 400;
}


.upl-fact-card{
  display: grid; grid-template-columns: 120px 1fr; gap: 22px; align-items: center;
  margin: 32px 0; padding: 24px 26px; border: 1px solid var(--line);
  border-radius: 18px; background: #fff; box-shadow: var(--shadow);
}
.upl-fact-number{
  font-family: "Playfair Display", "Times New Roman", serif; font-size: 64px; line-height: .85; color: var(--accent);
  font-weight: 500; letter-spacing: -.04em;
}
.upl-fact-label{ display: block; font-size: 12px; letter-spacing: .12em; text-transform: uppercase; color: var(--muted); }
.upl-fact-body h4{ margin: 0 0 6px; font-size: 20px; font-weight: 700; }
.upl-fact-body p{ margin: 0; color: var(--muted); font-size: 15px; line-height: 1.55; }


.upl-figure{ margin: 36px 0; }
.upl-figure img{ width: 100%; height: auto; max-height: 520px; object-fit: cover; border-radius: 16px; display: block; }
.upl-figure figcaption{ margin-top: 10px; font-size: 13px; color: var(--muted); }


.upl-article-body h3{
  font-family: Inter, ui-sans-serif, sans-serif; font-size: 24px; font-weight: 700;
  color: var(--ink); margin: 46px 0 14px; line-height: 1.25; letter-spacing: -.01em;
}
.upl-article-body h4{
  font-size: 15px; font-weight: 700; text-transform: uppercase; letter-spacing: .1em;
  color: var(--accent); margin: 30px 0 10px;
}


.upl-tips{
  margin: 34px 0; padding: 24px 26px;
  background: linear-gradient(180deg, #fff 0%, #fbf5f4 100%);
  border: 1px solid var(--line); border-left: 4px solid var(--accent);
  border-radius: 0 16px 16px 0;
}
.upl-subhead{
  font-family: Inter, ui-sans-serif, sans-serif; font-size: 19px; font-weight: 800;
  letter-spacing: .02em; color: var(--ink); margin: 0 0 14px; scroll-margin-top: 92px;
}


.upl-tips li a{
  color: var(--accent); font-weight: 600; text-decoration: none;
  border-bottom: 1px solid rgba(186,47,42,.35); padding-bottom: 1px;
}
.upl-tips li a:hover{ border-bottom-color: var(--accent); }


.upl-related{ list-style: none; margin: 6px 0 0; padding: 0; display: grid; gap: 10px; }
.upl-related li{ margin: 0; }
.upl-related a{
  display: flex; align-items: center; justify-content: space-between; gap: 12px;
  padding: 14px 16px; border: 1px solid var(--line); border-radius: 10px;
  color: var(--ink); text-decoration: none; font-weight: 600;
  transition: border-color .2s ease, background .2s ease, transform .2s ease;
}
.upl-related a:hover{ border-color: var(--accent); background: #fff5f4; transform: translateX(2px); }
.upl-related .upl-related-arrow{ color: var(--accent); font-weight: 700; }
@media (prefers-reduced-motion: reduce){
  .upl-related a{ transition: none; }
  .upl-related a:hover{ transform: none; }
}
.upl-tips ul{ margin: 0; }


.upl-reveal{ opacity: 0; transform: translateY(28px); transition: opacity .7s ease, transform .7s ease; }
.upl-reveal-visible{ opacity: 1; transform: translateY(0); }
@media (prefers-reduced-motion: reduce){
  .upl-reveal{ opacity: 1; transform: none; transition: none; }
}

@media (scripting: none){
  .upl-reveal{ opacity: 1; transform: none; }
}


@media (max-width: 980px){
  .upl-hero-inner{ padding: 90px 0 50px; }
  .upl-fact-card{ grid-template-columns: 1fr; text-align: left; gap: 14px; }
  .upl-fact-number{ font-size: 52px; }
}
@media (max-width: 680px){
  .upl-hero-inner{ padding: 72px 0 42px; }
  .upl-hero-title{ font-size: 46px; }
  .upl-section-title{ font-size: 30px; gap: 12px; }
  .upl-pull-quote{ padding: 20px 22px; }
  .upl-pull-quote p{ font-size: 22px; }
}




html{ scroll-behavior: smooth; }
.upl-section-title{ scroll-margin-top: 116px; }


.upl-toc-active{
  color: var(--accent) !important; font-weight: 700;
  border-right: 2px solid var(--accent); padding-right: 10px; margin-right: -12px;
  background: rgba(186,47,42,.05); border-radius: 4px;
}


.upl-hero-eyebrow{
  display: inline-flex; align-items: center; gap: 10px;
  font-size: 12px; letter-spacing: .16em; text-transform: uppercase; font-weight: 800;
  color: rgba(255,255,255,.85); margin-bottom: 14px;
}
.upl-hero-eyebrow::before{
  content: ""; width: 26px; height: 2px; background: var(--accent); display: inline-block;
}


@keyframes uplHeroZoom{ from{ background-position: 50% 30%; } to{ background-position: 50% 70%; } }
.upl-article-hero{ animation: uplHeroZoom 30s ease-in-out infinite alternate; }
@media (prefers-reduced-motion: reduce){
  .upl-article-hero{ animation: none; }
  html{ scroll-behavior: auto; }
}


.upl-lede{ font-size: 17px; line-height: 1.6; color: var(--muted); margin: 0 0 22px; }
.upl-tool-card{
  margin: 0 0 36px; padding: 20px 22px; border: 1px solid var(--line);
  border-radius: 18px; background: #fff; box-shadow: var(--shadow);
}
.upl-tool-cap{
  font-size: 12px; letter-spacing: .1em; text-transform: uppercase; color: var(--muted);
  margin: 0 0 14px; display: flex; align-items: center; gap: 8px;
}
.upl-tool-cap::before{ content: ""; width: 18px; height: 2px; background: var(--accent); display: inline-block; }


.upl-stat-band{ display: grid; grid-template-columns: repeat(4, 1fr); gap: 14px; margin: 30px 0 14px; }
.upl-stat{ padding: 18px 16px; border: 1px solid var(--line); border-radius: 14px; background: #fff; text-align: center; }
.upl-stat-num{
  display: block; font-family: "Playfair Display", "Times New Roman", serif; font-size: 38px;
  line-height: 1; color: var(--accent); font-weight: 500; letter-spacing: -.03em;
}
.upl-stat-label{ display: block; margin-top: 8px; font-size: 12px; letter-spacing: .06em; text-transform: uppercase; color: var(--muted); }
.upl-caption{ font-size: 14px; color: var(--muted); line-height: 1.6; margin: 0 0 30px; }


.upl-timeline{ display: grid; grid-template-columns: repeat(4, 1fr); gap: 14px; margin: 30px 0 18px; }
.upl-step{ position: relative; padding-top: 26px; border-top: 2px solid var(--accent); }
.upl-step:not(:first-child){ border-top-color: var(--line); }
.upl-step-dot{
  position: absolute; top: -13px; left: 0; width: 24px; height: 24px; border-radius: 50%;
  background: var(--accent); color: #fff; font-size: 12px; font-weight: 700;
  display: flex; align-items: center; justify-content: center;
}
.upl-step-title{ font-size: 15px; font-weight: 700; margin: 0 0 2px; color: var(--ink); }
.upl-step-sub{ font-size: 13px; color: var(--muted); margin: 0; }
.upl-rule{
  margin: 0 0 30px; padding: 14px 18px; background: #fbf5f4; border-left: 3px solid var(--accent);
  border-radius: 0 12px 12px 0; font-size: 15px; line-height: 1.6; color: var(--ink);
}


.upl-step-split{
  display: grid; grid-template-columns: 1.05fr 0.95fr; gap: 28px; align-items: center;
  margin: 22px 0; padding: 18px; background: #fff; border: 1px solid var(--line);
  border-radius: 14px;
}
.upl-step-split .upl-step-text strong{
  display: block; font-size: 16px; font-weight: 700; color: var(--ink); margin-bottom: 6px;
}
.upl-step-split .upl-step-text p{ margin: 0 0 8px; font-size: 14.5px; line-height: 1.62; color: var(--ink); }
.upl-step-split .upl-step-text p:last-child{ margin-bottom: 0; }
.upl-step-split .upl-step-text ul{ margin: 6px 0 8px; padding-left: 18px; font-size: 14px; line-height: 1.55; }
.upl-step-split .upl-step-text li{ margin-bottom: 3px; }
.upl-step-split .upl-step-text em{ color: var(--accent); font-style: normal; font-weight: 600; }
.upl-step-media{ margin: 0; }
.upl-step-media img{ width: 100%; height: auto; border-radius: 10px; border: 1px solid var(--line); display: block; }
.upl-step-media figcaption{ margin-top: 8px; font-size: 12.5px; color: var(--muted); text-align: center; }
@media (max-width: 720px){
  .upl-step-split{ grid-template-columns: 1fr; gap: 14px; padding: 14px; }
  .upl-step-split .upl-step-media{ order: 2; }
}


.upl-compare{ width: 100%; border-collapse: collapse; margin: 30px 0; font-size: 14px; border: 1px solid var(--line); border-radius: 14px; overflow: hidden; }
.upl-compare th, .upl-compare td{ padding: 12px 14px; text-align: left; border-bottom: 1px solid var(--line); }
.upl-compare thead th{ background: var(--soft); font-weight: 700; color: var(--ink); }
.upl-compare tbody th{ font-weight: 600; color: var(--ink); background: #fff; }
.upl-compare td{ color: var(--muted); }
.upl-compare tr:last-child td, .upl-compare tr:last-child th{ border-bottom: none; }


.upl-band{ margin: 32px 0; padding: 28px 30px; background: #fbf0ef; border-radius: 18px; border-left: 4px solid var(--accent); }
.upl-band-quote{ margin: 0; font-family: Inter, ui-sans-serif, -apple-system, BlinkMacSystemFont, "Segoe UI", Arial, sans-serif; font-size: clamp(18px, 2.3vw, 23px); line-height: 1.5; color: var(--ink); font-weight: 600; }
.upl-band-sub{ margin: 10px 0 0; font-size: 14px; color: var(--muted); }


.upl-hero-cta{ margin-top: 32px; }
.upl-hero-btn{
  display: inline-flex; align-items: center; gap: 8px;
  padding: 13px 22px;
  border: 1px solid rgba(255,255,255,.55);
  background: rgba(255,255,255,.08);
  backdrop-filter: blur(6px); -webkit-backdrop-filter: blur(6px);
  color: #fff; font-size: 14px; font-weight: 600; letter-spacing: .02em;
  border-radius: 999px; text-decoration: none;
  text-shadow: 0 1px 4px rgba(0,0,0,.2);
  transition: background .2s ease, border-color .2s ease, transform .2s ease;
}
.upl-hero-btn:hover{
  background: rgba(255,255,255,.18);
  border-color: rgba(255,255,255,.9);
  transform: translateY(-1px);
}
.upl-hero-btn svg{
  width: 16px; height: 16px; stroke: currentColor; stroke-width: 2;
  fill: none; transition: transform .2s ease;
}
.upl-hero-btn:hover svg{ transform: translateX(2px); }


.upl-stepflow{
  display:grid; grid-template-columns:repeat(auto-fit,minmax(165px,1fr));
  gap:18px 22px; margin:34px 0 6px;
}
.upl-flow-card{
  position:relative; background:#fff; border:1px solid var(--line);
  border-radius:14px; padding:16px 16px 14px;
}
html[data-theme="dark"] .upl-flow-card{ background:var(--surface-2); }
.upl-flow-step{
  display:inline-flex; align-items:center; justify-content:center;
  width:26px; height:26px; border-radius:50%; background:var(--accent);
  color:#fff; font-size:13px; font-weight:700; margin-bottom:10px;
}
.upl-flow-card h3{ font-size:15px; font-weight:700; margin:0 0 4px; color:var(--ink); }
.upl-flow-card p{ font-size:13px; line-height:1.5; color:var(--muted); margin:0; }
.upl-flow-card::after{
  content:"\2192"; position:absolute; right:-15px; top:50%; transform:translateY(-50%);
  color:var(--accent); font-weight:700; font-size:18px; line-height:1;
}
.upl-flow-card:last-child::after{ content:""; }


@media (max-width: 680px){
  .upl-hero-cta{ margin-top: 24px; }
  .upl-hero-btn{ padding: 12px 18px; font-size: 13px; }
  .upl-stat-band{ grid-template-columns: repeat(2, 1fr); }
  .upl-timeline{ grid-template-columns: repeat(2, 1fr); gap: 18px 14px; }
  .upl-stat-num{ font-size: 32px; }
  .upl-stepflow{ grid-template-columns: repeat(2, 1fr); gap: 14px; }
  .upl-flow-card::after{ display:none; }
}


.upl-toc-num{ display:inline-block; min-width:1.4em; color:var(--accent); font-weight:700; font-variant-numeric:tabular-nums; }
.upl-cta{margin:28px 0;}


.guide-page .page-hero{ padding: 84px 0 52px; }
.guide-page .section{ padding: 72px 0; }


.guide-page .page-hero .container > p{ max-width: 760px; }
.guide-page .section > .container > p,
.guide-page .section > .container > h2,
.guide-page .section > .container > h3,
.guide-page .section > .container > h4,
.guide-page .section > .container > ul{ max-width: 760px; }

.guide-page p{ line-height: 1.7; }
.guide-page .section p + p{ margin-top: 14px; }
.guide-page .upl-rule p:first-child{ margin-top: 0; }
.guide-page .upl-rule p:last-child{ margin-bottom: 0; }


.guide-page .upl-jump{
  position: sticky; top: 88px; z-index: 30;
  display: flex; flex-wrap: wrap; align-items: center; gap: 8px;
  margin: 6px 0 38px; padding: 12px 14px;
  background: var(--paper); border: 1px solid var(--line); border-radius: 14px;
  box-shadow: 0 8px 24px rgba(20,20,20,.06);
}
.guide-page .upl-jump-label{
  font-size: 11px; letter-spacing: .14em; text-transform: uppercase;
  font-weight: 800; color: var(--accent); margin-right: 2px;
}
.guide-page .upl-jump a{
  display: inline-flex; align-items: center; gap: 6px;
  padding: 7px 13px; border-radius: 999px; font-size: 13.5px; font-weight: 600;
  color: var(--muted); border: 1px solid var(--line); background: var(--soft);
  white-space: nowrap; transition: border-color .18s ease, color .18s ease, background .18s ease;
}
.guide-page .upl-jump a:hover{ color: var(--ink); border-color: var(--accent); background: #fff5f4; }
.guide-page .upl-jump .upl-toc-num{ font-size: 12px; }


.guide-page .upl-takeaway{
  max-width: 760px; margin: 30px 0; padding: 20px 24px;
  background: #fbf0ef; border: 1px solid rgba(186,47,42,.18); border-left: 4px solid var(--accent);
  border-radius: 0 14px 14px 0;
}
.guide-page .upl-takeaway p{ margin: 0; font-size: 16px; color: var(--ink); }
.guide-page .upl-takeaway strong{ color: var(--accent); }

@media (max-width: 680px){
  .guide-page .upl-jump{ position: static; top: auto; }
}




:root{
  --grain:.30;                 
  --logo-top:17px; --title-y:-13px; --live-top:4px;
  --noise-img:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='220' height='220'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.85' numOctaves='3' stitchTiles='stitch'/%3E%3CfeColorMatrix type='saturate' values='0'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
}


.tool-card::before{ content:none !important; }


.tool-card{
  
  --grain-font:"SF Pro Display","Segoe UI Variable Display","Segoe UI",-apple-system,system-ui,"Helvetica Neue",Arial,sans-serif;
  --paper:#F7F3EA; --paper-2:#F1ECE0;
  --ink:#2B2620; --ink-2:rgba(43,38,32,.62); --ink-3:rgba(43,38,32,.40);
  --line:rgba(43,38,32,.14); --line-strong:rgba(43,38,32,.28);
  --shadow:0 1px 2px rgba(40,34,26,.10), 0 8px 22px rgba(40,34,26,.09), inset 0 1px 0 rgba(255,255,255,.55);
  --shadow-hover:0 2px 4px rgba(40,34,26,.12), 0 16px 40px rgba(40,34,26,.15), inset 0 1px 0 rgba(255,255,255,.75);
  --blend:multiply;
  --text:var(--ink);
  --t-money:#7E8A6A; --t-safety:#B06A5C; --t-tech:#6E8499;
  --t-shop:#B0895A; --t-travel:#6C9A95; --t-plan:#8C7C9A; --t-docs:#9A8A6E;
  --field-bg:rgba(43,38,32,.06);

  
  position:relative; isolation:isolate;
  background:linear-gradient(180deg,
    color-mix(in srgb, var(--paper) 92%, #fff) 0%,
    var(--paper) 26%);
  border:1px solid var(--line);
  border-radius:16px; overflow:hidden;
  box-shadow:var(--shadow);
  font-family:var(--grain-font); color:var(--ink);
  -webkit-font-smoothing:antialiased; -moz-osx-font-smoothing:grayscale;
  transition:box-shadow .42s cubic-bezier(.22,1,.36,1), transform .42s cubic-bezier(.22,1,.36,1), border-color .42s cubic-bezier(.22,1,.36,1);
}
html[data-theme="dark"] .tool-card{
  --paper:#252019; --paper-2:#2E281F; --field-bg:rgba(255,255,255,.13);
  --ink:#ECE5D8; --ink-2:rgba(236,229,216,.70); --ink-3:rgba(236,229,216,.50);
  --line:rgba(236,229,216,.16); --line-strong:rgba(236,229,216,.32);
  --shadow:0 1px 2px rgba(0,0,0,.4), 0 10px 28px rgba(0,0,0,.45), inset 0 1px 0 rgba(255,255,255,.07);
  --shadow-hover:0 2px 4px rgba(0,0,0,.5), 0 18px 44px rgba(0,0,0,.55), inset 0 1px 0 rgba(255,255,255,.1);
  --blend:screen;
  --text:var(--ink);
  --t-money:#9DAE83; --t-safety:#C98273; --t-tech:#93A9BC;
  --t-shop:#CCA878; --t-travel:#8FB7B1; --t-plan:#AFA0BC; --t-docs:#BCAE92;
}
.tool-card::before{ 
  content:"" !important; position:absolute; inset:0; z-index:0; pointer-events:none;
  background-image:var(--noise-img); background-size:130px 130px;
  opacity:var(--grain); mix-blend-mode:var(--blend);
}
.tool-card::before,
.tool-card::after{ pointer-events:none; }
.tool-card::after{ 
  content:""; position:absolute; top:0; left:0; right:0; height:3px; z-index:1;
  background:linear-gradient(90deg, transparent, var(--tint), transparent);
  opacity:.6;
}
.tool-card:hover{ transform:translateY(-3px); box-shadow:var(--shadow-hover); border-color:var(--line-strong); }
.tool-card > *{ position:relative; z-index:2; }


.tool-card .tool-header,
html[data-theme="dark"] .tool-card .tool-header{
  position:relative;
  display:flex; align-items:center; justify-content:flex-start; gap:0 12px;
  min-height:52px;
  padding:6px 56px 6px 72px;            
  background:transparent !important; border:0; border-radius:0; margin:0;
  text-align:left;
}
.tool-card .tool-header::before{ content:none !important; display:none !important; } 
.tool-card:not(:has(.tool-card-icon)) .tool-header{ padding-left:22px; }
.tool-card .tool-header-title{
  font-size:17px; font-weight:700; letter-spacing:-.02em; line-height:1.2;
  color:var(--ink); margin:0;
  text-align:left; white-space:nowrap;
  transform:translateY(-13px);
}
.tool-card .tool-header-status{
  position:absolute; top:4px; right:10px;
  font-size:11px; font-weight:600; color:var(--ink-3);
  display:flex; align-items:center; gap:6px; white-space:nowrap;
}
.tool-card .tool-header-dot{
  width:7px; height:7px; border-radius:50%; background:var(--tint);
  display:inline-block; animation:breathe 2.6s ease-in-out infinite;
}
@keyframes breathe{0%,100%{opacity:.35; transform:scale(.85);}50%{opacity:1; transform:scale(1);}}


.tool-card .tool-card-icon{
  position:absolute; top:17px; left:22px; z-index:2;
  width:40px; height:40px; border-radius:11px;
  display:grid; place-items:center;
  background:transparent; border:1px solid var(--line);
  color:var(--tint);
}
.tool-card .tool-card-icon svg{ width:21px; height:21px; display:block; }


.tool-card .tool-hint,
.tool-card .tool-result-note,
.tool-card .tool-info,
.tool-card .tool-footnote{
  color:var(--ink-2); font-weight:450; line-height:1.55;
}


.tool-card .tool-row{ display:flex; flex-direction:column; gap:10px; margin:0 0 12px; }
.tool-card .tool-row--inline{
  flex-direction:row; align-items:flex-end; gap:10px;
  flex-wrap:nowrap;
}
.tool-card .tool-row--inline > .tool-field{ flex:1 1 0; min-width:0; margin:0; }


.tool-card .tool-field{
  display:flex; flex-direction:column; gap:6px; margin:0;
}
.tool-card .tool-field-label{
  display:block; font-size:12px; font-weight:600; letter-spacing:.04em;
  color:var(--ink-2); margin:0;
}


.tool-card .tool-input{
  appearance:none;
  width:100%; min-height:40px;
  background:var(--field-bg); color:var(--ink);
  border:1px solid var(--line-strong); border-radius:10px;
  padding:9px 34px 9px 12px; font:500 14px var(--grain-font);
  outline:none; transition:border-color .25s cubic-bezier(.22,1,.36,1), box-shadow .25s cubic-bezier(.22,1,.36,1), background .25s cubic-bezier(.22,1,.36,1);
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 24 24' fill='none' stroke='%236B6B6B' stroke-width='2.5' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m6 9 6 6 6-6'/%3E%3C/svg%3E");
  background-repeat:no-repeat; background-position:right 12px center;
}
.tool-card select.tool-input{ cursor:pointer; }
.tool-card input.tool-input{ background-image:none; padding-right:12px; }
.tool-card .tool-input::placeholder{ color:var(--ink-3); }
.tool-card .tool-input:focus,
.tool-card .tool-input:focus-within{
  border-color:var(--tint);
  box-shadow:0 0 0 3px color-mix(in srgb, var(--tint) 22%, transparent);
  background:rgba(255,255,255,.03);
}
html[data-theme="dark"] .tool-card .tool-input:focus,
html[data-theme="dark"] .tool-card .tool-input:focus-within{
  background:rgba(255,255,255,.06);
}


.tool-card option,
.tool-card optgroup{
  background:#fff; color:#2B2620;
}
.tool-card option:disabled{ color:#999; }


.tool-card .tool-swap{
  align-self:flex-end;
  width:40px; height:40px; border-radius:10px;
  background:var(--field-bg); color:var(--ink-2);
  border:1px solid var(--line-strong); cursor:pointer;
  font-size:18px; line-height:1; transition:border-color .25s cubic-bezier(.22,1,.36,1), color .25s cubic-bezier(.22,1,.36,1), background .25s cubic-bezier(.22,1,.36,1), transform .25s cubic-bezier(.34,1.56,.64,1);
  display:inline-flex; align-items:center; justify-content:center;
}
.tool-card .tool-swap:hover{
  border-color:var(--tint); color:var(--tint); background:rgba(255,255,255,.05);
  transform:rotate(180deg);
}


.tool-card .btn{
  display:inline-flex; align-items:center; justify-content:center; gap:7px;
  width:100%; margin-top:6px; padding:10px; border-radius:11px;
  font:600 13.5px var(--grain-font); cursor:pointer;
  background:var(--tint); color:#fff; border:1px solid transparent;
  box-shadow:0 1px 2px rgba(40,34,26,.18);
  transition:filter .3s cubic-bezier(.22,1,.36,1), transform .3s cubic-bezier(.22,1,.36,1), box-shadow .3s cubic-bezier(.22,1,.36,1);
}
.tool-card .btn:hover{ filter:brightness(1.06); transform:translateY(-1px); box-shadow:0 4px 14px rgba(40,34,26,.22); }
.tool-card .btn:active{ transform:translateY(0); }


.tool-card .tool-quick{ display:flex; flex-wrap:wrap; gap:8px; margin:10px 0 6px; }
.tool-card .tool-chip{
  appearance:none; border:0;
  display:inline-flex; align-items:center; justify-content:center;
  min-height:32px; padding:6px 14px; border-radius:999px;
  background:var(--field-bg); color:var(--ink);
  border:1px solid var(--line-strong);
  font:600 13px var(--grain-font); cursor:pointer;
  transition:border-color .25s cubic-bezier(.22,1,.36,1), color .25s cubic-bezier(.22,1,.36,1), background .25s cubic-bezier(.22,1,.36,1), transform .25s cubic-bezier(.34,1.56,.64,1);
}
.tool-card .tool-chip:hover,
.tool-card .tool-chip:focus{
  background:var(--tint); border-color:var(--tint); color:#fff;
  transform:translateY(-1px); box-shadow:0 3px 10px color-mix(in srgb, var(--tint) 28%, transparent);
}
.tool-card .tool-chip:active{ transform:translateY(0); }


.tool-card .tool-result{ color:var(--tint); font-weight:800; letter-spacing:-.02em; }
.tool-card .tool-result-unit{ color:var(--ink-2); font-weight:500; }


.tool-card .tool-related{ margin-top:18px; padding-top:14px; border-top:1px solid var(--line); }
.tool-card .tool-related-title{
  font-size:11px; font-weight:700; letter-spacing:.1em; text-transform:uppercase;
  color:var(--ink-3); margin:0 0 10px;
}
.tool-card .related-list{ display:flex; flex-wrap:wrap; gap:8px; }
.tool-card .related-list a{
  display:inline-flex; align-items:center;
  min-height:32px; padding:6px 14px; border-radius:999px;
  background:var(--field-bg); color:var(--ink);
  border:1px solid var(--line-strong);
  font:500 13px var(--grain-font); text-decoration:none;
  transition:border-color .15s, color .15s, background .15s;
}
.tool-card .related-list a:hover{
  background:var(--tint); border-color:var(--tint); color:#fff;
}


.tool-card[data-tool="currency"],
.tool-card[data-tool="jin"],
.tool-card[data-tool="size"]{ --tint:var(--t-money); }

.tool-card[data-tool="plug-checker"],
.tool-card[data-tool="firewall-checker"],
.tool-card[data-tool="connectivity-recommender"]{ --tint:var(--t-tech); }

.tool-card[data-tool="water-picker"],
.tool-card[data-tool="allergy-card"],
.tool-card[data-tool="emergency-cards"]{ --tint:var(--t-safety); }

.tool-card[data-tool="haggling-calculator"],
.tool-card[data-tool="boba-tea-builder"],
.tool-card[data-tool="alipay-setup"],
.tool-card[data-tool="alipay-registration"],
.tool-card[data-tool="wechat-setup"]{ --tint:var(--t-shop); }

.tool-card[data-tool="toilet-finder"],
.tool-card[data-tool="taxi-price-estimator"],
.tool-card[data-tool="taxi-cards"],
.tool-card[data-tool="didi-setup"],
.tool-card[data-tool="amap-setup"],
.tool-card[data-tool="subway-qr"],
.tool-card[data-tool="departure-calculator"]{ --tint:var(--t-travel); }

.tool-card[data-tool="holiday-radar"],
.tool-card[data-tool="preChecklist"],
.tool-card[data-tool="crowd-checker"]{ --tint:var(--t-plan); }


/* ===== Crowd Checker (crowd-checker tool) ===== */
.tool-card[data-tool="crowd-checker"]{
  --cc-red:#B23A2E; --cc-yellow:#C8922A; --cc-lime:#7E9547; --cc-green:#3F8F6B;
  --cc-red-bg:rgba(178,58,46,.12); --cc-yellow-bg:rgba(200,146,42,.14);
  --cc-lime-bg:rgba(126,149,71,.14); --cc-green-bg:rgba(63,143,107,.14);
}
.tool-card[data-tool="crowd-checker"] .tool-body{ padding:18px 24px 26px; }
html[data-theme="dark"] .tool-card[data-tool="crowd-checker"] .tool-body{ padding:18px 24px 26px; }
.tool-card[data-tool="crowd-checker"] .tool-intro{
  font-size:14px; line-height:1.6; color:var(--ink-2); margin:0 0 16px;
}
.tool-card[data-tool="crowd-checker"] .tool-row--inline{ align-items:flex-end; }

.tool-card[data-tool="crowd-checker"] .tool-divider{
  margin:22px 0 18px; border:0; border-top:1px solid var(--line);
}
.tool-card[data-tool="crowd-checker"] .section-label{
  font-size:11px; font-weight:700; letter-spacing:.1em; text-transform:uppercase;
  color:var(--ink-3); margin:0 0 12px;
}
.tool-card[data-tool="crowd-checker"] .note{
  font-size:13px; line-height:1.5; padding:10px 13px; border-radius:10px; margin:0 0 14px;
  border:1px solid;
}
.tool-card[data-tool="crowd-checker"] .note-warn{
  color:#9a6b00; background:var(--cc-yellow-bg); border-color:color-mix(in srgb, var(--cc-yellow) 34%, transparent);
}
html[data-theme="dark"] .tool-card[data-tool="crowd-checker"] .note-warn{
  color:#E7C07A; background:rgba(200,146,42,.16); border-color:rgba(200,146,42,.40);
}
.tool-card[data-tool="crowd-checker"] .note-info{
  color:var(--ink-2); background:var(--field-bg); border-color:var(--line);
}

/* verdict */
.tool-card[data-tool="crowd-checker"] .summary-verdict{
  display:block; margin:0 0 18px; padding:13px 16px;
  border-left:4px solid var(--cc-stripe, var(--t-plan));
  background:var(--field-bg); border-radius:6px;
}
.tool-card[data-tool="crowd-checker"] .summary-verdict.red{ --cc-stripe:var(--cc-red); background:var(--cc-red-bg); }
.tool-card[data-tool="crowd-checker"] .summary-verdict.yellow{ --cc-stripe:var(--cc-yellow); background:var(--cc-yellow-bg); }
.tool-card[data-tool="crowd-checker"] .summary-verdict.lime{ --cc-stripe:var(--cc-lime); background:var(--cc-lime-bg); }
.tool-card[data-tool="crowd-checker"] .summary-verdict.green{ --cc-stripe:var(--cc-green); background:var(--cc-green-bg); }
.tool-card[data-tool="crowd-checker"] .summary-verdict.mixed{ --cc-stripe:var(--t-plan); }
.tool-card[data-tool="crowd-checker"] .summary-status{
  display:inline-block; font-weight:800; font-size:12px; letter-spacing:.06em; text-transform:uppercase;
  color:var(--cc-stripe, var(--ink)); margin:0 0 4px;
}
.tool-card[data-tool="crowd-checker"] .summary-verdict h2{
  font-family:"Playfair Display",Georgia,serif; font-size:21px; margin:0 0 5px; line-height:1.2; color:var(--ink);
}
.tool-card[data-tool="crowd-checker"] .summary-verdict p{ margin:0; color:var(--ink-2); font-size:14.5px; }
.tool-card[data-tool="crowd-checker"] .summary-tips{ margin:10px 0 0; padding-left:18px; font-size:14px; color:var(--ink); }
.tool-card[data-tool="crowd-checker"] .summary-tips li{ margin:0 0 5px; }
.tool-card[data-tool="crowd-checker"] .summary-tips strong{ color:var(--ink); }

/* segments */
.tool-card[data-tool="crowd-checker"] .segments{ margin:0 0 18px; }
.tool-card[data-tool="crowd-checker"] .segment{
  background:var(--card); border:1px solid var(--line); border-radius:14px;
  padding:14px 16px; margin:0 0 10px; box-shadow:0 1px 2px rgba(0,0,0,.04);
}
.tool-card[data-tool="crowd-checker"] .segment.red{ --cc-stripe:var(--cc-red); }
.tool-card[data-tool="crowd-checker"] .segment.yellow{ --cc-stripe:var(--cc-yellow); }
.tool-card[data-tool="crowd-checker"] .segment.lime{ --cc-stripe:var(--cc-lime); }
.tool-card[data-tool="crowd-checker"] .segment.green{ --cc-stripe:var(--cc-green); }
.tool-card[data-tool="crowd-checker"] .segment-head{ display:flex; flex-wrap:wrap; align-items:center; gap:10px; margin:0 0 8px; }
.tool-card[data-tool="crowd-checker"] .segment-tag{
  display:inline-block; font-weight:800; font-size:11px; letter-spacing:.05em; text-transform:uppercase;
  padding:3px 10px; border-radius:999px; color:#fff; background:var(--cc-stripe);
}
.tool-card[data-tool="crowd-checker"] .segment-dates{ font-size:13px; color:var(--ink-2); white-space:nowrap; }
.tool-card[data-tool="crowd-checker"] .segment-desc{ margin:0 0 10px; font-size:15px; color:var(--ink); }
.tool-card[data-tool="crowd-checker"] .segment-tips{ margin:0; padding-left:18px; font-size:14px; color:var(--ink-2); }
.tool-card[data-tool="crowd-checker"] .segment-tips li{ margin:0 0 5px; }
.tool-card[data-tool="crowd-checker"] .segment-tips strong{ color:var(--ink); }

/* action tips */
.tool-card[data-tool="crowd-checker"] .action-tips{
  margin:0; padding-left:20px; font-size:15px; line-height:1.65; color:var(--ink);
}
.tool-card[data-tool="crowd-checker"] .action-tips li{ margin:0 0 8px; }
.tool-card[data-tool="crowd-checker"] .action-tips strong{ color:var(--ink); }
.tool-card[data-tool="crowd-checker"] #actionIntro{ color:var(--ink-2); font-size:14.5px; margin:0 0 10px; }
.tool-card[data-tool="crowd-checker"] #actionIntro strong{ color:var(--ink); }

/* day-by-day breakdown */
.tool-card[data-tool="crowd-checker"] .breakdown{
  border:1px solid var(--line); border-radius:14px; overflow:hidden; background:var(--card); margin-top:18px;
}
.tool-card[data-tool="crowd-checker"] .breakdown summary{
  cursor:pointer; padding:12px 16px; font-weight:700; font-size:14px; color:var(--ink);
  list-style:none; display:flex; align-items:center; justify-content:space-between;
}
.tool-card[data-tool="crowd-checker"] .breakdown summary::-webkit-details-marker{ display:none; }
.tool-card[data-tool="crowd-checker"] .breakdown summary::after{
  content:""; width:0; height:0; border-left:5px solid var(--ink-3);
  border-top:4px solid transparent; border-bottom:4px solid transparent; transition:.15s;
}
.tool-card[data-tool="crowd-checker"] .breakdown[open] summary::after{ transform:rotate(90deg); }
.tool-card[data-tool="crowd-checker"] .bd-table{ width:100%; border-collapse:collapse; font-size:13px; }
.tool-card[data-tool="crowd-checker"] .bd-table th,
.tool-card[data-tool="crowd-checker"] .bd-table td{ padding:9px 16px; text-align:left; border-top:1px solid var(--line); }
.tool-card[data-tool="crowd-checker"] .bd-table th{ color:var(--ink-3); font-weight:700; background:var(--paper); }
.tool-card[data-tool="crowd-checker"] .bd-tag{
  font-weight:700; padding:2px 9px; border-radius:999px; font-size:12px; color:#fff; white-space:nowrap;
}
.tool-card[data-tool="crowd-checker"] .bd-tag.red{ background:var(--cc-red); }
.tool-card[data-tool="crowd-checker"] .bd-tag.yellow{ background:var(--cc-yellow); }
.tool-card[data-tool="crowd-checker"] .bd-tag.lime{ background:var(--cc-lime); }
.tool-card[data-tool="crowd-checker"] .bd-tag.green{ background:var(--cc-green); }

.tool-card[data-tool="visa-checker"],
.tool-card[data-tool="arrival-card"]{ --tint:var(--t-docs); }




html[data-color="neutral"] .tool-card{ --tint:var(--ink-3); }
html[data-color="neutral"] .tool-card::after{ background:linear-gradient(90deg,transparent,var(--line-strong),transparent); }


/* ===== Blog sub-bar (category tabs + search) — shared by blog index & article pages ===== */
.blogsub{display:flex;align-items:center;justify-content:space-between;gap:16px;max-width:1120px;margin:26px auto 0;padding:0 18px;flex-wrap:wrap}
.tabs{display:flex;flex-wrap:wrap;gap:8px;overflow-x:auto;-webkit-overflow-scrolling:touch}
.tabs button,.tabs a{display:inline-flex;align-items:center;gap:7px;font:inherit;font-size:14px;color:var(--muted);background:none;border:1.5px solid transparent;border-radius:999px;padding:8px 15px;text-decoration:none;cursor:pointer;white-space:nowrap;transition:color .15s,border-color .15s,background .15s}
.tabs button:hover,.tabs a:hover{color:var(--ink);background:var(--soft)}
.tabs a{border-color:var(--line)}
.tabs .tools-link{margin-left:8px;padding-left:16px;border-left:1px solid var(--line);border-color:var(--accent);color:var(--accent);font-weight:600}
.tabs .tools-link:hover{background:var(--accent);color:#fff}
.tabs .tools-link .arw{font-size:12px;line-height:1;opacity:.85;margin-left:2px}
.tabs .tools-link:hover .arw{opacity:1}
.tabs button.active,.tabs a.active{background:var(--accent);border-color:var(--accent);color:#fff;font-weight:600}
.tabs .dotc{width:7px;height:7px;border-radius:50%;flex:0 0 auto}
.tabs button.active .dotc,.tabs a.active .dotc{background:rgba(255,255,255,.92)}
.tabs .count{font-size:11px;font-weight:700;padding:2px 7px;border-radius:999px;background:var(--soft);color:var(--muted)}
.tabs button.active .count,.tabs a.active .count{background:rgba(255,255,255,.25);color:#fff}
.search{display:flex;align-items:center;gap:8px;background:var(--paper);border:1px solid var(--line);border-radius:999px;padding:8px 14px;color:var(--muted);font-size:13px;flex:0 0 auto}
.search input{border:none;outline:none;background:none;font:inherit;color:var(--ink);width:160px}
.search input::placeholder{color:var(--muted)}
.search-btn{background:none;border:none;padding:0;margin:0;cursor:pointer;color:var(--muted);display:flex;align-items:center}
.search-btn:hover{color:var(--ink)}
@media(max-width:640px){.blogsub{flex-direction:column;align-items:stretch;gap:12px}.search{width:100%}.search input{width:100%}.tabs{margin:0 -2px}}

/* ===== City Guide arrival-kit block (P0 funnel entry) =====
   Drives the orphaned City Guide pages into the CTE funnel:
   a city-specific printable survival checklist preview + email capture.
   Uses brand tokens only, so it adapts to light and dark mode automatically. */
.cgak{ padding: 10px 0 38px; }
.cgak-inner{ max-width: 860px; }
.cgak-card{
  background: var(--card);
  border: 1px solid var(--line);
  border-radius: 16px;
  padding: 30px 28px 32px;
  box-shadow: 0 8px 30px rgba(0,0,0,.05);
}
.cgak-eyebrow{
  display:inline-block;
  font-size: 11px; font-weight: 700; letter-spacing: .08em; text-transform: uppercase;
  color: var(--accent);
  margin: 0 0 10px;
}
.cgak-title{
  font-family: "Playfair Display", serif;
  font-size: clamp(24px, 3.4vw, 32px);
  line-height: 1.18;
  margin: 0 0 10px;
  color: var(--ink);
  letter-spacing: -.01em;
}
.cgak-lede{
  color: var(--muted);
  font-size: 15px;
  line-height: 1.65;
  margin: 0 0 24px;
  max-width: 60ch;
}
.cgak-body{ display: grid; grid-template-columns: 1fr 1fr; gap: 30px; align-items: start; }
.cgak-cl-title{
  font-size: 13px; font-weight: 700; text-transform: uppercase; letter-spacing: .06em;
  color: var(--ink);
  margin: 0 0 12px;
}
.cgak-list{ list-style: none; margin: 0; padding: 0; }
.cgak-list li{ display: flex; gap: 11px; align-items: flex-start; padding: 9px 0; border-bottom: 1px solid var(--line); }
.cgak-list li:last-child{ border-bottom: none; }
.cgak-dot{ flex: none; width: 8px; height: 8px; margin-top: 7px; border-radius: 50%; background: var(--accent); }
.cgak-dot-city{ background: var(--ink); }
.cgak-list b{ display: block; font-size: 14.5px; color: var(--ink); font-weight: 700; }
.cgak-list span{ display: block; font-size: 13px; color: var(--muted); line-height: 1.5; margin-top: 1px; }
.cgak-city-tip{ background: rgba(186,47,42,.05); border-radius: 10px; padding: 11px 13px; margin-top: 6px; border-bottom: none; }
.cgak-city-tip b{ color: var(--accent); }

.cgak-form{ display: flex; flex-direction: column; }
.cgak-label{ font-size: 13px; font-weight: 600; color: var(--ink); margin: 0 0 8px; }
.cgak-row{ display: flex; gap: 10px; flex-wrap: wrap; }
.cgak-input{
  flex: 1 1 200px; min-width: 0;
  padding: 13px 16px;
  border: 1px solid var(--line);
  border-radius: 999px;
  font-size: 15px;
  background: var(--soft);
  color: var(--ink);
}
.cgak-input::placeholder{ color: var(--muted); }
.cgak-input:focus{ outline: 2px solid var(--accent); outline-offset: 1px; border-color: var(--accent); }
.cgak-btn{
  padding: 13px 22px;
  background: var(--accent);
  color: #fff;
  border: 0;
  border-radius: 999px;
  font-weight: 700;
  font-size: 15px;
  cursor: pointer;
  white-space: nowrap;
}
.cgak-btn:hover{ background: var(--accent-dark); }
.cgak-btn:active{ transform: translateY(1px); }
.cgak-msg{ width: 100%; margin: 10px 0 0; font-size: 13px; color: var(--accent); min-height: 18px; }
.cgak-fine{ margin: 10px 0 0; font-size: 12px; color: var(--muted); line-height: 1.5; }

@media (max-width: 680px){
  .cgak-body{ grid-template-columns: 1fr; gap: 22px; }
  .cgak-card{ padding: 24px 18px 26px; }
}
.ctp-seed{ margin: 0; padding: 42px 20px 12px; }
/* Inline Arrival Kit CTA — matches the sidebar-card visual contract: dark theme
   follows --surface-2, light theme uses --paper, with a 4px brand-red left accent.
   White-glass was rejected on 2026-08-22 because the bright panel floating on a
   dark page caused readability fatigue ("completely unreadable" on dark theme).
   Layout (flex / max-width / padding / border-radius) is unchanged from v3; only
   the color tokens were reset to the sidebar-card palette. */
.ctp-seed-inner, .ctp-seed-cta{
  display: flex; align-items: center; justify-content: space-between; gap: 32px;
  max-width: 880px; margin: 0 auto;
  background: var(--paper);
  border: 1px solid var(--line);
  border-left: 4px solid var(--accent);
  border-radius: 18px;
  padding: 32px 36px;
  box-shadow: 0 6px 18px rgba(0,0,0,0.06);
}
html[data-theme="dark"] .ctp-seed-inner,
html[data-theme="dark"] .ctp-seed-cta{
  background: var(--surface-2);
  border-color: var(--line);
  border-left-color: var(--accent);
}
.ctp-seed-copy{ min-width: 0; }
.ctp-seed-title{
  font-family: 'Playfair Display', Georgia, serif; font-size: 26px; line-height: 1.2;
  margin: 0 0 10px; color: var(--ink); font-weight: 700;
}
.ctp-seed-lead{
  margin: 0; color: var(--muted); font-size: 16px; line-height: 1.68; max-width: 56ch;
  font-weight: 500;
}
.ctp-seed-btn{
  flex: 0 0 auto; background: var(--accent); color: #fff; text-decoration: none;
  font-weight: 700; font-size: 15px; padding: 14px 24px; border-radius: 999px;
  white-space: nowrap; transition: background .2s, transform .2s;
}
.ctp-seed-btn:hover{ background: var(--accent-dark); }
.ctp-seed-btn:active{ transform: translateY(1px); }
/* Inline email form follows the host card's surface so the field trench reads as
   "below the skin", not as a separate piece of UI. */
.ctp-seed-cta .ctp-seed-form .ch-cta-email{
  background: var(--paper); color: var(--ink);
  border: 1.5px solid var(--line);
  border-radius: 12px;
  padding: 14px 16px;
}
html[data-theme="dark"] .ctp-seed-cta .ctp-seed-form .ch-cta-email{
  background: #1a1e25;
  border-color: var(--line);
}
.ctp-seed-cta .ctp-seed-form .ch-cta-email:focus{
  outline: none; border-color: var(--accent);
  box-shadow: 0 0 0 3px rgba(186,47,42,0.18);
}
.ctp-seed-cta .ctp-seed-form .ch-cta-email::placeholder{ color: var(--muted); opacity: 1; }
.ctp-seed-cta .ctp-seed-form .ch-cta-msg{ color: var(--accent); }
.ctp-seed-cta .ctp-seed-form .ch-cta-msg.ch-cta-err{ color: #b3261e; }
@media (max-width: 680px){
  .ctp-seed-inner, .ctp-seed-cta{ flex-direction: column; align-items: stretch; gap: 20px; padding: 26px 22px; }
  .ctp-seed-btn{ width: 100%; text-align: center; }
  .ctp-seed-title{ font-size: 22px; }
  .ctp-seed-lead{ font-size: 15px; }
}

/* ===== Blog image zoom + lightbox (shared across itinerary articles) ===== */
.upl-figure, .article-photo, .ch-map-figure {
  position: relative;
  overflow: hidden;
  cursor: zoom-in;
}
.upl-figure img, .article-photo img, .ch-map-figure img {
  transition: transform .4s ease, filter .4s ease;
  will-change: transform;
}
.upl-figure:hover img, .article-photo:hover img, .ch-map-figure:hover img {
  transform: scale(1.045);
  filter: brightness(1.02);
}
.upl-figure::after, .article-photo::after, .ch-map-figure::after {
  content: "点击放大 / Click to zoom";
  position: absolute;
  top: 12px;
  right: 12px;
  background: rgba(0,0,0,.56);
  color: #fff;
  font: 600 12px/1 -apple-system, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
  padding: 6px 12px;
  border-radius: 999px;
  letter-spacing: .02em;
  pointer-events: none;
  opacity: 0;
  transform: translateY(-4px);
  transition: opacity .25s ease, transform .25s ease;
  z-index: 2;
}
.upl-figure:hover::after, .article-photo:hover::after, .ch-map-figure:hover::after {
  opacity: 1;
  transform: translateY(0);
}

/* Lightbox overlay */
.ctp-lightbox {
  position: fixed;
  inset: 0;
  background: rgba(15,15,18,.92);
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 4vmin;
  z-index: 9999;
  cursor: zoom-out;
  opacity: 0;
  transition: opacity .2s ease;
}
.ctp-lightbox.open { opacity: 1; }
.ctp-lightbox img {
  max-width: 92vw;
  max-height: 92vh;
  border-radius: 12px;
  box-shadow: 0 20px 60px rgba(0,0,0,.5);
  cursor: default;
}
.ctp-lightbox .ctp-lb-close {
  position: fixed;
  top: 18px;
  right: 22px;
  width: 42px;
  height: 42px;
  background: rgba(255,255,255,.12);
  color: #fff;
  border: 1px solid rgba(255,255,255,.3);
  border-radius: 999px;
  font: 600 20px/40px -apple-system, "Segoe UI", Roboto, sans-serif;
  text-align: center;
  cursor: pointer;
}
.ctp-lightbox .ctp-lb-hint {
  position: fixed;
  bottom: 18px;
  left: 0;
  right: 0;
  text-align: center;
  color: rgba(255,255,255,.7);
  font: 13px -apple-system, "Segoe UI", Roboto, sans-serif;
}

/* Touch devices: disable hover (sticky on tap) but keep lightbox */
@media (hover: none) {
  .upl-figure:hover img, .article-photo:hover img, .ch-map-figure:hover img { transform: none; filter: none; }
  .upl-figure::after, .article-photo::after, .ch-map-figure::after { display: none; }
}

/* Related articles section: keep title and links left-aligned */
section.related-articles .related-title,
section.related-articles .related-list,
section.related-articles .related-list a { text-align: left; }


/* --- stylesync begin: synced from assets/styles.css @ 2026-08-24 --- */
/* stylesync-patch.css — synced from assets/styles.css on 2026-08-24 */
/* Goal: bring offline/assets/styles.css in sync with master for selectors
   present in master but missing from offline. Tool-related CSS only.       */

.tr-en, .tr-zh{ display: inline; }
body:not(.lang-zh) .tr-zh{ display: none; }
body.lang-zh .tr-en{ display: none; }
.locale-switch{
  display: inline-flex; align-items: center; gap: 6px;
  font-size: 12px; letter-spacing: .03em; color: var(--ink);
  background: transparent; border: 1px solid var(--line, #ddd9cd);
  border-radius: 999px; padding: 7px 13px; cursor: pointer; white-space: nowrap;
}
.locale-switch:hover{ background: var(--soft); }
.locale-switch svg{ flex: none; }
html[data-theme="dark"] .locale-switch{ border-color: var(--line); color: var(--ink); }
.cta-card{ background: var(--paper); border: 1px solid var(--line); border-radius: 16px; padding: 36px; margin: 40px 0; text-align: center; }
.cta-card h3{ font-family: "Playfair Display", serif; font-weight: 500; font-size: clamp(24px, 3vw, 32px); margin: 0 0 12px; }
.cta-card p{ color: var(--muted); max-width: 640px; margin: 0 auto 22px; }
.cta-card .btn-primary{ display: inline-block; padding: 14px 28px; border-radius: 10px; text-decoration: none; font-weight: 700; color: #fff !important; }
.country-groups{ display: grid; grid-template-columns: repeat(auto-fit, minmax(240px, 1fr)); gap: 16px; margin: 20px 0; }
.country-group{ background: var(--paper); border: 1px solid rgba(186,47,42,.16); border-radius: 14px; padding: 16px 18px; }
.country-group h4{ margin: 0 0 8px; font-size: 15px; color: var(--brand-primary); font-family: inherit; }
.country-group p{ margin: 0; font-size: 14px; line-height: 1.65; }
html[data-theme="dark"] .country-group{ background: var(--surface-2); border-color: var(--line); }
.city-grid.five-up{ grid-template-columns: repeat(5,1fr); }
.chengdu{ --city-bg: linear-gradient(160deg, rgba(60,12,8,.06), rgba(45,8,6,.82)), linear-gradient(135deg,#c2463c,#7a1f1c); }
.faq-question > span:last-child{ font-size:24px; font-weight:400; transition:.2s; }
.faq-answer > p{ margin:0; padding:0 50px 26px 0; max-width:850px; min-height:0; overflow:hidden; }
.faq-item.open .faq-question > span:last-child{ transform:rotate(45deg); }
.footer-col h3, .footer-col h4{ margin:0 0 16px; font-size:13px; text-transform:uppercase; letter-spacing:.12em; }
.footer-bottom a{display:inline-block;padding:8px 6px;border-radius:4px;}
.reviews-summary{ display:flex; align-items:center; gap:22px; max-width:420px; margin:0 auto 44px; padding:22px 28px; border:1px solid var(--line); border-radius:18px; background:var(--soft); }
.reviews-summary[hidden]{ display:none; }
.rs-score{ font-family:"Playfair Display", serif; font-size:52px; line-height:1; font-weight:600; color:var(--ink); }
.reviews-summary .rating{ font-size:22px; }
.rs-count{ color:var(--muted); font-size:14px; margin-top:4px; }
.feedback-wrap{ max-width:680px; margin:0 auto; border:1px solid var(--line); border-radius:18px; background:var(--soft); padding:34px 32px; }
.feedback-wrap .fb-head{ text-align:center; margin-bottom:22px; }
.feedback-wrap .fb-head h2{ margin:6px 0 8px; font-size:26px; }
.feedback-wrap .sub{ color:var(--muted); margin:0; }
.fb-status{ margin:12px 0 0; font-size:14px; text-align:center; min-height:18px; }
.fb-status.ok{ color:#1a7f37; }
.fb-status.err{ color:var(--accent); }
.article-body p a,
.article-body li a,
.guide-page main p a,
.guide-page main li a{ color: var(--accent); text-decoration: underline; text-underline-offset: 2px; }
.article-body p a:hover,
.article-body li a:hover,
.guide-page main p a:hover,
.guide-page main li a:hover{ text-decoration: none; }
.chengdu-detail-hero{
  background-image: linear-gradient(90deg, rgba(28,12,8,.84) 0%, rgba(28,12,8,.5) 48%, rgba(28,12,8,.12) 82%), url('chengdu/skyline-night.jpg');
  background-position: center 46%;
}
.chengdu-collage{
  min-height: 680px;
  border-radius: 18px;
  overflow: hidden;
  position: relative;
  background: linear-gradient(145deg, rgba(80,24,16,.92) 0%, rgba(38,12,8,.96) 100%), url('chengdu/skyline-night.jpg') center/cover;
  display: flex;
  align-items: center;
  justify-content: center;
  text-align: center;
  box-shadow: var(--shadow);
}
.chengdu-collage .photo-reserved-large{
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 16px;
  padding: 48px 40px;
  color: rgba(255,255,255,.88);
  max-width: 420px;
}
.chengdu-collage .photo-reserved-large .prl-icon{
  width: 56px;
  height: 56px;
  opacity: .72;
  stroke-width: 1.4;
}
.chengdu-collage .photo-reserved-large .prl-eyebrow{
  font-size: 11px;
  letter-spacing: .16em;
  text-transform: uppercase;
  color: #d8b777;
  font-weight: 700;
}
.chengdu-collage .photo-reserved-large .prl-subject{
  font-family: "Playfair Display", serif;
  font-size: clamp(30px, 3.4vw, 44px);
  font-weight: 500;
  line-height: 1.08;
  color: #fff;
  margin: 0;
}
.chengdu-collage .photo-reserved-large .prl-hint{
  font-size: 14px;
  line-height: 1.55;
  color: rgba(255,255,255,.55);
  margin: 0;
  max-width: 300px;
}
.chengdu-maps{ overflow: hidden; }
.chengdu-food-banner{ background: linear-gradient(90deg,rgba(41,13,7,.91),rgba(41,13,7,.48)), url('index-img/best-cities-food-02-chengdu.jpg') center 54%/cover; }
.photo-reserved{background:var(--surface-2);border:1px dashed var(--line);border-radius:14px;display:flex;flex-direction:column;align-items:center;justify-content:center;text-align:center;padding:22px 14px;color:var(--muted);gap:6px;width:100%;height:100%;box-sizing:border-box}
.photo-reserved .pr-eyebrow{font-size:11px;letter-spacing:.12em;text-transform:uppercase;color:var(--accent);font-weight:700}
.photo-reserved .pr-subject{font-family:"Playfair Display",serif;font-size:19px;color:var(--ink);font-weight:600;line-height:1.25;padding:0 4px}
.photo-reserved .pr-hint{font-size:12px;color:var(--muted)}
.city-day-image.photo-reserved{min-height:360px;aspect-ratio:4/3}
.city-collage .collage-small.photo-reserved .pr-subject{font-size:13px;line-height:1.2}
.city-collage .collage-small.photo-reserved{padding:14px 8px}
.source-note a{font-style:normal;color:var(--accent);text-decoration:underline;text-underline-offset:2px;}
.sources-box{
  margin:44px 0 8px;
  padding:22px 24px;
  background:var(--soft);
  border:1px solid var(--line);
  border-left:3px solid var(--accent);
  border-radius:0 12px 12px 0;
}
.sources-box .sources-title{
  font-family:"Playfair Display",serif;font-weight:500;font-size:22px;margin:0 0 8px;color:var(--ink);
}
.sources-box .sources-intro{
  font-size:13.5px;line-height:1.65;color:var(--muted);margin:0 0 14px;
}
.sources-box .sources-list{margin:0;padding-left:20px;}
.sources-box .sources-list li{font-size:14px;line-height:1.7;color:var(--ink);margin-bottom:8px;}
.sources-box .sources-list a{color:var(--accent);text-decoration:underline;text-underline-offset:2px;font-weight:600;}
.sources-box .sources-list a:hover{text-decoration:none;}
.tool-embed-desc{margin:0 0 16px;font-size:14.5px;line-height:1.6;color:var(--ink,#171717)}
.tool-embed-cta{display:inline-block;padding:12px 20px;border-radius:12px;background:var(--accent,#ba2f2a);color:#fff;font-weight:700;font-size:15px;text-decoration:none;transition:opacity .15s,transform .15s}
.tool-embed-cta:hover{opacity:.92;transform:translateY(-1px)}
.tool-embed-fallback{margin:14px 0 0;font-size:13px;color:var(--muted);line-height:1.5}
.tool-embed-fallback a{color:var(--accent,#ba2f2a);font-weight:600;text-decoration:none}
.tool-embed-fallback a:hover{text-decoration:underline}
.visa-source{margin-top:14px;padding:11px 13px;border-top:1px dashed var(--line);font-size:12.5px;color:var(--muted);line-height:1.5}
.visa-source strong{color:var(--ink)}
.visa-source-dot{display:inline-block;width:8px;height:8px;border-radius:50%;background:#1f7a4d;margin-right:6px;vertical-align:middle}
.visa-source-note{margin-top:5px;font-style:italic}
.visa-itinerary{margin:6px 0 4px;padding:0;background:transparent;}
.visa-itinerary-hint{font-size:13px;color:var(--muted);margin:0 0 10px;line-height:1.5;}
.visa-itinerary-rows{display:flex;flex-direction:column;gap:8px;}
.visa-add-row{margin-top:10px;}
.visa-seg{margin:12px 0;padding:12px 14px;border-radius:12px;border:1px solid var(--line);}
.visa-seg--ok{background:rgba(31,122,77,.08);border-color:rgba(31,122,77,.4);}
.visa-seg--bad{background:rgba(186,47,42,.07);border-color:rgba(186,47,42,.4);}
.visa-seg-head{font-weight:700;font-size:14px;color:var(--ink);margin-bottom:6px;}
.visa-seg-err{font-size:13px;color:var(--accent);line-height:1.5;}
.visa-seg-ok{font-size:13px;color:#1f7a4d;line-height:1.5;}
.visa-seg-summary{margin:14px 0 0;padding:0;font-weight:600;font-size:14px;border:0;background:transparent;}
.visa-seg-summary .visa-seg-mark{display:inline-block;margin-right:4px;font-weight:700;}
.visa-seg-summary--ok .visa-seg-mark{color:#1f7a4d;}
.visa-seg-summary--bad .visa-seg-mark{color:var(--accent);}
.visa-seg-summary--ok{color:var(--ink);}
.visa-seg-summary--bad{color:var(--ink);}
.visa-identity{display:flex;align-items:stretch;gap:14px;padding:16px 18px;border-radius:16px;margin:2px 0 14px;border:1px solid var(--line);}
.visa-identity-badge{flex:0 0 auto;align-self:flex-start;display:inline-flex;align-items:center;justify-content:center;font-size:12px;font-weight:800;letter-spacing:.05em;padding:7px 12px;border-radius:999px;color:#fff;white-space:nowrap;}
.visa-identity-main{min-width:0;}
.visa-identity-big{font-size:21px;font-weight:800;line-height:1.2;margin-bottom:4px;color:var(--ink);}
.visa-identity-sub{font-size:14px;line-height:1.55;color:var(--ink);}
.visa-id--ok{background:rgba(31,122,77,.10);border-color:rgba(31,122,77,.45);}
.visa-id--ok .visa-identity-badge{background:#1f7a4d;}
.visa-id--bad{background:rgba(186,47,42,.09);border-color:rgba(186,47,42,.42);}
.visa-id--bad .visa-identity-badge{background:var(--accent);}
.visa-id--transit{background:rgba(181,121,26,.12);border-color:rgba(181,121,26,.42);}
.visa-id--transit .visa-identity-badge{background:#b5791a;}
.visa-route-card{margin:4px 0 10px;padding:0;background:transparent;border:0;}
.visa-layer-note{font-size:14.5px;line-height:1.6;color:var(--ink);margin:2px 0 12px;}
.visa-leg--ok .visa-leg-head .visa-seg-mark{color:#1f7a4d;font-weight:700;margin-right:4px;}
.visa-leg--bad .visa-leg-head .visa-seg-mark{color:var(--accent);font-weight:700;margin-right:4px;}
.visa-leg .visa-seg-ok{color:#1f7a4d;}
.visa-leg .visa-seg-err{color:var(--accent);}
.ts-body:has(.ts-img[style*="display: none"]){grid-template-columns:1fr;}
@media (max-width:640px){
  .ts-dots::-webkit-scrollbar{display:none;}
}
.tool-card .tool-header-version{
  font-family:"Inter",sans-serif;
  font-size:11px;font-weight:500;letter-spacing:.03em;
  color:rgba(0,0,0,.45);
  margin-left:2px;white-space:nowrap;
  display:inline-block;line-height:1;
  align-self:flex-end;
  transform:translateY(-13px);
}
.tool-card .tool-header-version::before{content:"· ";opacity:.6;}
.tool-card .visa-actions .visa-check-btn{
  background:var(--accent); color:#fff; border:1px solid var(--accent); border-radius:12px;
  padding:13px 22px; font-size:15px; font-weight:700; width:auto; margin-top:0;
  box-shadow:0 2px 6px rgba(186,47,42,.22); font-family:inherit;
}
.tool-card .visa-actions .visa-check-btn:hover{
  background:#9e2723; border-color:#9e2723; filter:none;
  transform:translateY(-1px); box-shadow:0 4px 12px rgba(186,47,42,.32);
}
.tool-card .visa-actions .visa-reset-btn{
  background:transparent; color:var(--ink); border:1px solid var(--line); border-radius:12px;
  padding:13px 18px; font-size:14px; font-weight:600; width:auto; margin-top:0;
  box-shadow:none; font-family:inherit;
}
.tool-card .visa-actions .visa-reset-btn:hover{
  color:var(--accent); border-color:var(--accent); background:transparent; filter:none;
  transform:translateY(-1px);
}
.tool-card .visa-result-card .visa-cta{
  background:var(--accent); color:#fff; border:1px solid var(--accent); border-radius:12px;
  padding:12px 22px; font-size:14px; font-weight:700; width:auto; margin:14px 0 0;
  box-shadow:0 2px 6px rgba(186,47,42,.22); font-family:inherit; text-decoration:none;
  display:inline-flex; align-items:center; justify-content:center; gap:7px;
}
.tool-card .visa-result-card .visa-cta:hover{
  background:#9e2723; border-color:#9e2723; filter:none;
  transform:translateY(-1px); box-shadow:0 4px 12px rgba(186,47,42,.32);
}
.lead-capture{
  background:#fff; border:1px solid var(--line); border-radius:16px;
  padding:22px; margin:26px 0; box-shadow:0 1px 2px rgba(0,0,0,.04);
}
.lead-capture h3{ font-family:"Playfair Display",serif; font-size:20px; font-weight:700; margin:0 0 6px; color:var(--ink); }
.lead-capture h3 .tr-en, .lead-capture h3 .tr-zh{ display:block; }
body:not(.lang-zh) .lead-capture h3 .tr-zh, body.lang-zh .lead-capture h3 .tr-en{ display:none; }
.lead-capture p{ color:var(--muted); font-size:14px; margin:0 0 16px; line-height:1.6; }
.lead-form{ display:flex; flex-wrap:wrap; gap:10px; align-items:flex-end; }
.lead-form .tool-field{ flex:1 1 240px; max-width:360px; min-width:0; }
.lead-form input[type=email]{
  width:100%; padding:11px 12px; border:1px solid var(--line);
  border-radius:10px; font-size:15px; background:#fff; color:var(--ink);
  box-sizing:border-box; font:inherit;
}
.lead-form input[type=email]:focus{
  outline:3px solid rgba(186,47,42,.28); outline-offset:1px; border-color:var(--accent);
}
.lead-form button{
  padding:11px 22px; background:var(--accent); color:#fff;
  border:2.5px solid var(--ink); border-radius:12px;
  font-weight:700; font-size:15px; cursor:pointer;
  box-shadow:3px 3px 0 rgba(43,38,34,.18);
  transition:transform .12s, box-shadow .12s;
}
.lead-form button:hover{ transform:translate(-1px,-1px); box-shadow:4px 4px 0 rgba(43,38,34,.20); }
.lead-form button:active{ transform:translate(1px,1px); box-shadow:2px 2px 0 rgba(43,38,34,.18); }
.lead-form button .tr-en, .lead-form button .tr-zh{ display:inline; }
body:not(.lang-zh) .lead-form button .tr-zh, body.lang-zh .lead-form button .tr-en{ display:none; }
.lead-msg{ width:100%; margin:10px 0 0; font-size:13px; color:var(--accent); min-height:18px; }
html[data-theme="dark"] .lead-capture{
  background:var(--surface-2); box-shadow:4px 5px 0 rgba(0,0,0,.40);
}
html[data-theme="dark"] .lead-capture h3{ color:var(--ink); }
html[data-theme="dark"] .lead-form input[type=email]{ background:var(--surface-2); color:var(--ink); }
@media(max-width:560px){
  .lead-capture{ padding:18px 16px; }
  .lead-capture h3{ font-size:17px; }
  .lead-form{ flex-direction:column; align-items:stretch; gap:12px; }
  .lead-form .tool-field{ flex:0 0 auto; max-width:100%; }
  .lead-form button{ width:100%; box-sizing:border-box; }
}
.fw-overview{margin-top:18px;padding:20px;background:var(--surface-2,#f6f2ee);border:1px solid var(--line,#e5e1da);border-radius:16px;}
.fw-intro{margin:0 0 14px;font-size:14px;line-height:1.55;color:var(--muted);}
.fw-legend{display:flex;flex-wrap:wrap;gap:14px;margin-bottom:14px;font-size:13px;color:var(--ink);}
.fw-legend-item{display:inline-flex;align-items:center;gap:6px;}
.fw-dot{display:inline-block;width:11px;height:11px;border-radius:50%;flex:0 0 auto;}
.fw-dot.policy-VISABLOCKED{background:#c0392b;}
.fw-dot.policy-INTERMITTENT{background:#d99425;}
.fw-dot.policy-Works{background:#2e8b57;}
.fw-chips{display:flex;flex-wrap:wrap;gap:8px;margin-bottom:16px;}
.fw-chip{font:inherit;font-size:13px;padding:6px 13px;border:1px solid var(--line,#e5e1da);background:var(--paper,#fff);border-radius:999px;cursor:pointer;color:var(--ink);transition:border-color .15s,background .15s,color .15s;}
.fw-chip:hover{border-color:var(--accent,#ba2f2a);}
.fw-chip.is-active{background:var(--accent,#ba2f2a);border-color:var(--accent,#ba2f2a);color:#fff;font-weight:600;}
.fw-group{margin-bottom:14px;}
.fw-group-title{font-size:13px;font-weight:700;letter-spacing:.04em;text-transform:uppercase;color:var(--muted);margin:0 0 8px;}
.fw-list{list-style:none;margin:0;padding:0;display:flex;flex-direction:column;gap:6px;}
.fw-row{display:grid;grid-template-columns:auto 1fr auto;grid-template-areas:"dot name badge" "dot prep prep";gap:2px 10px;align-items:center;padding:10px 12px;background:var(--paper,#fff);border:1px solid var(--line,#e5e1da);border-radius:12px;}
.fw-dot{grid-area:dot;}
.fw-name{grid-area:name;font-weight:600;font-size:14.5px;color:var(--ink);}
.fw-badge{grid-area:badge;font-size:11px;font-weight:700;letter-spacing:.03em;padding:3px 9px;border-radius:999px;white-space:nowrap;}
.fw-prep{grid-area:prep;font-size:12.5px;line-height:1.45;color:var(--muted);}
.fw-actions{margin-top:16px;display:flex;flex-wrap:wrap;align-items:center;gap:12px;}
.fw-copy-btn{font:inherit;font-size:14px;font-weight:600;padding:10px 18px;border-radius:12px;background:var(--accent,#ba2f2a);border:1px solid var(--accent,#ba2f2a);color:#fff;cursor:pointer;transition:opacity .15s,transform .15s;}
.fw-copy-btn:hover{opacity:.92;transform:translateY(-1px);}
.fw-copy-msg{font-size:13px;color:#2e8b57;min-height:18px;}
@media(max-width:520px){
  .fw-row{grid-template-columns:auto 1fr;grid-template-areas:"dot name" "dot badge" "prep prep";}
  .fw-badge{justify-self:start;}
}
html[data-theme="dark"] .fw-overview{background:var(--surface-2);border-color:var(--line);}
html[data-theme="dark"] .fw-chip{background:var(--surface-2);color:var(--ink);border-color:var(--line);}
html[data-theme="dark"] .fw-row{background:var(--surface-2);border-color:var(--line);}
html[data-theme="dark"] .fw-copy-msg{color:#7ec89a;}
.fw-quick{margin:0 0 18px;padding:14px 16px;background:var(--surface-2,#f6f2ee);border:1px solid var(--line,#e5e1da);border-radius:12px;}
.fwq-title{margin:0 0 10px;font-size:13px;font-weight:700;letter-spacing:.02em;color:var(--ink);}
.fwq-grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:7px 14px;}
.fwq-item{display:flex;align-items:center;gap:8px;min-width:0;}
.fwq-dot{display:inline-block;width:9px;height:9px;border-radius:50%;flex:0 0 auto;}
.fwq-dot.policy-VISABLOCKED{background:#c0392b;}
.fwq-dot.policy-INTERMITTENT{background:#d99425;}
.fwq-dot.policy-Works{background:#2e8b57;}
.fwq-name{font-size:13px;line-height:1.3;color:var(--ink);overflow:hidden;text-overflow:ellipsis;white-space:nowrap;}
.fwq-hint{margin:11px 0 0;font-size:12px;line-height:1.45;color:var(--muted);}
.fwq-hint a{color:var(--accent,#ba2f2a);text-decoration:none;font-weight:600;}
.fwq-hint a:hover{text-decoration:underline;}
@media(max-width:420px){
  .fwq-grid{grid-template-columns:1fr;}
}
html[data-theme="dark"] .fw-quick{background:var(--surface-2);border-color:var(--line);}
html[data-theme="dark"] .fwq-name{color:var(--ink);}

/* --- tool loading beat (P6 standard, what-to-wear blue bar) --- */
.tool-loading{display:flex;flex-direction:column;align-items:center;gap:14px;padding:44px 18px;text-align:center}
.tool-loading-text{font-size:14px;font-weight:600;color:var(--ink-2);margin:0}
.tool-progress{width:100%;max-width:320px;height:8px;border-radius:99px;background:color-mix(in srgb,var(--t-travel,#2b6cb0) 18%,var(--field-bg));overflow:hidden}
.tool-progress-bar{height:100%;width:0;border-radius:99px;background:var(--t-travel,#2b6cb0);animation:tool-progress-fill var(--tool-load-dur,1600ms) ease forwards}
@keyframes tool-progress-fill{from{width:0}to{width:100%}}
@media(prefers-reduced-motion:reduce){.tool-progress-bar{animation-duration:.8s}}

/* --- stylesync end --- */

/* Article images are clickable to enlarge */
.upl-figure img{cursor:zoom-in;}

/* ============================================================
   暗色模式易读性修复（2026-08-29）
   白底容器 + 浅色 --ink 文字 = 不可见；半透明黑字、亮底白勾、
   浅底浅字标签、中亮底白字按钮等同类问题一并修正。
   修法：html[data-theme="dark"] 前缀覆盖，不动原规则。
   注意：与 assets/styles.css、arrival-kit/assets/styles.css 同步维护。
   ============================================================ */
html[data-theme="dark"] .upl-step-split,
html[data-theme="dark"] .upl-compare tbody th,
html[data-theme="dark"] .upl-compare td,
html[data-theme="dark"] .upl-stat,
html[data-theme="dark"] .cte-cmp-def,
html[data-theme="dark"] .lead-capture { background: var(--surface-2); }

html[data-theme="dark"] .tool-card .tool-header-version,
html[data-theme="dark"] .tool-header-version { color: var(--muted); }

html[data-theme="dark"] .trust-tag .trust-check {
  background: rgba(16,185,129,.20);
  color: #4ade80;
}

html[data-theme="dark"] .policy-VISAFREE,
html[data-theme="dark"] .policy-Works { background: rgba(29,107,46,.24); color: #86e39a; }
html[data-theme="dark"] .policy-TRANSIT240,
html[data-theme="dark"] .policy-INTERMITTENT { background: rgba(154,100,0,.26); color: #f0c574; }
html[data-theme="dark"] .policy-VISAREQUIRED,
html[data-theme="dark"] .policy-VISABLOCKED { background: rgba(200,60,48,.26); color: #f5a094; }

html[data-theme="dark"] .cte-pager-dir { color: var(--muted); }

html[data-theme="dark"] .tool-card .btn:not(.btn-secondary):not(.btn-outline) {
  background: var(--tint, #9a9086);
  color: #211f1a;
}
html[data-theme="dark"] .tool-card .tool-swap { background: var(--surface-2); }

html[data-theme="dark"] .upl-section-num,
html[data-theme="dark"] .upl-stat-num,
html[data-theme="dark"] .upl-related-arrow,
html[data-theme="dark"] .article-body p a,
html[data-theme="dark"] .article-body li a,
html[data-theme="dark"] .guide-page main p a,
html[data-theme="dark"] .guide-page main li a,
html[data-theme="dark"] .source-note a,
html[data-theme="dark"] .fw-hint a { color: #ea7a70; }

html[data-theme="dark"] .tool-header-status { color: var(--muted); }