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

body {
  background: #f5f5f7;
  font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
  color: #333;
  min-height: 100vh;
  -webkit-tap-highlight-color: transparent;
  -webkit-user-select: none;
  user-select: none;
}

.app {
  min-height: 100vh;
  max-width: 100vw;
  overflow-x: hidden;
}

/* ===== ヘッダー ===== */
.app-header {
  background: linear-gradient(135deg, #6c5ce7, #a29bfe);
  padding: 20px 24px 16px;
  padding-top: max(20px, env(safe-area-inset-top));
  display: flex;
  justify-content: space-between;
  align-items: center;
}
.app-header h1 {
  font-size: 22px;
  font-weight: 700;
  color: #fff;
  letter-spacing: -0.5px;
}
.app-header .date {
  font-size: 14px;
  color: rgba(255,255,255,0.8);
}

/* ===== サマリーバー ===== */
.summary-bar {
  background: linear-gradient(135deg, #6c5ce7, #a29bfe);
  padding: 0 24px 20px;
  display: flex;
  gap: 12px;
}
.summary-item {
  background: rgba(255,255,255,0.15);
  border-radius: 12px;
  padding: 10px 16px;
  flex: 1;
  backdrop-filter: blur(10px);
}
.summary-label {
  font-size: 11px;
  color: rgba(255,255,255,0.7);
  margin-bottom: 2px;
}
.summary-value {
  font-size: 20px;
  font-weight: 700;
  color: #fff;
}

/* ===== カードコンテナ ===== */
.cards-scroll-wrapper {
  overflow: visible;
}
.cards-container {
  padding: 20px;
  display: flex;
  flex-direction: column;
  gap: 16px;
}

/* ===== クライアントカード ===== */
.client-card {
  background: #fff;
  border-radius: 16px;
  overflow: hidden;
  box-shadow: 0 2px 12px rgba(0,0,0,0.06);
}
.client-card.active {
  box-shadow: 0 4px 20px rgba(0,0,0,0.12);
}
.card-header {
  padding: 16px 20px;
  display: flex;
  justify-content: space-between;
  align-items: center;
}
.card-header-left {
  display: flex;
  align-items: center;
  gap: 12px;
}
.client-dot {
  width: 10px;
  height: 10px;
  border-radius: 50%;
}
.client-dot.running { animation: pulse 1.5s infinite; }
@keyframes pulse {
  0%, 100% { opacity: 1; transform: scale(1); }
  50% { opacity: 0.5; transform: scale(1.3); }
}
.client-name {
  font-size: 17px;
  font-weight: 600;
  color: #1a1a2e;
}
.client-type {
  font-size: 12px;
  color: #888;
  margin-left: 8px;
}
.time-display { text-align: right; }
.time-running {
  font-size: 24px;
  font-weight: 700;
  font-variant-numeric: tabular-nums;
}
.time-range {
  font-size: 12px;
  color: #888;
  margin-top: 2px;
}

/* ===== アクションボタン ===== */
.card-actions {
  padding: 0 20px 16px;
  display: flex;
  gap: 10px;
}
.btn {
  padding: 10px 24px;
  border-radius: 10px;
  border: none;
  font-size: 14px;
  font-weight: 600;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
  transition: all 0.15s;
  min-height: 44px;
}
.btn-stop {
  background: #ff6b6b;
  color: #fff;
  flex: 1;
}
.btn-pause {
  background: #ffeaa7;
  color: #6c5f00;
  flex: 1;
}
.time-paused {
  color: #e17055 !important;
  animation: pauseBlink 1.5s infinite;
}
@keyframes pauseBlink {
  0%, 100% { opacity: 1; }
  50% { opacity: 0.4; }
}
.pause-elapsed {
  font-size: 12px;
  color: #e17055;
  margin-top: 2px;
  font-weight: 500;
}
.btn-start {
  background: #6c5ce7;
  color: #fff;
  flex: 1;
  padding: 12px 24px;
  font-size: 15px;
}
.btn-resume {
  background: #00b894;
  color: #fff;
  flex: 1;
}

/* ===== タスク(カード内) ===== */
.card-tasks {
  padding: 0 20px 16px;
  border-top: 1px solid #f0f0f0;
  margin-top: 4px;
  padding-top: 12px;
}
.card-tasks-title {
  font-size: 11px;
  color: #aaa;
  text-transform: uppercase;
  letter-spacing: 0.5px;
  margin-bottom: 8px;
}
.task-item {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 6px 0;
}
.task-checkbox {
  width: 20px;
  height: 20px;
  border-radius: 6px;
  border: 2px solid #ddd;
  flex-shrink: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  min-width: 20px;
  min-height: 20px;
}
.task-checkbox.done {
  background: #00b894;
  border-color: #00b894;
}
.task-checkbox.done::after {
  content: '\2713';
  color: #fff;
  font-size: 12px;
  font-weight: 700;
}
.task-name {
  font-size: 14px;
  color: #333;
  flex: 1;
}
.task-name.done {
  color: #bbb;
  text-decoration: line-through;
}
.task-due {
  font-size: 12px;
  color: #888;
  flex-shrink: 0;
}
.task-due.today { color: #e17055; font-weight: 600; }
.task-due.overdue { color: #d63031; font-weight: 600; }

/* ===== 今日の記録 ===== */
.today-log { padding: 0 20px 20px; }
.section-title {
  font-size: 13px;
  color: #888;
  font-weight: 600;
  margin-bottom: 12px;
  text-transform: uppercase;
  letter-spacing: 0.5px;
}
.log-list {
  background: #fff;
  border-radius: 12px;
  overflow: hidden;
}
.log-item {
  padding: 12px 16px;
  display: flex;
  align-items: center;
  gap: 12px;
  border-bottom: 1px solid #f0f0f0;
}
.log-item:last-child { border-bottom: none; }
.log-dot {
  width: 8px;
  height: 8px;
  border-radius: 50%;
  flex-shrink: 0;
}
.log-client {
  font-size: 14px;
  font-weight: 500;
  color: #333;
  width: 70px;
}
.log-time {
  font-size: 13px;
  color: #666;
  flex: 1;
}
.log-hours {
  font-size: 14px;
  font-weight: 600;
  color: #333;
}
.log-edit {
  display: flex;
  align-items: center;
  gap: 12px;
  flex: 1;
  cursor: pointer;
  min-width: 0;
}
.form-static {
  padding: 12px 16px;
  border-radius: 10px;
  background: #f0f0f0;
  font-size: 15px;
  color: #333;
  font-weight: 500;
}
.log-delete {
  font-size: 18px;
  color: #ccc;
  cursor: pointer;
  padding: 4px 4px 4px 8px;
  flex-shrink: 0;
}
.log-delete:hover { color: #d63031; }

/* ===== ボトムナビ ===== */
.bottom-nav {
  background: #fff;
  padding: 8px 0;
  padding-bottom: max(8px, env(safe-area-inset-bottom));
  display: flex;
  border-top: 1px solid #e0e0e0;
  position: fixed;
  bottom: 0;
  left: 0;
  right: 0;
  z-index: 200;
}
/* ナビ固定分の下余白 */
.screen { padding-bottom: 70px; }
.nav-item {
  flex: 1;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 4px;
  padding: 8px 0;
  color: #999;
  font-size: 10px;
  text-decoration: none;
  cursor: pointer;
}
.nav-item.active { color: #6c5ce7; }
.nav-icon { font-size: 22px; }

/* ===== FAB ===== */
.fab {
  position: fixed;
  bottom: 90px;
  right: 24px;
  width: 56px;
  height: 56px;
  border-radius: 16px;
  background: #6c5ce7;
  color: #fff;
  font-size: 28px;
  display: flex;
  align-items: center;
  justify-content: center;
  box-shadow: 0 4px 16px rgba(108,92,231,0.4);
  cursor: pointer;
  border: none;
  z-index: 100;
}

/* ===== タスク一覧画面 ===== */
.task-screen { background: #f5f5f7; }
.task-group { padding: 0 20px; margin-bottom: 20px; }
.task-group-title {
  font-size: 13px;
  color: #888;
  font-weight: 600;
  margin: 16px 0 8px;
  text-transform: uppercase;
  letter-spacing: 0.5px;
}
.task-group-list {
  background: #fff;
  border-radius: 12px;
  overflow: hidden;
}
.task-list-item {
  padding: 14px 16px;
  display: flex;
  align-items: center;
  gap: 12px;
  border-bottom: 1px solid #f0f0f0;
}
.task-list-item:last-child { border-bottom: none; }
.task-client-badge {
  font-size: 10px;
  padding: 2px 8px;
  border-radius: 4px;
  font-weight: 600;
  flex-shrink: 0;
}
.task-priority { font-size: 10px; flex-shrink: 0; }
.priority-high { color: #d63031; }
.priority-mid { color: #fdcb6e; }
.task-delete {
  font-size: 18px;
  color: #ccc;
  cursor: pointer;
  padding: 4px 8px;
  flex-shrink: 0;
  min-width: 30px;
  min-height: 30px;
  display: flex;
  align-items: center;
  justify-content: center;
}
.task-delete:hover { color: #d63031; }
.task-list-item-wrap {
  border-bottom: 1px solid #f0f0f0;
}
.task-list-item-wrap:last-child { border-bottom: none; }
.task-list-item-wrap .task-list-item {
  border-bottom: none;
}
.task-memo {
  font-size: 12px;
  color: #999;
  padding: 0 16px 10px 48px;
}

/* ===== 月次画面 ===== */
.monthly-screen { background: #f5f5f7; }
.month-nav {
  padding: 16px 20px;
  display: flex;
  justify-content: center;
  align-items: center;
  gap: 20px;
}
.month-nav-btn {
  background: none;
  border: none;
  color: #6c5ce7;
  font-size: 18px;
  cursor: pointer;
  padding: 8px;
}
.month-nav-label {
  font-size: 18px;
  font-weight: 700;
  color: #333;
}
.monthly-card {
  background: #fff;
  border-radius: 16px;
  margin: 0 20px 16px;
  padding: 20px;
}
.monthly-client-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 12px;
}
.monthly-client-name {
  font-size: 17px;
  font-weight: 600;
  color: #333;
}
.monthly-hours {
  font-size: 24px;
  font-weight: 700;
}
.progress-bar {
  height: 8px;
  border-radius: 4px;
  background: #f0f0f0;
  margin-bottom: 12px;
  overflow: hidden;
}
.progress-fill {
  height: 100%;
  border-radius: 4px;
  transition: width 0.5s ease;
}
.monthly-calc { font-size: 14px; color: #666; }
.monthly-amount {
  font-size: 20px;
  font-weight: 700;
  color: #333;
  margin-top: 4px;
}
.monthly-total {
  background: linear-gradient(135deg, #6c5ce7, #a29bfe);
  border-radius: 16px;
  margin: 0 20px 16px;
  padding: 24px;
  text-align: center;
}
.monthly-total-label {
  font-size: 13px;
  color: rgba(255,255,255,0.7);
  margin-bottom: 4px;
}
.monthly-total-amount {
  font-size: 32px;
  font-weight: 700;
  color: #fff;
}

/* ===== 日別内訳 ===== */
.daily-breakdown-section {
  padding: 0 20px 20px;
}
.daily-breakdown-title {
  font-size: 13px;
  color: #888;
  font-weight: 600;
  margin-bottom: 12px;
  text-transform: uppercase;
  letter-spacing: 0.5px;
}
.daily-breakdown-list {
  background: #fff;
  border-radius: 12px;
  overflow: hidden;
}
.daily-row {
  padding: 12px 16px;
  display: flex;
  align-items: center;
  gap: 12px;
  border-bottom: 1px solid #f0f0f0;
}
.daily-row:last-child { border-bottom: none; }
.daily-date {
  font-size: 14px;
  font-weight: 600;
  color: #333;
  width: 40px;
  flex-shrink: 0;
}
.daily-entries {
  flex: 1;
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
}
.daily-entry {
  display: flex;
  align-items: center;
  gap: 4px;
  font-size: 13px;
  color: #555;
}
.daily-entry-dot {
  width: 6px;
  height: 6px;
  border-radius: 50%;
  flex-shrink: 0;
}
.daily-entry-client {
  font-weight: 500;
}
.daily-entry-hours {
  color: #888;
}
.daily-total {
  font-size: 14px;
  font-weight: 600;
  color: #333;
  flex-shrink: 0;
}

/* ===== モーダル ===== */
.modal-overlay {
  display: none;
  position: fixed;
  top: 0; left: 0; right: 0; bottom: 0;
  background: rgba(0,0,0,0.5);
  z-index: 500;
  align-items: flex-end;
  justify-content: center;
}
.modal-overlay.show { display: flex; }
.modal-sheet {
  background: #fff;
  border-radius: 20px 20px 0 0;
  width: 100%;
  max-width: 500px;
  padding: 24px;
  padding-bottom: max(24px, env(safe-area-inset-bottom));
}
.modal-handle {
  width: 36px;
  height: 4px;
  background: #ddd;
  border-radius: 2px;
  margin: 0 auto 20px;
}
.modal-title {
  font-size: 18px;
  font-weight: 700;
  color: #333;
  margin-bottom: 20px;
}
.form-group { margin-bottom: 16px; }
.form-label {
  font-size: 12px;
  color: #888;
  margin-bottom: 6px;
  display: block;
}
.form-input {
  width: 100%;
  padding: 12px 16px;
  border-radius: 10px;
  border: 1px solid #e0e0e0;
  font-size: 15px;
  color: #333;
  background: #f9f9f9;
  -webkit-appearance: none;
}
.form-input:focus {
  outline: none;
  border-color: #6c5ce7;
}
.form-row { display: flex; gap: 12px; }
.form-row .form-group { flex: 1; }
.btn-submit {
  width: 100%;
  padding: 14px;
  border-radius: 12px;
  background: #6c5ce7;
  color: #fff;
  font-size: 16px;
  font-weight: 600;
  border: none;
  margin-top: 8px;
  cursor: pointer;
  min-height: 44px;
}
.btn-cancel {
  width: 100%;
  padding: 14px;
  border-radius: 12px;
  background: transparent;
  color: #999;
  font-size: 14px;
  font-weight: 500;
  border: none;
  margin-top: 8px;
  cursor: pointer;
}
.manual-calc {
  text-align: center;
  color: #888;
  font-size: 14px;
  margin: 12px 0;
}
.manual-calc strong {
  color: #333;
  font-size: 18px;
}

/* ===== スクリーン切り替え ===== */
.screen { display: none; }
.screen.active { display: block; }

/* ===== ローディング ===== */
.loading {
  text-align: center;
  padding: 40px;
  color: #999;
}

/* ===== iPad横画面 ===== */
@media (min-width: 768px) {
  .dashboard-body {
    display: grid;
    grid-template-columns: 1fr 320px;
    gap: 0;
    min-height: calc(100vh - 200px);
  }
  .cards-scroll-wrapper {
    overflow: visible;
  }
  .cards-container {
    display: grid;
    grid-template-columns: 1fr 1fr 1fr;
    gap: 16px;
    padding: 20px 24px;
    align-content: start;
    width: auto;
  }
  .cards-container .client-card {
    min-width: unset;
    max-width: unset;
  }
  .today-log {
    background: #fff;
    border-left: 1px solid #e8e8e8;
    padding: 20px;
    margin: 0;
  }
  .today-log .log-list { box-shadow: none; }
  .task-groups-row {
    display: grid;
    grid-template-columns: 1fr 1fr 1fr;
    gap: 16px;
    padding: 0 24px;
  }
  .task-groups-row .task-group { padding: 0; }
  .monthly-cards-row {
    display: grid;
    grid-template-columns: 1fr 1fr 1fr;
    gap: 16px;
    padding: 0 24px;
  }
  .monthly-cards-row .monthly-card { margin: 0; }
  .monthly-total { margin: 0 24px 16px; }
}

/* ===== iPhone向け ===== */
@media (max-width: 767px) {
  .summary-bar { flex-wrap: wrap; }
  .summary-item { min-width: calc(50% - 8px); }

  /* カード横スクロール */
  .cards-scroll-wrapper {
    overflow-x: auto;
    overflow-y: hidden;
    -webkit-overflow-scrolling: touch;
    scroll-snap-type: x mandatory;
    scrollbar-width: none;
  }
  .cards-scroll-wrapper::-webkit-scrollbar { display: none; }
  .cards-container {
    display: flex;
    flex-direction: row;
    gap: 12px;
    padding: 16px;
    width: max-content;
  }
  .cards-container .client-card {
    min-width: 280px;
    max-width: 320px;
    flex-shrink: 0;
    scroll-snap-align: start;
  }

  /* 今日の記録をカードの直下に */
  .dashboard-body {
    display: flex;
    flex-direction: column;
  }
  .today-log {
    order: 2;
  }

  /* スクロールドット */
  .scroll-dots {
    display: flex;
    justify-content: center;
    gap: 6px;
    padding: 0 0 12px;
  }
  .scroll-dot {
    width: 7px;
    height: 7px;
    border-radius: 50%;
    background: #ccc;
    transition: all 0.2s;
  }
  .scroll-dot.active {
    background: #6c5ce7;
    width: 20px;
    border-radius: 4px;
  }
  body.dark .scroll-dot { background: #555; }
  body.dark .scroll-dot.active { background: #a29bfe; }
}

/* PC/iPadではドット非表示 */
@media (min-width: 768px) {
  .scroll-dots { display: none; }
}

/* カテゴリ選択モーダル */
.modal-compact { padding-bottom: 20px; }
.category-list { display: flex; flex-direction: column; gap: 10px; margin-bottom: 16px; }
.btn-category {
  padding: 16px; border: 2px solid #6c5ce7; border-radius: 12px;
  background: #fff; color: #6c5ce7; font-size: 16px; font-weight: 600;
  cursor: pointer; transition: all 0.2s;
}
.btn-category.selected {
  background: #6c5ce7; color: #fff;
}
.btn-category:active { opacity: 0.7; }
.category-start-btn {
  width: 100%; padding: 16px; font-size: 16px; font-weight: 700;
  border-radius: 12px; margin-top: 8px;
}
.category-start-btn:disabled {
  opacity: 0.4; cursor: not-allowed;
}

/* 稼働中カテゴリ表示 */
.active-category {
  font-size: 12px; color: #666; background: #f0f0f0;
  padding: 3px 10px; border-radius: 12px; margin-top: 4px;
  display: inline-block;
}

/* ログのカテゴリ表示 */
.log-category {
  font-size: 11px; color: #999; margin-left: 6px;
  font-weight: 400;
}

/* ===== ダッシュボード目標ペースバー ===== */
.target-pace-bar {
  padding: 0 20px;
  margin-bottom: -4px;
}
.pace-item {
  background: #fff;
  border-radius: 12px;
  padding: 12px 16px;
  margin-bottom: 8px;
  display: flex;
  align-items: center;
  gap: 12px;
}
.pace-dot {
  width: 8px;
  height: 8px;
  border-radius: 50%;
  flex-shrink: 0;
}
.pace-client {
  font-size: 13px;
  font-weight: 600;
  color: #333;
  width: 60px;
  flex-shrink: 0;
}
.pace-bar-wrap {
  flex: 1;
  height: 6px;
  background: #f0f0f0;
  border-radius: 3px;
  position: relative;
}
.pace-bar-target {
  position: absolute;
  top: -3px;
  width: 2px;
  height: 12px;
  background: #999;
  border-radius: 1px;
}
.pace-bar-fill {
  height: 100%;
  border-radius: 3px;
  transition: width 0.5s ease;
}
.pace-text {
  font-size: 12px;
  color: #666;
  flex-shrink: 0;
  text-align: right;
  min-width: 90px;
}
.pace-ahead { color: #00b894; }
.pace-behind { color: #d63031; }

/* ===== 月次画面 目標ペース ===== */
.target-section {
  padding: 0 20px 16px;
}
.target-section-title {
  font-size: 13px;
  color: #888;
  font-weight: 600;
  margin-bottom: 12px;
  text-transform: uppercase;
  letter-spacing: 0.5px;
}
.target-cards {
  background: #fff;
  border-radius: 12px;
  overflow: hidden;
}
.target-card {
  padding: 16px;
  border-bottom: 1px solid #f0f0f0;
}
.target-card:last-child { border-bottom: none; }
.target-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 8px;
}
.target-client {
  font-size: 15px;
  font-weight: 600;
  color: #333;
}
.target-status {
  font-size: 13px;
  font-weight: 600;
}
.target-bar {
  height: 8px;
  border-radius: 4px;
  background: #f0f0f0;
  position: relative;
  margin-bottom: 8px;
}
.target-bar-fill {
  height: 100%;
  border-radius: 4px;
  transition: width 0.5s ease;
}
.target-bar-marker {
  position: absolute;
  top: -4px;
  width: 3px;
  height: 16px;
  background: #333;
  border-radius: 1.5px;
  opacity: 0.6;
}
.target-detail {
  display: flex;
  justify-content: space-between;
  font-size: 12px;
  color: #888;
}
.target-detail-label { color: #aaa; }

/* ===== ダークモードトグル ===== */
.header-right {
  display: flex;
  align-items: center;
  gap: 12px;
}
.theme-toggle {
  background: rgba(255,255,255,0.2);
  border: none;
  border-radius: 8px;
  width: 36px;
  height: 36px;
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  font-size: 18px;
  color: #fff;
}

/* ===== ボタン無効状態 ===== */
.btn:disabled {
  opacity: 0.5;
  cursor: not-allowed;
}

/* ===== トースト通知 ===== */
.toast {
  position: fixed;
  top: 20px;
  left: 50%;
  transform: translateX(-50%) translateY(-100px);
  background: #333;
  color: #fff;
  padding: 12px 24px;
  border-radius: 12px;
  font-size: 14px;
  font-weight: 500;
  z-index: 1000;
  transition: transform 0.3s ease;
  box-shadow: 0 4px 16px rgba(0,0,0,0.2);
}
.toast.show {
  transform: translateX(-50%) translateY(0);
  transform: translateX(-50%) translateY(max(0px, env(safe-area-inset-top)));
}

/* ===== ダークモード ===== */
body.dark {
  background: #1a1a2e;
  color: #e0e0e0;
}
body.dark .app-header {
  background: linear-gradient(135deg, #2d1b69, #4a3b8f);
}
body.dark .summary-bar {
  background: linear-gradient(135deg, #2d1b69, #4a3b8f);
}
body.dark .client-card {
  background: #2d2d44;
  box-shadow: 0 2px 12px rgba(0,0,0,0.2);
}
body.dark .client-card.active {
  box-shadow: 0 4px 20px rgba(0,0,0,0.3);
}
body.dark .client-name { color: #e0e0e0; }
body.dark .client-type { color: #888; }
body.dark .time-range { color: #999; }
body.dark .card-tasks { border-top-color: #3d3d5c; }
body.dark .task-name { color: #e0e0e0; }
body.dark .task-checkbox { border-color: #555; }
body.dark .active-category { background: #3d3d5c; color: #bbb; }

body.dark .log-list,
body.dark .task-group-list,
body.dark .monthly-card,
body.dark .pace-item,
body.dark .target-cards,
body.dark .daily-breakdown-list {
  background: #2d2d44;
}
body.dark .log-item { border-bottom-color: #3d3d5c; }
body.dark .log-client { color: #e0e0e0; }
body.dark .log-time { color: #999; }
body.dark .log-hours { color: #e0e0e0; }
body.dark .log-delete { color: #666; }
body.dark .log-delete:hover { color: #ff6b6b; }

body.dark .bottom-nav {
  background: #2d2d44;
  border-top-color: #3d3d5c;
}
body.dark .nav-item { color: #777; }
body.dark .nav-item.active { color: #a29bfe; }

body.dark .fab {
  background: #6c5ce7;
  box-shadow: 0 4px 16px rgba(108,92,231,0.3);
}

body.dark .task-screen,
body.dark .monthly-screen { background: #1a1a2e; }
body.dark .task-list-item { border-bottom-color: #3d3d5c; }
body.dark .task-list-item-wrap { border-bottom-color: #3d3d5c; }
body.dark .task-group-title { color: #888; }
body.dark .section-title { color: #888; }

body.dark .monthly-client-name { color: #e0e0e0; }
body.dark .monthly-calc { color: #999; }
body.dark .monthly-amount { color: #e0e0e0; }
body.dark .monthly-total {
  background: linear-gradient(135deg, #2d1b69, #4a3b8f);
}
body.dark .month-nav-label { color: #e0e0e0; }
body.dark .month-nav-btn { color: #a29bfe; }
body.dark .progress-bar { background: #3d3d5c; }
body.dark .target-bar { background: #3d3d5c; }
body.dark .target-bar-marker { background: #aaa; }
body.dark .target-client { color: #e0e0e0; }
body.dark .pace-client { color: #e0e0e0; }
body.dark .pace-bar-wrap { background: #3d3d5c; }

body.dark .daily-row { border-bottom-color: #3d3d5c; }
body.dark .daily-date { color: #e0e0e0; }
body.dark .daily-entry { color: #bbb; }
body.dark .daily-total { color: #e0e0e0; }
body.dark .target-card { border-bottom-color: #3d3d5c; }

body.dark .modal-sheet { background: #2d2d44; }
body.dark .modal-handle { background: #555; }
body.dark .modal-title { color: #e0e0e0; }
body.dark .form-label { color: #999; }
body.dark .form-input {
  background: #1a1a2e;
  border-color: #3d3d5c;
  color: #e0e0e0;
}
body.dark .form-input:focus { border-color: #a29bfe; }
body.dark .form-static { background: #3d3d5c; color: #e0e0e0; }
body.dark .manual-calc { color: #999; }
body.dark .manual-calc strong { color: #e0e0e0; }
body.dark .btn-cancel { color: #888; }
body.dark .btn-category {
  background: #1a1a2e;
  border-color: #a29bfe;
  color: #a29bfe;
}
body.dark .btn-category.selected {
  background: #6c5ce7;
  color: #fff;
}
body.dark .btn-pause { background: #4a4000; color: #ffeaa7; }
body.dark .pause-elapsed { color: #ff7675; }
body.dark .toast { background: #e0e0e0; color: #1a1a2e; }

/* ===== 自動停止 ===== */
.auto-stop-row {
  padding: 0 20px 12px;
}
.btn-auto-stop {
  width: 100%;
  padding: 8px 16px;
  border-radius: 8px;
  border: 1.5px dashed #a29bfe;
  background: rgba(108, 92, 231, 0.05);
  color: #6c5ce7;
  font-size: 13px;
  font-weight: 600;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
  min-height: 36px;
}
.btn-auto-stop:active {
  background: rgba(108, 92, 231, 0.15);
}
.auto-stop-set {
  width: 100%;
  padding: 8px 16px;
  border-radius: 8px;
  background: rgba(108, 92, 231, 0.1);
  border: 1.5px solid #a29bfe;
  display: flex;
  align-items: center;
  justify-content: space-between;
  min-height: 36px;
}
.auto-stop-info {
  display: flex;
  align-items: center;
  gap: 6px;
  font-size: 13px;
  font-weight: 600;
  color: #6c5ce7;
}
.auto-stop-time {
  font-size: 16px;
  font-weight: 700;
  color: #6c5ce7;
}
.auto-stop-cancel {
  background: none;
  border: none;
  color: #999;
  font-size: 18px;
  cursor: pointer;
  padding: 4px 8px;
  border-radius: 4px;
  min-width: 30px;
  min-height: 30px;
  display: flex;
  align-items: center;
  justify-content: center;
}
.auto-stop-cancel:active {
  color: #d63031;
  background: rgba(214, 48, 49, 0.1);
}
.auto-stop-time-input {
  font-size: 28px !important;
  font-weight: 700 !important;
  text-align: center;
  padding: 16px !important;
}
.auto-stop-quick-label {
  font-size: 12px;
  color: #888;
  margin-bottom: 8px;
  text-align: center;
}
.auto-stop-quick-times {
  display: flex;
  gap: 8px;
  margin-bottom: 16px;
}
.auto-stop-quick-btn {
  padding: 8px 16px;
  border-radius: 8px;
  border: 1px solid #e0e0e0;
  background: #fff;
  font-size: 14px;
  font-weight: 600;
  color: #333;
  cursor: pointer;
  flex: 1;
  text-align: center;
  min-height: 36px;
}
.auto-stop-quick-btn:active {
  border-color: #6c5ce7;
  color: #6c5ce7;
}

/* 自動停止 ダークモード */
body.dark .btn-auto-stop {
  border-color: #7c6dd8;
  background: rgba(108, 92, 231, 0.1);
  color: #a29bfe;
}
body.dark .auto-stop-set {
  background: rgba(108, 92, 231, 0.15);
  border-color: #7c6dd8;
}
body.dark .auto-stop-info { color: #a29bfe; }
body.dark .auto-stop-time { color: #a29bfe; }
body.dark .auto-stop-cancel { color: #777; }
body.dark .auto-stop-cancel:active { color: #ff7675; }
body.dark .auto-stop-quick-btn {
  background: #1a1a2e;
  border-color: #3d3d5c;
  color: #e0e0e0;
}
body.dark .auto-stop-quick-btn:active {
  border-color: #a29bfe;
  color: #a29bfe;
}

/* スケジュールボタン(STARTの横の時計アイコン) */
.btn-schedule {
  padding: 10px 14px;
  border-radius: 10px;
  border: 1.5px solid #e0e0e0;
  background: #fff;
  font-size: 16px;
  cursor: pointer;
  flex-shrink: 0;
  min-height: 44px;
  display: flex;
  align-items: center;
  justify-content: center;
}
.btn-schedule:active {
  background: rgba(108, 92, 231, 0.1);
  border-color: #6c5ce7;
}

/* 予約スタート表示 */
.auto-start-row {
  padding: 0 20px 12px;
}
.auto-start-set {
  width: 100%;
  padding: 8px 16px;
  border-radius: 8px;
  background: rgba(0, 184, 148, 0.1);
  border: 1.5px solid #00b894;
  display: flex;
  align-items: center;
  justify-content: space-between;
}
.auto-start-info {
  display: flex;
  align-items: center;
  gap: 6px;
  font-size: 13px;
  font-weight: 600;
  color: #00b894;
}
.auto-start-time {
  font-size: 16px;
  font-weight: 700;
  color: #00b894;
}
.auto-start-cancel {
  background: none;
  border: none;
  color: #999;
  font-size: 18px;
  cursor: pointer;
  padding: 4px 8px;
  border-radius: 6px;
}
.auto-start-cancel:active {
  color: #d63031;
  background: rgba(214, 48, 49, 0.1);
}

/* スタート設定モーダル */
.start-settings-time-input {
  font-size: 28px !important;
  font-weight: 700 !important;
  text-align: center;
  padding: 16px !important;
}
.start-settings-info {
  padding: 10px 14px;
  border-radius: 8px;
  font-size: 13px;
  font-weight: 600;
  margin-bottom: 16px;
  text-align: center;
}
.info-retro {
  background: rgba(253, 203, 110, 0.15);
  color: #e17055;
}
.info-scheduled {
  background: rgba(0, 184, 148, 0.1);
  color: #00b894;
}
.info-now {
  background: rgba(108, 92, 231, 0.08);
  color: #6c5ce7;
}

/* スケジュール/予約スタート ダークモード */
body.dark .btn-schedule {
  background: #1a1a2e;
  border-color: #3d3d5c;
}
body.dark .btn-schedule:active {
  background: rgba(108, 92, 231, 0.2);
  border-color: #7c6dd8;
}
body.dark .auto-start-set {
  background: rgba(0, 184, 148, 0.15);
  border-color: #00b894;
}
body.dark .auto-start-info { color: #55efc4; }
body.dark .auto-start-time { color: #55efc4; }
body.dark .auto-start-cancel { color: #777; }
body.dark .auto-start-cancel:active { color: #ff7675; }
body.dark .info-retro {
  background: rgba(253, 203, 110, 0.1);
  color: #fab1a0;
}
body.dark .info-scheduled {
  background: rgba(0, 184, 148, 0.15);
  color: #55efc4;
}
body.dark .info-now {
  background: rgba(108, 92, 231, 0.15);
  color: #a29bfe;
}

@media (min-width: 768px) {
  body.dark .today-log { background: #2d2d44; border-left-color: #3d3d5c; }
}

/* ===== Cloudflare 移植 Phase 1 追加スタイル ===== */
.phase2-notice {
  background: #fff8e1;
  border: 1px solid #f0c674;
  color: #8a6d3b;
  padding: 8px 12px;
  border-radius: 8px;
  font-size: 12px;
  margin: 0 0 12px;
  text-align: center;
}
body.dark .phase2-notice {
  background: #3d3520;
  border-color: #6b5520;
  color: #f0c674;
}
.btn:disabled,
.btn-submit:disabled,
.form-input:disabled,
button:disabled {
  opacity: 0.5;
  cursor: not-allowed;
}