/* 环球国旅 · 语音录行程 MVP */
:root{
  --bg:#0b1220; --card:#111b2e; --card2:#16233a; --line:#22334f;
  --txt:#e8eefc; --sub:#8fa3c4; --pri:#2f81f7; --pri2:#1a63d8;
  --ok:#22c55e; --warn:#f59e0b; --danger:#ef4444; --acc:#7c5cff;
  --r:16px;
}
*{box-sizing:border-box;-webkit-tap-highlight-color:transparent}
html,body{margin:0;padding:0;background:#060a12;color:var(--txt);
  font-family:-apple-system,BlinkMacSystemFont,"PingFang SC","Microsoft YaHei",system-ui,sans-serif}
body{min-height:100vh;display:flex;align-items:center;justify-content:center;padding:0}
.phone{width:100%;max-width:430px;min-height:100vh;background:linear-gradient(180deg,#0d1626 0%,#0b1220 45%,#080e18 100%);
  position:relative;display:flex;flex-direction:column;overflow:hidden}
@media(min-width:520px){
  body{padding:24px 0}
  .phone{min-height:860px;max-height:900px;border-radius:32px;
    box-shadow:0 24px 80px rgba(0,0,0,.6),0 0 0 1px #1b2740;border:8px solid #05080f}
}
/* ---------- 顶栏 ---------- */
.hdr{display:flex;align-items:center;justify-content:space-between;
  padding:calc(14px + env(safe-area-inset-top)) 18px 12px;border-bottom:1px solid rgba(255,255,255,.05)}
.brand{display:flex;gap:10px;align-items:center}
.logo{width:34px;height:34px;border-radius:10px;display:grid;place-items:center;font-weight:700;
  background:linear-gradient(135deg,#2f81f7,#7c5cff);color:#fff;font-size:16px}
.b1{font-size:14px;font-weight:700;letter-spacing:.5px}
.b2{font-size:11px;color:var(--sub);margin-top:1px}
.hbtn{background:transparent;border:1px solid var(--line);color:var(--sub);
  font-size:12px;padding:6px 12px;border-radius:20px}
.hbtn:active{background:#16233a}
/* ---------- 步骤条 ---------- */
.steps{display:flex;gap:6px;padding:12px 18px 4px}
.step{flex:1;display:flex;align-items:center;gap:6px;font-size:11px;color:#5a6b88;
  padding:6px 8px;border-radius:10px;background:rgba(255,255,255,.02);transition:.25s}
.step i{width:16px;height:16px;border-radius:50%;display:grid;place-items:center;font-style:normal;
  font-size:10px;background:#22334f;color:#8fa3c4}
.step.on{color:#cfe0ff;background:rgba(47,129,247,.14)}
.step.on i{background:var(--pri);color:#fff}
.step.done i{background:var(--ok);color:#04210f}
/* ---------- 面板 ---------- */
.scr{flex:1;overflow-y:auto;padding:0 0 20px;-webkit-overflow-scrolling:touch}
.pane{padding:8px 18px 18px;animation:fade .28s ease both}
@keyframes fade{from{opacity:0;transform:translateY(8px)}to{opacity:1;transform:none}}
.hide{display:none!important}
/* ---------- Step1 ---------- */
.hero h1{font-size:22px;margin:10px 0 6px;line-height:1.3}
.hero p{font-size:12.5px;color:var(--sub);margin:0 0 14px;line-height:1.6}
.transcript{min-height:96px;background:var(--card);border:1px solid var(--line);border-radius:var(--r);
  padding:14px;font-size:15px;line-height:1.65;color:#dbe7ff;position:relative}
.transcript .ph{color:#5a6b88;font-style:normal}
.caret{display:inline-block;width:2px;height:16px;background:var(--pri);vertical-align:-3px;
  margin-left:2px;animation:bl 1s steps(2) infinite;opacity:0}
.caret.on{opacity:1}
@keyframes bl{50%{opacity:0}}
.micwrap{position:relative;display:grid;place-items:center;margin:26px 0 10px;height:150px}
.ring{position:absolute;width:96px;height:96px;border-radius:50%;
  background:radial-gradient(circle,rgba(47,129,247,.55),rgba(47,129,247,0) 70%);
  opacity:0;transition:.25s}
.mic{position:relative;width:96px;height:96px;border-radius:50%;border:none;color:#fff;
  background:linear-gradient(160deg,#3b8dff,#1a56c9);display:grid;place-items:center;
  box-shadow:0 12px 34px rgba(47,129,247,.45),inset 0 1px 0 rgba(255,255,255,.25);
  transition:transform .12s ease,box-shadow .2s}
.mic:active,.mic.rec{transform:scale(.94)}
.mic.rec{background:linear-gradient(160deg,#ff6b6b,#d92d2d);box-shadow:0 12px 34px rgba(239,68,68,.5)}
.mic.rec .ring,.rec-on .ring{opacity:1;animation:pulse 1.4s ease-out infinite}
@keyframes pulse{0%{transform:scale(.9);opacity:.85}100%{transform:scale(1.9);opacity:0}}
.hint{text-align:center;font-size:12px;color:var(--sub);min-height:18px;margin-bottom:14px}
.typerow{display:flex;gap:8px;margin-top:4px}
.typerow input{flex:1;background:var(--card);border:1px solid var(--line);border-radius:12px;
  padding:12px 14px;color:var(--txt);font-size:14px;outline:none}
.typerow input:focus{border-color:var(--pri)}
.typerow .go{background:var(--pri);border:none;color:#fff;border-radius:12px;padding:0 18px;font-size:14px;font-weight:600}
.samples{display:flex;flex-wrap:wrap;gap:8px;margin-top:16px}
.samples button{background:rgba(124,92,255,.1);border:1px solid rgba(124,92,255,.3);color:#b9a8ff;
  font-size:11.5px;padding:7px 11px;border-radius:999px;line-height:1.3;text-align:left}
.samples button:active{background:rgba(124,92,255,.22)}
/* ---------- Step2 ---------- */
.alert{display:none;gap:8px;flex-direction:column;background:rgba(245,158,11,.12);
  border:1px solid rgba(245,158,11,.35);color:#ffd08a;border-radius:12px;padding:10px 12px;
  font-size:12.5px;margin-bottom:12px;line-height:1.5}
.alert.show{display:flex}
.card{background:var(--card);border:1px solid var(--line);border-radius:var(--r);padding:6px 14px}
.crow{display:flex;align-items:center;justify-content:space-between;gap:12px;
  padding:13px 0;border-bottom:1px solid rgba(255,255,255,.05);min-height:52px}
.crow:last-child{border-bottom:none}
.crow.col{flex-direction:column;align-items:flex-start;gap:9px}
/* ---------- 录入框（纯文字输入） ---------- */
.entry{background:var(--card);border:1px solid var(--line);border-radius:var(--r);padding:14px}
.entry:focus-within{border-color:var(--pri)}
.entry-label{display:block;font-size:11.5px;color:#6b81a3;letter-spacing:.5px;margin-bottom:8px}
.entry textarea{width:100%;background:transparent;border:none;outline:none;color:#dbe7ff;
  font-size:15px;line-height:1.7;resize:vertical;min-height:84px;
  font-family:inherit}
.entry textarea::placeholder{color:#4d5f7c}
.entry-bar{display:flex;align-items:center;justify-content:space-between;gap:10px;
  margin-top:10px;padding-top:10px;border-top:1px solid rgba(255,255,255,.05)}
.entry-count{font-size:11.5px;color:#5a6b88;font-variant-numeric:tabular-nums}
.entry-bar .go{background:linear-gradient(135deg,#3b8dff,#1a56c9);border:none;color:#fff;
  border-radius:12px;padding:11px 20px;font-size:14px;font-weight:600;
  box-shadow:0 6px 18px rgba(47,129,247,.32)}
.entry-bar .go:active{transform:scale(.97)}
.voicenote{display:flex;flex-direction:column;gap:4px;margin-top:18px;
  background:rgba(255,255,255,.02);border:1px dashed #22334f;border-radius:12px;
  padding:11px 13px;font-size:12px;line-height:1.55;color:#6b81a3}
.voicenote b{color:#8fa3c4;font-size:12.5px}

/* ---------- 环境提示 ---------- */
.envwarn{display:none;flex-direction:column;gap:5px;background:rgba(239,68,68,.1);
  border:1px solid rgba(239,68,68,.35);color:#ffb4b4;border-radius:12px;padding:11px 13px;
  font-size:12.5px;line-height:1.55;margin:0 0 12px}
.envwarn.show{display:flex}
.envwarn b{color:#ffd0d0;font-size:13px}
.envwarn-tip{color:#8fa3c4;font-size:11.5px}

/* ---------- 自定义目的地选择器（绕开原生 select 样式不可控） ---------- */
.dsel{position:relative;flex:1;max-width:230px}
.dsel-btn{width:100%;display:flex;align-items:center;justify-content:space-between;gap:8px;
  background:var(--card2);border:1px solid var(--line);color:var(--txt);border-radius:10px;
  padding:9px 12px;font-size:13.5px;text-align:left;cursor:pointer}
.dsel-btn:active{background:#1d2c47}
.dsel-btn.empty{color:#5a6b88}
.dsel-btn .arrow{flex:0 0 auto;width:0;height:0;border-left:4px solid transparent;
  border-right:4px solid transparent;border-top:5px solid #8fa3c4;transition:.2s}
.dsel.open .dsel-btn{border-color:var(--pri)}
.dsel.open .dsel-btn .arrow{transform:rotate(180deg)}
.dsel-panel{position:absolute;left:0;right:0;top:calc(100% + 6px);z-index:50;
  background:#14203a;border:1px solid var(--line);border-radius:12px;
  max-height:320px;overflow-y:auto;display:none;
  box-shadow:0 16px 40px rgba(0,0,0,.6)}
.dsel.open .dsel-panel{display:block}
.dsel-grp{font-size:11px;color:#5f7395;padding:9px 12px 5px;letter-spacing:.5px}
.dsel-opt{display:block;width:100%;text-align:left;background:transparent;border:none;
  color:#dbe7ff;font-size:13.5px;padding:10px 14px}
.dsel-opt:active{background:rgba(47,129,247,.2)}
.dsel-opt.on{color:#7fb2ff;background:rgba(47,129,247,.14);font-weight:600}
.dsel-mask{position:fixed;inset:0;z-index:40;background:transparent;display:none}
.dsel.open .dsel-mask{display:block}

/* 兜底：即使走了原生 select，也强制可读颜色（iOS/微信/安卓） */
select{color-scheme:dark}
select option,select optgroup{background:#14203a;color:#e8eefc}

.crow label{font-size:13px;color:#a9bcd9;white-space:nowrap}
.crow label small{color:#5a6b88;font-size:10.5px}
.crow.miss label{color:var(--warn)}
select{background:var(--card2);border:1px solid var(--line);color:var(--txt);border-radius:10px;
  padding:8px 10px;font-size:13.5px;max-width:200px;outline:none}
.seg{display:flex;gap:6px}
.seg button{width:34px;height:32px;border-radius:9px;border:1px solid var(--line);
  background:var(--card2);color:#9fb2cf;font-size:13px}
.seg button.on{background:var(--pri);border-color:var(--pri);color:#fff;font-weight:700}
.chips{display:flex;flex-wrap:wrap;gap:7px;justify-content:flex-end}
.crow.col .chips{justify-content:flex-start}
.chips button{border:1px solid var(--line);background:var(--card2);color:#9fb2cf;
  font-size:12.5px;padding:7px 12px;border-radius:999px;transition:.15s}
.chips button.on{background:rgba(47,129,247,.18);border-color:var(--pri);color:#a9c9ff}
.chips button.miss{border-color:var(--warn);color:#ffd08a;animation:wob .5s ease 2}
@keyframes wob{25%{transform:translateX(-3px)}75%{transform:translateX(3px)}}
.primary{width:100%;margin-top:18px;padding:15px;border:none;border-radius:14px;font-size:15.5px;
  font-weight:700;color:#fff;background:linear-gradient(135deg,#3b8dff,#1a56c9);
  box-shadow:0 10px 26px rgba(47,129,247,.35)}
.primary:active{transform:scale(.985)}
.primary:disabled{opacity:.5;box-shadow:none}
.ghost{width:100%;margin-top:10px;padding:12px;border:1px solid var(--line);background:transparent;
  color:var(--sub);border-radius:12px;font-size:13.5px}
/* ---------- Step3 ---------- */
.skl{background:var(--card);border:1px solid var(--line);border-radius:var(--r);padding:16px;margin-bottom:14px}
.sklrow{display:flex;align-items:center;gap:10px;font-size:13px;color:#7d90ae;padding:7px 0}
.dot{width:8px;height:8px;border-radius:50%;background:#22334f}
.dot.on{background:var(--ok);box-shadow:0 0 10px rgba(34,197,94,.7)}
.dot.cur{background:var(--pri);animation:bl .8s steps(2) infinite}
.rcard{background:var(--card);border:1px solid var(--line);border-radius:var(--r);padding:16px;margin-bottom:12px}
.rtitle{font-size:18px;font-weight:700;margin:0 0 4px}
.rsub{font-size:11.5px;color:var(--sub);margin-bottom:14px}
.dayblk{margin-bottom:16px;padding-left:14px;border-left:2px solid rgba(47,129,247,.35);position:relative}
.dayblk:last-child{margin-bottom:0}
.dayblk::before{content:"";position:absolute;left:-5px;top:4px;width:8px;height:8px;border-radius:50%;
  background:var(--pri);box-shadow:0 0 0 3px rgba(47,129,247,.2)}
.dtitle{font-size:13.5px;font-weight:700;color:#cfe0ff;margin-bottom:8px}
.item{background:var(--card2);border-radius:10px;padding:10px 12px;margin-bottom:7px}
.iname{font-size:13.5px;font-weight:600}
.imeta{font-size:11px;color:var(--sub);margin-top:3px}
.badge{display:inline-block;font-size:10px;padding:2px 7px;border-radius:6px;margin-left:6px;
  background:rgba(47,129,247,.18);color:#a9c9ff;vertical-align:1px}
.badge.warn{background:rgba(245,158,11,.16);color:#ffd08a}
.price{display:flex;align-items:baseline;justify-content:space-between;margin:6px 0 10px}
.price b{font-size:26px;color:#7ee0a0}
.price span{font-size:11.5px;color:var(--sub)}
.plist{display:flex;flex-direction:column;gap:8px}
.pitem{display:flex;justify-content:space-between;align-items:center;background:var(--card2);
  border-radius:10px;padding:11px 13px;font-size:13px}
.pitem em{font-style:normal;color:#7ee0a0;font-weight:700}
.risks{list-style:none;padding:0;margin:0;font-size:12.5px;color:#ffd08a;line-height:1.75}
.risks li::before{content:"⚠ "}
.tbtns{display:flex;gap:8px;margin-top:14px}
.tbtns button{flex:1;padding:12px;border-radius:12px;font-size:13.5px;border:1px solid var(--line);
  background:var(--card2);color:var(--txt)}
.tbtns button.pri{background:var(--pri);border-color:var(--pri);color:#fff;font-weight:700}
/* ---------- 其他 ---------- */
.foot{display:flex;justify-content:space-between;align-items:center;padding:10px 18px
  calc(10px + env(safe-area-inset-bottom));border-top:1px solid rgba(255,255,255,.05);
  font-size:10.5px;color:#45566f}
.tag{font-family:ui-monospace,Menlo,monospace;background:rgba(47,129,247,.12);color:#7fa8e8;
  padding:2px 8px;border-radius:6px}
.toast{position:fixed;left:50%;bottom:96px;transform:translate(-50%,20px);opacity:0;pointer-events:none;
  background:rgba(20,30,48,.96);border:1px solid var(--line);color:#dbe7ff;font-size:13px;
  padding:11px 18px;border-radius:12px;max-width:86%;text-align:center;transition:.25s;z-index:99;
  box-shadow:0 12px 30px rgba(0,0,0,.5)}
.toast.show{opacity:1;transform:translate(-50%,0)}
.spin{width:14px;height:14px;border:2px solid rgba(255,255,255,.3);border-top-color:#fff;
  border-radius:50%;animation:sp .8s linear infinite;display:inline-block;vertical-align:-2px;margin-right:6px}
@keyframes sp{to{transform:rotate(360deg)}}