@import url('https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600&family=Outfit:wght@400;700;800&display=swap');

html, body {
  overscroll-behavior: none;
}

/* --- 1. 基本レイアウト設定 --- */
* {
  box-sizing: border-box;
  -webkit-tap-highlight-color: transparent;
}

:root {
  /* 💡 【基本テーマカラーの動的受け皿】 */
  /* JavaScriptから変更される値。未設定時のフォールバックとして上品なアッシュブルーをセット */
  --theme-color: #4a5e78; 
  --theme-rgb: 74, 94, 120; /* 選択されたテーマカラーのRGB値（初期フォールバック値はアッシュブルー） */
  --theme-text-color: #ffffff; /* コントラストに応じた文字色（白 or 墨色） */

  /* 固定値を引き算し、選択されたテーマカラー of 「血統」から空気感（背景やライト色）を自動生成します */
  --accent-blue: var(--theme-color);
  --accent-blue-light: rgba(var(--theme-rgb), 0.05); /* 選択色をうっすら透かした極上のライト色 */
  --accent-blue-text: var(--theme-text-color);
  --accent-blue-border: transparent;
  --accent-blue-header: var(--theme-color);

  /* 💡 プライマリーボタン（追加・決定・完了ボタン）の動的テーマ変数受け皿 */
  --primary-btn-bg: var(--theme-color);
  --primary-btn-text: var(--theme-text-color);
  --primary-btn-border: 1px solid rgba(15, 23, 42, 0.15);
  --primary-btn-shadow: 0 2px 6px rgba(15, 23, 42, 0.12), 0 1px 2px rgba(0, 0, 0, 0.05);
  --primary-btn-hover-shadow: 0 4px 12px rgba(var(--theme-rgb), 0.25), 0 2px 4px rgba(0, 0, 0, 0.1);
  --primary-btn-active-shadow: 0 2px 4px rgba(0, 0, 0, 0.08);
  
  /* =================================================================
     🎨 NidoColors - Drop Candy Palette (ver.2026)
     ================================================================= */
  
  /* 🧱 ベース（背景・テクスチャ） */
  --bg-main: #faf9f8;          /* ミルクをたっぷり混ぜたミルクホワイト */
  --bg-card: #ffffff;          /* カードはパキッとした白で浮かび上がらせる */
  --text-main: #2e3538;        /* 漆黒を廃止。墨のような深いチャコールグレーで目に優しく */
  --text-muted: #657578;       /* 登録日付や補足情報用（WCAG AA 4.5:1クリアの洗練されたセージグレー） */

  /* 🎯 4象限マトリクス：いちご・あんず・ライムミント・グレープグミ */
  
  /* Q1: 緊急 ＋ 重要 */
  --q1-accent: #ff758f;        /* いちごキャンディシロップ */
  --q1-bg: #fff0f3;            /* 優しいペールピンク */
  --q1-border: #ffccd5;

  /* Q2: 重要 ＋ 急がない */
  --q2-accent: #ffb703;        /* 完熟あんずアプリコット */
  --q2-bg: #fff8e7;            /* 柔らかなバタークリーム */
  --q2-border: #ffe3a8;

  /* Q3: 緊急 ＋ 重要じゃない */
  --q3-accent: #2ec4b6;        /* 爽快なライムミントソーダ */
  --q3-bg: #ebfbf9;            /* 清潔感のあるミントブルー */
  --q3-border: #c2f1ec;

  /* Q4: 急がない ＋ 重要じゃない */
  --q4-accent: #7209b7;        /* 魔法のようなグレープグミパープル */
  --q4-bg: #f8f0fc;            /* 軽やかなライラックパープル */
  --q4-border: #ead0f6;

  /* ⚡ UIパーツ（できた！ボタン） */
  --action-btn-bg: #ff4d6d;    /* 元気いっぱいのチェリーピンク */
  --action-btn-text: #ffffff;
  
  /* ⏳ フォーカスタイマー */
  --timer-bg: #f0efeb;         /* マシュマロのようなふんわりホワイト */
  --timer-text: #353535;       /* 優しいアッシュブラックで視認性を確保 */

  /* 🧊 旧変数との統合 */
  --bg-color: var(--bg-main); 
  --card-bg: var(--bg-card);
  --text-light: #94a3b8;

  /* 状態色（シグナルとしての役割を明確にするため、少し鮮やかで知的なトーンへ微調整） */
  --success: #10b981; /* 澄んだエメラルド */
  --warning: #f59e0b; /* プレミアムアンバー */
  --danger: #f43f5e;  /* 洗練されたローズレッド */

  /* 形状と影（引き算を行い、よりフラットで現代的なNotion風の空気感へ） */
  --border-radius: 14px; /* 16pxから少し引き締めて知的な角丸へ */
  --modal-radius: 24px; /* 🌟 一般ポップアップ・個人設定モーダルの基本角丸 */
  --modal-radius-large: 28px; /* ℹ️ Nido紹介・操作ガイドなど愛らしい大ポップアップ用 */
  --modal-radius-small: 20px; /* 👥 メンバー管理などスッキリコンパクトな小ポップアップ用 */
  --arcade-icon-radius: 8px; /* 🕹️ アーケードゲームのアイコン専用の角丸半径 */
  --shadow-sm: 0 1px 2px 0 rgba(15, 23, 42, 0.04);
  --shadow: 0 4px 12px -1px rgba(15, 23, 42, 0.03), 0 2px 6px -1px rgba(15, 23, 42, 0.02);
  --shadow-lg: 0 16px 24px -4px rgba(15, 23, 42, 0.06), 0 6px 12px -2px rgba(15, 23, 42, 0.03);

  /* アニメーション（心地よいタクタイル感・応答性を生み出すイージング） */
  --transition: all 0.25s cubic-bezier(0.16, 1, 0.3, 1);
  --ease: cubic-bezier(0.16, 1, 0.3, 1);

  /* =================================================================
     🔘 ボタンサイズ共通一括管理システム (Button Size System - PC)
     ================================================================= */
  /* [group1] ヘッダーボタングループ（PCサイズ: 48px統一・8の倍数グリッド） */
  --header-btn-size-pc: 48px;
  --header-btn-icon-size-pc: 21px;
  --header-logo-size-pc: 48px;
  --header-avatar-size-pc: 36px;

  /* [group2] カード・タスク内アクションボタングループ（PCサイズ・モバイル統一） */
  --quadrant-btn-size-pc: 34px;
  --quadrant-btn-icon-size-pc: 18px;
  --task-action-btn-size-pc: 30px;
  --task-action-btn-icon-size-pc: 16px;

  /* [group3] レイヤー階層トークン (AGENTS.md UI Layer Hierarchy 準拠) */
  --z-dropdown-menu: 1000;

  /* =================================================================
     🌐 Universal Design Standards (ユニバーサル基準トークンシステム)
     Apple HIG / WCAG 2.1 AA / Material 3 準拠の普遍的人間工学基準
     ================================================================= */
  /* 🔤 文字フィールド基準値 (Typography Standards) */
  --font-size-min-display: 0.875rem; /* 14px: 表示フィールド物理的最小基準（バッジ・ラベル・注釈等） */
  --font-size-min-input:   1.0rem;    /* 16px: 入力フィールド基準値（iOS Safari自動ズーム防止） */

  /* 🔘 タップターゲット間隔基準値 (Tap Target Gap) */
  --touch-gap-min: 8px;              /* 8px: タップ可能要素間の最小余白（誤タップ防止） */

  /* 📏 行間・垂直リズム基準値 (Line Height) */
  --line-height-body: 1.6;           /* 本文・説明文・テキストエリアの行間 */
  --line-height-control: 1.3;        /* 単行パーツ（ボタン・ピル・ラベル）の行間 */

  /* 📱 モバイルセーフエリア基準値 (Safe Area Insets) */
  --safe-area-bottom: max(16px, env(safe-area-inset-bottom, 16px)); /* 下部バー・ノッチ回避 */
  --safe-area-top:    max(12px, env(safe-area-inset-top, 12px));    /* 上部ステータスバー回避 */
  --safe-area-inline: max(16px, env(safe-area-inset-left, 16px));   /* 左右端セーフマージン */

  /* 🖼️ モーダル標準幅スケール (Modal Width Scale) */
  --modal-width-sm: 400px;           /* Small: 確認ダイアログ・アラート・簡易プロンプト */
  --modal-width-md: 520px;           /* Medium: タスク編集・個人設定・ルーティン・メンバー管理 */
  --modal-width-lg: 720px;           /* Large: 旅のしおり・AI月報・操作ガイド・アーケード */
  --modal-width-mobile: 92%;         /* モバイル時共通幅（左右端4%ずつのセーフマージン確保） */

  /* =================================================================
     🔤 Nido Typography System (タイポグラフィ統一システム)
     日常にすっと溶け込む人間工学的黄金比と、変数一括コントロール
     ================================================================= */
  /* ⚖️ フォントウェイト（太さ）トークン */
  --font-weight-regular:  400;  /* 本文・説明文・完了タスク */
  --font-weight-medium:   500;  /* サブタイトル・補足 */
  --font-weight-semibold: 600;  /* 象限タイトル・ピルボタン・チェックリスト */
  --font-weight-bold:     700;  /* 通常タスク名・重要バッジ */
  --font-weight-heavy:    800;  /* メインタイトル・タイマー大数字 */

  /* 📐 フォントサイズ階層スケール */
  --font-size-xs: 0.875rem;     /* 14px: 最低14px基準化 */      /* 12px: 極小バッジ・補足ラベル・注釈 */
  --font-size-sm: 0.875rem;     /* 14px: 日時・見積・実績・ピルボタン */
  --font-size-base: 1rem;       /* 16px: タスク名・本文・標準入力欄 (iOS自動ズーム防止) */
  --font-size-quadrant-title: 0.875rem; /* 14px: 最低14px基準化 */ /* ★13px: 象限タイトル（Apple HIG セクション見出し基準・日常に溶け込む13px） */
  --font-size-lg: 1.125rem;     /* 18px: 中見出し・セクション大見出し */
  --font-size-xl: 1.25rem;      /* 20px: セクション見出し・モーダルタイトル */
  --font-size-2xl: 1.5rem;      /* 24px: メインタイトル・大見出し */

  /* =================================================================
     💊 ピル・チップ共通トークンシステム (Pill & Chip System - Shared)
     ※メイン画面（ときどきバー等）および将来の個人設定・メンバー管理モーダルで共通利用
     ================================================================= */
  --pill-btn-height: 44px;
  --pill-btn-font-size: 14px;
  --pill-btn-font-weight: 600;
  --pill-btn-padding: 0 18px;
  --pill-btn-radius: 22px;
  --pill-btn-gap: 8px;
  --pill-btn-bg: #f8fafc;
  --pill-btn-border: 1px solid #e2e8f0;
  --pill-btn-color: #334155;
  --pill-btn-hover-bg: #e2e8f0;
  --pill-btn-hover-border: #cbd5e1;
  --pill-btn-hover-color: #0f172a;
  --pill-btn-active-scale: 0.94;

  /* 階層レイヤー秩序（z-indexトークン） */
  --z-lightbox: 50000; /* 🌟 旅のしおり拡大ライトボックス（通常モーダル10000を覆い、タイムアウト99999や最上位ダイアログの下） */

  /* =================================================================
     🎛️ 共通フォーム・コントロールトークンシステム (Shared Control System)
     個人設定、メンバー管理、モーダルフォーム、各種ボタンで共通利用
     ================================================================= */
  --control-height-main: 42px;     /* 上段メイン入力・ボタン・DD（主役ライン） */
  --control-height-sub: 32px;      /* 下段オプショナルピル（スリムな脇役ライン、黄金比約0.75倍） */
  --control-radius-main: 10px;     /* 上段コントロール統一角丸（何をする？、象限DD、追加ボタン） */
  --control-radius-sub: 8px;       /* 下段コントロール統一角丸（スリムピル） */
  --control-padding-main: 10px 14px;/* 上段メイン入力パディング（42px枠での垂直中央揃え黄金比） */
  --control-gap-main: 10px;        /* メイン行要素間ギャップ（情報近接性の黄金比） */
  --control-gap-sub: 12px;         /* サブ行オプショナルピル間ギャップ */
  --font-size-dd: 0.95rem;         /* 15.2px: ドロップダウン統一フォントサイズ（メンバーDD基準） */
  --control-height-md: 36px;       /* 標準コントロール高さ（4の倍数グリッド） */
  --control-radius-md: 8px;        /* 標準コントロール角丸 */
  --control-font-size-md: 0.875rem; /* 14px: 最低14px基準化 */ /* 標準コントロールフォントサイズ（約13px） */
  --control-height-sm: 28px;       /* コンパクトコントロール高さ */
  --control-radius-sm: 6px;        /* コンパクトコントロール角丸 */

  /* =================================================================
     🔘 ボタン共通トークンシステム (Button Token System)
     ボタンの高さ、内側バッファ、文字サイズ、フォント、垂直アライメントを一括管理
     ※個人設定モーダルの1画面収容は維持しつつ、用途別に美しい黄金比を適用
     ================================================================= */
  /* 主要アクションボタン（決定、追加、端末接続等） */
  --btn-height-primary: 42px;         /* 主要ボタン高さ（ゆったりとした主役ライン） */
  --btn-padding-primary: 0 18px;      /* 左右バッファ */
  --btn-font-size-primary: 0.875rem;  /* 14px: 明瞭で読みやすいサイズ */
  --btn-font-weight-primary: 700;     /* 太字 */

  /* 補助アクション・設定実行ボタン（メンバー管理サブボタン、パスワード設定、同期解除等） */
  --btn-height-sub: 40px;             /* 補助ボタン高さ（36pxから40pxへ拡張して上下バッファを確保） */
  --btn-padding-sub: 0 16px;          /* 左右バッファ */
  --btn-font-size-sub: 0.875rem;     /* 13px: 上品で引き締まったサイズ */
  --btn-font-weight-sub: 600;         /* セミボールド */

  /* タスクカード内メインボタン（完了ボタン等） */
  --btn-task-action-height: 30px;     /* 24pxから30pxへ適正化（主役の存在感） */
  --btn-task-action-width: 78px;      /* 68pxから78pxへ適正化 */
  --btn-task-action-font-size: 0.875rem; /* 14px: 最低14px基準化 */ /* 13px: はっきり読める達成サイズ */
  --btn-task-action-radius: 8px;      /* 6pxから8pxへ調和 */

  /* 共通タイポグラフィ・垂直センター設定 */
  --btn-line-height: 1;               /* 和文ベースラインの垂直センター均等化 */
  --btn-font-family: inherit;

  /* 🔴 共通円形削除ボタントークン (Shared Circular Delete Button) */
  --delete-btn-size: 18px;          /* 削除ボタン標準サイズ */
  --delete-btn-bg: transparent;     /* 削除ボタン背景（枠なし・透明） */
  --delete-btn-color: #64748b;      /* 削除ボタン文字色 (WCAG AA 4.6:1 準拠) */
  --delete-btn-hover-bg: transparent;/* 削除ボタンホバー背景（枠なし・透明） */
  --delete-btn-hover-color: #dc2626;/* 削除ボタンホバー文字色 (WCAG AA 4.9:1 準拠) */

  /* 🎨 個人設定・カラー＆アバターアイコン物理サイズトークン (PC・モバイル共通: 38px黄金バランス) */
  --personal-picker-size: 38px;     /* テーマカラー・アバターボタン統一物理サイズ（38px / 5列x2行ピッタリ収容） */
  --personal-avatar-size: 38px;
}

