/* Odonata 共通スタイル
   - CSS 変数: テーマ色
   - レイアウト: サイドバー + メイン
   - レスポンシブ: iPad(>=768px) は常時表示、スマホ(<768px) は開閉
   - モバイル基本: 16px フォント + 44x44 タップ領域
*/

:root {
    /* 既定は Odonata ロゴ由来の青系配色（濃紺サイドバー×淡シアン背景×アズール）。
       実行時は base/layout.html が team_branding のプリセットで :root を上書きするため、
       ここはブランド基準色 兼 注入前フォールバックとして同じ Odonata 値を持たせる。 */
    --bg: #E7F4FC;
    --card: #FFFFFF;
    --text: #1E293B;
    --sub: #5A7A8A;
    --border: #CBE5F5;
    --blue: #0A93DE;
    --red: #DC2626;
    --red-light: #EF4444;
    --red-bg: #FEF2F2;
    --red-border: #FECACA;
    --yellow: #D97706;
    --yellow-bg: #FFFBEB;
    --yellow-border: #FDE68A;
    --green: #16A34A;
    --green-bg: #F0FDF4;
    --green-border: #BBF7D0;
    --purple: #6A2D7B;
    --purple-bg: #F5EEFA;

    /* データの「正 / 負」を色で対比させる箇所（勝敗・正負のパス・負荷 vs 試合日）専用。
       赤×緑は 1型/2型色覚でどちらもオリーブ色に潰れる（#16A34A→#958951, #DC2626→#8F801B）ため、
       正側は緑ではなく青を使う。
       --blue はチームプリセットで緑や赤に上書きされる（team_branding.py）ので、
       意味を持つ対比色には絶対に使わないこと。 */
    --pos: #2A78D6;
    --pos-bg: #EFF6FF;
    --pos-border: #BFDBFE;
    --neg: #DC2626;
    --neg-bg: #FEF2F2;
    --neg-border: #FECACA;
    /* 小さい文字（〜13px）に載せる場合は本文コントラスト 4.5:1 を満たす濃い方を使う */
    --pos-text: #1D4ED8;
    --neg-text: #B91C1C;

    --radius: 16px;
    --radius-sm: 10px;

    --sidebar-bg: #102A5C;
    --sidebar-bg-hover: #183A75;
    --sidebar-text: #C6DCF5;
    --sidebar-text-active: #FFFFFF;
    --sidebar-label: #8FB0D8;
    --sidebar-width: 240px;
}

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

body {
    font-family: -apple-system, BlinkMacSystemFont, "Hiragino Sans", "Noto Sans JP", sans-serif;
    background: var(--bg);
    color: var(--text);
    min-height: 100vh;
    font-size: 16px;
    -webkit-text-size-adjust: 100%;
}

/* モバイル基本: iOS で input フォーカス時に自動ズームしないよう 16px、タップ領域 44x44 */
input, select, textarea, button {
    font-family: inherit;
    font-size: 16px;
}
input:not([type="checkbox"]):not([type="radio"]),
select,
textarea,
button {
    min-height: 44px;
}

/* ────────────────────────────────────────────
   デモ環境バナー（DEMO_MODE 時のみ layout.html が描画。本番では未使用）
   ──────────────────────────────────────────── */

.demo-banner {
    position: sticky;
    top: 0;
    z-index: 30;
    background: #b45309;
    color: #fff;
    text-align: center;
    font-size: 12px;
    font-weight: 700;
    letter-spacing: 0.06em;
    padding: 4px 56px; /* 左右は nav-toggle / 通知ベルと重ならないよう余白を確保 */
}

/* ────────────────────────────────────────────
   レイアウト: サイドバー + メイン
   ──────────────────────────────────────────── */

.layout {
    display: flex;
    min-height: 100vh;
}

.sidebar {
    width: var(--sidebar-width);
    background: var(--sidebar-bg);
    color: var(--sidebar-text);
    display: flex;
    flex-direction: column;
    flex-shrink: 0;
}

