/* =============================================================================
   Unifin Desktop UI Kit - component stylesheet.
   Every class here is referenced from @unifin/desktop-core CLASS and rendered by the components.
   Colours/spacing/sizes come from the tokens package only (--ud-*): a hardcoded colour here is a
   defect caught by guard:ui.
   ============================================================================= */

*,
*::before,
*::after {
  box-sizing: border-box;
}

.ud-desktop {
  background: var(--ud-bg);
  color: var(--ud-text);
  font-family: var(--ud-font-sans);
  /* Zone base per the canon (unifdesk.css): 13px and the browser's normal line-height - the zone
     does not inherit a portal's typography. */
  font-size: var(--ud-font-size-zone);
  line-height: normal;
  -webkit-font-smoothing: antialiased;
}

/* Canon scrollbars: thin, transparent track, accent thumb. */
.ud-desktop,
.ud-desktop * {
  scrollbar-width: thin;
  scrollbar-color: color-mix(in srgb, var(--ud-accent2) 55%, transparent) transparent;
}
.ud-desktop *::-webkit-scrollbar {
  width: 6px;
  height: 6px;
}
.ud-desktop *::-webkit-scrollbar-track {
  background: transparent;
}
.ud-desktop *::-webkit-scrollbar-thumb {
  background: color-mix(in srgb, var(--ud-accent2) 45%, transparent);
  border-radius: var(--ud-radius-pill);
}
.ud-desktop *::-webkit-scrollbar-thumb:hover {
  background: color-mix(in srgb, var(--ud-accent2) 72%, transparent);
}

.ud-desktop :focus-visible {
  outline: var(--ud-focus-width) solid var(--ud-focus-ring);
  outline-offset: var(--ud-focus-offset);
  border-radius: var(--ud-radius-sm);
}

.ud-num {
  font-variant-numeric: tabular-nums;
  font-family: var(--ud-font-mono);
}

.ud-scroll {
  overflow: auto;
  scrollbar-width: thin;
  scrollbar-color: color-mix(in srgb, var(--ud-accent2) 55%, transparent) transparent;
}
.ud-scroll::-webkit-scrollbar {
  width: var(--ud-scrollbar);
  height: var(--ud-scrollbar);
}
.ud-scroll::-webkit-scrollbar-thumb {
  background: color-mix(in srgb, var(--ud-accent2) 45%, transparent);
  border-radius: var(--ud-radius-pill);
}
.ud-scroll::-webkit-scrollbar-thumb:hover {
  background: color-mix(in srgb, var(--ud-accent2) 72%, transparent);
}

/* Layout helpers ---------------------------------------------------------- */
.ud-stack {
  display: flex;
  flex-direction: column;
  gap: var(--ud-gap-sm);
}
.ud-inline {
  display: flex;
  align-items: center;
  gap: var(--ud-gap-sm);
}
.ud-form-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(180px, 1fr));
  gap: var(--ud-gap-sm) var(--ud-gap-md);
}
.ud-form-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--ud-gap-md);
  min-height: var(--ud-h-row);
}
.ud-divider {
  height: 1px;
  background: var(--ud-line);
  border: 0;
  margin: 0;
}

/* Buttons ----------------------------------------------------------------- */
.ud-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: var(--ud-gap-xs);
  height: var(--ud-h-button);
  padding: 0 var(--ud-gap-sm);
  border: 1px solid var(--ud-line2);
  border-radius: var(--ud-radius-md);
  background: var(--ud-surface2);
  color: var(--ud-text2);
  font-family: inherit;
  font-size: var(--ud-font-size-body);
  font-weight: 500;
  cursor: pointer;
  white-space: nowrap;
  transition: background var(--ud-motion-quick), border-color var(--ud-motion-quick);
}
.ud-btn[data-size="sm"] {
  height: var(--ud-h-buttonSm);
  padding: 0 var(--ud-gap-xs);
}
.ud-btn:hover:not(:disabled) {
  border-color: var(--ud-line3);
  background: var(--ud-surface3);
}
.ud-btn[data-variant="primary"] {
  background: var(--ud-accent-soft);
  border-color: var(--ud-accent);
  color: var(--ud-accent2);
  font-weight: 600;
}
.ud-btn[data-variant="primary"]:hover:not(:disabled) {
  border-color: var(--ud-accent2);
}
.ud-btn[data-variant="ghost"] {
  background: transparent;
  border-color: transparent;
  color: var(--ud-muted2);
}
.ud-btn[data-variant="danger"] {
  background: transparent;
  border-color: var(--ud-down);
  color: var(--ud-down);
}
.ud-btn[data-variant="danger"]:hover:not(:disabled) {
  background: var(--ud-down-soft);
}
.ud-btn[data-variant="buy"] {
  background: color-mix(in srgb, var(--ud-up) 22%, transparent);
  border-color: var(--ud-up);
  color: var(--ud-up);
  font-weight: 600;
}
.ud-btn[data-variant="sell"] {
  background: color-mix(in srgb, var(--ud-down) 22%, transparent);
  border-color: var(--ud-down);
  color: var(--ud-down);
  font-weight: 600;
}
.ud-btn[data-active="true"] {
  border-color: var(--ud-accent);
  color: var(--ud-accent2);
}
.ud-btn:disabled {
  color: var(--ud-muted);
  border-color: var(--ud-line);
  background: transparent;
  cursor: not-allowed;
}

.ud-icon-btn {
  width: var(--ud-h-button);
  padding: 0;
}
.ud-icon-btn[data-size="sm"] {
  width: var(--ud-h-buttonSm);
}

/* Fields ------------------------------------------------------------------ */
.ud-field {
  display: flex;
  flex-direction: column;
  gap: var(--ud-gap-xs);
}
.ud-field__label {
  font-size: var(--ud-font-size-caption);
  color: var(--ud-muted2);
}
.ud-field__control {
  display: block;
}
.ud-input,
.ud-select,
.ud-textarea {
  width: 100%;
  height: var(--ud-h-field);
  padding: 0 var(--ud-gap-sm);
  border: 1px solid var(--ud-line2);
  border-radius: var(--ud-radius-md);
  background: transparent;
  color: var(--ud-text2);
  font-family: inherit;
  font-size: var(--ud-font-size-body);
}
.ud-textarea {
  height: auto;
  min-height: calc(var(--ud-h-field) * 3);
  padding: var(--ud-gap-sm);
}
.ud-select {
  appearance: none;
  padding-right: var(--ud-gap-lg);
}
.ud-input:hover,
.ud-select:hover,
.ud-textarea:hover {
  border-color: var(--ud-line3);
}
.ud-input[aria-invalid="true"],
.ud-select[aria-invalid="true"] {
  border-color: var(--ud-down);
}
.ud-field__error {
  font-size: var(--ud-font-size-caption);
  color: var(--ud-down);
}
.ud-field__hint {
  font-size: var(--ud-font-size-caption);
  color: var(--ud-muted);
}
.ud-field[data-status="success"] .ud-field__label {
  color: var(--ud-up);
}
.ud-field[data-status="success"] .ud-input,
.ud-field[data-status="success"] .ud-select,
.ud-field[data-status="success"] .ud-textarea {
  border-color: var(--ud-up);
}

.ud-checkbox,
.ud-radio {
  display: inline-flex;
  align-items: center;
  gap: var(--ud-gap-xs);
  cursor: pointer;
}
.ud-checkbox input,
.ud-radio input {
  width: 14px;
  height: 14px;
  accent-color: var(--ud-accent);
}
.ud-radio-group {
  display: flex;
  flex-direction: column;
  gap: var(--ud-gap-xs);
}
.ud-radio-group[data-orientation="horizontal"] {
  flex-direction: row;
  gap: var(--ud-gap-md);
}
.ud-radio-group[data-disabled="true"] {
  opacity: 0.6;
}

.ud-switch {
  position: relative;
  display: inline-block;
  width: 34px;
  height: 18px;
}
.ud-switch input {
  position: absolute;
  opacity: 0;
  width: 100%;
  height: 100%;
  margin: 0;
  cursor: pointer;
}
.ud-switch__track {
  position: absolute;
  inset: 0;
  background: var(--ud-line2);
  border-radius: var(--ud-radius-pill);
  transition: background var(--ud-motion-quick);
}
.ud-switch__track::after {
  content: "";
  position: absolute;
  top: 2px;
  left: 2px;
  width: 14px;
  height: 14px;
  background: var(--ud-inv);
  border-radius: 50%;
  transition: transform var(--ud-motion-quick);
}
.ud-switch input:checked + .ud-switch__track {
  background: var(--ud-up);
}
.ud-switch input:checked + .ud-switch__track::after {
  transform: translateX(16px);
}

/* Chip / segmented / stepper --------------------------------------------- */
.ud-chip {
  display: inline-flex;
  align-items: center;
  gap: var(--ud-gap-xs);
  height: var(--ud-h-segment);
  padding: 0 var(--ud-gap-sm);
  border: 1px solid var(--ud-line2);
  border-radius: var(--ud-radius-md);
  background: transparent;
  color: var(--ud-muted2);
  font-size: var(--ud-font-size-caption);
  cursor: pointer;
}
.ud-chip:hover {
  border-color: var(--ud-line3);
}
.ud-chip[data-tone="accent"],
.ud-chip[aria-pressed="true"] {
  background: var(--ud-accent-soft);
  border-color: var(--ud-accent);
  color: var(--ud-accent2);
}
.ud-chip[data-tone="up"] {
  color: var(--ud-up);
  border-color: var(--ud-up);
}
.ud-chip[data-tone="down"] {
  color: var(--ud-down);
  border-color: var(--ud-down);
}

.ud-segmented {
  display: inline-flex;
  border: 1px solid var(--ud-line2);
  border-radius: var(--ud-radius-md);
  overflow: hidden;
}
.ud-segment {
  height: var(--ud-h-segment);
  padding: 0 var(--ud-gap-md);
  border: 0;
  border-right: 1px solid var(--ud-line2);
  background: transparent;
  color: var(--ud-muted2);
  font-family: inherit;
  font-size: var(--ud-font-size-body);
  cursor: pointer;
}
.ud-segment:last-child {
  border-right: 0;
}
.ud-segment[aria-pressed="true"],
.ud-segment[data-active="true"] {
  background: var(--ud-accent);
  color: var(--ud-inv);
}

