:root{
  --bg:#0b0f14; --panel:#141a21; --line:#252d38;
  --fg:#e8eef5; --dim:#8b98a8; --accent:#22c55e; --hot:#ef4444; --warn:#fbbf24; --blue:#3b82f6;
}
*{box-sizing:border-box;-webkit-tap-highlight-color:transparent}
html,body{margin:0;height:100%;background:var(--bg);color:var(--fg);overflow:hidden;user-select:none;
  font-family:-apple-system,"PingFang SC","Microsoft YaHei",system-ui,sans-serif}
#app{display:flex;flex-direction:column;height:100%}

/* 顶栏 */
#topbar{height:48px;flex:0 0 48px;display:flex;align-items:center;justify-content:space-between;
  padding:0 18px;background:var(--panel);border-bottom:1px solid var(--line)}
.tb-left,.tb-right{display:flex;gap:10px;align-items:center}
#clock{font-size:20px;font-weight:700;font-variant-numeric:tabular-nums}
.chip{background:#0a1017;border:1px solid var(--line);border-radius:999px;padding:3px 11px;
  color:var(--dim);font-size:13px}
.chip.ghost{background:transparent}
#latency{color:var(--accent)}
#latency.warn{color:var(--warn)}

/* 舞台 */
#stage{position:relative;flex:1 1 auto;overflow:hidden;background:#070b10}
#map{position:absolute;inset:0}
#mapFallback{position:absolute;inset:0;width:100%;height:100%;display:none}
#stage.no-amap #map{display:none}
#stage.no-amap #mapFallback{display:block}

/* 导航卡 */
.nav-card{position:absolute;left:18px;top:16px;width:330px;padding:14px 16px 12px;
  background:rgba(11,15,20,.93);border:1px solid var(--line);border-radius:18px;
  backdrop-filter:blur(12px);box-shadow:0 8px 32px rgba(0,0,0,.5)}
.nav-card.hidden{display:none}
.nav-turn-row{display:flex;gap:14px;align-items:center}
.nav-turn{width:56px;height:56px;flex:0 0 56px;border-radius:14px;background:#11301c;
  color:var(--accent);font-size:30px;display:flex;align-items:center;justify-content:center}
.nav-metrics{min-width:0;flex:1}
.nav-dist{font-size:32px;font-weight:800;line-height:1.05;font-variant-numeric:tabular-nums}
.nav-step{margin-top:4px;font-size:15px;color:var(--dim);white-space:nowrap;overflow:hidden;
  text-overflow:ellipsis}
.nav-foot{display:flex;align-items:center;gap:8px;margin-top:10px;padding-top:10px;
  border-top:1px solid var(--line);font-size:14px;color:var(--dim)}
.nav-dur{margin-left:auto;color:var(--accent)}
.dot{width:8px;height:8px;border-radius:50%;background:var(--accent);flex:0 0 8px}
.btn-stop{margin-top:10px;width:100%;height:44px;border-radius:12px;font-size:16px;
  border:1px solid #7f1d1d;background:#3a1111;color:#fca5a5}

/* 字幕 / 提示 */
.subtitle{position:absolute;left:50%;bottom:26px;transform:translateX(-50%);max-width:78%;
  background:rgba(11,15,20,.94);border:1px solid var(--line);border-radius:14px;
  padding:12px 22px;font-size:21px;text-align:center;opacity:0;transition:opacity .2s;pointer-events:none}
.subtitle.on{opacity:1}
.toast{position:absolute;left:50%;top:16px;transform:translateX(-50%) translateY(-16px);
  background:rgba(11,15,20,.96);border:1px solid var(--line);border-radius:12px;
  padding:9px 18px;font-size:16px;opacity:0;transition:all .2s;pointer-events:none;max-width:70%}
.toast.on{opacity:1;transform:translateX(-50%) translateY(0)}
.mic-hint{position:absolute;left:50%;top:50%;transform:translate(-50%,-50%);max-width:580px;
  background:rgba(11,15,20,.98);border:1px solid var(--warn);border-radius:16px;
  padding:20px 24px;font-size:16px;line-height:1.7;z-index:5}
.mic-hint.hidden{display:none}
.mic-hint b{color:var(--warn)}

/* 底栏 */
#dock{height:88px;flex:0 0 88px;display:flex;align-items:center;gap:12px;padding:0 18px;
  background:var(--panel);border-top:1px solid var(--line)}
.mt-pill{display:flex;align-items:center;gap:10px;height:58px;padding:0 20px;border-radius:29px;
  border:1px solid var(--line);background:#0a1017;color:var(--fg);font-size:19px;font-weight:700;
  flex:0 0 auto}
.mt-dot{width:12px;height:12px;border-radius:50%;background:var(--dim);transition:background .15s}
.mt-pill.listening .mt-dot{background:var(--blue);animation:pulse .9s infinite}
.mt-pill.thinking .mt-dot{background:var(--warn);animation:pulse .45s infinite}
.mt-pill.speaking .mt-dot{background:var(--accent)}
@keyframes pulse{0%,100%{transform:scale(1);opacity:1}50%{transform:scale(1.6);opacity:.45}}

.mt-box{display:none;gap:8px;flex:1 1 auto;align-items:center}
.mt-box.on{display:flex}
#mtInput{flex:1;height:54px;border-radius:14px;border:1px solid var(--line);background:#0a1017;
  color:var(--fg);font-size:18px;padding:0 16px;outline:none}
#mtInput:focus{border-color:var(--blue)}

.quick{display:flex;gap:8px;margin-left:auto}
.qbtn{height:54px;min-width:54px;padding:0 14px;border-radius:14px;border:1px solid var(--line);
  background:#0a1017;color:var(--dim);font-size:15px}
.qbtn:active{background:#1b2430;color:var(--fg)}
.ctrl.sm{width:54px;height:54px;border-radius:14px;border:1px solid var(--line);
  background:#1b2430;color:var(--fg);font-size:18px}

/* 路线选项 */
.route-opts{position:absolute;left:50%;bottom:22px;transform:translateX(-50%);width:min(760px,88%);
  background:rgba(11,15,20,.96);border:1px solid var(--line);border-radius:18px;padding:14px 16px;
  backdrop-filter:blur(14px);box-shadow:0 12px 40px rgba(0,0,0,.6)}
.route-opts.hidden{display:none}
/* 选路时把字幕抬起来，别压住卡片 */
.route-opts:not(.hidden) ~ .subtitle{bottom:230px}
.ro-title{font-size:15px;color:var(--dim);margin-bottom:10px}
.ro-list{display:flex;gap:10px}
.ro-card{flex:1;min-width:0;padding:12px 14px;border-radius:14px;border:1px solid var(--line);
  background:#0d141c;text-align:left;color:var(--fg)}
.ro-card:active{background:#16202b;border-color:var(--blue)}
.ro-card .ro-tag{font-size:13px;color:var(--accent);margin-bottom:6px}
.ro-card .ro-main{font-size:24px;font-weight:800;font-variant-numeric:tabular-nums}
.ro-card .ro-sub{font-size:14px;color:var(--dim);margin-top:4px}
.ro-card .ro-toll{margin-top:6px;font-size:14px;color:var(--warn)}
.ro-card .ro-toll.free{color:var(--accent)}