/* ============================================================
 * 变量、重置与页壳（文件前段）
 * base.css
 * ============================================================ */
:root{
    --paper: #faf9f6;
    --paper-strong: #ffffff;
    --ink: #222222;
    --navy: #11324a;
    --navy-2: #1d4963;
    --red: #b4382f;
    --red-dark: #8d2924;
    --line: #d6dde1;
    --line-strong: #aebbc3;
    --muted: #5d6870;
    --serif: Arial, "Noto Sans SC", "Microsoft YaHei", sans-serif;
    --sans: Arial, "Noto Sans SC", "Microsoft YaHei", sans-serif;
    --page-gutter: 0.8rem;
    --reader-header-height: 68px;
}

*{
    box-sizing: border-box
}

html{
    scroll-behavior: smooth;
    background: #fff;
    font-size: 18px;
    overflow-x: clip
}

body{
    margin: 0;
    background: #fff;
    color: var(--ink);
    font-size: 1.05rem;
    line-height: 1.65;
    overflow-x: clip
}

:focus-visible{
    outline: none;
}

a{
    color: inherit
}

button,
input{
    font: inherit
}

button{
    cursor: pointer
}

@keyframes pulse-dot {
    0% {
        box-shadow: 0 0 0 0 rgba(180, 56, 47, .45)
    }
    70% {
        box-shadow: 0 0 0 6px rgba(180, 56, 47, 0)
    }
    100% {
        box-shadow: 0 0 0 0 rgba(180, 56, 47, 0)
    }
}

.masthead{
    position: sticky;
    top: 0;
    z-index: 10;
    background: #fff;
    border-bottom: 1px solid var(--line);
    overflow: visible
}

.masthead-inner{
    max-width: 1240px;
    min-height: 66px;
    margin: auto;
    display: flex;
    align-items: center;
    gap: 1.4rem
}

.brand-lockup{
    display: flex;
    align-items: center;
    gap: .7rem;
    padding-top: 0.4rem;
    min-width: 150px;
    text-decoration: none
}

.brand-copy{
    display: grid;
    padding-top: 0.3rem;
}

.brand-copy strong{
    font: 600 1.72rem/1.05 var(--serif);
    letter-spacing: .02em
}

.brand-copy span{
    font-size: .76rem;
    color: var(--muted)
}

.primary-nav{
    display: flex;
    align-items: center;
    gap: .4rem;
    flex: 1
}

.primary-nav a,
.primary-nav .nav-a{
    padding: 1rem .68rem;
    border-bottom: 2px solid transparent;
    text-decoration: none;
    font-size: 1.08rem;
    color: #27343d;
    cursor: pointer
}

.primary-nav a:hover,
.primary-nav a:focus-visible,
.primary-nav a[aria-current="page"],
.primary-nav .nav-a:hover,
.primary-nav .nav-a:focus-visible,
.primary-nav .nav-a[aria-current="page"],
.primary-nav .nav-a.is-current{
    color: var(--red);
    border-bottom-color: var(--red);
    outline: none
}

.header-actions{
    display: flex;
    gap: .8rem;
    align-items: center
}

/* swap 透明化；议题标题走 masthead 插槽 */
.header-actions-swap{
    display: contents
}

.header-actions .header-topic-title{
    display: none !important
}

.header-actions .icon-button{
    min-width: 44px;
    min-height: 36px;
    padding: .4rem .78rem;
    background: var(--paper-strong);
    color: var(--navy);
    font-size: .82rem;
    font-weight: 750;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    text-decoration: none;
    line-height: 1
}

.header-actions .icon-button:hover,
.header-actions .icon-button:focus-visible,
.header-actions .icon-button[aria-current="page"]{
    border-color: var(--red);
    color: var(--red);
    background: #fff
}

.header-actions .header-search-trigger{
    display: inline-flex;
    align-items: center;
    min-width: 11.5rem;
    width: 13.5rem;
    min-height: 2.2rem;
    height: 2.2rem;
    padding: 0 .75rem 0 .65rem;
    gap: .4rem;
    border: 0;
    border-radius: 999px;
    background: #f0f1f3;
    color: #8b939b;
    box-sizing: border-box
}

.header-actions .header-search-icon{
    display: inline-flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
    width: 1.4rem;
    height: 1.4rem;
    margin: 0;
    padding: 0;
    border: 0;
    background: transparent;
    color: inherit;
    cursor: pointer;
    line-height: 0
}