.ud-stepper {
  display: inline-flex;
  align-items: center;
  height: var(--ud-h-field);
  border: 1px solid var(--ud-line2);
  border-radius: var(--ud-radius-md);
}
.ud-stepper__btn {
  width: 18px;
  height: 100%;
  border: 0;
  background: transparent;
  color: var(--ud-muted2);
  cursor: pointer;
}
.ud-stepper__btn:hover {
  color: var(--ud-text);
}
.ud-stepper__value {
  min-width: 48px;
  padding: 0 var(--ud-gap-xs);
  text-align: center;
  font-family: var(--ud-font-mono);
  font-variant-numeric: tabular-nums;
}

/* Toolbar / panel header -------------------------------------------------- */
.ud-toolbar {
  display: flex;
  align-items: center;
  gap: var(--ud-gap-xs);
  min-height: var(--ud-h-section);
  padding: 0 var(--ud-gap-sm);
  background: var(--ud-surface3);
  border-bottom: 1px solid var(--ud-line);
}
.ud-toolbar__divider {
  width: 1px;
  align-self: stretch;
  margin: 4px 2px;
  background: var(--ud-line);
}
.ud-panel-head {
  display: flex;
  align-items: center;
  gap: var(--ud-gap-sm);
  height: var(--ud-h-widgetHead);
  padding: 0 var(--ud-gap-sm);
  background: var(--ud-surface3);
  border-bottom: 1px solid var(--ud-line);
}
.ud-panel-head__title {
  font-size: var(--ud-font-size-body);
  font-weight: 600;
}
.ud-panel-head__count {
  margin-left: auto;
  font-size: var(--ud-font-size-caption);
  color: var(--ud-muted);
}
.ud-section {
  display: flex;
  align-items: center;
  gap: var(--ud-gap-sm);
  height: var(--ud-h-section);
  padding: 0 var(--ud-gap-sm);
  background: var(--ud-surface3);
  font-size: var(--ud-font-size-body);
  font-weight: 600;
}

/* Windowing spacer (TASK-7-004): keeps the scroll extent without drawing rows. */
.ud-table__spacer,
.ud-table__spacer td {
  padding: 0;
  border: 0;
  background: transparent;
}

/* Tables ------------------------------------------------------------------ */
/* The grid scrolls inside its own box instead of pushing its host wider: a panel placed in a narrow
   column keeps its borders and never overlaps a neighbour. Same idea as the canon host utility. */
.ud-table-scroll {
  max-width: 100%;
  min-width: 0;
  overflow-x: auto;
}
.ud-table {
  width: 100%;
  border-collapse: collapse;
  font-size: var(--ud-font-size-body);
}
.ud-table__head th {
  position: sticky;
  top: 0;
  background: var(--ud-th-bg);
  color: var(--ud-th-fg);
  font-size: var(--ud-font-size-body);
  font-weight: var(--ud-th-weight);
  text-transform: var(--ud-th-caps);
  letter-spacing: var(--ud-th-tracking);
  text-align: left;
  padding: var(--ud-th-pad-y) var(--ud-th-pad-x);
  border-bottom: 1px solid var(--ud-th-bg2);
  white-space: nowrap;
}
.ud-table__row td {
  padding: var(--ud-td-pad-y) var(--ud-td-pad-x);
  border-bottom: 1px solid var(--ud-line);
  color: var(--ud-td-fg);
}
.ud-table--zebra .ud-table__row:nth-child(even) td {
  background: var(--ud-zebra);
}
.ud-table__row:hover td {
  background: var(--ud-row-hover);
}
.ud-table__row--selected td {
  background: var(--ud-accent-soft);
}
.ud-table td.ud-num,
.ud-table th.ud-num {
  text-align: right;
}
.ud-table__group td {
  background: var(--ud-surface3);
  font-weight: 600;
  height: var(--ud-h-section);
}
.ud-spark svg {
  display: block;
}

/* Badge / progress -------------------------------------------------------- */
.ud-badge {
  display: inline-flex;
  align-items: center;
  height: var(--ud-h-badge);
  padding: 0 var(--ud-gap-xs);
  border: 1px solid var(--ud-line2);
  border-radius: var(--ud-radius-sm);
  font-size: var(--ud-font-size-caption);
  color: var(--ud-muted2);
}
.ud-badge[data-tone="ok"],
.ud-badge[data-tone="success"] {
  border-color: var(--ud-up);
  color: var(--ud-up);
  background: color-mix(in srgb, var(--ud-up) 14%, transparent);
}
.ud-badge[data-tone="warn"] {
  border-color: var(--ud-amber);
  color: var(--ud-amber);
  background: color-mix(in srgb, var(--ud-amber) 14%, transparent);
}
.ud-badge[data-tone="error"] {
  border-color: var(--ud-down);
  color: var(--ud-down);
  background: var(--ud-down-soft);
}
.ud-badge[data-tone="busy"] {
  border-color: var(--ud-accent);
  color: var(--ud-accent2);
  background: var(--ud-accent-soft);
}
.ud-badge[data-tone="buy"] {
  border-color: var(--ud-up);
  color: var(--ud-up);
}
.ud-badge[data-tone="sell"] {
  border-color: var(--ud-down);
  color: var(--ud-down);
}

.ud-progress {
  height: 6px;
  border-radius: var(--ud-radius-pill);
  background: var(--ud-surface3);
  overflow: hidden;
}
.ud-progress__bar {
  height: 100%;
  background: var(--ud-accent);
}
.ud-limitbar .ud-progress__bar[data-tone="warn"] {
  background: var(--ud-amber);
}
.ud-limitbar .ud-progress__bar[data-tone="error"] {
  background: var(--ud-down);
}

.ud-skeleton {
  height: 9px;
  border-radius: var(--ud-radius-sm);
  background: linear-gradient(90deg, var(--ud-surface2), var(--ud-surface3), var(--ud-surface2));
  background-size: 200% 100%;
  animation: ud-skeleton 1.4s ease-in-out infinite;
}
@keyframes ud-skeleton {
  0% { background-position: 200% 0; }
  100% { background-position: -200% 0; }
}

.ud-empty {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: var(--ud-gap-sm);
  padding: var(--ud-gap-lg);
  border: 1px dashed var(--ud-line2);
  border-radius: var(--ud-radius-lg);
  color: var(--ud-muted);
  text-align: center;
}

.ud-pagination {
  display: inline-flex;
  gap: var(--ud-gap-xs);
}
.ud-pagination__item {
  min-width: var(--ud-h-buttonSm);
  height: var(--ud-h-buttonSm);
  padding: 0 var(--ud-gap-xs);
  border: 1px solid var(--ud-line2);
  border-radius: var(--ud-radius-sm);
  background: transparent;
  color: var(--ud-muted2);
  font-family: inherit;
  cursor: pointer;
}
.ud-pagination__item[aria-current="page"] {
  background: var(--ud-accent);
  border-color: var(--ud-accent);
  color: var(--ud-inv);
}

/* Banners and toasts ------------------------------------------------------ */
.ud-banner {
  display: flex;
  align-items: flex-start;
  gap: var(--ud-gap-sm);
  padding: var(--ud-gap-sm);
  border-left: 3px solid var(--ud-accent);
  background: var(--ud-surface2);
  border-radius: var(--ud-radius-sm);
}
.ud-banner[data-tone="warn"] { border-left-color: var(--ud-amber); }
.ud-banner[data-tone="error"] { border-left-color: var(--ud-down); }
.ud-banner[data-tone="success"] { border-left-color: var(--ud-up); }

.ud-toast-stack {
  position: fixed;
  right: var(--ud-gap-md);
  bottom: var(--ud-gap-md);
  display: flex;
  flex-direction: column;
  gap: var(--ud-gap-sm);
  z-index: 1000;
}
.ud-toast {
  display: flex;
  align-items: center;
  gap: var(--ud-gap-sm);
  min-width: 260px;
  max-width: 380px;
  padding: var(--ud-gap-sm);
  border: 1px solid var(--ud-line2);
  border-left-width: 3px;
  border-radius: var(--ud-radius-md);
  background: var(--ud-surface2);
  box-shadow: 0 18px 44px rgb(0 0 0 / .45);
}
.ud-toast[data-tone="success"] { border-left-color: var(--ud-up); }
.ud-toast[data-tone="warn"] { border-left-color: var(--ud-amber); }
.ud-toast[data-tone="error"] { border-left-color: var(--ud-down); }
.ud-toast[data-tone="info"] { border-left-color: var(--ud-accent); }
.ud-toast__close {
  margin-left: auto;
  border: 0;
  background: transparent;
  color: var(--ud-muted);
  cursor: pointer;
}

.ud-status-band {
  display: flex;
  align-items: center;
  gap: var(--ud-gap-sm);
  padding: var(--ud-gap-xs) var(--ud-gap-sm);
  background: var(--ud-down-soft);
  border-bottom: 1px solid var(--ud-down);
  color: var(--ud-text);
  font-size: var(--ud-font-size-caption);
}

/* Overlays ---------------------------------------------------------------- */
.ud-dialog {
  position: fixed;
  inset: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  background: rgb(0 0 0 / .45);
  z-index: 1100;
}
.ud-dialog__panel {
  min-width: 320px;
  max-width: 640px;
  max-height: 80vh;
  display: flex;
  flex-direction: column;
  background: var(--ud-surface);
  border: 1px solid var(--ud-line2);
  border-radius: var(--ud-radius-window);
  box-shadow: 0 24px 60px rgb(0 0 0 / .55);
}
.ud-dialog__header {
  display: flex;
  align-items: center;
  gap: var(--ud-gap-sm);
  height: var(--ud-h-windowHead);
  padding: 0 var(--ud-gap-md);
  background: var(--ud-surface2);
  border-bottom: 1px solid var(--ud-line);
  border-radius: var(--ud-radius-window) var(--ud-radius-window) 0 0;
}
.ud-dialog__body {
  padding: var(--ud-gap-md);
  overflow: auto;
}
.ud-dialog__footer {
  display: flex;
  justify-content: flex-end;
  gap: var(--ud-gap-sm);
  padding: var(--ud-gap-sm) var(--ud-gap-md);
  border-top: 1px solid var(--ud-line);
}

