/* ========== 90梦主博客 全局样式 ========== */
* {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
}
html,body{
    width:100%;
    min-height:100vh;
    overflow-x: hidden;
    position: relative;
    font-family: "Microsoft Yahei", sans-serif;
    background:#040b18;
}

/* 粒子画布铺满全屏，底层背景 */
#particles-canvas{
    position: fixed;
    top:0;left:0;width:100%;height:100%;z-index:-1;
}

/* 顶部标题框 */
.top-title-box {
    position:relative;
    margin:5vw auto 2vw;
    width:60vw;
    max-width:500px;
}
.top-title-border {
    width:100%;
    padding:2vw 2vw;
    border:4px solid #00c8ff;
    clip-path: polygon(0 25%, 4% 0, 96% 0, 100% 25%, 100% 75%,96% 100%,4% 100%,0 75%);
    display:flex;align-items:center;justify-content:center;
    box-shadow: 0 0 22px #0088bb inset;
}
.top-title-text {
    font-size: clamp(22px,5vw,40px);
    font-weight:bold;
    color:#ffffff;
    text-shadow: 0 0 14px #00ccff;
    text-align:center;
}

/* ========== 搜索框 ========== */
.search-box-wrap{
    width:92vw;
    max-width:860px;
    margin:0 auto 3vw;
}
.search-inner{
    display:flex;
    gap:10px;
    border:3px solid #00c8ff;
    border-radius:12px;
    padding:10px;
    background:#0b1626;
    box-shadow:0 0 16px #0077aa;
}
#search-input{
    flex:1;
    background:#08101c;
    border:2px solid #0088bb;
    border-radius:8px;
    padding:10px 14px;
    color:#5cf779;
    font-size:16px;
    outline:none;
}
#search-input::placeholder{
    color:#60e0ff;
    opacity:0.65;
}
#search-btn{
    padding:0 22px;
    background:#133854;
    border:2px solid #39ff88;
    color:#8bffaa;
    border-radius:8px;
    font-weight:bold;
    cursor:pointer;
    transition:0.2s;
}
#search-btn:hover{
    background:#174b6e;
    box-shadow:0 0 8px #39ff88;
}

/* ========== 双屏容器 ========== */
.screen-container{
    width:92vw;
    max-width:860px;
    margin:0 auto;
    display:flex;
    gap:3vw;
    justify-content: space-between;
}
.screen-left, .screen-right {
    width:48%;
    border:3px solid #00c8ff;
    border-radius:14px;
    background:#0b1626;
    box-shadow: 0 0 18px #0077aa;
    padding:8px;
}
.screen-title-bar{
    color:#60e0ff;
    font-size: clamp(13px,1.9vw,16px);
    font-weight:bold;
    margin-bottom:8px;
}

/* 右侧导航 */
.right-inner{
    display:flex;
    flex-direction:column;
    gap:10px;
    height: calc(100% - 20px);
}
.navbar-box{
    display:flex;
    gap:8px;
    flex-wrap:nowrap;
}
.menu-item{
    flex:1;
    padding:6px 2px;
    color:#b3eaff;
    font-size: clamp(13px,1.9vw,16px);
    font-weight:bold;
    cursor:pointer;
    transition: 0.2s;
    text-align:center;
    border-radius:6px;
    background:rgba(0,120,180,0.08);
    border:1px solid rgba(0,200,255,0.15);
}
.menu-item.active{
    background:rgba(0,200,255,0.25);
    color:#ffffff;
    border-bottom:2px solid #39ff88;
    box-shadow:inset 0 0 10px rgba(0,255,200,0.08);
}
.menu-item:hover{
    background-color:rgba(0,180,255,0.18);
}
.content-area{
    flex: 1;
    border:2px solid rgba(0,200,255,0.35);
    border-radius:10px;
    background:rgba(0,20,40,0.85);
    padding:10px;
    box-shadow:inset 0 0 12px rgba(0,0,0,0.5);
}
/* 导航栏目：三列六行，正常SEO链接 */
.nav-links-grid{
    color:#5cf779;
    font-family:Consolas,monospace;
    font-size: clamp(13px, 2.1vw, 15px);
    line-height:1.9;
    display:grid;
    grid-template-columns: repeat(3, 1fr);
    grid-auto-rows: auto;
    gap:6px 12px;
}
.nav-links-grid a{
    display:block;
    color:#5cf779;
    text-decoration:none;
    transition: 0.2s;
    margin:0;
}
.nav-links-grid a:hover{
    color:#00ccff;
    text-shadow:0 0 6px #00ccff;
}

