/* ==========================================================================
   子流程页高级感皮肤（copyright/type、copyright/file、blockchain/type、
   blockchain/file、blockchain/query、worksregister 共用）。
   在各页自身 CSS 之后加载，同特异性下覆盖。
   设计令牌与首页/个人中心一致：主蓝 #008de7 / 亮蓝 #00c6ff / 深蓝 #01173c
   页面底 #f2f4f8 / 卡片 #fff / 标题 #1a2233 / 正文 #44536b / 辅文 #5a6b85
   ========================================================================== */

/* ---------- 0. 页面底色 ---------- */
#main{
    background-color: #f2f4f8;
}

/* ---------- 1. 公共 banner：铺满视口宽 + 品牌色罩 + 底部融入页面底色 ----------
   原图为 1920 宽 no-repeat，超宽屏右侧露底；改 cover 铺满并叠加光晕罩。 */
#page-common-banner,
.page-common-banner{
    background-size: cover;
    background-position: center 32%;
}
#page-common-banner::after,
.page-common-banner::after{
    content: "";
    position: absolute;
    inset: 0;
    background:
        radial-gradient(860px 300px at 14% -18%, rgba(0, 141, 231, .38), transparent 62%),
        radial-gradient(720px 280px at 86% 118%, rgba(0, 198, 255, .20), transparent 62%),
        linear-gradient(180deg, rgba(1, 23, 60, .46), rgba(1, 23, 60, .16) 52%, rgba(6, 18, 43, .50) 82%, #f2f4f8 100%);
    pointer-events: none;
}

/* ---------- 2. 面包屑 ---------- */
#breadcrumb dl,
#breadcrumb dl dd a,
#breadcrumb dl dd span{
    font-size: 12px;
    letter-spacing: .5px;
    color: rgba(255, 255, 255, .92);
    text-shadow: 0 1px 8px rgba(1, 23, 60, .45);
}
#breadcrumb dl dd a:hover{
    color: #8fd8ff;
}

/* ---------- 3. 内容卡片：圆角 + 低透明蓝灰阴影 ---------- */
#copyright_type .content,
.column .content{
    padding: 24px 30px;
    border-radius: 16px;
    box-shadow: 0 10px 34px rgba(1, 23, 60, .08);
}
#copyright_type .hd,
.column .hd{
    position: relative;
}
#copyright_type .hd strong,
.column .hd strong{
    position: relative;
    padding: 0 0 0 12px;
    border-left: none;
    font-size: 16px;
    font-weight: 700;
    color: #1a2233;
    letter-spacing: 1px;
}
#copyright_type .hd strong::before,
.column .hd strong::before{
    content: "";
    position: absolute;
    left: 0;
    top: 50%;
    width: 4px;
    height: 16px;
    margin-top: -8px;
    border-radius: 2px;
    background: linear-gradient(180deg, #008de7, #00c6ff);
}
.column .hd{
    border-bottom: 1px solid #eef2f7;
}
#copyright_type .hd a,
.column .hd a,
#notice a{
    color: #008de7;
}
#copyright_type .hd a:hover,
.column .hd a:hover,
#notice a:hover{
    color: #0077c4;
}

/* ---------- 4. 作品类型网格 ---------- */
#copyright_type .bd dl dt{
    border: none;
}
#copyright_type .bd dl dt a{
    background: linear-gradient(180deg, #f8fafd, #f2f7fc);
    border: 1px solid #e6eef7;
    border-radius: 14px;
    transition: transform .3s cubic-bezier(.22,.61,.36,1), box-shadow .3s, border-color .3s, background-color .3s;
}
#copyright_type .bd dl dt a > img{
    transition: transform .3s cubic-bezier(.22,.61,.36,1);
}
#copyright_type .bd dl dt a:hover{
    background: #e8f4ff;
    border-color: #bcd9f5;
    transform: translateY(-4px);
    box-shadow: 0 12px 28px rgba(0, 141, 231, .16);
}
#copyright_type .bd dl dt a:hover > img{
    transform: scale(1.06);
}
#copyright_type .bd dl dt a strong{
    color: #1a2233;
    font-weight: 600;
    letter-spacing: 1px;
}
#copyright_type .bd dl dd p{
    color: #5a6b85;
}

/* ---------- 5. 流程步骤条（type 页底部 #step） ---------- */
#step dl{
    border-radius: 16px;
    box-shadow: 0 10px 34px rgba(1, 23, 60, .08);
}
#step dl dt{
    color: #1a2233;
    font-weight: 700;
    letter-spacing: 1px;
}
#step dl dd a{
    background: #f7fafd;
    border: 1px solid #e6eef7;
    border-radius: 12px;
    transition: background-color .3s, border-color .3s, transform .3s, box-shadow .3s;
}
#step dl dd a:hover{
    background: #e8f4ff;
    border-color: #bcd9f5;
    transform: translateY(-3px);
    box-shadow: 0 10px 22px rgba(0, 141, 231, .14);
}
#step dl dd a span{
    color: #5a6b85;
}

