* { box-sizing: border-box; margin: 0; padding: 0; }

:root {
    --accent: #1a1a1a;
    --grad: #1a1a1a;
    --text: #282a2d;
    --sub: #999;
    --bg: #f9f9f9;
}

html { scroll-behavior: smooth; }

body {
    font: 14px/1.6 -apple-system, "Segoe UI", "Microsoft YaHei", sans-serif;
    background: var(--bg);
    color: var(--text);
    min-height: 100vh;
}

a { color: inherit; text-decoration: none; }

/* ---------- 顶部栏 ---------- */
.topbar {
    height: 65px;
    background: #fff;
    box-shadow: 0 0 25px 5px rgba(10, 10, 10, .05);
}
.tb-inner {
    max-width: 1160px;
    height: 65px;
    margin: 0 auto;
    padding: 0 20px;
    display: flex;
    align-items: center;
}
.tb-logo {
    flex: 0 0 180px;
    width: 180px;
    height: 65px;
    display: flex;
    align-items: center;
}
.tb-logo img {
    max-width: 180px;
    max-height: 65px;
    object-fit: contain;
    object-position: left center;
}
.tb-logo span {
    font-size: 17px;
    font-weight: 800;
    font-style: italic;
    color: #1a1a1a;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.tb-right {
    margin-left: auto;
    display: flex;
    align-items: center;
    gap: 22px;
}
.tb-link {
    font-size: 14px;
    color: #555;
    transition: color .2s;
    white-space: nowrap;
}
.tb-link:hover { color: var(--accent); }
.tb-link.on { color: var(--accent); font-weight: 600; }

