/* ===== テーマ変数（クリーム＋テラコッタ / ハンドオフ準拠） ===== */
:root {
  --color-bg: #faf8f5;
  --color-surface: #ffffff;
  --color-text: #2e2a24;
  --color-text-2: #6b6258;
  --color-muted: #9a9085;
  --color-border: rgba(46, 42, 36, 0.1);
  --color-border-soft: rgba(46, 42, 36, 0.08);
  --color-accent: #c8643c;
  --color-accent-strong: #a64f2d;
  --color-accent-text: #faf8f5;
  --color-on-accent-muted: rgba(250, 248, 245, 0.7);
  --color-star: #c8643c;
  --color-pill-bg: #f0ebe3;
  --color-pill-text: #6b6258;
  --color-amount: #c8643c;
  --color-danger: #b3402a;
  --color-stripe-a: #ece3d4;
  --color-stripe-b: #e3d8c6;
  --font-display: "Zen Kaku Gothic New", -apple-system, BlinkMacSystemFont,
    "Hiragino Sans", sans-serif;
  --font-ui: "Zen Kaku Gothic New", -apple-system, BlinkMacSystemFont,
    "Hiragino Sans", sans-serif;
  --radius: 16px;
  --shadow: 0 1px 2px rgba(46, 42, 36, 0.05);
}

/* ダーク（暖色を保ったまま沈める） */
:root[data-theme="dark"] {
  --color-bg: #2a241d;
  --color-surface: #36302a;
  --color-text: #f0e9e0;
  --color-text-2: #c3b9ab;
  --color-muted: #a89e90;
  --color-border: rgba(240, 233, 224, 0.12);
  --color-border-soft: rgba(240, 233, 224, 0.08);
  --color-accent: #e07a4e;
  --color-accent-strong: #c8643c;
  --color-accent-text: #1c1814;
  --color-on-accent-muted: rgba(28, 24, 20, 0.55);
  --color-star: #e07a4e;
  --color-pill-bg: #322a22;
  --color-pill-text: #cabba9;
  --color-amount: #e07a4e;
  --color-danger: #e0795f;
  --color-stripe-a: #3a332c;
  --color-stripe-b: #423a31;
  --shadow: 0 1px 2px rgba(0, 0, 0, 0.3);
}

@media (prefers-color-scheme: dark) {
  :root:not([data-theme]) {
    --color-bg: #1c1814;
    --color-surface: #26211b;
    --color-text: #f0e9e0;
    --color-text-2: #c3b9ab;
    --color-muted: #a89e90;
    --color-border: rgba(240, 233, 224, 0.12);
    --color-border-soft: rgba(240, 233, 224, 0.08);
    --color-accent: #e07a4e;
    --color-accent-strong: #c8643c;
    --color-accent-text: #1c1814;
    --color-on-accent-muted: rgba(28, 24, 20, 0.55);
    --color-star: #e07a4e;
    --color-pill-bg: #322a22;
    --color-pill-text: #cabba9;
    --color-amount: #e07a4e;
    --color-danger: #e0795f;
    --color-stripe-a: #322a22;
    --color-stripe-b: #3a3026;
    --shadow: 0 1px 2px rgba(0, 0, 0, 0.3);
  }
}

/* ===== 配色プリセット（テラコッタは上の :root が既定） ===== */
/* 青・ティール・緑で共通の中間色（ライト） */
:root[data-palette="blue"],
:root[data-palette="teal"],
:root[data-palette="green"] {
  --color-bg: #f4f5f7;
  --color-surface: #ffffff;
  --color-text: #1c1e21;
  --color-text-2: #565d66;
  --color-muted: #868d97;
  --color-border: rgba(28, 30, 33, 0.12);
  --color-border-soft: rgba(28, 30, 33, 0.07);
  --color-danger: #c0392b;
  --color-stripe-a: #e5e8ec;
  --color-stripe-b: #d9dde3;
  --shadow: 0 1px 2px rgba(28, 30, 33, 0.06);
}

/* 共通の中間色（ダーク） */
:root[data-palette="blue"][data-theme="dark"],
:root[data-palette="teal"][data-theme="dark"],
:root[data-palette="green"][data-theme="dark"] {
  --color-bg: #16191e;
  --color-surface: #20242b;
  --color-text: #e8eaed;
  --color-text-2: #aab0b9;
  --color-muted: #828993;
  --color-border: rgba(232, 234, 237, 0.12);
  --color-border-soft: rgba(232, 234, 237, 0.07);
  --color-danger: #e0795f;
  --color-stripe-a: #2a2f37;
  --color-stripe-b: #323841;
  --shadow: 0 1px 2px rgba(0, 0, 0, 0.3);
}

