*{box-sizing:border-box;margin:0;padding:0;}
body{font-family:system-ui,-apple-system,sans-serif;background:#f1f1f1;}
html,body{height:100%;}
/* ===== 登录注册 ===== */
.auth-box{max-width:360px;margin:80px auto;background:#fff;padding:24px;border-radius:10px;box-shadow:0 2px 12px #0002;}
.auth-box h3{margin-bottom:16px;text-align:center;}
.auth-box input{width:100%;padding:10px;margin:6px 0;border:1px solid #ddd;border-radius:6px;}
.auth-box button{width:100%;padding:10px;background:#07c160;color:white;border:0;border-radius:6px;margin-top:8px;cursor:pointer;}
.tip{margin-top:12px;text-align:center;font-size:14px;color:#666;}
.tip a{color:#07c160;cursor:pointer;}
/* ===== 微信聊天主界面 移动端适配 ===== */
.chat-page{max-width:100%;margin:0 auto;background:#ededed;height:100vh;display:flex;flex-direction:column;overflow:hidden;}
.chat-head{
    background:#f7f7f7;
    padding:10px 12px;
    display:flex;
    justify-content:space-between;
    align-items:center;
    border-bottom:1px solid #e5e5e5;
    position:sticky;
    top:0;
    z-index:100;
    flex-shrink:0;
}
.chat-head-left{
    font-size:14px;
    color:#333;
    overflow:hidden;
    text-overflow:ellipsis;
    white-space:nowrap;
}
.chat-head-right{
    display:flex;
    gap:8px;
    align-items:center;
}
.btn-admin,.btn-logout{
    display:inline-block;
    padding:7px 12px;
    border-radius:6px;
    font-size:13px;
    text-decoration:none;
    cursor:pointer;
    border:none;
    color:#fff;
    background:#07c160;
}
#chat-area{flex:1;overflow-y:auto;padding:14px;background:#ededed;}
.msg{display:flex;margin:10px 0;gap:8px;}
.msg.me{flex-direction:row-reverse;}
.avatar{width:40px;height:40px;border-radius:4px;background:#ccc;flex-shrink:0;display:grid;place-items:center;color:#fff;}
.bubble{max-width:65%;padding:10px 12px;border-radius:4px;background:#fff;position:relative;word-break:break-all;}
.msg.me .bubble{background:#95ec69;}
.bubble img,.bubble video{max-width:220px;max-width:100%;border-radius:4px;display:block;}
.time{font-size:11px;color:#999;margin:4px 0 2px;}
.input-bar{display:flex;gap:6px;padding:10px;background:#f7f7f7;border-top:1px solid #ddd;align-items:flex-end;flex-shrink:0;}
#msg-input{flex:1;padding:10px;border:1px solid #ddd;border-radius:6px;resize:none;height:44px;}
.btn{padding:10px 14px;border:0;border-radius:6px;cursor:pointer;background:#07c160;color:#fff;white-space:nowrap;}
.emoji-btn,.upload-btn{background:#eee;color:#333;}
.emoji-panel{display:none;position:absolute;bottom:60px;left:10px;background:white;border:1px solid #ddd;padding:8px;border-radius:6px;max-width:calc(100% - 20px);z-index:99;}
.emoji-panel span{font-size:22px;padding:4px;cursor:pointer;display:inline-block;}
/* ===== 媒体预览弹窗 ===== */
.preview-modal{
    display:none;
    position:fixed;
    top:0;
    left:0;
    right:0;
    bottom:0;
    background:rgba(0,0,0,0.75);
    z-index:200;
    align-items:center;
    justify-content:center;
    flex-direction:column;
    gap:16px;
    padding:20px;
}
.preview-content{max-width:90%;max-height:60vh;}
.preview-modal .btns{display:flex;gap:12px;}
.preview-modal button{padding:8px 16px;border-radius:6px;border:none;cursor:pointer;}
.btn-send{background:#07c160;color:#fff;}
.btn-cancel{background:#999;color:#fff;}
/* ===== 专业管理后台 ===== */
.admin-layout{display:flex;min-height:100vh;background:#f0f2f5;}
.admin-side{
    width:220px;
    background:#1c2b3a;
    display:flex;
    flex-direction:column;
    flex-shrink:0;
    position:sticky;
    top:0;
    height:100vh;
}
.admin-logo{
    padding:20px 18px;
    color:#fff;
    font-size:17px;
    font-weight:700;
    border-bottom:1px solid rgba(255,255,255,0.08);
    letter-spacing:1px;
}
.admin-nav{flex:1;padding:14px 10px;display:flex;flex-direction:column;gap:4px;}
.admin-nav-item{
    display:block;
    padding:11px 14px;
    border-radius:8px;
    color:#c9d2dd;
    font-size:14px;
    text-decoration:none;
    cursor:pointer;
    transition:background .15s ease,color .15s ease;
}
.admin-nav-item:hover{background:rgba(255,255,255,0.08);color:#fff;}
.admin-nav-item.active{background:#07c160;color:#fff;font-weight:600;}
.admin-side-foot{padding:12px 10px;border-top:1px solid rgba(255,255,255,0.08);}
.admin-main{flex:1;display:flex;flex-direction:column;min-width:0;}
.admin-topbar{
    background:#fff;
    padding:0 24px;
    height:56px;
    display:flex;
    align-items:center;
    justify-content:space-between;
    border-bottom:1px solid #e8eaed;
    position:sticky;
    top:0;
    z-index:50;
}
.admin-breadcrumb{font-size:15px;font-weight:600;color:#1a1a1a;}
.admin-user{display:flex;align-items:center;gap:12px;}
.admin-user-name{font-size:14px;color:#333;font-weight:500;}
.admin-content{padding:24px;display:flex;flex-direction:column;gap:20px;}
.stat-cards{display:flex;flex-wrap:wrap;gap:16px;}
.stat-card{
    flex:1 1 180px;
    background:#fff;
    border-radius:12px;
    padding:20px;
    box-shadow:0 1px 3px rgba(0,0,0,0.05);
    border:1px solid #eceff3;
}
.stat-num{font-size:30px;font-weight:700;color:#07c160;line-height:1.2;}
.stat-label{margin-top:6px;font-size:13px;color:#8a94a6;}
.admin-panel{
    background:#fff;
    border-radius:12px;
    border:1px solid #eceff3;
    box-shadow:0 1px 3px rgba(0,0,0,0.05);
    padding:20px;
}
.panel-title{font-size:15px;font-weight:600;color:#1a1a1a;margin-bottom:16px;}
.panel-toolbar{display:flex;gap:10px;flex-wrap:wrap;margin-bottom:16px;align-items:center;}
.toolbar-input{
    padding:8px 12px;
    border:1px solid #d9dee6;
    border-radius:8px;
    font-size:13px;
    outline:none;
    background:#fff;
    min-width:140px;
}
.toolbar-input:focus{border-color:#07c160;box-shadow:0 0 0 3px rgba(7,193,96,0.12);}
.admin-table{width:100%;border-collapse:collapse;font-size:13px;margin:0;}
.admin-table thead th{
    background:#f7f9fb;
    color:#5f6b7a;
    font-weight:600;
    text-align:left;
    padding:11px 12px;
    border-bottom:1px solid #eceff3;
    white-space:nowrap;
}
.admin-table tbody td{
    padding:11px 12px;
    border-bottom:1px solid #f0f2f5;
    color:#333;
    vertical-align:middle;
}
.admin-table tbody tr:hover{background:#f8fafb;}
.admin-table tbody tr:last-child td{border-bottom:none;}
.cell-id{color:#9aa4b2;font-size:12px;}
.cell-content{max-width:300px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;}
.badge{
    display:inline-block;
    padding:2px 10px;
    border-radius:999px;
    font-size:12px;
    font-weight:500;
    line-height:1.7;
}
.badge-txt{background:#eef4ff;color:#3b6fe0;}
.badge-img{background:#e6f7ed;color:#0f9d58;}
.badge-vid{background:#fef3e2;color:#e8890c;}
.badge-admin{background:#ffecec;color:#e53935;}
.badge-user{background:#eef2f6;color:#5f6b7a;}
/* 后台按钮（作用域限定，不影响聊天页 .btn） */
.admin-layout .btn,
.confirm-box .btn{
    border:none;
    border-radius:8px;
    padding:9px 16px;
    font-size:13px;
    color:#fff;
    cursor:pointer;
    white-space:nowrap;
    transition:opacity .15s ease, transform .1s ease;
}
.admin-layout .btn:active,
.confirm-box .btn:active{transform:scale(0.97);}
.admin-layout .btn-primary{background:#07c160;}
.admin-layout .btn-primary:hover{opacity:0.9;}
.admin-layout .btn-danger{background:#f44336;}
.admin-layout .btn-danger:hover{opacity:0.9;}
.admin-layout .btn-grey{background:#7a8494;}
.admin-layout .btn-grey:hover{opacity:0.9;}
.admin-layout .btn-sm{padding:7px 14px;}
.admin-layout .btn-xs{padding:4px 10px;font-size:12px;border-radius:6px;}
.text-muted{color:#a0a8b4;font-size:12px;}
.empty-tip{text-align:center;color:#a0a8b4;font-size:13px;padding:30px 0;}
.pager{display:flex;align-items:center;justify-content:flex-end;gap:12px;margin-top:14px;}
.page-info{font-size:13px;color:#8a94a6;}
/* 确认弹窗 */
.confirm-modal{
    display:none;
    position:fixed;
    top:0;left:0;right:0;bottom:0;
    background:rgba(15,18,25,0.5);
    z-index:300;
    align-items:center;
    justify-content:center;
    padding:20px;
}
.confirm-box{
    background:#fff;
    border-radius:14px;
    width:100%;
    max-width:340px;
    padding:24px 22px 18px;
    box-shadow:0 20px 50px rgba(0,0,0,0.2);
}
.confirm-title{font-size:16px;font-weight:600;color:#1a1a1a;text-align:center;}
.confirm-text{margin:12px 0 20px;font-size:14px;color:#5f6b7a;text-align:center;line-height:1.6;}
.confirm-btns{display:flex;gap:12px;}
.confirm-btns .btn{flex:1;padding:10px 0;}
/* 手机媒体查询 */
@media (max-width: 480px) {
    .chat-head {
        padding:8px 10px;
    }
    .chat-head-left {
        font-size:13px;
        max-width:52%;
    }
    .btn-admin,.btn-logout {
        padding:6px 9px;
        font-size:12px;
    }
    .bubble{max-width:75%;}
}
/* 后台手机适配 */
@media (max-width: 768px) {
    .admin-layout{flex-direction:column;}
    .admin-side{width:100%;height:auto;position:static;flex-direction:row;align-items:center;padding:8px 12px;}
    .admin-logo{padding:0;border:none;font-size:15px;margin-right:14px;white-space:nowrap;}
    .admin-nav{flex-direction:row;padding:0;overflow-x:auto;gap:6px;}
    .admin-nav-item{white-space:nowrap;padding:8px 12px;font-size:13px;}
    .admin-side-foot{display:none;}
    .admin-content{padding:14px;}
    .stat-cards{grid-template-columns:repeat(2,1fr);}
    .cell-content{max-width:110px;}
    .admin-topbar{height:50px;padding:0 14px;}
}