* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
  -webkit-tap-highlight-color: transparent;
}

:root {
  --bg: #f5f5f7;
  --surface: #ffffff;
  --text: #3a3a3c;
  --text-secondary: #aeaeb2;
  --accent: #7AADDB;
  --accent-hover: #6899C4;
  --record: #D98D87;
  --record-hover: #C47D77;
  --purple: #A592CC;
  --purple-hover: #9380B5;
  --green: #7DC08E;
  --green-hover: #6BAD7C;
  --border: rgba(60, 60, 67, 0.08);
  --radius: 12px;
  --safe-top: env(safe-area-inset-top, 0px);
  --safe-bottom: env(safe-area-inset-bottom, 0px);
}

html, body {
  font-family: -apple-system, BlinkMacSystemFont, "SF Pro Text", "Segoe UI", Roboto, sans-serif;
  background: #e8e8ed;
  color: var(--text);
  min-height: 100dvh;
  overflow-x: hidden;
  -webkit-font-smoothing: antialiased;
}

body {
  max-width: 393px;
  margin: 0 auto;
  background: var(--bg);
  box-shadow: 0 0 40px rgba(0,0,0,0.08);
  min-height: 100dvh;
}

/* ─── Screen ───────────────────────────────────────────────────── */
.screen {
  display: none;
  flex-direction: column;
  min-height: 100dvh;
  max-height: 852px;
  padding-bottom: calc(24px + var(--safe-bottom));
  overflow-y: auto;
}

.screen.active {
  display: flex;
}

/* ─── Header ───────────────────────────────────────────────────── */
header {
  display: flex;
  align-items: center;
  padding: calc(14px + var(--safe-top)) 16px 14px;
  background: var(--bg);
  position: sticky;
  top: 0;
  z-index: 10;
}

header h1 {
  font-size: 17px;
  font-weight: 700;
  flex: 1;
  letter-spacing: -0.4px;
  color: var(--text);
}

.header-actions {
  display: flex;
  flex-direction: column;
  align-items: center;
  background: var(--text);
  border-radius: 12px;
  padding: 6px 14px 8px;
  gap: 5px;
}

.header-group-label {
  font-size: 9px;
  color: rgba(255, 255, 255, 0.55);
  font-weight: 600;
  letter-spacing: 0.3px;
  text-transform: uppercase;
  line-height: 1;
}

.header-group-btns {
  display: flex;
  gap: 14px;
  align-items: center;
}

.header-labeled-btn {
  border: none;
  background: none;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 2px;
  padding: 2px 4px;
  border-radius: 6px;
  cursor: pointer;
  transition: opacity 0.15s;
}

.header-labeled-btn:active:not(:disabled) {
  opacity: 0.6;
}

.header-labeled-btn:disabled {
  opacity: 0.2;
  cursor: not-allowed;
}

.header-labeled-btn svg {
  stroke: rgba(255, 255, 255, 0.9);
}

.header-labeled-btn-text {
  font-size: 9px;
  font-weight: 600;
  line-height: 1;
  color: rgba(255, 255, 255, 0.9);
}

.header-labeled-btn.delete svg {
  stroke: #f0a8a4;
}

.header-labeled-btn.delete .header-labeled-btn-text {
  color: #f0a8a4;
}

.header-icon-btn {
  width: 32px;
  height: 32px;
  border: none;
  background: none;
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: 8px;
  color: var(--text-secondary);
  cursor: pointer;
  transition: background 0.15s;
  flex-shrink: 0;
}

.header-icon-btn:active:not(:disabled) {
  background: rgba(0, 0, 0, 0.06);
}

.header-icon-btn:disabled {
  opacity: 0.25;
  cursor: not-allowed;
}

.header-icon-btn:not(:disabled) svg {
  stroke: var(--accent);
}

.back-btn {
  margin-right: 2px;
  color: var(--accent);
}

.back-btn svg {
  stroke: var(--accent) !important;
}

/* ─── Phrase List ──────────────────────────────────────────────── */
.phrase-list {
  flex: 1;
  padding: 8px 16px 80px;
}

.phrase-item {
  display: flex;
  align-items: center;
  padding: 14px 16px;
  background: var(--surface);
  cursor: pointer;
  transition: background 0.15s;
  gap: 10px;
}

