/* The Valenced phone preview. Units are dp: the phone is 412 x 915, matching the 1080 x 2400 captures.
   Every themed colour arrives through var(--c-KEY) / var(--r-KEY) set from data-k; nothing here hardcodes
   a Discord colour except fixed system chrome and user content (avatars, role colours, art). */

.vp-device {
	--vp-font: "gg sans", "ggsans", "Noto Sans", "Segoe UI Variable Text", "Segoe UI", Roboto, system-ui, sans-serif;
	position: relative;
	padding: 9px;
	background: #070809;
	border-radius: 46px;
	box-shadow: 0 0 0 1px #2c3133, 0 24px 60px -20px #000c;
	transform-origin: top center;
	flex: none;
}
.vp {
	position: relative;
	width: var(--vp-w, 412px);
	height: var(--vp-h, 915px);
	overflow: hidden;
	border-radius: 36px;
	font: 16px/1.3 var(--vp-font);
	letter-spacing: -.2px;
	color: var(--c-TEXT_DEFAULT);
	background: #000;
	-webkit-font-smoothing: antialiased;
	user-select: none;
	isolation: isolate;
}
.vp * { box-sizing: border-box; scrollbar-width: none; }
.vp *::-webkit-scrollbar { display: none; }
.vp :where(button, input) { font: inherit; color: inherit; background: none; border: 0; padding: 0; margin: 0; text-align: inherit; cursor: pointer; }
/* Keep the original control radius independent of the site chrome. */
.vp :where(button) { border-radius: 8px; }
.vp button:hover { background-color: transparent; }
.vp input { cursor: text; outline: none; user-select: text; }
.vp :where(h1, h2, h3, p) { margin: 0; font-weight: inherit; }
.vp :where(hr) { border: 0; border-top: 1px solid; margin: 0; }
.vp .ic { flex: none; display: block; }
.vp .vp-screen, .vp .vp-overlay { position: absolute; inset: 0; display: flex; flex-direction: column; }
.vp .vp-overlay { pointer-events: none; z-index: 20; }
.vp .vp-overlay > * { pointer-events: auto; }
.vp .vp-overlay:empty { display: none; }