.header-actions .header-search-trigger svg,
.header-actions .header-search-trigger .header-search-icon-img{
    display: block;
    width: 0.9rem;
    height: 0.9rem;
}

.header-actions .header-search-input{
    flex: 1;
    min-width: 0;
    height: 100%;
    margin: 0;
    padding: 0;
    border: 0;
    outline: none;
    background: transparent;
    color: var(--ink);
    font: .88rem/1.2 var(--sans);
    box-shadow: none
}

.header-actions .header-search-input::placeholder{
    color: #8b939b
}

.header-actions .header-search-trigger:focus-within,
.header-actions .header-search-trigger[aria-expanded="true"]{
    background: #e8eaed;
    color: var(--navy)
}

.header-actions .icon-button[data-header-tool="notifications"]{
    position: relative;
    min-width: 36px;
    padding: .35rem;
    border: 0;
    border-radius: 0;
    background: transparent;
    color: var(--navy);
    cursor: pointer;
    font: inherit
}

.header-actions .icon-button[data-header-tool="notifications"][hidden],
.header-notify-badge[hidden]{
    display: none !important
}

.header-actions .icon-button[data-header-tool="notifications"] svg{
    display: block;
    width: 1.15rem;
    height: 1.15rem
}

.header-actions .icon-button[data-header-tool="notifications"]:hover,
.header-actions .icon-button[data-header-tool="notifications"]:focus-visible,
.header-actions .icon-button[data-header-tool="notifications"][aria-expanded="true"]{
    border: 0;
    background: transparent;
    color: var(--red)
}

.header-notify-badge{
    position: absolute;
    top: 2px;
    right: -1px;
    min-width: 1rem;
    height: 1rem;
    padding: 0 .22rem;
    border-radius: 999px;
    background: var(--red);
    color: #fff;
    font: 700 .58rem/1rem var(--sans);
    letter-spacing: 0;
    text-align: center;
    pointer-events: none
}

.header-notify-head{
    display: flex;
    padding-bottom: 0.6rem;
    align-items: baseline;
    justify-content: space-between;
    gap: .75rem
}

.header-notify-head .header-desk-title{
    margin: 0
}

.header-notify-readall{
    border: 0;
    background: transparent;
    color: var(--red);
    cursor: pointer;
    font: 600 .82rem/1.2 var(--sans);
    padding: 0
}

.header-notify-readall:hover,
.header-notify-readall:focus-visible{
    text-decoration: underline
}

.header-notify-list{
    display: grid;
    gap: 0
}

.header-notify-item{
    padding: 0.6rem 0;
    border-bottom: 1px solid var(--line)
}

.header-notify-item:last-child{
    border-bottom: 0
}

.header-notify-item.is-unread .header-notify-title{
    color: var(--ink);
    font-weight: 700
}

.header-notify-item-top{
    display: flex;
    align-items: baseline;
    justify-content: space-between;
    gap: .6rem;
    margin: 0 0 .55rem
}

.header-notify-type{
    color: var(--navy);
    font: 600 .84rem/1.25 var(--sans)
}

.header-notify-time{
    flex-shrink: 0;
    color: #8b939b;
    font: 400 .8rem/1.25 var(--sans)
}

.header-notify-item-top time{
    color: #8b939b;
    font: 400 .8rem/1.25 var(--sans)
}

.header-notify-title{
    display: block;
    margin: 0;
    color: var(--ink);
    font: 700 .88rem/1.45 var(--sans)
}

.header-notify-body{
    display: block;
    margin: .2rem 0 0;
    color: var(--muted);
    font: 400 .86rem/1.55 var(--sans)
}

.header-notify-actions{
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: .85rem;
    margin-top: .4rem
}

.header-notify-link{
    border: 0;
    background: transparent;
    color: var(--red);
    cursor: pointer;
    font: 600 .84rem/1.2 var(--sans);
    padding: 0;
    text-decoration: none
}

.header-notify-link:hover,
.header-notify-link:focus-visible{
    text-decoration: underline
}

/* 桌面通知弹层：未登录空态（对齐 Vue NotifyList panel） */
.notify-guest-body{
    display: flex;
    flex-direction: column;
    align-items: center;
    text-align: center;
    gap: .45rem;
    padding: .85rem .35rem .25rem
}

.notify-guest-icon{
    display: block;
    width: 56px;
    height: 56px;
    margin: 0 0 .15rem;
    object-fit: contain;
    flex-shrink: 0;
    user-select: none;
    pointer-events: none
}

.notify-guest-title{
    margin: 0;
    color: var(--ink);
    font: 600 .95rem/1.35 var(--serif)
}

