html,
        body {
            

            height: 100vh;
            height: 100dvh;
            width: 100%;
            margin: 0;
            padding: 0;
            

            overflow: hidden;
        }

        
        body {
            font-size: 0.37333rem;
        }

        
        body {
            background: #f7f8fa;
            display: flex;
            flex-direction: column;
        }

        .main-wrapper {
            flex: 1;
            display: flex;
            flex-direction: column;
            min-height: 0;
        }

        .main-header {
            display: flex;
            width: 100%;
            
            align-items: center;
            position: sticky;
            top: 0;
            z-index: 1000;
            

            margin-bottom: -0.02667rem;
        }

        .main-content {
            flex: 1;
            min-height: 0;
            
            overflow-y: auto;
            overflow-x: hidden;
            
            scrollbar-width: none;
            
            -webkit-overflow-scrolling: touch;
            overscroll-behavior: contain;
            background: #f7f8fa;
            
            padding: 0 0 2.13333rem 0;
        }

        .select-type-layer .layui-layer-content {
            display: flex !important;
            flex-wrap: wrap;
            align-items: flex-start;
            
            gap: 0.32rem 0.26667rem;
            justify-content: center;
            
            overflow: auto;
            padding: 0.26667rem;
        }

        .type-btn {
            min-width: 2.13333rem;
            display: inline-block;
            height: 0.96rem;
            line-height: 0.96rem;
            padding: 0.08rem 0.32rem;
            text-align: center;
            font-size: 0.45333rem;
            cursor: pointer;
            border-radius: 0.26667rem;
            margin-bottom: 0.13333rem;
            transition: background 0.2s;
            color: #453909 !important;
            



        }

        .layui-layer-title {
            text-align: center;
            padding: 0;
        }

        .year-btn.active {
            color: #453909 !important;
            font-weight: bold;
            opacity: 1 !important;
        }

        .plus {
            display: inline-block;
            height: 0.8rem;
            font-size: 0.58667rem;
            margin: 0 0.10667rem;
            color: #888;
            vertical-align: middle;
            position: relative;
            top: -1.01333rem;
            left: -1px;
        }

        .layui-drawer {
            display: flex;
            flex-direction: column;
            overflow: hidden;
        }

        .layui-drawer .drawer-inner {
            flex: 1;
            overflow-y: auto;
        }

        #webcrumbs {
            background: #f5f6fa;
            overflow-y: scroll;
            padding-left: 0.13333rem;
        }

        #webcrumbs .layui-icon {
            font-size: 0.53333rem;
            color: #a5a4a4;
        }

        #webcrumbs .bg-gray-50 {
            background: #f5f6fa;
            padding: 0 0 1.06667rem 0;
        }

        #webcrumbs .text-xl {
            font-size: 0.53333rem;
        }

        #webcrumbs .font-bold {
            font-weight: bold;
        }

        #webcrumbs .mb-4 {
            margin-bottom: 0.42667rem;
        }

        #webcrumbs .mb-6 {
            margin-bottom: 0.64rem;
        }

        #webcrumbs .pr-12 {
            padding-right: 1.06667rem;
        }

        #webcrumbs .pl-12 {
            padding-left: 1.06667rem;
        }

        #webcrumbs .border-r {
            border-right: 1px solid #e5e7eb;
        }

        #webcrumbs .rounded-md {
            border-radius: 0.32rem;
        }

        #webcrumbs .bg-white {
            background: #fff;
        }

        #webcrumbs .p-4 {
            padding: 0.42667rem;
        }

        #webcrumbs .p-2 {
            padding: 0.128rem;
        }

        #webcrumbs .border-b {
            border-bottom: 1px solid #f0f0f0;
        }

        #webcrumbs .flex {
            display: flex;
        }

        #webcrumbs .items-center {
            align-items: center;
        }

        #webcrumbs .justify-between {
            justify-content: space-between;
        }

        #webcrumbs .text-blue-500 {
            color: #333;
            font-size: 0.64rem;
        }

        #webcrumbs .font-semibold {
            font-weight: 600;
        }

        #webcrumbs .text-sm {
            font-size: 0.40533rem;
        }

        #webcrumbs .text-gray-500 {
            color: #888;
        }

        #webcrumbs .bg-gray-200 {
            background: #f2f3f5;
        }

        #webcrumbs .rounded-md {
            border-radius: 0.21333rem;
        }

        #webcrumbs .mr-3 {
            margin-right: 0.32rem;
        }

        #webcrumbs .mt-6 {
            margin-top: 0.85333rem;
        }

        #webcrumbs .w-full {
            width: 100%;
        }

        #webcrumbs .py-3 {
            padding-top: 0.32rem;
            padding-bottom: 0.32rem;
        }

        #webcrumbs .border {
            border: 1px solid #e5e7eb;
        }

        #webcrumbs .hover\:bg-gray-50:hover {
            background: #f5f6fa;
        }

        #webcrumbs .rounded-full {
            border-radius: 26.64rem;
        }

        #webcrumbs button {
            font-size: 0.46933rem;
            letter-spacing: 1px;
            transition: background 0.2s;
        }

        #webcrumbs .material-symbols-outlined {
            font-size: 0.68267rem;
            vertical-align: middle;
        }

        .odds-item {
            padding: 0.08rem 0.4rem;
            border-radius: 0.4rem;
            margin-right: 0.26667rem;
        }

        .click-item {
            cursor: pointer;
            min-height: 0.8rem;
        }

        .loss,
        .win {
            display: inline-block;
            width: 1.01333rem;
            height: 0.74667rem;
            line-height: 0.74667rem;
            text-align: center;
            color: #fff;
            font-weight: bold;
            font-size: 0.4rem;
            transform: skew(-20deg);
            margin-right: -0.21333rem;
            
            position: relative;
            z-index: 1;
        }

        .loss {
            background: #ffeaea;
            color: #f82525;
            border-top-left-radius: 0.16rem;
            border-bottom-left-radius: 0.16rem;
        }

        .win {
            background: #eaf3ff;
            color: #028aff;
            border-top-right-radius: 0.16rem;
            border-bottom-right-radius: 0.16rem;
            margin-right: 0;
        }

        .layui-layer {
            left: 50% !important;
            top: 50% !important;
            transform: translate(-50%, -50%) !important;
        }