/* ============================================================
   VULU — Profile mock (canvas artboards: 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-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);
  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-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-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); }

/* 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-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__btns { display: flex; gap: 8px; justify-content: flex-end; }
.dpf-cbtn {
  height: 32px; 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--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; }

/* ============================================================
   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-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-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); }

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

/* main "your profile" card: the red area IS the first profile photo (tall),
   with the name/status/handle overlaid on it — the sections sit below. */
.dpf--profilecard { top: auto; bottom: 14px; height: 63%; min-height: 550px; max-height: calc(100% - 28px); gap: 10px; }
.dpf--profilecard > *:not(.dpfm-hero) { flex: 0 0 auto; }
.dpf--profilecard .dpfm-hero { cursor: pointer; min-height: 230px; }

/* 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; }

/* 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; }

/* photo grid */
.dpfe__photos { display: grid; grid-template-columns: repeat(3, 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;
}
.dpfe__photo--main { background-image: linear-gradient(150deg, #b85a78, #6a2c52 70%); }
.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__mainbadge {
  position: absolute; top: 8px; left: 8px;
  background: rgba(0,0,0,0.5); -webkit-backdrop-filter: blur(6px); backdrop-filter: blur(6px);
  color: #fff; font-size: 10.5px; font-weight: 800; padding: 3px 9px; border-radius: 7px;
}
.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; }