.ud-menu {
  min-width: 180px;
  padding: var(--ud-gap-xs);
  background: var(--ud-surface2);
  border: 1px solid var(--ud-line2);
  border-radius: var(--ud-radius-md);
  box-shadow: 0 18px 44px rgb(0 0 0 / .45);
}
.ud-menu__item {
  display: flex;
  align-items: center;
  gap: var(--ud-gap-sm);
  height: var(--ud-h-row);
  padding: 0 var(--ud-gap-sm);
  border-radius: var(--ud-radius-sm);
  color: var(--ud-text2);
  cursor: pointer;
}
.ud-menu__item:hover,
.ud-menu__item[data-active="true"] {
  background: var(--ud-surface3);
}
.ud-menu__item[data-disabled="true"] {
  color: var(--ud-muted);
  cursor: not-allowed;
}

.ud-tooltip {
  position: relative;
  display: inline-flex;
}
.ud-tooltip__bubble {
  position: absolute;
  left: 50%;
  transform: translateX(-50%);
  bottom: calc(100% + 6px);
  padding: 2px var(--ud-gap-xs);
  background: var(--ud-surface2);
  border: 1px solid var(--ud-line2);
  border-radius: var(--ud-radius-sm);
  color: var(--ud-text2);
  font-size: var(--ud-font-size-caption);
  white-space: nowrap;
  z-index: 1200;
}

.ud-palette {
  width: 480px;
  max-width: 90vw;
  background: var(--ud-surface);
  border: 1px solid var(--ud-line2);
  border-radius: var(--ud-radius-window);
  box-shadow: 0 24px 60px rgb(0 0 0 / .55);
  overflow: hidden;
}
.ud-palette__input {
  width: 100%;
  height: var(--ud-h-tabbar);
  padding: 0 var(--ud-gap-md);
  border: 0;
  border-bottom: 1px solid var(--ud-line);
  background: var(--ud-surface2);
  color: var(--ud-text);
  font-family: inherit;
  font-size: var(--ud-font-size-lg);
}
.ud-palette__item {
  display: flex;
  align-items: center;
  gap: var(--ud-gap-sm);
  height: var(--ud-h-section);
  padding: 0 var(--ud-gap-md);
  cursor: pointer;
}
.ud-palette__item[data-active="true"] {
  background: var(--ud-accent-soft);
}

/* Shell: menubar ---------------------------------------------------------- */
.ud-menubar {
  position: relative;
  display: flex;
  align-items: center;
  gap: var(--ud-gap-xs);
  height: var(--ud-h-menubar);
  padding: 0 10px;
  background: linear-gradient(90deg, var(--ud-surface), var(--ud-surface2) 55%, var(--ud-surface));
  border-bottom: 1px solid var(--ud-line);
  z-index: 400;
}
.ud-menubar__logo {
  width: 26px;
  height: 26px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  background: linear-gradient(135deg, var(--ud-accent), var(--ud-accent2));
  color: var(--ud-bg);
  border-radius: var(--ud-radius-chip);
  font-weight: 800;
  font-size: 13px;
  cursor: pointer;
}
.ud-menubar__item {
  height: 30px;
  padding: 0 11px;
  border: 0;
  border-radius: var(--ud-radius-chip);
  background: transparent;
  color: var(--ud-text2);
  font-family: inherit;
  font-size: 12.5px;
  cursor: pointer;
  white-space: nowrap;
}
.ud-menubar__item:hover {
  background: var(--ud-surface2);
  color: var(--ud-text);
}
.ud-menubar__item[data-active="true"] {
  background: var(--ud-surface2);
  color: var(--ud-text);
}
.ud-menubar__search {
  width: 230px;
  height: 30px;
  border-radius: var(--ud-radius-popover);
}
.ud-menubar__spacer {
  flex: 1;
}

/* Shell: tabs ------------------------------------------------------------- */
.ud-tabs {
  display: flex;
  align-items: flex-end;
  gap: 4px;
  height: var(--ud-h-tabbar);
  padding: 0 10px;
  background: var(--ud-surface);
  border-bottom: 1px solid var(--ud-line);
}
.ud-tab {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  height: 26px;
  padding: 0 8px 0 11px;
  border: 1px solid var(--ud-line2);
  border-bottom: 0;
  border-radius: var(--ud-radius-chip) var(--ud-radius-chip) 0 0;
  background: var(--ud-surface3);
  color: var(--ud-muted);
  font-family: inherit;
  font-size: 11px;
  cursor: pointer;
  white-space: nowrap;
  max-width: 180px;
}
.ud-tab--active {
  background: linear-gradient(180deg, var(--ud-surface2), var(--ud-surface));
  color: var(--ud-text);
  border-color: var(--ud-th-bg);
  font-weight: 600;
}
.ud-tab__close {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 15px;
  height: 15px;
  min-width: 15px;
  border: 0;
  border-radius: var(--ud-radius-sm);
  background: transparent;
  color: var(--ud-muted2);
  font-size: 10px;
  cursor: pointer;
}
.ud-tab__close:hover {
  background: var(--ud-down-soft);
  color: var(--ud-down);
}
.ud-tab__insert {
  width: 2px;
  background: var(--ud-accent);
}

/* Shell: window ----------------------------------------------------------- */
@keyframes ud-fade-up {
  from { opacity: 0; transform: translateY(10px); }
  to { opacity: 1; transform: none; }
}
@keyframes ud-pulse {
  0%, 100% { opacity: 1; }
  50% { opacity: .35; }
}
.ud-window {
  position: absolute;
  display: flex;
  flex-direction: column;
  min-width: 300px;
  min-height: 140px;
  background: var(--ud-surface);
  border: 1px solid var(--ud-line2);
  border-radius: var(--ud-radius-window);
  box-shadow: 0 14px 34px rgb(0 0 0 / .4);
  overflow: hidden;
  animation: ud-fade-up .3s ease both;
}
/* Canon: the window edge is NOT highlighted - focus reads from the head gradient and a deeper
   shadow, the border stays the same neutral --ud-line2 as for the other windows. */
