body {
    font-family: "Helvetica Neue", Helvetica, Arial, "PingFang SC", "Hiragino Sans GB", "Heiti SC", "Microsoft YaHei", "WenQuanYi Micro Hei", sans-serif;
    min-height: 100vh; /* ensure footer sticks to viewport bottom */
    display: flex;
    margin: 0;
    flex-direction: column;
}
a{
    text-decoration: none;
    color: #3d3d3f;
}
p{
    line-height: 2;
    margin-bottom: 1em;
}

p img{
    width: 100%;
    border-radius: 4px;
    display: block;
    margin: 3em 0;
    height: auto;
}
p code{
    font-size: .95em;
    border-radius: 3px;
    -moz-border-radius: 3px;
    -webkit-border-radius: 3px;
    color: #222;
    background: #e8eff0;
    padding: 5px 5px;
}

h1:before{
    content: "# ";
    color:#ff7e79;
    font-weight: 1000;
}
h2:before{
    content: "## ";
    color:#ff7e79;
    font-weight: 1000;
}
h3:before{
    content: "### ";
    color:#ff7e79;
    font-weight: 1000;
}
pre{
    margin: 0 0 10px;
    font-size: 15px;
    line-height: 1.42857;
    word-break: break-all;
    word-wrap: break-word;
    border-radius: 4px;
    white-space: pre-wrap;
    display: block;
    background: #f8f8f8;
    padding: 10px 20px;
    border: none;
    margin-bottom: 25px;
    color: #666;
    font-family: Courier, sans-serif;
    word-spacing: normal;
    word-break: normal;
    overflow-wrap: normal;
    overflow-y: hidden;
}
/* Ensure code inside pre is styled (the nested rule above isn't valid in plain CSS) */
pre code{ border-radius:4px; font-size:90%; }
ul{
    padding: 0;
    margin: 0;
}
hr {
    display: flex;
    border: 0;
    margin: 1em auto;
    justify-content: center;
    align-items: center;

}
hr:before{
    color: rgba(0, 0, 0, 0.2);
    font-size: 1em;
    display: block;
    content: "* * *";
    text-align: center;
}
.site-header{
    display: flex;
    justify-content: space-between;
    padding: 2em 25%;
    margin-bottom: 2em;
    align-items: center;
    border-bottom: 1px solid #eee;
}

.site-header .brand{
    text-decoration: none;
    font-weight: 800;
    font-size: 15px;
    background-color: #3c546c;
    color: white;
    padding: 10px 30px;
    border-radius: 4px;
    letter-spacing: 1.5px;
}

.site-header .nav{
    background-color: #ffffff;
    display: flex;
    border-radius: 6px;
    box-shadow: 0 0 6px 0 rgba(161, 154, 154, 0.38);
    font-size: 14px;
    padding: 0.6em 2em;
}

