/* ===== 朋友圈素材 H5 版 ===== */
* { margin:0; padding:0; box-sizing:border-box; }
body {
    font-family: -apple-system, BlinkMacSystemFont, "PingFang SC", "Helvetica Neue", "Microsoft YaHei", sans-serif;
    background:#f2f2f2; color:#333; max-width:480px; margin:0 auto;
    padding-bottom:70px;
}
a { text-decoration:none; color:inherit; }

/* 顶部栏 */
.topbar {
    position:sticky; top:0; z-index:100; background:#fff;
    display:flex; align-items:center; justify-content:space-between;
    padding:12px 16px; border-bottom:1px solid #eee;
}
.topbar .title { font-size:17px; font-weight:600; }
.topbar .right { display:flex; gap:14px; align-items:center; }
.topbar .right a { font-size:14px; color:#576b95; }

/* 公告条 */
.announce-bar {
    background:#fffbe6; color:#8a6d3b; font-size:13px;
    padding:8px 16px; border-bottom:1px solid #f0e6c8;
}

/* 搜索框 */
.search-bar {
    display:flex; gap:8px; background:#fff; padding:10px 16px;
    border-bottom:1px solid #eee; align-items:center;
}
.search-bar input {
    flex:1; border:1px solid #e0e0e0; border-radius:18px;
    padding:8px 14px; font-size:14px; outline:none; background:#f7f7f7;
}
.search-bar input:focus { background:#fff; border-color:#576b95; }
.search-bar button {
    border:none; background:#576b95; color:#fff; border-radius:18px;
    padding:8px 16px; font-size:13px; cursor:pointer; flex-shrink:0;
}

/* 分类筛选 */
.cat-bar {
    display:flex; gap:8px; overflow-x:auto; background:#fff;
    padding:10px 16px; border-bottom:1px solid #eee;
    -webkit-overflow-scrolling:touch;
}
.cat-bar::-webkit-scrollbar { display:none; }
.cat-chip {
    flex-shrink:0; padding:6px 14px; border-radius:16px;
    background:#f2f2f2; font-size:13px; color:#666; cursor:pointer;
}
.cat-chip.active { background:#576b95; color:#fff; }

/* 素材卡片（朋友圈布局） */
.material-card {
    background:#fff; margin:10px 0; padding:14px 16px;
    border-bottom:1px solid #e5e5e5;
}
.mc-head { display:flex; align-items:center; margin-bottom:10px; }
.mc-avatar {
    width:42px; height:42px; border-radius:6px; overflow:hidden;
    background:#e5e5e5; flex-shrink:0; display:flex; align-items:center; justify-content:center;
}
.mc-avatar img { width:100%; height:100%; object-fit:cover; }
.mc-avatar .ph { font-size:20px; color:#999; }
.mc-info { margin-left:10px; flex:1; min-width:0; }
.mc-name { font-size:15px; font-weight:600; color:#576b95; }
.mc-time { font-size:12px; color:#999; margin-top:2px; }

/* 文案 */
.mc-content {
    font-size:15px; line-height:1.6; margin-bottom:10px;
    white-space:pre-wrap; word-break:break-word;
}

/* 九宫格 */
.grid { display:grid; gap:4px; }
.grid-1 { grid-template-columns:repeat(1, 1fr); }
.grid-2 { grid-template-columns:repeat(2, 1fr); }
.grid-3 { grid-template-columns:repeat(3, 1fr); }
.grid img { width:100%; aspect-ratio:1; object-fit:cover; border-radius:2px; display:block; }
.grid-1 img { aspect-ratio:auto; max-height:400px; }

/* 视频 */
.mc-video { position:relative; }
.mc-video video { width:100%; max-height:400px; border-radius:4px; background:#000; }
.mc-video .play-btn {
    position:absolute; top:50%; left:50%; transform:translate(-50%,-50%);
    width:52px; height:52px; border-radius:50%; background:rgba(0,0,0,.5);
    display:flex; align-items:center; justify-content:center; color:#fff; font-size:22px;
}

/* 互动条 */
.mc-actions {
    display:flex; align-items:center; justify-content:space-between;
    padding-top:10px; margin-top:10px; border-top:1px solid #f0f0f0;
}
.mc-actions .left { display:flex; gap:18px; }
.mc-actions .right { display:flex; gap:14px; }
.mc-actions .act { display:flex; align-items:center; gap:4px; font-size:13px; color:#666; cursor:pointer; }
.mc-actions .act.active { color:#e64340; }
.mc-actions .act .icon { font-size:18px; }

/* 底部导航 */
.bottom-nav {
    position:fixed; bottom:0; left:0; right:0; z-index:100;
    max-width:480px; margin:0 auto; background:#fff;
    display:flex; border-top:1px solid #eee; padding-bottom:env(safe-area-inset-bottom);
}
.bottom-nav a {
    flex:1; text-align:center; padding:8px 0 6px; font-size:11px; color:#999;
    display:flex; flex-direction:column; align-items:center; gap:2px;
}
.bottom-nav a .icon { font-size:22px; }
.bottom-nav a.active { color:#576b95; }

/* 详情页 */
.detail-page { background:#fff; min-height:100vh; }
.detail-head { display:flex; align-items:center; padding:14px 16px; border-bottom:1px solid #eee; }
.detail-head .back { font-size:20px; cursor:pointer; margin-right:12px; color:#333; }
.detail-head .title { font-size:17px; font-weight:600; }
.detail-body { padding:16px; }

/* 点赞列表（朋友圈样式：一行昵称） */
.like-row {
    background:#f7f7f7; border-radius:4px; padding:8px 10px; margin-top:12px;
    font-size:13px; color:#576b95; line-height:1.8; word-break:break-all;
}

/* 评论列表（朋友圈样式） */
.comment-list { margin-top:4px; }
.comment-item {
    background:#f7f7f7; padding:6px 10px; margin-top:4px; border-radius:4px;
    font-size:14px; line-height:1.5;
}
.comment-item .c-name { color:#576b95; font-weight:500; margin-right:4px; }
.comment-item .c-time { font-size:12px; color:#999; margin-top:2px; }

/* 评论输入 */
.comment-input {
    position:fixed; bottom:0; left:0; right:0; z-index:100;
    max-width:480px; margin:0 auto; background:#fff;
    display:flex; gap:8px; padding:10px 12px; border-top:1px solid #eee;
    padding-bottom:calc(10px + env(safe-area-inset-bottom));
}
.comment-input input {
    flex:1; border:1px solid #ddd; border-radius:18px; padding:8px 14px; font-size:14px; outline:none;
}
.comment-input button {
    border:none; background:#576b95; color:#fff; border-radius:18px; padding:8px 18px; font-size:14px;
}

/* 保存按钮区 */
.save-bar { display:flex; gap:10px; margin-top:16px; }
.save-bar .btn {
    flex:1; text-align:center; padding:12px; border-radius:8px; font-size:15px; cursor:pointer;
}
.save-bar .btn-primary { background:#576b95; color:#fff; }
.save-bar .btn-copy { background:#fff; color:#576b95; border:1px solid #576b95; }

/* 我的页面 */
.mine-header {
    background:linear-gradient(135deg,#576b95,#3a4a6b); color:#fff;
    padding:30px 20px; display:flex; align-items:center; gap:16px;
}
.mine-avatar {
    width:64px; height:64px; border-radius:50%; overflow:hidden; background:rgba(255,255,255,.3);
    display:flex; align-items:center; justify-content:center; font-size:30px;
}
.mine-avatar img { width:100%; height:100%; object-fit:cover; }
.mine-name { font-size:20px; font-weight:600; }
.mine-sub { font-size:13px; opacity:.8; margin-top:4px; }

.mine-tabs { display:flex; background:#fff; border-bottom:1px solid #eee; }
.mine-tabs .tab { flex:1; text-align:center; padding:12px; font-size:14px; color:#666; cursor:pointer; }
.mine-tabs .tab.active { color:#576b95; font-weight:600; border-bottom:2px solid #576b95; }

.mine-list { background:#fff; }
.mine-item {
    display:flex; align-items:center; gap:10px; padding:12px 16px;
    border-bottom:1px solid #f0f0f0; cursor:pointer;
}
.mine-item .cover {
    width:56px; height:56px; border-radius:6px; overflow:hidden; flex-shrink:0;
    background:#eee; display:flex; align-items:center; justify-content:center; font-size:20px; color:#999;
}
.mine-item .cover img { width:100%; height:100%; object-fit:cover; }
.mine-item .info { flex:1; min-width:0; }
.mine-item .info .t { font-size:14px; color:#333; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
.mine-item .info .s { font-size:12px; color:#999; margin-top:4px; }

/* 登录页 */
.login-page { background:#fff; min-height:100vh; padding:40px 24px; }
.login-title { font-size:22px; font-weight:700; text-align:center; margin-bottom:8px; }
.login-sub { font-size:14px; color:#999; text-align:center; margin-bottom:30px; }
.login-tabs { display:flex; background:#f2f3f5; border-radius:10px; padding:4px; margin-bottom:24px; }
.login-tabs .ltab { flex:1; text-align:center; padding:10px 0; font-size:15px; color:#666; border-radius:8px; cursor:pointer; }
.login-tabs .ltab.active { background:#fff; color:#576b95; font-weight:600; box-shadow:0 1px 4px rgba(0,0,0,.08); }
.login-form .field { margin-bottom:16px; }
.login-form label { font-size:13px; color:#666; display:block; margin-bottom:6px; }
.login-form input {
    width:100%; border:1px solid #ddd; border-radius:8px; padding:12px 14px; font-size:15px; outline:none;
}
.login-form input:focus { border-color:#576b95; }
.login-btn {
    width:100%; background:#576b95; color:#fff; border:none; border-radius:8px;
    padding:14px; font-size:16px; margin-top:10px; cursor:pointer;
}
.login-switch { text-align:center; font-size:14px; color:#999; margin-top:16px; }
.login-switch a { color:#576b95; cursor:pointer; }

/* 空状态 */
.empty { text-align:center; color:#999; padding:60px 20px; font-size:14px; }
.empty .icon { font-size:48px; display:block; margin-bottom:12px; }

/* 加载 */
.loading { text-align:center; color:#999; padding:20px; font-size:13px; }
.load-more { text-align:center; padding:14px; color:#999; font-size:13px; }

/* 提示 */
.toast {
    position:fixed; top:50%; left:50%; transform:translate(-50%,-50%);
    background:rgba(0,0,0,.75); color:#fff; padding:12px 22px; border-radius:8px;
    font-size:14px; z-index:999; display:none; max-width:80%;
}

/* ===== 朋友圈样式：点赞 + 评论块（首页直接显示） ===== */
.lc-block {
    background:#f7f7f7; border-radius:6px; padding:8px 12px; margin-top:10px;
    font-size:14px; line-height:1.6;
}
.lc-likes { display:flex; align-items:flex-start; padding-bottom:6px; border-bottom:1px solid #ececec; }
.lc-likes .lc-heart { font-size:14px; margin-right:6px; flex-shrink:0; line-height:1.6; }
.lc-likes .lc-names { flex:1; word-break:break-all; }
.lc-likes .lc-name { color:#576b95; }
.lc-comments { padding-top:6px; }
.lc-comment { word-break:break-word; }
.lc-comment .lc-cname { color:#576b95; font-weight:500; }
.lc-comment .lc-ccontent { color:#333; }
.lc-comment .lc-reply { color:#576b95; font-size:12px; margin-left:6px; cursor:pointer; opacity:.7; }
.lc-comment .lc-reply:active { opacity:1; }
.lc-comment .lc-del { color:#e64340; font-size:12px; margin-left:6px; cursor:pointer; opacity:.7; }
.lc-comment .lc-del:active { opacity:1; }
.lc-comment.lc-sub { padding-left:14px; font-size:13px; color:#555; }
.lc-comment .lc-replyto { color:#999; font-size:12px; }
.lc-comment .lc-replyto-name { color:#7ba7d9; font-size:13px; }

/* 图片放大预览遮罩 */
.preview-overlay {
    position:fixed; top:0; left:0; right:0; bottom:0; z-index:9999;
    background:rgba(0,0,0,.95); display:flex; align-items:center; justify-content:center;
}
.preview-overlay .pv-img {
    max-width:100%; max-height:100%; object-fit:contain;
}
.preview-overlay .pv-close {
    position:absolute; top:16px; right:16px; width:36px; height:36px;
    background:rgba(255,255,255,.2); color:#fff; border-radius:50%;
    display:flex; align-items:center; justify-content:center; font-size:18px; cursor:pointer; z-index:10;
}
.preview-overlay .pv-count {
    position:absolute; bottom:24px; left:50%; transform:translateX(-50%);
    color:#fff; font-size:14px; background:rgba(0,0,0,.5); padding:4px 12px; border-radius:12px;
}

/* 卡片内评论输入 */
.mc-comment-input {
    display:flex; gap:8px; margin-top:10px;
}
.mc-comment-input input {
    flex:1; border:1px solid #ddd; border-radius:18px; padding:8px 14px; font-size:14px; outline:none;
}
.mc-comment-input button {
    border:none; background:#576b95; color:#fff; border-radius:18px; padding:8px 18px; font-size:14px; cursor:pointer;
}
/* ===== 管理员前端管理 ===== */
.admin-badge { display:inline-block; background:#576b95; color:#fff; font-size:11px; border-radius:8px; padding:1px 6px; vertical-align:middle; }
.admin-menu { display:flex; flex-wrap:wrap; gap:10px; padding:14px; }
.admin-menu-item { flex:1 1 30%; min-width:90px; text-align:center; background:#f5f6f7; border-radius:10px; padding:14px 6px; cursor:pointer; font-size:13px; color:#333; }
.admin-menu-item .icon { display:block; font-size:22px; margin-bottom:4px; }
.admin-menu-item.active { background:#576b95; color:#fff; }
.admin-view { padding:0 14px 20px; }
.ap-card { background:#fff; border-radius:12px; padding:16px; margin-bottom:14px; box-shadow:0 1px 4px rgba(0,0,0,.06); }
.ap-title { font-size:15px; font-weight:600; margin-bottom:12px; }
.ap-types { display:flex; flex-wrap:wrap; gap:8px; }
.ap-type { padding:6px 12px; border:1px solid #ddd; border-radius:16px; font-size:13px; cursor:pointer; }
.ap-type.active { background:#576b95; color:#fff; border-color:#576b95; }
.ap-filter { display:flex; gap:8px; margin-bottom:12px; flex-wrap:wrap; }
.ap-filter input { flex:1; min-width:120px; border:1px solid #ddd; border-radius:8px; padding:8px; font-size:14px; }
.ap-filter select { border:1px solid #ddd; border-radius:8px; padding:8px; font-size:14px; }
.ap-filter button { border:none; background:#576b95; color:#fff; border-radius:8px; padding:8px 14px; cursor:pointer; }
.ap-list { display:flex; flex-direction:column; gap:10px; }
.am-item { display:flex; justify-content:space-between; align-items:center; border:1px solid #eee; border-radius:10px; padding:10px 12px; }
.am-info { flex:1; min-width:0; margin-right:8px; }
.am-t { font-size:14px; color:#333; word-break:break-all; }
.am-s { font-size:12px; color:#999; margin-top:3px; }
.am-ops { display:flex; gap:6px; flex-shrink:0; }
.am-ops button { border:1px solid #576b95; color:#576b95; background:#fff; border-radius:6px; padding:5px 10px; font-size:12px; cursor:pointer; }
.am-ops button.danger { border-color:#e64340; color:#e64340; }
.ap-pager { text-align:center; padding:12px 0; font-size:13px; color:#666; }
.ap-pager button { border:1px solid #ddd; background:#fff; border-radius:6px; padding:5px 12px; cursor:pointer; margin:0 4px; }
.ap-pager button:disabled { opacity:.4; cursor:default; }
.ap-announce-form { margin-bottom:14px; }
.ap-card .field { margin-bottom:12px; }
.ap-card .field label { display:block; font-size:13px; color:#666; margin-bottom:5px; }
.ap-card .field input, .ap-card .field textarea, .ap-card .field select { width:100%; box-sizing:border-box; border:1px solid #ddd; border-radius:8px; padding:9px; font-size:14px; }

/* ===== 管理员入口（绑定用户可见）+ 管理员登录弹窗 ===== */
.admin-entry { display:flex; align-items:center; gap:10px; background:#f4f6fa; border:1px solid #e3e7f0; border-radius:10px; padding:12px 14px; margin:12px 0; cursor:pointer; }
.admin-entry:active { background:#e9edf5; }
.ae-icon { font-size:18px; }
.ae-text { flex:1; font-size:14px; color:#576b95; font-weight:600; }
.ae-arrow { color:#999; font-size:18px; }
.admin-modal { position:fixed; inset:0; z-index:999; display:none; align-items:center; justify-content:center; }
.admin-modal-mask { position:absolute; inset:0; background:rgba(15,23,42,.55); backdrop-filter:blur(2px); }
.admin-modal-box { position:relative; width:84%; max-width:360px; background:#fff; border-radius:18px; overflow:hidden; box-shadow:0 20px 60px rgba(0,0,0,.3); animation:amPop .25s ease; }
@keyframes amPop { from { transform:scale(.92); opacity:0; } to { transform:scale(1); opacity:1; } }
.am-close { position:absolute; top:12px; right:14px; font-size:18px; color:rgba(255,255,255,.85); cursor:pointer; z-index:2; width:26px; height:26px; display:flex; align-items:center; justify-content:center; border-radius:50%; background:rgba(0,0,0,.18); }
.am-close:active { background:rgba(0,0,0,.35); }
.am-head { background:linear-gradient(135deg,#667eea 0%,#764ba2 100%); padding:26px 20px 22px; text-align:center; color:#fff; }
.am-logo { font-size:40px; line-height:1; margin-bottom:10px; filter:drop-shadow(0 4px 8px rgba(0,0,0,.2)); }
.am-title { font-size:19px; font-weight:700; letter-spacing:1px; }
.am-sub { font-size:12px; opacity:.85; margin-top:6px; }
.am-body { padding:22px 20px 8px; }
.admin-modal-box .field { margin-bottom:15px; }
.admin-modal-box .field label { display:block; font-size:13px; color:#666; margin-bottom:6px; font-weight:600; }
.admin-modal-box .field input { width:100%; box-sizing:border-box; border:1px solid #e0e0e0; border-radius:10px; padding:11px 12px; font-size:14px; background:#fafbfc; transition:border-color .2s, box-shadow .2s; }
.admin-modal-box .field input:focus { outline:none; border-color:#667eea; background:#fff; box-shadow:0 0 0 3px rgba(102,126,234,.15); }
.am-btn { width:100%; padding:12px; background:linear-gradient(135deg,#667eea 0%,#764ba2 100%); color:#fff; border:none; border-radius:10px; font-size:15px; font-weight:600; letter-spacing:6px; cursor:pointer; transition:opacity .2s, transform .1s; margin-top:4px; }
.am-btn:active { opacity:.9; transform:scale(.98); }
.am-foot { text-align:center; font-size:11px; color:#999; padding:14px 16px 18px; }

/* ===== 发布素材：文件上传 ===== */
.ap-upload { display:flex; align-items:center; gap:10px; margin-bottom:8px; flex-wrap:wrap; }
.ap-upbtn { border:1px dashed #667eea; background:#f4f6ff; color:#667eea; border-radius:8px; padding:8px 14px; font-size:13px; cursor:pointer; font-weight:600; }
.ap-upbtn:active { background:#e9edff; }
.ap-up-hint { font-size:11px; color:#999; }
.ap-preview { display:flex; flex-wrap:wrap; gap:8px; margin-top:8px; }
.ap-pv-img { width:64px; height:64px; object-fit:cover; border-radius:8px; border:1px solid #e3e7f0; cursor:pointer; }