.page-head .container{
    display:flex;
    justify-content:space-between;
    align-items:center
}
.page-head h1{
    font-size:20px;
    margin:0
}
.feature-grid{
    display:grid;
    grid-template-columns:2fr 1fr 1fr;
    grid-template-rows:285px 175px;
    gap:16px
}
.feature-card{
    background-size:cover;
    background-position:center;
    border-radius:10px;
    overflow:hidden;
    position:relative;
    color:#fff;
    min-height:150px
}
.feature-card.f1{
    grid-row:span 2
}
.feature-card.f2{
    grid-column:2;
    grid-row:1
}
.feature-card.f3{
    grid-column:3;
    grid-row:1
}
.feature-card.f4{
    grid-column:2;
    grid-row:2
}
.feature-card.f5{
    grid-column:3;
    grid-row:2
}
.overlay{
    position:absolute;
    inset:auto 0 0;
    padding:22px;
    background:linear-gradient(transparent,rgba(0,0,0,.8))
}
.overlay h2{
    font-size:22px;
    line-height:1.15;
    margin:8px 0 0
}
.f1 .overlay h2{
    font-size:30px
}
.content-section{
    padding:70px 0
}
.section-heading{
    display:flex;
    justify-content:space-between;
    align-items:end;
    gap:20px
}
.eyebrow{
    font-size:11px;
    color:var(--accent-color);
    font-weight:700;
    letter-spacing:1px
}
.section-heading h2{
    margin:5px 0 0;
    font-size:28px
}
.search{
    display:flex;
    gap:8px
}
.search input,.toolbar input,.toolbar select,label input,label textarea,label select{
    font:inherit;
    border:1px solid #dce4ec;
    border-radius:5px;
    padding:11px 12px;
    width:100%;
    outline:none
}
.search input{
    width:240px
}
.category-row{
    display:flex;
    gap:8px;
    flex-wrap:wrap;
    margin:25px 0
}
.pill{
    font-size:12px;
    background:#fbe5ea;
    color:var(--default-color);
    border-radius:20px;
    padding:5px 11px
}
.pill.active{
    background:var(--accent-color);
    color:#fff
}
.blog-grid{
    display:grid;
    grid-template-columns:repeat(3,1fr);
    gap:20px
}
.blog-card{
    border-radius:9px;
    overflow:hidden;
    box-shadow:0 5px 22px rgba(20,50,90,.09);
    background:#fff;
    border:1px solid #eef2f6
}
.blog-card img{
    width:100%;
    height:200px;
    object-fit:cover;
    display:block
}
.card-body{
    padding:22px;
    position:relative
}
.card-body h3{
    font-size:18px;
    line-height:1.3;
    margin:14px 0 8px
}
.card-body p{
    color:#6b7c8e;
    font-size:13px
}
.meta{
    font-size:11px;
    color:#6d7d8d
}
.date-badge{
    float:left;
    background:var(--accent-color);
    color:#fff;
    padding:7px 10px;
    border-radius:3px;
    text-align:center;
    margin-right:12px;
    font-weight:700;
    line-height:1.1
}
.date-badge span{
    display:block;
    font-size:10px;
    text-transform:uppercase
}
.read{
    color:var(--accent-color);
    font-size:13px;
    font-weight:700
}
.empty{
    padding:50px;
    text-align:center;
    background:#f8fbff
}


