body {

    font-family: "Microsoft YaHei", Arial;

    background-image:url("/static/background.jpg");

    background-size:cover;

    background-position:center;

    background-attachment:fixed;

    background-repeat:no-repeat;

    margin:0;

    padding:0;

    width:100%;

    color:#333;

}


html,body {

    width:100%;

    overflow-x:hidden;

}



/* =====================
顶部导航
===================== */


.navbar {

    height:70px;

    background:#111827;

    color:white;

    display:flex;

    align-items:center;

    justify-content:space-between;

    padding:0 40px;

}



.logo {

    font-size:24px;

    font-weight:bold;

}



.nav-links a {

    color:white;

    text-decoration:none;

    margin-left:25px;

}



.nav-links a:hover {

    color:#38bdf8;

}



.nav-links span {

    margin-left:20px;

    color:#ddd;

}





/* =====================
标题
===================== */


h1 {

    text-align:center;

    padding:25px;

    margin:0;

}



h2 {

    margin:35px 40px 15px;

    border-left:5px solid #2563eb;

    padding-left:12px;

}





/* =====================
通用视频卡片
===================== */


.work-box {

    background:white;

    width:360px;

    display:inline-block;

    vertical-align:top;

    margin:15px;

    padding:10px;

    border-radius:15px;

    box-shadow:

    0 5px 15px rgba(0,0,0,0.08);

}



.work-box:hover {

    transform:translateY(-8px);

    box-shadow:

    0 10px 25px rgba(0,0,0,0.15);

}



.work-box h3 {

    font-size:18px;

    margin:12px 5px;

}



.work-box h3 a {

    color:#111;

    text-decoration:none;

}



.work-box h3 a:hover {

    color:#2563eb;

}



.work-box p {

    color:#666;

    line-height:1.6;

}





/* =====================
视频
===================== */


video {

    max-width:100%;

}



.work-box video,
.work-card video {

    width:100%;

    aspect-ratio:16 / 9;

    object-fit:cover;

    border-radius:12px;

    cursor:pointer;

}





/* =====================
Banner
===================== */


.banner {

    position:relative;

    width:100vw;

    height:500px;

    overflow:hidden;

    display:flex;

    align-items:center;

    justify-content:center;

}



.banner-video {

    position:absolute;

    top:0;

    left:0;

    width:100%;

    height:100%;

    object-fit:cover;

    z-index:0;

}



.banner-content {

    position:relative;

    z-index:2;

    color:white;

    text-align:center;

}



.banner::after {

    content:"";

    position:absolute;

    inset:0;

    background:rgba(0,0,0,0.15);

    z-index:1;
}



.banner h1 {

    font-size:42px;

}



.banner p {

    font-size:20px;

}



.banner a {

    display:inline-block;

    margin:20px 10px;

    padding:12px 25px;

    background:white;

    color:#2563eb;

    border-radius:30px;

    text-decoration:none;

    font-weight:bold;

}





/* =====================
免费视频区域
===================== */


.home-section {

    padding:40px;

}



.home-section h2 {

    margin-left:0;

}



.card-container {

    width:100%;

    display:flex;

    flex-wrap:wrap;

    gap:20px;

}




/* =====================
作品展示
===================== */


.works-container {

    display:grid;

    grid-template-columns:repeat(3,1fr);

    gap:20px;

    padding:30px;

}


.work-card {


    background:white;

    padding:10px;

    border-radius:15px;

}



.work-card video {

    width:100%;

    aspect-ratio:16 / 9;

    object-fit:cover;

    border-radius:12px;

}



.work-card h3 a {

    color:#111;

    text-decoration:none;

}





/* =====================
标题+查看全部
===================== */


.section-title {

    display:flex;

    align-items:center;

    gap:25px;

    margin:35px 40px 15px;

}



.section-title h2 {

    margin:0;

}



.section-title a {

    color:#2563eb;

    text-decoration:none;

    font-size:16px;

}



.section-title a:hover {

    color:#111827;

    text-decoration:underline;

}





/* =====================
视频详情页
===================== */


.watch-page {

    width:90%;

    max-width:1200px;

    margin:40px auto;

    background:white;

    padding:30px;

    border-radius:15px;

}



.watch-page h1 {

    text-align:left;

    padding:0;

    margin-bottom:25px;

}


.watch-video {

    width:auto;

    max-width:100%;

    max-height:80vh;

    object-fit:contain;

    display:block;

    margin:auto;

    border-radius:15px;

}
/* 作品标题栏 */

.works-title {

    display:flex;

    align-items:center;

    justify-content:space-between;

    margin:35px 40px 15px;

}


.works-title h2 {

    margin:0;

}


.works-title a {

    background:#111827;

    color:white;

    padding:10px 25px;

    border-radius:25px;

    text-decoration:none;

    font-size:16px;

}


