/* =========================================================
   FILE: /assets/fu/crowd_map.css
   Crowd Map + comments sheet styles extracted from facts_unveiled_en.php.
   Phase 1 extraction: no UX or API behavior changes.
   ========================================================= */

.cm-overlay.show{
            touch-action:auto;
        }

        .cm-sheet,
        .cm-scroll{
            touch-action:auto;
            overflow-x:hidden;
        }

        .cm-overlay{
            position:fixed;
            inset:0;
            background:rgba(2,6,23,0.38);
            z-index:2000;
            display:flex;
            align-items:flex-end;
            justify-content:center;
            padding:0;
            opacity:0;
            pointer-events:none;
            transition:opacity 0.16s ease-out;
        }
        .cm-overlay.show{
            opacity:1;
            pointer-events:auto;
        }

        .cm-sheet{
            width:100%;
            max-width:960px;
            height:80vh;
            background:#fff;
            border-top-left-radius:24px;
            border-top-right-radius:24px;
            box-shadow:0 -10px 30px rgba(0,0,0,0.18);
            display:flex;
            flex-direction:column;
            overflow:hidden;
            transform:translateY(104%);
            transition:transform 0.30s cubic-bezier(0.18, 0.88, 0.32, 1);
            will-change:transform;
        }
        .cm-overlay.show .cm-sheet{
            transform:translateY(0);
        }
        .cm-sheet.is-dragging{
            transition:none;
        }
        .cm-sheet.is-swipe-closing{
            transition:transform 0.18s ease-in;
            transform:translateY(104%) !important;
        }

        .cm-handle-wrap{
            padding:8px 0 4px;
            display:flex;
            justify-content:center;
            flex:0 0 auto;
        }
        .cm-handle{
            width:44px;
            height:5px;
            border-radius:999px;
            background:#d1d5db;
        }

        .cm-header{
            padding:0 16px 10px;
            border-bottom:1px solid rgba(15,23,42,0.08);
            flex:0 0 auto;
        }
        .cm-header-row{
            display:flex;
            align-items:center;
            justify-content:space-between;
            gap:12px;
        }
        .cm-title{
            font-size:18px;
            font-weight:900;
            color:#0f172a;
            line-height:1.2;
            display:flex;
            align-items:center;
            gap:8px;
        }
        .cm-title-icon{
            width:18px;
            height:18px;
            color:#1987ff;
            flex:0 0 auto;
        }
        .cm-total-count{
            margin-left:2px;
            color:#64748b;
            font-size:14px;
            font-weight:800;
            white-space:nowrap;
        }
        .cm-close{
            appearance:none;
            border:none;
            background:transparent;
            color:#64748b;
            width:32px;
            height:32px;
            font-size:22px;
            line-height:1;
            cursor:pointer;
            flex:0 0 auto;
        }

        .cm-map{
            padding:10px 10px 12px;
            border-bottom:1px solid rgba(15,23,42,0.08);
            flex:0 0 auto;
            transition:max-height 0.22s ease, opacity 0.18s ease, padding 0.18s ease, border-color 0.18s ease;
            max-height:320px;
            opacity:1;
            overflow:visible;
        }
        .cm-sheet.cm-map-hidden .cm-map{
            max-height:0;
            opacity:0;
            padding-top:0;
            padding-bottom:0;
            border-bottom-color:transparent;
        }

        
        .gm-leaning-wrap{
            display:none;
            margin-bottom:14px;
            padding:12px 14px;
            border-radius:16px;
            background:rgba(25,135,255,0.06);
            border:1px solid rgba(25,135,255,0.10);
        }
        .gm-leaning-title{
            font-size:13px;
            font-weight:900;
            color:#475569;
            letter-spacing:0.01em;
            line-height:1.2;
            margin-bottom:6px;
        }
        .gm-leaning-text{
            font-size:15px;
            line-height:1.6;
            color:#334155;
            font-weight:700;
        }

        .cm-map-list{
            display:flex;
            flex-direction:column;
            gap:12px;
        }
        .cm-map-row{
            display:flex;
            flex-direction:column;
            gap:8px;
        }
        .cm-map-top{
            display:grid;
            grid-template-columns:minmax(0,1fr) auto;
            gap:10px;
            align-items:center;
        }
        .cm-map-label{
            font-size:14px;
            font-weight:800;
            color:#0f172a;
            min-width:0;
            line-height:1.25;
        }
        .cm-map-right{
            display:flex;
            align-items:center;
            gap:10px;
            flex:0 0 auto;
        }
        .cm-map-pct{
            font-size:13px;
            font-weight:900;
            color:#334155;
            text-align:right;
            min-width:34px;
        }
        .cm-heart-btn{
            appearance:none;
            border:none;
            background:transparent;
            color:#cbd5e1;
            width:32px;
            height:32px;
            padding:0;
            display:inline-flex;
            align-items:center;
            justify-content:center;
            cursor:pointer;
            border-radius:999px;
            transition:transform 0.16s ease, color 0.16s ease, background 0.16s ease;
        }
        .cm-heart-btn:hover{
            background:rgba(239,68,68,0.08);
        }
        .cm-heart-btn svg{
            width:18px;
            height:18px;
            display:block;
            fill:currentColor;
        }
        .cm-heart-btn.is-active{
            color:#ef4444;
            background:rgba(239,68,68,0.10);
            animation:cmHeartPop 0.24s ease-out;
        }
        @keyframes cmHeartPop{
            0%{ transform:scale(0.92); }
            55%{ transform:scale(1.18); }
            100%{ transform:scale(1); }
        }
        .cm-map-barline{
            display:grid;
            grid-template-columns:minmax(0,1fr);
            gap:0;
            align-items:center;
        }
        .cm-map-track{
            height:8px;
            width:72%;
            max-width:220px;
            border-radius:999px;
            background:rgba(15,23,42,0.08);
            overflow:hidden;
            position:relative;
        }
        .cm-map-fill{
            position:absolute;
            inset:0 auto 0 0;
            width:0%;
            border-radius:999px;
            transition:width 0.7s ease-out;
        }
        .cm-map-fill.fill-0{ background:var(--crowd-blue); }
        .cm-map-fill.fill-1{ background:var(--crowd-green); }
        .cm-map-fill.fill-2{ background:var(--crowd-orange); }
        .cm-map-fill.fill-3{ background:var(--crowd-teal); }

        .gm-live-panel{
            padding:0 0 4px;
        }
        .gm-live-top{
            display:block;
            margin-bottom:18px;
        }
        .gm-live-count{
            font-size:16px;
            font-weight:950;
            color:#0f172a;
            line-height:1.15;
        }
        .gm-live-count.gm-live-signal-only{
            font-size:22px;
            line-height:1.15;
            letter-spacing:-0.02em;
            color:#0f172a;
        }
        @media (max-width:768px){
            .gm-live-count.gm-live-signal-only{
                font-size:23px;
            }
        }
        .gm-live-sub{
            font-size:12px;
            font-weight:800;
            color:#64748b;
            line-height:1.2;
            margin-top:2px;
        }
        .gm-live-badge{
            display:inline-flex;
            align-items:center;
            gap:8px;
            padding:8px 14px;
            border-radius:999px;
            background:linear-gradient(180deg, rgba(239,68,68,0.18), rgba(239,68,68,0.09));
            color:#d92d20;
            border:1px solid rgba(239,68,68,0.18);
            box-shadow:0 8px 18px rgba(239,68,68,0.12);
            font-size:14px;
            font-weight:950;
            letter-spacing:0.05em;
            flex:0 0 auto;
        }
        .gm-live-badge::before{
            content:"";
            width:10px;
            height:10px;
            border-radius:999px;
            background:#ef4444;
            box-shadow:0 0 0 0 rgba(239,68,68,0.55);
            animation:gmLivePulse 1.2s ease-out infinite;
        }
        @keyframes gmLivePulse{
            0%{ box-shadow:0 0 0 0 rgba(239,68,68,0.45); }
            70%{ box-shadow:0 0 0 8px rgba(239,68,68,0); }
            100%{ box-shadow:0 0 0 0 rgba(239,68,68,0); }
        }
        .gm-us-map-card{
            position:relative;
            border-radius:22px;
            overflow:hidden;
            background:#fff;
            border:1px solid rgba(25,135,255,0.12);
            min-height:240px;
            margin-top:18px;
            margin-bottom:0;
            box-shadow:inset 0 1px 0 rgba(255,255,255,0.95), 0 8px 22px rgba(15,23,42,0.06);
        }
        .gm-us-map-svg{
            position:absolute;
            left:50%;
            top:50%;
            width:130%;
            height:130%;
            transform:translate(-50%, -50%);
            object-fit:contain;
            opacity:0.98;
            filter:drop-shadow(0 2px 6px rgba(15,23,42,0.08));
            pointer-events:none;
            user-select:none;
        }
        .gm-us-shadow, .gm-us-land, .gm-us-state-line{ display:none; }
        .gm-dot{
            position:absolute;
            width:7px;
            height:7px;
            border-radius:999px;
            transform:translate(-50%, -50%);
            background:var(--dot-color, #1987ff);
            box-shadow:
                0 0 0 8px var(--dot-glow, rgba(25,135,255,0.20)),
                0 0 22px var(--dot-glow, rgba(25,135,255,0.32));
            opacity:0.90;
            animation:gmDotPulse 1.65s ease-in-out infinite;
        }
        .gm-dot.big{
            width:10px;
            height:10px;
            opacity:0.97;
            box-shadow:
                0 0 0 10px var(--dot-glow, rgba(25,135,255,0.22)),
                0 0 28px var(--dot-glow, rgba(25,135,255,0.38));
        }
        .gm-dot.yours{
            width:16px;
            height:16px;
            z-index:4;
            opacity:1;
            box-shadow:
                0 0 0 16px var(--dot-glow, rgba(25,135,255,0.28)),
                0 0 40px var(--dot-glow, rgba(25,135,255,0.54));
            animation:gmYourDot 0.95s ease-out infinite;
        }
        @keyframes gmDotPulse{
            0%,100%{ transform:translate(-50%, -50%) scale(0.92); }
            50%{ transform:translate(-50%, -50%) scale(1.32); }
        }
        @keyframes gmYourDot{
            0%{ transform:translate(-50%, -50%) scale(0.82); }
            55%{ transform:translate(-50%, -50%) scale(1.26); }
            100%{ transform:translate(-50%, -50%) scale(0.82); }
        }
        .gm-map-legend{
            position:relative;
            z-index:6;
            display:flex;
            flex-wrap:wrap;
            gap:7px;
            align-items:center;
            margin:10px 2px 16px;
            padding:10px 11px;
            border-radius:18px;
            background:rgba(255,255,255,0.97);
            backdrop-filter:blur(10px);
            border:1px solid rgba(15,23,42,0.06);
            box-shadow:0 8px 18px rgba(15,23,42,0.08);
        }
        .gm-legend-chip{
            display:inline-flex;
            align-items:center;
            gap:5px;
            min-width:0;
            font-size:11px;
            font-weight:900;
            color:#334155;
            max-width:48%;
        }
        .gm-legend-dot{
            width:8px;
            height:8px;
            border-radius:999px;
            background:var(--legend-color, #1987ff);
            flex:0 0 auto;
        }
        .gm-legend-label{
            white-space:nowrap;
            overflow:hidden;
            text-overflow:ellipsis;
            min-width:0;
        }
        .gm-section-title{
            margin:14px 0 8px;
            font-size:14px;
            font-weight:950;
            color:#475569;
            letter-spacing:0.01em;
        }
        .gm-category-list{
            display:flex;
            flex-direction:column;
            gap:9px;
        }
        .gm-category-row{
            appearance:none;
            border:1px solid rgba(15,23,42,0.07);
            background:#fff;
            border-radius:17px;
            width:100%;
            padding:12px 11px;
            display:grid;
            grid-template-columns:minmax(0, 1fr) auto auto;
            align-items:center;
            gap:8px;
            text-align:left;
            cursor:pointer;
            box-shadow:0 5px 14px rgba(15,23,42,0.035);
        }
        .gm-category-row[disabled]{ opacity:0.68; cursor:default; }
        .gm-category-row.is-active{
            border-color:rgba(25,135,255,0.25);
            background:linear-gradient(180deg, rgba(25,135,255,0.055), rgba(255,255,255,0.98));
        }
        .gm-category-left{
            display:flex;
            align-items:center;
            gap:9px;
            min-width:0;
        }
        .gm-category-dot{
            width:12px;
            height:12px;
            border-radius:999px;
            background:var(--cat-color, #1987ff);
            box-shadow:0 0 0 5px var(--cat-glow, rgba(25,135,255,0.10));
            flex:0 0 auto;
        }
        .gm-category-label{
            font-size:15px;
            line-height:1.25;
            font-weight:900;
            color:#0f172a;
            white-space:nowrap;
            overflow:hidden;
            text-overflow:ellipsis;
        }
        .gm-category-count{
            display:none;
        }
        .gm-category-pct{
            min-width:44px;
            text-align:right;
            font-size:17px;
            font-weight:950;
            color:var(--cat-color, #1987ff);
            line-height:1;
        }
        .gm-category-heart{
            width:28px;
            height:28px;
            border-radius:999px;
            display:inline-flex;
            align-items:center;
            justify-content:center;
            color:#cbd5e1;
            background:#f8fafc;
            transition:color 0.16s ease, background 0.16s ease, transform 0.16s ease;
        }
        .gm-category-heart svg{
            width:16px;
            height:16px;
            fill:currentColor;
        }
        .gm-category-row.is-active .gm-category-heart{
            color:#ef4444;
            background:rgba(239,68,68,0.10);
            transform:scale(1.04);
        }
        .gm-empty-note{
            margin-top:10px;
            padding:12px 13px;
            border-radius:16px;
            background:rgba(25,135,255,0.06);
            border:1px solid rgba(25,135,255,0.10);
            color:#475569;
            font-size:14px;
            line-height:1.45;
            font-weight:750;
        }

        .cm-reaction-block{
            margin-top:14px;
            padding-top:14px;
            border-top:1px solid rgba(15,23,42,0.08);
        }
        .cm-reaction-title{
            font-size:13px;
            font-weight:900;
            color:#475569;
            letter-spacing:0.01em;
            margin-bottom:8px;
        }
        .cm-reaction-list{
            display:flex;
            flex-direction:column;
            gap:8px;
        }
        .cm-reaction-row{
            display:flex;
            align-items:center;
            justify-content:space-between;
            gap:12px;
            font-size:14px;
            color:#0f172a;
            line-height:1.35;
        }
        .cm-reaction-row-left{
            min-width:0;
            display:flex;
            align-items:center;
            gap:8px;
        }
        .cm-reaction-row-count{
            color:#64748b;
            font-size:13px;
            font-weight:800;
            white-space:nowrap;
        }
        .gm-cta{
            margin-top:14px;
            font-size:13px;
            font-weight:800;
            color:#1987ff;
            text-align:center;
        }

.cm-scroll{
            flex:1 1 auto;
            overflow:auto;
            -webkit-overflow-scrolling:touch;
            padding:10px 10px 0;
            background:#fff;
        }

        .cm-comment{
            display:flex;
            gap:10px;
            margin-bottom:14px;
            -webkit-user-select:none;
            user-select:none;
            -webkit-touch-callout:none;
            -webkit-tap-highlight-color:transparent;
            cursor:default;
        }
        .cm-comment,
        .cm-comment *{
            -webkit-user-select:none;
            user-select:none;
            -webkit-touch-callout:none;
        }
        .cm-comment-body{
            min-width:0;
            flex:1 1 auto;
        }
        .cm-comment-meta{
            display:flex;
            align-items:center;
            gap:8px;
            margin-bottom:4px;
        }
        .cm-comment-name{
            font-size:13px;
            font-weight:800;
            color:#111827;
            line-height:1.2;
            white-space:nowrap;
            overflow:hidden;
            text-overflow:ellipsis;
            max-width:160px;
        }
        .cm-comment-text{
            font-size:15px;
            line-height:1.55;
            color:#111827;
            word-break:break-word;
        }
        .cm-comment-media{
            margin-top:8px;
            max-width:220px;
            border-radius:14px;
            overflow:hidden;
            background:#fff;
            line-height:0;
        }
        .cm-comment-gif{
            display:block;
            width:auto;
            max-width:100%;
            max-height:180px;
            border-radius:14px;
            object-fit:contain;
            background:#fff;
        }
        .cm-comment.is-reply .cm-comment-media{
            max-width:180px;
        }
        @media (max-width:768px){
            .cm-comment-media{
                max-width:200px;
            }
            .cm-comment-gif{
                max-height:160px;
            }
        }
        .cm-comment-actions{
            display:flex;
            align-items:center;
            gap:14px;
            margin-top:6px;
            flex-wrap:wrap;
        }
        .cm-action-btn{
            appearance:none;
            border:none;
            background:transparent;
            cursor:pointer;
            padding:0;
            margin:0;
            font-size:12px;
            font-weight:800;
            color:#64748b;
            line-height:1;
        }
        .cm-action-btn.primary{ color:#1987ff; }
        .cm-replies-toggle{
            appearance:none;
            border:none;
            background:transparent;
            cursor:pointer;
            padding:0;
            margin-top:6px;
            color:#1987ff;
            font-size:12px;
            font-weight:800;
            line-height:1;
        }
        .cm-replies{
            display:block;
            margin-top:10px;
            padding-left:10px;
            border-left:2px solid rgba(15,23,42,0.08);
        }

        .cm-empty{
            padding:24px 0 28px;
            text-align:center;
            color:#64748b;
            font-size:14px;
        }

        .cm-loading-more{
            text-align:center;
            color:#64748b;
            font-size:13px;
            padding:10px 0 16px;
        }

        .cm-compose-wrap{
            flex:0 0 auto;
            border-top:1px solid rgba(15,23,42,0.08);
            background:#fff;
            padding:10px 12px calc(10px + env(safe-area-inset-bottom, 0px));
        }
        .cm-emoji-row{
            display:flex;
            gap:8px;
            overflow:auto;
            padding-bottom:8px;
            margin-bottom:8px;
            -webkit-overflow-scrolling:touch;
        }
        .cm-emoji-chip{
            appearance:none;
            border:none;
            background:#f1f5f9;
            border-radius:999px;
            min-width:36px;
            height:32px;
            padding:0 10px;
            cursor:pointer;
            font-size:18px;
            line-height:1;
            flex:0 0 auto;
        }
        .cm-gif-tray{
            display:none;
            margin:-2px 0 8px;
            padding:10px;
            border:1px solid rgba(15,23,42,0.08);
            border-radius:18px;
            background:#f8fafc;
            max-height:220px;
            overflow:auto;
            -webkit-overflow-scrolling:touch;
        }
        .cm-gif-tray.show{ display:block; }
        .cm-gif-grid{
            display:grid;
            grid-template-columns:repeat(4, minmax(0, 1fr));
            gap:8px;
        }
        .cm-gif-item{
            appearance:none;
            border:1px solid rgba(15,23,42,0.08);
            background:#fff;
            border-radius:14px;
            padding:0;
            aspect-ratio:1 / 1;
            overflow:hidden;
            cursor:pointer;
            display:flex;
            align-items:center;
            justify-content:center;
        }
        .cm-gif-item img{
            width:100%;
            height:100%;
            object-fit:cover;
            display:block;
        }
        .cm-gif-loading, .cm-gif-empty{
            color:#64748b;
            font-size:13px;
            font-weight:800;
            text-align:center;
            padding:14px 0;
        }
        .cm-selected-gif{
            display:none;
            align-items:center;
            gap:8px;
            margin:0 0 8px;
            padding:8px 10px;
            border-radius:16px;
            background:rgba(25,135,255,0.06);
            border:1px solid rgba(25,135,255,0.12);
        }
        .cm-selected-gif.show{ display:flex; }
        .cm-selected-gif img{
            width:54px;
            height:54px;
            border-radius:12px;
            object-fit:cover;
            background:#f1f5f9;
        }
        .cm-selected-gif span{
            flex:1 1 auto;
            min-width:0;
            color:#334155;
            font-size:12px;
            font-weight:900;
        }
        .cm-gif-remove{
            appearance:none;
            border:none;
            background:#fff;
            color:#64748b;
            width:30px;
            height:30px;
            border-radius:999px;
            font-size:20px;
            font-weight:900;
            line-height:1;
            cursor:pointer;
        }
        .cm-gif-btn{
            appearance:none;
            border:1px solid rgba(15,23,42,0.10);
            background:#fff;
            color:#111827;
            border-radius:10px;
            min-width:38px;
            height:32px;
            padding:0 8px;
            cursor:pointer;
            font-size:12px;
            font-weight:950;
            line-height:1;
            flex:0 0 auto;
        }
        .cm-gif-btn.is-active{
            color:#1987ff;
            border-color:rgba(25,135,255,0.25);
            background:rgba(25,135,255,0.08);
        }
        .cm-love-btn{
            appearance:none;
            border:none;
            background:transparent;
            cursor:pointer;
            padding:0;
            margin:0;
            font-size:12px;
            font-weight:850;
            color:#64748b;
            display:inline-flex;
            align-items:center;
            gap:4px;
            line-height:1;
        }
        .cm-love-btn .cm-love-icon{
            font-size:15px;
            line-height:1;
        }
        .cm-love-btn.is-loved{ color:#ef4444; }
        .cm-love-btn.is-pending{ opacity:0.55; pointer-events:none; }
        .cm-compose-row{
            display:flex;
            align-items:flex-end;
            gap:8px;
        }
        .cm-compose-box{
            flex:1 1 auto;
            min-width:0;
            display:flex;
            align-items:flex-end;
            gap:8px;
            background:#f8fafc;
            border:1px solid rgba(15,23,42,0.08);
            border-radius:18px;
            padding:8px 10px;
        }
        .cm-textarea{
            flex:1 1 auto;
            min-height:22px;
            max-height:96px;
            resize:none;
            appearance:none;
            border:none;
            background:transparent;
            outline:none;
            font:inherit;
            font-size:15px;
            line-height:1.45;
            color:#111827;
        }
        .cm-submit{
            appearance:none;
            border:none;
            background:#1987ff;
            color:#fff;
            border-radius:999px;
            padding:10px 14px;
            font-size:13px;
            font-weight:900;
            cursor:pointer;
            line-height:1;
            flex:0 0 auto;
        }
        .cm-submit[disabled]{
            opacity:0.45;
            cursor:default;
        }
        .cm-replying{
            font-size:12px;
            color:#64748b;
            margin-bottom:6px;
            display:none;
        }
        .cm-replying.show{ display:block; }
        .cm-replying button{
            appearance:none;
            border:none;
            background:transparent;
            color:#1987ff;
            cursor:pointer;
            font-size:12px;
            font-weight:800;
            margin-left:4px;
            padding:0;
        }

        .cm-login-note{
            text-align:center;
            color:#475569;
            font-size:13px;
            line-height:1.45;
            padding-top:2px;
        }
        .cm-login-note a{
            color:#1987ff;
            font-weight:800;
            text-decoration:none;
        }

        @media (max-width:768px){

            .cm-sheet{
                height:80vh;
                border-top-left-radius:22px;
                border-top-right-radius:22px;
            }
            .cm-header{ padding:0 14px 10px; }
            .cm-map{ padding:10px 8px 12px; }
            .cm-scroll{ padding:10px 8px 0; }
            .cm-compose-wrap{ padding:10px 12px calc(10px + env(safe-area-inset-bottom, 0px)); }
            .cm-map-label{
                font-size:15px;
            }
            .cm-map-pct{
                font-size:14px;
            }
            .cm-heart-btn{
                width:32px;
                height:32px;
            }
            .cm-heart-btn svg{
                width:19px;
                height:19px;
            }
            .cm-map-track{
                width:68%;
                max-width:none;
            }
            .cm-comment-name{ max-width:120px; }
            .cm-gif-grid{ grid-template-columns:repeat(3, minmax(0, 1fr)); }
            .cm-gif-tray{ max-height:210px; }
            .gm-leaning-title{ font-size:13px; }
            .gm-leaning-text{ font-size:16px; line-height:1.62; }
            .gm-live-badge{ font-size:15px; padding:9px 15px; }
            .gm-us-map-card{ min-height:240px; margin-top:18px; margin-bottom:0; }
            .gm-map-legend{ margin:10px 0 16px; }
            .gm-category-count{ font-size:11px; }
            .gm-category-pct{ min-width:38px; font-size:16px; }
        }

        @media (min-width:961px){
            
            .cm-sheet{
                height:80vh;
                max-width:820px;
            }
            .gm-us-map-card{
                min-height:390px;
                margin-top:22px;
                margin-bottom:0;
            }
            .gm-us-map-svg{
                width:139%;
                height:139%;
            }
            .gm-map-legend{
                margin:12px 0 18px;
                padding:12px 14px;
                justify-content:center;
            }
            .gm-legend-chip{
                font-size:12px;
                max-width:48%;
            }
        }

        /* Comment moderation: clean Instagram-style tap menu */
        .fh-comment-action-layer{
            position:fixed;
            inset:0;
            z-index:2600;
            background:rgba(2,6,23,0.22);
            display:none;
            align-items:flex-end;
            justify-content:center;
            padding:0 14px calc(14px + env(safe-area-inset-bottom, 0px));
        }
        .fh-comment-action-layer.show{ display:flex; }
        .fh-comment-action-card{
            width:min(420px, 100%);
            background:rgba(255,255,255,0.96);
            border:1px solid rgba(255,255,255,0.80);
            border-radius:28px;
            box-shadow:0 18px 40px rgba(15,23,42,0.18);
            overflow:hidden;
            backdrop-filter:blur(18px);
        }
        .fh-comment-action-btn{
            appearance:none;
            border:none;
            background:transparent;
            width:100%;
            min-height:58px;
            display:flex;
            align-items:center;
            gap:14px;
            padding:0 22px;
            color:#111827;
            font-size:18px;
            font-weight:850;
            text-align:left;
            cursor:pointer;
            border-bottom:1px solid rgba(15,23,42,0.08);
        }
        .fh-comment-action-btn:last-child{ border-bottom:none; }
        .fh-comment-action-btn svg{
            width:25px;
            height:25px;
            flex:0 0 auto;
            stroke-width:2.4;
        }
        .fh-comment-action-btn.report{ color:#ef4444; }
        .fh-report-layer{
            position:fixed;
            inset:0;
            z-index:2700;
            background:#fff;
            display:none;
            flex-direction:column;
            color:#0b1220;
        }
        .fh-report-layer.show{ display:flex; }
        .fh-report-topbar{
            height:64px;
            flex:0 0 auto;
            display:flex;
            align-items:center;
            justify-content:center;
            position:relative;
            border-bottom:1px solid rgba(15,23,42,0.08);
            padding-top:env(safe-area-inset-top, 0px);
            box-sizing:content-box;
        }
        .fh-report-topbar-title{
            font-size:18px;
            font-weight:950;
            letter-spacing:-0.01em;
        }
        .fh-report-close{
            appearance:none;
            border:none;
            background:transparent;
            position:absolute;
            right:18px;
            top:calc(14px + env(safe-area-inset-top, 0px));
            width:40px;
            height:40px;
            display:flex;
            align-items:center;
            justify-content:center;
            color:#0b1220;
            cursor:pointer;
        }
        .fh-report-close svg{ width:31px; height:31px; stroke-width:2.4; }
        .fh-report-body{
            flex:1 1 auto;
            overflow:auto;
            -webkit-overflow-scrolling:touch;
            padding:34px 32px calc(24px + env(safe-area-inset-bottom, 0px));
        }
        .fh-report-question{
            font-size:29px;
            line-height:1.1;
            font-weight:950;
            letter-spacing:-0.03em;
            margin:0 0 34px;
        }
        .fh-report-reason-list{
            display:flex;
            flex-direction:column;
            gap:0;
        }
        .fh-report-reason{
            appearance:none;
            border:none;
            background:transparent;
            min-height:72px;
            padding:0;
            display:flex;
            align-items:center;
            justify-content:space-between;
            gap:18px;
            color:#111827;
            font-size:22px;
            line-height:1.2;
            font-weight:500;
            text-align:left;
            cursor:pointer;
        }
        .fh-report-reason svg{
            width:24px;
            height:24px;
            color:#6b7280;
            flex:0 0 auto;
        }
        .fh-report-success{
            flex:1 1 auto;
            overflow:auto;
            -webkit-overflow-scrolling:touch;
            padding:64px 32px calc(24px + env(safe-area-inset-bottom, 0px));
            display:none;
            flex-direction:column;
            min-height:0;
        }
        .fh-report-layer.is-success .fh-report-body{ display:none; }
        .fh-report-layer.is-success .fh-report-success{ display:flex; }
        .fh-success-icon{
            width:112px;
            height:112px;
            border-radius:999px;
            background:#f1f5f9;
            display:flex;
            align-items:center;
            justify-content:center;
            margin:0 auto 42px;
            color:#111827;
        }
        .fh-success-icon svg{ width:50px; height:50px; stroke-width:2.5; }
        .fh-success-title{
            text-align:center;
            font-size:30px;
            line-height:1.15;
            font-weight:950;
            letter-spacing:-0.03em;
            margin-bottom:16px;
        }
        .fh-success-text{
            text-align:center;
            color:#6b7280;
            font-size:18px;
            line-height:1.38;
            margin:0 auto 60px;
            max-width:520px;
        }
        .fh-success-subtitle{
            font-size:23px;
            line-height:1.2;
            font-weight:950;
            margin:0 0 22px;
        }
        .fh-success-step{
            appearance:none;
            border:none;
            background:transparent;
            min-height:66px;
            padding:0;
            display:flex;
            align-items:center;
            justify-content:space-between;
            gap:18px;
            width:100%;
            text-align:left;
            color:#111827;
            font-size:21px;
            line-height:1.2;
            cursor:pointer;
        }
        .fh-success-step-left{
            display:flex;
            align-items:center;
            gap:18px;
            min-width:0;
        }
        .fh-success-step-left svg{
            width:28px;
            height:28px;
            flex:0 0 auto;
            stroke-width:2.2;
        }
        .fh-success-step > svg{
            width:23px;
            height:23px;
            color:#6b7280;
            flex:0 0 auto;
        }
        .fh-report-done-wrap{
            margin-top:auto;
            padding-top:32px;
        }
        .fh-report-done{
            appearance:none;
            border:none;
            background:#1987ff;
            color:#fff;
            width:100%;
            min-height:58px;
            border-radius:18px;
            font-size:18px;
            font-weight:950;
            cursor:pointer;
        }
        @media (min-width:769px){
            .fh-comment-action-layer{
                align-items:center;
                padding:18px;
            }
            .fh-report-layer{
                left:50%;
                transform:translateX(-50%);
                max-width:720px;
                box-shadow:0 0 0 1px rgba(15,23,42,0.08), 0 24px 80px rgba(15,23,42,0.18);
            }
        }
        @media (max-width:768px){
            .fh-comment-action-btn{ font-size:20px; min-height:64px; }
            .fh-report-body{ padding-left:31px; padding-right:31px; }
            .fh-report-question{ font-size:31px; margin-bottom:36px; }
            .fh-report-reason{ font-size:23px; min-height:74px; }
        }

        /* ✅ Final responsive overrides: desktop/tablet cards should stay readable, not newspaper-huge. */
        @media (min-width:769px){
        @media (min-width:1320px){
            
        }

/* Crowd Map exact original map ratio: us_map.avif = 2709 x 2084 */
.gm-us-map-card{
    position:relative !important;
    width:100% !important;
    aspect-ratio:2709 / 2084 !important;
    height:auto !important;
    min-height:0 !important;
    max-height:none !important;
    overflow:hidden !important;
    margin-top:18px !important;
    margin-bottom:0 !important;
    background:#fff !important;
}

.gm-us-map-svg{
    position:absolute !important;
    left:0 !important;
    top:0 !important;
    width:100% !important;
    height:100% !important;
    transform:none !important;
    object-fit:contain !important;
    display:block !important;
    opacity:0.98 !important;
}

.gm-dot{
    z-index:5;
}

.gm-empty-note{
    position:relative;
    z-index:6;
}

/* Keep exact ratio everywhere. Do not change this for desktop / horizontal / mobile. */
@media (min-width:769px){
    .cm-sheet .gm-us-map-card,
    .cm-standalone-page .gm-us-map-card{
        aspect-ratio:2709 / 2084 !important;
        max-height:none !important;
    }
}

@media (max-width:768px){
    .gm-us-map-card{
        aspect-ratio:2709 / 2084 !important;
    }
}

/* Temporary Crowd Map coordinate calibration mode */
.gm-map-debug-mode{
    cursor:crosshair;
}
.gm-map-debug-grid{
    position:absolute;
    inset:0;
    z-index:20;
    pointer-events:none;
    background-image:
        linear-gradient(to right, rgba(25,135,255,0.18) 1px, transparent 1px),
        linear-gradient(to bottom, rgba(25,135,255,0.18) 1px, transparent 1px);
    background-size:10% 10%;
}
.gm-map-debug-mark{
    position:absolute;
    z-index:30;
    transform:translate(-50%, -50%);
    min-width:7px;
    min-height:7px;
    padding:2px 4px;
    border-radius:999px;
    background:#ef4444;
    color:#fff;
    font-size:10px;
    font-weight:900;
    line-height:1;
    white-space:nowrap;
    pointer-events:none;
}

/* FactHub no-shake Crowd Map open fix */
@supports (height: 80dvh) {
    .cm-sheet{
        height:80dvh;
    }
}
@media (max-width:768px){
    @supports (height: 80dvh) {
        .cm-sheet{
            height:80dvh !important;
        }
    }
    .cm-overlay.show .cm-sheet{
        backface-visibility:hidden;
        transform:translate3d(0,0,0);
    }
    .cm-sheet{
        transform:translate3d(0,104%,0);
    }
}

/* FactHub hard no-shake bottom sheet fix */
.cm-overlay{
    contain:layout paint;
}
.cm-sheet{
    transform:translate3d(0,104%,0);
    backface-visibility:hidden;
    will-change:transform;
}
.cm-overlay.show .cm-sheet{
    transform:translate3d(0,0,0);
}
@supports (height: 80dvh){
    .cm-sheet{
        height:80dvh;
    }
}
html.fh-modal-open,
body.fh-modal-open{
    overscroll-behavior:none;
}