* {
            box-sizing: border-box;
        }

        html,
        body {
            margin: 0;
            width: 100%;
            height: 100%;
            height: -webkit-fill-available;
            height: 100dvh;
            overflow: hidden;
            font-family:
                Inter,
                Arial,
                Helvetica,
                sans-serif;
            background: #f5f5f5;
            color: #171717;
        }


        /* =====================================================
           APP
        ===================================================== */

        #app {
            position: fixed;
            inset: 0;
            width: 100%;
            height: var(--live-viewport-height, 100dvh);
            min-height: -webkit-fill-available;
            overflow: hidden;
        }


        /* =====================================================
           HEADER
        ===================================================== */

        #header {
            position: absolute;
            top: 0;
            left: 0;
            right: 0;

            z-index: 1500;

            min-height:
                calc(
                    62px +
                    env(safe-area-inset-top)
                );

            padding:
                calc(
                    8px +
                    env(safe-area-inset-top)
                )
                14px
                8px
                14px;

            background:
                rgba(255,255,255,0.94);

            backdrop-filter: blur(14px);
            -webkit-backdrop-filter: blur(14px);

            border-bottom:
                1px solid rgba(0,0,0,0.06);

            box-shadow: 0 3px 16px rgba(0,0,0,0.05);

            display: flex;
            align-items: center;
            justify-content: space-between;
        }


        #brand {
            font-size: 17px;
            font-weight: 700;
            line-height: 1.1;
            display: flex;
            align-items: center;
        }

        #brand .brand-logo {
            width: 150px;
            height: 58px;
            object-fit: contain;
        }

        #brand .brand-title { display: none; }


        #live-badge {
            display: flex;
            align-items: center;
            gap: 6px;

            padding: 7px 10px;

            border-radius: 999px;

            background: #e9f7ed;
            color: #16803c;

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

        #live-badge.stale {
            background: #fff3dd;
            color: #9a5a00;
        }


        .live-dot {
            width: 7px;
            height: 7px;
            border-radius: 50%;
            background: #16a34a;
        }


        #live-badge.stale .live-dot {
            background: #d68b00;
        }