* { box-sizing: border-box; }
[hidden] { display: none !important; }
.mo-date-time { white-space: pre-line; font-variant-numeric: tabular-nums; }
.mo-table { width: 100%; border-collapse: separate; border-spacing: 0; font-size: 12px; }
.mo-table th { height: 38px; padding: 0 10px; border-bottom: 1px solid var(--border); background: var(--surface-subtle); color: var(--text-secondary); font-weight: 500; text-align: left; white-space: nowrap; }
.mo-table td { height: 40px; padding: 8px 10px; border-bottom: 1px solid var(--border); background: var(--surface); vertical-align: middle; font-variant-numeric: tabular-nums; }
.mo-table--rich td { height: 64px; padding: 7px 10px; }
.mo-table tr:hover td { background: var(--surface-subtle); }
.mo-table tr.selected td { background: var(--brand-soft); }
html { scrollbar-width: none; }
html::-webkit-scrollbar { width: 0; }
body { margin: 0; line-height: 1.55; }
button, input, select, textarea { font: inherit; }
.mo-input, .mo-button { line-height: 20px; }
button, select, input[type="checkbox"], input[type="radio"] { cursor: pointer; }
button:disabled, input:disabled, select:disabled { cursor: not-allowed; }
button { color: inherit; }
button, a, input, select, textarea { -webkit-tap-highlight-color: transparent; }
:focus, :focus-visible { outline: none; }
a { color: var(--brand); text-decoration: none; }
a:hover, a:focus-visible { text-decoration: underline; }
svg { flex-shrink: 0; vertical-align: middle; }
input[type="checkbox"], input[type="radio"] { margin: 0; flex-shrink: 0; vertical-align: middle; accent-color: var(--brand); width: 16px; height: 16px; }
input, select, textarea { color: var(--text); }
.skip-link { position: fixed; top: -80px; left: 16px; z-index: 200; background: var(--surface); padding: 12px; }
.skip-link:focus { top: 12px; }
.mo-button {
  display: inline-flex; align-items: center; justify-content: center; gap: var(--space-2);
  min-height: var(--control-height); padding: 5px 10px; border: 1px solid var(--border);
  border-radius: var(--radius); background: var(--surface); color: var(--text-secondary);
  font-weight: 500; white-space: nowrap; transition: background var(--motion-fast), border-color var(--motion-fast);
}
.mo-button:hover, .mo-button:focus-visible { background: var(--surface-subtle); border-color: var(--hover-border); }
.mo-button:active { background: var(--brand-soft); }
.mo-button.primary { background: var(--brand); border-color: var(--brand); color: var(--on-brand); }
.mo-button.primary:hover, .mo-button.primary:focus-visible { background: var(--brand-hover); }
.mo-button.quiet { border-color: transparent; background: transparent; }
.mo-button.danger { color: var(--danger); }
.mo-button.success { color: var(--brand); }
.mo-button.warning { color: var(--warning); background: var(--warning-soft); border-color: var(--warning-border); }
.mo-button.warning:hover { border-color: var(--warning); }
.mo-button.small { min-height: var(--control-height-compact); padding: 4px 9px; }
.mo-button.icon-only { width: var(--control-height); height: var(--control-height); padding: 0; }
.mo-button.small.icon-only { width:var(--control-height-compact); height:var(--control-height-compact); }
.mo-button:disabled { opacity: .48; }
.mo-input {
  min-height: var(--control-height); width: 100%; padding: 5px 9px; border: 1px solid var(--border);
  border-radius: var(--radius); background: var(--surface); color: var(--text);
}
.mo-input:hover { border-color: var(--text-muted); }
.mo-input:focus { border-color: var(--brand); box-shadow: 0 0 0 2px var(--focus-halo); }
.mo-input:focus-visible { outline: none; }
.mo-input[aria-invalid="true"] { border-color: var(--danger); }
.mo-input:disabled { background: var(--surface-subtle); color: var(--text-muted); }
.mo-field { display: grid; gap: 7px; margin-bottom: var(--space-5); }
.mo-field > label, .mo-label { font-weight: 600; }
.mo-field small, .help-text { color: var(--text-muted); font-size: 12px; }
.field-error { color: var(--danger); font-size: 12px; min-height: 0; }
.required { color: var(--danger); margin-right: 4px; }
.mo-card { background: var(--surface); border: 1px solid var(--border); border-radius: var(--radius-lg); }
.mo-badge {
  display: inline-flex; gap: 6px; align-items: center; padding: 3px 8px; border-radius: 5px;
  background: var(--surface-subtle); color: var(--text-secondary); font-size: 11px; font-weight: 500; white-space: nowrap;
}
.mo-badge.success { background: var(--brand-soft); color: var(--brand-hover); }
.mo-badge.warning { background: var(--warning-soft); color: var(--warning); }
.mo-badge.danger { background: var(--danger-soft); color: var(--danger); }
.mo-badge.info { background: var(--info-soft); color: var(--info); }
.status-dot { width: 6px; height: 6px; border-radius: 50%; background: currentColor; }
.mo-segment { display: inline-flex; gap: 3px; padding: 3px; background: var(--surface-subtle); border: 1px solid var(--border); border-radius: var(--radius); }
.mo-segment button { border: 0; padding: 6px 13px; border-radius: 5px; background: transparent; color: var(--text-secondary); }
.mo-segment button[aria-pressed="true"] { background: var(--surface); color: var(--brand); box-shadow: 0 1px 4px #17212f12; font-weight: 600; }
.mo-dialog { max-width: calc(100vw - 32px); max-height: calc(100dvh - 48px); padding: 0; width: 600px; border: 1px solid var(--border); border-radius: var(--radius-lg); box-shadow: var(--shadow-dialog); color: var(--text); background: var(--surface); }
.mo-dialog::backdrop { background: var(--scrim); }
.mo-dialog.drawer { width: 850px; height: 100dvh; max-height: 100dvh; margin: 0 0 0 auto; border-radius: 12px 0 0 12px; }
.mo-dialog.edge-close { overflow: visible; }
.mo-dialog.edge-close .dialog-body { border-top-left-radius: inherit; }
.mo-dialog > .mo-drawer-close { position: absolute; left: -36px; top: 20px; display: grid; place-items: center; width: 36px; height: 36px; min-height: 36px; padding: 0; border: 0; border-radius: var(--radius) 0 0 var(--radius); color: var(--on-brand); background: var(--drawer-close-bg,var(--brand)); }
.mo-drawer-close svg { display: block; }
.dialog-layout { display: flex; flex-direction: column; max-height: inherit; height: 100%; }
.dialog-header { display: flex; gap: 16px; align-items: center; justify-content: space-between; padding: 12px 16px; border-bottom: 1px solid var(--border); flex-shrink: 0; }
.dialog-header h2 { font-size: 17px; margin: 0; }
.dialog-body { flex: 1 1 auto; padding: 16px; overflow-y: auto; overscroll-behavior: contain; min-height: 0; }
.dialog-footer { display: flex; align-items: center; justify-content: flex-end; gap: 10px; padding: 10px 16px; border-top: 1px solid var(--border); background: var(--surface-subtle); flex-shrink: 0; }
.dialog-footer .footer-note { margin-right: auto; color: var(--text-muted); font-size: 12px; }
.mo-toast { position: fixed; inset:auto 28px 28px auto; margin:0; border:1px solid var(--border); z-index: var(--layer-feedback); padding: 12px 18px; border-radius: var(--radius); color: var(--text); background: var(--surface); box-shadow: var(--shadow); max-width: min(480px, calc(100vw - 32px)); overflow-wrap:anywhere; pointer-events: none; }
.mo-toast[data-tone="success"] { color:var(--brand); background:var(--brand-soft); }
.mo-toast[data-tone="error"] { color:var(--danger); background:var(--danger-soft); }
.mo-toast:empty { display: none; }
.mo-notice { padding: 12px 15px; border: 1px solid var(--border); border-radius: var(--radius); background: var(--surface-subtle); color: var(--text-secondary); font-size: 12px; }
.mo-notice.info { background: var(--info-soft); border-color: #bfdbfe; color: var(--info); }
.mo-notice.warning { background: var(--warning-soft); border-color: var(--warning-border); color: var(--warning); }
.mo-notice.error { background: var(--danger-soft); border-color: #fecaca; color: var(--danger); }
.choice-card { display: flex; gap: 10px; align-items: center; padding: 10px; border: 1px solid var(--border); border-radius: var(--radius); cursor: pointer; }
.choice-card:focus-within { border-color: var(--brand); background: var(--brand-soft); }
.choice-card strong { display: block; margin-bottom: 4px; }
.choice-card small { color: var(--text-secondary); }
.two-columns { display: grid; grid-template-columns: 1fr 1fr; gap: 16px; }
.muted { color: var(--text-muted); }
.tabular { font-variant-numeric: tabular-nums; }
.text-link { border: 0; background: transparent; padding: 4px 0; color: var(--brand); cursor: pointer; }
.text-link:hover { text-decoration: underline; }
.empty-state { padding: 56px 24px; text-align: center; color: var(--text-muted); }
.empty-state h3 { font-size: 15px; color: var(--text); margin-bottom: 6px; }
.empty-state svg { color: var(--text-muted); margin-bottom: 10px; }
.sr-only { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0, 0, 0, 0); white-space: nowrap; }
@media (prefers-reduced-motion: reduce) { *, *::before, *::after { scroll-behavior: auto !important; transition-duration: 0s !important; animation: none !important; } }
@media (max-width: 680px) { .two-columns { grid-template-columns: 1fr; } .dialog-header, .dialog-body, .dialog-footer { padding: 16px; } .mo-dialog.drawer { max-width: 100vw; border-radius: 0; } }

.mo-popover { position: fixed; inset: auto; margin: 0; max-width: calc(100vw - 16px); max-height: calc(100dvh - 16px); overflow: auto; padding: 0; border: 1px solid var(--border); border-radius: var(--radius-lg); background: var(--surface); color: var(--text); box-shadow: var(--shadow); }
.popover-header { display: flex; justify-content: space-between; align-items: center; padding: 8px 12px; border-bottom: 1px solid var(--border); }
.popover-body { padding: 12px; }
.popover-footer { display: flex; justify-content: flex-end; gap: 8px; padding: 8px 12px; border-top: 1px solid var(--border); }
.mo-popover .mo-field { margin-bottom: 10px; }
.mo-popover .choice-card { padding: 7px; gap: 8px; }
.text-link:disabled { color: var(--text-muted); cursor: not-allowed; text-decoration: none; }
.mo-select { display: inline-block; position: relative; vertical-align: middle; min-width: 0; }
.select-trigger { display: flex; justify-content: space-between; align-items: center; gap: 8px; text-align: left; }
.select-trigger > span { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.mo-select[hidden] { display: none; }
.select-popover .popover-body { padding: 4px; }
.select-options { display: grid; max-height: 280px; overflow-y: auto; overscroll-behavior: contain; }
.select-options button { min-width: 0; min-height: 32px; display: flex; justify-content: space-between; align-items: center; gap: 8px; padding: 6px 9px; border: 0; border-radius: 4px; background: transparent; color: var(--text); text-align: left; }
.select-options button > span { flex: 1; }
.select-options button:hover, .select-options button:focus-visible { background: var(--surface-subtle); outline: none; }
.select-options button[aria-selected="true"] { color: var(--brand); background: var(--brand-soft); }
.select-options button:disabled { opacity: .45; }
.mo-field > .mo-select { width: 100%; }

input[type="checkbox"], input[type="radio"] { appearance: none; display: inline-grid; place-content: center; vertical-align: middle; width: 15px; height: 15px; margin: 0; border: 1px solid var(--text-muted); border-radius: 3px; background: var(--surface); flex-shrink: 0; }
input[type="radio"] { border-radius: 50%; }
input[type="checkbox"]:checked { border-color: var(--brand); background: var(--brand); }
input[type="checkbox"]:checked::before { content: ''; width: 7px; height: 4px; border-left: 2px solid var(--on-brand); border-bottom: 2px solid var(--on-brand); transform: rotate(-45deg) translateY(-1px); }
input[type="checkbox"]:indeterminate { border-color: var(--brand); background: var(--brand); }
input[type="checkbox"]:indeterminate::before { content: ''; width: 7px; height: 2px; background: var(--on-brand); }
input[type="radio"]:checked { border-color: var(--brand); background: var(--brand); box-shadow: inset 0 0 0 3px var(--surface); }
input[type="checkbox"]:disabled, input[type="radio"]:disabled { opacity: .4; cursor: not-allowed; }
input[type="number"] { appearance: textfield; }
input[type="number"]::-webkit-inner-spin-button, input[type="number"]::-webkit-outer-spin-button { appearance: none; margin: 0; }

.mo-search-group { display:flex; align-items:center; height:var(--control-height); border: 1px solid var(--border); border-radius: var(--radius); }
.mo-search-group:focus-within { border-color: var(--brand); box-shadow: 0 0 0 2px var(--focus-halo); }
.mo-search-group .mo-input { height:calc(var(--control-height) - 2px); min-height:calc(var(--control-height) - 2px); border: 0; border-radius: 0; box-shadow: none; outline: none; background: transparent; }
.mo-search-group .dimension { width:84px; flex-shrink:0; border-right: 1px solid var(--border); }
.mo-search-group .dimension .select-trigger { padding: 5px 8px; }

.mo-tooltip { position: fixed; inset: auto; margin: 0; padding: 6px 9px; max-width: 240px; border: 0; border-radius: var(--radius); background: var(--nav); color: var(--on-brand); box-shadow: var(--shadow); font-size: 12px; line-height: 1.4; pointer-events: none; overflow-wrap: anywhere; }
.mo-tooltip.chart { padding:var(--space-3); max-width:min(320px,calc(100vw - 16px)); border-radius:var(--chart-tooltip-radius,var(--radius)); background:var(--surface); color:var(--chart-tooltip-text,var(--text)); box-shadow:var(--chart-tooltip-shadow,var(--shadow)); line-height:1.5; }
.mo-tooltip.chart > strong { display:block; margin-bottom:var(--space-2); font-weight:500; }
.mo-tooltip.chart > div { display:flex; align-items:center; gap:var(--space-2); white-space:nowrap; }
.mo-tooltip.chart > div + div { margin-top:var(--space-2); }
.mo-tooltip.chart i { display:block; width:8px; height:8px; border-radius:50%; flex:none; }
.mo-popover { overscroll-behavior: contain; }

.mo-check-label { display: inline-flex; align-items: center; gap: var(--space-2); min-height: var(--control-height); cursor: pointer; }

[data-truncated] { display: block; min-width: 0; max-width: 100%; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.mo-text-preview { position: fixed; inset: auto; margin: 0; max-width: min(420px,calc(100vw - 16px)); max-height: min(320px,50dvh); overflow: auto; overscroll-behavior: contain; padding: 10px 12px; border: 1px solid var(--border); border-radius: var(--radius); background: var(--surface); color: var(--text); box-shadow: var(--shadow); font-size: 13px; line-height: 1.6; overflow-wrap: anywhere; white-space: pre-wrap; cursor: text; user-select: text; }

.mo-pagination { display: flex; align-items: center; justify-content: flex-end; flex-wrap: wrap; gap: var(--space-2); padding: var(--space-2) var(--space-3); font-size: 12px; color: var(--text-muted); }
.mo-pagination .pagination { display: flex; align-items: center; flex-wrap: wrap; gap: var(--space-2); }
.mo-pagination .page-number { width: var(--control-height-compact); min-height: var(--control-height-compact); padding: 0; }
.mo-pagination .page-number[aria-current="page"] { color: var(--brand); border-color: var(--brand); background: var(--brand-soft); }
.mo-pagination .mo-select { width: 90px; }

.mo-identity { display: flex; align-items: center; gap: var(--space-2); min-width: 0; }
.mo-identity-avatar { position: relative; flex: 0 0 var(--control-height); width: var(--control-height); height: var(--control-height); display: grid; place-items: center; overflow: hidden; border-radius: 50%; background: var(--brand-soft); color: var(--brand); }
.mo-identity-avatar img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.mo-identity-content { min-width: 0; flex: 1; }
.mo-identity-heading { display: flex; align-items: center; gap: var(--space-2); min-width: 0; }
.mo-identity-heading strong { min-width: 0; }
.mo-identity-heading .mo-badge { flex-shrink: 0; }
.mo-identity--detail { align-items: flex-start; }
.mo-identity--detail .mo-identity-heading { align-items: flex-start; flex-wrap: wrap; }
.mo-identity--detail .mo-identity-heading strong { white-space: normal; overflow-wrap: anywhere; }
.mo-identifier { display: flex; align-items: center; gap: var(--space-1); min-width: 0; color: var(--text-muted); font-size: 12px; }
.mo-identifier-label { flex-shrink: 0; }
.mo-identifier-value { min-width: 0; white-space: normal; overflow-wrap: anywhere; font-variant-numeric: tabular-nums; }
.mo-identifier .mo-button { flex-shrink: 0; min-width: 1em; min-height: 1em; width: 1em; height: 1em; padding: 0; font-size: inherit; line-height: 1; display:inline-flex; align-items:center; justify-content:center; }
.mo-identifier .mo-button svg { width:1em; height:1em; }
.mo-identifier--detail .mo-identifier-value { white-space: normal; overflow-wrap: anywhere; }
.mo-copy-buffer { position: fixed; top: 0; left: 0; opacity: 0; pointer-events: none; }
.mo-pagination .mo-select .mo-input { width: 100%; min-height: var(--control-height-compact); padding: 4px 8px; }

/* Two compact identity lines share one avatar and preserve complete locating identifiers. */
.mo-identity-line { display:flex; align-items:center; gap:var(--space-2); min-width:0; }
.mo-identity-line + .mo-identity-line { margin-top:2px; }
.mo-identity-line > strong { flex:0 1 auto; min-width:0; max-width:160px; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
.mo-identity-line .mo-identifier { flex-shrink:0; }
.mo-identifier--inline { position:relative; }
.mo-identifier--inline .mo-identifier-value { white-space:nowrap; overflow-wrap:normal; }
.mo-identity--detail .mo-identity-line { flex-wrap:wrap; }
.mo-identity--detail .mo-identity-line > strong { flex-basis:100%; max-width:none; white-space:normal; }
.mo-identity--account.mo-identity--detail .mo-identity-line > strong { flex-basis:auto; }

.mo-task-attempt { padding:var(--space-3); margin-block:var(--space-3); }
.mo-task-attempt-header { display:flex; justify-content:space-between; align-items:center; gap:var(--space-3); flex-wrap:wrap; }

.mo-pagination .page-number { min-width: 30px; width: auto; padding-inline: 6px; }
.pagination-ellipsis { display: inline-flex; align-items: center; justify-content: center; min-width: 20px; }
.mo-list-query { display: flex; justify-content: flex-end; align-items: center; flex-wrap: wrap; gap: var(--space-2); padding: var(--space-2) var(--space-3); margin: 0; border-bottom: 1px solid var(--border); }
.mo-list-query > label { display: inline-flex; align-items: center; gap: var(--space-2); margin: 0; }
.mo-list-query > input { flex: 0 1 240px; width: 240px; min-width: 160px; }
.mo-list-query input:not([type="checkbox"]):not([type="radio"]) { text-align: left; }
.mo-query-actions { display: flex; align-items: center; justify-content: flex-end; gap: var(--space-2); }
.mo-list-query .mo-input, .mo-list-query .mo-select { margin: 0; }
.mo-list-query > .mo-segment { height:var(--control-height); padding:2px; }
.mo-list-query > .mo-segment button { height:100%; padding:0 var(--space-3); display:inline-flex; align-items:center; }

.mo-list-query > label > input:not([type="date"]):not([type="number"]) { width: 240px; }
.mo-list-query > label > select, .mo-list-query > label > .mo-select { width: 160px; }

.mo-query-icon { display: inline-flex; align-items: center; justify-content: center; flex: 0 0 16px; width: 16px; height: 16px; }
.mo-query-loading { animation: mo-query-spin .8s linear infinite; }
@keyframes mo-query-spin { to { transform: rotate(360deg); } }
@media (prefers-reduced-motion: reduce) { .mo-query-loading { animation: none; } }

@media (prefers-reduced-motion: reduce) { *, *::before, *::after { transition: none !important; animation: none !important; } }

.mo-detail-grid { margin: 0; }
.mo-detail-grid dt { color: var(--text-secondary); }
.mo-detail-grid dd { margin: var(--space-1) 0 0; overflow-wrap: anywhere; }