/* 左侧最新文章列表 */
.left-inner{
    display:flex;
    flex-direction:column;
    gap:10px;
    height: calc(100% - 20px);
}
.left-navbar-box{
    display:flex;
    gap:8px;
    flex-wrap:nowrap;
}
.left-menu-item{
    flex:1;
    padding:6px 2px;
    color:#b3eaff;
    font-size: clamp(13px,1.9vw,16px);
    font-weight:bold;
    cursor:pointer;
    transition: 0.2s;
    text-align:center;
    border-radius:6px;
    background:rgba(0,120,180,0.08);
    border:1px solid rgba(0,200,255,0.15);
}
.left-menu-item.active{
    background:rgba(0,200,255,0.25);
    color:#ffffff;
    border-bottom:2px solid #39ff88;
    box-shadow:inset 0 0 10px rgba(0,255,200,0.08);
}
.left-menu-item:hover{
    background-color:rgba(0,180,255,0.18);
}
.left-content-area{
    flex: 1;
    border:2px solid rgba(0,200,255,0.35);
    border-radius:10px;
    background:rgba(0,20,40,0.85);
    padding:10px;
    box-shadow:inset 0 0 12px rgba(0,0,0,0.5);
}
/* 左侧文章列表：单列，文章链接保持正常SEO */
.article-links-grid{
    color:#5cf779;
    font-family:Consolas,monospace;
    font-size: clamp(13px, 2.1vw, 15px);
    line-height:1.9;
    display:grid;
    grid-template-columns: 1fr;
    grid-auto-rows: auto;
    gap:6px 12px;
}
.article-links-grid a{
    display:block;
    color:#5cf779;
    text-decoration:none;
    transition: 0.2s;
    margin:0;
}
.article-links-grid a i{
    margin-right:8px;
}
.article-links-grid a:hover{
    color:#00ccff;
    text-shadow:0 0 6px #00ccff;
}

/* ========== 友情链接面板（所有链接nofollow禁传权重） ========== */
.link-box{
    width:92vw;
    max-width:860px;
    margin:4vw auto 2vw;
    border:3px solid #00c8ff;
    clip-path: polygon(0 12%, 3% 0,97% 0,100% 12%,100% 88%,97% 100%,3% 100%,0 88%);
    background:rgba(10,28,48,0.75);
    padding:20px;
    box-shadow:0 0 18px #0077aa;
}
.link-title{
    color:#ffffff;
    font-size: clamp(18px,3vw,24px);
    font-weight:bold;
    margin-bottom:12px;
    text-align:center;
}
.link-item{
    display:inline-block;
    margin:4px 8px;
    color:#78ff9c;
    font-size:15px;
}
.link-item a{
    color:#78ff9c;
    text-decoration:none;
}
.link-item a:hover{
    color:#00ccff;
    text-shadow:0 0 6px #00ccff;
}

/* ========== 备案面板（链接nofollow禁传权重） ========== */
.record-box{
    width:92vw;
    max-width:860px;
    margin:0 auto 6vw;
    border:3px solid #00c8ff;
    clip-path: polygon(0 12%, 3% 0,97% 0,100% 12%,100% 88%,97% 100%,3% 100%,0 88%);
    background:rgba(10,28,48,0.75);
    padding:20px;
    box-shadow:0 0 18px #0077aa;
}
.record-title{
    color:#ffffff;
    font-size: clamp(18px,3vw,24px);
    font-weight:bold;
    margin-bottom:12px;
    text-align:center;
}
.record-wrap{
    display:flex;
    justify-content:center;
    align-items:center;
    gap:24px;
    flex-wrap:wrap;
}
.record-item{
    color:#8bffaa;
    font-size:15px;
}
.record-item a{
    color:#8bffaa;
    text-decoration:none;
}
.record-item a:hover{
    color:#ffffff;
    text-shadow:0 0 6px #39ff88;
}

/* ========== 手机端适配 ========== */
@media(max-width:720px){
    .record-wrap{
        flex-direction:column;
        gap:8px;
        text-align:center;
    }
    .record-box{
        padding:15px;
    }
    .top-title-box{
        width:80vw;
    }
    .screen-container{
        flex-direction:column;
    }
    .screen-left,.screen-right{
        width:100%;
    }
    .navbar-box{
        gap:6px;
    }
    .menu-item{
        font-size:13px;
        padding:7px 2px;
    }
    .search-inner{
        flex-direction:column;
    }
    #search-btn{
        padding:8px;
    }
    .link-box{
        padding:15px;
    }
}