@charset "UTF-8";
:root {
  color-scheme: dark;
  --u: clamp(.72px, .0520833333vw, 2.5px);
  --bg: #101412; --panel: #171c19; --panel-raised: #1c231f;
  --border: #2b342e; --line: #252d28; --text: #e3e9e5;
  --muted: #92a297; --subtle: #7e8f84;
  --accent: #8dcba0; --accent-rgb: 141,203,160;
  --tag-private: #a7bdad; --tag-group: #a8baca;
  --tag-reception: #a6c8ad; --tag-advance: #dbc49b;
  --radius: calc(12 * var(--u)); --avatar-radius: 24%;
  font-family: -apple-system, BlinkMacSystemFont, "PingFang SC", "Microsoft YaHei", sans-serif;
  font-synthesis: none; text-rendering: optimizeLegibility;
}
* { box-sizing: border-box; }
body { margin: 0; background: var(--bg); color: var(--text); }
button, a { -webkit-tap-highlight-color: transparent; }
button { font: inherit; cursor: pointer; }
a { color: inherit; text-decoration: none; }
button, a, [tabindex] { outline-offset: calc(4 * var(--u)); }
:focus-visible { outline: calc(2 * var(--u)) solid var(--accent); }
button { color: inherit; }
button:disabled { cursor: default; }
img { display: block; max-width: 100%; }
button svg, a svg { pointer-events: none; }
button:disabled { opacity: .6; }
[hidden] { display: none !important; }
.icon { width: calc(17 * var(--u)); height: calc(17 * var(--u)); fill: none; stroke: currentColor; stroke-width: 1.6; stroke-linecap: round; stroke-linejoin: round; flex: none; }
.shell { min-width: 1280px; padding: 0 calc(24 * var(--u)); }
.topbar { height: calc(92 * var(--u)); display: flex; align-items: center; gap: calc(24 * var(--u)); }
.brand { display: flex; gap: calc(13 * var(--u)); align-items: center; flex: none; }
.brand-symbol { width: calc(38 * var(--u)); height: calc(38 * var(--u)); border-radius: 50%; background: var(--accent); position: relative; }
.brand-symbol::before { content: ''; position: absolute; width: 50%; height: 50%; border-radius: 50%; background: var(--bg); left: 10%; top: 12%; }
.brand-symbol::after { content: ''; position: absolute; width: 19%; height: 19%; border-radius: 50%; background: var(--bg); right: 15%; bottom: 16%; }
.brand-eyebrow { color: var(--accent); font-size: calc(9 * var(--u)); letter-spacing: calc(2.2 * var(--u)); font-weight: 600; }
h1 { margin: calc(5 * var(--u)) 0 0; font-size: calc(22 * var(--u)); line-height: 1.2; font-weight: 600; letter-spacing: calc(.5 * var(--u)); }
.account { display: flex; gap: calc(10 * var(--u)); align-items: center; border-left: 1px solid var(--border); padding-left: calc(24 * var(--u)); }
.account img { width: calc(34 * var(--u)); height: calc(34 * var(--u)); border-radius: var(--avatar-radius); }
.account-name { font-size: calc(13 * var(--u)); font-weight: 550; }
.account-caption { margin-top: calc(4 * var(--u)); color: var(--muted); font-size: calc(10 * var(--u)); letter-spacing: calc(.3 * var(--u)); }
.topbar-end { display: flex; align-items: center; gap: calc(12 * var(--u)); margin-left: auto; }
.theme-nav { display: flex; align-items: center; gap: calc(2 * var(--u)); background: var(--panel); padding: calc(4 * var(--u)); border: 1px solid var(--border); border-radius: calc(8 * var(--u)); }
.theme-nav :is(a, button) { display: flex; align-items: center; gap: calc(7 * var(--u)); padding: calc(7 * var(--u)) calc(10 * var(--u)); border-radius: calc(5 * var(--u)); color: var(--muted); font-size: calc(11 * var(--u)); white-space: nowrap; transition: background .15s, color .15s; border: 0; background: transparent; }
.theme-nav :is(a, button):hover { color: var(--text); background: var(--panel-raised); }
.theme-nav a[aria-current], .theme-nav button[aria-pressed="true"] { background: var(--panel-raised); color: var(--text); box-shadow: 0 1px calc(3 * var(--u)) #0002; }
.theme-dot { width: calc(6 * var(--u)); height: calc(6 * var(--u)); border-radius: 50%; }
.theme-dot.green { background: #8dcba0; } .theme-dot.blue { background: #68c8e8; } .theme-dot.black { background: #c6c6c6; }
.control { display: inline-flex; justify-content: center; align-items: center; gap: calc(7 * var(--u)); min-height: calc(33 * var(--u)); border: 1px solid var(--border); border-radius: calc(7 * var(--u)); padding: calc(7 * var(--u)) calc(11 * var(--u)); background: transparent; color: var(--muted); font-size: calc(11 * var(--u)); white-space: nowrap; transition: background .15s, color .15s; }
.control:hover { background: var(--panel-raised); color: var(--text); }
.icon-control { padding-inline: calc(8 * var(--u)); }
.dashboard { height: calc(100dvh - 122 * var(--u)); min-height: calc(260 * var(--u)); display: grid; grid-template-columns: minmax(0, 2fr) minmax(0, 1fr) minmax(0, 1fr); gap: calc(16 * var(--u)); }
.relations { display: grid; grid-template-rows: minmax(0, 55fr) minmax(0, 45fr); min-height: 0; gap: calc(16 * var(--u)); }
.panel { border: 1px solid var(--border); background: var(--panel); border-radius: var(--radius); min-height: 0; min-width: 0; overflow: hidden; display: flex; flex-direction: column; position: relative; }
.panel-header { display: flex; align-items: center; gap: calc(9 * var(--u)); flex-shrink: 0; height: calc(58 * var(--u)); padding: 0 calc(20 * var(--u)); border-bottom: 1px solid var(--line); }
.panel-header h2 { margin: 0; font-size: calc(14 * var(--u)); font-weight: 550; letter-spacing: calc(.3 * var(--u)); }
.panel-index { font: 500 calc(10 * var(--u))/1 ui-monospace, "SFMono-Regular", Consolas, monospace; color: var(--subtle); margin-right: calc(2 * var(--u)); }
.count { font: 500 calc(11 * var(--u))/1 ui-monospace, "SFMono-Regular", Consolas, monospace; color: var(--accent); background: rgba(var(--accent-rgb), .08); padding: calc(5 * var(--u)) calc(7 * var(--u)); border-radius: calc(4 * var(--u)); }
.panel-note { margin-left: auto; color: var(--muted); font-size: calc(10 * var(--u)); white-space: nowrap; }
.panel-note .live-dot, .footer .live-dot { display: inline-block; width: calc(5 * var(--u)); height: calc(5 * var(--u)); border-radius: 50%; background: var(--accent); margin-right: calc(5 * var(--u)); vertical-align: 1px; }
.paused .live-dot { background: var(--subtle); }
.relation-body { flex: 1; min-height: 0; padding: calc(20 * var(--u)); display: flex; flex-direction: column; }
.avatar-grid { flex: 1; min-height: 0; overflow: auto; scrollbar-width: thin; display: grid; justify-content: space-between; align-content: space-between; grid-template-columns: repeat(var(--columns, 16), var(--cell, 40px)); gap: var(--grid-gap, 8px); }
.friend-avatar { width: var(--cell); height: var(--cell); border-radius: var(--avatar-radius); background: var(--panel-raised); transition: filter .15s; }
.friend-avatar:hover { filter: brightness(1.12); }
.group-grid { flex: 1; min-height: 0; overflow: auto; scrollbar-width: thin; display: grid; grid-template-columns: repeat(var(--columns, 10), minmax(0, 1fr)); gap: var(--grid-gap, 12px); align-content: space-between; }
.group { display: flex; align-items: center; flex-direction: column; min-width: 0; }
.group-avatar { display: grid; width: var(--cell, 48px); height: var(--cell, 48px); padding: calc(2 * var(--u)); gap: calc(1.5 * var(--u)); grid-template-columns: repeat(3, 1fr); background: #d2d7d0; border-radius: calc(7 * var(--u)); overflow: hidden; }
.group-avatar img { width: 100%; height: 100%; min-height: 0; }
.group-name { margin-top: calc(7 * var(--u)); font-size: calc(10 * var(--u)); line-height: 1.55; color: #b8c4bc; width: 100%; text-align: center; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; overflow-wrap: anywhere; }
.group-suffix { white-space: nowrap; }
.group-grid.compact .group-name { font-size: calc(9 * var(--u)); line-height: 1.45; margin-top: calc(5 * var(--u)); }
.capacity-warning { padding-top: calc(7 * var(--u)); color: var(--tag-advance); font-size: calc(10 * var(--u)); }
.stream { overflow-y: auto; flex: 1; min-height: 0; padding: calc(17 * var(--u)) calc(17 * var(--u)) calc(19 * var(--u)); overflow-anchor: none; overscroll-behavior: contain; scrollbar-width: thin; scrollbar-color: var(--border) transparent; }
.stream-content { display: flex; flex-direction: column; gap: calc(7 * var(--u)); }
.message { display: flex; align-items: flex-start; gap: calc(7 * var(--u)); font-size: calc(13 * var(--u)); line-height: calc(23 * var(--u)); min-width: 0; }
.message-avatar { width: calc(22 * var(--u)); height: calc(22 * var(--u)); border-radius: 25%; flex: none; margin-top: calc(.5 * var(--u)); }
.message-body { max-width: calc(100% - 29 * var(--u)); min-width: 0; overflow-wrap: anywhere; color: #cbd5ce; }
.message.outgoing { justify-content: flex-end; }
.message.outgoing .message-body { color: #e4ece6; }
.message.outgoing .message-avatar { order: 1; }
.message-text { margin: 0; }
.tag { display: inline-block; vertical-align: calc(1 * var(--u)); font-size: calc(9 * var(--u)); line-height: calc(14 * var(--u)); border-radius: calc(3 * var(--u)); padding: 0 calc(4 * var(--u)); margin-right: calc(4 * var(--u)); font-weight: 450; white-space: nowrap; }
.tag-private { color: var(--tag-private); background: #8eb69b13; }
.tag-group { color: var(--tag-group); background: #8fb3d313; }
.tag-reception { color: var(--tag-reception); background: #8cd19b14; }
.tag-advance { color: var(--tag-advance); background: #ddb98115; }
.tag-unknown { color: var(--tag-advance); background: #ddb98115; }
.message-image { padding: 0; background: none; border: 0; display: block; width: calc(152 * var(--u)); margin-top: calc(4 * var(--u)); border-radius: calc(6 * var(--u)); overflow: hidden; }
.message-image img { aspect-ratio: 1.5; width: 100%; object-fit: cover; }
.voice { border: 1px solid var(--border); background: var(--panel-raised); border-radius: calc(5 * var(--u)); display: inline-flex; align-items: center; gap: calc(10 * var(--u)); min-width: calc(105 * var(--u)); height: calc(23 * var(--u)); vertical-align: top; padding: 0 calc(7 * var(--u)); color: var(--muted); }
.wave { display: flex; align-items: center; gap: calc(2 * var(--u)); height: calc(12 * var(--u)); }
.wave i { display: block; width: calc(2 * var(--u)); height: calc(var(--bar) * var(--u)); background: currentColor; border-radius: 2px; }
.voice span { font-size: calc(10 * var(--u)); }
.jump-button { position: absolute; bottom: calc(18 * var(--u)); left: 50%; transform: translateX(-50%); z-index: 2; border: 1px solid rgba(var(--accent-rgb), .35); border-radius: calc(20 * var(--u)); background: var(--panel-raised); box-shadow: 0 calc(6 * var(--u)) calc(24 * var(--u)) #0005; color: var(--accent); padding: calc(8 * var(--u)) calc(14 * var(--u)); font-size: calc(11 * var(--u)); white-space: nowrap; }
.moments-stream { padding: 0 calc(20 * var(--u)); }
.moment { padding: calc(22 * var(--u)) 0 calc(20 * var(--u)); border-bottom: 1px solid var(--line); }
.moment:last-child { border-bottom: 0; }
.moment-heading { display: flex; gap: calc(9 * var(--u)); align-items: center; margin-bottom: calc(10 * var(--u)); }
.moment-heading img { width: calc(29 * var(--u)); height: calc(29 * var(--u)); border-radius: var(--avatar-radius); }
.moment-author { font-size: calc(11 * var(--u)); color: var(--accent); font-weight: 500; }
.moment-origin { margin-left: auto; font-size: calc(9 * var(--u)); color: var(--subtle); }
.moment-text { font-size: calc(13 * var(--u)); line-height: 1.85; white-space: pre-line; margin: 0 0 calc(12 * var(--u)); color: #ced7d0; }
.moment-gallery { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: calc(5 * var(--u)); }
.moment-gallery button { border: none; padding: 0; background: var(--panel-raised); border-radius: calc(5 * var(--u)); overflow: hidden; }
.moment-gallery img { width: 100%; aspect-ratio: 1; object-fit: cover; transition: transform .25s; }
.moment-gallery button:hover img { transform: scale(1.05); }
.moment-gallery.single { grid-template-columns: minmax(0, 1fr); width: 72%; }
.moment-gallery.single img { aspect-ratio: 1.55; }
.moment-stats { display: flex; gap: calc(17 * var(--u)); align-items: center; margin-top: calc(12 * var(--u)); color: var(--muted); font: calc(11 * var(--u))/1 ui-monospace, "SFMono-Regular", Consolas, monospace; }
.moment-stats span { display: inline-flex; align-items: center; gap: calc(5 * var(--u)); }
.moment-stats .icon { width: calc(13 * var(--u)); height: calc(13 * var(--u)); }
.footer { height: calc(30 * var(--u)); display: flex; align-items: center; justify-content: space-between; color: var(--muted); font-size: calc(9 * var(--u)); letter-spacing: calc(.25 * var(--u)); }
.footer-left { display: flex; align-items: center; gap: calc(14 * var(--u)); }
.footer a:hover { color: var(--accent); }
.footer-right { font: calc(9 * var(--u))/1 ui-monospace, "SFMono-Regular", Consolas, monospace; color: var(--subtle); letter-spacing: calc(1 * var(--u)); }
.image-dialog { width: min(88vw, 1200px); border: 1px solid var(--border); border-radius: 12px; padding: 14px; background: var(--panel); color: var(--text); }
.image-dialog::backdrop { background: #000c; backdrop-filter: blur(5px); }
.image-dialog img { max-width: 100%; max-height: 78dvh; object-fit: contain; margin: auto; }
.dialog-heading { display: flex; align-items: center; justify-content: space-between; margin-bottom: 12px; font-size: 13px; color: var(--muted); }
.dialog-heading button { border: 1px solid var(--border); background: var(--panel-raised); color: var(--text); padding: 5px 12px; border-radius: 5px; }
.toast { position: fixed; z-index: 10; bottom: 36px; left: 50%; transform: translateX(-50%); padding: 12px 20px; background: var(--panel-raised); border: 1px solid var(--border); box-shadow: 0 4px 24px #0006; border-radius: 8px; font-size: 13px; }
.noscript { padding: 32px; color: #eee; }
/* 三套主题共享线框与信息密度，只改变视觉语言。 */
[data-theme="blue"] {
  --bg: #091321; --panel: #101e30; --panel-raised: #192c42;
  --border: #263b53; --line: #1f3248; --text: #e1ecfa; --muted: #95abc4; --subtle: #7690aa;
  --accent: #68c8e8; --accent-rgb: 104,200,232;
  --tag-private: #a0bddc; --tag-group: #85c9e3; --tag-reception: #8cd4c8; --tag-advance: #e7c18b;
}
[data-theme="blue"] .message-body, [data-theme="blue"] .moment-text { color: #c6d6e8; }
[data-theme="blue"] .message.outgoing .message-body { color: #e1eaf6; }
[data-theme="blue"] .group-name { color: #b6c8dc; }
[data-theme="black"] {
  --bg: #080808; --panel: #101010; --panel-raised: #1c1c1c;
  --border: #303030; --line: #272727; --text: #ececec; --muted: #a1a1a1; --subtle: #858585;
  --accent: #dedede; --accent-rgb: 222,222,222;
  --tag-private: #c4c4c4; --tag-group: #b1c4d6; --tag-reception: #b4cbb3; --tag-advance: #d7c4a1;
}
[data-theme="black"] .message-body, [data-theme="black"] .moment-text { color: #cbcbcb; }
[data-theme="black"] .message.outgoing .message-body { color: #ebebeb; }
[data-theme="black"] .group-name { color: #bdbdbd; }
[data-theme="black"] .moment-author { color: #cecece; }
.account select { max-width: calc(210 * var(--u)); color: var(--text); background: var(--panel); border: 0; border-radius: calc(4 * var(--u)); font-family: inherit; font-size: calc(13 * var(--u)); font-weight: 550; line-height: 1.5; padding: calc(2 * var(--u)) calc(4 * var(--u)); }
.account select option { background: var(--panel); }
.group-image { width: var(--cell, 48px); height: var(--cell, 48px); border-radius: var(--avatar-radius); object-fit: cover; }
.empty-state { display: grid; place-items: center; flex: 1; min-height: calc(80 * var(--u)); padding: calc(24 * var(--u)); color: var(--muted); font-size: calc(12 * var(--u)); line-height: 1.8; text-align: center; }
.stream > .empty-state { min-height: calc(200 * var(--u)); }
.history-button { width: 100%; padding: calc(7 * var(--u)); margin-bottom: calc(10 * var(--u)); background: transparent; border: 0; color: var(--muted); font-size: calc(10 * var(--u)); }
.history-button:hover { color: var(--accent); }
.status-warning { color: var(--tag-advance) !important; }
.message-player { display: block; max-width: 100%; width: calc(210 * var(--u)); margin-top: calc(4 * var(--u)); }
audio.message-player { height: calc(28 * var(--u)); }
.login-page { min-height: 100dvh; display: flex; flex-direction: column; align-items: center; padding: 36px 48px; }
.login-top { width: 100%; display: flex; align-items: center; justify-content: space-between; }
.login-top > span { color: var(--muted); font: 10px/1.5 ui-monospace, monospace; letter-spacing: 2px; }
.login-card { width: min(100%, 420px); margin: auto; padding: 50px 0; }
.login-kicker { color: var(--accent); font: 10px/1.5 ui-monospace, monospace; letter-spacing: 1.8px; }
.login-card h2 { font-size: 34px; font-weight: 500; margin: 18px 0 10px; letter-spacing: -1px; }
.login-card > p { color: var(--muted); font-size: 13px; line-height: 1.8; margin-bottom: 30px; }
.login-card label { display: block; color: var(--muted); font-size: 12px; margin: 20px 0 9px; }
.login-card input { width: 100%; padding: 13px 14px; border: 1px solid var(--border); border-radius: 7px; background: var(--panel); color: var(--text); font-size: 15px; outline-color: var(--accent); }
.login-submit { display: block; width: 100%; padding: 14px; background: var(--accent); color: var(--bg); font-size: 14px; border: 0; border-radius: 7px; margin-top: 16px; }
.login-error { min-height: 20px; font-size: 12px; color: var(--tag-advance); line-height: 1.7; margin-bottom: 0; }
.login-footnote { color: var(--muted); border-top: 1px solid var(--border); padding-top: 22px; margin-top: 30px; font-size: 11px; }
.login-bottom { color: var(--muted); font-size: 11px; letter-spacing: 1px; }
@media (max-width: 650px) { .login-page { padding: 24px; } .login-top > span { display: none; } .login-top .brand { --u: 1px; } }
/* 选择页 */
.selection { --u: 1px; max-width: 1500px; margin: auto; padding: 52px 48px 32px; }
.selection-header { display: flex; justify-content: space-between; align-items: center; padding-bottom: 32px; border-bottom: 1px solid var(--border); }
.selection-header .brand-eyebrow { font-size: 10px; }
.selection-header .brand-symbol { width: 34px; height: 34px; }
.selection-header h1 { font-size: 19px; }
.selection-badge { font-size: 11px; padding: 7px 10px; border: 1px solid var(--border); border-radius: 4px; color: var(--muted); letter-spacing: 1px; }
.selection-intro { padding: 64px 0 40px; }
.selection-kicker { font-size: 11px; color: var(--accent); letter-spacing: 2px; font-family: ui-monospace, monospace; }
.selection-intro h2 { margin: 16px 0; font-size: clamp(30px, 3vw, 46px); font-weight: 500; letter-spacing: -1px; }
.selection-intro p { font-size: 14px; color: var(--muted); line-height: 1.8; }
.theme-cards { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 22px; }
.theme-card { display: block; border: 1px solid var(--border); border-radius: 10px; overflow: hidden; background: var(--panel); transition: border-color .2s, transform .2s; }
.theme-card:hover { transform: translateY(-5px); border-color: var(--accent); }
.card-preview { aspect-ratio: 16/10; background: #131a16; padding: 16px 14px; overflow: hidden; border-bottom: 1px solid var(--border); }
.card-preview img { width: 100%; height: 100%; object-fit: cover; object-position: top left; border: 1px solid #ffffff12; border-radius: 4px; }
.card-meta { padding: 24px; }
.card-number { font: 11px ui-monospace, monospace; color: var(--muted); }
.card-title-row { display: flex; align-items: center; justify-content: space-between; margin: 10px 0; }
.card-title-row h3 { font-size: 21px; font-weight: 500; margin: 0; }
.card-arrow { font-size: 22px; color: var(--accent); }
.card-meta p { font-size: 12px; line-height: 1.8; color: var(--muted); margin: 0; }
.card-tags { display: flex; gap: 7px; margin-top: 22px; }
.card-tags span { font-size: 10px; color: var(--muted); border: 1px solid var(--border); padding: 4px 6px; border-radius: 3px; }
.selection-footer { display: flex; justify-content: space-between; gap: 20px; font-size: 11px; color: var(--muted); margin-top: 42px; padding-top: 22px; border-top: 1px solid var(--border); line-height: 1.8; }
@media (max-width: 1279px) { :root { --u: .72px; } }
@media (max-width: 850px) { .selection { padding: 24px; } .theme-cards { grid-template-columns: 1fr; } .selection-intro { padding-top: 36px; } .selection-header .selection-badge { display: none; } .selection-footer { flex-direction: column; } }
@media (prefers-reduced-motion: reduce) { *, *::before, *::after { scroll-behavior: auto !important; transition: none !important; animation: none !important; } }