.sidebar-brand {
    padding: 14px 12px;
    border-bottom: 1px solid rgba(255, 255, 255, 0.06);
}

/* 正式ロゴ（横ロックアップ）をそのまま縮小。白背景のロゴなので白い角丸面に乗せる */
.sidebar-brand .brand-logo {
    display: block;
    width: 100%;
    background: #FFFFFF;
    border-radius: 12px;
    padding: 9px 12px;
    box-shadow: 0 2px 8px rgba(15, 23, 42, 0.18);
}

.sidebar-nav {
    display: flex;
    flex-direction: column;
    padding: 8px 0;
    flex: 1;
    overflow-y: auto;
}

.sidebar-nav a {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 12px 16px;
    min-height: 44px;
    font-size: 15px;
    color: var(--sidebar-text);
    text-decoration: none;
    transition: background 0.12s;
}

.sidebar-nav a:hover {
    background: var(--sidebar-bg-hover);
    color: var(--sidebar-text-active);
}

.sidebar-nav a.active {
    background: var(--blue);
    color: var(--sidebar-text-active);
}

.sidebar-section-label {
    font-size: 11px;
    color: var(--sidebar-label);
    padding: 14px 16px 4px;
    text-transform: uppercase;
    letter-spacing: 0.04em;
}

.main {
    flex: 1;
    min-width: 0; /* flex 子要素のオーバーフロー対策 */
    padding: 24px;
}

/* page-header: 旧 .ah / .ph-header の代替（h1 + 説明文の見出し領域） */
.page-header {
    margin-bottom: 20px;
}
.page-header h1 {
    font-size: 24px;
    font-weight: 700;
    color: var(--text);
    margin: 0;
}
.page-header p {
    font-size: 13px;
    color: var(--sub);
    margin-top: 6px;
}

/* 画面上部の「戻る」ボタン（遷移してきたページで表示） */
.page-back {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    margin-bottom: 16px;
    padding: 7px 14px 7px 11px;
    background: var(--card);
    border: 1px solid var(--border);
    border-radius: 999px;
    color: var(--text);
    font-size: 13px;
    font-weight: 600;
    cursor: pointer;
    box-shadow: 0 1px 3px rgba(15, 23, 42, 0.08);
    transition: background 0.15s ease, transform 0.05s ease;
}
.page-back:hover { background: var(--bg); }
.page-back:active { transform: translateY(1px); }
.page-back[hidden] { display: none; }
.page-back-arrow { font-size: 15px; line-height: 1; }

/* ────────────────────────────────────────────
   ハンバーガーボタンと scrim（スマホ時）
   ──────────────────────────────────────────── */

.nav-toggle {
    position: fixed;
    top: 12px;
    left: 12px;
    width: 44px;
    height: 44px;
    background: var(--card);
    border: 1px solid var(--border);
    border-radius: 10px;
    color: var(--text);
    font-size: 22px;
    line-height: 1;
    cursor: pointer;
    z-index: 60;
    display: none; /* 初期は非表示。スマホでのみ表示 */
    align-items: center;
    justify-content: center;
    box-shadow: 0 2px 6px rgba(15, 23, 42, 0.1);
}

.scrim {
    position: fixed;
    inset: 0;
    background: rgba(0, 0, 0, 0.4);
    z-index: 40;
    display: none;
}

body.nav-open .scrim {
    display: block;
}

/* ────────────────────────────────────────────
   ベル型通知（フェーズ5 #2）
   ──────────────────────────────────────────── */

.notif-wrap {
    position: fixed;
    top: 12px;
    right: 12px;
    z-index: 61;
}

.notif-bell {
    position: relative;
    width: 44px;
    height: 44px;
    background: var(--card);
    border: 1px solid var(--border);
    border-radius: 10px;
    font-size: 20px;
    line-height: 1;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    box-shadow: 0 2px 6px rgba(15, 23, 42, 0.1);
}

.notif-badge {
    position: absolute;
    top: -4px;
    right: -4px;
    background: var(--red);
    color: #fff;
    border-radius: 999px;
    min-width: 20px;
    height: 20px;
    padding: 0 5px;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 11px;
    font-weight: 700;
    box-shadow: 0 0 0 2px var(--card);
}

