/* 甜蜜航空 · 卡通设计基础：粗描边 + 硬投影 + 糖果色 */
:root {
  --ink: #2a2350;
  --ink-2: #4b4479;
  --ink-3: #8a84b3;
  --paper: #fffaf3;
  --pink: #ff6fa8;
  --pink-2: #ff9cc5;
  --pink-3: #ffe1ee;
  --mint: #2fc79c;
  --mint-2: #c9f6ea;
  --sky: #4aa8ff;
  --sky-2: #dff1ff;
  --lemon: #ffd65a;
  --lemon-2: #fff3c4;
  --orange: #ffa53d;
  --orange-2: #ffe6c7;
  --red: #ff5a5f;
  --red-2: #ffe0e1;
  --grape: #9b7bff;
  --grape-2: #ece5ff;
  --navy: #24346b;
  --line: 3px solid var(--ink);
  --shadow: 4px 4px 0 var(--ink);
  --shadow-lg: 7px 7px 0 var(--ink);
  --r: 18px;
  --font: "PingFang SC", "Hiragino Sans GB", "Microsoft YaHei", "Noto Sans CJK SC", system-ui, sans-serif;
  --mono: "SF Mono", "JetBrains Mono", Menlo, Consolas, monospace;
}

* { box-sizing: border-box; }
html, body { margin: 0; padding: 0; }
body {
  font-family: var(--font);
  color: var(--ink);
  background: var(--paper);
  -webkit-font-smoothing: antialiased;
  line-height: 1.55;
}
button, input, textarea, select { font: inherit; color: inherit; }
a { color: var(--sky); }
[hidden] { display: none !important; }
::selection { background: var(--pink-2); }

