::-webkit-scrollbar { 
            width: 6px; 
            height: 6px; 
        }
        ::-webkit-scrollbar-track { 
            background: transparent; 
        }
        ::-webkit-scrollbar-thumb { 
            background: rgba(148, 163, 184, 0.5); 
            border-radius: 10px; 
        }
        ::-webkit-scrollbar-thumb:hover { 
            background: rgba(100, 116, 139, 0.8); 
        }
        
        .dark ::-webkit-scrollbar-thumb { 
            background: rgba(71, 85, 105, 0.5); 
        }
        .dark ::-webkit-scrollbar-thumb:hover { 
            background: rgba(148, 163, 184, 0.8); 
        }

        /* 玻璃拟态背景 */
        .glass-card {
            background-color: hsla(0, 0%, 100%, .82);
            backdrop-filter: blur(12px);
            border: 1px solid rgba(255, 255, 255, 0.5);
            box-shadow: 0 0 6px 0 rgb(7 17 27 / 12%);
        }
        .dark .glass-card {
            background: #00000069;
            border: 1px solid #ededed21;
            box-shadow: none;
        }

        /* 背景配置 */
        .custom-bg {
            position: fixed;
            top: 0; left: 0; width: 100%; height: 100%;
            z-index: -1;
            background-color: #f8fafc;
            background: url(../img/bg.png) no-repeat center 66px;
        }

        .dark .custom-bg {
            background-color: #1A1B1D;
            
        }

        .dark .custom-bg::after {
            /* content: "";
            position: absolute;
            inset: -20px;
            background-image: url('img/bg.png');
            background-size: cover;
            background-position: center;
            background-repeat: no-repeat;
            opacity: 0.8;
            filter: blur(10px); */
            background-image: url(../img/bg.png) no-repeat center 66px;
           
        }
 


        /* 输入框聚焦动效 */
        .input-group:focus-within label {
            color: #0ea5e9;
            transform: translateY(-2px);
        }
        .input-group:focus-within i {
            color: #0ea5e9;
        }

        /* 按钮点击波纹 */
        .btn-ripple {
            position: relative;
            overflow: hidden;
        }
        .btn-ripple::after {
            content: "";
            position: absolute;
            top: 50%; left: 50%;
            width: 0; height: 0;
            background: rgba(255, 255, 255, 0.3);
            border-radius: 50%;
            transform: translate(-50%, -50%);
            transition: width 0.3s, height 0.3s;
        }
        .btn-ripple:active::after {
            width: 200px; height: 200px;
        }

        /* Custom Simple Checkbox Style */
        .custom-checkbox {
            appearance: none;
            height: 14px;
            width: 14px;
            border: 1px solid #d1d5db; /* Light gray border for light mode */
            border-radius: 2px;
            background-color: #fff;
            cursor: pointer;
            position: relative;
            flex-shrink: 0;
            transition: all 0.2s;
        }

        .dark .custom-checkbox {
            background-color: #333;
            border-color: #555;
        }

        /* Light Mode: Checked */
        .custom-checkbox:checked {
            background-color: #10b981; /* Emerald Green */
            border-color: #10b981;
        }
        
        /* Dark Mode: Checked */
        .dark .custom-checkbox:checked {
            background-color: #333;
            border-color: #888;
        }

        /* Light Mode: Checked Icon */
        .custom-checkbox:checked::after {
            content: '';
            position: absolute;
            left: 4px;
            top: 1px;
            width: 4px;
            height: 8px;
            border: solid #fff; /* White checkmark */
            border-width: 0 2px 2px 0;
            transform: rotate(45deg);
        }

        /* Dark Mode: Checked Icon */
        .dark .custom-checkbox:checked::after {
            border: solid #fff; /* White checkmark */
            border-width: 0 2px 2px 0;
            border-color: #fff;
        }
        
        /* Checkbox Label Text */
        .checkbox-label {
            color: #333;
            font-size: 13px;
            font-weight: 500;
        }
        
        .dark .checkbox-label {
            color: #ccc;
        }

        /* Special 3D Buttons */
        .special-btn {
            font-size: 13px;
            border-radius: 6px;
            background: #F6F8FA; /* Default Light Mode Background */
            color: #333; /* Default Light Mode Text Color */
            box-shadow: 0 1px 1px rgba(0, 0, 0, .08);
            border: 1px solid #d1d5db; /* Light gray border */
            padding: 2px;
            font-weight: 700;
            cursor: pointer;
            position: relative;
            overflow: hidden;
            transition: transform 0.1s;
        }

        /* Dark Mode Override */
        .dark .special-btn {
            background: linear-gradient(180deg, rgb(56, 56, 56) 0%, rgb(36, 36, 36) 66%, rgb(41, 41, 41) 100%);
            color: rgb(218, 218, 218);
            border: none;
            box-shadow: none;
        }
        
        .special-btn:active {
            transform: scale(0.96);
        }

        .special-btn span {
            border-radius: 4px;
            padding: 0.35em 1em;
            padding-right: 1em;
            width: 100%;
            display: flex;
            align-items: center;
            gap: 8px;
            color: inherit;
            transition: all 0.3s;
            /* Light Mode Span Background */
            background-color: transparent; 
        }

        /* Dark Mode Span Override */
        .dark .special-btn span {
            text-shadow: 0px 0px 20px #4b4b4b;
            background-color: rgb(29, 29, 29);
            background-image: radial-gradient(at 95% 89%, rgb(15, 15, 15) 0px, transparent 50%), radial-gradient(at 0% 100%, rgb(17, 17, 17) 0px, transparent 50%), radial-gradient(at 0% 0%, rgb(29, 29, 29) 0px, transparent 50%);
        }

        .special-btn:hover span {
            background-color: rgba(0,0,0,0.05); /* Light mode hover */
        }
        
        .dark .special-btn:hover span {
            background-color: rgb(26, 25, 25);
        }

        .button-overlay {
            position: absolute;
            inset: 0;
            pointer-events: none;
            /* Hidden in light mode */
            display: none; 
        }

        .dark .button-overlay {
            display: block;
            background: repeating-conic-gradient(rgb(48, 47, 47) 0.0000001%, rgb(51, 51, 51) 0.000104%) 60% 60%/600% 600%;
            filter: opacity(10%) contrast(105%);
            -webkit-filter: opacity(10%) contrast(105%);
        }

        /* Modal Style */
        .mood-modal {
            position: fixed;
            top: 0; left: 0;
            width: 100%; height: 100%;
            background: rgba(0, 0, 0, 0.5);
            backdrop-filter: blur(4px);
            z-index: 1000;
            display: none;
            justify-content: center;
            align-items: center;
            opacity: 0;
            transition: opacity 0.3s;
        }
        .mood-modal.active {
            display: flex;
            opacity: 1;
        }
        .mood-content {
            background-color: hsla(0, 0%, 100%, .97);
            backdrop-filter: blur(12px);
            border-radius: 12px;
            width: 90%;
            max-width: 600px;
            max-height: 80vh;
            overflow-y: auto;
            padding: 20px;
            box-shadow: 0 0 6px 0 rgb(7 17 27 / 12%);
            transform: scale(0.9);
            transition: transform 0.3s;
        }
        .dark .mood-content {
              background: #100f10c9;
    border: 1px solid #ffffff14;
            box-shadow: none;
        }
        .mood-modal.active .mood-content {
            transform: scale(1);
        }
        
        .mood-grid {
            display: grid;
            grid-template-columns: repeat(5, 1fr);
            gap: 10px;
        }
        .mood-item {
            display: flex;
            flex-direction: column;
            align-items: center;
            padding: 8px;
            border-radius: 8px;
            cursor: pointer;
            transition: all 0.2s;
            border: 1px solid transparent;
        }
        .mood-item:hover {
            background: #f1f5f9;
            border-color: #e2e8f0;
        }
        .dark .mood-item:hover {
            background: #334155;
            border-color: #475569;
        }
        .mood-item img {
            width: 40px;
            height: 40px;
            object-fit: contain;
            margin-bottom: 4px;
        }
        .mood-item span {
            font-size: 12px;
            color: #64748b;
            text-align: center;
            line-height: 1.2;
        }
        .dark .mood-item span {
            color: #94a3b8;
        }

        /* Theme Switch Style */
        .switch {
            position: relative;
            display: inline-block;
            width: 60px;
            height: 34px;
        }

        .switch #theme-input {
            opacity: 0;
            width: 0;
            height: 0;
        }

        .slider {
            position: absolute;
            cursor: pointer;
            top: 0; left: 0; right: 0; bottom: 0;
            background-color: #2196f3;
            transition: 0.4s;
            z-index: 0;
            overflow: hidden;
        }

        .sun-moon {
            position: absolute;
            content: "";
            height: 26px;
            width: 26px;
            left: 4px;
            bottom: 4px;
            background-color: yellow;
            transition: 0.4s;
        }

        #theme-input:checked + .slider {
            background-color: black;
            border: 1px solid #ededed3b;
        }

        #theme-input:checked + .slider .sun-moon {
            transform: translateX(26px);
            background-color: white;
        }

        .moon-dot {
            opacity: 0;
            transition: 0.4s;
            fill: gray;
        }

        #theme-input:checked + .slider .sun-moon .moon-dot {
            opacity: 1;
        }

        .slider.round {
            border-radius: 34px;
        }

        .slider.round .sun-moon {
            border-radius: 50%;
        }

        #moon-dot-1 { left: 10px; top: 3px; position: absolute; width: 6px; height: 6px; z-index: 4; }
        #moon-dot-2 { left: 2px; top: 10px; position: absolute; width: 10px; height: 10px; z-index: 4; }
        #moon-dot-3 { left: 16px; top: 18px; position: absolute; width: 3px; height: 3px; z-index: 4; }

        .light-ray { position: absolute; fill: white; opacity: 0.1; z-index: -1; }
        #light-ray-1 { left: -8px; top: -8px; width: 43px; height: 43px; }
        #light-ray-2 { left: -50%; top: -50%; width: 55px; height: 55px; }
        #light-ray-3 { left: -18px; top: -18px; width: 60px; height: 60px; }

        .cloud-light { position: absolute; fill: #eee; animation: cloud-move 6s infinite; }
        .cloud-dark { position: absolute; fill: #ccc; animation: cloud-move 6s infinite; animation-delay: 1s; }

        #cloud-1 { left: 30px; top: 15px; width: 40px; }
        #cloud-2 { left: 44px; top: 10px; width: 20px; }
        #cloud-3 { left: 18px; top: 24px; width: 30px; }
        #cloud-4 { left: 36px; top: 18px; width: 40px; }
        #cloud-5 { left: 48px; top: 14px; width: 20px; }
        #cloud-6 { left: 22px; top: 26px; width: 30px; }

        @keyframes cloud-move {
            0% { transform: translateX(0px); }
            40% { transform: translateX(4px); }
            80% { transform: translateX(-4px); }
            100% { transform: translateX(0px); }
        }

        .stars { transform: translateY(-32px); opacity: 0; transition: 0.4s; }
        .star { fill: white; position: absolute; transition: 0.4s; animation: star-twinkle 2s infinite; }
        
        #theme-input:checked + .slider .stars { transform: translateY(0); opacity: 1; }

        #star-1 { width: 20px; top: 2px; left: 3px; animation-delay: 0.3s; }
        #star-2 { width: 6px; top: 16px; left: 3px; }
        #star-3 { width: 12px; top: 20px; left: 10px; animation-delay: 0.6s; }
        #star-4 { width: 18px; top: 0px; left: 18px; animation-delay: 1.3s; }

        @keyframes star-twinkle {
            0% { transform: scale(1); }
            40% { transform: scale(1.2); }
            80% { transform: scale(0.8); }
            100% { transform: scale(1); }
        }
        /* 底部导航 */
        .bottom-nav {
            position: fixed;
            bottom: 0;
            left: 0;
            width: 100%;
            height: 60px;
            background: rgba(255, 255, 255, 0.95);
            backdrop-filter: blur(10px);
            border-top: 1px solid rgba(0,0,0,0.05);
            display: flex;
            justify-content: space-around;
            align-items: center;
            z-index: 999;
            box-shadow: 0 -4px 6px -1px rgba(0, 0, 0, 0.05);
        }
        .dark .bottom-nav {
            background: rgba(30, 41, 59, 0.95);
            border-top: 1px solid rgba(255,255,255,0.05);
        }
        .nav-item {
            display: flex;
            flex-direction: column;
            align-items: center;
            justify-content: center;
            color: #64748b;
            font-size: 10px;
            gap: 2px;
            width: 100%;
            height: 100%;
            text-decoration: none;
        }
        .nav-item.active {
            color: #0ea5e9;
        }
        .dark .nav-item {
            color: #94a3b8;
        }
        .dark .nav-item.active {
            color: #38bdf8;
        }
        .nav-item svg {
            width: 20px;
            height: 20px;
        }
        
        /* 头部背景图适配 */
        #navbar {
            box-shadow: 0px 5px 40px 0px rgba(17, 58, 93, .1);
        }
        .dark #navbar {
            box-shadow: none;
        }
        
 .navbar::after {
             content: '';
                position: absolute;
    top: -20px;
    right: 0;
    bottom: 0;
    left: 0;
    z-index: 9;
    pointer-events: none;
    background: url(../img/one_header.png) no-repeat top center / 1400px;

        }
        /* 调整内容区域以适应底部导航 */
        main {
            padding-bottom: 50px; /* 增加底部内边距 */
        }
        
        /* New Button Style */
        .button {
          --h-button: 48px;
          --w-button: 100%;
          --round: 0.75rem;
          cursor: pointer;
          position: relative;
          display: inline-flex;
          align-items: center;
          justify-content: center;
          overflow: hidden;
          transition: all 0.25s ease;
          background: radial-gradient(
              65.28% 65.28% at 50% 100%,
              rgba(223, 113, 255, 0.8) 0%,
              rgba(223, 113, 255, 0) 100%
            ),
            linear-gradient(0deg, #7a5af8, #7a5af8);
          border-radius: var(--round);
          border: none;
          outline: none;
          padding: 12px 18px;
          width: 100%;
        }
        .button::before,
        .button::after {
          content: "";
          position: absolute;
          inset: var(--space);
          transition: all 0.5s ease-in-out;
          border-radius: calc(var(--round) - var(--space));
          z-index: 0;
        }
        .button::before {
          --space: 1px;
          background: linear-gradient(
            177.95deg,
            rgba(255, 255, 255, 0.19) 0%,
            rgba(255, 255, 255, 0) 100%
          );
        }
        .button::after {
          --space: 2px;
          background: radial-gradient(
              65.28% 65.28% at 50% 100%,
              rgba(223, 113, 255, 0.8) 0%,
              rgba(223, 113, 255, 0) 100%
            ),
            linear-gradient(0deg, #7a5af8, #7a5af8);
        }
        .button:active {
          transform: scale(0.95);
        }

        .fold {
          z-index: 1;
          position: absolute;
          top: 0;
          right: 0;
          height: 1rem;
          width: 1rem;
          display: inline-block;
          transition: all 0.5s ease-in-out;
          background: radial-gradient(
            100% 75% at 55%,
            rgba(223, 113, 255, 0.8) 0%,
            rgba(223, 113, 255, 0) 100%
          );
          box-shadow: 0 0 3px black;
          border-bottom-left-radius: 0.5rem;
          border-top-right-radius: var(--round);
        }
        .fold::after {
          content: "";
          position: absolute;
          top: 0;
          right: 0;
          width: 150%;
          height: 150%;
          transform: rotate(45deg) translateX(0%) translateY(-18px);
          background-color: #e8e8e8;
          pointer-events: none;
        }
        .button:hover .fold {
          margin-top: -1rem;
          margin-right: -1rem;
        }

        .points_wrapper {
          overflow: hidden;
          width: 100%;
          height: 100%;
          pointer-events: none;
          position: absolute;
          z-index: 1;
        }

        .points_wrapper .point {
          bottom: -10px;
          position: absolute;
          animation: floating-points infinite ease-in-out;
          pointer-events: none;
          width: 2px;
          height: 2px;
          background-color: #fff;
          border-radius: 9999px;
        }
        @keyframes floating-points {
          0% {
            transform: translateY(0);
          }
          85% {
            opacity: 0;
          }
          100% {
            transform: translateY(-55px);
            opacity: 0;
          }
        }
        .points_wrapper .point:nth-child(1) {
          left: 10%;
          opacity: 1;
          animation-duration: 2.35s;
          animation-delay: 0.2s;
        }
        .points_wrapper .point:nth-child(2) {
          left: 30%;
          opacity: 0.7;
          animation-duration: 2.5s;
          animation-delay: 0.5s;
        }
        .points_wrapper .point:nth-child(3) {
          left: 25%;
          opacity: 0.8;
          animation-duration: 2.2s;
          animation-delay: 0.1s;
        }
        .points_wrapper .point:nth-child(4) {
          left: 44%;
          opacity: 0.6;
          animation-duration: 2.05s;
        }
        .points_wrapper .point:nth-child(5) {
          left: 50%;
          opacity: 1;
          animation-duration: 1.9s;
        }
        .points_wrapper .point:nth-child(6) {
          left: 75%;
          opacity: 0.5;
          animation-duration: 1.5s;
          animation-delay: 1.5s;
        }
        .points_wrapper .point:nth-child(7) {
          left: 88%;
          opacity: 0.9;
          animation-duration: 2.2s;
          animation-delay: 0.2s;
        }
        .points_wrapper .point:nth-child(8) {
          left: 58%;
          opacity: 0.8;
          animation-duration: 2.25s;
          animation-delay: 0.2s;
        }
        .points_wrapper .point:nth-child(9) {
          left: 98%;
          opacity: 0.6;
          animation-duration: 2.6s;
          animation-delay: 0.1s;
        }
        .points_wrapper .point:nth-child(10) {
          left: 65%;
          opacity: 1;
          animation-duration: 2.5s;
          animation-delay: 0.2s;
        }

        .inner {
          z-index: 2;
          gap: 6px;
          position: relative;
          width: 100%;
          color: white;
          display: inline-flex;
          align-items: center;
          justify-content: center;
          font-size: 16px;
          font-weight: 500;
          line-height: 1.5;
          transition: color 0.2s ease-in-out;
        }

        .inner svg.icon {
          width: 18px;
          height: 18px;
          transition: fill 0.1s linear;
        }

        .button:focus svg.icon {
          fill: white;
        }
        .button:hover svg.icon {
          fill: transparent;
          animation:
            dasharray 1s linear forwards,
            filled 0.1s linear forwards 0.95s;
        }
        @keyframes dasharray {
          from {
            stroke-dasharray: 0 0 0 0;
          }
          to {
            stroke-dasharray: 68 68 0 0;
          }
        }
        @keyframes filled {
          to {
            fill: white;
          }
        }

        .linbox {
              box-shadow: -1px -6px 40px 0px rgba(17, 58, 93, .1);
        }