.member-dropdown {
  position: relative;
  width: 192px;
  height: var(--header-btn-size-pc, 48px);
  flex-shrink: 0;
}
.member-dropdown-toggle {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  width: 100%;
  height: var(--header-btn-size-pc, 48px);
  min-height: var(--header-btn-size-pc, 48px);
  padding: 0 12px 0 6px;
  border: 1.5px solid rgba(15, 23, 42, 0.08);
  border-radius: calc(var(--header-btn-size-pc, 48px) / 2);
  background: white;
  cursor: pointer;
  transition: all 0.2s ease;
  white-space: nowrap;
  font-family: inherit;
  box-shadow: 0 1px 3px rgba(0,0,0,0.04);
  box-sizing: border-box;
  justify-content: flex-start;
}
.member-dropdown-toggle:hover {
  border-color: rgba(15, 23, 42, 0.15);
  box-shadow: 0 2px 6px rgba(0,0,0,0.08);
}
.member-dropdown-toggle:active {
  transform: scale(0.97);
}
.member-dd-avatar {
  width: var(--header-avatar-size-pc, 36px);
  height: var(--header-avatar-size-pc, 36px);
  border-radius: 50%;
  overflow: hidden;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  transition: all 0.2s ease;
}
.member-dd-name {
  font-size: 0.95rem;
  font-weight: 700;
  color: #1e293b;
  line-height: 1;
  flex: 1;
  text-align: left;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.member-dd-caret {
  flex-shrink: 0;
  color: #94a3b8;
  transition: transform 0.2s ease;
}
.member-dropdown.open .member-dd-caret {
  transform: rotate(180deg);
}

/* ドロップダウンリスト */
.member-dropdown-list {
  display: none;
  position: absolute;
  top: calc(100% + 4px);
  left: 0;
  min-width: 100%;
  width: max-content;
  max-width: 280px;
  background: white;
  border: 1px solid rgba(15, 23, 42, 0.1);
  border-radius: 14px;
  box-shadow: 0 8px 24px rgba(0,0,0,0.12), 0 2px 6px rgba(0,0,0,0.06);
  z-index: var(--z-dropdown-menu, 1000);
  padding: 4px;
  animation: ddSlideIn 0.15s ease;
  overflow: hidden;
  box-sizing: border-box;
}

.member-dropdown.open .member-dropdown-list {
  display: block;
}
@keyframes ddSlideIn {
  from { opacity: 0; transform: translateY(-4px); }
  to   { opacity: 1; transform: translateY(0); }
}
.member-dd-item {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 8px 10px;
  min-height: 44px;
  border-radius: 10px;
  cursor: pointer;
  transition: background 0.15s ease;
  min-width: 0;
  box-sizing: border-box;
}
.member-dd-item:hover {
  background: rgba(15, 23, 42, 0.05);
}
.member-dd-item.active {
  background: rgba(var(--theme-color-rgb, 74, 94, 120), 0.08);
}
.member-dd-item-avatar {
  width: 24px;
  height: 24px;
  border-radius: 50%;
  overflow: hidden;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
}
.member-dd-item-name {
  font-size: 0.875rem;
  font-weight: 500;
  color: #334155;
  line-height: 1.2;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  min-width: 0;
}
.member-dd-item.active .member-dd-item-name {
  font-weight: 700;
  color: #0f172a;
}

/* ✏️ メンバー名インライン編集ボタン＆ボックス */
.member-dd-item-edit-btn {
  width: 22px;
  height: 22px;
  display: flex;
  align-items: center;
  justify-content: center;
  background: transparent;
  border: none;
  border-radius: 6px;
  color: #94a3b8;
  cursor: pointer;
  flex-shrink: 0;
  padding: 0;
  transition: all 0.15s ease;
}
.member-dd-item-edit-btn:hover {
  background: rgba(15, 23, 42, 0.08);
  color: var(--accent-blue, #3b82f6);
}
.member-dd-item.editing {
  background: white !important;
  cursor: default;
}
.member-dd-inline-edit-box {
  display: flex;
  align-items: center;
  gap: 4px;
  flex: 1;
  min-width: 0;
}
.member-dd-inline-input {
  font-size: 1rem;
  font-weight: 600;
  color: #0f172a;
  padding: 3px 6px;
  border-radius: 6px;
  border: 1.5px solid var(--accent-blue, #3b82f6);
  outline: none;
  background: white;
  flex: 1;
  min-width: 0;
  box-shadow: inset 0 1px 2px rgba(0, 0, 0, 0.04);
}
.member-dd-inline-save-btn,
.member-dd-inline-cancel-btn {
  width: 22px;
  height: 22px;
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: 5px;
  border: none;
  cursor: pointer;
  padding: 0;
  flex-shrink: 0;
  transition: all 0.15s ease;
}
.member-dd-inline-save-btn {
  background: var(--accent-blue, #3b82f6);
  color: white;
}
.member-dd-inline-save-btn:hover {
  filter: brightness(1.1);
}
.member-dd-inline-cancel-btn {
  background: #f1f5f9;
  color: #64748b;
}
.member-dd-inline-cancel-btn:hover {
  background: #e2e8f0;
  color: #334155;
}

/* 🎨 カラーピッカーすりガラス backdrop (個人設定モーダルの z-index: 10000 より確実に前面へ配置し遮断) */
.color-picker-backdrop {
  position: fixed !important;
  top: 0 !important;
  left: 0 !important;
  width: 100vw !important;
  height: 100vh !important;
  background: rgba(255, 255, 255, 0.2) !important;
  backdrop-filter: blur(12px) !important;
  -webkit-backdrop-filter: blur(12px) !important;
  z-index: 11000 !important;
}

/* カラーピッカーポップオーバー: 全面中央配置 (z-index をさらに前面の 12000 に引き上げて操作可能に) */
.color-popover {
  position: fixed !important;
  top: 50% !important;
  left: 50% !important;
  transform: translate(-50%, -50%) !important;
  z-index: 12000 !important;
  max-width: 280px !important;
  width: 90% !important;
  border-radius: 28px !important; /* 丸型モダンデザインの強調 */
  box-shadow: 0 24px 48px rgba(0, 0, 0, 0.16) !important;
  background: #ffffff !important;
  overflow: hidden;
  padding: 24px !important; /* 内側にゆったり余白 */
  display: flex;
  flex-direction: column;
}

/* ポップオーバーのヘッダー */
.popover-header {
  font-family: 'Outfit', sans-serif;
  font-weight: 800;
  font-size: 1.1rem;
  color: var(--accent-blue);
  margin-bottom: 16px;
  text-align: center;
}

/* ポップオーバーのフッター */
.popover-footer {
  display: flex;
  gap: 12px;
  margin-top: 16px;
  justify-content: space-between;
}

/* ボタン共通のモダン化 */
.popover-btn {
  flex: 1;
  height: 38px;
  font-weight: bold;
  font-size: 0.875rem;
  border-radius: 12px !important;
  cursor: pointer;
  transition: all 0.2s ease;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  outline: none;
}

.popover-btn.cancel-btn {
  background-color: var(--helper-btn-bg, #f0efeb) !important;
  color: var(--helper-btn-text, var(--theme-color)) !important;
  border: 1px solid var(--helper-btn-border, rgba(0,0,0,0.1)) !important;
}
.popover-btn.cancel-btn:hover {
  background-color: var(--helper-btn-hover-bg, #e5e5e0) !important;
  border-color: var(--helper-btn-hover-border, rgba(0,0,0,0.15)) !important;
}

.popover-btn.confirm-btn {
  background-color: var(--primary-btn-bg, var(--theme-color)) !important;
  color: var(--primary-btn-text, var(--theme-text-color)) !important;
  border: 1px solid rgba(15, 23, 42, 0.1) !important;
  box-shadow: 0 2px 6px rgba(15, 23, 42, 0.12);
}
.popover-btn.confirm-btn:hover {
  filter: brightness(0.95);
  box-shadow: 0 4px 12px rgba(var(--theme-rgb), 0.2);
}

/* 2D HSL スペクトルマップキャンバス (円形マスク) */
.color-map-container {
  position: relative;
  width: 200px !important;
  height: 200px !important;
  border-radius: 50% !important; /* コンテナ自体を円形に */
  overflow: hidden !important;
  cursor: crosshair;
  margin: 0 auto 16px auto !important; /* 中央寄せ */
  border: 1px solid #e2e8f0;
}

/* カラーコード表示 ＆ 直接入力 */
.color-input-group {
  display: flex;
  align-items: center;
  gap: 12px;
  margin-bottom: 4px;
  justify-content: center;
}
.color-hex-input {
  width: 110px !important;
  height: 38px !important;
  font-family: 'Outfit', monospace !important;
  font-weight: 700 !important;
  font-size: 1rem !important;
  text-align: center !important;
  border: 1.5px solid rgba(15, 23, 42, 0.08) !important;
  border-radius: 12px !important;
  outline: none !important;
  transition: border-color 0.2s ease !important;
}
.color-hex-input:focus {
  border-color: var(--accent-blue) !important;
}
.color-preview-box {
  width: 38px;
  height: 38px;
  border-radius: 12px;
  border: 1px solid rgba(15, 23, 42, 0.1);
  box-shadow: inset 0 2px 4px rgba(0,0,0,0.06);
  flex-shrink: 0;
}

/* 🌙 ダークモード対応 */
body.dark-mode .color-popover,
body.theme-universal-dark .color-popover {
  background: #1e293b !important; /* ダークネイビー */
  border: 1px solid rgba(255, 255, 255, 0.08) !important;
}
body.dark-mode .popover-header,
body.theme-universal-dark .popover-header {
  color: #f1f5f9;
}
body.dark-mode .color-hex-input,
body.theme-universal-dark .color-hex-input {
  background-color: #334155 !important;
  color: #f1f5f9 !important;
  border-color: #475569 !important;
}
.color-map-canvas-wrapper {
  position: relative;
  width: 100%;
  height: 100%;
}
.color-map-canvas-wrapper canvas {
  display: block;
  width: 100%;
  height: 100%;
}
.color-map-cursor {
  position: absolute;
  width: 16px;
  height: 16px;
  border-radius: 50%;
  border: 2.5px solid white;
  box-shadow: 0 0 0 1.5px rgba(0,0,0,0.3), 0 2px 6px rgba(0,0,0,0.15);
  pointer-events: none;
  transform: translate(-50%, -50%);
  transition: none;
}

/* Settings Side-by-Side Layout */
.settings-layout-container {
  display: flex;
  gap: 30px;
  margin-top: 15px;
}

.settings-column {
  flex: 1;
  min-width: 0;
  /* flexbox fix */
}

.timer-presets button:hover {
  background: #ffffff !important;
  color: var(--theme-color) !important;
  border: 1px solid var(--theme-color) !important;
  box-shadow: 0 0 0 1px var(--theme-color) !important;
  transform: translateY(-1px);
}

.timer-presets button:active {
  transform: translateY(0);
}

@media (max-width: 1023px) {
  .settings-layout-container {
    flex-direction: column;
    gap: 20px;
  }

  .routine-column {
    border-left: none !important;
    padding-left: 0 !important;
    border-top: 1px solid #eee;
    padding-top: 20px;
  }
}

.timer-card.no-task .card-header {
  display: none !important;
}

/* 📅 過去日付表示時のタイマー制御（常に完全非表示） */
.timer-card.past-date-hidden {
  display: none !important;
}

.timer-card.break-mode {
  background: #ecfdf5 !important;
  border-color: #10b981 !important;
}

/* 🎯 タイマーカードへの誘導ダブルパルス発光エフェクト (テーマカラー連動) */
@keyframes timerHighlightGlow {
  0%, 100% {
    box-shadow: 0 4px 12px rgba(15, 23, 42, 0.04) !important;
    border-color: rgba(15, 23, 42, 0.05) !important;
    transform: scale(1) !important;
  }
  25% {
    box-shadow: 0 0 24px 8px rgba(var(--theme-rgb), 0.35) !important;
    border-color: rgba(var(--theme-rgb), 0.9) !important;
    transform: scale(1.025) !important;
  }
  50% {
    box-shadow: 0 4px 12px rgba(15, 23, 42, 0.04) !important;
    border-color: rgba(15, 23, 42, 0.05) !important;
    transform: scale(1) !important;
  }
  75% {
    box-shadow: 0 0 16px 4px rgba(var(--theme-rgb), 0.22) !important;
    border-color: rgba(var(--theme-rgb), 0.75) !important;
    transform: scale(1.016) !important;
  }
}

.timer-card.timer-highlight-flash {
  animation: timerHighlightGlow 2.2s ease-in-out 1 !important;
  border-radius: 16px !important;
}

.timer-card.break-mode .curr-digit {
  color: #047857 !important;
}



@keyframes popIn {
  0% {
    transform: scale(0.8);
    opacity: 0;
  }

  100% {
    transform: scale(1);
    opacity: 1;
  }
}

@keyframes fadeIn {
  from {
    opacity: 0;
    transform: translateY(10px);
  }

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

body,
button,
input,
select,
textarea {
  font-family: 'Inter', -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
  background-color: var(--bg-color);
  color: var(--text-main);
  margin: 0;
  line-height: 1.6;
  -webkit-font-smoothing: antialiased;
}

h1,
h2,
h3,
h4,
h5,
h6 {
  font-family: 'Outfit', sans-serif;
}


/* --- 2. ヘッダー：メンバー選択をタイトル横へ --- */
.top-bar {
  padding: 16px 40px 0 40px;
  margin-bottom: 16px;
  background: transparent;
}

.header-main {
  display: flex;
  align-items: center; /* タイトルとボタン群が上下中央で完璧に美しく一列整列 */
  justify-content: flex-start;
  gap: 12px;
  flex-wrap: wrap;
}

.header-left {
  display: flex;
  flex-direction: column;
  min-width: 0;
  gap: 10px;
}

.header-right {
  display: flex;
  align-items: center;
  gap: 10px;
  flex-wrap: wrap;
  justify-content: flex-end;
  min-width: 0;
}

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

.header-main h1 {
  margin: 0;
  font-family: 'Outfit', sans-serif;
  font-weight: 800;
  font-size: 32px;
  letter-spacing: -0.04em;
  color: #2c593f !important; /* Nidoちゃんの色(深緑)で統一 */
  line-height: 1.05;
  min-width: 0;
  white-space: nowrap;
}

.header-nido-logo {
  width: var(--header-logo-size-pc, 48px);
  height: var(--header-logo-size-pc, 48px);
  object-fit: contain;
  border-radius: 8px;
  flex-shrink: 0;
}

.header-meta-chips {
  display: flex;
  align-items: center;
  gap: 10px;
  flex-wrap: wrap;
}

.chip {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  background: #eef2ff;
  color: var(--accent-blue);
  border-radius: 999px;
  padding: 6px 10px;
  font-size: 0.9rem;
  font-weight: 600;
}

.chip-icon {
  display: inline-flex;
  width: 20px;
  height: 20px;
  align-items: center;
  justify-content: center;
}

.input-icon-field {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 10px 12px;
  border-radius: 16px;
  background: #F4F5F7;
  border: 1px solid #e2e8f0;
  min-width: 0;
  flex: 1;
}

.input-icon-field span {
  font-size: 1rem;
}

.estimate-entry .estimate-control {
  display: flex;
  flex-direction: column;
  gap: 8px;
  flex: 1;
}

.estimate-presets-row {
  display: flex;
  gap: 6px;
  flex-wrap: wrap;
}

.estimate-preset-btn,
.estimate-adjust-btn {
  border: 1px solid rgba(0, 0, 0, 0.1);
  background: #ffffff;
  color: var(--text-main);
  border-radius: 10px;
  padding: 5px 10px;
  font-size: 0.875rem;
  cursor: pointer;
  position: relative; /* 🍏 Apple HIG 44pxタップ領域コンテキスト */
  transition: var(--transition);
}

/* 🍏 Apple HIG 44px タップ判定領域：スリムなサイズを維持しながら透明疑似要素で44px×44px以上を保証 */
.estimate-adjust-btn::before {
  content: '';
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  min-width: 44px;
  min-height: 44px;
  width: 100%;
  height: 100%;
  border-radius: inherit;
  pointer-events: auto;
}

.estimate-preset-btn.active,
.estimate-preset-btn:hover,
.estimate-adjust-btn:hover {
  background: #ffffff !important;
  color: var(--text-main) !important;
  border-color: var(--theme-color) !important;
  box-shadow: 0 0 0 1px var(--theme-color) !important;
}

.estimate-adjust-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 6px;
  flex-wrap: nowrap; /* ボタンが改行して下に浮き出るのを完全に防ぐ */
}

.estimate-value-label {
  flex: 1;
  text-align: center;
  font-weight: 700;
  color: var(--text-main);
}

.estimate-entry .input-icon-field {
  flex-direction: column;
  align-items: stretch;
}

.estimate-entry .input-icon-field span {
  align-self: flex-start;
  margin-bottom: 6px;
}

.input-icon-field select {
  flex: 1;
  border: none;
  background: transparent;
  font-size: 1rem;
  color: var(--text-main);
  outline: none;
}

.input-icon-field select::-ms-expand {
  display: none;
}

.compact-input-row {
  display: flex;
  gap: 10px;
  flex-wrap: wrap;
}

.visually-hidden {
  position: absolute !important;
  height: 1px;
  width: 1px;
  overflow: hidden;
  clip: rect(1px, 1px, 1px, 1px);
  white-space: nowrap;
}

.timer-hint {
  margin-top: 10px;
  font-size: 0.875rem;
  color: var(--text-muted);
  text-align: center;
}


.member-selector-area {
  display: flex;
  align-items: center;
  gap: 8px;
  background: transparent;
  padding: 0;
  border-radius: 0;
  box-shadow: none;
  border: none;
  min-width: auto;
}

.header-icon {
  width: 20px;
  height: 20px;
  object-fit: contain;
}

.icon-label {
  font-size: 1.2rem;
  line-height: 1;
}

.top-bar .icon-button,
.icon-button {
  width: var(--header-btn-size-pc, 48px);
  height: var(--header-btn-size-pc, 48px);
  min-width: var(--header-btn-size-pc, 48px);
  min-height: var(--header-btn-size-pc, 48px);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  background: white;
  border: 1px solid rgba(15, 23, 42, 0.08);
  border-radius: 12px;
  cursor: pointer;
  transition: transform 0.2s, background 0.2s, border-color 0.2s;
}

.top-bar .icon-button svg,
.icon-button svg {
  width: var(--header-btn-icon-size-pc, 21px);
  height: var(--header-btn-icon-size-pc, 21px);
}

.icon-button:hover {
  transform: translateY(-1px);
  background: #F4F5F7;
  border-color: rgba(15, 23, 42, 0.15);
  box-shadow: 0 2px 6px rgba(0, 0, 0, 0.06);
}

.icon-button:active {
  transform: scale(0.94);
}

/* =================================================================
   ⠿ Nido アプリランチャー (Apps Launcher Popover Menu)
   ================================================================= */
.nido-apps-container {
  position: relative;
  display: inline-flex;
}

#nidoAppsLauncherBtn {
  position: relative;
}

/* 通知バッジ（ヘッダーアイコン右上） */
#nidoAppsLauncherBtn .notification-badge {
  position: absolute;
  top: -2px;
  right: -2px;
  min-width: 18px;
  height: 18px;
  padding: 0 4px;
  background: #ef4444;
  color: #ffffff;
  font-size: var(--font-size-min-input, 1rem);
  font-weight: 700;
  border-radius: 999px;
  border: 2px solid #ffffff;
  display: flex;
  align-items: center;
  justify-content: center;
  box-shadow: 0 2px 4px rgba(239, 68, 68, 0.4);
  line-height: 1;
  pointer-events: none;
  box-sizing: border-box;
}

/* アプリメニューポップオーバー */
.nido-apps-menu {
  display: none;
  position: absolute;
  top: calc(100% + 8px);
  left: 0;
  width: 280px;
  background: rgba(255, 255, 255, 0.96);
  backdrop-filter: blur(16px);
  -webkit-backdrop-filter: blur(16px);
  border: 1px solid rgba(15, 23, 42, 0.08);
  border-radius: 16px;
  box-shadow: 0 16px 36px -4px rgba(15, 23, 42, 0.12), 0 4px 12px rgba(15, 23, 42, 0.04);
  padding: 8px;
  z-index: var(--z-dropdown-menu, 1000);
  flex-direction: column;
  gap: 6px;
  transform-origin: top left;
  animation: appsMenuPop 0.18s cubic-bezier(0.16, 1, 0.3, 1) forwards;
  box-sizing: border-box;
}

.nido-apps-container.open .nido-apps-menu {
  display: flex;
}

@keyframes appsMenuPop {
  from {
    opacity: 0;
    transform: scale(0.94) translateY(-6px);
  }
  to {
    opacity: 1;
    transform: scale(1) translateY(0);
  }
}

/* アプリタイルボタン */
.nido-app-tile-btn {
  display: flex;
  align-items: center;
  gap: 12px;
  width: 100%;
  padding: 10px 12px;
  background: transparent;
  border: 1px solid transparent;
  border-radius: 12px;
  cursor: pointer;
  text-align: left;
  font-family: inherit;
  transition: all 0.18s ease;
  box-sizing: border-box;
}

.nido-app-tile-btn:hover {
  background: #f8fafc;
  border-color: rgba(15, 23, 42, 0.06);
  transform: translateY(-1px);
}

.nido-app-tile-btn:active {
  transform: scale(0.98);
  background: #f1f5f9;
}

.app-tile-icon-box {
  width: 40px;
  height: 40px;
  min-width: 40px;
  border-radius: 10px;
  background: linear-gradient(135deg, #eff6ff 0%, #dbeafe 100%);
  color: #2563eb;
  display: flex;
  align-items: center;
  justify-content: center;
  border: 1px solid rgba(37, 99, 235, 0.12);
  transition: all 0.2s ease;
  box-sizing: border-box;
}

.app-tile-icon-box svg {
  width: 20px !important;
  height: 20px !important;
}

.app-tile-icon-box.arcade-tile-icon {
  background: linear-gradient(135deg, #fdf2f8 0%, #fce7f3 100%);
  color: #db2777;
  border-color: rgba(219, 39, 119, 0.12);
}

.nido-app-tile-btn:hover .app-tile-icon-box {
  box-shadow: 0 4px 10px rgba(0, 0, 0, 0.06);
}

.app-tile-text-box {
  display: flex;
  flex-direction: column;
  gap: 2px;
  min-width: 0;
  flex: 1;
}

.app-tile-title-row {
  display: flex;
  align-items: center;
  gap: 6px;
}

.app-tile-title {
  font-size: 14px;
  font-weight: 700;
  color: #1e293b;
  line-height: 1.2;
}

.app-tile-desc {
  font-size: 14px;
  color: #64748b;
  line-height: 1.3;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.app-tile-title-row .notification-badge {
  min-width: 16px;
  height: 16px;
  padding: 0 4px;
  background: #ef4444;
  color: #ffffff;
  font-size: 14px;
  font-weight: 700;
  border-radius: 999px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  line-height: 1;
}

/* ダークモード対応 */
body.dark-mode .nido-apps-menu {
  background: rgba(30, 41, 59, 0.96);
  border-color: rgba(255, 255, 255, 0.1);
  box-shadow: 0 16px 36px -4px rgba(0, 0, 0, 0.4);
}

body.dark-mode .nido-app-tile-btn:hover {
  background: rgba(255, 255, 255, 0.05);
  border-color: rgba(255, 255, 255, 0.08);
}

body.dark-mode .nido-app-tile-btn:active {
  background: rgba(255, 255, 255, 0.08);
}

body.dark-mode .app-tile-title {
  color: #f1f5f9;
}

body.dark-mode .app-tile-desc {
  color: #94a3b8;
}

body.dark-mode #nidoAppsLauncherBtn .notification-badge {
  border-color: #1e293b;
}





.routine-day-group {
  display: flex;
  gap: 8px;
  flex-wrap: wrap;
  align-items: center;
  font-size: 0.875rem;
}

.routine-shortcut-btn {
  border: 1px solid rgba(59, 130, 246, 0.25);
  color: var(--accent-blue);
  background: #eef2ff;
  border-radius: 999px;
  padding: 4px 12px;
  font-weight: 700;
  cursor: pointer;
  transition: all 0.2s ease;
}

.routine-shortcut-btn:hover {
  background: #dbeafe;
}

.sometimes-shortcut-btn {
  border: 1px solid rgba(230, 126, 34, 0.25) !important;
  color: #e67e22 !important;
  background: #fff4e6 !important;
  padding: 4px 12px !important;
}

.sometimes-shortcut-btn:hover {
  background: #ffe4c7 !important;
}

.sometimes-shortcut-btn:has(input:checked) {
  background: #e67e22 !important;
  color: white !important;
  border-color: transparent !important;
}

.routine-day-chip-container {
  display: flex;
  gap: 8px;
  flex-wrap: wrap;
  border-left: 1px solid #ddd;
  padding-left: 8px;
}

.routine-day-pill {
  position: relative;
  cursor: pointer;
}

.routine-day-pill input {
  position: absolute;
  inset: 0;
  opacity: 0;
  width: 100%;
  height: 100%;
  margin: 0;
  cursor: pointer;
}

.routine-day-pill span {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 36px;
  height: 32px;
  padding: 0 12px;
  border-radius: 999px;
  border: 1px solid #cbd5e1;
  background: #ffffff;
  color: #334155;
  font-weight: 700;
  box-shadow: 0 1px 2px rgba(0,0,0,0.05);
  transition: all 0.2s ease;
}

.routine-day-pill:hover span {
  background: #F4F5F7;
  border-color: #94a3b8;
}

.routine-day-pill input:checked+span {
  background: var(--accent-blue);
  color: #ffffff;
  border-color: transparent;
}




.calendar-day .day-number {
  position: relative;
  z-index: 2;
  /* 数字を形状より前に出す */
}


#memberSelect {
  border: none;
  font-weight: 600;
  color: var(--accent-blue);
  cursor: pointer;
  background: transparent;
  font-size: 1rem;
  outline: none;
  width: auto; /* コンテンツに合わせて自動幅に調整 */
  min-width: 100px; /* 最小幅を維持して極端な揺れを防止 */
  max-width: 180px; /* ゆとりを持たせて名前の見切れを防止 */
  text-overflow: ellipsis;
}

.header-title-block {
  display: flex;
  flex-direction: column;
  gap: 4px;
  min-width: 0;
}

.title-meta {
  display: flex;
  align-items: center;
  gap: 6px;
  font-size: 0.9rem;
  color: var(--text-muted);
}

.user-icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 24px;
  height: 24px;
  border-radius: 999px;
  background: #eef2ff;
}

.secondary-btn {
  border: 1px solid rgba(15, 23, 42, 0.08);
  background: var(--timer-bg); /* マシュマロカラー (#f0efeb) */
  color: var(--accent-blue, var(--theme-color)); /* 🛡️ 白テーマ時でも同化しないよう調整された暗いカラーを優先 */
  border-radius: var(--border-radius); /* 14px でぷっくり */
  padding: 8px 14px;
  font-size: 1rem;
  cursor: pointer;
  font-weight: bold;
  transition: var(--transition);
}

.secondary-btn:hover {
  background: var(--accent-blue-light); /* 淡いテーマカラー背景 */
  border-color: rgba(var(--theme-rgb), 0.2);
}

/* --- 3. メインエリアのレイアウト --- */
.main-content-area {
  display: grid;
  grid-template-columns: minmax(0, 1fr) 350px;
  gap: 32px;
  padding: 0 40px 60px;
  align-items: start;
}

.side-content {
  display: flex;
  flex-direction: column;
  gap: 32px;
  /* カード間の余白 */
}


/* --- 4. カードコンポーネント --- */
.card {
  position: relative;
  z-index: 4;
  background: var(--card-bg);
  border-radius: var(--border-radius);
  box-shadow: var(--shadow);
  padding: 24px;
  border: 1px solid rgba(15, 23, 42, 0.05);
  transition: var(--transition);
  animation: fadeIn 0.8s var(--ease);
}

.card:hover {
  box-shadow: var(--shadow-lg);
}

#memberManagementSection {
  position: fixed !important;
  top: 50% !important;
  left: 50% !important;
  transform: translate(-50%, -50%) !important;
  width: 95% !important;
  max-width: 600px !important; /* 横幅をスリムで見やすい幅に制限（UI/UX向上） */
  max-height: 94vh !important; /* 縦幅を94vhまで大きく広げてスクロールバーを完全に排除 */
  overflow-y: auto !important;
  background: rgba(255, 255, 255, 0.82) !important; /* 高級感溢れるすりガラス調 */
  backdrop-filter: blur(20px) !important;
  -webkit-backdrop-filter: blur(20px) !important;
  border: 1px solid rgba(255, 255, 255, 0.25) !important;
  border-radius: var(--modal-radius-small, 20px) !important;
  box-shadow: 0 25px 60px -15px rgba(15, 23, 42, 0.3) !important;
  z-index: 10000 !important;
  margin: 0 !important;
  padding: 24px 28px !important;
  animation: fadeIn 0.3s ease-out;
}

body.dark-mode #memberManagementSection,
body.theme-universal-dark #memberManagementSection {
  background: rgba(30, 41, 59, 0.82) !important;
  border-color: rgba(255, 255, 255, 0.08) !important;
}

/* =================================================================
   👥 メンバー管理画面 (Member Management Modal) - 統一システム
   メイン画面の Shared Control System & Apple HIG 44px に完全準拠
   ================================================================= */

/* モーダルヘッダー */
.member-manage-header {
  margin-bottom: 20px;
  border-bottom: 1px solid rgba(15, 23, 42, 0.06);
  padding-bottom: 12px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding-right: 36px;
}
.member-manage-header h3 {
  margin: 0;
  font-family: 'Outfit', sans-serif;
  font-weight: 700;
  font-size: var(--font-size-xl, 20px);
  color: var(--accent-blue);
}

/* レイアウト・カラム */
.member-management-layout {
  display: flex;
  flex-direction: column;
  gap: 20px;
}
.member-manage-section-title {
  margin: 0 0 10px 0;
  font-size: var(--font-size-quadrant-title, 0.875rem);
  font-weight: 700;
  color: var(--accent-blue);
}
.member-manage-section-desc {
  font-size: 14px;
  color: #64748b;
  margin: 0 0 10px 0;
  line-height: 1.45;
}
.member-manage-section-desc-note {
  color: #64748b;
  font-weight: 700;
  font-size: 14px;
}

/* メンバーピル一覧コンテナ */
.member-manage-list {
  margin-bottom: 16px;
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
}

/* メンバーピル（チップ） */
.member-manage-item {
  background: #f1f5f9;
  padding: 6px 12px;
  border-radius: 18px; /* 統一ピル角丸 */
  font-size: 14px;
  display: inline-flex;
  align-items: center;
  gap: 6px;
  border: 1px solid #e2e8f0;
  height: 34px;
  box-sizing: border-box;
}
.member-manage-item-avatar {
  width: 22px;
  height: 22px;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  overflow: hidden;
  flex-shrink: 0;
}
.member-manage-item-name {
  font-weight: 700;
  color: #334155;
}

/* 新規登録行 (メイン行：高さ40px、角丸10pxに統一) */
.member-manage-add-row {
  border-top: 1px solid rgba(15, 23, 42, 0.08);
  padding-top: 16px;
  display: flex;
  gap: 8px;
  align-items: center;
}
.member-manage-name-input {
  flex: 1;
  min-width: 0;
  height: 40px;
  padding: 0 14px;
  border-radius: var(--control-radius-main, 10px);
  border: 1.5px solid #e2e8f0;
  background: #F4F5F7;
  color: var(--text-main);
  outline: none;
  font-size: var(--font-size-base, 1rem); /* iOS自動ズーム防止 */
  font-family: inherit;
  box-sizing: border-box;
  transition: var(--transition);
}
.member-manage-name-input:focus {
  border-color: var(--accent-blue);
  background: white;
}
.member-manage-child-label {
  font-size: 0.875rem;
  cursor: pointer;
  display: inline-flex;
  align-items: center;
  gap: 5px;
  white-space: nowrap;
  color: #475569;
  font-weight: 700;
  user-select: none;
  height: 40px;
  padding: 0 4px;
}
.member-manage-lang-select {
  height: 40px;
  padding: 0 12px;
  border-radius: var(--control-radius-main, 10px);
  border: 1.5px solid #e2e8f0;
  background: #F4F5F7;
  color: #475569;
  font-weight: 700;
  font-size: 1rem;
  outline: none;
  cursor: pointer;
  box-sizing: border-box;
  transition: var(--transition);
}
.member-manage-lang-select:focus {
  border-color: var(--accent-blue);
  background: white;
}
.member-manage-add-btn {
  height: 40px;
  padding: 0 18px;
  border-radius: var(--control-radius-main, 10px);
  font-weight: 800;
  font-size: var(--font-size-dd, 0.95rem);
  white-space: nowrap;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  background-color: var(--primary-btn-bg, var(--theme-color));
  color: var(--primary-btn-text, var(--theme-text-color));
  border: var(--primary-btn-border, 1px solid rgba(15, 23, 42, 0.15));
  box-shadow: var(--primary-btn-shadow, 0 2px 6px rgba(15, 23, 42, 0.12));
  cursor: pointer;
  transition: var(--transition);
  position: relative;
  box-sizing: border-box;
}
.member-manage-add-btn::before {
  content: '';
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  min-width: 44px;
  min-height: 44px;
  width: 100%;
  height: 100%;
}

/* 大セクション区切り（8pxグリッド: 上部マージン20px、パディング16px） */
.member-manage-divider-section {
  margin-top: 20px;
  padding-top: 16px;
  border-top: 1px solid rgba(15, 23, 42, 0.08);
}
.member-manage-button-grid {
  display: flex;
  gap: 8px;
  align-items: center;
  flex-wrap: wrap;
}

/* メンバー管理用 統一セカンダリーボタン（高さ40px、角丸10px） */
.member-manage-sub-btn {
  height: var(--btn-height-sub, 40px);
  min-height: var(--btn-height-sub, 40px);
  padding: var(--btn-padding-sub, 0 16px);
  font-size: var(--btn-font-size-sub, 0.875rem);
  font-weight: var(--btn-font-weight-sub, 600);
  line-height: var(--btn-line-height, 1);
  font-family: var(--btn-font-family, inherit);
  background: white;
  color: #334155;
  border: 1px solid #cbd5e1;
  border-radius: var(--control-radius-main, 10px);
  cursor: pointer;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
  box-shadow: var(--shadow-sm);
  transition: var(--transition);
  position: relative;
  white-space: nowrap;
  box-sizing: border-box;
}
.member-manage-sub-btn:hover {
  background: #f8fafc;
  border-color: #94a3b8;
  color: var(--text-main);
}
.member-manage-sub-btn::before {
  content: '';
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  min-width: 44px;
  min-height: 44px;
  width: 100%;
  height: 100%;
}
.member-manage-btn-half {
  flex: 1;
  min-width: 120px;
}
.member-manage-btn-full {
  width: 100%;
}

/* メンバー管理用 プライマリーボタン（高さ42px、角丸10px） */
.member-manage-primary-btn {
  height: var(--btn-height-primary, 42px);
  min-height: var(--btn-height-primary, 42px);
  padding: var(--btn-padding-primary, 0 18px);
  font-size: var(--btn-font-size-primary, 0.875rem);
  font-weight: var(--btn-font-weight-primary, 700);
  line-height: var(--btn-line-height, 1);
  font-family: var(--btn-font-family, inherit);
  background-color: var(--primary-btn-bg, var(--theme-color));
  color: var(--primary-btn-text, var(--theme-text-color));
  border: var(--primary-btn-border, 1px solid rgba(15, 23, 42, 0.15));
  border-radius: var(--control-radius-main, 10px);
  cursor: pointer;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
  box-shadow: var(--primary-btn-shadow, 0 2px 6px rgba(15, 23, 42, 0.12));
  transition: var(--transition);
  position: relative;
  white-space: nowrap;
  box-sizing: border-box;
  width: 100%;
}
.member-manage-primary-btn:hover {
  box-shadow: var(--primary-btn-hover-shadow, 0 4px 12px rgba(15, 23, 42, 0.2));
}
.member-manage-primary-btn::before {
  content: '';
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  min-width: 44px;
  min-height: 44px;
  width: 100%;
  height: 100%;
}

/* クラウド同期コンテナカード */
.member-manage-cloud-card {
  background: #f8fafc;
  padding: 14px;
  border-radius: 12px;
  border: 1px solid #e2e8f0;
  display: flex;
  flex-direction: column;
  gap: 12px;
  box-sizing: border-box;
}

/* 家族キー表示行 */
.member-manage-key-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
}
.member-manage-key-label {
  font-size: 14px;
  color: #64748b;
  font-weight: 700;
  margin: 0;
}
.member-manage-security-badge {
  font-size: 14px;
  font-weight: 700;
  display: inline-flex;
  align-items: center;
  gap: 4px;
  cursor: pointer;
  user-select: none;
}
.member-manage-security-badge.protected {
  color: #10b981;
}
.member-manage-security-badge.unprotected {
  color: #94a3b8;
}

.member-manage-key-row {
  display: flex;
  gap: 8px;
  align-items: center;
}
.member-manage-key-code {
  flex: 1;
  min-width: 0;
  height: var(--btn-height-sub, 40px);
  background: #ffffff;
  padding: 0 12px;
  border-radius: var(--control-radius-main, 10px);
  border: 1.5px solid #e2e8f0;
  font-weight: 700;
  color: var(--accent-blue);
  font-family: monospace;
  font-size: 14px;
  display: inline-flex;
  align-items: center;
  box-sizing: border-box;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

/* パスワード・管理者サブブロック（破線区切り） */
.member-manage-sub-block {
  border-top: 1px dashed #cbd5e1;
  padding-top: 12px;
  display: flex;
  flex-direction: column;
  gap: 8px;
}
.member-manage-sub-block-title {
  font-size: 14px;
  font-weight: 700;
  color: #475569;
  display: flex;
  align-items: center;
  gap: 4px;
  margin: 0;
}

/* パスワード入力行 */
.member-manage-input-box {
  display: flex;
  gap: 6px;
  align-items: center;
  position: relative;
  width: 100%;
}
.member-manage-text-input {
  width: 100%;
  height: var(--btn-height-sub, 40px);
  padding: 0 12px;
  border: 1.5px solid #cbd5e1;
  border-radius: var(--control-radius-main, 10px);
  font-size: var(--btn-font-size-sub, 0.875rem);
  font-family: var(--btn-font-family, inherit);
  box-sizing: border-box;
  outline: none;
  background: #ffffff;
  color: var(--text-main);
  transition: var(--transition);
}
.member-manage-text-input:focus {
  border-color: var(--accent-blue);
}
.member-manage-input-box .member-manage-text-input {
  padding-right: 34px;
}
.member-manage-pw-toggle-btn {
  position: absolute;
  right: 6px;
  top: 50%;
  transform: translateY(-50%);
  background: none;
  border: none;
  cursor: pointer;
  padding: 4px;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 32px;
  height: 32px;
  box-sizing: border-box;
}
.member-manage-pw-toggle-btn::before {
  content: '';
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  min-width: 44px;
  min-height: 44px;
  width: 100%;
  height: 100%;
  border-radius: inherit;
  pointer-events: auto;
}

/* 危険・解除ボタン */
.member-manage-danger-btn {
  height: var(--btn-height-sub, 40px);
  min-height: var(--btn-height-sub, 40px);
  width: 100%;
  padding: var(--btn-padding-sub, 0 16px);
  color: #e63946;
  border: 1px solid #fca5a5;
  background: #fff1f2;
  font-size: var(--btn-font-size-sub, 0.875rem);
  font-weight: var(--btn-font-weight-sub, 600);
  line-height: var(--btn-line-height, 1);
  font-family: var(--btn-font-family, inherit);
  border-radius: var(--control-radius-main, 10px);
  cursor: pointer;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  transition: var(--transition);
  position: relative;
  box-sizing: border-box;
}
.member-manage-danger-btn:hover {
  background: #ffe4e6;
  border-color: #f87171;
}
.member-manage-danger-btn::before {
  content: '';
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  min-width: 44px;
  min-height: 44px;
  width: 100%;
  height: 100%;
}

/* 簡単接続・QRスキャンエリア */
.member-manage-quick-connect-box {
  background: #f8fafc;
  padding: 14px;
  border-radius: 12px;
  border: 1.5px solid #e2e8f0;
  text-align: center;
  display: flex;
  flex-direction: column;
  gap: 10px;
}
.member-manage-quick-input-row {
  display: flex;
  gap: 8px;
  justify-content: center;
  align-items: center;
}
.member-manage-code-input {
  width: 120px;
  height: var(--btn-height-sub, 40px);
  padding: 0 8px;
  border: 1.5px solid #cbd5e1;
  border-radius: var(--control-radius-main, 10px);
  font-size: 1rem;
  text-align: center;
  font-weight: 700;
  font-family: monospace;
  letter-spacing: 2px;
  box-sizing: border-box;
  outline: none;
}
.member-manage-code-input:focus {
  border-color: var(--accent-blue);
}
.member-manage-qr-row {
  font-size: 1rem;
  color: #94a3b8;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
}
.member-manage-or-divider {
  text-align: center;
  margin: 4px 0;
  font-size: 14px;
  color: #94a3b8;
}
.member-manage-unconnected-box {
  display: flex;
  flex-direction: column;
  gap: 12px;
}

/* 手動接続エリア */
.member-manage-manual-box {
  display: flex;
  flex-direction: column;
  gap: 10px;
  background: #ffffff;
  border: 1.5px solid #e2e8f0;
  padding: 14px;
  border-radius: 12px;
  box-sizing: border-box;
}

/* 🕒 前回のファミリーキー履歴ピル（案A・Apple HIG 44pxタップ領域準拠） */
.member-manage-recent-keys-row {
  display: flex;
  flex-direction: column;
  gap: 6px;
  align-items: flex-start;
  margin-top: -2px;
  margin-bottom: 2px;
  width: 100%;
}
.member-manage-recent-keys-label {
  font-size: var(--font-size-xs, 0.875rem);
  color: var(--text-muted, #64748b);
  font-weight: var(--font-weight-medium, 500);
}
.member-manage-recent-pills {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  width: 100%;
}
.member-manage-key-pill {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  padding: 6px 12px;
  border-radius: var(--control-radius-pill, 9999px);
  background: rgba(59, 130, 246, 0.08);
  border: 1px solid rgba(59, 130, 246, 0.25);
  color: var(--accent-blue, #2563eb);
  cursor: pointer;
  font-size: var(--font-size-xs, 0.875rem);
  font-weight: var(--font-weight-semibold, 600);
  transition: all 0.2s ease;
  position: relative;
}
.member-manage-key-pill::before {
  content: '';
  position: absolute;
  top: -6px;
  bottom: -6px;
  left: -4px;
  right: -4px;
  min-height: 44px;
  pointer-events: auto;
}
.member-manage-key-pill:hover,
.member-manage-key-pill:active {
  background: rgba(59, 130, 246, 0.16);
  border-color: var(--accent-blue, #2563eb);
  transform: translateY(-1px);
}
.member-manage-key-pill code {
  font-family: monospace;
  font-size: 0.9em;
  letter-spacing: 0.5px;
}

body.dark-mode .member-manage-key-pill,
body.theme-universal-dark .member-manage-key-pill {
  background: rgba(59, 130, 246, 0.18);
  border-color: rgba(59, 130, 246, 0.4);
  color: #93c5fd;
}

/* 端末接続モーダル・QRスキャナーモーダル */
.device-link-overlay {
  position: fixed;
  top: 0;
  left: 0;
  width: 100vw;
  height: 100vh;
  background: rgba(15, 23, 42, 0.45);
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);
  display: flex;
  align-items: center;
  justify-content: center;
  z-index: 999999;
  opacity: 0;
  transition: opacity 0.2s ease;
}
.device-link-card {
  background: white;
  border-radius: var(--modal-radius-small, 20px);
  box-shadow: 0 20px 40px rgba(15, 23, 42, 0.15);
  width: 90%;
  max-width: 360px;
  padding: 24px;
  text-align: center;
  transform: scale(0.9);
  transition: transform 0.2s cubic-bezier(0.175, 0.885, 0.32, 1.275);
  display: flex;
  flex-direction: column;
  gap: 12px;
  border: 1px solid rgba(0, 0, 0, 0.05);
  color: #1e293b;
}
body.dark-mode .device-link-card,
body.theme-universal-dark .device-link-card {
  background: #1e293b;
  border-color: #334155;
  color: #f8fafc;
}

/* 端末接続モーダル内パーツ */
.device-link-icon-box {
  text-align: center;
  margin-bottom: 10px;
}
.device-link-key-img {
  width: 64px;
  height: 64px;
  border-radius: 50%;
  border: 2px solid #e2e8f0;
  background: white;
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.05);
  display: inline-block;
}
.device-link-instruction {
  margin: 0 0 12px 0;
  font-size: 14px;
  color: var(--text-main);
  line-height: 1.5;
}
.device-link-qr-box {
  background: white;
  padding: 10px;
  border-radius: 12px;
  display: inline-block;
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.06);
  margin-bottom: 12px;
  border: 1.5px solid #e2e8f0;
}
.device-link-qr-img {
  display: block;
  width: 160px;
  height: 160px;
}
.device-link-code-label {
  margin: 0 0 4px 0;
  font-size: 14px;
  color: #94a3b8;
}
.device-link-code-badge {
  font-family: monospace;
  font-size: 24px;
  font-weight: bold;
  color: var(--accent-blue);
  letter-spacing: 2px;
  background: #f1f5f9;
  padding: 6px 16px;
  border-radius: var(--control-radius-main, 10px);
  display: inline-block;
  margin-bottom: 8px;
  border: 1px solid #e2e8f0;
  user-select: all;
}
.device-link-timer {
  font-size: 14px;
  font-weight: bold;
  color: #ef4444;
  margin-top: 4px;
  font-family: monospace;
  font-variant-numeric: tabular-nums;
}
.device-link-modal-title {
  margin: 0;
  font-size: 1.1rem;
  font-weight: bold;
  color: var(--accent-blue, #3b82f6);
}
.device-link-modal-body {
  font-size: 1rem;
  line-height: 1.5;
  color: inherit;
}
.device-link-btn-row {
  margin-top: 8px;
  width: 100%;
}
.device-link-video-container {
  position: relative;
  width: 100%;
  aspect-ratio: 1/1;
  background: #000;
  border-radius: 12px;
  overflow: hidden;
  border: 1.5px solid #e2e8f0;
}
.device-link-video {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

/* 👥 メンバー管理画面 ダークモード対応 (Dark Mode & Universal Dark) */
body.dark-mode #memberManagementSection,
body.theme-universal-dark #memberManagementSection {
  background: rgba(30, 41, 59, 0.95) !important;
  border-color: rgba(255, 255, 255, 0.1) !important;
  color: #f1f5f9 !important;
}

body.dark-mode .member-manage-header,
body.theme-universal-dark .member-manage-header {
  border-bottom-color: rgba(255, 255, 255, 0.08);
}

body.dark-mode .member-manage-section-desc,
body.theme-universal-dark .member-manage-section-desc {
  color: #94a3b8;
}

body.dark-mode .member-manage-child-label,
body.theme-universal-dark .member-manage-child-label {
  color: #cbd5e1;
}

body.dark-mode .member-manage-item,
body.theme-universal-dark .member-manage-item {
  background: rgba(15, 23, 42, 0.6);
  border-color: rgba(255, 255, 255, 0.08);
}

body.dark-mode .member-manage-item-name,
body.theme-universal-dark .member-manage-item-name {
  color: #f1f5f9;
}

body.dark-mode .member-manage-name-input,
body.theme-universal-dark .member-manage-name-input {
  background: #0f172a;
  border-color: #334155;
  color: #f8fafc;
}

body.dark-mode .member-manage-lang-select,
body.theme-universal-dark .member-manage-lang-select {
  background: #0f172a;
  border-color: #334155;
  color: #cbd5e1;
}

body.dark-mode .member-manage-sub-btn,
body.theme-universal-dark .member-manage-sub-btn {
  background: #1e293b;
  border-color: #475569;
  color: #f1f5f9;
}

body.dark-mode .member-manage-sub-btn:hover,
body.theme-universal-dark .member-manage-sub-btn:hover {
  background: #334155;
  border-color: #64748b;
  color: #ffffff;
}

body.dark-mode .member-manage-cloud-card,
body.theme-universal-dark .member-manage-cloud-card {
  background: rgba(15, 23, 42, 0.6);
  border-color: rgba(255, 255, 255, 0.08);
}

body.dark-mode .member-manage-key-code,
body.theme-universal-dark .member-manage-key-code {
  background: #0f172a;
  border-color: #334155;
  color: var(--accent-blue);
}

body.dark-mode .member-manage-sub-block,
body.theme-universal-dark .member-manage-sub-block {
  border-top-color: rgba(255, 255, 255, 0.1);
}

body.dark-mode .member-manage-sub-block-title,
body.theme-universal-dark .member-manage-sub-block-title {
  color: #94a3b8;
}

body.dark-mode .member-manage-text-input,
body.theme-universal-dark .member-manage-text-input {
  background: #0f172a;
  border-color: #334155;
  color: #f8fafc;
}

body.dark-mode .member-manage-code-input,
body.theme-universal-dark .member-manage-code-input {
  background: #0f172a;
  border-color: #334155;
  color: #f8fafc;
}

body.dark-mode .member-manage-quick-connect-box,
body.theme-universal-dark .member-manage-quick-connect-box {
  background: rgba(15, 23, 42, 0.6);
  border-color: rgba(255, 255, 255, 0.08);
}

body.dark-mode .member-manage-manual-box,
body.theme-universal-dark .member-manage-manual-box {
  background: rgba(15, 23, 42, 0.6);
  border-color: rgba(255, 255, 255, 0.08);
}

body.dark-mode .member-manage-danger-btn,
body.theme-universal-dark .member-manage-danger-btn {
  background: rgba(225, 29, 72, 0.15);
  border-color: rgba(225, 29, 72, 0.4);
  color: #fda4af;
}

body.dark-mode .member-manage-danger-btn:hover,
body.theme-universal-dark .member-manage-danger-btn:hover {
  background: rgba(225, 29, 72, 0.25);
  border-color: rgba(225, 29, 72, 0.6);
  color: #ffffff;
}

body.dark-mode .member-manage-divider-section,
body.theme-universal-dark .member-manage-divider-section {
  border-top-color: rgba(255, 255, 255, 0.08);
}

body.dark-mode .member-manage-add-row,
body.theme-universal-dark .member-manage-add-row {
  border-top-color: rgba(255, 255, 255, 0.08);
}

.header-diagnostics-btn {
  border: none;
  background: transparent;
  cursor: pointer;
  padding: 6px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border-radius: 8px;
  color: #64748b;
  transition: all 0.15s ease;
  min-width: 32px;
  min-height: 32px;
}

.header-diagnostics-btn:hover {
  background: rgba(15, 23, 42, 0.06);
  color: #0f172a;
}

body.dark-mode .header-diagnostics-btn,
body.theme-universal-dark .header-diagnostics-btn {
  color: #94a3b8;
}

body.dark-mode .header-diagnostics-btn:hover,
body.theme-universal-dark .header-diagnostics-btn:hover {
  background: rgba(255, 255, 255, 0.1);
  color: #f8fafc;
}

#personalSettingsSection {
  animation: fadeIn 0.3s ease-out;
  z-index: 10;
}

.card-header h2,
.card-header h3 {
  margin: 0;
  font-family: 'Outfit', sans-serif;
  font-weight: 700;
  font-size: 20px;
  color: var(--accent-blue);
}

/* --- 5. 4象限マトリクス & ときどきバー --- */
.matrix-controls {
  display: none !important; /* 🌟 ときどきバーの独立配置に伴い廃止（左右の水平同期・がたつき完全解消） */
}

/* 🏷️ ときどきルーティン専用サブバー（ヘッダーとメインエリアの中間に独立配置） */
.sometimes-bar-section {
  padding: 0 40px;
  margin-bottom: 16px;
  display: none; /* JSでときどきタスクがある時のみ flex 表示 */
  align-items: center;
  animation: fadeIn 0.3s var(--ease);
}

.sometimes-pills-container {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--pill-btn-gap, 8px);
}

.sometimes-bar-label {
  font-size: 1rem;
  font-weight: 700;
  color: #94a3b8;
  margin-right: 4px;
  white-space: nowrap;
  user-select: none;
}

/* 💊 共通ピルボタンスタイル (ときどきルーティン、個人設定、メンバー管理等で共有・コピー可能) */
.sometimes-pill-btn,
.nido-pill-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
  height: var(--pill-btn-height, 44px);
  padding: var(--pill-btn-padding, 0 18px);
  font-size: var(--pill-btn-font-size, 14px);
  font-weight: var(--pill-btn-font-weight, 600);
  color: var(--pill-btn-color, #334155);
  background: var(--pill-btn-bg, #f8fafc);
  border: var(--pill-btn-border, 1px solid #e2e8f0);
  border-radius: var(--pill-btn-radius, 22px);
  cursor: pointer;
  white-space: nowrap;
  user-select: none;
  transition: all 0.2s cubic-bezier(0.16, 1, 0.3, 1);
  box-shadow: 0 1px 2px rgba(0, 0, 0, 0.04);
  position: relative;
}

/* 🍏 Apple HIG 準拠: ピルボタンの接触領域を最低44px×44pxに完全保証 */
.sometimes-pill-btn::after,
.nido-pill-btn::after {
  content: '';
  position: absolute;
  top: -4px;
  bottom: -4px;
  left: -4px;
  right: -4px;
}

.sometimes-pill-btn:hover,
.nido-pill-btn:hover {
  background: var(--pill-btn-hover-bg, #e2e8f0);
  border-color: var(--pill-btn-hover-border, #cbd5e1);
  color: var(--pill-btn-hover-color, #0f172a);
  transform: translateY(-1px);
  box-shadow: 0 3px 8px rgba(0, 0, 0, 0.08);
}

.sometimes-pill-btn:active,
.nido-pill-btn:active {
  transform: scale(var(--pill-btn-active-scale, 0.94));
  box-shadow: 0 1px 2px rgba(0, 0, 0, 0.04);
}

.text-button {
  background: transparent;
  border: none;
  color: var(--text-muted);
  font-size: 1rem;
  cursor: pointer;
  padding: 4px 8px;
  border-radius: 4px;
  transition: var(--transition);
  font-family: 'Inter', sans-serif;
  text-decoration: underline;
  text-underline-offset: 3px;
  text-decoration-color: rgba(0, 0, 0, 0.1);
}

.text-button:hover {
  color: var(--accent-blue);
  background: rgba(0, 0, 0, 0.02);
  text-decoration-color: var(--accent-blue);
}


.matrix-container {
  display: grid;
  grid-template-columns: 1fr 1fr;
  grid-template-rows: auto auto;
  gap: 16px;
}

.matrix-quadrant {
  background: white;
  border-radius: var(--border-radius);
  min-height: 250px;
  border: 2px dashed #ddd;
  display: flex;
  flex-direction: column;
}

.quadrant-header {
  padding: 8px 14px;
  font-weight: var(--font-weight-semibold, 600);
  font-size: var(--font-size-quadrant-title, 0.875rem);
  letter-spacing: 0.01em;
  line-height: 1.35;
  border-radius: var(--border-radius) var(--border-radius) 0 0;
  display: flex;
  align-items: center;
  min-height: 44px;
  cursor: pointer;
  user-select: none;
  -webkit-user-select: none;
}


.Q1 {
  border-color: var(--q1-border);
  background-color: var(--q1-bg);
}

.Q1 .quadrant-header {
  background: var(--q1-bg);
  color: var(--q1-accent);
}

.Q2 {
  border-color: var(--q2-border);
  background-color: var(--q2-bg);
}

.Q2 .quadrant-header {
  background: var(--q2-bg);
  color: var(--q2-accent);
}

.Q3 {
  border-color: var(--q3-border);
  background-color: var(--q3-bg);
}

.Q3 .quadrant-header {
  background: var(--q3-bg);
  color: var(--q3-accent);
}

.Q4 {
  border-color: var(--q4-border);
  background-color: var(--q4-bg);
}

.Q4 .quadrant-header {
  background: var(--q4-bg);
  color: var(--q4-accent);
}

/* --- 6. タスクアイテム --- */
.task-list {
  flex: 1;
  padding: 2px 8px 16px 8px;
  overflow-y: auto;
  min-height: 60px;
}

/* 💡 各象限の1行分空白スロット（タップしてタスク追加できる透明な余白エリア） */
.quadrant-blank-add-trigger {
  min-height: 42px;
  margin: 6px 12px 8px 12px;
  border-radius: 12px;
  border: none !important;
  background: transparent !important;
  display: flex;
  align-items: center;
  justify-content: flex-start;
  padding: 0 14px;
  cursor: pointer;
  user-select: none;
  -webkit-user-select: none;
  box-sizing: border-box;
}

.inline-task-input-row {
  margin: 8px 12px 12px 12px !important;
  padding: 8px 12px 8px 16px !important;
  background: #ffffff !important;
  border: 1.5px solid var(--accent-blue, #6366f1) !important;
  border-radius: 14px !important;
  box-shadow: 0 4px 16px rgba(99, 102, 241, 0.16) !important;
  display: flex !important;
  align-items: center !important;
  gap: 10px !important;
  box-sizing: border-box !important;
  min-height: 48px !important;
}

.inline-quadrant-input {
  flex: 1 !important;
  border: none !important;
  outline: none !important;
  box-shadow: none !important;
  background: transparent !important;
  font-size: 16px !important; /* 🚀 iOS Safariの自動ズームインを根本防止 */
  font-family: inherit !important;
  font-weight: 600 !important;
  color: #1e293b !important;
  padding: 6px 0 !important;
  min-width: 0 !important;
  line-height: 1.4 !important;
  -webkit-text-size-adjust: 100% !important;
}

.inline-quadrant-input:focus,
.inline-quadrant-input:focus-visible {
  outline: none !important;
  box-shadow: none !important;
  border: none !important;
}

.inline-quadrant-submit-btn {
  background: var(--primary-btn-bg, var(--theme-color)) !important;
  color: var(--primary-btn-text, #ffffff) !important;
  border: 1px solid rgba(15, 23, 42, 0.12) !important;
  border-radius: 10px !important;
  padding: 7px 16px !important;
  font-size: 14px !important;
  font-weight: 800 !important;
  cursor: pointer !important;
  white-space: nowrap !important;
  flex-shrink: 0 !important;
  box-shadow: 0 2px 6px rgba(var(--theme-rgb), 0.2) !important;
  transition: transform 0.12s ease, filter 0.12s ease !important;
}

.inline-quadrant-submit-btn:hover {
  filter: brightness(0.96) !important;
  transform: translateY(-1px) !important;
}

.inline-quadrant-submit-btn:active {
  transform: scale(0.95) !important;
}

.inline-quadrant-cancel-btn {
  background: transparent !important;
  color: #94a3b8 !important;
  border: none !important;
  font-size: 20px !important;
  font-weight: bold !important;
  cursor: pointer !important;
  padding: 4px 8px !important;
  line-height: 1 !important;
  flex-shrink: 0 !important;
  border-radius: 8px !important;
  transition: color 0.15s ease, background-color 0.15s ease !important;
}

.inline-quadrant-cancel-btn:hover {
  color: #64748b !important;
  background-color: rgba(15, 23, 42, 0.05) !important;
}

.task-main-content,
.task-meta-actions {
  display: contents;
}

.task-card {
  background: white;
  border: 1px solid rgba(0, 0, 0, 0.05);
  border-radius: 12px;
  margin: 6px 12px 10px 12px;
  padding: 12px 18px;
  display: grid !important;
  grid-template-columns: 1fr auto !important; /* 2カラム（タイトルエリア ＋ 右下アクション） */
  grid-template-rows: auto !important;
  gap: 6px 12px !important;
  align-items: center !important;
  box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.05), 0 2px 4px -1px rgba(0, 0, 0, 0.03);
  transition: transform 0.22s cubic-bezier(0.16, 1, 0.3, 1), box-shadow 0.22s ease, border-color 0.22s ease, background-color 0.22s ease !important;
  cursor: grab; /* カード全体をどこでも掴んで並べ替え可能 */
  position: relative;
  overflow: visible !important; /* 絶対配置のバッジがはみ出せるように */
  user-select: none;
  -webkit-user-select: none;
  -moz-user-select: none;
  -ms-user-select: none;
}

.task-card:active {
  cursor: grabbing;
}

.task-card:hover {
  transform: translateY(-2px) !important;
  box-shadow: 0 12px 24px rgba(var(--theme-rgb), 0.12), 0 4px 8px rgba(0, 0, 0, 0.04) !important;
  border-color: rgba(var(--theme-rgb), 0.3) !important;
}

/* 🎯 削除ボタンホバー時はカードの浮き上がりを抑制し、ボタンがカーソルの下で逃げるブレ・揺れを防止 */
.task-card:has(.nido-delete-btn:hover),
.task-card:has(.task-delete-btn:hover) {
  transform: none !important;
}

.task-card.dragging {
  opacity: 0.5;
  background: #f0f0f0;
  cursor: grabbing;
}

.drag-handle {
  grid-row: 1 / span 2 !important;
  grid-column: 1 !important;
  color: #ccc;
  cursor: grab;
  font-size: 1.2rem;
  padding-right: 4px;
  display: flex;
  align-items: center;
  user-select: none;
  touch-action: none; /* モバイルドラッグ時にブラウザスクロールを完全に停止し、完璧に連動させる */
}

/* デフォルト（PC・iPadなど多次元グリッド移動時）: 2Dドラッグを表す ⠿ (dots) */
.drag-handle::before {
  content: "⠿";
}

.drag-handle:active {
  cursor: grabbing;
}

.task-title {
  grid-row: 1 / span 2 !important;
  grid-column: 2 !important;
  font-weight: bold;
  font-size: 1rem;
  white-space: pre-wrap;
  overflow-wrap: break-word;
  word-break: break-word;
  line-height: 1.4;
  margin: 4px 0;
  text-align: left;
}

/* 着手札 着手中バッジのスタイルをPC版で最適化（期限バッジと高さ・文字サイズ・枠線構造を完璧に揃える） */
.task-card .progress-badge {
  position: absolute !important;
  top: -8px !important;
  left: 8px !important;
  font-size: 0.875rem !important; /* 9px から 0.72rem (約11.5px) に拡大 */
  font-weight: 700 !important; /* 太さを700に統一 */
  padding: 2px 8px !important;
  border-radius: 20px !important;
  border: 1px solid #d97706 !important; /* 枠線を設けて期限バッジと高さを完全一致させる */
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  gap: 2px !important;
  box-sizing: border-box !important;
  height: 20px !important; /* 高さを20pxに完全固定 */
  line-height: 1 !important;
}

.task-card .task-deadline {
  position: absolute !important;
  top: -8px !important;
  left: 8px !important; /* 左寄せ */
  right: auto !important;
  margin-left: 0 !important; /* 2779行目の余白干渉を完全に抹殺する */
  z-index: 10 !important;
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  gap: 3px !important;
  font-size: 0.875rem !important;
  color: #ef4444 !important;
  background: #fef2f2 !important;
  border: 1px solid rgba(239, 68, 68, 0.2) !important;
  font-weight: 700 !important;
  white-space: nowrap !important;
  padding: 2px 8px !important;
  border-radius: 20px !important;
  box-shadow: 0 2px 6px rgba(239, 68, 68, 0.15) !important;
  box-sizing: border-box !important;
  height: 20px !important; /* 高さを20pxに完全固定 */
}

/* WIP(着手中)バッジもある場合は、そのすぐ右隣にピタッと寄せる */
.task-card:has(.progress-badge) .task-deadline {
  left: 68px !important; /* 78px から 68px に縮めて不要な空白を完全消去 */
}

/* 着手札 右下のピル・アクションボタンを綺麗に2段で分けるための箱（コンテナ） */
.task-card .task-right-meta-block {
  grid-column: 3 !important;
  grid-row: 1 / span 2 !important;
  align-self: end !important; /* 下寄せ固定 */
  display: flex !important;
  flex-direction: column !important;
  gap: 6px !important;
  width: 136px !important; /* ピル幅60px + 隙間8px + ボタン幅68px = 136px 固定で完全に揃える */
}

/* 着手札 1行あたりのフレックスレイアウト（見積・編集コピー、実績+できたボタン） */
.task-card .task-meta-row {
  display: flex !important;
  align-items: center !important;
  justify-content: space-between !important; /* 両端寄せにして上下の長さを完全に一致させる */
  width: 100% !important;
  height: 24px !important;
}

.task-estimate-container,
.task-actual-container {
  display: flex !important;
  align-items: center !important;
  justify-content: flex-start !important;
  width: 60px !important; /* 幅を60pxに完全固定 */
  min-width: 60px !important;
  flex-shrink: 0 !important;
}

/* 着手札 ピルのスタイリングをPC版にも追加（PC版の崩れを完全に防ぐ） */
.task-card .task-time-pill {
  display: inline-flex !important;
  align-items: center !important;
  font-size: 0.875rem !important;
  font-weight: 600 !important;
  padding: 2px 6px !important;
  border-radius: 8px !important;
  white-space: nowrap !important;
  height: 20px !important;
  border-width: 1px !important;
  box-sizing: border-box !important;
}

.task-card .task-time-pill.estimate {
  background: var(--accent-blue-light) !important;
  color: var(--accent-blue) !important;
  border: 1px solid rgba(var(--theme-rgb, 15, 23, 42), 0.15) !important;
}

.task-card .task-time-pill.actual {
  background: rgba(16, 185, 129, 0.05) !important;
  color: #10b981 !important;
  border: 1px solid rgba(16, 185, 129, 0.15) !important;
}

/* PC版ダークモード用ピル */
body.dark-mode .task-card .task-time-pill.estimate,
body.theme-universal-dark .task-card .task-time-pill.estimate {
  background: #334155 !important;
  color: #cbd5e1 !important;
  border-color: #475569 !important;
}

body.dark-mode .task-card .task-time-pill.actual,
body.theme-universal-dark .task-card .task-time-pill.actual {
  background: rgba(16, 185, 129, 0.15) !important;
  color: #34d399 !important;
  border-color: rgba(16, 185, 129, 0.3) !important;
}

.task-actions-r2,
.task-actions-r3 {
  display: flex !important;
  align-items: center !important;
  gap: 0 !important;
  width: var(--btn-task-action-width, 78px) !important;
  justify-content: flex-end !important;
}

.action-slot {
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  height: 24px !important;
}

.action-slot.slot-1 {
  width: 28px !important;
  flex-shrink: 0 !important;
}

.action-slot.slot-2 {
  width: 28px !important;
  flex-shrink: 0 !important;
}

.action-slot.slot-3 {
  width: var(--btn-task-action-width, 78px) !important;
  height: var(--btn-task-action-height, 30px) !important;
  flex-shrink: 0 !important;
}

.task-card .complete-check-btn {
  width: var(--btn-task-action-width, 78px) !important;
  height: var(--btn-task-action-height, 30px) !important;
  padding: 0 10px !important;
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  font-size: var(--btn-task-action-font-size, 0.875rem) !important;
  font-weight: 700 !important;
  line-height: var(--btn-line-height, 1) !important;
  font-family: var(--btn-font-family, inherit) !important;
  border-radius: var(--btn-task-action-radius, 8px) !important;
  margin: 0 !important;
  box-sizing: border-box !important;
  cursor: pointer !important;
  position: relative !important; /* 🍏 44pxタップターゲット基準確保のための配置コンテキスト */
  transition: all 0.2s ease !important;
}

/* 🍏 Apple HIG 44px タップ判定領域：スリムな30px高さを維持しながら透明疑似要素で44px×44px以上を保証 */
.task-card .complete-check-btn::before {
  content: '';
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  min-width: 44px;
  min-height: 44px;
  width: 100%;
  height: 100%;
  border-radius: inherit;
  pointer-events: auto;
}

.task-card .complete-check-btn:hover {
  transform: scale(1.05) !important;
  filter: brightness(1.1) !important;
  box-shadow: var(--primary-btn-hover-shadow, 0 2px 8px rgba(0, 0, 0, 0.15)) !important;
}

/* 🔲 システム共通モーダル閉じる「×」ボタン (Shared Modal Close Button System) */
/* 通常時：背景・枠は完全非表示。グレーの × のみ表示。ホバーで赤へfade。タップ時opacity変化のみ（沈み込みなし） */
.nido-modal-close-btn {
  background: transparent !important;
  border: none !important;
  color: #64748b; /* WCAG AA 4.6:1 準拠 */
  cursor: pointer;
  width: 32px;
  height: 32px;
  border-radius: 50%;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font-size: 1.4rem;
  line-height: 1;
  padding: 0;
  transition: color 0.18s ease, opacity 0.12s ease;
  touch-action: manipulation;
  position: relative;
  flex-shrink: 0;
}

/* 🎯 タップ当たり判定の拡大（見た目32px、HIG準拠44px × 44px確保） */
.nido-modal-close-btn::before {
  content: '';
  position: absolute;
  top: -6px;
  bottom: -6px;
  left: -6px;
  right: -6px;
}

.nido-modal-close-btn:hover {
  color: #dc2626; /* WCAG AA 4.9:1 準拠 */
  background: transparent !important;
}

.nido-modal-close-btn:active {
  opacity: 0.55 !important;
  transform: none !important;
}

/* Dark mode */
body.dark-mode .nido-modal-close-btn,
body.theme-universal-dark .nido-modal-close-btn {
  color: #94a3b8; /* Dark背景に対して 5.3:1 (WCAG AA) */
}

body.dark-mode .nido-modal-close-btn:hover,
body.theme-universal-dark .nido-modal-close-btn:hover {
  color: #f87171; /* Dark背景に対して 4.8:1 (WCAG AA) */
}

/* 📌 モーダル右上の角に絶対配置する共通ヘルパークラス (Corner Close Button Placement) */
.nido-modal-corner-close {
  position: absolute !important;
  top: 16px !important;
  right: 16px !important;
  z-index: 20 !important;
}

/* 🔴 システム共通円形削除ボタン (Shared Circular Delete Button System) */
.nido-delete-btn {
  width: var(--delete-btn-size, 18px) !important;
  height: var(--delete-btn-size, 18px) !important;
  min-width: var(--delete-btn-size, 18px) !important;
  min-height: var(--delete-btn-size, 18px) !important;
  max-width: var(--delete-btn-size, 18px) !important;
  max-height: var(--delete-btn-size, 18px) !important;
  aspect-ratio: 1 / 1 !important;
  flex-shrink: 0 !important;
  border-radius: 50% !important;
  background: var(--delete-btn-bg, transparent) !important;
  color: var(--delete-btn-color, #64748b) !important; /* WCAG AA 4.6:1 準拠 */
  border: none !important;
  cursor: pointer !important;
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  font-size: 14px !important;
  font-weight: bold !important;
  line-height: 1 !important;
  padding: 0 !important;
  transition: background 0.2s cubic-bezier(0.16, 1, 0.3, 1), color 0.18s ease, opacity 0.12s ease !important;
  user-select: none !important;
  touch-action: manipulation !important;
  position: relative;
}

/* 🎯 タップ領域の拡大（見た目18px、HIG準拠44px × 44px確保） */
.nido-delete-btn::before {
  content: '' !important;
  position: absolute !important;
  top: -13px !important;
  bottom: -13px !important;
  left: -13px !important;
  right: -13px !important;
}

.nido-delete-btn:hover {
  background: var(--delete-btn-hover-bg, transparent) !important;
  color: var(--delete-btn-hover-color, #dc2626) !important; /* WCAG AA 4.9:1 準拠 */
  transform: none !important;
}

.nido-delete-btn:active {
  opacity: 0.55 !important;
  transform: none !important;
}

/* タスクカード固有の配置・サイズ (PC・共通 24px × 24px, ×フォント 16px, HIG 44px) */
.task-card .nido-delete-btn,
.task-card .task-delete-btn,
.task-card .circular-delete-btn {
  position: absolute !important;
  top: 6px !important;
  right: 6px !important;
  width: 24px !important;
  height: 24px !important;
  min-width: 24px !important;
  min-height: 24px !important;
  max-width: 24px !important;
  max-height: 24px !important;
  font-size: 16px !important;
  line-height: 1 !important;
  z-index: 15 !important;
  touch-action: manipulation !important;
}

/* 🎯 タップ領域の拡大（見た目24px、Apple HIG準拠 44px × 44px 接触領域確保: 24 + 10*2 = 44px） */
.task-card .nido-delete-btn::before,
.task-card .task-delete-btn::before,
.task-card .circular-delete-btn::before,
.circular-delete-btn::before {
  content: '' !important;
  position: absolute !important;
  top: -10px !important;
  bottom: -10px !important;
  left: -10px !important;
  right: -10px !important;
}

/* Dark mode */
body.dark-mode .nido-delete-btn,
body.theme-universal-dark .nido-delete-btn {
  background: transparent !important;
  color: #94a3b8 !important; /* Dark背景に対して 5.3:1 (WCAG AA) */
}

body.dark-mode .nido-delete-btn:hover,
body.theme-universal-dark .nido-delete-btn:hover {
  background: transparent !important;
  color: #f87171 !important; /* Dark背景に対して 4.8:1 (WCAG AA) */
}

.task-card.completed {
  opacity: 0.65;
  background-color: #f4f3f0;
  animation: completeGlow 1.2s cubic-bezier(0.25, 1, 0.5, 1) forwards;
}

@keyframes completeGlow {
  0% {
    border-color: #22c55e !important;
    box-shadow: 0 0 16px rgba(34, 197, 94, 0.4), var(--shadow-sm) !important;
    background-color: #f0fdf4 !important;
    transform: scale(1.02);
  }
  30% {
    border-color: #22c55e !important;
    box-shadow: 0 0 20px rgba(34, 197, 94, 0.25), var(--shadow-sm) !important;
    background-color: #f0fdf4 !important;
  }
  100% {
    border-color: rgba(0, 0, 0, 0.04) !important;
    box-shadow: var(--shadow-sm) !important;
    background-color: #f4f3f0 !important;
    transform: scale(1);
  }
}

/* ダークモード時の「できた！」の背景色 */
body.dark-mode .task-card.completed,
body.theme-universal-dark .task-card.completed {
  background-color: #0f172a;
  animation: completeGlowDark 1.2s cubic-bezier(0.25, 1, 0.5, 1) forwards;
}

@keyframes completeGlowDark {
  0% {
    border-color: #4ade80 !important;
    box-shadow: 0 0 20px rgba(74, 222, 128, 0.35), 0 4px 12px rgba(0, 0, 0, 0.25) !important;
    background-color: #062f1d !important;
    transform: scale(1.02);
  }
  30% {
    border-color: #4ade80 !important;
    box-shadow: 0 0 24px rgba(74, 222, 128, 0.2), 0 4px 12px rgba(0, 0, 0, 0.25) !important;
    background-color: #062f1d !important;
  }
  100% {
    border-color: rgba(255, 255, 255, 0.05) !important;
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.25) !important;
    background-color: #0f172a !important;
    transform: scale(1);
    opacity: 0.45;
  }
}

.task-title {
  cursor: pointer;
  transition: color 0.15s ease;
}

.task-card:not(.completed) .task-title:hover {
  color: var(--accent-blue, #6366f1);
}

.task-card.completed .task-title {
  text-decoration: line-through;
  cursor: default;
}

/* --- 7. 入力フォーム・ボタン --- */
.task-entry {
  display: flex;
  gap: 12px;
  align-items: flex-end;
  /* 下（入力欄）で揃える */
  flex-wrap: wrap;
  padding-bottom: 4px;
}

.input-field-group {
  display: flex;
  flex-direction: column;
  gap: 4px;
}

.input-field-group label {
  font-size: 14px;
  /* ラベルを小さい */
  color: var(--text-muted);
  font-weight: 500;
  white-space: nowrap;
}

.input-row {
  display: flex;
  gap: 4px;
  align-items: center;
}

input[type="text"],
input[type="number"],
input[type="date"],
select,
textarea {
  padding: 6px 10px;
  border: 1px solid #e2e8f0;
  border-radius: 8px;
  font-size: var(--font-size-min-input, 1rem);
  background-color: white;
  color: var(--text-main);
  outline: none;
  transition: border-color 0.2s;
}

/* 💡 ドロップダウン（セレクト）は清潔感のある真っ白（#ffffff）に固定し、枠線などでテーマ色をほのかに反映 */
select {
  background-color: #ffffff !important;
  color: var(--text-main) !important;
  border: 1px solid rgba(0, 0, 0, 0.1) !important;
}

select:focus {
  outline: none;
  border-color: var(--theme-color) !important;
  box-shadow: 0 0 0 3px rgba(var(--theme-rgb, 15, 23, 42), 0.15);
}

input:focus,
select:focus,
textarea:focus {
  border-color: var(--accent-blue);
}

#taskTitleInput {
  flex: 1;
  min-width: 200px;
  margin-bottom: 0;
  height: 42px;
  line-height: 20px;
  padding: 10px 14px;
  box-sizing: border-box;
}


.add-task-bar .icon-button {
  min-width: 30px;
  min-height: 30px;
  display: flex;
  align-items: center;
  justify-content: center;
  background: transparent;
  border: none;
  cursor: pointer;
  transition: transform 0.2s;
}

.add-task-bar .icon-button:hover {
  transform: scale(1.1);
}

/* 💡 プライマリーボタン（追加ボタンなど）はテーマカラーで美しく塗りつぶし、所有感を高める */
.primary-button {
  background-color: var(--primary-btn-bg, var(--theme-color)) !important;
  color: var(--primary-btn-text, var(--theme-text-color)) !important;
  border: var(--primary-btn-border, 1px solid rgba(15, 23, 42, 0.15)) !important;
  padding: 10px 24px;
  border-radius: var(--border-radius);
  cursor: pointer;
  font-weight: bold;
  box-shadow: var(--primary-btn-shadow, 0 2px 6px rgba(15, 23, 42, 0.12), 0 1px 2px rgba(0, 0, 0, 0.05)) !important;
  transition: all 0.2s cubic-bezier(0.16, 1, 0.3, 1);    
}

.primary-button:hover, .primary-button:focus {
  filter: brightness(0.96) !important;
  box-shadow: var(--primary-btn-hover-shadow, 0 4px 12px rgba(var(--theme-rgb, 15, 23, 42), 0.25), 0 2px 4px rgba(0, 0, 0, 0.1)) !important;
  transform: translateY(-1px) !important;
}

.primary-button:active {
  transform: translateY(0) !important;
  filter: brightness(0.92) !important;
  box-shadow: var(--primary-btn-active-shadow, 0 2px 4px rgba(0, 0, 0, 0.08)) !important;
}


/* --- 8. サイドコンテンツ --- */
.shared-timer-display {
  font-size: 36px;
  /* 全体を縮小 */
  display: flex;
  justify-content: center;
  align-items: center;
  gap: 2px;
  font-family: 'Outfit', sans-serif;
  font-variant-numeric: tabular-nums;
  font-weight: 400;
  margin: 16px 0;
  color: var(--accent-blue);
  overflow: hidden;
  transition: background 0.3s, color 0.3s, box-shadow 0.3s, padding 0.3s;
  cursor: default;
  user-select: none;
  -webkit-user-select: none;
  -moz-user-select: none;
  -ms-user-select: none;
}

.shared-timer-display.overrun {
  color: #f43f5e !important; /* プレミアムな温かみのあるローズレッド */
  background: rgba(244, 63, 94, 0.06);
  border-radius: 12px;
  box-shadow: inset 0 0 10px rgba(244, 63, 94, 0.1);
  padding: 6px 16px;
  animation: overrunPulse 2s infinite ease-in-out;
}

@keyframes overrunPulse {
  0%, 100% {
    background: rgba(244, 63, 94, 0.06);
    box-shadow: inset 0 0 10px rgba(244, 63, 94, 0.1);
  }
  50% {
    background: rgba(244, 63, 94, 0.12);
    box-shadow: inset 0 0 15px rgba(244, 63, 94, 0.2);
  }
}


.timer-digit-col span,
.timer-separator {
  font-family: 'Outfit', sans-serif;
  font-variant-numeric: tabular-nums;
  font-weight: 400;
}

.timer-digit-col {
  height: 44px;
  width: 22px;
  /* 背景がないので少し幅を詰める */
  overflow: hidden;
  position: relative;
  background: transparent;
  /* 背景をなしに */
  display: flex;
  justify-content: center;
}


/* 秒数を一回り小さく、ごく控えめにする */
.timer-digit-col.sec {
  opacity: 0.30;
  width: 22px;
}


.timer-digit-col.sec span {
  font-size: 0.7em;
  /* 重なり防止は維持 */
}


.timer-digit-col span {
  position: absolute;
  display: block;
  width: 100%;
  text-align: center;
  line-height: 44px;
  /* 高さにあわせる */
  transition: transform 0.15s ease-out;
  /* 滑らかにスライド */
}

.timer-separator {
  line-height: 44px;
  padding: 0 4px;
  font-size: 24px;
  opacity: 0.4;
}


.timer-separator.running {
  animation: breathe 16s cubic-bezier(0.4, 0, 0.2, 1) infinite;
  color: var(--accent-blue);
}

@keyframes breathe {
  0%,
  100% {
    opacity: 0.3;
    transform: scale(1);
  }

  37.5% {
    opacity: 0.8;
    filter: drop-shadow(0 0 8px rgba(29, 53, 87, 0.3));
    transform: scale(1);
  }
}


.timer-buttons {
  display: flex;
  justify-content: center;
  gap: 20px;
  /* 上辺に間隔を開ける */
  margin-top: 20px;
}

.start-button,
.stop-button,
.reset-button,
.complete-button {
  width: 58px !important;
  /* タップターゲットを保証しつつ他のボタンと調和する58px角 */
  height: 58px !important;
  min-height: 58px !important;
  border-radius: 12px !important;
  /* 着手札 丸ではなく、他のカードやボタンと調和する上品な角丸四角形 */
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  padding: 0 !important;
  cursor: pointer !important;
  transition: all 0.2s cubic-bezier(0.4, 0, 0.2, 1) !important;
  box-shadow: 0 4px 10px rgba(0, 0, 0, 0.08) !important;
  background: #ffffff !important;
  /* 基本はクリーンな白背景（ミニマル） */
  border: 2px solid #cbd5e1 !important;
  /* 着手札 統一された上品なスレートグレーの細枠線 */
  color: #64748b !important;
  /* 着手札 アイコン色は上品なスレートグレーで統一 */
  flex: none !important;
  /* 頑なにフレックスから独立 */
}

/* 着手札 完了ボタン固有の爽やかミントグリーン色 */
.complete-button {
  border-color: #bbf7d0 !important;
  color: #22c55e !important;
  box-shadow: 0 4px 10px rgba(34, 197, 94, 0.08) !important;
}

/* 着手札 完了ボタンが無効化（disabled）されているときの洗練されたグレーアウト配色 */
.complete-button:disabled {
  background-color: #F4F5F7 !important;
  border-color: #e2e8f0 !important;
  color: #cbd5e1 !important;
  cursor: not-allowed !important;
  transform: none !important;
  box-shadow: none !important;
  opacity: 0.65 !important;
}

/* 中のSVGアイコンを極太でデカデカと大きくする */
.timer-buttons button svg {
  width: 26px !important;
  /* アイコンサイズを26pxに巨大化して四角の中にバランスよく収める */
  height: 26px !important;
  stroke-width: 3px !important;
  /* 線の太さも3pxに強化して視認性アップ */
  margin: 0 !important;
}

/* 視覚補助用のテキストはCSSで完全に非表示にする。JSがテキストを書き換えてもSVGが壊れないスマート解決 */
.timer-buttons button .btn-text {
  display: none !important;
}

/* --- 全ボタン共通のホバーアクション：スレートグレー背景に白アイコンの極上反転 --- */
.start-button:hover,
.stop-button:hover,
.reset-button:hover {
  background-color: #64748b !important;
  border-color: #64748b !important;
  color: #ffffff !important;
  transform: translateY(-2px) !important;
  /* 上にスッと少し持ち上がる心地よいホバー */
  box-shadow: 0 6px 14px rgba(100, 116, 139, 0.2) !important;
}

/* 着手札 完了ボタンの極上ホバー：グリーン背景に白アイコンの反転 */
.complete-button:hover {
  background-color: #22c55e !important;
  border-color: #22c55e !important;
  color: #ffffff !important;
  transform: translateY(-2px) !important;
  box-shadow: 0 6px 14px rgba(34, 197, 94, 0.25) !important;
}

/* ダークモード時の背景色調整 (深みチャコールに完全に調和) */
body.dark-mode .start-button,
body.dark-mode .stop-button,
body.dark-mode .reset-button,
body.theme-universal-dark .start-button,
body.theme-universal-dark .stop-button,
body.theme-universal-dark .reset-button {
  background: #1e293b !important;
  border-color: #475569 !important;
  /* ダークに馴染む落ち着いたスレートグレー線 */
  color: #94a3b8 !important;
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.25) !important;
}

/* 着手札 ダークモード時の完了ボタンの落ち着いた配色 */
body.dark-mode .complete-button,
body.theme-universal-dark .complete-button {
  background: #1e293b !important;
  border-color: #064e3b !important; /* 深いフォレストグリーンの境界線 */
  color: #4ade80 !important; /* 目に優しいネオングリーン */
}

/* 着手札 ダークモード時の完了ボタンが無効化（disabled）されているときの配色 */
body.dark-mode .complete-button:disabled,
body.theme-universal-dark .complete-button:disabled {
  background: #0f172a !important;
  border-color: #1e293b !important;
  color: #334155 !important;
  box-shadow: none !important;
  opacity: 0.45 !important;
}

/* ダークモード時の完了ボタンのホバーアクション */
body.dark-mode .complete-button:hover,
body.theme-universal-dark .complete-button:hover {
  background-color: #22c55e !important;
  border-color: #22c55e !important;
  color: #0f172a !important; /* アイコンをダークネイビーにして明瞭に */
  box-shadow: 0 6px 16px rgba(34, 197, 94, 0.3) !important;
}

/* ダークモード時のホバーアクション：反転時の背景と枠を明るめのスレートグレーに */
body.dark-mode .start-button:hover,
body.dark-mode .stop-button:hover,
body.dark-mode .reset-button:hover,
body.theme-universal-dark .start-button:hover,
body.theme-universal-dark .stop-button:hover,
body.theme-universal-dark .reset-button:hover {
  background-color: #94a3b8 !important;
  border-color: #94a3b8 !important;
  color: #0f172a !important;
  /* アイコンを深いネイビーに反転して明瞭に */
  box-shadow: 0 6px 16px rgba(148, 163, 184, 0.25) !important;
}


.timer-digit-col .prev-digit {
  transform: translateY(-100%);
}

.timer-digit-col .curr-digit {
  transform: translateY(0);
}

.timer-digit-col .next-digit {
  transform: translateY(100%);
}

/* カレンダーヘッダーレイアウト */
.calendar-header-layout {
  display: flex;
  flex-direction: column;
  /* 縦並びに変更 */
  align-items: center;
  gap: 8px;
  /* 要素間の隙間 */
  width: 100%;
  margin-bottom: 20px;
}

.calendar-title-group {
  display: flex;
  align-items: center;
  gap: 16px;
}

.calendar-title {
  margin: 0;
  text-align: center;
  font-family: 'Outfit', sans-serif;
  font-size: 1.2rem;
  font-weight: 700;
  color: var(--accent-blue);
  min-width: 140px;
}

.calendar-title-group .icon-button {
  width: 36px;
  height: 36px;
  display: flex;
  align-items: center;
  justify-content: center;
  background: var(--accent-blue-light);
  border: none;
  border-radius: 10px;
  cursor: pointer;
  color: #475569;
  /* シックなグラファイトグレーを基本色に */
  transition: var(--transition);
}

.calendar-title-group .icon-button:hover {
  color: var(--accent-blue);
  /* ホバー時にテーマカラーに上品に変化 */
  background: #e2e8f0;
  transform: scale(1.05);
}

.calendar-date-nav-group {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  width: 100%;
}

.calendar-date-nav-group .date-nav-btn {
  width: 28px;
  height: 28px;
  position: relative;
  display: flex;
  align-items: center;
  justify-content: center;
  background: var(--accent-blue-light, #f1f5f9);
  border: 1px solid rgba(15, 23, 42, 0.08);
  border-radius: 8px;
  cursor: pointer;
  color: #475569;
  font-size: 14px;
  font-weight: 700;
  transition: var(--transition);
}

/* Apple HIG 44px タッチ判定領域の確保（透明疑似要素） */
.calendar-date-nav-group .date-nav-btn::before {
  content: '';
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  min-width: 44px;
  min-height: 44px;
  width: 100%;
  height: 100%;
}

.calendar-date-nav-group .date-nav-btn:hover {
  background: #e2e8f0;
  color: var(--accent-blue, #2563eb);
  transform: scale(1.05);
}

.calendar-date-nav-group .today-button {
  padding: 5px 14px;
  font-size: 14px;
  font-weight: 800;
  position: relative;
  border-radius: 8px;
  border: 1px solid #e2e8f0;
  background: #fff;
  cursor: pointer;
  color: var(--text-main);
  transition: var(--transition);
}

/* Apple HIG 44px タッチ判定領域の確保（透明疑似要素） */
.calendar-date-nav-group .today-button::before {
  content: '';
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  min-width: 44px;
  min-height: 44px;
  width: 100%;
  height: 100%;
}

.calendar-date-nav-group .today-button:hover {
  background: var(--accent-blue, #2563eb);
  color: white;
  border-color: var(--accent-blue, #2563eb);
}

.calendar-date-nav-group .today-button.has-return-today {
  background: var(--accent-blue-light, #eff6ff);
  color: var(--accent-blue, #2563eb);
  border-color: rgba(37, 99, 235, 0.25);
  box-shadow: 0 1px 4px rgba(37, 99, 235, 0.12);
}

/* カレンダーグリッド */
.calendar-grid {
  display: grid;
  grid-template-columns: repeat(7, 1fr);
  gap: 4px;
}

.calendar-dow {
  font-family: 'Outfit', sans-serif;
  font-size: 14px;
  font-weight: 700;
  text-transform: uppercase;
  color: var(--text-muted);
  padding-bottom: 8px;
  text-align: center;
}

.calendar-day {
  aspect-ratio: 1;
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  border-radius: 10px;
  transition: transform 0.25s cubic-bezier(0.175, 0.885, 0.32, 1.275), background-color 0.2s, box-shadow 0.2s;
  position: relative;
  /* 気分マークの基準点 */
}


.calendar-day:hover {
  background: var(--accent-blue-light);
  transform: translateY(-2px) scale(1.04);
  box-shadow: 0 4px 10px rgba(15, 23, 42, 0.05);
}

.day-number {
  font-size: 14px;
  font-weight: 500;
  width: 32px;
  height: 32px;
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: 50%;
}

.calendar-day.today .day-number {
  color: #ef4444;
  font-weight: 800;
  text-decoration: underline;
}

.calendar-day.selected .day-number {
  background: var(--theme-color) !important;
  color: var(--theme-text-color) !important;
  font-weight: 700;
  border: 1px solid rgba(0, 0, 0, 0.05) !important;
  box-shadow: 0 0 0 2px #ffffff, 0 2px 8px rgba(15, 23, 42, 0.25) !important;
}

/* --- 10. メモ機能のスタイル --- */
#dailyNoteInput {
  width: 100%;
  min-height: 140px;
  padding: 16px;
  border: 1px solid #e2e8f0;
  border-radius: 16px;
  font-family: inherit;
  font-size: 1rem;
  line-height: 1.6;
  resize: vertical;
  transition: var(--transition);
  outline: none;
  background: white;
}

#dailyNoteInput:focus {
  border-color: var(--accent-blue);
  box-shadow: 0 0 0 3px rgba(29, 53, 87, 0.05);
}

#dailyNoteDisplay {
  width: 100%;
  min-height: 140px;
  padding: 16px;
  background: #fcfcfc;
  border: 1px solid #f1f5f9;
  border-radius: 16px;
  font-size: 1rem;
  color: var(--text-main);
  line-height: 1.6;
  white-space: pre-wrap;
  word-break: break-word;
}


/* スクロールバー */
::-webkit-scrollbar {
  width: 8px;
}

::-webkit-scrollbar-track {
  background: transparent;
}

::-webkit-scrollbar-thumb {
  background: #e2e8f0;
  border-radius: 10px;
}

::-webkit-scrollbar-thumb:hover {
  background: #cbd5e1;
}

/* その他 */
.member-manage-item {
  display: flex;
  align-items: center;
  background: var(--accent-blue-light);
  padding: 6px 14px;
  border-radius: 20px;
  font-size: 0.875rem;
  color: var(--accent-blue);
  font-weight: 600;
}

.member-manage-item .delete-member-x {
  margin-left: 2px;
}

/* 子どもモードセグメントコントロール (プレミアムデザイン) */
.mode-segmented-control {
  box-shadow: inset 0 1px 2px rgba(0,0,0,0.06);
}

.mode-control-item span {
  box-shadow: none;
  border: 1px solid transparent;
}

.mode-control-item input:checked + span {
  background: #ffffff !important;
  color: var(--accent-blue);
  box-shadow: 0 2px 5px rgba(0,0,0,0.08) !important;
  border-color: rgba(0,0,0,0.02) !important;
}

.mode-control-item:hover span {
  color: #334155 !important;
  background: rgba(255,255,255,0.4);
}

body.dark-mode .mode-segmented-control,
body.theme-universal-dark .mode-segmented-control {
  background: #1e293b !important;
}

body.dark-mode .mode-control-item input:checked + span,
body.theme-universal-dark .mode-control-item input:checked + span {
  background: #334155 !important;
  color: #38bdf8 !important;
}

/* 👤 アバターアイコンパレット全体のプレミアムデザイン (3列グリッドレイアウト) */
#iconPalette {
  display: grid !important;
  grid-template-columns: repeat(4, 32px) !important;
  gap: 10px 20px !important;
  align-items: center !important;
  justify-content: start !important;
  padding: 8px 0 !important;
}

/* 通常の絵文字アイコンアイテム */
.icon-item {
  cursor: pointer;
  width: 32px !important;
  height: 32px !important;
  border-radius: 50% !important;
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  font-size: 1.25rem !important;
  line-height: 1 !important;
  background: #f1f5f9;
  border: 2px solid transparent !important;
  box-sizing: border-box !important;
  transition: all 0.2s cubic-bezier(0.16, 1, 0.3, 1) !important;
  user-select: none !important;
}

/* 👤 人のアバターアイコンのスタイリッシュなNidoプレミアムデザイン */
.icon-item[data-icon="👤"] {
  background: #ffffff !important;
  color: var(--accent-blue, #4a5e78) !important;
  border: 1.5px solid var(--accent-blue, #4a5e78) !important;
  box-shadow: 0 1px 3px rgba(15, 23, 42, 0.04) !important;
  padding: 4px;
}

.icon-item[data-icon="👤"] svg {
  width: 18px !important;
  height: 18px !important;
  color: var(--accent-blue, #4a5e78) !important;
  stroke: var(--accent-blue, #4a5e78) !important;
}

.icon-item[data-icon="👤"].selected {
  border-color: transparent !important;
  box-shadow: 0 0 14px rgba(var(--theme-rgb), 0.45), 0 2px 6px rgba(0, 0, 0, 0.1) !important;
  transform: scale(1.12);
  background: #ffffff !important;
}

.icon-btn-palette {
  cursor: pointer;
  width: 32px !important;
  height: 32px !important;
  border-radius: 50% !important;
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  box-sizing: border-box !important;
  transition: all 0.2s cubic-bezier(0.16, 1, 0.3, 1) !important;
  flex-shrink: 0 !important;
}

/* 🎨 お絵描きボタン */
#avatarDoodleBtn {
  border: 2px dashed #10b981 !important;
  background: #f0fdf4 !important;
  color: #10b981 !important;
}

#avatarDoodleBtn:hover {
  transform: translateY(-2px);
  box-shadow: 0 4px 8px rgba(16, 185, 129, 0.2) !important;
  background: #dcfce7 !important;
}

/* 📤 アップロードボタン */
#avatarUploadBtn {
  border: 2px dashed #94a3b8 !important;
  background: #F4F5F7 !important;
  color: #64748b !important;
}

#avatarUploadBtn:hover {
  transform: translateY(-2px);
  box-shadow: 0 4px 8px rgba(100, 116, 139, 0.2) !important;
  background: #f1f5f9 !important;
}

/* 自作アバターラッパーもサイズ統一 */
.custom-avatar-wrapper {
  width: 32px !important;
  height: 32px !important;
  margin-left: 0 !important;
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
}

/* 自作アバター本体 */
.custom-avatar-item {
  width: 32px !important;
  height: 32px !important;
  border-radius: 50% !important;
}

.custom-avatar-item img,
.custom-avatar-item svg {
  width: 100% !important;
  height: 100% !important;
  border-radius: 50% !important;
}

.icon-item.selected {
  border-color: var(--accent-blue);
  box-shadow: 0 0 0 3px var(--accent-blue), 0 4px 10px rgba(0, 0, 0, 0.15) !important;
  transform: scale(1.12);
  background: white;
}

/* 選択状態のスタイル */
.color-swatch.selected {
  border-color: #333 !important;
  transform: scale(1.2);
  box-shadow: 0 0 8px rgba(0, 0, 0, 0.2) !important;
}

/* お絵描きカラーパレットの選択ホバー効果 */
.color-dot:hover {
  transform: scale(1.2);
}
.color-dot.selected {
  transform: scale(1.3) !important;
  box-shadow: 0 0 0 2px var(--accent-blue);
  border-color: #fff !important;
}
#doodleEraserBtn:hover {
  transform: scale(1.2);
  background: #f1f5f9;
}

.icon-item:hover {
  background: #e2e8f0;
  transform: translateY(-2px);
  box-shadow: 0 4px 8px rgba(0, 0, 0, 0.08);
}

/* 完了タスクの縮小（折りたたみ）表示 */
.task-card.completed.shrunken {
  display: none;
}

/* 完了タスクの折りたたみサマリー */
.shrunken-summary {
  margin: 8px;
  padding: 8px 16px;
  background: #F4F5F7;
  border: 1px dashed #e2e8f0;
  border-radius: 8px;
  display: flex;
  justify-content: space-between;
  align-items: center;
  font-size: 0.875rem;
  color: var(--text-muted);
}

.expand-link {
  background: transparent;
  border: none;
  color: var(--accent-blue);
  font-weight: 600;
  cursor: pointer;
  text-decoration: underline;
  padding: 2px 4px;
}

.expand-link:hover {
  background: rgba(0, 0, 0, 0.03);
  border-radius: 4px;
}

/* --- 11. 掲示板機能 --- */
.bulletin-board-panel {
  position: fixed;
  top: 100px;
  right: -340px;
  /* 初期状態は隠す */
  width: 320px;
  height: calc(100vh - 120px);
  background: white;
  box-shadow: -5px 0 25px rgba(0, 0, 0, 0.1);
  border-radius: 24px 0 0 24px;
  display: flex;
  flex-direction: column;
  z-index: 1000;
  transition: right 0.4s cubic-bezier(0.4, 0, 0.2, 1);
  border: 1px solid rgba(0, 0, 0, 0.05);
}

.bulletin-board-panel.active {
  right: 0;
}

.bb-header {
  padding: 20px;
  display: flex;
  justify-content: space-between;
  align-items: center;
  border-bottom: 1px solid #f1f5f9;
}

.bb-header h3 {
  margin: 0;
  font-size: 1.1rem;
  color: var(--accent-blue);
  font-weight: 700;
}

.bb-message-list {
  flex: 1;
  padding: 20px;
  overflow-y: auto;
  display: flex;
  flex-direction: column;
  gap: 16px;
}

.bb-message-item {
  display: flex;
  gap: 12px;
  align-items: flex-end;
  /* 下揃えに変更してチャット感を出す */
  animation: fadeIn 0.3s ease-out;
}

.bb-message-item.is-me {
  flex-direction: row-reverse;
  /* 自分自身のメッセージを右側に */
}

.bb-message-avatar {
  width: 36px;
  height: 36px;
  border-radius: 50%;
  background: white;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 1.2rem;
  flex-shrink: 0;
  box-shadow: 0 2px 6px rgba(0, 0, 0, 0.05);
}

.bb-message-content {
  max-width: 80%;
  /* 吹き出しが広がりすぎないように */
  background: #f1f5f9;
  padding: 10px 14px;
  border-radius: 16px 16px 16px 0;
  /* 左側（他人用）の吹き出し */
  font-size: 0.9rem;
  line-height: 1.5;
  color: var(--text-main);
  position: relative;
  box-shadow: 0 1px 2px rgba(0, 0, 0, 0.05);
}

.bb-message-item.is-me .bb-message-content {
  background: var(--accent-blue);
  color: white;
  border-radius: 16px 16px 0 16px;
  /* 右側（自分用）の吹き出し */
}

.bb-message-meta {
  font-size: 14px;
  color: var(--text-muted);
  margin-top: 4px;
  display: flex;
  gap: 8px;
}

.bb-message-item.is-me .bb-message-meta {
  flex-direction: row-reverse;
  color: rgba(255, 255, 255, 0.7);
  /* 自分の吹き出し内では白っぽく */
}

.bb-message-item.is-me .bb-author {
  display: none;
  /* 自分の名前はアイコンで分かるので省略してスッキリさせる */
}


.bb-input-area {
  padding: 16px 20px;
  border-top: 1px solid #f1f5f9;
  display: flex;
  gap: 10px;
  background: #fcfcfc;
  border-radius: 0 0 0 24px;
}

#bbInput {
  flex: 1;
  border: 1px solid #e2e8f0;
  border-radius: 20px;
  padding: 8px 16px;
  font-size: 1rem;
  outline: none;
}

#bbInput:focus {
  border-color: var(--accent-blue);
}

.bb-send-button {
  width: 36px;
  height: 36px;
  border-radius: 50%;
  background: var(--accent-blue);
  border: none;
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  transition: transform 0.2s;
}

.bb-send-button:hover {
  transform: scale(1.1);
}

.badge {
  position: absolute;
  top: -4px;
  right: -4px;
  background: #ef4444;
  color: white;
  font-size: 1rem;
  min-width: 16px;
  height: 16px;
  border-radius: 8px;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 0 4px;
  border: 2px solid white;
}

@keyframes fadeIn {
  from {
    opacity: 0;
    transform: translateY(10px);
  }

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

.close-button {
  background: none;
  border: none;
  font-size: 24px;
  color: var(--text-muted);
  cursor: pointer;
}

/* --- 11b. アーケード機能 --- */
.arcade-panel {
  position: fixed;
  top: 0;
  left: 0;
  width: 100vw;
  height: 100vh;
  background: rgba(15, 23, 42, 0.45); /* Elegant dimmed backdrop color */
  backdrop-filter: blur(8px);
  z-index: 10000;
  display: flex;
  justify-content: center;
  align-items: center;
  opacity: 0;
  pointer-events: none;
  transition: opacity 0.3s cubic-bezier(0.16, 1, 0.3, 1);
}

.arcade-panel.active {
  opacity: 1;
  pointer-events: auto;
}

.arcade-modal-container {
  width: min(880px, 92vw);
  height: min(780px, 88vh);
  background: var(--bg-main); /* Match Nido's milk-white / warm background */
  border-radius: 28px;
  box-shadow: var(--shadow-lg);
  border: 1px solid rgba(0, 0, 0, 0.05);
  display: flex;
  flex-direction: column;
  overflow: hidden;
  transform: scale(0.95);
  transition: transform 0.3s cubic-bezier(0.16, 1, 0.3, 1);
}
/* アーケード内のテキスト表示領域のみ入力を無効化（スクロールやボタン入力を妨げずにテキスト選択・Iビームカーソルを防ぐ） */
.arcade-title-area,
.arcade-ticket-balance,
.game-title,
.game-ranking,
.arcade-footer-note {
  pointer-events: none;
}

.arcade-panel.active .arcade-modal-container {
  transform: scale(1);
}

.arcade-header {
  padding: 24px;
  display: flex;
  justify-content: space-between;
  align-items: center;
  border-bottom: 1px solid #e2e8f0;
  background: white;
}

.arcade-title-area {
  display: flex;
  align-items: center;
  gap: 10px;
  font-size: 1.4rem;
  font-weight: 800;
  color: var(--text-main);
  font-family: 'Outfit', sans-serif;
}

.arcade-title-icon {
  color: var(--accent-blue);
}

.arcade-header-right {
  display: flex;
  align-items: center;
  gap: 16px;
}

.arcade-ticket-balance {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  background: var(--q2-bg);
  border: 1px solid var(--q2-border);
  color: var(--q2-accent);
  padding: 6px 14px;
  border-radius: 16px;
  font-size: 0.95rem;
  font-weight: 700;
  font-family: 'Outfit', sans-serif;
}

.arcade-ticket-balance svg {
  color: var(--q2-accent);
}

.close-button {
  border: none;
  background: transparent;
  color: var(--text-muted);
  cursor: pointer;
  padding: 8px;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: background-color 0.2s, color 0.2s;
}

.close-button:hover {
  background-color: rgba(0, 0, 0, 0.05);
  color: var(--text-main);
}

.arcade-tabs {
  display: flex;
  padding: 16px 24px;
  gap: 12px;
  background: #f8fafc;
  border-bottom: 1px solid #e2e8f0;
}

.arcade-tab-btn {
  flex: 1;
  border: 1px solid #cbd5e1;
  background: white;
  color: #475569;
  padding: 10px 16px;
  border-radius: 16px;
  cursor: pointer;
  font-size: 0.95rem;
  font-weight: 700;
  transition: all 0.25s var(--ease);
  font-family: 'Outfit', sans-serif;
}

.arcade-tab-btn:hover {
  background: #f1f5f9;
  border-color: #94a3b8;
}

.arcade-tab-btn.active {
  background: #1e293b; /* Dark slate background */
  border-color: #1e293b;
  color: white;
}

.arcade-game-grid {
  flex: 1;
  padding: 24px;
  overflow-y: auto;
  display: grid;
  grid-template-columns: repeat(2, 1fr); /* 2 columns on PC/iPad */
  gap: 20px;
  align-content: start;
}

.game-card {
  background: var(--bg-card); /* White card background */
  border: 1px solid #e2e8f0;
  border-radius: 20px;
  padding: 24px;
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
  box-shadow: var(--shadow-sm);
  transition: transform 0.25s var(--ease), box-shadow 0.25s var(--ease), border-color 0.25s var(--ease);
  position: relative; /* Position relative for badges */
}

.game-card:hover {
  transform: translateY(-4px);
  box-shadow: var(--shadow-lg);
  border-color: rgba(var(--theme-rgb), 0.3);
}

.game-card.free-play .game-play-btn {
  background: linear-gradient(135deg, #4f46e5 0%, #6366f1 100%);
  color: white;
  border: none;
  box-shadow: 0 4px 10px rgba(79, 70, 229, 0.2);
}

.game-card.free-play .game-play-btn:hover {
  background: linear-gradient(135deg, #4338ca 0%, #4f46e5 100%);
  box-shadow: 0 6px 14px rgba(79, 70, 229, 0.3);
  transform: translateY(-1px);
}

.free-badge {
  position: absolute;
  top: 12px;
  right: 12px;
  background: linear-gradient(135deg, #10b981 0%, #059669 100%);
  color: white;
  font-size: 0.875rem;
  font-weight: 800;
  padding: 4px 10px;
  border-radius: 12px;
  box-shadow: 0 4px 6px -1px rgba(16, 185, 129, 0.3);
  animation: pulseFree 2s infinite ease-in-out;
  pointer-events: none;
}

@keyframes pulseFree {
  0%, 100% { transform: scale(1); }
  50% { transform: scale(1.05); }
}

.game-card.locked {
  opacity: 0.6;
  filter: grayscale(100%);
  cursor: not-allowed;
}

.game-card.locked:hover {
  transform: none;
  box-shadow: var(--shadow-sm);
  border-color: #e2e8f0;
}

.game-card.locked .game-play-btn {
  background: #cbd5e1 !important;
  color: #64748b !important;
  border-color: #94a3b8 !important;
  cursor: not-allowed;
}

.game-icon {
  width: 48px;
  height: 48px;
  margin-bottom: 12px;
  display: flex;
  align-items: center;
  justify-content: center;
  color: var(--accent-blue); /* Match selected member's theme color */
  opacity: 0.85;
}

.game-icon svg {
  width: 100%;
  height: 100%;
  stroke-width: 1.5; /* Elegant thin strokes */
}

/* ゲームアイコン用の画像スタイル設定 */
.arcade-game-icon-img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}
/* PNG/BMPファイルにのみ適用し、角を丸めてドット絵を鮮明化 */
.arcade-game-icon-img:not([src$=".svg"]) {
  border-radius: var(--arcade-icon-radius);
  image-rendering: pixelated;
  image-rendering: crisp-edges;
}

.game-title {
  font-size: 1.1rem;
  font-weight: 700;
  color: var(--text-main);
  margin-bottom: 8px;
  font-family: 'Outfit', sans-serif;
  pointer-events: none;
}

.game-card-divider {
  width: 100%;
  height: 1px;
  background-color: #f1f5f9;
  margin: 12px 0 16px 0;
}

.game-play-btn {
  width: 100%;
  border: 1px solid #cbd5e1;
  background: white;
  color: #334155;
  padding: 10px 0;
  border-radius: 12px;
  font-size: 0.9rem;
  font-weight: 700;
  cursor: pointer;
  transition: all 0.2s ease;
  margin-top: auto;
  font-family: 'Outfit', sans-serif;
}

.game-play-btn:hover {
  background: #f8fafc;
  border-color: #94a3b8;
}

.game-ranking {
  width: 100%;
  margin-bottom: 16px;
}

.ranking-title {
  font-size: 0.875rem;
  color: var(--text-muted);
  font-weight: bold;
  margin-bottom: 8px;
  display: flex;
  align-items: center;
  gap: 4px;
}

.ranking-list {
  display: flex;
  flex-direction: column;
  gap: 8px;
  list-style: none;
  padding: 0;
  margin: 0;
}

.ranking-item {
  display: flex;
  align-items: center;
  font-size: 0.9rem;
  color: var(--text-main);
  border-bottom: 1px solid #f8fafc;
  padding-bottom: 6px;
  gap: 8px;
}

.ranking-item:last-child {
  border-bottom: none;
  padding-bottom: 0;
}

.ranking-rank {
  font-weight: 700;
  color: var(--text-muted);
  width: 16px;
  margin-right: 4px;
}

.ranking-avatar {
  width: 24px;
  height: 24px;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  overflow: hidden;
  border: 1.5px solid;
  background: white;
  flex-shrink: 0;
}

.ranking-avatar .avatar {
  font-size: 0.875rem;
  font-weight: 700;
}

.ranking-name {
  font-weight: 500;
  flex: 1;
  text-align: left;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.ranking-score {
  font-weight: 700;
  color: var(--text-main);
  margin-left: 8px;
}

.ranking-date {
  font-size: 0.875rem;
  color: var(--text-muted);
  margin-left: 4px;
}

.ranking-no-score {
  font-size: 0.875rem;
  color: var(--text-muted);
  text-align: center;
  padding: 8px 0;
}

.arcade-footer-note {
  padding: 16px 24px;
  background: #f8fafc;
  border-top: 1px solid #e2e8f0;
  display: flex;
  align-items: center;
  gap: 8px;
  font-size: 0.875rem;
  color: #64748b;
  font-weight: 500;
}

.arcade-footer-note svg {
  flex-shrink: 0;
  color: #94a3b8;
}

@media (max-width: 768px) {
  .arcade-game-grid {
    grid-template-columns: 1fr; /* 1 column on mobile */
    gap: 16px;
    padding: 16px;
  }
}

@media (max-width: 640px) {
  .arcade-modal-container {
    width: 100vw;
    height: 100vh;
    max-height: 100vh;
    border-radius: 0;
    border: none;
  }
}

/* ゲームプレイモーダル (全画面) */
.game-play-modal {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background: rgba(0,0,0,0.85);
  z-index: 11000;
  display: flex;
  flex-direction: column;
  backdrop-filter: blur(8px);
}
/* ゲームプレイモーダル内の静的テキストのみ入力を無効化 */
#gpmTitle,
.gpm-prompt-text,
.gpm-prompt-subtext {
  pointer-events: none;
}

.gpm-header {
  display: none !important;
}

#gpmTitle {
  font-weight: bold;
  font-size: 1.1rem;
}

.gpm-close-button {
  position: absolute;
  top: 16px;
  right: 16px;
  background: rgba(15, 23, 42, 0.6);
  border: none;
  color: white;
  font-size: 28px;
  cursor: pointer;
  transition: transform 0.2s, background-color 0.2s;
  line-height: 1;
  width: 40px;
  height: 40px;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  z-index: 11020;
  box-shadow: 0 4px 12px rgba(0,0,0,0.3);
  backdrop-filter: blur(4px);
}

.gpm-close-button:hover {
  transform: scale(1.1);
  background: rgba(15, 23, 42, 0.8);
}

.gpm-iframe-container {
  flex: 1;
  display: flex;
  justify-content: center;
  align-items: center;
  padding: 24px;
  position: relative;
}

.gpm-iframe-container iframe {
  width: 100%;
  height: 100%;
  max-width: 1200px;
  max-height: 100%;
  border: none;
  border-radius: 16px;
  background: white;
  box-shadow: 0 20px 50px rgba(0,0,0,0.5);
}

/* 画面回転プロンプト（モバイル縦画面用） */
.gpm-landscape-prompt {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background: rgba(15, 23, 42, 0.95);
  backdrop-filter: blur(12px);
  z-index: 11010;
  display: none; /* デフォルト非表示、メディアクエリで制御 */
  flex-direction: column;
  justify-content: center;
  align-items: center;
  color: white;
  padding: 24px;
  box-sizing: border-box;
  text-align: center;
}

/* 600px未満の端末かつ縦画面時に自動表示（ユーザーがスキップしていない場合のみ） */
@media (max-width: 599px) and (orientation: portrait) {
  #gamePlayModal:not(.prompt-dismissed):not(.no-rotate-prompt) .gpm-landscape-prompt {
    display: flex;
  }
}

.gpm-prompt-content {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 20px;
  max-width: 320px;
}

.gpm-prompt-icon {
  animation: rotate-phone 2s ease-in-out infinite;
  color: var(--accent-blue);
  display: flex;
  align-items: center;
  justify-content: center;
}

.gpm-prompt-text {
  font-size: 1.15rem;
  font-weight: bold;
  line-height: 1.5;
}

.gpm-prompt-subtext {
  font-size: 0.875rem;
  color: #94a3b8;
  line-height: 1.4;
}

.gpm-prompt-close-btn {
  background: rgba(255, 255, 255, 0.1);
  border: 1px solid rgba(255, 255, 255, 0.2);
  color: #cbd5e1;
  padding: 10px 20px;
  border-radius: 24px;
  cursor: pointer;
  font-size: 0.9rem;
  font-weight: bold;
  transition: all 0.2s ease;
  margin-top: 5px;
}

.gpm-prompt-close-btn:hover {
  background: rgba(255, 255, 255, 0.2);
  color: white;
}

@keyframes rotate-phone {
  0% {
    transform: rotate(0deg);
  }
  30% {
    transform: rotate(90deg);
  }
  70% {
    transform: rotate(90deg);
  }
  100% {
    transform: rotate(0deg);
  }
}

/* スマホ端末（幅768px未満）用：パディングを無くしてエッジ・トゥ・エッジ（全画面）表示 */
@media (max-width: 767px) {
  .gpm-iframe-container {
    padding: 0;
  }
  .gpm-iframe-container iframe {
    border-radius: 0;
    box-shadow: none;
    max-width: 100%;
    max-height: 100%;
  }
}


/* --- 12. モバイル・レスポンシブ対応 (Mobile Optimization) --- */
@media (max-width: 1023px) {

  /* ページ全体の横スクロールを阻止 ＝ モバイル縦スクロールの完全救済 */
  html,
  body {
    overflow-x: hidden;
    max-width: 100vw;
    width: 100%;
    overscroll-behavior: auto !important;
    -webkit-overflow-scrolling: touch !important;
  }

  /* ヘッダーのモバイル最適化 */
  .top-bar {
    padding: 15px 16px 10px;
    background: white;
    box-shadow: 0 2px 10px rgba(0, 0, 0, 0.05);
    position: sticky;
    top: 0;
    z-index: 999;
  }

  .header-main {
    flex-wrap: wrap;
    gap: 10px;
    align-items: center;
  }

  .header-main h1 {
    font-size: 1.4rem !important;
    min-width: auto !important;
    flex: 1;
    margin: 0;
    letter-spacing: -0.02em;
  }

  .subtitle {
    font-size: 14px;
    min-width: auto !important;
    margin: 4px 0 0 0;
  }

  /* メンバー選択 & 気分選択 & 操作ボタンの並び */
  .member-selector-area {
    padding: 4px 10px;
    font-size: 0.875rem;
    box-shadow: 0 1px 5px rgba(0, 0, 0, 0.03);
  }

  #memberSelect {
    font-size: 1rem;
    min-width: auto;
  }

  .mood-selector {
    margin-top: 0;
    padding: 2px 6px;
    gap: 4px;
    box-shadow: 0 1px 5px rgba(0, 0, 0, 0.03);
  }

  .mood-btn {
    width: 28px;
    height: 28px;
    font-size: 0.95rem;
  }

  #moodQuestionLabel {
    display: none;
    /* モバイルでは省スペースのため非表示 */
  }

  .calendar-title-group .icon-button {
    width: 32px;
    height: 32px;
  }

  /* メインコンテンツエリアの縦積み化（グリッドからフレックスへ） */
  .main-content-area {
    display: flex;
    flex-direction: column;
    align-items: stretch; /* 子要素（カード類）を横幅いっぱいに引き伸ばす */
    gap: 20px;
    padding: 15px 12px 60px;
    width: 100%;
    max-width: 100vw;
    box-sizing: border-box;
  }

  .left-content,
  .side-content {
    width: 100%;
    display: flex;
    flex-direction: column;
    gap: 16px;
  }

  /* タスク入力エリア */
  .mission-entry-card {
    padding: 16px;
  }

  .task-entry {
    flex-direction: column;
    align-items: stretch;
    gap: 12px;
  }

  #taskTitleInput {
    width: 100%;
    min-width: auto;
  }

  .input-field-group {
    width: 100%;
  }

  .input-row {
    width: 100%;
    gap: 6px;
  }

  .input-row select {
    flex: 1;
    min-width: 0;
    font-size: 1rem;
  }

  .input-field-group label {
    display: none;
  }

  #taskTitleInput {
    font-size: 1rem;
    padding: 10px 12px;
  }

  /* 4象限マトリクスの縦積み化 */
  .matrix-container {
    display: flex;
    flex-direction: column;
    gap: 16px;
  }

  .matrix-quadrant {
    min-height: auto;
  }

  .quadrant-header {
    font-size: var(--font-size-quadrant-title, 0.875rem);
    font-weight: var(--font-weight-semibold, 600);
    padding: 8px 12px;
    min-height: 44px;
  }

  .task-list {
    max-height: 350px;
    overflow-y: auto;
  }

  .task-card {
    margin: 8px;
    padding: 10px 14px;
    scroll-margin-top: 80px;
  }

  /* メンバー管理のモデールオーバーレイ表示（上寄せ配置でフッターまで一覧可能に） */
  #memberManagementSection {
    position: fixed !important;
    top: 3vh !important;
    top: 3dvh !important;
    left: 50% !important;
    transform: translateX(-50%) !important;
    width: 92% !important;
    max-width: 420px !important;
    max-height: 88vh !important;
    max-height: 88dvh !important;
    overflow-y: auto !important;
    -webkit-overflow-scrolling: touch !important;
    box-shadow: 0 10px 30px rgba(0, 0, 0, 0.25) !important;
    border: 1px solid rgba(0, 0, 0, 0.1) !important;
    border-radius: var(--modal-radius-small, 20px) !important;
    background: white !important;
    margin: 0 !important;
    z-index: 10000 !important;
    padding: 20px !important;
    padding-bottom: 40px !important; /* モバイル下部見切れ防止 */
    box-sizing: border-box !important;
  }

  /* 個人設定のモデールオーバーレイ表示（上寄せ配置でフッターまで一覧可能に） */
  #personalSettingsSection {
    position: fixed !important;
    top: 3vh !important;
    top: 3dvh !important;
    left: 50% !important;
    transform: translateX(-50%) !important;
    width: 92% !important;
    max-width: 420px !important;
    max-height: 88vh !important;
    max-height: 88dvh !important;
    overflow: hidden !important; /* スクロールバーのはみ出しを防止するためhiddenに統一 */
    box-shadow: 0 10px 30px rgba(0, 0, 0, 0.25) !important;
    border: 1px solid rgba(0, 0, 0, 0.1) !important;
    border-radius: var(--modal-radius-small, 20px) !important;
    background: white !important;
    margin: 0 !important;
    z-index: 10000 !important;
    padding: 0 !important; /* インナー側に余白を完全委譲 */
    box-sizing: border-box !important;
  }

  #personalSettingsSection .settings-modal-inner {
    max-height: 88vh !important;
    max-height: 88dvh !important;
    overflow-y: auto !important;
    box-sizing: border-box !important;
  }

  /* モーダル表示時に背後の画面スクロールを抑制するための目印 */
  body.modal-open {
    overflow: hidden;
  }

  /* タイマー表示のサイズ調整 */
  .shared-timer-display {
    font-size: 28px;
    margin: 10px 0;
  }

  .timer-digit-col {
    height: 36px;
    width: 18px;
  }

  .timer-digit-col span {
    line-height: 36px;
  }

  .timer-separator {
    line-height: 36px;
    font-size: 20px;
  }

  .memo-modal {
    position: fixed;
    inset: 0;
    background: rgba(15, 23, 42, 0.65);
    display: none;
    align-items: center;
    justify-content: center;
    padding: 16px;
    z-index: 12000;
  }

  .memo-modal.active {
    display: flex;
  }

  .memo-panel {
    width: 100%;
    max-width: 520px;
    padding: 18px;
    background: white;
    border-radius: 20px;
    box-shadow: var(--shadow-lg);
  }

  .memo-panel-header {
    display: flex;
    justify-content: space-between;
    align-items: flex-start;
    gap: 16px;
  }

  .memo-panel-header h3 {
    margin: 0;
    font-size: 1.15rem;
  }

  .memo-panel-subtitle {
    margin: 4px 0 0;
    font-size: 0.9rem;
    color: var(--text-muted);
  }

  .start-button,
  .stop-button,
  .reset-button {
    padding: 8px 10px;
    font-size: 0.875rem;
  }

  /* カレンダーのモバイル最適化 */
  .calendar-card {
    padding: 16px;
  }

  .calendar-header-layout {
    margin-bottom: 12px;
  }

  .calendar-title {
    font-size: 1.1rem;
    min-width: 120px;
  }

  .calendar-day {
    border-radius: 8px;
  }

  .day-number {
    font-size: 14px;
    width: 28px;
    height: 28px;
  }

  .day-mood-mark {
    font-size: 24px;
    width: 28px;
    height: 28px;
  }

  /* 掲示板パネル（右からスライドインするフルスクリーン風） */
  .bulletin-board-panel {
    top: 0;
    right: -100%;
    width: 100%;
    height: 100vh;
    border-radius: 0;
    z-index: 10001;
  }

  .bulletin-board-panel.active {
    right: 0;
  }

  .bb-input-area {
    border-radius: 0;
    padding: 12px 16px;
  }

  /* 入力グリッドのモバイル最適化 */
  .entry-meta-grid {
    grid-template-columns: 1fr !important;
    gap: 10px !important;
  }

  /* アーケードパネル（モバイル対応：新モーダル方式により削除） */
}

/* --- 7. タスクフォーム (二段構成スマートタスク入力バー) --- */
.mission-entry-card {
  padding: 8px 16px !important;
  margin-bottom: 16px !important; /* 🌟 4象限マトリクスとの間に心地よい呼吸感・マージンを確保 */
  border-radius: var(--border-radius, 14px) !important;
  background: white;
  border: 1px solid rgba(15, 23, 42, 0.08);
  box-shadow: 0 4px 16px rgba(15, 23, 42, 0.03);
  /* 🚀 入力欄以外でテキストカーソル（Iビーム）の表示や不要な範囲選択を完全に防ぐ */
  user-select: none !important;
  -webkit-user-select: none !important;
  cursor: default !important;
  transition: all 0.2s ease;
}

/* テキストエリアや入力欄の中身は通常通りテキスト選択・入力カーソルを許可 */
.mission-entry-card textarea,
.mission-entry-card input[type="text"] {
  user-select: text !important;
  -webkit-user-select: text !important;
  cursor: text !important;
}

/* プルダウン、ボタンなどはポインター（指マーク）を表示 */
.mission-entry-card select,
.mission-entry-card button {
  cursor: pointer !important;
}

/* 上段: 最速のメイン入力ライン (Title ➔ Category ➔ Add Button) */
.task-entry-main-row {
  display: flex;
  align-items: center;
  gap: var(--control-gap-main, 10px);
  width: 100%;
  max-width: 680px;
  height: var(--control-height-main, 42px);
}

.task-entry-main-row .title-block {
  flex: 1 1 auto;
  min-width: 0;
  height: 100%;
}

.task-entry-main-row .category-block {
  min-width: 150px !important;
  max-width: 220px !important;
  width: auto !important;
  flex: 0 1 auto !important;
  height: 100%;
}

.task-entry-main-row textarea#taskTitleInput {
  width: 100%;
  height: var(--control-height-main, 42px) !important;
  padding: var(--control-padding-main, 10px 14px);
  font-size: var(--font-size-base, 1rem) !important;
  line-height: 1.3;
  font-weight: 600;
  border-radius: var(--control-radius-main, 10px) !important;
  border: 1.5px solid #e2e8f0;
  background: #F4F5F7;
  color: var(--text-main);
  outline: none;
  transition: var(--transition);
  resize: none;
  box-sizing: border-box;
  font-family: inherit;
}