.phrase-item + .phrase-item {
  border-top: 0.5px solid var(--border);
}

.phrase-item:first-child {
  border-radius: var(--radius) var(--radius) 0 0;
}

.phrase-item:last-child {
  border-radius: 0 0 var(--radius) var(--radius);
}

.phrase-item:only-child {
  border-radius: var(--radius);
}

.phrase-item:active {
  background: #ededf0;
}

.phrase-item-text {
  font-size: 15px;
  line-height: 1.4;
  flex: 1;
  color: var(--text);
}

.phrase-item-arrow {
  color: var(--text-secondary);
  font-size: 14px;
  flex-shrink: 0;
  opacity: 0.4;
}

.phrase-item-delete {
  background: none;
  border: none;
  color: var(--record);
  font-size: 18px;
  padding: 4px 6px;
  cursor: pointer;
  flex-shrink: 0;
  opacity: 0.5;
}

.phrase-item-delete:hover {
  opacity: 1;
}

.phrase-item-recorded {
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: var(--green);
  flex-shrink: 0;
}

.empty-message {
  text-align: center;
  color: var(--text-secondary);
  padding: 40px 16px;
  font-size: 15px;
}

/* ─── FAB ──────────────────────────────────────────────────────── */
.fab {
  position: sticky;
  bottom: calc(20px + var(--safe-bottom));
  align-self: center;
  background: var(--accent);
  color: white;
  border: none;
  border-radius: 22px;
  padding: 11px 20px;
  font-size: 15px;
  font-weight: 600;
  cursor: pointer;
  box-shadow: 0 2px 12px rgba(122, 173, 219, 0.3);
  z-index: 5;
  transition: background 0.15s, transform 0.1s;
  margin-top: auto;
}

.fab:active {
  background: var(--accent-hover);
  transform: scale(0.97);
}

/* ─── Detail Screen ────────────────────────────────────────────── */
.detail-content {
  flex: 1;
  padding: 16px 16px;
  display: flex;
  flex-direction: column;
  gap: 16px;
}

.phrase-text {
  font-size: 20px;
  line-height: 1.5;
  font-weight: 600;
  text-align: center;
  padding: 24px 20px;
  background: var(--surface);
  border-radius: var(--radius);
  letter-spacing: -0.3px;
  color: var(--text);
}

/* ─── Audio Section (grouped card) ─────────────────────────────── */
.audio-section {
  background: var(--surface);
  border-radius: var(--radius);
  overflow: hidden;
}

.audio-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 14px 16px;
  min-height: 58px;
}

.audio-row + .audio-row {
  border-top: 0.5px solid var(--border);
}

.audio-row-label {
  display: flex;
  align-items: center;
  gap: 10px;
  font-size: 15px;
  font-weight: 500;
  color: var(--text);
}

.row-icon {
  width: 20px;
  height: 20px;
  display: flex;
  align-items: center;
  justify-content: center;
  color: var(--text-secondary);
  flex-shrink: 0;
}

.row-controls {
  display: flex;
  align-items: center;
  gap: 10px;
}

/* ─── Play buttons ─────────────────────────────────────────────── */
.row-play-btn {
  width: 36px;
  height: 36px;
  border-radius: 50%;
  border: none;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: opacity 0.15s, transform 0.1s;
  position: relative;
  flex-shrink: 0;
}

.row-play-btn:active:not(:disabled) {
  transform: scale(0.92);
}

.row-play-btn:disabled {
  opacity: 0.2;
  cursor: not-allowed;
}

.row-play-btn.accent {
  background: var(--accent);
  color: white;
}

.row-play-btn.accent:active:not(:disabled) {
  background: var(--accent-hover);
}

.row-play-btn.green {
  background: var(--green);
  color: white;
}

.row-play-btn.green:active:not(:disabled) {
  background: var(--green-hover);
}

.row-play-btn.purple {
  background: var(--purple);
  color: white;
}

.row-play-btn.purple:active:not(:disabled) {
  background: var(--purple-hover);
}

/* ─── Voice pick (M/F labels under buttons) ────────────────────── */
.voice-pick {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 3px;
}

