/* ===== TasQ — style.css =====
   Base: plans/screens-mockup.html の <style> をそのまま採用
   追加: アプリ固有スタイル（モーダル、フォーム、etc.）
   ルール: 同一クラスの二重定義禁止 / CSS変数は :root のもののみ
   ================================================================ */

/* ── Reset ── */
*,*::before,*::after{box-sizing:border-box;margin:0;padding:0}

/* ── CSS変数（モックアップ準拠 + TaskLab青緑系） ── */
:root{
  --pri:#0ea5e9;--pri-d:#0284c7;--pri-l:#e0f2fe;
  --ok:#22c55e;--ok-l:#dcfce7;
  --warn:#f59e0b;--warn-l:#fef3c7;
  --err:#ef4444;--err-l:#fee2e2;
  --text:#1e293b;--muted:#64748b;
  --border:#e2e8f0;--bg:#f8fafc;--card:#fff;
  --r:8px;--rs:4px;
  --sidebar:220px;
}

/* ── Body ── */
body{font-family:-apple-system,BlinkMacSystemFont,'Segoe UI','Hiragino Sans',sans-serif;background:var(--bg);color:var(--text);font-size:14px;line-height:1.6;height:100vh;display:flex;flex-direction:column}

/* ── タイポグラフィ階層 ── */
h1{font-size:22px;font-weight:800;line-height:1.3}
h2{font-size:18px;font-weight:700;line-height:1.4}
h3{font-size:15px;font-weight:700;line-height:1.4}

/* ── ヘッダー ── */
.ah{background:var(--card);border-bottom:1px solid var(--border);padding:0 20px;height:54px;display:flex;align-items:center;gap:10px;flex-shrink:0;position:sticky;top:0;z-index:50}
.ah-logo{font-size:17px;font-weight:800;color:var(--pri);letter-spacing:-.3px;background:none;border:none;cursor:pointer;padding:0;display:inline-flex;align-items:center;gap:7px}
.ah-logo-icon{width:26px;height:26px;flex-shrink:0;border-radius:6px}
.ah-logo span{color:var(--text);font-weight:400;font-size:13px;margin-left:4px;opacity:.5}
.ah-space{flex:1}

/* ハンバーガーはデフォルト非表示、モバイルで表示 */
.ah-hamburger{display:none;background:none;border:none;font-size:20px;cursor:pointer;color:var(--text);padding:4px}

