/* Parix AI Social Media Post Generator: prompt-bar hero (design/prompt-bar.html).
   Every rule is scoped to .pxpg .pxh and every class is prefixed pb- so nothing here
   reaches the header, the breadcrumb styles or the sections below the hero. */
.pxpg .pxh{
  --or:#EC6517;--or2:#FF8A3D;--or3:#C9500C;--ors:#FFF1E6;
  --ink:#1E1914;--ink2:#4A4038;--mu:#7A6E64;--line:#EDE3D9;--line2:#F4ECE4;--cream:#FFF8F2;--sand:#F7EFE7;
  --ok:#2F9E5E;--bad:#D9452E;
  --serif:"Fraunces",Georgia,serif;--sans:"Figtree",system-ui,-apple-system,"Segoe UI",sans-serif;
  position:relative;padding:40px 20px 90px;isolation:isolate;background:#fff;
  font-family:var(--sans);color:var(--ink);line-height:1.5;-webkit-font-smoothing:antialiased;overflow-x:clip}
.pxpg .pxh *{box-sizing:border-box}
.pxpg .pxh button,.pxpg .pxh input,.pxpg .pxh textarea{font:inherit;color:inherit;letter-spacing:normal;text-transform:none}
.pxpg .pxh :focus-visible{outline:2.5px solid var(--or);outline-offset:2px}
.pxpg .pxh .pb-sr{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}
.pxpg .pxh::before{content:"";position:absolute;left:50%;top:330px;width:1100px;max-width:100vw;height:520px;transform:translateX(-50%);z-index:-1;pointer-events:none;
  background:radial-gradient(ellipse at center,rgba(255,170,110,.22),rgba(255,170,110,0) 65%)}

/* ---------- head ---------- */
.pxpg .pxh .pb-head{max-width:900px;margin:0 auto;text-align:center}
.pxpg .pxh .crumbs{justify-content:center}
.pxpg .pxh h1{font-family:var(--serif);font-weight:600;font-size:clamp(42px,6.6vw,84px);line-height:.98;letter-spacing:-.035em;margin:18px 0;color:var(--ink);text-transform:none}
.pxpg .pxh h1 .pb-ln{display:block;overflow:hidden;padding-bottom:.05em}
.pxpg .pxh h1 .pb-ln>span{display:inline-block}
.pxpg .pxh .pb-lede{font-size:clamp(16.5px,1.6vw,19px);color:var(--ink2);max-width:580px;margin:0 auto}

/* ---------- prompt box ---------- */
.pxpg .pxh .pb-box-wrap{max-width:940px;margin:38px auto 0;position:relative;scroll-margin-top:90px}
.pxpg .pxh .pb-box{position:relative;background:#fff;border:1px solid var(--line);border-radius:28px;
  box-shadow:0 0 0 6px rgba(255,244,236,.7),0 30px 70px -40px rgba(140,60,10,.25);transition:border-color .2s,box-shadow .2s}
