html, body { min-height:100%; background:#071427; }
body { margin:0; color:#dceeff; }
.meeting-page { width:100%; max-width:550px; min-height:100vh; margin:0 auto; padding-bottom:1.65rem; background:#08172d; position:relative; overflow-x:hidden; }
.meeting-notice { height:.54rem; display:flex; align-items:center; justify-content:center; gap:.16rem; padding:0 .2rem; background:#163661; color:#dceaff; font-size:.2rem; white-space:nowrap; overflow:hidden; }
.meeting-notice span { padding:.04rem .12rem; border:1px solid #7f9dc3; border-radius:4px; }
.meeting-notice b { font-weight:500; overflow:hidden; text-overflow:ellipsis; }
.meeting-header { height:.86rem; display:grid; grid-template-columns:.7rem 1fr .7rem; align-items:center; }
.meeting-header h1 { margin:0; text-align:center; color:#62ddff; font-size:.38rem; font-weight:500; }
.meeting-header button { border:0; background:transparent; color:#66dfff; font-size:.55rem; }
.meeting-header span { display:block; }
main { padding:0 .24rem; }
.live-stage { width:100%; aspect-ratio:16/9; position:relative; overflow:hidden; background:#000; border:1px solid #274f7e; border-radius:7px; }
.live-stage video { position:absolute; inset:0; width:100%; height:100%; object-fit:contain; background:#000; }
.live-online { position:absolute; left:.16rem; top:.14rem; z-index:4; padding:.08rem .15rem; border-radius:.25rem; background:rgba(3,35,20,.86); color:#7ff3a9; font-size:.2rem; }
.live-online strong { font-weight:600; }
.live-lock, .live-empty { position:absolute; inset:0; display:flex; flex-direction:column; align-items:center; justify-content:center; gap:.2rem; z-index:3; background:#000; }
.live-lock p { margin:0; color:#f1f5ff; font-size:.25rem; text-align:center; }
.live-empty { color:#aebbd0; font-size:.28rem; }
.primary-action { height:.64rem; padding:0 .48rem; border:0; border-radius:.32rem; background:linear-gradient(90deg,#12b7ff,#2677ff); color:#fff; font-size:.25rem; font-weight:600; box-shadow:0 6px 18px rgba(20,135,255,.28); }
.live-meta { display:grid; grid-template-columns:1fr 1fr; gap:.16rem; margin-top:.24rem; }
.live-meta>div { min-height:.92rem; padding:.14rem .22rem; display:flex; align-items:center; justify-content:space-between; gap:.12rem; border-radius:6px; background:#11345d; border:1px solid #19416f; }
.live-meta>div+div { background:#2a2045; border-color:#704aa1; }
.live-meta span { color:#dce8f7; font-size:.22rem; }
.live-meta strong { color:#ff7272; font-size:.27rem; }
.live-meta>div+div strong { color:#f2dcff; }
.group-action { width:100%; height:.74rem; margin-top:.22rem; border:0; border-radius:5px; background:#12345f; color:#5fdbff; font-size:.27rem; font-weight:600; }
.replay-section { margin-top:.28rem; }
.section-title { display:flex; align-items:center; gap:.12rem; margin-bottom:.16rem; }
.section-title h2 { margin:0; color:#63dafb; font-size:.3rem; font-weight:500; }
.section-title span { color:#7d9ab9; font-size:.2rem; }
.replay-list { display:flex; flex-direction:column; gap:.12rem; }
.replay-item { min-height:.72rem; padding:.11rem .16rem; display:flex; align-items:center; justify-content:space-between; gap:.15rem; border-radius:5px; background:#12345f; }
.replay-item>div { min-width:0; display:flex; align-items:center; gap:.12rem; }
.replay-item b { flex-shrink:0; color:#e5eefc; font-size:.22rem; font-weight:500; }
.replay-item span { color:#e5eefc; font-size:.22rem; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
.replay-item button { flex-shrink:0; height:.45rem; padding:0 .16rem; border:0; border-radius:4px; background:#06b9ff; color:#fff; font-size:.19rem; }
.replay-item:nth-child(even) button { background:#864bd2; }
.replay-empty { padding:.5rem 0; color:#7289a5; text-align:center; font-size:.23rem; }
.expand-replays { width:100%; height:.6rem; margin-top:.14rem; border:0; border-radius:4px; background:#17375f; color:#9edfff; font-size:.22rem; }
.feedback-section { margin-top:.28rem; border-radius:5px; background:#12345f; overflow:hidden; }
.feedback-toggle { width:100%; height:.7rem; padding:0 .18rem; display:flex; align-items:center; justify-content:space-between; background:transparent; color:#64dcff; font-size:.27rem; }
.feedback-toggle b { color:#b5d8f4; font-size:.21rem; font-weight:400; }
.feedback-body { height:0; overflow:hidden; transition:height .25s ease; }
.feedback-body.open { height:1.82rem; }
.feedback-window { height:1.52rem; margin:.04rem 0 .26rem; overflow:hidden; }
.feedback-track { width:max-content; display:flex; gap:.14rem; will-change:transform; }
.feedback-track.is-moving { animation:feedback-marquee 36s linear infinite; }
.feedback-item { width:5.7rem; height:1.44rem; flex-shrink:0; padding:.16rem .18rem; display:grid; grid-template-columns:1.72rem minmax(0,1fr); align-items:center; column-gap:.18rem; border:1px solid rgba(102,220,255,.16); border-radius:5px; background:rgba(5,20,42,.42); }
.feedback-item span { display:flex; align-items:center; align-self:stretch; padding-right:.16rem; border-right:1px solid rgba(98,219,255,.22); color:#62dbff; font-size:.2rem; white-space:nowrap; }
.feedback-item p { min-width:0; margin:0; color:#d7e5f5; font-size:.2rem; line-height:1.5; display:-webkit-box; -webkit-line-clamp:3; -webkit-box-orient:vertical; overflow:hidden; overflow-wrap:anywhere; }
@keyframes feedback-marquee { from { transform:translateX(calc(-50% - .07rem)); } to { transform:translateX(0); } }
.message-section { margin:.28rem 0 .18rem; padding:.2rem; border:1px solid rgba(99,218,251,.18); border-radius:6px; background:#0d2a4d; }
.message-title-row { display:flex; align-items:center; justify-content:space-between; gap:.16rem; }
.message-title-row h2 { margin:0; color:#64dcff; font-size:.29rem; font-weight:500; }
.message-title-row span { color:#90b5d3; font-size:.2rem; }
.message-compose { display:flex; gap:.12rem; margin-top:.16rem; }
.message-compose textarea { min-width:0; flex:1; min-height:.72rem; padding:.14rem; resize:vertical; border:1px solid rgba(102,220,255,.24); border-radius:5px; outline:0; background:#081b33; color:#e7f3ff; font-size:.22rem; line-height:1.45; }
.message-compose textarea::placeholder { color:#6686a7; }
.message-compose button { flex-shrink:0; width:1.2rem; border:0; border-radius:5px; background:#147ed7; color:#fff; font-size:.22rem; }
.message-list { display:flex; flex-direction:column; gap:.12rem; margin-top:.18rem; }
.message-item { padding:.14rem .16rem; border-left:3px solid #2d8edb; border-radius:4px; background:rgba(2,18,37,.58); }
.message-item.is-own { border-left-color:#6cc9ff; }
.message-meta { display:flex; align-items:center; justify-content:space-between; gap:.12rem; }
.message-meta b { color:#9bd9ff; font-size:.21rem; font-weight:500; }
.message-meta time { color:#6686a7; font-size:.18rem; }
.message-item p { margin:.09rem 0 0; color:#dbe9f8; font-size:.22rem; line-height:1.55; overflow-wrap:anywhere; }
.message-item.is-admin { border-left-color:#ff4141; background:rgba(117,17,17,.25); }
.message-item.is-admin .message-meta b { color:#ff5c5c; font-size:.27rem; font-weight:700; }
.message-item.is-admin p { color:#ff7979; font-size:.26rem; font-weight:600; }
.admin-badge { display:inline-flex; align-items:center; justify-content:center; width:.27rem; height:.27rem; margin-right:.07rem; border-radius:50%; background:#e63232; color:#fff; font-size:.18rem; font-style:normal; vertical-align:.02rem; }
.message-empty { padding:.32rem 0; color:#7894b1; font-size:.22rem; text-align:center; }
.download-meeting { position:fixed; right:max(18px,calc((100vw - 550px)/2 + 18px)); bottom:1.55rem; z-index:20; width:1.25rem; height:1.25rem; border:0; border-radius:50%; background:#ff3e3e; color:#fff; font-size:.23rem; font-weight:700; box-shadow:0 8px 24px rgba(255,40,40,.42); }
.signin-modal { position:fixed; inset:0; z-index:100; display:none; align-items:center; justify-content:center; padding:.35rem; background:rgba(0,0,0,.72); }
.signin-modal.open { display:flex; }
.signin-dialog { width:100%; max-width:5.7rem; padding:.38rem .32rem .34rem; position:relative; border:1px solid #315d8c; border-radius:8px; background:#0e2441; text-align:center; }
.signin-dialog h2 { margin:0; color:#60ddff; font-size:.32rem; }
.signin-dialog p { margin:.16rem 0 .24rem; color:#b9cee3; font-size:.23rem; }
.signin-dialog input { width:100%; height:.72rem; padding:0 .2rem; border:1px solid #315d8c; border-radius:5px; background:#08172d; color:#fff; font-size:.25rem; }
.signin-dialog .primary-action { width:100%; margin-top:.24rem; }
.signin-close { position:absolute; right:.14rem; top:.12rem; width:.5rem; height:.5rem; border:0; background:transparent; color:#88a8c8; font-size:.36rem; }
@media(max-width:370px){ main{padding:0 .16rem}.live-meta>div{padding:.12rem}.live-meta span{font-size:.19rem}.live-meta strong{font-size:.23rem}.replay-item{padding-left:.12rem;padding-right:.12rem}.replay-item span{font-size:.2rem} }