/* Standalone single-prompt page (/prompts/p/<slug>) — shared by the pre-rendered
   pages and the dynamic fallback. Theme tokens come from the platform bundle. */
:root{ --ppm:#7c5cff; }
.pp-backbar{ position:sticky; top:0; z-index:30; display:flex; align-items:center; justify-content:space-between; gap:12px;
  padding:10px clamp(16px,5vw,40px); background:rgba(6,11,20,.82); -webkit-backdrop-filter:blur(10px); backdrop-filter:blur(10px);
  border-bottom:1px solid var(--border,rgba(255,255,255,.08)); }
.pp-back{ display:inline-flex; align-items:center; gap:7px; color:#fff; text-decoration:none; font-family:var(--fm,monospace); font-size:.86rem; font-weight:700;
  padding:7px 14px; border:1px solid var(--border,rgba(255,255,255,.12)); border-radius:100px; background:rgba(255,255,255,.03); transition:.2s; }
.pp-back:hover{ border-color:var(--lime,#c4ff47); color:var(--lime,#c4ff47); }
html[dir="rtl"] .pp-back svg{ transform:scaleX(-1); }
.pp-backbar-l{ display:inline-flex; align-items:center; gap:10px; min-width:0; }
/* favorite (shown by JS only when logged in) */
.pp-fav{ display:inline-flex; align-items:center; gap:7px; cursor:pointer; font-family:var(--fm,monospace); font-size:.82rem; font-weight:700;
  padding:7px 14px; border-radius:100px; background:rgba(255,255,255,.03); border:1px solid var(--border,rgba(255,255,255,.12)); color:var(--muted,#9aa4b2); transition:.2s; }
.pp-fav[hidden]{ display:none !important; }
.pp-fav svg{ width:15px; height:15px; fill:currentColor; flex:0 0 auto; }
.pp-fav:hover{ color:#fff; border-color:rgba(255,255,255,.28); }
.pp-fav.on{ color:#ff4d6d; border-color:rgba(255,77,109,.5); background:rgba(255,77,109,.12); }
/* desktop: the sidebar box carries share — keep the top bar clean (no duplicate) */
.pp-backbar-share{ display:none; gap:8px; flex-wrap:wrap; }

.pp-layout{ max-width:1180px; margin:0 auto; padding:26px clamp(16px,5vw,40px) 60px; display:grid; grid-template-columns:minmax(0,1fr) 300px; gap:34px; align-items:start; }
.pp-main{ min-width:0; }
.pp-bc{ font-family:var(--fm,monospace); font-size:.76rem; color:var(--muted,#9aa4b2); margin-bottom:14px; }
.pp-bc a{ color:var(--muted,#9aa4b2); text-decoration:none; } .pp-bc a:hover{ color:#fff; }
.pp-head{ display:flex; flex-direction:column; align-items:flex-start; gap:11px; padding-bottom:14px; margin-bottom:14px; border-bottom:1px solid var(--border,rgba(255,255,255,.08)); }
.pp-badge{ display:inline-flex; align-items:center; gap:7px; font-size:.74rem; font-weight:700; color:#fff; background:rgba(6,12,20,.72);
  border:1px solid rgba(255,255,255,.14); padding:6px 12px; border-radius:100px; }
.pp-badge .pp-logo{ width:15px; height:15px; object-fit:contain; background:#fff; border-radius:3px; padding:1px; }
h1.pp-title{ font-family:var(--fh,sans-serif); font-size:clamp(1.6rem,4vw,2.3rem); color:#fff; margin:0; line-height:1.2; }
.pp-stats{ display:flex; gap:16px; flex-wrap:wrap; font-family:var(--fm,monospace); font-size:.8rem; color:var(--muted,#9aa4b2); margin-bottom:20px; }
.pp-free{ color:var(--lime,#c4ff47); font-weight:800; }
.pp-media{ position:relative; border-radius:18px; overflow:hidden; background:#0b1220; border:1px solid var(--border,rgba(255,255,255,.08)); margin-bottom:20px; }
.pp-media img,.pp-media video{ width:100%; height:auto; display:block; max-height:70vh; object-fit:contain; }
/* Mobile: the save-favorite button is relocated here (off the crowded top bar) as a
   compact circular badge over the image — see the relocation script in auth-state.js. */
.pp-fav.pp-fav-on-media{ position:absolute; inset-block-start:10px; inset-inline-end:10px; z-index:3; width:38px; height:38px; padding:0;
  border-radius:50%; justify-content:center; background:rgba(6,11,20,.65); -webkit-backdrop-filter:blur(6px); backdrop-filter:blur(6px); }
.pp-fav.pp-fav-on-media span{ display:none; }
.pp-fav.pp-fav-on-media svg{ width:17px; height:17px; }
.pp-ph{ aspect-ratio:16/10; display:flex; align-items:center; justify-content:center; color:var(--muted,#9aa4b2); font-family:var(--fh,sans-serif); font-size:1.4rem; }
.pp-desc{ color:#cbd5e1; line-height:1.7; font-size:1.02rem; margin-bottom:14px; }
.pp-tags{ display:flex; gap:7px; flex-wrap:wrap; margin-bottom:20px; }
.pp-tag{ font-size:.72rem; color:var(--muted,#9aa4b2); background:rgba(255,255,255,.04); border:1px solid var(--border,rgba(255,255,255,.08)); padding:3px 11px; border-radius:100px; }
.pp-prompt{ border:1px solid var(--border,rgba(255,255,255,.08)); border-radius:14px; overflow:hidden; margin-bottom:26px; }
.pp-prompt-h{ display:flex; align-items:center; justify-content:space-between; padding:11px 14px; background:rgba(255,255,255,.03); font-family:var(--fm,monospace); font-size:.78rem; color:var(--muted,#9aa4b2); }
#pp-copy{ background:var(--lime,#c4ff47); color:#08101a; border:0; border-radius:8px; padding:6px 14px; font-weight:700; cursor:pointer; font-family:var(--fm,monospace); }
.pp-prompt pre{ margin:0; padding:16px; font-family:'Space Grotesk',monospace; font-size:.9rem; line-height:1.7; color:#e2e8f0; white-space:pre-wrap; word-break:break-word; }
.pp-prompt pre.blur{ filter:blur(4px); -webkit-user-select:none; user-select:none; }
.pp-get{ display:block; text-align:center; padding:13px; background:linear-gradient(90deg,#ffb37e,#ff8f6b); color:#3a1d10; font-weight:800; text-decoration:none; }
/* how-to-use */
.pp-usage{ border:1px solid var(--border,rgba(255,255,255,.08)); border-radius:16px; padding:20px 22px; margin-bottom:26px; background:rgba(255,255,255,.015); }
.pp-usage h2{ font-family:var(--fh,sans-serif); font-size:1.15rem; color:#fff; margin:0 0 14px; }
.pp-usage ol{ margin:0; padding-inline-start:20px; display:flex; flex-direction:column; gap:9px; }
.pp-usage li{ color:#cbd5e1; line-height:1.6; font-size:.94rem; }
.pp-usage code{ background:rgba(255,255,255,.08); padding:1px 6px; border-radius:5px; font-size:.85em; }
.pp-usage-tip{ margin:14px 0 0; padding-top:12px; border-top:1px dashed var(--border,rgba(255,255,255,.1)); font-size:.86rem; color:var(--muted,#9aa4b2); }
.pp-cta{ display:inline-flex; align-items:center; gap:8px; padding:13px 28px; border-radius:100px; background:var(--lime,#c4ff47); color:#08101a; font-weight:800; text-decoration:none; margin-bottom:30px; }
/* related — framed */
.pp-related-frame{ border:1px solid var(--border,rgba(255,255,255,.1)); border-radius:18px; padding:22px; background:rgba(255,255,255,.015); }
.pp-related-frame h2{ font-family:var(--fh,sans-serif); font-size:1.2rem; color:#fff; margin:0 0 16px; }
.pp-rel-grid{ display:grid; grid-template-columns:repeat(auto-fill,minmax(210px,1fr)); gap:12px; }
.pp-rel{ display:block; padding:14px; border:1px solid var(--border,rgba(255,255,255,.08)); border-radius:12px; background:rgba(255,255,255,.02); color:#e2e8f0; text-decoration:none; transition:.2s; }
.pp-rel:hover{ border-color:var(--lime,#c4ff47); transform:translateY(-2px); }
.pp-rel-m{ display:inline-flex; align-items:center; gap:6px; font-size:.66rem; font-weight:800; color:#fff; margin-bottom:8px;
  background:rgba(255,255,255,.06); border:1px solid var(--border,rgba(255,255,255,.1)); padding-block:3px; padding-inline:4px 10px; border-radius:100px; }
.pp-rel-m img{ width:16px; height:16px; object-fit:contain; background:#fff; border-radius:4px; padding:1px; flex:0 0 auto; }
.pp-rel-m .pp-rel-dot{ width:11px; height:11px; border-radius:50%; background:var(--c,#8b5cf6); flex:0 0 auto; margin-inline-start:2px; }
.pp-rel-t{ display:block; font-size:.9rem; line-height:1.4; }
/* share icons — uniform white glyphs on brand-colour tiles (identical size + shape) */
.pp-sh{ width:38px; height:38px; box-sizing:border-box; flex:0 0 auto; display:inline-flex; align-items:center; justify-content:center;
  border-radius:10px; text-decoration:none; transition:transform .18s ease, filter .18s ease; }
.pp-sh svg{ width:19px; height:19px; fill:#fff; display:block; }
.pp-sh:hover{ transform:translateY(-3px); filter:brightness(1.08); }
.pp-sh-x{ background:#000; border:1px solid rgba(255,255,255,.22); }
.pp-sh-whatsapp{ background:#25D366; }
.pp-sh-facebook{ background:#1877F2; }
.pp-sh-linkedin{ background:#0A66C2; }
.pp-sh-telegram{ background:#229ED9; }
/* about-the-tool block */
.pp-tool{ display:flex; gap:14px; align-items:flex-start; border:1px solid var(--border,rgba(255,255,255,.08)); border-radius:16px;
  padding:18px 20px; margin-bottom:26px; background:rgba(255,255,255,.015); }
.pp-tool-ic{ flex:0 0 auto; width:46px; height:46px; border-radius:12px; background:#fff; display:flex; align-items:center; justify-content:center; padding:8px; box-sizing:border-box; }
.pp-tool-ic img{ width:100%; height:100%; object-fit:contain; }
.pp-tool-ic.noimg{ background:var(--c,#8b5cf6); color:#fff; font-weight:800; font-family:var(--fm,monospace); }
.pp-tool-b{ min-width:0; }
.pp-tool-b h2{ font-family:var(--fh,sans-serif); font-size:1.1rem; color:#fff; margin:0 0 6px; }
.pp-tool-b p{ color:#cbd5e1; line-height:1.65; font-size:.92rem; margin:0; }
/* Instagram follow (sidebar) */
.pp-side-ig{ text-align:center; background:linear-gradient(135deg,rgba(214,41,118,.14),rgba(150,47,191,.14)); border-color:rgba(214,41,118,.32); }
.pp-ig-ic{ width:52px; height:52px; margin:0 auto 10px; border-radius:15px; background:linear-gradient(135deg,#feda75,#fa7e1e 30%,#d62976 60%,#962fbf); display:flex; align-items:center; justify-content:center; }
.pp-ig-ic svg{ width:28px; height:28px; fill:#fff; }
.pp-side-ig h3{ justify-content:center; margin-bottom:4px; }
.pp-ig-handle{ color:var(--muted,#9aa4b2); font-family:var(--fm,monospace); font-size:.82rem; margin:0 0 13px; }
.pp-ig-btn{ display:inline-flex; align-items:center; gap:7px; padding:9px 22px; border-radius:100px; font-weight:800; font-size:.85rem; text-decoration:none;
  color:#fff; background:linear-gradient(135deg,#d62976,#962fbf); transition:transform .18s ease; }
.pp-ig-btn:hover{ transform:translateY(-2px); }
/* sidebar */
.pp-side{ position:sticky; top:64px; display:flex; flex-direction:column; gap:16px; }
.pp-side-box{ border:1px solid var(--border,rgba(255,255,255,.1)); border-radius:16px; padding:16px 18px; background:rgba(255,255,255,.02); }
.pp-side-box h3{ display:flex; align-items:center; gap:7px; font-family:var(--fh,sans-serif); font-size:.98rem; color:#fff; margin:0 0 13px; }
.pp-side-box h3 svg{ color:var(--lime,#c4ff47); }
.pp-side-shares{ display:flex; gap:8px; flex-wrap:wrap; }
.pp-bestlist{ display:flex; flex-direction:column; gap:4px; }
.pp-bestrow{ display:flex; align-items:center; gap:9px; padding:9px 8px; border-radius:10px; text-decoration:none; transition:.15s; }
.pp-bestrow:hover{ background:rgba(255,255,255,.04); }
.pp-bestrow-m{ flex:0 0 auto; width:30px; height:26px; display:inline-flex; align-items:center; justify-content:center; font-size:.62rem; font-weight:800; color:#fff; background:var(--c,#8b5cf6); border-radius:7px; }
.pp-bestrow-t{ font-size:.82rem; line-height:1.35; color:#cbd5e1; display:-webkit-box; -webkit-line-clamp:2; -webkit-box-orient:vertical; overflow:hidden; }
.pp-bestrow:hover .pp-bestrow-t{ color:#fff; }
/* responsive */
@media (max-width:960px){
  .pp-layout{ grid-template-columns:1fr; gap:24px; }
  .pp-side{ position:static; }
  /* on phones the top back-bar carries share; the sidebar share box is redundant */
  .pp-backbar-share{ display:flex; }
  .pp-side-share{ display:none; }
}
@media (max-width:560px){
  .pp-backbar{ padding:9px 14px; gap:8px; flex-wrap:nowrap; }
  .pp-backbar-l{ gap:7px; }
  /* icon-only back link + favorite on mobile to keep the top bar on one line —
     the favorite button itself is also relocated onto the image (see .pp-fav-on-media),
     so this only matters for the brief moment before that JS relocation runs. */
  .pp-back span{ display:none; }
  .pp-fav{ padding:7px 9px; }
  .pp-fav span{ display:none; }
  /* compact, uniform, single-line share row (never wraps); every icon is the same
     box + glyph size, WhatsApp included — nothing reads bigger than its neighbors. */
  .pp-backbar-share{ flex-wrap:nowrap; gap:6px; }
  .pp-backbar-share .pp-sh{ width:28px; height:28px; border-radius:8px; }
  .pp-backbar-share .pp-sh svg{ width:14px; height:14px; }
  .pp-layout{ padding:18px 14px 44px; }
  h1.pp-title{ font-size:1.5rem; }
  .pp-rel-grid{ grid-template-columns:1fr; }
}
@media (max-width:360px){
  .pp-back{ padding:6px 10px; font-size:.78rem; }
  .pp-backbar-share{ gap:5px; }
  .pp-backbar-share .pp-sh{ width:25px; height:25px; }
  .pp-backbar-share .pp-sh svg{ width:13px; height:13px; }
}

/* AR pages: note that the prompt code itself stays in English (best for AI models) */
.pp-engnote{ margin:0; padding:9px 14px; font-size:.76rem; line-height:1.5; color:var(--muted,#9aa4b2);
  background:rgba(255,255,255,.03); border-top:1px dashed var(--border,rgba(255,255,255,.1)); }
/* Only force LTR for prompts explicitly marked ltr (English code). Arabic prompts on the
   AR page carry dir="rtl" and read right-to-left; the bidi algorithm keeps inline English tokens LTR. */
html[dir="rtl"] .pp-prompt pre[dir="ltr"]{ direction:ltr; text-align:left; }
html[dir="rtl"] .pp-prompt pre[dir="rtl"]{ direction:rtl; text-align:right; }

/* ── Promo section under the prompt (Library + Services) — subtle pro animation ── */
.pp-promo{ max-width:1180px; margin:8px auto 0; padding:0 clamp(16px,5vw,40px) 10px; animation:ppPromoIn .7s ease both; }
.pp-promo-head{ text-align:center; margin-bottom:18px; }
.pp-promo-eyebrow{ font-family:var(--fm,monospace); font-size:.7rem; letter-spacing:.14em; text-transform:uppercase; color:var(--lime,#c4ff47); }
.pp-promo-head h2{ font-family:var(--fh,sans-serif); font-size:clamp(1.2rem,2.6vw,1.7rem); color:#fff; margin:6px 0 0; }
.pp-promo-grid{ display:grid; grid-template-columns:1fr 1fr; gap:16px; }
.pp-promo-card{ --glow:rgba(196,255,71,.55); position:relative; overflow:hidden; display:flex; flex-direction:column; gap:9px;
  padding:24px; border-radius:18px; text-decoration:none; border:1px solid var(--border,rgba(255,255,255,.1));
  background:linear-gradient(135deg,rgba(255,255,255,.045),rgba(255,255,255,.012));
  transition:transform .3s ease, border-color .3s ease, box-shadow .3s ease; }
.pp-promo-card::before{ content:""; position:absolute; inset:0; border-radius:inherit; padding:1px; pointer-events:none;
  background:linear-gradient(120deg,transparent 20%,var(--glow),transparent 80%); background-size:220% 100%;
  -webkit-mask:linear-gradient(#000 0 0) content-box,linear-gradient(#000 0 0); -webkit-mask-composite:xor; mask-composite:exclude;
  animation:ppShine 4.5s linear infinite; opacity:.55; }
.pp-promo-svc{ --glow:rgba(124,140,255,.55); }
.pp-promo-card:hover{ transform:translateY(-4px); border-color:var(--glow); box-shadow:0 18px 44px rgba(0,0,0,.42); }
.pp-promo-ic{ font-size:1.9rem; line-height:1; }
.pp-promo-card h3{ font-family:var(--fh,sans-serif); color:#fff; font-size:1.12rem; margin:0; }
.pp-promo-card p{ color:var(--muted,#9aa4b2); font-size:.9rem; line-height:1.65; margin:0; flex:1; }
.pp-promo-cta{ display:inline-flex; align-items:center; gap:6px; color:var(--lime,#c4ff47); font-weight:800; font-size:.86rem; font-family:var(--fm,monospace); }
.pp-promo-svc .pp-promo-cta{ color:#a9b6ff; }
@keyframes ppShine{ 0%{ background-position:220% 0; } 100%{ background-position:-220% 0; } }
@keyframes ppPromoIn{ from{ opacity:0; transform:translateY(16px); } to{ opacity:1; transform:none; } }
@media (max-width:560px){ .pp-promo-grid{ grid-template-columns:1fr; } }
@media (prefers-reduced-motion: reduce){ .pp-promo, .pp-promo-card::before{ animation:none; } }

/* ── Light site-theme: this single-prompt page is a dark reading experience. Keep the
   main content dark (its title/body/prompt box are light-on-dark) so nothing lands as
   white/invisible text on the light background. Header/footer still follow the theme. */
html[data-color="light"] main{
  background:#060b14;
  --text:#f6f2e8; --muted:#9aa4b2; --border:rgba(255,255,255,.08); --line:rgba(255,255,255,.08);
}