/* Neutral glass surfaces. Accent colours identify actions/data, never tint the glass. */
:root,
body,
body[data-style] {
  --glass: rgba(33, 33, 33, 0.82);
  --glass-line: rgba(255, 255, 255, 0.18);
  --glass-text: #f1f1f1;
  --ink: #f1f1f1;
  --muted: #c1c1c1;
  --paper: #191919;
  --white: #252525;
  --line: #ffffff29;
  --control-surface: #313131;
  --readable-text: #f1f1f1;
}
body {
  background: #191919;
  color: #f1f1f1;
}
body dialog::backdrop {
  background: #111111aa;
  backdrop-filter: blur(5px) grayscale(1);
}
body[data-style] * {
  scrollbar-color: #747474 transparent;
  scrollbar-width: thin;
}
body
  :is(
    .header,
    .rail,
    .explorer,
    .inspector,
    .timeline-panel,
    dialog,
    .selection-drawer,
    .viewport-heading-chip,
    .kpis article,
    .viewport-tools,
    .viewport-status,
    .toast,
    .notice,
    .detail-json,
    .badge,
    .plain-badge,
    .status-pill,
    .avatar,
    .explorer h2 span,
    .search,
    .segmented,
    .model-label,
    .settings-info,
    .list-card,
    .property-group,
    .camera-card,
    .chart-card,
    .metric-tiles article,
    .report-library article,
    .section-cards button,
    .map-notice,
    .companion-answer,
    .code-editor,
    .bim-toolbar,
    .local-map-title,
    .device-grid > section,
    .selection-actions,
    .site-gallery,
    .theme-preview,
    .appearance-status,
    .compliance-banner,
    .compliance-items article,
    .feature-entry,
    .settings-nav
  ) {
  background: rgba(35, 35, 35, 0.88) !important;
  color: #efefef !important;
  border-color: #ffffff2b !important;
}
body[data-style="glassy"]
  :is(
    .header,
    .rail,
    .explorer,
    .inspector,
    .timeline-panel,
    dialog,
    .selection-drawer,
    .viewport-heading-chip,
    .kpis article,
    .selection-actions
  ) {
  backdrop-filter: blur(24px) saturate(0);
}
body
  :is(
    button,
    [role="button"],
    .secondary,
    .small-button,
    input[type="button"],
    input[type="submit"]
  ) {
  background: #343434 !important;
  color: #f3f3f3 !important;
  border-color: #ffffff3b !important;
}
body :is(button, [role="button"]):hover {
  background: #484848 !important;
}
body
  :is(
    button.active,
    button[aria-selected="true"],
    button[aria-pressed="true"],
    button.primary,
    input[type="submit"]
  ) {
  background: #4b4b4b !important;
  color: #fff !important;
  border-color: #d5d5d5 !important;
  box-shadow: inset 3px 0 #d5d5d5;
}
body button:disabled {
  background: #2a2a2a !important;
  color: #a9a9a9 !important;
}
body
  :is(
    input:not([type="range"]):not([type="checkbox"]):not([type="radio"]):not(
        [type="color"]
      ),
    select,
    textarea
  ),