.voice-pick-label {
  font-size: 9px;
  font-weight: 600;
  color: var(--text-secondary);
  text-transform: uppercase;
  letter-spacing: 0.3px;
  line-height: 1;
}

/* ─── Record button ────────────────────────────────────────────── */
.row-rec-btn {
  width: 36px;
  height: 36px;
  border-radius: 50%;
  border: none;
  background: var(--record);
  color: white;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: background 0.15s, transform 0.1s;
  flex-shrink: 0;
}

.row-rec-btn:active {
  background: var(--record-hover);
  transform: scale(0.92);
}

.row-rec-btn .icon-stop {
  display: none;
}

.row-rec-btn.recording .icon-rec {
  display: none;
}

.row-rec-btn.recording .icon-stop {
  display: block;
}

.row-rec-btn.recording {
  animation: pulse 1s ease-in-out infinite;
  background: var(--record-hover);
}

.rec-timer {
  font-size: 13px;
  font-weight: 600;
  font-variant-numeric: tabular-nums;
  color: var(--record);
  min-width: 38px;
  text-align: center;
}

/* ─── Subtle button (delete recording) ─────────────────────────── */
.row-subtle-btn {
  width: 28px;
  height: 28px;
  border: none;
  background: transparent;
  color: var(--text-secondary);
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: 50%;
  transition: color 0.15s, background 0.15s;
  flex-shrink: 0;
}

.row-subtle-btn:active {
  color: var(--record);
  background: rgba(217, 141, 135, 0.1);
}

/* ─── Spinner ──────────────────────────────────────────────────── */
.spinner {
  width: 14px;
  height: 14px;
  border: 2px solid rgba(255, 255, 255, 0.3);
  border-top-color: white;
  border-radius: 50%;
  animation: spin 0.6s linear infinite;
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
}

@keyframes spin {
  to { transform: translate(-50%, -50%) rotate(360deg); }
}

@keyframes pulse {
  0%, 100% { opacity: 1; }
  50% { opacity: 0.5; }
}

.clone-hint {
  font-size: 12px;
  font-weight: 400;
  color: var(--text-secondary);
}

.hidden {
  display: none !important;
}

/* ─── Phrase Nav ───────────────────────────────────────────────── */
.phrase-nav {
  display: flex;
  justify-content: space-between;
  gap: 12px;
  margin-top: auto;
  padding-top: 8px;
}

.nav-btn {
  display: flex;
  align-items: center;
  gap: 6px;
  padding: 10px 16px;
  border: none;
  border-radius: var(--radius);
  background: var(--surface);
  color: var(--accent);
  font-size: 14px;
  font-weight: 600;
  cursor: pointer;
  transition: background 0.15s, transform 0.1s;
}

.nav-btn:active:not(:disabled) {
  background: #ededf0;
  transform: scale(0.97);
}

.nav-btn:disabled {
  opacity: 0.25;
  cursor: not-allowed;
}

/* ─── Add Phrase ───────────────────────────────────────────────── */
.add-phrase-content {
  padding: 24px 16px;
  display: flex;
  flex-direction: column;
  gap: 16px;
}

.add-phrase-content label {
  font-size: 13px;
  color: var(--text-secondary);
  font-weight: 500;
  padding-left: 4px;
}

.add-phrase-content input {
  padding: 14px 16px;
  border: none;
  border-radius: var(--radius);
  background: var(--surface);
  font-size: 16px;
  color: var(--text);
  outline: none;
  transition: box-shadow 0.15s;
}

.add-phrase-content input:focus {
  box-shadow: 0 0 0 2px var(--accent);
}

.add-phrase-buttons {
  display: flex;
  gap: 12px;
}

.action-btn {
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 13px 20px;
  border: none;
  border-radius: var(--radius);
  font-size: 15px;
  font-weight: 600;
  cursor: pointer;
  flex: 1;
  transition: opacity 0.15s, transform 0.1s;
}

.action-btn:active {
  opacity: 0.7;
  transform: scale(0.98);
}

.action-btn.primary {
  background: var(--accent);
  color: white;
}

.action-btn.secondary {
  background: #e8e8ed;
  color: var(--text);
}