/* violet theme */
body{ background-color: #fafafa; }

/* header nav */
.header .navbar-header{ height: 56px; padding: 8px 0; }
.navbar-brand-text{
    display: block;
    height: 40px;
    line-height: 40px;
    font-size: 24px;
    font-weight: 700;
    letter-spacing: 2px;
    color: #fff;
}
.navbar-brand-text:hover{ color: #fff; }
.header .navbar-nav{ float: left; margin-left: 18px; }
.header .navbar-nav > li{ line-height: 40px; padding: 0; }
.header .navbar-nav > li + li:before{ display: none; }
.header .navbar-nav > li > a{
    height: 40px;
    line-height: 40px;
    padding: 0 14px;
    font-size: 15px;
    color: rgba(255,255,255,.88);
}
.header .navbar-nav > li > a:hover,
.header .navbar-nav > li.active > a{ color: #fff; font-weight: 700; }

/* header search */
.header-search{
    position: relative;
    float: right;
    width: 250px;
    height: 34px;
    margin-top: 3px;
}
.header-search-input{
    width: 100%;
    height: 34px;
    padding: 0 60px 0 14px;
    border: 0 none;
    border-radius: 17px;
    font-size: 13px;
    color: #333;
    background-color: #fff;
}
.header-search-btn{
    position: absolute;
    top: 0;
    right: 0;
    width: 56px;
    height: 34px;
    border: 0 none;
    border-radius: 0 17px 17px 0;
    font-size: 13px;
    color: #fff;
    cursor: pointer;
    background-color: #26645d;
}
.header-search-btn:hover{ background-color: #1c4b45; }

/* tag wall */
.tag-wall{ padding: 6px 15px 14px 20px; }
.tag-wall a{
    display: inline-block;
    margin: 8px 8px 0 0;
    padding: 0 13px;
    height: 28px;
    line-height: 28px;
    font-size: 13px;
    color: #666;
    background-color: #f5f5f5;
    border-radius: 14px;
}
.tag-wall a:hover{ color: #fff; background-color: #26645d; }

/* grid tag wall (same as reference) */
.grid-container2{
    width: 100%;
    padding: 2px;
    overflow: hidden;
    display: inline-block;
    box-shadow: 0 1px 1px 0 rgba(0,0,0,.05);
}
.grid-container2 a{
    width: 6%;
    float: left;
    border-radius: 3px;
    line-height: 30px;
    height: 30px;
    text-align: center;
    font-size: 12px;
    color: #fff;
    display: inline-block;
    background-color: #333;
    margin: 1px;
    transition-duration: .3s;
}
.grid-container2 a:hover{ background: #DC3545; color: #FFF; }

/* 分类导航（参考站 .youmu-app） */
.youmu-app{ background: #fff; }
.youmu-app .area{ overflow: hidden; }
.youmu-app dl{
    float: left;
    width: 100%;
    padding: 15px 0;
    border-bottom: 1px solid #26645d;
    margin-bottom: 2px;
}
.youmu-app dt,
.youmu-app dd{ float: left; line-height: 25px; text-align: center; }
.youmu-app dt{ width: 12%; color: #26645d; font-size: 16px; }
.youmu-app dd{ width: 11%; font-size: 16px; }
.youmu-app dt a{ color: #26645d; }
.youmu-app dd a{ color: #666; }
.youmu-app dt a:hover,
.youmu-app dd a:hover{ color: #e74c3c; }
.youmu-app dt::after{
    content: "";
    position: absolute;
    margin: 5px 25px 0;
    width: 1px;
    height: 20px;
    background: #26645d;
}
.youmu-app dt .cur,
.youmu-app dd .cur{ color: #e74c3c; font-weight: 700; }

/* detail */
.appel.appel-first{ margin-top: 0; }
.detail{ position: relative; }
.detail-cover{ position: absolute; left: 0; top: 0; width: 100%; height: 100%; z-index: 1; }
.detail-cover ~ * a{ position: relative; z-index: 2; }
.detail-info h1{ font-size: 30px; line-height: 35px; font-weight: 400; }
.detail-info h1 small{ font-size: 16px; margin-left: 20px; font-weight: 400; color: #26645d; }
.appel > .detail-content{ padding: 8px 20px 14px; line-height: 28px; color: #666; }
.appel > .detail-content p{ margin-bottom: 10px; }
.appel > .appel-body.detail-content{ padding: 8px 15px 12px; line-height: 28px; color: #666; }
.appel > .appel-body.detail-content p{ margin-bottom: 10px; }
.tab-content > .tab-pane.active{ display: block; opacity: 1; }
.detail-actor > li > label{ float: left; width: 56px; color: #999; }
.detail-actor > li.intro{ padding-top: 10px; }
.detail-info .detail-actor > li.intro p{ max-height: 96px; }

/* pagination 页码跳转 */
.pagination > li.page-jump{ display: inline-block; vertical-align: middle; }
.page-jump-input{
    width: 60px;
    height: 36px;
    margin: 0 4px;
    padding: 0 8px;
    border: 1px solid #ddd;
    border-radius: 3px;
    font-size: 14px;
    color: #333;
    text-align: center;
    vertical-align: middle;
    background-color: #fff;
}
.page-jump-btn{
    height: 36px;
    padding: 0 14px;
    border: 0 none;
    border-radius: 3px;
    font-size: 14px;
    color: #fff;
    vertical-align: middle;
    cursor: pointer;
    background-color: #26645d;
}
.page-jump-btn:hover{ background-color: #1c4b45; }

/* breadcrumbs */
.breadcrumbs{
    color: #999;
    font-size: 14px;
    font-weight: 400;
    line-height: 24px;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}
.breadcrumbs b{ display: inline; font-weight: 400; }
.breadcrumbs .sep{ padding: 0 5px; }
.breadcrumbs a{ color: #666; font-weight: 400; }
.breadcrumbs a:hover{ color: #26645d; }
.breadcrumbs span{ color: #999; }

/* play page */
#mac-player{
    width: 100%;
    height: 620px;
    background-color: #000;
    overflow: hidden;
    position: relative;
}
#mac-player > div{
    width: 100%;
    height: 100%;
    overflow: hidden;
    position: relative;
}
#mac-player iframe,
#mac-player video,
#mac-player .dplayer,
#mac-player .jwplayer,
#mac-player .artplayer,
#mac-player .mac-player{
    width: 100% !important;
    height: 100% !important;
    max-width: 100% !important;
    max-height: 100% !important;
    min-width: 100% !important;
    min-height: 100% !important;
    box-sizing: border-box;
    overflow: hidden !important;
}
/* 线路选择：带边框的标签按钮 */
.detail-source{ padding-bottom: 0; }
.detail-source .detail-tab{
    margin-bottom: 0;
    border-bottom: 0 none;
    background-color: #fff;
    text-align: left;
}
.detail-source .detail-tab > li{
    width: auto;
    float: none;
    display: inline-block;
    margin: 0 10px 8px 0;
    border: 0 none;
    background-color: transparent;
}
.detail-source .detail-tab > li > a,
.detail-source .detail-tab > li.active > a,
.detail-source .detail-tab > li.active > a:hover{
    display: inline-block;
    padding: 0 14px;
    font-size: 14px;
    font-weight: 400;
    line-height: 28px;
    color: #666;
    border: 1px solid #e0e0e0;
    background-color: #f7f7f7;
    border-radius: 3px;
}
.detail-source .detail-tab > li.active{ margin-top: 0; }
.detail-source .detail-tab > li.active > a,
.detail-source .detail-tab > li > a:hover{
    color: #fff;
    border-color: #26645d;
    background-color: #26645d;
}

/* article list */
.appel-body{ padding: 0 15px 10px; }

/* article detail */
.article-title{ padding: 24px 20px 0; font-size: 26px; line-height: 38px; color: #222; }
.article-meta{
    padding: 10px 20px 0;
    font-size: 13px;
    color: #999;
}
.article-meta span{ margin-right: 18px; }
.article-meta a{ color: #26645d; }
.article-content{ padding: 16px 20px 24px; line-height: 30px; color: #444; font-size: 15px; }
.article-content img{ max-width: 100%; height: auto; }
.article-content p{ margin-bottom: 14px; }

/* empty state */
.search-empty,
.list-empty{
    padding: 60px 20px;
    text-align: center;
    font-size: 15px;
    color: #999;
}

/* notice box */
.notice-box{
    padding: 50px 30px;
    text-align: center;
    background-color: #fff;
}
.notice-box .notice-title{
    margin-bottom: 16px;
    font-size: 22px;
    font-weight: 700;
    color: #222;
}
.notice-box p{ margin-bottom: 14px; color: #666; }
.notice-btn{
    display: inline-block;
    margin-top: 10px;
    padding: 0 30px;
    height: 40px;
    line-height: 40px;
    color: #fff;
    border-radius: 20px;
    background-color: #26645d;
}
.notice-btn:hover{ color: #fff; background-color: #26645d; }

/* 参考站：本站推荐 / 特色推荐 / 页脚友情链接（.txtguanggao / .txtguanggao2） */
.footer-links{ padding-top: 10px; }
.app{ margin: 10px 0; border-radius: 3px; background-color: #fff; }
h4{ line-height: 24px; color: #181818; }
.txtguanggao,
.txtguanggao2{
    width: 100%;
    overflow: hidden;
    display: block;
    margin: 0;
    padding: 0;
    list-style: none;
    box-shadow: 0 1px 1px 0 rgba(0,0,0,.05);
}
.txtguanggao a,
.txtguanggao2 a{
    width: 9.8%;
    float: left;
    margin: 1px;
    height: 30px;
    line-height: 30px;
    border-radius: 3px;
    text-align: center;
    font-size: 14px;
    color: #fff;
    display: inline-block;
    background-color: #ff999f;
    transition-duration: .3s;
}
.txtguanggao a:hover,
.txtguanggao2 a:hover{ background: #DC3545; color: #fff; }
.txtguanggao2 a{ background-color: #009a3a; }
.txtguanggao2 h4{ height: 24px; line-height: 24px; margin: 0; padding: 0; font-size: 16px; font-weight: 400; }
.txtguanggao2 li{ display: inline; }
.txtguanggao a:nth-child(1){ background-color: #ff3366; }
.txtguanggao a:nth-child(2){ background-color: #66cc00; }
.txtguanggao a:nth-child(3){ background-color: #33ccff; }
.txtguanggao a:nth-child(4){ background-color: #ffab00; }
.txtguanggao a:nth-child(5){ background-color: #ff00f1; }
.txtguanggao a:nth-child(6){ background-color: #fb3939; }
.txtguanggao a:nth-child(7){ background-color: #ff0000; }
.txtguanggao a:nth-child(8){ background-color: #2b36ff; }
.txtguanggao a:nth-child(9){ background-color: #00a90a; }
.txtguanggao a:nth-child(10){ background-color: #00b523; }
.txtguanggao a:nth-child(11){ background-color: #ff0040; }
.txtguanggao a:nth-child(12){ background-color: #ff7c00; }
.txtguanggao a:nth-child(13){ background-color: #006c82; }
.txtguanggao a:nth-child(14){ background-color: #77674b; }
.txtguanggao a:nth-child(15){ background-color: #996699; }
.txtguanggao a:nth-child(16){ background-color: #666666; }
.txtguanggao a:nth-child(17){ background-color: #006699; }
.txtguanggao a:nth-child(18){ background-color: #993333; }
.txtguanggao a:nth-child(19){ background-color: #993333; }
.txtguanggao a:nth-child(20){ background-color: #333300; }
.txtguanggao a:nth-child(21){ background-color: #663366; }
.txtguanggao a:nth-child(22){ background-color: #003300; }
.txtguanggao a:nth-child(23){ background-color: #003366; }
.txtguanggao a:nth-child(24){ background-color: #996699; }
.txtguanggao a:nth-child(25){ background-color: #666666; }
.txtguanggao a:nth-child(26){ background-color: #006699; }
.txtguanggao a:nth-child(27){ background-color: #993333; }
.txtguanggao a:nth-child(28){ background-color: #6593b7; }
.txtguanggao a:nth-child(29){ background-color: #96593e; }
.txtguanggao a:nth-child(30){ background-color: #3e9096; }

/* footer */
.footer p{ margin: 0; }
.footer a{ color: #999; }
.footer a:hover{ color: #fff; text-decoration: underline; }

/* 移动端专属结构（参考站首页） */
.top-notice,
.youmu-search{ display: none; }

/* responsive */
@media screen and (max-width: 800px){
    /* 参考站：移动端内容区全宽、无左右留白 */
    .container{ padding: 0; }
    /* 参考站：移动端头部仅有 logo，高 66px */
    .header,
    .header .navbar-header{ height: 56px; }
    .header .container{ padding: 0; }
    .header .navbar-header{ padding: 8px 0; }
    .navbar-brand-text{ font-size: 18px; letter-spacing: 1px; }
    .header .navbar-nav,
    .header-search{ display: none; }
    /* 参考站：区块容器 10px 上间距 + 5px 内边距 */
    .appel{ margin: 10px 0 0; padding: 5px; }
    .footer .container{ padding: 0; }
    /* 参考站：顶部提示横条 */
    .top-notice{
        display: block;
        width: 100%;
        max-width: 1100px;
        margin: 0 auto;
        padding: 10px;
        text-align: center;
        background-color: #999;
    }
    .top-notice a{ font-size: 18px; color: #ffff00; text-decoration: none; }
    /* 参考站：分类导航下方搜索框 */
    .youmu-search{ display: block; margin: 5px 0 0; overflow: hidden; }
    .youmu-search input{
        float: left;
        width: 70%;
        height: 36px;
        padding: 8px 0;
        border: 1px solid #26645d;
        border-radius: 0;
        font-size: 14px;
        color: #000;
        background-color: #fff;
    }
    .youmu-search button{
        float: right;
        width: 28%;
        height: 38px;
        padding: 0;
        border: 0 none;
        border-radius: 4px;
        font-size: 14px;
        color: #fff;
        background-color: #26645d;
    }
    .tag-wall{ padding: 6px 10px 12px; }
    .tag-wall a{ margin: 6px 6px 0 0; padding: 0 10px; height: 26px; line-height: 26px; font-size: 12px; }
    .list-group{ margin-right: 0; }
    .list-group > li{ padding-right: 0; }
    .appel-max{ padding-left: 0; padding-right: 0; }
    .appel > .detail-content,
    .appel > .appel-body.detail-content{ padding: 6px 10px 12px; }
    .detail-info h1{ font-size: 18px; line-height: 1; margin-bottom: 5px; }
    .detail-info h1 small{ display: block; margin: 5px 0 0 0; font-size: 12px; }
    .page-jump-input{ width: 50px; height: 32px; font-size: 13px; }
    .page-jump-btn{ height: 32px; padding: 0 10px; font-size: 13px; }
    /* 参考站详情播放线路 tab：固定 128px 宽、底部 2px 主题色下划线 */
    .detail-tab > li{ width: 128px; }
    .detail-tab > li > a{ padding: 10px 15px 8px; }
    .detail-tab > li.active{ margin-top: -2px; }
    .appel-body{ padding: 0 5px 10px; }
    .article-title{ padding: 16px 10px 0; font-size: 20px; }
    .article-meta{ padding: 8px 10px 0; }
    .article-content{ padding: 12px 10px 18px; }
    #mac-player{ height: 220px; }
}

/* 参考站断点：≤1000px 时分类方块改为每行 7 个，推荐方块每行 5 个 */
@media screen and (max-width: 1000px){
    .grid-container2 a{ width: 13.5%; font-size: 10px; }
    .txtguanggao a,
    .txtguanggao2 a{ width: 19.4%; font-size: 13px; }
}

/* 分类导航移动端断点（参考站 .youmu-app） */
@media screen and (max-width: 800px){
    .youmu-app .area{ width: 97%; margin: 0 auto; overflow: hidden; }
    .youmu-app dl{ padding: 6px 0; }
    .youmu-app dt{ width: 14%; line-height: 45px; font-size: 16px; font-weight: bold; }
    .youmu-app dd{ width: 21.5%; line-height: 25px; font-size: 14px; }
    .youmu-app dt::after{ margin: 16px 3.6% 0; }
    .youmu-app .first{ border-top: 0; }
}
@media screen and (max-width: 600px){
    .youmu-app .area{ width: 97%; margin: 0 auto; overflow: hidden; }
    .youmu-app dl{ padding: 5px 0; }
    .youmu-app dt{ width: 17%; line-height: 40px; font-size: 14px; font-weight: bold; }
    .youmu-app dd{ width: 20.5%; line-height: 23px; font-size: 14px; }
    .youmu-app dt::after{ margin: 14px 2.2% 0; }
}
@media screen and (max-width: 375px){
    .youmu-app dd{ width: 20.5%; line-height: 23px; font-size: 12px; }
    .youmu-app dt{ width: 17%; line-height: 45px; font-size: 12px; font-weight: bold; }
    .youmu-app dt::after{ margin: 16px 1.6% 0; }
}