:root {
    --bg: #f5f7fb;
    --panel: #ffffff;
    --panel-soft: #f8fafc;
    --accent: #2563eb;
    --accent-2: #f59e0b;
    --text: #1f2937;
    --muted: #6b7280;
    --border: #e5e7eb;
}

* {
    box-sizing: border-box;
}

body {
    margin: 0;
    font-family: "Segoe UI", Arial, sans-serif;
    background: linear-gradient(180deg, #f8fafc 0%, #f3f4f6 100%);
    color: var(--text);
}

.topbar {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 1rem 2rem;
    background: rgba(255,255,255,0.95);
    border-bottom: 1px solid var(--border);
    position: sticky;
    top: 0;
    z-index: 10;
}

.brand {
    font-size: 1.25rem;
    font-weight: 700;
    color: var(--accent);
}

.nav-links a,
.social-links a {
    color: var(--text);
    text-decoration: none;
    margin-left: 0.85rem;
}

.nav-links a:hover,
.social-links a:hover {
    color: var(--accent);
}

.container {
    max-width: 1100px;
    margin: 0 auto;
    padding: 1.5rem 1rem 4rem;
}

.hero,
.card,
.flash {
    background: var(--panel);
    border: 1px solid var(--border);
    border-radius: 14px;
    padding: 1.2rem;
    box-shadow: 0 6px 24px rgba(15,23,42,0.05);
    margin-bottom: 1rem;
}

.card-grid {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 1rem;
}

.card-list {
    display: grid;
    gap: 1rem;
}

.table {
    width: 100%;
    border-collapse: collapse;
}

.table th,
.table td {
    border-bottom: 1px solid var(--border);
    padding: 0.7rem;
    text-align: left;
}

.button,
button,
input,
textarea,
select {
    font: inherit;
}

button,
.button {
    display: inline-block;
    padding: 0.7rem 1rem;
    border: none;
    border-radius: 8px;
    background: var(--accent);
    color: white;
    cursor: pointer;
    text-decoration: none;
    margin-top: 0.3rem;
}

button.danger,
.button.danger {
    background: var(--danger);
}

input,
textarea {
    width: 100%;
    margin-bottom: 0.7rem;
    padding: 0.7rem;
    border-radius: 8px;
    border: 1px solid var(--border);
    background: var(--panel-soft);
    color: var(--text);
}

label {
    display: block;
    margin-bottom: 0.3rem;
}

.status.online {
    color: var(--success);
}

.status.offline {
    color: var(--danger);
}

.muted {
    color: var(--muted);
}

.post-image {
    width: 100%;
    max-width: 320px;
    border-radius: 12px;
    margin-top: 0.8rem;
}

.post-author {
    display: flex;
    align-items: center;
    gap: 0.75rem;
    margin-bottom: 0.8rem;
}

.avatar {
    width: 44px;
    height: 44px;
    border-radius: 50%;
    object-fit: cover;
    border: 1px solid var(--border);
}

.default-avatar {
    display: flex;
    align-items: center;
    justify-content: center;
    background: var(--accent);
    color: white;
    font-weight: 700;
}

/* Footer */

.footer {
    text-align: center;
    padding: 20px;
    margin-top: 40px;
    color: var(--muted);
    border-top: 1px solid var(--border);
    background: rgba(255,255,255,0.8);
}

.beian-row {
    display: flex;
    justify-content: center;
    align-items: center;
    gap: 8px;
    flex-wrap: wrap;
    margin-bottom: 10px;
}

.beian-row a {
    color: var(--muted);
    text-decoration: none;
}

.beian-row a:hover {
    color: var(--accent);
}

.social-links {
    display: flex;
    justify-content: center;
    align-items: center;
    gap: 15px;
    flex-wrap: wrap;
    margin-bottom: 10px;
}

.social-links a {
    margin: 0;
    color: var(--muted);
    text-decoration: none;
}

.social-links a:hover {
    color: var(--accent);
}

.gongan-link {
    display: inline-flex;
    align-items: center;
    gap: 5px;
}

.beian-logo {
    width: 18px;
    height: 18px;
    object-fit: contain;
}

.copyright {
    font-size: 13px;
    color: var(--muted);
    margin-top: 8px;
}

/* 手机适配 */

@media (max-width: 800px) {

    .card-grid {
        grid-template-columns: 1fr;
    }

    .topbar {
        flex-direction: column;
        gap: 0.75rem;
    }

    .nav-links {
        display: flex;
        flex-wrap: wrap;
        justify-content: center;
        gap: 10px;
    }

    .nav-links a {
        margin-left: 0;
    }

    .beian-row,
    .social-links {
        flex-direction: column;
        gap: 6px;
    }
}

.page-header{
    margin-bottom:20px;
}

.status-header{
    display:flex;
    justify-content:space-between;
    gap:16px;
    align-items:flex-start;
}

.server-grid{
    display:grid;
    grid-template-columns:repeat(auto-fit,minmax(480px,1fr));
    gap:20px;
}

.server-card{
    background: var(--panel);
    border:1px solid var(--border);
    border-radius:16px;
    padding:24px;
}

.server-top{
    display:flex;
    justify-content:space-between;
    align-items:center;
    margin-bottom:10px;
}

.server-address{
    color:var(--muted);
    margin-bottom:20px;
}

.query-port{
    display:inline-block;
    margin-left:8px;
    color: var(--muted);
    font-size:13px;
}

.badge{
    padding:6px 12px;
    border-radius:999px;
    font-size:13px;
    font-weight:600;
    white-space:nowrap;
}

.badge.online{
    background: var(--success-soft);
    color: var(--success);
}

.badge.offline{
    background: var(--danger-soft);
    color: var(--danger);
}

.badge.loading{
    background: var(--info-soft);
    color: var(--info);
}

.badge.warning{
    background: var(--warn-soft);
    color: var(--warn);
}

.stats{
    display:grid;
    grid-template-columns:repeat(2,1fr);
    gap:15px;
}

.stat{
    background: var(--panel-soft);
    border:1px solid var(--border);
    border-radius:12px;
    padding:14px;
}

.label{
    display:block;
    color: var(--muted);
    font-size:13px;
}

.value{
    display:block;
    margin-top:5px;
    font-size:22px;
    font-weight:700;
}

.compact-value{
    font-size:17px;
    word-break:break-word;
}

.player-panel,
.chart-panel,
.motd{
    margin-top:16px;
}

/* MOTD 按服务器原色渲染，垫一层深色底保证 16 色都能看清（和游戏内聊天栏一致） */
.motd [data-role="motd"]{
    display:inline-block;
    margin-top:8px;
    padding:8px 12px;
    border-radius:10px;
    background:#1f2430;
    color:#e5e7eb;
    font-family:"Consolas","DejaVu Sans Mono","Menlo",monospace;
    font-size:0.92rem;
    line-height:1.65;
    word-break:break-word;
}

.panel-title{
    margin-bottom:10px;
    font-weight:700;
}

.player-list{
    min-height:42px;
    display:flex;
    flex-wrap:wrap;
    align-items:center;
    gap:8px;
    padding:12px;
    border:1px solid var(--border);
    border-radius:12px;
    background: var(--panel-soft);
}

.player-chip{
    display:inline-flex;
    align-items:center;
    min-height:30px;
    padding:5px 10px;
    border-radius:999px;
    background: var(--accent-soft);
    color: var(--accent-dark);
    font-size:14px;
    font-weight:600;
    word-break:break-all;
}

.chart-panel{
    padding:12px;
    border:1px solid var(--border);
    border-radius:12px;
    background: var(--panel);
}

.player-chart{
    width:100%;
    height:240px;
    display:block;
}

@media(max-width:800px){

    .status-header{
        flex-direction:column;
    }

    .server-grid{
        grid-template-columns:1fr;
    }

    .stats{
        grid-template-columns:1fr;
    }

    .server-card{
        padding:18px;
    }

}

.hero{
    padding:80px 40px;
    border-radius:20px;
    margin-bottom:30px;
    text-align:center;
    background:
        linear-gradient(
            135deg,
            rgba(37,99,235,.12),
            rgba(245,158,11,.08)
        );
}

.hero h1{
    font-size:3rem;
    margin-bottom:15px;
}

.hero p{
    max-width:800px;
    margin:auto;
    color:var(--muted);
    font-size:1.1rem;
}

.hero-buttons{
    margin-top:25px;
    display:flex;
    justify-content:center;
    gap:15px;
    flex-wrap:wrap;
}

.btn-primary,
.btn-secondary{
    padding:12px 24px;
    border-radius:12px;
    text-decoration:none;
    font-weight:600;
}

.btn-primary{
    background:var(--accent);
    color:white;
}

.btn-secondary{
    background: var(--panel);
    border:1px solid var(--border);
}

.feature-grid{
    display:grid;
    grid-template-columns:repeat(auto-fit,minmax(220px,1fr));
    gap:20px;
    margin-bottom:30px;
}

.feature-card{
    background: var(--panel);
    padding:24px;
    border-radius:16px;
    text-align:center;
    border:1px solid var(--border);
    transition:.25s;
}

.feature-card:hover{
    transform:translateY(-5px);
}

.feature-icon{
    font-size:2rem;
    margin-bottom:10px;
}

.notice-box{
    background: var(--accent-soft);
    border-left:4px solid var(--accent);
    padding:12px;
    border-radius:8px;
    margin-bottom:15px;
}

.quick-grid{
    display:grid;
    grid-template-columns:repeat(2,1fr);
    gap:12px;
}

.quick-card{
    display:flex;
    flex-direction:column;
    gap:6px;
    padding:18px;
    border-radius:14px;
    text-decoration:none;
    color:inherit;
    background:var(--panel-soft);
    border:1px solid var(--border);
    transition:.25s;
}

.quick-card:hover{
    transform:translateY(-4px);
    border-color:var(--accent);
}

.quick-card span{
    font-size:1.8rem;
}

.quick-card small{
    color:var(--muted);
}

.forum-list{
    display:flex;
    flex-direction:column;
    gap:18px;
}

.forum-card{
    padding:22px;
    border-radius:16px;
    background: var(--panel);
    border:1px solid var(--border);
    transition:.25s;
}

.forum-card:hover{
    transform:translateY(-4px);
    box-shadow:0 10px 25px rgba(0,0,0,.08);
}

.forum-preview{
    margin-top:14px;
    color: var(--muted);
    line-height:1.8;
}

.forum-footer{
    margin-top:16px;
    padding-top:12px;
    border-top:1px solid var(--border);
}

.post-title{
    font-size:2rem;
    margin-bottom:20px;
}

.post-content{
    line-height:2;
    font-size:16px;
    margin:24px 0;
}

.post-gallery{
    display:grid;
    grid-template-columns:
        repeat(auto-fill,minmax(250px,1fr));
    gap:16px;
}

.gallery-image{
    width:100%;
    border-radius:12px;
    cursor:pointer;
    transition:.3s;
}

.gallery-image:hover{
    transform:scale(1.03);
}

/* =========================
   论坛 /bbs
========================= */

.forum-header-actions{
    display:flex;
    flex-wrap:wrap;
    align-items:center;
    gap:10px;
}

.bbs-search-form{
    display:flex;
    gap:8px;
}

.bbs-search-form input{
    padding:10px 14px;
    border:1px solid var(--border);
    border-radius:12px;
    min-width:200px;
}

.bbs-search-form button{
    padding:10px 18px;
    border:1px solid var(--accent);
    border-radius:12px;
    background:var(--accent);
    color:#fff;
    font-weight:600;
    cursor:pointer;
    white-space:nowrap;
}

.bbs-search-form button:hover{
    background: var(--accent-strong);
    border-color: var(--accent-strong);
    color:#fff;
}

.bbs-stats{
    display:grid;
    grid-template-columns:repeat(auto-fit,minmax(120px,1fr));
    gap:14px;
    margin-bottom:20px;
}

.bbs-stat{
    background: var(--panel);
    border:1px solid var(--border);
    border-radius:14px;
    padding:16px;
    text-align:center;
}

.bbs-stat .value{
    display:block;
    font-size:1.5rem;
    font-weight:700;
    color:var(--accent);
}

.bbs-stat .label{
    color:var(--muted);
    font-size:.85rem;
}

.bbs-category-list{
    display:flex;
    flex-direction:column;
    gap:14px;
}

.bbs-category{
    display:flex;
    align-items:center;
    gap:16px;
    padding:16px;
    border:1px solid var(--border);
    border-radius:14px;
    background:var(--panel-soft);
}

.bbs-category-icon{
    font-size:1.6rem;
    width:46px;
    height:46px;
    display:flex;
    align-items:center;
    justify-content:center;
    background: var(--panel);
    border:1px solid var(--border);
    border-radius:12px;
}

.bbs-category-main{
    flex:1;
    min-width:0;
}

.bbs-category-main h3{
    margin:0 0 4px;
}

.bbs-category-main h3 a{
    color:var(--text);
    text-decoration:none;
}

.bbs-category-main h3 a:hover{
    color:var(--accent);
}

.bbs-category-main p{
    margin:0;
}

.bbs-category-latest{
    margin-top:6px !important;
    font-size:.9rem;
}

.bbs-category-counts{
    display:flex;
    flex-direction:column;
    align-items:center;
    gap:2px;
    min-width:70px;
    text-align:center;
}

.bbs-category-counts .value{
    font-weight:700;
}

.bbs-category-counts .label{
    color:var(--muted);
    font-size:.75rem;
    margin-bottom:6px;
}

.bbs-thread-list{
    display:flex;
    flex-direction:column;
}

.bbs-thread-row{
    display:flex;
    justify-content:space-between;
    align-items:center;
    gap:16px;
    padding:14px 6px;
    border-bottom:1px solid var(--border);
    text-decoration:none;
    color:var(--text);
}

.bbs-thread-row:hover{
    background:var(--panel-soft);
}

.bbs-thread-main{
    display:flex;
    flex-direction:column;
    gap:6px;
    min-width:0;
}

.bbs-thread-title{
    font-weight:600;
    overflow:hidden;
    text-overflow:ellipsis;
}

.bbs-thread-meta{
    display:flex;
    align-items:center;
    gap:8px;
    font-size:.82rem;
    color:var(--muted);
}

.bbs-thread-stats{
    display:flex;
    gap:14px;
    color:var(--muted);
    font-size:.82rem;
    white-space:nowrap;
}

.bbs-tag{
    display:inline-block;
    padding:2px 8px;
    border-radius:999px;
    font-size:.72rem;
    font-weight:600;
    vertical-align:middle;
}

.bbs-tag.pin{
    background: var(--warn-soft);
    color: var(--warn);
}

.bbs-tag.lock{
    background: var(--chip-bg);
    color: var(--text);
}

.bbs-avatar{
    border-radius:50%;
    object-fit:cover;
    border:1px solid var(--border);
    flex:0 0 auto;
}

.bbs-avatar-text{
    display:inline-flex;
    align-items:center;
    justify-content:center;
    background:var(--accent);
    color:#fff;
    font-weight:700;
}

.bbs-author{
    display:flex;
    align-items:center;
    gap:10px;
    text-decoration:none;
    color:var(--text);
}

.bbs-author:hover strong{
    color:var(--accent);
}

.bbs-author-bio,
.bbs-bio{
    color:var(--muted);
    background:var(--panel-soft);
    border-left:3px solid var(--accent);
    padding:8px 12px;
    border-radius:8px;
}

.bbs-content{
    line-height:1.9;
    word-wrap:break-word;
}

.bbs-content a{
    color:var(--accent);
}

.bbs-attachments{
    margin-top:18px;
}

.bbs-videos{
    display:grid;
    grid-template-columns:repeat(auto-fill,minmax(320px,1fr));
    gap:16px;
    margin-top:16px;
}

.bbs-video{
    margin:0;
    background:#0f172a;
    border-radius:12px;
    overflow:hidden;
}

.bbs-video video,
.bbs-video img{
    display:block;
    width:100%;
    max-height:420px;
    background:#0f172a;
}

.bbs-video figcaption{
    display:flex;
    flex-wrap:wrap;
    gap:8px;
    align-items:center;
    padding:10px 12px;
    color:#e2e8f0;
    font-size:.85rem;
    background:#111827;
}

.bbs-video figcaption a{
    color:#93c5fd;
}

.bbs-files{
    list-style:none;
    padding:0;
    margin:16px 0 0;
    display:flex;
    flex-direction:column;
    gap:8px;
}

.bbs-files li{
    display:flex;
    align-items:center;
    gap:10px;
    padding:10px 12px;
    border:1px solid var(--border);
    border-radius:10px;
    background:var(--panel-soft);
}

.bbs-file-icon{
    font-size:1.1rem;
}

.bbs-thread-actions,
.bbs-reply-actions{
    display:flex;
    flex-wrap:wrap;
    gap:10px;
    align-items:center;
    margin-top:20px;
}

.bbs-thread-actions form,
.bbs-reply-actions form{
    margin:0;
}

.bbs-reply-list{
    display:flex;
    flex-direction:column;
    gap:16px;
}

.bbs-reply{
    border:1px solid var(--border);
    border-radius:14px;
    padding:16px;
    background:var(--panel-soft);
}

.bbs-reply-head{
    display:flex;
    justify-content:space-between;
    align-items:center;
    gap:12px;
    margin-bottom:10px;
}

.bbs-reply-actions details summary{
    cursor:pointer;
    list-style:none;
}

.bbs-reply-edit textarea{
    width:100%;
    margin:10px 0;
}

.bbs-pagination{
    display:flex;
    align-items:center;
    justify-content:center;
    gap:14px;
    margin-top:22px;
}

.bbs-pagination a,
.bbs-pagination span{
    padding:8px 14px;
    border:1px solid var(--border);
    border-radius:10px;
    background: var(--panel);
    text-decoration:none;
    color:var(--text);
}

.bbs-pagination a:hover{
    border-color:var(--accent);
    color:var(--accent);
}

.bbs-pagination .disabled,
.bbs-page-info{
    color:var(--muted);
    border:none;
    background:transparent;
}

.bbs-nav-chips{
    display:flex;
    flex-wrap:wrap;
    gap:10px;
}

.bbs-chip{
    padding:8px 14px;
    border:1px solid var(--border);
    border-radius:999px;
    text-decoration:none;
    color:var(--text);
    background: var(--panel);
}

.bbs-chip:hover,
.bbs-chip.active{
    border-color:var(--accent);
    color:var(--accent);
}

.bbs-uploader{
    margin:10px 0 18px;
}

.bbs-drop{
    display:flex;
    flex-direction:column;
    gap:6px;
    align-items:center;
    justify-content:center;
    text-align:center;
    padding:22px;
    border:2px dashed var(--border);
    border-radius:14px;
    background:var(--panel-soft);
    cursor:pointer;
}

.bbs-drop.dragging{
    border-color:var(--accent);
    background: var(--accent-soft);
}

.bbs-drop input[type="file"]{
    margin-top:10px;
    width:auto;
}

.bbs-upload-status{
    margin-top:8px;
    font-size:.88rem;
}

.bbs-upload-status.ok{
    color: var(--success);
}

.bbs-upload-status.error{
    color: var(--danger);
}

.bbs-upload-list{
    list-style:none;
    padding:0;
    margin:12px 0 0;
    display:flex;
    flex-direction:column;
    gap:8px;
}

.bbs-upload-list li{
    display:flex;
    align-items:center;
    gap:10px;
    padding:8px 12px;
    border:1px solid var(--border);
    border-radius:10px;
    background: var(--panel);
}

.bbs-upload-name{
    flex:1;
    min-width:0;
    overflow:hidden;
    text-overflow:ellipsis;
    white-space:nowrap;
}

.bbs-upload-thumb{
    width:38px;
    height:38px;
    object-fit:cover;
    border-radius:8px;
}

.bbs-upload-remove{
    padding:4px 10px;
    border:1px solid var(--border);
    border-radius:8px;
    background: var(--panel);
    color: var(--danger);
    cursor:pointer;
}

.bbs-upload-tips{
    margin-top:8px;
    font-size:.78rem;
    line-height:1.6;
}

.bbs-lightbox{
    display:none;
    position:fixed;
    inset:0;
    background:rgba(15,23,42,.85);
    z-index:100;
    align-items:center;
    justify-content:center;
    padding:30px;
    cursor:zoom-out;
}

.bbs-lightbox.open{
    display:flex;
}

.bbs-lightbox img{
    max-width:100%;
    max-height:100%;
    border-radius:12px;
}

.gallery-image{
    cursor:zoom-in;
}

.bbs-profile-summary,
.bbs-profile-mini{
    display:flex;
    align-items:center;
    gap:16px;
}

.bbs-profile-mini h1{
    margin:0 0 4px;
    font-size:1.5rem;
}

.bbs-profile-mini p{
    margin:0;
}

.bbs-admin-row{
    display:flex;
    justify-content:space-between;
    align-items:center;
    gap:16px;
    padding:14px;
    border:1px solid var(--border);
    border-radius:12px;
    background:var(--panel-soft);
}

.bbs-admin-row.deleted{
    opacity:.55;
}

.bbs-admin-main{
    display:flex;
    flex-direction:column;
    gap:4px;
}

.bbs-admin-actions{
    display:flex;
    gap:8px;
    align-items:center;
}

.post-editor label{
    display:block;
    margin:12px 0 6px;
    font-weight:600;
}

.post-editor select{
    width:100%;
    padding:10px 12px;
    border:1px solid var(--border);
    border-radius:10px;
    margin-bottom:10px;
    background: var(--panel);
}

.bbs-card-link{
    color:var(--text);
    text-decoration:none;
}


/* =========================
   响应式优化（全站手机适配）
========================= */

html {
    -webkit-text-size-adjust: 100%;
}

body {
    overflow-x: hidden;
}

img,
video,
iframe {
    max-width: 100%;
}

img,
video {
    height: auto;
}

/* 会撑破小屏的网格，统一用 min() 兜底 */
.server-grid {
    grid-template-columns: repeat(auto-fit, minmax(min(480px, 100%), 1fr));
}

.feature-grid {
    grid-template-columns: repeat(auto-fit, minmax(min(220px, 100%), 1fr));
}

.post-gallery {
    grid-template-columns: repeat(auto-fill, minmax(min(250px, 100%), 1fr));
}

.bbs-videos {
    grid-template-columns: repeat(auto-fill, minmax(min(320px, 100%), 1fr));
}

.tu-grid {
    grid-template-columns: repeat(auto-fill, minmax(min(260px, 100%), 1fr));
}

.bbs-stats {
    grid-template-columns: repeat(auto-fit, minmax(min(120px, 100%), 1fr));
}

.table-wrap {
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
    margin-bottom: 1rem;
}

/* 长链接 / 长代码不要撑破屏幕 */
code,
kbd,
samp {
    overflow-wrap: anywhere;
    word-break: break-word;
}

pre,
.code-block {
    max-width: 100%;
    overflow-x: auto;
}

/* —— 顶部导航 —— */

.topbar {
    padding: 0.6rem 1rem;
}

.topbar-inner {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    width: 100%;
    max-width: 1100px;
    margin: 0 auto;
}

.topbar .brand {
    font-size: 1.2rem;
    text-decoration: none;
    white-space: nowrap;
}

.nav-toggle {
    display: none;
    align-items: center;
    gap: 7px;
    height: 42px;
    padding: 0 13px;
    margin: 0;
    border: 1px solid var(--accent);
    border-radius: 12px;
    background: var(--accent);
    box-shadow: 0 6px 14px rgba(37, 99, 235, 0.28);
}

.nav-toggle-icon {
    display: flex;
    flex-direction: column;
    justify-content: center;
    gap: 4px;
    width: 20px;
}

.nav-toggle-icon span {
    display: block;
    height: 3px;
    border-radius: 2px;
    background: #fff;
}

.nav-toggle-text {
    color: #fff;
    font-size: 0.9rem;
    font-weight: 600;
    line-height: 1;
}

.nav-toggle:hover,
.nav-toggle[aria-expanded="true"] {
    background: var(--accent-strong);
    border-color: var(--accent-strong);
}

.nav-links {
    display: flex;
    align-items: center;
    gap: 2px;
}

.nav-links a {
    margin-left: 0;
    padding: 8px 10px;
    border-radius: 10px;
    font-size: 0.95rem;
    white-space: nowrap;
}

.nav-links a:hover {
    background: var(--panel-soft);
}

.nav-links .nav-user {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    max-width: 150px;
    overflow: hidden;
    text-overflow: ellipsis;
    color: var(--accent);
    font-weight: 600;
}

/* 身份颜色点：管理员红 / 普通用户绿 / 已封禁黄 */
.role-dot {
    display: inline-block;
    flex: 0 0 auto;
    width: 8px;
    height: 8px;
    margin-left: 6px;
    border-radius: 50%;
    vertical-align: middle;
}

.role-dot.role-admin {
    background: var(--danger);
    box-shadow: 0 0 0 2px rgba(239, 68, 68, 0.18);
}

.role-dot.role-user {
    background: var(--success);
    box-shadow: 0 0 0 2px rgba(34, 197, 94, 0.18);
}

.role-dot.role-banned {
    background: var(--warn);
    box-shadow: 0 0 0 2px rgba(234, 179, 8, 0.18);
}

.bbs-role-legend {
    margin-top: 6px;
    font-size: 0.85rem;
}

.bbs-role-legend .role-dot {
    margin-left: 0;
    margin-right: 2px;
}

.nav-links .nav-cta {
    background: var(--accent);
    color: #fff;
    font-weight: 600;
}

.nav-links .nav-cta:hover {
    background: var(--accent-strong);
    color: #fff;
}

.nav-links .nav-logout {
    color: var(--muted);
}

/* —— 平板 / 手机导航抽屉 —— */

@media (max-width: 900px) {

    .nav-toggle {
        display: inline-flex;
    }

    .nav-links {
        position: absolute;
        top: 100%;
        left: 0;
        right: 0;
        display: none;
        flex-direction: column;
        align-items: stretch;
        gap: 2px;
        padding: 10px 14px 16px;
        background: var(--panel);
        border-bottom: 1px solid var(--border);
        border-radius: 0 0 16px 16px;
        box-shadow: 0 20px 30px rgba(15, 23, 42, 0.12);
    }

    body.nav-open .nav-links {
        display: flex;
    }

    .nav-links a {
        padding: 12px 14px;
        font-size: 1rem;
        border-radius: 10px;
    }

    .nav-links a:active {
        background: var(--panel-soft);
    }

    .nav-links .nav-user {
        max-width: none;
    }

    .nav-links .nav-cta {
        text-align: center;
    }

    .forum-header {
        flex-direction: column;
        align-items: stretch;
        gap: 14px;
        padding: 18px;
    }

    .forum-header-actions {
        width: 100%;
    }

    .bbs-search-form {
        width: 100%;
        flex-wrap: wrap;
    }

    .bbs-search-form input {
        flex: 1 1 180px;
        min-width: 0;
    }

    .bbs-search-form button {
        flex: 0 0 auto;
    }

    .bbs-category {
        align-items: flex-start;
        flex-wrap: wrap;
    }

    .bbs-category-counts {
        flex-direction: row;
        align-items: center;
        gap: 12px;
        min-width: 0;
        margin-left: auto;
    }

    .bbs-category-counts .label {
        margin-bottom: 0;
    }

    .bbs-thread-row {
        flex-direction: column;
        align-items: flex-start;
        gap: 8px;
    }

    .bbs-thread-stats {
        gap: 16px;
    }

    .post-detail {
        padding: 18px;
    }

    .post-meta {
        flex-direction: column;
        align-items: flex-start;
        gap: 10px;
    }

    .bbs-reply-head {
        flex-direction: column;
        align-items: flex-start;
        gap: 6px;
    }

    .bbs-admin-row {
        flex-direction: column;
        align-items: flex-start;
    }

    .tu-search {
        min-width: 0;
    }
}

/* —— 手机 —— */

@media (max-width: 640px) {

    .container {
        padding: 1rem 0.85rem 2.5rem;
    }

    .card,
    .flash {
        padding: 0.95rem;
        border-radius: 12px;
    }

    h1 {
        font-size: 1.45rem;
        line-height: 1.35;
    }

    h2 {
        font-size: 1.2rem;
    }

    h3 {
        font-size: 1.05rem;
    }

    p {
        line-height: 1.75;
    }

    .hero {
        padding: 34px 16px;
        border-radius: 16px;
    }

    .hero h1 {
        font-size: 1.7rem;
        line-height: 1.35;
    }

    .hero p {
        font-size: 1rem;
    }

    .hero-buttons {
        flex-direction: column;
        gap: 10px;
    }

    .btn-primary,
    .btn-secondary {
        display: block;
        width: 100%;
        padding: 14px 18px;
        text-align: center;
    }

    .card-grid,
    .quick-grid {
        grid-template-columns: 1fr;
    }

    .feature-card {
        padding: 18px;
    }

    .quick-card {
        padding: 14px;
    }

    .quick-card span {
        font-size: 1.5rem;
    }

    /* 表单：避免 iOS 自动放大，并给足点按高度 */
    input,
    textarea,
    select {
        font-size: 16px;
        min-height: 44px;
        padding: 0.65rem 0.75rem;
    }

    textarea {
        min-height: 110px;
    }

    button,
    .button {
        min-height: 44px;
        padding: 0.7rem 1rem;
    }

    .post-editor button,
    .post-editor .btn-primary,
    .forum-header-actions .btn-primary,
    .forum-header-actions .tu-btn {
        width: 100%;
        text-align: center;
    }

    .forum-header-actions {
        flex-direction: column;
        align-items: stretch;
    }

    .bbs-search-form button {
        width: 100%;
    }

    .post-title {
        font-size: 1.3rem;
        margin-bottom: 14px;
    }

    .post-content,
    .bbs-content {
        font-size: 15px;
        line-height: 1.85;
    }

    .bbs-category {
        padding: 14px;
        gap: 12px;
    }

    .bbs-category-icon {
        width: 40px;
        height: 40px;
        font-size: 1.35rem;
    }

    .bbs-category-main {
        flex: 1 1 60%;
    }

    .bbs-category-counts {
        margin-left: 0;
        width: 100%;
        justify-content: flex-start;
        padding-top: 6px;
        border-top: 1px dashed var(--border);
    }

    .bbs-thread-title {
        font-size: 0.98rem;
        line-height: 1.5;
    }

    .bbs-thread-meta {
        flex-wrap: wrap;
        row-gap: 4px;
    }

    .bbs-tag {
        font-size: 0.68rem;
    }

    .bbs-thread-actions,
    .bbs-reply-actions {
        flex-direction: column;
        align-items: stretch;
        gap: 8px;
    }

    .bbs-thread-actions form,
    .bbs-reply-actions form,
    .bbs-thread-actions .tu-btn,
    .bbs-reply-actions .tu-btn,
    .bbs-reply-actions details,
    .bbs-reply-actions summary {
        width: 100%;
    }

    .bbs-reply-actions .tu-btn,
    .bbs-reply-actions summary {
        display: block;
        text-align: center;
    }

    .bbs-reply {
        padding: 14px;
    }

    .bbs-reply-edit textarea,
    .bbs-reply-edit .tu-btn {
        width: 100%;
    }

    .bbs-files li,
    .bbs-upload-list li {
        flex-wrap: wrap;
        row-gap: 6px;
    }

    .bbs-upload-name {
        flex: 1 1 100%;
    }

    .bbs-video video {
        max-height: 260px;
    }

    .bbs-pagination {
        flex-wrap: wrap;
        gap: 8px;
    }

    .bbs-pagination a,
    .bbs-pagination span {
        flex: 1 1 auto;
        text-align: center;
        padding: 10px 12px;
    }

    .bbs-page-info {
        flex: 1 1 100%;
    }

    .bbs-profile-summary,
    .bbs-profile-mini {
        flex-direction: column;
        align-items: flex-start;
        gap: 10px;
    }

    .bbs-profile-mini h1 {
        font-size: 1.25rem;
    }

    .bbs-stats {
        grid-template-columns: repeat(2, minmax(0, 1fr));
        gap: 10px;
    }

    .bbs-stat {
        padding: 12px 10px;
    }

    .bbs-stat .value {
        font-size: 1.25rem;
    }

    .bbs-lightbox {
        padding: 12px;
    }

    .server-card {
        padding: 16px;
    }

    .player-chart {
        height: 190px;
    }

    .stats {
        grid-template-columns: repeat(2, minmax(0, 1fr));
        gap: 10px;
    }

    .stat {
        padding: 12px;
    }

    .value {
        font-size: 19px;
    }

    .table th,
    .table td {
        padding: 0.6rem;
        white-space: nowrap;
    }

    .tu-toolbar {
        flex-direction: column;
        align-items: stretch;
    }

    .tu-toolbar .tu-search,
    .tu-toolbar .tu-select,
    .tu-toolbar .tu-button {
        width: 100%;
    }

    .tu-actions {
        flex-direction: column;
    }

    .tu-actions .tu-btn {
        width: 100%;
    }

    .footer {
        padding: 16px 12px;
        margin-top: 26px;
    }

    .beian-row,
    .social-links {
        flex-direction: row;
        flex-wrap: wrap;
        gap: 8px 12px;
        font-size: 0.82rem;
    }

    .copyright {
        font-size: 12px;
        line-height: 1.6;
    }
}

/* —— 超小屏 —— */

@media (max-width: 380px) {

    .bbs-stats,
    .stats {
        grid-template-columns: 1fr;
    }

    .nav-links a {
        font-size: 0.95rem;
    }

    .brand {
        font-size: 1.05rem;
    }
}

/* —— 登录 / 注册 / 昵称表单 —— */

.auth-card {
    max-width: 460px;
    margin: 0 auto;
    padding: 1.6rem;
}

.auth-card h1 {
    margin-top: 0;
}

.auth-card input {
    margin-bottom: 0.9rem;
}

.auth-card button[type="submit"] {
    width: 100%;
    padding: 0.85rem 1rem;
}

.field-hint {
    margin: -0.55rem 0 0.9rem;
    font-size: 0.85rem;
    line-height: 1.6;
}

.bbs-nickname-form {
    display: flex;
    align-items: center;
    gap: 10px;
}

.bbs-nickname-form input {
    flex: 1;
    min-width: 0;
    margin-bottom: 0;
}

.bbs-nickname-form .btn-primary {
    flex: 0 0 auto;
    margin: 0;
    white-space: nowrap;
}

/* 按钮文字不要被挤成两行 */
button,
.button,
.btn-primary,
.btn-secondary,
.tu-btn,
.tu-button {
    white-space: nowrap;
}

@media (max-width: 640px) {

    .auth-card {
        padding: 1.1rem;
    }

    .bbs-nickname-form {
        flex-direction: column;
        align-items: stretch;
    }

    .bbs-nickname-form .btn-primary {
        width: 100%;
    }
}

/* —— 后台用户管理 —— */

.admin-user-list {
    display: flex;
    flex-direction: column;
    gap: 12px;
}

.admin-user-row {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: space-between;
    gap: 14px;
    padding: 14px;
    border: 1px solid var(--border);
    border-radius: 12px;
    background: var(--panel-soft);
}

.admin-user-main {
    display: flex;
    flex-direction: column;
    gap: 2px;
    min-width: 200px;
}

.admin-user-actions {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 8px;
}

.admin-user-actions form {
    margin: 0;
}

.admin-rename-form {
    display: flex;
    align-items: center;
    gap: 6px;
}

.admin-rename-form input {
    min-width: 150px;
    min-height: 36px;
    margin-bottom: 0;
    padding: 6px 10px;
    font-size: 0.9rem;
}

.admin-self-tag {
    font-size: 0.8rem;
}

@media (max-width: 640px) {

    .admin-user-row {
        flex-direction: column;
        align-items: stretch;
    }

    .admin-user-main {
        min-width: 0;
    }

    .admin-user-actions,
    .admin-rename-form {
        flex-direction: column;
        align-items: stretch;
        width: 100%;
    }

    .admin-user-actions form,
    .admin-user-actions .tu-btn,
    .admin-rename-form input {
        width: 100%;
    }

    .admin-user-actions .tu-btn {
        display: block;
        text-align: center;
    }
}

/* —— API 页：状态图链接列表 —— */

/* —— 论坛编辑器：工具栏与正文内媒体 —— */

/* —— 论坛投票 —— */

/* —— 全站弹窗 —— */

.site-popup {
    position: fixed;
    inset: 0;
    z-index: 120;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 20px;
}

.site-popup[hidden] {
    display: none;
}

.site-popup-mask {
    position: absolute;
    inset: 0;
    background: rgba(15, 23, 42, 0.55);
    backdrop-filter: blur(2px);
}

.site-popup-box {
    position: relative;
    z-index: 1;
    width: 100%;
    max-width: 460px;
    max-height: 86vh;
    overflow-y: auto;
    padding: 22px;
    border-radius: 18px;
    background: var(--panel);
    box-shadow: 0 24px 60px rgba(15, 23, 42, 0.35);
    text-align: center;
    animation: popup-in 0.24s ease-out;
}

@keyframes popup-in {
    from {
        opacity: 0;
        transform: translateY(12px) scale(0.98);
    }
    to {
        opacity: 1;
        transform: translateY(0) scale(1);
    }
}

.site-popup-title {
    margin: 0 0 10px;
    font-size: 1.25rem;
}

.site-popup-image {
    display: block;
    width: 100%;
    max-height: 320px;
    object-fit: contain;
    margin: 0 auto 12px;
    border-radius: 12px;
}

.site-popup-content {
    margin-bottom: 14px;
    color: var(--text);
    line-height: 1.8;
    white-space: pre-line;
    text-align: left;
}

.site-popup-link {
    display: inline-block;
    margin: 0 6px 10px;
    text-decoration: none;
}

.site-popup-ok {
    display: inline-block;
    margin: 4px 6px 0;
}

.site-popup-close {
    position: absolute;
    top: 8px;
    right: 10px;
    width: 34px;
    height: 34px;
    min-height: 0;
    padding: 0;
    margin: 0;
    border: none;
    border-radius: 50%;
    background: var(--chip-bg);
    color: var(--muted);
    font-size: 1.2rem;
    line-height: 1;
    cursor: pointer;
}

.site-popup-close:hover {
    background: var(--chip-bg);
    color: var(--text-strong);
}

/* —— 后台行编辑器（联系方式 / 主页内容块 / 弹窗图片） —— */

/* —— 后台总览分区 —— */

.stats-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(min(150px, 100%), 1fr));
    gap: 12px;
}