/* ---------- 6. 上传页（file） ---------- */
#file .upload .plus{
    border-radius: 16px;
    box-shadow: 0 10px 34px rgba(1, 23, 60, .08);
}
.webuploader-pick{
    background: linear-gradient(135deg, #008de7, #00c6ff);
    border-radius: 12px;
    box-shadow: 0 10px 24px rgba(0, 141, 231, .32);
    letter-spacing: 3px;
    transition: transform .3s, box-shadow .3s, filter .3s;
}
.webuploader-pick:hover{
    transform: translateY(-2px);
    box-shadow: 0 14px 30px rgba(0, 141, 231, .40);
}
#file .upload .plus .agree span,
#file .upload .plus .agree a{
    color: #44536b;
}
#file .upload .plus .desc{
    color: #8b98ad;
}
#file .upload .plus .desc strong{
    color: #1a2233;
}
#file .upload .note{
    color: #8b98ad;
}
.thead ul{
    background: #f5f8fc;
    border-radius: 12px;
}
.thead ul li{
    color: #5a6b85;
    font-weight: 600;
}
.tbody .tr ul{
    border-radius: 12px;
    box-shadow: 0 2px 10px rgba(1, 23, 60, .05);
    transition: box-shadow .3s, transform .3s;
}
.tbody .tr ul:hover{
    box-shadow: 0 8px 24px rgba(1, 23, 60, .10);
    transform: translateY(-1px);
}
.tbody strong.title{
    color: #1a2233;
}
.tbody dl.progress dd{
    background: #e6ecf5;
}
.tbody dl.progress dt{
    background: linear-gradient(90deg, #008de7, #00c6ff);
}
.tbody span.status{
    color: #5a6b85;
}
.tbody a.edit{
    background: linear-gradient(135deg, #16a16a, #3ecf8e);
    border-radius: 999px;
    padding: 0 14px;
    box-shadow: 0 4px 12px rgba(22, 161, 106, .28);
    transition: transform .25s, box-shadow .25s;
}
.tbody a.edit:hover{
    transform: translateY(-1px);
    box-shadow: 0 8px 18px rgba(22, 161, 106, .36);
}
.tbody a.remove{
    color: #8b98ad;
    transition: color .25s;
}
.tbody a.remove:hover{
    color: #e05656;
}
.tbody .works{
    background: linear-gradient(180deg, #f8fafd, #fff);
    border-radius: 12px;
    box-shadow: 0 6px 20px rgba(1, 23, 60, .06);
    padding: 4px 12px 14px;
}
.tbody .works .content{
    border-top: 1px solid #eef2f7;
}
#file dl.step{
    border-top: none;
    border-radius: 16px;
    box-shadow: 0 10px 34px rgba(1, 23, 60, .08);
    overflow: hidden;
    position: relative;
}
#file dl.step::before{
    content: "";
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    height: 4px;
    background: linear-gradient(90deg, #008de7, #00c6ff);
}
#file dl.step dt{
    color: #1a2233;
    font-weight: 700;
    letter-spacing: 1px;
}
#file dl.step dd{
    background: #f2f6fb;
    border-radius: 8px;
}
#file dl.step dd strong{
    color: #44536b;
}
.perfect-info-btn{
    background: #8b98ad;
    border-radius: 999px;
}

/* ---------- 7. 须知/违规说明长文 ---------- */
.column .bd p,
#notice ol li,
#breach ol li,
#breach h3{
    color: #5a6b85;
    font-size: 13px;
}
#breach h2{
    color: #1a2233;
    font-size: 13px;
}

/* ---------- 8. 存证查询页（blockchain/query） ---------- */
#banner > .container > form{
    border-radius: 14px;
    box-shadow: 0 16px 44px rgba(1, 23, 60, .30);
    overflow: hidden;
}
#banner > .container > form > input{
    border-radius: 14px 0 0 14px;
    color: #1a2233;
}
#banner > .container > form > input::placeholder{
    color: #8b98ad;
}
#banner > .container > form > .btn-query{
    background: linear-gradient(135deg, #008de7, #00c6ff);
    color: #fff;
    border-radius: 0 14px 14px 0;
    letter-spacing: 3px;
    transition: filter .3s;
}
#banner > .container > form > .btn-query:hover{
    filter: brightness(1.08);
}
#banner > .container > p{
    text-shadow: 0 2px 24px rgba(1, 23, 60, .55);
    letter-spacing: 4px;
}
#result .data-show > li{
    border-radius: 16px;
    box-shadow: 0 10px 34px rgba(1, 23, 60, .10);
}

/* ---------- 9. 批量登记页（worksregister） ----------
   模板内联 <style> 在本文件之前加载，同特异性下此处覆盖。 */
