/*
Theme Name: Wpsite-P
Theme URI: https://dedewp.com
Description: a simple wordpress site navigation theme
Author: 陌小雨
Author URI: https://dedewp.com
Version: 2.0
Tags: site navigation, 博客导航,网址导航
*/
body,ol,ul,h1,h2,h3,h4,h5,h6,p,th,td,dl,dd,form,fieldset,legend,input,textarea,select{margin:0;padding:0}
body{font-size:14px;font-family:"微软雅黑";background:#f1f5f8;-webkit-text-size-adjust:100%;}
a{color:#2d374b;text-decoration:none}
a:hover{color:#cd0200;text-decoration:underline}
em{font-style:normal}
li{list-style:none}
img{border:0;vertical-align:middle}
table{border-collapse:collapse;border-spacing:0}
p{word-wrap:break-word}

.fa{margin-right:5px;font-style:normal;font-size:14px;font-family:iconfont!important;-webkit-font-smoothing:antialiased;-webkit-text-stroke-width:.2px;-moz-osx-font-smoothing:grayscale}
.top-container{height:48px;padding:8px 0;}
.logo img{float:left;width:186px;height:48px}
#navbar{float:left;margin-left:14px}
#navbar ul li{float:left;margin-right:20px;line-height:48px;cursor:pointer}
#navbar ul li a{display:block;color:#444;line-height:48px}
.top-container .top-right{float:right}
.top-container .top-right .weather{float:left;margin-top:12px;margin-right:8px}
.top-container .top-right .login{margin-right:0}
.top-container .top-right li{float:left;margin-top:7px}
.top-container .top-right .login a{border:1px solid #177a6a;background:linear-gradient(#177a6a,#317c70);box-shadow:inset 0 1px 0 rgba(23,122,106,.08),0 1px 0 rgba(23,122,106,.3);color:#fff;text-shadow:0 -1px 0 rgba(0,0,0,.1)}
.top-container .top-right li a{display:block;padding:0;width:50px;height:32px;text-align:center;line-height:32px}
.header{background:#fff}
.container{position:relative;margin:0 auto;width: 1200px;padding-left: 20px;padding-right: 20px;}
.search-tools #search-container{height:108px;text-align:center;font-size:0;position:relative;top: 106px;z-index:10;}
.search-tools .left-div{float:left;margin-top:12px}
.search-tools .left-div #search-category{width:280px}
.search-tools .left-div #search-category span{float:left;margin-top:8px;width:70px;height:28px;color:#fff;letter-spacing:2px;font-size:15px;font-family:'微软雅黑';line-height:28px;cursor:pointer}
.search-tools .left-div #search-category span:nth-of-type(1){margin-left:0}
.search-tools .left-div #search-category span:nth-of-type(4n){margin-right:0}
.search-tools .left-div #search-category .active{background-color:#f85d70;color:#fff}
.search-tools .right-div{float:right;margin-top:10px}
.search-tools .right-div #input-container{position:relative}
.search-tools .right-div #input-container #search-input{box-sizing:border-box;margin:0 auto;padding:0 10px;width:616px;height:42px;outline:0;border:0;border:1px solid #d9d9d9;background-color:#fff;letter-spacing:1px;font-size:14px;line-height:42px}
.search-tools .right-div #input-container .down-list{position:absolute;top:41px;right:0;z-index:999;display:none;box-sizing:border-box;width:616px;border:1px solid #ccc;border-bottom:0;background-color:#fff}
.search-tools .right-div #input-container .down-list li{padding-left:10px;height:32px;border-bottom:1px solid #ccc;background-color:#fff;text-align:left;font-size:14px;line-height:32px;cursor:default}
.search-tools .right-div #input-container .down-list li:hover{background-color:#f0f0f0}
.search-tools .right-div #input-container .down-list li.active{background-color:#f0f0f0}
.search-tools .right-div #input-container .history-list{position:absolute;top:41px;right:0;z-index:999;display:none;box-sizing:border-box;width:616px;border:1px solid #ccc;border-bottom:0;background-color:#fff}
.search-tools .right-div #input-container .history-list li{height:32px;border-bottom:1px solid #ccc;background-color:#fff;line-height:32px}
.search-tools .right-div #input-container .history-list li:hover{background-color:#f0f0f0}
.search-tools .right-div #input-container .history-list li .search-words{float:left;display:block;padding-left:20px;color:#000;font-size:14px;cursor:default}
.search-tools .right-div #input-container .history-list li .search-link{position:relative;top:6px;right:30px;float:right;padding:0 6px;height:20px;background-color:#888;color:#fff;letter-spacing:1px;font-size:13px;line-height:20px}
.search-tools .right-div #input-container .history-list li .close{position:relative;right:16px;float:right;width:12px;height:32px;background-size:12px 12px;cursor:pointer}
.search-tools .right-div #input-container .history-list li .clear-words{position:relative;left:20px;float:left;color:#666;font-size:14px;cursor:pointer}
.search-tools .right-div #input-container #settings{position:absolute;top:10px;right:0;width:20px;height:20px;color:#177a6a;font-weight:700;font-size:21px;cursor:pointer}
.search-tools .right-div #search-websites{padding-right:16px}
.search-tools .right-div #search-websites span{display:inline-block;margin-top:10px;margin-left:16px;padding:4px 8px;background-color:#177a6a;color:#fff;letter-spacing:1px;font-size:14px;font-family:'微软雅黑';cursor:pointer;transition:padding-left .3s}
.search-tools .right-div #search-websites .active{padding:4px 6px 4px 20px;background:url(images/search/active.png) no-repeat 6px center;background-color:#f85d70}
.search-tools #bookmark{position:absolute;top:6%;right:6%}
.search-tools #bookmark a{color:#000;letter-spacing:2px;font-size:15px}
#notice{margin-top:15px}
.hide{display:none;}
.banner{display:flex;flex-direction: row;flex-wrap: wrap;}
.banner .small-item{width: calc( (100% - (3px * 3) ) / 4);height: 100%;background-position: center center;background-size: cover;overflow: hidden;background-repeat: no-repeat;margin-right: 3px;margin-bottom: 3px;}
.banner .small-item:nth-child(4n){margin-right:0;}
/*.banner .small-item:hover {transform: scale(1.3);-ms-transform: scale(1.3);-moz-transform: scale(1.3);-webkit-transform: scale(1.3);-o-transform: scale(1.3);}*/
.banner .small-item a{display:inline-block;width:100%;height: 172px;line-height: 172px;}
.nav-tabs li{display:inline-block;padding:0 15px;font-size:14px;line-height:43px;cursor:pointer}
.nav-tabs li.active{margin-bottom:-1px;border-bottom:1px solid #47bcaa;color:#47bcaa}
.tab-pane{display:none}
.tab-pane.active{display:block}
#main-container{padding-top:20px;}
.single-content{margin-bottom:25px;padding:20px 30px 30px;;background:#fff;box-shadow: 0 0 1px rgba(0, 0, 0, 0.1);min-height: 750px;}
.post-title{margin-left: -32px;padding-left: 30px;font-size: 28px;color: #393939;line-height: 32px;border-left: 4px solid #d9534f;padding-top: 6px;padding-bottom: 6px;margin-top: 15px;margin-bottom: 20px;font-weight: bold;}
.single-content p{text-align:left;padding:10px 0;font-size:16px;}
.single-content img{max-width: 100%;height: auto;}
.e404,ul.listitem{text-align:center;display: flex;flex-wrap: wrap;}
.e404{margin:10px 0;padding-top:100px;padding-bottom:200px;background:#fff}
.e404 h1{margin:35px 0;font-size:36px}
.e404 p{margin:20px;font-size:16px}
.e404 a.btn{padding:5px;background:#47bcaa;color:#fff}
.e404 img{max-width:100%}
#site-main .tab-header .cat:after{clear:both}
#cebian{position:fixed;top:210px;left:50%;z-index:999;margin-left:720px;border:1px solid #ccc}
#cebian li{width:80px;height:30px;border-bottom:1px solid #e6ebf4;background-color:#fff;text-align:center;font-size:14px;line-height:30px}
#cebian li:hover{background-color:#e6f4fb}
#cebian a{display:block;color:#333;text-decoration:none}
#cebian a:hover{color:#47bbaa}
#cebian li:last-child{height:50px;line-height:50px}
.tab-section{position:relative;display:inline-block;margin:0 auto;margin-top:15px;margin-bottom:20px;width:100%;height:auto;background:#fff}
.tab-header{border-bottom:1px solid #cccc}
.nav-tabs{padding-left:90px}
.nav-tabs>li>a{margin-right:0}
#site-main .tab-header .cat{float:left;padding-left:15px;width:63px;border-right:1px solid #cccc;border-bottom:1px solid #cccc;background-color:#47bcaa;color:#fff;text-align:left;font-weight:700;font-size:14px;line-height:42px}
/*.content li,.tab-pane li{float:left;overflow:hidden;border-right:1px solid #e9e9e9;border-bottom:1px solid #e9e9e9;font-size:14px;width: calc((100%-7px)/8);box-sizing: border-box;-webkit-box-sizing: border-box;-moz-box-sizing: border-box;}*/
.content li,.tab-pane li{overflow:hidden;border-right:1px solid #e9e9e9;border-bottom:1px solid #e9e9e9;font-size:14px;-webkit-box-sizing: border-box;-moz-box-sizing: border-box;flex-basis: calc((100% - 7px) / 8);box-sizing: border-box;}
.listitem li:nth-child(8n){border-right: 0;}
.content li a,.tab-pane li a{display:block}
.tab-pane a{height:42px;color:#333;font:14px/100% "Microsoft yahei";line-height:42px;-webkit-transition:all .2s;-moz-transition:all .2s;-o-transition:all .2s;-ms-transition:all .2s}
.tab-pane a img{margin-right:3px;width: 16px;height: 16px;}
.tab-pane a:hover{color:#47bcaa;text-decoration:none}
.pr5{padding-right:5px;font-size:16px}
/*::-webkit-scrollbar{width:0;height:0;background-color:#4a61cc}*/
#bar a{display:block;margin-top:8px;height:42px;border-left:2px solid #f9f9f9;text-align:center;line-height:42px}
#bar a,#wm-warp .con{color:#666;font-size:16px}
#wm-warp .con{padding-top:15px;line-height:30px}
#wm-warp .con p{padding:0 10px;text-indent:2em}
.position{margin:10px 0 10px 3px;height:24px;color:#696969;font-size:14px;line-height:24px}
#bar{overflow:hidden;padding-top:15px;border-bottom:1px solid #dedede;background:#f9f9f9}
.main-content{padding:10px 0}
.scrll{position:fixed;top:0!important}
.footer{padding:20px 0;width:100%;background-color:#fff}
.footer .copyright{margin:0 auto;width:100%;max-width:1170px;color:#ccc;text-align:center;font-size:14px}
@media(max-width:960px){.logo img{float:none}
#cebian,#navbar,#notice,#search-tools,.top-right{display:none}
.search-tools .left-div{float:none;display:inline-block;margin:0 auto}
.search-tools #search-container{height:210px}
.search-tools .right-div{float:none;display:inline-block;margin-top:10px}
.search-tools .right-div #input-container #search-input{width:85%}
.search-tools .right-div #input-container #settings{right:9%}
.nav-tabs{display:inline-block;overflow:scroll;padding-left:0;max-width:100%;white-space:nowrap;letter-spacing:-8px;width: 100%;}
#site-main .tab-header .cat{padding-left:0;width:100%;text-align:center}
.nav-tabs>li{float:none;display:inline-block;background-color:#47bcaa47;letter-spacing:normal;}
.listitem li:nth-child(8n) {border-right: 1px solid #e9e9e9;}
.tab-header {border-bottom: none}
.nav-tabs .active{background-color:#fff}
.nav-tabs>li.active>a,.nav-tabs>li.active>a:focus,.nav-tabs>li.active>a:hover{text-decoration:none}
/*.content li,.tab-pane li{width: calc(100%/3);text-align:center}*/
.content li,.tab-pane li{flex-basis: calc(100%/3);text-align:center}
#tab-section{margin-top:0;border:none}
.logo{text-align:center}
}
.single-content p a{color:blue;text-decoration:underline;}
/*zdy*/
.page-top {
    background: linear-gradient(90deg, #1e9fff 33%, #20c4ab 66%, #009688);
    background-size: 400%;
    background-position: 0 100%;
    animation: gradient 7.5s ease-in-out infinite;
    height: calc(100vh - 168px);
    position: relative;
}

.wrap {
    margin: 0 auto;
    width: 100%;
    height: 100%;
    max-width: 1200px;
    position: relative;
    padding: 0 20px;
    box-sizing: border-box;
}

/* Logo and Search Section */
.head_logo_so {
    width: 57.2%;
    float: left;
    position: relative;
    top: 50%;
    transform: translateY(-50%);
    margin-top: -20px;
    margin-left: 20px;
}

.head_logo_h1 {
    overflow: hidden;
}

.head_h1 {
    height: 80px;
    float: left;
    color: #fff;
}

.head_h1 h1 {
    color: #fff;
    font-weight: 700;
    letter-spacing: 6px;
    font-size: 33px;
    margin-bottom: 20px;
}

.head_h1 p {
    font-size: 13px;
    margin-top: 4px;
    letter-spacing: 2px;
    opacity: 0.9;
}

/* Search Form */
.head_soso {
    margin-top: 30px;
}

.head_soso form {
    display: flex;
    align-items: center;
}

.head_soso .search {
    flex: 1;
    position: relative;
}

.head_soso input {
    width: 100%;
    height: 50px;
    padding: 0 20px;
    color: #333;
    border: 0;
    outline: 0;
    font-size: 15px;
    border-radius: 5px 0 0 5px;
    background: rgba(255, 255, 255, 0.95);
}

.head_soso button {
    height: 50px;
    width: 135px;
    background: #262626;
    color: #fff;
    cursor: pointer;
    border-radius: 0 5px 5px 0;
    border: 0;
    font-size: 15px;
    transition: background-color 0.3s ease;
}

.head_soso button:hover {
    background: #333;
}

/* Hot Recommendations */
.searchbox {
    margin-top: 20px;
    color: rgba(246, 246, 246, 0.9);
    position: absolute;
    overflow: hidden;
    width: 750px;
}

.searchbox h2 {
    float: left;
    font-size: 14px;
    margin-right: 15px;
    font-weight: 500;
}

.recommendations {
    display: flex;
    flex-wrap: wrap;
    gap: 10px;
}

.recommendation-list {
    display: flex;
    flex-wrap: wrap;
    gap: 10px;
    margin: 0;
    padding: 0;
}

.recommendation-list li {
    list-style: none;
}

.recommendation-list a {
    color: rgba(246, 246, 246, 0.7);
    font-size: 14px;
    text-decoration: none;
    transition: color 0.3s ease;
}

.recommendation-list a:hover {
    color: #fff;
    text-decoration: none;
}

/* Navigation Links */
.head_new {
    top: 50%;
    margin-left: calc(57.2% + 50px);
    transform: translateY(-50%);
    position: absolute;
}

.nav-links {
    position: relative;
    left: 56px;
    counter-reset: sectioncounter;
    list-style: none;
    padding: 0;
    margin: 0;
}

.nav-links li {
    text-align: left;
    line-height: 50px;
    position: relative;
}

.nav-links li a {
    color: #fff;
    text-decoration: none;
    transition: opacity 0.3s ease;
}

.nav-links li a:hover {
    opacity: 0.8;
}

.nav-links li::before {
    display: inline-block;
    content: counter(sectioncounter);
    counter-increment: sectioncounter;
    width: 24px;
    height: 24px;
    text-align: center;
    line-height: 24px;
    margin-right: 1em;
    background: #c3c3c3;
    color: #efe;
    font-size: 14px;
    border-radius: 50%;
}

.nav-links li:nth-child(1)::before {
    background: #ff6b66;
}

.nav-links li:nth-child(2)::before {
    background: #ff8652;
}

.nav-links li:nth-child(3)::before {
    background: #ffa742;
}

/* Todo List Section */
.gongju {
    background: rgba(255, 255, 255, 0.2);
    border-radius: 10px;
    max-width: 220px;
    position: relative;
    top: 50%;
    transform: translateY(-50%);
    margin-left: calc(57.2% + 288px);
    backdrop-filter: blur(5px);
}

.gongju_title {
    padding: 20px 0 0 25px;
    color: #fff;
    font-size: 16px;
    font-weight: 500;
}

.todo_input_wrap {
    width: calc(100% - 50px);
    margin: 0;
    position: relative;
    padding: 5px 25px;
    overflow: hidden;
}

.mdui-textfield-input {
    display: block;
    width: 100%;
    height: 36px;
    padding: 8px 0;
    margin: 0;
    background: transparent;
    color: #fff;
    border: none;
    border-bottom: 1px solid rgba(255, 255, 255, 0.3);
    outline: none;
    font-size: 14px;
    transition: border-color 0.3s ease;
}

.mdui-textfield-input:focus {
    border-bottom-color: rgba(255, 255, 255, 0.8);
}

.mdui-textfield-input::placeholder {
    color: rgba(255, 255, 255, 0.6);
    font-size: 14px;
}

.todo {
    color: #fff;
    font-size: 14px;
    min-height: 306px;
    padding: 0 25px;
}

.todo .list {
    margin-top: 15px;
}

.todo .list .todoItem {
    position: relative;
    margin-left: 20px;
    padding: 8px 0;
    font-size: 14px;
    display: flex;
    align-items: center;
}

.todo .list .content {
    margin: 0 30px;
    height: 18px;
    line-height: 18px;
    overflow: hidden;
    flex: 1;
}

.todo .list .todoItem .del {
    position: absolute;
    right: 0;
    width: 18px;
    height: 18px;
    top: 12px;
    vertical-align: middle;
    font-size: 10px;
    display: none;
    cursor: pointer;
    color: rgba(255, 255, 255, 0.6);
    transition: color 0.3s ease;
}

.todoItem:hover .del {
    display: block;
}

.todoItem:hover .del:hover {
    color: #fff;
}

/* Animation */
@keyframes gradient {
    50% {
        background-position: 100% 0;
    }
}

/* Responsive Design */
@media (max-width: 1200px) {
    .page-top {
        display: none;
    }
}

@media (max-width: 1024px) {
    .container {
        max-width: 100%;
        padding-left: 0;
        padding-right: 0;
    }
    
    .head_logo_so {
        width: 100%;
        float: none;
        margin: 0;
        padding: 20px;
    }
    
    .head_new {
        position: relative;
        margin: 20px 0;
        transform: none;
        top: 0;
    }
    
    .gongju {
        position: relative;
        margin: 20px auto;
        transform: none;
        top: 0;
    }
}

/*公告*/
.laba{float: left;display: inline-block;height: 45px;line-height: 45px;}
#announcement {height:45px; line-height:45px; overflow: hidden;float:left;margin-right:15px;margin-left:-8px;margin-top: -6px;}
#announcement ul {list-style-type:none;max-width:420px;margin-left:8px;}
#announcement ul li{float:none;height: 45px;line-height: 45px;}
/*todo*/
.todo{color:#fff;font-size:14px;min-height: 306px;}
.todo_input_wrap{
    width: calc(100% - 50px);
    margin: 0;
    position: relative;
    padding: 5px 25px;
    overflow: hidden;
}
#input::-webkit-input-placeholder{
    font-size: 8px;
}
.mdui-textfield-input {
    display: block;
    width: 100%;
    max-width: 100%;
    height: 36px;
    box-sizing: border-box;
    -webkit-appearance: none;
    padding: 8px 0;
    margin: 0;
    overflow: hidden;
    font-family: inherit;
    font-size: 16px;
    line-height: 20px;
    color: inherit;
    resize: none;
    background: transparent;
    color: #fff;
    border: none;
    border-bottom: 1px solid rgba(0,0,0,.12);
    outline: none;
    box-shadow: none;
    transition-timing-function: cubic-bezier(.4,0,.2,1);
    transition-duration: .2s;
    transition-property: border-bottom-color,padding-right;
    -moz-appearance: none;
    appearance: none;
}
.mdui-textfield-input::-webkit-input-placeholder {color: #444;font-size: 14px;}
.mdui-textfield-input::-moz-input-placeholder {color: #444;font-size: 14px;}
.mdui-textfield-input::-ms-input-placeholder {color: #444;font-size: 14px;}
.todo .list .todoItem{position:relative;margin-left:20px;padding:8px 0;font-size:14px;}
.todo .title{margin-left:20px;margin-bottom:10px;}
.todo .list .content{margin:0 30px;height:18px;line-height:18px;overflow:hidden;}
.todo .list .content span.tooltiptext{visibility: hidden;width: 100%;
    background-color: rgb(251, 247, 236);
    color: rgb(118, 85, 54);
    text-align: left;
    /* 定位 */
    position: absolute;
    z-index: 1;
    bottom: 100%;
    left: 0;
    margin-left: -15px;
    padding: 5px;
    border-radius: 5px;
}
    .todo .list .content:hover .tooltiptext {
    visibility: visible;
}

.todo .list .todoItem input{position:absolute;left:0;width:18px;height:18px;}
.todo .list .todoItem .del{position:absolute;right:0;width:18px;height:18px;top: 12px;vertical-align: middle;font-size: 10px;display: none;}
.todoItem:hover .del.fa {display: block;}
.todo .list .todoItem .del::after{content:"\e6cb";}

/*弹窗*/
.box input {
	outline: none;
	height:28px;
}

.black_overlay {
	display: none;
	position: fixed;
	top: 0%;
	left: 0%;
	width: 100%;
	height: 100%;
	background-color: #bbb;
	z-index: 1001;
	opacity: .8
}

.white_content {
	display: none;
	position: fixed;
	border: 1px solid #bbb;
	background-color: #fff;
	z-index: 1002;
	overflow: auto
}

.box {
	width: 550px;
	height: 220px;
	left: 50%;
	top: 50%;
	margin: -110px 0 0 -175px;
	text-align: center;
	box-shadow: 10px 10px 33px 0 rgba(0,0,0,.2);
	-webkit-box-shadow: 10px 10px 33px 0 rgba(0,0,0,.2);
	-moz-box-shadow: 10px 10px 33px 0 rgba(0,0,0,.2)
}


.box .font_title {
	letter-spacing: 6px;
	color: #999;
	margin-top: 10px;
	margin-bottom: 20px;
	font-size: 20px
}

.box .btn {
	width: auto;
	height: 34px;
	border-width: 0;
	padding: 0 10px;
	background: #4ecdc4;
	cursor: pointer;
	outline: none;
	color: #fff;
	font-size: 16px;
	margin-right: 6px;
	-moz-user-select: none;
	-webkit-user-select: none;
	-ms-user-select: none;
	-khtml-user-select: none;
	-o-user-select: none;
	user-select: none
}

.box .bottom_btn {
    text-align: center;
}

.box .form_submit {
	margin-bottom: 30px
}
.box .form_submit div {
	margin-bottom: 5px
}

/* Modern Header Styles */
.modern-header {
    background: linear-gradient(135deg, #1e9fff 0%, #20c4ab 50%, #009688 100%);
    background-size: 200% 200%;
    animation: gradientBG 15s ease infinite;
    position: relative;
    overflow: hidden;
}

.header-container {
    max-width: 1200px;
    margin: 0 auto;
    padding: 40px 20px;
    display: grid;
    grid-template-columns: 1fr 400px;
    gap: 40px;
    height: 100%;
    position: relative;
}

/* Left Section Styles */
.header-left {
    display: flex;
    flex-direction: column;
    gap: 30px;
}

.brand-section {
    color: #fff;
}

.site-title {
    font-size: 1.8rem;
    font-weight: 700;
    letter-spacing: 2px;
    margin-bottom: 15px;
    line-height: 1.2;
}

.site-description {
    font-size: 1rem;
    opacity: 0.9;
    line-height: 1.6;
    max-width: 600px;
}

/* Search Section */
.search-section {
    margin-top: 20px;
}

.search-form {
    max-width: 700px;
}

.search-input-wrapper {
    display: flex;
    background: rgba(255, 255, 255, 0.95);
    border-radius: 8px;
    overflow: hidden;
    box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);
}

#search-input {
    flex: 1;
    height: 56px;
    padding: 0 24px;
    font-size: 1.1rem;
    border: none;
    outline: none;
    background: transparent;
}

.search-button {
    padding: 0 32px;
    background: #262626;
    color: #fff;
    border: none;
    font-size: 1.1rem;
    cursor: pointer;
    transition: background-color 0.3s ease;
}

.search-button:hover {
    background: #333;
}

/* Hot Recommendations */
.hot-recommendations {
    margin-top: 30px;
}

.section-title {
    color: #fff;
    font-size: 1.2rem;
    font-weight: 500;
    margin-bottom: 15px;
    opacity: 0.9;
}

.recommendations-grid {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 20px;
}

.recommendations-list {
    list-style: none;
    padding: 0;
    margin: 0;
}

.recommendations-list li {
    margin-bottom: 12px;
}

.recommendations-list a {
    color: rgba(255, 255, 255, 0.8);
    text-decoration: none;
    font-size: 0.95rem;
    transition: all 0.3s ease;
    display: inline-block;
    padding: 4px 0;
}

.recommendations-list a:hover {
    color: #fff;
    transform: translateX(5px);
}

/* Right Section Styles */
.header-right {
    display: flex;
    flex-direction: column;
    gap: 30px;
}

/* Navigation */
.main-nav {
    background: rgba(255, 255, 255, 0.1);
    backdrop-filter: blur(10px);
    border-radius: 12px;
    padding: 20px;
}

.nav-list {
    list-style: none;
    padding: 0;
    margin: 0;
}

.nav-item {
    margin-bottom: 15px;
}

.nav-link {
    display: flex;
    align-items: center;
    color: #fff;
    text-decoration: none;
    padding: 10px;
    border-radius: 8px;
    transition: all 0.3s ease;
}

.nav-link:hover {
    background: rgba(255, 255, 255, 0.1);
}

.nav-number {
    width: 28px;
    height: 28px;
    background: rgba(255, 255, 255, 0.2);
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    margin-right: 12px;
    font-size: 0.9rem;
    font-weight: 500;
}

.nav-item:nth-child(1) .nav-number { background: #ff6b66; }
.nav-item:nth-child(2) .nav-number { background: #ff8652; }
.nav-item:nth-child(3) .nav-number { background: #ffa742; }
.nav-item:nth-child(4) .nav-number { background: #47bcaa; }
.nav-item:nth-child(5) .nav-number { background: #4ecdc4; }
.nav-item:nth-child(6) .nav-number { background: #20c4ab; }

.nav-text {
    font-size: 1rem;
}

/* Todo Section */
.todo-section {
    background: rgba(255, 255, 255, 0.1);
    backdrop-filter: blur(10px);
    border-radius: 12px;
    padding: 20px;
    flex: 1;
}

.todo-header {
    margin-bottom: 20px;
}

.todo-title {
    color: #fff;
    font-size: 1.2rem;
    font-weight: 500;
    margin: 0;
}

.todo-content {
    display: flex;
    flex-direction: column;
    gap: 15px;
}

.todo-input-wrapper {
    position: relative;
}

.todo-input {
    width: 100%;
    padding: 12px 0;
    background: transparent;
    border: none;
    border-bottom: 2px solid rgba(255, 255, 255, 0.2);
    color: #fff;
    font-size: 1rem;
    outline: none;
    transition: border-color 0.3s ease;
}

.todo-input:focus {
    border-bottom-color: rgba(255, 255, 255, 0.8);
}

.todo-input::placeholder {
    color: rgba(255, 255, 255, 0.6);
}

.todo-list {
    flex: 1;
    overflow-y: auto;
    max-height: 300px;
}

.todo-items {
    display: flex;
    flex-direction: column;
    gap: 10px;
}

.todo-item {
    display: flex;
    align-items: center;
    padding: 8px 0;
    color: #fff;
    font-size: 0.95rem;
    border-bottom: 1px solid rgba(255, 255, 255, 0.1);
}

.todo-item input[type="checkbox"] {
    margin-right: 10px;
    width: 18px;
    height: 18px;
    cursor: pointer;
}

.todo-text {
    flex: 1;
    margin-right: 10px;
}

.todo-delete {
    background: none;
    border: none;
    color: rgba(255, 255, 255, 0.6);
    font-size: 1.2rem;
    cursor: pointer;
    padding: 0 5px;
    transition: color 0.3s ease;
}

.todo-delete:hover {
    color: #fff;
}

.todo-item.completed .todo-text {
    text-decoration: line-through;
    opacity: 0.6;
}

/* Animation */
@keyframes gradientBG {
    0% { background-position: 0% 50%; }
    50% { background-position: 100% 50%; }
    100% { background-position: 0% 50%; }
}

/* Responsive Design */
@media (max-width: 1200px) {
    .header-container {
        grid-template-columns: 1fr;
        padding: 20px;
    }

    .header-right {
        display: none;
    }

    .site-title {
        font-size: 2rem;
    }

    .search-input-wrapper {
        max-width: 100%;
    }
}

@media (max-width: 768px) {
    .modern-header {
        display: none;
        min-height: auto;
    }

    .recommendations-grid {
        grid-template-columns: 1fr;
    }

    .site-title {
        font-size: 1.8rem;
    }

    .search-button {
        padding: 0 20px;
    }
}

/* Custom Scrollbar */
.todo-list::-webkit-scrollbar {
    width: 6px;
}

.todo-list::-webkit-scrollbar-track {
    background: rgba(255, 255, 255, 0.1);
    border-radius: 3px;
}

.todo-list::-webkit-scrollbar-thumb {
    background: rgba(255, 255, 255, 0.3);
    border-radius: 3px;
}

.todo-list::-webkit-scrollbar-thumb:hover {
    background: rgba(255, 255, 255, 0.4);
}