@import url('https://fonts.googleapis.com/css2?family=Noto+Sans+JP:wght@400;700&display=swap');

        * {
            box-sizing: border-box;
            touch-action: manipulation;
        }

        body {
            font-family: 'Helvetica Neue', Arial, 'Noto Sans JP', sans-serif;
            background-color: #fdf6f7;
            color: #333;
            padding: 10px;
            margin: 0;
        }

        .container {
            max-width: 960px;
            margin: 0 auto;
            background: white;
            padding: 12px;
            border-radius: 12px;
            box-shadow: 0 4px 15px rgba(0, 0, 0, 0.05);
        }

        .app-header {
            text-align: center;
            margin: 4px 0 12px 0;
        }

        .sub-title {
            font-size: 11px;
            color: #888;
            margin: 0 0 4px 0;
        }

        .main-title {
            font-size: 20px;
            color: #e090a9;
            margin: 0;
            font-weight: 700;
        }

        /* =====================================================
 * Firestore 保存状態
 * ===================================================== */

        .save-status {
            display: none;
            align-items: center;
            justify-content: center;

            min-height: 18px;

            margin: 5px 0 0 0;

            font-size: 10px;
            font-weight: 700;

            color: #888;

            transition: opacity 0.2s ease;
        }


        /* 保存中 */
        .save-status.saving {
            display: flex;
            color: #888;
        }


        /* 保存完了 */
        .save-status.saved {
            display: flex;
            color: #4CAF50;
        }


        /* 保存失敗 */
        .save-status.error {
            display: flex;
            color: #e74c3c;
        }

        /* オフライン */
        .save-status.offline {
            display: flex;
            color: #e6a23c;
        }

        /* ログイン時の同期競合 */
        body.sync-conflict-open {
            overflow: hidden;
        }

        .sync-conflict-modal-content {
            width: calc(100% - 28px);
            max-width: 420px;
            padding: 20px;
        }

        .sync-conflict-title {
            margin: 0 0 8px;
            color: #333;
            font-size: 17px;
            text-align: center;
        }

        .sync-conflict-description {
            margin: 0 0 14px;
            color: #666;
            font-size: 12px;
            line-height: 1.7;
        }

        .sync-conflict-times {
            display: grid;
            grid-template-columns: 1fr 1fr;
            gap: 8px;
            margin-bottom: 14px;
        }

        .sync-conflict-time {
            padding: 9px 10px;
            border: 1px solid #eee;
            border-radius: 10px;
            background: #fafafa;
            color: #777;
            font-size: 10px;
            line-height: 1.5;
        }

        .sync-conflict-time strong {
            display: block;
            color: #444;
            font-size: 11px;
        }

        .sync-conflict-actions {
            display: grid;
            gap: 8px;
        }

        .sync-conflict-option {
            display: flex;
            flex-direction: column;
            gap: 3px;
            width: 100%;
            padding: 11px 12px;
            border: 1px solid #ddd;
            border-radius: 12px;
            background: #fff;
            color: #444;
            font: inherit;
            text-align: left;
            cursor: pointer;
        }

        .sync-conflict-option:hover,
        .sync-conflict-option:focus-visible {
            border-color: #e5879e;
            outline: 2px solid rgba(229, 135, 158, 0.2);
            outline-offset: 1px;
        }

        .sync-conflict-option strong {
            font-size: 13px;
        }

        .sync-conflict-option small {
            color: #777;
            font-size: 10px;
            line-height: 1.45;
        }

        .sync-conflict-option.recommended {
            border-color: #e5879e;
            background: #fff7f9;
        }

        .sync-conflict-option.recommended strong {
            color: #d96f8a;
        }

        .sync-conflict-note {
            margin: 12px 0 0;
            color: #888;
            font-size: 10px;
            line-height: 1.5;
            text-align: center;
        }

        .app-segment-container {
            display: flex;
            justify-content: center;
            background: #eee;
            border-radius: 30px;
            padding: 3px;
            margin: 0 auto 10px auto;
            max-width: 320px;
        }

        .segment-btn {
            flex: 1;
            padding: 6px 12px;
            border: none;
            border-radius: 25px;
            font-weight: bold;
            font-size: 12px;
            cursor: pointer;
            background: transparent;
            color: #666;
        }

        .segment-btn.active {
            background: white;
            color: #e5879e;
            box-shadow: 0 2px 6px rgba(0, 0, 0, 0.08);
        }

        .main-tabs {
            display: flex;
            justify-content: center;
            gap: 8px;
            margin-bottom: 12px;
        }

        .tab-btn {
            flex: 1;
            max-width: 140px;
            padding: 6px;
            border: none;
            border-radius: 20px;
            font-weight: bold;
            font-size: 12px;
            cursor: pointer;
            background: #eee;
            color: #666;
        }

        .tab-btn.active-want {
            background: #e5879e;
            color: white;
        }

        .tab-btn.active-have {
            background: #4a90e2;
            color: white;
        }

        .controls-section {
            background: #fdfdfd;
            padding: 12px;
            border-radius: 8px;
            margin-bottom: 12px;
            border: 1px solid #eee;
        }

        .compact-main-controls {
            justify-content: flex-start;
            margin-bottom: 0;
        }

        .compact-main-controls .search-box {
            flex: 1 1 220px;
            min-width: 150px;
        }

        .control-panel {
            display: none;
            margin-top: 10px;
            padding: 12px;
            border: 1px solid #e8e8e8;
            border-radius: 10px;
            background: #fafafa;
        }

        .control-panel.open {
            display: block;
        }

        .control-panel-title {
            margin: 0 0 10px;
            color: #555;
            font-size: 12px;
            font-weight: bold;
        }

        .control-panel-actions {
            display: grid;
            grid-template-columns:
                repeat(auto-fit, minmax(135px, 1fr));
            gap: 8px;
        }

        .control-panel-actions .btn {
            width: 100%;
        }

        .active-filter-summary {
            display: flex;
            flex-wrap: wrap;
            gap: 5px;
            margin-top: 8px;
        }

        .filter-summary-chip {
            padding: 3px 8px;
            border: 1px solid #ead5db;
            border-radius: 999px;
            background: #fff4f7;
            color: #925568;
            font-size: 10px;
            font-weight: bold;
        }

        body.tab-have .filter-summary-chip {
            border-color: #cddff5;
            background: #eef6ff;
            color: #356c9e;
        }

        @media (max-width: 600px) {
            .compact-main-controls {
                gap: 6px;
            }

            .compact-main-controls .search-box {
                flex-basis: 100%;
            }

            .compact-main-controls .btn {
                padding: 6px 9px;
                font-size: 11px;
            }

            .control-panel-actions {
                grid-template-columns:
                    repeat(2, minmax(0, 1fr));
            }
        }

        .control-row {
            display: flex;
            flex-wrap: wrap;
            gap: 8px;
            align-items: center;
            justify-content: space-between;
            margin-bottom: 10px;
        }

        .control-row:last-of-type {
            margin-bottom: 0;
        }

        .search-box,
        .select-box {
            padding: 8px 12px;
            border: 1px solid #ccc;
            border-radius: 20px;
            font-size: 13px;
            outline: none;
            background: white;
            flex: 1;
            min-width: 110px;
        }

        .btn {
            padding: 6px 12px;
            border: none;
            border-radius: 18px;
            font-weight: bold;
            font-size: 12px;
            cursor: pointer;
        }

        .btn-primary {
            background-color: #e5879e;
            color: white;
        }

        .btn-secondary {
            background-color: #f0f0f0;
            color: #666;
        }

        .btn-export {
            background-color: #f39c12;
            color: white;
        }

        .btn-danger {
            background-color: #ff5252;
            color: white;
        }

        .btn-oshi {
            background-color: #fffacd;
            color: #b8860b;
            border: 1px solid #eedd82;
            padding: 8px 12px;
        }

        .btn-oshi.active {
            background-color: #ff8c00;
            color: white;
            border-color: #ff8c00;
        }

        .btn-settings {
            border-radius: 50%;
            padding: 8px 10px;
            background-color: #f0f0f0;
            border: none;
            cursor: pointer;
        }

        .category-tags-container {
            display: flex;
            flex-wrap: wrap;
            gap: 6px;
            justify-content: center;
            margin: 12px 0;
        }

        .category-tag {
            padding: 6px 12px;
            border-radius: 15px;
            border: none;
            background: #eee;
            color: #666;
            font-size: 11px;
            font-weight: bold;
            cursor: pointer;
        }

        .category-tag.active {
            background: #e5879e;
            color: white;
        }

        body.tab-have .category-tag.active {
            background: #4a90e2;
        }

        .title-card {
            background: #fff;
            border: 1px solid #ffe3e9;
            border-radius: 8px;
            margin-bottom: 12px;
            padding: 6px 8px;
            box-shadow: 0 1px 3px rgba(0, 0, 0, 0.03);
        }

        body.tab-have .title-card {
            border-color: #d0e4ff;
        }

        .title-card-header {
            font-size: 14px;
            font-weight: bold;
            color: #e5879e;
            padding: 4px 4px 8px 4px;
            border-bottom: 2px solid #ffebf0;
            cursor: pointer;
            display: flex;
            justify-content: space-between;
            align-items: center;
        }

        body.tab-have .title-card-header {
            color: #4a90e2;
            border-bottom-color: #e5f0ff;
        }

        .sub-title-section {
            margin-top: 8px;
            border-bottom: 1px dashed #eee;
            padding-bottom: 6px;
        }

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

        .sub-title-header {
            font-size: 12px;
            font-weight: bold;
            color: #555;
            background: #f8f8f8;
            padding: 4px 8px;
            border-radius: 4px;
            margin-bottom: 6px;
        }



        /* =====================================================
 * メンバー表示
 * ===================================================== */

        .member-row {
            display: block;
            padding: 8px 0;
            border-bottom: 1px solid #f0f0f0;
        }

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

        .member-info {
            width: 100%;
            padding: 0 4px;
            margin-bottom: 5px;

            display: flex;
            align-items: center;
        }

        .member-name {
            font-size: 14px;
            font-weight: bold;
            color: #333;
            line-height: 1.3;
        }


        /* =====================================================
 * ポーズグリッド
 *
 * 2種 → 2列
 * 3種 → 3列
 * 4種 → 4列
 * ===================================================== */

        .poses-grid {
            display: grid;

            grid-template-columns:
                repeat(var(--pose-count, 4), minmax(0, 1fr));

            gap: 5px;

            width: 100%;
        }


        /* =====================================================
 * ポーズカード
 * ===================================================== */

        .pose-col {
            min-width: 0;

            display: flex;
            flex-direction: column;

            background: #fff;

            border: 1px solid #e3e3e3;
            border-radius: 7px;

            padding: 4px;
        }

        .duplicate-badge {
            display: none;
            align-self: center;
            margin-top: 4px;
            padding: 2px 7px;
            border: 1px solid #f0d889;
            border-radius: 999px;
            background: #fff3cd;
            color: #806000;
            font-size: 9px;
            font-weight: 700;
            line-height: 1.3;
            white-space: nowrap;
        }

        .duplicate-badge.show {
            display: inline-flex;
        }

        body.tab-have .duplicate-badge {
            border-color: #c8ddf7;
            background: #eef6ff;
            color: #2d6ca2;
        }

        #btn-duplicates.active {
            border-color: #d79a00;
            background: #f0a000;
            color: #fff;
        }


        /* 所持枚数あり */

        .pose-col[data-qty]:not([data-qty="0"]) {
            background: #fff5f7;
            border-color: #ffccd7;
        }

        body.tab-have .pose-col[data-qty]:not([data-qty="0"]) {
            background: #f3f8ff;
            border-color: #c4ddff;
        }


        /* 交渉中 */

        .pose-col.is-pending {
            background: #f7f7f7 !important;
            border: 1px dashed #bbb !important;
        }


        /* =====================================================
 * 上段
 * ポーズ名 + 🔥 + 🤝
 * ===================================================== */

        .pose-top {
            display: flex;
            align-items: center;
            justify-content: space-between;

            width: 100%;
            min-height: 30px;

            margin: 0;
            padding: 0 1px;
        }


        /* ポーズ名 */

        .pose-label {
            flex: 1;
            min-width: 0;

            font-size: 12px;
            font-weight: bold;

            color: #555;

            white-space: nowrap;
            overflow: hidden;
            text-overflow: ellipsis;
        }


        /* =====================================================
 * 🔥・🤝
 * ===================================================== */

        .icon-group {
            display: flex;
            gap: 3px;

            flex-shrink: 0;
        }

        .icon-btn {
            width: 27px;
            height: 27px;

            min-width: 27px;
            min-height: 27px;

            padding: 0;

            display: flex;
            align-items: center;
            justify-content: center;

            border-radius: 50%;
            border: 1px solid #e5e5e5;

            background: #fff;

            font-size: 13px;

            cursor: pointer;
        }

        /* =====================================================
 * 🔥 熱望 / 🤝 交渉中 共通 ON
 * ===================================================== */

        .icon-btn.active,
        .fire-btn.active,
        .pending-btn.active {
            background: #ffedf1 !important;
            border-color: #ff9eb5 !important;
        }


        /* =====================================================
 * 🔥 熱望 / 🤝 交渉中 共通 OFF
 * ===================================================== */

        .fire-btn:not(.active),
        .pending-btn:not(.active) {
            background: #fff !important;
            border-color: #e5e5e5 !important;
        }

        /* =====================================================
 * 🔥 熱望 / 🤝 交渉中 共通
 * ===================================================== */

        .icon-btn {
            width: 27px;
            height: 27px;

            min-width: 27px;
            min-height: 27px;

            padding: 0;

            display: flex;
            align-items: center;
            justify-content: center;

            border-radius: 50%;
            border: 1px solid #e5e5e5;

            background: #fff;

            font-size: 13px;

            cursor: pointer;
        }


        /*
 * OFF
 */
        .icon-btn:not(.active) {
            background: #fff;
            border-color: #e5e5e5;
        }


        /*
 * ON
 *
 * 🔥熱望・🤝交渉中を完全に同じ色にする
 */
        .icon-btn.active {
            background: #ffedf1;
            border-color: #ff9eb5;
        }

        /* =====================================================
 * 下段
 *
 *     −     0     ＋
 *
 * 中央の0をタップすると＋1
 * ===================================================== */

        .pose-bottom {
            display: flex;
            align-items: center;

            width: 100%;
            height: 34px;

            background: #fff;

            border: 1px solid #ddd;
            border-radius: 5px;

            overflow: hidden;
        }


        /* − / ＋ */

        .stepper-btn {
            width: 38px;
            height: 32px;

            flex-shrink: 0;

            border: none;

            background: #f5f5f5;
            color: #333;

            font-size: 17px;
            font-weight: bold;

            display: flex;
            align-items: center;
            justify-content: center;

            padding: 0;

            cursor: pointer;
        }


        /* =====================================================
 * 枚数部分
 *
 * ここがタップ領域
 * ===================================================== */

        .qty-tap-area {
            flex: 1;

            height: 32px;

            display: flex;
            align-items: center;
            justify-content: center;

            background: #fff;

            font-size: 14px;
            font-weight: bold;

            color: #333;

            cursor: pointer;

            user-select: none;
            -webkit-user-select: none;
            -webkit-touch-callout: none;
        }


        /* タップ時 */

        .qty-tap-area:active {
            background: #f5f5f5;
        }


        /* =====================================================
 * スマホ
 * ===================================================== */

        @media (max-width: 380px) {

            .poses-grid {
                gap: 4px;
            }

            .pose-col {
                padding: 3px;
            }

            .pose-top {
                min-height: 28px;
            }

            .pose-label {
                font-size: 11px;
            }

            .icon-btn {
                width: 25px;
                height: 25px;

                min-width: 25px;
                min-height: 25px;

                font-size: 12px;
            }

            .pose-bottom {
                height: 32px;
            }

            .stepper-btn {
                width: 34px;
                height: 30px;
            }

            .qty-tap-area {
                height: 30px;
                font-size: 14px;
            }
        }




        .pagination-container {
            display: flex;
            justify-content: center;
            align-items: center;
            gap: 12px;
            margin: 12px 0;
        }

        .page-info {
            font-size: 12px;
            font-weight: bold;
            color: #666;
        }

        .hidden {
            display: none !important;
        }

        .modal-wrapper {
            display: none;
            position: fixed;
            top: 0;
            left: 0;
            width: 100%;
            height: 100%;
            background: rgba(0, 0, 0, 0.6);
            z-index: 10000;
            justify-content: center;
            align-items: center;
        }

        /* =====================================================
 * 初回チュートリアル
 * ===================================================== */

        .tutorial-content {
            max-width: 380px;
            width: calc(100% - 28px);

            padding: 22px 20px 18px;

            text-align: center;

            border-radius: 16px;
        }


        .tutorial-page-number {
            margin-bottom: 14px;

            font-size: 11px;
            font-weight: 700;

            color: #aaa;
        }


        .tutorial-icon {
            margin-bottom: 12px;

            font-size: 38px;
            line-height: 1;
        }


        .tutorial-title {
            margin: 0 0 12px 0;

            font-size: 17px;
            font-weight: 700;

            color: #e5879e;
        }


        .tutorial-text {
            margin: 0 0 8px 0;

            font-size: 13px;
            line-height: 1.8;

            color: #444;
        }


        .tutorial-sub-text {
            min-height: 20px;

            margin: 0 0 20px 0;

            font-size: 11px;
            line-height: 1.6;

            color: #888;
        }


        .tutorial-actions {
            display: flex;

            gap: 8px;

            justify-content: center;
        }


        .tutorial-prev-btn,
        .tutorial-next-btn {
            flex: 1;

            max-width: 130px;

            padding: 9px 12px;
        }


        .tutorial-prev-btn:disabled {
            opacity: 0.4;
        }


        .tutorial-skip-btn {
            margin-top: 14px;

            padding: 4px 10px;

            border: none;

            background: transparent;

            color: #999;

            font-size: 11px;

            cursor: pointer;
        }


        .tutorial-note {
            margin: 6px 0 0 0;

            font-size: 9px;

            color: #bbb;
        }

        /* =====================================================
 * FAQ・ヘルプ
 * ===================================================== */

        .faq-content {
            max-width: 440px;
            width: calc(100% - 28px);

            max-height: 80vh;
            overflow-y: auto;

            padding: 20px;

            border-radius: 16px;
        }


        .faq-title {
            margin: 0 0 16px 0;

            text-align: center;

            font-size: 17px;

            color: #e5879e;
        }


        .faq-list {
            text-align: left;
        }


        .faq-item {
            padding: 12px 0;

            border-bottom: 1px solid #eee;
        }


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


        .faq-question {
            margin-bottom: 6px;

            font-size: 13px;
            font-weight: 700;

            color: #444;
        }


        .faq-answer {
            font-size: 11px;
            line-height: 1.7;

            color: #777;
        }


        .faq-close-btn {
            display: block;

            margin: 16px auto 0 auto;

            min-width: 100px;
        }

        .modal-content {
            background: white;
            padding: 16px;
            border-radius: 12px;
            width: 92%;
            max-width: 480px;
            max-height: 85vh;
            display: flex;
            flex-direction: column;
        }

        .output-type-tabs {
            display: flex;
            gap: 8px;
            margin-bottom: 10px;
        }

        .out-tab {
            flex: 1;
            padding: 6px;
            border: 1px solid #ddd;
            border-radius: 15px;
            background: #f9f9f9;
            font-size: 12px;
            font-weight: bold;
            cursor: pointer;
        }

        .out-tab.active {
            background: #e5879e;
            color: white;
            border-color: #e5879e;
        }

        #text-output {
            width: 100%;
            height: 200px;
            padding: 8px;
            border: 1px solid #ccc;
            border-radius: 6px;
            font-size: 12px;
            margin-bottom: 12px;
            resize: none;
        }

        #image-preview-container {
            flex: 1;
            overflow: auto;
            border: 1px dashed #ccc;
            background: #e9e9e9;
            border-radius: 8px;
            padding: 8px;
            margin-bottom: 10px;
            text-align: center;
            display: flex;
            justify-content: center;
            align-items: center;
        }

        /* =====================================================
 * 生成画像
 *
 * iPhone / Safari
 *
 * ・画像内テキストは選択させない
 * ・画像を長押ししたときは
 *   Safari標準の画像メニューを表示する
 * ・ドラッグ選択は不要
 * ===================================================== */

        #result-image {
            max-width: 100%;
            max-height: 50vh;

            object-fit: contain;

            border-radius: 4px;

            box-shadow:
                0 4px 10px rgba(0, 0, 0, 0.1);

            /*
     * テキスト選択は防止
     */
            user-select: none;
            -webkit-user-select: none;

            /*
     * ★重要
     *
     * none にすると
     * iPhoneの長押し画像メニューが出なくなる。
     */
            -webkit-touch-callout: default;

            /*
     * 画像自身がタッチを受け取る
     */
            pointer-events: auto;
        }


        /*
 * 画像周辺では
 * テキスト選択だけ防ぐ。
 *
 * touch-callout は禁止しない。
 */

        #image-preview-container {
            user-select: none;
            -webkit-user-select: none;
        }

        #loading-overlay {
            display: none;
            position: fixed;
            top: 0;
            left: 0;
            width: 100%;
            height: 100%;
            background: rgba(0, 0, 0, 0.7);
            color: white;
            font-weight: bold;
            font-size: 14px;
            justify-content: center;
            align-items: center;
            z-index: 9999;
            flex-direction: column;
            gap: 10px;
        }

        .spinner {
            border: 4px solid rgba(255, 255, 255, 0.3);
            border-top: 4px solid white;
            border-radius: 50%;
            width: 30px;
            height: 30px;
            animation: spin 1s linear infinite;
        }

        @keyframes spin {
            0% {
                transform: rotate(0deg);
            }

            100% {
                transform: rotate(360deg);
            }
        }

        /*
 * =====================================================
 * トレード連携フィルター
 * =====================================================
 */

        .btn-trade-stock {
            background-color: #eaf3ff;
            color: #4a90e2;
            border: 1px solid #b9d7ff;
        }

        .btn-trade-stock.active {
            background-color: #4a90e2;
            color: white;
            border-color: #4a90e2;
        }

        .btn-trade-want {
            background-color: #fff0f4;
            color: #e5879e;
            border: 1px solid #ffc5d3;
        }

        .btn-trade-want.active {
            background-color: #e5879e;
            color: white;
            border-color: #e5879e;
        }


        /* =====================================================
 * ポーズカード最終調整
 * ポーズ名が1文字しか表示されない問題を修正
 * ===================================================== */

        .pose-top {
            display: flex !important;
            align-items: center !important;
            justify-content: space-between !important;

            width: 100% !important;
            min-height: 30px !important;

            padding: 0 1px !important;
        }


        /* ポーズ名 */

        .pose-label {
            flex: 1 1 auto !important;
            min-width: 0 !important;

            margin: 0 !important;
            padding: 0 !important;

            font-size: 14px !important;
            line-height: 1.2 !important;

            font-weight: 700 !important;

            color: #555 !important;

            white-space: nowrap !important;
            overflow: hidden !important;
            text-overflow: ellipsis !important;
        }


        /* 🔥🤝 */

        .icon-group {
            display: flex !important;
            align-items: center !important;

            gap: 3px !important;

            flex: 0 0 auto !important;
        }


        .icon-btn {
            width: 27px !important;
            height: 27px !important;

            min-width: 27px !important;
            min-height: 27px !important;

            padding: 0 !important;

            flex: 0 0 27px !important;

            font-size: 13px !important;

            display: flex !important;
            align-items: center !important;
            justify-content: center !important;
        }


        /* 4種のときは少しだけ文字を小さくして
   「ヨリ・チュウ・ヒキ・座り」を優先して表示 */

        @media (max-width: 600px) {

            .pose-label {
                font-size: 13px !important;
            }

            .icon-btn {
                width: 25px !important;
                height: 25px !important;

                min-width: 25px !important;
                min-height: 25px !important;

                flex-basis: 25px !important;

                font-size: 12px !important;
            }

            .icon-group {
                gap: 2px !important;
            }
        }

        /* =====================================================
 * ポーズカード 最終レイアウト調整
 *
 * 4列表示でも
 * 「ヨリ」「チュウ」「ヒキ」「座り」を
 * 正常に表示できるようにする。
 *
 * 原因：
 * 🔥・🤝 のボタンが大きく、
 * ポーズ名の表示幅を圧迫していた。
 * ===================================================== */


        /* =====================================================
 * ポーズカード
 * ===================================================== */

        .pose-col {
            padding: 3px !important;

            border-radius: 6px !important;
        }


        /* =====================================================
 * 上段
 * ===================================================== */

        .pose-top {
            min-height: 27px !important;

            display: flex !important;
            align-items: center !important;

            gap: 2px !important;

            padding: 0 !important;
        }


        /* =====================================================
 * ポーズ名
 *
 * 「チュウ」「座り」まで表示できることを優先。
 * ===================================================== */

        .pose-label {
            flex: 1 1 auto !important;

            min-width: 0 !important;

            font-size: 11px !important;
            line-height: 1.1 !important;

            font-weight: 700 !important;

            white-space: nowrap !important;

            overflow: visible !important;

            text-overflow: clip !important;
        }


        /* =====================================================
 * 🔥🤝
 *
 * 27px → 22px
 * 横幅をかなり節約する。
 * ===================================================== */

        .icon-group {
            display: flex !important;

            gap: 2px !important;

            flex-shrink: 0 !important;
        }


        .icon-btn {
            width: 22px !important;
            height: 22px !important;

            min-width: 22px !important;
            min-height: 22px !important;

            flex: 0 0 22px !important;

            padding: 0 !important;

            font-size: 11px !important;

            border-radius: 50% !important;
        }


        /* =====================================================
 * 下段
 * ===================================================== */

        .pose-bottom {
            height: 31px !important;

            margin-top: 2px !important;
        }


        .stepper-btn {
            width: 32px !important;
            height: 29px !important;

            font-size: 15px !important;
        }


        /* 枚数 */

        .qty-tap-area {
            height: 29px !important;

            font-size: 13px !important;
        }


        /* =====================================================
 * かなり狭いスマホ
 * ===================================================== */

        @media (max-width: 380px) {

            .pose-col {
                padding: 2px !important;
            }

            .pose-top {
                min-height: 25px !important;
            }

            .pose-label {
                font-size: 10px !important;
            }

            .icon-btn {
                width: 20px !important;
                height: 20px !important;

                min-width: 20px !important;
                min-height: 20px !important;

                flex-basis: 20px !important;

                font-size: 10px !important;
            }

            .pose-bottom {
                height: 29px !important;
            }

            .stepper-btn {
                width: 30px !important;
                height: 27px !important;

                font-size: 14px !important;
            }

            .qty-tap-area {
                height: 27px !important;

                font-size: 12px !important;
            }
        }

        /* =====================================================
 * ポーズカード 最終レイアウト調整
 *
 * 目的：
 *  ・4種表示でもポーズ名を完全表示
 *  ・🔥🤝と文字が重ならない
 *  ・上下段を均等で見やすくする
 *  ・1枚目のイメージに近づける
 * ===================================================== */


        /* =====================================================
 * ポーズカード本体
 * ===================================================== */

        .pose-col {
            min-width: 0 !important;

            display: flex !important;
            flex-direction: column !important;

            padding: 6px !important;

            border-radius: 8px !important;
        }


        /* =====================================================
 * 上段
 *
 * 左：ポーズ名
 * 右：🔥🤝
 * ===================================================== */

        .pose-top {
            display: grid !important;

            grid-template-columns: minmax(0, 1fr) auto !important;

            align-items: center !important;

            column-gap: 5px !important;

            width: 100% !important;

            min-height: 38px !important;

            margin: 0 0 5px 0 !important;

            padding: 0 !important;
        }


        /* =====================================================
 * ポーズ名
 * ===================================================== */

        .pose-label {
            min-width: 0 !important;

            width: 100% !important;

            font-size: 13px !important;

            line-height: 1.2 !important;

            font-weight: 700 !important;

            color: #555 !important;

            white-space: nowrap !important;

            overflow: hidden !important;

            text-overflow: clip !important;
        }


        /* =====================================================
 * 🔥🤝
 * ===================================================== */

        .icon-group {
            display: flex !important;

            align-items: center !important;

            gap: 4px !important;

            flex-shrink: 0 !important;
        }


        .icon-btn {
            width: 32px !important;
            height: 32px !important;

            min-width: 32px !important;
            min-height: 32px !important;

            flex: 0 0 32px !important;

            padding: 0 !important;

            font-size: 15px !important;

            border-radius: 50% !important;
        }


        /* =====================================================
 * 下段
 *
 *   −   |   0   |   ＋
 *
 * ===================================================== */

        .pose-bottom {
            display: grid !important;

            grid-template-columns:
                1fr 1fr 1fr !important;

            align-items: center !important;

            width: 100% !important;

            height: 42px !important;
            min-height: 42px !important;

            margin: 0 !important;

            padding: 0 !important;

            background: #fff !important;

            border: 1px solid #dcdcdc !important;

            border-radius: 7px !important;

            overflow: hidden !important;
        }


        /* =====================================================
 * − / ＋
 * ===================================================== */

        .stepper-btn {
            width: 100% !important;
            height: 40px !important;

            margin: 0 !important;
            padding: 0 !important;

            border: none !important;

            background: #f5f5f5 !important;

            color: #333 !important;

            font-size: 19px !important;

            font-weight: 700 !important;

            display: flex !important;

            align-items: center !important;
            justify-content: center !important;
        }


        /* 左右ボタンの境界 */

        .stepper-btn:first-child {
            border-right: 1px solid #eeeeee !important;
        }

        .stepper-btn:last-child {
            border-left: 1px solid #eeeeee !important;
        }


        /* =====================================================
 * 枚数
 *
 * 中央部分をタップ → ＋1
 * ===================================================== */

        .qty-tap-area {
            width: 100% !important;
            height: 40px !important;

            display: flex !important;

            align-items: center !important;
            justify-content: center !important;

            background: #fff !important;

            font-size: 18px !important;

            font-weight: 700 !important;

            color: #333 !important;

            cursor: pointer !important;

            user-select: none !important;
            -webkit-user-select: none !important;
            -webkit-touch-callout: none !important;
        }


        /* 中央タップ時 */

        .qty-tap-area:active {
            background: #f5f5f5 !important;
        }


        /* =====================================================
 * スマホ
 * ===================================================== */

        @media (max-width: 600px) {

            .pose-col {
                padding: 5px !important;
            }

            .pose-top {
                min-height: 36px !important;

                column-gap: 4px !important;

                margin-bottom: 4px !important;
            }

            .pose-label {
                font-size: 12px !important;
            }

            .icon-group {
                gap: 3px !important;
            }

            .icon-btn {
                width: 29px !important;
                height: 29px !important;

                min-width: 29px !important;
                min-height: 29px !important;

                flex-basis: 29px !important;

                font-size: 14px !important;
            }

            .pose-bottom {
                height: 40px !important;
                min-height: 40px !important;
            }

            .stepper-btn {
                height: 38px !important;

                font-size: 18px !important;
            }

            .qty-tap-area {
                height: 38px !important;

                font-size: 17px !important;
            }
        }

        /* =====================================================
 * ポーズカード・コンパクト版
 *
 * 4列表示を基準に、
 * スマホで窮屈にならないサイズへ調整
 * ===================================================== */


        /* =====================================================
 * メンバー名
 * ===================================================== */

        .member-info {
            margin-bottom: 4px !important;
            padding: 0 2px !important;
        }

        .member-name {
            font-size: 13px !important;
            line-height: 1.2 !important;
        }


        /* =====================================================
 * ポーズグリッド
 * ===================================================== */

        .poses-grid {
            gap: 4px !important;
        }


        /* =====================================================
 * ポーズカード
 * ===================================================== */

        .pose-col {
            padding: 3px !important;

            border-radius: 6px !important;

            min-width: 0 !important;
        }


        /* =====================================================
 * 上段
 *
 * ポーズ名　🔥 🤝
 * ===================================================== */

        .pose-top {
            display: flex !important;

            align-items: center !important;

            justify-content: space-between !important;

            gap: 2px !important;

            min-height: 27px !important;

            margin: 0 !important;

            padding: 0 !important;
        }


        /* =====================================================
 * ポーズ名
 * ===================================================== */

        .pose-label {
            flex: 1 1 auto !important;

            min-width: 0 !important;

            font-size: 10px !important;

            line-height: 1 !important;

            font-weight: 700 !important;

            white-space: nowrap !important;

            overflow: visible !important;

            text-overflow: clip !important;

            letter-spacing: -0.3px !important;
        }


        /* =====================================================
 * 🔥 🤝
 *
 * かなり小さくする
 * ===================================================== */

        .icon-group {
            display: flex !important;

            gap: 2px !important;

            flex: 0 0 auto !important;
        }


        .icon-btn {
            width: 20px !important;
            height: 20px !important;

            min-width: 20px !important;
            min-height: 20px !important;

            flex: 0 0 20px !important;

            padding: 0 !important;

            font-size: 10px !important;

            border-radius: 50% !important;
        }


        /* =====================================================
 * 下段
 *
 * −   0   ＋
 * ===================================================== */

        .pose-bottom {
            display: grid !important;

            grid-template-columns:
                1fr 1fr 1fr !important;

            width: 100% !important;

            height: 28px !important;
            min-height: 28px !important;

            margin: 2px 0 0 0 !important;

            border-radius: 5px !important;
        }


        /* =====================================================
 * − / ＋
 * ===================================================== */

        .stepper-btn {
            width: 100% !important;

            height: 26px !important;

            min-width: 0 !important;

            padding: 0 !important;

            font-size: 13px !important;

            font-weight: 700 !important;

            border: none !important;
        }


        /* 左右の境界 */

        .stepper-btn:first-child {
            border-right: 1px solid #eeeeee !important;
        }

        .stepper-btn:last-child {
            border-left: 1px solid #eeeeee !important;
        }


        /* =====================================================
 * 中央の枚数
 * ===================================================== */

        .qty-tap-area {
            width: 100% !important;

            height: 26px !important;

            min-width: 0 !important;

            font-size: 12px !important;

            font-weight: 700 !important;

            display: flex !important;

            align-items: center !important;

            justify-content: center !important;
        }


        /* =====================================================
 * さらに狭いiPhone
 * ===================================================== */

        @media (max-width: 380px) {

            .poses-grid {
                gap: 3px !important;
            }

            .pose-col {
                padding: 2px !important;
            }

            .pose-top {
                min-height: 24px !important;
            }

            .pose-label {
                font-size: 9px !important;
                letter-spacing: -0.4px !important;
            }

            .icon-group {
                gap: 1px !important;
            }

            .icon-btn {
                width: 18px !important;
                height: 18px !important;

                min-width: 18px !important;
                min-height: 18px !important;

                flex-basis: 18px !important;

                font-size: 9px !important;
            }

            .pose-bottom {
                height: 26px !important;
                min-height: 26px !important;
            }

            .stepper-btn {
                height: 24px !important;
                font-size: 13px !important;
            }

            .qty-tap-area {
                height: 24px !important;
                font-size: 11px !important;
            }
        }

        /* =====================================================
 * Firebase Authentication
 * ===================================================== */

        .auth-area {
            display: flex;
            justify-content: center;
            align-items: center;
            gap: 8px;

            margin-top: 8px;

            min-height: 34px;
        }


        .auth-login-btn {
            border: 1px solid #ddd;
            border-radius: 18px;

            padding: 6px 12px;

            background: #fff;
            color: #444;

            font-size: 11px;
            font-weight: 700;

            cursor: pointer;
        }


        .auth-login-btn:disabled {
            opacity: 0.55;
            cursor: default;
        }


        .auth-user {
            display: none;

            align-items: center;
            justify-content: center;

            gap: 7px;

            min-width: 0;
        }


        .auth-user-image {
            width: 28px;
            height: 28px;

            border-radius: 50%;

            object-fit: cover;

            background: #eee;
        }


        .auth-user-info {
            min-width: 0;

            text-align: left;
        }


        .auth-user-name {
            max-width: 150px;

            overflow: hidden;
            white-space: nowrap;
            text-overflow: ellipsis;

            font-size: 11px;
            font-weight: 700;

            color: #444;
        }


        .auth-user-email {
            max-width: 150px;

            overflow: hidden;
            white-space: nowrap;
            text-overflow: ellipsis;

            font-size: 9px;

            color: #888;
        }


        .auth-logout-btn {
            border: none;
            border-radius: 14px;

            padding: 5px 9px;

            background: #f0f0f0;
            color: #666;

            font-size: 10px;
            font-weight: 700;

            cursor: pointer;
        }

        /* =====================================================
 * メールアドレス認証
 * ===================================================== */

        .auth-login-buttons {
            display: flex;
            gap: 6px;
            flex-wrap: wrap;
            justify-content: center;
        }


        .email-auth-modal-content {
            width: 92%;
            max-width: 360px;
        }


        .email-auth-field {
            width: 100%;

            padding: 10px 12px;
            margin-bottom: 8px;

            border: 1px solid #ddd;
            border-radius: 8px;

            font-size: 13px;

            outline: none;
        }


        .email-auth-field:focus {
            border-color: #e5879e;
        }


        .email-auth-actions {
            display: flex;

            gap: 8px;

            margin-top: 8px;
        }


        .email-auth-actions .btn {
            flex: 1;
        }


        .email-auth-link {
            border: none;
            background: transparent;

            color: #777;

            font-size: 10px;

            margin-top: 10px;

            cursor: pointer;

            text-decoration: underline;
        }

        /* =====================================================
 * PC版：横一列レイアウト 最終調整
 * ===================================================== */
        @media (min-width: 900px) {
            .pose-col {
                display: grid !important;
                grid-template-columns:
                    minmax(0, 1fr) 132px !important;

                align-items: center !important;
                gap: 8px !important;

                min-height: 46px !important;

                padding: 6px 8px !important;

                border-radius: 7px !important;
                box-shadow: none !important;
            }

            .pose-top {
                display: grid !important;
                grid-template-columns:
                    minmax(0, 1fr) auto !important;

                align-items: center !important;
                gap: 5px !important;

                width: 100% !important;
                min-height: 28px !important;

                margin: 0 !important;
                padding: 0 !important;
            }

            .pose-label {
                min-width: 0 !important;

                font-size: 12px !important;
                line-height: 1.2 !important;
                letter-spacing: 0 !important;

                white-space: nowrap !important;
                overflow: hidden !important;
                text-overflow: ellipsis !important;
            }

            .icon-group {
                display: flex !important;
                align-items: center !important;
                gap: 3px !important;

                flex: 0 0 auto !important;
            }

            .icon-btn {
                display: flex !important;
                align-items: center !important;
                justify-content: center !important;

                width: 22px !important;
                height: 22px !important;
                min-width: 22px !important;
                min-height: 22px !important;
                flex: 0 0 22px !important;

                padding: 0 !important;

                border: 1px solid #e5e5e5 !important;
                border-radius: 50% !important;

                background: #fff !important;
                box-shadow: none !important;
                outline: none !important;

                font-size: 11px !important;
            }

            .pose-bottom {
                display: grid !important;
                grid-template-columns:
                    36px 60px 36px !important;

                align-items: center !important;

                width: 132px !important;
                height: 30px !important;
                min-height: 30px !important;

                margin: 0 !important;
                padding: 0 !important;

                border: 1px solid #e3e3e3 !important;
                border-radius: 6px !important;

                background: #fff !important;
                box-shadow: none !important;
                outline: none !important;

                overflow: hidden !important;
            }

            .stepper-btn {
                width: 100% !important;
                height: 28px !important;

                margin: 0 !important;
                padding: 0 !important;

                border: 0 !important;
                border-radius: 0 !important;

                background: #f7f7f7 !important;
                background-image: none !important;

                box-shadow: none !important;
                outline: none !important;

                appearance: none !important;
                -webkit-appearance: none !important;

                font-size: 14px !important;
                font-weight: 700 !important;
            }

            .qty-tap-area {
                width: 100% !important;
                height: 28px !important;

                margin: 0 !important;
                padding: 0 !important;

                border: 0 !important;
                border-right: 1px solid #ededed !important;
                border-left: 1px solid #ededed !important;
                border-radius: 0 !important;

                background: #fff !important;
                box-shadow: none !important;
                outline: none !important;

                font-size: 13px !important;
                font-weight: 700 !important;
            }

            .stepper-btn:focus,
            .stepper-btn:focus-visible,
            .qty-tap-area:focus,
            .qty-tap-area:focus-visible {
                outline: none !important;
                box-shadow: none !important;
            }
        }

        /* =====================================================
 * PC版：4ポーズだけ上下2段へ切り替える
 * ===================================================== */
        @media (min-width: 900px) {
            .poses-grid[style*="--pose-count: 4"] .pose-col {
                display: flex !important;
                flex-direction: column !important;
                align-items: stretch !important;

                min-height: 72px !important;

                padding: 6px !important;
                gap: 5px !important;
            }

            /* 上段：ポーズ名＋🔥🤝 */
            .poses-grid[style*="--pose-count: 4"] .pose-top {
                display: grid !important;
                grid-template-columns:
                    minmax(0, 1fr) auto !important;

                align-items: center !important;
                gap: 5px !important;

                width: 100% !important;
                min-height: 24px !important;

                margin: 0 !important;
                padding: 0 1px !important;
            }

            .poses-grid[style*="--pose-count: 4"] .pose-label {
                min-width: 0 !important;

                font-size: 12px !important;
                line-height: 1.2 !important;
                letter-spacing: 0 !important;

                white-space: nowrap !important;
                overflow: hidden !important;
                text-overflow: ellipsis !important;
            }

            /* 下段：− 0 ＋ */
            .poses-grid[style*="--pose-count: 4"] .pose-bottom {
                display: grid !important;
                grid-template-columns:
                    1fr 1.5fr 1fr !important;

                width: 100% !important;
                height: 30px !important;
                min-height: 30px !important;

                margin: 0 !important;
            }

            .poses-grid[style*="--pose-count: 4"] .stepper-btn,
            .poses-grid[style*="--pose-count: 4"] .qty-tap-area {
                height: 28px !important;
            }
        }

        /* =====================================================
 * PC版の🔥をスマホ版に近い表示へ統一
 * ===================================================== */
        @media (min-width: 900px) {
            .fire-btn {
                background: #fff !important;
                border: 1px solid #e5e5e5 !important;

                box-shadow: none !important;
                outline: none !important;

                filter: none !important;
                opacity: 1 !important;

                transform: none !important;

                transition:
                    background-color 0.15s ease,
                    border-color 0.15s ease,
                    transform 0.15s ease,
                    opacity 0.15s ease !important;
            }

            /* 熱望OFF */
            .fire-btn:not(.active) {
                background: #fff !important;
                border-color: #e5e5e5 !important;

                opacity: 1 !important;
            }

            /* 熱望ON */
            .fire-btn.active {
                background: #ffedf1 !important;
                border-color: #ff9eb5 !important;

                opacity: 1 !important;
                transform: scale(1) !important;

                box-shadow: none !important;
            }

            .fire-btn:hover {
                opacity: 1 !important;
            }

            .fire-btn:active {
                transform: scale(0.94) !important;
            }

            .fire-btn.active:active {
                transform: scale(1) !important;
            }
        }
        /* =====================================================
 * ハイブリッド型の操作欄
 * ===================================================== */

