/* ==========================================================================
   懂你旅行管家 · 旅行 SOS
   视觉：清透旅行感。底色浅灰蓝，主色青绿，辅色暖沙。
   ========================================================================== */

:root {
  --bg: #F7F9FB;
  --card: #FFFFFF;
  --ink: #17303A;
  --ink-2: #5A7280;
  --ink-3: #93A6B1;
  --brand: #1E6F6B;
  --brand-2: #2A8F89;
  --brand-soft: #E6F2F1;
  --sand: #E8A33D;
  --sand-soft: #FDF3E3;
  --danger: #D9534F;
  --danger-soft: #FCEEEE;
  --ok: #3E9C6B;
  --ok-soft: #EAF6EF;
  --line: #E4EBEF;
  --radius: 16px;
  --radius-sm: 10px;
  --shadow: 0 1px 2px rgba(23, 48, 58, .04), 0 8px 24px rgba(23, 48, 58, .06);
  --shadow-lg: 0 12px 40px rgba(23, 48, 58, .14);
  --font: -apple-system, BlinkMacSystemFont, "Segoe UI", "PingFang SC",
          "Hiragino Sans GB", "Microsoft YaHei", "Noto Sans SC", sans-serif;
}

* { box-sizing: border-box; }

html, body {
  margin: 0; padding: 0;
  background: var(--bg);
  color: var(--ink);
  font-family: var(--font);
  font-size: 15px;
  line-height: 1.65;
  -webkit-font-smoothing: antialiased;
}

