/* =====================================================================
   位航 LocPilot · 用户端 —— Aurora Glass 视觉系统 V4
   ---------------------------------------------------------------------
   版式：桌面「玻璃控制台 + 全屏地图」 / 移动「地图 + 可拖拽上滑面板 + 悬浮 Tab」
   动效：统一缓动 (--e) + 弹簧回弹 (--e2)，入场错峰、按压回弹、
         涟漪、进度条、呼吸灯、骨架微光；全部走 transform/opacity（GPU 合成）
   ===================================================================== */

/* ---------------------------------------------------------------- 令牌 */
:root {
  /* 品牌 */
  --brand:      #5b5bf5;
  --brand-2:    #8b5cf6;
  --brand-3:    #06b6d4;
  --brand-grad: linear-gradient(135deg, #6366f1 0%, #8b5cf6 48%, #06b6d4 100%);
  --brand-soft: rgba(99, 102, 241, .10);

  /* 语义色 */
  --ok:      #10b981;
  --warn:    #f59e0b;
  --danger:  #f43f5e;

  /* 底与面 */
  --bg:        #f1f3f9;
  --bg-grad:   radial-gradient(1100px 620px at 8% -12%, #e5e9ff 0%, transparent 58%),
               radial-gradient(900px 520px at 102% -4%, #dcf4fb 0%, transparent 52%);
  --panel:     rgba(255, 255, 255, .78);
  --panel-2:   #f6f7fc;
  --surface:   rgba(255, 255, 255, .66);
  --solid:     #ffffff;
  --line:      rgba(16, 24, 40, .085);
  --line-2:    rgba(16, 24, 40, .05);

  /* 字 */
  --text:   #0b1220;
  --text-2: #48536b;
  --muted:  #8b93a7;

  /* 阴影 */
  --sh-1: 0 1px 2px rgba(16,24,40,.05), 0 2px 10px rgba(16,24,40,.045);
  --sh-2: 0 12px 32px -12px rgba(16,24,40,.20), 0 2px 8px rgba(16,24,40,.05);
  --sh-3: 0 32px 80px -24px rgba(16,24,40,.38);
  --glow: 0 10px 28px -10px rgba(99,102,241,.55);
  --glow-w: 0 10px 30px -10px rgba(245,158,11,.5);

  /* 圆角 */
  --r-xs: 10px; --r-sm: 13px; --r-md: 17px; --r-lg: 22px; --r-xl: 28px;

  /* 动效 */
  --e:  cubic-bezier(.22, 1, .36, 1);
  --e2: cubic-bezier(.34, 1.5, .64, 1);
  --d1: .16s; --d2: .3s; --d3: .55s;

  --safe-b: env(safe-area-inset-bottom, 0px);
}

html[data-theme="night"] {
  --bg:      #05070d;
  --bg-grad: radial-gradient(1100px 620px at 8% -12%, #171a3a 0%, transparent 60%),
             radial-gradient(900px 520px at 102% -4%, #0b2b33 0%, transparent 55%);
  --panel:   rgba(16, 21, 33, .80);
  --panel-2: #131826;
  --surface: rgba(255, 255, 255, .045);
  --solid:   #111726;
  --line:    rgba(255, 255, 255, .095);
  --line-2:  rgba(255, 255, 255, .055);
  --text:    #eaeffb;
  --text-2:  #a6b1c6;
  --muted:   #6d7889;
  --brand-soft: rgba(99, 102, 241, .18);
  --sh-1: 0 1px 2px rgba(0,0,0,.4), 0 2px 10px rgba(0,0,0,.3);
  --sh-2: 0 14px 36px -12px rgba(0,0,0,.65), 0 2px 8px rgba(0,0,0,.4);
  --sh-3: 0 34px 90px -26px rgba(0,0,0,.8);
}

/* ---------------------------------------------------------------- 基础 */
* { box-sizing: border-box; -webkit-tap-highlight-color: transparent; }
html, body { height: 100%; margin: 0; }
body {
  background: var(--bg-grad), var(--bg);
  background-attachment: fixed;
  color: var(--text);
  font: 14.5px/1.55 -apple-system, BlinkMacSystemFont, "SF Pro SC", "PingFang SC",
        "Hiragino Sans GB", "Microsoft YaHei", "Segoe UI", system-ui, sans-serif;
  -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale;
  overscroll-behavior: none; letter-spacing: .002em;
}
button, input, select, textarea { font: inherit; color: inherit; }
button { -webkit-user-select: none; user-select: none; }
[v-cloak] { display: none !important; }
[hidden] { display: none !important; }
::selection { background: color-mix(in srgb, var(--brand) 26%, transparent); }

::-webkit-scrollbar { width: 9px; height: 9px; }
::-webkit-scrollbar-thumb { background: color-mix(in srgb, var(--muted) 40%, transparent); border-radius: 9px; border: 2px solid transparent; background-clip: padding-box; }
::-webkit-scrollbar-thumb:hover { background: color-mix(in srgb, var(--muted) 65%, transparent); background-clip: padding-box; }
::-webkit-scrollbar-track { background: transparent; }

.mono { font-family: ui-monospace, "SF Mono", SFMono-Regular, Menlo, Consolas, monospace; font-size: .95em; }
.muted { color: var(--muted); }
.grow { flex: 1; min-width: 0; }
.clip { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.row { display: flex; align-items: center; gap: 9px; }

/* ---------------------------------------------------------------- 动效库 */
@keyframes fadeUp  { from { opacity: 0; transform: translate3d(0, 10px, 0) } to { opacity: 1; transform: none } }
@keyframes popIn   { from { opacity: 0; transform: scale(.94) } to { opacity: 1; transform: none } }
@keyframes sheetUp { from { opacity: 0; transform: translate3d(0, 26px, 0) scale(.985) } to { opacity: 1; transform: none } }
@keyframes riseIn  { from { opacity: 0; transform: translate3d(0, 14px, 0) scale(.96) } to { opacity: 1; transform: none } }
@keyframes breathe { 0%,100% { transform: scale(1); opacity: 1 } 50% { transform: scale(1.22); opacity: .72 } }
@keyframes halo    { 0% { transform: scale(.82); opacity: .5 } 100% { transform: scale(1.5); opacity: 0 } }
@keyframes spin    { to { transform: rotate(360deg) } }
@keyframes shimmer { 0% { background-position: 100% 50% } 100% { background-position: 0 50% } }
@keyframes ripple  { to { transform: scale(2.6); opacity: 0 } }
@keyframes sheen   { from { transform: translateX(-130%) } to { transform: translateX(130%) } }
@keyframes floaty  { 0%,100% { transform: translate3d(0,0,0) scale(1) } 50% { transform: translate3d(0,-16px,0) scale(1.06) } }
@keyframes dropIn  { 0% { opacity: 0; transform: translate3d(0,-16px,0) scale(.6) } 60% { transform: translate3d(0,2px,0) scale(1.04) } 100% { opacity: 1; transform: none } }
@keyframes shrink  { from { transform: scaleX(1) } to { transform: scaleX(0) } }
@keyframes applyglow {
  0%, 100% { box-shadow: 0 8px 22px -10px rgba(245,158,11,.45) }
  50%      { box-shadow: 0 12px 34px -8px rgba(245,158,11,.85) }
}

/* 错峰入场：容器加 .enter，或用 --i 指定序号 */
.enter { animation: fadeUp var(--d3) var(--e) backwards; animation-delay: calc(var(--i, 0) * 45ms); }
.block.enter:nth-child(n) { animation-delay: 0s; }
.rail-body > .enter:nth-child(1) { animation-delay: .02s }
.rail-body > .enter:nth-child(2) { animation-delay: .06s }
.rail-body > .enter:nth-child(3) { animation-delay: .10s }
.rail-body > .enter:nth-child(4) { animation-delay: .14s }
.rail-body > .enter:nth-child(5) { animation-delay: .18s }
.rail-body > .enter:nth-child(6) { animation-delay: .22s }
.rail-body > .enter:nth-child(7) { animation-delay: .26s }
.pop { animation: popIn .24s var(--e) }

/* ---------------------------------------------------------------- 原件 */
.btn {
  position: relative; overflow: hidden; height: 40px; padding: 0 16px;
  border-radius: var(--r-sm); border: 1px solid var(--line); background: var(--surface);
  cursor: pointer; font-weight: 600; font-size: 13.5px;
  display: inline-flex; align-items: center; justify-content: center; gap: 8px;
  transition: transform var(--d1) var(--e), background var(--d2) var(--e),
              border-color var(--d2) var(--e), box-shadow var(--d2) var(--e), color var(--d2) var(--e);
  will-change: transform;
}
.btn::after {
  content: ""; position: absolute; top: 0; bottom: 0; width: 42%;
  background: linear-gradient(100deg, transparent, rgba(255,255,255,.5), transparent);
  opacity: 0; pointer-events: none;
}
@media (hover: hover) {
  .btn:hover { background: var(--panel-2); border-color: color-mix(in srgb, var(--brand) 26%, var(--line)); transform: translateY(-1px); box-shadow: var(--sh-1); }
  .btn:hover::after { opacity: 1; animation: sheen .75s var(--e); }
}
.btn:active { transform: scale(.972); }
.btn[disabled] { opacity: .55; cursor: not-allowed; transform: none; }
.btn svg { flex: none; }
.btn-spin { animation: spin .8s linear infinite; }

.btn-brand { background: var(--brand-grad); border-color: transparent; color: #fff; box-shadow: var(--glow); }
@media (hover: hover) {
  .btn-brand:hover { filter: brightness(1.07) saturate(1.05); border-color: transparent; box-shadow: 0 14px 34px -10px rgba(99,102,241,.6); }
}
.btn-quiet { background: transparent; border-color: transparent; color: var(--text-2); }
@media (hover: hover) { .btn-quiet:hover { background: var(--surface); box-shadow: none; } }
.btn-danger { color: var(--danger); background: var(--surface); border-color: color-mix(in srgb, var(--danger) 26%, transparent); }
@media (hover: hover) { .btn-danger:hover { background: color-mix(in srgb, var(--danger) 10%, transparent); border-color: var(--danger); } }
.btn-block { width: 100%; }
.btn-lg { height: 48px; border-radius: var(--r-md); font-size: 15px; }
.icon-only { width: 48px; padding: 0; }

.btn-apply { background: linear-gradient(135deg, #f59e0b, #f97316); border-color: transparent; color: #fff; animation: applyglow 2.1s ease-in-out infinite; }
@media (hover: hover) { .btn-apply:hover { filter: brightness(1.05); border-color: transparent; } }

.spinner {
  width: 15px; height: 15px; flex: none; border-radius: 50%;
  border: 2px solid rgba(255,255,255,.34); border-top-color: #fff;
  animation: spin .68s linear infinite;
}
.spin-dot {
  width: 15px; height: 15px; flex: none; border-radius: 50%;
  border: 2px solid color-mix(in srgb, var(--brand) 24%, transparent);
  border-top-color: var(--brand); animation: spin .7s linear infinite;
  display: inline-block; vertical-align: -2px;
}

/* 涟漪 */
.ripple {
  position: absolute; border-radius: 50%; pointer-events: none;
  background: radial-gradient(circle, rgba(255,255,255,.55), rgba(255,255,255,0) 70%);
  transform: scale(0); animation: ripple .62s var(--e) forwards;
}
.ripple.on-surface { background: radial-gradient(circle, color-mix(in srgb, var(--brand) 30%, transparent), transparent 70%); }

.input {
  width: 100%; height: 44px; padding: 0 13px; border-radius: var(--r-sm);
  border: 1px solid var(--line); background: var(--surface); outline: none;
  transition: border-color var(--d2) var(--e), box-shadow var(--d2) var(--e), background var(--d2) var(--e);
}
.input::placeholder { color: var(--muted); }
.input:focus {
  border-color: color-mix(in srgb, var(--brand) 55%, transparent);
  box-shadow: 0 0 0 4px var(--brand-soft); background: var(--solid);
}
.field { display: flex; flex-direction: column; gap: 7px; min-width: 0; }
.field > label { font-size: 12px; font-weight: 600; color: var(--text-2); letter-spacing: .02em; }

.icon-btn {
  width: 38px; height: 38px; flex: none; border-radius: 12px; border: 1px solid var(--line);
  background: linear-gradient(165deg, var(--solid), var(--surface));
  box-shadow: var(--sh-1), inset 0 1px 0 rgba(255, 255, 255, .5);
  color: var(--text-2); cursor: pointer; padding: 0;
  display: flex; align-items: center; justify-content: center;
  transition: transform var(--d1) var(--e), color var(--d2), background var(--d2), border-color var(--d2), box-shadow var(--d2);
}
.icon-btn svg { flex: none; }
html[data-theme="night"] .icon-btn { background: var(--surface); box-shadow: var(--sh-1), inset 0 1px 0 rgba(255,255,255,.07); }
.icon-btn.sm { width: 32px; height: 32px; border-radius: 10px; }
@media (hover: hover) {
  .icon-btn:hover { color: var(--brand); border-color: color-mix(in srgb, var(--brand) 42%, transparent);
    background: var(--solid); box-shadow: var(--sh-2), inset 0 1px 0 rgba(255,255,255,.5); transform: translateY(-1px); }
}
.icon-btn:active { transform: scale(.92); box-shadow: var(--sh-1); }

/* 抽屉收起钮：圆形玻璃钮（仅移动端显示） */
.sheet-x { display: none; }

.link { border: 0; background: transparent; color: var(--brand); font-size: 12.5px; font-weight: 600; cursor: pointer; padding: 2px 4px; border-radius: 7px; }
@media (hover: hover) { .link:hover { background: var(--brand-soft); } }

.chip {
  display: inline-flex; align-items: center; gap: 6px; height: 26px; padding: 0 11px;
  border-radius: 999px; font-size: 12px; font-weight: 650; white-space: nowrap;
  background: var(--surface); color: var(--text-2); border: 1px solid var(--line);
  transition: background var(--d2) var(--e), color var(--d2) var(--e);
}
.chip.ok   { background: color-mix(in srgb, var(--ok) 14%, transparent);     color: var(--ok);     border-color: transparent; }
.chip.warn, .chip.wait { background: color-mix(in srgb, var(--warn) 16%, transparent); color: color-mix(in srgb, var(--warn) 82%, var(--text)); border-color: transparent; }
.chip.err  { background: color-mix(in srgb, var(--danger) 13%, transparent); color: var(--danger); border-color: transparent; }
.chip.live { position: relative; padding-left: 22px; }
.chip.live::before {
  content: ""; position: absolute; left: 9px; width: 7px; height: 7px; border-radius: 50%;
  background: currentColor; animation: breathe 1.9s var(--e) infinite;
}

/* ---------------------------------------------------------------- 骨架 */
#app { height: 100%; }
.shell { position: relative; height: 100%; display: grid; grid-template-columns: 402px 1fr; }
.shell.solo { grid-template-columns: 1fr; }

.skel {
  border-radius: var(--r-sm);
  background: linear-gradient(90deg, var(--line-2) 22%, var(--panel-2) 40%, var(--line-2) 62%);
  background-size: 300% 100%; animation: shimmer 1.35s ease-in-out infinite;
}

/* ---------------------------------------------------------------- 控制台 */
.rail {
  position: relative; display: flex; flex-direction: column; min-width: 0; z-index: 20;
  background: var(--panel);
  -webkit-backdrop-filter: saturate(180%) blur(22px); backdrop-filter: saturate(180%) blur(22px);
  border-right: 1px solid var(--line);
  box-shadow: 14px 0 44px -38px rgba(16,24,40,.6);
}
.rail-head { display: flex; align-items: center; gap: 11px; padding: 15px 17px; border-bottom: 1px solid var(--line-2); }
.logo {
  width: 40px; height: 40px; flex: none; border-radius: 13px; display: grid; place-items: center;
  background: var(--brand-grad); color: #fff; font-weight: 800; font-size: 17px;
  box-shadow: var(--glow); position: relative; overflow: hidden;
}
.logo::after {
  content: ""; position: absolute; inset: 0;
  background: linear-gradient(140deg, rgba(255,255,255,.42), transparent 55%);
}
.logo > span { position: relative; z-index: 1; }
.logo-txt b { display: block; font-size: 15.5px; font-weight: 750; line-height: 1.22; letter-spacing: -.01em; }
.logo-txt span { font-size: 11px; color: var(--muted); letter-spacing: .05em; }

.rail-body {
  flex: 1; min-height: 0; overflow-y: auto; overscroll-behavior: contain;
  -webkit-overflow-scrolling: touch;
  padding: 16px 17px calc(24px + var(--safe-b));
  display: flex; flex-direction: column; gap: 18px;
  scrollbar-width: thin;
}
.rail-foot { padding: 12px 17px calc(12px + var(--safe-b)); border-top: 1px solid var(--line-2); background: var(--panel-2); }

.block { display: flex; flex-direction: column; gap: 10px; }
.block > .bh { display: flex; align-items: center; justify-content: space-between; gap: 8px; padding: 0 2px; }
.block > .bh > b { font-size: 12px; font-weight: 700; color: var(--text-2); letter-spacing: .08em; text-transform: uppercase; }
.cnt { font-size: 12px; font-weight: 600; }

/* --- 状态卡 --- */
.live.hero {
  position: relative; overflow: hidden; display: flex; align-items: center; gap: 14px;
  padding: 16px; border-radius: var(--r-lg); border: 1px solid var(--line);
  background: linear-gradient(168deg, var(--solid), var(--surface));
  --tone: var(--brand);
}
.live.hero::before {
  content: ""; position: absolute; inset: 0; pointer-events: none;
  background: radial-gradient(120% 90% at 0% 0%, color-mix(in srgb, var(--tone) 22%, transparent), transparent 62%);
  opacity: .9; transition: background var(--d3) var(--e);
}
.live.hero > * { position: relative; }
.live.hero.ok   { --tone: var(--ok);     border-color: color-mix(in srgb, var(--ok) 34%, transparent); }
.live.hero.wait { --tone: var(--warn);   border-color: color-mix(in srgb, var(--warn) 34%, transparent); }
.live.hero.err  { --tone: var(--danger); border-color: color-mix(in srgb, var(--danger) 30%, transparent); }
.live .lt { font-size: 14px; font-weight: 700; letter-spacing: -.01em; }
.live .ld { font-size: 12px; color: var(--text-2); margin-top: 3px; }

.live .ring {
  position: relative; width: 46px; height: 46px; flex: none; border-radius: 50%;
  display: grid; place-items: center;
  background: conic-gradient(from 0deg, var(--tone), color-mix(in srgb, var(--tone) 18%, transparent), var(--tone));
  box-shadow: 0 6px 18px -8px color-mix(in srgb, var(--tone) 70%, transparent);
}
.live .ring::before { content: ""; position: absolute; inset: 3px; border-radius: 50%; background: var(--solid); }
.live .ring i {
  position: relative; z-index: 1; width: 12px; height: 12px; border-radius: 50%;
  background: var(--tone); animation: breathe 2s var(--e) infinite;
}
.live .ring b {
  position: absolute; inset: -2px; border-radius: 50%; border: 1.5px solid var(--tone);
  animation: halo 2.6s var(--e) infinite;
}
.live.wait .ring { animation: spin 2.8s linear infinite; }
.live.wait .ring i { animation: breathe 1.5s var(--e) infinite; }
.live.err .ring i { animation: none; }

.live .refresh {
  align-self: flex-start; flex: none; width: 30px; height: 30px; padding: 0; border: 0;
  border-radius: 10px; background: transparent; color: var(--muted); cursor: pointer;
  display: flex; align-items: center; justify-content: center;
  transition: color var(--d2), background var(--d2), transform var(--d2) var(--e);
}
@media (hover: hover) { .live .refresh:hover { color: var(--tone); background: color-mix(in srgb, var(--tone) 12%, transparent); } }
.live .refresh:active { transform: scale(.9); }
.live .refresh.spin svg { animation: spin .9s linear infinite; }

/* 双指示灯 */
.stat2 { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; }
.st2 {
  position: relative; display: flex; align-items: center; gap: 10px; padding: 12px;
  min-width: 0; border: 1px solid var(--line); border-radius: var(--r-md); background: var(--surface);
  transition: background var(--d3) var(--e), border-color var(--d3) var(--e),
              transform var(--d2) var(--e), box-shadow var(--d2) var(--e);
}
@media (hover: hover) { .st2:hover { transform: translateY(-2px); box-shadow: var(--sh-1); } }
.st2 .dot {
  position: relative; width: 10px; height: 10px; flex: none; border-radius: 50%;
  background: var(--muted); transition: background var(--d3) var(--e), box-shadow var(--d3) var(--e);
}
.st2 .txt { min-width: 0; }
.st2 .k { font-size: 11px; color: var(--muted); letter-spacing: .03em; }
.st2 .v { font-size: 13.5px; font-weight: 700; line-height: 1.3; transition: color var(--d3) var(--e); }
.st2 .x { font-size: 11px; color: var(--muted); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.st2.ok   { background: color-mix(in srgb, var(--ok) 10%, transparent);   border-color: color-mix(in srgb, var(--ok) 26%, transparent); }
.st2.ok .dot { background: var(--ok); box-shadow: 0 0 0 4px color-mix(in srgb, var(--ok) 18%, transparent); animation: breathe 2.4s var(--e) infinite; }
.st2.ok .v { color: color-mix(in srgb, var(--ok) 78%, var(--text)); }
.st2.wait { background: color-mix(in srgb, var(--warn) 12%, transparent); border-color: color-mix(in srgb, var(--warn) 28%, transparent); }
.st2.wait .dot { background: var(--warn); animation: breathe 1.5s var(--e) infinite; }
.st2.wait .v { color: color-mix(in srgb, var(--warn) 76%, var(--text)); }
.st2.off .v { color: var(--text-2); }

/* 键值行 */
.kv {
  display: flex; align-items: center; gap: 8px; padding: 9px 12px; border-radius: var(--r-sm);
  background: var(--surface); border: 1px solid var(--line-2); font-size: 11.5px; color: var(--muted);
}
.kv.col { flex-direction: column; align-items: flex-start; gap: 3px; }
.kv b { color: var(--text); font-size: 12.5px; font-weight: 650; }
.kv .kvk { color: var(--muted); flex: none; }

/* 提示条 */
.hint {
  position: relative; font-size: 12px; line-height: 1.62; color: var(--text-2);
  background: var(--surface); border: 1px solid var(--line-2); border-radius: var(--r-sm);
  padding: 10px 12px;
}
.hint b { color: var(--brand); font-weight: 650; }
.hint.warn {
  background: color-mix(in srgb, var(--warn) 11%, transparent);
  border-color: color-mix(in srgb, var(--warn) 30%, transparent);
  animation: popIn .3s var(--e);
}
.hint.warn b { color: color-mix(in srgb, var(--warn) 78%, var(--text)); }
.hint.ok { background: color-mix(in srgb, var(--ok) 10%, transparent); border-color: color-mix(in srgb, var(--ok) 26%, transparent); }
.hint.ok b { color: var(--ok); }

/* --- 搜索 --- */
.search { position: relative; }
.search .ico { position: absolute; left: 13px; top: 50%; transform: translateY(-50%); color: var(--muted); pointer-events: none; display: flex; align-items: center; transition: color var(--d2); }
.search .ico svg { display: block; }
.search .input { padding-left: 38px; padding-right: 40px; }
.search:focus-within .ico { color: var(--brand); }
.search .clr {
  position: absolute; right: 6px; top: 50%; transform: translateY(-50%);
  width: 32px; height: 32px; border: 0; border-radius: 10px; background: transparent;
  color: var(--muted); cursor: pointer; padding: 0;
  display: flex; align-items: center; justify-content: center;
  transition: background var(--d2), color var(--d2), transform var(--d1) var(--e);
}
@media (hover: hover) { .search .clr:hover { background: var(--panel-2); color: var(--text); } }
.search .clr:active { transform: translateY(-50%) scale(.88); }
.search .spin-dot { position: absolute; right: 14px; top: 50%; margin-top: -7.5px; }

.results {
  border: 1px solid var(--line); border-radius: var(--r-md); overflow: hidden;
  max-height: 258px; overflow-y: auto; background: var(--solid); box-shadow: var(--sh-2);
  transform-origin: top center;
}
.results .it {
  display: flex; align-items: center; gap: 10px; padding: 11px 12px; cursor: pointer;
  border-bottom: 1px solid var(--line-2);
  animation: fadeUp .3s var(--e) backwards; animation-delay: calc(var(--i, 0) * 26ms);
  transition: background var(--d2) var(--e), padding-left var(--d2) var(--e);
}
.results .it:last-child { border-bottom: 0; }
.results .it.on { background: var(--brand-soft); padding-left: 15px; }
@media (hover: hover) { .results .it:hover { background: var(--brand-soft); } }
.results .rp {
  width: 26px; height: 26px; flex: none; border-radius: 9px; display: grid; place-items: center;
  background: var(--brand-soft); color: var(--brand);
}
.results .it .n { font-size: 13.5px; font-weight: 600; display: flex; align-items: center; gap: 6px; }
.results .it .s { font-size: 11.5px; color: var(--muted); }
.results .it .tag {
  font-size: 10.5px; font-weight: 600; color: var(--brand); background: var(--brand-soft);
  border-radius: 6px; padding: 1px 6px; flex: 0 0 auto;
}

/* --- 快捷操作 --- */
.quick { display: grid; grid-template-columns: repeat(3, 1fr); gap: 10px; }
.qbtn {
  position: relative; overflow: hidden;
  display: flex; flex-direction: column; align-items: center; gap: 9px; padding: 14px 6px 12px;
  border-radius: var(--r-md); border: 1px solid var(--line);
  background: linear-gradient(170deg, var(--solid), var(--surface));
  box-shadow: var(--sh-1), inset 0 1px 0 rgba(255, 255, 255, .55);
  cursor: pointer;
  transition: transform var(--d1) var(--e), box-shadow var(--d2) var(--e), border-color var(--d2), background var(--d2);
}
html[data-theme="night"] .qbtn { background: var(--surface); box-shadow: var(--sh-1), inset 0 1px 0 rgba(255,255,255,.06); }
.qbtn:active { transform: scale(.95); }
@media (hover: hover) {
  .qbtn:hover { transform: translateY(-3px); box-shadow: var(--sh-2), inset 0 1px 0 rgba(255,255,255,.55);
    border-color: color-mix(in srgb, var(--brand) 30%, var(--line)); }
}

/* 图标芯片：柔光染色 squircle（替代旧实色块） */
.qbtn .qi {
  position: relative; width: 40px; height: 40px; border-radius: 13px;
  display: grid; place-items: center;
}
.qbtn .qi::before {
  content: ""; position: absolute; inset: 0; border-radius: inherit; pointer-events: none;
  background: linear-gradient(160deg, rgba(255, 255, 255, .6), transparent 58%);
}
.qbtn .qi svg { position: relative; z-index: 1; filter: drop-shadow(0 1px 1px rgba(16, 24, 40, .2)); }
.qbtn .qi.star {
  color: #e07c09;
  background: linear-gradient(150deg, rgba(245, 158, 11, .26), rgba(249, 115, 22, .11));
  box-shadow: inset 0 0 0 1px rgba(245, 158, 11, .32), 0 8px 16px -9px rgba(245, 158, 11, .65);
}
.qbtn .qi.me {
  color: #0e93ad;
  background: linear-gradient(150deg, rgba(6, 182, 212, .24), rgba(14, 165, 233, .11));
  box-shadow: inset 0 0 0 1px rgba(6, 182, 212, .32), 0 8px 16px -9px rgba(6, 182, 212, .65);
}
.qbtn .qi.back {
  color: var(--brand);
  background: linear-gradient(150deg, rgba(99, 102, 241, .22), rgba(139, 92, 246, .11));
  box-shadow: inset 0 0 0 1px rgba(99, 102, 241, .32), 0 8px 16px -9px rgba(99, 102, 241, .65);
}
html[data-theme="night"] .qbtn .qi.star { color: #fbbf24; }
html[data-theme="night"] .qbtn .qi.me   { color: #22d3ee; }
html[data-theme="night"] .qbtn .qi.back { color: #a5b4fc; }
html[data-theme="night"] .qbtn .qi::before { background: linear-gradient(160deg, rgba(255, 255, 255, .16), transparent 58%); }
html[data-theme="night"] .qbtn .qi svg { filter: none; }
.qbtn .qt { font-size: 12px; font-weight: 600; color: var(--text-2); }

/* --- 组合胶囊：主操作 + 图标位一体（坐标精调行） --- */
.duo {
  display: flex; align-items: stretch; height: 46px; margin-top: 10px;
  border-radius: 14px; overflow: hidden;
  border: 1px solid color-mix(in srgb, var(--brand) 20%, var(--line));
  background: linear-gradient(165deg, color-mix(in srgb, var(--brand) 6%, var(--solid)), var(--surface));
  box-shadow: var(--sh-1), inset 0 1px 0 rgba(255, 255, 255, .45);
}
html[data-theme="night"] .duo { box-shadow: var(--sh-1), inset 0 1px 0 rgba(255,255,255,.05); }
.duo-main {
  flex: 1; min-width: 0; border: 0; background: transparent; cursor: pointer;
  font-weight: 650; font-size: 13.5px; color: var(--brand);
  transition: background var(--d2) var(--e);
}
.duo-ico {
  position: relative; overflow: hidden;
  width: 48px; flex: none; border: 0; cursor: pointer;
  border-left: 1px solid color-mix(in srgb, var(--brand) 14%, var(--line-2));
  background: transparent; color: var(--brand); padding: 0;
  display: flex; align-items: center; justify-content: center;
  transition: background var(--d2) var(--e), transform var(--d1) var(--e);
}
@media (hover: hover) { .duo-main:hover, .duo-ico:hover { background: var(--brand-soft); } }
.duo-main:active { background: color-mix(in srgb, var(--brand) 15%, transparent); }
.duo-ico:active { background: color-mix(in srgb, var(--brand) 15%, transparent); transform: scale(.94); }

/* --- 列表 --- */
.list { display: flex; flex-direction: column; gap: 8px; }
.li {
  display: flex; align-items: center; gap: 10px; padding: 11px 12px;
  border: 1px solid var(--line); border-radius: var(--r-sm); background: var(--surface); cursor: pointer;
  transition: transform var(--d2) var(--e), border-color var(--d2), background var(--d2), box-shadow var(--d2);
}
@media (hover: hover) { .li:hover { transform: translateX(2px); border-color: color-mix(in srgb, var(--brand) 30%, var(--line)); background: var(--solid); box-shadow: var(--sh-1); } }
.li:active { transform: scale(.985); }
.li .lico {
  width: 30px; height: 30px; flex: none; border-radius: 10px; display: grid; place-items: center;
  background: var(--brand-soft); color: var(--brand);
}
.li .lico.dim { background: var(--surface); color: var(--muted); }
.li .nm { font-size: 13px; font-weight: 600; }
.li .cd { font-size: 11.5px; color: var(--muted); }
.li .del {
  width: 30px; height: 30px; flex: none; border: 0; border-radius: 10px; background: transparent;
  color: var(--muted); cursor: pointer; padding: 0;
  display: flex; align-items: center; justify-content: center;
  transition: color var(--d2), background var(--d2), transform var(--d1) var(--e);
}
@media (hover: hover) { .li .del:hover { color: var(--danger); background: color-mix(in srgb, var(--danger) 12%, transparent); } }
.li .del:active { transform: scale(.88); }

.empty {
  display: flex; flex-direction: column; align-items: center; gap: 8px; padding: 22px 14px;
  border: 1px dashed var(--line); border-radius: var(--r-md); color: var(--muted); font-size: 12.5px;
}
.empty svg { opacity: .45; }

/* --- 坐标 / 订阅卡 --- */
.coord { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; }
.acct-card {
  position: relative; overflow: hidden; padding: 16px; border-radius: var(--r-lg);
  border: 1px solid var(--line); background: linear-gradient(160deg, var(--solid), var(--surface));
}
.acct-glow {
  position: absolute; width: 190px; height: 190px; right: -70px; top: -90px; border-radius: 50%;
  background: var(--brand-grad); filter: blur(38px); opacity: .30;
  animation: floaty 7s var(--e) infinite;
}
.acct-card .t1 { position: relative; font-size: 12px; color: var(--muted); letter-spacing: .04em; }
.acct-card .t2 {
  position: relative; font-size: 30px; font-weight: 780; letter-spacing: -.02em; line-height: 1.1;
  margin: 2px 0 12px; font-variant-numeric: tabular-nums;
  background: var(--brand-grad); -webkit-background-clip: text; background-clip: text; color: transparent;
}
.bar { position: relative; height: 7px; border-radius: 7px; background: var(--line); overflow: hidden; }
.bar i {
  display: block; height: 100%; border-radius: 7px; background: var(--brand-grad);
  transition: width .9s var(--e); position: relative;
}
.bar i::after {
  content: ""; position: absolute; inset: 0;
  background: linear-gradient(90deg, transparent, rgba(255,255,255,.45), transparent);
  animation: sheen 2.2s ease-in-out infinite;
}
.acct-foot { display: flex; justify-content: space-between; margin-top: 10px; font-size: 11.5px; color: var(--muted); }

/* ---------------------------------------------------------------- 地图区 */
.mapwrap { position: relative; min-width: 0; overflow: hidden; background: var(--bg); }
#map { position: absolute; inset: 0; }
html[data-theme="night"] .maplibregl-canvas-container canvas { filter: invert(1) hue-rotate(180deg) brightness(.92) contrast(.88) saturate(.8); }

.hud { position: absolute; top: 14px; left: 14px; right: 14px; z-index: 12; display: flex; align-items: center; gap: 9px; pointer-events: none; }
.hud > * { pointer-events: auto; }
.hud-pill {
  display: flex; align-items: center; gap: 11px; min-width: 0; flex: 1; max-width: min(78%, 460px);
  height: 50px; padding: 0 5px 0 13px; border-radius: 999px;
  background: color-mix(in srgb, var(--solid) 80%, transparent);
  -webkit-backdrop-filter: saturate(180%) blur(20px); backdrop-filter: saturate(180%) blur(20px);
  border: 1px solid var(--line);
  box-shadow: var(--sh-2), inset 0 1px 0 rgba(255, 255, 255, .4);
  animation: fadeUp var(--d3) var(--e) backwards;
}
html[data-theme="night"] .hud-pill { box-shadow: var(--sh-2), inset 0 1px 0 rgba(255,255,255,.07); }
.hud-pill .t { font-size: 13px; font-weight: 700; line-height: 1.25; }
.hud-pill .s { font-size: 11px; color: var(--muted); display: flex; align-items: center; gap: 5px; }
.hud-div { width: 1px; height: 22px; flex: none; background: var(--line); }
.hud-btn {
  position: relative; overflow: hidden;
  width: 42px; height: 42px; flex: none; border-radius: 999px; padding: 0; cursor: pointer;
  display: flex; align-items: center; justify-content: center;
  border: 0; background: transparent; color: var(--text-2);
  transition: transform var(--d1) var(--e), color var(--d2), background var(--d2), box-shadow var(--d2);
}
@media (hover: hover) { .hud-btn:hover { color: var(--brand); background: var(--brand-soft); } }
.hud-btn:active { transform: scale(.9); }
.hud-btn.on { color: #fff; background: var(--brand-grad); box-shadow: var(--glow); }

.readout {
  position: absolute; left: 14px; bottom: 14px; z-index: 12; min-width: 250px; padding: 13px 15px;
  border-radius: var(--r-lg); border: 1px solid var(--line);
  background: color-mix(in srgb, var(--solid) 84%, transparent);
  -webkit-backdrop-filter: saturate(180%) blur(20px); backdrop-filter: saturate(180%) blur(20px);
  box-shadow: var(--sh-2); animation: sheetUp var(--d3) var(--e) backwards .1s;
}
.readout .ro-top { display: flex; align-items: center; justify-content: space-between; gap: 10px; }
.readout .ro-k { font-size: 11px; color: var(--muted); letter-spacing: .06em; text-transform: uppercase; }
.readout .ro-act {
  border: 0; background: var(--brand-soft); color: var(--brand); font-size: 11.5px; font-weight: 650;
  border-radius: 8px; padding: 3px 9px; cursor: pointer; transition: background var(--d2), transform var(--d1) var(--e);
}
.readout .ro-act:active { transform: scale(.92); }
.readout .ro-v { font-size: 16px; font-weight: 730; margin: 3px 0 5px; letter-spacing: -.01em; }
.readout .ro-c { font-size: 12px; color: var(--text-2); font-variant-numeric: tabular-nums; }
.readout .ro-credit { font-size: 10.5px; color: var(--muted); margin-top: 6px; }

.mapctl { position: absolute; right: 14px; bottom: 14px; z-index: 12; display: flex; flex-direction: column; align-items: center; gap: 10px; }

/* 缩放组合：+/− 一体胶囊 */
.mc-group {
  display: flex; flex-direction: column; border-radius: 16px; overflow: hidden;
  background: color-mix(in srgb, var(--solid) 86%, transparent);
  -webkit-backdrop-filter: blur(18px); backdrop-filter: blur(18px);
  border: 1px solid var(--line);
  box-shadow: var(--sh-2), inset 0 1px 0 rgba(255, 255, 255, .45);
}
html[data-theme="night"] .mc-group { box-shadow: var(--sh-2), inset 0 1px 0 rgba(255,255,255,.08); }
.mc-group button {
  width: 44px; height: 42px; border: 0; background: transparent; cursor: pointer; padding: 0;
  color: var(--text-2); display: flex; align-items: center; justify-content: center;
  transition: background var(--d2) var(--e), color var(--d2), transform var(--d1) var(--e);
}
.mc-div { height: 1px; margin: 0 11px; background: var(--line); flex: none; }
@media (hover: hover) { .mc-group button:hover { color: var(--brand); background: var(--brand-soft); } }
.mc-group button:active { transform: scale(.88); color: var(--brand); }

/* 独立悬浮圆钮：定位到我 / 应用 */
.mc-fab {
  position: relative; overflow: hidden;
  width: 46px; height: 46px; border-radius: 999px; border: 1px solid var(--line);
  background: color-mix(in srgb, var(--solid) 86%, transparent);
  -webkit-backdrop-filter: blur(18px); backdrop-filter: blur(18px);
  color: var(--text-2); cursor: pointer; padding: 0;
  display: flex; align-items: center; justify-content: center;
  box-shadow: var(--sh-2), inset 0 1px 0 rgba(255, 255, 255, .45);
  transition: transform var(--d1) var(--e), color var(--d2), background var(--d2), border-color var(--d2), box-shadow var(--d2), filter var(--d2);
}
html[data-theme="night"] .mc-fab { box-shadow: var(--sh-2), inset 0 1px 0 rgba(255,255,255,.08); }
@media (hover: hover) { .mc-fab:hover { color: var(--brand); border-color: color-mix(in srgb, var(--brand) 40%, transparent); transform: translateY(-2px); } }
.mc-fab:active { transform: scale(.9); }
.mc-fab.primary { background: var(--brand-grad); border-color: transparent; color: #fff; box-shadow: var(--glow); }
@media (hover: hover) { .mc-fab.primary:hover { filter: brightness(1.08); color: #fff; transform: translateY(-2px); } }
.mc-fab.primary.on svg { animation: spin .9s linear infinite; }

.mobar { display: none; }

/* 地图标记 */
.pin { position: relative; width: 26px; height: 26px; animation: dropIn .7s var(--e2) backwards; }
.pin i {
  position: absolute; inset: 0; border-radius: 50%; background: var(--brand);
  border: 3px solid #fff; box-shadow: 0 6px 16px -4px rgba(91,91,245,.7);
}
.pin::after {
  content: ""; position: absolute; inset: -12px; border-radius: 50%;
  border: 2px solid color-mix(in srgb, var(--brand) 55%, transparent); animation: halo 2.2s var(--e) infinite;
}

/* 底图错误提示 */
.maperr {
  position: absolute; left: 50%; transform: translateX(-50%); top: 76px; z-index: 14;
  display: flex; align-items: center; gap: 11px; padding: 8px 9px 8px 15px; max-width: min(92%, 540px);
  background: color-mix(in srgb, var(--solid) 92%, transparent);
  -webkit-backdrop-filter: blur(16px); backdrop-filter: blur(16px);
  border: 1px solid color-mix(in srgb, var(--danger) 32%, transparent); border-radius: 999px;
  box-shadow: var(--sh-2); font-size: 12.5px; color: var(--danger);
}
.maperr span { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.maperr button {
  border: 0; background: var(--danger); color: #fff; border-radius: 999px; flex: none;
  height: 27px; padding: 0 14px; font-size: 12px; font-weight: 650; cursor: pointer;
  transition: transform var(--d1) var(--e), filter var(--d2);
}
.maperr button:active { transform: scale(.94); }

/* ---------------------------------------------------------------- 登录 */
.auth {
  position: fixed; inset: 0; z-index: 50; display: grid; place-items: center; padding: 22px; overflow: hidden;
  background: color-mix(in srgb, var(--bg) 62%, rgba(8,12,22,.5));
  -webkit-backdrop-filter: blur(18px) saturate(150%); backdrop-filter: blur(18px) saturate(150%);
  animation: fadeUp .3s var(--e) backwards;
}
@keyframes authFade { from { opacity: 0 } to { opacity: 1 } }
.auth { animation: authFade .28s var(--e); }
.auth-bg { position: absolute; inset: 0; pointer-events: none; }
.auth-bg i { position: absolute; border-radius: 50%; filter: blur(46px); opacity: .5; }
.auth-bg i:nth-child(1) { width: 340px; height: 340px; left: -90px; top: -60px; background: #6366f1; animation: floaty 9s var(--e) infinite; }
.auth-bg i:nth-child(2) { width: 300px; height: 300px; right: -80px; top: 12%; background: #06b6d4; animation: floaty 11s var(--e) infinite reverse; }
.auth-bg i:nth-child(3) { width: 320px; height: 320px; left: 34%; bottom: -120px; background: #8b5cf6; animation: floaty 13s var(--e) infinite; }

.auth-card {
  position: relative; width: 100%; max-width: 428px; padding: 30px 28px 24px; overflow-y: auto;
  max-height: calc(100vh - 44px); border-radius: var(--r-xl); border: 1px solid var(--line);
  background: color-mix(in srgb, var(--solid) 88%, transparent);
  -webkit-backdrop-filter: saturate(180%) blur(24px); backdrop-filter: saturate(180%) blur(24px);
  box-shadow: var(--sh-3); animation: sheetUp .5s var(--e2) backwards;
}
.auth-card .top { display: flex; align-items: center; gap: 11px; margin-bottom: 20px; }
.auth-card h1 { margin: 0 0 5px; font-size: 22px; font-weight: 760; letter-spacing: -.02em; }
.auth-card .sub { margin: 0 0 20px; color: var(--text-2); font-size: 13px; }
.auth form { display: flex; flex-direction: column; gap: 14px; }

.tabs, .seg { position: relative; display: flex; gap: 2px; padding: 4px; border-radius: var(--r-md); background: var(--surface); border: 1px solid var(--line-2); }
.tabs { margin-bottom: 18px; }
.seg-pill, .tab-pill {
  position: absolute; top: 4px; bottom: 4px; left: 4px; width: calc(25% - 5px);
  border-radius: var(--r-sm); background: var(--solid); box-shadow: var(--sh-1);
  transition: transform .42s var(--e); will-change: transform;
}
.tabs .seg-pill { width: calc(50% - 5px); }
.tabs button, .seg button {
  position: relative; z-index: 1; flex: 1; height: 34px; border: 0; border-radius: var(--r-sm);
  background: transparent; color: var(--text-2); cursor: pointer; font-weight: 600; font-size: 13px;
  display: inline-flex; align-items: center; justify-content: center; gap: 6px;
  transition: color var(--d2) var(--e), transform var(--d1) var(--e);
}
.tabs button.on, .seg button.on { color: var(--brand); }
.tabs button:active, .seg button:active { transform: scale(.96); }

.err {
  background: color-mix(in srgb, var(--danger) 12%, transparent); color: var(--danger);
  border-radius: var(--r-sm); padding: 10px 12px; font-size: 12.5px; font-weight: 550;
}
.feat { display: flex; gap: 14px; margin-top: 20px; padding-top: 16px; border-top: 1px solid var(--line-2); flex-wrap: wrap; }
.feat span { font-size: 11.5px; color: var(--muted); display: inline-flex; align-items: center; gap: 6px; }
.feat .fd { width: 5px; height: 5px; border-radius: 50%; background: var(--brand-grad); }

/* ---------------------------------------------------------------- 指引 */
.guide {
  position: fixed; inset: 0; z-index: 52; display: grid; place-items: center; padding: 18px;
  background: rgba(8,12,22,.5);
  -webkit-backdrop-filter: blur(10px); backdrop-filter: blur(10px);
  animation: authFade .24s var(--e);
}
.guide-card {
  position: relative; width: 100%; max-width: 412px; padding: 26px 24px 22px;
  border-radius: var(--r-xl); border: 1px solid var(--line);
  background: color-mix(in srgb, var(--solid) 92%, transparent);
  -webkit-backdrop-filter: saturate(180%) blur(24px); backdrop-filter: saturate(180%) blur(24px);
  box-shadow: var(--sh-3); animation: sheetUp .48s var(--e2) backwards;
}
.guide-grip { display: none; }
.guide-card h3 { margin: 0 0 16px; font-size: 18px; font-weight: 750; letter-spacing: -.02em; }
.steps { display: flex; flex-direction: column; gap: 14px; margin-bottom: 22px; }
.step { display: flex; gap: 12px; }
.step .no {
  width: 24px; height: 24px; flex: none; border-radius: 9px; display: grid; place-items: center;
  background: var(--brand-grad); color: #fff; font-size: 12px; font-weight: 750;
  box-shadow: 0 6px 14px -8px rgba(99,102,241,.9);
}
.step .st { font-size: 13.5px; font-weight: 680; }
.step .sd { font-size: 12px; color: var(--text-2); line-height: 1.6; }
.step .sd b { color: var(--brand); }

/* ---------------------------------------------------------------- 轻提示 */
.toasts {
  position: absolute; left: 50%; transform: translateX(-50%); bottom: calc(26px + var(--safe-b));
  z-index: 60; display: flex; flex-direction: column; gap: 9px; align-items: center;
  width: max-content; max-width: 92%; pointer-events: none;
}
.toast {
  position: relative; overflow: hidden; display: flex; align-items: center; gap: 10px;
  padding: 11px 16px; border-radius: 999px; font-size: 13px; font-weight: 550;
  background: color-mix(in srgb, var(--solid) 92%, transparent);
  -webkit-backdrop-filter: blur(18px); backdrop-filter: blur(18px);
  border: 1px solid var(--line); box-shadow: var(--sh-2); pointer-events: auto; cursor: pointer;
  animation: riseIn .36s var(--e2) backwards;
}
.toast .ic { width: 19px; height: 19px; flex: none; border-radius: 50%; display: grid; place-items: center; color: #fff; }
.toast.ok .ic   { background: linear-gradient(135deg, #10b981, #059669); }
.toast.err .ic  { background: linear-gradient(135deg, #f43f5e, #e11d48); }
.toast.info .ic { background: var(--brand-grad); }
.toast .tm { max-width: 62vw; }
.toast .tbar {
  position: absolute; left: 0; right: 0; bottom: 0; height: 2px; transform-origin: left;
  background: var(--brand-grad); animation: shrink var(--life, 3s) linear forwards;
}
.toast.ok .tbar { background: linear-gradient(90deg, #10b981, #34d399); }
.toast.err .tbar { background: linear-gradient(90deg, #f43f5e, #fb7185); }

/* ---------------------------------------------------------------- 移动端 */
.tabbar { display: none; }

@media (max-width: 1023px) {
  .shell { grid-template-columns: 1fr; }

  .rail {
    position: absolute; left: 0; right: 0; bottom: 0; top: auto; height: 84vh; max-height: 84vh;
    border-right: 0; border-top-left-radius: 28px; border-top-right-radius: 28px;
    border-top: 1px solid var(--line);
    box-shadow: 0 -22px 70px -24px rgba(8,12,22,.55);
    z-index: 40;
    transition: transform .46s var(--e);
    will-change: transform;
  }
  .rail.up   { transform: translateY(0); }
  .rail.down { transform: translateY(101%); }
  .rail.dragging { transition: none; }

  .rail-head { flex-direction: column; gap: 8px; padding: 9px 16px 6px; }
  .rail-head .grip { width: 42px; height: 5px; border-radius: 5px; background: var(--line); }
  .sheet-title { display: none; }
  .rail-head .sheet-x {
    display: block; cursor: pointer; padding: 0;
    position: absolute; right: 11px; top: 29px;
    width: 34px; height: 34px; border-radius: 999px; border: 1px solid color-mix(in srgb, var(--brand) 22%, transparent);
    background: linear-gradient(160deg, color-mix(in srgb, var(--brand) 12%, var(--solid)), color-mix(in srgb, var(--brand) 5%, var(--surface)));
    color: var(--brand);
    box-shadow: 0 0 14px -6px rgba(99, 102, 241, .55), inset 0 1px 0 rgba(255, 255, 255, .45);
    transition: transform var(--d1) var(--e), color var(--d2), background var(--d2), border-color var(--d2), box-shadow var(--d2);
  }
  /* 绝对定位居中：不依赖 grid/flex，iOS Safari 上最稳 */
  .rail-head .sheet-x svg {
    display: block; position: absolute; left: 50%; top: 50%; margin: 0;
    transform: translate(-50%, -50%);
    transition: transform var(--d2) var(--e);
  }
  html[data-theme="night"] .rail-head .sheet-x { color: #a5b4fc; }
  html[data-theme="night"] .rail-head .sheet-x {
    box-shadow: 0 0 14px -6px rgba(99, 102, 241, .7), inset 0 1px 0 rgba(255, 255, 255, .08);
  }
  @media (hover: hover) {
    .rail-head .sheet-x:hover {
      color: var(--danger); border-color: color-mix(in srgb, var(--danger) 35%, transparent);
      background: color-mix(in srgb, var(--danger) 8%, var(--solid));
    }
    .rail-head .sheet-x:hover svg { transform: translate(-50%, -50%) rotate(90deg); }
  }
  .rail-head .sheet-x:active { transform: scale(.88); }
  .rail-head .logo { display: none; }

  .seg { margin: 4px 50px 0 12px; }
  .rail-body { padding: 14px 16px calc(24px + var(--safe-b)); gap: 16px; }
  .rail-foot { display: none; }

  .scrim {
    position: absolute; inset: 0; z-index: 35; background: rgba(8,12,22,.34);
    -webkit-backdrop-filter: blur(3px); backdrop-filter: blur(3px);
    animation: authFade .3s var(--e);
  }

  /* 面板展开时提示移到顶部，避免被面板遮住 */
  .shell.dim .toasts { bottom: auto; top: 12px; }

  .tabbar {
    display: flex; position: absolute; left: 12px; right: 12px; bottom: calc(10px + var(--safe-b));
    z-index: 30; height: 62px; padding: 5px; border-radius: 24px;
    background: color-mix(in srgb, var(--solid) 84%, transparent);
    -webkit-backdrop-filter: saturate(180%) blur(22px); backdrop-filter: saturate(180%) blur(22px);
    border: 1px solid var(--line); box-shadow: var(--sh-2);
    animation: riseIn .5s var(--e2) backwards .15s;
  }
  .tabbar button {
    position: relative; z-index: 1; flex: 1; border: 0; background: transparent; cursor: pointer;
    color: var(--muted); display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 2px;
    font-size: 10.5px; font-weight: 600; border-radius: 19px;
    transition: color var(--d2) var(--e);
  }
  .tabbar button svg { transition: transform var(--d3) var(--e2); }
  .tabbar button.on { color: var(--brand); }
  .tabbar button.on svg { transform: translateY(-2px) scale(1.14); }
  .tabbar button:active svg { transform: scale(.88); }
  .tab-pill { width: calc(25% - 5px); }

  /* 地图上的移动端主操作 */
  .mobar {
    display: flex; position: absolute; left: 12px; right: 12px; bottom: calc(82px + var(--safe-b));
    z-index: 13; gap: 10px; animation: riseIn .5s var(--e2) backwards .1s;
  }
  .mobar-main {
    flex: 1; height: 50px; border: 0; border-radius: 18px; cursor: pointer; color: #fff;
    font-size: 15px; font-weight: 680; display: inline-flex; align-items: center; justify-content: center; gap: 8px;
    background: var(--brand-grad); box-shadow: var(--glow);
    transition: transform var(--d1) var(--e), filter var(--d2);
  }
  .mobar-main.warn { background: linear-gradient(135deg, #f59e0b, #f97316); box-shadow: var(--glow-w); animation: applyglow 2.1s ease-in-out infinite; }
  .mobar-main:active { transform: scale(.972); }
  .mobar-side {
    width: 50px; height: 50px; flex: none; border-radius: 18px; cursor: pointer;
    border: 1px solid var(--line); color: var(--text-2); padding: 0;
    display: flex; align-items: center; justify-content: center;
    background: color-mix(in srgb, var(--solid) 84%, transparent);
    -webkit-backdrop-filter: blur(18px); backdrop-filter: blur(18px); box-shadow: var(--sh-1);
    transition: transform var(--d1) var(--e), color var(--d2);
  }
  .mobar-side:active { transform: scale(.92); }

  .readout { display: none; }
  .mapctl { bottom: calc(146px + var(--safe-b)); gap: 10px; }
  .hud { top: 12px; left: 12px; right: 12px; }
  .hud-pill { height: 48px; max-width: min(70%, 320px); }
  .maperr { top: 70px; }

  /* 指引做成底部抽屉 */
  .guide { align-items: flex-end; padding: 0; }
  .guide-card {
    max-width: none; border-radius: 28px 28px 0 0; padding: 18px 20px calc(22px + var(--safe-b));
    animation: sheetUp .46s var(--e2) backwards;
  }
  .guide-grip { display: block; width: 42px; height: 5px; margin: 0 auto 14px; border-radius: 5px; background: var(--line); }

  body { font-size: 15px; }
  .input { height: 46px; }
  .btn { height: 42px; }
  .btn-lg { height: 50px; }
}

@media (max-width: 420px) {
  .coord { grid-template-columns: 1fr; }
  .auth-card { padding: 24px 20px 20px; border-radius: var(--r-lg); }
  .quick { gap: 8px; }
  .qbtn { padding: 11px 4px; }
}

/* 桌面端：面板滚动条更轻 */
@media (min-width: 1024px) {
  .rail-body { padding-right: 13px; }
}

/* 涟漪容器：可点元素裁掉溢出的水波，避免在面板上糊出一圈 */
.qbtn, .li, .icon-btn, .hud-btn, .mapctl button, .mc-fab, .sheet-x, .seg button, .tabs button,
.tabbar button, .mobar-side, .ro-act, .link, .duo-ico { position: relative; overflow: hidden; }

/* 降级：不支持 backdrop-filter 时用实色，避免文字糊在底图上 */
@supports not ((backdrop-filter: blur(2px)) or (-webkit-backdrop-filter: blur(2px))) {
  .rail, .auth-card, .guide-card, .toast, .hud-pill, .hud-btn, .readout, .mc-group, .mc-fab,
  .maperr, .tabbar, .mobar-side { background: var(--solid); }
}

/* 尊重系统「减弱动态效果」 */
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: .001ms !important; animation-iteration-count: 1 !important;
    transition-duration: .001ms !important; scroll-behavior: auto !important;
  }
}

/* =====================================================================
   老内核兼容兜底 —— color-mix()
   ---------------------------------------------------------------------
   不支持 color-mix() 的浏览器（微信 X5/XWeb、UC、QQ 浏览器、Chromium
   低于 111 的机型）会把整条声明判为无效：玻璃容器背景直接消失，界面
   看上去「一片空白、像没加载出来」。这里用等效静态色补齐同一批规则，
   保证老内核下依然有底、有描边、文字可读。现代浏览器不受影响。
   ===================================================================== */
@supports not (color: color-mix(in srgb, #000, #fff)) {
  /* 玻璃容器 → 实体半透明底（描边/阴影沿用原规则，未用到 color-mix 的会保留） */
  .hud-pill   { background: rgba(255, 255, 255, .86); }
  .readout    { background: rgba(255, 255, 255, .90); }
  .mc-group,
  .mc-fab     { background: rgba(255, 255, 255, .90); }
  .tabbar     { background: rgba(255, 255, 255, .90); }
  .mobar-side { background: rgba(255, 255, 255, .90); }
  .toast      { background: rgba(255, 255, 255, .95); }
  .auth-card  { background: rgba(255, 255, 255, .94); }
  .guide-card { background: rgba(255, 255, 255, .95); }
  .maperr     { background: rgba(255, 255, 255, .95); }
  .auth       { background: rgba(226, 230, 245, .74); }

  /* 组合胶囊 + 抽屉关闭钮 */
  .duo       { border-color: rgba(99, 102, 241, .20); background: linear-gradient(165deg, #f3f4ff, #ffffff); }
  .duo-ico   { border-left-color: rgba(99, 102, 241, .14); }
  .duo-main:active, .duo-ico:active { background: rgba(99, 102, 241, .15); }
  .rail-head .sheet-x       { border-color: rgba(99, 102, 241, .22); background: linear-gradient(160deg, #eef0ff, #f8f9ff); }
  .rail-head .sheet-x:hover { background: #fdeef2; border-color: rgba(244, 63, 94, .35); }

  /* 语义状态块 */
  .chip.ok                { background: rgba(16, 185, 129, .14); }
  .chip.warn, .chip.wait  { background: rgba(245, 158, 11, .16); color: #b45309; }
  .chip.err               { background: rgba(244, 63, 94, .13); }
  .st2.ok                 { background: rgba(16, 185, 129, .10); border-color: rgba(16, 185, 129, .26); }
  .st2.ok .v              { color: #0f9d6f; }
  .st2.ok .dot            { box-shadow: 0 0 0 4px rgba(16, 185, 129, .18); }
  .st2.wait               { background: rgba(245, 158, 11, .12); border-color: rgba(245, 158, 11, .28); }
  .st2.wait .v            { color: #b45309; }
  .hint.warn              { background: rgba(245, 158, 11, .11); border-color: rgba(245, 158, 11, .30); }
  .hint.warn b            { color: #b45309; }
  .hint.ok                { background: rgba(16, 185, 129, .10); border-color: rgba(16, 185, 129, .26); }
  .err                    { background: rgba(244, 63, 94, .12); }

  /* 状态英雄卡：呼吸环 + 角落光斑 */
  .live.hero::before { background: radial-gradient(120% 90% at 0% 0%, var(--tone), transparent 62%); opacity: .14; }
  .live.hero.ok      { border-color: rgba(16, 185, 129, .34); }
  .live.hero.wait    { border-color: rgba(245, 158, 11, .34); }
  .live.hero.err     { border-color: rgba(244, 63, 94, .30); }
  .live .ring {
    background: conic-gradient(from 0deg, var(--tone), rgba(148, 163, 184, .25), var(--tone));
    box-shadow: 0 6px 18px -8px var(--tone);
  }
  .live .refresh:hover { background: rgba(148, 163, 184, .12); }

  /* 交互态 */
  .btn:hover        { border-color: rgba(99, 102, 241, .26); }
  .btn-danger       { border-color: rgba(244, 63, 94, .26); }
  .btn-danger:hover { background: rgba(244, 63, 94, .10); }
  .input:focus      { border-color: rgba(99, 102, 241, .55); }
  .icon-btn:hover   { border-color: rgba(99, 102, 241, .42); }
  .qbtn:hover       { border-color: rgba(99, 102, 241, .30); }
  .li:hover         { border-color: rgba(99, 102, 241, .30); }
  .li .del:hover    { background: rgba(244, 63, 94, .12); }
  .mc-fab:hover     { border-color: rgba(99, 102, 241, .40); }
  .spin-dot         { border-color: rgba(99, 102, 241, .24); border-top-color: var(--brand); }
  .ripple.on-surface { background: radial-gradient(circle, rgba(99, 102, 241, .30), transparent 70%); }
  .pin::after       { border-color: rgba(99, 102, 241, .55); }
  ::selection       { background: rgba(99, 102, 241, .26); }
  ::-webkit-scrollbar-thumb       { background: rgba(139, 147, 167, .40); }
  ::-webkit-scrollbar-thumb:hover { background: rgba(139, 147, 167, .65); }

  /* 夜间模式：容器换深色底 */
  html[data-theme="night"] .hud-pill,
  html[data-theme="night"] .readout,
  html[data-theme="night"] .mc-group,
  html[data-theme="night"] .mc-fab,
  html[data-theme="night"] .tabbar,
  html[data-theme="night"] .mobar-side { background: rgba(17, 23, 38, .90); }
  html[data-theme="night"] .toast,
  html[data-theme="night"] .maperr,
  html[data-theme="night"] .auth-card,
  html[data-theme="night"] .guide-card { background: rgba(17, 23, 38, .95); }
  html[data-theme="night"] .auth { background: rgba(5, 7, 13, .84); }
  html[data-theme="night"] .duo { background: linear-gradient(165deg, #171c30, #111726); }
  html[data-theme="night"] .rail-head .sheet-x { background: linear-gradient(160deg, #1c2138, #141a2b); }
  html[data-theme="night"] .chip.warn,
  html[data-theme="night"] .chip.wait,
  html[data-theme="night"] .st2.wait .v,
  html[data-theme="night"] .hint.warn b { color: #fbbf24; }
  html[data-theme="night"] .st2.ok .v { color: #34d399; }
  /* 老内核下 flex 间距（gap）也不可靠，给关键横排补 margin */
  html[data-theme="night"] .live .refresh { color: var(--tone); }
}