.pxpg .pxh .pb-box:focus-within{border-color:var(--or);box-shadow:0 0 0 6px rgba(255,232,214,.8),0 30px 70px -40px rgba(140,60,10,.3)}
.pxpg .pxh .pb-box.pb-err{border-color:var(--bad)}
.pxpg .pxh .pb-ta{position:relative}
.pxpg .pxh .pb-ta textarea{display:block;width:100%;margin:0;border:0;border-radius:28px 28px 0 0;box-shadow:none;resize:none;background:transparent;min-height:118px;height:auto;max-height:260px;padding:24px 28px 6px;font-size:19px;line-height:1.5;color:var(--ink)}
.pxpg .pxh .pb-ta textarea:focus{outline:none;box-shadow:none;border:0}
.pxpg .pxh .pb-ghost{position:absolute;left:28px;right:28px;top:24px;font-size:19px;line-height:1.5;color:#A99D93;pointer-events:none;text-align:left}
.pxpg .pxh .pb-cur{display:inline-block;width:2px;height:1.1em;background:var(--or);vertical-align:-3px;margin-left:1px;animation:pbblink 1s steps(1) infinite}
@keyframes pbblink{50%{opacity:0}}
.pxpg .pxh .pb-ta.pb-has .pb-ghost{display:none}
.pxpg .pxh .pb-cnt{position:absolute;right:24px;bottom:4px;font-size:12px;color:var(--mu)}
.pxpg .pxh .pb-errmsg{display:none;color:var(--bad);font-size:13.5px;padding:0 28px;margin:0;text-align:left}
.pxpg .pxh .pb-box.pb-err .pb-errmsg{display:block}

.pxpg .pxh .pb-bar{display:flex;align-items:center;gap:8px;flex-wrap:wrap;padding:12px 14px 14px 20px}
.pxpg .pxh .pb-pill{position:relative;display:inline-flex;align-items:center;gap:6px;height:38px;min-height:0;margin:0;border:1px solid var(--line);background:#fff;border-radius:99px;padding:0 14px;font-size:13.5px;font-weight:500;line-height:1;color:var(--ink);cursor:pointer;box-shadow:none;transition:border-color .2s,background .2s}
.pxpg .pxh .pb-pill:hover{border-color:#D9C9BA;background:#fff;color:var(--ink)}
.pxpg .pxh .pb-pill .pb-k{color:#A39689;font-weight:400}
.pxpg .pxh .pb-pill:focus-within{border-color:var(--or);background:#fff}
.pxpg .pxh .pb-pill input{border:0;background:transparent;width:110px;height:auto;min-height:0;margin:0;font-weight:500;padding:0;font-size:13.5px;box-shadow:none;color:var(--ink)}
.pxpg .pxh .pb-pill input:focus{outline:none;border:0;box-shadow:none}
.pxpg .pxh .pb-pill input::placeholder{color:#B9AEA4;font-weight:400;opacity:1}
.pxpg .pxh button.pb-pill svg{transition:transform .2s;color:var(--mu)}
.pxpg .pxh button.pb-pill[aria-expanded=true]{border-color:var(--or);background:#fff}
.pxpg .pxh button.pb-pill[aria-expanded=true] svg{transform:rotate(180deg)}

.pxpg .pxh .pb-dd{position:relative}
.pxpg .pxh .pb-menu{position:absolute;z-index:30;top:calc(100% + 8px);left:0;min-width:250px;background:#fff;border:1px solid var(--line);border-radius:18px;padding:6px;box-shadow:0 24px 50px -18px rgba(80,35,5,.35);display:none}
.pxpg .pxh .pb-menu.pb-on{display:block}
.pxpg .pxh .pb-menu button{display:flex;flex-direction:column;align-items:flex-start;width:100%;height:auto;min-height:0;margin:0;text-align:left;border:0;background:transparent;border-radius:12px;padding:9px 12px;cursor:pointer;color:var(--ink);box-shadow:none;line-height:1.35}
.pxpg .pxh .pb-menu button:hover,.pxpg .pxh .pb-menu button:focus-visible{background:var(--cream);outline:none;color:var(--ink)}
.pxpg .pxh .pb-menu button b{font-size:14px;font-weight:600}
.pxpg .pxh .pb-menu button small{font-size:12.5px;color:var(--mu);font-style:italic}
.pxpg .pxh .pb-menu button[aria-checked=true]{background:var(--ors)}
.pxpg .pxh .pb-menu button[aria-checked=true] b{color:var(--or3)}
.pxpg .pxh .pb-menu button[aria-checked=true] b::after{content:" \2713"}
/* image style menu: a two-column grid of styles plus a scene box */
.pxpg .pxh .pb-menu-img{width:400px;max-width:calc(100vw - 40px);display:none;grid-template-columns:1fr 1fr;gap:2px}
.pxpg .pxh .pb-menu-img.pb-on{display:grid}
.pxpg .pxh .pb-menu-img button{padding:8px 10px}
.pxpg .pxh .pb-menu-img button b{font-size:13.5px}
.pxpg .pxh .pb-menu-img button small{font-style:normal;font-size:12px}
.pxpg .pxh .pb-scene{grid-column:1/-1;margin:6px 4px 4px;padding-top:10px;border-top:1px dashed var(--line)}
.pxpg .pxh .pb-scene label{display:block;font-size:12.5px;font-weight:600;color:var(--ink2);margin:0 0 6px}
.pxpg .pxh .pb-scene label span{font-weight:400;color:var(--mu)}
.pxpg .pxh .pb-scene input{width:100%;height:40px;min-height:0;margin:0;border:1.5px solid var(--line);border-radius:12px;padding:0 12px;font-size:13.5px;background:#FFFDFB;color:var(--ink);box-shadow:none}
.pxpg .pxh .pb-scene input:focus{outline:none;border-color:var(--or);box-shadow:0 0 0 3px var(--ors)}

.pxpg .pxh .pb-prow{display:flex;align-items:center;gap:10px;flex-wrap:wrap;margin:6px 20px 0;padding:12px 0 2px;border-top:1px dashed var(--line)}
.pxpg .pxh .pb-plabel{font-size:13px;font-weight:600;color:var(--mu)}
.pxpg .pxh .pb-plats{display:flex;align-items:center;flex-wrap:wrap;gap:7px}
.pxpg .pxh .pb-pt{display:inline-flex;align-items:center;gap:7px;height:36px;min-height:0;margin:0;border:1px solid var(--line);background:#fff;border-radius:99px;padding:0 12px 0 4px;cursor:pointer;font-size:13.5px;font-weight:500;line-height:1;color:var(--ink2);box-shadow:none;transition:all .2s}
.pxpg .pxh .pb-ic{width:26px;height:26px;border-radius:50%;display:grid;place-items:center;flex:none;transition:filter .2s,opacity .2s}
.pxpg .pxh .pb-ic svg{width:13px;height:13px}
.pxpg .pxh .pb-pt small{font-weight:400;color:#A39689;font-size:12px}
.pxpg .pxh .pb-ck{width:14px;height:14px;border-radius:50%;background:var(--or);color:#fff;display:grid;place-items:center;font-size:9px;margin-left:1px}
.pxpg .pxh .pb-pt:hover{border-color:#D9C9BA}
.pxpg .pxh .pb-pt[aria-pressed=true]{border-color:#F5C9A8;background:#FFF7F1;color:var(--ink)}
.pxpg .pxh .pb-pt[aria-pressed=false]{color:var(--mu);background:#fff}
.pxpg .pxh .pb-pt[aria-pressed=false] .pb-ic{filter:grayscale(1);opacity:.35}
.pxpg .pxh .pb-pt[aria-pressed=false] .pb-ck{background:#fff;border:1px solid #DCCFC3;color:transparent}
.pxpg .pxh .pb-ig{background:linear-gradient(45deg,#F58529,#DD2A7B,#8134AF)}
.pxpg .pxh .pb-fb{background:#1877F2}.pxpg .pxh .pb-li{background:#0A66C2}.pxpg .pxh .pb-xx{background:#000}.pxpg .pxh .pb-pn{background:#E60023}
.pxpg .pxh .pb-pcount{font-size:12.5px;color:#A39689;font-weight:400;margin-left:auto;white-space:nowrap}

.pxpg .pxh .pb-send{margin:0 0 0 auto;position:relative;overflow:hidden;height:50px;min-height:0;border:0;border-radius:99px;padding:0 26px;background:linear-gradient(180deg,var(--or2),var(--or) 55%,var(--or3));color:#fff;font-weight:600;font-size:16px;line-height:1;cursor:pointer;display:inline-flex;align-items:center;gap:9px;box-shadow:0 10px 24px -12px rgba(236,101,23,.7);transition:filter .2s,transform .1s}
.pxpg .pxh .pb-send:hover{filter:brightness(1.06);color:#fff}
.pxpg .pxh .pb-send:active{transform:translateY(1px)}
.pxpg .pxh .pb-send::after{content:"";position:absolute;top:0;left:-60%;width:40%;height:100%;background:linear-gradient(100deg,transparent,rgba(255,255,255,.45),transparent);transform:skewX(-20deg);animation:pbshine 4s infinite}
@keyframes pbshine{0%,65%{left:-60%}100%{left:130%}}
.pxpg .pxh .pb-send[disabled]{cursor:progress;filter:saturate(.7)}
.pxpg .pxh .pb-spin{width:16px;height:16px;border-radius:50%;border:2.5px solid #fff;border-right-color:transparent;animation:pbsp .7s linear infinite;display:none}
.pxpg .pxh .pb-send[disabled] .pb-spin{display:block}
.pxpg .pxh .pb-send[disabled] .pb-star{display:none}
@keyframes pbsp{to{transform:rotate(360deg)}}
.pxpg .pxh .pb-kbd{font-size:12px;color:var(--mu);text-align:right;padding:0 22px 12px;margin-top:-6px}
.pxpg .pxh .pb-kbd kbd{font-family:inherit;font-size:11px;border:1px solid var(--line);border-bottom-width:2px;border-radius:5px;padding:1px 5px;background:#fff;color:var(--ink);box-shadow:none}

.pxpg .pxh .pb-ideas{display:flex;gap:8px;justify-content:center;flex-wrap:wrap;margin-top:24px}
.pxpg .pxh .pb-ideas button{height:auto;min-height:0;margin:0;border:1px solid var(--line);background:#fff;border-radius:99px;padding:7px 14px;font-size:14px;line-height:1.4;cursor:pointer;color:var(--ink2);box-shadow:none;transition:all .2s}
.pxpg .pxh .pb-ideas button:hover{background:var(--ors);border-color:#F6CDB0;color:var(--or3)}
.pxpg .pxh .pb-meta{display:flex;gap:18px;justify-content:center;flex-wrap:wrap;margin-top:18px;font-size:13px;color:#A39689}
.pxpg .pxh .pb-meta>span{display:inline-flex;align-items:center;gap:6px}
.pxpg .pxh .pb-meta a{color:var(--or3);font-weight:600}
.pxpg .pxh .pb-dots{display:inline-flex;gap:3px}
.pxpg .pxh .pb-dots i{width:7px;height:7px;border-radius:50%;background:var(--or)}
.pxpg .pxh .pb-dots i.pb-used{background:#E6DACE}

/* ---------- loading + results ---------- */
.pxpg .pxh .pb-out{max-width:1260px;margin:64px auto 0;display:none;scroll-margin-top:90px}
.pxpg .pxh .pb-out.pb-on{display:block}
.pxpg .pxh .pb-rhead{display:flex;justify-content:space-between;align-items:flex-end;gap:16px;flex-wrap:wrap;margin-bottom:20px;padding:0 4px}
.pxpg .pxh .pb-rhead h2{font-family:var(--serif);font-weight:600;font-size:clamp(28px,3.2vw,40px);letter-spacing:-.02em;margin:0;line-height:1.05;color:var(--ink)}
.pxpg .pxh .pb-rhead p{margin:6px 0 0;color:var(--ink2)}
.pxpg .pxh .pb-rhead p b{color:var(--ink)}
.pxpg .pxh .pb-ract{display:flex;gap:8px;flex-wrap:wrap;align-items:center}
.pxpg .pxh .pb-ract[hidden]{display:none}
.pxpg .pxh .pb-btn{display:inline-flex;align-items:center;justify-content:center;gap:7px;margin:0;border:0;border-radius:99px;font-weight:700;cursor:pointer;text-decoration:none;height:42px;min-height:0;padding:0 17px;font-size:14px;line-height:1;transition:all .15s;white-space:nowrap;box-shadow:none}
.pxpg .pxh .pb-btn[disabled]{opacity:.45;cursor:not-allowed}
.pxpg .pxh .pb-b-or{background:var(--or);color:#fff}.pxpg .pxh .pb-b-or:hover{background:var(--or3);color:#fff}
.pxpg .pxh .pb-b-ink{background:var(--ink);color:#fff}.pxpg .pxh .pb-b-ink:hover{background:#3a3027;color:#fff}
.pxpg .pxh .pb-b-gh{background:#fff;border:1.5px solid var(--line);color:var(--ink)}.pxpg .pxh .pb-b-gh:hover{border-color:var(--ink);background:#fff;color:var(--ink)}
.pxpg .pxh .pb-b-gh[disabled]:hover{border-color:var(--line)}
.pxpg .pxh .pb-arrows{display:flex;gap:6px}
.pxpg .pxh .pb-arrows button{width:42px;height:42px;min-height:0;margin:0;padding:0;border-radius:50%;border:1.5px solid var(--line);background:#fff;color:var(--ink);cursor:pointer;display:grid;place-items:center;box-shadow:none}
.pxpg .pxh .pb-arrows button:hover{border-color:var(--ink);background:#fff}

.pxpg .pxh .pb-rail{display:flex;gap:20px;overflow-x:auto;padding:10px 4px 26px;scroll-snap-type:x mandatory;scrollbar-width:thin}
.pxpg .pxh .pb-phone{flex:none;width:320px;scroll-snap-align:start;background:#fff;border:1px solid var(--line);border-radius:30px;padding:14px;box-shadow:0 30px 60px -36px rgba(110,50,5,.45);display:flex;flex-direction:column;gap:12px}
.pxpg .pxh .pb-ph-top{display:flex;align-items:center;gap:10px;padding:2px 4px}
.pxpg .pxh .pb-ph-top .pb-pi{width:30px;height:30px;border-radius:10px;display:grid;place-items:center;flex:none}
.pxpg .pxh .pb-ph-top .pb-pi svg{width:15px;height:15px}
.pxpg .pxh .pb-ph-top b{display:block;font-size:15px;line-height:1.15}
.pxpg .pxh .pb-ph-top small{color:var(--mu);font-size:12px}
.pxpg .pxh .pb-ph-top .pb-rw{margin-left:auto;height:32px;padding:0 12px;font-size:12.5px}
.pxpg .pxh .pb-screen{background:var(--sand);border-radius:20px;overflow:hidden}
.pxpg .pxh .pb-uh{display:flex;align-items:center;gap:8px;padding:10px 12px;background:#fff;border-bottom:1px solid var(--line2)}
.pxpg .pxh .pb-av{width:30px;height:30px;border-radius:50%;background:#fff;border:1px solid var(--line);display:grid;place-items:center;flex:none}
.pxpg .pxh .pb-av svg{width:17px;height:17px;display:block}
.pxpg .pxh .pb-uh b{font-size:12.5px;display:block;line-height:1.1}
.pxpg .pxh .pb-uh small{font-size:11px;color:#888}
.pxpg .pxh .pb-stage{display:flex;align-items:center;justify-content:center;height:260px;padding:14px}
.pxpg .pxh .pb-stage canvas{display:block;max-width:100%;max-height:100%;width:auto;height:auto;border-radius:10px;box-shadow:0 16px 30px -16px rgba(80,35,5,.5);background:#efe6dd}
.pxpg .pxh .pb-cap,.pxpg .pxh .pb-title{width:100%;margin:0;border:1.5px solid var(--line);border-radius:16px;padding:12px 14px;font-size:14px;line-height:1.55;background:#FFFDFB;color:var(--ink);box-shadow:none}
.pxpg .pxh .pb-cap{min-height:150px;height:auto;resize:vertical}
.pxpg .pxh .pb-title{height:auto;min-height:0;font-weight:600}
.pxpg .pxh .pb-cap:focus,.pxpg .pxh .pb-title:focus{outline:none;border-color:var(--or);box-shadow:0 0 0 4px var(--ors)}
.pxpg .pxh .pb-meter{display:flex;align-items:center;gap:10px;font-size:12.5px;color:var(--mu);padding:0 2px}
.pxpg .pxh .pb-mbar{flex:1;height:5px;border-radius:99px;background:var(--line2);overflow:hidden}
.pxpg .pxh .pb-mbar i{display:block;height:100%;border-radius:99px;background:var(--ok);transition:width .25s,background .25s}
.pxpg .pxh .pb-meter b{color:var(--ok)}
.pxpg .pxh .pb-meter.pb-over b{color:var(--bad)}
.pxpg .pxh .pb-ft{display:flex;gap:8px}
.pxpg .pxh .pb-ft .pb-btn{flex:1;height:40px;font-size:13.5px}
.pxpg .pxh .pb-ft .pb-open{flex:0 0 auto;padding:0 13px}

.pxpg .pxh .pb-skel{background:linear-gradient(90deg,var(--line2) 0%,#FBF6F1 50%,var(--line2) 100%);background-size:200% 100%;animation:pbsk 1.2s infinite linear;border-radius:12px}
@keyframes pbsk{to{background-position:-200% 0}}
.pxpg .pxh .pb-steps{display:flex;gap:8px;justify-content:center;flex-wrap:wrap;margin-bottom:22px}
.pxpg .pxh .pb-steps span{display:inline-flex;align-items:center;gap:7px;border:1px solid var(--line);border-radius:99px;padding:7px 14px;font-size:13.5px;color:var(--mu);transition:all .25s}
.pxpg .pxh .pb-steps span.pb-doing{border-color:var(--or);background:var(--ors);color:var(--ink)}
.pxpg .pxh .pb-steps span.pb-done{border-color:#CDE5D5;background:#F0F8F3;color:var(--ok)}

@media (max-width:820px){
  .pxpg .pxh .pb-bar{padding:12px 14px 14px}
  .pxpg .pxh .pb-send{width:100%;margin-left:0;justify-content:center}
  .pxpg .pxh .pb-kbd{display:none}
}
@media (max-width:560px){
  .pxpg .pxh{padding:28px 14px 70px}
  .pxpg .pxh .pb-ta textarea,.pxpg .pxh .pb-ghost{font-size:17px}
  .pxpg .pxh .pb-ta textarea{padding:20px 20px 6px}
  .pxpg .pxh .pb-ghost{left:20px;right:20px;top:20px}
  .pxpg .pxh .pb-pill{flex:1 1 auto}
  .pxpg .pxh .pb-pill input{width:100%}
  .pxpg .pxh .pb-prow{margin:6px 16px 0}
  .pxpg .pxh .pb-pt small{display:none}
  .pxpg .pxh .pb-pcount{width:100%;margin-left:0}
  .pxpg .pxh .pb-phone{width:86vw}
  .pxpg .pxh .pb-dd{flex:1 1 auto}
  .pxpg .pxh .pb-dd .pb-pill{width:100%;justify-content:space-between}
  .pxpg .pxh .pb-menu-img{width:calc(100vw - 28px);left:auto;right:0}
}
@media (prefers-reduced-motion:reduce){
  .pxpg .pxh *,.pxpg .pxh *::before,.pxpg .pxh *::after{animation:none!important;transition:none!important}
}