/* オーシャンブルー */
:root[data-palette="blue"] {
  --color-accent: #185fa5;
  --color-accent-strong: #0c447c;
  --color-accent-text: #ffffff;
  --color-on-accent-muted: rgba(255, 255, 255, 0.7);
  --color-star: #185fa5;
  --color-pill-bg: #e6f1fb;
  --color-pill-text: #0c447c;
  --color-amount: #185fa5;
}
:root[data-palette="blue"][data-theme="dark"] {
  --color-accent: #85b7eb;
  --color-accent-strong: #6ea6e8;
  --color-accent-text: #0a1626;
  --color-on-accent-muted: rgba(10, 22, 38, 0.55);
  --color-star: #85b7eb;
  --color-pill-bg: #0d2742;
  --color-pill-text: #bcd8f4;
  --color-amount: #85b7eb;
}

/* ティール */
:root[data-palette="teal"] {
  --color-accent: #0f6e56;
  --color-accent-strong: #085041;
  --color-accent-text: #ffffff;
  --color-on-accent-muted: rgba(255, 255, 255, 0.7);
  --color-star: #0f6e56;
  --color-pill-bg: #e1f5ee;
  --color-pill-text: #085041;
  --color-amount: #0f6e56;
}
:root[data-palette="teal"][data-theme="dark"] {
  --color-accent: #5dcaa5;
  --color-accent-strong: #1d9e75;
  --color-accent-text: #04342c;
  --color-on-accent-muted: rgba(4, 52, 44, 0.55);
  --color-star: #5dcaa5;
  --color-pill-bg: #083129;
  --color-pill-text: #9fe1cb;
  --color-amount: #5dcaa5;
}

/* フォレストグリーン */
:root[data-palette="green"] {
  --color-accent: #3d7a14;
  --color-accent-strong: #27500a;
  --color-accent-text: #ffffff;
  --color-on-accent-muted: rgba(255, 255, 255, 0.7);
  --color-star: #3d7a14;
  --color-pill-bg: #eaf3de;
  --color-pill-text: #27500a;
  --color-amount: #3d7a14;
}
:root[data-palette="green"][data-theme="dark"] {
  --color-accent: #97c459;
  --color-accent-strong: #639922;
  --color-accent-text: #122905;
  --color-on-accent-muted: rgba(18, 41, 5, 0.55);
  --color-star: #97c459;
  --color-pill-bg: #1c3a0e;
  --color-pill-text: #c0dd97;
  --color-amount: #97c459;
}

* {
  box-sizing: border-box;
  margin: 0;
  padding: 0;
}

[hidden] {
  display: none !important;
}

body {
  font-family: var(--font-ui);
  background: var(--color-bg);
  color: var(--color-text);
  line-height: 1.6;
  padding-bottom: 96px;
}

/* ===== ヘッダー（クリーム地・帯なし） ===== */
.app-header {
  position: sticky;
  top: 0;
  z-index: 10;
  background: var(--color-bg);
  border-bottom: 1px solid var(--color-border-soft);
  padding: 14px 22px 0;
}

.app-header-bar {
  display: flex;
  align-items: center;
  justify-content: space-between;
}

.app-header h1 {
  font-family: var(--font-display);
  font-weight: 600;
  font-size: 1.6rem;
  color: var(--color-text);
}

.header-actions {
  display: flex;
  align-items: center;
  gap: 4px;
}

.theme-toggle {
  background: transparent;
  border: none;
  color: var(--color-text-2);
  padding: 6px;
  border-radius: 8px;
  cursor: pointer;
  display: inline-flex;
  align-items: center;
  justify-content: center;
}

.theme-toggle:active {
  transform: scale(0.92);
}

.theme-toggle svg {
  width: 22px;
  height: 22px;
}

.tabs {
  display: flex;
  gap: 6px;
  margin-top: 12px;
}

.tab {
  flex: 1;
  padding: 8px 4px 10px;
  border: none;
  background: none;
  font-family: var(--font-ui);
  font-size: 0.95rem;
  color: var(--color-muted);
  border-bottom: 2px solid transparent;
  cursor: pointer;
}

.tab.is-active {
  color: var(--color-text);
  border-bottom-color: var(--color-accent);
  font-weight: 600;
}

