.cjb-button {
  display: inline-flex;
  min-height: 48px;
  align-items: center;
  justify-content: center;
  gap: var(--cjb-space-2);
  padding: 10px 20px;
  border: 1px solid transparent;
  border-radius: var(--cjb-radius-paper);
  font-family: var(--cjb-font-ui);
  font-size: 14px;
  line-height: 1.2;
  cursor: pointer;
  touch-action: manipulation;
  transition: background-color var(--cjb-duration-normal) ease, border-color var(--cjb-duration-normal) ease, transform var(--cjb-duration-fast) ease, box-shadow var(--cjb-duration-normal) ease;
}

.cjb-button--primary {
  min-height: 52px;
  color: var(--cjb-on-primary);
  background: var(--cjb-copper);
  border-color: var(--cjb-copper);
  box-shadow: var(--cjb-shadow-button);
  font-weight: 600;
  letter-spacing: .06em;
}

.cjb-button--primary:hover { background: var(--cjb-copper-pressed); }
.cjb-button--primary:active { background: var(--cjb-copper-pressed); transform: translateY(1px); }

.cjb-button--secondary {
  color: var(--cjb-ink-strong);
  background: var(--cjb-paper-translucent);
  border-color: var(--cjb-line);
}

.cjb-button--secondary:hover { background: var(--cjb-paper-raised); border-color: var(--cjb-line-strong); }
.cjb-button--text { min-width: var(--cjb-touch-min); min-height: var(--cjb-touch-min); padding: 8px; color: var(--cjb-ink-muted); background: transparent; border: 0; box-shadow: none; text-decoration: underline; text-underline-offset: 4px; }
.cjb-button:disabled { cursor: not-allowed; opacity: .45; box-shadow: none; }

.cjb-field { display: grid; gap: var(--cjb-space-2); color: var(--cjb-ink); font-family: var(--cjb-font-ui); font-size: 14px; line-height: var(--cjb-leading-ui); }
.cjb-field input, .cjb-field textarea, .cjb-field select { width: 100%; min-height: 48px; padding: 12px 14px; color: var(--cjb-ink-strong); background: var(--cjb-paper-raised); border: 1px solid var(--cjb-line); border-radius: var(--cjb-radius-paper); outline: none; }
.cjb-field textarea { min-height: 96px; line-height: var(--cjb-leading-story); resize: vertical; }
.cjb-field input:focus, .cjb-field textarea:focus, .cjb-field select:focus { border-color: var(--cjb-copper); box-shadow: 0 0 0 3px rgba(152, 110, 85, .12); }

.cjb-choice { min-width: var(--cjb-touch-min); min-height: var(--cjb-touch-min); padding: 8px; color: var(--cjb-ink); background: var(--cjb-paper-raised); border: 1px solid var(--cjb-line); border-radius: var(--cjb-radius-control); cursor: pointer; }
.cjb-choice[aria-pressed="true"] { color: var(--cjb-copper-pressed); background: rgba(152, 110, 85, .12); border-color: var(--cjb-copper); box-shadow: inset 0 0 0 1px rgba(152, 110, 85, .10); }

.cjb-paper-sheet { position: relative; padding: var(--cjb-space-5); background: var(--cjb-paper-raised); border: 1px solid var(--cjb-hairline); border-radius: var(--cjb-radius-paper); box-shadow: var(--cjb-shadow-paper); }
.cjb-status { padding: var(--cjb-space-3) var(--cjb-space-4); color: var(--cjb-ink-muted); background: var(--cjb-neutral-bg); border: 1px solid var(--cjb-hairline); font-family: var(--cjb-font-ui); font-size: var(--cjb-text-12); line-height: var(--cjb-leading-ui); }
.cjb-status--success { color: var(--cjb-green); background: var(--cjb-success-bg); }
.cjb-status--warning { color: var(--cjb-recording); background: var(--cjb-warning-bg); }
.cjb-status--error { color: var(--cjb-danger); background: var(--cjb-danger-bg); }

.cjb-progress { height: 4px; overflow: hidden; background: rgba(78, 86, 78, .12); }
.cjb-progress > span { display: block; width: 0; height: 100%; background: var(--cjb-copper); transition: width var(--cjb-duration-normal) ease; }

.cjb-toast { position: fixed; z-index: 20; left: 50%; bottom: max(22px, env(safe-area-inset-bottom)); width: min(350px, calc(100% - 32px)); padding: 12px 15px; color: var(--cjb-ink-strong); background: rgba(247, 241, 228, .97); border: 1px solid var(--cjb-line); box-shadow: var(--cjb-shadow-raised); transform: translateX(-50%); font-family: var(--cjb-font-ui); font-size: var(--cjb-text-13); line-height: var(--cjb-leading-ui); }

.cjb-record-button { position: relative; display: grid; width: 88px; height: 88px; place-items: center; border: 1px solid var(--cjb-copper); border-radius: 50%; color: var(--cjb-copper); background: var(--cjb-paper-raised); box-shadow: 0 12px 28px rgba(83, 58, 44, .14); cursor: pointer; }
.cjb-record-button::before { content: ""; width: 28px; height: 28px; border-radius: 50%; background: var(--cjb-recording); }
.cjb-record-button.is-recording { border-color: var(--cjb-recording); box-shadow: 0 0 0 10px rgba(156, 102, 93, .10); }
.cjb-record-button.is-recording::before { border-radius: 3px; }