.fan-launchers { display:flex;gap:8px;margin-top:12px; }
.fan-launchers button { flex:1;padding:8px;cursor:pointer; }
.fan-tools { display:flex;gap:8px;padding:8px 16px;border-bottom:1px solid var(--line);flex-shrink:0; }
.fan-tools button { flex:1;padding:6px;cursor:pointer; }
#tFollow[aria-pressed="true"],#hudFollow[aria-pressed="true"] { color:var(--accent);border-color:#90ddbd66;background:#90ddbd0b; }
.tracking-note { color:var(--accent);font-size:10px;line-height:1.6;padding:8px 16px;border-bottom:1px solid var(--line);flex-shrink:0; }
.tracking-hud { position:absolute;z-index:9;bottom:calc(var(--timeline-height) + 48px);left:50%;transform:translateX(-50%);width:360px;padding:14px 18px; }
.tracking-hud strong,.tracking-hud>span { display:block; }
.tracking-hud strong { color:var(--accent);font-size:13px; }
.tracking-hud>span { color:var(--dim);font-size:11px;margin:6px 0 10px;line-height:1.6; }
.tracking-hud>div { display:flex;gap:8px; }
.tracking-hud button { cursor:pointer; }
.fan-filter { display:grid;gap:9px;padding-top:14px;margin-top:10px;border-top:1px solid var(--line); }
.fan-filter label { display:flex;flex-direction:column;gap:6px;font-size:11px;color:var(--dim); }
.fan-filter select { width:100%;background:#091a23;color:var(--text);padding:9px;border:1px solid var(--line);border-radius:8px;font:inherit; }
.fan-filter p { color:var(--dim);font-size:10px;margin:0;line-height:1.6; }
.fan-workbench { width:min(1200px,calc(100vw - 48px));height:calc(100dvh - 48px);max-width:none;max-height:none;padding:0;color:var(--text);background:#0e1c25;overflow:hidden; }
.fan-workbench[open] { display:flex;flex-direction:column; }
.fan-workbench::backdrop { background:#030c16b8;backdrop-filter:blur(7px); }
.fan-head { display:flex;justify-content:space-between;align-items:center;padding:20px 24px 14px;flex-shrink:0; }
.fan-head h2 { font-size:24px;font-weight:500;margin:5px 0 0; }
.fan-tabs { display:flex;gap:8px;padding:0 24px 16px;border-bottom:1px solid var(--line);flex-shrink:0; }
.fan-tabs button { font:inherit;font-size:12px;color:var(--dim);background:transparent;border:1px solid var(--line);border-radius:8px;padding:8px 20px;cursor:pointer; }
.fan-tabs button[aria-pressed="true"] { color:#102c26;background:var(--accent);border-color:var(--accent); }
.fan-view { min-height:0;overflow:auto;padding:18px 24px;scrollbar-width:thin; }
.fan-form { display:flex;gap:12px;align-items:end;flex-wrap:wrap; }
.fan-form label { display:flex;flex-direction:column;gap:6px;font-size:10px;color:var(--dim);min-width:0; }
.fan-form input:not([type="checkbox"]),.fan-form select { padding:10px;background:#091a23;border:1px solid var(--line);border-radius:8px;color:var(--text);font:inherit;font-size:12px;height:38px;box-sizing:border-box;max-width:100%;min-width:0; }
.fan-form input:not([type="checkbox"]) { width:140px; }
.fan-form input[type="date"] { width:150px;color-scheme:dark; }
.fan-form input[type="time"] { width:112px;color-scheme:dark; }
.fan-form select { min-width:100px;color-scheme:dark; }
.fan-form .fan-check { flex-direction:row;align-items:center;padding:10px 0;white-space:nowrap; }
.fan-form button { height:38px;cursor:pointer; }
.fan-form button:disabled { opacity:.45;cursor:default; }
.fan-caption { color:var(--dim);font-size:11px;line-height:1.8;margin:15px 0; }
.fan-explanation { color:#8ca3ac;font-size:10px;line-height:1.8;margin:16px 0 0; }
.diagram-plot { overflow:auto;border:1px solid var(--line);border-radius:12px;background:#09151d;max-height:58dvh; }
.diagram-svg { width:1120px;height:auto;min-width:100%;display:block;stroke:none;fill:var(--dim);font-family:inherit; }
.diagram-svg text { stroke:none;font-size:11px;fill:var(--dim); }
.diagram-svg .graph-grid { stroke:#a7bac01c;stroke-width:1;fill:none; }
.diagram-svg .graph-train { fill:none;stroke:#90ddbd;stroke-width:1.5;cursor:pointer; }
.diagram-svg .graph-train.reverse { stroke:#e9c18b; }
.diagram-svg .graph-train.gap { stroke-dasharray:5 5;opacity:.55; }
.diagram-svg .graph-hit { stroke:transparent;stroke-width:12;fill:none;cursor:pointer; }
.diagram-svg g:hover .graph-train { stroke-width:3; }
.diagram-svg .graph-now { stroke:#ff71b8;stroke-width:1;stroke-dasharray:4 4; }
.diagram-list { margin-top:12px;color:var(--dim);font-size:11px; }
.diagram-list summary { padding:10px 0;cursor:pointer; }
#diagramRows { display:flex;gap:7px;flex-wrap:wrap;max-height:160px;overflow:auto; }
#diagramRows button { cursor:pointer; }
.photo-results { display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:12px; }
.photo-card { padding:15px;border:1px solid var(--line);border-radius:12px;background:#172d3666;min-width:0; }
.photo-card header { display:flex;justify-content:space-between;gap:8px;color:var(--accent);font:600 14px Consolas,monospace; }
.photo-card button { cursor:pointer;color:var(--accent); }
.photo-card p { color:var(--dim);font-size:11px;line-height:1.8;margin:9px 0 0;overflow-wrap:anywhere; }
.photo-card .photo-time { font:21px Consolas,monospace;color:var(--text); }
.photo-card .photo-kind { font:10px "Microsoft YaHei",sans-serif;color:var(--accent2); }
.photo-card .photo-overlap { color:var(--accent2); }
#photoPointControls { display:flex;flex-direction:column;gap:6px;max-width:230px; }
#photoPointLabel { font-size:10px;color:var(--dim); }
#photoPickBanner { position:absolute;z-index:15;top:24px;left:50%;transform:translateX(-50%);padding:12px 18px;color:var(--text);font-size:12px;display:flex;gap:18px;align-items:center; }
body[data-picking="true"] .maplibregl-canvas { cursor:crosshair!important; }
.fan-view .empty-state { grid-column:1/-1; }
@media (max-width:900px) { .photo-results { grid-template-columns:repeat(2,minmax(0,1fr)); } }
@media (max-width:720px) {
  .fan-launchers { margin-top:8px;gap:7px; }
  .fan-launchers button { padding:6px;font-size:10px; }
  .fan-tools { padding:7px 15px; }
  #trainPanel .trainhead { max-height:max(70px,calc(100dvh - var(--tools-bottom) - var(--timeline-height) - 240px)); }
  body[data-following="true"] #trainPanel .trainhead { max-height:max(70px,calc(100dvh - var(--tools-bottom) - var(--timeline-height) - 280px)); }
  .tracking-hud { left:12px;right:12px;width:auto;transform:none;bottom:calc(var(--timeline-height) + max(12px,env(safe-area-inset-bottom)) + 12px);padding:12px 16px; }
  .fan-workbench { width:calc(100vw - 16px);height:calc(100dvh - 16px);border-radius:16px; }
  .fan-head { padding:15px 16px 12px; }
  .fan-head h2 { font-size:21px; }
  .fan-tabs { padding:0 16px 12px; }
  .fan-view { padding:14px 16px; }
  .fan-form { display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:10px; }
  .fan-form input:not([type="checkbox"]),.fan-form input[type="date"],.fan-form input[type="time"],.fan-form select { width:100%;min-width:0; }
  .fan-form button { font-size:11px;padding:8px; }
  .fan-caption { font-size:10px; }
  .photo-results { grid-template-columns:1fr; }
  .diagram-plot { max-height:50dvh; }
  #photoPickBanner { top:calc(var(--tools-bottom) + 12px);left:12px;right:12px;transform:none;font-size:11px;padding:12px; }
}