:root {
  --td-bg-app: #0d1013;
  --td-bg-canvas: #0b0c0f;
  --td-bg-header: #080b0f;
  --td-bg-header-item: #0b0f14;
  --td-bg-header-hover: #151a21;
  --td-bg-header-pressed: #37414f;
  --td-bg-header-focused: #56657a;
  --td-bg-menu: #4e5e75;
  --td-bg-menu-active: #7e90a9;
  --td-border-subtle: #3a4554;
  --td-border-strong: #37414f;
  --td-text-primary: #ffffff;
  --td-text-secondary: #f6f7f9;
  --td-icon-muted: #93a2b7;
  --td-accent: #1dab8b;
  --td-accent-blue: #4a89f3;
  --td-warning: #f5c542;
  --td-danger: #ff5c70;
  --td-success: #1dab8b;
  font-family: "Scania Sans CY Semi Condensed", "Scania Sans CY", Inter, "Segoe UI", Arial, sans-serif;
}

*, *::before, *::after { box-sizing: border-box; }
html, body, #app { width: 100%; height: 100%; margin: 0; }
body { overflow: hidden; background: var(--td-bg-app); color: var(--td-text-primary); }
button, input, select { font: inherit; }
button { border: 0; border-radius: 0; padding: 0; background: transparent; color: inherit; cursor: pointer; }
button:disabled { cursor: not-allowed; opacity: 0.48; }

.td-icon { position: relative; display: inline-block; width: 16px; height: 16px; flex: 0 0 auto; color: currentColor; }
.td-icon::before, .td-icon::after { content: ""; position: absolute; box-sizing: border-box; }
.td-icon-chevron-down::before, .td-icon-chevron-up::before, .td-icon-chevron-left::before, .td-icon-chevron-right::before { width: 7px; height: 7px; border-right: 1.6px solid currentColor; border-bottom: 1.6px solid currentColor; }
.td-icon-chevron-down::before { top: 3px; left: 4px; transform: rotate(45deg); }
.td-icon-chevron-up::before { top: 6px; left: 4px; transform: rotate(225deg); }
.td-icon-chevron-left::before { top: 4px; left: 6px; transform: rotate(135deg); }
.td-icon-chevron-right::before { top: 4px; left: 3px; transform: rotate(-45deg); }
.td-icon-cross::before, .td-icon-cross::after, .td-icon-plus::before, .td-icon-plus::after, .td-icon-minus::before { top: 7px; left: 2px; width: 12px; height: 1.6px; border-radius: 999px; background: currentColor; }
.td-icon-cross::before { transform: rotate(45deg); }
.td-icon-cross::after { transform: rotate(-45deg); }
.td-icon-plus::after { transform: rotate(90deg); }
.td-icon-ellipsis::before { top: 7px; left: 2px; width: 3px; height: 3px; border-radius: 50%; background: currentColor; box-shadow: 5px 0 0 currentColor, 10px 0 0 currentColor; }
.td-icon-link { background: currentColor; mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cg fill='none' stroke='black' stroke-linecap='round' stroke-linejoin='round' stroke-width='1.8'%3E%3Cpath d='M9.6 8.2H7.8a3.8 3.8 0 0 0 0 7.6h3'/%3E%3Cpath d='M14.4 8.2h1.8a3.8 3.8 0 0 1 0 7.6h-3'/%3E%3Cpath d='M8.8 12h6.4'/%3E%3C/g%3E%3C/svg%3E") center / contain no-repeat; -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cg fill='none' stroke='black' stroke-linecap='round' stroke-linejoin='round' stroke-width='1.8'%3E%3Cpath d='M9.6 8.2H7.8a3.8 3.8 0 0 0 0 7.6h3'/%3E%3Cpath d='M14.4 8.2h1.8a3.8 3.8 0 0 1 0 7.6h-3'/%3E%3Cpath d='M8.8 12h6.4'/%3E%3C/g%3E%3C/svg%3E") center / contain no-repeat; }
.td-icon-link::before, .td-icon-link::after { content: none; }

