/* Source Sans 3 (SIL OFL) is the font of the Mobile Enterprise screen: it is what the real client's text looks like. */
@font-face { font-family: "Source Sans 3"; src: url("fonts/SourceSans3-400.woff2") format("woff2"); font-weight: 400; font-style: normal; font-display: swap; }
@font-face { font-family: "Source Sans 3"; src: url("fonts/SourceSans3-600.woff2") format("woff2"); font-weight: 600; font-style: normal; font-display: swap; }
@font-face { font-family: "Source Sans 3"; src: url("fonts/SourceSans3-700.woff2") format("woff2"); font-weight: 700; font-style: normal; font-display: swap; }
@font-face { font-family: "Source Sans 3"; src: url("fonts/SourceSans3-400i.woff2") format("woff2"); font-weight: 400; font-style: italic; font-display: swap; }
/* Inter (SIL Open Font License) is the font for the whole app: it matches the real CentralSquare ONE and CenterLine AI screens. */
@font-face {
  font-family: "Inter";
  src: url("fonts/Inter-400.woff2") format("woff2");
  font-weight: 400;
  font-display: swap;
}
@font-face {
  font-family: "Inter";
  src: url("fonts/Inter-500.woff2") format("woff2");
  font-weight: 500;
  font-display: swap;
}
@font-face {
  font-family: "Inter";
  src: url("fonts/Inter-600.woff2") format("woff2");
  font-weight: 600;
  font-display: swap;
}
@font-face {
  font-family: "Inter";
  src: url("fonts/Inter-700.woff2") format("woff2");
  font-weight: 700;
  font-display: swap;
}

:root {
  --bg: #0d1016;
  --chrome: #0a0c11;
  --panel: #12151c;
  --panel-2: #171b24;
  --panel-3: #1d2230;
  --line: #242a36;
  --text: #e9ecf1;
  --muted: #8d95a5;
  --faint: #5d6576;
  --select: #1e56c4;
  --select-hi: #2a66db;
  --green: #3ecf8e;
  --amber: #f0b44c;
  --p1-bg: #f28b86;
  --p1-fg: #6a1010;
  --p2-bg: #2b2213;
  --p2-fg: #f0b44c;
  --p3-bg: #14284f;
  --p3-fg: #6c9bff;
  --strip-hot-bg: #f28b86;
  --strip-hot-fg: #4c0909;
  --strip-bg: #211014;
  --strip-fg: #ff8e8a;
  --strip-line: #3a1a1f;
  --text-2: #cdd2db;
  --link: #8fb4ff;
  --float: rgba(13, 16, 22, 0.92);
  --map-bg: #1b2130;
  --line-strong: #3a4356;
  --radius: 8px;
  --font: "Inter", "Segoe UI", system-ui, -apple-system, Roboto, sans-serif;
}

* { box-sizing: border-box; }
html, body { height: 100%; }
html { background: var(--chrome); }
body {
  margin: 0;
  background: var(--bg);
  color: var(--text);
  font-family: var(--font);
  font-size: 14px;
  line-height: 1.4;
  display: flex;
  flex-direction: column;
  overflow: hidden;
}
button { font: inherit; color: inherit; background: none; border: 0; cursor: pointer; }
button:focus-visible, input:focus-visible, select:focus-visible, [tabindex]:focus-visible {
  outline: 2px solid var(--select-hi);
  outline-offset: 2px;
}
[hidden] { display: none !important; }
.ico.mob { display: none; }

.ico { width: 20px; height: 20px; flex: none; }
.ico.sm { width: 14px; height: 14px; }
.ico.xs { width: 12px; height: 12px; }

/* ------------------------------------------------ top bar */
.topbar {
  height: 56px;
  flex: none;
  background: var(--chrome);
  border-bottom: 1px solid var(--line);
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 0 20px 0 22px;
}
.wordmark {
  display: flex;
  align-items: center;
  gap: 10px;
  font-weight: 700;
  font-size: 19px;
  letter-spacing: -0.01em;
}
.wordmark { gap: 16px; min-width: 0; }
.wm-logo { height: 30px; width: auto; display: block; }
.wm-sep { width: 1px; height: 30px; background: var(--line); flex: none; }
.wm-chp { height: 34px; width: auto; display: block; }
.topbar-right { display: flex; align-items: center; gap: 18px; color: var(--muted); font-size: 13px; }
.feed-status { display: inline-flex; align-items: center; gap: 7px; cursor: pointer; }
.feed-status .ico { width: 18px; height: 18px; color: var(--faint); }
.feed-status.live .ico { color: var(--green); }
.feed-status.stale .ico { color: var(--amber); }
.feed-status.down .ico { color: #ef5b5b; }
.clock { font-variant-numeric: tabular-nums; color: var(--text); font-weight: 500; min-width: 64px; text-align: right; }
.demo-tag {
  font-size: 12px;
  color: var(--amber);
  border: 1px solid #4a3a1c;
  border-radius: 999px;
  padding: 2px 9px;
}

/* ------------------------------------------------ layout */
.app { flex: 1; display: flex; min-height: 0; }

.rail {
  width: 92px;
  flex: none;
  background: var(--chrome);
  border-right: 1px solid var(--line);
  display: flex;
  flex-direction: column;
  align-items: center;
  padding: 14px 0 12px;
  gap: 6px;
}
.rail-btn {
  width: 76px;
  padding: 11px 0 9px;
  border-radius: 10px;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 6px;
  color: var(--muted);
  font-size: 12.5px;
  font-weight: 500;
  position: relative;
}
.rail-btn .ico { width: 22px; height: 22px; }
.rail-btn:hover { color: var(--text); background: var(--panel-2); }
.rail-btn.active { color: var(--text); background: var(--panel-3); }
.rail-btn.active::before {
  content: "";
  position: absolute;
  left: -8px; top: 12px; bottom: 12px;
  width: 3px;
  border-radius: 0 3px 3px 0;
  background: var(--select-hi);
}
.rail-spacer { flex: 1; }
.rail-rule { width: 60px; height: 1px; background: var(--line); margin: 4px 0; }

/* ------------------------------------------------ side list */
.side {
  width: 352px;
  flex: none;
  background: var(--panel);
  border-right: 1px solid var(--line);
  display: flex;
  flex-direction: column;
  min-height: 0;
}
.side.collapsed { display: none; }
.side-tools { display: flex; gap: 8px; padding: 14px 14px 12px; border-bottom: 1px solid var(--line); }
.search {
  flex: 1;
  display: flex;
  align-items: center;
  gap: 8px;
  background: var(--panel-2);
  border: 1px solid var(--line);
  border-radius: var(--radius);
  padding: 0 10px;
  color: var(--muted);
}
.search .ico { width: 17px; height: 17px; }
.search input {
  flex: 1;
  min-width: 0;
  background: none;
  border: 0;
  color: var(--text);
  font: inherit;
  padding: 9px 0;
  outline: none;
}
.tool-btn {
  width: 38px; height: 38px;
  display: grid;
  place-items: center;
  border-radius: var(--radius);
  border: 1px solid var(--line);
  background: var(--panel-2);
  color: var(--muted);
}
.tool-btn:hover { color: var(--text); border-color: var(--line-strong); }
.tool-btn .ico { width: 18px; height: 18px; }

.side-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 12px 16px 10px;
  font-weight: 600;
  color: var(--text-2);
  font-size: 14px;
}
.center-switch {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  font-size: 12.5px;
  font-weight: 500;
  color: var(--muted);
  padding: 4px 8px;
  border-radius: 6px;
}
.center-switch:hover { background: var(--panel-2); color: var(--text); }

.side-body { flex: 1; overflow-y: auto; min-height: 0; border-top: 1px solid var(--line); }
.side-foot {
  display: flex;
  justify-content: space-between;
  padding: 12px 16px;
  border-top: 1px solid var(--line);
  color: var(--muted);
  font-size: 12.5px;
}

