.tc-mode-row { display: flex; align-items: center; gap: 12px; margin: 14px 0; }
#tc-mode {
  background: var(--twb-bg-0); color: var(--twb-text-normal);
  border: 1px solid var(--twb-border); border-radius: 6px;
  font-family: var(--twb-font-mono); font-size: 13px;
  padding: 5px 10px;
}
#tc-mode:focus {
  outline: none; border-color: var(--twb-accent);
  box-shadow: 0 0 0 2px color-mix(in srgb, var(--twb-accent) 25%, transparent);
}

.tc-pane { margin: 12px 0; }
.tc-pane-head {
  display: flex; align-items: center; justify-content: space-between;
  margin-bottom: 4px;
}
.tc-pane textarea {
  width: 100%; resize: vertical;
  background: var(--twb-bg-1); color: var(--twb-text-normal);
  border: 1px solid var(--twb-border); border-radius: 6px;
  font-family: var(--twb-font-mono); font-size: 13px;
  padding: 10px 12px;
}
.tc-pane textarea:focus {
  outline: none; border-color: var(--twb-accent);
  box-shadow: 0 0 0 2px color-mix(in srgb, var(--twb-accent) 25%, transparent);
}

.tc-copy {
  font-family: var(--twb-font-mono); font-size: 9.5px; font-weight: 600;
  text-transform: uppercase; letter-spacing: 0.09em;
  color: var(--twb-text-faint);
  background: none; border: none; border-radius: 4px;
  padding: 2px 6px; cursor: pointer;
  transition: color 120ms ease, background 120ms ease;
}
.tc-copy:hover { color: var(--twb-accent); background: var(--twb-bg-3); }

.tc-error {
  margin: 14px 0; padding: 10px 14px;
  border: 1px solid color-mix(in srgb, var(--twb-red) 34%, var(--twb-border));
  border-left: 3px solid var(--twb-red);
  background: color-mix(in srgb, var(--twb-red) 9%, var(--twb-bg-0));
  border-radius: 6px;
  font-family: var(--twb-font-mono); font-size: 13px;
}