/* PepFan top bar (same on every PepFan page). Signed in: four sections, an icon above each word, each in its own colour;
   the open one gets a white word and a short fire line under it. Sizes follow the touch-target guidance (44pt / 48dp):
   every item is at least 64×56 (56×56 on phones), icon 24px, word 13px (12px on phones). */
header.top nav { display: flex; flex-wrap: wrap; align-items: center; gap: 6px; }
header.top nav.pnavbar { flex-wrap: nowrap; gap: 8px; }
header.top nav .pnav { margin: 0; font: inherit; font-size: 14px; line-height: 1.4; color: var(--muted, #a8979f); text-decoration: none; background: none; border: 1px solid transparent; border-radius: 10px; padding: 6px 12px; cursor: pointer; }
header.top nav a.pnav[class*="p-"] { position: relative; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 5px; min-width: 64px; min-height: 56px; padding: 7px 10px 11px; border-radius: 14px; font-size: 13px; font-weight: 600; line-height: 1.2; color: #c9bac1; white-space: nowrap; transition: background-color .15s, color .15s; }
header.top nav a.pnav .pic { position: relative; display: block; width: 24px; height: 24px; }
header.top nav a.pnav svg { display: block; width: 24px; height: 24px; fill: none; stroke: currentColor; stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; }
header.top nav a.p-home svg { stroke: #ff7a1a; }
header.top nav a.p-friends svg { stroke: #ff3d6e; }
header.top nav a.p-inbox svg { stroke: #ffc857; }
header.top nav a.p-profile svg { stroke: #c9a8ff; }
@media (hover: hover) {
  header.top nav a.p-home:hover { background: rgba(255, 122, 26, .1); }
  header.top nav a.p-friends:hover { background: rgba(255, 61, 110, .1); }
  header.top nav a.p-inbox:hover { background: rgba(255, 200, 87, .09); }
  header.top nav a.p-profile:hover { background: rgba(201, 168, 255, .1); }
  header.top nav a.pnav[class*="p-"]:hover { color: #fff; }
}
header.top nav a.pnav.on { color: #fff; font-weight: 700; }
header.top nav a.pnav.on::after { content: ""; position: absolute; bottom: 3px; left: 50%; width: 24px; height: 3px; margin-left: -12px; border-radius: 2px; background: linear-gradient(90deg, #ff3d6e, #ff7a1a); }
header.top nav a.pnav:focus-visible { outline: 2px solid #ffad42; outline-offset: 2px; }
header.top nav .pnav .pbadge2 { position: absolute; top: -7px; inset-inline-end: -11px; min-width: 18px; height: 18px; padding: 0 5px; border-radius: 9px; background: #ff3d6e; color: #fff; font-size: 11px; font-weight: 800; line-height: 18px; text-align: center; box-shadow: 0 0 0 2px var(--bg, #07050a); }
header.top nav .pnav.in { color: #fff; background: linear-gradient(90deg, #ff3d6e, #ff7a1a); font-weight: 700; }
/* PepFan's own language switch (2026-10-12): a small globe at the far right of the top bar on every PepFan page (the logo
   stays far left in both languages). It sits outside the nav, so on phones it stays up top while the sections go down. */
header.top .pepbrand { margin-right: auto; }
header.top > .plang { display: inline-flex; align-items: center; gap: 6px; flex: 0 0 auto; height: 38px; min-width: 44px; margin: 0; padding: 0 12px; border-radius: 19px; border: 1px solid rgba(255, 122, 26, .4); background: transparent; color: #ffad42; font: inherit; font-size: 13.5px; font-weight: 700; line-height: 1; cursor: pointer; -webkit-tap-highlight-color: transparent; }
header.top > .plang .pic { display: block; width: 18px; height: 18px; }
header.top > .plang svg { display: block; width: 18px; height: 18px; fill: none; stroke: currentColor; stroke-width: 1.7; stroke-linecap: round; stroke-linejoin: round; }
header.top > .plang:focus-visible { outline: 2px solid #ffad42; outline-offset: 2px; }
@media (hover: hover) { header.top > .plang:hover { background: rgba(255, 122, 26, .1); color: #fff; } }
@media (max-width: 599px) {
  /* phones: the four sections become a fixed tab bar at the bottom, like an app; the top keeps only the logo */
  header.top nav.pnavbar { position: fixed; z-index: 50; left: 0; right: 0; bottom: var(--pnav-gap, 0px); justify-content: space-around; gap: 0; padding: 6px 6px calc(6px + env(safe-area-inset-bottom, 0px)); background: rgba(10, 7, 12, .97); border-top: 1px solid #2a1a24; }
  header.top nav a.pnav[class*="p-"] { flex: 1 1 0; min-width: 0; min-height: 54px; padding: 6px 2px 10px; font-size: 11.5px; }
  header.top nav a.pnav.on::after { bottom: 2px; }
  /* room at the end of the page so the bar never covers the last content */
  body:has(nav.pnavbar) { padding-bottom: calc(74px + env(safe-area-inset-bottom, 0px)); min-height: 100dvh; box-sizing: border-box; }
  /* the bar is one solid strip down to the very bottom (nothing of the page shows under it) */
  header.top nav.pnavbar::after { content: ""; position: absolute; left: 0; right: 0; top: 100%; height: 200px; background: rgba(10, 7, 12, .97); }
  /* a tap gives no grey flash and no lasting box: only the active tab is marked */
  header.top nav a.pnav { -webkit-tap-highlight-color: transparent; }
}
/* PepFan brand (approved 2026-10-08; 2026-10-09: the big flame P mark is the first letter, then «epFan» at the normal size) */
.pepbrand { gap: 1px; }
.pepbrand img { border-radius: 10px; }
/* the mark has empty room on its right: pull «epFan» in so it reads as one word */
.pepbrand .pepwm { margin-left: -5px; }
.pepwm { font-family: "Segoe UI Black", "Arial Black", system-ui, sans-serif; font-weight: 900; font-style: italic; font-size: 24px; letter-spacing: -.5px; background: linear-gradient(90deg, #ff3d6e, #ff7a1a, #ffd23f); -webkit-background-clip: text; background-clip: text; color: transparent; }
/* PepFan fire palette (owner approved 2026-10-08). The shared Madar sheets (ss58, names, ops, pro) stay blue for the Madar
   site; this file is loaded last on the PepFan pages only, so the warm colours are set here with the same selectors. */
:root { --bg: #07050a; --panel: #0f0a12; --panel2: #150e14; --line: #2a1a24; --line2: #3a2430; --text: #f3ecef; --muted: #a8979f; --blue: #ff7a1a; --sky: #ffad42; }
body { min-height: 100vh; background: radial-gradient(1000px 520px at 70% -10%, rgba(255, 90, 40, .16), transparent 60%), radial-gradient(800px 420px at 10% 110%, rgba(255, 61, 110, .10), transparent 60%), var(--bg); }
a { color: var(--sky); }
h1 { background: linear-gradient(120deg, #ffd08a, #ffad42 50%, #ff7a1a); -webkit-background-clip: text; background-clip: text; color: transparent; }
button { background: linear-gradient(90deg, #ff3d6e, #ff7a1a); color: #fff; }
button.ghost { background: transparent; border-color: rgba(255, 122, 26, .4); color: #ffad42; }
button.alt { background: transparent; border-color: rgba(255, 122, 26, .5); color: #ffad42; }
input, select { background: #0a070c; }
input:focus, select:focus { border-color: rgba(255, 122, 26, .6); }
.card { background: linear-gradient(180deg, rgba(21, 14, 20, .94), rgba(15, 10, 18, .94)); }
.pill { background: rgba(255, 122, 26, .1); }
.primary { background: linear-gradient(90deg, #ff3d6e, #ff7a1a); }
.kv, pre, .box, .verdict, .rare, .namecard, .how div, .addr.before { background: #0a070c; }
.price.best { border-color: rgba(255, 122, 26, .55); }
button.price:hover, .rare:hover, .plinks a:hover { border-color: rgba(255, 122, 26, .5); }
.seg button[aria-checked="true"] { background: linear-gradient(90deg, #ff3d6e, #ff7a1a); border-color: #ff7a1a; }
.how b { background: linear-gradient(135deg, #ff3d6e, #ff7a1a); }
.nameinput { background: #0a070c; }
.profile .avatar { background: linear-gradient(135deg, #ff3d6e, #ff7a1a); }
.profile .avatar img { background: #120c10; }
.studiobtn { background: linear-gradient(90deg, #ff3d6e, #ff7a1a); }
.studiobtn:hover { background: linear-gradient(90deg, #ff5683, #ff8d3a); }
.acctgate { border-color: rgba(255, 122, 26, .4); background: rgba(255, 122, 26, .08); }
.addr.after { background: linear-gradient(135deg, rgba(255, 90, 40, .2), rgba(255, 200, 87, .1)); border-color: rgba(255, 122, 26, .45); }
.cta { border-color: rgba(255, 122, 26, .35); background: linear-gradient(135deg, rgba(255, 90, 40, .16), rgba(255, 200, 87, .08)); }
footer { color: #7d6b74; }
/* the red delete / danger buttons keep their colour */
button.danger { background: #b4413a; }
/* the PepFan logo sits at the far left in Arabic too (owner, 2026-10-08) */
html[dir="rtl"] header.top { flex-direction: row-reverse; }
/* Installed app (Add to Home Screen, viewport-fit=cover): the bar starts below the iPhone notch / status bar and keeps
   clear of the rounded sides in landscape. env() is 0 in a normal browser tab, so nothing moves there. */
header.top { padding-top: calc(18px + env(safe-area-inset-top, 0px)); padding-left: calc(20px + env(safe-area-inset-left, 0px)); padding-right: calc(20px + env(safe-area-inset-right, 0px)); }
main, footer { padding-left: calc(20px + env(safe-area-inset-left, 0px)); padding-right: calc(20px + env(safe-area-inset-right, 0px)); }
footer { padding-bottom: calc(40px + env(safe-area-inset-bottom, 0px)); }
/* no word left alone on a line in the footer */
footer .flinks { text-wrap: balance; }
/* ===== installed app on phones (iPhone test, 2026-10-09) ===== */
/* no sideways scrolling on any PepFan page (a safety net; clip, not hidden, so sticky parts keep working) */
html, body { overflow-x: clip; }
/* the status bar of the installed app is see-through (black-translucent): a strip of the page colour sits under it so
   nothing scrolls behind the clock. Its height is 0 in a normal browser tab. */
body::before { content: ""; position: fixed; z-index: 70; top: 0; left: 0; right: 0; height: env(safe-area-inset-top, 0px); background: var(--bg, #07050a); pointer-events: none; }
@media (max-width: 820px) {
  /* iPhone zooms the page into any text field under 16px (then the page slides sideways): every field is 16px or more */
  input:not([type="checkbox"]):not([type="radio"]):not([type="range"]):not([type="color"]):not(.amt):not(.nameinput input), textarea, select { font-size: 16px !important; }
}
@media (max-width: 599px) {
  /* while the keyboard is open (a text field has focus, set by nav.js) the bottom bar steps aside instead of riding above
     the keyboard; the room kept for it at the end of the page stays, so nothing jumps */
  body.kbd-open header.top nav.pnavbar { display: none; }
}

/* every PepFan page (2026-10-10): the page never slides sideways on a phone (anything wider is clipped, not scrolled) */
html, body { overflow-x: clip; max-width: 100%; }
img, video, iframe { max-width: 100%; }

/* «احجز اسمك» (owner 2026-10-10): the card a locked creator feature opens, and the strip on the profile */
.pfup-back { position: fixed; inset: 0; z-index: 200; display: grid; place-items: center; padding: 16px; background: rgba(4, 2, 6, .72); }
.pfup { width: min(420px, 100%); box-sizing: border-box; display: grid; gap: 10px; padding: 22px 20px 18px; border-radius: 18px; border: 1px solid rgba(255, 200, 87, .45); background: radial-gradient(420px 200px at 50% -20%, rgba(255, 200, 87, .14), transparent 70%), #110b13; color: #f4ecef; text-align: center; box-shadow: 0 20px 60px rgba(0, 0, 0, .6); }
.pfup-badge { justify-self: center; width: 52px; height: 52px; display: grid; place-items: center; border-radius: 50%; font-size: 24px; background: rgba(255, 200, 87, .12); border: 1px solid rgba(255, 200, 87, .45); }
.pfup h2 { margin: 2px 0 0; font-size: 20px; background: linear-gradient(90deg, #ff5c8a, #ff9b3d, #ffd56b); -webkit-background-clip: text; background-clip: text; color: transparent; }
.pfup p { margin: 0; color: #cbbcc3; font-size: 14px; line-height: 1.7; }
.pfup ul { margin: 0; padding: 0; list-style: none; display: grid; gap: 6px; text-align: start; justify-self: center; }
.pfup li { position: relative; padding-inline-start: 22px; font-size: 14px; }
.pfup li::before { content: "✓"; position: absolute; inset-inline-start: 0; color: #ffc857; font-weight: 800; }
.pfup .pfup-price { color: #ffd56b; font-weight: 700; }
.pfup-acts { display: grid; gap: 8px; margin-top: 4px; }
.pfup-go { display: block; padding: 11px 16px; border-radius: 12px; background: linear-gradient(90deg, #ff3d6e, #ff7a1a); color: #fff; font-weight: 800; text-decoration: none; }
.pfup-later { margin: 0; padding: 8px; border: 0; background: none; color: #a8979f; font: inherit; cursor: pointer; }
.pfup-strip { display: flex; align-items: center; gap: 8px; padding: 10px 14px; border-radius: 12px; border: 1px solid rgba(255, 200, 87, .45); background: linear-gradient(90deg, rgba(255, 200, 87, .12), rgba(255, 122, 26, .06)); color: #ffe7a8; text-decoration: none; font-size: 14px; line-height: 1.5; }
.pfup-stxt { flex: 1 1 auto; font-weight: 600; }
.pfup-sgo { padding: 4px 12px; border-radius: 8px; background: linear-gradient(135deg, #ffc857, #ff9b3d); color: #1a1205; font-size: 13px; white-space: nowrap; }
@media (hover: hover) { .pfup-strip:hover { border-color: rgba(255, 200, 87, .8); } }
.pfup-soon { display: inline-block; padding: 0 7px; border-radius: 999px; font-size: 11.5px; line-height: 1.6; color: #1a1205; background: linear-gradient(135deg, #ffc857, #ff9b3d); font-weight: 700; vertical-align: 1px; }