.notif-panel {
    position: absolute;
    top: 52px;
    right: 0;
    width: 340px;
    max-width: calc(100vw - 24px);
    max-height: 70vh;
    overflow-y: auto;
    background: var(--card);
    border: 1px solid var(--border);
    border-radius: var(--radius);
    box-shadow: 0 8px 24px rgba(15, 23, 42, 0.18);
}

.notif-panel-head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 12px 16px;
    border-bottom: 1px solid var(--border);
    font-weight: 700;
    font-size: 14px;
    color: var(--text);
    position: sticky;
    top: 0;
    background: var(--card);
}

.notif-readall {
    background: none;
    border: none;
    color: var(--blue);
    font-size: 12px;
    font-weight: 600;
    cursor: pointer;
}

.notif-list { padding: 4px 0; }

.notif-empty {
    padding: 28px 16px;
    text-align: center;
    color: var(--sub);
    font-size: 13px;
}

.notif-item {
    display: flex;
    gap: 10px;
    padding: 11px 16px;
    text-decoration: none;
    color: var(--text);
    border-bottom: 1px solid var(--border);
    border-left: 3px solid transparent;
}
.notif-item:last-child { border-bottom: none; }
.notif-item:hover { background: var(--bg); }
.notif-item.sev-critical { border-left-color: var(--red); }
.notif-item.sev-warning  { border-left-color: var(--yellow); }
.notif-item.sev-info     { border-left-color: var(--blue); }
.notif-item.is-read { opacity: 0.55; }

.notif-item-icon { font-size: 17px; line-height: 1.3; flex-shrink: 0; }
.notif-item-body { display: flex; flex-direction: column; gap: 2px; min-width: 0; }
.notif-item-title { font-size: 13px; font-weight: 600; }
.notif-item-detail { font-size: 12px; color: var(--sub); }

@media (max-width: 767px) {
    /* スマホ: ハンバーガー(左)と被らないよう右上に維持 */
    .notif-wrap { top: 12px; right: 12px; }
}

/* ────────────────────────────────────────────
   レスポンシブ
   ──────────────────────────────────────────── */

/* 横に広いテーブルの共通ラッパ。列数の多い表はスマホで画面幅を
   超えるため、この要素の中で横スクロールさせ、ページ全体が横に
   はみ出さないようにする。デスクトップでは収まればスクロールバーは出ない。 */
.table-scroll {
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
    max-width: 100%;
}

/* iOS Safari のネイティブ日付/時刻入力は値を中央寄せで描画するため、
   狭い枠では右へはみ出して隣に被り、広い枠では中央に浮いて見える。
   値を左寄せに固定して、通常のテキスト入力と同じ見た目にそろえる。 */
input[type="date"]::-webkit-date-and-time-value,
input[type="datetime-local"]::-webkit-date-and-time-value,
input[type="time"]::-webkit-date-and-time-value,
input[type="month"]::-webkit-date-and-time-value {
    text-align: left;
}
input[type="date"], input[type="datetime-local"],
input[type="time"], input[type="month"] {
    min-width: 0;
}

@media (max-width: 767px) {
    /* スマホ: サイドバーは固定オーバーレイ、デフォルト非表示 */
    .sidebar {
        position: fixed;
        top: 0;
        bottom: 0;
        left: 0;
        z-index: 50;
        transform: translateX(-100%);
        transition: transform 0.2s ease-out;
        box-shadow: 4px 0 12px rgba(0, 0, 0, 0.2);
    }
    body.nav-open .sidebar {
        transform: translateX(0);
    }
    .main {
        padding: 64px 16px 16px; /* 上にハンバーガー分の余白 */
    }
    .nav-toggle {
        display: flex;
    }
    .page-header h1 {
        font-size: 20px;
    }
}

@media (min-width: 768px) {
    /* iPad / PC: サイドバー常時表示。ハンバーガー不要 */
    .nav-toggle, .scrim {
        display: none !important;
    }
}