/* ===== 画面の出し分け ===== */
.app-main {
  max-width: 640px;
  margin: 0 auto;
  padding: 16px 22px 22px;
}

.view {
  display: none;
}

.view.is-active {
  display: block;
}

/* ===== リスト / マップ 切替 ===== */
.view-toggle {
  display: inline-flex;
  background: var(--color-pill-bg);
  border-radius: 22px;
  padding: 3px;
  margin-bottom: 16px;
}

.seg {
  border: none;
  background: none;
  padding: 6px 18px;
  border-radius: 20px;
  font-family: var(--font-ui);
  font-size: 0.9rem;
  color: var(--color-muted);
  cursor: pointer;
}

.seg.is-active {
  background: var(--color-surface);
  color: var(--color-text);
  box-shadow: 0 1px 3px rgba(46, 42, 36, 0.12);
}

.list-map {
  height: 70vh;
  border-radius: 16px;
  overflow: hidden;
  border: 1px solid var(--color-border);
}

/* ===== 絞り込み ===== */
.filters {
  display: flex;
  gap: 12px;
  margin-bottom: 18px;
}

.filters label {
  flex: 1;
  display: flex;
  flex-direction: column;
  font-size: 0.78rem;
  color: var(--color-muted);
  gap: 4px;
}

.filters select {
  padding: 8px;
  border: 1px solid var(--color-border);
  border-radius: 10px;
  background: var(--color-surface);
  color: var(--color-text);
  font-family: var(--font-ui);
  font-size: 1rem;
}

/* ===== 写真グリッド（一覧） ===== */
.photo-grid {
  list-style: none;
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 14px;
}

.photo-card {
  cursor: pointer;
}

.photo-thumb {
  position: relative;
  aspect-ratio: 3 / 4;
  border-radius: var(--radius);
  overflow: hidden;
  background: repeating-linear-gradient(
    135deg,
    var(--color-stripe-a),
    var(--color-stripe-a) 8px,
    var(--color-stripe-b) 8px,
    var(--color-stripe-b) 16px
  );
}

.photo-thumb img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}

.photo-placeholder {
  position: absolute;
  left: 50%;
  top: 50%;
  transform: translate(-50%, -50%);
  font-family: "Courier New", monospace;
  font-size: 0.56rem;
  letter-spacing: 1px;
  color: var(--color-muted);
  white-space: nowrap;
}

.photo-genre {
  position: absolute;
  left: 10px;
  bottom: 10px;
  padding: 2px 8px;
  border-radius: 20px;
  background: rgba(46, 42, 36, 0.78);
  color: #faf8f5;
  font-size: 0.56rem;
  font-weight: 600;
  letter-spacing: 0.5px;
}

.photo-meta {
  padding: 9px 2px 0;
}

.photo-name {
  font-family: var(--font-display);
  font-weight: 600;
  font-size: 0.95rem;
  line-height: 1.3;
  color: var(--color-text);
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.photo-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-top: 4px;
  gap: 6px;
}

.photo-stars {
  color: var(--color-star);
  font-size: 0.78rem;
  letter-spacing: 1px;
  white-space: nowrap;
}

.photo-price {
  font-size: 0.72rem;
  font-weight: 500;
  color: var(--color-muted);
  white-space: nowrap;
}

/* ===== 縦リストのカード（行きたい） ===== */
.record-list {
  list-style: none;
  display: flex;
  flex-direction: column;
  gap: 10px;
}

.record-card {
  background: var(--color-surface);
  border: 1px solid var(--color-border-soft);
  border-radius: var(--radius);
  box-shadow: var(--shadow);
  padding: 12px 14px;
  cursor: pointer;
  display: flex;
  gap: 12px;
  align-items: flex-start;
}

.record-card:active {
  filter: brightness(0.99);
}

.record-icon {
  width: 38px;
  height: 38px;
  flex-shrink: 0;
  border-radius: 50%;
  background: var(--color-pill-bg);
  color: var(--color-accent);
  display: flex;
  align-items: center;
  justify-content: center;
}

.record-icon svg {
  width: 20px;
  height: 20px;
}

.record-body {
  flex: 1;
  min-width: 0;
  display: flex;
  flex-direction: column;
  gap: 5px;
}

.record-card-top {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  gap: 8px;
}

.record-name {
  font-family: var(--font-display);
  font-weight: 600;
  font-size: 1.05rem;
}

.record-date {
  font-size: 0.85rem;
  color: var(--color-muted);
  white-space: nowrap;
}

.record-card-mid {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 8px;
}

