body { margin: 0; font-family: var(--font-sans); background: var(--paper); color: var(--ink); font-size: 15px; line-height: 24px; -webkit-font-smoothing: antialiased; }
.ov-row { display: flex; flex-wrap: wrap; gap: var(--space-2); align-items: center; padding: var(--space-4); }
.ov-col { display: flex; flex-direction: column; gap: var(--space-4); padding: var(--space-4); }
.ov-btn { font: inherit; font-size: 14px; font-weight: 500; line-height: 20px; letter-spacing: -0.005em; height: 36px; padding: 0 14px; border-radius: var(--radius-md); border: 1px solid var(--line-strong); background: var(--surface-raised); color: var(--ink); cursor: pointer; display: inline-flex; align-items: center; gap: var(--space-2); transition: transform 160ms cubic-bezier(0.23, 1, 0.32, 1), background-color 150ms ease, border-color 150ms ease, opacity 150ms ease; -webkit-tap-highlight-color: transparent; }
.ov-btn:active:not(:disabled) { transform: scale(0.97); }
.ov-btn:focus-visible { outline: 2px solid var(--focus); outline-offset: 2px; }
.ov-btn-primary { background: var(--ink); border-color: var(--ink); color: var(--on-ink); }
.ov-btn-agent { background: var(--agent); border-color: var(--agent); color: var(--on-agent); }
.ov-btn-agent .ov-mark { fill: var(--on-agent); }
.ov-btn-danger { border-color: var(--danger); color: var(--danger); }
.ov-btn-ghost { background: transparent; border-color: transparent; color: var(--ink-muted); }
.ov-btn:disabled { opacity: .45; cursor: not-allowed; }
.ov-mark { flex: none; }
.ov-mark-human { fill: var(--human); }
.ov-mark-agent { fill: var(--agent); }
.ov-tag { display: inline-flex; align-items: center; gap: 6px; font-size: 12px; line-height: 16px; font-weight: 500; white-space: nowrap; }
.ov-tag-human { color: var(--human-ink); }
.ov-tag-agent { color: var(--agent-ink); }
.ov-tag-name, .ov-tag-time { font-weight: 400; color: var(--ink-muted); }
.ov-tag-time::before, .ov-tag-name::before { content: "·"; margin-right: 6px; }
.ov-status { display: inline-flex; align-items: center; gap: 6px; font-size: 12px; line-height: 16px; font-weight: 500; }
.ov-status svg { fill: none; stroke: currentColor; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }
.ov-status-success { color: var(--success); }
.ov-status-warning { color: var(--warning); }
.ov-status-danger { color: var(--danger); }
.ov-status-neutral { color: var(--ink-muted); }
.ov-sug { max-width: 560px; background: var(--surface-raised); border: 1px solid var(--line); border-radius: var(--radius-md); padding: var(--space-4); display: flex; flex-direction: column; gap: 6px; }
.ov-sug-pending { border-color: var(--agent); box-shadow: 0 0 0 3px var(--agent-soft); }
.ov-sug-head { display: flex; justify-content: space-between; align-items: center; gap: var(--space-2); }
.ov-sug-conf { font-size: 12px; line-height: 16px; color: var(--ink-muted); }
.ov-sug-title { margin: var(--space-1) 0 0; font-size: 15px; line-height: 22px; font-weight: 600; letter-spacing: -0.01em; }
.ov-sug-reason { margin: 0; color: var(--ink-muted); font-size: 14px; line-height: 21px; }
.ov-sug-k { color: var(--ink); font-weight: 500; }
.ov-sug-actions, .ov-sug-decision { display: flex; flex-wrap: wrap; gap: var(--space-2); align-items: center; margin-top: var(--space-2); }
.ov-sug-decision { gap: var(--space-4); }
.ov-data { font-family: var(--font-mono); font-size: 13px; line-height: 20px; font-variant-numeric: tabular-nums; }
@media (hover: hover) and (pointer: fine) {
  .ov-btn:hover { background: var(--surface-sunken); }
  .ov-btn-primary:hover { background: var(--ink); opacity: .86; }
  .ov-btn-agent:hover { background: var(--agent); opacity: .9; }
  .ov-btn-ghost:hover { background: var(--surface-sunken); color: var(--ink); }
}
@media (prefers-reduced-motion: reduce) {
  .ov-btn { transition: background-color 150ms ease, border-color 150ms ease, opacity 150ms ease; }
  .ov-btn:active:not(:disabled) { transform: none; }
}