.task-entry-main-row textarea#taskTitleInput:focus {
  border-color: var(--accent-blue);
  background: white;
}

.task-entry-main-row .category-block select {
  width: 100%;
  min-width: 150px;
  max-width: 220px;
  height: var(--control-height-main, 42px) !important;
  padding: 0 30px 0 12px;
  font-size: var(--font-size-dd, 0.95rem) !important;
  font-weight: 600;
  color: var(--text-main);
  border-radius: var(--control-radius-main, 10px) !important;
  border: 1.5px solid #e2e8f0;
  background: #F4F5F7;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='14' height='14' viewBox='0 0 24 24' fill='none' stroke='%2364748b' stroke-width='2.5' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='6 9 12 15 18 9'%3E%3C/polyline%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: right 10px center;
  outline: none;
  cursor: pointer;
  appearance: none;
  -webkit-appearance: none;
  -moz-appearance: none;
  transition: var(--transition);
  box-sizing: border-box;
  text-overflow: ellipsis;
  white-space: nowrap;
  overflow: hidden;
}

.task-entry-main-row .category-block select:focus {
  border-color: var(--accent-blue);
  background-color: white;
}

.task-entry-main-row #addTaskButton {
  background-color: var(--primary-btn-bg, var(--theme-color)) !important;
  color: var(--primary-btn-text, var(--theme-text-color)) !important;
  height: var(--control-height-main, 42px) !important;
  padding: 0 20px;
  border-radius: var(--control-radius-main, 10px) !important;
  font-size: var(--font-size-dd, 0.95rem) !important;
  font-weight: 800;
  white-space: nowrap;
  flex-shrink: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  margin: 0;
  border: var(--primary-btn-border, 1px solid rgba(15, 23, 42, 0.15)) !important;
  box-shadow: var(--primary-btn-shadow, 0 2px 6px rgba(15, 23, 42, 0.12)) !important;
  transition: var(--transition);
}