body::before {
  content: "";
  position: fixed; inset: 0 0 auto 0; height: 340px;
  background: linear-gradient(180deg, #E8F3F2 0%, rgba(247,249,251,0) 100%);
  z-index: 0; pointer-events: none;
}

.app { position: relative; z-index: 1; max-width: 760px; margin: 0 auto; padding: 0 18px 60px; overflow-x: hidden; }

/* ---------- 顶栏 ---------- */
.topbar {
  display: flex; align-items: center; justify-content: space-between;
  padding: 18px 0 10px;
}
.brand { display: flex; align-items: center; gap: 10px; }
.brand-mark {
  width: 34px; height: 34px; border-radius: 11px;
  background: linear-gradient(140deg, var(--brand), var(--brand-2));
  color: #fff; font-weight: 700; font-size: 17px;
  display: grid; place-items: center;
  box-shadow: 0 4px 12px rgba(30, 111, 107, .28);
}
.brand-txt { display: flex; flex-direction: column; line-height: 1.25; }
.brand-txt strong { font-size: 15px; letter-spacing: .2px; }
.brand-txt span { font-size: 11.5px; color: var(--ink-3); letter-spacing: .6px; }
.topbar-right { display: flex; align-items: center; gap: 8px; }
.pill {
  font-size: 11.5px; padding: 4px 10px; border-radius: 999px;
  background: var(--brand-soft); color: var(--brand); font-weight: 600;
}
.icon-btn {
  width: 32px; height: 32px; border-radius: 10px; border: 1px solid var(--line);
  background: var(--card); color: var(--ink-2); cursor: pointer; font-size: 15px;
  transition: .18s;
}
.icon-btn:hover { border-color: var(--brand); color: var(--brand); }

/* ---------- 阶段 ---------- */
.stage { display: none; animation: fadeUp .34s ease both; }
.stage.is-active { display: block; }
@keyframes fadeUp { from { opacity: 0; transform: translateY(10px); } to { opacity: 1; transform: none; } }

/* ---------- 首页 ---------- */
.hero { padding: 34px 0 0; }
.hero h1 {
  font-size: 33px; line-height: 1.28; margin: 0 0 14px;
  letter-spacing: -.5px; font-weight: 800;
}
.hero-sub { color: var(--ink-2); margin: 0 0 26px; font-size: 15.5px; }
.hero-sub b { color: var(--brand); font-weight: 700; }

.composer {
  background: var(--card); border: 1px solid var(--line); border-radius: var(--radius);
  padding: 14px; box-shadow: var(--shadow); transition: .2s;
}
.composer:focus-within { border-color: var(--brand-2); box-shadow: 0 0 0 4px rgba(42,143,137,.10), var(--shadow); }
.composer textarea {
  width: 100%; border: 0; outline: 0; resize: none; font-family: var(--font);
  font-size: 15px; line-height: 1.7; color: var(--ink); background: transparent;
}
.composer textarea::placeholder { color: var(--ink-3); }
.composer-foot {
  display: flex; align-items: flex-end; justify-content: space-between;
  gap: 12px; margin-top: 8px; padding-top: 10px; border-top: 1px dashed var(--line);
}
.hint { font-size: 12px; color: var(--ink-3); flex: 1; }
.composer.compact { margin-top: 12px; }

.btn-primary {
  border: 0; cursor: pointer; font-family: var(--font);
  background: linear-gradient(140deg, var(--brand), var(--brand-2));
  color: #fff; font-weight: 650; font-size: 14.5px;
  padding: 11px 20px; border-radius: 12px; white-space: nowrap;
  box-shadow: 0 4px 14px rgba(30, 111, 107, .26);
  transition: .18s;
}
.btn-primary:hover { transform: translateY(-1px); box-shadow: 0 8px 20px rgba(30,111,107,.32); }
.btn-primary:active { transform: none; }
.btn-primary:disabled { opacity: .55; cursor: default; transform: none; }

.btn-ghost {
  margin-top: 14px; background: transparent; border: 0; cursor: pointer;
  font-family: var(--font); font-size: 14.5px; color: var(--brand);
  font-weight: 600; padding: 6px 0;
}
.btn-ghost .arrow { display: inline-block; transition: .2s; }
.btn-ghost:hover .arrow { transform: translateX(4px); }
.btn-ghost.sm { font-size: 13px; margin: 0; padding: 5px 10px; border: 1px solid var(--line); border-radius: 9px; }
.btn-ghost.sm:hover { border-color: var(--brand); }

.mini { font-size: 12.5px; color: var(--ink-3); margin: 8px 0 0; }
.mini.dim { color: var(--ink-3); }

.chip-zone { margin-top: 40px; }
.chip-title { font-size: 12.5px; color: var(--ink-3); margin: 0 0 10px; letter-spacing: .3px; }
.chips { display: flex; flex-wrap: wrap; gap: 9px; }
.chip {
  border: 1px solid var(--line); background: var(--card); color: var(--ink);
  padding: 9px 15px; border-radius: 999px; cursor: pointer;
  font-family: var(--font); font-size: 13.5px; transition: .18s;
  box-shadow: 0 1px 2px rgba(23,48,58,.03);
}
.chip:hover { border-color: var(--brand-2); color: var(--brand); background: var(--brand-soft); transform: translateY(-1px); }

.home-foot { margin-top: 48px; padding-top: 22px; border-top: 1px solid var(--line); }
.creed { font-size: 14.5px; font-weight: 600; color: var(--ink); display: flex; align-items: center; gap: 10px; }
.creed b { color: var(--brand); }
.creed-line { width: 3px; height: 17px; border-radius: 2px; background: var(--sand); display: inline-block; }

/* ---------- 卡片 ---------- */
.card {
  background: var(--card); border: 1px solid var(--line); border-radius: var(--radius);
  padding: 18px; margin-bottom: 14px; box-shadow: var(--shadow);
}
.card-head {
  display: flex; align-items: center; justify-content: space-between;
  gap: 8px 10px; margin-bottom: 12px; flex-wrap: wrap;
}
.card-head h3 { margin: 0; font-size: 15px; font-weight: 700; letter-spacing: .1px; min-width: 0; }

.tag {
  font-size: 11.5px; padding: 3px 10px; border-radius: 999px;
  background: #EDF2F5; color: var(--ink-2); font-weight: 600; white-space: nowrap;
}
.tag-brand { background: var(--brand-soft); color: var(--brand); }
.tag-warn { background: var(--sand-soft); color: #B47814; }
.tag-ok { background: var(--ok-soft); color: var(--ok); }
.tag-danger { background: var(--danger-soft); color: var(--danger); }
.tag-dim { background: #F1F4F6; color: var(--ink-3); }

/* ---------- 行程头 ---------- */
.trip-head { display: flex; align-items: flex-start; justify-content: space-between; gap: 12px; padding: 20px 0 14px; }
.trip-head h2 { margin: 0; font-size: 20px; font-weight: 750; letter-spacing: -.2px; }

/* ---------- 画像卡 ---------- */
.profile-summary {
  margin: 0 0 14px; font-size: 15px; font-weight: 650; color: var(--brand);
  letter-spacing: .2px;
}
.tri { display: flex; flex-direction: column; gap: 9px; }
.tri-row { display: flex; gap: 9px; align-items: flex-start; }
.tri-key {
  flex: 0 0 68px; font-size: 12px; color: var(--ink-3);
  padding-top: 3px; letter-spacing: .2px;
}
.tri-vals { display: flex; flex-wrap: wrap; gap: 6px; flex: 1; }
.tri-tag {
  font-size: 12.5px; padding: 3px 10px; border-radius: 8px;
  background: #F2F6F8; color: var(--ink-2);
}
.tri-tag.confirm { background: var(--brand-soft); color: var(--brand); font-weight: 600; }
.tri-tag.infer { background: var(--sand-soft); color: #A9700F; border: 1px dashed #E9C98C; }
.tri-tag.ask { background: #fff; border: 1px solid var(--line); color: var(--ink-2); }
.ask-box {
  margin-top: 12px; padding: 11px 13px; border-radius: var(--radius-sm);
  background: linear-gradient(135deg, #FDF8EE, #FBF3E4); border: 1px solid #F0DFC0;
  font-size: 13.5px; color: #7A5A16; line-height: 1.6;
}
.ask-box b { font-weight: 700; }

/* ---------- 体检摘要 ---------- */
.report-card { display: flex; gap: 16px; align-items: center; padding: 15px 18px; }
.rg { display: flex; flex-direction: column; align-items: center; min-width: 62px; }
.rg-num { font-size: 22px; font-weight: 800; line-height: 1.1; letter-spacing: -.5px; }
.rg-lbl { font-size: 11px; color: var(--ink-3); margin-top: 3px; }
.rg-sep { width: 1px; align-self: stretch; background: var(--line); }
.report-note { flex: 1; font-size: 13px; color: var(--ink-2); line-height: 1.6; }

/* ---------- 每日行程 ---------- */
.day-list { display: flex; flex-direction: column; gap: 12px; margin-bottom: 14px; }
.day {
  background: var(--card); border: 1px solid var(--line); border-radius: var(--radius);
  box-shadow: var(--shadow); overflow: hidden;
}
.day.is-today { border-color: var(--brand-2); box-shadow: 0 0 0 3px rgba(42,143,137,.10), var(--shadow); }
.day-hd {
  display: flex; align-items: center; gap: 12px; padding: 14px 18px;
  cursor: pointer; user-select: none;
}
.day-badge {
  flex: 0 0 auto; width: 42px; height: 42px; border-radius: 12px;
  background: var(--brand-soft); color: var(--brand);
  display: flex; flex-direction: column; align-items: center; justify-content: center;
  line-height: 1;
}
.day-badge b { font-size: 15px; font-weight: 800; }
.day-badge span { font-size: 9px; margin-top: 2px; letter-spacing: .5px; }
.day-meta { flex: 1; min-width: 0; }
.day-meta h4 { margin: 0 0 3px; font-size: 14.5px; font-weight: 700; }
.day-meta p { margin: 0; font-size: 12px; color: var(--ink-3); }
.day-bars { display: flex; gap: 6px; flex-wrap: wrap; margin-top: 7px; }
.bar-chip {
  font-size: 11.5px; padding: 2px 8px; border-radius: 6px;
  background: #F2F6F8; color: var(--ink-2);
}
.bar-chip.lv-high { background: var(--danger-soft); color: var(--danger); font-weight: 600; }
.bar-chip.lv-medium { background: var(--sand-soft); color: #B47814; font-weight: 600; }
.bar-chip.lv-low { background: var(--ok-soft); color: var(--ok); font-weight: 600; }
.day-toggle { font-size: 12px; color: var(--ink-3); transition: .25s; }
.day.open .day-toggle { transform: rotate(180deg); }
.day-body { display: none; padding: 0 18px 16px; }
.day.open .day-body { display: block; animation: fadeUp .25s ease both; }

.timeline { list-style: none; margin: 0; padding: 0; position: relative; }
.timeline::before {
  content: ""; position: absolute; left: 46px; top: 10px; bottom: 10px;
  width: 1.5px; background: var(--line);
}
.timeline li { display: flex; gap: 12px; padding: 7px 0; position: relative; }
.tl-time {
  flex: 0 0 40px; font-size: 12px; color: var(--ink-3);
  font-variant-numeric: tabular-nums; padding-top: 3px; text-align: right;
}
.tl-dot {
  flex: 0 0 auto; width: 13px; height: 13px; border-radius: 50%;
  background: #fff; border: 2.5px solid var(--line); margin-top: 5px; z-index: 1;
}
.tl-dot.t-sight { border-color: var(--brand-2); }
.tl-dot.t-meal { border-color: var(--sand); }
.tl-dot.t-rest { border-color: var(--ok); }
.tl-dot.t-drive { border-color: var(--ink-3); }
.tl-body { flex: 1; min-width: 0; }
.tl-title { font-size: 14px; font-weight: 600; }
.tl-note { font-size: 12px; color: var(--ink-3); margin-top: 2px; line-height: 1.55; }
.tl-tags { display: flex; gap: 5px; flex-wrap: wrap; margin-top: 4px; }
.tl-tag { font-size: 11px; padding: 1px 7px; border-radius: 5px; background: #F2F6F8; color: var(--ink-3); }
.tl-tag.rain { background: var(--danger-soft); color: var(--danger); }
.tl-tag.indoor { background: var(--brand-soft); color: var(--brand); }

/* ---------- SOS 区 ---------- */
.sos-block { margin-top: 26px; padding-top: 22px; border-top: 1px solid var(--line); }

/* ---------- 结果页 ---------- */
.result-head { padding: 22px 0 16px; }
.result-head h2 {
  font-size: 23px; line-height: 1.4; margin: 12px 0 8px; font-weight: 780;
  letter-spacing: -.3px; overflow-wrap: anywhere;
}

/* 前后对比：逐行对照，移动端也不挤 */
.compare { padding: 8px 18px 10px; }
.cmp-row {
  display: flex; align-items: center; gap: 10px;
  padding: 10px 0; border-bottom: 1px dashed var(--line);
}
.cmp-row:last-child { border-bottom: 0; }
.cmp-k { flex: 0 0 76px; font-size: 13px; color: var(--ink-2); }
.cmp-b {
  flex: 0 0 auto; font-size: 13.5px; color: var(--ink-3);
  font-variant-numeric: tabular-nums;
}
.cmp-b.bad { color: var(--danger); font-weight: 650; }
.cmp-arrow { flex: 0 0 auto; color: var(--ink-3); font-size: 12px; }
.cmp-a {
  flex: 0 0 auto; font-size: 15px; font-weight: 800; color: var(--ink);
  font-variant-numeric: tabular-nums; margin-left: auto;
}
.cmp-a.good { color: var(--ok); }
.cmp-hint {
  font-size: 11.5px; color: var(--ink-3); text-align: right;
  padding-top: 8px; margin-top: 2px; border-top: 1px solid var(--line);
}

.impact-list { list-style: none; margin: 0; padding: 0; }
.impact-list li {
  display: flex; gap: 10px; padding: 10px 0; border-bottom: 1px dashed var(--line);
  font-size: 13.5px; align-items: flex-start;
}
.impact-list li:last-child { border-bottom: 0; }
.impact-list .ic { flex: 0 0 auto; font-size: 15px; line-height: 1.5; }
.impact-list .txt { min-width: 0; }
.impact-list .txt b { font-weight: 700; }
.impact-list .why { color: var(--ink-3); font-size: 12.5px; margin-top: 2px; }

.newday { border-color: #CFE6E4; background: linear-gradient(180deg, #FBFEFE, #FFFFFF); }
.reason-list { list-style: none; margin: 0 0 12px; padding: 0; }
.reason-list li {
  position: relative; padding: 6px 0 6px 18px; font-size: 13.5px; color: var(--ink-2);
  line-height: 1.65;
}
.reason-list li::before {
  content: ""; position: absolute; left: 3px; top: 14px;
  width: 5px; height: 5px; border-radius: 50%; background: var(--sand);
}
.checks { display: flex; flex-wrap: wrap; gap: 7px; padding-top: 12px; border-top: 1px dashed var(--line); }
.check {
  font-size: 12px; padding: 4px 10px; border-radius: 8px;
  background: var(--ok-soft); color: var(--ok); font-weight: 600;
}
.check::before { content: "✓ "; }
.check.fail { background: var(--danger-soft); color: var(--danger); }
.check.fail::before { content: "! "; }

.source-list { list-style: none; margin: 0; padding: 0; }
.source-list li {
  font-size: 12.5px; color: var(--ink-2); padding: 5px 0 5px 14px;
  position: relative; line-height: 1.6;
}
.source-list li::before {
  content: ""; position: absolute; left: 0; top: 12px;
  width: 5px; height: 5px; border-radius: 50%; background: var(--brand-2);
}

.backup-card { background: #FAFCFD; }
.hidden { display: none; }
.dim-tl { opacity: .82; margin-top: 12px; }

.result-actions { display: flex; gap: 10px; margin-top: 20px; }
.result-actions .btn-primary { flex: 1; text-align: center; }
.result-actions .btn-ghost { margin: 0; padding: 11px 18px; border: 1px solid var(--line); border-radius: 12px; }

/* ---------- 思考浮层 ---------- */
.overlay {
  position: fixed; inset: 0; background: rgba(247, 249, 251, .90);
  backdrop-filter: blur(6px); -webkit-backdrop-filter: blur(6px);
  display: none; place-items: center; z-index: 50; padding: 24px;
}
.overlay.show { display: grid; animation: fadeIn .2s ease both; }
@keyframes fadeIn { from { opacity: 0; } to { opacity: 1; } }
.think { width: 100%; max-width: 400px; text-align: center; }
.pulse { display: flex; justify-content: center; gap: 7px; margin-bottom: 20px; }
.pulse span {
  width: 10px; height: 10px; border-radius: 50%; background: var(--brand-2);
  animation: bounce 1.2s infinite ease-in-out;
}
.pulse span:nth-child(2) { animation-delay: .16s; }
.pulse span:nth-child(3) { animation-delay: .32s; }
@keyframes bounce { 0%, 80%, 100% { transform: scale(.6); opacity: .45; } 40% { transform: scale(1); opacity: 1; } }
.think-title { font-size: 16px; font-weight: 700; margin: 0 0 18px; }
.think-list { list-style: none; margin: 0; padding: 0; text-align: left; }
.think-list li {
  font-size: 13.5px; color: var(--ink-2); padding: 7px 0 7px 24px;
  position: relative; animation: fadeUp .3s ease both; line-height: 1.6;
}
.think-list li::before {
  content: "✓"; position: absolute; left: 2px; top: 7px;
  color: var(--ok); font-weight: 700; font-size: 13px;
}
.think-list li.warn::before { content: "!"; color: var(--danger); }
.think-list li.final { color: var(--brand); font-weight: 650; }

/* ---------- Toast ---------- */
.toast {
  position: fixed; left: 50%; bottom: 28px; transform: translate(-50%, 16px);
  background: var(--ink); color: #fff; font-size: 13.5px;
  padding: 10px 18px; border-radius: 11px; opacity: 0; pointer-events: none;
  transition: .28s; z-index: 60; box-shadow: var(--shadow-lg);
}
.toast.show { opacity: 1; transform: translate(-50%, 0); }

/* ---------- 移动端 ---------- */
@media (max-width: 560px) {
  .app { padding: 0 14px 50px; }
  .hero { padding-top: 22px; }
  .hero h1 { font-size: 27px; }
  .hero-sub { font-size: 14.5px; }
  .composer-foot { flex-direction: column; align-items: stretch; }
  .btn-primary { width: 100%; }
  .report-card { flex-wrap: wrap; gap: 12px; }
  .rg-sep { display: none; }
  .report-note { flex: 1 0 100%; }
  .result-head h2 { font-size: 20px; }
  .compare { padding: 6px 14px 8px; }
  .cmp-k { flex-basis: 66px; font-size: 12.5px; }
  .cmp-b { font-size: 13px; }
  .cmp-a { font-size: 14.5px; }
  .result-actions { flex-direction: column; }
}