.record-category {
  font-size: 0.72rem;
  font-weight: 600;
  color: var(--color-pill-text);
  background: var(--color-pill-bg);
  padding: 2px 10px;
  border-radius: 20px;
}

.record-stars {
  color: var(--color-star);
  letter-spacing: 2px;
}

.record-amount {
  font-size: 0.9rem;
  font-weight: 600;
  color: var(--color-amount);
}

.record-memo {
  font-size: 0.9rem;
  color: var(--color-text-2);
}

.record-link {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  align-self: flex-start;
  font-size: 0.85rem;
  color: var(--color-accent);
  text-decoration: none;
  max-width: 100%;
}

.record-link span {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.record-link svg {
  width: 15px;
  height: 15px;
  flex-shrink: 0;
}

.record-link:active {
  text-decoration: underline;
}

/* ===== 空のときの案内 ===== */
.empty-message {
  text-align: center;
  color: var(--color-muted);
  padding: 48px 16px;
}

/* ===== ＋ボタン（FAB） ===== */
.fab {
  position: fixed;
  right: 22px;
  bottom: 24px;
  width: 56px;
  height: 56px;
  border-radius: 50%;
  border: none;
  background: var(--color-accent);
  color: var(--color-accent-text);
  font-size: 2rem;
  line-height: 1;
  box-shadow: 0 6px 16px -4px rgba(200, 100, 60, 0.55);
  cursor: pointer;
  z-index: 20;
}

.fab:active {
  transform: scale(0.95);
}

/* ===== 集計画面 ===== */
.stat-cards {
  display: flex;
  gap: 12px;
  margin-bottom: 24px;
}

.stat-card {
  flex: 1;
  background: var(--color-surface);
  border: 1px solid var(--color-border-soft);
  border-radius: var(--radius);
  box-shadow: var(--shadow);
  padding: 20px;
  text-align: center;
}

.stat-label {
  display: block;
  color: var(--color-muted);
  font-size: 0.9rem;
}

.stat-value {
  font-family: var(--font-display);
  font-size: 2.4rem;
  font-weight: 600;
  color: var(--color-amount);
}

.stat-heading {
  font-family: var(--font-display);
  font-weight: 600;
  font-size: 1.05rem;
  margin-bottom: 8px;
}

.stat-list {
  list-style: none;
  background: var(--color-surface);
  border: 1px solid var(--color-border-soft);
  border-radius: var(--radius);
  box-shadow: var(--shadow);
  margin-bottom: 24px;
  overflow: hidden;
}

.stat-list li {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 8px;
  padding: 12px 16px;
  border-bottom: 1px solid var(--color-border-soft);
}

.stat-list li:last-child {
  border-bottom: none;
}

.stat-list .stat-empty {
  color: var(--color-muted);
  justify-content: center;
}

.stat-list .stat-count {
  color: var(--color-muted);
}

.stat-list .stat-clickable {
  cursor: pointer;
}

.stat-list .stat-clickable:active {
  filter: brightness(0.99);
}

.stat-fav-name {
  display: flex;
  align-items: center;
  gap: 8px;
  min-width: 0;
}

.stat-fav-name svg {
  width: 18px;
  height: 18px;
  color: var(--color-accent);
  flex-shrink: 0;
}

/* データ（バックアップ） */
.data-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  margin-bottom: 10px;
}

.data-msg {
  font-size: 0.82rem;
  color: var(--color-muted);
  line-height: 1.7;
}

.data-confirm {
  display: inline-flex;
  gap: 8px;
  margin-left: 4px;
}

/* ===== フォーム（モーダル） ===== */
.overlay {
  position: fixed;
  inset: 0;
  background: rgba(46, 42, 36, 0.4);
  display: flex;
  align-items: flex-end;
  justify-content: center;
  z-index: 30;
}

.record-form {
  background: var(--color-surface);
  width: 100%;
  max-width: 640px;
  max-height: 90vh;
  overflow-y: auto;
  -webkit-overflow-scrolling: touch;
  overscroll-behavior: contain;
  border-radius: 24px 24px 0 0;
  padding: 22px 20px calc(22px + env(safe-area-inset-bottom));
  display: flex;
  flex-direction: column;
  gap: 16px;
  transition: transform 0.25s ease;
}

.record-form.dragging {
  transition: none;
}

.sheet-handle {
  width: 40px;
  height: 4px;
  border-radius: 999px;
  background: var(--color-border);
  margin: -8px auto 2px;
  flex-shrink: 0;
}