.ud-window--active {
  box-shadow: 0 18px 44px rgb(0 0 0 / .5);
}
.ud-window--active > .ud-window__head {
  background: linear-gradient(90deg, var(--ud-accent-soft), var(--ud-surface2) 40%, var(--ud-surface2));
}
.ud-window__head {
  display: flex;
  align-items: center;
  gap: var(--ud-gap-sm);
  min-height: var(--ud-h-windowHead);
  padding: 7px 10px;
  background: linear-gradient(90deg, var(--ud-surface2), var(--ud-surface3) 60%, var(--ud-surface2));
  border-bottom: 1px solid var(--ud-line);
  cursor: grab;
}
.ud-window__code {
  padding: 2px 8px;
  background: var(--ud-accent-soft);
  color: var(--ud-code);
  border-radius: var(--ud-radius-code);
  font-family: var(--ud-font-mono);
  font-size: 10px;
}
.ud-window__title {
  font-size: 12px; /* canon .ud-win-title: 12px, uppercase, tracking .4 */
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.4px;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.ud-window__live {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  color: var(--ud-up);
  font-size: 9.5px;
}
.ud-window__live::before {
  content: "";
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: var(--ud-up);
  animation: ud-pulse 2.2s infinite;
}
.ud-window__link {
  padding: 1px 7px;
  border: 1px solid var(--ud-line);
  border-radius: var(--ud-radius-code);
  background: var(--ud-surface);
  font-family: var(--ud-font-mono);
  font-size: 9px;
  color: var(--ud-text2);
}
.ud-window__link[data-active="true"] {
  border-color: var(--ud-accent);
  background: var(--ud-accent-soft);
  color: var(--ud-code);
}
.ud-window__buttons {
  display: flex;
  gap: var(--ud-gap-xs);
  margin-left: auto;
}
/* Canon .ud-win-b: 22px square, second-level frame, muted ink, accent hover. */
.ud-window__buttons button {
  width: 22px;
  height: 22px;
  min-width: 22px;
  padding: 0;
  border: 1px solid var(--ud-line2);
  border-radius: var(--ud-radius-control);
  background: var(--ud-surface);
  color: var(--ud-muted);
  font-size: 10px;
}
.ud-window__buttons button:hover {
  border-color: var(--ud-accent);
  color: var(--ud-text);
}
.ud-window__close {
  width: 22px;
  height: 22px;
  border-radius: 50%;
}
.ud-window__close:hover {
  background: var(--ud-down-soft);
  color: var(--ud-down);
  transform: scale(1.1);
}
.ud-window__body {
  flex: 1;
  min-height: 0;
  padding: var(--ud-gap-md);
  overflow: auto;
}

/* Window action bar and action button (canon .ud-act / .ud-a). */
.ud-act {
  display: flex;
  flex: 0 0 auto;
  flex-wrap: wrap;
  gap: 6px;
  padding: 7px 9px;
  border-bottom: 1px solid var(--ud-line);
}
/* Canon .ud-obtn: 28px tall, second-level frame, surface2 fill, 10px uppercase. */
.ud-a {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  height: 28px;
  padding: 0 11px;
  border: 1px solid var(--ud-line2);
  border-radius: var(--ud-radius-chip);
  background: var(--ud-surface2);
  color: var(--ud-text2);
  font-family: inherit;
  font-size: 10px;
  letter-spacing: 0.4px;
  text-transform: uppercase;
  cursor: pointer;
}
.ud-a:hover {
  border-color: var(--ud-accent);
  color: var(--ud-text);
}
/* Canon .ud-obtn.ud-obtn-p: accent gradient, no frame, inverse ink, soft glow. */
.ud-a[data-variant="primary"] {
  border-color: transparent;
  background: linear-gradient(135deg, var(--ud-accent), var(--ud-accent2));
  color: var(--ud-inv);
  font-weight: 600;
  box-shadow: 0 4px 12px var(--ud-accent-soft);
}
.ud-a[data-variant="primary"]:hover {
  color: var(--ud-inv);
  filter: brightness(1.07);
}

/* Window meta grid (canon .ud-meta-grid). */
.ud-meta-grid {
  display: grid;
  grid-template-columns: 96px 1fr;
  gap: 4px 12px;
  margin: 0;
  font-size: 11px;
}

/* Filter chips (canon .ud-fchip): a label column and a transparent control inside one chip. */
.ud-fchip {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  min-height: 28px;
  padding: 0 8px;
  border: 1px solid var(--ud-line2);
  border-radius: var(--ud-radius-control);
  background: var(--ud-surface3);
}
.ud-fchip__label {
  min-width: 96px;
  color: var(--ud-muted2);
  font-size: 10px;
  text-transform: uppercase;
  letter-spacing: 0.4px;
}
.ud-fchip .ud-input,
.ud-fchip .ud-select {
  height: 26px;
  border: 0;
  background: transparent;
  color: var(--ud-text);
  font-size: 11px;
}

/* Snap tiles (canon .ud-snapbar / .ud-snap-tile): 8 layout tiles, 72x54, mini layout preview. */
.ud-snapbar {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  padding: 8px;
  background: var(--ud-surface);
  border: 1px solid var(--ud-line);
  border-radius: var(--ud-radius-tile);
  box-shadow: 0 18px 44px rgb(0 0 0 / .5);
}
.ud-snap-tile {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 3px;
  width: 72px;
  height: 54px;
  padding: 0;
  border: 1px solid var(--ud-line);
  border-radius: var(--ud-radius-chip);
  background: var(--ud-surface);
  color: var(--ud-text2);
  cursor: pointer;
  user-select: none;
}
.ud-snap-tile:hover {
  border-color: var(--ud-accent);
  color: var(--ud-text);
}
.ud-snap-tile[data-hot="true"] {
  border-color: var(--ud-accent2);
  background: var(--ud-accent-soft);
  color: var(--ud-text);
}
.ud-snap-tile i {
  position: relative;
  display: block;
  width: 30px;
  height: 26px;
  border: 1px solid var(--ud-line);
  border-radius: 2px;
}
.ud-snap-tile i::after {
  content: "";
  position: absolute;
  border-radius: 1px;
  background: linear-gradient(135deg, var(--ud-accent), var(--ud-accent2));
}
.ud-snap-tile[data-layout="hl"] i::after { left: 3px; top: 2px; bottom: 2px; width: 12px; }
.ud-snap-tile[data-layout="hr"] i::after { right: 3px; top: 2px; bottom: 2px; width: 12px; }
.ud-snap-tile[data-layout="tl"] i::after { left: 3px; top: 2px; bottom: 2px; width: 8px; }
.ud-snap-tile[data-layout="tr"] i::after { right: 3px; top: 2px; bottom: 2px; width: 8px; }
.ud-snap-tile[data-layout="top"] i::after { left: 2px; right: 2px; top: 2px; height: 10px; }
.ud-snap-tile[data-layout="bot"] i::after { left: 2px; right: 2px; bottom: 2px; height: 10px; }
.ud-snap-tile[data-layout="max"] i::after { inset: 2px; }
.ud-snap-tile[data-layout="res"] i::after { inset: 7px 8px; opacity: 0.55; }
.ud-snap-tile em {
  font-style: normal;
  font-size: 8px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.4px;
  white-space: nowrap;
}

/* Corner extras (canon .ud-cblk-spark / .ud-cblk-alist). */
.ud-corner__spark {
  display: block;
  width: 100%;
  height: 30px;
  margin-top: 4px;
}
.ud-corner__alerts {
  display: flex;
  flex-direction: column;
  gap: 4px;
  max-height: 96px;
  margin: 4px 0 2px;
  overflow-y: auto;
}
.ud-corner__alert {
  display: flex;
  align-items: center;
  gap: 6px;
  padding: 4px 7px;
  border: 1px solid var(--ud-line2);
  border-left: 3px solid var(--ud-amber);
  border-radius: 7px;
  background: var(--ud-surface3);
  color: var(--ud-text2);
  font-size: 9.5px;
}
.ud-corner__alert i {
  margin-left: auto;
  font-family: var(--ud-font-mono);
  font-style: normal;
  font-size: 8.5px;
  color: var(--ud-muted2);
}

/* KPI cards (canon .ud-kpi / .ud-kcard). */
.ud-kpi {
  padding: 10px 12px;
  border-bottom: 1px solid var(--ud-line);
}
.ud-kcard-row {
  display: grid;
  grid-template-columns: repeat(5, minmax(0, 1fr));
  gap: 6px;
  margin: 0;
}
.ud-kcard {
  display: flex;
  flex-direction: column;
  gap: 2px;
  min-width: 0;
  padding: 6px 8px;
  border: 1px solid var(--ud-line);
  border-radius: var(--ud-radius-control);
  background: var(--ud-surface);
}
.ud-kcard span {
  color: var(--ud-muted2);
  font-size: 9px;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.4px;
}
.ud-kcard b {
  color: var(--ud-text);
  font-size: 16px;
  font-weight: 700;
  font-variant-numeric: tabular-nums;
  /* A metric is one number: it never wraps mid-value, it shrinks or ellipsises instead. */
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.ud-kbar {
  display: block;
  min-width: 8px;
  height: 4px;
  border-radius: 2px;
  background: linear-gradient(90deg, var(--ud-accent), var(--ud-accent2));
}
.ud-window__footer {
  display: flex;
  align-items: center;
  gap: var(--ud-gap-sm);
  height: var(--ud-h-windowFooter);
  padding: 0 var(--ud-gap-sm);
  background: var(--ud-surface3);
  border-top: 1px solid var(--ud-line);
  color: var(--ud-muted);
  font-size: var(--ud-font-size-micro);
}
.ud-window__handle {
  position: absolute;
  z-index: 2;
}
.ud-window__handle[data-handle="n"] { top: 0; left: 16px; right: 16px; height: 8px; cursor: ns-resize; }
.ud-window__handle[data-handle="s"] { bottom: 0; left: 16px; right: 16px; height: 8px; cursor: ns-resize; }
.ud-window__handle[data-handle="e"] { right: 0; top: 16px; bottom: 16px; width: 8px; cursor: ew-resize; }
.ud-window__handle[data-handle="w"] { left: 0; top: 16px; bottom: 16px; width: 8px; cursor: ew-resize; }
.ud-window__handle[data-handle="ne"] { top: 0; right: 0; width: 16px; height: 16px; cursor: nesw-resize; }
.ud-window__handle[data-handle="nw"] { top: 0; left: 0; width: 16px; height: 16px; cursor: nwse-resize; }
.ud-window__handle[data-handle="se"] { bottom: 0; right: 0; width: 16px; height: 16px; cursor: nwse-resize; }
.ud-window__handle[data-handle="sw"] { bottom: 0; left: 0; width: 16px; height: 16px; cursor: nesw-resize; }
/* Canon: resize feedback is a neutral inset line and the direction cursor - no accent on the edge. */
.ud-window__handle:hover {
  box-shadow: inset 0 0 0 1px var(--ud-line2);
}

/* Shell: status bar / dock / corner -------------------------------------- */
.ud-statusbar {
  display: flex;
  align-items: center;
  gap: var(--ud-gap-md);
  height: var(--ud-h-statusbar);
  padding: 0 var(--ud-gap-md);
  background: var(--ud-surface);
  border-top: 1px solid var(--ud-line);
  color: var(--ud-muted);
  font-size: 10.5px;
}
.ud-statusbar__item {
  display: inline-flex;
  align-items: center;
  gap: var(--ud-gap-xs);
}
.ud-status-dot {
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: var(--ud-up);
}

/* Dock rail (canon: 212px rail, group captions, mono counters, single-line titles). */
.ud-dock {
  width: 212px;
  flex: 0 0 auto;
  background: var(--ud-surface);
  border-right: 1px solid var(--ud-line);
  overflow: auto;
}
.ud-dock__group {
  display: flex;
  align-items: center;
  gap: 6px;
  padding: 8px 10px 4px;
  color: var(--ud-muted2);
  font-size: 9px;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.6px;
}
.ud-dock__item {
  display: flex;
  align-items: center;
  gap: var(--ud-gap-sm);
  width: 100%;
  height: 24px;
  padding: 0 10px;
  border: 0;
  background: transparent;
  color: var(--ud-text2);
  font-family: inherit;
  font-size: 12px;
  cursor: pointer;
  text-align: left;
  min-width: 0;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.ud-dock__item:hover {
  background: var(--ud-row-hover);
  color: var(--ud-text);
}
.ud-dock__code {
  flex: 0 0 auto;
  font-family: var(--ud-font-mono);
  font-size: 8.5px;
  color: var(--ud-muted2);
}

/* Taskbar strip (canon: 34px bar, 24px mono chips, 1px gap). */
.ud-windowstrip {
  display: flex;
  align-items: center;
  gap: 1px;
  height: var(--ud-h-taskbar);
  padding: 0 10px;
  border-bottom: 1px solid var(--ud-line);
  background: var(--ud-surface);
  overflow-x: auto;
}
.ud-taskbar-btn {
  flex: 0 0 auto;
  max-width: 220px;
  height: 27px; /* canon .ud-tile-btn: 27px */
  padding: 0 10px;
  border: 1px solid var(--ud-line);
  border-radius: 7px;
  background: var(--ud-surface);
  color: var(--ud-text2);
  font-family: var(--ud-font-mono);
  font-size: 10px;
  line-height: normal;
  cursor: pointer;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.ud-taskbar-btn:hover {
  border-color: var(--ud-accent2);
  color: var(--ud-text);
}
.ud-taskbar-btn[data-active="true"] {
  border-color: var(--ud-accent);
  color: var(--ud-text);
}

/* Corner blocks (canon .ud-cblk: gradient card, 12px radius, big value). */
.ud-corner {
  display: flex;
  flex-direction: column;
  gap: var(--ud-gap-sm);
  width: 228px;
  flex: 0 0 auto;
  padding: var(--ud-gap-sm);
  background: var(--ud-surface2);
  border-left: 1px solid var(--ud-line);
}
.ud-corner__card {
  padding: 9px 11px;
  background: linear-gradient(160deg, var(--ud-surface), var(--ud-surface3));
  border: 1px solid var(--ud-line2);
  border-radius: var(--ud-radius-card);
  box-shadow: 0 10px 26px rgb(0 0 0 / .3);
}
.ud-corner__card .ud-dock__group {
  padding: 0 0 5px;
}
.ud-corner__card .ud-kv__value {
  font-size: 19px;
  font-weight: 700;
  font-variant-numeric: tabular-nums;
  letter-spacing: -0.3px;
  color: var(--ud-text);
}

/* Widget atoms ------------------------------------------------------------ */
.ud-kv {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: var(--ud-gap-sm);
  min-height: var(--ud-h-row);
}
.ud-kv__label {
  color: var(--ud-muted);
  font-size: var(--ud-font-size-caption);
}
.ud-kv__value {
  font-family: var(--ud-font-mono);
  font-variant-numeric: tabular-nums;
}

.ud-stat {
  display: flex;
  flex-direction: column;
  gap: 2px;
}
.ud-stat__value {
  font-size: var(--ud-font-size-large);
  font-weight: 600;
  font-variant-numeric: tabular-nums;
}
.ud-stat__label {
  color: var(--ud-muted);
  font-size: var(--ud-font-size-micro);
  text-transform: uppercase;
}

.ud-book {
  font-family: var(--ud-font-mono);
  font-variant-numeric: tabular-nums;
}
.ud-book__head {
  display: flex;
  justify-content: space-between;
  font-size: var(--ud-font-size-micro);
  text-transform: uppercase;
  letter-spacing: 0.5px;
}
.ud-book__head [data-side="bid"] { color: var(--ud-up); }
.ud-book__head [data-side="ask"] { color: var(--ud-down); }
.ud-book__best {
  display: grid;
  grid-template-columns: 1fr auto 1fr;
  align-items: center;
  height: 24px;
  font-size: var(--ud-font-size-large);
}
.ud-book__best [data-side="bid"] { color: var(--ud-up); }
.ud-book__best [data-side="ask"] { color: var(--ud-down); text-align: right; }
.ud-book__row {
  position: relative;
  display: grid;
  grid-template-columns: 1fr 1fr 1fr;
  align-items: center;
  height: var(--ud-h-bookRow);
  font-size: var(--ud-font-size-caption);
  cursor: pointer;
}
.ud-book__row:hover {
  background: var(--ud-row-hover);
}
.ud-book__row--ask [data-col="price"] { color: var(--ud-down); }
.ud-book__row--bid [data-col="price"] { color: var(--ud-up); }

.ud-tape {
  font-family: var(--ud-font-mono);
  font-variant-numeric: tabular-nums;
  font-size: var(--ud-font-size-caption);
}
.ud-tape__row {
  display: grid;
  grid-template-columns: 64px 40px 1fr auto;
  align-items: center;
  height: var(--ud-h-rowDense);
  gap: var(--ud-gap-xs);
}
.ud-tape__row[data-side="buy"] [data-col="price"] { color: var(--ud-up); }
.ud-tape__row[data-side="sell"] [data-col="price"] { color: var(--ud-down); }

.ud-link-chip {
  display: inline-flex;
  align-items: center;
  height: var(--ud-h-badge);
  padding: 0 var(--ud-gap-xs);
  border: 1px solid var(--ud-line2);
  border-radius: var(--ud-radius-sm);
  font-family: var(--ud-font-mono);
  font-size: var(--ud-font-size-micro);
  color: var(--ud-muted2);
}
.ud-link-chip[data-active="true"] {
  border-color: var(--ud-accent);
  color: var(--ud-accent2);
}

.ud-flag {
  color: var(--ud-mock);
  font-size: var(--ud-font-size-micro);
}

/* Card and widget card (TASK-2-019) ---------------------------------------- */
.ud-card {
  display: flex;
  flex-direction: column;
  background: var(--ud-surface);
  border: 1px solid var(--ud-line2);
  border-radius: var(--ud-radius-md);
  overflow: hidden;
}
.ud-card[data-variant="raised"] {
  background: var(--ud-surface2);
  border-color: var(--ud-line3);
}
.ud-card__head,
.ud-card__foot {
  display: flex;
  align-items: center;
  gap: var(--ud-gap-sm);
  padding: var(--ud-gap-sm);
}
.ud-card__head {
  border-bottom: 1px solid var(--ud-line2);
}
.ud-card__foot {
  border-top: 1px solid var(--ud-line2);
}
.ud-card__body {
  padding: var(--ud-gap-sm) var(--ud-gap-sm);
}
.ud-widget-card {
  display: flex;
  flex-direction: column;
  gap: var(--ud-gap-xs);
  min-width: 0;
}
.ud-widget-card > .ud-card__head .ud-widget-card__code {
  font-family: var(--ud-font-mono);
  font-size: var(--ud-font-size-micro);
  color: var(--ud-muted2);
}

/* Number input and slider (TASK-2-016) ------------------------------------ */
.ud-number {
  text-align: right;
  font-variant-numeric: tabular-nums;
}
.ud-slider {
  width: 100%;
  accent-color: var(--ud-accent);
}

/* Time picker (TASK-2-014) ------------------------------------------------ */
.ud-time {
  font-variant-numeric: tabular-nums;
}

/* File input (TASK-2-015) ------------------------------------------------ */
.ud-file {
  display: flex;
  flex-direction: column;
}
.ud-file__drop {
  display: flex;
  align-items: center;
  justify-content: center;
  min-height: calc(var(--ud-h-field) * 2);
  padding: var(--ud-gap-sm);
  border: 1px dashed var(--ud-line3);
  border-radius: var(--ud-radius-md);
  color: var(--ud-muted2);
  cursor: pointer;
}
.ud-file__drop[data-active="true"] {
  border-color: var(--ud-accent);
  color: var(--ud-text2);
}
.ud-file__list {
  display: flex;
  flex-direction: column;
  gap: var(--ud-gap-xs);
  margin-top: var(--ud-gap-xs);
  padding: 0;
  list-style: none;
}
.ud-file__item {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--ud-gap-sm);
  font-size: var(--ud-font-size-caption);
}
.ud-file__remove {
  border: none;
  background: transparent;
  color: var(--ud-muted2);
  cursor: pointer;
}

/* Combobox (TASK-2-012) --------------------------------------------------- */
.ud-combobox {
  position: relative;
  display: flex;
  flex-direction: column;
}
.ud-combobox__input {
  width: 100%;
}
.ud-combobox__list {
  position: absolute;
  top: 100%;
  left: 0;
  right: 0;
  z-index: 20;
  max-height: 300px;
  overflow: auto;
  margin: 0;
  padding: 0;
  list-style: none;
  background: var(--ud-surface2);
  border: 1px solid var(--ud-line3);
  border-radius: var(--ud-radius-md);
}
.ud-combobox__option {
  display: flex;
  align-items: center;
  gap: var(--ud-gap-sm);
  height: var(--ud-h-rowDense);
  padding: 0 var(--ud-gap-sm);
  cursor: pointer;
}
.ud-combobox__option[data-active="true"] {
  background: var(--ud-row-hover);
}
.ud-combobox__option[data-disabled="true"] {
  color: var(--ud-muted);
  cursor: not-allowed;
}
.ud-combobox__empty {
  padding: var(--ud-gap-sm);
  color: var(--ud-muted2);
}

/* Date picker (TASK-2-013) ------------------------------------------------ */
.ud-date {
  position: relative;
  display: flex;
  flex-direction: column;
}
.ud-date__grid {
  position: absolute;
  top: 100%;
  left: 0;
  z-index: 20;
  min-width: 220px;
  padding: var(--ud-gap-xs);
  background: var(--ud-surface2);
  border: 1px solid var(--ud-line3);
  border-radius: var(--ud-radius-md);
}
.ud-date__head {
  display: flex;
  align-items: center;
  gap: var(--ud-gap-sm);
  padding: var(--ud-gap-xs) var(--ud-gap-sm);
}
.ud-date__nav {
  border: none;
  background: transparent;
  color: var(--ud-muted2);
  cursor: pointer;
}
.ud-date__grid table {
  border-collapse: collapse;
}
.ud-date__day {
  width: 28px;
  height: 24px;
  border: none;
  background: transparent;
  color: var(--ud-text2);
  font: inherit;
  cursor: pointer;
  border-radius: var(--ud-radius-sm);
}
.ud-date__day:hover:not(:disabled) {
  background: var(--ud-row-hover);
}
.ud-date__day[aria-current="date"] {
  border: 1px solid var(--ud-accent);
}
.ud-date__day:disabled {
  color: var(--ud-muted);
  cursor: not-allowed;
}

/* Display (TASK-2-020/021/024/025) --------------------------------------- */
.ud-avatar {
  position: relative;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: var(--ud-h-field);
  height: var(--ud-h-field);
  border-radius: 50%;
  background: var(--ud-surface2);
  color: var(--ud-text2);
  font-size: var(--ud-font-size-caption);
}
.ud-avatar[data-size="sm"] { width: 20px; height: 20px; font-size: var(--ud-font-size-micro); }
.ud-avatar[data-size="lg"] { width: calc(var(--ud-h-field) * 1.5); height: calc(var(--ud-h-field) * 1.5); }
.ud-avatar__img { width: 100%; height: 100%; border-radius: 50%; object-fit: cover; }
.ud-avatar__status {
  position: absolute;
  right: 0;
  bottom: 0;
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: var(--ud-muted);
}
.ud-avatar__status[data-status="online"] { background: var(--ud-up); }
.ud-avatar__status[data-status="away"] { background: var(--ud-amber); }

.ud-breadcrumb {
  display: flex;
  align-items: center;
  gap: var(--ud-gap-xs);
  font-size: var(--ud-font-size-caption);
  color: var(--ud-muted2);
}
.ud-breadcrumb__item { color: inherit; }
.ud-breadcrumb__item[aria-current="page"] { color: var(--ud-text); }

.ud-tag {
  display: inline-flex;
  align-items: center;
  gap: var(--ud-gap-xs);
  height: var(--ud-h-badge);
  padding: 0 var(--ud-gap-xs);
  border: 1px solid var(--ud-line2);
  border-radius: var(--ud-radius-sm);
  background: var(--ud-surface2);
  font-size: var(--ud-font-size-micro);
}
.ud-tag[data-tone="accent"] { border-color: var(--ud-accent); color: var(--ud-accent2); }
.ud-tag[data-tone="up"] { color: var(--ud-up); }
.ud-tag[data-tone="down"] { color: var(--ud-down); }
.ud-tag__remove { border: none; background: transparent; color: var(--ud-muted2); cursor: pointer; }

.ud-spinner {
  display: inline-block;
  width: 16px;
  height: 16px;
  border: 2px solid var(--ud-line3);
  border-top-color: var(--ud-accent);
  border-radius: 50%;
  animation: ud-spin 0.8s linear infinite;
}
.ud-spinner[data-size="sm"] { width: 12px; height: 12px; }
.ud-spinner[data-size="lg"] { width: 24px; height: 24px; }
@keyframes ud-spin { to { transform: rotate(360deg); } }

.ud-link-btn {
  border: none;
  background: transparent;
  color: var(--ud-accent2);
  font: inherit;
  padding: 0;
  cursor: pointer;
}
.ud-link-btn:disabled { color: var(--ud-muted); cursor: not-allowed; }

.ud-sr-only {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0 0 0 0);
  white-space: nowrap;
  border: 0;
}
.ud-skiplink {
  position: absolute;
  left: var(--ud-gap-sm);
  top: -100%;
  z-index: 100;
  padding: var(--ud-gap-xs) var(--ud-gap-sm);
  background: var(--ud-surface2);
  color: var(--ud-text);
  border: 1px solid var(--ud-accent);
  border-radius: var(--ud-radius-sm);
}
.ud-skiplink:focus { top: var(--ud-gap-sm); }

.ud-status-badge {
  display: inline-flex;
  align-items: center;
  gap: var(--ud-gap-xs);
  height: var(--ud-h-badge);
  padding: 0 var(--ud-gap-xs);
  border-radius: var(--ud-radius-sm);
  background: var(--ud-surface2);
  font-size: var(--ud-font-size-micro);
}
.ud-status-badge[data-tone="ok"] { color: var(--ud-up); }
.ud-status-badge[data-tone="warn"] { color: var(--ud-amber); }
.ud-status-badge[data-tone="error"] { color: var(--ud-down); }

.ud-ctabs { display: flex; flex-direction: column; }
.ud-ctab {
  border: none;
  background: transparent;
  color: var(--ud-muted2);
  font: inherit;
  padding: var(--ud-gap-xs) var(--ud-gap-sm);
  cursor: pointer;
  border-bottom: 2px solid transparent;
}
.ud-ctab[aria-selected="true"] { color: var(--ud-text); border-bottom-color: var(--ud-accent); }
.ud-ctab-panel { padding: var(--ud-gap-sm) 0; }

.ud-error {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: var(--ud-gap-xs);
  padding: var(--ud-gap-sm);
  color: var(--ud-down);
}
.ud-skeleton-table,
.ud-skeleton-widget { display: flex; flex-direction: column; gap: var(--ud-gap-xs); }
.ud-skeleton-table .ud-skeleton,
.ud-skeleton-widget .ud-skeleton { height: var(--ud-h-rowDense); }

/* Overlays (TASK-2-022/023) --------------------------------------------- */
.ud-sheet {
  position: fixed;
  inset: 0;
  z-index: 1100;
  display: flex;
  background: rgb(0 0 0 / .45);
}
.ud-sheet[data-side="right"] { justify-content: flex-end; }
.ud-sheet__panel {
  width: min(420px, 100%);
  height: 100%;
  padding: var(--ud-gap-sm);
  overflow: auto;
  background: var(--ud-surface);
  border-left: 1px solid var(--ud-line2);
}

.ud-accordion { display: flex; flex-direction: column; }
.ud-accordion__trigger {
  display: flex;
  align-items: center;
  gap: var(--ud-gap-sm);
  width: 100%;
  border: none;
  background: transparent;
  color: var(--ud-text);
  font: inherit;
  text-align: left;
  padding: var(--ud-gap-xs) 0;
  cursor: pointer;
}
.ud-accordion__panel { padding: 0 0 var(--ud-gap-sm); color: var(--ud-text2); }

.ud-collapse { border-top: 1px solid var(--ud-line2); }
.ud-collapse__trigger {
  display: flex;
  align-items: center;
  justify-content: space-between;
  width: 100%;
  border: none;
  background: transparent;
  color: var(--ud-text);
  font: inherit;
  padding: var(--ud-gap-xs) 0;
  cursor: pointer;
}

.ud-confirm { display: flex; flex-direction: column; gap: var(--ud-gap-sm); padding: var(--ud-gap-sm); }
.ud-confirm[data-tone="danger"] { border-left: 3px solid var(--ud-down); }

.ud-context-menu {
  position: fixed;
  z-index: 1200;
  min-width: 160px;
  padding: var(--ud-gap-xs);
  background: var(--ud-surface2);
  border: 1px solid var(--ud-line3);
  border-radius: var(--ud-radius-md);
}

/* Chart widget (TASK-2-034) --------------------------------------------- */
.ud-chart {
  position: relative;
  display: block;
  width: 100%;
  background: var(--ud-surface2);
  border: 1px solid var(--ud-line2);
  border-radius: var(--ud-radius-sm);
  overflow: hidden;
}
.ud-chart__fallback {
  display: flex;
  align-items: center;
  justify-content: center;
  min-height: calc(var(--ud-h-field) * 4);
  color: var(--ud-muted2);
  font-size: var(--ud-font-size-caption);
}
.ud-chart-grid {
  display: grid;
  gap: var(--ud-gap-sm);
}
.ud-chart-grid__cell {
  min-width: 0;
}

/* Panel cells (TASK-3-010) ---------------------------------------------- */
.ud-table__row td [data-tone="up"] {
  color: var(--ud-up);
}
.ud-table__row td [data-tone="down"] {
  color: var(--ud-down);
}
.ud-kv[data-tone="up"] .ud-kv__value {
  color: var(--ud-up);
}
.ud-kv[data-tone="down"] .ud-kv__value {
  color: var(--ud-down);
}

/* Dock header (canon `.ud-dock-cap`): accent caption over a rule, then the groups. */
.ud-dock__cap {
  display: flex;
  align-items: center;
  gap: 7px;
  padding: 4px 8px 8px;
  margin-bottom: 4px;
  border-bottom: 1px solid var(--ud-line);
  color: var(--ud-accent);
  font-size: 10px;
  font-weight: 700;
}
.ud-dock__logo {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 18px;
  height: 18px;
  border-radius: var(--ud-radius-code);
  background: linear-gradient(135deg, var(--ud-accent), var(--ud-accent2));
  color: var(--ud-inv);
  font-size: 11px;
  font-weight: 700;
}

/* Menubar controls (canon `.ud-btl`): 28px tall, min-width 34, frame of the second level. */
.ud-menubar .ud-chip,
.ud-lang__btn {
  height: 28px;
  min-width: 34px;
  padding: 0 8px;
  border-radius: var(--ud-radius-chip);
  font-size: 10px;
}

/* Menubar search (canon `.ud-gq`): 230x30, radius 9, surface3 fill, 12px. */
.ud-menubar__search input {
  height: 30px;
  width: 230px;
  flex: none;
  padding: 0 10px;
  border: 1px solid var(--ud-line2);
  border-radius: 9px;
  background: var(--ud-surface3);
  font-size: 12px;
}

/* Language dropdown (canon `.ud-lang`): the active code on the chip, the endonyms in a popover. */
.ud-lang {
  position: relative;
  display: inline-flex;
}
.ud-lang__btn {
  font-weight: 600;
  letter-spacing: 0.3px;
  min-width: 52px;
  justify-content: center;
}
.ud-lang__pop {
  position: absolute;
  top: calc(100% + 4px);
  right: 0;
  z-index: 45;
  min-width: 190px;
  padding: 4px;
  background: var(--ud-surface);
  border: 1px solid var(--ud-line2);
  border-radius: var(--ud-radius-popover);
  box-shadow: 0 18px 44px rgb(0 0 0 / 0.5);
}
.ud-lang__pop .ud-menu {
  min-width: 0;
  border: 0;
  background: transparent;
  box-shadow: none;
  padding: 0;
}
.ud-lang__current {
  font-family: var(--ud-font-mono);
  font-size: var(--ud-font-size-micro);
  color: var(--ud-muted2);
}

/* Window family (TASK-7-003): tiling grid, snap rail, sticky rail menu, service windows. */
.ud-layout-grid {
  position: relative;
  width: 100%;
  height: 100%;
}
/* A cell is an absolutely positioned slot: the render function gets its rectangle and places the
   window itself, so no rule has to fight the inline geometry of the window. */
.ud-layout-cell {
  position: absolute;
}

.ud-snap-rail {
  position: absolute;
  inset: 0;
  pointer-events: none;
  z-index: 30;
}
.ud-snap-zone {
  position: absolute;
  pointer-events: auto;
  padding: 0;
  border: 1px dashed var(--ud-line2);
  border-radius: var(--ud-radius-chip);
  background: color-mix(in srgb, var(--ud-accent) 12%, transparent);
  cursor: pointer;
}
.ud-snap-zone:hover,
.ud-snap-zone[data-active="true"] {
  border-color: var(--ud-accent);
  background: color-mix(in srgb, var(--ud-accent) 24%, transparent);
}

.ud-sticky-menu {
  display: flex;
  flex-direction: column;
  gap: 3px;
  padding: 6px;
  height: 100%;
  background: var(--ud-surface2);
  border-right: 1px solid var(--ud-line);
}
.ud-sticky-menu[data-edge="R"] {
  border-right: 0;
  border-left: 1px solid var(--ud-line);
}
.ud-sticky-item {
  display: flex;
  align-items: center;
  gap: 7px;
  height: 26px;
  padding: 0 8px;
  border: 1px solid transparent;
  border-radius: var(--ud-radius-control);
  background: transparent;
  color: var(--ud-text2);
  font-family: inherit;
  font-size: 11px;
  text-align: left;
  cursor: pointer;
}
.ud-sticky-item:hover {
  border-color: var(--ud-line2);
  background: var(--ud-surface3);
  color: var(--ud-text);
}

.ud-denied,
.ud-source-off,
.ud-profile-win {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 8px;
  padding: 14px 16px;
}
.ud-denied {
  color: var(--ud-muted);
}
.ud-denied__title {
  color: var(--ud-text);
  font-size: 13px;
  font-weight: 600;
}
.ud-denied p {
  margin: 0;
  max-width: 72ch;
  color: var(--ud-muted2);
  font-size: 11px;
}
.ud-profile-win {
  gap: 6px;
}

.ud-row {
  display: flex;
  align-items: center;
  gap: var(--ud-gap-sm);
  flex-wrap: wrap;
}

/* Table tools (TASK-8-003): search field and pager of a long table. */
.ud-table-tools {
  display: flex;
  align-items: center;
  gap: var(--ud-gap-sm);
  flex-wrap: wrap;
  padding: 4px 0;
}
.ud-search {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  height: var(--ud-h-field);
  padding: 0 var(--ud-gap-xs) 0 var(--ud-gap-sm);
  border: 1px solid var(--ud-line2);
  border-radius: var(--ud-radius-control);
  background: var(--ud-surface3);
  color: var(--ud-muted);
  min-width: 0;
}
.ud-search:focus-within {
  border-color: var(--ud-accent);
  box-shadow: 0 0 0 var(--ud-focus-width) color-mix(in srgb, var(--ud-accent) 35%, transparent);
}
.ud-search__icon {
  flex: 0 0 auto;
  color: var(--ud-muted);
}
.ud-search__input {
  flex: 1 1 auto;
  min-width: 0;
  height: 100%;
  border: 0;
  background: transparent;
  color: var(--ud-text);
  font-family: inherit;
  font-size: var(--ud-font-size-body);
  outline: 0;
}
.ud-search__input::placeholder {
  color: var(--ud-muted2);
}
.ud-search__clear {
  flex: 0 0 auto;
  width: var(--ud-h-buttonSm);
  height: var(--ud-h-buttonSm);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border: 0;
  border-radius: var(--ud-radius-sm);
  background: transparent;
  color: var(--ud-muted);
  cursor: pointer;
}
.ud-search__clear:hover {
  background: var(--ud-surface2);
  color: var(--ud-text);
}
.ud-search__count {
  flex: 0 0 auto;
  font-family: var(--ud-font-mono);
  font-size: var(--ud-font-size-caption);
  color: var(--ud-muted);
  white-space: nowrap;
}
.ud-pager {
  display: flex;
  align-items: center;
  gap: var(--ud-gap-sm);
  flex-wrap: wrap;
  padding: 5px var(--ud-td-pad-x);
  border-top: 1px solid var(--ud-line);
  background: var(--ud-surface3);
  font-size: var(--ud-font-size-caption);
  color: var(--ud-muted);
}
.ud-pager__range {
  font-family: var(--ud-font-mono);
  white-space: nowrap;
}
.ud-pager__size {
  display: inline-flex;
  align-items: center;
  gap: 5px;
}
.ud-pagination__gap {
  display: inline-flex;
  align-items: center;
  padding: 0 2px;
  color: var(--ud-muted2);
}
.ud-table__empty {
  padding: var(--ud-gap-lg);
  text-align: center;
  color: var(--ud-muted);
}

/* Window data state (TASK-8-004): freshness, staleness and the LINK note live in the window head.
   A trader must see how old the numbers are without opening a menu, and the reason must be visible
   on hover - the numbers themselves are never replaced or hidden. */
.ud-window__fresh {
  font-family: var(--ud-font-mono);
  font-size: var(--ud-font-size-micro);
  color: var(--ud-muted);
  white-space: nowrap;
}
.ud-window__stale {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  height: var(--ud-h-badge);
  padding: 0 var(--ud-gap-sm);
  border: 1px solid color-mix(in srgb, var(--ud-amber) 50%, var(--ud-line2));
  border-radius: var(--ud-radius-code);
  background: color-mix(in srgb, var(--ud-amber) 10%, transparent);
  color: var(--ud-amber);
  font-size: var(--ud-font-size-micro);
  white-space: nowrap;
  cursor: help;
}
.ud-window__stale .ud-status-dot {
  background: var(--ud-amber);
}
.ud-window__link-note {
  color: var(--ud-muted2);
  font-size: var(--ud-font-size-micro);
  white-space: nowrap;
}

/* Closed windows (TASK-8-004): the list a host shows so a mis-click is never fatal. */
.ud-closed {
  display: flex;
  flex-direction: column;
  gap: var(--ud-gap-xs);
}
.ud-closed__item {
  display: flex;
  align-items: center;
  gap: var(--ud-gap-sm);
  padding: 3px 0;
  border-bottom: 1px solid var(--ud-line);
  font-size: var(--ud-font-size-caption);
}
.ud-closed__item:last-child {
  border-bottom: 0;
}

/* Order ticket and quote stats (TASK-8-005): the trader pieces the kit was missing next to the
   order book and the tape. The ticket is a controlled form; nothing here sends an order. */
.ud-ticket {
  display: flex;
  flex-direction: column;
  gap: var(--ud-gap-sm);
  padding: var(--ud-gap-md);
  background: var(--ud-surface);
  border: 1px solid var(--ud-line2);
  border-radius: var(--ud-radius-panel);
}
.ud-ticket__side {
  display: grid;
  grid-template-columns: 1fr 1fr;
}
.ud-ticket__side .ud-segment[data-tone="up"][aria-pressed="true"] {
  background: color-mix(in srgb, var(--ud-up) 22%, transparent);
  border-color: var(--ud-up);
  color: var(--ud-up);
}
.ud-ticket__side .ud-segment[data-tone="down"][aria-pressed="true"] {
  background: color-mix(in srgb, var(--ud-down) 22%, transparent);
  border-color: var(--ud-down);
  color: var(--ud-down);
}
.ud-ticket__row {
  display: grid;
  grid-template-columns: 96px minmax(0, 1fr) auto;
  align-items: center;
  gap: var(--ud-gap-sm);
}
.ud-ticket__control {
  min-width: 0;
}
.ud-ticket__summary {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: var(--ud-gap-sm);
  padding-top: var(--ud-gap-xs);
  border-top: 1px solid var(--ud-line);
  color: var(--ud-muted);
  font-size: var(--ud-font-size-caption);
}
.ud-ticket__reject {
  font-size: var(--ud-font-size-caption);
}
.ud-ticket__actions {
  display: flex;
  gap: var(--ud-gap-sm);
  justify-content: flex-end;
}
.ud-qstats {
  display: flex;
  flex-direction: column;
  gap: var(--ud-gap-xs);
}
.ud-qstats__title {
  margin: 0;
  color: var(--ud-muted);
  font-size: var(--ud-font-size-micro);
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.4px;
}
.ud-qstats__grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(120px, 1fr));
  gap: var(--ud-gap-xs) var(--ud-gap-md);
  margin: 0;
}
.ud-qstats__item {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: var(--ud-gap-sm);
  padding: 3px 0;
  border-bottom: 1px solid var(--ud-line);
  min-width: 0;
}
.ud-qstats__label {
  color: var(--ud-muted);
  font-size: var(--ud-font-size-micro);
  white-space: nowrap;
}
.ud-qstats__value {
  margin: 0;
  font-family: var(--ud-font-mono);
  font-size: var(--ud-font-size-body);
  color: var(--ud-text);
  white-space: nowrap;
}
.ud-qstats__value[data-tone="up"] {
  color: var(--ud-up);
}
.ud-qstats__value[data-tone="down"] {
  color: var(--ud-down);
}
.ud-qstats__value[data-tone="muted"] {
  color: var(--ud-muted);
}

