/* ============================================================
   华夏舆图 · 玄夜设计系统（深色玻璃拟态）
   ============================================================ */
:root{
  --primary:#F0603F; --primary-hover:#FF7A5C; --primary-deep:#C8402A;
  --bg:#0E1320; --surface:rgba(21,27,41,.78); --surface-2:rgba(30,38,56,.92);
  --border:rgba(255,255,255,.08); --border-strong:rgba(255,255,255,.17);
  --text:#EAE6DA; --text-sub:#A9A395; --text-faint:#6F6B60;
  --ink:#F5F0E2;
  --dai:#5FB6D9; --gold:#E8B45A;
  --shadow-sm:0 2px 8px rgba(0,0,0,.35);
  --shadow-md:0 8px 24px rgba(0,0,0,.45);
  --shadow-lg:0 24px 60px rgba(0,0,0,.55);
  --r-sm:8px; --r-md:12px; --r-lg:16px;
  --font-display:"Noto Serif SC","Songti SC","STSong","SimSun",serif;
  --font-body:"Noto Sans SC","PingFang SC","Microsoft YaHei",sans-serif;
  --glass:blur(16px) saturate(1.25);
}

*{box-sizing:border-box;margin:0;padding:0}
html,body{height:100%}
body{
  font-family:var(--font-body);
  font-size:14px; color:var(--text); line-height:1.55; color-scheme:dark;
  background:
    radial-gradient(1100px 520px at 88% -8%, rgba(240,96,63,.10), transparent 60%),
    radial-gradient(900px 480px at -8% 108%, rgba(95,182,217,.08), transparent 55%),
    radial-gradient(closest-side at 50% 50%, transparent 55%, rgba(0,0,0,.5)),
    repeating-linear-gradient(0deg, rgba(255,255,255,.014) 0 1px, transparent 1px 3px),
    var(--bg);
}
::selection{background:rgba(240,96,63,.35)}
::-webkit-scrollbar{width:8px;height:8px}
::-webkit-scrollbar-thumb{background:rgba(255,255,255,.14);border-radius:4px}
::-webkit-scrollbar-track{background:transparent}

.app{height:100vh;height:100dvh;display:grid;grid-template-rows:64px 1fr 152px;overflow:hidden}
@media (max-height:700px){.app{grid-template-rows:60px 1fr 130px}}

@keyframes rise{from{opacity:0;transform:translateY(14px)}to{opacity:1;transform:none}}
.reveal{animation:rise .5s cubic-bezier(.22,.8,.3,1) both}
.topbar.reveal{animation-delay:.05s}
.map-wrap.reveal{animation-delay:.17s}
.side.reveal{animation-delay:.29s}
.timeline.reveal{animation-delay:.41s}

.ic{width:18px;height:18px;fill:none;stroke:currentColor;stroke-width:2;stroke-linecap:round;stroke-linejoin:round;flex:none}

/* ============================================================
   顶栏
   ============================================================ */
.topbar{
  display:flex;align-items:center;gap:20px;padding:0 18px;
  background:rgba(15,19,32,.85);backdrop-filter:var(--glass);
  border-bottom:1px solid var(--border);
  position:relative;z-index:30;
}
.topbar::after{content:"";position:absolute;left:0;right:0;bottom:-1px;height:2px;
  background:linear-gradient(90deg,transparent,var(--primary) 18%,var(--gold) 50%,var(--primary) 82%,transparent);opacity:.75}