.row {
  display: grid;
  grid-template-columns: 52px 1fr auto;
  column-gap: 8px;
  padding: 13px 14px 13px 12px;
  border-bottom: 1px solid var(--line);
  cursor: pointer;
  width: 100%;
  text-align: left;
}
.row:hover { background: var(--panel-2); }
.row.selected { background: var(--select); }
.row.selected .r-meta, .row.selected .r-loc, .row.selected .r-time { color: #e3ebff; }
.row .pill { margin-top: 2px; justify-self: start; }
.r-title { font-weight: 600; font-size: 15px; line-height: 1.3; }
.r-time { color: var(--muted); font-size: 12.5px; font-variant-numeric: tabular-nums; padding-top: 2px; }
.r-meta { grid-column: 2 / 4; color: var(--muted); font-size: 12.5px; margin-top: 2px; }
.r-loc { grid-column: 2 / 3; color: var(--text-2); font-size: 13.5px; margin-top: 2px; }
.r-icon { grid-column: 3; align-self: end; color: #7aa7ff; }
.row.selected .r-icon { color: #fff; }
.status-active { color: var(--green); font-weight: 500; }
.status-closed { color: var(--faint); font-weight: 500; }

/* Closed incidents: grey and struck through */
.row.closed .r-title,
.row.closed .r-loc { color: var(--faint); text-decoration: line-through; text-decoration-thickness: 1.5px; }
.row.closed .r-time, .row.closed .r-meta, .row.closed .r-icon { color: var(--faint); }
.row.closed.selected { background: var(--panel-3); }
.row.closed.selected .r-title, .row.closed.selected .r-loc { color: var(--muted); }
.pill.p1.closed, .pill.p2.closed, .pill.p3.closed { background: #262b35; color: var(--faint); text-decoration: line-through; }
.inc-head.closed h2, .inc-head.closed .inc-sub { color: var(--faint); text-decoration: line-through; text-decoration-thickness: 2px; }
.inc-head.closed .inc-sub .status-closed { text-decoration: none; display: inline-block; }
.inc-head.closed + .strips .strip { background: var(--panel-2); color: var(--faint); }
.inc-head.closed + .strips .strip .label { text-decoration: line-through; }
.row.selected .status-active { color: #7ff0b9; }
.row.is-new { animation: newrow 2.4s ease-out 1; }
@keyframes newrow { from { box-shadow: inset 3px 0 0 var(--amber); background: #231d10; } }

.pill {
  display: inline-flex;
  align-items: center;
  gap: 2px;
  height: 22px;
  padding: 0 8px 0 5px;
  border-radius: 999px;
  font-size: 12px;
  font-weight: 700;
  white-space: nowrap;
}
.pill .ico { width: 14px; height: 14px; }
.pill.p1 { background: var(--p1-bg); color: var(--p1-fg); }
.pill.p2 { background: var(--p2-bg); color: var(--p2-fg); }
.pill.p3 { background: var(--p3-bg); color: var(--p3-fg); }
.pill.lg { height: 26px; font-size: 13px; padding: 0 10px 0 7px; }

.empty { color: var(--muted); padding: 28px 20px; text-align: center; font-size: 13.5px; line-height: 1.5; }

/* units + timeline + help views */
.u-row, .t-row {
  display: block;
  width: 100%;
  text-align: left;
  padding: 12px 16px;
  border-bottom: 1px solid var(--line);
}
.u-row:hover, .t-row:hover { background: var(--panel-2); }
.u-top { display: flex; justify-content: space-between; gap: 8px; font-weight: 600; }
.u-sub { color: var(--muted); font-size: 12.5px; margin-top: 3px; }
.u-chips { display: flex; gap: 6px; flex-wrap: wrap; margin-top: 8px; }
.chip {
  font-size: 12px;
  font-weight: 500;
  border-radius: 6px;
  padding: 2px 8px;
  background: var(--panel-3);
  color: #b9c3d6;
}
.chip.scene { background: #10301f; color: var(--green); }
.chip.enroute { background: #2b2213; color: var(--amber); }
.t-top { display: flex; gap: 10px; color: var(--muted); font-size: 12.5px; font-variant-numeric: tabular-nums; }
.t-text { margin-top: 3px; }
.side-section { padding: 16px; border-bottom: 1px solid var(--line); }
.side-section h3 { margin: 0 0 10px; font-size: 13.5px; }
.side-section p { margin: 0 0 8px; color: var(--muted); font-size: 13px; line-height: 1.55; }
.setting { display: flex; justify-content: space-between; align-items: center; gap: 10px; padding: 8px 0; font-size: 13.5px; }
.setting select {
  background: var(--panel-2);
  color: var(--text);
  border: 1px solid var(--line);
  border-radius: 6px;
  padding: 6px 8px;
  font: inherit;
}
kbd {
  font-family: inherit;
  font-size: 12px;
  border: 1px solid var(--line);
  border-bottom-width: 2px;
  border-radius: 4px;
  padding: 0 5px;
  color: var(--text);
}

/* ------------------------------------------------ work area */
.work { flex: 1; display: flex; min-width: 0; min-height: 0; }
.map-wrap { flex: 1; position: relative; min-width: 0; }
#map { position: absolute; inset: 0; background: var(--map-bg); }
.show-list { position: absolute; top: 14px; left: 14px; z-index: 500; }

.map-ctrls {
  position: absolute;
  top: 16px; right: 16px;
  z-index: 500;
  display: flex;
  flex-direction: column;
  background: var(--float);
  border: 1px solid var(--line);
  border-radius: 10px;
  padding: 4px;
}
.map-ctrls button {
  width: 40px; height: 40px;
  display: grid;
  place-items: center;
  color: var(--text-2);
  border-radius: 7px;
}
.map-ctrls button:hover { background: var(--panel-3); color: #fff; }
.mc-rule { height: 1px; background: var(--line); margin: 3px 6px; }

.banner {
  position: absolute;
  top: 16px; left: 50%;
  transform: translateX(-50%);
  z-index: 600;
  background: #2a1214;
  border: 1px solid #5a2328;
  color: #ffb3b0;
  border-radius: var(--radius);
  padding: 9px 14px;
  font-size: 13px;
  max-width: min(640px, 80%);
}

/* incident pins */
.pin { position: relative; width: 30px; height: 40px; }
.pin svg { width: 30px; height: 40px; filter: drop-shadow(0 2px 3px rgba(0,0,0,.5)); }
.pin path { stroke: var(--bg); stroke-width: 2.4; }
.pin span {
  position: absolute;
  top: 6px; left: 0; width: 30px;
  text-align: center;
  font: 700 12px/16px var(--font);
  color: var(--bg);
}
.pin.p1 path { fill: #e8595a; }
.pin.p2 path { fill: #d9962b; }
.pin.p3 path { fill: #3b7be0; }
.pin.sel { transform: scale(1.3); transform-origin: 50% 100%; }
.pin.sel path { stroke: var(--bg); stroke-width: 3; }
.pin.gone path { fill: #4b5260; }
.pin.gone span { color: var(--bg); text-decoration: line-through; }
.pin.gone { opacity: .8; }

/* ------------------------------------------------ incident card + panel */
.card {
  position: absolute;
  left: 18px; bottom: 30px;
  width: min(700px, calc(100% - 100px));
  z-index: 550;
  background: var(--panel);
  border: 1px solid var(--line);
  border-radius: 12px;
  box-shadow: 0 16px 40px rgba(0,0,0,.55);
  overflow: hidden;
}
.panel {
  width: 720px;
  max-width: 55%;
  flex: none;
  background: var(--panel);
  border-right: 1px solid var(--line);
  display: flex;
  flex-direction: column;
  min-height: 0;
}

.inc-head { display: flex; justify-content: space-between; gap: 12px; padding: 16px 18px 12px 20px; }
.inc-title { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; }
.inc-title h2 { margin: 0; font-size: 23px; font-weight: 600; letter-spacing: -0.01em; line-height: 1.2; }
.inc-sub { margin-top: 5px; color: var(--text-2); font-size: 15px; }
.inc-actions { display: flex; gap: 2px; align-self: flex-start; }
.inc-actions button {
  width: 32px; height: 32px;
  display: grid;
  place-items: center;
  color: var(--muted);
  border-radius: 6px;
}
.inc-actions button:hover { background: var(--panel-3); color: var(--text); }
.inc-actions .ico { width: 18px; height: 18px; }

.strips { margin: 0 18px 0 18px; border-radius: 6px; overflow: hidden; border: 1px solid var(--strip-line); }
.card .strips { margin: 0; border-radius: 0; border-left: 0; border-right: 0; }
.strip {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 13px 16px;
  background: var(--strip-bg);
  color: var(--strip-fg);
  font-weight: 600;
  font-size: 15.5px;
  border-top: 1px solid var(--strip-line);
}
.strip:first-child { border-top: 0; }
.strip.hot { background: var(--strip-hot-bg); color: var(--strip-hot-fg); }
.strip.calm { background: var(--panel-2); color: var(--text-2); font-weight: 500; }
.strip .label { flex: 1; }
.src {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  font-size: 11.5px;
  font-weight: 600;
  border: 1px solid currentColor;
  border-radius: 999px;
  padding: 2px 9px;
  opacity: .85;
  white-space: nowrap;
}
.src .ico { width: 12px; height: 12px; }

.disclaimer { padding: 11px 20px 13px; color: var(--muted); font-size: 12.5px; line-height: 1.5; }

.tabs { display: flex; gap: 4px; padding: 0 12px; margin-top: 14px; border-bottom: 1px solid var(--line); overflow-x: auto; }
.tab {
  padding: 11px 14px 12px;
  color: var(--muted);
  font-weight: 500;
  font-size: 14px;
  border-bottom: 2px solid transparent;
  white-space: nowrap;
  display: inline-flex;
  align-items: center;
  gap: 7px;
}
.tab:hover { color: var(--text); }
.tab.active { color: var(--link); border-bottom-color: #5b8ff9; }
.tab .count {
  font-size: 11.5px;
  min-width: 19px;
  height: 19px;
  border-radius: 999px;
  display: inline-grid;
  place-items: center;
  padding: 0 5px;
  background: var(--panel-3);
  color: var(--muted);
}
.tab.active .count { background: #2a4fa3; color: #fff; }

.tab-body { flex: 1; overflow-y: auto; min-height: 0; }
.sec-head {
  display: flex;
  align-items: center;
  gap: 9px;
  padding: 11px 16px;
  background: var(--panel-2);
  border-bottom: 1px solid var(--line);
  color: var(--text-2);
  font-weight: 600;
  font-size: 14px;
}
.sec-head .ico { width: 18px; height: 18px; color: var(--muted); }
.sec-head .count { font-size: 11.5px; background: var(--panel-3); color: var(--muted); border-radius: 999px; padding: 1px 7px; font-weight: 500; }
.sec-head .spacer { flex: 1; }
.item { padding: 13px 16px 14px; border-bottom: 1px solid var(--line); }
.item-top { display: flex; justify-content: space-between; gap: 12px; align-items: flex-start; }
.item-title { font-weight: 600; font-size: 15px; }
.item-meta { color: var(--muted); font-size: 13px; margin-top: 3px; }
.item-tags { display: flex; gap: 6px; margin-top: 9px; flex-wrap: wrap; }
.tag {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  font-size: 12px;
  font-weight: 600;
  border-radius: 5px;
  padding: 3px 8px;
  border: 1px solid;
}
.tag .ico { width: 13px; height: 13px; }
.tag.red { color: #ff8e8a; border-color: #5a2328; background: #211014; }
.tag.amber { color: var(--amber); border-color: #4a3a1c; background: #1f1910; }
.tag.slate { color: #b9c3d6; border-color: #333c4e; background: #1a1f2a; }
.tag.green { color: var(--green); border-color: #1d4d35; background: #0f2219; }
.item-quote {
  margin-top: 8px;
  padding-left: 10px;
  border-left: 2px solid var(--line);
  color: var(--muted);
  font-size: 13px;
  line-height: 1.45;
}
.item-time { color: var(--muted); font-size: 12.5px; font-variant-numeric: tabular-nums; white-space: nowrap; }

.seg { display: inline-flex; border: 1px solid var(--line); border-radius: 6px; overflow: hidden; }
.seg button { padding: 3px 10px; font-size: 12px; color: var(--muted); }
.seg button.on { background: var(--panel-3); color: var(--text); }

.log-row { display: grid; grid-template-columns: 56px 34px 1fr; gap: 8px; padding: 11px 16px; border-bottom: 1px solid var(--line); font-size: 14px; }
.log-row .t { color: var(--muted); font-variant-numeric: tabular-nums; font-size: 13px; padding-top: 1px; }
.log-row .n { color: var(--faint); font-size: 12.5px; padding-top: 1px; }
.log-row.unit .text { color: var(--text-2); }

.kv { display: grid; grid-template-columns: 130px 1fr; gap: 10px 14px; padding: 16px; font-size: 14px; }
.kv dt { color: var(--muted); }
.kv dd { margin: 0; }
.kv a { color: var(--link); }

.panel-foot {
  display: flex;
  align-items: center;
  gap: 14px;
  padding: 12px 16px;
  border-top: 1px solid var(--line);
  color: var(--muted);
  font-size: 13px;
}
.panel-foot .spacer { flex: 1; }
.btn {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 8px 14px;
  border: 1px solid var(--line);
  border-radius: var(--radius);
  background: var(--panel-2);
  color: var(--text);
  font-weight: 600;
  font-size: 13.5px;
}
.btn:hover { border-color: var(--line-strong); }
.btn .ico { width: 16px; height: 16px; }

/* ------------------------------------------------ picker */
.overlay {
  position: fixed;
  inset: 0;
  background: rgba(5, 7, 10, 0.72);
  display: grid;
  place-items: center;
  z-index: 2000;
}
.picker {
  width: min(560px, 92vw);
  max-height: 82vh;
  display: flex;
  flex-direction: column;
  background: var(--panel);
  border: 1px solid var(--line);
  border-radius: 14px;
  box-shadow: 0 24px 60px rgba(0,0,0,.6);
  overflow: hidden;
}
.picker h2 { margin: 0; padding: 22px 24px 4px; font-size: 20px; font-weight: 600; }
.picker-sub { margin: 0; padding: 0 24px 16px; color: var(--muted); font-size: 13.5px; border-bottom: 1px solid var(--line); }
.picker-list { overflow-y: auto; padding: 8px; display: grid; grid-template-columns: 1fr 1fr; gap: 4px; }
.pick {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 11px 14px;
  border-radius: 8px;
  text-align: left;
}
.pick:hover { background: var(--panel-3); }
.pick.all { grid-column: 1 / -1; border: 1px solid var(--line); margin-bottom: 4px; }
.pick-name { font-weight: 600; }
.pick-id { color: var(--faint); font-size: 12px; margin-left: 6px; font-weight: 400; }
.pick-count { color: var(--muted); font-size: 12.5px; font-variant-numeric: tabular-nums; }

.toast {
  position: fixed;
  bottom: 24px; left: 50%;
  transform: translateX(-50%);
  background: var(--panel-3);
  border: 1px solid var(--line);
  padding: 9px 16px;
  border-radius: 8px;
  font-size: 13.5px;
  z-index: 3000;
}

/* leaflet tweaks */
.leaflet-container { font-family: var(--font); background: var(--map-bg); }
.leaflet-control-attribution { background: rgba(10,12,17,.75) !important; color: #9aa2b1 !important; font-size: 10.5px; }
.leaflet-control-attribution a { color: #b8c4dc !important; }
.leaflet-div-icon { background: none; border: 0; }

/* ------------------------------------------------ responsive */
@media (max-width: 1180px) {
  .panel { width: 480px; }
}
@media (max-width: 860px) {
  /* Phone: list and map take turns filling the screen; rail is a bottom tab bar */
  body { height: 100dvh; }
  .topbar { height: 50px; padding: env(safe-area-inset-top) max(14px, env(safe-area-inset-right)) 0 max(14px, env(safe-area-inset-left)); box-sizing: content-box; }
  .wordmark { gap: 10px; }
  .wm-logo { height: 17px; }
  .wm-sep { height: 22px; }
  .wm-chp { height: 22px; }
  #feed-status-text { display: none; }
  .demo-tag { display: none; }
  .topbar-right { gap: 12px; }
  .app { flex-direction: column; }
  .rail {
    order: 2;
    width: 100%;
    flex-direction: row;
    justify-content: space-around;
    padding: 4px 4px calc(4px + env(safe-area-inset-bottom));
    border-right: 0;
    border-top: 1px solid var(--line);
    gap: 0;
  }
  .rail-spacer, .rail-rule { display: none; }
  .rail-btn { width: auto; flex: 1; padding: 7px 0 5px; font-size: 10.5px; gap: 3px; }
  .rail-btn .ico { width: 21px; height: 21px; }
  .rail-btn.active::before { display: none; }
  .side { width: 100%; flex: 1; border-right: 0; }
  .side.collapsed { display: flex; }
  .work { display: none; flex: 1; flex-direction: column; min-height: 0; }
  body.phone-map .side { display: none; }
  body.phone-map .work { display: flex; }
  body.phone-map .work:has(.panel:not([hidden])) .map-wrap { display: none; }
  .panel { width: 100%; max-width: none; flex: 1; border-right: 0; }
  .show-list { display: grid !important; }
  .ico.desk { display: none; }
  .ico.mob { display: block; }
  .card { left: 10px; right: 10px; width: auto; bottom: 14px; }
  .inc-title h2 { font-size: 20px; }
  .strip { font-size: 14px; padding: 11px 14px; }
  .picker-list { grid-template-columns: 1fr; }
  .map-ctrls { top: 12px; right: 12px; }
  .panel-foot > span:not(.spacer) { display: none; }
  .panel .inc-head { padding-top: 12px; }
}
@media (prefers-reduced-motion: reduce) {
  .row.is-new { animation: none; box-shadow: inset 3px 0 0 var(--amber); }
}

/* =============================================================== accounts */
.only-light { display: none !important; }
:root[data-theme="light"] .only-light { display: block !important; }
:root[data-theme="light"] .only-dark { display: none !important; }

.icon-btn {
  width: 36px; height: 36px;
  display: grid;
  place-items: center;
  border-radius: 8px;
  color: var(--muted);
}
.icon-btn:hover { color: var(--text); background: var(--panel-3); }
.icon-btn .ico { width: 20px; height: 20px; }

.topbar-right { position: relative; }
.me-btn { padding: 0; border-radius: 50%; }
.avatar {
  width: 36px; height: 36px;
  border-radius: 50%;
  display: inline-grid;
  place-items: center;
  flex: none;
  color: #fff;
  font-weight: 600;
  font-size: 14px;
  letter-spacing: .02em;
  overflow: hidden;
  background: var(--panel-3);
}
.avatar img { width: 100%; height: 100%; object-fit: cover; display: block; }
.avatar.lg { width: 44px; height: 44px; font-size: 16px; }
.avatar.xl { width: 84px; height: 84px; font-size: 30px; }
.me-btn:focus-visible .avatar, .me-btn:hover .avatar { box-shadow: 0 0 0 2px var(--chrome), 0 0 0 4px var(--select-hi); }

.me-menu {
  position: absolute;
  top: calc(100% + 10px);
  right: 0;
  z-index: 2500;
  width: 250px;
  background: var(--panel);
  border: 1px solid var(--line);
  border-radius: 12px;
  box-shadow: 0 18px 40px rgba(0,0,0,.35);
  padding: 6px;
}
.me-head { display: flex; gap: 12px; align-items: center; padding: 10px 10px 12px; border-bottom: 1px solid var(--line); margin-bottom: 4px; }
.me-name { font-weight: 600; color: var(--text); }
.me-id { font-size: 12.5px; color: var(--muted); font-variant-numeric: tabular-nums; }
.me-menu button {
  width: 100%;
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 9px 10px;
  border-radius: 7px;
  color: var(--text);
  font-size: 14px;
  text-align: left;
}
.me-menu button:hover { background: var(--panel-3); }
.me-menu .ico { width: 18px; height: 18px; color: var(--muted); }

/* ---- sign-in */
.login {
  position: fixed;
  inset: 0;
  z-index: 4000;
  background: var(--login-bg);
  display: grid;
  place-items: center;
  padding: 24px;
}
.login-theme { position: absolute; top: calc(16px + env(safe-area-inset-top)); right: 16px; }
.login-box { width: min(420px, 100%); display: flex; flex-direction: column; }
.login-logos { display: flex; justify-content: center; margin-bottom: 22px; }
.login-logo { height: 34px; width: auto; max-width: 100%; }
.login h1 { margin: 0 0 26px; text-align: center; font-size: 22px; font-weight: 600; color: var(--text); }
.login label { font-size: 14px; color: var(--text); margin-bottom: 8px; }
.login input {
  font: inherit;
  font-size: 17px;
  padding: 13px 14px;
  border-radius: 8px;
  border: 1px solid var(--line);
  background: var(--input-bg);
  color: var(--text);
  letter-spacing: .04em;
  outline: none;
}
.login input:focus { border-color: var(--select-hi); box-shadow: 0 0 0 3px color-mix(in srgb, var(--select-hi) 25%, transparent); }
.login-error { margin: 10px 0 0; color: #e5484d; font-size: 13.5px; }
.login-step { display: flex; flex-direction: column; }
.login-for { display: flex; justify-content: space-between; align-items: center; margin-bottom: 16px; font-size: 14px; color: var(--muted); font-variant-numeric: tabular-nums; }
.login-back { color: var(--link); font-size: 14px; font-weight: 500; }
#login-pin { letter-spacing: .3em; }
#login-pin::placeholder { letter-spacing: normal; }
.pin-box { border: 1px solid var(--line); border-radius: 10px; padding: 14px; margin-top: 4px; }
.pin-status { display: flex; align-items: center; justify-content: space-between; gap: 10px; color: var(--text); font-size: 14px; }
.pin-status .btns { display: flex; gap: 8px; flex-wrap: wrap; }
.pin-form { display: flex; flex-direction: column; gap: 10px; margin-top: 12px; }
.pin-form .field { margin-bottom: 0; }
.btn.sm { padding: 6px 11px; font-size: 13px; }
.login-go {
  margin-top: 16px;
  padding: 13px;
  border-radius: 8px;
  background: #2a5db5;
  color: #fff;
  font-weight: 600;
  font-size: 16px;
}
.login-go:hover { background: #2552a0; }
.login-go:disabled { opacity: .6; }

/* ---- dialogs */
.dialog-wrap { z-index: 3500; }
.dlg {
  width: min(520px, 94vw);
  max-height: 88vh;
  display: flex;
  flex-direction: column;
  background: var(--panel);
  border: 1px solid var(--line);
  border-radius: 14px;
  box-shadow: 0 24px 60px rgba(0,0,0,.45);
  overflow: hidden;
}
.dlg.wide { width: min(880px, 96vw); height: min(680px, 90vh); }
.dlg-head { display: flex; align-items: center; justify-content: space-between; padding: 16px 16px 14px 22px; border-bottom: 1px solid var(--line); }
.dlg-head h2 { margin: 0; font-size: 18px; font-weight: 600; }
.dlg-body { padding: 20px 22px; overflow-y: auto; }
.dlg-foot { display: flex; gap: 10px; align-items: center; justify-content: flex-end; padding: 14px 22px; border-top: 1px solid var(--line); }
.dlg-foot .spacer { flex: 1; }
.dlg-note { color: var(--muted); font-size: 13px; margin: 8px 0 0; }
.dlg-error { color: #e5484d; font-size: 13.5px; margin: 12px 0 0; }
.btn.primary { background: #2a5db5; border-color: #2a5db5; color: #fff; }
.btn.primary:hover { background: #2552a0; }
.btn.ghost { background: none; }
.btn.danger { color: #e5484d; background: none; border-color: color-mix(in srgb, #e5484d 45%, transparent); }
label.btn { cursor: pointer; }

.pf-top { display: flex; gap: 18px; align-items: center; margin-bottom: 18px; }
.pf-photo-btns { display: flex; flex-direction: column; gap: 8px; align-items: flex-start; }
.field { display: flex; flex-direction: column; gap: 7px; margin-bottom: 16px; font-size: 13.5px; color: var(--muted); flex: 1; min-width: 0; }
.field > span:first-child { font-weight: 500; }
.field input:not([type="checkbox"]):not([type="color"]):not([type="file"]) {
  font: inherit;
  font-size: 15px;
  color: var(--text);
  background: var(--input-bg);
  border: 1px solid var(--line);
  border-radius: 8px;
  padding: 10px 12px;
  outline: none;
}
.field input:focus { border-color: var(--select-hi); }
.field-row { display: flex; gap: 12px; }
.swatches { display: flex; gap: 8px; flex-wrap: wrap; }
.swatch { width: 30px; height: 30px; border-radius: 50%; border: 2px solid transparent; box-shadow: inset 0 0 0 1px rgba(0,0,0,.15); }
.swatch.on { border-color: var(--text); }
.swatch.custom {
  background: conic-gradient(#e5484d, #f0b44c, #3ecf8e, #2a66db, #7c5cd6, #e5484d);
  position: relative;
  overflow: hidden;
  cursor: pointer;
}
.swatch.custom input { position: absolute; inset: 0; opacity: 0; cursor: pointer; width: 100%; height: 100%; }
.check { display: flex; align-items: center; gap: 10px; color: var(--text); font-size: 14px; padding: 5px 0; cursor: pointer; }
.check input { width: 17px; height: 17px; accent-color: #2a66db; }
.center-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(150px, 1fr)); gap: 0 12px; margin-top: 4px; }

.ids { flex: 1; display: grid; grid-template-columns: 280px 1fr; min-height: 0; }
.ids-list { border-right: 1px solid var(--line); overflow-y: auto; padding: 8px; }
.ids-edit { overflow-y: auto; padding: 18px 22px; }
.ids-edit .dlg-foot { padding: 14px 0 0; border-top: 0; }
.ids-new, .ids-row {
  width: 100%;
  display: flex;
  align-items: center;
  gap: 11px;
  padding: 9px 10px;
  border-radius: 9px;
  text-align: left;
}
.ids-new { color: var(--link); font-weight: 600; margin-bottom: 4px; }
.ids-new .ico { width: 18px; height: 18px; }
.ids-row:hover, .ids-new:hover { background: var(--panel-2); }
.ids-row.on, .ids-new.on { background: var(--panel-3); }
.ids-name { display: block; font-weight: 600; font-size: 14px; }
.ids-id { display: block; font-size: 12.5px; color: var(--muted); }
.ids-back { display: none; align-items: center; gap: 6px; color: var(--link); font-weight: 500; margin-bottom: 14px; }
@media (max-width: 700px) {
  .ids { grid-template-columns: 1fr; }
  .ids-list { border-right: 0; }
  .dlg.editing .ids-list { display: none; }
  .dlg:not(.editing) .ids-edit { display: none; }
  .ids-back { display: inline-flex; }
  .field-row { flex-direction: column; gap: 0; }
  .dlg.wide { height: 92vh; }
}
@media (max-width: 860px) {
  .clock { display: none; }
  .avatar { width: 32px; height: 32px; font-size: 13px; }
  .icon-btn { width: 32px; height: 32px; }
}

/* =============================================================== light theme */
:root { --login-bg: var(--bg); --input-bg: var(--panel-2); }
:root[data-theme="light"] {
  --bg: #f6f7f9;
  --chrome: #ffffff;
  --panel: #ffffff;
  --panel-2: #f3f4f7;
  --panel-3: #e8ebf1;
  --line: #e1e4ea;
  --line-strong: #c7ccd6;
  --text: #14171d;
  --text-2: #3b4250;
  --muted: #5f6878;
  --faint: #9aa1ad;
  --link: #2458c6;
  --float: rgba(255, 255, 255, 0.95);
  --map-bg: #e6e9ee;
  --select: #dce7fb;
  --select-hi: #2a66db;
  --green: #1a9a5c;
  --amber: #b7791f;
  --p1-bg: #fbd5d3;
  --p1-fg: #9b1c1c;
  --p2-bg: #fdecc8;
  --p2-fg: #92580b;
  --p3-bg: #dbe7ff;
  --p3-fg: #1d4fb8;
  --strip-hot-bg: #f28b86;
  --strip-hot-fg: #4c0909;
  --strip-bg: #fdf0ef;
  --strip-fg: #b42318;
  --strip-line: #f5d0cd;
  --login-bg: #fafafa;
  --input-bg: #ececee;
  color-scheme: light;
}
:root[data-theme="light"] .row.selected { background: var(--select); }
:root[data-theme="light"] .row.selected .r-meta,
:root[data-theme="light"] .row.selected .r-loc,
:root[data-theme="light"] .row.selected .r-time { color: #1d3f86; }
:root[data-theme="light"] .row.selected .r-icon { color: #2458c6; }
:root[data-theme="light"] .row.selected .status-active { color: var(--green); }
:root[data-theme="light"] .r-icon { color: #2458c6; }
:root[data-theme="light"] .tab.active { border-bottom-color: #2a66db; }
:root[data-theme="light"] .tab.active .count { background: #2a66db; }
:root[data-theme="light"] .tag.red { color: #b42318; border-color: #f5c2bd; background: #fdf0ef; }
:root[data-theme="light"] .tag.amber { color: #92580b; border-color: #f3d9a4; background: #fdf6e6; }
:root[data-theme="light"] .tag.slate { color: #3b4250; border-color: #d5d9e1; background: #f3f4f7; }
:root[data-theme="light"] .tag.green { color: #146c43; border-color: #b9e5cd; background: #ecf8f1; }
:root[data-theme="light"] .chip { color: #3b4250; }
:root[data-theme="light"] .chip.scene { background: #d4f1e1; color: #146c43; }
:root[data-theme="light"] .chip.enroute { background: #fdecc8; color: #92580b; }
:root[data-theme="light"] .banner { background: #fdf0ef; border-color: #f5c2bd; color: #b42318; }
:root[data-theme="light"] .demo-tag { border-color: #f3d9a4; }
:root[data-theme="light"] .strip.calm { color: var(--text-2); }
:root[data-theme="light"] .card, :root[data-theme="light"] .picker { box-shadow: 0 16px 40px rgba(20, 30, 50, .18); }
:root[data-theme="light"] .overlay { background: rgba(20, 24, 32, .35); }
:root[data-theme="light"] .leaflet-control-attribution { background: rgba(255,255,255,.8) !important; color: #5f6878 !important; }
:root[data-theme="light"] .leaflet-control-attribution a { color: #2458c6 !important; }
:root[data-theme="light"] .pin.gone path { fill: #a4abb7; }
:root[data-theme="light"] .map-ctrls button { color: var(--text-2); }
:root[data-theme="light"] .map-ctrls button:hover { color: var(--text); }

/* =============================================================== iPhone edges
   viewport-fit=cover lets the page run under the status bar and past the
   rounded corners; these paddings keep content inside the safe area. */
.topbar { padding-top: env(safe-area-inset-top); box-sizing: content-box; }
.login { padding: max(24px, env(safe-area-inset-top)) max(24px, env(safe-area-inset-right)) max(24px, env(safe-area-inset-bottom)) max(24px, env(safe-area-inset-left)); }
/* The status bar text is always white on iPhone web apps, so keep a dark
   strip behind it in light mode too */
:root[data-theme="light"] body::before {
  content: "";
  position: fixed;
  top: 0; left: 0; right: 0;
  height: env(safe-area-inset-top);
  background: #0a0c11;
  z-index: 5000;
  pointer-events: none;
}
@media (max-width: 860px) {
  .rail { padding-bottom: max(10px, calc(env(safe-area-inset-bottom) + 2px)); padding-left: env(safe-area-inset-left); padding-right: env(safe-area-inset-right); }
}

/* Nothing of the console is visible until someone signs in */
body.signed-out .topbar,
body.signed-out .app { visibility: hidden; }

/* =============================================================== extras */
.phone-only { display: none; }
@media (max-width: 860px) {
  .desk-only { display: none !important; }
  .phone-only { display: block; }
}
.map-ctrls button.on { background: #0e3b57; color: #7dd3fc; }
:root[data-theme="light"] .map-ctrls button.on { background: #dbeefe; color: #0b6aa2; }

.note-badge { display: inline-flex; align-items: center; gap: 3px; margin-left: 8px; color: var(--link); font-weight: 600; }
.row.selected .note-badge { color: #fff; }
:root[data-theme="light"] .row.selected .note-badge { color: var(--link); }

.btn-row { display: flex; gap: 8px; flex-wrap: wrap; margin: 10px 0 4px; }
.check.sw { font-weight: 600; }
.side-section .field { margin: 10px 0 0; }
.side-section .field input, .side-section .field select, .hist-controls select {
  font: inherit; font-size: 14px; color: var(--text); background: var(--input-bg);
  border: 1px solid var(--line); border-radius: 8px; padding: 9px 11px; outline: none; width: 100%;
}
.side-section p { margin: 10px 0 6px; }
.copy-box { display: flex; gap: 8px; align-items: center; margin: 8px 0; }
.copy-box code {
  flex: 1; min-width: 0; overflow-x: auto; white-space: nowrap; font-size: 11px;
  background: var(--panel-2); border: 1px solid var(--line); border-radius: 6px; padding: 6px 8px;
}
.seg.wide { display: flex; width: 100%; }
.seg.wide button { flex: 1; padding: 8px 10px; font-size: 13.5px; font-weight: 600; }

/* cameras */
.cam-row {
  display: grid; grid-template-columns: 104px 1fr; gap: 12px; align-items: center;
  width: 100%; text-align: left; padding: 10px 14px; border-bottom: 1px solid var(--line);
}
.cam-row:hover { background: var(--panel-2); }
.cam-row img, .cam-tile img {
  width: 100%; aspect-ratio: 16 / 10; object-fit: cover; border-radius: 6px; background: var(--panel-3); display: block;
}
.cam-text { display: flex; flex-direction: column; gap: 2px; min-width: 0; }
.cam-name { font-weight: 600; font-size: 14px; line-height: 1.25; }
.cam-sub { color: var(--muted); font-size: 12px; }
.cam-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(150px, 1fr)); gap: 10px; padding: 12px 16px 16px; }
.cam-tile { display: flex; flex-direction: column; gap: 4px; text-align: left; }
.cam-tile:hover .cam-name { color: var(--link); }
.cam-popup .leaflet-popup-content-wrapper { background: var(--panel); color: var(--text); border: 1px solid var(--line); border-radius: 10px; }
.cam-popup .leaflet-popup-tip { background: var(--panel); }
.cam-popup .leaflet-popup-content { margin: 12px; width: 300px !important; }
.cam-popup a.leaflet-popup-close-button { color: var(--muted); }
.cam-pop { font-family: var(--font); }
.cam-pop-title { font-weight: 700; font-size: 14px; }
.cam-pop-meta { color: var(--muted); font-size: 12px; margin: 2px 0 8px; }
.cam-pop img { width: 100%; border-radius: 6px; display: block; background: var(--panel-3); min-height: 120px; }
.cam-missing { padding: 30px 0; text-align: center; color: var(--muted); background: var(--panel-2); border-radius: 6px; }
.cam-pop-links { display: flex; justify-content: space-between; gap: 10px; margin-top: 8px; font-size: 11.5px; color: var(--muted); }
.cam-pop-links a { color: var(--link); font-weight: 600; }

/* history */
.hist-controls .btn { margin-top: 12px; width: 100%; justify-content: center; }
.row.hist .r-time { white-space: nowrap; }
.stats h4 { margin: 14px 0 6px; font-size: 12px; color: var(--muted); font-weight: 600; text-transform: none; }
.stat-top { display: flex; gap: 14px; align-items: center; flex-wrap: wrap; }
.stat-top > div { display: flex; align-items: center; gap: 6px; }
.stat-top b { font-size: 18px; }
.stat-top span { color: var(--muted); }
.stat-row { display: flex; justify-content: space-between; padding: 3px 0; font-size: 13px; }
.hours { display: flex; align-items: flex-end; gap: 2px; height: 56px; }
.hours .bar { flex: 1; background: var(--select-hi); border-radius: 2px 2px 0 0; min-height: 2px; opacity: .85; }
.hours-axis { display: flex; justify-content: space-between; color: var(--faint); font-size: 10.5px; margin-top: 3px; }

/* notes */
.note { display: flex; gap: 12px; padding: 12px 16px; border-bottom: 1px solid var(--line); }
.note-body { flex: 1; min-width: 0; }
.note-head { display: flex; gap: 10px; align-items: baseline; }
.note-head span { color: var(--muted); font-size: 12px; }
.note-del { margin-left: auto; color: var(--faint); padding: 2px; }
.note-del:hover { color: #e5484d; }
.note-text { margin-top: 3px; white-space: pre-wrap; word-wrap: break-word; line-height: 1.45; }
.note-compose { padding: 14px 16px; display: flex; flex-direction: column; gap: 10px; }
.note-compose textarea {
  font: inherit; font-size: 14px; color: var(--text); background: var(--input-bg);
  border: 1px solid var(--line); border-radius: 8px; padding: 10px 12px; resize: vertical; outline: none;
}
.note-compose textarea:focus { border-color: var(--select-hi); }
.note-compose .btn { align-self: flex-end; }

/* multi-center picker */
.pick { cursor: pointer; }
.pick > span:first-child { display: flex; align-items: center; gap: 10px; }
.pick input[type="checkbox"] { width: 18px; height: 18px; accent-color: #2a66db; flex: none; }
.pick-foot { grid-column: 1 / -1; display: flex; flex-wrap: wrap; gap: 10px; align-items: center; justify-content: space-between; padding: 12px 6px 4px; border-top: 1px solid var(--line); margin-top: 4px; }
.pick-foot .check { flex: 1 1 100%; }
.pick-foot .btn.primary { margin-left: auto; }
.c-check { width: 18px; height: 18px; border-radius: 5px; border: 2px solid var(--line-strong); flex: none; margin-right: 10px; display: inline-block; vertical-align: middle; }
.c-check.on { background: #2a66db; border-color: #2a66db; box-shadow: inset 0 0 0 3px var(--panel); }
.u-top .c-name { flex: 1; }
.u-top:has(.c-check) { justify-content: flex-start; align-items: center; }

.status-clear { color: var(--green) !important; opacity: .85; }
.strip.clear { background: #0f2a1d; color: #6ee7a8; }
.inc-head.closed + .strips .strip.clear { background: #0f2a1d; color: #6ee7a8; }
.inc-head.closed + .strips .strip.clear .label { text-decoration: none; }
:root[data-theme="light"] .strip.clear, :root[data-theme="light"] .inc-head.closed + .strips .strip.clear { background: #e3f6ec; color: #146c43; }

/* layers menu, caltrans */
.map-ctrls button#m-layer.on { color: #7dd3fc; }
.layer-menu {
  position: absolute; top: 16px; right: 70px; z-index: 700; width: 250px;
  background: var(--panel); border: 1px solid var(--line); border-radius: 12px; padding: 12px 14px;
  box-shadow: 0 16px 36px rgba(0,0,0,.4);
}
.lm-title { font-weight: 700; font-size: 12px; color: var(--muted); margin: 8px 0 6px; }
.lm-title:first-child { margin-top: 0; }
.lm-note { color: var(--faint); font-size: 11px; margin-top: 8px; line-height: 1.4; }
.ct-tabs { margin-bottom: 8px; }
.ct-tabs button { font-size: 12.5px !important; padding: 7px 4px !important; }
.ct-tags { display: flex; gap: 6px; flex-wrap: wrap; margin: 6px 0; }
.u-row .tag { flex: none; }
.cms-pin { width: 16px; height: 11px; background: #111; border: 2px solid #fbbf24; border-radius: 2px; box-shadow: 0 1px 3px rgba(0,0,0,.6); }
.cc-pin { font: 700 10px/14px var(--font); color: #fff; background: #2563eb; border: 2px solid #0b0e14; border-radius: 4px; padding: 0 3px; text-align: center; box-shadow: 0 1px 3px rgba(0,0,0,.5); }
.sign {
  background: #0a0a0a; border: 3px solid #2b2b2b; border-radius: 4px; padding: 8px 10px; margin: 8px 0 2px;
  font-family: "Courier New", monospace; font-weight: 700; color: #fbbf24; text-align: center;
  letter-spacing: 0.06em; font-size: 13px; line-height: 1.35; text-shadow: 0 0 6px rgba(251,191,36,.45);
}
.sign-page + .sign-page { border-top: 1px dashed #3a3a3a; margin-top: 6px; padding-top: 6px; }

/* activity log */
.dlg-head .spacer { flex: 1; }
.dlg-head .btn.sm { margin-right: 8px; }
.act-controls { display: flex; gap: 10px; padding: 12px 18px; border-bottom: 1px solid var(--line); }
.act-controls input, .act-controls select {
  font: inherit; font-size: 14px; color: var(--text); background: var(--input-bg);
  border: 1px solid var(--line); border-radius: 8px; padding: 8px 11px; outline: none;
}
.act-controls input { flex: 1; min-width: 0; }
.act-list { flex: 1; overflow-y: auto; }
.act-row { display: grid; grid-template-columns: 120px 170px 140px 1fr; gap: 10px; align-items: center; padding: 9px 18px; border-bottom: 1px solid var(--line); font-size: 13px; }
.act-time { color: var(--muted); font-variant-numeric: tabular-nums; }
.act-detail { color: var(--text-2); overflow-wrap: anywhere; }
.act-ip { display: block; color: var(--faint); font-size: 11px; }
@media (max-width: 700px) {
  .act-row { grid-template-columns: 1fr auto; }
  .act-detail { grid-column: 1 / -1; }
}

/* =============================================================== wall display */
body.wall { display: flex; flex-direction: column; height: 100vh; overflow: hidden; }
.wall-bar {
  display: flex; align-items: center; gap: 10px; padding: 8px 14px; background: var(--chrome);
  border-bottom: 1px solid var(--line); transition: margin-top .3s ease, opacity .3s ease; z-index: 1000;
}
.wall-bar .wm-logo { height: 20px; margin-right: 6px; }
.wall-bar select { font: inherit; font-size: 13.5px; background: var(--panel-2); color: var(--text); border: 1px solid var(--line); border-radius: 7px; padding: 5px 8px; }
.wall-bar .spacer { flex: 1; }
.wall-status { color: var(--muted); font-size: 13px; }
body.wall.idle .wall-bar { margin-top: -52px; opacity: 0; }
body.wall.idle { cursor: none; }
.wall-grid { flex: 1; display: grid; gap: 8px; padding: 8px; min-height: 0; background: var(--bg); }
.wall-grid.l-1 { grid-template: 1fr / 1fr; }
.wall-grid.l-2h { grid-template: 1fr / 1fr 1fr; }
.wall-grid.l-2v { grid-template: 1fr 1fr / 1fr; }
.wall-grid.l-3h { grid-template: 1fr / 1fr 1fr 1fr; }
.wall-grid.l-1p2 { grid-template: 1fr 1fr / 2fr 1fr; }
.wall-grid.l-1p2 > :first-child { grid-row: 1 / 3; }
.wall-grid.l-2x2 { grid-template: 1fr 1fr / 1fr 1fr; }
.wall-pane { position: relative; background: var(--panel); border: 1px solid var(--line); border-radius: 10px; overflow: hidden; display: flex; flex-direction: column; min-height: 0; }
.wp-head { padding: 10px 14px; font-weight: 700; font-size: 15px; border-bottom: 1px solid var(--line); color: var(--text-2); }
.wp-body { flex: 1; overflow: hidden; min-height: 0; }
.wp-map { position: absolute; inset: 0; }
.wp-map-label {
  position: absolute; left: 12px; bottom: 12px; right: 12px; z-index: 500; background: var(--float); border: 1px solid var(--line);
  border-radius: 8px; padding: 10px 14px; font-size: 16px; display: flex; gap: 8px; align-items: center; flex-wrap: wrap;
}
.wp-map-label span { color: var(--muted); }
.w-row { display: grid; grid-template-columns: auto 1fr auto; gap: 12px; align-items: center; padding: 11px 14px; border-bottom: 1px solid var(--line); }
.w-row .pill { justify-self: start; }
.w-title { font-weight: 700; font-size: 17px; line-height: 1.2; }
.w-sub { color: var(--muted); font-size: 13.5px; }
.w-time { color: var(--muted); font-size: 14px; text-align: right; font-variant-numeric: tabular-nums; }
.w-clear { color: var(--green); font-size: 12px; }
.w-row.done .w-title, .w-row.done .w-sub { color: var(--faint); text-decoration: line-through; }
.w-row.is-new { animation: newrow 3s ease-out 1; }
.w-sign { padding: 10px 14px; border-bottom: 1px solid var(--line); }
.featured { padding: 18px 20px; display: flex; flex-direction: column; gap: 8px; }
.f-top { display: flex; gap: 10px; align-items: center; }
.f-top .pill { height: 30px; font-size: 14px; padding: 0 12px 0 8px; }
.f-time { color: var(--muted); font-size: 14px; }
.f-title { font-size: 30.5px; font-weight: 700; line-height: 1.1; }
.f-loc { font-size: 19.5px; color: var(--text-2); }
.f-facts { display: flex; gap: 8px; flex-wrap: wrap; }
.f-facts span { background: var(--strip-bg); color: var(--strip-fg); border-radius: 6px; padding: 5px 10px; font-weight: 600; font-size: 15px; }
.f-veh { font-size: 16px; color: var(--text-2); }
.f-body { display: flex; gap: 14px; flex: 1; min-height: 0; margin-top: 6px; }
.f-cam { flex: 0 0 45%; display: flex; flex-direction: column; gap: 4px; color: var(--muted); font-size: 12.5px; }
.f-cam img { width: 100%; border-radius: 8px; background: var(--panel-3); }
.f-log { flex: 1; font-size: 15px; line-height: 1.4; overflow: hidden; }
.f-log div { padding: 4px 0; border-bottom: 1px solid var(--line); }
.f-log b { color: var(--muted); margin-right: 6px; font-variant-numeric: tabular-nums; }
.w-cams { display: grid; gap: 6px; padding: 6px; align-content: start; }
.w-cams figure { margin: 0; }
.w-cams img { width: 100%; aspect-ratio: 16 / 10; object-fit: cover; border-radius: 6px; background: var(--panel-3); display: block; }
.w-cams figcaption { font-size: 12.5px; color: var(--muted); margin-top: 3px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.w-stats { display: flex; gap: 18px; padding: 16px; flex-wrap: wrap; }
.w-stats > div { display: flex; align-items: center; gap: 8px; }
.w-stats b { font-size: 30.5px; }
.wall-pane .stat-row { padding: 6px 16px; font-size: 16px; }
.w-clock { flex: 1; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 6px; }
.w-clock-time { font-size: clamp(48px, 9vw, 140px); font-weight: 700; font-variant-numeric: tabular-nums; line-height: 1; }
.w-clock-date { font-size: 23px; color: var(--text-2); }
.w-clock-sub { font-size: 18px; color: var(--muted); }
.layout-picks { display: grid; grid-template-columns: repeat(auto-fill, minmax(120px, 1fr)); gap: 8px; }
.layout-pick { display: flex; flex-direction: column; gap: 6px; align-items: center; padding: 10px; border: 1px solid var(--line); border-radius: 8px; font-size: 12.5px; color: var(--text-2); }
.layout-pick.on { border-color: var(--select-hi); background: var(--panel-3); color: var(--text); }
.lp-art { width: 72px; height: 44px; display: grid; gap: 3px; }
.lp-art i { background: var(--line-strong); border-radius: 2px; }
.lp-art.l-1 { grid-template: 1fr / 1fr; }
.lp-art.l-2h { grid-template: 1fr / 1fr 1fr; }
.lp-art.l-2v { grid-template: 1fr 1fr / 1fr; }
.lp-art.l-3h { grid-template: 1fr / 1fr 1fr 1fr; }
.lp-art.l-1p2 { grid-template: 1fr 1fr / 2fr 1fr; }
.lp-art.l-1p2 i:first-child { grid-row: 1 / 3; }
.lp-art.l-2x2 { grid-template: 1fr 1fr / 1fr 1fr; }
.pane-edit { display: flex; flex-wrap: wrap; gap: 8px; align-items: center; padding: 10px 0; border-top: 1px solid var(--line); }
.pane-edit select, .pe-opts select { font: inherit; font-size: 13.5px; background: var(--input-bg); color: var(--text); border: 1px solid var(--line); border-radius: 7px; padding: 6px 8px; }
.pe-num { font-weight: 700; width: 64px; }
.pe-opts { display: flex; flex-wrap: wrap; gap: 8px 14px; align-items: center; flex: 1 1 100%; padding-left: 72px; }
.pe-opts .check { padding: 0; }

/* my location */
.loc-btn { position: relative; }
.loc-btn .loc-dot { position: absolute; right: 5px; bottom: 5px; width: 9px; height: 9px; border-radius: 50%; background: var(--faint); border: 2px solid var(--chrome); }
.loc-btn.on { color: #ef4444; }
.loc-btn.on .loc-dot { background: #ef4444; }
.loc-btn.wait .loc-dot { background: var(--amber); animation: locpulse 1s ease-in-out infinite alternate; }
@keyframes locpulse { from { opacity: .35; } to { opacity: 1; } }
.me-dot { width: 18px; height: 18px; border-radius: 50%; background: #3b82f6; border: 3px solid #fff; box-shadow: 0 0 0 2px rgba(59,130,246,.35), 0 2px 6px rgba(0,0,0,.4); }
.r-dist { color: var(--link); font-weight: 600; }
.row.selected .r-dist { color: #fff; }
:root[data-theme="light"] .row.selected .r-dist { color: var(--link); }
@media (prefers-reduced-motion: reduce) { .loc-btn.wait .loc-dot { animation: none; } }

/* =============================================================== laptop / Toughbook widths
   1024x768 and 1366x768 screens: the list stays, and the expanded incident
   panel takes the rest of the width instead of squeezing next to the map.
   The shrink button next to X goes back to the map with the incident card. */
@media (min-width: 861px) and (max-width: 1440px) {
  .rail { width: 78px; padding-top: 10px; gap: 4px; }
  .rail-btn { width: 66px; padding: 9px 0 7px; font-size: 11.5px; gap: 4px; }
  .rail-btn .ico { width: 21px; height: 21px; }
  .rail-btn.active::before { left: -6px; }
  .rail-rule { width: 50px; }
  .side { width: 310px; }
  .side-tools { padding: 12px; }
  .row { grid-template-columns: 48px 1fr auto; padding: 11px 12px 11px 10px; }
  .work:has(.panel:not([hidden])) .map-wrap { display: none; }
  .panel { flex: 1; width: auto; max-width: none; border-right: 0; }
  .inc-head { padding: 14px 16px 10px 18px; }
  .inc-title h2 { font-size: 22px; }
  .card { width: min(640px, calc(100% - 90px)); }
  .topbar-right { gap: 14px; }
}
@media (min-width: 861px) and (max-width: 1100px) {
  .wm-chp { height: 30px; }
  .wm-logo { height: 26px; }
  .clock { display: none; }
}

/* Tabs scroll sideways without showing a scrollbar */
.tabs { scrollbar-width: none; }
.tabs::-webkit-scrollbar { display: none; }

/* Thin, quiet scrollbars instead of the Windows defaults */
* { scrollbar-width: thin; scrollbar-color: var(--line-strong) transparent; }
::-webkit-scrollbar { width: 10px; height: 10px; }
::-webkit-scrollbar-track { background: transparent; }
::-webkit-scrollbar-thumb { background: var(--line-strong); border-radius: 10px; border: 2px solid transparent; background-clip: content-box; }
::-webkit-scrollbar-thumb:hover { background-color: var(--muted); }
::-webkit-scrollbar-button { display: none; }
/* Keep the search row and list header on one line in narrow columns */
.search { min-width: 0; }
.search input { width: 100%; }
.side-head { gap: 8px; }
#side-title { white-space: nowrap; }
.center-switch { min-width: 0; max-width: 60%; }
#center-name { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }

/* =============================================================== sources: CHP / CAL FIRE */
.wm-calfire { height: 34px; width: auto; display: none; }
.wm-sep2 { display: none; }
/* Logos follow the sources that are on. Citizen has no logo. */
body[data-src-chp="0"] .wm-chp { display: none; }
body[data-src-calfire="1"] .wm-calfire { display: block; }
body[data-src-chp="1"][data-src-calfire="1"] .wm-sep2 { display: block; }
body[data-src-chp="0"][data-src-calfire="0"] .wm-sep { display: none; }
@media (max-width: 860px) { .wm-calfire { height: 22px; } }
@media (min-width: 861px) and (max-width: 1100px) { .wm-calfire { height: 28px; } }
.src-tag { font-size: 10px; font-weight: 700; border-radius: 4px; padding: 1px 5px; margin-right: 2px; }
.src-tag.cf { background: #3a0d0d; color: #ff6b6b; }
:root[data-theme="light"] .src-tag.cf { background: #fde2e2; color: #c01818; }
.row.selected .src-tag.cf { background: rgba(255,255,255,.18); color: #fff; }
.pin.fire path { fill: #ff4d1a; }
.pin.fire.gone path { fill: #6b5a55; }
.pin .pin-flame { position: absolute; top: 6px; left: 7px; width: 16px; height: 16px; fill: #fff; filter: none; }
.fire-stats { display: flex; gap: 28px; }
.fire-stats b { display: block; font-size: 25px; line-height: 1.1; }
.fire-stats span { color: var(--muted); font-size: 12.5px; }
.contain-bar { height: 10px; border-radius: 6px; background: var(--strip-bg); margin-top: 12px; overflow: hidden; }
.contain-bar span { display: block; height: 100%; background: linear-gradient(90deg, #f59e0b, #22c55e); }
.pick-src { grid-column: 1 / -1; display: flex; align-items: center; gap: 10px; padding: 4px 6px 10px; border-bottom: 1px solid var(--line); margin-bottom: 4px; }
.pick-src > span { font-weight: 600; color: var(--muted); }
.pick-note { grid-column: 1 / -1; padding: 14px 8px; color: var(--muted); }
.ct-tabs { display: grid !important; grid-template-columns: repeat(3, 1fr); gap: 0; }

/* fire-watch cameras: a dot with an arrow for the direction it faces */
.fcam { width: 22px; height: 22px; position: relative; }
.fcam::before { content: ""; position: absolute; inset: 5px; border-radius: 50%; background: #f97316; border: 2px solid #0b0e14; }
.fcam.mono::before { background: #a78bfa; }
.fcam i { position: absolute; left: 50%; top: 50%; width: 0; height: 0; transform: translate(-50%, -50%) rotate(var(--az)) translateY(-11px);
  border-left: 5px solid transparent; border-right: 5px solid transparent; border-bottom: 8px solid #f97316; }
.fcam.mono i { border-bottom-color: #a78bfa; }
.evac-dot { display: inline-block; width: 11px; height: 11px; border-radius: 3px; margin-right: 7px; vertical-align: -1px; }

/* navigate */
.card-actions { display: flex; align-items: center; gap: 12px; padding: 12px 18px 0; }
.nav-away { color: var(--muted); font-size: 13px; }
.dlg.nav-dlg { width: min(440px, 94vw); }
.nav-where { margin: 0 0 16px; line-height: 1.5; }
.nav-apps { display: grid; gap: 8px; margin-bottom: 14px; }
.nav-apps .btn { justify-content: center; padding: 12px; font-size: 14px; }

/* =============================================================== in-CAD navigation */
.nav-top, .nav-bottom { position: absolute; left: 12px; right: 70px; z-index: 650; --nav-bg: #0f3d2e; }
.nav-top { top: 12px; }
.nav-bottom { bottom: 26px; }
.nav-main {
  display: flex; gap: 14px; align-items: center; background: var(--nav-bg); color: #fff;
  border-radius: 12px; padding: 12px 16px; box-shadow: 0 10px 30px rgba(0,0,0,.45);
}
.nav-arrow { width: 54px; height: 54px; flex: none; color: #fff; }
.nav-text { min-width: 0; }
.nav-dist { font-size: 26.5px; font-weight: 700; line-height: 1.05; }
.nav-instr { font-size: 18.5px; font-weight: 600; line-height: 1.2; }
.nav-then { font-size: 13.5px; opacity: .8; margin-top: 3px; }
.nav-flag { margin-top: 6px; background: #7c2d12; color: #fff; border-radius: 8px; padding: 6px 12px; font-weight: 600; display: inline-block; }
.nav-steps { margin-top: 6px; max-height: 42vh; overflow-y: auto; background: var(--panel); border: 1px solid var(--line); border-radius: 10px; }
.nav-step { display: grid; grid-template-columns: 28px 1fr auto; gap: 10px; align-items: center; padding: 8px 12px; border-bottom: 1px solid var(--line); font-size: 13.5px; }
.nav-step .nav-arrow { width: 24px; height: 24px; color: var(--text-2); }
.nav-step b { color: var(--muted); font-weight: 600; font-variant-numeric: tabular-nums; }
.nav-step.now { background: var(--panel-3); }
.nav-step.done { opacity: .45; }
.nav-bottom { background: var(--panel); border: 1px solid var(--line); border-radius: 12px; padding: 10px 14px; box-shadow: 0 10px 30px rgba(0,0,0,.4); }
.nav-stats { display: flex; gap: 14px; align-items: baseline; flex-wrap: wrap; font-size: 14px; color: var(--text-2); }
.nav-eta { font-size: 21.5px; font-weight: 700; color: var(--green); font-variant-numeric: tabular-nums; }
.nav-to { color: var(--muted); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; flex: 1; min-width: 0; text-align: right; }
.nav-btns { display: flex; gap: 8px; flex-wrap: wrap; margin-top: 8px; }
.nav-btns .btn.on { border-color: var(--green); color: var(--green); }
.nav-btns .btn[disabled] { opacity: .45; }
.nav-credit { margin-top: 6px; font-size: 10px; color: var(--faint); }
/* while navigating, the incident card and the map's own buttons step aside */
body.navigating .card { display: none; }
body.navigating .map-ctrls { top: auto; bottom: 150px; }
/* your position: a direction arrow when heading is known */
.me-dot { position: relative; }
.me-dot i { position: absolute; left: 50%; top: 50%; width: 0; height: 0; margin: -19px 0 0 -6px; transform-origin: 6px 19px;
  border-left: 6px solid transparent; border-right: 6px solid transparent; border-bottom: 10px solid #3b82f6; }
@media (max-width: 860px) {
  .nav-top, .nav-bottom { left: 8px; right: 8px; }
  .nav-dist { font-size: 23px; }
  .nav-instr { font-size: 16px; }
  .nav-arrow { width: 44px; height: 44px; }
  body.navigating .map-ctrls { bottom: 190px; }
}
/* phone top bar: the theme toggle lives in the profile menu and Settings instead */
@media (max-width: 860px) { .topbar-right .theme-btn { display: none; } .topbar-right { gap: 6px; } }

/* =============================================================== AI brief */
.ai-card { margin: 12px 14px; border: 1px solid #2d4a8a; border-radius: 12px; background: linear-gradient(180deg, rgba(42,102,219,.10), transparent 60%); overflow: hidden; }
:root[data-theme="light"] .ai-card { border-color: #b9cdf3; }
.ai-head { display: flex; align-items: center; gap: 8px; padding: 10px 14px; font-weight: 700; color: var(--link); border-bottom: 1px solid var(--line); }
.ai-head > span:first-child { display: inline-flex; align-items: center; gap: 7px; }
.ai-head .spacer { flex: 1; }
.ai-summary { padding: 12px 14px 4px; font-size: 15.5px; font-weight: 600; line-height: 1.35; }
.ai-chips { display: flex; gap: 6px; flex-wrap: wrap; padding: 6px 14px; }
.ai-row { padding: 5px 14px; font-size: 13.5px; line-height: 1.4; color: var(--text); }
.ai-row b { color: var(--text-2); }
.ai-changes { margin: 6px 14px; padding: 8px 10px; border-radius: 8px; background: var(--panel-2); font-size: 13.5px; }
.ai-sec { padding-top: 6px; }
.ai-sec-h { display: flex; align-items: center; gap: 6px; padding: 6px 14px 2px; font-size: 12px; font-weight: 700; color: var(--muted); text-transform: none; }
.ai-cite { color: var(--faint); font-size: 11px; white-space: nowrap; }
.ai-timeline { padding: 6px 0; }
.ai-timeline summary { padding: 4px 14px; cursor: pointer; color: var(--muted); font-weight: 600; font-size: 12.5px; }
.ai-empty, .ai-wait, .ai-err { padding: 14px; color: var(--muted); }
.ai-empty p { margin: 0 0 10px; }
.ai-wait::before { content: ""; display: inline-block; width: 10px; height: 10px; border-radius: 50%; background: var(--link); margin-right: 8px; animation: locpulse .8s ease-in-out infinite alternate; }
.ai-wait.small, .ai-err.small { padding: 8px 14px 0; font-size: 12px; }
.ai-err { color: #e5484d; }
.ai-err .btn { margin-top: 8px; }
.ai-ask { border-top: 1px solid var(--line); margin-top: 8px; padding: 10px 14px; }
.ai-qa { margin-bottom: 8px; }
.ai-q { font-weight: 600; font-size: 13px; }
.ai-a { font-size: 13.5px; color: var(--text-2); margin-top: 2px; white-space: pre-wrap; }
.ai-a.err { color: #e5484d; }
.ai-ask-row { display: flex; gap: 8px; }
.ai-ask-row input { flex: 1; min-width: 0; font: inherit; font-size: 14px; color: var(--text); background: var(--input-bg); border: 1px solid var(--line); border-radius: 8px; padding: 8px 10px; outline: none; }
.ai-foot { padding: 8px 14px 10px; color: var(--faint); font-size: 11px; border-top: 1px solid var(--line); }
.regular-brief > summary { display: flex; align-items: center; gap: 7px; padding: 10px 16px; cursor: pointer; font-weight: 600; color: var(--muted); background: var(--panel-2); border-top: 1px solid var(--line); border-bottom: 1px solid var(--line); }
.ai-card-sum { margin: 0 18px 10px; padding: 8px 10px; border-radius: 8px; background: rgba(42,102,219,.12); font-size: 13.5px; line-height: 1.35; }
.ai-card-sum span { font-weight: 800; color: var(--link); margin-right: 6px; font-size: 11px; }
.ai-settings .ai-status { color: var(--text-2); }
.ai-help { font-size: 11.5px !important; }
.ai-help a { color: var(--link); }
.ai-hint { color: var(--green); font-weight: 500; margin-left: 6px; }
.ai-model-row { display: flex; gap: 8px; }
.ai-model-row select { flex: 1; min-width: 0; }
@media (prefers-reduced-motion: reduce) { .ai-wait::before { animation: none; } }

/* =============================================================== Radio (Rangecast) */
.radio-now { display: inline-flex; align-items: center; gap: 7px; max-width: 260px; overflow: hidden; white-space: nowrap; text-overflow: ellipsis;
  background: #10301f; color: #6ee7a8; border: 1px solid #1d4d35; border-radius: 999px; padding: 4px 10px; font-size: 12px; }
:root[data-theme="light"] .radio-now { background: #e3f6ec; color: #146c43; border-color: #b9e5cd; }
.rn-dot { width: 8px; height: 8px; border-radius: 50%; background: #ef4444; flex: none; animation: locpulse .7s ease-in-out infinite alternate; }
.radio-head .radio-status { font-size: 13px; color: var(--text-2); }
.radio-vol { display: flex; align-items: center; gap: 10px; margin: 8px 0; color: var(--muted); font-size: 12.5px; }
.radio-vol input { flex: 1; accent-color: #2a66db; }
.radio-playing { display: flex; align-items: center; gap: 8px; margin-bottom: 8px; font-weight: 600; }
.only-flag { padding-top: 8px; padding-bottom: 8px; }
.rc-row { display: grid; grid-template-columns: 38px 1fr; gap: 10px; padding: 10px 14px; border-bottom: 1px solid var(--line); }
.rc-row.now { background: var(--panel-3); }
.rc-play { width: 34px; height: 34px; border-radius: 50%; border: 1px solid var(--line); background: var(--panel-2); color: var(--text); font-size: 11.5px; }
.rc-row.now .rc-play { background: #2a66db; border-color: #2a66db; color: #fff; }
.rc-top { display: flex; justify-content: space-between; gap: 8px; font-size: 13px; }
.rc-top span { color: var(--muted); font-variant-numeric: tabular-nums; white-space: nowrap; }
.rc-text { margin-top: 3px; font-size: 13px; color: var(--text-2); line-height: 1.4; }
.rc-text.low { color: var(--faint); }
.rc-tags { display: flex; gap: 5px; flex-wrap: wrap; margin-top: 5px; }
.rc-attach { margin-top: 6px; color: var(--link); font-size: 11.5px; font-weight: 600; }
.rc-ch { padding: 6px 16px; }
.rc-ch i { margin-left: auto; color: var(--faint); font-style: normal; font-size: 10.5px; }
.link-rc h3 { margin: 16px 0 6px; font-size: 14px; }
.link-rc h3:first-child { margin-top: 0; }
.link-rc ol { margin: 0; padding-left: 20px; line-height: 1.7; }
.link-rc a { color: var(--link); }
.link-rc .bm { color: #fff !important; text-decoration: none; margin-left: 6px; cursor: grab; }
.copyable { display: block; padding: 7px 9px; border-radius: 6px; background: var(--panel-2); border: 1px solid var(--line); overflow-x: auto; white-space: nowrap; font-size: 11.5px; user-select: all; }
.dlg.wide-ish { width: min(620px, 94vw); }

/* =============================================================== AI section */
.rail-badge { position: absolute; top: 4px; right: 8px; min-width: 18px; height: 18px; padding: 0 5px; border-radius: 999px;
  background: #ef4444; color: #fff; font-size: 10px; font-weight: 700; line-height: 18px; text-align: center; }
.ai-view-head p { margin: 0 0 6px; }
.ai-item { padding: 12px 14px; border-bottom: 1px solid var(--line); cursor: pointer; }
.ai-item:hover { background: var(--panel-2); }
.ai-item.is-new { box-shadow: inset 3px 0 0 #3b82f6; animation: newrow 2.4s ease-out 1; }
.ai-item-top { display: flex; align-items: center; gap: 8px; }
.ai-item-top b { flex: 1; min-width: 0; font-size: 14px; }
.ai-item-top > span:last-child { color: var(--muted); font-size: 11.5px; font-variant-numeric: tabular-nums; }
.ai-item-sum { margin-top: 5px; font-size: 13px; color: var(--text-2); line-height: 1.4; }
.ai-item-meta { display: flex; align-items: center; gap: 6px; flex-wrap: wrap; margin-top: 7px; font-size: 11px; color: var(--muted); }
.ai-del { margin-left: auto; color: var(--faint); }
.ai-del:hover { color: #e5484d; }
.ai-stale { margin: 8px 14px 0; padding: 8px 10px; border-radius: 8px; background: rgba(240,180,76,.12); color: var(--amber); font-size: 12.5px; display: flex; align-items: center; gap: 8px; justify-content: space-between; }
.ai-item.open { background: var(--panel-2); cursor: default; }
.ai-expand { margin: 10px -14px -12px; padding-bottom: 12px; border-top: 1px solid var(--line); background: var(--panel); }
.ai-expand .btn-row { padding: 0 14px; }

/* =============================================================== AI workspace (full screen) */
.ai-ws { position: fixed; inset: 0; z-index: 1500; background: var(--bg); display: flex; flex-direction: column;
  padding-top: env(safe-area-inset-top, 0px); padding-bottom: env(safe-area-inset-bottom, 0px); }
.ai-ws[hidden] { display: none; }
.ai-ws-head { display: flex; align-items: center; gap: 14px; padding: 10px 16px; background: var(--chrome); border-bottom: 1px solid var(--line); }
.ai-ws-title { display: flex; align-items: center; gap: 8px; min-width: 0; }
.ai-ws-title .ico { width: 24px; height: 24px; color: var(--link); }
.ai-ws-title b { font-size: 18px; }
.ai-ws-title span { color: var(--muted); font-size: 13px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.ai-ws-tabs { display: flex; gap: 4px; margin-left: auto; background: var(--panel-2); border: 1px solid var(--line); border-radius: 10px; padding: 3px; }
.ai-ws-tabs button { padding: 7px 16px; border-radius: 7px; font-weight: 600; font-size: 14px; color: var(--text-2); }
.ai-ws-tabs button.on { background: var(--panel-3); color: var(--text); }
.ai-ws-tabs i { font-style: normal; background: #ef4444; color: #fff; border-radius: 999px; padding: 0 6px; font-size: 10.5px; margin-left: 4px; }
.ai-ws-body { flex: 1; min-height: 0; display: flex; }

/* chat */
.ai-chat { flex: 1; display: flex; flex-direction: column; max-width: 980px; margin: 0 auto; width: 100%; min-height: 0; }
.ai-chat > .ai-err { margin: 12px 16px 0; }
.ai-msgs { flex: 1; overflow-y: auto; padding: 18px 16px; display: flex; flex-direction: column; gap: 12px; }
.ai-msg { display: flex; flex-direction: column; }
.ai-msg.user { align-items: flex-end; }
.ai-bubble { max-width: 82%; padding: 11px 14px; border-radius: 14px; line-height: 1.5; font-size: 14px; }
.ai-msg.user .ai-bubble { background: #2a66db; color: #fff; border-bottom-right-radius: 4px; }
.ai-msg.assistant .ai-bubble { background: var(--panel); border: 1px solid var(--line); border-bottom-left-radius: 4px; }
.ai-msg.err .ai-bubble { border-color: #7f1d1d; color: #e5484d; }
.ai-bubble.ai-wait { color: var(--muted); }
.ai-li { padding-left: 14px; position: relative; margin: 2px 0; }
.ai-li::before { content: "•"; position: absolute; left: 2px; color: var(--muted); }
.ai-ref { display: inline; color: var(--link); font-weight: 700; padding: 0 2px; border-radius: 4px; background: rgba(42,102,219,.12); }
.ai-ref:hover { text-decoration: underline; }
.ai-ref.past { background: transparent; text-decoration: underline dotted; }
.ai-looked { font-size: 11px; color: var(--faint); margin: 4px 4px 0; }
.ai-hello { margin: auto; text-align: center; max-width: 640px; padding: 30px 10px; }
.ai-hello h2 { font-size: 23px; margin: 0 0 8px; }
.ai-hello p { color: var(--muted); }
.ai-suggest { display: flex; flex-wrap: wrap; gap: 8px; justify-content: center; margin-top: 14px; }
.ai-suggest button { border: 1px solid var(--line); background: var(--panel); border-radius: 999px; padding: 8px 14px; font-size: 13px; color: var(--text-2); }
.ai-suggest button:hover { border-color: var(--select-hi); color: var(--text); }
.ai-compose { display: flex; gap: 10px; padding: 12px 16px; border-top: 1px solid var(--line); background: var(--panel); }
.ai-compose textarea { flex: 1; resize: none; font: inherit; font-size: 14px; color: var(--text); background: var(--input-bg); border: 1px solid var(--line); border-radius: 10px; padding: 10px 12px; outline: none; }
.ai-compose textarea:focus { border-color: var(--select-hi); }
.ai-compose-btns { display: flex; flex-direction: column; gap: 6px; }
.ai-chat > .ai-foot { border-top: 0; text-align: center; }

/* briefs */
.ai-briefs { flex: 1; display: grid; grid-template-columns: minmax(300px, 380px) 1fr; min-height: 0; }
.ai-bl-list { border-right: 1px solid var(--line); overflow-y: auto; }
.ai-bl-list input { width: calc(100% - 24px); margin: 12px; font: inherit; font-size: 14px; color: var(--text); background: var(--input-bg); border: 1px solid var(--line); border-radius: 8px; padding: 8px 11px; outline: none; }
.ai-bl { display: flex; flex-direction: column; gap: 4px; width: 100%; text-align: left; padding: 11px 14px; border-bottom: 1px solid var(--line); }
.ai-bl:hover { background: var(--panel-2); }
.ai-bl.on { background: var(--panel-3); box-shadow: inset 3px 0 0 #3b82f6; }
.ai-bl-top { display: flex; align-items: center; gap: 8px; }
.ai-bl-top b { flex: 1; min-width: 0; font-size: 13.5px; }
.ai-bl-top i { font-style: normal; color: var(--muted); font-size: 11px; white-space: nowrap; }
.ai-bl-sum { font-size: 12.5px; color: var(--text-2); line-height: 1.35; }
.ai-bl-meta { display: flex; gap: 6px; align-items: center; font-size: 11px; color: var(--muted); }
.ai-bl-detail { overflow-y: auto; padding: 16px 20px; }
.ai-bl-head { display: flex; justify-content: space-between; gap: 12px; align-items: flex-start; margin-bottom: 10px; }
.ai-bl-head b { font-size: 18.5px; }
.ai-bl-by { color: var(--muted); font-size: 12px; margin-top: 4px; }
.ai-card.flat { margin: 0; }
.ai-ws-settings { flex: 1; overflow-y: auto; max-width: 720px; margin: 0 auto; width: 100%; padding: 8px 0 30px; }
@media (max-width: 860px) {
  .ai-ws-head { flex-wrap: wrap; gap: 8px; }
  .ai-ws-title span { display: none; }
  .ai-ws-tabs { order: 3; width: 100%; margin: 0; }
  .ai-ws-tabs button { flex: 1; padding: 7px 6px; }
  .ai-ws-head .icon-btn { margin-left: auto; }
  .ai-briefs { grid-template-columns: 1fr; grid-template-rows: 40% 60%; }
  .ai-bl-list { border-right: 0; border-bottom: 1px solid var(--line); }
  .ai-bubble { max-width: 92%; }
}

/* =============================================================== Centerline AI workspace */
.ai-ws.cl { flex-direction: row; --cl: #d9400b; --cl-d: #b83508; --cl-soft: rgba(217, 64, 11, .14); padding: 0; }
.cl-ic { width: 20px; height: 20px; fill: none; stroke: currentColor; stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; flex: none; }
.cl-side { width: 262px; flex: none; background: #0d1017; color: #cfd5e1; display: flex; flex-direction: column; border-right: 1px solid #1c2230; overflow-y: auto; }
.cl-brand { padding: 18px 16px 14px; }
.cl-brand img { width: 100%; max-width: 220px; display: block; }
.cl-nav-list { flex: 1; padding: 6px 10px; }
.cl-nav { display: flex; align-items: center; gap: 12px; width: 100%; padding: 11px 12px; margin: 2px 0; border-radius: 8px; font-size: 14px; font-weight: 500; color: #cfd5e1; text-align: left; }
.cl-nav:hover { background: #171c27; }
.cl-nav.on { background: var(--cl); color: #fff; }
.cl-nav.sub { padding: 8px 12px 8px 22px; font-size: 13.5px; font-weight: 400; color: #aab2c2; }
.cl-nav.sub.on { color: #fff; }
.cl-nav.soon { opacity: .45; cursor: default; }
.cl-nav.soon i { font-style: normal; font-size: 9.5px; color: var(--cl); margin-left: auto; }
.cl-nav .chev { margin-left: auto; width: 16px; height: 16px; transition: transform .15s; }
.cl-nav.grp.open .chev { transform: rotate(180deg); }
.cl-sub { margin: 0 0 4px 12px; border-left: 1px solid #232a3a; }
.cl-badge { margin-left: auto; background: #ef4444; color: #fff; border-radius: 999px; font-size: 10px; padding: 0 6px; line-height: 18px; }
.cl-side-foot { padding: 8px 10px 14px; border-top: 1px solid #1c2230; }
.cl-main { flex: 1; min-width: 0; display: flex; flex-direction: column; }
.cl-head { display: flex; align-items: center; gap: 12px; padding: 0 18px; height: 62px; background: var(--chrome); border-bottom: 1px solid var(--line); flex: none; }
.cl-title { margin: 0; font-size: 18px; font-weight: 700; }
.cl-region { color: var(--muted); font-size: 12.5px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.cl-who { display: inline-flex; align-items: center; gap: 8px; font-weight: 600; }
.cl-menu { display: none; }
.cl-scrim { display: none; }
.cl-content { flex: 1; min-height: 0; overflow-y: auto; display: flex; flex-direction: column; }
.cl-content > .ai-chat, .cl-content > .ai-briefs { flex: 1; }
.cl-page { padding: 22px 26px 40px; max-width: 1280px; width: 100%; margin: 0 auto; }
.cl-page-head { display: flex; align-items: center; justify-content: space-between; gap: 12px; margin-bottom: 14px; }
.cl-page-head h2, .cl-page-head h3 { margin: 0; }
.cl-page h2 { font-size: 23px; margin: 0 0 12px; }
.muted { color: var(--muted); }
.bad { color: #e5484d; }
.btn.cl-primary, .btn.cl-primary:hover { background: var(--cl); border-color: var(--cl); color: #fff; font-weight: 700; }
.btn.cl-primary[disabled] { opacity: .45; }
.btn.cl-ghost { border-color: var(--cl); color: var(--cl); background: transparent; }
.btn.cl-ok { background: #1f9d63; border-color: #1f9d63; color: #fff; }
.btn.cl-copy { background: #2a66db; border-color: #2a66db; color: #fff; }
.btn.cl-tb { min-width: 150px; justify-content: center; }
.btn.cl-tb[disabled] { opacity: .45; }
.cl-link { color: var(--cl); font-weight: 600; display: inline-flex; gap: 6px; align-items: center; margin-top: 18px; }
.cl-card { background: var(--panel); border: 1px solid var(--line); border-radius: 12px; padding: 18px 20px; margin-bottom: 16px; }
.cl-card h3 { margin: 0 0 12px; font-size: 16px; display: flex; align-items: center; justify-content: space-between; gap: 10px; }
.cl-card h4 { margin: 16px 0 6px; color: var(--muted); font-size: 12.5px; }
.cl-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(260px, 1fr)); gap: 12px 16px; }
.cl-grid .field.wide { grid-column: 1 / -1; }
.cl-card .field input, .cl-card .field select, .cl-card .field textarea, .cl-page textarea, .cl-page .cl-addrow input, .cl-page .cl-addrow select, .cl-page .cl-addrow textarea, .cl-page .cl-toolbar select {
  font: inherit; font-size: 14px; color: var(--text); background: var(--input-bg); border: 1px solid var(--line); border-radius: 8px; padding: 9px 11px; outline: none; width: 100%; }
.cl-card .field { display: flex; flex-direction: column; gap: 5px; margin: 8px 0; }
.cl-card .field > span { font-weight: 600; font-size: 13px; }
.cl-card .check { margin: 8px 0; }
.hint { color: var(--muted); font-size: 12px; margin: 4px 0; }
.cl-actions { display: flex; justify-content: space-between; align-items: center; gap: 10px; margin-top: 16px; }
.cl-actions.between { margin-top: 18px; }
.cl-back { display: flex; align-items: center; justify-content: space-between; margin-bottom: 14px; color: var(--muted); }
.cl-back .back { transform: rotate(90deg); width: 16px; height: 16px; }
.cl-chipbar { font-weight: 600; color: var(--text-2); }
.cl-addrow { display: flex; gap: 8px; margin-top: 10px; align-items: flex-start; }
.cl-addrow > * { flex: 1; } .cl-addrow .btn { flex: none; }

/* chips, visibility, tabs, menus */
.cl-chip { display: inline-flex; align-items: center; gap: 5px; padding: 3px 10px; border-radius: 7px; font-size: 12px; font-weight: 600; white-space: nowrap; }
.cl-chip .cl-ic { width: 14px; height: 14px; }
.cl-chip.green { background: rgba(31,157,99,.16); color: #34c58a; } .cl-chip.orange { background: var(--cl-soft); color: #ff7a45; }
.cl-chip.blue { background: rgba(59,130,246,.16); color: #6c9bff; } .cl-chip.red { background: rgba(229,72,77,.16); color: #ff6b70; } .cl-chip.slate { background: var(--panel-3); color: var(--text-2); }
:root[data-theme="light"] .cl-chip.green { color: #146c43; } :root[data-theme="light"] .cl-chip.orange { color: #b83508; } :root[data-theme="light"] .cl-chip.blue { color: #1d4fb8; } :root[data-theme="light"] .cl-chip.red { color: #b3252b; }
.cl-vis { display: inline-flex; background: var(--panel-2); border: 1px solid var(--line); border-radius: 9px; padding: 3px; }
.cl-vis button { padding: 7px 18px; border-radius: 6px; font-weight: 600; color: var(--text-2); }
.cl-vis button.on { background: var(--panel); color: var(--text); box-shadow: 0 1px 3px rgba(0,0,0,.25); }
.cl-tabs { display: flex; gap: 4px; border-bottom: 1px solid var(--line); margin-bottom: 16px; }
.cl-tabs button { padding: 9px 18px; font-weight: 600; color: var(--muted); border-bottom: 3px solid transparent; }
.cl-tabs button.on { color: var(--text); border-bottom-color: var(--cl); }
.cl-new { position: relative; }
.cl-menu-pop { position: absolute; right: 0; top: calc(100% + 6px); z-index: 20; min-width: 210px; background: var(--panel); border: 1px solid var(--line); border-radius: 10px; box-shadow: 0 14px 30px rgba(0,0,0,.4); overflow: hidden; }
.cl-menu-pop button { display: block; width: 100%; text-align: left; padding: 11px 14px; }
.cl-menu-pop button:hover { background: var(--panel-2); }

/* lists */
.cl-toolbar { display: flex; gap: 10px; align-items: center; margin-bottom: 14px; flex-wrap: wrap; }
.cl-toolbar .btn { flex: none; }
.cl-search { flex: 1; min-width: 200px; display: flex; align-items: center; gap: 8px; background: var(--input-bg); border: 1px solid var(--line); border-radius: 8px; padding: 0 10px; color: var(--muted); }
.cl-search input { border: 0 !important; background: transparent !important; padding: 9px 0 !important; }
.cl-toolbar select { width: auto !important; }
.cl-table-wrap { background: var(--panel); border: 1px solid var(--line); border-radius: 12px; overflow-x: auto; }
.cl-table { width: 100%; border-collapse: collapse; font-size: 13.5px; }
.cl-table th { text-align: left; padding: 12px 14px; color: var(--muted); font-weight: 600; font-size: 12.5px; border-bottom: 1px solid var(--line); white-space: nowrap; }
.cl-table td { padding: 12px 14px; border-bottom: 1px solid var(--line); vertical-align: middle; }
.cl-table tr:last-child td { border-bottom: 0; }
.cl-table tr.sel td { background: var(--cl-soft); }
.cl-table .cb { width: 36px; } .cl-table .cb input { width: 17px; height: 17px; accent-color: var(--cl); }
.cl-table td.empty { text-align: center; color: var(--muted); padding: 40px; }
.cl-assign { font: inherit; font-size: 12.5px; color: var(--text-2); background: transparent; border: 0; max-width: 150px; }
.cl-pager { display: flex; gap: 6px; justify-content: center; margin-top: 16px; }
.cl-pager button { min-width: 34px; height: 34px; border-radius: 7px; border: 1px solid var(--line); background: var(--panel); }
.cl-pager button.on { background: var(--cl); border-color: var(--cl); color: #fff; } .cl-pager button[disabled] { opacity: .4; }

/* wizard */
.cl-stepper { display: flex; align-items: center; gap: 12px; margin: 6px 0 20px; overflow-x: auto; }
.cl-step { display: flex; gap: 10px; align-items: center; flex: none; }
.cl-step .dot { width: 34px; height: 34px; border-radius: 50%; border: 2px solid var(--line-strong); display: grid; place-items: center; font-weight: 700; color: var(--muted); }
.cl-step.now .dot { border-color: var(--cl); color: var(--cl); } .cl-step.done .dot { background: var(--cl); border-color: var(--cl); color: #fff; }
.cl-step .dot .cl-ic { width: 16px; height: 16px; }
.cl-step b { display: block; font-size: 13.5px; } .cl-step i { font-style: normal; color: var(--muted); font-size: 11px; }
.cl-stepper .line { flex: 1; min-width: 30px; height: 2px; background: var(--line-strong); } .cl-stepper .line.done { background: var(--cl); }
.cl-tpl-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(230px, 1fr)); gap: 10px; margin-top: 6px; }
.cl-tpl { text-align: left; padding: 12px 14px; border: 1px solid var(--line); border-radius: 10px; background: var(--panel-2); display: flex; flex-direction: column; gap: 3px; }
.cl-tpl b { color: var(--link); } .cl-tpl span { color: var(--muted); font-size: 12px; }
.cl-tpl:hover { border-color: var(--cl); } .cl-tpl.on { background: var(--cl); border-color: var(--cl); } .cl-tpl.on b, .cl-tpl.on span { color: #fff; }
.cl-fields .hint { margin-top: -6px; }
.cl-source .cl-source-row { display: grid; grid-template-columns: 1fr 1fr auto; gap: 10px; align-items: end; }
.cl-source { background: var(--panel); border: 1px dashed var(--line-strong); border-radius: 12px; padding: 4px 16px 10px; margin-bottom: 16px; }
.cl-source .field { display: flex; flex-direction: column; gap: 4px; }
.cl-source select { font: inherit; font-size: 13.5px; color: var(--text); background: var(--input-bg); border: 1px solid var(--line); border-radius: 8px; padding: 8px 10px; }
.cl-paste { margin-bottom: 14px; } .cl-paste summary { cursor: pointer; color: var(--muted); padding: 6px 0; } .cl-paste textarea { margin: 8px 0; }
.cl-voice-fab { position: sticky; top: 8px; z-index: 5; display: flex; justify-content: flex-end; height: 0; }
.cl-fab { width: 52px; height: 52px; border-radius: 50%; background: var(--cl); color: #fff; display: grid; place-items: center; box-shadow: 0 6px 18px rgba(0,0,0,.4); }
.cl-two { display: grid; grid-template-columns: 1fr 340px; gap: 16px; align-items: start; }
.cl-narr p { margin: 0 0 14px; line-height: 1.55; padding: 8px 10px; border-radius: 8px; cursor: pointer; border-left: 3px solid transparent; }
.cl-narr p.cur { background: var(--panel-2); border-left-color: var(--cl); } .cl-narr p.ok { border-left-color: #1f9d63; }
.cl-narr-edit { min-height: 110px; margin-bottom: 14px; }
.cl-banner { display: flex; gap: 10px; align-items: flex-start; padding: 12px 14px; border-radius: 8px; background: rgba(59,130,246,.12); color: #8fb4ff; margin-top: 10px; font-size: 13px; }
.cl-pa-item { padding: 10px 12px; border-radius: 8px; margin-bottom: 6px; cursor: pointer; font-size: 13px; }
.cl-pa-item.on { background: var(--panel-3); }
.cl-pa-item .ok-line { display: flex; justify-content: space-between; color: #34c58a; font-weight: 600; }
.pa-btns { display: flex; justify-content: flex-end; gap: 8px; margin: 8px 0 4px; }
.pa-btns button { width: 30px; height: 30px; border-radius: 6px; display: grid; place-items: center; }
.pa-btns .ok { color: #34c58a; } .pa-btns .no { color: #ff6b70; } .pa-btns .ed { color: #6c9bff; }
.pa-mod { margin-top: 8px; display: flex; flex-direction: column; gap: 8px; }
.cl-rec { display: flex; gap: 12px; align-items: center; margin-bottom: 12px; } .cl-wave { display: flex; gap: 4px; align-items: center; height: 30px; }
.cl-wave i { width: 5px; height: 8px; background: var(--cl); border-radius: 3px; } .cl-wave.on i { animation: wavebar .5s ease-in-out infinite alternate; }
.cl-wave.on i:nth-child(2n) { animation-delay: .15s; } .cl-wave.on i:nth-child(3n) { animation-delay: .3s; }
@keyframes wavebar { to { height: 26px; } }
.cl-guide { display: grid; gap: 8px; max-height: 190px; overflow-y: auto; } .cl-guide b { display: block; font-size: 12.5px; } .cl-guide span { display: block; padding-left: 14px; color: var(--muted); font-size: 12px; }
#vtext { width: 100%; font: inherit; font-size: 14px; color: var(--text); background: var(--input-bg); border: 1px solid var(--line); border-radius: 8px; padding: 10px; }

/* previews */
.cl-prev-grid { display: grid; grid-template-columns: 380px 1fr; gap: 20px; }
.cl-prev-title { font-size: 25px; margin: 0 0 8px; } .cl-prev-title input { font: inherit; font-size: 25px; font-weight: 700; color: var(--text); background: transparent; border: 0; border-bottom: 1px dashed var(--line-strong); width: 100%; outline: none; }
.cl-status { display: flex; gap: 10px; align-items: center; margin: 8px 0 14px; flex-wrap: wrap; }
.cl-copilot { border: 1px solid var(--line); border-radius: 12px; background: var(--panel); display: flex; flex-direction: column; height: 420px; }
.cl-cp-head { display: flex; justify-content: space-between; align-items: center; padding: 10px 14px; border-bottom: 1px solid var(--line); }
.cl-cp-msgs { flex: 1; overflow-y: auto; padding: 10px 12px; display: flex; flex-direction: column; gap: 10px; }
.cp { font-size: 13px; line-height: 1.45; } .cp b { display: block; font-size: 11px; color: var(--muted); } .cp.assistant > div:first-of-type { background: var(--panel-2); padding: 9px 11px; border-radius: 8px; } .cp.user > div:first-of-type { background: rgba(59,130,246,.18); padding: 9px 11px; border-radius: 8px; }
.cp-btns { display: flex; gap: 8px; margin-top: 4px; } .cp-btns button { font-size: 11px; color: var(--cl); font-weight: 600; }
.cl-cp-in { padding: 10px; border-top: 1px solid var(--line); } .cl-cp-in textarea { width: 100%; }
.cl-meta { display: grid; grid-template-columns: repeat(3, 1fr); gap: 12px; margin-bottom: 14px; } .cl-meta span { display: block; color: var(--muted); font-size: 11.5px; } .cl-meta input { font: inherit; width: 100%; color: var(--text); background: var(--input-bg); border: 1px solid var(--line); border-radius: 7px; padding: 5px 8px; }
.cl-tools3 { display: grid; grid-template-columns: repeat(3, 1fr); gap: 10px; margin-bottom: 14px; }
.cl-doc { background: var(--panel); border: 1px solid var(--line); border-radius: 10px; padding: 16px 18px; line-height: 1.6; min-height: 120px; } .cl-doc p { margin: 0 0 12px; } .cl-doc p:last-child { margin: 0; }
.cl-card .cl-doc { background: transparent; border: 0; padding: 0; min-height: 0; }
.cl-reviewbar { display: flex; gap: 8px; flex-wrap: wrap; align-items: center; }
.cl-out { white-space: pre-wrap; background: var(--panel-2); border-radius: 8px; padding: 12px 14px; margin-top: 10px; max-height: 340px; overflow-y: auto; line-height: 1.5; }
.cl-rec-item { padding: 8px 0; border-bottom: 1px solid var(--line); line-height: 1.45; }
.cl-kv { display: flex; gap: 14px; padding: 7px 0; border-bottom: 1px solid var(--line); } .cl-kv span { width: 260px; color: var(--muted); flex: none; }
.cl-searchbar { display: flex; align-items: center; gap: 10px; background: var(--panel); border: 1px solid var(--line); border-radius: 12px; padding: 8px 10px 8px 14px; margin-bottom: 16px; color: var(--muted); }
.cl-searchbar input { flex: 1; font: inherit; font-size: 14px; color: var(--text); background: transparent; border: 0; outline: none; }
.cl-res { display: flex; gap: 12px; align-items: center; padding: 10px 0; border-bottom: 1px solid var(--line); } .cl-res > div:nth-child(2) { flex: 1; min-width: 0; } .cl-res .btn-row { margin: 0; }
.cl-case-grid { display: grid; grid-template-columns: 300px 1fr; gap: 16px; align-items: start; }
.cl-case { display: flex; flex-direction: column; gap: 3px; width: 100%; text-align: left; padding: 10px 12px; border-radius: 8px; border: 1px solid transparent; } .cl-case span { color: var(--muted); font-size: 11.5px; }
.cl-case:hover { background: var(--panel-2); } .cl-case.on { background: var(--cl-soft); border-color: var(--cl); }
.cl-h-input { font: inherit; font-size: 18px; font-weight: 700; color: var(--text); background: transparent; border: 0; border-bottom: 1px dashed var(--line-strong); outline: none; width: 100%; }
.cl-note { padding: 8px 0; border-bottom: 1px solid var(--line); } .cl-line { padding: 4px 0; } .cl-line b { color: var(--muted); margin-right: 6px; }
.cl-rec-row { display: flex; align-items: center; gap: 14px; padding: 12px 0; border-bottom: 1px solid var(--line); } .cl-rec-row > div:first-child { flex: 1; min-width: 0; }
.cl-sec-ed { border: 1px solid var(--line); border-radius: 10px; padding: 12px; margin-bottom: 12px; } .cl-field-ed { display: flex; gap: 8px; margin: 8px 0; } .cl-field-ed input, .cl-field-ed select { font: inherit; padding: 7px 9px; border-radius: 7px; border: 1px solid var(--line); background: var(--input-bg); color: var(--text); flex: 1; min-width: 0; }

/* transcribe */
.cl-drop { border: 2px dashed var(--line-strong); border-radius: 12px; padding: 28px 16px; text-align: center; cursor: pointer; display: flex; flex-direction: column; align-items: center; gap: 6px; }
.cl-drop.over { border-color: var(--cl); background: var(--cl-soft); } .cl-drop .cl-ic { width: 34px; height: 34px; color: var(--muted); } .cl-drop span { color: var(--muted); font-size: 11.5px; } .cl-drop i { font-style: normal; color: var(--cl); font-weight: 600; }
.cl-bar { height: 14px; background: var(--panel-3); border-radius: 8px; overflow: hidden; margin: 10px 0; } .cl-bar span { display: block; height: 100%; background: var(--cl); transition: width .3s; }
.cl-tr-grid { display: grid; grid-template-columns: 1fr 420px; gap: 20px; margin-bottom: 16px; }
.cl-cards4 { display: grid; grid-template-columns: repeat(auto-fit, minmax(190px, 1fr)); gap: 12px; margin-bottom: 14px; }
.cl-stat { background: var(--panel); border: 1px solid var(--line); border-radius: 10px; padding: 12px 14px; text-align: left; position: relative; } .cl-stat span { display: block; color: var(--muted); font-size: 12px; } .cl-stat b { font-size: 14px; word-break: break-word; }
.cl-stat.big { padding: 18px; } .cl-stat.big b { font-size: 28.5px; display: block; margin-top: 8px; } .cl-stat.big i { position: absolute; right: 14px; top: 14px; width: 40px; height: 40px; border-radius: 10px; display: grid; place-items: center; }
.cl-stat i.blue { background: rgba(59,130,246,.16); color: #6c9bff; } .cl-stat i.orange { background: var(--cl-soft); color: #ff7a45; } .cl-stat i.red { background: rgba(229,72,77,.16); color: #ff6b70; } .cl-stat i.green { background: rgba(31,157,99,.16); color: #34c58a; }
.cl-player video { width: 100%; border-radius: 10px; background: #000; max-height: 280px; }
.cl-nomedia { height: 200px; border: 1px dashed var(--line-strong); border-radius: 10px; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 10px; color: var(--muted); text-align: center; padding: 10px; }
.cl-transcript { max-height: 420px; overflow-y: auto; } .cl-transcript p { margin: 0 0 10px; line-height: 1.5; } .cl-transcript .ts { color: var(--cl); font-weight: 700; margin-right: 8px; font-variant-numeric: tabular-nums; }

/* dashboard */
.cl-dash-grid { display: grid; grid-template-columns: 1fr 300px; gap: 16px; margin: 16px 0; }
.cl-bars { display: flex; align-items: flex-end; justify-content: space-around; height: 190px; gap: 14px; padding-top: 10px; }
.cl-bar-col { flex: 1; height: 100%; display: flex; flex-direction: column; justify-content: flex-end; align-items: center; gap: 6px; font-size: 11.5px; color: var(--muted); }
.cl-bar-fill { width: 100%; max-width: 90px; background: #e8662b; border-radius: 6px 6px 0 0; display: flex; align-items: flex-end; justify-content: center; min-height: 4px; } .cl-bar-fill em { font-style: normal; color: #fff; font-weight: 700; padding-bottom: 3px; }
.cl-qa { display: flex; flex-direction: column; gap: 4px; } .cl-qa button { display: flex; align-items: center; gap: 10px; padding: 9px 10px; border-radius: 8px; text-align: left; } .cl-qa button:hover { background: var(--panel-2); }
.cl-qa .cl-qa-main { background: var(--cl); color: #fff; font-weight: 700; } .cl-qa .cl-qa-main:hover { background: var(--cl-d); } .cl-qa-sub { margin-left: 28px; display: flex; flex-direction: column; }
.cl-line-chart { width: 100%; height: 170px; } .cl-axis { display: flex; justify-content: space-between; color: var(--faint); font-size: 11px; }
.cl-legend { display: inline-flex; gap: 12px; font-size: 11.5px; font-weight: 400; } .cl-legend i { font-style: normal; color: var(--text-2); } .cl-legend i::before { content: ""; display: inline-block; width: 10px; height: 10px; border-radius: 50%; background: var(--c); margin-right: 5px; }
.cl-help ul { line-height: 1.7; } .cl-help h2 { margin-top: 24px; }

/* chat (rebuilt) */
.ai-chat { max-width: 920px; margin: 0 auto; width: 100%; display: flex; flex-direction: column; min-height: 0; flex: 1; position: relative; }
.ai-chat-tools { display: flex; gap: 8px; justify-content: flex-end; padding: 12px 16px 0; flex: none; }
.ai-hello-ic { width: 84px; margin-bottom: 8px; }
.ai-hello { margin: auto; }
.ai-ctx { margin: 0 16px; border: 1px solid var(--line); border-radius: 12px; background: var(--panel); }
.ai-ctx-head { display: flex; justify-content: space-between; width: 100%; padding: 10px 14px; color: var(--text-2); font-weight: 600; } .ai-ctx-head i { font-style: normal; font-weight: 400; color: var(--muted); font-size: 11.5px; }
.ai-ctx-body { padding: 4px 14px 14px; } .ai-ctx-lbl { font-weight: 700; margin: 10px 0 6px; font-size: 13.5px; }
.ai-ds { display: flex; flex-wrap: wrap; gap: 8px; } .ai-chip { display: inline-flex; align-items: center; gap: 6px; padding: 6px 12px; border-radius: 999px; border: 1px solid var(--line); cursor: pointer; font-size: 12.5px; color: var(--text-2); } .ai-chip input { display: none; } .ai-chip.on { background: var(--cl-soft); border-color: var(--cl); color: var(--text); }
.ai-ctx select { width: 100%; font: inherit; font-size: 14px; color: var(--text); background: var(--input-bg); border: 1px solid var(--line); border-radius: 8px; padding: 9px 10px; }
.ai-compose { align-items: flex-end; margin: 12px 16px 6px; border: 1px solid #2a66db; border-radius: 12px; background: var(--panel); padding: 8px 10px; }
.ai-compose textarea { border: 0 !important; background: transparent !important; padding: 8px !important; max-height: 140px; }
.ai-send { width: 40px; height: 40px; border-radius: 8px; color: var(--muted); display: grid; place-items: center; } .ai-send:hover { color: var(--cl); }
.cl-hist { display: flex; align-items: center; gap: 8px; border-bottom: 1px solid var(--line); } .cl-hist > button:first-child { flex: 1; text-align: left; padding: 10px 4px; display: flex; flex-direction: column; } .cl-hist span { color: var(--muted); font-size: 11.5px; }

@media (max-width: 1000px) { .cl-prev-grid, .cl-tr-grid, .cl-two, .cl-dash-grid, .cl-case-grid { grid-template-columns: 1fr; } }
@media (max-width: 860px) {
  .cl-side { position: fixed; z-index: 30; left: 0; top: 0; bottom: 0; transform: translateX(-100%); transition: transform .2s; }
  .cl-side.open { transform: none; }
  .cl-scrim.open { display: block; position: fixed; inset: 0; background: rgba(0,0,0,.5); z-index: 25; }
  .cl-menu { display: inline-flex; } .cl-region, .cl-who { display: none; }
  .cl-page { padding: 14px 12px 40px; } .cl-source .cl-source-row { grid-template-columns: 1fr; } .cl-tools3, .cl-meta { grid-template-columns: 1fr; }
  .cl-toolbar .btn.cl-tb { min-width: 0; flex: 1; }
}

/* =============================================================== CenterLine AI colors and sizes */
.ai-ws.cl, .ai-ws.cl button, .ai-ws.cl input, .ai-ws.cl select, .ai-ws.cl textarea,
body.ai-ws-open #dialog .dlg, body.ai-ws-open #dialog .dlg button, body.ai-ws-open #dialog .dlg input, body.ai-ws-open #dialog .dlg select, body.ai-ws-open #dialog .dlg textarea {
  font-family: var(--font);
  letter-spacing: 0;
}
.ai-ws.cl { --cl: #d43d07; --cl-d: #b83508; font-size: 14.5px; }
:root[data-theme="light"] .ai-ws.cl { --cl: #e04d06; }
.cl-side { background: #04071d; border-right-color: #121734; }
.cl-nav:hover { background: #0d1230; }
.cl-nav.sub { color: #aab2c9; } .cl-sub { border-left-color: #1a2040; } .cl-side-foot { border-top-color: #121734; }
.cl-nav { font-size: 14.5px; font-weight: 600; padding: 10px 12px; }
.cl-nav.sub { font-size: 13.5px; font-weight: 400; }
.cl-title { font-size: 19px; font-weight: 700; } .cl-region, .cl-who { font-size: 13.5px; }
.cl-page h2 { font-size: 24px; } .cl-card h3 { font-size: 17px; } .cl-card h4 { font-size: 13.5px; }
.ai-ws.cl .btn { font-size: 14px; font-weight: 600; }
.cl-card .field input, .cl-card .field select, .cl-card .field textarea, .cl-page textarea, .cl-page .cl-addrow input, .cl-page .cl-addrow select, .cl-page .cl-addrow textarea, .cl-page .cl-toolbar select,
.cl-search input, .cl-source select, .ai-ctx select, #vtext { font-size: 14.5px; }
.cl-card .field > span { font-size: 13.5px; font-weight: 600; } .hint { font-size: 12.5px; }
.cl-table { font-size: 14px; } .cl-table th { font-size: 13px; }
.cl-chip { font-size: 12.5px; } .cl-tpl b { font-size: 14px; } .cl-tpl span { font-size: 12.5px; }
.cl-step b { font-size: 14px; } .cl-step i { font-size: 12px; }
.cl-narr p, .cl-doc, .cl-transcript p { font-size: 14.5px; line-height: 1.6; }
.cl-prev-title, .cl-prev-title input { font-size: 25px; }
.cl-stat span { font-size: 12.5px; } .cl-stat b { font-size: 15px; } .cl-stat.big b { font-size: 30px; }
.ai-bubble { font-size: 14.5px; } .ai-hello h2 { font-size: 24px; } .ai-hello p { font-size: 14.5px; } .ai-suggest button { font-size: 13.5px; }
.ai-compose textarea { font-size: 14.5px; } .ai-ctx-lbl { font-size: 14px; } .ai-chip { font-size: 13px; }
.ai-summary { font-size: 16px; } .ai-row, .ai-sec-h { font-size: 13.5px; } .ai-bl-top b { font-size: 14px; } .ai-bl-sum { font-size: 13px; }
.cl-menu-pop button, .cl-pa-item, .cp, .cl-res, .cl-rec-item { font-size: 13.5px; }
.cl-brand img { max-width: 210px; }
/* the rail's Centerline icon is a solid shape, not a line icon */
.rail-btn .ico-cl { stroke: none; fill: currentColor; width: 26px; height: 24px; }
.cl-nav.on, .cl-nav.on:hover { background: var(--cl); color: #fff; }

/* Citizen Enterprise (no logo: a plain tag and a blue pin) */
.src-tag.cz { background: #12294d; color: #6c9bff; }
:root[data-theme="light"] .src-tag.cz { background: #dbe7ff; color: #1d4fc4; }
.row.selected .src-tag.cz { background: rgba(255,255,255,.18); color: #fff; }
.pin.cz path { fill: #3b6fe0; }
.pin.cz.gone path { fill: #55607a; }
.set-src { flex-wrap: wrap; }
#cz-box .hint { font-size: 12.5px; color: var(--muted); margin: 0 0 10px; line-height: 1.45; }
#cz-box .seg { margin-bottom: 12px; }
#cz-box .btn-row { display: flex; gap: 8px; flex-wrap: wrap; }
.cz-raw { max-height: 240px; overflow: auto; font: 11.5px/1.4 ui-monospace, Menlo, monospace; background: var(--panel-2, rgba(0,0,0,.25)); padding: 10px; border-radius: 6px; margin-top: 10px; white-space: pre-wrap; word-break: break-all; }
.cz-url { display: block; word-break: break-all; padding: 8px 10px; border-radius: 6px; background: var(--panel-3); margin: 6px 0 10px; font-size: 12px; user-select: all; }

/* Filter bar, saved views, share link, alert rules */
.filter-bar { position: relative; padding: 8px 12px 10px; border-bottom: 1px solid var(--line); display: grid; gap: 7px; }
.filter-bar[hidden] { display: none; }
.fb-row { display: flex; flex-wrap: wrap; gap: 6px; align-items: center; }
.fb-chip { display: inline-flex; align-items: center; gap: 5px; padding: 3px 9px; border-radius: 999px; border: 1px solid var(--line); background: transparent; color: var(--muted); font-size: 12px; font-weight: 600; line-height: 1.5; cursor: pointer; opacity: .6; }
.fb-chip i { font-style: normal; font-weight: 500; opacity: .75; font-size: 11px; }
.fb-chip.on { opacity: 1; color: var(--text); background: var(--panel-3); border-color: var(--select-hi, var(--line)); }
.fb-chip.pri.p1.on { background: var(--p1-bg); color: var(--p1-fg); border-color: transparent; }
.fb-chip.pri.p2.on { background: var(--p2-bg); color: var(--p2-fg); border-color: transparent; }
.fb-chip.pri.p3.on { background: var(--p3-bg); color: var(--p3-fg); border-color: transparent; }
.fb-chip:hover { opacity: 1; }
.fb-sep { flex: 1; }
.fb-views { display: inline-flex; align-items: center; gap: 5px; padding: 3px 10px; border-radius: 6px; border: 1px solid var(--line); background: transparent; color: var(--muted); font-size: 12px; font-weight: 600; max-width: 150px; }
.fb-views span { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.fb-views.on { color: var(--text); border-color: var(--select-hi, var(--line)); }
.fb-reset { font-size: 12px; color: var(--muted); text-decoration: underline; padding: 2px 4px; }
.fb-menu { position: absolute; z-index: 30; right: 10px; top: 42px; width: min(280px, calc(100% - 20px)); background: var(--panel-2, var(--panel)); border: 1px solid var(--line); border-radius: 10px; padding: 8px; box-shadow: 0 10px 30px rgba(0,0,0,.35); }
.fb-item { display: flex; align-items: center; border-radius: 6px; }
.fb-item:hover, .fb-item.on { background: var(--panel-3); }
.fb-item > button:first-child { flex: 1; text-align: left; padding: 7px 8px; font-size: 13.5px; }
.fb-item .x { padding: 6px; color: var(--muted); }
.fb-empty { font-size: 12.5px; color: var(--muted); margin: 4px 6px 8px; line-height: 1.4; }
.fb-save { display: flex; align-items: center; gap: 6px; width: 100%; padding: 8px; font-size: 13px; font-weight: 600; border-top: 1px solid var(--line); margin-top: 4px; color: var(--text); }
.fb-name { display: flex; gap: 6px; margin-top: 6px; }
.fb-name input { flex: 1; min-width: 0; padding: 6px 8px; border-radius: 6px; border: 1px solid var(--line); background: var(--panel); color: var(--text); font: inherit; font-size: 13px; }
.fv-modal { position: fixed; inset: 0; z-index: 6000; background: rgba(0,0,0,.55); display: grid; place-items: center; padding: 16px; }
.fv-card { width: min(420px, 100%); background: var(--panel); border: 1px solid var(--line); border-radius: 12px; padding: 18px; display: grid; gap: 4px; }
.fv-card h3 { margin: 0 0 4px; font-size: 17px; }
.fv-card .muted { font-size: 13px; color: var(--muted); margin: 0 0 10px; line-height: 1.45; }
.fv-card .btn-row { display: flex; gap: 8px; margin-top: 8px; flex-wrap: wrap; }
.fv-url { width: 100%; margin-top: 10px; padding: 8px 10px; border-radius: 6px; border: 1px solid var(--line); background: var(--panel-3); color: var(--text); font-size: 12.5px; }
#rules-box { margin-top: 14px; padding-top: 12px; border-top: 1px solid var(--line); }
#rules-box h4 { margin: 0 0 8px; font-size: 13.5px; }
#rules-box .hint { font-size: 12.5px; color: var(--muted); margin: 8px 0 6px; line-height: 1.4; }
.ru-item { display: flex; justify-content: space-between; align-items: flex-start; gap: 8px; padding: 6px 0; }
.ru-item small { color: var(--muted); }
.ru-item .btn { padding: 2px 6px; }

.filter-bar .fb-row { flex-wrap: nowrap; }
.filter-bar .fb-row.cats { overflow-x: auto; scrollbar-width: none; padding-bottom: 1px; }
.filter-bar .fb-row.cats::-webkit-scrollbar { display: none; }
.filter-bar .fb-chip, .filter-bar .fb-reset { flex: none; white-space: nowrap; }
.filter-bar .fb-menu { top: 100%; margin-top: -4px; right: 8px; }
.fb-views { max-width: 120px; flex: none; }

.fb-views { padding: 3px 7px; }
.fb-views.on { background: var(--panel-3); }
.fv-card select { padding: 7px 9px; border-radius: 6px; border: 1px solid var(--line); background: var(--panel-3); color: var(--text); font: inherit; font-size: 13.5px; }

/* sign-in: which screen to open */
.login-ui { display: flex; align-items: center; gap: 6px; margin: 4px 0 14px; flex-wrap: wrap; }
.login-ui span { font-size: 13px; color: var(--muted); width: 100%; }
.login-ui button { flex: 1; padding: 10px 8px; border-radius: 8px; border: 1px solid var(--line); background: var(--input-bg); color: var(--text); font: inherit; font-size: 14px; cursor: pointer; }
.login-ui button.on { border-color: #2f6bd1; background: #2f6bd1; color: #fff; font-weight: 600; }
:root[data-ui="mobile"] .login-ui button { border-radius: 0; }
:root[data-ui="mobile"] .login-ui span { color: #cfdcff; }

/* =========================================================== Mobile Enterprise (me.js)
   Night (dark) is the default; day (light) follows the Theme setting. The day
   colors were sampled from real screenshots (dark slate header, blue function
   buttons, white body). Night keeps the same layout on black and navy. The
   font is Source Sans, as in the real client (bundled, SIL Open Font License).
   Every color is a token on #me, so both themes are easy to adjust. */
:root[data-me="1"] .topbar, :root[data-me="1"] .app, :root[data-me="1"] .toast-hide { display: none !important; }
.ui-btn.on { background: #2f6bd1 !important; color: #fff !important; }

#me {
  --me-bg: #000; --me-head: #08132f; --me-bar: #000; --me-btn: #0e2b66; --me-btn-hi: #17408f; --me-btn-text: #a9c6ff; --me-dis: #050505; --me-dis-text: #2a2f3a;
  --me-callbox: #0e2150; --me-callbox-on: #1f5bb8; --me-curst: #0a0f1e;
  --me-nav: #000; --me-nav-btn: #0a1636; --me-nav-text: #cfdcff; --me-nav-on: #17306b; --me-nav-sp: #0a1636;
  --me-text: #f4f7ff; --me-muted: #8a9cc6; --me-line: #18264f; --me-row2: #020928; --me-sel: #4a86e8; --me-sel-text: #fff;
  --me-link: #7db2ff; --me-foot: #020928; --me-foot-text: #5a9bff; --me-accent: #ee5a1c; --me-green: #46c93a; --me-white: #f4f7ff;
  --me-panel: #3d4452; --me-panel-text: #f1f3f8; --me-cut: #000; --me-actions: #a8c0f0; --me-actions-text: #0b1330;
  --me-st-avail: #1f7a3a; --me-st-inq: #8a3b5c; --me-st-resp: #a8870d; --me-st-disp: #17808a; --me-st-scene: #b3382f; --me-st-text: #fff;
  --me-p1: #e5484d; --me-p2: #e8a317; --me-p3: #3b82f6; --me-modal: #0d1838; --me-npanel: #1c2d57; --nav-bg: #1c2d57;
  position: fixed; top: 0; left: 0; right: 0; height: 100vh; height: 100dvh; box-sizing: border-box; padding: env(safe-area-inset-top) env(safe-area-inset-right) env(safe-area-inset-bottom) env(safe-area-inset-left); z-index: 1400; display: grid; grid-template-rows: calc(62px * var(--s)) calc(62px * var(--s)) minmax(0, 1fr) calc(55px * var(--s));
  background: var(--me-bg); color: var(--me-text); font-family: "Source Sans 3", "Source Sans Pro", system-ui, sans-serif; font-size: 15px; font-weight: 400; --s: 1; --hh: calc(62px * var(--s)); --fh: calc(55px * var(--s));
}
:root[data-theme="light"] #me {
  --me-bg: #fcfcfe; --me-head: #2d3645; --me-bar: #1b2231; --me-btn: #2e6dcc; --me-btn-hi: #3d7be6; --me-btn-text: #fff; --me-dis: #000103; --me-dis-text: #2c303a;
  --me-callbox: #555c6c; --me-callbox-on: #2e6dcc; --me-curst: #2a3344;
  --me-nav: #fff; --me-nav-btn: #f0f0f0; --me-nav-text: #2a3040; --me-nav-on: #dcdce1; --me-nav-sp: #c9cacf;
  --me-text: #1c2234; --me-muted: #7a8090; --me-line: #dfe1e8; --me-row2: #f1f2f6; --me-sel: #cfe0fb; --me-sel-text: #0c2a55;
  --me-link: #2a62c4; --me-foot: #fff; --me-foot-text: #2a62c4; --me-accent: #e8590c; --me-green: #3fb950; --me-white: #fff;
  --me-panel: #fff; --me-panel-text: #1c2234; --me-cut: #fff; --me-actions: #d9e4f8; --me-actions-text: #1c3a6e;
  --me-st-avail: #7ad57a; --me-st-inq: #f5b9c9; --me-st-resp: #f6ea7e; --me-st-disp: #a5ece0; --me-st-scene: #ee6a62; --me-st-text: #1c2234;
  --me-modal: #fff; --me-npanel: #2d3645; --nav-bg: #2d3645;
}
#me[hidden] { display: none; }
/* the ONE account menu uses some of the same class names: reset what leaks */
#me .me-head { padding: 0; margin: 0; border: 0; gap: 0; }
#me .me-menu { border: 0; border-radius: 0; padding: 0; width: min(300px, 86%); }
#me .me-menu button { width: 100%; border-radius: 0; gap: 0; font-size: 15px; padding: 11px 20px; color: inherit; }
#me .me-menu button:hover { background: var(--me-nav-on); }
#me .me-menu .me-mx { justify-content: flex-end; padding: 12px 20px; }
#me * { box-sizing: border-box; }
#me button { font: inherit; color: inherit; border: 0; background: none; cursor: pointer; padding: 0; }
#me button:disabled { cursor: default; }
#me .mi { width: 22px; height: 22px; flex: none; }
#me .mi.sm { width: 15px; height: 15px; }
#me .grow { flex: 1; }
#me u { text-decoration: underline; text-underline-offset: 2px; text-decoration-thickness: 1px; }
#me .me-page, #me .me-mapwrap { position: absolute; inset: 0; }
#me .me-page[hidden], #me .me-mapwrap[hidden] { display: none; }

/* header */
#me .me-head { display: flex; align-items: stretch; background: var(--me-head); color: #fff; min-width: 0; }
#me .me-callbox { width: calc(146px * var(--s)); flex: none; background: var(--me-callbox); color: #fff; font-weight: 700; font-size: calc(12px * var(--s)); padding: 0 12px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; margin: 0 8px 0 0; letter-spacing: .01em; }
#me .me-callbox.on { background: var(--me-callbox-on); }
#me .me-who { flex: 1; display: flex; align-items: center; gap: calc(16px * var(--s)); padding: 0 8px; min-width: 0; overflow: hidden; white-space: nowrap; }
#me .me-who i { font-style: normal; font-size: calc(11.5px * var(--s)); opacity: .65; margin-right: 4px; }
#me .me-who b { font-weight: 400; font-size: calc(15.5px * var(--s)); }
#me .me-hb { color: #fff; padding: 0 calc(14px * var(--s)); display: flex; align-items: center; justify-content: center; position: relative; min-width: 46px; }
#me .me-hb:hover { background: rgba(255,255,255,.1); }
#me .me-txt { font-weight: 600; font-size: calc(11.5px * var(--s)); letter-spacing: .02em; }
#me .me-hb .mi { width: calc(19px * var(--s)); height: calc(19px * var(--s)); }
#me .me-hb em { position: absolute; bottom: 6px; right: 6px; font-style: normal; font-size: 10px; font-weight: 700; color: #4d94ff; }
#me .me-hb em.mail { color: #f4b63d; }
#me .me-sig { width: 46px; display: grid; place-items: center; color: #3fb950; }
#me .me-sig .mi { width: 18px; height: 18px; }
#me .me-sig.bad { color: #e5484d; }

/* function row: Law enforcement */
#me .me-bar { display: flex; align-items: stretch; background: var(--me-bar); gap: 3px; min-width: 0; overflow: hidden; padding-bottom: 3px; }
#me.me-police .me-bar { background: var(--me-bar); }
#me .me-curst { flex: none; width: calc(150px * var(--s)); position: relative; background: var(--me-curst); color: #fff; font-weight: 700; font-size: calc(11.5px * var(--s)); text-transform: uppercase; display: grid; place-items: center; border-bottom: 3px solid var(--me-green); }
#me .me-curst i { position: absolute; top: 2px; right: 8px; font-style: normal; opacity: .55; font-size: 14px; line-height: 1; letter-spacing: 1px; }
#me .me-fk { flex: 1; display: flex; gap: 3px; min-width: 0; }
#me .me-tb { position: relative; flex: 1 1 0; min-width: 0; background: var(--me-btn); color: var(--me-btn-text); font-weight: 700; font-size: calc(11.5px * var(--s)); text-transform: uppercase; display: grid; place-items: center; padding: 8px 4px 4px; text-align: center; line-height: 1.15; }
#me .me-tb small { position: absolute; top: 3px; left: 6px; font-size: 9.5px; font-weight: 600; opacity: .75; }
#me .me-tb:not(.off):hover { background: var(--me-btn-hi); }
#me .me-tb.off { background: var(--me-dis); color: var(--me-dis-text); }

/* status buttons: Fire/EMS */
#me.me-fire .me-bar { gap: 6px; }
#me .me-sts { display: flex; gap: 3px; min-width: 0; flex: 1; overflow-x: auto; scrollbar-width: none; }
#me .me-st { flex: none; width: calc(96px * var(--s)); min-width: 70px; background: var(--me-curst); color: #fff; font-weight: 700; font-size: calc(11.5px * var(--s)); text-transform: uppercase; display: grid; place-items: center; padding: 0 6px; text-align: center; line-height: 1.15; border-bottom: 3px solid #fff; }
#me .me-st.cur { border-bottom-color: var(--me-green); }
#me .me-st:hover { filter: brightness(1.25); }
#me .me-top { display: flex; gap: 3px; flex: none; }
#me .me-top .me-tb { flex: none; width: calc(108px * var(--s)); padding: 0 6px; }

/* body, nav column */
#me .me-body { display: grid; grid-template-columns: minmax(0, 1fr) calc(78px * var(--s)); min-height: 0; }
#me.me-nonav .me-body { grid-template-columns: minmax(0, 1fr) 0; }
#me.me-nonav .me-nav { display: none; }
#me .me-main { min-width: 0; min-height: 0; position: relative; background: var(--me-bg); }
#me .me-fold { position: absolute; z-index: 700; right: 0; top: 24px; width: 22px; height: 64px; border-radius: 10px 0 0 10px; background: #7a7d86; color: #fff; display: grid; place-items: center; opacity: .85; }
#me .me-fold .mi { width: 16px; height: 16px; }
#me.me-nonav .me-fold .mi { transform: rotate(180deg); }
#me .me-mapwrap:not([hidden]) ~ .me-fold { display: none; }
#me .me-nav { background: var(--me-nav); display: flex; flex-direction: column; gap: 2px; padding: 2px 0 0 2px; overflow: auto; }
#me .me-nb { position: relative; background: var(--me-nav-btn); color: var(--me-nav-text); min-height: 40px; flex: 1 1 0; max-height: calc(66px * var(--s)); display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 4px; font-weight: 700; font-size: calc(10.5px * var(--s)); text-transform: uppercase; text-align: center; padding: 4px 3px; line-height: 1.2; }
#me .me-nb:first-child { background: var(--me-nav-btn); }
#me .me-nb.txt { font-size: 10.5px; }
#me .me-nb small { position: absolute; top: 3px; left: 5px; font-size: 9px; font-weight: 600; opacity: .8; }
#me .me-nb .mi { width: calc(23px * var(--s)); height: calc(23px * var(--s)); }
#me .me-nb:hover { filter: brightness(1.08); }
#me .me-nb.on { background: var(--me-nav-on); }
#me .me-nsp { flex: 0 0 10px; min-height: 10px; background: var(--me-nav-sp); }

/* footer */
#me .me-foot { display: flex; align-items: center; background: var(--me-foot); color: var(--me-foot-text); min-width: 0; padding: 0 16px; gap: 14px; border-top: 1px solid var(--me-line); }
#me.me-fire .me-foot { flex-direction: row; }
#me.me-fire .me-foot > .me-loc:only-child { margin-left: auto; }
#me .me-loc { display: flex; align-items: center; gap: 8px; font-weight: 700; font-size: calc(14px * var(--s)); color: var(--me-foot-text); min-width: 0; }
#me .me-loc b { font-weight: 700; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
#me .me-loc .mi { width: 18px; height: 18px; }
#me .me-fstep { display: flex; align-items: center; gap: 10px; color: var(--me-text); font-weight: 700; font-size: 14px; min-width: 0; }
#me .me-fstep b { font-weight: 700; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
#me .me-fstep .nav-arrow { width: 22px; height: 22px; color: var(--me-text); }
#me .me-fd { font-weight: 400; opacity: .8; }
#me .me-fbtn { background: var(--me-btn); color: var(--me-btn-text); font-weight: 700; font-size: 12px; padding: 12px 18px; }

/* main pane + tables */
#me .me-pane { height: 100%; display: flex; flex-direction: column; min-height: 0; padding: 14px 16px 0 14px; position: relative; }
#me .me-title { display: flex; align-items: center; gap: 12px; min-height: 48px; }
#me .me-title h2 { margin: 0; font-size: 17px; font-weight: 600; letter-spacing: .01em; }
#me .me-btn { background: var(--me-actions); color: var(--me-actions-text); font-weight: 700; font-size: 12px; padding: 10px 20px; border-radius: 2px; }
#me .me-btn.dim { opacity: .55; }
#me .me-btn.out { background: transparent; border: 1px solid color-mix(in srgb, var(--me-text) 30%, transparent); color: var(--me-btn-hi); }
#me.me-police .me-btn.out { padding: 11px 24px; font-size: 14px; font-weight: 400; letter-spacing: .02em; }
#me .me-btn.out.wide { font-size: 11px; font-weight: 700; padding: 11px 16px; }
#me .me-btn.out.on { border-color: var(--me-sel); }
#me .me-btn.sm { padding: 8px 14px; background: var(--me-btn); color: var(--me-btn-text); }
#me .me-chip { display: inline-flex; align-items: center; gap: 6px; background: color-mix(in srgb, var(--me-btn) 30%, transparent); color: var(--me-link); font-size: 13px; font-weight: 600; padding: 4px 9px; border-radius: 12px; }
#me .me-chip .mi { width: 12px; height: 12px; }
#me .me-actwrap { position: relative; }
#me .me-pop { position: absolute; right: 0; top: calc(100% + 4px); z-index: 20; min-width: 200px; background: var(--me-modal); border: 1px solid var(--me-line); border-radius: 4px; box-shadow: 0 12px 30px rgba(0,0,0,.4); overflow: hidden; }
#me .me-pop button { display: block; width: 100%; text-align: left; padding: 11px 14px; font-size: 14px; }
#me .me-pop button:hover { background: var(--me-nav-on); }

#me .me-th, #me .me-tr { display: grid; align-items: center; column-gap: 12px; padding: 0 8px; }
#me .me-th { min-height: 40px; color: var(--me-muted); font-size: 13px; border-bottom: 0; }
#me .me-th button { display: inline-flex; align-items: center; gap: 4px; text-align: left; color: inherit; font-weight: 400; min-width: 0; overflow: hidden; white-space: nowrap; }
#me .me-ar { width: 11px; height: 11px; opacity: .8; } #me .me-ar.dim { opacity: .4; }
#me .me-scroll { flex: 1; overflow: auto; min-height: 0; -webkit-user-select: text; user-select: text; scrollbar-width: thin; }
#me .me-tr { min-height: 37px; font-size: 15px; font-weight: 600; cursor: default; border-left: 0; }
#me .me-tr:nth-child(odd) { background: var(--me-row2); }
#me.me-police .me-tr:nth-child(odd) { background: var(--me-row2); }
#me .me-tr.p1 { box-shadow: inset 4px 0 var(--me-p1); } #me .me-tr.p2 { box-shadow: inset 4px 0 var(--me-p2); }
#me .me-tr.sel { background: var(--me-sel); color: var(--me-sel-text); }
#me .me-tr > span { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
#me .me-tr.msg { grid-template-columns: 150px 1fr; min-height: 44px; }
#me .me-pinbtn { color: var(--me-muted); margin-right: 4px; vertical-align: -5px; } #me .me-pinbtn .mi { width: 18px; height: 18px; }
#me .me-tr.sel .me-pinbtn { color: var(--me-sel-text); }
#me .me-mine { font-size: 10px; color: var(--me-green); text-decoration: none; margin-left: 4px; }
#me .me-th:not(.pend):has(.c-case), #me .me-tr:has(.c-case):not(.u):not(.msg):not(.pend) { grid-template-columns: 1.3fr .6fr 1.5fr 1.9fr 1.3fr .8fr; }
#me .me-th.pend, #me .me-tr.pend { grid-template-columns: .5fr 1.3fr 1.5fr 1.9fr 1.3fr .8fr; }
#me .me-th:has(.u-unit), #me .me-tr.u { grid-template-columns: .9fr 1fr 1.4fr 1.3fr 1.6fr .8fr 1fr; }
#me .pol .me-th:has(.u-unit), #me .pol .me-tr.u { grid-template-columns: .8fr 1.5fr 1.1fr .8fr 1.2fr 1.5fr 1.1fr; }
#me .me-tr.u { min-height: 37px; }
#me .me-tr.u.mine { font-weight: 700; }
#me .u-unit { display: flex; align-items: center; gap: 8px; }
#me .u-unit b { font-weight: 700; text-decoration: underline; text-underline-offset: 2px; font-size: 15.5px; }
#me .me-badge { display: inline-block; margin-left: 8px; background: #2e6dcc; color: #fff; border-radius: 10px; padding: 0 7px; font-size: 11px; }
#me .me-ring { width: 11px; height: 11px; border-radius: 50%; border: 2px solid var(--me-text); margin-left: auto; opacity: .8; }
#me .u-st { align-self: stretch; display: flex; margin: 0 -4px; }
#me .u-st b { display: flex; align-items: center; width: 100%; font-weight: 400; padding: 0 8px; color: var(--me-st-text); }
#me .st-avail { background: var(--me-st-avail); } #me .st-inq { background: var(--me-st-inq); } #me .st-resp { background: var(--me-st-resp); }
#me .st-disp { background: var(--me-st-disp); } #me .st-scene { background: var(--me-st-scene); }
#me .u-addr .mi, #me .u-loc .mi { vertical-align: -3px; margin-right: 4px; color: var(--me-muted); }
#me .u-loc, #me .u-prob, #me .u-mdt, #me .u-oov { font-weight: 400; }
#me .me-empty { padding: 40px 16px; color: var(--me-muted); text-align: center; font-weight: 400; font-size: 16px; }
#me .me-note { color: var(--me-muted); font-size: 13px; font-weight: 400; margin: 10px 4px; line-height: 1.4; }
#me .me-find { display: flex; align-items: center; gap: 6px; border-bottom: 1px solid color-mix(in srgb, var(--me-text) 40%, transparent); padding: 4px 4px; width: 210px; color: var(--me-muted); }
#me .me-find .mi { width: 17px; height: 17px; }
#me .me-find input, #me .me-form input, #me .me-fl input, #me .me-sbox input, #me .me-modal textarea, #me .me-modal input { -webkit-user-select: text; user-select: text; background: transparent; border: 0; color: var(--me-text); font: inherit; outline: 0; width: 100%; }
#me .me-scrb { position: absolute; right: 2px; top: 110px; bottom: 60px; width: 0; pointer-events: none; }
#me .me-scrb button { pointer-events: auto; position: absolute; right: 0; width: 22px; height: 40px; background: var(--me-btn); color: #fff; display: grid; place-items: center; opacity: .9; }
#me .me-scrb button:first-child { top: 0; } #me .me-scrb button:last-child { bottom: 0; }
#me .me-scrb .mi { width: 16px; height: 16px; }

/* detail */
#me .detail { padding: 0; }
#me .me-dh { display: flex; align-items: center; gap: 12px; padding: 12px 16px; font-size: 16px; }
#me .me-dh h2 { margin: 0; font-size: 17px; font-weight: 700; }
#me .me-pri { font-size: 12px; font-weight: 700; padding: 3px 12px; border-radius: 14px; background: var(--me-p3); color: #fff; }
#me .me-pri.p1 { background: var(--me-p1); } #me .me-pri.p2 { background: var(--me-p2); color: #1b1300; }
#me .me-car { color: var(--me-muted); display: grid; place-items: center; }
#me .me-dg { display: grid; grid-template-columns: 1.15fr 1fr .6fr 1fr; grid-template-areas: "a x x x" "a p cn cs" "a p ph cs"; padding: 0 16px 14px; gap: 6px 16px; }
#me .me-dg small { display: block; font-size: 13px; color: var(--me-muted); margin-bottom: 4px; }
#me .me-dg big { display: block; font-size: 23px; font-weight: 400; line-height: 1.25; }
#me .me-dg strong { font-size: 19px; font-weight: 400; }
#me .me-dg .a { grid-area: a; } #me .me-dg .x { grid-area: x; } #me .me-dg .p { grid-area: p; } #me .me-dg .cn { grid-area: cn; } #me .me-dg .ph { grid-area: ph; } #me .me-dg .cs { grid-area: cs; }
#me .me-dg .cs big { font-size: 20px; }
#me .me-pp { display: flex; flex-direction: column; align-items: center; gap: 4px; color: var(--me-muted); font-size: 11px; font-weight: 600; }
#me .me-tabs { display: flex; gap: 2px; padding: 0 12px; }
#me .me-tabs button { padding: 10px 12px; font-weight: 600; font-size: 11px; color: var(--me-text); border-bottom: 2px solid transparent; }
#me .me-tabs button.on { border-bottom-color: var(--me-link); }
#me .me-ch { display: flex; align-items: center; gap: 12px; padding: 8px 16px; background: var(--me-row2); }
#me .me-ch h3 { margin: 0; font-size: 14px; font-weight: 700; }
#me .me-ck { display: flex; align-items: center; gap: 6px; font-weight: 600; font-size: 13px; cursor: pointer; }
#me .me-ck input { display: none; } #me .me-ck i { width: 16px; height: 16px; border-radius: 3px; border: 2px solid var(--me-link); display: grid; place-items: center; }
#me .me-ck input:checked + i { background: var(--me-link); } #me .me-ck input:checked + i::after { content: "✓"; color: var(--me-bg); font-size: 11px; font-style: normal; font-weight: 800; }
#me .me-cm { display: grid; grid-template-columns: 30px 1fr auto; gap: 8px; padding: 9px 16px; font-weight: 600; font-size: 14.5px; align-items: start; }
#me .me-cm:nth-child(even) { background: var(--me-row2); }
#me .me-cm:not(.ex) .tx { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
#me .me-cm .by { font-size: 12px; color: var(--me-muted); font-weight: 400; white-space: nowrap; }
#me .me-cm.sel { background: var(--me-sel); color: var(--me-sel-text); } #me .me-cm.sel .by { color: inherit; }
#me .me-cm .n { color: var(--me-muted); } #me .me-cm.sel .n { color: inherit; }
#me .me-kv { display: grid; grid-template-columns: 160px 1fr; gap: 0; margin: 0; padding: 4px 16px; }
#me .me-kv dt, #me .me-kv dd { margin: 0; padding: 10px 0; border-bottom: 1px solid var(--me-line); font-size: 15px; }
#me .me-kv dt { color: var(--me-muted); } #me .me-kv dd { font-weight: 600; }
#me .me-form { padding: 10px 16px; max-width: 460px; }
#me .me-form label, #me .me-fld { display: block; margin-bottom: 28px; } #me .me-form label span, #me .me-fld > span { display: block; font-size: 13px; color: var(--me-muted); margin-bottom: 6px; }
#me .me-form input { border-bottom: 1px solid var(--me-muted); padding: 6px 0; font-size: 16px; }
#me .me-dd { position: relative; }
#me .me-ddb { width: 100%; text-align: left; border-bottom: 1px solid var(--me-muted); padding: 7px 18px 7px 0; min-height: 34px; font-size: 16px; position: relative; }
#me .me-ddb i { position: absolute; right: 2px; top: 15px; border: 4px solid transparent; border-top-color: var(--me-text); }
#me .me-ddl { position: absolute; z-index: 30; left: 0; width: 100%; top: 100%; max-height: 260px; overflow: auto; background: var(--me-modal); border: 1px solid var(--me-line); box-shadow: 0 10px 28px rgba(0,0,0,.45); }
#me .me-ddl button { display: block; width: 100%; text-align: left; padding: 11px 12px; font-size: 14.5px; text-transform: uppercase; font-weight: 600; }
#me .me-ddl button:hover, #me .me-ddl button.on { background: #1d5fd0; color: #fff; }

/* map */
#me .me-mapwrap { background: #0b1020; overflow: hidden; }
#me #me-map { position: absolute; inset: 0 66px 0 0; background: #0b1020; }
#me .me-msearch { position: absolute; top: 0; left: 0; width: min(calc(333px * var(--s)), calc(100% - 80px)); z-index: 520; display: flex; align-items: center; gap: 10px; padding: 0 12px; height: calc(43px * var(--s)); font-size: calc(13.5px * var(--s)); background: rgba(20,32,66,.9); color: #cfd8ee; }
#me .me-msearch input { font-size: calc(13.5px * var(--s)); font-style: italic; color: #fff; background: transparent; border: 0; outline: 0; font: inherit; font-style: italic; width: 100%; }
#me .me-msearch input::placeholder { color: rgba(255,255,255,.65); }
#me .me-mtools { position: absolute; top: 0; right: 0; bottom: 0; width: calc(52px * var(--s)); z-index: 600; display: flex; flex-direction: column; background: #000; gap: 1px; }
#me .me-mt { flex: 1; max-height: calc(49px * var(--s)); min-height: 36px; display: grid; place-items: center; color: #fff; background: #000; }
#me .me-mt .mi { width: calc(25px * var(--s)); height: calc(25px * var(--s)); }
#me .me-mt.on { background: var(--me-accent); color: #fff; }
#me .me-mt:not(.on):hover { background: #1b2a52; }
#me .me-fs, #me .me-north { position: absolute; bottom: 14px; z-index: 500; width: calc(44px * var(--s)); height: calc(44px * var(--s)); border-radius: 50%; background: rgba(120,126,140,.8); color: #fff; display: grid; place-items: center; font-weight: 800; }
#me .me-fs { left: 14px; } #me .me-north { right: calc(calc(52px * var(--s)) + 14px); font-size: calc(14px * var(--s)); }
#me .me-mp { position: absolute; top: 0; right: 54px; bottom: 0; width: min(330px, calc(100% - 54px)); z-index: 550; background: var(--me-panel); color: var(--me-panel-text); padding: 12px 0 0; overflow: auto; display: flex; flex-direction: column; }
#me .me-mp h3 { display: flex; align-items: center; gap: 10px; margin: 6px 14px 14px; font-size: 17px; font-weight: 600; }
#me .me-sw, #me .me-mi { display: flex; align-items: center; justify-content: space-between; width: 100%; padding: 15px 14px; text-align: left; font-size: 15px; }
#me .me-mp .me-sw, #me .me-mp .me-mi { padding: 15px 14px; }
#me .me-mi:hover { background: color-mix(in srgb, currentColor 10%, transparent); }
#me .me-sw.dis span { opacity: .5; }
#me .me-sw i { width: 42px; height: 20px; border-radius: 12px; background: color-mix(in srgb, currentColor 30%, transparent); position: relative; flex: none; }
#me .me-sw i::after { content: ""; position: absolute; top: 2px; left: 2px; width: 16px; height: 16px; border-radius: 50%; background: #fff; transition: left .15s; }
#me .me-sw i.on { background: var(--me-accent); } #me .me-sw i.on::after { left: 24px; }
#me .me-mfoot { margin-top: auto; background: rgba(0,0,0,.18); }
#me .me-mfoot .me-mi { gap: 10px; } #me .me-mfoot em { margin-left: auto; font-style: normal; color: #f5a623; font-weight: 800; }
#me .me-lp { position: absolute; top: 0; left: 0; bottom: 0; width: min(330px, calc(100% - 130px)); z-index: 560; background: var(--me-npanel); color: #fff; display: flex; flex-direction: column; }
#me .me-lt { display: grid; grid-template-columns: repeat(3, 1fr); gap: 2px; padding: 8px 8px 0; }
#me .me-lt button { padding: 10px 4px; background: rgba(255,255,255,.12); font-weight: 600; font-size: 13px; }
#me .me-lt button.on { background: #2f8cf0; }
#me .me-lb { flex: 1; overflow: auto; padding: 10px 12px; }
#me .me-li { display: flex; align-items: center; justify-content: space-between; width: 100%; text-align: left; padding: 8px 0; gap: 8px; }
#me .me-li b { display: block; font-size: 14.5px; font-weight: 600; } #me .me-li small { font-size: 12px; opacity: .8; font-weight: 400; }
#me .me-lc { position: absolute; top: 0; left: min(330px, calc(100% - 130px)); z-index: 560; width: 50px; background: #000; }
#me .me-lc button { display: grid; place-items: center; width: 50px; height: 54px; color: #fff; }

/* turn-by-turn panel */
#me #me-navp { position: absolute; inset: 0; pointer-events: none; z-index: 565; }
#me .me-np { pointer-events: auto; position: absolute; top: 0; left: 0; bottom: 0; width: min(350px, calc(100% - 120px)); background: var(--me-npanel); color: #fff; display: flex; flex-direction: column; padding: 14px 16px 10px; }
#me .me-nph { display: flex; align-items: center; justify-content: space-between; margin-bottom: 8px; }
#me .me-end .mi { width: 44px; height: 44px; }
#me .me-hide { display: inline-flex; align-items: center; gap: 4px; font-weight: 700; font-size: 16px; }
#me .me-npk { display: flex; gap: 22px; padding: 7px 0; font-size: 16px; } #me .me-npk span { width: 46px; flex: none; } #me .me-npk b { font-weight: 700; }
#me .me-npflag { background: rgba(229,72,77,.25); padding: 6px 8px; font-size: 13px; margin: 4px 0; }
#me .me-nps { flex: 1; overflow: auto; border-top: 1px solid rgba(255,255,255,.25); margin-top: 8px; padding-top: 6px; }
#me .me-step { display: grid; grid-template-columns: 42px 1fr; gap: 6px; padding: 12px 0; align-items: start; }
#me .me-step.done { opacity: .55; } #me .me-step.now { background: rgba(255,255,255,.1); margin: 0 -8px; padding: 12px 8px; }
#me .me-sa { display: grid; place-items: center; height: 32px; } #me .me-sa .nav-arrow, #me .me-sa .mi { width: 30px; height: 30px; color: #fff; }
#me .me-st-t { display: block; font-size: 14.5px; line-height: 1.3; } #me .me-st-t b { display: block; font-weight: 600; margin-bottom: 3px; }
#me .me-st-l { display: flex; align-items: center; gap: 10px; } #me .me-st-l em { font-style: normal; font-weight: 700; font-size: 13px; } #me .me-st-l i { flex: 1; height: 1px; background: rgba(255,255,255,.55); }
#me .me-st-t small { display: block; text-align: right; font-size: 13.5px; margin-top: 2px; opacity: .9; }
#me .me-npa { display: flex; align-items: center; justify-content: space-between; border-top: 1px solid rgba(255,255,255,.25); padding: 12px 0 6px; font-size: 15px; }
#me .me-tg { width: 50px; height: 22px; border-radius: 12px; background: rgba(255,255,255,.35); position: relative; }
#me .me-tg i { position: absolute; top: -1px; left: -1px; width: 24px; height: 24px; border-radius: 50%; background: #fff; transition: left .15s; }
#me .me-tg.on { background: #f4a63f; } #me .me-tg.on i { left: 27px; background: #f1932a; }
#me .me-npc { font-size: 11px; opacity: .7; padding-top: 4px; }
#me .me-nshow { pointer-events: auto; position: absolute; left: 0; top: 56px; display: flex; align-items: center; gap: 6px; background: var(--me-npanel); color: #fff; padding: 12px 14px 12px 8px; font-weight: 700; z-index: 570; }
#me.me-full .me-head, #me.me-full .me-bar { display: none; }
#me.me-full { grid-template-rows: 0 0 minmax(0, 1fr) calc(55px * var(--s)); }

/* markers */
.me-mk { background: none; border: 0; }
.me-pm { position: absolute; transform: translate(-50%, -100%); display: flex; flex-direction: column; align-items: flex-start; pointer-events: auto; font-family: "Source Sans 3", sans-serif; }
.me-pm .pin { width: 28px; height: 36px; color: #3b8cf0; filter: drop-shadow(0 1px 2px rgba(0,0,0,.6)); margin-left: -14px; }
.me-pm.p1 .pin { color: #e5484d; } .me-pm.p2 .pin { color: #f0a020; }
.me-pm .halo { position: absolute; left: -22px; bottom: -14px; width: 44px; height: 44px; border-radius: 50%; background: rgba(59,130,246,.3); }
.me-pm.p1 .halo { background: rgba(229,72,77,.35); } .me-pm.p2 .halo { background: rgba(240,160,32,.35); }
.me-pm.sel .pin { color: #e5484d; }
.me-lab { position: absolute; left: 10px; top: 2px; white-space: nowrap; background: #fff; color: #1b2a63; font: 600 12.5px/1 "Source Sans 3", sans-serif; padding: 5px 8px 5px 14px; box-shadow: 0 1px 3px rgba(0,0,0,.4); }
.me-lab.sel { background: #3fa9f5; color: #fff; font-weight: 700; padding-right: 0; display: flex; align-items: center; gap: 8px; }
.me-lab.sel:not(:has(i)) { padding-right: 12px; }
.me-lab i { font-style: normal; background: #5fd27a; color: #fff; padding: 5px 8px; margin: -5px 0; }
.me-lab2 { position: absolute; left: 14px; top: 26px; white-space: nowrap; background: #fff; color: #c0392b; font: 700 12px/1 "Source Sans 3", sans-serif; padding: 4px 8px; box-shadow: 0 1px 3px rgba(0,0,0,.4); }
.me-me { width: 30px; height: 30px; border-radius: 50%; background: #2f6bd1; color: #fff; display: grid; place-items: center; border: 2px solid #fff; transform: translate(-50%, -50%); box-shadow: 0 1px 4px rgba(0,0,0,.5); }
.me-me .mi { width: 16px; height: 16px; }

/* menu, search, modals */
#me .me-scrim { position: absolute; inset: 0; z-index: 800; background: rgba(0,0,0,.25); }
#me .me-scrim.dark { background: rgba(0,0,0,.55); z-index: 900; }
#me .me-menu { position: absolute; top: var(--hh); right: 0; bottom: var(--fh); width: min(300px, 86%); z-index: 850; background: var(--me-modal); display: flex; flex-direction: column; overflow: auto; box-shadow: -10px 0 30px rgba(0,0,0,.35); }
#me .me-menu button { text-align: left; padding: 15px 20px; font-weight: 400; font-size: 15px; display: flex; justify-content: space-between; align-items: center; }
#me .me-menu button:hover:not(:disabled) { background: var(--me-nav-on); } #me .me-menu button.dim { opacity: .4; }
#me .me-menu .me-mx { justify-content: flex-end; padding: 12px 20px; }
#me .me-menu .me-sw { border-top: 0; }
#me .me-grp { padding: 14px 20px 4px; font-size: 12px; color: var(--me-muted); text-transform: uppercase; letter-spacing: .05em; font-weight: 600; }
#me .me-sbox { position: absolute; top: var(--hh); left: 0; right: 0; z-index: 850; display: flex; gap: 10px; align-items: center; background: var(--me-modal); padding: 10px 14px; box-shadow: 0 10px 24px rgba(0,0,0,.35); }
#me .me-sbox label { flex: 1; display: flex; align-items: center; gap: 10px; border-bottom: 2px solid var(--me-link); padding: 6px 2px; }
#me .me-sbox button { font-weight: 700; color: var(--me-link); padding: 8px 12px; }
#me .me-modal { position: absolute; z-index: 950; top: 50%; left: 50%; transform: translate(-50%, -50%); width: min(430px, calc(100% - 28px)); max-height: 82%; overflow: auto; background: var(--me-modal); border-radius: 4px; padding: 20px; box-shadow: 0 20px 50px rgba(0,0,0,.5); }
#me .me-modal h3 { margin: 0 0 12px; font-size: 19px; font-weight: 600; } #me .me-modal p { margin: 0 0 8px; line-height: 1.45; }
#me .me-modal textarea { border: 1px solid var(--me-line); border-radius: 2px; padding: 8px; resize: vertical; }
#me .me-mb { display: flex; justify-content: flex-end; gap: 8px; margin-top: 14px; }
#me .me-mb button { padding: 10px 20px; font-weight: 700; background: var(--me-nav-btn); color: var(--me-nav-text); }
#me .me-mb button.pri { background: var(--me-btn); color: var(--me-btn-text); }
#me .me-fl { display: block; margin-bottom: 14px; } #me .me-fl span { display: block; font-size: 13px; color: var(--me-muted); margin-bottom: 4px; } #me .me-fl input { border-bottom: 1px solid var(--me-muted); padding: 6px 0; }
#me .me-modal .me-mi { color: var(--me-text); padding: 13px 8px; }

#me .me-modal.pickm { width: min(460px, calc(100% - 28px)); }
#me .me-pkfind { width: 100%; margin-bottom: 8px; }
#me .me-pklist { max-height: 46vh; overflow: auto; }
#me .me-pk { display: flex; gap: 14px; justify-content: flex-start; align-items: baseline; border-top: 1px solid var(--me-line); }
#me .me-pk b { width: 90px; flex: none; font-weight: 700; } #me .me-pk span { font-weight: 400; }

/* login screen follows the Interface choice */
:root[data-ui="mobile"] .login { background: #000; font-family: "Source Sans 3", sans-serif; }
:root[data-ui="mobile"][data-theme="light"] .login { background: #f4f6fb; }
:root[data-ui="mobile"] .login::before { content: "CentralSquareOne CHP · Mobile Enterprise"; position: absolute; top: 0; left: 0; right: 0; height: 40px; display: flex; align-items: center; padding: 0 16px; background: #08132f; color: #fff; font-weight: 700; letter-spacing: .02em; }
:root[data-ui="mobile"][data-theme="light"] .login::before { background: #2d3645; }
:root[data-ui="mobile"] .login-box { background: #14306b; border-radius: 0; box-shadow: none; border: 0; }
:root[data-ui="mobile"][data-theme="light"] .login-box { background: #2d3645; }
:root[data-ui="mobile"] .login-box h1, :root[data-ui="mobile"] .login-box label, :root[data-ui="mobile"] .login-for { color: #fff; }
:root[data-ui="mobile"] .login-box input { background: transparent; border: 0; border-bottom: 2px solid #f1c232; border-radius: 0; color: #fff; }
:root[data-ui="mobile"] .login-logos { display: none; }
:root[data-ui="mobile"] .login-go { background: #a9bff2; color: #0b1330; border-radius: 0; font-weight: 700; text-transform: uppercase; letter-spacing: .06em; }

/* phones: the buttons and nav column get tighter */
@media (max-width: 860px) {
  #me { grid-template-rows: 44px 56px minmax(0, 1fr) 44px; font-size: 14px; --hh: 44px; --fh: 44px; }
  #me .me-callbox { width: 112px; font-size: 11px; }
  #me .me-who { gap: 10px; } #me .me-who span:nth-child(3) { display: none; }
  #me .me-who i { display: none; } #me .me-who b { font-size: 15px; }
  #me .me-hb { padding: 0 8px; min-width: 38px; } #me .me-search, #me .me-hb.me-txt { display: none; }
  #me .me-sig { width: 32px; }
  #me .me-bar { overflow: hidden; } #me .me-st { width: 78px; min-width: 78px; font-size: 10.5px; } #me .me-top .me-tb { width: 76px; font-size: 10.5px; }
  #me .me-top .me-tb:nth-child(1), #me .me-top .me-tb:nth-child(3) { display: none; }
  #me .me-curst { width: 104px; font-size: 11px; }
  #me .me-fk { overflow-x: auto; scrollbar-width: none; } #me .me-fk .me-tb { flex: none; width: 84px; font-size: 10.5px; }
  #me .me-body { grid-template-columns: minmax(0, 1fr); grid-template-rows: minmax(0, 1fr) 58px; }
  #me.me-nonav .me-body { grid-template-rows: minmax(0, 1fr) 0; }
  #me .me-nav { flex-direction: row; padding: 2px 0 0; overflow-x: auto; }
  #me .me-nb { flex: 1 0 64px; min-height: 0; max-height: none; } #me .me-nsp { display: none; }
  #me .me-fold { display: none; }
  #me .me-pane { padding: 10px 0 0; } #me .me-title { padding: 0 10px; }
  #me .me-th, #me .me-tr { min-width: 780px; }
  #me .me-scroll, #me .me-pane > .me-th { overflow-x: auto; }
  #me .me-dg { grid-template-columns: 1fr 1fr; grid-template-areas: "a a" "x x" "cn cs" "ph p"; }
  #me .me-dg big { font-size: 19px; }
  #me .me-kv { grid-template-columns: 100px 1fr; }
  #me .me-mtools { width: 46px; } #me #me-map { inset: 0 46px 0 0; } #me .me-mp { right: 46px; } #me .me-north { right: 58px; }
  #me .me-lp { width: calc(100% - 96px); } #me .me-lc { left: calc(100% - 96px); }
  #me .me-np { width: calc(100% - 52px); }
  #me .me-fstep { font-size: 12px; } #me .me-fbtn { padding: 10px 8px; font-size: 10.5px; }
  #me .me-scrb { display: none; }
}

/* =============================================================== mail / inbox */
.mail-btn { position: relative; }
.mail-n { position: absolute; top: -3px; right: -4px; min-width: 16px; height: 16px; padding: 0 4px; border-radius: 9px; background: #e5484d; color: #fff; font: 700 10.5px/16px var(--font, inherit); text-align: center; border: 2px solid var(--chrome); box-sizing: content-box; }
.mail-n[hidden] { display: none; }
.mail-banner { display: flex; align-items: center; gap: 12px; padding: 8px 14px; background: #a31f2b; color: #fff; font-size: 14px; position: relative; z-index: 900; }
.mail-banner > b { font-size: 11.5px; letter-spacing: .08em; background: rgba(0,0,0,.28); padding: 3px 8px; border-radius: 4px; flex: none; }
.mail-banner .mb-t { flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.mail-banner .btn { background: rgba(255,255,255,.16); color: #fff; border-color: rgba(255,255,255,.35); }
.mail-banner .icon-btn { color: #fff; }

.inbox-dlg { width: min(940px, 96vw); height: min(700px, 90vh); }
.ib { flex: 1; min-height: 0; display: grid; grid-template-columns: 330px minmax(0, 1fr); }
.ib.composing { display: block; overflow-y: auto; }
.ib-left { display: flex; flex-direction: column; min-height: 0; border-right: 1px solid var(--line); }
.ib-tools { display: flex; align-items: center; gap: 8px; padding: 12px 12px 8px; }
.ib-tools .spacer, .mc-foot .spacer, .ib-act .spacer { flex: 1; }
.ib-tabs { display: flex; gap: 4px; padding: 0 12px 8px; border-bottom: 1px solid var(--line); }
.ib-tabs button { padding: 6px 12px; border-radius: 8px; color: var(--muted); font-weight: 600; font-size: 13.5px; }
.ib-tabs button.on { background: var(--panel-3); color: var(--text); }
.ib-tabs em { font-style: normal; background: #e5484d; color: #fff; border-radius: 9px; padding: 0 6px; font-size: 11px; margin-left: 3px; }
.ib-list { flex: 1; overflow-y: auto; min-height: 0; }
.ib-row { display: flex; gap: 10px; width: 100%; text-align: left; padding: 11px 12px; border-bottom: 1px solid var(--line); color: var(--text-2, var(--text)); }
.ib-row:hover { background: var(--panel-2, var(--panel-3)); }
.ib-row.sel { background: var(--panel-3); }
.ib-row.unread .ib-from, .ib-row.unread .ib-sub { font-weight: 700; color: var(--text); }
.ib-row.unread::before { content: ""; width: 8px; height: 8px; border-radius: 50%; background: #2a66db; flex: none; margin-top: 12px; order: 3; display: none; }
.ib-row .avatar.sm { width: 32px; height: 32px; font-size: 12px; flex: none; }
.ib-main { display: flex; flex-direction: column; min-width: 0; flex: 1; gap: 2px; }
.ib-top { display: flex; justify-content: space-between; gap: 8px; }
.ib-top time { color: var(--faint); font-size: 12px; flex: none; }
.ib-from { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-size: 14px; }
.ib-row.unread .ib-top time { color: #2a66db; font-weight: 600; }
.ib-sub { font-size: 13.5px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.ib-snip { font-size: 12.5px; color: var(--muted); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.ib-tag { font-style: normal; font-size: 10px; font-weight: 700; letter-spacing: .06em; padding: 2px 6px; border-radius: 4px; background: #2a66db; color: #fff; margin-right: 6px; vertical-align: 1px; }
.ib-tag.urgent { background: #c0272d; }
.ib-empty { padding: 28px 16px; text-align: center; color: var(--muted); font-size: 14px; margin: 0; }
.ib-notify { padding: 10px 14px; border-top: 1px solid var(--line); font-size: 13.5px; }
.ib-notify .check { padding: 2px 0; }
.ib-right { min-width: 0; overflow-y: auto; }
.ib-none { height: 100%; display: grid; place-content: center; justify-items: center; gap: 6px; color: var(--faint); }
.ib-none .ico { width: 44px; height: 44px; }
.ib-read { padding: 18px 22px; display: flex; flex-direction: column; min-height: 100%; }
.ib-back { display: none; align-self: flex-start; margin-bottom: 8px; }
.ib-rh h3 { margin: 6px 0 12px; font-size: 20px; font-weight: 600; }
.ib-meta { display: flex; gap: 12px; align-items: center; font-size: 13.5px; }
.ib-meta .muted, .mc .muted, .mc-p .muted { color: var(--muted); }
.ib-body { white-space: pre-wrap; overflow-wrap: anywhere; line-height: 1.55; font-size: 15px; padding: 18px 0; flex: 1; }
.ib-act { display: flex; gap: 8px; align-items: center; padding-top: 12px; border-top: 1px solid var(--line); }
.btn.danger { color: #e5484d; }

.mc { padding: 16px 22px 20px; }
.mc-row { display: flex; gap: 12px; margin-bottom: 12px; }
.mc-l { width: 36px; padding-top: 8px; color: var(--muted); font-weight: 500; font-size: 13.5px; }
.mc-to { flex: 1; min-width: 0; }
.mc-chips { display: flex; flex-wrap: wrap; gap: 6px; min-height: 30px; align-items: center; margin-bottom: 8px; }
.mc-chip { display: inline-flex; align-items: center; gap: 4px; background: var(--panel-3); border-radius: 14px; padding: 4px 6px 4px 11px; font-size: 13px; }
.mc-chip.all { padding-right: 11px; background: #2a66db; color: #fff; }
.mc-chip button { width: 18px; height: 18px; border-radius: 50%; color: var(--muted); line-height: 1; font-size: 15px; }
.mc-chip button:hover { background: rgba(0,0,0,.15); color: var(--text); }
#mc-find { width: 100%; box-sizing: border-box; padding: 9px 11px; border-radius: 8px; border: 1px solid var(--line); background: var(--panel-2, var(--panel)); color: var(--text); font: inherit; }
.mc-people { max-height: 168px; overflow-y: auto; margin-top: 6px; border: 1px solid var(--line); border-radius: 8px; }
.mc-p { display: flex; align-items: center; gap: 10px; padding: 6px 10px; cursor: pointer; font-size: 14px; }
.mc-p:hover { background: var(--panel-3); }
.mc-p input { width: 16px; height: 16px; accent-color: #2a66db; }
.mc-p .avatar.sm { width: 26px; height: 26px; font-size: 10.5px; }
.mc-adm { background: var(--panel-2, var(--panel-3)); border: 1px solid var(--line); border-radius: 8px; padding: 6px 12px; margin: 0 0 14px 48px; }
.mc .field textarea { width: 100%; box-sizing: border-box; padding: 10px 11px; border-radius: 8px; border: 1px solid var(--line); background: var(--panel-2, var(--panel)); color: var(--text); font: inherit; resize: vertical; }
.mc .field input#mc-sub { width: 100%; box-sizing: border-box; }
.mc-foot { display: flex; align-items: center; gap: 10px; margin-top: 8px; }

@media (max-width: 760px) {
  .inbox-dlg { width: 100vw; height: 100vh; max-height: 100vh; border-radius: 0; }
  .ib { grid-template-columns: minmax(0, 1fr); }
  .ib .ib-right { display: none; }
  .ib.reading .ib-left { display: none; }
  .ib.reading .ib-right { display: block; }
  .ib-back { display: inline-flex; }
  .mc-adm { margin-left: 0; }
  .mc-row { flex-direction: column; gap: 2px; } .mc-l { width: auto; padding: 0; }
}

#me .me-mailbar { display: flex; gap: 10px; padding: 0 14px 10px; }

/* =============================================================== Vantis branding */
/* Logos: Vantis by default, CentralSquare/CenterLine when chosen in Settings */
html[data-brand="csq"] img.b-v.b-v { display: none !important; }
html:not([data-brand="csq"]) .b-c.b-c { display: none !important; }
img[hidden] { display: none !important; }
.wm-logo.b-v { height: 38px; }
.login-logo.b-v { height: 46px; }
.wall-bar .wm-logo.b-v { height: 26px; }
@media (max-width: 860px) { .wm-logo.b-v { height: 24px; } }
@media (min-width: 861px) and (max-width: 1100px) { .wm-logo.b-v { height: 32px; } }
:root[data-ui="mobile"] .login::before { content: "Mobile Enterprise"; }

/* =============================================================== sign-in (website) */
body.lx-body { margin: 0; display: block; overflow: hidden; background: #0b1220; }
.lx {
  --lx-bg: #0b1220; --lx-panel: #0f172a; --lx-line: #25314a; --lx-text: #eef2fa; --lx-muted: #93a1ba; --lx-orange: #ff6a0a; --lx-orange-hi: #ff8433;
  position: fixed; inset: 0; display: grid; grid-template-columns: minmax(400px, 5fr) 7fr;
  background: var(--lx-bg); color: var(--lx-text); font-family: Inter, system-ui, -apple-system, "Segoe UI", sans-serif;
}
.lx-left { position: relative; z-index: 1; display: flex; flex-direction: column; min-height: 0; overflow-y: auto; padding: max(26px, env(safe-area-inset-top)) 36px max(18px, env(safe-area-inset-bottom)); background: var(--lx-bg); }
.lx-top { height: 48px; display: flex; align-items: center; }
.lx-logo { height: 46px; width: auto; max-width: 100%; display: block; }
.lx-main { margin: auto 0; padding: 28px 0; }
.lx-form { width: min(380px, 100%); margin: 0 auto; display: flex; flex-direction: column; }
.lx-appmark { height: 54px; display: flex; align-items: center; margin-bottom: 26px; }
.lx-appmark img { height: 52px; width: auto; max-width: 100%; display: block; }
.lx-form h1 { margin: 0 0 22px; font-size: 26px; font-weight: 600; letter-spacing: -.01em; color: var(--lx-text); text-align: left; }
.lx-step { display: flex; flex-direction: column; }
.lx-step[hidden] { display: none; }
.lx-form label { font-size: 13.5px; font-weight: 600; color: var(--lx-text); margin-bottom: 8px; }
.lx-form input {
  width: 100%; box-sizing: border-box; padding: 13px 14px; font: inherit; font-size: 15.5px; color: var(--lx-text);
  background: #131c30; border: 1px solid var(--lx-line); border-radius: 8px; outline: none;
}
.lx-form input::placeholder { color: #66748f; }
.lx-form input:focus { border-color: var(--lx-orange); box-shadow: 0 0 0 3px rgba(255,106,10,.22); }
.lx-form input.bad { border-color: #e5484d; }
.lx-pw { position: relative; }
.lx-pw input { padding-right: 46px; letter-spacing: .25em; }
.lx-pw input::placeholder { letter-spacing: normal; }
.lx-eye { position: absolute; right: 4px; top: 50%; transform: translateY(-50%); width: 40px; height: 40px; display: grid; place-items: center; color: var(--lx-muted); border-radius: 8px; cursor: pointer; }
.lx-eye:hover { color: var(--lx-text); }
.lx-back { display: inline-flex; align-items: center; gap: 8px; align-self: flex-start; margin: 0 0 18px; padding: 8px 12px 8px 8px; color: var(--lx-text); font: inherit; font-size: 14.5px; border-radius: 8px; background: #131c30; border: 1px solid var(--lx-line); cursor: pointer; font-variant-numeric: tabular-nums; }
.lx-back:hover { border-color: #3a4a6b; }
.lx-ui { margin-top: 18px; }
.lx-ui > span { display: block; font-size: 13.5px; font-weight: 600; margin-bottom: 8px; }
.lx-ui > div { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; }
.lx-ui button { padding: 11px 8px; font: inherit; font-size: 14px; font-weight: 500; color: var(--lx-muted); background: #131c30; border: 1px solid var(--lx-line); border-radius: 8px; cursor: pointer; }
.lx-ui button:hover { border-color: #3a4a6b; color: var(--lx-text); }
.lx-ui button.on { color: var(--lx-text); border-color: var(--lx-orange); background: rgba(255,106,10,.12); box-shadow: inset 0 0 0 1px var(--lx-orange); font-weight: 600; }
.lx-error { margin: 12px 0 0; color: #ff6b70; font-size: 13.5px; }
.lx-go {
  margin-top: 22px; align-self: flex-end; min-width: 120px; padding: 12px 26px; font: inherit; font-size: 15px; font-weight: 700; letter-spacing: .01em;
  color: #0b1220; background: var(--lx-orange); border: 0; border-radius: 8px; cursor: pointer; transition: background .15s;
}
.lx-go:hover { background: var(--lx-orange-hi); }
.lx-go:disabled { opacity: .65; cursor: default; }
.lx-go.busy { position: relative; color: transparent; }
.lx-go.busy::after { content: ""; position: absolute; inset: 0; margin: auto; width: 18px; height: 18px; border: 2.5px solid rgba(11,18,32,.3); border-top-color: #0b1220; border-radius: 50%; animation: lxspin .7s linear infinite; }
@keyframes lxspin { to { transform: rotate(360deg); } }
.lx-foot { margin-top: auto; padding-top: 18px; font-size: 11.5px; line-height: 1.5; color: var(--lx-muted); }
.lx-foot p { margin: 0 0 12px; max-width: 520px; }
.lx-brand-switch { display: flex; align-items: center; gap: 4px; }
.lx-brand-switch span { margin-right: 6px; }
.lx-brand-switch button { padding: 4px 10px; font: inherit; font-size: 11.5px; color: var(--lx-muted); border: 1px solid transparent; border-radius: 6px; cursor: pointer; background: none; }
.lx-brand-switch button:hover { color: var(--lx-text); }
.lx-brand-switch button.on { color: var(--lx-text); border-color: var(--lx-line); background: #131c30; }

.lx-right { position: relative; overflow: hidden; background: #05080f; }
.lx-hero, .lx-shade { position: absolute; inset: 0; }
.lx-photo { position: absolute; inset: 0; background-size: cover; background-position: center 42%; opacity: 0; transition: opacity 1.8s ease; transform: scale(1.03); }
.lx-photo.on { opacity: 1; animation: lxdrift 16s ease-out forwards; }
@keyframes lxdrift { from { transform: scale(1.03); } to { transform: scale(1.1); } }
.lx-shade { background: linear-gradient(90deg, rgba(11,18,32,.7), rgba(11,18,32,0) 38%), linear-gradient(0deg, rgba(5,8,15,.86), rgba(5,8,15,0) 58%); }
.lx-slogan { position: absolute; left: 9%; right: 9%; bottom: 11%; }
.lx-slogan h2 { margin: 0; font-size: clamp(34px, 4.4vw, 68px); line-height: 1.04; font-weight: 700; letter-spacing: -.025em; text-shadow: 0 2px 24px rgba(0,0,0,.5); }
.lx-words { position: relative; height: 1.25em; margin-top: 4px; font-size: clamp(24px, 3vw, 46px); font-weight: 300; letter-spacing: -.01em; color: var(--lx-orange-hi); text-shadow: 0 2px 20px rgba(0,0,0,.5); }
.lx-words span { position: absolute; left: 0; top: 0; opacity: 0; transform: translateY(10px); transition: opacity .6s ease, transform .6s ease; white-space: nowrap; }
.lx-words span.on { opacity: 1; transform: none; }

@media (max-width: 860px) {
  .lx { grid-template-columns: 1fr; }
  .lx-right { position: absolute; inset: 0; z-index: 0; }
  .lx-shade { background: rgba(8,13,24,.55); }
  .lx-slogan { display: none; }
  .lx-left { background: rgba(11,18,32,.88); backdrop-filter: blur(8px); -webkit-backdrop-filter: blur(8px); padding-left: 22px; padding-right: 22px; }
  .lx-logo { height: 38px; }
  .lx-form { width: 100%; max-width: 420px; }
  .lx-go { align-self: stretch; }
}
@media (prefers-reduced-motion: reduce) { .lx-photo.on { animation: none; } .lx-words span { transition: none; } }

/* =============================================================== Mail in Mobile Enterprise: same look as that screen */
.inbox-dlg.me-skin {
  --me-bg: #000; --me-head: #08132f; --me-bar: #000; --me-btn: #0e2b66; --me-btn-hi: #17408f; --me-btn-text: #a9c6ff; --me-dis: #050505; --me-dis-text: #2a2f3a;
  --me-callbox: #0e2150; --me-callbox-on: #1f5bb8; --me-curst: #0a0f1e;
  --me-nav: #000; --me-nav-btn: #0a1636; --me-nav-text: #cfdcff; --me-nav-on: #17306b; --me-nav-sp: #0a1636;
  --me-text: #f4f7ff; --me-muted: #8a9cc6; --me-line: #18264f; --me-row2: #020928; --me-sel: #4a86e8; --me-sel-text: #fff;
  --me-link: #7db2ff; --me-foot: #020928; --me-foot-text: #5a9bff; --me-accent: #ee5a1c; --me-green: #46c93a; --me-white: #f4f7ff;
  --me-panel: #3d4452; --me-panel-text: #f1f3f8; --me-cut: #000; --me-actions: #a8c0f0; --me-actions-text: #0b1330;
  --me-st-avail: #1f7a3a; --me-st-inq: #8a3b5c; --me-st-resp: #a8870d; --me-st-disp: #17808a; --me-st-scene: #b3382f; --me-st-text: #fff;
  --me-p1: #e5484d; --me-p2: #e8a317; --me-p3: #3b82f6; --me-modal: #0d1838; --me-npanel: #1c2d57; --nav-bg: #1c2d57;
  font-family: "Source Sans 3", "Source Sans Pro", system-ui, sans-serif; font-size: 15px;
  --line: var(--me-line); --text: var(--me-text); --muted: var(--me-muted); --faint: var(--me-muted); --panel: var(--me-modal);
  --panel-2: var(--me-row2); --panel-3: var(--me-nav-on); --input-bg: var(--me-row2); --select-hi: var(--me-sel);
  background: var(--me-modal); color: var(--me-text); border: 1px solid var(--me-line); border-radius: 4px; box-shadow: 0 20px 50px rgba(0,0,0,.5);
}
:root[data-theme="light"] .inbox-dlg.me-skin {
  --me-bg: #fcfcfe; --me-head: #2d3645; --me-bar: #1b2231; --me-btn: #2e6dcc; --me-btn-hi: #3d7be6; --me-btn-text: #fff; --me-dis: #000103; --me-dis-text: #2c303a;
  --me-callbox: #555c6c; --me-callbox-on: #2e6dcc; --me-curst: #2a3344;
  --me-nav: #fff; --me-nav-btn: #f0f0f0; --me-nav-text: #2a3040; --me-nav-on: #dcdce1; --me-nav-sp: #c9cacf;
  --me-text: #1c2234; --me-muted: #7a8090; --me-line: #dfe1e8; --me-row2: #f1f2f6; --me-sel: #cfe0fb; --me-sel-text: #0c2a55;
  --me-link: #2a62c4; --me-foot: #fff; --me-foot-text: #2a62c4; --me-accent: #e8590c; --me-green: #3fb950; --me-white: #fff;
  --me-panel: #fff; --me-panel-text: #1c2234; --me-cut: #fff; --me-actions: #d9e4f8; --me-actions-text: #1c3a6e;
  --me-st-avail: #7ad57a; --me-st-inq: #f5b9c9; --me-st-resp: #f6ea7e; --me-st-disp: #a5ece0; --me-st-scene: #ee6a62; --me-st-text: #1c2234;
  --me-modal: #fff; --me-npanel: #2d3645; --nav-bg: #2d3645;
}
.inbox-dlg.me-skin .dlg-head { background: var(--me-head); color: #fff; border-bottom: 0; padding: 0 6px 0 16px; min-height: 40px; }
.inbox-dlg.me-skin .dlg-head h2 { font-size: 14px; font-weight: 700; text-transform: uppercase; letter-spacing: .06em; }
.inbox-dlg.me-skin .dlg-head .icon-btn { color: #fff; border-radius: 2px; }
.inbox-dlg.me-skin .btn { border-radius: 2px; border: 0; background: var(--me-nav-btn); color: var(--me-nav-text); font-weight: 700; font-size: 12px; text-transform: uppercase; letter-spacing: .03em; padding: 9px 14px; }
.inbox-dlg.me-skin .btn:hover { background: var(--me-nav-on); }
.inbox-dlg.me-skin .btn.primary { background: var(--me-btn); color: var(--me-btn-text); }
.inbox-dlg.me-skin .btn.primary:hover { background: var(--me-btn-hi); }
.inbox-dlg.me-skin .btn.ghost { background: transparent; box-shadow: inset 0 0 0 1px var(--me-line); }
.inbox-dlg.me-skin .btn.danger { color: var(--me-p1); }
.inbox-dlg.me-skin .ib-left, .inbox-dlg.me-skin .ib-act, .inbox-dlg.me-skin .ib-notify, .inbox-dlg.me-skin .ib-tabs { border-color: var(--me-line); }
.inbox-dlg.me-skin .ib-tabs button { border-radius: 2px; font-weight: 700; font-size: 12px; text-transform: uppercase; letter-spacing: .03em; padding: 7px 12px; }
.inbox-dlg.me-skin .ib-tabs button.on { background: var(--me-btn); color: var(--me-btn-text); }
.inbox-dlg.me-skin .ib-tabs em { background: var(--me-accent); border-radius: 2px; }
.inbox-dlg.me-skin .ib-row { border-bottom: 0; }
.inbox-dlg.me-skin .ib-row:nth-child(odd) { background: var(--me-row2); }
.inbox-dlg.me-skin .ib-row:hover { background: var(--me-nav-btn); }
.inbox-dlg.me-skin .ib-row.sel { background: var(--me-sel); color: var(--me-sel-text); box-shadow: none; }
.inbox-dlg.me-skin .ib-row.sel .ib-snip, .inbox-dlg.me-skin .ib-row.sel .ib-top time { color: var(--me-sel-text); opacity: .85; }
.inbox-dlg.me-skin .ib-row.unread { box-shadow: inset 4px 0 var(--me-accent); }
.inbox-dlg.me-skin .ib-row.unread .ib-top time { color: var(--me-link); }
.inbox-dlg.me-skin .avatar { border-radius: 2px; }
.inbox-dlg.me-skin .ib-tag { border-radius: 2px; background: var(--me-btn-hi); color: #fff; }
.inbox-dlg.me-skin .ib-tag.urgent { background: var(--me-p1); }
.inbox-dlg.me-skin .ib-rh h3 { font-weight: 600; }
.inbox-dlg.me-skin .check input, .inbox-dlg.me-skin .mc-p input { accent-color: var(--me-sel); }
.inbox-dlg.me-skin .mc-chip { border-radius: 2px; background: var(--me-nav-on); color: var(--me-text); }
.inbox-dlg.me-skin .mc-chip.all { background: var(--me-btn-hi); color: #fff; }
.inbox-dlg.me-skin #mc-find, .inbox-dlg.me-skin .mc .field input, .inbox-dlg.me-skin .mc .field textarea { background: transparent; border: 0; border-bottom: 1px solid var(--me-muted); border-radius: 0; color: var(--me-text); }
.inbox-dlg.me-skin .mc .field textarea { border: 1px solid var(--me-line); border-radius: 2px; background: var(--me-row2); }
.inbox-dlg.me-skin .mc-people, .inbox-dlg.me-skin .mc-adm { border-radius: 2px; border-color: var(--me-line); background: var(--me-row2); }
.inbox-dlg.me-skin .mc-p:hover { background: var(--me-nav-btn); }
.inbox-dlg.me-skin .dlg-error, .inbox-dlg.me-skin .lx-error { color: var(--me-p1); }
@media (max-width: 760px) { .inbox-dlg.me-skin { border-radius: 0; } }
:root[data-me="1"] .mail-banner { position: fixed; top: 0; left: 0; right: 0; z-index: 1500; height: 40px; padding: 0 12px; background: #b3261e; border-radius: 0; font-family: "Source Sans 3", system-ui, sans-serif; }

.lx-chip { align-self: flex-start; margin-bottom: 14px; padding: 5px 11px; font-size: 11.5px; font-weight: 700; letter-spacing: .09em; text-transform: uppercase; color: var(--lx-orange-hi); border: 1px solid rgba(255,106,10,.5); border-radius: 6px; background: rgba(255,106,10,.1); }
.lx-admin-link { margin-left: auto; font-size: 11.5px; color: var(--lx-muted); text-decoration: none; padding: 4px 8px; border-radius: 6px; }
.lx-admin-link:hover { color: var(--lx-text); background: #131c30; }

/* ============ App portal (after sign-in) ============ */
body.pt-body { --lx-bg: #0b1220; --lx-panel: #0f172a; --lx-line: #25314a; --lx-text: #eef2fa; --lx-muted: #93a1ba; --lx-orange: #ff6a0a; --lx-orange-hi: #ff8433;
  display: block; margin: 0; min-height: 100vh; overflow-y: auto; background: var(--lx-bg); color: var(--lx-text); font-family: Inter, system-ui, -apple-system, "Segoe UI", sans-serif; }
.pt-bar { position: sticky; top: 0; z-index: 20; background: rgba(11,18,32,.88); backdrop-filter: blur(10px); border-bottom: 1px solid var(--lx-line); padding-top: env(safe-area-inset-top); }
.pt-bar-in { max-width: 1120px; margin: 0 auto; display: flex; align-items: center; gap: 12px; padding: 10px 24px; }
.pt-logo img { height: 34px; width: auto; display: block; }
.pt-spacer { flex: 1; }
.pt-user { position: relative; }
.pt-user-btn { display: flex; align-items: center; gap: 10px; padding: 5px 10px 5px 6px; font: inherit; color: var(--lx-text); background: #131c30; border: 1px solid var(--lx-line); border-radius: 999px; cursor: pointer; }
.pt-user-btn:hover { border-color: #3a4a6b; }
.pt-av { width: 30px; height: 30px; border-radius: 50%; display: grid; place-items: center; overflow: hidden; font-size: 12px; font-weight: 700; color: #fff; background: #2a66db; }
.pt-av img { width: 100%; height: 100%; object-fit: cover; }
.pt-user-t { display: flex; flex-direction: column; align-items: flex-start; line-height: 1.15; text-align: left; }
.pt-user-t b { font-size: 13px; font-weight: 600; }
.pt-user-t small { font-size: 11px; color: var(--lx-muted); }
.pt-menu { position: absolute; right: 0; top: calc(100% + 8px); min-width: 250px; padding: 8px; background: var(--lx-panel); border: 1px solid var(--lx-line); border-radius: 12px; box-shadow: 0 18px 40px rgba(0,0,0,.5); display: flex; flex-direction: column; gap: 4px; }
.pt-menu[hidden] { display: none; }
.pt-menu-row { display: flex; align-items: center; justify-content: space-between; gap: 10px; padding: 6px 8px; font-size: 13px; color: var(--lx-muted); }
.pt-menu > button, .pt-menu > a { display: block; width: 100%; box-sizing: border-box; text-align: left; padding: 9px 10px; font: inherit; font-size: 13.5px; color: var(--lx-text); background: none; border: 0; border-radius: 8px; cursor: pointer; text-decoration: none; }
.pt-menu > button:hover, .pt-menu > a:hover { background: #1a2540; }
.pt-seg { display: inline-flex; gap: 2px; padding: 2px; background: #131c30; border: 1px solid var(--lx-line); border-radius: 8px; }
.pt-seg button { padding: 4px 9px; font: inherit; font-size: 12px; color: var(--lx-muted); background: none; border: 0; border-radius: 6px; cursor: pointer; }
.pt-seg button.on { color: var(--lx-text); background: rgba(255,106,10,.18); box-shadow: inset 0 0 0 1px var(--lx-orange); }

.pt-hero { position: relative; height: 230px; overflow: hidden; }
.pt-hero-photo { position: absolute; inset: 0; background-size: cover; background-position: center 40%; }
.pt-hero-shade { position: absolute; inset: 0; background: linear-gradient(90deg, rgba(11,18,32,.92) 0%, rgba(11,18,32,.55) 55%, rgba(11,18,32,.25) 100%), linear-gradient(0deg, var(--lx-bg) 0%, transparent 45%); }
.pt-hero-in { position: relative; max-width: 1120px; margin: 0 auto; height: 100%; box-sizing: border-box; padding: 0 24px 34px; display: flex; flex-direction: column; justify-content: flex-end; }
.pt-kicker { margin: 0 0 6px; font-size: 12px; font-weight: 700; letter-spacing: .14em; text-transform: uppercase; color: var(--lx-orange-hi); }
.pt-hero h1 { margin: 0; font-size: clamp(28px, 4vw, 40px); font-weight: 600; letter-spacing: -.02em; }
.pt-sub { margin: 6px 0 0; font-size: 15px; color: var(--lx-muted); }

.pt-main { max-width: 1120px; margin: 0 auto; padding: 8px 24px 20px; }
.pt-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(260px, 1fr)); gap: 16px; }
.pt-tile { position: relative; display: flex; flex-direction: column; gap: 6px; padding: 18px; min-height: 190px; box-sizing: border-box; color: var(--lx-text); text-decoration: none; background: var(--lx-panel); border: 1px solid var(--lx-line); border-radius: 14px; transition: border-color .15s, transform .15s, background .15s; }
a.pt-tile:hover { border-color: var(--lx-orange); background: #121c33; transform: translateY(-2px); }
a.pt-tile:focus-visible { outline: 2px solid var(--lx-orange); outline-offset: 2px; }
.pt-tile[hidden] { display: none; }
.pt-logo-box { height: 54px; display: flex; align-items: center; margin-bottom: 8px; }
.pt-logo-box img { max-height: 46px; max-width: 80%; width: auto; object-fit: contain; }
.pt-txt { font-size: 20px; font-weight: 700; letter-spacing: -.01em; }
.pt-ico { width: 50px; height: 50px; display: grid; place-items: center; color: var(--lx-orange-hi); background: rgba(255,106,10,.1); border: 1px solid rgba(255,106,10,.35); border-radius: 12px; }
.pt-tile h2 { margin: 0; display: flex; align-items: center; gap: 8px; flex-wrap: wrap; font-size: 18px; font-weight: 600; }
.pt-tile p { margin: 0; font-size: 13.5px; line-height: 1.45; color: var(--lx-muted); }
.pt-go { margin-top: auto; padding-top: 10px; font-size: 13px; font-weight: 600; color: var(--lx-orange-hi); }
.pt-go::after { content: " \2192"; }
.pt-badge { font-style: normal; min-width: 20px; padding: 1px 7px; font-size: 12px; font-weight: 700; text-align: center; color: #0b1220; background: var(--lx-orange); border-radius: 999px; }
.pt-badge[hidden] { display: none; }
.pt-chip { font-style: normal; padding: 2px 8px; font-size: 10.5px; font-weight: 700; letter-spacing: .08em; text-transform: uppercase; color: var(--lx-orange-hi); border: 1px solid rgba(255,106,10,.5); border-radius: 5px; background: rgba(255,106,10,.1); }
.pt-chip.soft { color: var(--lx-muted); border-color: var(--lx-line); background: #131c30; }
.pt-soon { opacity: .6; cursor: default; }
.pt-soon .pt-logo-box img { filter: grayscale(.6); }
.pt-foot { max-width: 1120px; margin: 0 auto; padding: 18px 24px max(24px, env(safe-area-inset-bottom)); font-size: 11.5px; color: var(--lx-muted); }
@media (max-width: 600px) {
  .pt-bar-in, .pt-main, .pt-foot, .pt-hero-in { padding-left: 16px; padding-right: 16px; }
  .pt-user-t { display: none; }
  .pt-hero { height: 190px; }
  .pt-grid { grid-template-columns: 1fr; }
  .pt-tile { min-height: 0; }
}

/* ============ Admin Portal ============ */
body.ad-body { --lx-bg: #0b1220; --lx-panel: #0f172a; --lx-line: #25314a; --lx-text: #eef2fa; --lx-muted: #93a1ba; --lx-orange: #ff6a0a; --lx-orange-hi: #ff8433;
  display: block; margin: 0; min-height: 100vh; background: var(--lx-bg); color: var(--lx-text); font-family: Inter, system-ui, -apple-system, "Segoe UI", sans-serif; font-size: 14px; }
.ad-body *, .ad-body *::before, .ad-body *::after { box-sizing: border-box; }
.ad-top { position: sticky; top: 0; z-index: 20; display: flex; align-items: center; gap: 14px; padding: 10px 22px; padding-top: max(10px, env(safe-area-inset-top)); background: rgba(11,18,32,.92); backdrop-filter: blur(10px); border-bottom: 1px solid var(--lx-line); }
.ad-top .pt-logo img { height: 30px; }
.ad-top .lx-chip { margin: 0; align-self: auto; }
.ad-top a.ad-btn, .ad-top button.ad-btn { margin-left: 0; }
.ad-wrap { display: grid; grid-template-columns: 210px 1fr; gap: 24px; max-width: 1240px; margin: 0 auto; padding: 22px; }
.ad-nav { display: flex; flex-direction: column; gap: 4px; position: sticky; top: 76px; align-self: start; }
.ad-nav button { text-align: left; padding: 10px 12px; font: inherit; font-size: 14px; color: var(--lx-muted); background: none; border: 1px solid transparent; border-radius: 9px; cursor: pointer; }
.ad-nav button:hover { color: var(--lx-text); background: #131c30; }
.ad-nav button.on { color: var(--lx-text); background: rgba(255,106,10,.12); border-color: rgba(255,106,10,.45); font-weight: 600; }
.ad-main { min-width: 0; }
.ad-h { display: flex; align-items: center; gap: 12px; flex-wrap: wrap; margin: 0 0 16px; }
.ad-h h1 { margin: 0; font-size: 22px; font-weight: 600; letter-spacing: -.01em; }
.ad-h .grow { flex: 1; }
.ad-btn { display: inline-flex; align-items: center; justify-content: center; gap: 6px; padding: 8px 14px; font: inherit; font-size: 13.5px; font-weight: 600; color: var(--lx-text); text-decoration: none; background: #131c30; border: 1px solid var(--lx-line); border-radius: 8px; cursor: pointer; }
.ad-btn:hover { border-color: #3a4a6b; }
.ad-btn.pri { color: #0b1220; background: var(--lx-orange); border-color: var(--lx-orange); }
.ad-btn.pri:hover { background: var(--lx-orange-hi); }
.ad-btn.danger { color: #ff8d86; border-color: rgba(255,120,110,.45); }
.ad-btn:disabled { opacity: .5; cursor: default; }
.ad-btn.sm { padding: 5px 10px; font-size: 12.5px; }
.ad-stats { display: grid; grid-template-columns: repeat(auto-fill, minmax(170px, 1fr)); gap: 12px; margin-bottom: 20px; }
.ad-stat { padding: 14px 16px; background: var(--lx-panel); border: 1px solid var(--lx-line); border-radius: 12px; }
.ad-stat b { display: block; font-size: 28px; font-weight: 600; letter-spacing: -.02em; font-variant-numeric: tabular-nums; }
.ad-stat span { font-size: 12.5px; color: var(--lx-muted); }
.ad-stat.warn b { color: #ff8d86; }
.ad-card { padding: 16px; margin-bottom: 18px; background: var(--lx-panel); border: 1px solid var(--lx-line); border-radius: 12px; }
.ad-card h2 { margin: 0 0 12px; font-size: 15px; font-weight: 600; }
.ad-table { width: 100%; border-collapse: collapse; font-size: 13.5px; }
.ad-table th { text-align: left; padding: 8px 10px; font-size: 11.5px; font-weight: 600; letter-spacing: .06em; text-transform: uppercase; color: var(--lx-muted); border-bottom: 1px solid var(--lx-line); }
.ad-table td { padding: 9px 10px; border-bottom: 1px solid #1a2540; vertical-align: top; }
.ad-table tr:last-child td { border-bottom: 0; }
.ad-table tr.click { cursor: pointer; }
.ad-table tr.click:hover td { background: #131c30; }
.ad-scroll { overflow-x: auto; }
.ad-tag { display: inline-block; margin: 1px 3px 1px 0; padding: 1px 7px; font-size: 11.5px; color: var(--lx-muted); background: #131c30; border: 1px solid var(--lx-line); border-radius: 5px; }
.ad-tag.on { color: var(--lx-orange-hi); border-color: rgba(255,106,10,.5); background: rgba(255,106,10,.1); }
.ad-muted { color: var(--lx-muted); }
.ad-av { display: inline-grid; place-items: center; width: 28px; height: 28px; margin-right: 8px; vertical-align: middle; border-radius: 50%; overflow: hidden; font-size: 11px; font-weight: 700; color: #fff; }
.ad-av img { width: 100%; height: 100%; object-fit: cover; }
.ad-body input[type=text], .ad-body input[type=password], .ad-body input[type=search], .ad-body textarea, .ad-body select { width: 100%; padding: 9px 11px; font: inherit; font-size: 14px; color: var(--lx-text); background: #131c30; border: 1px solid var(--lx-line); border-radius: 8px; outline: none; }
.ad-body input:focus, .ad-body textarea:focus, .ad-body select:focus { border-color: var(--lx-orange); box-shadow: 0 0 0 3px rgba(255,106,10,.2); }
.ad-body textarea { min-height: 120px; resize: vertical; }
.ad-field { display: flex; flex-direction: column; gap: 6px; margin-bottom: 12px; }
.ad-field label { font-size: 12.5px; font-weight: 600; color: var(--lx-muted); }
.ad-row2 { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; }
.ad-checks { display: grid; gap: 6px; }
.ad-check { display: flex; align-items: center; gap: 9px; font-size: 13.5px; }
.ad-check input { width: 16px; height: 16px; accent-color: var(--lx-orange); }
.ad-err { margin: 0 0 12px; padding: 9px 12px; font-size: 13px; color: #ffb3ad; background: rgba(255,90,80,.1); border: 1px solid rgba(255,90,80,.35); border-radius: 8px; }
.ad-ok { margin: 0 0 12px; padding: 9px 12px; font-size: 13px; color: #9be3c0; background: rgba(40,200,140,.1); border: 1px solid rgba(40,200,140,.35); border-radius: 8px; }
.ad-gate { max-width: 420px; margin: 12vh auto 0; padding: 26px; background: var(--lx-panel); border: 1px solid var(--lx-line); border-radius: 14px; }
.ad-gate h1 { margin: 0 0 6px; font-size: 21px; font-weight: 600; }
.ad-gate p { margin: 0 0 16px; color: var(--lx-muted); line-height: 1.5; }
.ad-gate .ad-btn { width: 100%; padding: 11px; }
.ad-modal { position: fixed; inset: 0; z-index: 50; display: grid; place-items: center; padding: 16px; background: rgba(4,8,16,.7); }
.ad-modal[hidden] { display: none; }
.ad-dlg { width: min(560px, 100%); max-height: 92vh; overflow-y: auto; padding: 20px; background: var(--lx-panel); border: 1px solid var(--lx-line); border-radius: 14px; box-shadow: 0 24px 60px rgba(0,0,0,.6); }
.ad-dlg h2 { margin: 0 0 14px; font-size: 17px; }
.ad-dlg .acts { display: flex; gap: 8px; justify-content: flex-end; margin-top: 14px; }
.ad-dlg .acts .grow { flex: 1; }
.ad-msg { padding: 12px 0; border-bottom: 1px solid #1a2540; display: flex; gap: 12px; align-items: flex-start; }
.ad-msg:last-child { border-bottom: 0; }
.ad-msg .t { flex: 1; min-width: 0; }
.ad-msg b { display: block; font-weight: 600; }
.ad-msg p { margin: 3px 0 0; color: var(--lx-muted); white-space: pre-wrap; word-break: break-word; }
.ad-tools { display: flex; gap: 8px; flex-wrap: wrap; margin-bottom: 14px; }
.ad-tools input[type=search] { flex: 1; min-width: 160px; }
.ad-tools select { width: auto; }
@media (max-width: 800px) {
  .ad-wrap { grid-template-columns: 1fr; padding: 14px; gap: 14px; }
  .ad-nav { flex-direction: row; overflow-x: auto; position: static; }
  .ad-nav button { white-space: nowrap; }
  .ad-row2 { grid-template-columns: 1fr; }
  .ad-top { padding-left: 14px; padding-right: 14px; }
}

/* Mobile Enterprise map: my unit, compass, address search */
#me .me-north { border: 0; cursor: pointer; }
#me .me-north span { display: block; transition: transform .1s linear; }
#me .me-north.turned { background: var(--me-accent); }
#me .me-mt.on { background: var(--me-accent); }
.me-unit { position: absolute; left: 0; top: 0; width: 34px; height: 34px; margin: -17px 0 0 -17px; border-radius: 50%; background: #1f5fd6; border: 3px solid #fff; box-shadow: 0 2px 8px rgba(0,0,0,.55); display: grid; place-items: center; }
.me-unit .ua { width: 24px; height: 24px; display: block; transition: transform .12s linear; }
.me-unit .ua .mi { width: 24px; height: 24px; display: block; }
.me-unit.nohead .ua { display: none; }
.me-unit.nohead::after { content: ""; width: 10px; height: 10px; border-radius: 50%; background: #fff; }
.me-pm.srch .pin { color: #ee5a1c; }
.me-pm.srch .halo { background: rgba(238,90,28,.3); }
#me .me-sx { margin-left: auto; color: #cfd8ee; display: grid; place-items: center; width: 24px; height: 24px; }
#me .me-sx[hidden] { display: none; }
#me .me-sx .mi { width: 15px; height: 15px; }
#me .me-sres { position: absolute; top: calc(43px * var(--s)); left: 0; width: min(440px, calc(100% - 70px)); max-height: min(60vh, 420px); overflow-y: auto; z-index: 520; background: rgba(14,24,52,.98); box-shadow: 0 8px 24px rgba(0,0,0,.5); }
#me .me-sres[hidden] { display: none; }
#me .me-sr { display: flex; align-items: center; gap: 12px; width: 100%; text-align: left; padding: 10px 14px; border-bottom: 1px solid var(--me-line); color: #eef3ff; }
#me .me-sr:hover { background: var(--me-nav-on); }
#me .me-sr .mi { width: 20px; height: 20px; color: #5aa0ff; flex: none; }
#me .me-sr span { flex: 1; min-width: 0; display: flex; flex-direction: column; }
#me .me-sr b { font-weight: 600; font-size: 14.5px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
#me .me-sr small { font-size: 12.5px; color: #9fb2da; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
#me .me-sr em { font-style: normal; font-size: 10px; font-weight: 700; letter-spacing: .06em; color: #f4b63d; }
#me .me-srn { margin: 0; padding: 10px 14px; font-size: 13px; color: #9fb2da; }

#me .me-top .me-tb:last-child { width: calc(98px * var(--s)); }

/* iPhone: inputs under 16px make Safari zoom in and leave the page shifted after the keyboard closes */
@media (pointer: coarse) {
  input, textarea, select, #me input, #me textarea, .lx-form input, .inbox-dlg input, .inbox-dlg textarea { font-size: 16px !important; }
}
html[data-me="1"], html[data-me="1"] body { overflow: hidden; overscroll-behavior: none; background: #000; }

/* Agency pick screen */
.ag-sub { margin: -4px 0 18px; color: var(--lx-muted); font-size: 13.5px; line-height: 1.5; }
.ag-sub b { color: var(--lx-text); }
.ag-list { display: flex; flex-direction: column; gap: 10px; }
.ag-btn { display: flex; flex-direction: column; align-items: flex-start; gap: 3px; width: 100%; padding: 14px 16px; font: inherit; text-align: left; color: var(--lx-text); background: #131c30; border: 1px solid var(--lx-line); border-radius: 10px; cursor: pointer; transition: border-color .15s, background .15s; }
.ag-btn b { font-size: 16px; }
.ag-btn small { font-size: 12.5px; color: var(--lx-muted); }
.ag-btn:hover:not(:disabled) { border-color: var(--lx-orange); background: #182340; }
.ag-btn.all { border-style: dashed; }
.ag-btn:disabled { opacity: .6; cursor: default; }
.ag-out { margin-top: 18px; }
.pt-agency { display: inline-block; margin-left: 8px; padding: 2px 9px; font-size: 11.5px; font-weight: 700; letter-spacing: .04em; color: #0b1220; background: var(--lx-orange, #f5a524); border-radius: 999px; vertical-align: middle; }
.src-tag.so { background: #1d3a22; color: #6fd186; }
:root[data-theme="light"] .src-tag.so { background: #dff3e3; color: #1b7a33; }

/* case documents */
.cl-docs.drag { outline: 2px dashed var(--cl-accent, #ff7a45); outline-offset: -4px; background: var(--cl-soft); }
.cl-ext { min-width: 44px; justify-content: center; }
.cl-links { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 6px; }
.cl-links .cl-chip { border: 0; cursor: pointer; font-family: inherit; }
.cl-doc-row .btn-row { flex-wrap: wrap; justify-content: flex-end; }
.cl-docframe { width: 100%; height: 64vh; border: 1px solid var(--line); border-radius: 8px; background: #fff; }
.cl-docimg { max-width: 100%; max-height: 64vh; display: block; margin: 0 auto; border-radius: 8px; }
.cl-doctext { white-space: pre-wrap; word-break: break-word; font: 13px/1.5 ui-monospace, Menlo, Consolas, monospace; background: var(--panel-3); padding: 12px; border-radius: 8px; max-height: 60vh; overflow: auto; }
a.btn { text-decoration: none; }