/* Instrument header (TASK-8-005): symbol, name, last price and change on one line. */
.ud-quote-head {
  display: flex;
  align-items: baseline;
  gap: var(--ud-gap-md);
  flex-wrap: wrap;
  padding: var(--ud-gap-sm) 0;
  border-bottom: 1px solid var(--ud-line);
}
.ud-quote-head__symbol {
  font-size: var(--ud-font-size-sectionTitle);
  font-weight: 700;
  letter-spacing: -0.2px;
}
.ud-quote-head__name {
  color: var(--ud-muted);
  font-size: var(--ud-font-size-caption);
}
.ud-quote-head__price {
  margin-left: auto;
  font-family: var(--ud-font-mono);
  font-size: var(--ud-font-size-sectionTitle);
  font-weight: 600;
}
.ud-quote-head__change {
  font-family: var(--ud-font-mono);
  font-size: var(--ud-font-size-body);
}
.ud-quote-head__change[data-tone="up"] {
  color: var(--ud-up);
}
.ud-quote-head__change[data-tone="down"] {
  color: var(--ud-down);
}
.ud-watchlist {
  min-width: 0;
}

/* Notification tray and hotkey sheet (TASK-8-007): the prototype pieces, quiet by design. A level
   colours the dot and the left border only, so a screen full of events stays readable. */
