/* ========== Frank678 Console Theme ========== */

:root{
    --bg: #d9d9d9;
    --panel: #efefef;
    --paper: #ffffff;
    --ink: #111111;
    --line: #7f7f7f;
    --blue: #28a7d5;
    --deep-blue: #003c88;
    --red: #c40000;
    --gold: #f6d95b;
    --green: #1eaa59;
    --purple: #7b49c6;
    --shadow: #000000;
}

html, body{
    margin: 0;
    padding: 0;
    background-color: var(--bg);
    background-image:
        radial-gradient(circle at 24px 24px, rgba(255,255,255,.75) 0 22px, transparent 23px),
        radial-gradient(circle at 24px 24px, rgba(150,150,150,.18) 0 25px, transparent 26px),
        linear-gradient(to bottom, rgba(255,255,255,.15), rgba(0,0,0,.04));
    background-size: 72px 72px, 72px 72px, 100% 100%;
    color: var(--ink);
    font-family: "Times New Roman","SimSun","Songti SC",serif;
}

body{
    font-size: 18px;
    line-height: 1.65;
}

/* 整体外框 */
#home{
    max-width: 1220px;
    margin: 18px auto;
    background: linear-gradient(#f8f8f8, #e9e9e9);
    border: 3px solid #8e8e8e;
    box-shadow:
        0 0 0 4px #ffffff,
        8px 8px 0 rgba(0,0,0,.12);
}

/* 页头 */
#header{
    background:
        linear-gradient(to bottom, #000 0 34px, transparent 34px 100%),
        linear-gradient(to right, #89d9f4 0 220px, #e6e6e6 220px 100%);
    border-bottom: 4px double #9f0000;
    padding-bottom: 10px;
}

#blogTitle{
    margin: 0;
    padding: 54px 18px 10px;
    position: relative;
}

#blogTitle h1{
    margin: 0;
    line-height: 1;
}

#blogTitle h1 a{
    display: inline-block;
    padding: 12px 18px 10px;
    color: #000 !important;
    text-decoration: none !important;
    background: linear-gradient(#9ee5fb, #43bddd);
    border: 3px solid #fff;
    box-shadow: 6px 6px 0 #000;
    text-transform: uppercase;
    letter-spacing: 2px;
    font-size: 34px;
}

#blogTitle h2{
    margin: 12px 0 0;
    color: #222;
    font-size: 16px;
    font-style: italic;
    letter-spacing: 1px;
}

/* 默认标题左上角小徽章 */
#blogTitle::before{
    content: "F";
    position: absolute;
    left: 18px;
    top: 6px;
    width: 54px;
    height: 54px;
    border-radius: 50%;
    background: #fff;
    color: var(--red);
    border: 4px solid var(--red);
    text-align: center;
    line-height: 52px;
    font-weight: bold;
    font-size: 38px;
    box-shadow: 0 0 0 2px #fff;
    animation: frankSpin 4.5s linear infinite;
    transform-style: preserve-3d;
}

/* 导航 */
#navigator{
    background: #000;
    border-top: 3px solid var(--gold);
    border-bottom: 3px solid var(--gold);
    padding: 6px 10px;
}

#navList{
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
    margin: 0;
    padding: 0;
    list-style: none;
}

#navList li{
    margin: 0;
    padding: 0;
}

#navList a{
    display: block;
    padding: 7px 14px 8px;
    color: var(--deep-blue) !important;
    background: linear-gradient(#ffffff, #cbcbcb);
    border-width: 2px;
    border-style: solid;
    border-color: #ffffff #4b4b4b #4b4b4b #ffffff;
    text-decoration: none !important;
    font-weight: bold;
    font-size: 15px;
    line-height: 1;
    box-shadow: 1px 1px 0 #000;
}

#navList li:nth-child(1) a{ background: linear-gradient(#fff, #d5d5d5); }
#navList li:nth-child(2) a{ background: linear-gradient(#dff7ff, #9fdcf0); }
#navList li:nth-child(3) a{ background: linear-gradient(#e8ffe1, #a9df93); }
#navList li:nth-child(4) a{ background: linear-gradient(#f2e6ff, #c4a6ef); }
#navList li:nth-child(5) a{ background: linear-gradient(#fff3dc, #efcf7a); }
#navList li:nth-child(6) a{ background: linear-gradient(#ffe5e5, #f6b0b0); }