.admin-stat {
    padding: 14px;
    border: 1px solid var(--border);
    border-radius: 12px;
    background: var(--panel-soft);
    text-align: center;
}

.admin-stat .value {
    display: block;
    font-size: 1.5rem;
    font-weight: 700;
    color: var(--accent);
}

.admin-stat .label {
    color: var(--muted);
    font-size: 0.85rem;
}

.admin-entry-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(min(260px, 100%), 1fr));
    gap: 12px;
}

.admin-entry {
    display: flex;
    flex-direction: column;
    gap: 4px;
    padding: 16px;
    border: 1px solid var(--border);
    border-radius: 14px;
    background: var(--panel-soft);
    color: var(--text);
    text-decoration: none;
    transition: 0.2s;
}

.admin-entry:hover {
    transform: translateY(-3px);
    border-color: var(--accent);
    box-shadow: 0 10px 24px rgba(15, 23, 42, 0.08);
}

.admin-entry strong {
    color: var(--accent);
}

.admin-entry span {
    color: var(--muted);
    font-size: 0.88rem;
    line-height: 1.6;
}

/* 后台管理导航：多个分类整合在同一张卡片里 */

.admin-nav-groups {
    display: grid;
    gap: 22px;
}

.admin-nav-group {
    display: grid;
    gap: 12px;
}