.brand{display:flex;align-items:baseline;gap:10px;min-width:0}
.brand h1{
  font-family:var(--font-display);font-size:24px;font-weight:700;letter-spacing:4px;white-space:nowrap;
  background:linear-gradient(120deg,#F5EFD8 30%,var(--gold) 70%,var(--primary));-webkit-background-clip:text;background-clip:text;color:transparent;
}
.brand-sub{font-size:12px;color:var(--text-sub);letter-spacing:1px;white-space:nowrap}
.country-crumb{display:flex;align-items:center;gap:8px;padding:4px 12px;border:1px solid var(--border);border-radius:999px;background:var(--surface-2)}
.country-crumb.hidden{display:none}
.crumb-dot{width:12px;height:12px;border-radius:3px;flex:none;box-shadow:0 0 8px currentColor}
#crumbName{font-family:var(--font-display);font-size:16px}
.crumb-span{font-size:12px;color:var(--text-sub);white-space:nowrap}

.yearbox{display:flex;align-items:center;gap:6px;margin-left:auto;padding:4px 10px;border:1px solid var(--border);border-radius:var(--r-md);background:var(--surface)}
.year-display{display:flex;flex-direction:column;align-items:center;min-width:118px;line-height:1.15}
.year-display strong{font-family:var(--font-display);font-size:22px;color:var(--primary);letter-spacing:1px;text-shadow:0 0 18px rgba(240,96,63,.45)}
.year-display span{font-size:12px;color:var(--text-sub);font-family:var(--font-display)}

.controls{display:flex;align-items:center;gap:10px}
.ctl{display:flex;align-items:center;gap:6px;font-size:12px;color:var(--text-sub)}
.ctl > span{white-space:nowrap}
input[type=number],select{
  font-family:var(--font-body);font-size:13px;color:var(--text);
  background:rgba(255,255,255,.05);border:1px solid var(--border);border-radius:var(--r-sm);
  padding:5px 8px;outline:none;transition:border-color .16s, box-shadow .16s;
}
input[type=number]{width:86px}
select{cursor:pointer}
select option{background:#161C2B;color:var(--text)}
input[type=number]:focus,select:focus{border-color:var(--primary);box-shadow:0 0 0 3px rgba(240,96,63,.22)}

.btn{
  display:inline-flex;align-items:center;gap:6px;
  font-family:var(--font-body);font-size:14px;letter-spacing:2px;
  border-radius:var(--r-sm);padding:7px 16px;cursor:pointer;border:1px solid transparent;
  transition:background .16s, transform .1s, box-shadow .16s;
}
.btn:active{transform:translateY(1px)}
.btn:focus-visible,.icon-btn:focus-visible{outline:2px solid var(--primary);outline-offset:2px}
.btn.primary{background:linear-gradient(135deg,var(--primary),var(--primary-deep));color:#FFF6EC;box-shadow:0 4px 16px rgba(240,96,63,.35)}
.btn.primary:hover{box-shadow:0 6px 22px rgba(240,96,63,.5)}
.btn.ghost{border-color:var(--border);background:rgba(255,255,255,.04);color:var(--text)}
.btn.ghost:hover{border-color:var(--border-strong);background:rgba(255,255,255,.08)}
.icon-btn{
  width:34px;height:34px;display:inline-flex;align-items:center;justify-content:center;
  border-radius:var(--r-sm);cursor:pointer;border:1px solid transparent;background:transparent;color:var(--text-sub);
  transition:background .16s,color .16s;
}
.icon-btn:hover{background:rgba(240,96,63,.14);color:var(--primary-hover)}
.icon-btn.ghost{border-color:var(--border);background:rgba(255,255,255,.04)}
.icon-btn:disabled,.btn:disabled{opacity:.32;pointer-events:none}

/* ============================================================
   主区
   ============================================================ */
.stage{display:grid;grid-template-columns:1fr 362px;min-height:0}
@media (max-width:1024px){.stage{grid-template-columns:1fr 320px}}

/* ---------- 地图 ---------- */
.map-wrap{
  position:relative;min-width:0;min-height:0;overflow:hidden;
  background:
    radial-gradient(900px 460px at 72% 18%, rgba(95,182,217,.06), transparent 60%),
    radial-gradient(700px 420px at 20% 85%, rgba(240,96,63,.05), transparent 55%),
    #0B101B;
  border-right:1px solid var(--border);
}
#map{width:100%;height:100%;display:block}

.map-credit{
  position:absolute;top:12px;left:16px;display:flex;align-items:baseline;gap:10px;
  font-family:var(--font-display);pointer-events:none;z-index:6;
}
.map-credit .yr{font-size:30px;font-weight:700;color:var(--ink);letter-spacing:2px;text-shadow:0 2px 12px rgba(0,0,0,.6)}
.map-credit .era{font-size:16px;letter-spacing:4px;color:var(--primary-hover)}
.map-credit .hint{font-family:var(--font-body);font-size:11px;color:var(--text-faint);letter-spacing:1px}

/* ---------- 左侧详情卡片 ---------- */
.map-side-panel{
  position:absolute;left:14px;top:60px;width:308px;max-height:calc(100% - 210px);
  display:flex;flex-direction:column;z-index:10;
  background:rgba(22,28,44,.92);backdrop-filter:var(--glass);
  border:1px solid var(--border-strong);border-radius:var(--r-md);
  box-shadow:var(--shadow-lg);overflow:hidden;
  animation:slideIn .24s cubic-bezier(.22,.8,.3,1) both;
}
@keyframes slideIn{from{opacity:0;transform:translateX(-16px)}to{opacity:1;transform:none}}
.map-side-panel.hidden{display:none}
.sdp-head{display:flex;align-items:center;gap:8px;padding:12px 12px 8px 14px;border-bottom:1px dashed var(--border)}
.sdp-head strong{font-family:var(--font-display);font-size:17px;letter-spacing:1px;color:var(--ink);flex:1;min-width:0;line-height:1.35}
.sdp-close{width:28px;height:28px;flex:none}
.sdp-meta{padding:8px 14px 0;font-size:12.5px;color:var(--text-sub);display:flex;align-items:center;flex-wrap:wrap;gap:4px}
.sdp-year{font-family:var(--font-display);font-weight:700;color:var(--primary-hover);letter-spacing:.5px}
.sdp-link{
  border:none;background:none;color:var(--dai);cursor:pointer;font-size:12.5px;
  text-decoration:underline dotted var(--border-strong);text-underline-offset:3px;padding:0;
  font-family:var(--font-body);
}
.sdp-link:hover{color:var(--primary-hover)}
.sdp-desc{padding:8px 14px 4px;font-size:13.5px;color:var(--text-sub);line-height:1.85}
.sdp-extra{padding:6px 8px 10px;overflow-y:auto;min-height:0}
.sdp-sub{
  display:flex;align-items:center;gap:6px;padding:6px 6px 4px;
  font-family:var(--font-display);font-size:12.5px;letter-spacing:2px;color:var(--dai);
}
.sdp-list{list-style:none;display:flex;flex-direction:column}
.sdp-list li{
  display:flex;align-items:center;gap:8px;padding:6px 6px;border-radius:var(--r-sm);
  cursor:pointer;font-size:13px;color:var(--text);transition:background .15s;
}
.sdp-list li:hover{background:rgba(240,96,63,.14)}
.sdp-dot{width:8px;height:8px;border-radius:2px;flex:none}
.sdp-ev-year{font-family:var(--font-display);font-weight:700;color:var(--primary-hover);font-size:12px;flex:none}
.sdp-empty{padding:6px;font-size:12px;color:var(--text-faint)}

.map-legend{
  position:absolute;left:14px;bottom:14px;max-width:60%;display:flex;flex-wrap:wrap;gap:6px;
  padding:10px 12px;border:1px solid var(--border);border-radius:var(--r-md);
  background:rgba(18,24,38,.85);backdrop-filter:var(--glass);box-shadow:var(--shadow-sm);
}
.map-legend:empty{display:none}
.lg-item{display:inline-flex;align-items:center;gap:6px;font-size:12px;padding:3px 9px 3px 6px;
  border-radius:999px;border:1px solid var(--border);background:rgba(255,255,255,.05);cursor:pointer;
  transition:border-color .16s,transform .12s;color:var(--text)}
.lg-item:hover{border-color:var(--primary);transform:translateY(-1px)}
.lg-swatch{width:11px;height:11px;border-radius:3px;border:1px solid rgba(255,255,255,.25);flex:none}

.map-tools{position:absolute;right:14px;bottom:14px;display:flex;flex-direction:column;gap:6px;z-index:6}
.map-tools .icon-btn{background:rgba(18,24,38,.88);backdrop-filter:var(--glass);border-color:var(--border)}

/* ---------- 侧栏 ---------- */
.side{display:flex;flex-direction:column;gap:12px;padding:12px;min-height:0;overflow:hidden;background:var(--bg)}
.panel{
  display:flex;flex-direction:column;min-height:0;
  background:var(--surface);backdrop-filter:var(--glass);
  border:1px solid var(--border);border-radius:var(--r-md);
  box-shadow:var(--shadow-sm);
}
.panel.grow{flex:1}
.panel-head{
  display:flex;align-items:center;gap:8px;padding:10px 14px 8px;
  border-bottom:1px dashed var(--border);color:var(--dai);
}
.panel-head .ic{width:16px;height:16px;color:var(--gold)}
.panel-head h2{font-family:var(--font-display);font-size:16px;letter-spacing:3px;color:var(--ink)}
.panel-sub{margin-left:auto;font-size:11px;color:var(--text-faint)}

.list{list-style:none;overflow-y:auto;min-height:0;padding:6px 8px 10px}
.list li{
  position:relative;display:flex;flex-direction:column;gap:2px;
  padding:7px 10px 7px 16px;border-radius:var(--r-sm);cursor:pointer;
  transition:background .15s, transform .12s;
}
.list li:hover{background:rgba(240,96,63,.10);transform:translateX(1px)}
.list li::before{content:"";position:absolute;left:6px;top:12px;bottom:12px;width:4px;border-radius:2px;background:var(--bar,#555);box-shadow:0 0 6px var(--bar)}
.list li.current::before{background:var(--primary);top:8px;bottom:8px}
.li-top{display:flex;align-items:baseline;gap:8px}
.li-name{font-family:var(--font-display);font-size:15px;font-weight:700;letter-spacing:1px;color:var(--ink)}
.li-span{margin-left:auto;font-size:11px;color:var(--text-faint);white-space:nowrap}
.li-sub{font-size:12px;color:var(--text-sub);display:flex;align-items:center;gap:5px}
.li-sub .ic{width:12px;height:12px;color:var(--gold)}

.rulers li{padding-top:5px;padding-bottom:5px}
li.ruler-current{background:rgba(240,96,63,.12)}
li.ruler-selected{background:rgba(240,96,63,.18);outline:1px solid rgba(240,96,63,.45)}

.country-brief{padding:10px 14px 2px;font-size:13px;color:var(--text-sub);line-height:1.7}
.subhead{
  display:flex;align-items:center;gap:6px;padding:10px 14px 4px;
  font-family:var(--font-display);font-size:13px;letter-spacing:2px;color:var(--dai);
}
.subhead .ic{width:14px;height:14px;color:var(--gold)}
.subhead-tip{margin-left:auto;font-family:var(--font-body);font-size:11px;color:var(--text-faint);letter-spacing:0}

.events li{padding-left:14px}
.events li::before{top:14px;bottom:14px;width:3px;box-shadow:none}
.ev-top{display:flex;align-items:center;gap:8px}
.ev-year{font-family:var(--font-display);font-weight:700;font-size:13px;color:var(--primary-hover);white-space:nowrap}
.ev-title{font-size:13.5px;color:var(--text);overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.ev-desc{font-size:12px;color:var(--text-sub);display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden}
.chip{display:inline-flex;align-items:center;font-size:11px;line-height:1;padding:4px 7px;border-radius:999px;color:#fff;letter-spacing:1px;flex:none;box-shadow:0 0 10px -2px currentColor}

.empty{padding:14px;text-align:center;font-size:12.5px;color:var(--text-faint)}
.hidden{display:none !important}

/* ============================================================
   时间轴
   ============================================================ */
.timeline{
  position:relative;border-top:1px solid var(--border);
  background:rgba(13,17,28,.9);backdrop-filter:var(--glass);
  padding:6px 16px 8px;
}
.tl-body{position:relative;height:100%;cursor:crosshair;user-select:none;touch-action:none}
.tl-playhead{
  position:absolute;top:0;bottom:0;width:2px;margin-left:-1px;
  background:linear-gradient(180deg,var(--primary),rgba(240,96,63,.25));z-index:6;pointer-events:none;
  box-shadow:0 0 10px rgba(240,96,63,.7);
}
.tl-grab{
  position:absolute;top:-1px;left:50%;transform:translateX(-50%);
  width:14px;height:14px;border-radius:50%;background:var(--primary);
  border:3px solid #141A28;box-shadow:0 0 12px rgba(240,96,63,.8);
}
.tl-markers{position:absolute;left:0;right:0;top:0;height:44px}
.tl-marker{
  position:absolute;bottom:2px;transform:translateX(-50%);
  width:14px;height:14px;border:none;background:transparent;padding:0;cursor:pointer;z-index:4;
}
.tl-marker::before{
  content:"";position:absolute;left:50%;top:50%;transform:translate(-50%,-50%) rotate(45deg);
  width:7px;height:7px;background:var(--mc,var(--primary));border:1px solid rgba(0,0,0,.5);
  box-shadow:0 0 6px var(--mc,var(--primary));
  transition:transform .15s;
}
.tl-marker.imp2::before{width:5px;height:5px}
.tl-marker.imp1::before{width:3.5px;height:3.5px;transform:translate(-50%,-50%) rotate(45deg)}
.tl-marker:hover::before{transform:translate(-50%,-50%) rotate(45deg) scale(1.7)}
.tl-marker:focus-visible{outline:2px solid var(--primary);outline-offset:2px}
.tl-marker::after{content:"";position:absolute;left:50%;bottom:-4px;width:1px;height:6px;background:rgba(255,255,255,.2)}

.tl-bands{position:absolute;left:0;right:0;top:46px;height:46px}
.tl-bands2{position:absolute;left:0;right:0;top:96px;height:22px}
.tl-band{
  position:absolute;top:0;bottom:0;border-radius:4px;overflow:hidden;cursor:pointer;
  border:1px solid rgba(0,0,0,.4);border-top:none;border-bottom:none;
  transition:filter .15s, box-shadow .15s;
}
.tl-band:first-child{border-radius:4px 0 0 4px}
.tl-band:last-child{border-radius:0 4px 4px 0}
.tl-band:hover{filter:brightness(1.25)}
.tl-band .band-label{
  position:absolute;inset:0;display:flex;align-items:center;justify-content:center;
  font-family:var(--font-display);font-weight:700;font-size:13px;letter-spacing:3px;color:rgba(14,17,26,.88);
  text-shadow:0 1px 0 rgba(255,255,255,.25);
  pointer-events:none;white-space:nowrap;
}
.tl-band.active{box-shadow:inset 0 0 0 2px var(--primary), 0 0 18px rgba(240,96,63,.35)}
.tl-bands2 .tl-band{border:none;border-radius:3px;opacity:.9;background:rgba(255,255,255,.09) !important}
.tl-bands2 .band-label{font-size:10.5px;letter-spacing:2px;color:var(--text-sub);font-weight:400;text-shadow:none}

.tl-axis{position:absolute;left:0;right:0;bottom:0;height:14px}
.tl-tick{position:absolute;bottom:0;transform:translateX(-50%);font-size:10.5px;color:var(--text-faint);letter-spacing:.5px;font-variant-numeric:tabular-nums;pointer-events:none}
.tl-tick::before{content:"";position:absolute;left:50%;top:-7px;width:1px;height:5px;background:var(--border-strong)}

/* ============================================================
   弹窗 / toast
   ============================================================ */
.modal-mask{
  position:fixed;inset:0;z-index:100;display:flex;align-items:center;justify-content:center;
  background:rgba(4,7,14,.66);backdrop-filter:blur(4px);animation:fade .18s ease both;padding:24px;
}
@keyframes fade{from{opacity:0}to{opacity:1}}
.modal{
  position:relative;width:min(520px,100%);max-height:80vh;overflow-y:auto;
  background:var(--surface-2);backdrop-filter:var(--glass);
  border:1px solid var(--border-strong);border-radius:var(--r-lg);
  box-shadow:var(--shadow-lg);padding:26px 28px 22px;
  animation:rise .28s cubic-bezier(.22,.8,.3,1) both;
}
.modal h3{font-family:var(--font-display);font-size:22px;letter-spacing:2px;color:var(--ink);margin:6px 0 10px;padding-right:30px}
.modal p{font-size:14px;color:var(--text-sub);line-height:1.8}
.modal-close{position:absolute;top:12px;right:12px}
.help-list{list-style:none;display:flex;flex-direction:column;gap:9px;font-size:13.5px;color:var(--text-sub);line-height:1.7}
.help-list b{color:var(--primary-hover);font-weight:600}

.toast{
  position:fixed;left:50%;bottom:170px;transform:translateX(-50%);z-index:120;
  padding:9px 20px;border-radius:999px;background:rgba(240,96,63,.92);color:#FFF6EC;
  font-size:13px;letter-spacing:1px;box-shadow:0 10px 30px rgba(240,96,63,.4);
  animation:rise .25s ease both;pointer-events:none;max-width:70vw;text-align:center;
}

/* ============================================================
   响应式
   ============================================================ */
@media (max-width:1024px){
  .stage{grid-template-columns:1fr 300px}
  .controls .ctl span{display:none}
  .brand-sub{display:none}
  .year-display{min-width:100px}
  .map-side-panel{width:264px}
}
@media (max-width:860px){
  .app{grid-template-rows:auto 1fr 132px}
  .topbar{flex-wrap:wrap;row-gap:8px;padding:10px 14px;height:auto}
  .yearbox{margin-left:0;order:3}
  .controls{order:2}
  .stage{grid-template-columns:1fr;grid-template-rows:minmax(260px,42%) 1fr}
  .map-wrap{border-right:none;border-bottom:1px solid var(--border)}
  .side{padding:8px;gap:8px}
  .map-credit .yr{font-size:22px}
  .map-credit .hint{display:none}
  .map-legend{max-width:80%}
  .map-side-panel{left:8px;right:8px;width:auto;top:auto;bottom:8px;max-height:56%}
}