:root {
  --ink: #f8f5ff;
  --muted: #aaa5bd;
  --line: rgba(255,255,255,.11);
  --paper: #0c0a1d;
  --violet: #8a58ff;
  --pink: #ff4ea4;
  --mint: #58ffd0;
  font-family: "Noto Sans SC", system-ui, sans-serif;
  color: var(--ink);
  background: #080716;
}

* { box-sizing: border-box; }
body { min-height: 100vh; margin: 0; overflow: hidden; background: radial-gradient(circle at 70% 40%, #251046 0, #0b0a1d 38%, #060611 100%); }
button, input { font: inherit; }
button { color: inherit; cursor: pointer; }
.noise { position: fixed; inset: 0; opacity: .18; pointer-events: none; background-image: url("data:image/svg+xml,%3Csvg viewBox='0 0 180 180' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.9' numOctaves='4' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)' opacity='.32'/%3E%3C/svg%3E"); mix-blend-mode: soft-light; }
.app-shell { position: relative; display: grid; grid-template-columns: 88px minmax(400px, 1fr) minmax(310px, .72fr); height: 100vh; max-width: 1680px; margin: auto; border-inline: 1px solid var(--line); }

.group-rail { z-index: 2; display: flex; flex-direction: column; align-items: center; gap: 17px; padding: 24px 0 21px; border-right: 1px solid var(--line); background: rgba(8,7,22,.5); }
.brand-mark { display: grid; place-items: center; width: 38px; height: 38px; margin-bottom: 7px; font-family: Unbounded, sans-serif; font-size: 18px; font-weight: 800; color: #0a0715; border-radius: 13px; background: linear-gradient(135deg, #61ffe1, #c16dff 57%, #ff70bb); box-shadow: 0 0 23px rgba(152,94,255,.5); }
.group-list { display: flex; flex: 1; flex-direction: column; gap: 13px; overflow: auto; padding: 4px; scrollbar-width: none; }
.group-avatar, .my-avatar { position: relative; display: grid; place-items: center; width: 44px; height: 44px; border: 0; border-radius: 15px; font-size: 18px; font-weight: 800; transition: transform .25s, box-shadow .25s; }
.group-avatar { background: var(--avatar, #43306f); }
.group-avatar:hover, .group-avatar.active { transform: translateY(-2px) scale(1.05); box-shadow: 0 0 0 2px #faf9ff, 0 0 22px var(--glow, #9d70ff); }
.group-avatar.active::after { position: absolute; width: 7px; height: 7px; right: -4px; bottom: -2px; content: ""; border: 2px solid #0b0a1d; border-radius: 10px; background: #51ffd2; }
.add-group { width: 38px; height: 38px; border: 1px dashed #726997; border-radius: 13px; background: transparent; color: #bcb5d5; font-size: 25px; line-height: 1; }
.my-avatar { background: #f4efff; color: #171025; box-shadow: inset 0 0 0 4px #25213d; }

.chat-panel { display: flex; min-width: 0; flex-direction: column; background: linear-gradient(115deg, rgba(17,14,38,.84), rgba(12,10,28,.49)); }
.chat-header { display: flex; align-items: center; justify-content: space-between; min-height: 126px; padding: 27px clamp(25px, 4vw, 58px); border-bottom: 1px solid var(--line); }
.eyebrow, .stage-kicker, .dialog-label { font-family: "DM Mono", monospace; color: #8d86aa; letter-spacing: .12em; font-size: 10px; }
h1 { margin: 7px 0 4px; font-size: clamp(23px, 2vw, 30px); line-height: 1.15; letter-spacing: -.04em; }
.chat-header p { margin: 0; color: var(--muted); font-size: 12px; }
.header-actions { display: flex; align-items: center; gap: 10px; }.account-button,.operator-button { display: flex; align-items: center; gap: 7px; padding: 8px 11px; border: 1px solid rgba(111,255,220,.23); border-radius: 10px; background: rgba(66,237,205,.07); color: #a9f9e8; font-size: 11px; font-weight: 700; }.operator-button span { display: grid; place-items: center; width: 17px; height: 17px; border-radius: 5px; background: rgba(255,255,255,.11); color: #e7fffa; font-size: 10px; }
.icon-button { width: 38px; height: 38px; border: 1px solid var(--line); border-radius: 50%; background: rgba(255,255,255,.04); font-size: 18px; }
.message-list { display: flex; flex: 1; flex-direction: column; gap: 24px; overflow: auto; padding: 35px clamp(25px, 4vw, 58px); scrollbar-width: thin; scrollbar-color: #4c436d transparent; }
.message { display: flex; align-items: flex-start; gap: 11px; max-width: 510px; animation: message-in .4s cubic-bezier(.16,1,.3,1); }
.message.mine { align-self: flex-end; flex-direction: row-reverse; }
.message-avatar { display: grid; flex: 0 0 auto; place-items: center; width: 32px; height: 32px; overflow: hidden; border-radius: 11px; background: var(--avatar, #634889); color: rgba(255,255,255,.9); font-size: 13px; font-weight: 800; }
.message-name { margin: 0 0 6px 1px; color: #9f9ab2; font-size: 11px; }
.message-meta { display: flex; align-items: baseline; gap: 6px; min-height: 15px; }
.message-time { color: #aaa; font-size: 10px; font-weight: 400; white-space: nowrap; }
.mine .message-name { text-align: right; margin-right: 1px; }
.message-bubble { max-width: 340px; padding: 10px 14px; border: 1px solid rgba(255,255,255,.07); border-radius: 4px 15px 15px; background: rgba(255,255,255,.075); color: #e9e6f4; font-size: 14px; line-height: 1.6; }
.mine .message-bubble { border-radius: 15px 4px 15px 15px; background: linear-gradient(125deg, #714cdb, #9a4bb8); }
.packet-message { width: 254px; min-height: 105px; padding: 0; overflow: hidden; border: 0; border-radius: 7px 17px 17px; background: none; }
.packet-top { position: relative; min-height: 77px; padding: 15px 16px 12px; overflow: hidden; background: linear-gradient(135deg, #f35684, #d3246e 56%, #9b247c); }
.packet-top::after { position: absolute; inset: 0; content: ""; background: linear-gradient(113deg, transparent 25%, rgba(117,255,235,.2) 43%, rgba(255,255,255,.3) 48%, rgba(255,233,160,.2) 54%, transparent 75%); transform: translateX(-110%); animation: packet-glint 4s linear infinite; }
.packet-top strong, .packet-top span { position: relative; z-index: 1; display: block; }
.packet-top strong { margin-bottom: 4px; font-size: 15px; }
.packet-top span { font-size: 12px; color: #ffe8ee; }
.packet-bottom { display: flex; align-items: center; justify-content: space-between; padding: 8px 13px; background: #fff6f8; color: #a33b5d; font-family: "DM Mono", monospace; font-size: 9px; letter-spacing: .04em; }
.packet-dot { width: 6px; height: 6px; border-radius: 10px; background: #f15886; }
.packet-claims { display:block; padding:9px 12px 10px; border-top:1px solid rgba(171,48,35,.13); background:#fffaf4; color:#9b5147; text-align:left; }.packet-claims>b { display:block; margin-bottom:6px; color:#b3382d; font-size:10px; font-weight:800; }.packet-claims>i { display:flex; align-items:center; gap:5px; margin-top:4px; font-style:normal; font-size:10px; }.packet-claims>i em { display:grid; place-items:center; width:17px; height:17px; border-radius:6px; color:#fff7e4; font-size:9px; font-style:normal; }.packet-claims>i span { flex:1; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }.packet-claims>i strong { color:#c7352b; font-family:"DM Mono",monospace; font-size:10px; }
.packet-message.claimed { filter: saturate(.35); opacity: .75; }
.composer { display: flex; align-items: center; gap: 16px; min-height: 93px; padding: 17px clamp(25px, 4vw, 58px); border-top: 1px solid var(--line); }
.packet-trigger { display: flex; align-items: center; gap: 9px; padding: 7px 14px 7px 7px; border: 1px solid rgba(255,120,182,.4); border-radius: 22px; background: rgba(255,61,148,.1); color: #ffe4f2; font-size: 13px; font-weight: 600; transition: .25s; }
.packet-trigger:hover { transform: translateY(-2px); background: rgba(255,61,148,.25); box-shadow: 0 10px 30px rgba(245,45,142,.2); }
.packet-trigger-icon { display: grid; place-items: center; width: 27px; height: 27px; border-radius: 50%; background: linear-gradient(135deg, #ff6eae, #bb1d73); font-family: "DM Mono"; font-size: 15px; }
.composer-hint { margin-right: auto; color: #716b88; font-size: 11px; }
.gyro-button { border: 0; background: transparent; color: #9e90dc; font-size: 11px; text-decoration: underline; text-underline-offset: 4px; }

.right-stage { position: relative; overflow: hidden; padding: clamp(31px,5vw,70px); border-left: 1px solid var(--line); background: radial-gradient(circle at 80% 70%, rgba(211,48,190,.28), transparent 35%), radial-gradient(circle at 20% 15%, rgba(86,127,255,.22), transparent 35%); }
.stage-copy { position: relative; z-index: 1; }
.stage-copy h2 { margin: 12px 0 17px; font-family: Unbounded, sans-serif; font-size: clamp(35px,4vw,58px); line-height: 1.1; letter-spacing: -.08em; }
.stage-copy p { color: #b6aec6; font-size: 12px; line-height: 1.8; }
.stage-card { --rx: 0deg; --ry: 0deg; position: absolute; z-index: 2; right: max(8%, 26px); bottom: 12%; width: min(275px, 70%); aspect-ratio: .75; overflow: hidden; border: 1px solid rgba(255,255,255,.55); border-radius: 26px; background: linear-gradient(135deg, #ff719c 0%, #8b68ff 29%, #3ce4e7 53%, #ff66bc 75%, #ffd66e 100%); box-shadow: -16px 24px 55px rgba(0,0,0,.34), 0 0 55px rgba(141,95,255,.45); transform: perspective(700px) rotateX(var(--rx)) rotateY(var(--ry)) rotateZ(-9deg); transition: transform .13s ease-out; }
.card-shine { position: absolute; z-index: 2; inset: -40%; pointer-events: none; opacity: .92; background: linear-gradient(112deg, transparent 37%, rgba(255,255,255,.8) 46%, rgba(255,255,255,.08) 52%, transparent 60%); transform: translateX(var(--shine-x, -20%)) rotate(15deg); mix-blend-mode: overlay; }
.card-grid { position: absolute; inset: 0; opacity: .45; background-image: linear-gradient(rgba(255,255,255,.2) 1px,transparent 1px), linear-gradient(90deg,rgba(255,255,255,.2) 1px,transparent 1px); background-size: 18px 18px; mask-image: radial-gradient(circle at 50% 50%, black, transparent 80%); }
.stage-card-content { position: absolute; inset: 0; z-index: 3; display: flex; flex-direction: column; justify-content: flex-end; padding: 24px; color: #1c123e; text-shadow: 0 1px rgba(255,255,255,.3); }
.stage-card-content span, .stage-card-content em { font-family: "DM Mono"; font-size: 10px; font-style: normal; letter-spacing: .12em; }
.stage-card-content strong { margin: 8px 0 auto; font-family: Unbounded, sans-serif; font-size: 29px; letter-spacing: -.09em; }.stage-card-content em { opacity: .7; }
.card-star { position: absolute; z-index: 4; color: #fff; text-shadow: 0 0 10px #fff; }.star-a { top: 20px; right: 24px; font-size: 31px; }.star-b { top: 78px; left: 22px; font-size: 17px; }
.orb { position: absolute; width: 220px; aspect-ratio: 1; border-radius: 50%; filter: blur(7px); opacity: .65; }.orb-one { top: 30%; right: -80px; background: #de3db7; }.orb-two { right: 14%; bottom: -80px; background: #3d80ee; }

dialog { color: var(--ink); border: 0; background: transparent; }.send-dialog::backdrop, .open-dialog::backdrop { background: rgba(3,2,12,.72); backdrop-filter: blur(10px); }.send-dialog { width: min(410px, calc(100% - 30px)); padding: 0; border-radius: 25px; background: #16112c; box-shadow: 0 22px 70px #000; }.send-dialog form { position: relative; padding: 34px; }.dialog-close { position: absolute; top: 16px; right: 17px; width: 31px; height: 31px; border: 0; border-radius: 50%; background: rgba(255,255,255,.08); color: #d9d2ea; font-size: 24px; line-height: 1; }.send-dialog h2 { margin: 9px 0 26px; font-size: 26px; }.amount-field { display: flex; align-items: baseline; padding: 10px 3px; border-bottom: 1px solid #544570; color: #efc2ff; font-family: Unbounded; font-size: 25px; }.amount-field input { width: 100%; border: 0; outline: 0; background: transparent; color: #fff; font-family: Unbounded; font-size: 29px; }.message-field { display: block; margin: 23px 0; }.message-field span { display: block; margin-bottom: 8px; color: #9991ae; font-size: 12px; }.message-field input { width: 100%; padding: 11px 0; border: 0; border-bottom: 1px solid #544570; outline: 0; background: transparent; color: #fff; font-size: 14px; }.packet-count { display: flex; justify-content: space-between; padding: 15px 0; color: #c4bdd4; font-size: 13px; }.packet-count input { width: 34px; border: 0; outline: 0; background: transparent; color: #fff; text-align: right; }.send-submit, .open-button { width: 100%; padding: 14px; border: 0; border-radius: 13px; background: linear-gradient(100deg, #ff5c9f, #a663ff); color: white; font-weight: 800; box-shadow: 0 10px 28px rgba(193,75,255,.35); }
.open-dialog { width: min(390px, calc(100% - 30px)); padding: 0; }.open-panel { position: relative; padding: 45px 19px 23px; border: 1px solid rgba(255,255,255,.14); border-radius: 29px; background: radial-gradient(circle at top, #30205b, #120e24 64%); text-align: center; }.open-card { --rx: 0deg; --ry: 0deg; position: relative; width: 220px; aspect-ratio: .75; margin: 0 auto 20px; overflow: hidden; border: 1px solid rgba(255,255,255,.6); border-radius: 28px; background: linear-gradient(135deg, #ff729a, #945bff 33%, #42e4d2 62%, #f7c95e); box-shadow: 0 15px 33px rgba(0,0,0,.34), 0 0 40px #8c58ff; transform: perspective(600px) rotateX(var(--rx)) rotateY(var(--ry)); transition: transform .2s, scale .25s; }.open-card-front, .open-card-back { position: absolute; inset: 0; z-index: 3; display: flex; flex-direction: column; align-items: center; justify-content: center; padding: 25px; color: #2b1246; }.open-card-front .seal { display: grid; place-items: center; width: 64px; height: 64px; margin-bottom: 19px; border: 2px solid rgba(63,13,75,.7); border-radius: 50%; font-size: 30px; font-weight: 900; }.open-card-front strong { font-size: 17px; }.open-card-front small { margin-top: 8px; font-size: 11px; }.open-card-front i { position: absolute; bottom: 17px; font-size: 10px; font-style: normal; opacity: .7; }.open-card-back { opacity: 0; transform: scale(.8); }.open-card.opened .open-card-front { opacity: 0; transform: scale(1.2); }.open-card.opened .open-card-back { opacity: 1; transform: scale(1); transition: .4s .1s; }.open-card-back span { font-family: "DM Mono"; font-size: 10px; letter-spacing: .16em; }.open-card-back strong { margin: 10px 0; font-family: Unbounded; font-size: 27px; letter-spacing: -.09em; }.open-card-back small { font-size: 12px; }.open-panel > p { margin: 0 0 18px; color: #aaa1bd; font-size: 11px; }.open-button { width: 72px; height: 72px; padding: 0; border-radius: 50%; font-size: 25px; }
.operator-dialog { width: min(780px, calc(100% - 30px)); max-height: min(760px, calc(100dvh - 30px)); padding: 0; overflow: hidden; border: 1px solid rgba(255,255,255,.15); border-radius: 25px; background: #121025; box-shadow: 0 30px 100px rgba(0,0,0,.65); }.operator-panel { position: relative; max-height: inherit; overflow: auto; padding: 34px; }.operator-header { display: flex; align-items: flex-start; justify-content: space-between; padding-right: 45px; }.operator-header h2 { margin: 8px 0 5px; font-size: 25px; letter-spacing: -.04em; }.operator-header p { margin: 0; color: #9d96b3; font-size: 12px; }.live-badge { display: flex; align-items: center; gap: 7px; padding: 8px 10px; border: 1px solid rgba(79,255,207,.2); border-radius: 30px; background: rgba(79,255,207,.06); color: #85f7d7; font-size: 11px; white-space: nowrap; }.live-badge i { width: 7px; height: 7px; border-radius: 50%; background: #58ffd0; box-shadow: 0 0 10px #58ffd0; }.operator-summary { display: flex; align-items: center; justify-content: space-between; margin: 28px 0 23px; padding: 16px 18px; border: 1px solid rgba(255,255,255,.09); border-radius: 14px; background: linear-gradient(100deg, rgba(110,70,180,.18), rgba(43,196,180,.08)); }.operator-summary div span { display: block; margin-bottom: 4px; color: #9c95b0; font-size: 11px; }.operator-summary div strong { font-size: 16px; }.switch-row { display: flex; align-items: center; gap: 9px; color: #d8d2e7; font-size: 12px; }.switch-row input, .member-enabled { position: absolute; opacity: 0; }.switch-row b { position: relative; width: 36px; height: 20px; border-radius: 18px; background: #4a415f; transition: .2s; }.switch-row b::after { position: absolute; top: 3px; left: 3px; width: 14px; height: 14px; content: ""; border-radius: 50%; background: #d8d2e7; transition: .2s; }.switch-row input:checked + b { background: #43dcb7; }.switch-row input:checked + b::after { left: 19px; background: white; }.operator-caption { display: flex; justify-content: space-between; margin: 19px 0 11px; color: #b5accd; font-size: 12px; font-weight: 700; }.operator-caption small { color: #78718d; font-weight: 400; }.actor-row { display: flex; align-items: center; gap: 17px; padding: 13px 15px; border: 1px solid rgba(255,255,255,.08); border-radius: 12px; background: rgba(255,255,255,.035); }.actor-row label { display: flex; align-items: center; gap: 10px; color: #cfc7df; font-size: 12px; white-space: nowrap; }.actor-row select, .rule-select { padding: 7px 25px 7px 9px; border: 1px solid #514768; border-radius: 7px; outline: 0; background: #211b37; color: #f2effa; font-size: 12px; }.actor-row > span { color: #827a97; font-size: 11px; }.member-caption { margin-top: 28px; }.member-head, .member-rule { display: grid; grid-template-columns: 1.3fr .72fr .75fr 1.35fr .75fr; align-items: center; gap: 10px; }.member-head { padding: 0 12px 8px; color: #756e87; font-size: 10px; }.member-rule { min-height: 58px; padding: 9px 12px; border-top: 1px solid rgba(255,255,255,.07); background: rgba(255,255,255,.02); }.member-rule:first-child { border-radius: 12px 12px 0 0; }.member-rule:last-child { border-radius: 0 0 12px 12px; }.member-identity { display: flex; align-items: center; gap: 8px; font-size: 12px; font-weight: 700; }.mini-avatar { display: grid; place-items: center; width: 27px; height: 27px; border-radius: 9px; font-size: 11px; }.enabled-label { position: relative; display: inline-grid; place-items: center; width: 35px; height: 25px; border: 1px solid #4d4662; border-radius: 7px; color: #7c748d; font-size: 10px; cursor: pointer; }.member-enabled:checked + .enabled-label { border-color: rgba(81,254,199,.56); background: rgba(81,254,199,.1); color: #88f4d5; }.member-limit, .rule-value { width: 58px; padding: 7px; border: 1px solid #514768; border-radius: 7px; outline: 0; background: #211b37; color: #f2effa; font-size: 12px; }.rule-value { width: 64px; }.operator-footer { display: flex; align-items: center; justify-content: space-between; margin-top: 20px; }.operator-footer p { max-width: 470px; margin: 0; color: #847c99; font-size: 11px; line-height: 1.6; }.reset-rules { padding: 8px 11px; border: 1px solid #5d5377; border-radius: 8px; background: transparent; color: #d6cce9; font-size: 11px; }
@keyframes message-in { from { opacity: 0; transform: translateY(9px); } to { opacity: 1; transform: none; } } @keyframes packet-glint { 0%,30% { transform: translateX(-120%); } 64%,100% { transform: translateX(160%); } }
@media (max-width: 900px) { .app-shell { grid-template-columns: 72px minmax(0,1fr); }.right-stage { display: none; }.group-rail { padding-top: 16px; }.group-avatar,.my-avatar { width: 40px;height:40px; }.chat-header { min-height: 104px; }.composer { min-height: 80px; } }
@media (max-width: 560px) { body { overflow: auto; }.app-shell { grid-template-columns: 1fr; height: 100dvh; }.group-rail { position: fixed; z-index: 4; right: 14px; bottom: 15px; flex-direction: row; gap: 8px; width: calc(100% - 28px); padding: 8px; overflow: auto; border: 1px solid var(--line); border-radius: 18px; background: rgba(16,12,37,.83); backdrop-filter: blur(18px); }.brand-mark,.add-group,.my-avatar { display: none; }.group-list { flex: initial; flex-direction: row; overflow: visible; padding: 0; }.group-avatar { width: 36px;height:36px;border-radius:12px;font-size:14px; }.chat-header { min-height: 110px; padding: 19px 21px; }.header-actions { gap: 6px; }.operator-button { padding: 7px 8px; font-size: 10px; }.operator-button span { display: none; }.message-list { padding: 27px 21px 100px; gap: 20px; }.composer { position: fixed; z-index: 3; right: 12px; bottom: 72px; left: 12px; min-height: 0; padding: 8px 9px; border: 1px solid var(--line); border-radius: 18px; background: rgba(16,12,37,.82); backdrop-filter: blur(16px); }.composer-hint,.gyro-button { display: none; }.packet-trigger { width: 100%; justify-content: center; }.operator-panel { padding: 26px 17px 19px; }.operator-header { display: block; }.live-badge { display: inline-flex; margin-top: 13px; }.operator-summary { margin: 19px 0; }.actor-row { display: block; }.actor-row label { justify-content: space-between; }.actor-row > span { display: block; margin-top: 10px; }.member-caption small { display: none; }.member-head, .member-rule { grid-template-columns: 1.1fr .57fr .63fr 1fr .62fr; gap: 5px; }.member-head { padding: 0 6px 7px; font-size: 9px; }.member-rule { padding: 8px 6px; }.member-identity { gap: 5px; font-size: 11px; }.mini-avatar { width: 23px; height: 23px; border-radius: 7px; }.rule-select { width: 100%; padding: 7px 3px; font-size: 10px; }.member-limit, .rule-value { width: 100%; padding: 7px 3px; text-align: center; }.operator-footer { display: block; }.operator-footer p { margin-bottom: 13px; }.reset-rules { width: 100%; } }

/* 火热红金：保留极简留白，强化中国电商节日气氛 */
:root { --ink:#531413; --muted:#9d7468; --line:#f1d9cb; --paper:#fffaf5; --violet:#dc2626; --pink:#ef4444; --mint:#f59e0b; background:#fff5ec; }
body { background: radial-gradient(circle at 82% 6%, #ffd7a9 0, transparent 24%), radial-gradient(circle at 18% 88%, #ffd9c3 0, transparent 28%), #fff7f0; color:var(--ink); }
.noise { opacity:.05; mix-blend-mode:multiply; }.app-shell { border-color:#f0d9cd; background:#fffaf6; }.group-rail { border-color:#f0d9cd; background:#fffaf7; }.brand-mark { color:#fff9e8; background:linear-gradient(135deg,#ffb21a,#db1b24 64%); box-shadow:0 8px 20px rgba(212,35,35,.2); }.group-avatar { box-shadow:inset 0 0 0 3px rgba(255,255,255,.75); }.group-avatar:hover,.group-avatar.active { box-shadow:0 0 0 2px #dd2628,0 6px 16px var(--glow,#ffc24a); }.my-avatar { color:#a41f20; background:#fff1dc; box-shadow:inset 0 0 0 4px #f4d7b4; }.add-group { color:#cf3a29; border-color:#e9b5a1; }
.chat-panel { background:#fffdf9; }.chat-header,.composer { border-color:#f0ddd2; }.eyebrow,.stage-kicker,.dialog-label { color:#be5b46; }.chat-header p { color:#a67968; }.icon-button { color:#d52f2e; border-color:#f0d9ca; background:#fff6ec; }.operator-button { color:#b72324; border-color:#f0c8b3; background:#fff5e9; }.operator-button span { background:#e63a2e; color:#fff7e8; }
.message-name { color:#b6897b; }.message-bubble { border-color:#f5e5dc; background:#fff8f2; color:#63302c; }.mine .message-bubble { background:linear-gradient(125deg,#e72628,#f25429); box-shadow:0 6px 14px rgba(227,38,40,.12); color:#fffaf3; }.packet-top { background:linear-gradient(135deg,#ff6c2e,#df2025 52%,#b7131e); }.packet-top::after { background:linear-gradient(113deg,transparent 25%,rgba(255,235,162,.46) 43%,rgba(255,255,255,.5) 48%,rgba(255,232,143,.4) 54%,transparent 75%); }.packet-bottom { background:#fff7e8; color:#b9392e; }.packet-dot { background:#ef5b26; }.packet-trigger { border-color:#f4c59d; background:#fff6e8; color:#b52525; }.packet-trigger-icon { background:linear-gradient(135deg,#ffb11c,#db2024); }.composer-hint { color:#c19683; }.gyro-button { color:#c84931; }
.right-stage { border-color:#f0d9cd; background:radial-gradient(circle at 79% 70%,rgba(255,193,71,.78),transparent 28%),radial-gradient(circle at 12% 14%,rgba(255,112,62,.42),transparent 38%),linear-gradient(155deg,#df1d27,#be131e 68%,#95101d); }.stage-kicker,.stage-copy p { color:#ffe5bd; }.stage-copy h2 { color:#fff9ed; text-shadow:0 3px 0 rgba(139,12,18,.2); }.stage-card { background:linear-gradient(135deg,#ffd46a 0%,#f45525 28%,#d71823 56%,#ffb31d 100%); box-shadow:-16px 24px 55px rgba(85,7,10,.28),0 0 42px rgba(255,207,93,.52); }.stage-card-content { color:#711415; }.orb-one { background:#ffb322; }.orb-two { background:#ed4325; }
.send-dialog,.account-dialog { background:#fffaf6; box-shadow:0 22px 70px rgba(107,18,18,.22); }.send-dialog h2,.account-dialog h2 { color:#6b1c1b; }.dialog-close { background:#fff0e6; color:#b92d29; }.amount-field { border-color:#edcfc1; color:#c82c27; }.amount-field input,.message-field input { color:#68201e; }.message-field input { border-color:#edcfc1; }.message-field span,.packet-count { color:#997365; }.send-submit,.open-button { background:linear-gradient(100deg,#ed302b,#f06c28); box-shadow:0 10px 28px rgba(214,45,35,.28); }
.account-dialog { width:min(410px,calc(100% - 30px)); padding:0; border-radius:25px; }.account-dialog form { position:relative; padding:30px 25px 24px; }.account-dialog form>label { display:block; margin:14px 0; }.account-dialog form>label span { display:block; margin-bottom:7px; color:#906356; font-size:11px; }.account-dialog form>label span small { margin-left:5px; color:#b28a7c; font-size:10px; font-weight:400; }.account-dialog input { width:100%; padding:12px 13px; border:1px solid #efd4c2; border-radius:10px; outline:none; background:#fffaf4; color:#60201e; font-size:13px; }.account-dialog h2 { margin:9px 0 5px; font-size:25px; }.account-tip { margin:0 0 18px; color:#9b6d5e; font-size:11px; }
.qr-setting { margin:17px 0 8px; padding:12px; border:1px solid #f0d8c8; border-radius:12px; background:#fffdf9; }.qr-setting-head { display:flex; align-items:center; justify-content:space-between; color:#7b4038; font-size:12px; font-weight:700; }.qr-setting-head small { color:#a98274; font-size:10px; font-weight:400; }.qr-setting-body { display:flex; align-items:center; gap:9px; margin-top:10px; }.payment-qr-preview { width:72px; height:72px; object-fit:contain; border:1px solid #efd4c2; border-radius:8px; background:#fff; }.qr-file-label { display:inline-flex!important; align-items:center; margin:0!important; }.qr-file-label input { display:none; }.qr-file-label span,.clear-qr-button { padding:8px 10px; border:1px solid #e6b89f; border-radius:8px; background:#fff1df; color:#bd3a2b; font-size:11px; font-weight:700; cursor:pointer; }.clear-qr-button { margin-left:auto; }.clear-qr-button:disabled { cursor:default; opacity:.45; }
.profile-dialog { width:min(360px,calc(100% - 30px)); padding:0; border-radius:24px; }.profile-panel { position:relative; padding:30px 24px 25px; border:1px solid #efc5af; border-radius:24px; background:#fffaf6; text-align:center; box-shadow:0 30px 90px rgba(117,24,20,.25); }.profile-avatar { display:grid; place-items:center; width:54px; height:54px; margin:3px auto 10px; border-radius:15px; color:#fff7e8; font-size:20px; font-weight:800; box-shadow:inset 0 0 0 2px rgba(255,255,255,.5); }.profile-panel h2 { margin:0; color:#681b1b; font-size:22px; }.profile-status { margin:7px 0 17px; color:#9d7365; font-size:11px; }.profile-qr { display:block; width:min(250px,100%); aspect-ratio:1; margin:0 auto; object-fit:contain; border:1px solid #efd4c2; border-radius:12px; background:#fff; }.profile-empty { padding:34px 12px; border:1px dashed #e7c4b2; border-radius:12px; color:#a98274; font-size:12px; }.profile-trigger,.profile-name-trigger { cursor:pointer; }.profile-trigger:hover { transform:scale(1.06); }.profile-name-trigger:hover { color:#c7352b; }
.open-panel { border-color:#f5c8aa; background:radial-gradient(circle at top,#fff2c9,#fffaf4 67%); }.open-card { background:linear-gradient(135deg,#ffd867,#ef4b27 34%,#cf1724 62%,#ffb92c); box-shadow:0 15px 33px rgba(150,27,20,.25),0 0 38px #f7b53b; }.open-card-front,.open-card-back { color:#6e1717; }.open-panel > p { color:#9d7262; }
.operator-dialog { border-color:#efb99f; background:#fffaf6; box-shadow:0 30px 100px rgba(117,24,20,.27); }.operator-header h2 { color:#661b1b; }.operator-header p { color:#9c7568; }.live-badge { border-color:#f4c78b; background:#fff6dd; color:#b65021; }.live-badge i { background:#e64727; box-shadow:0 0 10px #ff9b37; }.operator-summary { border-color:#f0d7c7; background:linear-gradient(100deg,#fff1df,#fff9ee); }.operator-summary div span { color:#a47a6a; }.switch-row { color:#8e6356; }.switch-row b { background:#dac5ba; }.switch-row input:checked + b { background:#e53d2d; }.operator-caption { color:#8e5548; }.operator-caption small,.actor-row > span { color:#a98274; }.actor-row { border-color:#f1dcd0; background:#fffdf9; }.actor-row label { color:#7b4038; }.actor-row select,.rule-select,.member-limit,.rule-value { border-color:#ebcfc0; background:#fff8f0; color:#7c342e; }.member-head { color:#ad8273; }.member-rule { border-color:#f3e2d8; background:#fffdf9; }.enabled-label { border-color:#eccbbb; color:#a47a6c; }.member-enabled:checked + .enabled-label { border-color:#ed8b61; background:#fff0df; color:#c54329; }.operator-footer p { color:#a27b6e; }.reset-rules { border-color:#e5bca9; color:#b34030; background:#fff7ed; }
.operator-header-tools { display:flex; align-items:center; gap:8px; }.create-group-button { padding:8px 10px; border:1px solid #e6ab8a; border-radius:8px; background:#e9422c; color:#fffdf2; font-size:11px; font-weight:800; box-shadow:0 4px 10px rgba(202,52,35,.14); }
@media (max-width:560px) { .group-rail,.composer { border-color:#f0d9cd; background:rgba(255,250,246,.92); } }

/* 镭射材质层：红金基底上叠加偏振虹彩、扫描光带与金属压纹 */
.holographic-card { isolation:isolate; transform-style:preserve-3d; will-change:transform; }
.holographic-card::before { position:absolute; z-index:1; inset:0; content:""; border-radius:inherit; pointer-events:none; background:conic-gradient(from 205deg at 50% 46%,#ff1f49 0deg,#ffbf2f 40deg,#6bfff0 82deg,#8f6dff 126deg,#ff65c3 172deg,#ff4c26 222deg,#ffe470 272deg,#ff1f49 360deg); background-size:180% 180%; mix-blend-mode:color-dodge; opacity:.68; animation:prism-spin 8s linear infinite; }
.holographic-card::after { position:absolute; z-index:9; inset:5px; content:""; border:1px solid rgba(255,255,255,.68); border-radius:calc(inherit - 5px); box-shadow:inset 0 0 0 1px rgba(111,10,8,.22),inset 0 0 22px rgba(255,252,205,.58),0 0 0 1px rgba(255,222,128,.35); pointer-events:none; }
.card-spectrum { position:absolute; z-index:2; inset:-35%; pointer-events:none; background:repeating-linear-gradient(115deg,rgba(255,255,255,0) 0 11px,rgba(255,255,255,.22) 13px,rgba(121,255,240,.22) 15px,rgba(255,80,186,.24) 18px,rgba(255,255,255,0) 25px); mix-blend-mode:overlay; transform:translate3d(-18%,0,25px) rotate(-12deg); animation:foil-flow 5s ease-in-out infinite alternate; }
.card-shine { z-index:4; inset:-55%; opacity:1; background:linear-gradient(105deg,transparent 35%,rgba(255,239,177,.04) 41%,rgba(255,255,255,.94) 48%,rgba(112,255,247,.42) 52%,rgba(255,72,175,.32) 56%,transparent 65%); filter:blur(.2px); mix-blend-mode:screen; animation:shine-sweep 4.6s cubic-bezier(.45,.05,.15,.95) infinite; }
.card-grid { z-index:3; opacity:.75; background-image:linear-gradient(120deg,rgba(255,244,181,.42) 1px,transparent 1px),linear-gradient(30deg,rgba(100,255,238,.26) 1px,transparent 1px); background-size:13px 13px; mix-blend-mode:soft-light; mask-image:linear-gradient(145deg,transparent,black 20%,black 76%,transparent); animation:grid-glide 6s linear infinite; }
.card-scan { position:absolute; z-index:5; top:-18%; left:-10%; width:120%; height:18%; pointer-events:none; background:linear-gradient(180deg,transparent,rgba(255,255,255,.16),rgba(255,241,167,.84),rgba(255,255,255,.15),transparent); filter:blur(1px); mix-blend-mode:screen; transform:rotate(-12deg); animation:scan-drop 3.8s ease-in-out infinite; }
.card-spark { position:absolute; z-index:8; color:#fffde1; text-shadow:0 0 4px #fff,0 0 14px #ffe67c,0 0 24px #ff45aa; mix-blend-mode:screen; pointer-events:none; animation:spark-pulse 1.8s ease-in-out infinite alternate; }.spark-one { top:17%; left:15%; font-size:13px; }.spark-two { right:16%; bottom:18%; font-size:19px; animation-delay:-.7s; }
.stage-card { border-color:rgba(255,240,165,.9); background:linear-gradient(135deg,#80101d,#ed2b23 26%,#ffb01e 48%,#be1320 70%,#f36b24); box-shadow:-18px 29px 58px rgba(82,8,12,.4),0 0 18px rgba(255,250,183,.92),0 0 64px rgba(255,102,35,.58); }.open-card { border-color:rgba(255,242,178,.94); background:linear-gradient(135deg,#9e0c1c,#f33b25 30%,#ffbd25 53%,#c61020 77%,#f47c26); box-shadow:0 19px 44px rgba(141,19,16,.33),0 0 19px rgba(255,244,159,.9),0 0 62px rgba(250,86,30,.46); }
.stage-card-content { z-index:6; color:#671113; text-shadow:0 1px rgba(255,248,192,.9),0 0 12px rgba(255,233,132,.42); }.card-star { z-index:8; text-shadow:0 0 7px #fff,0 0 20px #ffe477,0 0 34px #ff4f9e; }.open-card-front,.open-card-back { z-index:6; text-shadow:0 1px rgba(255,245,185,.72); }
@keyframes prism-spin { to { background-position:180% 180%; filter:hue-rotate(26deg); } }
@keyframes foil-flow { 0% { transform:translate3d(-24%,-8%,25px) rotate(-12deg); } 100% { transform:translate3d(24%,9%,25px) rotate(-12deg); } }
@keyframes shine-sweep { 0%,18% { transform:translateX(-76%) rotate(15deg); } 58%,100% { transform:translateX(82%) rotate(15deg); } }
@keyframes grid-glide { to { background-position:39px 29px,-34px 35px; } }
@keyframes scan-drop { 0%,15% { transform:translateY(-90%) rotate(-12deg); opacity:0; } 30% { opacity:.92; } 73%,100% { transform:translateY(650%) rotate(-12deg); opacity:0; } }
@keyframes spark-pulse { from { transform:scale(.65) rotate(0); opacity:.25; } to { transform:scale(1.35) rotate(24deg); opacity:1; } }
@media (prefers-reduced-motion: reduce) { .holographic-card::before,.card-spectrum,.card-shine,.card-grid,.card-scan,.card-spark { animation:none; } }

/* 登录入口 */
.locked { visibility:hidden; pointer-events:none; }.auth-gate { position:fixed; z-index:20; inset:0; display:grid; place-items:center; overflow:hidden; background:radial-gradient(circle at 50% 36%,#fff1cb 0,#fff8ef 27%,#ffe8d8 55%,#f8c5a5 100%); }.auth-gate.hidden { display:none; }.auth-card { position:relative; z-index:2; width:min(410px,calc(100% - 32px)); padding:38px 35px 29px; border:1px solid rgba(184,42,27,.16); border-radius:26px; background:rgba(255,252,246,.9); box-shadow:0 26px 70px rgba(138,26,15,.2),inset 0 0 50px rgba(255,255,255,.65); backdrop-filter:blur(15px); }.auth-logo { display:grid; place-items:center; width:46px; height:46px; margin-bottom:22px; border-radius:15px; background:linear-gradient(135deg,#ffba1b,#d92325 65%); color:#fff7dd; font-family:Unbounded,sans-serif; font-size:22px; box-shadow:0 9px 23px rgba(214,34,27,.25); }.auth-card h1 { margin:12px 0 10px; color:#681717; font-family:Unbounded,sans-serif; font-size:28px; line-height:1.35; letter-spacing:-.08em; }.auth-card h1 span { color:#d62924; }.auth-card > p { margin:0 0 23px; color:#9b6d5e; font-size:12px; }.auth-tabs { display:flex; gap:18px; margin-bottom:15px; border-bottom:1px solid #efd8c8; }.auth-tab { position:relative; padding:9px 0 12px; border:0; background:transparent; color:#ac8272; font-size:13px; }.auth-tab.active { color:#c92825; font-weight:800; }.auth-tab.active::after { position:absolute; right:0; bottom:-1px; left:0; height:2px; content:""; border-radius:3px; background:#df3029; }.auth-form label { display:block; margin:14px 0; }.auth-form label span { display:block; margin-bottom:7px; color:#906356; font-size:11px; }.auth-form input { width:100%; padding:12px 13px; border:1px solid #efd4c2; border-radius:10px; outline:none; background:#fffaf4; color:#60201e; font-size:13px; transition:.2s; }.auth-form input:focus { border-color:#e65a39; box-shadow:0 0 0 3px rgba(225,64,39,.1); }.auth-submit { width:100%; margin-top:5px; padding:13px; border:0; border-radius:11px; background:linear-gradient(100deg,#df252a,#f06a28); color:#fffdf1; font-weight:800; box-shadow:0 11px 22px rgba(214,45,35,.2); }.auth-error { min-height:16px; margin:6px 0 0; color:#c62827; font-size:11px; }.auth-note { display:block; margin-top:18px; color:#b18c7d; font-size:10px; text-align:center; }.hidden { display:none!important; }.auth-orbit { position:absolute; border:1px solid rgba(222,53,38,.18); border-radius:50%; transform:rotate(-22deg); }.orbit-left { width:62vw; height:25vw; left:-18vw; top:7vh; box-shadow:0 0 0 20px rgba(245,116,45,.035),0 0 0 48px rgba(222,53,38,.03); }.orbit-right { width:58vw; height:26vw; right:-16vw; bottom:2vh; transform:rotate(26deg); box-shadow:0 0 0 22px rgba(245,116,45,.035),0 0 0 54px rgba(222,53,38,.03); }
.auth-form label span small { margin-left:5px; color:#d84a2e; font-size:10px; font-weight:500; }.invite-input-wrap { display:flex; gap:7px; }.invite-input-wrap input { min-width:0; flex:1; }.invite-input-wrap button { flex:0 0 auto; padding:0 10px; border:1px solid #e6b89f; border-radius:10px; background:#fff1df; color:#c63c29; font-size:11px; font-weight:700; }
.scanner-dialog { width:min(420px,calc(100% - 30px)); padding:0; border:1px solid #efb99f; border-radius:24px; background:#fffaf6; box-shadow:0 28px 80px rgba(117,24,20,.28); }.scanner-panel { position:relative; padding:30px 24px 23px; text-align:center; }.scanner-panel h2 { margin:8px 0 6px; color:#681b1b; font-size:23px; }.scanner-panel p { margin:0 0 16px; color:#9d7365; font-size:11px; }.scanner-frame { position:relative; width:min(300px,100%); aspect-ratio:1; margin:0 auto 18px; overflow:hidden; border:1px solid #edc09b; border-radius:16px; background:#2a1112; box-shadow:inset 0 0 0 1px rgba(255,227,149,.22); }.scanner-frame video { width:100%; height:100%; object-fit:cover; }.scanner-frame::before,.scanner-frame::after { position:absolute; width:37px; height:37px; content:""; border:3px solid #ffd56b; }.scanner-frame::before { top:18px; left:18px; border-right:0; border-bottom:0; }.scanner-frame::after { right:18px; bottom:18px; border-top:0; border-left:0; }.scanner-frame i { position:absolute; z-index:2; top:15%; right:12%; left:12%; height:2px; background:linear-gradient(90deg,transparent,#ff3f2d,transparent); box-shadow:0 0 12px #ff3f2d; animation:scanner-line 2s ease-in-out infinite; }.scanner-retry { padding:10px 18px; border:1px solid #e9bba3; border-radius:10px; background:#fff1df; color:#bd3a2b; font-size:12px; font-weight:700; }
@keyframes scanner-line { 0%,100%{transform:translateY(0);opacity:.5}50%{transform:translateY(220px);opacity:1} }

/* 微信式手机布局：应用只渲染单列窄屏，不提供自建群入口 */
html,body { width:100%; min-width:320px; background:#ededed; }
body { overflow:hidden; }
.app-shell { display:flex; flex-direction:column; width:min(100vw,430px); height:100dvh; margin:0 auto; overflow:hidden; border-left:1px solid #d9d9d9; border-right:1px solid #d9d9d9; background:#ededed; }
.group-rail { order:0; flex:0 0 55px; flex-direction:row; align-items:center; justify-content:flex-start; gap:8px; width:100%; padding:8px 10px; overflow:hidden; border:0; border-bottom:1px solid #d5d5d5; background:#f7f7f7; }
.brand-mark { flex:0 0 32px; width:32px; height:32px; margin:0 3px 0 0; border-radius:8px; font-size:15px; box-shadow:none; }
.group-list { display:flex; flex:1; flex-direction:row; gap:7px; overflow-x:auto; overflow-y:hidden; padding:0; scrollbar-width:none; }
.group-avatar { flex:0 0 32px; width:32px; height:32px; border:0; border-radius:50%; font-size:12px; box-shadow:none; }.group-avatar.active { box-shadow:0 0 0 2px #07c160; transform:none; }.group-avatar.active::after { right:-2px; bottom:0; width:6px; height:6px; border-width:1px; background:#07c160; }.my-avatar { flex:0 0 32px; width:32px; height:32px; border-radius:50%; box-shadow:none; font-size:12px; }
.chat-panel { flex:1; min-height:0; background:#ededed; }
.chat-header { flex:0 0 62px; min-height:62px; padding:10px 13px; border:0; background:#07c160; color:#fff; }.chat-header h1 { margin:2px 0 1px; color:#fff; font-size:17px; letter-spacing:0; }.chat-header p { color:rgba(255,255,255,.76); font-size:10px; }.eyebrow { color:rgba(255,255,255,.7); font-size:8px; }.header-actions { gap:5px; }.account-button,.operator-button { padding:7px 8px; border:1px solid rgba(255,255,255,.42); border-radius:5px; background:rgba(0,0,0,.08); color:#fff; font-size:10px; }.operator-button span { display:none; }.icon-button { width:30px; height:30px; border:0; background:rgba(0,0,0,.08); color:#fff; font-size:15px; }
.message-list { gap:13px; padding:16px 12px 12px; background:#ededed; }.message { max-width:88%; gap:8px; }.message-avatar { width:34px; height:34px; border-radius:5px; font-size:12px; }.message-name { margin:0 0 3px 1px; color:#999; font-size:10px; }.message-bubble { max-width:285px; padding:9px 11px; border:0; border-radius:4px; background:#fff; color:#1f1f1f; font-size:13px; line-height:1.5; }.mine .message-bubble { background:#95ec69; color:#1f1f1f; box-shadow:none; }
.packet-message { width:250px; border-radius:4px; box-shadow:0 1px 2px rgba(0,0,0,.08); }.packet-top { min-height:74px; padding:13px; }.packet-bottom { padding:7px 11px; }.packet-claims { padding:8px 10px; }
.composer { flex:0 0 56px; min-height:56px; gap:7px; padding:9px 10px; border:0; border-top:1px solid #d7d7d7; background:#f7f7f7; }.packet-trigger { width:auto; min-width:76px; justify-content:center; padding:6px 10px 6px 6px; border:0; border-radius:5px; background:#f33b2f; color:#fff; font-size:12px; }.packet-trigger:hover { transform:none; background:#e62b24; box-shadow:none; }.packet-trigger-icon { width:23px; height:23px; background:rgba(255,255,255,.2); font-size:13px; }.composer-hint { overflow:hidden; color:#aaa; font-size:10px; text-overflow:ellipsis; white-space:nowrap; }.gyro-button { display:none; }
.right-stage { display:none; }
.send-dialog,.open-dialog,.operator-dialog,.account-dialog { width:calc(100% - 20px); max-width:410px; }.send-dialog form { padding:27px 22px 22px; }.account-dialog form { padding:27px 22px 22px; }.operator-panel { padding:25px 16px 18px; }.open-panel { padding:37px 15px 20px; }
.operator-header-tools { margin-top:12px; }.create-group-button { padding:7px 9px; }
@media (min-width:561px) { body { display:grid; place-items:center; background:#dcdcdc; }.app-shell { height:min(860px,100dvh); border-radius:18px; box-shadow:0 15px 50px rgba(0,0,0,.18); } }
@media(max-width:560px){.auth-card{padding:31px 24px 24px}.auth-card h1{font-size:24px}.auth-orbit{opacity:.6}}

/* 克制的微信聊天模式 */
html,body{background:#ededed;color:#111}
body{font-family:-apple-system,BlinkMacSystemFont,"Helvetica Neue","PingFang SC","Microsoft YaHei",sans-serif}
.noise{display:none}
.auth-gate{background:#ededed}
.auth-orbit{display:none}
.auth-card{width:min(390px,calc(100% - 28px));padding:30px 24px 24px;border:1px solid #ddd;border-radius:8px;background:#f7f7f7;box-shadow:0 8px 28px rgba(0,0,0,.08);backdrop-filter:none}
.auth-logo{width:45px;height:45px;margin-bottom:18px;border-radius:8px;background:#07c160;color:#fff;font-family:inherit;font-size:22px;box-shadow:none}
.auth-card .eyebrow{color:#888;font-family:inherit;font-size:10px;letter-spacing:.06em}
.auth-card h1{margin:10px 0 8px;color:#111;font-family:inherit;font-size:25px;letter-spacing:0}.auth-card h1 span{color:#07c160}.auth-card>p{margin-bottom:20px;color:#888}
.auth-tabs{border-bottom-color:#ddd}.auth-tab{color:#888}.auth-tab.active{color:#07c160}.auth-tab.active::after{background:#07c160}
.auth-form label span{color:#666}.auth-form input{border-color:#ddd;border-radius:4px;background:#fff;color:#111}.auth-form input:focus{border-color:#07c160;box-shadow:0 0 0 2px rgba(7,193,96,.12)}
.auth-submit{border-radius:4px;background:#07c160;box-shadow:none}.auth-note{color:#999}.auth-form label span small{color:#999}.invite-input-wrap button{border-color:#d7d7d7;border-radius:4px;background:#fff;color:#555}
.app-shell{border-color:#d6d6d6;background:#ededed;box-shadow:none}
.group-rail{flex-basis:52px;padding:8px 10px;border-bottom:1px solid #d6d6d6;background:#f7f7f7}
.brand-mark{width:32px;height:32px;border-radius:6px;background:#07c160;color:#fff;box-shadow:none;font-family:inherit;font-size:16px}
.group-list{gap:8px}.group-avatar{width:32px;height:32px;border-radius:5px;background:var(--avatar,#c8c8c8);color:#fff;font-weight:500}.group-avatar.active{box-shadow:0 0 0 2px #07c160}.group-avatar.active::after{display:none}
.chat-header{background:#ededed;color:#111;border-bottom:1px solid #d6d6d6}.chat-header .eyebrow{display:none}.chat-header h1{color:#111;font-weight:600}.chat-header p{color:#888}.account-button{border:0;background:transparent;color:#111}.icon-button{background:transparent;color:#111}
.message-list{background:#ededed}.message-name{color:#888}.message-bubble{border:1px solid #e4e4e4;border-radius:4px;background:#fff;color:#111}.mine .message-bubble{background:#95ec69;color:#111}
.packet-message{border-radius:4px}.packet-top{background:#fa5151}.packet-top::after{display:none}.packet-bottom{background:#fff;color:#999}.packet-dot{background:#fa5151}.packet-claims{background:#fff;border-top-color:#eee;color:#666}.packet-claims>b{color:#555}.packet-claims>i strong{color:#e64343}
.composer{border-top:1px solid #d6d6d6;background:#f7f7f7}.packet-trigger{border-radius:4px;background:#fa5151}.packet-trigger:hover{background:#e64343}.packet-trigger-icon{background:rgba(255,255,255,.2)}.composer-hint{color:#999}
.send-dialog,.open-dialog,.account-dialog,.profile-dialog{border:1px solid #ddd;background:#f7f7f7;box-shadow:0 12px 40px rgba(0,0,0,.16)}.dialog-close{background:transparent;color:#777}.send-dialog h2,.account-dialog h2,.profile-panel h2{color:#111}.amount-field{border-color:#ddd;color:#e64343}.amount-field input,.message-field input{color:#111}.message-field input{border-color:#ddd}.send-submit,.open-button{background:#07c160;box-shadow:none;border-radius:4px}
.open-panel,.profile-panel{border:0;border-radius:8px;background:#f7f7f7}.open-card{border:0;border-radius:5px;background:#fa5151;box-shadow:none}.open-card-front,.open-card-back{color:#fff;text-shadow:none}.open-card-front .seal{border-color:rgba(255,255,255,.75)}.open-panel>p,.profile-status{color:#888}
.holographic-card::before,.holographic-card::after,.card-spectrum,.card-shine,.card-grid,.card-scan,.card-spark,.card-star{display:none!important}.stage-card,.open-card{transform:none!important;transition:none}
.scanner-dialog{border-color:#ddd;border-radius:8px;background:#f7f7f7;box-shadow:0 12px 40px rgba(0,0,0,.16)}.scanner-panel h2{color:#111}.scanner-panel p{color:#888}.scanner-frame{border-color:#ccc;border-radius:4px}.scanner-frame::before,.scanner-frame::after{border-color:#07c160}.scanner-frame i{background:#07c160;box-shadow:none}.scanner-retry{border-color:#d7d7d7;border-radius:4px;background:#fff;color:#555}
.qr-setting{border-color:#ddd;background:#fff}.qr-setting-head,.account-dialog form>label span{color:#555}.account-dialog form>label span small,.qr-setting-head small{color:#999}.account-dialog input{border-color:#ddd;border-radius:4px;background:#fff;color:#111}.qr-file-label span,.clear-qr-button{border-color:#d7d7d7;border-radius:4px;background:#fff;color:#555}.profile-avatar{border-radius:6px;box-shadow:none}

/* 登录后的消息首页：先看到会话列表，点击会话再进入群聊 */
#appContent{display:block;width:100%;height:100dvh}
.home-view{display:flex;flex-direction:column;width:min(100vw,430px);height:100dvh;margin:0 auto;overflow:hidden;background:#f7f7f7;border-left:1px solid #d6d6d6;border-right:1px solid #d6d6d6}
.home-header{display:flex;align-items:center;justify-content:space-between;min-height:62px;padding:10px 14px;background:#ededed;border-bottom:1px solid #d6d6d6}
.home-header h1{margin:0;color:#111;font-size:18px;font-weight:600;letter-spacing:0}
.home-header p{margin:3px 0 0;color:#999;font-size:10px}
.home-actions{display:flex;align-items:center;gap:8px}
.home-icon-button,.back-home-button{width:32px;height:32px;padding:0;border:0;border-radius:4px;background:transparent;color:#222;font-size:13px}
.home-icon-button{font-weight:600}.home-icon-button:last-child{font-size:23px;font-weight:400;line-height:1}
.home-icon-button:active,.back-home-button:active{background:#ddd}
.conversation-list{flex:1;overflow:auto;background:#fff}
.conversation-item{display:flex;align-items:center;width:100%;min-height:70px;padding:10px 12px;border:0;border-bottom:1px solid #eee;background:#fff;text-align:left}
.conversation-item:active{background:#f2f2f2}
.conversation-avatar{display:grid;place-items:center;width:46px;height:46px;margin-right:11px;border-radius:6px;color:#fff;font-size:17px;font-style:normal;font-weight:500}
.conversation-main{display:flex;flex:1;min-width:0;flex-direction:column;gap:6px}
.conversation-main strong{overflow:hidden;color:#111;font-size:14px;font-weight:500;text-overflow:ellipsis;white-space:nowrap}
.conversation-main small{overflow:hidden;color:#999;font-size:12px;text-overflow:ellipsis;white-space:nowrap}
.conversation-side{display:flex;flex-direction:column;align-items:flex-end;gap:8px;color:#aaa;font-size:10px}
.conversation-side b{display:grid;place-items:center;min-width:18px;height:18px;padding:0 4px;border-radius:10px;background:#fa5151;color:#fff;font-size:10px;font-weight:500}
.home-tabbar{display:flex;justify-content:space-around;min-height:54px;padding-top:8px;border-top:1px solid #d6d6d6;background:#f7f7f7}
.home-tab{min-width:56px;border:0;background:transparent;color:#888;font-size:11px}.home-tab.active{color:#07c160}.home-tab:disabled{cursor:default}
.back-home-button{margin-right:2px;font-size:25px;font-weight:300}

/* Keep the visibility utility authoritative after all responsive rules. */
.hidden{display:none!important}

/* 首页 Tab 与图片头像 */
.app-shell{display:flex;width:min(100vw,430px);height:100dvh;margin:0 auto;overflow:hidden;background:#ededed;border:0}.group-rail,.right-stage{display:none!important}.chat-panel{display:flex;flex:1;min-width:0;min-height:0;flex-direction:column;background:#ededed}.chat-header{display:flex;align-items:center;gap:7px;flex:0 0 58px;min-height:58px;padding:8px 10px;background:#ededed;border-bottom:1px solid #d6d6d6;color:#111}.chat-header .back-home-button{flex:0 0 32px;margin:0;color:#222;font-size:28px;line-height:1}.chat-title{min-width:0;flex:1;text-align:center}.chat-title h1{overflow:hidden;margin:0;color:#111;font-size:16px;font-weight:600;text-overflow:ellipsis;white-space:nowrap}.chat-title p{margin:3px 0 0;color:#999;font-size:10px}.header-actions{display:flex;flex:0 0 32px;justify-content:flex-end}.chat-header .icon-button{width:32px;height:32px;border:0;background:transparent;color:#222;font-size:24px;line-height:1}.message-list{flex:1;min-height:0;overflow:auto;padding:16px 12px 12px;background:#ededed}.composer{position:relative;display:flex;align-items:center;flex:0 0 58px;min-height:58px;gap:8px;padding:8px 10px;border-top:1px solid #d6d6d6;background:#f7f7f7}.message-input{min-width:0;flex:1;height:38px;padding:0 11px;border:1px solid #d1d1d1;border-radius:4px;outline:none;background:#fff;color:#111;font:inherit;font-size:14px}.message-input:focus{border-color:#07c160}.plus-button{display:grid;place-items:center;width:38px;height:38px;padding:0;border:1px solid #cfcfcf;border-radius:4px;background:#f7f7f7;color:#555;font-size:28px;font-weight:300;line-height:1}.plus-menu{position:absolute;right:10px;bottom:66px;z-index:4;padding:8px;border:1px solid #ddd;border-radius:6px;background:#fff;box-shadow:0 5px 20px rgba(0,0,0,.16)}.plus-menu-item{display:flex;align-items:center;gap:8px;width:112px;padding:9px;border:0;border-radius:4px;background:#fff;color:#333;font-size:13px;text-align:left}.plus-menu-icon{display:grid;place-items:center;width:28px;height:28px;border-radius:4px;background:#fa5151;color:#fff;font-size:16px}.avatar-setting{margin-top:12px;padding:11px;border:1px solid #ddd;background:#fff}.avatar-setting-head{display:flex;justify-content:space-between;align-items:center;color:#555;font-size:12px}.avatar-setting-head small{color:#999;font-size:10px}.avatar-setting-body{display:flex;align-items:center;gap:9px;margin-top:10px}.account-avatar-preview{display:grid;place-items:center;width:48px;height:48px;border-radius:6px;background:#07c160 center/cover no-repeat;color:#fff;font-size:18px}.avatar-file-label{flex:1}.avatar-file-label input{display:none}.avatar-file-label span,.clear-qr-button{display:inline-flex;align-items:center;justify-content:center;padding:8px 9px;border:1px solid #d7d7d7;border-radius:4px;background:#fff;color:#555;font-size:11px;cursor:pointer}
.home-header{min-height:48px}.home-header-spacer{flex:1}.home-icon-button svg,.home-tab svg{width:22px;height:22px;fill:none;stroke:currentColor;stroke-linecap:round;stroke-linejoin:round;stroke-width:1.8}.home-icon-button{display:grid;place-items:center}.home-page{display:flex;flex:1;min-height:0;flex-direction:column;overflow:hidden}.page-title{padding:11px 15px;color:#111;font-size:18px;font-weight:600;background:#ededed;border-bottom:1px solid #d6d6d6}.conversation-avatar,.contact-avatar,.message-avatar,.group-avatar,.me-avatar{background-position:center;background-size:cover;background-repeat:no-repeat}.home-tabbar{gap:0}.home-tab{display:flex;flex:1;flex-direction:column;align-items:center;gap:3px;padding:0;color:#888}.home-tab span{font-size:10px;line-height:1}.home-tab.active{color:#07c160}.contacts-list{flex:1;overflow:auto;background:#fff}.contact-item{display:flex;align-items:center;width:100%;min-height:64px;padding:9px 14px;border:0;border-bottom:1px solid #eee;background:#fff;text-align:left}.contact-item:active,.me-row:active{background:#f2f2f2}.contact-avatar{display:grid;place-items:center;width:42px;height:42px;margin-right:11px;border-radius:6px;background-color:#c8c8c8;color:#fff;font-size:16px;font-style:normal}.contact-item>span{display:flex;min-width:0;flex:1;flex-direction:column;gap:5px}.contact-item strong{color:#111;font-size:14px;font-weight:500}.contact-item small{overflow:hidden;color:#aaa;font-size:11px;text-overflow:ellipsis;white-space:nowrap}.contact-item>b{color:#bbb;font-size:22px;font-weight:300}.me-card{display:flex;align-items:center;padding:18px 15px;margin-bottom:10px;background:#fff;border-bottom:1px solid #eee}.me-avatar{display:grid;place-items:center;width:54px;height:54px;margin-right:12px;border-radius:8px;background:#07c160;color:#fff;font-size:20px}.me-copy{display:flex;flex:1;flex-direction:column;gap:6px}.me-copy strong{color:#111;font-size:16px;font-weight:500}.me-copy small{color:#999;font-size:11px}.me-chevron{border:0;background:transparent;color:#aaa;font-size:26px;font-weight:300}.me-row{display:flex;align-items:center;gap:10px;width:100%;min-height:56px;padding:0 15px;border:0;border-bottom:1px solid #eee;background:#fff;color:#222;text-align:left}.me-row-icon{display:grid;place-items:center;width:28px;height:28px;border-radius:5px;background:#07c160;color:#fff;font-size:15px}.me-row>span:nth-child(2){flex:1;font-size:14px}.me-row small{margin-right:8px;color:#aaa;font-size:11px}.me-row b{color:#bbb;font-size:22px;font-weight:300}.me-row.danger{margin-top:10px}.me-row.danger .me-row-icon{background:#888}
.open-card .card-spectrum,.open-card .card-shine,.open-card .card-grid,.open-card .card-scan,.open-card .card-spark{display:block!important}.open-card .card-spectrum{opacity:.5}.open-card .card-shine{opacity:.7}.open-card .card-grid{opacity:.24}.open-card .card-scan{opacity:.6}.open-card .card-spark{opacity:.8}

/* Final visual polish: calm WeChat-like shell with a more tactile premium red-packet moment. */
:root{--wechat-green:#07c160;--wechat-bg:#f1f2f4;--wechat-line:#e5e6e8;--wechat-ink:#191a1c;--wechat-muted:#8b8f94}
body{background:var(--wechat-bg);color:var(--wechat-ink);-webkit-font-smoothing:antialiased}
.home-view,.app-shell{background:var(--wechat-bg);box-shadow:0 14px 40px rgba(30,35,40,.08)}
.home-header{min-height:56px;padding:9px 14px;background:rgba(247,248,249,.94);backdrop-filter:blur(16px);border-bottom:1px solid rgba(215,217,220,.8)}
.home-icon-button{width:36px;height:36px;border-radius:10px;color:#3b3f43;transition:background .18s,transform .18s}.home-icon-button:hover{background:#e8eaed}.home-icon-button:active{transform:scale(.92)}
.conversation-list{background:#f8f9fa}.conversation-item{min-height:74px;padding:11px 14px;border-bottom:1px solid #eceef0;transition:background .18s}.conversation-item:hover{background:#f1f3f5}.conversation-avatar{width:48px;height:48px;margin-right:12px;border-radius:13px;box-shadow:0 2px 8px rgba(25,30,35,.1)}.conversation-main{gap:5px}.conversation-main strong{font-size:15px;font-weight:600}.conversation-main small{color:#92979c;font-size:12px}.conversation-side{gap:7px;color:#a4a8ac}.conversation-side b{min-width:19px;height:19px;background:#fa5151;box-shadow:0 2px 6px rgba(250,81,81,.2)}
.home-tabbar{min-height:58px;padding:8px 2px max(8px,env(safe-area-inset-bottom));background:rgba(247,248,249,.96);border-top:1px solid #dfe1e4;backdrop-filter:blur(15px)}.home-tab{gap:4px;color:#979ba0;font-size:10px;transition:color .2s,transform .2s}.home-tab svg{width:21px;height:21px}.home-tab.active{color:var(--wechat-green)}.home-tab:active{transform:translateY(1px) scale(.96)}
.chat-header{background:rgba(237,238,240,.96);backdrop-filter:blur(15px);border-bottom:1px solid #dfe1e4}.chat-title h1{font-size:16px;font-weight:650}.chat-title p{color:#90959a}.chat-header .back-home-button,.chat-header .icon-button{transition:background .18s,transform .18s}.chat-header .back-home-button:hover,.chat-header .icon-button:hover{background:#e1e3e6;border-radius:9px}.chat-header .back-home-button:active,.chat-header .icon-button:active{transform:scale(.9)}
.message-list{padding:20px 13px 16px;background:linear-gradient(180deg,#eef0f2 0%,#f1f2f4 100%)}.message{gap:9px;animation:message-enter .28s ease both}.message-avatar{width:36px;height:36px;border-radius:10px;box-shadow:0 2px 5px rgba(20,25,30,.08)}.message-name{margin-bottom:4px;color:#8f9499;font-size:10px}.message-bubble{padding:10px 12px;border:1px solid rgba(215,217,220,.8);border-radius:4px 12px 12px 12px;background:#fff;box-shadow:0 2px 4px rgba(28,33,38,.04);font-size:14px;line-height:1.5}.mine .message-bubble{border-color:#85df92;background:#95ec69;box-shadow:0 2px 5px rgba(25,140,66,.1)}
.composer{min-height:62px;padding:10px 11px max(10px,env(safe-area-inset-bottom));background:rgba(247,248,249,.97);border-top:1px solid #dfe1e4;backdrop-filter:blur(16px)}.message-input{height:40px;border-color:#d3d6d9;border-radius:10px;background:#fff;box-shadow:inset 0 1px 2px rgba(30,35,40,.04);transition:border-color .18s,box-shadow .18s}.message-input:focus{border-color:#87cfa0;box-shadow:0 0 0 3px rgba(7,193,96,.1)}.packet-trigger{min-height:40px;border-radius:10px;box-shadow:0 3px 8px rgba(250,81,81,.18);transition:transform .18s,box-shadow .18s}.packet-trigger:active{transform:scale(.95);box-shadow:0 1px 4px rgba(250,81,81,.16)}
.packet-message{overflow:hidden;border:1px solid rgba(255,255,255,.55);border-radius:12px;box-shadow:0 5px 14px rgba(200,44,44,.16);transition:transform .2s,box-shadow .2s}.packet-message:not(:disabled):hover{transform:translateY(-1px);box-shadow:0 8px 18px rgba(200,44,44,.2)}.packet-message:not(:disabled):active{transform:scale(.98)}.packet-top{min-height:78px;padding:15px 16px;background:linear-gradient(135deg,#ff6d62 0%,#f34b4e 45%,#d83243 100%)}.packet-top strong{font-size:15px;letter-spacing:.01em}.packet-bottom{padding:9px 13px;color:#a35e61;background:#fffdfd}.packet-claims{padding:9px 11px;background:#fff;border-top:1px solid #f2dfe0}.packet-claims>b{font-size:10px;color:#7d6568}.packet-claims>i{padding:4px 0}.packet-claims>i strong{color:#e2494b}
.send-dialog,.open-dialog,.search-dialog,.group-details-dialog{border-radius:18px;box-shadow:0 20px 70px rgba(18,23,28,.2);animation:dialog-pop .22s ease both}.send-dialog::backdrop,.open-dialog::backdrop,.search-dialog::backdrop,.group-details-dialog::backdrop{background:rgba(18,23,28,.4);backdrop-filter:blur(6px)}.send-dialog form,.open-panel,.search-panel,.group-details-panel{background:#fbfcfd}.dialog-close{width:32px;height:32px;border-radius:10px;transition:background .18s,transform .18s}.dialog-close:hover{background:#e9ebed}.dialog-close:active{transform:scale(.9)}
.send-submit,.open-button{font-weight:650;letter-spacing:.02em;transition:transform .18s,filter .18s,box-shadow .18s}.send-submit:hover,.open-button:hover{filter:brightness(1.04);box-shadow:0 7px 16px rgba(7,193,96,.18)}.send-submit:active,.open-button:active{transform:scale(.98)}
.open-panel{padding:30px 18px 22px}.open-card{width:218px;border-radius:18px;box-shadow:0 20px 42px rgba(160,38,49,.25),0 0 0 1px rgba(255,255,255,.45);}.open-card-front .seal{width:68px;height:68px;border-width:1px}.open-card-front strong{font-size:18px;letter-spacing:.01em}.open-card-front small{font-size:11px;opacity:.84}.open-card-back strong{font-size:31px;text-shadow:0 3px 16px rgba(255,255,255,.32)}.open-panel>p{margin:2px 0 17px;color:#7c8288;font-size:12px}.open-button{height:48px;border-radius:12px;font-size:16px}.open-button:disabled{background:#d7dadd;color:#fff;box-shadow:none}
@keyframes message-enter{from{opacity:0;transform:translateY(5px)}to{opacity:1;transform:none}}@keyframes dialog-pop{from{opacity:0;transform:translateY(10px) scale(.985)}to{opacity:1;transform:none}}
@media (max-width:560px){.home-view,.app-shell{box-shadow:none}.open-dialog{align-self:end;margin:0 auto 12px}.open-dialog[open]{animation:sheet-up .28s cubic-bezier(.2,.8,.2,1) both}.open-panel{border-radius:18px}.open-card{width:min(218px,62vw)}}
@keyframes sheet-up{from{opacity:0;transform:translateY(24px)}to{opacity:1;transform:none}}

/* Feature expansion: attachments, dual payment codes and withdrawals. */
.composer{position:relative}
.attach-button{display:grid;place-items:center;flex:0 0 40px;width:40px;height:40px;border:1px solid #d9dde2;border-radius:12px;background:#fff;color:#4b5056;box-shadow:inset 0 1px 2px rgba(26,30,36,.03)}
.attach-button svg{width:18px;height:18px;fill:none;stroke:currentColor;stroke-width:1.8;stroke-linecap:round;stroke-linejoin:round}
.attach-menu{position:absolute;right:62px;bottom:68px;z-index:6;display:grid;gap:8px;width:140px;padding:10px;border:1px solid #dde1e6;border-radius:14px;background:#fff;box-shadow:0 16px 40px rgba(18,23,28,.14)}
.attach-menu-item{display:flex;flex-direction:column;gap:2px;padding:10px 12px;border:0;border-radius:11px;background:#f7f8f9;color:#1e2024;text-align:left}
.attach-menu-item span{font-size:13px;font-weight:700}
.attach-menu-item small{color:#8c9298;font-size:10px}
.attachment-message{padding:0}
.attachment-caption{margin:0 0 8px;color:#68707a;font-size:12px;line-height:1.5}
.attachment-card{display:flex;align-items:center;gap:12px;min-width:220px;padding:10px 12px;border:1px solid #e2e5e9;border-radius:14px;background:#fff;box-shadow:0 4px 12px rgba(18,23,28,.06)}
.attachment-card video{width:160px;max-width:46vw;border-radius:10px;background:#000}
.file-card{text-decoration:none;color:#1d2024}.file-card b{margin-left:auto;color:#07c160;font-size:12px}
.attachment-file-icon{display:grid;place-items:center;width:34px;height:34px;border-radius:10px;background:rgba(7,193,96,.1);color:#07c160;font-size:11px;font-weight:700}
.attachment-card strong{display:block;font-size:13px}.attachment-card span{color:#80868d;font-size:11px}
.wallet-card{margin:14px 12px;padding:14px;border:1px solid #e7eaee;border-radius:18px;background:#fff;box-shadow:0 1px 4px rgba(20,25,30,.05)}
.wallet-head{display:flex;align-items:baseline;justify-content:space-between;gap:8px}.wallet-head span{color:#767b80;font-size:12px;font-weight:700;letter-spacing:.04em;text-transform:uppercase}.wallet-head strong{font-size:20px}
.wallet-actions{display:flex;flex-wrap:wrap;align-items:center;gap:8px;margin-top:10px}.wallet-withdraw,.wallet-history{height:34px;padding:0 12px;border:0;border-radius:10px;background:#07c160;color:#fff;font-size:12px;font-weight:700}.wallet-history{background:#eef1f4;color:#4b5056}.wallet-actions small{color:#949aa0;font-size:11px}
.qr-tabs,.profile-qr-tabs{display:grid;grid-template-columns:1fr 1fr;gap:6px;margin:12px 0 10px;padding:4px;border-radius:14px;background:#f2f4f6}
.qr-tab,.profile-qr-tab{height:36px;border:0;border-radius:10px;background:transparent;color:#7c8086;font-size:12px;font-weight:700}
.qr-tab.active,.profile-qr-tab.active{background:#fff;color:#17191b;box-shadow:0 2px 10px rgba(25,30,35,.06)}
.withdraw-dialog,.withdraw-list-dialog{width:min(420px,calc(100% - 24px));padding:0;border:0;border-radius:20px;background:#fff;box-shadow:0 18px 60px rgba(18,23,28,.18)}
.withdraw-dialog::backdrop,.withdraw-list-dialog::backdrop{background:rgba(18,23,28,.36);backdrop-filter:blur(4px)}
.withdraw-dialog form,.withdraw-list-panel{position:relative;padding:28px 20px 20px;background:#fff}
.withdraw-dialog h2,.withdraw-list-panel h2{margin:7px 0 8px;color:#1b1c1f;font-size:22px}
.withdraw-tip{margin:0 0 16px;color:#7c8288;font-size:12px;line-height:1.5}
.withdraw-field{display:flex;flex-direction:column;gap:6px;margin:12px 0;color:#666c72;font-size:12px}
.withdraw-field input,.withdraw-field select{height:42px;padding:0 12px;border:1px solid #d9dde2;border-radius:12px;background:#fff;color:#1b1c1f}
.withdraw-list{display:grid;gap:10px;max-height:56vh;overflow:auto}
.withdraw-item{display:flex;align-items:center;justify-content:space-between;gap:10px;padding:12px 0;border-bottom:1px solid #edf0f2}
.withdraw-item strong{display:block;font-size:15px}.withdraw-item small,.withdraw-item span{color:#8b9198;font-size:11px}
.profile-qr{width:100%;max-height:320px;object-fit:contain;border:1px solid #eceff2;border-radius:16px;background:#fff}
.profile-empty{padding:16px;border:1px dashed #d9dde2;border-radius:14px;color:#8a9096;font-size:12px}
.payment-qr-preview{width:100%;max-height:280px;object-fit:contain;border:1px solid #eceff2;border-radius:16px;background:#fff}
@media (max-width:560px){
  .attach-menu{right:8px;left:8px;bottom:64px;width:auto}
  .attachment-card{min-width:0;align-items:flex-start;flex-direction:column}
  .attachment-card video{width:100%;max-width:100%}
  .wallet-card,.me-card,.me-row{margin-inline:12px}
  .withdraw-dialog,.withdraw-list-dialog{width:calc(100% - 24px)}
}

/* 红包开封：先收拢蓄力，再闪光翻面；最终金额仅在服务端确认成功后出现。 */
.open-card{transform:perspective(700px) rotateX(var(--rx)) rotateY(var(--ry))!important;transform-style:preserve-3d;transition:transform .34s cubic-bezier(.2,.8,.2,1),filter .25s!important;will-change:transform,filter}
.open-card.opening{animation:packet-unseal .62s cubic-bezier(.18,.76,.18,1) both!important}
.open-card.opening .seal{animation:packet-seal-pop .62s cubic-bezier(.2,.85,.25,1) both}
.open-card.opening .card-shine{animation:packet-opening-flash .62s ease-out both!important}
.open-card.opening .card-spectrum{animation:packet-spectrum-rush .62s linear both!important}
.open-card.opened{animation:packet-reveal .46s cubic-bezier(.2,.8,.2,1) both!important}
.open-card.opened .open-card-front{opacity:0;transform:rotateY(88deg) scale(.84)!important;transition:opacity .13s,transform .32s!important}
.open-card.opened .open-card-back{opacity:1;transform:rotateY(0) scale(1)!important;transition:opacity .14s .18s,transform .34s .14s!important}
.open-card.failed{animation:packet-no-luck .36s ease-in-out both!important;filter:saturate(.65)}
@keyframes packet-unseal{0%{transform:perspective(700px) rotateX(var(--rx)) rotateY(var(--ry)) scale(1)}20%{transform:perspective(700px) rotateX(calc(var(--rx) - 4deg)) rotateY(calc(var(--ry) + 5deg)) scale(.94)}52%{transform:perspective(700px) rotateX(calc(var(--rx) + 3deg)) rotateY(calc(var(--ry) - 8deg)) scale(1.09);filter:brightness(1.32) saturate(1.5)}100%{transform:perspective(700px) rotateX(var(--rx)) rotateY(var(--ry)) scale(1)}}
@keyframes packet-seal-pop{0%,18%{transform:scale(1)}48%{transform:scale(.78) rotate(-10deg);opacity:.75}72%{transform:scale(1.22) rotate(8deg);opacity:1}100%{transform:scale(1)}}
@keyframes packet-opening-flash{0%{opacity:.55;transform:translateX(-85%)}50%{opacity:1;transform:translateX(18%) scaleX(1.4)}100%{opacity:.72;transform:translateX(92%)}}
@keyframes packet-spectrum-rush{0%{background-position:0 0;opacity:.45}55%{background-position:100% 0;opacity:.9}100%{background-position:180% 0;opacity:.55}}
@keyframes packet-reveal{0%{transform:perspective(700px) rotateX(var(--rx)) rotateY(var(--ry)) scale(1.06);filter:brightness(1.45)}100%{transform:perspective(700px) rotateX(var(--rx)) rotateY(var(--ry)) scale(1);filter:brightness(1)}}
@keyframes packet-no-luck{0%,100%{transform:perspective(700px) rotateX(var(--rx)) rotateY(var(--ry)) translateX(0)}25%{transform:perspective(700px) rotateX(var(--rx)) rotateY(var(--ry)) translateX(-8px)}75%{transform:perspective(700px) rotateX(var(--rx)) rotateY(var(--ry)) translateX(8px)}}
@media (prefers-reduced-motion:reduce){.open-card,.open-card.opening,.open-card.opened,.open-card.failed,.open-card.opening .seal,.open-card.opening .card-shine,.open-card.opening .card-spectrum{animation:none!important;transition:none!important}}
.open-card{isolation:isolate;background:linear-gradient(135deg,#ff315f 0%,#ffb52d 17%,#67f4e7 35%,#7c6cff 53%,#ff5dc5 70%,#ffd66a 88%,#ff3759 100%);background-size:220% 220%;animation:foil-card-shift 7s ease-in-out infinite alternate}
.open-card::before{display:block!important;position:absolute;z-index:1;inset:0;content:"";border-radius:inherit;pointer-events:none;background:conic-gradient(from 210deg at 48% 42%,rgba(255,42,99,.95),rgba(255,220,83,.85),rgba(74,255,240,.9),rgba(113,90,255,.85),rgba(255,74,196,.9),rgba(255,216,89,.85),rgba(255,42,99,.95));background-size:180% 180%;mix-blend-mode:screen;opacity:.5;animation:prism-spin 8s linear infinite}
.open-card::after{display:block!important;position:absolute;z-index:9;inset:5px;content:"";border:1px solid rgba(255,255,255,.9);border-radius:10px;box-shadow:inset 0 0 0 1px rgba(255,255,255,.45),inset 0 0 22px rgba(255,255,255,.35),0 0 0 1px rgba(255,216,112,.65);pointer-events:none}
.open-card .card-spectrum{background:repeating-linear-gradient(112deg,transparent 0 10px,rgba(255,255,255,.28) 12px,rgba(104,255,238,.28) 15px,rgba(255,76,192,.3) 18px,transparent 24px);mix-blend-mode:screen;animation:foil-flow 4s ease-in-out infinite alternate}
.open-card .card-shine{background:linear-gradient(105deg,transparent 34%,rgba(255,255,255,.04) 41%,rgba(255,255,255,.98) 48%,rgba(110,255,247,.5) 53%,rgba(255,77,182,.38) 58%,transparent 66%);mix-blend-mode:screen;animation:shine-sweep 3.8s cubic-bezier(.45,.05,.15,.95) infinite}
.open-card .card-grid{background-image:linear-gradient(120deg,rgba(255,255,255,.42) 1px,transparent 1px),linear-gradient(30deg,rgba(114,255,244,.3) 1px,transparent 1px);background-size:11px 11px;mix-blend-mode:soft-light;animation:grid-glide 5s linear infinite}
.open-card .card-scan{background:linear-gradient(180deg,transparent,rgba(255,255,255,.2),rgba(255,246,171,.95),rgba(255,255,255,.2),transparent);mix-blend-mode:screen;animation:scan-drop 3.2s ease-in-out infinite}
.open-card-front,.open-card-back{z-index:10}.open-card-front .seal{background:linear-gradient(145deg,rgba(255,255,255,.34),rgba(255,255,255,.06));box-shadow:inset 0 0 18px rgba(255,255,255,.3),0 0 18px rgba(255,247,180,.7)}
@keyframes foil-card-shift{0%{background-position:0% 20%;filter:saturate(1.08) hue-rotate(0deg)}100%{background-position:100% 80%;filter:saturate(1.32) hue-rotate(12deg)}}

/* Final mobile interaction pass */
body{overflow:hidden}.home-header{min-height:52px;padding:8px 14px}.home-actions{margin-left:auto}.home-icon-button{width:38px;height:38px}.home-view,.app-shell{height:100dvh;max-height:100dvh}.chat-panel{height:100%;min-height:0}.chat-header{flex:0 0 58px}.message-list{padding-bottom:18px;overscroll-behavior:contain}.composer{position:relative;right:auto;bottom:auto;left:auto;z-index:2;flex:0 0 auto;min-height:62px;padding:10px max(10px,env(safe-area-inset-left)) calc(10px + env(safe-area-inset-bottom));border-top:1px solid #d0d0d0;border-radius:0;background:#f7f7f7;box-shadow:0 -2px 8px rgba(0,0,0,.04)}.message-input{height:40px;font-size:15px}.plus-button{flex:0 0 40px;width:40px;height:40px}.plus-menu{bottom:68px;right:10px}.message{max-width:92%}.message-bubble{max-width:calc(100vw - 100px);word-break:break-word}
.packet-message{width:min(270px,78vw);border:1px solid rgba(255,255,255,.28);border-radius:8px;background:#fff;box-shadow:0 3px 10px rgba(185,42,42,.14)}.packet-top{min-height:76px;padding:15px 16px;background:linear-gradient(135deg,#fa6262,#e84444)}.packet-top strong{font-size:15px}.packet-bottom{padding:9px 13px;background:#fff;color:#a34b4b}.packet-claims{background:#fff;border-top:1px solid #f2dede}.packet-message.claimed{opacity:.72}
.send-dialog,.open-dialog,.search-dialog,.group-details-dialog{width:calc(100% - 28px);max-width:410px;padding:0;border:0;border-radius:16px;background:#fff;box-shadow:0 16px 50px rgba(0,0,0,.22)}.send-dialog::backdrop,.open-dialog::backdrop,.search-dialog::backdrop,.group-details-dialog::backdrop{background:rgba(0,0,0,.36);backdrop-filter:blur(3px)}.send-dialog form{padding:28px 20px 20px}.send-dialog h2{margin:6px 0 18px;color:#222;font-size:23px}.packet-flow-tip{margin:0 0 12px;padding:10px;border-radius:8px;background:#f0faf3;color:#5f8a6b;font-size:11px;line-height:1.5}.amount-field{padding:9px 0;border-bottom:1px solid #eee;color:#e84a4a}.amount-field input{color:#222;font-family:inherit;font-size:28px}.message-field{margin:20px 0}.message-field span{color:#777}.message-field input{padding:10px 0;border-color:#eee;color:#222}.packet-count{padding:13px 0;color:#555}.packet-count small{display:block;margin-top:4px;color:#999;font-size:10px}.send-submit,.open-button{background:#07c160;box-shadow:none;border-radius:8px}.open-panel{padding:26px 18px 20px;border:0;border-radius:16px;background:#fff;text-align:center}.open-card{width:210px;margin-bottom:15px;border:0;border-radius:12px;background:linear-gradient(145deg,#ff7777,#ec4242 55%,#c52e37);box-shadow:0 12px 30px rgba(204,47,47,.26);transform:none}.open-card-front,.open-card-back{color:#fff;text-shadow:none}.open-card-front .seal{border-color:rgba(255,255,255,.7)}.open-panel>p{margin:0 0 16px;color:#888;font-size:11px}.open-button{width:100%;height:46px;padding:0;border-radius:8px;font-size:15px}.open-button:disabled{background:#ccc}.open-card-back strong{font-family:inherit;font-size:29px}
.search-panel,.group-details-panel{position:relative;padding:28px 18px 20px}.search-panel h2,.group-details-panel h2{margin:7px 0 16px;color:#222;font-size:21px}.search-field{display:flex;align-items:center;gap:8px;padding:0 11px;border:1px solid #ddd;border-radius:8px;background:#f7f7f7}.search-field svg{width:19px;height:19px;fill:none;stroke:#999;stroke-width:1.8}.search-field input{min-width:0;flex:1;padding:11px 0;border:0;outline:0;background:transparent;color:#222;font-size:14px}.search-results{max-height:52vh;margin-top:12px;overflow:auto}.search-empty{padding:25px 0;color:#999;font-size:12px;text-align:center}.search-result{display:flex;align-items:center;gap:10px;width:100%;padding:10px 4px;border:0;border-bottom:1px solid #eee;background:#fff;text-align:left}.search-result-avatar{display:grid;place-items:center;width:42px;height:42px;border-radius:7px;background:#07c160 center/cover no-repeat;color:#fff;font-style:normal}.search-result span{display:flex;min-width:0;flex:1;flex-direction:column;gap:4px}.search-result strong{overflow:hidden;color:#222;font-size:14px;font-weight:500;text-overflow:ellipsis;white-space:nowrap}.search-result small{color:#999;font-size:11px}.search-result>b{color:#aaa;font-size:11px;font-weight:400}.details-avatar{width:62px;height:62px;margin:0 auto 10px;border-radius:10px;background:center/cover no-repeat;color:#fff;display:grid;place-items:center;font-size:21px}.group-details-panel{text-align:center}.details-meta{margin:0 0 15px;color:#888;font-size:11px}.details-members{max-height:45vh;overflow:auto;border-top:1px solid #eee;text-align:left}.details-member{display:flex;align-items:center;gap:9px;padding:10px 2px;border-bottom:1px solid #eee}.details-member i{display:grid;place-items:center;width:34px;height:34px;border-radius:7px;background:#07c160 center/cover no-repeat;color:#fff;font-style:normal}.details-member span{flex:1;color:#333;font-size:13px}.details-member small{color:#999;font-size:10px}
.open-card .card-spectrum,.open-card .card-shine,.open-card .card-grid,.open-card .card-scan,.open-card .card-spark{display:block!important}.open-card .card-spectrum{opacity:.5}.open-card .card-shine{opacity:.7}.open-card .card-grid{opacity:.24}.open-card .card-scan{opacity:.6}.open-card .card-spark{opacity:.8}
/* Unified WeUI-like refresh for all user-facing screens. */
:root {
  --ui-green: #07c160;
  --ui-bg: #f4f5f7;
  --ui-panel: #ffffff;
  --ui-line: #e7eaee;
  --ui-text: #1b1c1f;
  --ui-muted: #848a91;
  --ui-red: #fa5151;
  --ui-red-deep: #d73b43;
  --ui-shadow: 0 10px 28px rgba(25, 30, 35, .08);
}
html, body { background: var(--ui-bg); color: var(--ui-text); }
body { display: flex; justify-content: center; overflow: hidden; -webkit-font-smoothing: antialiased; }
.noise, .orb, .right-stage { display: none !important; }
#authGate, .home-view, .app-shell { width: min(100vw, 430px); height: 100dvh; margin: 0 auto; }
#authGate { display: grid; place-items: center; padding: 16px; background: linear-gradient(180deg, #f7f8fa 0, #eceff2 100%); }
.auth-orbit { display: none; }
.auth-card { width: 100%; max-width: 372px; padding: 28px 22px 20px; border: 1px solid rgba(230, 233, 236, .9); border-radius: 24px; background: rgba(255, 255, 255, .96); box-shadow: 0 18px 60px rgba(26, 30, 36, .09); }
.auth-logo { width: 56px; height: 56px; border-radius: 18px; background: linear-gradient(135deg, var(--ui-green), #39d98a); box-shadow: 0 14px 30px rgba(7, 193, 96, .2); }
.auth-card h1, .send-dialog h2, .open-panel h2, .search-panel h2, .group-details-panel h2, .account-dialog h2, .profile-panel h2 { color: var(--ui-text); letter-spacing: -.02em; }
.auth-card p, .auth-note, .chat-header p, .conversation-main small, .contact-item small, .me-copy small, .search-result small, .details-meta, .profile-status { color: var(--ui-muted); }
.auth-tabs { display: grid; grid-template-columns: 1fr 1fr; gap: 6px; margin: 18px 0 16px; padding: 4px; border-radius: 14px; background: #f2f4f6; }
.auth-tab { height: 38px; border: 0; border-radius: 10px; background: transparent; color: #7d8288; font-weight: 600; }
.auth-tab.active { background: #fff; color: #17191b; box-shadow: 0 2px 10px rgba(25, 30, 35, .06); }
.auth-form label, .account-dialog label, .send-dialog label, .search-field, .group-profile-form label, .login-card label, .toolbar label, .member-rule label { color: #6c7278; font-size: 12px; }
.auth-form input, .message-input, .search-field input, .group-profile-form input, .login-card input, .toolbar select, .member-rule input, .member-rule select, .account-dialog input { width: 100%; height: 42px; padding: 0 14px; border: 1px solid #d9dde2; border-radius: 12px; background: #fff; color: #1b1c1f; outline: 0; box-shadow: inset 0 1px 2px rgba(26, 30, 36, .03); }
.auth-submit, .send-submit, .open-button, .primary { height: 44px; border: 0; border-radius: 12px; background: linear-gradient(135deg, var(--ui-green), #05b255); color: #fff; font-weight: 700; box-shadow: 0 10px 20px rgba(7, 193, 96, .16); }
.auth-error { min-height: 18px; color: var(--ui-red-deep); }
.home-view, .app-shell { display: block; overflow: hidden; background: var(--ui-bg); box-shadow: 0 14px 34px rgba(26, 30, 36, .06); }
.home-header, .chat-header { min-height: 56px; padding: 10px 14px; background: rgba(250, 251, 252, .96); border-bottom: 1px solid var(--ui-line); backdrop-filter: blur(12px); }
.home-icon-button, .back-home-button, .icon-button, .dialog-close, .me-chevron { width: 36px; height: 36px; border: 0; border-radius: 11px; background: #edf0f2; color: #3b4046; }
.home-icon-button svg, .home-tab svg { width: 21px; height: 21px; fill: none; stroke: currentColor; stroke-linecap: round; stroke-linejoin: round; stroke-width: 1.8; }
.home-page, .contacts-list, .message-list, .me-page { background: transparent; }
.page-title { padding: 12px 15px 8px; border: 0; background: transparent; color: #767b80; font-size: 12px; font-weight: 700; text-transform: uppercase; letter-spacing: .08em; }
.conversation-item, .contact-item, .me-card, .me-row { margin: 0 12px 10px; border: 1px solid #eaedf0; border-radius: 16px; background: #fff; box-shadow: 0 1px 3px rgba(20, 25, 30, .05); }
.conversation-item, .contact-item, .me-row { min-height: 74px; padding: 12px; }
.conversation-avatar, .contact-avatar, .me-avatar, .message-avatar, .group-avatar, .profile-avatar, .details-avatar, .account-avatar-preview, .search-result-avatar { background-position: center; background-size: cover; background-repeat: no-repeat; }
.conversation-avatar { width: 48px; height: 48px; border-radius: 14px; }
.conversation-main strong, .contact-item strong, .me-copy strong, .message-name, .search-result strong { color: #1c1e21; }
.conversation-main small, .contact-item small, .me-copy small, .search-result small { color: #8a8f95; }
.conversation-side b { min-width: 20px; height: 20px; border-radius: 999px; background: var(--ui-red); box-shadow: 0 6px 12px rgba(250, 81, 81, .16); }
.home-tabbar { min-height: 58px; padding: 8px 4px calc(8px + env(safe-area-inset-bottom)); background: rgba(250, 251, 252, .97); border-top: 1px solid #e4e7eb; backdrop-filter: blur(12px); }
.home-tab { color: #979ca2; font-size: 10px; }
.home-tab.active { color: var(--ui-green); }
.chat-panel { display: flex; flex-direction: column; height: 100%; min-height: 0; }
.chat-title { display: flex; flex-direction: column; gap: 2px; min-width: 0; }
.chat-title-row { display: flex; align-items: center; gap: 8px; min-width: 0; }
.chat-title h1 { margin: 0; font-size: 16px; font-weight: 700; }
.online-badge { display: inline-flex; align-items: center; height: 20px; padding: 0 8px; border-radius: 999px; background: rgba(7, 193, 96, .1); color: var(--ui-green); font-size: 10px; font-weight: 700; white-space: nowrap; }
.chat-title p { margin: 0; font-size: 11px; }
.message-list { flex: 1; padding: 18px 12px 14px; background: linear-gradient(180deg, #eef1f3 0, #f5f6f7 100%); }
.message { max-width: 92%; gap: 8px; }
.message-avatar { width: 36px; height: 36px; border-radius: 12px; box-shadow: 0 2px 5px rgba(25, 30, 35, .06); }
.message-name { margin: 0 0 4px 1px; font-size: 10px; }
.message-bubble { max-width: calc(100vw - 110px); padding: 10px 12px; border: 1px solid #e4e7eb; border-radius: 6px 14px 14px 14px; background: #fff; color: #1d2024; box-shadow: 0 2px 6px rgba(25, 30, 35, .04); line-height: 1.55; }
.mine .message-bubble { border-color: #95ec69; background: #95ec69; color: #17350c; border-radius: 14px 6px 14px 14px; }
.composer { display: flex; align-items: center; gap: 10px; min-height: 62px; padding: 10px 12px calc(10px + env(safe-area-inset-bottom)); background: rgba(250, 251, 252, .98); border-top: 1px solid #e4e7eb; }
.message-input { flex: 1; }
.packet-trigger.inline { flex: 0 0 auto; height: 42px; padding: 0 12px 0 8px; border: 0; border-radius: 12px; background: linear-gradient(135deg, var(--ui-red), var(--ui-red-deep)); color: #fff; box-shadow: 0 8px 16px rgba(250, 81, 81, .18); }
.packet-trigger.inline .packet-trigger-icon { width: 26px; height: 26px; background: rgba(255, 255, 255, .18); color: #fff; }
.packet-trigger.inline span:last-child { font-weight: 700; }
.plus-button, .plus-menu, .right-stage, .orb { display: none !important; }
.packet-message { width: min(270px, 78vw); border: 1px solid rgba(255, 255, 255, .7); border-radius: 14px; box-shadow: 0 10px 26px rgba(204, 47, 47, .14); }
.packet-top { min-height: 78px; background: linear-gradient(135deg, #ff7167 0, #f24d4c 50%, #d7323a 100%); }
.packet-bottom { background: #fffdfd; color: #a35d60; }
.packet-claims { background: #fff; border-top: 1px solid #f3e0e1; }
.packet-message.claimed { opacity: .74; }
.send-dialog, .open-dialog, .search-dialog, .group-details-dialog, .account-dialog, .profile-dialog, .scanner-dialog { width: calc(100% - 24px); max-width: 410px; padding: 0; border: 0; border-radius: 20px; background: #fff; box-shadow: 0 18px 60px rgba(18, 23, 28, .18); }
.send-dialog::backdrop, .open-dialog::backdrop, .search-dialog::backdrop, .group-details-dialog::backdrop, .account-dialog::backdrop, .profile-dialog::backdrop, .scanner-dialog::backdrop { background: rgba(18, 23, 28, .36); backdrop-filter: blur(4px); }
.send-dialog form, .open-panel, .search-panel, .group-details-panel, .account-dialog form, .profile-panel, .scanner-panel { background: #fff; }
.dialog-close { position: absolute; top: 14px; right: 14px; }
.open-panel { padding: 26px 18px 20px; text-align: center; }
.open-card { width: 218px; border: 0; border-radius: 18px; box-shadow: 0 16px 40px rgba(204, 47, 47, .24); }
.open-card-front, .open-card-back { color: #fff; text-shadow: none; }
.open-card-front .seal { border-color: rgba(255, 255, 255, .7); box-shadow: inset 0 0 16px rgba(255, 255, 255, .3), 0 0 18px rgba(255, 255, 255, .2); }
.open-card-back strong { font-size: 30px; font-family: inherit; }
.search-field { display: flex; align-items: center; gap: 8px; padding: 0 11px; border: 1px solid #d9dde2; border-radius: 12px; background: #fff; }
.search-field svg { width: 19px; height: 19px; fill: none; stroke: #97a0a8; stroke-width: 1.8; }
.search-result, .details-member { border-bottom: 1px solid #edf0f2; }
.details-avatar { width: 62px; height: 62px; border-radius: 16px; }
.account-dialog label span, .send-dialog label span, .profile-panel p { color: #6c7278; }
.avatar-setting, .qr-setting, .group-profile-form, .invite-form { gap: 10px; }

/* Traditional red-envelope card used in chat. */
.packet-message { border: 1px solid #e8b08a; border-radius: 8px; background: #fff; box-shadow: 0 5px 16px rgba(184, 45, 35, .16); }
.packet-top { position: relative; min-height: 86px; padding: 15px 16px 12px 60px; overflow: hidden; background: linear-gradient(145deg, #d93632 0%, #c51f2b 58%, #ad1725 100%); }
.packet-top::after { display: none; }
.packet-top::before { position: absolute; right: -26px; top: -36px; width: 112px; height: 112px; border: 1px solid rgba(255, 218, 138, .22); border-radius: 50%; content: ""; box-shadow: 0 0 0 12px rgba(255, 218, 138, .06), 0 0 0 24px rgba(255, 218, 138, .04); }
.packet-seal { position: absolute; left: 16px; top: 18px; display: grid; place-items: center; width: 34px; height: 34px; border: 1px solid #f8d58a; border-radius: 50%; background: linear-gradient(145deg, #ffd985, #e7a93f); color: #a42525; font-size: 17px; font-style: normal; font-weight: 800; box-shadow: 0 2px 8px rgba(86, 12, 17, .3), inset 0 0 0 2px rgba(255, 246, 196, .3); }
.packet-top strong, .packet-top span { position: relative; z-index: 1; }
.packet-top strong { color: #fff8ec; }
.packet-top span { color: rgba(255, 239, 224, .9); }
.packet-bottom { padding: 8px 13px; background: #fffaf5; color: #a94a3d; }
.packet-dot { background: #d43b32; }
@media (max-width: 560px) {
  #authGate, .home-view, .app-shell { width: 100vw; }
  .conversation-item, .contact-item, .me-card, .me-row { margin: 0 12px 10px; }
  .message { max-width: 92%; }
  .message-bubble { max-width: calc(100vw - 100px); }
  .open-dialog { align-self: end; margin: 0 auto 12px; }
}

/* Final mobile frame: keep every screen inside the phone width and pin tabs to the bottom. */
html, body { width: 100%; max-width: 100%; overflow-x: hidden; }
body { min-width: 0; }
#appContent { width: 100%; max-width: 100%; min-width: 0; }
.home-view, .app-shell { display: flex !important; flex-direction: column; width: min(100%, 430px); max-width: 430px; min-width: 0; height: 100dvh; max-height: 100dvh; margin: 0 auto; overflow: hidden; }
#homeView.hidden, #chatView.hidden { display: none !important; }
.home-header { flex: 0 0 auto; }
.home-page { display: flex !important; flex: 1 1 auto; min-height: 0; width: 100%; max-width: 100%; overflow: hidden; }
.home-page.hidden { display: none !important; }
.conversation-list, .contacts-list { width: 100%; min-width: 0; max-width: 100%; overflow-x: hidden; overflow-y: auto; }
.conversation-list, .contacts-list { display: flex; flex-direction: column; }
.me-page { overflow-y: auto; padding-bottom: 8px; }
.home-tabbar { position: relative; z-index: 5; flex: 0 0 auto; width: 100%; min-width: 0; max-width: 100%; margin-top: auto; }
.app-shell .chat-panel { width: 100%; max-width: 100%; min-width: 0; flex: 1 1 auto; }
.message-list { min-width: 0; max-width: 100%; overflow-x: hidden; }
.composer { width: 100%; max-width: 100%; min-width: 0; }
.message-input { min-width: 0; max-width: 100%; }
.packet-trigger.inline { flex: 0 0 auto; }
.payment-dialog, .wallet-dialog { width: min(calc(100% - 24px), 410px); max-width: 410px; padding: 0; border: 0; border-radius: 20px; background: #fff; box-shadow: 0 18px 60px rgba(18,23,28,.18); }
.payment-dialog::backdrop, .wallet-dialog::backdrop { background: rgba(18,23,28,.36); backdrop-filter: blur(4px); }
.payment-dialog form, .wallet-panel { position: relative; padding: 28px 20px 20px; background: #fff; }
.payment-dialog h2, .wallet-panel h2 { margin: 7px 0 8px; color: #1b1c1f; font-size: 22px; }
.payment-dialog label { display: flex; flex-direction: column; gap: 6px; margin: 14px 0; color: #6c7278; font-size: 12px; }
.payment-dialog label input { width: 100%; height: 42px; padding: 0 12px; border: 1px solid #d9dde2; border-radius: 12px; background: #fff; color: #1b1c1f; }
.wallet-balance-large { display: flex; align-items: flex-end; justify-content: space-between; padding: 18px 0 10px; border-bottom: 1px solid #edf0f2; }
.wallet-balance-large span { color: #8a9096; font-size: 12px; }
.wallet-balance-large strong { color: #1b1c1f; font-size: 32px; letter-spacing: -.04em; }
.wallet-note { margin: 12px 0 18px; color: #8a9096; font-size: 12px; }
.wallet-panel .wallet-actions { display: grid; grid-template-columns: repeat(3, 1fr); gap: 10px; margin: 0; }
.wallet-panel .wallet-actions button { height: 42px; border-radius: 12px; }
.wallet-recharge { border: 0; background: #ff8a1f; color: #fff; font-size: 13px; font-weight: 700; }

/* ── 充值（微信支付 Native 扫码）──────────────────────────────────
   二维码用真实位图并放宽触摸行为：长按识别依赖系统把它当图片处理。 */
.recharge-dialog { width: min(calc(100% - 24px), 410px); max-width: 410px; padding: 0; border: 0; border-radius: 20px; background: #fff; box-shadow: 0 18px 60px rgba(18,23,28,.18); }
.recharge-dialog::backdrop { background: rgba(18,23,28,.36); backdrop-filter: blur(4px); }
.recharge-panel { position: relative; padding: 28px 20px 20px; background: #fff; }
.recharge-panel h2 { margin: 7px 0 8px; color: #1b1c1f; font-size: 22px; }
.recharge-tip { margin: 0 0 16px; color: #7c8288; font-size: 12px; line-height: 1.5; }
.recharge-amounts { display: grid; grid-template-columns: repeat(3, 1fr); gap: 10px; margin-bottom: 18px; }
.recharge-chip { height: 56px; border: 1px solid #d9dde2; border-radius: 14px; background: #fff; color: #1b1c1f; font-size: 16px; font-weight: 700; }
.recharge-chip.active { border-color: #07c160; background: rgba(7,193,96,.08); color: #07c160; }
.recharge-primary { width: 100%; height: 46px; border: 0; border-radius: 12px; background: #07c160; color: #fff; font-size: 15px; font-weight: 700; }
.recharge-primary:disabled { background: #c8ccd0; }
.recharge-ghost { width: 100%; height: 42px; margin-top: 12px; border: 0; border-radius: 12px; background: #eef1f4; color: #4b5056; font-size: 13px; font-weight: 700; }
.recharge-error { min-height: 16px; margin: 10px 0 0; color: #d82727; font-size: 12px; }
.recharge-pay-amount { margin: 0 0 12px; color: #7c8288; font-size: 13px; }
.recharge-pay-amount strong { color: #1b1c1f; font-size: 20px; }
.recharge-qr-wrap { position: relative; display: grid; place-items: center; width: 100%; aspect-ratio: 1 / 1; max-height: 300px; padding: 10px; border: 1px solid #eceff2; border-radius: 16px; background: #fff; }
.recharge-qr-wrap img { width: 100%; height: 100%; object-fit: contain; -webkit-touch-callout: default; -webkit-user-select: auto; user-select: auto; }
.recharge-qr-loading { position: absolute; color: #8a9096; font-size: 12px; }
.recharge-hint { margin: 12px 0 0; color: #8a9096; font-size: 12px; text-align: center; }
.recharge-status { display: flex; align-items: center; justify-content: center; gap: 8px; margin-top: 10px; color: #07c160; font-size: 13px; font-weight: 600; }
.recharge-spinner { width: 13px; height: 13px; border: 2px solid rgba(7,193,96,.25); border-top-color: #07c160; border-radius: 50%; animation: recharge-spin .8s linear infinite; }
@keyframes recharge-spin { to { transform: rotate(360deg); } }
.recharge-countdown { margin: 6px 0 0; color: #9ca2a8; font-size: 11px; text-align: center; }
.recharge-success-icon { display: grid; place-items: center; width: 64px; height: 64px; margin: 8px auto 14px; border-radius: 50%; background: rgba(7,193,96,.12); color: #07c160; font-size: 34px; font-weight: 700; }
.recharge-success-title { margin: 0; color: #1b1c1f; font-size: 17px; font-weight: 700; text-align: center; }
.recharge-success-amount { margin: 6px 0 0; color: #07c160; font-size: 30px; font-weight: 800; text-align: center; letter-spacing: -.03em; }
.recharge-success-balance { margin: 8px 0 18px; color: #8a9096; font-size: 12px; text-align: center; }
.recharge-failed-title { margin: 18px 0 6px; color: #1b1c1f; font-size: 17px; font-weight: 700; text-align: center; }
.recharge-failed-tip { margin: 0 0 18px; color: #8a9096; font-size: 12px; line-height: 1.6; text-align: center; }
.wallet-icon { background: #4b8df8 !important; }
.empty-state { display: flex; flex: 1; min-height: 260px; align-items: center; justify-content: center; flex-direction: column; padding: 40px 28px; color: #8a9096; text-align: center; }
.empty-state-icon { display: grid; place-items: center; width: 54px; height: 54px; margin-bottom: 14px; border: 1px solid #dfe3e7; border-radius: 18px; background: #fff; color: #b4bbc1; font-size: 28px; font-weight: 400; box-shadow: 0 4px 14px rgba(25, 30, 35, .05); }
.empty-state strong { color: #4e555b; font-size: 15px; font-weight: 600; }
.empty-state p { margin: 8px 0 0; color: #9ca2a8; font-size: 12px; line-height: 1.6; }
@media (max-width: 430px) {
  .home-view, .app-shell { width: 100%; }
  .composer { gap: 6px; padding-inline: 8px; }
  .message-input { font-size: 14px; }
  .packet-trigger.inline { padding-inline: 8px; }
  .packet-trigger.inline span:last-child { display: none; }
}

/* Classic WeChat-style user interface: flat surfaces, compact spacing, quiet controls. */
html, body { background: #ededed; color: #191919; font-family: -apple-system, BlinkMacSystemFont, "Helvetica Neue", "PingFang SC", "Microsoft YaHei", sans-serif; }
body { background: #ededed; }
.auth-gate { background: #ededed; }
.auth-card { width: min(100% - 28px, 360px); padding: 26px 22px 20px; border: 1px solid #dedede; border-radius: 4px; background: #fff; box-shadow: none; backdrop-filter: none; }
.auth-logo { width: 44px; height: 44px; margin-bottom: 16px; border-radius: 4px; background: #07c160; box-shadow: none; }
.auth-card h1 { margin: 10px 0 8px; color: #191919; font-family: inherit; font-size: 22px; letter-spacing: 0; }
.auth-card > p { margin-bottom: 18px; color: #888; }
.auth-tabs { margin-bottom: 14px; border-bottom-color: #eee; }
.auth-tab { color: #888; }
.auth-tab.active { color: #07c160; }
.auth-tab.active::after { background: #07c160; }
.auth-form input { border-color: #d8d8d8; border-radius: 4px; background: #fff; color: #191919; }
.auth-form input:focus { border-color: #07c160; box-shadow: none; }
.auth-submit { border-radius: 4px; background: #07c160; box-shadow: none; }
.auth-note { color: #aaa; }
.home-view, .app-shell { width: min(100%, 430px); max-width: 430px; background: #ededed; box-shadow: none; }
.home-header { min-height: 50px; padding: 6px 10px; background: #ededed; border-bottom: 1px solid #d6d6d6; backdrop-filter: none; }
.home-icon-button, .back-home-button, .icon-button, .dialog-close, .me-chevron { width: 34px; height: 34px; border-radius: 4px; background: transparent; color: #222; }
.home-icon-button:hover, .chat-header .back-home-button:hover, .chat-header .icon-button:hover { background: #e2e2e2; }
.conversation-list, .contacts-list { background: #fff; }
.conversation-item, .contact-item { min-height: 68px; margin: 0; padding: 10px 12px; border: 0; border-bottom: 1px solid #ededed; border-radius: 0; background: #fff; box-shadow: none; }
.conversation-item:hover, .contact-item:hover { background: #f5f5f5; }
.conversation-avatar, .contact-avatar { width: 46px; height: 46px; margin-right: 10px; border-radius: 5px; box-shadow: none; }
.conversation-main strong, .contact-item strong { color: #181818; font-size: 15px; font-weight: 500; }
.conversation-main small, .contact-item small { color: #999; font-size: 12px; }
.home-tabbar { min-height: 54px; padding: 7px 0 max(7px, env(safe-area-inset-bottom)); background: #f7f7f7; border-top: 1px solid #d6d6d6; backdrop-filter: none; }
.home-tab { color: #888; }
.home-tab.active { color: #07c160; }
.chat-header { flex-basis: 50px; min-height: 50px; padding: 6px 10px; background: #ededed; border-bottom: 1px solid #d6d6d6; backdrop-filter: none; }
.chat-title h1 { color: #191919; font-size: 16px; font-weight: 500; }
.chat-title p { color: #999; }
.chat-header .back-home-button, .chat-header .icon-button { background: transparent; color: #222; }
.online-badge { height: 18px; padding: 0 5px; border-radius: 2px; background: transparent; color: #999; font-size: 10px; font-weight: 400; }
.message-list { gap: 12px; padding: 14px 10px 12px; background: #ededed; }
.message { max-width: 92%; gap: 8px; }
.message-avatar { width: 36px; height: 36px; border-radius: 4px; box-shadow: none; }
.message-name { margin-bottom: 3px; color: #999; font-size: 10px; }
.message-meta { min-height: 14px; }
.message-time { color: #aaa; font-size: 10px; }
.mine .message-meta { justify-content: flex-end; }
.message-bubble { max-width: calc(100vw - 102px); padding: 9px 11px; border: 0; border-radius: 4px; background: #fff; color: #191919; box-shadow: none; font-size: 14px; line-height: 1.5; }
.mine .message-bubble { border: 0; border-radius: 4px; background: #95ec69; color: #191919; box-shadow: none; }
.composer { min-height: 58px; padding: 8px 9px max(8px, env(safe-area-inset-bottom)); background: #f7f7f7; border-top: 1px solid #d6d6d6; box-shadow: none; }
.message-input { height: 38px; border: 1px solid #d1d1d1; border-radius: 4px; background: #fff; color: #191919; box-shadow: none; }
.message-input:focus { border-color: #07c160; }
.attach-button { width: 36px; height: 36px; border: 1px solid #cfcfcf; border-radius: 4px; background: #f7f7f7; color: #555; box-shadow: none; }
.packet-trigger.inline { height: 36px; padding: 0 9px; border-radius: 4px; background: #fa5151; box-shadow: none; }
.packet-trigger.inline .packet-trigger-icon { width: 23px; height: 23px; border-radius: 3px; background: rgba(255,255,255,.16); }
.packet-message { width: min(250px, 76vw); border: 0; border-radius: 4px; box-shadow: 0 1px 2px rgba(0,0,0,.08); }
.packet-top { min-height: 74px; padding: 13px 13px 11px 51px; background: #fa5151; }
.packet-top::before { display: none; }
.packet-seal { left: 13px; top: 16px; width: 30px; height: 30px; border-color: rgba(255,239,180,.9); border-radius: 50%; background: #f8d37d; box-shadow: none; font-size: 15px; }
.packet-top strong { color: #fff; font-size: 14px; font-weight: 500; }
.packet-top span { color: rgba(255,255,255,.82); font-size: 11px; }
.packet-bottom { padding: 7px 11px; background: #fff; color: #999; }
.packet-claims { background: #fff; border-top: 1px solid #f0f0f0; }
.open-card { width: 210px; border-radius: 4px; background: #fa5151; box-shadow: 0 8px 18px rgba(0,0,0,.16); animation: none; }
.open-card::before, .open-card::after, .open-card .card-spectrum, .open-card .card-shine, .open-card .card-grid, .open-card .card-scan, .open-card .card-spark { display: none !important; }
.open-card-front, .open-card-back { color: #fff; }
.open-card-front .seal { width: 62px; height: 62px; border-color: rgba(255,255,255,.75); box-shadow: none; }
.open-panel { border-radius: 4px; background: #fff; }
.open-button { border-radius: 4px; background: #07c160; box-shadow: none; }
.send-dialog, .open-dialog, .search-dialog, .group-details-dialog, .account-dialog, .profile-dialog, .scanner-dialog, .payment-dialog, .wallet-dialog { border-radius: 4px; box-shadow: 0 8px 30px rgba(0,0,0,.16); }
.send-dialog form, .open-panel, .search-panel, .group-details-panel, .account-dialog form, .profile-panel, .scanner-panel, .payment-dialog form, .wallet-panel { border-radius: 4px; }
.empty-state-icon { border-radius: 4px; box-shadow: none; }
.me-page { background: #ededed; padding: 0 0 8px; }
.me-page .page-title { padding: 11px 15px; color: #191919; font-size: 18px; font-weight: 500; letter-spacing: 0; text-transform: none; }
.me-card { display: flex; align-items: center; min-height: 86px; margin: 0 0 12px; padding: 16px 15px; border: 0; border-radius: 0; background: #fff; box-shadow: none; }
.me-avatar { width: 54px; height: 54px; margin-right: 12px; border-radius: 5px; background-color: #07c160; box-shadow: none; }
.me-copy { gap: 5px; }
.me-copy strong { color: #191919; font-size: 16px; font-weight: 500; }
.me-copy small { color: #999; font-size: 11px; }
.me-chevron { color: #aaa; }
.me-row { min-height: 54px; margin: 0; padding: 0 15px; border: 0; border-bottom: 1px solid #ededed; border-radius: 0; background: #fff; box-shadow: none; }
.me-row + .me-row { margin-top: 0; }
.me-row.danger { margin-top: 12px; }
.me-row-icon { width: 27px; height: 27px; border-radius: 4px; box-shadow: none; }
.me-row > span:nth-child(2) { color: #222; font-size: 14px; }
.me-row small { color: #aaa; }
.wallet-card { margin: 0 0 12px; padding: 15px; border: 0; border-radius: 0; background: #fff; box-shadow: none; }
.wallet-withdraw, .wallet-history { border-radius: 4px; box-shadow: none; }
.account-dialog, .payment-dialog, .wallet-dialog, .withdraw-dialog, .withdraw-list-dialog, .profile-dialog, .scanner-dialog { border-radius: 4px; box-shadow: 0 8px 30px rgba(0,0,0,.16); }

/* ── NPC 气氛系统：引用回复 / 正在输入 ───────────────────────────────── */
.message-reply { display: flex; gap: 5px; max-width: 300px; margin: 0 0 4px; padding: 5px 8px; overflow: hidden; border-left: 2px solid #c9ccd1; border-radius: 3px; background: rgba(0,0,0,.035); color: #8b9096; font-size: 11px; line-height: 1.4; white-space: nowrap; text-overflow: ellipsis; }
.message-reply b { flex: 0 0 auto; max-width: 92px; overflow: hidden; color: #6f757c; font-weight: 600; text-overflow: ellipsis; }
.mine .message-reply { border-left-color: rgba(255,255,255,.55); background: rgba(255,255,255,.3); color: rgba(255,255,255,.85); }
.mine .message-reply b { color: #fff; }
.typing-indicator { display: flex; align-items: center; gap: 8px; padding: 0 12px 8px; color: #8b9096; font-size: 11px; }
.typing-indicator.hidden { display: none; }
.typing-avatar { display: grid; place-items: center; width: 20px; height: 20px; border-radius: 6px; background: #d5d8dc; color: #fff; font-size: 10px; font-style: normal; font-weight: 700; }
.typing-dots { display: inline-flex; gap: 3px; }
.typing-dots em { width: 4px; height: 4px; border-radius: 50%; background: #b6bbc1; animation: typing-bounce 1.2s infinite ease-in-out; }
.typing-dots em:nth-child(2) { animation-delay: .15s; }
.typing-dots em:nth-child(3) { animation-delay: .3s; }
@keyframes typing-bounce { 0%, 60%, 100% { opacity: .35; transform: translateY(0); } 30% { opacity: 1; transform: translateY(-3px); } }

/* ── 红包个数步进器 ─────────────────────────────────────────────────────
   置于样式表末尾并提高选择器特异性：该弹窗历史上被多轮主题覆盖
   （#16112c 暗色、#fffaf6 暖色、#fbfcfd、#fff 等多套），
   低特异性规则会被后面的主题压掉，导致输入框被压成 34px 点不中。 */
.send-dialog .packet-count {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  padding: 14px 0;
}
.send-dialog .packet-count > span {
  flex: 1 1 auto;
  min-width: 0;
  color: #555;
  font-size: 13px;
  line-height: 1.4;
}
.send-dialog .packet-count small { display: block; margin-top: 4px; color: #999; font-size: 10px; }

.send-dialog .count-stepper {
  display: flex;
  flex: 0 0 auto;
  align-items: center;
  border: 1px solid #e5e7ea;
  border-radius: 10px;
  background: #fafbfc;
  overflow: hidden;
}
/* 触摸目标 ≥44px：iOS/Android 人机指南的最小可点尺寸 */
.send-dialog .count-btn {
  display: grid;
  place-items: center;
  width: 44px;
  height: 44px;
  padding: 0;
  border: 0;
  background: transparent;
  color: #07c160;
  font-size: 22px;
  font-weight: 700;
  line-height: 1;
  -webkit-tap-highlight-color: transparent;
  touch-action: manipulation;
}
.send-dialog .count-btn:active:not(:disabled) { background: #eef7f1; }
.send-dialog .count-btn:disabled { color: #c8ccd0; }

.send-dialog .count-stepper input {
  width: 56px !important;
  height: 44px;
  padding: 0;
  border: 0;
  border-left: 1px solid #e5e7ea;
  border-right: 1px solid #e5e7ea;
  outline: 0;
  background: #fff;
  color: #222;
  font-size: 17px;
  font-weight: 700;
  text-align: center;
  /* 隐藏 number 类型的上下箭头：占宽且手机上难点 */
  -moz-appearance: textfield;
  appearance: textfield;
}
.send-dialog .count-stepper input::-webkit-outer-spin-button,
.send-dialog .count-stepper input::-webkit-inner-spin-button {
  -webkit-appearance: none;
  margin: 0;
}

/* ── 踩雷玩法（纯娱乐标记，无赔付）────────────────────────────────── */
.send-dialog .packet-mine {
  margin-top: 4px;
  padding: 12px 0;
  border-top: 1px solid #f0f2f4;
}
.send-dialog .packet-mine-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  color: #555;
  font-size: 13px;
}
.send-dialog .packet-mine-head small {
  display: block;
  margin-top: 3px;
  color: #9aa0a6;
  font-size: 10px;
}
.send-dialog .mine-toggle {
  flex: 0 0 auto;
  min-width: 58px;
  height: 30px;
  padding: 0 12px;
  border: 1px solid #e0e3e6;
  border-radius: 15px;
  background: #f3f5f7;
  color: #7a8087;
  font-size: 12px;
  font-weight: 700;
}
.send-dialog .mine-toggle[aria-pressed="true"] {
  border-color: #e8543f;
  background: #fff1ee;
  color: #d8412c;
}
.send-dialog .mine-digits {
  display: grid;
  grid-template-columns: repeat(10, 1fr);
  gap: 6px;
  margin-top: 12px;
}
.send-dialog .mine-digits.hidden { display: none; }
.send-dialog .mine-digit {
  height: 38px;
  padding: 0;
  border: 1px solid #e0e3e6;
  border-radius: 9px;
  background: #fff;
  color: #333;
  font-size: 15px;
  font-weight: 700;
}
.send-dialog .mine-digit.active {
  border-color: #e8543f;
  background: #e8543f;
  color: #fff;
}

/* 踩雷特效
   ⚠️ 选择器必须带 .packet-top 前缀：气泡里有
   `.packet-top strong, .packet-top span { display:block }`（特异性 0,1,1），
   单写 .mine-badge（0,1,0）会被它压掉，徽章被撑满整行导致文字重叠。 */
.mine-badge,
.packet-top .mine-badge,
.packet-claims .mine-badge {
  display: inline-block;
  margin-left: 6px;
  padding: 1px 6px;
  border-radius: 6px;
  background: #ffefe0;
  color: #d8412c;
  font-size: 10px;
  font-weight: 800;
  vertical-align: middle;
}
@keyframes mine-shake {
  0%, 100% { transform: translateX(0); }
  20% { transform: translateX(-6px) rotate(-2deg); }
  40% { transform: translateX(6px) rotate(2deg); }
  60% { transform: translateX(-4px) rotate(-1deg); }
  80% { transform: translateX(4px) rotate(1deg); }
}
.open-card.mine-hit { animation: mine-shake .6s ease; }
.packet-message.mine-hit-bubble { box-shadow: 0 0 0 2px #ff8a5c inset; }

/* ── 红包气泡布局修正 ───────────────────────────────────────────────
   .packet-top 是 <span>，默认 display:inline，而底下的 <strong>/<span> 被设成了 block。
   行内元素含块级子元素会被拆成多个片段，导致：
     · min-height 失效、背景只覆盖行盒
     · position:relative 的包含块变成「跨行片段的并集」
     · 绝对定位的 .packet-seal 因此跑到内容中间，压在祝福语上（实测 x=188，应为 75+13）
   这是长期存在的布局缺陷，补上 display:block 让 padding-left 真正给印章留出位置。 */
.packet-message .packet-top { display: block; }
.packet-message .packet-bottom { display: flex; }

/* ── 发红包弹窗的余额条 ─────────────────────────────────────────────
   发包需要从余额扣款，所以先把余额摆出来；不足时直接给「去充值」入口，
   避免用户填完才发现发不出去。 */
.send-dialog .packet-balance {
  display: flex;
  align-items: center;
  gap: 8px;
  margin: 0 0 4px;
  padding: 10px 12px;
  border-radius: 10px;
  background: #f6f8f9;
  font-size: 12px;
}
.send-dialog .packet-balance-label { color: #7c8288; }
.send-dialog .packet-balance strong {
  flex: 1;
  color: #222;
  font-size: 15px;
  font-weight: 800;
}
.send-dialog .packet-balance.short { background: #fff4f2; }
.send-dialog .packet-balance.short strong { color: #d8412c; }
.send-dialog .packet-recharge {
  flex: 0 0 auto;
  height: 32px;
  padding: 0 14px;
  border: 0;
  border-radius: 8px;
  background: #ff8a1f;
  color: #fff;
  font-size: 12px;
  font-weight: 700;
  -webkit-tap-highlight-color: transparent;
  touch-action: manipulation;
}
.send-dialog .packet-recharge:active { transform: scale(.96); }
.send-dialog .packet-recharge.hidden { display: none; }
.send-dialog .packet-balance-hint {
  margin: 0 0 6px;
  padding: 0 2px;
  color: #d8412c;
  font-size: 11px;
  line-height: 1.5;
}
.send-dialog .packet-balance-hint.hidden { display: none; }

/* ── 登录态恢复过场 ─────────────────────────────────────────────────
   本机有 token 时要先向服务端确认会话有效才能进首页。
   这段等待期间展示明确的进度状态，而不是露出可填写的登录表单
   （后者会让人以为掉登录了，观感上也像"卡住"）。 */
.boot-gate {
  position: fixed;
  inset: 0;
  z-index: 200;
  display: grid;
  place-items: center;
  padding: 24px;
  /* 必须用不透明背景：渐变里的 transparent 会让底下的首页内容透出来，
     过场看上去像半透明蒙层而不是独立页面。 */
  background: #fff6ef;
  background-image: radial-gradient(circle at 82% 12%, #ffe0b8 0, rgba(255, 246, 239, 0) 42%);
  animation: boot-fade-in .22s ease both;
}
.boot-gate.hidden { display: none; }
.boot-gate.leaving { animation: boot-fade-out .32s ease both; pointer-events: none; }

.boot-card { display: grid; justify-items: center; text-align: center; }

.boot-logo {
  display: grid;
  place-items: center;
  width: 62px;
  height: 62px;
  margin-bottom: 22px;
  border-radius: 18px;
  background: linear-gradient(135deg, #ffb31e, #d51f25);
  color: #fff8e1;
  font-size: 28px;
  font-weight: 900;
  box-shadow: 0 14px 34px rgba(190, 40, 30, .26);
  animation: boot-logo-pulse 1.6s ease-in-out infinite;
}

.boot-spinner { display: flex; gap: 7px; margin-bottom: 16px; }
.boot-spinner i {
  width: 9px;
  height: 9px;
  border-radius: 50%;
  background: #e8543f;
  animation: boot-dot 1.1s ease-in-out infinite;
}
.boot-spinner i:nth-child(2) { animation-delay: .16s; }
.boot-spinner i:nth-child(3) { animation-delay: .32s; }

.boot-text { margin: 0; color: #4a2420; font-size: 15px; font-weight: 700; letter-spacing: .01em; }
.boot-sub { margin: 8px 0 0; min-height: 16px; color: #a1786f; font-size: 12px; }

.boot-retry {
  margin-top: 18px;
  height: 38px;
  padding: 0 22px;
  border: 0;
  border-radius: 10px;
  background: #e8543f;
  color: #fff;
  font-size: 13px;
  font-weight: 700;
}
.boot-retry.hidden { display: none; }

@keyframes boot-fade-in { from { opacity: 0; } to { opacity: 1; } }
@keyframes boot-fade-out { from { opacity: 1; } to { opacity: 0; } }
@keyframes boot-logo-pulse {
  0%, 100% { transform: scale(1); box-shadow: 0 14px 34px rgba(190, 40, 30, .26); }
  50% { transform: scale(1.06); box-shadow: 0 18px 40px rgba(190, 40, 30, .34); }
}
@keyframes boot-dot {
  0%, 100% { opacity: .3; transform: translateY(0); }
  50% { opacity: 1; transform: translateY(-5px); }
}
/* 尊重系统的"减少动效"设置 */
@media (prefers-reduced-motion: reduce) {
  .boot-logo, .boot-spinner i { animation: none; }
}