.input-error {
  border: 1px solid #ff4d4f !important;
  background-color: rgba(255, 77, 79, 0.06) !important;
}

/* ============================================================
   フォームコントロール
   ============================================================ */
.search-input,
.filter-select,
.setting-input {
  background: var(--bg-elevated);
  border: 1px solid var(--border);
  border-radius: var(--radius-sm);
  color: var(--text-primary);
  font-family: inherit;
  font-size: 0.9rem;
  padding: 10px 14px;
  transition: border-color var(--transition);
  width: 100%;
  appearance: none;
  -webkit-appearance: none;
}

.search-input:focus,
.filter-select:focus,
.setting-input:focus {
  outline: none;
  border-color: var(--amber);
  box-shadow: 0 0 0 3px var(--amber-dim);
}

.filter-select {
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 12 12'%3E%3Cpath fill='%23A0A8B8' d='M6 8L1 3h10z'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: right 12px center;
  padding-right: 32px;
}

/* ============================================================
   ボタン
   ============================================================ */
.btn-primary,
.btn-secondary,
.btn-ghost,
.btn-danger {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
  font-family: inherit;
  font-weight: 700;
  font-size: 0.9rem;
  border: none;
  border-radius: var(--radius-sm);
  padding: 12px 20px;
  cursor: pointer;
  transition: all var(--transition);
  text-align: center;
  white-space: nowrap;
}

