@charset "utf-8";

/* ========================================
   TmVod - 原创视频模板主样式
   设计：深色主题 + 青绿色调 + 响应式布局
   ======================================== */

/* --- 全局重置 --- */
*,*::before,*::after { box-sizing:border-box; margin:0; padding:0; }
html { -webkit-text-size-adjust:100%; }
body {
    font-family:-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,"Helvetica Neue",Arial,"Microsoft YaHei",sans-serif;
    font-size:14px;
    line-height:1.6;
    overflow-x:hidden;
}
a { color:inherit; text-decoration:none; transition:color .2s,opacity .2s; }
a:hover { opacity:.85; }
ul,ol { list-style:none; }
img { max-width:100%; display:block; }
input,button,textarea { font-family:inherit; font-size:inherit; outline:none; border:none; }
h1,h2,h3,h4,h5,h6 { font-weight:600; }

/* --- 主容器 --- */
.tm-container {
    width:100%;
    max-width:1200px;
    margin:0 auto;
    padding:0 16px;
}

/* --- 文字省略 --- */
.tm-ellipsis {
    overflow:hidden;
    white-space:nowrap;
    text-overflow:ellipsis;
}
.tm-ellipsis-2 {
    display:-webkit-box;
    -webkit-line-clamp:2;
    -webkit-box-orient:vertical;
    overflow:hidden;
    line-height:1.5em;
    max-height:3em;
}

/* ========================================
   顶部导航栏
   ======================================== */
.tm-header {
    position:sticky;
    top:0;
    z-index:1000;
    backdrop-filter:blur(12px);
    -webkit-backdrop-filter:blur(12px);
}

.tm-header-inner {
    display:flex;
    align-items:center;
    gap:16px;
    height:52px;
}

.tm-logo {
    flex-shrink:0;
    font-size:18px;
    font-weight:700;
    letter-spacing:-.5px;
    white-space:nowrap;
}
.tm-logo a { display:flex; align-items:center; gap:8px; }
.tm-logo img {
    width:24px;
    height:24px;
    max-width:24px;
    max-height:24px;
    flex-shrink:0;
    object-fit:contain;
    border-radius:6px;
}

.tm-search {
    flex-shrink:0;
    margin-left:auto;
    display:flex;
    align-items:center;
}
.tm-search-form {
    display:flex;
    align-items:center;
    gap:0;
}
.tm-search-input {
    width:150px;
    padding:6px 10px;
    border-radius:6px 0 0 6px;
    font-size:13px;
    transition:width .3s;
}
.tm-search-input:focus { width:190px; }
.tm-search-btn {
    padding:6px 14px;
    border-radius:0 6px 6px 0;
    font-size:13px;
    cursor:pointer;
    transition:opacity .2s;
}
.tm-search-btn:hover { opacity:.85; }

/* --- 收藏提示栏 --- */
.tm-notice {
    display:flex;
    align-items:center;
    gap:8px;
    padding:6px 12px;
    border-radius:6px;
    margin:8px auto;
    max-width:1200px;
}
.tm-notice-icon { flex-shrink:0; font-size:14px; }
.tm-notice-text { font-size:12px; flex:1; }
.tm-notice-link { font-size:12px; white-space:nowrap; }

/* ========================================
   首页分类区块
   ======================================== */
.tm-main { padding:4px 0 24px; }

.tm-category {
    margin-bottom:14px;
}

.tm-cat-header {
    display:flex;
    align-items:center;
    justify-content:space-between;
    margin-bottom:8px;
    padding:0 2px;
}
.tm-cat-title {
    font-size:15px;
    font-weight:700;
    letter-spacing:-.3px;
}
.tm-cat-title a { display:flex; align-items:center; gap:6px; }
.tm-cat-title .tm-cat-bar {
    display:inline-block;
    width:3px;
    height:14px;
    border-radius:2px;
}
.tm-cat-more {
    font-size:12px;
    padding:2px 8px;
    border-radius:6px;
    transition:background .2s;
}
.tm-cat-more:hover { background:rgba(255,255,255,.06); }

