/* The same production-budget dial on Home, Story, Studio, Projects and
   Library. Everything is prefixed so host-page styles cannot turn it back
   into a different purchase screen. */
.pcp-overlay{
  position:fixed;inset:0;z-index:1000;display:flex;align-items:center;justify-content:center;
  padding:24px;background:rgba(13,28,49,.68);
  -webkit-backdrop-filter:blur(3px);backdrop-filter:blur(3px)
}
.pcp-dialog{
  position:relative;width:min(960px,100%);max-height:min(calc(100dvh - 48px),calc(100vh - 48px));
  overflow-y:auto;padding:44px 52px 36px;border-radius:12px;background:var(--paper,#fffdf8);
  color:var(--ink,#14243b);box-shadow:0 24px 64px rgba(13,28,49,.3);
  font-family:"DM Sans",system-ui,-apple-system,sans-serif
}
.pcp-dialog:focus{outline:none}
.pcp-kicker{
  display:block;margin-bottom:14px;color:#bd4a34;
  font:700 13px/1 "Space Mono",monospace;letter-spacing:.14em
}
.pcp-visually-hidden{
  position:absolute;width:1px;height:1px;margin:-1px;padding:0;overflow:hidden;border:0;
  clip:rect(0 0 0 0);clip-path:inset(50%);white-space:nowrap
}
.pcp-x{
  position:absolute;top:18px;right:20px;display:grid;place-items:center;width:48px;height:48px;
  padding:0;border:0;border-radius:50%;background:#eeece7;color:var(--ink,#14243b);
  font:600 25px/1 "DM Sans",sans-serif;cursor:pointer
}
.pcp-x:hover{background:#e1ded7}
.pcp-x:focus-visible,.pcp-buy:focus-visible,.pcp-runtime:focus-visible,.pcp-close-button:focus-visible{
  outline:3px solid var(--coral,#f4775d);outline-offset:3px
}
.pcp-error{
  margin:0 0 16px;padding:12px 14px;border-radius:8px;background:#fdecea;
  color:#8f2f21;font-size:15px;line-height:1.5
}
.pcp-lede{margin:18px 0;color:var(--muted,#647080);font-size:16px;line-height:1.6}

/* The cartoon dial is drawn over a real range input. Drag, keyboard and exact
   number entry therefore all select the same server-priced amount. */
.pcp-dial-wrap{margin-top:-4px}
.pcp-dial{position:relative;display:flex;justify-content:center;margin:0}
.pcp-dial-face{width:240px;height:225px;overflow:visible;touch-action:none;cursor:grab}
.pcp-dial.is-turning .pcp-dial-face{cursor:grabbing}
.pcp-dial-shadow{fill:rgba(20,36,59,.13)}
.pcp-dial-body{fill:#fffdf8;stroke:#14243b;stroke-width:3}
.pcp-dial-track{fill:none;stroke:#e6e8e5;stroke-width:9;stroke-linecap:round}
.pcp-dial-fill{fill:none;stroke:var(--teal,#3e9997);stroke-width:9;stroke-linecap:round}
.pcp-dial-knob{fill:var(--coral,#f4775d);stroke:#14243b;stroke-width:3}
.pcp-dial-shine{fill:rgba(255,255,255,.62)}
.pcp-dial-grip{transition:transform .12s ease-out}
.pcp-dial.is-turning .pcp-dial-grip{transition:none}
.pcp-dial-readout{
  position:absolute;top:50%;left:50%;transform:translate(-50%,-50%);display:flex;
  flex-direction:column;align-items:center;gap:4px;width:142px;text-align:center;pointer-events:none
}
.pcp-dial-readout b{color:#14243b;font:700 32px/1 "DM Sans",sans-serif}
.pcp-dial-readout span{color:#2f7371;font:700 15px/1.25 "Space Mono",monospace}
.pcp-dial-readout small{color:#5c6672;font-size:14px;line-height:1.35}
.pcp-dial-range{
  position:absolute;inset:auto 0 -6px;width:218px;height:26px;margin:0;opacity:0;cursor:pointer
}
.pcp-dial-range:focus-visible{opacity:1;outline:3px solid var(--coral,#f4775d);outline-offset:3px}
.pcp-dial-actions{
  display:flex;align-items:center;justify-content:center;gap:12px;flex-wrap:wrap;margin-top:15px
}
.pcp-exact{
  display:inline-flex;align-items:center;gap:2px;min-height:50px;padding:0 16px;border:1.5px solid #d8dcda;
  border-radius:12px;background:#fff;color:#7b8590;font:700 16px/1 "DM Sans",sans-serif;
  transition:border-color .16s,box-shadow .16s
}
.pcp-exact:hover{border-color:#b9c1bd}
.pcp-exact:focus-within{border-color:var(--teal,#3e9997);box-shadow:0 0 0 3px rgba(62,153,151,.28)}
.pcp-exact input{
  width:68px;border:0;background:none;color:#14243b;font:700 17px/1 "DM Sans",sans-serif;
  -moz-appearance:textfield;text-align:left
}
.pcp-exact input:focus{outline:none}
.pcp-exact input::-webkit-outer-spin-button,.pcp-exact input::-webkit-inner-spin-button{-webkit-appearance:none;margin:0}
.pcp-buy{
  min-height:50px;padding:0 28px;border:0;border-radius:8px;background:var(--coral,#f4775d);
  color:#fff;font:700 17px/1 "DM Sans",sans-serif;cursor:pointer
}
.pcp-buy:hover{background:#df6048}
.pcp-buy[disabled]{opacity:.58;cursor:default}
.pcp-dial-note{
  max-width:52em;margin:16px auto 0;color:#5c6672;font-size:15px;line-height:1.6;
  text-align:center
}

.pcp-runtimes{margin:22px 0 4px;padding-top:18px;border-top:1px solid #e6e8e5}
.pcp-label{
  display:block;margin-bottom:10px;color:#2f7371;
  font:700 11px/1 "Space Mono",monospace;letter-spacing:.09em;text-transform:uppercase
}
.pcp-runtime-row{display:grid;grid-template-columns:repeat(5,minmax(0,1fr));gap:10px}
.pcp-runtime{
  display:flex;flex-direction:column;align-items:center;justify-content:center;gap:4px;min-height:72px;
  padding:10px 5px;border:1.5px solid #dedfdc;border-radius:12px;background:#fff;text-align:center;
  cursor:pointer;transition:border-color .16s,background-color .16s
}
.pcp-runtime b{color:#14243b;font:600 15px/1.2 "DM Sans",sans-serif}
.pcp-runtime small{color:#68727e;font:400 13px/1.2 "DM Sans",sans-serif}
.pcp-runtime:hover{border-color:var(--teal,#3e9997)}
.pcp-runtime.is-selected{border-color:var(--teal,#3e9997);background:#f4faf8;box-shadow:inset 0 0 0 1px var(--teal,#3e9997)}
.pcp-runtime.is-selected small{color:#2f7371}

.pcp-history{margin-top:22px;padding-top:18px;border-top:1px solid #e6e8e5}
.pcp-history ul{display:flex;flex-direction:column;gap:8px;max-height:220px;margin:0;padding:0;overflow:auto;list-style:none}
.pcp-history li{display:grid;grid-template-columns:54px minmax(0,1fr) auto;gap:10px;align-items:baseline;font-size:14px}
.pcp-delta{color:#2f7371;font:700 14px/1 "Space Mono",monospace;text-align:right}
.pcp-history b{font-weight:600;text-transform:capitalize}
.pcp-history small{color:#8a95a1;font-size:12px;white-space:nowrap}
.pcp-actions{display:flex;justify-content:flex-end;margin-top:22px}
.pcp-close-button{
  min-width:88px;min-height:44px;padding:0 20px;border:1px solid var(--line,#dedfdc);border-radius:8px;
  background:#fff;color:var(--ink,#14243b);font:600 16px/1 "DM Sans",sans-serif;cursor:pointer
}
.pcp-close-button:hover{border-color:var(--ink,#14243b)}

@media(max-width:760px){
  .pcp-dialog{padding:40px 28px 28px}
  .pcp-runtime-row{grid-template-columns:repeat(3,minmax(0,1fr))}
}
@media(max-width:560px){
  .pcp-overlay{align-items:flex-end;padding:0}
  .pcp-dialog{width:100%;max-height:min(94dvh,94vh);padding:34px 18px 24px;border-radius:12px 12px 0 0}
  .pcp-kicker{margin-right:54px}
  .pcp-x{top:10px;right:12px}
  .pcp-dial-face{width:205px;height:192px}
  .pcp-dial-range{width:205px}
  .pcp-dial-note{text-align:left}
  .pcp-runtime-row{grid-template-columns:repeat(2,minmax(0,1fr))}
  .pcp-history li{grid-template-columns:48px minmax(0,1fr)}
  .pcp-history small{grid-column:2;white-space:normal}
}
@media(prefers-reduced-motion:reduce){
  .pcp-dial-grip,.pcp-exact,.pcp-runtime{transition:none}
}

/* Account menu -------------------------------------------------------------
   The balance stays visible for quick checking; the identity and the formerly
   isolated Sign out control become one compact, predictable account menu. */
.account-menu{position:relative;flex:0 0 auto;color:var(--ink,#14243b);font-family:"DM Sans",system-ui,sans-serif}
.account-menu-trigger{
  display:inline-flex;align-items:center;gap:8px;min-height:44px;max-width:250px;padding:5px 9px 5px 6px;
  border:1px solid rgba(20,36,59,.16);border-radius:999px;background:#fff;color:#3c4b5d;
  font:600 13px/1.2 "DM Sans",sans-serif;cursor:pointer
}
.account-menu-trigger:hover{border-color:var(--coral,#ee755b);background:#fff9f6;color:var(--ink,#14243b)}
.account-menu-trigger:focus-visible{outline:3px solid var(--coral,#ee755b);outline-offset:2px}
.account-menu-avatar{position:relative;display:grid;place-items:center;width:32px;height:32px;flex:0 0 32px;overflow:hidden;border-radius:50%;background:var(--mint,#dbecea);color:#2f7371}
.account-menu-avatar svg{width:18px;height:18px;fill:none;stroke:currentColor;stroke-width:1.8;stroke-linecap:round;stroke-linejoin:round}
.account-menu-avatar-photo{position:absolute;inset:0;width:100%;height:100%;border-radius:inherit;object-fit:cover}
.account-menu-avatar.has-photo svg{visibility:hidden}
.account-menu-trigger .studio-email,.account-menu-trigger .account-email{
  display:block;min-width:0;max-width:165px;padding-left:0!important;border-left:0!important;
  color:inherit;font:600 12px/1.25 "Space Mono",monospace;overflow:hidden;text-overflow:ellipsis;white-space:nowrap
}
.account-menu-trigger .studio-email span{display:inline}
.account-menu-chevron{display:grid;place-items:center;width:14px;height:14px;flex:0 0 14px;transition:transform .16s ease}
.account-menu-chevron svg{width:14px;height:14px;fill:none;stroke:currentColor;stroke-width:2;stroke-linecap:round;stroke-linejoin:round}
.account-menu-trigger[aria-expanded="true"] .account-menu-chevron{transform:rotate(180deg)}
.account-menu-panel{
  position:absolute;z-index:900;top:calc(100% + 10px);right:0;width:min(310px,calc(100vw - 24px));padding:10px;
  border:1px solid #dfe2df;border-radius:13px;background:var(--paper,#fffdf8);color:var(--ink,#14243b);
  box-shadow:0 18px 54px rgba(13,28,49,.22)
}
.account-menu-panel[hidden]{display:none!important}
.account-menu-kicker{display:block;padding:8px 10px 9px;color:#697681;font:700 10px/1 "Space Mono",monospace;letter-spacing:.13em}
.account-menu-item,.account-menu-credit,.account-menu-panel .account-menu-signout{
  display:grid!important;grid-template-columns:34px minmax(0,1fr);align-items:center;gap:9px;width:100%;min-height:52px;
  margin:0;padding:8px 9px!important;border:0!important;border-radius:9px;background:none!important;color:#334356!important;
  font:500 15px/1.25 "DM Sans",sans-serif!important;text-align:left;text-decoration:none!important;cursor:pointer
}
.account-menu-item:hover,.account-menu-credit:hover,.account-menu-panel .account-menu-signout:hover{background:#f1f5f3!important;color:var(--ink,#14243b)!important;text-decoration:none!important}
.account-menu-item:focus-visible,.account-menu-credit:focus-visible,.account-menu-panel .account-menu-signout:focus-visible{outline:2px solid var(--coral,#ee755b);outline-offset:-2px}
.account-menu-credit{margin-bottom:5px!important;background:#eef7f4!important;color:#245f5d!important}
.account-menu-credit:hover{background:#e2f1ed!important;color:#174b49!important}
.account-menu-item-icon{display:grid;place-items:center;width:34px;height:34px;border-radius:8px;background:#eef1ef;color:#526170}
.account-menu-credit .account-menu-item-icon{background:#d5ebe6;color:#2f7d79}
.account-menu-item-icon svg{width:18px;height:18px;fill:none;stroke:currentColor;stroke-width:1.75;stroke-linecap:round;stroke-linejoin:round}
.account-menu-item b,.account-menu-credit b,.account-menu-signout b{display:block;font-weight:650}
.account-menu-item small,.account-menu-credit small{display:block;margin-top:2px;color:#7a8690;font-size:12px;line-height:1.25;overflow-wrap:anywhere}
.account-menu-separator{height:1px;margin:6px 7px;background:#e6e8e5}
.account-menu-panel .account-menu-signout{min-width:0;min-height:48px;color:#a8442f!important}
.account-menu-panel .account-menu-signout:after{content:none!important}

/* Projects and Library use the navy account bar. */
.library-topbar .account-menu-trigger{border-color:rgba(255,255,255,.28);background:rgba(255,255,255,.08);color:#fff}
.library-topbar .account-menu-trigger:hover{border-color:var(--coral,#ee755b);background:rgba(238,117,91,.15);color:#fff}
.library-topbar .account-menu-avatar{background:rgba(219,236,234,.16);color:#a9d8d3}

@media(max-width:560px){
  /* The same destinations are inside the menu, so the phone bar does not need
     duplicate 44px shortcut buttons competing with the balance and account. */
  .account-menu-ready>.nav-chip{display:none!important}
  .account-menu-ready{flex-wrap:nowrap!important}
  .account-menu-trigger{width:44px;min-width:44px;max-width:44px;padding:5px;justify-content:center}
  .account-menu-trigger .studio-email,.account-menu-trigger .account-email,.account-menu-chevron{display:none!important}
  .account-menu-panel{position:fixed;top:auto;right:12px;bottom:12px;left:12px;width:auto;max-height:calc(100dvh - 24px);overflow:auto}
  .account-menu-panel .account-menu-signout{display:grid!important;width:100%!important;min-width:0!important;min-height:48px!important;padding:8px 9px!important;font-size:15px!important}
  .welcome-nav .account-bar.account-menu-ready{display:flex;min-width:44px;width:auto}
  .library-topbar .studio-account.account-menu-ready{width:auto;margin-left:auto}
}
@media(prefers-reduced-motion:reduce){.account-menu-chevron{transition:none}}