/* ============================================================================
   Portfolio — standalone public personal website (/u/<username>).
   Self-contained (only stylesheet on the public page). 7 templates via
   body.pf-<theme>; accent via --pf-accent; optional AI background via .pf-bg.
   ========================================================================== */
:root { --pf-accent: #2563eb; --pf-accent2: #7c3aed; }
* { box-sizing: border-box; }
html { scroll-behavior: smooth; }
body.pf {
  margin: 0; min-height: 100vh;
  font-family: "IBM Plex Sans Arabic", "Cairo", system-ui, sans-serif;
  line-height: 1.75; -webkit-font-smoothing: antialiased; text-rendering: optimizeLegibility;
}

/* ---- Template palettes ---- */
body.pf-aurora   { --pf-bg:#070b16; --pf-bg2:#0e1730; --pf-fg:#eef2fb; --pf-mut:#9fb0d0; --pf-card:rgba(255,255,255,.045); --pf-bd:rgba(255,255,255,.09); --pf-glow:.55; --pf-accent2:#8b5cf6; }
body.pf-neon     { --pf-bg:#05060a; --pf-bg2:#0a0e1a; --pf-fg:#eaf6ff; --pf-mut:#86a0bf; --pf-card:rgba(120,200,255,.05); --pf-bd:rgba(120,200,255,.15); --pf-glow:.6; --pf-accent2:#22d3ee; }
body.pf-midnight { --pf-bg:#08080b; --pf-bg2:#15151b; --pf-fg:#f4f4f7; --pf-mut:#9d9dab; --pf-card:rgba(255,255,255,.035); --pf-bd:rgba(255,255,255,.07); --pf-glow:.4; --pf-accent2:#64748b; }
body.pf-elegant  { --pf-bg:#0e0c0a; --pf-bg2:#1a1612; --pf-fg:#f5efe6; --pf-mut:#c2b39c; --pf-card:rgba(255,240,220,.05); --pf-bd:rgba(220,190,150,.17); --pf-glow:.4; --pf-accent2:#caa24a; }
body.pf-classic  { --pf-bg:#f5f1ea; --pf-bg2:#fffdf9; --pf-fg:#211d18; --pf-mut:#6b6256; --pf-card:#fffdf9; --pf-bd:#e4dccd; --pf-glow:.16; --pf-accent2:#9a7b3f; }
body.pf-bold     { --pf-bg:#0c0718; --pf-bg2:#1c0e3a; --pf-fg:#fdf0ff; --pf-mut:#cbabe8; --pf-card:rgba(255,255,255,.06); --pf-bd:rgba(255,255,255,.13); --pf-glow:.7; --pf-accent2:#ec4899; }
body.pf-minimal  { --pf-bg:#f4f6fb; --pf-bg2:#ffffff; --pf-fg:#111a28; --pf-mut:#5a6b81; --pf-card:#ffffff; --pf-bd:#e7ebf3; --pf-glow:.20; --pf-accent2:#2563eb; }
body.pf { background: var(--pf-bg); color: var(--pf-fg); }

/* Preview bar */
.pf-preview-bar { background: linear-gradient(90deg,#b45309,#d97706); color:#fff; text-align:center;
  padding:10px 14px; font-size:.92rem; position:sticky; top:0; z-index:30; }
.pf-preview-bar a { color:#fff; font-weight:700; text-decoration:underline; }

/* ============================== HERO (cinematic) ========================== */
.pf-hero { position: relative; min-height: 100vh; display: flex; align-items: center; justify-content: center;
  padding: 90px 20px 70px; text-align: center; overflow: hidden; }

/* AI background image — fills the screen cinematically with a slow Ken-Burns zoom.
   position/z-index are !important so an injected custom-CSS layer can never push
   the image behind the page or cover it (the cinematic image stays the star). */
.pf-bg { position: absolute !important; inset: 0; z-index: 0 !important; background-size: cover; background-position: center;
  filter: saturate(1.1) contrast(1.04); animation: pf-bgzoom 26s ease-in-out infinite alternate; }
@keyframes pf-bgzoom { from { transform: scale(1.02); } to { transform: scale(1.12); } }

.pf-hero::before {            /* gradient wash (full bg when no image; scrim when image) */
  content: ""; position: absolute; inset: 0; z-index: 1; pointer-events: none;
  background:
    radial-gradient(820px 520px at 50% -8%, color-mix(in srgb, var(--pf-accent) calc(var(--pf-glow)*100%), transparent), transparent 62%),
    radial-gradient(680px 420px at 88% 12%, color-mix(in srgb, var(--pf-accent2) 30%, transparent), transparent 58%),
    radial-gradient(620px 420px at 10% 16%, color-mix(in srgb, var(--pf-accent) 18%, transparent), transparent 60%),
    linear-gradient(180deg, var(--pf-bg2), var(--pf-bg) 80%);
}
body.pf-classic .pf-hero::before, body.pf-minimal .pf-hero::before {
  background:
    radial-gradient(820px 520px at 50% -10%, color-mix(in srgb, var(--pf-accent) 16%, transparent), transparent 62%),
    radial-gradient(620px 380px at 88% 10%, color-mix(in srgb, var(--pf-accent2) 12%, transparent), transparent 60%),
    linear-gradient(180deg, var(--pf-bg2), var(--pf-bg) 82%);
}
/* Cinematic scrim when an AI image is present: a film-poster vignette + an
   accent wash up top + a strong fade into the page at the bottom. */
.pf-hero.has-bg::before {
  background:
    linear-gradient(rgba(9,11,26,.46), rgba(9,11,26,.46)),   /* uniform veil — text survives ANY image */
    linear-gradient(color-mix(in srgb, var(--pf-accent) 16%, transparent),
                    color-mix(in srgb, var(--pf-accent) 16%, transparent)),  /* accent tint: your colour shows THROUGH the photo */
    radial-gradient(120% 85% at 50% 38%, transparent 34%, rgba(0,0,0,.5) 100%),
    radial-gradient(800px 520px at 50% 6%, color-mix(in srgb, var(--pf-accent) 55%, transparent), transparent 58%),
    linear-gradient(180deg, rgba(0,0,0,.5) 0%, rgba(0,0,0,.18) 32%, color-mix(in srgb, var(--pf-bg) 40%, transparent) 72%, var(--pf-bg) 100%);
}
/* glass identity panel — guaranteed readable and instantly "designed" */
.pf-hero.has-bg .pf-hero-inner {
  background: rgba(10,12,28,.34);
  backdrop-filter: blur(16px) saturate(1.2);
  -webkit-backdrop-filter: blur(16px) saturate(1.2);
  border: 1px solid rgba(255,255,255,.14);
  border-radius: 28px;
  padding: 44px 48px;
  box-shadow: 0 30px 80px rgba(0,0,0,.35);
}
body.pf-classic .pf-hero.has-bg .pf-hero-inner, body.pf-minimal .pf-hero.has-bg .pf-hero-inner,
body.pf-mono .pf-hero.has-bg .pf-hero-inner, body.pf-wave .pf-hero.has-bg .pf-hero-inner {
  background: rgba(255,255,255,.66);
  border-color: rgba(0,0,0,.08);
}
body.pf-classic .pf-hero.has-bg::before, body.pf-minimal .pf-hero.has-bg::before,
body.pf-mono .pf-hero.has-bg::before, body.pf-wave .pf-hero.has-bg::before {
  background:
    radial-gradient(120% 85% at 50% 40%, transparent 38%, color-mix(in srgb, var(--pf-bg) 45%, transparent) 100%),
    linear-gradient(180deg, color-mix(in srgb, var(--pf-bg) 30%, transparent) 0%, color-mix(in srgb, var(--pf-bg) 55%, transparent) 60%, var(--pf-bg) 100%);
}
.pf-hero.has-bg .pf-name { text-shadow: 0 4px 30px rgba(0,0,0,.65), 0 1px 4px rgba(0,0,0,.5); }
.pf-hero.has-bg .pf-tagline { text-shadow: 0 2px 16px rgba(0,0,0,.6); }
body.pf-classic .pf-hero.has-bg .pf-name, body.pf-minimal .pf-hero.has-bg .pf-name,
body.pf-mono .pf-hero.has-bg .pf-name, body.pf-wave .pf-hero.has-bg .pf-name { text-shadow: 0 2px 22px rgba(255,255,255,.6); }

.pf-hero::after {            /* texture: dots (most), grid (neon) */
  content: ""; position: absolute; inset: 0; z-index: 1; pointer-events: none; opacity: .5;
  background-image: radial-gradient(currentColor .5px, transparent .5px); background-size: 22px 22px; color: var(--pf-bd);
  -webkit-mask-image: radial-gradient(70% 60% at 50% 30%, #000, transparent 75%);
          mask-image: radial-gradient(70% 60% at 50% 30%, #000, transparent 75%);
}
body.pf-neon .pf-hero::after {
  opacity: .7;
  background-image: linear-gradient(var(--pf-bd) 1px, transparent 1px), linear-gradient(90deg, var(--pf-bd) 1px, transparent 1px);
  background-size: 44px 44px;
}
body.pf-bold .pf-hero::after { display: none; }
.pf-hero.has-bg::after { display: none; }

.pf-hero-inner { position: relative; z-index: 2; max-width: 820px; margin: 0 auto; animation: pf-rise 1s cubic-bezier(.2,.7,.2,1) both; }
@keyframes pf-rise { from { opacity: 0; transform: translateY(28px); } to { opacity: 1; transform: none; } }

.pf-avatar { width: 124px; height: 124px; margin: 0 auto 26px; border-radius: 50%; position: relative;
  overflow: hidden; background: var(--pf-bg2);
  border: 3px solid color-mix(in srgb, var(--pf-accent) 80%, #fff);
  box-shadow: 0 0 0 7px color-mix(in srgb, var(--pf-accent) 14%, transparent),
              0 24px 64px -16px color-mix(in srgb, var(--pf-accent) 70%, transparent);
  animation: pf-pop 1.1s cubic-bezier(.2,.8,.2,1) both; }
@keyframes pf-pop { from { opacity: 0; transform: scale(.82); } to { opacity: 1; transform: none; } }
.pf-avatar img { width: 100%; height: 100%; object-fit: cover; display: block; }
.pf-avatar-fb { display: flex; align-items: center; justify-content: center; width: 100%; height: 100%;
  font-size: 2.7rem; font-weight: 800; color: var(--pf-accent); font-family: "Cairo", sans-serif; }
.pf-name { margin: 0 0 14px; font-family: "Cairo", sans-serif; font-weight: 800;
  font-size: clamp(2.6rem, 9vw, 5.4rem); line-height: 1.05; letter-spacing: -1.5px; }
.pf-tagline { margin: 0 auto; max-width: 580px; font-size: clamp(1.1rem, 3vw, 1.5rem); color: var(--pf-mut);
  font-weight: 500; letter-spacing: .2px; }

/* Scroll cue at the bottom of the cinematic hero */
.pf-scroll { position: absolute; inset-block-end: 26px; inset-inline-start: 50%; transform: translateX(50%);
  z-index: 2; width: 24px; height: 38px; border: 2px solid color-mix(in srgb, var(--pf-fg) 55%, transparent);
  border-radius: 14px; opacity: .7; }
.pf-scroll::before { content: ""; position: absolute; inset-inline-start: 50%; top: 7px; transform: translateX(-50%);
  width: 4px; height: 8px; border-radius: 3px; background: var(--pf-accent); animation: pf-scroll 1.6s ease-in-out infinite; }
@keyframes pf-scroll { 0%{ opacity:0; transform: translate(-50%, 0); } 40%{ opacity:1; } 80%,100%{ opacity:0; transform: translate(-50%, 13px); } }
.pf-meta { display: flex; gap: 10px; justify-content: center; flex-wrap: wrap; margin-top: 20px; }
.pf-chip-i { font-size: .88rem; font-weight: 600; color: var(--pf-fg); background: var(--pf-card);
  border: 1px solid var(--pf-bd); border-radius: 999px; padding: 6px 15px; backdrop-filter: blur(6px); }
.pf-links { display: flex; gap: 11px; justify-content: center; margin-top: 24px; }
.pf-link { width: 46px; height: 46px; border-radius: 14px; display: inline-flex; align-items: center; justify-content: center;
  text-decoration: none; font-weight: 800; font-size: 1rem; color: var(--pf-fg);
  background: var(--pf-card); border: 1px solid var(--pf-bd); backdrop-filter: blur(6px);
  transition: transform .18s ease, border-color .18s ease, box-shadow .18s ease; }
.pf-link:hover { transform: translateY(-4px); border-color: var(--pf-accent);
  box-shadow: 0 12px 26px -10px color-mix(in srgb, var(--pf-accent) 70%, transparent); }
.pf-cta-row { display: flex; gap: 12px; justify-content: center; flex-wrap: wrap; margin-top: 30px; }
.pf-cta { display: inline-flex; align-items: center; gap: 8px; padding: 13px 30px; border-radius: 14px; font-weight: 700;
  text-decoration: none; color: #fff;
  background: linear-gradient(135deg, var(--pf-accent), var(--pf-accent2));
  box-shadow: 0 16px 38px -12px color-mix(in srgb, var(--pf-accent) 80%, transparent);
  transition: transform .18s ease, box-shadow .18s ease; }
.pf-cta:hover { transform: translateY(-3px); box-shadow: 0 22px 48px -12px color-mix(in srgb, var(--pf-accent) 85%, transparent); }
.pf-cta-soft { background: var(--pf-card); color: var(--pf-fg); border: 1px solid var(--pf-bd); box-shadow: none; backdrop-filter: blur(6px); }
.pf-cta-soft:hover { border-color: var(--pf-accent); box-shadow: none; }

/* ============================== SECTIONS ================================== */
.pf-main { max-width: 1060px; margin: 0 auto; padding: clamp(14px,3vw,26px) 22px 56px; position: relative; z-index: 3; }
.pf-sec { position: relative; margin-bottom: 26px; padding: clamp(26px, 4vw, 42px);
  background: var(--pf-card); border: 1px solid var(--pf-bd); border-radius: 26px; backdrop-filter: blur(14px);
  box-shadow: 0 1px 0 color-mix(in srgb, #fff 7%, transparent) inset, 0 32px 70px -42px #000;
  animation: pf-rise .8s ease both; }
.pf-sec::before { content: ""; position: absolute; inset-inline-start: clamp(26px,4vw,42px); top: 0;
  width: 56px; height: 3px; border-radius: 0 0 4px 4px; background: linear-gradient(90deg, var(--pf-accent), var(--pf-accent2)); }
body.pf-classic .pf-sec, body.pf-minimal .pf-sec, body.pf-mono .pf-sec { box-shadow: 0 18px 50px -32px rgba(20,40,80,.4); }
.pf-h2 { font-family: "Cairo", sans-serif; font-size: clamp(1.4rem, 3vw, 1.85rem); font-weight: 800; margin: 0 0 22px; display: flex; align-items: center; gap: 12px; }
.pf-h2::before { content: ""; width: 7px; height: 1.05em; border-radius: 4px;
  background: linear-gradient(var(--pf-accent), var(--pf-accent2)); }
body.pf-classic .pf-h2, body.pf-elegant .pf-h2 { letter-spacing: .5px; }
.pf-about { color: var(--pf-fg); font-size: clamp(1.1rem, 2.3vw, 1.32rem); line-height: 1.9; margin: 0; opacity: .96; max-width: 760px; }

/* Skills */
.pf-skills { display: flex; flex-wrap: wrap; gap: 12px; }
.pf-skill { padding: 11px 20px; border-radius: 14px; font-size: 1rem; font-weight: 600; color: var(--pf-fg);
  background: color-mix(in srgb, var(--pf-accent) 14%, transparent);
  border: 1px solid color-mix(in srgb, var(--pf-accent) 36%, transparent);
  transition: transform .15s ease, background .15s ease, box-shadow .15s ease; }
.pf-skill:hover { transform: translateY(-3px); background: color-mix(in srgb, var(--pf-accent) 24%, transparent);
  box-shadow: 0 10px 22px -12px color-mix(in srgb, var(--pf-accent) 70%, transparent); }
body.pf-classic .pf-skill, body.pf-minimal .pf-skill { background: color-mix(in srgb, var(--pf-accent) 9%, #fff); }

/* Experience timeline */
.pf-timeline { position: relative; padding-inline-start: 26px; }
.pf-timeline::before { content: ""; position: absolute; inset-inline-start: 6px; top: 8px; bottom: 8px; width: 2px;
  background: linear-gradient(var(--pf-accent), transparent); opacity: .5; }
.pf-exp { position: relative; padding-bottom: 26px; }
.pf-exp:last-child { padding-bottom: 0; }
.pf-exp-dot { position: absolute; inset-inline-start: -26px; top: 7px; width: 13px; height: 13px; border-radius: 50%;
  background: var(--pf-accent); box-shadow: 0 0 0 4px color-mix(in srgb, var(--pf-accent) 22%, transparent); }
.pf-exp-title { margin: 0 0 4px; font-size: 1.1rem; font-weight: 700; }
.pf-exp-co { color: var(--pf-mut); font-weight: 600; font-size: .97rem; }
.pf-exp-when { color: var(--pf-mut); font-size: .86rem; margin-bottom: 7px; }
.pf-exp-desc { margin: 0; color: var(--pf-fg); font-size: .99rem; opacity: .9; }

/* Projects */
.pf-projects { display: grid; grid-template-columns: repeat(auto-fill, minmax(290px, 1fr)); gap: 22px; }
.pf-proj { display: block; text-decoration: none; color: var(--pf-fg);
  background: color-mix(in srgb, var(--pf-fg) 4%, transparent); border: 1px solid var(--pf-bd);
  border-radius: 18px; overflow: hidden; transition: transform .18s ease, border-color .18s ease, box-shadow .18s ease; }
.pf-proj:hover { transform: translateY(-5px); border-color: var(--pf-accent);
  box-shadow: 0 22px 44px -22px color-mix(in srgb, var(--pf-accent) 70%, transparent); }
.pf-proj-cover { aspect-ratio: 16/9; overflow: hidden; background: var(--pf-bg2); }
.pf-proj-cover img { width: 100%; height: 100%; object-fit: cover; display: block; }
.pf-proj-cover-ph { display: flex; align-items: center; justify-content: center;
  background: linear-gradient(135deg, var(--pf-accent), var(--pf-accent2)); }
.pf-proj-cover-ph span { font-family: "Cairo", sans-serif; font-size: 2.6rem; font-weight: 800; color: #fff; opacity: .95; }
.pf-proj-body { padding: 15px 17px; }
.pf-proj-title { margin: 0 0 5px; font-size: 1.06rem; font-weight: 700; }
.pf-proj-tag { margin: 0 0 10px; color: var(--pf-mut); font-size: .9rem; line-height: 1.5; }
.pf-proj-up { font-size: .82rem; color: var(--pf-accent); font-weight: 700; }

/* Footer */
.pf-footer { text-align: center; padding: 30px 20px 50px; }
.pf-built { display: inline-block; color: var(--pf-mut); text-decoration: none; font-size: .9rem;
  padding: 9px 18px; border-radius: 999px; border: 1px solid var(--pf-bd); background: var(--pf-card); }
.pf-built strong { color: var(--pf-accent); }
.pf-built:hover { color: var(--pf-fg); border-color: var(--pf-accent); }
.pf-edit-fab { position: fixed; inset-block-end: 20px; inset-inline-end: 20px; z-index: 40;
  background: var(--pf-accent); color: #fff; text-decoration: none; font-weight: 700; padding: 12px 20px; border-radius: 999px;
  box-shadow: 0 14px 32px -10px color-mix(in srgb, var(--pf-accent) 85%, transparent); }
.pf-edit-fab:hover { transform: translateY(-2px); }

@media (max-width: 560px) { .pf-hero { min-height: 70vh; } .pf-avatar { width: 116px; height: 116px; } }

/* ============================================================================
   NEW TEMPLATES (8–14) — distinct palettes, layouts and decoration.
   ========================================================================== */

/* 8. GLASS — glassmorphism + multi-colour gradient mesh, dark, modern SaaS */
body.pf-glass { --pf-bg:#0a0a1a; --pf-bg2:#15153240; --pf-fg:#eef0ff; --pf-mut:#a9add0;
  --pf-card:rgba(255,255,255,.06); --pf-bd:rgba(255,255,255,.14); --pf-glow:.5; --pf-accent2:#22d3ee; }
body.pf-glass .pf-hero::before {
  background:
    radial-gradient(560px 420px at 18% 12%, color-mix(in srgb, var(--pf-accent) 55%, transparent), transparent 60%),
    radial-gradient(560px 420px at 84% 18%, color-mix(in srgb, var(--pf-accent2) 50%, transparent), transparent 60%),
    radial-gradient(520px 420px at 50% 96%, color-mix(in srgb, #ec4899 38%, transparent), transparent 62%),
    linear-gradient(180deg, #0b0b1e, #0a0a16); }
body.pf-glass .pf-sec { background: rgba(255,255,255,.07); border-color: rgba(255,255,255,.16);
  backdrop-filter: blur(22px); box-shadow: 0 1px 0 rgba(255,255,255,.18) inset, 0 24px 60px -34px #000; }

/* 9. SIDEBAR — fixed side panel + scrolling content (desktop) */
body.pf-sidebar { --pf-bg:#0b0f17; --pf-bg2:#121826; --pf-fg:#eef2f9; --pf-mut:#9aabc4;
  --pf-card:rgba(255,255,255,.045); --pf-bd:rgba(255,255,255,.09); --pf-glow:.5; --pf-accent2:#38bdf8; }
@media (min-width: 900px) {
  body.pf-sidebar .pf-hero { position: fixed; inset-inline-start: 0; top: 0; bottom: 0; width: 360px;
    min-height: 100vh; padding: 48px 30px; border-inline-end: 1px solid var(--pf-bd); }
  body.pf-sidebar .pf-main { margin-inline-start: 360px; max-width: 720px; padding-top: 48px; }
  body.pf-sidebar .pf-footer { margin-inline-start: 360px; }
  body.pf-sidebar .pf-hero-inner { max-width: 300px; }
  body.pf-sidebar .pf-name { font-size: 1.9rem; }
}

/* 10. GRADIENT — vibrant animated multi-colour gradient, creative */
body.pf-gradient { --pf-bg:#120726; --pf-bg2:#1c0e3a; --pf-fg:#fff; --pf-mut:#e6d6ff;
  --pf-card:rgba(255,255,255,.12); --pf-bd:rgba(255,255,255,.22); --pf-glow:.4; --pf-accent2:#f472b6;
  background: linear-gradient(-45deg, var(--pf-accent), var(--pf-accent2), #6d28d9, #0ea5e9);
  background-size: 400% 400%; animation: pf-grad 20s ease infinite; }
@keyframes pf-grad { 0%{background-position:0% 50%} 50%{background-position:100% 50%} 100%{background-position:0% 50%} }
body.pf-gradient .pf-hero::before { background: linear-gradient(180deg, rgba(10,4,24,.18), rgba(10,4,24,.42)); }
body.pf-gradient .pf-hero::after { display: none; }
body.pf-gradient .pf-sec { background: rgba(255,255,255,.13); border-color: rgba(255,255,255,.25); backdrop-filter: blur(16px); }
body.pf-gradient .pf-skill { background: rgba(255,255,255,.18); border-color: rgba(255,255,255,.3); }

/* 11. MONO — light monochrome editorial, huge type, hairline sections */
body.pf-mono { --pf-bg:#fbfbf9; --pf-bg2:#ffffff; --pf-fg:#0c0c0c; --pf-mut:#76767a;
  --pf-card:transparent; --pf-bd:#e2e2dd; --pf-glow:.06; --pf-accent2:#0c0c0c; }
body.pf-mono .pf-hero::before { background: linear-gradient(180deg, #fff, var(--pf-bg)); }
body.pf-mono .pf-hero::after { opacity: .25; }
body.pf-mono .pf-name { font-size: clamp(2.4rem, 8vw, 4rem); letter-spacing: -1.5px; }
body.pf-mono .pf-avatar { border-color: #111; box-shadow: none; }
body.pf-mono .pf-sec { background: transparent; border: 0; border-top: 1px solid var(--pf-bd);
  border-radius: 0; padding-inline: 0; box-shadow: none; backdrop-filter: none; }
body.pf-mono .pf-h2::before { background: #111; }
body.pf-mono .pf-skill { background: transparent; border-color: #111; }
body.pf-mono .pf-cta { background: #111; }

/* 12. TERMINAL — developer dark, monospace, window-chrome cards */
body.pf-terminal { --pf-bg:#0a0e12; --pf-bg2:#0f141b; --pf-fg:#d6e6d8; --pf-mut:#7f9f86;
  --pf-card:#0d1219; --pf-bd:#1d2a22; --pf-glow:.35; --pf-accent2:#34d399; }
body.pf-terminal .pf-hero::after { opacity:.5;
  background-image: linear-gradient(var(--pf-bd) 1px, transparent 1px); background-size: 100% 30px; }
body.pf-terminal .pf-name, body.pf-terminal .pf-h2, body.pf-terminal .pf-exp-when, body.pf-terminal .pf-tagline {
  font-family: "JetBrains Mono", ui-monospace, "Cairo", monospace; }
body.pf-terminal .pf-tagline::before { content: "> "; color: var(--pf-accent); }
body.pf-terminal .pf-sec { padding-top: 40px; }
body.pf-terminal .pf-sec::before { content:""; position:absolute; top:14px; inset-inline-start:18px;
  width:10px; height:10px; border-radius:50%; background:#ff5f56;
  box-shadow: 18px 0 #ffbd2e, 36px 0 #27c93f; }

/* 13. WAVE — organic soft pastel shapes */
body.pf-wave { --pf-bg:#f3f1fb; --pf-bg2:#ffffff; --pf-fg:#241b3a; --pf-mut:#6b6189;
  --pf-card:#ffffff; --pf-bd:#e7e1f5; --pf-glow:.22; --pf-accent2:#fb7185; }
body.pf-wave .pf-hero::before {
  background:
    radial-gradient(420px 360px at 14% 20%, color-mix(in srgb, var(--pf-accent) 30%, transparent), transparent 60%),
    radial-gradient(460px 380px at 88% 16%, color-mix(in srgb, var(--pf-accent2) 28%, transparent), transparent 60%),
    linear-gradient(180deg, #fff, var(--pf-bg)); }
body.pf-wave .pf-hero { border-radius: 0 0 50% 50%/0 0 12% 12%; }
body.pf-wave .pf-avatar { border-radius: 42% 58% 56% 44%/52% 44% 56% 48%; }
body.pf-wave .pf-sec { border-radius: 28px; }

/* 14. LUXE — luxury agency, prominent background image, gold hairlines */
body.pf-luxe { --pf-bg:#0d0b09; --pf-bg2:#17120c; --pf-fg:#f6efe2; --pf-mut:#c8b89c;
  --pf-card:rgba(255,244,224,.04); --pf-bd:rgba(214,184,140,.22); --pf-glow:.32; --pf-accent2:#d4af6a; }
body.pf-luxe .pf-hero { min-height: 90vh; }
body.pf-luxe .pf-hero.has-bg::before { background: linear-gradient(180deg, rgba(8,6,4,.28), var(--pf-bg) 96%); }
body.pf-luxe .pf-name { font-weight: 800; letter-spacing: 2px; }
body.pf-luxe .pf-tagline { letter-spacing: 3px; text-transform: uppercase; font-size: .96rem; }
body.pf-luxe .pf-h2 { letter-spacing: 1px; }
body.pf-luxe .pf-avatar { border-radius: 8px; }

/* ============================================================================
   GALLERY (أعمالي) — uploaded images
   ========================================================================== */
.pf-gallery { display: grid; grid-template-columns: repeat(auto-fill, minmax(190px, 1fr)); gap: 14px; }
.pf-gitem { margin: 0; position: relative; border-radius: 18px; overflow: hidden; border: 1px solid var(--pf-bd);
  aspect-ratio: 4/3; background: var(--pf-bg2); }
.pf-gitem img { width: 100%; height: 100%; object-fit: cover; display: block; transition: transform .35s ease; }
.pf-gitem:hover img { transform: scale(1.07); }
.pf-gitem figcaption { position: absolute; inset-inline: 0; inset-block-end: 0; padding: 10px 14px;
  font-size: .85rem; font-weight: 600; color: #fff; background: linear-gradient(transparent, rgba(0,0,0,.78)); }

/* ============================================================================
   LAYOUTS (structure, independent of colour theme) — pf-l-<layout>
   ========================================================================== */
/* SPLIT — asymmetric hero (name anchored to one side) + two-column content */
@media (min-width: 820px) {
  body.pf-l-split .pf-hero { justify-content: flex-start; }
  body.pf-l-split .pf-hero-inner { margin: 0; margin-inline-start: 9%; max-width: 620px; text-align: start; }
  body.pf-l-split .pf-avatar { margin-inline: 0; }
  body.pf-l-split .pf-tagline { margin-inline: 0; }
  body.pf-l-split .pf-meta, body.pf-l-split .pf-links, body.pf-l-split .pf-cta-row { justify-content: flex-start; }
  body.pf-l-split .pf-name { font-size: clamp(3rem, 8vw, 5.6rem); }
  body.pf-l-split .pf-main { display: grid; grid-template-columns: 1fr 1fr; gap: 24px; align-items: start; }
  body.pf-l-split .pf-gallery-sec { grid-column: 1 / -1; }
}

/* BENTO — content sections as a varied grid */
@media (min-width: 820px) {
  body.pf-l-bento .pf-main { display: grid; grid-template-columns: repeat(6, 1fr); gap: 18px; grid-auto-flow: dense; }
  body.pf-l-bento .pf-sec { grid-column: span 3; margin-bottom: 0; }
  body.pf-l-bento .pf-sec:nth-of-type(3n+1) { grid-column: span 6; }
  body.pf-l-bento .pf-gallery-sec { grid-column: span 6; }
}

/* SIDEBAR — fixed side panel + scrolling content */
@media (min-width: 980px) {
  body.pf-l-sidebar .pf-hero { position: fixed; inset-inline-start: 0; top: 0; bottom: 0; width: 380px;
    min-height: 100vh; padding: 48px 32px; }
  body.pf-l-sidebar .pf-hero-inner { max-width: 320px; }
  body.pf-l-sidebar .pf-name { font-size: clamp(1.9rem, 3vw, 2.5rem); }
  body.pf-l-sidebar .pf-main { margin-inline-start: 380px; max-width: 760px; padding-top: 50px; }
  body.pf-l-sidebar .pf-footer { margin-inline-start: 380px; }
  body.pf-l-sidebar .pf-scroll { display: none; }
  body.pf-l-sidebar .pf-hero { border-inline-end: 1px solid var(--pf-bd); }
  /* stronger layout identities: bento = real cards, split = staggered rhythm */
  body.pf-l-bento .pf-sec { border: 1px solid var(--pf-bd); border-radius: 22px; padding: 26px;
    background: color-mix(in srgb, var(--pf-fg) 4%, transparent); }
  body.pf-l-bento .pf-sec:nth-of-type(3n+1) { border-color: color-mix(in srgb, var(--pf-accent) 45%, var(--pf-bd)); }
  body.pf-l-split .pf-sec:nth-of-type(even) { margin-top: 46px; }
  body.pf-l-split .pf-sec { border-inline-start: 3px solid color-mix(in srgb, var(--pf-accent) 55%, transparent); padding-inline-start: 22px; }
}

/* ---- MOTION modifiers ---- */
body.pf-motion-calm .pf-bg { animation: none; }
body.pf-motion-lively .pf-bg { animation-duration: 14s; }
body.pf-motion-lively .pf-hero-inner { animation-duration: .95s; }
body.pf-motion-lively .pf-avatar { animation: pf-float 5s ease-in-out infinite; }
body.pf-motion-lively .pf-skill:hover { transform: translateY(-4px) scale(1.05); }
body.pf-motion-lively .pf-proj:hover { transform: translateY(-7px) scale(1.01); }
@keyframes pf-float { 0%,100%{ transform: translateY(0); } 50%{ transform: translateY(-9px); } }
@media (prefers-reduced-motion: reduce) { .pf-bg, .pf-hero-inner, body.pf-gradient, .pf-avatar { animation: none !important; } }

/* ============================================================================
   SIGNATURE COMPOSITIONS — each template is a genuinely DIFFERENT design
   (distinct hero composition + section feel), not just a recolour.
   ========================================================================== */

/* MONO — left-aligned editorial: huge name, tiny square avatar, light, big headings */
body.pf-mono .pf-avatar { width: 76px; height: 76px; border-radius: 6px; box-shadow: none; margin: 0 0 22px; border-width: 2px; }
body.pf-mono .pf-name { font-size: clamp(3rem, 13vw, 7.2rem); letter-spacing: -2.5px; }
body.pf-mono .pf-h2 { font-size: clamp(1.6rem, 4vw, 2.4rem); }
@media (min-width: 760px) {
  body.pf-mono .pf-hero { justify-content: flex-start; }
  body.pf-mono .pf-hero-inner { text-align: start; margin: 0; margin-inline-start: 8%; max-width: 880px; }
  body.pf-mono .pf-meta, body.pf-mono .pf-links, body.pf-mono .pf-cta-row { justify-content: flex-start; }
  body.pf-mono .pf-tagline { margin-inline: 0; }
}

/* TERMINAL — hero framed as a code/terminal window */
body.pf-terminal .pf-hero-inner { max-width: 700px; border: 1px solid var(--pf-bd); border-radius: 12px;
  background: rgba(4, 9, 7, .62); padding: 54px 40px 38px; position: relative; backdrop-filter: blur(4px);
  box-shadow: 0 40px 80px -40px #000; }
body.pf-terminal .pf-hero-inner::after { content: "●  ●  ●"; position: absolute; top: 14px; inset-inline-start: 20px;
  font-size: .72rem; letter-spacing: 4px; color: #ff5f56; }
body.pf-terminal .pf-avatar { border-radius: 8px; }

/* LUXE — full-bleed: name anchored to bottom-start, spaced caps, minimal avatar */
body.pf-luxe .pf-avatar { width: 60px; height: 60px; }
body.pf-luxe .pf-name { letter-spacing: 4px; line-height: 1.1; }
@media (min-width: 760px) {
  body.pf-luxe .pf-hero { align-items: flex-end; justify-content: flex-start; padding-bottom: 9vh; }
  body.pf-luxe .pf-hero-inner { text-align: start; margin: 0; margin-inline-start: 7%; max-width: 780px; }
  body.pf-luxe .pf-meta, body.pf-luxe .pf-links, body.pf-luxe .pf-cta-row { justify-content: flex-start; }
  body.pf-luxe .pf-tagline { margin-inline: 0; }
}

/* BOLD — oversized name, no avatar circle, vibrant punch */
body.pf-bold .pf-name { font-size: clamp(3.2rem, 13vw, 7rem); letter-spacing: -2px; }
body.pf-bold .pf-avatar { width: 92px; height: 92px; border-radius: 20px; }

/* GLASS — floating glassy hero chip */
body.pf-glass .pf-hero-inner { background: rgba(255,255,255,.07); border: 1px solid rgba(255,255,255,.16);
  border-radius: 28px; padding: 48px 44px; backdrop-filter: blur(22px); max-width: 640px;
  box-shadow: 0 40px 90px -50px #000; }

/* MIDNIGHT — ultra-minimal & quiet: huge thin name, underline accent, lots of air */
body.pf-midnight .pf-name { font-weight: 700; letter-spacing: -1px; }
body.pf-midnight .pf-name::after { content: ""; display: block; width: 66px; height: 3px;
  margin: 24px auto 0; background: var(--pf-accent); border-radius: 3px; }
body.pf-midnight .pf-hero::after { display: none; }
body.pf-midnight .pf-chip-i { background: transparent; }

/* CLASSIC — editorial masthead: hairline rules framing the hero, spaced caps tagline */
body.pf-classic .pf-name { letter-spacing: 1px; }
body.pf-classic .pf-hero-inner::before, body.pf-classic .pf-hero-inner::after {
  content: ""; display: block; width: 130px; height: 1px; margin: 0 auto;
  background: color-mix(in srgb, var(--pf-fg) 45%, transparent); }
body.pf-classic .pf-hero-inner::before { margin-bottom: 26px; }
body.pf-classic .pf-hero-inner::after { margin-top: 26px; }
body.pf-classic .pf-tagline { letter-spacing: 2px; text-transform: uppercase; font-size: .92rem; }

/* ELEGANT — gold-framed centred hero, refined spaced caps */
body.pf-elegant .pf-hero-inner { border: 1px solid color-mix(in srgb, var(--pf-accent2) 60%, transparent);
  border-radius: 3px; padding: clamp(40px,5vw,56px); max-width: 660px; }
body.pf-elegant .pf-name { letter-spacing: 2px; }
body.pf-elegant .pf-tagline { letter-spacing: 3px; text-transform: uppercase; font-size: .88rem; }

/* ============================================================================
   PER-TEMPLATE CARD SHAPES — the content boxes look different per template too
   ========================================================================== */
/* NEON — glowing sharp bordered cards */
body.pf-neon .pf-sec { border-radius: 6px; border-color: color-mix(in srgb, var(--pf-accent) 45%, transparent);
  box-shadow: 0 0 0 1px color-mix(in srgb, var(--pf-accent) 28%, transparent) inset, 0 0 42px -18px var(--pf-accent); }
body.pf-neon .pf-sec:hover { box-shadow: 0 0 0 1px var(--pf-accent) inset, 0 0 52px -12px var(--pf-accent); transform: translateY(-3px); }
body.pf-neon .pf-skill { border-radius: 4px; }

/* WAVE — organic asymmetric corners + pill skills (alternating) */
body.pf-wave .pf-sec { border-radius: 34px 10px 34px 10px; }
body.pf-wave .pf-sec:nth-of-type(even) { border-radius: 10px 34px 10px 34px; }
body.pf-wave .pf-skill { border-radius: 999px; }

/* BOLD — sharp heavy blocks with thick accent border + big hover */
body.pf-bold .pf-sec { border-radius: 4px; border: 2px solid color-mix(in srgb, var(--pf-accent) 50%, transparent); }
body.pf-bold .pf-sec:hover { transform: translateY(-6px); border-color: var(--pf-accent); }
body.pf-bold .pf-skill { border-radius: 4px; font-weight: 800; }

/* ELEGANT — gold hairline frames, no accent bar */
body.pf-elegant .pf-sec { border-radius: 2px; border: 1px solid color-mix(in srgb, var(--pf-accent2) 42%, transparent); }
body.pf-elegant .pf-sec::before { display: none; }
body.pf-elegant .pf-skill { border-radius: 2px; background: transparent; border-color: color-mix(in srgb, var(--pf-accent2) 50%, transparent); }

/* TERMINAL — sharp window cards, monospace skills */
body.pf-terminal .pf-sec { border-radius: 8px; }
body.pf-terminal .pf-skill { border-radius: 4px; font-family: "JetBrains Mono", ui-monospace, monospace; }

/* MONO — borderless editorial blocks, square skills */
body.pf-mono .pf-sec::before { display: none; }
body.pf-mono .pf-skill { border-radius: 2px; }

/* CLASSIC — editorial: top double-rule, no fill, square outline skills */
body.pf-classic .pf-sec { background: transparent; border: 0; border-radius: 0; box-shadow: none;
  border-top: 3px double color-mix(in srgb, var(--pf-fg) 28%, transparent); padding-inline: 0; backdrop-filter: none; }
body.pf-classic .pf-sec::before { display: none; }
body.pf-classic .pf-skill { border-radius: 0; background: transparent; border-color: var(--pf-fg); }

/* GLASS — pill skills (cards already heavy-frosted) */
body.pf-glass .pf-skill { border-radius: 999px; }

/* MIDNIGHT — quiet thin cards, extra breathing room */
body.pf-midnight .pf-sec { border-radius: 14px; margin-bottom: 30px; }
body.pf-midnight .pf-skill { border-radius: 8px; background: transparent; }

/* LUXE — minimal cards, slim gold accent bar */
body.pf-luxe .pf-sec::before { background: var(--pf-accent2); width: 40px; }
body.pf-luxe .pf-skill { border-radius: 2px; }

/* ============================================================================
   MOTION — staggered entrance + scroll-reveal (.pf-rv added by JS, no-JS safe)
   ========================================================================== */
.pf-main > .pf-sec:nth-of-type(1) { animation-delay: .04s; }
.pf-main > .pf-sec:nth-of-type(2) { animation-delay: .12s; }
.pf-main > .pf-sec:nth-of-type(3) { animation-delay: .20s; }
.pf-main > .pf-sec:nth-of-type(4) { animation-delay: .28s; }
.pf-main > .pf-sec:nth-of-type(5) { animation-delay: .36s; }
.pf-rv { opacity: 0; transform: translateY(36px); animation: none !important;
  transition: opacity .7s ease, transform .75s cubic-bezier(.2,.7,.2,1); }
.pf-rv-in { opacity: 1; transform: none; }
body.pf-motion-lively .pf-sec:hover { transform: translateY(-5px); }
body.pf-motion-lively .pf-rv { transform: translateY(48px) scale(.98); }
@media (prefers-reduced-motion: reduce) { .pf-rv { opacity: 1 !important; transform: none !important; } }

/* ============================================================================
   Portfolio BUILDER (extends community chrome) — uses main.css variables.
   ========================================================================== */
.pfb-wrap { max-width: 720px; margin: 0 auto; }
.pfb-head { display: flex; justify-content: space-between; align-items: flex-start; gap: 14px; margin-bottom: 18px; flex-wrap: wrap; }
.pfb-title { margin: 0 0 4px; font-size: 1.6rem; font-weight: 800; }
.pfb-sub { margin: 0; color: var(--muted, #667); }
.pfb-hero-cta { background: linear-gradient(135deg, #7c3aed, #2563eb); color:#fff; border-radius: 18px; padding: 20px; margin-bottom: 18px; }
.pfb-hero-cta h2 { margin: 0 0 4px; font-size: 1.2rem; }
.pfb-hero-cta p { margin: 0 0 14px; opacity: .92; font-size: .92rem; }
.pfb-brief { width: 100%; margin: 0 0 14px; padding: 11px 14px; border: 0; border-radius: 12px;
  font: inherit; resize: vertical; background: rgba(255,255,255,.92); color: #1f1147; }
.pfb-brief::placeholder { color: #6b5b95; }
.pfb-design-btns { display: flex; gap: 10px; flex-wrap: wrap; }
.pfb-design-btn { cursor: pointer; border: 0; border-radius: 12px; padding: 13px 24px; font: inherit; font-weight: 800;
  background: #fff; color: #4c1d95; font-size: 1rem; }
.pfb-design-btn2 { background: rgba(255,255,255,.16); color: #fff; border: 1px solid rgba(255,255,255,.45); }
.pfb-design-btn:disabled { opacity: .7; cursor: wait; }
.pfb-design-note { margin: 10px 0 0; font-size: .85rem; opacity: .92; min-height: 1.1em; }
.pfb-live { background: color-mix(in srgb, #16a34a 12%, transparent); border: 1px solid color-mix(in srgb, #16a34a 40%, transparent);
  border-radius: 12px; padding: 12px 15px; margin-bottom: 18px; font-size: .92rem; display: flex; gap: 10px; align-items: center; flex-wrap: wrap; }
.pfb-live-url { font-weight: 700; word-break: break-all; }
.pfb-copy { cursor: pointer; border: 1px solid var(--border, #ccd); background: var(--card, #fff); border-radius: 8px; padding: 4px 10px; font: inherit; }
.pfb-form { display: flex; flex-direction: column; gap: 16px; }
.pfb-card { background: var(--card, #fff); border: 1px solid var(--border, #e6eaf1); border-radius: 16px; padding: 18px; }
.pfb-card h2 { margin: 0 0 12px; font-size: 1.1rem; font-weight: 700; }
.pfb-card-head { display: flex; justify-content: space-between; align-items: center; margin-bottom: 6px; }
.pfb-card-head h2 { margin: 0; }
.pfb-ai { cursor: pointer; border: 0; border-radius: 10px; padding: 8px 15px; font: inherit; font-weight: 700; color: #fff; background: linear-gradient(135deg, #7c3aed, #2563eb); }
.pfb-ai:disabled { opacity: .6; cursor: wait; }
.pfb-ai-note { font-size: .85rem; color: var(--muted, #667); margin: 0 0 12px; }
.pfb-label { display: block; font-weight: 600; font-size: .9rem; margin: 12px 0 6px; }
.pfb-form input[type=text], .pfb-form input[type=url], .pfb-form textarea {
  width: 100%; padding: 10px 12px; border: 1px solid var(--border, #ccd); border-radius: 10px; font: inherit; background: var(--bg, #fff); color: inherit; }
.pfb-form textarea { resize: vertical; }
.pfb-hint { font-size: .85rem; color: var(--muted, #667); margin: -4px 0 12px; }
.pfb-themes { display: grid; grid-template-columns: repeat(4, 1fr); gap: 10px; }
.pfb-theme { cursor: pointer; text-align: center; }
.pfb-theme input { position: absolute; opacity: 0; }
.pfb-theme-prev { display: block; height: 50px; border-radius: 10px; border: 2px solid transparent; }
.pfb-theme-aurora .pfb-theme-prev { background: linear-gradient(135deg, #0e1730, #2563eb); }
.pfb-theme-neon .pfb-theme-prev { background: linear-gradient(135deg, #05060a, #22d3ee); }
.pfb-theme-midnight .pfb-theme-prev { background: linear-gradient(135deg, #08080b, #334155); }
.pfb-theme-elegant .pfb-theme-prev { background: linear-gradient(135deg, #1a1612, #caa24a); }
.pfb-theme-classic .pfb-theme-prev { background: linear-gradient(135deg, #fffdf9, #d8c9a8); }
.pfb-theme-bold .pfb-theme-prev { background: linear-gradient(135deg, #1c0e3a, #ec4899); }
.pfb-theme-minimal .pfb-theme-prev { background: linear-gradient(135deg, #ffffff, #c7d2fe); }
.pfb-theme-glass .pfb-theme-prev { background: linear-gradient(135deg, #151532, #22d3ee 60%, #ec4899); }
.pfb-theme-sidebar .pfb-theme-prev { background: linear-gradient(90deg, #121826 40%, #38bdf8); }
.pfb-theme-gradient .pfb-theme-prev { background: linear-gradient(-45deg, #2563eb, #f472b6, #6d28d9); }
.pfb-theme-mono .pfb-theme-prev { background: linear-gradient(135deg, #ffffff, #d8d8d2); }
.pfb-theme-terminal .pfb-theme-prev { background: linear-gradient(135deg, #0a0e12, #34d399); }
.pfb-theme-wave .pfb-theme-prev { background: linear-gradient(135deg, #f3f1fb, #fb7185); }
.pfb-theme-luxe .pfb-theme-prev { background: linear-gradient(135deg, #17120c, #d4af6a); }
.pfb-segs { display: flex; gap: 8px; flex-wrap: wrap; }
.pfb-seg { cursor: pointer; }
.pfb-seg input { position: absolute; opacity: 0; }
.pfb-seg span { display: inline-block; padding: 7px 16px; border-radius: 10px; border: 1px solid var(--border,#ccd);
  font-size: .88rem; background: var(--bg,#fff); }
.pfb-seg input:checked + span { border-color: var(--accent,#2563eb); background: color-mix(in srgb, var(--accent,#2563eb) 12%, transparent); font-weight: 700; }
.pfb-theme input:checked + .pfb-theme-prev { border-color: var(--accent, #2563eb); box-shadow: 0 0 0 3px color-mix(in srgb, var(--accent, #2563eb) 30%, transparent); }
.pfb-theme-name { display: block; font-size: .76rem; margin-top: 6px; }
.pfb-accent-row { display: flex; align-items: center; gap: 12px; flex-wrap: wrap; }
.pfb-accent-row input[type=color] { width: 48px; height: 38px; border: 1px solid var(--border, #ccd); border-radius: 8px; background: none; cursor: pointer; }
.pfb-swatches { display: flex; gap: 7px; flex-wrap: wrap; }
.pfb-swatch { width: 28px; height: 28px; border-radius: 7px; border: 0; cursor: pointer; }
.pfb-bg-row { display: flex; gap: 12px; align-items: center; flex-wrap: wrap; margin-bottom: 12px; }
.pfb-bg-thumb { width: 120px; height: 68px; border-radius: 10px; object-fit: cover; border: 1px solid var(--border, #ccd); }
.pfb-upload-form { display: flex; gap: 10px; align-items: center; flex-wrap: wrap; margin-top: 4px; }
.pfb-upload-form input[type=file] { font: inherit; max-width: 220px; }
.btn-sm { padding: 7px 14px; font-size: .9rem; }
.pfb-gallery-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(90px, 1fr)); gap: 10px; margin-bottom: 14px; }
.pfb-gthumb { position: relative; aspect-ratio: 1/1; border-radius: 10px; overflow: hidden; border: 1px solid var(--border, #ccd); }
.pfb-gthumb img { width: 100%; height: 100%; object-fit: cover; display: block; }
.pfb-gdel { position: absolute; top: 4px; inset-inline-end: 4px; width: 22px; height: 22px; border: 0; border-radius: 6px;
  background: rgba(0,0,0,.6); color: #fff; cursor: pointer; font-size: .8rem; line-height: 1; }
.pfb-gdel:hover { background: #dc2626; }
.pfb-toggle { display: flex; gap: 10px; align-items: center; padding: 8px 0; cursor: pointer; }
.pfb-toggle input { width: 18px; height: 18px; }
.pfb-publish-card { border-color: color-mix(in srgb, var(--accent, #2563eb) 40%, transparent); }
.pfb-publish span { font-size: .95rem; }
.pfb-actions { display: flex; gap: 10px; }
.pfb-save { min-width: 120px; }
@media (max-width: 560px){ .pfb-themes { grid-template-columns: repeat(2, 1fr); } }

/* ===== Builder redesign: numbered steps + sticky save bar ===== */
.pfb-status { font-weight: 800; font-size: .85rem; color: #6b7191; background: #eef0f6;
  padding: .35rem .9rem; border-radius: 999px; }
.pfb-status.on { color: #15803d; background: #dcfce7; }
.pfb-step { display: inline-grid; place-items: center; width: 26px; height: 26px; border-radius: 50%;
  background: var(--pf-accent, #4f46e5); color: #fff; font-size: .85rem; margin-inline-end: .35rem; }
.pfb-grid2 { display: grid; grid-template-columns: 1fr 1fr; gap: 1rem; }
@media (max-width: 640px) { .pfb-grid2 { grid-template-columns: 1fr; } }
.pfb-toggles { display: flex; flex-wrap: wrap; gap: .4rem 1.2rem; margin-bottom: .8rem; }
.pfb-bar { position: fixed; bottom: 0; inset-inline: 0; z-index: 90;
  display: flex; align-items: center; gap: .7rem; justify-content: center;
  padding: .7rem 1rem calc(.7rem + env(safe-area-inset-bottom));
  background: rgba(255,255,255,.92); backdrop-filter: blur(10px);
  border-top: 1px solid #e7e8f3; box-shadow: 0 -8px 30px rgba(16,32,46,.08); }
.pfb-bar .pfb-save { min-width: 220px; font-weight: 800; }
.pfb-bar-hint { font-size: .82rem; color: #b45309; font-weight: 700; }
.pfb-wrap { padding-bottom: 90px; }   /* room for the fixed bar */

/* ===== Depth pass: layered cards, elevation, accent edges ===== */
.pf-sec {
  background: var(--pf-card);
  border: 1px solid var(--pf-bd);
  border-radius: 24px;
  padding: 34px 36px;
  margin-bottom: 30px;
  box-shadow:
    0 1px 0 rgba(255,255,255,.04) inset,
    0 24px 60px -28px rgba(0,0,0,.55),
    0 6px 18px -8px color-mix(in srgb, var(--pf-accent) 22%, transparent);
  position: relative;
}
.pf-sec::before {
  content: ""; position: absolute; top: 0; inset-inline: 24px; height: 2px; border-radius: 2px;
  background: linear-gradient(90deg, transparent, color-mix(in srgb, var(--pf-accent) 65%, transparent), transparent);
}
body.pf-classic .pf-sec, body.pf-minimal .pf-sec, body.pf-mono .pf-sec, body.pf-wave .pf-sec {
  box-shadow: 0 18px 44px -22px rgba(30,33,71,.25), 0 4px 14px -6px color-mix(in srgb, var(--pf-accent) 14%, transparent);
}
.pf-h2 { position: relative; }
.pf-skill { box-shadow: 0 4px 14px -6px color-mix(in srgb, var(--pf-accent) 45%, transparent); }
.pf-proj { box-shadow: 0 16px 40px -18px rgba(0,0,0,.5); transition: transform .2s, box-shadow .2s; }
.pf-proj:hover { transform: translateY(-4px); box-shadow: 0 26px 60px -20px color-mix(in srgb, var(--pf-accent) 45%, rgba(0,0,0,.5)); }

/* ===== Layout identity at EVERY width (multi-column still needs wide screens) ===== */
body.pf-l-split .pf-hero { justify-content: flex-start; }
body.pf-l-split .pf-hero-inner { text-align: start; margin-inline-start: 6%; }
body.pf-l-split .pf-meta, body.pf-l-split .pf-links, body.pf-l-split .pf-cta-row { justify-content: flex-start; }
body.pf-l-split .pf-avatar { margin-inline: 0; }
body.pf-l-split .pf-sec { border-inline-start: 3px solid color-mix(in srgb, var(--pf-accent) 55%, transparent); padding-inline-start: 24px; }
body.pf-l-bento .pf-sec { border-radius: 18px; padding: 24px; border-width: 2px; }
body.pf-l-bento .pf-sec:nth-of-type(odd) { border-color: color-mix(in srgb, var(--pf-accent) 45%, var(--pf-bd)); }
body.pf-l-bento .pf-h2 { display: inline-block; background: color-mix(in srgb, var(--pf-accent) 14%, transparent);
  padding: 4px 14px; border-radius: 10px; }
body.pf-l-sidebar .pf-hero { min-height: 58vh; border-bottom: 4px solid var(--pf-accent); }
body.pf-l-sidebar .pf-hero-inner { max-width: 520px; }