/* 基础样式 */
        * {
            margin: 0;
            padding: 0;
            box-sizing: border-box;
            font-family: 'PingFang SC', 'Helvetica Neue', Arial, sans-serif;
        }
        
        body {
            background-color: #f3f4f6;
            cursor: pointer;
            color: #333333;
        }
        
        .mobile-wrap {
            max-width: 450px;
            min-height: 100vh;
            margin: 0 auto;
            background-color: white;
            box-shadow: 0 0 10px rgba(0,0,0,0.1);
            overflow: hidden;
            position: relative;
        }
        
        main {
            padding-bottom: 5rem;
        }
        
        /* 最近更新以上部分使用背景图片和渐变过渡 */
        .above-recent-updates {
            background-image: url("../asserts_files/compressed.gif");
            background-size: cover;
            background-position: center;
            position: relative;
            padding-bottom: 0rem;
        }
        
        .above-recent-updates::before {
            content: "";
            position: absolute;
            top: 0;
            left: 0;
            right: 0;
            bottom: 0;
            background-color: rgba(255, 255, 255, 0.75);
            z-index: 0;
        }
        
        /* 添加渐变过渡效果 */
        .above-recent-updates::after {
            content: "";
            position: absolute;
            left: 0;
            right: 0;
            bottom: 0;
            height: 6rem;
            background: linear-gradient(to bottom, rgba(255,255,255,0) 0%, rgba(255,255,255,1) 100%);
            z-index: 1;
        }
        
        .above-recent-updates > * {
            position: relative;
            z-index: 2;
        }
        
        /* 颜色定义 */
        :root {
            --primary: #3399FF;
            --secondary: #FF6B35;
            --neutral: #F5F5F7;
            --dark: #333333;
            --light: #F9F9F9;
            --gray-100: #f3f4f6;
            --gray-200: #e5e7eb;
            --gray-500: #6b7280;
            --gray-600: #4b5563;
            --gray-700: #374151;
            --green-500: #10b981;
            --yellow-400: #facc15;
            --red-500: #ef4444;
        }
        
        /* 工具类 */
        .text-center {
            text-align: center;
        }
        
        .text-right {
            text-align: right;
        }
        
        .font-bold {
            font-weight: bold;
        }
        
        .flex {
            display: flex;
        }
        
        .flex-col {
            flex-direction: column;
        }
        
        .items-center {
            align-items: center;
        }
        
        .justify-center {
            justify-content: center;
        }
        
        .justify-between {
            justify-content: space-between;
        }
        
        .items-start {
            align-items: flex-start;
        }
        
        .flex-1 {
            flex: 1;
        }
        
        .grid {
            display: grid;
        }
        
        .grid-cols-3 {
            grid-template-columns: repeat(3, 1fr);
        }
        
        .gap-2 {
            gap: 0.5rem;
        }
        
        .space-y-2 > * + * {
            margin-top: 0.5rem;
        }
        
        .space-y-3 > * + * {
            margin-top: 0.75rem;
        }
        
        .space-y-4 > * + * {
            margin-top: 1rem;
        }
        
        .space-y-6 > * + * {
            margin-top: 1.5rem;
        }
        
        .mb-2 {
            margin-bottom: 0.5rem;
        }
        
        .mb-3 {
            margin-bottom: 0.75rem;
        }
        
        .mb-4 {
            margin-bottom: 1rem;
        }
        
        .mb-6 {
            margin-bottom: 1.5rem;
        }
        
        .mt-1 {
            margin-top: 0.25rem;
        }
        
        .mt-2 {
            margin-top: 0.5rem;
        }
        
        .mt-3 {
            margin-top: 0.75rem;
        }
        
        .mt-4 {
            margin-top: 1rem;
        }
        
        .mt-6 {
            margin-top: 1.5rem;
        }
        
        .mr-1 {
            margin-right: 0.25rem;
        }
        
        .mr-2 {
            margin-right: 0.5rem;
        }
        
        .mr-3 {
            margin-right: 0.75rem;
        }
        
        .mr-4 {
            margin-right: 1rem;
        }
        
        .ml-1 {
            margin-left: 0.25rem;
        }
        
        .ml-2 {
            margin-left: 0.5rem;
        }
        
        .ml-3 {
            margin-left: 0.75rem;
        }
        
        .p-2 {
            padding: 0.5rem;
        }
        
        .p-4 {
            padding: 1rem;
        }
        
        .p-5 {
            padding: 1.25rem;
        }
        
        .p-6 {
            padding: 1.5rem;
        }
        
        .py-2 {
            padding-top: 0.5rem;
            padding-bottom: 0.5rem;
        }
        
        .py-3 {
            padding-top: 0.75rem;
            padding-bottom: 0.75rem;
        }
        
        .py-4 {
            padding-top: 1rem;
            padding-bottom: 1rem;
        }
        
        .py-6 {
            padding-top: 1.5rem;
            padding-bottom: 1.5rem;
        }
        
        .px-2 {
            padding-left: 0.5rem;
            padding-right: 0.5rem;
        }
        
        .px-4 {
            padding-left: 1rem;
            padding-right: 1rem;
        }
        
        .px-6 {
            padding-left: 1.5rem;
            padding-right: 1.5rem;
        }
        
        .pt-8 {
            padding-top: 2rem;
        }
        
        .w-8 {
            width: 2rem;
        }
        
        .w-12 {
            width: 3rem;
        }
        
        .w-20 {
            width: 5rem;
        }
        
        .w-full {
            width: 100%;
        }
        
        .h-2 {
            height: 0.5rem;
        }
        
        .h-16 {
            height: 4rem;
        }
        
        .h-full {
            height: 100%;
        }
        
        .h-auto {
            height: auto;
        }
        
        .max-w-md {
            max-width: 28rem;
        }
        
        .max-h-90vh {
            max-height: 90vh;
        }
        
        .rounded-lg {
            border-radius: 1rem;
        }
        
        .rounded-xl {
            border-radius: 0.75rem;
        }
        
        .rounded-2xl {
            border-radius: 1rem;
        }
        
        .rounded-full {
            border-radius: 9999px;
        }
        
        .border {
            border-width: 1px;
        }
        
        .border-2 {
            border-width: 2px;
        }
        
        .border-t {
            border-top-width: 1px;
        }
        
        .border-b {
            border-bottom-width: 1px;
        }
        
        .border-y {
            border-top-width: 1px;
            border-bottom-width: 1px;
        }
        
        .border-gray-100 {
            border-color: #f3f4f6;
        }
        
        .border-gray-200 {
            border-color: #e5e7eb;
        }
        
        .border-white {
            border-color: white;
        }
        
        .bg-white {
            background-color: white;
        }
        
        .bg-primary {
            background-color: var(--primary);
        }
        
        .bg-neutral {
            background-color: #f7f7f7;
        }
        
        .bg-gray-100 {
            background-color: var(--gray-100);
        }
        
        .bg-gray-200 {
            background-color: var(--gray-200);
        }
        
        .bg-yellow-400 {
            background-color: var(--yellow-400);
        }
        
        .bg-green-500 {
            background-color: var(--green-500);
        }
        
        .bg-black-50 {
            background-color: rgba(0,0,0,0.5);
        }
        
        .text-white {
            color: white;
        }
        
        .text-dark {
            color: #6b7280;
        }
        
        .text-primary {
            color: var(--primary);
        }
        
        .text-gray-500 {
            color: var(--gray-500);
        }
        
        .text-gray-600 {
            color: var(--gray-600);
        }
        
        .text-gray-700 {
            color: var(--gray-700);
        }
        
        .text-yellow-400 {
            color: #fc6333;
        }
        
        .text-green-500 {
            color: var(--green-500);
        }
        
        .text-red-500 {
            color: var(--red-500);
        }
        
        .text-xs {
            font-size: 0.75rem;
        }
        
        .text-sm {
            font-size: 0.875rem;
        }
        
        .text-base {
            font-size: 1rem;
        }
        
        .text-lg {
            font-size: 1.125rem;
        }
        
        .text-xl {
            font-size: 1.25rem;
        }
        
        .text-4xl {
            font-size: 2.5rem;
        }
        
        .text-5xl {
            font-size: 3rem;
        }
        
        .shadow-md {
            box-shadow: 0 4px 6px rgba(0,0,0,0.1);
        }
        
        .shadow-lg {
            box-shadow: 0 10px 15px rgba(0,0,0,0.1);
        }
        
        .card-shadow {
            box-shadow: 0 4px 11px rgba(0,0,0,0.08);
        }
        
        .overflow-hidden {
            overflow: hidden;
        }
        
        .overflow-y-auto {
            overflow-y: auto;
        }
        
        .inline-block {
            display: inline-block;
        }
        
        .block {
            display: block;
        }
        
        .hidden {
            display: none !important;
        }
        
        .relative {
            position: relative;
        }
        
        .absolute {
            position: absolute;
        }
        
        .fixed {
            position: fixed;
        }
        
        .inset-0 {
            top: 0;
            right: 0;
            bottom: 0;
            left: 0;
        }
        
        .top-0 {
            top: 0;
        }
        
        .left-0 {
            left: 0;
        }
        
        .right-0 {
            right: 0;
        }
        
        .bottom-0 {
            bottom: 0;
        }
        
        .z-10 {
            z-index: 10;
        }
        
        .z-30 {
            z-index: 30;
        }
        
        .z-50 {
            z-index: 50;
        }
        
        .-z-10 {
            z-index: -10;
        }
        
        .object-cover {
            object-fit: cover;
        }
        
        .opacity-20 {
            opacity: 0.2;
        }
        
        .opacity-70 {
            opacity: 0.7;
        }
        
        .opacity-90 {
            opacity: 0.9;
        }
        
        .bg-blur {
            backdrop-filter: blur(5px);
            -webkit-backdrop-filter: blur(3px);
        }
        
        .cursor-not-allowed {
            cursor: not-allowed;
        }
        
        /* 动画 */
        @keyframes spin {
            from { transform: rotate(0deg); }
            to { transform: rotate(360deg); }
        }
        
        .animate-spin-slow {
            animation: spin 2s linear infinite;
        }
        
        .transition-all {
            transition: all 0.3s ease;
        }
        
        .transition-colors {
            transition: color 0.3s ease;
            text-decoration: none;
            /*color: #03a9f4;*/
        }
        
        .hover\:bg-primary\/90:hover {
            background-color: rgba(51, 153, 255, 0.9);
        }
        
        .hover\:text-primary:hover {
            color: var(--primary);
        }
        
        .hover\:text-primary\/80:hover {
            color: rgba(51, 153, 255, 0.8);
        }
        
        .hover\:shadow-lg:hover {
            box-shadow: 0 10px 15px rgba(0,0,0,0.1);
        }
        
        .hover\:-translate-y-0.5:hover {
            transform: translateY(-0.125rem);
        }
        
        /* 自定义组件 */
        .appItem {
            padding: 1.5rem;
            padding-top: 3.5rem;
        }
        
        .appInfo {
            padding: 1rem 1.5rem;
            background-color: white;
        }
        
        .comment {
            padding: 1.5rem;
            background-color: white;
            border-top: 1px solid var(--gray-100);
        }
        
        .footer {
            padding: 1rem 1.5rem 4rem 1.5rem;
            background-color: #efefef;
            border-top: 1px solid var(--gray-100);
            /*text-align: center;*/
        }
        
        .publicTitle {
            font-size: 1.125rem;
            font-weight: bold;
            color: var(--dark);
            margin-bottom: 0.75rem;
            display: block;
        }
        
        .down {
            background-color: var(--primary);
            color: white;
            padding: 0.5rem 1.5rem;
            border-radius: 9999px;
            text-align: center;
            display: inline-block;
            transition: all 0.3s ease;
            box-shadow: 0 4px 6px rgba(0,0,0,0.1);
            text-decoration: none;
        }
        
        .down:hover {
            background-color: rgba(51, 153, 255, 0.9);
            box-shadow: 0 10px 15px rgba(0,0,0,0.1);
            transform: translateY(-0.125rem);
        }
        
        .comments-container {
            height: 380px;
            overflow: hidden;
            position: relative;
            width: 100%;
        }
        
        #commentsList {
            transition: transform 0.5s ease-in-out;
            width: 100%;
        }
        
        /* 星级评分样式 */
        .star-rating {
            color: var(--yellow-400);
        }
        
        /* 进度条样式 */
        .progress-container {
            height: 0.4rem;
    background-color: var(--gray-200);
    border-radius: 9999px;
    overflow: hidden;
    flex: 1;
    margin: 0 0.9rem 0 2.5rem;
        }
        
        .progress-bar {
            height: 100%;
            background-color: #858585;
            border-radius: 9999px;
        }
        
        /* 弹窗样式 */
        .modal {
            position: fixed;
            top: 0;
            left: 0;
            right: 0;
            bottom: 0;
            background-color: rgba(0,0,0,0.5);
            z-index: 50;
            display: none;
            align-items: center;
            justify-content: center;
            padding: 1rem;
        }
        
        .modal-content {
            background-color: white;
            border-radius: 0.75rem;
            max-width: 28rem;
            width: 100%;
            max-height: 70vh;
            overflow-y: auto;
        }
        
        .modal-header {
            position: sticky;
    top: 0;
    z-index: 10;
    /* padding: 16px 20px; */
    /* border-bottom: 1px solid #eee; */
    background-color: #fff;
    /* display: flex
; */
    /* justify-content: space-between; */
    /* align-items: center; */
    display: flex
;
    justify-content: space-between;
    align-items: center;
    padding: 0.35rem 1.25rem 0.25rem 1.25rem;
    border-bottom: 1px solid var(--gray-100);
        }
        
        .modal-body {
            padding: 1.25rem;
        }
        
        .close-btn {
            background: none;
            border: none;
            font-size: 2.5rem;
            color: var(--gray-500);
            cursor: pointer;
            padding: 0 8px;
            line-height: 1;
            color: #666;
        }
        
        
        .close-btn:hover {
            color: var(--gray-700);
        }
        
        /* 底部提示 */
        .bottom-tip {
            position: fixed;
            bottom: 0;
            height: 4rem;
            border-top: 1px solid var(--gray-200);
            background-color: white;
            width: 100%;
            display: flex;
            align-items: center;
            justify-content: center;
            z-index: 30;
            display: none;
        }
        
        .copy-btn {
            height: 2.5rem;
            background-color: var(--primary);
            border-radius: 9999px;
            margin: 0.625rem;
            text-align: center;
            padding: 0.25rem 1.25rem;
            color: white;
            border: none;
            cursor: pointer;
            font-size: 0.875rem;
        }
        .float-window { position: fixed;top: 0;left: 0;right: 0;bottom: 0;background-color:
            rgba(0, 0, 0, 0.9);display: none;z-index: 9999999;}.float-window img {
            position: absolute; top: 0.5%; left: 0%; max-width: 100%; max-height: 100%;
            }
        
        /* 二维码容器 - 优化间距和显示控制 */
        #output {
            display: flex;
            justify-content: center;
            margin: 0.5rem 0; /* 减少间距 */
        }
        
        .qrcode {
            width: 128px;
            height: 128px;
        }
        .t {
            color: #858585;
        }
        
        /* 按钮行样式 - 使下载按钮和安装说明在同一排 */
        .button-row {
            display: flex;
            justify-content: space-between;
            align-items: center;
        }
        
        /* 电脑端适配样式 */
        @media (min-width: 768px) {
            .mobile-wrap {
                max-width: 550px;
            }
            
            #pc {
                display: block !important;
            }
            
            .above-recent-updates {
                padding-bottom: 3rem;
            }
        }
        
        /* 移动端样式 */
        @media (max-width: 767px) {
            #pc {
                display: none !important;
            }
        }