.works-title a:hover {

    background:#2563eb;

}
.page-title{

text-align:center;

color:white;

font-size:32px;

margin:30px;

text-shadow:0 2px 10px #000;

}
.watch-container{

max-width:1000px;

margin:40px auto;

padding:20px;

}



.watch-video-box{

background:#000;

border-radius:15px;

}





.video-info{

background:#111;

color:#ddd;

padding:25px;

margin-top:20px;

border-radius:12px;

}


.video-info h2{

margin-top:0;

}
/* 视频分类导航 */

.category-nav a{

    font-size:18px;

    font-weight:600;

    color:#1f2937;

    text-decoration:none;

    margin:0 8px;

}


.category-nav a:hover{

    color:#2563eb;

}
/* =====================
视频分类导航
===================== */

.category-nav{

    text-align:center;

    margin:30px;

}


.category-nav a{

    font-size:20px;

    font-weight:600;

    color:#1f2937;

    text-decoration:none;

    margin:0 10px;

    transition:.3s;

}


.category-nav a:hover{

    color:#2563eb;

}
/* 视频分类 */

div[style*="text-align:center"] a{

    font-size:22px !important;

    color:#2563eb !important;

    font-weight:700 !important;

    text-decoration:none;

    margin:0 10px;

}


div[style*="text-align:center"] a:hover{

    color:#ef4444 !important;

}
/* 标题和返回首页同一行 */

.title-row{

    display:flex;

    align-items:center;

    gap:30px;

    margin:30px 40px;

}


.title-row h1{

    margin:0;

    padding:0;

}


.back-home{

    font-size:18px;

    font-weight:600;

    color:#2563eb;

    text-decoration:none;

}


.back-home:hover{

    color:#ef4444;

}
/* =====================
评论区域
===================== */


.comment-box {

    margin-top:40px;

    padding:25px;

    background:#f8fafc;

    border-radius:15px;

}



.comment-box h2 {

    margin-bottom:20px;

}



.comment-item {

    background:white;

    padding:18px;

    margin-bottom:15px;

    border-radius:12px;

    box-shadow:0 2px 8px rgba(0,0,0,0.08);

}



.comment-user {

    font-size:16px;

    font-weight:bold;

    color:#2563eb;

    margin-bottom:10px;

}



.comment-content {

    font-size:16px;

    color:#333;

    line-height:1.6;

}



.comment-time {

    margin-top:10px;

    font-size:13px;

    color:#888;

}
/* =====================
   登录注册页面
===================== */

.auth-page{

    background:rgb(10, 40, 73) !important;

    min-height:100vh;

    display:flex;

    justify-content:center;

    align-items:center;

}


.auth-page{

min-height:100vh;

display:flex;

justify-content:center;

align-items:center;

background:
linear-gradient(
135deg,
#020617,
#111827,
#1e293b
);

}



.auth-box{

width:380px;

padding:40px;

background:rgba(255,255,255,0.08);

backdrop-filter:blur(15px);

border-radius:20px;

box-shadow:
0 20px 50px rgba(0,0,0,0.5);

text-align:center;

color:white;

}



.auth-box h1{

font-size:32px;

margin-bottom:10px;

}



.auth-box h2{

margin-bottom:30px;

}



.auth-box input{

width:90%;

padding:14px;

margin:10px;

border-radius:10px;

border:none;

font-size:16px;

outline:none;

}



.auth-box button{

width:95%;

padding:14px;

margin-top:20px;

border:none;

border-radius:30px;

background:#2563eb;

color:white;

font-size:18px;

cursor:pointer;

}



.auth-box button:hover{

background:#1d4ed8;

}



.auth-box a{

color:#60a5fa;

text-decoration:none;

}



.auth-box p{

margin-top:25px;

}
/* =====================
   用户中心
===================== */


.user-page{

min-height:100vh;

display:flex;

justify-content:center;

align-items:center;

background:
linear-gradient(
135deg,
#020617,
#111827,
#1e293b
);

}



.user-card{

width:450px;

padding:40px;

background:rgba(255,255,255,0.08);

backdrop-filter:blur(15px);

border-radius:25px;

box-shadow:
0 20px 50px rgba(0,0,0,0.5);

color:white;

text-align:center;

}



.user-card h1{

font-size:32px;

}



.user-card h2{

margin:20px 0;

}



.user-info{

background:rgba(255,255,255,0.08);

padding:20px;

border-radius:15px;

font-size:18px;

}



.user-info span{

color:#60a5fa;

font-weight:bold;

}



.user-buttons{

margin-top:30px;

display:flex;

flex-direction:column;

gap:15px;

}



.user-buttons a{

padding:12px;

border-radius:25px;

background:#2563eb;

color:white;

text-decoration:none;

}