#navList a:hover{
    transform: translate(1px, 1px);
    box-shadow: none;
    color: var(--red) !important;
}

/* 主体布局 */
#main{
    display: grid;
    grid-template-columns: minmax(0, 1fr) 300px;
    gap: 18px;
    padding: 18px;
}

#mainContent{
    min-width: 0;
}

.forFlow{
    min-width: 0;
}

#sideBar{
    width: auto !important;
    min-width: 0;
}

/* 文章块 */
.day,
.entrylistItem,
.post{
    margin-bottom: 26px;
    background: transparent;
}

.dayTitle,
.entrylistTitle{
    margin: 0 0 8px 0;
    padding: 6px 10px;
    color: #7a0000;
    background: linear-gradient(to right, rgba(255,255,255,.95), rgba(255,255,255,0));
    border-left: 8px solid var(--red);
    text-transform: uppercase;
    letter-spacing: 1px;
    font-size: 18px;
    font-weight: bold;
}

.postTitle,
.entrylistPosttitle{
    margin: 0 0 10px 0;
}

.postTitle a,
.entrylistTitle a,
.entrylistPosttitle a{
    color: #b30000 !important;
    text-decoration: underline !important;
    font-size: 32px;
    font-weight: bold;
    letter-spacing: .5px;
}

.postCon,
.entrylistPostSummary,
.c_b_p_desc{
    background: var(--paper);
    border: 2px solid #8e8e8e;
    padding: 16px 18px;
    box-shadow: 6px 6px 0 rgba(0,0,0,.12);
}

.postDesc,
.entrylistItemPostDesc{
    margin-top: 10px;
    padding: 6px 10px;
    background: linear-gradient(to right, #f1f1f1, #fafafa);
    border-left: 4px solid var(--blue);
    color: #333;
    font-size: 14px;
}

/* 链接 */
a{
    color: var(--deep-blue);
    text-decoration: underline;
}

a:hover{
    color: var(--red);
}

/* 侧边栏 */
#sideBarMain{
    display: flex;
    flex-direction: column;
    gap: 14px;
}

.newsItem,
.catListBlogRank,
.catListComment,
.catListFeedback,
.catListLink,
.catListNoteBook,
.catListPostArchive,
.catListPostCategory,
.catListTag,
.catListView,
#sidebar_search_box,
#blog-news{
    background: linear-gradient(#ffffff, #f0f0f0);
    border: 2px solid #9a9a9a;
    box-shadow: 4px 4px 0 rgba(0,0,0,.1);
    padding: 10px 12px;
}

.catListTitle,
#blog-news .catListTitle,
.newsItem .catListTitle{
    margin: -10px -12px 10px;
    padding: 8px 12px;
    background: #000;
    color: #ffd84f;
    border-bottom: 3px solid #ffd84f;
    font-size: 16px;
    text-transform: uppercase;
    letter-spacing: 1px;
}

#sidebar_search_box input[type="text"]{
    width: calc(100% - 14px);
    padding: 8px 6px;
    border: 2px inset #cfcfcf;
    background: #fff;
    font-family: inherit;
    font-size: 15px;
}

#sidebar_search_box input[type="submit"],
#sidebar_search input[type="submit"]{
    margin-top: 8px;
    padding: 6px 12px;
    border-width: 2px;
    border-style: solid;
    border-color: #ffffff #4b4b4b #4b4b4b #ffffff;
    background: linear-gradient(#fff6bf, #eac94f);
    color: #7a0000;
    font-weight: bold;
    cursor: pointer;
}

/* 代码块 */
pre,
.cnblogs_code,
code{
    font-family: "Courier New", Consolas, monospace !important;
}

pre,
.cnblogs_code{
    background: #0f0f0f !important;
    color: #f3f36f !important;
    border: 3px solid #3e3e3e !important;
    box-shadow: inset 0 0 0 2px #000;
}

pre code,
.cnblogs_code pre{
    color: #f3f36f !important;
}

/* 引用块 */
blockquote{
    margin: 16px 0;
    padding: 12px 16px;
    background: #fffef2;
    border-left: 6px solid #d00000;
    box-shadow: 4px 4px 0 rgba(0,0,0,.08);
}