/* --- 分类快捷导航（首页顶部） --- */
.tm-type-nav {
    display:flex;
    flex-wrap:wrap;
    gap:8px;
    margin-top:8px;
    margin-bottom:8px;
}
.tm-type-nav a {
    display:inline-block;
    padding:5px 14px;
    border-radius:6px;
    font-size:13px;
    white-space:nowrap;
    transition:all .2s;
}

/* --- 顶部通栏广告（#aahendtop 内容由 aa.js 注入，960x60 图，宽高比 16:1） --- */
#aahendtop {
    display:block;
    width:100%;
    aspect-ratio:16/1;
    overflow:hidden;
    border-radius:8px;
    margin:8px 0;
    background:#161b22;
}
#aahendtop:empty { display:none; }
#aahendtop li,#aahendtop a {
    display:block;
    width:100%;
    height:100%;
}
#aahendtop img {
    display:block;
    width:100%;
    height:100%;
    object-fit:cover;
}

/* ========================================
   视频列表 - 卡片网格（封面横版 16:9）
   ======================================== */
.tm-video-grid {
    display:grid;
    grid-template-columns:repeat(5,minmax(0,1fr));
    gap:12px;
}

.tm-video-card {
    border-radius:8px;
    overflow:hidden;
    transition:transform .25s,box-shadow .25s;
}
.tm-video-card:hover {
    transform:translateY(-3px);
    box-shadow:0 6px 18px rgba(0,0,0,.3);
}

.tm-video-pic {
    position:relative;
    display:block;
    width:100%;
    height:0;
    padding-top:56.25%;
    background-color:#1a1a2e;
    background-size:cover;
    background-position:center;
    overflow:hidden;
}
.tm-video-pic img {
    position:absolute;
    top:0; left:0;
    width:100%; height:100%;
    object-fit:cover;
    transition:transform .35s;
}
.tm-video-card:hover .tm-video-pic img { transform:scale(1.06); }

.tm-play-icon {
    position:absolute;
    top:0; left:0;
    width:100%; height:100%;
    display:flex;
    align-items:center;
    justify-content:center;
    opacity:0;
    transition:opacity .25s;
}
.tm-video-card:hover .tm-play-icon { opacity:1; }
.tm-play-icon::after {
    content:"";
    width:32px; height:32px;
    border-radius:50%;
    background:rgba(45,212,191,.9);
    position:relative;
}
.tm-play-icon::before {
    content:"";
    position:absolute;
    top:50%;
    left:50%;
    width:0; height:0;
    border-left:10px solid #0d1117;
    border-top:6px solid transparent;
    border-bottom:6px solid transparent;
    transform:translate(-50%,-50%);
    z-index:2;
}

.tm-video-note {
    position:absolute;
    bottom:0; left:0;
    width:100%;
    padding:3px 6px;
    background:linear-gradient(transparent,rgba(0,0,0,.7));
    font-size:11px;
    overflow:hidden;
    white-space:nowrap;
    text-overflow:ellipsis;
}

.tm-video-info { padding:6px 8px 8px; }
.tm-video-name {
    font-size:13px;
    font-weight:600;
    margin-bottom:2px;
}
.tm-video-meta {
    display:flex;
    align-items:center;
    gap:10px;
    font-size:11px;
}

/* ========================================
   分页导航
   ======================================== */
.tm-pagination {
    display:flex;
    flex-wrap:wrap;
    justify-content:center;
    align-items:center;
    gap:6px;
    padding:12px 0;
}
.tm-pagination a,.tm-pagination span {
    display:inline-flex;
    align-items:center;
    justify-content:center;
    min-width:30px;
    height:30px;
    padding:0 8px;
    border-radius:6px;
    font-size:13px;
    transition:all .2s;
}
.tm-pagination a { cursor:pointer; }
.tm-pagination a:hover { opacity:.85; }
.tm-pagination .current { font-weight:600; }
.tm-pagination .disabled { cursor:not-allowed; opacity:.4; }

.tm-page-jump {
    display:flex;
    align-items:center;
    gap:6px;
    margin-left:8px;
}
.tm-page-input {
    width:54px;
    height:30px;
    text-align:center;
    border-radius:6px;
    font-size:13px;
}
.tm-page-input::-webkit-outer-spin-button,
.tm-page-input::-webkit-inner-spin-button { -webkit-appearance:none; margin:0; }
.tm-page-input[type=number] { -moz-appearance:textfield; }
.tm-page-go {
    height:30px;
    padding:0 12px;
    border-radius:6px;
    cursor:pointer;
    font-size:12px;
}

