/* VIP UI/UX overlay (v2)
   - Loaded AFTER lux.css
   - Scope fixes via body.vip overrides
*/

body.vip .row {
  margin-top: 10px;
  margin-bottom: 10px;
}

.advisor {
  display: flex;
  align-items: center;
  gap: 10px
}

.advisor img {
  width: 38px;
  height: 38px;
  border-radius: 999px;
  object-fit: cover;
  border: 1px solid var(--line)
}

.advisor .name {
  font-weight: 600
}

.vipIntroRow {
  display: flex;
  gap: 16px;
  align-items: center;
  justify-content: space-between
}

.vipIntroLeft {
  flex: 1;
  min-width: 0
}

.vipIntroRight {
  flex: 0 0 auto
}

@media (max-width:900px) {
  .vipIntroRow {
    flex-direction: column;
    align-items: flex-start
  }

  .vipIntroRight {
    width: 100%
  }
}

.inboxNew {
  border: 1px solid var(--line);
  border-radius: 14px;
  padding: 12px;
  background: var(--panel);
}


/* --- VIP UI Kit (2026) utilities --- */
.mt1 {
  margin-top: var(--s1)
}

.mt2 {
  margin-top: var(--s2)
}

.mt3 {
  margin-top: var(--s3)
}

.mt4 {
  margin-top: var(--s4)
}

.mt5 {
  margin-top: var(--s5)
}

.mt6 {
  margin-top: var(--s6)
}

.mb1 {
  margin-bottom: var(--s1)
}

.mb2 {
  margin-bottom: var(--s2)
}

.mb3 {
  margin-bottom: var(--s3)
}

.mb4 {
  margin-bottom: var(--s4)
}

.mb5 {
  margin-bottom: var(--s5)
}

.mb6 {
  margin-bottom: var(--s6)
}

.gap1 {
  gap: var(--s1)
}

.gap2 {
  gap: var(--s2)
}

.gap3 {
  gap: var(--s3)
}

.gap4 {
  gap: var(--s4)
}

.gap5 {
  gap: var(--s5)
}

.gap6 {
  gap: var(--s6)
}

.w100 {
  width: 100%
}

.flex1 {
  flex: 1
}

.justify-between {
  justify-content: space-between
}

.items-center {
  align-items: center
}

.items-start {
  align-items: flex-start
}

.items-stretch {
  align-items: stretch
}

/* Compact info pill (used instead of long "How to read" blocks). */
.abInfoPill{
  width:26px;
  height:26px;
  border-radius:999px;
  border:0;
  display:inline-flex;
  align-items:center;
  justify-content:center;
  color:rgba(255,255,255,.85);
  background:transparent;
  cursor:help;
  user-select:none;
  flex:0 0 auto;
  line-height:1;
  font-size:0;
}
.abInfoPill::before{
  content:"\ec38";
  font-family:"CoreUI-Icons-Solid";
  font-size:22px;
  line-height:1;
  display:inline-block;
}
:root[data-theme="light"] .abInfoPill{
  color: rgba(16,20,24,.72);
  background: transparent;
}