.record-form h2 {
  font-family: var(--font-display);
  font-weight: 600;
  font-size: 1.3rem;
}

.record-form label {
  display: flex;
  flex-direction: column;
  gap: 6px;
  font-size: 0.9rem;
  color: var(--color-text-2);
}

.record-form input[type="text"],
.record-form input[type="date"],
.record-form input[type="number"],
.record-form input[type="url"],
.record-form select,
.record-form textarea {
  padding: 10px;
  border: 1px solid var(--color-border);
  border-radius: 10px;
  font-size: 1rem;
  font-family: var(--font-ui);
  color: var(--color-text);
  background: var(--color-surface);
}

.record-form textarea {
  resize: vertical;
}

.required {
  color: var(--color-danger);
  font-size: 0.7rem;
}

/* 写真フィールド */
.photo-field {
  display: flex;
  flex-direction: column;
  gap: 8px;
}

.photo-preview {
  position: relative;
  border-radius: 12px;
  overflow: hidden;
  aspect-ratio: 4 / 3;
  background: repeating-linear-gradient(
    135deg,
    var(--color-stripe-a),
    var(--color-stripe-a) 8px,
    var(--color-stripe-b) 8px,
    var(--color-stripe-b) 16px
  );
}

.photo-preview img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}

.photo-remove {
  position: absolute;
  top: 8px;
  right: 8px;
  width: 30px;
  height: 30px;
  border-radius: 50%;
  border: none;
  background: rgba(46, 42, 36, 0.7);
  color: #fff;
  font-size: 18px;
  line-height: 1;
  cursor: pointer;
}

.photo-add {
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 14px;
  border: 1px dashed var(--color-border);
  border-radius: 12px;
  color: var(--color-accent);
  cursor: pointer;
  font-size: 0.95rem;
}

/* 場所（地図） */
.loc-field {
  display: flex;
  flex-direction: column;
  gap: 8px;
}

.loc-label {
  font-size: 0.9rem;
  color: var(--color-text-2);
}

.loc-search {
  display: flex;
  gap: 8px;
  align-items: stretch;
}

.loc-search input {
  flex: 1;
  min-width: 0;
  padding: 10px;
  border: 1px solid var(--color-border);
  border-radius: 10px;
  font-size: 1rem;
  font-family: var(--font-ui);
  color: var(--color-text);
  background: var(--color-surface);
}

.loc-search .btn {
  flex-shrink: 0;
  white-space: nowrap;
}

.loc-results {
  list-style: none;
  border: 1px solid var(--color-border-soft);
  border-radius: 12px;
  overflow: hidden;
  max-height: 170px;
  overflow-y: auto;
}

.loc-results li button {
  width: 100%;
  text-align: left;
  background: var(--color-surface);
  border: none;
  border-bottom: 1px solid var(--color-border-soft);
  padding: 10px 12px;
  font-family: var(--font-ui);
  font-size: 0.9rem;
  color: var(--color-text);
  cursor: pointer;
}

.loc-results li:last-child button {
  border-bottom: none;
}

.loc-result-msg {
  padding: 10px 12px;
  color: var(--color-muted);
  font-size: 0.85rem;
}

.form-map {
  height: 180px;
  border-radius: 12px;
  overflow: hidden;
  border: 1px solid var(--color-border);
}

.loc-actions {
  display: flex;
  gap: 8px;
}

.btn-sm {
  padding: 7px 12px;
  font-size: 0.85rem;
}

.loc-hint {
  font-size: 0.78rem;
  color: var(--color-muted);
}

/* Leaflet のリンク類はテーマ色に寄せる */
.leaflet-container a {
  color: var(--color-accent);
}

/* マップのピン・ポップアップ */
.map-popup {
  display: flex;
  flex-direction: column;
  gap: 6px;
  font-family: var(--font-ui);
  min-width: 120px;
}

.map-popup strong {
  font-size: 0.95rem;
  color: var(--color-text);
}

.map-popup-meta {
  font-size: 0.8rem;
  color: var(--color-star);
}

.map-popup-edit {
  border: none;
  border-radius: 8px;
  background: var(--color-accent);
  color: var(--color-accent-text);
  font-family: var(--font-ui);
  font-size: 0.85rem;
  padding: 6px 10px;
  cursor: pointer;
}

/* 評価の★入力 */
.star-input {
  display: flex;
  gap: 4px;
}

.star-input button {
  background: none;
  border: none;
  font-size: 2rem;
  line-height: 1;
  color: var(--color-border);
  cursor: pointer;
  padding: 0;
}