.boot-shell { display: grid; place-items: center; height: 100vh; gap: 18px; letter-spacing: 0.28em; color: var(--td-accent); }
.boot-mark { font-weight: 800; }
.boot-bar { width: 220px; height: 3px; background: #17303e; overflow: hidden; }
.boot-bar span { display: block; width: 48%; height: 100%; background: var(--td-accent); animation: boot 1.1s infinite ease-in-out; }
@keyframes boot { 0% { transform: translateX(-100%); } 100% { transform: translateX(240%); } }

.td-shell {
  display: grid;
  grid-template-rows: 40px minmax(0, 1fr) 64px;
  width: 100vw;
  height: 100vh;
  background: var(--td-bg-app);
  color: var(--td-text-primary);
}
.td-shell.is-replay-collapsed { grid-template-rows: 40px minmax(0, 1fr) 36px; }

.td-topbar {
  position: relative;
  z-index: 40;
  display: flex;
  align-items: stretch;
  border-top: 1px solid var(--td-border-strong);
  border-bottom: 1px solid var(--td-border-strong);
  background: var(--td-bg-header);
}

.td-brand {
  display: flex;
  min-width: 252px;
  align-items: center;
  border-right: 1px solid var(--td-border-subtle);
  padding: 0;
  background: var(--td-bg-header-item);
  color: #ffffff;
}
.td-brand-mark { display: block; width: auto; height: 35px; flex: 0 0 auto; }

.td-topbar-menu { display: flex; align-items: stretch; }
.td-menu-host { position: relative; display: flex; }
.td-toolbar-button {
  display: inline-flex;
  min-width: 119px;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
  border-right: 1px solid var(--td-border-subtle);
  padding: 0 24px;
  background: var(--td-bg-header-item);
  color: var(--td-text-secondary);
  font-size: 14px;
  font-weight: 700;
  line-height: 16px;
  letter-spacing: -0.01em;
}
.td-toolbar-button[aria-expanded="true"] { background: var(--td-bg-header-pressed); }
.td-toolbar-button .td-icon { width: 16px; height: 16px; color: var(--td-icon-muted); }
.td-toolbar-button:hover, .td-toolbar-button:focus-visible { background: var(--td-bg-header-hover); outline: 2px solid var(--td-bg-header-focused); outline-offset: -2px; }
.td-topbar-status { display: flex; align-items: stretch; margin-left: auto; }
.td-topbar-status .td-toolbar-button { border-left: 1px solid var(--td-border-subtle); border-right: 0; }
.td-profile-menu-host .td-menu { right: 0; left: auto; }
.td-transport { display: none; }
.td-icon-button {
  display: grid;
  width: 69px;
  place-items: center;
  border-left: 1px solid var(--td-border-subtle);
  background: var(--td-bg-header-item);
  color: rgb(255 255 255 / 87%);
  font-size: 14px;
}
.td-bell-icon { width: 20px; height: 20px; fill: none; stroke: currentColor; stroke-linecap: round; stroke-linejoin: round; stroke-width: 1.8; }

.td-menu, .td-sidebar-menu {
  display: none;
  position: absolute;
  top: 40px;
  left: 0;
  z-index: 100;
  width: 274px;
  overflow: hidden;
  border: 1px solid var(--td-bg-menu-active);
  border-top: 0;
  border-radius: 0 0 4px 4px;
  background: var(--td-bg-menu);
  box-shadow: 0 18px 40px rgb(0 0 0 / 34%);
}
.td-menu.is-open, .td-sidebar-menu.is-open { display: grid; }
.td-menu button, .td-sidebar-menu button { display: flex; width: 100%; align-items: center; justify-content: space-between; gap: 12px; border-bottom: 1px solid var(--td-bg-menu-active); padding: 14px 16px 14px 24px; color: var(--td-text-secondary); font-size: 14px; text-align: left; }
.td-menu button .td-icon, .td-sidebar-menu button .td-icon { width: 14px; height: 14px; color: var(--td-icon-muted); }
.td-menu button:hover, .td-sidebar-menu button:hover { background: var(--td-bg-menu-active); }

.td-workarea {
  display: grid;
  min-height: 0;
  background: linear-gradient(90deg, rgb(255 255 255 / 2%), transparent 18%), var(--td-bg-canvas);
  transition: grid-template-columns 160ms ease;
}
.td-sidebar { display: flex; min-width: 0; min-height: 0; flex-direction: column; border-right: 1px solid #2f3945; padding: 0; overflow: hidden; background: #1d2229; }
.td-sidebar.is-collapsed { padding: 0; }
.td-sidebar-expand { width: 100%; height: 100%; background: var(--td-bg-header-item); color: var(--td-icon-muted); font-size: 12px; font-weight: 700; letter-spacing: 0.14em; text-transform: uppercase; writing-mode: vertical-rl; transform: rotate(180deg); }
.td-sidebar-header { position: relative; display: grid; height: 32px; grid-template-columns: minmax(0, 1fr) 24px 24px; align-items: center; gap: 0; border-bottom: 1px solid #2f3945; padding: 0 0 0 8px; background: #15181d; }
.td-sidebar-header div { min-width: 0; }
.td-sidebar-header strong { display: block; overflow: hidden; color: #f5f7fa; font-size: 9px; font-weight: 700; letter-spacing: 0.08em; line-height: 12px; text-overflow: ellipsis; text-transform: uppercase; white-space: nowrap; }
.td-sidebar-header span { display: inline-block; }
.td-sidebar-header button { display: grid; width: 24px; height: 24px; place-items: center; border: 0; background: transparent; color: var(--td-icon-muted); font-size: 11px; }
.td-sidebar-header button:hover, .td-sidebar-header button:focus-visible { background: #2b323d; color: #ffffff; outline: 1px solid #56657a; outline-offset: -1px; }
.td-sidebar-options-icon { display: inline-block !important; width: 16px; overflow: hidden; font-size: 12px; font-weight: 700; letter-spacing: 1px; line-height: 12px; text-align: center; }
.td-sidebar-header button[aria-label="Collapse settings sidebar"] .td-icon { width: 16px; height: 16px; }
.td-sidebar-menu { top: 32px; right: 0; left: auto; width: 196px; }

.td-search, .td-dialog input, .td-dialog select, .td-settings-panel select {
  width: 100%;
  border: 1px solid var(--td-border-subtle);
  border-radius: 4px;
  background: #0d1013;
  color: var(--td-text-primary);
  padding: 8px 10px;
  font-size: 12px;
}
.td-search-shell { position: relative; margin: 0; border-bottom: 1px solid #2f3945; padding: 16px 14px 16px 16px; background: #37414f; }
.td-search-shell .td-search { width: 100%; height: 36px; margin: 0; border-color: #0d1013; border-radius: 4px; padding: 0 40px 0 14px; background: #0d1013; color: var(--td-text-secondary); }
.td-search-shell .td-search::placeholder { color: rgb(246 247 249 / 54%); }
.td-search-icon { position: absolute; top: 50%; right: 25px; width: 24px; height: 24px; background: var(--td-icon-muted); pointer-events: none; transform: translateY(-50%); mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cg fill='none' stroke='black' stroke-linecap='round' stroke-width='1.7'%3E%3Ccircle cx='10.5' cy='10.5' r='6.5'/%3E%3Cpath d='m15.5 15.5 5 5'/%3E%3C/g%3E%3C/svg%3E") center / contain no-repeat; -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cg fill='none' stroke='black' stroke-linecap='round' stroke-width='1.7'%3E%3Ccircle cx='10.5' cy='10.5' r='6.5'/%3E%3Cpath d='m15.5 15.5 5 5'/%3E%3C/g%3E%3C/svg%3E") center / contain no-repeat; }
.td-search-icon::after { content: none; }
.td-tree { flex: 0 0 auto; max-height: min(42vh, 362px); border-bottom: 1px solid #2f3945; background: #1d2229; overflow: auto; scrollbar-color: #7f8790 #15181d; scrollbar-gutter: stable; }
.td-tree::-webkit-scrollbar { width: 10px; height: 10px; }
.td-tree::-webkit-scrollbar-track { background: #15181d; }
.td-tree::-webkit-scrollbar-thumb { border: 2px solid #15181d; border-radius: 999px; background: #7f8790; }
.td-tree-row { position: relative; display: grid; width: 100%; grid-template-columns: 16px minmax(0, 1fr) 52px; align-items: center; min-height: 36px; gap: 8px; border-bottom: 1px solid rgb(126 144 169 / 34%); padding: 0 16px 0 20px; background: #1d2229; color: var(--td-text-secondary); text-align: left; }
.td-tree-row.depth-1 { padding-left: 36px; }
.td-tree-row.depth-2 { padding-left: 52px; }
.td-tree-row:hover, .td-tree-row:focus-visible { background: #2b323d; outline: 1px solid #56657a; outline-offset: -1px; }
.td-tree-row.is-active { background: #4e5e75; color: #ffffff; }
.td-tree-row.is-active::before { content: ""; position: absolute; top: 0; bottom: 0; left: 0; width: 3px; background: #8fb2ff; }
.td-tree-disclosure { width: 6px; height: 6px; border-right: 1.4px solid currentColor; border-bottom: 1.4px solid currentColor; opacity: 0.72; transform: rotate(45deg); transform-origin: center; }
.td-tree-row.has-children.is-collapsed .td-tree-disclosure { transform: rotate(-45deg); }
.td-tree-row.is-leaf .td-tree-disclosure { border-color: transparent; }
.td-tree-copy { display: block; min-width: 0; }
.td-tree-copy strong, .td-tree-copy small { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.td-tree-copy strong { display: block; color: inherit; font-size: 14px; font-weight: 400; letter-spacing: -0.01em; line-height: 36px; }
.td-tree-row.is-active .td-tree-copy strong { font-weight: 700; }
.td-tree-copy small { display: none; }
.td-tree-icons { display: flex; align-items: center; justify-content: flex-end; gap: 12px; color: rgb(246 247 249 / 74%); }
.td-layer-icon, .td-eye-icon, .td-gear-icon { position: relative; display: inline-block; flex: 0 0 auto; color: currentColor; }
.td-layer-icon { width: 16px; height: 16px; background: currentColor; mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cg fill='none' stroke='black' stroke-linecap='round' stroke-linejoin='round' stroke-width='1.8'%3E%3Cpath d='m12 3 8 4-8 4-8-4 8-4Z'/%3E%3Cpath d='m4 12 8 4 8-4'/%3E%3Cpath d='m4 17 8 4 8-4'/%3E%3C/g%3E%3C/svg%3E") center / contain no-repeat; -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cg fill='none' stroke='black' stroke-linecap='round' stroke-linejoin='round' stroke-width='1.8'%3E%3Cpath d='m12 3 8 4-8 4-8-4 8-4Z'/%3E%3Cpath d='m4 12 8 4 8-4'/%3E%3Cpath d='m4 17 8 4 8-4'/%3E%3C/g%3E%3C/svg%3E") center / contain no-repeat; }
.td-layer-icon::before, .td-layer-icon::after { content: none; }
.td-eye-icon { width: 16px; height: 16px; background: currentColor; mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cg fill='none' stroke='black' stroke-linecap='round' stroke-linejoin='round' stroke-width='1.8'%3E%3Cpath d='M2.5 12s3.5-5 9.5-5 9.5 5 9.5 5-3.5 5-9.5 5-9.5-5-9.5-5Z'/%3E%3Ccircle cx='12' cy='12' r='2.5'/%3E%3C/g%3E%3C/svg%3E") center / contain no-repeat; -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cg fill='none' stroke='black' stroke-linecap='round' stroke-linejoin='round' stroke-width='1.8'%3E%3Cpath d='M2.5 12s3.5-5 9.5-5 9.5 5 9.5 5-3.5 5-9.5 5-9.5-5-9.5-5Z'/%3E%3Ccircle cx='12' cy='12' r='2.5'/%3E%3C/g%3E%3C/svg%3E") center / contain no-repeat; }
.td-eye-icon::after { content: none; }
.td-eye-icon.is-off { opacity: 0.62; mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cg fill='none' stroke='black' stroke-linecap='round' stroke-linejoin='round' stroke-width='1.8'%3E%3Cpath d='M2.5 12s3.5-5 9.5-5 9.5 5 9.5 5-3.5 5-9.5 5-9.5-5-9.5-5Z'/%3E%3Ccircle cx='12' cy='12' r='2.5'/%3E%3Cpath d='m4 20 16-16'/%3E%3C/g%3E%3C/svg%3E"); -webkit-mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cg fill='none' stroke='black' stroke-linecap='round' stroke-linejoin='round' stroke-width='1.8'%3E%3Cpath d='M2.5 12s3.5-5 9.5-5 9.5 5 9.5 5-3.5 5-9.5 5-9.5-5-9.5-5Z'/%3E%3Ccircle cx='12' cy='12' r='2.5'/%3E%3Cpath d='m4 20 16-16'/%3E%3C/g%3E%3C/svg%3E"); }
.td-eye-icon.is-off::before { content: none; }
.td-empty-tree { min-height: 38px; border-top: 1px solid rgb(126 144 169 / 24%); padding: 12px 14px; color: #acd0ed; font-size: 12px; line-height: 14px; }
.td-settings-panel { display: grid; align-content: start; gap: 0; min-height: 0; padding: 0; overflow: auto; color: var(--td-text-secondary); background: #1d2229; }
.td-settings-panel h2 { display: flex; align-items: center; justify-content: space-between; gap: 12px; min-height: 36px; margin: 0; border-top: 1px solid #56657a; border-bottom: 1px solid #2f3945; padding: 0 8px; background: #37414f; color: #f6f7f9; font-size: 10px; font-weight: 500; letter-spacing: 0.08em; line-height: 12px; text-transform: uppercase; }
.td-settings-panel h2 span:first-child { overflow: hidden; min-width: 0; text-overflow: ellipsis; white-space: nowrap; }
.td-settings-panel h2 .td-icon { width: 14px; height: 14px; color: var(--td-icon-muted); }
.td-settings-detail { display: grid; gap: 4px; border-bottom: 1px solid #2f3945; padding: 12px 24px 12px; background: #1d2229; color: var(--td-text-secondary); font-size: 12px; line-height: 15px; }
.td-settings-detail + .td-settings-detail { margin-top: 0; }
.td-settings-detail span { color: #ffffff; font-size: 11px; font-weight: 700; }
.td-settings-detail strong { color: #ffffff; font-size: 13px; line-height: 15px; }
.td-settings-detail small { color: #acd0ed; font-size: 11px; line-height: 14px; }
.td-toggle-strip { display: grid; grid-template-columns: max-content max-content minmax(0, 1fr); align-items: start; gap: 24px; border-bottom: 1px solid #2f3945; margin-bottom: 0; padding: 16px 24px 14px; background: #1d2229; }
.td-toggle-field { display: grid; min-width: 0; gap: 7px; border: 0; padding: 0; background: transparent; color: var(--td-text-secondary); font-size: 12px; line-height: 16px; }
.td-toggle-title { display: block; color: #f6f7f9; font-size: 12px; font-weight: 400; line-height: 16px; }
.td-toggle-control { display: inline-flex; min-width: 0; align-items: center; gap: 6px; white-space: nowrap; }
.td-toggle-control input { appearance: none; position: relative; width: 22px; height: 12px; flex: 0 0 auto; border: 0; border-radius: 999px; margin: 0; background: #56657a; cursor: pointer; }
.td-toggle-control input::before { content: ""; position: absolute; top: 2px; left: 2px; width: 8px; height: 8px; border-radius: 50%; background: #ffffff; transition: transform 120ms ease; }
.td-toggle-control input:checked { background: #1dab8b; }
.td-toggle-control input:checked::before { transform: translateX(10px); }
.td-toggle-control em { flex: 0 0 auto; color: #f6f7f9; font-size: 12px; font-style: normal; line-height: 16px; }
.td-nav-position-button { justify-self: end; display: grid; width: 28px; height: 28px; place-items: center; border-radius: 4px; background: #4e5e75; color: #ffffff; }
.td-nav-position-icon { width: 15px; height: 15px; background: currentColor; mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cg fill='none' stroke='black' stroke-linecap='round' stroke-linejoin='round' stroke-width='1.8'%3E%3Ccircle cx='12' cy='12' r='8'/%3E%3Ccircle cx='12' cy='12' r='2.6'/%3E%3Cpath d='M12 2.5v3M12 18.5v3M2.5 12h3M18.5 12h3'/%3E%3C/g%3E%3C/svg%3E") center / contain no-repeat; -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cg fill='none' stroke='black' stroke-linecap='round' stroke-linejoin='round' stroke-width='1.8'%3E%3Ccircle cx='12' cy='12' r='8'/%3E%3Ccircle cx='12' cy='12' r='2.6'/%3E%3Cpath d='M12 2.5v3M12 18.5v3M2.5 12h3M18.5 12h3'/%3E%3C/g%3E%3C/svg%3E") center / contain no-repeat; }
.td-gear-icon { width: 16px; height: 16px; border: 0; border-radius: 0; background: currentColor; mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cg fill='none' stroke='black' stroke-linecap='round' stroke-linejoin='round' stroke-width='1.8'%3E%3Cpath d='M12 15.2a3.2 3.2 0 1 0 0-6.4 3.2 3.2 0 0 0 0 6.4Z'/%3E%3Cpath d='M19.4 15a1.7 1.7 0 0 0 .3 1.8l.1.1-2 3.4-.2-.1a1.7 1.7 0 0 0-1.8-.1 8.5 8.5 0 0 1-1.5.9 1.7 1.7 0 0 0-1.1 1.5v.2H9.3v-.2A1.7 1.7 0 0 0 8.2 21a8.5 8.5 0 0 1-1.5-.9 1.7 1.7 0 0 0-1.8.1l-.2.1-2-3.4.1-.1A1.7 1.7 0 0 0 3.1 15a8.3 8.3 0 0 1 0-1.8 1.7 1.7 0 0 0-.3-1.8l-.1-.1 2-3.4.2.1a1.7 1.7 0 0 0 1.8.1 8.5 8.5 0 0 1 1.5-.9 1.7 1.7 0 0 0 1.1-1.5v-.2h3.9v.2a1.7 1.7 0 0 0 1.1 1.5 8.5 8.5 0 0 1 1.5.9 1.7 1.7 0 0 0 1.8-.1l.2-.1 2 3.4-.1.1a1.7 1.7 0 0 0-.3 1.8 8.3 8.3 0 0 1 0 1.8Z'/%3E%3C/g%3E%3C/svg%3E") center / contain no-repeat; -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cg fill='none' stroke='black' stroke-linecap='round' stroke-linejoin='round' stroke-width='1.8'%3E%3Cpath d='M12 15.2a3.2 3.2 0 1 0 0-6.4 3.2 3.2 0 0 0 0 6.4Z'/%3E%3Cpath d='M19.4 15a1.7 1.7 0 0 0 .3 1.8l.1.1-2 3.4-.2-.1a1.7 1.7 0 0 0-1.8-.1 8.5 8.5 0 0 1-1.5.9 1.7 1.7 0 0 0-1.1 1.5v.2H9.3v-.2A1.7 1.7 0 0 0 8.2 21a8.5 8.5 0 0 1-1.5-.9 1.7 1.7 0 0 0-1.8.1l-.2.1-2-3.4.1-.1A1.7 1.7 0 0 0 3.1 15a8.3 8.3 0 0 1 0-1.8 1.7 1.7 0 0 0-.3-1.8l-.1-.1 2-3.4.2.1a1.7 1.7 0 0 0 1.8.1 8.5 8.5 0 0 1 1.5-.9 1.7 1.7 0 0 0 1.1-1.5v-.2h3.9v.2a1.7 1.7 0 0 0 1.1 1.5 8.5 8.5 0 0 1 1.5.9 1.7 1.7 0 0 0 1.8-.1l.2-.1 2 3.4-.1.1a1.7 1.7 0 0 0-.3 1.8 8.3 8.3 0 0 1 0 1.8Z'/%3E%3C/g%3E%3C/svg%3E") center / contain no-repeat; }
.td-gear-icon::before, .td-gear-icon::after { content: none; }
.td-setting-row { display: flex; min-width: 0; min-height: 48px; align-items: center; justify-content: space-between; gap: 12px; border-bottom: 1px solid #2f3945; border-radius: 3px; margin: 8px 24px 0; padding: 7px 14px; background: #11151a; color: var(--td-text-secondary); text-align: left; }
.td-setting-row:hover, .td-setting-row:focus-visible { color: #ffffff; outline: 1px solid #56657a; outline-offset: -1px; }
.td-setting-row span { display: grid; min-width: 0; gap: 3px; }
.td-setting-row small { color: rgb(246 247 249 / 68%); font-size: 11px; line-height: 13px; }
.td-setting-row strong { display: inline-flex; min-width: 0; align-items: center; gap: 8px; overflow: hidden; color: #ffffff; font-size: 13px; font-weight: 700; line-height: 15px; text-overflow: ellipsis; white-space: nowrap; }
.td-setting-row i { display: inline-block; width: 13px; height: 13px; flex: 0 0 auto; border: 1px solid rgb(255 255 255 / 52%); border-radius: 50%; background: #d94d0d; }
.td-setting-row .td-icon { width: 14px; height: 14px; color: var(--td-icon-muted); }

.td-dashboard { display: grid; min-width: 0; min-height: 0; padding: 0; background: transparent; }
.td-dock-root { display: grid; width: 100%; height: 100%; min-height: 0; }
.td-dock-left, .td-dock-right { display: grid; min-width: 0; min-height: 0; }
.td-extra-workspace { display: grid; width: 100%; height: 100%; min-height: 0; grid-auto-rows: minmax(220px, 1fr); gap: 8px; }
.td-dock-region { position: relative; min-width: 0; min-height: 0; overflow: hidden; }
.td-dock-region.is-drop-target { outline: 1px solid var(--td-bg-header-focused); outline-offset: -1px; }
.td-splitter { position: relative; z-index: 1; background: #11151a; }
.td-splitter.vertical { width: 4px; border-right: 1px solid var(--td-border-subtle); cursor: col-resize; }
.td-splitter.horizontal { height: 4px; border-bottom: 1px solid var(--td-border-subtle); cursor: row-resize; }
.td-splitter::after { content: none; }

.td-tabbed-region { display: grid; height: 100%; min-height: 0; grid-template-rows: 24px minmax(0, 1fr); }
.td-tab-strip { display: flex; min-width: 0; height: 24px; border: 1px solid var(--td-border-subtle); border-bottom: 0; overflow: hidden; background: #0f1318; }
.td-tabs { display: flex; flex: 0 1 auto; min-width: 0; height: 24px; overflow: hidden; }
.td-tab-shell { display: inline-flex; max-width: 188px; min-width: 0; height: 100%; border-right: 1px solid var(--td-border-subtle); background: #15181d; color: var(--td-icon-muted); }
.td-tab-shell.is-active { background: #1c222b; color: var(--td-text-primary); }
.td-tab { display: inline-flex; max-width: 160px; min-width: 0; align-items: center; height: 100%; padding: 0 8px; background: transparent; color: inherit; cursor: grab; font-size: 9px; font-weight: 600; letter-spacing: 0.08em; line-height: 12px; }
.td-tab::after { content: none; }
.td-tab-close { display: inline-grid; width: 23px; height: 100%; place-items: center; background: transparent; color: inherit; }
.td-tab-close .td-icon { width: 12px; height: 12px; }
.td-tab-add { display: inline-grid; width: 27px; height: 100%; place-items: center; border-left: 0; background: transparent; color: var(--td-icon-muted); line-height: 1; }
.td-tab-add .td-icon { width: 14px; height: 14px; }
.td-region-actions { display: flex; flex: 1 1 auto; justify-content: space-between; min-width: 51px; background: #0f1318; }
.td-panel-header-actions { margin-left: auto; }
.td-region-actions button, .td-panel-header-actions button { display: grid; width: 24px; height: 24px; place-items: center; border-left: 0; background: transparent; color: var(--td-icon-muted); font-size: 12px; }
.td-region-actions button:hover, .td-panel-header-actions button:hover { background: #252c36; color: #ffffff; }
.td-region-actions button .td-icon, .td-panel-header-actions button .td-icon { width: 12px; height: 12px; }

.td-drop-preview { position: absolute; z-index: 10; pointer-events: none; border: 1px solid var(--td-bg-header-focused); background: rgb(74 137 243 / 32%); }
.td-drop-preview.left { top: 24px; bottom: 0; left: 0; width: 28%; }
.td-drop-preview.right { top: 24px; right: 0; bottom: 0; width: 28%; }
.td-drop-preview.top { top: 24px; right: 0; left: 0; height: 28%; }
.td-drop-preview.bottom { right: 0; bottom: 0; left: 0; height: 28%; }
.td-drop-preview.center { inset: 24px 0 0; }

.td-panel { min-width: 0; min-height: 0; height: 100%; border: 1px solid var(--td-border-subtle); border-top: 0; overflow: hidden; background: #1c222b; }
.td-panel-kicker { display: flex; justify-content: space-between; align-items: center; gap: 12px; margin: 0; }
.td-panel-kicker span:first-child { display: block; color: var(--td-text-primary); font-size: 10px; font-weight: 600; letter-spacing: 0.12em; text-transform: uppercase; }
.td-panel-kicker span:last-child { color: var(--td-icon-muted); font-size: 10px; }

.td-viewport { display: grid; min-width: 0; min-height: 0; height: 100%; grid-template-rows: 24px minmax(0, 1fr); border: 1px solid var(--td-border-subtle); overflow: hidden; background: #0b0c0f; }
.td-panel-header { display: flex; align-items: center; min-height: 24px; background: #15181d; }
.td-viewport-drag { flex: 1; min-width: 0; height: 24px; padding-left: 8px; overflow: hidden; color: #fafafa; cursor: grab; font-size: 9px; font-weight: 600; letter-spacing: 0.1em; line-height: 24px; text-align: left; text-overflow: ellipsis; text-transform: uppercase; white-space: nowrap; }
.td-viewport-transport { align-self: center; height: 22px; border: 1px solid rgb(147 162 183 / 42%); border-radius: 3px; margin-right: 8px; padding: 0 20px 0 7px; background: #1d2630; color: var(--td-text-secondary); font-size: 10px; font-weight: 600; letter-spacing: 0.04em; text-transform: uppercase; }
.td-panel-header-actions { display: flex; }
.td-close-icon-button { position: relative; }
.td-close-icon-button::before, .td-close-icon-button::after { content: ""; position: absolute; top: 50%; left: 50%; width: 12px; height: 1.6px; border-radius: 999px; background: currentColor; }
.td-close-icon-button::before { transform: translate(-50%, -50%) rotate(45deg); }
.td-close-icon-button::after { transform: translate(-50%, -50%) rotate(-45deg); }
.td-viewport-body { position: relative; min-width: 0; min-height: 0; overflow: hidden; background: #0b0c0f; }
.td-unity-host { position: absolute; z-index: 1; inset: 0; }
.td-unity-host:not(.is-ready) { pointer-events: none; }
.td-unity-host:not(.is-ready) .td-unity-canvas { opacity: 0; }
.td-unity-canvas { display: block; width: 100%; height: 100%; background: #050709; }
.td-fallback-scene { position: absolute; z-index: 0; inset: 0; overflow: hidden; background: linear-gradient(180deg, rgb(35 33 17 / 58%) 0, rgb(8 9 9 / 82%) 32%, rgb(5 7 8 / 92%) 33%), linear-gradient(90deg, rgb(45 255 97 / 9%) 1px, transparent 1px), linear-gradient(rgb(45 255 97 / 7%) 1px, transparent 1px); background-size: auto, 24px 24px, 24px 24px; color: rgb(246 247 249 / 68%); font-size: 10px; letter-spacing: 0.08em; text-transform: uppercase; }
.td-fallback-scene.is-empty { z-index: 2; pointer-events: none; }
.td-viewport-body.is-unity-active .td-fallback-scene.has-frame { display: none; }
.td-fallback-scene > span { position: absolute; top: 16px; left: 16px; max-width: 280px; }
.td-road-grid, .td-ego-truck, .td-path-line { display: none; }
.td-unity-controls { position: absolute; z-index: 3; inset: 0; pointer-events: none; }
.td-unity-controls > div { position: absolute; right: 16px; display: grid; overflow: hidden; border: 1px solid #56657a; border-radius: 4px; background: #37414f; box-shadow: 0 8px 18px rgb(0 0 0 / 34%); pointer-events: auto; }
.td-unity-controls > div[aria-label="Unity camera mode controls"] { bottom: 108px; }
.td-unity-controls > div[aria-label="Unity zoom controls"] { bottom: 16px; }
.td-unity-controls button { display: grid; width: 32px; height: 32px; place-items: center; border-bottom: 1px solid #56657a; background: #37414f; color: #ffffff; font-size: 10px; font-weight: 600; line-height: 16px; }
.td-unity-controls button.td-control-active { background: #4e5e75; }
.td-unity-controls button:last-child { border-bottom: 0; }
.td-unity-controls button:hover { background: #475467; }
.td-unity-controls button .td-icon { width: 16px; height: 16px; }
.td-control-svg { width: 18px; height: 18px; fill: none; stroke: currentColor; stroke-linecap: round; stroke-linejoin: round; stroke-width: 1.7; }
.td-viz-icon { width: 18px; height: 18px; background: currentColor; }
.td-viz-icon-reset { mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cg fill='none' stroke='black' stroke-linecap='round' stroke-linejoin='round' stroke-width='1.8'%3E%3Ccircle cx='12' cy='12' r='8.5'/%3E%3Cpath d='m15.8 6.5-2.4 7-5.2 4 2.4-7 5.2-4Z'/%3E%3Cpath d='M17.8 4.8h-4v4'/%3E%3C/g%3E%3C/svg%3E") center / contain no-repeat; -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cg fill='none' stroke='black' stroke-linecap='round' stroke-linejoin='round' stroke-width='1.8'%3E%3Ccircle cx='12' cy='12' r='8.5'/%3E%3Cpath d='m15.8 6.5-2.4 7-5.2 4 2.4-7 5.2-4Z'/%3E%3Cpath d='M17.8 4.8h-4v4'/%3E%3C/g%3E%3C/svg%3E") center / contain no-repeat; }
.td-viz-icon-link { mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cg fill='none' stroke='black' stroke-linecap='round' stroke-linejoin='round' stroke-width='1.8'%3E%3Cpath d='M9.5 8.3h-2a3.7 3.7 0 0 0 0 7.4h3'/%3E%3Cpath d='M14.5 8.3h2a3.7 3.7 0 0 1 0 7.4h-3'/%3E%3Cpath d='M8.8 12h6.4'/%3E%3C/g%3E%3C/svg%3E") center / contain no-repeat; -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cg fill='none' stroke='black' stroke-linecap='round' stroke-linejoin='round' stroke-width='1.8'%3E%3Cpath d='M9.5 8.3h-2a3.7 3.7 0 0 0 0 7.4h3'/%3E%3Cpath d='M14.5 8.3h2a3.7 3.7 0 0 1 0 7.4h-3'/%3E%3Cpath d='M8.8 12h6.4'/%3E%3C/g%3E%3C/svg%3E") center / contain no-repeat; }
.td-viz-icon-scale { mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cg fill='none' stroke='black' stroke-linecap='round' stroke-linejoin='round' stroke-width='1.8'%3E%3Cpath d='M5 17.5h14v2.5H5z'/%3E%3Cpath d='M7.5 17.5v-4M10.5 17.5v-2.5M13.5 17.5v-4M16.5 17.5v-2.5'/%3E%3Cpath d='M6 7.5h12M8.5 5 6 7.5 8.5 10M15.5 5 18 7.5 15.5 10'/%3E%3C/g%3E%3C/svg%3E") center / contain no-repeat; -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cg fill='none' stroke='black' stroke-linecap='round' stroke-linejoin='round' stroke-width='1.8'%3E%3Cpath d='M5 17.5h14v2.5H5z'/%3E%3Cpath d='M7.5 17.5v-4M10.5 17.5v-2.5M13.5 17.5v-4M16.5 17.5v-2.5'/%3E%3Cpath d='M6 7.5h12M8.5 5 6 7.5 8.5 10M15.5 5 18 7.5 15.5 10'/%3E%3C/g%3E%3C/svg%3E") center / contain no-repeat; }
.td-control-compass, .td-control-link, .td-control-ruler { position: relative; display: block; width: 18px; height: 18px; }
.td-control-compass { border: 1.7px solid currentColor; border-radius: 50%; }
.td-control-compass::after { content: ""; position: absolute; top: 3px; left: 7px; width: 5px; height: 10px; border-top: 1.7px solid currentColor; border-left: 1.7px solid currentColor; transform: rotate(28deg); }
.td-control-link::before, .td-control-link::after { content: ""; position: absolute; top: 5px; width: 9px; height: 7px; border: 1.7px solid currentColor; border-radius: 6px; }
.td-control-link::before { left: 1px; transform: rotate(-24deg); }
.td-control-link::after { right: 1px; transform: rotate(-24deg); }
.td-control-ruler::before { content: ""; position: absolute; right: 1px; bottom: 3px; left: 1px; height: 5px; border: 1.7px solid currentColor; }
.td-control-ruler::after { content: ""; position: absolute; right: 4px; bottom: 8px; left: 4px; height: 7px; border-right: 1.7px solid currentColor; border-left: 1.7px solid currentColor; box-shadow: 4px 0 0 -2px currentColor; }
.td-gauge-panel { padding: 0; }
.td-gauge-body { display: grid; min-width: 0; min-height: 0; height: 100%; grid-template-rows: minmax(0, 1fr) minmax(48px, auto); gap: clamp(4px, 1vh, 8px); padding: clamp(6px, 1.5vh, 18px) clamp(12px, 2vw, 23px) clamp(6px, 1.5vh, 16px); overflow: hidden; background: #1c222b; }
.td-dial-stage { container-type: size; position: relative; display: grid; min-height: 0; align-content: end; justify-items: center; overflow: hidden; }
.td-gauge-scale { position: relative; width: min(100%, 680px); aspect-ratio: 300 / 190; }
@supports (width: 1cqw) {
  .td-gauge-scale { width: min(100cqw, calc(100cqh * 300 / 190), 680px); }
}
.td-gauge-svg { position: relative; z-index: 1; display: block; width: 100%; height: 100%; overflow: visible; }
.td-gauge-face { fill: #0b0e12; filter: drop-shadow(0 0 24px rgb(0 0 0 / 22%)); }
.td-gauge-track { fill: none; stroke: rgb(180 190 205 / 86%); stroke-linecap: round; stroke-width: 5; }
.td-gauge-tick { stroke: rgb(255 255 255 / 58%); stroke-linecap: round; stroke-width: 1.5; }
.td-gauge-tick.major { stroke: rgb(255 255 255 / 88%); stroke-width: 2.6; }
.td-gauge-tick-label { fill: rgb(255 255 255 / 82%); font-size: 10.5px; font-weight: 600; text-anchor: middle; }
.td-gauge-needle { stroke: #ff2340; stroke-linecap: round; stroke-width: 2; filter: drop-shadow(0 0 5px rgb(255 35 64 / 44%)); }
.td-gauge-value { container-type: size; position: absolute; z-index: 2; left: 50%; top: 67%; display: grid; width: 17.5%; height: 22.5%; min-width: 0; min-height: 0; align-content: center; justify-items: center; border: clamp(1px, 0.55cqw, 2px) solid rgb(147 162 183 / 26%); border-radius: clamp(3px, 2.3%, 7px); padding: clamp(1px, 1.2%, 5px) clamp(2px, 1.8%, 6px); background: rgb(29 37 49 / 92%); box-shadow: 0 8px 20px rgb(0 0 0 / 24%); transform: translate(-50%, -50%); }
.td-gauge-value strong { font-size: clamp(5px, 34cqw, 21px); font-weight: 600; letter-spacing: -0.02em; line-height: 0.9; }
.td-gauge-value span { color: var(--td-text-secondary); font-size: clamp(4px, 21cqw, 11px); line-height: 1; }
.td-gauge-status, .td-chart-status.live { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); clip-path: inset(50%); white-space: nowrap; }
.td-objectives { display: grid; min-width: 0; min-height: 0; align-self: end; gap: clamp(3px, 0.7vh, 8px); }
.td-objectives h3 { margin: 0; color: var(--td-text-primary); font-size: clamp(9px, 1.4vh, 11px); font-weight: 600; letter-spacing: 0.02em; line-height: 1.1; }
.td-objective-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: clamp(6px, 1.4vw, 10px); }
.td-objective { display: grid; min-width: 0; min-height: clamp(34px, 6vh, 56px); place-items: center; border: 1px solid rgb(147 162 183 / 24%); border-radius: 4px; padding: clamp(3px, 0.8vh, 8px) 10px; background: rgb(29 37 49 / 74%); color: #8fc7ff; }
.td-objective span { overflow: hidden; max-width: 100%; font-size: clamp(14px, 3vh, 24px); font-weight: 600; line-height: 1; text-overflow: ellipsis; white-space: nowrap; }
.td-objective small { overflow: hidden; max-width: 100%; color: var(--td-icon-muted); font-size: clamp(8px, 1.6vh, 12px); line-height: 1.15; text-overflow: ellipsis; white-space: nowrap; }
.td-objective.success { color: var(--td-success); }
.td-objective.warning { color: var(--td-warning); }
.td-objective.danger { color: var(--td-danger); }

.td-chart-panel { display: grid; grid-template-rows: minmax(0, 1fr); gap: 4px; padding: 4px 5px 5px; overflow: hidden; background: #1c222b; }
.td-chart-panel > .td-panel-kicker { display: none; }
.td-chart { display: grid; min-width: 0; min-height: 0; grid-template-rows: minmax(0, 1fr); gap: 4px; }
.td-chart-stage { display: grid; min-width: 0; min-height: 0; grid-template-columns: 42px minmax(0, 1fr) 8px; grid-template-rows: 18px minmax(64px, 1fr) 22px; }
.td-chart-axis-title { grid-column: 2; grid-row: 1; align-self: start; overflow: hidden; color: rgb(237 239 243 / 82%); font-size: 10px; font-weight: 500; line-height: 12px; text-overflow: ellipsis; white-space: nowrap; }
.td-chart-y-axis { position: relative; grid-column: 1; grid-row: 2; min-height: 0; }
.td-chart-y-axis span { position: absolute; right: 7px; color: rgb(237 239 243 / 74%); font-size: 10px; line-height: 10px; transform: translateY(-50%); }
.td-chart-plot { position: relative; grid-column: 2; grid-row: 2; min-width: 0; min-height: 0; border: 1px solid rgb(147 162 183 / 24%); background: #192029; }
.td-chart-plot svg { display: block; width: 100%; height: 100%; overflow: hidden; }
.td-chart-plot line { vector-effect: non-scaling-stroke; stroke: rgb(147 162 183 / 23%); stroke-width: 1; }
.td-chart-plot line[aria-label$="baseline"] { stroke: var(--td-accent-blue); stroke-width: 1.4; }
.td-chart-plot path[aria-label$="series"] { vector-effect: non-scaling-stroke; fill: none; stroke: #00b894; stroke-linecap: round; stroke-linejoin: round; stroke-width: 2; filter: drop-shadow(0 0 5px rgb(29 171 139 / 32%)); }
.td-chart-x-axis { position: relative; grid-column: 2; grid-row: 3; min-width: 0; }
.td-chart-x-axis span { position: absolute; top: 6px; color: rgb(237 239 243 / 74%); font-size: 10px; line-height: 10px; transform: translateX(-50%); white-space: nowrap; }
.td-chart-x-axis span:first-child { transform: translateX(0); }
.td-chart-x-axis span:last-child { transform: translateX(-100%); }
.td-chart-legend { display: none; min-width: 0; align-items: end; gap: 7px; color: var(--td-text-secondary); font-size: 11px; line-height: 14px; }
.td-chart-legend::before { content: ""; width: 9px; height: 9px; border-radius: 999px; background: #00b894; box-shadow: 0 0 8px #00b894; }
.td-chart-legend span:first-child { color: var(--td-text-primary); font-size: 11px; font-weight: 800; text-transform: uppercase; }
.td-chart-status { color: var(--td-text-secondary); font-size: 10px; line-height: 12px; text-align: right; }
.td-chart-empty-overlay { position: absolute; inset: 0; display: grid; place-items: center; padding: 18px; color: rgb(246 247 249 / 78%); font-size: 12px; font-weight: 800; letter-spacing: 0.05em; text-align: center; text-transform: uppercase; }

.td-event-log { position: relative; display: grid; min-width: 0; min-height: 0; grid-template-rows: auto minmax(0, 1fr) auto; background: #15181d; text-align: left; }
.td-event-log .td-panel-kicker { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); clip-path: inset(50%); white-space: nowrap; }
.td-event-log .td-panel-kicker span:first-child { color: #acd0ed; font-size: 10px; font-weight: 800; letter-spacing: 0.16em; text-transform: uppercase; }
.td-event-log .td-panel-kicker span:last-child { display: none; }
.td-event-header, .td-event-row { display: grid; grid-template-columns: minmax(70px, 0.8fr) minmax(0, 2fr) minmax(88px, 1fr) minmax(64px, 0.7fr); min-width: 0; }
.td-event-header { margin: 8px 18px 0 8px; border-bottom: 1px solid var(--td-border-subtle); background: #37414f; color: var(--td-text-secondary); }
.td-event-header span { overflow: hidden; padding: 6px 10px; font-size: 10px; font-weight: 500; letter-spacing: 0.02em; line-height: 12px; text-overflow: ellipsis; white-space: nowrap; }
.td-event-list { display: grid; min-height: 0; align-content: start; margin: 0; padding: 0 8px 8px; overflow: auto; list-style: none; scrollbar-color: #7f8790 #15181d; scrollbar-gutter: stable; }
.td-event-list::-webkit-scrollbar { width: 10px; height: 10px; }
.td-event-list::-webkit-scrollbar-track { background: #15181d; }
.td-event-list::-webkit-scrollbar-thumb { border: 2px solid #15181d; border-radius: 999px; background: #7f8790; }
.td-event-row { border-bottom: 1px solid rgb(126 144 169 / 42%); background: rgb(13 16 19 / 84%); color: var(--td-text-secondary); }
.td-event-row span, .td-event-row strong { overflow: hidden; min-width: 0; padding: 7px 10px; font-size: 10px; line-height: 13px; text-overflow: ellipsis; white-space: nowrap; }
.td-event-row strong { color: var(--td-text-primary); font-weight: 600; }
.td-event-row span { color: var(--td-text-secondary); font-weight: 400; }
.td-event-placeholder { display: grid; min-height: 0; place-items: center; place-self: stretch; align-content: center; justify-items: center; gap: 8px; padding: 16px; color: var(--td-text-secondary); font-size: 18px; font-weight: 700; line-height: 22px; text-align: center; }
.td-event-placeholder::before { content: "Playback event log idle"; color: var(--td-icon-muted); font-size: 10px; font-weight: 700; letter-spacing: 0.14em; line-height: 8px; text-transform: uppercase; }
.td-event-placeholder span { max-width: 240px; color: var(--td-icon-muted); font-size: 12px; font-weight: 500; line-height: 16px; }
.td-event-actions { display: flex; min-width: 0; width: 100%; align-items: center; gap: 8px; border-top: 1px solid var(--td-border-subtle); padding: 8px 12px; background: #15181d; }
.td-event-actions button { height: 24px; border: 1px solid var(--td-border-subtle); border-radius: 4px; padding: 0 10px; background: #37414f; color: var(--td-text-secondary); font-size: 11px; line-height: 14px; }
.td-event-actions button:hover, .td-event-actions button:focus-visible { background: var(--td-bg-header-hover); outline: 1px solid var(--td-bg-header-focused); outline-offset: -1px; }
.td-event-status-dot { width: 12px; height: 12px; flex: 0 0 auto; border: 1px solid var(--td-text-secondary); border-radius: 50%; background: #f58e90; }

.td-empty-panel, .td-empty-workspace { display: grid; place-items: center; align-content: center; gap: 14px; text-align: center; color: #acd0ed; }
.td-empty-workspace { align-self: center; justify-self: center; width: 360px; min-height: 180px; border: 1px solid var(--td-border-subtle); border-radius: 4px; background: #11151a; }
.td-empty-workspace > span { display: none; }
.td-empty-workspace h1 { margin: 0; color: var(--td-text-primary); font-size: 20px; }
.td-empty-workspace p { max-width: 260px; margin: 0; font-size: 14px; line-height: 18px; }
.td-empty-workspace button { display: inline-flex; height: 38px; align-items: center; gap: 8px; border: 1px solid var(--td-border-subtle); border-radius: 4px; padding: 0 14px; background: #1d2229; color: var(--td-text-primary); font-size: 16px; }
.td-empty-workspace button .td-icon { width: 16px; height: 16px; }

.td-time-scrubber { position: relative; display: grid; height: 64px; min-height: 64px; grid-template-columns: 40px minmax(0, 1fr); grid-template-rows: 24px 40px; border-top: 1px solid var(--td-border-subtle); overflow: hidden; background: #1d2229; color: var(--td-text-secondary); font-size: 12px; }
.td-time-scrubber.is-collapsed { height: 36px; min-height: 36px; grid-template-rows: 10px 26px; }
.td-scrubber-chevron { display: grid; grid-column: 1; grid-row: 1 / 3; width: 38px; height: 100%; place-items: center; border-right: 1px solid var(--td-border-subtle); padding-top: 0; background: #1d2229; color: #ffffff; }
.td-scrubber-chevron:hover, .td-scrubber-chevron:focus-visible { background: #2b323d; outline: 1px solid #56657a; outline-offset: -1px; }
.td-scrubber-track, .td-scrubber-range { grid-column: 2; grid-row: 1; align-self: end; margin: 0 22px 2px 16px; }
.td-scrubber-track { position: relative; height: 4px; background: #93a2b7; pointer-events: none; }
.td-scrubber-track span { display: block; height: 100%; background: #93a2b7; }
.td-scrubber-track i { position: absolute; top: -13px; width: 10px; height: 18px; border-radius: 999px; background: #ffffff; transform: translateX(-50%); }
.td-scrubber-range { width: calc(100% - 38px); height: 12px; padding: 0; border: 0; background: transparent; opacity: 0; cursor: pointer; }
.td-scrubber-range:disabled { cursor: not-allowed; }
.td-scrubber-controls { display: flex; grid-column: 2; grid-row: 2; min-width: 0; align-items: center; gap: 18px; padding: 0 12px 0 22px; }
.td-scrubber-icon-button { display: grid; width: 26px; height: 26px; place-items: center; color: #ffffff; }
.td-scrubber-icon-button:hover:not(:disabled), .td-scrubber-icon-button:focus-visible { color: #ffffff; outline: 1px solid #56657a; outline-offset: -1px; }
.td-scrubber-play-icon { width: 24px; height: 24px; background: currentColor; mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M7 4.5v15l11-7.5L7 4.5Z' fill='none' stroke='black' stroke-linejoin='round' stroke-width='1.9'/%3E%3C/svg%3E") center / contain no-repeat; -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M7 4.5v15l11-7.5L7 4.5Z' fill='none' stroke='black' stroke-linejoin='round' stroke-width='1.9'/%3E%3C/svg%3E") center / contain no-repeat; }
.td-scrubber-step-icon, .td-scrubber-repeat-icon, .td-save-icon { position: relative; display: inline-block; color: currentColor; }
.td-scrubber-step-icon { width: 25px; height: 25px; background: currentColor; mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cg fill='none' stroke='black' stroke-linejoin='round' stroke-width='1.7'%3E%3Cpath d='M4 4.5 12 12l-8 7.5v-15Z'/%3E%3Cpath d='M12 4.5 20 12l-8 7.5v-15Z'/%3E%3C/g%3E%3C/svg%3E") center / contain no-repeat; -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cg fill='none' stroke='black' stroke-linejoin='round' stroke-width='1.7'%3E%3Cpath d='M4 4.5 12 12l-8 7.5v-15Z'/%3E%3Cpath d='M12 4.5 20 12l-8 7.5v-15Z'/%3E%3C/g%3E%3C/svg%3E") center / contain no-repeat; }
.td-scrubber-step-icon i { display: none; }
.td-scrubber-step-icon.is-back { transform: rotate(180deg); }
.td-scrubber-repeat-icon { width: 20px; height: 18px; background: currentColor; mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cg fill='none' stroke='black' stroke-linecap='round' stroke-linejoin='round' stroke-width='1.9'%3E%3Cpath d='M17 2.8 21 7l-4 4.2'/%3E%3Cpath d='M3.5 10V8.5A1.5 1.5 0 0 1 5 7h16'/%3E%3Cpath d='M7 21.2 3 17l4-4.2'/%3E%3Cpath d='M20.5 14v1.5A1.5 1.5 0 0 1 19 17H3'/%3E%3C/g%3E%3C/svg%3E") center / contain no-repeat; -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cg fill='none' stroke='black' stroke-linecap='round' stroke-linejoin='round' stroke-width='1.9'%3E%3Cpath d='M17 2.8 21 7l-4 4.2'/%3E%3Cpath d='M3.5 10V8.5A1.5 1.5 0 0 1 5 7h16'/%3E%3Cpath d='M7 21.2 3 17l4-4.2'/%3E%3Cpath d='M20.5 14v1.5A1.5 1.5 0 0 1 19 17H3'/%3E%3C/g%3E%3C/svg%3E") center / contain no-repeat; }
.td-scrubber-repeat-icon::before, .td-scrubber-repeat-icon::after { content: none; }
.td-scrubber-time { color: #ffffff; font-size: 14px; font-weight: 600; letter-spacing: 0; line-height: 18px; white-space: nowrap; }
.td-scrubber-live { display: inline-flex; min-width: 0; align-items: center; gap: 12px; color: #e7e9ee; font-size: 13px; font-weight: 600; letter-spacing: 0.08em; line-height: 16px; white-space: nowrap; }
.td-scrubber-live > span:first-child { width: 9px; height: 9px; border-radius: 50%; background: var(--td-success); }
.td-scrubber-live .td-icon { width: 18px; height: 18px; color: #e7e9ee; }
.td-scrubber-secondary { display: flex; grid-column: 2; grid-row: 2; align-items: center; justify-content: flex-end; gap: 0; padding-right: 16px; pointer-events: none; }
.td-scrubber-secondary button { display: inline-flex; height: 24px; align-items: center; gap: 12px; border-left: 1px solid #93a2b7; padding: 0 26px; color: #ffffff; font-size: 14px; font-weight: 600; line-height: 18px; pointer-events: auto; white-space: nowrap; }
.td-scrubber-secondary button:first-child { border-left: 0; }
.td-scrubber-secondary button:hover, .td-scrubber-secondary button:focus-visible { background: #2b323d; outline: 1px solid #56657a; outline-offset: -1px; }
.td-scrubber-secondary .td-icon, .td-scrubber-secondary .td-gear-icon, .td-save-icon { width: 16px; height: 16px; }
.td-time-scrubber.is-collapsed .td-scrubber-controls, .td-time-scrubber.is-collapsed .td-scrubber-secondary { display: none; }
.td-time-scrubber.is-collapsed .td-scrubber-track, .td-time-scrubber.is-collapsed .td-scrubber-range { grid-row: 1 / 3; align-self: center; margin-bottom: 0; }
.td-time-scrubber.is-collapsed .td-scrubber-track i { top: -7px; }
.td-save-icon { background: currentColor; mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cg fill='none' stroke='black' stroke-linecap='round' stroke-linejoin='round' stroke-width='1.8'%3E%3Cpath d='M5 3.5h11.5L20 7v13.5H5V3.5Z'/%3E%3Cpath d='M8 3.5v6h8v-6'/%3E%3Cpath d='M8 20.5v-7h8v7'/%3E%3C/g%3E%3C/svg%3E") center / contain no-repeat; -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cg fill='none' stroke='black' stroke-linecap='round' stroke-linejoin='round' stroke-width='1.8'%3E%3Cpath d='M5 3.5h11.5L20 7v13.5H5V3.5Z'/%3E%3Cpath d='M8 3.5v6h8v-6'/%3E%3Cpath d='M8 20.5v-7h8v7'/%3E%3C/g%3E%3C/svg%3E") center / contain no-repeat; }
.td-save-icon::before, .td-save-icon::after { content: none; }

.td-backdrop { position: fixed; inset: 0; z-index: 50; display: grid; place-items: center; background: rgb(0 0 0 / 58%); backdrop-filter: blur(8px); }
.td-dialog { display: grid; gap: 14px; width: min(520px, calc(100vw - 32px)); border: 1px solid var(--td-border-strong); border-radius: 4px; padding: 18px; background: #15181d; box-shadow: 0 22px 70px rgb(0 0 0 / 55%); }
.td-dialog header span { color: var(--td-accent); text-transform: uppercase; letter-spacing: 0.12em; font-size: 12px; }
.td-dialog h2 { margin: 4px 0 0; font-size: 20px; }
.td-dialog label { display: grid; gap: 6px; color: var(--td-text-secondary); }
.td-dialog-actions { display: flex; justify-content: flex-end; gap: 8px; }
.td-dialog-actions button { border: 1px solid var(--td-border-subtle); border-radius: 3px; padding: 9px 13px; background: #1d2229; }
.td-log-results { display: grid; gap: 8px; max-height: 320px; overflow: auto; }
.td-log-results button { display: grid; gap: 3px; border: 1px solid var(--td-border-subtle); border-radius: 3px; padding: 10px; background: #1d2229; text-align: left; }
.td-log-results button.is-active { border-color: var(--td-accent); background: rgb(29 171 139 / 16%); }
.td-log-results span { color: var(--td-text-secondary); }

#blazor-error-ui { display: none; position: fixed; inset: auto 16px 16px 16px; z-index: 100; padding: 12px 16px; border: 1px solid var(--td-danger); border-radius: 4px; background: #2b0b12; color: white; }
#blazor-error-ui .dismiss { cursor: pointer; float: right; }

@media (max-width: 900px) {
  .td-shell { grid-template-rows: auto minmax(0, 1fr) auto; }
  .td-topbar { flex-wrap: wrap; }
  .td-workarea { grid-template-columns: 1fr !important; }
  .td-sidebar { display: none; }
  .td-dock-root, .td-dock-left, .td-dock-right { display: grid; grid-template-columns: 1fr !important; grid-template-rows: none !important; gap: 8px; overflow: auto; }
  .td-splitter { display: none; }
  .td-time-scrubber { height: auto; min-height: 112px; grid-template-columns: 40px minmax(0, 1fr); grid-template-rows: 24px 42px 44px; }
  .td-scrubber-chevron { grid-column: 1; grid-row: 1 / 4; }
  .td-scrubber-track, .td-scrubber-range { grid-column: 2; grid-row: 1; margin-right: 14px; }
  .td-scrubber-controls { grid-column: 2; grid-row: 2; gap: 12px; overflow: auto; padding-right: 12px; }
  .td-scrubber-secondary { grid-column: 2; grid-row: 3; justify-content: flex-start; overflow: auto; padding: 0 12px 6px 18px; }
  .td-scrubber-secondary button { padding: 0 14px; font-size: 13px; }
}