.article{
    padding-bottom:30px
}
.article-head{
    text-align:center;
    max-width:900px;
    margin:0 auto 30px
}
.article-head h1{
    font-size:42px;
    line-height:1.15;
    margin:15px 0
}
.article-meta{
    color:#7a8998;
    font-size:13px
}
.article-cover{
    width:100%;
    max-height:560px;
    object-fit:cover;
    border-radius:3px
}
.article-layout{
    display:grid;
    grid-template-columns:250px 1fr;
    gap:50px;
    max-width:1000px;
    margin:40px auto
}
.toc{
    background:#f8fbff;
    padding:22px;
    height:max-content;
    border-radius:5px
}
.toc h4{
    margin-top:0
}
.toc ol{
    padding-left:18px;
    font-size:13px
}
.article-content{
    font-size:16px;
    color:#45576a
}
.article-content h2{
    font-size:26px;
    color:#17365d;
    margin-top:38px
}
.article-content h3{
    color:#17365d
}
.article-content blockquote{
    border-left:3px solid var(--accent-color);
    margin:30px 0;
    padding:15px 20px;
    color:#526a80;
    font-style:italic;
    background:#f7fbff
}
.related{
    padding-bottom:40px
}
.not-found{
    padding:100px 0;
    text-align:center
}
.admin{
    background:#f5f8fc;
    color:#183b63
}
.sidebar{
    position:fixed;
    left:0;
    top:0;
    bottom:0;
    width:250px;
    background:#083e72;
    color:#fff;
    padding:25px 18px;
    z-index:10
}
.admin-brand{
    font-size:27px;
    font-weight:700;
    padding:5px 15px 30px
}
.admin-brand small{
    font-size:11px;
    background:var(--accent-color);
    padding:4px 6px;
    border-radius:4px
}
.sidebar>a{
    display:block;
    padding:12px 15px;
    border-radius:5px;
    color:#d8e8fa;
    margin:4px 0
}
.sidebar>a:hover{
    background:var(--accent-color);
    color:#fff
}
.admin-main{
    margin-left:250px;
    min-height:100vh
}
.admin-top{
    height:70px;
    background:#fff;
    border-bottom:1px solid #e5ebf1;
    display:flex;
    align-items:center;
    justify-content:flex-end;
    padding:0 30px
}
.admin-content{
    padding:30px
}
.admin-content h1{
    margin-top:0
}
.mobile-menu{
    display:none
}
.stats{
    display:grid;
    grid-template-columns:repeat(4,1fr);
    gap:18px;
    margin:25px 0
}
.stats>div,.admin-card{
    background:#fff;
    border:1px solid #e8edf3;
    border-radius:8px;
    padding:22px;
    box-shadow:0 3px 15px rgba(25,50,80,.04)
}
.stats span{
    display:block;
    color:#728296;
    font-size:13px
}
.stats strong{
    font-size:30px;
    display:block;
    margin-top:6px
}
.admin-card-head{
    display:flex;
    align-items:center;
    justify-content:space-between;
    margin:15px 0
}
.admin-card-head h1,.admin-card-head h2{
    margin:0
}
.muted{
    color:#7a8998
}
.table-wrap{
    overflow:auto
}
table{
    width:100%;
    border-collapse:collapse
}
th,td{
    text-align:left;
    padding:13px 10px;
    border-bottom:1px solid #edf1f5;
    font-size:13px;
    vertical-align:middle
}
th{
    color:#6e7d8e;
    font-size:11px;
    text-transform:uppercase
}
.table-blog{
    display:flex;
    align-items:center;
    gap:12px;
    min-width:280px
}
.table-blog img{
    width:58px;
    height:44px;
    border-radius:5px;
    object-fit:cover
}
.table-blog small{
    display:block;
    color:#8391a0
}
.status{
    padding:4px 9px;
    border-radius:20px;
    font-size:11px;
    font-weight:700
}
.status.active{
    background:#e8f8ef;
    color:#16814a
}
.status.inactive{
    background:#fff0f0;
    color:#c43d3d
}
.actions{
    display:flex;
    gap:8px;
    align-items:center
}
.actions a,.actions button{
    background:none;
    border:0;
    padding:0;
    color:var(--accent-color);
    cursor:pointer;
    font:inherit
}
.actions .danger-link,.danger-link{
    color:#d44343
}
.inline{
    display:inline
}
.toolbar{
    display:grid;
    grid-template-columns:1fr 180px auto auto;
    gap:10px;
    margin-bottom:20px
}
.form-card label{
    display:block;
    font-weight:600;
    font-size:13px;
    margin-bottom:18px
}
.form-card label input,.form-card label select,.form-card label textarea{
    display:block;
    margin-top:7px
}
.form-grid{
    display:grid;
    grid-template-columns:repeat(2,1fr);
    gap:0 20px
}
.editor{
    font-family:monospace;
    line-height:1.5
}
.preview-image{
    max-width:350px;
    max-height:220px;
    object-fit:cover;
    border-radius:6px;
    margin:0 0 20px
}
.check{
    display:flex!important;
    gap:8px;
    align-items:center
}
.check input{
    width:auto!important
}
.form-actions{
    display:flex;
    gap:10px
}
.alert{
    padding:12px 15px;
    border-radius:5px;
    margin-bottom:18px
}
.alert.success{
    background:#e8f8ef;
    color:#137643
}
.alert.danger{
    background:#fff0f0;
    color:#b93232
}
.two-col{
    display:grid;
    grid-template-columns:1fr 1fr;
    gap:20px
}
.category-admin-list>div{
    display:flex;
    justify-content:space-between;
    padding:12px 0;
    border-bottom:1px solid #edf1f5
}
.category-admin-list small{
    color:#7d8b9a
}
.admin-login{
    background:#f1f6fb;
    display:grid;
    place-items:center;
    min-height:100vh
}
.login-box{
    width:min(430px,92%);
    background:#fff;
    padding:40px;
    border-radius:10px;
    box-shadow:0 12px 45px rgba(30,65,100,.12)
}
.login-box .brand{
    display:block;
    color:var(--accent-color);
    margin-bottom:25px
}
.login-box h1{
    margin:0
}
.login-box label{
    display:block;
    font-weight:600;
    font-size:13px;
    margin:18px 0
}
.login-box label input{
    display:block;
    margin-top:7px
}
.full{
    width:100%
}
.login-box small{
    display:block;
    margin-top:20px;
    color:#7c8996
}
 @media(max-width:900px){
    .feature-grid{
        grid-template-columns:1fr 1fr;
        grid-template-rows:250px 180px 180px
    }
    .feature-card.f1{
        grid-row:span 2
    }
    .feature-card.f5{
        grid-column:1/3
    }
    .blog-grid{
        grid-template-columns:repeat(2,1fr)
    }
   
    .article-layout{
        grid-template-columns:1fr
    }
    .toc{
        order:2
    }
    .stats{
        grid-template-columns:repeat(2,1fr)
    }
    .sidebar{
        transform:translateX(-100%);
        transition:.2s
    }
    .sidebar-open .sidebar{
        transform:none
    }
    .admin-main{
        margin-left:0
    }
    .mobile-menu{
        display:block;
        margin-right:auto;
        background:none;
        border:0;
        font-size:22px;
        color:#1268d5
    }
    .admin-top{
        justify-content:flex-end
    }
    .toolbar{
        grid-template-columns:1fr 1fr
    }
    .form-grid{
        grid-template-columns:1fr
    }
}
 @media(max-width:600px){
    .topbar{
        display:none
    }
    .nav{
        height:auto;
        padding:14px 0;
        flex-wrap:wrap
    }
    .brand{
        width:100%
    }
    .nav nav{
        order:3;
        width:100%;
        justify-content:space-between;
        gap:8px;
        font-size:12px
    }
    .nav .btn{
        display:none
    }
    .page-head .container{
        align-items:flex-start;
        gap:10px;
        flex-direction:column
    }
    .feature-grid{
        display:block
    }
    .feature-card{
        height:190px;
        margin-bottom:12px
    }
    .f1{
        height:250px!important
    }
    .section-heading{
        display:block
    }
    .search{
        margin-top:20px
    }
    .search input{
        width:100%
    }
    .blog-grid{
        grid-template-columns:1fr
    }
   
    .article-head h1{
        font-size:30px
    }
    .article-layout{
        margin-top:25px
    }
    .stats{
        grid-template-columns:1fr 1fr
    }
    .admin-content{
        padding:18px
    }
    .admin-card-head{
        align-items:flex-start;
        gap:10px
    }
    .toolbar{
        grid-template-columns:1fr
    }
    .form-grid{
        grid-template-columns:1fr
    }
}
/* Blog detail engagement */
 .article-engagement{
    max-width:1000px;
    margin:24px auto 0;
    padding:18px 20px;
    background:#f8fbff;
    border:1px solid #e5edf6;
    border-radius:8px;
    display:flex;
    align-items:center;
    justify-content:space-between;
    gap:18px;
    flex-wrap:wrap
}
.engagement-group,.share-group{
    display:flex;
    align-items:center;
    gap:8px;
    flex-wrap:wrap
}
.reaction-btn,.share-btn{
    font:inherit;
    font-size:13px;
    border:1px solid #dbe5ef;
    background:#fff;
    color:#294968;
    border-radius:6px;
    padding:8px 12px;
    cursor:pointer;
    display:inline-flex;
    align-items:center;
    gap:6px
}
.reaction-btn:hover,.share-btn:hover{
    border-color:var(--accent-color);
    color:#1268d5
}
.reaction-btn.selected.like{
    background:#e9f5ff;
    border-color:var(--accent-color);
    color:#1268d5
}
.reaction-btn.selected.dislike{
    background:#fff0f0;
    border-color:#d44343;
    color:#d44343
}
.reaction-btn b{
    font-size:12px
}
.share-label{
    font-size:12px;
    color:#6d7d8d;
    font-weight:700;
    margin-right:3px
}
.share-count{
    font-size:11px;
    color:#7a8998;
    margin-left:3px
}
.engagement-message{
    width:100%;
    font-size:12px;
    color:var(--accent-color);
    min-height:18px
}
.native-share{
    display:none
}
@media(max-width:600px){
    .article-engagement{
        align-items:stretch
    }
    .engagement-group,.share-group{
        width:100%
    }
    .native-share{
        display:inline-flex
    }
    .share-label{
        width:100%
    }
}