.ud-tray {
  display: flex;
  flex-direction: column;
  width: min(420px, 100%);
  background: var(--ud-surface);
  border: 1px solid var(--ud-line2);
  border-radius: var(--ud-radius-popover);
  overflow: hidden;
}
.ud-tray__head {
  display: flex;
  align-items: center;
  gap: var(--ud-gap-sm);
  padding: var(--ud-gap-sm) var(--ud-gap-md);
  border-bottom: 1px solid var(--ud-line);
  background: var(--ud-surface2);
}
.ud-tray__title {
  font-size: var(--ud-font-size-panelTitle);
  font-weight: 600;
}
.ud-tray__count {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: var(--ud-h-badge);
  height: var(--ud-h-badge);
  padding: 0 5px;
  border-radius: var(--ud-radius-pill);
  background: var(--ud-accent-soft);
  color: var(--ud-accent2);
  font-family: var(--ud-font-mono);
  font-size: var(--ud-font-size-micro);
}
.ud-tray__list {
  display: flex;
  flex-direction: column;
  margin: 0;
  padding: 0;
  list-style: none;
  max-height: 320px;
  overflow-y: auto;
}
.ud-tray__item {
  display: flex;
  gap: var(--ud-gap-sm);
  padding: 9px var(--ud-gap-md);
  border-bottom: 1px solid var(--ud-line);
  border-left: 2px solid transparent;
}
.ud-tray__item:last-child {
  border-bottom: 0;
}
.ud-tray__item[data-level="warn"] {
  border-left-color: var(--ud-amber);
}
.ud-tray__item[data-level="error"] {
  border-left-color: var(--ud-down);
}
.ud-tray__item[data-level="ok"] {
  border-left-color: var(--ud-up);
}
.ud-tray__item[data-unread="true"] {
  background: var(--ud-surface2);
}
.ud-tray__dot {
  flex: 0 0 auto;
  width: 6px;
  height: 6px;
  margin-top: 5px;
  border-radius: 50%;
  background: var(--ud-muted2);
}
.ud-tray__item[data-level="warn"] .ud-tray__dot {
  background: var(--ud-amber);
}
.ud-tray__item[data-level="error"] .ud-tray__dot {
  background: var(--ud-down);
}
.ud-tray__item[data-level="ok"] .ud-tray__dot {
  background: var(--ud-up);
}
.ud-tray__body {
  display: flex;
  flex-direction: column;
  gap: 2px;
  min-width: 0;
}
.ud-tray__text {
  font-size: var(--ud-font-size-caption);
  color: var(--ud-text);
}
.ud-tray__meta {
  font-family: var(--ud-font-mono);
  font-size: var(--ud-font-size-micro);
  color: var(--ud-muted);
}
.ud-tray__empty {
  margin: 0;
  padding: var(--ud-gap-lg);
  text-align: center;
  color: var(--ud-muted);
  font-size: var(--ud-font-size-caption);
}
.ud-keys {
  display: flex;
  flex-direction: column;
  gap: var(--ud-gap-sm);
  width: min(560px, 100%);
  padding: var(--ud-gap-md);
  background: var(--ud-surface);
  border: 1px solid var(--ud-line2);
  border-radius: var(--ud-radius-popover);
}
.ud-keys__group {
  display: grid;
  gap: 4px;
}
.ud-keys__ghead {
  margin: 0;
  color: var(--ud-muted);
  font-size: var(--ud-font-size-micro);
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.4px;
}
.ud-keys__list {
  display: grid;
  gap: 2px;
  margin: 0;
}
.ud-keys__row {
  display: flex;
  align-items: baseline;
  gap: var(--ud-gap-sm);
  padding: 3px 0;
  border-bottom: 1px solid var(--ud-line);
}
.ud-keys__row dt {
  color: var(--ud-text2);
  font-size: var(--ud-font-size-caption);
}
.ud-keys__row dd {
  margin: 0 0 0 auto;
}
.ud-kbd {
  display: inline-flex;
  align-items: center;
  height: 18px;
  padding: 0 6px;
  border: 1px solid var(--ud-line2);
  border-bottom-width: 2px;
  border-radius: var(--ud-radius-code);
  background: var(--ud-surface2);
  color: var(--ud-text);
  font-family: var(--ud-font-mono);
  font-size: var(--ud-font-size-micro);
  white-space: nowrap;
}

