.mobile-demo { --app-height: 100vh; --nav-height: 64px; min-height: var(--app-height); background: #fff; }
@supports (padding: env(safe-area-inset-bottom)) { .mobile-demo { --nav-height: calc(64px + env(safe-area-inset-bottom, 0px)); } }
@supports (height: 100dvh) { .mobile-demo { --app-height: 100dvh; } }
.phone { width: 100%; max-width: 480px; height: var(--app-height); min-height: var(--app-height); margin: 0 auto; background: var(--surface); overflow: hidden; position: relative; }
.mobile-main { height: calc(var(--app-height) - var(--nav-height)); min-width: 0; padding-bottom: 0; overflow-y: auto; overscroll-behavior: contain; scrollbar-width: none; }
.mobile-main::-webkit-scrollbar { display: none; }
.mobile-page { display: none; min-width: 0; min-height: calc(var(--app-height) - var(--nav-height)); }
.mobile-page.is-active { display: block; }
.mobile-top { height: 62px; display: flex; align-items: center; justify-content: center; position: relative; background: #f1f1f3; border-bottom: 1px solid var(--line); }
.mobile-top h1 { font-size: 18px; margin: 0; font-weight: 700; }
.mobile-top small { display: block; color: var(--ink-500); font-size: 11px; text-align: center; line-height: 1; }
.top-close,.top-more { position: absolute; border: 0; background: transparent; width: 46px; height: 46px; font-size: 25px; color: var(--ink-950); }
.top-close { left: 3px; }.top-more { right: 3px; font-size: 22px; }
.bottom-nav { position: absolute; z-index: 20; bottom: 0; left: 0; width: 100%; height: var(--nav-height); display: grid; grid-template-columns: repeat(2,1fr); gap:8px; background: #fff; border-top: 1px solid var(--line); padding-bottom: env(safe-area-inset-bottom); }
.bottom-nav.three { grid-template-columns: repeat(3,1fr); }
.nav-item { min-height: 58px; border: 0; background: transparent; color: var(--ink-500); font-size: 12px; display: flex; flex-direction:column; align-items:center; justify-content:center; gap: 4px; padding: 6px; }
.nav-item[aria-current="page"] { color: var(--violet-700); font-weight: 700; }
.nav-icon { width: 22px; height: 18px; border: 2px solid currentColor; border-radius: 5px; position: relative; display: block; }
.nav-icon::after { content:""; position:absolute; width:5px; height:5px; border-radius:50%; background:currentColor; left:6px; top:4px; }
.section { padding: 20px 20px 0; }.section h2 { margin: 0; font-size: 25px; letter-spacing: -.04em; }.section p { color: var(--ink-500); margin: 4px 0 18px; }
.stage { height: 540px; background: linear-gradient(145deg,#252935,#0d1018 70%); position: relative; display:flex; align-items:center; justify-content:center; color:#d8dce7; touch-action:pan-y; transition:background 220ms ease; }
.stage[data-presenter="1"] { background:linear-gradient(145deg,#216071,#112d38 70%); }
.stage[data-presenter="2"] { background:linear-gradient(145deg,#5b5a98,#293658 70%); }
.stage[data-presenter="3"] { background:linear-gradient(145deg,#704757,#261b30 70%); }
.stage::after { content:"直播画面"; font: 700 13px/1 var(--font-sans); letter-spacing:.12em; opacity:.62; }
.stage .swap { position:absolute; top:18px; right:16px; min-height:44px; border:0; border-radius:22px; padding:0 14px; color:#fff; background:rgba(255,255,255,.13); }
.stage .douyin { position:absolute; bottom:20px; left:18px; width:74px; height:74px; border-radius:15px; border:0; background:#fff; color:var(--ink-950); font-size:12px; font-weight:700; box-shadow:var(--shadow-card); }
.stage .vip { position:absolute; top:-8px; right:3px; padding:2px 6px; border-radius:8px; background:#f5bc3b; font-size:10px; }
.stage .heart { position:absolute; bottom:20px; right:18px; width:58px; height:58px; border:0; border-radius:50%; background:#fff; color:#adb4bf; font-size:17px; }
.stage .heart[aria-pressed="true"] { color:var(--live-500); }
.thumbs { display:flex; gap:10px; padding:14px 18px 4px; overflow:hidden; }.thumb { flex:0 0 70px; height:88px; border:2px solid transparent; border-radius:7px; background:linear-gradient(150deg,#8a9aad,#313b4c); position:relative; }.thumb:nth-child(2){background:linear-gradient(150deg,#318b9e,#182c3a)}.thumb:nth-child(3){background:linear-gradient(150deg,#8e8ce0,#354567)}.thumb:nth-child(4){background:linear-gradient(150deg,#986170,#281c31)}.thumb.is-selected{border-color:var(--violet-600); box-shadow:0 0 0 2px var(--violet-100)}
.code-pill { margin: 10px 18px 12px; display:inline-block; background:#e9f5ff; color:var(--blue-700); border-radius:20px; padding:7px 16px; font-size:17px; font-weight:700; }
.unlock-grid { display:grid; grid-template-columns:repeat(3,1fr); gap:8px; padding:0 14px; }.unlock { border:0; background:#fff; padding:11px 3px; min-height:75px; box-shadow:var(--shadow-card); border-radius:10px; text-align:center; }.unlock strong{display:block;font-size:20px}.unlock span{font-size:12px;color:var(--ink-500)}
.hint { text-align:center; color:var(--ink-400); padding:18px 0 0; font-size:13px; }.hint i{display:block;width:25px;height:8px;border-radius:6px;background:var(--violet-600);margin:0 auto 8px}
.profile { padding: 36px 20px 18px; display:flex; align-items:center; gap:15px; }.avatar { flex:0 0 64px;width:64px;height:64px;border:0;border-radius:50%;background:linear-gradient(145deg,#d34add,#85299e); }.profile h2{margin:0;font-size:21px}.profile p{margin:2px 0;color:var(--ink-500)}
.card { margin: 0 14px 14px; padding: 20px; background:#fff; border-radius:18px; box-shadow:var(--shadow-card); }.coin-row{display:flex;align-items:center;justify-content:space-between}.coin-label{color:var(--ink-500)}.coin-value{font-size:36px;color:#e9a126;font-weight:800;line-height:1}.primary{min-height:46px;border:0;border-radius:13px;background:var(--violet-600);color:#fff;font-weight:700;padding:0 18px}.menu-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:22px 10px}.menu-btn{border:0;background:transparent;color:var(--ink-700);display:grid;place-items:center;gap:7px;min-height:74px}.menu-symbol{width:44px;height:44px;border-radius:15px;background:#e8e1ff;color:var(--violet-700);display:grid;place-items:center;font-size:22px;font-weight:700}.bind-row{display:flex;justify-content:space-between;color:var(--ink-500);min-height:46px;align-items:center}.bind-button{width:100%;border:0;background:transparent;padding:0}.danger{width:100%;min-height:46px;background:#fff;border:1px solid var(--line);border-radius:12px;font-weight:700}
.live-panel { margin: 0 14px 14px; padding: 16px; border-radius:18px; background:linear-gradient(135deg,#5b57e9,#7652ec); color:#fff; text-align:center; }.live-panel strong{display:block;font-size:20px;margin-bottom:12px}.live-panel .primary{width:100%;background:#fff;color:var(--violet-700)}.live-panel small{display:block;margin-top:12px;opacity:.78}.anchor-stage{margin:0 14px;height:272px;border-radius:15px;background:#050505;display:grid;place-items:center;color:#fff;font-size:14px}.anchor-stage::before{content:"";display:block;border:2px solid #fff;border-radius:50%;width:26px;height:26px;text-align:center;font-size:0}.info-card h3{margin:0 0 12px}.info-row{display:flex;justify-content:space-between;padding:11px 0;border-bottom:1px solid var(--line);color:var(--ink-500)}.info-row strong{color:var(--ink-800)}.fold-head{display:flex;justify-content:space-between;align-items:center}.fold-body{display:none;margin-top:14px;color:var(--ink-500)}.fold.is-open .fold-body{display:block}.composer textarea{width:100%;min-height:92px;border:1px solid var(--line);border-radius:12px;padding:12px;resize:none}.composer-actions{display:flex;gap:8px;margin-top:12px}.outline{min-height:44px;border:1px dashed var(--violet-600);border-radius:10px;background:#fff;color:var(--violet-700);padding:0 12px}.composer .primary{margin-left:auto}.destination.is-selected{border-style:solid;background:var(--violet-100);font-weight:700}.empty{text-align:center;color:var(--ink-400);padding:44px 0}.setting-card{margin-top:18px}.setting-card .info-row:first-child{padding-top:0}.upload-note{font-size:13px;color:var(--ink-500);margin:4px 0 14px}.stack{display:grid;gap:12px}.stack .danger{min-height:48px}
@media(max-width:390px){.stage{height:calc(100svh - 140px);min-height:440px}.section{padding-left:16px;padding-right:16px}.unlock-grid{padding:0 10px}}