:root{
  --bg:#0c0f0e;--panel:rgba(14,17,16,.94);--panel2:#151a18;--line:#2c3430;--line2:#3d4741;
  --ink:#e8ebe6;--ink2:#a9b0a8;--ink3:#6f786f;--acc:#ef6338;--ua:#3b82f6;--ru:#e5483b;--gold:#d8b25a;
  --mono:"DM Mono",ui-monospace,Menlo,monospace;--sans:"Noto Sans SC","Inter",system-ui,sans-serif;
}
*{box-sizing:border-box}
html,body{margin:0;height:100%;background:var(--bg);color:var(--ink);font:13px/1.6 var(--sans);overflow:hidden}
button{font:inherit;color:inherit;background:none;border:0;cursor:pointer}
a{color:#9cc4ff}
.app{position:fixed;inset:0;display:grid;grid-template-rows:52px 1fr auto;grid-template-columns:1fr 380px}
.top{grid-column:1/3;display:flex;align-items:center;gap:18px;padding:0 16px;border-bottom:1px solid var(--line);background:#0e1211;z-index:1000}
.brand{display:flex;align-items:center;gap:10px;font:600 13px var(--mono);letter-spacing:.12em;color:var(--ink);text-decoration:none;white-space:nowrap}
.brand i{color:var(--acc);font-style:normal}
.top h1{margin:0;font-size:16px;font-weight:700;white-space:nowrap}
.top h1 small{font:11px var(--mono);color:var(--ink3);margin-left:8px;letter-spacing:.05em}
.top .date{margin-left:auto;text-align:right;line-height:1.15}
.top .date b{display:block;font:600 20px var(--mono);letter-spacing:.02em}
.top .date small{color:var(--ink3);font:11px var(--mono)}
.crumb{color:var(--ink2);text-decoration:none;font-size:12px;border:1px solid var(--line2);padding:4px 10px;white-space:nowrap}
.crumb:hover{border-color:var(--acc);color:var(--ink)}

.mapwrap{position:relative;grid-row:2;grid-column:1;min-height:0}
#map{position:absolute;inset:0;background:#0a0d0c}
.side{grid-row:2/4;grid-column:2;border-left:1px solid var(--line);background:var(--panel2);overflow-y:auto;overflow-x:hidden;min-height:0}
.side::-webkit-scrollbar{width:6px}.side::-webkit-scrollbar-thumb{background:#333b37}

/* 时间轴 */
.tl{grid-row:3;grid-column:1;border-top:1px solid var(--line);background:#0e1211;padding:10px 16px 12px;user-select:none;position:relative;z-index:900}
.tl-row{display:flex;align-items:center;gap:10px}
.tl .btn{border:1px solid var(--line2);padding:5px 11px;font:12px var(--mono);white-space:nowrap}
.tl .btn:hover{border-color:var(--acc)}
.tl .btn.play{background:var(--acc);border-color:var(--acc);color:#fff;min-width:84px;font-weight:600}
.tl .speed{display:flex;border:1px solid var(--line2)}
.tl .speed button{padding:5px 9px;font:11px var(--mono);color:var(--ink3)}
.tl .speed button.on{background:#2a312d;color:var(--ink)}
.track{position:relative;flex:1;height:46px;cursor:pointer}
.track .rail{position:absolute;left:0;right:0;top:25px;height:4px;background:#252c28}
.track .fill{position:absolute;left:0;top:25px;height:4px;background:var(--acc)}
.track .knob{position:absolute;top:18px;width:4px;height:18px;margin-left:-2px;background:#fff;box-shadow:0 0 0 3px rgba(239,99,56,.35)}
.track .tick{position:absolute;top:21px;width:2px;height:12px;margin-left:-1px;background:#58625b}
.track .tick.k-strike{background:#c9902e}.track .tick.k-counter{background:var(--ua)}.track .tick.k-offensive{background:var(--ru)}
.track .tick.k-battle{background:#dfe3dc}.track .tick.k-politics,.track .tick.k-aid{background:#7d8b84;height:8px;top:23px}
.track .tick.on{background:#fff;height:16px;top:19px}
.track .bspan{position:absolute;top:2px;height:13px;background:rgba(239,99,56,.22);border-left:2px solid var(--acc);font:10px/13px var(--sans);color:#f3c2ae;padding-left:4px;white-space:nowrap;overflow:hidden;cursor:pointer}
.track .bspan:hover{background:rgba(239,99,56,.45);color:#fff;z-index:2;overflow:visible}
.track .bspan.row1{top:-11px}
.track .yr{position:absolute;top:33px;font:10px var(--mono);color:var(--ink3);transform:translateX(-50%)}
.track .hover{position:absolute;top:-18px;transform:translateX(-50%);background:#000c;padding:1px 6px;font:11px var(--mono);pointer-events:none;white-space:nowrap;display:none}
.track:hover .hover{display:block}

/* 侧栏 */
.sec{padding:16px 18px;border-bottom:1px solid var(--line)}
.sec h4{margin:0 0 10px;font:600 11px var(--mono);letter-spacing:.14em;color:var(--ink3);text-transform:uppercase;display:flex;justify-content:space-between}
.ev-kind{display:inline-block;font:10px var(--mono);letter-spacing:.1em;padding:1px 7px;border:1px solid currentColor;margin-bottom:8px}
.ev-date{font:12px var(--mono);color:var(--acc);margin-bottom:4px}
.ev h2{margin:0 0 8px;font-size:19px;line-height:1.35}
.ev p{margin:0 0 10px;color:#c7ccc5;line-height:1.75}
.ev .src{font-size:11px;color:var(--ink3);word-break:break-all}
.ev .src a{color:#7c9cc4;margin-right:8px}
.enter{display:flex;align-items:center;justify-content:space-between;width:100%;margin-top:10px;padding:11px 14px;background:var(--acc);color:#fff;font-weight:700;letter-spacing:.04em}
.enter:hover{filter:brightness(1.1)}
.enter small{font:11px var(--mono);opacity:.85}
.strikes-list{margin:8px 0 0;padding:0;list-style:none}
.strikes-list li{display:flex;gap:8px;align-items:center;font-size:12px;color:#e8c690;padding:3px 0}
.navrow{display:flex;gap:6px;margin-top:10px}
.navrow button{flex:1;border:1px solid var(--line2);padding:6px;font-size:12px;color:var(--ink2)}
.navrow button:hover{border-color:var(--acc);color:var(--ink)}

.media-list{display:grid;gap:10px}
.media{display:grid;grid-template-columns:150px 1fr;gap:10px;cursor:pointer;align-items:start}
.media-frame{position:relative;aspect-ratio:16/9;background:#000;overflow:hidden;border:1px solid var(--line2)}
.media-frame img{width:100%;height:100%;object-fit:cover;display:block;opacity:.85}
.media-frame iframe,.media-frame video{position:absolute;inset:0;width:100%;height:100%;border:0;pointer-events:none}
.media .play{position:absolute;left:50%;top:50%;transform:translate(-50%,-50%);width:30px;height:30px;border-radius:50%;background:#000a;display:grid;place-items:center;font-size:11px;border:1px solid #fff5}
.media.on .play{display:none}
.media:hover .media-frame{border-color:var(--acc)}
.media.big{grid-template-columns:1fr}
.media-cap b{display:block;font-size:12px;line-height:1.45;font-weight:600}
.media-cap small{color:var(--ink3);font-size:11px}

.cmds{display:grid;gap:8px}
.cmd{display:flex;gap:10px;align-items:center}
.cmd-img{width:44px;height:52px;flex:none;border:2px solid #888;background:#222;overflow:hidden;display:grid;place-items:center;font-size:18px;color:#777}
.cmd-img img{width:100%;height:100%;object-fit:cover;object-position:50% 20%;filter:grayscale(.15) contrast(1.05)}
.cmd-txt b{display:block;font-size:13px}
.cmd-txt small{display:block;color:var(--ink2);font-size:11px;line-height:1.4}
.cmd-txt i{display:block;color:var(--ink3);font:10px var(--mono);font-style:normal}
.cmd:hover b{color:var(--acc)}

.unit-row{display:flex;gap:9px;align-items:center;padding:5px 0;cursor:pointer;border-bottom:1px dashed #232a26}
.unit-row:hover b{color:var(--acc)}
.unit-row .sym{flex:none}
.unit-row b{font-size:12px;font-weight:600;display:block;line-height:1.35}
.unit-row small{font:10px var(--mono);color:var(--ink3);display:block}
.chips{display:flex;flex-wrap:wrap;gap:3px 7px;margin-top:2px}
.chip{display:inline-flex;align-items:center;gap:2px;font:10px var(--mono);color:#d5dad3;white-space:nowrap}
.chip .gl{opacity:.9}

/* 地图元素 */
.leaflet-container{font-family:var(--sans);background:#0a0d0c}
.leaflet-tooltip.utip{background:rgba(10,12,11,.95);color:var(--ink);border:1px solid var(--line2);border-radius:0;padding:8px 10px;box-shadow:0 6px 24px #000a;max-width:300px;white-space:normal}
.leaflet-tooltip.utip:before{display:none}
.utip b{font-size:13px;display:block}
.utip small{color:var(--ink3);font:10px var(--mono);display:block}
.utip .note{color:var(--ink2);font-size:11px;margin-top:4px;line-height:1.5}
.unit{position:relative;pointer-events:auto}
.unit .sym{display:block;filter:drop-shadow(0 1px 3px #000c)}
.sym .ech{font:700 8px var(--mono);fill:#fff;text-anchor:middle;paint-order:stroke;stroke:#000;stroke-width:2.4px}
.sym .t{font:700 8.5px var(--mono);fill:#fff;stroke:none;text-anchor:middle}
.sym .f{fill:#fff}
.sym.dim{opacity:.6}
.unit .lbl{position:absolute;left:50%;top:100%;transform:translateX(-50%);margin-top:1px;font-size:11px;font-weight:700;white-space:nowrap;color:#fff;text-shadow:0 0 3px #000,0 0 3px #000,0 1px 2px #000;pointer-events:none;line-height:1.25;text-align:center}
.unit .lbl small{display:block;font:9px var(--mono);color:#d7dbd5;font-weight:400}
.unit .lbl .chips{justify-content:center;margin-top:1px}
.unit .lbl .chip{color:#fff;text-shadow:0 0 3px #000}
.unit.moving .sym{animation:pulse 1.2s ease-in-out infinite}
@keyframes pulse{50%{filter:drop-shadow(0 0 6px #fff8)}}
.unit.sel .sym rect{stroke:#fff;stroke-width:2.5}
.icons{position:absolute;pointer-events:none}
.icons .gl{position:absolute;filter:drop-shadow(0 0 1.5px #000) drop-shadow(0 0 1px #000)}

.city{font-size:12px;font-weight:700;color:#fff;text-shadow:0 0 3px #000,0 0 4px #000;white-space:nowrap;pointer-events:none}
.city:before{content:"";display:inline-block;width:5px;height:5px;border:1.5px solid #fff;background:#000;margin-right:4px;vertical-align:1px}
.city.cap{font-size:14px}.city.cap:before{width:7px;height:7px;background:var(--gold)}
.city small{font:9px var(--mono);color:#dfe3de;font-weight:400;margin-left:3px}
.blabel{font-weight:700;color:#ffe6a6;text-shadow:0 0 3px #000,0 0 4px #000,0 0 2px #000;white-space:nowrap;pointer-events:none;text-align:center;transform:translate(-50%,-50%)}
.blabel.s1{font-size:11px}.blabel.s2{font-size:13px}.blabel.s3{font-size:16px;letter-spacing:.1em}

.evpin{width:18px;height:18px;border-radius:50%;border:2px solid #fff;background:var(--acc);box-shadow:0 0 0 0 rgba(239,99,56,.7);animation:ring 1.6s infinite}
@keyframes ring{70%{box-shadow:0 0 0 18px rgba(239,99,56,0)}100%{box-shadow:0 0 0 0 rgba(239,99,56,0)}}
.bpin{display:flex;align-items:center;gap:6px;white-space:nowrap;cursor:pointer}
.bpin i{width:26px;height:26px;border-radius:50%;background:#000c;border:2px solid var(--acc);display:grid;place-items:center;font-style:normal;font-size:13px}
.bpin span{font-size:12px;font-weight:700;color:#fff;text-shadow:0 0 3px #000,0 0 4px #000;background:rgba(0,0,0,.45);padding:1px 6px;border-left:2px solid var(--acc)}
.bpin:hover i{background:var(--acc)}
.bpin.dim{opacity:.55}.bpin.dim:hover{opacity:1}

.arrow-svg{pointer-events:none;overflow:visible}
.arrow-body{animation:draw 1.4s ease-out forwards}
@keyframes draw{from{stroke-dashoffset:var(--len)}to{stroke-dashoffset:0}}
.strike-path{fill:none;stroke-width:1.6;stroke-dasharray:3 5;opacity:.75}
.strike-dot{animation:fly var(--dur,2.4s) linear infinite}
.strike-lbl{font:600 11px var(--sans);fill:#ffd9a0;paint-order:stroke;stroke:#000;stroke-width:3px}
.boom{fill:#ffb347;opacity:.9;animation:boom 1.6s ease-out infinite;transform-box:fill-box;transform-origin:center}
@keyframes boom{0%{transform:scale(.3);opacity:1}100%{transform:scale(2.4);opacity:0}}

.overlay{position:absolute;z-index:800;background:var(--panel);border:1px solid var(--line2);padding:10px 12px;font-size:11px;color:var(--ink2)}
.legend{left:12px;bottom:12px;line-height:1.9;max-width:260px}
.legend .sw{display:inline-block;width:12px;height:9px;margin-right:6px;vertical-align:-1px}
.legend label{display:flex;align-items:center;gap:6px;cursor:pointer}
.legend input{accent-color:var(--acc);margin:0}
.legend .hd{font:600 10px var(--mono);letter-spacing:.12em;color:var(--ink3);margin:2px 0}
.legend .small{font-size:10px;color:var(--ink3);line-height:1.5;margin-top:4px}
.maptools{right:12px;top:12px;display:flex;flex-direction:column;gap:4px;padding:4px}
.maptools button{width:30px;height:30px;border:1px solid var(--line2);font-size:14px;background:#111}
.maptools button.on{border-color:var(--acc);color:var(--acc)}
.maptools button:hover{border-color:var(--ink2)}
.toast{left:50%;top:14px;transform:translateX(-50%);font-size:12px;color:var(--ink);pointer-events:none;transition:opacity .4s;white-space:nowrap}
.est{position:absolute;z-index:790;right:56px;top:14px;background:#4a3a14e6;color:#f7dfa1;border:1px solid #8a6d22;padding:4px 10px;font-size:11px;display:none}

.modal{position:fixed;inset:0;background:#000c;z-index:5000;display:grid;place-items:center;padding:20px}
.modal-in{width:min(1000px,100%);background:#111;border:1px solid var(--line2)}
.modal-head{display:flex;justify-content:space-between;padding:10px 14px;gap:20px}
.modal-video{aspect-ratio:16/9;background:#000}
.modal-video iframe,.modal-video video{width:100%;height:100%;border:0;display:block}
.modal-link{display:block;padding:8px 14px;font-size:12px}
.loading{position:fixed;inset:0;display:grid;place-items:center;background:var(--bg);z-index:9000;font:12px var(--mono);color:var(--ink3);letter-spacing:.2em}

.phase-list{display:grid;gap:2px}
.phase-item{display:grid;grid-template-columns:62px 1fr;gap:8px;padding:6px 8px;cursor:pointer;border-left:2px solid transparent;color:var(--ink2);font-size:12px}
.phase-item small{font:10px var(--mono);color:var(--ink3);padding-top:2px}
.phase-item:hover{background:#1b211e;color:var(--ink)}
.phase-item.on{border-left-color:var(--acc);background:#1d2420;color:var(--ink)}
.phase-item.on small{color:var(--acc)}
.sides{display:grid;grid-template-columns:1fr 1fr;gap:10px}
.sides div{border-top:3px solid;padding-top:6px}
.sides b{display:block;font-size:13px}
.sides small{color:var(--ink2);font-size:11px;line-height:1.5;display:block}
.kv{display:grid;grid-template-columns:auto 1fr;gap:4px 10px;font-size:12px;color:var(--ink2)}
.kv b{color:var(--ink3);font-weight:400;font-size:11px}

@media (max-width:900px){
  .app{grid-template-columns:minmax(0,1fr);grid-template-rows:48px 52vh auto minmax(0,1fr)}
  .top{grid-column:1;gap:10px;padding:0 12px;min-width:0}.top h1 small{display:none}
  .top h1{font-size:14px;min-width:0;overflow:hidden;text-overflow:ellipsis}
  .brand{font-size:0;gap:0}.brand i{font-size:14px}
  .crumb{font-size:11px;padding:3px 7px;max-width:110px;overflow:hidden;text-overflow:ellipsis}
  .top .date b{font-size:15px}.top .date small{display:none}
  .tl{padding:8px 12px}.tl #prev,.tl #next{display:none}.tl .btn.play{min-width:64px;padding:5px 8px}
  .track .bspan{display:none}.track .yr.odd{display:none}
  .est{right:50px;max-width:55%;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
  .media{grid-template-columns:120px minmax(0,1fr)}
  .sec{padding:14px 14px}
  .mapwrap{grid-row:2}.tl{grid-row:3}.side{grid-row:4;grid-column:1;border-left:0;border-top:1px solid var(--line)}
  .tl .speed{display:none}
  .legend{display:none}
  html,body{overflow:hidden}
}
.lg-toggle{cursor:pointer}.legend.closed .lg-body{display:none}.legend.closed .lg-toggle:after{content:" (展开)"}
.upic{position:absolute;right:100%;top:-4px;margin-right:2px;width:26px;height:26px;border-radius:50%;object-fit:cover;object-position:50% 18%;border:2px solid #fff;box-shadow:0 1px 4px #000;background:#222}
.tpic{float:left;width:54px;height:64px;object-fit:cover;object-position:50% 18%;margin:0 9px 4px 0;border:1px solid #555}
.top #langPick{margin-left:auto}.top #langPick + .date{margin-left:0}
select.lang{background:#151a18;color:var(--ink);border:1px solid var(--line2);font:12px var(--sans);padding:4px 6px;cursor:pointer}
select.lang:hover{border-color:var(--acc)}