/* ────────────────────────────────────────────
   ブランドアイコン（ベル / グラフ / ペン）
   ロゴと同じグラデーション・ノード調の SVG に統一
   ──────────────────────────────────────────── */

.odo-icon {
    display: inline-block;
    vertical-align: middle;
    width: 1.25em;
    height: 1.25em;
}

/* 絵文字から自動置換されるインラインアイコン（odo-icons.js） */
.odo-ico {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 1.15em;
    height: 1.15em;
    vertical-align: -0.18em;
    flex-shrink: 0;
}
.odo-ico svg { width: 100%; height: 100%; display: block; }
/* ベル: 既存の絵文字を SVG に差し替え（バッジ位置はそのまま） */
.notif-bell .odo-icon { width: 24px; height: 24px; }

/* リスク予測の大アイコン（棒グラフ） */
.upload-area .icon .odo-icon,
.icon-hero {
    width: 48px;
    height: 48px;
}

/* 見出し横のペンアイコンなど */
.heading-icon {
    width: 22px;
    height: 22px;
    margin-right: 2px;
}

/* ────────────────────────────────────────────
   ロード中オーバーレイ（ロゴが中心で虹色に回転）
   ──────────────────────────────────────────── */

.odo-loader {
    position: fixed;
    inset: 0;
    z-index: 200;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 16px;
    background: rgba(224, 245, 253, 0.82);
    backdrop-filter: blur(3px);
    -webkit-backdrop-filter: blur(3px);
}
.odo-loader[hidden] { display: none; }

/* Odonata ロゴ左側の実エンブレムを使用。
   エンブレム画像の上に、その形でマスクした明るい帯を重ね、
   左（六角形）→ 右（フラクタル）へ色の波が伝播するように走らせる。回転なし。 */
