* { box-sizing: border-box; }
html, body, #app { height: 100%; margin: 0; }
body { font-family: 'Inter', system-ui, -apple-system, Segoe UI, Roboto, 'PingFang SC', 'Hiragino Sans GB', 'Microsoft YaHei', sans-serif; background: radial-gradient(1200px 700px at 70% 20%, #0a0f1e, #05070f 60%, #000 100%); color: #e7ecff; }
#canvas-container { position: absolute; inset: 0; }

.hud { position: fixed; top: 12px; left: 12px; right: 12px; display: flex; align-items: center; gap: 16px; backdrop-filter: blur(8px); background: linear-gradient(180deg, rgba(10,14,30,.55), rgba(10,14,30,.2)); border: 1px solid rgba(255,255,255,.06); border-radius: 12px; padding: 10px 14px; z-index: 10; }
.brand { font-weight: 700; letter-spacing: .3em; font-size: 14px; color: #8ab4ff; text-shadow: 0 0 12px rgba(138,180,255,.3); }
.controls { display: flex; align-items: center; gap: 12px; flex-wrap: wrap; }
.controls label { display: flex; align-items: center; gap: 6px; font-size: 12px; color: #bcd; }
.controls input, .controls select, .controls button { background: rgba(255,255,255,.04); border: 1px solid rgba(255,255,255,.08); color: #e7ecff; padding: 6px 8px; border-radius: 8px; font-size: 12px; outline: none; transition: .2s ease; }
.controls input:hover, .controls select:hover, .controls button:hover { background: rgba(255,255,255,.08); }
.controls button { cursor: pointer; }
.toggle { gap: 6px; }

.legend { position: fixed; left: 12px; right: 12px; bottom: 12px; display: flex; justify-content: space-between; align-items: center; gap: 16px; z-index: 10; }
.legend .scale { display: flex; align-items: center; gap: 8px; color: #9fb3ff; font-size: 12px; }
.legend .bar { width: 180px; height: 8px; background: linear-gradient(90deg, #fef5c4, #e0b264 30%, #2e3b7d 70%, #0a0f2c); border-radius: 999px; position: relative; overflow: hidden; box-shadow: 0 0 0 1px rgba(255,255,255,.06) inset; }
.legend .bar i { position: absolute; inset: 0; background: radial-gradient(120px 8px at 25% 50%, rgba(255,255,255,.25), transparent 60%); mix-blend-mode: screen; }
.legend .hint { color: #8aa2ff; opacity: .8; font-size: 12px; }

/* Subtle vignette */
#app::after { content: ""; position: fixed; inset: 0; pointer-events: none; background: radial-gradient(1200px 600px at 50% 50%, rgba(0,0,0,0), rgba(0,0,0,.25) 70%); }

/* Loaders or toasts could go here in future */

/* 错误叠层 */
#overlay { position: fixed; inset: 0; z-index: 999; display: none; align-items: center; justify-content: center; padding: 24px; background: rgba(0,0,0,.5); backdrop-filter: blur(4px); }
#overlay .card { max-width: 760px; width: 100%; border-radius: 12px; border: 1px solid rgba(255,255,255,.08); background: linear-gradient(180deg, rgba(13,18,36,.95), rgba(7,10,20,.92)); padding: 18px; color: #dfe7ff; box-shadow: 0 20px 80px rgba(0,0,0,.45); }
#overlay h2 { margin: 0 0 8px; font-size: 18px; color: #a7c1ff; letter-spacing: .02em; }
#overlay p { margin: 8px 0 12px; color: #b7c6ff; }
#overlay pre { margin: 0; padding: 12px; border-radius: 8px; background: rgba(0,0,0,.35); color: #a9ffea; max-height: 260px; overflow: auto; }
#overlay .actions { margin-top: 12px; display: flex; gap: 10px; justify-content: flex-end; }
#overlay button { background: rgba(255,255,255,.06); border: 1px solid rgba(255,255,255,.1); color: #e7ecff; padding: 6px 12px; border-radius: 8px; cursor: pointer; }
#overlay button:hover { background: rgba(255,255,255,.12); }

/* 悬停提示 */
#tooltip { position: fixed; z-index: 20; max-width: 320px; pointer-events: none; padding: 10px 12px; border-radius: 10px; border: 1px solid rgba(255,255,255,.1); background: rgba(12,18,36,.92); color: #eaf0ff; box-shadow: 0 12px 40px rgba(0,0,0,.35); font-size: 12px; line-height: 1.35; }
#tooltip a { color: #87b0ff; text-decoration: none; }
#tooltip a:hover { text-decoration: underline; }

/* 科普资料侧栏 */
#learn-panel { position: fixed; top: 72px; right: 12px; bottom: 12px; width: min(360px, 90vw); z-index: 9; padding: 14px 14px 16px; border-radius: 12px; border: 1px solid rgba(255,255,255,.08); background: linear-gradient(180deg, rgba(13,18,36,.9), rgba(7,10,20,.86)); box-shadow: 0 20px 80px rgba(0,0,0,.45); backdrop-filter: blur(6px); overflow: auto; transform: translateX(calc(100% + 16px)); transition: transform .28s ease; }
#learn-panel.open { transform: translateX(0); }
#learn-panel h3 { margin: 0 0 8px; font-size: 16px; color: #a7c1ff; letter-spacing: .02em; }
#learn-panel h4 { margin: 14px 0 8px; font-size: 13px; color: #b8c8ff; }
#learn-panel ul { list-style: none; padding: 0; margin: 0; display: grid; gap: 10px; }
#learn-panel li { padding: 10px; border: 1px solid rgba(255,255,255,.06); border-radius: 10px; background: rgba(255,255,255,.03); }
#learn-panel a { color: #91b4ff; text-decoration: none; font-weight: 600; }
#learn-panel a:hover { text-decoration: underline; }
#learn-panel p { margin: 4px 0 0; color: #c7d2ff; font-size: 12px; opacity: .9; }

@media (max-width: 720px){
	#learn-panel { top: 100px; }
}

/* 关于弹窗 */
#about-modal { position: fixed; inset: 0; z-index: 999; display: none; align-items: center; justify-content: center; padding: 24px; background: rgba(0,0,0,.5); backdrop-filter: blur(4px); }
#about-modal.open { display: flex; }
#about-modal .card { max-width: 720px; width: 100%; border-radius: 12px; border: 1px solid rgba(255,255,255,.08); background: linear-gradient(180deg, rgba(13,18,36,.95), rgba(7,10,20,.92)); padding: 16px; color: #dfe7ff; box-shadow: 0 20px 80px rgba(0,0,0,.45); }
#about-modal .card-head { display: flex; align-items: center; justify-content: space-between; gap: 10px; margin-bottom: 8px; }
#about-modal h3 { margin: 0; font-size: 18px; color: #a7c1ff; }
#about-modal .close { background: rgba(255,255,255,.06); border: 1px solid rgba(255,255,255,.1); color: #e7ecff; padding: 6px 10px; border-radius: 8px; cursor: pointer; }
#about-modal .close:hover { background: rgba(255,255,255,.12); }
#about-modal .card-body { font-size: 14px; color: #cfe1ff; }
#about-modal ul { margin: 8px 0 0 18px; }