:root{
  --gold:#d8a94e;
  --gold-dim:rgba(216,169,78,.28);
  --gold-faint:rgba(216,169,78,.12);
  --ink:#e8e2d4;
  --ink-dim:#9a937f;
  --panel:rgba(6,6,8,.86);
  --line:1px solid var(--gold-dim);
}
*{box-sizing:border-box;margin:0;padding:0}
html,body{width:100%;height:100%;overflow:hidden;background:#000;color:var(--ink);
  font-family:ui-monospace,SFMono-Regular,Menlo,Consolas,"Liberation Mono","Noto Sans Mono CJK SC","Microsoft YaHei",monospace;}
#cesiumContainer{position:fixed;inset:0}
#cesiumContainer .cesium-viewer-bottom{left:8px;right:auto;bottom:2px;opacity:.55;font-size:10px}

/* ---------- 通用 ---------- */
.ui{z-index:10}
.hidden{display:none!important}
button{font:inherit;color:var(--ink);background:transparent;border:1px solid var(--gold-dim);
  padding:7px 14px;letter-spacing:.12em;cursor:pointer;transition:all .18s;font-size:12px;white-space:nowrap}
button:hover{border-color:var(--gold);color:#fff;background:var(--gold-faint)}
button.on{background:var(--gold);color:#000;border-color:var(--gold)}

/* ---------- 加载 ---------- */
#loading{position:fixed;inset:0;z-index:100;background:#000;display:flex;flex-direction:column;
  align-items:center;justify-content:center;gap:14px}
.ld-title{font-size:34px;letter-spacing:.5em;text-indent:.5em;color:var(--ink)}
.ld-sub{font-size:12px;letter-spacing:.6em;text-indent:.6em;color:var(--ink-dim)}
.ld-bar{width:min(420px,70vw);height:2px;background:rgba(255,255,255,.08);margin-top:18px}
#ldFill{height:100%;width:0;background:var(--gold);transition:width .4s}
.ld-stage{font-size:11px;letter-spacing:.3em;color:var(--ink-dim)}
.ld-err{color:#e06c5b;max-width:70vw;text-align:center;line-height:1.8;font-size:13px}

/* ---------- 开场 ---------- */
#intro{position:fixed;inset:0;z-index:90;display:flex;align-items:center;justify-content:center;
  background:radial-gradient(ellipse at center,rgba(0,0,0,.25) 0%,rgba(0,0,0,.88) 75%)}
.in-inner{text-align:center;max-width:640px;padding:0 24px}
.in-kicker{font-size:11px;letter-spacing:.55em;text-indent:.55em;color:var(--gold);margin-bottom:22px}
#intro h1{font-size:64px;font-weight:400;letter-spacing:.35em;text-indent:.35em;margin-bottom:16px}
.in-sub{font-size:14px;letter-spacing:.25em;color:var(--ink-dim);margin-bottom:44px}
.in-hints{display:grid;grid-template-columns:repeat(4,1fr);gap:10px;margin-bottom:48px}
.in-hints>div{border:var(--line);padding:14px 6px;display:flex;flex-direction:column;gap:8px;background:rgba(0,0,0,.5)}
.in-hints b{font-size:15px;color:var(--gold);font-weight:400;letter-spacing:.2em}
.in-hints span{font-size:10px;color:var(--ink-dim);letter-spacing:.08em;line-height:1.7}
#btnEnter{font-size:15px;padding:14px 46px;letter-spacing:.3em}
.in-foot{margin-top:26px;font-size:11px;letter-spacing:.25em;color:var(--ink-dim)}

/* ---------- 顶栏 ---------- */
#topbar{position:fixed;top:0;left:0;right:0;height:58px;display:flex;align-items:center;gap:18px;
  padding:0 18px;background:linear-gradient(180deg,rgba(0,0,0,.85),rgba(0,0,0,.35) 80%,transparent);
  border-bottom:var(--line)}
.brand{font-size:16px;letter-spacing:.25em;color:var(--ink)}
.brand span{font-size:10px;color:var(--ink-dim);letter-spacing:.3em;margin-left:8px}
.topbtns{display:flex;gap:10px;margin-left:8px}
.searchwrap{margin-left:auto;position:relative}
#search{font:inherit;font-size:12px;color:var(--ink);background:rgba(0,0,0,.55);
  border:1px solid var(--gold-dim);padding:8px 12px;width:250px;letter-spacing:.06em;outline:none}
#search:focus{border-color:var(--gold)}
#suggest{position:absolute;top:110%;right:0;width:280px;background:var(--panel);
  border:var(--line);max-height:300px;overflow:auto}
