#app { height: 100dvh; }

/*
#app-body {
  gap     : 1rem;
  height  : 100dvh;
  padding : 1rem;
  width   : 100%;
}
*/

/* ── panes ── */

.stats {
  display: flex;
  align-items: center;
  gap: .5rem;
  margin-left: auto;
  font-size: .78rem;
  opacity: .6;
  font-variant-numeric: tabular-nums;
}

.stat-badge {
  background: color-mix(in srgb, var(--accent) 20%, transparent);
  color: var(--accent);
  padding: .1rem .4rem;
  border-radius: 2rem;
  font-size: .72rem;
  font-weight: 600;
}

.char-count { font-size: .75rem; opacity: .4; font-variant-numeric: tabular-nums; }

/* ── input textarea ── */
.code-input {
  flex: 1;
  resize: none;
  border: none;
  outline: none;
  background: transparent;
  color: var(--fg);
  /* font-family: 'Fira Code', 'Cascadia Code', monospace; */
  font-size: .82rem;
  line-height: 1.6;
  padding: .75rem;
  width: 100%;
  min-height: 0;
}
.code-input::placeholder { opacity: .3; }

/* ── output ── */
.output-wrap {
  flex: 1;
  overflow: auto;
  position: relative;
  min-height: 0;
}

.output-wrap.empty {
  display: flex;
  align-items: center;
  justify-content: center;
}

.placeholder { opacity: .25; font-size: .875rem; }

.output-pre {
  margin: 0;
  padding: .75rem;
  /* font-family: 'Fira Code', 'Cascadia Code', monospace; */
  font-size: .82rem;
  line-height: 1.6;
  white-space: pre-wrap;
  word-break: break-all;
}

.err-block {
  display: flex;
  gap: .5rem;
  padding: .75rem;
  color: #f66;
  font-size: .8rem;
  align-items: flex-start;
}
.err-block pre { white-space: pre-wrap; word-break: break-all; opacity: .85; }

/* ── actions ── */
.actions { display: flex; gap: .75rem; flex-shrink: 0; }

.ghost-btn {
  display: flex; align-items: center; gap: .3rem;
  background: transparent; border: none; color: var(--fg);
  cursor: pointer; font-size: .75rem; opacity: .45;
  padding: .15rem .3rem; border-radius: .3rem;
  transition: opacity .15s;
  margin-left: auto;
}
.ghost-btn:hover { opacity: 1; }

/* stats pushes copy btn away from stat text */
.pane-header .stats + .ghost-btn { margin-left: 0; }

/* ── responsive ── */