.user-buttons a:hover{

background:#1d4ed8;

}
/* 客服区域 */

.service-box{

max-width:800px;

width:80%;

margin:80px auto 40px;

padding:40px;

background:rgba(255,255,255,0.65);

border-radius:20px;

color:#1f2937;

text-align:center;

backdrop-filter:blur(12px);

box-shadow:0 10px 30px rgba(0,0,0,0.12);

}


.service-box h2{

font-size:28px;

margin-bottom:20px;

}


.service-item{

margin:15px;

font-size:18px;

}


.service-item span{

color:#60a5fa;

font-weight:bold;

}


.service-tip{

margin-top:25px;

color:#04101f;

}
.footer-links{

text-align:center;

margin:30px auto;

}


.footer-links a{

color:#475569;

text-decoration:none;

margin:0 10px;

}


.footer-links a:hover{

color:#2563eb;

}
.admin-btn{

display:inline-block;

margin-left:15px;

padding:8px 18px;

background:linear-gradient(135deg,#f59e0b,#ef4444);

color:white;

border-radius:20px;

text-decoration:none;

font-weight:bold;

box-shadow:0 4px 12px rgba(0,0,0,0.2);

transition:0.3s;

}


.admin-btn:hover{

transform:translateY(-2px);

box-shadow:0 8px 18px rgba(0,0,0,0.3);

}
.admin-container{

max-width:1000px;

margin:60px auto;

padding:40px;

text-align:center;

}



.admin-container h1{

font-size:36px;

}



.admin-welcome{

color:#64748b;

margin-bottom:40px;

}



.admin-grid{

display:grid;

grid-template-columns:repeat(auto-fit,minmax(220px,1fr));

gap:25px;

}



.admin-card{

background:rgba(255,255,255,0.85);

padding:30px;

border-radius:20px;

text-decoration:none;

color:#1e293b;

box-shadow:0 10px 25px rgba(0,0,0,0.12);

transition:0.3s;

}



.admin-card:hover{

transform:translateY(-5px);

box-shadow:0 15px 35px rgba(0,0,0,0.2);

}



.admin-card div{

font-size:40px;

}



.admin-card h3{

margin:15px 0 10px;

}



.admin-card p{

font-size:14px;

color:#64748b;

}
/* =========================
后台页面美化
========================= */


.admin-page,
.watch-container{

max-width:1100px;

margin:50px auto;

padding:35px;

background:rgba(255,255,255,0.85);

border-radius:25px;

box-shadow:0 15px 40px rgba(0,0,0,0.12);

}



/* 后台标题 */

.admin-page h1,
.watch-container h1{

text-align:center;

font-size:32px;

margin-bottom:30px;

}



/* 后台按钮 */

.admin-btn,
button,
.watch-container a{

display:inline-block;

padding:10px 20px;

border-radius:20px;

background:#2563eb;

color:white;

text-decoration:none;

border:none;

cursor:pointer;

transition:.3s;

}



.admin-btn:hover,
button:hover,
.watch-container a:hover{

transform:translateY(-2px);

opacity:.85;

}



/* 表格 */


table{

width:100%;

border-collapse:collapse;

margin-top:25px;

background:white;

border-radius:15px;

overflow:hidden;

}



th{

background:#1e293b;

color:white;

padding:14px;

}



td{

padding:12px;

border-bottom:1px solid #eee;

text-align:center;

}



tr:hover{

background:#f8fafc;

}



/* 输入框 */


input,
select{

padding:10px 15px;

border-radius:12px;

border:1px solid #ddd;

margin:5px;

font-size:15px;

}



/* 上传页面 */


form{

background:white;

padding:30px;

border-radius:20px;

box-shadow:0 10px 25px rgba(0,0,0,.1);

}



form p{

margin:18px 0;

}
/* 用户管理页面 */

.watch-container{

max-width:1100px;

margin:50px auto;

padding:40px;

background:rgba(255,255,255,0.9);

border-radius:25px;

box-shadow:0 15px 40px rgba(0,0,0,0.15);

}


.admin-title{

text-align:center;

font-size:32px;

margin-bottom:10px;

}


.admin-tip{

text-align:center;

color:#64748b;

margin-bottom:30px;

}


.admin-table{

width:100%;

border-collapse:collapse;

background:white;

border-radius:15px;

overflow:hidden;

}


.admin-table th{

background:#1e293b;

color:white;

padding:15px;

}


.admin-table td{

padding:12px;

text-align:center;

border-bottom:1px solid #eee;

}


.admin-table tr:hover{

background:#f8fafc;

}


.admin-btn{

display:inline-block;

padding:8px 18px;

background:#2563eb;

color:white;

border-radius:20px;

text-decoration:none;

}


.admin-btn:hover{

opacity:.8;

}