.admin-nav-title {
    display: flex;
    align-items: center;
    gap: 8px;
    margin: 0;
    font-size: 1rem;
    font-weight: 700;
    color: var(--text-strong);
}

.admin-nav-title::before {
    content: "";
    width: 4px;
    height: 16px;
    border-radius: 2px;
    background: var(--accent);
}

/* —— 团队成员 / 官方社交 / 友情链接 —— */

.team-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(min(230px, 100%), 1fr));
    gap: 16px;
}

.team-card {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 8px;
    padding: 18px;
    border: 1px solid var(--border);
    border-radius: 16px;
    background: var(--panel-soft);
    text-align: center;
}

.team-avatar {
    width: 78px;
    height: 78px;
    border-radius: 50%;
    object-fit: cover;
    border: 2px solid #fff;
    box-shadow: 0 6px 16px rgba(15, 23, 42, 0.12);
}

.team-avatar-text {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    background: var(--accent);
    color: #fff;
    font-size: 2rem;
    font-weight: 700;
}

.team-card h3 {
    display: flex;
    flex-direction: column;
    gap: 2px;
    margin: 4px 0 0;
}

.team-role {
    color: var(--accent);
    font-size: 0.82rem;
    font-weight: 500;
}

.team-bio {
    margin: 0;
    color: var(--muted);
    font-size: 0.9rem;
    line-height: 1.7;
    white-space: pre-line;
}