/* Stat, balance and portfolio cards (TASK-5-050): metric cards of the portal dashboards. */
.ud-statcard {
  position: relative;
  display: flex;
  flex-direction: column;
  gap: 3px;
  padding: 8px 10px;
  border: 1px solid var(--ud-line);
  border-radius: var(--ud-radius-card);
  background: var(--ud-surface2);
  overflow: hidden;
}
.ud-statcard__label {
  display: flex;
  align-items: center;
  gap: 6px;
  color: var(--ud-muted2);
  font-size: 9.5px;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.5px;
}
.ud-statcard__value {
  color: var(--ud-text);
  font-family: var(--ud-font-mono);
  font-size: 18px;
  font-weight: 700;
}
.ud-statcard__hint,
.ud-statcard__foot {
  color: var(--ud-muted2);
  font-size: 9.5px;
}
.ud-statcard__bar {
  display: block;
  height: 3px;
  border-radius: 2px;
  background: linear-gradient(90deg, var(--ud-accent), var(--ud-accent2));
}
.ud-statcard__trend {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  font-family: var(--ud-font-mono);
  font-size: 10px;
}
.ud-statcard__trend[data-trend="up"] {
  color: var(--ud-up);
}
.ud-statcard__trend[data-trend="down"] {
  color: var(--ud-down);
}