.search-control-row {
    margin-bottom: 8px;
}

.search-control-row .search-box {
    width: 100%;
    flex: 1 1 100%;
}

.primary-filter-row {
    display: grid;
    grid-template-columns:
        repeat(2, minmax(0, 1fr));
    gap: 8px;
    margin-bottom: 8px;
}

.primary-filter-row .select-box {
    width: 100%;
    min-width: 0;
}

.quick-filter-row {
    justify-content: flex-start;
    gap: 6px;
    margin-bottom: 8px;
}

.menu-control-row {
    display: grid;
    grid-template-columns:
        repeat(3, minmax(0, 1fr)) auto;
    gap: 6px;
    padding-top: 8px;
    border-top: 1px dashed #e5e5e5;
    margin-bottom: 0;
}

.menu-control-row .btn {
    width: 100%;
    padding-left: 8px;
    padding-right: 8px;
}

.menu-control-row .btn-settings {
    width: 34px;
    height: 34px;
}

@media (max-width: 420px) {
    .primary-filter-row {
        grid-template-columns: 1fr;
    }

    .menu-control-row {
        grid-template-columns:
            repeat(3, minmax(0, 1fr)) auto;
    }

    .menu-control-row .btn {
        padding: 6px 4px;
        font-size: 10px;
    }
}
    
        /* 回収目標・コンプ操作 */
        .member-info { justify-content:flex-start; gap:8px; }
        .member-name-actions { display:flex; align-items:center; gap:8px; min-width:0; }
        .complete-count { margin-left:auto; color:#777; font-size:10px; font-weight:700; white-space:nowrap; }
        .complete-add-btn { min-height:28px; padding:4px 8px; border:1px solid #e8b8c4; border-radius:999px; background:#fff; color:#c75c78; font-size:10px; font-weight:700; cursor:pointer; white-space:nowrap; }
        body.tab-have .complete-add-btn { border-color:#b8d3f5; color:#3978bd; }
        .complete-add-btn:disabled { cursor:not-allowed; opacity:.45; }
        .target-form-grid { display:grid; gap:12px; text-align:left; }
        .target-form-grid label { display:grid; gap:6px; color:#555; font-size:12px; font-weight:700; }
        .target-form-grid .select-box { width:100%; }
        .target-summary { margin:14px 0; padding:10px; border-radius:8px; background:#fff5f7; color:#77505a; font-size:12px; font-weight:700; text-align:center; }
        .danger-zone { margin-top:16px; padding-top:14px; border-top:1px dashed #ddd; }
        .danger-link-btn { border:0; background:transparent; color:#c43d3d; font-size:11px; font-weight:700; text-decoration:underline; cursor:pointer; }
        .auto-input-description { margin:0 0 14px; color:#666; font-size:12px; line-height:1.7; text-align:left; }
        .auto-input-result { margin:14px 0; padding:12px; border-radius:10px; background:#fff7fa; color:#555; font-size:12px; font-weight:700; line-height:1.7; text-align:left; }
        .auto-input-details { margin:0 0 16px; color:#666; font-size:11px; line-height:1.7; text-align:left; }
        .auto-input-details summary { color:#555; font-weight:700; cursor:pointer; }
        .auto-input-details ul { margin:8px 0 0; padding-left:20px; }
        .auto-review-open-btn { display:block; margin:-4px 0 16px; padding:8px 2px; border:0; background:transparent; color:#c75c78; font-size:11px; font-weight:700; text-decoration:underline; cursor:pointer; }
        .auto-review-content { width:min(92vw, 540px); max-height:84vh; display:flex; flex-direction:column; }
        .auto-review-summary { margin:0 0 10px; color:#666; font-size:11px; text-align:left; }
        .auto-review-list { min-height:90px; overflow-y:auto; padding:2px; text-align:left; }
        .auto-review-member { margin:14px 0 6px; color:#333; font-size:13px; font-weight:700; }
        .auto-review-member:first-child { margin-top:0; }
        .auto-review-line { padding:6px 8px; color:#555; font-size:12px; line-height:1.6; overflow-wrap:anywhere; }
        .auto-review-edit-group { margin-bottom:10px; padding:9px; border-radius:9px; background:#fafafa; }
        .auto-review-edit-title { margin-bottom:5px; color:#444; font-size:12px; font-weight:700; }
        .auto-review-pose-row { display:grid; grid-template-columns:minmax(0,1fr) auto; align-items:center; gap:8px; padding:5px 0; border-top:1px solid #eee; }
        .auto-review-pose-row:first-of-type { border-top:0; }
        .auto-review-pose-check { display:flex; align-items:center; gap:6px; min-width:0; color:#555; font-size:11px; }
        .auto-review-stepper { display:flex; align-items:center; gap:4px; }
        .auto-review-stepper button { width:28px; height:28px; padding:0; border:1px solid #ddd; border-radius:7px; background:#fff; color:#555; font-weight:700; cursor:pointer; }
        .auto-review-stepper span { min-width:22px; color:#444; font-size:12px; font-weight:700; text-align:center; }
        .auto-review-badge { color:#c75c78; font-size:11px; font-weight:700; }
        .auto-review-empty { padding:20px 8px; color:#777; font-size:12px; text-align:center; }
        .auto-review-toolbar { display:none; gap:8px; flex-wrap:wrap; margin:8px 0; }
        .auto-review-toolbar.is-visible { display:flex; }
        .auto-review-toolbar button { border:0; background:transparent; color:#666; font-size:11px; font-weight:700; text-decoration:underline; cursor:pointer; }
        @media (max-width:420px) {
            .member-info { align-items:center; }
            .member-name-actions { gap:6px; }
        }


        .action-toast {
            position:fixed; left:50%; bottom:22px; z-index:3000;
            transform:translateX(-50%); display:none; align-items:center; gap:12px;
            width:min(92vw, 430px); padding:11px 14px; border-radius:10px;
            background:#333; color:#fff; box-shadow:0 6px 22px rgba(0,0,0,.25);
            font-size:12px; font-weight:700;
        }
        .action-toast.show { display:flex; }
        .action-toast button { margin-left:auto; border:0; background:transparent; color:#ffd5df; font-weight:800; cursor:pointer; }

        /* =====================================================
         * Settings / auth entry / mobile touch refinement
         * ===================================================== */
        .auth-login-primary {
            min-width: 150px;
            min-height: 38px;
            padding: 8px 18px;
            border-color: #e7c8d0;
            background: #fff7f9;
            color: #c85f7a;
        }

        .auth-options-content,
        .settings-modal-content {
            width: calc(100% - 28px);
            max-width: 440px;
        }

        .settings-modal-content {
            max-height: min(86vh, 720px);
            overflow-y: auto;
            text-align: left;
        }

        .settings-modal-title {
            margin: 0 0 14px;
            font-size: 16px;
            text-align: center;
            color: #444;
        }

        .settings-section {
            margin: 0 0 12px;
            padding: 12px;
            border: 1px solid #ececec;
            border-radius: 12px;
            background: #fcfcfc;
        }

        .settings-section-title {
            margin: 0 0 5px;
            font-size: 12px;
            color: #444;
        }

        .settings-section-description {
            margin: 0 0 10px;
            color: #777;
            font-size: 10px;
            line-height: 1.6;
        }

        .settings-oshi-list {
            max-height: 190px;
            overflow-y: auto;
            text-align: left;
            font-size: 12px;
        }

        .settings-action-grid,
        .auth-options-actions {
            display: grid;
            grid-template-columns: repeat(2, minmax(0, 1fr));
            gap: 8px;
        }

        .auth-options-actions {
            grid-template-columns: 1fr;
            margin-bottom: 10px;
        }

        .settings-action-grid .btn,
        .auth-options-actions .auth-login-btn {
            width: 100%;
            min-height: 38px;
        }

        .settings-disclosure-list {
            display: grid;
            gap: 8px;
        }

        .settings-disclosure {
            border: 1px solid #ececec;
            border-radius: 12px;
            background: #fcfcfc;
            overflow: hidden;
        }

        .settings-disclosure summary {
            display: flex;
            align-items: center;
            min-height: 44px;
            padding: 10px 12px;
            color: #444;
            font-size: 12px;
            font-weight: 700;
            cursor: pointer;
            list-style: none;
        }

        .settings-disclosure summary::-webkit-details-marker {
            display: none;
        }

        .settings-disclosure summary::after {
            content: '›';
            margin-left: auto;
            color: #999;
            font-size: 18px;
            line-height: 1;
            transform: rotate(90deg);
            transition: transform 0.15s ease;
        }

        .settings-disclosure[open] summary::after {
            transform: rotate(-90deg);
        }

        .settings-disclosure-body {
            padding: 10px 12px 12px;
            border-top: 1px solid #f0f0f0;
        }

        .settings-delete-zone {
            margin-top: 12px;
            padding: 12px;
            border: 1px solid #f1c4c4;
            border-radius: 10px;
            background: #fff7f7;
        }

        .settings-delete-title {
            margin: 0 0 6px;
            color: #b63838;
            font-size: 11px;
            font-weight: 700;
        }

        .settings-danger-zone {
            margin-top: 12px;
            padding-top: 12px;
            border-top: 1px dashed #ddd;
        }

        .settings-danger-title {
            margin: 0 0 8px;
            color: #c0392b;
            font-size: 10px;
            font-weight: 700;
        }

        .settings-danger-button,
        .settings-close-wide {
            width: 100%;
        }

        .settings-footer-actions {
            display: flex;
            justify-content: flex-end;
            gap: 8px;
            position: sticky;
            bottom: -1px;
            padding-top: 10px;
            background: #fff;
        }

        @media (max-width: 600px) {
            .auth-login-btn,
            .menu-control-row .btn,
            .menu-control-row .btn-settings {
                min-height: 44px;
            }

            .menu-control-row .btn-settings {
                width: 44px;
                height: 44px;
            }

            .icon-btn {
                width: 32px !important;
                height: 32px !important;
                min-width: 32px !important;
                min-height: 32px !important;
                flex-basis: 32px !important;
            }

            .pose-bottom {
                height: 36px !important;
                min-height: 36px !important;
            }

            .stepper-btn,
            .qty-tap-area {
                height: 34px !important;
                min-height: 34px !important;
            }
        }

    
        .settings-menu-list { display: grid; gap: 8px; }
        .settings-menu-button {
            width: 100%; min-height: 48px; display: flex; align-items: center; justify-content: space-between;
            gap: 12px; padding: 12px 14px; border: 1px solid #e8e8e8; border-radius: 12px;
            background: #fff; color: #444; font: inherit; font-size: 13px; font-weight: 700; text-align: left; cursor: pointer;
        }
        .settings-menu-button:focus-visible { outline: 2px solid #e5879e; outline-offset: 2px; }
        .settings-detail-modal { max-height: min(78vh, 680px); overflow-y: auto; }
        #settings-oshi-modal .settings-detail-modal { max-height: min(88vh, 760px); }
        #settings-oshi-modal .settings-oshi-list {
            max-height: min(56vh, 420px);
            padding-right: 4px;
        }
        @media (max-width: 600px) {
            .settings-detail-wrapper {
                align-items: center;
                padding: 14px;
            }
            .settings-detail-wrapper .settings-detail-modal {
                width: calc(100% - 8px); max-width: 440px; max-height: 86vh; margin: 0; border-radius: 16px;
            }
            #settings-oshi-modal .settings-detail-modal { max-height: 90vh; }
            #settings-oshi-modal .settings-oshi-list { max-height: min(58vh, 440px); }
        }

        /* =====================================================
         * ポーズカード：4列のまま薄型に整える
         * 見た目とタップ範囲を分離する
         * ===================================================== */
        @media (max-width: 600px) {
            .pose-col {
                padding: 3px !important;
                border-color: #ececec !important;
                border-radius: 8px !important;
            }

            .pose-top {
                display: grid !important;
                grid-template-columns: minmax(0, 1fr) auto !important;
                align-items: center !important;
                min-height: 26px !important;
                height: 26px !important;
                margin: 0 0 2px 0 !important;
                padding: 0 1px !important;
                column-gap: 1px !important;
                overflow: visible !important;
            }

            .pose-label {
                min-width: 0 !important;
                font-size: 10.5px !important;
                line-height: 1 !important;
                letter-spacing: -0.25px !important;
                white-space: nowrap !important;
                overflow: visible !important;
                text-overflow: clip !important;
            }

            .icon-group {
                display: flex !important;
                align-items: center !important;
                gap: 0 !important;
                overflow: visible !important;
            }

            /*
             * レイアウト上は小さく、透明な疑似要素で
             * 実際のタップ範囲を約30pxまで広げる。
             */
            .icon-btn,
            .fire-btn,
            .pending-btn {
                position: relative !important;
                width: 22px !important;
                height: 22px !important;
                min-width: 22px !important;
                min-height: 22px !important;
                flex: 0 0 22px !important;
                margin: 0 !important;
                padding: 0 !important;
                border: 1px solid #e5e5e5 !important;
                border-radius: 50% !important;
                background: #fff !important;
                font-size: 11px !important;
                line-height: 1 !important;
                overflow: visible !important;
            }

            .icon-btn::after,
            .fire-btn::after,
            .pending-btn::after {
                content: "";
                position: absolute;
                inset: -4px;
                border-radius: 50%;
                background: transparent;
            }

            .icon-btn.active,
            .fire-btn.active,
            .pending-btn.active {
                background: #ffedf1 !important;
                border-color: #ff9eb5 !important;
            }

            .fire-btn:not(.active),
            .pending-btn:not(.active) {
                background: #fff !important;
                border-color: #e5e5e5 !important;
            }

            .pose-bottom {
                grid-template-columns: 1fr 1.35fr 1fr !important;
                height: 30px !important;
                min-height: 30px !important;
                margin: 0 !important;
                border-color: #ececec !important;
                border-radius: 6px !important;
            }

            .stepper-btn,
            .qty-tap-area {
                height: 28px !important;
                min-height: 28px !important;
            }

            .stepper-btn {
                font-size: 16px !important;
            }

            .qty-tap-area {
                font-size: 14px !important;
            }
        }

        @media (max-width: 380px) {
            .pose-top {
                min-height: 25px !important;
                height: 25px !important;
            }

            .pose-label {
                font-size: 9.5px !important;
                letter-spacing: -0.35px !important;
            }

            .icon-btn,
            .fire-btn,
            .pending-btn {
                width: 21px !important;
                height: 21px !important;
                min-width: 21px !important;
                min-height: 21px !important;
                flex-basis: 21px !important;
            }

            .pose-bottom {
                height: 29px !important;
                min-height: 29px !important;
            }

            .stepper-btn,
            .qty-tap-area {
                height: 27px !important;
                min-height: 27px !important;
            }
        }

        /* =====================================================
         * スマホ：ポーズカードを2列表示
         * PC / タブレットの既存列数には影響させない。
         * ===================================================== */
        @media (max-width: 600px) {
            .poses-grid {
                grid-template-columns:
                    repeat(2, minmax(0, 1fr)) !important;
                gap: 6px !important;
            }
        }



/* =====================================================
 * Mode theme system
 * 管理=緑 / 求=ピンク / 譲=青
 * ===================================================== */
body.mode-manage {
    --theme-main: #2E7D32;
    --theme-soft: #EEF7EF;
    --theme-border: #CFE6D1;
    --theme-text: #245F28;
}

body.tab-want {
    --theme-main: #B84B68;
    --theme-soft: #FFF2F5;
    --theme-border: #F0CBD5;
    --theme-text: #8F3951;
}

body.tab-have {
    --theme-main: #2F6FB0;
    --theme-soft: #EEF6FF;
    --theme-border: #C9DDF5;
    --theme-text: #245A90;
}

body.mode-manage .segment-btn.active,
body.tab-want .segment-btn.active,
body.tab-have .segment-btn.active {
    color: var(--theme-main);
}

body.mode-manage .category-tag.active,
body.tab-want .category-tag.active,
body.tab-have .category-tag.active,
body.mode-manage .btn-primary,
body.tab-want .btn-primary,
body.tab-have .btn-primary,
body.mode-manage .btn-export,
body.tab-want .btn-export,
body.tab-have .btn-export,
body.mode-manage .btn-export-image,
body.tab-want .btn-export-image,
body.tab-have .btn-export-image {
    background: var(--theme-main);
    color: #fff;
}

body.mode-manage .filter-summary-chip,
body.tab-want .filter-summary-chip,
body.tab-have .filter-summary-chip {
    border-color: var(--theme-border);
    background: var(--theme-soft);
    color: var(--theme-text);
}

body.mode-manage .title-card,
body.tab-want .title-card,
body.tab-have .title-card {
    border-color: var(--theme-border);
}

body.mode-manage .title-card-header,
body.tab-want .title-card-header,
body.tab-have .title-card-header {
    color: var(--theme-main);
    border-bottom-color: var(--theme-border);
}

body.mode-manage .pose-col[data-qty]:not([data-qty="0"]),
body.tab-want .pose-col[data-qty]:not([data-qty="0"]),
body.tab-have .pose-col[data-qty]:not([data-qty="0"]) {
    background: var(--theme-soft);
    border-color: var(--theme-border);
}

body.mode-manage .complete-add-btn,
body.tab-want .complete-add-btn,
body.tab-have .complete-add-btn {
    border-color: var(--theme-border);
    color: var(--theme-main);
}

body.mode-manage .auto-review-open-btn,
body.tab-want .auto-review-open-btn,
body.tab-have .auto-review-open-btn,
body.mode-manage .auto-review-badge,
body.tab-want .auto-review-badge,
body.tab-have .auto-review-badge {
    color: var(--theme-main);
}

body.mode-manage .sync-conflict-option:hover,
body.mode-manage .sync-conflict-option:focus-visible,
body.mode-manage .sync-conflict-option.recommended,
body.tab-want .sync-conflict-option:hover,
body.tab-want .sync-conflict-option:focus-visible,
body.tab-want .sync-conflict-option.recommended,
body.tab-have .sync-conflict-option:hover,
body.tab-have .sync-conflict-option:focus-visible,
body.tab-have .sync-conflict-option.recommended {
    border-color: var(--theme-main);
}

body.mode-manage .sync-conflict-option.recommended,
body.tab-want .sync-conflict-option.recommended,
body.tab-have .sync-conflict-option.recommended {
    background: var(--theme-soft);
}

body.mode-manage .sync-conflict-option.recommended strong,
body.tab-want .sync-conflict-option.recommended strong,
body.tab-have .sync-conflict-option.recommended strong {
    color: var(--theme-main);
}