/* Momentum parts: color only the delta number, keep tail neutral. */
.abMomSep{ opacity:.75 }
.abMomTail{ opacity:.72 }
.abMomNum.up{ color: var(--abSignalUp, #89d084); font-weight: 650 }
.abMomNum.down{ color: var(--abSignalDown, #f24d4b); font-weight: 650 }

/* Rank trend delta: color only the numeric delta, keep "(1y)" neutral. */
.abTrendDeltaTail{ opacity:.72; font-weight: 600; margin-left: 4px }
.abTrendDeltaNum.up{ color:#89d084 }
.abTrendDeltaNum.down{ color:#f24d4b }


/* --- Unified VIP components (moved from inline <style> blocks) --- */

.muted {
  opacity: .78
}

/* Pills / Chips */
.pill {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 4px 10px;
  border-radius: 999px;
  font-size: 12px;
  line-height: 18px;
  border: 1px solid var(--line);
  background: var(--panel2);
  color: var(--text2);
}

/* Split layout (Inbox / Admin messages) */
.split {
  display: grid;
  grid-template-columns: 360px 1fr;
  gap: var(--s4);
  align-items: start;
}

@media (max-width: 980px) {
  .split {
    grid-template-columns: 1fr
  }
}

/* Threads list */
.thread {
  padding: 14px;
  border-radius: 16px;
  border: 1px solid var(--line);
  background: var(--panel);
  cursor: pointer;
  transition: background .16s ease, border-color .16s ease, transform .16s ease;
}

.thread:hover {
  background: var(--panel2);
  transform: translateY(-1px)
}

.thread.active {
  border-color: var(--successLine)
}

.thread .t {
  font-weight: 200
}

.thread .s {
  font-size: 13px;
  opacity: .88;
  margin-top: 4px;
  line-height: 1.35
}

.thread .meta {
  display: flex;
  justify-content: space-between;
  gap: 10px;
  margin-top: 10px;
  font-size: 12px;
  opacity: .72
}

/* Chat bubbles */
.chatbox {
  max-height: 520px;
  overflow: auto;
  padding-right: 6px;
  scroll-behavior: smooth;
  scrollbar-width: thin;
  scrollbar-color: rgba(255, 255, 255, .25) transparent;
}

.chatbox::-webkit-scrollbar {
  width: 8px
}

.chatbox::-webkit-scrollbar-track {
  background: transparent
}

.chatbox::-webkit-scrollbar-thumb {
  background: rgba(255, 255, 255, .18);
  border-radius: 999px;
  border: 2px solid transparent;
  background-clip: padding-box;
}

/* no hover variant to avoid invalid selector warnings in non-WebKit */
:root[data-theme="light"] .chatbox {
  scrollbar-color: rgba(0, 0, 0, .25) transparent
}

:root[data-theme="light"] .chatbox::-webkit-scrollbar-thumb {
  background: rgba(0, 0, 0, .20)
}

/* no hover variant to avoid invalid selector warnings in non-WebKit */
.bubble {
  padding: 10px 12px;
  border-radius: 16px;
  margin: 10px 0;
  max-width: 92%;
  border: 1px solid var(--line);
  background: rgba(255, 255, 255, .04);
}

.bubble.admin {
  margin-left: 0
}

.bubble.user {
  margin-left: auto;
  border-color: var(--successLine);
  background: var(--successSoft);
}

.bubble .t {
  white-space: pre-wrap;
  line-height: 1.45
}

.bubble .d {
  font-size: 12px;
  opacity: .70;
  margin-top: 6px
}

/* Profile layout helpers */
.grid2 {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: var(--s4);
}

@media (max-width: 780px) {
  .grid2 {
    grid-template-columns: 1fr
  }
}

.advisor {
  display: flex;
  align-items: center;
  gap: 12px
}

.advisor img {
  width: 44px;
  height: 44px;
  border-radius: 999px;
  object-fit: cover;
  border: 1px solid var(--line)
}

.advisor .name {
  font-weight: 650
}

.box {
  width: min(720px, 100%);
  background: rgba(0, 0, 0, .22);
  border: 1px solid var(--line);
  border-radius: 16px;
  padding: 14px;
}

/* Avatar upload block */
.avatarBlock {
  display: flex;
  align-items: center;
  gap: 16px;
  padding: 16px;
  border-radius: 18px;
  border: 1px solid var(--line);
  background: rgba(255, 255, 255, .03);
}

:root[data-theme="light"] .avatarBlock {
  background: rgba(0, 0, 0, .03);
}

.avatarBlock img {
  width: 80px;
  height: 80px;
  border-radius: 999px;
  object-fit: cover;
  border: 1px solid var(--line);
}

.avatarStatus {
  font-size: 12px;
  margin-top: 6px;
  min-height: 18px
}

.avatarStatus.success {
  color: var(--success)
}

.avatarStatus.error {
  color: rgba(248, 113, 113, .95)
}

/* Room card helpers */
.heartBtn {
  position: absolute;
  top: 10px;
  right: 10px;
  z-index: 5;
  width: 34px;
  height: 34px;
  border-radius: 999px;
  border: 1px solid var(--line);
  background: rgba(0, 0, 0, .28);
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
}

.heartBtn svg {
  width: 18px;
  height: 18px;
  display: block
}

.heartOff path {
  fill: none;
  stroke: var(--text);
  stroke-width: 2
}

.heartOn path {
  fill: var(--text)
}

.label {
  position: absolute;
  left: 10px;
  top: 10px;
  z-index: 5
}

.cardMeta {
  padding: 10px 4px 0 4px
}

.cardTitle {
  font-weight: 650
}

.cardSub {
  font-size: 13px;
  opacity: .86
}

.rankChip {
  display: inline-block;
  font-size: 11px;
  padding: 2px 8px;
  border-radius: 999px;
  background: var(--successSoft);
  border: 1px solid var(--successLine);
  margin-top: 6px;
}

.rankChip strong {
  font-weight: 700
}

:root[data-theme="light"] .box {
  background: rgba(255, 255, 255, .70);
}

/* Spacers (avoid inline style="height:..") */
.sp8 {
  height: 8px
}

.sp10 {
  height: 10px
}

.sp12 {
  height: 12px
}

.sp14 {
  height: 14px
}

.sp16 {
  height: 16px
}

.sp24 {
  height: 24px
}

.sp32 {
  height: 32px
}

.sp48 {
  height: 48px
}

.sp80 {
  height: 80px
}

/* Two-column page layout (main + sidebar) */
.abTwoCol {
  display: grid;
  grid-template-columns: 1fr 320px;
  gap: var(--s5);
  align-items: start;
}

.abTwoCol.oneCol {
  grid-template-columns: 1fr;
}

@media (max-width: 980px) {
  .abTwoCol {
    grid-template-columns: 1fr
  }
}

.fw650 {
  font-weight: 650
}

.fs13 {
  font-size: 13px
}

.hidden {
  display: none
}

/* More small utilities to eliminate inline styles */
.m0 {
  margin: 0
}

.wrap {
  flex-wrap: wrap
}

.minH620 {
  min-height: 620px
}

.w340 {
  width: 340px
}

.w320 {
  width: 320px
}

.w190 {
  width: 190px
}

.items-end {
  align-items: flex-end
}

.minW0 {
  min-width: 0
}

.mlAuto {
  margin-left: auto
}

.ml10 {
  margin-left: 10px
}

.maxH540 {
  max-height: 540px
}

.text-center {
  text-align: center
}

.fs11 {
  font-size: 11px
}

.fs12 {
  font-size: 12px
}

.fs16 {
  font-size: 16px
}

.fw700 {
  font-weight: 700
}

.op85 {
  opacity: .85
}

.lh15 {
  line-height: 1.5
}

.advisorCard {
  background: rgba(255, 255, 255, .03);
  border: 1px solid var(--line);
  border-radius: 16px;
  padding: 20px;
  position: sticky;
  top: 20px;
}

:root[data-theme="light"] .advisorCard {
  background: rgba(0, 0, 0, .03)
}

.advisorAvatar {
  width: 80px;
  height: 80px;
  border-radius: 999px;
  object-fit: cover;
  display: block;
  margin: 0 auto 12px;
  border: 1px solid var(--line);
}

.cardLink {
  display: block;
  text-decoration: none;
  color: inherit
}

.roomHero {
  height: 260px;
  border-radius: 14px;
  background: rgba(0, 0, 0, .18);
  border: 1px dashed var(--line);
  display: flex;
  align-items: center;
  justify-content: center;
  color: var(--muted);
  font-size: 13px;
}

.inlineRow {
  display: inline-flex;
  align-items: center;
  gap: 8px
}

/* --- Admin collector helpers (moved from inline styles) --- */
.adminCols {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 14px;
}

.adminList {
  margin-top: 0
}

.adminList .item {
  display: flex;
  justify-content: space-between;
  gap: 10px;
  padding: 10px;
  border: 1px solid rgba(255, 255, 255, .12);
  border-radius: 12px;
  margin: 8px 0;
  cursor: pointer;
}

.adminList .item:hover {
  background: rgba(255, 255, 255, .04)
}

.adminList .item.isDisabled {
  background: rgba(255, 255, 255, .03);
  opacity: .7;
}

.adminList .item.isDisabled .btn {
  border-color: rgba(255, 255, 255, .10);
  color: rgba(255, 255, 255, .6);
}

.adminListActions {
  display: flex;
  justify-content: flex-end;
  gap: 6px;
  margin-bottom: 6px;
}

.btn.tiny {
  padding: 4px 8px;
  font-size: 11px;
  border-radius: 8px;
}

.adminItemRow {
  display: flex;
  gap: 10px;
  align-items: center
}

.adminName {
  font-weight: 600
}

.adminMini {
  font-size: 12px;
  opacity: .75
}

.adminLabel {
  display: block;
  font-size: 12px;
  opacity: .75;
  margin: 0 0 6px 2px
}

.adminTextarea {
  min-height: 120px
}

.adminRowBtns {
  display: flex;
  gap: 10px;
  flex-wrap: wrap;
  align-items: center
}

.adminPick {
  position: relative
}

.adminPickList {
  position: absolute;
  left: 0;
  right: 0;
  top: 100%;
  margin-top: 6px;
  background: var(--panel);
  border: 1px solid var(--line);
  border-radius: 12px;
  box-shadow: 0 12px 32px rgba(0, 0, 0, .35);
  backdrop-filter: blur(6px);
  max-height: 260px;
  overflow: auto;
  z-index: 30;
}

.adminPickItem {
  display: flex;
  gap: 10px;
  align-items: center;
  padding: 10px 12px;
  cursor: pointer;
}

.adminPickItem+.adminPickItem {
  border-top: 1px solid var(--line)
}

.adminPickItem:hover,
.adminPickItem.active {
  background: rgba(255, 255, 255, .06)
}

.adminPickName {
  font-weight: 600;
  font-size: 13px
}

.adminPickMeta {
  font-size: 12px;
  color: var(--muted)
}

.adminPickEmpty {
  padding: 10px;
  font-size: 12px;
  color: var(--muted)
}

.adminPickSelected {
  margin-top: 8px
}

.adminPickRow {
  display: flex;
  gap: 10px;
  align-items: center
}

.adminPickClear {
  font-size: 12px;
  border: 1px solid var(--line);
  background: transparent;
  color: var(--text);
  padding: 4px 8px;
  border-radius: 999px;
  cursor: pointer;
}

.adminPickClear:hover {
  opacity: .8
}

/* --- Work gallery (premium canvas) --- */
.pvGalleryPanel {
  background: var(--panel);
  border: 1px solid var(--line);
  border-radius: 22px;
  padding: 22px;
  box-shadow: 0 22px 48px rgba(0, 0, 0, .32);
}

.pvHeroWrap {
  min-height: clamp(380px, 60vh, 720px);
  background: radial-gradient(120% 120% at 20% 10%, rgba(255, 255, 255, .06), rgba(0, 0, 0, 0));
  border-radius: 18px;
  overflow: hidden;
  display: flex;
  align-items: center;
  justify-content: center;
}

#pvHero {
  width: 100%;
  height: 100%;
  object-fit: contain;
  border-radius: 0;
  background: transparent
}

.pvHeroMedia {
  position: relative;
  width: 100%
}

.pvZoomBtn {
  position: absolute;
  left: 10px;
  bottom: 10px;
  width: 40px;
  height: 40px;
  border-radius: 999px;
  border: 1px solid var(--line);
  background: rgba(0, 0, 0, .28);
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  z-index: 6;
}

.pvZoomBtn svg {
  width: 18px;
  height: 18px;
  fill: none;
  stroke: #fff;
  stroke-width: 2
}

.pvThumbRow {
  gap: 12px;
  margin-top: 16px;
}

.pvThumb {
  width: 140px;
  height: 100px;
  border-radius: 16px;
  border: 1px solid var(--line);
  background: var(--panel2);
}

.pvThumb img {
  border-radius: 16px
}

.pvThumbTag {
  left: 10px;
  bottom: 10px;
  font-size: 11px;
  padding: 4px 10px;
  border-radius: 999px;
  background: rgba(0, 0, 0, .55);
  border: none;
  color: var(--text2);
  letter-spacing: .2px;
}
:root[data-theme="light"] .pvThumbTag{
  background: rgba(255, 255, 255, .86);
  border: 1px solid rgba(16,20,24,.18);
  color: rgba(16,20,24,.88);
}

.pvNav {
  margin-top: 16px;
  justify-content: flex-end;
  flex-wrap: wrap;
}

.pvIconBtn {
  min-width: 64px;
  height: 40px;
  padding: 0 12px;
  border-radius: 12px;
  border: 1px solid var(--line);
  background: var(--panel2);
  font-size: 12px;
}

@media (max-width:980px) {
  .pvGalleryPanel {
    padding: 16px
  }

  .pvHeroWrap {
    min-height: clamp(320px, 56vh, 600px)
  }

  .pvThumb {
    width: 120px;
    height: 88px
  }
}

@media (max-width:640px) {
  .pvGalleryPanel {
    padding: 12px
  }

  .pvHeroWrap {
    min-height: clamp(260px, 52vh, 520px)
  }

  .pvThumb {
    width: 110px;
    height: 82px
  }
}

.pvInfoPanel {
  display: flex;
  flex-direction: column;
  gap: 16px
}

.pvInfoPanel .sp8,
.pvInfoPanel .sp12,
.pvInfoPanel .sp14 {
  display: none
}

.pvInfoPanel .vipWorkMeta {
  gap: 10px
}

.pvInfoPanel #labels {
  display: flex;
  flex-wrap: wrap;
  gap: 8px
}

.pvInfoPanel .hr {
  margin: 6px 0
}

/* Rank trend panel */
.abRankTrend .abTrendCanvas {
  background: var(--panel);
  border: 1px solid var(--line);
  padding: 10px;
  border-radius: 12px;
}

.abRankTrend .abTrendCanvas svg {
  display: block
}

/* Work detail layout: keep two columns on desktop, stack only on smaller screens. */
.pvWorkGrid {
  display: grid;
  grid-template-columns: minmax(0, 1.6fr) minmax(0, 1fr);
  gap: var(--s4);
  align-items: start;
}

@media (max-width: 980px) {
  .pvWorkGrid {
    grid-template-columns: 1fr
  }
}

/* Lightbox */
.pvLightbox {
  position: fixed;
  inset: 0;
  background: rgba(0, 0, 0, .86);
  display: flex;
  align-items: center;
  justify-content: center;
  z-index: 999
}

.pvLightboxInner {
  position: relative;
  max-width: 98vw;
  max-height: 98vh
}

.pvLightboxInner img {
  max-width: 98vw;
  max-height: 98vh;
  object-fit: contain;
  display: block;
  border-radius: 0 !important;
  border: none !important;
}

.pvLightboxClose {
  position: absolute;
  top: 12px;
  right: 12px;
  width: 36px;
  height: 36px;
  border-radius: 999px;
  border: 1px solid rgba(255, 255, 255, .35);
  background: rgba(0, 0, 0, .35);
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
}

.pvLightboxClose svg {
  width: 16px;
  height: 16px;
  fill: #fff
}

.adminGrid3 {
  display: grid;
  grid-template-columns: 1fr 1fr 1fr;
  gap: 10px
}

.adminPanelFlex {
  flex: 1;
  min-width: 360px
}

.adminAdvisorBlock {
  margin: 10px 0 14px
}

.adminAdvisor img {
  width: 40px;
  height: 40px;
  border-radius: 999px;
  object-fit: cover;
  border: 1px solid var(--line);
}

.adminAvatar {
  width: 42px;
  height: 42px;
  border-radius: 999px;
  object-fit: cover;
  border: 1px solid var(--line);
  background: rgba(255, 255, 255, .06);
}

.adminAvatarRow {
  display: flex;
  gap: 10px;
  align-items: center;
  flex-wrap: wrap;
}

.adminAvatarControls {
  display: flex;
  flex-direction: column;
  gap: 6px;
  min-width: 200px;
}

.rowItem {

  align-items: center;
  justify-content: space-between;
  gap: 12px;
  padding: 10px 12px;
  border: 1px solid var(--line);
  background: var(--panel);
}

.rowItem:last-child {
  border-bottom: none
}

.rowItem-hot {
  padding: 5px 10px 10px 10px;
  border-radius: 0px;
  border: none;
  background: transparent;
}

.pill-interest {
  border-color: rgba(60, 203, 127, .35);
  background: linear-gradient(180deg, #26443d, rgba(60, 203, 127, .06));
  color: #79f08e;
}

.pill-hold {
  border-color: rgba(255, 200, 90, .35);
  background: linear-gradient(180deg, #454035, rgba(255, 200, 90, .06));
  color: #f8d264;
}

.adminPre {
  white-space: pre-wrap;
  word-break: break-word
}

/* --- Admin layout polish --- */
.adminSection {
  display: flex;
  flex-direction: column;
  gap: 10px;
}

.adminSectionHead {
  display: flex;
  flex-direction: column;
  gap: 4px;
}

.adminSectionTitle {
  font-weight: 650
}

.adminSectionSub {
  font-size: 12px;
  color: var(--muted)
}

.adminDivider {
  height: 1px;
  background: var(--line);
  margin: 8px 0;
}

.adminStack {
  display: flex;
  flex-direction: column;
  gap: 10px
}

.adminInviteItem {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  padding: 10px 12px;
  border: 1px solid var(--line);
  border-radius: 12px;
  background: var(--panel);
}

.adminInviteMeta {
  font-size: 12px;
  color: var(--muted)
}

.adminEmpty {
  font-size: 12px;
  color: var(--muted)
}

.adminActionsRow {
  display: flex;
  gap: 8px;
  flex-wrap: wrap;
  align-items: center
}

.adminActionsRowRight {
  justify-content: flex-end
}

.adminHeaderRow {
  display: flex;
  gap: 12px;
  align-items: center;
}

.adminHeaderRow .h1 {
  margin: 4px 0 2px
}

.adminHeaderPreview {
  margin-left: auto;
  width: 140px;
  height: 96px;
  border-radius: 12px;
  border: 1px solid var(--line);
  background: var(--panel);
  overflow: hidden;
}

.adminHeaderPreview img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block
}

.adminImgRow {
  display: grid;
  grid-template-columns: minmax(0, 1fr) 160px;
  gap: 12px;
  align-items: start;
}

.adminImgControls {
  display: flex;
  flex-direction: column;
  gap: 10px
}

.adminActionRowTight {
  align-items: flex-end
}

.adminFile {
  display: flex;
  align-items: center;
  gap: 10px;
  border: 1px solid var(--line);
  border-radius: 12px;
  padding: 8px 10px;
  background: rgba(255, 255, 255, .04);
}

.adminFile input {
  position: absolute;
  left: -9999px;
}

.adminFileBtn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  height: 32px;
  padding: 0 10px;
  border-radius: 10px;
  border: 1px solid var(--line);
  background: rgba(255, 255, 255, .08);
  font-size: 12px;
  font-weight: 600;
}

.adminFileName {
  font-size: 12px;
  color: var(--muted);
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.adminImgPreview {
  border: 1px solid var(--line);
  border-radius: 12px;
  background: var(--panel);
  min-height: 120px;
  display: flex;
  align-items: center;
  justify-content: center;
  overflow: hidden;
  font-size: 12px;
  color: var(--muted);
  position: relative;
}

.adminImgPreview img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
  pointer-events: none
}

.adminImgActions {
  position: absolute;
  left: 10px;
  right: 10px;
  bottom: 10px;
  display: flex;
  gap: 8px;
  flex-wrap: wrap;
  justify-content: flex-start;
  z-index: 2;
}

.adminIconBtn {
  width: 26px;
  height: 26px;
  border-radius: 10px;
  border: 1px solid var(--line);
  background: rgba(0, 0, 0, .35);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
}

.adminIconBtn svg {
  width: 12px;
  height: 12px;
  fill: currentColor
}

.adminHeaderActions {
  margin-top: 8px
}

.adminHeaderActions a {
  text-decoration: none;
}

.adminHeaderActions a:hover {
  text-decoration: none;
}

.adminInlineBtn {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  font-size: 12px;
  color: #fff;
  text-decoration: none;
  border: 1px solid var(--line);
  padding: 6px 10px;
  border-radius: 10px;
  background: rgba(0, 0, 0, .35);
}

.adminInlineBtn svg {
  width: 14px;
  height: 14px;
  fill: currentColor
}

.adminInlineBtn:hover {
  opacity: .85
}

.adminBtnIcon svg {
  width: 14px;
  height: 14px;
  fill: currentColor
}

.adminIconBtn.danger {
  color: #e06a6a;
  border-color: rgba(224, 106, 106, .45)
}

.adminLightbox {
  position: fixed;
  inset: 0;
  background: rgba(0, 0, 0, .85);
  display: flex;
  align-items: center;
  justify-content: center;
  z-index: 9999;
  padding: 20px;
}

.adminLightbox img {
  max-width: 92vw;
  max-height: 92vh;
  object-fit: contain;
  border-radius: 16px;
  border: 1px solid rgba(255, 255, 255, .18);
}

.adminLightboxClose {
  position: absolute;
  top: 18px;
  right: 18px;
  width: 34px;
  height: 34px;
  border-radius: 999px;
  border: 1px solid rgba(255, 255, 255, .4);
  background: rgba(0, 0, 0, .4);
  color: #fff;
  font-size: 16px;
  line-height: 32px;
  text-align: center;
  cursor: pointer;
}

.adminIconBtn {
  color: #fff
}

.adminHeaderPreview img {
  cursor: pointer
}

@media (max-width: 900px) {
  .adminImgRow {
    grid-template-columns: 1fr
  }

  .adminHeaderPreview {
    display: none
  }
}

.adminImgGroup {
  padding: 12px;
  border: 1px solid var(--line);
  border-radius: 14px;
  background: var(--panel);
  margin-top: 10px;
  display: flex;
  flex-direction: column;
  gap: 10px;
}

.adminImgHead {
  display: flex;
  flex-direction: column;
  gap: 4px
}

.adminImgSection {
  margin-top: 10px
}

.adminImgSectionTitle {
  font-size: 12px;
  letter-spacing: .12em;
  text-transform: uppercase;
  color: var(--muted);
  margin: 6px 0
}

/* Admin modal/table helpers */
.adminRow {
  display: flex;
  gap: 10px;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  margin: 10px 0 16px;
}

.adminTable {
  width: 100%;
  border-collapse: collapse
}

.adminTable th,
.adminTable td {
  padding: 10px;
  border-bottom: 1px solid var(--line);
  text-align: left;
  font-size: 13px;
  vertical-align: top
}

.adminModal {
  position: fixed;
  inset: 0;
  background: rgba(0, 0, 0, .55);
  display: none;
  align-items: center;
  justify-content: center;
  z-index: 9999;
  padding: 20px
}

.adminBox {
  width: min(720px, 100%);
  background: var(--bg0);
  border: 1px solid var(--line);
  border-radius: 16px;
  padding: 14px
}

.adminGrid2 {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 10px
}

@media (max-width:800px) {
  .adminGrid2 {
    grid-template-columns: 1fr
  }
}

.adminGrid2>div {
  display: flex;
  flex-direction: column;
  gap: 6px
}

.adminGrid2 .kicker {
  margin: 6px 0 6px
}

.grid2 .kicker {
  margin: 6px 0 6px
}

.adminLabel2 {
  font-size: 12px;
  opacity: .75;
  margin: 6px 0 6px
}

.adminMini2 {
  font-size: 12px;
  opacity: .75
}

.adminLink {
  cursor: pointer;
  text-decoration: underline;
  text-underline-offset: 3px
}

.adminSpanAll {
  grid-column: 1/-1
}

/* Admin overview helpers */
.adminCards {
  display: grid;
  grid-template-columns: repeat(6, minmax(0, 1fr));
  gap: 10px;
}

@media (max-width: 1100px) {
  .adminCards {
    grid-template-columns: repeat(3, minmax(0, 1fr))
  }
}

@media (max-width: 720px) {
  .adminCards {
    grid-template-columns: repeat(2, minmax(0, 1fr))
  }
}

.adminStatK {
  font-size: 12px;
  color: var(--muted)
}

.adminStatV {
  font-size: 22px;
  font-weight: 700
}

.adminDeltaPos {
  color: var(--success)
}

.adminDeltaNeg {
  color: rgba(255, 140, 140, .95)
}

/* Admin works grid */
.adminWorkGrid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 14px;
}

@media (max-width: 980px) {
  .adminWorkGrid {
    grid-template-columns: repeat(2, minmax(0, 1fr))
  }
}

@media (max-width: 640px) {
  .adminWorkGrid {
    grid-template-columns: 1fr
  }
}

.adminWorkCard {
  border: 1px solid var(--line);
  border-radius: 16px;
  overflow: hidden;
  background: var(--panel);
}

.adminWorkImg {
  width: 100%;
  height: 200px;
  object-fit: cover;
  display: block
}

.adminWorkMeta {
  padding: 12px
}

.adminWorkTitle {
  font-weight: 700
}

.adminWorkSub {
  font-size: 13px;
  opacity: .85;
  margin-top: 3px
}

.adminWorkRank {
  font-size: 11px;
  opacity: .65;
  margin-top: 4px
}

.adminArtistRow {
  display: flex;
  gap: 8px;
  align-items: center
}

.adminArtistAvatar {
  width: 32px;
  height: 32px;
  border-radius: 50%;
  object-fit: cover;
  border: 1px solid var(--line)
}

.adminHero {
  height: 200px
}

.adminImages {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 12px;
}

.adminImagesWrap {
  display: block
}

.adminImgSection .adminImages {
  margin-bottom: 6px
}

@media (max-width: 980px) {
  .adminImages {
    grid-template-columns: repeat(2, minmax(0, 1fr))
  }
}

@media (max-width: 640px) {
  .adminImages {
    grid-template-columns: 1fr
  }
}

.adminImgCard {
  border: 1px solid var(--line);
  border-radius: 14px;
  overflow: hidden;
  background: var(--panel);
}

.adminImgCard img {
  width: 100%;
  height: 180px;
  object-fit: cover;
  display: block
}

.adminImgMeta {
  padding: 10px
}

.adminImgMeta .btn.small {
  white-space: nowrap;
  padding: 6px 10px
}

.adminImgMeta .row {
  flex-wrap: wrap
}

.adminImgLinks {
  display: flex;
  gap: 10px;
  flex-wrap: wrap;
  margin-top: 6px;
  font-size: 12px;
  color: var(--muted)
}

.adminList .itemRow {
  display: flex;
  gap: 10px;
  align-items: top
}

.adminList .left {
  min-width: 0
}

.adminList .name {
  font-weight: 600
}

.adminList .meta {
  font-size: 12px;
  color: var(--muted);
  white-space: nowrap;
  display: flex;
  flex-direction: row;
  align-items: center;
  justify-content: flex-end;
  gap: 8px;
}
.adminList .meta .adminRowBtns{display:inline-flex;}
.adminList .meta{flex-wrap:nowrap;}

/* Smaller buttons in admin lists */
.adminList .meta .btn.small{
  font-size: 11px;
  padding: 4px 8px;
  height: 26px;
  min-height: 26px;
  border-radius: 10px;
}

/* Admin table layout (Today’s Tours style) */
.adminTable{
  border:none;
  border-radius:0;
  overflow:visible;
  background:transparent;
  padding:0;
  width: calc(100% + 40px);
  margin-left: -20px;
  margin-right: -20px;
}
.adminTableHead,
.adminTableRow{
  display:grid;
  grid-template-columns: 2.2fr 1fr 1fr 1fr 1fr;
  gap:14px;
  align-items:center;
  padding:12px 20px;
}
.adminTableHead{
  background:rgba(255,255,255,0.04);
  font-size:10px;
  text-transform:uppercase;
  letter-spacing:.14em;
  color:var(--muted);
  border-bottom:1px solid rgba(255,255,255,0.08);
}
.adminTableRow{
  border-bottom:1px solid rgba(255,255,255,0.06);
  font-size:13px;
}
.adminTableRow .pill{margin-right:6px;}

/* Activity table buttons */
.adminTableBody .adminTableRow{background:transparent;}
.adminTableBody .adminRowBtns{display:flex; gap:8px; justify-content:flex-end; flex-wrap:wrap;}
.adminTable .btn.small{border-radius:10px; font-size:11px; padding:6px 10px;}
/* tighter buttons inside tables */
.adminTable .adminRowBtns .btn.small{
  line-height: 1.2;
  padding: 6px 10px;
  height: 28px;
  min-height: 28px;
}

/* Holds table layout (5 columns) */
.adminTable-holds .adminTableHead,
.adminTable-holds .adminTableRow{
  grid-template-columns: 1fr 1.8fr 2.2fr 1.2fr 0.8fr;
}

/* Activity table layout override (6 columns) */
.adminTable-activity .adminTableHead,
.adminTable-activity .adminTableRow{
  grid-template-columns: 2.2fr 1.2fr 1.6fr 1fr 1fr 1fr;
}

@media (max-width:980px){
  .adminTableHead,
  .adminTableRow{grid-template-columns: 2fr 1fr 1fr;}
  .adminTableHead div:nth-child(4),
  .adminTableHead div:nth-child(5),
  .adminTableRow div:nth-child(4),
  .adminTableRow div:nth-child(5){display:none;}
}
@media (max-width:640px){
  .adminTableHead,
  .adminTableRow{grid-template-columns: 1fr; gap:6px;}
  .adminTableRow{padding:12px;}
}

.activeItem {
  outline: 2px solid var(--successLine)
}

/* Square artwork presentation overrides (no rounded corners). */
.pvHeroWrap,
.pvHeroMedia,
#pvHero,
.pvThumb,
.pvThumb img {
  border-radius: 0 !important;
}

/* Let the hero media size match the image (no letterboxing spacing). */
.pvHeroWrap {
  background: transparent !important;
  border: none !important;
  box-shadow: none !important;
  padding: 0 !important;
  min-height: 0 !important;
  overflow: visible !important;
}

.pvHeroMedia {
  position: relative;
  display: block;
  width: 100%;
  background: transparent !important;
}

#pvHero {
  display: block;
  width: 100%;
  height: auto !important;
  max-height: none !important;
  object-fit: contain;
}

/* ================= CLEAN ART MARKET CTA BUTTONS ================= */
.actions3 {
  display: flex;
  gap: 14px;
  margin-top: 12px;
}

/* Base */
.actions3 button {
  appearance: none;
  width: 48%;
  min-width: 120px;
  height: 48px;
  padding: 0 20px;

  border-radius: 10px !important;
  font-size: 15px;
  font-weight: 600;
  letter-spacing: .2px;

  cursor: pointer;
  transition: background .15s ease, border .15s ease;
}

/* HOLD – neutral */
.actions3 .abHoldBtn {
  background: rgba(33, 40, 88, 0.18);
  border: 1px solid rgba(120, 128, 188, 0.483);
  color: rgba(255, 255, 255, 0.85);
}

.actions3 .abHoldBtn:hover {
  background: rgba(17, 25, 97, 0.3);
}

/* INTEREST – subtle green signal */
.actions3 .abInterestBtn {
  background: rgba(45, 201, 126, 0.04);
  border: 1px solid rgba(45, 201, 126, 0.35);
  color: rgba(255, 255, 255, 0.95);
}

.actions3 .abInterestBtn:hover {
  background: rgba(45, 201, 126, 0.08);
}


/* --- work_vip_template.css (inlined) --- */
/* Consolidated Work VIP template styles (v2 + v3.2 + v3) */
/* Source: work_vip_template_v2.css */
/* work_vip_template_v2.css
   Work page (Private View) — collector-first layout
   Loads AFTER /ui/vip.css
*/

/* --- Layout tuning (non-destructive) --- */
.pvWorkGridV2 {
  gap: 16px;
}

/* Make sure the rail reads like a premium “brief”, not a dashboard stack */
.pvInfoPanelV2 {
  border-radius: 18px;
}

/* Header */
.pvHeaderTop {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
}

.pvQuietPill {
  font-size: 12px;
  padding: 6px 10px;
  border-radius: 999px;
  border: 1px solid rgba(255, 255, 255, .10);
  background: rgba(255, 255, 255, .03);
  color: rgba(255, 255, 255, .78);
}

.pvArtistRow {
  margin-top: 6px
}

.pvArtistText {
  min-width: 0
}

.pvArtistName {
  line-height: 1.05
}

.pvWorkTitle {
  margin-top: 6px;
  font-size: 14px;
  color: rgba(255, 255, 255, .80);
  line-height: 1.3;
  word-break: break-word;
}

/* Labels injected by JS */
.pvLabels:empty {
  display: none
}

.pvLabels {
  margin-top: 10px;
}

/* Facts layout: two-column on wide screens */
.pvFacts {
  margin-top: 12px;
  display: grid;
  grid-template-columns: 1fr 280px;
  gap: 14px;
  align-items: start;
}

@media (max-width: 980px) {
  .pvFacts {
    grid-template-columns: 1fr
  }
}

/* Meta rows (generated by JS) */
.pvWorkMeta:empty {
  display: none
}

.pvWorkMeta .vipMetaRow {
  display: flex;
  justify-content: space-between;
  gap: 12px;
  padding: 8px 0;
  border-bottom: 1px solid rgba(255, 255, 255, .06);
}

.pvWorkMeta .vipMetaRow:last-child {
  border-bottom: none
}

.pvWorkMeta .vipMetaLabel {
  color: rgba(255, 255, 255, .55);
  font-size: 12px;
  letter-spacing: .10em;
  text-transform: uppercase;
}

.pvWorkMeta .vipMetaValue {
  color: rgba(255, 255, 255, .85);
  font-size: 13px;
  text-align: right;
}

/* Price block */
.pvPriceBlock:empty {
  display: none
}

.pvPriceBlock .vipPrice {
  font-size: 18px;
  font-weight: 400;
  letter-spacing: -.01em;
}

.pvPriceBlock .vipPriceNote {
  margin-top: 6px;
  font-size: 13px;
  color: rgba(255, 255, 255, .65);
}

/* Badges & actions */
.pvBadgeRow {
  margin-top: 10px
}

.pvActions {
  margin-top: 12px;
  display: flex;
  gap: 10px;
  flex-wrap: wrap;
}

.pvInboxNote {
  margin-top: 10px
}

/* Dividers */
.pvHr {
  margin: 14px 0;
  opacity: .8;
}

/* --- Trust / Source gallery --- */
.pvSourceCard {
  padding-top: 2px;
}

.pvSectionHead {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 10px;
  margin-bottom: 10px;
}

.pvSectionTitle {
  font-size: 12px;
  letter-spacing: .14em;
  text-transform: uppercase;
  color: rgba(255, 255, 255, .60);
}

.pvSectionHint {
  font-size: 12px;
  color: rgba(255, 255, 255, .55);
}

.pvSourceBadge {
  font-size: 12px;
  padding: 5px 10px;
  border-radius: 999px;
  border: 1px solid rgba(255, 255, 255, .10);
  background: rgba(80, 180, 120, .10);
  color: rgba(255, 255, 255, .78);
}

.pvSourceRow {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 10px 10px;
  border-radius: 14px;
  border: 1px solid rgba(255, 255, 255, .10);
  background: rgba(255, 255, 255, .02);
}

.pvSourceAvatar {
  width: 34px;
  height: 34px;
  border-radius: 999px;
  display: flex;
  align-items: center;
  justify-content: center;
  border: 1px solid rgba(255, 255, 255, .12);
  background: rgba(255, 255, 255, .04);
  color: rgba(255, 255, 255, .85);
  font-weight: 400;
  flex: 0 0 auto;
}

.pvSourceMain {
  min-width: 0
}

.pvSourceName {
  font-size: 14px;
  font-weight: 400;
  color: rgba(255, 255, 255, .90);
  line-height: 1.2;
}

.pvSourceMeta {
  margin-top: 4px;
  font-size: 12px;
  color: rgba(255, 255, 255, .62);
  line-height: 1.3;
}

.pvSourceNote {
  margin-top: 10px;
  font-size: 13px;
  color: rgba(255, 255, 255, .70);
  line-height: 1.45;
}

/* Partner list (collapsed) */
.pvDetails {
  margin-top: 12px;
  border: 1px solid rgba(255, 255, 255, .08);
  background: rgba(255, 255, 255, .015);
  border-radius: 14px;
  padding: 10px 12px;
}

.pvDetails summary {
  cursor: pointer;
  list-style: none;
  font-size: 13px;
  color: rgba(255, 255, 255, .80);
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
}

.pvDetails summary::-webkit-details-marker {
  display: none
}

/* --- Overrides: title + price emphasis --- */
.pvTitle {
  font-size: 19px;
  font-weight: 500;
}

.pvPriceMain {
  font-weight: 400;
}

.pvPartnerGrid {
  margin-top: 10px;
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 10px;
}

@media (max-width: 520px) {
  .pvPartnerGrid {
    grid-template-columns: 1fr
  }
}

.pvPartnerChip {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 10px 10px;
  border-radius: 14px;
  border: 1px solid rgba(255, 255, 255, .10);
  background: rgba(255, 255, 255, .02);
  color: rgba(255, 255, 255, .85);
  font-size: 13px;
}

.pvPartnerAvatar {
  width: 26px;
  height: 26px;
  border-radius: 999px;
  display: flex;
  align-items: center;
  justify-content: center;
  border: 1px solid rgba(255, 255, 255, .12);
  background: rgba(255, 255, 255, .04);
  color: rgba(255, 255, 255, .85);
  font-weight: 400;
}

/* --- Signal: keep readable, avoid “crypto dashboard” feel --- */
.pvRankBox:empty,
.pvSignalCard:empty {
  display: none
}

.pvSignal .abSignalCard,
.pvSignal .abSignalMiniWrap,
.pvSignal .abSignalMini {
  border-radius: 14px;
}

/* Trends collapsed */
.pvTrends summary {
  color: rgba(255, 255, 255, .75);
}

.pvTrends[open] {
  padding-bottom: 12px;
}

/* --- Media panel tuning (left) --- */
.pvGalleryPanelV2 {
  border-radius: 18px;
  overflow: hidden;
}

/* --- Chat: keep clean --- */
.pvChat .composer {
  display: flex;
  gap: 10px;
  align-items: flex-end;
}

.pvChat #msg {
  min-height: 46px;
}

/* Source: work_vip_template_v3_2.css */
/* Work VIP Template v3.2
   - Loaded after /ui/vip.css
   - Collector-facing work page refinements (no backend changes)
*/

.pvInfoPanel .kicker {
  opacity: .85
}

.pvArtistRow {
  display: flex;
  align-items: center;
  gap: 12px
}

.pvArtistText {
  min-width: 0
}

.pvArtistText .h1 {
  margin: 0 0 10px;
  line-height: 1.05
}

#artistSub {
  margin-top: 2px
}