.team-contact {
    margin: 0;
    font-size: 0.82rem;
}

.team-socials {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: 6px;
    margin-top: 4px;
}

.team-socials a {
    padding: 4px 10px;
    border: 1px solid var(--border);
    border-radius: 999px;
    background: var(--panel);
    color: var(--accent);
    text-decoration: none;
    font-size: 0.78rem;
}

.team-socials a:hover {
    border-color: var(--accent);
}

.social-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(min(240px, 100%), 1fr));
    gap: 12px;
}

.social-card {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 12px 14px;
    border: 1px solid var(--border);
    border-radius: 12px;
    background: var(--panel-soft);
    color: var(--text);
    text-decoration: none;
    transition: 0.2s;
}

.social-card:hover {
    border-color: var(--accent);
    transform: translateY(-2px);
}

.social-icon {
    font-size: 1.4rem;
}

.social-body {
    display: flex;
    flex-direction: column;
    min-width: 0;
}

.social-body small {
    color: var(--muted);
    font-size: 0.75rem;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.friend-links {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(min(200px, 100%), 1fr));
    gap: 12px;
}

.friend-link {
    display: flex;
    flex-direction: column;
    gap: 3px;
    padding: 12px 14px;
    border: 1px solid var(--border);
    border-radius: 12px;
    background: var(--panel-soft);
    color: var(--text);
    text-decoration: none;
}

.friend-link:hover {
    border-color: var(--accent);
    color: var(--accent);
}

.friend-link small {
    color: var(--muted);
    font-size: 0.78rem;
}

/* —— 后台：团队成员编辑行 —— */

.member-row .member-head {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 10px;
}

.member-head-fields {
    display: flex;
    flex: 1 1 220px;
    flex-direction: column;
    gap: 6px;
}

.member-head-fields input {
    margin-bottom: 0;
}

.member-avatar {
    display: flex;
    flex: 0 0 auto;
    align-items: center;
    justify-content: center;
    width: 56px;
    height: 56px;
    border-radius: 50%;
    border: 1px solid var(--border);
    background: var(--panel);
    color: var(--muted);
    font-size: 0.72rem;
    overflow: hidden;
}

.member-avatar img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.platform-picker {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
    margin: 6px 0;
}

.platform-picker select,
.platform-picker input {
    flex: 1 1 180px;
    margin-bottom: 0;
}

.icon-input {
    flex: 0 0 64px !important;
    text-align: center;
}

/* —— 登录 / 注册页 —— */

.auth-card {
    max-width: 420px;
    margin: 24px auto 0;
    padding: 30px 26px;
    text-align: center;
}

.auth-logo {
    width: 72px;
    height: 72px;
    border-radius: 18px;
    box-shadow: 0 8px 20px rgba(15, 23, 42, 0.14);
    margin-bottom: 12px;
}

.auth-card h1 {
    margin: 0 0 6px;
    font-size: 1.5rem;
}

.auth-sub {
    margin: 0 0 18px;
    font-size: 0.88rem;
}

.auth-card form {
    text-align: left;
}

.auth-card label {
    font-weight: 600;
    font-size: 0.9rem;
}

.auth-card input {
    min-height: 46px;
    border-radius: 10px;
    background: var(--panel);
}

.auth-card input:focus {
    outline: none;
    border-color: var(--accent);
    box-shadow: 0 0 0 3px rgba(37, 99, 235, 0.15);
}

.auth-card button[type="submit"] {
    width: 100%;
    min-height: 46px;
    margin-top: 8px;
    border-radius: 10px;
    font-size: 1rem;
}

.auth-alt {
    margin: 16px 0 0;
    padding-top: 14px;
    border-top: 1px solid var(--border);
    font-size: 0.9rem;
    color: var(--muted);
}

.auth-alt a {
    color: var(--accent);
    font-weight: 600;
    text-decoration: none;
}

.auth-alt a:hover {
    text-decoration: underline;
}

.admin-row {
    display: flex;
    flex-direction: column;
    gap: 8px;
    padding: 12px;
    margin-bottom: 10px;
    border: 1px solid var(--border);
    border-radius: 12px;
    background: var(--panel-soft);
}

.admin-row input,
.admin-row textarea {
    margin-bottom: 0;
}

.admin-row-inline {
    flex-direction: row;
    flex-wrap: wrap;
    align-items: center;
}

.admin-row-inline input {
    flex: 1 1 200px;
}

.admin-row-inline .tu-btn {
    flex: 0 0 auto;
}

.admin-inline-form {
    margin-bottom: 12px;
}

.popup-image-row {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 8px;
}

.popup-image-row input[readonly] {
    flex: 1 1 220px;
    margin-bottom: 0;
}

.popup-image-preview img {
    display: block;
    max-width: 240px;
    max-height: 180px;
    margin-top: 10px;
    border-radius: 10px;
}

.home-block-text {
    white-space: pre-line;
    line-height: 1.9;
}

.bbs-tag.poll {
    background: var(--accent-soft);
    color: var(--accent-dark);
}

.poll-card {
    margin-top: 20px;
    padding: 16px;
    border: 1px solid var(--border);
    border-radius: 14px;
    background: var(--panel-soft);
}

.poll-head {
    display: flex;
    flex-direction: column;
    gap: 4px;
    margin-bottom: 12px;
}

.poll-head h3 {
    margin: 0;
    font-size: 1.1rem;
}

.poll-options {
    display: flex;
    flex-direction: column;
    gap: 10px;
}

.poll-option {
    display: flex;
    align-items: flex-start;
    gap: 10px;
    padding: 12px;
    border: 1px solid var(--border);
    border-radius: 12px;
    background: var(--panel);
    cursor: pointer;
    transition: 0.2s;
}

.poll-option:hover {
    border-color: var(--accent);
}

.poll-option.mine {
    border-color: var(--accent);
    box-shadow: 0 0 0 2px rgba(37, 99, 235, 0.12);
}

.poll-option input {
    flex: 0 0 auto;
    width: auto;
    min-height: 0;
    margin: 4px 0 0;
}

.poll-option-body {
    display: flex;
    flex: 1;
    flex-direction: column;
    gap: 8px;
    min-width: 0;
}

.poll-option-image {
    align-self: flex-start;
    max-width: 100%;
    max-height: 220px;
    border-radius: 10px;
    cursor: zoom-in;
}

.poll-option-text {
    font-weight: 600;
}

.poll-bar {
    display: block;
    height: 8px;
    border-radius: 999px;
    background: var(--chip-bg);
    overflow: hidden;
}

