:root {
  --ink:#1b1a17; --ink-soft:#4a4742; --paper:#faf8f3; --panel:#ffffff;
  --rule:#e3ddd0; --rule-strong:#cfc7b4; --accent:#3a5a40; --accent-soft:#eef2ec;
  --signal:#b5651d; --signal-soft:#f7ede2; --danger:#9e3b2e;
  --mono:'JetBrains Mono',ui-monospace,monospace; --serif:'Newsreader',Georgia,serif;
  --sans:'Zen Kaku Gothic New',system-ui,sans-serif;
}
* { box-sizing:border-box; }
body { margin:0; background:var(--paper); color:var(--ink); font-family:var(--sans);
  font-size:16px; line-height:1.7; -webkit-font-smoothing:antialiased; font-feature-settings:"palt"; }
/* ノッチ/ホームバー端末向けに左右・下のセーフエリアを加味（viewport-fit=cover 指定済み）。 */
.app { max-width:560px; margin:0 auto;
  padding-left:max(18px, env(safe-area-inset-left));
  padding-right:max(18px, env(safe-area-inset-right));
  padding-bottom:max(96px, calc(env(safe-area-inset-bottom) + 96px)); }
header.bar { display:flex; align-items:center; justify-content:space-between;
  padding:18px 0; border-bottom:2px solid var(--ink); margin-bottom:24px; }