.task-entry-main-row #addTaskButton:hover,
.task-entry-main-row #addTaskButton:focus {
  box-shadow: var(--primary-btn-hover-shadow, 0 4px 12px rgba(15, 23, 42, 0.2)) !important;
}

/* 下段: オプショナル設定ライン (期限、見積 のスリム手入力ピル: 黄金比 32px) */
.task-entry-sub-row {
  display: flex;
  align-items: center;
  justify-content: flex-end; /* 🎯 追加ボタン側（右側）へ集約：心理的・身体的に無駄な動きを最小化（フィッツの法則準拠） */
  gap: var(--control-gap-sub, 12px);
  margin-top: 6px;
  border-top: 1px dashed rgba(226, 232, 240, 0.7);
  padding-top: 4px;
  flex-wrap: wrap;
  max-width: 680px;
}

.sub-option-group {
  display: flex;
  align-items: center;
  gap: 6px;
}

.sub-option-toggle-btn {
  background: #f8fafc;
  border: 1px solid #e2e8f0;
  color: #64748b;
  border-radius: var(--control-radius-sm, 8px);
  padding: 0 12px;
  font-size: var(--font-size-sm, 0.875rem);
  font-weight: 600;
  cursor: pointer;
  transition: all 0.15s ease;
  user-select: none;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  height: var(--control-height-sub, 32px);
  position: relative;
}

