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

:root {
  /* デジタル庁風ロイヤルブルー */
  --blue-900: #0D1B3E;
  --blue-800: #132B5E;
  --blue-700: #1A3A7A;
  --blue-600: #2350A0;
  --blue-500: #2D63C8;
  --blue-400: #4A80DB;
  --blue-300: #7BA4E8;
  --blue-200: #B0CCF3;
  --blue-100: #DAE7FA;
  --blue-50:  #EEF3FC;
  --blue-25:  #F6F9FE;

  /* アクセントカラー */
  --accent-red: #D64545;
  --accent-red-light: #FDF0F0;
  --accent-orange: #E08A3C;
  --accent-orange-light: #FEF4E8;
  --accent-green: #2D8A56;
  --accent-green-light: #EBF7F0;
  --accent-yellow: #C9A832;
  --accent-yellow-light: #FDF8E8;
  --accent-purple: #7B5EA7;
  --accent-purple-light: #F3EFF8;

  /* ニュートラル */
  --gray-900: #1A1D26;
  --gray-800: #2E3240;
  --gray-700: #464B5C;
  --gray-600: #5E6478;
  --gray-500: #7A8094;
  --gray-400: #9BA0B0;
  --gray-300: #C0C4D0;
  --gray-200: #DFE1E8;
  --gray-100: #EDEEF2;
  --gray-50:  #F5F6F8;
  --white:    #FFFFFF;

  /* ステータスカラー */
  --status-s: #D64545;
  --status-a: #E08A3C;
  --status-b: #2D63C8;
  --status-c: #7A8094;

  /* タイポグラフィ */
  --font-display: 'DM Sans', 'Noto Sans JP', sans-serif;
  --font-body: 'Noto Sans JP', 'DM Sans', sans-serif;
  --font-mono: 'DM Mono', monospace;

  /* シャドウ */
  --shadow-xs: 0 1px 2px rgba(13,27,62,0.04);
  --shadow-sm: 0 2px 8px rgba(13,27,62,0.06);
  --shadow-md: 0 4px 16px rgba(13,27,62,0.08);
  --shadow-lg: 0 8px 32px rgba(13,27,62,0.10);
  --shadow-card: 0 1px 3px rgba(13,27,62,0.06), 0 4px 12px rgba(13,27,62,0.04);

  /* ボーダー */
  --radius-sm: 6px;
  --radius-md: 10px;
  --radius-lg: 14px;
  --radius-xl: 20px;

  /* トランジション */
  --ease-out: cubic-bezier(0.22, 1, 0.36, 1);
  --duration: 0.3s;
}

html {
  font-size: 15px;
  scroll-behavior: smooth;
}

body {
  font-family: var(--font-body);
  background: var(--blue-25);
  color: var(--gray-800);
  line-height: 1.7;
  min-height: 100vh;
  -webkit-font-smoothing: antialiased;
}

/* ===== 背景テクスチャ ===== */
body::before {
  content: '';
  position: fixed;
  top: 0; left: 0; right: 0; bottom: 0;
  background:
    radial-gradient(ellipse 80% 60% at 10% 0%, rgba(45,99,200,0.06) 0%, transparent 60%),
    radial-gradient(ellipse 60% 50% at 90% 100%, rgba(45,99,200,0.04) 0%, transparent 60%);
  pointer-events: none;
  z-index: 0;
}

/* ===== ヘッダー ===== */
.header {
  position: sticky;
  top: 0;
  z-index: 100;
  background: rgba(255,255,255,0.85);
  backdrop-filter: blur(20px) saturate(1.4);
  -webkit-backdrop-filter: blur(20px) saturate(1.4);
  border-bottom: 1px solid var(--blue-100);
  padding: 0 2rem;
}

.header-inner {
  max-width: 1400px;
  margin: 0 auto;
  display: flex;
  align-items: center;
  justify-content: space-between;
  height: 64px;
}

.header-brand {
  display: flex;
  align-items: center;
  gap: 12px;
}

.header-logo {
  width: 36px;
  height: 36px;
  background: linear-gradient(135deg, var(--blue-600), var(--blue-400));
  border-radius: var(--radius-sm);
  display: grid;
  place-items: center;
  color: white;
  font-family: var(--font-display);
  font-weight: 700;
  font-size: 14px;
  letter-spacing: -0.5px;
}

.header-title {
  font-family: var(--font-display);
  font-weight: 700;
  font-size: 1.15rem;
  color: var(--blue-900);
  letter-spacing: -0.3px;
}

.header-subtitle {
  font-size: 0.73rem;
  color: var(--gray-500);
  font-weight: 400;
  margin-top: -1px;
}

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