.pvWorkTitle {
  margin-top: 10px;
  font-size: 20px;
  font-weight: 400;
  line-height: 1.25
}

.pvWorkSub {
  margin-top: 4px
}

.pvPriceAvailRow {
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  gap: 14px;
  flex-wrap: wrap
}

.pvPriceMain {
  display: flex;
  align-items: baseline;
  gap: 8px;
  flex-wrap: wrap
}

.pvPriceTax {
  display: block;
  font-size: 12px;
  opacity: .8;
  font-style: italic;
  margin-top: 6px
}

.pvPriceNote {
  margin-top: 6px;
  font-size: 12px;
  opacity: .8;
  font-style: italic
}

.pvAvailInline {
  display: flex;
  align-items: center;
  justify-content: flex-end;
  gap: 8px
}

.pvBadgeRow {
  margin-top: 4px
}

/* More-by-artist spacing */
.pvMorePanel {
  margin-top: 14px
}

.pvActionsTight {
  margin-top: 2px
}

.pvPartnerGallery {
  margin-top: 10px
}

.pvPartnerRow {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 10px 12px;
  border: 1px solid var(--line);
  border-radius: 14px;
  background: var(--panel);
}

.pvPartnerAvatar img {
  width: 36px;
  height: 36px;
  border-radius: 999px;
  object-fit: cover;
  border: 1px solid var(--line)
}

