*{margin:0; padding:0; box-sizing:border-box; }
body{font-family:'Segoe UI', Tahoma, Geneva, Verdana, sans-serif; line-height:1.6; color:#333; background:linear-gradient(135deg, #667eea 0%, #764ba2 100%); }
#hd_login_msg{position:absolute; top:0; left:0; font-size:0; line-height:0; overflow:hidden}
.msg_sound_only, .sound_only{display:inline-block !important; position:absolute; top:0; left:0; width:0; height:0; margin:0 !important; padding:0 !important; font-size:0; line-height:0; border:0 !important; overflow:hidden !important}
#top_btn{position:fixed; bottom:20px; right:20px; width:50px; height:50px; line-height:46px; border:2px solid #333; color:#333; text-align:center; font-size:15px; z-index:90; background:rgba(255,255,255,0.5)}
#top_btn:hover{border-color:#3059c7; background:#3059c7; color:#fff}
.container{width:100%; max-width:1200px; margin:0 auto; padding:0 20px; }
.btn{display:inline-block; padding:12px 24px; border:none; border-radius:8px; cursor:pointer; font-weight:600; transition:all 0.3s ease; text-decoration:none; }
.navbar{background:#fff; box-shadow:0 2px 10px rgba(0, 0, 0, 0.1); position:sticky; top:0; z-index:1000; }
.navbar .container{display:flex; justify-content:space-between; align-items:center; padding:20px 30px 20px 20px; }
.logo {font-size: 24px; font-weight: 700; color: #6e8efb; height: 52px; margin: -20px 0px;}
.logo img{ height: 52px; padding: 6px;}
.nav-link{text-decoration:none; color:#333; font-weight:500; transition:color 0.3s ease; line-height:32px; }
.nav-link span{color:#426dff; }
.header-buttons{display:flex; gap:15px; list-style-type:none; }
.header-btn{background-color:#6c86e1; color:white; border:none; padding:3px 20px 5px; line-height:24px; border-radius:4px; cursor:pointer; }
.header-btn:hover{background-color:#5c74cb; }
.header-btn a{color:#fff; text-decoration:none; font-size:12px; }
.footer{background:#343a40; color:#fff; padding:50px 0 20px; }
.social-links{display:flex; justify-content:center; gap:20px; margin:20px 0; }
.social-links a{color:#fff; font-size:1.2rem; transition:color 0.3s ease; }
.social-links a:hover{color:#6e8efb; }
.footer-info{color:#adb5bd; font-size:0.9rem; }
.footer-info a{color:#6e8efb; text-decoration:none; }
.footer-info a:hover{text-decoration:underline; }
.popup-overlay{display:none; position:fixed; top:0; left:0; width:100%; height:100%; background-color:rgba(0, 0, 0, 0.8); z-index:1000; }
.popup-content{position:relative; margin:5% auto; background-color:white; border-radius:8px; overflow:hidden; animation:fadeInScale 0.3s ease-out; max-width:600px; min-height:500px; margin-top:5vh; box-shadow:0 5px 15px rgb(0 0 0 / 30%); }
.popup-header{padding:7px 20px; background:#f8f9fa; font-size:18px; font-weight:bold; color:#333; border-bottom:1px solid #eee; display:flex; justify-content:space-between; align-items:center; }
.close-btn{cursor:pointer; font-weight:bold; color:gray; transition:all 0.2s; }
.close-btn:hover{color:black; }
iframe.point-frame{width:100%; height:calc(100vh - 186px); border:none; }
.hero-section{background: linear-gradient(135deg, #667eea 0%, #764ba2 100%); color:white; padding:60px 0 30px; }

.hero-zy { text-align: center;}
.hero-title {font-weight: 700; margin-bottom: 11px; font-size: 51px; color: #fff; display: flex; align-items: center; justify-content: center; gap: 15px;}

.hero-title span{color:#6bbce3;}

.hero-subtitle {font-size: 1.2rem; margin: 0 auto 35px; line-height: 38px;}

.hero-subtitle span {color: #bbff4c;}

.platform-grid{margin:40px auto; display:grid; grid-template-columns:repeat(2, 1fr); gap:30px; background: rgba(255, 255, 255, 0.1);padding: 30px;border-radius: 20px;}
.platform-card{background: #e2e7f3; border-radius:12px; padding:30px; text-align:center; box-shadow:0 5px 15px rgb(0 0 0 / 10%); transition:transform 0.3s ease, box-shadow 0.3s ease; }
.platform-icon{font-size:3rem; margin-bottom:20px; }
.platform-icon .fa-android{color:#219b13; }
.platform-icon .fa-apple{color:#000; }
.platform-title{font-size:1.5rem; margin-bottom:10px; color:#333; }
.platform-desc{color:#666; margin-bottom:20px; }
.input-group{display:flex; flex-direction:column; gap:15px; }
.url-input{padding:12px 15px; border:1px solid #ddd; border-radius:8px; font-size:1rem; transition:border-color 0.3s ease; }
.url-input:focus{outline:none; border-color:#6e8efb; }
.generate-btn{ background: #648ae1; color:white; padding:12px; }
.generate-btn:hover{background:#5578c9; }
.steps-section{padding:46px 0px 46px; background:#fff; }
.steps-container{display:flex; justify-content:space-between; align-items:center; flex-wrap:nowrap; gap:30px; margin-top:31px; padding:0px 0px; }
.step-card{background:#ffffff; border-radius:12px; padding:20px 27px 20px; text-align:center; width:100%; position:relative; }


.step-number {
    width: 50px;
    height: 50px;
    background: #648ae1;
    color: white;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 1.5rem;
    font-weight: bold;
    margin: -20px auto 15px;
        border-bottom-right-radius: 50%;
    border-bottom-left-radius: 50%;
}




.container_sms {text-align: center;}
.btn-primary_sms{font-size:16px; background-color:#6c86e1; color:white; border:none; padding:8px 32px 7px; line-height:24px; border-radius:4px; cursor:pointer;  margin-bottom: 10px;}
.btn-primary_sms:hover{box-shadow:0 6px 20px rgba(37, 117, 252, 0.4); }
.modal-overlay_sms{display:none; position:fixed; top:0; left:0; width:100%; height:100%; background-color:rgba(0, 0, 0, 0.7); z-index:1000; justify-content:center; align-items:center; animation:fadeIn 0.3s ease-out forwards; }
.modal-content_sms{background:white; border-radius:8px; width:90%; max-width:700px; max-height:90vh; overflow:hidden; box-shadow:0 20px 50px rgba(0, 0, 0, 0.5); display:flex; flex-direction:column; animation:slideIn 0.3s ease-out forwards; }
.modal-header_sms{padding:7px 20px; background:#f8f9fa; font-size:18px; font-weight:bold; color:#333; border-bottom:1px solid #eee; display:flex; justify-content:space-between; align-items:center; }
.modal-title_sms{font-size:18px; font-weight:600; }
.modal-close-btn_sms{background:transparent; border:none; color:black; font-size:32px; cursor:pointer; width:40px; height:40px; display:flex; align-items:center; justify-content:center; border-radius:50%; transition:all 0.3s ease; }
.modal-close-btn_sms:hover{background:rgba(255, 255, 255, 0.2); transform:rotate(90deg); }
.modal-body_sms{padding:25px; overflow-y:auto; flex-grow:1; }
.image-item_sms{margin-bottom:46px; text-align:center; border-bottom:1px solid #ddd; padding-bottom:16px; }
.image-item_sms img{max-width:100%; border-radius:10px; box-shadow:0 8px 20px rgba(0, 0, 0, 0.15); }
.image-description_sms{margin-top:15px; font-size:16px; line-height:1.6; color:#444; padding:0 10px; }










.step-title{font-size:1.2rem; margin-bottom:10px; }
.step-desc{color:#666; font-size:0.9rem; }

.features-section{padding:46px 0; background:#e2e7f3; }
.section-title{text-align:center; font-size:36px; color: #333; }
.section-titlep{text-align:center; color: #000000; margin-bottom:26px; }

.features-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 30px;
}
.feature-card{background:#fff; padding:30px; border-radius:12px; text-align:center; }
.feature-icon{font-size:2.5rem; color:#648ae1; margin-bottom:20px; }
.feature-title{font-size:1.3rem; margin-bottom:15px; color: #648ae1; }
.feature-desc{color:#666; }
.faq-section{padding:80px 0; background:#fff; }
.faq-section2{background-color:#ffffff; border-radius:10px; box-shadow:0 4px 12px rgba(0,0,0,0.05); padding:2rem; margin-bottom:2rem; }
.faq-item2{border-bottom:1px solid #e5e7eb; padding:1.5rem 0; }
.faq-question2{font-size:1.1rem; font-weight:600; color:#374151; }
.faq-answer2{margin-top:1rem; color:#6b7280; line-height:1.6; }



.feature-icon2{font-size:2.5rem; color:#648ae1; }






.description{font-size:18px; color:#7f8c8d; margin-bottom:30px; }
.points-info{display:flex; justify-content:space-between; margin-bottom:30px; font-size:20px; color:#34495e; }
.sign-btn{background:linear-gradient(to right, #ff7e5f, #feb47b); border:none; color:white; font-size:20px; font-weight:bold; padding:15px 40px; border-radius:50px; cursor:pointer; transition:all 0.3s ease-in-out; box-shadow:0 4px 12px rgba(255, 126, 95, 0.4); margin-bottom:40px; }
.sign-btn:hover{transform:scale(1.05); box-shadow:0 6px 16px rgba(255, 126, 95, 0.6); }
.week-calendar .weeks-row, .week-calendar .dates-row{display:grid; grid-template-columns:repeat(7, 1fr); gap:10px; margin-bottom:20px; }
.week-day, .date-item{display:flex; justify-content:center; align-items:center; height:50px; font-size:18px; font-weight:600; }
.dialogkx{margin:0; width:100%; height:100%; display:flex; justify-content:center; align-items:center; background-color:rgba(0,0,0,0.5); position:fixed; left:50%; bottom:0; top:0; transform:translate(-50%, 0%); opacity:1; z-index:99999; }
.dialogkx2{width:452px; background:white; border-radius:8px; padding:20px; text-align:center; box-shadow:0 4px 12px rgb(0 0 0 / 10%); }
.iconkx{color:#3498db; font-size:48px; }
.titlekx{font-size:20px; color:#333; margin-bottom:12px; font-weight:bold; border-bottom:0px solid #1c3250; padding-bottom:0px; }
.messagekp{color:#3498db; font-size:18px; font-weight:bold; line-height:1.5; padding-bottom:12px; }
.messagekx{color:#3498db; font-size:28px; font-weight:bold; line-height:1.5; }
.messagekm{color:#666; font-size:14px; margin-bottom:24px; line-height:1.5; }
.buttonkx{background:#3498db; color:white; border:none; padding:10px 24px; border-radius:4px; cursor:pointer; font-size:16px; transition:background 0.2s; text-decoration:none; }
.container2{width:100%; max-width:1200px; margin:0 auto; padding:0 20px; }
.container3{background:rgba(255, 255, 255, 0.95); backdrop-filter:blur(10px); border-radius:12px;  overflow:hidden; padding:40px; }
.header2{text-align:center; margin-bottom:40px; }
.header2 h1{font-size:36px; color:#333; display:flex; align-items:center; justify-content:center; gap:15px; }
.header2 h1 i{color:#667eea; }
.main2{display:flex; flex-direction:column; gap:40px; }
.calendar-container{display:flex; justify-content:space-between; gap:20px; }
.day-card{flex:1; background:white; border-radius:16px; padding:25px 20px; text-align:center; transition:all 0.3s ease; position:relative; border:2px solid transparent; }
.day-card:hover{ box-shadow:0 12px 25px rgba(0, 0, 0, 0.15); }
.day-card.active{border-color:#667eea; box-shadow:0 0 30px rgba(102, 126, 234, 0.3); }
.day-label{font-size:18px; font-weight:600; color:#555; margin-bottom:15px; }
.date{font-size:16px; color:#888; margin-bottom:20px; font-weight:500; }
.status-indicator{font-size:32px; margin-bottom:15px; }
.status-indicator .not-signed{color:#ccc; }
.status-indicator .signed{color:#28a745; }
.status-indicator .can-sign{color:#667eea; animation:pulse 2s infinite; }
.status-indicator .future{color:#ffc107; }
.sign-status{font-size:14px; color:#888; font-weight:500; }
.sign-button{background:linear-gradient(135deg, #667eea 0%, #764ba2 100%); color:white; border:none; border-radius:25px; padding:12px 20px; font-size:14px; cursor:pointer; transition:all 0.3s ease; display:flex; align-items:center; justify-content:center; gap:8px; width:100%; font-weight:500; }
.sign-button:hover{transform:translateY(-2px); box-shadow:0 5px 15px rgba(102, 126, 234, 0.4); }
.my-container{width:1200px; margin:auto; padding-top:30px; padding-bottom:100px; }
.my-con{background:#fff; border-top-right-radius:10px; border-bottom-right-radius:10px; border-bottom-left-radius:10px; }
.my-ul{display:grid; grid-template-columns:repeat(5, 1fr); gap:15px; text-align:center; }
.my-li{background-color:white; padding:10px 0px 0px; border-top-left-radius:10px; border-top-right-radius:10px; font-size:18px; font-weight:bold; color:#3d5ab9; text-decoration:none; }
.my-li2{background-color:#bbbde5; padding:10px 0px 0px; border-top-left-radius:10px; border-top-right-radius:10px; font-size:18px; font-weight:bold; color:#3d5ab9; text-decoration:none; }
.my-section{padding:35px; background:#fff; margin-bottom:38px; border-radius:10px; }
.my-h2{color:#2c3e50; border-left:5px solid #3498db; padding-left:10px; margin-top:0; font-size:18px; line-height:22px; margin-bottom:21px; }
.info-grid{display:grid; grid-template-columns:repeat(6, 1fr); gap:15px; text-align:center; }
.info-item{padding:20px; border-radius:10px; color:black; margin:0px; background:#edf3f7; }
.info-item label{color:#000000; font-size:14px; }
.info-item span{display:block; margin-top:5px; font-size:14px; }
.tool-section{display:flex; align-items:center; padding:15px 0; border-bottom:1px solid #eee; }
.tool-title{flex-basis:20%; font-weight:bold; font-size:18px; }
.tool-title span{color:#426dff; }
.button-group{flex-basis:80%; text-align:right; }
.generate-btn2{background-color:#3498db; color:#ffffff; width:196px; padding:9px 20px 8px; margin-left:10px; border:none; border-radius:5px; cursor:pointer; transition:all 0.3s ease-in-out; text-decoration:none; font-size:13px; display:inline-block; text-align:center; }
.generate-btn2:hover{background-color:#2980b9; }
.content-wrapper{justify-content:space-between; padding:20px 0px 0px; display:grid; grid-template-columns:repeat(4, 1fr); gap:20px; }
.module{background:#fff; border-radius:12px; padding:25px; box-shadow:0 5px 15px rgb(0 0 0 / 5%); border:1px solid #eee; transition:all 0.3s ease; display:flex; flex-direction:column; }
.module:hover{box-shadow:0 8px 25px rgba(0, 0, 0, 0.1); }
.module h3{color:#2c3e50; margin-bottom:20px; padding-bottom:10px; border-bottom:2px solid #3498db; font-size:18px; }
.module ul{list-style-type:none; margin:-8px 0px 15px; }
.module ul li{padding:10px 0; border-bottom:1px dashed #eee; display:flex; align-items:center; }
.module ul li:before{content:"✓"; color:#27ae60; font-weight:bold; margin-right:10px; }
.module-tb{display:flex; flex-direction:column; justify-content:space-between; height:100%; }
.module-tb span{color:#1000ff; font-weight:bold; }
.module p{font-size:15px; line-height:28px; margin-bottom:20px; }
strong{color:#e74c3c; }
.tip, .info-note{background:#e3f2fd; border-left:4px solid #2196f3; padding:12px; border-radius:0 4px 4px 0; font-size:0.95em; color:#0d47a1; }
.info-note{background:#e8f5e9; border-left:4px solid #4caf50; color:#2e7d32; text-align:center; }
.empty_table{line-height:80px; height: 613px; font-size: 18px !important;}
table.tftable{font-size:12px; color:#333333; width:100%; border-width:1px; border-color:#729ea5; border-collapse:collapse; }
table.tftable th{font-size:12px; background-color:#edf3f7; border-width:1px; padding:8px; border-style:solid; border-color:#bacdd9; text-align:center; }
table.tftable tr{background-color:#fbfbfb; border-bottom:1px solid #eee; }
table.tftable td{font-size:12px; border-width:0px; padding:8px; border-style:solid; border-color:#729ea5; text-align:center; }
.app-info{display:flex; align-items:center; gap:12px; }
.app-text{display:flex; flex-direction:column; align-items:flex-start; justify-content:center; }
.app-name{font-weight:bold; color:#2c3e50; margin-bottom:4px; }
.app-id{font-size:0.85rem; color:#7f8c8d; }
.jlimg{display:block; width:50px; height:50px; object-fit:cover; border-radius:8px; }
.jlbutton{padding:0.5rem 1rem; background-color:#3498db; color:white; border:none; border-radius:4px; cursor:pointer; transition:background-color 0.3s ease; }
.jlbutton:hover{background-color:#2980b9; }
.cuowu{color:#FF0000; text-align:center; }
.pg_wrap{clear:both; margin:0 0 20px; padding:20px 0 0; text-align:center}
.pg{display:inline-block}
.pg_page, .pg_current{color:#9f9f9f; display:inline-block; float:left; padding:0 13px; line-height:30px; text-decoration:none; border:1px solid #ddd; margin-left:-1px}
.pg a:focus, .pg a:hover{background-color:#f3f3f3}
.pg a:first-child{border-top-left-radius:5px; border-bottom-left-radius:5px; }
.pg a:last-child{border-top-right-radius:5px; border-bottom-right-radius:5px; }
.pg_page{background:#fff; text-decoration:none}
.pg_start{background:url(../img/page_1.png) 50% 50% no-repeat; width:32px; text-indent:-999px; overflow:hidden}
.pg_prev{background:url(../img/page_2.png) 50% 50% no-repeat; width:32px; text-indent:-999px; overflow:hidden}
.pg_next{background:url(../img/page_3.png) 50% 50% no-repeat; width:32px; text-indent:-999px; overflow:hidden}
.pg_end{background:url(../img/page_4.png) 50% 50% no-repeat; width:32px; text-indent:-999px; overflow:hidden}
.pg_current{display:inline-block; background:#3498db; color:#fff; font-weight:normal}
.social_config_explain p{padding-bottom:10px}
.form{display:flex; flex-direction:column; gap:20px; }
.form-group{display:flex; flex-direction:column; gap:8px; }
.form-group label{color:#4a4a4a; font-size:18px; font-weight:bold; padding-left:5px; }
.form-group label span{color:#0037ff; padding-left:6px; font-size:14px; font-weight:lighter; }
.mainn{border-top:1px solid #c3c3c3; padding-top:18px; }
.form-group input, .form-group select, .form-group textarea{padding:12px 15px; border-radius:8px; font-size:16px; transition:border-color 0.3s ease; font-family:'Segoe UI', Tahoma, Geneva, Verdana, sans-serif; background:#fafbfb; border:1px solid #c0c9cf; }
.form-group input:focus, .form-group select:focus, .form-group textarea:focus{outline:none; border-color:#4facfe; box-shadow:0 0 0 3px rgba(79, 172, 254, 0.1); }
.form-row{display:grid; grid-template-columns:repeat(4, 1fr); gap:20px; }
.form-actions{display:flex; gap:15px; justify-content:center; margin-top:20px; }
.btn2{padding:12px 30px; border:none; border-radius:8px; font-size:16px; font-weight:600; cursor:pointer; transition:all 0.3s ease; }
.btn-primary{background:#6e8efb; color:white; }
.btn-primary:hover{background:#5a7cff; }
.progress-section{margin-top:30px; padding:20px; background:#f8f9fa; border-radius:8px; }
.progress-section h2{margin-bottom:20px; color:#333; }
.progress-bar{width:100%; height:20px; background:#e1e5e9; border-radius:10px; overflow:hidden; margin-bottom:20px; }
.progress-fill{height:100%; background:linear-gradient(90deg, #4facfe, #00f2fe); width:0%; transition:width 0.5s ease; }
.progress-steps{list-style:none; }
.step{padding:10px 0; color:#6c757d; position:relative; padding-left:30px; }
.step::before{content:"○"; position:absolute; left:0; color:#ccc; }
.step.active{color:#333; font-weight:600; }
.step.active::before{content:"●"; color:#4facfe; }
.hidden{display:none; }
.fieldsett{padding:16px; border:1px solid #c3c3c3; }
.fieldsett legend{font-size:18px; font-weight:bold; }
.radio-groupp{display:flex; flex-direction:column; gap:21px; }
.radio-gra{background:#e5f1f3; padding:10px; border-radius:8px; }
.radio-gr1{color:#000000; padding-left:5px; }
.radio-gr2{color:#0037ff; padding-left:16px; font-size:14px; }
.radio-gr3{color:#287862; padding-left:23px; padding-top:6px; font-size:14px; display:block; }
@media (max-width:768px){.form-row{grid-template-columns:1fr; }
.my-container{margin:10px; }
main2{padding:20px; }
}
.main{display:flex; gap:0px; background:white; overflow:hidden; flex-direction:column; }
.shangzuo{display:flex; }
.flex-shrink0{padding-right:13px; }
.kmobject-kcover{width:68px; border-radius:10px; }
.wmobject-wcover{width:68px; border-radius:10px; background:#4CAF50; }
.left-panel{}
.right-panel{padding-top:35px; }
.status-header{display:flex; justify-content:space-between; align-items:center; margin-bottom:20px; padding-bottom:10px; }
.status-header h2{font-size:1.8rem; color:#333; }
.status-header p{color:#666; margin-top:0px; }
.badge-success{background:#4CAF50; color:white; padding:8px 16px; border-radius:20px; font-size:0.9rem; display:flex; align-items:center; gap:8px; }
.badge-error{background:#f44336; color:white; padding:8px 16px; border-radius:20px; font-size:0.9rem; display:flex; align-items:center; gap:8px; }
.badge-warning{background:#ff9800; color:white; padding:8px 16px; border-radius:20px; font-size:0.9rem; display:flex; align-items:center; gap:8px; }
.error-section{text-align:center; padding:40px 20px; }
.error-section h3{font-size:1.5rem; color:#f44336; margin-bottom:15px; }
.error-section p{color:#666; margin-bottom:25px; }
.btn-primary2{display:inline-block; background:#2196F3; color:white; padding:12px 25px; border-radius:8px; text-decoration:none; font-weight:500; transition:all 0.3s ease; border:none; cursor:pointer; display:inline-flex; align-items:center; gap:8px; }
.btn-primary2:hover{background:#1976D2; transform:translateY(-2px); }
.info-section{margin-bottom:30px; }
.info-section h3{font-size:1.3rem; margin-bottom:20px; color:#333; padding-bottom:10px; border-bottom:2px solid #f0f0f0; }
.info-grid2{display:grid; grid-template-columns:repeat(3, 1fr); gap:20px; }
.info-item2{background:#f8f9fa; padding:15px; border-radius:10px; }
.info-item2 label{font-size:0.85rem; color:#666; display:block; margin-bottom:5px; text-transform:uppercase; letter-spacing:0.5px; }
.info-item2 p{font-size:1rem; color:#333; }
.info-item2 a{color:#2196F3; text-decoration:none; }
.info-item2 a:hover{text-decoration:underline; }
.description2 h3{font-size:1.3rem; margin-bottom:15px; color:#333; }
.description2 p{color:#555; line-height:1.6; background:#f8f9fa; padding:20px; border-radius:10px; }
.right-panel h3{font-size:1.3rem; margin-bottom:3px; color:#333; }
.back-link{text-align:center; display:block; text-decoration:none; color:#2887e9; }
.back-link:hover{color:#2074cb; }
.back-link i{padding-right:5px; }
.btn-download{background:#4CAF50; color:white; padding:13px 22px; border-radius:20px; font-size:16px; margin:15px; display:inline-block; text-decoration:none; }
.btn-download:hover{background:#46a34a; }
.btn-download i{padding-right:5px; }
.btn-disabled{background:#d3d3d3; color:#838383; padding:13px 22px; border-radius:12px; font-size:16px; margin:15px; display:inline-block; text-decoration:none; border:0px solid #eee; }
.btn-disabled i{padding-right:5px; }
.download-card{padding:30px; border-radius:15px; text-align:center; margin-bottom:25px; }
.download-card.success{background:linear-gradient(135deg, #e8f5e9, #c8e6c9); }
.download-card.warning{background:#f1f4f7; }
.download-card.error{background:#ffeaea; }
.result-box{background:white; border-radius:12px; box-shadow:0 4px 12px rgba(0, 0, 0, 0.05); padding:2rem; margin-bottom:2rem; }
.my-h33{font-size:1.5rem; font-weight:600; margin-bottom:1.5rem; color:#111827; }
.auto-refresh-control{display:flex; align-items:center; gap:0.5rem; margin-bottom:1rem; padding:1rem; background:#f3f4f6; border-radius:8px; }
.switch{position:relative; display:inline-block; width:50px; height:24px; }
.switch input{opacity:0; width:0; height:0; }
.slider{position:absolute; cursor:pointer; top:0; left:0; right:0; bottom:0; background-color:#d1d5db; transition:.4s; border-radius:24px; }
.slider:before{position:absolute; content:""; height:16px; width:16px; left:4px; bottom:4px; background-color:white; transition:.4s; border-radius:50%; }
.progress-container{margin-bottom:2rem; }
.progress-labels{display:flex; justify-content:space-between; margin-bottom:0.5rem; font-size:0.875rem; color:#374151; }
.progress-bar2{height:12px; background-color:#e5e7eb; border-radius:6px; overflow:hidden; position:relative; }
.progress-fill2{height:100%; background:linear-gradient(90deg, #3b82f6, #60a5fa); border-radius:6px; transition:width 0.5s ease-in-out; position:relative; }
.progress-fill2.success33{background:linear-gradient(90deg, #10b981, #34d399); }
.progress-fill2.failed{background:linear-gradient(90deg, #ef4444, #f87171); }
.status-info{background-color:#f3f4f6; padding:1rem; border-radius:8px; margin-bottom:1.5rem; }
.status-text{font-weight:600; font-size:1.125rem; }
.status-pending{color:#f59e0b; }
.status-building{color:#3b82f6; }
.status-success{color:#10b981; }
.status-failed{color:#ef4444; }
.action-buttons{display:flex; gap:1rem; margin-bottom:2rem; }
.btn33{padding:0.75rem 1.5rem; border-radius:8px; font-weight:600; cursor:pointer; border:none; transition:all 0.2s; text-decoration:none; display:inline-flex; align-items:center; justify-content:center; gap:0.5rem; }
.btn-primary33{background-color:#3b82f6; color:white; }
.btn-primary33:hover{background-color:#2563eb; }
.btn-secondary{background-color:#e5e7eb; color:#374151; }
.btn-secondary:hover{background-color:#d1d5db; }
.btn-success{background-color:#10b981; color:white; }
.btn-success:hover{background-color:#059669; }
.log-entry{margin-bottom:0.5rem; padding:0.5rem; border-radius:4px; }
.log-entry:last-child{margin-bottom:0; }
.log-timestamp{color:#94a3b8; margin-right:1rem; }
.log-message{color:#e2e8f0; }