/* Shared message surfaces. Decorative layers never take layout space. */
.echo-surface,.echo-dialog,.echo-controls,.echo-layer,.echo-admin { --echo-ink:#e6e4f2; --echo-muted:#a5a1bd; --echo-accent:#c8b5f4; --echo-line:#b7a0e42e; --echo-bg:#141222; font-family:-apple-system,BlinkMacSystemFont,"Segoe UI","Microsoft YaHei",sans-serif; box-sizing:border-box; }
.echo-surface[data-source="self"],.echo-dialog[data-source="self"] { --echo-accent:#a8d8f3; --echo-bg:#0e1c2c; --echo-ink:#e1f2fc; --echo-muted:#9cbed1; --echo-line:#9ed9f133; }
.echo-surface[data-source="love"],.echo-dialog[data-source="love"] { --echo-accent:#975766; --echo-bg:#fff9f3; --echo-ink:#593c48; --echo-muted:#896b77; --echo-line:#b5809138; }
.echo-surface *, .echo-dialog *, .echo-admin * { box-sizing:border-box; }
.echo-surface [hidden],.echo-dialog [hidden],.echo-admin [hidden] { display:none!important; }
.echo-surface button,.echo-controls button,.echo-dialog button,.echo-admin button,.echo-surface select,.echo-admin select { font:inherit; cursor:pointer; }
.echo-surface :is(button,input,textarea,select):focus-visible,.echo-controls :focus-visible,.echo-dialog :focus-visible,.echo-admin :focus-visible { outline:2px solid var(--echo-accent); outline-offset:4px; }
.echo-portal { position:relative; display:grid; grid-template-columns:1fr 1fr; align-items:center; gap:32px; overflow:hidden; margin:0 4.2%; padding:40px clamp(24px,4vw,66px); color:var(--echo-ink); background:radial-gradient(ellipse at 78% 130%,#53426a50,transparent 65%),#10131e; border:1px solid var(--echo-line); border-radius:3px; text-decoration:none; min-height:220px; }
.echo-portal::after { content:'✦'; position:absolute; right:32%; top:18px; color:#c4add84d; font-size:70px; pointer-events:none; }
.echo-kicker { font-size:10px; letter-spacing:.23em; color:var(--echo-accent); margin:0 0 16px; line-height:1.8; }
.echo-portal h2 { font:400 clamp(25px,3vw,42px)/1.2 Georgia,serif; letter-spacing:.06em; margin:0 0 12px; }
.echo-portal h2 span { font:400 13px/1.8 "Microsoft YaHei",sans-serif; margin-left:16px; letter-spacing:.16em; }
.echo-subtitle { color:var(--echo-muted); font-size:13px; line-height:1.9; margin:0; }
.echo-portal .echo-entry { display:inline-block; color:var(--echo-accent); font-size:12px; margin-top:23px; }
.echo-preview { display:grid; gap:9px; position:relative; z-index:1; }
.echo-preview-item { display:block; padding:12px 17px; border:1px solid var(--echo-line); border-radius:24px; color:var(--echo-ink); background:#ffffff05; font-size:12px; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; animation:echo-preview-drift 9s ease-in-out infinite alternate; }
.echo-preview-item:nth-child(2) { margin-left:22px; animation-delay:-3s; }.echo-preview-item:nth-child(3) { margin-right:35px; animation-delay:-6s; }
.echo-preview-item small { color:var(--echo-muted); margin-right:10px; }.echo-preview:empty::before { content:'等待第一声回响。'; color:var(--echo-muted); font-size:13px; }
@keyframes echo-preview-drift { to { transform:translateY(-4px); } }
.echo-nav { display:flex; gap:20px; flex-wrap:wrap; align-items:center; font-size:12px; padding:22px 0; color:var(--echo-muted); }.echo-nav a { color:inherit; text-decoration:none; min-height:32px; display:inline-flex; align-items:center; }.echo-nav a:hover { color:var(--echo-accent); }
.echo-section { margin:70px auto; width:min(100% - 48px,1040px); padding:clamp(24px,4vw,52px); border:1px solid var(--echo-line); border-radius:5px; color:var(--echo-ink); background:var(--echo-bg); position:relative; }
.about-main > .echo-section { width:100%; margin:65px 0; }.echo-section h2 { font:400 clamp(24px,3vw,34px)/1.6 Georgia,"SimSun",serif; margin:0 0 10px; letter-spacing:.025em; }
.echo-section .echo-subtitle { margin-bottom:30px; }.echo-compose { border-top:1px solid var(--echo-line); padding-top:24px; }.echo-identity { color:var(--echo-muted); font-size:12px; margin-bottom:18px; line-height:1.9; }.echo-identity strong { color:var(--echo-accent); font-weight:500; }
.echo-field { display:block; color:var(--echo-muted); font-size:12px; margin:14px 0 8px; }.echo-surface input,.echo-surface textarea,.echo-dialog input,.echo-dialog textarea,.echo-admin input { color:var(--echo-ink); font:inherit; background:transparent; border:1px solid var(--echo-line); border-radius:5px; padding:13px 14px; width:100%; font-size:14px; outline-offset:3px; }
.echo-surface textarea { resize:vertical; min-height:116px; line-height:1.9; }.echo-compose-foot { display:flex; justify-content:space-between; align-items:center; gap:16px; margin-top:12px; }.echo-count { font-size:11px; color:var(--echo-muted); }.echo-button { border:1px solid var(--echo-line); border-radius:24px; background:transparent; color:var(--echo-accent); padding:11px 20px; min-height:44px; font-size:12px!important; line-height:1.5; text-decoration:none; display:inline-flex; align-items:center; justify-content:center; }.echo-button:hover { background:color-mix(in srgb,var(--echo-accent) 10%,transparent); }.echo-button:disabled { opacity:.45; cursor:wait; }.echo-submit { background:var(--echo-accent); color:var(--echo-bg); border-color:var(--echo-accent); min-width:124px; }.echo-submit:hover { background:var(--echo-accent); filter:brightness(1.1); }
.echo-status { min-height:26px; font-size:12px; color:var(--echo-muted); line-height:1.9; margin:12px 0; }.echo-status[data-error="true"] { color:#d47788; }.echo-privacy { color:var(--echo-muted); font-size:11px; line-height:1.9; margin-top:20px; }.echo-privacy a { color:var(--echo-accent); text-decoration:underline; }
.echo-register { padding:18px 20px; background:color-mix(in srgb,var(--echo-accent) 4%,transparent); border:1px solid var(--echo-line); border-radius:5px; margin:16px 0; }.echo-register .echo-button { margin-top:12px; }.echo-exception summary { color:var(--echo-muted); font-size:11px; cursor:pointer; margin:14px 0; }.echo-exception textarea { min-height:70px; }.echo-challenge { margin:10px 0; min-height:0; }
.echo-history-head { display:flex; align-items:center; justify-content:space-between; gap:16px; border-top:1px solid var(--echo-line); margin-top:36px; padding-top:24px; }.echo-history-head h3 { font-size:14px; font-weight:400; letter-spacing:.1em; margin:0; }.echo-list { display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:12px; margin:22px 0; }.echo-message { width:100%; text-align:left; border:1px solid var(--echo-line); border-radius:5px; padding:20px; background:transparent; color:var(--echo-ink); min-width:0; transition:border-color .2s,transform .2s; }.echo-message:hover { transform:translateY(-2px); border-color:var(--echo-accent); }.echo-message-head { display:flex; align-items:center; gap:10px; flex-wrap:wrap; font-size:12px; margin-bottom:14px; }.echo-message-head time { font-size:10px; color:var(--echo-muted); margin-left:auto; }.echo-message p { font-size:14px; line-height:1.9; white-space:pre-wrap; overflow-wrap:anywhere; margin:0; }.echo-badge { font-size:9px; letter-spacing:.04em; padding:3px 7px; border:1px solid currentColor; border-radius:12px; }.echo-badge[data-source="self"] { color:#8ec9ee; }.echo-badge[data-source="love"] { color:#d68ea5; }.echo-badge[data-source="echoes"] { color:#bd9ced; }.echo-empty { grid-column:1/-1; padding:34px 0; color:var(--echo-muted); font-size:13px; line-height:1.9; }.echo-load { display:block; margin:12px auto; }
.echoes-page { background:#0d0c16; color:#e6e4f2; }.echoes-page .echo-section { margin-top:30px; }.echoes-main { width:min(100% - 48px,1160px); margin:auto; }.echoes-main > .echo-nav { padding-top:28px; }.echoes-hero { position:relative; padding:70px 0 45px; border-bottom:1px solid #b7a0e42e; overflow:hidden; }.echoes-hero::after { content:''; position:absolute; width:360px; height:360px; border:1px solid #c8b5f422; border-radius:50%; top:-120px; right:8%; box-shadow:0 0 120px #7755ab1a,inset 0 0 100px #7755ab11; pointer-events:none; }.echoes-hero h1 { font:400 clamp(39px,7vw,88px)/1.12 Georgia,serif; letter-spacing:-.025em; margin:22px 0; position:relative; z-index:1; }.echoes-hero h1 span { display:block; font:400 clamp(22px,3vw,35px)/1.8 "SimSun",serif; letter-spacing:.3em; margin-top:12px; color:#c8b5f4; }.echoes-hero .echo-lead { font:400 clamp(18px,2.3vw,26px)/1.8 "SimSun",serif; margin:20px 0 6px; }.echoes-hero .echo-coordinates { font-size:9px; letter-spacing:.22em; color:#928ba6; margin-top:36px; }
.echo-filters { display:flex; gap:8px; flex-wrap:wrap; margin:28px 0; }.echo-filters button[aria-pressed="true"] { background:var(--echo-accent); color:var(--echo-bg); }.echoes-footer { color:#928ba6; font-size:11px; display:flex; justify-content:space-between; flex-wrap:wrap; gap:20px; padding:40px 0 200px; }
.echo-layer { position:fixed; inset:0; pointer-events:none; z-index:24; overflow:hidden; contain:strict; }.echo-bubble { position:absolute; pointer-events:auto; border:1px solid #accfea60; color:#dceefa; background:#142438e8; border-radius:24px; max-width:min(260px,65vw); padding:12px 16px; box-shadow:0 4px 24px #00000010; font-size:11px; cursor:pointer; text-align:left; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; touch-action:manipulation; }.echo-bubble[data-source="love"] { color:#765164; background:#fff6f0f0; border-color:#d6a3ba70; }.echo-bubble[data-source="love"]::before { content:'♡ '; color:#c1849a; }.echo-bubble[data-source="echoes"] { color:#e7dcfa; background:#261d3be8; border-color:#bba3e968; }.echo-bubble small { opacity:.65; margin-right:8px; }.echo-bubble:focus-visible { outline:2px solid #fff; outline-offset:-4px; }
.echo-controls { position:relative; display:flex; align-items:center; flex-wrap:wrap; gap:8px; color:var(--echo-muted); margin:14px 0 24px; }.echo-controls button,.echo-controls select { background:transparent; color:var(--echo-accent); border:1px solid var(--echo-line); padding:8px 12px; min-height:40px; border-radius:20px; font-size:11px; }.echo-controls select option { background:#171426; color:#e6e4f2; }.echo-controls label { display:flex; align-items:center; gap:7px; font-size:11px; }.echo-reduced { font-size:11px; color:var(--echo-muted); }
dialog.echo-dialog { position:fixed; inset:0; width:min(480px,calc(100% - 32px)); max-height:85dvh; margin:auto; padding:32px; color:var(--echo-ink); background:var(--echo-bg); border:1px solid var(--echo-line); border-radius:16px; box-shadow:0 24px 100px #0008; overflow:auto; }.echo-dialog::backdrop { background:#080815b3; }.echo-dialog[open] { display:block; animation:echo-open .22s ease-out; }.echo-dialog .echo-close { display:block; margin:0 0 20px auto; background:transparent; color:var(--echo-muted); border:1px solid var(--echo-line); border-radius:50%; width:44px; height:44px; font-size:20px; cursor:pointer; }.echo-dialog h2 { font:400 25px/1.6 "SimSun",serif; margin:14px 0; }.echo-dialog .echo-detail-body { font-size:17px; line-height:2; white-space:pre-wrap; overflow-wrap:anywhere; margin:25px 0; }.echo-detail-foot { color:var(--echo-muted); font-size:11px; border-top:1px solid var(--echo-line); padding-top:22px; line-height:2; }.echo-detail-foot span { display:block; }.echo-dialog .echo-detail-symbol { font-size:32px; color:var(--echo-accent); }.echo-dialog .echo-kicker { margin:0; }.echo-dialog .echo-status { margin:0; }
@keyframes echo-open { from {opacity:0;transform:scale(.95) translateY(8px)} to {opacity:1;transform:none} }
/* Top-layer dialogs are above the player; floating messages sit below navigation/player. */
.mars-player { z-index:150; }.echo-layer[data-suspended="true"] { visibility:hidden; }
.echo-admin { width:min(1160px,calc(100% - 40px)); margin:32px auto 100px; color:var(--echo-ink); }.echo-admin h1 { font:400 35px/1.4 Georgia,"SimSun",serif; margin:30px 0; }.echo-admin h2 { font-size:17px; margin:25px 0 16px; font-weight:500; }.echo-admin p { line-height:1.9; }.echo-admin-toolbar { display:flex; gap:12px; flex-wrap:wrap; align-items:center; margin:20px 0; }.echo-admin select { background:#171426; color:var(--echo-ink); padding:10px; border:1px solid var(--echo-line); border-radius:8px; }.echo-admin-card { border:1px solid var(--echo-line); border-radius:6px; padding:22px; margin:12px 0; }.echo-admin-card p { overflow-wrap:anywhere; white-space:pre-wrap; margin:10px 0; font-size:14px; }.echo-admin-card small { color:var(--echo-muted); }.echo-admin-actions { display:flex; gap:8px; flex-wrap:wrap; margin-top:15px; }.echo-admin-actions .echo-button { padding:8px 14px; }.echo-admin input[type="number"] { width:80px; }.echo-admin input[type="checkbox"] { width:auto; }.echo-admin-stats { display:flex; gap:22px; flex-wrap:wrap; padding:20px; border:1px solid var(--echo-line); color:var(--echo-accent); }.echo-admin label { font-size:12px; color:var(--echo-muted); }.echo-privacy-page { font-size:14px; line-height:2.1; max-width:760px; padding-bottom:160px; }.echo-privacy-page h2 { margin:26px 0 10px; font-size:19px; }.echo-privacy-page p { margin:14px 0; color:#b3abc6; }
@media(max-width:700px) { .echo-portal { margin:0 16px; grid-template-columns:1fr; gap:25px; padding:30px 24px; }.echo-portal h2 span { display:block; margin:10px 0 0; }.echo-portal::after { right:20px; }.echo-section { width:calc(100% - 28px); padding:24px 18px; margin:45px auto; }.echo-list { grid-template-columns:1fr; }.echoes-main { width:calc(100% - 36px); }.echoes-main > .echo-section { width:100%; }.echoes-hero { padding-top:35px; }.echoes-hero::after { right:-160px; }.echo-nav { gap:14px; font-size:11px; }.echo-controls { gap:6px; }.echo-controls button,.echo-controls select { min-height:44px; }.echo-bubble { font-size:10px; max-width:210px; padding:11px 14px; }.echo-dialog { padding:24px!important; }.echo-message { padding:17px; }.echoes-footer { padding-bottom:210px; } }
@media(prefers-reduced-motion:reduce) { .echo-preview-item,.echo-dialog[open] { animation:none; }.echo-message { transition:none; }.echo-message:hover { transform:none; } }
.echoes-hero :is(h1,p) { width:fit-content; max-width:100%; }
.echo-bubble[data-mode="meteor"] { border-radius:22px 9px 9px 22px; box-shadow:-18px 0 24px -12px #c4a5ec88; }
.echo-bubble[data-mode="fall"] { border-style:dotted; }