body[data-style]
  :is(
    #asset-search,
    #tree-mode,
    #workspace-domain,
    #history-day,
    #replay-speed,
    #scene-geometry
  ) {
  background: #2a2a2a !important;
  color: #f3f3f3 !important;
  border-color: #888888 !important;
}
body :is(input, textarea)::placeholder {
  color: #bfbfbf !important;
}
body input:-webkit-autofill {
  -webkit-text-fill-color: #f3f3f3 !important;
  box-shadow: 0 0 0 1000px #2a2a2a inset !important;
}
body[data-style]
  #dialog
  :is(
    input:not([type="range"]):not([type="checkbox"]):not([type="radio"]):not(
        [type="color"]
      ),
    select,
    textarea
  ) {
  background: #2a2a2a !important;
  color: #f3f3f3 !important;
  border-color: #888888 !important;
}
body
  :is(
    .muted-text,
    .tree-group,
    .tree-level,
    .model-sources p,
    .gallery-models small,
    .other-sites summary,
    .viewport-top .kpis article > span
  ) {
  color: #c6c6c6 !important;
}
body :is(.asset-row.active, .settings-nav button.active) {
  background: #484848 !important;
  border-color: #e1e1e1 !important;
  box-shadow: inset 4px 0 #efefef;
}
body :is(.resize-grip > span, .timeline-grip > span) {
  background: #383838;
  color: #f2f2f2;
  border-color: #aeaeae;
}
body
  :is(
    .resize-grip:hover > span,
    .resize-grip:focus-visible > span,
    .timeline-grip:hover > span,
    .timeline-grip:focus-visible > span
  ) {
  background: #4e4e4e;
  border-color: #f0f0f0;
}
body.locked {
  background:
    radial-gradient(ellipse at 20% 25%, #53535366, transparent 50%),
    linear-gradient(135deg, #151515, #313131) !important;
}
body.locked dialog,
body.locked[data-style] dialog {
  background: #252525e8 !important;
  box-shadow: 0 30px 90px #0008;
}
body.locked .lock-screen {
  background: radial-gradient(
    ellipse at 25% 20%,
    #454545 0%,
    #272727 40%,
    #151515 80%
  ) !important;
}
body.locked[data-style] dialog::backdrop {
  background: #11111166 !important;
  backdrop-filter: blur(4px) grayscale(1);
}
body.locked .lock-screen :is(p, small) {
  color: #bbbbbb;
}
body .theme-selected {
  background: #444444 !important;
  color: #f0f0f0 !important;
  border-color: #cccccc;
}
body :is(button, a, input, select, textarea, summary):focus-visible {
  outline-color: #d5d5d5 !important;
}
body :is(.notice.amber, .notice-card.warning, .viewport-alert.warning) {
  background: #383838 !important;
  color: #eee8fc !important;
  border-color: #b7a8d2 !important;
}
body .notice-card.critical {
  background: #462d32 !important;
  color: #ffe5e9 !important;
}
body .portfolio-location {
  padding: 10px;
  border: 1px solid #ffffff25;
  border-radius: 10px;
  margin: 8px 0;
}
body .portfolio-location summary {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  cursor: pointer;
}
body .portfolio-location summary::before {
  content: "▸";
  color: #bbb;
}
body .portfolio-location[open] > summary::before {
  content: "▾";
}
body .portfolio-location summary span {
  flex: 1;
}
body .portfolio-location small {
  display: block;
  color: #c5c5c5;
  margin-top: 4px;
  font-size: calc(12px * var(--text-scale, 1));
}
body .portfolio-location > .portfolio-location {
  margin-left: 15px;
}
body .portfolio-tree {
  max-height: 48vh;
  overflow: auto;
}
body .scope-picker {
  max-height: 180px;
  overflow: auto;
  border: 1px solid #ffffff30;
  border-radius: 8px;
  padding: 8px;
}
body .scope-picker label {
  display: flex;
  gap: 8px;
  align-items: center;
  margin: 6px 0;
  font-size: calc(12px * var(--text-scale, 1));
  flex-direction: row;
  justify-content: flex-start;
  text-align: left;
  line-height: 1.5;
}
body .scope-picker input[type="checkbox"] {
  width: 16px !important;
  height: 16px;
  flex: 0 0 16px;
  margin: 2px 0 0;
}
body .scope-picker label small {
  display: none;
}
body[data-style] input[type="checkbox"],
body[data-style] input[type="radio"] {
  background-color: #333333 !important;
  accent-color: #d4d4d4;
}
body .scene-geometry select {
  max-width: 210px;
  width: 17vw;
}
@media (max-width: 1450px) {
  body[data-style="glassy"] #connection {
    font-size: 0;
    min-width: 12px;
    padding: 4px;
  }
}
@media (max-width: 950px) {
  body .portfolio-location summary {
    flex-wrap: wrap;
  }
  body .scene-geometry select {
    width: 110px;
  }
}

/* Timeline controls occupy their own row; Live never floats over the plot. */
body[data-style] .timeline-panel {
  display: flex;
  flex-direction: column;
  padding: 10px 16px;
  min-height: 132px;
}
body[data-style] .timeline-heading {
  flex: 0 0 auto;
  gap: 12px;
  min-height: 28px;
}
body[data-style] .timeline-heading > div {
  min-width: 0;
}
body[data-style] .timeline-heading > div:last-child {
  flex-shrink: 0;
  gap: 8px;
}
body[data-style] .timeline-heading input,
body[data-style] .timeline-heading select,
body[data-style] .live-button {
  font-size: calc(11px * var(--text-scale, 1));
  min-height: 27px;
  padding: 3px 7px;
}
body[data-style] .timeline-body {
  height: auto;
  flex: 1;
  min-height: 0;
  margin-top: 4px;
}
body[data-style] .timeline-legend {
  font-size: calc(10px * var(--text-scale, 1));
  margin-bottom: 3px;
}
body[data-style] :is(.timeline-legend, .timeline-ticks, #timeline-mode) {
  color: #ccc;
}
body[data-style] #go-live {
  background: #343434 !important;
  color: #f3f3f3 !important;
  border-color: #aaa !important;
}
body[data-style] #timeline-chart {
  height: 33px;
}
body[data-style] .timeline-ticks {
  font-size: calc(10px * var(--text-scale, 1));
  margin-top: 4px;
}
body[data-style] .time-readout[hidden] {
  display: none !important;
}
body[data-style] .time-readout {
  min-width: 92px;
  padding-left: 12px;
}
body[data-style] .time-readout span {
  font-size: calc(10px * var(--text-scale, 1));
}
body .twin-catalog-group {
  margin: 20px 0 28px;
}
body .twin-catalog-group h2 {
  display: flex;
  align-items: center;
  gap: 10px;
  font-size: calc(18px * var(--text-scale, 1));
  margin: 0 0 12px;
}
body .twin-catalog-group h2 svg {
  width: 28px;
  height: 28px;
  color: #ddd;
}
body .twin-catalog-nav {
  display: flex;
  gap: 8px;
  flex-wrap: wrap;
  margin: 18px 0;
}
body .twin-catalog-nav button {
  padding: 10px 16px;
  font-size: calc(13px * var(--text-scale, 1));
  border-radius: 10px;
}
body .twin-catalog-nav button[aria-pressed="true"] {
  background: #444 !important;
  border: 2px solid #ddd !important;
  box-shadow: inset 0 0 0 1px #222;
  color: #fff;
}
body .twin-catalog-group .site-presentation-grid {
  grid-template-columns: repeat(auto-fit, minmax(230px, 1fr));
}
body .twin-catalog-group .site-presentation {
  max-width: 580px;
}
body #point-list {
  max-height: 55vh;
  overflow: auto;
}
body #point-list dl {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 7px;
}
body #point-list dd {
  margin: 0;
  overflow-wrap: anywhere;
}
body #dialog-content .maintenance-card {
  display: block;
  padding: 14px;
  margin: 10px 0;
  font-size: calc(13px * var(--text-scale, 1));
}
body #dialog-content .maintenance-card summary {
  cursor: pointer;
  line-height: 1.6;
}
body #dialog-content .maintenance-card p {
  color: #d0d0d0;
  line-height: 1.65;
  margin: 9px 0;
}
body #work-form label,
body [data-work-update] label {
  display: flex;
  flex-direction: column;
  align-items: stretch;
  gap: 7px;
  margin: 13px 0;
  font-size: calc(13px * var(--text-scale, 1));
  color: #ddd;
}
body #work-form :is(input, select, textarea),
body [data-work-update] :is(input, select, textarea) {
  width: 100%;
  padding: 9px 11px;
  min-height: 38px;
}
body #work-form textarea,
body [data-work-update] textarea {
  min-height: 54px;
  resize: vertical;
}
body dialog:has([data-work-update]) {
  width: min(780px, 90vw);
}
body [data-work-update] label {
  margin: 9px 0;
}
body #location-scope {
  width: 100%;
  padding: 9px;
  margin-top: 7px;
  font-size: calc(12px * var(--text-scale, 1));
}
@media (max-width: 950px) {
  body[data-style] .timeline-description,
  body[data-style] .timeline-key {
    display: none;
  }
  body[data-style] .timeline-heading input {
    max-width: 125px;
  }
}