/* Apple HIG 44px タッチ判定領域の確保（透明疑似要素） */
.sub-option-toggle-btn::before {
  content: '';
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  min-width: 44px;
  min-height: 44px;
  width: 100%;
  height: 100%;
}

.sub-option-toggle-btn:hover {
  background: #f1f5f9;
  color: var(--text-main);
  border-color: #cbd5e1;
}

.sub-option-toggle-btn.active {
  background: #eff6ff;
  color: #2563eb;
  border-color: #bfdbfe;
  font-weight: 700;
}

.sub-option-fields {
  display: flex;
  align-items: center;
  gap: 6px;
}

.sub-text-input {
  position: relative;
  height: var(--control-height-sub, 32px);
  padding: 0 10px;
  font-size: var(--font-size-sm, 0.875rem);
  font-weight: 600;
  color: var(--text-main);
  background: #F4F5F7;
  border: 1px solid #cbd5e1;
  border-radius: var(--control-radius-sm, 8px);
  outline: none;
  transition: border-color 0.15s, background-color 0.15s;
  box-sizing: border-box;
}

/* Apple HIG 44px タッチ判定領域の確保 */
.sub-text-input::before {
  content: '';
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  min-width: 44px;
  min-height: 44px;
  width: 100%;
  height: 100%;
  pointer-events: all;
  z-index: -1;
}

.sub-text-input:focus {
  border-color: var(--accent-blue);
  background: white;
}

.sub-text-input.date-input {
  width: 145px;
}

.sub-text-input.time-input {
  width: 100px;
}

.sub-clear-btn {
  background: none;
  border: none;
  font-size: 14px;
  font-weight: bold;
  color: #94a3b8;
  cursor: pointer;
  padding: 0;
  width: 28px;
  height: var(--control-height-sub, 32px);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border-radius: 6px;
  transition: color 0.15s;
  position: relative;
}

/* Apple HIG 44px タッチ判定領域の確保 */
.sub-clear-btn::before {
  content: '';
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  min-width: 44px;
  min-height: 44px;
}

.sub-clear-btn:hover {
  color: #ef4444;
}

/* 見積調整ピル (下段スリム仕様: 高さ32px / Apple HIG 44px判定) */
.task-entry-sub-row .estimate-adjust-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 4px;
  height: var(--control-height-sub, 32px);
  background: #F4F5F7;
  border: 1px solid #cbd5e1;
  border-radius: var(--control-radius-sm, 8px);
  padding: 2px;
  box-sizing: border-box;
}

.task-entry-sub-row .estimate-adjust-btn {
  width: 26px;
  height: 26px;
  border-radius: 5px;
  font-size: 14px;
  font-weight: bold;
  background: white;
  border: none;
  box-shadow: var(--shadow-sm);
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  position: relative;
  z-index: 1;
}

/* Apple HIG 44px タッチ判定領域の確保 */
.task-entry-sub-row .estimate-adjust-btn::before {
  content: '';
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  min-width: 44px;
  min-height: 44px;
}

.task-entry-sub-row .estimate-value-input {
  width: 48px;
  min-width: 44px;
  font-size: 1rem;
  font-weight: 800;
  text-align: center;
  border: none;
  background: transparent;
  outline: none;
  padding: 1px 2px;
  color: inherit;
  cursor: text;
  position: relative;
  z-index: 2;
  border-radius: 4px;
  transition: background-color 0.15s ease, box-shadow 0.15s ease;
}

/* Apple HIG 44px タッチ判定領域の確保 */
.task-entry-sub-row .estimate-value-input::before {
  content: '';
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  min-width: 44px;
  min-height: 44px;
  width: 100%;
  height: 100%;
  pointer-events: all;
  z-index: -1;
}

.task-entry-sub-row .estimate-value-input:hover {
  background: rgba(255, 255, 255, 0.65);
}

.task-entry-sub-row .estimate-value-input:focus {
  background: #ffffff;
  box-shadow: 0 0 0 1.5px var(--accent-blue, #3b82f6);
}

body.dark-mode .task-entry-sub-row .estimate-value-input:hover,
body.theme-universal-dark .task-entry-sub-row .estimate-value-input:hover {
  background: rgba(255, 255, 255, 0.1);
}

body.dark-mode .task-entry-sub-row .estimate-value-input:focus,
body.theme-universal-dark .task-entry-sub-row .estimate-value-input:focus {
  background: #1e293b;
  box-shadow: 0 0 0 1.5px var(--accent-blue, #60a5fa);
}

#editTaskEstimateAdjustRow .estimate-display:hover {
  background: rgba(0, 0, 0, 0.04);
}

#editTaskEstimateAdjustRow .estimate-display:focus {
  background: #ffffff;
  box-shadow: 0 0 0 1.5px var(--accent-blue, #3b82f6);
}

.task-entry-flow {
  display: grid;
  grid-template-columns: 2.8fr 2fr 1.5fr 2.5fr;
  gap: 16px;
  align-items: flex-start !important;
  width: 100%;
}

.task-entry-flow .entry-label {
  display: none !important;
}

.entry-block {
  display: flex;
  flex-direction: column;
  gap: 4px; /* ラベルと入力欄の心地よい極小ギャップ */
}

.entry-label {
  font-size: 1rem !important;
  font-weight: 800 !important;
  color: var(--text-muted) !important;
  letter-spacing: 0.05em !important;
  margin-bottom: 2px !important;
  white-space: nowrap;
  line-height: 1.2 !important;
  display: block !important;
  transition: color 0.2s;
}

/* フォーカス時に見出しテキストの色をエレガントにブルーへ変化 */
.entry-block:focus-within .entry-label {
  color: var(--accent-blue);
}

/* 1. Title Input */
.title-block {
  flex: 2.8;
  min-width: 240px;
}

.title-block textarea#taskTitleInput {
  width: 100%;
  height: 42px;
  padding: 10px 14px;
  font-size: var(--font-size-base, 1rem);
  line-height: 1.3;
  font-weight: 600;
  border-radius: var(--control-radius-main, 10px);
  border: 1.5px solid #e2e8f0;
  background: #F4F5F7;
  color: var(--text-main);
  outline: none;
  transition: var(--transition);
  resize: none;
  box-sizing: border-box;
  font-family: inherit;
}

.title-block textarea#taskTitleInput:focus {
  border-color: var(--accent-blue);
  background: white;
}

/* 2. Deadline Block */
.deadline-block {
  flex: 1.8;
  min-width: 220px;
  /* いつまで？の幅を少し広げて、時間指定なしの文字割れを防ぐ */
}

.deadline-inputs {
  display: flex;
  gap: 4px;
  background: #F4F5F7;
  border: 1.5px solid #e2e8f0;
  border-radius: 12px;
  padding: 3px 8px;
  /* 左右パディングを調整してドロップダウン矢印の余白を確保 */
  height: 42px;
  align-items: center;
  width: 100%;
}

.deadline-inputs select {
  border: none;
  background: transparent;
  font-size: 1rem;
  font-weight: 600;
  color: var(--text-main);
  outline: none;
  cursor: pointer;
  padding: 0 2px;
  min-width: 0;
  /* フレックス縮小を有効化 */
}

#taskDeadlineDateSelect {
  flex: 1.1;
}

#taskDeadlineSelect {
  flex: 1.3;
}

/* 3. Category Block */
.category-block {
  flex: 1.5;
  min-width: 150px;
}

.category-block select {
  width: 100%;
  height: 42px;
  padding: 8px 12px;
  font-size: var(--font-size-dd, 0.95rem);
  font-weight: 600;
  color: var(--text-main);
  border-radius: var(--control-radius-main, 10px);
  border: 1.5px solid #e2e8f0;
  background: #F4F5F7;
  outline: none;
  cursor: pointer;
}

/* 4. Estimate Block */
.estimate-block,
.estimate-action-block {
  flex: 1.5;
  min-width: 220px !important; /* 横画面時に絶対に押しつぶされない最小幅を確保！ */
}

.estimate-inline-wrapper {
  display: flex;
  flex-direction: row;
  /* 常に横並び */
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  background: #F4F5F7;
  border: 1.5px solid #e2e8f0;
  border-radius: 12px;
  padding: 0 10px;
  height: 42px;
  /* 高さを完全に固定！ */
  width: 100%;
}

.estimate-presets-row {
  display: flex;
  gap: 4px;
  align-items: center;
  flex-shrink: 0;
  /* 縮まないように固定 */
}

.estimate-preset-btn {
  border: 1px solid #cbd5e1;
  background: white;
  border-radius: 6px;
  padding: 2px 5px;
  font-size: 0.875rem;
  font-weight: 600;
  cursor: pointer;
  color: var(--text-muted);
  white-space: nowrap;
}

.estimate-preset-btn.active {
  background: var(--accent-blue);
  color: white;
  border-color: var(--accent-blue);
}

.estimate-adjust-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
  flex: 1;
  /* 残りのスペースを埋める */
  min-width: 90px;
}

.estimate-adjust-btn {
  font-weight: bold;
  font-size: 1rem;
  width: 32px;
  height: 28px;
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: 8px;
  border: 1px solid #cbd5e1;
  background: white;
  cursor: pointer;
  box-shadow: var(--shadow-sm);
  user-select: none;
  transition: background-color 0.15s;
}

.estimate-adjust-btn:hover {
  background: #f1f5f9;
}

.estimate-value-label {
  font-size: 0.95rem;
  font-weight: 800;
  color: var(--text-main);
}

/* 5. Button Block */
.button-block {
  flex: 1;
  min-width: 100px;
}

.button-block button {
  width: 100%;
  height: 42px;
  border-radius: 12px;
  font-size: 0.875rem;
  font-weight: 800;
  background: var(--accent-blue);
  color: white;
  border: none;
  cursor: pointer;
  transition: var(--transition);
  box-shadow: 0 4px 10px rgba(15, 23, 42, 0.12);
  white-space: nowrap;
  padding: 0 8px;
  display: flex;
  align-items: center;
  justify-content: center;
}

.button-block button:hover {
  filter: brightness(1.15);
}

/* --- Mobile Stack View --- */
@media (max-width: 1023px) {
  .task-entry-flow {
    display: flex; /* Flexboxコンテナにして縦並びを有効化 */
    flex-direction: column;
    align-items: stretch;
    gap: 14px;
  }

  .title-block,
  .deadline-block,
  .category-block,
  .estimate-block,
  .button-block {
    flex: 1;
    width: 100%;
    min-width: 0;
  }

  .deadline-inputs select {
    flex: 1;
  }

  .button-block button {
    margin-top: 4px;
  }

  .estimate-inline-wrapper {
    height: auto;
    padding: 10px 12px;
  }
}

@media (max-width: 1023px) {
  .mission-entry-card {
    padding: 16px !important;
  }
}

.header-title-area {
  display: flex;
  flex-direction: column; /* モバイルと同様にtitleの下にsubtitleを出すスリム構成 */
  align-items: flex-start;
  gap: 4px;
  width: auto; /* 520pxの巨大な横長固定幅を撤去し、知的な省スペース化を実現 */
  min-width: 220px; /* 🚀 言語変更や大人/子ども切り替え時の横幅がたつきを防ぐため最小幅を確保 */
  flex-shrink: 1; /* 必要に応じた縮小を許可 */
}

.subtitle {
  font-size: 14px; /* 少しスマートに縮小 */
  color: var(--text-muted);
  font-weight: 500;
  margin: 0;
  display: block;
  /* 🚀 テキスト選択とテキストカーソル表示を完全に防ぐ */
  user-select: none !important;
  -webkit-user-select: none !important;
  cursor: default !important;
}

/* PC（Web）側ではタイマーがサイドバーにあるため、ランチャーは不要で完全非表示 */
#mobileTimerLauncherBtn {
  display: none !important;
}


/* --- 12. UX & タクタイル・インタラクティブ性向上 (Nido 2層タクタイル体系) --- */

/* 🕊️ Tier 1: すべての操作ボタン（カチッとした1pxソリッド沈み込み） */
/* scale() 縮小を完全撤廃し、タップターゲットの44px縮小防止と上質な道具の感触を両立 */
.primary-button:active,
#addTaskButton:active,
.complete-check-btn:active,
.icon-button:active,
.secondary-btn:active,
.text-button:active,
.mood-btn:active,
.estimate-adjust-btn:active,
.timer-buttons button:active,
.today-button:active,
#mobileTimerLauncherBtn:active,
.bb-send-button:active,
.color-swatch:active,
.icon-item:active,
.member-manage-add-btn:active,
.member-manage-sub-btn:active,
.member-manage-primary-btn:active,
.member-manage-danger-btn:active {
  transform: translateY(1px) !important;
  filter: brightness(0.95) !important;
  box-shadow: var(--primary-btn-active-shadow, 0 1px 2px rgba(0, 0, 0, 0.08)) !important;
  transition: transform 0.06s ease, filter 0.06s ease, box-shadow 0.06s ease !important;
}

/* 🕊️ Tier 3: タスクカード・面（静寂マイクロ） */
/* 画面全体がグラグラ揺れない静けさを維持（scale変形なし、わずかな影の変化のみ） */
.task-card:active {
  cursor: grabbing !important;
  transform: none !important;
  box-shadow: 0 2px 6px 0 rgba(0, 0, 0, 0.06) !important;
}

/* スクロールバーの最高級クオリティ化：Notion/Slack風のミニマルパッドデザイン */
::-webkit-scrollbar {
  width: 8px !important;
  height: 8px !important;
}

::-webkit-scrollbar-track {
  background: transparent !important;
}

::-webkit-scrollbar-thumb {
  background: #cbd5e1 !important;
  border-radius: 99px !important;
  border: 2px solid transparent !important;
  background-clip: padding-box !important;
  transition: background-color 0.2s !important;
}

::-webkit-scrollbar-thumb:hover {
  background: #94a3b8 !important;
  border: 2px solid transparent !important;
  background-clip: padding-box !important;
}

/* カレンダー気分のスタンプマーク（水彩風スタンプを数字の真下に完璧に重ね合わせる） */
.day-mood-mark {
  position: absolute !important;
  top: 50% !important;
  left: 50% !important;
  transform: translate(-50%, -50%) !important;
  font-size: 20px !important;
  /* 大きな水彩風マーク */
  line-height: 1 !important;
  pointer-events: none !important;
  z-index: 1 !important;
  /* 数字の背後に配置 */
  animation: stampPopIn 0.45s cubic-bezier(0.175, 0.885, 0.32, 1.275) 1 forwards !important;
  transform-origin: center center !important;
  font-weight: bold !important;
}

/* スタンプのカラフルな配色 */
.day-mood-mark.mood-circle {
  color: #10b981 !important;
  /* エメラルドグリーン */
}

.day-mood-mark.mood-triangle {
  color: #f59e0b !important;
  /* アンバーイエロー */
}

.day-mood-mark.mood-cross {
  color: #ef4444 !important;
  /* ローズレッド */
}

/* カレンダー数字自体の重なり順を上げて手前にくっきり表示する */
.day-number {
  position: relative !important;
  z-index: 2 !important;
  font-weight: 700 !important;
}

@keyframes stampPopIn {
  0% {
    transform: translate(-50%, -50%) scale(0) !important;
    opacity: 0 !important;
  }

  60% {
    transform: translate(-50%, -50%) scale(1.25) !important;
  }

  100% {
    transform: translate(-50%, -50%) scale(1) !important;
    opacity: 0.55 !important;
    /* 水彩のように上品でありつつ視認しやすく調整 */
  }
}

#mobileTimerLauncherBtn {
  display: none;
}

/* --- 13. 今日以外の日付を選択している時の特別テーマ (Archive Slate Mode: 案A シームレス一体型) --- */
body.non-today-mode {
  background-color: #e2e8f0 !important;
  /* 落ち着きと品格のあるスレートグレー背景（白カードとの対比が明瞭） */
  transition: background-color 0.35s ease !important;
}

body.non-today-mode .top-bar {
  background: transparent !important;
  border-bottom: none !important;
  margin-bottom: 16px !important;
  transition: background-color 0.35s ease !important;
}

body.non-today-mode .mission-entry-card {
  background: #ffffff !important;
  border: 1px solid rgba(148, 163, 184, 0.3) !important;
  box-shadow: 0 4px 16px rgba(15, 23, 42, 0.04) !important;
}

body.non-today-mode .matrix-quadrant,
body.non-today-mode .calendar-card,
body.non-today-mode .timer-card,
body.non-today-mode .bulletin-board-card {
  background: #ffffff !important;
  border-color: rgba(148, 163, 184, 0.3) !important;
  box-shadow: 0 4px 16px rgba(15, 23, 42, 0.04) !important;
}

body.non-today-mode #appMainTitle {
  color: #1e293b !important;
  /* 引き締まったディープスレート文字色 */
}

/* メンバー選択・ムードセレクターの背景は通常時と同じく透明に保ち、ヘッダーと自然に調和 */
body.non-today-mode .member-selector-area,
body.non-today-mode .mood-selector {
  background: transparent !important;
  border-color: transparent !important;
}

/* 🌙 ダークモード時の過去日付表示（白飛び防止・ディープネイビー） */
body.dark-mode.non-today-mode,
body.theme-universal-dark.non-today-mode {
  background-color: #0f172a !important;
}

body.dark-mode.non-today-mode .top-bar,
body.theme-universal-dark.non-today-mode .top-bar {
  background: transparent !important;
  border-bottom: none !important;
  margin-bottom: 16px !important;
}

body.dark-mode.non-today-mode .mission-entry-card,
body.dark-mode.non-today-mode .matrix-quadrant,
body.dark-mode.non-today-mode .calendar-card,
body.dark-mode.non-today-mode .timer-card,
body.dark-mode.non-today-mode .bulletin-board-card,
body.theme-universal-dark.non-today-mode .mission-entry-card,
body.theme-universal-dark.non-today-mode .matrix-quadrant,
body.theme-universal-dark.non-today-mode .calendar-card,
body.theme-universal-dark.non-today-mode .timer-card,
body.theme-universal-dark.non-today-mode .bulletin-board-card {
  background: #1e293b !important;
  border-color: rgba(148, 163, 184, 0.2) !important;
  box-shadow: 0 4px 16px rgba(0, 0, 0, 0.2) !important;
}

body.dark-mode.non-today-mode #appMainTitle,
body.theme-universal-dark.non-today-mode #appMainTitle {
  color: #cbd5e1 !important;
}

body.dark-mode.non-today-mode .member-selector-area,
body.dark-mode.non-today-mode .mood-selector,
body.theme-universal-dark.non-today-mode .member-selector-area,
body.theme-universal-dark.non-today-mode .mood-selector {
  background: transparent !important;
  border-color: transparent !important;
}

/* 📅 モバイル用過去日付閲覧フロートバナー（うっかり防止・ワンタップ復帰） */
.past-date-floating-bar {
  display: none; /* PCでは非表示 */
}

@media (max-width: 900px) {
  .past-date-floating-bar {
    position: fixed;
    bottom: 24px;
    left: 50%;
    transform: translateX(-50%);
    z-index: 1000;
    display: flex;
    align-items: center;
    gap: 10px;
    background: rgba(30, 41, 59, 0.92);
    backdrop-filter: blur(10px);
    -webkit-backdrop-filter: blur(10px);
    color: #f8fafc;
    padding: 7px 14px 7px 16px;
    border-radius: 9999px;
    box-shadow: 0 8px 24px rgba(15, 23, 42, 0.25);
    border: 1px solid rgba(255, 255, 255, 0.15);
    white-space: nowrap;
    animation: pastBarFadeIn 0.3s cubic-bezier(0.16, 1, 0.3, 1);
  }

  .past-date-floating-text {
    font-size: 14px;
    font-weight: 600;
    letter-spacing: -0.01em;
  }

  .past-date-floating-return-btn {
    position: relative;
    background: var(--accent-blue, #2563eb);
    color: #ffffff;
    border: none;
    padding: 4px 12px;
    border-radius: 9999px;
    font-size: 14px;
    font-weight: 700;
    cursor: pointer;
    box-shadow: 0 2px 6px rgba(37, 99, 235, 0.3);
    transition: transform 0.15s ease, background-color 0.15s ease;
  }

  /* Apple HIG 44px タッチ判定領域の確保（透明疑似要素） */
  .past-date-floating-return-btn::before {
    content: '';
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    min-width: 44px;
    min-height: 44px;
    width: 100%;
    height: 100%;
  }

  .past-date-floating-return-btn:active {
    transform: scale(0.95);
  }
}

@keyframes pastBarFadeIn {
  from {
    opacity: 0;
    transform: translate(-50%, 15px);
  }
  to {
    opacity: 1;
    transform: translate(-50%, 0);
  }
}

/* プレミアム・トースト通知スタイル */
.toast-container {
  position: fixed;
  bottom: var(--safe-area-bottom, 50px);
  left: 50%;
  transform: translateX(-50%);
  z-index: 99999;
  display: flex;
  flex-direction: column;
  gap: 8px;
  pointer-events: none;
}

.toast-notification {
  background: rgba(15, 23, 42, 0.9);
  color: white;
  padding: 8px 18px;
  border-radius: 30px;
  font-size: 14px;
  font-weight: bold;
  box-shadow: 0 10px 25px rgba(0, 0, 0, 0.15);
  display: flex;
  align-items: center;
  gap: 6px;
  opacity: 0;
  transform: translateY(15px);
  animation: toastFadeIn 0.25s cubic-bezier(0.175, 0.885, 0.32, 1.275) forwards,
    toastFadeOut 0.3s ease forwards 2.5s;
  /* 約2.5秒後にフェードアウトを開始 */
  backdrop-filter: blur(8px);
  border: 1px solid rgba(255, 255, 255, 0.1);
  white-space: nowrap;
}

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

@keyframes toastFadeOut {
  to {
    opacity: 0;
    transform: translateY(-15px);
  }
}

/* Tabキーで操作した時（キーボードフォーカス時）のみ、角丸に沿って優しくぽわっと光をまとわせる */
*:focus-visible {
  outline: none !important;
  box-shadow: 0 0 0 3.5px rgba(14, 165, 233, 0.45) !important;
}

/* ==========================================================================
   WIPタスク（着手中）のプレミアム・スタイリング（シグナルカラーとしてゴールドに固定）
   ========================================================================== */
.task-card.in-progress {
  border: 2px solid #f59e0b !important;
  background: linear-gradient(to right, #fffdf5, #ffffff) !important;
  box-shadow: 0 4px 12px rgba(245, 158, 11, 0.12), var(--shadow-sm) !important;
  animation: progressPulse 2.5s infinite ease-in-out;
  overflow: visible !important; /* 左肩のWIPバッジを外部に美しくはみ出させる */
  padding-top: 18px !important; /* 絶対配置の「着手中」バッジとの文字被りを美しく解消 */
}

@keyframes progressPulse {
  0% {
    box-shadow: 0 0 0 0 rgba(245, 158, 11, 0.35), var(--shadow-sm);
  }
  70% {
    box-shadow: 0 0 0 5px rgba(245, 158, 11, 0), var(--shadow-sm);
  }
  100% {
    box-shadow: 0 0 0 0 rgba(245, 158, 11, 0), var(--shadow-sm);
  }
}

/* 着手中バッジのアピアランスアニメーション（少し弾む感じ） */
.progress-badge {
  background: #f59e0b !important;
  color: #ffffff !important; /* ゴールド背景の上でくっきり見えるように白文字に固定 */
  font-size: 14px !important;
  padding: 2px 8px !important;
  border-radius: 20px !important;
  font-weight: bold !important;
  box-shadow: 0 2px 6px rgba(245, 158, 11, 0.35) !important;
  animation: badgeBounce 0.35s cubic-bezier(0.175, 0.885, 0.32, 1.275) forwards;
}

@keyframes badgeBounce {
  0% {
    transform: scale(0.6);
    opacity: 0;
  }
  100% {
    transform: scale(1);
    opacity: 1;
  }
}

/* 着手トグルボタンのホバー時のトランジション */
.task-progress-toggle-btn {
  transform: scale(1);
  transition: transform 0.15s ease, color 0.15s ease !important;
}

.task-progress-toggle-btn:hover {
  transform: scale(1.15);
}

.task-progress-toggle-btn.active {
  animation: runnerPulse 1.2s infinite ease-in-out;
}

@keyframes runnerPulse {
  0%, 100% {
    transform: scale(1);
  }
  50% {
    transform: scale(1.1);
  }
}

/* ==========================================================================
   タスクの明細（期限・見積・実績）の左寄せ・左インデント
   ========================================================================== */
.task-deadline, .task-time-details {
  align-self: flex-start !important; /* 親の中央揃えを無視して左寄せに */
  margin-left: 28px !important;      /* 左余白（ドラッグハンドルと縦位置を綺麗に揃える） */
  text-align: left !important;
}

/* ==========================================================================
   プレミアム・カスタムプロンプトモーダル (Custom Prompt Modal)
   ========================================================================== */
.custom-prompt-modal-overlay {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background: rgba(15, 23, 42, 0.4);
  backdrop-filter: blur(8px);
  z-index: 20000;
  display: flex;
  align-items: center;
  justify-content: center;
  opacity: 0;
  transition: opacity 0.2s ease;
  overflow-y: auto;
  -webkit-overflow-scrolling: touch;
  padding: 20px 0;
}

.custom-prompt-modal-overlay.active {
  opacity: 1;
}

.custom-prompt-content {
  background: white;
  border: 1px solid rgba(0, 0, 0, 0.08);
  box-shadow: 0 20px 25px -5px rgba(0, 0, 0, 0.1), 0 10px 10px -5px rgba(0, 0, 0, 0.04);
  border-radius: var(--modal-radius, 24px);
  width: 90%;
  max-width: 380px;
  padding: 24px;
  transform: scale(0.9);
  transition: transform 0.2s cubic-bezier(0.175, 0.885, 0.32, 1.15);
  display: flex;
  flex-direction: column;
  gap: 16px;
}

.custom-prompt-modal-overlay.active .custom-prompt-content {
  transform: scale(1);
}

.custom-prompt-header {
  display: flex;
  align-items: center;
  gap: 8px;
}

.custom-prompt-icon {
  font-size: 1.5rem;
}

.custom-prompt-header h3 {
  margin: 0;
  font-size: 1.1rem;
  font-weight: 800;
  color: var(--accent-blue);
}

.custom-prompt-body {
  display: flex;
  flex-direction: column;
  gap: 12px;
}

.custom-prompt-body p {
  margin: 0;
  font-size: 0.9rem;
  color: #475569;
  line-height: 1.5;
}

.custom-prompt-input-wrapper {
  position: relative;
  display: flex;
  align-items: center;
  background: #f1f5f9;
  border: 2px solid transparent;
  border-radius: 12px;
  padding: 6px 14px;
  transition: all 0.2s ease-in-out;
}

.custom-prompt-input-wrapper:focus-within {
  border-color: var(--accent-blue);
  background: white;
  box-shadow: 0 0 0 4px rgba(37, 99, 235, 0.15) !important;
}

#customPromptInput {
  flex: 1;
  border: none !important;
  background: transparent !important;
  outline: none !important; /* ブラウザ標準のダブル青枠を完全に消去 */
  box-shadow: none !important;
  font-size: 1.2rem;
  font-weight: bold;
  color: #1e293b;
  padding: 6px 0;
  width: 100%;
}

#customPromptInput::placeholder {
  color: #94a3b8 !important;
  opacity: 0.8 !important;
}
body.dark-mode #customPromptInput::placeholder,
body.theme-universal-dark #customPromptInput::placeholder {
  color: #64748b !important;
  opacity: 0.8 !important;
}

.custom-prompt-unit {
  font-size: 0.9rem;
  font-weight: bold;
  color: #64748b;
  margin-left: 8px;
}

.custom-prompt-sub {
  font-size: 1rem !important;
  color: #94a3b8 !important;
}

.helper-key-btn {
  padding: 6px 12px;
  font-size: 0.875rem;
  font-weight: 700;
  border-radius: 8px;
  border: 1px solid rgba(0, 0, 0, 0.06);
  background: #f1f5f9;
  color: #475569;
  cursor: pointer;
  transition: all 0.15s ease;
  user-select: none;
  -webkit-user-select: none;
}

.helper-key-btn:hover {
  background: #e2e8f0;
  color: #1e293b;
}

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

/* プリセットボタンは少しテーマカラー寄りでおしゃれに */
.helper-key-btn.preset,
.helper-key-btn[data-val="h"],
.helper-key-btn[data-val="m"] {
  background: var(--helper-btn-bg, rgba(var(--theme-rgb), 0.06)) !important;
  color: var(--helper-btn-text, var(--theme-color)) !important;
  border-color: var(--helper-btn-border, rgba(var(--theme-rgb), 0.12)) !important;
}

.helper-key-btn.preset:hover,
.helper-key-btn[data-val="h"]:hover,
.helper-key-btn[data-val="m"]:hover {
  background: var(--helper-btn-hover-bg, rgba(var(--theme-rgb), 0.12)) !important;
  color: var(--helper-btn-text, var(--theme-color)) !important;
  border-color: var(--helper-btn-hover-border, rgba(var(--theme-rgb), 0.2)) !important;
}

/* ⌨️ 本格テンキーグリッド内のキーレイアウト調整 */
.custom-prompt-tenkey-grid .helper-key-btn {
  height: 44px !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  font-size: 1.15rem !important;
  padding: 0 !important;
  border-radius: 10px !important;
}

.custom-prompt-actions {
  display: flex;
  gap: 10px;
  justify-content: flex-end;
  margin-top: 8px;
}

.custom-prompt-actions button {
  padding: 10px 20px;
  border-radius: 12px;
  font-weight: bold;
  font-size: 0.9rem;
  cursor: pointer;
  transition: all 0.15s;
}

.custom-prompt-actions .secondary-btn {
  background: #f1f5f9;
  border: 1px solid #cbd5e1;
  color: #475569;
  border-radius: var(--border-radius, 12px);
}

.custom-prompt-actions .secondary-btn:hover {
  background: #e2e8f0;
  border-color: #94a3b8;
  color: #334155;
}

/* ダークモード対応 */
body.dark-mode .custom-prompt-content,
body.theme-universal-dark .custom-prompt-content {
  background: #1e293b;
  border-color: rgba(255, 255, 255, 0.08);
}

body.dark-mode .custom-prompt-body p,
body.theme-universal-dark .custom-prompt-body p {
  color: #cbd5e1;
}

body.dark-mode .custom-prompt-input-wrapper,
body.theme-universal-dark .custom-prompt-input-wrapper {
  background: #0f172a;
}

body.dark-mode #customPromptInput,
body.theme-universal-dark #customPromptInput {
  color: white;
}

body.dark-mode .custom-prompt-actions .secondary-btn,
body.theme-universal-dark .custom-prompt-actions .secondary-btn {
  background: #334155;
  border: 1px solid rgba(255, 255, 255, 0.1);
  color: #cbd5e1;
}

body.dark-mode .custom-prompt-actions .secondary-btn:hover,
body.theme-universal-dark .custom-prompt-actions .secondary-btn:hover {
  background: #475569;
  border-color: rgba(255, 255, 255, 0.2);
  color: #ffffff;
}

/* ==========================================================================
   タスクカード：カーソルフォーカス・次のオススメタスクのプレミアムハイライト
   ========================================================================== */
.task-card:focus, .task-card.next-suggested-highlight {
  outline: none !important;
  border-color: var(--accent-blue);
  box-shadow: 0 0 0 4px rgba(37, 99, 235, 0.15) !important;
  background: #F4F5F7;
  transition: all 0.25s ease-in-out;
}

/* ダークモード対応 */
body.dark-mode .task-card:focus, 
body.dark-mode .task-card.next-suggested-highlight,
body.theme-universal-dark .task-card:focus, 
body.theme-universal-dark .task-card.next-suggested-highlight {
  border-color: var(--accent-blue);
  box-shadow: 0 0 0 4px rgba(37, 99, 235, 0.3) !important;
  background: #1e293b;
}

/* ==========================================================================
   アバター画像：Retina対応のクッキリ描画
   ========================================================================== */
.icon-item img,
.custom-avatar-item img,
#showPersonalSettingsBtn img,
.task-card img,
.bulletin-message img {
  image-rendering: -webkit-optimize-contrast !important; /* Safari/iOS 向けシャープフィルタ */
  image-rendering: crisp-edges !important;            /* Firefox 向け */
}

/* ==========================================================================
   お絵描き消しゴム・選択（アクティブ）時のプレミアムハイライト
   ========================================================================== */
#doodleEraserBtn.selected {
  border-color: #3b82f6 !important; /* テーマの青枠 */
  box-shadow: 0 0 0 2px rgba(59, 130, 246, 0.4) !important;
  transform: scale(1.15); /* 選択時にふわっと少し大きく */
  background: #eff6ff !important; /* 淡い青背景 */
}

/* コピーボタンの基本表示（PC/モバイル共通） */
.copy-task-text-btn {
  width: var(--task-action-btn-size-pc, 30px);
  height: var(--task-action-btn-size-pc, 30px);
  min-width: var(--task-action-btn-size-pc, 30px);
  min-height: var(--task-action-btn-size-pc, 30px);
  display: inline-flex !important;
  align-items: center;
  justify-content: center;
  padding: 0 !important;
  position: relative;
}

.copy-task-text-btn svg {
  width: var(--task-action-btn-icon-size-pc, 16px);
  height: var(--task-action-btn-icon-size-pc, 16px);
}

/* 🍏 Apple HIG 準拠: タスクカード内アクションボタンの接触領域を最低44px×44pxに拡張 (PC: 30px + 7px + 7px = 44px) */
.copy-task-text-btn::after,
.edit-task-left-btn::after {
  content: '';
  position: absolute;
  top: -7px;
  bottom: -7px;
  left: -7px;
  right: -7px;
}

/* ==========================================================================
   象限コピーボタン（四角形）とエクスポートモーダルのプレミアムスタイル
   ========================================================================== */
.copy-quadrant-btn,
.kachi-sort-quadrant-btn {
  width: var(--quadrant-btn-size-pc, 34px);
  height: var(--quadrant-btn-size-pc, 34px);
  min-width: var(--quadrant-btn-size-pc, 34px);
  min-height: var(--quadrant-btn-size-pc, 34px);
  background: transparent;
  border: none;
  color: var(--text-light);
  cursor: pointer;
  padding: 0;
  border-radius: 8px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  transition: all 0.2s ease;
  opacity: 0.7;
  position: relative;
}

.copy-quadrant-btn svg,
.kachi-sort-quadrant-btn svg {
  width: var(--quadrant-btn-icon-size-pc, 18px);
  height: var(--quadrant-btn-icon-size-pc, 18px);
}

