@import url('https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600;700;800&family=Noto+Sans+SC:wght@400;500;600;700&display=swap');
:root{--bg:#f3f5fb;--ink:#1e2440;--muted:#8990aa;--primary:#6658e8;--line:#edf0f7;--card:#fff}*{box-sizing:border-box}body{margin:0;font-family:Inter,'Noto Sans SC',system-ui,sans-serif;color:var(--ink)}button,input{font:inherit}button,a{transition:.18s ease}a{color:var(--primary);text-decoration:none}.chat-body,.login-body,.admin-body{min-height:100vh;background:radial-gradient(ellipse at 15% 0%,#e8e7ff 0,transparent 40%),radial-gradient(ellipse at 100% 80%,#dff5ff 0,transparent 35%),var(--bg)}
.chat-shell{width:min(920px,calc(100% - 28px));height:min(880px,calc(100vh - 40px));min-height:520px;margin:20px auto;background:#ffffffd9;backdrop-filter:blur(20px);border:1px solid #fff;border-radius:28px;box-shadow:0 24px 80px #5551;display:flex;flex-direction:column;overflow:hidden}.chat-header{display:flex;align-items:center;gap:14px;padding:22px 26px;border-bottom:1px solid var(--line)}.brand-mark{display:grid;place-items:center;width:46px;height:46px;border-radius:16px;background:linear-gradient(135deg,#8878ff,#5b55d9);color:white;font-size:26px;box-shadow:0 8px 20px #7063e94a;flex-shrink:0}.chat-header h1{font-size:19px;margin:0 0 4px}.chat-header p,.login-card>p,.admin-top p{margin:0;color:var(--muted);font-size:12px}.online-pill{margin-left:auto;background:#eefbf5;color:#238d62;padding:9px 12px;border-radius:30px;font-size:11px;white-space:nowrap}.online-pill i{display:inline-block;width:6px;height:6px;border-radius:50%;background:#31c48d;margin-right:5px}.chat-window{padding:22px 26px;overflow:auto;flex:1;display:flex;flex-direction:column;gap:18px}.message{display:flex;align-items:flex-start;gap:10px;max-width:82%}.message.mine{align-self:flex-end;flex-direction:row-reverse}.avatar{width:38px;height:38px;border-radius:14px;object-fit:cover;flex-shrink:0;box-shadow:0 3px 8px #30305012}.message-content{min-width:0}.message-meta{display:flex;align-items:center;gap:9px;margin:0 0 6px 2px;font-size:12px}.message-meta b{font-weight:700}.message-meta time{font-size:10px;color:#a6abc0}.bubble{padding:12px 15px;background:#f1f2fa;border-radius:4px 17px 17px 17px;line-height:1.65;font-size:14px;overflow-wrap:anywhere;white-space:pre-wrap}.mine .bubble{background:linear-gradient(135deg,#776af2,#6259df);color:white;border-radius:17px 4px 17px 17px}.mine .message-meta{justify-content:flex-end}.composer{margin:0 22px;padding:10px;display:flex;gap:10px;background:#f5f6fb;border:1px solid #edf0f7;border-radius:18px}.composer input{flex:1;min-width:0;border:0;outline:0;background:transparent;padding:10px 12px;color:var(--ink)}.composer button,.login-form button{border:0;background:linear-gradient(135deg,#776af2,#5d55dc);color:white;padding:0 20px;border-radius:13px;font-weight:700;cursor:pointer;box-shadow:0 6px 15px #6658e83d}.composer button:hover,.login-form button:hover{transform:translateY(-1px)}.composer button span{margin-left:7px}.chat-footer{display:flex;align-items:center;gap:18px;padding:15px 27px;color:#9a9fb4;font-size:11px}.chat-footer button{margin-left:auto;border:0;background:transparent;color:var(--primary);font-weight:700;cursor:pointer}.chat-footer a{color:#9a9fb4}
.login-body{display:grid;place-items:center;padding:24px}.login-card{width:min(420px,100%);background:#fff;border:1px solid #ffffff;border-radius:28px;padding:34px;box-shadow:0 25px 80px #4c4c8b1b;text-align:center}.brand-mark.big{width:60px;height:60px;font-size:32px;border-radius:20px;margin:0 auto 20px}.login-card h1{font-size:24px;margin:0 0 8px}.login-form{text-align:left;display:flex;flex-direction:column;gap:9px;margin-top:26px}.login-form label{font-size:12px;font-weight:700;color:#525975;margin-top:5px}.login-form input{width:100%;border:1px solid #e5e8f2;border-radius:12px;padding:13px 14px;outline:0;background:#fbfcff}.login-form input:focus{border-color:#8c81f6;box-shadow:0 0 0 3px #776af21a}.login-form button{height:48px;margin-top:10px}.login-card small{display:block;color:#a3a8bc;margin-top:20px;font-size:11px}.error,.success,.notice{padding:12px;border-radius:12px;font-size:12px;margin-top:14px;text-align:left}.error{background:#fff0f0;color:#b83d50}.success{background:#eafbf2;color:#167b4e}.notice{background:#f2f3ff;color:#6862a4;line-height:1.7}.wechat-button,.primary-link{display:block;margin-top:12px;padding:13px;border-radius:12px;background:#20a567;color:white;font-weight:700}.installer{max-width:480px}.installer .login-form{max-height:70vh;overflow:auto;padding-right:3px}.installer h3{font-size:13px;margin:16px 0 4px;color:#7771bb}
.admin-body{display:flex}.admin-sidebar{width:230px;background:#22233f;color:white;min-height:100vh;padding:26px 16px;flex-shrink:0}.admin-logo{font-weight:800;font-size:16px;padding:6px 12px 28px}.admin-sidebar a{display:block;padding:13px 14px;border-radius:11px;color:#b9bbd4;font-size:13px;margin:4px 0}.admin-sidebar a.active,.admin-sidebar a:hover{background:#ffffff15;color:white}.admin-main{flex:1;min-width:0;padding:34px clamp(18px,4vw,54px)}.admin-top{display:flex;justify-content:space-between;align-items:center;margin-bottom:28px}.admin-top h1{margin:0 0 8px;font-size:25px}.stats{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:16px;margin-bottom:22px}.stat-card,.table-card{background:white;border:1px solid #fff;border-radius:18px;box-shadow:0 10px 30px #4d4d7a08}.stat-card{padding:22px}.stat-card span{display:block;font-size:12px;color:var(--muted);margin-bottom:12px}.stat-card strong{font-size:29px;letter-spacing:-1px}.table-card{overflow:hidden}.table-heading{padding:22px 24px;display:flex;align-items:center;justify-content:space-between}.table-heading h2{margin:0;font-size:16px}.table-heading span{font-size:11px;color:var(--muted)}.table-scroll{overflow:auto}table{width:100%;border-collapse:collapse;text-align:left;white-space:nowrap}th,td{padding:14px 20px;border-top:1px solid var(--line);font-size:12px}th{color:#9399b0;font-weight:600;background:#fcfcff}td{color:#4b516b}.user-cell{display:flex;align-items:center;gap:10px}.user-cell img{width:30px;height:30px;border-radius:10px}.small-button{border:1px solid #e8e8f8;background:#f7f7ff;color:#6658d9;border-radius:8px;padding:7px 10px;font-size:11px;cursor:pointer}.password-card{max-width:500px;padding:24px}.password-card .login-form{margin:0}.password-card .login-form button{padding:0 20px}
@media(max-width:700px){.chat-shell{width:100%;height:100dvh;min-height:0;margin:0;border-radius:0}.chat-header{padding:17px}.chat-window{padding:18px 14px}.message{max-width:94%}.composer{margin:0 12px}.chat-footer{padding:13px 16px;gap:10px}.admin-body{display:block}.admin-sidebar{width:100%;min-height:0;padding:12px;display:flex;align-items:center;gap:4px;overflow:auto}.admin-logo{padding:8px;font-size:13px;white-space:nowrap}.admin-sidebar a{white-space:nowrap;padding:10px}.admin-main{padding:22px 12px}.stats{gap:8px}.stat-card{padding:14px}.stat-card strong{font-size:23px}.stat-card span{font-size:10px}.admin-top h1{font-size:21px}.table-heading{padding:17px}.login-card{padding:28px 22px}.online-pill{padding:8px;font-size:10px}}

/* 聊天室：简洁聊天风格 */
.chat-body {
    background: #f2f2f2;
}

.chat-shell {
    width: min(760px, 100%);
    height: 100dvh;
    min-height: 0;
    margin: 0 auto;
    border: 0;
    border-radius: 0;
    background: #f2f2f2;
    box-shadow: none;
    backdrop-filter: none;
}

.chat-header {
    background: #fff;
    padding: 14px 18px;
    border-bottom: 1px solid #e7e7e7;
}

.brand-mark {
    background: #07c160;
    box-shadow: none;
    border-radius: 50%;
}

.chat-header h1 {
    font-size: 17px;
}

.chat-header p {
    font-size: 12px;
}

.chat-window {
    padding: 18px 14px;
    gap: 20px;
}

.message {
    max-width: 88%;
    gap: 9px;
}

.avatar {
    width: 38px;
    height: 38px;
    border-radius: 5px;
    box-shadow: none;
}

.message-meta {
    margin-bottom: 5px;
    font-size: 12px;
    color: #888;
}

.bubble {
    padding: 10px 12px;
    background: #fff;
    color: #222;
    border-radius: 4px;
    font-size: 15px;
    line-height: 1.6;
}

.mine .bubble {
    background: #95ec69;
    color: #222;
    border-radius: 4px;
}

.composer {
    flex-shrink: 0;
    margin: 0;
    padding: 10px;
    padding-bottom: max(10px, env(safe-area-inset-bottom));
    gap: 8px;
    border: 0;
    border-top: 1px solid #e5e5e5;
    border-radius: 0;
    background: #fafafa;
}

.composer input {
    background: #fff;
    border: 1px solid #e4e4e4;
    border-radius: 6px;
    padding: 12px;
    font-size: 15px;
}

.composer button {
    background: #07c160;
    box-shadow: none;
    border-radius: 6px;
    padding: 0 18px;
}

.composer button:hover {
    transform: none;
    background: #06ad56;
}

.chat-footer {
    flex-shrink: 0;
    background: #fafafa;
    border-top: 1px solid #eee;
    padding: 10px 14px;
}

.chat-footer button {
    color: #07a653;
}

@media (max-width: 700px) {
    .chat-shell {
        width: 100%;
        height: 100dvh;
    }

    .chat-header {
        padding: 12px;
    }

    .chat-window {
        padding: 14px 10px;
    }

    .message {
        max-width: 94%;
    }

    .composer {
        margin: 0;
        padding: 9px;
        padding-bottom: max(9px, env(safe-area-inset-bottom));
    }

    .chat-footer {
        gap: 9px;
        padding: 10px;
    }
}