/* 全局盒子模型重置 */
*, *::before, *::after { box-sizing: border-box; }

/* 全局背景及环境光晕（提升高级感） */
body, #kt_app_body { 
    background-color: #f2f5f9 !important; 
    font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Arial, sans-serif; 
    margin: 0; padding: 0; 
    position: relative;
    min-height: 100vh;
    overflow-x: hidden;
}
body::before {
    content: ''; position: fixed; top: -15%; left: -10%; width: 50vw; height: 50vw;
    border-radius: 50%; background: radial-gradient(circle, rgba(22,119,255,0.06) 0%, rgba(22,119,255,0) 70%);
    z-index: -1; pointer-events: none;
}
body::after {
    content: ''; position: fixed; bottom: -15%; right: -10%; width: 60vw; height: 60vw;
    border-radius: 50%; background: radial-gradient(circle, rgba(52,168,83,0.06) 0%, rgba(52,168,83,0) 70%);
    z-index: -1; pointer-events: none;
}

#kt_app_sidebar, #kt_app_header, .app-header { display: none !important; }
.app-wrapper, .app-main { margin: 0 !important; padding: 0 !important; padding-top: 0 !important; }

.custom-layout { max-width: 1400px; margin: 40px auto; padding: 0 20px; width: 100%; display: flex; flex-direction: column; align-items: center; }
.page-title { text-align: center; font-size: 28px; font-weight: 800; color: #1e293b; margin-bottom: 30px; letter-spacing: 1px; text-shadow: 0 2px 10px rgba(0,0,0,0.05); }

/* 搜索框毛玻璃效果 */
.search-box { 
    width: 100%; max-width: 700px; 
    background: rgba(255, 255, 255, 0.5); 
    backdrop-filter: blur(16px); -webkit-backdrop-filter: blur(16px);
    border: 1px solid rgba(255, 255, 255, 0.8);
    border-radius: 16px; 
    padding: 8px; 
    margin-bottom: 40px; 
    box-shadow: 0 10px 30px rgba(0,0,0,0.04); 
    display: flex;
    align-items: center;
}
.search-input { 
    width: 100%; 
    background: rgba(255, 255, 255, 0.8); 
    border: 1px solid transparent; 
    padding: 15px 24px; 
    border-radius: 12px; 
    font-size: 15px; 
    color: #334155;
    outline: none; 
    transition: all 0.3s ease; 
}
.search-input::placeholder { color: #94a3b8; }
.search-input:focus { background: #fff; box-shadow: 0 4px 15px rgba(22, 119, 255, 0.08); border-color: rgba(22, 119, 255, 0.2); }

/* 头部排版 */
.section-header-wrapper { width: 100%; margin-bottom: 25px; margin-top: 30px; }
.section-header { display: flex; justify-content: space-between; align-items: center; width: 100%; }
.section-title { display: flex; align-items: center; font-size: 19px; font-weight: 700; color: #334155; }
.section-title .title-bar { width: 5px; height: 22px; background-color: #34a853; margin-right: 12px; border-radius: 4px; }
.section-title .title-bar.warning { background-color: #faad14; }

.btn-video-req { background: #1677ff; color: white; border: none; padding: 10px 20px; border-radius: 10px; font-size: 14px; font-weight: 600; cursor: pointer; display: flex; align-items: center; gap: 8px; transition: all 0.2s cubic-bezier(0.4, 0, 0.2, 1); box-shadow: 0 4px 12px rgba(22,119,255,0.25); }
.btn-video-req:hover { background: #4096ff; transform: translateY(-2px); box-shadow: 0 8px 20px rgba(22,119,255,0.35); }

/* 网格布局 */
.platform-grid { 
    display: grid; 
    grid-template-columns: repeat(5, 1fr); 
    gap: 20px; 
    width: 100%;
}

@media(max-width: 1400px) { .platform-grid { grid-template-columns: repeat(4, 1fr); } }
@media(max-width: 1150px) { .platform-grid { grid-template-columns: repeat(3, 1fr); } }
@media(max-width: 850px) { .platform-grid { grid-template-columns: repeat(2, 1fr); } }
@media(max-width: 600px) { .platform-grid { grid-template-columns: 1fr; } }

/* 卡片毛玻璃效果 */
.platform-card { 
    background: rgba(255, 255, 255, 0.65); 
    backdrop-filter: blur(20px); -webkit-backdrop-filter: blur(20px);
    border-radius: 16px; padding: 24px 22px; 
    border: 1px solid rgba(255, 255, 255, 0.9); 
    box-shadow: 0 10px 25px rgba(149, 157, 165, 0.06);
    display: flex; flex-direction: column; 
    width: 100%; height: 100%;
    transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1); 
}
.platform-card:hover { 
    transform: translateY(-8px); 
    box-shadow: 0 20px 40px rgba(22, 119, 255, 0.08); 
    background: rgba(255, 255, 255, 0.95);
    border-color: #fff;
}
.platform-card.warning:hover { box-shadow: 0 20px 40px rgba(250, 173, 20, 0.08); }

.card-top { display: flex; align-items: flex-start; gap: 16px; margin-bottom: 18px; }
.icon-wrapper { width: 50px; height: 50px; background: rgba(52, 168, 83, 0.1); border-radius: 14px; display: flex; justify-content: center; align-items: center; flex-shrink: 0; fill: #34a853; }
.icon-wrapper.warning { background: rgba(250, 173, 20, 0.1); fill: #faad14; }

.title-wrapper { display: flex; flex-direction: column; gap: 8px; justify-content: center; flex: 1; }
.platform-name { 
    color: #1e293b; font-size: 16px; font-weight: 700; 
    white-space: normal; 
    word-break: break-word; 
    line-height: 1.4; 
}

.tag-badge { background: rgba(52, 168, 83, 0.12); color: #2e9649; font-size: 11px; padding: 4px 10px; border-radius: 6px; width: max-content; font-weight: 600; border: 1px solid rgba(52, 168, 83, 0.1); line-height: 1.2; }
.tag-badge.warning { background: rgba(250, 173, 20, 0.12); color: #d46b08; border-color: rgba(250, 173, 20, 0.1); }

.help-text { color: #94a3b8; font-size: 13px; margin-bottom: 25px; }

.card-actions { display: flex; margin-top: auto; width: 100%; }
.btn-open { 
    flex: 1; background: #1677ff; color: #fff; border: none; border-radius: 10px; padding: 12px 0; font-size: 14px; font-weight: 600; cursor: pointer; display: flex; justify-content: center; align-items: center; gap: 6px; text-decoration: none; transition: all 0.2s cubic-bezier(0.4, 0, 0.2, 1); box-shadow: 0 4px 10px rgba(22,119,255,0.15); 
}
.btn-open:hover { background: #4096ff; color: #fff; text-decoration: none; box-shadow: 0 6px 15px rgba(22,119,255,0.25); }
.btn-open.warning { background: #faad14; box-shadow: 0 4px 10px rgba(250,173,20,0.15); }
.btn-open.warning:hover { background: #ffc53d; box-shadow: 0 6px 15px rgba(250,173,20,0.25); }

/* 原生弹窗样式 */
.custom-modal-backdrop { position: fixed; top: 0; left: 0; width: 100vw; height: 100vh; background: rgba(15, 23, 42, 0.4); backdrop-filter: blur(6px); -webkit-backdrop-filter: blur(6px); z-index: 1040; display: none; opacity: 0; transition: opacity 0.3s; }
.custom-modal-backdrop.show { opacity: 1; }
.custom-modal { position: fixed; top: 0; left: 0; width: 100%; height: 100%; z-index: 1050; display: none; overflow-x: hidden; overflow-y: auto; outline: 0; }
.custom-modal.show { display: block; }
.custom-modal-dialog { position: relative; width: auto; margin: 2rem auto; pointer-events: none; max-width: 1140px; transition: transform 0.3s cubic-bezier(0.34, 1.56, 0.64, 1); transform: translateY(-30px) scale(0.95); }
.custom-modal.show .custom-modal-dialog { transform: translateY(0) scale(1); }
.custom-modal-content { position: relative; display: flex; flex-direction: column; width: 100%; pointer-events: auto; background-color: #fff; background-clip: padding-box; border: none; border-radius: 20px; outline: 0; box-shadow: 0 25px 50px rgba(0,0,0,0.15); }
.custom-modal-header { display: flex; flex-shrink: 0; align-items: center; justify-content: space-between; padding: 1.5rem 1.75rem; border-bottom: 1px solid rgba(0,0,0,0.04); }
.custom-modal-title { margin-bottom: 0; line-height: 1.5; font-size: 1.35rem; font-weight: 800; color: #1e293b; }
.btn-close-modal { box-sizing: content-box; width: 1em; height: 1em; padding: .25em .25em; color: #64748b; background: transparent; border: 0; border-radius: .375rem; cursor: pointer; font-size: 1.5rem; line-height: 1; transition: all 0.2s; }
.btn-close-modal:hover { color: #0f172a; background: #f1f5f9; }
.custom-modal-body { position: relative; flex: 1 1 auto; padding: 1.75rem; }
.custom-modal-footer { display: flex; flex-wrap: wrap; flex-shrink: 0; align-items: center; justify-content: flex-end; padding: 1.25rem 1.75rem; border-top: 1px solid rgba(0,0,0,0.04); gap: 12px; }

/* 弹窗排版 */
.req-row { display: flex; flex-wrap: wrap; margin: -10px; }
.req-col-8 { flex: 0 0 66.666667%; max-width: 66.666667%; padding: 10px; }
.req-col-4 { flex: 0 0 33.333333%; max-width: 33.333333%; padding: 10px; }
.req-col-6 { flex: 0 0 50%; max-width: 50%; padding: 10px; }
@media(max-width: 992px) { .req-col-8, .req-col-4, .req-col-6 { flex: 0 0 100%; max-width: 100%; } }
.req-card { border: 1px solid #e2e8f0; border-radius: 12px; background: #fff; height: 100%; box-shadow: 0 2px 8px rgba(0,0,0,0.02); }
.req-card-body { padding: 1.25rem; }
.req-alert { padding: 1rem 1.25rem; margin-bottom: 1rem; border: 1px solid transparent; border-radius: 10px; line-height: 1.6; }
.req-alert-info { color: #0369a1; background-color: #e0f2fe; border-color: #bae6fd; }
.req-alert-warning { color: #b45309; background-color: #fef3c7; border-color: #fde68a; }
.text-primary { color: #1677ff!important; }
.text-warning { color: #faad14!important; }
.text-info { color: #0ea5e9!important; }
.text-success { color: #10b981!important; }
.text-danger { color: #ef4444!important; }
.req-list { padding-left: 0; list-style: none; margin-bottom: 0; font-size: 14.5px; line-height: 1.8; color: #475569; }

.btn-primary { color: #fff; background-color: #1677ff; padding: 10px 18px; font-weight: 600; border-radius: 8px; border: none; cursor: pointer; transition: 0.2s; }
.btn-primary:hover { background-color: #4096ff; }
.btn-success { color: #fff; background-color: #10b981; padding: 10px 18px; font-weight: 600; border-radius: 8px; border: none; cursor: pointer; transition: 0.2s; }
.btn-success:hover { background-color: #34d399; }
.btn-light { color: #334155; background-color: #f1f5f9; padding: 10px 18px; font-weight: 600; border-radius: 8px; border: none; cursor: pointer; transition: 0.2s; }
.btn-light:hover { background-color: #e2e8f0; }