/* ============================================================
   VULU — Profile runtime (iOS screen + desktop panel)
   Token-driven: inherits the base skin OR the liquid-glass skin.
   pmk-* = shared blocks · ipf-* = iOS screen · dpf-* = desktop panel
   ============================================================ */

/* ---------- shared atoms ---------- */
.pmk-pixel-icon { shape-rendering: crispEdges; }
.pmk-eyebrow {
  font-size: 10px; font-weight: 700; letter-spacing: 0.08em;
  text-transform: uppercase; color: var(--muted);
}
.pmk-dot { width: 8px; height: 8px; border-radius: 999px; flex: 0 0 auto; }
.pmk-dot--lg { width: 13px; height: 13px; }
.pmk-dot--online  { background: var(--green); }
.pmk-dot--busy    { background: var(--red); }
.pmk-dot--offline { background: var(--muted); }

.pmk-card {
  background: var(--raised);
  border: 1px solid var(--border);
  border-radius: 20px;
  padding: 14px;
  -webkit-backdrop-filter: blur(18px) saturate(160%);
  backdrop-filter: blur(18px) saturate(160%);
  box-shadow: inset 0 1px 0 rgba(255,255,255,0.10);
}

/* ---------- identity (neutral-bordered container) ---------- */
.pmk-id {
  display: flex; align-items: center; gap: 12px; min-width: 0;
  border-color: rgba(255,255,255,0.20) !important;
}
.pmk-avwrap { position: relative; flex: 0 0 auto; }
.pmk-avbtn {
  display: block; padding: 0; border: 0; background: none; cursor: pointer;
  border-radius: 999px; transition: opacity .15s, transform .15s;
}
.pmk-avbtn:active { opacity: 0.9; transform: scale(0.98); }
.pmk-ring    { display: grid; padding: 3.5px; border-radius: 999px; background: var(--purple); }
.pmk-ringgap { display: grid; padding: 3px; border-radius: 999px; background: var(--bg, #070908); }
.pmk-av {
  width: 88px; height: 88px; border-radius: 999px;
  background: linear-gradient(152deg, hsl(150 22% 24%), hsl(170 20% 12%));
  display: grid; place-items: center;
  font-size: 34px; font-weight: 800; color: var(--text-2);
  user-select: none;
}
.pmk-edit {
  position: absolute; right: 0; bottom: 0;
  width: 30px; height: 30px; border-radius: 999px;
  background: var(--raised-2); border: 2px solid var(--bg, #070908);
  box-shadow: 0 4px 4px rgba(0,0,0,0.3);
  color: var(--text-2); display: grid; place-items: center; cursor: pointer;
  transition: color .15s, transform .15s;
}
.pmk-edit:hover { color: var(--text); }
.pmk-edit:active { transform: scale(0.95); }
.pmk-edit svg { width: 13px; height: 13px; }

.pmk-idcopy { flex: 1 1 auto; min-width: 0; display: flex; flex-direction: column; align-items: flex-start; gap: 8px; }
.pmk-name {
  margin: 0; max-width: 100%;
  font-size: 21px; font-weight: 800; letter-spacing: -0.01em; line-height: 1.2;
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.pmk-pill {
  display: inline-flex; align-items: center; gap: 8px; max-width: 100%;
  padding: 6px 13px; border-radius: 999px;
  background: var(--raised-2); border: 1px solid var(--border);
  color: var(--text); font-size: 13px; font-weight: 700;
  cursor: pointer; transition: background .15s;
}
.pmk-pill:hover { background: var(--fill-hover, rgba(255,255,255,0.1)); }
.pmk-pill .ic { width: 13px; height: 13px; color: var(--text-2); flex: 0 0 auto; }
.pmk-pilltxt { min-width: 0; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }

/* ---------- stats bar ---------- */
.pmk-stats { display: flex; align-items: center; padding: 4px !important; }
.pmk-cell {
  flex: 1 1 0; min-width: 0; min-height: 64px; align-self: stretch;
  border: 0; border-radius: 14px; background: transparent;
  display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 2px;
  color: var(--text); cursor: pointer; padding: 8px 2px;
  transition: background .15s; font-family: inherit;
}
.pmk-cell:hover, .pmk-cell:active { background: rgba(255,255,255,0.05); }
.pmk-cell[disabled] { cursor: default; }
.pmk-cell[disabled]:hover { background: transparent; }
.pmk-cellval { font-size: 24px; font-weight: 800; letter-spacing: -0.01em; line-height: 1.1; }
.pmk-celllabel {
  font-size: 9px; font-weight: 700; letter-spacing: 0.08em;
  text-transform: uppercase; color: var(--text-2);
  max-width: 100%; white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.pmk-celldiv { width: 1px; height: 26px; flex: 0 0 auto; background: var(--border); opacity: 0.6; }

/* ---------- balance card ---------- */
.pmk-wells {
  display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 7px;
  width: 100%; padding: 0; border: 0; background: none;
  font: inherit; color: inherit; text-align: inherit;
}
.pmk-wells--tap { cursor: pointer; transition: opacity .15s; }
.pmk-wells--tap:active { opacity: 0.8; }
.pmk-well {
  background: rgba(255,255,255,0.025);
  border: 1px solid rgba(255,255,255,0.06);
  border-radius: 14px;
  padding: 10px 6px;
  display: flex; flex-direction: column; align-items: center; gap: 5px; min-width: 0;
  transition: background .15s;
}
.pmk-wells--tap:hover .pmk-well { background: rgba(255,255,255,0.055); }
.pmk-wellchip {
  width: 34px; height: 34px; border-radius: 999px;
  background: var(--raised-2); border: 1px solid var(--border);
  display: grid; place-items: center;
  box-shadow: inset 0 1px 0 rgba(255,255,255,0.12);
}
.pmk-wellchip .ic, .pmk-wellchip svg { width: 17px; height: 17px; }
.pmk-wellchip--gems { color: var(--purple); }
.pmk-wellchip--cash { color: var(--green); }
.pmk-wellchip--fuel { color: var(--fuel, #FF8A3D); }
.pmk-wellval { font-size: 18px; font-weight: 800; letter-spacing: 0.02em; line-height: 1.15; }
.pmk-welllabel {
  font-size: 9px; font-weight: 700; letter-spacing: 0.08em;
  text-transform: uppercase; color: var(--text-2);
}

.pmk-div { height: 1px; background: var(--hair, rgba(255,255,255,0.07)); margin: 13px 0 11px; }
.pmk-rank { display: flex; align-items: center; gap: 10px; }
.pmk-rankchip {
  width: 30px; height: 30px; border-radius: 999px; flex: 0 0 auto;
  background: var(--raised-2); border: 1px solid var(--border);
  display: grid; place-items: center; color: var(--gold);
}
.pmk-rankchip .ic { width: 15px; height: 15px; }
.pmk-rankcopy { display: flex; flex-direction: column; gap: 1px; min-width: 0; }
.pmk-ranklabel {
  font-size: 9px; font-weight: 700; letter-spacing: 0.08em;
  text-transform: uppercase; color: var(--text-2);
}
.pmk-rankval { font-size: 15px; font-weight: 800; color: var(--gold); line-height: 1.2; }
.pmk-rankright { margin-left: auto; display: flex; align-items: center; gap: 9px; }
.pmk-rankeye { display: grid; color: var(--text-2); }
.pmk-rankeye .ic, .pmk-rankeye svg { width: 18px; height: 18px; }
.pmk-rankeye--off { color: var(--muted); }
.pmk-switch {
  position: relative; width: 38px; height: 23px; flex: 0 0 auto;
  border-radius: 999px; cursor: pointer; padding: 0;
  background: var(--raised-2); border: 1px solid var(--border);
  transition: background .15s, border-color .15s;
}
.pmk-switch__knob {
  position: absolute; top: 2px; left: 2px;
  width: 17px; height: 17px; border-radius: 999px;
  background: var(--text-2);
  transition: transform .18s var(--ease, ease), background .15s;
}
.pmk-switch--on { background: var(--green); border-color: var(--green); }
.pmk-switch--on .pmk-switch__knob { transform: translateX(15px); background: #06080A; }

/* ---------- transfers ---------- */
.pmk-tx { padding: 14px !important; }
.pmk-txtitle { margin: 0 0 4px; font-size: 16px; font-weight: 800; letter-spacing: -0.01em; }
.pmk-txrow {
  display: flex; align-items: center; justify-content: space-between; gap: 12px;
  padding: 9px 0; border-top: 1px solid var(--hair, rgba(255,255,255,0.07));
}
.pmk-txleft { min-width: 0; display: flex; flex-direction: column; gap: 1px; }
.pmk-txamt { font-size: 14px; font-weight: 800; line-height: 1.25; }
.pmk-txmeta {
  font-size: 11.5px; color: var(--text-2);
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.pmk-txdate {
  flex: 0 0 auto; font-size: 9px; font-weight: 700;
  letter-spacing: 0.08em; text-transform: uppercase; color: var(--muted);
}

/* ---------- presence option rows (sheet + panel) ---------- */
.pmk-pickhead {
  display: flex; align-items: center; justify-content: space-between;
  padding: 2px 2px 10px;
  border-bottom: 1px solid var(--hair, rgba(255,255,255,0.07));
  margin-bottom: 10px;
}
.pmk-pickhead h3 { margin: 0; font-size: 17px; font-weight: 800; }
.pmk-x {
  width: 30px; height: 30px; border-radius: 999px; border: 0;
  background: var(--raised-2); color: var(--text-2);
  display: grid; place-items: center; cursor: pointer; transition: color .15s;
}
.pmk-x:hover { color: var(--text); }
.pmk-x .ic { width: 15px; height: 15px; }
.pmk-picklist { display: flex; flex-direction: column; gap: 8px; }
.pmk-opt {
  display: flex; align-items: center; gap: 12px;
  width: 100%; padding: 11px 14px;
  background: var(--raised); border: 1px solid var(--border); border-radius: 16px;
  color: var(--text); text-align: left; cursor: pointer; font-family: inherit;
  transition: background .15s, border-color .15s;
}
.pmk-opt:hover { background: var(--raised-2); }
.pmk-opt--on { border-color: var(--green); background: rgba(255,255,255,0.07); }
.pmk-optcopy { display: flex; flex-direction: column; gap: 1px; min-width: 0; }
.pmk-optlabel { font-size: 14px; font-weight: 700; line-height: 1.3; }
.pmk-optdesc { font-size: 11.5px; color: var(--muted); }
.pmk-optcheck { margin-left: auto; display: grid; color: var(--green); }
.pmk-optcheck svg { width: 17px; height: 17px; }
.pmk-pickfoot {
  border-top: 1px solid var(--hair, rgba(255,255,255,0.07));
  margin-top: 12px; padding-top: 8px;
}
.pmk-custom {
  display: flex; align-items: center; gap: 10px; width: 100%;
  padding: 10px 8px; border: 0; border-radius: 12px; background: none;
  color: var(--text-2); font-size: 13px; font-weight: 700; text-align: left;
  cursor: pointer; font-family: inherit; transition: background .15s, color .15s;
}
.pmk-custom:hover { background: rgba(255,255,255,0.05); color: var(--text); }
.pmk-custom .ic { width: 18px; height: 18px; flex: 0 0 auto; }
.pmk-custom .ic:last-child { margin-left: auto; width: 14px; height: 14px; color: var(--muted); }

/* ============================================================
   iOS SCREEN (390 frame) — the "You" tab
   ============================================================ */
.ipf { display: flex; flex-direction: column; padding: 0 !important; }
.ipf__head {
  flex: 0 0 auto;
  display: flex; align-items: center; justify-content: space-between; gap: 12px;
  padding: 6px 16px 10px;
}
.ipf__h { font-size: 26px; font-weight: 800; letter-spacing: -0.02em; margin: 1px 0 0; }
.ipf__gear {
  width: 42px; height: 42px; border-radius: 999px; flex: 0 0 auto;
  background: var(--raised); border: 1px solid var(--border);
  color: var(--text-2); display: grid; place-items: center; cursor: pointer;
  box-shadow: inset 0 1px 0 rgba(255,255,255,0.10);
  transition: background .15s, color .15s;
}
.ipf__gear:hover, .ipf__gear:active { background: var(--raised-2); color: var(--text); }
.ipf__gear .ic { width: 22px; height: 22px; }
.ipf__scroll {
  flex: 1 1 auto; min-height: 0; overflow-y: auto;
  padding: 2px 16px 20px;
  display: flex; flex-direction: column; gap: 8px;
}

/* sub-screen header (settings / shop / friends back nav) */
.ipf-subhead { display: flex; align-items: center; gap: 8px; margin: 4px 0 14px; }
.ipf-back {
  width: 34px; height: 34px; border-radius: 999px; border: 0; flex: 0 0 auto;
  background: var(--raised); color: var(--text-2);
  display: grid; place-items: center; cursor: pointer; transition: color .15s;
}
.ipf-back:hover { color: var(--text); }
.ipf-back .ic { width: 18px; height: 18px; }
.ipf-subhead .iosstub__h { margin: 0; }

/* status bottom sheet card (reuses .iossheet positioning) */
.ipf-sheetcard {
  background: linear-gradient(160deg, rgba(28,32,31,0.94), rgba(14,17,16,0.92)) !important;
  border-top: 1px solid rgba(255,255,255,0.12);
  -webkit-backdrop-filter: blur(28px) saturate(175%);
  backdrop-filter: blur(28px) saturate(175%);
  box-shadow: inset 0 1px 0 rgba(255,255,255,0.16);
}

/* ============================================================
   DESKTOP PANEL (1280 frame) — opens from the rail avatar
   ============================================================ */
.sq--btn { border: 0; padding: 0; font: inherit; cursor: pointer; }

.dpf-layer { position: absolute; inset: 0; z-index: 95; }
.dpf {
  position: absolute; left: 86px; bottom: 14px; z-index: 96;
  width: 384px; max-height: calc(100% - 28px);
  box-sizing: border-box;
  overflow-y: auto;
  background: linear-gradient(160deg, rgba(26,26,28,0.92), rgba(13,13,14,0.90));
  border: 1px solid rgba(255,255,255,0.12);
  border-radius: 20px;
  padding: 14px;
  -webkit-backdrop-filter: blur(30px) saturate(180%);
  backdrop-filter: blur(30px) saturate(180%);
  box-shadow: inset 0 1px 0 rgba(255,255,255,0.20), 0 28px 70px -18px rgba(0,0,0,0.8);
  display: flex; flex-direction: column; gap: 8px;
}
.dpf__head { display: flex; align-items: center; justify-content: space-between; padding: 0 2px 2px; }
.dpf__hgroup { display: flex; align-items: center; gap: 8px; }
.dpf__htitle { font-size: 15px; font-weight: 800; letter-spacing: -0.01em; }

/* settings view inside the panel */
.dpf-setlabel { padding: 4px 4px 0; }
.dpf-prefnotice {
  margin: -1px 4px 2px; padding: 7px 9px; border-radius: 10px;
  background: rgba(255,255,255,0.06); border: 1px solid rgba(255,255,255,0.10);
  color: var(--text-2); font-size: 11.5px; font-weight: 700;
}
.dpf-prefnotice--ok {
  background: rgba(74,222,128,0.10); border-color: rgba(74,222,128,0.28);
  color: var(--green);
}
.dpf-set { display: flex; flex-direction: column; padding: 5px !important; }
.dpf-row { display: flex; align-items: center; gap: 11px; padding: 10px 9px; border-radius: 12px; }
.dpf-row + .dpf-row { border-top: 1px solid var(--hair, rgba(255,255,255,0.07)); }
.dpf-row--disabled { opacity: 0.68; }
.dpf-rowic {
  width: 32px; height: 32px; border-radius: 999px; flex: 0 0 auto;
  background: var(--raised-2); border: 1px solid var(--border);
  color: var(--text-2); display: grid; place-items: center;
}
.dpf-rowic .ic { width: 16px; height: 16px; }
.dpf-rowcopy { flex: 1 1 auto; min-width: 0; display: flex; flex-direction: column; gap: 3px; }
.dpf-rowcopy .t { font-size: 13px; font-weight: 700; line-height: 1.25; }
.dpf-rowcopy .s { font-size: 11.5px; color: var(--muted); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.dpf-input {
  width: 100%; height: 34px; padding: 0 11px; margin-top: 2px;
  background: rgba(255,255,255,0.05);
  border: 1px solid var(--border); border-radius: 10px;
  color: var(--text); font: inherit; font-size: 13px; font-weight: 600;
}
.dpf-input:focus { outline: none; border-color: var(--green); }
.dpf-username-repair { display: flex; align-items: center; gap: 6px; min-width: 0; flex-wrap: wrap; }
.dpf-username-repair .dpf-input { flex: 1 1 150px; min-width: 0; }
.dpf-username-repair__save { flex: 0 0 auto; border: 1px solid var(--border); border-radius: 8px; padding: 5px 9px; background: var(--raised); color: var(--text); font: inherit; font-size: 11px; font-weight: 700; cursor: pointer; }
.dpf-username-repair__save:disabled { opacity: .5; cursor: default; }
.dpf-username-repair .s { flex-basis: 100%; }

/* color theme picker */
.dpf-themegrid { display: flex; flex-direction: column; gap: 7px; padding: 0 0 5px; }
.dpf-theme {
  display: flex; align-items: center; gap: 10px; width: 100%;
  min-height: 62px; padding: 9px; border-radius: 13px;
  background: rgba(255,255,255,0.025); border: 1px solid transparent;
  color: var(--text); text-align: left; font: inherit; cursor: pointer;
  transition: background .15s, border-color .15s;
}
.dpf-theme:hover { background: rgba(255,255,255,0.045); border-color: rgba(255,255,255,0.08); }
.dpf-theme.on { background: rgba(255,255,255,0.07); border-color: rgba(255,255,255,0.22); }
.dpf-theme__swatch {
  position: relative; width: 42px; height: 34px; border-radius: 11px; flex: 0 0 auto;
  overflow: hidden; border: 1px solid rgba(255,255,255,0.14); background: #070809;
}
.dpf-theme__swatch span {
  position: absolute; width: 6px; height: 6px; border-radius: 2px; background: currentColor; opacity: 0.72;
}
.dpf-theme__swatch span:nth-child(1) { left: 8px; top: 8px; }
.dpf-theme__swatch span:nth-child(2) { left: 18px; top: 16px; opacity: 0.95; }
.dpf-theme__swatch span:nth-child(3) { right: 8px; bottom: 8px; opacity: 0.55; }
.dpf-theme__swatch--green {
  color: #6ee79c;
  background:
    radial-gradient(circle at 68% 34%, rgba(146,245,178,0.38), transparent 34%),
    radial-gradient(circle at 22% 70%, rgba(37,143,78,0.52), transparent 42%),
    #070a08;
}
.dpf-theme__swatch--pink {
  color: #ff9acb;
  background:
    radial-gradient(circle at 68% 34%, rgba(255,174,217,0.38), transparent 34%),
    radial-gradient(circle at 22% 70%, rgba(183,56,124,0.54), transparent 42%),
    #0c060a;
}
.dpf-theme__swatch--mono {
  color: #f3f4f6;
  background:
    radial-gradient(circle at 68% 34%, rgba(255,255,255,0.36), transparent 34%),
    radial-gradient(circle at 22% 70%, rgba(130,132,138,0.48), transparent 42%),
    #080809;
}
.dpf-theme__copy { flex: 1 1 auto; min-width: 0; display: flex; flex-direction: column; gap: 2px; }
.dpf-theme__title { font-size: 13px; font-weight: 800; line-height: 1.25; }
.dpf-theme__desc { font-size: 11.5px; line-height: 1.25; color: var(--muted); }
.dpf-theme__check { display: grid; color: var(--text); flex: 0 0 auto; }
.dpf-theme__check svg { width: 16px; height: 16px; }

/* pressable settings rows (change password / log out / delete) */
.dpf-row--btn {
  width: 100%; border: 0; background: none; text-align: left;
  font-family: inherit; color: var(--text); cursor: pointer;
  transition: background .15s;
}
.dpf-row--btn:hover { background: rgba(255,255,255,0.045); }
.dpf-row--disabled .pmk-switch { cursor: not-allowed; }
.dpf-chev { width: 14px; height: 14px; color: var(--muted); flex: 0 0 auto; }
.dpf-sent { display: grid; color: var(--green); flex: 0 0 auto; }
.dpf-sent svg { width: 16px; height: 16px; }
.dpf-row--danger .t { color: var(--red); }
.dpf-rowic--danger { color: var(--red); border-color: rgba(255,68,88,0.3); }

/* inline confirm boxes */
.dpf-confirm {
  margin: 4px 4px 8px;
  background: rgba(255,255,255,0.04);
  border: 1px solid var(--border);
  border-radius: 14px;
  padding: 12px;
  display: flex; flex-direction: column; gap: 10px;
}
.dpf-confirm--danger {
  background: rgba(255,68,88,0.07);
  border-color: rgba(255,68,88,0.32);
}
.dpf-confirm p { margin: 0; font-size: 12px; line-height: 1.5; color: var(--text-2); }
.dpf-confirm p b { color: var(--text); }
.dpf-confirm__field { display: block; }
.dpf-confirm .dpf-input { height: 44px; margin-top: 0; }
.dpf-confirm__error { color: #ff8b98 !important; }
.dpf-confirm__btns { display: flex; gap: 8px; justify-content: flex-end; }
.dpf-cbtn {
  min-height: 44px; padding: 0 14px; border-radius: 999px;
  background: var(--raised-2); border: 1px solid var(--border);
  color: var(--text); font-size: 12.5px; font-weight: 700;
  font-family: inherit; cursor: pointer;
  transition: background .15s;
}
.dpf-cbtn:hover { background: var(--fill-hover, rgba(255,255,255,0.1)); }
.dpf-cbtn:disabled { cursor: not-allowed; opacity: 0.52; }
.dpf-cbtn--danger {
  background: linear-gradient(160deg, rgba(255,68,88,0.62), rgba(240,45,68,0.42));
  border-color: rgba(255,120,135,0.35);
  color: #fff;
  box-shadow: inset 0 1px 0 rgba(255,255,255,0.3);
}
.dpf-cbtn--danger:hover { background: linear-gradient(160deg, rgba(255,90,108,0.72), rgba(245,60,82,0.5)); }

/* mobile settings screen wrapper */
.ipf-settings { display: flex; flex-direction: column; gap: 8px; }
.ipf-settings .dpf-setlabel { margin-top: 4px; }
.dpf .pmk-card { border-radius: 16px; }
.dpf .pmk-av { width: 64px; height: 64px; font-size: 26px; }
.dpf .pmk-ring { padding: 3px; }
.dpf .pmk-ringgap { padding: 2.5px; background: #11140fee; background: var(--bg, #0e1110); }
.dpf .pmk-name { font-size: 18px; }
.dpf .pmk-cell { min-height: 58px; }
.dpf .pmk-cellval { font-size: 21px; }
.dpf .pmk-picklist { padding: 2px 0 4px; }
.vulu-profile-portrait { aspect-ratio: 29 / 50; }

/* ============================================================
   DESKTOP PANEL — mobile-faithful profile (matches the RN screen)
   dpfm-* = the popup rebuilt to mirror the mobile "Your profile"
   ============================================================ */

/* gradient cover banner — bleeds past the panel padding */
.dpfm-hero {
  position: relative; flex: 1 1 auto; min-height: 150px;
  margin: -14px -14px 0;
  border-radius: 20px 20px 0 0; overflow: hidden;
  background:
    radial-gradient(125% 96% at 50% 4%, rgba(201,74,86,0.95), rgba(132,46,72,0.55) 52%, rgba(18,18,20,0) 100%),
    linear-gradient(177deg, #9c3b48 0%, #6a2c44 50%, rgba(18,18,20,0) 100%);
}
.dpfm-hero::after {
  content: ""; position: absolute; left: 0; right: 0; bottom: 0; height: 168px;
  pointer-events: none;
  background: linear-gradient(180deg, rgba(18,18,20,0) 0%, rgba(8,8,10,0.45) 54%, #131314 100%);
}
/* identity overlaid on the photo (mobile-style: name + status over the picture) */
.dpfm-heroid {
  position: absolute; left: 16px; right: 16px; bottom: 14px; z-index: 1;
  display: flex; flex-direction: column; gap: 8px;
}
.dpfm-heroid .dpfm-name { color: #fff; text-shadow: 0 2px 14px rgba(0,0,0,0.6); }
.dpfm-heroid .dpfm-handle { color: rgba(255,255,255,0.9); text-shadow: 0 1px 8px rgba(0,0,0,0.55); }
.dpfm-heroid .dpfm-status {
  background: rgba(0,0,0,0.38); border-color: rgba(255,255,255,0.24); color: #fff;
  -webkit-backdrop-filter: blur(8px); backdrop-filter: blur(8px);
}
.dpfm-heroid .dpfm-status:hover { background: rgba(0,0,0,0.52); }
.dpfm-heroid .dpfm-status .ic { color: rgba(255,255,255,0.82); }
.dpfm-herobtn {
  position: absolute; top: 12px; z-index: 2;
  width: 34px; height: 34px; border-radius: 999px; border: 0; cursor: pointer;
  display: grid; place-items: center; color: #fff;
  background: rgba(0,0,0,0.34);
  -webkit-backdrop-filter: blur(8px); backdrop-filter: blur(8px);
  box-shadow: inset 0 0 0 1px rgba(255,255,255,0.16);
  transition: background .15s;
}
.dpfm-herobtn:hover { background: rgba(0,0,0,0.5); }
.dpfm-herobtn--close { left: 12px; }
.dpfm-herobtn--gear  { right: 12px; }
.dpfm-herobtn .ic { width: 17px; height: 17px; }

/* identity */
.dpfm-name {
  margin: 0; font-size: 27px; font-weight: 800; letter-spacing: -0.02em; line-height: 1.1;
  max-width: 100%; white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.dpfm-sub { display: flex; align-items: center; gap: 10px; min-width: 0; }
.dpfm-status {
  display: inline-flex; align-items: center; gap: 7px; flex: 0 0 auto;
  padding: 4px 11px 4px 12px; border-radius: 999px;
  background: var(--raised-2); border: 1px solid var(--border);
  color: var(--text); font-size: 12.5px; font-weight: 700;
  cursor: pointer; font-family: inherit; transition: background .15s;
}
.dpfm-status:hover { background: rgba(255,255,255,0.1); }
.dpfm-status .ic { width: 12px; height: 12px; color: var(--text-2); }
.dpfm-handle {
  font-size: 13px; font-weight: 600; color: var(--text-2); min-width: 0;
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}

/* edit profile */
.dpfm-edit {
  width: 100%; height: 46px; border-radius: 14px;
  background: var(--raised); border: 1px solid var(--border); color: var(--text);
  font-size: 14.5px; font-weight: 700; cursor: pointer; font-family: inherit;
  box-shadow: inset 0 1px 0 rgba(255,255,255,0.08);
  transition: background .15s;
}
.dpfm-edit:hover { background: var(--raised-2); }

/* stats row */
.dpfm-stats {
  display: flex; align-items: center;
  background: var(--raised); border: 1px solid var(--border); border-radius: 16px; padding: 4px;
}
.dpfm-cell {
  flex: 1 1 0; min-width: 0;
  display: flex; flex-direction: column; align-items: center; gap: 3px; padding: 12px 2px;
}
.dpfm-cellval { font-size: 21px; font-weight: 800; letter-spacing: -0.01em; line-height: 1.1; }
.dpfm-celllabel { font-size: 11.5px; font-weight: 600; color: var(--text-2); }
.dpfm-celldiv { width: 1px; height: 30px; flex: 0 0 auto; background: var(--border); opacity: 0.6; }

/* money row — gems / cash / rank */
.dpfm-money {
  display: grid; grid-template-columns: repeat(3, 1fr);
  background: var(--raised); border: 1px solid var(--border); border-radius: 16px; overflow: hidden;
}
.dpfm-mcell { display: flex; flex-direction: column; gap: 6px; padding: 13px 13px; min-width: 0; }
.dpfm-mcell + .dpfm-mcell { border-left: 1px solid var(--border); }
.dpfm-mval {
  display: flex; align-items: center; gap: 6px;
  font-size: 16px; font-weight: 800; letter-spacing: -0.01em; line-height: 1.1;
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.dpfm-mval .ic, .dpfm-mval svg { width: 15px; height: 15px; flex: 0 0 auto; }
.dpfm-mval--gems .ic { color: var(--purple); }
.dpfm-mval--cash { color: var(--green); }
.dpfm-mval--rank { color: var(--gold); }
.dpfm-mlabel { font-size: 11px; font-weight: 600; color: var(--text-2); }

/* viewed-today row */
.dpfm-viewed {
  width: 100%; display: flex; align-items: center; gap: 12px;
  padding: 14px 15px; border-radius: 16px;
  background: var(--raised); border: 1px solid var(--border); color: var(--text);
  font-size: 13.5px; font-weight: 600; cursor: pointer; font-family: inherit; text-align: left;
  transition: background .15s;
}
.dpfm-viewed:hover { background: var(--raised-2); }
.dpfm-veye { display: grid; color: var(--text-2); flex: 0 0 auto; }
.dpfm-veye .ic { width: 18px; height: 18px; }
.dpfm-vtxt { flex: 1 1 auto; min-width: 0; }
.dpfm-vtxt b { font-weight: 800; color: var(--text); }
.dpfm-vchev { display: grid; color: var(--muted); flex: 0 0 auto; }
.dpfm-vchev .ic { width: 15px; height: 15px; }

/* profile-views sub-screen */
.dpfm-vsublabel { font-size: 12px; color: var(--text-2); padding: 2px 4px 4px; }
.dpfm-profile-views { display: flex; flex-direction: column; gap: 8px; min-height: 0; }
.dpfm-profile-views__summary { display: flex; align-items: baseline; gap: 8px; padding: 2px 4px 0; color: var(--text-2); }
.dpfm-profile-views__summary strong { color: var(--text); font-size: 22px; line-height: 1; }
.dpfm-profile-views__summary span { font-size: 12px; font-weight: 700; }
.dpfm-top-viewers {
  display: flex;
  gap: 8px;
  overflow-x: auto;
  padding: 1px 3px 8px;
  scrollbar-width: thin;
  scroll-snap-type: x proximity;
}
.dpfm-top-viewer {
  flex: 0 0 94px;
  min-width: 0;
  padding: 8px;
  border: 1px solid var(--border);
  border-radius: 14px;
  background: var(--raised);
  display: flex;
  flex-direction: column;
  gap: 3px;
  scroll-snap-align: start;
}
.dpfm-top-viewer .dpfm-person-avatar { width: 100% !important; height: 112px !important; border-radius: 10px; margin-bottom: 3px; }
.dpfm-top-viewer strong,
.dpfm-top-viewer small { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.dpfm-top-viewer strong { font-size: 12.5px; }
.dpfm-top-viewer small { font-size: 10.5px; color: var(--text-2); }
.dpfm-top-viewer > span:last-child { width: fit-content; margin-top: 3px; padding: 3px 6px; border-radius: 7px; font-size: 10px; font-weight: 800; color: #f7b5ff; background: rgba(190,56,243,.13); }
.dpfm-vlist { display: flex; flex-direction: column; padding: 6px !important; }
.dpfm-vrow { display: flex; align-items: center; gap: 11px; padding: 8px 7px; border-radius: 12px; }
.dpfm-vrow + .dpfm-vrow { border-top: 1px solid var(--hair, rgba(255,255,255,0.06)); }
.dpfm-vmeta { flex: 1 1 auto; min-width: 0; display: flex; flex-direction: column; }
.dpfm-vnm { font-size: 13.5px; font-weight: 700; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.dpfm-vsub { font-size: 11.5px; color: var(--text-2); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.dpfm-vtag { flex: 0 0 auto; font-size: 11px; font-weight: 700; color: var(--text-2); padding: 4px 10px; border-radius: 999px; background: var(--raised-2); border: 1px solid var(--border); }
.dpfm-vtag--blocked { color: var(--danger, #ff6f7b); border-color: color-mix(in oklab, var(--danger, #ff6f7b) 42%, transparent); background: color-mix(in oklab, var(--danger, #ff6f7b) 12%, transparent); }
.dpfm-vfollow { flex: 0 0 auto; font: inherit; font-size: 12.5px; font-weight: 800; color: #0a0a0a; background: #fff; border: 0; padding: 7px 15px; border-radius: 999px; cursor: pointer; transition: background .15s, color .15s; }
.dpfm-vfollow:hover { background: #e7ebee; }
.dpfm-vfollow.on { background: var(--raised-2); color: var(--text); box-shadow: inset 0 0 0 1px var(--border); }
.dpfm-vfollow:disabled { cursor: default; opacity: .74; }
.dpfm-verr { display: block; margin-top: 2px; font-size: 11px; color: var(--danger, #ff6f7b); }
.dpfm-person-avatar { position: relative; flex: 0 0 auto; display: grid; place-items: center; overflow: hidden; border-radius: 12px; background: var(--raised-2); color: var(--text); font-size: 13px; font-weight: 800; }
.dpfm-person-avatar img { width: 100%; height: 100%; object-fit: cover; display: block; }
.dpfm-friends-view { display: flex; flex-direction: column; gap: 11px; min-height: 0; }
.dpfm-friend-search { height: 40px; padding: 0 12px; display: flex; align-items: center; gap: 9px; border: 1px solid var(--border); border-radius: 12px; background: var(--raised); color: var(--text-2); }
.dpfm-friend-search .ic { width: 16px; height: 16px; }
.dpfm-friend-search input { flex: 1 1 auto; min-width: 0; border: 0; outline: 0; color: var(--text); background: transparent; font: inherit; font-size: 13px; }
.dpfm-friend-search input::placeholder { color: var(--muted); }
.dpfm-friend-section { display: flex; flex-direction: column; gap: 5px; }
.dpfm-friend-section h3 { margin: 0 4px; color: var(--text-2); font-size: 11px; letter-spacing: .04em; text-transform: uppercase; }
.dpfm-friend-section h3 span { margin-left: 3px; color: var(--muted); }
.dpfm-friend-list { display: flex; flex-direction: column; padding: 5px !important; }
.dpfm-friend-row { min-height: 54px; display: flex; align-items: center; gap: 10px; padding: 6px; }
.dpfm-friend-row + .dpfm-friend-row { border-top: 1px solid var(--hair, rgba(255,255,255,.06)); }
.dpfm-friend-person { min-width: 0; flex: 1 1 auto; display: flex; align-items: center; gap: 10px; padding: 0; border: 0; color: inherit; background: transparent; text-align: left; cursor: pointer; }
.dpfm-friend-person:hover .dpfm-vnm { color: #fff; }
.dpfm-friend-person:focus-visible { outline: 2px solid var(--focus, #87a7ff); outline-offset: 3px; border-radius: 10px; }
.dpfm-friend-person:disabled { cursor: default; }
.dpfm-friend-actions { display: flex; align-items: center; gap: 5px; }
.dpfm-friend-actions button { width: 30px; height: 30px; display: grid; place-items: center; border: 1px solid var(--border); border-radius: 9px; color: var(--text-2); background: var(--raised-2); cursor: pointer; }
.dpfm-friend-actions button:hover { color: var(--text); border-color: rgba(255,255,255,.2); }
.dpfm-friend-actions button:disabled { opacity: .5; cursor: default; }
.dpfm-friend-actions .ic { width: 14px; height: 14px; }

/* ============================================================
   Profile: taller widget + side-by-side secondary widget
   ============================================================ */
/* both panels are ~half-height columns, bottom-anchored (don't reach the top) */
.dpf--mobile { top: auto; bottom: 14px; height: 63%; min-height: 550px; max-height: calc(100% - 28px); }
.dpf--mobile { gap: 10px; }
.dpf--side { left: 404px; top: auto; bottom: 14px; width: 304px; height: 469px; min-height: 469px; max-height: 469px; border-radius: 8px; }
/* keep everything below the cover at natural size; the cover fills the slack */
.dpf--mobile > *:not(.dpfm-hero) { flex: 0 0 auto; }

.dpf--profilecard{position:absolute;width:304px;height:469px;min-height:469px;max-height:469px;padding:2px;border-radius:8px;overflow:hidden;display:block;background:#17191f;border:1px solid #353945;box-shadow:0 0 0 1px rgba(0,0,0,.28),0 16px 42px rgba(0,0,0,.34)}
.dpfm-account-banner{appearance:none;position:absolute;left:2px;top:2px;width:300px;height:218px;padding:0;border:0;border-radius:6px 6px 0 0;font:inherit;margin:0;overflow:hidden;background-color:var(--raised-2);background-size:cover;background-position:center 38%;cursor:pointer}
.dpfm-account-banner:hover .dpfm-account-banner__shade { opacity: .86; }
.dpfm-account-banner:active .dpfm-account-banner__shade { opacity: .96; }
.dpfm-account-banner:focus-visible { outline: 2px solid var(--text); outline-offset: -4px; }
.dpfm-account-banner__fallback{position:absolute;inset:0;background:radial-gradient(circle at 24% 12%,rgba(199,125,255,.34),transparent 48%),linear-gradient(118deg,rgba(47,211,159,.18),rgba(255,255,255,.03))}
.dpfm-account-banner__shade{position:absolute;inset:0;background:linear-gradient(to bottom,rgba(4,5,5,.03),rgba(8,9,9,.42));transition:opacity .16s ease}
.dpfm-v9a-banner-actions{position:absolute;z-index:3;top:14px;right:14px;display:flex;align-items:center;gap:6px}
.dpfm-account-head{position:absolute;z-index:2;top:235px;left:18px;right:18px;display:grid;grid-template-columns:minmax(0,1fr) auto;align-items:center;gap:6px;margin:0;padding:0}
.dpfm-account-tools{display:flex;align-items:center;justify-content:flex-end;gap:5px;min-width:0}
.dpfm-gem-plus {
  position: relative;
  isolation: isolate;
  display: grid;
  place-items: center;
  flex: 0 0 42px;
  width: 42px;
  height: 42px;
  padding: 0;
  overflow: hidden;
  border: 0;
  border-radius: 11px;
  color: #fff;
  background: linear-gradient(145deg, #454553, #17191f);
  box-shadow: 0 1px 0 #08090c, 0 4px 7px rgba(0,0,0,.34), inset 0 1px rgba(255,255,255,.18);
  cursor: pointer;
}
.dpfm-gem-plus:hover { background: linear-gradient(145deg, rgb(77 75 92), rgb(27 29 37)); }
.dpfm-gem-plus:active { transform: translateY(1px); }
.dpfm-gem-plus:focus-visible { outline: 2px solid rgb(216 219 225); outline-offset: 2px; }
.dpfm-gem-plus.is-on { overflow: visible; background: linear-gradient(145deg, #30243a, #17191f); }
.dpfm-gem-plus__mark {
  position: absolute;
  z-index: 6;
  inset: 3.5px;
  width: 35px;
  height: 35px;
  image-rendering: pixelated;
  pointer-events: none;
}
.dpfm-gem-plus__flame {
  position: absolute;
  z-index: 7;
  left: -14px;
  top: -36px;
  width: 70px;
  height: 82px;
  image-rendering: pixelated;
  pointer-events: none;
  mix-blend-mode: screen;
  clip-path: inset(-110px 9px 12px 9px);
}
.dpfm-profile-views-control {
  width: 88px;
  height: 40px;
  padding: 5px 7px;
  border: 1px solid rgba(225, 132, 255, 0.58);
  border-radius: 10px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 4px;
  color: #f7b5ff;
  background:
    radial-gradient(circle at 2px 2px, rgba(255, 225, 255, 0.22) 0 1px, transparent 1.3px) 0 0 / 8px 8px,
    rgba(190, 56, 243, 0.08);
  box-shadow: inset 0 1px rgba(255,255,255,.12);
  cursor: pointer;
  transition: background-color .15s, border-color .15s, box-shadow .15s;
}
.dpfm-profile-views-control:hover,
.dpfm-profile-views-control:focus-visible,
.dpfm-profile-views-control.on {
  border-color: rgba(247, 181, 255, 0.86);
  background:
    radial-gradient(circle at 2px 2px, rgba(255, 239, 255, 0.30) 0 1px, transparent 1.35px) 0 0 / 8px 8px,
    rgba(190, 56, 243, 0.15);
  box-shadow: inset 0 1px rgba(255,255,255,.18), 0 6px 18px rgba(190,56,243,.18);
}
.dpfm-profile-views-control:focus-visible { outline: 2px solid #f7b5ff; outline-offset: 2px; }
.dpfm-profile-views-control__eye {
  width: 16px;
  height: 16px;
  flex: 0 0 auto;
  overflow: visible;
}
.dpfm-profile-views-control__count {
  display: grid;
  place-items: center;
  min-width: 15px;
  color: #f7b5ff;
  font-size: 12px;
  font-weight: 800;
  line-height: 1;
}
.dpfm-account-icon{width:32px;height:32px;flex:0 0 32px;padding:0;border:1px solid var(--border);border-radius:8px;display:grid;place-items:center;color:var(--text-2);background:rgba(23,25,31,.88);-webkit-backdrop-filter:blur(14px);backdrop-filter:blur(14px);cursor:pointer}
.dpfm-account-icon:hover,
.dpfm-account-icon.on { color: var(--text); background: var(--raised-2); }
.dpfm-account-icon .ic { width: 16px; height: 16px; }
@media(pointer:coarse){.dpfm-account-icon{position:relative}.dpfm-account-icon::after{content:'';position:absolute;inset:-6px}}
.dpfm-account-identity{min-width:0;display:flex;flex-direction:column;align-items:flex-start;gap:2px;text-align:left}
.dpfm-account-identity .dpfm-name { font-size: 20px; line-height: 24px; }
.dpfm-account-identity .dpfm-handle { font-size: 14px; line-height: 18px; }
.dpfm-account-action{width:auto;min-height:32px;padding:0 9px;border:1px solid var(--border);border-radius:8px;display:inline-flex;align-items:center;justify-content:center;gap:7px;color:var(--text);background:rgba(23,25,31,.88);font:inherit;font-size:12.5px;font-weight:700;cursor:pointer;transition:color .15s,background .15s,border-color .15s}
.dpfm-account-action:hover,
.dpfm-account-action.on {
  color: var(--text);
  background: var(--raised-2);
  border-color: rgba(255,255,255,.18);
}
.dpfm-account-action .ic { width: 15px; height: 15px; }
@media(pointer:coarse){.dpfm-account-action{position:relative}.dpfm-account-action::after{content:'';position:absolute;inset:-6px 0}}
.dpfm-account-social{position:absolute;top:290px;left:18px;right:18px;height:32px;display:flex;align-items:center;gap:13px}
.dpfm-account-social .dpfm-status,.dpfm-friends-control,.dpfm-request-badge{min-height:30px;padding:0;border:0;border-radius:7px;display:inline-flex;align-items:center;gap:5px;color:var(--text);background:transparent;font:inherit;font-size:11px;font-weight:700;cursor:pointer}
.dpfm-account-social .dpfm-status { flex: 0 0 auto; }
.dpfm-account-social .dpfm-status:hover,
.dpfm-friends-control:hover,
.dpfm-account-social .on { color: #fff; background: rgba(255,255,255,.06); }
.dpfm-friends-control .ic { width: 15px; height: 15px; }
.dpfm-request-badge{min-width:18px;min-height:18px;justify-content:center;padding:0 5px;border-radius:999px;color:#fff;background:#d24254;font-size:10px}
/* Coarse-pointer rings lift the compact social rail to the 44px hit floor
   without repainting it: Friends is already wide enough, so it only grows
   vertically (30px + 7px), and the badge grows on both axes (18px + 13px),
   stopping inside the 13px row gap. */
@media(pointer:coarse){.dpfm-friends-control,.dpfm-request-badge{position:relative}.dpfm-friends-control::after{content:'';position:absolute;inset:-7px 0}.dpfm-request-badge::after{content:'';position:absolute;inset:-13px}}
.dpf--profilecard .dpfm-money{position:absolute;top:330px;left:18px;right:18px;height:60px;border-radius:8px;border-color:#353945;background:#22252d;box-shadow:inset 0 1px rgba(255,255,255,.035)}
.dpf--profilecard .dpfm-mcell { justify-content: center; align-items: center; gap: 2px; padding: 7px 4px; }
.dpf--profilecard .dpfm-mval { color: var(--text); font-size: 14px; }
.dpf--profilecard .dpfm-mval .ic,
.dpf--profilecard .dpfm-mval svg { width: 19px; height: 19px; }
.dpf--profilecard .dpfm-mval--gems { color: #d7b7ff; }
.dpf--profilecard .dpfm-mval--cash { color: #6fe6a9; }
.dpf--profilecard .dpfm-mval--rank { color: #f2d06b; }
.dpf--profilecard .dpfm-mlabel { color: var(--text-2); font-size: 9.5px; }
.dpf--profilecard .dpfm-shop{position:absolute;top:400px;left:18px;right:18px;height:42px;min-height:42px;margin:0;padding:0 9px;border-radius:8px;border-color:#353945;background:#22252d}
.dpf--profilecard .dpfm-shop__ic { width: 26px; height: 26px; border-radius: 8px; color: var(--text); background: rgba(255,255,255,.075); }
.dpf--profilecard .dpfm-shop__ic .ic { width: 16px; height: 16px; }
.dpf--profilecard .dpfm-shop__txt { font-size: 12.5px; font-weight: 700; color: var(--text); }

.dpfm-fuel-bits {
  position: absolute;
  z-index: 2003;
  left: 379px;
  bottom: 32px;
  display: flex;
  align-items: flex-end;
  pointer-events: auto;
  transition: left .18s ease;
}
.dpfm-fuel-bits.is-side-open { left: 707px; }
.dpfm-fuel-bits__toggle { display: inline-flex; padding: 0; border: 0; background: transparent; cursor: pointer; }
.dpfm-fuel-bits__chip {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  height: 36px;
  padding: 0 8px 0 7px;
  border: 1px solid var(--border);
  border-left: 0;
  border-radius: 0 9px 9px 0;
  background: color-mix(in oklab, var(--bg) 84%, #17191f);
  box-shadow: inset 0 1px rgba(255,255,255,.06), 2px 2px 0 rgba(0,0,0,.30);
}
.dpfm-fuel-bits__toggle:hover .dpfm-fuel-bits__chip,
.dpfm-fuel-bits__toggle[aria-expanded="true"] .dpfm-fuel-bits__chip { border-color: rgba(155,162,178,.48); background: var(--raised); }
.dpfm-fuel-bits__toggle:focus-visible { outline: 0; }
.dpfm-fuel-bits__toggle:focus-visible .dpfm-fuel-bits__chip { outline: 2px solid var(--text); outline-offset: 2px; }
.dpfm-fuel-bits__icon { display: block; width: 34px; height: 24px; image-rendering: pixelated; }
.dpfm-fuel-bits__chevron { transition: transform .18s ease; }
.dpfm-fuel-bits.is-open .dpfm-fuel-bits__chevron { transform: scaleX(-1); transform-origin: 26px 12px; }
.dpfm-fuel-bits__drawer {
  position: absolute;
  z-index: 1;
  left: 100%;
  bottom: 0;
  display: flex;
  gap: 10px;
  margin-left: 8px;
  opacity: 0;
  visibility: hidden;
  pointer-events: none;
  transform: translateX(-8px) scaleX(.92);
  transform-origin: left bottom;
  transition: opacity .18s ease, transform .18s ease, visibility .18s step-end;
}
.dpfm-fuel-bits.is-open .dpfm-fuel-bits__drawer {
  opacity: 1;
  visibility: visible;
  pointer-events: auto;
  transform: translateX(0) scaleX(1);
  transition: opacity .18s ease, transform .18s ease;
}
.dpfm-fuel-bits__meter { display: grid; grid-template-rows: 10px 13px 160px 28px; row-gap: 5px; justify-items: center; }
.dpfm-fuel-bits__name { color: #c3c8d1; font: 900 7px/10px ui-monospace, monospace; letter-spacing: .14em; text-transform: uppercase; }
.dpfm-fuel-bits__value { color: #f2f3f5; font: 800 9px/13px ui-monospace, monospace; }
.dpfm-fuel-bits__meter--fuel .dpfm-fuel-bits__name { color: #ffb46b; }
.dpfm-fuel-bits__meter--bits .dpfm-fuel-bits__name { color: #bbb9ff; }
.dpfm-fuel-bits__meter.is-unavailable .dpfm-fuel-bits__name,
.dpfm-fuel-bits__meter.is-unavailable .dpfm-fuel-bits__value { color: #8b929e; }
.dpfm-fuel-bits__shell {
  position: relative;
  width: 28px;
  height: 160px;
  overflow: hidden;
  border: 1px solid var(--border);
  border-radius: 12px;
  background: linear-gradient(180deg, rgba(255,255,255,.04), transparent 28%), #121216;
}
.dpfm-fuel-bits__shell--bits { background: color-mix(in oklab, #120f29 55%, #121216); }
.dpfm-fuel-bits__fuel-fill { position: absolute; inset: auto 0 0; background: linear-gradient(180deg, #fdba74, #f97316 16%, #ea580c 55%, #9a3412); transition: height .25s ease; }
.dpfm-fuel-bits__bits-grid { position: absolute; inset: 3px; display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); grid-template-rows: repeat(40, minmax(0, 1fr)); gap: 1px; }
.dpfm-fuel-bits__bits-grid i { min-height: 1px; border-radius: 1px; background: #211b46; opacity: .58; }
.dpfm-fuel-bits__bits-grid i.on { background: linear-gradient(180deg, #d4ceff, #a89bff 46%, #5c4fd6); opacity: 1; }
.dpfm-fuel-bits__plus { width: 28px; height: 28px; display: grid; place-items: center; padding: 0; border: 2px solid; border-radius: 6px; background: transparent; color: inherit; font: 900 17px/1 ui-monospace, monospace; cursor: pointer; }
.dpfm-fuel-bits__plus .ic { width: 15px; height: 15px; }
.dpfm-fuel-bits__meter--fuel .dpfm-fuel-bits__plus { border-color: rgba(249,115,22,.45); background: rgba(249,115,22,.13); color: #ffdc9c; }
.dpfm-fuel-bits__meter--bits .dpfm-fuel-bits__plus { border-color: rgba(139,124,255,.45); background: rgba(139,124,255,.14); color: #d4ceff; }
.dpfm-fuel-bits__plus:disabled { opacity: .4; cursor: default; }

@media (max-width: 1040px) {
  .dpfm-fuel-bits.is-side-open { left: 379px; }
  .dpfm-fuel-bits__drawer { left: auto; right: 100%; margin-left: 0; margin-right: 8px; transform-origin: right bottom; }
}

@media (max-width: 760px) {
  .dpfm-fuel-bits,
  .dpfm-fuel-bits.is-side-open { left: auto; right: 0; }
}

@media (prefers-reduced-motion: reduce) {
  .dpfm-gem-plus__flame { display: none; }
  .dpfm-fuel-bits,
  .dpfm-fuel-bits__drawer,
  .dpfm-fuel-bits__chevron { transition: none; }
}

/* Profile-photo framing: one native-derived portrait rectangle is persisted at upload time. */
.dpfcrop-layer {
  position: fixed;
  inset: 0;
  z-index: 1300;
  display: grid;
  place-items: center;
  padding: 20px;
  background: rgba(3, 4, 5, .78);
  -webkit-backdrop-filter: blur(16px);
  backdrop-filter: blur(16px);
}
.dpfcrop {
  width: min(430px, calc(100vw - 32px));
  max-height: calc(100dvh - 32px);
  overflow: auto;
  padding: 14px;
  border: 1px solid rgba(255,255,255,.16);
  border-radius: 24px;
  color: var(--text);
  background: rgba(19, 19, 21, .94);
  box-shadow: 0 32px 96px rgba(0,0,0,.66), inset 0 1px 0 rgba(255,255,255,.08);
}
.dpfcrop__head {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr) auto;
  align-items: start;
  gap: 10px;
  padding: 2px 0 14px;
  text-align: center;
}
.dpfcrop__head h3 { margin: 0; font-size: 16px; line-height: 1.25; }
.dpfcrop__head p { margin: 4px 0 0; color: var(--text-2); font-size: 11px; line-height: 1.3; }
.dpfcrop__cancel,
.dpfcrop__use {
  min-height: 36px;
  padding: 0 9px;
  border: 0;
  border-radius: 10px;
  color: var(--text);
  background: transparent;
  font: inherit;
  font-size: 13px;
  font-weight: 750;
  cursor: pointer;
}
.dpfcrop__use { color: #07100b; background: var(--green); }
.dpfcrop__cancel:disabled,
.dpfcrop__use:disabled { cursor: wait; opacity: .58; }
.dpfcrop__frame {
  position: relative;
  width: min(290px, 72vw);
  aspect-ratio: 29 / 50;
  margin: 0 auto;
  overflow: hidden;
  border-radius: 18px;
  background: #090a0b;
  box-shadow: 0 0 0 1px rgba(255,255,255,.18), 0 16px 44px rgba(0,0,0,.45);
  cursor: grab;
  touch-action: none;
  user-select: none;
}
.dpfcrop__frame:active { cursor: grabbing; }
.dpfcrop__frame img {
  position: absolute;
  max-width: none;
  pointer-events: none;
  user-select: none;
}
.dpfcrop__zoom {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr);
  align-items: center;
  gap: 14px;
  width: min(290px, 72vw);
  margin: 16px auto 2px;
  color: var(--text-2);
  font-size: 12px;
  font-weight: 700;
}
.dpfcrop__zoom input { width: 100%; accent-color: var(--green); }
@media (max-height: 720px) {
  .dpfcrop__frame { width: min(220px, 56vw); }
  .dpfcrop__zoom { width: min(220px, 56vw); }
}

/* big avatar sitting in the cover photo */
/* active states for the side-widget triggers */
.dpfm-herobtn--gear.on { background: #fff; color: #0a0a0a; box-shadow: inset 0 0 0 1px rgba(255,255,255,0.6); }
.dpfm-edit.on { background: var(--raised-2); box-shadow: inset 0 1px 0 rgba(255,255,255,0.08), inset 0 0 0 1px rgba(255,255,255,0.22); }
.dpfm-viewed.on { background: var(--raised-2); box-shadow: inset 0 0 0 1px rgba(255,255,255,0.18); }

/* side widget header */
.dpf--side .dpf__head { padding: 2px 2px 6px; }
.dpf--side .dpf__htitle { font-size: 16px; font-weight: 800; }
.dpfm-section-nav {
  position: sticky; top: -14px; z-index: 12;
  display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); gap: 4px;
  margin: -14px -14px 4px; padding: 10px 10px 8px;
  background: rgba(14,15,18,.93); border-bottom: 1px solid var(--border);
  -webkit-backdrop-filter: blur(18px) saturate(150%); backdrop-filter: blur(18px) saturate(150%);
}
.dpfm-section-nav__item {
  min-width: 0; min-height: 46px; padding: 5px 2px; border: 1px solid transparent; border-radius: 11px;
  display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 3px;
  background: transparent; color: var(--muted); font: inherit; font-size: 9px; font-weight: 750;
  cursor: pointer; transition: background .15s, border-color .15s, color .15s;
}
.dpfm-section-nav__item:hover { background: rgba(255,255,255,.055); color: var(--text-2); }
.dpfm-section-nav__item.is-active {
  background: rgba(255,255,255,.09); border-color: rgba(255,255,255,.13); color: var(--text);
}
.dpfm-section-nav__item:focus-visible { outline: 2px solid var(--text); outline-offset: -2px; }
.dpfm-section-nav__icon { width: 18px; height: 18px; display: grid; place-items: center; }
.dpfm-section-nav__icon .ic { width: 17px; height: 17px; }
.dpfm-section-nav__icon .pmk-dot { width: 11px; height: 11px; box-shadow: 0 0 0 2px rgba(255,255,255,.08); }
.dpfm-section-content { display: contents; }
.dpfm-status-view { display: flex; flex-direction: column; gap: 10px; }
.dpfm-status.on { background: rgba(255,255,255,.1); box-shadow: inset 0 0 0 1px rgba(255,255,255,.14); }

@media (max-width: 760px) {
  .dpf-layer .dpf.dpf--side {
    position: fixed; left: 0; right: 0; bottom: 0; top: auto;
    width: 100%; max-width: 100%; height: 92vh; min-height: 0; max-height: 92vh; box-sizing: border-box;
    border-radius: 18px 18px 0 0;
  }
  .dpf--side { padding-top: 10px; }
  .dpfm-section-nav { top: -10px; margin: -10px -14px 4px; padding-top: max(10px, env(safe-area-inset-top)); }
  .dpfm-section-nav__item { min-height: 50px; font-size: 10px; }
}

/* edit-profile widget (matches the mobile PR-5 reference) */
.dpfe__head { align-items: center; }
.dpfe__head .pmk-x { background: var(--raised-2); }
.dpfe__htitle { flex: 1 1 auto; text-align: center; font-size: 16px; font-weight: 800; }
.dpfe__save {
  flex: 0 0 auto; background: none; border: 0; color: var(--green);
  font: inherit; font-size: 15px; font-weight: 700; cursor: pointer; padding: 6px 6px 6px 10px;
}
.dpfe__save:hover { opacity: 0.82; }
.dpfe__save:disabled { opacity: 0.55; cursor: default; }
.dpfe__saveerror {
  padding: 10px 12px; border-radius: 12px;
  background: rgba(255,68,88,0.10); border: 1px solid rgba(255,68,88,0.24);
  color: var(--red); font-size: 12px; font-weight: 650; line-height: 1.35;
}
.dpfe__savenote {
  padding: 9px 12px; border-radius: 12px;
  background: rgba(56,211,159,0.10); border: 1px solid rgba(56,211,159,0.22);
  color: var(--green); font-size: 12px; font-weight: 700; line-height: 1.35;
}

/* photo grid */
.dpfe__photos { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 10px; }
.dpfe__photo {
  position: relative; aspect-ratio: 4 / 5; border-radius: 14px; overflow: hidden; padding: 0;
  border: 1px solid var(--border); cursor: pointer;
  background-size: cover; background-position: center;
  touch-action: pan-y; user-select: none;
  transition: transform .16s cubic-bezier(.2,.8,.2,1), opacity .14s, filter .14s;
}
.dpfe__photo[role="listitem"] { outline: none; }
.dpfe__photo[role="listitem"]:focus-visible { box-shadow: 0 0 0 2px #f4f5f8, 0 0 0 4px rgba(74,222,128,.58); }
.dpfe__photo:disabled { cursor: default; opacity: 0.72; }
.dpfe__photo.charging { filter: saturate(1.04) brightness(.92); }
.dpfe__photo.dragging { opacity: .18; transform: scale(.96); }
.dpfe__photo--add {
  display: grid; place-items: center; background: var(--raised);
  border: 1.5px dashed rgba(255,255,255,0.18); color: var(--text-2);
}
.dpfe__photo--add:hover { background: var(--raised-2); color: var(--text); }
.dpfe__photo--add .ic { width: 26px; height: 26px; }
.dpfe__delete {
  position: absolute; top: 6px; right: 6px; z-index: 5;
  width: 24px; height: 24px; padding: 0; border: 1px solid rgba(255,255,255,.18); border-radius: 7px;
  display: grid; place-items: center; color: #fff; background: rgba(8,9,10,.72);
  -webkit-backdrop-filter: blur(7px); backdrop-filter: blur(7px); cursor: pointer;
}
.dpfe__delete:hover { background: var(--red); }
.dpfe__delete:disabled { opacity: .35; cursor: default; }
.dpfe__delete .ic { width: 12px; height: 12px; }
.dpfe__hold-frame { position: absolute; inset: 0; z-index: 4; pointer-events: none; background: rgba(0,0,0,.14); }
.dpfe__hold-frame svg { position: absolute; inset: 0; width: 100%; height: 100%; overflow: visible; }
.dpfe__hold-frame rect {
  fill: none; stroke: var(--green); stroke-width: 4; stroke-linecap: round;
  stroke-dasharray: 100; stroke-dashoffset: 100; animation: dpfeholdframe .55s linear forwards;
  filter: drop-shadow(0 0 3px rgba(74,222,128,.7));
}
@keyframes dpfeholdframe { to { stroke-dashoffset: 0; } }
.dpfe__photo-clone {
  position: fixed; z-index: 1500; pointer-events: none; overflow: hidden;
  border: 1px solid rgba(255,255,255,.3); border-radius: 14px;
  background-size: cover; background-position: center;
  transform: translate(-50%, -50%) scale(1.06) rotate(2deg);
  box-shadow: 0 28px 64px rgba(0,0,0,.68); animation: dpfeclonein .14s cubic-bezier(.2,.8,.2,1);
}
@keyframes dpfeclonein { from { opacity: .45; transform: translate(-50%, -50%) scale(.9); } }
.dpfe__uploading {
  position: absolute; inset: 0; display: grid; place-items: center;
  background: rgba(0,0,0,0.52); color: #fff; font-size: 11px; font-weight: 800;
}
.dpfe__photoslabel { text-align: center; font-size: 12.5px; color: var(--text-2); margin: 4px 0 2px; }

/* labeled fields */
.dpfe__field {
  display: flex; align-items: center; gap: 12px; width: 100%;
  padding: 13px 15px; border-radius: 15px;
  background: var(--raised); border: 1px solid var(--border);
}
.dpfe__field--col { flex-direction: column; align-items: stretch; gap: 9px; }
.dpfe__flabel {
  flex: 0 0 auto; font-size: 11px; font-weight: 700; letter-spacing: 0.06em;
  text-transform: uppercase; color: var(--text-2);
}
.dpfe__finput {
  flex: 1 1 auto; min-width: 0; background: none; border: 0;
  color: var(--text); font: inherit; font-size: 14.5px; font-weight: 600; text-align: right;
}
.dpfe__field--col .dpfe__finput { text-align: left; font-weight: 500; }
.dpfe__finput:focus { outline: none; }
.dpfe__bio { resize: none; height: 54px; line-height: 1.5; }
.dpfe__field--btn { cursor: pointer; font-family: inherit; text-align: left; }
.dpfe__field--btn:hover { background: var(--raised-2); }
.dpfe__fval { flex: 1 1 auto; text-align: right; font-size: 14.5px; font-weight: 600; color: var(--text); }
.dpfe__fval--muted { color: var(--muted); }
.dpfe__field--btn .ic { width: 16px; height: 16px; color: var(--muted); flex: 0 0 auto; }

/* presence toggle */
.dpfe__toggle {
  display: flex; align-items: center; gap: 12px; width: 100%;
  padding: 13px 15px; border-radius: 15px;
  background: var(--raised); border: 1px solid var(--border);
}
.dpfe__teye { display: grid; color: var(--text-2); flex: 0 0 auto; }
.dpfe__teye .ic { width: 18px; height: 18px; }
.dpfe__ttext { flex: 1 1 auto; font-size: 14px; font-weight: 600; }

/* ---------- Manage photos page (PR-6 / PR-7) ---------- */
.mp-sub { text-align: center; font-size: 12px; color: var(--text-2); margin: 2px 0; }
.mp-sub b { color: var(--text); font-weight: 700; }
.mp-reordering { flex: 1 1 auto; text-align: center; font-size: 15px; font-weight: 800; color: var(--green); }
.mp-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; }
.mp-photo {
  position: relative; aspect-ratio: 4 / 5; border-radius: 16px; overflow: hidden;
  border: 1px solid var(--border); background-size: cover; background-position: center;
  cursor: grab; touch-action: none; user-select: none;
}
.mp-photo:active { cursor: grabbing; }
.mp-photo { transition: opacity .12s; }
.mp-photo.dragging { opacity: 0.18; box-shadow: inset 0 0 0 2px rgba(255,255,255,0.22); }
.mp-photo.dragging .dpfe__mainbadge, .mp-photo.dragging .mp-del { visibility: hidden; }
.mp-del {
  position: absolute; top: 8px; right: 8px; z-index: 4;
  width: 26px; height: 26px; border-radius: 999px; border: 0; cursor: pointer;
  background: rgba(0,0,0,0.55); color: #fff; display: grid; place-items: center;
  -webkit-backdrop-filter: blur(6px); backdrop-filter: blur(6px);
}
.mp-del:hover { background: var(--red); }
.mp-del .ic { width: 13px; height: 13px; }
.mp-add {
  display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 7px;
  background: var(--raised); border: 1.5px dashed rgba(255,255,255,0.18); color: var(--text-2);
  font: inherit; font-size: 12.5px; font-weight: 700; cursor: pointer;
}
.mp-add:hover { background: var(--raised-2); color: var(--text); }
.mp-add .ic { width: 24px; height: 24px; }
/* green progress frame that draws around the photo edge while charging */
.mp-frame { position: absolute; inset: 0; z-index: 3; pointer-events: none; border-radius: 16px; background: rgba(0,0,0,0.2); }
.mp-frame svg { position: absolute; inset: 0; width: 100%; height: 100%; overflow: visible; }
.mp-frame rect {
  stroke: var(--green); stroke-width: 4; stroke-linecap: round;
  stroke-dasharray: 100; stroke-dashoffset: 100;
  animation: mpframe .55s linear forwards;
  filter: drop-shadow(0 0 3px rgba(74,222,128,0.75));
}
@keyframes mpframe { to { stroke-dashoffset: 0; } }
.mp-photo.charging { filter: saturate(1.04) brightness(0.96); }

.mp-clone {
  position: fixed; z-index: 999; width: 150px; aspect-ratio: 4 / 5; border-radius: 16px; pointer-events: none;
  background-size: cover; background-position: center;
  transform: translate(-50%, -50%) scale(1.05) rotate(2.5deg);
  box-shadow: 0 26px 60px rgba(0,0,0,0.65); border: 1px solid rgba(255,255,255,0.28);
  animation: mpclonein .15s cubic-bezier(.2,.7,.3,1);
}
@keyframes mpclonein { from { transform: translate(-50%, -50%) scale(0.88) rotate(0deg); opacity: 0.4; } }

/* ---------- Add a photo: source sheet ---------- */
.addsheet-scrim {
  position: absolute; inset: 0; z-index: 20; display: flex; align-items: flex-end;
  background: rgba(0,0,0,0.5); -webkit-backdrop-filter: blur(2px); backdrop-filter: blur(2px); border-radius: 22px;
}
.addsheet {
  width: 100%; padding: 8px 12px 14px; display: flex; flex-direction: column; gap: 9px;
  background: linear-gradient(180deg, rgba(30,30,32,0.98), rgba(16,16,18,0.98));
  border-top: 1px solid rgba(255,255,255,0.12); border-radius: 18px 18px 21px 21px;
  box-shadow: 0 -18px 46px rgba(0,0,0,0.5); animation: sheetin .2s cubic-bezier(.2,.7,.3,1);
}
@keyframes sheetin { from { transform: translateY(40px); opacity: 0; } }
.addsheet__grip { width: 38px; height: 4px; border-radius: 999px; background: rgba(255,255,255,0.25); align-self: center; margin: 2px 0 6px; }
.addsheet__title { margin: 0 4px 4px; font-size: 17px; font-weight: 800; }
.addsheet__opt {
  display: flex; align-items: center; gap: 13px; padding: 12px 13px; border-radius: 14px;
  border: 1px solid var(--border); background: var(--raised); color: var(--text);
  font: inherit; font-size: 15px; font-weight: 700; cursor: pointer; text-align: left; transition: background .15s;
}
.addsheet__opt:hover { background: var(--raised-2); }
.addsheet__ic {
  width: 38px; height: 38px; border-radius: 11px; flex: 0 0 auto; display: grid; place-items: center;
  background: var(--raised-2); border: 1px solid var(--border); color: var(--text);
}
.addsheet__ic svg { width: 20px; height: 20px; }
.addsheet__ic--green { background: rgba(74,222,128,0.16); border-color: rgba(74,222,128,0.32); color: var(--green); }
.addsheet__cancel {
  margin-top: 3px; height: 46px; border-radius: 14px; border: 1px solid var(--border);
  background: rgba(255,255,255,0.04); color: var(--text); font: inherit; font-size: 15px; font-weight: 700; cursor: pointer;
}
.addsheet__cancel:hover { background: rgba(255,255,255,0.08); }

/* ---------- Add a photo: crop (locked 4:5) ---------- */
.crop__hint { text-align: center; font-size: 11.5px; color: var(--text-2); margin: 2px 0 8px; }
.crop { display: flex; flex-direction: column; gap: 12px; }
.crop__frame {
  position: relative; width: 100%; aspect-ratio: 4 / 5; border-radius: 16px; overflow: hidden;
  background: #000; border: 1px solid var(--border); cursor: grab; touch-action: none;
}
.crop__frame:active { cursor: grabbing; }
.crop__img { position: absolute; inset: 0; background-repeat: no-repeat; }
.crop__grid {
  position: absolute; inset: 0; pointer-events: none;
  background-image: linear-gradient(rgba(255,255,255,0.28) 1px, transparent 1px), linear-gradient(90deg, rgba(255,255,255,0.28) 1px, transparent 1px);
  background-size: 33.333% 33.333%;
}
.crop__zoomrow { display: flex; align-items: center; gap: 10px; padding: 0 4px; }
.crop__zoomrow .ic { width: 16px; height: 16px; color: var(--text-2); flex: 0 0 auto; }
.crop__zoomrow input[type="range"] { flex: 1 1 auto; accent-color: var(--green); }
.crop__actions { display: flex; gap: 10px; margin-top: 4px; }
.crop__btn {
  flex: 1 1 0; height: 46px; border-radius: 13px; border: 1px solid var(--border);
  background: var(--raised); color: var(--text); font: inherit; font-size: 14.5px; font-weight: 700; cursor: pointer; transition: background .15s;
}
.crop__btn:hover { background: var(--raised-2); }
.crop__btn:disabled { opacity: 0.5; cursor: default; }
.crop__saving {
  position: absolute; left: 50%; top: 50%; transform: translate(-50%, -50%); z-index: 3;
  display: inline-flex; align-items: center; gap: 9px; padding: 11px 18px; border-radius: 999px;
  background: rgba(0,0,0,0.6); -webkit-backdrop-filter: blur(8px); backdrop-filter: blur(8px);
  color: #fff; font-size: 13.5px; font-weight: 700; box-shadow: 0 10px 30px rgba(0,0,0,0.5);
}
.crop__spin { width: 16px; height: 16px; border-radius: 999px; border: 2.5px solid rgba(255,255,255,0.25); border-top-color: var(--green); animation: cropspin .7s linear infinite; }
@keyframes cropspin { to { transform: rotate(360deg); } }
.mp-tip {
  display: flex; align-items: center; gap: 10px; margin-top: 4px;
  padding: 12px 14px; border-radius: 14px; font-size: 12.5px; color: var(--text);
  background: rgba(74,222,128,0.08); border: 1px solid rgba(74,222,128,0.22);
}
.mp-tip svg { width: 18px; height: 18px; color: var(--green); flex: 0 0 auto; }
.mp-tip b { font-weight: 800; }