/* Exact mobile header + bottom navigation transplanted from the first ClickBee app. */
:root{--ease-bounce:cubic-bezier(.22,1,.36,1);--ease-snappy:cubic-bezier(.23,1,.32,1)}

/* Hidden by default so desktop from this app remains untouched. */
.topbar.cb-first-app,.bottom-nav.cb-first-app{display:none}

@media(max-width:768px){
  .topbar.cb-first-app{position:relative;z-index:30;display:flex;align-items:center;justify-content:space-between;width:100%;height:33px;margin:0;padding:0 3px;color:#f5f2ff;background:transparent;border:0;font-family:Arial,Helvetica,sans-serif;overflow:visible;animation:drop-in .48s var(--ease-snappy) both}
  .topbar.cb-first-app .wordmark{display:inline-block;margin:0;padding:0;border:0;color:inherit;background:transparent;font-family:Arial,Helvetica,sans-serif;font-size:12px;font-weight:700;letter-spacing:-.03em;line-height:normal;text-transform:none;cursor:pointer;box-shadow:none}
  .topbar.cb-first-app .top-actions{position:relative;display:flex;align-items:center;gap:14px;margin:0;padding:0}
  .topbar.cb-first-app .theme-toggle{display:inline-block;margin:0;padding:0;border:0;color:#f6deff;background:transparent;font-family:Arial,Helvetica,sans-serif;font-size:20px;line-height:1;cursor:pointer;box-shadow:none}
  .topbar.cb-first-app .theme-toggle:hover{color:#fff}
  .topbar.cb-first-app .gear{display:inline-block;margin:0;padding:0;border:0;color:#fff;background:transparent;font-family:Arial,Helvetica,sans-serif;font-size:26px;font-weight:400;line-height:1;filter:drop-shadow(0 0 5px #9a7aff);cursor:pointer;box-shadow:none}
  .topbar.cb-first-app .avatar{display:grid;place-items:center;width:32px;height:32px;margin:0;padding:0;border:1px solid rgba(220,194,255,.8);border-radius:50%;color:#f9eaff;background:linear-gradient(145deg,#c28cff,#4d4da0);font-family:Arial,Helvetica,sans-serif;font-size:10px;font-weight:700;line-height:1;cursor:pointer;box-shadow:none;object-fit:initial}

  .topbar.cb-first-app .profile-menu{position:absolute;z-index:300;top:43px;right:0;width:205px;padding:8px;border:1px solid rgba(193,158,255,.3);border-radius:14px;background:rgba(20,24,57,.97);box-shadow:0 15px 35px rgba(0,0,0,.35);opacity:0;transform:translateY(-7px) scale(.97);transform-origin:top right;transition:opacity .18s var(--ease-snappy),transform .18s var(--ease-snappy);backdrop-filter:blur(16px);font-family:Arial,Helvetica,sans-serif}
  .topbar.cb-first-app .profile-menu.visible{opacity:1;transform:translateY(0) scale(1)}
  .topbar.cb-first-app .profile-menu-head{display:flex;align-items:center;gap:9px;padding:8px;border-bottom:1px solid rgba(158,168,235,.14)}
  .topbar.cb-first-app .profile-menu-avatar{display:grid;place-items:center;width:31px;height:31px;border-radius:50%;color:#fff;background:linear-gradient(145deg,#c28cff,#4d4da0);font-size:10px;font-weight:700}
  .topbar.cb-first-app .profile-menu-head b,.topbar.cb-first-app .profile-menu-head small{display:block}
  .topbar.cb-first-app .profile-menu-head b{color:#fff;font-size:11px;line-height:normal}
  .topbar.cb-first-app .profile-menu-head small{margin-top:3px;color:#8d96be;font-size:8px;line-height:normal}
  .topbar.cb-first-app .profile-menu button{display:block;width:100%;height:auto;margin:0;padding:9px;border:0;border-radius:7px;color:#bfc5e5;background:transparent;text-align:left;font-family:Arial,Helvetica,sans-serif;font-size:10px;font-weight:400;line-height:normal;box-shadow:none;cursor:pointer}
  .topbar.cb-first-app .profile-menu button:hover{color:#fff;background:rgba(160,126,245,.16)}

  nav.bottom-nav.cb-first-app{position:fixed;z-index:100;bottom:10px;left:50%;display:flex;align-items:stretch;justify-content:space-around;width:min(428px,calc(100% - 28px));height:auto;max-width:none;margin:0;padding:10px 4px 8px;overflow:visible;transform:translateX(-50%);border:1px solid rgba(216,183,255,.58);border-radius:26px;background:linear-gradient(110deg,rgba(65,65,119,.94),rgba(63,46,117,.92));box-shadow:0 4px 19px #05072199,inset 0 1px rgba(255,255,255,.18);backdrop-filter:blur(12px);font-family:Arial,Helvetica,sans-serif;animation:nav-in .65s .25s var(--ease-bounce) both}
  nav.bottom-nav.cb-first-app:before,nav.bottom-nav.cb-first-app:after{content:none!important;display:none!important}
  nav.bottom-nav.cb-first-app a,nav.bottom-nav.cb-first-app button{position:relative;display:flex;flex:1;flex-direction:column;align-items:center;justify-content:flex-start;gap:3px;height:auto;margin:0;padding:0;border:0;border-radius:0;color:#d1d0e5;background:transparent;text-decoration:none;text-transform:none;font-family:Arial,Helvetica,sans-serif;font-size:10px;font-weight:400;line-height:normal;letter-spacing:normal;overflow:visible;box-shadow:none;cursor:pointer;transition:transform .2s var(--ease-bounce),color .18s ease,background .18s ease}
  nav.bottom-nav.cb-first-app a span,nav.bottom-nav.cb-first-app button span{display:block;font-size:22px;line-height:1;transform:none}
  nav.bottom-nav.cb-first-app a.active,nav.bottom-nav.cb-first-app button.active{color:#fff}
  nav.bottom-nav.cb-first-app a.active:before,nav.bottom-nav.cb-first-app button.active:before{content:"";position:absolute;inset:-6px 4px -5px;border:1px solid rgba(245,182,255,.8);border-radius:20px;background:linear-gradient(135deg,rgba(209,105,255,.55),rgba(99,78,235,.38));z-index:-1}
  nav.bottom-nav.cb-first-app a:after,nav.bottom-nav.cb-first-app button:after{content:none!important;display:none!important}
  nav.bottom-nav.cb-first-app a:hover,nav.bottom-nav.cb-first-app button:hover{color:#fff}
  nav.bottom-nav.cb-first-app a:hover span,nav.bottom-nav.cb-first-app button:hover span{transform:scale(1.16) rotate(-4deg)}
}

@keyframes drop-in{from{opacity:0;transform:translateY(-12px)}to{opacity:1;transform:translateY(0)}}
@keyframes nav-in{from{opacity:0;transform:translate(-50%,26px) scale(.94)}to{opacity:1;transform:translate(-50%,0) scale(1)}}


/* Keep the existing mobile top bar visible on larger screens too.
   Sidebar stays exactly where it is; this only duplicates those controls at the top. */
@media(min-width:769px){
  .topbar.cb-first-app{
    position:relative;
    z-index:30;
    display:flex;
    align-items:center;
    justify-content:space-between;
    width:100%;
    height:33px;
    margin:0;
    padding:0 3px;
    color:#f5f2ff;
    background:transparent;
    border:0;
    font-family:Arial,Helvetica,sans-serif;
    overflow:visible;
  }

  .topbar.cb-first-app .wordmark{
    display:inline-block;
    margin:0;
    padding:0;
    border:0;
    color:inherit;
    background:transparent;
    font-family:Arial,Helvetica,sans-serif;
    font-size:12px;
    font-weight:700;
    letter-spacing:-.03em;
    line-height:normal;
    text-transform:none;
    cursor:pointer;
    box-shadow:none;
  }

  .topbar.cb-first-app .top-actions{
    position:relative;
    display:flex;
    align-items:center;
    gap:14px;
    margin:0;
    padding:0;
  }

  .topbar.cb-first-app .theme-toggle{
    display:inline-block;
    margin:0;
    padding:0;
    border:0;
    color:#f6deff;
    background:transparent;
    font-family:Arial,Helvetica,sans-serif;
    font-size:20px;
    line-height:1;
    cursor:pointer;
    box-shadow:none;
  }

  .topbar.cb-first-app .theme-toggle:hover{
    color:#fff;
  }

  .topbar.cb-first-app .gear{
    display:inline-block;
    margin:0;
    padding:0;
    border:0;
    color:#fff;
    background:transparent;
    font-family:Arial,Helvetica,sans-serif;
    font-size:26px;
    font-weight:400;
    line-height:1;
    filter:drop-shadow(0 0 5px #9a7aff);
    cursor:pointer;
    box-shadow:none;
  }

  .topbar.cb-first-app .avatar{
    display:grid;
    place-items:center;
    width:32px;
    height:32px;
    margin:0;
    padding:0;
    border:1px solid rgba(220,194,255,.8);
    border-radius:50%;
    color:#f9eaff;
    background:linear-gradient(145deg,#c28cff,#4d4da0);
    font-family:Arial,Helvetica,sans-serif;
    font-size:10px;
    font-weight:700;
    line-height:1;
    cursor:pointer;
    box-shadow:none;
    object-fit:initial;
  }

  .topbar.cb-first-app .profile-menu{
    position:absolute;
    z-index:300;
    top:43px;
    right:0;
    width:205px;
    padding:8px;
    border:1px solid rgba(193,158,255,.3);
    border-radius:14px;
    background:rgba(20,24,57,.97);
    box-shadow:0 15px 35px rgba(0,0,0,.35);
    opacity:0;
    transform:translateY(-7px) scale(.97);
    transform-origin:top right;
    transition:opacity .18s var(--ease-snappy),transform .18s var(--ease-snappy);
    backdrop-filter:blur(16px);
    font-family:Arial,Helvetica,sans-serif;
    pointer-events:none;
  }

  .topbar.cb-first-app .profile-menu.visible{
    opacity:1;
    transform:translateY(0) scale(1);
    pointer-events:auto;
  }

  .topbar.cb-first-app .profile-menu-head{
    display:flex;
    align-items:center;
    gap:9px;
    padding:8px;
    border-bottom:1px solid rgba(158,168,235,.14);
  }

  .topbar.cb-first-app .profile-menu-avatar{
    display:grid;
    place-items:center;
    width:31px;
    height:31px;
    border-radius:50%;
    color:#fff;
    background:linear-gradient(145deg,#c28cff,#4d4da0);
    font-size:10px;
    font-weight:700;
  }

  .topbar.cb-first-app .profile-menu-head b,
  .topbar.cb-first-app .profile-menu-head small{
    display:block;
  }

  .topbar.cb-first-app .profile-menu-head b{
    color:#fff;
    font-size:11px;
    line-height:normal;
  }

  .topbar.cb-first-app .profile-menu-head small{
    margin-top:3px;
    color:#8d96be;
    font-size:8px;
    line-height:normal;
  }

  .topbar.cb-first-app .profile-menu button{
    display:block;
    width:100%;
    height:auto;
    margin:0;
    padding:9px;
    border:0;
    border-radius:7px;
    color:#bfc5e5;
    background:transparent;
    text-align:left;
    font-family:Arial,Helvetica,sans-serif;
    font-size:10px;
    font-weight:400;
    line-height:normal;
    box-shadow:none;
    cursor:pointer;
  }

  .topbar.cb-first-app .profile-menu button:hover{
    color:#fff;
    background:rgba(160,126,245,.16);
  }
}


/* Desktop topbar refinement: keep controls, hide only How it works */
@media(min-width:769px){
  .topbar.cb-first-app{
    justify-content:flex-end!important;
  }

  .topbar.cb-first-app .wordmark{
    display:none!important;
  }

  .topbar.cb-first-app .top-actions{
    margin-left:auto!important;
  }
}


/* Bottom mobile menu premium interaction polish
   Keep existing layout/colour/style; upgrade only depth, motion and feedback. */
@media(max-width:768px){
  nav.bottom-nav.cb-first-app a,
  nav.bottom-nav.cb-first-app button{
    transform:translate3d(0,0,0);
    backface-visibility:hidden;
    -webkit-backface-visibility:hidden;
    transition:
      transform .18s cubic-bezier(.22,1,.36,1),
      color .16s ease,
      filter .16s ease,
      box-shadow .18s ease!important;
  }

  /* Active item gets the same subtle premium depth as the desktop side menu. */
  nav.bottom-nav.cb-first-app a.active,
  nav.bottom-nav.cb-first-app button.active{
    box-shadow:
      0 7px 18px rgba(8,12,38,.16),
      inset 0 1px 0 rgba(255,255,255,.055);
  }

  nav.bottom-nav.cb-first-app a.active:before,
  nav.bottom-nav.cb-first-app button.active:before{
    box-shadow:
      0 6px 16px rgba(45,31,122,.16),
      inset 0 1px 0 rgba(255,255,255,.08);
  }

  nav.bottom-nav.cb-first-app a span,
  nav.bottom-nav.cb-first-app button span{
    transform:translate3d(0,0,0);
    backface-visibility:hidden;
    -webkit-backface-visibility:hidden;
    transition:
      transform .18s cubic-bezier(.22,1,.36,1),
      filter .18s ease!important;
  }

  nav.bottom-nav.cb-first-app a.active span,
  nav.bottom-nav.cb-first-app button.active span{
    filter:
      drop-shadow(0 4px 8px rgba(0,0,0,.16))
      drop-shadow(0 0 5px rgba(139,133,255,.16));
  }

  /* Fast native-feeling press feedback for touch. */
  nav.bottom-nav.cb-first-app a:active,
  nav.bottom-nav.cb-first-app button:active{
    transform:translate3d(0,1px,0) scale(.965);
  }

  nav.bottom-nav.cb-first-app a:active span,
  nav.bottom-nav.cb-first-app button:active span{
    transform:scale(.94);
  }
}

/* Hover effects only where real hover exists, avoiding sticky mobile hover states. */
@media(max-width:768px) and (hover:hover) and (pointer:fine){
  nav.bottom-nav.cb-first-app a:hover,
  nav.bottom-nav.cb-first-app button:hover{
    transform:translate3d(0,-1px,0);
    color:#fff;
    box-shadow:
      0 8px 18px rgba(8,12,38,.15),
      inset 0 1px 0 rgba(255,255,255,.045);
  }

  nav.bottom-nav.cb-first-app a:hover span,
  nav.bottom-nav.cb-first-app button:hover span{
    transform:translateY(-1px) scale(1.08);
    filter:
      drop-shadow(0 5px 9px rgba(0,0,0,.18))
      drop-shadow(0 0 6px rgba(139,133,255,.18));
  }
}

@media(max-width:768px) and (prefers-reduced-motion:reduce){
  nav.bottom-nav.cb-first-app a,
  nav.bottom-nav.cb-first-app button,
  nav.bottom-nav.cb-first-app a span,
  nav.bottom-nav.cb-first-app button span{
    transition:none!important;
  }
}


/* Mobile bottom nav — full premium button selection on hover/focus */
@media(max-width:768px) and (hover:hover) and (pointer:fine){
  nav.bottom-nav.cb-first-app a:hover,
  nav.bottom-nav.cb-first-app button:hover,
  nav.bottom-nav.cb-first-app a:focus-visible,
  nav.bottom-nav.cb-first-app button:focus-visible{
    color:#fff!important;
    transform:translate3d(0,-1px,0)!important;
    outline:none!important;
  }

  /* Give hovered/focused buttons the same selected pill as active buttons. */
  nav.bottom-nav.cb-first-app a:hover:before,
  nav.bottom-nav.cb-first-app button:hover:before,
  nav.bottom-nav.cb-first-app a:focus-visible:before,
  nav.bottom-nav.cb-first-app button:focus-visible:before{
    content:""!important;
    position:absolute!important;
    inset:-6px 4px -5px!important;
    z-index:-1!important;
    border:1px solid rgba(245,182,255,.8)!important;
    border-radius:20px!important;
    background:linear-gradient(
      135deg,
      rgba(209,105,255,.55),
      rgba(99,78,235,.38)
    )!important;
    box-shadow:
      0 8px 20px rgba(32,22,104,.22),
      inset 0 1px 0 rgba(255,255,255,.10)!important;
    pointer-events:none!important;
  }

  nav.bottom-nav.cb-first-app a:hover span,
  nav.bottom-nav.cb-first-app button:hover span,
  nav.bottom-nav.cb-first-app a:focus-visible span,
  nav.bottom-nav.cb-first-app button:focus-visible span{
    transform:translateY(-1px) scale(1.08)!important;
    filter:
      drop-shadow(0 5px 9px rgba(0,0,0,.18))
      drop-shadow(0 0 7px rgba(139,133,255,.24))!important;
  }
}

/* Keep touch feedback fast and obvious without sticky hover. */
@media(max-width:768px) and (hover:none){
  nav.bottom-nav.cb-first-app a:active:before,
  nav.bottom-nav.cb-first-app button:active:before{
    content:""!important;
    position:absolute!important;
    inset:-6px 4px -5px!important;
    z-index:-1!important;
    border:1px solid rgba(245,182,255,.72)!important;
    border-radius:20px!important;
    background:linear-gradient(
      135deg,
      rgba(209,105,255,.48),
      rgba(99,78,235,.34)
    )!important;
    box-shadow:
      0 5px 14px rgba(32,22,104,.18),
      inset 0 1px 0 rgba(255,255,255,.08)!important;
    pointer-events:none!important;
  }
}


/* Bottom mobile menu — exact visual edge spacing
   Restore original rail padding; remove the duplicate inset only at the two ends. */
@media(max-width:768px){
  nav.bottom-nav.cb-first-app{
    padding-left:4px!important;
    padding-right:4px!important;
  }

  /* General active/hover pill keeps its existing 4px inner inset.
     At the OUTER edge only, remove that extra inset so:
     nav edge -> pill = 4px, matching the visible top gap. */
  nav.bottom-nav.cb-first-app > a:first-child.active:before,
  nav.bottom-nav.cb-first-app > button:first-child.active:before,
  nav.bottom-nav.cb-first-app > a:first-child:hover:before,
  nav.bottom-nav.cb-first-app > button:first-child:hover:before,
  nav.bottom-nav.cb-first-app > a:first-child:focus-visible:before,
  nav.bottom-nav.cb-first-app > button:first-child:focus-visible:before,
  nav.bottom-nav.cb-first-app > a:first-child:active:before,
  nav.bottom-nav.cb-first-app > button:first-child:active:before{
    left:0!important;
  }

  nav.bottom-nav.cb-first-app > a:last-child.active:before,
  nav.bottom-nav.cb-first-app > button:last-child.active:before,
  nav.bottom-nav.cb-first-app > a:last-child:hover:before,
  nav.bottom-nav.cb-first-app > button:last-child:hover:before,
  nav.bottom-nav.cb-first-app > a:last-child:focus-visible:before,
  nav.bottom-nav.cb-first-app > button:last-child:focus-visible:before,
  nav.bottom-nav.cb-first-app > a:last-child:active:before,
  nav.bottom-nav.cb-first-app > button:last-child:active:before{
    right:0!important;
  }
}


/* Mobile bottom nav — static app bar, premium desktop-style selector.
   The BAR never animates. Only the rounded selector moves. */
@media(max-width:768px){
  nav.bottom-nav.cb-first-app{
    /* Override the old nav-in entrance completely. */
    animation:none!important;
    opacity:1!important;
    transform:translateX(-50%)!important;

    isolation:isolate!important;
    --cb-mobile-selector-x:0px;
    --cb-mobile-selector-w:0px;
    -webkit-tap-highlight-color:transparent!important;
  }

  /* One shared rounded selector using the same premium depth language
     as the desktop sidebar active/hover treatment. */
  nav.bottom-nav.cb-first-app.cb-soft-nav-ready:before{
    content:""!important;
    display:block!important;
    position:absolute!important;
    z-index:0!important;
    top:4px!important;
    bottom:3px!important;
    left:0!important;
    width:var(--cb-mobile-selector-w)!important;
    height:auto!important;
    border:1px solid rgba(245,182,255,.84)!important;
    border-radius:20px!important;
    background:
      radial-gradient(
        55px 40px at 18% 12%,
        rgba(255,255,255,.17) 0%,
        rgba(255,255,255,.065) 35%,
        transparent 68%
      ),
      linear-gradient(
        135deg,
        rgba(211,105,255,.58),
        rgba(99,78,235,.40)
      )!important;
    box-shadow:
      0 8px 20px rgba(8,12,38,.18),
      0 5px 16px rgba(45,31,122,.18),
      inset 0 1px 0 rgba(255,255,255,.10)!important;
    opacity:1!important;
    pointer-events:none!important;
    transform:translate3d(var(--cb-mobile-selector-x),0,0)!important;
    transition:
      transform .50s cubic-bezier(.16,1,.3,1),
      width .50s cubic-bezier(.16,1,.3,1)!important;
    will-change:transform,width;
  }

  nav.bottom-nav.cb-first-app > a,
  nav.bottom-nav.cb-first-app > button{
    position:relative!important;
    z-index:1!important;
    isolation:isolate!important;
    -webkit-tap-highlight-color:transparent!important;
    outline:none;
    transition:
      transform .20s cubic-bezier(.22,1,.36,1),
      color .18s ease,
      filter .18s ease!important;
  }

  /* Shared selector replaces the old per-item active background. */
  nav.bottom-nav.cb-first-app.cb-soft-nav-ready > a.active:before,
  nav.bottom-nav.cb-first-app.cb-soft-nav-ready > button.active:before{
    display:none!important;
  }

  /* Do not let an item-level rectangular shadow sit behind the pill. */
  nav.bottom-nav.cb-first-app.cb-soft-nav-ready > a.active,
  nav.bottom-nav.cb-first-app.cb-soft-nav-ready > button.active{
    box-shadow:none!important;
    color:#fff!important;
    font-weight:700!important;
  }

  nav.bottom-nav.cb-first-app.cb-soft-nav-ready > a.active span,
  nav.bottom-nav.cb-first-app.cb-soft-nav-ready > button.active span{
    transform:translateY(-1px) scale(1.055)!important;
    filter:
      drop-shadow(0 4px 8px rgba(0,0,0,.18))
      drop-shadow(0 0 7px rgba(139,133,255,.22))!important;
  }

  /* Phone press feedback: no square box, only the exact rounded item footprint. */
  nav.bottom-nav.cb-first-app > a:focus:not(:focus-visible),
  nav.bottom-nav.cb-first-app > button:focus:not(:focus-visible){
    outline:none!important;
  }

  nav.bottom-nav.cb-first-app > a:active,
  nav.bottom-nav.cb-first-app > button:active{
    transform:translate3d(0,1px,0) scale(.975)!important;
  }

  nav.bottom-nav.cb-first-app > a:active span,
  nav.bottom-nav.cb-first-app > button:active span{
    transform:scale(.96)!important;
  }

  nav.bottom-nav.cb-first-app.cb-soft-selector-instant:before{
    transition:none!important;
  }

  /* No content/page transition. The selector is the ONLY moving navigation element. */
  main > .cb-page-live,
  main.cb-soft-page-leaving > .cb-page-live,
  main > .cb-page-live.cb-soft-page-enter{
    opacity:1!important;
    transform:none!important;
    transition:none!important;
    animation:none!important;
  }
}

/* Hover-capable narrow layouts get the same rounded premium hover surface. */
@media(max-width:768px) and (hover:hover) and (pointer:fine){
  nav.bottom-nav.cb-first-app.cb-soft-nav-ready > a:not(.active):hover:before,
  nav.bottom-nav.cb-first-app.cb-soft-nav-ready > button:not(.active):hover:before,
  nav.bottom-nav.cb-first-app.cb-soft-nav-ready > a:not(.active):focus-visible:before,
  nav.bottom-nav.cb-first-app.cb-soft-nav-ready > button:not(.active):focus-visible:before{
    content:""!important;
    display:block!important;
    position:absolute!important;
    inset:-6px 4px -5px!important;
    z-index:-1!important;
    border:1px solid rgba(245,182,255,.78)!important;
    border-radius:20px!important;
    background:
      radial-gradient(
        45px 34px at 18% 10%,
        rgba(255,255,255,.14),
        transparent 68%
      ),
      linear-gradient(
        135deg,
        rgba(209,105,255,.48),
        rgba(99,78,235,.33)
      )!important;
    box-shadow:
      0 8px 20px rgba(8,12,38,.16),
      inset 0 1px 0 rgba(255,255,255,.09)!important;
    pointer-events:none!important;
  }

  nav.bottom-nav.cb-first-app.cb-soft-nav-ready > a:not(.active):hover,
  nav.bottom-nav.cb-first-app.cb-soft-nav-ready > button:not(.active):hover,
  nav.bottom-nav.cb-first-app.cb-soft-nav-ready > a:not(.active):focus-visible,
  nav.bottom-nav.cb-first-app.cb-soft-nav-ready > button:not(.active):focus-visible{
    color:#fff!important;
    transform:translateY(-1px)!important;
  }

  nav.bottom-nav.cb-first-app.cb-soft-nav-ready > a:not(.active):hover span,
  nav.bottom-nav.cb-first-app.cb-soft-nav-ready > button:not(.active):hover span,
  nav.bottom-nav.cb-first-app.cb-soft-nav-ready > a:not(.active):focus-visible span,
  nav.bottom-nav.cb-first-app.cb-soft-nav-ready > button:not(.active):focus-visible span{
    transform:translateY(-1px) scale(1.08)!important;
    filter:
      drop-shadow(0 5px 9px rgba(0,0,0,.18))
      drop-shadow(0 0 7px rgba(139,133,255,.22))!important;
  }
}

@media(max-width:768px) and (prefers-reduced-motion:reduce){
  nav.bottom-nav.cb-first-app.cb-soft-nav-ready:before,
  nav.bottom-nav.cb-first-app > a,
  nav.bottom-nav.cb-first-app > button,
  nav.bottom-nav.cb-first-app > a span,
  nav.bottom-nav.cb-first-app > button span{
    transition:none!important;
  }
}


/* Mobile selector reliability fix:
   current page is visibly selected; selector remains the only moving layer. */
@media(max-width:768px){
  nav.bottom-nav.cb-first-app{
    isolation:isolate!important;
  }

  nav.bottom-nav.cb-first-app.cb-soft-nav-ready:before{
    z-index:1!important;
    opacity:1!important;
  }

  nav.bottom-nav.cb-first-app.cb-soft-nav-ready > a,
  nav.bottom-nav.cb-first-app.cb-soft-nav-ready > button{
    z-index:2!important;
  }

  /* Current active item text/icon stays visibly selected while the shared pill sits behind it. */
  nav.bottom-nav.cb-first-app.cb-soft-nav-ready > a.active,
  nav.bottom-nav.cb-first-app.cb-soft-nav-ready > button.active{
    color:#fff!important;
    font-weight:700!important;
  }
}


/* Visible mobile selector element — reliable rounded active highlight. */
@media(max-width:768px){
  nav.bottom-nav.cb-first-app{
    isolation:isolate!important;
  }

  /* Disable shared nav pseudo selector; the real element below replaces it. */
  nav.bottom-nav.cb-first-app.cb-soft-nav-ready:before{
    content:none!important;
    display:none!important;
  }

  nav.bottom-nav.cb-first-app > .cb-mobile-selector{
    position:absolute!important;
    z-index:0!important;
    top:4px!important;
    bottom:3px!important;
    left:0!important;
    display:block!important;
    width:0;
    border:1px solid rgba(245,182,255,.86)!important;
    border-radius:20px!important;
    background:
      radial-gradient(
        55px 40px at 18% 12%,
        rgba(255,255,255,.18) 0%,
        rgba(255,255,255,.07) 35%,
        transparent 68%
      ),
      linear-gradient(
        135deg,
        rgba(216,107,255,.63),
        rgba(99,78,235,.45)
      )!important;
    box-shadow:
      0 8px 20px rgba(8,12,38,.20),
      0 5px 17px rgba(45,31,122,.20),
      inset 0 1px 0 rgba(255,255,255,.12),
      0 0 14px rgba(164,106,255,.13)!important;
    opacity:1!important;
    pointer-events:none!important;
    transform:translate3d(0,0,0);
    transition:
      transform .50s cubic-bezier(.16,1,.3,1),
      width .50s cubic-bezier(.16,1,.3,1)!important;
    will-change:transform,width;
  }

  nav.bottom-nav.cb-first-app > a,
  nav.bottom-nav.cb-first-app > button{
    z-index:1!important;
  }

  /* Keep only one selected surface: the real rounded selector element. */
  nav.bottom-nav.cb-first-app > a.active:before,
  nav.bottom-nav.cb-first-app > button.active:before{
    display:none!important;
  }

  nav.bottom-nav.cb-first-app > a.active,
  nav.bottom-nav.cb-first-app > button.active{
    color:#fff!important;
    font-weight:700!important;
    box-shadow:none!important;
  }

  nav.bottom-nav.cb-first-app.cb-soft-selector-instant > .cb-mobile-selector{
    transition:none!important;
  }
}

@media(max-width:768px) and (prefers-reduced-motion:reduce){
  nav.bottom-nav.cb-first-app > .cb-mobile-selector{
    transition:none!important;
  }
}


.topbar.cb-first-app .top-actions{z-index:10001!important}
.topbar.cb-first-app .profile-menu{z-index:10002!important}
main > .balance,main > .cb-page-live.balance{
  position:static!important;top:auto!important;z-index:auto!important;
  -webkit-backdrop-filter:none!important;backdrop-filter:none!important
}
@media(max-width:768px){
  nav.bottom-nav.cb-first-app{
    display:grid!important;grid-template-columns:repeat(4,minmax(0,1fr))!important;
    align-items:stretch!important;justify-content:stretch!important;gap:4px!important;
    width:min(410px,calc(100% - 20px))!important;height:auto!important;padding:5px!important;
    bottom:8px!important;border-radius:24px!important;box-sizing:border-box!important
  }
  nav.bottom-nav.cb-first-app>a,nav.bottom-nav.cb-first-app>button{
    min-width:0!important;width:auto!important;min-height:50px!important;height:50px!important;
    margin:0!important;padding:5px 2px 4px!important;border-radius:18px!important;
    box-sizing:border-box!important;justify-content:center!important;gap:3px!important
  }
  nav.bottom-nav.cb-first-app>a span,nav.bottom-nav.cb-first-app>button span{font-size:21px!important;line-height:1!important}
  nav.bottom-nav.cb-first-app>.cb-mobile-selector{top:5px!important;bottom:5px!important;height:auto!important;border-radius:18px!important}
  nav.bottom-nav.cb-first-app.cb-soft-nav-ready>a:not(.active):hover:before,
  nav.bottom-nav.cb-first-app.cb-soft-nav-ready>button:not(.active):hover:before,
  nav.bottom-nav.cb-first-app.cb-soft-nav-ready>a:not(.active):focus-visible:before,
  nav.bottom-nav.cb-first-app.cb-soft-nav-ready>button:not(.active):focus-visible:before{
    inset:0!important;border-radius:18px!important
  }
}


/* 129 — restore original non-sticky transparent topbar. */
.topbar.cb-first-app{
  position:relative!important;
  top:auto!important;
  bottom:auto!important;
  background:transparent!important;
  background-color:transparent!important;
  background-image:none!important;
  -webkit-backdrop-filter:none!important;
  backdrop-filter:none!important;
  box-shadow:none!important;
}

/* Keep only the profile menu above page content. */
.topbar.cb-first-app .top-actions{
  position:relative!important;
  z-index:10001!important;
}

.topbar.cb-first-app .profile-menu{
  z-index:10002!important;
}

/* 225 — exact mobile bottom-navigation glide.
   One real selector element owns the selected surface. The bar and item geometry
   never change between resting, selected and navigating states. */
@media(max-width:768px){
  nav.bottom-nav.cb-first-app{
    display:grid!important;
    grid-template-columns:repeat(4,minmax(0,1fr))!important;
    align-items:stretch!important;
    justify-content:stretch!important;
    gap:4px!important;
    width:min(410px,calc(100% - 20px))!important;
    min-height:60px!important;
    height:60px!important;
    padding:5px!important;
    bottom:8px!important;
    box-sizing:border-box!important;
    overflow:visible!important;
    border-radius:24px!important;
    transform:translateX(-50%)!important;
    animation:none!important;
    isolation:isolate!important;
  }

  nav.bottom-nav.cb-first-app:before,
  nav.bottom-nav.cb-first-app:after,
  nav.bottom-nav.cb-first-app > a:before,
  nav.bottom-nav.cb-first-app > a:after,
  nav.bottom-nav.cb-first-app > button:before,
  nav.bottom-nav.cb-first-app > button:after{
    content:none!important;
    display:none!important;
  }

  nav.bottom-nav.cb-first-app > .cb-mobile-selector{
    position:absolute!important;
    z-index:0!important;
    top:5px!important;
    bottom:auto!important;
    left:0!important;
    display:block!important;
    width:0;
    height:50px!important;
    margin:0!important;
    box-sizing:border-box!important;
    border:1px solid rgba(245,182,255,.86)!important;
    border-radius:18px!important;
    background:
      radial-gradient(55px 40px at 18% 12%,rgba(255,255,255,.18) 0%,rgba(255,255,255,.07) 35%,transparent 68%),
      linear-gradient(135deg,rgba(216,107,255,.63),rgba(99,78,235,.45))!important;
    box-shadow:
      0 8px 20px rgba(8,12,38,.20),
      0 5px 17px rgba(45,31,122,.20),
      inset 0 1px 0 rgba(255,255,255,.12),
      0 0 14px rgba(164,106,255,.13)!important;
    opacity:0!important;
    pointer-events:none!important;
    transform:translate3d(0,0,0);
    transition:
      transform .32s cubic-bezier(.22,1,.36,1),
      width .32s cubic-bezier(.22,1,.36,1),
      opacity .12s ease!important;
    will-change:transform,width;
  }

  nav.bottom-nav.cb-first-app.cb-soft-nav-ready > .cb-mobile-selector{
    opacity:1!important;
  }

  nav.bottom-nav.cb-first-app > a,
  nav.bottom-nav.cb-first-app > button{
    position:relative!important;
    z-index:1!important;
    display:flex!important;
    flex-direction:column!important;
    align-items:center!important;
    justify-content:center!important;
    gap:3px!important;
    min-width:0!important;
    width:auto!important;
    min-height:50px!important;
    height:50px!important;
    margin:0!important;
    padding:5px 2px 4px!important;
    box-sizing:border-box!important;
    border:0!important;
    border-radius:18px!important;
    background:transparent!important;
    box-shadow:none!important;
    color:#d1d0e5!important;
    font-size:10px!important;
    font-weight:400!important;
    line-height:1.1!important;
    transform:none!important;
    transition:color .18s ease,filter .18s ease!important;
    -webkit-tap-highlight-color:transparent!important;
  }

  nav.bottom-nav.cb-first-app > a span,
  nav.bottom-nav.cb-first-app > button span{
    display:block!important;
    margin:0!important;
    font-size:21px!important;
    line-height:1!important;
    transform:none!important;
    transition:transform .22s cubic-bezier(.22,1,.36,1),filter .18s ease!important;
  }

  nav.bottom-nav.cb-first-app > a.active,
  nav.bottom-nav.cb-first-app > button.active{
    color:#fff!important;
    font-weight:700!important;
    transform:none!important;
  }

  nav.bottom-nav.cb-first-app > a.active span,
  nav.bottom-nav.cb-first-app > button.active span{
    transform:scale(1.045)!important;
    filter:drop-shadow(0 4px 8px rgba(0,0,0,.18)) drop-shadow(0 0 7px rgba(139,133,255,.22))!important;
  }

  nav.bottom-nav.cb-first-app > a:active,
  nav.bottom-nav.cb-first-app > button:active{
    transform:none!important;
  }

  nav.bottom-nav.cb-first-app > a:focus:not(:focus-visible),
  nav.bottom-nav.cb-first-app > button:focus:not(:focus-visible){
    outline:none!important;
  }

  nav.bottom-nav.cb-first-app.cb-soft-selector-instant > .cb-mobile-selector{
    transition:none!important;
  }
}

@media(max-width:768px) and (prefers-reduced-motion:reduce){
  nav.bottom-nav.cb-first-app > .cb-mobile-selector,
  nav.bottom-nav.cb-first-app > a,
  nav.bottom-nav.cb-first-app > button,
  nav.bottom-nav.cb-first-app > a span,
  nav.bottom-nav.cb-first-app > button span{
    transition:none!important;
  }
}

/* 227 — aggressively fluid compact topbar controls.
   226 technically scaled, but too gently to be visible on real 320–390px phones.
   These curves make the control geometry shrink materially on compact screens
   while preserving the original proportions as the viewport approaches tablet width. */
@media(max-width:520px){
  .topbar.cb-first-app .top-actions{
    gap:clamp(5px,calc(5.45vw - 12.45px),14px)!important;
  }

  .topbar.cb-first-app .theme-toggle{
    width:clamp(18px,calc(7.27vw - 5.27px),28px)!important;
    height:clamp(18px,calc(7.27vw - 5.27px),28px)!important;
    display:grid!important;
    place-items:center!important;
    font-size:clamp(11px,calc(6.36vw - 9.36px),20px)!important;
    line-height:1!important;
  }

  .topbar.cb-first-app .gear{
    width:clamp(20px,calc(8.18vw - 6.18px),32px)!important;
    height:clamp(20px,calc(8.18vw - 6.18px),32px)!important;
    display:grid!important;
    place-items:center!important;
    font-size:clamp(14px,calc(8.18vw - 12.18px),26px)!important;
    line-height:1!important;
    filter:drop-shadow(0 0 clamp(1.5px,calc(2.73vw - 7.23px),5px) #9a7aff)!important;
  }

  .topbar.cb-first-app .avatar{
    width:clamp(19px,calc(8.18vw - 7.18px),32px)!important;
    height:clamp(19px,calc(8.18vw - 7.18px),32px)!important;
    font-size:clamp(6px,calc(2.73vw - 2.73px),10px)!important;
    border-width:clamp(.7px,calc(.27vw - .16px),1px)!important;
  }
}


/* 229 — restore bold mobile bottom-nav labels.
   Keep the 225 selector geometry/glide unchanged; only label weight changes. */
@media(max-width:768px){
  nav.bottom-nav.cb-first-app > a,
  nav.bottom-nav.cb-first-app > button{
    font-weight:700!important;
  }
}

/* 231 — app-like page entry + fixed task sheet.
   Cross-document View Transitions handle supported browsers; the direct-content
   animation is the fallback everywhere else. The topbar and mobile bottom nav
   stay visually anchored so route changes feel like one app surface. */
@view-transition{navigation:auto}
@keyframes cb-route-old{to{opacity:.72;transform:scale(.995)}}
@keyframes cb-route-new{from{opacity:.42;transform:translate3d(0,7px,0) scale(.997)}to{opacity:1;transform:none}}
@keyframes cb-page-content-enter{from{opacity:.34;transform:translate3d(0,8px,0);filter:blur(.45px)}to{opacity:1;transform:none;filter:none}}
::view-transition-old(root){animation:cb-route-old .12s ease both}
::view-transition-new(root){animation:cb-route-new .28s cubic-bezier(.16,1,.3,1) both}
body>main>*:not(header.topbar):not(nav.bottom-nav):not(dialog){
  animation:cb-page-content-enter .30s cubic-bezier(.16,1,.3,1) both;
  transform-origin:50% 18%;
}

@media(max-width:768px){
  /* Native <dialog> normally participates in UA centering. Force the task
     drawer to the visual viewport floor so browser toolbar/scroll changes
     cannot make it float above the bottom edge and then snap back. */
  #task-popup[open]{
    position:fixed!important;
    inset:auto 0 0 0!important;
    top:auto!important;
    right:0!important;
    bottom:0!important;
    left:0!important;
    width:min(576px,100%)!important;
    max-width:100%!important;
    margin:0 auto!important;
    border-bottom-left-radius:0!important;
    border-bottom-right-radius:0!important;
    overscroll-behavior:contain!important;
  }
  #task-popup[open] .dialog-content{
    max-height:min(80dvh,80svh)!important;
    padding-bottom:max(24px,env(safe-area-inset-bottom))!important;
  }
}

@media(prefers-reduced-motion:reduce){
  ::view-transition-old(root),::view-transition-new(root),
  body>main>*:not(header.topbar):not(nav.bottom-nav):not(dialog){animation:none!important}
}


/* 234 — preserve the bottom selector as one visual element across page loads. */
@media(max-width:768px){
  nav.bottom-nav.cb-first-app > .cb-mobile-selector{view-transition-name:cb-mobile-nav-selector;}
}
::view-transition-group(cb-mobile-nav-selector){animation-duration:.32s;animation-timing-function:cubic-bezier(.22,1,.36,1)}
::view-transition-old(cb-mobile-nav-selector),::view-transition-new(cb-mobile-nav-selector){animation:none;mix-blend-mode:normal;}
@media(prefers-reduced-motion:reduce){::view-transition-group(cb-mobile-nav-selector){animation-duration:1ms!important}}