.ud-block {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  height: 20px;
  padding: 0 7px;
  border: 1px solid var(--ud-line2);
  border-radius: var(--ud-radius-chip);
  background: var(--ud-surface3);
  color: var(--ud-text2);
  font-size: 9.5px;
}
.ud-block[data-severity="warn"] {
  border-color: var(--ud-amber);
  color: var(--ud-amber);
}
.ud-block[data-severity="error"] {
  border-color: var(--ud-down);
  color: var(--ud-down);
}
.ud-block[data-severity="neutral"] {
  color: var(--ud-muted2);
}
.ud-block svg {
  flex: none;
}

.ud-balance {
  display: flex;
  flex-direction: column;
  gap: 5px;
  padding: 9px 11px;
  border: 1px solid var(--ud-line);
  border-radius: var(--ud-radius-card);
  background: var(--ud-surface);
}
.ud-balance__row {
  display: flex;
  flex-direction: column;
  gap: 4px;
  margin: 0;
  padding: 0;
  list-style: none;
}
.ud-balance__row li {
  display: flex;
  align-items: center;
  gap: 7px;
  padding: 4px 6px;
  border: 1px solid var(--ud-line2);
  border-radius: var(--ud-radius-control);
  background: var(--ud-surface3);
  font-size: 10px;
}
.ud-portfolio {
  display: flex;
  flex-direction: column;
  gap: 7px;
  padding: 9px 11px;
  border: 1px solid var(--ud-line);
  border-radius: var(--ud-radius-card);
  background: var(--ud-surface);
}
.ud-portfolio__metric {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(120px, 1fr));
  gap: 7px;
}

/* Chart frame and skeletons (TASK-5-051). */
.ud-chart-wrap {
  display: flex;
  flex-direction: column;
  gap: 6px;
  padding: 8px 10px;
  border: 1px solid var(--ud-line);
  border-radius: var(--ud-radius-card);
  background: var(--ud-surface2);
}
.ud-chart-skel {
  position: relative;
  display: block;
  width: 100%;
  border: 1px solid var(--ud-line);
  border-radius: var(--ud-radius-control);
  background: var(--ud-surface3);
  overflow: hidden;
}
.ud-chart-skel .ud-skeleton {
  position: absolute;
  inset: 0;
}

/* Portal error boundary panel (TASK-5-051). */
.ud-error-panel {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 6px;
  padding: 14px 16px;
  border: 1px solid var(--ud-down);
  border-radius: var(--ud-radius-card);
  background: var(--ud-down-soft);
  color: var(--ud-text);
}
.ud-error-panel p {
  margin: 0;
  color: var(--ud-muted2);
  font-size: 11px;
}

/* Compact density (canon .pt-compact, ANALYSIS/06 §2): lower type and paddings while chip targets
   and inputs keep a 24px hit box. Applied through data-ud-density on the desktop root. */
[data-ud-density="compact"] {
  font-size: 12px;
  --ud-font-size-micro: 9px;
}
[data-ud-density="compact"] .ud-table {
  font-size: 9px;
}
[data-ud-density="compact"] .ud-table__head th {
  font-size: 9px;
}
[data-ud-density="compact"] .ud-table__head th,
[data-ud-density="compact"] .ud-table__row td {
  padding: 1px 4px;
}
[data-ud-density="compact"] .ud-window__head {
  padding: 3px 6px;
}
[data-ud-density="compact"] .ud-act {
  padding: 4px 6px;
}
[data-ud-density="compact"] .ud-kcard {
  padding: 3px 7px;
}
[data-ud-density="compact"] .ud-kcard b {
  font-size: 13px;
}
[data-ud-density="compact"] .ud-kcard span {
  font-size: 8px;
}
[data-ud-density="compact"] .ud-input,
[data-ud-density="compact"] .ud-select {
  height: 24px;
  font-size: 10.5px;
}
[data-ud-density="compact"] .ud-fchip .ud-input,
[data-ud-density="compact"] .ud-fchip .ud-select {
  height: 24px;
  font-size: 10px;
}
[data-ud-density="compact"] .ud-menu__item {
  padding: 5px 8px;
}

/* Comfortable density (TASK-8-006): the third step of the height ladder. Rows, fields and window
   chrome grow, so the same screen can be read from a distance or on a touch panel. */
[data-ud-density="comfortable"] {
  font-size: 13.5px;
  --ud-font-size-body: 12px;
  --ud-font-size-caption: 11.5px;
  --ud-h-row: 26px;
  --ud-h-field: 30px;
  --ud-h-button: 30px;
  --ud-h-buttonSm: 26px;
  --ud-h-badge: 20px;
}
[data-ud-density="comfortable"] .ud-table,
[data-ud-density="comfortable"] .ud-table__head th {
  font-size: 12px;
}
[data-ud-density="comfortable"] .ud-table__head th,
[data-ud-density="comfortable"] .ud-table__row td {
  padding: 7px 11px;
}
[data-ud-density="comfortable"] .ud-window__head {
  padding: 9px 12px;
}
[data-ud-density="comfortable"] .ud-act,
[data-ud-density="comfortable"] .ud-pager {
  padding: 8px 11px;
}

/* Visual variants (TASK-8-006): the rule width is the one chrome value a variant changes besides
   radii, so the three looks differ in character without touching colour. */
.ud-window,
.ud-table__head th,
.ud-table__row td,
.ud-widget-card,
.ud-panel,
.ud-window__footer {
  border-width: var(--ud-rule-width, 1px);
}
[data-ud-density="compact"] .ud-statcard {
  padding: 4px 7px;
}
[data-ud-density="compact"] .ud-statcard__value {
  font-size: 14px;
}

@media (prefers-reduced-motion: reduce) {
  .ud-desktop * {
    animation-duration: 1ms !important;
    transition-duration: 1ms !important;
  }
}