.wr-page{
    border-radius: 18px;
    box-shadow: 0 14px 44px rgba(1, 23, 60, .10);
    margin-bottom: 40px;
    padding-top: 26px;
}
.wr-section-title{
    position: relative;
    padding-left: 12px;
    font-size: 17px;
    font-weight: 700;
    color: #1a2233;
    letter-spacing: 1px;
}
.wr-section-title::before{
    content: "";
    position: absolute;
    left: 0;
    top: 50%;
    width: 4px;
    height: 16px;
    margin-top: -8px;
    border-radius: 2px;
    background: linear-gradient(180deg, #008de7, #00c6ff);
}
.wr-linkbtn{
    color: #008de7;
    font-weight: 500;
}
.wr-linkbtn:hover{
    color: #0077c4;
}
.wr-works-meta .idx{
    color: #8b98ad;
    font-size: 14px;
    font-weight: 600;
}
.wr-label{
    color: #5a6b85;
    font-size: 14px;
}
.wr-ctrl input,
.wr-ctrl select,
.wr-ctrl textarea{
    border: 1px solid #dfe6f0;
    border-radius: 10px;
    background: #fbfcfe;
    color: #1a2233;
    font-size: 14px;
    padding: 9px 12px;
    transition: border-color .2s, box-shadow .2s, background-color .2s;
}
.wr-ctrl input:focus,
.wr-ctrl select:focus,
.wr-ctrl textarea:focus{
    border-color: #008de7;
    background: #fff;
    box-shadow: 0 0 0 3px rgba(0, 141, 231, .12);
}
.wr-mini{
    border: 1px solid #dfe6f0;
    border-radius: 8px;
    color: #44536b;
    transition: border-color .25s, color .25s, background-color .25s;
}
.wr-mini:hover{
    border-color: #bcd9f5;
    background: #f2f8ff;
    color: #008de7;
}
.wr-mini.danger{
    border-color: #f3c1c1;
    color: #e05656;
}
.wr-mini.danger:hover{
    background: #fdf1f1;
    border-color: #e05656;
}
.wr-split{
    background: #f2f6fb;
}
.wr-authors-head li{
    color: #5a6b85;
    font-weight: 600;
}
.wr-authors-body .tr > li{
    color: #44536b;
}
.wr-authors-body .tr{
    border-top: 1px solid #eef2f7;
    transition: background-color .25s;
}
.wr-authors-body .tr:hover{
    background: #f7fafd;
}
.wr-checks label{
    color: #44536b;
    font-size: 14px;
}
.wr-upload-box{
    border: 1px dashed #bcd9f5;
    border-radius: 12px;
    background: #f8fafd;
}
.wr-upload-item{
    border: 1px solid #e6eef7;
    border-radius: 10px;
    background: #fff;
}
.wr-picker .webuploader-pick{
    border: 1px dashed #bcd9f5;
    border-radius: 10px;
    background: #fff;
    color: #008de7;
    box-shadow: none;
    letter-spacing: 0;
}
.wr-picker .webuploader-pick:hover{
    background: #e8f4ff;
    border-color: #008de7;
    transform: none;
    box-shadow: none;
}
.wr-btn{
    border: 1px solid #dfe6f0;
    border-radius: 10px;
    color: #44536b;
    transition: border-color .25s, color .25s, background-color .25s, transform .25s, box-shadow .25s;
}
.wr-btn:hover{
    border-color: #bcd9f5;
    color: #008de7;
}
.wr-btn.primary{
    background: linear-gradient(135deg, #008de7, #00c6ff);
    border: none;
    color: #fff;
    letter-spacing: 2px;
    box-shadow: 0 8px 20px rgba(0, 141, 231, .30);
}
.wr-btn.primary:hover{
    transform: translateY(-1px);
    box-shadow: 0 12px 26px rgba(0, 141, 231, .38);
    color: #fff;
}
.wr-cover-preview img{
    border: 1px solid #e6eef7;
    border-radius: 10px;
    background: #f8fafd;
}
.wr-cover-hint,
.wr-upload-meta .name{
    color: #5a6b85;
}

/* ---------- 10. 移动端 layui 登记表单（type 页 h5） ---------- */
.Sign_in_h5 .layui-form-label{
    color: #5a6b85;
    font-weight: 500;
}
.Sign_in_h5 .layui-input,
.Sign_in_h5 .layui-textarea{
    border: 1px solid #dfe6f0;
    border-radius: 10px;
    background: #fbfcfe;
    color: #1a2233;
}
.Sign_in_h5 .layui-input:focus,
.Sign_in_h5 .layui-textarea:focus{
    border-color: #008de7;
    background: #fff;
    box-shadow: 0 0 0 3px rgba(0, 141, 231, .12);
}
.Sign_in_h5 .submit_btn{
    background: linear-gradient(135deg, #008de7, #00c6ff);
    border-radius: 12px;
    box-shadow: 0 8px 20px rgba(0, 141, 231, .30);
    letter-spacing: 2px;
}