* { margin:0; padding:0; box-sizing:border-box }
html, body {
    height:100%; overflow:hidden;
    background:#0d1117; color:#c9d1d9;
    font-family:"Microsoft YaHei",system-ui,-apple-system,sans-serif;
    user-select:none; -webkit-user-select:none
}
body { max-width:820px; margin:0 auto; display:flex; flex-direction:column }
.form { max-width:360px; margin:80px auto; padding:28px 24px; border:1px solid #30363d; background:#0d1117 }
.form h2 { color:#ffc107; margin-bottom:20px; font-size:20px; letter-spacing:1px; text-align:center }
.form input { width:100%; padding:12px; margin-bottom:12px; background:#161b22; border:1px solid #30363d; border-radius:4px; color:#c9d1d9; font-size:15px; outline:none; transition:border-color .15s; -webkit-appearance:none; appearance:none }
.form input:-webkit-autofill { -webkit-box-shadow:0 0 0 1000px #161b22 inset !important; -webkit-text-fill-color:#c9d1d9 !important }
.form input:focus { border-color:#ffc107 }
.pw-wrap { position:relative; width:100%; margin-bottom:12px }
.pw-wrap input { margin-bottom:0; padding-right:40px }
.pw-toggle { position:absolute; right:8px; top:50%; transform:translateY(-50%); background:none; border:none; color:#8b949e; cursor:pointer; font-size:16px; padding:4px; line-height:1 }
.pw-toggle:hover { color:#c9d1d9 }
.form .link { margin-top:16px; font-size:13px; color:#8b949e; text-align:center; line-height:1.8 }
.form .link a { color:#58a6ff; text-decoration:none }
.form .link a:hover { text-decoration:underline }
.err { background:#3d1f1f; border:1px solid #8b3030; padding:10px 12px; margin-bottom:14px; font-size:13px; color:#f85149; border-radius:4px }
.btn { padding:8px 18px; background:#238636; color:#fff; border:none; cursor:pointer; font-size:14px; text-decoration:none; display:inline-block; border-radius:4px; transition:background .15s; -webkit-appearance:none; appearance:none; user-select:none }
.btn:hover { background:#2ea043 }
.btn:active { background:#1a6b2d }
.btn-sm { padding:6px 14px; font-size:13px }
.btn-blk { width:100%; padding:12px; font-size:15px }
.btn-ghost { background:transparent; border:1px solid #444; color:#c9d1d9 }
.btn-ghost:hover { background:#21262d }
#toast { position:fixed; top:0; left:0; right:0; z-index:9999; text-align:center; padding:10px; font-size:13px; border-bottom:1px solid; transform:translateY(-100%); transition:transform .25s }
#toast.show { transform:translateY(0) }
.top {
    background:#161b22; padding:8px 16px; display:flex; justify-content:space-between; align-items:center;
    border-bottom:1px solid #30363d; font-size:14px; flex-shrink:0; gap:8px; min-height:44px
}
.top-l { display:flex; align-items:center; gap:4px; flex-shrink:0 }
.top-c {
    flex:1; text-align:center; font-size:12px; color:#8b949e; white-space:nowrap; overflow:hidden; text-overflow:ellipsis
}
.top-r { display:flex; align-items:center; gap:4px; flex-shrink:0 }
.tu { font-weight:bold; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; max-width:120px }
#chatBox { flex:1; min-height:0; overflow-y:auto; padding:12px; background:#0d1117; -webkit-overflow-scrolling:touch; position:relative }
.drag-over::after {
    content:'释放文件以添加至待发送列表';
    position:fixed; inset:0; z-index:9998;
    background:rgba(13,17,23,0.85);
    display:flex; align-items:center; justify-content:center;
    font-size:18px; color:#58a6ff;
    border:3px dashed #58a6ff; margin:12px; border-radius:12px;
    pointer-events:none
}
@keyframes msgSlide { from { opacity:0; transform:translateY(14px) } to { opacity:1; transform:translateY(0) } }
.mw.new>.mb { animation:msgSlide .3s ease-out }
@keyframes btnPulse { 0% { transform:scale(1) } 50% { transform:scale(.93) } 100% { transform:scale(1) } }
.btn-sending { animation:btnPulse .3s; pointer-events:none; opacity:.7 }
@keyframes highlightPulse { 0% { box-shadow:0 0 0 0 rgba(88,166,255,.4) } 50% { box-shadow:0 0 0 8px rgba(88,166,255,0) } 100% { box-shadow:0 0 0 0 rgba(88,166,255,0) } }
.mw.highlight { animation:highlightPulse 1s ease-out 2 }
.mw { margin:8px 0; position:relative; z-index:1 }
.mw:first-child { margin-top:0 }
.mw[data-side="r"] { text-align:right }
.mw[data-side="l"] { text-align:left }
.mb { display:inline-block; padding:8px 12px; border:1px solid #30363d; max-width:82%; text-align:left; line-height:1.5; word-break:break-word; border-radius:8px }
.mm { margin-bottom:3px; font-size:11px }
.mt { color:#666 }
.mbd { font-size:14px }
.mw[data-side="r"] .mb { border-radius:8px 2px 8px 8px }
.mw[data-side="l"] .mb { border-radius:2px 8px 8px 8px }
.ma-grp { position:absolute; bottom:2px; display:flex; gap:2px; z-index:3 }
.mw[data-side="r"] .ma-grp { right:2px }
.mw[data-side="l"] .ma-grp { left:2px }
.mtgl, .ma, .mq {
    width:28px; height:28px; background:rgba(48,54,61,.7); border:none; border-radius:4px;
    color:#8b949e; font-size:14px; line-height:26px; text-align:center; cursor:pointer;
    display:none; transition:background .15s,color .15s; padding:0; touch-action:manipulation
}
.mq { font-size:13px }
.mw:hover .ma, .mw:active .ma, .mw.touched .ma, .mw:hover .mq, .mw.touched .mq { display:block }
.mtgl { display:none }
.mw:hover .mtgl, .mw.touched .mtgl { display:block }
.mtgl:hover, .ma:hover, .mq:hover { background:rgba(48,54,61,.9); color:#c9d1d9 }
.md { position:relative; min-height:20px; transition:opacity .25s }
.md-compact { display:block }
.md-expanded { display:none }
.md[data-mode="expanded"] .md-compact { display:none }
.md[data-mode="expanded"] .md-expanded { display:block }
.fc {
    display:flex; align-items:center; gap:10px;
    background:#0d1117; border:1px solid #30363d; border-radius:6px; padding:8px 10px;
    min-width:160px; max-width:300px
}
.md[data-mode="expanded"] .fc { opacity:.5; transition:opacity .3s }
.fc-icon { flex-shrink:0; line-height:0 }
.fc-icon svg { display:block }
.fc-body { flex:1; min-width:0 }
.fc-name { font-size:13px; color:#c9d1d9; overflow:hidden; text-overflow:ellipsis; white-space:nowrap }
.fc-meta { font-size:11px; color:#8b949e; margin-top:2px }
.fc-act { flex-shrink:0 }
.fw-img img, .mc-gif img { max-width:100%; max-height:300px; object-fit:contain; display:block; border-radius:4px }
.fw-vid video { max-width:100%; max-height:300px; border-radius:4px; display:block }
.fw-aud audio { width:220px; height:40px }
.mc-gif img { max-height:260px }
.dl { color:#888; font-size:11px; text-decoration:none; border:1px solid #555; padding:3px 8px; display:inline-block; border-radius:3px; white-space:nowrap }
.dl:hover { background:#21262d; color:#c9d1d9 }
.fq { flex-shrink:0; background:#161b22; border-top:1px solid #30363d; padding:8px 12px; max-height:140px; overflow-y:auto }
.fq-h { color:#8b949e; font-size:11px; margin-bottom:6px }
.fq-l { display:flex; flex-wrap:wrap; gap:4px }
.fq-i { display:flex; align-items:center; gap:6px; background:#0d1117; border:1px solid #30363d; padding:4px 8px; font-size:12px; border-radius:3px; max-width:240px }
.fq-icon-sm { flex-shrink:0; line-height:0 }
.fq-icon-sm svg { width:24px; height:24px; display:block }
.fq-n { overflow:hidden; text-overflow:ellipsis; white-space:nowrap; flex:1; color:#c9d1d9 }
.fq-s { color:#8b949e; font-size:10px; white-space:nowrap }
.fq-x { background:none; border:none; color:#f85149; cursor:pointer; font-size:14px; padding:0 2px; line-height:1 }
.fq-b { display:flex; justify-content:space-between; align-items:center; margin-top:6px }
.fq-c { color:#8b949e; font-size:12px }
.ctx { position:fixed; z-index:99999; background:#21262d; border:1px solid #444; border-radius:6px; min-width:140px; padding:4px 0; display:none; box-shadow:0 8px 24px rgba(0,0,0,.4) }
.ctx-i { padding:8px 16px; font-size:13px; color:#c9d1d9; cursor:pointer; user-select:none; transition:background .1s }
.ctx-i:hover { background:#1f6feb; color:#fff }
.bar { display:flex; gap:6px; padding:10px; background:#161b22; border-top:1px solid #30363d; flex-shrink:0; align-items:center; width:100% }
.input-wrap { position:relative; flex:1; min-width:0; width:100% }
.bar #msg { width:100%; padding:10px 14px; background:#0d1117; border:1px solid #30363d; border-radius:4px; color:#c9d1d9; font-size:15px; outline:none; transition:border-color .15s; -webkit-appearance:none; appearance:none; resize:none; min-width:0 }
.bar #msg:focus { border-color:#58a6ff }
.bar .btn, .bar .btn-ghost { flex-shrink:0; white-space:nowrap }
.bar #upBtn { flex-shrink:0; display:inline-flex; align-items:center; justify-content:center; min-width:36px; padding:8px 12px }
.bar #sendBtn { flex-shrink:0 }
.mention-dd {
    position:absolute; left:0; right:0; background:#21262d; border:1px solid #444; border-radius:6px; max-height:160px;
    overflow-y:auto; z-index:100; box-shadow:0 8px 24px rgba(0,0,0,.4)
}
.mention-item { padding:8px 14px; font-size:13px; color:#c9d1d9; cursor:pointer }
.mention-item:hover, .mention-item.active { background:#1f6feb; color:#fff }
.notif-badge {
    position:absolute; top:-6px; right:-6px; background:#f85149; color:#fff; font-size:10px;
    min-width:16px; height:16px; border-radius:8px; text-align:center; line-height:16px; padding:0 4px
}
.notif-panel {
    position:fixed; top:52px; right:16px; width:320px; max-width:calc(100vw - 32px); max-height:400px;
    background:#161b22; border:1px solid #30363d; border-radius:8px; z-index:9998;
    overflow-y:auto; box-shadow:0 8px 24px rgba(0,0,0,.5)
}
.notif-list { padding:8px }
.notif-empty { color:#8b949e; text-align:center; padding:20px; font-size:13px }
.notif-item { padding:10px; border-bottom:1px solid #30363d; font-size:13px }
.notif-item:last-child { border-bottom:none }
.notif-from { color:#58a6ff; margin-bottom:4px }
.notif-preview { color:#8b949e; font-size:12px; margin-bottom:6px; overflow:hidden; text-overflow:ellipsis; white-space:nowrap }
.notif-acts { display:flex; gap:4px }
.panel { position:fixed; top:0; left:0; right:0; bottom:0; z-index:9999; background:rgba(0,0,0,.85); overflow-y:auto }
.panel-h { background:#161b22; padding:12px 16px; border-bottom:1px solid #30363d; font-size:15px; color:#c9d1d9 }
.panel-b { padding:12px; max-width:820px; margin:0 auto }
.panel-loading, .panel-empty { color:#8b949e; padding:20px; text-align:center }
.panel-t { display:flex; gap:4px; margin-bottom:12px; border-bottom:1px solid #30363d; padding-bottom:8px }
.tab-btn { padding:6px 14px; background:transparent; border:1px solid #444; color:#8b949e; cursor:pointer; font-size:13px; border-radius:4px }
.tab-btn.active { background:#1f6feb; color:#fff; border-color:#1f6feb }
.intel-list { display:flex; flex-direction:column; gap:6px }
.intel-item { background:#161b22; border:1px solid #30363d; border-radius:4px; padding:8px 10px; font-size:12px; line-height:1.6 }
.intel-badge { display:inline-block; padding:1px 6px; border-radius:3px; color:#fff; font-size:10px; margin-right:6px }
.intel-time { color:#8b949e; margin-right:12px }
.intel-ip { color:#58a6ff }
.intel-data { color:#8b949e; font-size:11px; margin:2px 0 }
.intel-chain { color:#484f58; font-size:10px }
.chain-status { padding:10px; margin-bottom:10px; background:#161b22; border:1px solid #30363d; border-radius:4px; font-size:13px }
.badge { display:inline-block; vertical-align:middle }
.quote-block { border-left:3px solid #58a6ff; padding:4px 8px; margin:2px 0; background:rgba(88,166,255,.08); border-radius:0 4px 4px 0 }
.quote-author { font-size:11px; color:#58a6ff; margin-bottom:2px }
.quote-content { font-size:13px; color:#8b949e }
.is-quote { display:block }
.quote-traceable { cursor:pointer }
.quote-traceable:hover { border-left-color:#1f6feb }
.quote-trace-btn { display:inline-block;margin-left:8px;padding:1px 6px;font-size:10px;color:#58a6ff;border:1px solid #58a6ff;border-radius:3px;cursor:pointer;vertical-align:middle }
.quote-trace-btn:hover { background:#1f6feb;color:#fff }
.fc { min-width:140px }
.fc-icon svg { width:32px; height:32px }
body.no-select, body.no-select * { user-select:none !important; -webkit-user-select:none !important; -moz-user-select:none !important }
body.no-select input, body.no-select textarea, body.no-select [contenteditable] { user-select:auto !important; -webkit-user-select:auto !important }
.pt { width:100%; border-collapse:collapse; font-size:13px }
.pt th, .pt td { padding:8px 10px; border-bottom:1px solid #30363d; text-align:left }
.pt th { color:#8b949e; font-weight:normal; font-size:12px; background:#0d1117 }
.pt tr:hover td { background:#1c2128 }
.pt td a { color:#58a6ff; cursor:pointer; text-decoration:none }
.pt td a:hover { text-decoration:underline }
.error-page, .maintenance-page, .ban-page { user-select:none; -webkit-user-select:none; -moz-user-select:none }
input, textarea { user-select:auto; -webkit-user-select:auto }
@media (max-width:768px) {
    .mtgl, .ma, .mq { width:36px; height:36px; line-height:34px; font-size:18px }
    .mq { font-size:16px }
    .ma, .mq, .mtgl { display:block }
    .notif-panel { right:0; width:100%; max-height:50vh; top:44px; border-radius:0 0 8px 8px }
    .mention-dd { max-height:120px }
    .mention-item { padding:10px 14px; font-size:14px }
    .ctx-i { padding:10px 16px; font-size:14px; min-height:40px }
}
@media (max-width:600px) {
    .form { margin:40px 16px; padding:20px 16px }
    .top { padding:6px 10px; gap:4px; min-height:40px }
    .tu { font-size:13px; max-width:80px }
    .top-c { font-size:11px }
    #chatBox { padding:8px }
    .mb { max-width:88%; padding:7px 10px }
    .fc { max-width:100% }
    .fw-img img, .fw-vid video { max-height:200px }
    .fw-aud audio { width:160px }
    .mc-gif img { max-height:180px }
    .bar { padding:8px; gap:4px }
    .bar #msg { padding:10px 12px; font-size:16px }
    .btn { padding:10px 14px; font-size:14px; min-height:40px }
    .btn-sm { padding:8px 12px; min-height:36px }
    .input-wrap { flex:1 }
}
@media (max-width:400px) {
    .mb { max-width:92% }
    .fw-img img, .fw-vid video { max-height:150px }
    .fw-aud audio { width:120px }
    .mc-gif img { max-height:140px }
    .tu { max-width:60px; font-size:12px }
}