.pvPartnerText {
  min-width: 0
}

.pvPartnerLabel {
  font-size: 12px;
  text-transform: uppercase;
  letter-spacing: .08em;
  opacity: .75
}

.pvPartnerName {
  font-weight: 400;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis
}

.pvPartnerSub {
  margin-top: 2px
}

.pvWorkMeta {
  margin-top: 6px
}

.pvWorkMeta .vipMetaRow {
  padding: 8px 0
}

.pvWorkMeta .vipMetaLabel {
  opacity: .75
}

.pvWorkNotes {
  display: grid;
  gap: 6px;
  margin-top: 8px
}

.pvNoteLine {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  font-size: 12px;
  color: var(--text2)
}

.pvNoteText {
  flex: 1;
  min-width: 0;
  font-style: italic
}

.pvNoteLine .abInfo {
  margin-left: 6px
}

.pvChipRow {
  display: flex;
  flex-wrap: wrap;
  gap: 8px
}

.pvChip {
  display: inline-flex;
  align-items: center;
  padding: 6px 10px;
  border-radius: 999px;
  border: 1px solid var(--line);
  background: var(--panel);
  font-size: 13px;
  line-height: 1.2;
}

.pvSignalCard {
  border: 1px solid var(--line);
  border-radius: 16px;
  padding: 14px;
  background: var(--panel);
}

.pvSignalHead {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px
}

.pvSignalTitle {
  font-weight: 650
}

.pvSignalValue {
  font-size: 28px;
  font-weight: 750;
  margin-top: 8px
}

.pvSignalGrid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 10px;
  margin-top: 10px
}

@media (max-width:760px) {
  .pvSignalGrid {
    grid-template-columns: 1fr
  }
}

.pvSignalItem {
  border: 1px solid var(--line);
  border-radius: 14px;
  padding: 10px 12px;
  background: transparent;
}

.pvSignalLabel {
  font-size: 12px;
  text-transform: uppercase;
  letter-spacing: .08em;
  opacity: .75
}

.pvSignalMetric {
  margin-top: 6px;
  font-size: 16px;
  font-weight: 650
}

.pvSignalScale {
  margin-top: 12px
}

.pvSignalBar {
  width: 100%;
  height: 10px
}

.pvSignalTicks {
  display: flex;
  justify-content: space-between;
  font-size: 11px;
  opacity: .7;
  margin-top: 6px
}

.pvRankBlocks {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 12px
}

@media (max-width:760px) {
  .pvRankBlocks {
    grid-template-columns: 1fr
  }
}

.pvRankBlock {
  border: 1px solid var(--line);
  border-radius: 16px;
  padding: 12px 14px;
  background: var(--panel);
}

.pvRankTop {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px
}

.pvRankLabel {
  font-weight: 650
}

.pvPill {
  display: inline-flex;
  align-items: center;
  padding: 4px 8px;
  border-radius: 999px;
  border: 1px solid var(--line);
  background: transparent;
  font-size: 12px;
  opacity: .9;
}

.pvRankMain {
  margin-top: 8px;
  font-size: 22px;
  font-weight: 750
}

.pvRankSub {
  margin-top: 6px
}

.pvDelta {
  display: inline-flex;
  align-items: center;
  padding: 4px 8px;
  border-radius: 999px;
  border: 1px solid var(--line);
  background: transparent;
  font-size: 12px;
  opacity: .9;
}

.pvOrbit {
  border: 1px solid var(--line);
  border-radius: 16px;
  padding: 14px;
  background: var(--panel);
}

.pvOrbitHead {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 10px
}

.pvOrbitTitle {
  font-weight: 650
}

.pvOrbitAvatars {
  display: flex;
  align-items: center;
  margin-top: 10px;
  padding-left: 2px
}

.pvOrbitAvatar {
  display: inline-block;
  margin-left: -10px;
  border: 2px solid var(--panel);
  border-radius: 999px
}

.pvOrbitAvatar img {
  width: 34px;
  height: 34px;
  border-radius: 999px;
  object-fit: cover;
  border: 1px solid var(--line)
}

/* Chips row */
.pvChipsRow {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin-top: 10px
}