#suggest div{padding:9px 12px;font-size:12px;letter-spacing:.06em;cursor:pointer;border-bottom:1px solid rgba(255,255,255,.05)}
#suggest div:hover{background:var(--gold-faint)}
#suggest div small{color:var(--ink-dim);margin-left:8px}

/* ---------- 信息卡 ---------- */
#infocard{position:fixed;left:18px;top:78px;width:330px;background:var(--panel);
  border:var(--line);padding:22px;backdrop-filter:blur(6px)}
#cardClose{position:absolute;top:8px;right:8px;border:none;padding:4px 8px;font-size:12px}
.card-year{font-size:26px;color:var(--gold);letter-spacing:.15em;margin-bottom:10px}
.card-title{font-size:19px;letter-spacing:.12em;margin-bottom:6px;line-height:1.5}
.card-en{font-size:11px;color:var(--ink-dim);letter-spacing:.18em;margin-bottom:14px}
.card-desc{font-size:13px;line-height:2;color:var(--ink);letter-spacing:.04em;margin-bottom:14px}
.card-coord{font-size:11px;color:var(--gold);letter-spacing:.12em;border-top:var(--line);padding-top:12px}

/* ---------- 数据状态 ---------- */
#statusline{position:fixed;left:18px;bottom:162px;font-size:10px;letter-spacing:.14em;
  color:var(--ink-dim);background:rgba(0,0,0,.55);padding:6px 10px;border:1px solid rgba(255,255,255,.07)}
#statusline #utc{color:var(--gold);margin-left:12px}

/* ---------- 时间轴 ---------- */
#timeline{position:fixed;left:0;right:0;bottom:0;height:148px;display:flex;align-items:stretch;
  background:var(--panel);border-top:var(--line);backdrop-filter:blur(8px)}
.tl-left{width:230px;padding:18px 20px;border-right:var(--line);display:flex;flex-direction:column;justify-content:center;gap:6px}
#yearReadout{font-size:30px;color:var(--gold);letter-spacing:.1em}
.tl-title{font-size:12px;letter-spacing:.2em}
.tl-hint{font-size:10px;color:var(--ink-dim);letter-spacing:.12em}
#track{position:relative;flex:1;margin:26px 10px 40px;cursor:ew-resize}
#track::before{content:"";position:absolute;left:0;right:0;top:50%;height:1px;background:rgba(216,169,78,.35)}
#ticks{position:absolute;inset:0;pointer-events:none}
.tick{position:absolute;top:50%;transform:translate(-50%,-50%);font-size:9px;color:var(--ink-dim);letter-spacing:.1em}
.tick i{display:block;width:1px;height:14px;background:var(--gold-dim);margin:0 auto 4px}
#dots{position:absolute;inset:0}
.dot{position:absolute;top:50%;width:9px;height:9px;border-radius:50%;background:var(--gold);
  transform:translate(-50%,-50%);cursor:pointer;transition:transform .15s,background .15s;box-shadow:0 0 8px rgba(216,169,78,.7)}
.dot:hover{transform:translate(-50%,-50%) scale(1.7)}
.dot.sel{background:#fff;box-shadow:0 0 12px #fff;transform:translate(-50%,-50%) scale(1.5)}
.dot.dim{opacity:.18;box-shadow:none}
#scrubber{position:absolute;top:-8px;bottom:-8px;width:2px;background:#fff;opacity:.85;
  transform:translateX(-50%);pointer-events:none;box-shadow:0 0 10px rgba(255,255,255,.6)}
.tl-right{width:210px;border-left:var(--line);display:flex;align-items:center;justify-content:center;padding:0 18px}
#btnTour{font-size:12px;padding:12px 16px}

/* ---------- 沉浸 ---------- */
body.immersive .ui{display:none!important}
#exitImmersive{position:fixed;bottom:26px;left:50%;transform:translateX(-50%);z-index:50;
  background:rgba(0,0,0,.6)}

@media (max-width:900px){
  .in-hints{grid-template-columns:repeat(2,1fr)}
  #intro h1{font-size:40px}
  .tl-left{width:150px;padding:12px}
  #yearReadout{font-size:22px}
  .tl-right{width:150px}
  #search{width:150px}
  #infocard{width:calc(100vw - 36px)}
}

/* ---- 搜索无结果提示 ---- */
#suggest .no-result {
  padding: 10px 12px; color: rgba(255,255,255,.55); font-size: 13px;
  letter-spacing: .05em; cursor: default;
}

/* ---- 搜索无结果提示 ---- */
#suggest .no-result {
  padding: 10px 12px; color: rgba(255,255,255,.55); font-size: 13px;
  letter-spacing: .05em; cursor: default;
}