/* 🍏 Apple HIG 準拠: 象限ヘッダーアクションボタンの接触領域を最低44px×44pxに拡張 (PC: 34px + 5px + 5px = 44px) */
.copy-quadrant-btn::after,
.kachi-sort-quadrant-btn::after {
  content: '';
  position: absolute;
  top: -5px;
  bottom: -5px;
  left: -5px;
  right: -5px;
}

.copy-quadrant-btn:hover,
.kachi-sort-quadrant-btn:hover {
  background: rgba(15, 23, 42, 0.05);
  color: var(--accent-blue);
  opacity: 1;
  transform: scale(1.1);
}

.copy-quadrant-btn:active,
.kachi-sort-quadrant-btn:active {
  transform: scale(0.9);
}

.kachi-sort-quadrant-btn.active {
  background: var(--theme-color, #6366f1);
  color: #ffffff !important;
  opacity: 1;
  box-shadow: 0 0 0 2px rgba(var(--theme-rgb, 99, 102, 241), 0.3);
}

/* ダークモード対応 */
body.dark-mode .copy-quadrant-btn,
body.theme-universal-dark .copy-quadrant-btn,
body.dark-mode .kachi-sort-quadrant-btn,
body.theme-universal-dark .kachi-sort-quadrant-btn {
  color: #94a3b8;
}

body.dark-mode .copy-quadrant-btn:hover,
body.theme-universal-dark .copy-quadrant-btn:hover,
body.dark-mode .kachi-sort-quadrant-btn:hover,
body.theme-universal-dark .kachi-sort-quadrant-btn:hover {
  background: rgba(255, 255, 255, 0.08);
  color: white;
}

/* モーダル表示中のダークモード制御 */
body.dark-mode #exportModal .modal-content,
body.theme-universal-dark #exportModal .modal-content {
  background: #1e293b !important;
  color: white !important;
  box-shadow: 0 20px 25px -5px rgba(0, 0, 0, 0.5) !important;
}

body.dark-mode #exportModal #exportAllLabel,
body.theme-universal-dark #exportModal #exportAllLabel {
  color: white !important;
}

body.dark-mode #exportModal label,
body.theme-universal-dark #exportModal label {
  color: #cbd5e1 !important;
}

body.dark-mode #exportModal button.secondary-btn,
body.theme-universal-dark #exportModal button.secondary-btn {
  background: #334155 !important;
  border-color: #475569 !important;
  color: #cbd5e1 !important;
}

body.dark-mode #exportModal button.secondary-btn:hover,
body.theme-universal-dark #exportModal button.secondary-btn:hover {
  background: #475569 !important;
}

/* 新しいシステム更新がある時のリッチなゴールドオレンジ警告カラー（プレミアムネオン脈打ち効果） */
#forceHardReloadBtn.has-update {
  background-color: #fffbeb !important; /* 非常に上品で優しいクリームホワイト */
  border-color: #f59e0b !important;      /* プレミアムなゴールド境界線 */
  color: #d97706 !important;            /* 視認性の高いアンバーゴールドのアイコン */
  animation: premiumUpdatePulse 2s infinite cubic-bezier(0.4, 0, 0.2, 1) !important;
  box-shadow: 0 0 0 0 rgba(245, 158, 11, 0.6), 0 0 12px rgba(245, 158, 11, 0.3) !important;
  will-change: transform, box-shadow;
  transform: translate3d(0, 0, 0); /* Safariのハードウェア加速を強制 */
}

#forceHardReloadBtn.has-update:hover {
  background-color: #fef3c7 !important; /* ホバー時に上品なゴールドへシフト */
  border-color: #d97706 !important;
  color: #b45309 !important;
  box-shadow: 0 0 18px rgba(245, 158, 11, 0.6) !important;
}

@keyframes premiumUpdatePulse {
  0% {
    box-shadow: 0 0 0 0 rgba(245, 158, 11, 0.8), 0 0 6px rgba(245, 158, 11, 0.3);
    transform: scale(1) translate3d(0, 0, 0);
  }
  50% {
    /* 多重シャドウで光のオーラを美しくシミュレート */
    box-shadow: 0 0 0 10px rgba(245, 158, 11, 0), 0 0 18px 4px rgba(245, 158, 11, 0.5);
    transform: scale(1.08) translate3d(0, 0, 0); /* 存在感を高めるスケールアップ */
  }
  100% {
    box-shadow: 0 0 0 0 rgba(245, 158, 11, 0), 0 0 6px rgba(245, 158, 11, 0.2);
    transform: scale(1) translate3d(0, 0, 0);
  }
}

/* ==========================================================================
   設定モーダルオープン時の背後コンテンツ・非アクティブのプレミアム演出
   ========================================================================== */
.top-bar,
#mainTaskEntrySection,
.timer-card,
.matrix-controls,
.matrix-container,
.calendar-card,
.bulletin-card,
.bb-card {
  transition: opacity 0.3s ease, filter 0.3s ease !important;
}

.backdrop-inactive {
  opacity: 0.45 !important;
  filter: blur(1.5px) grayscale(15%) !important;
}

/* iOS/iPad Safari 横画面等でのフォーカス時自動ズームを防ぐため、フォントサイズを16px以上に統一 */
@media screen and (max-width: 1024px) {
  input[type="text"],
  input[type="number"],
  input[type="date"],
  input[type="password"],
  select,
  textarea {
    font-size: 16px !important;
  }
}

/* iPad/タブレット横画面および低解像度デスクトップ向け (1024px〜1520px) のプレミアム見切れ・レイアウト崩れ根本対策 */
@media (min-width: 1024px) and (max-width: 1520px) {
  /* 1. メインエリアの余白を最適化して表示可能幅を拡張 */
  .main-content-area {
    padding: 0 20px 40px !important;
    gap: 20px !important;
  }

  /* メイン画面のタスク入力部分の不要な余白を削減してスリムにフィット */
  .mission-entry-card {
    padding: 10px 16px !important;
  }

  /* 2. ヘッダーのタイトルエリア（すでにデフォルトで縦並び化）の文字サイズをiPad向けに最適化 */
  .header-title-area h1 {
    font-size: 24px !important;
    letter-spacing: -0.03em !important;
  }

  .header-title-area .subtitle {
    font-size: var(--font-size-min-input, 1rem) !important;
    margin: 0 !important;
  }

  /* 3. タスク追加入力フォームを境界線が美しく細い「2×2 グリッド構成」にリデザイン */
  .task-entry-flow {
    display: grid !important;
    grid-template-columns: minmax(0, 1fr) 240px !important; /* ピタッと一直線に揃う2カラム設計 */
    grid-template-rows: auto auto !important;
    gap: 16px 20px !important;
    box-sizing: border-box;
    align-items: flex-start !important; /* 上端を揃えて misalignment を完全抹殺 */
  }

  .title-block {
    grid-column: 1 / 2 !important;
    grid-row: 1 / 2 !important;
    width: 100% !important;
    min-width: 0 !important;
  }

  .title-block textarea#taskTitleInput {
    height: 42px !important; /* 期日選択ボックスと縦幅を完璧に一致 */
    box-sizing: border-box !important;
  }

  .deadline-block {
    grid-column: 2 / 3 !important;
    grid-row: 1 / 2 !important;
    width: 100% !important;
    min-width: 0 !important;
  }

  .deadline-block .deadline-inputs {
    height: 42px !important; /* 縦幅を完璧に一致 */
    box-sizing: border-box !important;
  }

  .category-block {
    grid-column: 1 / 2 !important;
    grid-row: 2 / 3 !important;
    width: 100% !important;
    min-width: 0 !important;
  }

  .category-block select {
    max-width: 280px !important; /* 無駄に横に間延びするのを防ぎ、期日選択幅と美しく調和 */
  }

  .estimate-block.estimate-action-block {
    grid-column: 2 / 3 !important;
    grid-row: 2 / 3 !important;
    width: 100% !important;
    min-width: 220px !important; /* 見積アジャスターと追加ボタンが絶対に重ならない安全な幅 */
  }
}

/* ==========================================================================
   カチカチソート（Kachi-Kachi Sort）専用スタイル
   ========================================================================== */

/* カチカチソート起動ボタンのプレミアムスタイル（黒枠を廃止し、美しい極細枠とソフト影を付与） */
.kachi-sort-btn {
  background: #ffffff;
  color: #334155;
  border: 1px solid rgba(15, 23, 42, 0.08);
  border-radius: 8px;
  font-size: 0.875rem;
  font-weight: 800;
  padding: 6px 14px;
  cursor: pointer;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
  box-shadow: 0 1px 3px rgba(15, 23, 42, 0.05), 0 2px 8px rgba(15, 23, 42, 0.04);
  transition: all 0.2s cubic-bezier(0.16, 1, 0.3, 1);
}

.kachi-sort-btn:hover {
  background: #f8fafc;
  transform: translateY(-1px);
  box-shadow: 0 4px 12px rgba(15, 23, 42, 0.08);
  border-color: rgba(15, 23, 42, 0.12);
}

.kachi-sort-btn:active {
  transform: translateY(0);
  box-shadow: 0 1px 3px rgba(15, 23, 42, 0.05);
}

/* 選択待ち状態のタスクカード（パルス点滅を廃止し、極小電力で動作する高品位な静的ダッシュ枠線へ） */
.task-card.kachi-sort-waiting {
  cursor: pointer;
  border: 2px dashed rgba(var(--theme-rgb), 0.3) !important;
  background-color: rgba(var(--theme-rgb), 0.01) !important;
  transition: all 0.22s var(--ease) !important;
  transform: scale(0.98) !important;
}

.task-card.kachi-sort-waiting:hover {
  transform: translateY(-2px) scale(1.01) !important;
  border-color: var(--theme-color) !important;
  box-shadow: 0 4px 12px rgba(var(--theme-rgb), 0.18) !important;
}

/* 選択済みのタスクカード（ユーザーの選択色にダイナミックに変化！） */
.task-card.kachi-sort-selected {
  border: 2.5px solid var(--theme-color) !important;
  background-color: rgba(var(--theme-rgb), 0.06) !important;
  animation: none !important;
  transform: scale(1) !important;
}

/* カチカチソート時の順位バッジ */
.kachi-sort-badge {
  position: absolute !important;
  top: -8px !important;
  right: -8px !important;
  background: var(--theme-color, #6366f1) !important;
  color: var(--theme-text-color, #ffffff) !important;
  font-size: 0.875rem !important;
  font-weight: 800 !important;
  width: 22px !important;
  height: 22px !important;
  border-radius: 50% !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  box-shadow: 0 2px 6px rgba(0, 0, 0, 0.2) !important;
  z-index: 20 !important;
}

/* 🎛️ カチカチソート（Kachi-Kachi Sort）フローティング操作パネル (PC & モバイル両方対応のプレミアム設計) */
.kachi-sort-floating-bar {
  position: fixed;
  bottom: 24px;
  left: 50%;
  transform: translateX(-50%) translateY(100px); /* 初期は画面外 */
  width: 90%;
  max-width: 480px;
  background: rgba(255, 255, 255, 0.95);
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
  border: 1px solid rgba(15, 23, 42, 0.08);
  border-radius: 20px;
  box-shadow: 0 20px 40px rgba(15, 23, 42, 0.15), 0 1px 3px rgba(15, 23, 42, 0.05);
  padding: 16px 20px;
  z-index: 10000;
  display: flex;
  flex-direction: column;
  gap: 12px;
  box-sizing: border-box;
  animation: kachiBarSlideUp 0.4s cubic-bezier(0.16, 1, 0.3, 1) forwards;
}

@keyframes kachiBarSlideUp {
  to {
    transform: translateX(-50%) translateY(0);
  }
}

.kachi-sort-floating-bar .bar-info {
  text-align: center;
}

.kachi-sort-floating-bar .bar-title {
  font-size: 0.95rem;
  font-weight: 800;
  color: var(--accent-blue);
  margin-bottom: 2px;
  letter-spacing: 0.03em;
}

.kachi-sort-floating-bar .bar-desc {
  font-size: 0.875rem;
  font-weight: 600;
  color: #475569;
}

.kachi-sort-floating-bar .bar-actions {
  display: flex;
  gap: 10px;
  width: 100%;
}

.kachi-sort-floating-bar .bar-actions button {
  flex: 1;
  height: 40px;
  border-radius: 10px;
  font-size: 0.875rem;
  font-weight: 800;
  cursor: pointer;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  transition: all 0.2s ease;
  border: none;
  box-sizing: border-box;
}

.kachi-sort-floating-bar #kachiCancelBtn {
  background: #f1f5f9;
  color: #475569;
  border: 1.5px solid rgba(15, 23, 42, 0.05);
}

.kachi-sort-floating-bar #kachiCancelBtn:hover {
  background: #e2e8f0;
}

.kachi-sort-floating-bar #kachiConfirmBtn {
  background: var(--theme-color);
  color: var(--theme-text-color);
  box-shadow: 0 4px 12px rgba(var(--theme-rgb), 0.15);
}

.kachi-sort-floating-bar #kachiConfirmBtn:hover {
  filter: brightness(1.05);
  transform: translateY(-1px);
  box-shadow: 0 6px 16px rgba(var(--theme-rgb), 0.22);
}

.kachi-sort-floating-bar #kachiConfirmBtn:active {
  transform: translateY(0);
}

.kachi-sort-floating-bar #kachiConfirmBtn.is-disabled {
  opacity: 0.65;
  filter: grayscale(0.2);
  box-shadow: 0 1px 3px rgba(var(--theme-rgb), 0.08);
}

/* スマホ用はさらに省スペースに自動フィット */
@media (max-width: 768px) {
  .kachi-sort-floating-bar {
    bottom: 16px;
    width: 94%;
    padding: 12px 16px;
    gap: 8px;
    border-radius: 16px;
  }
}


/* ==========================================================================
   ✨ PREMIUM PERSONAL SETTINGS & ROUTINE UX/UI REDESIGN
   ========================================================================== */

/* 1. PC版も高級感溢れるフロートモーダル（すりガラス調背景）へ */
/* 1. PC版も高級感溢れるフロートモーダル（すりガラス調背景）へ */
#personalSettingsSection {
  position: fixed !important;
  top: 3.5% !important;
  left: 50% !important;
  transform: translateX(-50%) !important;
  width: 95% !important;
  max-width: 1040px !important; /* 広々と表示してスクロールを不要にする */
  max-height: 94vh !important; /* 縦幅も十分に確保して改ページスクロールを排除 */
  overflow: hidden !important;
  background: rgba(255, 255, 255, 0.78) !important;
  backdrop-filter: blur(20px) !important;
  -webkit-backdrop-filter: blur(20px) !important;
  border: 1px solid rgba(255, 255, 255, 0.25) !important;
  border-radius: var(--modal-radius, 24px) !important; /* 美しい角丸の共通変数化 */
  box-shadow: 0 25px 60px -15px rgba(15, 23, 42, 0.3) !important;
  padding: 0 !important;
  z-index: 10000 !important;
  margin: 0 !important;
}

/* ダークモード時のすりガラス配色 */
body.dark-mode #personalSettingsSection,
body.theme-universal-dark #personalSettingsSection {
  background: rgba(30, 41, 59, 0.78) !important;
  border-color: rgba(255, 255, 255, 0.08) !important;
}



/* PC版の引き算計画：見出しや余白を上品に縮小し、1画面にスッキリ収める */
#personalSettingsSection #themeLabel,
#personalSettingsSection #iconLabel,
#personalSettingsSection .routine-section-header {
  font-size: 0.875rem !important;
  font-weight: 700 !important;
  color: #475569 !important;
  margin-top: 0 !important;
  margin-bottom: 6px !important;
  letter-spacing: 0.02em !important;
  display: block !important;
}

/* 🎛️ 共通コントロールトークンによるサイズ統一 */
#personalSettingsSection #langTabGroup,
#personalSettingsSection #roleTabGroup,
#personalSettingsSection #adultThemeTabGroup {
  height: var(--control-height-md, 36px) !important;
  border-radius: var(--control-radius-md, 8px) !important;
}

#personalSettingsSection #langTabGroup .mode-tab,
#personalSettingsSection #roleTabGroup .mode-tab,
#personalSettingsSection #adultThemeTabGroup .mode-tab {
  height: 100% !important;
  font-size: var(--control-font-size-md, 0.875rem) !important;
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
}

#personalSettingsSection #newRoutineTitleInput {
  height: var(--control-height-md, 36px) !important;
  padding: 6px 12px !important;
  font-size: 16px !important; /* 🍏 Apple HIG / iOS Safari 自動ズーム防止基準 (16px以上) */
  border-radius: var(--control-radius-md, 8px) !important;
}

#personalSettingsSection #closePersonalSettingsBtn {
  position: absolute !important;
  right: 16px !important;
  top: 50% !important;
  transform: translateY(-50%) !important;
  z-index: 10 !important;
}

#personalSettingsSection #closePersonalSettingsBtn:active {
  transform: translateY(-50%) !important;
  opacity: 0.55 !important;
}

#personalSettingsSection .quadrant-chip {
  height: var(--control-height-md, 36px) !important;
  min-height: var(--control-height-md, 36px) !important;
  font-size: var(--control-font-size-md, 0.875rem) !important;
  padding: 0 10px !important;
  border-radius: var(--control-radius-md, 8px) !important;
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
}

#personalSettingsSection .routine-shortcut-btn,
#personalSettingsSection .sometimes-pill span {
  height: var(--control-height-md, 36px) !important;
  min-height: var(--control-height-md, 36px) !important;
  line-height: 1.6 !important;
  padding: 0 12px !important;
  font-size: var(--control-font-size-md, 0.875rem) !important;
  font-weight: var(--font-weight-semibold, 600) !important;
  border-radius: var(--control-radius-md, 8px) !important;
  border: 1.5px solid rgba(15, 23, 42, 0.08) !important;
  color: var(--accent-blue) !important;
  background: #ffffff !important;
  display: inline-flex !important;
  align-items: baseline !important;
  justify-content: center !important;
  cursor: pointer !important;
  box-shadow: 0 1px 3px rgba(15, 23, 42, 0.04) !important;
  transition: all 0.2s cubic-bezier(0.16, 1, 0.3, 1) !important;
  box-sizing: border-box !important;
  user-select: none !important;
}

.routine-shortcuts-bar .routine-shortcut-btn,
.routine-shortcuts-bar .sometimes-pill span {
  height: 32px !important;
  min-height: 32px !important;
  line-height: 1 !important;
  padding: 0 12px !important;
  font-size: var(--control-font-size-md, 0.875rem) !important;
  font-weight: var(--font-weight-semibold, 600) !important;
  border-radius: var(--control-radius-md, 8px) !important;
  border: 1.5px solid rgba(15, 23, 42, 0.08) !important;
  color: var(--accent-blue) !important;
  background: #ffffff !important;
  display: inline-flex !important;
  align-items: center !important; /* 大人モード：上下中央揃えで下部空白なし */
  justify-content: center !important;
  cursor: pointer !important;
  box-shadow: 0 1px 3px rgba(15, 23, 42, 0.04) !important;
  transition: all 0.2s cubic-bezier(0.16, 1, 0.3, 1) !important;
  box-sizing: border-box !important;
  user-select: none !important;
}

/* 🧑 大人モード時：ふりがななし → align-items: center で上下中央揃え（浮き防止） */
#personalSettingsSection:not([data-role="child"]) .routine-shortcuts-bar .routine-shortcut-btn,
#personalSettingsSection:not([data-role="child"]) .routine-shortcuts-bar .sometimes-pill span {
  align-items: center !important;
  height: 32px !important;
  min-height: 32px !important;
  line-height: 1 !important;
}

/* 🧒 子どもモード時：ふりがな（ルビ）用の高さ36px＆親文字ベースライン整列 */
#personalSettingsSection[data-role="child"] .routine-shortcuts-bar .routine-shortcut-btn,
#personalSettingsSection[data-role="child"] .routine-shortcuts-bar .sometimes-pill span {
  height: var(--control-height-md, 36px) !important;
  min-height: var(--control-height-md, 36px) !important;
  line-height: 1.6 !important;
  align-items: baseline !important;
}

#personalSettingsSection .routine-shortcuts-bar ruby,
.routine-shortcuts-bar ruby {
  display: inline-ruby !important;
  ruby-position: over;
  ruby-align: center;
  vertical-align: baseline !important;
  line-height: 1;
}

#personalSettingsSection .routine-shortcuts-bar rt,
.routine-shortcuts-bar rt {
  font-size: 0.6em !important;
  letter-spacing: 0.02em !important;
  color: var(--text-muted, #64748b) !important;
  padding-bottom: 1px !important;
  user-select: none !important;
  line-height: 1 !important;
}

#personalSettingsSection .routine-shortcut-btn:hover,
#personalSettingsSection .sometimes-pill:hover span {
  background: rgba(var(--theme-rgb), 0.05) !important;
  border-color: rgba(var(--theme-rgb), 0.3) !important;
  transform: translateY(-0.5px) !important;
  box-shadow: 0 2px 5px rgba(15, 23, 42, 0.06) !important;
}

#personalSettingsSection .routine-shortcut-btn:active,
#personalSettingsSection .sometimes-pill:active span {
  transform: translateY(0) !important;
  box-shadow: 0 1px 2px rgba(15, 23, 42, 0.04) !important;
}

#personalSettingsSection .sometimes-pill input:checked + span {
  background: var(--accent-blue) !important;
  color: var(--theme-text-color) !important;
  border-color: transparent !important;
  font-weight: var(--font-weight-bold, 700) !important;
  box-shadow: 0 2px 6px rgba(var(--theme-rgb), 0.25) !important;
}

#personalSettingsSection .routine-day-pill span {
  min-width: 34px !important;
  height: var(--control-height-md, 36px) !important;
  font-size: var(--control-font-size-md, 0.875rem) !important;
  line-height: calc(var(--control-height-md, 36px) - 2px) !important;
  border-radius: var(--control-radius-md, 8px) !important;
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
}

#personalSettingsSection .estimate-adjust-btn {
  width: var(--control-height-md, 36px) !important;
  height: var(--control-height-md, 36px) !important;
  font-size: 0.9rem !important;
  border-radius: var(--control-radius-md, 8px) !important;
}

#personalSettingsSection #routineEstimateAdjustRow {
  height: var(--control-height-md, 36px) !important;
}

#personalSettingsSection #addRoutineConfirmBtn,
#personalSettingsSection #closePersonalPrefsBtn,
#addMemberConfirmBtn {
  height: var(--control-height-md, 36px) !important;
  font-size: var(--control-font-size-md, 0.875rem) !important;
  padding: 0 16px !important;
  border-radius: var(--control-radius-md, 8px) !important;
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
}

/* インナーコンテナスクロール制御 */
.settings-modal-inner {
  max-height: 94vh !important;
  overflow-y: auto !important;
  -webkit-overflow-scrolling: touch !important; /* スマホでの操作をサラサラで快適にします */
  padding: 16px 24px !important; /* 4の倍数・8pxグリッドに統一し空間リズムを整合 */
  box-sizing: border-box !important;
  border-radius: var(--modal-radius, 24px) !important; /* 美しい角丸の共通変数化 */
}

/* モーダル内スクロールバーの非表示化 */
.settings-modal-inner::-webkit-scrollbar {
  display: none !important; /* スクロールバーの見た目を完全に消します */
}

/* PC版でもモーダル表示時は背後のスクロールを止める */
body.modal-open {
  overflow: hidden !important;
}



/* 上下をわけるためのミニマルな空間境界（線は引かず、ゆとりあるホワイトスペースで美しく区切る・8pxグリッド準拠） */
.settings-divider {
  height: 0 !important;
  background: transparent !important;
  border: none !important;
  margin: 24px 0 !important; /* 8pxグリッド準拠 (24px) で充分な余白 */
  width: 100% !important;
}

/* 🕶️ 上段：設定部分（左右に分割し、下段の登録フォーム＆リストと完璧に連動） */
.settings-top-section {
  display: flex;
  gap: 24px; /* 8pxグリッド準拠 */
  width: 100%;
  box-sizing: border-box;
}

.settings-top-left-half {
  flex: 1.3; /* 左半分：モード & タイマー設定（下の登録フォームと同じ幅） */
  min-width: 0;
  display: flex;
  flex-direction: column;
  gap: 12px;
  box-sizing: border-box;
}

.settings-top-right-half {
  flex: 1.3; /* 右半分：テーマカラー & アイコン設定（下のリストと同じ幅） */
  min-width: 0;
  display: flex;
  gap: 20px; /* テーマカラーとアイコンの間隔 */
  box-sizing: border-box;
  margin-top: -4px; /* ほんの少し高い位置からスタートさせて、丸が左の日常タブと並ばず美しい段差・リズムを作る */
}

.personal-option-pill {
  position: relative !important;
  transition: all 0.2s cubic-bezier(0.16, 1, 0.3, 1) !important;
  user-select: none !important;
}

/* 🌟 Apple HIG 準拠: タッチ領域 44px の確保 */
.personal-option-pill::after {
  content: '' !important;
  position: absolute !important;
  top: -6px !important;
  bottom: -6px !important;
  left: 0 !important;
  right: 0 !important;
  min-height: 44px !important;
  pointer-events: auto !important;
}

.personal-option-pill:hover {
  background: rgba(var(--theme-rgb), 0.06) !important;
}

.personal-option-pill:active {
  transform: scale(0.97) !important;
}

.settings-top-col {
  flex: 1 !important;
  min-width: 0 !important;
  display: flex !important;
  flex-direction: column !important;
  gap: 8px !important;
  box-sizing: border-box !important;
}

/* 🕶️ 下段：ルーティンタスク関連部分 */
.settings-bottom-section {
  display: flex !important;
  gap: 24px !important; /* 8pxグリッド準拠 */
  width: 100% !important;
  margin-top: 0 !important;
  box-sizing: border-box !important;
}

.settings-bottom-left {
  flex: 1.3 !important; /* 黄色部分（登録フォーム） */
  min-width: 0 !important;
}

.settings-bottom-right {
  flex: 1.3 !important; /* 青色部分（ルーティンリスト） */
  min-width: 0 !important;
}

.routine-section-header {
  font-size: 1rem !important;
  font-weight: 800 !important;
  color: #1e293b !important;
  margin: 0 0 10px 0 !important;
  letter-spacing: 0.03em !important;
  display: block !important;
}

#routineHeaderTitle {
  visibility: hidden !important; /* 空欄にして余白として扱う */
}


/* ルーティンタスクの各見出しラベルを完全に非表示化してスッキリさせる */
#personalSettingsSection .routine-input-label {
  display: none !important;
}

/* 曜日チップ（月〜日）のスタイル */
#personalSettingsSection .routine-day-pill span {
  min-width: 34px !important;
  height: var(--control-height-md, 36px) !important;
  padding: 0 6px !important;
  font-size: var(--control-font-size-md, 0.875rem) !important;
  line-height: calc(var(--control-height-md, 36px) - 2px) !important;
  font-weight: 500 !important; /* 選択前は細字にして存在感を減らす */
  color: #64748b !important; /* 少し色を薄める */
  border: 1px solid #e2e8f0 !important; /* 境界線を薄く */
  border-radius: var(--control-radius-md, 8px) !important;
  box-shadow: none !important;
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
}

#personalSettingsSection .routine-day-pill input:checked + span {
  background: var(--accent-blue) !important;
  color: #ffffff !important;
  font-weight: 700 !important; /* 選択時は太字に */
  border-color: transparent !important;
  box-shadow: 0 2px 4px rgba(2, 132, 199, 0.15) !important;
}

#personalSettingsSection .settings-footer-sticky {
  margin-top: 12px !important;
  padding-top: 10px !important;
}

#personalSettingsSection .settings-column {
  padding: 0 !important;
}

#personalSettingsSection .settings-group {
  gap: 10px !important;
}

/* PC overlay: compact routine tasks with custom scroll */
#personalSettingsSection #routineTasksList {
  max-height: 480px !important; /* 表示領域を限界まで広げてスクロールを最小化 */
  overflow-y: auto !important;
}

/* Premium list layout for routine task items (saves vertical space, looks sleek) */
.routine-task-item {
  display: flex !important;
  justify-content: space-between !important;
  align-items: center !important;
  padding: 6px 8px !important; /* 行間隔を狭くコンパクトに */
  margin: 0 !important;
  background: transparent !important;
  border-bottom: 1px solid #f1f5f9 !important; /* リストの区切り線 */
  cursor: pointer !important;
  transition: all 0.15s ease !important;
  box-shadow: none !important;
  border-radius: 0 !important;
}

.routine-task-item:last-child {
  border-bottom: none !important;
}

.routine-task-item:hover {
  background: #f8fafc !important;
}

/* 編集中のルーティンタスクのプレミアムハイライト */
.routine-task-item.editing {
  background: #f0f9ff !important;
  border-bottom-color: transparent !important;
  border-radius: 8px !important;
  padding-left: 12px !important;
  padding-right: 12px !important;
}

/* ⏸ ルーティン一時停止バッジ（見た目コンパクト24px、Apple HIG準拠 44px × 44px タッチターゲット確保） */
.routine-pause-badge {
  position: relative !important;
  background: #fef3c7 !important;
  color: #b45309 !important;
  border: 1px solid #fde68a !important;
  padding: 3px 8px !important;
  border-radius: 6px !important;
  font-weight: 600 !important;
  font-size: 14px !important;
  display: inline-flex !important;
  align-items: center !important;
  gap: 4px !important;
  cursor: pointer !important;
  min-height: 24px !important;
  line-height: 1.2 !important;
  touch-action: manipulation !important;
  transition: all 0.15s ease !important;
}

/* 🎯 タップ領域の拡大（見た目24px、Apple HIG準拠 44px × 44px 接触領域確保: 24 + 10*2 = 44px） */
.routine-pause-badge::before {
  content: '' !important;
  position: absolute !important;
  top: -10px !important;
  bottom: -10px !important;
  left: -8px !important;
  right: -8px !important;
}

.routine-pause-badge .pause-badge-x {
  font-size: 14px !important;
  opacity: 0.8 !important;
  margin-left: 2px !important;
}

.routine-pause-badge:hover {
  filter: brightness(0.95);
  transform: translateY(-0.5px);
}

body.dark-mode .routine-pause-badge,
body.theme-universal-dark .routine-pause-badge {
  background: #78350f !important;
  color: #fef3c7 !important;
  border-color: #92400e !important;
}

body.dark-mode .routine-pause-badge:hover,
body.theme-universal-dark .routine-pause-badge:hover {
  filter: brightness(1.15);
}

/* ⏸ ルーティン停止ダイアログのボタンホバースタイル（純粋CSS一元化） */
#routinePauseModal .secondary-btn:hover {
  filter: brightness(0.95);
}
#routinePauseModal .primary-button:hover {
  filter: brightness(1.1);
}


/* Eliminate individual settings cards on PC for a clean flat layout */
#personalSettingsSection .setting-item {
  background: transparent !important;
  border: none !important;
  border-radius: 0 !important;
  padding: 0 !important;
  box-shadow: none !important;
  box-sizing: border-box !important;
  transition: none !important;
}

#personalSettingsSection .setting-item:hover {
  background: transparent !important;
  border-color: transparent !important;
  transform: none !important;
  box-shadow: none !important;
}

/* 🕶️ セグメント化タブコントロール（!important を全廃したクリーンなCSS設計） */
.mode-tab-group {
  display: flex;
  background: #f1f5f9;
  border-radius: 8px;
  padding: 2px;
  gap: 4px;
  border: 1px solid rgba(15, 23, 42, 0.05);
  width: 100%;
  box-sizing: border-box;
}

.mode-tab {
  flex: 1;
  text-align: center;
  padding: 4px 6px;
  font-size: 0.875rem;
  font-weight: bold;
  color: #64748b;
  border-radius: 6px;
  cursor: pointer;
  transition: all 0.22s var(--ease);
  user-select: none;
  display: inline-flex;
  align-items: center;
  justify-content: center;
}

.mode-tab:hover {
  color: #1e293b;
  background: rgba(15, 23, 42, 0.03);
}

/* 選択されたモード：現在のテーマカラーに染まり、美しいコントラストと影を纏う */
.mode-tab:has(input:checked) {
  background: var(--primary-btn-bg, var(--theme-color));
  color: var(--primary-btn-text, var(--theme-text-color));
  box-shadow: 0 0 0 1px rgba(15, 23, 42, 0.05), 0 2px 4px rgba(15, 23, 42, 0.06);
}

/* 無効化・グレーアウトされたモードタブ（Apple HIG: 視認性を保ちつつ非アクティブを明確化） */
.mode-tab.is-disabled,
.mode-tab:has(input:disabled) {
  opacity: 0.55;
  color: #94a3b8;
  cursor: not-allowed;
  pointer-events: none;
  user-select: none;
}



/* フォーム要素隠蔽用 */
.visually-hidden {
  position: absolute !important;
  width: 1px !important;
  height: 1px !important;
  padding: 0 !important;
  margin: -1px !important;
  overflow: hidden !important;
  clip: rect(0, 0, 0, 0) !important;
  white-space: nowrap !important;
  border: 0 !important;
}

/* Curated 4x2 Theme Color Palette Grid */
#themeColorPalette {
  display: grid !important;
  grid-template-columns: repeat(4, minmax(24px, 28px)) !important;
  gap: 8px !important;
  justify-content: start !important;
  padding: 6px 0 !important;
}


/* 見出しの共通クラス（Apple HIG セクション見出し基準） */
.settings-column-label {
  font-size: var(--font-size-quadrant-title, 0.875rem) !important;
  font-weight: var(--font-weight-semibold, 600) !important;
  color: #64748b !important;
  display: block !important;
  margin-bottom: 6px !important;
  user-select: none !important;
}

#themeColorPalette {
  display: grid !important;
  grid-template-columns: repeat(5, var(--personal-picker-size, 38px)) !important;
  gap: 6px !important;
  justify-content: start !important;
  padding: 2px 0 !important;
}

#themeColorPalette .color-swatch {
  width: var(--personal-picker-size, 38px) !important;
  height: var(--personal-picker-size, 38px) !important;
  min-height: var(--personal-picker-size, 38px) !important;
  border-radius: 50% !important;
  border: 2.5px solid #fff !important;
  box-shadow: 0 0 0 1px rgba(0, 0, 0, 0.1) !important;
  cursor: pointer !important;
  transition: all 0.22s var(--ease) !important;
  flex-shrink: 0 !important;
  position: relative !important;
  box-sizing: border-box !important;
}

/* 🌟 Apple HIG 準拠: タッチ判定領域 44px x 44px の確保
   38px黄金サイズを保ちつつ、透明疑似要素（::after / ::before）で上下左右3px拡張し、
   Apple HIG推奨の 44px × 44px の物理接触領域を完全確保（Gap 6pxを二等分して隙間ゼロ化） */
#themeColorPalette .color-swatch::after,
#iconPalette .icon-item::after,
#avatarDoodleBtn::after,
#avatarUploadBtn::after,
.custom-avatar-item::after,
#themeColorPalette .color-swatch::before,
#iconPalette .icon-item::before,
#avatarDoodleBtn::before,
#avatarUploadBtn::before,
.custom-avatar-item::before {
  content: '' !important;
  position: absolute !important;
  top: -3px !important;
  bottom: -3px !important;
  left: -3px !important;
  right: -3px !important;
  min-width: 44px !important;
  min-height: 44px !important;
  border-radius: 50% !important;
  pointer-events: auto !important;
}

#themeColorPalette .color-swatch:hover {
  transform: scale(1.12) !important;
  box-shadow: 0 4px 8px rgba(0, 0, 0, 0.12) !important;
}

#themeColorPalette .color-swatch.selected {
  transform: scale(1.12) !important;
  border-color: #ffffff !important;
  box-shadow: 0 0 14px rgba(var(--theme-rgb), 0.45), 0 2px 6px rgba(0, 0, 0, 0.1) !important;
}

#customThemeColorBtn {
  background: linear-gradient(135deg, #ff0000, #ff7f00, #ffff00, #00ff00, #0000ff, #4b0082, #8b00ff) !important;
}