.pvChip {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 6px 10px;
  border-radius: 999px;
  border: 1px solid var(--abChipBorder, rgba(255, 255, 255, .14));
  background: linear-gradient(180deg, var(--abChipBg1, rgba(255, 255, 255, .06)), var(--abChipBg2, rgba(255, 255, 255, .02)));
  color: var(--abChipText, rgba(255, 255, 255, .78));
  font-size: 12px;
}

.pvChip strong {
  font-weight: 400;
  color: rgba(255, 255, 255, .92)
}

.pvChip .muted {
  color: var(--muted, rgba(255, 255, 255, .62))
}

.pvChipTier {
  border-color: var(--abChipTierBorder, rgba(120, 140, 170, .32));
  background: linear-gradient(180deg, var(--abChipTierBg1, rgba(120, 140, 170, .18)), var(--abChipTierBg2, rgba(120, 140, 170, .05)));
  color: var(--abChipTierText, rgba(210, 220, 235, .92));
}

.pvChipUp {
  border-color: var(--abChipUpBorder, rgba(92, 175, 125, .36));
  background: linear-gradient(180deg, var(--abChipUpBg1, rgba(92, 175, 125, .16)), var(--abChipUpBg2, rgba(92, 175, 125, .06)));
  color: var(--abChipUpText, rgba(200, 245, 220, .92));
}

.pvChipScore {
  border-color: rgba(143, 178, 255, .28);
  background: linear-gradient(180deg, rgba(143, 178, 255, .14), rgba(143, 178, 255, .05));
  color: rgba(210, 225, 255, .92);
}

/* Orbit avatars */
.pvOrbit {
  margin-top: 12px;
  border: 1px solid var(--line);
  border-radius: 14px;
  padding: 12px;
  background: rgba(255, 255, 255, .02)
}

.pvOrbitHead {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 12px
}

.pvOrbitTitle {
  font-size: 13px;
  font-weight: 400;
  color: rgba(255, 255, 255, .88)
}

.pvOrbitSub {
  font-size: 12px;
  color: var(--muted)
}

.pvAvatarStack {
  display: flex;
  align-items: center;
  margin-top: 10px
}

.pvAvatarStack .av {
  width: 30px;
  height: 30px;
  border-radius: 999px;
  border: 2px solid rgba(15, 16, 20, .92);
  margin-left: -8px;
  overflow: hidden;
  background: rgba(255, 255, 255, .04);
  display: grid;
  place-items: center
}

.pvAvatarStack .av:first-child {
  margin-left: 0
}

.pvAvatarStack img {
  width: 100%;
  height: 100%;
  object-fit: cover
}

.pvAvatarStack .av span {
  font-size: 11px;
  color: var(--muted);
  font-weight: 700
}

/* Collector Signal: classic green bar */
.workpage {
  --abSignalBarFill: #3CCB7F;
  --abSignalBarFillFade: rgba(60, 203, 127, .35);
}

/* Source: work_vip_template_v3.css */
/* Work VIP Template v3 (collector) – overlay loaded after vip.css
   Goals:
   - Keep rank charts visible (3y trends)
   - Show medium + dimensions under title
   - Show artist country + birth year under artist name (if available)
   - Artist name NOT linked
   - Add "Sourced via partner gallery" block with avatar
   - Optional "In their orbit" avatar row (top followers) – placeholder-ready
*/

body.vip .workpage.pvWorkGrid {
  gap: 18px
}

.pvInfoPanel {
  display: flex;
  flex-direction: column;
  gap: 14px
}

.pvHeaderBlock {
  display: flex;
  flex-direction: column;
  gap: 10px
}

/* Info blocks: keep full-width stacked blocks (no side-by-side squeeze) */
.pvInfoBlocks {
  display: flex;
  flex-direction: column;
  gap: 14px;
}

/* Left column stack */
.pvColMedia {
  display: flex;
  flex-direction: column;
  gap: 14px;
  position: relative;
  z-index: 1;
}

.pvColInfo {
  position: relative;
  z-index: 2;
}

/* Content blocks (artist/work, metrics, source, orbit, inbox) */
.pvBlock {
  border: 1px solid var(--line);
  border-radius: 24px;
  padding: 12px;
  background: rgba(255, 255, 255, .02);
  display: flex;
  flex-direction: column;
  gap: 12px;
}

.pvBlock+.pvBlock {
  margin-top: 12px
}

.pvBlock .hr {
  display: none
}

/* Metrics block (chips + charts) */
.pvBlock-metrics .pvRankTrends {
  margin-top: 6px
}

.pvBlock-metrics #rankTrendEmerging {
  margin-top: 10px
}

.pvMarketContext {
  margin-top: 6px;
  border: 1px solid var(--line);
  border-radius: 14px;
  padding: 10px 12px;
  background: rgba(255, 255, 255, .02);
  display: flex;
  flex-direction: column;
  gap: 8px;
}

.pvMarketHead {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
}

.pvMarketTable {
  display: flex;
  flex-direction: column;
  gap: 0;
}

.pvMarketRow {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  align-items: center;
  gap: 12px;
  padding: 7px 0;
  border-top: 1px solid rgba(255, 255, 255, .08);
}

.pvMarketRow:first-child {
  border-top: 0;
  padding-top: 1px;
}

.pvMarketLabel {
  font-size: 12px;
  color: var(--muted);
  line-height: 1.3;
}

.pvMarketValue {
  font-size: 12px;
  color: var(--text);
  text-align: right;
  font-weight: 620;
  line-height: 1.3;
}

/* Inbox block */
.pvBlock-inbox .chat {
  margin-top: 2px
}

/* Header */
.pvHeaderTop {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
}

/* More breathing room between "Private View" row and artist line */
.pvHeader .pvArtistRow {
  margin-top: 12px
}

.pvArtistRow {
  display: flex;
  align-items: center;
  gap: 12px
}

.pvArtistName {
  font-size: 28px;
  line-height: 1.15;
  font-weight: 700;
  margin: 0
}

.pvArtistSub {
  display: flex;
  gap: 10px;
  flex-wrap: wrap;
  color: var(--muted);
  font-size: 13px
}

.pvArtistSub .dot {
  opacity: .55
}

.pvTitle {
  font-size: 19px;
  color: var(--text);
  opacity: .9
}

.pvTitleSub {
  display: flex;
  gap: 10px;
  flex-wrap: wrap;
  color: var(--muted);
  font-size: 13px
}

.pvTitleSub .dot {
  opacity: .55
}

.pvChipsRow {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin-top: 2px
}

.pvChip {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 6px 10px;
  border: 1px solid var(--line);
  border-radius: 999px;
  background: rgba(255, 255, 255, .03);
  font-size: 12px;
  color: var(--text)
}

.pvChip strong {
  font-weight: 650
}

.pvChip .muted {
  color: var(--muted)
}

.pvChip.ok {
  border-color: rgba(87, 214, 155, .25)
}

.pvChip.neutral {
  border-color: rgba(255, 255, 255, .12)
}

.pvMetaCompact .vipMetaRow {
  display: flex;
  gap: 10px;
  justify-content: space-between
}

.pvMetaCompact .vipMetaLabel {
  color: var(--muted);
  font-size: 12px
}

.pvMetaCompact .vipMetaValue {
  font-size: 12px
}

.pvSourceCard {
  border: 1px solid var(--line);
  border-radius: 14px;
  padding: 12px 12px;
  background: rgba(255, 255, 255, .03)
}

.pvSourceHead {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 10px
}

.pvSourceKicker {
  letter-spacing: .12em;
  text-transform: uppercase;
  font-size: 11px;
  color: var(--muted)
}

.pvSourceBody {
  display: flex;
  align-items: center;
  gap: 10px
}

.pvSourceAvatar {
  width: 34px;
  height: 34px;
  border-radius: 999px;
  border: 1px solid var(--line);
  display: grid;
  place-items: center;
  overflow: hidden;
  background: rgba(255, 255, 255, .04)
}

.pvSourceAvatar img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: none
}

.pvSourceAvatar.hasImg img {
  display: block
}

.pvSourceAvatar.hasImg .pvSourceLetter {
  display: none
}

.pvSourceName {
  font-weight: 650
}

.pvSourceMeta {
  font-size: 12px;
  color: var(--muted);
  margin-top: 2px
}

.pvSourceMeta .sep {
  opacity: .55;
  padding: 0 6px
}

.pvSourceNote {
  margin-top: 10px;
  color: var(--muted);
  font-size: 12px;
  line-height: 1.35
}

.pvOrbit {
  border: 1px solid var(--line);
  border-radius: 14px;
  padding: 12px;
  background: rgba(255, 255, 255, .02)
}

.pvOrbitHead {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px
}

.pvOrbitTitle {
  font-size: 13px;
  font-weight: 650
}

.pvOrbitSub {
  font-size: 12px;
  color: var(--muted)
}

.pvAvatarStack {
  display: flex;
  align-items: center;
  margin-top: 10px
}

.pvAvatarStack .av {
  width: 30px;
  height: 30px;
  border-radius: 999px;
  border: 2px solid rgba(15, 16, 20, .9);
  margin-left: -8px;
  overflow: hidden;
  background: rgba(255, 255, 255, .04);
  display: grid;
  place-items: center
}

.pvAvatarStack .av:first-child {
  margin-left: 0
}

.pvAvatarStack img {
  width: 100%;
  height: 100%;
  object-fit: cover
}

.pvAvatarStack .av span {
  font-size: 11px;
  color: var(--muted);
  font-weight: 700
}

.pvOrbitMore {
  margin-top: 8px;
  font-size: 12px;
  color: var(--muted)
}

.pvOrbitMore button {
  background: transparent;
  border: 0;
  color: inherit;
  text-decoration: underline;
  cursor: pointer;
  padding: 0
}

.pvSignalBlock .abSignalCard {
  margin-top: 0
}

.pvRankTrends {
  display: flex;
  flex-direction: column;
  gap: 10px
}

.pvRankTrends .abRankSpark {
  margin-top: 0
}

/* Make charts breathe a bit */
#rankTrend,
#rankTrendEmerging {
  margin-top: 6px
}

/* Responsive */
@media (max-width: 980px) {
  body.vip .workpage.pvWorkGrid {
    grid-template-columns: 1fr
  }

  .pvColMedia {
    order: 1
  }

  .pvColInfo {
    order: 2
  }

  #pvMoreByArtist {
    order: 3
  }
}

/* More-by-artist placement handled by JS (desktop after thumbnails, mobile end) */

/* More-by-artist cards: keep compact width, no full-stretch when only one */
.pvMorePanel {
  padding: 0;
  border: 0;
  background: transparent;
}

.pvMorePanel .kicker {
  margin-bottom: 10px
}

.pvMorePanel .meta {
  padding-top: 14px;
  display: flex;
  flex-direction: column;
  flex: 1 1 auto;
}

.pvMorePanel .worktitle {
  margin-top: 10px
}

/* Artist page: keep left "Works" title aligned to top without extra row margin */
.artistWorksHead{
  display:flex;
  align-items:center;
  gap:10px;
  margin-top:0;
}

.artistWorksPanel{
  margin-top:0;
  border:0;
  background:transparent;
  box-shadow:none;
  padding:0;
}

/* Artist page: left works area should match right section height on desktop */
@media (min-width:981px){
  .artistPageGrid{
    align-items:stretch;
  }
  .artistPageGrid .pvColMedia,
  .artistPageGrid .artistWorksPanel{
    height:100%;
  }
  .artistPageGrid #artistWorks{
    height:100%;
    align-content:start;
  }
}

.pvMorePanel .work.vipCard{
  display: flex;
  flex-direction: column;
  height: 100%;
}

.pvMorePriceRow {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  margin-top: auto;
  padding-top: 10px;
}

.pvMorePriceRow .tag {
  margin-top: 0
}

.pvMoreGrid {
  display: grid;
  gap: 12px;
  grid-template-columns: repeat(3, minmax(0, 1fr));
}

@media (max-width:980px) {
  .pvMoreGrid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}

@media (max-width:640px) {
  .pvMoreGrid {
    grid-template-columns: 1fr;
  }
}

/* Catalog cards: keep availability tag pinned to card bottom
   even when trend graph block is empty/missing. */
