/* ========== シート管理バー ========== */
.sheet-bar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  flex-wrap: wrap;
  gap: 0.75rem;
  padding: 0.75rem 1rem;
  margin-bottom: 1rem;
}

.sheet-left {
  display: flex;
  align-items: center;
  gap: 0.5rem;
}

.sheet-label {
  font-size: 0.82rem;
  font-weight: 700;
  color: var(--text-sub);
  white-space: nowrap;
}

#sheet-select {
  max-width: 180px;
  padding: 0.35rem 0.6rem;
  font-size: 0.875rem;
}

.sheet-actions {
  display: flex;
  gap: 0.4rem;
  flex-wrap: wrap;
}

.sheet-btn {
  padding: 0.35rem 0.75rem;
  border: 1.5px solid var(--border);
  border-radius: 6px;
  background: var(--surface);
  color: var(--text);
  font-size: 0.82rem;
  font-family: var(--font);
  cursor: pointer;
  transition: background 0.15s, border-color 0.15s;
  white-space: nowrap;
}
.sheet-btn:hover { background: var(--bg); border-color: var(--blue); color: var(--blue); }
.sheet-btn.danger:hover { border-color: var(--red, #ef4444); color: var(--red, #ef4444); }

/* ========== ヒント ========== */
.hint-text {
  font-size: 0.875rem;
  color: var(--text-sub);
  margin-bottom: 1rem;
}

.bracket-ex {
  background: #fef2f2;
  color: #e53e3e;
  border-radius: 4px;
  padding: 1px 6px;
  font-weight: 700;
}

html[data-theme="dark"] .bracket-ex {
  background: #2d1010;
  color: #fc8181;
}

/* ========== 編集アクション ========== */
.edit-actions {
  display: flex;
  gap: 0.5rem;
  flex-wrap: wrap;
  margin-top: 0.75rem;
}

/* ========== 設定バー ========== */
.settings-bar {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 1rem;
  padding: 0.75rem 1rem;
  margin-bottom: 0.75rem;
}

.settings-group {
  display: flex;
  align-items: center;
  gap: 0.4rem;
}

.settings-label {
  font-size: 0.78rem;
  font-weight: 700;
  color: var(--text-sub);
  white-space: nowrap;
}

/* カラーピッカー */
.color-picks {
  display: flex;
  gap: 0.3rem;
}

.color-pick {
  width: 22px;
  height: 22px;
  border-radius: 50%;
  border: 2px solid transparent;
  cursor: pointer;
  transition: transform 0.1s, border-color 0.1s;
}
.color-pick:hover { transform: scale(1.15); }
.color-pick.active {
  border-color: var(--text);
  transform: scale(1.1);
}

/* フォントサイズ */
#font-size-slider {
  width: 80px;
  accent-color: var(--blue);
}

#font-size-val {
  font-size: 0.8rem;
  color: var(--text-sub);
  min-width: 2.5em;
}

/* ショートカットヒント */
.shortcut-hint {
  gap: 0.4rem;
  font-size: 0.78rem;
  color: var(--text-sub);
}

.key-badge {
  display: inline-block;
  background: var(--bg);
  border: 1px solid var(--border);
  border-radius: 4px;
  padding: 0 5px;
  font-size: 0.75rem;
  font-family: monospace;
  color: var(--text);
}

/* ========== 操作コントロール ========== */
.practice-controls {
  display: flex;
  align-items: center;
  justify-content: space-between;
  flex-wrap: wrap;
  gap: 0.5rem;
  margin-bottom: 0.75rem;
}

.ctrl-left {
  display: flex;
  gap: 0.5rem;
  flex-wrap: wrap;
}

.progress-info {
  font-size: 0.875rem;
  font-weight: 700;
  color: var(--text-sub);
  white-space: nowrap;
}

/* ========== 練習エリア ========== */
.practice-area {
  line-height: 2.4;
  word-break: break-all;
  min-height: 120px;
}

/* ========== 隠し語 ========== */
.anki-word {
  display: inline-block;
  background: var(--anki-color, #e53e3e);
  color: var(--anki-color, #e53e3e);
  border-radius: 3px;
  padding: 0 5px;
  cursor: pointer;
  user-select: none;
  transition: color 0.1s;
  min-width: 1.4em;
  text-align: center;
}

/* 表示状態（クリックで切り替え） */
.anki-word:not(.hidden) {
  color: #fff;
}