* { margin: 0; padding: 0; box-sizing: border-box; }
html { overflow-x: hidden; }

:root {
  --bg: #0d1117;
  --surface: #161b22;
  --border: #30363d;
  --text: #e6edf3;
  --text-dim: #8b949e;
  --blue: #58a6ff;
  --green: #3fb950;
  --red: #f85149;
  --orange: #ffa657;
  --purple: #d2a8ff;
  --radius: 12px;
  --safe-top: env(safe-area-inset-top, 0px);
  --safe-bottom: env(safe-area-inset-bottom, 0px);

  /* Spring animation curves */
  --spring: cubic-bezier(0.34, 1.56, 0.64, 1);
  --spring-gentle: cubic-bezier(0.25, 0.46, 0.45, 0.94);
  --spring-snappy: cubic-bezier(0.22, 0.68, 0, 1.71);

  /* Glass effect */
  --glass-bg: rgba(22, 27, 34, 0.75);
  --glass-border: rgba(255, 255, 255, 0.08);
  --glass-blur: blur(16px) saturate(180%);
}

body {
  font-family: -apple-system, BlinkMacSystemFont, 'Hiragino Sans', sans-serif;
  background: var(--bg);
  color: var(--text);
  min-height: 100dvh;
  -webkit-font-smoothing: antialiased;
  padding-left: calc(56px + env(safe-area-inset-left, 0px));
  overflow-x: hidden;
}

/* Header */
header {
  position: sticky;
  top: 0;
  z-index: 100;
  background: var(--glass-bg);
  backdrop-filter: var(--glass-blur);
  -webkit-backdrop-filter: var(--glass-blur);
  padding: calc(var(--safe-top) + 12px) 16px 12px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  border-bottom: 1px solid var(--glass-border);
}

@supports not (backdrop-filter: blur(0)) {
  header { background: var(--bg); border-bottom-color: var(--border); }
}

header h1 {
  font-size: 22px;
  font-weight: 800;
  display: flex;
  align-items: center;
  gap: 8px;
  letter-spacing: -0.3px;
}

.badge {
  background: var(--red);
  color: white;
  font-size: 13px;
  font-weight: 700;
  padding: 3px 10px;
  border-radius: 12px;
  min-width: 24px;
  text-align: center;
  transition: transform 0.3s var(--spring);
  box-shadow: 0 2px 8px rgba(248, 81, 73, 0.3);
}

.badge.pop { animation: badgePop 0.35s var(--spring); }
@keyframes badgePop {
  0% { transform: scale(1); }
  50% { transform: scale(1.3); }
  100% { transform: scale(1); }
}

.badge.zero { background: var(--border); }

.header-actions { display: flex; gap: 8px; }

.icon-btn {
  background: var(--surface);
  border: 1px solid var(--border);
  color: var(--text);
  width: 44px;
  height: 44px;
  border-radius: 12px;
  font-size: 18px;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: transform 0.2s var(--spring-gentle), background 0.15s ease, box-shadow 0.2s ease;
}

.icon-btn:active { transform: scale(0.85); background: var(--border); box-shadow: 0 0 12px rgba(255,255,255,0.05); }
.icon-btn[style*="var(--green)"] { border-color: var(--green); }

/* Filter */
.filter-bar {
  padding: 8px 16px;
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  border-bottom: 1px solid var(--glass-border);
  background: var(--glass-bg);
  backdrop-filter: var(--glass-blur);
  -webkit-backdrop-filter: var(--glass-blur);
}

.filter-chip {
  background: var(--surface);
  border: 1px solid var(--border);
  color: var(--text-dim);
  padding: 8px 16px;
  border-radius: 20px;
  font-size: 13px;
  font-weight: 500;
  cursor: pointer;
  white-space: nowrap;
  transition: all 0.2s var(--spring-gentle);
  min-height: 36px;
  display: flex;
  align-items: center;
}

.filter-chip:active { transform: scale(0.92); }

.filter-chip.active {
  background: var(--blue);
  color: white;
  border-color: var(--blue);
  box-shadow: 0 0 12px rgba(88, 166, 255, 0.25);
}

.category-chips {
  display: flex;
  gap: 6px;
  flex-wrap: wrap;
  width: 100%;
  margin-top: 4px;
}

.category-chips:empty { display: none; }

.hidden { display: none !important; }

/* Views */
.view {
  display: block;
  overflow-y: auto;
  -webkit-overflow-scrolling: touch;
  max-height: 100dvh;
  animation: viewFadeIn 0.25s ease-out;
}
.view.hidden { display: none !important; }

/* Pull to Refresh */
#ptr-indicator {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  height: 0;
  overflow: hidden;
  opacity: 0;
  transition: height 0.2s ease, opacity 0.2s ease;
  color: var(--text-secondary, #8b949e);
  font-size: 0.82rem;
}
#ptr-indicator.ptr-pulling,
#ptr-indicator.ptr-loading {
  height: 44px;
  opacity: 1;
}
.ptr-icon {
  display: inline-block;
  font-size: 1rem;
  transition: transform 0.2s ease;
}
#ptr-indicator.ptr-loading .ptr-icon {
  animation: ptrSpin 0.8s linear infinite;
}
@keyframes ptrSpin {
  to { transform: rotate(360deg); }
}

@keyframes viewFadeIn {
  from { opacity: 0; transform: translateY(8px); }
  to { opacity: 1; transform: translateY(0); }
}

.view-placeholder {
  text-align: center;
  padding: 80px 20px;
  color: var(--text-dim);
}
.view-placeholder .emoji { font-size: 48px; margin-bottom: 12px; }
.view-placeholder p { font-size: 15px; }

/* Bottom Tab Bar — サイドバーに置き換え済み、非表示 */
.tab-bar {
  display: none !important;
}

@supports not (backdrop-filter: blur(0)) {
  .tab-bar { background: var(--surface); border-top-color: var(--border); }
}

.tab {
  flex: 1;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 3px;
  text-decoration: none;
  color: var(--text-dim);
  font-size: 10px;
  position: relative;
  -webkit-tap-highlight-color: transparent;
  transition: color 0.2s ease;
  padding: 6px 0;
}

.tab.active { color: var(--blue); }
.tab:active { transform: scale(0.88); }
.tab-icon { font-size: 22px; line-height: 1; transition: filter 0.2s ease, transform 0.2s var(--spring); }
.tab.active .tab-icon { filter: drop-shadow(0 0 6px rgba(88, 166, 255, 0.5)); transform: translateY(-1px); }
.tab-label { font-weight: 600; letter-spacing: 0.2px; }

.tab-badge {
  position: absolute;
  top: 4px;
  right: calc(50% - 20px);
  background: var(--red);
  color: white;
  font-size: 10px;
  font-weight: 700;
  min-width: 16px;
  height: 16px;
  line-height: 16px;
  text-align: center;
  border-radius: 8px;
  padding: 0 4px;
}

.tab-badge.hidden { display: none; }

/* === Sidebar (常時表示) === */
.sidebar {
  position: fixed;
  top: 0;
  left: 0;
  bottom: 0;
  width: calc(56px + env(safe-area-inset-left, 0px));
  background: var(--glass-bg);
  backdrop-filter: var(--glass-blur);
  -webkit-backdrop-filter: var(--glass-blur);
  border-right: 1px solid var(--glass-border);
  display: flex;
  flex-direction: column;
  padding: calc(var(--safe-top) + 8px) 0 calc(var(--safe-bottom) + 8px);
  padding-left: calc(6px + env(safe-area-inset-left, 0px));
  z-index: 100;
  overflow-y: auto;
  overflow-x: hidden;
  scrollbar-width: none;
}
.sidebar::-webkit-scrollbar { display: none; }

.sidebar-item {
  position: relative;
  width: 38px;
  height: 38px;
  margin: 1px auto;
  border-radius: 10px;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 18px;
  cursor: pointer;
  transition: background 0.2s ease, border-radius 0.3s var(--spring);
  -webkit-tap-highlight-color: transparent;
  color: var(--text-dim);
}

.sidebar-item:hover { background: rgba(255, 255, 255, 0.06); }
.sidebar-item.active { background: rgba(88, 166, 255, 0.15); color: var(--text); }

/* Discord風アクティブピル */
.sidebar-item::before {
  content: '';
  position: absolute;
  left: -5px;
  width: 3px;
  height: 0;
  background: var(--blue);
  border-radius: 0 3px 3px 0;
  transition: height 0.2s var(--spring);
}
.sidebar-item:hover::before { height: 14px; }
.sidebar-item.active::before { height: 24px; }

.sidebar-badge {
  position: absolute;
  top: 2px;
  right: 2px;
  background: var(--red);
  color: white;
  font-size: 9px;
  font-weight: 700;
  min-width: 14px;
  height: 14px;
  line-height: 14px;
  text-align: center;
  border-radius: 7px;
  padding: 0 3px;
}

.sidebar-divider {
  width: 28px;
  height: 1px;
  background: var(--border);
  margin: 8px auto;
}

.sidebar-tooltip {
  position: absolute;
  left: calc(100% + 12px);
  background: var(--surface);
  border: 1px solid var(--border);
  color: var(--text);
  padding: 6px 10px;
  border-radius: 6px;
  font-size: 12px;
  font-weight: 600;
  white-space: nowrap;
  pointer-events: none;
  opacity: 0;
  transform: translateX(-4px);
  transition: opacity 0.15s, transform 0.15s var(--spring-gentle);
  z-index: 200;
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.3);
}
.sidebar-item:hover .sidebar-tooltip { opacity: 1; transform: translateX(0); }
.sidebar-tooltip-handle {
  display: block;
  font-size: 10px;
  font-weight: 400;
  color: var(--text-dim);
  margin-top: 1px;
}

/* === Mobile PJ Selector (<600px) === */
.mobile-pj-selector {
  display: none;
  position: relative;
  z-index: 110;  /* header(100)より上 — ドロップダウンが被らないように */
}

.pj-dropdown-trigger {
  display: flex;
  align-items: center;
  gap: 6px;
  background: none;
  border: none;
  color: var(--text);
  font-size: 15px;
  font-weight: 700;
  cursor: pointer;
  padding: 8px 12px;
  -webkit-tap-highlight-color: transparent;
}

.pj-current-icon { font-size: 18px; }
.pj-dropdown-arrow {
  font-size: 12px;
  color: var(--text-dim);
  transition: transform 0.2s var(--spring-gentle);
}
.pj-dropdown-trigger.open .pj-dropdown-arrow { transform: rotate(180deg); }

.pj-dropdown-menu {
  position: absolute;
  top: 100%;
  left: 0;
  right: 0;
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: 12px;
  padding: 6px;
  margin: 4px 12px;
  box-shadow: 0 8px 32px rgba(0, 0, 0, 0.4);
  z-index: 200;
  animation: dropdownIn 0.2s var(--spring);
}

@keyframes dropdownIn {
  from { opacity: 0; transform: translateY(-8px) scale(0.97); }
  to { opacity: 1; transform: translateY(0) scale(1); }
}

.pj-dropdown-item {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 10px 12px;
  border-radius: 8px;
  cursor: pointer;
  font-size: 14px;
  font-weight: 500;
  color: var(--text);
  -webkit-tap-highlight-color: transparent;
}
.pj-dropdown-item:active { background: rgba(255, 255, 255, 0.06); }
.pj-dropdown-item.active { background: rgba(88, 166, 255, 0.1); color: var(--blue); }
.pj-dropdown-item .pj-item-icon { font-size: 18px; width: 24px; text-align: center; }
.pj-dropdown-item .pj-item-label { flex: 1; }
.pj-item-handle {
  margin-left: 6px;
  font-size: 11px;
  font-weight: 400;
  color: var(--text-dim);
}
.pj-dropdown-item .pj-item-badge {
  background: var(--red);
  color: white;
  font-size: 10px;
  font-weight: 700;
  min-width: 18px;
  height: 18px;
  line-height: 18px;
  text-align: center;
  border-radius: 9px;
  padding: 0 5px;
}

.pj-dropdown-divider {
  height: 1px;
  background: var(--border);
  margin: 4px 8px;
}

/* === サイドバー SVGアイコン === */
.sidebar-item svg {
  display: block;
  flex-shrink: 0;
  transition: opacity 0.15s;
}

/* === Manage Bottom Tabs (承認 ↔ 定期実行) === */
.manage-bottom-tabs {
  position: fixed;
  bottom: 0;
  left: calc(56px + env(safe-area-inset-left, 0px));
  right: 0;
  z-index: 90;
  display: flex;
  background: var(--glass-bg);
  backdrop-filter: var(--glass-blur);
  -webkit-backdrop-filter: var(--glass-blur);
  border-top: 1px solid var(--glass-border);
  padding-bottom: env(safe-area-inset-bottom, 0px);
}

.manage-bottom-tabs.hidden { display: none !important; }

.manage-tab {
  flex: 1;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 4px;
  padding: 10px 0 8px;
  background: none;
  border: none;
  color: var(--text-dim);
  font-size: 10px;
  font-weight: 600;
  letter-spacing: 0.2px;
  cursor: pointer;
  -webkit-tap-highlight-color: transparent;
  transition: color 0.2s ease;
  position: relative;
}

.manage-tab.active { color: var(--blue); }
.manage-tab:active { transform: scale(0.88); }

.manage-tab-icon {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 24px;
  height: 24px;
  transition: filter 0.2s ease, transform 0.2s var(--spring);
}

.manage-tab.active .manage-tab-icon {
  filter: drop-shadow(0 0 6px rgba(88, 166, 255, 0.5));
  transform: translateY(-1px);
}

.manage-tab-label { font-size: 10px; }

.manage-tab-badge {
  position: absolute;
  top: 4px;
  right: calc(50% - 18px);
  background: var(--red);
  color: white;
  font-size: 10px;
  font-weight: 700;
  min-width: 16px;
  height: 16px;
  line-height: 16px;
  text-align: center;
  border-radius: 8px;
  padding: 0 4px;
}

.manage-tab-badge.hidden { display: none; }

/* 管理ビュー（承認・定期実行・ログ・レポート）は下部タブ分のパディングが必要 */
#view-approval, #view-tasks, #view-logs, #view-reports {
  padding-bottom: calc(68px + env(safe-area-inset-bottom, 0px));
}

/* デイリービュー（一覧 ↔ 今日）は下部タブ分のパディングが必要 */
#view-daily {
  padding-bottom: calc(68px + env(safe-area-inset-bottom, 0px));
}

/* === ログタイムライン === */
.logs-list { display: flex; flex-direction: column; gap: 0; }

.log-day-group { border-bottom: 1px solid var(--border); }

.log-day-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 10px 16px 6px;
  background: var(--bg);
}

.log-day-label { font-size: 13px; font-weight: 700; color: var(--text-dim); }
.log-day-summary { display: flex; gap: 8px; font-size: 12px; font-weight: 700; }
.log-day-ok { color: var(--green); }
.log-day-ng { color: var(--red); }

.log-task-row {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 9px 16px;
  cursor: pointer;
  -webkit-tap-highlight-color: transparent;
  transition: background 0.12s;
  border-top: 1px solid var(--border);
}
.log-task-row:active { background: var(--surface); }

.log-task-name {
  flex: 1;
  font-size: 13px;
  color: var(--text);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.log-task-right {
  display: flex;
  align-items: center;
  gap: 6px;
  flex-shrink: 0;
}

/* === レポートカード === */
.reports-list { display: flex; flex-direction: column; gap: 12px; padding: 12px 12px; }

.report-card {
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: 12px;
  overflow: hidden;
}

.report-card-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 12px 14px 10px;
  border-bottom: 1px solid var(--border);
}

.report-card-title { font-size: 14px; font-weight: 700; color: var(--text); flex: 1; }
.report-card-date { font-size: 11px; color: var(--text-dim); flex-shrink: 0; margin-left: 8px; }

.report-card-body { padding: 10px 14px 12px; display: flex; flex-direction: column; gap: 6px; }

.report-fields-inline {
  display: flex;
  flex-direction: column;
  gap: 4px;
}

.report-field-inline {
  display: flex;
  align-items: baseline;
  gap: 8px;
  padding: 3px 0;
}

.report-field-block {
  padding: 5px 0;
  border-top: 1px solid var(--border);
}

.report-field-label {
  font-size: 11px;
  color: var(--blue);
  font-weight: 600;
  flex-shrink: 0;
  min-width: 80px;
}

.report-field-inline .report-field-label { min-width: 80px; }

.report-field-value {
  font-size: 12px;
  color: var(--text);
  line-height: 1.5;
  flex: 1;
}

.report-field-value-block {
  margin-top: 3px;
  font-size: 12px;
  color: var(--text-dim);
  line-height: 1.6;
}

@supports not (backdrop-filter: blur(0)) {
  .manage-bottom-tabs { background: var(--surface); border-top-color: var(--border); }
}

/* === Note Bottom Tabs (公開済み / 下書き / 全件 / 統計 / テーマ / 生成) === */
.note-bottom-tabs {
  position: fixed;
  bottom: 0;
  left: calc(56px + env(safe-area-inset-left, 0px));
  right: 0;
  z-index: 90;
  display: flex;
  background: var(--glass-bg);
  backdrop-filter: var(--glass-blur);
  -webkit-backdrop-filter: var(--glass-blur);
  border-top: 1px solid var(--glass-border);
  padding-bottom: env(safe-area-inset-bottom, 0px);
}

.note-bottom-tabs.hidden { display: none !important; }

.note-tab {
  flex: 1;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 3px;
  padding: 10px 0 8px;
  background: none;
  border: none;
  color: var(--text-dim);
  font-size: 9px;
  font-weight: 600;
  letter-spacing: 0.2px;
  cursor: pointer;
  -webkit-tap-highlight-color: transparent;
  transition: color 0.2s ease;
  position: relative;
}

.note-tab.active { color: var(--blue); }
.note-tab:active { transform: scale(0.88); }

.note-tab-icon {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 22px;
  height: 22px;
  transition: filter 0.2s ease, transform 0.2s var(--spring);
}

.note-tab.active .note-tab-icon {
  filter: drop-shadow(0 0 6px rgba(88, 166, 255, 0.5));
  transform: translateY(-1px);
}

.note-tab-label { font-size: 9px; }

@supports not (backdrop-filter: blur(0)) {
  .note-bottom-tabs { background: var(--surface); border-top-color: var(--border); }
}

/* === Daily Bottom Tabs (一覧 ↔ 今日) === */
.daily-bottom-tabs {
  position: fixed;
  bottom: 0;
  left: calc(56px + env(safe-area-inset-left, 0px));
  right: 0;
  z-index: 90;
  display: flex;
  overflow: hidden;
  background: var(--glass-bg);
  backdrop-filter: var(--glass-blur);
  -webkit-backdrop-filter: var(--glass-blur);
  border-top: 1px solid var(--glass-border);
  padding-bottom: env(safe-area-inset-bottom, 0px);
}

.daily-bottom-tabs.hidden { display: none !important; }

.daily-tab {
  flex: 1;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 4px;
  padding: 10px 0 8px;
  background: none;
  border: none;
  color: var(--text-dim);
  font-size: 10px;
  font-weight: 600;
  letter-spacing: 0.2px;
  cursor: pointer;
  -webkit-tap-highlight-color: transparent;
  transition: color 0.2s ease;
  position: relative;
}

.daily-tab.active { color: var(--blue); }
.daily-tab:active { transform: scale(0.88); }

/* 左グループ（習慣+一覧）: 全体の1/2 */
.daily-left-group {
  flex: 1;
  display: flex;
  align-items: stretch;
  border-right: 1px solid var(--glass-border);
}
.daily-left-group .daily-tab { flex: 1; }

/* 今日エリア: 全体の1/2。← 今日 → を中央に密着配置 */
.daily-today-group {
  flex: 1;
  display: flex;
  align-items: stretch;
  justify-content: center;
  gap: 8px;
}
.daily-today-group .daily-tab { flex: 0 auto; }
/* 矢印ボタン：36px固定・アイコンのみ */
.daily-arrow-btn {
  flex: 0 0 36px;
  display: flex; align-items: center; justify-content: center;
  background: none; border: none;
  color: var(--text-dim);
  cursor: pointer; -webkit-tap-highlight-color: transparent;
  transition: color .15s, transform .12s;
}
.daily-arrow-btn:active { color: var(--blue); transform: scale(0.85); }



.daily-tab-icon {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 24px;
  height: 24px;
  transition: filter 0.2s ease, transform 0.2s var(--spring);
}

.daily-tab.active .daily-tab-icon {
  filter: drop-shadow(0 0 6px rgba(88, 166, 255, 0.5));
  transform: translateY(-1px);
}

.daily-tab-label { font-size: 10px; }

@supports not (backdrop-filter: blur(0)) {
  .daily-bottom-tabs { background: var(--surface); border-top-color: var(--border); }
}

/* === Finance Bottom Tabs (概要 / 事業 / コスト / CF / 予測 / データ) === */
.fin-bottom-tabs {
  position: fixed;
  bottom: 0;
  left: calc(56px + env(safe-area-inset-left, 0px));
  right: 0;
  z-index: 90;
  display: flex;
  background: var(--glass-bg);
  backdrop-filter: var(--glass-blur);
  -webkit-backdrop-filter: var(--glass-blur);
  border-top: 1px solid var(--glass-border);
  padding-bottom: env(safe-area-inset-bottom, 0px);
}

.fin-bottom-tabs.hidden { display: none !important; }

.fin-tab {
  flex: 1;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  padding: 8px 2px 6px;
  background: none;
  border: none;
  color: var(--text-dim);
  cursor: pointer;
  gap: 3px;
  transition: color 0.15s, transform 0.1s;
  min-height: 52px;
}

.fin-tab.active { color: var(--blue); }
.fin-tab:active { transform: scale(0.88); }

.fin-tab-icon {
  display: flex;
  align-items: center;
  justify-content: center;
  transition: filter 0.15s, transform 0.15s;
}

.fin-tab.active .fin-tab-icon {
  filter: drop-shadow(0 0 6px rgba(88, 166, 255, 0.5));
  transform: translateY(-1px);
}

.fin-tab-label { font-size: 9px; }

@supports not (backdrop-filter: blur(0)) {
  .fin-bottom-tabs { background: var(--surface); border-top-color: var(--border); }
}

/* === Project Tabs (PJ内タブバー) === */
.project-tabs {
  position: sticky;
  top: 0;
  z-index: 90;
  background: var(--glass-bg);
  backdrop-filter: var(--glass-blur);
  -webkit-backdrop-filter: var(--glass-blur);
  border-bottom: 1px solid var(--glass-border);
  display: flex;
  gap: 0;
  padding: var(--safe-top) 16px 0;
  overflow-x: auto;
  scrollbar-width: none;
}
.project-tabs::-webkit-scrollbar { display: none; }
.project-tabs.hidden { display: none !important; }

.project-tab {
  padding: 12px 16px;
  font-size: 13px;
  font-weight: 600;
  color: var(--text-dim);
  white-space: nowrap;
  cursor: pointer;
  border-bottom: 2px solid transparent;
  transition: color 0.15s, border-color 0.15s;
  -webkit-tap-highlight-color: transparent;
}
.project-tab:active { opacity: 0.7; }
.project-tab.active { color: var(--blue); border-bottom-color: var(--blue); }

/* === Desktop (600px+): サイドバー幅拡大 === */
@media (min-width: 600px) {
  .sidebar { width: 60px; padding: 12px 0; padding-left: 0; }
  .modal { left: 60px; }
  .sidebar-item { width: 44px; height: 44px; font-size: 20px; margin: 2px auto; border-radius: 12px; }
  .sidebar-item::before { left: -8px; }
  .sidebar-item:hover::before { height: 16px; }
  .sidebar-item.active::before { height: 28px; }
  body { padding-left: 60px; }
  .manage-bottom-tabs { left: 60px; }
  .daily-bottom-tabs { left: 60px; }
  .fin-bottom-tabs { left: 60px; }
  .sidebar-item svg { width: 24px; height: 24px; }
}

/* モバイルPJセレクター — サイドバーに置き換え済み、非表示 */
.mobile-pj-selector { display: none !important; }

/* Item List */
.item-list {
  padding: 10px 14px 20px;
}

.item-card {
  background: linear-gradient(145deg, rgba(22, 27, 34, 1) 0%, rgba(22, 27, 34, 0.95) 100%);
  border: 1px solid rgba(255, 255, 255, 0.06);
  border-radius: var(--radius);
  padding: 0;
  margin-bottom: 10px;
  cursor: pointer;
  transition: transform 0.25s var(--spring-gentle), box-shadow 0.25s ease;
  position: relative;
  overflow: hidden;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.2);
}

.item-card.status-approved { border-left: 3px solid var(--green); }
.item-card.status-approved .card-inner::after {
  content: '✓';
  position: absolute;
  right: 14px;
  top: 14px;
  color: var(--green);
  font-size: 16px;
  font-weight: 800;
  opacity: 0.4;
}
.item-card.status-rejected { border-left: 3px solid var(--red); opacity: 0.5; }
.item-card.status-expired { border-left: 3px solid var(--text-dim); opacity: 0.5; }
.item-card.status-pending { border-left: 3px solid var(--orange); }

