@charset "utf-8";
:root {
    --primary: #3178f6;
    --bg-primary: #f5f7f9;
    --border-color-primary:#ddd;
}


/* CSS RESET */
body,div,p{margin:0;padding:0;}
ul,ol,li{margin:0;padding:0;list-style:none;}
h1,h2,h3,h4,h5,h6{margin:0;padding:0;}
h1{font-size:32px;font-weight:700;line-height:48px;}
h2{font-size:24px;font-weight:600;line-height:36px;}
h3{font-size:20px;font-weight:500;line-height:30px;}
h4{font-size:18px;font-weight:500;line-height:24px;}
h5{font-size:16px;font-weight:500;line-height:24px;}
h6{font-size:14px;font-weight:500;line-height:20px;}
img{border:0;vertical-align:middle;}
p{font-size:16px;font-weight:400;line-height:24px;}
a{color:#00AAFF;text-decoration:underline;outline:none;}
a:hover{color:#0088CC;text-decoration:underline;}
body{color:#333;font-size:16px;font-weight:400;font-family:"PingFang SC";background-color:#f5f7f9;background-repeat:no-repeat;background-size:100% 960px;}
/* container */
.container{max-width:960px;width:100%;background:#FFF;box-shadow:0 0 8px #999;margin:0 auto;}
.divider{border-bottom: 1px solid #ddd;margin-bottom: 16px;}
.red{color:#FF0000;background-color:#fff;}
/* HEADER */
.header{border-top: 4px solid #00AAFF;}
.header-logo-search{display:flex;justify-content:space-between;align-items:center;padding:8px 16px;background-color:#FFF;}
.header-logo{flex:1;}
.header-logo a{display:block;padding:16px 0;margin:1px;}
.header-logo img{height:auto;max-width:360px;}
.header-search{flex:2;display:flex;justify-content:flex-end;align-items:center;padding:8px 16px;}
.header-search-box{display:flex;width:100%;}
.header-search-input{flex:1;width:260px;max-width:260px;padding:8px;border:1px solid #CCC;border-radius:4px 0 0 4px;margin-right:-1px;}
.header-search-button{padding:8px 16px;border:1px solid #00AAFF;border-left:none;border-radius:0 4px 4px 0;background-color:#00AAFF;color:white;font-weight:bold;cursor:pointer;}
.header-search-button:hover{background-color:#0088CC;}
.header-home-svip{display:flex;justify-content:space-between;align-items:center;border-top:1px solid #ddd;border-bottom:1px solid #ddd;background-color:#f5f5f5;padding: 8px 8px;}
.header-home-index{display:inline-flex;align-items:center;text-decoration:none;padding:8px 16px;font-size:14px;font-weight:bold;text-align:center;background:linear-gradient(0deg,#f2f1ff,#f2f1ff);border:1px solid #00AAFF;border-radius:4px;color:#00AAFF;}
.header-home-index:hover{color:#FFF;background:#0088CC;text-decoration:none;}
.header-svip-login{display:inline-flex;align-items:center;text-decoration:none;padding:8px 16px;font-size:14px;font-weight:bold;text-align:center;background:linear-gradient(0deg,#f2f1ff,#f2f1ff);border:1px solid #00AAFF;border-radius:4px;color:#00AAFF;}
.header-svip-login:hover{color:#FFF;background:#0088CC;text-decoration:none;}
@media screen and (max-width:600px){
    .header-logo-search{flex-direction:column;}
    .header-logo{flex:1;width:100%;text-align:center;}
    .header-logo img{max-width:100%;height:48px;}
    .header-search{flex:1;width:100%;justify-content:center;text-align:center;}
}
/* MAIN */
.main{padding:32px}

.welcome{display:flex;flex-direction: column;gap: 8px;margin-bottom:16px;}
.welcome h1{font-size:32px;font-weight:500;line-height:36px;margin: 0;}
.welcome h1 span {display: inline-block;vertical-align: middle;line-height: 36px;}
.welcome p{font-size:16px;line-height:32px;color:#999;margin: 0;}

.navigation{padding:16px 0;}
.navigation h2{line-height:34px;font-size:24px;color:#333;margin-bottom:16px;border-bottom:1px solid #ddd;padding-bottom:8px;}
.navigation ul{display:flex;flex-wrap:wrap;margin:0;padding:0;}
.navigation ul li{box-sizing:border-box;padding-right:16px;margin-bottom:8px;padding-bottom:8px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;}
.navigation ul li::before{content:"#";white-space:pre;display:inline-block;color:#999;margin-right:4px;}
.navigation ul li a{font-size:18px;}
.navigation.cols-2 ul li{width:50%;}
.navigation.cols-3 ul li{width:33.33%;}
.navigation.cols-4 ul li{width:25%;}
@media screen and (max-width:600px){.navigation ul li{width:100% !important;}}

/* FOOTER */
.footer{color:#999;font-size:14px;}
.footer ul{display:flex;flex-wrap:wrap;justify-content:center;margin-bottom:16px;border-bottom:solid 1px #ddd;}
.footer ul li{line-height:16px;margin-bottom: 16px;}
.footer ul li:not(:last-child)::after{content:"·";margin:0 4px;}
.footer ul li a{padding:8px 8px;color:#999;}
.footer ul li a:hover{color:#999;}
.footer p{text-align:center;font-size: 14px;line-height: 28px;}
.footer p a{color:#999;}
.footer p a:hover{color:#999;}
/* Categories & Articles -------------------------------------------------------- */
/* Channel Items */
.channel-items{display:grid;grid-template-columns:repeat(auto-fill,minmax(300px,1fr));gap:24px;}
.channel-items .channel-item{background-color:white;padding:24px;border-radius:8px;border: 1px solid #ddd;}
.channel-items .channel-item .channel-title{margin-bottom:8px;}
.channel-items .channel-item .channel-description{font-size:14px;color:#999;}
.channel-items .channel-item .channel-meta{margin-top:8px;}

/* Article Items */
.article-items{margin-bottom:32px;}
.article-items .article-item{border-bottom: 1px solid #eee;padding: 16px 0px;}
.article-items .article-item:first-child{padding-top: 0;}
.article-items .article-item .article-title{margin-bottom:8px;}
.article-items .article-item .article-description{font-size:14px;color:#999;}
.article-items .article-item .article-meta {margin-top:8px;color:#999;}

/* PAGINATION */
.pagination{text-align:center;font-size:12px;margin-top: 24px;}
.pagination span{display:inline-block;background-color:#fff;color:#ccc;margin-bottom:8px;padding:8px 14px;border:1px solid #ddd;border-radius:2px;}
.pagination a{display:inline-block;color:#333;background-color:#fff;text-decoration:none;cursor:pointer;margin-bottom:8px;padding:8px 14px;border:1px solid #ddd;border-radius:2px;}
.pagination a:hover{background-color:#00AAFF;color:#FFF;}
.pagination a.pagination-current{background-color:#00AAFF;color:#FFF;}

/* ARTICLE -------------------------------------------------------- */
.article{margin-bottom:24px;}
.article h1{margin-bottom:16px;font-size:28px;color:#333;}
.article .article-category{margin-bottom:16px;font-size:14px;color:#666;}
.article .article-category span{display:inline-block;font-size:16px;line-height:20px;color:#00AAFF;border:1px solid #00AAFF;border-radius:2px;padding:2px 4px;margin-right:8px;margin-bottom:8px;}
.article .article-category span a{color:#00AAFF;text-decoration:none;}
.article .article-category span a:hover{text-decoration:underline;}
.article .article-meta{margin-bottom:16px;padding-bottom:16px;border-bottom:1px solid #e3e3e3;font-size:14px;color:#999;}
.article .article-meta span{margin-right:8px;}

/* ARTICLE-CONTENT */
.article .article-content{line-height:36px;font-size:18px;color:#4e5461;-webkit-font-smoothing:antialiased;word-wrap:break-word;}
.article .article-content img{display:block;margin:32px 0;max-width:100%;border-width:0;border-radius:20px;}
.article .article-content h2{margin-top:16px;margin-bottom:16px;}
.article .article-content h3{margin-top:16px;margin-bottom:16px;}
.article .article-content h2:first-child{margin-top:0;}
.article .article-content h3:first-child{margin-top:0;}
.article .article-content p{margin-top:0;margin-bottom:16px;}

/* ARTICLE-DOWNLOAD-SECTION */
.article .download-section{padding:24px;border-radius:8px;background-color:#f5f5f5;margin:24px 0;}
.article .download-section .btn{display:inline-block;padding:8px 32px;border-radius:6px;font-size:16px;font-weight:600;cursor:pointer;text-decoration:none;transition:all 0.3s ease;border:none;}
.article .download-section .btn-primary{background:linear-gradient(135deg,#00AAFF 0%,#0088CC 100%);color:#FFF;}
.article .download-section .btn-primary:hover{background:linear-gradient(135deg,#0088CC 0%,#006699 100%);transform:translateY(-2px);box-shadow:0 4px 12px rgba(0,136,204,0.3);}
.article .download-section .btn-primary:disabled{background:#ccc;cursor:not-allowed;transform:none;box-shadow:none;}
.article .download-section .btn-secondary{background:#FFF;color:#00AAFF;border:1px solid #00AAFF;}
.article .download-section .btn-secondary:hover{background:#00AAFF;color:#FFF;}
.article .download-section .download-content{text-align:center;padding:16px;}
.article .download-section .download-hint{margin-bottom:12px;color:#666;}
.article .download-section .login-required{text-align:center;padding:16px;}
.article .download-section .login-required p{margin-bottom:12px;color:#666;}
.article .download-section #download-result{margin-top:0px;}
.article .download-section #download-result p{margin-bottom:12px;}
.article .download-section #download-result .success{color:#4CAF50;padding:8px;background:#e8f5e9;border-radius:4px;}
.article .download-section #download-result .error{color:#f44336;padding:8px;background:#ffebee;border-radius:4px;}

/* ARTICLE-RELATED-READINGS */
.article .related-readings{margin-bottom:16px;}
.article .related-readings h3{color:#333;margin-top:32px;margin-bottom:16px;}
.article .related-readings .related-list{margin-top:16px;}
.article .related-readings .related-list .related-item{margin-left:0;padding:8px 0px 8px 16px;position:relative;}
.article .related-readings .related-list .related-item:before{content:"\002022";position:absolute;left:0;}
.article .related-readings .related-list .related-item a{font-size:16px;}
.article .related-readings .related-list .related-item a:hover{text-decoration:underline;}

/* USER CENTER -------------------------------------------------------- */
.user-center{max-width:100%;margin:0 auto;}
.user-center h1{font-size:24px;font-weight:600;margin-bottom:20px;color:#333;}
.user-center h2{font-size:18px;font-weight:600;margin-bottom:16px;color:#333;}

/* Navigation Menu */
.user-center .nav-menu{display:flex;flex-wrap:wrap;gap:8px;margin-bottom:24px;padding-bottom:16px;border-bottom:2px solid #e3e3e3;}
.user-center .nav-item{padding:10px 20px;text-decoration:none;color:#666;font-size:14px;font-weight:500;border-radius:4px;transition:all 0.3s ease;background-color:#f5f5f5;border:1px solid transparent;}
.user-center .nav-item:hover{color:#00AAFF;background-color:#fff;border-color:#00AAFF;text-decoration:none;}
.user-center .nav-item.active{background-color:#00AAFF;color:#fff;border-color:#00AAFF;}

/* User Info */
.user-center .user-info{background:#f9f9f9;padding:24px;border-radius:8px;margin-bottom:24px;border:1px solid #e3e3e3;}
.user-center .user-info .info-item{margin-bottom:16px;padding-bottom:16px;border-bottom:1px solid #e3e3e3;}
.user-center .user-info .info-item:last-child{margin-bottom:0;padding-bottom:0;border-bottom:none;}
.user-center .user-info .info-item .info-label{display:inline-block;min-width:100px;font-weight:600;color:#333;margin-right:8px;}

/* Download List */
.download-list{background:#f9f9f9;padding:24px;border-radius:8px;border:1px solid #e3e3e3;}
.download-item{background:white;padding:16px;margin-bottom:12px;border-radius:6px;box-shadow:0 1px 3px rgba(0,0,0,0.1);border:1px solid #e3e3e3;transition:box-shadow 0.3s ease;}
.download-item:hover{box-shadow:0 2px 8px rgba(0,0,0,0.15);}
.download-item:last-child{margin-bottom:0;}
.item-header{display:flex;justify-content:space-between;align-items:center;margin-bottom:12px;flex-wrap:wrap;gap:8px;}
.item-title{font-weight:600;color:#333;font-size:16px;}
.item-time{color:#999;font-size:14px;}
.item-info{display:flex;justify-content:space-between;align-items:center;font-size:14px;color:#666;flex-wrap:wrap;gap:8px;}
.status{padding:4px 12px;border-radius:12px;font-size:12px;font-weight:500;}
.status.valid{background:#e8f5e9;color:#4CAF50;border:1px solid #4CAF50;}
.status.expired{background:#ffebee;color:#f44336;border:1px solid #f44336;}

/* Integral List */
.user-center .integral-list{background:#f9f9f9;padding:24px;border-radius:8px;border:1px solid #e3e3e3;}
.user-center .integral-list .integral-item{background:white;padding:16px;margin-bottom:12px;border-radius:6px;box-shadow:0 1px 3px rgba(0,0,0,0.1);border:1px solid #e3e3e3;transition:box-shadow 0.3s ease;}
.user-center .integral-list .integral-item:hover{box-shadow:0 2px 8px rgba(0,0,0,0.15);}
.user-center .integral-list .integral-item:last-child{margin-bottom:0;}
.user-center .integral-list .integral-item .item-amount{font-size:18px;font-weight:700;}
.user-center .integral-list .integral-item .item-amount.positive{color:#4CAF50;}
.user-center .integral-list .integral-item .item-amount.negative{color:#f44336;}
.user-center .integral-list .integral-item .item-desc{font-size:14px;color:#666;margin-top:8px;}

/* Recharge Form */
.user-center .recharge-form{background:#f9f9f9;padding:24px;border-radius:8px;border:1px solid #e3e3e3;}
.user-center .recharge-form .alert{padding:16px;margin-bottom:16px;border:1px solid transparent;border-radius:3px;background-color:#d9edf7;border-color:#c6e4f3;color:#3a87ad;}
.user-center .recharge-form .form-group{margin-bottom:24px;}
.user-center .recharge-form .form-label{display:block;margin-bottom:12px;font-weight:600;color:#333;font-size:16px;}
.user-center .recharge-form .amount-options{display:grid;grid-template-columns:repeat(auto-fit,minmax(120px,1fr));gap:12px;margin-bottom:20px;}
.user-center .recharge-form .amount-options .amount-option{padding:16px 20px;border:2px solid #e3e3e3;border-radius:6px;cursor:pointer;transition:all 0.3s ease;text-align:center;font-weight:500;background:white;color:#333;}
.user-center .recharge-form .amount-options .amount-option:hover{border-color:#00AAFF;color:#00AAFF;transform:translateY(-2px);box-shadow:0 4px 12px rgba(0,170,255,0.2);}
.user-center .recharge-form .amount-options .amount-option.active{background:#00AAFF;color:white;border-color:#00AAFF;transform:translateY(-2px);box-shadow:0 4px 12px rgba(0,170,255,0.3);}
.user-center .recharge-form .amount-options .amount-option .amount{font-size:24px;font-weight:700;color:#00AAFF;margin-bottom:4px;}
.user-center .recharge-form .amount-options .amount-option .integral{font-size:14px;color:#666;}
.user-center .recharge-form .amount-options .amount-option.active .amount{color:white;}
.user-center .recharge-form .amount-options .amount-option.active .integral{color:rgba(255,255,255,0.9);}
.user-center .recharge-form .payment-options{display:flex;gap:12px;}
.user-center .recharge-form .payment-options .payment-option{display:flex;align-items:center;justify-content:center;gap:8px;padding:12px 24px;border:2px solid #e3e3e3;border-radius:8px;cursor:pointer;transition:all 0.3s ease;background:white;min-width:120px;}
.user-center .recharge-form .payment-options .payment-option:hover{border-color:#07C160;}
.user-center .recharge-form .payment-options .payment-option.active{border-color:#07C160;background:#f0f9f4;}
.user-center .recharge-form .payment-options .payment-option .payment-icon{width:24px;height:24px;}
.user-center .recharge-form .payment-options .payment-option .payment-name{font-size:16px;font-weight:500;color:#333;}
.user-center .recharge-form .submit-btn{background:linear-gradient(135deg,#00AAFF 0%,#0088CC 100%);color:white;padding:14px 32px;border:none;border-radius:6px;font-size:16px;font-weight:600;cursor:pointer;transition:all 0.3s ease;display:block;text-align:center;margin:0 auto;min-width:200px;}
.user-center .recharge-form .submit-btn:hover{background:linear-gradient(135deg,#0088CC 0%,#006699 100%);transform:translateY(-2px);box-shadow:0 4px 12px rgba(0,136,204,0.3);}
.user-center .recharge-form .submit-btn:active{transform:translateY(0);}
.user-center .recharge-form .message{margin-bottom:20px;padding:12px 16px;border-radius:6px;font-size:14px;}
.user-center .recharge-form .message.success{background:#e8f5e9;color:#4CAF50;border:1px solid #4CAF50;}
.user-center .recharge-form .message.error{background:#ffebee;color:#f44336;border:1px solid #f44336;}

/* SEARCH -------------------------------------------------------- */
/* Search Page */
.search-page{padding:24px 0;}
.search-page h1{font-size:28px;font-weight:600;margin-bottom:24px;color:#333;}

/* Search Form */
.search-form{display:flex;gap:12px;margin-bottom:24px;}
.search-form .search-input{flex:1;padding:14px 20px;border:2px solid #e3e3e3;border-radius:8px;font-size:16px;transition:all 0.3s ease;}
.search-form .search-input:focus{outline:none;border-color:#00AAFF;box-shadow:0 0 0 3px rgba(0,170,255,0.1);}
.search-form .search-button{padding:14px 32px;background:linear-gradient(135deg,#00AAFF 0%,#0088CC 100%);color:white;border:none;border-radius:8px;font-size:16px;font-weight:600;cursor:pointer;transition:all 0.3s ease;}
.search-form .search-button:hover{background:linear-gradient(135deg,#0088CC 0%,#006699 100%);transform:translateY(-2px);box-shadow:0 4px 12px rgba(0,136,204,0.3);}
.search-form .search-button:active{transform:translateY(0);}

/* Search Info */
.search-info{margin-bottom:24px;padding:16px;background:#f9f9f9;border-radius:8px;border:1px solid #e3e3e3;}
.search-info p{margin:0;font-size:16px;color:#333;}
.search-info .highlight{color:#00AAFF;font-weight:600;}

/* Search Results */
.search-results{margin-bottom:24px;}
.search-result-item{padding:24px;margin-bottom:16px;background:white;border-radius:8px;box-shadow:0 2px 8px rgba(0,0,0,0.1);border:1px solid #e3e3e3;transition:all 0.3s ease;}
.search-result-item:hover{box-shadow:0 4px 16px rgba(0,0,0,0.15);transform:translateY(-2px);}
.search-result-item h2{margin:0 0 12px 0;font-size:20px;font-weight:600;}
.search-result-item h2 a{color:#333;text-decoration:none;transition:color 0.3s ease;}
.search-result-item h2 a:hover{color:#00AAFF;}
.search-result-item .description{margin:0 0 16px 0;font-size:14px;color:#666;line-height:1.5;}
.search-result-item .meta{display:flex;gap:24px;font-size:14px;color:#999;}
.search-result-item .meta .views, .search-result-item .meta .price{display:flex;align-items:center;}

/* No Results */
.no-results{padding:48px 24px;text-align:center;background:#f9f9f9;border-radius:8px;border:1px solid #e3e3e3;}
.no-results p{margin:8px 0;font-size:16px;color:#666;}

/* Pagination */
.search-page .pagination{display:flex;justify-content:center;align-items:center;gap:8px;margin-top:32px;}
.search-page .pagination a, .search-page .pagination span{padding:10px 16px;border-radius:6px;font-size:14px;font-weight:500;transition:all 0.3s ease;}
.search-page .pagination a{color:#666;background:white;border:1px solid #e3e3e3;text-decoration:none;}
.search-page .pagination a:hover{color:#00AAFF;border-color:#00AAFF;background:#f0f8ff;}
.search-page .pagination span.current{color:#00AAFF;background:#e6f2ff;border:1px solid #00AAFF;}

/* Responsive Design for Search Page */
@media screen and (max-width:768px){
    .search-page{padding:16px 0;}
    .search-page h1{font-size:24px;margin-bottom:20px;}
    .search-form{flex-direction:column;}
    .search-form .search-input{padding:12px 16px;font-size:14px;}
    .search-form .search-button{padding:12px 24px;font-size:14px;}
    .search-result-item{padding:16px;margin-bottom:12px;}
    .search-result-item h2{font-size:18px;margin-bottom:8px;}
    .search-result-item .description{font-size:13px;margin-bottom:12px;}
    .search-result-item .meta{gap:16px;font-size:13px;}
    .search-page .pagination a, .search-page .pagination span{padding:8px 12px;font-size:13px;}
    .no-results{padding:32px 16px;}
    .no-results p{font-size:14px;}
}

@media screen and (max-width:480px){
    .search-page h1{font-size:20px;margin-bottom:16px;}
    .search-form .search-input{padding:10px 14px;font-size:13px;}
    .search-form .search-button{padding:10px 20px;font-size:13px;}
    .search-result-item h2{font-size:16px;}
    .search-result-item .description{font-size:12px;}
    .search-result-item .meta{flex-direction:column;gap:8px;font-size:12px;}
    .search-page .pagination{flex-wrap:wrap;gap:6px;}
    .search-page .pagination a, .search-page .pagination span{padding:6px 10px;font-size:12px;}
}

/* Modal */
.modal{position:fixed;z-index:1000;left:0;top:0;width:100%;height:100%;background-color:rgba(0,0,0,0.5);display:flex;align-items:center;justify-content:center;}
.modal .modal-content{background-color:#fff;border-radius:8px;box-shadow:0 4px 20px rgba(0,0,0,0.3);max-width:500px;width:90%;max-height:90%;overflow:auto;}
.modal .modal-content .modal-header{padding:20px 24px;border-bottom:1px solid #e3e3e3;display:flex;justify-content:space-between;align-items:center;}
.modal .modal-content .modal-header h3{margin:0;font-size:20px;font-weight:600;color:#333;}
.modal .modal-content .modal-header .close{color:#999;font-size:28px;font-weight:300;cursor:pointer;line-height:1;transition:color 0.3s ease;}
.modal .modal-content .modal-header .close:hover{color:#333;}
.modal .modal-content .modal-body{padding:24px;text-align:center;}
.modal .modal-content .modal-body #qrcode-container{margin-bottom:20px;}
.modal .modal-content .modal-body #qrcode-container canvas{border:2px solid #e3e3e3;border-radius:8px;padding:10px;background:white;}
.modal .modal-content .modal-body .payment-info{background:#f9f9f9;padding:16px;border-radius:6px;margin-bottom:16px;}
.modal .modal-content .modal-body .payment-info p{margin:8px 0;font-size:16px;color:#333;}
.modal .modal-content .modal-body .payment-info p:first-child{margin-top:0;}
.modal .modal-content .modal-body .payment-info p:last-child{margin-bottom:0;}
.modal .modal-content .modal-body .payment-tip{color:#666;font-size:14px;margin-top:16px;}

/* Responsive Design for User Center */
@media screen and (max-width:768px){
    .user-center{padding:0;}
    .user-center h1{font-size:20px;margin-bottom:16px;}
    .user-center h2{font-size:16px;margin-bottom:12px;}
    .user-center .nav-menu{gap:6px;margin-bottom:20px;}
    .user-center .nav-menu .nav-item{padding:8px 14px;font-size:13px;flex:1;text-align:center;min-width:calc(50% - 3px);}
    .user-center .user-info,
    .user-center .download-list,
    .user-center .integral-list,
    .user-center .recharge-form{padding:16px;margin-bottom:16px;}
    .user-center .user-info .info-label{display:block;min-width:auto;margin-bottom:4px;font-size:14px;}
    .user-center .user-info .info-item{margin-bottom:12px;padding-bottom:12px;}
    .user-center .download-list .item-header{flex-direction:column;align-items:flex-start;}
    .user-center .integral-list .item-info{flex-direction:column;align-items:flex-start;}
    .user-center .integral-list .balance{font-size:28px;}
    .user-center .recharge-form .amount-options{grid-template-columns:repeat(2,1fr);gap:10px;}
    .user-center .recharge-form .amount-options .amount-option{padding:12px 16px;font-size:14px;}
    .user-center .recharge-form .amount-options .amount-option .amount{font-size:20px;}
    .user-center .recharge-form .submit-btn{width:100%;padding:12px 24px;}
    .modal .modal-content{width:95%;margin:10px;}
    .modal .modal-content .modal-header{padding:16px 20px;}
    .modal .modal-content .modal-header h3{font-size:18px;}
    .modal .modal-content .modal-body{padding:20px;}
    .modal .modal-content .modal-body .payment-info p{font-size:14px;}
}
@media screen and (max-width:480px){
    .user-center .nav-menu .nav-item{min-width:calc(50% - 3px);padding:8px 12px;font-size:12px;}
    .user-center .recharge-form .amount-options{grid-template-columns:1fr;}
    .user-center .integral-list .balance{font-size:24px;}
    .user-center .integral-list .integral-item .item-amount{font-size:16px;}
}