.notify-guest-copy{
    margin: 0;
    max-width: 16.5rem;
    color: var(--muted);
    font: .8rem/1.55 var(--serif)
}

.notify-guest-btn{
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 7.5rem;
    min-height: 2.35rem;
    margin-top: .55rem;
    padding: .4rem 1.15rem;
    border: 0;
    background: transparent;
    color: var(--red);
    cursor: pointer;
    font: 600 .88rem/1.2 var(--sans);
    border-radius: .2rem
}

.notify-guest .header-desk-title{
    margin-bottom: 0
}

@keyframes header-desk-in {
    from {
        opacity: 0;
        transform: translateY(-8px)
    }
    to {
        opacity: 1;
        transform: translateY(0)
    }
}

.header-desk-card{
    padding: 1rem 1.1rem 1.15rem
}

.header-desk-title{
    margin: .42rem 0 0;
    font: 600 1.08rem/1.25 var(--serif)
}

.header-desk-empty{
    margin-top: .85rem;
    margin-bottom: 0;
    color: var(--muted);
    font: 500 .9rem/1.4 var(--sans);
    letter-spacing: .04em
}

.header-desk-empty{
    padding-bottom: .35rem;
    font: .88rem/1.55 var(--serif)
}

.page{
    max-width: 1240px;
    margin: 1rem auto;
    min-height: calc(100vh - 218px);
    padding: 0 var(--page-gutter) 1.5rem;
    background: #fff;
    border-radius: 8px;
}

/* 全局列表空状态 */
.list-empty{
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: .55rem;
    margin: 0;
    padding: 4rem 1rem 2.9rem;
    text-align: center;
    border: 0;
    background: transparent
}

.list-empty-icon{
    display: block;
    width: 80px;
    height: 80px;
    margin: 0;
    object-fit: contain;
    user-select: none;
    pointer-events: none
}

.list-empty-text{
    margin: 0;
    max-width: 40rem;
    color: var(--muted);
    font: .95rem/1.65 var(--serif)
}

.list-empty.is-compact{
    padding: 1.15rem .75rem 1.25rem;
    gap: .4rem
}

.list-empty.is-compact .list-empty-icon{
    width: 56px;
    height: 56px
}

.list-empty.is-compact .list-empty-text{
    font-size: .84rem;
    line-height: 1.55
}

/* 兼容旧 class：纯 .empty-state 也走同一套视觉 */

/* 全局列表 / 页面加载态 */

@-webkit-keyframes list-loading-spin {
    to {
        -webkit-transform: rotate(360deg);
        transform: rotate(360deg)
    }
}

@keyframes list-loading-spin {
    to {
        -webkit-transform: rotate(360deg);
        transform: rotate(360deg)
    }
}

/* —— 弹层（原 05-about） —— */
.dialog{
    width: min(680px, calc(100% - 2rem));
    padding: 0;
    border: 0;
    background: var(--paper-strong);
    color: var(--ink)
}

.dialog::backdrop{
    background: rgba(17, 50, 74, .7)
}

.dialog-inner{
    padding: 1.25rem 1.35rem 1.5rem
}

.dialog-close{
    float: right;
    min-height: 42px;
    border: 1px solid var(--line-strong);
    background: #fff;
    color: var(--navy)
}

.dialog h2{
    margin: .1rem 0 1rem;
    padding-right: 3rem;
    font: 600 1.45rem var(--serif)
}

.dialog form{
    display: flex;
    gap: .5rem
}

.dialog input{
    flex: 1;
    min-height: 38px;
    padding: .5rem .65rem;
    border: 1px solid var(--line-strong)
}

/* —— 原 05-about 中的全站规则 —— */
@media (prefers-reduced-motion: reduce){html{
        scroll-behavior: auto
    }
}

@media print{.masthead,
.article-aside,
.site-footer{
        display: none !important
    }

    .page{
        max-width: none;
        padding: 0
    }

    .article-reading-layout{
        display: block
    }

    .article-body{
        max-width: 100%
    }
}

input[type="file"]{
    min-height: 38px;
    padding: .45rem .5rem;
    border: 1px dashed var(--line-strong);
    background: #fff;
    color: var(--navy);
    font: inherit
}

.visually-hidden{
    position: absolute !important;
    width: 1px;
    height: 1px;
    padding: 0;
    margin: -1px;
    overflow: hidden;
    clip: rect(0, 0, 0, 0);
    white-space: nowrap;
    border: 0;
}