.btn-primary {
  background: linear-gradient(135deg, var(--amber), #e0921a);
  color: #0D0D12;
  box-shadow: 0 4px 14px rgba(245, 166, 35, 0.35);
}

.btn-primary:hover {
  transform: translateY(-1px);
  box-shadow: 0 6px 20px rgba(245, 166, 35, 0.5);
}

.btn-primary:active {
  transform: translateY(0);
}

.btn-secondary {
  background: var(--bg-elevated);
  color: var(--text-primary);
  border: 1px solid var(--border);
}

.btn-secondary:hover {
  border-color: var(--amber);
  color: var(--amber);
}

.btn-ghost {
  background: transparent;
  color: var(--text-secondary);
  border: 1px solid var(--border);
}

.btn-ghost:hover {
  color: var(--text-primary);
  border-color: var(--text-secondary);
}

.btn-danger {
  background: rgba(224, 85, 85, 0.15);
  color: var(--danger);
  border: 1px solid rgba(224, 85, 85, 0.2);
}

.btn-danger:hover {
  background: rgba(224, 85, 85, 0.25);
}

.btn-icon {
  background: var(--bg-elevated);
  border: 1px solid var(--border);
  border-radius: var(--radius-sm);
  color: var(--text-secondary);
  cursor: pointer;
  font-size: 0.9rem;
  padding: 6px 10px;
  transition: all var(--transition);
}

.btn-icon:hover {
  border-color: var(--amber);
  color: var(--amber);
}

.btn-icon.btn-danger:hover {
  border-color: var(--danger);
  color: var(--danger);
}

.fab {
  position: fixed;
  bottom: calc(var(--nav-height) + 16px);
  right: 20px;
  width: 54px;
  height: 54px;
  border-radius: 50%;
  background: linear-gradient(135deg, var(--amber), #e0921a);
  border: none;
  color: #0D0D12;
  font-size: 1.6rem;
  font-weight: 700;
  cursor: pointer;
  box-shadow: 0 4px 20px rgba(245, 166, 35, 0.45);
  display: flex;
  align-items: center;
  justify-content: center;
  transition: transform var(--transition), box-shadow var(--transition);
  z-index: 100;
}

.fab:hover {
  transform: scale(1.1) rotate(45deg);
  box-shadow: 0 6px 28px rgba(245, 166, 35, 0.6);
}

/* ============================================================
   スピナー
   ============================================================ */
.spinner {
  width: 18px;
  height: 18px;
  border: 2px solid var(--border);
  border-top-color: var(--amber);
  border-radius: 50%;
  animation: spin 0.8s linear infinite;
  display: inline-block;
}

@keyframes spin {
  to {
    transform: rotate(360deg);
  }
}

/* ============================================================
   カスタムモーダル（マスタ同期完了画面のデザインに統一）
   ============================================================ */
.custom-modal-overlay {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background: rgba(0, 0, 0, 0.7);
  /* 暗めのオーバーレイ */
  z-index: 100000;
  display: flex;
  align-items: center;
  justify-content: center;
  animation: fadeIn 0.2s ease-out;
}

.custom-modal {
  background: #24262b;
  /* 3枚目に合わせたダークグレー */
  border-radius: 16px;
  width: 90%;
  max-width: 360px;
  padding: 32px 24px;
  box-shadow: 0 10px 30px rgba(0, 0, 0, 0.6);
  color: #ffffff;
  text-align: center;
  /* 3枚目と同じく中央揃え */
  animation: slideUp 0.2s ease-out;
}

.custom-modal-icon {
  font-size: 56px;
  line-height: 1;
  margin-bottom: 16px;
}

.custom-modal-title {
  font-size: 1.25rem;
  font-weight: bold;
  margin-bottom: 12px;
}

.custom-modal-body {
  font-size: 0.9rem;
  color: #a0a0a5;
  margin-bottom: 24px;
  line-height: 1.5;
}

/* ボタンエリア（縦並び・横並び両対応） */
.custom-modal-actions {
  display: flex;
  flex-direction: column;
  gap: 12px;
}

.custom-modal-actions.row {
  flex-direction: row;
  justify-content: center;
}

/* ボタン自体のデザイン */
.custom-modal-btn {
  width: 100%;
  padding: 14px;
  border-radius: 8px;
  font-weight: bold;
  font-size: 1rem;
  border: none;
  cursor: pointer;
  transition: all 0.2s;
}

.custom-modal-btn.primary {
  background: #f5a623;
  /* 3枚目のオレンジ色 */
  color: #1a1a1a;
}

.custom-modal-btn.secondary {
  background: #3a3d45;
  color: #fff;
}

/* 履歴を選ぶためのリストボタン */
.history-choice-btn {
  display: block;
  width: 100%;
  text-align: left;
  padding: 14px 16px;
  margin-bottom: 8px;
  background: #2f323a;
  color: #fff;
  border: 1px solid #444;
  border-radius: 8px;
  cursor: pointer;
  font-size: 0.9rem;
  transition: all 0.2s;
}

.history-choice-btn:hover {
  border-color: #f5a623;
  background: rgba(245, 166, 35, 0.1);
}

@keyframes fadeIn {
  from {
    opacity: 0;
  }

  to {
    opacity: 1;
  }
}

@keyframes slideUp {
  from {
    transform: translateY(20px);
    opacity: 0;
  }

  to {
    transform: translateY(0);
    opacity: 1;
  }
}

/* ============================================================
   カスタムセレクト（OS標準の白い画面を上書きするUI）
   ============================================================ */
.custom-select-wrapper {
  position: relative;
  width: 100%;
  user-select: none;
}

/* プルダウンのボタン部分 */
/* プルダウンのボタン部分（一行固定・省略対応） */
.custom-select-trigger {
  display: flex;
  justify-content: space-between;
  align-items: center;
  width: 100%;
  height: 40px;
  /* ★高さをピシッと40pxに固定 */
  box-sizing: border-box;
  padding: 8px 10px;
  /* ★左右の余白を12pxから10pxに詰めて文字幅を稼ぐ */
  background-color: #24262b;
  border: 1px solid #444;
  border-radius: 6px;
  color: #ddd;
  font-size: 0.85rem;
  cursor: pointer;
  transition: border-color 0.15s;

  /* ★追加：改行を許さず、はみ出た分は「...」にする魔法 */
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.custom-select-trigger:hover {
  border-color: #f5a623;
}

.custom-select-trigger::after {
  content: '▼';
  font-size: 0.6rem;
  color: #aaa;
  transition: transform 0.2s;
}

.custom-select-wrapper.open .custom-select-trigger::after {
  transform: rotate(180deg);
}

.custom-options {
  position: absolute;
  top: 100%;
  left: 0;
  right: 0;
  background: #24262b;
  border: 1px solid #444;
  border-radius: 6px;
  box-shadow: 0 10px 25px rgba(0, 0, 0, 0.7);
  margin-top: 4px;
  z-index: 99999;
  opacity: 0;
  visibility: hidden;
  transform: translateY(-10px);
  transition: all 0.2s ease;
  max-height: 300px;
  overflow-y: auto;
}

.custom-select-wrapper.open .custom-options {
  opacity: 1;
  visibility: visible;
  transform: translateY(0);
}

.custom-option {
  padding: 10px 12px;
  font-size: 0.85rem;
  color: #ddd;
  cursor: pointer;
  border-bottom: 1px solid #333;
  transition: background 0.15s;
}

.custom-option:last-child {
  border-bottom: none;
}

.custom-option:hover,
.custom-option.selected {
  background: rgba(245, 166, 35, 0.15);
  color: #f5a623;
  font-weight: bold;
}

.hidden-native-select {
  display: none !important;
}

/* ============================================================
   カスタムサジェスト（銘柄検索候補用の専用デザイン：透明化バグ修正）
   ============================================================ */
.custom-suggest-list {
  position: absolute;
  top: 100%;
  left: 0;
  right: 0;
  background: #24262b;
  border: 1px solid #444;
  border-radius: 6px;
  box-shadow: 0 10px 30px rgba(0, 0, 0, 0.8);
  margin-top: 4px;
  z-index: 99999;
  max-height: 220px;
  overflow-y: auto;
  display: none;
  /* JSでコントロールするため初期は非表示 */
}

.custom-suggest-list .custom-option {
  padding: 10px 12px;
  font-size: 0.85rem;
  color: #ddd;
  cursor: pointer;
  border-bottom: 1px solid #333;
  transition: background 0.15s;
}

.custom-suggest-list .custom-option:last-child {
  border-bottom: none;
}

.custom-suggest-list .custom-option:hover {
  background: rgba(245, 166, 35, 0.15);
  color: #f5a623;
  font-weight: bold;
}

/* ============================================================
   ネイティブ・ダークモード（OSの白いプルダウンを強制的に黒くする）
   ============================================================ */
select,
.setting-input,
.filter-select {
  color-scheme: dark;
  /* これを入れるだけでMac/iOSの標準UIが黒になります！ */
}

/* ============================================================
   独自カスタムセレクト（OS標準selectを置き換えるかっこいいUI）
   ============================================================ */
.custom-select-wrapper {
  position: relative;
  width: 100%;
}

/* 元のselectは完全に隠す */
.custom-select-wrapper select {
  display: none !important;
}

/* プルダウンのボタン部分 */
.custom-select-trigger {
  display: flex;
  justify-content: space-between;
  align-items: center;
  width: 100%;
  padding: 8px 12px;
  background-color: #24262b;
  /* 黒背景 */
  border: 1px solid #444;
  /* 境界線 */
  border-radius: 6px;
  color: #ddd;
  /* 文字色 */
  font-size: 0.85rem;
  cursor: pointer;
  transition: border-color 0.15s;
}

.custom-select-trigger:hover {
  border-color: #666;
}

/* 展開用のアローアイコン（▼） */
.custom-select-trigger::after {
  content: '▼';
  font-size: 0.6em;
  color: #888;
  margin-left: 10px;
  transition: transform 0.2s;
}

.custom-select-wrapper.open .custom-select-trigger::after {
  transform: rotate(180deg);
  /* 展開時は▲にする */
}

/* 展開されるオプションリスト部分（マッカランのサジェストとデザインを完全統一） */
.custom-select-options {
  position: absolute;
  top: 100%;
  left: 0;
  /* right: 0; を削除して、文字の長さに合わせて横に広がるようにしました */
  min-width: 100%;
  /* ★追加：最低でもボタンと同じ幅はキープする */
  white-space: nowrap;
  /* ★追加：リスト全体で文字の折り返し（改行）を禁止！ */
  background: #24262b;
  border: 1px solid #444;
  border-radius: 6px;
  box-shadow: 0 10px 30px rgba(0, 0, 0, 0.8);
  margin-top: 4px;
  z-index: 99999;
  max-height: 220px;
  overflow-y: auto;
  opacity: 0;
  visibility: hidden;
  transition: opacity 0.2s, visibility 0.2s;
}

.custom-select-wrapper.open .custom-select-options {
  opacity: 1;
  visibility: visible;
}

/* 各オプション（マッカランのサジェストとデザインを完全統一） */
.custom-select-option {
  padding: 10px 12px;
  font-size: 0.85rem;
  color: #ddd;
  cursor: pointer;
  border-bottom: 1px solid #333;
  transition: background 0.15s, color 0.15s;
}

.custom-select-option:last-child {
  border-bottom: none;
}

/* ホバー時のオレンジハイライト（マッカランと同じ） */
.custom-select-option:hover {
  background: rgba(245, 166, 35, 0.15);
  /* オレンジの薄い背景 */
  color: #f5a623;
  /* オレンジの文字 */
  font-weight: bold;
}

/* 選択されている項目のスタイル（ホバーと同じ） */
.custom-select-option.selected {
  background: rgba(245, 166, 35, 0.15);
  color: #f5a623;
  font-weight: bold;
}

/* カスタムセレクトを開いている時（フォーカス時）のオレンジ枠 */
.custom-select-wrapper.open .custom-select-trigger {
  border-color: var(--amber);
  box-shadow: 0 0 0 3px var(--amber-dim, rgba(245, 166, 35, 0.2));
}

/* カスタムセレクトが変更不可（disabled）の時の見た目 */
.custom-select-wrapper.disabled .custom-select-trigger {
  background-color: #24262b;
  /* 他の入力欄と同じ背景色に戻す */
  color: #ddd;
  /* ★文字色も他と同じ明るさに戻す！ */
  border-color: #444;
  /* 枠線も他と同じに戻す */
  cursor: not-allowed;
  /* PC用の「タップ禁止カーソル」だけ残す */
}

/* ============================================================
   統合アラートシステム（上部・自動伸縮・センター固定版）
   ============================================================ */
.toast-notification {
  width: 90% !important;
  max-width: 340px !important;
  /* 横幅は一定にキープ */
  height: auto !important;
  /* 縦幅は表示内容に合わせて自動で広がる */
  box-sizing: border-box;
  position: fixed !important;
  top: 35% !important;
  /* ★画面の上から35%の位置（上端固定） */
  left: 50% !important;
  /* 水平Transformは以前のままで、垂直Transformは0に設定。
     少し下（10px）から scale(0.95) で出現する Transform に変更 */
  transform: translateX(-50%) translateY(10px) scale(0.95) !important;
  background: #24262b !important;
  color: #FFFFFF !important;
  padding: 24px 20px !important;
  border-radius: 16px !important;
  box-shadow: 0 15px 40px rgba(0, 0, 0, 0.8) !important;
  z-index: 100000 !important;
  opacity: 0;
  transition: all 0.3s cubic-bezier(0.18, 0.89, 0.32, 1.28);
  /* transition時間を少し長く(0.3s) */
  pointer-events: auto;
  border: 1px solid rgba(255, 255, 255, 0.08) !important;
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
}

/* 表示された時の状態 */
.toast-notification.show {
  opacity: 1;
  transform: translateX(-50%) translateY(0) scale(1) !important;
  /* translateY(0)に。上端は top: 35% で固定 */
}

/* 同期ボタン付きのアラートも、全く同じ位置に表示 */
.toast-notification.sync-toast {
  top: 35% !important;
  transform: translateX(-50%) translateY(10px) scale(0.95) !important;
}

.toast-notification.sync-toast.show {
  transform: translateX(-50%) translateY(0) scale(1) !important;
}

/* アラートの種類ごとの上部アクセントカラー */
.toast-notification.toast-success {
  border-top: 4px solid var(--amber, #F5A623) !important;
  border-left: none !important;
}

.toast-notification.toast-error {
  border-top: 4px solid #FF5252 !important;
  border-left: none !important;
}

.toast-notification.toast-info {
  border-top: 4px solid #4A90E2 !important;
  border-left: none !important;
}

.toast-notification.toast-warning {
  border-top: 4px solid var(--amber, #F5A623) !important;
  border-left: none !important;
}

/* 内部レイアウト */
.toast-content {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 12px;
  width: 100%;
}

.toast-message {
  width: 100%;
  font-size: 1rem;
  font-weight: bold;
  line-height: 1.6;
  letter-spacing: 0.02em;
  white-space: pre-line;
}

.toast-close {
  display: block !important;
  position: absolute;
  top: 12px;
  right: 16px;
  font-size: 1.4rem;
  opacity: 0.6;
}

/* アクションボタン（OKや同期など）のデザイン */
.toast-action-btn {
  width: 100%;
  margin-top: 20px;
  background: var(--amber, #F5A623);
  color: #1a1a1a;
  border: none;
  padding: 14px;
  border-radius: 8px;
  font-weight: bold;
  cursor: pointer;
  transition: all 0.2s;
  font-size: 1rem;
  text-align: center;
  display: block;
}

.toast-action-btn:hover {
  filter: brightness(1.1);
  box-shadow: 0 4px 12px rgba(245, 166, 35, 0.3);
}

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