.odo-loader-mark {
    position: relative;
    width: 116px;
    height: 110px;
    filter: drop-shadow(0 6px 14px rgba(14, 58, 107, 0.22));
}
.odo-emblem-base,
.odo-emblem-bright {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    object-fit: contain;
}
/* ベースは沈めておく */
.odo-emblem-base { filter: brightness(0.48) saturate(0.85); }
/* 明るい層は移動する帯でくり抜き、その部分だけ本来の色＋少し増幅して光らせる */
.odo-emblem-bright {
    filter: brightness(1.32) saturate(1.25);
    -webkit-mask-image: linear-gradient(45deg, transparent 34%, #000 50%, transparent 66%);
            mask-image: linear-gradient(45deg, transparent 34%, #000 50%, transparent 66%);
    -webkit-mask-size: 240% 240%;
            mask-size: 240% 240%;
    -webkit-mask-repeat: no-repeat;
            mask-repeat: no-repeat;
    animation: odoSweep 1.7s ease-in-out infinite;
}

.odo-loader-text {
    font-size: 13px;
    font-weight: 600;
    letter-spacing: 0.12em;
    color: var(--blue);
    animation: odoTextPulse 2.6s ease-in-out infinite;
}

/* 分析など時間のかかる処理用の進捗バー（OdoLoader.showProgress で表示） */
.odo-loader-progress {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 8px;
    width: min(320px, 72vw);
}
.odo-loader-progress[hidden] { display: none; }

.odo-loader-progress-track {
    width: 100%;
    height: 8px;
    border-radius: 999px;
    background: rgba(0, 160, 233, 0.14);
    border: 1px solid var(--border);
    overflow: hidden;
}

.odo-loader-progress-fill {
    position: relative;
    height: 100%;
    width: 0%;
    border-radius: 999px;
    background: linear-gradient(90deg, var(--blue), var(--purple));
    transition: width 0.25s ease;
}

/* エンブレムと同じ「光の波」をバー上にも走らせる */
.odo-loader-progress-fill::after {
    content: '';
    position: absolute;
    inset: 0;
    border-radius: 999px;
    background: linear-gradient(90deg, transparent 30%, rgba(255, 255, 255, 0.55) 50%, transparent 70%);
    background-size: 200% 100%;
    background-repeat: no-repeat;
    animation: odoBarSweep 1.7s ease-in-out infinite;
}

.odo-loader-progress-pct {
    font-size: 12px;
    font-weight: 600;
    letter-spacing: 0.08em;
    color: var(--sub);
    font-variant-numeric: tabular-nums;
}

/* 分析中のキャンセルボタン（OdoLoader に onCancel を渡したときだけ表示） */
.odo-loader-cancel {
    margin-top: 4px;
    padding: 8px 22px;
    background: var(--card);
    border: 1px solid var(--border);
    border-radius: 999px;
    color: var(--text);
    font-size: 13px;
    font-weight: 600;
    cursor: pointer;
    box-shadow: 0 1px 3px rgba(15, 23, 42, 0.1);
    transition: background 0.15s ease, transform 0.05s ease;
}
.odo-loader-cancel:hover { background: var(--bg); }
.odo-loader-cancel:active { transform: translateY(1px); }
.odo-loader-cancel[hidden] { display: none; }

/* 帯を左斜め下(六角形)→右斜め上(フラクタル)へ。短い待機をはさんで連続ループ */
@keyframes odoSweep {
    0%   { -webkit-mask-position: 0% 100%;   mask-position: 0% 100%; }
    82%  { -webkit-mask-position: 100% 0%;   mask-position: 100% 0%; }
    100% { -webkit-mask-position: 100% 0%;   mask-position: 100% 0%; }
}
@keyframes odoTextPulse {
    0%, 100% { opacity: 0.5; }
    50%      { opacity: 1; }
}
@keyframes odoBarSweep {
    0%   { background-position: 200% 0; }
    100% { background-position: -100% 0; }
}

@media (prefers-reduced-motion: reduce) {
    .odo-emblem-base { filter: none; }
    .odo-emblem-bright { animation: none; display: none; }
    .odo-loader-progress-fill::after { animation: none; display: none; }
}

/* ── 表示チーム切替などページ遷移を伴う操作用のトンボ飛行オーバーレイ ──
   OdoLoader.fly('メッセージ') で表示。中央のメッセージの周りをトンボが
   羽ばたきながら旋回して「動いている感」を出す。遷移完了でページごと消える。 */
.odo-fly {
    position: fixed;
    inset: 0;
    z-index: 260;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    background: rgba(224, 245, 253, 0.86);
    backdrop-filter: blur(4px);
    -webkit-backdrop-filter: blur(4px);
    overflow: hidden;
}
.odo-fly[hidden] { display: none; }

/* トンボが旋回する舞台。ここを基準に中央から前後左右へ飛ぶ */
.odo-fly-stage {
    position: relative;
    width: min(460px, 84vw);
    height: min(300px, 52vh);
}

.odo-fly-bug {
    position: absolute;
    left: 50%;
    top: 50%;
    width: 82px;
    height: 63px;
    margin-left: -41px;
    margin-top: -31px;
    filter: drop-shadow(0 8px 12px rgba(14, 58, 107, 0.28));
    /* 一周旋回 → 右斜め上へ加速して飛び去る。飛び去った後は見えない位置で
       待機して再び入ってくる（遷移が長引いても止まって見えないように）。
       旋回は等速(linear)＋細かい分割でなめらかな円を描く。 */
    animation: odoFlyPath 4.4s linear infinite, odoFlyFade 4.4s linear infinite;
    will-change: transform, opacity;
}
.odo-fly-bug svg {
    width: 100%;
    height: 100%;
    overflow: visible;
}

/* 羽ばたき: 2枚の羽をまとめて縦につぶして高速に打つ */
.odo-fly-wings {
    transform-box: fill-box;
    transform-origin: 50% 42%;
    animation: odoFlyWing 0.12s ease-in-out infinite;
    will-change: transform;
}

.odo-fly-text {
    margin-top: 18px;
    font-size: 13px;
    font-weight: 600;
    letter-spacing: 0.12em;
    color: var(--blue);
    animation: odoTextPulse 2.6s ease-in-out infinite;
    text-align: center;
    padding: 0 20px;
}

/* 上（頭が右向き）から反時計回りに一周し、上に戻ったところで右斜め上へ加速して
   フレーム外へ飛び去る。進行方向へ機首（頭）を向ける。
   トンボ画像は頭が上向き=rotate(0) のため、各点の進行方向へ回転角を合わせる。 */
@keyframes odoFlyPath {
    /* ── 一周（上→反時計回り→上へ戻る）。15度刻みでなめらかな円 ── */
    0%    { transform: translate(0px, -118px)   rotate(90deg)  scale(1); }
    2.5%  { transform: translate(39px, -114px)  rotate(105deg) scale(1); }
    5%    { transform: translate(75px, -102px)  rotate(120deg) scale(1); }
    7.5%  { transform: translate(106px, -83px)  rotate(135deg) scale(1); }
    10%   { transform: translate(130px, -59px)  rotate(150deg) scale(1); }
    12.5% { transform: translate(145px, -31px)  rotate(165deg) scale(1); }
    15%   { transform: translate(150px, 0px)    rotate(180deg) scale(1); }
    17.5% { transform: translate(145px, 31px)   rotate(195deg) scale(1); }
    20%   { transform: translate(130px, 59px)   rotate(210deg) scale(1); }
    22.5% { transform: translate(106px, 83px)   rotate(225deg) scale(1); }
    25%   { transform: translate(75px, 102px)   rotate(240deg) scale(1); }
    27.5% { transform: translate(39px, 114px)   rotate(255deg) scale(1); }
    30%   { transform: translate(0px, 118px)    rotate(270deg) scale(1); }
    32.5% { transform: translate(-39px, 114px)  rotate(285deg) scale(1); }
    35%   { transform: translate(-75px, 102px)  rotate(300deg) scale(1); }
    37.5% { transform: translate(-106px, 83px)  rotate(315deg) scale(1); }
    40%   { transform: translate(-130px, 59px)  rotate(330deg) scale(1); }
    42.5% { transform: translate(-145px, 31px)  rotate(345deg) scale(1); }
    45%   { transform: translate(-150px, 0px)   rotate(360deg) scale(1); }
    47.5% { transform: translate(-145px, -31px) rotate(375deg) scale(1); }
    50%   { transform: translate(-130px, -59px) rotate(390deg) scale(1); }
    52.5% { transform: translate(-106px, -83px) rotate(405deg) scale(1); }
    55%   { transform: translate(-75px, -102px) rotate(420deg) scale(1); }
    57.5% { transform: translate(-39px, -114px) rotate(435deg) scale(1); }
    /* 上へ戻り、ここから右斜め上へ離脱（加速） */
    60%   { transform: translate(0px, -118px)   rotate(450deg) scale(1);
            animation-timing-function: cubic-bezier(0.55, 0, 0.9, 0.4); }
    72%   { transform: translate(190px, -250px) rotate(415deg) scale(0.82); }
    82%   { transform: translate(500px, -510px) rotate(405deg) scale(0.56); }
    90%   { transform: translate(920px, -840px) rotate(400deg) scale(0.34); }
    /* フレーム外で待機（次の一周までの間） */
    100%  { transform: translate(920px, -840px) rotate(400deg) scale(0.34); }
}
/* 入場でふわっと現れ、離脱で消える（ループの継ぎ目を隠す） */
@keyframes odoFlyFade {
    0%   { opacity: 0; }
    5%   { opacity: 1; }
    80%  { opacity: 1; }
    90%  { opacity: 0; }
    100% { opacity: 0; }
}
@keyframes odoFlyWing {
    0%, 100% { transform: scaleY(1); }
    50%      { transform: scaleY(0.32); }
}

@media (prefers-reduced-motion: reduce) {
    .odo-fly-bug { animation: odoFlyHover 3s ease-in-out infinite; }
    .odo-fly-wings { animation: none; }
    @keyframes odoFlyHover {
        0%, 100% { transform: translate(0, -4px) rotate(0deg); }
        50%      { transform: translate(0, 4px)  rotate(0deg); }
    }
}

/* 狭い画面では旋回半径を縮める（離脱の動きは同じ） */
@media (max-width: 560px) {
    .odo-fly-bug { width: 66px; height: 51px; margin-left: -33px; margin-top: -25px; }
    @keyframes odoFlyPath {
        0%    { transform: translate(0px, -78px)   rotate(90deg)  scale(1); }
        2.5%  { transform: translate(25px, -75px)  rotate(105deg) scale(1); }
        5%    { transform: translate(48px, -68px)  rotate(120deg) scale(1); }
        7.5%  { transform: translate(67px, -55px)  rotate(135deg) scale(1); }
        10%   { transform: translate(82px, -39px)  rotate(150deg) scale(1); }
        12.5% { transform: translate(92px, -20px)  rotate(165deg) scale(1); }
        15%   { transform: translate(95px, 0px)    rotate(180deg) scale(1); }
        17.5% { transform: translate(92px, 20px)   rotate(195deg) scale(1); }
        20%   { transform: translate(82px, 39px)   rotate(210deg) scale(1); }
        22.5% { transform: translate(67px, 55px)   rotate(225deg) scale(1); }
        25%   { transform: translate(48px, 68px)   rotate(240deg) scale(1); }
        27.5% { transform: translate(25px, 75px)   rotate(255deg) scale(1); }
        30%   { transform: translate(0px, 78px)    rotate(270deg) scale(1); }
        32.5% { transform: translate(-25px, 75px)  rotate(285deg) scale(1); }
        35%   { transform: translate(-47px, 68px)  rotate(300deg) scale(1); }
        37.5% { transform: translate(-67px, 55px)  rotate(315deg) scale(1); }
        40%   { transform: translate(-82px, 39px)  rotate(330deg) scale(1); }
        42.5% { transform: translate(-92px, 20px)  rotate(345deg) scale(1); }
        45%   { transform: translate(-95px, 0px)   rotate(360deg) scale(1); }
        47.5% { transform: translate(-92px, -20px) rotate(375deg) scale(1); }
        50%   { transform: translate(-82px, -39px) rotate(390deg) scale(1); }
        52.5% { transform: translate(-67px, -55px) rotate(405deg) scale(1); }
        55%   { transform: translate(-48px, -68px) rotate(420deg) scale(1); }
        57.5% { transform: translate(-25px, -75px) rotate(435deg) scale(1); }
        60%   { transform: translate(0px, -78px)   rotate(450deg) scale(1);
                animation-timing-function: cubic-bezier(0.55, 0, 0.9, 0.4); }
        72%   { transform: translate(150px, -190px) rotate(415deg) scale(0.8); }
        82%   { transform: translate(390px, -390px) rotate(405deg) scale(0.54); }
        90%   { transform: translate(740px, -700px) rotate(400deg) scale(0.32); }
        100%  { transform: translate(740px, -700px) rotate(400deg) scale(0.32); }
    }
}

/* ────────────────────────────────────────────
   ログイン画面のロゴ
   ──────────────────────────────────────────── */

.login-logo {
    width: 100%;
    max-width: 280px;
    height: auto;
    margin: 0 auto 10px;
    display: block;
}
.login-brand {
    text-align: center;
}
.login-brand p {
    margin-top: 6px;
    font-size: 13px;
    color: var(--sub);
}
.login-shell {
    min-height: 100vh;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 24px;
    background: linear-gradient(135deg, #1E293B 0%, #0F172A 100%);
}
.login-card {
    background: var(--card);
    width: 100%;
    max-width: 420px;
    padding: 36px 32px 32px;
    border-radius: var(--radius);
    box-shadow: 0 30px 60px rgba(15, 23, 42, 0.35);
}
.login-form {
    margin-top: 24px;
    display: flex;
    flex-direction: column;
    gap: 14px;
}
.login-form label {
    font-size: 13px;
    color: var(--sub);
    font-weight: 600;
}
.login-form input[type="email"],
.login-form input[type="password"] {
    margin-top: 6px;
    width: 100%;
    padding: 12px 14px;
    font-size: 16px;
    border: 1px solid var(--border);
    border-radius: var(--radius-sm);
    background: #F8FAFC;
    color: var(--text);
}
.login-form input:focus {
    outline: none;
    border-color: var(--blue);
    background: white;
}
.login-submit {
    margin-top: 8px;
    background: var(--blue);
    color: white;
    font-size: 16px;
    font-weight: 600;
    padding: 14px 16px;
    border: none;
    border-radius: var(--radius-sm);
    cursor: pointer;
}
.login-submit:active { transform: scale(0.99); }
.login-secondary {
    margin-top: 8px;
    background: white;
    color: var(--blue);
    font-size: 15px;
    font-weight: 600;
    padding: 13px 16px;
    border: 1px solid var(--blue);
    border-radius: var(--radius-sm);
    cursor: pointer;
    text-align: center;
    text-decoration: none;
    display: block;
}
.passkey-divider {
    display: flex;
    align-items: center;
    gap: 12px;
    margin: 20px 0;
    color: var(--sub);
    font-size: 12px;
}
.passkey-divider::before,
.passkey-divider::after {
    content: "";
    flex: 1;
    height: 1px;
    background: var(--border);
}
.passkey-login {
    width: 100%;
    border: 1px solid var(--blue);
    background: white;
    color: var(--blue);
    padding: 13px 16px;
    border-radius: var(--radius-sm);
    font-size: 15px;
    font-weight: 700;
    cursor: pointer;
}
.passkey-login:disabled { opacity: 0.65; cursor: wait; }
.login-error {
    background: var(--red-bg);
    border: 1px solid var(--red-border);
    color: var(--red);
    padding: 12px 14px;
    border-radius: var(--radius-sm);
    font-size: 14px;
}
.login-ok {
    background: #ECFDF5;
    border: 1px solid #A7F3D0;
    color: #047857;
    padding: 12px 14px;
    border-radius: var(--radius-sm);
    font-size: 14px;
}
.login-help {
    margin-top: 18px;
    font-size: 12px;
    color: var(--sub);
    text-align: center;
    line-height: 1.6;
}
.login-help a, .login-forgot {
    color: var(--blue);
    font-weight: 600;
    text-decoration: none;
}

/* ── 絞り込みトグル（共通） ─────────────────────────────
   常時表示だと煩雑になるフィルタ入力を折りたたむための共通UI。
   ボタンに data-filter-toggle="パネルのid" を付け、対象パネルに hidden を
   付けておくと base/layout.html の OdoFilter が開閉する。 */
.odo-filter-toggle {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 7px 14px;
    border: 1px solid var(--border);
    border-radius: 999px;
    background: var(--card);
    color: var(--text);
    font-size: 13px;
    font-weight: 700;
    line-height: 1;
    cursor: pointer;
    box-shadow: 0 1px 2px rgba(15, 23, 42, 0.05);
}
.odo-filter-toggle:hover { background: var(--bg); }
.odo-filter-toggle[aria-expanded="true"] {
    border-color: var(--blue);
    color: var(--blue);
    background: var(--bg);
}
.odo-filter-toggle .odo-filter-caret {
    font-size: 10px;
    color: var(--sub);
    transition: transform 0.2s;
}
.odo-filter-toggle[aria-expanded="true"] .odo-filter-caret {
    transform: rotate(180deg);
    color: var(--blue);
}
.odo-filter-toggle .odo-ico { width: 1em; height: 1em; }
/* 単独で置くトグル用の余白（サマリー内などでは各所で個別指定） */
.odo-filter-bar { margin-bottom: 12px; }
/* hidden 属性を display 指定より優先させる。フィルタ行は display:flex を持つため、
   UA スタイルの [hidden]{display:none} では隠れない。明示的に打ち消す。 */
.odo-filter-panel[hidden],
.me-filter[hidden],
.mh-filter[hidden],
.msu-controls[hidden],
.me-sum-controls[hidden] { display: none !important; }