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

        html, body {
            height: 100%;
            overflow: hidden;
            font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
        }

        #demo-iframe {
            display: block;
            width: 100%;
            height: calc(100vh - 52px);
            border: none;
            transition: height .3s ease;
        }

        /* ── Bar ── */
        #demo-bar {
            position: fixed;
            bottom: 0;
            left: 0;
            right: 0;
            height: 52px;
            background: #fff;
            border-top: 1px solid #e9ecef;
            box-shadow: 0 -2px 12px rgba(0,0,0,.08);
            z-index: 999;
            display: flex;
            align-items: center;
            padding: 0 12px 0 0;
            gap: 10px;
            transition: width .3s ease, right .3s ease, border-radius .3s ease, padding .3s ease;
            overflow: hidden;
        }

        /* ── Ticker ── */
        #ticker-wrap {
            flex: 1;
            min-width: 0;
            overflow: hidden;
            height: 100%;
            display: flex;
            align-items: center;
            mask-image: linear-gradient(to right, transparent 0%, black 5%, black 95%, transparent 100%);
            -webkit-mask-image: linear-gradient(to right, transparent 0%, black 5%, black 95%, transparent 100%);
        }

        #ticker-track {
            display: flex;
            align-items: center;
            white-space: nowrap;
            animation: ticker-scroll 24s linear infinite;
            will-change: transform;
        }

        #ticker-track:hover { animation-play-state: paused; }

        @keyframes ticker-scroll {
            0%   { transform: translateX(0); }
            100% { transform: translateX(-50%); }
        }

        .ticker-item {
            display: inline-flex;
            align-items: center;
            gap: 5px;
            padding: 0 18px;
            font-size: 12px;
            color: #555;
            white-space: nowrap;
        }

        .ticker-item.is-label {
            font-size: 12px;
            color: #232323;
            font-weight: 500;
        }

        .ticker-item.is-feature::before {
            content: '✓';
            color: #16a34a;
            font-weight: 700;
            font-size: 11px;
        }

        .ticker-dot {
            display: inline-block;
            width: 3px;
            height: 3px;
            border-radius: 50%;
            background: #ccc;
            margin: 0 4px;
            vertical-align: middle;
            flex-shrink: 0;
        }

        /* ── Right side ── */
        #bar-right {
            display: flex;
            align-items: center;
            gap: 8px;
            flex-shrink: 0;
        }

        #demo-price-badge {
            display: inline-flex;
            align-items: baseline;
            gap: 2px;
            white-space: nowrap;
            background: #f5f5f5;
            border: 1px solid #e8e8e8;
            border-radius: 100px;
            padding: 4px 12px;
            font-size: 12px;
            color: #232323;
        }

        #demo-price-badge .price-amount {
            font-weight: 700;
            font-size: 14px;
            color: #f9643d;
        }

        #demo-order-btn {
            display: inline-flex;
            align-items: center;
            gap: 6px;
            white-space: nowrap;
            background: linear-gradient(135deg, #f9643d, #fe2a77);
            color: #fff;
            text-decoration: none;
            font-size: 13px;
            font-weight: 600;
            padding: 8px 18px;
            border-radius: 100px;
            transition: opacity .2s;
        }

        #demo-order-btn:hover { opacity: .88; color: #fff; }

        /* ── Chevron toggle ── */
        #bar-toggle {
            display: inline-flex;
            align-items: center;
            justify-content: center;
            width: 30px;
            height: 30px;
            border-radius: 50%;
            border: 1px solid #e8e8e8;
            background: #f5f5f5;
            cursor: pointer;
            flex-shrink: 0;
            font-size: 14px;
            color: #555;
            transition: background .2s;
            user-select: none;
        }

        #bar-toggle:hover { background: #ebebeb; }

        /* ── Collapsed state ── */
        #demo-bar.collapsed {
            right: auto;
            width: auto;
            padding: 8px 12px;
            border-radius: 0 12px 0 0;
            border-right: 1px solid #e9ecef;
            overflow: visible;
        }

        #demo-bar.collapsed #ticker-wrap,
        #demo-bar.collapsed #demo-price-badge {
            display: none;
        }

        #demo-iframe.collapsed {
            height: 100vh;
        }