/* Sample app screens with made-up data. Sizes are in px at 1x; scale them with `zoom` on the wrapper. */
.device { font-family: "Segoe UI", system-ui, sans-serif; color: #E8EEF8; }

/* Phone */
.phone-frame { width: 360px; height: 760px; border-radius: 46px; background: #05080D; padding: 11px; box-shadow: 0 30px 60px rgba(0, 0, 0, .45); }
.screen { width: 100%; height: 100%; border-radius: 36px; overflow: hidden; background: #111A28; display: flex; flex-direction: column; position: relative; }
.status { height: 34px; display: flex; align-items: center; justify-content: space-between; padding: 0 22px; font-size: 13px; background: #1A3352; }
.status i { font-style: normal; letter-spacing: 2px; font-size: 11px; opacity: .85; }
.appbar { background: #1A3352; padding: 6px 18px 14px; font-size: 19px; display: flex; gap: 14px; align-items: center; }
.content { flex: 1; padding: 14px 13px; display: flex; flex-direction: column; gap: 12px; overflow: hidden; }
.h { font-size: 21px; padding: 2px 4px 0; }
.sub { font-size: 13.5px; color: #A9B7CF; padding: 0 4px; }
.card { background: #1A2536; border: 1px solid #2B3A52; border-radius: 16px; overflow: hidden; }
.card .head { padding: 13px 14px; display: flex; gap: 11px; align-items: center; background: #1F2D42; }
.card .body { padding: 12px 14px 14px; display: flex; flex-direction: column; gap: 9px; }
.avatar { width: 44px; height: 44px; border-radius: 50%; background: #23446E; display: grid; place-items: center; font-size: 22px; color: #DCE7FA; flex: none; }
.vname { font-size: 16.5px; line-height: 1.2; }
.vsub { font-size: 12.5px; color: #A9B7CF; margin-top: 2px; }
.row { display: flex; justify-content: space-between; align-items: center; }
.pill { font-size: 12px; border-radius: 8px; padding: 4px 9px; display: inline-block; }
.pill.wait { background: #2A3D5C; color: #C9D8F2; }
.pill.go { background: #1E4A35; color: #9BE7BF; }
.pill.no { background: #5A2A2A; color: #FFB4AB; }
.dir { width: 38px; height: 38px; border-radius: 10px; background: #2A4466; display: grid; place-items: center; font-size: 16px; color: #BFD5F7; }
.pos { display: flex; align-items: baseline; gap: 10px; }
.pos b { font-size: 30px; }
.pos span { font-size: 14px; color: #DDE6F5; }
.pos .red { color: #FF8A80; }
.btn { border-radius: 10px; padding: 11px; text-align: center; font-size: 14.5px; }
.btn.leave { background: #5B2B2B; color: #FFC4BD; }
.btn.join { background: #A8C7FA; color: #0B1D36; font-weight: 600; }
.btn.coming { background: #71DEB1; color: #0B1D16; font-weight: 600; }
.game .head { background: #1E4A35; }
.game.closed .head { background: #572B2B; }
.game .title { font-size: 17px; }
.game .meta { font-size: 13.5px; color: #C2CDE0; }
.nav { height: 62px; background: #0E141E; display: flex; justify-content: space-around; align-items: center; font-size: 11px; color: #95A3BA; }
.nav div { display: flex; flex-direction: column; align-items: center; gap: 3px; }
.nav div::before { content: ""; width: 18px; height: 16px; border: 2px solid currentColor; border-radius: 4px; }
.nav .on { color: #FFFFFF; }
.nav .on::before { border-color: #A8C7FA; }
.gesture { height: 22px; background: #0E141E; display: grid; place-items: center; }
.gesture::before { content: ""; width: 110px; height: 4px; border-radius: 2px; background: #59647A; }
.notice { position: absolute; left: 10px; right: 10px; top: 44px; background: rgba(240, 244, 252, .97); color: #172538; border-radius: 18px; padding: 12px 14px; box-shadow: 0 10px 30px rgba(0, 0, 0, .5); display: flex; gap: 11px; z-index: 2; }
.notice img { width: 34px; height: 34px; border-radius: 9px; flex: none; }
.notice .t { font-size: 13.5px; font-weight: 700; }
.notice .m { font-size: 12.5px; color: #3D4B61; margin-top: 2px; line-height: 1.3; }
.notice small { color: #6B788C; font-weight: 400; margin-left: 4px; }

/* Desktop */
.window { width: 1280px; height: 660px; background: #0A1220; border-radius: 10px; overflow: hidden; border: 1px solid #2A3854; box-shadow: 0 30px 70px rgba(0, 0, 0, .5); display: flex; flex-direction: column; }
.titlebar { height: 30px; background: #E9EDF3; color: #333; font-size: 12px; display: flex; align-items: center; padding: 0 12px; gap: 8px; }
.titlebar .x { margin-left: auto; letter-spacing: 22px; font-size: 13px; }
.dhead { display: flex; align-items: center; padding: 16px 20px; gap: 16px; }
.dhead .spade { font-size: 38px; color: #E3EBF8; }
.dhead .vn { font-size: 25px; font-weight: 700; }
.dhead .vs { font-size: 14px; color: #C9D4E6; margin-top: 2px; }
.dhead .mid { margin: 0 auto; text-align: center; font-size: 14px; color: #C9D4E6; line-height: 1.5; }
.dhead .tools { display: flex; gap: 10px; align-items: center; }
.conn { background: #173A2B; color: #CFEFDF; border-radius: 99px; padding: 8px 14px; font-size: 13px; display: flex; gap: 8px; align-items: center; }
.conn::before { content: ""; width: 10px; height: 10px; border-radius: 50%; background: #3DDC84; }
.tool { width: 74px; height: 56px; border-radius: 8px; background: #2F5DA8; font-size: 11px; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 4px; position: relative; }
.tool b { font-size: 18px; font-weight: 400; line-height: 1; }
.tool .count { position: absolute; top: -6px; right: -6px; background: #E5484D; color: #fff; border-radius: 99px; min-width: 20px; height: 20px; font-size: 11px; font-weight: 700; display: grid; place-items: center; }
.lists { flex: 1; display: grid; grid-template-columns: repeat(4, 1fr); gap: 8px; padding: 0 14px 10px; }
.list { background: #0D1626; border: 1px solid #23324C; border-radius: 6px; display: flex; flex-direction: column; overflow: hidden; }
.list .lh { padding: 12px; display: flex; justify-content: space-between; font-weight: 700; font-size: 15px; }
.list .cols { display: grid; grid-template-columns: 20px 1fr 60px 34px 64px; font-size: 11px; font-weight: 600; color: #C3CEE0; padding: 8px 8px; background: #101B2E; }
.list .r { display: grid; grid-template-columns: 20px 1fr 60px 34px 64px; white-space: nowrap; align-items: center; padding: 7px 8px; font-size: 14px; font-weight: 600; }
.list .r:nth-child(odd) { background: #0F1A2C; }
.list .r.sel { background: #24406B; }
.list .r em { font-style: normal; font-size: 12.5px; font-weight: 400; color: #C3CEE0; }
.list .r .acts { display: flex; gap: 3px; justify-content: flex-end; }
.ico { width: 19px; height: 19px; border-radius: 4px; display: grid; place-items: center; font-size: 11px; background: #2F5DA8; }
.ico.here { background: #2E9D63; }
.ico.bell { background: #D9A400; color: #1B1400; }
.tag { font-size: 10px; border-radius: 4px; padding: 1px 5px; margin-left: 5px; font-weight: 700; vertical-align: 1px; }
.tag.app { background: #23446E; color: #BFD5F7; }
.tag.coming { background: #1E4A35; color: #9BE7BF; }
.list .lf { margin-top: auto; padding: 8px; display: flex; gap: 5px; justify-content: flex-end; }
.list .lf span { font-size: 11.5px; border-radius: 5px; padding: 6px 9px; }
.marquee { margin: 0 14px 14px; border: 1px solid #5A2433; background: #2A1018; border-radius: 4px; padding: 11px 14px; font-size: 18px; font-weight: 700; }