.site-header .nav a{
    display: flex;
    align-items: center;
    padding: 5px 15px;
    color:#3d3d3f;
}
.site-header .nav a:hover {
    border-radius: 6px;
    background-color: #f4f4f4;
}
/* Hamburger button (hidden on desktop) */
.site-header .nav-toggle{ display:none; align-items:center; justify-content:center; width:40px; height:40px; border:1px solid transparent; border-radius:6px; background:#fff; cursor:pointer; }
.site-header .nav-toggle .icon{ font-size:22px; line-height:1; color:#3d3d3f; }
.site-header .nav-toggle:hover{ background:#f4f4f4; }
.post-item{
    text-decoration: none;
    list-style: none;
}
.container{
    padding: 1em 25%;
}
.container .post-list{
    padding: 0px;
}
.container .post-list .post-item{
    color: #3d3d3f;
    font-size: 16px;
    line-height: 1.7em;
    border-bottom: 2px dashed #eee;
    letter-spacing: 1px;
    padding-bottom: 1em;
    margin-bottom: 3em;
}
.container .post-list .post-item .post-title{
    padding-bottom: 1em;
}
.container .post-list .post-item .post-title a{
    font-size: 28px;
    font-weight: 700;
    margin: 0.5em 0;
    letter-spacing: 1.6px;
}


.container .post-list .post-item p{
    line-height: 2;
    margin-bottom: 1em;
}

.container .post-list .post-item .detail_post{
    display: flex;
    margin-bottom: 1em;
    flex-direction: column;
    color: #aaa;
    font-size: 12px;
}

.container .post-list .post-item .detail_post .categories a{
    color: #aaa;
    text-decoration: underline;
}

.archive li{
    list-style-type: none;
    display: flex;
    flex-direction: column;
    align-items: center;
    margin-bottom: 1.5em;
}

.archive li .post_date{
    color: rgba(122, 122, 122, 0.6784313725);
    font-size: 14px;
    letter-spacing: 1.2px;
}
.archive li .post_title{
    font-size: 20px;
    padding: 0.3em 0;
    font-weight: bold;
    letter-spacing: 1.5px;
    text-decoration: none;
    color: #3273dc;
    text-align: center;
}

/* admin login */
.auth-wrap{display:flex;align-items:center;justify-content:center;min-height:60vh;}
.card{width:100%;max-width:420px;background:#fff;border:1px solid #eee;border-radius:8px;padding:20px;box-shadow: 0 0px 4px rgba(0, 0, 0, .06);box-sizing:border-box;}
.card-title{margin:0 0 12px;font-size:1.35rem;}
.form{margin-top:8px;}
.form-group{display:flex;flex-direction:column;margin-bottom:12px;}
.form-group label{font-size:.9rem;color:#444;margin-bottom:6px;}
.form-group input{border:1px solid #ddd;border-radius:6px;padding:10px 12px;font-size:1rem;outline:none;background:#fafafa;}
.form-group input:focus{border-color:#3c546c;background:#fff;box-shadow:0 0 0 3px rgba(60,84,108,.15);}
.btn{display:inline-flex;align-items:center;justify-content:center;padding:10px 14px;border:1px solid transparent;border-radius:6px;cursor:pointer;text-decoration:none;font-weight:600;}
.btn-block{width:100%;}
.btn-primary{background:#3c546c;color:#fff;}
.btn-primary:hover{background:#2f4357;}
.btn-secondary{background:#f4f6f8;color:#3d3d3f;border:1px solid #e5e7eb;}
.btn-secondary:hover{background:#eaedf1;}
.btn-danger{background:#ff7e79;color:#fff;}
.btn-danger:hover{background:#ff6b65;}
.btn[disabled], .btn:disabled{opacity:.6;cursor:not-allowed;}
.muted{color:#667085;}
.text-center{text-align:center;}
.small-gap{margin-top:10px;}

.archive h2{
    text-align: center;
}

.categories-area .header{
    margin-bottom: 2em;
    display: flex;
    justify-content: center;
}
.categories-area .header span{
    text-align: center;

    background-color: #3273dc;
    color: #fff;
    padding: 7px 15px;
    border-radius: 3px;
    font-size: 16px;
    text-decoration: none;
    font-weight: 700;
    letter-spacing: 1.5px;
}
.categories-area .categories{
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: center;
}

.categories-area .categories .category{
    display: flex;
    font-size: 18px;
    font-weight: 700;
    word-break: break-word;
    margin: 5px 10px;
    align-items: flex-start;
}

.categories-area .categories .category a{
    color: #437ddaf2;
    text-decoration: none;
}
.categories-area .categories .category a{
    color: #437ddaf2;
    text-decoration: none;
}
.categories-area .categories .category .terms_count{
    color: #ff7e79;
    padding-left: 3px;
    font-size: 10px;
}

.tags-area .header{
    margin-bottom: 2em;
    display: flex;
    justify-content: center;
}
.tags-area .header span{
    text-align: center;

    background-color: #3273dc;
    color: #fff;
    padding: 7px 15px;
    border-radius: 3px;
    font-size: 16px;
    text-decoration: none;
    font-weight: 700;
    letter-spacing: 1.5px;
}
.tags-area .tags{
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: center;
}

.tags-area .tags .tag{
    display: flex;
    font-size: 18px;
    font-weight: 700;
    word-break: break-word;
    margin: 5px 10px;
    align-items: flex-start;
}

.tags-area .tags .tag a{
    color: #437ddaf2;
    text-decoration: none;
}
.tags-area .tags .tag a{
    color: #437ddaf2;
    text-decoration: none;
}
.tags-area .tags .tag .terms_count{
    color: #ff7e79;
    padding-left: 3px;
    font-size: 10px;
}

/* Admin shared */
.admin-header{display:flex;align-items:center;justify-content:space-between;border-bottom:1px solid #eee;margin:10px 0 16px;padding-bottom:8px;gap:12px;flex-wrap:wrap;}
.tabs{display:flex;align-items:center;gap:12px;}
.tab{display:inline-flex;align-items:center;justify-content:center;padding:8px 10px;border-radius:6px;color:#3d3d3f;text-decoration:none;font-weight:600;}
.tab:hover{background:#f4f4f4;}
.tab.active{color:#3c546c;position:relative;}
.tab.active:after{content:"";position:absolute;left:8px;right:8px;bottom:-9px;height:3px;background:#3c546c;border-radius:2px;}
.admin-toolbar{display:flex;align-items:center;justify-content:space-between;margin:10px 0 16px;gap:12px;flex-wrap:wrap;}
.admin-toolbar .left,.admin-toolbar .right{display:flex;align-items:center;gap:8px;}
.inline-form{display:inline;margin:0;padding:0;}

.table-responsive{width:100%;overflow:auto;border:1px solid #eee;border-radius:8px;background:#fff;}
.admin-table-wrap{max-width:960px;margin:0 auto;}
.table{width:100%;border-collapse:separate;border-spacing:0;}
.table thead th{position:sticky;top:0;background:#fafafa;color:#444;font-weight:700;text-align:left;padding:12px 14px;border-bottom:1px solid #eee;}
.table thead th.actions{text-align:center;}
.table thead th, .table tbody td{white-space:normal;word-break:break-word;overflow-wrap:anywhere;}
.table tbody td{padding:12px 14px;border-bottom:1px solid #f0f0f0;color:#3d3d3f;line-height:1.6;}
.table tbody tr:last-child td{border-bottom:none;}
.table tbody tr:nth-child(odd){background:#fcfcfc;}
.table tbody tr:hover{background:#fafafa;}
.table tbody td:last-child .btn{margin-right:6px;}
.table tbody td.actions{display:flex;align-items:center;gap:8px;flex-wrap:wrap;justify-content:flex-end;}
.table tbody td.title a{color:#3d3d3f;text-decoration:underline;text-underline-offset:2px;font-weight:600;}
.table tbody td.date{white-space:nowrap;}

/* Compact buttons inside tables */
.btn-sm{padding:6px 10px;font-size:.92rem;border-radius:6px;}

/* Paginator (shared) */
.paginator{display:flex;align-items:center;justify-content:center;gap:8px;margin:16px 0;}
.paginator a{display:inline-flex;align-items:center;justify-content:center;padding:6px 12px;border:1px solid #e5e7eb;border-radius:6px;background:#fff;color:#3d3d3f;text-decoration:none;}
.paginator a:hover{background:#f4f4f4;}
.paginator .page-number{color:#667085;padding:0 6px;}

/* Form controls (reuse login styles) */
.form{margin-top:8px;}
.form-group{display:flex;flex-direction:column;margin-bottom:12px;}
.form-group label{font-size:.9rem;color:#444;margin-bottom:6px;}
.form-group input,.form-group textarea,.form-group select{border:1px solid #ddd;border-radius:6px;padding:10px 12px;font-size:1rem;outline:none;background:#fafafa;width:100%;}
.form-group input,.form-group textarea,.form-group select{box-sizing:border-box;max-width:100%;}
.form-group textarea{resize:vertical;}
.form-group input:focus,.form-group textarea:focus,.form-group select:focus{border-color:#3c546c;background:#fff;box-shadow:0 0 0 3px rgba(60,84,108,.15);}
.form-actions{display:flex;gap:10px;margin-top:12px;}

/* Card variant for wide forms */
.admin-card{width:100%;max-width:none;box-sizing:border-box;}

.articles .post-list .post-item{
    list-style-type: none;
    display: flex;
    flex-direction: column;
    align-items: center;
    margin-bottom: 0em;
    padding-bottom: 0px;
    border-bottom:none;
}

.articles .post-list .post-item .post-title{
    margin-bottom: 2em;
    display: flex;
    justify-content: center;
}

.articles .post-list .post-item .post_date {
    color: rgba(122, 122, 122, 0.6784313725);
    font-size: 14px;
    letter-spacing: 1.2px;
}

.articles .post-list .post-item .post-title {
    font-size: 20px;
    padding: 0.3em 0;
    font-weight: bold;
    letter-spacing: 1.5px;
    text-decoration: none;
    color: #3273dc;
    text-align: center;
}

article .post-header{
    border-left: 12px solid #ff7e79;
    margin-bottom: 4em;
    padding-left: 6em;

    color: #3d3d3f;
    font-size: 16px;
    line-height: 1.7em;
    letter-spacing: 1px;
    padding-bottom: 2em;
}

article .post-header .post-title{
    display: flex;
    justify-content: flex-end;
}
article .post-header .post-title:before{
    content: ''
}


article .post-header .detail_post{
    display: flex;
    margin-bottom: 1em;
    flex-direction: column;
    color: #aaa;
    font-size: 12px;

    display: flex;
    align-items: flex-end;
}

/*
 * Optimizations while keeping current design
 * - Better content wrapping and image behavior
 * - Mobile-friendly paddings
 * - Accessible focus state for links
 */
.post-content{ word-break: break-word; overflow-wrap: anywhere; line-height: 1.9; }
.post-content img{ max-width:100%; height:auto; display:block; border-radius:4px; margin:1.5em 0; }
.post-content figure{ margin:1.5em 0; }
.post-content ul, .post-content ol{ padding-left:1.25em; margin:.8em 0; }

/* Improve code block scrolling on narrow screens */
pre{ overflow:auto; -webkit-overflow-scrolling:touch; }
code, pre{ font-family: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono", "Courier New", monospace; }

/* Focus-visible styles for accessibility */
a:focus-visible{ outline:2px solid #3c546c; outline-offset:2px; }

/* Responsive paddings without changing desktop look */
/* Tablet: stack brand and nav to two lines and center */
@media (max-width: 1024px){
    .site-header{ padding: 1.5em 10%; flex-direction: column; align-items: center; }
    .site-header .nav{ margin-top: 12px; justify-content: center; }
    .container{ padding: 1em 10%; }
}
@media (max-width: 768px){
    /* Mobile: brand + hamburger on first row, menu toggles below */
    .site-header{ padding: 2em 2em; flex-direction: row; flex-wrap: wrap; align-items: center; }
    .site-header .nav-toggle{ display:inline-flex; order:2; margin-left:auto; }
    .site-header .brand{ order:1; }
    .site-header .nav{ order:3; display:none; width:100%; flex-direction: column; padding: .4em .6em; margin-top: 8px; align-items: center; text-align: center; }
    .site-header .nav.open{ display:flex; }
    .site-header .nav a{ padding: 10px 12px; border-radius:6px; text-align: center; }
    .container{ padding: 1em 2em; }
    p img{ margin: 1.25em 0; }
    /* Center actions in narrow tables */
    .table tbody td.actions{ justify-content:center; }
    /* Admin header and tabs center on mobile */
    .admin-header{ justify-content:center; }
    .admin-header .tabs{ width:100%; justify-content:center; }
    .admin-table-wrap{ max-width:100%; }
    .table thead th, .table tbody td{ padding:10px 12px; font-size:.95rem; }
}

/* Text selection styling (cross-browser) */
::selection{ background:#fff3b0; color:#1f2937; }
::-moz-selection{ background:#fff3b0; color:#1f2937; }
@media (prefers-color-scheme: dark){
  ::selection{ background:#b48b00; color:#f5f5f5; }
  ::-moz-selection{ background:#b48b00; color:#f5f5f5; }
}

article .post-header .detail_post .tags_post{
    display: flex;
    justify-content: flex-start;
}

article .post-header .detail_post .tags_post li{
    list-style: none;
}

article .post-header .detail_post .tags_post li a{
    text-decoration-style: dashed;
}

article .post-back{
    margin-top: 2em;
}

/* Footer */
.site-footer{ margin-top:auto; border-top:1px solid #eee; background:#fafafa; color:#667085; font-size:14px; padding:1.25em 25%; }
.site-footer .footer-inner{ display:flex; align-items:center; justify-content:space-between; gap:8px 12px; flex-wrap:wrap; }
.site-footer .footer-text{ margin:0; }
.site-footer .footer-nav{ display:flex; align-items:center; gap:6px; }
.site-footer .footer-nav a{ color:inherit; padding:4px 8px; border-radius:6px; text-decoration:none; }
.site-footer .footer-nav a:hover{ background:#f4f4f4; }
.site-footer .sep{ color:#98a2b3; }

/* Footer responsive paddings */
@media (max-width: 1024px){ .site-footer{ padding:1em 10%; } }
@media (max-width: 768px){ .site-footer{ padding:1em 2em; } .site-footer .footer-inner{ justify-content:center; } }