/* 分页 */
#nav_next_page,
.pager,
.div_my_zzk,
.topicListFooter{
    background: transparent;
}

.pager a,
#nav_next_page a{
    display: inline-block;
    margin: 4px 6px 0 0;
    padding: 6px 10px;
    background: linear-gradient(#fff, #d5d5d5);
    border: 2px solid;
    border-color: #fff #444 #444 #fff;
    text-decoration: none !important;
    font-weight: bold;
}

/* 页脚 */
#footer{
    margin-top: 12px;
    padding: 18px;
    background: #000;
    color: #ddd;
    border-top: 4px double #ffd84f;
    text-align: center;
    font-size: 14px;
}

#footer a{
    color: #ffd84f !important;
}

/* 页首自定义模块 */
.frank-console{
    margin: 14px 18px 12px;
    border: 3px solid #8e8e8e;
    box-shadow: 6px 6px 0 rgba(0,0,0,.12);
    background: #efefef;
    overflow: hidden;
}

.frank-topline{
    background: #000;
    color: #ffd84f;
    border-bottom: 3px solid #ffd84f;
    overflow: hidden;
    white-space: nowrap;
    font-weight: bold;
    letter-spacing: 1px;
}

.frank-marquee{
    display: inline-block;
    padding: 7px 0;
    white-space: nowrap;
    animation: frankMarquee 18s linear infinite;
}