.star-input button.is-on {
  color: var(--color-star);
}

/* ボタン類 */
.form-actions {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 8px;
  margin-top: 4px;
}

.form-actions-right {
  display: flex;
  gap: 8px;
  margin-left: auto;
}

.btn {
  padding: 11px 18px;
  border: none;
  border-radius: 12px;
  font-family: var(--font-ui);
  font-size: 1rem;
  cursor: pointer;
}

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

.btn-ghost {
  background: var(--color-pill-bg);
  color: var(--color-text);
}

.btn-danger {
  background: none;
  color: var(--color-danger);
}

.btn-block {
  width: 100%;
}

.del-confirm {
  display: inline-flex;
  gap: 6px;
  align-items: center;
}

/* ===== カテゴリ管理 ===== */
.cat-list {
  list-style: none;
  border: 1px solid var(--color-border-soft);
  border-radius: var(--radius);
  overflow-y: auto;
  -webkit-overflow-scrolling: touch;
  overscroll-behavior: contain;
  max-height: 38vh;
}

.cat-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
  padding: 10px 14px;
  border-bottom: 1px solid var(--color-border-soft);
}

.cat-row:last-child {
  border-bottom: none;
}

.cat-row-left {
  display: flex;
  align-items: center;
  gap: 10px;
  color: var(--color-text);
}

.cat-mini {
  width: 30px;
  height: 30px;
  flex-shrink: 0;
  border-radius: 50%;
  background: var(--color-pill-bg);
  color: var(--color-accent);
  display: flex;
  align-items: center;
  justify-content: center;
}

.cat-mini svg {
  width: 17px;
  height: 17px;
}

.cat-row-actions {
  display: flex;
  align-items: center;
  gap: 4px;
  flex-shrink: 0;
}

.cat-edit {
  background: none;
  border: none;
  color: var(--color-accent);
  font-size: 0.85rem;
  cursor: pointer;
  padding: 4px 8px;
}

.cat-del {
  background: none;
  border: none;
  color: var(--color-danger);
  font-size: 0.85rem;
  cursor: pointer;
  padding: 4px 8px;
}

.cat-del-confirm {
  border: none;
  border-radius: 8px;
  background: var(--color-danger);
  color: #fff;
  font-size: 0.85rem;
  cursor: pointer;
  padding: 5px 10px;
}

.cat-del-cancel {
  background: none;
  border: none;
  color: var(--color-muted);
  font-size: 0.85rem;
  cursor: pointer;
  padding: 5px 8px;
}

.cat-fixed {
  font-size: 0.75rem;
  color: var(--color-muted);
}

.cat-add {
  display: flex;
  flex-direction: column;
  gap: 10px;
  border-top: 1px solid var(--color-border-soft);
  padding-top: 16px;
}

.cat-add-title {
  font-family: var(--font-display);
  font-weight: 600;
  font-size: 1rem;
}

.cat-add input {
  padding: 10px;
  border: 1px solid var(--color-border);
  border-radius: 10px;
  font-size: 1rem;
  font-family: var(--font-ui);
  color: var(--color-text);
  background: var(--color-surface);
}

.cat-add-label {
  font-size: 0.8rem;
  color: var(--color-muted);
}

.icon-picker {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(44px, 1fr));
  gap: 8px;
}

.icon-opt {
  aspect-ratio: 1 / 1;
  border: 1px solid var(--color-border);
  border-radius: 12px;
  background: var(--color-surface);
  color: var(--color-muted);
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
}

.icon-opt svg {
  width: 22px;
  height: 22px;
}

.icon-opt.is-selected {
  border-color: var(--color-accent);
  background: var(--color-pill-bg);
  color: var(--color-accent);
}

.cat-add-actions {
  display: flex;
  gap: 8px;
}

/* ===== 配色ピッカー ===== */
.palette-options {
  display: flex;
  flex-direction: column;
  gap: 8px;
}

.palette-opt {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 12px 14px;
  border: 1px solid var(--color-border);
  border-radius: 12px;
  background: var(--color-surface);
  color: var(--color-text);
  font-family: var(--font-ui);
  font-size: 1rem;
  cursor: pointer;
}

.palette-opt.is-selected {
  border: 2px solid var(--color-accent);
}

.palette-swatch {
  width: 26px;
  height: 26px;
  border-radius: 50%;
  flex-shrink: 0;
  border: 1px solid var(--color-border-soft);
}