.item-card .card-top {
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
  gap: 8px;
  margin-bottom: 6px;
}

.item-card .card-title {
  font-size: 16px;
  font-weight: 700;
  line-height: 1.4;
  flex: 1;
  letter-spacing: -0.2px;
}

.category-tag {
  font-size: 11px;
  padding: 3px 10px;
  border-radius: 6px;
  background: var(--border);
  color: var(--text-dim);
  white-space: nowrap;
  flex-shrink: 0;
  font-weight: 600;
}

.category-tag.realize { background: #1a3a2a; color: var(--green); }
.category-tag.x-post { background: #1a2a3a; color: var(--blue); }
.category-tag.note { background: #2a1a3a; color: var(--purple); }
.category-tag.cw { background: #3a2a1a; color: var(--orange); }
.category-tag.lancers { background: #3a1a1a; color: #f0883e; }
.category-tag.kimura { background: #1a2a2a; color: #56d4dd; }
.category-tag.other { background: #2a2a2a; color: var(--text-dim); }
.category-tag.email { background: #1a2a3a; color: #7eb8f7; }

.item-card .card-preview {
  font-size: 13px;
  color: var(--text-dim);
  line-height: 1.5;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
}

.item-card .card-time {
  font-size: 11px;
  color: var(--text-dim);
  margin-top: 6px;
}

.card-actions {
  display: flex;
  gap: 8px;
  margin-top: 10px;
}

.card-action-btn {
  flex: 1;
  padding: 12px 16px;
  border: none;
  border-radius: 10px;
  font-size: 15px;
  font-weight: 700;
  cursor: pointer;
  transition: transform 0.2s var(--spring-gentle), box-shadow 0.2s ease;
  min-height: 44px;
}

.card-action-btn:active { transform: scale(0.9); }

.card-action-btn.approve {
  background: var(--green);
  color: white;
  box-shadow: 0 2px 12px rgba(63, 185, 80, 0.25);
}

.card-action-btn.approve:active {
  box-shadow: 0 0 20px rgba(63, 185, 80, 0.4);
}

.card-action-btn.reject {
  background: rgba(248, 81, 73, 0.1);
  border: 1px solid rgba(248, 81, 73, 0.4);
  color: var(--red);
}

.card-action-btn.reject:active {
  background: rgba(248, 81, 73, 0.2);
}

/* Modal */
.modal {
  position: fixed;
  top: 0;
  right: 0;
  bottom: 0;
  left: calc(56px + env(safe-area-inset-left, 0px));
  z-index: 200;
  background: rgba(0, 0, 0, 0.5);
  backdrop-filter: blur(4px);
  -webkit-backdrop-filter: blur(4px);
  display: flex;
  align-items: flex-end;
  justify-content: center;
}

.modal-content {
  background: var(--surface);
  border: 1px solid var(--glass-border);
  width: 100%;
  max-width: 600px;
  max-height: 90dvh;
  border-radius: 20px 20px 0 0;
  padding: 24px 20px 0;
  overflow: hidden;
  display: flex;
  flex-direction: column;
  animation: slideUp 0.4s var(--spring);
  box-shadow: 0 -8px 40px rgba(0, 0, 0, 0.4);
}

.modal-content .modal-header,
.modal-content h2,
.modal-content .modal-meta {
  flex-shrink: 0;
}

@keyframes slideUp {
  from { transform: translateY(100%) scale(0.95); opacity: 0; }
  to { transform: translateY(0) scale(1); opacity: 1; }
}

.modal-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 16px;
}

.modal-header .icon-btn {
  width: 40px;
  height: 40px;
  font-size: 18px;
  border-radius: 50%;
  background: rgba(255, 255, 255, 0.06);
  border-color: rgba(255, 255, 255, 0.1);
}

.modal-content::before {
  content: '';
  display: block;
  width: 36px;
  height: 4px;
  background: rgba(255, 255, 255, 0.2);
  border-radius: 2px;
  margin: 0 auto 16px;
}

.modal-content h2 {
  font-size: 18px;
  font-weight: 700;
  margin-bottom: 8px;
  color: var(--blue);
}

.modal-meta {
  font-size: 12px;
  color: var(--text-dim);
  margin-bottom: 16px;
}

.modal-body {
  font-size: 14px;
  line-height: 1.7;
  white-space: pre-wrap;
  word-break: break-word;
  padding: 16px;
  background: var(--bg);
  border-radius: 8px;
  overflow-y: auto;
  margin-bottom: 16px;
  flex: 1;
  min-height: 0;
}

#modal-edit-area {
  flex: 1;
  min-height: 0;
  display: flex;
  flex-direction: column;
}

#modal-editor {
  width: 100%;
  background: var(--bg);
  color: var(--text);
  border: 1px solid var(--blue);
  border-radius: 8px;
  padding: 12px;
  font-size: 14px;
  line-height: 1.6;
  font-family: inherit;
  resize: vertical;
  margin-bottom: 16px;
  flex: 1;
  min-height: 0;
}

#modal-edit-area.hidden {
  display: none !important;
}

.modal-actions {
  display: flex;
  gap: 10px;
  flex-shrink: 0;
  padding: 16px 0 calc(var(--safe-bottom) + 20px);
  background: var(--surface);
}

.action-btn {
  flex: 1;
  padding: 16px;
  border: none;
  border-radius: 14px;
  font-size: 17px;
  font-weight: 700;
  cursor: pointer;
  transition: transform 0.2s var(--spring-gentle), box-shadow 0.2s ease;
  min-height: 52px;
  letter-spacing: 0.3px;
}

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

.action-btn.approve { background: var(--green); color: white; box-shadow: 0 0 20px rgba(63, 185, 80, 0.2); }
.action-btn.approve:active { box-shadow: 0 0 30px rgba(63, 185, 80, 0.4); }
.action-btn.reject { background: var(--red); color: white; box-shadow: 0 0 20px rgba(248, 81, 73, 0.15); }
.action-btn.reject:active { box-shadow: 0 0 30px rgba(248, 81, 73, 0.3); }
.action-btn.edit { background: var(--surface); border: 1px solid var(--border); color: var(--text); }
.action-btn.save { background: var(--blue); color: white; }

/* Toast */
.toast {
  position: fixed;
  bottom: calc(var(--safe-bottom) + 16px);
  left: 50%;
  transform: translateX(-50%);
  background: var(--glass-bg);
  backdrop-filter: blur(12px) saturate(180%);
  -webkit-backdrop-filter: blur(12px) saturate(180%);
  border: 1px solid var(--glass-border);
  padding: 10px 20px;
  border-radius: 10px;
  font-size: 14px;
  font-weight: 500;
  z-index: 300;
  animation: toastIn 0.35s var(--spring);
}

.toast.success { border-color: rgba(63, 185, 80, 0.3); color: var(--green); }
.toast.error { border-color: rgba(248, 81, 73, 0.3); color: var(--red); }

.toast.toast-out {
  animation: toastOut 0.3s ease forwards;
}

@keyframes toastIn {
  from { opacity: 0; transform: translateX(-50%) translateY(20px) scale(0.9); }
  to { opacity: 1; transform: translateX(-50%) translateY(0) scale(1); }
}

@keyframes toastOut {
  from { opacity: 1; transform: translateX(-50%) scale(1); }
  to { opacity: 0; transform: translateX(-50%) scale(0.9) translateY(10px); }
}

/* Bulk select */
.item-card.selectable { cursor: pointer; }
.item-card.selected { border-color: var(--blue); background: #161b2a; }

.bulk-bar {
  position: fixed;
  bottom: 0;
  left: 48px;
  right: 0;
  background: var(--surface);
  border-top: 1px solid var(--border);
  padding: 12px 16px;
  display: flex;
  gap: 10px;
  align-items: center;
  z-index: 150;
  animation: slideUp 0.15s ease-out;
}

.bulk-bar span { flex: 1; font-size: 14px; }
.bulk-bar .action-btn { flex: none; padding: 10px 20px; }

/* Skeleton loading */
.skeleton-card {
  background: var(--surface);
  border: 1px solid rgba(255, 255, 255, 0.04);
  border-radius: var(--radius);
  padding: 14px 16px;
  margin-bottom: 8px;
}

.skeleton {
  background: linear-gradient(90deg,
    var(--border) 25%,
    rgba(48, 54, 61, 0.6) 50%,
    var(--border) 75%
  );
  background-size: 200% 100%;
  animation: shimmer 1.5s infinite ease-in-out;
  border-radius: 6px;
}

.skeleton-title { height: 16px; width: 65%; margin-bottom: 10px; }
.skeleton-text { height: 12px; width: 90%; margin-bottom: 6px; }
.skeleton-text-short { height: 12px; width: 40%; }
.skeleton-tag { height: 18px; width: 60px; border-radius: 4px; }

.skeleton-card .card-top {
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
  margin-bottom: 10px;
}

@keyframes shimmer {
  0% { background-position: 200% 0; }
  100% { background-position: -200% 0; }
}

/* Empty state */
.empty-state {
  text-align: center;
  padding: 80px 20px;
  color: var(--text-dim);
}

.empty-state .emoji { font-size: 56px; margin-bottom: 16px; filter: grayscale(0.2); }
.empty-state p { font-size: 16px; font-weight: 500; opacity: 0.7; }

/* Risk level indicators */
.item-card.risk-low.status-pending { border-left: 3px solid var(--green); }
.item-card.risk-medium.status-pending { border-left: 3px solid var(--orange); }
.item-card.risk-high.status-pending { border-left: 3px solid var(--red); }

.risk-badge {
  font-size: 10px;
  font-weight: 700;
  padding: 1px 6px;
  border-radius: 3px;
  margin-left: 6px;
  text-transform: uppercase;
}

.risk-badge.risk-low { background: #1a3a2a; color: var(--green); }
.risk-badge.risk-medium { background: #3a2a1a; color: var(--orange); }
.risk-badge.risk-high { background: #3a1a1a; color: var(--red); }

/* High-risk top banner */
.item-card.risk-high.status-pending .card-inner::before {
  content: '要確認';
  display: block;
  background: var(--red);
  color: white;
  font-size: 11px;
  font-weight: 700;
  padding: 3px 10px;
  margin: -14px -16px 10px -16px;
  text-align: center;
  letter-spacing: 0.5px;
}

/* Swipe background */
.item-card {
  position: relative;
  overflow: hidden;
}

.swipe-bg {
  position: absolute;
  top: 0;
  bottom: 0;
  width: 100%;
  display: flex;
  align-items: center;
  font-weight: 700;
  font-size: 16px;
  opacity: 0;
  transition: opacity 0.15s;
}

.swipe-bg-approve {
  left: 0;
  padding-left: 20px;
  background: linear-gradient(90deg, var(--green), rgba(63, 185, 80, 0.7));
  color: white;
  justify-content: flex-start;
  gap: 6px;
}

.swipe-bg-reject {
  right: 0;
  padding-right: 20px;
  background: linear-gradient(270deg, var(--red), rgba(248, 81, 73, 0.7));
  color: white;
  justify-content: flex-end;
  gap: 6px;
}

.swipe-icon { font-size: 22px; font-weight: 800; }

.item-card.swiping-right .swipe-bg-approve { opacity: 1; }
.item-card.swiping-left .swipe-bg-reject { opacity: 1; }

.card-inner {
  position: relative;
  z-index: 1;
  background: var(--surface);
  padding: 16px 18px;
  border-radius: var(--radius);
  will-change: transform;
  transition: transform 0.2s var(--spring-gentle);
}

.item-card:active .card-inner {
  transform: scale(0.97);
}

/* Stats dashboard */
.stats-content { max-height: 85dvh; }

.stat-section {
  padding: 16px 0;
  border-bottom: 1px solid var(--border);
}

.stat-section:last-child { border-bottom: none; }

.stat-section h3 {
  font-size: 13px;
  color: var(--text-dim);
  text-transform: uppercase;
  letter-spacing: 0.5px;
  margin-bottom: 10px;
}

.stat-big {
  font-size: 42px;
  font-weight: 800;
  color: var(--blue);
  text-align: center;
}

.stat-big small { font-size: 18px; color: var(--text-dim); margin-left: 4px; }

.stat-sub {
  text-align: center;
  font-size: 13px;
  color: var(--text-dim);
  margin-top: 4px;
}

.stat-row {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 6px 0;
  font-size: 14px;
}

.stat-val { font-weight: 600; color: var(--text); }

.daily-bar {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 3px 0;
  font-size: 12px;
}

.daily-label { width: 40px; color: var(--text-dim); flex-shrink: 0; }

.daily-track {
  flex: 1;
  height: 14px;
  background: var(--bg);
  border-radius: 7px;
  overflow: hidden;
}

.daily-fill {
  height: 100%;
  background: var(--green);
  border-radius: 7px;
  min-width: 2px;
}

.daily-val { width: 24px; text-align: right; color: var(--text-dim); flex-shrink: 0; }

/* === Phase 6: タスク管理 === */
.tasks-segment {
  display: flex;
  background: rgba(255,255,255,0.06);
  border-radius: 8px;
  padding: 2px;
  gap: 2px;
}
.tasks-seg-btn {
  flex: 1;
  padding: 5px 10px;
  border: none;
  border-radius: 6px;
  background: transparent;
  color: var(--text-dim);
  font-size: 12px;
  cursor: pointer;
  transition: background .15s, color .15s;
  white-space: nowrap;
}
.tasks-seg-btn.active {
  background: var(--accent);
  color: #fff;
}

.tasks-list {
  padding: 12px 16px;
  padding-bottom: 80px;
}

.task-group {
  margin-bottom: 20px;
}

.task-group-header {
  font-size: 11px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 1px;
  color: var(--text-dim);
  padding: 4px 0 8px;
}

.task-card {
  background: rgba(22, 27, 34, 0.7);
  backdrop-filter: blur(12px) saturate(160%);
  -webkit-backdrop-filter: blur(12px) saturate(160%);
  border: 1px solid var(--border);
  border-radius: 12px;
  padding: 14px 16px;
  margin-bottom: 8px;
  transition: all var(--spring);
  cursor: pointer;
}

.task-card:active {
  transform: scale(0.98);
}

.task-card.task-disabled {
  opacity: 0.45;
}

.task-card-main {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 12px;
}

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

.task-name {
  font-size: 14px;
  font-weight: 600;
  color: var(--text);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

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

.task-schedule {
  font-size: 12px;
  color: var(--blue);
  font-weight: 600;
  font-variant-numeric: tabular-nums;
}

.task-freq {
  font-size: 11px;
  color: var(--text-dim);
  background: rgba(255,255,255,0.06);
  padding: 1px 6px;
  border-radius: 4px;
}

.task-tag {
  font-size: 10px;
  padding: 1px 6px;
  border-radius: 4px;
  color: var(--tag-color);
  background: color-mix(in srgb, var(--tag-color) 15%, transparent);
  font-weight: 600;
}

.task-right {
  display: flex;
  flex-direction: column;
  align-items: flex-end;
  gap: 8px;
  flex-shrink: 0;
}

.task-last-run {
  display: flex;
  gap: 6px;
  align-items: center;
}

.task-status {
  font-size: 12px;
  font-weight: 600;
}

.status-success { color: var(--green); }
.status-failed { color: var(--red); }
.status-running { color: var(--blue); animation: pulse 1.5s infinite; }
.status-pending { color: var(--yellow); }
.status-unknown { color: var(--text-dim); }

@keyframes pulse {
  0%, 100% { opacity: 1; }
  50% { opacity: 0.5; }
}

.task-duration {
  font-size: 11px;
  color: var(--text-dim);
  font-variant-numeric: tabular-nums;
}

/* Toggle Switch */
.toggle-switch {
  position: relative;
  display: inline-block;
  width: 44px;
  height: 24px;
}

.toggle-switch input {
  opacity: 0;
  width: 0;
  height: 0;
}

.toggle-slider {
  position: absolute;
  cursor: pointer;
  inset: 0;
  background: var(--border);
  border-radius: 24px;
  transition: background var(--spring);
}

.toggle-slider::before {
  content: '';
  position: absolute;
  width: 18px;
  height: 18px;
  left: 3px;
  bottom: 3px;
  background: var(--text);
  border-radius: 50%;
  transition: transform var(--spring);
}

.toggle-switch input:checked + .toggle-slider {
  background: var(--green);
}

.toggle-switch input:checked + .toggle-slider::before {
  transform: translateX(20px);
}

.task-toggle-wrap {
  padding: 4px;
}

/* Task Log Modal */
.task-log-description {
  font-size: 12px;
  color: var(--text-dim);
  padding: 6px 4px 10px;
  border-bottom: 1px solid var(--border);
  margin-bottom: 10px;
}

.task-log-body {
  max-height: 60vh;
  overflow-y: auto;
  -webkit-overflow-scrolling: touch;
}

.log-entry {
  background: rgba(13, 17, 23, 0.5);
  border-radius: 8px;
  padding: 12px;
  margin-bottom: 8px;
  border-left: 3px solid var(--border);
}

.log-entry.status-success { border-left-color: var(--green); }
.log-entry.status-failed { border-left-color: var(--red); }
.log-entry.status-running { border-left-color: var(--blue); }

.log-header {
  display: flex;
  gap: 8px;
  align-items: center;
  margin-bottom: 8px;
  flex-wrap: wrap;
}

.log-date {
  font-size: 13px;
  font-weight: 600;
  color: var(--text);
  font-variant-numeric: tabular-nums;
}

.log-size {
  font-size: 11px;
  color: var(--text-dim);
  margin-left: auto;
}

.log-tail {
  font-size: 11px;
  color: var(--text-dim);
  background: rgba(0,0,0,0.3);
  padding: 8px;
  border-radius: 6px;
  overflow-x: auto;
  white-space: pre-wrap;
  word-break: break-all;
  max-height: 120px;
  overflow-y: auto;
  margin: 0;
  font-family: 'SF Mono', 'Menlo', monospace;
  line-height: 1.4;
}

.empty-state {
  text-align: center;
  padding: 40px 20px;
  color: var(--text-dim);
  font-size: 14px;
}

/* === Phase 7: ダッシュボード === */
.dashboard-content {
  padding: 12px 16px;
  padding-bottom: 80px;
}

/* KPIグリッド */
.kpi-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 10px;
  margin-bottom: 20px;
}

.kpi-card {
  background: rgba(22, 27, 34, 0.7);
  backdrop-filter: blur(12px) saturate(160%);
  -webkit-backdrop-filter: blur(12px) saturate(160%);
  border: 1px solid var(--border);
  border-radius: 12px;
  padding: 16px;
  text-align: center;
  transition: transform var(--spring);
}

.kpi-card:active { transform: scale(0.97); }

.kpi-value {
  font-size: 28px;
  font-weight: 800;
  font-variant-numeric: tabular-nums;
  line-height: 1.2;
}

.kpi-ok .kpi-value { color: var(--green); }
.kpi-warn .kpi-value { color: var(--yellow); }
.kpi-neutral .kpi-value { color: var(--text-dim); }

.kpi-label {
  font-size: 11px;
  color: var(--text-dim);
  margin-top: 4px;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.5px;
}

/* セクション */
.dash-section {
  margin-bottom: 20px;
}

.dash-section-title {
  font-size: 13px;
  font-weight: 700;
  color: var(--text-dim);
  text-transform: uppercase;
  letter-spacing: 0.5px;
  margin-bottom: 10px;
}

/* 今日のタスク */
.today-tasks {
  background: rgba(22, 27, 34, 0.7);
  backdrop-filter: blur(12px) saturate(160%);
  -webkit-backdrop-filter: blur(12px) saturate(160%);
  border: 1px solid var(--border);
  border-radius: 12px;
  overflow: hidden;
}

.today-task-row {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 10px 14px;
  border-bottom: 1px solid rgba(48, 54, 61, 0.5);
  font-size: 13px;
}

.today-task-row:last-child { border-bottom: none; }

.today-task-time {
  color: var(--blue);
  font-weight: 600;
  font-variant-numeric: tabular-nums;
  width: 42px;
  flex-shrink: 0;
}

.today-task-name {
  flex: 1;
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  color: var(--text);
}

/* PJカード */
.pj-cards {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 10px;
}

.pj-card {
  background: rgba(22, 27, 34, 0.7);
  backdrop-filter: blur(12px) saturate(160%);
  -webkit-backdrop-filter: blur(12px) saturate(160%);
  border: 1px solid var(--border);
  border-radius: 12px;
  padding: 14px;
  cursor: pointer;
  transition: all var(--spring);
  border-top: 2px solid var(--pj-color);
}

.pj-card:active { transform: scale(0.97); }

.pj-card-header {
  display: flex;
  align-items: center;
  gap: 6px;
  margin-bottom: 8px;
}

.pj-icon { font-size: 16px; }

.pj-label {
  font-size: 13px;
  font-weight: 600;
  color: var(--text);
  flex: 1;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.pj-pending-badge {
  background: var(--yellow);
  color: #000;
  font-size: 10px;
  font-weight: 700;
  min-width: 18px;
  height: 18px;
  border-radius: 9px;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 0 5px;
}

.pj-card-stats {
  display: flex;
  gap: 8px;
  flex-wrap: wrap;
}

.pj-stat {
  font-size: 11px;
  font-weight: 600;
}

.pj-stat-ok { color: var(--green); }
.pj-stat-fail { color: var(--red); }
.pj-stat-off { color: var(--text-dim); }

/* PJ詳細展開 */
.pj-card-detail {
  margin-top: 10px;
  padding-top: 10px;
  border-top: 1px solid rgba(48, 54, 61, 0.5);
  animation: expandIn 0.2s var(--spring);
}

.pj-card-detail.hidden {
  display: none;
}

@keyframes expandIn {
  from { opacity: 0; max-height: 0; }
  to { opacity: 1; max-height: 200px; }
}

.pj-detail-row {
  font-size: 12px;
  color: var(--text-dim);
  padding: 3px 0;
}

.pj-detail-row .task-status {
  margin-right: 4px;
}

/* === Phase 8: 設定 === */
.settings-content {
  padding: 12px 16px;
  padding-bottom: 80px;
}

.settings-section {
  margin-bottom: 24px;
}

.settings-section-title {
  font-size: 11px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 1px;
  color: var(--text-dim);
  padding: 4px 0 10px;
}

.settings-row {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 12px 14px;
  background: rgba(22, 27, 34, 0.7);
  backdrop-filter: blur(12px) saturate(160%);
  -webkit-backdrop-filter: blur(12px) saturate(160%);
  border: 1px solid var(--border);
  margin-bottom: -1px;
}

.settings-row:first-of-type { border-radius: 12px 12px 0 0; }
.settings-row:last-of-type { border-radius: 0 0 12px 12px; margin-bottom: 0; }
.settings-row:only-of-type { border-radius: 12px; }

.settings-section .settings-row:first-of-type:not(:only-of-type) ~ .settings-row:last-of-type {
  border-radius: 0 0 12px 12px;
}

.settings-row-info { flex: 1; }

.settings-row-label {
  font-size: 14px;
  font-weight: 500;
  color: var(--text);
}

.settings-row-desc {
  font-size: 12px;
  color: var(--text-dim);
  margin-top: 2px;
}

.settings-row-value {
  font-size: 13px;
  color: var(--text-dim);
  text-align: right;
}

.settings-btn {
  width: 100%;
  padding: 12px;
  background: rgba(22, 27, 34, 0.7);
  backdrop-filter: blur(12px) saturate(160%);
  -webkit-backdrop-filter: blur(12px) saturate(160%);
  border: 1px solid var(--border);
  border-radius: 12px;
  color: var(--blue);
  font-size: 14px;
  font-weight: 600;
  cursor: pointer;
  transition: all var(--spring);
}

.settings-btn:active {
  transform: scale(0.98);
  background: rgba(22, 27, 34, 0.9);
}

/* === PJ Detail Overlay === */
.pj-detail-overlay {
  position: fixed;
  top: 0;
  right: 0;
  bottom: 0;
  left: calc(56px + env(safe-area-inset-left, 0px));
  z-index: 200;
  background: rgba(0, 0, 0, 0.5);
  backdrop-filter: blur(4px);
  -webkit-backdrop-filter: blur(4px);
  display: flex;
  align-items: flex-end;
  justify-content: center;
}

.pj-detail-panel {
  background: var(--surface);
  border: 1px solid var(--glass-border);
  width: 100%;
  max-width: 600px;
  max-height: 85dvh;
  border-radius: 20px 20px 0 0;
  padding: 24px 20px;
  overflow-y: auto;
  animation: slideUp 0.4s var(--spring);
  box-shadow: 0 -8px 40px rgba(0, 0, 0, 0.4);
}

.pj-detail-panel::before {
  content: '';
  display: block;
  width: 36px;
  height: 4px;
  background: rgba(255, 255, 255, 0.2);
  border-radius: 2px;
  margin: 0 auto 16px;
}

.pj-detail-body {
  font-size: 14px;
  line-height: 1.7;
  white-space: pre-wrap;
  word-break: break-word;
  padding: 16px;
  background: var(--bg);
  border-radius: 8px;
  margin: 16px 0;
  max-height: 50dvh;
  overflow-y: auto;
}

.pj-detail-actions {
  display: flex;
  gap: 10px;
  padding-top: 8px;
  padding-bottom: var(--safe-bottom);
}

@media (min-width: 600px) {
  .pj-detail-overlay { align-items: center; left: 60px; }
  .pj-detail-panel { border-radius: 20px; max-height: 80vh; }
}

/* === X投稿プレビューカード === */
/* ヘッダー: アカウント名のみ */
.xp-header {
  position: sticky; top: 0; z-index: 50;
  background: var(--glass-bg); backdrop-filter: var(--glass-blur); -webkit-backdrop-filter: var(--glass-blur);
  /* バー背景は全幅のまま、中身だけ640pxカラムに揃える（モバイルではmax()が16pxに解決） */
  padding: 14px max(16px, calc((100% - 600px) / 2)) 0;
}
.xp-header h1 { font-size: 20px; font-weight: 800; display: flex; align-items: center; gap: 8px; white-space: nowrap; }
.xp-header-icon { width: 30px; height: 30px; flex-shrink: 0; display: inline-flex; }
.xp-header-icon img { width: 100%; height: 100%; border-radius: 50%; object-fit: cover; }
.xp-header-handle { font-size: 13px; font-weight: 400; color: var(--text-dim); margin-left: 2px; }

/* ツールバー: フィルター + アクションボタンを1行に */
.xp-toolbar {
  position: sticky; top: 0; z-index: 49;
  background: var(--glass-bg); backdrop-filter: var(--glass-blur); -webkit-backdrop-filter: var(--glass-blur);
  display: flex; align-items: center; justify-content: space-between;
  padding: 8px max(16px, calc((100% - 600px) / 2));
  border-bottom: 1px solid var(--glass-border);
  gap: 8px;
}
.xp-filters {
  display: flex; gap: 6px; overflow-x: auto; scrollbar-width: none; flex: 1; min-width: 0;
}
.xp-filters::-webkit-scrollbar { display: none; }

/* 2階層タブのサブタブチップ行（親グループタブの下層選択） */
.xp-subtabs {
  display: flex; gap: 6px;
  padding: 10px max(16px, calc((100% - 600px) / 2)) 2px;
  overflow-x: auto; scrollbar-width: none;
}
.xp-subtabs::-webkit-scrollbar { display: none; }
.xp-subtab {
  background: var(--surface); border: 1px solid var(--border); color: var(--text-dim);
  padding: 7px 14px; border-radius: 10px; font-size: 13px; font-weight: 600;
  cursor: pointer; white-space: nowrap; transition: all 0.2s; min-height: 34px;
}
.xp-subtab:active { transform: scale(0.95); }
.xp-subtab.active {
  background: rgba(88, 166, 255, 0.15); border-color: var(--blue); color: var(--blue);
}

.xp-header-actions { display: flex; gap: 6px; align-items: center; flex-shrink: 0; }

.xp-sync-btn {
  background: var(--glass-bg); border: 1px solid var(--glass-border); color: var(--text-dim);
  padding: 5px 10px; border-radius: 8px; font-size: 12px; cursor: pointer;
  transition: all 0.2s; white-space: nowrap;
}
.xp-sync-btn:hover { background: var(--surface); color: var(--text); }
.xp-sync-btn:disabled { opacity: 0.5; cursor: not-allowed; }

/* 生成ボタン */
.xp-generate-btn {
  background: linear-gradient(135deg, var(--purple), var(--blue));
  border: none; color: #fff; padding: 5px 12px; border-radius: 8px;
  font-size: 12px; font-weight: 600; cursor: pointer;
  transition: all 0.2s; white-space: nowrap;
}
.xp-generate-btn:hover { opacity: 0.85; transform: scale(1.02); }
.xp-generate-btn:active { transform: scale(0.97); }

/* 手動作成ボタン */
.xp-compose-btn {
  background: var(--glass-bg); border: 1px solid var(--glass-border); color: var(--text-dim);
  padding: 5px 10px; border-radius: 8px; font-size: 12px; cursor: pointer;
  transition: all 0.2s; white-space: nowrap;
}
.xp-compose-btn:hover { background: var(--surface); color: var(--text); }

/* 手動作成モーダル */
.xp-compose-body { padding: 4px 0; }
.xp-compose-type-chips { display: flex; gap: 6px; flex-wrap: wrap; }
.xp-compose-chip {
  background: var(--glass-bg); border: 1px solid var(--border); color: var(--text-dim);
  padding: 6px 14px; border-radius: 20px; font-size: 13px; cursor: pointer; transition: all 0.2s;
}
.xp-compose-chip.active { background: var(--blue); border-color: var(--blue); color: #fff; font-weight: 600; }
.xp-compose-chip:not(.active):hover { background: var(--surface); color: var(--text); }
.xp-compose-textarea { resize: none; min-height: 100px; line-height: 1.6; font-family: inherit; }
.xp-compose-image-area { display: flex; align-items: flex-start; gap: 10px; }
.xp-compose-image-btn {
  background: var(--glass-bg); border: 1px dashed var(--border); color: var(--text-dim);
  padding: 10px 16px; border-radius: 8px; font-size: 13px; cursor: pointer; transition: all 0.2s;
}
.xp-compose-image-btn:hover { border-color: var(--blue); color: var(--blue); }
.xp-compose-image-preview { position: relative; display: inline-block; }
.xp-compose-image-preview img { width: 80px; height: 80px; object-fit: cover; border-radius: 8px; border: 1px solid var(--border); }
.xp-compose-image-remove {
  position: absolute; top: -6px; right: -6px; width: 22px; height: 22px;
  background: var(--red); color: #fff; border: none; border-radius: 50%;
  font-size: 11px; cursor: pointer; display: flex; align-items: center; justify-content: center;
  line-height: 1;
}

/* 生成モーダル */
.xp-gen-body { padding: 4px 0; }
.xp-gen-field { margin-bottom: 14px; }
.xp-gen-field label { display: block; font-size: 13px; color: var(--text-dim); margin-bottom: 6px; font-weight: 500; }
.xp-gen-select, .xp-gen-input {
  width: 100%; background: var(--bg); border: 1px solid var(--border);
  color: var(--text); padding: 10px 12px; border-radius: 8px; font-size: 14px;
  -webkit-appearance: none;
}
.xp-gen-select:focus, .xp-gen-input:focus { border-color: var(--blue); outline: none; }
.xp-gen-actions { margin-top: 16px; text-align: right; }
.xp-gen-status {
  display: flex; align-items: center; gap: 10px; padding: 12px;
  background: rgba(88, 166, 255, 0.08); border-radius: 8px; margin-top: 12px;
  font-size: 13px; color: var(--blue);
}
.xp-gen-spinner {
  width: 18px; height: 18px; border: 2px solid var(--border);
  border-top-color: var(--blue); border-radius: 50%;
  animation: xp-spin 0.8s linear infinite;
}
@keyframes xp-spin { to { transform: rotate(360deg); } }

/* X本家準拠のフラットタイムライン: 600pxカラム + 区切り線 + アバター左インデント */
.xp-list {
  padding: 0 0 calc(var(--safe-bottom) + 20px);
  max-width: 600px;
  margin: 0 auto;
}
@media (min-width: 700px) {
  .xp-list { border-left: 1px solid var(--border); border-right: 1px solid var(--border); }
}

.xp-card {
  display: flex; gap: 12px; align-items: flex-start;
  background: transparent; border: none; border-radius: 0;
  border-bottom: 1px solid var(--border);
  padding: 14px 16px 12px; margin-bottom: 0;
  cursor: pointer;
  transition: background 0.15s ease;
}
.xp-card:active { background: rgba(255, 255, 255, 0.04); }
.xp-main { flex: 1; min-width: 0; }
.xp-card--substack-post { border-left: 3px solid #FF6719; }
.xp-card--substack-project { border-left: 3px solid #e3b341; }
.xp-card--substack-free { border-left: 3px solid #4caf50; }
.xp-card--substack-community { border-left: 3px solid #7C5CFC; }
.xp-ct-indicator { display: inline-flex; align-items: center; gap: 4px; font-size: 11px; font-weight: 600; padding: 2px 8px; border-radius: 6px; }
.xp-ct-indicator--post { background: rgba(255,103,25,0.12); color: #FF6719; }
.xp-ct-indicator--project { background: rgba(227,179,65,0.15); color: #e3b341; }
.xp-ct-indicator--free { background: rgba(76,175,80,0.15); color: #4caf50; }
.xp-ct-indicator--community { background: rgba(124,92,252,0.15); color: #7C5CFC; }
.xp-move-type-row { margin-top: 8px; padding-top: 8px; border-top: 1px solid var(--border); display: flex; justify-content: flex-end; }
.xp-move-type-dropdown { position: relative; }
.xp-move-type-trigger { background: rgba(255,255,255,0.06); border: 1px solid var(--border); color: var(--text-dim); font-size: 12px; font-weight: 600; padding: 6px 14px; border-radius: 8px; cursor: pointer; transition: all 0.15s; }
.xp-move-type-trigger:active { transform: scale(0.96); opacity: 0.8; }
.xp-move-type-menu { position: absolute; bottom: calc(100% + 6px); right: 0; background: var(--surface); border: 1px solid var(--border); border-radius: 10px; padding: 4px; min-width: 140px; box-shadow: 0 8px 24px rgba(0,0,0,0.4); z-index: 50; }
.xp-move-type-menu.hidden { display: none; }
.xp-move-type-option { display: block; width: 100%; background: none; border: none; color: var(--text); font-size: 13px; font-weight: 500; padding: 10px 12px; border-radius: 6px; cursor: pointer; text-align: left; transition: background 0.1s; }
.xp-move-type-option:active { background: rgba(255,255,255,0.08); }
.xp-move-type-option[data-to="substack_post"] { color: #FF6719; }
.xp-move-type-option[data-to="substack_project"] { color: #e3b341; }
.xp-move-type-option[data-to="substack_free_preview"] { color: #4caf50; }
.xp-move-type-option[data-to="substack_community"] { color: #7C5CFC; }

/* アカウント移動ボタン + ボトムシート */
.xp-move-acct-btn { display: inline-flex; align-items: center; gap: 4px; }
.xp-move-acct-panel { max-width: 480px; }
.xp-move-acct-snippet { font-size: 13px; color: var(--text-dim); margin: 4px 0 14px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.xp-move-acct-list { display: flex; flex-direction: column; gap: 6px; padding-bottom: var(--safe-bottom); }
.xp-move-acct-row {
  display: flex; align-items: center; gap: 12px; width: 100%;
  min-height: 52px; padding: 8px 12px;
  background: var(--bg); border: 1px solid var(--border); border-radius: 12px;
  color: var(--text); cursor: pointer; text-align: left; transition: background 0.12s;
}
.xp-move-acct-row:not([disabled]):active { background: rgba(255,255,255,0.06); transform: scale(0.99); }
.xp-move-acct-row.current { opacity: 0.6; cursor: default; }
.xp-move-acct-avatar { width: 34px; height: 34px; flex-shrink: 0; border-radius: 50%; overflow: hidden; }
.xp-move-acct-info { display: flex; flex-direction: column; gap: 2px; flex: 1; min-width: 0; }
.xp-move-acct-name { font-size: 14px; font-weight: 600; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.xp-move-acct-handle { font-size: 12px; color: var(--text-dim); }
.xp-move-acct-dot { width: 10px; height: 10px; border-radius: 50%; flex-shrink: 0; }
.xp-move-acct-badge { font-size: 11px; font-weight: 600; color: var(--text-dim); background: rgba(255,255,255,0.08); padding: 2px 8px; border-radius: 6px; flex-shrink: 0; }

.xp-gift-link {
  display: flex; align-items: center; justify-content: center; gap: 6px;
  margin: 8px 0 4px; padding: 10px 16px;
  background: rgba(76,175,80,0.12); border: 1px solid rgba(76,175,80,0.35);
  border-radius: 10px; color: #4caf50; font-weight: 600; font-size: 14px;
  text-decoration: none; transition: all 0.15s;
  min-height: 44px;
}
.xp-gift-link:active { transform: scale(0.97); background: rgba(76,175,80,0.22); }
.xp-gift-url-section { margin-bottom: 10px; }
.xp-gift-url-label { display: block; font-size: 13px; font-weight: 600; color: #4caf50; margin-bottom: 4px; }
.xp-gift-url-input {
  width: 100%; padding: 10px 12px; border-radius: 8px;
  border: 1px solid rgba(76,175,80,0.4); background: var(--surface); color: var(--text);
  font-size: 14px; box-sizing: border-box;
}
.xp-gift-url-input:focus { outline: none; border-color: #4caf50; box-shadow: 0 0 0 2px rgba(76,175,80,0.2); }

.xp-card-header { display: flex; align-items: center; gap: 8px; margin-bottom: 2px; }
.xp-avatar {
  width: 40px; height: 40px; border-radius: 50%; background: rgba(86, 212, 221, 0.15);
  display: flex; align-items: center; justify-content: center; font-size: 20px; flex-shrink: 0;
  overflow: hidden;
}
.xp-avatar img { width: 100%; height: 100%; object-fit: cover; }
.xp-account { flex: 1; min-width: 0; display: flex; align-items: baseline; gap: 6px; flex-wrap: wrap; }
.xp-name { font-size: 15px; font-weight: 700; color: var(--text); }
.xp-handle { font-size: 14px; color: var(--text-dim); }
.xp-status-badge { font-size: 11px; font-weight: 700; flex-shrink: 0; }

.xp-body {
  font-size: 15px; line-height: 1.5; color: var(--text); white-space: pre-wrap; word-break: break-word;
  display: -webkit-box; -webkit-line-clamp: 6; -webkit-box-orient: vertical; overflow: hidden;
  margin: 2px 0 12px;
}

.xp-image { border-radius: 16px; border: 1px solid var(--border); overflow: hidden; margin-bottom: 12px; cursor: pointer; }
.xp-image img { width: 100%; height: auto; max-height: 520px; object-fit: cover; display: block; pointer-events: none; }

/* 動画付きポストのカード内動画（syndication API経由） */
/* === PC（マウス環境）: X本家風の行ハイライトhover === */
@media (hover: hover) and (pointer: fine) {
  .xp-card:hover { background: rgba(255, 255, 255, 0.03); }
  .xp-sch-card:hover { box-shadow: 0 0 0 2px var(--blue-dim, rgba(88, 166, 255, 0.2)); }
}

/* === 広幅PC(1100px+): 投稿=左・引用元記事プレビュー=右の2カラム行 === */
@media (min-width: 1100px) {
  .xp-list { max-width: 960px; }
  .xp-header { padding: 14px max(16px, calc((100% - 960px) / 2)) 0; }
  .xp-toolbar { padding: 8px max(16px, calc((100% - 960px) / 2)); }
  .xp-subtabs { padding: 10px max(16px, calc((100% - 960px) / 2)) 2px; }
  /* メディアカラム（添付画像/動画→その下に記事サムネ）: 投稿の枠から出して右340pxへ（:has非対応ブラウザは縦積みのまま） */
  .xp-main:has(> .xp-media) { display: grid; grid-template-columns: minmax(0, 1fr) 340px; column-gap: 20px; }
  .xp-main:has(> .xp-media) > * { grid-column: 1; min-width: 0; }
  .xp-main:has(> .xp-media) > .xp-media { grid-column: 2; grid-row: 1 / span 30; align-self: start; margin-top: 2px; }
  /* メディアなしカード: 行幅いっぱいに伸ばさず読みやすい行長を維持 */
  .xp-main:not(:has(> .xp-media)) > * { max-width: 620px; }
  /* 本文の省略を大幅に緩和（6行 → 14行） */
  .xp-body { -webkit-line-clamp: 14; }
  /* 右カラム内の画像は自然なアスペクト比で全表示（340px幅ならクロップ不要） */
  .xp-media .xp-image img { max-height: none; }
}

.xp-video { border-radius: 12px; overflow: hidden; margin-bottom: 10px; background: #000; }
.xp-video:empty { display: none; }
.xp-video video { width: 100%; max-height: 420px; display: block; }

/* X記事プレビューカード（サムネ+タイトル。B記事連動/D記事訴求など） */
.xp-artcard { margin-bottom: 10px; }
.xp-artcard:empty { display: none; }
.xp-artcard-inner {
  display: block; border: 1px solid var(--border, rgba(255,255,255,0.15));
  border-radius: 12px; overflow: hidden; text-decoration: none;
  background: rgba(255,255,255,0.03);
}
.xp-artcard-img { width: 100%; max-height: 170px; object-fit: cover; display: block; }
.xp-artcard-body { padding: 8px 12px 10px; }
.xp-artcard-label { font-size: 11px; color: var(--text-dim, #8b949e); margin-bottom: 3px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.xp-artcard-title { font-size: 13px; font-weight: 600; color: var(--text, #e6edf3); line-height: 1.45; }

/* 画像ライトボックス */
.image-lightbox {
  position: fixed; inset: 0; z-index: 10000;
  background: rgba(0,0,0,0.92);
  display: flex; align-items: center; justify-content: center;
  padding: 20px;
  -webkit-tap-highlight-color: transparent;
}
.image-lightbox.hidden { display: none; }
.image-lightbox img {
  max-width: 100%; max-height: 100%; object-fit: contain;
  border-radius: 8px;
  -webkit-touch-callout: default;
  -webkit-user-select: auto;
}

.xp-meta {
  display: flex; flex-wrap: wrap; gap: 8px; font-size: 12px; color: var(--text-dim);
  margin-bottom: 10px; align-items: center;
}
.xp-charcount { color: var(--blue); font-weight: 600; }
.xp-charcount.xp-char-ok { color: #3fb950; }
.xp-charcount.xp-char-warn { color: #d29922; }
.xp-charcount.xp-char-over { color: #f85149; }
.xp-article { color: var(--purple); }

/* スーパーアプリ内予約 vs X内予約の区別バッジ（2026-07-19新設） */
.xp-x-scheduled, .xp-sch-x-badge {
  background: rgba(63, 185, 80, 0.12); border: 1px solid rgba(63, 185, 80, 0.35);
  color: #3fb950; font-weight: 700; padding: 1px 8px; border-radius: 10px; font-size: 11px;
}
.xp-x-pending {
  background: rgba(210, 153, 34, 0.12); border: 1px solid rgba(210, 153, 34, 0.35);
  color: #d29922; font-weight: 700; padding: 1px 8px; border-radius: 10px; font-size: 11px;
}

/* コンテキスト表示（リプ先/引用元ポスト） */
.xp-context {
  background: rgba(255,255,255,0.04); border-radius: 10px; padding: 10px 12px;
  margin-bottom: 8px; border-left: 3px solid var(--text-dim); position: relative;
}
.xp-context-header { display: flex; align-items: center; gap: 6px; margin-bottom: 4px; font-size: 12px; }
.xp-context-icon { font-size: 14px; }
.xp-context-user { color: var(--blue); font-weight: 600; }
.xp-context-name { color: var(--text-dim); }
.xp-context-date { color: var(--text-dim); }
.xp-context-meta { color: var(--text-dim); font-size: 11px; margin-top: 4px; }
.xp-context-btns { position: absolute; top: 6px; right: 6px; display: flex; gap: 4px; }
.xp-context-open-btn {
  font-size: 11px; font-weight: 600; color: var(--text-dim);
  background: var(--surface-2); padding: 4px 8px; border-radius: 6px;
  text-decoration: none; white-space: nowrap; border: none; cursor: pointer;
  display: inline-flex; align-items: center; gap: 3px;
}
.xp-context-text { color: var(--text-dim); font-size: 13px; line-height: 1.5; }

.xp-actions { display: flex; flex-wrap: wrap; gap: 8px; }
.xp-intent-actions { flex-wrap: wrap; }
.xp-intent-btn { min-width: 100px; text-align: center; }

/* リプ系アクション統合ブロック */
.xp-reply-actions {
  display: flex; flex-direction: column; gap: 8px; margin-top: 4px;
}
.xp-reply-main {
  display: flex; gap: 8px;
}
.xp-reply-btn {
  flex: 1; padding: 10px 12px; border: none; border-radius: 10px;
  font-size: 14px; font-weight: 600; cursor: pointer; text-align: center;
  min-height: 44px; transition: transform 0.15s ease, opacity 0.15s ease;
}
.xp-reply-btn:active { transform: scale(0.95); }
.xp-reply-intent {
  background: var(--surface-2, #21262d); color: #fff; width: 100%;
}
.xp-reply-copy {
  background: var(--surface-2, #21262d); color: var(--text);
}
.xp-reply-posted {
  background: var(--green); color: #fff;
  box-shadow: 0 2px 8px rgba(63, 185, 80, 0.2);
}
.xp-reply-sub, .xp-sub-actions {
  display: flex; align-items: center; justify-content: center; gap: 12px;
  padding: 2px 0;
}
.xp-sub-actions { margin-top: 6px; }

/* 引用RT用アクション */
.xp-quote-actions {
  display: flex; flex-direction: column; gap: 8px; margin-top: 4px;
}
.xp-quote-intent-btn {
  background: #1d9bf0; color: #fff;
  box-shadow: 0 2px 8px rgba(29, 155, 240, 0.25);
}

/* Secondary actions (修正 / 承認待ちに戻す — approved/scheduled cards) */
.xp-secondary-actions {
  display: flex;
  gap: 8px;
  margin-top: 4px;
  padding-top: 10px;
  border-top: 1px solid var(--glass-border);
  width: 100%;
}
.xp-secondary-btn {
  flex: 1;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 5px;
  padding: 10px 14px;
  border-radius: 10px;
  border: 1px solid rgba(255, 255, 255, 0.15);
  background: rgba(255, 255, 255, 0.06);
  color: var(--text);
  font-size: 13px;
  font-weight: 600;
  cursor: pointer;
  transition: all 0.2s var(--spring-gentle);
  -webkit-tap-highlight-color: transparent;
}
.xp-secondary-btn:active {
  transform: scale(0.95);
}
.xp-secondary-btn.xp-copy-btn {
  color: var(--green, #3fb950);
  border-color: rgba(63, 185, 80, 0.3);
  background: rgba(63, 185, 80, 0.08);
}
.xp-secondary-btn.xp-copy-btn:active {
  background: rgba(63, 185, 80, 0.2);
}
.xp-secondary-edit {
  color: var(--blue);
  border-color: rgba(88, 166, 255, 0.3);
  background: rgba(88, 166, 255, 0.08);
}
.xp-secondary-edit:active {
  background: rgba(88, 166, 255, 0.2);
}
.xp-secondary-revert {
  color: var(--orange);
  border-color: rgba(255, 166, 87, 0.3);
  background: rgba(255, 166, 87, 0.08);
}
.xp-secondary-revert:active {
  background: rgba(255, 166, 87, 0.2);
}
.xp-reply-sub-btn {
  background: none; border: none; color: var(--text-dim); font-size: 13px;
  cursor: pointer; padding: 4px 8px; border-radius: 6px;
  transition: color 0.15s ease, background 0.15s ease;
}
.xp-reply-sub-btn:active { background: rgba(255,255,255,0.06); }
.xp-reply-sub-btn[data-action="rejected"]:active { color: var(--red); }
.xp-reply-sub-sep { color: var(--border); font-size: 12px; user-select: none; }

.xp-schedule-row {
  display: flex; gap: 8px; align-items: center; flex: 1;
}
.xp-datetime {
  flex: 1; background: var(--bg); border: 1px solid var(--border); border-radius: 8px;
  color: var(--text); padding: 8px 10px; font-size: 13px; font-family: inherit;
  color-scheme: dark;
}

/* --- 固定予約枠パネル --- */
.xp-sched-block { display: block; }
.xp-sched-block .xp-slot-toggle { width: 100%; }
.xp-slot-panel {
  margin-top: 8px;
  background: var(--bg);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  padding: 10px 12px;
  max-height: 320px;
  overflow-y: auto;
  overflow-x: hidden;
  animation: xpSlotPanelIn 0.24s var(--spring-gentle);
}
@keyframes xpSlotPanelIn {
  from { opacity: 0; transform: translateY(-6px); }
  to { opacity: 1; transform: translateY(0); }
}
.xp-slot-date-row {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 7px 0;
  border-bottom: 1px solid rgba(255, 255, 255, 0.05);
}
.xp-slot-date-row:last-of-type { border-bottom: none; }
.xp-slot-date-label {
  flex: 0 0 84px;
  font-size: 12px;
  font-weight: 600;
  color: var(--text-dim);
  line-height: 1.3;
}
.xp-slot-wd { margin-left: 2px; font-size: 11px; }
.xp-slot-wd--sat { color: var(--blue); }
.xp-slot-wd--sun { color: var(--red); }
.xp-slot-chips {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  flex: 1;
}
.xp-slot-chip {
  position: relative;
  min-height: 40px;
  padding: 0 16px;
  background: var(--surface);
  border: 1px solid var(--border);
  color: var(--text);
  border-radius: 20px;
  font-size: 14px;
  font-weight: 600;
  cursor: pointer;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  transition: transform 0.15s var(--spring-gentle), background 0.15s ease, border-color 0.15s ease;
}
.xp-slot-chip:active { transform: scale(0.9); }
.xp-slot-chip--active {
  background: var(--blue);
  border-color: var(--blue);
  color: #fff;
  box-shadow: 0 0 10px rgba(88, 166, 255, 0.3);
}
.xp-slot-chip--past {
  opacity: 0.45;
  border-style: dashed;
  color: var(--text-dim);
}
.xp-slot-chip--taken { border-color: rgba(63, 185, 80, 0.45); }
.xp-slot-chip--taken::after {
  content: '済';
  position: absolute;
  top: -6px;
  right: -4px;
  background: var(--green);
  color: #06210f;
  font-size: 9px;
  font-weight: 700;
  padding: 1px 4px;
  border-radius: 8px;
  line-height: 1.35;
}
.xp-slot-chip--loading { opacity: 0.45; pointer-events: none; }
.xp-slot-empty {
  padding: 12px 4px;
  font-size: 13px;
  color: var(--text-dim);
  text-align: center;
}
.xp-custom-toggle {
  display: block;
  width: 100%;
  margin-top: 10px;
  padding: 8px;
  background: none;
  border: none;
  border-top: 1px solid rgba(255, 255, 255, 0.06);
  color: var(--text-dim);
  font-size: 12px;
  font-family: inherit;
  cursor: pointer;
  text-align: center;
}
.xp-custom-toggle:active { color: var(--text); }
.xp-custom-wrap {
  display: flex;
  gap: 8px;
  align-items: center;
  margin-top: 8px;
}

/* 修正モーダル */
.xp-editor {
  width: 100%; background: var(--bg); border: 1px solid var(--blue); border-radius: 8px;
  color: var(--text); padding: 12px; font-size: 14px; line-height: 1.6;
  font-family: inherit; resize: vertical; min-height: 150px;
}
.xp-editor-meta {
  display: flex; justify-content: flex-end; padding: 6px 0; font-size: 12px; color: var(--text-dim);
}

/* --- 編集モーダル画像 --- */
.xp-edit-image-wrap {
  margin: 8px 0 12px;
  border-radius: 12px;
  overflow: hidden;
  border: 1px solid var(--glass-border);
}
.xp-edit-image {
  width: 100%;
  display: block;
  max-height: 240px;
  object-fit: cover;
  cursor: pointer;
}

/* --- AI修正セクション --- */
.xp-ai-section {
  margin: 16px 0 8px;
  padding: 14px;
  background: var(--bg);
  border: 1px solid var(--glass-border);
  border-radius: 12px;
}
.xp-ai-section-label {
  font-size: 11px;
  font-weight: 700;
  color: var(--text-dim);
  text-transform: uppercase;
  letter-spacing: 0.5px;
  margin-bottom: 8px;
}
.xp-ai-instruction {
  width: 100%;
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: 8px;
  color: var(--text);
  font-size: 13px;
  font-family: inherit;
  padding: 10px 12px;
  resize: vertical;
  transition: border-color 0.2s;
}
.xp-ai-instruction:focus {
  outline: none;
  border-color: var(--blue);
}
.xp-ai-btn-row {
  display: flex;
  gap: 6px;
  margin-top: 10px;
}
.xp-ai-btn {
  flex: 1;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 4px;
  padding: 10px 4px;
  border-radius: 10px;
  border: 1px solid var(--border);
  background: var(--surface);
  color: var(--text);
  font-size: 13px;
  font-weight: 600;
  font-family: inherit;
  cursor: pointer;
  transition: all 0.2s;
}
.xp-ai-btn:active:not(:disabled) { transform: scale(0.96); }
.xp-ai-btn:disabled {
  opacity: 0.4;
  cursor: not-allowed;
}
.xp-ai-btn-icon { font-size: 15px; }
.xp-ai-btn-text { border-color: var(--blue); color: var(--blue); }
.xp-ai-btn-text:hover:not(:disabled) { background: rgba(88, 166, 255, 0.1); }
.xp-ai-btn-image { border-color: var(--purple, #d2a8ff); color: var(--purple, #d2a8ff); }
.xp-ai-btn-image:hover:not(:disabled) { background: rgba(210, 168, 255, 0.1); }
.xp-ai-btn-both { border-color: var(--orange, #ffa657); color: var(--orange, #ffa657); }
.xp-ai-btn-both:hover:not(:disabled) { background: rgba(255, 166, 87, 0.1); }

/* --- AI進捗バー --- */
.xp-ai-progress {
  margin-top: 10px;
  display: flex;
  align-items: center;
  gap: 10px;
}
.xp-ai-progress.hidden { display: none; }
.xp-ai-progress-bar {
  flex: 1;
  height: 4px;
  background: var(--border);
  border-radius: 2px;
  overflow: hidden;
}
.xp-ai-progress-fill {
  height: 100%;
  width: 0;
  background: linear-gradient(90deg, var(--blue), var(--purple, #d2a8ff));
  border-radius: 2px;
  transition: width 0.6s ease;
}
.xp-ai-progress-label {
  font-size: 11px;
  color: var(--text-dim);
  white-space: nowrap;
  min-width: 100px;
}

/* === 週間カレンダー === */
/* --- スケジュールタブ（3日タイムライン） --- */
.xp-sch-nav {
  display: flex; align-items: center; justify-content: center; gap: 12px;
  padding: 10px 16px; border-bottom: 1px solid var(--glass-border);
}
.xp-sch-nav-btn {
  width: 40px; height: 40px; border-radius: 50%; border: 1px solid var(--border);
  background: var(--surface); color: var(--text); font-size: 20px; font-weight: 600;
  cursor: pointer; display: flex; align-items: center; justify-content: center;
  transition: background 0.15s;
}
.xp-sch-nav-btn:active { background: var(--border); }
.xp-sch-today-btn {
  padding: 6px 16px; border-radius: 20px; border: 1px solid var(--blue);
  background: transparent; color: var(--blue); font-size: 13px; font-weight: 700;
  cursor: pointer; transition: all 0.15s;
}
.xp-sch-today-btn:active { background: var(--blue); color: white; }

.xp-sch-timeline {
  padding: 12px 16px; display: flex; flex-direction: column; gap: 0;
  max-width: 632px; margin: 0 auto;
}

.xp-sch-day {
  padding: 0 0 8px;
}
.xp-sch-day + .xp-sch-day {
  border-top: 1px solid var(--border); padding-top: 8px;
}
.xp-sch-day--past { opacity: 0.5; }

.xp-sch-day-header {
  display: flex; align-items: center; gap: 8px; padding: 8px 0 6px; position: sticky; top: 0;
  background: var(--bg); z-index: 1;
}
.xp-sch-dow {
  font-size: 13px; color: var(--text-dim); font-weight: 700; min-width: 20px;
}
.xp-sch-date {
  font-size: 20px; font-weight: 700; color: var(--text); line-height: 1;
}
.xp-sch-date--today {
  background: var(--blue); color: white; border-radius: 50%;
  width: 32px; height: 32px; display: flex; align-items: center; justify-content: center;
  font-size: 16px;
}
.xp-sch-today-label {
  font-size: 10px; font-weight: 800; color: var(--blue); letter-spacing: 0.5px;
}

.xp-sch-slots {
  padding-left: 4px;
}

.xp-sch-empty {
  color: var(--text-dim); font-size: 13px; padding: 8px 0 4px;
  opacity: 0.5;
}

.xp-sch-card {
  display: flex; gap: 0; margin-bottom: 8px; border-radius: 10px;
  background: var(--surface); border: 1px solid var(--border);
  overflow: hidden; cursor: pointer; transition: transform 0.1s, box-shadow 0.15s;
}
.xp-sch-card:active { transform: scale(0.98); box-shadow: 0 0 0 2px var(--blue-dim, rgba(88,166,255,0.2)); }

/* --- 枠マップ（crossviewスケジュール上部: 列=日付 × 行=アカウントごとの枠時刻） --- */
.xp-slotmap { padding: 12px 16px 0; max-width: 632px; margin: 0 auto; width: 100%; box-sizing: border-box; }
.xp-slotmap-grid { display: grid; gap: 3px; align-items: stretch; }
.xp-slotmap-colhead {
  display: flex; flex-direction: column; align-items: center; gap: 0;
  font-size: 10px; font-weight: 700; color: var(--text-dim); line-height: 1.3;
  padding-bottom: 3px;
}
.xp-slotmap-colhead .xp-slot-wd { font-size: 9px; font-weight: 600; }
.xp-slotmap-colhead--today .xp-slotmap-colhead-d {
  color: var(--blue); background: rgba(88, 166, 255, 0.15); border-radius: 8px; padding: 0 5px;
}
.xp-slotmap-acct {
  grid-column: 1 / -1; display: flex; align-items: center; gap: 6px; min-width: 0;
  margin-top: 10px; padding-bottom: 1px;
}
.xp-slotmap-grid .xp-slotmap-acct:first-of-type { margin-top: 2px; }
.xp-slotmap-dot { width: 8px; height: 8px; border-radius: 50%; flex-shrink: 0; }
.xp-slotmap-name { font-size: 12px; font-weight: 700; color: var(--text); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.xp-slotmap-time {
  font-size: 11px; color: var(--text-dim); text-align: right; padding-right: 7px;
  display: flex; align-items: center; justify-content: flex-end;
  font-variant-numeric: tabular-nums;
}
.xp-slotmap-cell { display: flex; flex-direction: column; gap: 3px; justify-content: flex-start; min-width: 0; }
.xp-slotmap-chip {
  position: relative;
  min-height: 26px; padding: 1px; border-radius: 7px; box-sizing: border-box;
  display: flex; flex-direction: column; align-items: center; justify-content: center;
  font-size: 10.5px; font-weight: 700; font-family: inherit; line-height: 1.15;
  background: transparent; border: 1px solid var(--border); color: var(--text-dim);
  transition: transform 0.1s;
}
.xp-slotmap-chip-time { font-size: 8px; font-weight: 600; opacity: 0.85; line-height: 1; }
/* スーパーアプリ内予約 vs X内予約の区別（枠マップ・2026-07-19新設） */
.xp-slotmap-xmark {
  position: absolute; top: -5px; right: -5px; font-size: 9px; line-height: 1;
  background: #0d1117; border-radius: 50%; width: 13px; height: 13px;
  display: flex; align-items: center; justify-content: center;
}
.xp-slotmap-xmark--ok { filter: drop-shadow(0 0 1px #3fb950); }
.xp-slotmap-xmark--pending { opacity: 0.85; }
button.xp-slotmap-chip { cursor: pointer; }
button.xp-slotmap-chip:active { transform: scale(0.92); }
.xp-slotmap-chip--past { opacity: 0.3; border-style: dashed; }
.xp-slotmap-plus { font-size: 10px; color: var(--text-dim); opacity: 0.4; line-height: 1; }
.xp-slot-assign-ct {
  flex: none; min-width: 34px; padding: 2px 5px; border-radius: 6px; border: 1px solid;
  font-size: 10px; font-weight: 700; text-align: center;
}
.xp-slot-assign-list { max-height: 70vh; overflow-y: auto; }
.xp-slot-assign-card {
  border: 1px solid var(--border); border-radius: 12px; background: var(--surface);
  padding: 12px; margin-bottom: 10px;
}
.xp-slot-assign-head { display: flex; align-items: center; gap: 8px; margin-bottom: 8px; }
.xp-slot-assign-count { font-size: 11px; color: var(--text-dim); }
.xp-slot-assign-body { white-space: pre-wrap; font-size: 13.5px; line-height: 1.65; margin: 4px 0 8px; }
.xp-slot-assign-img { margin: 8px 0; }
.xp-slot-assign-img img { width: 100%; border-radius: 10px; display: block; }
.xp-slot-assign-pick { width: 100%; margin-top: 4px; }

/* --- 引用元記事ピッカー --- */
.xp-quote-section { margin-bottom: 10px; }
.xp-quote-label { font-size: 12px; font-weight: 700; color: var(--text-dim); margin-bottom: 4px; }
.xp-quote-row { display: flex; gap: 6px; align-items: stretch; }
.xp-quote-url-input {
  flex: 1; min-width: 0; background: var(--bg); border: 1px solid var(--border);
  border-radius: 8px; color: var(--text); padding: 8px 10px; font-size: 13px;
}
.xp-article-pick-btn { flex: none; white-space: nowrap; }
.xp-article-pick-list { max-height: 65vh; overflow-y: auto; }
.xp-article-pick-row { display: flex; flex-direction: column; align-items: flex-start; gap: 2px; }
.xp-article-pick-title { font-size: 13px; color: var(--text); text-align: left; line-height: 1.4; }
.xp-article-pick-url { font-size: 10.5px; color: var(--text-dim); word-break: break-all; text-align: left; }
.xp-slotmap-legend {
  display: flex; align-items: center; flex-wrap: wrap; gap: 4px 6px; padding: 8px 0 2px;
  font-size: 10.5px; color: var(--text-dim);
}
.xp-slotmap-legend--types { padding-bottom: 0; }
.xp-slotmap-legend:last-of-type { padding: 4px 0 10px; }
.xp-slotmap-sw { width: 10px; height: 10px; border-radius: 3px; display: inline-block; flex: none; margin-left: 6px; }
.xp-slotmap-legend .xp-slotmap-sw:first-child { margin-left: 0; }
.xp-sch-tl-label {
  max-width: 632px; margin: 0 auto; width: 100%; box-sizing: border-box;
  padding: 6px 16px 0; font-size: 11px; font-weight: 700; color: var(--text-dim);
  border-top: 1px solid var(--glass-border);
}
.xp-sch-card-bar {
  width: 4px; flex-shrink: 0;
}

.xp-sch-card-body {
  padding: 10px 12px; flex: 1; min-width: 0;
}

.xp-sch-card-top {
  display: flex; align-items: center; gap: 6px; margin-bottom: 4px;
}
.xp-sch-card-time {
  font-size: 15px; font-weight: 700; color: var(--text);
  font-variant-numeric: tabular-nums;
}
.xp-sch-card-status {
  font-size: 11px; font-weight: 700; letter-spacing: 0.3px; margin-left: auto;
}
.xp-sch-ct-badge {
  font-size: 10px; font-weight: 700; padding: 1px 6px; border-radius: 4px;
  letter-spacing: 0.3px; flex-shrink: 0;
}
.xp-sch-ct-long { background: rgba(88,166,255,0.15); color: #58a6ff; }
.xp-sch-ct-short { background: rgba(255,166,87,0.15); color: #ffa657; }
.xp-sch-ct-quote { background: rgba(188,140,255,0.15); color: #bc8cff; }
.xp-sch-ct-reply { background: rgba(63,185,80,0.15); color: #3fb950; }
.xp-sch-ct-substack { background: rgba(255,103,25,0.15); color: #FF6719; }
.xp-sch-ct-subproject { background: rgba(227,179,65,0.18); color: #e3b341; }
.xp-sch-ct-substack-free { background: rgba(76,175,80,0.15); color: #4caf50; }
.xp-sch-ct-subcommunity { background: rgba(124,92,252,0.18); color: #7C5CFC; }
/* 横断ビュー: スケジュールカードの投稿元アカウント名バッジ */
.xp-sch-acct {
  font-size: 10px; font-weight: 700; letter-spacing: 0.3px; flex-shrink: 0;
  padding: 1px 6px; border-radius: 4px; background: rgba(230,237,243,0.06);
}

.xp-sch-card-text {
  font-size: 13px; color: var(--text-dim); line-height: 1.5;
  display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden;
}

.xp-sch-day--today .xp-sch-card {
  border-color: rgba(88, 166, 255, 0.25);
}

/* ========== 稼働時間ビュー ========== */
.wh-header {
  position: sticky; top: 0; z-index: 50;
  background: var(--glass-bg); backdrop-filter: var(--glass-blur); -webkit-backdrop-filter: var(--glass-blur);
  padding: 12px 16px; border-bottom: 1px solid var(--glass-border);
}
.wh-header h1 { font-size: 22px; font-weight: 800; }

.wh-content { padding: 12px 16px 100px; }

.wh-month-nav {
  display: flex; align-items: center; justify-content: center; gap: 16px;
  margin-bottom: 16px;
}
.wh-month-btn {
  background: var(--surface); border: 1px solid var(--border); color: var(--text);
  width: 36px; height: 36px; border-radius: 50%; font-size: 14px;
  display: flex; align-items: center; justify-content: center; cursor: pointer;
  transition: background 0.15s;
}
.wh-month-btn:active { background: var(--border); }
.wh-month-label { font-size: 18px; font-weight: 700; color: var(--text); min-width: 120px; text-align: center; }

/* サマリーカード */
.wh-summary-cards {
  display: grid; grid-template-columns: repeat(3, 1fr); gap: 10px;
  margin-bottom: 16px;
}
.wh-card {
  background: var(--surface); border: 1px solid var(--border); border-radius: var(--radius);
  padding: 14px 10px; text-align: center;
}
.wh-card-value { font-size: 28px; font-weight: 800; line-height: 1.1; }
.wh-card-unit { font-size: 14px; font-weight: 600; opacity: 0.6; margin-left: 2px; }
.wh-card-label { font-size: 11px; color: var(--text-dim); margin-top: 4px; }
.wh-card-total .wh-card-value { color: var(--blue); }
.wh-card-days .wh-card-value { color: var(--green); }
.wh-card-avg .wh-card-value { color: var(--orange); }

/* 追加ボタン */
.wh-add-section { margin-bottom: 12px; }
.wh-add-btn {
  width: 100%; padding: 12px; border: 2px dashed var(--border); border-radius: var(--radius);
  background: transparent; color: var(--blue); font-size: 15px; font-weight: 600;
  cursor: pointer; transition: all 0.15s;
}
.wh-add-btn:active { background: rgba(88, 166, 255, 0.08); border-color: var(--blue); }

/* フォーム */
.wh-form-card {
  background: var(--surface); border: 1px solid var(--border); border-radius: var(--radius);
  padding: 16px; margin-bottom: 12px;
}
.wh-form-row { margin-bottom: 12px; }
.wh-form-row label { display: block; font-size: 12px; color: var(--text-dim); margin-bottom: 6px; font-weight: 600; }
.wh-input {
  width: 100%; padding: 10px 12px; background: var(--bg); border: 1px solid var(--border);
  border-radius: 8px; color: var(--text); font-size: 15px; outline: none;
  transition: border-color 0.15s;
}
.wh-input:focus { border-color: var(--blue); }

.wh-hours-input { display: flex; flex-wrap: wrap; gap: 8px; align-items: center; }
.wh-hours-preset {
  padding: 6px 14px; border: 1px solid var(--border); border-radius: 20px;
  background: var(--surface); color: var(--text); font-size: 13px; cursor: pointer;
  transition: all 0.15s;
}
.wh-hours-preset:active, .wh-hours-preset.active {
  background: var(--blue); color: #fff; border-color: var(--blue);
}
.wh-hours-input .wh-input { width: 80px; flex-shrink: 0; }

.wh-form-actions { display: flex; gap: 10px; justify-content: flex-end; margin-top: 4px; }
.wh-cancel-btn {
  padding: 8px 20px; border: 1px solid var(--border); border-radius: 8px;
  background: transparent; color: var(--text-dim); font-size: 14px; cursor: pointer;
}
.wh-save-btn {
  padding: 8px 24px; border: none; border-radius: 8px;
  background: var(--blue); color: #fff; font-size: 14px; font-weight: 600; cursor: pointer;
}
.wh-save-btn:active { opacity: 0.8; }

/* 一覧 */
.wh-row {
  display: flex; align-items: center; gap: 10px;
  padding: 12px 14px; background: var(--surface); border: 1px solid var(--border);
  border-radius: var(--radius); margin-bottom: 8px;
}
.wh-row-date { font-size: 14px; font-weight: 600; color: var(--text); min-width: 70px; }
.wh-row-hours { font-size: 16px; font-weight: 800; color: var(--blue); min-width: 45px; }
.wh-row-note { font-size: 13px; color: var(--text-dim); flex: 1; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.wh-row-actions { display: flex; gap: 6px; flex-shrink: 0; }
.wh-edit-btn, .wh-delete-btn {
  background: none; border: none; font-size: 16px; cursor: pointer; padding: 4px;
  opacity: 0.5; transition: opacity 0.15s;
}
.wh-edit-btn:active, .wh-delete-btn:active { opacity: 1; }

/* 空状態 */
.wh-empty { text-align: center; padding: 40px 0; color: var(--text-dim); }
.wh-empty-icon { font-size: 40px; margin-bottom: 8px; }

/* 編集オーバーレイ */
.wh-edit-overlay {
  position: fixed; top: 0; left: 0; right: 0; bottom: 0;
  background: rgba(0, 0, 0, 0.7); z-index: 1000;
  display: flex; align-items: center; justify-content: center;
  padding: 16px;
}
.wh-edit-panel {
  background: var(--surface); border: 1px solid var(--border); border-radius: var(--radius);
  padding: 20px; width: 100%; max-width: 400px;
}
.wh-edit-header {
  display: flex; justify-content: space-between; align-items: center;
  font-size: 16px; font-weight: 700; margin-bottom: 16px;
}

/* === Jobs View === */
.jobs-header {
  position: sticky; top: 0; z-index: 50;
  background: var(--glass-bg); backdrop-filter: var(--glass-blur); -webkit-backdrop-filter: var(--glass-blur);
  padding: calc(var(--safe-top) + 14px) 16px 0;
}
.jobs-header h1 { font-size: 20px; font-weight: 800; }
.jobs-filters {
  position: sticky; top: 0; z-index: 49;
  background: var(--glass-bg); backdrop-filter: var(--glass-blur); -webkit-backdrop-filter: var(--glass-blur);
  display: flex; gap: 6px; padding: 10px 16px;
  border-bottom: 1px solid var(--glass-border);
  overflow-x: auto; scrollbar-width: none;
}
.jobs-filters::-webkit-scrollbar { display: none; }
.jobs-list { padding: 10px 14px 20px; }
.jobs-empty { color: var(--text-dim); text-align: center; padding: 40px 16px; font-size: 14px; }

.job-card {
  background: var(--surface); border: 1px solid var(--border); border-radius: var(--radius);
  padding: 14px 16px; margin-bottom: 10px;
  transition: border-color 0.2s;
}
.job-card-running { border-left: 3px solid var(--blue); }
.job-card-queued { border-left: 3px solid var(--yellow, #e3b341); }
.job-card-completed { border-left: 3px solid var(--green); }
.job-card-failed { border-left: 3px solid var(--red); }

.job-card-top {
  display: flex; align-items: center; gap: 8px; margin-bottom: 6px;
}
.job-badge {
  display: inline-block; padding: 2px 8px; border-radius: 6px;
  font-size: 11px; font-weight: 700; letter-spacing: 0.3px;
}
.job-badge-running { background: rgba(88, 166, 255, 0.15); color: var(--blue); }
.job-badge-queued { background: rgba(227, 179, 65, 0.15); color: var(--yellow, #e3b341); }
.job-badge-completed { background: rgba(63, 185, 80, 0.15); color: var(--green); }
.job-badge-failed { background: rgba(248, 81, 73, 0.15); color: var(--red); }

.job-id { font-size: 13px; font-weight: 600; color: var(--text-dim); }
.job-time { font-size: 12px; color: var(--text-dim); margin-left: auto; }

.job-card-info {
  display: flex; align-items: center; gap: 4px; flex-wrap: wrap;
  font-size: 13px; color: var(--text); margin-bottom: 4px;
}
.job-account { font-weight: 600; }
.job-sep { color: var(--text-dim); }
.job-type { color: var(--text-dim); }
.job-params { color: var(--text-dim); font-size: 12px; }

.job-elapsed { font-size: 12px; color: var(--blue); margin-top: 4px; }
.job-card-completed .job-elapsed { color: var(--text-dim); }

.job-progress {
  height: 3px; background: var(--border); border-radius: 2px; margin-top: 8px; overflow: hidden;
}
.job-progress-bar {
  height: 100%; width: 40%; background: var(--blue); border-radius: 2px;
  animation: job-pulse 1.5s ease-in-out infinite;
}
@keyframes job-pulse {
  0%, 100% { transform: translateX(-100%); }
  50% { transform: translateX(200%); }
}

.job-error {
  font-size: 12px; color: var(--red); margin-top: 6px;
  background: rgba(248, 81, 73, 0.08); padding: 8px 10px; border-radius: 6px;
  line-height: 1.4; word-break: break-word;
}

.job-card-link { margin-top: 8px; }
.job-link {
  font-size: 12px; color: var(--blue); text-decoration: none; font-weight: 500;
}
.job-link:hover { text-decoration: underline; }

.job-card-clickable { cursor: pointer; }
.job-card-clickable:active { opacity: 0.82; transform: scale(0.985); transition: transform 0.1s, opacity 0.1s; }
.job-tap-hint { font-size: 11px; color: var(--text-dim); margin-top: 6px; opacity: 0.55; }

/* Sidebar badge (実行中ジョブ数) */
.sidebar-badge {
  position: absolute; top: 4px; right: 4px;
  background: var(--blue); color: #fff;
  font-size: 9px; font-weight: 700;
  min-width: 14px; height: 14px; line-height: 14px;
  border-radius: 7px; text-align: center; padding: 0 3px;
}
.sidebar-item { position: relative; }

/* === LinkedIn記事コピー === */
.li-wrap { padding: 16px; max-width: 720px; }
.li-header h1 { font-size: 18px; margin: 0; color: var(--text); }
.li-subtitle { font-size: 12px; color: var(--text-secondary); margin: 4px 0 0; }

/* 記事選択エリア */
.li-select-area { margin: 16px 0; }
.li-select {
  width: 100%; padding: 12px; border-radius: 10px;
  border: 1px solid var(--border); background: var(--card-bg);
  color: var(--text); font-size: 14px; appearance: none;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' fill='%238b949e' viewBox='0 0 16 16'%3E%3Cpath d='M8 11L3 6h10z'/%3E%3C/svg%3E");
  background-repeat: no-repeat; background-position: right 12px center;
}
.li-select:focus { border-color: #0a66c2; outline: none; }
.li-or { text-align: center; font-size: 11px; color: var(--text-secondary); margin: 8px 0; text-transform: uppercase; letter-spacing: 1px; }
.li-input-row { display: flex; gap: 8px; }
.li-input {
  flex: 1; padding: 10px 12px; border-radius: 10px;
  border: 1px solid var(--border); background: var(--card-bg);
  color: var(--text); font-size: 14px;
}
.li-input:focus { border-color: #0a66c2; outline: none; }
.li-fetch-btn {
  padding: 10px 20px; border-radius: 10px; border: none;
  background: #0a66c2; color: #fff; font-weight: 600; font-size: 14px;
  cursor: pointer; white-space: nowrap;
}
.li-fetch-btn:disabled { opacity: 0.5; }

/* ローディング */
.li-loading { display: flex; align-items: center; justify-content: center; gap: 10px; padding: 32px; color: var(--text-secondary); font-size: 14px; }
.li-spinner {
  width: 18px; height: 18px; border: 2px solid var(--border);
  border-top-color: #0a66c2; border-radius: 50%;
  animation: li-spin 0.6s linear infinite;
}
@keyframes li-spin { to { transform: rotate(360deg); } }
.li-error { padding: 12px; background: rgba(248,81,73,0.1); border-radius: 10px; color: #f85149; font-size: 14px; margin: 8px 0; }

/* 3ステップ */
.li-steps { display: flex; flex-direction: column; gap: 12px; }
.li-step {
  background: var(--card-bg); border-radius: 14px;
  border: 1px solid var(--border); padding: 14px;
  transition: border-color 0.3s, box-shadow 0.3s;
}
.li-step-done { border-color: #1a7f37; box-shadow: 0 0 0 1px rgba(26,127,55,0.2); }
.li-step-head { display: flex; align-items: center; gap: 10px; margin-bottom: 10px; }
.li-step-num {
  width: 26px; height: 26px; border-radius: 50%;
  background: #0a66c2; color: #fff; font-size: 13px; font-weight: 700;
  display: flex; align-items: center; justify-content: center; flex-shrink: 0;
}
.li-step-done .li-step-num { background: #1a7f37; }
.li-step-label { font-size: 13px; font-weight: 600; color: var(--text-secondary); flex: 1; }
.li-step-check { color: #1a7f37; font-size: 16px; font-weight: 700; }

/* コンテンツ */
.li-title-text { font-size: 15px; font-weight: 600; color: var(--text); line-height: 1.5; margin-bottom: 10px; }
.li-body-wrapper { position: relative; margin-bottom: 10px; }
.li-body-content {
  font-size: 13px; color: var(--text); line-height: 1.7;
  max-height: 200px; overflow-y: auto; padding-bottom: 8px;
}
.li-body-content h2 { font-size: 15px; border-bottom: 1px solid var(--border); padding-bottom: 4px; margin: 1em 0 0.5em; }
.li-body-content h3 { font-size: 13px; color: var(--text-secondary); margin: 0.8em 0 0.3em; }
.li-body-content p { margin: 0 0 0.6em; }
.li-body-content img { max-width: 100%; border-radius: 6px; }
.li-body-content a { color: #0a66c2; }
.li-body-content strong { color: var(--text); }
.li-body-fade {
  position: absolute; bottom: 0; left: 0; right: 0; height: 40px;
  background: linear-gradient(transparent, var(--card-bg));
  pointer-events: none;
}
.li-share-textarea {
  width: 100%; padding: 10px; border: 1px solid var(--border); border-radius: 8px;
  background: rgba(255,255,255,0.03); color: var(--text); font-size: 13px; line-height: 1.5;
  resize: vertical; font-family: inherit; box-sizing: border-box; margin-bottom: 10px;
}
.li-share-textarea:focus { outline: none; border-color: #0a66c2; }

/* コピーボタン（大きく） */
.li-copy-btn {
  display: block; width: 100%; padding: 12px; border-radius: 10px;
  border: 1px solid #0a66c2; background: rgba(10,102,194,0.08);
  color: #0a66c2; font-size: 14px; font-weight: 600;
  cursor: pointer; transition: all 0.2s; text-align: center;
}
.li-copy-btn:hover { background: rgba(10,102,194,0.18); }
.li-copy-btn:active { transform: scale(0.98); }
.li-copied {
  background: #1a7f37 !important; border-color: #1a7f37 !important;
  color: #fff !important;
}

/* 完了バナー */
.li-done {
  display: flex; align-items: center; justify-content: center; gap: 10px;
  padding: 16px; border-radius: 14px; margin-top: 4px;
  background: rgba(26,127,55,0.12); border: 1px solid rgba(26,127,55,0.3);
  color: #3fb950; font-size: 14px; font-weight: 600;
  animation: li-fade-in 0.3s ease;
}
.li-done-icon { font-size: 20px; }
@keyframes li-fade-in { from { opacity: 0; transform: translateY(8px); } to { opacity: 1; transform: translateY(0); } }
/* サムネイル */
.li-thumbnail-area { background: var(--surface); border: 1px solid var(--border); border-radius: 12px; padding: 14px; }
.li-step-num-thumb { background: #555 !important; font-size: 11px; }
.li-thumbnail-img { max-width: 100%; border-radius: 8px; cursor: grab; display: block; }
.li-thumbnail-img:active { cursor: grabbing; }
.li-thumbnail-hint { font-size: 11px; color: var(--text-secondary); margin: 6px 0 0; text-align: center; }
/* LinkedInリンク */
.li-linkedin-btn { display: block; text-align: center; padding: 13px; background: #0a66c2; color: #fff !important; border-radius: 10px; text-decoration: none; font-size: 14px; font-weight: 600; }
.li-linkedin-btn:hover { background: #004182; }
/* 予約スケジュール一覧 */
.li-schedule { background: rgba(10,102,194,0.06); border: 1px solid rgba(10,102,194,0.2); border-radius: 12px; padding: 12px 14px; margin-bottom: 12px; }
.li-schedule-head { font-size: 12px; font-weight: 700; color: #0a66c2; margin-bottom: 8px; }
.li-schedule-list { display: flex; flex-direction: column; gap: 6px; }
.li-schedule-row { display: flex; align-items: baseline; gap: 10px; font-size: 13px; }
.li-schedule-date { white-space: nowrap; font-weight: 700; color: #0a66c2; min-width: 90px; }
.li-schedule-title { color: var(--text); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
/* 公開URL登録 / 予約 */
.li-publish-area { background: var(--surface); border: 1px solid var(--border); border-radius: 12px; padding: 14px; margin-bottom: 0; }
.li-publish-tabs { display: flex; gap: 6px; margin-bottom: 12px; }
.li-publish-tab { flex: 1; padding: 7px 0; border: 1px solid var(--border); border-radius: 8px; background: transparent; color: var(--text-secondary); font-size: 13px; font-weight: 600; cursor: pointer; }
.li-publish-tab.active { background: rgba(10,102,194,0.12); border-color: #0a66c2; color: #0a66c2; }
.li-panel { }
.li-panel.hidden { display: none; }
.li-publish-label { font-size: 12px; font-weight: 600; color: var(--text-secondary); margin-bottom: 8px; }
.li-publish-btn { white-space: nowrap; background: #1a7f37; color: #fff; border: none; border-radius: 8px; padding: 0 14px; height: 40px; font-size: 13px; font-weight: 600; cursor: pointer; }
.li-publish-btn:disabled { opacity: 0.6; cursor: default; }
.li-publish-btn:hover:not(:disabled) { background: #0d6329; }
.li-reserve-btn { white-space: nowrap; background: #0a66c2; color: #fff; border: none; border-radius: 8px; padding: 0 14px; height: 40px; font-size: 13px; font-weight: 600; cursor: pointer; }
.li-reserve-btn:disabled { opacity: 0.6; cursor: default; }
.li-reserve-btn:hover:not(:disabled) { background: #004182; }
.li-date-input { max-width: 160px; }
.li-publish-result { font-size: 13px; margin-top: 8px; padding: 8px 10px; border-radius: 8px; }
.li-publish-ok { background: rgba(26,127,55,0.12); color: #1a7f37; }
.li-publish-error { background: rgba(248,81,73,0.1); color: #f85149; }

/* === Mini Projects View === */
#view-projects { padding-bottom: calc(var(--safe-bottom) + 60px); overscroll-behavior-y: contain; }

/* Pull-to-refresh indicator */
.mp-pull-indicator {
  position: fixed;
  top: calc(var(--safe-top) + 8px); /* safe area(ノッチ/Dynamic Island)の直下 */
  left: 0; right: 0;
  display: flex;
  justify-content: center;
  z-index: 89;
  pointer-events: none;
  transform: translateY(-56px);
}
.mp-pull-inner {
  display: flex;
  align-items: center;
  gap: 6px;
  background: #21262d;
  border: 1px solid var(--glass-border);
  border-radius: 20px;
  padding: 7px 14px;
  font-size: 12px;
  color: var(--text-dim);
  white-space: nowrap;
  box-shadow: 0 4px 16px rgba(0,0,0,0.5);
}
.mp-pull-indicator.ready .mp-pull-inner {
  color: #58a6ff;
  border-color: rgba(88,166,255,0.3);
}
.mp-pull-icon {
  width: 14px; height: 14px;
  display: flex; align-items: center; justify-content: center;
  transition: transform 0.3s;
}
.mp-pull-indicator.ready .mp-pull-icon { transform: rotate(180deg); }
.mp-pull-indicator.loading .mp-pull-icon { animation: mpPullSpin 0.8s linear infinite; }
@keyframes mpPullSpin { to { transform: rotate(360deg); } }

.mp-header {
  position: sticky;
  top: 0;
  z-index: 100;
  background: var(--glass-bg);
  backdrop-filter: var(--glass-blur);
  -webkit-backdrop-filter: var(--glass-blur);
  padding: calc(var(--safe-top) + 12px) 16px 12px;
  border-bottom: 1px solid var(--glass-border);
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
}
.mp-header h1 { font-size: 20px; font-weight: 800; white-space: nowrap; }

.mp-filter-wrap { display: flex; gap: 6px; overflow-x: auto; scrollbar-width: none; flex-shrink: 0; }
.mp-filter-wrap::-webkit-scrollbar { display: none; }
.mp-filter-chip {
  background: rgba(255,255,255,0.05);
  border: 1px solid var(--border);
  color: var(--text-dim);
  border-radius: 20px;
  padding: 4px 10px;
  font-size: 12px;
  cursor: pointer;
  white-space: nowrap;
  display: flex; align-items: center; gap: 4px;
  transition: all 0.15s;
}
.mp-filter-chip.active {
  background: rgba(88,166,255,0.15);
  border-color: var(--blue);
  color: var(--blue);
}
.mp-filter-count {
  background: rgba(255,255,255,0.1);
  border-radius: 10px;
  padding: 0 5px;
  font-size: 10px;
}

.mp-list { padding: 8px 12px 0; }
.mp-category-label {
  font-size: 11px;
  font-weight: 600;
  color: var(--text-dim);
  text-transform: uppercase;
  letter-spacing: 0.8px;
  padding: 14px 4px 6px;
}

/* カード */
.mp-card {
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  margin-bottom: 8px;
  overflow: hidden;
  transition: border-color 0.15s;
}
.mp-card.expanded { border-color: rgba(88,166,255,0.3); }

.mp-card-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 12px 14px;
  cursor: pointer;
  user-select: none;
  -webkit-tap-highlight-color: transparent;
  gap: 8px;
}
.mp-card-header:active { background: rgba(255,255,255,0.03); }

.mp-card-left { display: flex; align-items: center; gap: 10px; min-width: 0; flex: 1; }

.mp-type-badge {
  font-size: 10px;
  font-weight: 700;
  padding: 2px 6px;
  border-radius: 6px;
  white-space: nowrap;
  flex-shrink: 0;
}
.mp-type-badge.mini { background: rgba(210,168,255,0.15); color: var(--purple); border: 1px solid rgba(210,168,255,0.25); }
.mp-type-badge.sub  { background: rgba(88,166,255,0.12); color: var(--blue); border: 1px solid rgba(88,166,255,0.2); }

.mp-card-info { min-width: 0; flex: 1; }
.mp-card-title { font-size: 14px; font-weight: 600; display: block; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.mp-card-sublabel { font-size: 11px; color: var(--text-dim); opacity: 0.6; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; flex-shrink: 0; }
.mp-card-sublabel-row { display: flex; align-items: center; gap: 8px; margin-top: 3px; min-width: 0; }

.mp-progress-mini { display: flex; align-items: center; gap: 6px; margin-top: 0; flex: 1; min-width: 0; }
.mp-progress-mini-bar { flex: 1; height: 3px; background: var(--border); border-radius: 2px; overflow: hidden; }
.mp-progress-mini-fill { height: 100%; background: var(--green); border-radius: 2px; transition: width 0.4s ease; }
.mp-progress-mini-text { font-size: 10px; color: var(--text-dim); white-space: nowrap; }

.mp-expand-icon {
  color: var(--text-dim);
  flex-shrink: 0;
  transition: transform 0.2s var(--spring-gentle);
  display: flex;
}
.mp-expand-icon.open { transform: rotate(180deg); }

.mp-card-desc-preview {
  font-size: 12px;
  color: var(--text-dim);
  padding: 0 14px 10px;
  line-height: 1.5;
}

/* ヘッダー右エリア（サブPJバッジ + archivedDate） */
.mp-header-right {
  display: flex;
  align-items: center;
  gap: 4px;
  flex-shrink: 0;
  flex-wrap: nowrap;
  max-width: 110px;
}
.mp-sub-badge {
  display: inline-block;
  font-size: 10px;
  font-weight: 700;
  padding: 2px 7px;
  border-radius: 8px;
  white-space: nowrap;
  line-height: 1.4;
  max-width: 100px;
  overflow: hidden;
  text-overflow: ellipsis;
}
.mp-sub-none {
  color: #3a3f46;
  font-size: 13px;
  line-height: 1;
}

/* 展開時のボディ */
.mp-card-body { padding: 0 14px 14px; }
.mp-card-desc {
  font-size: 13px;
  color: var(--text-dim);
  line-height: 1.6;
  padding: 0 0 10px;
  border-bottom: 1px solid var(--border);
  margin-bottom: 12px;
}
.mp-card-meta { margin-bottom: 12px; display: flex; flex-direction: column; gap: 3px; }
.mp-meta-label { font-size: 11px; color: var(--text-dim); opacity: 0.5; }
.mp-meta-dir {
  font-size: 11px;
  color: var(--text-dim);
  font-family: 'SF Mono', Menlo, monospace;
  background: rgba(255,255,255,0.04);
  padding: 4px 8px;
  border-radius: 6px;
  display: inline-block;
  max-width: 100%;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

/* Phase */
.mp-phases { display: flex; flex-direction: column; gap: 8px; }
.mp-phase {
  background: rgba(255,255,255,0.025);
  border: 1px solid rgba(255,255,255,0.06);
  border-radius: 8px;
  padding: 10px 12px;
}
.mp-phase-header {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 8px;
  margin-bottom: 6px;
}
.mp-phase-toggle { cursor: pointer; }
.mp-phase-toggle:active { opacity: 0.7; }
.mp-phase-toggle.collapsed { margin-bottom: 0; }
.mp-phase-header-right { display: flex; align-items: center; gap: 6px; flex-shrink: 0; }
.mp-phase-chevron { color: var(--text-dim); transition: transform 0.2s ease; display: flex; align-items: center; }
.mp-phase-chevron.open { transform: rotate(180deg); }

/* セクション（着手中 / 次に着手 / 未着手） */
.mp-section { margin-bottom: 4px; }
.mp-section-header {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 16px 4px 8px;
}
.mp-section-title {
  font-size: 13px;
  font-weight: 700;
  letter-spacing: 0.3px;
}
.mp-section-count {
  font-size: 11px;
  color: var(--text-dim);
  background: rgba(255,255,255,0.07);
  border-radius: 10px;
  padding: 1px 7px;
  font-weight: 600;
}
.mp-group-list { min-height: 44px; }
.mp-group-archived { opacity: 0.6; }
.mp-group-empty {
  font-size: 12px;
  color: var(--text-dim);
  opacity: 0.4;
  text-align: center;
  padding: 12px;
  border: 1px dashed rgba(255,255,255,0.1);
  border-radius: var(--radius);
  margin-bottom: 8px;
}

/* アーカイブタブ — ドラッグハンドル非表示 */
.mp-archive-list .mp-drag-handle { display: none; }
.mp-archive-list .mp-card-header { cursor: pointer; }

/* アーカイブ日付グループ見出し */
.mp-archive-date-group { margin-bottom: 20px; }
.mp-archive-date-heading {
  display: flex;
  align-items: center;
  justify-content: space-between;
  font-size: 12px;
  font-weight: 700;
  color: #8b949e;
  padding: 4px 4px 8px;
  border-bottom: 1px solid var(--glass-border);
  margin-bottom: 6px;
}
.mp-archive-date-count { color: #6e7681; font-weight: 500; }

/* アーカイブトグルボタン（旧: 未使用） */
.mp-archive-toggle {
  background: rgba(255,255,255,0.05);
  border: 1px solid var(--border);
  color: var(--text-dim);
  border-radius: 20px;
  padding: 4px 10px;
  font-size: 12px;
  cursor: pointer;
  white-space: nowrap;
  display: flex;
  align-items: center;
  gap: 4px;
  transition: all 0.15s;
}
.mp-archive-toggle.active {
  background: rgba(110,118,129,0.15);
  border-color: #6e7681;
  color: #c9d1d9;
}

/* ドラッグハンドル */
.mp-drag-handle {
  color: var(--text-dim);
  opacity: 0.45;
  flex-shrink: 0;
  cursor: grab;
  padding: 4px 8px 4px 0;
  min-width: 36px;
  min-height: 44px;
  display: flex;
  align-items: center;
  user-select: none;
  -webkit-user-select: none;
  -webkit-touch-callout: none;
  touch-action: none;
}
.mp-drag-handle:active { cursor: grabbing; opacity: 0.8; }

/* SortableJS */
.mp-card-ghost {
  opacity: 0.35;
  background: rgba(88,166,255,0.08);
  border: 1px dashed rgba(88,166,255,0.3) !important;
}
.mp-card-dragging {
  opacity: 0.9;
  box-shadow: 0 8px 24px rgba(0,0,0,0.4);
  transform: scale(1.01);
}
.mp-phase-title {
  font-size: 12px;
  font-weight: 600;
  color: var(--text);
  line-height: 1.4;
  flex: 1;
}
.mp-phase-badge {
  font-size: 9px;
  font-weight: 700;
  padding: 2px 6px;
  border-radius: 5px;
  white-space: nowrap;
  flex-shrink: 0;
}
.mp-phase-badge.done     { background: rgba(63,185,80,0.15); color: var(--green); }
.mp-phase-badge.progress { background: rgba(255,166,87,0.15); color: var(--orange); }
.mp-phase-badge.todo     { background: rgba(139,148,158,0.15); color: var(--text-dim); }

.mp-phase-progress { display: flex; align-items: center; gap: 8px; margin-bottom: 8px; }
.mp-progress-bar { flex: 1; height: 4px; background: var(--border); border-radius: 3px; overflow: hidden; }
.mp-progress-fill { height: 100%; border-radius: 3px; transition: width 0.5s ease; }
.mp-progress-fill.done     { background: var(--green); }
.mp-progress-fill.progress { background: var(--orange); }
.mp-progress-fill.todo     { background: var(--text-dim); }
.mp-phase-progress-text { font-size: 10px; color: var(--text-dim); white-space: nowrap; }

.mp-task-list { display: flex; flex-direction: column; gap: 3px; }
.mp-task {
  display: flex;
  align-items: flex-start;
  gap: 7px;
  padding: 3px 0;
  font-size: 12px;
  line-height: 1.4;
}
.mp-task-icon { flex-shrink: 0; font-size: 11px; margin-top: 1px; }
.mp-task.done     .mp-task-icon { color: var(--green); }
.mp-task.progress .mp-task-icon { color: var(--orange); }
.mp-task.todo     .mp-task-icon { color: var(--text-dim); }
.mp-task-text { color: var(--text-dim); }
.mp-task.done .mp-task-text { color: var(--text-dim); text-decoration: line-through; opacity: 0.7; }
.mp-task.progress .mp-task-text { color: var(--text); }

/* フッターリンク */
.mp-card-footer { margin-top: 12px; padding-top: 10px; border-top: 1px solid var(--border); }
.mp-master-link {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  font-size: 12px;
  color: var(--blue);
  text-decoration: none;
  padding: 6px 12px;
  border-radius: 8px;
  border: 1px solid rgba(88,166,255,0.2);
  background: rgba(88,166,255,0.08);
  transition: background 0.15s;
}
.mp-master-link:hover { background: rgba(88,166,255,0.15); }

/* ローディング・空状態 */
.mp-loading, .mp-error, .mp-empty {
  display: flex; flex-direction: column; align-items: center; justify-content: center;
  padding: 60px 20px;
  gap: 12px;
  color: var(--text-dim);
  font-size: 14px;
}
.mp-phases-loading {
  display: flex; align-items: center; gap: 8px;
  font-size: 12px; color: var(--text-dim); padding: 8px 0;
}
.mp-phases-none { font-size: 12px; color: var(--text-dim); padding: 8px 0; }

/* Spinner */
.mp-spinner {
  width: 24px; height: 24px;
  border: 2px solid var(--border);
  border-top-color: var(--blue);
  border-radius: 50%;
  animation: mpSpin 0.7s linear infinite;
}
.mp-spinner-sm {
  width: 12px; height: 12px;
  border: 1.5px solid var(--border);
  border-top-color: var(--blue);
  border-radius: 50%;
  animation: mpSpin 0.7s linear infinite;
  flex-shrink: 0;
}
@keyframes mpSpin { to { transform: rotate(360deg); } }

.mp-count {
  font-size: 13px;
  font-weight: 500;
  color: var(--text-dim);
  margin-left: 4px;
}

/* ===== 財務ダッシュボード (#finance) ===== */
:root {
  --fin-danger: #f85149;
  --fin-warn: #ffa657;
  --fin-ok: #3fb950;
}
#view-finance { overflow-y: auto; padding-bottom: calc(68px + env(safe-area-inset-bottom, 0px)); }
.fin-header { position: sticky; top: 0; background: var(--bg); padding: calc(var(--safe-top) + 12px) 16px 12px; display: flex; align-items: center; justify-content: space-between; border-bottom: 1px solid var(--border); z-index: 10; }
.fin-header h1 { font-size: 1.1rem; font-weight: 600; color: var(--text); }
.fin-body { padding: 12px 12px 16px; }
.fin-loading { text-align: center; color: var(--text-dim); padding: 40px; font-size: 0.9rem; }
.fin-error { text-align: center; color: var(--fin-danger); padding: 40px; font-size: 0.85rem; }
.fin-mock-note { background: rgba(255,166,87,0.08); border: 1px solid rgba(255,166,87,0.2); border-radius: 6px; padding: 8px 12px; font-size: 0.78rem; color: var(--fin-warn); margin-bottom: 10px; }
.fin-note { font-size: 0.78rem; color: var(--text-dim); margin-top: 10px; padding: 8px 12px; background: rgba(88,166,255,0.05); border-radius: 6px; border: 1px solid rgba(88,166,255,0.1); }
.fin-data-asof { font-size: 0.78rem; color: #8b949e; padding: 4px 10px 4px 26px; background: rgba(139,148,158,0.06); border-radius: 4px; border-left: 2px solid rgba(139,148,158,0.3); margin-bottom: 10px; position: relative; }
.fin-data-asof::before { content: '🕐'; position: absolute; left: 6px; top: 3px; font-size: 0.72rem; }

/* ─ データ準備状況タブ ─ */
.fds-header { display: flex; align-items: center; justify-content: space-between; margin-bottom: 14px; }
.fds-header-title { font-size: 0.9rem; font-weight: 600; color: #e6edf3; }
.fds-header-meta { font-size: 0.72rem; color: #6e7681; }
.fds-status-bar { display: flex; gap: 8px; flex-wrap: wrap; margin-bottom: 16px; padding: 10px 12px; background: rgba(139,148,158,0.06); border-radius: 8px; border: 1px solid rgba(139,148,158,0.12); align-items: center; }
.fds-status-chip { font-size: 0.75rem; font-weight: 600; padding: 3px 10px; border-radius: 999px; border: 1px solid; }
.fds-status-chip-stale   { color: #f85149; border-color: rgba(248,81,73,0.35); background: rgba(248,81,73,0.08); }
.fds-status-chip-recent  { color: #ffa657; border-color: rgba(255,166,87,0.35); background: rgba(255,166,87,0.08); }
.fds-status-chip-ok      { color: #3fb950; border-color: rgba(63,185,80,0.35);  background: rgba(63,185,80,0.08); }
.fds-status-label { font-size: 0.78rem; color: #8b949e; flex: 1; text-align: right; }
.fds-todo-section { margin-bottom: 18px; }
.fds-todo-title { font-size: 0.8rem; font-weight: 700; color: #ffa657; margin-bottom: 8px; letter-spacing: 0.3px; }
.fds-todo-item { display: flex; align-items: flex-start; gap: 10px; padding: 9px 12px; background: rgba(255,166,87,0.05); border-radius: 8px; margin-bottom: 6px; border: 1px solid rgba(255,166,87,0.12); }
.fds-todo-num { width: 22px; height: 22px; min-width: 22px; border-radius: 50%; background: rgba(255,166,87,0.18); color: #ffa657; font-size: 0.72rem; font-weight: 700; display: flex; align-items: center; justify-content: center; margin-top: 1px; }
.fds-todo-body { flex: 1; min-width: 0; }
.fds-todo-name { display: block; font-size: 0.84rem; font-weight: 600; color: #e6edf3; margin-bottom: 2px; }
.fds-todo-what { display: block; font-size: 0.77rem; color: #8b949e; line-height: 1.4; }
.fds-todo-behind { font-size: 0.72rem; font-weight: 700; padding: 2px 7px; border-radius: 999px; white-space: nowrap; margin-top: 2px; }
.fds-section-label { font-size: 0.72rem; font-weight: 700; color: #6e7681; text-transform: uppercase; letter-spacing: 0.8px; margin: 16px 0 8px; }
.fds-all-ok { padding: 16px; text-align: center; font-size: 0.88rem; color: #3fb950; background: rgba(63,185,80,0.06); border-radius: 8px; border: 1px solid rgba(63,185,80,0.2); margin-bottom: 16px; }
.fds-card { border-radius: 10px; border: 1px solid; padding: 12px 14px; margin-bottom: 8px; }
.fds-card-top { display: flex; align-items: center; gap: 8px; margin-bottom: 6px; }
.fds-card-icon { font-size: 1.1rem; line-height: 1; }
.fds-card-name { font-size: 0.88rem; font-weight: 600; color: #e6edf3; flex: 1; }
.fds-card-badge { font-size: 0.7rem; font-weight: 700; padding: 2px 9px; border-radius: 999px; border: 1px solid; white-space: nowrap; }
.fds-card-latest { font-size: 0.82rem; color: #c9d1d9; margin-bottom: 4px; }
.fds-card-latest span { font-weight: 600; }
.fds-card-action { font-size: 0.77rem; color: #8b949e; margin-bottom: 6px; line-height: 1.4; }
.fds-card-footer { display: flex; gap: 8px; flex-wrap: wrap; align-items: center; }
.fds-card-schedule { font-size: 0.72rem; color: #6e7681; background: rgba(139,148,158,0.08); padding: 2px 7px; border-radius: 4px; }
.fds-card-affects { font-size: 0.72rem; color: #6e7681; }
.fds-card-affects span { color: #58a6ff; font-weight: 500; }

/* KPIグリッド（2×3） */
.fin-kpi-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; margin-bottom: 12px; }
.fin-kpi { background: var(--surface); border: 1px solid var(--border); border-radius: 10px; padding: 12px 14px; }
.fin-kpi-label { font-size: 0.72rem; color: var(--text-dim); margin-bottom: 4px; }
.fin-kpi-value { font-size: 1.2rem; font-weight: 700; color: var(--text); letter-spacing: -0.5px; }
.fin-kpi-sub { font-size: 0.72rem; color: var(--text-dim); margin-top: 2px; }
.fin-kpi-positive .fin-kpi-value { color: var(--fin-ok); }
.fin-kpi-negative .fin-kpi-value { color: var(--fin-danger); }
.fin-kpi-danger { border-color: rgba(248,81,73,0.35); background: rgba(248,81,73,0.06); }
.fin-kpi-danger .fin-kpi-value { color: var(--fin-danger); }
.fin-kpi-warn { border-color: rgba(255,166,87,0.35); background: rgba(255,166,87,0.06); }
.fin-kpi-warn .fin-kpi-value { color: var(--fin-warn); }
.fin-kpi-ok .fin-kpi-value { color: var(--fin-ok); }

/* Runwayバー */
.fin-runway-bar-wrap { margin-top: 4px; }
.fin-runway-bar { height: 6px; background: var(--border); border-radius: 4px; overflow: hidden; margin-bottom: 4px; }
.fin-runway-bar-fill { height: 100%; border-radius: 4px; transition: width 0.5s; }
.fin-runway-danger { background: var(--fin-danger); }
.fin-runway-warn { background: var(--fin-warn); }
.fin-runway-ok { background: var(--fin-ok); }
.fin-runway-labels { display: flex; justify-content: space-between; font-size: 0.7rem; color: var(--text-dim); }

/* 小KPIカード（横並び） */
.fin-kpi-row { display: flex; gap: 8px; flex-wrap: wrap; margin-bottom: 8px; }
.fin-kpi-sm { flex: 1 1 120px; background: var(--surface); border: 1px solid var(--border); border-radius: 8px; padding: 10px 12px; }
.fin-kpi-sm .fin-kpi-label { font-size: 0.7rem; color: var(--text-dim); margin-bottom: 2px; }
.fin-kpi-sm .fin-kpi-value { font-size: 1rem; font-weight: 700; color: var(--text); }
.fin-kpi-sm .fin-kpi-sub { font-size: 0.68rem; color: var(--text-dim); margin-top: 2px; }
.fin-kpi-sm.fin-kpi-negative .fin-kpi-value { color: var(--fin-danger); }
.fin-kpi-sm.fin-kpi-danger { border-color: rgba(248,81,73,0.35); }
.fin-kpi-sm.fin-kpi-danger .fin-kpi-value { color: var(--fin-danger); }
.fin-kpi-sm.fin-kpi-warn { border-color: rgba(255,166,87,0.35); }
.fin-kpi-sm.fin-kpi-warn .fin-kpi-value { color: var(--fin-warn); }

/* チャート */
.fin-chart-wrap { background: var(--surface); border: 1px solid var(--border); border-radius: 8px; padding: 12px; margin: 8px 0; max-height: 240px; display: flex; align-items: center; justify-content: center; }
.fin-chart-wrap canvas { max-height: 200px; }
.fin-chart-wrap.fin-chart-tall { max-height: 280px; }
.fin-chart-wrap.fin-chart-tall canvas { max-height: 240px; }

/* 売上内訳バー */
.fin-rev-list { display: flex; flex-direction: column; gap: 8px; }
.fin-rev-row { display: grid; grid-template-columns: 110px 1fr 90px; align-items: center; gap: 8px; }
.fin-rev-label { font-size: 0.8rem; color: var(--text-dim); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.fin-rev-bar-wrap { height: 8px; background: var(--border); border-radius: 4px; overflow: hidden; }
.fin-rev-bar { height: 100%; border-radius: 4px; transition: width 0.5s; }
.fin-rev-amount { font-size: 0.82rem; color: var(--text-primary); text-align: right; }

/* テーブル */
.fin-table { width: 100%; border-collapse: collapse; font-size: 0.82rem; margin: 6px 0; }
.fin-table th { background: rgba(255,255,255,0.03); color: var(--text-dim); text-align: left; padding: 7px 10px; border-bottom: 1px solid var(--border); font-weight: 600; font-size: 0.78rem; }
.fin-table td { padding: 7px 10px; border-bottom: 1px solid rgba(255,255,255,0.04); color: var(--text); }
.fin-amount { text-align: right; font-variant-numeric: tabular-nums; font-weight: 600; }
.fin-in { color: var(--fin-ok); }
.fin-out { color: var(--fin-danger); }

/* セクションタイトル */
.fin-section-title { font-size: 0.8rem; font-weight: 600; color: var(--text-dim); text-transform: uppercase; letter-spacing: 0.04em; margin-bottom: 6px; }

/* コストタブ 人別バー */
.fin-person-list { display: flex; flex-direction: column; gap: 8px; }
.fin-person-row { display: flex; align-items: center; gap: 8px; }
.fin-person-name { min-width: 0; flex: 0 0 140px; font-size: 0.82rem; color: var(--text); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; display: flex; align-items: center; gap: 4px; }
.fin-person-bar-wrap { flex: 1; height: 8px; background: rgba(255,255,255,0.06); border-radius: 4px; overflow: hidden; }
.fin-person-bar { height: 100%; background: rgba(88,166,255,0.7); border-radius: 4px; transition: width 0.3s; }
.fin-person-amount { flex: 0 0 100px; text-align: right; font-size: 0.8rem; font-weight: 600; color: var(--text); font-variant-numeric: tabular-nums; white-space: nowrap; }
.fin-pct { font-size: 0.72rem; color: var(--text-dim); font-weight: 400; }
.fin-person-type { font-size: 0.68rem; padding: 1px 4px; border-radius: 3px; white-space: nowrap; }
.fin-type-fixed { background: rgba(88,166,255,0.15); color: #58a6ff; border: 1px solid rgba(88,166,255,0.3); }
.fin-type-variable { background: rgba(255,166,87,0.15); color: #ffa657; border: 1px solid rgba(255,166,87,0.3); }
.fin-kpi-sm-v { font-size: 0.95rem; }

/* コストタブ: セクションサブタイトル */
.fin-section-sub { font-size: 0.72rem; color: var(--text-dim); font-weight: 400; margin-left: 6px; }

/* コストタブ: クレカ固定費 個別サービス */
.fin-saas-list { display: flex; flex-direction: column; gap: 6px; }
.fin-saas-row { display: grid; grid-template-columns: 1fr 80px 80px; align-items: center; gap: 8px; }
.fin-saas-sub { padding-left: 10px; }
.fin-saas-merchant { font-size: 0.8rem; color: var(--text); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.fin-saas-bar-wrap { height: 6px; background: rgba(255,255,255,0.06); border-radius: 3px; overflow: hidden; }
.fin-saas-bar { height: 100%; background: rgba(121,192,255,0.7); border-radius: 3px; transition: width 0.3s; }
.fin-saas-amount { text-align: right; font-size: 0.8rem; font-weight: 600; color: var(--text); font-variant-numeric: tabular-nums; white-space: nowrap; }
.fin-saas-total { text-align: right; font-size: 0.78rem; color: var(--text-dim); margin-top: 6px; padding-right: 2px; }

/* コストタブ: モードトグル */
.fin-cost-toggle { display: flex; gap: 6px; margin-bottom: 4px; }
.fin-cost-mode-btn { flex: 1; padding: 7px 0; border-radius: 6px; font-size: 0.82rem; font-weight: 600; cursor: pointer; border: 1px solid rgba(255,255,255,0.12); background: rgba(255,255,255,0.04); color: var(--text-dim); transition: all 0.15s; }
.fin-cost-mode-btn.active { background: rgba(88,166,255,0.15); border-color: rgba(88,166,255,0.4); color: #58a6ff; }

/* CFベース専用バッジ */
.fin-cf-badge { display: inline-block; font-size: 0.68rem; font-weight: 700; padding: 1px 5px; border-radius: 3px; background: rgba(255,166,87,0.15); color: #ffa657; border: 1px solid rgba(255,166,87,0.3); margin-left: 4px; vertical-align: middle; }
.fin-mom-badge { font-size: 0.68rem; font-weight: 700; margin-left: 4px; vertical-align: middle; }

/* SaaSアコーディオン */
.fin-acc-list { display: flex; flex-direction: column; gap: 4px; }
.fin-acc-group { border: 1px solid rgba(255,255,255,0.07); border-radius: 6px; overflow: hidden; }
.fin-acc-header { display: flex; align-items: center; gap: 8px; padding: 9px 12px; cursor: pointer; background: rgba(255,255,255,0.03); transition: background 0.15s; }
.fin-acc-header:active { background: rgba(255,255,255,0.07); }
.fin-acc-label { flex: 1; font-size: 0.82rem; font-weight: 600; color: var(--text); }
.fin-acc-count { font-size: 0.72rem; color: var(--text-dim); }
.fin-acc-total { font-size: 0.82rem; font-weight: 700; color: var(--text); font-variant-numeric: tabular-nums; margin-left: 4px; }
.fin-acc-chevron { font-size: 0.65rem; color: var(--text-dim); width: 14px; text-align: center; }
.fin-acc-body { padding: 6px 8px 8px; display: flex; flex-direction: column; gap: 6px; background: rgba(0,0,0,0.15); }

/* 凡例 */
.fin-legend { display: flex; flex-wrap: wrap; gap: 10px; margin-top: 10px; font-size: 0.78rem; padding: 4px; }

/* シミュレーター */
.fin-sim-wrap { background: rgba(255,166,87,0.08); border: 1px solid rgba(255,166,87,0.25); border-radius: 8px; padding: 12px; margin: 8px 0; }
.fin-sim-row { display: flex; align-items: center; gap: 10px; }
.fin-sim-label { font-size: 0.82rem; color: var(--text-dim); white-space: nowrap; }
.fin-sim-slider { flex: 1; accent-color: #ffa657; cursor: pointer; }
.fin-sim-val { font-size: 0.9rem; font-weight: 700; color: #ffa657; white-space: nowrap; min-width: 44px; text-align: right; }
.fin-sim-result { margin-top: 8px; font-size: 0.82rem; color: var(--text-dim); }
.fin-sim-result strong { color: var(--text-primary); }

/* Finance: 日別カレンダー */
.fin-cal-wrap { margin: 0 0 8px; }
.fin-cal-grid { display: grid; grid-template-columns: repeat(7, 1fr); gap: 2px; }
.fin-cal-hd { text-align: center; font-size: 0.7rem; color: var(--text-dim); padding: 3px 0; }
.fin-cal-cell { min-height: 44px; border-radius: 5px; padding: 3px 4px; display: flex; flex-direction: column; align-items: flex-start; background: rgba(255,255,255,0.03); }
.fin-cal-blank { background: transparent; }
.fin-cal-day { font-size: 0.72rem; color: var(--text-dim); line-height: 1.2; }
.fin-cal-dot { width: 6px; height: 6px; border-radius: 50%; margin: 2px 0 1px; flex-shrink: 0; }
.fin-cal-dot-in { background: #3fb950; }
.fin-cal-dot-out { background: #f85149; }
.fin-cal-amt { font-size: 0.65rem; color: var(--text-dim); line-height: 1.1; }
.fin-cal-in { background: rgba(63,185,80,0.08); }
.fin-cal-out { background: rgba(248,81,73,0.08); }
.fin-cal-both { background: rgba(88,166,255,0.06); }
.fin-cal-legend { font-size: 0.72rem; color: var(--text-dim); margin-top: 6px; display: flex; align-items: center; gap: 4px; }

/* 更新ボタン */
.fin-refresh-btn { width: 36px; height: 36px; display: flex; align-items: center; justify-content: center; }

/* ===== Brain Dump ===== */
.bd-root { display: block; }
.bd-header { position: sticky; top: 0; z-index: 50; background: var(--glass-bg); backdrop-filter: var(--glass-blur); -webkit-backdrop-filter: var(--glass-blur); display: flex; align-items: center; justify-content: space-between; padding: calc(var(--safe-top) + 10px) 14px 10px; border-bottom: 1px solid var(--border); }
.bd-title { font-size: 1rem; font-weight: 700; color: var(--text-primary); margin: 0; }
.bd-tab-switch { display: flex; gap: 6px; }
.bd-tab-btn { background: rgba(255,255,255,0.06); border: 1px solid var(--border); color: var(--text-dim); border-radius: 16px; padding: 4px 12px; font-size: 0.82rem; cursor: pointer; transition: all 0.15s; }
.bd-tab-btn.active { background: rgba(88,166,255,0.18); border-color: #58a6ff; color: #58a6ff; }

.bd-panel { display: block; }
.bd-panel.hidden { display: none; }

/* 入力パネル */
.bd-title-input { display: block; width: calc(100% - 28px); background: rgba(255,255,255,0.04); border: 1px solid var(--border); border-radius: 8px; color: var(--text-primary); font-size: 0.95rem; padding: 10px 12px; margin: 10px 14px 0; outline: none; font-family: inherit; box-sizing: border-box; }
.bd-title-input::placeholder { color: var(--text-dim); }
.bd-title-input:focus { border-color: #58a6ff; background: rgba(88,166,255,0.04); }
.bd-card-title { font-size: 0.92rem; font-weight: 700; color: var(--text-primary); margin-bottom: 4px; }
.bd-textarea { display: block; width: calc(100% - 28px); min-height: 50vh; resize: none; background: rgba(255,255,255,0.04); border: 1px solid var(--border); border-radius: 8px; color: var(--text-primary); font-size: 1rem; line-height: 1.7; padding: 12px; margin: 10px 14px 0; outline: none; font-family: inherit; box-sizing: border-box; }
.bd-textarea:focus { border-color: #58a6ff; background: rgba(88,166,255,0.04); }
.bd-category-row { display: flex; flex-wrap: wrap; gap: 6px; padding: 8px 14px; }
.bd-cat-chip { background: rgba(255,255,255,0.06); border: 1px solid var(--border); color: var(--text-dim); border-radius: 14px; padding: 4px 10px; font-size: 0.78rem; cursor: pointer; transition: all 0.15s; white-space: nowrap; }
.bd-cat-chip.active { background: rgba(88,166,255,0.18); border-color: #58a6ff; color: #58a6ff; }
.bd-char-count { font-size: 0.78rem; color: var(--text-dim); text-align: right; padding: 0 16px 4px; }
.bd-save-btn { margin: 0 14px 14px; padding: 14px; background: #1f6feb; border: none; border-radius: 8px; color: #fff; font-size: 1rem; font-weight: 700; cursor: pointer; transition: background 0.15s; }
.bd-save-btn:hover { background: #388bfd; }
.bd-save-btn:disabled { background: #21262d; color: var(--text-dim); cursor: not-allowed; }

/* ライブラリパネル */
.bd-search-row { padding: 10px 14px 4px; }
.bd-search { width: 100%; box-sizing: border-box; background: rgba(255,255,255,0.06); border: 1px solid var(--border); border-radius: 8px; color: var(--text-primary); font-size: 0.9rem; padding: 8px 12px; outline: none; }
.bd-search:focus { border-color: #58a6ff; }
.bd-filter-row { display: flex; gap: 6px; overflow-x: auto; padding: 6px 14px; scrollbar-width: none; }
.bd-filter-row::-webkit-scrollbar { display: none; }
.bd-filter-chip { background: rgba(255,255,255,0.06); border: 1px solid var(--border); color: var(--text-dim); border-radius: 14px; padding: 4px 10px; font-size: 0.78rem; cursor: pointer; white-space: nowrap; transition: all 0.15s; }
.bd-filter-chip.active { background: rgba(88,166,255,0.18); border-color: #58a6ff; color: #58a6ff; }
.bd-stats { font-size: 0.78rem; color: var(--text-dim); padding: 2px 16px 6px; }
.bd-list { padding: 0 14px 14px; }
.bd-loading, .bd-empty { color: var(--text-dim); font-size: 0.9rem; text-align: center; padding: 32px 0; }

/* カード */
.bd-card { background: rgba(255,255,255,0.04); border: 1px solid var(--border); border-radius: 8px; padding: 10px 12px; margin-bottom: 8px; }
.bd-card-meta { display: flex; align-items: center; gap: 8px; margin-bottom: 6px; }
.bd-card-cat { font-size: 0.75rem; background: rgba(88,166,255,0.12); color: #79c0ff; border-radius: 10px; padding: 2px 8px; white-space: nowrap; }
.bd-card-date { font-size: 0.75rem; color: var(--text-dim); flex: 1; }
.bd-card-chars { font-size: 0.72rem; color: var(--text-dim); }
.bd-card-summary { font-size: 0.88rem; line-height: 1.6; color: var(--text-primary); background: rgba(88,166,255,0.07); border-left: 3px solid rgba(88,166,255,0.4); border-radius: 0 6px 6px 0; padding: 7px 10px; margin-bottom: 4px; white-space: pre-wrap; word-break: break-all; }
.bd-summary-pending { color: var(--text-dim); font-style: italic; font-size: 0.8rem; background: rgba(139,148,158,0.06); border-left-color: rgba(139,148,158,0.3); }
.bd-card-full { font-size: 0.88rem; line-height: 1.65; color: var(--text-dim); white-space: pre-wrap; word-break: break-all; margin-top: 6px; padding-top: 8px; border-top: 1px solid var(--border); }
.bd-card-actions { display: flex; gap: 10px; margin-top: 8px; justify-content: flex-end; }
.bd-expand-btn, .bd-delete-btn { background: none; border: none; font-size: 0.78rem; cursor: pointer; padding: 2px 6px; border-radius: 4px; }
.bd-expand-btn { color: #58a6ff; }
.bd-expand-btn:hover { background: rgba(88,166,255,0.1); }
.bd-delete-btn { color: #f85149; }
.bd-delete-btn:hover { background: rgba(248,81,73,0.1); }
/* 全文モーダル */
.bd-modal-overlay { position: fixed; inset: 0; background: rgba(0,0,0,0.72); z-index: 1000; display: flex; align-items: flex-start; padding: calc(env(safe-area-inset-top, 0px) + 16px) 16px 16px; box-sizing: border-box; }
.bd-modal { background: var(--surface, #161b22); border: 1px solid var(--border); border-radius: 12px; width: 100%; max-width: 600px; margin: 0 auto; max-height: calc(100vh - env(safe-area-inset-top, 0px) - 32px); display: flex; flex-direction: column; overflow: hidden; }
.bd-modal-header { display: flex; align-items: center; gap: 10px; padding: 14px 16px; border-bottom: 1px solid var(--border); flex-shrink: 0; }
.bd-modal-title { flex: 1; font-size: 0.92rem; font-weight: 700; color: var(--text-primary); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.bd-modal-close { background: none; border: none; color: var(--text-dim); font-size: 1.1rem; cursor: pointer; padding: 6px 10px; border-radius: 6px; flex-shrink: 0; line-height: 1; }
.bd-modal-close:hover { background: rgba(255,255,255,0.08); color: var(--text-primary); }
.bd-modal-body { overflow-y: auto; padding: 16px; font-size: 0.9rem; line-height: 1.75; color: var(--text-primary); white-space: pre-wrap; word-break: break-all; flex: 1; }

/* ===== REALIZE入金予定タブ ===== */
.fin-rs-root { padding-bottom: 24px; }
.fin-rs-meta { font-size: 0.72rem; color: var(--text-dim); margin-bottom: 12px; padding: 4px 10px 4px 26px; background: rgba(139,148,158,0.06); border-radius: 4px; border-left: 2px solid rgba(139,148,158,0.3); position: relative; }
.fin-rs-meta::before { content: '🕐'; position: absolute; left: 6px; top: 3px; font-size: 0.72rem; }

/* KPIカード行 */
.fin-rs-kpi-row { display: grid; grid-template-columns: 1.2fr 1fr 1fr; gap: 8px; margin-bottom: 10px; }
.fin-rs-kpi { background: var(--surface); border: 1px solid var(--border); border-radius: 10px; padding: 12px 14px; }
.fin-rs-kpi-primary { border-color: rgba(88,166,255,0.4); background: rgba(88,166,255,0.06); }
.fin-rs-kpi-label { font-size: 0.7rem; color: var(--text-dim); margin-bottom: 2px; }
.fin-rs-kpi-sub-label { font-size: 0.65rem; color: var(--text-dim); opacity: 0.75; }
.fin-rs-kpi-value { font-size: 1.05rem; font-weight: 700; color: var(--text); letter-spacing: -0.3px; }
.fin-rs-kpi-primary .fin-rs-kpi-value { color: #58a6ff; }
.fin-rs-kpi-count { font-size: 0.68rem; color: var(--text-dim); margin-top: 2px; }

/* サマリー行 */
.fin-rs-summary-row { display: flex; gap: 8px; flex-wrap: wrap; margin-bottom: 16px; }
.fin-rs-summary-item { display: flex; flex-direction: column; gap: 2px; background: var(--surface); border: 1px solid var(--border); border-radius: 8px; padding: 8px 12px; flex: 1 1 120px; }
.fin-rs-summary-completing { border-color: rgba(255,166,87,0.4); background: rgba(255,166,87,0.06); }
.fin-rs-summary-label { font-size: 0.7rem; color: var(--text-dim); }
.fin-rs-summary-value { font-size: 0.95rem; font-weight: 700; color: var(--text); }

/* セクションタイトル */
.fin-rs-section-title { font-size: 0.8rem; font-weight: 600; color: var(--text-dim); letter-spacing: 0.04em; text-transform: uppercase; margin-bottom: 8px; }

/* バーチャート */
.fin-rs-chart { display: flex; align-items: flex-end; gap: 3px; height: 90px; padding: 0 2px; margin-bottom: 4px; overflow-x: auto; scrollbar-width: none; }
.fin-rs-chart::-webkit-scrollbar { display: none; }
.fin-rs-bar-col { display: flex; flex-direction: column; align-items: center; gap: 3px; flex: 0 0 calc((100% - 23 * 3px) / 24); min-width: 0; }
.fin-rs-bar-wrap { flex: 1; width: 100%; display: flex; align-items: flex-end; }
.fin-rs-bar-fill { width: 100%; border-radius: 3px 3px 0 0; min-height: 3px; transition: opacity 0.2s; }
.fin-rs-bar-label { font-size: 0.55rem; color: var(--text-dim); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; max-width: 100%; }
.fin-rs-bar-label-active { color: #58a6ff; font-weight: 700; }

/* 月別アコーディオン */
.fin-rs-month-list { display: flex; flex-direction: column; gap: 4px; }
.fin-rs-month-item { background: var(--surface); border: 1px solid var(--border); border-radius: 8px; overflow: hidden; }
.fin-rs-month-header { width: 100%; display: flex; align-items: center; gap: 6px; padding: 10px 12px; background: none; border: none; cursor: pointer; text-align: left; color: var(--text); -webkit-tap-highlight-color: transparent; }
.fin-rs-month-header:active { background: rgba(255,255,255,0.04); }
.fin-rs-month-label { font-size: 0.85rem; font-weight: 600; flex: 1; }
.fin-rs-month-count { font-size: 0.72rem; color: var(--text-dim); }
.fin-rs-month-total { font-size: 0.9rem; font-weight: 700; color: #58a6ff; margin-left: 4px; }
.fin-rs-chevron { color: var(--text-dim); flex-shrink: 0; transition: transform 0.2s; }
.fin-rs-chevron.open { transform: rotate(180deg); }

/* 完了バッジ */
.fin-rs-badge-completing { background: rgba(255,166,87,0.15); border: 1px solid rgba(255,166,87,0.35); border-radius: 99px; padding: 1px 7px; font-size: 0.68rem; color: #ffa657; font-weight: 600; }

/* 月別エントリ */
.fin-rs-month-body { border-top: 1px solid var(--border); }
.fin-rs-month-body.hidden { display: none; }
.fin-rs-entry-header { display: grid; grid-template-columns: 1fr 60px 52px 64px; gap: 4px; padding: 6px 12px; font-size: 0.68rem; color: var(--text-dim); background: rgba(139,148,158,0.05); border-bottom: 1px solid var(--border); }
.fin-rs-entry { display: grid; grid-template-columns: 1fr 60px 52px 64px; gap: 4px; padding: 7px 12px; border-bottom: 1px solid rgba(255,255,255,0.03); font-size: 0.8rem; align-items: center; }
.fin-rs-entry:last-child { border-bottom: none; }
.fin-rs-entry-completing { background: rgba(255,166,87,0.04); }
.fin-rs-entry-name { color: var(--text); font-weight: 500; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.fin-rs-entry-detail { font-size: 0.72rem; color: var(--text-dim); }
.fin-rs-entry-remain { font-size: 0.72rem; color: var(--text-dim); }
.fin-rs-entry-last { color: #ffa657; font-weight: 600; font-size: 0.72rem; }
.fin-rs-entry-amount { text-align: right; font-weight: 600; color: var(--text); font-size: 0.82rem; }
.fin-rs-empty { padding: 12px; font-size: 0.8rem; color: var(--text-dim); text-align: center; }

/* ===== REALIZE入金管理: リスク表示追加分 ===== */
/* 積み上げバー: リスク部分（赤） */
.fin-rs-bar-risk { background: rgba(248,81,73,0.55) !important; }

/* KPIカード: リスク額表示 */
.fin-rs-kpi-risk { font-size: 0.72rem; color: #f85149; margin: 2px 0 2px; }

/* 滞納者バナー */
.fin-rs-delinquent-banner { background: rgba(248,81,73,0.08); border: 1px solid rgba(248,81,73,0.3); border-radius: 8px; padding: 10px 14px; margin-bottom: 12px; }
.fin-rs-delinquent-title { font-size: 0.82rem; font-weight: 700; color: #f85149; margin-bottom: 4px; }
.fin-rs-delinquent-names { font-size: 0.78rem; color: #e6edf3; margin-bottom: 4px; }
.fin-rs-delinquent-impact { font-size: 0.75rem; color: #8b949e; }

/* サマリー: リスク額 */
.fin-rs-summary-risk .fin-rs-summary-value { color: #f85149; }

/* アコーディオン: 滞納バッジ */
.fin-rs-badge-risk { background: rgba(248,81,73,0.12); border: 1px solid rgba(248,81,73,0.35); border-radius: 99px; padding: 1px 7px; font-size: 0.68rem; color: #f85149; font-weight: 600; }

/* アコーディオン: 月ヘッダー金額（リスク混在時） */
.fin-rs-month-total-mixed { color: #79c0ff; }
.fin-rs-month-risk-line { padding: 5px 12px; font-size: 0.72rem; color: var(--text-dim); border-bottom: 1px solid var(--border); }
.fin-rs-risk-text { color: #f85149; font-weight: 600; }

/* エントリ: リスク行 */
.fin-rs-entry-risk { background: rgba(248,81,73,0.04); }
.fin-rs-entry-risk .fin-rs-entry-name { color: #c9d1d9; }
.fin-rs-amount-risk { color: #f85149 !important; }
.fin-rs-risk-badge { background: rgba(248,81,73,0.12); border: 1px solid rgba(248,81,73,0.3); border-radius: 4px; padding: 1px 5px; font-size: 0.68rem; color: #f85149; white-space: nowrap; }

/* 凡例 */
.fin-rs-legend { display: flex; gap: 14px; margin: 6px 0 2px; font-size: 0.72rem; }
.fin-rs-legend-confirmed { color: #58a6ff; }
.fin-rs-legend-risk { color: #f85149; }

/* 過去月スタイル */
.fin-rs-month-item-past { opacity: 0.65; }
.fin-rs-month-item-past .fin-rs-month-label { color: var(--text-dim); }
.fin-rs-month-item-current { border-color: rgba(88,166,255,0.5) !important; box-shadow: 0 0 0 1px rgba(88,166,255,0.25); }
.fin-rs-current-label { background: rgba(88,166,255,0.15); border: 1px solid rgba(88,166,255,0.4); border-radius: 99px; padding: 1px 7px; font-size: 0.68rem; color: #58a6ff; font-weight: 700; margin-right: 4px; }
.fin-rs-past-label { background: rgba(139,148,158,0.12); border: 1px solid rgba(139,148,158,0.25); border-radius: 99px; padding: 1px 7px; font-size: 0.68rem; color: var(--text-dim); font-weight: 600; margin-right: 4px; }
.fin-rs-past-section { margin-top: 24px; }
.fin-rs-past-toggle { display: flex; align-items: center; gap: 6px; background: none; border: 1px solid var(--border); border-radius: 8px; padding: 8px 14px; color: var(--text-dim); font-size: 0.8rem; cursor: pointer; width: 100%; text-align: left; transition: background 0.15s; }
.fin-rs-past-toggle:active { background: rgba(139,148,158,0.1); }
.fin-rs-past-toggle svg { transition: transform 0.2s; flex-shrink: 0; }
.fin-rs-past-toggle.open svg { transform: rotate(180deg); }
.fin-rs-past-list { margin-top: 8px; }
.fin-rs-past-note { font-size: 0.72rem; color: var(--text-dim); background: rgba(139,148,158,0.06); border-radius: 6px; padding: 7px 12px; margin-bottom: 8px; line-height: 1.5; }
.fin-rs-bar-col-current .fin-rs-bar-label { color: #58a6ff; font-weight: 700; }


/* ==================== 構造化提案カード (proposals) ==================== */
#proposals-section { margin: 0 0 8px; }

.proposal-card {
  background: linear-gradient(135deg, rgba(88,166,255,0.08) 0%, rgba(121,192,255,0.04) 100%);
  border: 1px solid rgba(88,166,255,0.3);
  border-radius: 14px;
  margin: 8px 12px 0;
  overflow: hidden;
}

.proposal-header {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 10px 14px 8px;
  border-bottom: 1px solid rgba(88,166,255,0.15);
}

.proposal-badge {
  font-size: 0.72rem;
  font-weight: 700;
  color: #58a6ff;
  background: rgba(88,166,255,0.12);
  border: 1px solid rgba(88,166,255,0.25);
  border-radius: 99px;
  padding: 2px 8px;
  white-space: nowrap;
}

.proposal-title {
  font-size: 0.9rem;
  font-weight: 600;
  color: var(--text-primary);
  flex: 1;
}

.proposal-date {
  font-size: 0.72rem;
  color: var(--text-dim);
  white-space: nowrap;
}

.proposal-body { padding: 10px 14px 4px; }

/* スロット（日程行） */
.proposal-slots { display: flex; flex-direction: column; gap: 8px; }

.proposal-slot {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 6px 10px;
  background: rgba(0,0,0,0.2);
  border-radius: 8px;
}

.slot-label {
  font-size: 0.78rem;
  color: var(--text-dim);
  min-width: 110px;
  flex-shrink: 0;
}

.slot-inputs { display: flex; align-items: center; gap: 6px; flex: 1; }

.slot-date, .slot-time {
  background: rgba(255,255,255,0.06);
  border: 1px solid rgba(255,255,255,0.12);
  border-radius: 6px;
  color: var(--text-primary);
  font-size: 0.82rem;
  padding: 4px 8px;
  outline: none;
  -webkit-appearance: none;
  appearance: none;
}

.slot-date { flex: 1; min-width: 0; }
.slot-time { width: 72px; flex-shrink: 0; }
.slot-time-fixed { font-size: 0.75rem; color: var(--text-dim); }

.slot-date:focus, .slot-time:focus {
  border-color: rgba(88,166,255,0.5);
}

/* セミナー */
.proposal-seminars {
  margin-top: 10px;
  padding-top: 8px;
  border-top: 1px solid rgba(255,255,255,0.06);
}

.seminars-label {
  font-size: 0.75rem;
  color: var(--text-dim);
  margin-bottom: 5px;
}

.seminars-list { display: flex; flex-wrap: wrap; gap: 5px; }

.seminar-chip {
  font-size: 0.72rem;
  color: #79c0ff;
  background: rgba(121,192,255,0.1);
  border: 1px solid rgba(121,192,255,0.2);
  border-radius: 99px;
  padding: 2px 8px;
}

.seminars-skip { font-size: 0.72rem; color: #f85149; margin-top: 4px; }

/* アクションボタン */
.proposal-actions {
  display: flex;
  gap: 8px;
  padding: 10px 14px 12px;
}

.proposal-reject {
  flex: 0 0 auto;
  padding: 9px 16px;
  background: rgba(248,81,73,0.08);
  border: 1px solid rgba(248,81,73,0.25);
  border-radius: 8px;
  color: #f85149;
  font-size: 0.82rem;
  font-weight: 600;
  cursor: pointer;
}

.proposal-confirm {
  flex: 1;
  padding: 9px 16px;
  background: rgba(63,185,80,0.12);
  border: 1px solid rgba(63,185,80,0.35);
  border-radius: 8px;
  color: #3fb950;
  font-size: 0.84rem;
  font-weight: 700;
  cursor: pointer;
  transition: background 0.15s;
}

.proposal-confirm:active { background: rgba(63,185,80,0.22); }
.proposal-reject:active { background: rgba(248,81,73,0.16); }

.proposal-confirmed {
  padding: 14px;
  text-align: center;
  font-size: 0.85rem;
  color: #3fb950;
}

/* CW元メッセージ表示 */
.modal-original-msg {
  flex-shrink: 0;
  margin: 8px 0 12px;
  padding: 10px 12px;
  background: rgba(139,148,158,0.08);
  border-left: 3px solid rgba(139,148,158,0.4);
  border-radius: 0 6px 6px 0;
}
.modal-original-msg-label {
  font-size: 10px;
  color: #8b949e;
  text-transform: uppercase;
  letter-spacing: 0.05em;
  margin-bottom: 6px;
}
.modal-original-msg-body {
  font-size: 12px;
  color: #adbac7;
  white-space: pre-wrap;
  word-break: break-all;
  max-height: 120px;
  overflow-y: auto;
  line-height: 1.5;
}
.modal-regen-area {
  flex-shrink: 0;
  margin: 8px 0 0;
  padding: 10px 12px;
  background: rgba(121,192,255,0.06);
  border-left: 3px solid rgba(121,192,255,0.4);
  border-radius: 0 6px 6px 0;
  display: flex;
  flex-direction: column;
  gap: 8px;
}
.modal-regen-input {
  width: 100%;
  background: rgba(255,255,255,0.04);
  border: 1px solid rgba(139,148,158,0.3);
  border-radius: 6px;
  color: #e6edf3;
  font-size: 12px;
  padding: 6px 8px;
  resize: vertical;
  font-family: inherit;
  box-sizing: border-box;
}
.modal-regen-input::placeholder { color: #8b949e; }
.action-btn.regen {
  background: rgba(121,192,255,0.15);
  color: #79c0ff;
  border: 1px solid rgba(121,192,255,0.3);
  align-self: flex-end;
  padding: 6px 16px;
  font-size: 13px;
}

/* ===== Vision Board ===== */

/* サイドバーゴールドアクセント */
.sidebar-item[data-id="visionboard"] { color: #c9a84c; }
.sidebar-item[data-id="visionboard"].active { color: #e8c56d; }

/* ヘッダー（safe-area: commonビューなので画面最上部から始まる） */
#view-visionboard {
  display: flex;
  flex-direction: column;
  height: 100dvh;
  background: #0a0a0a;
  color: #e6edf3;
  overflow: hidden;
}

.vb-header {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: calc(env(safe-area-inset-top, 0px) + 10px) 12px 8px;
  background: rgba(10,10,10,0.95);
  backdrop-filter: blur(8px);
  z-index: 10;
  flex-shrink: 0;
}

.vb-filter-bar {
  display: flex;
  gap: 6px;
  overflow-x: auto;
  scrollbar-width: none;
  flex: 1;
}
.vb-filter-bar::-webkit-scrollbar { display: none; }

.vb-chip {
  flex-shrink: 0;
  padding: 5px 12px;
  border-radius: 99px;
  border: 1px solid rgba(201,168,76,0.3);
  background: transparent;
  color: rgba(201,168,76,0.7);
  font-size: 12px;
  cursor: pointer;
  transition: all .2s;
}
.vb-chip.active {
  background: rgba(201,168,76,0.15);
  color: #c9a84c;
  border-color: #c9a84c;
}

.vb-mode-btn {
  flex-shrink: 0;
  width: 36px;
  height: 36px;
  border-radius: 8px;
  border: 1px solid rgba(255,255,255,0.1);
  background: transparent;
  color: rgba(230,237,243,0.6);
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
}
.vb-mode-btn.active {
  background: rgba(201,168,76,0.15);
  color: #c9a84c;
  border-color: rgba(201,168,76,0.4);
}

/* ===== コンテンツエリア ===== */
.vb-content {
  flex: 1;
  overflow: hidden;
}

/* ブラウズモード: フルスクリーンスナップスクロール */
.vb-browse {
  height: 100%;
  overflow-y: scroll;
  scroll-snap-type: y mandatory;
}

.vb-card {
  scroll-snap-align: start;
  height: 100%;
  position: relative;
  display: flex;
  align-items: flex-end;
  overflow: hidden;
}

/* 画像カード: iOS SafariのGPUテクスチャ解放を防ぐためGPUレイヤー固定 */
.vb-card-image {
  will-change: transform;
}
.vb-card-image .vb-img-wrap {
  position: absolute;
  inset: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 16px;
}
.vb-img {
  max-width: 100%;
  max-height: 100%;
  width: auto;
  height: auto;
  object-fit: contain;
  transform-origin: center center;
}
/* Ken Burns: IntersectionObserverでON/OFFされる */
.vb-img.vb-ken-burns {
  animation: kenBurns 20s ease-in-out infinite alternate;
}
@keyframes kenBurns {
  0%   { transform: scale(1.0) translate(0, 0); }
  100% { transform: scale(1.06) translate(-1%, -1%); }
}

.vb-card-overlay {
  position: relative;
  z-index: 2;
  width: 100%;
  padding: 40px 24px calc(env(safe-area-inset-bottom, 0px) + 32px);
  background: linear-gradient(to top, rgba(0,0,0,0.85) 0%, transparent 100%);
}

/* テキストカード */
.vb-card-text {
  flex-direction: column;
  align-items: flex-start;
  justify-content: center;
  padding: 40px 28px calc(env(safe-area-inset-bottom, 0px) + 32px);
  gap: 16px;
}

.vb-cat-tag {
  display: inline-block;
  padding: 3px 10px;
  border-radius: 99px;
  font-size: 11px;
  font-weight: 600;
  letter-spacing: .04em;
  margin-bottom: 8px;
}
.vb-cat-tag-sm {
  font-size: 10px;
  padding: 2px 8px;
}

.vb-card-title {
  color: #ffffff;
  font-weight: 700;
  line-height: 1.3;
  word-break: break-all;
}
.vb-card-body {
  color: rgba(255,255,255,0.85);
  font-size: 15px;
  line-height: 1.6;
}

/* ===== 管理モード ===== */
.vb-manage {
  overflow-y: auto;
  -webkit-overflow-scrolling: touch;
  padding-bottom: calc(env(safe-area-inset-bottom, 0px) + 80px);
}

.vb-manage-list {
  list-style: none;
  padding: 12px 0;
}

.vb-manage-item {
  position: relative;
  overflow: hidden;
  border-bottom: 1px solid rgba(255,255,255,0.06);
}
.vb-manage-item-inner {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 10px 16px;
  min-height: 60px;
  background: var(--surface, #161b22);
  transition: transform 0.2s ease;
  user-select: none;
  -webkit-user-select: none;
}

.vb-manage-thumb {
  width: 56px;
  height: 40px;
  object-fit: cover;
  border-radius: 6px;
  flex-shrink: 0;
}
.vb-manage-thumb-text {
  border-radius: 6px;
  border: 1px solid rgba(255,255,255,0.1);
}

.vb-manage-info {
  flex: 1;
  min-width: 0;
  display: flex;
  flex-direction: column;
  gap: 4px;
}

.vb-manage-title {
  font-size: 13px;
  color: #e6edf3;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

/* ===== スワイプ削除 ===== */
.vb-swipe-action {
  position: absolute;
  right: 0;
  top: 0;
  bottom: 0;
  width: 80px;
  background: #e05252;
  display: flex;
  align-items: center;
  justify-content: center;
  color: #fff;
  cursor: pointer;
  transform: translateX(100%);
  transition: transform 0.2s ease;
}
.vb-manage-item.swiped .vb-manage-item-inner {
  transform: translateX(-80px);
}
.vb-manage-item.swiped .vb-swipe-action {
  transform: translateX(0);
}
.vb-edit-hint {
  flex-shrink: 0;
  width: 20px;
  display: flex;
  align-items: center;
  justify-content: center;
  color: var(--text-dim);
  opacity: 0.4;
}

/* ===== D&D ドラッグハンドル ===== */
.vb-drag-handle {
  flex-shrink: 0;
  width: 36px;
  height: 44px;
  min-height: 44px;
  display: flex;
  align-items: center;
  justify-content: center;
  background: none;
  border: none;
  color: var(--text-dim);
  cursor: grab;
  touch-action: none;
  user-select: none;
  -webkit-user-select: none;
  -webkit-touch-callout: none;
  padding: 0;
}
.vb-drag-handle:active { cursor: grabbing; color: #c9a84c; }
.vb-manage-item.sortable-ghost {
  opacity: 0.4;
  background: rgba(201, 168, 76, 0.08);
  border-radius: 8px;
}
.vb-manage-item.sortable-chosen {
  background: rgba(255, 255, 255, 0.04);
  border-radius: 8px;
}

/* 追加ボタン（管理モード時のみ表示） */
.vb-add-btn-wrap {
  position: fixed;
  bottom: calc(env(safe-area-inset-bottom, 0px) + 16px);
  right: 16px;
  z-index: 20;
}
.vb-add-btn {
  padding: 12px 20px;
  border-radius: 99px;
  background: #c9a84c;
  color: #0a0a0a;
  font-weight: 700;
  font-size: 14px;
  border: none;
  cursor: pointer;
  box-shadow: 0 4px 16px rgba(201,168,76,0.4);
}

/* 空状態 */
.vb-empty {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  height: 60dvh;
  color: rgba(230,237,243,0.5);
  font-size: 15px;
  text-align: center;
}

/* ===== カード追加モーダル ===== */
.vb-modal-overlay {
  position: fixed;
  inset: 0;
  background: rgba(0,0,0,0.7);
  z-index: 200;
  display: flex;
  align-items: flex-end;
  justify-content: center;
}

.vb-modal {
  width: 100%;
  max-width: 480px;
  background: #161b22;
  border-radius: 16px 16px 0 0;
  padding-bottom: calc(env(safe-area-inset-bottom, 0px) + 16px);
  max-height: 90dvh;
  display: flex;
  flex-direction: column;
}

.vb-modal-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 16px 20px 12px;
  border-bottom: 1px solid rgba(255,255,255,0.1);
  flex-shrink: 0;
}
.vb-modal-header h3 {
  font-size: 15px;
  color: #e6edf3;
}

.vb-modal-body {
  padding: 16px 20px;
  overflow-y: auto;
  flex: 1;
}

.vb-field-label {
  display: block;
  font-size: 11px;
  color: rgba(230,237,243,0.5);
  margin-bottom: 6px;
  margin-top: 14px;
}
.vb-field-label:first-child { margin-top: 0; }

.vb-cat-select {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
}
.vb-cat-btn {
  padding: 6px 14px;
  border-radius: 99px;
  border: 1px solid rgba(var(--vb-cat-color, #c9a84c), 0.3);
  border-color: color-mix(in srgb, var(--vb-cat-color, #c9a84c) 40%, transparent);
  background: transparent;
  color: var(--vb-cat-color, #c9a84c);
  font-size: 12px;
  cursor: pointer;
  transition: all .15s;
}
.vb-cat-btn.selected {
  background: color-mix(in srgb, var(--vb-cat-color, #c9a84c) 20%, transparent);
  border-color: var(--vb-cat-color, #c9a84c);
  font-weight: 600;
}

.vb-input {
  width: 100%;
  background: rgba(255,255,255,0.05);
  border: 1px solid rgba(255,255,255,0.1);
  border-radius: 8px;
  padding: 10px 12px;
  color: #e6edf3;
  font-size: 14px;
  font-family: inherit;
}
.vb-textarea { resize: vertical; min-height: 72px; }
.vb-file-input {
  width: 100%;
  color: rgba(230,237,243,0.7);
  font-size: 13px;
}

.vb-color-row {
  display: flex;
  align-items: center;
  gap: 10px;
}
.vb-color-picker {
  width: 44px;
  height: 32px;
  border: 1px solid rgba(255,255,255,0.15);
  border-radius: 6px;
  background: none;
  cursor: pointer;
  padding: 2px;
}

.vb-modal-footer {
  display: flex;
  gap: 10px;
  padding: 12px 20px 0;
  flex-shrink: 0;
}
.vb-modal-footer .action-btn {
  flex: 1;
}

/* ===== 追加モーダル: ファイル選択ラベル ===== */
.vb-file-label {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 14px 16px;
  border: 1.5px dashed rgba(201,168,76,.4);
  border-radius: 10px;
  color: #c9a84c;
  cursor: pointer;
  font-size: 13px;
  transition: background .15s;
  margin-bottom: 2px;
}
.vb-file-label:active { background: rgba(201,168,76,.08); }

/* ===== プレビューグリッド ===== */
.vb-preview-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 5px;
  margin: 8px 0;
}
.vb-preview-thumb-wrap {
  position: relative;
  aspect-ratio: 1;
}
.vb-preview-thumb {
  width: 100%;
  height: 100%;
  object-fit: cover;
  border-radius: 8px;
  display: block;
}
.vb-preview-remove {
  position: absolute;
  top: 3px;
  right: 3px;
  width: 20px;
  height: 20px;
  border-radius: 50%;
  background: rgba(0,0,0,.72);
  color: #fff;
  font-size: 9px;
  border: none;
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  line-height: 1;
}

/* ===== 追加方法モードトグル ===== */
.vb-add-mode-toggle {
  display: flex;
  gap: 8px;
  margin-bottom: 4px;
}
.vb-add-mode-btn {
  flex: 1;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 5px;
  padding: 10px 8px;
  border-radius: 10px;
  background: rgba(255,255,255,.06);
  border: 1.5px solid transparent;
  color: var(--text-dim);
  font-size: 12px;
  cursor: pointer;
  transition: all .15s;
  line-height: 1.3;
}
.vb-add-mode-btn.active {
  border-color: #c9a84c;
  color: #c9a84c;
  background: rgba(201,168,76,.1);
}
.vb-mode-icon { font-size: 20px; }

/* ===== ブラウズモード: 複数画像インジケーター ===== */
.vb-card-top {
  display: flex;
  align-items: center;
  gap: 8px;
}
.vb-multi-hint {
  font-size: 11px;
  color: rgba(255,255,255,.8);
  background: rgba(0,0,0,.55);
  padding: 2px 7px;
  border-radius: 10px;
}
.vb-dots {
  position: absolute;
  bottom: 70px;
  left: 50%;
  transform: translateX(-50%);
  display: flex;
  gap: 5px;
  pointer-events: none;
}
.vb-dot {
  width: 5px;
  height: 5px;
  border-radius: 50%;
  background: rgba(255,255,255,.4);
}
.vb-dot.active {
  background: #fff;
  width: 14px;
  border-radius: 3px;
}
.vb-card-multi { cursor: pointer; }
.vb-card-multi:active { opacity: .9; }

/* ===== 管理モード: 複数画像カウント ===== */
.vb-manage-thumb-wrap {
  position: relative;
  flex-shrink: 0;
  width: 56px;
  height: 56px;
}
.vb-manage-thumb-wrap .vb-manage-thumb {
  width: 56px;
  height: 56px;
}
.vb-manage-count {
  position: absolute;
  bottom: 2px;
  right: 2px;
  background: rgba(0,0,0,.7);
  color: #fff;
  font-size: 10px;
  padding: 1px 4px;
  border-radius: 4px;
  line-height: 1.4;
}
.vb-manage-imgcount {
  font-size: 11px;
  color: var(--text-dim);
  margin-top: 2px;
  display: block;
}

/* ===== 編集モーダル 画像ストリップ ===== */
.vb-img-strip-wrap {
  display: flex;
  align-items: center;
  gap: 8px;
  overflow-x: auto;
  overflow-y: hidden;
  margin-bottom: 16px;
  padding-bottom: 4px;
}
.vb-img-strip {
  display: flex;
  gap: 8px;
  flex-shrink: 0;
}
.vb-img-cell {
  position: relative;
  flex-shrink: 0;
  width: 72px;
  height: 72px;
  border-radius: 8px;
  overflow: hidden;
  background: rgba(255,255,255,0.05);
}
.vb-img-cell img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}
.vb-img-cell-remove {
  position: absolute;
  top: 3px;
  right: 3px;
  width: 20px;
  height: 20px;
  border-radius: 50%;
  background: rgba(0,0,0,0.75);
  color: #fff;
  border: none;
  font-size: 10px;
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  line-height: 1;
  padding: 0;
}
.vb-img-strip-add {
  flex-shrink: 0;
  width: 72px;
  height: 72px;
  border-radius: 8px;
  border: 1.5px dashed rgba(255,255,255,0.2);
  display: flex;
  align-items: center;
  justify-content: center;
  color: var(--text-dim);
  cursor: pointer;
}
.vb-img-strip-add:active { background: rgba(255,255,255,0.05); }

/* ===== フルスクリーンカルーセル ===== */
.vb-carousel-overlay {
  position: fixed;
  inset: 0;
  z-index: 9999;
  background: #000;
  display: flex;
  flex-direction: column;
  touch-action: none;
  will-change: transform;
}
.vb-carousel-close {
  position: absolute;
  top: calc(env(safe-area-inset-top, 0px) + 12px);
  right: 16px;
  z-index: 10;
  width: 40px;
  height: 40px;
  border-radius: 50%;
  background: rgba(0,0,0,.6);
  color: #fff;
  border: none;
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
}
.vb-carousel-counter {
  position: absolute;
  top: calc(env(safe-area-inset-top, 0px) + 18px);
  left: 50%;
  transform: translateX(-50%);
  z-index: 10;
  color: rgba(255,255,255,.8);
  font-size: 13px;
  font-weight: 500;
  background: rgba(0,0,0,.4);
  padding: 3px 10px;
  border-radius: 10px;
}
.vb-carousel-track {
  flex: 1;
  display: flex;
  overflow-x: auto;
  scroll-snap-type: x mandatory;
  scrollbar-width: none;
  touch-action: pan-x;
}
.vb-carousel-track::-webkit-scrollbar { display: none; }
.vb-carousel-slide {
  flex: 0 0 100%;
  scroll-snap-align: start;
  display: flex;
  align-items: center;
  justify-content: center;
  overflow: hidden;
}
.vb-carousel-slide img {
  width: 100%;
  height: 100%;
  object-fit: contain;
  pointer-events: none;
}
.vb-carousel-bottom {
  background: linear-gradient(transparent, rgba(0,0,0,.75));
  padding-bottom: calc(env(safe-area-inset-bottom, 0px) + 16px);
}
.vb-carousel-dots {
  display: flex;
  justify-content: center;
  align-items: center;
  gap: 6px;
  padding: 12px 16px 8px;
}
.vb-carousel-dot {
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: rgba(255,255,255,.3);
  transition: all .2s;
  flex-shrink: 0;
}
.vb-carousel-dot.active {
  background: #fff;
  width: 20px;
  border-radius: 3px;
}
.vb-carousel-info {
  padding: 0 20px 8px;
}
.vb-carousel-title {
  color: #fff;
  font-size: 16px;
  font-weight: 600;
  margin: 6px 0 0;
  line-height: 1.4;
}
.vb-carousel-body {
  color: rgba(255,255,255,.8);
  font-size: 13px;
  margin: 4px 0 0;
  line-height: 1.5;
}

/* ==================== Question Bank (問い銀行) ==================== */
.qb-root { padding: 0 0 40px; }
.qb-header {
  display: flex; justify-content: space-between; align-items: center;
  padding: calc(env(safe-area-inset-top, 8px) + 8px) 16px 10px;
  position: sticky; top: 0; z-index: 10;
  background: var(--bg); border-bottom: 1px solid var(--border);
}
.qb-header-left { display: flex; align-items: center; gap: 8px; }
.qb-title { font-size: 1.15rem; font-weight: 700; color: var(--text); margin: 0; }
.qb-back {
  background: none; border: none; color: var(--accent); font-size: 1.2rem;
  padding: 4px 8px; cursor: pointer;
}
.qb-add-btn {
  background: #238636; color: #fff; border: none; border-radius: 8px;
  padding: 6px 14px; font-size: 0.82rem; font-weight: 600; cursor: pointer;
}
.qb-summary, .qb-filters {
  display: flex; gap: 6px; padding: 10px 16px 4px; flex-wrap: wrap;
}
.qb-chip {
  padding: 5px 12px; border-radius: 14px; font-size: 0.78rem;
  background: var(--surface); color: var(--text-dim); border: 1px solid var(--border);
  cursor: pointer; user-select: none; transition: all 0.15s;
}
.qb-chip--active {
  background: rgba(31,111,235,0.15); color: var(--accent); border-color: var(--accent);
}
.qb-chip--new {
  background: transparent; color: var(--accent); border: 1px dashed var(--accent);
}

/* Theme cards */
.qb-theme-list { padding: 8px 12px; }
.qb-theme-name { font-weight: 600; font-size: 0.95rem; }
.qb-theme-counts { color: var(--text-dim); font-size: 0.75rem; }
.qb-bar {
  height: 4px; background: var(--border); border-radius: 2px; overflow: hidden;
  margin-top: 6px;
}
.qb-bar-fill { height: 100%; border-radius: 2px; transition: width 0.3s; }
.qb-bar-label {
  font-size: 0.7rem; color: var(--text-dim);
}
.qb-empty {
  text-align: center; color: var(--text-dim); font-size: 0.85rem;
  padding: 40px 16px;
}

/* Subtopic accordion */
.qb-subtopic-list { padding: 4px 12px; }
.qb-subtopic {
  border-bottom: 1px solid var(--border);
}
.qb-subtopic:last-of-type { border-bottom: none; }
.qb-sub-header {
  display: flex; align-items: center; padding: 12px 4px;
}
.qb-sub-left { display: flex; align-items: center; gap: 8px; flex: 1; min-width: 0; cursor: pointer; }
.qb-sub-arrow { font-size: 0.7rem; color: var(--text-dim); width: 14px; }
.qb-sub-name { font-weight: 600; font-size: 0.9rem; color: #d2a8ff; }
.qb-sub-right { display: flex; align-items: center; gap: 6px; }
.qb-sub-count { color: var(--text-dim); font-size: 0.75rem; }
.qb-sub-menu {
  background: none; border: none; color: var(--text-dim); font-size: 1rem;
  padding: 2px 6px; cursor: pointer; border-radius: 4px;
}
.qb-sub-menu:active { background: var(--border); }
.qb-add-sub {
  text-align: center; color: var(--accent); font-size: 0.85rem;
  padding: 14px; cursor: pointer;
}

/* Questions */
.qb-questions { padding: 0 0 4px 8px; }
.qb-empty-q {
  color: var(--text-dim); font-size: 0.8rem; padding: 8px 16px; text-align: center;
}
.qb-question {
  display: flex; align-items: flex-start; gap: 10px;
  padding: 10px 8px; cursor: pointer; border-radius: 8px;
  transition: background 0.1s;
}
.qb-question:active { background: var(--surface-hover); }
.qb-q-dot {
  width: 8px; height: 8px; border-radius: 50%; flex-shrink: 0;
  margin-top: 6px;
}
.qb-q-text { flex: 1; font-size: 0.88rem; line-height: 1.45; }
.qb-q-type {
  font-size: 0.65rem; padding: 2px 7px; border-radius: 8px; flex-shrink: 0;
  margin-top: 3px; border: 1px solid; background: transparent; white-space: nowrap;
}

/* Overlay & Modal */
.qb-overlay {
  position: fixed; inset: 0; z-index: 9999;
  display: flex; align-items: flex-end; justify-content: center;
}
.qb-overlay-bg {
  position: absolute; inset: 0; background: rgba(0,0,0,0.5);
}
.qb-modal {
  position: relative; z-index: 1;
  background: var(--surface); border-radius: 16px 16px 0 0;
  padding: 20px 16px calc(env(safe-area-inset-bottom, 16px) + 16px);
  width: 100%; max-width: 500px;
  animation: qbSlideUp 0.2s ease-out;
}
.qb-modal--quickadd { max-height: 85vh; overflow-y: auto; }
@keyframes qbSlideUp {
  from { transform: translateY(100%); }
  to { transform: translateY(0); }
}
.qb-modal-title {
  font-size: 1rem; font-weight: 700; margin: 0 0 14px; color: var(--text);
}
.qb-label {
  display: block; font-size: 0.75rem; color: var(--text-dim);
  margin: 12px 0 4px; text-transform: uppercase; letter-spacing: 0.04em;
}
.qb-input {
  width: 100%; padding: 10px 12px; border-radius: 8px;
  background: var(--bg); border: 1px solid var(--border); color: var(--text);
  font-size: 0.9rem; margin-bottom: 4px; outline: none;
}
.qb-input:focus { border-color: var(--accent); }
.qb-textarea {
  width: 100%; padding: 10px 12px; border-radius: 8px;
  background: var(--bg); border: 1px solid var(--border); color: var(--text);
  font-size: 0.9rem; resize: vertical; outline: none; font-family: inherit;
}
.qb-textarea:focus { border-color: var(--accent); }
.qb-sub-chips, .qb-type-chips {
  display: flex; flex-wrap: wrap; gap: 6px; margin: 4px 0;
}
.qb-modal-actions {
  display: flex; gap: 8px; justify-content: flex-end; margin-top: 16px;
}
.qb-btn {
  padding: 9px 18px; border-radius: 8px; border: none; font-size: 0.85rem;
  font-weight: 600; cursor: pointer;
}
.qb-btn--primary { background: #238636; color: #fff; }
.qb-btn--cancel { background: var(--border); color: var(--text-dim); }
.qb-btn--danger { background: #da3633; color: #fff; }
.qb-quickadd-hint {
  text-align: center; font-size: 0.8rem; margin-top: 8px; min-height: 20px;
}

/* Bottom Sheet */
.qb-sheet {
  position: relative; z-index: 1;
  background: var(--surface); border-radius: 16px 16px 0 0;
  padding: 12px 16px calc(env(safe-area-inset-bottom, 16px) + 16px);
  width: 100%; max-width: 500px;
  animation: qbSlideUp 0.2s ease-out;
}
.qb-sheet-handle {
  width: 36px; height: 4px; background: var(--text-dim); border-radius: 2px;
  margin: 0 auto 16px; opacity: 0.5;
}
.qb-sheet-text {
  font-size: 1.05rem; font-weight: 600; line-height: 1.5;
  margin: 0 0 12px; color: var(--text);
}
.qb-sheet-meta {
  display: flex; align-items: center; gap: 10px; flex-wrap: wrap;
  margin-bottom: 10px;
}
.qb-sheet-dim { font-size: 0.8rem; color: var(--text-dim); }
.qb-sheet-path {
  font-size: 0.78rem; color: var(--text-dim); margin: 0 0 16px;
}
.qb-sheet-actions {
  display: flex; gap: 8px;
}
.qb-sheet-btn {
  flex: 1; padding: 10px; border-radius: 10px;
  background: var(--bg); border: 1px solid var(--border); color: var(--text);
  font-size: 0.85rem; cursor: pointer; text-align: center;
}
.qb-sheet-btn:active { background: var(--surface-hover); }
.qb-sheet-footer {
  text-align: center; padding-top: 14px;
}
.qb-sheet-delete {
  color: #f85149; font-size: 0.82rem; cursor: pointer;
}

/* Header right group */
.qb-header-right { display: flex; align-items: center; gap: 8px; }
.qb-random-btn {
  background: none; border: 1px solid var(--border); border-radius: 8px;
  font-size: 1.1rem; padding: 4px 10px; cursor: pointer;
  transition: background 0.15s;
}
.qb-random-btn:active { background: var(--surface-hover); }

/* Random pick header */
.qb-random-header {
  font-size: 0.85rem; color: var(--accent); font-weight: 600;
  margin-bottom: 8px; letter-spacing: 0.03em;
}
.qb-sheet-btn--primary {
  background: rgba(35,134,54,0.2); border-color: #238636; color: #3fb950;
  font-weight: 600;
}

/* Inline copy button on question cards */
.qb-q-copy {
  background: none; border: none; font-size: 0.85rem; padding: 2px 4px;
  cursor: pointer; flex-shrink: 0; opacity: 0.5; transition: opacity 0.15s;
}
.qb-q-copy:active { opacity: 1; }

/* Status dot as tappable button */
.qb-q-dot {
  cursor: pointer; transition: transform 0.15s;
  min-width: 12px; min-height: 12px; width: 12px; height: 12px;
}
.qb-q-dot:active { transform: scale(1.5); }

/* Toast notification */
.qb-toast {
  position: fixed; bottom: calc(env(safe-area-inset-bottom, 16px) + 24px);
  left: 50%; transform: translateX(-50%) translateY(20px);
  background: var(--surface); color: var(--text); border: 1px solid var(--border);
  padding: 8px 20px; border-radius: 10px; font-size: 0.85rem; font-weight: 500;
  opacity: 0; transition: opacity 0.2s, transform 0.2s;
  pointer-events: none; z-index: 10000; white-space: nowrap;
  box-shadow: 0 4px 16px rgba(0,0,0,0.4);
}
.qb-toast--show {
  opacity: 1; transform: translateX(-50%) translateY(0);
}

/* D&D drag handles */
.qb-drag-handle {
  display: flex; align-items: center; justify-content: center;
  color: var(--text-dim); opacity: 0.4; cursor: grab; flex-shrink: 0;
  touch-action: none; user-select: none; -webkit-user-select: none;
  -webkit-touch-callout: none; min-height: 44px; padding: 0 4px;
}
.qb-drag-handle:active { opacity: 0.8; cursor: grabbing; }
.qb-theme-handle { padding: 0 6px 0 0; }
.qb-sub-handle { padding: 0 6px 0 0; }
.qb-q-handle { padding: 0 4px 0 0; }

/* Theme card layout with drag handle */
.qb-theme-card {
  display: flex; align-items: center; gap: 4px;
  background: var(--surface); border-radius: 12px;
  padding: 10px 10px 10px 4px; margin-bottom: 8px;
  border: 1px solid var(--border); position: relative;
  transition: box-shadow 0.15s;
}
.qb-theme-card.sortable-ghost {
  opacity: 0.4; border-color: var(--accent);
}
.qb-theme-body {
  flex: 1; min-width: 0; cursor: pointer;
}
.qb-theme-top {
  display: flex; justify-content: space-between; align-items: center; gap: 8px;
}
.qb-theme-bottom {
  display: flex; justify-content: space-between; align-items: center;
  margin-top: 4px;
}
.qb-theme-group-tag {
  font-size: 0.7rem; font-weight: 500; letter-spacing: 0.02em;
}
.qb-theme-edit {
  background: none; border: none; color: var(--text-dim);
  font-size: 1.2rem; padding: 4px 6px; cursor: pointer; flex-shrink: 0;
  line-height: 1;
}

/* Today's theme section */
.qb-today-section {
  margin-bottom: 16px;
}
.qb-today-label {
  font-size: 0.78rem; font-weight: 700; color: #d29922;
  margin-bottom: 6px; letter-spacing: 0.03em;
}
.qb-theme-card--today {
  border-color: #d29922; box-shadow: 0 0 0 1px rgba(210,169,34,0.3);
  background: rgba(210,169,34,0.05);
}

/* Group sections */
.qb-group-section {
  margin-bottom: 12px;
}
.qb-group-header {
  display: flex; align-items: center; gap: 8px;
  padding: 4px 0 6px 10px; border-left: 3px solid var(--accent);
  margin-bottom: 4px;
}
.qb-group-dot {
  width: 8px; height: 8px; border-radius: 50%; flex-shrink: 0;
}
.qb-group-name {
  font-size: 0.78rem; font-weight: 600; color: var(--text-dim);
  letter-spacing: 0.03em;
}
.qb-group-count {
  font-size: 0.7rem; color: var(--text-dim); opacity: 0.6;
}
.qb-group-cards {
  min-height: 10px;
}

/* Group chips in add/edit modal */
.qb-group-chips {
  display: flex; flex-wrap: wrap; gap: 6px; margin: 4px 0;
}
.qb-group-chip {
  border: 1px solid var(--border);
}
.qb-group-chip.qb-chip--active {
  background: rgba(88,166,255,0.15);
}

/* Today button in edit modal */
.qb-btn--today {
  background: rgba(210,169,34,0.15); color: #d29922;
  border: 1px solid rgba(210,169,34,0.3);
}

/* Sortable ghost states */
.qb-subtopic.sortable-ghost {
  opacity: 0.4;
}
.qb-question.sortable-ghost {
  opacity: 0.4;
}

/* === Sidebar collapsible group headers === */
.sidebar-group-header {
  width: 44px;
  min-height: 20px;
  margin: 6px auto 2px;
  padding: 2px 0;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 2px;
  cursor: pointer;
  color: var(--text-dim);
  font-size: 9px;
  font-weight: 700;
  letter-spacing: 0.02em;
  border-radius: 6px;
  transition: background 0.15s ease, color 0.15s ease;
  -webkit-tap-highlight-color: transparent;
}
.sidebar-group-header:hover {
  background: rgba(255, 255, 255, 0.05);
  color: var(--text);
}
.sidebar-group-caret {
  font-size: 8px;
  line-height: 1;
  opacity: 0.7;
}
.sidebar-group-label {
  font-size: 9px;
  line-height: 1;
  writing-mode: horizontal-tb;
  max-width: 38px;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.sidebar-group-header.collapsed .sidebar-group-caret { opacity: 1; }

/* === X投稿スタジオ === */
#view-xstudio {
  padding: calc(var(--safe-top) + 12px) 16px calc(var(--safe-bottom) + 80px);
  overflow-y: auto;
  height: 100vh;
}
@media (min-width: 600px) {
  #view-xstudio { padding-left: calc(56px + 24px); padding-right: 24px; }
}
.xs-header {
  margin-bottom: 12px;
}
.xs-header h1 {
  font-size: 20px;
  font-weight: 700;
  margin: 0 0 4px 0;
  color: var(--text);
}
.xs-header-note {
  font-size: 11px;
  color: var(--text-dim);
}
.xs-controls {
  display: flex;
  flex-direction: column;
  gap: 8px;
  margin-bottom: 16px;
  padding: 10px;
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: 10px;
}
.xs-row {
  display: flex;
  align-items: center;
  gap: 8px;
  flex-wrap: wrap;
}
.xs-label {
  font-size: 10px;
  font-weight: 700;
  color: var(--text-dim);
  min-width: 68px;
  text-transform: uppercase;
  letter-spacing: 0.05em;
}
.xs-chips, .xs-tabs {
  display: flex;
  gap: 6px;
  flex-wrap: wrap;
  flex: 1;
}
.xs-chip, .xs-tab {
  padding: 6px 12px;
  border-radius: 999px;
  background: rgba(255, 255, 255, 0.04);
  border: 1px solid var(--border);
  color: var(--text-dim);
  font-size: 12px;
  font-weight: 600;
  cursor: pointer;
  -webkit-tap-highlight-color: transparent;
  transition: background 0.15s, color 0.15s, border-color 0.15s;
}
.xs-chip:hover, .xs-tab:hover {
  background: rgba(255, 255, 255, 0.08);
  color: var(--text);
}
.xs-chip.active, .xs-tab.active {
  background: rgba(88, 166, 255, 0.15);
  border-color: rgba(88, 166, 255, 0.4);
  color: #58a6ff;
}
.xs-chip-status.active {
  background: rgba(210, 169, 34, 0.15);
  border-color: rgba(210, 169, 34, 0.4);
  color: #d29922;
}

.xs-list {
  display: flex;
  flex-direction: column;
  gap: 12px;
}
.xs-loading, .xs-empty {
  padding: 40px 16px;
  text-align: center;
  color: var(--text-dim);
  font-size: 13px;
}
.xs-card {
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: 12px;
  padding: 12px;
  display: flex;
  flex-direction: column;
  gap: 8px;
}
.xs-card-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 8px;
}
.xs-status-badge {
  font-size: 11px;
  font-weight: 700;
  padding: 2px 8px;
  border-radius: 999px;
  background: rgba(255,255,255,0.04);
  border: 1px solid var(--border);
}
.xs-created {
  font-size: 10px;
  color: var(--text-dim);
}
.xs-body {
  width: 100%;
  padding: 10px;
  border: 1px solid var(--border);
  border-radius: 8px;
  background: rgba(0,0,0,0.15);
  color: var(--text);
  font-size: 14px;
  line-height: 1.55;
  resize: vertical;
  font-family: -apple-system, BlinkMacSystemFont, 'Hiragino Sans', sans-serif;
  min-height: 80px;
}
.xs-body:focus {
  outline: none;
  border-color: rgba(88,166,255,0.5);
}
.xs-charcount {
  font-size: 10px;
  color: var(--text-dim);
  text-align: right;
}
.xs-image-wrap {
  border-radius: 8px;
  overflow: hidden;
  background: rgba(0,0,0,0.2);
  max-height: 320px;
  display: flex;
  align-items: center;
  justify-content: center;
}
.xs-image {
  max-width: 100%;
  max-height: 320px;
  height: auto;
  display: block;
}
.xs-meta-link {
  font-size: 11px;
  color: var(--text-dim);
  word-break: break-all;
}
.xs-meta-link a {
  color: #58a6ff;
  text-decoration: none;
}
.xs-meta-link a:hover { text-decoration: underline; }

.xs-actions {
  display: flex;
  gap: 6px;
  flex-wrap: wrap;
}
.xs-btn {
  padding: 6px 12px;
  border-radius: 8px;
  background: rgba(255,255,255,0.06);
  border: 1px solid var(--border);
  color: var(--text);
  font-size: 12px;
  font-weight: 600;
  cursor: pointer;
  -webkit-tap-highlight-color: transparent;
  transition: background 0.15s, transform 0.05s;
}
.xs-btn:hover {
  background: rgba(255,255,255,0.1);
}
.xs-btn:active { transform: scale(0.97); }
.xs-btn-primary {
  background: rgba(88,166,255,0.15);
  border-color: rgba(88,166,255,0.35);
  color: #58a6ff;
}
.xs-btn-success {
  background: rgba(63,185,80,0.15);
  border-color: rgba(63,185,80,0.35);
  color: #3fb950;
}
.xs-btn-x {
  background: rgba(29,155,240,0.15);
  border-color: rgba(29,155,240,0.4);
  color: #1d9bf0;
  font-weight: 700;
}
.xs-schedule-row {
  display: flex;
  align-items: center;
  gap: 6px;
  flex-wrap: wrap;
  padding-top: 6px;
  border-top: 1px dashed var(--border);
}
.xs-schedule-label {
  font-size: 11px;
  color: var(--text-dim);
  min-width: 60px;
}
.xs-schedule-input {
  flex: 1;
  min-width: 160px;
  padding: 6px 8px;
  border-radius: 6px;
  border: 1px solid var(--border);
  background: rgba(0,0,0,0.15);
  color: var(--text);
  font-size: 12px;
  font-family: inherit;
  color-scheme: dark;
}