.header-time {
  font-family: var(--font-mono);
  font-size: 0.78rem;
  color: var(--gray-500);
  padding: 6px 12px;
  background: var(--gray-50);
  border-radius: var(--radius-sm);
  border: 1px solid var(--gray-100);
}

.btn-refresh {
  display: flex;
  align-items: center;
  gap: 6px;
  padding: 8px 16px;
  border: 1px solid var(--blue-200);
  background: var(--blue-50);
  color: var(--blue-600);
  border-radius: var(--radius-sm);
  font-family: var(--font-body);
  font-size: 0.8rem;
  font-weight: 500;
  cursor: pointer;
  transition: all var(--duration) var(--ease-out);
}

.btn-refresh:hover {
  background: var(--blue-100);
  border-color: var(--blue-300);
}

.btn-refresh.loading svg {
  animation: spin 0.8s linear infinite;
}

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

/* ===== メインレイアウト ===== */
.main {
  position: relative;
  z-index: 1;
  max-width: 1400px;
  margin: 0 auto;
  padding: 1.5rem 2rem 4rem;
}

/* ===== ローディング ===== */
.loading-overlay {
  position: fixed;
  inset: 0;
  background: rgba(246,249,254,0.95);
  display: grid;
  place-items: center;
  z-index: 1000;
  transition: opacity 0.5s var(--ease-out);
}

.loading-overlay.hidden {
  opacity: 0;
  pointer-events: none;
}

.loading-spinner {
  text-align: center;
}

.loading-dots {
  display: flex;
  gap: 8px;
  justify-content: center;
  margin-bottom: 16px;
}

.loading-dots span {
  width: 10px;
  height: 10px;
  background: var(--blue-400);
  border-radius: 50%;
  animation: loadBounce 1.2s ease-in-out infinite;
}

.loading-dots span:nth-child(2) { animation-delay: 0.15s; }
.loading-dots span:nth-child(3) { animation-delay: 0.3s; }

@keyframes loadBounce {
  0%,80%,100% { transform: scale(0.6); opacity: 0.4; }
  40% { transform: scale(1); opacity: 1; }
}

.loading-text {
  font-size: 0.85rem;
  color: var(--gray-500);
  font-weight: 500;
}

/* ===== KPIカード ===== */
.kpi-grid {
  display: grid;
  grid-template-columns: repeat(5, 1fr);
  gap: 14px;
  margin-bottom: 2rem;
}

.kpi-card {
  background: var(--white);
  border: 1px solid var(--gray-100);
  border-radius: var(--radius-lg);
  padding: 1.25rem 1.3rem;
  position: relative;
  overflow: hidden;
  box-shadow: var(--shadow-card);
  transition: all var(--duration) var(--ease-out);
  opacity: 0;
  transform: translateY(12px);
  animation: fadeUp 0.5s var(--ease-out) forwards;
}

.kpi-card:nth-child(1) { animation-delay: 0.05s; }
.kpi-card:nth-child(2) { animation-delay: 0.1s; }
.kpi-card:nth-child(3) { animation-delay: 0.15s; }
.kpi-card:nth-child(4) { animation-delay: 0.2s; }
.kpi-card:nth-child(5) { animation-delay: 0.25s; }

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

.kpi-card::before {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  height: 3px;
}