header.bar .brand { font-family:var(--serif); font-size:26px; font-weight:500; }
h2.view-title { font-family:var(--serif); font-weight:500; font-size:22px; margin:24px 0 14px; }
button { font-family:var(--sans); cursor:pointer; border:none; border-radius:8px; font-size:15px; }
/* キーボード／スイッチ操作時のフォーカス可視化（マウス/タップでは出ない）。色はモード連動。 */
:focus-visible { outline:2px solid var(--accent); outline-offset:2px; border-radius:6px; }
.btn-primary { background:var(--accent); color:#fff; padding:14px 18px; width:100%; font-weight:700; }
.btn-danger { background:var(--danger); color:#fff; padding:14px 18px; width:100%; font-weight:700; }
.privacy-body { white-space:pre-line; line-height:1.7; }
.btn-ghost { background:transparent; color:var(--accent); border:1px solid var(--rule-strong); padding:10px 14px; }
.btn-signal { background:var(--signal); color:#fff; padding:14px 18px; }
input, select, textarea { font-family:var(--sans); font-size:16px; padding:12px 14px; width:100%;
  border:1px solid var(--rule-strong); border-radius:8px; background:var(--panel); }
textarea { resize:vertical; line-height:1.5; }
label { display:block; font-size:13px; color:var(--ink-soft); margin:12px 0 4px; }
.card { background:var(--panel); border:1px solid var(--rule); border-radius:12px; padding:16px; margin-bottom:12px; }
.card .title { font-weight:700; font-size:16px; }
.card .meta { font-family:var(--mono); font-size:12px; color:var(--ink-soft); margin-top:4px; }
.progress { height:8px; background:var(--accent-soft); border-radius:99px; margin-top:10px; overflow:hidden; }
.progress > i { display:block; height:100%; background:var(--accent); }
.subtask { display:flex; align-items:center; gap:10px; padding:12px 0; border-bottom:1px solid var(--rule); }
.subtask:last-child { border-bottom:none; }
.subtask .name { flex:1; }
.subtask.done .name { color:var(--ink-soft); text-decoration:line-through; }
.row { display:flex; gap:8px; align-items:center; }
.stat-grid { display:grid; grid-template-columns:1fr 1fr; gap:12px; }
.stat { background:var(--panel); border:1px solid var(--rule); border-radius:12px; padding:16px; }
.stat .n { font-family:var(--serif); font-size:30px; }
.stat .l { font-size:12px; color:var(--ink-soft); }
.toast { position:fixed; bottom:80px; left:50%; transform:translateX(-50%);
  display:flex; align-items:center; gap:14px; max-width:calc(100vw - 36px);
  background:var(--ink); color:#fff; padding:10px 16px; border-radius:8px; font-size:14px;
  opacity:0; pointer-events:none; transition:opacity .2s; }
.toast.show { opacity:1; pointer-events:auto; }
/* トースト内「元に戻す」ボタン（削除直後のUndo用）。 */
.toast-undo { flex:none; background:transparent; color:#fff; border:1px solid rgba(255,255,255,.55);
  border-radius:6px; padding:4px 12px; font-size:13px; font-weight:700; min-height:32px; }

/* 管理ブロック：AI利用が無料枠に接近したときの警告バナー（新規色は使わず既存変数）。 */
.admin-warn { margin:10px 0; padding:10px 14px; border:1px solid var(--accent);
  background:var(--accent-soft); color:var(--ink); border-radius:8px;
  font-size:13px; font-weight:700; line-height:1.6; }
.admin-ai-list { margin-top:4px; font-size:12px; line-height:1.7; }

/* 成功・達成のご褒美トースト（エラーの暗いトーストとは別系統。緑＝既存の --accent）。
   画面中央に出現時に少し弾むアニメーションで達成感を演出し、約0.8秒で自動的に消える。 */
.toast-ok { position:fixed; top:50%; left:50%; z-index:60;
  transform:translate(-50%,-50%) scale(.9);
  background:var(--accent); color:#fff; padding:14px 22px; border-radius:999px;
  font-size:16px; font-weight:700; box-shadow:0 10px 30px rgba(0,0,0,.22);
  max-width:86vw; text-align:center;
  opacity:0; pointer-events:none; transition:opacity .15s ease, transform .15s ease; }
.toast-ok::before { content:"✓ "; }
.toast-ok.show { opacity:1; transform:translate(-50%,-50%) scale(1);
  animation:toastOkPop .3s ease; }
@keyframes toastOkPop {
  0%   { transform:translate(-50%,-50%) scale(.85); }
  60%  { transform:translate(-50%,-50%) scale(1.06); }
  100% { transform:translate(-50%,-50%) scale(1); }
}
nav.tabs { position:fixed; bottom:0; left:0; right:0; display:flex; background:var(--panel);
  border-top:1px solid var(--rule); }
nav.tabs button { flex:1; background:none; padding:16px 0 calc(16px + env(safe-area-inset-bottom)); color:var(--ink-soft); font-size:15px; min-height:60px; border-top:3px solid transparent; }
nav.tabs button.active { color:var(--accent); font-weight:700; border-top-color:var(--accent); background:var(--accent-soft); }
/* 引っ張って更新（PWAでは標準の更新が効かないため自前実装）のインジケーター */
#ptr { position:fixed; top:calc(env(safe-area-inset-top) + 4px); left:50%;
  width:36px; height:36px; margin-left:-18px; margin-top:-52px; border-radius:50%;
  background:var(--panel); border:1px solid var(--rule);
  display:flex; align-items:center; justify-content:center;
  z-index:50; box-shadow:0 2px 10px rgba(0,0,0,.25); pointer-events:none; }
#ptr .ptr-spin { width:18px; height:18px; border-radius:50%;
  border:2px solid var(--accent-soft); border-top-color:var(--accent); transition:transform .1s linear; }
#ptr.ready .ptr-spin { transform:rotate(180deg); }
#ptr.refreshing .ptr-spin { animation:ptr-rot .7s linear infinite; }
@keyframes ptr-rot { to { transform:rotate(360deg); } }
.hidden { display:none !important; } /* nav.tabs 等の詳細度に勝つよう !important */
.muted { color:var(--ink-soft); font-size:14px; }

/* 締切時刻ホイール（ボトムシート） */
.time-field { min-width:92px; font-family:var(--mono); font-size:16px; }
.sheet { position:fixed; inset:0; z-index:50; background:rgba(27,26,23,.45);
  display:flex; align-items:flex-end; justify-content:center; }
.sheet-panel { background:var(--panel); width:100%; max-width:560px;
  border-radius:16px 16px 0 0; padding:18px 18px 24px; }
.sheet-title { font-family:var(--serif); font-size:18px; text-align:center; margin-bottom:10px; }
/* 締切時刻の時間帯プリセット（朝/昼/夕/夜）。横並びチップ。 */
.time-presets { display:flex; gap:6px; flex-wrap:wrap; justify-content:center; margin-bottom:12px; }
.time-presets .btn-ghost { flex:1 1 0; min-width:64px; padding:8px 6px; font-size:13px; white-space:nowrap; }
.wheels { position:relative; display:flex; justify-content:center; align-items:center; gap:6px; height:200px; }
.wheel { height:200px; flex:0 0 76px; text-align:center;
  overflow-y:scroll; scroll-snap-type:y mandatory;
  scrollbar-width:none; -webkit-overflow-scrolling:touch; }
.wheel::-webkit-scrollbar { display:none; }
.wheel-pad { height:80px; flex:none; } /* (200-40)/2、上下の中央寄せ用スペーサ */
.wheel-item { height:40px; line-height:40px; scroll-snap-align:center;
  font-family:var(--mono); font-size:22px; color:var(--ink-soft);
  transition:color .12s, transform .12s; cursor:pointer; }
.wheel-item.on { color:var(--accent); font-weight:700; transform:scale(1.14); }
.wheel-colon { font-family:var(--mono); font-size:22px; font-weight:700; color:var(--ink); }
.wheel-mask { position:absolute; left:0; right:0; top:80px; height:40px; pointer-events:none;
  border-top:1px solid var(--rule-strong); border-bottom:1px solid var(--rule-strong); }
.sheet-actions { display:flex; gap:8px; margin-top:16px; }
.sheet-actions .btn-ghost, .sheet-actions .btn-primary { flex:1; }

/* 課題詳細のヘッダ（タイトル＋編集ボタン） */
.detail-head { display:flex; align-items:center; justify-content:space-between; gap:12px; }
.detail-head .view-title { margin:24px 0 14px; }

/* カレンダー */
.cal-head { display:flex; align-items:center; justify-content:space-between; margin-bottom:12px; }
.cal-head span { font-family:var(--serif); font-size:18px; }
.cal-head button { padding:8px 14px; }
/* minmax(0,1fr) で各列を等幅固定（1fr=minmax(auto,1fr) だと長文セルが列を広げ曜日ヘッダとずれる）。 */
.cal-dow { display:grid; grid-template-columns:repeat(7,minmax(0,1fr)); gap:5px; text-align:center;
  font-size:11px; color:var(--ink-soft); margin-bottom:6px; }
.cal-grid { display:grid; grid-template-columns:repeat(7,minmax(0,1fr)); gap:5px; }
.cal-cell { min-height:48px; border:1px solid var(--rule); border-radius:8px;
  padding:5px 4px; background:var(--panel); min-width:0; overflow:hidden; }
.cal-cell.empty { border:none; background:transparent; }
.cal-cell.has { cursor:pointer; }
.cal-cell.today { border-color: var(--accent); background: var(--accent-soft); }
.cal-cell.today .cal-num { color: var(--accent); font-weight: 700; }
.cal-cell.sel { outline:2px solid var(--accent); outline-offset:-1px; }
.cal-num { font-family:var(--mono); font-size:12px; color:var(--ink-soft); text-align:center; }
.cal-dots { display:flex; gap:3px; margin-top:5px; flex-wrap:wrap; justify-content:center; }
.cal-events { margin-top:3px; display:flex; flex-direction:column; gap:2px; min-width:0; }
.cal-ev { display:flex; align-items:center; gap:3px; font-size:9px; line-height:1.3; color:var(--ink-soft); min-width:0; }
.cal-ev .dot { flex:none; }
.cal-ev-t { min-width:0; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
.cal-more { font-size:9px; line-height:1.3; color:var(--ink-soft); }
.dot { width:7px; height:7px; border-radius:50%; display:inline-block; }
.dot.done { background:var(--accent); }
.dot.pending { background:var(--signal); }
.dot.overdue { background:var(--danger); }
.cal-legend { display:flex; gap:16px; font-size:11px; color:var(--ink-soft); margin-top:10px; }
.cal-legend span { display:flex; align-items:center; gap:5px; }
.cal-sel-label { font-family:var(--serif); font-weight:500; font-size:16px; margin:20px 0 10px; }
.cal-cell.dragover { background:var(--accent-soft); border-color:var(--accent); }
.cal-ev { cursor:grab; }
.cal-ev:active { cursor:grabbing; }
.hist { font-size:13px; }
.hist-title { font-family:var(--serif); font-size:15px; margin-bottom:8px; }
.hist-row { color:var(--ink-soft); margin:3px 0; }
.hist-row b { color:var(--ink); font-weight:700; }
.cal-item { border-left:4px solid var(--rule-strong); }
.cal-item.done { border-left-color:var(--accent); }
.cal-item.pending { border-left-color:var(--signal); }
.cal-item.overdue { border-left-color:var(--danger); }

/* メモ式の課題行 */
.task-row .task-main { display: flex; gap: 12px; align-items: flex-start; }
.task-check { width: 20px; height: 20px; flex: none; padding: 0; margin-top: 3px;
  accent-color: var(--accent); cursor: pointer; }
.task-body { flex: 1; min-width: 0; cursor: pointer; }
/* カード内は縦3行（課題名／締切・件数／進捗バー）。多カラムで狭くても課題名を表示する。
   タイトルは折り返して全文を見せる。長すぎる場合のみ2行で省略。 */
.task-body .title { display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: 2; overflow: hidden; overflow-wrap: anywhere; }
.task-row.card { padding: 14px; margin-bottom: 0; }

/* 課題一覧のレスポンシブ多カラム。最小カード幅は rem 指定でブラウザの文字サイズに追従。 */
#taskList, #completedList { display: grid; grid-template-columns: repeat(auto-fill, minmax(16rem, 1fr)); gap: 12px; align-items: start; }
#taskList > p { grid-column: 1 / -1; }
/* 広い画面ではグリッドのみビューポート幅いっぱい（列数の上限なし）に広げる。
   入力フォーム等は .app の幅のまま。94vw でスクロールバー分の溢れを回避。 */
@media (min-width: 900px) {
  #taskList, #completedList { width: 94vw; position: relative; left: 50%; transform: translateX(-50%); }
}
.task-row.done { opacity: .7; }
.task-row.done .title { color: var(--ink-soft); text-decoration: line-through; }
.task-row { cursor: grab; }
.task-row.dragging, .task-divider.dragging { opacity: .4; }

/* 課題詳細モーダル */
.modal { position: fixed; inset: 0; z-index: 60; background: rgba(27,26,23,.45);
  display: flex; align-items: flex-start; justify-content: center; overflow-y: auto; padding: 32px 12px; }
.modal-panel { background: var(--paper); width: 100%; max-width: 560px;
  border-radius: 14px; padding: 20px; box-shadow: 0 12px 40px rgba(0,0,0,.25); }
.modal .detail-head { margin-bottom: 4px; }
/* モーダルの閉じる✕は最小タップ領域を確保（誤操作・押しづらさ対策）。 */
.detail-head .btn-ghost { min-width: 44px; min-height: 44px; display: inline-flex; align-items: center; justify-content: center; padding: 6px 12px; }

/* 塊（グループ）ブロック */
.task-group { border-top: 2px solid var(--rule-strong); margin-top: 16px; padding-top: 12px; }
.task-group-title { font-family: var(--serif); font-size: 15px; color: var(--ink-soft); margin-bottom: 8px; }

/* 今に集中 */
.focus { text-align: center; padding: 28px 20px; }
.focus-parent { font-size: 13px; color: var(--ink-soft); }
.focus-title { font-family: var(--serif); font-size: 24px; line-height: 1.4; margin: 8px 0; }
.focus-est { font-size: 13px; color: var(--ink-soft); margin-bottom: 16px; }
.focus-timer { font-family: var(--mono); font-size: 40px; color: var(--signal); margin-bottom: 20px; }
.focus .btn-primary { max-width: 220px; margin: 0 auto; }

/* AI分割支援 */
#spiceRange { width: 100%; }
.bd-row { display: flex; align-items: center; gap: 10px; padding: 8px 0; border-bottom: 1px solid var(--rule); }
.bd-row:last-child { border-bottom: none; }
.bd-row input { width: 18px; height: 18px; flex: none; padding: 0; accent-color: var(--accent); }
.bd-row span { flex: 1; }

/* 区切り線（ブロック境界・ドラッグ移動可能なバンド） */
.task-divider { display:flex; align-items:center; gap:8px; margin:18px 0; cursor:grab; grid-column: 1 / -1; }
.task-divider:active { cursor:grabbing; }
.task-divider-grip { flex:none; color:var(--rule-strong); letter-spacing:-1px; user-select:none; font-size:14px; }
.task-divider-line { flex:1; border-top:2px dashed var(--rule-strong); }
.task-divider-x {
  flex:none; border:none; color:var(--danger); font-size:16px; line-height:1;
  padding:0 6px; cursor:pointer; position:relative; border-radius:6px;
  background-color:transparent;
  background-image: linear-gradient(var(--danger), var(--danger));
  background-repeat:no-repeat; background-position:left center; background-size:0% 100%;
  transition:none; /* .holding 解除時はフィルを即0%へ戻す（逆アニメを走らせない） */
  touch-action:none; user-select:none; -webkit-user-select:none; -webkit-touch-callout:none;
}
.task-divider-x.holding { transition: background-size 1s linear; background-size:100% 100%; color:#fff; }
.task-divider.drop-target { background:var(--accent-soft); border-radius:8px; }
/* カード右端のアイコンボタンは誤タップ防止に最小タップ領域を確保（40px四方・中央寄せ）。 */
.task-today-btn, .task-div-btn, .task-del-btn {
  min-width: 40px; min-height: 40px; display: inline-flex; align-items: center; justify-content: center; padding: 0; }
.task-div-btn { flex: none; background: transparent; color: var(--rule-strong); border: none; font-size: 16px; padding: 0 4px; line-height: 1; cursor: pointer; }
.task-div-btn.on { color: var(--accent); }
.task-div-btn:disabled { opacity: .3; cursor: default; }

/* 今日やる 星トグル */
.task-today-btn { flex:none; background:transparent; border:none; color:var(--rule-strong); font-size:18px; line-height:1; padding:0 4px; cursor:pointer; }
.task-today-btn.on { color:var(--signal); }

/* ゴミ箱へボタン（全カード共通） */
.task-del-btn { flex: none; background: transparent; border: none; color: var(--rule-strong); font-size: 16px; line-height: 1; padding: 0 4px; cursor: pointer; }
.task-del-btn:hover { color: var(--accent); }

/* 締切が近い課題セクション */
#deadlineSection { margin:18px 0 0; padding:14px 16px; border:1px solid var(--rule-strong); border-radius:12px; }
#deadlineSection .deadline-head { margin-bottom:8px; }
#deadlineSection .deadline-title { font-weight:700; }
#deadlineList .deadline-item { display:flex; align-items:center; gap:8px; padding:6px 0; cursor:pointer; }
#deadlineList .deadline-item + .deadline-item { border-top:1px dashed var(--rule); }
#deadlineList .deadline-item .t { flex:1; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
.deadline-badge { font-size:12px; color:var(--ink-soft); white-space:nowrap; padding:2px 8px; border-radius:99px; background:var(--accent-soft); }
.deadline-badge.urgent { color:#fff; background:var(--danger); }

/* 使い方ガイド */
.guide-note { margin:10px 0 0; padding:10px 12px; border-radius:8px; background:var(--accent-soft); color:var(--ink); font-size:13px; }
.guide-steps { margin:8px 0 0; padding-left:1.4em; }
.guide-steps > li { margin-bottom:16px; }
.guide-steps > li::marker { color:var(--accent); font-weight:700; }
.guide-steps strong { display:block; margin-bottom:4px; }
.guide-steps p { margin:0; color:var(--ink-soft); font-size:14px; line-height:1.7; }

/* 完了済み（下段）と一括ゴミ箱ボタン */
.trash-completed-wrap { text-align:center; margin:26px 0 16px; }
#completedSection .completed-head { display:flex; align-items:center; justify-content:center; gap:10px; margin-bottom:10px; }
#completedSection .completed-title { font-weight:700; color:var(--ink-soft); }
#completedSection .completed-count { color:var(--ink-soft); font-size:13px; }

/* 最上部「本日やること」エリア */
#todaySection { margin:0 0 18px; padding:14px 16px; border:1px solid var(--rule-strong); border-radius:12px; background:var(--accent-soft); }
#todaySection .today-head { display:flex; align-items:center; gap:10px; margin-bottom:10px; }
#todaySection .today-title { font-weight:700; }
#todaySection .today-count { color:var(--ink-soft); font-size:13px; }
#todayList .today-item { display:flex; align-items:center; gap:8px; padding:6px 0; cursor:pointer; }
#todayList .today-item + .today-item { border-top:1px dashed var(--rule); }

/* 「昨日から」バッジ */
.carried-badge { flex:none; font-size:11px; color:var(--danger); border:1px solid var(--danger); border-radius:999px; padding:1px 8px; }

/* 集中ビュー：本日やること一覧＋進捗 */
/* ワンライン即追加（input/btn-primary は既定 width:100% なので flex 行用に上書き） */
.focus-add { display:flex; gap:8px; margin:4px 0 16px; }
.focus-add input { flex:1 1 auto; width:auto; min-width:0; }
.focus-add button { flex:0 0 auto; width:auto; }
.today-progress { font-weight:700; margin-bottom:12px; }
.today-progress .bar { display:block; height:8px; border-radius:999px; background:var(--rule); margin-top:6px; overflow:hidden; }
.today-progress .bar > i { display:block; height:100%; background:var(--accent); }
.focus-today-item { display:flex; align-items:center; gap:10px; padding:10px 0; border-bottom:1px dashed var(--rule); }
.focus-today-item .ft-check { flex:none; width:20px; height:20px; padding:0; }
.focus-today-item .ft-title { flex:1; min-width:0; cursor:pointer; }
.focus-today-item .ft-star { background:transparent; border:none; color:var(--signal); font-size:18px; cursor:pointer;
  min-width:40px; min-height:40px; display:inline-flex; align-items:center; justify-content:center; padding:0; }
/* 今日やること並べ替え：グリップと挿入位置インジケータ */
.focus-today-item .ft-grip { flex:none; color:var(--ink-soft); cursor:grab; font-size:14px; line-height:1; user-select:none; }
.focus-today-item.dragging { opacity:.45; }
.focus-today-item.ft-drop-before { box-shadow:inset 0 2px 0 var(--accent); }
.focus-today-item.ft-drop-after { box-shadow:inset 0 -2px 0 var(--accent); }

/* 完了したものの見出し区切り＋取り消し線表示（達成感のため消さずに下へ） */
.today-done-divider, .focus-done-divider {
  margin:14px 0 4px; padding-top:10px; border-top:1px solid var(--rule);
  font-size:12px; font-weight:700; color:var(--ink-soft);
}
#todayList .today-item.today-done { cursor:pointer; opacity:.6; }
#todayList .today-item.today-done .t { text-decoration:line-through; }
.focus-today-item.focus-done { opacity:.6; }
.focus-today-item.focus-done .ft-title { text-decoration:line-through; }
.focus-rep-head { margin-top: 14px; font-size: 12px; }
.focus-rep-item { opacity: 0.95; }

/* ゴミ箱・消去 */
.task-trash { flex: none; padding: 4px 10px; font-size: 13px; }
.trash-row { display: flex; align-items: center; gap: 10px; padding: 8px 0; border-bottom: 1px solid var(--rule); }
.trash-name { flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
/* ゴミ箱 折りたたみ枠 */
/* 運営（管理者）ブロック */
.admin-box { margin-top: 18px; padding: 14px 16px; border: 1px solid var(--accent); border-radius: 12px; background: var(--accent-soft); }
.admin-box h3 { margin-top: 0; }
.admin-box h3 + p { margin-top: 0; }
/* フィードバック一覧（管理ブロック内） */
.fb-item { padding: 8px 0; border-top: 1px solid var(--rule); }
.fb-meta { display: flex; align-items: center; gap: 8px; font-size: 12px; color: var(--ink-soft); }
.fb-meta .fb-del { margin-left: auto; padding: 0 8px; line-height: 1.4; }
.fb-body { white-space: pre-wrap; margin-top: 2px; }

.trash-box { border: 1px solid var(--rule); border-radius: 12px; background: var(--panel); overflow: hidden; }
.trash-head { width: 100%; display: flex; align-items: center; justify-content: space-between;
  background: none; border: none; padding: 14px 16px; font: inherit; font-weight: 700; color: var(--ink); cursor: pointer; }
.trash-chevron { color: var(--ink-soft); }
.trash-body { padding: 0 16px 12px; }
.trash-body.hidden { display: none; }
.trash-empty { position: relative; overflow: hidden; width: 100%; margin-top: 12px; touch-action: none; user-select: none; }
.trash-empty-fill { position: absolute; inset: 0; transform: scaleX(0); transform-origin: left;
  /* 長押し進捗バー。視認性のため accent を濃いめに（ラベルは上に残り読める程度）。 */
  background: color-mix(in srgb, var(--accent) 38%, transparent); pointer-events: none; }
.trash-empty-label { position: relative; }
.task-row.drop-target { border-top: 3px solid var(--accent); margin-top: 14px; }
/* ドラッグ中：掴んだカードを隠す（スロットはプレースホルダが担う） */
.task-row.drag-hidden { display: none; }
/* ドラッグ画像用のカード複製（画面外に置いて setDragImage で撮影） */
.task-row.drag-ghost { position: fixed; top: -9999px; left: -9999px; margin: 0; pointer-events: none; box-shadow: 0 10px 24px rgba(0,0,0,.22); opacity: .95; }
/* 挿入位置の空きスロット */
.task-placeholder { border: 2px dashed var(--accent); background: var(--accent-soft); border-radius: 12px; min-height: 56px; }
.focus-guess { font-size: 13px; color: var(--ink-soft); margin-bottom: 14px; display: flex; gap: 6px; align-items: center; justify-content: center; flex-wrap: wrap; }
.focus-guess .gss { padding: 4px 8px; font-size: 12px; }

.cal-views { display: flex; gap: 6px; justify-content: center; margin-bottom: 12px; }
.cal-view-btn { background: transparent; border: 1px solid var(--rule-strong); border-radius: 8px; padding: 6px 14px; color: var(--ink-soft); }
.cal-view-btn.active { background: var(--accent); color: #fff; border-color: var(--accent); }
.cal-year { display: grid; grid-template-columns: repeat(3, 1fr); gap: 8px; }
.cal-year-cell { border: 1px solid var(--rule); border-radius: 10px; padding: 16px 10px; text-align: center; cursor: pointer; background: var(--panel); }
.cal-year-cell:hover { border-color: var(--accent); }
.cal-year-m { font-family: var(--serif); font-size: 16px; }
.cal-year-c { font-size: 12px; color: var(--signal); margin-top: 6px; min-height: 16px; }

/* 月セルを大きく */
.cal-cell { min-height: 84px; }
.cal-num { text-align: left; }
.cal-quickadd { margin-bottom: 12px; gap: 8px; }
.cal-quick-inp { flex: 1; }
/* デスクトップでカレンダーを広く（画面いっぱい寄り） */
@media (min-width: 720px) {
  #view-calendar { width: 92vw; max-width: 1100px; position: relative; left: 50%; transform: translateX(-50%); }
  .cal-cell { min-height: 110px; }
}

.cal-timeline { display: block; }
.tl-wrap { display: flex; align-items: flex-start; max-height: 70vh; overflow-y: auto; border: 1px solid var(--rule); border-radius: 8px; }
.tl-gutter { flex: none; width: 46px; }
.tl-colhead { height: 24px; font-size: 12px; text-align: center; border-bottom: 1px solid var(--rule); position: sticky; top: 0; background: var(--panel); z-index: 2; }
.tl-spacer { background: var(--panel); }
.tl-hr { height: 48px; font-size: 11px; color: var(--ink-soft); text-align: right; padding-right: 4px; box-sizing: border-box; border-top: 1px solid var(--rule); }
.tl-col { flex: 1; position: relative; border-left: 1px solid var(--rule); min-width: 0; }
.tl-body { position: relative; }
.tl-slot { height: 48px; border-top: 1px solid var(--rule); cursor: pointer; }
.tl-slot:hover { background: var(--accent-soft); }
.tl-task { position: absolute; left: 2px; right: 2px; background: var(--accent); color: #fff; border-radius: 6px; font-size: 11px; line-height: 1.2; padding: 2px 4px; overflow: hidden; cursor: grab; z-index: 1; }
.tl-task.done { opacity: .6; text-decoration: line-through; }
.tl-slot.tl-drop { background: var(--accent-soft); box-shadow: inset 0 2px 0 var(--accent); }
/* 今日の列を強調 */
.tl-col.tl-today { background: color-mix(in srgb, var(--accent-soft) 55%, var(--panel)); }
.tl-col.tl-today .tl-colhead { background: var(--accent-soft); color: var(--accent); font-weight: 700; }

/* 成長レポート（あなたの傾向） */
.growth-row { display: flex; align-items: center; gap: 8px; margin: 6px 0; font-size: 13px; }
.growth-name { flex: 0 0 88px; color: var(--ink-soft); }
.growth-bar { flex: 1; height: 8px; background: var(--accent-soft); border-radius: 99px; overflow: hidden; }
.growth-bar > i { display: block; height: 100%; background: var(--accent); }

/* ===== こどもモード：ビビッドレインボー（色変数の上書き） ===== */
html[data-mode="kodomo"] {
  --ink:#241c33; --ink-soft:#6a5f80;
  --paper:#faf7ff; --panel:#ffffff;
  --rule:#ece4fb; --rule-strong:#d8c9f5;
  --accent:#7048e8; --accent-soft:#efe9ff;   /* 主操作=紫 */
  --signal:#f03e9e; --signal-soft:#ffe3f1;   /* 進行中・締切=ホットピンク */
  --danger:#e8590c;                          /* 期限超過=オレンジ寄りの赤 */
}

/* ===== ダークモード（OS設定に追従。色は全て変数経由なので上書きのみ） =====
   #fff はアクセント/危険ボタン上の文字なので不変。中間色サーフェスのみ反転し、
   アクセントは暗背景で文字としても読めるよう明るめに調整する。 */
@media (prefers-color-scheme: dark) {
  :root {
    --ink:#e8e6e1; --ink-soft:#a9a399; --paper:#15171c; --panel:#1f232a;
    --rule:#2b303a; --rule-strong:#3c4250;
    --accent:#7fae87; --accent-soft:#1e2a22;
    --signal:#d98a4a; --signal-soft:#2a2018; --danger:#e06b5c;
  }
  html[data-mode="kodomo"] {
    --ink:#ece8f5; --ink-soft:#b3a8cf; --paper:#16131f; --panel:#221d2e;
    --rule:#2f2842; --rule-strong:#463b60;
    --accent:#a98bff; --accent-soft:#241a33;
    --signal:#ff6fb0; --signal-soft:#33172a; --danger:#f0784a;
  }
  /* 塗りボタン等は明るくなったアクセント上で白だと読みにくいので、文字を暗色に。 */
  .btn-primary, .btn-danger, .btn-signal,
  .toast-ok, .mode-toggle button.active, .cal-view-btn.active,
  .deadline-badge.urgent, .dom-wheel-item.sel, .tl-task { color:#15171c; }
  /* トーストは bg に var(--ink) を使う設計のためダークで反転する。専用色に固定。 */
  .toast { background:#2a2f38; color:#f3f1ec; border:1px solid var(--rule-strong); }
}

/* ===== モード切替トグル（管理ビューの設定欄） ===== */
.settings { margin-top:8px; }
.settings-label { font-family:var(--serif); font-size:15px; margin:20px 0 10px; }
.mode-toggle { display:inline-flex; border:1px solid var(--rule-strong);
  border-radius:10px; overflow:hidden; }
.mode-toggle button { background:var(--panel); color:var(--ink-soft);
  padding:10px 22px; font-weight:700; border-right:1px solid var(--rule-strong); }
.mode-toggle button:last-child { border-right:none; }
.mode-toggle button.active { background:var(--accent); color:#fff; }
.growth-val { flex: 0 0 auto; font-family: var(--mono); font-size: 12px; color: var(--ink-soft); min-width: 72px; text-align: right; }

/* 今日のおすすめ（AI） */
.recommend-row { margin-top: 14px; display: flex; gap: 8px; align-items: stretch; flex-wrap: wrap; }
.recommend-row #recommendToday { flex: 1 1 200px; width: auto; }
/* 長押しボタン共通（押下中の塗りつぶし演出用）。.trash-empty-fill/.trash-empty-label を流用。 */
.hold-btn { position: relative; overflow: hidden; touch-action: none;
  user-select: none; -webkit-user-select: none; -webkit-touch-callout: none; }
.hold-btn * { -webkit-user-select: none; user-select: none; -webkit-touch-callout: none; }
.btn-compact { flex: 0 0 auto; padding: 6px 10px; font-size: 12px; }
.recommend-bar {
  display: flex; flex-direction: column; gap: 10px;
  margin-top: 12px; padding: 14px;
  border: 1px solid var(--accent); border-radius: 12px; background: var(--accent-soft);
}
.recommend-bar.hidden { display: none; }
.recommend-bar-text { font-weight: 600; color: var(--ink); }
.recommend-list { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 8px; }
.recommend-item {
  display: flex; align-items: center; justify-content: space-between; gap: 10px;
  padding: 8px 10px; background: var(--panel);
  border: 1px solid var(--rule); border-radius: 10px;
}
.recommend-item-main { display: flex; flex-direction: column; gap: 2px; min-width: 0; }
.recommend-item-title { font-weight: 600; color: var(--ink); }
.recommend-item-why { font-size: 12px; color: var(--accent); }
.recommend-item-remove { flex: none; padding: 2px 12px; font-size: 13px; }
.recommend-bar-actions { display: flex; gap: 8px; justify-content: flex-end; }
.task-today-btn.preview { animation: previewPulse 1.2s ease-in-out infinite; }
@keyframes previewPulse { 0%,100% { opacity: 1; } 50% { opacity: .45; } }
.today-reason {
  display: inline-block; margin-top: 4px; padding: 1px 8px;
  font-size: 12px; color: var(--accent);
  border: 1px solid var(--accent); border-radius: 999px; background: var(--panel);
}

/* 振り返り（達成ヒートマップ） */
.lookback { margin: 8px 0 20px; }
.lookback-head { font-size: 13px; color: var(--ink); margin-bottom: 8px; }
.heatmap {
  display: grid; grid-template-columns: repeat(53, 1fr); grid-template-rows: repeat(7, auto);
  grid-auto-flow: column; gap: 2px; width: 100%;
}
.heat-cell { width: 12px; height: 12px; border-radius: 2px; background: var(--rule); display: inline-block; }
/* グリッド内は横幅に1年が収まるよう可変・正方形に（凡例スウォッチは上の固定サイズのまま） */
.heatmap .heat-cell { width: 100%; height: auto; aspect-ratio: 1; border-radius: 1px; }
.heat-cell.empty { background: transparent; }
.heat-cell.lv0 { background: var(--rule); }
.heat-cell.lv1 { background: var(--accent); opacity: .25; }
.heat-cell.lv2 { background: var(--accent); opacity: .5; }
.heat-cell.lv3 { background: var(--accent); opacity: .75; }
.heat-cell.lv4 { background: var(--accent); opacity: 1; }
.heat-legend { display: flex; align-items: center; gap: 4px; margin-top: 8px; font-size: 12px; color: var(--ink); }
.lookback-stats { display: flex; flex-wrap: wrap; gap: 12px; margin-top: 14px; font-size: 13px; color: var(--ink); }
.lookback-stats span { font-weight: 600; }
.month-bars { display: flex; align-items: flex-end; gap: 2px; height: 60px; margin-top: 10px; }
.month-bar { flex: 1; min-width: 3px; background: var(--accent-soft); border-radius: 2px; display: flex; align-items: flex-end; }
.month-bar i { display: block; width: 100%; background: var(--accent); border-radius: 2px; min-height: 1px; }

/* 締切ポップオーバーカレンダー */
.date-trigger { font-family:var(--sans); text-align:left; }
.date-pop { position:absolute; z-index:60; width:280px; max-width:calc(100vw - 24px);
  background:var(--panel); border:1px solid var(--rule); border-radius:12px;
  box-shadow:0 8px 24px rgba(27,26,23,.18); padding:12px; }
.date-pop-head { display:flex; align-items:center; justify-content:space-between; margin-bottom:8px; }
.date-pop-title { font-family:var(--sans); font-size:15px; }
.date-pop-nav { padding:4px 12px; }
.date-pop-dow { display:grid; grid-template-columns:repeat(7,1fr); text-align:center;
  font-size:11px; color:var(--ink-soft); margin-bottom:4px; }
.date-pop-grid { display:grid; grid-template-columns:repeat(7,1fr); gap:3px; }
.date-pop-cell { height:34px; border:1px solid transparent; border-radius:8px;
  font-family:var(--mono); font-size:13px; color:var(--ink); background:var(--panel);
  cursor:pointer; display:flex; align-items:center; justify-content:center; }
.date-pop-cell.muted { color:var(--ink-soft); opacity:.5; }
.date-pop-cell.past { opacity:.45; }
.date-pop-cell.today { border-color:var(--accent); background:var(--accent-soft);
  color:var(--accent); font-weight:700; }
.date-pop-cell.sel { background:var(--accent); color:var(--panel); border-color:var(--accent); }
.date-pop-quick { display:flex; gap:6px; margin-top:10px; }
.date-pop-quick .btn-ghost { flex:1; padding:6px 8px; font-size:13px; }
.date-pop-clear { margin-top:8px; width:100%; color:var(--ink-soft); font-size:13px; }

/* 週タイムラインのスロット内インライン入力（OS prompt の置き換え） */
.tl-slot-edit { display:flex; gap:6px; align-items:center; height:100%;
  padding:4px 6px; box-sizing:border-box; background:var(--panel);
  position:relative; z-index:2; }
.tl-slot-edit input { flex:1 1 auto; width:auto; min-width:0; }
.tl-slot-edit button { flex:0 0 auto; width:auto; padding:6px 12px; font-size:13px; }

/* 月表示クイック追加：ボタンの既定 width:100% を解除して小さく（入力欄を広く） */
.cal-quickadd .btn-primary { flex:0 0 auto; width:auto; padding:10px 16px; }

/* 音声入力：テキスト欄の右に録音ボタン（アイコン＋「音声入力」）を並べる */
.task-input-row { display: flex; gap: 8px; align-items: stretch; }
.task-input-row textarea { flex: 1; }
.voice-btn { flex: 0 0 auto; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 7px; padding: 6px 10px; }
.voice-btn .voice-ico { font-size: 20px; line-height: 1; }
.voice-btn .voice-cap { font-size: 11px; line-height: 1; white-space: nowrap; }
.voice-btn.recording { animation: voicePulse 1s ease-in-out infinite; }
@keyframes voicePulse { 0%, 100% { opacity: 1; } 50% { opacity: .55; } }

/* 締切自動抽出 確認モーダル: 各行のタイトル＋締切バッジ */
.parse-row { display: flex; align-items: center; justify-content: space-between; gap: 8px; padding: 8px 0; border-bottom: 1px solid var(--rule); }
.parse-row-title { flex: 1 1 auto; word-break: break-word; }
.parse-row-badge { flex: 0 0 auto; font-size: 12px; }

.repeating-section { margin-top: 18px; }
.repeat-row { display: flex; align-items: center; gap: 10px; padding: 10px 0; border-bottom: 1px solid var(--rule); }
.repeat-row .rep-body { flex: 1 1 auto; display: flex; flex-direction: column; }
.repeat-row .rep-meta { font-size: 12px; }
.repeat-row.due .rep-title { font-weight: 700; color: var(--accent); }
/* 完了直後は達成感のため取り消し線で残す（次に開くと次回予定へ戻る）。 */
.repeat-row.done .rep-title { color: var(--ink-soft); text-decoration: line-through; }
.repeat-row.done .rep-meta { color: var(--accent); }
.repeat-row .rep-del { flex: none; padding: 4px 10px; }
/* グローバルの input{width:100%} を打ち消す小型チェックボックス（繰り返し／サブタスク）。 */
.rep-check, .sub-check { width: 20px; height: 20px; flex: none; padding: 0; margin: 0;
  accent-color: var(--accent); cursor: pointer; }

/* 繰り返し（毎月）の日選択ホイール */
.dom-wheel { position:relative; width:88px; height:180px; overflow-y:scroll;
  scroll-snap-type:y mandatory; -webkit-overflow-scrolling:touch;
  border:1px solid var(--rule-strong); border-radius:10px; scrollbar-width:none; }
.dom-wheel::-webkit-scrollbar { display:none; }
.dom-wheel-item { height:36px; line-height:36px; text-align:center;
  scroll-snap-align:center; font-weight:700; color:var(--ink-soft); cursor:pointer;
  opacity:.4; transition:opacity .15s ease, color .15s ease; }
.dom-wheel-item.sel { color:#fff; opacity:1; background:var(--accent); border-radius:8px; }
.dom-wheel-center { position:absolute; top:72px; left:0; right:0; height:36px;
  border-top:1px solid var(--rule); border-bottom:1px solid var(--rule); pointer-events:none; }