/* ========================================
   底部
   ======================================== */
.tm-footer {
    margin-top:8px;
    padding:14px 0;
}
.tm-footer-inner {
    max-width:1200px;
    margin:0 auto;
    padding:0 16px;
}

.tm-friend-links {
    margin-bottom:12px;
}
.tm-friend-title {
    font-size:14px;
    margin-bottom:8px;
}
.tm-friend-list {
    display:flex;
    flex-wrap:wrap;
    gap:6px;
}
.tm-friend-list a {
    display:inline-block;
    padding:3px 10px;
    border-radius:6px;
    font-size:12px;
    transition:all .2s;
    white-space:nowrap;
}
.tm-friend-list a:hover { opacity:.85; }

.tm-copyright {
    text-align:center;
    font-size:12px;
    line-height:1.8;
    padding:8px 0;
}

/* ========================================
   播放页
   ======================================== */
.tm-play-page { padding:8px 0 12px; }

.tm-breadcrumb {
    display:flex;
    align-items:center;
    gap:6px;
    font-size:13px;
    padding:8px 0;
    white-space:nowrap;
    overflow:hidden;
}
.tm-breadcrumb a { flex-shrink:0; }
.tm-breadcrumb span { opacity:.6; flex-shrink:0; }
.tm-breadcrumb .tm-breadcrumb-name {
    opacity:1;
    display:block;
    flex:1 1 auto;
    min-width:0;
    max-width:100%;
    overflow:hidden;
    text-overflow:ellipsis;
    white-space:nowrap;
}

.tm-player-wrap {
    position:relative;
    width:100%;
    padding-bottom:56.25%;
    height:0;
    overflow:hidden;
    border-radius:10px;
}
.tm-player-wrap iframe,.tm-player-wrap video,.tm-player-wrap embed,.tm-player-wrap>div {
    position:absolute;
    top:0; left:0;
    width:100%; height:100%;
}
.tm-player-wrap iframe,.tm-player-wrap video,.tm-player-wrap embed {
    object-fit:contain;
}

