* { box-sizing: border-box; -webkit-tap-highlight-color: transparent; }
html, body { margin: 0; height: 100%; background: #04121a; color: #dff4f7; font: 14px/1.5 -apple-system, "PingFang SC", "Microsoft YaHei", sans-serif; overflow: hidden; }
button, input { font: inherit; color: inherit; }
.hide { display: none !important; }
.fatal { display: none; position: fixed; inset: 0; z-index: 99; margin: 0; padding: 20px; background: #300; color: #fff; white-space: pre-wrap; font-size: 13px; overflow: auto; }

.btn { border: 1px solid #1e4a5a; background: #0b2a36; padding: 9px 16px; border-radius: 10px; cursor: pointer; white-space: nowrap; }
.btn.primary { background: linear-gradient(135deg, #12c2d6, #0a8fb8); border-color: transparent; color: #021118; font-weight: 600; }
.btn.ghost { background: transparent; }
.btn.small { padding: 5px 12px; font-size: 13px; }
.btn:disabled { opacity: .5; }
.badge { position: absolute; top: 0; right: 6px; min-width: 18px; height: 18px; padding: 0 5px; border-radius: 9px; background: #e53935; color: #fff; font-size: 11px; line-height: 18px; font-style: normal; font-weight: 600; }

/* 进入页 */
.join { height: 100%; overflow: auto; display: flex; align-items: center; justify-content: center; padding: 20px; background: radial-gradient(circle at 50% 0, #0d3b4b, #04121a 70%); }
.join-card { width: 100%; max-width: 340px; background: #08202b; border: 1px solid #154050; border-radius: 16px; padding: 28px 22px; display: flex; flex-direction: column; gap: 12px; }
.logo { width: 56px; height: 56px; border-radius: 14px; margin: 0 auto; display: flex; align-items: center; justify-content: center; font-weight: 800; color: #021118; background: linear-gradient(135deg, #2ee6f0, #0a8fb8); }
.join h1 { margin: 0; text-align: center; font-size: 20px; }
.sub { margin: -6px 0 6px; text-align: center; color: #7fa9b3; font-size: 13px; }
.join label { display: flex; flex-direction: column; gap: 4px; font-size: 13px; color: #9cc3cc; }
.join label.chk { flex-direction: row; align-items: center; gap: 8px; }
.join input:not([type=checkbox]), .form input { padding: 10px 12px; border-radius: 10px; border: 1px solid #1e4a5a; background: #04161e; outline: none; width: 100%; }
.err { color: #ff7b72; margin: 0; min-height: 1.4em; text-align: center; font-size: 13px; }

/* 会议页 */
.room { position: fixed; inset: 0; display: flex; flex-direction: column; }
.top { display: flex; align-items: center; gap: 8px; padding: 3px 10px; padding-top: max(3px, env(safe-area-inset-top)); font-size: 13px; background: #071a24; border-bottom: 1px solid #12323e; flex: 0 0 auto; }
.title { font-weight: 700; white-space: nowrap; }
.stats { flex: 1; display: flex; gap: 10px; justify-content: flex-end; font-size: 12px; color: #9cc3cc; white-space: nowrap; overflow: hidden; }
.conn { background: #b26a00; color: #fff; text-align: center; font-size: 12px; padding: 3px; }

.stage-area { flex: 1; min-height: 0; position: relative; display: flex; flex-direction: column; }
.spk-row { position: absolute; left: 6px; top: 6px; z-index: 3; display: flex; gap: 6px; max-width: calc(100% - 12px); overflow-x: auto; pointer-events: none; }
.spk { flex: 0 0 auto; display: flex; align-items: center; gap: 4px; padding: 2px 8px 2px 2px; border-radius: 16px; background: #000a; font-size: 11px; color: #fff; }
.spk .av { width: 24px; height: 24px; border-radius: 50%; display: flex; align-items: center; justify-content: center; font-weight: 700; font-size: 12px; background: #13404d; border: 2px solid transparent; transition: border-color .15s, box-shadow .15s; }
.spk.host .av { background: #0a6f86; }
.spk.talk .av { border-color: #2ee6f0; box-shadow: 0 0 8px #2ee6f0; }
.spk .mu { font-size: 10px; }
.board-box { flex: 1; min-height: 0; display: flex; align-items: center; justify-content: center; padding: 0; position: relative; }
#board { background: #fff; touch-action: none; display: block; }
.fs-btn { position: absolute; right: 6px; top: 6px; z-index: 4; border: 0; padding: 4px 10px; border-radius: 14px; background: #000a; color: #fff; font-size: 12px; cursor: pointer; }

/* 全屏：只留画板；画画的人工具条变成半透明浮层 */
body.fs .top, body.fs .bottom, body.fs .conn { display: none !important; }
body.fs .stage-area { background: #fff; }
body.fs .tools { position: fixed; left: 0; right: 0; bottom: 0; z-index: 5; background: #071a24cc; border-top: 0; padding-bottom: env(safe-area-inset-bottom); }
body.fs .fs-btn { top: max(6px, env(safe-area-inset-top)); }
body.fs .spk-row { top: max(6px, env(safe-area-inset-top)); }
body.fs .page-ind { bottom: calc(46px + env(safe-area-inset-bottom)); }
body.fs .bubbles { bottom: calc(46px + env(safe-area-inset-bottom)); }
.page-ind { position: absolute; right: 10px; bottom: 10px; font-size: 12px; padding: 2px 8px; border-radius: 8px; background: #0009; color: #fff; pointer-events: none; z-index: 2; }

/* 聊天弹幕：最近几条浮在画板左下 */
.bubbles { position: absolute; left: 8px; bottom: 8px; z-index: 3; display: flex; flex-direction: column; gap: 4px; max-width: 70%; pointer-events: none; }
.bub { background: #000b; color: #fff; padding: 3px 9px; border-radius: 12px; font-size: 12px; animation: bubIn .2s; word-break: break-all; transition: opacity .4s; }
.bub b { color: #8fe3ec; font-weight: 600; margin-right: 4px; }
.bub.rp { background: #c62828e6; pointer-events: auto; cursor: pointer; }
.bub.rp b { color: #ffe08a; }
@keyframes bubIn { from { transform: translateY(8px); opacity: 0; } }

/* 画笔工具条：一行可横向滑动 */
/* 画笔工具条：一行；颜色和粗细点"当前颜色"按钮弹出，省出画板空间 */
.tools { flex: 0 0 auto; position: relative; background: #071a24; border-top: 1px solid #12323e; }
.trow { display: flex; align-items: center; justify-content: center; gap: 1px; padding: 2px 4px; flex-wrap: nowrap; overflow-x: auto; scrollbar-width: none; }
.trow::-webkit-scrollbar { display: none; }
.tb .cur { width: 20px; height: 20px; border-radius: 50%; display: block; border: 2px solid #fff; background: #111; box-shadow: 0 0 0 1px #0008; }
.palette { position: absolute; left: 50%; bottom: 100%; transform: translateX(-50%); margin-bottom: 6px; display: flex; flex-wrap: wrap; justify-content: center; align-items: center; gap: 2px; padding: 6px; background: #08202bf2; border: 1px solid #154050; border-radius: 12px; box-shadow: 0 4px 16px #000a; z-index: 6; width: max-content; max-width: 96vw; }
@media (max-width: 620px) {
  .tb { min-width: 30px; height: 30px; padding: 0 4px; font-size: 14px; }
  .tb.wide { font-size: 12px; }
}
.colors { display: flex; gap: 2px; }
.sep { width: 1px; height: 22px; background: #1e4a5a; margin: 0 3px; }
.tb { min-width: 32px; height: 32px; padding: 0 6px; border: 0; border-radius: 8px; background: transparent; cursor: pointer; display: flex; align-items: center; justify-content: center; font-size: 15px; }
.tb.wide { font-size: 13px; }
.tb.on { background: #13404d; outline: 1px solid #2ee6f0; }
.tb:disabled { opacity: .35; }
.tb.color i { width: 18px; height: 18px; border-radius: 50%; display: block; border: 1px solid #0006; }
.tb.size i { display: block; border-radius: 50%; background: #dff4f7; }

.bottom { flex: 0 0 auto; background: #071a24; border-top: 1px solid #12323e; padding-bottom: env(safe-area-inset-bottom); }
.send { display: flex; gap: 6px; padding: 4px 8px 0; }
.send input { flex: 1; min-width: 0; padding: 6px 12px; border-radius: 18px; border: 1px solid #1e4a5a; background: #04161e; outline: none; }
.send .btn { border-radius: 18px; }
.acts { display: flex; justify-content: space-around; padding: 2px 2px 4px; overflow-x: auto; }
.act { position: relative; flex: 1 0 auto; min-width: 48px; border: 0; background: transparent; display: flex; flex-direction: column; align-items: center; font-size: 16px; padding: 1px 2px; line-height: 1.3; cursor: pointer; border-radius: 8px; }
.act span { font-size: 11px; color: #9cc3cc; margin-top: 1px; }
.act.on { background: #13404d; }
.act.off span { color: #ff7b72; }
.audio-tip { position: fixed; left: 50%; top: 30%; transform: translateX(-50%); z-index: 15; border: 0; padding: 14px 22px; border-radius: 14px; background: #f0b429; color: #1d1300; font-weight: 700; font-size: 16px; box-shadow: 0 6px 24px #000a; }

/* 底部弹出层 */
.sheet { position: fixed; inset: 0; z-index: 20; background: #0008; display: flex; align-items: flex-end; justify-content: center; }
.sheet-card { width: 100%; max-width: 560px; max-height: 75%; display: flex; flex-direction: column; background: #08202b; border-radius: 16px 16px 0 0; border: 1px solid #154050; border-bottom: 0; padding-bottom: env(safe-area-inset-bottom); animation: up .2s; }
@keyframes up { from { transform: translateY(40px); opacity: 0; } }
.sheet-hd { position: relative; padding: 12px 16px; font-weight: 700; text-align: center; border-bottom: 1px solid #12323e; }
.x { position: absolute; right: 8px; top: 6px; width: 34px; height: 34px; border: 0; background: transparent; font-size: 18px; color: #9cc3cc; cursor: pointer; }
.msgs { flex: 1; overflow-y: auto; padding: 10px 14px; display: flex; flex-direction: column; gap: 8px; min-height: 200px; }
.msg { font-size: 14px; word-break: break-word; }
.msg b { color: #8fe3ec; font-weight: 600; margin-right: 6px; }
.msg.host b { color: #f0b429; }
.msg.sys { color: #6c8f98; font-size: 12px; text-align: center; }
.msg .rpmsg { display: inline-flex; align-items: center; gap: 8px; margin-top: 4px; padding: 8px 12px; border-radius: 10px; background: #e53935; color: #fff; cursor: pointer; }
.msg .rpmsg.done { background: #a2474a; }
.people { overflow-y: auto; padding: 4px 12px 12px; }
.pp { display: flex; align-items: center; gap: 8px; padding: 9px 2px; border-bottom: 1px solid #0d2a35; }
.pp .nm { flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.pp .rl { font-size: 11px; color: #7fa9b3; }
.pp .off { color: #b26a00; font-size: 11px; }
.seg { display: flex; margin: 10px 14px 4px; border: 1px solid #1e4a5a; border-radius: 10px; overflow: hidden; }
.seg button { flex: 1; border: 0; background: transparent; padding: 8px; cursor: pointer; color: #9cc3cc; }
.seg button.on { background: #13404d; color: #2ee6f0; font-weight: 600; }
.rank { overflow-y: auto; padding: 4px 14px; min-height: 120px; }
.rk { display: flex; align-items: center; gap: 10px; padding: 8px 0; border-bottom: 1px solid #0d2a35; }
.rk .no { width: 28px; text-align: center; font-weight: 700; color: #7fa9b3; }
.rk .no.top { color: #f0b429; }
.rk .nm { flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.rk .v { font-variant-numeric: tabular-nums; color: #2ee6f0; }
.hint { color: #6c8f98; font-size: 12px; margin: 8px 14px 12px; }
.form { padding: 10px 16px 16px; display: flex; flex-direction: column; gap: 10px; }
.form label { display: flex; flex-direction: column; gap: 4px; font-size: 13px; color: #9cc3cc; }
.form .hint { margin: 0; }
.rp-btn { background: #e53935; border-color: transparent; color: #fff; font-weight: 700; padding: 12px; }

/* 屏幕中央红包 */
.rp-modal { position: fixed; inset: 0; z-index: 30; background: #000b; display: flex; align-items: center; justify-content: center; padding: 20px; }
.rp-card { position: relative; width: 280px; max-width: 100%; min-height: 400px; border-radius: 16px; background: #d84a3c; box-shadow: 0 10px 40px #000; overflow: hidden; display: flex; flex-direction: column; align-items: center; animation: pop .25s cubic-bezier(.2, 1.4, .5, 1); }
@keyframes pop { from { transform: scale(.6); opacity: 0; } }
.rp-top { width: 100%; padding: 46px 20px 70px; text-align: center; background: #e35a4b; border-radius: 0 0 50% 50% / 0 0 22% 22%; box-shadow: 0 3px 6px #0003; }
.rp-from { color: #ffe1a8; font-size: 15px; }
.rp-greet { color: #ffe1a8; font-size: 20px; margin-top: 14px; font-weight: 600; }
.rp-open { margin-top: -46px; width: 92px; height: 92px; border-radius: 50%; border: 0; background: #ebcd99; color: #3a2a10; font-size: 34px; font-weight: 700; cursor: pointer; box-shadow: 0 4px 10px #0004; z-index: 1; }
.rp-open.spin { animation: spin .8s linear infinite; }
@keyframes spin { to { transform: rotateY(360deg); } }
.rp-x { color: #ffe1a8; z-index: 2; }
.rp-result { width: 100%; flex: 1; display: flex; flex-direction: column; align-items: center; padding: 14px 16px 16px; color: #ffe1a8; }
.rp-amt { font-size: 34px; font-weight: 800; }
.rp-amt small { font-size: 14px; font-weight: 400; margin-left: 4px; }
.rp-note { font-size: 12px; opacity: .85; margin-top: 2px; text-align: center; }
.rp-list { width: 100%; margin-top: 10px; max-height: 170px; overflow-y: auto; background: #0002; border-radius: 10px; padding: 4px 10px; font-size: 13px; }
.rp-list div { display: flex; justify-content: space-between; padding: 4px 0; border-bottom: 1px solid #fff2; }
.rp-list .best { color: #fff; }
.rp-card.opened .rp-top { padding-bottom: 18px; }
.rp-card.opened .rp-open { display: none; }

.modal { position: fixed; inset: 0; background: #000a; display: flex; align-items: center; justify-content: center; z-index: 25; padding: 20px; }
.modal-card { background: #08202b; border: 1px solid #154050; border-radius: 14px; padding: 22px; width: 100%; max-width: 300px; text-align: center; }
.modal-card .row { display: flex; gap: 10px; justify-content: center; margin-top: 14px; }
.toast { position: fixed; left: 50%; top: 60px; transform: translateX(-50%); background: #000d; color: #fff; padding: 8px 16px; border-radius: 10px; font-size: 13px; opacity: 0; pointer-events: none; transition: opacity .2s; z-index: 40; max-width: 90%; text-align: center; }
.toast.show { opacity: 1; }

/* ======== 正式版：页面 / 底部标签 / 卡片 ======== */
.btn.danger { background: #c62828; border-color: transparent; color: #fff; }
.btn:disabled { opacity: .5; }
.page { position: fixed; inset: 0; display: flex; flex-direction: column; background: #04121a; }
.tabpage { bottom: calc(56px + env(safe-area-inset-bottom)); }
.ptop { flex: 0 0 auto; display: flex; align-items: center; gap: 8px; padding: 10px 14px; padding-top: max(10px, env(safe-area-inset-top)); background: #071a24; border-bottom: 1px solid #12323e; font-size: 16px; }
.ptop .back { color: #dff4f7; text-decoration: none; font-size: 26px; line-height: 1; margin-right: 4px; }
.mini-logo { height: 24px; }
.scroll { flex: 1; overflow-y: auto; -webkit-overflow-scrolling: touch; padding: 12px; }
.tabbar { position: fixed; left: 0; right: 0; bottom: 0; z-index: 9; display: flex; background: #071a24; border-top: 1px solid #12323e; padding-bottom: env(safe-area-inset-bottom); }
.tabbar a { flex: 1; display: flex; flex-direction: column; align-items: center; padding: 6px 0 5px; color: #7fa9b3; text-decoration: none; font-size: 11px; }
.tabbar a i { font-style: normal; font-size: 20px; filter: grayscale(1); opacity: .7; }
.tabbar a.on { color: #2ee6f0; }
.tabbar a.on i { filter: none; opacity: 1; }
.card { background: #08202b; border: 1px solid #154050; border-radius: 14px; padding: 14px; margin-bottom: 12px; }
.card h3 { margin: 0 0 10px; font-size: 15px; }
.sec-title { font-size: 15px; margin: 18px 2px 8px; color: #9cc3cc; }
.row2 { display: flex; gap: 10px; } .row2 .btn { flex: 1; }
.center { text-align: center; }
.warn { color: #f0b429; font-size: 12px; margin: 6px 0 0; }
code { font-size: 12px; word-break: break-all; color: #8fe3ec; }
.inp { width: 100%; padding: 10px 12px; border-radius: 10px; border: 1px solid #1e4a5a; background: #04161e; outline: none; color: inherit; font: inherit; margin-top: 10px; }

.auth { align-items: center; justify-content: center; padding: 20px; overflow: auto; background: radial-gradient(circle at 50% 0, #0d3b4b, #04121a 70%); }
.auth-card { width: 100%; max-width: 360px; background: #08202b; border: 1px solid #154050; border-radius: 16px; padding: 24px 20px; margin: auto; }
.auth-card .logo { display: block; height: 48px; margin: 0 auto 6px; }
.auth-card h1 { text-align: center; margin: 0 0 14px; font-size: 20px; }
.auth-card .seg { margin: 0 0 6px; }
.auth-card .form { padding: 10px 0 0; }
.form input, .form textarea { color: inherit; font: inherit; }
.form .btn { padding: 11px; }

.live { background: linear-gradient(135deg, #0a6f86, #0b3b4d); border: 0; position: relative; }
.live .dot { display: inline-block; width: 8px; height: 8px; border-radius: 50%; background: #ff5252; margin-right: 6px; animation: blink 1.2s infinite; }
@keyframes blink { 50% { opacity: .3; } }
.live h2 { margin: 6px 0 4px; font-size: 18px; }
.live p { margin: 0 0 12px; color: #cdeef3; font-size: 13px; }
.live .btn { width: 100%; padding: 12px; font-size: 16px; }
.empty { text-align: center; color: #6c8f98; padding: 26px 10px; }
.up { display: flex; gap: 12px; align-items: center; }
.up .when { flex: 0 0 auto; text-align: center; min-width: 64px; padding: 6px 4px; border-radius: 10px; background: #0b2a36; }
.up .when b { display: block; font-size: 16px; color: #2ee6f0; }
.up .when span { font-size: 11px; color: #7fa9b3; }
.up .info { flex: 1; min-width: 0; }
.up .info b { display: block; }
.up .info p { margin: 2px 0 0; color: #9cc3cc; font-size: 12px; }
.up .cd { color: #f0b429; font-size: 12px; margin-top: 4px; font-variant-numeric: tabular-nums; }
.chips { display: flex; gap: 6px; margin: 10px 0; }
.chips button { flex: 1; border: 1px solid #1e4a5a; background: transparent; border-radius: 16px; padding: 5px 0; color: #9cc3cc; cursor: pointer; }
.chips button.on { background: #13404d; color: #2ee6f0; border-color: #2ee6f0; }
.me-card { display: flex; gap: 12px; align-items: center; }
.me-card .av { width: 52px; height: 52px; border-radius: 50%; display: flex; align-items: center; justify-content: center; font-size: 22px; font-weight: 700; background: #0a6f86; flex: 0 0 auto; }
.me-card .nm { font-size: 17px; font-weight: 700; }
.me-card .sub2 { font-size: 12px; color: #9cc3cc; margin-top: 2px; }
.tag-host { display: inline-block; font-size: 11px; padding: 0 6px; border-radius: 6px; background: #f0b429; color: #1d1300; margin-left: 6px; vertical-align: 2px; }
.stat2 { display: flex; } .stat2 div { flex: 1; text-align: center; } .stat2 b { display: block; font-size: 22px; color: #2ee6f0; } .stat2 span { font-size: 12px; color: #9cc3cc; }
.menu { background: #08202b; border: 1px solid #154050; border-radius: 14px; overflow: hidden; }
.menu a { display: flex; align-items: center; padding: 14px; color: inherit; text-decoration: none; border-bottom: 1px solid #0d2a35; }
.menu a:last-child { border-bottom: 0; }
.menu a i { margin-left: auto; font-style: normal; color: #6c8f98; font-size: 18px; }
.rec { display: flex; align-items: center; gap: 10px; padding: 10px 2px; border-bottom: 1px solid #0d2a35; }
.rec .l { flex: 1; min-width: 0; } .rec .l b { display: block; font-size: 14px; } .rec .l span { font-size: 12px; color: #7fa9b3; }
.rec .r { text-align: right; } .rec .r b { display: block; color: #ffd27a; }
.st { font-size: 11px; padding: 1px 6px; border-radius: 6px; }
.st.pending { background: #3d3410; color: #f0b429; } .st.batched { background: #10303d; color: #8fe3ec; } .st.paid { background: #12391f; color: #6ee59a; } .st.void { background: #3a1414; color: #ff8a80; }
.rec a { color: #8fe3ec; font-size: 11px; }

/* 会议页补充 */
.top .title { flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.top .stats { flex: 0 0 auto; }
.sel-box { position: absolute; border: 1.5px dashed #1e88e5; background: #1e88e522; pointer-events: none; z-index: 2; }
.tb.fsz { font-size: 13px; }
textarea.inp { resize: vertical; }
.pp .btn { margin-left: 2px; }
.pp .btn.small { padding: 4px 8px; font-size: 12px; }
.msg .del { margin-left: 6px; font-size: 11px; color: #ff8a80; cursor: pointer; }
/* 会议页盖住底部标签栏 */
.room { z-index: 12; background: #04121a; }
body.in-room .tabbar { display: none; }
/* 工具条按钮多：手机上可以横向滑动，不换行 */
@media (max-width: 620px) {
  .trow { justify-content: flex-start; padding: 2px 6px; }
  .trow .tb { flex: 0 0 auto; }
}