/* 音乐播放器：嵌入顶栏右侧，列表向下弹出覆盖页面 */
.tb-ap {
    position: relative;
    width: 300px;
    height: 65px;
    flex: 0 0 auto;
}
.tb-ap .aplayer {
    position: absolute;
    right: 0;
    top: 0;
    width: 300px;
    height: 65px;
    margin: 0;
    z-index: 99;
    border-radius: 0;
    box-shadow: none;
}
/* 强制封面/信息区 65px，压掉 APlayer 默认 66px 和 withlrc 状态的 90px */
.tb-ap .aplayer .aplayer-pic { width: 49px; height: 49px; margin: 8px 0 0 8px; border-radius: 50%; overflow: hidden; box-shadow: 0 2px 8px rgba(0, 0, 0, .12); }
.tb-ap .aplayer .aplayer-info { height: 65px; margin-left: 65px; padding: 10px 7px 0 10px; box-sizing: border-box; }
.tb-ap .aplayer .aplayer-info .aplayer-music { margin-bottom: 8px; }
.tb-ap .aplayer.aplayer-withlist {
    height: auto;
    border-radius: 0;
    box-shadow: none;
}
/* 播放器不加任何边框/分隔线 */
.aplayer.aplayer-withlist .aplayer-info { border-bottom: none; }
.aplayer .aplayer-lrc { display: none !important; }
.aplayer .aplayer-info { padding-left: 10px; }
.aplayer .aplayer-music { width: 130px; }
.aplayer .aplayer-list {
    border: none !important;
    max-height: 45vh !important;
}
.aplayer .aplayer-list ol {
    max-height: 45vh !important;
    overflow-y: auto;
    overscroll-behavior: contain;
}
.aplayer .aplayer-list ol::-webkit-scrollbar { width: 6px; }
.aplayer .aplayer-list ol::-webkit-scrollbar-thumb { background: #dcdcdc; border-radius: 3px; }
.aplayer .aplayer-list ol::-webkit-scrollbar-thumb:hover { background: #bdbdbd; }
.aplayer .aplayer-list ol::-webkit-scrollbar-track { background: transparent; }
.aplayer .aplayer-list li { transition: background .15s; }
.aplayer .aplayer-list li:hover { background: #f4f4f4; }
.aplayer .aplayer-list li.aplayer-list-playing { color: var(--accent); }
.aplayer .aplayer-list li.aplayer-list-playing .aplayer-list-author { color: #999; }

/* ---------- 内容区占位 ---------- */
.wrap { max-width: 1160px; margin: 20px auto 0; padding: 0 20px; min-height: 50vh; }

.foot { text-align: center; color: #a8a8a8; font-size: 12px; padding: 30px 0 40px; }
.foot a:hover { color: var(--accent); }

/* ---------- 投稿 / 留言页面 ---------- */
.page-box {
    max-width: 720px;
    margin: 0 auto;
    background: #fff;
    border-radius: 14px;
    padding: 26px 28px;
    box-shadow: 0 2px 8px rgba(0, 0, 0, .04);
}
.page-title { font-size: 20px; margin-bottom: 4px; }
.page-sub { color: var(--sub); font-size: 13px; margin-bottom: 16px; }
.page-h2 { font-size: 15px; margin: 24px 0 10px; }

.pub-form label {
    display: block;
    font-size: 13px;
    color: #555;
    margin-bottom: 14px;
}
.pub-form label b { color: #e5484d; font-weight: 400; }
.pub-form input[type=text],
.pub-form textarea {
    display: block;
    width: 100%;
    margin-top: 6px;
    border: 1px solid #e4e4e4;
    border-radius: 10px;
    padding: 10px 12px;
    font-size: 14px;
    font-family: inherit;
    background: #fafafa;
    resize: vertical;
}
.pub-form input:focus,
.pub-form textarea:focus { outline: none; border-color: var(--accent); background: #fff; }

.msg.err { background: #fdecec; color: #c53030; }

.gl-item {
    border: 1px solid #efefef;
    border-radius: 10px;
    padding: 12px 14px;
    margin-bottom: 10px;
}
.gl-head { display: flex; justify-content: space-between; align-items: baseline; margin-bottom: 4px; }
.gl-name { font-size: 13px; color: var(--accent); }
.gl-time { font-size: 12px; color: var(--sub); }
.gl-text { font-size: 14px; white-space: pre-wrap; word-break: break-word; }

/* ---------- 后台 ---------- */
.login-box {
    max-width: 380px;
    margin: 14vh auto 0;
    background: #fff;
    border-radius: 14px;
    padding: 30px;
    box-shadow: 0 10px 30px rgba(0, 0, 0, .07);
}
.login-box h1 { font-size: 18px; text-align: center; margin-bottom: 18px; }
.back-line { margin-top: 14px; text-align: center; font-size: 13px; color: var(--sub); }
.back-line a { color: var(--accent); }

.adm { max-width: 1100px; margin: 20px auto 60px; padding: 0 16px; }
.adm-head { display: flex; justify-content: space-between; align-items: center; margin-bottom: 16px; }
.adm-head b { font-size: 18px; }
.adm-head span { font-size: 13px; color: var(--sub); }
.adm-head a { color: var(--accent); }

.panel {
    background: #fff;
    border-radius: 12px;
    padding: 16px;
    margin-bottom: 14px;
    box-shadow: 0 2px 8px rgba(0, 0, 0, .04);
}
.panel > h2 { font-size: 15px; margin-bottom: 12px; }

.row { display: flex; gap: 8px; align-items: center; flex-wrap: wrap; margin-bottom: 8px; }
.row:last-child { margin-bottom: 0; }
.row input[type=text],
.row input[type=password] {
    border: 1px solid #e4e4e4;
    border-radius: 8px;
    padding: 8px 10px;
    font-size: 13px;
    min-width: 0;
    background: #fafafa;
}
.row input[type=file] { font-size: 12px; color: var(--sub); }
.row input:focus { outline: none; border-color: var(--accent); background: #fff; }

.f-name { flex: 0 0 110px; }
.f-url  { flex: 1 1 240px; }
.f-label { flex: 0 0 70px; color: var(--sub); font-size: 13px; }
.cat-label { font-size: 13px; color: var(--sub); }

.btn {
    border: 0;
    border-radius: 8px;
    padding: 8px 14px;
    background: var(--grad);
    color: #fff;
    cursor: pointer;
    font-size: 13px;
    white-space: nowrap;
}
.btn.gray { background: #efefef; color: #555; }
.btn.red { background: #f3b0b4; color: #a12126; }
.btn:hover { opacity: .88; }

.site-row { padding: 10px 0; border-bottom: 1px solid #f0f0f0; }
.site-row:last-child { border-bottom: 0; }
.ent-main { flex: 1 1 300px; display: flex; flex-direction: column; gap: 2px; min-width: 0; }
.ent-main b { font-size: 14px; }
.ent-main a { font-size: 13px; color: var(--accent); word-break: break-all; }
.ent-main em { font-style: normal; font-size: 13px; color: #555; word-break: break-word; white-space: pre-wrap; }
.ent-meta { font-size: 12px; color: var(--sub); }

.msg {
    background: #f2f2f2;
    color: #333;
    border-radius: 10px;
    padding: 10px 14px;
    margin-bottom: 14px;
    font-size: 13px;
}

/* ---------- 响应式 ---------- */
@media (max-width: 680px) {
    .tb-inner { padding: 0 12px; }
    .tb-logo { flex: 0 0 130px; width: 130px; }
    .tb-right { gap: 12px; }
    .tb-ap { width: 260px; }
    .tb-ap .aplayer { width: 260px; }
    .tb-ap .aplayer-music { width: 90px; }
    .tb-link { display: none; }
}