.tm-play-title {
    display:flex;
    align-items:center;
    gap:8px;
    padding:10px 12px;
    border-radius:8px;
    margin-bottom:10px;
}
.tm-play-title h1 { font-size:16px; flex:1; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
.tm-play-nav { font-size:13px; flex-shrink:0; }
.tm-play-nav a { margin:0 4px; }

.tm-play-lines {
    padding:12px;
    border-radius:8px;
    margin:10px 0;
}
.tm-play-lines-title { font-size:13px; margin-bottom:10px; padding-bottom:8px; }
.tm-play-lines-list { display:flex; flex-wrap:wrap; gap:8px; }
.tm-play-line-btn {
    display:inline-block;
    padding:6px 16px;
    border-radius:6px;
    font-size:13px;
    transition:all .2s;
}

.tm-play-tags { display:flex; flex-wrap:wrap; gap:6px; margin:8px 0; }

.tm-tag {
    display:inline-block;
    max-width:100%;
    padding:2px 10px;
    border-radius:6px;
    font-size:12px;
    line-height:1.5;
    overflow:hidden;
    text-overflow:ellipsis;
    white-space:nowrap;
    vertical-align:middle;
}

/* 播放页详情展开面板 */
.tm-play-detail {
    display:none;
    background:#161b22;
    border:1px solid #21262d;
    border-radius:8px;
    padding:12px 16px;
    margin:10px 0;
}
.tm-play-detail.open { display:block; }
.tm-play-detail .tm-detail-meta { margin-bottom:10px; }

/* 播放页右侧推荐 */
.tm-play-layout { display:flex; gap:14px; }
.tm-play-left { flex:1; min-width:0; }
.tm-play-right { width:320px; flex-shrink:0; }
.tm-play-right .tm-video-grid { grid-template-columns:repeat(2,minmax(0,1fr)); gap:8px; }
.tm-play-right .tm-video-name { font-size:12px; }

/* ========================================
   搜索页
   ======================================== */
.tm-search-info {
    padding:12px 16px;
    border-radius:8px;
    margin-bottom:16px;
    font-size:15px;
}
.tm-search-info strong { font-size:18px; }

/* ========================================
   分类列表页
   ======================================== */
.tm-type-header {
    padding:16px;
    border-radius:8px;
    margin-bottom:16px;
}
.tm-type-header h1 { font-size:22px; font-weight:700; margin:0; }

/* ========================================
   详情页
   ======================================== */
.tm-detail { padding:12px 0; }
.tm-detail-layout { display:flex; gap:20px; }
.tm-detail-left { width:260px; flex-shrink:0; }
.tm-detail-right { flex:1; min-width:0; }
.tm-detail-pic { border-radius:10px; overflow:hidden; }
.tm-detail-pic .tm-video-pic {
    width:100%; height:auto;
    padding-top:135%;
    border-radius:10px;
}
.tm-detail-info { padding:0 4px; }
.tm-detail-info h1 { font-size:24px; margin-bottom:12px; }
.tm-detail-meta { margin-bottom:12px; }
.tm-detail-meta li { padding:5px 0; font-size:14px; }
.tm-detail-meta li strong { display:inline-block; min-width:70px; }
.tm-detail-content { padding:12px 0; font-size:15px; line-height:1.8; }
.tm-detail-content p { margin-bottom:10px; }

/* ========================================
   响应式
   ======================================== */

/* 平板 */
@media(max-width:992px) {
    .tm-video-grid { grid-template-columns:repeat(4,minmax(0,1fr)); }
    .tm-play-layout { flex-direction:column; }
    .tm-play-right { width:100%; }
    .tm-play-right .tm-video-grid { grid-template-columns:repeat(4,minmax(0,1fr)); }
    .tm-detail-layout { flex-direction:column; }
    .tm-detail-left { width:180px; margin:0 auto; }
}

/* 手机 */
@media(max-width:768px) {
    .tm-container { padding:0 10px; }
    /* H5 头部：仅 logo + 搜索一行 */
    .tm-header-inner { height:48px; gap:10px; }
    .tm-logo { font-size:16px; flex:1; min-width:0; }
    .tm-logo span { display:block; overflow:hidden; white-space:nowrap; text-overflow:ellipsis; }
    .tm-search { margin-left:auto; }
    .tm-search-input { width:110px; }
    .tm-search-input:focus { width:150px; }

    /* H5 视频列表：一排2个，封面横版 */
    .tm-video-grid { grid-template-columns:repeat(2,minmax(0,1fr)); gap:10px; }
    .tm-video-pic { border-radius:8px 8px 0 0; }
    .tm-video-info { padding:5px 6px 6px; }
    .tm-video-name { font-size:12px; }
    .tm-video-meta { font-size:10px; gap:6px; }
    .tm-cat-title { font-size:14px; }

    /* 移动端分类胶囊：一排4个 */
    .tm-type-nav { gap:4px; }
    .tm-type-nav a {
        flex:1 1 calc(25% - 3px);
        max-width:calc(25% - 3px);
        padding:5px 2px;
        font-size:12px;
        text-align:center;
        overflow:hidden;
        white-space:nowrap;
        text-overflow:ellipsis;
    }

    /* 播放页推荐：H5 一排2个 */
    .tm-play-right .tm-video-grid { grid-template-columns:repeat(2,minmax(0,1fr)); gap:10px; }

    .tm-detail-left { width:120px; }
    .tm-detail-info h1 { font-size:16px; }

    /* 移动端分类标题栏：整体缩小、内边距缩小 */
    .tm-type-header {
        padding:10px 12px;
        margin-bottom:10px;
    }
    .tm-type-header h1 { font-size:16px; }

    .tm-pagination a,.tm-pagination span { min-width:28px; height:28px; font-size:12px; }
}

@media(max-width:360px) {
    .tm-video-grid { gap:6px; }
    .tm-video-info { padding:4px 5px 5px; }
    .tm-video-name { font-size:11px; }
    .tm-pagination a,.tm-pagination span { min-width:26px; height:26px; padding:0 5px; }
}