#grid .work.vipCard{
  display:flex;
  flex-direction:column;
  height:100%;
}
#grid .meta.vipMeta{
  display:flex;
  flex-direction:column;
  flex:1 1 auto;
  min-height:0;
}
#grid .meta.vipMeta .tag[data-avail-id]{
  margin-top:auto;
  align-self:flex-start;
}
#grid .meta.vipMeta .vipCardExtra{
  margin-top:6px;
  font-size:12px;
  line-height:1.35;
  color:var(--muted);
}

/* Catalog sort block (VIP style) */
.vipActionBar{
  display:flex;
  justify-content:flex-end;
  align-items:flex-start;
  margin:2px 0 14px;
  position:relative;
  z-index:8;
}
.vipSortBar{display:none}
.vipRefineBar{
  display:flex;
  align-items:center;
  position:static;
  z-index:9;
}
.vipSearchWrap{
  position:relative;
}
.vipSearch{
  padding-right:132px;
}
.vipSearchRefine{
  position:absolute;
  left:0;
  right:8px;
  top:50%;
  transform:translateY(-50%);
  display:flex;
  justify-content:flex-end;
  pointer-events:none;
}
.vipSearchFilterBtn{
  height:26px;
  padding:0 2px;
  border-radius:0;
  font-size:12px;
  font-weight:450;
  letter-spacing:.01em;
  border:0 !important;
  background:transparent !important;
  box-shadow:none !important;
  min-height:0;
  display:inline-flex;
  align-items:center;
  gap:6px;
  line-height:1;
  pointer-events:auto;
}
.vipSearchFilterBtn .ci{
  font-size:12px;
  opacity:.74;
}
.vipSortToggle{
  display:inline-flex;
  align-items:center;
  gap:10px;
  height:38px;
  padding:0 14px;
  border-radius:999px;
  border:1px solid rgba(255,255,255,.16);
  background:linear-gradient(180deg, rgba(255,255,255,.08), rgba(255,255,255,.03));
  box-shadow:0 10px 26px rgba(0,0,0,.24);
  letter-spacing:.01em;
}
.vipSortToggle .ci{
  font-size:14px;
  line-height:1;
  opacity:.85;
}
.vipSortCurrent{
  color:var(--text);
  font-weight:650;
  opacity:.95;
}
.vipSortCaret{
  opacity:.78;
  font-size:12px;
  line-height:1;
}
.vipSortOpt{
  border-radius:9999px !important;
}
.vipSortOpt.active{
  border-color:var(--successLine);
  background:var(--successSoft);
  color:var(--text);
}

.vipRefinePanel{
  position:absolute;
  top:46px;
  left:0;
  right:auto;
  width:min(94vw, 420px);
  min-width:360px;
  max-width:min(94vw, 420px);
  display:flex;
  flex-direction:column;
  gap:12px;
  padding:14px;
  border:1px solid rgba(255,255,255,.14);
  border-radius:18px;
  background:linear-gradient(180deg, rgba(16,22,30,.98), rgba(10,14,20,.96));
  box-shadow:0 20px 58px rgba(0,0,0,.44), inset 0 1px 0 rgba(255,255,255,.06);
  backdrop-filter:blur(12px) saturate(130%);
  -webkit-backdrop-filter:blur(12px) saturate(130%);
  pointer-events:auto;
}
.vipRefinePanel.hidden{display:none}
.vipRefineHead{
  display:flex;
  align-items:center;
  justify-content:space-between;
}
.vipRefineHead strong{
  font-size:20px;
  font-weight:400;
  letter-spacing:.01em;
}
.vipRefineSection{
  display:flex;
  flex-direction:column;
  gap:10px;
  padding:10px;
  border:1px solid transparent;
  border-radius:14px;
  background:#53535326;
}
.vipRefineLabel{
  display:inline-flex;
  align-items:center;
  gap:8px;
  font-size:12px;
  letter-spacing:.04em;
  text-transform:uppercase;
  color:var(--muted);
}
.vipRefineLabel .ci{
  font-size:13px;
  opacity:.85;
}
.vipRangeWrap{
  position:relative;
  height:56px;
  display:block;
  padding:0 8px;
  overflow:visible;
}
.vipRangeWrap::before{
  content:"";
  position:absolute;
  left:8px;
  right:8px;
  top:10px;
  height:3px;
  border-radius:999px;
  transform:translateY(0);
  background:rgba(255,255,255,.2);
}
.vipRangeTrack{
  position:absolute;
  top:10px;
  height:3px;
  border-radius:999px;
  background:linear-gradient(90deg, rgba(255,255,255,.9), rgba(255,255,255,.72));
  box-shadow:0 0 0 1px rgba(255,255,255,.14);
  z-index:2;
}
.vipRangeWrap input[type="range"]{
  position:absolute;
  top:0;
  left:8px;
  right:8px;
  height:22px;
  width:auto;
  margin:0;
  background:transparent;
  -webkit-appearance:none;
  appearance:none;
  pointer-events:none;
  outline:none;
}
.vipRangeWrap .vipRangeMin{
  z-index:4;
}
.vipRangeWrap .vipRangeMax{
  z-index:3;
}
.vipRangeWrap input[type="range"]::-webkit-slider-runnable-track{
  height:3px;
  background:transparent;
  border:0;
}
.vipRangeWrap input[type="range"]::-moz-range-track{
  height:3px;
  background:transparent;
  border:0;
}
.vipRangeWrap input[type="range"]::-moz-range-progress{
  height:3px;
  background:transparent;
  border:0;
}
.vipRangeWrap input[type="range"]::-webkit-slider-thumb{
  -webkit-appearance:none;
  appearance:none;
  width:16px;
  height:16px;
  border-radius:999px;
  border:1.5px solid rgba(255,255,255,.9);
  background:rgba(16,22,30,.96);
  box-shadow:0 2px 8px rgba(0,0,0,.35);
  margin-top:-6.5px;
  pointer-events:auto;
  cursor:pointer;
}
.vipRangeWrap input[type="range"]::-moz-range-thumb{
  width:16px;
  height:16px;
  border-radius:999px;
  border:1.5px solid rgba(255,255,255,.9);
  background:rgba(16,22,30,.96);
  box-shadow:0 2px 8px rgba(0,0,0,.35);
  pointer-events:auto;
  cursor:pointer;
}
.vipPriceHistogram{
  height:44px;
  display:flex;
  align-items:flex-end;
  gap:4px;
  padding:0 8px;
  box-sizing:border-box;
}
.vipPriceHistogram .b{
  flex:1 1 0;
  border-radius:4px 4px 2px 2px;
  background:rgba(255,255,255,.14);
  opacity:.35;
  transition:opacity .16s ease, background .16s ease;
}
.vipPriceHistogram .b.on{
  background:linear-gradient(180deg, rgba(255,255,255,.78), rgba(255,255,255,.30));
}
.vipPriceHistogram .b.active{
  opacity:1;
}
.vipPriceHistogram .b.on.active{
  background:linear-gradient(180deg, rgba(255,255,255,.98), rgba(255,255,255,.60));
}
.vipPriceHistogram .b.inactive{
  opacity:.24;
}
.vipRangeValues{
  display:none;
  grid-template-columns:1fr auto 1fr;
  gap:8px;
  align-items:center;
}
.vipRangeValues > span{
  font-size:12px;
  color:var(--muted);
}
.vipRangeValues .input{
  height:34px;
  padding:6px 10px;
}
.vipRangeFloat{
  position:absolute;
  top:26px;
  transform:translateX(-50%);
  min-width:58px;
  padding:3px 10px;
  height:22px;
  border-radius:999px;
  border:1px solid rgba(255,255,255,.24);
  background:rgba(255,255,255,.07);
  color:rgba(255,255,255,.94);
  font-size:11px;
  font-weight:620;
  letter-spacing:.01em;
  line-height:1;
  display:inline-flex;
  align-items:center;
  justify-content:center;
  white-space:nowrap;
  pointer-events:none;
  z-index:5;
}
.vipAvailPills{
  display:flex;
  flex-wrap:nowrap;
  gap:8px;
  overflow:auto;
  padding:2px 2px 4px;
  scrollbar-width:none;
}
.vipAvailPills::-webkit-scrollbar{
  display:none;
}
.vipAvailOpt{
  border-radius:9999px !important;
}
.vipPillBtn{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  gap:6px;
  padding:6px 10px !important;
  min-height:30px;
  line-height:1;
  font-size:14px;
  font-weight:300;
  letter-spacing:.01em;
  white-space:nowrap;
  border-color:rgba(255,255,255,.12);
  background:rgba(255,255,255,.03);
}
.vipPillBtn .ci{
  font-size:14px;
  width:14px;
  min-width:14px;
  text-align:center;
  opacity:.74;
  transform:translateX(-2px);
}
.vipAvailOpt.active{
  border-color:var(--successLine);
  background:var(--successSoft);
}
.vipFilterMeta{
  font-size:12px;
  color:var(--muted);
}

:root[data-theme="light"] .vipSortToggle{
  border-color:rgba(16,20,24,.16);
  background:linear-gradient(180deg, rgba(255,255,255,.95), rgba(246,248,250,.92));
  box-shadow:0 10px 24px rgba(16,20,24,.08);
}
:root[data-theme="light"] .vipSearchFilterBtn{
  color:rgba(16,20,24,.78);
}
:root[data-theme="light"] .vipSortOptions,
:root[data-theme="light"] .vipRefinePanel{
  border-color:rgba(16,20,24,.14);
  background:linear-gradient(180deg, rgba(255,255,255,.98), rgba(248,250,252,.96));
  box-shadow:0 18px 40px rgba(16,20,24,.12), inset 0 1px 0 rgba(255,255,255,.7);
}
:root[data-theme="light"] .vipRefineSection{
  border:1px solid transparent;
  background:transparent;
}
:root[data-theme="light"] .vipPriceHistogram .b{
  background:rgba(16,20,24,.12);
}
:root[data-theme="light"] .vipPriceHistogram .b.on{
  background:linear-gradient(180deg, rgba(16,20,24,.85), rgba(16,20,24,.45));
}
:root[data-theme="light"] .vipPriceHistogram .b.inactive{
  opacity:.24;
}
:root[data-theme="light"] .vipRangeWrap::before{
  background:rgba(16,20,24,.16);
}
:root[data-theme="light"] .vipRangeTrack{
  background:linear-gradient(90deg, rgba(16,20,24,.88), rgba(16,20,24,.62));
  box-shadow:0 0 0 1px rgba(16,20,24,.12);
}
:root[data-theme="light"] .vipRangeWrap input[type="range"]::-webkit-slider-thumb{
  border-color:rgba(16,20,24,.82);
  background:#fff;
}
:root[data-theme="light"] .vipRangeWrap input[type="range"]::-moz-range-thumb{
  border-color:rgba(16,20,24,.82);
  background:#fff;
}
:root[data-theme="light"] .vipRangeFloat{
  border-color:rgba(16,20,24,.18);
  background:rgba(255,255,255,.92);
  color:rgba(16,20,24,.88);
}

@media (max-width:720px){
  .vipActionBar{
    justify-content:stretch;
  }
  .vipSearch{
    padding-right:96px;
  }
  .vipSearchRefine{
    left:auto;
    right:6px;
    justify-content:flex-end;
  }
  .vipSearchFilterBtn{
    height:24px;
    padding:0 4px;
    gap:4px;
    font-size:11px;
  }
  .vipPillBtn{
    min-height:28px;
    padding:5px 12px !important;
    font-size:11px;
    gap:5px;
  }
  .vipPillBtn .ci{
    font-size:11px;
    width:11px;
    min-width:11px;
  }
  .vipSortToggle{
    width:100%;
    justify-content:space-between;
  }
  .vipRefinePanel{
    left:auto;
    right:0;
    width:min(96vw, 420px);
    min-width:0;
    max-width:min(96vw, 420px);
    border-radius:14px;
    padding:12px;
    gap:10px;
  }
  .vipRefineHead strong{
    font-size:17px;
  }
  .vipRefineSection{
    gap:8px;
    padding:8px;
  }
  .vipRangeWrap{
    height:60px;
    padding:0 4px;
  }
  .vipRangeWrap::before{
    left:4px;
    right:4px;
    top:9px;
  }
  .vipRangeTrack{
    top:9px;
  }
  .vipRangeWrap input[type="range"]{
    left:4px;
    right:4px;
  }
  .vipPriceHistogram{
    height:38px;
    gap:3px;
    padding:0 4px;
  }
  .vipRangeFloat{
    top:24px;
    min-width:52px;
    height:20px;
    padding:2px 8px;
    font-size:10px;
  }
  .vipAvailPills{
    gap:6px;
  }
}