.poll-bar-fill {
    display: block;
    height: 100%;
    border-radius: 999px;
    background: linear-gradient(90deg, #2563eb, #60a5fa);
    transition: width 0.3s;
}

.poll-option.top .poll-bar-fill {
    background: linear-gradient(90deg, #2563eb, #22c55e);
}

.poll-option-meta {
    font-size: 0.82rem;
}

.poll-tip {
    margin-left: 8px;
    font-size: 0.85rem;
}

.poll-form > button[type="submit"] {
    margin-top: 14px;
}

.poll-admin {
    margin-top: 10px;
}

/* 投票选项编辑器 */

.poll-builder {
    margin-top: 22px;
    padding-top: 18px;
    border-top: 1px dashed var(--border);
}

.poll-builder h2 {
    margin-top: 0;
}

.poll-builder-options {
    display: flex;
    flex-direction: column;
    gap: 10px;
    margin-bottom: 10px;
}

.poll-builder-row {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 8px;
}

.post-editor .poll-builder-row input[type="text"] {
    flex: 1 1 200px;
    margin-bottom: 0;
}

.poll-builder-thumb {
    display: inline-flex;
    align-items: center;
    font-size: 0.8rem;
    color: var(--muted);
}

.poll-builder-thumb img {
    width: 48px;
    height: 48px;
    border-radius: 8px;
    object-fit: cover;
}

.post-editor .poll-multiple {
    display: flex;
    align-items: center;
    gap: 8px;
    margin: 6px 0 14px;
}

.post-editor .poll-multiple input {
    width: auto;
    min-height: 0;
    margin: 0;
}

.post-toolbar {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 8px;
    padding: 8px 10px;
    border: 1px solid var(--border);
    border-radius: 12px;
    background: var(--panel-soft);
}

.pt-group {
    display: flex;
    align-items: center;
    gap: 4px;
    padding-right: 8px;
    border-right: 1px solid var(--border);
}

.pt-group:last-child {
    border-right: none;
    padding-right: 0;
}

.pt-btn {
    min-height: 32px;
    margin: 0;
    padding: 4px 10px;
    border: 1px solid var(--border);
    border-radius: 8px;
    background: var(--panel);
    color: var(--text);
    font-size: 0.9rem;
    font-weight: 600;
    cursor: pointer;
}

.pt-btn:hover {
    border-color: var(--accent);
    color: var(--accent);
}

.pt-bold {
    font-weight: 800;
}

.pt-italic {
    font-style: italic;
}

.pt-underline {
    text-decoration: underline;
}

.pt-strike {
    text-decoration: line-through;
}

.pt-select {
    min-height: 32px;
    margin: 0;
    padding: 2px 8px;
    border: 1px solid var(--border);
    border-radius: 8px;
    background: var(--panel);
    font-size: 0.9rem;
}

.pt-colors {
    display: flex;
    align-items: center;
    gap: 4px;
}

.pt-color {
    width: 20px;
    height: 20px;
    min-height: 0;
    margin: 0;
    padding: 0;
    border: 1px solid rgba(15, 23, 42, 0.18);
    border-radius: 50%;
    cursor: pointer;
}

.pt-color:hover {
    transform: scale(1.15);
}

.bbs-preview-panel {
    margin: 10px 0 4px;
    padding: 14px;
    border: 1px dashed var(--border);
    border-radius: 12px;
    background: var(--panel);
}

.bbs-preview-panel[hidden] {
    display: none;
}

.post-inline-image {
    display: block;
    max-width: 100%;
    height: auto;
    margin: 12px 0;
    border-radius: 12px;
    cursor: zoom-in;
}

.post-inline-video {
    display: block;
    width: 100%;
    max-height: 460px;
    margin: 12px 0;
    border-radius: 12px;
    background: #0f172a;
}

.post-inline-file {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    margin: 8px 0;
    padding: 10px 14px;
    border: 1px solid var(--border);
    border-radius: 10px;
    background: var(--panel-soft);
    color: var(--text);
    text-decoration: none;
    font-weight: 600;
}

.post-inline-file:hover {
    border-color: var(--accent);
    color: var(--accent);
}

.post-inline-file-icon {
    font-size: 1rem;
}

.bbs-content blockquote,
.post-content blockquote {
    margin: 14px 0;
    padding: 10px 14px;
    border-left: 4px solid var(--accent);
    border-radius: 0 10px 10px 0;
    background: var(--panel-soft);
    color: var(--muted);
}

.bbs-content ul,
.post-content ul {
    margin: 10px 0 10px 22px;
    padding-left: 4px;
}

.bbs-upload-insert {
    padding: 4px 10px;
    border: 1px solid var(--border);
    border-radius: 8px;
    background: var(--panel);
    color: var(--accent);
    font-weight: 600;
    cursor: pointer;
}

.bbs-upload-insert:hover {
    border-color: var(--accent);
}

.api-endpoint-list {
    display: flex;
    flex-direction: column;
    gap: 10px;
    margin-bottom: 14px;
}

.api-endpoint-row {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    padding: 12px 14px;
    border: 1px solid var(--border);
    border-radius: 12px;
    background: var(--panel-soft);
}

.api-endpoint-main {
    display: flex;
    flex-direction: column;
    gap: 3px;
    min-width: 0;
    word-break: break-word;
}

.api-endpoint-main .muted {
    font-size: 0.85rem;
    line-height: 1.6;
}

.api-endpoint-row .badge {
    flex: 0 0 auto;
}

.status-image-list {
    display: flex;
    flex-direction: column;
    gap: 14px;
}

.status-image-item {
    padding: 14px;
    border: 1px solid var(--border);
    border-radius: 12px;
    background: var(--panel-soft);
}

.status-image-head {
    display: flex;
    flex-direction: column;
    gap: 3px;
}

.status-image-url {
    margin: 8px 0 10px;
    word-break: break-all;
    line-height: 1.6;
}

.status-image-url a {
    color: var(--accent);
    font-size: 0.85rem;
}

.status-image-actions {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
    margin-bottom: 10px;
}

.status-image-actions form {
    margin: 0;
}

.status-image-item .code-block {
    margin: 0;
    padding: 10px 12px;
    font-size: 0.75rem;
}

@media (max-width: 640px) {

    .api-endpoint-row {
        flex-direction: column;
        align-items: flex-start;
    }

    .post-toolbar {
        gap: 6px;
        padding: 8px;
    }

    /* 工具栏按钮保持小尺寸，不要被表单按钮的整行规则撑开 */
    .post-editor .post-toolbar .pt-btn,
    .post-editor .post-toolbar .pt-color,
    .post-editor .post-toolbar .pt-select {
        width: auto;
        min-width: 34px;
    }

    .pt-group {
        border-right: none;
        padding-right: 0;
        flex-wrap: wrap;
    }

    .pt-colors {
        flex-wrap: wrap;
    }

    .pt-media {
        flex: 1 1 auto;
    }

    .post-inline-video {
        max-height: 260px;
    }

    .poll-option {
        padding: 10px;
    }

    .poll-option-image {
        max-height: 160px;
    }

    .poll-builder-row {
        flex-direction: column;
        align-items: stretch;
    }

    .poll-builder-row input[type="text"] {
        flex: 1 1 auto;
    }

    .site-popup {
        padding: 12px;
    }

    .site-popup-box {
        padding: 18px 16px;
    }

    .admin-row-inline {
        flex-direction: column;
        align-items: stretch;
    }

    .popup-image-row {
        flex-direction: column;
        align-items: stretch;
    }

    .member-head {
        flex-direction: column;
        align-items: stretch;
    }

    .platform-picker {
        flex-direction: column;
        align-items: stretch;
    }

    .team-card {
        padding: 16px;
    }

    .auth-card {
        padding: 22px 16px;
    }

    .status-image-actions {
        flex-direction: column;
    }

    .status-image-actions .tu-btn {
        width: 100%;
        text-align: center;
    }
}

code{
    font-family:"Consolas","JetBrains Mono","Courier New",monospace;
    font-size:.92em;
    background:var(--panel-soft);
    border:1px solid var(--border);
    border-radius:6px;
    padding:2px 6px;
}

.code-block{
    background: var(--code-bg);
    color: var(--code-text);
    padding:16px;
    border-radius:12px;
    overflow-x:auto;
    margin:0 0 15px;
}

.code-block code{
    background:transparent;
    border:none;
    padding:0;
    color:inherit;
    font-size:.9rem;
    line-height:1.7;
    white-space:pre;
}

/* 图床 /tuchuang */
.tu-toolbar{
    display:flex;
    flex-wrap:wrap;
    align-items:center;
    gap:12px;
    margin-bottom:22px;
}

.tu-search,
.tu-select{
    padding:10px 14px;
    border:1px solid var(--border);
    border-radius:12px;
    background:var(--panel-soft);
    color:var(--text);
    font-size:.95rem;
}

.tu-search{
    flex:1;
    min-width:220px;
}

.tu-button{
    padding:10px 18px;
    border:1px solid var(--border);
    border-radius:12px;
    background: var(--panel);
    color:var(--text);
    font-weight:600;
    cursor:pointer;
}

.tu-button:hover{
    border-color:var(--accent);
    color:var(--accent);
}

.tu-group{
    margin-bottom:28px;
}

.tu-group-title{
    display:flex;
    align-items:baseline;
    gap:10px;
    font-size:1.1rem;
    margin-bottom:12px;
}

.tu-grid{
    display:grid;
    grid-template-columns:repeat(auto-fill,minmax(260px,1fr));
    gap:16px;
}

.tu-card{
    display:flex;
    flex-direction:column;
    background:var(--panel-soft);
    border:1px solid var(--border);
    border-radius:14px;
    overflow:hidden;
    transition:.25s;
}

.tu-card:hover{
    border-color:var(--accent);
    transform:translateY(-3px);
}

.tu-card[hidden]{
    display:none;
}

.tu-thumb{
    display:block;
    aspect-ratio:16/10;
    background: var(--panel-sunken);
    overflow:hidden;
}

.tu-thumb img{
    display:block;
    width:100%;
    height:100%;
    object-fit:cover;
}

.tu-thumb-video{
    background:#0f172a;
}

.tu-thumb-video video{
    display:block;
    width:100%;
    height:100%;
    object-fit:contain;
    background:#0f172a;
}

.tu-body{
    display:flex;
    flex-direction:column;
    gap:8px;
    padding:12px;
}

.tu-name{
    font-size:.92rem;
    font-weight:600;
    overflow:hidden;
    text-overflow:ellipsis;
    white-space:nowrap;
}

.tu-meta{
    display:flex;
    align-items:center;
    gap:8px;
    font-size:.8rem;
}

.tu-link{
    width:100%;
    padding:8px 10px;
    border:1px solid var(--border);
    border-radius:8px;
    background: var(--panel);
    color:var(--muted);
    font-size:.78rem;
}

.tu-actions{
    display:flex;
    flex-wrap:wrap;
    gap:8px;
}

.tu-btn{
    padding:6px 10px;
    border:1px solid var(--border);
    border-radius:8px;
    background: var(--panel);
    color:var(--text);
    font-size:.78rem;
    font-weight:600;
    cursor:pointer;
}

.tu-btn:hover{
    border-color:var(--accent);
    color:var(--accent);
}

.tu-empty{
    margin-top:12px;
}

/* 图床上传与编辑 */
.tu-drop{
    display:flex;
    flex-direction:column;
    align-items:center;
    gap:6px;
    padding:28px 20px;
    border:2px dashed var(--border);
    border-radius:14px;
    background:var(--panel-soft);
    text-align:center;
    cursor:pointer;
    transition:.25s;
}

.tu-drop:hover,
.tu-drop.dragging{
    border-color:var(--accent);
    background: var(--accent-soft);
}

.tu-drop.has-files{
    border-color:var(--accent);
    border-style:solid;
}

.tu-drop-title{
    margin:0;
    font-weight:600;
}

.tu-upload-row{
    display:flex;
    flex-wrap:wrap;
    align-items:flex-end;
    gap:14px;
    margin-top:16px;
}

.tu-field{
    display:flex;
    flex-direction:column;
    gap:6px;
    font-size:.85rem;
}

.tu-input{
    width:100%;
    padding:9px 12px;
    border:1px solid var(--border);
    border-radius:10px;
    background: var(--panel);
    color:var(--text);
    font-size:.9rem;
}

.tu-field .tu-input{
    min-width:220px;
}

.tu-check{
    display:flex;
    align-items:center;
    gap:8px;
    font-size:.85rem;
    color:var(--muted);
    padding-bottom:10px;
    white-space:nowrap;
    flex-shrink:0;
}

.tu-progress{
    list-style:none;
    margin:16px 0 0;
    padding:0;
    display:flex;
    flex-direction:column;
    gap:6px;
    font-size:.85rem;
}

.tu-progress-item{
    padding:8px 12px;
    border-radius:8px;
    background:var(--panel-soft);
    border:1px solid var(--border);
    color:var(--muted);
}

.tu-progress-item.ok{
    background: var(--success-soft);
    border-color: var(--success);
    color: var(--success);
}

.tu-progress-item.error{
    background: var(--danger-soft);
    border-color: var(--danger);
    color: var(--danger);
}

.tu-manage{
    padding-top:8px;
    border-top:1px dashed var(--border);
}

.tu-editor{
    display:flex;
    flex-direction:column;
    gap:8px;
    padding-top:8px;
    border-top:1px dashed var(--border);
}

.tu-editor-hint{
    font-size:.75rem;
    align-self:center;
}

.tu-danger:hover{
    border-color: var(--danger);
    color: var(--danger);
}

.tu-primary{
    background:var(--accent);
    border-color:var(--accent);
    color:#fff;
}

.tu-primary:hover{
    color:#fff;
    opacity:.92;
}

.tu-btn:disabled{
    opacity:.55;
    cursor:not-allowed;
}

.tu-toast{
    position:fixed;
    right:24px;
    bottom:24px;
    z-index:60;
    max-width:320px;
    padding:12px 16px;
    border-radius:12px;
    background:#0f172a;
    color:#fff;
    font-size:.88rem;
    box-shadow:0 10px 30px rgba(15,23,42,.25);
}

.tu-toast.ok{ background:#15803d; }
.tu-toast.error{ background:#b91c1c; }

/* 带 display 的类会盖掉 hidden 属性，这里统一兜底 */
[hidden]{
    display:none !important;
}

.back-link{
    display:inline-block;
    margin-bottom:20px;
    text-decoration:none;
    color:var(--accent);
}

.post-editor input,
.post-editor textarea{
    width:100%;
    margin-bottom:16px;
}

.post-editor button{
    margin-top:10px;
}


/* =========================
   Forum Enhancement
========================= */

.forum-header{
    display:flex;
    justify-content:space-between;
    align-items:center;
    gap:20px;
    margin-bottom:24px;
    padding:24px;
    background: var(--panel);
    border:1px solid var(--border);
    border-radius:16px;
    box-shadow:0 6px 24px rgba(15,23,42,.05);
}

.forum-header h1{
    margin:0;
    font-size:2rem;
}

.forum-header p{
    margin:8px 0 0;
    color:var(--muted);
}

.forum-top{
    margin-bottom:12px;
}

.forum-card{
    background: var(--panel);
    border:1px solid var(--border);
    border-radius:16px;
    padding:24px;
    transition:.25s;
    box-shadow:0 6px 24px rgba(15,23,42,.05);
}

.forum-card:hover{
    transform:translateY(-4px);
    box-shadow:0 12px 30px rgba(15,23,42,.12);
}

.forum-card h2{
    margin:0;
}

.forum-card h2 a{
    text-decoration:none;
    color:var(--text);
}

.forum-card h2 a:hover{
    color:var(--accent);
}

.forum-preview{
    margin-top:14px;
    color: var(--muted);
    line-height:1.8;
}

.forum-footer{
    margin-top:16px;
    padding-top:12px;
    border-top:1px solid var(--border);
    display:flex;
    justify-content:flex-end;
    color:var(--muted);
}

.post-detail{
    padding:30px;
}

.post-meta{
    display:flex;
    align-items:center;
    gap:12px;
    margin-bottom:20px;
    padding-bottom:15px;
    border-bottom:1px solid var(--border);
}

.post-gallery{
    display:grid;
    grid-template-columns:repeat(auto-fill,minmax(250px,1fr));
    gap:16px;
    margin-top:25px;
}

.gallery-image{
    width:100%;
    display:block;
    border-radius:12px;
    transition:.25s;
}

.gallery-image:hover{
    transform:scale(1.03);
}

/* ==========================================================================
   LOcraft 全站视觉刷新 + 响应式
   放在文件末尾，用于覆盖上面的历史规则；只调整观感与断点，不改页面结构。
   ========================================================================== */

/* ---------- 1. 设计令牌 ---------- */
:root {
    --bg: #f4f6fb;
    --panel: #ffffff;
    --panel-soft: #f7f9fc;
    --panel-sunken: #eef2f7;
    --accent: #2563eb;
    --accent-dark: #1d4ed8;
    --accent-strong: #1d4ed8;
    --accent-soft: #eff6ff;
    --accent-border: #dbeafe;
    --accent-2: #f59e0b;
    --text: #1f2937;
    --text-strong: #0f172a;
    --muted: #6b7280;
    --border: #e6eaf2;
    --border-strong: #dbe3ee;
    --glass: rgba(255, 255, 255, .86);
    --glass-strong: rgba(255, 255, 255, .97);
    --danger: #dc2626;
    --danger-soft: #fee2e2;
    --success: #15803d;
    --success-soft: #dcfce7;
    --warn: #b45309;
    --warn-soft: #fef3c7;
    --info: #0369a1;
    --info-soft: #e0f2fe;
    --chip-bg: #eef2f7;
    --chip-text: #4b5563;
    --code-bg: #0f172a;
    --code-text: #cbd8ea;
    --ring: rgba(37, 99, 235, .18);
    --ambient-1: rgba(147, 197, 253, .30);
    --ambient-2: rgba(125, 211, 252, .22);
    --radius-sm: 10px;
    --radius: 14px;
    --radius-lg: 18px;
    --shadow-sm: 0 2px 10px rgba(15, 23, 42, .05);
    --shadow: 0 10px 28px rgba(15, 23, 42, .07);
    --shadow-hover: 0 16px 36px rgba(37, 99, 235, .14);
    --container: 1160px;
}

html {
    -webkit-text-size-adjust: 100%;
    scroll-behavior: smooth;
}

body {
    font-family: system-ui, -apple-system, "Segoe UI", "Microsoft YaHei", "PingFang SC",
        "Hiragino Sans GB", Arial, sans-serif;
    font-size: 15.5px;
    line-height: 1.65;
    background: var(--bg);
    color: var(--text);
}

img,
video,
canvas {
    max-width: 100%;
    height: auto;
}

:focus-visible {
    outline: 2px solid var(--accent);
    outline-offset: 2px;
    border-radius: 6px;
}

::selection {
    background: rgba(37, 99, 235, .18);
}

/* ---------- 2. 容器与排版 ---------- */
.container {
    max-width: var(--container);
    padding: 1.6rem 1.1rem 4rem;
    margin: 0 auto;
}

h1, h2, h3, h4 {
    color: var(--text-strong);
    line-height: 1.35;
    letter-spacing: -.01em;
}

h1 { font-size: 1.9rem; }
h2 { font-size: 1.25rem; }
h3 { font-size: 1.06rem; }

.card > h1:first-child,
.card > h2:first-child,
.card > h3:first-child {
    margin-top: 0;
}

.muted {
    color: var(--muted);
}

.back-link {
    display: inline-flex;
    align-items: center;
    gap: .3rem;
    margin-bottom: .8rem;
    color: var(--muted);
    font-size: .92rem;
    text-decoration: none;
}

.back-link:hover {
    color: var(--accent);
}

/* ---------- 3. 顶部导航 ---------- */
.topbar {
    padding: .5rem 0;
    background: rgba(255, 255, 255, .88);
    -webkit-backdrop-filter: saturate(180%) blur(12px);
    backdrop-filter: saturate(180%) blur(12px);
    border-bottom: 1px solid var(--border);
}

.topbar-inner {
    max-width: var(--container);
    /* 与页面内容左右对齐：容器左右内边距与 .container 保持一致 */
    padding: 0 1.1rem;
    box-sizing: border-box;
    gap: 10px;
}

.topbar .brand {
    display: inline-flex;
    align-items: center;
    gap: .5rem;
    font-size: 1.15rem;
    font-weight: 800;
    color: var(--text-strong);
    text-decoration: none;
    letter-spacing: -.01em;
}

.brand-logo {
    width: 30px;
    height: 30px;
    border-radius: 9px;
    box-shadow: 0 4px 10px rgba(37, 99, 235, .25);
}

.nav-links {
    gap: 3px;
}

.nav-links a.nav-link {
    padding: 8px 12px;
    border-radius: 10px;
    font-size: .95rem;
    font-weight: 500;
    color: var(--muted);
    transition: background .15s ease, color .15s ease;
}

.nav-links a.nav-link:hover {
    background: var(--panel-soft);
    color: var(--accent-dark);
}

.nav-links a.nav-link.is-active {
    background: var(--accent-soft);
    color: var(--accent-dark);
    font-weight: 650;
}

.nav-divider {
    width: 1px;
    height: 22px;
    margin: 0 6px;
    background: var(--border);
}

.nav-links .nav-cta {
    padding: 8px 16px;
    border-radius: 10px;
    font-weight: 650;
    box-shadow: 0 6px 16px rgba(37, 99, 235, .25);
}

.nav-links .nav-register {
    color: var(--accent-dark);
    font-weight: 600;
}

/* 账号下拉菜单（桌面） */
.nav-user-menu {
    position: relative;
}

.nav-links .nav-user {
    display: inline-flex;
    align-items: center;
    gap: 5px;
    max-width: 180px;
    padding: 7px 12px;
    border-radius: 999px;
    border: 1px solid var(--border);
    background: var(--panel-soft);
    color: var(--text);
    font-size: .92rem;
    font-weight: 600;
}

.nav-user-name {
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.nav-user-caret {
    width: 7px;
    height: 7px;
    margin-left: 1px;
    border-right: 2px solid currentColor;
    border-bottom: 2px solid currentColor;
    transform: rotate(45deg) translateY(-2px);
    opacity: .5;
}

.nav-user-caret,
.nav-user-menu:hover .nav-user-caret {
    transition: transform .15s ease;
}

.nav-user-menu:hover .nav-user-caret,
.nav-user-menu:focus-within .nav-user-caret {
    transform: rotate(225deg) translateY(-1px);
}

.nav-user-menu:hover .nav-user,
.nav-user-menu:focus-within .nav-user,
.nav-links .nav-user:hover {
    border-color: var(--accent-border);
    background: var(--panel);
    color: var(--accent-dark);
}

.nav-dropdown {
    position: absolute;
    top: calc(100% + 8px);
    right: 0;
    z-index: 40;
    display: none;
    flex-direction: column;
    gap: 2px;
    min-width: 178px;
    padding: 6px;
    background: var(--panel);
    border: 1px solid var(--border);
    border-radius: var(--radius);
    box-shadow: var(--shadow);
}

/* 悬停 / 键盘聚焦时展开，鼠标从胶囊移到菜单中间不会断开 */
.nav-user-menu:hover .nav-dropdown,
.nav-user-menu:focus-within .nav-dropdown {
    display: flex;
}

.nav-user-menu::after {
    content: "";
    position: absolute;
    left: 0;
    right: 0;
    top: 100%;
    height: 10px;
}

.nav-dropdown a {
    margin: 0;
    padding: 9px 12px;
    border-radius: 9px;
    color: var(--text);
    font-size: .92rem;
}

.nav-dropdown a:hover {
    background: var(--accent-soft);
    color: var(--accent-dark);
}

.nav-dropdown a.nav-dropdown-danger {
    color: var(--danger);
}

.nav-dropdown a.nav-dropdown-danger:hover {
    background: var(--danger-soft);
    color: var(--danger);
}

/* 手机专用账号入口：桌面隐藏，手机抽屉里平铺显示（即使样式没加载也能点到） */
.nav-mobile-account {
    display: none;
}

/* ---------- 4. 卡片 / 栅格 / 提示条 ---------- */
.card,
.hero,
.flash {
    border-color: var(--border);
    border-radius: var(--radius);
    box-shadow: var(--shadow-sm);
}

.card {
    transition: box-shadow .18s ease, border-color .18s ease;
}

.card:hover {
    box-shadow: var(--shadow);
}

.card-grid {
    gap: 1.1rem;
}

.card-list {
    gap: 1.1rem;
}

.flash-list {
    display: grid;
    gap: .6rem;
    margin-bottom: 1rem;
}

.flash {
    padding: .8rem 1rem;
    margin-bottom: 0;
    font-size: .95rem;
    border-left: 4px solid var(--accent);
    background: var(--panel-soft);
    color: var(--text);
}

.notice-box {
    border-radius: var(--radius-sm);
    border: 1px solid var(--accent-border);
    background: var(--accent-soft);
    color: var(--accent-dark);
}

.badge {
    padding: .18rem .6rem;
    font-size: .78rem;
    font-weight: 600;
    border-radius: 999px;
    white-space: nowrap;
}

/* ---------- 5. 按钮 / 表单 ---------- */
.btn-primary,
.btn-secondary,
button,
.button {
    border-radius: var(--radius-sm);
    font-weight: 600;
    transition: transform .15s ease, box-shadow .15s ease, background .15s ease,
        border-color .15s ease, color .15s ease;
}

.btn-primary,
.btn-secondary {
    padding: .62rem 1.15rem;
}

.btn-primary {
    background: linear-gradient(135deg, #2563eb, #3b82f6);
    box-shadow: 0 8px 20px rgba(37, 99, 235, .24);
}

.btn-primary:hover {
    transform: translateY(-1px);
    box-shadow: 0 12px 26px rgba(37, 99, 235, .3);
}

.btn-secondary {
    background: var(--panel);
    border: 1px solid var(--border-strong);
    color: var(--text-strong);
}

.btn-secondary:hover {
    border-color: var(--accent-border);
    color: var(--accent-dark);
    transform: translateY(-1px);
}

input[type="text"],
input[type="email"],
input[type="password"],
input[type="number"],
input[type="search"],
input[type="url"],
select,
textarea {
    padding: .6rem .75rem;
    border: 1px solid var(--border-strong);
    border-radius: var(--radius-sm);
    background: var(--panel);
    color: var(--text);
    transition: border-color .15s ease, box-shadow .15s ease;
}

input[type="text"]:focus,
input[type="email"]:focus,
input[type="password"]:focus,
input[type="number"]:focus,
input[type="search"]:focus,
input[type="url"]:focus,
select:focus,
textarea:focus {
    outline: none;
    border-color: var(--accent);
    box-shadow: 0 0 0 4px rgba(37, 99, 235, .1);
}

input[type="checkbox"],
input[type="radio"] {
    width: auto;
    min-width: 0;
    margin: 0 .4rem 0 0;
    accent-color: var(--accent);
}

label {
    font-weight: 600;
    color: var(--text);
}

.field-hint {
    display: block;
    margin-top: .25rem;
    color: var(--muted);
    font-size: .82rem;
    font-weight: 400;
}

/* ---------- 6. 表格 ---------- */
.table-wrap {
    overflow-x: auto;
    border-radius: var(--radius-sm);
}

.table th,
.table td {
    padding: .62rem .7rem;
    border-bottom: 1px solid var(--border);
}

.table th {
    font-size: .78rem;
    font-weight: 700;
    letter-spacing: .03em;
    color: var(--muted);
    background: var(--panel-soft);
    border-bottom: 1px solid var(--border);
    white-space: nowrap;
}

.table th:first-child { border-top-left-radius: var(--radius-sm); }
.table th:last-child { border-top-right-radius: var(--radius-sm); }
.table tbody tr:last-child td { border-bottom: 0; }
.table tbody tr:hover td { background: var(--panel-soft); }

/* ---------- 7. 首页 hero / 功能卡 ---------- */
.hero {
    border-radius: var(--radius-lg);
    box-shadow: var(--shadow);
}

.hero h1 {
    font-size: 2.1rem;
    letter-spacing: -.02em;
}

.feature-grid {
    gap: 1rem;
}

.feature-card {
    border-radius: var(--radius);
    border: 1px solid var(--border);
    background: var(--panel);
    box-shadow: var(--shadow-sm);
    transition: transform .18s ease, box-shadow .18s ease, border-color .18s ease;
}

.feature-card:hover {
    transform: translateY(-3px);
    border-color: var(--accent-border);
    box-shadow: var(--shadow-hover);
}

.feature-icon {
    font-size: 1.8rem;
}

/* ---------- 8. 页脚 ---------- */
.footer {
    padding: 2.2rem 1rem 2.6rem;
    border-top: 1px solid var(--border);
    background: var(--panel);
    color: var(--muted);
    font-size: .9rem;
}

.footer .social-links,
.footer .beian-row {
    gap: .6rem 1rem;
}

.footer a {
    color: var(--muted);
}

.footer a:hover {
    color: var(--accent);
}

/* ---------- 9. 服务器状态页 ---------- */
.status-header {
    gap: 1.2rem;
    align-items: center;
}

.server-grid {
    gap: 1rem;
}

.server-card {
    border-radius: var(--radius);
    border: 1px solid var(--border);
    background: var(--panel);
    box-shadow: var(--shadow-sm);
    transition: transform .18s ease, box-shadow .18s ease;
}

.server-card:hover {
    transform: translateY(-2px);
    box-shadow: var(--shadow-hover);
}

.server-group {
    margin-bottom: 1.6rem;
}

.server-group:last-child {
    margin-bottom: 0;
}

.server-group-head {
    display: flex;
    flex-wrap: wrap;
    align-items: baseline;
    justify-content: space-between;
    gap: .35rem .9rem;
    margin: .2rem 0 .85rem;
    padding-bottom: .5rem;
    border-bottom: 1px dashed var(--border);
}

.server-group-head h2 {
    margin: 0;
    font-size: 1.1rem;
}

.server-group-head .muted {
    font-size: .82rem;
}

.stats-grid > .stat,
.stats .stat {
    border-radius: var(--radius-sm);
    background: var(--panel-soft);
    border: 1px solid var(--border);
    padding: .7rem .8rem;
}

.player-chip {
    border-radius: 999px;
    background: var(--accent-soft);
    border: 1px solid var(--accent-border);
    color: var(--accent-dark);
}

.chart-panel,
.player-panel {
    border-radius: var(--radius);
    border: 1px solid var(--border);
    background: var(--panel);
    box-shadow: var(--shadow-sm);
}

/* ---------- 10. 论坛 ---------- */
.bbs-thread-row,
.bbs-category {
    border-radius: var(--radius);
    border: 1px solid var(--border);
    background: var(--panel);
    transition: transform .15s ease, box-shadow .15s ease, border-color .15s ease;
}

.bbs-thread-row:hover,
.bbs-category:hover {
    border-color: var(--accent-border);
    box-shadow: var(--shadow-hover);
    transform: translateX(2px);
}

.bbs-nav-chips a,
.bbs-tag {
    border-radius: 999px;
}

.bbs-content {
    line-height: 1.8;
    font-size: 15.5px;
}

.bbs-content img,
.bbs-content video {
    border-radius: var(--radius-sm);
}

.forum-header {
    border-radius: var(--radius);
}

/* ---------- 11. 登录 / 注册 ---------- */
.auth-card {
    border-radius: var(--radius-lg);
    box-shadow: var(--shadow);
}

/* ---------- 12. 后台 ---------- */
.admin-stat,
.admin-entry {
    border-radius: var(--radius);
    border: 1px solid var(--border);
    background: var(--panel);
    box-shadow: var(--shadow-sm);
}

.admin-user-row,
.admin-row {
    border-radius: var(--radius-sm);
}

/* 用户管理里的"删除账号"操作区 */
.admin-delete-form {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: .45rem;
    padding: .3rem .55rem;
    border: 1px dashed var(--danger);
    border-radius: 10px;
    background: var(--danger-soft);
}

.admin-delete-purge {
    display: inline-flex;
    align-items: center;
    gap: .3rem;
    margin: 0;
    font-size: .82rem;
    font-weight: 500;
    color: var(--danger);
}

.admin-delete-purge input[type="checkbox"] {
    margin: 0;
}

/* ---------- 13. 响应式 ---------- */

@media (max-width: 1024px) {
    .container {
        max-width: 100%;
    }

    h1 {
        font-size: 1.75rem;
    }

    .hero h1 {
        font-size: 1.85rem;
    }
}

/* ==========================================================================
   导航重写
   桌面（>1024px）：一行横向排列，放不下时自动收紧，不换行、不横向滚动；
   手机 / 平板（≤1024px）：收起汉堡按钮，点开后是"竖向单列"菜单，不再需要左右滑动。
   ========================================================================== */

/* 安全网：页面本身不出现横向滑动，宽表格各自在自己的容器里滚动 */
body {
    overflow-x: clip;
}

.topbar-inner {
    flex-wrap: nowrap;
}

.nav-links {
    flex-wrap: nowrap;
    min-width: 0;
}

/* 1025px ~ 1180px：桌面导航紧凑一点，保证一行放得下 */
@media (min-width: 1025px) and (max-width: 1180px) {
    .nav-links a.nav-link {
        padding: 8px 9px;
        font-size: .9rem;
    }

    .nav-links .nav-user {
        max-width: 132px;
    }
}

@media (max-width: 1024px) {
    .nav-toggle {
        display: inline-flex;
    }

    /* 抽屉：整块从顶栏下方展开，内容竖排成一列 */
    .nav-links {
        position: absolute;
        top: 100%;
        left: 0;
        right: 0;
        display: none;
        flex-direction: column;
        flex-wrap: nowrap;
        align-items: stretch;
        justify-content: flex-start;
        gap: 2px;
        max-height: calc(100vh - 60px);
        max-height: calc(100dvh - 60px);
        overflow-y: auto;
        overflow-x: hidden;
        -webkit-overflow-scrolling: touch;
        padding: 10px 12px 16px;
        background: var(--panel);
        border-bottom: 1px solid var(--border);
        border-radius: 0 0 16px 16px;
        box-shadow: 0 20px 30px rgba(15, 23, 42, .12);
    }

    body.nav-open .nav-links {
        display: flex;
    }

    /* 每个菜单项都占一整行 */
    .nav-links a.nav-link,
    .nav-links .nav-register,
    .nav-links .nav-cta {
        display: flex;
        align-items: center;
        width: 100%;
        padding: 13px 14px;
        font-size: 1rem;
        line-height: 1.4;
        text-align: left;
        border-radius: 10px;
    }

    .nav-links .nav-cta {
        justify-content: center;
        margin-top: 6px;
    }

    .nav-divider {
        width: 100%;
        height: 1px;
        margin: 8px 0;
        background: var(--border);
    }

    /* 账号区：同样是竖排单列，且不依赖悬停 */
    .nav-user-menu {
        display: none;
    }

    .nav-mobile-account {
        display: flex;
        flex-direction: column;
        flex-wrap: nowrap;
        gap: 2px;
    }

    .nav-mobile-account-title {
        display: flex;
        align-items: center;
        gap: 6px;
        padding: 8px 14px 4px;
        font-size: .82rem;
        color: var(--muted);
    }

    .nav-mobile-account .nav-link {
        width: 100%;
    }

    .nav-mobile-account .nav-logout {
        color: var(--danger);
    }
}

/* 小屏平板 / 大屏手机：栅格与堆叠交给站点原有规则处理，
   这里只补充手机端不依赖任何样式也能用的账号入口（见 .nav-mobile-account）。 */

/* 手机 */
@media (max-width: 640px) {
    /* 与页面内容对齐（导航栏左右内边距跟 .container 保持一致） */
    .topbar-inner {
        padding: 0 .85rem;
    }

    .brand {
        font-size: 1.05rem;
    }

    .brand-logo {
        width: 26px;
        height: 26px;
    }

    .nav-toggle {
        height: 38px;
        padding: 0 11px;
        border-radius: 11px;
    }

    .table th,
    .table td {
        padding: .5rem .55rem;
        font-size: .9rem;
    }

    .footer {
        padding: 1.6rem .9rem 2rem;
        text-align: center;
    }
}

@media (max-width: 420px) {
    .nav-toggle-text {
        display: none;
    }

    .auth-card {
        padding: 1.1rem;
    }
}

/* 无障碍：减少动画偏好 */
@media (prefers-reduced-motion: reduce) {
    *,
    *::before,
    *::after {
        animation-duration: .001ms !important;
        transition-duration: .001ms !important;
        scroll-behavior: auto !important;
    }
}

/* ---------- 14. 细节修复 ---------- */

/* 页面横幅：去掉原来蓝+琥珀混出的灰调，换成干净的蓝色系 */
.hero {
    background:
        radial-gradient(760px 280px at 88% -30%, rgba(125, 211, 252, .38), transparent 62%),
        linear-gradient(135deg, rgba(37, 99, 235, .10) 0%, rgba(37, 99, 235, .05) 55%, rgba(56, 189, 248, .10) 100%);
    border: 1px solid var(--accent-border);
}

.hero p {
    color: var(--muted);
}

/* 论坛头部：标题与右侧操作区在窄屏自动换行，搜索框不再被挤出边界 */
.forum-header {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: space-between;
    gap: 1rem;
}

.forum-header > div:first-child,
.forum-header-actions,
.bbs-search-form {
    min-width: 0;
}

.bbs-search-form {
    flex: 1 1 auto;
}

.bbs-search-form input[type="search"],
.bbs-search-form input[type="text"] {
    flex: 1 1 160px;
    width: auto;
    min-width: 0;
}

/* 发帖 / 编辑页的表单控件统一宽度 */
.post-editor input[type="text"],
.post-editor input[type="search"],
.post-editor select,
.post-editor textarea {
    width: 100%;
}

.post-editor .poll-builder-row input[type="text"],
.post-editor .poll-multiple input {
    width: auto;
}

/* 表格里的操作按钮组不要撑破单元格 */
.bbs-thread-actions,
.admin-user-actions,
.bbs-admin-actions {
    display: flex;
    flex-wrap: wrap;
    gap: .35rem;
    align-items: center;
}

@media (max-width: 640px) {
    .forum-header-actions {
        width: 100%;
    }

    .forum-header-actions .btn-primary {
        flex: 1 1 auto;
        text-align: center;
    }
}

/* ---------- 赞助页 / 在线支付（易支付） ---------- */
.donate-hero {
    display: flex;
    flex-direction: column;
    gap: 0.6rem;
}

.donate-stats {
    margin-top: 0.8rem;
}

.donate-last-value {
    font-size: 1rem !important;
    line-height: 1.5;
}

.donate-form {
    display: flex;
    flex-direction: column;
    gap: 0.55rem;
    max-width: 640px;
}

.donate-amounts {
    display: flex;
    flex-wrap: wrap;
    gap: 0.5rem;
    margin-bottom: 0.35rem;
}

.donate-amount {
    padding: 0.45rem 0.9rem;
    border: 1px solid var(--border-strong);
    border-radius: 999px;
    background: var(--panel);
    color: var(--text-strong, #1f2937);
    font-weight: 600;
    cursor: pointer;
}

.donate-amount:hover {
    border-color: var(--accent, #2563eb);
    color: var(--accent, #2563eb);
}

.donate-amount.is-active {
    background: linear-gradient(135deg, #2563eb, #3b82f6);
    border-color: transparent;
    color: #fff;
}

.donate-channels {
    display: flex;
    flex-wrap: wrap;
    gap: 0.5rem;
    margin-bottom: 0.35rem;
}

.donate-channel {
    display: inline-flex;
    align-items: center;
    gap: 0.35rem;
    padding: 0.45rem 0.9rem;
    border: 1px solid var(--border-strong);
    border-radius: var(--radius-sm, 10px);
    background: var(--panel);
    font-weight: 600;
    cursor: pointer;
}

.donate-channel:has(input:checked) {
    border-color: var(--accent, #2563eb);
    box-shadow: 0 0 0 3px rgba(37, 99, 235, 0.12);
}

.donate-actions {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 0.75rem;
    margin-top: 0.35rem;
}

.donate-hint {
    font-size: 0.85rem;
}

.donate-status {
    margin-top: 1rem;
    padding: 0.9rem 1rem;
    border: 1px solid var(--accent-border);
    border-radius: var(--radius-sm, 10px);
    background: var(--accent-soft, #eff6ff);
}

.donate-status-title {
    margin: 0 0 0.25rem;
    font-weight: 700;
    color: var(--accent-dark, #1d4ed8);
    word-break: break-all;
}

.donate-status-actions {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 0.5rem;
    margin-top: 0.6rem;
}

.donate-order-no {
    font-family: ui-monospace, SFMono-Regular, Consolas, monospace;
    font-size: 0.85rem;
    word-break: break-all;
}

.donate-result h1 {
    margin-top: 0;
}

.admin-row-actions {
    display: flex;
    flex-wrap: wrap;
    gap: 0.35rem;
    align-items: center;
}

.update-log-content {
    white-space: pre-line;
    line-height: 1.75;
    overflow-wrap: anywhere;
}

/* ---------- 首页业务总览：Minecraft 主业务 + 社区配套 ---------- */
.business-overview {
    margin-bottom: 1.15rem;
    padding: 1.25rem;
    border: 1px solid var(--border);
    border-radius: var(--radius-lg);
    background: var(--panel);
    box-shadow: var(--shadow-sm);
}

.business-overview-head {
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 1rem;
    margin-bottom: 1rem;
}

.business-overview-head h2 {
    margin: .2rem 0 .35rem;
}

.business-overview-head p {
    margin: 0;
    color: var(--muted);
    font-size: .88rem;
}

.business-kicker {
    color: var(--accent);
    font-size: .72rem;
    font-weight: 800;
    letter-spacing: .14em;
    text-transform: uppercase;
}

.business-layout {
    display: grid;
    grid-template-columns: minmax(0, 1.05fr) minmax(0, .95fr);
    gap: 1rem;
}

.business-primary {
    display: flex;
    flex-direction: column;
    min-width: 0;
    padding: 1.35rem;
    overflow: hidden;
    border-radius: var(--radius-lg);
    background:
        radial-gradient(circle at 90% 8%, rgba(77, 208, 225, .24), transparent 32%),
        linear-gradient(145deg, #15346f, #2f6fed);
    box-shadow: 0 16px 38px rgba(32, 73, 153, .18);
    color: #fff;
}

.business-primary-top {
    display: flex;
    justify-content: space-between;
    align-items: center;
}

.business-tag {
    padding: .22rem .6rem;
    border: 1px solid rgba(255, 255, 255, .24);
    border-radius: 999px;
    background: rgba(255, 255, 255, .12);
    color: rgba(255, 255, 255, .86);
    font-size: .72rem;
    font-weight: 800;
}

.business-primary-icon {
    font-size: 2rem;
}

.business-primary h3 {
    margin: .85rem 0 .45rem;
    color: #fff;
    font-size: 1.35rem;
}

.business-primary p {
    margin: 0;
    color: rgba(255, 255, 255, .76);
    font-size: .86rem;
    line-height: 1.75;
}

.business-primary-points {
    display: flex;
    flex-wrap: wrap;
    gap: .4rem;
    margin: 1rem 0 1.15rem;
}

.business-primary-points span {
    padding: .24rem .58rem;
    border-radius: 999px;
    background: rgba(255, 255, 255, .12);
    color: rgba(255, 255, 255, .88);
    font-size: .72rem;
}

.business-primary-actions {
    display: flex;
    flex-wrap: wrap;
    gap: .55rem;
    margin-top: auto;
}

.business-primary-actions .btn-primary {
    border-color: rgba(255, 255, 255, .85);
    background: #fff;
    color: #1e55ba;
}

.business-primary-actions .btn-secondary {
    border-color: rgba(255, 255, 255, .3);
    background: rgba(255, 255, 255, .1);
    color: #fff;
}

.business-secondary {
    min-width: 0;
    padding: 1rem;
    border: 1px solid var(--border);
    border-radius: var(--radius-lg);
    background: var(--panel);
}

.business-secondary-head {
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: .7rem;
    margin-bottom: .75rem;
}

.business-secondary-head strong {
    color: var(--text-strong);
}

.business-secondary-head span {
    color: var(--muted);
    font-size: .74rem;
}

.business-secondary-grid {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: .65rem;
}

.business-mini-card {
    display: grid;
    grid-template-columns: 34px minmax(0, 1fr);
    grid-template-rows: auto auto;
    align-items: center;
    gap: .1rem .55rem;
    min-width: 0;
    padding: .7rem;
    border: 1px solid var(--border);
    border-radius: var(--radius);
    background: var(--panel);
    color: inherit;
    text-decoration: none;
    transition: transform .16s ease, border-color .16s ease, box-shadow .16s ease;
}

.business-mini-card:hover {
    transform: translateY(-2px);
    border-color: var(--accent-border);
    box-shadow: var(--shadow-hover);
}

.business-mini-card > span {
    display: grid;
    grid-row: 1 / 3;
    place-items: center;
    width: 34px;
    height: 34px;
    border-radius: 10px;
    background: var(--accent-soft);
    font-size: 1rem;
}

.business-mini-card strong {
    overflow: hidden;
    color: var(--text-strong);
    font-size: .83rem;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.business-mini-card small {
    overflow: hidden;
    color: var(--muted);
    font-size: .68rem;
    text-overflow: ellipsis;
    white-space: nowrap;
}

@media (max-width: 900px) {
    .business-overview-head {
        align-items: flex-start;
        flex-direction: column;
    }

    .business-layout {
        grid-template-columns: minmax(0, 1fr);
    }
}

@media (max-width: 560px) {
    .business-overview {
        padding: .9rem;
    }

    .business-primary {
        padding: 1.05rem;
    }

    .business-primary-actions {
        display: grid;
        grid-template-columns: 1fr;
    }

    .business-primary-actions a {
        width: 100%;
        text-align: center;
    }

    .business-secondary-grid {
        grid-template-columns: minmax(0, 1fr);
    }
}

/* ---------- 全站性能与响应式优化层 ---------- */

/* 让浏览器把布局计算限制在组件内部，减少长页面重排。 */
.card,
.hero,
.business-overview,
.feature-card,
.business-mini-card,
.admin-entry,
.team-card,
.quick-card,
.social-card,
.friend-link {
    contain: layout style;
}

/* 首屏以下卡片延迟渲染，减少一次加载时的总绘制量。 */
.feature-card,
.business-mini-card,
.team-card,
.admin-entry,
.quick-card,
.social-card,
.friend-link {
    content-visibility: auto;
    contain-intrinsic-size: 1px 180px;
}

.table-wrap {
    max-width: 100%;
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
}

.table-wrap .table {
    min-width: 620px;
}

button,
a,
input,
select,
textarea {
    -webkit-tap-highlight-color: transparent;
}

input,
select,
textarea {
    max-width: 100%;
}

img,
video {
    max-width: 100%;
}

/* 平板：两栏内容改为更稳健的自适应宽度。 */
@media (max-width: 1024px) {
    .container {
        padding-right: 1rem;
        padding-left: 1rem;
    }

    .card-grid,
    .quick-grid,
    .feature-grid {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }

    .admin-user-row,
    .admin-row {
        min-width: 0;
    }

    .topbar {
        -webkit-backdrop-filter: none;
        backdrop-filter: none;
        background: rgba(255, 255, 255, .98);
    }
}

/* 手机：全站单栏、按钮可点、表格和后台表单不挤压。 */
@media (max-width: 768px) {
    .container {
        padding: .85rem .7rem 3rem;
    }

    .hero,
    .card,
    .business-overview {
        padding: .95rem;
        border-radius: 15px;
    }

    .hero h1,
    .card > h1:first-child {
        font-size: 1.55rem;
        line-height: 1.35;
    }

    .hero-buttons,
    .forum-header-actions,
    .donate-actions,
    .donate-status-actions {
        display: grid;
        grid-template-columns: minmax(0, 1fr);
        gap: .55rem;
    }

    .hero-buttons a,
    .forum-header-actions a,
    .forum-header-actions button,
    .donate-actions .btn-primary,
    .donate-actions .btn-secondary,
    .donate-status-actions .tu-btn,
    .donate-status-actions .button {
        width: 100%;
        text-align: center;
    }

    .card-grid,
    .quick-grid,
    .feature-grid,
    .team-grid,
    .social-grid,
    .friend-links,
    .admin-entry-grid,
    .admin-user-list,
    .stats-grid {
        grid-template-columns: minmax(0, 1fr);
    }

    .stats-grid {
        grid-template-columns: repeat(2, minmax(0, 1fr));
        gap: .65rem;
    }

    .admin-stat {
        min-width: 0;
        padding: .8rem;
    }

    .admin-stat .value {
        font-size: 1.2rem;
        overflow-wrap: anywhere;
    }

    .feature-card,
    .quick-card,
    .admin-entry,
    .team-card,
    .social-card,
    .friend-link {
        padding: .9rem;
        content-visibility: visible;
        contain-intrinsic-size: auto;
        box-shadow: var(--shadow-sm);
    }

    .table-wrap .table {
        min-width: 560px;
    }

    .admin-user-row,
    .admin-row,
    .admin-row-inline {
        display: grid;
        grid-template-columns: minmax(0, 1fr);
        gap: .7rem;
        min-width: 0;
    }

    .admin-user-actions,
    .admin-rename-form,
    .admin-row-actions,
    .forum-header-actions {
        display: grid;
        grid-template-columns: minmax(0, 1fr);
        width: 100%;
    }

    .admin-user-actions .tu-btn,
    .admin-rename-form .tu-btn,
    .admin-row-actions .tu-btn,
    .admin-row-actions .button {
        width: 100%;
        min-height: 40px;
    }

    .post-editor input,
    .post-editor textarea,
    .post-editor select,
    .admin-row input,
    .admin-row textarea,
    .admin-row select,
    .donate-form input,
    .donate-form select,
    .bbs-search-form input {
        width: 100%;
        min-height: 42px;
    }

    .donate-amounts,
    .donate-channels {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }

    .bbs-thread-row,
    .bbs-category {
        min-width: 0;
    }

    .bbs-thread-row {
        align-items: flex-start;
        gap: .55rem;
    }

    .bbs-profile-summary,
    .bbs-profile-mini {
        display: grid;
        grid-template-columns: minmax(0, 1fr);
        justify-items: start;
    }

    .bbs-content img,
    .bbs-content video {
        max-width: 100%;
        height: auto;
    }

    .bbs-lightbox img,
    .bbs-lightbox video {
        max-height: 82vh;
    }

    .topbar {
        padding: .25rem 0;
    }

    .topbar-inner {
        padding-right: .7rem;
        padding-left: .7rem;
    }

    .footer {
        padding-right: .7rem;
        padding-left: .7rem;
    }
}

/* 小屏：压低卡片阴影和圆角，缩短滚动距离。 */
@media (max-width: 480px) {
    .container {
        padding-right: .55rem;
        padding-left: .55rem;
    }

    .hero,
    .card,
    .business-overview {
        padding: .8rem;
        border-radius: 13px;
    }

    .business-primary {
        padding: .9rem;
    }

    .donate-amounts,
    .donate-channels {
        grid-template-columns: minmax(0, 1fr);
    }

    .table-wrap .table {
        min-width: 520px;
    }
}

@media (prefers-reduced-motion: reduce) {
    *,
    *::before,
    *::after {
        animation-duration: .01ms !important;
        animation-iteration-count: 1 !important;
        scroll-behavior: auto !important;
        transition-duration: .01ms !important;
    }
}