:root { --primary:#ff6a00; --primary-hover:#e85f00; --success:#16a34a; --warning:#d97706; --danger:#dc2626; --page:#f7f7f8; --surface:#fff; --text:#1f2329; --muted:#6b7280; --border:#e5e7eb; --radius:12px; --shadow:0 2px 10px rgba(31,35,41,.06); font-family:Inter,"PingFang SC","Microsoft YaHei",sans-serif; color:var(--text); }
* { box-sizing:border-box; } body { margin:0; background:var(--page); font-size:14px; } button,input,textarea { font:inherit; } button { cursor:pointer; }
.topbar { height:64px; display:flex; align-items:center; justify-content:space-between; padding:0 24px; background:var(--surface); border-bottom:1px solid var(--border); }
.brand { display:flex; gap:10px; align-items:center; font-size:17px; font-weight:700; }.brand-mark { width:30px; height:30px; display:grid; place-items:center; color:white; border-radius:9px; background:var(--primary); }.right { display:flex; gap:12px; align-items:center; }.user { color:var(--muted); }
.shell { display:grid; grid-template-columns:176px 1fr; min-height:calc(100vh - 64px); }.sidebar { padding:18px 12px; }.nav { display:flex; align-items:center; gap:10px; width:100%; border:0; background:transparent; border-radius:10px; padding:11px 12px; color:#4b5563; text-align:left; margin-bottom:4px; }.nav.active,.nav:hover { background:#fff0e5; color:#c84f00; font-weight:600; }
.main { padding:24px; max-width:1488px; width:100%; margin:0 auto; }.page-head { display:flex; justify-content:space-between; align-items:flex-start; margin-bottom:18px; }.page-head h1 { font-size:20px; margin:0 0 6px; }.page-head p { margin:0; color:var(--muted); }
.button { border:1px solid transparent; border-radius:10px; padding:9px 14px; background:var(--primary); color:white; font-weight:600; }.button:hover { background:var(--primary-hover); }.button.secondary { color:var(--text); background:white; border-color:var(--border); }.button.danger { background:var(--danger); }.button:disabled { opacity:.5; cursor:not-allowed; }
.inbox { display:grid; grid-template-columns:320px minmax(420px,1fr) 280px; height:calc(100vh - 150px); min-height:560px; background:var(--surface); border:1px solid var(--border); border-radius:14px; overflow:hidden; box-shadow:var(--shadow); }.pane { min-width:0; }.conversation-pane,.detail-pane { border-right:1px solid var(--border); }.detail-pane { border:0; border-left:1px solid var(--border); padding:20px; }.pane-head { padding:16px; border-bottom:1px solid var(--border); }.filters { display:flex; gap:8px; margin-top:12px; }.search { width:100%; padding:9px 11px; border:1px solid var(--border); border-radius:9px; outline:none; }.search:focus,textarea:focus { border-color:var(--primary); box-shadow:0 0 0 3px #fff0e5; }.filter { border:1px solid var(--border); background:white; color:var(--muted); border-radius:99px; padding:5px 9px; }.filter.active { background:#fff0e5; color:#c84f00; border-color:#ffd3b0; }.conversation-list { overflow:auto; height:calc(100% - 116px); }.conversation { display:flex; gap:10px; padding:14px 16px; border-bottom:1px solid #f3f4f6; cursor:pointer; }.conversation:hover,.conversation.active { background:#fff8f3; }.avatar { width:36px; height:36px; flex:0 0 auto; border-radius:50%; display:grid; place-items:center; color:white; font-weight:700; background:#94a3b8; }.avatar.orange { background:#f97316; }.avatar.green { background:#16a34a; }.conversation-main { min-width:0; flex:1; }.conversation-line { display:flex; justify-content:space-between; gap:8px; }.conversation-name { font-weight:600; overflow:hidden; white-space:nowrap; text-overflow:ellipsis; }.time,.subtle { color:var(--muted); font-size:12px; }.preview { overflow:hidden; white-space:nowrap; text-overflow:ellipsis; color:var(--muted); margin-top:4px; }.badge { display:inline-flex; align-items:center; justify-content:center; min-width:18px; height:18px; padding:0 5px; border-radius:99px; background:var(--primary); color:white; font-size:11px; }.source { margin-top:7px; font-size:11px; color:#c84f00; }
.chat-pane { display:flex; flex-direction:column; }.chat-head { display:flex; justify-content:space-between; align-items:center; padding:16px 20px; border-bottom:1px solid var(--border); }.chat-title { font-weight:700; }.account-chip { display:inline-flex; gap:6px; align-items:center; border-radius:99px; background:#f3f4f6; padding:5px 9px; color:#374151; font-size:12px; }.dot { width:8px; height:8px; border-radius:50%; background:var(--success); }.dot.warning { background:var(--warning); }.messages { flex:1; overflow:auto; padding:20px; display:flex; flex-direction:column; gap:14px; background:linear-gradient(#fff,#fffcfa); }.message { display:flex; flex-direction:column; max-width:76%; gap:4px; }.message.in { align-self:flex-start; }.message.out { align-self:flex-end; align-items:flex-end; }.bubble { padding:10px 12px; border-radius:12px; line-height:1.55; background:#f3f4f6; white-space:pre-wrap; word-break:break-word; }.out .bubble { background:#fff0e5; }.delivery { font-size:11px; color:var(--muted); }.composer { padding:14px 16px; border-top:1px solid var(--border); }.composer textarea { width:100%; height:68px; resize:none; padding:9px 11px; border:1px solid var(--border); border-radius:10px; outline:none; }.composer-actions { margin-top:8px; display:flex; justify-content:space-between; align-items:center; }.composer-tip { color:var(--muted); font-size:12px; }
.detail-title { font-size:15px; font-weight:700; margin:0 0 20px; }.profile { display:flex; gap:10px; align-items:center; margin-bottom:20px; }.profile .avatar { width:44px; height:44px; }.account-card,.notice { border:1px solid var(--border); border-radius:10px; padding:12px; margin:14px 0; }.notice { background:#fffbeb; border-color:#fde68a; color:#92400e; line-height:1.5; }.kv { display:flex; justify-content:space-between; gap:8px; padding:8px 0; border-bottom:1px solid #f3f4f6; }.kv:last-child { border:0; }.empty { display:grid; place-items:center; height:100%; padding:30px; text-align:center; color:var(--muted); }.empty strong { display:block; color:var(--text); margin-bottom:6px; }
.cards { display:grid; grid-template-columns:repeat(auto-fit,minmax(260px,1fr)); gap:16px; }.card { border:1px solid var(--border); border-radius:14px; background:white; padding:18px; box-shadow:var(--shadow); }.account-top { display:flex; justify-content:space-between; gap:10px; }.status { display:inline-flex; align-items:center; gap:5px; font-size:12px; }.status.ok { color:var(--success); }.status.warn { color:var(--warning); }.card-actions { display:flex; gap:8px; margin-top:18px; }.card-actions .button { padding:7px 10px; font-size:13px; }.activity { background:white; border:1px solid var(--border); border-radius:14px; overflow:hidden; }.activity-row { display:grid; grid-template-columns:150px 1fr 150px; padding:14px 18px; border-bottom:1px solid var(--border); }.activity-row:last-child { border:0; }.activity-row .type { font-weight:600; }
.modal-backdrop { position:fixed; inset:0; z-index:4; background:rgba(17,24,39,.44); display:grid; place-items:center; padding:20px; }.modal { width:min(450px,100%); background:white; border-radius:14px; box-shadow:0 20px 48px rgba(0,0,0,.2); padding:22px; }.modal h2 { margin:0 0 8px; font-size:18px; }.modal p { color:var(--muted); line-height:1.55; }.qr { width:218px; height:218px; margin:18px auto; padding:10px; background:repeating-linear-gradient(45deg,#111 0 4px,#fff 4px 8px); border:8px solid white; outline:1px solid var(--border); }.qr:after { content:"请使用闲鱼 App 扫码"; color:white; background:#1f2329; display:block; text-align:center; margin-top:80px; padding:8px; font-size:12px; }.modal-actions { display:flex; justify-content:flex-end; gap:8px; margin-top:18px; }.field { margin:15px 0; }.field label { display:block; margin-bottom:6px; font-weight:600; }.field input { width:100%; padding:10px; border:1px solid var(--border); border-radius:9px; }
.toast { position:fixed; right:24px; bottom:24px; z-index:10; padding:12px 15px; color:white; background:#1f2329; border-radius:10px; box-shadow:var(--shadow); }
@media (max-width:1050px) { .inbox { grid-template-columns:280px 1fr; }.detail-pane { display:none; } } @media (max-width:720px) { .topbar { padding:0 14px; }.user { display:none; }.shell { display:block; }.sidebar { display:flex; padding:8px 12px; overflow:auto; }.nav { width:auto; white-space:nowrap; }.main { padding:14px; }.inbox { grid-template-columns:1fr; height:calc(100vh - 164px); }.conversation-pane { display:none; }.chat-pane { min-width:0; }.page-head { gap:12px; }.page-head p { display:none; }.activity-row { grid-template-columns:1fr; gap:5px; } }