.kpi-card--blue::before { background: linear-gradient(90deg, var(--blue-500), var(--blue-300)); }
.kpi-card--red::before { background: linear-gradient(90deg, var(--accent-red), #E87070); }
.kpi-card--green::before { background: linear-gradient(90deg, var(--accent-green), #4DB87A); }
.kpi-card--purple::before { background: linear-gradient(90deg, var(--accent-purple), #A388C4); }
.kpi-card--orange::before { background: linear-gradient(90deg, var(--accent-orange), #F0A860); }

.kpi-card:hover {
  transform: translateY(-2px);
  box-shadow: var(--shadow-md);
}

.kpi-label {
  font-size: 0.75rem;
  font-weight: 500;
  color: var(--gray-500);
  margin-bottom: 8px;
  letter-spacing: 0.02em;
}

.kpi-value {
  font-family: var(--font-display);
  font-size: 2rem;
  font-weight: 700;
  letter-spacing: -1px;
  line-height: 1.1;
}

.kpi-card--blue .kpi-value { color: var(--blue-700); }
.kpi-card--red .kpi-value { color: var(--accent-red); }
.kpi-card--green .kpi-value { color: var(--accent-green); }
.kpi-card--purple .kpi-value { color: var(--blue-600); }
.kpi-card--orange .kpi-value { color: var(--accent-orange); }

.kpi-unit {
  font-size: 0.85rem;
  font-weight: 500;
  margin-left: 2px;
}

.kpi-sub {
  font-size: 0.73rem;
  color: var(--gray-400);
  margin-top: 4px;
  font-weight: 400;
}

/* ===== セクション共通 ===== */
.section {
  margin-bottom: 2rem;
  opacity: 0;
  transform: translateY(16px);
  animation: fadeUp 0.6s var(--ease-out) forwards;
}

.section:nth-child(2) { animation-delay: 0.15s; }
.section:nth-child(3) { animation-delay: 0.25s; }
.section:nth-child(4) { animation-delay: 0.35s; }
.section:nth-child(5) { animation-delay: 0.45s; }
.section:nth-child(6) { animation-delay: 0.55s; }

.section-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 1rem;
}

.section-title {
  font-family: var(--font-display);
  font-size: 1.15rem;
  font-weight: 700;
  color: var(--blue-900);
  display: flex;
  align-items: center;
  gap: 8px;
  letter-spacing: -0.2px;
}

.section-title-icon {
  width: 28px;
  height: 28px;
  border-radius: var(--radius-sm);
  display: grid;
  place-items: center;
  font-size: 0.85rem;
}

.section-title-icon--blue { background: var(--blue-50); color: var(--blue-500); }
.section-title-icon--green { background: var(--accent-green-light); color: var(--accent-green); }
.section-title-icon--purple { background: var(--accent-purple-light); color: var(--accent-purple); }
.section-title-icon--orange { background: var(--accent-orange-light); color: var(--accent-orange); }
.section-title-icon--yellow { background: var(--accent-yellow-light); color: var(--accent-yellow); }

.card {
  background: var(--white);
  border: 1px solid var(--gray-100);
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow-card);
  overflow: hidden;
}

/* ===== タスク2カラム分割 ===== */
.task-split{display:grid;grid-template-columns:1fr 1fr;gap:14px}
.task-split-col{min-width:0}
.task-split-head{
  display:flex;align-items:center;justify-content:space-between;
  padding:8px 14px;border-radius:var(--radius-sm);margin-bottom:8px;
  font-family:var(--font-display);font-size:0.82rem;font-weight:700;
}
.task-split-head--meeting{background:var(--blue-50);color:var(--blue-700)}
.task-split-head--work{background:var(--accent-green-light);color:var(--accent-green)}
.task-split-count{
  font-family:var(--font-mono);font-size:0.7rem;font-weight:700;
  padding:2px 8px;border-radius:10px;background:rgba(0,0,0,0.08);
}
@media (max-width:768px){.task-split{grid-template-columns:1fr}}

/* ===== セクション1: 今日のタスク ===== */
.task-list {
  padding: 0.5rem 0;
}

.task-item {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 0.75rem 1.3rem;
  border-bottom: 1px solid var(--gray-50);
  transition: background var(--duration) var(--ease-out);
}

.task-item:last-child { border-bottom: none; }
.task-item:hover { background: var(--blue-25); }

.task-item.completed {
  opacity: 0.5;
}

.task-item.completed .task-name {
  text-decoration: line-through;
  color: var(--gray-400);
}

.task-check {
  width: 20px;
  height: 20px;
  border-radius: 50%;
  border: 2px solid var(--gray-300);
  flex-shrink: 0;
  display: grid;
  place-items: center;
  transition: all var(--duration) var(--ease-out);
}

.task-item.completed .task-check {
  background: var(--accent-green);
  border-color: var(--accent-green);
}

.task-item.completed .task-check::after {
  content: '';
  width: 6px;
  height: 10px;
  border: solid white;
  border-width: 0 2px 2px 0;
  transform: rotate(45deg) translate(-1px, -1px);
}

.task-priority {
  font-family: var(--font-body);
  font-size: 0.7rem;
  font-weight: 600;
  padding: 3px 9px;
  border-radius: 5px;
  display: inline-grid;
  place-items: center;
  flex-shrink: 0;
  color: white;
  letter-spacing: 0.3px;
  white-space: nowrap;
  min-width: 36px;
}

.priority-S { background: var(--status-s); }
.priority-A { background: var(--status-a); }
.priority-B { background: var(--status-b); }
.priority-C { background: var(--status-c); }

.task-content {
  flex: 1;
  min-width: 0;
}

.task-name {
  font-size: 0.88rem;
  font-weight: 500;
  color: var(--gray-800);
  line-height: 1.4;
}

.task-meta {
  display: flex;
  align-items: center;
  gap: 10px;
  margin-top: 2px;
}

.task-project {
  font-size: 0.7rem;
  font-weight: 500;
  color: var(--blue-500);
  background: var(--blue-50);
  padding: 1px 8px;
  border-radius: 99px;
}

.task-deadline {
  font-size: 0.7rem;
  color: var(--gray-400);
  font-family: var(--font-mono);
}

.task-deadline.overdue {
  color: var(--accent-red);
  font-weight: 500;
}

.task-note {
  font-size: 0.72rem;
  color: var(--gray-400);
  max-width: 180px;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

/* ===== セクション2: プロジェクトステータス ===== */
.project-controls {
  display: flex;
  align-items: center;
  gap: 10px;
}

.tab-filters {
  display: flex;
  gap: 4px;
  background: var(--gray-50);
  padding: 3px;
  border-radius: var(--radius-sm);
  border: 1px solid var(--gray-100);
}

.tab-filter {
  padding: 5px 14px;
  border: none;
  background: transparent;
  font-family: var(--font-body);
  font-size: 0.75rem;
  font-weight: 500;
  color: var(--gray-500);
  border-radius: 4px;
  cursor: pointer;
  transition: all var(--duration) var(--ease-out);
  white-space: nowrap;
}

.tab-filter.active {
  background: var(--white);
  color: var(--blue-700);
  box-shadow: var(--shadow-xs);
}

.tab-filter:hover:not(.active) {
  color: var(--gray-700);
}

.view-toggle {
  display: flex;
  gap: 2px;
  background: var(--gray-50);
  padding: 3px;
  border-radius: var(--radius-sm);
  border: 1px solid var(--gray-100);
}

.view-btn {
  padding: 5px 10px;
  border: none;
  background: transparent;
  color: var(--gray-400);
  border-radius: 4px;
  cursor: pointer;
  transition: all var(--duration) var(--ease-out);
  display: grid;
  place-items: center;
}

.view-btn.active {
  background: var(--white);
  color: var(--blue-600);
  box-shadow: var(--shadow-xs);
}

/* マトリクスビュー */
.matrix-view {
  padding: 1.3rem;
}

.matrix-grid {
  display: grid;
  grid-template-columns: 90px repeat(5, 1fr);
  gap: 2px;
}

.matrix-header {
  font-size: 0.68rem;
  font-weight: 600;
  color: var(--gray-500);
  text-align: center;
  padding: 8px 4px;
  background: var(--gray-50);
  border-radius: 4px;
}

.matrix-row-label {
  font-size: 0.72rem;
  font-weight: 600;
  color: var(--gray-600);
  padding: 10px 8px;
  display: flex;
  align-items: center;
  background: var(--gray-50);
  border-radius: 4px;
}

.matrix-cell {
  min-height: 60px;
  padding: 6px;
  background: var(--white);
  border: 1px solid var(--gray-100);
  border-radius: 4px;
  display: flex;
  flex-wrap: wrap;
  gap: 4px;
  align-content: flex-start;
}

.matrix-chip {
  font-size: 0.65rem;
  font-weight: 500;
  padding: 3px 8px;
  border-radius: 99px;
  white-space: nowrap;
  max-width: 100%;
  overflow: hidden;
  text-overflow: ellipsis;
  cursor: default;
  position: relative;
}

.matrix-chip[title] { cursor: help; }

.matrix-chip--blocker {
  border: 1px dashed var(--accent-orange);
}

.chip-impact-大 { background: var(--accent-red-light); color: var(--accent-red); }
.chip-impact-中 { background: var(--accent-orange-light); color: var(--accent-orange); }
.chip-impact-小 { background: var(--blue-50); color: var(--blue-600); }
.chip-impact-なし { background: var(--gray-50); color: var(--gray-500); }

/* テーブルビュー */
.table-view {
  overflow-x: auto;
}

.data-table {
  width: 100%;
  border-collapse: collapse;
  font-size: 0.82rem;
}

.data-table th {
  text-align: left;
  padding: 10px 14px;
  font-weight: 600;
  font-size: 0.72rem;
  color: var(--gray-500);
  background: var(--gray-50);
  border-bottom: 1px solid var(--gray-100);
  white-space: nowrap;
  letter-spacing: 0.03em;
  text-transform: uppercase;
}

.data-table td {
  padding: 10px 14px;
  border-bottom: 1px solid var(--gray-50);
  vertical-align: middle;
}

.data-table tr:hover td {
  background: var(--blue-25);
}

.data-table tr:last-child td {
  border-bottom: none;
}

.status-badge {
  font-size: 0.7rem;
  font-weight: 500;
  padding: 3px 10px;
  border-radius: 99px;
  white-space: nowrap;
}

.status--未着手 { background: var(--gray-100); color: var(--gray-600); }
.status--進行中 { background: var(--blue-50); color: var(--blue-600); }
.status--完了 { background: var(--accent-green-light); color: var(--accent-green); }
.status--保留 { background: var(--accent-yellow-light); color: var(--accent-yellow); }
.status--凍結 { background: var(--gray-100); color: var(--gray-400); }

.phase-badge {
  font-size: 0.7rem;
  font-weight: 500;
  padding: 3px 10px;
  border-radius: 99px;
  white-space: nowrap;
}

.phase--稼働中 { background: var(--accent-green-light); color: var(--accent-green); }
.phase--受注済 { background: var(--blue-50); color: var(--blue-600); }
.phase--提案中 { background: var(--accent-orange-light); color: var(--accent-orange); }
.phase--自社基盤 { background: var(--accent-purple-light); color: var(--accent-purple); }
.phase--凍結 { background: var(--gray-100); color: var(--gray-400); }

.blocker-text {
  font-size: 0.72rem;
  color: var(--accent-orange);
  display: flex;
  align-items: center;
  gap: 4px;
}

/* ===== セクション3: 月次ルーティン ===== */
.routine-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
  gap: 14px;
  padding: 1.3rem;
}

.routine-category {
  border: 1px solid var(--gray-100);
  border-radius: var(--radius-md);
  overflow: hidden;
}

.routine-category-header {
  padding: 10px 14px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  font-size: 0.8rem;
  font-weight: 600;
}

.routine-category--経理 .routine-category-header { background: var(--blue-50); color: var(--blue-700); }
.routine-category--税務 .routine-category-header { background: var(--accent-red-light); color: var(--accent-red); }
.routine-category--請求 .routine-category-header { background: var(--accent-green-light); color: var(--accent-green); }
.routine-category--人事 .routine-category-header { background: var(--accent-purple-light); color: var(--accent-purple); }
.routine-category--契約 .routine-category-header { background: var(--accent-orange-light); color: var(--accent-orange); }
.routine-category--棚卸 .routine-category-header { background: var(--accent-yellow-light); color: var(--accent-yellow); }

.routine-progress {
  width: 48px;
  height: 5px;
  background: rgba(0,0,0,0.08);
  border-radius: 99px;
  overflow: hidden;
}

.routine-progress-bar {
  height: 100%;
  border-radius: 99px;
  transition: width 0.8s var(--ease-out);
}

.routine-category--経理 .routine-progress-bar { background: var(--blue-500); }
.routine-category--税務 .routine-progress-bar { background: var(--accent-red); }
.routine-category--請求 .routine-progress-bar { background: var(--accent-green); }
.routine-category--人事 .routine-progress-bar { background: var(--accent-purple); }
.routine-category--契約 .routine-progress-bar { background: var(--accent-orange); }
.routine-category--棚卸 .routine-progress-bar { background: var(--accent-yellow); }

.routine-items {
  padding: 6px 0;
}

.routine-item {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 7px 14px;
  font-size: 0.78rem;
}

.routine-status-dot {
  width: 8px;
  height: 8px;
  border-radius: 50%;
  flex-shrink: 0;
}

.routine-status-dot--完了 { background: var(--accent-green); }
.routine-status-dot--一部未完了 { background: var(--accent-yellow); }
.routine-status-dot--未着手 { background: var(--gray-300); }

.routine-item-name {
  flex: 1;
  color: var(--gray-700);
}

.routine-item-timing {
  font-size: 0.68rem;
  color: var(--gray-400);
  font-family: var(--font-mono);
}

/* ===== セクション4: 収益パイプライン ===== */
.pipeline-view {
  padding: 1.3rem;
}

.pipeline-stages {
  display: flex;
  gap: 12px;
  overflow-x: auto;
  padding-bottom: 8px;
}

.pipeline-stage {
  flex: 1;
  min-width: 220px;
  border: 1px solid var(--gray-100);
  border-radius: var(--radius-md);
  overflow: hidden;
}

.pipeline-stage-header {
  padding: 10px 14px;
  background: var(--gray-50);
  display: flex;
  align-items: center;
  justify-content: space-between;
  border-bottom: 1px solid var(--gray-100);
}

.pipeline-stage-name {
  font-size: 0.78rem;
  font-weight: 600;
  color: var(--gray-700);
}

.pipeline-stage-total {
  font-family: var(--font-mono);
  font-size: 0.75rem;
  font-weight: 600;
  color: var(--blue-600);
}

.pipeline-items {
  padding: 8px;
  display: flex;
  flex-direction: column;
  gap: 6px;
  min-height: 60px;
}

.pipeline-card {
  padding: 10px 12px;
  background: var(--white);
  border: 1px solid var(--gray-100);
  border-radius: var(--radius-sm);
  transition: all var(--duration) var(--ease-out);
  cursor: default;
}

.pipeline-card:hover {
  border-color: var(--blue-200);
  box-shadow: var(--shadow-sm);
}

.pipeline-card-client {
  font-size: 0.78rem;
  font-weight: 600;
  color: var(--gray-800);
  margin-bottom: 4px;
}

.pipeline-card-amount {
  font-family: var(--font-mono);
  font-size: 0.88rem;
  font-weight: 600;
  color: var(--blue-700);
}

.pipeline-card-amount.large {
  font-size: 1.05rem;
  color: var(--blue-600);
}

.pipeline-card-detail {
  font-size: 0.68rem;
  color: var(--gray-400);
  margin-top: 4px;
  display: flex;
  gap: 8px;
}

/* ===== セクション5: 週次レビュー ===== */
.review-latest {
  padding: 1.5rem;
}

.review-week-label {
  font-family: var(--font-mono);
  font-size: 0.72rem;
  font-weight: 500;
  color: var(--blue-500);
  background: var(--blue-50);
  padding: 3px 10px;
  border-radius: 99px;
  display: inline-block;
  margin-bottom: 12px;
}

.review-block {
  margin-bottom: 16px;
}

.review-block:last-child { margin-bottom: 0; }

.review-block-label {
  font-size: 0.72rem;
  font-weight: 600;
  color: var(--gray-500);
  margin-bottom: 6px;
  text-transform: uppercase;
  letter-spacing: 0.05em;
}

.review-block-content {
  font-size: 0.88rem;
  color: var(--gray-700);
  line-height: 1.7;
  white-space: pre-wrap;
}

.review-past-toggle {
  width: 100%;
  padding: 10px;
  border: none;
  border-top: 1px solid var(--gray-100);
  background: var(--gray-50);
  font-family: var(--font-body);
  font-size: 0.78rem;
  font-weight: 500;
  color: var(--gray-500);
  cursor: pointer;
  transition: all var(--duration) var(--ease-out);
}

.review-past-toggle:hover {
  background: var(--gray-100);
  color: var(--gray-700);
}

.review-past {
  border-top: 1px solid var(--gray-100);
  display: none;
}

.review-past.show { display: block; }

.review-past-item {
  padding: 1rem 1.5rem;
  border-bottom: 1px solid var(--gray-50);
}

.review-past-item:last-child { border-bottom: none; }

.review-past-item .review-block-content {
  font-size: 0.82rem;
  color: var(--gray-500);
}

/* ===== エラー表示 ===== */
.error-banner {
  background: var(--accent-red-light);
  border: 1px solid rgba(214,69,69,0.2);
  border-radius: var(--radius-md);
  padding: 12px 16px;
  margin-bottom: 1rem;
  display: none;
  align-items: center;
  gap: 10px;
  font-size: 0.82rem;
  color: var(--accent-red);
}

.error-banner.show { display: flex; }

/* ===== 空状態 ===== */
.empty-state {
  text-align: center;
  padding: 2rem;
  color: var(--gray-400);
  font-size: 0.85rem;
}

/* ===== レスポンシブ ===== */
@media (max-width: 1100px) {
  .kpi-grid {
    grid-template-columns: repeat(3, 1fr);
  }
}

@media (max-width: 768px) {
  html { font-size: 14px; }
  .header { padding: 0 1rem; }
  .main { padding: 1rem 1rem 3rem; }

  .header-time { display: none; }

  .kpi-grid {
    grid-template-columns: repeat(2, 1fr);
    gap: 10px;
  }

  .section-header {
    flex-direction: column;
    align-items: flex-start;
    gap: 10px;
  }

  .project-controls {
    flex-wrap: wrap;
  }

  .tab-filters {
    overflow-x: auto;
  }

  .matrix-view { overflow-x: auto; }
  .matrix-grid { min-width: 700px; }

  .routine-grid {
    grid-template-columns: 1fr;
  }

  .pipeline-stages {
    flex-direction: column;
  }

  .pipeline-stage {
    min-width: unset;
  }
}

@media (max-width: 480px) {
  .kpi-grid {
    grid-template-columns: 1fr 1fr;
  }

  .kpi-card {
    padding: 1rem;
  }

  .kpi-value {
    font-size: 1.6rem;
  }
}

/* ===== ユーティリティ ===== */
.hidden { display: none !important; }
.text-right { text-align: right; }
.nowrap { white-space: nowrap; }

/* ===== 旧 body 内 <style> ブロック統合（トップレベルタブ・記憶ページ等） ===== */
/* トップレベルタブ */
.top-tabs{display:flex;gap:2px;padding:0 24px;background:var(--blue-900);border-bottom:1px solid rgba(255,255,255,.08)}
.top-tab{display:flex;align-items:center;gap:6px;padding:12px 20px;border:none;background:none;color:rgba(255,255,255,.5);font-size:13px;font-weight:600;cursor:pointer;font-family:'Noto Sans JP',sans-serif;border-bottom:2px solid transparent;transition:all .2s}
.top-tab:hover{color:rgba(255,255,255,.8)}
.top-tab.active{color:#fff;border-bottom-color:var(--blue-300);background:rgba(255,255,255,.05)}
.top-tab svg{opacity:.6}
.top-tab.active svg{opacity:1}

/* 記憶ページ */
.mem-search-bar{display:flex;align-items:center;gap:10px;padding:12px 16px;background:var(--white);border:1.5px solid var(--gray-200);border-radius:10px;margin-bottom:16px;transition:border-color .2s}
.mem-search-bar:focus-within{border-color:var(--blue-400);box-shadow:0 0 0 3px rgba(45,99,200,.08)}
.mem-search-bar input{flex:1;border:none;outline:none;font-size:14px;font-family:'Noto Sans JP',sans-serif;color:var(--gray-800)}
.mem-search-bar input::placeholder{color:var(--gray-400)}
.mem-search-bar kbd{padding:2px 8px;background:var(--gray-50);border:1px solid var(--gray-200);border-radius:4px;font-size:10px;color:var(--gray-400);font-family:'DM Mono',monospace}

.mem-backup-bar{padding:10px 16px;border-radius:8px;font-size:11px;font-family:'DM Mono','Noto Sans JP',monospace;margin-bottom:12px;display:flex;align-items:center;gap:8px}
.mem-backup-bar.ok{background:#D1FAE5;color:#065F46;border:1px solid #A7F3D0}
.mem-backup-bar.warn{background:#FEF3C7;color:#92400E;border:1px solid #FDE68A}
.mem-backup-bar.error{background:#FEE2E2;color:#991B1B;border:1px solid #FECACA}
.mem-backup-bar .dot{width:8px;height:8px;border-radius:50%;flex-shrink:0}
.mem-backup-bar.ok .dot{background:#10B981}
.mem-backup-bar.warn .dot{background:#F59E0B}
.mem-backup-bar.error .dot{background:#EF4444}

.mem-time-filters{display:flex;align-items:center;gap:6px;margin-bottom:12px}
.mem-time-label{font-size:11px;color:var(--gray-400);font-weight:600;margin-right:4px}
.mem-time{padding:5px 14px;border:1.5px solid var(--gray-200);background:var(--white);color:var(--gray-500);font-size:12px;font-weight:600;cursor:pointer;border-radius:20px;font-family:'Noto Sans JP',sans-serif;transition:all .15s}
.mem-time:hover{border-color:var(--blue-300);color:var(--blue-500)}
.mem-time.active{background:var(--blue-500);color:white;border-color:var(--blue-500)}

/* タイプフィルター */
.mem-type-filters{display:flex;align-items:center;gap:6px;margin-bottom:12px;flex-wrap:wrap}
.mem-type-label{font-size:11px;color:var(--gray-400);font-weight:600;margin-right:4px;min-width:32px}
.mem-type-btn{padding:4px 12px;border:1.5px solid var(--gray-200);background:var(--white);color:var(--gray-500);font-size:11px;font-weight:600;cursor:pointer;border-radius:16px;font-family:'Noto Sans JP',sans-serif;transition:all .15s}
.mem-type-btn:hover{border-color:var(--gray-400)}
.mem-type-btn.active{color:white;border-color:transparent}
.mem-type-btn.type-decision.active{background:#DC2626}
.mem-type-btn.type-learning.active{background:#059669}
.mem-type-btn.type-chat.active{background:#6B7280}
.mem-type-btn.type-next-action.active{background:#2563EB}
.mem-type-btn.type-person.active{background:#7C3AED}
.mem-type-btn[data-type=""].active{background:var(--blue-600)}

/* type:* バッジ色分け */
.mem-row-tag--type{font-weight:700;padding:2px 8px}
.mem-row-tag--decision{background:#FEE2E2;color:#991B1B}
.mem-row-tag--learning{background:#D1FAE5;color:#065F46}
.mem-row-tag--chat{background:var(--gray-100);color:var(--gray-500)}
.mem-row-tag--next-action{background:#DBEAFE;color:#1E40AF}
.mem-row-tag--person{background:#EDE9FE;color:#5B21B6}

.mem-tabs-bar{display:flex;gap:4px;margin-bottom:16px;padding-bottom:12px;border-bottom:1.5px solid var(--gray-100)}
.mem-tab{display:flex;align-items:center;gap:6px;padding:8px 16px;border:none;background:none;color:var(--gray-500);font-size:13px;font-weight:600;cursor:pointer;border-radius:8px;font-family:'Noto Sans JP',sans-serif;transition:all .15s}
.mem-tab:hover{background:var(--gray-50);color:var(--gray-700)}
.mem-tab.active{background:var(--blue-50);color:var(--blue-600)}
.mem-tab-count{font-size:11px;min-width:20px;height:20px;display:inline-flex;align-items:center;justify-content:center;background:var(--gray-100);color:var(--gray-500);border-radius:10px;font-family:'DM Mono',monospace}
.mem-tab.active .mem-tab-count{background:var(--blue-100);color:var(--blue-600)}

/* リストアイテム */
/* ===== AI記憶 BOX型カード（2026-05-03 改訂・タイトル/タグ/本文/日付の構造を明示） ===== */
.mem-row{display:flex;flex-direction:column;gap:8px;padding:14px 16px;margin-bottom:10px;background:#fff;border:1px solid var(--gray-200);border-radius:10px;cursor:pointer;transition:all .15s;position:relative}
.mem-row:hover{border-color:var(--blue-200);box-shadow:0 2px 8px rgba(0,0,0,.04);background:#fff}
.mem-row:last-child{margin-bottom:0}
/* card header: project tag / ai tag / 日付 (右寄せ) */
.mem-row-left{position:absolute;top:14px;right:16px;display:flex;flex-direction:row;align-items:center;gap:6px;font-family:'DM Mono',monospace;color:var(--gray-400);font-size:11px}
.mem-row-date{font-size:11px;color:var(--gray-500);font-weight:500;white-space:nowrap}
.mem-row-time{font-size:11px;color:var(--gray-400);white-space:nowrap}
.mem-row-right{min-width:0;position:relative;padding-right:130px}
.mem-row-header{display:flex;align-items:center;gap:8px;flex-wrap:wrap;margin-bottom:2px}
.mem-row-project{font-size:10px;padding:2px 8px;border-radius:4px;background:var(--blue-50);color:var(--blue-600);font-weight:700;white-space:nowrap}
.mem-row-ai{font-size:10px;padding:2px 6px;border-radius:4px;background:var(--gray-50);color:var(--gray-400);font-weight:500}
.mem-row-title{font-size:14px;font-weight:700;color:var(--gray-900);line-height:1.5;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.mem-row-summary{font-size:12px;color:var(--gray-600);line-height:1.6;display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden;word-break:break-word}
.mem-row-tags{display:flex;gap:4px;flex-wrap:wrap;margin-top:2px}
.mem-row-tag{font-size:10px;padding:2px 7px;border-radius:4px;background:var(--gray-50);color:var(--gray-500)}
.mem-row-detail{display:none;margin-top:6px;padding:12px;background:var(--gray-50);border-radius:8px;font-size:12px;color:var(--gray-600);line-height:1.7}
.mem-row.expanded .mem-row-detail{display:block}
.mem-row.expanded .mem-row-title{white-space:normal;overflow:visible}
.mem-row.expanded .mem-row-summary{-webkit-line-clamp:unset;display:block}
/* responsive: 狭いと右上の日付は下にずらす */
@media (max-width: 720px){
  .mem-row-right{padding-right:0}
  .mem-row-left{position:static;margin-bottom:4px}
}

.mem-status{display:inline-block;font-size:10px;padding:2px 8px;border-radius:4px;font-weight:700}
.mem-status--open{background:#FEF3C7;color:#92400E}
.mem-status--in_progress{background:#DBEAFE;color:#1E40AF}
.mem-status--done{background:#D1FAE5;color:#065F46}
.mem-status--cancelled{background:var(--gray-100);color:var(--gray-500)}

.task-delete{font-size:12px;color:var(--gray-300);cursor:pointer;padding:4px 8px;border-radius:4px;transition:all .15s;flex-shrink:0}
.task-delete:hover{color:var(--accent-red);background:var(--accent-red-light)}

.hidden{display:none!important}

/* Claude Codeコピーボタン */
/* position:relativeは.mem-row本体に統合済み */
.mem-copy-btn{display:inline-flex;align-items:center;gap:4px;padding:4px 10px;border:1.5px solid var(--gray-200);background:var(--white);color:var(--gray-500);font-size:10px;font-weight:600;cursor:pointer;border-radius:6px;font-family:'Noto Sans JP',sans-serif;transition:all .15s;z-index:10;box-shadow:0 1px 4px rgba(0,0,0,.08);margin-top:6px}
.mem-copy-btn:hover{border-color:var(--blue-400);color:var(--blue-600);background:var(--blue-50)}
.mem-copy-btn svg{flex-shrink:0}

/* トースト通知 */
.copy-toast{position:fixed;bottom:32px;left:50%;transform:translateX(-50%) translateY(20px);padding:10px 24px;background:var(--blue-900);color:#fff;font-size:13px;font-weight:600;border-radius:10px;font-family:'Noto Sans JP',sans-serif;opacity:0;transition:all .3s ease;pointer-events:none;z-index:9999;box-shadow:0 4px 16px rgba(0,0,0,.15)}
.copy-toast.show{opacity:1;transform:translateX(-50%) translateY(0)}