/* ── 天空背景与云 ── */
.sky-bg {
  position: fixed; inset: 0; z-index: -2; overflow: hidden;
  background:
    radial-gradient(1200px 600px at 85% -10%, #fff1b8 0%, transparent 60%),
    linear-gradient(180deg, #ffd3e6 0%, #ffe4ef 28%, #dceeff 70%, #cfe7ff 100%);
}
.sky-bg .cloud {
  position: absolute; width: 220px; opacity: .95;
  animation: drift linear infinite;
  filter: drop-shadow(0 6px 0 rgba(42, 35, 80, .08));
}
.sky-bg .cloud.c1 { top: 8%;  width: 200px; animation-duration: 95s;  animation-delay: -10s; }
.sky-bg .cloud.c2 { top: 22%; width: 140px; animation-duration: 120s; animation-delay: -70s; opacity: .8; }
.sky-bg .cloud.c3 { top: 58%; width: 260px; animation-duration: 140s; animation-delay: -40s; opacity: .7; }
.sky-bg .cloud.c4 { top: 78%; width: 160px; animation-duration: 105s; animation-delay: -95s; opacity: .85; }
.sky-bg .cloud.c5 { top: 40%; width: 110px; animation-duration: 85s;  animation-delay: -20s; opacity: .6; }
@keyframes drift { from { transform: translateX(-300px); } to { transform: translateX(calc(100vw + 300px)); } }
.sky-bg .flyby {
  position: absolute; top: 14%; left: -200px; width: 120px;
  animation: flyby 38s linear infinite; animation-delay: 6s;
}
@keyframes flyby {
  0% { transform: translate(0, 0) rotate(-4deg); }
  60% { transform: translate(calc(100vw + 400px), -60px) rotate(-8deg); }
  100% { transform: translate(calc(100vw + 400px), -60px) rotate(-8deg); }
}

/* ── 按钮 ── */
.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: .45em;
  padding: .62em 1.25em; border: var(--line); border-radius: 999px;
  background: #fff; box-shadow: var(--shadow); cursor: pointer;
  font-weight: 800; letter-spacing: .02em; white-space: nowrap;
  transition: transform .12s ease, box-shadow .12s ease, background .15s;
  user-select: none; text-decoration: none; color: var(--ink);
}
.btn:hover { transform: translate(-1px, -1px); box-shadow: 5px 5px 0 var(--ink); }
.btn:active { transform: translate(3px, 3px); box-shadow: 1px 1px 0 var(--ink); }
.btn:focus-visible { outline: 3px dashed var(--grape); outline-offset: 3px; }
.btn[disabled], .btn.is-busy { cursor: not-allowed; opacity: .55; transform: none; box-shadow: 2px 2px 0 var(--ink); }
.btn.pink { background: var(--pink); color: #fff; }
.btn.mint { background: var(--mint); color: #fff; }
.btn.lemon { background: var(--lemon); }
.btn.sky { background: var(--sky); color: #fff; }
.btn.red { background: var(--red); color: #fff; }
.btn.grape { background: var(--grape); color: #fff; }
.btn.ghost { background: transparent; box-shadow: none; border-color: transparent; }
.btn.ghost:hover { background: rgba(255, 255, 255, .6); border-color: var(--ink); box-shadow: 2px 2px 0 var(--ink); }
.btn.sm { padding: .32em .85em; font-size: .9em; box-shadow: 3px 3px 0 var(--ink); }
.btn.lg { padding: .8em 1.8em; font-size: 1.15em; }
.btn.block { width: 100%; }

/* ── 表单 ── */
.field { display: flex; flex-direction: column; gap: 6px; margin-bottom: 14px; }
.field > span { font-weight: 800; font-size: .95em; }
.field > span em { font-style: normal; color: var(--red); margin-left: 2px; }
.field small { color: var(--ink-3); }
.input, .textarea, .select {
  width: 100%; padding: .7em .95em; border: var(--line); border-radius: 14px;
  background: #fff; box-shadow: inset 0 -3px 0 rgba(42, 35, 80, .08); outline: none;
  transition: box-shadow .15s, border-color .15s;
}
.textarea { min-height: 140px; resize: vertical; line-height: 1.6; }
.input:focus, .textarea:focus, .select:focus { box-shadow: 0 0 0 4px var(--pink-3), inset 0 -3px 0 rgba(42, 35, 80, .08); }
.input.bad, .textarea.bad { border-color: var(--red); box-shadow: 0 0 0 4px var(--red-2); }

/* ── 卡片 ── */
.card {
  background: #fff; border: var(--line); border-radius: var(--r); box-shadow: var(--shadow-lg);
}
.panel { padding: 22px; }
.title { font-weight: 900; letter-spacing: .02em; margin: 0 0 12px; }

/* ── 状态戳 ── */
.stamp {
  display: inline-flex; align-items: center; gap: 4px; padding: 2px 12px; border: 2.5px solid var(--ink);
  border-radius: 999px; font-weight: 900; font-size: .85em; background: #fff; white-space: nowrap;
}
.stamp::before { content: ""; width: 8px; height: 8px; border-radius: 50%; background: currentColor; border: 2px solid var(--ink); }
.st-起飞 { --st: var(--orange); --st-2: var(--orange-2); }
.st-巡航 { --st: var(--sky); --st-2: var(--sky-2); }
.st-失事 { --st: var(--red); --st-2: var(--red-2); }
.st-降落 { --st: var(--mint); --st-2: var(--mint-2); }
.st-空闲 { --st: #9aa3b8; --st-2: #eef0f6; }
.stamp.st-起飞, .stamp.st-巡航, .stamp.st-失事, .stamp.st-降落, .stamp.st-空闲 { background: var(--st-2); color: var(--st); }
.stamp > b { color: var(--ink); }

/* ── 标签切换与筛选 ── */
.chips { display: flex; flex-wrap: wrap; gap: 8px; }
.chip {
  padding: .3em .95em; border: 2.5px solid var(--ink); border-radius: 999px; background: #fff;
  font-weight: 800; cursor: pointer; font-size: .92em; transition: transform .1s, background .15s;
}
.chip:hover { transform: translateY(-1px); }
.chip.on { background: var(--ink); color: #fff; }
.chip.st-起飞.on, .chip.st-巡航.on, .chip.st-失事.on, .chip.st-降落.on { background: var(--st); color: #fff; }
.tabs { display: inline-flex; gap: 6px; padding: 5px; border: var(--line); border-radius: 999px; background: #fff; box-shadow: var(--shadow); }
.tab { padding: .38em 1.1em; border-radius: 999px; border: 0; background: transparent; font-weight: 900; cursor: pointer; }
.tab.on { background: var(--pink); color: #fff; box-shadow: inset 0 -3px 0 rgba(0, 0, 0, .15); }

/* ── 弹窗 ── */
.modal {
  position: fixed; inset: 0; z-index: 50; display: flex; align-items: center; justify-content: center;
  padding: 20px; background: rgba(42, 35, 80, .45); backdrop-filter: blur(3px);
  animation: fade-in .18s ease;
}
.modal > .card { max-width: 100%; max-height: calc(100vh - 40px); overflow: auto; animation: pop-in .28s cubic-bezier(.2, 1.4, .4, 1); }
@keyframes fade-in { from { opacity: 0; } }
@keyframes pop-in { from { transform: scale(.85) translateY(20px); opacity: 0; } }
.modal-close {
  position: absolute; top: 14px; right: 14px; width: 40px; height: 40px; border-radius: 50%;
  border: var(--line); background: #fff; box-shadow: 3px 3px 0 var(--ink); font-size: 22px; font-weight: 900;
  cursor: pointer; line-height: 1; z-index: 2;
}

/* ── 侧边抽屉 ── */
.drawer {
  position: fixed; inset: 0; z-index: 40; display: flex; justify-content: flex-end;
  background: rgba(42, 35, 80, .35); animation: fade-in .15s ease;
}
.drawer > .sheet {
  width: min(760px, 100%); height: 100%; overflow: auto; background: var(--paper); border-left: var(--line);
  box-shadow: -8px 0 0 rgba(42, 35, 80, .15); animation: slide-in .26s cubic-bezier(.2, 1.1, .4, 1); position: relative;
}
@keyframes slide-in { from { transform: translateX(60px); opacity: 0; } }

/* ── 提示条 ── */
#toasts { position: fixed; top: 18px; left: 50%; transform: translateX(-50%); z-index: 100; display: flex; flex-direction: column; gap: 10px; align-items: center; pointer-events: none; }
.toast {
  padding: .65em 1.3em; border: var(--line); border-radius: 999px; background: #fff; box-shadow: var(--shadow);
  font-weight: 800; animation: toast-in .3s cubic-bezier(.2, 1.4, .4, 1); max-width: 90vw;
}
.toast.err { background: var(--red-2); }
.toast.ok { background: var(--mint-2); }
.toast.out { animation: toast-out .25s ease forwards; }
@keyframes toast-in { from { transform: translateY(-20px) scale(.9); opacity: 0; } }
@keyframes toast-out { to { transform: translateY(-14px); opacity: 0; } }

/* ── 大壮空姐 ── */
.dz { position: relative; display: flex; flex-direction: column; align-items: center; pointer-events: none; }
.dz img {
  display: block; height: 100%; width: auto; pointer-events: auto;
  filter: drop-shadow(6px 8px 0 rgba(42, 35, 80, .18));
  transform-origin: 50% 100%;
}
.dz img.hop { animation: dz-hop .5s cubic-bezier(.3, 1.6, .5, 1); }
@keyframes dz-hop { 0% { transform: translateY(0) scale(1, 1); } 30% { transform: translateY(-14px) scale(.97, 1.03); } 60% { transform: translateY(0) scale(1.03, .97); } 100% { transform: none; } }
.bubble {
  position: relative; padding: 14px 18px; border: var(--line); border-radius: 22px; background: #fff;
  box-shadow: var(--shadow); font-weight: 800; line-height: 1.5; pointer-events: auto;
  animation: bubble-in .35s cubic-bezier(.2, 1.5, .4, 1);
}
.bubble::after {
  content: ""; position: absolute; left: 50%; bottom: -16px; width: 22px; height: 22px; background: #fff;
  border-right: var(--line); border-bottom: var(--line); transform: translateX(-50%) rotate(45deg) skew(8deg, 8deg);
}
.bubble.alert { background: var(--red-2); }
.bubble.alert::after { background: var(--red-2); }
.bubble.good { background: var(--mint-2); }
.bubble.good::after { background: var(--mint-2); }
.bubble b.big { display: block; font-size: 1.7em; line-height: 1.25; }
@keyframes bubble-in { from { transform: scale(.7) translateY(10px); opacity: 0; } }

/* ── 航线图（客户端与塔台共用） ── */
#map { display: block; width: 100%; height: auto; border-radius: 20px; border: var(--line); background: #bfe3ff; }
#map .arc { fill: none; stroke: #6f86d8; stroke-width: 3; stroke-linecap: round; stroke-dasharray: 2 10; animation: dash 1s linear infinite; opacity: .85; }
#map .arc-takeoff { stroke: var(--orange); stroke-dasharray: 2 7; }
#map .arc-ours { stroke: var(--grape); stroke-width: 3.5; }
#map .arc-hot { stroke: var(--pink); stroke-width: 4.5; opacity: 1; }
@keyframes dash { to { stroke-dashoffset: -12; } }
#map .plane path { fill: #7cc7ff; stroke: var(--ink); stroke-width: 2.2; stroke-linejoin: round; }
#map .plane-ours path { fill: var(--grape); }
#map .plane-hot path { fill: var(--pink); }
#map .plane-halo { fill: transparent; }
#map .plane-takeoff .plane-halo { fill: rgba(255, 165, 61, .35); animation: halo 1.6s ease-out infinite; transform-origin: center; transform-box: fill-box; }
@keyframes halo { 0% { transform: scale(.4); opacity: 1; } 100% { transform: scale(1.5); opacity: 0; } }
#map .plane-bob { animation: bob 2.6s ease-in-out infinite; }
@keyframes bob { 50% { transform: translate(1.5px, -2.5px); } }
#map .airport { cursor: pointer; outline: none; }
#map .ap-shadow { fill: rgba(42, 35, 80, .16); }
#map .ap-ring { fill: #fff; stroke: var(--ink); stroke-width: 3.5; transition: fill .15s; }
#map .ap-core { fill: var(--lemon); stroke: var(--ink); stroke-width: 3; }
#map .ap-code { font: 900 11px var(--font); text-anchor: middle; fill: var(--ink); pointer-events: none; }
#map .ap-badge circle { fill: var(--mint); stroke: var(--ink); stroke-width: 2.5; }
#map .ap-badge text { font: 900 12px var(--font); text-anchor: middle; fill: #fff; }
#map .airport-empty .ap-badge circle { fill: #b8bfd3; }
#map .airport-empty .ap-core { fill: #e7e9f2; }
#map .ap-label rect { fill: #fff; stroke: var(--ink); stroke-width: 2.5; }
#map .ap-label text { font: 800 14px var(--font); text-anchor: middle; fill: var(--ink); }
#map .airport:hover .ap-ring, #map .airport:focus .ap-ring { fill: var(--pink-2); }
#map .airport:hover .ap-label rect, #map .airport:focus .ap-label rect { fill: var(--lemon-2); }
#map .deco { opacity: .9; }

/* ── 小工具 ── */
.muted { color: var(--ink-3); }
.mono { font-family: var(--mono); }
.row { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; }
.spacer { flex: 1; }
.pre { white-space: pre-wrap; word-break: break-word; }
.empty { text-align: center; padding: 40px 20px; color: var(--ink-3); font-weight: 800; }
.shake { animation: shake .45s cubic-bezier(.36, .07, .19, .97); }
@keyframes shake { 10%, 90% { transform: translateX(-2px); } 20%, 80% { transform: translateX(4px); } 30%, 50%, 70% { transform: translateX(-8px); } 40%, 60% { transform: translateX(8px); } }
.spin { display: inline-block; width: 1em; height: 1em; border: 3px solid currentColor; border-right-color: transparent; border-radius: 50%; animation: spin .7s linear infinite; vertical-align: -2px; }
@keyframes spin { to { transform: rotate(360deg); } }
.meter { height: 16px; border: 2.5px solid var(--ink); border-radius: 999px; background: #fff; overflow: hidden; }
.meter > i { display: block; height: 100%; background: repeating-linear-gradient(45deg, var(--mint), var(--mint) 8px, #5fe0bd 8px, #5fe0bd 16px); transition: width .3s; }
.meter.warn > i { background: repeating-linear-gradient(45deg, var(--orange), var(--orange) 8px, #ffbd70 8px, #ffbd70 16px); }
.meter.over > i { background: repeating-linear-gradient(45deg, var(--red), var(--red) 8px, #ff8a8d 8px, #ff8a8d 16px); }
.filelist { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 8px; }
.filelist li {
  display: grid; grid-template-columns: 1fr auto auto; align-items: center; gap: 10px; padding: 8px 12px;
  border: 2.5px solid var(--ink); border-radius: 14px; background: #fff;
}
.filelist .fname { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-weight: 700; }
.filelist .fbar { grid-column: 1 / -1; height: 6px; border-radius: 6px; background: var(--grape-2); overflow: hidden; }
.filelist .fbar > i { display: block; height: 100%; background: var(--grape); transition: width .2s; }
.filelist li.done .fbar > i { background: var(--mint); }
.filelist li.error { background: var(--red-2); }
.dl { display: inline-flex; align-items: center; gap: 6px; padding: 5px 12px; border: 2.5px solid var(--ink); border-radius: 12px; background: var(--sky-2); font-weight: 800; color: var(--ink); text-decoration: none; margin: 0 8px 8px 0; }
.dl:hover { background: #fff; }
.dl small { color: var(--ink-3); font-weight: 700; }
kbd, code { font-family: var(--mono); background: var(--grape-2); border: 2px solid var(--ink); border-radius: 8px; padding: 0 6px; font-size: .9em; }