/* Curated 5-column Icon Grid (38px 黄金サイズでくっきり美しく表示・ゼロスクロール) */
#iconPalette {
  display: grid !important;
  grid-template-columns: repeat(5, var(--personal-avatar-size, 38px)) !important;
  gap: 6px !important;
  justify-content: start !important;
  padding: 2px 0 !important;
}

#iconPalette .icon-item {
  width: var(--personal-avatar-size, var(--personal-picker-size, 38px)) !important;
  height: var(--personal-avatar-size, var(--personal-picker-size, 38px)) !important;
  min-height: var(--personal-avatar-size, var(--personal-picker-size, 38px)) !important;
  font-size: 1.25rem !important;
  background: rgba(15, 23, 42, 0.03) !important;
  border: 1.5px solid transparent !important;
  border-radius: 50% !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  transition: all 0.22s var(--ease) !important;
  flex-shrink: 0 !important;
  position: relative !important;
  box-sizing: border-box !important;
  cursor: pointer !important;
  padding: 0 !important;
  grid-row: auto !important; /* Standard emojis/birds naturally flow in rows 1 and 2 */
}

#iconPalette .icon-item img {
  width: 30px !important;
  height: 30px !important;
  object-fit: contain !important;
  image-rendering: auto !important; /* イラストのジャギーやつぶれを解消 */
  pointer-events: none !important;
}

#iconPalette .icon-item svg {
  pointer-events: none !important;
}

#iconPalette .icon-item:hover {
  background: rgba(15, 23, 42, 0.06) !important;
  transform: scale(1.1) !important;
}

#iconPalette .icon-item.selected {
  background: #ffffff !important;
  border-color: transparent !important;
  box-shadow: 0 0 14px rgba(var(--theme-rgb), 0.45), 0 2px 6px rgba(0, 0, 0, 0.1) !important;
  transform: scale(1.1) !important;
}

/* 🎨 お絵描きボタンと📷 アップロードボタンは2行目の4列目・5列目に完全固定！（計10枠で完全2行収容） */
#avatarDoodleBtn {
  grid-row: 2 !important;
  grid-column: 4 !important;
  width: var(--personal-avatar-size, 38px) !important;
  height: var(--personal-avatar-size, 38px) !important;
  min-height: var(--personal-avatar-size, 38px) !important;
  border-radius: 50% !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  border: 2px dashed #10b981 !important;
  background: #f0fdf4 !important;
  color: #10b981 !important;
  position: relative !important;
  cursor: pointer !important;
  margin: 0 !important;
  box-sizing: border-box !important;
  transition: all 0.2s ease !important;
}

#avatarUploadBtn {
  grid-row: 2 !important;
  grid-column: 5 !important;
  width: var(--personal-avatar-size, 38px) !important;
  height: var(--personal-avatar-size, 38px) !important;
  min-height: var(--personal-avatar-size, 38px) !important;
  border-radius: 50% !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  border: 2px dashed #94a3b8 !important;
  background: #f8fafc !important;
  color: #64748b !important;
  position: relative !important;
  cursor: pointer !important;
  margin: 0 !important;
  box-sizing: border-box !important;
  transition: all 0.2s ease !important;
}

/* Custom upload/doodle wrapper sizes */
.custom-avatar-wrapper {
  width: var(--personal-avatar-size, 38px) !important;
  height: var(--personal-avatar-size, 38px) !important;
  min-height: var(--personal-avatar-size, 38px) !important;
  margin: 0 !important;
  position: relative !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
}

.custom-avatar-item {
  width: var(--personal-avatar-size, 38px) !important;
  height: var(--personal-avatar-size, 38px) !important;
  min-height: var(--personal-avatar-size, 38px) !important;
  border-radius: 50% !important;
  position: relative !important;
  box-sizing: border-box !important;
  padding: 0 !important;
  cursor: pointer !important;
  overflow: visible !important;
  border: none !important;
  transition: all 0.2s ease !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  background: transparent !important;
  outline: none !important;
}

.custom-avatar-delete {
  position: absolute !important;
  top: -4px !important;
  right: -4px !important;
  width: 14px !important;
  height: 14px !important;
  border-radius: 50% !important;
  background: #a8818c !important;
  color: #ffffff !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  font-size: 14px !important;
  font-weight: bold !important;
  cursor: pointer !important;
  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.15) !important;
  transition: all 0.2s ease !important;
  z-index: 10 !important;
  border: 1px solid #ffffff !important;
}

.custom-avatar-delete:hover {
  transform: scale(1.15) !important;
  background: #ef4444 !important;
}

/* 2. Sleek Flat Routine Add Layout (No nested cards, blends into modal) */
.routine-add-compact {
  display: flex !important;
  flex-direction: column !important;
  gap: 8px !important; /* 16pxから8pxに半分化 */
  border: none !important;
  border-radius: 0 !important;
  padding: 0 !important;
  background: transparent !important;
  backdrop-filter: none !important;
  box-shadow: none !important;
  margin-top: 6px !important; /* 14pxから6pxに縮小 */
}

.routine-add-row {
  display: flex !important;
  flex-direction: column !important;
  gap: 3px !important; /* 6pxから3pxに縮小 */
  width: 100% !important;
}


.routine-input-label {
  font-size: 0.875rem !important;
  font-weight: 800 !important;
  color: var(--accent-blue) !important;
  opacity: 0.8;
  letter-spacing: 0.05em;
  display: block;
}

/* Row 1: Title Input */
#newRoutineTitleInput {
  width: 100% !important;
  height: 40px !important;
  padding: 8px 12px !important;
  border: 1.5px solid rgba(15, 23, 42, 0.08) !important;
  border-radius: 10px !important;
  font-size: 1rem !important;
  background: #ffffff !important;
  transition: all 0.2s ease !important;
  box-shadow: 0 2px 4px rgba(15, 23, 42, 0.01) !important;
  outline: none !important;
  box-sizing: border-box !important;
}

#newRoutineTitleInput:focus {
  border-color: var(--theme-color) !important;
  box-shadow: 0 0 0 3px rgba(var(--theme-rgb), 0.15), 0 4px 10px rgba(0, 0, 0, 0.05) !important;
}

/* Row 2: Quadrant Segmented Chip Selector */
.quadrant-chip-group {
  display: grid !important;
  grid-template-columns: 1fr 1fr !important;
  gap: 6px !important;
  width: 100% !important;
}

.quadrant-chip {
  width: 100% !important;
  min-width: 0 !important;
  min-height: 32px !important;
  height: auto !important;
  border: 1px solid rgba(15, 23, 42, 0.08) !important;
  border-radius: 8px !important;
  font-size: 0.875rem !important; /* 文字を少し小さくして確実に収まるように */
  white-space: normal !important; /* 改行を許可 */
  word-break: break-all !important; /* 日本語などの長文改行用 */
  overflow-wrap: anywhere !important;
  line-height: 1.15 !important;
  padding: 4px 6px !important;
  font-weight: bold !important;
  cursor: pointer !important;
  background: #ffffff !important;
  transition: all 0.2s cubic-bezier(0.16, 1, 0.3, 1) !important;
  box-shadow: var(--shadow-sm) !important;
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  color: #64748b !important;
  text-align: center !important;
}


.quadrant-chip:hover {
  transform: translateY(-1px) !important;
  box-shadow: 0 3px 5px rgba(0,0,0,0.04) !important;
}


.quadrant-chip:active {
  transform: translateY(0) !important;
}
.quadrant-chip.q1-chip {
  background: #fee2e2 !important;
  border-color: #fca5a5 !important;
  color: #991b1b !important;
}
.quadrant-chip.q2-chip {
  background: #fef3c7 !important;
  border-color: #fcd34d !important;
  color: #92400e !important;
}
.quadrant-chip.q3-chip {
  background: #dcfce7 !important;
  border-color: #86efac !important;
  color: #166534 !important;
}
.quadrant-chip.q4-chip {
  background: #e0f2fe !important;
  border-color: #bae6fd !important;
  color: #0369a1 !important;
}

/* Stylized chip selected status corresponding to quadrant colors */
.quadrant-chip.q1-chip.selected {
  background: #fee2e2 !important;
  border-color: #ef4444 !important;
  color: #b91c1c !important;
  box-shadow: 0 0 0 2.5px rgba(239, 68, 68, 0.4) !important;
}
.quadrant-chip.q2-chip.selected {
  background: #fef3c7 !important;
  border-color: #f59e0b !important;
  color: #b45309 !important;
  box-shadow: 0 0 0 2.5px rgba(245, 158, 11, 0.4) !important;
}
.quadrant-chip.q3-chip.selected {
  background: #dcfce7 !important;
  border-color: #10b981 !important;
  color: #047857 !important;
  box-shadow: 0 0 0 2.5px rgba(16, 185, 129, 0.4) !important;
}
.quadrant-chip.q4-chip.selected {
  background: #e0f2fe !important;
  border-color: #0284c7 !important;
  color: #0369a1 !important;
  box-shadow: 0 0 0 2.5px rgba(14, 165, 233, 0.4) !important;
}/* Row 3: Repeated shortcuts & day chips layout */
.routine-shortcuts-bar {
  display: flex !important;
  gap: 8px !important;
  margin-bottom: 6px !important;
  flex-wrap: wrap !important;
  align-items: center !important;
}

.routine-shortcut-btn {
  border: 1.5px solid rgba(15, 23, 42, 0.08) !important;
  color: var(--accent-blue) !important;
  background: #ffffff !important;
  border-radius: 999px !important;
  padding: 6px 14px !important;
  font-size: 0.875rem !important;
  font-weight: 700 !important;
  cursor: pointer !important;
  transition: all 0.2s ease !important;
  box-shadow: 0 2px 4px rgba(15, 23, 42, 0.04), 0 0 0 1px rgba(15, 23, 42, 0.01) !important;
}

.routine-shortcut-btn:hover {
  background: rgba(var(--theme-rgb), 0.05) !important;
  border-color: rgba(var(--theme-rgb), 0.3) !important;
  transform: translateY(-0.5px) !important;
  box-shadow: 0 3px 6px rgba(15, 23, 42, 0.06), 0 0 0 1px rgba(15, 23, 42, 0.02) !important;
}

.routine-shortcut-btn:active {
  transform: translateY(0) !important;
  box-shadow: 0 1px 2px rgba(15, 23, 42, 0.04) !important;
}

/* 曜日チップコンテナの左境界縦線 `|` を完全撤去 */
.routine-day-chip-container {
  display: flex !important;
  gap: 8px !important;
  flex-wrap: wrap !important;
  border-left: none !important; /* 縦棒を完全消去 */
  padding-left: 0 !important;
  margin-top: 4px !important;
}

/* 「ときどき」のショートカットバー内でのスタイリング調整 (平日いつも・毎日等と完全に調和したカラーに統合) */
.routine-shortcuts-bar .sometimes-pill {
  margin: 0 !important;
}

#personalSettingsSection .routine-shortcuts-bar .sometimes-pill span,
.routine-shortcuts-bar .sometimes-pill span {
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  height: 32px !important;
  min-height: 32px !important;
  line-height: 1 !important;
  padding: 0 12px !important;
  font-size: var(--control-font-size-md, 0.875rem) !important;
  font-weight: var(--font-weight-semibold, 600) !important;
  border-radius: var(--control-radius-md, 8px) !important;
  border: 1.5px solid rgba(15, 23, 42, 0.08) !important;
  color: var(--accent-blue) !important;
  background: #ffffff !important;
  box-shadow: 0 1px 3px rgba(15, 23, 42, 0.04) !important;
  transition: all 0.2s cubic-bezier(0.16, 1, 0.3, 1) !important;
  box-sizing: border-box !important;
  cursor: pointer !important;
  user-select: none !important;
}

#personalSettingsSection[data-role="child"] .routine-shortcuts-bar .sometimes-pill span {
  height: var(--control-height-md, 36px) !important;
  min-height: var(--control-height-md, 36px) !important;
  line-height: 1.6 !important;
  align-items: baseline !important;
}

.routine-shortcuts-bar .sometimes-pill:hover span {
  background: rgba(var(--theme-rgb), 0.05) !important;
  border-color: rgba(var(--theme-rgb), 0.3) !important;
  transform: translateY(-0.5px) !important;
  box-shadow: 0 3px 6px rgba(15, 23, 42, 0.06), 0 0 0 1px rgba(15, 23, 42, 0.02) !important;
}

.routine-shortcuts-bar .sometimes-pill input:checked + span {
  background: var(--accent-blue) !important;
  color: var(--theme-text-color) !important;
  border-color: transparent !important;
  box-shadow: 0 0 0 1px rgba(15, 23, 42, 0.05), 0 4px 12px rgba(15, 23, 42, 0.08), 0 2px 4px rgba(var(--theme-rgb), 0.15) !important;
}

/* Row 4: Estimator (50%) & Add (50%) */
.routine-add-row.row-actions {
  flex-direction: row !important;
  gap: 16px !important;
}

.routine-action-half {
  flex: 1 !important;
  display: flex !important;
  flex-direction: column !important;
  gap: 6px !important;
  min-width: 0 !important;
}

#routineEstimateAdjustRow {
  display: flex !important;
  justify-content: space-between !important;
  align-items: center !important;
  background: #ffffff !important;
  border: 1px solid rgba(15, 23, 42, 0.05) !important;
  border-radius: 10px !important;
  padding: 2px 4px !important;
  height: 40px !important;
  box-sizing: border-box !important;
  /* プレミアム結合シャドウ（＋追加ボタン等と調和） */
  box-shadow: 0 0 0 1px rgba(15, 23, 42, 0.05), 0 3px 8px rgba(15, 23, 42, 0.04), 0 1px 3px rgba(0, 0, 0, 0.02) !important;
  transition: all 0.22s ease !important;
}

#routineEstimateAdjustRow:hover {
  box-shadow: 0 0 0 1px rgba(15, 23, 42, 0.05), 0 4px 12px rgba(15, 23, 42, 0.06), 0 2px 4px rgba(0, 0, 0, 0.03) !important;
}

#routineEstimateAdjustRow .estimate-adjust-btn {
  width: 32px !important;
  height: 32px !important;
  border-radius: 8px !important;
  font-weight: bold !important;
  font-size: 14px !important;
  background: #f1f5f9 !important;
  border: none !important;
  color: #475569 !important;
  cursor: pointer !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  transition: all 0.2s ease !important;
  box-shadow: 0 1px 2px rgba(0, 0, 0, 0.05) !important; /* ボタン自体のソフトシャドウ */
}

#routineEstimateAdjustRow .estimate-adjust-btn:hover {
  background: #e2e8f0 !important;
  color: #1e293b !important;
  transform: translateY(-0.5px) !important;
  box-shadow: 0 2px 4px rgba(0, 0, 0, 0.08) !important;
}

#routineEstimateAdjustRow .estimate-adjust-btn:active {
  transform: translateY(0) !important;
  box-shadow: 0 1px 1px rgba(0, 0, 0, 0.05) !important;
}

#routineEstimateAdjustRow .estimate-value-label {
  font-size: 0.9rem !important;
  font-weight: 800 !important;
  color: #1e293b !important;
}

#addRoutineConfirmBtn {
  width: auto !important;
  min-width: 90px !important; /* 完了ボタンと同じ幅へ */
  height: 34px !important; /* 完了ボタンと同じ高さ */
  border-radius: 8px !important;
  font-weight: 700 !important;
  font-size: 0.875rem !important;
  padding: 0 16px !important;
  box-shadow: 0 2px 8px rgba(15, 23, 42, 0.08), 0 1px 3px rgba(15, 23, 42, 0.04) !important; /* 立体感溢れる極上のドロップシャドウ */
  background: #ffffff !important; /* 清潔感のある白背景に統一 */
  color: var(--accent-blue) !important; /* テーマカラー連動の美しい濃色 */
  border: 2px solid var(--accent-blue) !important; /* テーマカラー連動のしっかりとした境界線 */
  cursor: pointer !important;
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  transition: all 0.2s ease !important;
}

/* 通常の追加状態のときのみ、薄いグレーのホバーを適用 */
#addRoutineConfirmBtn:not(.editing-mode):hover {
  transform: translateY(-1px) !important;
  background: #f8fafc !important; /* やさしいライトグレー */
  border-color: var(--accent-blue) !important;
  box-shadow: 0 4px 12px rgba(15, 23, 42, 0.12), 0 2px 4px rgba(15, 23, 42, 0.06) !important; /* ホバー時にふわりと浮き上がる美しい影 */
}

/* 編集中の保存ボタン（editing-mode）のスタイル */
#addRoutineConfirmBtn.editing-mode {
  background: var(--accent-blue) !important;
  color: #ffffff !important;
  border-color: transparent !important;
  box-shadow: 0 2px 6px rgba(var(--theme-rgb), 0.15) !important;
}

#addRoutineConfirmBtn.editing-mode:hover {
  transform: translateY(-1px) !important;
  filter: brightness(1.05) !important;
  box-shadow: 0 4px 12px rgba(var(--theme-rgb), 0.25) !important;
  background: var(--accent-blue) !important;
}

#addRoutineConfirmBtn:active {
  transform: translateY(0) !important;
}

/* Edit Mode cancel button styling in PC row actions */
#cancelRoutineEditBtn {
  margin: 0 !important;
}

/* 完了ボタン（Done）：テーマ背景で浮き立つプレミアムボタンに変更し、枠線競合を排除 */
#personalSettingsSection #closePersonalPrefsBtn {
  box-shadow: 0 2px 6px rgba(var(--theme-rgb), 0.15) !important;
  border: 1px solid rgba(0, 0, 0, 0.08) !important;
  background: var(--primary-btn-bg, var(--theme-color)) !important;
  color: var(--primary-btn-text, var(--theme-text-color)) !important;
  transition: all 0.2s cubic-bezier(0.16, 1, 0.3, 1) !important;
}

#personalSettingsSection #closePersonalPrefsBtn:hover {
  transform: translateY(-1px) !important;
  filter: brightness(0.98) !important;
  box-shadow: 0 4px 12px rgba(var(--theme-rgb), 0.25) !important;
  background: var(--primary-btn-bg, var(--theme-color)) !important;
}

/* --- 秒コロンの透過度統一 --- */
#timer-separator {
  opacity: 0.55 !important;
}

/* --- 個人設定：完了ボタンの粘着固定フッター --- */
.settings-footer-sticky {
  position: static; /* PCではフロート固定しない */
  background: transparent;
  padding: 14px 0 0 0;
  margin: 16px 0 0 0;
  border-top: 1px solid rgba(15, 23, 42, 0.06);
  z-index: 100;
}

/* モバイル時のみ粘着固定フッターにする */
@media (max-width: 768px) {
  .settings-footer-sticky {
    position: sticky !important;
    bottom: -15px !important; /* モーダル内部の余白を吸収 */
    background: var(--card-bg) !important;
    padding: 14px 10px 10px 10px !important;
    margin: 16px -10px -10px -10px !important;
    border-top: 1px solid rgba(15, 23, 42, 0.06) !important;
    backdrop-filter: blur(10px) !important;
  }
  body.dark-mode .settings-footer-sticky {
    background: var(--card-bg) !important;
  }
}

/* --- サイドバーカード上下間隔の統一調整 --- */
.side-content {
  display: flex !important;
  flex-direction: column !important;
  gap: 10px !important; /* 黄色部分の隙間をメイングリッド等幅に詰め、完全統一！ */
}
/* 🌟 Date & Time Native Inputs Premium Layout Styling */
#taskDeadlineDateSelect::-webkit-calendar-picker-indicator,
#editTaskDeadlineDateSelect::-webkit-calendar-picker-indicator,
#taskDeadlineSelect::-webkit-calendar-picker-indicator,
#editTaskDeadlineTimeSelect::-webkit-calendar-picker-indicator {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  opacity: 0;
  cursor: pointer;
}

input[type="date"],
input[type="time"] {
  font-family: inherit;
  color: var(--text-main);
  background: transparent;
  border: none;
  outline: none;
}

/* 📅 Date Inputs Custom Placeholder Styling */
input[type="date"] {
  position: relative;
}

/* Hide native datetime fields (年/月/日) when empty and not focused */
input[type="date"]:not(.has-value):not(:focus)::-webkit-datetime-edit {
  color: transparent !important;
}

input[type="date"]::before {
  content: attr(placeholder);
  position: absolute;
  color: var(--text-light);
  font-weight: normal;
  pointer-events: none;
  display: block;
}

#taskDeadlineDateSelect::before {
  left: 0;
  top: 50%;
  transform: translateY(-50%);
  font-size: 0.875rem;
}

#editTaskDeadlineDateSelect::before {
  left: 10px;
  top: 50%;
  transform: translateY(-50%);
  font-size: 0.9rem;
}

/* Hide custom placeholder when value is entered or input is focused */
input[type="date"].has-value::before,
input[type="date"]:focus::before {
  display: none !important;
}

/* --- アバター写真切り抜きモーダル --- */
#cropModal.crop-modal-overlay {
  display: none;
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background: rgba(0, 0, 0, 0.6);
  z-index: 15000;
  justify-content: center;
  align-items: center;
  backdrop-filter: blur(4px);
  -webkit-backdrop-filter: blur(4px);
  transition: all 0.3s ease;
}

#cropModal .crop-modal-content {
  background: #ffffff;
  width: 90%;
  max-width: 320px;
  padding: 20px;
  border-radius: var(--modal-radius, 24px);
  box-shadow: 0 20px 40px rgba(0, 0, 0, 0.2);
  text-align: center;
  transform: scale(1);
  transition: all 0.2s ease;
  animation: popIn 0.3s cubic-bezier(0.175, 0.885, 0.32, 1.275);
}

