@layer components {
  .results-empty {
    padding: var(--space-6) var(--space-3);
    text-align: center;
    color: var(--color-text-muted);
    font-style: italic;
  }

  .results-error {
    padding: var(--space-3);
    color: var(--color-error);
    background: color-mix(in srgb, var(--color-error) 10%, transparent);
    border: 1px solid color-mix(in srgb, var(--color-error) 30%, transparent);
    border-radius: var(--radius-md);
    font-family: var(--font-mono);
    font-size: var(--size-fluid-1);
    white-space: pre-wrap;
    word-break: break-all;
  }

  .results-table-wrapper {
    overflow: auto;
    max-height: 100%;
  }

  .results-table {
    border-collapse: collapse;
    width: 100%;
    font-family: var(--font-mono);
    font-size: var(--results-font-size, 13px);
  }

  .results-table th {
    position: sticky;
    top: -1px;
    z-index: 1;
    background: var(--color-bg-header);
    padding: var(--space-2) var(--space-3);
    text-align: left;
    font-weight: 900;
    font-size: calc(var(--results-font-size, 13px) + 3px);
    border: 1px solid var(--color-border);
    white-space: nowrap;
    color: var(--color-text);
  }

  .results-table td {
    padding: var(--space-2) var(--space-3);
    border: 1px solid var(--color-border-light);
    white-space: nowrap;
    max-width: 40ch;
    overflow: hidden;
    text-overflow: ellipsis;
    color: var(--color-text);
  }

  .results-table tr:nth-child(even) td {
    background: var(--color-bg);
  }

  .results-table tr:nth-child(odd) td {
    background: var(--color-bg-surface);
  }

  .results-table tr:hover td {
    background: var(--color-bg-hover) !important;
  }

  .results-table .cell-null {
    color: var(--color-text-muted);
    font-style: italic;
  }

  .results-table .cell-number {
    text-align: right;
    font-variant-numeric: tabular-nums;
  }

  .shell-output {
    padding: var(--space-2) var(--space-3);
    font-family: var(--font-mono);
    font-size: var(--size-fluid-1);
    line-height: 1.6;
  }

  .shell-line {
    white-space: pre-wrap;
    word-break: break-all;
  }

  .shell-log {
    color: var(--color-text);
  }

  .shell-warn {
    color: var(--color-warning);
  }

  .shell-error {
    color: var(--color-error);
  }

  .shell-input-line {
    display: flex;
    align-items: center;
    gap: var(--space-1);
    padding: var(--space-1) var(--space-3);
    font-family: var(--font-mono);
    font-size: var(--size-fluid-1);
  }

  .shell-prompt {
    color: var(--color-accent);
    font-weight: 600;
  }

  .shell-input {
    flex: 1;
    border: none;
    border-bottom: 1px solid var(--color-border);
    background: transparent;
    color: var(--color-text);
    font-family: var(--font-mono);
    font-size: var(--size-fluid-1);
    outline: none;
    padding: var(--space-1) 0;
  }

  .shell-input:focus {
    border-bottom-color: var(--color-accent);
  }

  .shell-input-done {
    color: var(--color-text-muted);
    padding: var(--space-1) 0;
  }

  .markdown-preview {
    padding: var(--space-3) var(--space-4);
    font-size: var(--size-fluid-2);
    line-height: 1.7;
    max-width: 800px;
  }

  .markdown-preview h1 { font-size: 1.5em; margin: 0.5em 0 0.3em; }
  .markdown-preview h2 { font-size: 1.3em; margin: 0.5em 0 0.3em; }
  .markdown-preview h3 { font-size: 1.15em; margin: 0.4em 0 0.2em; }
  .markdown-preview p { margin: 0.4em 0; }
  .markdown-preview ul { margin: 0.3em 0; padding-left: 1.5em; }
  .markdown-preview li { margin: 0.15em 0; }
  .markdown-preview code {
    background: var(--color-bg-hover);
    padding: 1px 4px;
    border-radius: 2px;
    font-family: var(--font-mono);
    font-size: 0.85em;
  }
  .markdown-preview pre {
    background: var(--color-bg);
    border: 1px solid var(--color-border);
    border-radius: var(--radius-md);
    padding: var(--space-3);
    overflow-x: auto;
  }
  .markdown-preview pre code {
    background: none;
    padding: 0;
  }
  .markdown-preview a { color: var(--color-accent); }
  .markdown-preview strong { font-weight: 700; }
  .markdown-preview em { font-style: italic; }
  .markdown-preview br { display: block; margin: 0.3em 0; }
  .markdown-preview table { width: 100%; border-collapse: collapse; margin: 0.5em 0; font-size: 12px; }
  .markdown-preview th,
  .markdown-preview td { padding: 4px 8px; border: 1px solid var(--color-border-light); text-align: left; }
  .markdown-preview th { background: var(--color-bg); font-weight: 600; }
}