/* ── ボタン ── */
.btn{padding:7px 13px;border-radius:var(--rs);border:none;cursor:pointer;font-size:13px;font-weight:500;display:inline-flex;align-items:center;gap:5px;line-height:1;transition:opacity .15s}
.btn:hover{opacity:.85}
.btn:disabled{opacity:.5;cursor:not-allowed}
.btn-pri{background:var(--pri);color:#fff}
.btn-sec{background:var(--bg);color:var(--text);border:1px solid var(--border)}
.btn-ghost{background:transparent;color:var(--muted)}
.btn-ghost:hover{background:var(--bg)}
.btn-sm{padding:5px 10px;font-size:12px}
.btn-danger{background:var(--err);color:#fff}
.btn-danger-soft{background:var(--err-l);color:var(--err)}
.btn-lg{padding:11px 24px;font-size:15px}
.btn-icon{background:none;border:none;cursor:pointer;padding:4px;border-radius:var(--rs);color:var(--muted);font-size:16px;line-height:1;display:inline-flex;align-items:center}
.btn-icon:hover{background:var(--bg)}

/* ユーザーチップ */
.user-chip{display:flex;align-items:center;gap:6px;font-size:13px;color:var(--muted);cursor:pointer}
.user-avatar{width:28px;height:28px;border-radius:50%;background:var(--pri-l);color:var(--pri-d);display:flex;align-items:center;justify-content:center;font-size:12px;font-weight:700}

/* ── レイアウト ── */
.layout{display:flex;flex:1;overflow:hidden}

/* ── サイドバー ── */
.sidebar{width:var(--sidebar);background:var(--card);border-right:1px solid var(--border);display:flex;flex-direction:column;padding:12px 8px;gap:0;overflow-y:auto;flex-shrink:0}
.sb-label{font-size:11px;font-weight:700;color:var(--muted);padding:4px 8px;letter-spacing:.05em;text-transform:uppercase}
/* ── スマートレビュー 3軸セクション ── */
.sb-axis{display:flex;flex-direction:column;gap:2px;padding:4px 0}
.sb-axis + .sb-axis{margin-top:8px;padding-top:12px;border-top:2px solid var(--border)}
.sb-axis-head{display:flex;align-items:center;gap:8px;padding:4px 8px;border-radius:var(--rs);transition:background .1s}
.sb-axis-head:hover{background:var(--bg)}
.sb-axis-badge{display:inline-flex;align-items:center;justify-content:center;width:26px;height:26px;border-radius:7px;font-size:14px;flex-shrink:0}
.sb-badge-blue{background:var(--pri-l)}
.sb-badge-violet{background:#ede9fe}
.sb-badge-amber{background:#fef3c7}
.sb-axis-title{font-size:12px;font-weight:700;color:var(--text);letter-spacing:.01em;flex:1}
.sb-axis-chevron{font-size:10px;color:var(--muted);margin-left:auto}
.sb-axis-head:hover .sb-axis-chevron{color:var(--text)}
.sb-axis-body{display:flex;flex-direction:column;gap:1px;padding-left:10px}
.sb-axis-body .ms-mini{margin-left:8px}
.sb-item{display:flex;align-items:center;gap:8px;padding:7px 8px;border-radius:var(--rs);cursor:pointer;font-size:13px;color:var(--text);border:none;background:none;width:100%;text-align:left;transition:background .1s}
.sb-item:hover{background:var(--bg)}
.sb-item.active{background:var(--pri-l);color:var(--pri-d);font-weight:600}
.sb-item .icon{font-size:15px;width:20px;text-align:center}
.sb-item .count{margin-left:auto;font-size:11px;font-weight:700;background:var(--border);color:var(--muted);padding:1px 6px;border-radius:10px}
.sb-item.active .count{background:var(--pri);color:#fff}
.sb-item.overdue .count{background:var(--err-l);color:var(--err)}
.sb-divider{height:1px;background:var(--border);margin:8px 0}

/* 目標ミニカード */
.ms-mini{padding:6px 8px;border-radius:var(--rs);cursor:pointer;border-left:3px solid transparent;margin-bottom:2px;transition:background .1s}
.ms-mini:hover{background:var(--bg)}
.ms-head{display:flex;align-items:center;gap:4px}
.ms-name{font-size:12px;font-weight:600;color:var(--text);flex:1;min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.ms-actions{display:flex;gap:2px;flex-shrink:0;opacity:0;transition:opacity .15s}
.ms-mini:hover .ms-actions{opacity:1}
.ms-act-btn{background:none;border:none;cursor:pointer;font-size:11px;color:var(--muted);padding:2px 4px;border-radius:4px;line-height:1;transition:background .1s,color .1s}
.ms-act-btn:hover{background:var(--border);color:var(--text)}
.ms-act-del:hover{background:var(--err-l);color:var(--err)}
.ms-date{font-size:11px;color:var(--muted);margin-top:1px}
.ms-bar{height:3px;background:var(--border);border-radius:2px;margin-top:5px}
.ms-fill{height:100%;border-radius:2px}
/* アクティブな目標/カテゴリカードの強調 */
.ms-mini.ms-active{background:var(--pri-l)}
.ms-mini.ms-active .ms-name{color:var(--pri-d);font-weight:700}
/* 閉じた軸ヘッダーにアクティブフィルターがある場合 */
.sb-axis-title-wrap{flex:1;display:flex;flex-direction:column;gap:1px;min-width:0}
.sb-axis-hint{font-size:10px;color:var(--pri-d);font-weight:600;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.sb-axis-head--active .sb-axis-badge{outline:2px solid var(--pri);outline-offset:1px}

/* ── メインエリア ── */
.main{flex:1;overflow-y:auto;display:flex;flex-direction:column}

/* ── サマリバー ── */
.summary-bar{display:flex;gap:12px;padding:16px 20px 0;flex-shrink:0}
.sm-card{background:var(--card);border:1px solid var(--border);border-radius:var(--r);padding:12px 16px;flex:1;min-width:0}
.sm-card.sm-err{border-color:#fca5a5;background:var(--err-l)}
.sm-card.sm-ok{border-color:#86efac;background:var(--ok-l)}
.sm-card.sm-warn{border-color:#fcd34d;background:var(--warn-l)}
.sm-num{font-size:26px;font-weight:800;line-height:1}
.sm-card.sm-err .sm-num{color:var(--err)}
.sm-card.sm-ok .sm-num{color:#16a34a}
.sm-card.sm-warn .sm-num{color:#d97706}
.sm-label{font-size:11px;color:var(--muted);margin-top:3px}

/* ── ビュータブ ── */
.view-tabs{display:flex;gap:4px;padding:16px 20px 0;flex-shrink:0}
.vtab{padding:6px 14px;border-radius:20px;font-size:13px;font-weight:500;cursor:pointer;border:1px solid transparent;color:var(--muted);background:none;transition:background .1s}
.vtab.active{background:var(--pri);color:#fff;border-color:var(--pri)}
.vtab:hover:not(.active){background:var(--border)}

/* ── フィルター行 ── */
.filter-row{display:flex;gap:8px;align-items:center;padding:12px 20px;flex-shrink:0}
.search-box{flex:1;display:flex;align-items:center;gap:6px;background:var(--card);border:1px solid var(--border);border-radius:var(--rs);padding:6px 10px;color:var(--muted);font-size:13px}
.search-input{border:none;background:transparent;outline:none;flex:1;font-size:13px;color:var(--text)}
/* 検索ボックス内のマイクボタンはボーダーなしでコンパクトに */
.search-box .voice-btn{width:26px;height:26px;font-size:14px;border:none;background:none;color:var(--muted)}
.search-box .voice-btn.listening{background:var(--pri);color:#fff;border-radius:50%}
.search-input::placeholder{color:var(--muted)}
.filter-chip{padding:4px 10px;border-radius:20px;font-size:12px;border:1px solid var(--border);background:var(--card);color:var(--muted);cursor:pointer;transition:all .1s}
.filter-chip:hover{border-color:var(--pri);color:var(--pri-d)}
.filter-chip.on{background:var(--pri-l);color:var(--pri-d);border-color:var(--pri)}
.filter-clear-btn{background:var(--err-l);color:var(--err);border-color:var(--err);font-weight:600}
.filter-clear-btn:hover{background:var(--err);color:#fff;border-color:var(--err)}
.view-toggle{display:flex;gap:2px;background:var(--border);border-radius:var(--rs);padding:2px}
.vt-btn{padding:4px 8px;border-radius:var(--rs);font-size:14px;cursor:pointer;border:none;background:none;color:var(--muted);transition:background .1s}
.vt-btn.active{background:var(--card);color:var(--text)}

/* ── タスクリスト ── */
.task-list{padding:0 20px 20px;display:flex;flex-direction:column;gap:6px}
.date-group{margin-top:4px}
.dg-label{font-size:11px;font-weight:700;color:var(--muted);padding:8px 0 4px;letter-spacing:.03em;display:flex;align-items:center;gap:8px}
.dg-label::after{content:'';flex:1;height:1px;background:var(--border)}

/* ── タスクカード ── */
.tcard{background:var(--card);border:1px solid var(--border);border-radius:10px;overflow:hidden;transition:box-shadow .15s,transform .15s;border-left:3px solid var(--border)}
.tcard:hover{box-shadow:0 4px 12px rgba(0,0,0,.09);transform:translateY(-1px)}
.tcard.overdue{border-left-color:var(--err)}
.tcard.today{border-left-color:var(--pri)}
.tcard.status-inprogress{border-left-color:var(--pri)}
.tcard.status-done{border-left-color:var(--ok)}
.tcard.status-cancelled{border-left-color:#cbd5e1}
.tcard.done{opacity:.65}

/* タスク行 */
.ti-row{display:flex;align-items:center;gap:10px;padding:11px 14px;cursor:pointer}
.tcard.done .ti-title{text-decoration:line-through;color:var(--muted)}

.ti-check{width:18px;height:18px;border-radius:50%;border:2px solid var(--border);flex-shrink:0;display:flex;align-items:center;justify-content:center;color:transparent;font-size:11px;cursor:pointer;transition:background .15s,border-color .15s}
.ti-check:hover{border-color:var(--ok)}
.tcard.done .ti-check{background:var(--ok);border-color:var(--ok);color:#fff}

.ti-body{flex:1;min-width:0}
.ti-title{font-size:13px;font-weight:600;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;line-height:1.5}
.ti-meta{display:flex;align-items:center;gap:6px;margin-top:4px;flex-wrap:wrap}

.ti-due{font-size:11px;color:var(--muted);font-weight:500}
.ti-due.today{color:var(--pri);font-weight:700}
.ti-due.overdue{color:var(--err);font-weight:700}
.ti-ms{font-size:11px;padding:2px 8px;border-radius:20px;font-weight:600;letter-spacing:.01em}
.pri-dot{width:7px;height:7px;border-radius:50%;flex-shrink:0}
.pri-hi{background:var(--err)}
.pri-mid{background:var(--warn)}
.pri-lo{background:#94a3b8}
.ti-cat{font-size:11px;color:var(--muted);background:var(--bg);padding:2px 8px;border-radius:20px;border:1px solid var(--border);font-weight:500}
.ti-repeat{font-size:11px;color:var(--muted);background:var(--bg);padding:2px 8px;border-radius:20px;border:1px solid var(--border);cursor:default;white-space:nowrap;position:relative;font-weight:500}

/* カスタムツールチップ（.has-tip） */
.has-tip{position:relative}
.has-tip::after{
  content:attr(data-tip);
  position:absolute;
  bottom:calc(100% + 6px);
  left:50%;
  transform:translateX(-50%);
  background:#1e293b;
  color:#f1f5f9;
  font-size:12px;
  line-height:1.5;
  padding:7px 11px;
  border-radius:7px;
  white-space:pre-line;
  width:max-content;
  max-width:220px;
  pointer-events:none;
  opacity:0;
  transition:opacity .15s;
  z-index:200;
  box-shadow:0 4px 14px rgba(0,0,0,.25);
}
.has-tip:hover::after{opacity:1}

/* チェックリストバッジ（右端） */
.ti-right{display:flex;align-items:center;gap:6px;flex-shrink:0}
.cl-badge{display:flex;align-items:center;gap:4px;font-size:11px;color:var(--muted);background:var(--bg);border:1px solid var(--border);padding:2px 8px;border-radius:10px;cursor:pointer;user-select:none;transition:background .1s}
.cl-badge:hover{background:var(--pri-l);border-color:var(--pri);color:var(--pri-d)}
.cl-badge.open{background:var(--pri-l);border-color:var(--pri);color:var(--pri-d)}
.cl-badge .arrow{font-size:10px;transition:transform .2s}
.cl-badge.open .arrow{transform:rotate(90deg)}
.cl-done-all{background:var(--ok-l);border-color:#86efac;color:#16a34a}
.cl-done-all:hover{background:var(--ok-l)}

/* ── チェックリストパネル ── */
.cl-panel{display:none;border-top:1px solid var(--border);background:#fafcff;padding:8px 14px 10px}
.cl-panel.open{display:block}

.cl-progress{display:flex;align-items:center;gap:8px;margin-bottom:8px}
.cl-pbar{flex:1;height:4px;background:var(--border);border-radius:2px}
.cl-pfill{height:100%;border-radius:2px;background:var(--pri);transition:width .3s}
.cl-pfill.done-all{background:var(--ok)}
.cl-pct{font-size:11px;color:var(--muted);white-space:nowrap}

.cl-item{display:flex;align-items:center;gap:8px;padding:5px 0;border-bottom:1px solid var(--border)}
.cl-item:last-of-type{border-bottom:none}
.cl-item-check{width:16px;height:16px;border-radius:3px;border:2px solid var(--border);flex-shrink:0;display:flex;align-items:center;justify-content:center;font-size:10px;color:transparent;cursor:pointer;transition:background .15s,border-color .15s}
.cl-item-check:hover{border-color:var(--ok)}
.cl-item-check.checked{background:var(--ok);border-color:var(--ok);color:#fff}
.cl-item-label{font-size:12px;color:var(--text);flex:1}
.cl-item-label.checked{text-decoration:line-through;color:var(--muted)}
.cl-add{display:flex;align-items:center;gap:6px;margin-top:6px;cursor:pointer;color:var(--muted);font-size:12px;padding:3px 0}
.cl-add:hover{color:var(--pri)}

/* ── カレンダービュー（Sprint 3 完全実装） ── */
.cal-view{padding:16px 20px;display:none;flex-direction:column}
.cal-view.active{display:flex}
.cal-placeholder{padding:48px;text-align:center;color:var(--muted);font-size:13px;background:var(--card);border:1px solid var(--border);border-radius:var(--r)}
.cal-header{display:flex;align-items:center;gap:12px;margin-bottom:12px}
.cal-month{font-size:15px;font-weight:700;flex:1;text-align:center}
.cal-grid{display:grid;grid-template-columns:repeat(7,1fr);gap:1px;background:var(--border);border:1px solid var(--border);border-radius:var(--r);overflow:hidden}
.cal-dow{background:var(--bg);text-align:center;padding:6px 0;font-size:11px;font-weight:700;color:var(--muted)}
.cal-day{background:var(--card);min-height:72px;padding:6px;cursor:pointer}
.cal-day:hover{background:#f0f7ff}
.cal-day.other{background:#f8fafc;opacity:.8}
.cal-day.other:hover{background:#ecf5ff}
.cal-day.past-cell{background:#fafafa}
.cal-day.today-cell{background:#f0f9ff}
.cal-day.today-cell:hover{background:#e0f2fe}
.cal-dn{font-size:11px;font-weight:600;color:var(--muted);margin-bottom:3px}
.cal-day.today-cell .cal-dn{width:20px;height:20px;background:var(--pri);color:#fff;border-radius:50%;display:flex;align-items:center;justify-content:center}
.cal-task{font-size:11px;padding:2px 5px;border-radius:3px;margin-bottom:2px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;cursor:pointer;transition:opacity .1s}
.cal-task:hover{opacity:.8}
.cal-task.ms-none{background:#f1f5f9;color:var(--muted)}
.cal-task.pri-hi-bg{background:var(--err-l);color:var(--err)}
.cal-more{font-size:10px;color:var(--muted);cursor:pointer;padding:1px 4px;border-radius:3px}
.cal-more:hover{background:var(--border);color:var(--text)}
/* カレンダーポップオーバー（+N件クリック時） */
.cal-popover{position:fixed;background:var(--card);border:1px solid var(--border);border-radius:var(--r);box-shadow:0 4px 20px rgba(0,0,0,.15);z-index:80;min-width:220px;max-width:300px;padding:8px}
.cal-popover-title{font-size:12px;font-weight:700;color:var(--muted);padding:4px 8px 8px;border-bottom:1px solid var(--border);margin-bottom:4px}
.cal-popover-item{padding:6px 8px;font-size:12px;color:var(--text);cursor:pointer;border-radius:var(--rs)}
.cal-popover-item:hover{background:var(--bg)}
.cal-popover-close{position:absolute;top:6px;right:6px;background:none;border:none;cursor:pointer;color:var(--muted);font-size:14px;line-height:1}

/* ── 軸ピッカー（モバイル専用） ── */
.axis-picker{position:fixed;bottom:68px;right:8px;background:var(--card);border:1px solid var(--border);border-radius:12px;box-shadow:0 4px 20px rgba(0,0,0,.15);padding:6px;z-index:95}
.ap-btn{display:flex;align-items:center;gap:10px;padding:11px 20px;border:none;background:none;cursor:pointer;border-radius:8px;font-size:14px;font-weight:500;color:var(--text);white-space:nowrap;width:100%;text-align:left;transition:background .1s}
.ap-btn:hover{background:var(--bg)}
.ap-btn.active{color:var(--pri);font-weight:700}
@media(min-width:641px){.axis-picker{display:none !important}}

/* ── ボトムナビ（モバイル専用） ── */
.bottom-nav{display:none;position:fixed;bottom:0;left:0;right:0;background:var(--card);border-top:1px solid var(--border);height:60px;z-index:90}
.bn-list{display:flex;height:100%;width:100%}
/* スクロール可能なアイテム領域 */
.bn-items{flex:1;display:flex;overflow-x:auto;-webkit-overflow-scrolling:touch;scrollbar-width:none}
.bn-items::-webkit-scrollbar{display:none}
.bn-item{flex:1;min-width:60px;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:3px;cursor:pointer;border:none;background:none;color:var(--muted);font-size:10px;font-weight:500;padding:0 4px;position:relative;transition:color .1s}
/* ゴミ箱・☰ ボタンは右端に固定（.bn-item より後に書いて flex:1 を上書き） */
.bn-item.bn-trash-btn{flex:none;width:52px;border-left:1px solid var(--border)}
.bn-item.bn-trash-btn.active{color:var(--pri)}
.bn-item.bn-menu-btn{flex:none;width:52px;border-left:1px solid var(--border)}
.bn-item.active{color:var(--pri)}
.bn-item.overdue{color:var(--err)}
.bn-icon{font-size:20px;line-height:1}
.bn-badge{position:absolute;top:6px;right:calc(50% - 14px);background:var(--err);color:#fff;font-size:9px;font-weight:700;padding:1px 4px;border-radius:8px;min-width:16px;text-align:center}
.bn-empty{display:flex;align-items:center;justify-content:center;color:var(--muted);font-size:12px;padding:0 16px;flex:1}
/* クロス軸フィルターピル（表示軸 ≠ アクティブ軸のとき表示） */
.bn-cross-filter{display:none;align-items:center;flex-direction:column;justify-content:center;gap:2px;padding:0 10px;border-right:1px solid var(--border);flex-shrink:0;cursor:pointer;background:var(--pri-l);max-width:80px}
.bn-cross-filter:active{background:var(--pri);color:#fff}
.bnf-icon{font-size:16px;line-height:1}
.bnf-label{font-size:9px;font-weight:700;color:var(--pri-d);white-space:nowrap;overflow:hidden;text-overflow:ellipsis;max-width:70px;text-align:center}

/* ── FAB（モバイル用タスク追加ボタン） ── */
.fab{display:none;position:fixed;bottom:72px;right:16px;width:52px;height:52px;border-radius:50%;background:var(--pri);color:#fff;font-size:24px;border:none;cursor:pointer;box-shadow:0 4px 16px rgba(14,165,233,.4);z-index:90;align-items:center;justify-content:center}

/* ── ドロワー（モバイル用サイドバー代替） ── */
.drawer-overlay{display:none;position:fixed;inset:0;background:rgba(0,0,0,.3);z-index:200}
.drawer-overlay.open{display:block}
.drawer{position:fixed;left:-260px;top:0;bottom:0;width:260px;background:var(--card);z-index:201;transition:left .25s;overflow-y:auto;padding:16px 8px;box-shadow:4px 0 20px rgba(0,0,0,.1)}
.drawer.open{left:0}
.drawer-close{position:absolute;top:12px;right:12px;background:none;border:none;font-size:20px;cursor:pointer;color:var(--muted)}

/* ── レスポンシブ（モバイル） ── */
@media(max-width:640px){
  .sidebar{display:none}
  .bottom-nav{display:flex}
  .fab{display:flex}

  .ah{padding:0 12px;gap:8px}
  .ah .btn-ghost{display:none}
  .ah .btn-pri{display:none}
  /* モバイルはアバターのみ表示（名前テキストは省略） */
  .ah .user-chip span{display:none}
  .ah-hamburger{display:none !important}

  .summary-bar{display:grid;grid-template-columns:1fr 1fr;gap:8px;padding:12px 12px 0}
  .sm-card{padding:10px 12px}
  .sm-num{font-size:20px}
  .sm-label{font-size:10px}

  .view-tabs{padding:10px 12px 0;gap:6px;overflow-x:auto;flex-wrap:nowrap;-webkit-overflow-scrolling:touch;scrollbar-width:none}
  .view-tabs::-webkit-scrollbar{display:none}
  .vtab{white-space:nowrap;flex-shrink:0;padding:5px 12px;font-size:12px}

  .filter-row{padding:8px 12px 6px;flex-wrap:wrap;gap:6px}
  .search-box{width:100%;flex:none;order:-1}
  .filter-chip{flex-shrink:0;font-size:11px;padding:4px 10px}
  .view-toggle{margin-left:auto;flex-shrink:0}

  .task-list{padding:0 12px 80px;gap:6px}
  .ti-row{padding:10px 12px}
  .ti-title{font-size:13px;white-space:normal;display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden}
  .ti-meta{gap:4px}
  .cl-badge{font-size:10px;padding:2px 6px}

  .cl-panel{padding:8px 10px 10px}
  .cl-item-label{font-size:12px}

  /* ─ カレンダー：セルをコンパクト化、タスクはドット表示 ─ */
  .cal-view{padding:10px 12px 80px}
  .cal-header{margin-bottom:8px}
  .cal-grid{gap:0}
  .cal-dow{padding:5px 0;font-size:10px}
  .cal-day{min-height:44px;padding:3px 2px}
  .cal-dn{font-size:10px;margin-bottom:2px}
  .cal-day.today-cell .cal-dn{width:18px;height:18px;font-size:10px}
  /* タスクテキストを非表示にしてドットだけ残す */
  .cal-task{font-size:0;padding:0;width:8px;height:8px;border-radius:50%;margin:1px 1px;display:inline-block}
  .cal-more{font-size:9px}
  /* モバイル: ドット表示エリア */
  .cal-dots{display:flex;flex-wrap:wrap;gap:1px;margin-top:2px}
}

/* ── ゲートウェイ ── */
.gateway{position:fixed;inset:0;z-index:200;background:var(--bg);display:flex;align-items:center;justify-content:center}
.gw-inner{display:flex;flex-direction:column;align-items:center;gap:24px;padding:40px 24px;max-width:360px;width:100%}
.gw-logo{display:flex;align-items:center;gap:10px;align-self:center}
.gw-logo-img{width:48px;height:48px;border-radius:13px}
.gw-title{font-size:28px;font-weight:800;color:var(--pri);letter-spacing:-.5px}
.gw-sub{font-size:15px;color:var(--muted);text-align:center;margin-top:-8px;text-indent:.5em}
.gw-actions{display:flex;gap:12px;width:100%}
.gw-btn{flex:1;padding:10px;font-size:14px;font-weight:600;justify-content:center}
.gw-trial-link{background:none;border:none;cursor:pointer;color:var(--muted);font-size:13px;padding:4px 8px;border-radius:var(--rs)}
.gw-trial-link:hover{color:var(--pri)}
.gw-legal{display:flex;gap:16px;margin-top:6px}
.gw-legal a{font-size:11px;color:var(--muted);text-decoration:none;opacity:.8}
.gw-legal a:hover{color:var(--pri);opacity:1}

/* ── 試用バッジ（ヘッダー） ── */
.trial-badge{font-size:11px;font-weight:700;background:var(--warn);color:#fff;padding:2px 8px;border-radius:10px;flex-shrink:0;letter-spacing:.3px}

/* ── 試用バナー（試用モード中） ── */
.trial-banner{display:flex;align-items:center;gap:12px;background:var(--warn-l);border-bottom:2px solid var(--warn);padding:10px 20px;flex-shrink:0}
.tb-icon{font-size:18px;flex-shrink:0}
.tb-body{flex:1;min-width:0;font-size:13px;color:var(--text)}
.tb-text{color:var(--muted);margin-left:6px}
.tb-actions{display:flex;align-items:center;gap:8px;flex-shrink:0}
.tb-help{font-size:12px;color:var(--muted);text-decoration:none;white-space:nowrap;padding:5px 4px}
.tb-help:hover{color:var(--text);text-decoration:underline}
.tb-cta{font-size:12px;font-weight:600;color:#fff;background:var(--warn);border:none;padding:5px 12px;border-radius:var(--rs);cursor:pointer;white-space:nowrap}
.tb-cta:hover{background:#d97706}
.tb-login{font-size:12px;font-weight:600;color:var(--muted);background:none;border:1px solid var(--warn);padding:5px 12px;border-radius:var(--rs);cursor:pointer;white-space:nowrap}
.tb-login:hover{color:var(--text);border-color:#d97706}
@media(max-width:640px){
  .ms-action-bar{padding:6px 12px 2px}
  .trial-banner{flex-wrap:wrap;gap:6px;padding:8px 12px}
  .tb-body{width:100%}
  .tb-text{display:block;margin:2px 0 0}
  .tb-actions{width:100%}
  .tb-cta,.tb-login{flex:1;text-align:center}
}

/* ── 目標選択時アクションバー ── */
.ms-action-bar{display:flex;gap:8px;align-items:center;padding:8px 20px 4px;flex-shrink:0;flex-wrap:wrap}
.ms-action-bar.hidden{display:none}
.ab-spacer{flex:1}
.ab-del{color:var(--err)}
.ab-del:hover{background:var(--err-l)}
.ab-cat-label{font-size:13px;font-weight:600;color:var(--text)}
.btn-sm{font-size:12px;padding:5px 12px}

/* ── 軸空状態（目標・カテゴリ共通） ── */
.empty-axis{display:flex;flex-direction:column;align-items:center;justify-content:center;padding:60px 20px;gap:12px;text-align:center}
.empty-axis-title{font-size:15px;font-weight:600;color:var(--text)}
.empty-axis-actions{display:flex;gap:10px;flex-wrap:wrap;justify-content:center;margin-top:4px}

/* ── 既存タスク紐付けモーダル ── */
.link-tasks-search{width:100%;padding:8px 10px;border:1px solid var(--border);border-radius:var(--rs);font-size:13px;margin-bottom:10px;outline:none}
.link-tasks-search:focus{border-color:var(--pri)}
.link-tasks-list{max-height:320px;overflow-y:auto;display:flex;flex-direction:column;gap:4px}
.lt-item{display:flex;align-items:center;gap:10px;padding:9px 12px;border:1px solid var(--border);border-radius:var(--rs);cursor:pointer;transition:background .1s}
.lt-item:hover{background:var(--bg)}
.lt-item.selected{background:var(--pri-l);border-color:var(--pri)}
.lt-check{width:16px;height:16px;border-radius:3px;border:2px solid var(--border);flex-shrink:0;display:flex;align-items:center;justify-content:center;font-size:10px;color:transparent}
.lt-item.selected .lt-check{background:var(--pri);border-color:var(--pri);color:#fff}
.lt-info{display:flex;flex-direction:column;gap:2px;min-width:0;flex:1}
.lt-title{font-size:13px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.lt-row2{display:flex;align-items:center;gap:8px;flex-wrap:wrap}
.lt-meta{font-size:11px;color:var(--muted)}
.lt-due{font-size:11px}
.lt-due-normal{color:var(--muted)}
.lt-due-today{color:var(--pri);font-weight:600}
.lt-due-overdue{color:var(--err);font-weight:600}
.lt-empty{font-size:13px;color:var(--muted);text-align:center;padding:24px 0}

/* ── サイドバー下部ヘルプリンク ── */
.sb-footer{margin-top:auto;padding-top:8px}

/* ── トースト ── */
.toast-container{position:fixed;bottom:20px;left:50%;transform:translateX(-50%);z-index:300;display:flex;flex-direction:column;gap:8px;align-items:center}
.toast{background:#1e293b;color:#f8fafc;padding:12px 16px;border-radius:var(--r);display:flex;align-items:center;gap:12px;box-shadow:0 4px 20px rgba(0,0,0,.35);font-size:13px;white-space:nowrap;animation:toast-in .2s ease;pointer-events:auto}
.toast-hide{animation:toast-out .3s ease forwards}
@keyframes toast-in{from{opacity:0;transform:translateY(10px)}to{opacity:1;transform:translateY(0)}}
@keyframes toast-out{from{opacity:1}to{opacity:0}}

/* ── モーダルオーバーレイ ── */
.modal-overlay{position:fixed;inset:0;background:rgba(15,23,42,.65);display:flex;align-items:center;justify-content:center;z-index:100}
.modal-overlay.hidden{display:none}
.modal{background:var(--card);border-radius:12px;padding:0;max-width:520px;width:90%;box-shadow:0 24px 64px rgba(0,0,0,.35);max-height:90vh;display:flex;flex-direction:column}
.modal-sm{max-width:400px}
.modal-header{display:flex;align-items:center;justify-content:space-between;padding:18px 22px;border-bottom:1px solid var(--border);flex-shrink:0}
.modal-title{font-size:16px;font-weight:700}
.modal-body{padding:20px 22px;overflow-y:auto;flex:1}
.modal-footer{display:flex;align-items:center;justify-content:flex-end;gap:8px;padding:14px 22px;border-top:1px solid var(--border);flex-shrink:0}

/* ── フォーム ── */
.form-group{display:flex;flex-direction:column;gap:6px;margin-bottom:14px}
.form-label{font-size:13px;font-weight:600;color:var(--text)}
.required{color:var(--err)}
.form-input{padding:9px 12px;border:1px solid var(--border);border-radius:var(--rs);font-size:13px;color:var(--text);background:var(--bg);outline:none;transition:border-color .15s;width:100%}
.form-input:focus{border-color:var(--pri)}
.form-input.error{border-color:var(--err)}
.form-textarea{padding:9px 12px;border:1px solid var(--border);border-radius:var(--rs);font-size:13px;color:var(--text);background:var(--bg);outline:none;resize:vertical;transition:border-color .15s;width:100%;font-family:inherit;min-height:80px}
.form-textarea:focus{border-color:var(--pri)}
.form-select{padding:9px 12px;border:1px solid var(--border);border-radius:var(--rs);font-size:13px;color:var(--text);background:var(--bg);outline:none;cursor:pointer;width:100%}
.form-select:focus{border-color:var(--pri)}
.form-error{font-size:12px;color:var(--err)}
.form-hint{font-size:11px;color:var(--muted);line-height:1.4}
.form-row{display:flex;gap:12px}
.form-row .form-group{flex:1}

/* ── ゴミ箱 ── */
.trash-banner{margin:18px 20px 0;padding:11px 15px;background:var(--warn-l);border:1px solid #fde68a;border-radius:var(--r);font-size:13px;color:#92400e;display:flex;align-items:center;gap:8px}
.trash-list{padding:14px 20px;display:flex;flex-direction:column;gap:8px}
.titem-trash{background:var(--card);border:1px solid var(--border);border-radius:var(--r);padding:13px 16px;display:flex;align-items:center;gap:12px}
.tt-title{font-weight:500;color:var(--muted);text-decoration:line-through;font-size:13px;flex:1}
.tt-meta{font-size:11px;color:var(--muted)}
.tt-countdown{font-size:12px;font-weight:700;white-space:nowrap}
.cok{color:var(--muted)}
.cwarn{color:var(--warn)}
.ccrit{color:var(--err)}
.trash-item-actions{display:flex;gap:6px;flex-shrink:0}
.trash-footer{padding:12px 20px;border-top:1px solid var(--border);display:flex;justify-content:flex-end}
.trash-title{font-size:18px;font-weight:700;padding:18px 20px 4px}
.trash-desc{font-size:12px;color:var(--muted);padding:0 20px 8px}
.trash-empty{padding:48px;text-align:center;color:var(--muted);font-size:13px}

/* ── 空状態 ── */
.empty-state{padding:60px 24px;display:flex;flex-direction:column;align-items:center;text-align:center}
.empty-state-svg{width:80px;height:80px;margin-bottom:16px;opacity:.6}
.empty-state-icon{font-size:48px;margin-bottom:12px}
.empty-state-title{font-size:18px;font-weight:700;margin-bottom:8px;color:var(--text)}
.empty-state-desc{color:var(--muted);max-width:360px;line-height:1.7;font-size:13px;margin-bottom:24px}
/* ゴミ箱空状態 */
.trash-empty-state{padding:60px 24px;display:flex;flex-direction:column;align-items:center;text-align:center}
.trash-empty-state-svg{width:72px;height:72px;margin-bottom:16px;opacity:.5}
.trash-empty-state-title{font-size:16px;font-weight:700;color:var(--muted);margin-bottom:6px}
.trash-empty-state-desc{font-size:13px;color:var(--muted);line-height:1.6}

/* ── バッジ ── */
.badge{display:inline-flex;align-items:center;padding:2px 8px;border-radius:20px;font-size:11px;font-weight:600;white-space:nowrap}

/* ── カテゴリ/タグ管理 ── */
.manage-list{display:flex;flex-direction:column;gap:6px;margin-top:12px}
.manage-item{display:flex;align-items:center;justify-content:space-between;padding:10px 12px;background:var(--bg);border-radius:var(--rs)}
.manage-item-left{display:flex;flex-direction:column;gap:2px}
.manage-item-name{font-size:13px;font-weight:500;color:var(--text)}
.manage-item-count{font-size:11px;color:var(--muted)}
.manage-item-actions{display:flex;gap:6px}
.manage-add-row{display:flex;gap:8px;align-items:center;margin-top:8px}
.manage-empty{font-size:13px;color:var(--muted);text-align:center;padding:16px 0}

/* ── フィルタードロップダウン ── */
.chip-wrap{position:relative}
.chip-dropdown{position:absolute;top:calc(100% + 4px);left:0;z-index:60;background:var(--card);border:1px solid var(--border);border-radius:var(--r);box-shadow:0 4px 12px rgba(0,0,0,.1);min-width:140px;padding:4px}
.chip-dropdown.hidden{display:none}
.chip-dd-item{padding:7px 12px;font-size:12px;cursor:pointer;border-radius:var(--rs);color:var(--text)}
.chip-dd-item:hover{background:var(--bg)}
.chip-dd-item.selected{background:var(--pri-l);color:var(--pri-d);font-weight:600}

/* ── グリッドビュー ── */
.task-grid{padding:0 20px 20px;display:grid;grid-template-columns:repeat(3,1fr);gap:12px}
.task-grid .date-group{grid-column:1/-1}
.task-grid-inner{display:grid;grid-template-columns:repeat(3,1fr);gap:12px;grid-column:1/-1}
.task-grid .tcard .ti-title{white-space:normal;-webkit-line-clamp:2;display:-webkit-box;-webkit-box-orient:vertical;overflow:hidden}
@media(max-width:900px){.task-grid{grid-template-columns:repeat(2,1fr)}.task-grid-inner{grid-template-columns:repeat(2,1fr)}}
@media(max-width:640px){.task-grid{grid-template-columns:1fr;padding:0 12px 80px}.task-grid-inner{grid-template-columns:1fr}}

/* ── チェックリストインラインフォーム ── */
.cl-add-form{display:flex;gap:6px;margin-top:6px;align-items:center}
.cl-add-input{flex:1;border:1px solid var(--border);border-radius:var(--rs);padding:5px 8px;font-size:12px;color:var(--text);background:var(--bg);outline:none}
.cl-add-input:focus{border-color:var(--pri)}
.cl-add-save{padding:4px 10px;font-size:12px;background:var(--pri);color:#fff;border:none;border-radius:var(--rs);cursor:pointer}
.cl-add-cancel{padding:4px 10px;font-size:12px;background:none;color:var(--muted);border:none;border-radius:var(--rs);cursor:pointer}
.cl-add-cancel:hover{background:var(--bg)}
/* チェックリストフォーム内のマイクボタンはコンパクトサイズ */
.cl-add-form .voice-btn{width:28px;height:28px;font-size:13px}
.cl-item-del{background:none;border:none;cursor:pointer;color:var(--muted);font-size:13px;padding:0 2px;line-height:1;flex-shrink:0;opacity:0;transition:opacity .1s}
.cl-item:hover .cl-item-del{opacity:1}
@media(max-width:640px){.cl-item-del{opacity:1}}
.cl-item-edit-input{flex:1;border:1px solid var(--pri);border-radius:var(--rs);padding:2px 6px;font-size:12px;color:var(--text);background:var(--card);outline:none}

/* ── タグ入力 ── */

/* ── 目標モーダル用カラーピッカー ── */
.color-options{display:flex;gap:8px;flex-wrap:wrap;margin-top:4px}
.color-opt{width:24px;height:24px;border-radius:50%;cursor:pointer;border:2px solid transparent;transition:transform .1s}
.color-opt.selected{border-color:var(--text);transform:scale(1.2)}

/* ── ダイアログ（確認） ── */
.dialog-message{font-size:14px;color:var(--text);margin-bottom:6px}
.dialog-warning{font-size:13px;color:var(--muted)}

/* ── 認証エリア ── */
.auth-area{display:flex;align-items:center;gap:8px}
.user-dropdown{position:absolute;top:48px;right:16px;background:var(--card);border:1px solid var(--border);border-radius:var(--r);box-shadow:0 4px 16px rgba(0,0,0,.12);min-width:180px;z-index:60;padding:4px}
.user-dropdown.hidden{display:none}
.ud-email{font-size:11px;color:var(--muted);padding:8px 12px 4px}
.ud-divider{height:1px;background:var(--border);margin:4px 0}
.ud-item{display:block;width:100%;text-align:left;padding:8px 12px;font-size:13px;border:none;background:none;cursor:pointer;border-radius:var(--rs);color:var(--text)}
.ud-item:hover{background:var(--bg)}

/* ── 音声入力ボタン ── */
.voice-input-wrap{position:relative;display:flex;align-items:flex-start;gap:6px}
.voice-input-wrap .form-input{flex:1}
.voice-input-wrap .form-textarea{flex:1}
.voice-btn{display:none;flex-shrink:0;width:38px;height:38px;border-radius:50%;border:1px solid var(--border);background:var(--card);color:var(--muted);font-size:16px;cursor:pointer;align-items:center;justify-content:center;transition:background .15s,border-color .15s;padding:0;line-height:1}
.voice-btn.listening{background:var(--pri);border-color:var(--pri);color:#fff;animation:mic-pulse 1s ease infinite}
@keyframes mic-pulse{0%,100%{box-shadow:0 0 0 0 rgba(14,165,233,.4)}50%{box-shadow:0 0 0 6px rgba(14,165,233,0)}}
@media(max-width:900px){.mobile-only.voice-btn{display:flex}}

/* ── モバイル: メニュービュー（レガシー、未使用） ── */
.menu-view-inner{overflow-y:auto;padding:8px 12px 80px}

/* ── サイトフッター ── */
.site-footer{border-top:1px solid var(--border);padding:14px 24px;display:flex;align-items:center;gap:16px;flex-wrap:wrap;font-size:12px;color:var(--muted)}
.site-footer a{color:var(--muted);text-decoration:none}
.site-footer a:hover{color:var(--pri)}
.site-footer-copy{margin-left:auto}
@media(max-width:640px){.site-footer{padding:12px 12px 80px;gap:10px}.site-footer-copy{margin-left:0;width:100%}}

/* ── モーダル モバイルボトムシート（4-6） ── */
@media(max-width:640px){
  .modal-overlay{align-items:flex-end}
  .modal{
    width:100%;
    max-width:100%;
    border-radius:20px 20px 0 0;
    margin:0;
    max-height:85svh;
    max-height:85vh;
    padding-bottom:max(env(safe-area-inset-bottom,0px),8px);
  }
  /* 上部ドラッグインジケーター */
  .modal::before{
    content:'';
    display:block;
    width:36px;
    height:4px;
    background:var(--border);
    border-radius:2px;
    margin:10px auto -6px;
    flex-shrink:0;
  }
}

/* ── ダークモード（4-7） ── */
/* prefers-color-scheme: dark でCSS変数を上書きするだけ */
@media(prefers-color-scheme:dark){
  :root{
    --text:#e2e8f0;
    --muted:#94a3b8;
    --border:#334155;
    --bg:#0f172a;
    --card:#1e293b;
    --pri-l:#0c4a6e;
    --ok-l:#14532d;
    --warn-l:#451a03;
    --err-l:#450a0a;
    --pri-d:#38bdf8;
  }
  body{color-scheme:dark}
  .form-input,.form-textarea,.form-select{background:var(--bg);color:var(--text)}
  .search-box{background:var(--card)}
  .chip-dropdown,.cal-popover{background:var(--card)}
  .toast{background:#0f172a;border:1px solid var(--border)}
  .modal{background:var(--card)}
  .cl-panel{background:#1a2744}
  .ah-logo-icon{filter:none}
}