.crop-modal-title {
  margin-top: 0;
  font-size: 1.1rem;
  color: var(--text-color, #1e293b);
  margin-bottom: 15px;
  font-weight: bold;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
}

.crop-canvas-box {
  width: 240px;
  height: 240px;
  margin: 0 auto 12px auto;
  overflow: hidden;
  border: 2px solid #cbd5e1;
  background: #f8fafc;
  position: relative;
  box-shadow: inset 0 2px 8px rgba(0, 0, 0, 0.06);
  border-radius: 14px;
}

#cropCanvas {
  display: block;
  cursor: grab;
  width: 100%;
  height: 100%;
  touch-action: none;
  background-image: 
    linear-gradient(45deg, #e2e8f0 25%, transparent 25%), 
    linear-gradient(-45deg, #e2e8f0 25%, transparent 25%), 
    linear-gradient(45deg, transparent 75%, #e2e8f0 75%), 
    linear-gradient(-45deg, transparent 75%, #e2e8f0 75%);
  background-size: 10px 10px;
  background-position: 0 0, 0 5px, 5px -5px, -5px 0;
  user-select: none;
  -webkit-user-select: none;
}

.crop-zoom-container {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  margin-bottom: 10px;
  padding: 0 8px;
}

.crop-zoom-label {
  font-size: 0.875rem;
  color: #64748b;
  user-select: none;
}

#cropZoomSlider {
  flex: 1;
  accent-color: #3b82f6;
  cursor: pointer;
  height: 6px;
  border-radius: 3px;
}

.crop-instruction-text {
  font-size: 0.875rem;
  color: #64748b;
  margin-bottom: 14px;
  font-weight: bold;
}

.crop-actions {
  display: flex;
  gap: 10px;
}

.crop-btn-cancel {
  flex: 1;
  padding: 10px;
  border-radius: 12px;
  font-size: 0.9rem;
  border: 1px solid #cbd5e1;
  background: #ffffff;
  color: #475569;
  font-weight: bold;
  cursor: pointer;
  transition: background 0.2s ease;
}

.crop-btn-save {
  flex: 1;
  padding: 10px;
  border-radius: 12px;
  font-size: 0.9rem;
  background: #3b82f6;
  border: none;
  color: #ffffff;
  font-weight: bold;
  cursor: pointer;
  box-shadow: 0 4px 12px rgba(59, 130, 246, 0.2);
  transition: opacity 0.2s ease, transform 0.1s ease;
}

.crop-btn-save:active {
  transform: scale(0.98);
}

/* ==========================================================================
   🐣 Nidoカラフルテーマ (大人も選べるハッピー・マイルドカラー)
   ========================================================================= */

/* 4象限カードを優しく目に優しいパステル＆グレイッシュに色分け (3層構造アプローチ) */
body.theme-nido-colorful .matrix-quadrant.q1 {
  background-color: #fdf8f8 !important;
  border: 2px dashed #e6c5c7 !important;
}
body.theme-nido-colorful .matrix-quadrant.q1 .quadrant-header {
  background: #f9ebeb !important;
  color: #c2414c !important;
  font-weight: 800;
}

body.theme-nido-colorful .matrix-quadrant.q2 {
  background-color: #fffdf5 !important;
  border: 2px dashed #ebd6a9 !important;
}
body.theme-nido-colorful .matrix-quadrant.q2 .quadrant-header {
  background: #faf3e1 !important;
  color: #b27429 !important;
  font-weight: 800;
}

body.theme-nido-colorful .matrix-quadrant.q3 {
  background-color: #f6faf7 !important;
  border: 2px dashed #c1e3cd !important;
}
body.theme-nido-colorful .matrix-quadrant.q3 .quadrant-header {
  background: #e8f5ed !important;
  color: #2d8a55 !important;
  font-weight: 800;
}

body.theme-nido-colorful .matrix-quadrant.q4 {
  background-color: #fafcfd !important;
  border: 2px dashed #cbd5e0 !important;
}
body.theme-nido-colorful .matrix-quadrant.q4 .quadrant-header {
  background: #f0f4f8 !important;
  color: #3b6b80 !important;
  font-weight: 800;
}

/* ⌨️ テンキーを優しく落ち着いたおもちゃキーボード風にする */
body.theme-nido-colorful .custom-prompt-tenkey-grid .helper-key-btn[data-val="1"] { background: #fdf8f8 !important; color: #c2414c !important; border-color: #e6c5c7 !important; }
body.theme-nido-colorful .custom-prompt-tenkey-grid .helper-key-btn[data-val="2"] { background: #fffdf5 !important; color: #b27429 !important; border-color: #ebd6a9 !important; }
body.theme-nido-colorful .custom-prompt-tenkey-grid .helper-key-btn[data-val="3"] { background: #f6faf7 !important; color: #2d8a55 !important; border-color: #c1e3cd !important; }
body.theme-nido-colorful .custom-prompt-tenkey-grid .helper-key-btn[data-val="4"] { background: #fafcfd !important; color: #3b6b80 !important; border-color: #cbd5e0 !important; }
body.theme-nido-colorful .custom-prompt-tenkey-grid .helper-key-btn[data-val="5"] { background: #f8f6fc !important; color: #6d52a1 !important; border-color: #dfe1eb !important; }
body.theme-nido-colorful .custom-prompt-tenkey-grid .helper-key-btn[data-val="6"] { background: #f8f6fc !important; color: #6d52a1 !important; border-color: #dfe1eb !important; }
body.theme-nido-colorful .custom-prompt-tenkey-grid .helper-key-btn[data-val="7"] { background: #fdf8f8 !important; color: #c2414c !important; border-color: #e6c5c7 !important; }
body.theme-nido-colorful .custom-prompt-tenkey-grid .helper-key-btn[data-val="8"] { background: #fffdf5 !important; color: #b27429 !important; border-color: #ebd6a9 !important; }
body.theme-nido-colorful .custom-prompt-tenkey-grid .helper-key-btn[data-val="9"] { background: #f6faf7 !important; color: #2d8a55 !important; border-color: #c1e3cd !important; }
body.theme-nido-colorful .custom-prompt-tenkey-grid .helper-key-btn[data-val="0"] { background: #fafcfd !important; color: #3b6b80 !important; border-color: #cbd5e0 !important; }
body.theme-nido-colorful .custom-prompt-tenkey-grid .helper-key-btn[data-val="."] { background: #f1f2f6 !important; color: #57606f !important; border-color: #dfe4ea !important; }

/* プリセットキーボードの優しいパレットカラー */
body.theme-nido-colorful .helper-key-btn.preset[data-val="30m"] { background: #fdf8f8 !important; color: #c2414c !important; border-color: #e6c5c7 !important; }
body.theme-nido-colorful .helper-key-btn.preset[data-val="1h"] { background: #fafcfd !important; color: #3b6b80 !important; border-color: #cbd5e0 !important; }
body.theme-nido-colorful .helper-key-btn.preset[data-val="1.5h"] { background: #f6faf7 !important; color: #2d8a55 !important; border-color: #c1e3cd !important; }
body.theme-nido-colorful .helper-key-btn.preset[data-val="2h"] { background: #fffdf5 !important; color: #b27429 !important; border-color: #ebd6a9 !important; }
body.theme-nido-colorful .helper-key-btn.preset[data-val="2.5h"] { background: #fafcfd !important; color: #3b6b80 !important; border-color: #cbd5e0 !important; }

/* 1. クリックやドラッグする要素の文字選択を禁止し、カーソルを綺麗に整える */
.matrix-quadrant,
.task-card,
.nido-minimal-btn,
.control-btn,
.member-avatar,
.color-swatch,
.icon-item,
#themeColorPalette {
  -webkit-user-select: none; /* Safari用 */
  -moz-user-select: none;    /* Firefox用 */
  user-select: none;         /* 標準：文字選択を完全に禁止 */
}

/* 4. すべてのクリック可能なカスタム要素・アイコンに指マークを強制する */
button,
.clickable-icon,
#calendarGrid .calendar-day,
.quadrant-chip,
.color-swatch,
#themeColorPalette {
  cursor: pointer !important;
}
.icon-item {
  cursor: pointer !important;
}

/* 🐣 Drop Candy Palette 2026 紐付け定義 */
.complete-check-btn {
  /* 完了ボタンの色・枠線・立体シャドウを個人設定のテーマカラー（primary-btn）に連動させる */
  background-color: var(--primary-btn-bg, var(--theme-color)) !important;
  color: var(--primary-btn-text, var(--theme-text-color)) !important;
  border: var(--primary-btn-border, 1px solid rgba(15, 23, 42, 0.15)) !important;
  box-shadow: var(--primary-btn-shadow, 0 2px 6px rgba(15, 23, 42, 0.12), 0 1px 2px rgba(0, 0, 0, 0.05)) !important;
}

.timer-card {
  background-color: var(--card-bg) !important;
}

/* 論理削除されたフィードバックタスクのスタイル（赤の打ち消し） */
.task-card.deleted-feedback {
  opacity: 0.75;
  background-color: #fef2f2 !important;
  border-color: rgba(239, 68, 68, 0.35) !important;
}

body.dark-mode .task-card.deleted-feedback,
body.theme-universal-dark .task-card.deleted-feedback {
  background-color: #2d1818 !important;
  border-color: rgba(239, 68, 68, 0.4) !important;
}

.task-card.deleted-feedback .task-title {
  text-decoration: line-through !important;
  text-decoration-color: #ef4444 !important; /* 打ち消し線を赤にする */
  color: #ef4444 !important; /* 文字も赤にする */
}

/* 復活（削除取消）ボタンのスタイル */
.complete-check-btn.restore-btn {
  background-color: #f43f5e !important;
  color: white !important;
  border-color: #f43f5e !important;
}
.complete-check-btn.restore-btn:hover {
  background-color: #e11d48 !important;
  border-color: #e11d48 !important;
}

/* NidoColors時のタイマー周りの文字色を柔らかいグレーに設定 */
body.theme-nido-colorful .timer-card .card-header h2,
body.theme-nido-colorful .timer-card .card-header h3,
body.theme-nido-colorful .timer-card .shared-timer-display:not(.overrun) {
  color: #475569 !important; /* 柔らかいグレー */
}

/* セレクトボックスやプルダウン等、テキスト入力以外の要素で不要な縦棒カーソル（キャレット）が表示されるのを防ぐ */
select,
.icon-button,
.complete-check-btn,
.delete-task-btn,
#calendarGrid .calendar-day {
  caret-color: transparent !important;
}

/* Nido便利な時短ジェスチャーガイド用のホバー・テキスト選択無効化設定 */
/* クリックイベントが背後の要素に透過するのを防ぎ、かつホバー時の不要な入力カーソル（Iビーム）を表示させないようにします */
#nidoGuideModal .modal-content {
  pointer-events: auto;
  user-select: none;
  -webkit-user-select: none;
  -moz-user-select: none;
  -ms-user-select: none;
  cursor: default;
}
#nidoGuideModal .modal-content * {
  cursor: default;
}
#nidoGuideModal .modal-content button,
#nidoGuideModal .modal-content a {
  pointer-events: auto;
  cursor: pointer;
}

/* Nido紹介モーダル（about Nido）用のホバー・テキスト選択無効化設定 */
#nidoAboutModal .modal-content {
  pointer-events: auto;
  user-select: none;
  -webkit-user-select: none;
  -moz-user-select: none;
  -ms-user-select: none;
  cursor: default;
}
#nidoAboutModal .modal-content * {
  cursor: default;
}
#nidoAboutModal .modal-content button,
#nidoAboutModal .modal-content a {
  pointer-events: auto;
  cursor: pointer;
}

/* ② 個人設定用のホバー・入力制御設定 */
#personalSettingsSection {
  user-select: none;
  -webkit-user-select: none;
  -moz-user-select: none;
  -ms-user-select: none;
}

/* 基本的にすべての入力フィールドとセレクトボックスを無効化（Iビームやフォーカス防止） */
#personalSettingsSection input,
#personalSettingsSection select,
#personalSettingsSection textarea {
  pointer-events: none;
  cursor: default;
}

/* 必要な入力・操作フィールドのみ明示的に有効化 */
#personalSettingsSection #newRoutineTitleInput,
#personalSettingsSection #colorHexInput,
#personalSettingsSection #routineEstimateValueLabel {
  pointer-events: auto !important;
  user-select: text !important;
  -webkit-user-select: text !important;
  -moz-user-select: text !important;
  -ms-user-select: text !important;
  cursor: text !important;
}

/* スライダーやカラーマップなど、操作が必要な特殊なinput要素は有効化 */
#personalSettingsSection #hueSlider {
  pointer-events: auto !important;
  cursor: pointer !important;
}

/* すべてのボタン、リンク、ラベル（チェックボックス等のトグル用）、カスタムスウォッチ等は操作可能にする */
#personalSettingsSection button,
#personalSettingsSection a,
#personalSettingsSection label,
#personalSettingsSection .color-swatch,
#personalSettingsSection .icon-item,
#personalSettingsSection #avatarDoodleBtn,
#personalSettingsSection #avatarUploadBtn,
#personalSettingsSection #nidoAboutTrigger,
#personalSettingsSection #developerCsvImportBtn,
#personalSettingsSection #contactAuthorBtn,
#personalSettingsSection #colorMapCanvas,
#personalSettingsSection #colorMapCursor,
#personalSettingsSection #routineTasksList {
  pointer-events: auto !important;
}



/* 各象限ヘッダー内のマスターチェックボックス用スタイル */
.quadrant-master-checkbox {
  width: 16px;
  height: 16px;
  cursor: pointer;
  accent-color: var(--color-primary, #6366f1);
  border-radius: 4px;
}

/* ==========================================
   🔗 シンプルモード：関連リンク（リモコン）
   ========================================== */

/* リンクボタン本体 — タップしやすい大きなフラットボタン */
.simple-link-button {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 12px 14px;
  text-decoration: none;
  transition: background 0.15s;
  min-width: 0;
  flex: 1;
  -webkit-tap-highlight-color: transparent; /* スマホタップ時の青光り防止 */
  user-select: none;
}

/* タイプ選択ボタン（フォーム内の4アイコンボタン） */
.link-type-btn {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 3px;
  padding: 7px 6px 6px;
  border: 1.5px solid #e2e8f0;
  border-radius: 9px;
  background: #fff;
  cursor: pointer;
  font-size: 1.2rem;
  transition: border-color 0.15s, background 0.15s, box-shadow 0.15s;
  -webkit-tap-highlight-color: transparent;
  user-select: none;
}

.link-type-btn span {
  font-size: 0.875rem;
  font-weight: 600;
  color: #64748b;
  line-height: 1;
  font-family: inherit;
}

.link-type-btn:hover {
  border-color: var(--color-primary, #6366f1);
  background: rgba(99, 102, 241, 0.05);
}

.link-type-btn.active {
  border-color: var(--color-primary, #6366f1);
  background: rgba(99, 102, 241, 0.08);
  box-shadow: 0 0 0 2px rgba(99, 102, 241, 0.15);
}

.link-type-btn.active span {
  color: var(--color-primary, #6366f1);
}

/* モバイル最適化 */
@media (max-width: 600px) {
  .simple-link-button {
    padding: 13px 12px; /* モバイルはさらに押しやすく */
  }
  .link-type-btn {
    padding: 8px 4px 7px;
    font-size: 1.1rem;
  }
}

/* ==========================================================================
   🧼 シンプルモード（旅行テーマ等）有効時の不要コンポーネント一括非表示
   ========================================================================== */

/* 通常モード時は非表示 */
#documentViewerCard,
#simpleLinkPanel {
  display: none !important;
}

/* シンプルモード時のみ表示（side-content内の配置） */
body.simple-mode-active #documentViewerCard,
body.simple-mode-active #simpleLinkPanel {
  display: block !important;
}

/* 不要なコンポーネントを一括非表示（シンプルモード時は入力欄の期限・見積ピル行も非表示化） */
body.simple-mode-active .calendar-card,
body.simple-mode-active .timer-card,
body.simple-mode-active .deadline-block,
body.simple-mode-active .estimate-inline-wrapper,
body.simple-mode-active #taskEntrySubRow,
body.simple-mode-active #deadlineOptionGroup,
body.simple-mode-active #estimateOptionGroup,
body.simple-mode-active #toggleAllCompletedBtn,
body.simple-mode-active .matrix-controls { 
  display: none !important; 
}

/* シンプルモード時：上部入力フォームとマトリクス間の余白を極限まで削減 */
body.simple-mode-active #mainTaskEntrySection,
body.simple-mode-active .mission-entry-card {
  margin-bottom: 8px !important;
}
body.simple-mode-active .matrix-container {
  margin-top: 0 !important;
}

/* ==========================================================================
   🧹 シンプルモード：明細（タスクカード）の通常モード連動・美化スタイル
   ========================================================================== */

/* 明細（タスクカード）を通常モード同様に美しく整列・収めるスタイル */
.task-card.checklist-item {
  position: relative !important;
  min-height: 40px !important;
  display: flex !important;
  align-items: flex-start !important; /* 🌟 長いタスク（複数行）でも上揃えで美しく整列 */
  gap: 10px !important;
  width: auto !important; /* 🌟 100%による横はみ出し・スクロールバーを完全防止 */
  padding: 8px 14px !important;
  margin: 6px 12px !important; /* 🌟 通常モードと同じ左右12pxマージンで完全一直線に整列 */
  border-radius: 12px !important;
  box-sizing: border-box !important;
}

/* 完了タスク時のマージン・パディング最適化 */
.task-card.checklist-item.completed {
  margin: 3px 12px !important;
  padding: 6px 14px !important;
  min-height: 36px !important;
}

/* チェックボックスの垂直位置（1行目のテキストと美しく揃える） */
.task-card.checklist-item .task-left-content {
  display: flex !important;
  flex-direction: row !important;
  align-items: center !important;
  flex-shrink: 0 !important;
  margin-top: 2px !important;
}

.task-card.checklist-item .task-checklist-checkbox {
  margin: 0 !important;
  width: 18px !important;
  height: 18px !important;
  cursor: pointer !important;
}

/* 本文テキストエリア（横スクロールバーを防止し自然に折り返し、右上の削除ボタンとの重なりを防ぐ） */
.task-card.checklist-item .task-main-content {
  flex: 1 1 auto !important;
  min-width: 0 !important;
  padding: 0 28px 0 0 !important;
}

.task-card.checklist-item .task-title {
  font-size: 1rem !important;
  font-weight: 600 !important;
  line-height: 1.4 !important;
  margin: 0 !important;
  white-space: pre-wrap !important;
  word-break: break-word !important;
  overflow-wrap: anywhere !important;
}



/* 個人設定モーダル内のルーティンタスク設定セクション＆区切り線を非表示 */
body.simple-mode-active .settings-bottom-section,
body.simple-mode-active .settings-divider {
  display: none !important;
}

/* 一括チェックボックスの位置 */
body.simple-mode-active .quadrant-master-checkbox {
  margin-right: 8px !important;
  width: 18px !important;
  height: 18px !important;
  cursor: pointer !important;
}

/* シンプルモード時：しおり画像エリアの縦幅を自動フィット（インラインのmin-height:400pxを打ち消す） */
body.simple-mode-active #documentViewerCard {
  min-height: auto !important;
}
body.simple-mode-active #documentViewerCard:not(.empty-attachment) #docViewerContent,
body.simple-mode-active #documentViewerCard:not(.empty-attachment) #docDisplayWrapper {
  min-height: auto !important;
  border: none !important;
  background: transparent !important;
}

/* ==========================================
   🔒 セッションタイムアウト ロック画面 (Session Timeout Lock Screen)
   ========================================== */
.session-timeout-overlay {
  position: fixed;
  top: 0;
  left: 0;
  width: 100vw;
  height: 100vh;
  background: rgba(15, 23, 42, 0.98);
  color: #f8fafc;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  z-index: 99999;
  font-family: system-ui, -apple-system, sans-serif;
  text-align: center;
  padding: 20px;
  box-sizing: border-box;
}

.session-timeout-card {
  background: rgba(30, 41, 59, 0.85);
  padding: 40px;
  border-radius: 20px;
  border: 1px solid rgba(255, 255, 255, 0.1);
  max-width: 450px;
  box-shadow: 0 20px 25px -5px rgba(0, 0, 0, 0.5), 0 10px 10px -5px rgba(0, 0, 0, 0.4);
  backdrop-filter: blur(12px);
  box-sizing: border-box;
}

.session-timeout-icon-wrapper {
  width: 64px;
  height: 64px;
  background: rgba(244, 63, 94, 0.15);
  border-radius: 50%;
  display: flex;
  justify-content: center;
  align-items: center;
  margin: 0 auto 20px;
}

.session-timeout-icon {
  width: 32px;
  height: 32px;
  fill: none;
  stroke: #f43f5e;
  stroke-width: 2;
}

.session-timeout-title {
  margin-top: 0;
  color: #f8fafc;
  font-size: 24px;
  font-weight: 700;
  margin-bottom: 16px;
}

.session-timeout-message {
  color: #cbd5e1;
  font-size: 15px;
  line-height: 1.6;
  margin-bottom: 28px;
}

.session-reload-button {
  background: #2563eb;
  color: white;
  border: none;
  padding: 12px 32px;
  font-size: 16px;
  font-weight: 600;
  border-radius: 8px;
  cursor: pointer;
  transition: background 0.2s;
  box-shadow: 0 4px 6px -1px rgba(37, 99, 235, 0.4);
}

.session-reload-button:hover {
  background: #1d4ed8;
}

/* ── ルビ（ふりがな）ベースライン統一システム ── */
ruby {
  ruby-position: over;
  ruby-align: center;
  vertical-align: baseline;
}

rt {
  font-size: 0.58em;
  letter-spacing: 0.05em;
  color: var(--text-muted, #6b7280);
  padding-bottom: 0.15em;
  user-select: none;
  line-height: 1.1;
}

/* 共通不可視ルビスペーサー（ベースライン整列用ダミー） */
rt.ruby-spacer {
  visibility: hidden !important;
  pointer-events: none !important;
  user-select: none !important;
}

/* ── 旅のしおり / 添付資料 オーバーレイ削除ボタン（ご要望・不具合ポスト風のスタイリッシュデザイン） ── */
.attachment-close-btn {
  background: rgba(15, 23, 42, 0.65);
  border: 1px solid rgba(255, 255, 255, 0.25);
  color: #94a3b8;
  font-size: 22px;
  font-family: Inter, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
  line-height: 1;
  border-radius: 50%;
  width: 32px;
  height: 32px;
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  transition: all 0.2s ease;
  backdrop-filter: blur(6px);
  -webkit-backdrop-filter: blur(6px);
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.3);
  padding: 0;
  outline: none;
}

.attachment-close-btn:hover {
  background: rgba(239, 68, 68, 0.9);
  color: #ffffff;
  border-color: rgba(255, 255, 255, 0.4);
  transform: rotate(90deg) scale(1.08);
  box-shadow: 0 4px 12px rgba(239, 68, 68, 0.4);
}

/* 📷 印刷・撮影選択メニューのスタイル */
.nido-print-modal-overlay {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background: rgba(15, 23, 42, 0.6);
  z-index: 30000;
  justify-content: center;
  align-items: center;
  backdrop-filter: blur(4px);
  transition: all 0.3s ease;
}

.nido-print-modal-content {
  background: #ffffff;
  border-radius: 28px;
  box-shadow: 0 20px 25px -5px rgba(0, 0, 0, 0.1), 0 10px 10px -5px rgba(0, 0, 0, 0.04);
  max-width: 480px;
  width: 92%;
  padding: 32px 24px 28px 24px;
  position: relative;
  border: 1px solid rgba(241, 245, 249, 0.8);
  animation: popIn 0.3s cubic-bezier(0.175, 0.885, 0.32, 1.275);
}


.nido-print-modal-header {
  text-align: center;
  margin-bottom: 22px;
}

.nido-print-modal-badge {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 56px;
  height: 56px;
  background: linear-gradient(135deg, #eff6ff, #dbeafe);
  border-radius: 18px;
  margin-bottom: 12px;
  color: #2563eb;
  box-shadow: 0 4px 12px rgba(37, 99, 235, 0.12);
}

.nido-print-modal-title {
  margin: 0 0 6px 0;
  font-size: 1.25rem;
  font-weight: 800;
  color: #1e293b;
}

.nido-print-modal-desc {
  margin: 0;
  font-size: 0.875rem;
  color: #64748b;
}

.nido-print-options-list {
  display: flex;
  flex-direction: column;
  gap: 12px;
  margin-bottom: 22px;
}

.print-option-btn {
  display: flex;
  align-items: flex-start;
  gap: 14px;
  padding: 14px 16px;
  background: #f8fafc;
  border: 1.5px solid #e2e8f0;
  border-radius: 16px;
  cursor: pointer;
  text-align: left;
  transition: all 0.2s ease;
}

.print-option-btn:hover {
  background: #ffffff !important;
  border-color: #2563eb !important;
  box-shadow: 0 6px 16px rgba(37, 99, 235, 0.12) !important;
  transform: translateY(-2px);
}

.print-option-btn:active {
  transform: translateY(0);
}

.print-option-icon {
  font-size: 1.5rem;
  line-height: 1;
  flex-shrink: 0;
  margin-top: 2px;
}

.print-option-body {
  flex: 1;
}

.print-option-title {
  font-weight: 800;
  font-size: 0.95rem;
  color: #0f172a;
  margin-bottom: 3px;
}

.print-option-desc {
  font-size: 0.875rem;
  color: #64748b;
  line-height: 1.4;
}

.nido-print-modal-cancel {
  width: 100%;
  padding: 10px;
  border-radius: 12px;
  font-weight: bold;
  color: #64748b;
  background: #f1f5f9;
  border: none;
  cursor: pointer;
}

/* 🖨️ 全画面見たままPDF印刷・物理印刷用のブラウザ標準（window.print）スタイル定義（PC Web画面レイアウト完全固定） */
@media print {
  @page {
    size: A4 landscape;
    margin: 4mm;
  }

  html, body {
    background: #ffffff !important;
    width: 100% !important;
    height: auto !important;
    margin: 0 !important;
    padding: 0 !important;
    -webkit-print-color-adjust: exact !important;
    print-color-adjust: exact !important;
  }

  /* 不要なモーダル・オーバーレイ・ゲームコーナー・タイマー・非印刷要素の完全遮断 */
  .modal,
  .modal-overlay,
  #arcadeModal,
  .modal-backdrop,
  .timer-card,
  .mobile-timer-launcher,
  #mobileTimerLauncherBtn,
  #temp-print-report-container,
  .quadrant-blank-add-trigger,
  .inline-task-input-row,
  .no-print {
    display: none !important;
  }

  /* 🖨️ PCデスクトップ画面のレイアウト（左:2×2マトリクス / 右:カレンダー・メモ）を強固に維持しモバイル化を遮断 */
  .main-content-area {
    display: grid !important;
    grid-template-columns: minmax(0, 1fr) 360px !important;
    gap: 16px !important;
    width: 100% !important;
    box-sizing: border-box !important;
    overflow: visible !important;
    height: auto !important;
  }

  .left-content {
    display: flex !important;
    flex-direction: column !important;
    gap: 12px !important;
    width: 100% !important;
    overflow: visible !important;
    height: auto !important;
  }

  .side-content {
    display: flex !important;
    flex-direction: column !important;
    gap: 12px !important;
    width: 360px !important;
    overflow: visible !important;
    height: auto !important;
  }

  /* 4象限マトリクスをPC画面通り2×2グリッドで展開 */
  .matrix-container {
    display: grid !important;
    grid-template-columns: 1fr 1fr !important;
    grid-template-rows: auto auto !important;
    gap: 12px !important;
    width: 100% !important;
    overflow: visible !important;
    height: auto !important;
  }

  /* 🖨️ 4象限マトリクス：象限枠の点線と内部タスクカードの長さを100%同期して包み込み */
  .matrix-quadrant {
    display: flex !important;
    flex-direction: column !important;
    width: 100% !important;
    min-height: min-content !important;
    height: auto !important;
    padding-bottom: 10px !important; /* 象限枠の点線が末尾タスク(TC-013)を包み込む余白 */
    overflow: visible !important;
    box-sizing: border-box !important;
  }

  /* 🖨️ タスクカードリスト：象限枠を押し広げて末尾まで点線枠と完全同期 */
  .task-card-list,
  #q1_tasks,
  #q2_tasks,
  #q3_tasks,
  #q4_tasks {
    display: flex !important;
    flex-direction: column !important;
    gap: 6px !important;
    flex: 1 0 auto !important;
    overflow: visible !important;
    max-height: none !important;
    height: auto !important;
  }

  /* 🖨️ タスクカード（単体）：象限枠と完全に連動し、末尾カード(TC-013)も包み込まれて安全印字 */
  .task-item,
  .task-card,
  .task-card.completed {
    overflow: visible !important;
    max-height: none !important;
    height: auto !important;
    page-break-inside: avoid !important;
    break-inside: avoid !important; /* カード単位で安全改ページし、点線枠とともに最後まで100%印字 */
  }

  /* モード別の右側カード切り替え */
  body.print-simple-mode .calendar-card {
    display: none !important;
  }
  body.print-simple-mode #documentViewerCard {
    display: block !important;
  }

  body:not(.print-simple-mode) #documentViewerCard {
    display: none !important;
  }
  body:not(.print-simple-mode) .calendar-card {
    display: block !important;
  }
}

/* 🚀 PC環境（画面幅1024px以上）では上部タスク入力カードを表示、モバイル・タブレット（1023px以下）では非表示 */
@media (max-width: 1023px) {
  #mainTaskEntrySection {
    display: none !important;
  }
}

/* ==========================================
 * 🌟 完了タスクの自動スリム化 ＆ 象限足元ピル (Things 3 / Apple Reminders風)
 * ========================================== */
.task-card.completed {
  opacity: 0.72;
  background-color: rgba(241, 245, 249, 0.7) !important;
  border-color: rgba(226, 232, 240, 0.8) !important;
  padding: 6px 14px !important;
  min-height: 38px !important;
  margin: 3px 12px !important; /* 🌟 左右は未完了カードと完全一致(12px)で一直線に揃え、上下だけキュッと詰める */
  border-radius: 10px !important;
  box-sizing: border-box !important;
  transition: all 0.25s cubic-bezier(0.16, 1, 0.3, 1) !important;
}

.task-card.completed:hover {
  opacity: 0.95;
  background-color: #ffffff !important;
}

.task-card.completed .task-title {
  font-size: 0.875rem !important;
  color: #64748b !important;
  text-decoration: line-through !important;
  line-height: 1.3 !important;
}

.task-card.completed .task-main-content {
  padding: 0 !important;
}

.task-card.completed .task-right-meta-block {
  gap: 2px !important;
}

body.dark-mode .task-card.completed,
body.theme-universal-dark .task-card.completed {
  background-color: rgba(15, 23, 42, 0.6) !important;
  border-color: rgba(51, 65, 85, 0.6) !important;
}

body.dark-mode .task-card.completed .task-title,
body.theme-universal-dark .task-card.completed .task-title {
  color: #94a3b8 !important;
}

/* 象限足元の完了タスク開閉ピルボタン */
.quadrant-completed-pill-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
  background: rgba(241, 245, 249, 0.85);
  border: 1px solid rgba(203, 213, 225, 0.7);
  border-radius: 20px;
  padding: 3px 12px;
  font-size: 0.875rem;
  font-weight: 700;
  color: #64748b;
  cursor: pointer;
  margin: 10px 12px 4px 12px !important; /* 🌟 左端12pxでカードと美しく整列 */
  align-self: flex-start;
  transition: all 0.2s cubic-bezier(0.16, 1, 0.3, 1);
  box-shadow: 0 1px 2px rgba(0, 0, 0, 0.03);
  user-select: none;
}

.quadrant-completed-pill-btn:hover {
  background: #ffffff;
  color: #334155;
  border-color: #94a3b8;
  box-shadow: 0 2px 6px rgba(0, 0, 0, 0.06);
  transform: translateY(-1px);
}

.quadrant-completed-pill-btn .pill-icon {
  font-size: 0.875rem;
  line-height: 1;
}

.quadrant-completed-pill-btn .pill-arrow {
  font-size: 0.875rem;
  transition: transform 0.2s ease;
  display: inline-block;
}

.quadrant-completed-pill-btn.collapsed .pill-arrow {
  transform: rotate(-90deg);
}

.quadrant-completed-tasks-wrapper {
  display: flex;
  flex-direction: column;
  gap: 0 !important;
  width: 100%;
  box-sizing: border-box;
  margin-top: 2px;
  transition: all 0.25s ease;
}

.quadrant-completed-tasks-wrapper.collapsed {
  display: none !important;
}

body.dark-mode .quadrant-completed-pill-btn,
body.theme-universal-dark .quadrant-completed-pill-btn {
  background: rgba(30, 41, 59, 0.8);
  border-color: rgba(71, 85, 105, 0.7);
  color: #94a3b8;
}

body.dark-mode .quadrant-completed-pill-btn:hover,
body.theme-universal-dark .quadrant-completed-pill-btn:hover {
  background: #334155;
  color: #f1f5f9;
}

/* ==========================================
 * 🏷️ タスク編集モーダル：4象限選択チップ
 * ========================================== */

/* 🏷️ タスク編集モーダル：4象限選択チップ */
#editTaskCategoryChips {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 8px;
}

.category-chip {
  padding: 8px 10px;
  border-radius: 8px;
  font-weight: 700;
  font-size: 0.875rem;
  cursor: pointer;
  border: 2px solid transparent;
  transition: all 0.2s cubic-bezier(0.16, 1, 0.3, 1);
  display: flex;
  align-items: center;
  justify-content: center;
  text-align: center;
  opacity: 0.55;
  transform: scale(0.98);
}

.category-chip[data-value="q1"] {
  background: var(--q1-bg, #fff0f3);
  color: #be123c;
  border-color: var(--q1-border, #ffccd5);
}

.category-chip[data-value="q2"] {
  background: var(--q2-bg, #fff8e7);
  color: #b45309;
  border-color: var(--q2-border, #ffe3a8);
}

.category-chip[data-value="q3"] {
  background: var(--q3-bg, #ebfbf9);
  color: #0f766e;
  border-color: var(--q3-border, #c2f1ec);
}

.category-chip[data-value="q4"] {
  background: var(--q4-bg, #f8f0fc);
  color: #6b21a8;
  border-color: var(--q4-border, #ead0f6);
}

.category-chip.selected {
  opacity: 1 !important;
  transform: scale(1.02) !important;
  box-shadow: 0 4px 10px rgba(0, 0, 0, 0.08) !important;
}

.category-chip[data-value="q1"].selected {
  border-color: #f43f5e !important;
  box-shadow: 0 0 0 2px rgba(244, 63, 94, 0.25), 0 4px 8px rgba(244, 63, 94, 0.15) !important;
}

.category-chip[data-value="q2"].selected {
  border-color: #f59e0b !important;
  box-shadow: 0 0 0 2px rgba(245, 158, 11, 0.25), 0 4px 8px rgba(245, 158, 11, 0.15) !important;
}

.category-chip[data-value="q3"].selected {
  border-color: #14b8a6 !important;
  box-shadow: 0 0 0 2px rgba(20, 184, 166, 0.25), 0 4px 8px rgba(20, 184, 166, 0.15) !important;
}

.category-chip[data-value="q4"].selected {
  border-color: #a855f7 !important;
  box-shadow: 0 0 0 2px rgba(168, 85, 247, 0.25), 0 4px 8px rgba(168, 85, 247, 0.15) !important;
}

/* ✏️ タスクカード左端の編集ボタン (SVG) */
.edit-task-left-btn {
  width: var(--task-action-btn-size-pc, 30px);
  height: var(--task-action-btn-size-pc, 30px);
  min-width: var(--task-action-btn-size-pc, 30px);
  min-height: var(--task-action-btn-size-pc, 30px);
  border: none;
  background: transparent;
  cursor: pointer;
  padding: 0;
  margin: 0;
  color: #94a3b8;
  opacity: 0.75;
  transition: color 0.15s cubic-bezier(0.16, 1, 0.3, 1), opacity 0.15s ease, transform 0.15s cubic-bezier(0.16, 1, 0.3, 1);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  border-radius: 4px;
  position: relative;
  z-index: 5;
  pointer-events: auto;
}

.edit-task-left-btn svg {
  width: var(--task-action-btn-icon-size-pc, 16px);
  height: var(--task-action-btn-icon-size-pc, 16px);
  pointer-events: none;
}

.edit-task-left-btn:hover {
  opacity: 1;
  color: var(--accent-blue, #3b82f6);
  transform: scale(1.18);
}

.edit-task-left-btn:active {
  transform: scale(0.95);
}

body.dark-mode .edit-task-left-btn,
body.theme-universal-dark .edit-task-left-btn {
  color: #64748b;
}

body.dark-mode .edit-task-left-btn:hover,
body.theme-universal-dark .edit-task-left-btn:hover {
  color: #93c5fd;
  opacity: 1;
}

/* ==========================================================================
   🏷️ 象限タイトルのインライン編集スタイル
   ========================================================================== */
.quadrant-title-clickable {
  cursor: pointer;
  border-radius: 6px;
  padding: 2px 6px;
  margin: -2px -6px;
  transition: background 0.15s ease, color 0.15s ease;
  display: inline-flex;
  align-items: center;
  user-select: none;
}

.quadrant-title-clickable:hover {
  background: rgba(15, 23, 42, 0.05);
}

.quadrant-title-clickable:hover::after {
  content: '✏️';
  font-size: 14px;
  opacity: 0.6;
  margin-left: 4px;
}

body.dark-mode .quadrant-title-clickable:hover,
body.theme-universal-dark .quadrant-title-clickable:hover {
  background: rgba(255, 255, 255, 0.08);
}

.quadrant-title-clickable.editing {
  background: transparent !important;
  padding: 0;
  margin: 0;
}

.quadrant-title-clickable.editing::after {
  content: none !important;
}

.quadrant-title-edit-box {
  display: inline-flex;
  align-items: center;
  gap: 6px;
}

.quadrant-title-inline-input {
  font-family: inherit;
  font-size: var(--font-size-quadrant-title, 0.875rem);
  font-weight: var(--font-weight-semibold, 600);
  color: var(--text-main, #1e293b);
  background: #ffffff;
  border: 1.5px solid var(--accent-blue, #6366f1);
  border-radius: 8px;
  padding: 6px 10px;
  height: 44px; /* Apple HIG推奨 44pxタップターゲット基準 */
  outline: none;
  box-shadow: 0 0 0 2.5px rgba(99, 102, 241, 0.2);
  width: 280px; /* 🚀 PC環境でゆったり20文字見渡せる280px */
  max-width: 100%;
  box-sizing: border-box;
  transition: border-color 0.15s ease, box-shadow 0.15s ease;
}

/* 💡 上限到達時のApple風やわらかシェイク＆オレンジ発光 */
@keyframes nido-input-shake {
  0%, 100% { transform: translateX(0); }
  20%, 60% { transform: translateX(-4px); }
  40%, 80% { transform: translateX(4px); }
}

.quadrant-title-inline-input.input-limit-reached {
  animation: nido-input-shake 0.3s ease-in-out;
  border-color: #f97316 !important;
  box-shadow: 0 0 0 3px rgba(249, 115, 22, 0.25) !important;
}

body.dark-mode .quadrant-title-inline-input,
body.theme-universal-dark .quadrant-title-inline-input {
  background: #1e293b;
  color: #f1f5f9;
  border-color: var(--accent-blue, #6366f1);
}

.quadrant-title-save-btn {
  background: #10b981;
  border: none;
  cursor: pointer;
  color: #ffffff;
  padding: 8px;
  border-radius: 8px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  line-height: 1;
  transition: background 0.15s ease, transform 0.15s ease;
  min-width: 44px; /* Apple HIG 44px × 44px タップターゲット基準（PC・モバイル共通） */
  min-height: 44px;
  box-sizing: border-box;
}

.quadrant-title-save-btn:hover {
  background: #059669;
  transform: scale(1.05);
}

.quadrant-title-save-btn:active {
  transform: scale(0.95);
}

.quadrant-title-reset-btn {
  background: transparent;
  border: 1px solid #cbd5e1;
  cursor: pointer;
  color: #94a3b8;
  padding: 8px;
  border-radius: 8px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  line-height: 1;
  transition: transform 0.15s ease, color 0.15s ease, border-color 0.15s ease;
  min-width: 44px; /* Apple HIG 44px × 44px タップターゲット基準（PC・モバイル共通） */
  min-height: 44px;
  box-sizing: border-box;
}

.quadrant-title-reset-btn:hover {
  color: var(--accent-blue, #6366f1);
  border-color: var(--accent-blue, #6366f1);
  transform: rotate(-45deg) scale(1.05);
}

.quadrant-title-reset-btn:active {
  transform: rotate(-45deg) scale(0.95);
}

body.dark-mode .quadrant-title-reset-btn,
body.theme-universal-dark .quadrant-title-reset-btn {
  border-color: #475569;
  color: #94a3b8;
}

/* ==========================================================================
   📌 象限ヘッダーアクションボタン（並べ替え・コピー等）共通スタイル
   ========================================================================== */
.quadrant-header-actions {
  margin-left: auto;
  display: flex;
  align-items: center;
  gap: 4px;
}

.quadrant-header-btn {
  border: none;
  background: transparent;
  padding: 4px;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  color: inherit;
  opacity: 0.6;
  transition: opacity 0.15s ease, transform 0.15s ease;
  margin: 0;
  border-radius: 4px;
  position: relative; /* 🍏 Apple HIG 44px疑似要素用 */
}

.quadrant-header-btn:hover {
  opacity: 1;
  transform: scale(1.08);
}

.quadrant-header-btn:active {
  transform: scale(0.95);
}

.quadrant-header-btn svg {
  display: block;
  stroke-linecap: round;
  stroke-linejoin: round;
}

/* ==========================================================================
   🌸 達成フレーム演出（マンスリー・お花・小鳥・ドット）
   ========================================================================== */
.achievement-frame {
  position: fixed;
  top: 0;
  bottom: 0;
  width: 52px;
  pointer-events: none;
  z-index: 2; /* 🌟 基本はタスクカード（z-index: 4）の裏側に静かに潜る */
  overflow: visible;
}

.achievement-frame-fg {
  z-index: 8; /* 🌟 たまにタスクカードの手前にちょこんと乗るお花（約15%） */
}

/* 🌟 モーダル展開時、達成フレームも背景に合わせてふわっと半透明＆ぼかし化 */
body.modal-open .achievement-frame,
.achievement-frame.backdrop-inactive {
  opacity: 0.35 !important;
  filter: blur(1.5px) grayscale(15%) !important;
  transition: opacity 0.3s ease, filter 0.3s ease !important;
}

.achievement-frame-left {
  left: 0;
}

.achievement-frame-right {
  right: 0;
}

.achievement-frame-item {
  position: absolute;
  display: flex;
  align-items: center;
  justify-content: center;
  pointer-events: none;
  transition: transform 0.3s ease;
  filter: drop-shadow(0 2px 4px rgba(0, 0, 0, 0.06));
}

.achievement-frame-item.is-foreground {
  filter: drop-shadow(0 3px 6px rgba(0, 0, 0, 0.14));
}

.achievement-frame-item.pop-in {
  animation: achievementPopBloom 0.55s cubic-bezier(0.175, 0.885, 0.32, 1.275) forwards;
}

@keyframes achievementPopBloom {
  0% {
    transform: scale(0) rotate(-25deg);
    opacity: 0;
  }
  65% {
    transform: scale(1.28) rotate(8deg);
    opacity: 1;
  }
  100% {
    transform: scale(1);
    opacity: 1;
  }
}

/* 🌟 モバイルおよびPC狭小画面（幅1200px未満）ではタスクカードの被りを防ぐため完全非表示 */
@media (max-width: 1200px) {
  .achievement-frame {
    display: none !important;
    pointer-events: none !important;
  }
}

/* ==========================================================================
   🎊 グランドフィナーレ：お花・小鳥の舞い散るお祝いパーティクル
   ========================================================================== */
.nido-celebration-container {
  position: fixed;
  top: 0;
  left: 0;
  width: 100vw;
  height: 100vh;
  pointer-events: none;
  z-index: 25000;
  overflow: hidden;
}

.nido-falling-particle {
  position: absolute;
  top: -60px;
  will-change: transform, opacity;
  animation-name: nidoParticleFall;
  animation-timing-function: cubic-bezier(0.25, 0.46, 0.45, 0.94);
  animation-fill-mode: forwards;
  filter: drop-shadow(0 4px 8px rgba(0, 0, 0, 0.12));
}

@keyframes nidoParticleFall {
  0% {
    transform: translateY(0) translateX(0) rotate(0deg);
    opacity: 0;
  }
  12% {
    opacity: 1;
  }
  45% {
    transform: translateY(45vh) translateX(var(--sway-x, 25px)) rotate(140deg);
  }
  80% {
    opacity: 1;
    transform: translateY(80vh) translateX(calc(var(--sway-x, 25px) * -0.6)) rotate(280deg);
  }
  100% {
    transform: translateY(108vh) translateX(calc(var(--sway-x, 25px) * 0.4)) rotate(360deg);
    opacity: 0;
  }
}

/* ==========================================================================
   🌸 達成フレーム テーマ選択ポップオーバー (z-index秩序: 12000)
   ========================================================================== */
#achievementThemePopover {
  position: fixed;
  z-index: 12000;
  background: rgba(255, 255, 255, 0.98);
  backdrop-filter: blur(20px);
  -webkit-backdrop-filter: blur(20px);
  border: 1px solid rgba(0, 0, 0, 0.08);
  border-radius: 16px;
  box-shadow: 0 12px 36px -4px rgba(15, 23, 42, 0.22), 0 0 0 1px rgba(0, 0, 0, 0.04);
  padding: 8px;
  min-width: 180px;
  display: flex;
  flex-direction: column;
  gap: 4px;
  animation: themePopoverPop 0.2s cubic-bezier(0.16, 1, 0.3, 1) forwards;
  user-select: none;
  -webkit-user-select: none;
}

body.dark-mode #achievementThemePopover,
body.theme-universal-dark #achievementThemePopover {
  background: rgba(30, 41, 59, 0.98);
  border-color: rgba(255, 255, 255, 0.12);
  box-shadow: 0 12px 36px -4px rgba(0, 0, 0, 0.45);
}

.achievement-theme-header {
  font-size: 0.875rem;
  font-weight: 700;
  color: #94a3b8;
  padding: 6px 10px 4px 10px;
  letter-spacing: 0.02em;
}

body.dark-mode .achievement-theme-header,
body.theme-universal-dark .achievement-theme-header {
  color: #64748b;
}

.achievement-theme-option {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
  padding: 8px 12px;
  min-height: 40px;
  border-radius: 10px;
  border: none;
  background: transparent;
  color: #334155;
  font-size: 0.875rem;
  font-weight: 600;
  cursor: pointer;
  text-align: left;
  transition: all 0.16s ease;
  width: 100%;
  box-sizing: border-box;
}

body.dark-mode .achievement-theme-option,
body.theme-universal-dark .achievement-theme-option {
  color: #e2e8f0;
}

.achievement-theme-option:hover {
  background: rgba(15, 23, 42, 0.06);
}

body.dark-mode .achievement-theme-option:hover,
body.theme-universal-dark .achievement-theme-option:hover {
  background: rgba(255, 255, 255, 0.08);
}

.achievement-theme-option.selected {
  background: rgba(var(--theme-rgb, 99, 102, 241), 0.12);
  color: var(--primary-color, #4f46e5);
}

body.dark-mode .achievement-theme-option.selected,
body.theme-universal-dark .achievement-theme-option.selected {
  background: rgba(var(--theme-rgb, 99, 102, 241), 0.22);
}

.achievement-theme-check {
  font-size: 0.95rem;
  font-weight: 700;
  color: var(--primary-color, #4f46e5);
}

.achievement-theme-backdrop {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  z-index: 11999;
  background: transparent;
}

@keyframes themePopoverPop {
  0% {
    opacity: 0;
    transform: scale(0.92) translateY(-4px);
  }
  100% {
    opacity: 1;
    transform: scale(1) translateY(0);
  }
}

/* ==========================================================================
   ⚡ PCモード タスク追加入力欄 最優先（上に追加）オプショントグル
   ========================================================================== */
#togglePriorityOptionBtn.active {
  background: #fef3c7 !important;
  color: #b45309 !important;
  border-color: #f59e0b !important;
  font-weight: 700 !important;
  box-shadow: 0 0 8px rgba(245, 158, 11, 0.25) !important;
}

/* PC環境（デスクトップ）ではモバイル専用FAB・クイック追加バーは完全非表示 */
@media (min-width: 1024px) {
  #mobileTaskFabBtn,
  #mobileQuickTaskBar {
    display: none !important;
  }
}

/* ==========================================================================
   🍏 Apple HIG 44px タップ判定領域 共通ユーティリティ (.touch-target-44)
   小さなボタン（36px正円、32pxピル、極小アイコン等）に付与することで、
   見た目のスリムさを完全に維持したまま、中心基準で最低 44px × 44px の透明タップ判定領域を確保
   ========================================================================== */
.touch-target-44 {
  position: relative !important;
}

.touch-target-44::before {
  content: '';
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  min-width: 44px;
  min-height: 44px;
  width: 100%;
  height: 100%;
  border-radius: inherit;
  pointer-events: auto;
}








/* 🍏 Apple HIG 44px タップターゲット保証 (アクセシビリティ・押しやすさ向上) */
.icon-button,
.header-diagnostics-btn,
.attachment-close-btn,
.mood-btn,
.bb-send-button,
.member-dd-item-edit-btn,
.member-dd-inline-cancel-btn {
  position: relative !important;
}

.icon-button::before,
.header-diagnostics-btn::before,
.attachment-close-btn::before,
.mood-btn::before,
.bb-send-button::before,
.member-dd-item-edit-btn::before,
.member-dd-inline-cancel-btn::before {
  content: "" !important;
  position: absolute !important;
  top: 50% !important;
  left: 50% !important;
  transform: translate(-50%, -50%) !important;
  min-width: 44px !important;
  min-height: 44px !important;
  width: 100% !important;
  height: 100% !important;
  box-sizing: content-box !important;
  pointer-events: auto !important;
  z-index: 1 !important;
}