#refineReset{
  border-radius:9999px !important;
  min-height:30px;
  padding:6px 14px !important;
}

/* Artist detail page -> works cards: keep bottom row stable like catalog */
#artistWorks .work.vipCard{
  display:flex;
  flex-direction:column;
  height:100%;
}
#artistWorks .work.vipCard .meta{
  display:flex;
  flex-direction:column;
  flex:1 1 auto;
  min-height:0;
}
#artistWorks .work.vipCard .meta .tag{
  margin-top:auto;
  align-self:flex-start;
}

/* Favorites cards: keep controls consistent with catalog/more-by-artist */
#grid .meta.vipMeta .shortlistRemove{
  margin-top:10px;
  align-self:flex-start;
}

/* Overrides: unify chip styling for rank pills */
.pvChip {
  border-color: var(--abChipBorder, rgba(255, 255, 255, .14));
  background: linear-gradient(180deg, var(--abChipBg1, rgba(255, 255, 255, .06)), var(--abChipBg2, rgba(255, 255, 255, .02)));
  color: var(--abChipText, rgba(255, 255, 255, .78));
}

.pvChip strong {
  color: rgba(255, 255, 255, .92)
}

.pvChip.neutral {
  border-color: var(--abChipScoreBorder, rgba(160, 170, 185, .30));
  background: linear-gradient(180deg, var(--abChipScoreBg1, rgba(160, 170, 185, .14)), var(--abChipScoreBg2, rgba(160, 170, 185, .04)));
  color: var(--abChipScoreText, rgba(228, 232, 240, .96));
}

/* =========================================================================
   ADMIN PANEL IMPROVEMENTS (2026-02)
   - Unified responsive layouts
   - Mobile hamburger menu
   - Consistent spacing & typography
   - Better panel stacking
   ========================================================================= */

/* --- Admin Navigation: Mobile Hamburger Menu --- */
.adminMenuClose { display: none; }
.adminMenuToggle {
  display: none;
  background: transparent;
  border: 1px solid var(--line);
  padding: 8px 10px;
  border-radius: 10px;
  cursor: pointer;
  color: var(--text);
}

.adminMenuToggle svg {
  width: 20px;
  height: 20px;
  stroke: currentColor;
  fill: none;
  stroke-width: 2;
}

@media (max-width: 860px) {
  .adminMenuToggle {
    display: flex;
    align-items: center;
    justify-content: center;
  }

  .top .nav {
    position: fixed;
    top: 0;
    right: -280px;
    width: 260px;
    height: 100vh;
    background: var(--bg1);
    border-left: 1px solid var(--line);
    flex-direction: column;
    align-items: stretch;
    padding: 20px;
    gap: 8px;
    z-index: 1000;
    transition: right 0.25s ease;
    box-shadow: -8px 0 24px rgba(0, 0, 0, .3);
  }

  .top .nav.open {
    right: 0;
  }

  .top .nav a {
    padding: 12px 14px;
    border-radius: 12px;
    font-size: 14px;
    border: 1px solid transparent;
  }

  .top .nav a:hover,
  .top .nav a.active {
    background: var(--panel2);
    border-color: var(--line);
  }

  .top .nav .btn.small {
    margin-top: auto;
    text-align: center;
  }

  /* Overlay backdrop */
  .adminMenuOverlay {
    display: none;
    position: fixed;
    inset: 0;
    background: rgba(0, 0, 0, .5);
    z-index: 999;
  }

  .adminMenuOverlay.open {
    display: block;
  }

  /* Close button inside menu */
  .adminMenuClose {
    display: flex;
    align-items: center;
    justify-content: flex-end;
    margin-bottom: 10px;
  }

  .adminMenuClose button {
    background: transparent;
    border: 1px solid var(--line);
    padding: 6px 10px;
    border-radius: 8px;
    color: var(--text);
    cursor: pointer;
  }
}

/* --- Admin Top Bar Improvements --- */
.top {
  position: relative;
}

@media (max-width: 640px) {
  .top {
    flex-wrap: wrap;
    gap: 10px;
  }

  .top .brand {
    flex: 1;
    min-width: 0;
  }

  .top .brand .name {
    width: 80px !important;
  }

  .top .brand .tag {
    font-size: 10px;
    padding: 3px 8px;
  }
}

/* --- Admin Panel Layout Improvements --- */
.adminPanelLayout {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 18px;
  align-items: stretch;
}

@media (max-width: 1100px) {
  .adminPanelLayout {
    grid-template-columns: 1fr;
  }
}

/* Better flex panel layout */
.row.gap4.items-stretch.wrap {
  display: flex;
  flex-wrap: wrap;
  gap: 18px;
}

.adminPanelFlex {
  flex: 1 1 360px;
  min-width: 320px;
  max-width: 100%;
}

@media (max-width: 800px) {
  .adminPanelFlex {
    flex: 1 1 100%;
    min-width: 0;
  }
}

/* --- Admin Form Improvements --- */
.adminGrid2 {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 12px;
}

.adminGrid3 {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 12px;
}

@media (max-width: 720px) {

  .adminGrid2,
  .adminGrid3,
  .grid2 {
    grid-template-columns: 1fr;
  }
}

/* --- Admin List Items --- */
.adminList .item {
  display: flex;
  justify-content: space-between;
  gap: 12px;
  padding: 12px 14px;
  border: 1px solid var(--line);
  border-radius: 14px;
  margin: 8px 0;
  cursor: pointer;
  background: var(--panel);
  transition: background 0.15s ease, transform 0.15s ease;
}

.adminList .item:hover {
  background: var(--panel2);
  transform: translateY(-1px);
}

.adminList .item .left {
  flex: 1;
  min-width: 0;
}

.adminList .item .meta {
  flex: 0 0 auto;
  display: flex;
  flex-direction: row;
  align-items: flex-end;
  gap: 6px;
  min-width: 30%;
}

@media (max-width: 640px) {
  .adminList .item {
    flex-direction: column;
    gap: 10px;
  }

  .adminList .item .meta {
    flex-direction: row;
    width: 100%;
    justify-content: flex-end;
  }
}

/* --- Admin Actions Row --- */
.adminActionsRow {
  display: flex;
  gap: 10px;
  flex-wrap: wrap;
  align-items: center;
}

@media (max-width: 640px) {
  .adminActionsRow {
    flex-direction: column;
    align-items: stretch;
  }

  .adminActionsRow .input {
    width: 100% !important;
    max-width: none !important;
  }

  .adminActionsRow .btn {
    width: 100%;
    justify-content: center;
  }

  .adminActionsRow .flex1 {
    display: none;
  }
}

/* --- Admin Cards Grid (Overview) --- */
.adminCards {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(140px, 1fr));
  gap: 12px;
}

@media (max-width: 480px) {
  .adminCards {
    grid-template-columns: repeat(2, 1fr);
  }
}

.adminCards .panel {
  text-align: center;
}

.adminStatK {
  font-size: 12px;
  color: var(--muted);
  letter-spacing: 0.3px;
}

.adminStatV {
  font-size: 24px;
  font-weight: 700;
  margin-top: 4px;
}

@media (max-width: 640px) {
  .adminStatV {
    font-size: 20px;
  }
}

/* --- Admin Work Grid --- */
.adminWorkGrid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
  gap: 16px;
}

@media (max-width: 640px) {
  .adminWorkGrid {
    grid-template-columns: 1fr;
  }
}

.adminWorkCard {
  border: 1px solid var(--line);
  border-radius: 16px;
  overflow: hidden;
  background: var(--panel);
  transition: transform 0.15s ease, border-color 0.15s ease;
}

.adminWorkCard:hover {
  transform: translateY(-2px);
  border-color: rgba(143, 178, 255, 0.25);
}

.adminWorkImg {
  width: 100%;
  height: 200px;
  object-fit: cover;
  display: block;
  background: var(--bg0);
}

.adminWorkMeta {
  padding: 14px;
}

.adminWorkTitle {
  font-weight: 400;
  font-size: 14px;
}

.adminWorkSub {
  font-size: 13px;
  color: var(--muted);
  margin-top: 4px;
}

.adminWorkRank {
  font-size: 11px;
  color: var(--muted);
  margin-top: 6px;
}

/* --- Admin Section Headers --- */
.adminSectionHead {
  margin-bottom: 12px;
}

.adminSectionTitle {
  font-weight: 400;
  font-size: 16px;
}

.adminSectionSub {
  font-size: 13px;
  color: var(--muted);
  margin-top: 4px;
  line-height: 1.4;
}

/* --- Admin Empty State --- */
.adminEmpty {
  padding: 20px;
  text-align: center;
  color: var(--muted);
  font-size: 13px;
  border: 1px dashed var(--line);
  border-radius: 12px;
  background: rgba(255, 255, 255, 0.02);
}

/* --- Admin Stack (vertical list) --- */
.adminStack {
  display: flex;
  flex-direction: column;
  gap: 8px;
}

/* --- Admin Row Item --- */
.rowItem {
  padding: 12px 14px;
  border: 1px solid var(--line);
  border-radius: 12px;
  background: var(--panel);
}

.rowItem+.rowItem {
  margin-top: 0;
}

/* --- Improved Input Widths --- */
.w320 {
  width: 320px;
  max-width: 100%;
}

.w190 {
  width: 190px;
  max-width: 100%;
}

@media (max-width: 640px) {

  .w320,
  .w190 {
    width: 100%;
  }
}

/* --- Message Inbox Split View --- */
.split {
  display: grid;
  grid-template-columns: 340px 1fr;
  gap: 18px;
  align-items: stretch;
}

@media (max-width: 980px) {
  .split {
    grid-template-columns: 1fr;
  }
}

@media (max-width: 640px) {
  .split .panel {
    min-height: auto;
  }

  .minH620 {
    min-height: 400px;
  }
}

/* --- Admin Picker Dropdown --- */
.adminPicker {
  position: relative;
}

.adminPickerResults {
  position: absolute;
  top: 100%;
  left: 0;
  right: 0;
  margin-top: 6px;
  background: var(--bg1);
  border: 1px solid var(--line);
  border-radius: 12px;
  box-shadow: 0 12px 32px rgba(0, 0, 0, .35);
  max-height: 280px;
  overflow: auto;
  z-index: 50;
}

.adminPickerItem {
  padding: 10px 12px;
  cursor: pointer;
  border-bottom: 1px solid var(--line);
  transition: background 0.12s ease;
}

.adminPickerItem:last-child {
  border-bottom: none;
}

.adminPickerItem:hover {
  background: var(--panel2);
}

.adminPickerItem .t {
  font-weight: 600;
  font-size: 13px;
}

.adminPickerItem .s {
  font-size: 12px;
  color: var(--muted);
  margin-top: 2px;
}

/* --- Admin Selected Badge --- */
.adminSelected {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 10px 12px;
  border: 1px solid var(--line);
  border-radius: 12px;
  background: var(--panel);
}

/* --- Admin New Thread Panel --- */
.adminNewThread {
  display: flex;
  flex-direction: column;
  gap: 12px;
}

/* --- Typography Improvements for Admin --- */
.h2 {
  font-size: 18px;
  font-weight: 400;
  margin: 0;
  line-height: 1.3;
}

.h3 {
  font-size: 15px;
  font-weight: 400;
  margin: 0;
  line-height: 1.3;
}

/* --- Admin Button Variants --- */
.btn.danger {
  background: rgba(220, 80, 80, 0.12);
  border-color: rgba(220, 80, 80, 0.25);
  color: rgba(255, 160, 160, 0.95);
}

.btn.danger:hover {
  background: rgba(220, 80, 80, 0.18);
}

/* --- Consistent Panel Padding --- */
.panel.pad {
  padding: 20px;
}

@media (max-width: 640px) {
  .panel.pad {
    padding: 16px;
  }
}

/* --- Shell Container Improvements --- */
@media (max-width: 640px) {
  .shell {
    padding: 16px 12px;
  }
}