/* System chrome */
.vp .vp-statusbar { height: 51px; flex: none; display: flex; align-items: center; justify-content: space-between; padding: 2px 30px 0; font-size: 15px; font-weight: 500; color: #fff; position: relative; z-index: 3; }
.vp .vp-statusbar.over { position: absolute; top: 0; left: 0; right: 0; }
.vp .vp-sb-icons { display: flex; gap: 6px; align-items: center; }
.vp .vp-navbar { height: 28px; flex: none; display: grid; place-items: center; position: relative; z-index: 4; }
.vp .vp-navbar i, .vp .vp-nav-scrim i { width: 108px; height: 4px; border-radius: 2px; background: #e6e6e8; }
.vp .vp-light .vp-statusbar { color: #111; }
.vp .vp-light .vp-navbar i, .vp .vp-light .vp-nav-scrim i { background: #222; }

/* Avatars and fixed art */
.vp .vp-av { position: relative; display: inline-block; flex: none; }
.vp .vp-av-img { width: 100%; height: 100%; border-radius: 50%; display: grid; place-items: center; color: #fff; font-weight: 700; text-shadow: 0 1px 2px #0004; }
.vp .vp-status { position: absolute; right: -2px; bottom: -2px; width: 34%; height: 34%; min-width: 10px; min-height: 10px; border-radius: 50%; box-shadow: 0 0 0 3px var(--ring, var(--c-BACKGROUND_BASE_LOWER)); }
.vp .vp-sicon { display: grid; place-items: center; border-radius: 16px; color: #fff; font-weight: 800; letter-spacing: -.5px; }

/* Main screens: rail + rounded panel */
.vp .vp-main { flex: 1; min-height: 0; display: flex; position: relative; }
.vp .vp-rail { width: 72px; flex: none; overflow-y: auto; padding: 7px 0 160px; }
.vp .vp-rail-item { position: relative; display: flex; justify-content: center; margin-bottom: 12px; }
.vp .vp-rail-btn, .vp .vp-rail-server { width: 48px; height: 48px; border-radius: 16px; display: grid; place-items: center; }
.vp .vp-pip { position: absolute; left: 0; top: 50%; width: 4px; height: 8px; margin-top: -4px; border-radius: 0 4px 4px 0; }
.vp .vp-pip.tall { height: 40px; margin-top: -20px; }
.vp .vp-panel { --ring: var(--c-PANEL_BG); flex: 1; min-width: 0; margin-top: 2px; border: 1px solid; border-right: 0; border-bottom: 0; border-radius: 20px 0 0 0; overflow-y: auto; padding: 0 16px; position: relative; }
.vp .vp-panel-title { font-size: 22px; font-weight: 700; line-height: 28px; margin-top: 13px !important; }
.vp .vp-dm-actions { display: flex; gap: 12px; margin-top: 7px; }
.vp .vp-btn-sq { width: 32px; height: 32px; border-radius: 10px; display: grid; place-items: center; border: 1px solid; flex: none; }
.vp .vp-btn-secondary, .vp .vp-btn-primary { height: 32px; border-radius: 10px; border: 1px solid; display: flex; align-items: center; justify-content: center; gap: 6px; font-size: 16px; font-weight: 600; padding: 0 14px; }
.vp .vp-btn-secondary.sm { height: 31px; font-size: 15px; padding: 0 10px; gap: 4px; border-radius: 8px; }
.grow { flex: 1; }
.vp .vp-activities { display: flex; gap: 18px; margin: 13px -16px 0 0; overflow-x: auto; padding-right: 16px; }
.vp .vp-activity { position: relative; flex: none; width: 223px; height: 87px; border-radius: 16px; display: flex; gap: 12px; padding: 9px; cursor: pointer; }
.vp .vp-activity-art { width: 70px; height: 70px; border-radius: 10px; flex: none; }
.vp .vp-activity-text { display: flex; flex-direction: column; min-width: 0; gap: 2px; font-size: 16px; }
.vp .vp-activity-text b { font-weight: 500; font-size: 17px; }
.vp .vp-activity-text > span:last-child { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; font-size: 15px; }
.vp .vp-activity-kind { position: absolute; right: 10px; top: 9px; }
.vp .vp-dms { margin-top: 12px; }
.vp .vp-dm { width: 100%; display: flex; align-items: center; gap: 12px; min-height: 55px; }
.vp .vp-dm-text { flex: 1; min-width: 0; display: flex; flex-direction: column; }
.vp .vp-dm-name { display: flex; align-items: center; gap: 6px; font-size: 17px; line-height: 21px; }
.vp .vp-dm-name b { font-weight: 500; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.vp .vp-dm.unread .vp-dm-name b { font-weight: 700; }
.vp .vp-dm-preview { font-size: 15px; line-height: 19px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.vp .vp-dm-meta { align-self: flex-start; margin-top: 9px; display: flex; flex-direction: column; align-items: flex-end; gap: 4px; font-size: 14px; }
.vp .vp-badge { min-width: 18px; height: 18px; border-radius: 9px; font-size: 12px; font-weight: 700; display: grid; place-items: center; padding: 0 5px; }
.vp .vp-wave { display: flex; align-items: center; gap: 6px; height: 34px; padding: 0 12px; border-radius: 10px; border: 1px solid; font-size: 16px; font-weight: 600; }
.vp .vp-group-av { position: relative; width: 36px; height: 36px; flex: none; }
.vp .vp-group-av .vp-av:first-child { position: absolute; left: 0; top: 0; }
.vp .vp-group-av .vp-av:last-child { position: absolute; right: 0; bottom: 0; box-shadow: 0 0 0 2px var(--ring); border-radius: 50%; }
.vp .vp-group-av.big { width: 80px; height: 80px; }
.vp .vp-clan { display: inline-flex; align-items: center; gap: 3px; height: 20px; padding: 0 5px; border-radius: 6px; font-size: 13px; font-weight: 600; flex: none; vertical-align: 1px; }
.vp .vp-clan i { width: 11px; height: 11px; border-radius: 3px 3px 6px 6px; background: linear-gradient(#e8e8ea, #9a9ba2); }

/* Bottom dock: quest card + nameplate, fading into BACKGROUND_BASE_LOWER */
.vp .vp-dock { position: absolute; left: 0; right: 0; bottom: 28px; padding: 46px 16px 2px; background: linear-gradient(transparent, var(--c-BACKGROUND_BASE_LOWER) 52%); z-index: 2; pointer-events: none; }
.vp .vp-dock-space { height: 170px; }
.vp .vp-userpanel { border-radius: 20px; overflow: hidden; border: 1px solid; pointer-events: auto; }
.vp .vp-quest { height: 55px; display: flex; align-items: center; gap: 12px; padding: 0 10px; }
.vp .vp-quest-icon { width: 40px; height: 40px; border-radius: 50%; display: grid; place-items: center; background: radial-gradient(#3b4ad1 45%, #0e1712 47% 58%, #2dbd6e 60%); color: #fff; flex: none; }
.vp .vp-quest-text { display: flex; flex-direction: column; line-height: 20px; }
.vp .vp-quest-text b { font-size: 17px; font-weight: 600; }
.vp .vp-quest-text span { font-size: 15px; }
.vp .vp-nameplate { height: 52px; display: flex; align-items: center; gap: 10px; padding: 0 10px; cursor: pointer; --ring: var(--c-MOBILE_FLOATINGBAR_BACKGROUND_NAMEPLATE); }
.vp .vp-np-text { flex: 1; min-width: 0; display: flex; flex-direction: column; line-height: 19px; }
.vp .vp-np-name { display: flex; align-items: center; gap: 6px; font-size: 17px; }
.vp .vp-np-name b { font-weight: 600; }
.vp .vp-np-activity { display: flex; align-items: center; gap: 5px; font-size: 14px; }
.vp .vp-overlay-btn { width: 36px; height: 36px; border-radius: 10px; display: grid; place-items: center; flex: none; }

/* Server channel list */
.vp .vp-banner { margin: 0 -16px; height: 129px; background: #2fe1f7; display: grid; place-items: center; }
.vp .vp-guild-head { padding-top: 14px; }
.vp .vp-guild-name { display: flex; align-items: center; gap: 6px; font-size: 22px; line-height: 28px; }
.vp .vp-guild-name b { font-weight: 700; }
.vp .vp-guild-badge { color: #c38cff; }
.vp .vp-guild-head p { font-size: 15px; line-height: 21px; }
.vp .vp-guild-head p span { margin: 0 4px; }
.vp .vp-guild-actions { display: flex; gap: 12px; margin: 8px 0 16px; }
.vp .vp-boost { position: relative; overflow: hidden; display: flex; align-items: center; justify-content: space-between; width: 100%; height: 30px; margin: 13px 0 12px; border-radius: 15px; padding: 0 10px 0 14px; font-size: 14px; }
.vp .vp-boost > * { position: relative; }
.vp .vp-boost b { font-weight: 600; }
.vp .vp-boost span:last-child { display: flex; align-items: center; gap: 4px; }
.vp .vp-boost-fill { position: absolute !important; inset: 0 auto 0 0; border-radius: 15px; background: linear-gradient(90deg, #6f3fa5, #b74ea8); }
.vp .vp-chan { width: 100%; display: flex; align-items: center; gap: 6px; height: 37px; font-size: 17px; position: relative; border-radius: 8px; }
.vp .vp-chan-roles { height: 54px; }
.vp .vp-chan-roles > span:nth-child(2) { flex: 1; }
.vp .vp-new { font-size: 11px; font-weight: 700; padding: 3px 7px; border-radius: 8px; }
.vp .vp-chan-name { flex: 1; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.vp .vp-chan-name.unread { font-weight: 600; }
.vp .vp-chan-count { font-size: 15px; font-weight: 600; }
.vp .vp-chan-wrap { position: relative; }
.vp .vp-chan-pip { position: absolute; left: -17px; top: 14px; width: 4px; height: 8px; border-radius: 0 4px 4px 0; }
.vp .vp-category { display: flex; align-items: center; gap: 3px; height: 37px; margin-top: 4px; font-size: 16px; font-weight: 600; }
.vp .vp-category span.closed .ic { transform: rotate(-90deg); }
.vp .vp-subthread { position: relative; height: 37px; display: flex; align-items: center; padding-left: 28px; font-size: 16px; }
.vp .vp-spine { position: absolute; left: 10px; top: -8px; width: 12px; height: 26px; border: 2px solid; border-top: 0; border-right: 0; border-bottom-left-radius: 8px; }

/* Channel header and chat */
.vp .vp-chan-header { height: 56px; flex: none; display: flex; align-items: center; padding: 0 4px; border-bottom: 1px solid; }
.vp .vp-icon-btn { width: 48px; height: 48px; display: grid; place-items: center; flex: none; }
.vp .vp-chan-title { flex: 1; min-width: 0; display: flex; align-items: center; gap: 5px; font-size: 20px; padding-left: 4px; }
.vp .vp-chan-title b { font-weight: 700; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.vp .vp-chan-sub { font-size: 13px; }
.vp .vp-chat-area { flex: 1; min-height: 0; display: flex; flex-direction: column; position: relative; }
.vp .vp-chat { --ring: var(--c-CHANNEL_BACKGROUND_DEFAULT); flex: 1; min-height: 0; overflow-y: auto; padding-bottom: 14px; }
.vp .vp-msg-tail { padding: 4px 16px 0 64px; font-size: 16.5px; line-height: 22.5px; }
.vp .vp-msg-tail-reactions { display: flex; gap: 4px; padding: 6px 0 0 64px; }
.vp .vp-msg { padding: 0 12px; margin-top: 16px; }
.vp .vp-msg.grouped { margin-top: 2px; }
.vp .vp-msg-row { display: flex; gap: 12px; position: relative; }
.vp .vp-msg-avatar { width: 40px; flex: none; cursor: pointer; }
.vp .vp-msg-body { flex: 1; min-width: 0; }
.vp .vp-msg-head { display: flex; align-items: center; gap: 6px; height: 22px; }
.vp .vp-msg-name { font-size: 17px; font-weight: 600; cursor: pointer; }
.vp .vp-time { font-size: 13.5px; }
.vp .vp-app { display: inline-flex; align-items: center; gap: 2px; height: 18px; padding: 0 5px; border-radius: 5px; font-size: 13px; font-weight: 600; }
.vp .vp-msg-text { font-size: 16.5px; line-height: 22.5px; overflow-wrap: anywhere; margin-top: 1px; }
.vp .vp-msg-text small { font-size: 13px; }
.vp .vp-code { font: 14px/18px ui-monospace, Consolas, monospace; padding: 1px 3px; border: 1px solid; border-radius: 4px; }
.vp .vp-mention { border-radius: 4px; padding: 0 2px; font-weight: 500; }
.vp .vp-reactions { display: flex; flex-wrap: wrap; gap: 4px; margin-top: 6px; }
.vp .vp-reaction { display: flex; align-items: center; gap: 6px; height: 30px; padding: 0 8px; border-radius: 8px; font-size: 15px; font-weight: 600; border: 1px solid transparent; }
.vp .vp-reaction span { font-size: 19px; line-height: 1; }
.vp .vp-reaction.add { padding: 0 6px; }
.vp .vp-thread-spine { position: absolute; left: 19px; top: 48px; bottom: 28px; width: 24px; border: 2px solid; border-top: 0; border-right: 0; border-bottom-left-radius: 10px; }
.vp .vp-thread { border: 1px solid; border-radius: 12px; padding: 9px 12px 10px 15px; font-size: 15px; margin-top: 10px; }
.vp .vp-thread-top { display: flex; justify-content: space-between; align-items: center; margin-bottom: 2px; }
.vp .vp-thread-top span { display: flex; align-items: center; gap: 2px; font-weight: 600; }
.vp .vp-reply { position: relative; display: flex; align-items: center; gap: 5px; padding-left: 52px; font-size: 13.5px; margin-bottom: 4px; white-space: nowrap; overflow: hidden; }
.vp .vp-reply .vp-msg-name { font-size: 13.5px; }
.vp .vp-reply-text { overflow: hidden; text-overflow: ellipsis; }
.vp .vp-reply-spine { position: absolute; left: 20px; top: 9px; width: 28px; height: 14px; border: 2px solid; border-right: 0; border-bottom: 0; border-top-left-radius: 8px; }
.vp .vp-follow-wrap { padding: 12px 12px 6px; flex: none; }
.vp .vp-follow { border: 1px solid; border-radius: 16px; padding: 18px 16px 14px; text-align: center; font-size: 15px; display: flex; flex-direction: column; gap: 14px; }
.vp .vp-follow .vp-btn-primary { width: 100%; height: 32px; }
.vp .vp-dm-intro { padding: 24px 16px 8px; display: flex; flex-direction: column; align-items: flex-start; gap: 6px; }
.vp .vp-dm-intro h2 { font-size: 26px; font-weight: 700; margin-top: 6px; }
.vp .vp-dm-intro p { font-size: 15px; }
.vp .vp-intro-actions { margin-top: 8px; }
.vp .vp-day { margin: 18px 16px 4px; border-top: 1px solid; height: 0; text-align: center; }
.vp .vp-day span { position: relative; top: -9px; padding: 0 6px; font-size: 12px; font-weight: 600; }

/* Unread banner, NEW MESSAGES divider, embeds, jump button */
.vp .vp-unread-bar { position: absolute; z-index: 2; top: 0; left: 0; right: 0; height: 44px; display: flex; align-items: center; justify-content: space-between; padding: 0 12px 0 16px; font-size: 16px; font-weight: 600; }
.vp .vp-newdiv { margin: 62px 12px 4px; border-top: 1px solid; height: 0; text-align: center; }
.vp .vp-newdiv span { position: relative; top: -9px; padding: 0 6px; font-size: 13px; font-weight: 600; letter-spacing: .1px; }
.vp .vp-embed { position: relative; margin-top: 6px; border-left: 4px solid; border-radius: 8px; padding: 12px 96px 14px 16px; font-size: 15.5px; line-height: 25px; }
.vp .vp-embed-title { display: block; font-size: 17px; font-weight: 600; margin-bottom: 6px; }
.vp .vp-embed-list { margin: 0 0 12px; padding-left: 22px; }
.vp .vp-embed p { margin-bottom: 12px; }
.vp .vp-embed small { font-size: 13px; line-height: 19px; display: block; }
.vp .vp-embed-thumb { position: absolute; top: 16px; right: 16px; width: 58px; height: 70px; border-radius: 10px; background: linear-gradient(160deg, #6b6b6b, #121212); }
.vp .vp-jump { position: absolute; z-index: 2; right: 16px; bottom: 6px; width: 40px; height: 40px; border-radius: 12px; display: grid; place-items: center; }

/* Chat box */
.vp .vp-chatinput-wrap { flex: none; padding: 6px 16px 2px; }
.vp .vp-chatinput { height: 56px; border-radius: 22px; border: 1px solid; display: flex; align-items: center; padding: 0 8px 0 10px; gap: 2px; }
.vp .vp-ci-btn { width: 42px; height: 42px; display: grid; place-items: center; flex: none; }
.vp .vp-ci-field { flex: 1; min-width: 0; height: 100%; font-size: 17px !important; padding-left: 4px !important; }
.vp .vp-ci-field::placeholder { color: var(--c-TEXT_MUTED); }
.vp .vp-send { width: 40px; height: 40px; display: grid; place-items: center; border-radius: 50%; flex: none; }

/* Pages that open on top */
.vp .vp-page { flex: 1; min-height: 0; display: flex; flex-direction: column; position: relative; }
.vp .vp-page-header { height: 64px; flex: none; display: flex; align-items: center; padding: 0 12px 0 4px; }
.vp .vp-page-header h1 { flex: 1; font-size: 20px; font-weight: 700; padding-left: 4px; }
.vp .vp-header-tools { display: flex; gap: 2px; }
.vp .vp-page-scroll { flex: 1; min-height: 0; overflow-y: auto; padding-bottom: 24px; }
.vp .vp-search-row { display: flex; align-items: center; gap: 10px; margin: 4px 16px 0; }
.vp .vp-search { flex: 1; height: 40px; border: 1px solid; border-radius: 10px; display: flex; align-items: center; gap: 8px; padding: 0 12px; cursor: text; min-width: 0; }
.vp .vp-search input { flex: 1; min-width: 0; font-size: 17px; height: 100%; }
.vp .vp-search input::placeholder { color: var(--c-INPUT_PLACEHOLDER_TEXT_DEFAULT); }
.vp .vp-square-btn { width: 40px; height: 40px; border-radius: 10px; display: grid; place-items: center; flex: none; border: 1px solid transparent; }
.vp .vp-square-btn.sm { width: 34px; height: 34px; border-radius: 8px; }
.vp .vp-section { font-size: 16px; font-weight: 500; margin: 28px 16px 10px !important; }
.vp .vp-rowgroup { margin: 0 16px; border-radius: 16px; overflow: hidden; }
.vp .vp-row { width: 100%; height: 56px; display: flex; align-items: center; text-align: left; }
.vp .vp-row-icon { width: 72px; flex: none; display: grid; place-items: center; padding-right: 0; margin-left: -4px; }
.vp .vp-row-label { flex: 1; height: 100%; display: flex; align-items: center; gap: 8px; padding-right: 14px; font-size: 17px; border-bottom: 1px solid transparent; margin-left: -4px; }
.vp .vp-row-label.divided { border-bottom-style: solid; }
.vp .vp-row-label > span:first-child { flex: 1; }
.vp .vp-row-label small { font-size: 15px; }
.vp .vp-plugin { margin: 13px 16px 0; border-radius: 16px; border: 1px solid; padding: 16px 16px 16px 14px; }
.vp .vp-plugin:first-of-type { margin-top: 20px; }
.vp .vp-plugin-head { display: flex; align-items: center; gap: 8px; }
.vp .vp-plugin-head b { flex: 1; font-size: 20px; font-weight: 600; }
.vp .vp-plugin p { font-size: 16.5px; line-height: 21px; margin-top: 8px !important; }
.vp .vp-switch { position: relative; width: 54px; height: 30px; border-radius: 15px; border: 1px solid; flex: none; transition: background-color .15s; }
.vp .vp-switch i { position: absolute; top: 2px; left: 2px; width: 24px; height: 24px; border-radius: 50%; transition: transform .15s; }
.vp .vp-switch.on i { transform: translateX(24px); }
.vp .vp-fab { position: absolute; right: 17px; bottom: 42px; width: 56px; height: 56px; border-radius: 16px; border: 1px solid; display: grid; place-items: center; z-index: 3; }
.vp .vp-fab-space { height: 80px; }
.vp .vp-theme-card { margin: 20px 16px 0; width: calc(100% - 32px); display: flex; align-items: center; border-radius: 16px; padding: 14px 16px; text-align: left; }
.vp .vp-theme-text { flex: 1; display: flex; flex-direction: column; gap: 3px; font-size: 15px; }
.vp .vp-theme-text b { font-size: 17px; font-weight: 500; }
.vp .vp-theme-dots { display: flex; gap: 6px; margin-top: 6px; }
.vp .vp-theme-dots i { width: 22px; height: 22px; border-radius: 50%; box-shadow: inset 0 0 0 1px #8883; }
.vp .vp-radio { width: 24px; height: 24px; border-radius: 50%; border: 2px solid transparent; display: grid; place-items: center; flex: none; }
.vp .vp-radio i { width: 10px; height: 10px; border-radius: 50%; }
.vp .vp-hint { margin: 24px 16px 0 !important; font-size: 15px; }
.vp .vp-empty { padding: 40px 24px; text-align: center; font-size: 15px; }

/* Search */
.vp .vp-search-head { display: flex; align-items: center; gap: 4px; padding: 6px 12px 0 4px; height: 70px; flex: none; }
.vp .vp-chip { font-size: 15px; padding: 3px 8px; border-radius: 6px; white-space: nowrap; }
.vp .vp-tabs { display: flex; justify-content: space-around; border-bottom: 1px solid; flex: none; margin: 0 0 6px; padding: 0 4px; }
.vp .vp-tabs button { position: relative; height: 46px; padding: 0 6px; font-size: 16.5px; font-weight: 600; }
.vp .vp-tabs button i { position: absolute; left: 0; right: 0; bottom: -1px; height: 3px; border-radius: 3px 3px 0 0; }
.vp .vp-member-group { font-size: 17px; font-weight: 500; margin: 22px 16px 10px !important; }
.vp .vp-member { width: 100%; display: flex; align-items: center; gap: 12px; padding-left: 12px; min-height: 56px; text-align: left; }
.vp .vp-member-text { flex: 1; min-width: 0; display: flex; flex-direction: column; justify-content: center; min-height: 56px; border-bottom: 1px solid transparent; }
.vp .vp-member-text.divided { border-bottom-style: solid; }
.vp .vp-member-name { display: flex; align-items: center; gap: 6px; font-size: 17px; font-weight: 600; }
.vp .vp-member-text small { font-size: 14px; display: flex; gap: 4px; align-items: center; white-space: nowrap; overflow: hidden; }
.vp .vp-page, .vp .vp-rowgroup { --ring: var(--c-MOBILE_ACTIONSHEET_BACKGROUND); }

/* Forum */
.vp .vp-forum { --ring: var(--c-BACKGROUND_SURFACE_HIGH); flex: 1; min-height: 0; overflow-y: auto; padding-bottom: 90px; }
.vp .vp-forum-bar { display: flex; justify-content: space-between; padding: 9px 12px; border-bottom: 1px solid; }
.vp .vp-post { margin: 22px 12px 0; border: 1px solid; border-radius: 16px; padding: 14px 16px 14px; cursor: pointer; }
.vp .vp-post-tags { display: flex; gap: 6px; align-items: center; flex-wrap: wrap; }
.vp .vp-pin { width: 24px; height: 24px; border-radius: 50%; display: grid; place-items: center; }
.vp .vp-tag { height: 24px; padding: 0 9px; border: 1px solid; border-radius: 12px; font-size: 13.5px; font-weight: 600; display: flex; align-items: center; }
.vp .vp-post-meta { display: flex; gap: 8px; align-items: baseline; margin-top: 12px; font-size: 16px; }
.vp .vp-post-meta b { font-weight: 600; }
.vp .vp-post-meta small { font-size: 14px; }
.vp .vp-post h3 { font-size: 20px; margin-top: 4px; }
.vp .vp-post p { font-size: 16px; line-height: 22px; margin-top: 4px; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
.vp .vp-post-foot { display: flex; align-items: center; gap: 6px; margin-top: 14px; font-size: 16px; }
.vp .vp-post-react { margin-left: auto; display: flex; gap: 6px; align-items: center; height: 26px; padding: 0 8px; border-radius: 8px; border: 1px solid; font-weight: 600; }

/* Profiles */
.vp .vp-profile { flex: 1; min-height: 0; overflow-y: auto; position: relative; --ring: var(--c-USER_PROFILE_GRADIENT_BACKGROUND); }
.vp .vp-profile-banner { height: 143px; }
.vp .vp-profile-close { position: absolute; top: 56px; left: 16px; width: 32px; height: 32px; border-radius: 9px; z-index: 2; }
.vp .vp-profile-avatar { position: absolute; top: 98px; left: 10px; padding: 6px; border-radius: 50%; }
.vp .vp-status-bubble { position: absolute; top: 138px; left: 107px; height: 38px; display: flex; align-items: center; gap: 8px; padding: 0 16px 0 12px; border-radius: 19px; font-size: 17px; }
.vp .vp-profile-body { padding: 52px 16px 0; }
.vp .vp-profile-body h1 { font-size: 26px; font-weight: 700; display: flex; align-items: center; gap: 4px; }
.vp .vp-profile-user { font-size: 17px; margin-top: 4px !important; display: flex; align-items: center; gap: 6px; flex-wrap: wrap; }
.vp .vp-badges { display: inline-flex; align-items: center; gap: 8px; height: 32px; padding: 0 9px; border-radius: 9px; margin-top: 10px; font-size: 15px; }
.vp .vp-badges span { display: flex; gap: 8px; }
.vp .vp-badges i { width: 18px; height: 18px; border-radius: 5px; }
.vp .vp-profile .vp-btn-primary { width: 100%; height: 40px; margin-top: 18px; border-radius: 10px; font-size: 17px; }
.vp .vp-profile-actions { display: flex; gap: 10px; margin-top: 18px; }
.vp .vp-profile-actions .vp-btn-primary { margin: 0; }
.vp .vp-profile-actions .vp-btn-sq { width: 52px; height: 40px; border-radius: 10px; }
.vp .vp-profile .vp-tabs { margin: 8px 0 16px; justify-content: space-between; }
.vp .vp-profile .vp-tabs button { padding: 0 18px; }
.vp .vp-card { border-radius: 16px; padding: 16px; margin-bottom: 16px; font-size: 17px; }
.vp .vp-card.row { display: flex; justify-content: space-between; align-items: center; padding: 12px 12px 12px 16px; }
.vp .vp-card b { font-weight: 600; }
.vp .vp-orbs { display: flex; align-items: center; gap: 6px; height: 40px; padding: 0 14px; border-radius: 10px; font-weight: 600; }
.vp .vp-game { display: flex; gap: 20px; margin-top: 12px; align-items: center; }
.vp .vp-game > span:last-child { display: flex; flex-direction: column; gap: 2px; }
.vp .vp-game small { font-size: 15px; }
.vp .vp-elapsed { display: flex; align-items: center; gap: 4px; font-weight: 700; }
.vp .vp-game-art { width: 78px; height: 78px; border-radius: 12px; background: #23282e; color: #4ea1f3; display: grid; place-items: center; font-size: 32px; font-weight: 800; }
.vp .vp-profile h3 { font-size: 16px; font-weight: 600; margin: 22px 0 10px; }
.vp .vp-bio { font-size: 17px; line-height: 24px; margin-bottom: 14px !important; }
.vp .vp-spoiler { border-radius: 4px; padding: 0 4px; }
.vp .vp-spoiler:not(.open) { color: transparent !important; }
.vp .vp-since { display: flex; align-items: center; gap: 6px; font-size: 17px; }
.vp .vp-tabbar { position: absolute; left: 58px; right: 58px; bottom: 30px; height: 68px; border-radius: 22px; border: 1px solid; display: flex; justify-content: space-around; align-items: center; z-index: 3; }
.vp .vp-tabbar button { position: relative; display: flex; flex-direction: column; align-items: center; gap: 4px; font-size: 13px; font-weight: 600; width: 64px; }
.vp .vp-dot { position: absolute; top: -2px; right: 14px; width: 9px; height: 9px; border-radius: 50%; }

/* Notifications */
.vp .vp-notif { width: 100%; display: flex; gap: 16px; padding: 12px 16px 12px 24px; text-align: left; align-items: flex-start; }
.vp .vp-notif-text { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 4px; font-size: 17px; line-height: 21px; }
.vp .vp-notif-quote { border-left: 2px solid; padding-left: 10px; margin-top: 4px; }
.vp .vp-notif small { font-size: 14px; margin-top: 2px; }

/* Overlays */
.vp .vp-scrim, .vp .vp-picker-dim { position: absolute; inset: 0; }
.vp .vp-sheet { position: absolute; left: 0; right: 0; bottom: 0; top: 366px; border-radius: 28px 28px 0 0; border: 1px solid; border-bottom: 0; padding: 30px 0 28px; display: flex; flex-direction: column; gap: 24px; animation: vp-up .2s ease-out; }
.vp .vp-sheet .vp-rowgroup { flex: none; }
.vp .vp-sheet .vp-rowgroup:last-of-type { flex: 1; overflow-y: auto; margin-bottom: 0; border-radius: 16px 16px 0 0; }
.vp .vp-handle { position: absolute; top: 10px; left: 50%; width: 36px; height: 4px; margin-left: -18px; border-radius: 2px; }
.vp .vp-quick { display: flex; justify-content: space-between; padding: 0 16px; margin-bottom: -5px; }
.vp .vp-quick button { width: 48px; height: 48px; border-radius: 12px; display: grid; place-items: center; font-size: 27px; }
.vp .vp-sheet-row { width: 100%; height: 56px; display: flex; align-items: center; text-align: left; }
.vp .vp-sheet-row > span:first-child { width: 72px; display: grid; place-items: center; flex: none; margin-left: -4px; }
.vp .vp-sheet-label { flex: 1; height: 100%; display: flex; align-items: center; justify-content: space-between; padding-right: 14px; font-size: 17px; border-bottom: 1px solid; margin-left: -4px; }
.vp .vp-sheet-row:last-child .vp-sheet-label { border-bottom-color: transparent !important; }
.vp .vp-nav-scrim { position: absolute; left: 0; right: 0; bottom: 0; height: 28px; display: grid; place-items: center; }
.vp .vp-alert { position: absolute; left: 16px; right: 16px; top: 50%; transform: translateY(-58%); border-radius: 24px; border: 1px solid; padding: 30px 24px 24px; text-align: center; display: flex; flex-direction: column; gap: 12px; animation: vp-pop .16s ease-out; }
.vp .vp-alert h2 { font-size: 21px; font-weight: 700; }
.vp .vp-alert p { font-size: 17px; margin-bottom: 14px; }
.vp .vp-alert button { height: 39px; border-radius: 10px; font-size: 16px; }
.vp .vp-popmenu { position: absolute; left: 72px; top: 191px; width: 220px; border-radius: 16px; border: 1px solid; overflow: hidden; animation: vp-pop .14s ease-out; }
.vp .vp-popmenu h2 { font-size: 18px; font-weight: 700; padding: 12px 16px; }
.vp .vp-pop-sep { height: 4px; border: 0 !important; }
.vp .vp-pop-row { width: 100%; height: 45px; display: flex; align-items: center; gap: 12px; padding: 0 16px 0 12px; font-size: 17px; border-top: 1px solid; }
.vp .vp-pop-row:first-of-type { border-top-color: transparent !important; }
.vp .vp-picker-input { position: absolute; left: 0; right: 0; bottom: 368px; }
.vp .vp-picker-input .vp-chatinput-wrap { background: transparent !important; }
.vp .vp-picker { position: absolute; left: 0; right: 0; bottom: 0; height: 368px; border-radius: 24px 24px 0 0; border: 1px solid; border-bottom: 0; padding: 16px 8px 28px; display: flex; flex-direction: column; gap: 10px; animation: vp-up .18s ease-out; }
.vp .vp-segmented { display: flex; height: 40px; border-radius: 12px; padding: 0; flex: none; }
.vp .vp-segmented button { flex: 1; border-radius: 12px; display: grid; place-items: center; font-size: 17px; font-weight: 600; }
.vp .vp-picker .vp-search { flex: none; }
.vp .vp-picker-head { font-size: 17px; font-weight: 600; padding: 6px 2px; margin: 0 -8px !important; padding-left: 10px; }
.vp .vp-emoji-grid { flex: 1; min-height: 0; overflow-y: auto; display: grid; grid-template-columns: repeat(8, 1fr); align-content: start; }
.vp .vp-emoji-grid button { height: 46px; font-size: 30px; display: grid; place-items: center; }
.vp .vp-picker-foot { display: flex; gap: 6px; align-items: center; margin: 0 -8px -28px; padding: 6px 10px 34px; flex: none; }
.vp .vp-picker-foot button { width: 40px; height: 40px; border-radius: 50%; display: grid; place-items: center; }
.vp .vp-picker-foot .end { margin-left: auto; }
.vp .vp-toasts { position: absolute; top: 56px; left: 0; right: 0; display: flex; flex-direction: column; align-items: center; gap: 8px; z-index: 30; pointer-events: none; }
.vp .vp-toast { display: flex; align-items: center; gap: 8px; height: 34px; padding: 0 14px 0 10px; border-radius: 17px; border: 1px solid; font-size: 15px; font-weight: 500; animation: vp-pop .16s ease-out; transition: opacity .3s; }
.vp .vp-toast.out { opacity: 0; }
@keyframes vp-up { from { transform: translateY(40px); opacity: .4; } }
@keyframes vp-pop { from { opacity: 0; scale: .96; } }

/* Component reference */
.vp .vp-ref { margin: 16px 16px 0; border-radius: 24px; padding: 20px; display: flex; flex-direction: column; gap: 10px; }
.vp .vp-ref h2 { font-size: 19px; font-weight: 700; text-align: center; margin-bottom: 6px !important; }
.vp .vp-ref-btn { height: 34px; border-radius: 10px; border: 1px solid transparent; display: grid; place-items: center; font-size: 14px; font-weight: 600; width: 100%; }
.vp .vp-ref-btn.plain { background: none; }
.vp .vp-ref-btn.expressive { background: linear-gradient(100deg, #f2f0ff, #e7e2ff 30%, #f6ecff 60%, #e2f0ff); }
.vp .vp-ref-btn.premium { background: linear-gradient(90deg, var(--c-REDESIGN_BUTTON_PREMIUM_PRIMARY_PURPLE_FOR_GRADIENT), var(--c-REDESIGN_BUTTON_PREMIUM_PRIMARY_PURPLE_FOR_GRADIENT_2)); }
.vp .vp-ref-btn.premium-basic { background: linear-gradient(90deg, var(--r-PREMIUM_TIER_0_PURPLE_FOR_GRADIENTS), var(--r-PREMIUM_TIER_0_BLUE_FOR_GRADIENTS_2)); }
.vp .vp-ref-btn.premium-basic.vp-pressed { background: linear-gradient(var(--c-REDESIGN_BUTTON_PREMIUM_PRIMARY_PRESSED_BACKGROUND), var(--c-REDESIGN_BUTTON_PREMIUM_PRIMARY_PRESSED_BACKGROUND)), linear-gradient(90deg, var(--r-PREMIUM_TIER_0_PURPLE_FOR_GRADIENTS), var(--r-PREMIUM_TIER_0_BLUE_FOR_GRADIENTS_2)); }
.vp .vp-ref-pair { display: flex; gap: 10px; }
.vp .vp-ref-line { display: flex; justify-content: space-between; align-items: center; font-size: 14px; font-weight: 600; }
.vp .vp-ref-badge { height: 20px; padding: 0 7px; border-radius: 6px; border: 1px solid; font-size: 12px; font-weight: 700; display: grid; place-items: center; }
.vp .vp-ref-badge.premium { background: linear-gradient(90deg, var(--c-BADGE_PREMIUM_BACKGROUND_GRADIENT_START), #b845c1); border-color: transparent; }
.vp .vp-rarity { display: flex; gap: 8px; flex-wrap: wrap; margin-top: 4px; }
.vp .vp-rarity span { height: 22px; padding: 0 8px; border: 1px solid; border-radius: 11px; font-size: 12px; font-weight: 700; display: grid; place-items: center; }
.vp .vp-check-row { display: flex; align-items: center; gap: 12px; font-size: 16px; }
.vp .vp-check { width: 24px; height: 24px; border-radius: 6px; border: 2px solid; display: grid; place-items: center; }
.vp .vp-ref-label { font-size: 14px; font-weight: 600; margin-top: 4px !important; }
.vp .vp-radios { display: flex; gap: 20px; }
.vp .vp-slider { position: relative; height: 4px; border-radius: 2px; margin: 12px 4px; }
.vp .vp-slider-fill { position: absolute; left: 0; top: 0; bottom: 0; border-radius: 2px; }
.vp .vp-slider-thumb { position: absolute; top: 50%; width: 18px; height: 18px; margin: -9px 0 0 -9px; border-radius: 50%; pointer-events: none; box-shadow: 0 1px 3px #0006; }
.vp .vp-slider input { position: absolute; inset: -12px 0; width: 100%; opacity: 0; cursor: pointer; }
.vp .vp-field { height: 44px; border: 1px solid; border-radius: 10px; padding: 0 14px !important; font-size: 16px; width: 100%; }
.vp .vp-field-error { display: flex; align-items: center; gap: 6px; font-size: 13px; }
.vp .vp-icon-toggles { display: flex; justify-content: space-around; margin-top: 6px; }
.vp .vp-icon-toggles button { width: 44px; height: 44px; border-radius: 12px; border: 1px solid transparent; display: grid; place-items: center; }
.vp .vp-ref-card { border: 1px solid; border-radius: 12px; padding: 14px; font-size: 15px; }
.vp .vp-notice { display: flex; align-items: center; gap: 10px; border: 1px solid; border-radius: 10px; padding: 10px 12px; font-size: 15px; }

/* Inspector */
.vp.inspecting, .vp.inspecting * { cursor: crosshair !important; }
.vp .vp-marks { position: absolute; inset: 0; pointer-events: none; z-index: 60; }
.vp .vp-mark { position: absolute; border-radius: 3px; }
.vp .vp-mark.key { outline: 2px solid #ff3df0; outline-offset: -1px; background: #ff3df022; }
.vp .vp-mark.hover { outline: 1.5px dashed #ffe680; outline-offset: -1px; background: #ffe68014; }
.vp .vp-mark.pinned { outline: 2.5px solid #ffe680; outline-offset: -1px; box-shadow: 0 0 0 4px #0007; }
.vp .vp-tip { position: absolute; max-width: 260px; padding: 5px 8px; background: #111416f2; color: #eef; border: 1px solid #444b4d; border-radius: 6px; font: 600 11px/1.4 system-ui, sans-serif; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.vp .vp-tip small { font: 10.5px ui-monospace, Consolas, monospace; color: #ffb3f5; }