/* Personal card / creator page (madar-network.com/<name>) — builds on ss58.css and names.css. No animations. */
.cardpage { max-width: 560px; margin: 0 auto; padding: 18px 16px 32px; display: grid; gap: 12px; }
.ncard { position: relative; display: grid; gap: 18px; min-width: 0; }
.ncard h2 { margin: 0; font-size: 18px; }
.ncard .blk { display: grid; gap: 10px; border-top: 1px solid var(--line); padding-top: 16px; min-width: 0; }
.ic { flex: 0 0 auto; display: block; }

/* share button in the card's top corner */
.sharewrap { position: absolute; top: 12px; inset-inline-end: 12px; display: flex; align-items: center; gap: 6px; z-index: 1; }
.sharebtn { display: grid; place-items: center; width: 38px; height: 38px; padding: 0; border-radius: 50%; background: #0a070c; border: 1px solid var(--line2); color: var(--text); cursor: pointer; }
.sharebtn:hover { border-color: rgba(255, 122, 26, .6); }
.sharenote { font-size: 12px; color: var(--good); }
.sharenote:empty { display: none; }

/* 1) header: picture, name, category, about, links */
.chead { display: grid; justify-items: center; text-align: center; gap: 6px; padding-top: 6px; min-width: 0; }
.chead .avatar { position: relative; width: 120px; height: 120px; border-radius: 50%; overflow: hidden; display: grid; place-items: center; background: linear-gradient(135deg, #ff3d6e, #ff7a1a); color: #fff; font-weight: 800; font-size: 40px; border: 2px solid rgba(255, 122, 26, .35); margin-bottom: 6px; }
.chead .avatar img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; background: #120c10; }
.chead .dname { margin: 0; font-size: 24px; line-height: 1.25; overflow-wrap: anywhere; max-width: 100%; }
.chead .nm { display: inline-flex; align-items: center; gap: 6px; font-size: 17px; font-weight: 700; color: var(--text); max-width: 100%; overflow-wrap: anywhere; }
.chead .vok { display: inline-grid; place-items: center; width: 18px; height: 18px; border-radius: 50%; background: var(--good); color: #04130c; font-size: 12px; font-weight: 900; cursor: help; }
.catchip { font-size: 12px; color: #cbbcc3; border: 1px solid var(--line2); border-radius: 999px; padding: 2px 10px; }
.chead .bio { margin: 4px 0 0; font-size: 15px; line-height: 1.6; color: #cbbcc3; overflow-wrap: anywhere; max-width: 100%; }
.chips2 { display: flex; flex-wrap: wrap; justify-content: center; gap: 6px; margin-top: 6px; max-width: 100%; }
.lchip { display: inline-flex; align-items: center; gap: 6px; max-width: 100%; font-size: 13px; color: var(--text); text-decoration: none; border: 1px solid var(--line2); background: #0a070c; border-radius: 999px; padding: 5px 11px; }
.lchip span { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; direction: ltr; }
.lchip:hover { border-color: rgba(255, 122, 26, .6); }

/* featured link */
.featbtn { display: flex; align-items: center; justify-content: center; gap: 8px; font-weight: 700; font-size: 16px; text-decoration: none; color: var(--text); border: 1px solid rgba(255, 122, 26, .5); background: rgba(255, 122, 26, .12); border-radius: 12px; padding: 12px 16px; min-width: 0; }
.featbtn span { overflow-wrap: anywhere; }
.featbtn:hover { background: rgba(255, 122, 26, .2); }

/* 2) goal */
.goal .gline { display: flex; justify-content: space-between; align-items: baseline; gap: 8px; flex-wrap: wrap; }
.goal .gtitle { font-size: 15px; overflow-wrap: anywhere; min-width: 0; }
.goal .gamt { font-weight: 700; font-size: 15px; white-space: nowrap; }
.goal .bar { height: 10px; border-radius: 999px; background: #21141b; border: 1px solid var(--line); overflow: hidden; }
.goal .bar i { display: block; height: 100%; background: linear-gradient(90deg, #ff3d6e, #ff7a1a); border-radius: 999px; }

/* 3) support */
.donate .presets { display: grid; grid-template-columns: repeat(4, 1fr); gap: 8px; }
.donate .preset { font-size: 20px; font-weight: 800; padding: 12px 6px; border-radius: 12px; background: #0a070c; border: 1px solid var(--line2); color: var(--text); cursor: pointer; min-width: 0; }
.donate .preset:hover { border-color: rgba(255, 122, 26, .6); }
.donate .preset.on { border-color: #ff7a1a; background: rgba(255, 122, 26, .18); }
.donate input.amt { width: 100%; min-width: 0; font-size: 18px; padding: 12px; border-radius: 12px; text-align: center; box-sizing: border-box; }
.donate .give { font-size: 18px; font-weight: 700; padding: 15px 18px; border-radius: 12px; background: linear-gradient(90deg, #ff3d6e, #ff7a1a); color: #fff; border: 0; cursor: pointer; width: 100%; overflow-wrap: anywhere; }
.donate .give:hover { background: linear-gradient(90deg, #ff5683, #ff8d3a); }
.donate .give:disabled { background: #241820; color: #a8979f; cursor: not-allowed; }
.donate .dopts { display: flex; flex-wrap: wrap; justify-content: center; align-items: center; gap: 6px; }
.linkbtn { background: none; border: 0; padding: 2px 0; color: var(--sky); font: inherit; cursor: pointer; text-decoration: underline; text-underline-offset: 3px; }
.donate select.tok { width: 100%; }
.donate .dmsg { text-align: center; }
.donate .dmsg:empty { display: none; }
.donate .dmsg.thanks { font-size: 16px; font-weight: 600; }
.donate .dmsg a { color: var(--sky); }
/* wallet choice, what reaches the creator, Madar Wallet perk */
.donate .wpick { display: flex; flex-wrap: wrap; justify-content: center; align-items: center; gap: 6px; }
.donate .wbtn { display: inline-flex; align-items: center; gap: 6px; font: inherit; font-size: 14px; color: var(--text); background: #0a070c; border: 1px solid var(--line2); border-radius: 999px; padding: 6px 12px; cursor: pointer; max-width: 100%; }
.donate .wbtn img { width: 18px; height: 18px; border-radius: 4px; }
.donate .wbtn span { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.donate .wbtn:hover { border-color: rgba(255, 122, 26, .6); }
.donate .wbtn.on { border-color: #ff7a1a; background: rgba(255, 122, 26, .18); }
.donate .split { text-align: center; font-size: 14px; color: #cbbcc3; }
.donate .perk { text-align: center; font-size: 13px; color: #ffd98a; }
.donate .perk a, .donate .perk .perkpick { color: var(--sky); margin-inline-start: 6px; }
.donate .perk .perkpick { background: none; border: 0; padding: 0; font: inherit; text-decoration: underline; cursor: pointer; }
.donate .perk.on { display: inline-block; justify-self: center; border: 1px solid rgba(255, 217, 138, .45); border-radius: 999px; padding: 2px 10px; }
.donate .split:empty, .donate .perk:empty { display: none; }

/* 4) recent supporters */
.suplist { list-style: none; margin: 0; padding: 0; display: grid; gap: 6px; }
.suplist li { display: grid; grid-template-columns: minmax(0, 1fr) auto auto; grid-template-areas: "who amt tx" "meta meta meta"; align-items: center; gap: 2px 10px; padding: 10px 12px; border: 1px solid var(--line); border-radius: 12px; background: #0a070c; }
.suplist .who { grid-area: who; min-width: 0; }
.suplist .samt { grid-area: amt; font-size: 16px; }
.suplist .txl { grid-area: tx; color: var(--sky); text-decoration: none; padding: 2px 6px; }
.suplist li > .muted { grid-area: meta; }
.suplist .saddr { color: var(--muted); font-size: 13px; background: none; }
/* a supporter who owns a Madar name (reusable: the stream alert uses the same badge) */
.madar-badge { display: inline-flex; align-items: center; gap: 5px; max-width: 100%; color: #ffd98a; font-weight: 700; font-size: 14px; text-decoration: none; border: 1px solid rgba(255, 200, 87, .6); background: rgba(255, 200, 87, .08); border-radius: 999px; padding: 2px 10px; direction: ltr; }
.madar-badge bdi { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.madar-badge .star { font-size: 12px; }
.madar-badge:hover { border-color: rgba(255, 200, 87, .9); }

/* 5) wallet address and QR codes (closed by default) */
.walletbox { display: block; }
.walletbox summary { cursor: pointer; color: var(--sky); font-weight: 600; font-size: 15px; }
.walletbox .wbody { display: grid; gap: 12px; margin-top: 12px; min-width: 0; }
.walletbox .pay { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 14px; align-items: start; }
.walletbox .winfo { display: grid; gap: 8px; min-width: 0; }
.walletbox code { overflow-wrap: anywhere; word-break: break-all; }
.qrcol { display: grid; gap: 8px; justify-items: center; }
.qrbox img { display: block; width: 170px; height: 170px; background: #fff; border-radius: 12px; padding: 6px; }
.qrtabs { gap: 6px; flex-wrap: wrap; justify-content: center; }
.qrtabs button { font-size: 13px; padding: 6px 10px; }
.qrtabs button.on { border-color: rgba(255, 122, 26, .7); color: var(--text); }
.walletbox .forms { margin-top: 0; }

/* 6) footer line */
.cfoot { margin: 0; text-align: center; font-size: 14px; }
.cfoot a { color: var(--muted); }
.cfoot a:hover { color: var(--sky); }
.btnlink { display: inline-block; background: linear-gradient(90deg, #ff3d6e, #ff7a1a); color: #fff !important; text-decoration: none; border-radius: 10px; padding: 10px 18px; font-weight: 600; justify-self: start; }
.btnlink:hover { background: linear-gradient(90deg, #ff5683, #ff8d3a); }
@media (max-width: 600px) {
  .cardpage { padding: 12px 12px 28px; }
  .ncard { padding: 16px; }
  .walletbox .pay { grid-template-columns: 1fr; }
  .qrcol { justify-items: center; }
  .chead .avatar { width: 108px; height: 108px; }
}


/* ======================================================================================================
   Creator page (profile set): cover band + header, then a feed of posts beside a sticky support column.
   One accent (blue), gold only for Madar-name badges, few borders, generous spacing. Phones: one column
   (support box, then the feed, then the supporters). The only animation: the slow sheen on legendary names.
   ====================================================================================================== */
.cardpage.pro { max-width: 1080px; padding: 0 24px 40px; }
.ncard.pro { display: block; padding: 0; background: none; border: 0; }
.pro .hero { display: grid; padding: 0; }
.pro .cover { position: relative; height: 210px; border-radius: 0 0 22px 22px; overflow: hidden; background: radial-gradient(520px 180px at 60% 40%, rgba(255, 90, 40, .35), transparent 70%), radial-gradient(420px 160px at 15% 90%, rgba(255, 61, 110, .18), transparent 70%), #1a0f16; }
.pro .cover img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.pro .cover .sharewrap { top: 14px; inset-inline-end: auto; inset-inline-start: 14px; }
.sharebtn.oncover { width: auto; height: auto; border-radius: 10px; padding: 7px 12px; gap: 6px; display: inline-flex; align-items: center; font: inherit; font-size: 13.5px; background: rgba(7, 5, 10, .45); border-color: rgba(255, 255, 255, .2); color: #efe4e8; }
.pro .head { display: grid; grid-template-columns: auto minmax(0, 1fr) auto; grid-template-areas: "ava idn links" "bio bio bio"; align-items: end; column-gap: 20px; padding: 0 24px; margin-top: -64px; position: relative; }
.pro .head .avatar { grid-area: ava; position: relative; width: 128px; height: 128px; border-radius: 50%; overflow: hidden; display: grid; place-items: center; background: linear-gradient(135deg, #ff3d6e, #ff7a1a); color: #fff; font-weight: 800; font-size: 44px; border: 5px solid var(--bg, #07050a); }
.pro .head .avatar img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; background: #120c10; }
.pro .idn { grid-area: idn; min-width: 0; padding-bottom: 10px; }
.pro .idn .dname { margin: 0; font-size: 28px; line-height: 1.25; overflow-wrap: anywhere; }
.pro .idn .sub { display: flex; flex-wrap: wrap; align-items: center; gap: 4px 10px; margin-top: 4px; color: var(--muted); font-size: 14px; }
.pro .idn .dotsep { opacity: .6; }
.nm { display: inline-flex; align-items: center; gap: 6px; font-weight: 700; color: var(--text); direction: ltr; }
.nm .vok, .chead .vok { display: inline-grid; place-items: center; width: 17px; height: 17px; border-radius: 50%; background: var(--good); color: #04130c; font-size: 11px; font-weight: 900; cursor: help; }
.nmwrap { display: inline-flex; align-items: center; gap: 6px; }
.tierchip { font-size: 11px; font-weight: 800; letter-spacing: .02em; border-radius: 999px; padding: 1px 8px; color: #ffd98a; border: 1px solid rgba(255, 200, 87, .6); }
.tierchip.legendary { color: #fff3cf; border-color: rgba(255, 226, 154, .9); }
.licons { grid-area: links; display: flex; flex-wrap: wrap; gap: 8px; padding-bottom: 14px; }
.licon { display: grid; place-items: center; width: 38px; height: 38px; border-radius: 50%; border: 1px solid var(--line2); color: #d6c8ce; text-decoration: none; }
.licon:hover { border-color: rgba(255, 122, 26, .7); color: #fff; }
.pro .head .bio { grid-area: bio; margin: 14px 0 0; max-width: 680px; color: #cbbcc3; font-size: 15.5px; line-height: 1.75; overflow-wrap: anywhere; }
.cgrid { display: grid; grid-template-columns: minmax(0, 1fr) 340px; gap: 28px; margin-top: 26px; align-items: start; }
.cgrid.nofeed { grid-template-columns: minmax(0, 560px); justify-content: center; }
.feed { display: grid; gap: 16px; min-width: 0; }
.cgrid.nofeed .feed { display: none; }
.side { position: sticky; top: calc(16px + env(safe-area-inset-top, 0px)); display: grid; gap: 16px; min-width: 0; }
.pro .box { background: #0f0a12; border: 1px solid #2a1a24; border-radius: 18px; padding: 20px; display: grid; gap: 14px; min-width: 0; }
.pro .box h2 { margin: 0; font-size: 18px; overflow-wrap: anywhere; }

/* feed posts */
.post { background: #0f0a12; border: 1px solid #2a1a24; border-radius: 16px; padding: 18px 20px; display: grid; gap: 10px; min-width: 0; }
.post .meta { display: flex; justify-content: space-between; gap: 8px; color: var(--muted); font-size: 12.5px; }
.post .kind { color: #ffad42; font-weight: 600; }
.post p { margin: 0; color: #f0e8eb; font-size: 15px; line-height: 1.7; overflow-wrap: anywhere; }
.post.msg.pin { border-color: rgba(255, 200, 87, .45); }
.post.msg .who { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; font-size: 13.5px; }
.post .vlink { display: flex; gap: 14px; align-items: center; color: var(--text); text-decoration: none; min-width: 0; }
.post .vlink b { font-size: 15px; overflow-wrap: anywhere; }
.post .vlink:hover b { color: var(--sky); }
.post .thumb { width: 150px; height: 84px; flex: 0 0 auto; border-radius: 10px; background: linear-gradient(135deg, #3a1a22, #3a2012); display: grid; place-items: center; color: #fff; }
.post .pq { font-size: 16px; overflow-wrap: anywhere; }
.post.poll .opt { display: grid; gap: 6px; width: 100%; text-align: start; font: inherit; color: var(--text); background: none; border: 0; padding: 4px 0; cursor: pointer; }
.post.poll .orow { display: flex; justify-content: space-between; gap: 8px; font-size: 14.5px; }
.post.poll .orow span { min-width: 0; overflow-wrap: anywhere; }
.post.poll .opt.on .orow span { color: var(--sky); font-weight: 700; }
.pbar { display: block; height: 6px; background: #21141b; border-radius: 999px; overflow: hidden; }
.pbar i { display: block; height: 100%; background: linear-gradient(90deg, #ff3d6e, #ff7a1a); border-radius: 999px; }
.post.poll .opt:not(.lead) .pbar i { background: #6b4a55; }
.post .phint { color: var(--muted); font-size: 12.5px; }

/* support box */
.pro .donate .goal { display: grid; gap: 8px; }
.pro .donate .gtop { display: flex; justify-content: space-between; gap: 8px; font-size: 13.5px; color: #cbbcc3; }
.pro .donate .gtop span { min-width: 0; overflow-wrap: anywhere; }
.pro .donate .goal .bar { height: 8px; border-radius: 999px; background: #21141b; overflow: hidden; border: 0; }
.pro .donate .goal .bar i { display: block; height: 100%; background: linear-gradient(90deg, #ff3d6e, #ff7a1a); border-radius: 999px; }
.pro .donate .gnext { font-size: 12.5px; color: var(--muted); line-height: 1.6; overflow-wrap: anywhere; }
.pro .donate .preset { font-size: 18px; padding: 11px 6px; border-color: #3a2430; }
.pro .donate .split, .pro .donate .perk { font-size: 12.5px; color: var(--muted); }
.pro .donate .perk.on { border: 0; padding: 0; }
.pro .donate .perk a, .pro .donate .perk .perkpick { color: var(--sky); }
.donate .msgbox { width: 100%; box-sizing: border-box; background: transparent; border: 1px solid #3a2430; color: var(--text); border-radius: 12px; padding: 10px 12px; font: inherit; font-size: 14px; resize: vertical; min-height: 48px; }
.live { display: flex; flex-wrap: wrap; align-items: center; justify-content: center; gap: 4px 6px; font-size: 12.5px; color: var(--muted); text-align: center; }
.live .dot { width: 7px; height: 7px; border-radius: 50%; background: #34d399; flex: 0 0 7px; }
.madar-badge.inline { padding: 0 7px; font-size: 12.5px; }

/* top supporters */
.board { list-style: none; margin: 0; padding: 0; display: grid; gap: 4px; }
.board li { display: grid; grid-template-columns: 24px minmax(0, 1fr) auto; align-items: center; gap: 8px; padding: 6px 0; }
.board .rk { font-weight: 800; color: var(--muted); text-align: center; }
.board .who { display: flex; align-items: center; gap: 6px; flex-wrap: wrap; min-width: 0; }
.board b.amt { font-size: 15px; white-space: nowrap; }
.lvl { font-size: 11px; font-weight: 700; white-space: nowrap; color: var(--muted); }
.lvl.dia { color: #a5d8ff; }
.lvl.gld { color: #ffd98a; }
.lvl.slv { color: #d6c8ce; }
.lvl.brz { color: #e3a87a; }
.tabs { display: flex; gap: 6px; }
.tabs button { font: inherit; font-size: 12.5px; background: none; border: 1px solid #3a2430; border-radius: 999px; padding: 3px 10px; color: var(--muted); cursor: pointer; }
.tabs button.on { color: var(--text); border-color: #ff7a1a; }
.gline { display: flex; justify-content: space-between; align-items: center; gap: 8px; flex-wrap: wrap; }
.seeall { justify-self: center; font-size: 13px; }
.hint2 { text-align: center; font-size: 12.5px; color: #ffd98a; text-decoration: none; }
.hint2:hover { text-decoration: underline; }
.pro .walletbox.blk { border-top: 0; }

/* after supporting: the share card */
.sharecard { border: 1px solid #3a2430; border-radius: 18px; padding: 18px; text-align: center; display: grid; gap: 8px; background: #0f0a12; }
.sharecard .big { font-size: 19px; font-weight: 800; overflow-wrap: anywhere; }
.sharecard .who2 { color: #ffd98a; font-weight: 700; overflow-wrap: anywhere; }
.shares { display: flex; justify-content: center; gap: 8px; flex-wrap: wrap; }
.btnlike { display: inline-block; text-decoration: none; color: var(--text); border: 1px solid var(--line2); border-radius: 10px; padding: 6px 12px; font-size: 14px; }
.center { text-align: center; }

/* Madar names: ordinary ones are a plain link; premium and verified ones shine (metallic text with a slow sheen, 💎) */
.nmlink { color: var(--text); text-decoration: none; font-weight: 600; font-size: 14px; direction: ltr; }
.nmlink:hover { text-decoration: underline; text-underline-offset: 3px; }
.nmlink.inline { font-size: 12.5px; }
.madar-badge .vmark { display: inline-grid; place-items: center; width: 15px; height: 15px; border-radius: 50%; background: linear-gradient(90deg, #ff3d6e, #ff7a1a); color: #fff; font-size: 10px; font-weight: 900; }
.madar-badge.legendary { border: 1px solid transparent; background: linear-gradient(#0f0a12, #0f0a12) padding-box, linear-gradient(90deg, #ffe29a, #ffffff, #ffb84d) border-box; }
.madar-badge.legendary bdi, .nm.legendary bdi { background: linear-gradient(100deg, #ffd56b 0%, #ffe29a 35%, #ffffff 50%, #ffe29a 65%, #ffd56b 100%); background-size: 250% 100%; background-position: 100% 0; -webkit-background-clip: text; background-clip: text; color: transparent; animation: madar-sheen 2.4s ease-out 1 both; }
@keyframes madar-sheen { from { background-position: 100% 0; } to { background-position: -150% 0; } }
.anim-paused .madar-badge.legendary bdi, .anim-paused .nm.legendary bdi { animation-play-state: paused; }
/* phones: the sheen repaints the text on every frame (a background animation is not done by the GPU alone), so it passes
   three times and then rests on gold instead of running forever */
@media (hover: none) { .madar-badge.legendary bdi, .nm.legendary bdi { animation-iteration-count: 3; } }
@media (prefers-reduced-motion: reduce) { .madar-badge.legendary bdi, .nm.legendary bdi { animation: none; background-position: 50% 0; } }

@media (max-width: 979px) {
  .cardpage.pro { padding: 0 0 32px; }
  .pro .cover { height: 150px; border-radius: 0; }
  .pro .head { grid-template-columns: minmax(0, 1fr); grid-template-areas: "ava" "idn" "bio" "links"; justify-items: start; margin-top: -54px; padding: 0 16px; row-gap: 6px; }
  .pro .head .avatar { width: 104px; height: 104px; font-size: 36px; border-width: 4px; }
  .pro .idn { padding-bottom: 0; }
  .pro .idn .dname { font-size: 24px; }
  .pro .head .bio { margin-top: 6px; font-size: 15px; }
  .licons { padding: 4px 0 0; }
  /* one column: support box and the share card, then the feed, then the rest of the side column */
  .cgrid, .cgrid.nofeed { grid-template-columns: minmax(0, 1fr); gap: 16px; margin-top: 20px; padding: 0 12px; }
  .side { display: contents; }
  .side .donate, .side .sharecard { order: 1; }
  .feed { order: 2; }
  .side .topbox, .side .supporters, .side .walletbox { order: 3; }
  .side .msgbox2 { order: 9; } /* supporters' messages: last on phones, after the feed, the board and the wallet */
  .post { padding: 16px; }
  .post .thumb { width: 104px; height: 64px; }
  .pro .box { padding: 16px; }
}

/* the 4th amount option: a box styled like the preset buttons (2x2 on narrow phones) */
.donate input.preset.amt { font-size: 16px; font-weight: 700; padding: 11px 6px; text-align: center; color: var(--text); background: #0a070c; border: 1px solid #3a2430; border-radius: 12px; width: 100%; box-sizing: border-box; }
.donate input.preset.amt::placeholder { color: var(--muted); font-weight: 600; font-size: 14px; }
.donate input.preset.amt:focus { outline: none; border-color: rgba(255, 122, 26, .7); }
.donate input.preset.amt.on { border-color: #ff7a1a; background: rgba(255, 122, 26, .18); }
.donate input.preset.amt.bad { border-color: #c9524a; }
@media (max-width: 420px) { .donate .presets { grid-template-columns: repeat(2, 1fr); } }
/* poll: the chosen option shows a check */
.post.poll .oname { display: inline-flex; align-items: baseline; gap: 6px; min-width: 0; }
.post.poll .ocheck { color: var(--good); font-weight: 900; }
.post.poll .opt:disabled { cursor: default; }
.post.poll a.phint { color: var(--sky); }
.post .phint.bad { color: #ff8a80; }
/* media gallery: one item at a time, a neutral tile, the player only after ▶ */
.post.media .mcap { margin: 0; overflow-wrap: anywhere; }
.mstage { position: relative; }
.mnav { position: absolute; top: 50%; transform: translateY(-50%); width: 40px; height: 40px; border-radius: 50%; border: 1px solid rgba(255, 255, 255, .18); background: rgba(7, 5, 10, .7); color: #fff; font-size: 30px; font-weight: 700; line-height: 1; display: grid; place-items: center; padding: 0; cursor: pointer; z-index: 2; }
.mnav i { width: 11px; height: 11px; border: solid #fff; border-width: 0 0 3px 3px; }
/* the chevron points away from the centre: left button points left, right button points right */
html[dir="rtl"] .mnav.next i, html:not([dir="rtl"]) .mnav.prev i { transform: translateX(2px) rotate(45deg); }
html[dir="rtl"] .mnav.prev i, html:not([dir="rtl"]) .mnav.next i { transform: translateX(-2px) rotate(-135deg); }
.mnav:hover { border-color: rgba(255, 122, 26, .7); }
.mnav.prev { inset-inline-start: 8px; }
.mnav.next { inset-inline-end: 8px; }
.mdots { display: flex; justify-content: center; gap: 8px; }
.mdots button { width: 8px; height: 8px; padding: 0; border-radius: 50%; border: 0; background: #3a2430; cursor: pointer; }
.mdots button.on { background: var(--sky); width: 20px; border-radius: 4px; }
.mframe { position: relative; width: 100%; border-radius: 12px; overflow: hidden; background: #0a070c; border: 1px solid var(--line); }
.mframe.wide { aspect-ratio: 16 / 9; }
.mframe.tall { aspect-ratio: 9 / 14; max-width: 340px; margin-inline: auto; }
.mframe iframe { position: absolute; inset: 0; width: 100%; height: 100%; border: 0; }
.mplay { position: absolute; inset: 0; display: flex; align-items: center; justify-content: center; gap: 12px; width: 100%; font: inherit; color: #efe4e8; background: linear-gradient(135deg, #1a0f16, #24120e); border: 0; cursor: pointer; }
.mplay .mtri { display: grid; place-items: center; width: 54px; height: 54px; border-radius: 50%; background: rgba(255, 255, 255, .12); font-size: 22px; }
.mplay:hover .mtri { background: rgba(255, 122, 26, .45); }
/* owner link on the cover */
.managebtn { position: absolute; top: 14px; inset-inline-end: 14px; font-size: 13px; color: #efe4e8; text-decoration: none; background: rgba(7, 5, 10, .55); border: 1px solid rgba(255, 255, 255, .2); border-radius: 10px; padding: 6px 12px; }
.managebtn:hover { color: #fff; border-color: rgba(255, 122, 26, .7); }
/* a display name or bio in another script keeps its own direction but sits on the page's side (next to the picture) */
html[dir="rtl"] .dname, html[dir="rtl"] .bio { text-align: right; }
html[dir="ltr"] .dname, html[dir="ltr"] .bio { text-align: left; }
/* display name: plain white; gold (still, no animation) with a gold ring around the picture for legendary / verified */
.pro .idn .dname, .chead .dname { color: #f7f1f3; background: none; -webkit-text-fill-color: currentColor; }
.pro .hero.gold .idn .dname { background: linear-gradient(100deg, #ffd56b 0%, #ffe29a 45%, #fff3cf 55%, #ffd56b 100%); -webkit-background-clip: text; background-clip: text; color: transparent; -webkit-text-fill-color: transparent; }
.pro .hero.gold .head .avatar { border-color: #0b080d; box-shadow: 0 0 0 3px #ffd56b, 0 0 0 5px rgba(255, 226, 154, .25); }
/* the profile picture is a portrait card (3:4) with soft corners */
.pro .head .avatar { width: 120px; height: 160px; border-radius: 20px; }
.chead .avatar { width: 96px; height: 128px; border-radius: 16px; }
@media (max-width: 720px) { .pro .head .avatar { width: 96px; height: 128px; border-radius: 16px; } .chead .avatar { width: 84px; height: 112px; } }
/* the picture sits at the end of the line (left in Arabic, right in English), the name and its line beside it */
.pro .head { grid-template-areas: "links idn ava" "bio bio bio"; }
.pro .idn .sub { justify-content: flex-end; }
html[dir="rtl"] .pro .idn .dname { text-align: left; }
html[dir="ltr"] .pro .idn .dname { text-align: right; }
@media (max-width: 979px) {
  .pro .head { grid-template-areas: "ava" "idn" "bio" "links"; justify-items: end; }
  .pro .head .bio { justify-self: stretch; }
  .licons { justify-self: stretch; }
}
/* any text that starts with a Latin word (e.g. «PepFan …») keeps its letters' order but sits on the page's side */
html[dir="rtl"] .pro [dir="auto"]:not(input):not(textarea) { text-align: right; }
html[dir="ltr"] .pro [dir="auto"]:not(input):not(textarea) { text-align: left; }
/* the boost box, lighter: smaller amounts and button, calmer heading */
.pro .donate .preset { font-size: 15.5px; font-weight: 700; padding: 9px 4px; border-radius: 10px; }
.pro .donate input.preset.amt { font-size: 14.5px; padding: 9px 4px; border-radius: 10px; }
.pro .donate input.preset.amt::placeholder { font-size: 13px; }
.pro .donate .give { font-size: 16px; padding: 11px 16px; border-radius: 10px; }
.pro .box.donate h2 { font-size: 16.5px; }
.pro .donate .wbtn { font-size: 13px; padding: 5px 10px; }
/* the gallery's tiles: one per item, the shown one outlined; a row that scrolls sideways on phones */
.mstrip { display: flex; gap: 8px; overflow-x: auto; padding-bottom: 4px; scrollbar-width: thin; }
.mtile { flex: 0 0 auto; display: grid; grid-template-columns: auto minmax(0, 1fr); align-items: center; gap: 8px; width: 170px; padding: 6px; font: inherit; font-size: 12.5px; color: #cbbcc3; background: #0a070c; border: 1px solid var(--line2); border-radius: 10px; cursor: pointer; text-align: start; }
.mtile:hover { border-color: rgba(255, 122, 26, .6); }
.mtile.on { border-color: #ff7a1a; background: rgba(255, 122, 26, .14); color: #fff; }
.mtile .mshot { display: grid; place-items: center; border-radius: 6px; background: linear-gradient(135deg, #3a1a22, #3a2012); color: #fff; font-size: 11px; }
.mtile.wide .mshot { width: 56px; height: 32px; }
.mtile.tall .mshot { width: 28px; height: 40px; }
.mtile .mtxt { overflow: hidden; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; line-height: 1.35; }
.mnav { width: 44px; height: 44px; }
/* the gallery stage keeps one height whatever the item (wide or tall), so the arrows and the box never jump */
.mstage { height: 440px; display: grid; place-items: center; border-radius: 12px; background: #0a070c; overflow: hidden; }
.mstage .mframe.wide { width: 100%; height: auto; max-height: 100%; aspect-ratio: 16 / 9; border: 0; }
.mstage .mframe.tall { height: 100%; width: auto; max-width: 100%; aspect-ratio: 9 / 16; margin: 0; border: 0; }
@media (max-width: 979px) { .mstage { height: 400px; } }
/* the still picture before playing, with the ▶ above it */
.mplay .mposter { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.mplay .mtri { position: relative; z-index: 1; background: rgba(7, 5, 10, .55); }
.mtile .mshot { position: relative; overflow: hidden; }
.mtile .mshot .mposter { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.mtile .mshot .mtri { position: relative; z-index: 1; }
/* the ✓ by the name: gold for a registered name, blue once the owner's identity is confirmed */
.nm .vok, .chead .vok { background: #ffc857; color: #1a1205; }
.nm .vok.id, .chead .vok.id { background: #3d9bff; color: #fff; }
/* header: the picture first (right in Arabic, left in English), the name and its line under it, links at the far end */
.pro .head { grid-template-columns: auto minmax(0, 1fr) auto; grid-template-areas: "ava . links" "idn idn idn" "bio bio bio"; align-items: end; row-gap: 10px; }
.pro .idn { padding-bottom: 0; }
.pro .idn .sub { justify-content: flex-start; }
html[dir="rtl"] .pro .idn .dname { text-align: right; }
html[dir="ltr"] .pro .idn .dname { text-align: left; }
@media (max-width: 979px) {
  .pro .head { grid-template-columns: minmax(0, 1fr); grid-template-areas: "ava" "idn" "bio" "links"; justify-items: start; }
}
/* the picture column: the picture, then the display name (with its ✓) and its line, centred under it */
.pro .head { grid-template-columns: auto minmax(0, 1fr) auto; grid-template-areas: "ava . links" "bio bio bio"; }
.pro .avcol { grid-area: ava; display: flex; flex-direction: column; align-items: center; gap: 6px; max-width: 340px; min-width: 0; }
.pro .avcol .avatar { grid-area: auto; }
.pro .avcol .idn { text-align: center; }
html[dir] .pro .avcol .idn .dname { text-align: center; display: inline-flex; align-items: center; justify-content: center; gap: 8px; flex-wrap: wrap; }
.pro .avcol .idn .sub { justify-content: center; }
.pro .idn .dname .vok { width: 20px; height: 20px; font-size: 12.5px; flex: 0 0 auto; -webkit-text-fill-color: currentColor; }
.vok { display: inline-grid; place-items: center; border-radius: 50%; background: #ffc857; color: #1a1205; font-weight: 900; cursor: help; }
.vok.id { background: #3d9bff; color: #fff; }
@media (max-width: 979px) { .pro .head { grid-template-areas: "ava" "bio" "links"; justify-items: center; } .pro .head .bio { text-align: center !important; } .licons { justify-content: center; } }
/* animated cover (exclusive): the loop over the still cover */
.pro .cover video.covervid { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }

/* ================= visual pass v4 (2026-10-08) ================= */
/* header: picture column (picture, name, line) beside an info column (bio, then one row: boost button + platforms) */
.pro .head { grid-template-columns: auto minmax(0, 1fr); grid-template-areas: "ava info"; align-items: end; column-gap: 28px; }
.pro .head .info { grid-area: info; display: grid; gap: 14px; min-width: 0; padding-bottom: 6px; }
.pro .head .info .bio { grid-area: auto; margin: 0; max-width: 640px; font-size: 15.5px; line-height: 1.8; }
.pro .acts { display: flex; flex-wrap: wrap; align-items: center; gap: 10px; }
.pro .acts .licons { padding: 0; }
.boostcta { display: inline-flex; align-items: center; gap: 6px; font-weight: 700; font-size: 14.5px; color: #fff; text-decoration: none; background: linear-gradient(90deg, #ff3d6e, #ff7a1a); border-radius: 999px; padding: 8px 18px; }
.boostcta:hover { background: linear-gradient(90deg, #ff5683, #ff8d3a); }
.boostcta:focus-visible, .firstcta:focus-visible { outline: 2px solid #ffad42; outline-offset: 2px; }
@media (max-width: 979px) {
  .pro .head { grid-template-columns: minmax(0, 1fr); grid-template-areas: "ava" "info"; justify-items: center; row-gap: 12px; }
  .pro .head .info { justify-items: center; text-align: center; }
  html[dir] .pro .head .info .bio { text-align: center; }
  .pro .acts { justify-content: center; }
}

/* gallery: the stage takes the shape of a wide video; a tall one sits in the middle over its own blurred picture */
.mstage { height: auto; aspect-ratio: 16 / 9; position: relative; }
@media (max-width: 979px) { .mstage { height: auto; aspect-ratio: 4 / 5; } }
.mstage .mframe { position: relative; z-index: 1; }
.mstage .mframe.wide { width: 100%; height: 100%; max-height: none; aspect-ratio: auto; }
@media (max-width: 979px) { .mstage .mframe.wide { height: auto; aspect-ratio: 16 / 9; } }
.mstage .mbg { position: absolute; inset: -20px; width: calc(100% + 40px); height: calc(100% + 40px); object-fit: cover; filter: blur(22px) brightness(.45) saturate(1.2); z-index: 0; }
.mstage .mnav { z-index: 2; }
/* an item that opens on its platform: our own cover, a soft shade at the bottom with the creator's text, ▶ in the middle */
.mframe.out { background: radial-gradient(120% 80% at 30% 20%, #ff7a1a 0%, transparent 55%), radial-gradient(110% 90% at 80% 90%, #ff3d6e 0%, transparent 60%), #2a0f14; }
.mout { position: absolute; inset: 0; display: block; color: #fff; text-decoration: none; -webkit-tap-highlight-color: transparent; }
.mout .mposter { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.mout .mshade { position: absolute; inset: 0; background: linear-gradient(to top, rgba(7, 5, 10, .88) 0%, rgba(7, 5, 10, .35) 34%, rgba(7, 5, 10, 0) 58%), rgba(7, 5, 10, .12); }
.mout .mmid { position: absolute; inset: 0; display: grid; place-content: center; justify-items: center; gap: 10px; }
.mout .mtri { display: grid; place-items: center; width: 62px; height: 62px; border-radius: 50%; font-size: 24px; padding-left: 4px; background: rgba(7, 5, 10, .55); border: 1px solid rgba(255, 255, 255, .28); }
.mout .mgo { font-size: 12.5px; font-weight: 700; padding: 4px 11px; border-radius: 999px; background: rgba(7, 5, 10, .55); color: #f3ecef; }
.mout:hover .mtri, .mout:focus-visible .mtri { background: rgba(255, 122, 26, .6); border-color: transparent; }
.mout:focus-visible { outline: 2px solid #ff7a1a; outline-offset: -2px; border-radius: 12px; }
.mout .mcapin { position: absolute; inset-inline: 14px; bottom: 12px; font-size: 14.5px; font-weight: 600; line-height: 1.4; overflow-wrap: anywhere; display: -webkit-box; -webkit-line-clamp: 3; -webkit-box-orient: vertical; overflow: hidden; text-shadow: 0 1px 6px rgba(0, 0, 0, .6); }
/* on phones the cover fills the whole stage */
@media (max-width: 979px) { .mstage .mframe.out { width: 100%; height: 100%; max-width: none; aspect-ratio: auto; } }

/* boost box: one quiet line for the split and the coin, the Madar Wallet line as a small note */
.pro .donate .dopts { display: flex; flex-wrap: wrap; justify-content: center; align-items: center; gap: 4px 6px; font-size: 12.5px; color: var(--muted); text-align: center; }
.pro .donate .dopts .split { font-size: 12.5px; color: #cbbcc3; }
.pro .donate .dopts .split:empty + .dsep { display: none; }
.pro .donate .perk { font-size: 12px; }
.firstcta { width: 100%; font: inherit; font-weight: 700; font-size: 14.5px; color: #fff; background: rgba(255, 122, 26, .14); border: 1px dashed rgba(255, 122, 26, .55); border-radius: 12px; padding: 12px; cursor: pointer; }
.firstcta:hover { background: rgba(255, 122, 26, .24); }

/* section titles and spacing, the same everywhere */
.pro .box h2, .post .meta .kind { letter-spacing: .01em; }
.pro .side { display: grid; gap: 16px; align-content: start; }
.feed { display: grid; gap: 16px; align-content: start; }

/* footer badge */
.cfoot .pbadge { display: inline-flex; flex-wrap: wrap; justify-content: center; align-items: center; gap: 4px 10px; text-decoration: none; border: 1px solid var(--line2); border-radius: 999px; padding: 7px 16px; color: var(--muted); font-size: 13px; }
.cfoot .pbadge b { color: #efe4e8; font-weight: 700; }
.cfoot .pbadge span { color: var(--sky); }
.cfoot .pbadge:hover { border-color: rgba(255, 122, 26, .6); }

/* gold theme for legendary and verified pages: gold edges, gold boost buttons and titles */
.goldpage .box, .goldpage .post { border-color: rgba(255, 213, 107, .28); }
.goldpage .box h2, .goldpage .post .meta .kind { color: #ffd56b; }
.goldpage .donate .give, .goldpage .boostcta { background: linear-gradient(100deg, #fff1b8, #ffd56b 45%, #c8952e); color: #1a1205; }
.goldpage .donate .give:hover, .goldpage .boostcta:hover { background: linear-gradient(100deg, #fff6d0, #ffe08a 45%, #d8a53e); }
.goldpage .donate .give:disabled { background: #241820; color: #a8979f; }
.goldpage .donate .preset.on, .goldpage .donate input.preset.amt.on { border-color: #ffd56b; background: rgba(255, 213, 107, .14); }
.goldpage .mtile.on { border-color: #ffd56b; background: rgba(255, 213, 107, .12); }
.goldpage .firstcta { border-color: rgba(255, 213, 107, .6); background: rgba(255, 213, 107, .1); }

/* a soft one-time entrance for the boxes (no endless animation) */
@keyframes card-in { from { opacity: 0; transform: translateY(8px); } to { opacity: 1; transform: none; } }
.pro.enter .box, .pro.enter .post, .pro.enter .head { animation: card-in .45s ease-out both; }
.pro.enter .feed .post:nth-child(2), .pro.enter .side > :nth-child(2) { animation-delay: .06s; }
.pro.enter .feed .post:nth-child(n+3), .pro.enter .side > :nth-child(n+3) { animation-delay: .12s; }
@media (prefers-reduced-motion: reduce) { .pro .box, .pro .post, .pro .head { animation: none; } }
.goldpage .donate .goal .bar i { background: linear-gradient(90deg, #ffd56b, #c8952e); }
.goldpage .post.poll .opt.lead .pbar i { background: #ffd56b; }
/* follow button (a MADAR account; no emails) */
.followbtn { font: inherit; font-size: 14px; font-weight: 700; color: #fff; background: linear-gradient(90deg, #ff3d6e, #ff7a1a); border: 1px solid #ff7a1a; border-radius: 999px; padding: 7px 18px; cursor: pointer; }
.followbtn:hover { background: linear-gradient(90deg, #ff5683, #ff8d3a); }
.followbtn.on { background: transparent; color: #cbbcc3; border-color: var(--line2); }
.followbtn.on:hover { border-color: rgba(255, 138, 128, .6); color: #ff9b93; }
.followbtn:disabled { opacity: .6; cursor: default; }
.goldpage .followbtn:not(.on) { background: linear-gradient(100deg, #fff1b8, #ffd56b 45%, #c8952e); border-color: #ffd56b; color: #1a1205; }
/* top bar when signed in: my account · sign out */
.top nav { align-items: center; }
.top nav button.acctlink { font: inherit; font-size: 13.5px; color: var(--muted); background: none; border: 1px solid var(--line2); border-radius: 8px; padding: 5px 10px; cursor: pointer; }
.top nav button.acctlink:hover { color: #ff9b93; border-color: rgba(255, 138, 128, .5); }

/* a hidden element stays hidden whatever its own display rule */
#langBtn[hidden] { display: none !important; }

/* last line: rights and links, centred */
footer p.flinks { text-align: center; display: flex; flex-wrap: wrap; justify-content: center; gap: 4px 8px; }
footer p.flinks a { color: var(--muted); text-decoration: none; }
footer p.flinks a:hover { color: var(--sky); }

/* ===== boost in a drawer (2026-10-08) ===== */
.boostfab { position: fixed; z-index: 40; bottom: 22px; inset-inline-end: 22px; font: inherit; font-size: 16px; font-weight: 800; color: #fff; background: linear-gradient(90deg, #ff3d6e, #ff7a1a); border: 0; border-radius: 999px; padding: 14px 24px; cursor: pointer; box-shadow: 0 10px 30px rgba(0, 0, 0, .45), 0 0 0 1px rgba(255, 255, 255, .08) inset; }
.boostfab:hover { background: linear-gradient(90deg, #ff5683, #ff8d3a); }
.boostfab:focus-visible { outline: 3px solid #ffad42; outline-offset: 3px; }
.goldpage .boostfab { background: linear-gradient(100deg, #fff1b8, #ffd56b 45%, #c8952e); color: #1a1205; }
.drawerwrap { position: fixed; inset: 0; z-index: 50; }
.drawerback { position: absolute; inset: 0; background: rgba(7, 5, 10, .62); }
.drawer { position: absolute; top: 0; bottom: 0; inset-inline-end: 0; width: min(440px, 100%); overflow-y: auto; background: #0b080d; border-inline-start: 1px solid #2a1a24; padding: 54px 18px 24px; display: grid; gap: 14px; align-content: start; box-shadow: 0 0 60px rgba(0, 0, 0, .55); }
.drawer .box.donate { margin: 0; }
.drawerx { position: absolute; top: 12px; inset-inline-start: 12px; width: 36px; height: 36px; border-radius: 50%; font: inherit; font-size: 16px; color: #efe4e8; background: #0f0a12; border: 1px solid var(--line2); cursor: pointer; }
.drawerx:hover { border-color: rgba(255, 122, 26, .6); }
@keyframes drawer-in { from { transform: translateX(var(--dx, 24px)); opacity: 0; } to { transform: none; opacity: 1; } }
html[dir="rtl"] .drawer { --dx: -24px; }
.drawer.anim { animation: drawer-in .25s ease-out both; }
@media (max-width: 760px) {
  .drawer { top: auto; inset-inline: 0; width: 100%; max-height: 88vh; border-inline-start: 0; border-top: 1px solid #2a1a24; border-radius: 20px 20px 0 0; padding-top: 52px; --dx: 0; }
  @keyframes drawer-up { from { transform: translateY(30px); opacity: 0; } to { transform: none; opacity: 1; } }
  .drawer { animation-name: drawer-up; }
  .boostfab { bottom: 14px; inset-inline: 14px; width: calc(100% - 28px); }
}
@media (prefers-reduced-motion: reduce) { .drawer { animation: none; } }
/* side column: goal, top supporters, messages */
.goalbox2 { display: grid; gap: 10px; }
/* each message is its own soft card, so many messages stay apart and easy to read */
.msgbox2 { display: grid; gap: 10px; }
.msgbox2 .mitem { display: grid; gap: 6px; background: rgba(255, 255, 255, .03); border: 1px solid rgba(255, 255, 255, .08); border-radius: 12px; padding: 10px 12px; }
.msgbox2 .mscroll { display: grid; gap: 10px; max-height: 460px; overflow-y: auto; overscroll-behavior: contain; padding-inline-end: 4px; scrollbar-width: thin; scrollbar-color: rgba(255, 255, 255, .2) transparent; }
.msgbox2 .mitem.pin { background: rgba(255, 200, 87, .06); border-color: rgba(255, 200, 87, .3); }
.msgbox2 .mtop { display: flex; justify-content: space-between; align-items: center; gap: 8px; }
.msgbox2 p { margin: 0; color: #f0e8eb; font-size: 14.5px; line-height: 1.65; overflow-wrap: anywhere; }
.goldpage .drawer { border-color: rgba(255, 213, 107, .3); }
/* leave room for the floating button at the end of the page */
.pro .cgrid { padding-bottom: 70px; }
.goalbox2 .goal .gtop { display: flex; justify-content: space-between; align-items: baseline; gap: 10px; }
.goalbox2 .goal { display: grid; gap: 8px; }
.goalbox2 .gtop { display: flex; justify-content: space-between; gap: 8px; font-size: 13.5px; color: #cbbcc3; }
.goalbox2 .gtop span { min-width: 0; overflow-wrap: anywhere; }
.goalbox2 .goal .bar { height: 8px; border-radius: 999px; background: #21141b; overflow: hidden; border: 0; }
.goalbox2 .goal .bar i { display: block; height: 100%; background: linear-gradient(90deg, #ff3d6e, #ff7a1a); border-radius: 999px; }
.goalbox2 .gnext { font-size: 12.5px; color: var(--muted); line-height: 1.6; overflow-wrap: anywhere; }
.goalbox2 .preset { font-size: 18px; padding: 11px 6px; border-color: #3a2430; }
.goalbox2 .split, .goalbox2 .perk { font-size: 12.5px; color: var(--muted); }
.goalbox2 .perk.on { border: 0; padding: 0; }
.goalbox2 .perk a { color: var(--sky); }
.donate .msgbox { width: 100%; box-sizing: border-box; background: transparent; border: 1px solid #3a2430; color: var(--text); border-radius: 12px; padding: 10px 12px; font: inherit; font-size: 14px; resize: vertical; min-height: 48px; }
.live { display: flex; flex-wrap: wrap; align-items: center; justify-content: center; gap: 4px 6px; font-size: 12.5px; color: var(--muted); text-align: center; }

/* «ابدأ الحماس»: a compact button, not a big box */
.firstcta { width: auto; justify-self: center; display: inline-flex; align-items: center; gap: 6px; font-size: 13.5px; padding: 7px 18px; border-radius: 999px; border-style: solid; }
.topbox .firstcta { margin: 4px auto 0; display: flex; }

/* ===== gift: the Legend's Crown (design) ===== */
.pro .avcol.crowned { position: relative; }
.pro .avcol .crown { position: absolute; top: -44px; left: 50%; transform: translateX(-50%) rotate(-8deg); width: 92px; height: 54px; z-index: 3; filter: drop-shadow(0 4px 10px rgba(0, 0, 0, .5)) drop-shadow(0 0 12px rgba(243, 207, 115, .55)); }
.pro .avcol .crown svg { width: 100%; height: 100%; display: block; }
.pro .avcol.crowned .avatar { box-shadow: 0 0 0 3px #f3cf73, 0 0 26px 6px rgba(243, 207, 115, .45), 0 0 60px 14px rgba(255, 213, 107, .18) !important; }
.giftbanner { position: absolute; top: 14px; left: 50%; transform: translateX(-50%); z-index: 2; display: inline-flex; align-items: center; gap: 10px; white-space: nowrap; font-weight: 800; font-size: 14px; color: #1a1205; background: linear-gradient(100deg, #fff1b8, #ffd56b 45%, #c8952e); border-radius: 999px; padding: 7px 16px; box-shadow: 0 6px 22px rgba(0, 0, 0, .4); }
.giftbanner .gby { font-weight: 600; opacity: .8; }
canvas.giftfx { position: fixed; inset: 0; width: 100vw; height: 100vh; pointer-events: none; z-index: 30; }
@media (max-width: 760px) { .giftbanner { top: 16px; left: auto; transform: none; inset-inline-end: 12px; font-size: 12px; padding: 6px 12px; gap: 6px; } .pro .avcol .crown { width: 74px; height: 44px; top: -36px; } }

/* «تاج الأسطورة» show (~4.8 s): rays and a glow ring open, the crown descends and settles, a shine crosses it,
   the caption appears, then everything rises away */
.crownfx { position: fixed; inset: 0; z-index: 35; pointer-events: none; display: grid; place-items: center; align-content: center; gap: 18px; }
.crownfx::before { content: ""; position: absolute; inset: 0; background: radial-gradient(circle at 50% 46%, rgba(7, 5, 10, .72), rgba(7, 5, 10, .25) 42%, rgba(7, 5, 10, 0) 70%); animation: fx-veil 4.8s ease both; }
.crownfx > * { position: relative; }
.crownstage { position: relative; width: 300px; height: 225px; display: grid; place-items: center; }
.crownrays { position: absolute; width: 560px; height: 560px; left: 50%; top: 50%; margin: -280px 0 0 -280px; border-radius: 50%;
  background: repeating-conic-gradient(from 0deg, rgba(255, 226, 154, .32) 0deg 5deg, rgba(255, 226, 154, 0) 5deg 18deg);
  -webkit-mask: radial-gradient(circle, #000 0, rgba(0, 0, 0, .6) 28%, transparent 62%); mask: radial-gradient(circle, #000 0, rgba(0, 0, 0, .6) 28%, transparent 62%);
  animation: fx-rays 4.8s ease-out both; }
.crownring { position: absolute; width: 220px; height: 220px; left: 50%; top: 50%; margin: -110px 0 0 -110px; border-radius: 50%; border: 2px solid rgba(255, 226, 154, .9); box-shadow: 0 0 30px rgba(243, 207, 115, .7), inset 0 0 30px rgba(243, 207, 115, .35); animation: fx-ring 4.8s ease-out both; }
.crownbig { position: relative; width: 300px; height: 225px; filter: drop-shadow(0 18px 30px rgba(0, 0, 0, .6)) drop-shadow(0 0 22px rgba(243, 207, 115, .45)); animation: fx-crown 4.8s cubic-bezier(.22, .9, .25, 1) both; }
.crownbig img { width: 100%; height: 100%; display: block; }
.crownshine { position: absolute; inset: 0; -webkit-mask: url(/card/gifts/crown.svg) center / contain no-repeat; mask: url(/card/gifts/crown.svg) center / contain no-repeat;
  background: linear-gradient(105deg, transparent 0 38%, rgba(255, 255, 255, .85) 46%, transparent 54% 100%) no-repeat; background-size: 250% 100%; background-position: 160% 0; animation: fx-shine 4.8s ease both; mix-blend-mode: screen; }
.crowncap { display: inline-flex; align-items: center; gap: 10px; font-size: 15.5px; color: #f6e2a6; background: rgba(12, 8, 12, .88); border: 1px solid transparent; border-radius: 999px; padding: 10px 22px;
  background-image: linear-gradient(rgba(12, 8, 12, .92), rgba(12, 8, 12, .92)), linear-gradient(100deg, #8a6418, #f3cf73, #fff3cf, #d9a93c, #8a6418); background-origin: border-box; background-clip: padding-box, border-box;
  box-shadow: 0 10px 30px rgba(0, 0, 0, .55), 0 0 24px rgba(243, 207, 115, .25); letter-spacing: .02em; animation: fx-cap 4.8s ease both; }
.crowncap b { font-weight: 800; background: linear-gradient(100deg, #f3cf73, #fff3cf 50%, #e2b24a); -webkit-background-clip: text; background-clip: text; color: transparent; font-size: 17px; }
.crowncap .sep { opacity: .45; }
.crowncap span:last-child { color: #d6c8ce; font-size: 14px; }
@keyframes fx-veil { 0% { opacity: 0; } 12%, 84% { opacity: 1; } 100% { opacity: 0; } }
@keyframes fx-rays { 0% { opacity: 0; transform: scale(.4) rotate(0deg); } 30% { opacity: 1; transform: scale(1) rotate(25deg); } 84% { opacity: .9; transform: scale(1.05) rotate(70deg); } 100% { opacity: 0; transform: scale(1.1) rotate(85deg); } }
@keyframes fx-ring { 0%, 26% { opacity: 0; transform: scale(.3); } 34% { opacity: 1; transform: scale(1); } 60% { opacity: 0; transform: scale(1.9); } 100% { opacity: 0; } }
@keyframes fx-crown { 0% { opacity: 0; transform: translateY(-60vh) scale(.55) rotate(-14deg); } 12% { opacity: 1; } 30% { transform: translateY(8px) scale(1.04) rotate(3deg); } 38% { transform: translateY(-6px) scale(1) rotate(-1.5deg); } 46%, 82% { opacity: 1; transform: none; } 100% { opacity: 0; transform: translateY(-36vh) scale(.8); } }
@keyframes fx-shine { 0%, 40% { background-position: 160% 0; } 66%, 100% { background-position: -60% 0; } }
@keyframes fx-cap { 0%, 34% { opacity: 0; transform: translateY(14px) scale(.96); } 44%, 82% { opacity: 1; transform: none; } 100% { opacity: 0; transform: translateY(-8px); } }
.crownfx.quiet { align-content: end; padding-bottom: 90px; }
.crownfx.quiet::before, .crownfx.quiet .crownstage { display: none; }
.crownfx.quiet .crowncap { animation: none; }
@media (max-width: 560px) { .crownstage, .crownbig { width: 220px; height: 165px; } .crownrays { width: 420px; height: 420px; margin: -210px 0 0 -210px; } .crowncap { font-size: 13.5px; padding: 8px 16px; } .crowncap b { font-size: 15px; } }

/* ===== drawer tabs and gifts ===== */
.drawtabs { display: flex; gap: 8px; }
.drawtabs button { flex: 1; font: inherit; font-size: 15px; font-weight: 700; color: #cbbcc3; background: #0f0a12; border: 1px solid var(--line2); border-radius: 12px; padding: 10px; cursor: pointer; }
.drawtabs button.on { color: #fff; background: rgba(255, 122, 26, .18); border-color: #ff7a1a; }
.goldpage .drawtabs button.on { background: rgba(255, 213, 107, .14); border-color: #ffd56b; color: #f6e2a6; }
.giftbox { display: grid; gap: 12px; }
.giftbox h2 { margin: 0; }
.giftgrid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 8px; }
.gifttile { position: relative; display: grid; justify-items: center; gap: 4px; font: inherit; color: #efe4e8; background: #0a070c; border: 1px solid var(--line2); border-radius: 14px; padding: 12px 6px 10px; cursor: pointer; }
.gifttile:hover { border-color: rgba(255, 122, 26, .55); }
.gifttile.on { border-color: #ffd56b; background: rgba(255, 213, 107, .1); box-shadow: 0 0 0 1px rgba(255, 213, 107, .35) inset; }
.gifttile .gicon { display: grid; place-items: center; width: 54px; height: 44px; font-size: 30px; }
.gifttile .gicon img { width: 54px; height: 40px; object-fit: contain; filter: drop-shadow(0 2px 6px rgba(243, 207, 115, .45)); }
.gifttile b { font-size: 13px; }
.gifttile .gprice { font-size: 12.5px; color: #ffd56b; font-weight: 700; }
.gifttile.soon { opacity: .55; }
.gifttile .gsoon { position: absolute; top: 6px; inset-inline-start: 6px; font-size: 10px; color: #cbbcc3; background: #241820; border-radius: 999px; padding: 1px 7px; }
.giftdet { display: grid; gap: 6px; border-top: 1px solid var(--line); padding-top: 12px; }
.giftdet > b { font-size: 15px; color: #f6e2a6; }
.giftacts { display: grid; grid-template-columns: 1fr auto; gap: 8px; margin-top: 4px; }
.giftacts .give { font-size: 15px; padding: 11px 14px; border-radius: 10px; border: 0; background: linear-gradient(100deg, #fff1b8, #ffd56b 45%, #c8952e); color: #1a1205; font-weight: 800; cursor: pointer; }
.giftacts .give:disabled { background: #241820; color: #a8979f; cursor: not-allowed; }
.giftacts .ghost { font: inherit; font-size: 14px; color: #efe4e8; background: none; border: 1px solid var(--line2); border-radius: 10px; padding: 0 14px; cursor: pointer; }
.giftacts .ghost:hover:not(:disabled) { border-color: #ffd56b; color: #f6e2a6; }

/* ===== the other gifts ===== */
.crownfx.nostage { align-content: center; }
.crownfx.nostage::before { background: radial-gradient(circle at 50% 50%, rgba(7, 5, 10, .45), rgba(7, 5, 10, 0) 55%); }
.gfx-spark .crownring { border-color: rgba(159, 208, 255, .95); box-shadow: 0 0 34px rgba(90, 160, 255, .8), inset 0 0 30px rgba(90, 160, 255, .4); }
.gfx-spark .crownbig { filter: drop-shadow(0 0 26px rgba(120, 180, 255, .8)) drop-shadow(0 14px 24px rgba(0, 0, 0, .5)); }
.gfx-rose .crownring { border-color: rgba(255, 150, 175, .9); box-shadow: 0 0 34px rgba(255, 80, 120, .6), inset 0 0 30px rgba(255, 80, 120, .3); }
.gfx-rose .crownbig { filter: drop-shadow(0 0 24px rgba(255, 90, 130, .55)) drop-shadow(0 14px 24px rgba(0, 0, 0, .5)); }
.gfx-goldrain .crownbig { filter: drop-shadow(0 0 30px rgba(243, 207, 115, .7)) drop-shadow(0 14px 24px rgba(0, 0, 0, .5)); }
.giftflash { position: absolute; inset: 0; background: radial-gradient(circle at 50% 46%, rgba(220, 238, 255, .9), rgba(120, 180, 255, .25) 30%, transparent 60%); animation: fx-flash 4.8s ease-out both; }
@keyframes fx-flash { 0%, 24% { opacity: 0; } 28% { opacity: 1; } 40% { opacity: 0; } 100% { opacity: 0; } }
.balloonsky { position: absolute; inset: 0; overflow: hidden; }
.balloon { position: absolute; bottom: -260px; width: calc(90px * var(--s, 1)); height: auto; animation: fx-rise 5s cubic-bezier(.3, .2, .4, 1) var(--d, 0s) both; }
@keyframes fx-rise { 0% { transform: translateY(0) rotate(-4deg); opacity: 0; } 8% { opacity: 1; } 50% { transform: translateY(-62vh) rotate(5deg); } 85% { opacity: 1; } 100% { transform: translateY(-130vh) rotate(-3deg); opacity: 0; } }
.topbox .firstcta { margin-top: 10px; }
.topbox.startonly { display: grid; place-items: center; padding: 16px; }
.topbox.startonly .firstcta { margin: 0; }
/* likes: ❤ and the count at the bottom-left of each post */
.post .pfoot { display: flex; justify-content: flex-end; margin-top: -2px; }
html[dir="ltr"] .post .pfoot { justify-content: flex-start; }
.likebtn { display: inline-flex; align-items: center; gap: 7px; font: inherit; font-size: 15px; color: #d6c8ce; background: rgba(255, 255, 255, .04); border: 1px solid var(--line2); border-radius: 999px; padding: 6px 14px; cursor: pointer; }
.likebtn:hover { color: #ff9bb0; border-color: rgba(255, 120, 150, .35); }
.likebtn .heart { font-size: 22px; line-height: 1; }
.likebtn.on { color: #ff6f91; }
.likebtn.on .heart { color: #ff4f7b; }
.likebtn:disabled { cursor: default; opacity: .8; }
.likebtn .lcount:empty { display: none; }
/* «✉️ رسالة» next to Follow */
.msgbtn { display: inline-flex; align-items: center; font-size: 14px; font-weight: 700; color: #efe4e8; text-decoration: none; background: transparent; border: 1px solid var(--line2); border-radius: 999px; padding: 7px 16px; }
.msgbtn:hover { color: #fff; border-color: rgba(255, 122, 26, .6); }
/* «⋯» menu on the cover: report the page, block its owner */
.morewrap { position: absolute; top: 14px; inset-inline-end: 14px; z-index: 2; display: grid; justify-items: end; gap: 6px; }
.morebtn { width: 36px; height: 32px; padding: 0; font: inherit; font-size: 18px; line-height: 1; color: #efe4e8; background: rgba(7, 5, 10, .55); border: 1px solid rgba(255, 255, 255, .2); border-radius: 10px; cursor: pointer; }
.morebtn:hover { border-color: rgba(255, 122, 26, .7); color: #fff; }
.moremenu { display: grid; min-width: 190px; background: #0f0a12; border: 1px solid #3a2430; border-radius: 12px; padding: 4px; box-shadow: 0 10px 30px rgba(0, 0, 0, .5); }
.moremenu button { font: inherit; font-size: 13.5px; text-align: start; color: #efe4e8; background: none; border: 0; border-radius: 8px; padding: 9px 12px; cursor: pointer; }
.moremenu button:hover { background: rgba(255, 255, 255, .06); }
.morenote { font-size: 12.5px; color: #efe4e8; background: rgba(7, 5, 10, .7); border-radius: 8px; padding: 4px 10px; }
/* report / delete on each supporter message */
.msgbox2 .mend { display: inline-flex; align-items: center; gap: 6px; flex: 0 0 auto; }
.mact { font: inherit; font-size: 12.5px; line-height: 1; color: var(--muted); background: none; border: 1px solid transparent; border-radius: 8px; padding: 4px 6px; cursor: pointer; opacity: .65; }
.mact:hover { opacity: 1; border-color: var(--line2); }
.mact.del { font-size: 13.5px; font-weight: 600; color: #ffb4ab; background: rgba(255, 90, 80, .1); border-color: rgba(255, 138, 128, .45); padding: 6px 12px; opacity: 1; }
.mact.del:hover { background: rgba(255, 90, 80, .2); border-color: rgba(255, 138, 128, .8); }
/* dialogs over the page (report, delete) */
.cmodal { position: fixed; inset: 0; z-index: 60; display: grid; place-items: center; padding: 16px; background: rgba(7, 5, 10, .66); }
.cmbox { position: relative; width: min(440px, 100%); max-height: calc(100vh - 32px); overflow-y: auto; background: #0b080d; border: 1px solid #2a1a24; border-radius: 18px; padding: 22px 20px 20px; display: grid; gap: 12px; box-shadow: 0 20px 60px rgba(0, 0, 0, .6); }
.cmbox h2 { margin: 0; font-size: 18px; padding-inline-end: 30px; }
.cmx { position: absolute; top: 12px; inset-inline-end: 12px; width: 30px; height: 30px; padding: 0; font: inherit; color: var(--muted); background: none; border: 1px solid var(--line2); border-radius: 50%; cursor: pointer; }
.cmquote { display: grid; gap: 6px; background: #0f0a12; border: 1px solid #2a1a24; border-radius: 12px; padding: 10px 12px; font-size: 13.5px; }
.cmquote p { margin: 0; color: #f0e8eb; overflow-wrap: anywhere; }
.cmform { display: grid; gap: 12px; }
.cmreasons { display: grid; gap: 4px; margin: 0; padding: 0; border: 0; }
.cmreasons legend { padding: 0 0 6px; color: #cbbcc3; font-size: 14px; }
.cmradio, .cmcheck { display: flex; align-items: center; gap: 10px; font-size: 14.5px; color: #f0e8eb; padding: 8px 10px; border: 1px solid #2a1a24; border-radius: 10px; cursor: pointer; }
.cmradio:has(input:checked) { border-color: rgba(255, 122, 26, .6); background: rgba(255, 122, 26, .08); }
.cmradio input, .cmcheck input { width: 18px; height: 18px; margin: 0; flex: 0 0 auto; accent-color: #ff7a1a; }
.cmcheck { border-style: dashed; }
.cmnote { width: 100%; background: #0a070c; border: 1px solid var(--line2); color: var(--text); border-radius: 10px; padding: 10px 12px; font: inherit; font-size: 14px; resize: vertical; }
.cmnote[hidden] { display: none; }
.cmrow { display: flex; gap: 10px; }
.cmbox .give { flex: 1; font: inherit; font-size: 15px; font-weight: 700; padding: 11px 16px; border-radius: 10px; background: linear-gradient(90deg, #ff3d6e, #ff7a1a); color: #fff; border: 0; cursor: pointer; }
.cmbox .give:hover { background: linear-gradient(90deg, #ff5683, #ff8d3a); }
.cmbox .give:disabled { opacity: .6; cursor: default; }
.cmbox .give.danger { background: #c2413a; }
.cmbox .give.danger:hover { background: #d9534b; }
.cmbox .ghost { font: inherit; font-size: 14px; padding: 10px 16px; border-radius: 10px; }
.cmmsg.bad { color: #ff8a80; }
.cmdone { margin: 0; color: #f0e8eb; line-height: 1.7; }
/* visitors without an account: the front of the page, then this invitation */
.joingate { max-width: 560px; margin: 26px auto 70px; text-align: center; display: grid; justify-items: center; gap: 10px; padding: 28px 22px; }
.joingate .joinicon { font-size: 30px; width: 60px; height: 60px; border-radius: 50%; display: grid; place-items: center; background: rgba(255, 122, 26, .14); border: 1px solid rgba(255, 122, 26, .35); }
.joingate h2 { margin: 4px 0 0; font-size: 20px; }
.joingate p { margin: 0; max-width: 420px; line-height: 1.8; }
.joinrow { display: flex; flex-wrap: wrap; gap: 10px; justify-content: center; margin-top: 6px; }
.joinbtn { display: inline-flex; align-items: center; justify-content: center; font-weight: 700; font-size: 15px; color: #fff; text-decoration: none; background: linear-gradient(90deg, #ff3d6e, #ff7a1a); border: 1px solid #ff7a1a; border-radius: 999px; padding: 10px 24px; }
.joinbtn:hover { background: linear-gradient(90deg, #ff5683, #ff8d3a); }
.joinbtn.ghost { background: transparent; color: #efe4e8; border-color: var(--line2); }
.goldpage .joinbtn:not(.ghost) { background: linear-gradient(100deg, #fff1b8, #ffd56b 45%, #c8952e); border-color: #ffd56b; color: #1a1205; }
/* signed out: a blurred placeholder instead of the bio, line and links (no real text in it) */
.pro .head .lockedinfo { display: grid; gap: 10px; align-content: center; filter: blur(5px); opacity: .55; pointer-events: none; user-select: none; min-width: 200px; }
.lockedinfo .lline { display: block; height: 12px; border-radius: 6px; background: linear-gradient(90deg, #2a1a24, #3a2430); }
.lockedinfo .ldots { display: flex; gap: 8px; margin-top: 4px; }
.lockedinfo .ldots span { width: 34px; height: 34px; border-radius: 50%; background: #2a1a24; }
@media (max-width: 979px) { .pro .head .lockedinfo { width: 80%; justify-items: center; } }
/* the «other amount» box keeps its column (typing never widens the boost box) */
.donate .presets { grid-template-columns: repeat(4, minmax(0, 1fr)); }
.donate .presets > * { min-width: 0; width: 100%; box-sizing: border-box; }
.drawer, .drawer .box.donate { min-width: 0; max-width: 100%; overflow-x: hidden; }
.donate .give { white-space: normal; line-height: 1.4; }
/* the gift tab's wallet picker: the same small pill chips as the boost tab (it is not inside .donate) */
.wpick { display: flex; flex-wrap: wrap; justify-content: center; align-items: center; gap: 6px; }
.wpick .wbtn { display: inline-flex; align-items: center; gap: 6px; font: inherit; font-size: 13px; color: var(--text); background: #0a070c; border: 1px solid var(--line2); border-radius: 999px; padding: 5px 10px; cursor: pointer; max-width: 100%; }
.wpick .wbtn img { width: 18px; height: 18px; border-radius: 4px; }
.wpick .wbtn span { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.wpick .wbtn:hover { border-color: rgba(255, 122, 26, .6); }
.wpick .wbtn.on { border-color: #ff7a1a; background: rgba(255, 122, 26, .16); }

/* ===== PepFan fire palette (owner approved 2026-10-08): fire for ordinary pages, metallic gold for legendary / verified ===== */
/* follow and message: outlined in orange (the mock), the filled fire gradient stays for the boost / send buttons */
.followbtn { background: transparent; color: #ffad42; border-color: rgba(255, 122, 26, .5); }
.followbtn:hover { background: rgba(255, 122, 26, .1); }
.msgbtn { color: #ffad42; border-color: rgba(255, 122, 26, .5); }
.msgbtn:hover { color: #ffc46e; border-color: rgba(255, 122, 26, .8); }
.post .kind, .lchip:hover, .licon:hover { color: #ffad42; }
.licon:hover, .lchip:hover { border-color: rgba(255, 122, 26, .5); }
.boostfab { box-shadow: 0 10px 30px rgba(0, 0, 0, .45), 0 0 22px rgba(255, 90, 40, .25); }
/* legendary / verified: metallic gold, no fire */
.goldpage .cover { background: linear-gradient(120deg, #2a1e08, #5a4310 40%, #1c1406); }
.pro .hero.gold .idn .dname { background: linear-gradient(90deg, #fff1b8, #ffd56b 45%, #c8952e); -webkit-background-clip: text; background-clip: text; color: transparent; -webkit-text-fill-color: transparent; }
.pro .hero.gold .head .avatar { border: 4px solid transparent; background: linear-gradient(#1a1206, #1a1206) padding-box, linear-gradient(135deg, #fff1b8, #ffd56b 35%, #b8862a 65%, #fff1b8) border-box; color: #ffd56b; box-shadow: 0 0 22px rgba(255, 213, 107, .35); }
.goldpage .box, .goldpage .post, .goldpage .sharecard { border-color: rgba(255, 213, 107, .3); }
.goldpage .box h2, .goldpage .post .meta .kind { color: #ffd56b; }
.goldpage .followbtn:not(.on) { background: transparent; color: #ffd56b; border-color: rgba(255, 213, 107, .6); }
.goldpage .followbtn:not(.on):hover { background: rgba(255, 213, 107, .1); }
.goldpage .msgbtn { color: #ffd56b; border-color: rgba(255, 213, 107, .6); }
.goldpage .boostfab { box-shadow: 0 10px 30px rgba(0, 0, 0, .45), 0 0 22px rgba(255, 213, 107, .25); }
.goldpage .licon:hover, .goldpage .lchip:hover { color: #ffd56b; border-color: rgba(255, 213, 107, .6); }
.topbox h2 { color: #ffc857; }
/* phones: the side column melts into the page (no sticky column riding over the posts while scrolling) */
@media (max-width: 979px) { .pro .side { display: contents; position: static; } }
/* no native play overlay on the animated cover */
video.covervid::-webkit-media-controls-start-playback-button { display: none !important; -webkit-appearance: none; }
video.covervid::-webkit-media-controls { display: none !important; }
/* ranks (2026-10-09): the gold ✓ (and a blue ✓ for a verified identity) side by side */
.voks { display: inline-flex; align-items: center; gap: 3px; vertical-align: middle; flex: 0 0 auto; }
/* ranks v2 (owner 2026-10-09): clear blue ✓ «موثق» by the name; 👑 أسطوري / 💎 VIP on the picture's top corner; a small
   gold ✓ «مميز» by the name.madar handle */
.vok.id, .nm .vok.id, .chead .vok.id { background: #1d9bf0; color: #fff; box-shadow: 0 0 0 2px rgba(29, 155, 240, .25); }
.pro .idn .dname .vok.id { width: 22px; height: 22px; font-size: 13.5px; }
.vok.own { width: 14px !important; height: 14px !important; font-size: 9px !important; margin-inline-start: 4px; vertical-align: -1px; }
.voks:empty { display: none; }
.avatar .rankb { position: absolute; top: 8px; right: 8px; z-index: 3; display: grid; place-items: center; width: 34px; height: 34px; border-radius: 50%; background: rgba(14, 9, 4, .85); box-shadow: 0 0 0 2px #ffd56b, 0 2px 8px rgba(0, 0, 0, .5); font-size: 19px; line-height: 1; cursor: help; }
@media (max-width: 640px) { .avatar .rankb { width: 28px; height: 28px; font-size: 15px; top: 6px; right: 6px; } }
/* rank badges are pictures (2026-10-09): the phoenix medal for أسطوري (has its own ring), the gold feather for VIP */
.avatar .rankb img, .pro .head .avatar .rankb img, .chead .avatar .rankb img { position: static; inset: auto; width: 100%; height: 100%; object-fit: contain; background: none; }
.avatar .rankb.legendary { background: none; box-shadow: 0 2px 10px rgba(0, 0, 0, .6); width: 50px; height: 50px; top: 6px; right: 6px; }
.pro .head .avatar .rankb.vip img, .avatar .rankb.vip img { width: 74%; height: 74%; }
@media (max-width: 640px) { .avatar .rankb.legendary { width: 40px; height: 40px; } }
/* ---------- header v3 (owner's design 2026-10-09): round picture over the cover's lower edge on the left; under it the
   name, ✓ and the rank (emblem + word); the buttons on the name's row at the right; then the bio and the links ---------- */
.pro .head.v3 { direction: ltr; display: grid; grid-template-columns: minmax(0, 1fr) auto; grid-template-areas: "ava ava" "idn acts" "bio bio" "links links"; align-items: center; justify-items: start; column-gap: 24px; row-gap: 10px; margin-top: -92px; padding: 0 28px; }
.pro .head.v3 .avwrap > .avatar { width: 172px; height: 172px; border-radius: 50%; font-size: 52px; }
.pro .head.v3 .idn { grid-area: idn; text-align: left; padding: 0; min-width: 0; }
html[dir] .pro .head.v3 .idn .dname { display: flex; align-items: center; flex-wrap: wrap; gap: 6px 12px; justify-content: flex-start; text-align: left; font-size: 34px; line-height: 1.2; }
.pro .head.v3 .idn .sub { justify-content: flex-start; }
.pro .head.v3 .acts { grid-area: acts; justify-self: end; direction: rtl; display: flex; flex-wrap: wrap; gap: 10px; justify-content: flex-start; }
.pro .head.v3 > .bio { grid-area: bio; margin: 4px 0 0; max-width: 720px; text-wrap: pretty; text-align: left !important; font-size: 15.5px; line-height: 1.8; color: #cbbcc3; }
.pro .head.v3 > .licons { grid-area: links; justify-content: flex-start; padding: 0; }
.rankchip { display: inline-flex; align-items: center; gap: 4px; font-size: 16px; font-weight: 700; line-height: 1; color: #ffd56b; -webkit-text-fill-color: currentColor; cursor: help; }
.rankchip img { width: 36px; height: 36px; object-fit: contain; }
.rankchip.vip img { width: 26px; height: 26px; }
/* the three buttons: outlined pills in the page colour (gold on a gold page) */
.pro .head.v3 .acts .followbtn, .pro .head.v3 .acts .msgbtn, .pro .head.v3 .acts .sharebtn.oncover { display: inline-flex; align-items: center; gap: 8px; font: inherit; font-size: 15px; font-weight: 700; padding: 9px 20px; border-radius: 14px; background: transparent; color: #ffad42; border: 1.5px solid rgba(255, 122, 26, .75); width: auto; height: auto; text-decoration: none; cursor: pointer; }
.pro .hero.gold .head.v3 .acts .followbtn, .pro .hero.gold .head.v3 .acts .msgbtn, .pro .hero.gold .head.v3 .acts .sharebtn.oncover { color: #ffd56b; border-color: rgba(255, 213, 107, .8); }
.pro .head.v3 .acts .followbtn.on { color: #cbbcc3; border-color: var(--line2); }
.pro .head.v3 .acts .followbtn:hover, .pro .head.v3 .acts .msgbtn:hover, .pro .head.v3 .acts .sharebtn.oncover:hover { background: rgba(255, 213, 107, .08); }
.pro .head.v3 .acts .sharewrap { position: relative; inset: auto; }
@media (max-width: 760px) {
  .pro .head.v3 { grid-template-columns: minmax(0, 1fr); grid-template-areas: "ava" "idn" "acts" "bio" "links"; margin-top: -64px; padding: 0 16px; row-gap: 8px; }
  .pro .head.v3 .avwrap > .avatar { width: 120px; height: 120px; font-size: 38px; }
  html[dir] .pro .head.v3 .idn .dname { font-size: 26px; }
  .pro .head.v3 .acts { justify-self: start; direction: ltr; }
  .rankchip img { width: 30px; height: 30px; }
  .pro .head.v3 .acts .followbtn, .pro .head.v3 .acts .msgbtn, .pro .head.v3 .acts .sharebtn.oncover { padding: 8px 14px; font-size: 14px; }
}
/* the rank emblem at the bottom of the round picture, half over its ring; the word appears on hover / tap (2026-10-09) */
.pro .head.v3 .avwrap { grid-area: ava; position: relative; padding-bottom: 14px; }
.rankemb { position: absolute; left: 50%; bottom: -14px; transform: translateX(-50%); z-index: 4; width: 62px; height: 62px; padding: 7px; border-radius: 50%; background: #0e0a0c; border: 2px solid #ffd56b; box-shadow: 0 4px 14px rgba(0, 0, 0, .6); cursor: pointer; display: grid; place-items: center; }
.rankemb img { width: 100%; height: 100%; object-fit: contain; display: block; }
.rankemb.vip img { width: 80%; height: 80%; }
.rankemb::after { content: attr(data-label); position: absolute; top: calc(100% + 6px); left: 50%; transform: translateX(-50%); white-space: nowrap; font-size: 13px; font-weight: 700; color: #1a1206; background: #ffd56b; border-radius: 8px; padding: 3px 10px; opacity: 0; pointer-events: none; transition: opacity .15s; }
.rankemb:hover::after, .rankemb:focus-visible::after, .rankemb.open::after { opacity: 1; }
@media (max-width: 760px) { .rankemb { width: 48px; height: 48px; padding: 5px; bottom: -10px; } .pro .head.v3 .avwrap { padding-bottom: 10px; } }
/* the owner's accounts: under the banner on the right, beside the picture, a little bigger (owner 2026-10-09) */
.pro .head.v3 { grid-template-areas: "ava links" "idn acts" "bio bio"; }
.pro .head.v3 > .licons { grid-area: links; justify-self: end; align-self: start; margin-top: 106px; direction: rtl; gap: 10px; }
.pro .head.v3 > .licons .licon { width: 46px; height: 46px; border-color: rgba(255, 213, 107, .35); }
.pro .head.v3 > .licons .licon svg { width: 21px; height: 21px; }
@media (max-width: 760px) {
  .pro .head.v3 { grid-template-columns: auto minmax(0, 1fr); grid-template-areas: "ava links" "idn idn" "acts acts" "bio bio"; }
  .pro .head.v3 { column-gap: 12px; }
  .pro .head.v3 > .licons { margin-top: 74px; gap: 5px; flex-wrap: wrap; justify-content: flex-end; }
  .pro .head.v3 > .licons .licon { width: 34px; height: 34px; }
  .pro .head.v3 > .licons .licon svg { width: 16px; height: 16px; }
}
/* 2026-10-09 refinements: a smaller, finer phoenix emblem; the owner's accounts sit half on the banner, half under it */
.rankemb { width: 46px; height: 46px; padding: 5px; bottom: -10px; border: 1.5px solid transparent; background: radial-gradient(circle at 50% 40%, #2a1a12, #0b0709 70%) padding-box, linear-gradient(135deg, #fff1b8, #ffd56b 40%, #a8741c 70%, #ffe39a) border-box; box-shadow: 0 3px 10px rgba(0, 0, 0, .55), 0 0 12px rgba(255, 196, 80, .18); }
.pro .head.v3 .avwrap { padding-bottom: 10px; }
.pro .head.v3 > .licons { margin-top: 69px; }
.pro .head.v3 > .licons .licon { background: rgba(10, 7, 12, .82); position: relative; z-index: 2; }
@media (max-width: 760px) {
  .rankemb { width: 38px; height: 38px; padding: 4px; bottom: -8px; }
  .pro .head.v3 > .licons { margin-top: 47px; }
}
/* 2026-10-10: the phoenix flies free — no round plate or ring, only a soft shadow so it reads on any picture */
.rankemb, .rankemb.legendary { width: 58px; height: 58px; padding: 0; border: 0; background: none; box-shadow: none; bottom: -16px; }
.rankemb img { filter: drop-shadow(0 2px 3px rgba(0, 0, 0, .85)) drop-shadow(0 0 8px rgba(255, 190, 70, .35)); }
.rankemb.vip { width: 44px; height: 44px; bottom: -10px; }
@media (max-width: 760px) { .rankemb, .rankemb.legendary { width: 46px; height: 46px; bottom: -12px; } .rankemb.vip { width: 36px; height: 36px; } }
/* 2026-10-10: mirrored — the picture on the right, the accounts on the left; share on the banner's left corner,
   «إدارة الصفحة» / «⋯» on its right corner */
.pro .head.v3 { direction: rtl; }
.pro .head.v3 .idn { text-align: right; }
html[dir] .pro .head.v3 .idn .dname { text-align: right; justify-content: flex-start; }
.pro .head.v3 > .bio { text-align: right !important; }
.pro .cover .sharewrap { top: 14px; left: 14px; right: auto; inset-inline: auto; left: 14px; }
.pro .cover .managebtn, .pro .cover .morewrap { left: auto; right: 14px; inset-inline-start: auto; inset-inline-end: auto; right: 14px; }
.pro .cover .morewrap { justify-items: start; }
@media (max-width: 760px) { .pro .head.v3 .acts { direction: rtl; } }
/* 2026-10-10: the name and its .madar handle centred under the picture (they share the picture's column) */
.pro .head.v3 { grid-template-columns: auto minmax(0, 1fr); grid-template-areas: "ava links" "idn acts" "bio bio"; }
.pro .head.v3 .avwrap { justify-self: center; }
.pro .head.v3 .idn { justify-self: center; text-align: center; }
html[dir] .pro .head.v3 .idn .dname { justify-content: center; text-align: center; }
.pro .head.v3 .idn .sub { justify-content: center; }
.pro .head.v3 > .licons, .pro .head.v3 .acts { justify-self: end; }
@media (max-width: 760px) {
  .pro .head.v3 { grid-template-columns: auto minmax(0, 1fr); grid-template-areas: "ava links" "idn ." "acts acts" "bio bio"; }
  .pro .head.v3 .acts { justify-self: start; }
  html[dir] .pro .head.v3 .idn .dname { font-size: 24px; }
}
@media (max-width: 760px) { .pro .head.v3 > .licons { gap: 4px; flex-wrap: nowrap; } .pro .head.v3 > .licons .licon { width: 30px; height: 30px; } .pro .head.v3 > .licons .licon svg { width: 15px; height: 15px; } }

/* a free page without a receiving wallet yet */
.nosupport { border-color: rgba(251, 191, 36, .35) !important; }
.nosupport h2 { margin: 0; font-size: 16px; }
.nosupport p { margin: 0; }

/* phones (2026-10-10): no live blur behind media (heavy on iPhone Safari), a dark tint instead */
@media (max-width: 760px) {
  .mstage .mbg { filter: brightness(.3) saturate(1.1); }
  .pro .head .lockedinfo { filter: none; opacity: .35; }
}

/* boost amounts (2026-10-10): the four boxes have the same size on iPhone too (Safari styles a text box its own way) */
.donate .preset, .donate input.preset.amt { height: 52px; line-height: 1; -webkit-appearance: none; appearance: none; margin: 0; display: flex; align-items: center; justify-content: center; }
.pro .donate .preset, .pro .donate input.preset.amt { height: 50px; }