* {
  box-sizing:border-box}
 :root {
  --accent:#1767a6;
  --border:#dce2e8;
  --muted:#667584;
  --surface:#fff}
 body {
  margin:0;
  background:#f4f6f8;
  color:#1d2935;
  font-family:Segoe UI,Arial,sans-serif;
  font-size:14px}
 button,input,select {
  font:inherit}
 button,.file-btn {
  border:1px solid var(--border);
  border-radius:4px;
  padding:7px 10px;
  background:white;
  color:inherit;
  cursor:pointer;
  font-weight:600}
 button:hover {
  background:#eef4f9;
  border-color:#99b5ca}
 button:focus-visible,input:focus-visible,select:focus-visible {
  outline:2px solid var(--accent);
  outline-offset:2px}
 .topbar {
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:16px;
  padding:15px 20px;
  background:white;
  border-bottom:1px solid var(--border)}
 h1 {
  font-size:21px;
  margin:0 0 5px;
  font-weight:600}
.muted {
  font-size:12px;
  color:var(--muted)}
#fileInfo {
  overflow-wrap:anywhere}
.file-btn {
  background:var(--accent);
  color:white;
  border-color:var(--accent);
  white-space:nowrap}
.file-btn input {
  display:none}
.stats {
  display:flex;
  flex-wrap:wrap;
  gap:8px;
  padding:12px 16px 0}
.stat {
  padding:7px 12px;
  background:white;
  border:1px solid var(--border);
  border-radius:4px;
  min-width:115px}
.stat .k {
  font-size:11px;
  color:var(--muted)}
.stat .v {
  font-size:14px;
  font-weight:600;
  margin-top:3px}
.layout {
  display:grid;
  grid-template-columns:280px minmax(0,1fr);
  gap:12px;
  padding:12px 16px;
  align-items:start}
.sidebar {
  display:flex;
  flex-direction:column;
  gap:8px;
  min-width:0;
  height:calc(100dvh - 190px);
  min-height:590px;
  max-height:900px}
.card {
  background:white;
  border:1px solid var(--border);
  border-radius:4px;
  padding:10px;
  min-width:0}
.card h3,.search-card label {
  font-size:12px;
  font-weight:600;
  margin:0 0 7px;
  display:block}
.grid2 {
  display:grid;
  grid-template-columns:repeat(2,minmax(0,1fr));
  gap:5px;
  margin-bottom:6px}
.grid2 button {
  font-size:12px;
  padding:7px 5px}
.wide {
  width:100%}
.secondary {
  color:var(--muted);
  background:#f8fafb}
.card input[type=text],.card input[type=search] {
  width:100%;
  border:1px solid var(--border);
  border-radius:4px;
  padding:7px;
  margin:4px 0 7px;
  background:white}
.card label {
  font-size:12px}
.pid-card {
  flex:1;
  min-height:160px;
  display:flex;
  flex-direction:column;
  overflow:hidden}
.pid-list {
  flex:1;
  min-height:0;
  overflow:auto;
  border-top:1px solid var(--border);
  padding-top:5px}
.pid-group {
  font-size:11px;
  font-weight:700;
  color:var(--muted);
  margin:12px 0 5px}
.pid-row {
  display:flex;
  gap:6px;
  align-items:start;
  padding:5px 0;
  font-size:12px}
.pid-row input {
  margin:2px 0;
  flex-shrink:0}
.pid-row span {
  flex:1;
  min-width:0;
  overflow-wrap:anywhere}
.pid-unit {
  color:var(--muted);
  white-space:nowrap;
  font-size:11px;
  padding-top:1px}
.content {
  width:100%;
  min-width:0;
  background:white;
  border:1px solid var(--border);
  border-radius:4px;
  overflow:hidden}
.tabs {
  display:flex;
  gap:2px;
  border-bottom:1px solid var(--border);
  padding:0 10px;
  background:#fafbfc}
.tab {
  border:0;
  border-bottom:2px solid transparent;
  border-radius:0;
  padding:12px 16px;
  background:transparent;
  color:var(--muted)}
.tab.active {
  color:var(--accent);
  border-bottom-color:var(--accent);
  background:white}
.tab-pane {
  width:100%;
  display:none;
  padding:12px;
  min-width:0}
.tab-pane.active {
  display:block}
.toolbar {
  display:flex;
  justify-content:space-between;
  align-items:center;
  gap:8px;
  margin-bottom:10px;
  flex-wrap:wrap;
  font-size:12px}
.toolbar.vertical {
  align-items:start;
  flex-direction:column}
.toolbar label {
  display:flex;
  align-items:center;
  gap:6px}
select {
  padding:5px;
  border:1px solid var(--border);
  border-radius:4px}
.row {
  display:flex;
  flex-wrap:wrap;
  gap:6px}
.chip-list {
  display:flex;
  gap:5px;
  flex-wrap:wrap;
  max-height:140px;
  overflow:auto;
  width:100%}
.chip {
  border:1px solid var(--border);
  border-radius:4px;
  padding:5px 8px;
  font-size:11px;
  background:#f8fafb;
  overflow-wrap:anywhere;
  max-width:100%}
.chip.active {
  background:#eaf3fa;
  border-color:#8db7d7;
  color:#145b90}
.plot {
  width:100%;
  max-width:none;
  min-width:0;
  height:clamp(500px,68vh,760px)}
.table-wrap {
  overflow:auto;
  max-height:clamp(440px,66vh,740px);
  border:1px solid var(--border)}
table {
  border-collapse:collapse;
  width:max-content;
  min-width:100%;
  font-size:12px}
th,td {
  border-bottom:1px solid #e9edf1;
  border-right:1px solid #f1f3f5;
  padding:7px 9px;
  white-space:nowrap}
th {
  position:sticky;
  top:0;
  background:#f7f9fb;
  z-index:1;
  font-weight:600}
.pager {
  display:flex;
  justify-content:space-between;
  align-items:center;
  gap:8px;
  flex-wrap:wrap;
  padding-top:10px;
  font-size:12px;
  color:var(--muted)}
.unit-warning {
  font-size:12px;
  color:#795d24;
  background:#fcf8ed;
  border:1px solid #e9dfc7;
  border-radius:4px;
  padding:8px;
  margin:0 0 8px}
footer {
  padding:0 16px 12px;
  font-size:11px;
  color:var(--muted)}
@media(max-width:900px) {
  .layout {
  grid-template-columns:minmax(0,1fr)}
.sidebar {
  height:auto;
  min-height:0;
  max-height:none;
  display:grid;
  grid-template-columns:repeat(2,minmax(0,1fr))}
.search-card {
  grid-column:1/-1}
.pid-card {
  grid-column:1/-1;
  min-height:200px;
  max-height:280px}
.plot {
  height:clamp(400px,62vh,650px)}
.stats {
  gap:5px}
.stat {
  min-width:100px}
}
@media(max-width:540px) {
  .topbar {
  padding:12px}
.layout {
  padding:10px;
  gap:10px}
.sidebar {
  grid-template-columns:minmax(0,1fr)}
.stats {
  padding:10px 10px 0}
.stat {
  flex:1;
  min-width:95px}
.tab {
  padding:11px 10px}
.tab-pane {
  padding:8px}
.plot {
  height:440px}
.pager button {
  font-size:11px}
}

.header-actions { display:flex; align-items:center; gap:8px; }
.header-actions select { min-width:64px; margin:0; height:34px; }
.export-toolbar { display:flex; align-items:center; gap:6px; margin:0 0 8px; font-size:12px; color:var(--muted); }
.export-toolbar button { padding:5px 9px; font-size:12px; }
.export-toolbar { flex-wrap:wrap; }
.export-toolbar select { width:auto; max-width:100%; margin:0; padding:5px 9px; font-size:12px; }
button:disabled { opacity:.55; cursor:wait; }
/* Additions scoped to multi-session controls; accepted single-session layout stays intact. */
#sessionManager { margin-bottom:10px; }
.session-row { display:flex; gap:8px; align-items:center; flex-wrap:wrap; padding:6px 0; border-bottom:1px solid var(--border); }
.session-row input[type=text] { width:160px; margin:0; }
.session-row .session-source { flex:1; min-width:160px; font-size:12px; overflow-wrap:anywhere; }
.session-row button { padding:5px 8px; font-size:12px; }
.comparison-mode { grid-template-columns:minmax(0,1fr); }
.comparison-mode .sidebar { display:none; }
.comparison-table th,.comparison-table td { min-width:115px; vertical-align:top; white-space:normal; }
.comparison-section { margin:18px 0; }
#comparisonSessionSelect { width:auto; min-width:160px; }

/* Compact observed trip timeline; no map or decorative redesign. */
.trip-timeline{display:flex;gap:2px;overflow:hidden;margin:8px 0;min-height:30px}.trip-segment{flex-basis:0;min-width:2px;overflow:hidden;font-size:11px;padding:6px 2px;background:#e6e9ed}.trip-charge{background:#ccebe3}.trip-drive{background:#dce8f5}.trip-session{display:flex;flex-wrap:wrap;gap:6px;align-items:center;margin:10px 0}.trip-session input:not([type=checkbox]){max-width:160px;min-width:0}

.trip-segment{white-space:nowrap}.trip-session span{overflow-wrap:anywhere}