/* --- Admin Avatar Row --- */
.adminAvatarRow {
  display: flex;
  gap: 12px;
  align-items: center;
  flex-wrap: wrap;
}

@media (max-width: 640px) {
  .adminAvatarRow {
    flex-direction: column;
    align-items: flex-start;
  }
}

/* --- Print Styles (hide nav) --- */
@media print {

  .top .nav,
  .adminMenuToggle,
  .adminMenuOverlay {
    display: none !important;
  }
}

/* --- Work page: light theme contrast fixes (Curated/Available/CTA) --- */
:root[data-theme="light"] .pvQuietPill{
  border-color: rgba(16,20,24,.22);
  background: rgba(16,20,24,.08);
  color: rgba(16,20,24,.88);
}

:root[data-theme="light"] .pill.avail-available{
  border-color: rgba(34,130,78,.30);
  background: linear-gradient(180deg, rgba(34,130,78,.14), rgba(34,130,78,.04));
  color: rgba(18,78,46,.96);
}
:root[data-theme="light"] .tag.avail-available,
:root[data-theme="light"] .badge.avail-available{
  border-color: rgba(34,130,78,.30);
  background: linear-gradient(180deg, rgba(34,130,78,.14), rgba(34,130,78,.04));
  color: rgba(18,78,46,.96);
}

:root[data-theme="light"] .actions3 .abHoldBtn{
  background: rgba(40,58,120,.11);
  border-color: rgba(40,58,120,.30);
  color: rgba(16,20,24,.9);
}
:root[data-theme="light"] .actions3 .abHoldBtn:hover{
  background: rgba(40,58,120,.17);
}

:root[data-theme="light"] .actions3 .abInterestBtn{
  background: rgba(34,140,82,.13);
  border-color: rgba(34,140,82,.36);
  color: rgba(16,20,24,.94);
}
:root[data-theme="light"] .actions3 .abInterestBtn:hover{
  background: rgba(34,140,82,.19);
}

/* --- Work trend graph readability in light mode --- */
:root[data-theme="light"] .abRankTrend{
  --abTrendColor: rgba(16,20,24,.82);
  --abTrendLine: #1c8c5e;
  --abTrendAxisColor: rgba(16,20,24,.38);
  --abTrendYColor: rgba(16,20,24,.68);
  --abTrendAxisTickColor: rgba(16,20,24,.34);
  --abTrendCrosshairColor: rgba(16,20,24,.28);
  --abTrendDotColor: #1c8c5e;
  --abTrendGridOpacity: .2;
}
:root[data-theme="light"] .abTrendCanvas{
  background: rgba(16,20,24,.03);
  border: 1px solid rgba(16,20,24,.10);
  border-radius: 12px;
}

/* Account form: label icon + text */
.abFieldKicker{
  display:inline-flex;
  align-items:center;
  gap:6px;
}
.abFieldKicker .ci{
  font-size:12px;
  line-height:1;
  opacity:.9;
}

.abBtnWithIcon{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  gap:8px;
}

/* Register page intro (additive only) */
.vipRegister .box{
  max-width: 620px;
}

.vipRegister .abIntro{
  display: grid;
  gap: 10px;
  margin-bottom: 12px;
}

.vipRegister .abIntroTitle{
  font-size: 13px;
  font-weight: 650;
  letter-spacing: .02em;
}

.vipRegister .abIntroList{
  margin: 0;
  padding-left: 18px;
  display: grid;
  gap: 4px;
  font-size: 13px;
  color: var(--text2);
}

.vipRegister .abIntroFast{
  font-size: 13px;
  font-weight: 600;
  color: var(--text);
}

.vipRegister .abRegisterPreview{
  margin: 8px 0 2px;
}

.vipRegister .abPreviewCard{
  position: relative;
  border: 1px solid var(--line);
  border-radius: 16px;
  background: var(--panel2);
  overflow: hidden;
}

.vipRegister .abPreviewImg{
  position: relative;
  aspect-ratio: 4/3;
  overflow: hidden;
}

.vipRegister .abPreviewImg::before{
  content: "";
  position: absolute;
  inset: -8%;
  background-image:
    linear-gradient(140deg, rgba(10,12,15,.15), rgba(10,12,15,.35)),
    url("/ui/register-preview-artwork.jpg");
  background-size: cover;
  background-position: center;
  filter: blur(14px) saturate(1.02);
  transform: scale(1.1);
}

.vipRegister .abPreviewBody{
  padding: 12px 12px 14px;
}

.vipRegister .abPreviewArtist{
  font-weight: 650;
  font-size: 13px;
  color: rgba(255,255,255,.92);
}

.vipRegister .abPreviewMainRow{
  margin-top: 4px;
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 10px;
}

.vipRegister .abPreviewTextCol{
  flex: 1 1 auto;
  min-width: 0;
}

.vipRegister .abPreviewTitle{
  font-size: 14px;
  color: rgba(255,255,255,.86);
}

.vipRegister .abPreviewMeta{
  margin-top: 6px;
  font-size: 12px;
  color: rgba(255,255,255,.62);
}

.vipRegister .abPreviewBadges{
  margin-top: 10px;
  display: flex;
  gap: 8px;
  flex-wrap: wrap;
}

.vipRegister .abPreviewBadge{
  font-size: 11px;
  padding: 5px 10px;
  border-radius: 999px;
  border: 1px solid rgba(255,255,255,.14);
  background: rgba(255,255,255,.04);
  color: rgba(255,255,255,.82);
}

.vipRegister .abPreviewRankWrap{
  flex: 0 0 126px;
  width: 126px;
  margin-left: auto;
  display: flex;
  flex-direction: column;
  align-items: flex-end;
  text-align: right;
}

.vipRegister .abPreviewRankMini{
  width: 100%;
}

.vipRegister .abPreviewRankWrap .abTrendCanvas{
  padding: 8px 10px;
  border-radius: 9px;
}

.vipRegister .abPreviewOverlay{
  position: absolute;
  top: 10px;
  left: 10px;
  right: 10px;
  z-index: 2;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: 30px;
  padding: 7px 10px;
  border-radius: 999px;
  border: 1px solid rgba(255,255,255,.16);
  background: rgba(0,0,0,.38);
  color: rgba(255,255,255,.9);
  font-size: 11px;
  letter-spacing: .08em;
  text-transform: uppercase;
  backdrop-filter: blur(8px);
}

:root[data-theme="light"] .vipRegister .abPreviewArtist{
  color: rgba(16,20,24,.92);
}
:root[data-theme="light"] .vipRegister .abPreviewTitle{
  color: rgba(16,20,24,.86);
}
:root[data-theme="light"] .vipRegister .abPreviewMeta{
  color: rgba(16,20,24,.62);
}
:root[data-theme="light"] .vipRegister .abPreviewBadge{
  border-color: rgba(16,20,24,.14);
  background: rgba(16,20,24,.05);
  color: rgba(16,20,24,.78);
}

/* Work page: action copy and tighter order under price/availability */
.pvActionHint{
  margin-top: 8px;
  font-size: 12px;
  color: var(--muted);
  line-height: 1.35;
}
.abBtnWithIcon .ci{
  font-size:14px;
  line-height:1;
}

/* --- Catalog visual iteration (previewable) --- */
body.vip .vipHeadRight{
  flex: 1 1 520px;
  max-width: 560px;
}

body.vip .vipSearchWrap{
  display:flex;
  align-items:center;
  gap:10px;
  width:100%;
}
body.vip .vipSearchIcon{
  pointer-events:none;
}

body.vip .vipSearch{
  width:100%;
  max-width:none;
  min-height:36px;
  height:36px;
  border-radius:999px;
  border:1px solid var(--line);
  background:var(--panel);
  box-shadow:none;
  padding-right:14px;
  pointer-events:auto;
}

body.vip .vipHeadRow,
.vipCatalogCategoryBar{
  position:relative;
  z-index:3;
}

body.vip .vipSearchRefine{
  position:relative;
  left:auto;
  right:auto;
  top:auto;
  transform:none;
  pointer-events:auto;
}

body.vip .vipSearchFilterBtn{
  min-height:36px;
  height:36px;
  padding:0 14px;
  border-radius:999px;
  border:1px solid var(--line) !important;
  background:var(--panel) !important;
  box-shadow:none !important;
  font-size:12px;
}

body.vip .vipRefinePanel{
  top:calc(100% + 8px);
  right:0;
  left:auto;
}

.vipCatalogCategoryBar{
  background:transparent;
}

.vipCatalogCategoryPills{
  display:flex;
  flex-wrap:wrap;
  gap:8px;
}

.vipCategoryPill{
  border-radius:9999px !important;
  min-height:30px;
  padding:6px 12px !important;
  font-size:12px;
  font-weight:420;
  letter-spacing:.01em;
  pointer-events:auto;
}

.vipCategoryPill.active{
  border-color:var(--successLine) !important;
  background:var(--successSoft) !important;
  color:var(--text) !important;
  box-shadow:0 0 0 1px color-mix(in srgb, var(--successLine) 40%, transparent);
}

.vipActiveFilters{
  display:flex;
  flex-wrap:wrap;
  gap:8px;
  margin:4px 0 12px;
}

.vipFilterChip{
  border:1px solid var(--line);
  background:var(--panel);
  color:var(--text2);
  border-radius:999px;
  min-height:30px;
  padding:6px 10px;
  display:inline-flex;
  align-items:center;
  gap:7px;
  cursor:pointer;
  font-size:12px;
  line-height:1;
}

.vipFilterChip .ci{
  font-size:11px;
  opacity:.8;
}

.vipFilterChip.is-clear-all{
  color:var(--text);
}

#grid .work.vipCard .img{
  height:auto;
  min-height:220px;
  aspect-ratio:4/5;
}

#grid .work.vipCard .artist{
  font-size:18px;
  font-weight:500;
  color:var(--text2);
}

#grid .work.vipCard .worktitle{
  font-size:16px;
  font-style:normal;
  color:var(--text);
  line-height:1.35;
  margin-top:4px;
  display:-webkit-box;
  -webkit-line-clamp:2;
  line-clamp:2;
  -webkit-box-orient:vertical;
  overflow:hidden;
}

#grid .meta.vipMeta .vipCardMainRow{
  display:flex;
  align-items:flex-start;
  justify-content:space-between;
  gap:10px;
}

#grid .meta.vipMeta .vipCardTextCol{
  flex:1 1 auto;
  min-width:0;
  display:flex;
  flex-direction:column;
}

#grid .meta.vipMeta .vipCardTextCol .worktitle{
  flex:1 1 auto;
  min-width:0;
  margin-top:0;
}

#grid .meta.vipMeta .vipCardTextCol .vipCardExtra{
  margin-top:6px;
}

#grid .meta.vipMeta .vipCardTextCol .price{
  margin-top:8px;
}

#grid .meta.vipMeta .vipCardRankWrap{
  flex:0 0 126px;
  width:126px;
  margin-left:auto;
}

#grid .meta.vipMeta .vipCardRankWrap .abRankMini{
  margin-top:0;
}

#grid .meta.vipMeta .vipCardRankWrap .abTrendCanvas{
  padding:8px 10px;
  border-radius:9px;
}

#grid .meta.vipMeta .vipCardSignalRow{
  margin-top:8px;
}

@media (max-width:720px){
  body.vip .vipHeadRight{
    max-width:none;
    flex:1 1 auto;
  }

  body.vip .vipSearchWrap{
    align-items:stretch;
  }

  body.vip .vipSearchFilterBtn{
    min-height:34px;
    height:34px;
    padding:0 10px;
    font-size:11px;
  }

  .vipCatalogCategoryBar{
    margin-top:8px;
    padding:8px 10px;
    border-radius:12px;
  }

  .vipCatalogCategoryPills{
    flex-wrap:nowrap;
    overflow:auto;
    scrollbar-width:none;
    padding-bottom:2px;
  }

  .vipCatalogCategoryPills::-webkit-scrollbar{
    display:none;
  }

  .vipCategoryPill{
    min-height:28px;
    padding:5px 11px !important;
    font-size:11px;
  }

  #grid .meta.vipMeta .vipCardRankWrap{
    flex-basis:112px;
    width:112px;
  }
}