/* Token warna navbar bawah, didaftarkan supaya bisa beranimasi mulus saat ganti tab/tema. */
        @property --bar      { syntax: '<color>'; inherits: true; initial-value: #1D1A28; }
        @property --stroke   { syntax: '<color>'; inherits: true; initial-value: #F6F4EF; }
        @property --fg       { syntax: '<color>'; inherits: true; initial-value: #837E93; }
        @property --accent   { syntax: '<color>'; inherits: true; initial-value: #FF9B7A; }
        @property --bubble   { syntax: '<color>'; inherits: true; initial-value: #F6F4EF; }
        @property --ink      { syntax: '<color>'; inherits: true; initial-value: #16141D; }
        @property --stagebg  { syntax: '<color>'; inherits: true; initial-value: #100E17; }

        * { margin: 0; padding: 0; box-sizing: border-box; -webkit-tap-highlight-color: transparent; }
        html, body { height: 100%; overflow: hidden; overscroll-behavior: none; }

        /* Tema per tab */
        body {
            --bar: #1D1A28; --stroke: #F6F4EF; --fg: #837E93;
            --accent: #FF9B7A; --bubble: #F6F4EF; --ink: #16141D; --stagebg: #100E17;
            --dock-w: 340px;
            font-family: 'Plus Jakarta Sans', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
            background: var(--stagebg);
            transition: --bar .4s ease, --stroke .4s ease, --fg .4s ease, --accent .4s ease,
                        --bubble .4s ease, --ink .4s ease, --stagebg .4s ease;
        }
        body[data-tab="cdn"]            { --bar: #222019; --stroke: #F3F1EC; --fg: #A9A49B; --accent: #8D887E; --bubble: #F3F1EC; --ink: #171614; --stagebg: #171614; }
        body[data-tab="cdn"][data-light]{ --bar: #FFFFFF; --stroke: #111110; --fg: #55534D; --accent: #B3AFA4; --bubble: #111110; --ink: #FFFFFF; --stagebg: #EEECE6; }

        /* Stage: dua frame bertumpuk */
        .stage { position: fixed; inset: 0; overflow: hidden; background: var(--stagebg); }
        .frame {
            position: absolute; inset: 0; width: 100%; height: 100%;
            border: 0; display: block; visibility: hidden; z-index: 1;
            background: #100E17;
        }
        .frame[data-tab="cdn"] { background: var(--stagebg); }
        .frame.is-active   { visibility: visible; }
        .frame.is-incoming { visibility: visible; z-index: 3; will-change: clip-path; }
        .frame.is-outgoing { will-change: transform; }
        .stage.is-busy .frame { pointer-events: none; }
        /* penutup transisi: div polos berwarna (tanpa konten), satu-satunya elemen yang dianimasikan */
        /* garis neon petir (SVG kecil, tanpa filter; kilau dibuat dari goresan tebal transparan) */
        .bolt { position: absolute; left: 0; top: -20px; height: 40px; z-index: 6; visibility: hidden; pointer-events: none; overflow: visible; will-change: transform; }
        .bolt polyline { fill: none; stroke-linejoin: round; stroke-linecap: round; }
        .bolt .g { stroke: #ff1744; stroke-width: 12; opacity: .3; }
        .bolt .c { stroke: #ff2d4d; stroke-width: 3.2; }
        .bolt .h { stroke: #ffdfe3; stroke-width: 1.2; }
        .wave { position: absolute; inset: 0; z-index: 2; visibility: hidden; pointer-events: none; }
        /* peredam tampilan lama: animasi opacity saja (ringan) */
        .dim { position: absolute; inset: 0; z-index: 2; background: #000; opacity: 0; visibility: hidden; pointer-events: none; }

        /* Navbar bawah */
        .dock {
            position: fixed; z-index: 10; left: 50%;
            bottom: calc(14px + env(safe-area-inset-bottom, 0px));
            width: min(calc(100vw - 28px), var(--dock-w)); height: 64px;
            transform: translateX(-50%);
            user-select: none; -webkit-user-select: none;
        }
        .dock-inner { position: absolute; inset: 0; will-change: transform; }
        .dock-shape { position: absolute; left: 0; top: 0; width: 100%; height: 100%; overflow: visible; pointer-events: none; }
        .dock-shape path { fill: var(--bar); stroke: var(--stroke); stroke-width: 2.5; stroke-linejoin: round; }
        /* bayangan tebal navbar: path kedua yang digeser 5px (pengganti filter:drop-shadow yang berat) */
        .dock-shape path.sh { fill: var(--accent); stroke: var(--accent); transform: translateY(5px); }

        .items { position: absolute; inset: 0; display: grid; grid-auto-flow: column; grid-auto-columns: 1fr; }
        .item {
            appearance: none; background: none; border: 0; cursor: pointer; color: var(--fg);
            display: flex; flex-direction: column; align-items: center; justify-content: flex-start;
            padding-top: 13px; gap: 3px; font: inherit; outline: none;
        }
        .item svg { width: 22px; height: 22px; fill: none; stroke: currentColor; stroke-width: 2.25; stroke-linecap: round; stroke-linejoin: round;
                    transition: transform .45s cubic-bezier(.34,1.56,.64,1), opacity .25s ease; }
        .item span { font-size: 10.5px; font-weight: 700; letter-spacing: .06em; text-transform: uppercase;
                     transition: color .3s ease, transform .45s cubic-bezier(.34,1.56,.64,1); }
        .item:active svg { transform: scale(.82); }
        .item:focus-visible span { text-decoration: underline; text-underline-offset: 3px; }
        /* tab aktif: ikon pindah ke gelembung, label turun & berwarna */
        .item[aria-current="page"] { color: var(--stroke); cursor: default; }
        .item[aria-current="page"] svg { opacity: 0; transform: translateY(16px) scale(.5); }
        .item[aria-current="page"] span { transform: translateY(5px); }

        /* Gelembung yang melompat mengikuti tab aktif */
        .bubble {
            position: absolute; left: 0; top: 0; width: 56px; height: 56px; margin: -28px 0 0 -28px; border-radius: 50%;
            background: var(--bubble); color: var(--ink); border: 2.5px solid var(--stroke);
            box-shadow: 0 6px 0 0 var(--accent);
            display: grid; place-items: center; pointer-events: none; will-change: transform;
        }
        .bubble svg { grid-area: 1 / 1; width: 25px; height: 25px; fill: none; stroke: currentColor; stroke-width: 2.4; stroke-linecap: round; stroke-linejoin: round;
                      opacity: 0; transform: scale(.3) rotate(-70deg); transition: opacity .25s ease, transform .55s cubic-bezier(.34,1.56,.64,1); }
        .bubble svg.on { opacity: 1; transform: none; transition-delay: .06s; }

        @media (prefers-reduced-motion: reduce) {
            body { transition: none; }
            .item svg, .item span, .bubble svg { transition: none; }
        }