/**前台展示页样式 - FinchUI Style**/

/* 基础重置 */
*,*::before,*::after{box-sizing:border-box;margin:0;padding:0;}
html{word-wrap:break-word;-webkit-text-size-adjust:none;word-break:break-all;}
body{color:#333;background:#fff;font-size:14px;font-family:"PingFang SC",-apple-system,BlinkMacSystemFont,Roboto,"Helvetica Neue",Helvetica,Arial,"Hiragino Sans GB","Source Han Sans","Noto Sans CJK Sc","Microsoft YaHei",sans-serif;-webkit-font-smoothing:antialiased;}
a{color:#333;text-decoration:none;transition:all .15s ease 0s;}
a:hover{color:#0069cc;text-decoration:none;}
ol,ul{list-style-type:none;}
img{max-width:100%;border:0;vertical-align:middle;}

/* 主容器 */
.main{position:relative;background:#fff;}
.main-width{max-width:1080px;margin:0 auto;padding:0 20px;}
.screenshot-body{background:#fff;}
#imgDiv{overflow:hidden;}

/* 作品信息头部（合并导航栏） */
.showcase-hero{display:block;position:relative;background:#1e2433 no-repeat center/cover;overflow:hidden;}
.showcase-hero::before{content:"";position:absolute;inset:0;background:linear-gradient(135deg,rgba(0,0,0,.6) 0%,rgba(0,20,50,.45) 100%);pointer-events:none;}
.showcase-hero .main-width{position:relative;z-index:1;padding-top:40px;padding-bottom:50px;}
.showcase-hero-name{font-size:28px;font-weight:bold;color:#fff;line-height:1.5;margin:0 0 8px;}
.showcase-hero-desc{font-size:14px;color:rgba(255,255,255,.75);margin:0 0 16px;line-height:1.7;}
.showcase-hero-meta{display:flex;flex-wrap:wrap;gap:5px 20px;font-size:13px;color:rgba(255,255,255,.6);margin:0 0 20px;}
.showcase-hero-meta a{color:rgba(255,255,255,.8);}
.showcase-hero-meta a:hover{color:#fff;}
.showcase-hero-actions{display:flex;gap:20px;flex-wrap:wrap;}
.showcase-hero-actions .btn-buy{display:inline-block;font-size:14px;line-height:36px;padding:0 22px;background:#cc1919;color:#fff;border-radius:4px;transition:background .2s;}
.showcase-hero-actions .btn-buy:hover{background:#aa1212;color:#fff;}.showcase-hero-actions .btn-changelog{display:inline-block;font-size:14px;line-height:36px;padding:0 22px;background:#1a9e6e;color:#fff;border-radius:4px;transition:background .2s;}
.showcase-hero-actions .btn-changelog:hover{background:#148055;color:#fff;}.showcase-hero-actions .btn-publish{display:inline-block;font-size:14px;line-height:36px;padding:0 22px;background:#0069cc;color:#fff;border-radius:4px;transition:background .2s;}
.showcase-hero-actions .btn-publish:hover{background:#0057aa;color:#fff;}
.showcase-hero-actions .btn-screenshot{font-size:14px;line-height:34px;padding:0 20px;color:rgba(255,255,255,.9);cursor:pointer;background:none;border:.01rem solid rgba(255,255,255,.4);border-radius:4px;font-family:inherit;transition:all .2s;margin-left:auto;}
.showcase-hero-actions .btn-screenshot:hover{background:rgba(255,255,255,.1);border-color:rgba(255,255,255,.75);color:#fff;}

/* 区块 */
section{margin:20px 0;}
.section-header{line-height:30px;width:100%;display:flex;align-items:center;margin:0 0 20px 0;}
.section-header h3{font-weight:normal;font-size:16px;display:inline-block;position:relative;}
.section-header h3::before{content:"";width:100%;height:2px;border-radius:2px;background:#0069cc;display:inline-block;position:absolute;top:28px;left:0;}
.section-header-extra{margin-left:auto;color:#999;font-size:12px;}
.section-header-full{width:100%;display:block;margin:0 0 20px 0;text-align:center;}
.section-header-full h3{line-height:1.5;font-size:20px;padding:0 0 5px 0;display:inline-block;position:relative;}
.section-header-full h3::before{content:"";width:50%;height:2px;border-radius:2px;background:#0069cc;display:inline-block;position:absolute;bottom:0;left:25%;}
.section-header-intro{line-height:150%;font-size:14px;margin:15px 0 0 0;color:#666;}
.section-desc{margin:0 0 20px 0;line-height:175%;font-size:14px;color:#666;padding:10px 15px;background:#f8f9fa;border-radius:4px;border:.01rem solid #ebebeb;}

/* 售后承诺（多色卡片风格） */
.list-promise{display:grid;grid-template-columns:repeat(4,1fr);gap:15px;}
.list-promise li{font-size:14px;text-align:center;border-radius:6px;padding:20px 15px;border:.01rem solid;border-left-width:3px;}
.list-promise li:nth-child(9n+1){background:#f7faff;border-color:#d0e5f7;border-left-color:#0069cc;}
.list-promise li:nth-child(9n+2){background:#f5fbf8;border-color:#c2e8d5;border-left-color:#1a9e6e;}
.list-promise li:nth-child(9n+3){background:#fffaf6;border-color:#f2dac8;border-left-color:#cc6619;}
.list-promise li:nth-child(9n+4){background:#fef7ff;border-color:#e8d0f7;border-left-color:#8b1acc;}
.list-promise li:nth-child(9n+5){background:#f5fbff;border-color:#c5dff0;border-left-color:#0096b8;}
.list-promise li:nth-child(9n+6){background:#fffeF5;border-color:#ece8c5;border-left-color:#a08800;}
.list-promise li:nth-child(9n+7){background:#fff5f7;border-color:#f5cdd5;border-left-color:#cc1945;}
.list-promise li:nth-child(9n+8){background:#f5fffa;border-color:#c2eedb;border-left-color:#1a9e82;}
.list-promise li:nth-child(9n+9){background:#f9f9f9;border-color:#e0e0e0;border-left-color:#666;}
.list-promise .promise-inner{display:block;}
.list-promise .promise-title{font-size:18px;font-weight:bold;margin:0;transition:font-size .2s ease,margin .2s ease;}
.list-promise li:hover .promise-title{font-size:15px;margin:0 0 10px 0;}
.list-promise li:nth-child(9n+1) .promise-title{color:#0069cc;}
.list-promise li:nth-child(9n+2) .promise-title{color:#1a9e6e;}
.list-promise li:nth-child(9n+3) .promise-title{color:#cc6619;}
.list-promise li:nth-child(9n+4) .promise-title{color:#8b1acc;}
.list-promise li:nth-child(9n+5) .promise-title{color:#0096b8;}
.list-promise li:nth-child(9n+6) .promise-title{color:#a08800;}
.list-promise li:nth-child(9n+7) .promise-title{color:#cc1945;}
.list-promise li:nth-child(9n+8) .promise-title{color:#1a9e82;}
.list-promise li:nth-child(9n+9) .promise-title{color:#666;}
.list-promise .promise-tags{line-height:200%;color:#555;max-height:0;overflow:hidden;opacity:0;transition:max-height .3s ease,opacity .25s ease;}
.list-promise li:hover .promise-tags{max-height:300px;opacity:1;}
.list-promise .promise-tags .tag{display:inline;color:#555;font-size:14px;white-space:normal;}
.list-promise .promise-tags .tag+.tag::before{content:" | ";color:#bbb;margin:0 4px;}

/* 功能列表 */
.list-feature{display:grid;grid-template-columns:repeat(3,1fr);gap:15px;}
.list-feature li{font-size:14px;text-align:center;border:.01rem solid #f2f2f2;border-radius:5px;padding:20px 15px;box-shadow:1px 1px 5px rgba(0,0,0,.03);transition:box-shadow .2s,background .2s;}
.list-feature li:hover{box-shadow:0 4px 14px rgba(0,0,0,.1);background:#f7fbfd;}
.list-feature li .feature-title{line-height:150%;font-size:15px;font-weight:bold;color:#333;}
.list-feature li .feature-title.highlight{color:#cc1919;}
.list-feature .feature-tags{margin:10px 0 0 0;line-height:200%;color:#999;}
.list-feature .feature-tags .tag{padding:0 3px;margin:0 7px;display:inline-block;line-height:135%;background:none;color:#999;font-size:14px;border-radius:0;white-space:normal;}
.list-feature .feature-tags .tag::before{content:"\2714";margin-right:4px;color:#30b300;font-size:12px;}

/* 空状态 */
.empty{text-align:center;padding:60px 20px;}
.empty p{font-size:16px;color:#999;}
.empty .empty-hint{font-size:13px;color:#bbb;margin-top:8px;}

/* 升级日志 */
.list-logs li{position:relative;display:flex;width:100%;border-collapse:collapse;}
.list-logs li .log-header{width:80px;flex-shrink:0;font-size:14px;padding:18px 15px 0 0;text-align:right;}
.list-logs li .log-header .log-date{display:inline-flex;flex-direction:column;align-items:center;padding:5px 8px;background:#fafafa;border:.01rem solid #e6e6e6;border-radius:5px;min-width:60px;margin:1px 0 0 0;}
.list-logs li .log-header .log-date .year{color:#999;font-size:12px;font-weight:normal;line-height:1.5;}
.list-logs li .log-header .log-date .month-day{color:#333;font-size:15px;font-weight:bold;line-height:1.5;}
.list-logs li .log-version{position:relative;flex:1;font-size:14px;padding:18px 0 0 15px;border-left:.01rem solid #e6e6e6;line-height:1.75;}
.list-logs li .log-version::after{content:"";position:absolute;left:0;top:25px;transform:translateX(-50%);width:12px;height:12px;display:block;background:#e6e6e6;border-radius:50%;}
.list-logs li .log-version .log-title{font-size:16px;line-height:1.75;margin:0 0 12px 0;color:#333;}
.list-logs li .log-version h4{margin:20px 0 10px;line-height:175%;display:block;}
.list-logs li .log-content{margin:0 0 20px;line-height:175%;display:block;background:#fff;border:.01rem solid #f2f2f2;border-radius:5px;padding:10px 15px;box-shadow:1px 1px 5px rgba(0,0,0,.05);}
.list-logs li .log-content:hover{background:#f7fbfd;}
.list-logs .log-summary{font-size:14px;line-height:175%;color:#666;padding:5px 15px;margin:0 0 15px;background:#fafafa;border-radius:4px;border:.01rem solid #e6e6e6;}
.list-logs .log-changes{list-style:none;padding:0;}
.list-logs .log-change{display:flex;align-items:flex-start;padding:6px 0;font-size:14px;color:#444;}
.list-logs .change-badge{display:inline-block;flex-shrink:0;margin-right:8px;padding:1px 8px;border-radius:3px;font-size:12px;font-weight:500;min-width:40px;text-align:center;}
.list-logs .change-added .change-badge{background:#e8f5e9;color:#2e7d32;}
.list-logs .change-fixed .change-badge{background:#e3f2fd;color:#1565c0;}
.list-logs .change-changed .change-badge{background:#fff3e0;color:#e65100;}
.list-logs .change-removed .change-badge{background:#fbe9e7;color:#bf360c;}

/* 页脚 */
footer .footer{border-top:.01rem solid #e6e6e6;padding:5px 0 20px 0;font-size:14px;color:#999;text-align:center;}
footer .footer a{color:#999;}
footer .footer a:hover{color:#0069cc;}
footer .footer p{margin:15px 0 0 0;line-height:1.5;}

/* 响应式 */
@media screen and (max-width:768px){
    .main-width{padding:0 15px;}
    .showcase-hero .main-width{padding-top:20px;padding-bottom:30px;}
    .showcase-hero-name{font-size:20px;}
    .section-header-full h3{font-size:18px !important;}
    .section-header-extra{font-size:12px;}
    .section-desc{font-size:13px;}
    .list-promise{grid-template-columns:repeat(2,1fr);gap:10px;}
    .list-feature{grid-template-columns:repeat(2,1fr);gap:10px;}
    .showcase-hero-actions .btn-screenshot{display:none;}
    .list-logs li{flex-direction:column;}
    .list-logs li .log-header{width:100%;text-align:left;padding:15px 0 0 0;}
    .list-logs li .log-header h2{justify-content:flex-start;}
    .list-logs li .log-version{border-left:0;padding:0;}
    .list-logs li .log-version::after{display:none;}
}