.frank-hero{
    display: grid;
    grid-template-columns: 120px minmax(0,1fr) 260px;
    gap: 16px;
    align-items: center;
    padding: 18px;
    background:
        linear-gradient(to right, #7fd5ef 0 22%, #efefef 22% 100%);
    border-bottom: 2px solid #9e9e9e;
}

.frank-spin-wrap{
    position: relative;
    width: 92px;
    height: 92px;
    margin: 0 auto;
    perspective: 700px;
}

.frank-spin,
.frank-spin-shadow{
    position: absolute;
    inset: 0;
    border-radius: 50%;
    display: grid;
    place-items: center;
    font-size: 62px;
    font-weight: bold;
    font-family: Georgia, "Times New Roman", serif;
}

.frank-spin{
    background: #fff;
    color: #d30000;
    border: 5px solid #d30000;
    transform-style: preserve-3d;
    animation: frankSpin 4.5s linear infinite;
    z-index: 2;
}

.frank-spin-shadow{
    color: rgba(0,0,0,.15);
    border: 5px solid rgba(0,0,0,.08);
    transform: translate(10px, 6px);
    z-index: 1;
}

.frank-mini{
    color: #003b61;
    font-size: 15px;
    text-transform: uppercase;
    letter-spacing: 2px;
    margin-bottom: 6px;
    font-weight: bold;
}

.frank-title{
    font-size: 42px;
    line-height: 1.05;
    color: #000;
    font-weight: bold;
    text-shadow: 2px 2px 0 #fff;
}

.frank-sub{
    margin-top: 10px;
    color: #333;
    font-size: 17px;
}

.frank-status{
    display: flex;
    flex-direction: column;
    gap: 8px;
}

.frank-status span{
    display: block;
    padding: 7px 10px;
    background: linear-gradient(#fff, #d9d9d9);
    border: 2px solid;
    border-color: #fff #4b4b4b #4b4b4b #fff;
    color: #7a0000;
    font-weight: bold;
    text-align: center;
    box-shadow: 1px 1px 0 #000;
}

.frank-panels{
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 0;
}

.frank-panels .panel{
    min-height: 96px;
    padding: 16px 18px;
    border-top: 2px solid #fff;
    border-right: 2px solid #9d9d9d;
    position: relative;
    overflow: hidden;
}

.frank-panels .panel:last-child{
    border-right: 0;
}

.frank-panels .panel b{
    display: block;
    font-size: 24px;
    margin-bottom: 6px;
    text-transform: uppercase;
}

.frank-panels .panel span{
    display: block;
    font-size: 15px;
    line-height: 1.45;
}

.panel-cyan{
    background:
        linear-gradient(135deg, rgba(255,255,255,.35), rgba(255,255,255,0)),
        linear-gradient(#62c9ea, #b5edf9);
    color: #08273a;
}

.panel-pattern{
    background:
        radial-gradient(circle at 30px 30px, rgba(255,255,255,.65) 0 22px, transparent 23px),
        radial-gradient(circle at 30px 30px, rgba(120,120,120,.12) 0 24px, transparent 25px),
        linear-gradient(#ededed, #dcdcdc);
    background-size: 70px 70px, 70px 70px, 100% 100%;
    color: #5e0000;
}

.panel-sale{
    background:
        linear-gradient(to bottom, #000 0 22px, transparent 22px 100%),
        linear-gradient(#ffffff, #f3f3f3);
    color: #000;
}

.panel-sale b{
    color: #d40000;
    font-size: 34px !important;
    transform: rotate(-4deg);
    text-shadow: 2px 2px 0 #ffd84f;
}

/* 页脚徽章 */
.frank-footer-badges{
    margin: 10px auto 0;
    display: flex;
    justify-content: center;
    gap: 8px;
    flex-wrap: wrap;
}

.frank-footer-badges a,
.frank-footer-badges span{
    display: inline-block;
    padding: 5px 10px;
    background: linear-gradient(#fff, #d3d3d3);
    border: 2px solid;
    border-color: #fff #444 #444 #fff;
    color: #003c88 !important;
    text-decoration: none !important;
    font-weight: bold;
    font-size: 12px;
    box-shadow: 1px 1px 0 #000;
}

/* 动效 */
@keyframes frankMarquee{
    0%{ transform: translateX(100%); }
    100%{ transform: translateX(-100%); }
}

@keyframes frankSpin{
    0%{ transform: rotateY(0deg) rotateZ(0deg); }
    100%{ transform: rotateY(360deg) rotateZ(360deg); }
}

/* 手机端 */
@media (max-width: 980px){
    #main{
        grid-template-columns: 1fr;
    }

    .frank-hero{
        grid-template-columns: 1fr;
        text-align: center;
        background: linear-gradient(to bottom, #7fd5ef 0 32%, #efefef 32% 100%);
    }

    .frank-panels{
        grid-template-columns: 1fr;
    }

    .frank-title{
        font-size: 34px;
    }

    #blogTitle h1 a{
        font-size: 28px;
    }
}

/* ====== 布局拉满补丁：放在 CSS 最底部 ====== */

#home {
    width: calc(100vw - 40px) !important;
    max-width: none !important;
    min-width: 0 !important;
    margin: 12px auto !important;
}

#main {
    display: flex !important;
    align-items: flex-start !important;
    gap: 24px !important;
    width: 100% !important;
    padding: 16px !important;
    box-sizing: border-box !important;
}

#sideBar {
    width: 260px !important;
    min-width: 260px !important;
    float: none !important;
    margin: 0 !important;
}

#mainContent {
    flex: 1 1 auto !important;
    width: auto !important;
    min-width: 0 !important;
    float: none !important;
    margin: 0 !important;
    padding: 0 !important;
}

.forFlow {
    width: 100% !important;
    min-width: 0 !important;
    margin: 0 !important;
}

.day,
.post,
.entrylistItem,
.entrylist,
.postCon,
.entrylistPostSummary,
.c_b_p_desc {
    width: 100% !important;
    max-width: none !important;
    box-sizing: border-box !important;
}

/* 标题别撑得太夸张，不然正文看起来又会窄 */
.postTitle a,
.entrylistPosttitle a {
    font-size: 28px !important;
    line-height: 1.35 !important;
    word-break: break-word !important;
}

/* 图片和代码也别把版心挤坏 */
img {
    max-width: 100% !important;
    height: auto !important;
}

pre,
.cnblogs_code {
    max-width: 100% !important;
    overflow-x: auto !important;
    box-sizing: border-box !important;
}

/* 大屏再放宽一点 */
@media (min-width: 1600px) {
    #home {
        width: calc(100vw - 24px) !important;
    }

    #sideBar {
        width: 280px !important;
        min-width: 280px !important;
    }
}

/* 小屏自动改成上下排 */
@media (max-width: 980px) {
    #main {
        display: block !important;
    }

    #sideBar,
    #mainContent {
        width: 100% !important;
        min-width: 0 !important;
    }

    #sideBar {
        margin-bottom: 20px !important;
    }
}